feat(examples): shared component package + migrate cog-basic & sentinel-2#520
Merged
Conversation
Design for examples/_shared/ — a private workspace package of reusable Chakra UI v3 components for the demo apps, mirroring the deck.gl-healpix setup. Covers package wiring, the v1 component set (DeckGlOverlay, UIOverlay, ControlPanel, ExternalLink/DocsLink, Field, DebugControls, ExampleProvider, theme), the sentinel-2 + cog-basic pilot migrations, and a follow-up roadmap. Refs #519. Co-Authored-By: Claude Opus 4.7 (1M context) <noreply@anthropic.com>
Empty private workspace package: package.json, tsconfig, README, barrel. Refs #519. Co-Authored-By: Claude Opus 4.7 (1M context) <noreply@anthropic.com>
Ports the polished-based createColorPalette from deck.gl-healpix and wires a brand color into a Chakra v3 system. Co-Authored-By: Claude Opus 4.7 (1M context) <noreply@anthropic.com>
Co-Authored-By: Claude Opus 4.7 (1M context) <noreply@anthropic.com>
Co-Authored-By: Claude Opus 4.7 (1M context) <noreply@anthropic.com>
Co-Authored-By: Claude Opus 4.7 (1M context) <noreply@anthropic.com>
Co-Authored-By: Claude Opus 4.7 (1M context) <noreply@anthropic.com>
Co-Authored-By: Claude Opus 4.7 (1M context) <noreply@anthropic.com>
Co-Authored-By: Claude Opus 4.7 (1M context) <noreply@anthropic.com>
Co-Authored-By: Claude Opus 4.7 (1M context) <noreply@anthropic.com>
Replaces the hand-rolled DeckGLOverlay snippet and inline-styled control panel with the shared ControlPanel / DebugControls / Field / DocsLink / DeckGlOverlay components and the shared Chakra theme. Refs #519. Co-Authored-By: Claude Opus 4.7 (1M context) <noreply@anthropic.com>
Replaces the hand-rolled control panel with the shared ControlPanel / Field / DebugControls / DocsLink / ExternalLink / DeckGlOverlay components and the shared Chakra theme. Refs #519. Co-Authored-By: Claude Opus 4.7 (1M context) <noreply@anthropic.com>
…ADME Co-Authored-By: Claude Opus 4.7 (1M context) <noreply@anthropic.com>
Chakra v3's Slider.Root does not expand to fill its parent by default, so the track collapsed to ~0px and every drag mapped to min (0). Set width="full" to match the original `<input type="range">` behavior. Affects cog-basic and sentinel-2. Co-Authored-By: Claude Opus 4.7 (1M context) <noreply@anthropic.com>
Co-Authored-By: Claude Opus 4.7 (1M context) <noreply@anthropic.com>
- ExternalLink now renders with a visible affordance (brand colour + underline), so DocsLink and inline prose links read as links. - ControlPanel gains optional `docsHref` and `sourcePath` props and renders a footer: "Documentation ↗", "View source ↗" (→ github.com/.../tree/main/ <sourcePath>), and a GitHub-icon link to the repo (CollecticonBrandGithub from @devseed-ui/collecticons-chakra). - cog-basic and sentinel-2 pass `sourcePath` and drop their standalone <DocsLink /> lines (now in the footer). Co-Authored-By: Claude Opus 4.7 (1M context) <noreply@anthropic.com>
Sits to the right of the GitHub icon, links to developmentseed.org (CollecticonBrandDevelopmentSeed). Co-Authored-By: Claude Opus 4.7 (1M context) <noreply@anthropic.com>
# Conflicts: # examples/cog-basic/package.json # examples/sentinel-2/package.json # pnpm-lock.yaml
Move the docs/source/repo/DS footer out of the collapsible body so it stays visible whether or not the panel is expanded. Co-Authored-By: Claude Opus 4.7 (1M context) <noreply@anthropic.com>
…asic Co-Authored-By: Claude Opus 4.7 (1M context) <noreply@anthropic.com>
theme.ts now hand-lists the brand shades the components actually use (brand.500/600/700) instead of generating a full scale; removes styles/color-palette.ts, the createColorPalette export, and the polished dependency. Co-Authored-By: Claude Opus 4.7 (1M context) <noreply@anthropic.com>
Member
Author
|
cc @danielfdsilva in case you're curious! |
5 tasks
kylebarron
added a commit
that referenced
this pull request
May 11, 2026
…ckage (#521) * docs(examples): spec for migrating remaining examples to shared package Design for roadmap item #1 of the shared-example-components work: migrate the seven examples not covered by #520 (aef-mosaic, dynamical-zarr-ecmwf, land-cover, naip-mosaic, usgs-topo-cutline, vermont-cog-comparison, zarr-sentinel2-tci) onto deck.gl-raster-examples-shared, plus the three roadmap components serving >=2 examples (RangeSlider, HelpTooltip, ColormapPreview) and an optional `label` prop on DebugControls. CategoryFilter and SwipeHandle stay local; per-example panel-file placement is preserved. Refs #519. Co-Authored-By: Claude Opus 4.7 (1M context) <noreply@anthropic.com> * feat(examples): add shared RangeSlider, HelpTooltip, ColormapPreview New components in deck.gl-raster-examples-shared for the example migrations: RangeSlider (dual-thumb, wraps Chakra's multi-thumb Slider), HelpTooltip (Chakra Tooltip + a "?" collecticon trigger), ColormapPreview (prop-driven sprite strip). Also adds an optional `label` prop to DebugControls. Refs #519. Co-Authored-By: Claude Opus 4.7 (1M context) <noreply@anthropic.com> * refactor(examples): migrate usgs-topo-cutline to deck.gl-raster-examples-shared Swaps the hand-rolled DeckGLOverlay + inline-styled control panel for the shared ControlPanel / Field / ExternalLink / DeckGlOverlay components and the shared Chakra theme; wraps the app in ExampleProvider. Links the CutlineBbox mention to the API docs. Refs #519. Co-Authored-By: Claude Opus 4.7 (1M context) <noreply@anthropic.com> * refactor(examples): migrate zarr-sentinel2-tci to deck.gl-raster-examples-shared Replaces the hand-rolled DeckGLOverlay + inline panel with the shared ControlPanel / DebugControls (label="Debug mesh") / DeckGlOverlay components and the shared Chakra theme; wraps the app in ExampleProvider. Refs #519. Co-Authored-By: Claude Opus 4.7 (1M context) <noreply@anthropic.com> * refactor(examples): migrate naip-mosaic to deck.gl-raster-examples-shared Replaces the hand-rolled DeckGLOverlay + inline panel and the raw @radix-ui/react-slider with the shared ControlPanel / Field / ExternalLink / RangeSlider / ColormapPreview / DeckGlOverlay components and the shared Chakra theme; extracts the panel into src/control-panel.tsx; wraps the app in ExampleProvider. Drops the @radix-ui/react-slider dep. Refs #519. Co-Authored-By: Claude Opus 4.7 (1M context) <noreply@anthropic.com> * chore(examples): drop stray console.log from naip-mosaic renderNDVI Co-Authored-By: Claude Opus 4.7 (1M context) <noreply@anthropic.com> * refactor(examples): migrate vermont-cog-comparison to deck.gl-raster-examples-shared Replaces the hand-rolled DeckGLOverlay + ComparePanel chrome with the shared ControlPanel / Field / ExternalLink / DeckGlOverlay components and the shared Chakra theme (per-side year/render-mode selects → Field + NativeSelect, keeping the optgroups); wraps the app in ExampleProvider. SwipeHandle stays a local component. Refs #519. Co-Authored-By: Claude Opus 4.7 (1M context) <noreply@anthropic.com> * refactor(examples): migrate aef-mosaic to deck.gl-raster-examples-shared Replaces the hand-rolled DeckGLOverlay, InfoTooltip, and raw @radix-ui/react-slider panel with the shared ControlPanel / Field / ExternalLink / HelpTooltip / RangeSlider / DeckGlOverlay components (band sliders → Chakra Slider) and the shared Chakra theme; wraps the app in ExampleProvider. Drops the @radix-ui/react-slider dep. Refs #519. Co-Authored-By: Claude Opus 4.7 (1M context) <noreply@anthropic.com> * refactor(examples): migrate dynamical-zarr-ecmwf to deck.gl-raster-examples-shared Replaces the hand-rolled DeckGLOverlay, InfoTooltip, Play/Pause SVGs, and two raw @radix-ui/react-slider sliders with the shared ControlPanel / Field / ExternalLink / HelpTooltip / RangeSlider / ColormapPreview / DeckGlOverlay components (single-thumb sliders → Chakra Slider, date input → Chakra Input, play/pause → CollecticonCirclePlay/Pause IconButton) and the shared Chakra theme; wraps the app in ExampleProvider. Drops the @radix-ui/react-slider dep (now fully unused across examples). Refs #519. Co-Authored-By: Claude Opus 4.7 (1M context) <noreply@anthropic.com> * custom map style * refactor(examples): migrate land-cover to deck.gl-raster-examples-shared Deletes the local DeckGLOverlay, UIOverlay, and HelpIcon; rebuilds InfoPanel on the shared ControlPanel (intro prose → ExternalLink; debug overlay + opacity slider + mesh-max-error slider on Chakra Checkbox/Slider; HelpIcons → HelpTooltip); rewrites CategoryFilter's checkbox tree and color swatches on Chakra Checkbox (tri-state master/group checkboxes via `checked="indeterminate"`) with ExternalLink for the classification reference; uses the shared UIOverlay + DeckGlOverlay; wraps the app in ExampleProvider. Also makes the shared HelpTooltip preserve newlines (`whiteSpace="pre-line"`) for multi-paragraph help text. Refs #519. Co-Authored-By: Claude Opus 4.7 (1M context) <noreply@anthropic.com> * docs(examples): note all examples use the shared package; tick roadmap items Updates examples/README.md to say all examples use deck.gl-raster-examples-shared, and marks roadmap items 1–3 (remaining-example migrations, HelpTooltip, RangeSlider) done and item 6 (ColormapPreview) partial in the shared-example- components design spec. Refs #519. Co-Authored-By: Claude Opus 4.7 (1M context) <noreply@anthropic.com> * fmt json --------- Co-authored-by: Claude Opus 4.7 (1M context) <noreply@anthropic.com>
Member
|
this is neat! |
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
2 participants
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.
Before:
After:
Summary
Adds
examples/_shared/— a private workspace package (deck.gl-raster-examples-shared) of reusable Chakra UI v3 React components for the example apps — and migrates two examples onto it. Mirrors theexamples/_shared/setup indeck.gl-healpix, adapted to this repo's pnpm workspaces + Biome.deck.gl-raster-examples-shared— no build step (ships TS source, singleindex.tsbarrel). Exports:DeckGlOverlay,UIOverlay,ControlPanel(collapsible, positionable, with an auto footer: "Documentation ↗" / "View source ↗" →…/tree/main/<sourcePath>/ GitHub + Development Seed icon links),ExternalLink/DocsLink,Field,DebugControls,ExampleProvider(Chakra theme wrapper), and the theme (system,createColorPaletteported from healpix). New deps:@chakra-ui/reactv3,@emotion/react,@devseed-ui/collecticons-chakra.cog-basicandsentinel-2onto it — eachApp.tsxshrinks substantially (the copy-pastedDeckGLOverlaysnippet and the hand-rolled inline-styled control panel are gone) and gets a small visual refresh to the Chakra-themed panel.Design:
dev-docs/specs/2026-05-11-shared-example-components-design.md. Refs #519.Test plan
pnpm installpnpm --filter './examples/**' typecheck— all example projects (incl._shared) passpnpm --filter deck.gl-cog-example dev— panel renders; source select reloads/flies to the layer; "Debug overlay" toggle reveals the full-width opacity slider; footer links open; map stays interactivepnpm --filter deck.gl-sentinel-2-example dev— same, plus Scene/Composite selects and the detail-level selectpnpm checkis clean🤖 Generated with Claude Code