Conversation
…this. Introduced a script to create webp-files out of the colormaps (if needed) and added all generated webp's to the project
…el var-labels, if available
…ng to do with the grid * added nicer word-break for the variable selector * show long_name and then standard_name on all relevant positions * no longer remount when controls are slided
Contributor
There was a problem hiding this comment.
Pull request overview
This PR delivers a UI redesign centered around a full-height control panel, while adding several functional improvements (snapshots with overlays, improved numeric interactions, graticules, and broader datatype support).
Changes:
- Redesign controls layout into a fixed-height side panel with responsive header behavior and a distraction-free/fullscreen mode (plus
r/dshortcuts). - Add a configurable snapshot flow (background + overlay toggles) and dataset/variable metadata improvements for overlays/tooltips.
- Improve visualization controls: PrimeVue-based colormap selector with generated swatches, rounding/precision tweaks, graticules overlay, and better chart/canvas resize handling.
Reviewed changes
Copilot reviewed 29 out of 89 changed files in this pull request and generated 5 comments.
Show a summary per file
| File | Description |
|---|---|
| src/views/GlobeView.vue | Adds keyboard shortcuts + distraction-free mode; threads snapshot options through to grid components. |
| src/utils/wordbreak.ts | Adds a word-break directive used to insert <wbr> opportunities in long names. |
| src/ui/overlays/controls/colorbarUtils.ts | Adds shared “step size” and “round-to-precision” helpers based on data range. |
| src/ui/overlays/controls/VariableSelector.vue | Adjusts variable display (long_name/standard_name) and applies the word-break directive. |
| src/ui/overlays/controls/SnapshotButton.vue | New snapshot UI for choosing background and overlay options before download. |
| src/ui/overlays/controls/ProjectionControls.vue | UI tweaks for projection center inputs and reset button. |
| src/ui/overlays/controls/MaskControls.vue | Adds graticules toggle alongside coastlines/masks. |
| src/ui/overlays/controls/DistributionPlot.vue | Disables chart animation and adds resize observer updates for responsive rendering. |
| src/ui/overlays/controls/DimensionControl.vue | Reworks layout and adds section title / spacing adjustments. |
| src/ui/overlays/controls/ColormapControls.vue | Switches to PrimeVue Select with swatch previews; rounds dragged bounds values. |
| src/ui/overlays/controls/ColorBar.vue | Improves canvas/renderer sizing and DPR handling; adjusts tick label styling. |
| src/ui/overlays/controls/BoundsControls.vue | Redesigns bounds UI into a compact table-like layout with formatting helper. |
| src/ui/overlays/controls/ActionControls.vue | Integrates SnapshotButton; updates rotate button behavior and highlighting. |
| src/ui/overlays/InfoPanel.vue | Extends metadata handling (creator_name, zarr version row, variable long names in tooltips). |
| src/ui/overlays/Controls.vue | Major control panel header/layout redesign and grouping of sections. |
| src/ui/grids/composables/useSharedGridLogic.ts | Plumbs showGraticules into overlay update lifecycle and watches. |
| src/ui/grids/composables/useGridSnapshot.ts | New snapshot compositor: background handling + optional overlays + download. |
| src/ui/grids/composables/useGridScene.ts | Uses shared rotating state, improves camera fit logic, adds 2D rotation behavior, integrates snapshot composable. |
| src/ui/grids/composables/useGridOverlays.ts | Adds graticules overlay loading/rendering and update hook. |
| src/ui/grids/Curvilinear.vue | Skips invalid (NaN/Infinity) coordinate cells to avoid THREE bounding-sphere failures. |
| src/store/store.ts | Adds showGraticules, datasetTitle, and isRotating state + toggle actions. |
| src/main.ts | Registers the word-break directive; introduces a PrimeVue theme preset mapping to Bulma variables. |
| src/lib/types/GlobeTypes.ts | Adds snapshot option types + defaults. |
| src/lib/data/zarrUtils.ts | Adds Int8Array support in float32 casting. |
| src/assets/base.scss | Extends dark-scheme variables (notably --bulma-text). |
| scripts/generate_colormap_swatches.py | New script to generate static colormap swatch images from shader definitions. |
| public/static/colormaps/viridis.webp | Generated colormap swatch asset. |
| public/static/colormaps/turbo.webp | Generated colormap swatch asset. |
| public/static/colormaps/turbid.webp | Generated colormap swatch asset. |
| public/static/colormaps/thermal.webp | Generated colormap swatch asset. |
| public/static/colormaps/tempo.webp | Generated colormap swatch asset. |
| public/static/colormaps/tarn.webp | Generated colormap swatch asset. |
| public/static/colormaps/speed.webp | Generated colormap swatch asset. |
| public/static/colormaps/solar.webp | Generated colormap swatch asset. |
| public/static/colormaps/seismic.webp | Generated colormap swatch asset. |
| public/static/colormaps/rain.webp | Generated colormap swatch asset. |
| public/static/colormaps/plasma.webp | Generated colormap swatch asset. |
| public/static/colormaps/phase.webp | Generated colormap swatch asset. |
| public/static/colormaps/matter.webp | Generated colormap swatch asset. |
| public/static/colormaps/magma.webp | Generated colormap swatch asset. |
| public/static/colormaps/inferno.webp | Generated colormap swatch asset. |
| public/static/colormaps/ice.webp | Generated colormap swatch asset. |
| public/static/colormaps/hsluv.webp | Generated colormap swatch asset. |
| public/static/colormaps/hpluv.webp | Generated colormap swatch asset. |
| public/static/colormaps/haline.webp | Generated colormap swatch asset. |
| public/static/colormaps/gray.webp | Generated colormap swatch asset. |
| public/static/colormaps/diff.webp | Generated colormap swatch asset. |
| public/static/colormaps/dense.webp | Generated colormap swatch asset. |
| public/static/colormaps/delta.webp | Generated colormap swatch asset. |
| public/static/colormaps/deep.webp | Generated colormap swatch asset. |
| public/static/colormaps/curl.webp | Generated colormap swatch asset. |
| public/static/colormaps/coolwarm.webp | Generated colormap swatch asset. |
| public/static/colormaps/cividis.webp | Generated colormap swatch asset. |
| public/static/colormaps/bwr.webp | Generated colormap swatch asset. |
| public/static/colormaps/balance.webp | Generated colormap swatch asset. |
| public/static/colormaps/amp.webp | Generated colormap swatch asset. |
| public/static/colormaps/algae.webp | Generated colormap swatch asset. |
| public/static/colormaps/YlOrRd.webp | Generated colormap swatch asset. |
| public/static/colormaps/YlOrBr.webp | Generated colormap swatch asset. |
| public/static/colormaps/YlGnBu.webp | Generated colormap swatch asset. |
| public/static/colormaps/YlGn.webp | Generated colormap swatch asset. |
| public/static/colormaps/Spectral.webp | Generated colormap swatch asset. |
| public/static/colormaps/Reds.webp | Generated colormap swatch asset. |
| public/static/colormaps/RdYlGn.webp | Generated colormap swatch asset. |
| public/static/colormaps/RdYlBu.webp | Generated colormap swatch asset. |
| public/static/colormaps/RdPu.webp | Generated colormap swatch asset. |
| public/static/colormaps/RdGy.webp | Generated colormap swatch asset. |
| public/static/colormaps/RdBu.webp | Generated colormap swatch asset. |
| public/static/colormaps/Purples.webp | Generated colormap swatch asset. |
| public/static/colormaps/PuRd.webp | Generated colormap swatch asset. |
| public/static/colormaps/PuOr.webp | Generated colormap swatch asset. |
| public/static/colormaps/PuBuGn.webp | Generated colormap swatch asset. |
| public/static/colormaps/PuBu.webp | Generated colormap swatch asset. |
| public/static/colormaps/PiYG.webp | Generated colormap swatch asset. |
| public/static/colormaps/PRGn.webp | Generated colormap swatch asset. |
| public/static/colormaps/Oranges.webp | Generated colormap swatch asset. |
| public/static/colormaps/OrRd.webp | Generated colormap swatch asset. |
| public/static/colormaps/Greys.webp | Generated colormap swatch asset. |
| public/static/colormaps/Greens.webp | Generated colormap swatch asset. |
| public/static/colormaps/GnBu.webp | Generated colormap swatch asset. |
| public/static/colormaps/BuPu.webp | Generated colormap swatch asset. |
| public/static/colormaps/BuGn.webp | Generated colormap swatch asset. |
| public/static/colormaps/BrBG.webp | Generated colormap swatch asset. |
| public/static/colormaps/Blues.webp | Generated colormap swatch asset. |
| package.json | Adds canvas-txt dependency for snapshot text layout. |
| package-lock.json | Locks canvas-txt dependency. |
| eslint.config.js | Updates import-boundary allowlist to permit utils from src. |
| .github/workflows/lint.yml | Updates lint workflow container to Node 24. |
💡 Add Copilot custom instructions for smarter, more guided reviews. Learn how to get started.
Deploying gridlook with
|
| Latest commit: |
e37da3e
|
| Status: | ✅ Deploy successful! |
| Preview URL: | https://b7debaaf.gridlook.pages.dev |
| Branch Preview URL: | https://fixes.gridlook.pages.dev |
This file contains hidden or bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
Sign up for free
to join this conversation on GitHub.
Already have an account?
Sign in to comment
Add this suggestion to a batch that can be applied as a single commit.This suggestion is invalid because no changes were made to the code.Suggestions cannot be applied while the pull request is closed.Suggestions cannot be applied while viewing a subset of changes.Only one suggestion per line can be applied in a batch.Add this suggestion to a batch that can be applied as a single commit.Applying suggestions on deleted lines is not supported.You must change the existing code in this line in order to create a valid suggestion.Outdated suggestions cannot be applied.This suggestion has been applied or marked resolved.Suggestions cannot be applied from pending reviews.Suggestions cannot be applied on multi-line comments.Suggestions cannot be applied while the pull request is queued to merge.Suggestion cannot be applied right now. Please check back later.
The main change of this PR is a full-height control panel and some redesign of the elements to deal with the limited width we have.
Functional changes:
rtoggles rotation,dtoggles the removal of all elements except of the projection