Overhaul sketch page UX

[dabreegster]

248, #228, #134

I'll describe the changes when I mark this PR as ready for review. For now, please give feedback about https://acteng.github.io/atip/modal_shift/scheme.html?authority=Adur. Robin doesn't like the new top toolbar.

My TODOs:

• [x] Make sure constructors aren't happening before map is ready
• [x] Move controls to left sidebar: streetview, route's shift toggle
• [x] Restyle the progress bar for the horizontal format
• [x] Rewrite instructions
• [x] Check with other schemas
• [x] Rewrite playwright tests

Bigger followup ideas:

• [ ] Display key shortcut icons next to buttons?
• [ ] Modal for scheme details (especially since this'll grow)
• [ ] Modal for "new object", so we can guide people on matching "school street" to "linestring" for example
• [ ] Merge edit form + geometry modes
• [ ] Maybe put the basemap picker on the map, not sidebar
• [ ] Maybe put "split route" into edit form/geometry mode

[Pete-Y-CS]

Some UI niggles: which intervention has a problem?

Filling in a form on the left and having to confirm in the top bar is a little confusing (keyboard shortcut would be nice too)

more significant bug: It seems that the route snapper finishing loading doesn't enable route and snapped polygon: these have remained disabled for me until I input e.g. a freehand polygon, and once I finish doing that new route and snapped polygon are enabled

[Pete-Y-CS]

Another thought, well two thoughts, well three thoughts:

1. a lot of LCWIPs have routes sharing some sections, depending on how we represent might be good to allow the user to colour code paths
2. some LCWIPs include existing, to be upgraded, fully new in their LCWIP, I suppose we want to collect all 3 of these categories? The alternative would be upgraded and fully new only I suppose
3. How do we want to represent shared paths? Here's an example from Peterborough where there are 3 conceptually distinct routes stacked together for most of their lengths:

[Pete-Y-CS]

This isn't really about the rework but I'm gonna add here anyway: I think a useful feature would be freehand when editing an existing node on a path using edit geometry i.e. hold shift and the link to the previous and next node become a straight line and you can place the edited node whereever

Actually another thought, how hard would it be to add

Add points to start

[dabreegster]

Thanks for all the feedback! Starting to look into some of these issues.

I think a useful feature would be freehand when editing an existing node on a path using edit geometry i.e. hold shift and the link to the previous and next node become a straight line and you can place the edited node whereever

Not sure I understood -- do you mean converting an existing node from snapped to freehand, probably in the middle of the route somewhere? This indeed seems useful. Maybe it'd be helpful to style snapped and freehand nodes differently, to make it even more clear which is which?

Filling in a form on the left and having to confirm in the top bar is a little confusing (keyboard shortcut would be nice too)

Agreed. The intention was for the main navigation / state-changing buttons to consistently be in the top bar. But maybe this is confusing. What if we instead just use the left sidebar for all of the controls? The current top bar will only be present in the neutral list mode, to give room for all of the "new" buttons. Or we could even change that -- go back to the right sidebar (and have it vanish once you're in any other mode) or have one "new" button in the left sidebar or something else. Suggestions / mockups welcome!

[Pete-Y-CS]

Fully removing the top bar whilst filling in the form at least feels worth trying.

Not sure I understood -- do you mean converting an existing node from snapped to freehand, probably in the middle of the route somewhere? This indeed seems useful. Maybe it'd be helpful to style snapped and freehand nodes differently, to make it even more clear which is which?

Yeah so you start dragging a node, press shift, and suddenly it becomes freehand, exactly. Styling them differently seems like a nice touch too

[dabreegster]

Fully removing the top bar whilst filling in the form at least feels worth trying.

Done. I think this looks better. Should we do it for all modes?

[dabreegster]

And summarizing all the bugs / feedback reported so far:

Fixed:

• Warnings not updating
• Buttons not enabling after route snapper is loaded

Later:

• add points to start of route
• convert points between snapped & freehand
• all the new issues filed about overlapping paths and existing/new infra

[dabreegster]

Alright, all the tests fixed up -- I think this MVP is ready!