From 53a20a997580a04bfa1061ba9d468e272daafbd8 Mon Sep 17 00:00:00 2001
From: Dustin Carlino <dabreegster@gmail.com>
Date: Wed, 4 Sep 2024 17:43:59 +0100
Subject: [PATCH] Group some sidebar controls, and stop using extra divs around
 everything, now that pico does reasonable things

---
 web/src/App.svelte             |  23 ++++---
 web/src/ClippedPBFs.svelte     |  24 ++++---
 web/src/CostFunction.svelte    |  40 +++++------
 web/src/EdgeCostApp.svelte     |  61 ++++++++---------
 web/src/InteractiveApp.svelte  |  39 +++++------
 web/src/SidebarControls.svelte | 117 +++++++++++++++------------------
 web/src/StreetView.svelte      |  18 +++--
 7 files changed, 155 insertions(+), 167 deletions(-)

diff --git a/web/src/App.svelte b/web/src/App.svelte
index 278cf79..9ed27a1 100644
--- a/web/src/App.svelte
+++ b/web/src/App.svelte
@@ -55,15 +55,17 @@
     <Header app="main" />
   </div>
   <div slot="left">
-    <label>
-      {#if pmtiles == null}
-        Open a <i>.pmtiles</i>
-        file produced by the tool. Note this file stays in your browser; it doesn't
-        get uploaded anywhere.
-      {/if}
-      <input bind:this={fileInput} on:change={fileLoaded} type="file" />
-    </label>
-    <div>
+    <details open={!outputMetadata}>
+      <summary role="button" class="secondary">Load a file</summary>
+      <label>
+        {#if pmtiles == null}
+          Open a <i>.pmtiles</i>
+          file produced by the tool. Note this file stays in your browser; it doesn't
+          get uploaded anywhere.
+        {/if}
+        <input bind:this={fileInput} on:change={fileLoaded} type="file" />
+      </label>
+
       <label>
         Or load an example:
         <select bind:value={example}>
@@ -80,7 +82,8 @@
           <option value="lisbon">Lisbon</option>
         </select>
       </label>
-    </div>
+    </details>
+
     {#if outputMetadata}
       <SidebarControls {outputMetadata} {map} bind:controls />
     {/if}
diff --git a/web/src/ClippedPBFs.svelte b/web/src/ClippedPBFs.svelte
index 1c9233d..555a370 100644
--- a/web/src/ClippedPBFs.svelte
+++ b/web/src/ClippedPBFs.svelte
@@ -2,16 +2,14 @@
   export let example: string;
 </script>
 
-<div>
-  <label>
-    Or load an example:
-    <select bind:value={example}>
-      <option value="">Custom file loaded</option>
-      <option value="antwerp">Antwerp</option>
-      <option value="berlin">Berlin</option>
-      <option value="london">South London</option>
-      <option value="paris">Paris</option>
-      <option value="seattle">Seattle</option>
-    </select>
-  </label>
-</div>
+<label>
+  Or load an example:
+  <select bind:value={example}>
+    <option value="">Custom file loaded</option>
+    <option value="antwerp">Antwerp</option>
+    <option value="berlin">Berlin</option>
+    <option value="london">South London</option>
+    <option value="paris">Paris</option>
+    <option value="seattle">Seattle</option>
+  </select>
+</label>
diff --git a/web/src/CostFunction.svelte b/web/src/CostFunction.svelte
index 5006af2..aec214e 100644
--- a/web/src/CostFunction.svelte
+++ b/web/src/CostFunction.svelte
@@ -74,17 +74,15 @@
   $: setCost(costChoice);
 </script>
 
-<div>
-  <label>
-    Cost function:
-    <select bind:value={costChoice}>
-      <option value="Distance">Distance</option>
-      <option value="Generalized">Generalized cost function</option>
-      <option value="ByLTS">Weight per LTS</option>
-      <option value="OsmHighwayType">Set a weight per OSM highway type</option>
-    </select>
-  </label>
-</div>
+<label>
+  Cost function:
+  <select bind:value={costChoice}>
+    <option value="Distance">Distance</option>
+    <option value="Generalized">Generalized cost function</option>
+    <option value="ByLTS">Weight per LTS</option>
+    <option value="OsmHighwayType">Set a weight per OSM highway type</option>
+  </select>
+</label>
 
 <button on:click={() => (showJson = true)}>See cost function JSON</button>
 
@@ -156,15 +154,13 @@
     {/each}
   </ul>
 
-  <div>
-    <label>
-      Give roads a good score if they have at least this many nearby amenities:
-      <input
-        type="number"
-        min="0"
-        bind:value={generalized.minimum_amenities}
-        on:change={() => (cost = cost)}
-      />
-    </label>
-  </div>
+  <label>
+    Give roads a good score if they have at least this many nearby amenities:
+    <input
+      type="number"
+      min="0"
+      bind:value={generalized.minimum_amenities}
+      on:change={() => (cost = cost)}
+    />
+  </label>
 {/if}
diff --git a/web/src/EdgeCostApp.svelte b/web/src/EdgeCostApp.svelte
index 462cec4..ec77837 100644
--- a/web/src/EdgeCostApp.svelte
+++ b/web/src/EdgeCostApp.svelte
@@ -215,31 +215,32 @@
     <Header app="costs" />
   </div>
   <div slot="left">
-    <label>
-      Open an <i>.osm.pbf</i>
-      file
-      <input bind:this={fileInput} on:change={fileLoaded} type="file" />
-    </label>
-    <ClippedPBFs bind:example />
-    <OverpassSelector
-      {map}
-      on:gotXml={gotXml}
-      on:loading={(e) => (loading = e.detail)}
-      on:error={(e) => (loading = e.detail)}
-    />
+    <details open={!network}>
+      <summary role="button" class="secondary">Change areas</summary>
+      <label>
+        Open an <i>.osm.pbf</i>
+        file
+        <input bind:this={fileInput} on:change={fileLoaded} type="file" />
+      </label>
+      <ClippedPBFs bind:example />
+      <OverpassSelector
+        {map}
+        on:gotXml={gotXml}
+        on:loading={(e) => (loading = e.detail)}
+        on:error={(e) => (loading = e.detail)}
+      />
+    </details>
 
     {#if network}
-      <hr />
-      <div>
-        <label>
-          Color edges by:
-          <select bind:value={colorBy}>
-            <option value="lts">LTS</option>
-            <option value="cost">Edge cost (relative to length)</option>
-            <option value="nearby_amenities">Nearby amenities</option>
-          </select>
-        </label>
-      </div>
+      <label>
+        Color edges by:
+        <select bind:value={colorBy}>
+          <option value="lts">LTS</option>
+          <option value="cost">Edge cost (relative to length)</option>
+          <option value="nearby_amenities">Nearby amenities</option>
+        </select>
+      </label>
+
       {#if colorBy == "lts"}
         <Legend
           rows={[
@@ -263,6 +264,7 @@
             ],
           ]}
         />
+
         <p>
           Note: LTS model from <a
             href="https://github.com/BikeOttawa/stressmodel/blob/master/stressmodel.js"
@@ -278,13 +280,12 @@
           decimalPlaces={1}
         />
       {/if}
-      <div>
-        <label style:color={colors.lts_not_allowed}>
-          <input type="checkbox" bind:checked={showNotAllowed} />
-          Show cyclists not allowed
-        </label>
-      </div>
-      <hr />
+
+      <label style:color={colors.lts_not_allowed}>
+        <input type="checkbox" bind:checked={showNotAllowed} />
+        Show cyclists not allowed
+      </label>
+
       <CostFunction bind:cost />
     {/if}
   </div>
diff --git a/web/src/InteractiveApp.svelte b/web/src/InteractiveApp.svelte
index f63f95e..e5d894b 100644
--- a/web/src/InteractiveApp.svelte
+++ b/web/src/InteractiveApp.svelte
@@ -115,27 +115,28 @@
     <Header app="interactive" />
   </div>
   <div slot="left">
-    <label>
-      Open an <i>.osm.pbf</i>
-      file
-      <input bind:this={fileInput} on:change={fileLoaded} type="file" />
-    </label>
-    <ClippedPBFs bind:example />
-    <OverpassSelector
-      {map}
-      on:gotXml={gotXml}
-      on:loading={(e) => (loading = e.detail)}
-      on:error={(e) => (loading = e.detail)}
-    />
+    <details open={!network}>
+      <summary role="button" class="secondary">Change areas</summary>
+      <label>
+        Open an <i>.osm.pbf</i>
+        file
+        <input bind:this={fileInput} on:change={fileLoaded} type="file" />
+      </label>
+      <ClippedPBFs bind:example />
+      <OverpassSelector
+        {map}
+        on:gotXml={gotXml}
+        on:loading={(e) => (loading = e.detail)}
+        on:error={(e) => (loading = e.detail)}
+      />
+    </details>
 
     {#if network}
-      <div>
-        <label>
-          Max requests (limit for faster updates):
-          <br />
-          <input type="number" bind:value={maxRequests} min={1} />
-        </label>
-      </div>
+      <label>
+        Max requests (limit for faster updates):
+        <br />
+        <input type="number" bind:value={maxRequests} min={1} />
+      </label>
       <CostFunction bind:cost />
     {/if}
 
diff --git a/web/src/SidebarControls.svelte b/web/src/SidebarControls.svelte
index 25eb42d..dff57c7 100644
--- a/web/src/SidebarControls.svelte
+++ b/web/src/SidebarControls.svelte
@@ -27,20 +27,20 @@
 </script>
 
 <p>{outputMetadata.config.requests.description}</p>
-<div>
-  <button
-    on:click={() => window.alert(JSON.stringify(outputMetadata, null, "  "))}
-  >
-    See all output details
-  </button>
-</div>
-<div>
+<button
+  on:click={() => window.alert(JSON.stringify(outputMetadata, null, "  "))}
+>
+  See all output details
+</button>
+
+<details>
+  <summary role="button" class="secondary">Route network layer</summary>
+
   <label>
     <input type="checkbox" bind:checked={$showRouteNetwork} />
     Route network
   </label>
-</div>
-<div>
+
   <label>
     Max for line width styling:
     <br />
@@ -51,17 +51,14 @@
       on:change={() => (controls = controls)}
     />
   </label>
-</div>
 
-<div>
   <label>
     <input type="checkbox" bind:checked={$showOrigins} />
     <span style="color: {colors.origins}">
       Origins ({outputMetadata.num_origins.toLocaleString()})
     </span>
   </label>
-</div>
-<div>
+
   <label>
     Change origin point size:
     <br />
@@ -72,17 +69,14 @@
       on:change={() => (controls = controls)}
     />
   </label>
-</div>
 
-<div>
   <label>
     <input type="checkbox" bind:checked={$showDestinations} />
     <span style="color: {colors.destinations}">
       Destinations ({outputMetadata.num_destinations.toLocaleString()})
     </span>
   </label>
-</div>
-<div>
+
   <label>
     Change destination point size:
     <br />
@@ -93,57 +87,54 @@
       on:change={() => (controls = controls)}
     />
   </label>
-</div>
 
-{#if outputMetadata.config.elevation_geotiff}
-  <div>
+  {#if outputMetadata.config.elevation_geotiff}
     <label>
       <input type="checkbox" bind:checked={$showSlope} />
       Visualize slope
     </label>
-  </div>
-{/if}
+  {/if}
 
-{#if $showSlope}
-  <SequentialLegend colorScale={slopeColors} limits={slopeLimits} />
-{:else}
-  <hr />
-  <Legend
-    rows={[
-      [
-        `${ltsNames.lts1}: ${total(outputMetadata.total_meters_lts1)}`,
-        colors.lts1,
-      ],
-      [
-        `${ltsNames.lts2}: ${total(outputMetadata.total_meters_lts2)}`,
-        colors.lts2,
-      ],
-      [
-        `${ltsNames.lts3}: ${total(outputMetadata.total_meters_lts3)}`,
-        colors.lts3,
-      ],
-      [
-        `${ltsNames.lts4}: ${total(outputMetadata.total_meters_lts4)}`,
-        colors.lts4,
-      ],
-      // Shouldn't happen
-      [
-        `${ltsNames.lts_not_allowed}: ${total(
-          outputMetadata.total_meters_not_allowed,
-        )}`,
-        colors.lts_not_allowed,
-      ],
-    ]}
-  />
-  <p>
-    Note: LTS model from <a
-      href="https://github.com/BikeOttawa/stressmodel/blob/master/stressmodel.js"
-      target="_blank"
-    >
-      BikeOttawa
-    </a>
-  </p>
-{/if}
+  {#if $showSlope}
+    <SequentialLegend colorScale={slopeColors} limits={slopeLimits} />
+  {:else}
+    <Legend
+      rows={[
+        [
+          `${ltsNames.lts1}: ${total(outputMetadata.total_meters_lts1)}`,
+          colors.lts1,
+        ],
+        [
+          `${ltsNames.lts2}: ${total(outputMetadata.total_meters_lts2)}`,
+          colors.lts2,
+        ],
+        [
+          `${ltsNames.lts3}: ${total(outputMetadata.total_meters_lts3)}`,
+          colors.lts3,
+        ],
+        [
+          `${ltsNames.lts4}: ${total(outputMetadata.total_meters_lts4)}`,
+          colors.lts4,
+        ],
+        // Shouldn't happen
+        [
+          `${ltsNames.lts_not_allowed}: ${total(
+            outputMetadata.total_meters_not_allowed,
+          )}`,
+          colors.lts_not_allowed,
+        ],
+      ]}
+    />
+    <p>
+      Note: LTS model from <a
+        href="https://github.com/BikeOttawa/stressmodel/blob/master/stressmodel.js"
+        target="_blank"
+      >
+        BikeOttawa
+      </a>
+    </p>
+  {/if}
+</details>
 
 <hr />
 <StreetView {map} bind:enabled={controls.streetviewOn} />
diff --git a/web/src/StreetView.svelte b/web/src/StreetView.svelte
index 516f3d5..555dc6d 100644
--- a/web/src/StreetView.svelte
+++ b/web/src/StreetView.svelte
@@ -53,14 +53,12 @@
   StreetView
 </label>
 {#if enabled}
-  <div>
-    <label>
-      <input type="radio" bind:group={source} value="google" />
-      Google StreetView
-    </label>
-    <label>
-      <input type="radio" bind:group={source} value="bing" />
-      Bing Streetside
-    </label>
-  </div>
+  <label>
+    <input type="radio" bind:group={source} value="google" />
+    Google StreetView
+  </label>
+  <label>
+    <input type="radio" bind:group={source} value="bing" />
+    Bing Streetside
+  </label>
 {/if}