Skip to content

Integrate to New Backend - #209

Open
manuvanegas wants to merge 11 commits into
openskope:nuxt-3-upgradefrom
manuvanegas:main
Open

Integrate to New Backend#209
manuvanegas wants to merge 11 commits into
openskope:nuxt-3-upgradefrom
manuvanegas:main

Conversation

@manuvanegas

Copy link
Copy Markdown
  • Implement async submit → poll → refine workflow for dataset time series requests
  • Track per-variable job IDs in the dataset store with a centralized resolveTimeSeries logic
  • Add COG raster tile layer via MapLibre for step-by-step map visualization
  • Double-buffered tile swapping with stepReady event for smooth map transitions from one step to the next
  • Add Skope colorbar with loading state, vmax percent control

manuvanegas and others added 9 commits April 14, 2026 21:00
Replace direct TIMESERIES endpoint calls with a submit/poll/refine workflow for long-running time series extraction and analysis. Added new API constants (TIMESERIES_SUBMIT_ENDPOINT, TIMESERIES_STATUS_ENDPOINT, TIMESERIES_REFINE_ENDPOINT) and implemented submitTimeSeriesRequest, pollTimeSeriesStatus (with timeout and error mapping), and refineTimeSeriesAnalysis in the legacy store actions composable. Updated visualize and analyze pages to use the new flow (submit -> poll -> set jobId -> refine) and added improved error handling and user messages for timeouts, server errors, and missing baseline data. Also added jobId state and setter to the analysis store to persist extraction IDs.
…e logic

Refactor time-series request handling to track per-variable job IDs in the dataset store and centralize resolve logic.

- Add dataset.jobIds state with setJobId and clearJobIds; clear job IDs and time series when saving GeoJSON.
- Introduce resolveTimeSeries in useLegacyStoreActions to attempt refine (reuse) and fall back to submit+poll for new jobs.
- Update analyze and visualize pages to use datasetStore.jobIds[varId] and datasetStore.setJobId, remove duplicated requestJson helpers, and improve time-series loading/error handling and messages.
- Remove jobId from analysis store (moved to dataset store) and delete related setters.

These changes enable per-variable job tracking, better reuse of existing jobs, and consolidated error/state management for time-series requests.
Introduce raster COG tile support and tile endpoint handling for MapLibre maps. Changes include:

- Expose TILES_ENDPOINT constant from store (API_HOST_URL/tiles).
- Rename Map component prop `year` -> `step` and use it to select time slice tiles.
- Build COG tile URLs from dataset/variable and step (including rescale and colormap params) and warn/fallback if variable min/max are missing.
- Add functions to add, remove and update a raster layer (COG) using maplibre raster sources/tiles and respect dataset extents as bounds.
- Add watchers to recreate/update the raster layer when `step` or the variable (cog base URL) changes.
- Ensure metadata extent fill layer uses a centralized FILL_LAYER_ID and add the COG layer beneath it.
- Enable raster display in the dataset visualize page and initialize the selected year from the dataset temporalRangeMin.

Also includes small TODOs in code for colormap/time-resolution flexibility.
Introduce double-buffered raster loading for COG tiles (front/back slots) so step changes are atomic: the new step's tiles load invisibly and swap in all at once on idle, rather than updating tile-by-tile. Add slot management, idle-triggered swap, cancellation, and bounds handling. Expose and emit a new stepReady event (Map and MapLibrePoc) and pass step prop through Map. Wire map stepReady to TimeSeriesPlot.advanceAnimation via refs so the map controls animation progression. Include cleanup of pending swaps on unmount and minor related refactors.

Co-Authored-By: Claude Sonnet 4.6 <noreply@anthropic.com>
Setting the stage for a possible implementation of flexibility when handling dataset time resolution.
Integrate a SkopeColorbar map control and step-loading UI into the MapLibre component. Key changes:

- Added a new SkopeColorbar utility (app/utils/SkopeColorbar.ts) implementing a MapLibre control that renders a vertical colormap gradient with ticks and optional units, and supports update/show/hide.
- Hooked the colorbar into MapLibre: create/add control on mount, update on min/max/unit changes, and remove on unmount. Added CSS styles for the colorbar.
- Expose legend visibility and variable-derived values (min/max/units/colormap) via computed properties and use dataset variable colormap and stops.
- Introduced a step-loading overlay (progress spinner) while raster tiles swap, and ensured a minimum display duration (STEP_DISPLAY_DURATION_MS = 1000ms) before emitting stepReady. Added timeout/cancel logic to manage step display and map idle swaps.
- Apply color scaling cap (COLOR_MAX_PCT = 0.85) to rescale requests and colorbar vmax to avoid extreme outliers.
- Updated getCogFullUrl to use datasetStore.variable.colormap and the capped max when building COG tile URLs.
- Extended DatasetVariable type in app/stores/dataset.ts to include optional colormap and colormap_stops fields.

These changes add a persistent, interactive legend and improve UX by showing a loading indicator and enforcing a brief display time for each step.

Co-Authored-By: Claude Sonnet 4.6 <noreply@anthropic.com>
Expose a vmaxPct option on the SkopeColorbar and pass it from the MapLibre PoC so the colorbar can annotate the top tick with a “% of max” note. Tighten dataset typings by expanding DatasetVariable with optional metadata fields and remove some uses of any (variable is no longer cast to any). Also simplify computed accessors in MapLibrePoc for units/min/max and add SVG overflow attribute to the colorbar rendering. These changes improve type safety and allow the UI to indicate the percentage-based vmax annotation.
UX: enlarge MapLibre loading spinner and allow overflow for map container. TimeSeriesPlot: add a full-overlay loading state with progressive messages and timers (start/clear on status change and unmount), hide non-error alerts while loading, and add related CSS. Pages (analyze/visualize): surface user-friendly error notifications via messageStore.error on 504, 5xx and 4xx responses while still updating datasetStore error state. These changes improve feedback for long-running time-series requests and provide clearer error messages to users.

Copilot AI left a comment

Copy link
Copy Markdown

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

Pull request overview

This PR integrates the UI with a new backend workflow for time series requests (submit → poll → refine), adds per-variable job tracking in the dataset store, and introduces COG tile rendering in MapLibre with a new Skope colorbar and step-based animation/transition behavior.

Changes:

  • Implement centralized async time-series resolution (submit/poll/refine) with per-variable jobIds tracking.
  • Add MapLibre COG raster tile layer support with double-buffered swapping and stepReady events.
  • Add a MapLibre control colorbar with loading-state UX updates in the time series plot.

Reviewed changes

Copilot reviewed 11 out of 12 changed files in this pull request and generated 13 comments.

Show a summary per file
File Description
app/utils/SkopeColorbar.ts New MapLibre control to render a colorbar/legend for raster tiles.
app/stores/dataset.ts Extends dataset variable metadata typing and adds per-variable jobIds.
app/store/modules/constants.js Adds new backend endpoints for tiles and the submit/status/refine workflow.
app/pages/index.vue Makes landing metadata load client-only (server: false).
app/pages/dataset/[id]/visualize/[variable].vue Switches to step-based map/plot coordination and uses centralized time-series resolution.
app/pages/dataset/[id]/index.vue Makes dataset initialization client-only (server: false).
app/pages/dataset/[id]/analyze/[variable].vue Uses centralized time-series resolution and updates error/loading behavior.
app/composables/useLegacyStoreActions.ts Adds submit/poll/refine/resolve logic and clears job IDs on new geometry.
app/components/dataset/TimeSeriesPlot.vue Renames year→step UI, adds loading overlay and progressive loading messages, and exposes advanceAnimation.
app/components/dataset/MapLibrePoc.client.vue Adds COG raster layer handling, step-ready eventing, loading overlay, and the colorbar control.
app/components/dataset/Map.client.vue Renames prop to step and forwards stepReady.
.gitignore Ignores .DS_Store.

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

Comment thread app/pages/dataset/[id]/analyze/[variable].vue Outdated
Comment thread app/pages/dataset/[id]/analyze/[variable].vue
Comment thread app/pages/dataset/[id]/visualize/[variable].vue
Comment thread app/components/dataset/MapLibrePoc.client.vue Outdated
Comment thread app/components/dataset/Map.client.vue
Comment thread app/pages/dataset/[id]/visualize/[variable].vue Outdated
Comment thread app/utils/SkopeColorbar.ts
Comment thread app/components/dataset/MapLibrePoc.client.vue Outdated
Comment thread app/components/dataset/MapLibrePoc.client.vue Outdated
Comment thread app/composables/useLegacyStoreActions.ts Outdated
Rename map prop year -> step and adjust MapLibre proof-of-concept: lower COLOR_MAX_PCT to 0.5 and fix rescale computation for COG URLs. Add robust checks and user messaging when colormap_stops are missing/invalid and only add the SkopeColorbar when data is valid. Harden SkopeColorbar by escaping HTML for units/colors and fixing gradient stop offset calculation for single-color inputs.

Move time-series request state out of the analysis store: remove waitingForResponse and its fixtures, and update callers to use datasetStore.timeSeriesRequestStatus; set time series loaded/server-error flags on dataset store when requests succeed/fail. Update pages to remove unused imports/refs and to avoid duplicate requests while loading. Adjust tests/fixtures accordingly and tweak minor lint/typo fixes (implicit -> implicit, semicolons, watcher closures).

Co-Authored-By: Claude Sonnet 4.6 <noreply@anthropic.com>
@alee
alee marked this pull request as ready for review May 26, 2026 21:26
filteredTimeSeries() sliced timeSeries.x using start - minYear as an
array index, assuming the array always starts at the dataset minimum.
After a fetch with a custom From year it starts at `from` instead,
doubling the offset and shifting the plotted line by hundreds of years.

Adds a timeseriesTrace getter to datasetStore that exposes timeSeries.x
and y directly, mirroring the derivedTimeseries pattern in analysisStore.
Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment

Labels

None yet

Projects

None yet

Development

Successfully merging this pull request may close these issues.

2 participants