Conversation
There was a problem hiding this comment.
Pull request overview
This PR adds posterization and histogram visualization features to the colormap system. Posterization allows users to reduce the colormap to 2-32 discrete color levels via a slider, while the histogram overlay shows data distribution across bins. The histogram adapts to show either 50 bins (when posterization is off) or matches the posterization level count, with interactive tooltips displaying value ranges and frequencies when posterized. To manage memory efficiently, the implementation uses a pre-binning strategy with 4096-bin summaries that are dynamically rebinned for display.
Changes:
- Added posterization support (0-32 levels) with GLSL shader implementation and UI controls
- Implemented histogram visualization with tooltips showing value ranges and frequencies
- Refactored histogram calculation to use memory-efficient pre-binning strategy
- Added URL parameter synchronization for posterize levels
- Integrated histogram updates across all grid types (Regular, Irregular, Triangular, Healpix, GaussianReduced, Curvilinear)
Reviewed changes
Copilot reviewed 18 out of 18 changed files in this pull request and generated 7 comments.
Show a summary per file
| File | Description |
|---|---|
| src/utils/urlParams.ts | Added POSTERIZE_LEVELS URL parameter constant |
| src/utils/histogram.ts | New file implementing histogram summary building, merging, and rebinning logic |
| src/ui/overlays/controls/ColormapControls.vue | Added posterize slider UI with value 1 skipping logic |
| src/ui/overlays/controls/ColorBar.vue | Added histogram canvas overlay, tooltip, and mid-labels for posterization |
| src/ui/overlays/controls/BoundsControls.vue | Refactored to use computed properties for bound updates |
| src/ui/overlays/Controls.vue | Added posterize levels initialization from URL parameters |
| src/ui/grids/composables/useSharedGridLogic.ts | Added histogram update logic with watchers for posterize levels and bounds changes |
| src/ui/grids/Triangular.vue | Integrated histogram calculation, refactored data distribution |
| src/ui/grids/Regular.vue | Added histogram calculation call |
| src/ui/grids/Irregular.vue | Refactored geographic dimension handling, added histogram calculation, removed redundant Float64Array conversion |
| src/ui/grids/Healpix.vue | Added histogram summary building per chunk and merging |
| src/ui/grids/GaussianReduced.vue | Added histogram calculation call |
| src/ui/grids/Curvilinear.vue | Added histogram calculation call |
| src/store/useUrlSync.ts | Added posterize levels URL synchronization, simplified user bounds logic |
| src/store/store.ts | Added posterize levels and histogram state, added user bounds update actions with string handling |
| src/store/paramStore.ts | Added posterize levels parameter mapping |
| src/lib/shaders/gridShaders.ts | Added posterize GLSL function, integrated into all fragment shaders, added edge case handling for min==max |
| src/lib/shaders/colormapShaders.ts | Removed unused "Quantized" colormap |
💡 Add Copilot custom instructions for smarter, more guided reviews. Learn how to get started.
| // Add hover listeners for histogram | ||
| if (histogramCanvas.value) { | ||
| useEventListener( | ||
| histogramCanvas.value, | ||
| "mousemove", | ||
| handleHistogramMouseMove | ||
| ); | ||
| useEventListener( | ||
| histogramCanvas.value, | ||
| "mouseleave", | ||
| handleHistogramMouseLeave | ||
| ); | ||
| } |
There was a problem hiding this comment.
The histogram tooltip is only accessible via mouse hover (mousemove/mouseleave events). Users navigating with keyboard or screen readers cannot access this information. Consider adding keyboard support (e.g., arrow keys to navigate between bins when the histogram canvas is focused) and ARIA attributes to make the tooltip information accessible to screen readers.
Deploying gridlook with
|
| Latest commit: |
6f3feca
|
| Status: | ✅ Deploy successful! |
| Preview URL: | https://509d7b4a.gridlook.pages.dev |
| Branch Preview URL: | https://feature-posterization.gridlook.pages.dev |
1 participant
This PR introduces:
Since it is quite costly memory-wise to keep the data completely in-memory for the histogram-calculation I do some pre-binning and calculate a finer in-memory-histogram out of which I then create the coarser histograms for the website. This leads to a minor precision-loss in the histograms for the decimal places. Not sure if this should be mentioned somewhere that the numbers are not 100% precise.