Lift the color selector out of the filters modal (and make it work

again)
acteng · Oct 2, 2024 · ad2c0d7 · ad2c0d7
1 parent d6a2689
commit ad2c0d7
Show file tree

Hide file tree

Showing 4 changed files with 79 additions and 98 deletions.
diff --git a/src/lib/browse/Filters.svelte b/src/lib/browse/Filters.svelte
@@ -9,7 +9,6 @@
   import { onMount } from "svelte";
   import type { Feature, Schemes, SchemeData } from "types";
   import { fundingProgrammesForColouringAndFiltering } from "./data";
-  import InterventionColorSelector from "./InterventionColorSelector.svelte";
 
   export let source: string;
   export let schemes: Map<string, SchemeData>;
@@ -34,12 +33,6 @@
   let filterFundingProgramme = "";
   let currentMilestones: [string, string][] = [];
   let filterCurrentMilestone = "";
-  let sketchSources: [string, string][] = [
-    ["ATF assessment", "ATF assessment"],
-    ["LCWIP mapping", "LCWIP mapping"],
-    ["Both", "Both"],
-  ];
-  let filterSketchSource = "";
 
   // TODO Change when schemes changes
   onMount(() => {
@@ -69,7 +62,6 @@
 
   // When any filters change, update showSchemes
   function filtersUpdated(
-    filterSketchSource: string,
     filterInterventionTextCopy: string,
     filterSchemeTextCopy: string,
     filterAuthority: string,
@@ -92,7 +84,6 @@
         return false;
       }
       if (
-        filterSketchSource ||
         filterSchemeNormalized ||
         filterAuthority ||
         filterFundingProgramme ||
@@ -131,14 +122,6 @@
         ) {
           return false;
         }
-        if (filterSketchSource) {
-          if (
-            filterSketchSource !== "Both" &&
-            filterSketchSource !== scheme.browse?.sketch_source
-          ) {
-            return false;
-          }
-        }
       }
       return true;
     };
@@ -186,7 +169,6 @@
     counts = counts;
   }
   $: filtersUpdated(
-    filterSketchSource,
     filterInterventionText,
     filterSchemeText,
     filterAuthority,
@@ -199,7 +181,6 @@
   }
 
   function resetFilters() {
-    filterSketchSource = "";
     filterAuthority = "";
     filterFundingProgramme = "";
     filterCurrentMilestone = "";
@@ -241,12 +222,6 @@
     emptyOption
     bind:value={filterCurrentMilestone}
   />
-  <Select
-    label="Sketch source"
-    choices={sketchSources}
-    emptyOption
-    bind:value={filterSketchSource}
-  />
   <FormElement
     label="Intervention name or description"
     id="filterInterventionText"
@@ -272,7 +247,6 @@
       Clear
     </SecondaryButton>
   </FormElement>
-  <InterventionColorSelector />
 
   <DefaultButton on:click={() => (open = false)}>Done</DefaultButton>
 </Modal>
diff --git a/src/lib/browse/InterventionColorSelector.svelte b/src/lib/browse/InterventionColorSelector.svelte
diff --git a/src/lib/browse/InterventionLayer.svelte b/src/lib/browse/InterventionLayer.svelte
@@ -8,15 +8,17 @@
     isPolygon,
     layerId,
   } from "lib/maplibre";
-  import type { ExpressionSpecification } from "maplibre-gl";
+  import type {
+    DataDrivenPropertyValueSpecification,
+    ExpressionSpecification,
+  } from "maplibre-gl";
   import {
     CircleLayer,
     FillLayer,
     GeoJSON,
     hoverStateFilter,
     LineLayer,
   } from "svelte-maplibre";
-  import { styleByFundingProgramme } from "./colors";
   import InterventionPopup from "./InterventionPopup.svelte";
   import type { Schemes, SchemeData } from "types";
 
@@ -27,8 +29,7 @@
   export let schemesGj: Schemes;
   export let filterSchemeText: string;
   export let filterInterventionText: string;
-
-  let [colorInterventions] = styleByFundingProgramme();
+  export let color: DataDrivenPropertyValueSpecification<string>;
 
   $: gj = addLineStringEndpoints(schemesGj);
 
@@ -52,7 +53,7 @@
     manageHoverState
     eventsIfTopMost
     paint={{
-      "circle-color": colorInterventions,
+      "circle-color": color,
       "circle-radius": circleRadius,
       "circle-opacity": hoverStateFilter(1.0, 0.5),
     }}
@@ -79,7 +80,7 @@
     manageHoverState
     eventsIfTopMost
     paint={{
-      "line-color": colorInterventions,
+      "line-color": color,
       "line-width": lineWidth,
       "line-opacity": hoverStateFilter(1.0, 0.5),
     }}
@@ -119,7 +120,7 @@
     manageHoverState
     eventsIfTopMost
     paint={{
-      "fill-color": colorInterventions,
+      "fill-color": color,
       "fill-opacity": hoverStateFilter(0.2, 0.5),
     }}
     layout={{
@@ -142,7 +143,7 @@
     {...layerId(`${source}-interventions-polygons-outlines`)}
     filter={["all", isPolygon, hideWhileEditing]}
     paint={{
-      "line-color": colorInterventions,
+      "line-color": color,
       "line-opacity": 0.5,
       "line-width": 0.7 * lineWidth,
     }}

diff --git a/src/lib/browse/SchemesLayer.svelte b/src/lib/browse/SchemesLayer.svelte
@@ -4,8 +4,9 @@
     ErrorMessage,
     FileInput,
     Checkbox,
+    Select,
   } from "govuk-svelte";
-  import { appVersion, HelpButton } from "lib/common";
+  import { appVersion, HelpButton, Legend } from "lib/common";
   import LoadRemoteSchemeData from "./LoadRemoteSchemeData.svelte";
   import { setupSchemes } from "./data";
   import Filters from "./Filters.svelte";
@@ -20,11 +21,20 @@
     filterLcwipInterventionText,
   } from "./stores";
   import InterventionLayer from "./InterventionLayer.svelte";
+  import { colorInterventionsBySchema, schemaLegend } from "schemas";
+  import { styleByCurrentMilestone, styleByFundingProgramme } from "./colors";
+  import type { DataDrivenPropertyValueSpecification } from "maplibre-gl";
+
+  let errorMessage = "";
 
   let showAtf = true;
   let showLcwip = true;
 
-  let errorMessage = "";
+  let atfStyle = "fundingProgramme";
+  $: [atfColor, atfLegend] = pickStyle(atfStyle);
+
+  let lcwipStyle = "fundingProgramme";
+  $: [lcwipColor, lcwipLegend] = pickStyle(lcwipStyle);
 
   function loadFile(filename: string, text: string) {
     try {
@@ -34,9 +44,24 @@
       errorMessage = `The file you loaded is broken: ${err}`;
     }
   }
+
+  function pickStyle(
+    style: string,
+  ): [DataDrivenPropertyValueSpecification<string>, [string, string][]] {
+    if (style == "interventionType") {
+      return [colorInterventionsBySchema("v1"), schemaLegend("v1")];
+    } else if (style == "fundingProgramme") {
+      return styleByFundingProgramme();
+    } else if (style == "currentMilestone") {
+      return styleByCurrentMilestone();
+    } else {
+      // Should be impossible
+      return ["red", []];
+    }
+  }
 </script>
 
-<CollapsibleCard label="Schemes">
+<CollapsibleCard label="Schemes" open>
   {#if appVersion() == "Private (development)"}
     <LoadRemoteSchemeData {loadFile} />
   {/if}
@@ -56,13 +81,26 @@
       </span>
     </Checkbox>
 
-    <Filters
-      source="ATF"
-      bind:schemesGj={$atfSchemesGj}
-      bind:schemes={$atfSchemes}
-      bind:filterSchemeText={$filterAtfSchemeText}
-      bind:filterInterventionText={$filterAtfInterventionText}
-    />
+    <div style="display: flex; justify-content: space-between;">
+      <Filters
+        source="ATF"
+        bind:schemesGj={$atfSchemesGj}
+        bind:schemes={$atfSchemes}
+        bind:filterSchemeText={$filterAtfSchemeText}
+        bind:filterInterventionText={$filterAtfInterventionText}
+      />
+
+      <Select
+        label="Colour interventions"
+        choices={[
+          ["fundingProgramme", "By funding programme"],
+          ["interventionType", "By intervention type"],
+          ["currentMilestone", "By current milestone"],
+        ]}
+        bind:value={atfStyle}
+      />
+    </div>
+    <Legend rows={atfLegend} />
   {/if}
 
   {#if $lcwipSchemes.size > 0}
@@ -80,13 +118,26 @@
       </span>
     </Checkbox>
 
-    <Filters
-      source="LCWIP"
-      bind:schemesGj={$lcwipSchemesGj}
-      bind:schemes={$lcwipSchemes}
-      bind:filterSchemeText={$filterLcwipSchemeText}
-      bind:filterInterventionText={$filterLcwipInterventionText}
-    />
+    <div style="display: flex; justify-content: space-between;">
+      <Filters
+        source="LCWIP"
+        bind:schemesGj={$lcwipSchemesGj}
+        bind:schemes={$lcwipSchemes}
+        bind:filterSchemeText={$filterLcwipSchemeText}
+        bind:filterInterventionText={$filterLcwipInterventionText}
+      />
+
+      <Select
+        label="Colour interventions"
+        choices={[
+          ["fundingProgramme", "By funding programme"],
+          ["interventionType", "By intervention type"],
+          ["currentMilestone", "By current milestone"],
+        ]}
+        bind:value={lcwipStyle}
+      />
+    </div>
+    <Legend rows={lcwipLegend} />
   {/if}
 
   <FileInput label="Load schemes from GeoJSON" onLoad={loadFile} />
@@ -100,6 +151,7 @@
   schemes={$atfSchemes}
   filterSchemeText={$filterAtfSchemeText}
   filterInterventionText={$filterAtfInterventionText}
+  color={atfColor}
 />
 <InterventionLayer
   source="lcwip"
@@ -108,4 +160,5 @@
   schemes={$lcwipSchemes}
   filterSchemeText={$filterLcwipSchemeText}
   filterInterventionText={$filterLcwipInterventionText}
+  color={lcwipColor}
 />