Same for one-destination impact mode

backend/src/map_model.rs

@@ -517,9 +517,9 @@ impl MapModel {
         // main_road_penalty doesn't seem relevant for this question
         self.rebuild_router(1.0);
 
-        // From every road, calculate the time before and after to the one destination
+        // From every road, calculate the route before and after to the one destination
         let mut features = Vec::new();
-        let mut highest_ratio: f64 = 1.0;
+        let mut highest_time_ratio: f64 = 1.0;
         for r in from {
             let road = self.get_r(r);
             let pt1 = road.linestring.line_interpolate_point(0.5).unwrap().into();
@@ -529,26 +529,23 @@ impl MapModel {
                 self.router_before_with_penalty
                     .as_ref()
                     .unwrap()
-                    .route(self, pt1, pt2)
-                    .map(|route| route.to_linestring(self)),
-                self.router_after
-                    .as_ref()
-                    .unwrap()
-                    .route(self, pt1, pt2)
-                    .map(|route| route.to_linestring(self)),
+                    .route(self, pt1, pt2),
+                self.router_after.as_ref().unwrap().route(self, pt1, pt2),
             ) {
                 let from_pt = self.mercator.pt_to_wgs84(pt1);
-                let distance_before = before.length::<Euclidean>();
-                let distance_after = after.length::<Euclidean>();
+                let (distance_before, time_before) = before.get_distance_and_time(self);
+                let (distance_after, time_after) = after.get_distance_and_time(self);
 
                 let mut f = self.mercator.to_wgs84_gj(&road.linestring);
                 f.set_property("distance_before", distance_before);
                 f.set_property("distance_after", distance_after);
+                f.set_property("time_before", time_before);
+                f.set_property("time_after", time_after);
                 f.set_property("pt1_x", from_pt.x);
                 f.set_property("pt1_y", from_pt.y);
                 features.push(f);
 
-                highest_ratio = highest_ratio.max(distance_after / distance_before);
+                highest_time_ratio = highest_time_ratio.max(time_after / time_before);
             }
         }
 
@@ -557,7 +554,7 @@ impl MapModel {
             bbox: None,
             foreign_members: Some(
                 serde_json::json!({
-                    "highest_ratio": highest_ratio,
+                    "highest_time_ratio": highest_time_ratio,
                 })
                 .as_object()
                 .unwrap()

web/src/ImpactOneDestinationMode.svelte

@@ -9,7 +9,13 @@
   } from "svelte-utils/map";
   import { SplitComponent } from "svelte-utils/top_bar_layout";
   import BackButton from "./BackButton.svelte";
-  import { DotMarker, layerId, Link } from "./common";
+  import {
+    DotMarker,
+    layerId,
+    Link,
+    prettyPrintDistance,
+    prettyPrintTime,
+  } from "./common";
   import { ModalFilterLayer, RenderNeighbourhood } from "./layers";
   import {
     backend,
@@ -81,10 +87,9 @@
 
     <p>
       This shows the change in driving time to one destination from everywhere
-      within the neighbourhood. Drag the pin aroun to change that destination.
+      within the neighbourhood. Drag the pin around to change that destination.
     </p>
-    <p>TODO: It's just distance right now, not time</p>
-    <p>Highest ratio is {perRoadGj.highest_ratio.toFixed(1)}</p>
+    <p>Highest ratio is {perRoadGj.highest_time_ratio.toFixed(1)}</p>
   </div>
 
   <div slot="map">
@@ -106,10 +111,10 @@
           "line-color": [
             "interpolate-hcl",
             ["linear"],
-            ["/", ["get", "distance_after"], ["get", "distance_before"]],
+            ["/", ["get", "time_after"], ["get", "time_before"]],
             1,
             "white",
-            Math.max(perRoadGj.highest_ratio, 1.1),
+            Math.max(perRoadGj.highest_time_ratio, 1.1),
             "red",
           ],
           "line-width": 5,
@@ -119,14 +124,25 @@
         bind:hovered
       >
         <Popup openOn="hover" let:props>
-          Ratio {(props.distance_after / props.distance_before).toFixed(1)}
+          <p>
+            {prettyPrintDistance(props.distance_before)}, {prettyPrintTime(
+              props.time_before,
+            )} before
+          </p>
+          <p>
+            {prettyPrintDistance(props.distance_after)}, {prettyPrintTime(
+              props.time_after,
+            )} after
+          </p>
+          <p>Time ratio: {(props.time_after / props.time_before).toFixed(1)}</p>
         </Popup>
       </LineLayer>
     </GeoJSON>
 
     <GeoJSON data={routeGj}>
       <LineLayer
         {...layerId("compare-route")}
+        interactive={false}
         paint={{
           "line-width": 10,
           "line-color": constructMatchExpression(

web/src/wasm.ts

@@ -144,9 +144,17 @@ export class Backend {
     );
   }
 
-  impactToOneDestination(
-    pt: LngLat,
-  ): FeatureCollection & { highest_ratio: number } {
+  impactToOneDestination(pt: LngLat): FeatureCollection<
+    LineString,
+    {
+      distance_before: number;
+      distance_after: number;
+      time_before: number;
+      time_after: number;
+      pt1_x: number;
+      pt1_y: number;
+    }
+  > & { highest_time_ratio: number } {
     return JSON.parse(this.inner.impactToOneDestination(pt.lng, pt.lat));
   }