Highlight the filter text in the intervention popup

src/lib/browse/Filters.svelte

@@ -12,7 +12,8 @@
   // by scheme_reference
   export let schemesToBeShown: Set<string> = new Set();
 
-  let filterText = "";
+  // Read-only, so callers can highlight search terms
+  export let filterText = "";
 
   // Dropdown filters
   let authorities: [string, string][] = [];
@@ -127,7 +128,7 @@
     emptyOption
     bind:value={filterFundingProgramme}
   />
-  <FormElement label="Name or description" id="filterText">
+  <FormElement label="Intervention name or description" id="filterText">
     <input
       type="text"
       class="govuk-input govuk-input--width-10"

src/pages/BrowseSchemes.svelte

@@ -37,6 +37,7 @@
 
   let schemes: Map<string, Scheme> = new Map();
   let schemesToBeShown: Set<string> = new Set();
+  let filterText = "";
 
   onDestroy(() => {
     gjScheme.set(emptyGeojson() as GjScheme);
@@ -58,16 +59,29 @@
   function tooltip(props: { [name: string]: any }): string {
     // TODO Move into a Svelte component, so we don't have to awkwardly build up HTML like this
     var html = `<div class="govuk-prose" style="max-width: 30vw;">`;
-    html += `<h2>${props.name} (${props.intervention_type})</h2>`;
+    html += `<h2>${highlightFilter(props.name)} (${
+      props.intervention_type
+    })</h2>`;
     html += `<p>Scheme reference: ${props.scheme_reference}</p>`;
     if (props.length_meters) {
       html += `<p>Length: ${prettyPrintMeters(props.length_meters)}</p>`;
     }
     if (props.description) {
-      html += `<p>${props.description}</p>`;
+      html += `<p>${highlightFilter(props.description)}</p>`;
     }
     return html;
   }
+
+  // When the user is filtering name/description by freeform text, highlight the matching pieces.
+  function highlightFilter(input: string): string {
+    if (!filterText) {
+      return input;
+    }
+    return input.replace(
+      new RegExp(filterText, "gi"),
+      (match) => `<mark>${match}</mark>`
+    );
+  }
 </script>
 
 <Layout>
@@ -85,7 +99,7 @@
     <FileInput label="Load from GeoJSON" id="load-geojson" {loadFile} />
 
     {#if schemes.size > 0}
-      <Filters {schemes} bind:schemesToBeShown />
+      <Filters {schemes} bind:schemesToBeShown bind:filterText />
     {/if}
 
     <ul>