From d87345fb59e7a20c9b8607d936559fa75b58b857 Mon Sep 17 00:00:00 2001
From: Dustin Carlino <dabreegster@gmail.com>
Date: Sat, 4 Jan 2025 12:02:07 +0000
Subject: [PATCH] Use the TS wrapper to conveniently do setCellColors

---
 web/src/DebugMode.svelte                |  2 +-
 web/src/ImpactOneDestinationMode.svelte |  3 +-
 web/src/RenderNeighbourhood.svelte      |  6 ++--
 web/src/RouteMode.svelte                |  2 +-
 web/src/ViewShortcutsMode.svelte        |  5 ++--
 web/src/cells.ts                        | 35 -----------------------
 web/src/edit/NeighbourhoodMode.svelte   | 16 +++++------
 web/src/wasm.ts                         | 38 ++++++++++++++++++++++++-
 8 files changed, 52 insertions(+), 55 deletions(-)
 delete mode 100644 web/src/cells.ts

diff --git a/web/src/DebugMode.svelte b/web/src/DebugMode.svelte
index 6762064..17f3fa5 100644
--- a/web/src/DebugMode.svelte
+++ b/web/src/DebugMode.svelte
@@ -39,7 +39,7 @@
 
   <div slot="map">
     <RenderNeighbourhood
-      gjInput={notNull($backend).renderNeighbourhood()}
+      gj={notNull($backend).renderNeighbourhood()}
       interactive
       onClickLine={(f, _) => window.open(notNull(f.properties).way, "_blank")}
     >
diff --git a/web/src/ImpactOneDestinationMode.svelte b/web/src/ImpactOneDestinationMode.svelte
index 543c969..44328b8 100644
--- a/web/src/ImpactOneDestinationMode.svelte
+++ b/web/src/ImpactOneDestinationMode.svelte
@@ -16,7 +16,6 @@
   } from "svelte-utils/map";
   import { SplitComponent } from "svelte-utils/top_bar_layout";
   import BackButton from "./BackButton.svelte";
-  import { setCellColors } from "./cells";
   import { layerId, Link } from "./common";
   import ModalFilterLayer from "./ModalFilterLayer.svelte";
   import {
@@ -96,7 +95,7 @@
   </div>
 
   <div slot="map">
-    <GeoJSON data={setCellColors(notNull($backend).renderNeighbourhood())}>
+    <GeoJSON data={notNull($backend).renderNeighbourhood()}>
       <FillLayer
         {...layerId("cells")}
         filter={["==", ["get", "kind"], "cell"]}
diff --git a/web/src/RenderNeighbourhood.svelte b/web/src/RenderNeighbourhood.svelte
index fd30962..4673cce 100644
--- a/web/src/RenderNeighbourhood.svelte
+++ b/web/src/RenderNeighbourhood.svelte
@@ -7,20 +7,18 @@
     hoverStateFilter,
     LineLayer,
   } from "svelte-maplibre";
-  import { setCellColors } from "./cells";
   import { layerId } from "./common";
   import OneWayLayer from "./OneWayLayer.svelte";
   import type { RenderNeighbourhoodOutput } from "./wasm";
 
-  export let gjInput: RenderNeighbourhoodOutput;
+  export let gj: RenderNeighbourhoodOutput;
   // When disabled, can't click lines or filters, no slots, no hoverCursor
   export let interactive = true;
   export let onClickLine = (f: Feature, pt: LngLat) => {};
 
-  $: gj = setCellColors(gjInput);
   $: maxShortcuts =
     Math.max(
-      ...gjInput.features.map((f) =>
+      ...gj.features.map((f) =>
         f.properties.kind == "interior_road" ? f.properties.shortcuts : 0,
       ),
     ) ?? 0;
diff --git a/web/src/RouteMode.svelte b/web/src/RouteMode.svelte
index 4c7dc51..0b2a6ab 100644
--- a/web/src/RouteMode.svelte
+++ b/web/src/RouteMode.svelte
@@ -78,7 +78,7 @@
   <div slot="map">
     {#if prevMode == "neighbourhood"}
       <RenderNeighbourhood
-        gjInput={notNull($backend).renderNeighbourhood()}
+        gj={notNull($backend).renderNeighbourhood()}
         interactive={false}
       />
     {/if}
diff --git a/web/src/ViewShortcutsMode.svelte b/web/src/ViewShortcutsMode.svelte
index b4f7f5f..e54b6bd 100644
--- a/web/src/ViewShortcutsMode.svelte
+++ b/web/src/ViewShortcutsMode.svelte
@@ -7,7 +7,6 @@
   import { Popup } from "svelte-utils/map";
   import { SplitComponent } from "svelte-utils/top_bar_layout";
   import BackButton from "./BackButton.svelte";
-  import { setCellColors } from "./cells";
   import { layerId, Link } from "./common";
   import ModalFilterLayer from "./ModalFilterLayer.svelte";
   import RenderNeighbourhood from "./RenderNeighbourhood.svelte";
@@ -150,7 +149,7 @@
   <div slot="map">
     {#if state.state == "neutral"}
       <RenderNeighbourhood
-        gjInput={notNull($backend).renderNeighbourhood()}
+        gj={notNull($backend).renderNeighbourhood()}
         onClickLine={choseRoad}
       >
         <div slot="line-popup">
@@ -162,7 +161,7 @@
         </div>
       </RenderNeighbourhood>
     {:else if state.state == "chose-road"}
-      <GeoJSON data={setCellColors(notNull($backend).renderNeighbourhood())}>
+      <GeoJSON data={notNull($backend).renderNeighbourhood()}>
         <FillLayer
           {...layerId("cells")}
           filter={["==", ["get", "kind"], "cell"]}
diff --git a/web/src/cells.ts b/web/src/cells.ts
deleted file mode 100644
index 267da81..0000000
--- a/web/src/cells.ts
+++ /dev/null
@@ -1,35 +0,0 @@
-import type { RenderNeighbourhoodOutput } from "./wasm";
-
-// Sets a 'color' property on any cell polygons. Idempotent.
-export function setCellColors(
-  gj: RenderNeighbourhoodOutput,
-): RenderNeighbourhoodOutput {
-  // 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) {
-    if (f.properties.kind != "cell") {
-      continue;
-    }
-    if (f.properties.cell_color == "disconnected") {
-      f.properties.color = "red";
-    } else {
-      f.properties.color =
-        cell_colors[f.properties.cell_color % cell_colors.length];
-    }
-  }
-
-  return gj;
-}
diff --git a/web/src/edit/NeighbourhoodMode.svelte b/web/src/edit/NeighbourhoodMode.svelte
index ca8c8b7..0ef74a5 100644
--- a/web/src/edit/NeighbourhoodMode.svelte
+++ b/web/src/edit/NeighbourhoodMode.svelte
@@ -44,11 +44,11 @@
     { name: string; waypoints: Waypoint[] }
   > | null;
 
-  let gjInput: RenderNeighbourhoodOutput;
+  let gj: RenderNeighbourhoodOutput;
   let allShortcuts = $backend!.getAllShortcuts();
   $: rerender($mutationCounter);
 
-  $: numDisconnectedCells = gjInput.features.filter(
+  $: numDisconnectedCells = gj.features.filter(
     (f) =>
       f.properties.kind == "cell" && f.properties.cell_color == "disconnected",
   ).length;
@@ -58,12 +58,12 @@
   });
 
   function rerender(_x: number) {
-    gjInput = $backend!.renderNeighbourhood();
+    gj = $backend!.renderNeighbourhood();
     // @ts-expect-error TS can't figure out that we're narrowing the case here
-    boundary = gjInput.features.find((f) => f.properties.kind == "boundary")!;
+    boundary = gj.features.find((f) => f.properties.kind == "boundary")!;
 
-    undoLength = gjInput.undo_length;
-    redoLength = gjInput.redo_length;
+    undoLength = gj.undo_length;
+    redoLength = gj.redo_length;
 
     allShortcuts = $backend!.getAllShortcuts();
 
@@ -206,7 +206,7 @@
   <div slot="sidebar">
     <p>
       Editing neighbourhood <u>{notNull(boundary).properties.name}</u>
-      , with an area of {gjInput.area_km2.toFixed(1)} km²
+      , with an area of {gj.area_km2.toFixed(1)} km²
     </p>
 
     {#if numDisconnectedCells > 0}
@@ -287,7 +287,7 @@
 
   <div slot="map">
     <RenderNeighbourhood
-      {gjInput}
+      {gj}
       interactive={action == "filter" || action == "oneway"}
       {onClickLine}
     >
diff --git a/web/src/wasm.ts b/web/src/wasm.ts
index bdfb60a..7f23390 100644
--- a/web/src/wasm.ts
+++ b/web/src/wasm.ts
@@ -52,8 +52,10 @@ export class Backend {
     return JSON.parse(this.inner.renderModalFilters());
   }
 
+  // This adds a 'color' property to all cells. It's nicer to keep this on the
+  // frontend, since it's about styling.
   renderNeighbourhood(): RenderNeighbourhoodOutput {
-    return JSON.parse(this.inner.renderNeighbourhood());
+    return setCellColors(JSON.parse(this.inner.renderNeighbourhood()));
   }
 
   renderAutoBoundaries(): FeatureCollection {
@@ -181,3 +183,37 @@ export type AllShortcuts = FeatureCollection<
   LineString,
   { directness: number; length_meters: number }
 >;
+
+// Sets a 'color' property on any cell polygons. Idempotent.
+function setCellColors(
+  gj: RenderNeighbourhoodOutput,
+): RenderNeighbourhoodOutput {
+  // 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) {
+    if (f.properties.kind != "cell") {
+      continue;
+    }
+    if (f.properties.cell_color == "disconnected") {
+      f.properties.color = "red";
+    } else {
+      f.properties.color =
+        cell_colors[f.properties.cell_color % cell_colors.length];
+    }
+  }
+
+  return gj;
+}