Stop abusing the gjScheme store for the browse page. #359

Author: dabreegster

src/lib/browse/Filters.svelte

@@ -7,12 +7,12 @@
     SecondaryButton,
     Select,
   } from "lib/govuk";
-  import { gjScheme } from "stores";
   import { onMount } from "svelte";
   import type { FeatureUnion } from "types";
-  import { type Scheme } from "./data";
+  import type { AllSchemeGJ, Scheme } from "./data";
   import InterventionColorSelector from "./InterventionColorSelector.svelte";
 
+  export let schemesGj: AllSchemeGJ;
   // These are immutable; re-create this component if they change
   export let schemes: Map<string, Scheme>;
 
@@ -83,7 +83,7 @@
       return true;
     };
     schemesToBeShown = new Set(
-      $gjScheme.features
+      schemesGj.features
         .filter(filterFeatures)
         .map((f) => f.properties.scheme_reference!)
     );
@@ -106,17 +106,15 @@
       }
       return true;
     };
-    gjScheme.update((gj) => {
-      for (let feature of gj.features) {
-        if (showFeature(feature)) {
-          delete feature.properties.hide_while_editing;
-          counts[feature.properties.intervention_type]++;
-        } else {
-          feature.properties.hide_while_editing = true;
-        }
+    for (let feature of schemesGj.features) {
+      if (showFeature(feature)) {
+        delete feature.properties.hide_while_editing;
+        counts[feature.properties.intervention_type]++;
+      } else {
+        feature.properties.hide_while_editing = true;
       }
-      return gj;
-    });
+    }
+    schemesGj = schemesGj;
     counts = counts;
   }
   $: filtersUpdated(filterText, filterAuthority, filterFundingProgramme);

src/lib/browse/InterventionLayer.svelte

@@ -10,22 +10,23 @@
   } from "lib/maplibre";
   import type { FilterSpecification } from "maplibre-gl";
   import { colorInterventionsBySchema } from "schemas";
-  import { gjScheme } from "stores";
   import {
     CircleLayer,
     FillLayer,
     GeoJSON,
     hoverStateFilter,
     LineLayer,
   } from "svelte-maplibre";
+  import type { AllSchemeGJ } from "./data";
   import InterventionPopup from "./InterventionPopup.svelte";
 
+  export let schemesGj: AllSchemeGJ;
   export let showSchemes: boolean;
   export let filterText: string;
 
   let colorInterventions = colorInterventionsBySchema("v1");
 
-  $: gj = addLineStringEndpoints($gjScheme);
+  $: gj = addLineStringEndpoints(schemesGj);
 
   // TODO Abusing this property for filtering
   const hideWhileEditing: FilterSpecification = [

src/lib/browse/SchemeCard.svelte

@@ -3,9 +3,10 @@
   import { CollapsibleCard } from "lib/common";
   import { SecondaryButton } from "lib/govuk";
   import { bbox } from "lib/maplibre";
-  import { gjScheme, map } from "stores";
-  import type { Scheme } from "./data";
+  import { map } from "stores";
+  import type { AllSchemeGJ, Scheme } from "./data";
 
+  export let schemesGj: AllSchemeGJ;
   export let scheme: Scheme;
   export let authorityNames: Set<string>;
 
@@ -18,7 +19,7 @@
     // TODO Highlight on the map? Or fade everything else?
     let gj: FeatureCollection = {
       type: "FeatureCollection",
-      features: $gjScheme.features.filter(
+      features: schemesGj.features.filter(
         (f) => f.properties.scheme_reference == scheme.scheme_reference
       ),
     };
@@ -28,7 +29,7 @@
   function editScheme() {
     let gj = {
       type: "FeatureCollection",
-      features: $gjScheme.features.filter(
+      features: schemesGj.features.filter(
         (f) => f.properties.scheme_reference == scheme.scheme_reference
       ),
     };

src/lib/browse/data.ts

@@ -1,6 +1,13 @@
 import type { FeatureCollection } from "geojson";
 import { setPrecision } from "lib/maplibre";
 import readXlsxFile from "read-excel-file";
+import type { FeatureUnion } from "types";
+
+export interface AllSchemeGJ {
+  type: "FeatureCollection";
+  features: FeatureUnion[];
+  schemes: { [name: string]: SchemeData };
+}
 
 // This must be filled out in the input file
 interface SchemeData {
@@ -19,9 +26,7 @@ export interface Scheme extends SchemeData {
 // Modifies this GeoJSON in-place, and returns a dictionary of Schemes, keyed
 // (and ordered) by scheme_reference. Each feature (intervention) in the GJ
 // links back to one of these schemes by scheme_reference.
-export function processInput(
-  gj: FeatureCollection & { schemes: { [name: string]: SchemeData } }
-): Map<string, Scheme> {
+export function processInput(gj: AllSchemeGJ): Map<string, Scheme> {
   let schemes = new Map();
 
   // Assume the input has a top-level dictionary keyed by scheme_reference
@@ -42,6 +47,7 @@ export function processInput(
 
     // TODO For easy styling, copy one field from scheme to all its features.
     // As we have more cases like this, revisit what's most performant.
+    // @ts-ignore Extend InterventionProps with scheme_reference and this
     feature.properties!.funding_programme = scheme.funding_programme;
     // Force numeric IDs (skipping 0) for hovering to work
     feature.id = id++;

src/pages/BrowseSchemes.svelte

@@ -2,7 +2,7 @@
   // @ts-ignore no declarations
   import { initAll } from "govuk-frontend";
   import AppVersion from "lib/browse/AppVersion.svelte";
-  import { processInput, type Scheme } from "lib/browse/data";
+  import { processInput, type AllSchemeGJ, type Scheme } from "lib/browse/data";
   import Filters from "lib/browse/Filters.svelte";
   import LayerControls from "lib/browse/LayerControls.svelte";
   import LoadRemoteSchemeData from "lib/browse/LoadRemoteSchemeData.svelte";
@@ -19,31 +19,35 @@
     ZoomOutMap,
   } from "lib/common";
   import { ErrorMessage } from "lib/govuk";
-  import { gjScheme, mapStyle } from "stores";
+  import { mapStyle } from "stores";
   import { onMount } from "svelte";
 
-  // TODO Remove after the input data is fixed to plumb correct authority names.
-  let authorityNames: Set<string> = new Set(authorityNamesList);
-
   onMount(() => {
     // For govuk components. Must happen here.
     initAll();
   });
 
+  // TODO Remove after the input data is fixed to plumb correct authority names.
+  let authorityNames: Set<string> = new Set(authorityNamesList);
+
   const params = new URLSearchParams(window.location.search);
   mapStyle.set(params.get("style") || "dataviz");
   let errorMessage = "";
 
+  let schemesGj: AllSchemeGJ = {
+    type: "FeatureCollection",
+    features: [],
+    schemes: {},
+  };
   let schemes: Map<string, Scheme> = new Map();
   let schemesToBeShown: Set<string> = new Set();
   let filterText = "";
   let showSchemes = true;
 
   function loadFile(text: string) {
     try {
-      gjScheme.set(JSON.parse(text));
-      // @ts-ignore TODO We're abusing the gjScheme store in the browse page for now
-      schemes = processInput($gjScheme);
+      schemesGj = JSON.parse(text);
+      schemes = processInput(schemesGj);
       errorMessage = "";
     } catch (err) {
       errorMessage = `The file you loaded is broken: ${err}`;
@@ -55,7 +59,7 @@
   <div slot="sidebar" class="govuk-prose">
     <div style="display: flex; justify-content: space-between">
       <h1>Browse schemes</h1>
-      <ZoomOutMap boundaryGeojson={$gjScheme} />
+      <ZoomOutMap boundaryGeojson={schemesGj} />
     </div>
     <AppVersion />
     <LoggedIn />
@@ -67,6 +71,7 @@
 
     {#if schemes.size > 0}
       <Filters
+        bind:schemesGj
         {schemes}
         bind:schemesToBeShown
         bind:filterText
@@ -77,14 +82,14 @@
     <ul>
       {#each schemes.values() as scheme}
         {#if schemesToBeShown.has(scheme.scheme_reference)}
-          <SchemeCard {scheme} {authorityNames} />
+          <SchemeCard {schemesGj} {scheme} {authorityNames} />
         {/if}
       {/each}
     </ul>
   </div>
   <div slot="main">
     <MapLibreMap style={$mapStyle} startBounds={[-5.96, 49.89, 2.31, 55.94]}>
-      <InterventionLayer {filterText} {showSchemes} />
+      <InterventionLayer {schemesGj} {filterText} {showSchemes} />
       <div class="top-right">
         <LayerControls />
       </div>