Refactor SequentialLegend and Loading

Urban-Analytics-Technology-Platform · Apr 26, 2024 · cb41eb5 · cb41eb5
1 parent 6138287
commit cb41eb5
Show file tree

Hide file tree

Showing 7 changed files with 29 additions and 73 deletions.
diff --git a/viewer/package-lock.json b/viewer/package-lock.json
diff --git a/viewer/src/App.svelte b/viewer/src/App.svelte
@@ -28,6 +28,7 @@
     streetviewOn: false,
   };
 
+  // TODO Add Loading screen
   let fileInput: HTMLInputElement;
   function fileLoaded(e: Event) {
     try {

diff --git a/viewer/src/EdgeCostApp.svelte b/viewer/src/EdgeCostApp.svelte
@@ -27,11 +27,14 @@
   import CostFunction from "./CostFunction.svelte";
   import Header from "./Header.svelte";
   import Layout from "./Layout.svelte";
-  import Loading from "./Loading.svelte";
   import OverpassSelector from "./OverpassSelector.svelte";
   import Popup from "./Popup.svelte";
-  import { Legend, PropertiesTable } from "svelte-utils";
-  import SequentialLegend from "./SequentialLegend.svelte";
+  import {
+    Loading,
+    SequentialLegend,
+    Legend,
+    PropertiesTable,
+  } from "svelte-utils";
 
   onMount(async () => {
     await init();
@@ -50,7 +53,7 @@
   let cost: Cost = "Distance";
   let colorBy: ColorBy = "cost";
   let showNotAllowed = false;
-  let loading = false;
+  let loading = "";
   // Note the 0th entry is "not allowed"; it won't be filled out at all
   let percentByLength = [0, 0, 0, 0, 0];
   let maxCostRatio = 1.0;
@@ -59,7 +62,7 @@
   let fileInput: HTMLInputElement;
   async function fileLoaded(e: Event) {
     example = "";
-    loading = true;
+    loading = "Loading file";
     loadBytes(await fileInput.files![0].arrayBuffer());
   }
 
@@ -80,12 +83,12 @@
     } catch (err) {
       window.alert(`Problem importing osm.pbf file: ${err}`);
     }
-    loading = false;
+    loading = "";
   }
 
   async function loadExample(example: string) {
     if (example != "") {
-      loading = true;
+      loading = `Loading ${example}`;
       let resp = await fetch(
         `https://assets.od2net.org/pbf_clips/${example}.osm.pbf`,
       );
@@ -191,12 +194,11 @@
     return result;
   }
 
-  let overpassMessage = "";
   function gotXml(e: CustomEvent<string>) {
-    overpassMessage = "Parsing XML";
+    loading = "Parsing XML";
     // TODO Can we avoid turning into bytes?
     loadBytes(new TextEncoder().encode(e.detail));
-    overpassMessage = "";
+    loading = "";
   }
 
   function updateCost(cost: Cost) {
@@ -220,12 +222,9 @@
     <OverpassSelector
       {map}
       on:gotXml={gotXml}
-      on:loading={(e) => (overpassMessage = e.detail)}
-      on:error={(e) => (overpassMessage = e.detail)}
+      on:loading={(e) => (loading = e.detail)}
+      on:error={(e) => (loading = e.detail)}
     />
-    {#if overpassMessage}
-      <p>{overpassMessage}</p>
-    {/if}
 
     {#if network}
       <hr />
@@ -274,6 +273,7 @@
         <SequentialLegend
           {colorScale}
           limits={limitsFor(colorBy, maxCostRatio, maxNearbyAmenities)}
+          decimalPlaces={1}
         />
       {/if}
       <div>
@@ -318,4 +318,5 @@
     </MapLibre>
   </div>
 </Layout>
+
 <Loading {loading} />
diff --git a/viewer/src/InteractiveApp.svelte b/viewer/src/InteractiveApp.svelte
@@ -13,7 +13,7 @@
   import Header from "./Header.svelte";
   import Layers from "./Layers.svelte";
   import Layout from "./Layout.svelte";
-  import Loading from "./Loading.svelte";
+  import { Loading } from "svelte-utils";
   import OverpassSelector from "./OverpassSelector.svelte";
   import SidebarControls from "./SidebarControls.svelte";
 
@@ -30,7 +30,7 @@
     type: "FeatureCollection",
     features: [],
   };
-  let loading = false;
+  let loading = "";
 
   let maxRequests = 1000;
   let cost: Cost = "Distance";
@@ -44,7 +44,7 @@
   let fileInput: HTMLInputElement;
   async function fileLoaded(e: Event) {
     example = "";
-    loading = true;
+    loading = "Loading file";
     loadBytes(await fileInput.files![0].arrayBuffer());
   }
 
@@ -67,12 +67,12 @@
     } catch (err) {
       window.alert(`Problem importing osm.pbf file: ${err}`);
     }
-    loading = false;
+    loading = "";
   }
 
   async function loadExample(example: string) {
     if (example != "") {
-      loading = true;
+      loading = `Loading ${example}`;
       let resp = await fetch(
         `https://assets.od2net.org/pbf_clips/${example}.osm.pbf`,
       );
@@ -101,12 +101,11 @@
   }
   $: onUpdate(cost, maxRequests);
 
-  let overpassMessage = "";
   function gotXml(e: CustomEvent<string>) {
-    overpassMessage = "Parsing XML";
+    loading = "Parsing XML";
     // TODO Can we avoid turning into bytes?
     loadBytes(new TextEncoder().encode(e.detail));
-    overpassMessage = "";
+    loading = "";
   }
 </script>
 
@@ -122,12 +121,9 @@
     <OverpassSelector
       {map}
       on:gotXml={gotXml}
-      on:loading={(e) => (overpassMessage = e.detail)}
-      on:error={(e) => (overpassMessage = e.detail)}
+      on:loading={(e) => (loading = e.detail)}
+      on:error={(e) => (loading = e.detail)}
     />
-    {#if overpassMessage}
-      <p>{overpassMessage}</p>
-    {/if}
 
     {#if network}
       <div>
@@ -162,4 +158,5 @@
     </MapLibre>
   </div>
 </Layout>
+
 <Loading {loading} />
diff --git a/viewer/src/Loading.svelte b/viewer/src/Loading.svelte
diff --git a/viewer/src/SequentialLegend.svelte b/viewer/src/SequentialLegend.svelte
diff --git a/viewer/src/SidebarControls.svelte b/viewer/src/SidebarControls.svelte
@@ -7,8 +7,7 @@
     ltsNames,
     type LayersControls,
   } from "./common";
-  import { Legend } from "svelte-utils";
-  import SequentialLegend from "./SequentialLegend.svelte";
+  import { SequentialLegend, Legend } from "svelte-utils";
   import {
     showSlope,
     showDestinations,