Display more stuff when debugging a route

a-b-street · May 26, 2024 · af782ff · af782ff
1 parent 9e63fa4
commit af782ff
Show file tree

Hide file tree

Showing 5 changed files with 75 additions and 19 deletions.
diff --git a/backend/src/transit_route.rs b/backend/src/transit_route.rs
@@ -242,17 +242,21 @@ fn render_debug(
         let backref = backrefs.remove(&i).unwrap();
         match backref.step {
             PathStep::Road { road, .. } => {
-                features.push(Feature::from(Geometry::from(
+                let mut f = Feature::from(Geometry::from(
                     &graph.mercator.to_wgs84(&graph.roads[road.0].linestring),
-                )));
+                ));
+                f.set_property("kind", "road");
+                features.push(f);
             }
             PathStep::Transit { stop1, stop2, .. } => {
-                features.push(Feature::from(Geometry::from(&graph.mercator.to_wgs84(
+                let mut f = Feature::from(Geometry::from(&graph.mercator.to_wgs84(
                     &LineString::new(vec![
                         graph.gtfs.stops[stop1.0].point.into(),
                         graph.gtfs.stops[stop2.0].point.into(),
                     ]),
-                ))));
+                )));
+                f.set_property("kind", "transit");
+                features.push(f);
             }
         }
 

diff --git a/web/src/App.svelte b/web/src/App.svelte
@@ -114,7 +114,12 @@
         {:else if $mode.kind == "route"}
           <RouteMode />
         {:else if $mode.kind == "debug-route"}
-          <DebugRouteMode gj={$mode.gj} />
+          <DebugRouteMode
+            debugGj={$mode.debugGj}
+            start={$mode.start}
+            end={$mode.end}
+            routeGj={$mode.routeGj}
+          />
         {/if}
       {/if}
     </MapLibre>

diff --git a/web/src/DebugRouteMode.svelte b/web/src/DebugRouteMode.svelte
@@ -1,19 +1,23 @@
 <script lang="ts">
-  import { GeoJSON, CircleLayer, LineLayer } from "svelte-maplibre";
+  import { GeoJSON, CircleLayer, LineLayer, Marker } from "svelte-maplibre";
   import { SplitComponent } from "svelte-utils/two_column_layout";
   import { map, mode } from "./stores";
   import type { FeatureCollection } from "geojson";
   import { onMount, onDestroy } from "svelte";
   import { notNull } from "svelte-utils";
+  import { constructMatchExpression } from "svelte-utils/map";
 
-  export let gj: FeatureCollection;
+  export let debugGj: FeatureCollection;
+  export let start: { lng: number; lat: number };
+  export let end: { lng: number; lat: number };
+  export let routeGj: FeatureCollection;
 
-  let numNodes = gj.features.length / 2;
+  let numNodes = debugGj.features.length / 2;
 
   let showSteps = 1;
   $: display = {
     type: "FeatureCollection" as const,
-    features: gj.features.slice(0, 2 * showSteps),
+    features: debugGj.features.slice(0, 2 * showSteps),
   };
 
   function onKeyDown(e: KeyboardEvent) {
@@ -44,14 +48,9 @@
       <button on:click={() => ($mode = { kind: "route" })}>Back</button>
     </div>
 
-    <p>{gj.features.length / 2} total nodes searched</p>
+    <p>{numNodes} total nodes searched</p>
 
-    <input
-      type="range"
-      min="1"
-      max={gj.features.length / 2}
-      bind:value={showSteps}
-    />
+    <input type="range" min="1" max={numNodes} bind:value={showSteps} />
 
     <p>
       Search is currently at {notNull(
@@ -60,6 +59,23 @@
     </p>
   </div>
   <div slot="map">
+    <Marker lngLat={start}><span class="dot">A</span></Marker>
+    <Marker lngLat={end}><span class="dot">B</span></Marker>
+
+    <GeoJSON data={routeGj}>
+      <LineLayer
+        paint={{
+          "line-width": 20,
+          "line-color": constructMatchExpression(
+            ["get", "kind"],
+            { road: "cyan", transit: "purple" },
+            "red",
+          ),
+          "line-opacity": 0.5,
+        }}
+      />
+    </GeoJSON>
+
     <GeoJSON data={display} generateId>
       <CircleLayer
         paint={{
@@ -71,9 +87,28 @@
       <LineLayer
         paint={{
           "line-width": 5,
-          "line-color": "black",
+          "line-color": constructMatchExpression(
+            ["get", "kind"],
+            { road: "black", transit: "orange" },
+            "red",
+          ),
         }}
       />
     </GeoJSON>
   </div>
 </SplitComponent>
+
+<style>
+  .dot {
+    width: 30px;
+    height: 30px;
+    border-radius: 50%;
+    display: flex;
+    justify-content: center;
+    align-items: center;
+
+    color: white;
+    background-color: blue;
+    font-weight: bold;
+  }
+</style>
diff --git a/web/src/RouteMode.svelte b/web/src/RouteMode.svelte
@@ -74,7 +74,13 @@
         mode: travelMode,
         debugSearch: true,
       });
-      $mode = { kind: "debug-route", gj: debugGj };
+      $mode = {
+        kind: "debug-route",
+        debugGj,
+        start: start!,
+        end: end!,
+        routeGj: gj!,
+      };
     } catch (error: any) {
       err = error.toString();
     }

diff --git a/web/src/stores.ts b/web/src/stores.ts
@@ -12,7 +12,13 @@ export type Mode =
   | { kind: "debug" }
   | { kind: "isochrone" }
   | { kind: "route" }
-  | { kind: "debug-route"; gj: FeatureCollection };
+  | {
+      kind: "debug-route";
+      debugGj: FeatureCollection;
+      start: { lng: number; lat: number };
+      end: { lng: number; lat: number };
+      routeGj: FeatureCollection;
+    };
 
 export let mode: Writable<Mode> = writable({ kind: "title" });
 export let map: Writable<Map | null> = writable(null);