Tease apart RenderNeighbourhood, so we can also show cells in shortcut mode

Author: dabreegster

web/src/RenderNeighbourhood.svelte

@@ -2,49 +2,17 @@
   import type { Feature, FeatureCollection } from "geojson";
   import { FillLayer, GeoJSON, LineLayer } from "svelte-maplibre";
   import { showBasemap } from "./stores";
+  import { setCellColors } from "./cells";
 
   export let gjInput: FeatureCollection;
   // When disabled, can't click lines or filters, no slots, no hoverCursor
   export let interactive = true;
   export let onClickLine = (f: Feature) => {};
 
-  let gj: FeatureCollection;
-  let maxShortcuts: number;
-  // TODO if we could set both reactively, thatd be ideal
-  $: render(gjInput);
-
-  function render(x: FeatureCollection) {
-    // A qualitative palette from colorbrewer2.org, skipping the red hue (used
-    // for levels of shortcutting) and grey (too close to the basemap)
-    let cell_colors = [
-      "#8dd3c7",
-      "#ffffb3",
-      "#bebada",
-      "#80b1d3",
-      "#fdb462",
-      "#b3de69",
-      "#fccde5",
-      "#bc80bd",
-      "#ccebc5",
-      "#ffed6f",
-    ];
-
-    maxShortcuts = Math.max(
-      ...gjInput.features.map((f) => f.properties!.shortcuts ?? 0),
-    );
-
-    for (let f of gjInput.features) {
-      f.properties ??= {};
-      if (f.properties.cell_color == "disconnected") {
-        f.properties.color = "red";
-      } else if (Object.hasOwn(f.properties, "cell_color")) {
-        f.properties.color =
-          cell_colors[f.properties.cell_color % cell_colors.length];
-      }
-    }
-
-    gj = gjInput;
-  }
+  $: gj = setCellColors(gjInput);
+  $: maxShortcuts = Math.max(
+    ...gjInput.features.map((f) => f.properties!.shortcuts ?? 0),
+  );
 </script>
 
 <GeoJSON data={gj} generateId>

web/src/ViewShortcutsMode.svelte

@@ -1,12 +1,13 @@
 <script lang="ts">
+  import { setCellColors } from "./cells";
   import type { Feature, FeatureCollection } from "geojson";
   import { onDestroy, onMount } from "svelte";
-  import { GeoJSON, LineLayer } from "svelte-maplibre";
+  import { FillLayer, GeoJSON, LineLayer } from "svelte-maplibre";
   import { notNull, Popup } from "./common";
   import ModalFilterLayer from "./ModalFilterLayer.svelte";
   import RenderNeighbourhood from "./RenderNeighbourhood.svelte";
   import SplitComponent from "./SplitComponent.svelte";
-  import { app, map, mode } from "./stores";
+  import { app, map, mode, showBasemap } from "./stores";
 
   type State =
     | {
@@ -122,6 +123,19 @@
         </div>
       </RenderNeighbourhood>
     {:else if state.state == "chose-road"}
+      <GeoJSON
+        data={setCellColors(JSON.parse(notNull($app).renderNeighbourhood()))}
+      >
+        <FillLayer
+          beforeId={$showBasemap ? "Building" : undefined}
+          filter={["==", ["get", "kind"], "cell"]}
+          paint={{
+            "fill-color": ["get", "color"],
+            "fill-opacity": 0.3,
+          }}
+        />
+      </GeoJSON>
+
       <GeoJSON data={state.gj.features[state.shortcutIndex]}>
         <LineLayer
           paint={{

web/src/cells.ts

@@ -0,0 +1,31 @@
+import type { FeatureCollection } from "geojson";
+
+// Sets a 'color' property on any cell polygons. Idempotent.
+export function setCellColors(gj: FeatureCollection): FeatureCollection {
+  // A qualitative palette from colorbrewer2.org, skipping the red hue (used
+  // for levels of shortcutting) and grey (too close to the basemap)
+  let cell_colors = [
+    "#8dd3c7",
+    "#ffffb3",
+    "#bebada",
+    "#80b1d3",
+    "#fdb462",
+    "#b3de69",
+    "#fccde5",
+    "#bc80bd",
+    "#ccebc5",
+    "#ffed6f",
+  ];
+
+  for (let f of gj.features) {
+    f.properties ??= {};
+    if (f.properties.cell_color == "disconnected") {
+      f.properties.color = "red";
+    } else if (Object.hasOwn(f.properties, "cell_color")) {
+      f.properties.color =
+        cell_colors[f.properties.cell_color % cell_colors.length];
+    }
+  }
+
+  return gj;
+}