Use the TS wrapper to conveniently do setCellColors

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")}
     >

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"]}

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;

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}

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"]}

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}
     >

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;
+}