From 94744aba3af9a01f0c0ebb5cd169b0930ff84284 Mon Sep 17 00:00:00 2001
From: Dustin Carlino <dabreegster@gmail.com>
Date: Fri, 9 Aug 2024 15:12:33 +0100
Subject: [PATCH] Stop redrawing the network layer constantly. #13

---
 web/src/App.svelte          | 13 ++++++-------
 web/src/DebugMode.svelte    |  2 ++
 web/src/NetworkLayer.svelte |  4 ++++
 web/src/RouteMode.svelte    |  5 -----
 web/src/ScoreMode.svelte    |  6 ------
 5 files changed, 12 insertions(+), 18 deletions(-)

diff --git a/web/src/App.svelte b/web/src/App.svelte
index b5d9083..742ecb7 100644
--- a/web/src/App.svelte
+++ b/web/src/App.svelte
@@ -12,6 +12,7 @@
   import DebugMode from "./DebugMode.svelte";
   import RouteMode from "./RouteMode.svelte";
   import ScoreMode from "./ScoreMode.svelte";
+  import NetworkLayer from "./NetworkLayer.svelte";
   import {
     map as mapStore,
     mode,
@@ -144,15 +145,13 @@
         <GeoJSON data={JSON.parse($model.getInvertedBoundary())}>
           <FillLayer paint={{ "fill-color": "black", "fill-opacity": 0.3 }} />
         </GeoJSON>
+
+        <NetworkLayer show={$mode.kind != "debug"} {showSeverances} {opacity} />
+
         {#if $mode.kind == "route"}
-          <RouteMode
-            {showSeverances}
-            {opacity}
-            route_a={$mode.route_a}
-            route_b={$mode.route_b}
-          />
+          <RouteMode route_a={$mode.route_a} route_b={$mode.route_b} />
         {:else if $mode.kind == "score"}
-          <ScoreMode {showSeverances} {opacity} />
+          <ScoreMode />
         {:else if $mode.kind == "debug"}
           <DebugMode {showSeverances} {opacity} />
         {/if}
diff --git a/web/src/DebugMode.svelte b/web/src/DebugMode.svelte
index 693d89e..59e5566 100644
--- a/web/src/DebugMode.svelte
+++ b/web/src/DebugMode.svelte
@@ -7,6 +7,8 @@
   import { model } from "./stores";
   import NavBar from "./NavBar.svelte";
 
+  // TODO Could try to reuse NetworkLayer and add in the interactivity
+
   export let showSeverances: boolean;
   export let opacity: number;
 </script>
diff --git a/web/src/NetworkLayer.svelte b/web/src/NetworkLayer.svelte
index d0516b0..f782941 100644
--- a/web/src/NetworkLayer.svelte
+++ b/web/src/NetworkLayer.svelte
@@ -5,6 +5,7 @@
   import { constructMatchExpression } from "svelte-utils/map";
   import { model } from "./stores";
 
+  export let show: boolean;
   // TODO Use filter expressions?
   export let showSeverances: boolean;
   export let opacity: number;
@@ -14,6 +15,9 @@
   <LineLayer
     id="network"
     beforeId="Road labels"
+    layout={{
+      visibility: show ? "visible" : "none",
+    }}
     paint={{
       "line-width": 5,
       "line-color": constructMatchExpression(
diff --git a/web/src/RouteMode.svelte b/web/src/RouteMode.svelte
index 517cecd..c95a454 100644
--- a/web/src/RouteMode.svelte
+++ b/web/src/RouteMode.svelte
@@ -2,15 +2,12 @@
   import type { MapMouseEvent } from "maplibre-gl";
   import { MapEvents, GeoJSON, LineLayer, Marker } from "svelte-maplibre";
   import Directions from "./Directions.svelte";
-  import NetworkLayer from "./NetworkLayer.svelte";
   import { SplitComponent } from "svelte-utils/top_bar_layout";
   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 or empty
   let route_gj: RouteGJ | null = null;
@@ -57,8 +54,6 @@
   <div slot="map">
     <MapEvents on:contextmenu={onRightClick} />
 
-    <NetworkLayer {showSeverances} {opacity} />
-
     <Marker bind:lngLat={route_a} draggable><span class="dot">A</span></Marker>
     <Marker bind:lngLat={route_b} draggable><span class="dot">B</span></Marker>
     {#if route_gj}
diff --git a/web/src/ScoreMode.svelte b/web/src/ScoreMode.svelte
index 649fd5c..4b4735f 100644
--- a/web/src/ScoreMode.svelte
+++ b/web/src/ScoreMode.svelte
@@ -10,14 +10,10 @@
     type LayerClickInfo,
   } from "svelte-maplibre";
   import { colorScale, limits } from "./colors";
-  import NetworkLayer from "./NetworkLayer.svelte";
   import { SplitComponent } from "svelte-utils/top_bar_layout";
   import { map, model, mode, minScore, maxScore } from "./stores";
   import NavBar from "./NavBar.svelte";
 
-  export let showSeverances: boolean;
-  export let opacity: number;
-
   let scoreGj: FeatureCollection<LineString, { score: number }> = JSON.parse(
     $model!.makeHeatmap(),
   );
@@ -119,8 +115,6 @@
   <div slot="map">
     <MapEvents on:click={onClick} />
 
-    <NetworkLayer {showSeverances} {opacity} />
-
     <GeoJSON data={scoreGj}>
       <LineLayer
         id="scores"