Rewrite the web app in Svelte #219

dabreegster · 2023-07-09T16:02:29Z

Street explorer and the lane editor have thus far been written in framework-less JS. I've found it rather painful as the web apps have grown, and have felt slowed down when trying to rapidly experiment with new ideas (thickening road center lines until they hit buildings, live-tuning parameters for edge costs in pathfinding, extracting POIs from OSM). I've become quite comfortable in Svelte, TS, and MapLibre over the past months from work projects. In the background, I've slowly been exploring rewriting the osm2streets apps using this stack in https://github.com/dabreegster/osm2svelte. This PR is finally bringing the results of that experiment over here, replacing the old JS app!

Existing JS app: https://a-b-street.github.io/osm2streets
New Svelte app: https://dabreegster.github.io/osm2svelte (I'll change the github workflows to deploy here once this PR is merged)

Quick demo of the street explorer:

st_expl.mp4

And the lane editor:

editor.mp4

Big changes

Change from Leaflet to MapLibre GL. I'm much more familiar with the latter from work. The API for working with MapLibre is harder than Leaflet -- attaching popups or changing opacity for a hover effect as some examples -- but getting Leaflet to work nicely with Svelte was a bit of a challenge anyway. The osm2streets-svelte library has some opinionated helpers like Layer.svelte that make the end-user API quite nice.
The UI is more reactive. The user initially sees generated layers; there's no "Generate details" button. After changing import settings, the change happens immediately.
The road ordering debug layer is now shown with popups per intersection, rather than for everywhere

There are a few unimplemented features from the previous version, notably debug layers. I'll file an issue with those tasks, but I don't want to block cutting over to this on that, because small iterations are easier once I'm using the new UI day-to-day and am motivated to improve it. :)

A common library

I'm going to keep the osm2svelte repo around and use it for my wild experiments. After this PR is merged, I'm going to delete dupe code from there and depend on things here by npm github dependencies. My intention is to later split out the osm2streets-svelte subdirectory as a standalone NPM module, document it better, and encourage people to build their own web apps making use of it.

Reviewing

Happy for a real code review, but I recognize this is absolutely massive. @BudgieInWA, if you're happy with the overall tech choices, that's the main thing I'm looking for.

CCing @andrewphilipsmith for osm2streets / A/B Street context. When we start "lifting" things like the turn restriction code to happen at the osm2streets layer, this is a place for us to interactively debug and make simple UIs for diff testing. npm run wasm && npm run dev is orders of magnitude faster than rebuilding A/B Street for tiny changes in one base crate, because we don't need to link to dozens of dependencies to effectively reimplement a web browser. :)

And CCing @yongrenjie if there's any interest in discussing Svelte style. I've made some choices here I'm happy with, but other things (ordering and reactive statements) are very awkward.

I'll leave a bunch of comments on the code to try and intro some Svelte and explain weird choices.

…m NPM

dabreegster

#220 for all the later improvements

dabreegster · 2023-07-09T16:06:26Z

.github/workflows/web.yml

I'll add this back after this PR is merged. Otherwise the current app gets replaced immediately and comparison is harder

dabreegster · 2023-07-09T16:06:55Z

web/README.md

+- Street Explorer: import OSM data from Overpass or test cases, visualize and debug the output
+- Lane editor: modify OSM way tags and visualize the results, to make editing lane tags easier
+
+## Installation


Set up instructions are here

dabreegster · 2023-07-09T16:07:36Z

web/package.json

+    "preview": "vite preview",
+    "check": "svelte-check --tsconfig ./tsconfig.json",
+    "fmt": "npx prettier --write *.html src/**",
+    "list-tests": "./public/list_tests.sh"


Have to manually run this when adding new tests. There could still be nicer solutions here...

dabreegster · 2023-07-09T16:08:46Z

web/src/lane-editor/App.svelte

+  });
+</script>
+
+<Layout>


Svelte is component based, so we can very naturally express the overall organization of the app and share components so much more easily than with vanilla JS

dabreegster · 2023-07-09T16:10:25Z

web/src/lane-editor/EditWayControls.svelte

+    },
+  };
+
+  $: {


https://svelte.dev/tutorial/reactive-statements

This runs whenever anything referenced inside of here changes. In this case, $clickedLane. (The $ is the syntax for accessing a store: https://svelte.dev/tutorial/auto-subscriptions)

dabreegster · 2023-07-09T16:15:19Z

web/src/osm2streets-svelte/import/Osm2streetsSettings.svelte

@@ -0,0 +1,82 @@
+<script lang="ts">
+  export let settings = {


Note we don't have to do anything to detect changes to the form and propagate. bind:value makes it a two-way to this prop here, and then since the caller does bind: as well, they can then use reactive statements and listen for changes. https://svelte.dev/tutorial/component-bindings

dabreegster · 2023-07-09T16:15:50Z

web/src/osm2streets-svelte/layers/DynamicConnectedRoads.svelte

+
+  let gj: GeoJSON | undefined = undefined;
+  let show = true;
+  $: if ($network && $hoveredIntersection) {


All of the layers are reactive, changing usually when the loaded StreetNetwork does. And in this case, based on hover state

dabreegster · 2023-07-09T16:18:19Z

web/src/osm2streets-svelte/osm_input/BuiltInSelector.svelte

@@ -0,0 +1,75 @@
+<script lang="ts">


The two osm_input components don't have any concept of StreetNetwork or osm2streets. I have some experiments where I want to process OSM data completely differently, but still conveniently extract from overpass or use something built-in

dabreegster · 2023-07-09T16:20:26Z

web/src/osm2streets-svelte/utils.ts

+  return beforeId;
+}
+
+// Later entries are drawn on top


This will need rethinking later, if this stays part of the common library meant to be used by multiple apps

dabreegster · 2023-07-09T16:21:16Z

web/tsconfig.json

+    "checkJs": true,
+    "isolatedModules": true,
+    "types": ["vite/client"],
+    "strict": false,


I'd like to turn this on eventually, but the tail is very long for fixing every problem...

BudgieInWA · 2023-07-11T04:25:51Z

After only reading through the PR description, I am happy to see this, and happy for it to merge! I'm going to keep this PR around to look back at later.

dabreegster · 2023-07-11T08:55:57Z

Merging, then will fix up GH actions. (Hopefully in one commit, but if it turns into whack-a-mole with bugs, I'll switch to a tmp branch)

dabreegster added 6 commits July 8, 2023 19:28

Totally remove the old street-explorer JS app

2e76c7e

Bring in most code from osm2svelte

7ac7698

Glue together tests to web apps, and add the script for syncing the list

6fb6bbc

Glue web app to osm2streets-js dependency from the same repo, not fro…

a466848

…m NPM

Update docs about running the new web app

071b1e7

Add comments to some of the code

cc892c7

dabreegster requested a review from BudgieInWA July 9, 2023 16:03

dabreegster commented Jul 9, 2023

View reviewed changes

Fix a few bugs

7a34ac0

dabreegster force-pushed the osm2svelte branch from 5b6ebfe to 7a34ac0 Compare July 9, 2023 16:28

Fix layout width using border-box

f528cf3

dabreegster merged commit ef97f6a into main Jul 11, 2023

dabreegster deleted the osm2svelte branch July 11, 2023 08:56

Provide feedback

Saved searches

Use saved searches to filter your results more quickly

Rewrite the web app in Svelte #219

Rewrite the web app in Svelte #219

dabreegster commented Jul 9, 2023

dabreegster left a comment

dabreegster Jul 9, 2023

dabreegster Jul 9, 2023

dabreegster Jul 9, 2023

dabreegster Jul 9, 2023

dabreegster Jul 9, 2023

dabreegster Jul 9, 2023

dabreegster Jul 9, 2023

dabreegster Jul 9, 2023

dabreegster Jul 9, 2023

dabreegster Jul 9, 2023

BudgieInWA commented Jul 11, 2023

dabreegster commented Jul 11, 2023

+                  },
+                };
+                $: {

Rewrite the web app in Svelte #219

Rewrite the web app in Svelte #219

Conversation

dabreegster commented Jul 9, 2023

Big changes

A common library

Reviewing

dabreegster left a comment

Choose a reason for hiding this comment

Choose a reason for hiding this comment

Choose a reason for hiding this comment

Choose a reason for hiding this comment

Choose a reason for hiding this comment

Choose a reason for hiding this comment

Choose a reason for hiding this comment

Choose a reason for hiding this comment

Choose a reason for hiding this comment

Choose a reason for hiding this comment

Choose a reason for hiding this comment

BudgieInWA commented Jul 11, 2023

dabreegster commented Jul 11, 2023