Open a score mode desire line in route mode for details

web/src/App.svelte

@@ -18,6 +18,7 @@
     model,
     maptilerApiKey,
     showAbout,
+    routeMode,
   } from "./stores";
   import TitleMode from "./title/TitleMode.svelte";
   import {
@@ -57,7 +58,7 @@
     }
     console.log("New map model loaded");
     zoomToFit();
-    $mode = "route";
+    $mode = routeMode();
   }
   $: gotModel($model);
 
@@ -90,7 +91,7 @@
     <h1>Severance Snape</h1>
     <div bind:this={sidebarDiv} />
 
-    {#if $mode != "title"}
+    {#if $mode.kind != "title"}
       <hr />
       <div><button on:click={zoomToFit}>Zoom to fit</button></div>
 
@@ -136,18 +137,23 @@
       <div bind:this={mapDiv} />
 
       <PolygonToolLayer />
-      {#if $mode == "title"}
+      {#if $mode.kind == "title"}
         <TitleMode {wasmReady} />
       {/if}
       {#if $model}
         <GeoJSON data={JSON.parse($model.getInvertedBoundary())}>
           <FillLayer paint={{ "fill-color": "black", "fill-opacity": 0.3 }} />
         </GeoJSON>
-        {#if $mode == "route"}
-          <RouteMode {showSeverances} {opacity} />
-        {:else if $mode == "score"}
+        {#if $mode.kind == "route"}
+          <RouteMode
+            {showSeverances}
+            {opacity}
+            route_a={$mode.route_a}
+            route_b={$mode.route_b}
+          />
+        {:else if $mode.kind == "score"}
           <ScoreMode {showSeverances} {opacity} />
-        {:else if $mode == "debug"}
+        {:else if $mode.kind == "debug"}
           <DebugMode {showSeverances} {opacity} />
         {/if}
       {/if}

web/src/NavBar.svelte

@@ -1,28 +1,33 @@
 <script lang="ts">
-  import { mode } from "./stores";
+  import { mode, routeMode } from "./stores";
 </script>
 
 <nav>
   <ul>
     <li>
-      <button on:click={() => ($mode = "title")}>Change study area</button>
+      <button on:click={() => ($mode = { kind: "title" })}
+        >Change study area</button
+      >
     </li>
 
     <li>
-      <button on:click={() => ($mode = "score")} disabled={$mode == "score"}
-        >Score</button
+      <button
+        on:click={() => ($mode = { kind: "score" })}
+        disabled={$mode.kind == "score"}>Score</button
       >
     </li>
 
     <li>
-      <button on:click={() => ($mode = "route")} disabled={$mode == "route"}
-        >Route</button
+      <button
+        on:click={() => ($mode = routeMode())}
+        disabled={$mode.kind == "route"}>Route</button
       >
     </li>
 
     <li>
-      <button on:click={() => ($mode = "debug")} disabled={$mode == "debug"}
-        >Debug network</button
+      <button
+        on:click={() => ($mode = { kind: "debug" })}
+        disabled={$mode.kind == "debug"}>Debug network</button
       >
     </li>
   </ul>

web/src/RouteMode.svelte

@@ -7,20 +7,11 @@
   import { model, type RouteGJ } from "./stores";
   import NavBar from "./NavBar.svelte";
 
+  export let route_a: [number, number];
+  export let route_b: [number, number];
   export let showSeverances: boolean;
   export let opacity: number;
 
-  // TODO Maybe need to do this when model changes
-  let bbox: number[] = Array.from($model!.getBounds());
-  let route_a = {
-    lng: lerp(0.4, bbox[0], bbox[2]),
-    lat: lerp(0.4, bbox[1], bbox[3]),
-  };
-  let route_b = {
-    lng: lerp(0.6, bbox[0], bbox[2]),
-    lat: lerp(0.6, bbox[1], bbox[3]),
-  };
-
   // TODO or empty
   let route_gj: RouteGJ | null = null;
   let route_err = "";
@@ -29,10 +20,10 @@
     try {
       route_gj = JSON.parse(
         $model!.compareRoute({
-          x1: route_a.lng,
-          y1: route_a.lat,
-          x2: route_b.lng,
-          y2: route_b.lat,
+          x1: route_a[0],
+          y1: route_a[1],
+          x2: route_b[0],
+          y2: route_b[1],
         }),
       );
       route_err = "";
@@ -44,11 +35,7 @@
 
   function onRightClick(e: CustomEvent<MapMouseEvent>) {
     // Move the first marker, for convenience
-    route_a = e.detail.lngLat;
-  }
-
-  function lerp(pct: number, a: number, b: number): number {
-    return a + pct * (b - a);
+    route_a = e.detail.lngLat.toArray();
   }
 </script>
 

web/src/ScoreMode.svelte

@@ -12,30 +12,32 @@
   import { colorScale, limits } from "./colors";
   import NetworkLayer from "./NetworkLayer.svelte";
   import { SplitComponent } from "svelte-utils/top_bar_layout";
-  import { map, model } from "./stores";
+  import { map, model, mode } from "./stores";
   import NavBar from "./NavBar.svelte";
 
   export let showSeverances: boolean;
   export let opacity: number;
 
+  let desire_line: [number, number][] | null = null;
   let route_gj: FeatureCollection | null = null;
 
   // TODO hack... need to toggle off interactiveness of network layer, so just copy it?
 
   function showRoute(e: CustomEvent<LayerClickInfo>) {
     try {
-      let linestring = (e.detail.features[0] as Feature<LineString>).geometry
-        .coordinates;
+      desire_line = (e.detail.features[0] as Feature<LineString>).geometry
+        .coordinates as [number, number][];
       route_gj = JSON.parse(
         $model!.compareRoute({
-          x1: linestring[0][0],
-          y1: linestring[0][1],
-          x2: linestring[1][0],
-          y2: linestring[1][1],
+          x1: desire_line[0][0],
+          y1: desire_line[0][1],
+          x2: desire_line[1][0],
+          y2: desire_line[1][1],
         }),
       );
     } catch (err) {
       window.alert(`No route: ${err}`);
+      desire_line = null;
       route_gj = null;
     }
   }
@@ -49,8 +51,19 @@
     ) {
       return;
     }
+    desire_line = null;
     route_gj = null;
   }
+
+  function gotoRouteMode() {
+    if (desire_line) {
+      $mode = {
+        kind: "route",
+        route_a: desire_line[0],
+        route_b: desire_line[1],
+      };
+    }
+  }
 </script>
 
 <SplitComponent>
@@ -62,6 +75,9 @@
       to see the route
     </p>
     <SequentialLegend {colorScale} {limits} />
+    <button on:click={gotoRouteMode} disabled={desire_line == null}
+      >See this route in detail</button
+    >
   </div>
   <div slot="map">
     <MapEvents on:click={onClick} />

web/src/stores.ts

@@ -1,19 +1,36 @@
 import { MapModel } from "backend";
 import type { FeatureCollection } from "geojson";
 import type { Map } from "maplibre-gl";
-import { writable, type Writable } from "svelte/store";
+import { get, writable, type Writable } from "svelte/store";
 
 export let maptilerApiKey = "MZEJTanw3WpxRvt7qDfo";
 
-export type Mode = "title" | "score" | "route" | "debug";
+export type Mode =
+  | { kind: "title" }
+  | { kind: "score" }
+  | { kind: "route"; route_a: [number, number]; route_b: [number, number] }
+  | { kind: "debug" };
 export interface RouteGJ extends FeatureCollection {
   direct_length: number;
   route_length: number;
 }
 
-export let mode: Writable<Mode> = writable("title");
+export let mode: Writable<Mode> = writable({ kind: "title" });
 export let model: Writable<MapModel | null> = writable(null);
 export let map: Writable<Map | null> = writable(null);
 export let showAbout: Writable<boolean> = writable(true);
 export let importStreetsWithoutSidewalkTagging: Writable<boolean> =
   writable(true);
+
+export function routeMode(): Mode {
+  let bbox: number[] = Array.from(get(model)!.getBounds());
+  return {
+    kind: "route",
+    route_a: [lerp(0.4, bbox[0], bbox[2]), lerp(0.4, bbox[1], bbox[3])],
+    route_b: [lerp(0.6, bbox[0], bbox[2]), lerp(0.6, bbox[1], bbox[3])],
+  };
+}
+
+function lerp(pct: number, a: number, b: number): number {
+  return a + pct * (b - a);
+}