From 189706783383dfdbfec30409d4fd2378b83a0096 Mon Sep 17 00:00:00 2001
From: Dustin Carlino <dabreegster@gmail.com>
Date: Thu, 4 Jan 2024 13:49:08 +0000
Subject: [PATCH] Include new funding programme and a total length in the
 browse page

---
 src/lib/browse/Filters.svelte                 | 18 ++++++++++--
 .../browse/InterventionColorSelector.svelte   | 28 +++++++++++++++----
 src/lib/browse/InterventionPopup.svelte       |  2 +-
 src/lib/browse/colors.ts                      | 12 ++++++--
 src/lib/browse/data.ts                        |  2 +-
 5 files changed, 48 insertions(+), 14 deletions(-)

diff --git a/src/lib/browse/Filters.svelte b/src/lib/browse/Filters.svelte
index 5b567b556..258fb1543 100644
--- a/src/lib/browse/Filters.svelte
+++ b/src/lib/browse/Filters.svelte
@@ -26,7 +26,7 @@
   let filterFundingProgramme = "";
 
   // Stats about filtered schemes
-  let counts = { area: 0, route: 0, crossing: 0, other: 0 };
+  let counts = { area: 0, route: 0, crossing: 0, other: 0, totalLength: 0.0 };
 
   onMount(() => {
     let set1: Set<string> = new Set();
@@ -87,7 +87,7 @@
     );
 
     // Hide things on the map, and recalculate stats
-    counts = { area: 0, route: 0, crossing: 0, other: 0 };
+    counts = { area: 0, route: 0, crossing: 0, other: 0, totalLength: 0.0 };
     let showFeature = (feature: FeatureUnion) => {
       if (!schemesToBeShown.has(feature.properties.scheme_reference!)) {
         return false;
@@ -108,6 +108,12 @@
       if (showFeature(feature)) {
         delete feature.properties.hide_while_editing;
         counts[feature.properties.intervention_type]++;
+        if (
+          feature.geometry.type == "LineString" &&
+          feature.properties.length_meters
+        ) {
+          counts.totalLength += feature.properties.length_meters;
+        }
       } else {
         feature.properties.hide_while_editing = true;
       }
@@ -116,6 +122,10 @@
     counts = counts;
   }
   $: filtersUpdated($filterText, filterAuthority, filterFundingProgramme);
+
+  function metersToMiles(x: number): number {
+    return x * 0.000621371;
+  }
 </script>
 
 <CollapsibleCard label="Filters">
@@ -150,6 +160,8 @@
     Showing {schemesToBeShown.size.toLocaleString()} schemes ({counts.route.toLocaleString()}
     routes, {counts.area.toLocaleString()} areas,
     {counts.crossing.toLocaleString()} crossings, {counts.other.toLocaleString()}
-    other)
+    other, with total LineString length of {metersToMiles(
+      counts.totalLength
+    ).toFixed(1)} miles)
   </Checkbox>
 </CheckboxGroup>
diff --git a/src/lib/browse/InterventionColorSelector.svelte b/src/lib/browse/InterventionColorSelector.svelte
index 8209f06b3..959610161 100644
--- a/src/lib/browse/InterventionColorSelector.svelte
+++ b/src/lib/browse/InterventionColorSelector.svelte
@@ -5,6 +5,7 @@
   import { colorInterventionsBySchema, schemaLegend } from "schemas";
   import { map } from "stores";
   import { colors } from "./colors";
+  import { schemes } from "./stores";
 
   let colorInterventionsAccordingTo = "interventionType";
   let legendRows = schemaLegend("v1");
@@ -15,16 +16,31 @@
       color = colorInterventionsBySchema("v1");
       legendRows = schemaLegend("v1");
     } else {
+      let set: Set<string> = new Set();
+      for (let x of $schemes.values()) {
+        if (x.browse?.funding_programme) {
+          set.add(x.browse.funding_programme);
+        }
+      }
+      let programmes: string[] = Array.from(set);
+      programmes.sort();
+
+      legendRows = [];
+      let colorMapping: { [key: string]: string } = {};
+      let i = 0;
+      for (let x of programmes) {
+        let color =
+          colors.funding_programmes[i++ % colors.funding_programmes.length];
+        colorMapping[x] = color;
+        legendRows.push([x, color]);
+      }
+
       color = constructMatchExpression(
         ["get", "funding_programme"],
-        { ATF2: colors.atf2, ATF3: colors.atf3, ATF4: colors.atf4 },
+        colorMapping,
         "grey"
       );
-      legendRows = [
-        ["ATF2", colors.atf2],
-        ["ATF3", colors.atf3],
-        ["ATF4", colors.atf4],
-      ];
+      legendRows = legendRows;
     }
 
     // TODO Plumb instead of setting
diff --git a/src/lib/browse/InterventionPopup.svelte b/src/lib/browse/InterventionPopup.svelte
index daf638815..6918d123f 100644
--- a/src/lib/browse/InterventionPopup.svelte
+++ b/src/lib/browse/InterventionPopup.svelte
@@ -1,6 +1,6 @@
 <script lang="ts">
   import { prettyPrintMeters } from "lib/maplibre";
-  import { schemes, filterText } from "./stores";
+  import { filterText, schemes } from "./stores";
 
   export let props: { [name: string]: any };
 
diff --git a/src/lib/browse/colors.ts b/src/lib/browse/colors.ts
index d598ecd48..e69dd8efe 100644
--- a/src/lib/browse/colors.ts
+++ b/src/lib/browse/colors.ts
@@ -34,9 +34,15 @@ export const colors = {
     "#080C54",
   ],
 
-  atf2: "#00AFFF",
-  atf3: "#FF62DC",
-  atf4: "#FFD833",
+  // A qualitative set from colorbrewer2.org
+  funding_programmes: [
+    "#66c2a5",
+    "#fc8d62",
+    "#8da0cb",
+    "#e78ac3",
+    "#a6d854",
+    "#ffd92f",
+  ],
 };
 
 // For dense line layers, make individual lines easily distinguished when
diff --git a/src/lib/browse/data.ts b/src/lib/browse/data.ts
index eba40a56b..3091e9b70 100644
--- a/src/lib/browse/data.ts
+++ b/src/lib/browse/data.ts
@@ -29,7 +29,7 @@ export function processInput(gj: SchemeCollection): Map<string, SchemeData> {
       // 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;
+      feature.properties!.funding_programme = scheme.browse.funding_programme;
       // Force numeric IDs (skipping 0) for hovering to work
       feature.id = id++;
     }