Start detangling funding programme. Irrelevant for LCWIP layer, and can

remove some options from ATF. Current milestone is never set for LCWIPs. Keep the empty color radio for now; we might have more ideas later
acteng · Oct 2, 2024 · f3ad5e8 · f3ad5e8
1 parent 58f0fea
commit f3ad5e8
Show file tree

Hide file tree

Showing 5 changed files with 148 additions and 182 deletions.
diff --git a/src/lib/browse/colors.ts b/src/lib/browse/colors.ts
@@ -40,29 +40,6 @@ export const colors = {
     "#080C54",
   ],
 
-  // A qualitative set from colorbrewer2.org
-  funding_programmes: [
-    "#66c2a5",
-    "#fc8d62",
-    "#8da0cb",
-    "#e78ac3",
-    "#a6d854",
-    "#ffd92f",
-    "grey",
-  ],
-
-  current_milestone: [
-    "grey",
-    "grey",
-    "red",
-    "red",
-    "#fbb862",
-    "#eddc76",
-    "#dafd9d",
-    "#76c384",
-    "#488f31",
-  ],
-
   // Thanks to https://ropensci.github.io/slopes/articles/roadnetworkcycling.html
   gradient_flat_to_steep: [
     "#267300",

diff --git a/src/lib/browse/schemes/Filters.svelte b/src/lib/browse/schemes/Filters.svelte
@@ -6,9 +6,11 @@
     Select,
   } from "govuk-svelte";
   import { Modal } from "lib/common";
-  import { onMount } from "svelte";
   import type { Feature, Schemes, SchemeData } from "types";
-  import { fundingProgrammesForColouringAndFiltering } from "./data";
+  import {
+    atfFundingProgrammes,
+    currentMilestones as currentMilestoneColors,
+  } from "./colors";
 
   export let source: string;
   export let schemes: Map<string, SchemeData>;
@@ -24,41 +26,30 @@
   let counts = { interventions: 0, totalLength: 0.0 };
 
   // Dropdown filters
-  let authorities: [string, string][] = [];
+  $: authorities = getAuthorities(schemes);
   let filterAuthority = "";
-  let fundingProgrammes: [string, string][] = [];
-  let knownFundingProgrammes: Set<string> = new Set(
-    fundingProgrammesForColouringAndFiltering.slice(0, -1),
-  );
+  let fundingProgrammes: [string, string][] = Object.keys(
+    atfFundingProgrammes,
+  ).map((x) => [x, x]);
   let filterFundingProgramme = "";
-  let currentMilestones: [string, string][] = [];
+  let currentMilestones: [string, string][] = Object.keys(
+    currentMilestoneColors,
+  ).map((x) => [x, x]);
   let filterCurrentMilestone = "";
 
-  // TODO Change when schemes changes
-  onMount(() => {
-    let set1: Set<string> = new Set();
-    let set2: Set<string> = new Set();
-    let set3: Set<string> = new Set();
+  function getAuthorities(
+    schemes: Map<string, SchemeData>,
+  ): [string, string][] {
+    let names: Set<string> = new Set();
     for (let x of schemes.values()) {
       if (x.browse?.authority_or_region) {
-        set1.add(x.browse.authority_or_region);
-      }
-      if (x.browse?.funding_programme) {
-        set2.add(x.browse.funding_programme);
-      }
-      if (x.browse?.current_milestone) {
-        set3.add(x.browse.current_milestone);
+        names.add(x.browse.authority_or_region);
       }
     }
-    authorities = Array.from(set1.entries());
-    authorities.sort();
-    fundingProgrammes = fundingProgrammesForColouringAndFiltering.map(
-      (value: string) => [value, value],
-    );
-
-    currentMilestones = Array.from(set3.entries());
-    currentMilestones.sort();
-  });
+    let result = Array.from(names.entries());
+    result.sort();
+    return result;
+  }
 
   // When any filters change, update showSchemes
   function filtersUpdated(
@@ -97,11 +88,8 @@
           return false;
         }
         if (
-          (filterFundingProgramme &&
-            filterFundingProgramme !== "Other" &&
-            scheme.browse?.funding_programme != filterFundingProgramme) ||
-          (filterFundingProgramme === "Other" &&
-            knownFundingProgrammes.has(scheme.browse?.funding_programme ?? ""))
+          filterFundingProgramme &&
+          scheme.browse?.funding_programme != filterFundingProgramme
         ) {
           return false;
         }
@@ -204,49 +192,96 @@
   </ul>
 
   <SecondaryButton on:click={resetFilters}>Reset all filters</SecondaryButton>
-  <Select
-    label="Authority or region"
-    choices={authorities}
-    emptyOption
-    bind:value={filterAuthority}
-  />
-  <Select
-    label="Funding programme"
-    choices={fundingProgrammes}
-    emptyOption
-    bind:value={filterFundingProgramme}
-  />
-  <Select
-    label="Current milestone"
-    choices={currentMilestones}
-    emptyOption
-    bind:value={filterCurrentMilestone}
-  />
-  <FormElement
-    label="Intervention name or description"
-    id="filterInterventionText"
-  >
-    <input
-      type="text"
-      class="govuk-input govuk-input--width-10"
+
+  {#if source == "ATF"}
+    <div class="govuk-grid-row">
+      <div class="govuk-grid-column-one-half">
+        <FormElement
+          label="Intervention name or description"
+          id="filterInterventionText"
+        >
+          <input
+            type="text"
+            class="govuk-input govuk-input--width-10"
+            id="filterInterventionText"
+            bind:value={filterInterventionText}
+          />
+          <SecondaryButton on:click={() => (filterInterventionText = "")}>
+            Clear
+          </SecondaryButton>
+        </FormElement>
+
+        <FormElement label="Scheme name or reference" id="filterSchemeText">
+          <input
+            type="text"
+            class="govuk-input govuk-input--width-10"
+            id="filterSchemeText"
+            bind:value={filterSchemeText}
+          />
+          <SecondaryButton on:click={() => (filterSchemeText = "")}>
+            Clear
+          </SecondaryButton>
+        </FormElement>
+
+        <Select
+          label="Authority or region"
+          choices={authorities}
+          emptyOption
+          bind:value={filterAuthority}
+        />
+      </div>
+
+      <div class="govuk-grid-column-one-half">
+        <Select
+          label="Funding programme"
+          choices={fundingProgrammes}
+          emptyOption
+          bind:value={filterFundingProgramme}
+        />
+
+        <Select
+          label="Current milestone"
+          choices={currentMilestones}
+          emptyOption
+          bind:value={filterCurrentMilestone}
+        />
+      </div>
+    </div>
+  {:else}
+    <FormElement
+      label="Intervention name or description"
       id="filterInterventionText"
-      bind:value={filterInterventionText}
-    />
-    <SecondaryButton on:click={() => (filterInterventionText = "")}>
-      Clear
-    </SecondaryButton>
-  </FormElement>
-  <FormElement label="Scheme name or reference" id="filterSchemeText">
-    <input
-      type="text"
-      class="govuk-input govuk-input--width-10"
-      id="filterSchemeText"
-      bind:value={filterSchemeText}
+    >
+      <input
+        type="text"
+        class="govuk-input govuk-input--width-10"
+        id="filterInterventionText"
+        bind:value={filterInterventionText}
+      />
+      <SecondaryButton on:click={() => (filterInterventionText = "")}>
+        Clear
+      </SecondaryButton>
+    </FormElement>
+
+    <FormElement label="Scheme name or reference" id="filterSchemeText">
+      <input
+        type="text"
+        class="govuk-input govuk-input--width-10"
+        id="filterSchemeText"
+        bind:value={filterSchemeText}
+      />
+      <SecondaryButton on:click={() => (filterSchemeText = "")}>
+        Clear
+      </SecondaryButton>
+    </FormElement>
+
+    <Select
+      label="Authority or region"
+      choices={authorities}
+      emptyOption
+      bind:value={filterAuthority}
     />
-    <SecondaryButton on:click={() => (filterSchemeText = "")}>
-      Clear
-    </SecondaryButton>
-  </FormElement>
+  {/if}
 
   <DefaultButton on:click={() => (open = false)}>Done</DefaultButton>
 </Modal>
diff --git a/src/lib/browse/schemes/SchemesLayer.svelte b/src/lib/browse/schemes/SchemesLayer.svelte
@@ -22,8 +22,9 @@
   } from "./stores";
   import InterventionLayer from "./InterventionLayer.svelte";
   import { colorInterventionsBySchema, schemaLegend } from "schemas";
-  import { styleByCurrentMilestone, styleByFundingProgramme } from "./colors";
+  import { currentMilestones, atfFundingProgrammes } from "./colors";
   import type { DataDrivenPropertyValueSpecification } from "maplibre-gl";
+  import { constructMatchExpression } from "lib/maplibre";
 
   let errorMessage = "";
 
@@ -33,7 +34,7 @@
   let atfStyle = "fundingProgramme";
   $: [atfColor, atfLegend] = pickStyle(atfStyle);
 
-  let lcwipStyle = "fundingProgramme";
+  let lcwipStyle = "interventionType";
   $: [lcwipColor, lcwipLegend] = pickStyle(lcwipStyle);
 
   function loadFile(filename: string, text: string) {
@@ -51,9 +52,23 @@
     if (style == "interventionType") {
       return [colorInterventionsBySchema("v1"), schemaLegend("v1")];
     } else if (style == "fundingProgramme") {
-      return styleByFundingProgramme();
+      return [
+        constructMatchExpression(
+          ["get", "funding_programme"],
+          atfFundingProgrammes,
+          "grey",
+        ),
+        Object.entries(atfFundingProgrammes),
+      ];
     } else if (style == "currentMilestone") {
-      return styleByCurrentMilestone();
+      return [
+        constructMatchExpression(
+          ["get", "current_milestone"],
+          currentMilestones,
+          "grey",
+        ),
+        Object.entries(currentMilestones),
+      ];
     } else {
       // Should be impossible
       return ["red", []];
@@ -129,11 +144,7 @@
 
       <Select
         label="Colour interventions"
-        choices={[
-          ["fundingProgramme", "By funding programme"],
-          ["interventionType", "By intervention type"],
-          ["currentMilestone", "By current milestone"],
-        ]}
+        choices={[["interventionType", "By intervention type"]]}
         bind:value={lcwipStyle}
       />
     </div>

diff --git a/src/lib/browse/schemes/colors.ts b/src/lib/browse/schemes/colors.ts
@@ -1,66 +1,19 @@
-import { constructMatchExpression } from "lib/maplibre";
-import type { DataDrivenPropertyValueSpecification } from "maplibre-gl";
-import { fundingProgrammesForColouringAndFiltering } from "./data";
-import { colors } from "../colors";
+export let atfFundingProgrammes = {
+  ATF2: "#66c2a5",
+  "ATF2 or ATF3": "#fc8d62",
+  ATF3: "#8da0cb",
+  ATF4: "#e78ac3",
+  ATF4E: "#a6d854",
+};
 
-export function styleByFundingProgramme(): [
-  DataDrivenPropertyValueSpecification<string>,
-  [string, string][],
-] {
-  let [colorMapping, legendRows] = getColorMappingAndLegend(
-    fundingProgrammesForColouringAndFiltering,
-    colors.funding_programmes,
-  );
-
-  let color = constructMatchExpression(
-    ["get", "funding_programme"],
-    colorMapping,
-    "grey",
-  );
-  return [color, legendRows];
-}
-
-export function styleByCurrentMilestone(): [
-  DataDrivenPropertyValueSpecification<string>,
-  [string, string][],
-] {
-  let stageGates = [
-    "removed",
-    "no data",
-    "not progressed",
-    "superseded",
-    "preliminary design completed",
-    "feasability design completed",
-    "detailed design completed",
-    "consruction started",
-    "construction completed",
-  ];
-
-  let [colorMapping, legendRows] = getColorMappingAndLegend(
-    stageGates,
-    colors.current_milestone,
-  );
-
-  let color = constructMatchExpression(
-    ["get", "current_milestone"],
-    colorMapping,
-    "grey",
-  );
-  return [color, legendRows];
-}
-
-function getColorMappingAndLegend(
-  keys: string[],
-  colorList: string[],
-): [{ [key: string]: string }, [string, string][]] {
-  let legendRows: [string, string][] = [];
-  let colorMapping: { [key: string]: string } = {};
-  let i = 0;
-  for (let x of keys) {
-    let color = colorList[i++ % colorList.length];
-    colorMapping[x] = color;
-    legendRows.push([x, color]);
-  }
-
-  return [colorMapping, legendRows];
-}
+export let currentMilestones = {
+  removed: "grey",
+  "no data": "grey",
+  "not progressed": "red",
+  superseded: "red",
+  "preliminary design completed": "#fbb862",
+  "feasability design completed": "#eddc76",
+  "detailed design completed": "#dafd9d",
+  "consruction started": "#76c384",
+  "construction completed": "#488f31",
+};