Start a mode to debug movements per intersection. No logic yet.

Author: dabreegster

backend/src/lib.rs

@@ -320,6 +320,26 @@ impl LTN {
         .map_err(err_to_js)?)
     }
 
+    #[wasm_bindgen(js_name = getAllIntersections)]
+    pub fn get_all_intersections(&self) -> Result<String, JsValue> {
+        Ok(serde_json::to_string(&GeoJson::from(
+            self.map
+                .intersections
+                .iter()
+                .map(|i| self.map.mercator.to_wgs84_gj(&i.point))
+                .collect::<Vec<_>>(),
+        ))
+        .map_err(err_to_js)?)
+    }
+
+    #[wasm_bindgen(js_name = getMovements)]
+    pub fn get_movements(&self, intersection: usize) -> Result<String, JsValue> {
+        Ok(
+            serde_json::to_string(&self.map.get_movements(IntersectionID(intersection)))
+                .map_err(err_to_js)?,
+        )
+    }
+
     // TODO This is also internal to MapModel. But not sure who should own Neighbourhood or how to
     // plumb, so duplicting here.
     fn after_edit(&mut self) {

backend/src/map_model.rs

@@ -581,6 +581,17 @@ impl MapModel {
         }
         directions
     }
+
+    pub fn get_movements(&self, i: IntersectionID) -> GeoJson {
+        let mut features = Vec::new();
+
+        // TODO Temporary
+        for r in &self.get_i(i).roads {
+            features.push(self.mercator.to_wgs84_gj(&self.get_r(*r).linestring));
+        }
+
+        GeoJson::from(features)
+    }
 }
 
 impl Road {

web/src/App.svelte

@@ -24,6 +24,7 @@
   } from "svelte-utils/top_bar_layout";
   import AutoBoundariesMode from "./AutoBoundariesMode.svelte";
   import { DisableInteractiveLayers, layerId, StreetView } from "./common";
+  import DebugIntersectionsMode from "./DebugIntersectionsMode.svelte";
   import DebugMode from "./DebugMode.svelte";
   import NeighbourhoodMode from "./edit/NeighbourhoodMode.svelte";
   import ImpactDetailMode from "./ImpactDetailMode.svelte";
@@ -177,6 +178,8 @@
           <ImpactDetailMode road={$mode.road} />
         {:else if $mode.mode == "debug"}
           <DebugMode />
+        {:else if $mode.mode == "debug-intersections"}
+          <DebugIntersectionsMode />
         {/if}
       {/if}
       <DisableInteractiveLayers />

web/src/DebugIntersectionsMode.svelte

@@ -0,0 +1,71 @@
+<script lang="ts">
+  import {
+    CircleLayer,
+    GeoJSON,
+    LineLayer,
+    type LayerClickInfo,
+  } from "svelte-maplibre";
+  import { notNull } from "svelte-utils";
+  import { emptyGeojson } from "svelte-utils/map";
+  import { SplitComponent } from "svelte-utils/top_bar_layout";
+  import BackButton from "./BackButton.svelte";
+  import { layerId, Link } from "./common";
+  import { backend, mode } from "./stores";
+
+  let movements = emptyGeojson();
+
+  function pickIntersection(e: CustomEvent<LayerClickInfo>) {
+    movements = $backend!.getMovements(e.detail.features[0].id as number);
+  }
+</script>
+
+<SplitComponent>
+  <div slot="top">
+    <nav aria-label="breadcrumb">
+      <ul>
+        <li>
+          <Link on:click={() => ($mode = { mode: "title", firstLoad: false })}>
+            Choose project
+          </Link>
+        </li>
+        <li>Debug intersections</li>
+      </ul>
+    </nav>
+  </div>
+
+  <div slot="sidebar">
+    <BackButton on:click={() => ($mode = { mode: "network" })} />
+
+    {#if movements.features.length > 0}
+      <button class="secondary" on:click={() => (movements = emptyGeojson())}>
+        Pick another intersection
+      </button>
+      <p>{movements.features.length} movements</p>
+    {/if}
+  </div>
+
+  <div slot="map">
+    <GeoJSON data={notNull($backend).getAllIntersections()} generateId>
+      <CircleLayer
+        {...layerId("debug-intersections")}
+        paint={{
+          "circle-radius": 15,
+          "circle-color": "black",
+        }}
+        manageHoverState
+        hoverCursor="pointer"
+        on:click={pickIntersection}
+      />
+    </GeoJSON>
+
+    <GeoJSON data={movements} generateId>
+      <LineLayer
+        {...layerId("debug-movements")}
+        paint={{
+          "line-width": 2,
+          "line-color": "red",
+        }}
+      />
+    </GeoJSON>
+  </div>
+</SplitComponent>

web/src/NetworkMode.svelte

@@ -123,6 +123,11 @@
             Predict impact
           </Link>
         </li>
+        <li>
+          <Link on:click={() => ($mode = { mode: "debug-intersections" })}>
+            Debug intersections
+          </Link>
+        </li>
       </ul>
     </nav>
   </div>

web/src/common/zorder.ts

@@ -86,6 +86,9 @@ const layerZorder = [
   "debug-crosses",
   "debug-filters",
 
+  "debug-intersections",
+  "debug-movements",
+
   "cells",
   "interior-roads-outlines",
   "interior-roads",

web/src/stores.ts

@@ -45,6 +45,9 @@ export type Mode =
       mode: "impact-detail";
       road: Feature;
     }
+  | {
+      mode: "debug-intersections";
+    }
   | {
       mode: "debug";
     };

web/src/wasm.ts

@@ -175,6 +175,14 @@ export class Backend {
   > {
     return JSON.parse(this.inner.getImpactsOnRoad(road));
   }
+
+  getAllIntersections(): FeatureCollection<Point> {
+    return JSON.parse(this.inner.getAllIntersections());
+  }
+
+  getMovements(intersection: number): FeatureCollection<LineString> {
+    return JSON.parse(this.inner.getMovements(intersection));
+  }
 }
 
 export interface RenderNeighbourhoodOutput {