From c8f55cc9e8b81f87c9fbe5e04541bda9a73a1641 Mon Sep 17 00:00:00 2001
From: Dustin Carlino <dabreegster@gmail.com>
Date: Wed, 6 Dec 2023 19:59:00 +0800
Subject: [PATCH] Show the scores. Results are pretty meaningless, need to make
 the requests intelligently.

---
 backend/src/heatmap.rs    | 11 ++++++---
 web/src/App.svelte        | 51 ++++++++++++++++++++++++++-------------
 web/src/ScoreLayer.svelte | 19 +++++++++++++++
 3 files changed, 60 insertions(+), 21 deletions(-)
 create mode 100644 web/src/ScoreLayer.svelte

diff --git a/backend/src/heatmap.rs b/backend/src/heatmap.rs
index 6b6a576..6d4ac14 100644
--- a/backend/src/heatmap.rs
+++ b/backend/src/heatmap.rs
@@ -1,7 +1,7 @@
-use geo::{Rect, GeometryCollection, BoundingRect, Geometry, LineString};
+use geo::{BoundingRect, Geometry, GeometryCollection, LineString, Rect};
+use geojson::{Feature, FeatureCollection};
 use rand::{Rng, SeedableRng};
 use rand_xorshift::XorShiftRng;
-use geojson::{Feature, FeatureCollection};
 
 use crate::{CompareRouteRequest, MapModel};
 
@@ -15,7 +15,7 @@ pub fn measure_randomly(map: &mut MapModel, n: usize) -> FeatureCollection {
         .bounding_rect()
         .unwrap();
     // TODO Do this in the right coordinate space
-    let dist_away = 0.1;
+    let dist_away = 0.01;
 
     let mut rng = XorShiftRng::seed_from_u64(42);
     let mut samples = Vec::new();
@@ -42,7 +42,10 @@ pub fn measure_randomly(map: &mut MapModel, n: usize) -> FeatureCollection {
                 .as_f64()
                 .unwrap();
             let score = route / direct;
-            let mut f = Feature::from(geojson::Geometry::from(&LineString::new(vec![(x1, y1).into(), (x2, y2).into()])));
+            let mut f = Feature::from(geojson::Geometry::from(&LineString::new(vec![
+                (x1, y1).into(),
+                (x2, y2).into(),
+            ])));
             f.set_property("score", score);
             samples.push(f);
         }
diff --git a/web/src/App.svelte b/web/src/App.svelte
index b083fe8..e08145d 100644
--- a/web/src/App.svelte
+++ b/web/src/App.svelte
@@ -10,11 +10,14 @@
   import Loading from "./Loading.svelte";
   import NetworkLayer from "./NetworkLayer.svelte";
   import RouteLayer from "./RouteLayer.svelte";
+  import ScoreLayer from "./ScoreLayer.svelte";
 
   let model: MapModel | undefined = undefined;
   let map;
   let loading = false;
 
+  let mode = "route";
+
   let route_a = null;
   let route_b = null;
   let route_gj = null;
@@ -93,21 +96,31 @@
       <input bind:this={fileInput} on:change={loadFile} type="file" />
     </label>
     <div><button on:click={zoomToFit}>Zoom to fit</button></div>
-    <Legend
-      rows={[
-        ["Footway (ground, outdoors)", "red"],
-        ["Indoors footway", "blue"],
-        ["Footway not on the ground", "purple"],
-        ["Street with sidewalk (or pedestrian street)", "black"],
-        ["Crossing", "green"],
-        ["Severance", "orange"],
-      ]}
-    />
-    {#if route_err}
-      <p>{route_err}</p>
-    {/if}
-    {#if route_gj}
-      <Directions {route_gj} />
+
+    <label>
+      <input bind:group={mode} type="radio" value="route" />Route
+    </label>
+    <label>
+      <input bind:group={mode} type="radio" value="score" />Score
+    </label>
+
+    {#if mode == "route"}
+      <Legend
+        rows={[
+          ["Footway (ground, outdoors)", "red"],
+          ["Indoors footway", "blue"],
+          ["Footway not on the ground", "purple"],
+          ["Street with sidewalk (or pedestrian street)", "black"],
+          ["Crossing", "green"],
+          ["Severance", "orange"],
+        ]}
+      />
+      {#if route_err}
+        <p>{route_err}</p>
+      {/if}
+      {#if route_gj}
+        <Directions {route_gj} />
+      {/if}
     {/if}
   </div>
   <div slot="main" style="position:relative; width: 100%; height: 100vh;">
@@ -118,8 +131,12 @@
       bind:map
     >
       {#if model}
-        <NetworkLayer {model} />
-        <RouteLayer bind:route_a bind:route_b {route_gj} />
+        {#if mode == "route"}
+          <NetworkLayer {model} />
+          <RouteLayer bind:route_a bind:route_b {route_gj} />
+        {:else if mode == "score"}
+          <ScoreLayer {model} />
+        {/if}
       {/if}
     </MapLibre>
   </div>
diff --git a/web/src/ScoreLayer.svelte b/web/src/ScoreLayer.svelte
new file mode 100644
index 0000000..b422dea
--- /dev/null
+++ b/web/src/ScoreLayer.svelte
@@ -0,0 +1,19 @@
+<script lang="ts">
+  import { GeoJSON, LineLayer, Popup } from "svelte-maplibre";
+
+  export let model;
+</script>
+
+<GeoJSON data={JSON.parse(model.makeHeatmap())}>
+  <LineLayer
+    id="scores"
+    paint={{
+      "line-width": 5,
+      "line-color": "red",
+    }}
+  >
+    <Popup openOn="hover" let:data
+      >{@html JSON.stringify(data.properties, null, "<br />")}</Popup
+    >
+  </LineLayer>
+</GeoJSON>