Organize scheme-related components properly

src/lib/browse/LayerControls.svelte

@@ -34,7 +34,7 @@
   import Stats19LayerControl from "./layers/points/Stats19.svelte";
   import VehicleCountsLayerControl from "./layers/points/VehicleCounts.svelte";
   import ProblemsLayerControl from "./layers/points/Problems.svelte";
-  import SchemesLayer from "./SchemesLayer.svelte";
+  import SchemesLayer from "./schemes/SchemesLayer.svelte";
   import { interactiveMapLayersEnabled, controls } from "./stores";
   import { getRoadLayerNames } from "lib/maplibre";
   import { get } from "svelte/store";

src/lib/browse/colors.ts

@@ -1,6 +1,4 @@
-import { constructMatchExpression } from "lib/maplibre";
-import { type DataDrivenPropertyValueSpecification } from "maplibre-gl";
-import { fundingProgrammesForColouringAndFiltering } from "./data";
+import type { DataDrivenPropertyValueSpecification } from "maplibre-gl";
 
 // These are specific to the browse page
 export const colors = {
@@ -89,65 +87,3 @@ export const denseLineWidth: DataDrivenPropertyValueSpecification<number> = [
   18,
   20.0,
 ];
-
-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];
-}

src/lib/browse/schemes/colors.ts

@@ -0,0 +1,66 @@
+import { constructMatchExpression } from "lib/maplibre";
+import type { DataDrivenPropertyValueSpecification } from "maplibre-gl";
+import { fundingProgrammesForColouringAndFiltering } from "./data";
+import { colors } from "../colors";
+
+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];
+}

src/lib/browse/schemes/stores.ts

@@ -0,0 +1,25 @@
+import { writable, type Writable } from "svelte/store";
+import type { Schemes, SchemeData } from "types";
+
+// TODO Bundle this into one type, so it's easier to plumb around
+export const atfSchemesGj: Writable<Schemes> = writable({
+  type: "FeatureCollection",
+  features: [],
+  schemes: {},
+});
+export const atfSchemes: Writable<Map<string, SchemeData>> = writable(
+  new Map(),
+);
+export const filterAtfInterventionText: Writable<string> = writable("");
+export const filterAtfSchemeText: Writable<string> = writable("");
+
+export const lcwipSchemesGj: Writable<Schemes> = writable({
+  type: "FeatureCollection",
+  features: [],
+  schemes: {},
+});
+export const lcwipSchemes: Writable<Map<string, SchemeData>> = writable(
+  new Map(),
+);
+export const filterLcwipInterventionText: Writable<string> = writable("");
+export const filterLcwipSchemeText: Writable<string> = writable("");

src/lib/browse/stores.ts

@@ -1,28 +1,4 @@
 import { writable, type Writable } from "svelte/store";
-import type { Schemes, SchemeData } from "types";
-
-// TODO Bundle this into one type, so it's easier to plumb around
-export const atfSchemesGj: Writable<Schemes> = writable({
-  type: "FeatureCollection",
-  features: [],
-  schemes: {},
-});
-export const atfSchemes: Writable<Map<string, SchemeData>> = writable(
-  new Map(),
-);
-export const filterAtfInterventionText: Writable<string> = writable("");
-export const filterAtfSchemeText: Writable<string> = writable("");
-
-export const lcwipSchemesGj: Writable<Schemes> = writable({
-  type: "FeatureCollection",
-  features: [],
-  schemes: {},
-});
-export const lcwipSchemes: Writable<Map<string, SchemeData>> = writable(
-  new Map(),
-);
-export const filterLcwipInterventionText: Writable<string> = writable("");
-export const filterLcwipSchemeText: Writable<string> = writable("");
 
 export const interactiveMapLayersEnabled: Writable<boolean> = writable(true);
 export let controls: Writable<HTMLDivElement | null> = writable(null);

src/pages/BrowseSchemes.svelte

@@ -3,7 +3,8 @@
   import { initAll } from "govuk-frontend";
   import LayerControls from "lib/browse/LayerControls.svelte";
   import "../style/main.css";
-  import { atfSchemesGj, controls } from "lib/browse/stores";
+  import { controls } from "lib/browse/stores";
+  import { atfSchemesGj } from "lib/browse/schemes/stores";
   import {
     appVersion,
     Geocoder,