Fix filter text highlighting in popup

src/lib/browse/Filters.svelte

@@ -10,6 +10,7 @@
   import { onMount } from "svelte";
   import type { FeatureUnion, SchemeCollection, SchemeData } from "types";
   import InterventionColorSelector from "./InterventionColorSelector.svelte";
+  import { filterText } from "./stores";
 
   export let schemesGj: SchemeCollection;
   // These are immutable; re-create this component if they change
@@ -18,9 +19,6 @@
   // by scheme_reference
   export let schemesToBeShown: Set<string> = new Set();
 
-  // Read-only, so callers can highlight search terms
-  export let filterText = "";
-
   export let show = true;
 
   // Dropdown filters
@@ -51,11 +49,11 @@
 
   // When any filters change, update schemesToBeShown
   function filtersUpdated(
-    filterText: string,
+    filterTextCopy: string,
     filterAuthority: string,
     filterFundingProgramme: string
   ) {
-    let filterNormalized = filterText.toLowerCase();
+    let filterNormalized = filterTextCopy.toLowerCase();
     let filterFeatures = (feature: FeatureUnion) => {
       // Only the name and description fields have anything worth filtering
       if (
@@ -119,7 +117,7 @@
     schemesGj = schemesGj;
     counts = counts;
   }
-  $: filtersUpdated(filterText, filterAuthority, filterFundingProgramme);
+  $: filtersUpdated($filterText, filterAuthority, filterFundingProgramme);
 </script>
 
 <CollapsibleCard label="Filters">
@@ -142,9 +140,9 @@
       type="text"
       class="govuk-input govuk-input--width-10"
       id="filterText"
-      bind:value={filterText}
+      bind:value={$filterText}
     />
-    <SecondaryButton on:click={() => (filterText = "")}>Clear</SecondaryButton>
+    <SecondaryButton on:click={() => ($filterText = "")}>Clear</SecondaryButton>
   </FormElement>
   <InterventionColorSelector />
 </CollapsibleCard>

src/lib/browse/InterventionLayer.svelte

@@ -22,7 +22,6 @@
 
   export let schemesGj: SchemeCollection;
   export let showSchemes: boolean;
-  export let filterText: string;
 
   let colorInterventions = colorInterventionsBySchema("v1");
 
@@ -57,7 +56,7 @@
     }}
   >
     <Popup let:props>
-      <InterventionPopup {props} {filterText} />
+      <InterventionPopup {props} />
     </Popup>
   </CircleLayer>
 
@@ -76,7 +75,7 @@
     }}
   >
     <Popup let:props>
-      <InterventionPopup {props} {filterText} />
+      <InterventionPopup {props} />
     </Popup>
   </LineLayer>
   <CircleLayer
@@ -107,7 +106,7 @@
     }}
   >
     <Popup let:props>
-      <InterventionPopup {props} {filterText} />
+      <InterventionPopup {props} />
     </Popup>
   </FillLayer>
   <LineLayer

src/lib/browse/InterventionPopup.svelte

@@ -1,16 +1,16 @@
 <script lang="ts">
   import { prettyPrintMeters } from "lib/maplibre";
+  import { filterText } from "./stores";
 
   export let props: { [name: string]: any };
-  export let filterText: string;
 
   // When the user is filtering name/description by freeform text, highlight the matching pieces.
   function highlightFilter(input: string): string {
-    if (!filterText) {
+    if (!$filterText) {
       return input;
     }
     return input.replace(
-      new RegExp(filterText, "gi"),
+      new RegExp($filterText, "gi"),
       (match) => `<mark>${match}</mark>`
     );
   }

src/lib/browse/LayerControls.svelte

@@ -7,7 +7,6 @@
     StreetViewTool,
   } from "lib/common";
   import { CheckboxGroup } from "lib/govuk";
-  import { interactiveMapLayersEnabled } from "stores";
   import CensusOutputAreaLayerControl from "./layers/areas/CensusOutputAreas.svelte";
   import CombinedAuthoritiesLayerControl from "./layers/areas/CombinedAuthorities.svelte";
   import ImdLayerControl from "./layers/areas/IMD.svelte";
@@ -30,6 +29,7 @@
   import SchoolsLayerControl from "./layers/points/Schools.svelte";
   import SportsSpacesLayerControl from "./layers/points/SportsSpaces.svelte";
   import VehicleCountsLayerControl from "./layers/points/VehicleCounts.svelte";
+  import { interactiveMapLayersEnabled } from "./stores";
 
   // Workaround for https://github.com/sveltejs/svelte/issues/7630
   $: streetviewEnabled = !$interactiveMapLayersEnabled;

src/lib/browse/stores.ts

@@ -0,0 +1,4 @@
+import { writable, type Writable } from "svelte/store";
+
+export const interactiveMapLayersEnabled: Writable<boolean> = writable(true);
+export const filterText: Writable<string> = writable("");

src/pages/BrowseSchemes.svelte

@@ -39,7 +39,6 @@
   };
   let schemes: Map<string, SchemeData> = new Map();
   let schemesToBeShown: Set<string> = new Set();
-  let filterText = "";
   let showSchemes = true;
 
   function loadFile(text: string) {
@@ -72,7 +71,6 @@
         bind:schemesGj
         {schemes}
         bind:schemesToBeShown
-        bind:filterText
         bind:show={showSchemes}
       />
     {/if}
@@ -88,7 +86,7 @@
   <div slot="main">
     <MapLibreMap style={$mapStyle} startBounds={[-5.96, 49.89, 2.31, 55.94]}>
       <Geocoder />
-      <InterventionLayer {schemesGj} {filterText} {showSchemes} />
+      <InterventionLayer {schemesGj} {showSchemes} />
       <div class="top-right">
         <LayerControls />
       </div>

src/stores.ts

@@ -48,9 +48,6 @@ userSettings.subscribe((value) =>
 
 export const mode: Writable<Mode> = writable({ mode: "list" });
 
-// For browse page
-export const interactiveMapLayersEnabled: Writable<boolean> = writable(true);
-
 // All feature IDs must:
 //
 // - be unique