Stop rendering the full network in most modes. Huge perf problem in l…

…arge areas, it makes the UX more confusing, and serves no purpose outside of the debug mode

backend/src/graph.rs

@@ -86,7 +86,7 @@ pub struct Intersection {
 
 impl Graph {
     /// Returns a GeoJSON string. Just shows the full network and amenities
-    pub fn render(&self) -> Result<String> {
+    pub fn render_debug(&self) -> Result<String> {
         let mut features = Vec::new();
 
         for r in &self.roads {

backend/src/lib.rs

@@ -54,9 +54,9 @@ impl MapModel {
     }
 
     /// Returns a GeoJSON string. Just shows the full network
-    #[wasm_bindgen()]
-    pub fn render(&self) -> Result<String, JsValue> {
-        self.graph.render().map_err(err_to_js)
+    #[wasm_bindgen(js_name = renderDebug)]
+    pub fn render_debug(&self) -> Result<String, JsValue> {
+        self.graph.render_debug().map_err(err_to_js)
     }
 
     /// Return a polygon covering the world, minus a hole for the boundary, in WGS84

web/src/DebugMode.svelte

@@ -15,7 +15,7 @@
 
   let gj: FeatureCollection | null = null;
   onMount(async () => {
-    gj = await $backend!.render();
+    gj = await $backend!.renderDebug();
   });
 </script>
 

web/src/IsochroneMode.svelte

@@ -6,9 +6,9 @@
   import type { FeatureCollection } from "geojson";
   import { GeoJSON, FillLayer, LineLayer, Marker } from "svelte-maplibre";
   import { SplitComponent } from "svelte-utils/two_column_layout";
-  import { mode, backend, type TravelMode, filterForMode } from "./stores";
+  import { mode, backend, type TravelMode } from "./stores";
   import PickTravelMode from "./PickTravelMode.svelte";
-  import { SequentialLegend, notNull } from "svelte-utils";
+  import { SequentialLegend } from "svelte-utils";
   import { Popup, makeColorRamp, isLine, isPolygon } from "svelte-utils/map";
   import { onMount } from "svelte";
 
@@ -110,19 +110,6 @@
     {/if}
   </div>
   <div slot="map">
-    {#await notNull($backend).render() then data}
-      <GeoJSON {data}>
-        <LineLayer
-          id="network"
-          paint={{
-            "line-width": 5,
-            "line-color": "black",
-            "line-opacity": ["case", filterForMode(travelMode), 1, 0.5],
-          }}
-        />
-      </GeoJSON>
-    {/await}
-
     {#if start}
       <Marker bind:lngLat={start} draggable><span class="dot">X</span></Marker>
     {/if}

web/src/RouteMode.svelte

@@ -2,9 +2,8 @@
   import type { MapMouseEvent } from "maplibre-gl";
   import { MapEvents, GeoJSON, LineLayer, Marker } from "svelte-maplibre";
   import { SplitComponent } from "svelte-utils/two_column_layout";
-  import { mode, backend, type TravelMode, filterForMode } from "./stores";
+  import { mode, backend, type TravelMode } from "./stores";
   import PickTravelMode from "./PickTravelMode.svelte";
-  import { notNull } from "svelte-utils";
   import { constructMatchExpression } from "svelte-utils/map";
   import { onMount } from "svelte";
   import type { FeatureCollection } from "geojson";
@@ -79,19 +78,6 @@
   <div slot="map">
     <MapEvents on:contextmenu={onRightClick} />
 
-    {#await notNull($backend).render() then data}
-      <GeoJSON {data}>
-        <LineLayer
-          id="network"
-          paint={{
-            "line-width": 5,
-            "line-color": "black",
-            "line-opacity": ["case", filterForMode(travelMode), 1, 0.5],
-          }}
-        />
-      </GeoJSON>
-    {/await}
-
     {#if start}
       <Marker bind:lngLat={start} draggable><span class="dot">A</span></Marker>
     {/if}

web/src/worker.ts

@@ -54,12 +54,12 @@ export class Backend {
     return JSON.parse(this.inner.getInvertedBoundary());
   }
 
-  render(): FeatureCollection {
+  renderDebug(): FeatureCollection {
     if (!this.inner) {
       throw new Error("Backend used without a file loaded");
     }
 
-    return JSON.parse(this.inner.render());
+    return JSON.parse(this.inner.renderDebug());
   }
 
   isochrone(req: {