From 5fbfa7af0af14b0437b396dca4964aafa6892345 Mon Sep 17 00:00:00 2001
From: Peter York <peter.york@dft.gov.uk>
Date: Mon, 31 Mar 2025 16:28:25 +0100
Subject: [PATCH 1/3] Add final inspections if they exist

---
 src/lib/browse/schemes/SchemesLayer.svelte | 64 +++++++++++++++++++++-
 src/lib/browse/schemes/data.ts             | 55 +++++++++++++++----
 src/lib/browse/schemes/stores.ts           |  9 +++
 src/lib/maplibre/zorder.ts                 |  5 ++
 src/types.ts                               |  4 ++
 5 files changed, 126 insertions(+), 11 deletions(-)

diff --git a/src/lib/browse/schemes/SchemesLayer.svelte b/src/lib/browse/schemes/SchemesLayer.svelte
index f8d876a19..0ffb661fd 100644
--- a/src/lib/browse/schemes/SchemesLayer.svelte
+++ b/src/lib/browse/schemes/SchemesLayer.svelte
@@ -24,10 +24,13 @@
     atfSchemes,
     filterAtfInterventionText,
     filterAtfSchemeText,
+    filterFinalInspectionsInterventionText,
+    filterFinalInspectionsSchemeText,
     filterLcwipInterventionText,
     filterLcwipSchemeText,
     filterLocalInterventionText,
     filterLocalSchemeText,
+    finalInspectionsSchemes,
     lcwipSchemes,
     localSchemes,
   } from "./stores";
@@ -46,6 +49,13 @@
   let lcwipStyle = "interventionType";
   $: [lcwipColor, lcwipLegend] = pickStyle(lcwipStyle);
 
+  let finalInspectionsName = "final_inspections_schemes";
+  let finalInspectionsTitle = "Final inspection schemes";
+  let finalInspectionsShow = showHideLayer(finalInspectionsName);
+  let finalInspectionsStyle = "interventionType";
+  $: [finalInspectionsColor, finalInspectionsLegend] =
+    pickStyle("interventionType");
+
   let localName = "local_schemes";
   let localTitle = "Your schemes";
   let localShow = showHideLayer(localName);
@@ -53,9 +63,15 @@
 
   function loadMainFile(filename: string, text: string) {
     try {
-      setupSchemes(JSON.parse(text), atfSchemes, lcwipSchemes);
+      setupSchemes(
+        JSON.parse(text),
+        atfSchemes,
+        lcwipSchemes,
+        finalInspectionsSchemes,
+      );
       $atfShow = true;
       $lcwipShow = true;
+      $finalInspectionsShow = true;
       errorMessage = "";
     } catch (err) {
       errorMessage = `The file you loaded is broken: ${err}`;
@@ -146,6 +162,42 @@
       </LayerControl>
     {/if}
 
+    {#if Object.entries($finalInspectionsSchemes.schemes).length > 0}
+      <LayerControl
+        name={finalInspectionsName}
+        title={finalInspectionsTitle}
+        bind:show={$finalInspectionsShow}
+      >
+        <span slot="help">
+          <p>
+            <WarningIcon text="Scheme data caveats" />Please note there are data
+            quality caveats for all scheme data:
+          </p>
+          <ul>
+            {#each $finalInspectionsSchemes.notes ?? [] as note}
+              <li><p>{note}</p></li>
+            {/each}
+          </ul>
+        </span>
+
+        <div slot="controls" style="border: 1px solid black; padding: 8px;">
+          <Filters
+            source="LCWIP"
+            bind:schemesGj={$finalInspectionsSchemes}
+            bind:filterSchemeText={$filterFinalInspectionsSchemeText}
+            bind:filterInterventionText={$filterFinalInspectionsInterventionText}
+          />
+
+          <Select
+            label="Colour interventions"
+            choices={[["interventionType", "By intervention type"]]}
+            bind:value={finalInspectionsStyle}
+          />
+          <Legend rows={finalInspectionsLegend} />
+        </div>
+      </LayerControl>
+    {/if}
+
     {#if Object.entries($lcwipSchemes.schemes).length > 0}
       <LayerControl name={lcwipName} title={lcwipTitle} bind:show={$lcwipShow}>
         <span slot="help">
@@ -233,6 +285,16 @@
   color={atfColor}
 />
 
+<InterventionLayer
+  name="finalInspections"
+  description={finalInspectionsTitle}
+  show={$finalInspectionsShow}
+  schemesGj={$finalInspectionsSchemes}
+  filterSchemeText={$filterFinalInspectionsSchemeText}
+  filterInterventionText={$filterFinalInspectionsInterventionText}
+  color={finalInspectionsColor}
+/>
+
 <InterventionLayer
   name="lcwip"
   description={lcwipTitle}
diff --git a/src/lib/browse/schemes/data.ts b/src/lib/browse/schemes/data.ts
index 438870b11..206282fc6 100644
--- a/src/lib/browse/schemes/data.ts
+++ b/src/lib/browse/schemes/data.ts
@@ -1,5 +1,5 @@
 import type { Writable } from "svelte/store";
-import type { Feature, Schemes } from "types";
+import type { Feature, SchemeData, Schemes } from "types";
 
 // Takes a GeoJSON file representing a bunch of scheme files combined into one.
 // Populates the two stores for each of ATF and LCWIP schemes.
@@ -7,6 +7,7 @@ export function setupSchemes(
   gj: Schemes,
   atfStore: Writable<Schemes>,
   lcwipStore: Writable<Schemes>,
+  finalInspectionsStore: Writable<Schemes>,
 ) {
   let atfGj: Schemes = {
     type: "FeatureCollection",
@@ -23,11 +24,20 @@ export function setupSchemes(
     notes: gj.notes,
   };
 
+  let finalInspectionsGj: Schemes = {
+    type: "FeatureCollection",
+    features: [],
+    schemes: {},
+    notes: gj.notes,
+  };
+
   for (let [scheme_reference, scheme] of Object.entries(gj.schemes)) {
-    if (scheme.pipeline) {
+    if (scheme.browse?.sketch_source === "LCWIP mapping") {
       lcwipGj.schemes[scheme_reference] = scheme;
-    } else {
+    } else if (scheme.browse?.sketch_source == "ATF assessment") {
       atfGj.schemes[scheme_reference] = scheme;
+    } else if (scheme.browse?.sketch_source == "Final inspection sketches") {
+      finalInspectionsGj.schemes[scheme_reference] = scheme;
     }
   }
 
@@ -37,11 +47,36 @@ export function setupSchemes(
     }
 
     let scheme_reference = feature.properties.scheme_reference;
-    let is_atf = Object.hasOwn(atfGj.schemes, scheme_reference);
 
-    let scheme = is_atf
-      ? atfGj.schemes[scheme_reference]
-      : lcwipGj.schemes[scheme_reference];
+    // @ts-expect-error we will replace it shortly
+    let scheme: SchemeData = {};
+
+    let tempGJ: Schemes = {
+      type: "FeatureCollection",
+      features: [],
+      schemes: {},
+      notes: gj.notes,
+    };
+    if (
+      feature.properties.sketch_source === "ATF assessment" &&
+      Object.hasOwn(atfGj.schemes, scheme_reference)
+    ) {
+      scheme = atfGj.schemes[scheme_reference];
+      tempGJ = atfGj;
+    } else if (
+      feature.properties.sketch_source === "LCWIP mapping" &&
+      Object.hasOwn(lcwipGj.schemes, scheme_reference)
+    ) {
+      scheme = lcwipGj.schemes[scheme_reference];
+      tempGJ = lcwipGj;
+    } else if (
+      feature.properties.sketch_source === "Final inspection sketches" &&
+      Object.hasOwn(finalInspectionsGj.schemes, scheme_reference)
+    ) {
+      scheme = finalInspectionsGj.schemes[scheme_reference];
+      tempGJ = finalInspectionsGj;
+    }
+
     if (scheme.browse) {
       // 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.
@@ -50,14 +85,14 @@ export function setupSchemes(
       feature.properties.current_milestone = scheme.browse.current_milestone;
     }
 
-    let gj = is_atf ? atfGj : lcwipGj;
     // Force numeric IDs (skipping 0) for hovering to work
-    feature.id = gj.features.length + 1;
-    gj.features.push(feature);
+    feature.id = tempGJ.features.length + 1;
+    tempGJ.features.push(feature);
   }
 
   atfStore.set(atfGj);
   lcwipStore.set(lcwipGj);
+  finalInspectionsStore.set(finalInspectionsGj);
 }
 
 // These should ideally be fixed during upstream data validation processes.
diff --git a/src/lib/browse/schemes/stores.ts b/src/lib/browse/schemes/stores.ts
index ed12c2a42..60d6aeac9 100644
--- a/src/lib/browse/schemes/stores.ts
+++ b/src/lib/browse/schemes/stores.ts
@@ -12,6 +12,15 @@ export const atfSchemes: Writable<Schemes> = writable({
 export const filterAtfInterventionText: Writable<string> = writable("");
 export const filterAtfSchemeText: Writable<string> = writable("");
 
+export const finalInspectionsSchemes: Writable<Schemes> = writable({
+  type: "FeatureCollection",
+  features: [],
+  schemes: {},
+});
+export const filterFinalInspectionsInterventionText: Writable<string> =
+  writable("");
+export const filterFinalInspectionsSchemeText: Writable<string> = writable("");
+
 export const lcwipSchemes: Writable<Schemes> = writable({
   type: "FeatureCollection",
   features: [],
diff --git a/src/lib/maplibre/zorder.ts b/src/lib/maplibre/zorder.ts
index 64dc39457..c8f264f3e 100644
--- a/src/lib/maplibre/zorder.ts
+++ b/src/lib/maplibre/zorder.ts
@@ -81,9 +81,11 @@ export let layerZorder = [
   sketch("hover-polygons"),
 
   browse("atf-interventions-polygons"),
+  browse("finalInspections-interventions-polygons"),
   browse("lcwip-interventions-polygons"),
   browse("local-interventions-polygons"),
   browse("atf-interventions-polygons-outlines"),
+  browse("finalInspections-interventions-polygons-outlines"),
   browse("lcwip-interventions-polygons-outlines"),
   browse("local-interventions-polygons-outlines"),
 
@@ -93,9 +95,11 @@ export let layerZorder = [
   sketch("interventions-lines-endpoints"),
 
   browse("atf-interventions-lines"),
+  browse("finalInspections-interventions-lines"),
   browse("lcwip-interventions-lines"),
   browse("local-interventions-lines"),
   browse("atf-interventions-lines-endpoints"),
+  browse("finalInspections-interventions-lines-endpoints"),
   browse("lcwip-interventions-lines-endpoints"),
   browse("local-interventions-lines-endpoints"),
 
@@ -103,6 +107,7 @@ export let layerZorder = [
   sketch("interventions-points"),
 
   browse("atf-interventions-points"),
+  browse("finalInspections-interventions-points"),
   browse("lcwip-interventions-points"),
   browse("local-interventions-points"),
 
diff --git a/src/types.ts b/src/types.ts
index 2a74efa6e..bd13cceda 100644
--- a/src/types.ts
+++ b/src/types.ts
@@ -88,6 +88,10 @@ export interface BrowseSchemeData {
   current_milestone?: string;
   // If this scheme was imported from local storage, track the original filename
   local_filename?: string;
+  sketch_source?:
+    | "ATF assessment"
+    | "LCWIP mapping"
+    | "Final inspection sketches";
 }
 
 export type PipelineType =

From 6ec02de861637ada2ec742d58686d64ca01b67e3 Mon Sep 17 00:00:00 2001
From: Peter York <peter.york@dft.gov.uk>
Date: Mon, 14 Apr 2025 13:52:39 +0100
Subject: [PATCH 2/3] use strict equality

---
 src/lib/browse/schemes/data.ts | 4 ++--
 1 file changed, 2 insertions(+), 2 deletions(-)

diff --git a/src/lib/browse/schemes/data.ts b/src/lib/browse/schemes/data.ts
index 206282fc6..18e1ade29 100644
--- a/src/lib/browse/schemes/data.ts
+++ b/src/lib/browse/schemes/data.ts
@@ -34,9 +34,9 @@ export function setupSchemes(
   for (let [scheme_reference, scheme] of Object.entries(gj.schemes)) {
     if (scheme.browse?.sketch_source === "LCWIP mapping") {
       lcwipGj.schemes[scheme_reference] = scheme;
-    } else if (scheme.browse?.sketch_source == "ATF assessment") {
+    } else if (scheme.browse?.sketch_source === "ATF assessment") {
       atfGj.schemes[scheme_reference] = scheme;
-    } else if (scheme.browse?.sketch_source == "Final inspection sketches") {
+    } else if (scheme.browse?.sketch_source === "Final inspection sketches") {
       finalInspectionsGj.schemes[scheme_reference] = scheme;
     }
   }

From 3e882482d22d0289a49bb02ba8366c0a18dc78ca Mon Sep 17 00:00:00 2001
From: Peter York <peter.york@dft.gov.uk>
Date: Wed, 16 Apr 2025 12:31:08 +0100
Subject: [PATCH 3/3] Begin to share some more code for browse page scheme
 layers

---
 .../browse/schemes/InterventionLayer.svelte   |  36 ++-
 src/lib/browse/schemes/SchemesLayer.svelte    | 228 ++++++++----------
 .../browse/schemes/SchemesLayerControl.svelte |  56 +++++
 src/lib/browse/schemes/data.ts                |  11 +-
 4 files changed, 180 insertions(+), 151 deletions(-)
 create mode 100644 src/lib/browse/schemes/SchemesLayerControl.svelte

diff --git a/src/lib/browse/schemes/InterventionLayer.svelte b/src/lib/browse/schemes/InterventionLayer.svelte
index 6a44d0d43..4dadccc4a 100644
--- a/src/lib/browse/schemes/InterventionLayer.svelte
+++ b/src/lib/browse/schemes/InterventionLayer.svelte
@@ -8,10 +8,7 @@
     isPolygon,
     layerId,
   } from "lib/maplibre";
-  import type {
-    DataDrivenPropertyValueSpecification,
-    ExpressionSpecification,
-  } from "maplibre-gl";
+  import type { ExpressionSpecification } from "maplibre-gl";
   import {
     CircleLayer,
     FillLayer,
@@ -20,16 +17,17 @@
     LineLayer,
   } from "svelte-maplibre";
   import type { Schemes } from "types";
+  import type { SchemeTypeDetails } from "./data";
   import InterventionPopup from "./InterventionPopup.svelte";
+    import type { Writable } from "svelte/store";
 
   export let name: string;
-  export let description: string;
-  export let show: boolean;
+  export let details: SchemeTypeDetails;
+  export let show: Writable<boolean>;
 
   export let schemesGj: Schemes;
   export let filterSchemeText: string;
   export let filterInterventionText: string;
-  export let color: DataDrivenPropertyValueSpecification<string>;
 
   $: gj = addLineStringEndpoints(schemesGj);
 
@@ -53,19 +51,19 @@
     manageHoverState
     eventsIfTopMost
     paint={{
-      "circle-color": color,
+      "circle-color": details.colour,
       "circle-radius": circleRadius,
       "circle-opacity": hoverStateFilter(1.0, 0.5),
     }}
     layout={{
-      visibility: show ? "visible" : "none",
+      visibility: $show ? "visible" : "none",
     }}
     hoverCursor="pointer"
   >
     <Popup let:props popupClass="border-popup"><p>{props.name}</p></Popup>
     <Popup let:props openOn="click" popupClass="border-popup">
       <InterventionPopup
-        {description}
+        description={details.title}
         {props}
         {schemesGj}
         {filterSchemeText}
@@ -80,19 +78,19 @@
     manageHoverState
     eventsIfTopMost
     paint={{
-      "line-color": color,
+      "line-color": details.colour,
       "line-width": lineWidth,
       "line-opacity": hoverStateFilter(1.0, 0.5),
     }}
     layout={{
-      visibility: show ? "visible" : "none",
+      visibility: $show ? "visible" : "none",
     }}
     hoverCursor="pointer"
   >
     <Popup let:props popupClass="border-popup"><p>{props.name}</p></Popup>
     <Popup let:props openOn="click" popupClass="border-popup">
       <InterventionPopup
-        {description}
+        description={details.title}
         {props}
         {schemesGj}
         {filterSchemeText}
@@ -110,7 +108,7 @@
       "circle-stroke-width": 2.0,
     }}
     layout={{
-      visibility: show ? "visible" : "none",
+      visibility: $show ? "visible" : "none",
     }}
   />
 
@@ -120,18 +118,18 @@
     manageHoverState
     eventsIfTopMost
     paint={{
-      "fill-color": color,
+      "fill-color": details.colour,
       "fill-opacity": hoverStateFilter(0.2, 0.5),
     }}
     layout={{
-      visibility: show ? "visible" : "none",
+      visibility: $show ? "visible" : "none",
     }}
     hoverCursor="pointer"
   >
     <Popup let:props popupClass="border-popup"><p>{props.name}</p></Popup>
     <Popup let:props openOn="click" popupClass="border-popup">
       <InterventionPopup
-        {description}
+        description={details.title}
         {props}
         {schemesGj}
         {filterSchemeText}
@@ -143,12 +141,12 @@
     {...layerId(`${name}-interventions-polygons-outlines`)}
     filter={["all", isPolygon, hideWhileEditing]}
     paint={{
-      "line-color": color,
+      "line-color": details.colour,
       "line-opacity": 0.5,
       "line-width": 0.7 * lineWidth,
     }}
     layout={{
-      visibility: show ? "visible" : "none",
+      visibility: $show ? "visible" : "none",
     }}
   />
 </GeoJSON>
diff --git a/src/lib/browse/schemes/SchemesLayer.svelte b/src/lib/browse/schemes/SchemesLayer.svelte
index 0ffb661fd..51390a5b1 100644
--- a/src/lib/browse/schemes/SchemesLayer.svelte
+++ b/src/lib/browse/schemes/SchemesLayer.svelte
@@ -13,13 +13,19 @@
   import { constructMatchExpression } from "lib/maplibre";
   import type { DataDrivenPropertyValueSpecification } from "maplibre-gl";
   import { colorInterventionsBySchema, schemaLegend } from "schemas";
+  import type { Writable } from "svelte/store";
   import LayerControl from "../layers/LayerControl.svelte";
   import { showHideLayer } from "../layers/url";
   import { atfFundingProgrammes, currentMilestones } from "./colors";
-  import { importAllLocalSketches, setupSchemes } from "./data";
+  import {
+    importAllLocalSketches,
+    setupSchemes,
+    type SchemeTypeDetails,
+  } from "./data";
   import Filters from "./Filters.svelte";
   import InterventionLayer from "./InterventionLayer.svelte";
   import LoadRemoteSchemeData from "./LoadRemoteSchemeData.svelte";
+  import SchemesLayerControl from "./SchemesLayerControl.svelte";
   import {
     atfSchemes,
     filterAtfInterventionText,
@@ -37,24 +43,65 @@
 
   let errorMessage = "";
 
-  let atfName = "atf_schemes";
-  let atfTitle = "ATF schemes";
-  let atfShow = showHideLayer(atfName);
-  let atfStyle = "fundingProgramme";
-  $: [atfColor, atfLegend] = pickStyle(atfStyle);
+  const [atfColour, atfLegend] = pickStyle("fundingProgramme");
+  let atfDetails: SchemeTypeDetails = {
+    name: "atf_schemes",
+    title: "ATF schemes",
+    style: "fundingProgramme",
+    colour: atfColour,
+    legend: atfLegend,
+  };
+  const showAtf: Writable<boolean> = showHideLayer("atf_schemes");
+
+  $: {
+    const [atfColour, atfLegend] = pickStyle(atfDetails.style);
+    atfDetails.colour = atfColour;
+    atfDetails.legend = atfLegend;
+  }
+
+  const [lcwipColour, lcwipLegend] = pickStyle("fundingProgramme");
+  let lcwipDetails: SchemeTypeDetails = {
+    name: "lcwip_schemes",
+    title: "LCWIP schemes",
+    style: "fundingProgramme",
+    colour: lcwipColour,
+    legend: lcwipLegend,
+  };
+  const showLcwip: Writable<boolean> = showHideLayer("lcwip_schemes");
 
-  let lcwipName = "lcwip_schemes";
-  let lcwipTitle = "LCWIP schemes";
-  let lcwipShow = showHideLayer(lcwipName);
-  let lcwipStyle = "interventionType";
-  $: [lcwipColor, lcwipLegend] = pickStyle(lcwipStyle);
+  $: {
+    const [lcwipColour, lcwipLegend] = pickStyle(lcwipDetails.style);
+    lcwipDetails.colour = lcwipColour;
+    lcwipDetails.legend = lcwipLegend;
+  }
 
-  let finalInspectionsName = "final_inspections_schemes";
-  let finalInspectionsTitle = "Final inspection schemes";
-  let finalInspectionsShow = showHideLayer(finalInspectionsName);
-  let finalInspectionsStyle = "interventionType";
-  $: [finalInspectionsColor, finalInspectionsLegend] =
-    pickStyle("interventionType");
+  console.log(atfDetails);
+  console.log(JSON.stringify(atfDetails));
+  $: {
+    console.log(atfSchemes);
+    console.log($atfSchemes);
+    console.log(JSON.stringify(atfSchemes))
+  }
+
+  const [finalInspectionsColour, finalInspectionsLegend] =
+    pickStyle("fundingProgramme");
+  let finalInspectionsDetails: SchemeTypeDetails = {
+    name: "finalInspections_schemes",
+    title: "Final Inspections schemes",
+    style: "fundingProgramme",
+    colour: finalInspectionsColour,
+    legend: finalInspectionsLegend,
+  };
+  const showFinalInspections: Writable<boolean> = showHideLayer(
+    "finalInspections_schemes",
+  );
+  $: {
+    const [finalInspectionsColour, finalInspectionsLegend] = pickStyle(
+      finalInspectionsDetails.style,
+    );
+    finalInspectionsDetails.colour = finalInspectionsColour;
+    finalInspectionsDetails.legend = finalInspectionsLegend;
+  }
 
   let localName = "local_schemes";
   let localTitle = "Your schemes";
@@ -69,9 +116,9 @@
         lcwipSchemes,
         finalInspectionsSchemes,
       );
-      $atfShow = true;
-      $lcwipShow = true;
-      $finalInspectionsShow = true;
+      $showAtf = true;
+      $showLcwip = true;
+      $showFinalInspections = true;
       errorMessage = "";
     } catch (err) {
       errorMessage = `The file you loaded is broken: ${err}`;
@@ -126,108 +173,30 @@
   {/if}
 
   <CheckboxGroup small>
-    {#if Object.entries($atfSchemes.schemes).length > 0}
-      <LayerControl name={atfName} title={atfTitle} bind:show={$atfShow}>
-        <span slot="help">
-          <p>
-            <WarningIcon text="Scheme data caveats" />Please note there are data
-            quality caveats for all scheme data:
-          </p>
-          <ul>
-            {#each $atfSchemes.notes ?? [] as note}
-              <li><p>{note}</p></li>
-            {/each}
-          </ul>
-        </span>
-
-        <div slot="controls" style="border: 1px solid black; padding: 8px;">
-          <Filters
-            source="ATF"
-            bind:schemesGj={$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}
-          />
-          <Legend rows={atfLegend} />
-        </div>
-      </LayerControl>
-    {/if}
-
-    {#if Object.entries($finalInspectionsSchemes.schemes).length > 0}
-      <LayerControl
-        name={finalInspectionsName}
-        title={finalInspectionsTitle}
-        bind:show={$finalInspectionsShow}
-      >
-        <span slot="help">
-          <p>
-            <WarningIcon text="Scheme data caveats" />Please note there are data
-            quality caveats for all scheme data:
-          </p>
-          <ul>
-            {#each $finalInspectionsSchemes.notes ?? [] as note}
-              <li><p>{note}</p></li>
-            {/each}
-          </ul>
-        </span>
+    {#if atfSchemes && finalInspectionsSchemes && lcwipSchemes}
+    <SchemesLayerControl
+      details={atfDetails},
+      show={showAtf},
+      schemes={atfSchemes},
+      filterSchemeText={$filterAtfSchemeText},
+      filterInterventionText={$filterAtfInterventionText},
+    />
 
-        <div slot="controls" style="border: 1px solid black; padding: 8px;">
-          <Filters
-            source="LCWIP"
-            bind:schemesGj={$finalInspectionsSchemes}
-            bind:filterSchemeText={$filterFinalInspectionsSchemeText}
-            bind:filterInterventionText={$filterFinalInspectionsInterventionText}
-          />
+    <SchemesLayerControl
+      details={finalInspectionsDetails},
+      show={showFinalInspections},
+      schemes={finalInspectionsSchemes},
+      filterSchemeText={$filterFinalInspectionsSchemeText},
+      filterInterventionText={$filterFinalInspectionsInterventionText},
+    />
 
-          <Select
-            label="Colour interventions"
-            choices={[["interventionType", "By intervention type"]]}
-            bind:value={finalInspectionsStyle}
-          />
-          <Legend rows={finalInspectionsLegend} />
-        </div>
-      </LayerControl>
-    {/if}
-
-    {#if Object.entries($lcwipSchemes.schemes).length > 0}
-      <LayerControl name={lcwipName} title={lcwipTitle} bind:show={$lcwipShow}>
-        <span slot="help">
-          <p>
-            <WarningIcon text="Scheme data caveats" />Please note there are data
-            quality caveats for all scheme data:
-          </p>
-          <ul>
-            {#each $lcwipSchemes.notes ?? [] as note}
-              <li><p>{note}</p></li>
-            {/each}
-          </ul>
-        </span>
-
-        <div slot="controls" style="border: 1px solid black; padding: 8px;">
-          <Filters
-            source="LCWIP"
-            bind:schemesGj={$lcwipSchemes}
-            bind:filterSchemeText={$filterLcwipSchemeText}
-            bind:filterInterventionText={$filterLcwipInterventionText}
-          />
-
-          <Select
-            label="Colour interventions"
-            choices={[["interventionType", "By intervention type"]]}
-            bind:value={lcwipStyle}
-          />
-          <Legend rows={lcwipLegend} />
-        </div>
-      </LayerControl>
+    <SchemesLayerControl
+      details={lcwipDetails},
+      show={showLcwip},
+      schemes={lcwipSchemes},
+      filterSchemeText={$filterLcwipSchemeText},
+      filterInterventionText={$filterLcwipInterventionText},
+    />
     {/if}
   </CheckboxGroup>
 
@@ -277,35 +246,32 @@
 
 <InterventionLayer
   name="atf"
-  description={atfTitle}
-  show={$atfShow}
+  details={atfDetails}
+  show={showAtf}
   schemesGj={$atfSchemes}
   filterSchemeText={$filterAtfSchemeText}
   filterInterventionText={$filterAtfInterventionText}
-  color={atfColor}
 />
 
 <InterventionLayer
   name="finalInspections"
-  description={finalInspectionsTitle}
-  show={$finalInspectionsShow}
+  details={finalInspectionsDetails}
+  show={showFinalInspections}
   schemesGj={$finalInspectionsSchemes}
   filterSchemeText={$filterFinalInspectionsSchemeText}
   filterInterventionText={$filterFinalInspectionsInterventionText}
-  color={finalInspectionsColor}
 />
 
 <InterventionLayer
   name="lcwip"
-  description={lcwipTitle}
-  show={$lcwipShow}
+  details={lcwipDetails}
+  show={showLcwip}
   schemesGj={$lcwipSchemes}
   filterSchemeText={$filterLcwipSchemeText}
   filterInterventionText={$filterLcwipInterventionText}
-  color={lcwipColor}
 />
 
-<InterventionLayer
+<!-- <InterventionLayer
   name="local"
   description={localTitle}
   show={$localShow}
@@ -313,4 +279,4 @@
   filterSchemeText={$filterLocalSchemeText}
   filterInterventionText={$filterLocalInterventionText}
   color={localColor}
-/>
+/> -->
diff --git a/src/lib/browse/schemes/SchemesLayerControl.svelte b/src/lib/browse/schemes/SchemesLayerControl.svelte
new file mode 100644
index 000000000..2b083d991
--- /dev/null
+++ b/src/lib/browse/schemes/SchemesLayerControl.svelte
@@ -0,0 +1,56 @@
+<script lang="ts">
+  import { Select } from "govuk-svelte";
+  import { Legend } from "lib/common";
+  import { WarningIcon } from "scheme-sketcher-lib/common";
+  import type { Writable } from "svelte/store";
+  import type { Schemes } from "types";
+  import LayerControl from "../layers/LayerControl.svelte";
+  import type { SchemeTypeDetails } from "./data";
+  import Filters from "./Filters.svelte";
+
+  export let details: SchemeTypeDetails;
+  console.log(`details - ${JSON.stringify(details)}`);
+  console.log(details);
+  console.log(`name - ${details.name}`);
+  export let show: boolean;
+  export let schemes: Writable<Schemes>;
+  console.log(schemes);
+  export let filterSchemeText: string;
+  export let filterInterventionText: string;
+</script>
+
+{#if Object.entries($schemes.schemes).length > 0}
+  <LayerControl name={details.name} title={details.title} {show}>
+    <span slot="help">
+      <p>
+        <WarningIcon text="Scheme data caveats" />Please note there are data
+        quality caveats for all scheme data:
+      </p>
+      <ul>
+        {#each $schemes.notes ?? [] as note}
+          <li><p>{note}</p></li>
+        {/each}
+      </ul>
+    </span>
+
+    <div slot="controls" style="border: 1px solid black; padding: 8px;">
+      <Filters
+        source="ATF"
+        bind:schemesGj={$schemes}
+        bind:filterSchemeText={filterInterventionText}
+        bind:filterInterventionText={filterSchemeText}
+      />
+
+      <Select
+        label="Colour interventions"
+        choices={[
+          ["fundingProgramme", "By funding programme"],
+          ["interventionType", "By intervention type"],
+          ["currentMilestone", "By current milestone"],
+        ]}
+        bind:value={details.style}
+      />
+      <Legend rows={details.legend} />
+    </div>
+  </LayerControl>
+{/if}
diff --git a/src/lib/browse/schemes/data.ts b/src/lib/browse/schemes/data.ts
index 18e1ade29..43c36cf97 100644
--- a/src/lib/browse/schemes/data.ts
+++ b/src/lib/browse/schemes/data.ts
@@ -1,6 +1,15 @@
+import type { DataDrivenPropertyValueSpecification } from "maplibre-gl";
 import type { Writable } from "svelte/store";
 import type { Feature, SchemeData, Schemes } from "types";
 
+export type SchemeTypeDetails = {
+  name: string,
+  title: string,
+  style: string,
+  colour: DataDrivenPropertyValueSpecification<string>,
+  legend: [string, string][],
+}
+
 // Takes a GeoJSON file representing a bunch of scheme files combined into one.
 // Populates the two stores for each of ATF and LCWIP schemes.
 export function setupSchemes(
@@ -154,7 +163,7 @@ export function importAllLocalSketches(): Schemes {
 
       result.schemes = { ...result.schemes, ...gj.schemes };
       result.features = [...result.features, ...gj.features];
-    } catch (err) {}
+    } catch (err) { }
   }
 
   // Fix feature IDs