Aller au contenu
login
arrow_backRetour aux issues
Rekin226/aquascope #231

[Epic] One app: the Explorer's shell, information architecture and UX pass (tabbed inspector, Ask drawer, URL state, search, mobile, export, cite)

ecoDébutant enhancement help wanted visualization major feature

descriptionDescription

## Why this matters The Explorer shipped a working end-to-end slice in two days (#189), and the 2026-08-19 direction pass took it apart: the shape is "a map plus a 440 px scroll of cards on the right". A station page is one long scroll of up to ~15 sections, opening Ask ✨ throws the station away, Back does nothing (`replaceState` only, no `hashchange` listener), loading is a line of text with no progress bar, search is a substring scan with no accent folding or keyboard navigation, the legend is `display:none` under 860 px so a phone cannot filter sources or toggle Basins, nothing exports (Plotly's mode bar is off), and the page never says how to cite AquaScope. Every serious zero-install GIS converged on the same layout (GeoLibre, kepler.gl, the GEE Code Editor, Felt): map as the canvas, layers and data on the left, an inspector on the right, the assistant docked beside it. That is the prerequisite for the layer stack (#232), the Workbench (#235) and the keyless Ask tiers (#233), so it goes first. This is the UX half of #189 taken to its conclusion; the science cards stay as they are. ## What to build **Shell and information architecture** - Three panes: a left rail (sources with counts and toggles, basemap picker, overlays with legends and opacity, Basins, "my data"), the map, and a right inspector with **tabs** (Overview · Floods · Flows & trend · Model · Catchment · Similar basins · Methods) instead of one scroll. - The Ask drawer sits beside the inspector instead of replacing it, so the selected station stays in view; the current station / point / viewport is passed to the Analyst as context (today `openAsk()` only pre-fills a sentence, `explorer/app.js:1211`). - Home button that brings the "what works today" panel back; a first-run overlay with three "try this" actions. **Feedback and states** - A real progress bar for the one-time Pyodide boot (the worker already emits progress; `app.js:862` drops it during click-anywhere and Ask), skeleton cards with reserved heights so charts do not shift the layout, a spinner per card, cancel buttons for GR4J, the bootstrap CI and Ask. - Explicit "not available here (why)" vs "failed (retry)" states; today seven lookups swallow errors into `console.info` (`app.js:501, 571, 685, 784, 782, 815, 1020`). **URL is the state** - Map view (`z/lat/lon`), basemap, overlays, hidden sources, selection, active tab, and which long computations ran, all in the hash; `pushState` + `hashchange` so Back works and pasted links open the same view; canonical share links (not the `*.static.hf.space` iframe URL that `app.js:1364` copies today) and an Open Graph image. **Search** - Accent-folded, fuzzy, ranked; rivers and places through a keyless geocoder (Photon allows autocomplete; Nominatim does not, use it only on explicit submit with attribution); arrow keys + Enter; search no longer silently obeys the legend filter (`app.js:247`). **Mobile and accessibility** - Bottom-sheet inspector under 860 px, a Layers button instead of the hidden legend, `:focus-visible` styles, `aria-live` on status lines only (not the whole `#panel`, `index.html:33`), focusable list items, a keyboard path to stations. Dark mode follows the basemap. **Export and cite** - PNG of any chart (re-enable Plotly's button), CSV for every table (FFA, regime, basin attributes, similar basins), GeoJSON of the catchment, GR4J parameters + simulation CSV, and a visible "Cite this" with BibTeX for AquaScope (concept DOI `10.5281/zenodo.21903143`) plus the method references. **Engineering** - `app.js` is 1,438 lines of vanilla JS in one file with a hand-rolled Markdown renderer and the similarity / regionalisation arithmetic duplicated from Python (`app.js:694`, `app.js:794`). Move to Vite with a small component library (Svelte or Preact; both tiny and contributor-friendly), one ES module per panel, design tokens in CSS, and push the duplicated science back into the Pyodide worker so it exists once. Still a static site; the HF Space
codeOuvre sur GitHub