feat: refactor variable selector

[vincentvdwal]

Refactor variable selection

Rebuilds the variable selector around a selection panel with popular/other
variables and a chart editor, and makes custom maps first-class.

• Custom shareable maps — charts are encoded in the URL, so any custom
  map can be shared as a link
• More variables — marine, cloud + precipitation, high/mid/low clouds,
  and EPS (now served from the main domain)
• Contours — corrected intervals and better label placement
  (symbol-placement: line + wider max-angle so labels appear when zoomed out)
• Settings ↔ editor sync — global toggles (e.g. contours) apply to the
  active chart; layers can be disabled per chart
• Mobile optimisations, plus fixes from review: commit race, source identity
  keys, arrows toggle, leaks and perf

Moved

• Animation — time/height animation with smoother variable switching feat: add frame manager and channel builders #387
• Popup — wind direction arrow in the value popup feat: popup direction arrow #373

[cloudflare-workers-and-pages]

Deploying maps with    Cloudflare Pages

Latest commit:	8a4d3e3
Status:	✅  Deploy successful!
Preview URL:	https://2601b853.maps-5aj.pages.dev
Branch Preview URL:	https://refactor-variable-selection.maps-5aj.pages.dev

View logs

[Copilot]

Pull request overview

This PR refactors variable selection into a chart-based model (multi-source “charts” with presets/saved charts), updates URL/state synchronization to support the new encoding, and replaces the old A/B SlotManager rendering approach with a FrameManager that cross-fades complete multi-channel frames.

Changes:

• Introduces chart model (sources/presets/saved charts), selection panel UI, and URL encoding/decoding for charts (sources / chart with legacy variable support).
• Replaces SlotManager-based map overlay rendering with a new FrameManager + explicit channel builders (raster/vector per source), plus EPS sibling metadata support.
• Updates popup/scale/UI to reflect multi-source charts and adds Vitest coverage for encoding/presets/selection utilities.

Reviewed changes

Copilot reviewed 47 out of 49 changed files in this pull request and generated 6 comments.

Show a summary per file

File	Description
vite.config.ts	Adds optimizeDeps exclusion for the new weather-map-layer package usage.
src/styles.css	Updates popup styling and adds styles for popup “extra source” lines.
src/routes/+page.svelte	Switches to chart-driven selection panel and URL/chart syncing subscriptions.
src/lib/url.ts	Adds chart URL parsing/syncing and per-source om:// URL building (EPS-aware).
src/lib/tests/selection-utils.test.ts	Tests selection utility behavior and popular-variable resolution.
src/lib/tests/chart-presets.test.ts	Adds invariants/tests for chart presets and popular variables.
src/lib/tests/chart-encoding.test.ts	Adds coverage for chart source URL (de)serialization and matching.
src/lib/stores/preferences.ts	Resets active chart to default on “reset states”.
src/lib/stores/om-url.ts	Removes legacy current OM URL store.
src/lib/stores/om-protocol-settings.ts	Updates prefetch API usage and ties protocol cache size to chart source count.
src/lib/stores/eps.ts	Adds EPS sibling metadata loading store and helper.
src/lib/stores/chart.ts	Introduces persisted active/saved charts, actions, and legacy variable sync.
src/lib/slot-manager.ts	Removes SlotManager implementation (superseded by FrameManager).
src/lib/prefetch.ts	Uses prefetchVariableFromFile instead of setToOmFile + prefetchVariable.
src/lib/popup.ts	Adds multi-source popup “extras” and integrates FrameManager-based active URLs.
src/lib/om-layer-defs.ts	Adds pure raster/vector channel builders for FrameManager rendering.
src/lib/metadata.ts	Updates domain-switch fallback logic to keep/prune chart sources and load EPS meta.
src/lib/layers.ts	Replaces SlotManager orchestration with FrameManager and chart-source-driven channels.
src/lib/frame-manager.ts	Adds new cross-fading frame orchestrator with LRU retention and data-state gating.
src/lib/components/ui/scroll-area/scroll-area.svelte	Adds ScrollArea UI primitive wrapper.
src/lib/components/ui/scroll-area/scroll-area-scrollbar.svelte	Adds ScrollArea scrollbar wrapper.
src/lib/components/ui/scroll-area/index.ts	Exports scroll-area primitives for usage in selection panel.
src/lib/components/settings/contour-settings.svelte	Applies vector defaults to plain charts when toggling contour settings.
src/lib/components/settings/arrows-settings.svelte	Applies vector defaults to plain charts when toggling arrow settings.
src/lib/components/selection/variable-selection.svelte	Removes old variable selection UI.
src/lib/components/selection/variable-selection-empty.svelte	Removes old “empty” variable selection UI.
src/lib/components/selection/source-level-select.svelte	Adds per-source level picker for chart editor rows.
src/lib/components/selection/selection-utils.ts	Adds reusable selection utilities (lists, level groups, popular resolution).
src/lib/components/selection/selection-panel.svelte	Introduces the new combined selection panel (search/presets/charts/editor).
src/lib/components/selection/search-results.svelte	Adds unified search results for variables and charts.
src/lib/components/selection/popular-variables.svelte	Adds curated popular list with EPS dynamic entry support.
src/lib/components/selection/other-variables.svelte	Adds “More variables” section for non-popular entries.
src/lib/components/selection/level-select.svelte	Adds level selector UI for level-group variables.
src/lib/components/selection/domain-select.svelte	Adds domain picker UI for the new panel.
src/lib/components/selection/chart-list.svelte	Adds preset groups + saved chart listing with availability filtering and EPS chart.
src/lib/components/selection/chart-editor.svelte	Adds chart editor UI (toggle layers, intervals, add/remove, save).
src/lib/components/selection/all-variables-dialog.svelte	Adds dialog for “add variable to chart” flow.
src/lib/components/scale/scale.svelte	Refactors scale to render one legend per raster source via ScaleLegend.
src/lib/components/scale/scale-legend.svelte	Extracts scale legend rendering + editing into reusable component.
src/lib/components/loading/spinner.svelte	Adjusts z-index to ensure spinner overlays the new panel stack.
src/lib/components/keyboard/keyboard-handler.svelte	Updates shortcuts (focus panel search, guard level selector open).
src/lib/components/help/help-dialog.svelte	Updates shortcut label text for the new variable dialog behavior.
src/lib/chart-types.ts	Adds core chart types (sources/presets/saved charts).
src/lib/chart-styles.ts	Adds configurable contour/arrow style definitions and expression builders.
src/lib/chart-presets.ts	Adds built-in chart presets and curated popular variable list.
src/lib/chart-encoding.ts	Adds chart sources URL encoding/parsing and preset matching helpers.
package.json	Adds/updates deps (including weather-map-layer pinned to a commit).
package-lock.json	Updates lockfile for new deps and weather-map-layer git reference.
.gitignore	Ignores Claude Code local files.

---

💡 Add Copilot custom instructions for smarter, more guided reviews. Learn how to get started.

[vincentvdwal]

Should we add a new keybinding that opens and closes the complete variable selection? If it's focussing directly into the search field it's hard to close it with the same key.