fix(ui): resolve colormap swatches against the app base URL - #11
Merged
Conversation
The colormap gradient thumbnails in the colormap dropdown and the
hover readout were requested from `/static/colormaps/<name>.webp`.
The leading slash makes that an absolute, site-root URL, so once the
app is served from a subpath — GitHub Pages at `/gridlook/`, or the
JupyterHub proxy prefix in dev — every swatch request 404s and the
thumbnails silently disappear (`img.onerror` just resolves).
Prefix both with `import.meta.env.BASE_URL` instead, which Vite fills
in with the configured `base` ("./" for the production build, the
proxy prefix under `vite.jupyter.config.ts`), so the paths follow
wherever the app is mounted.
Closes #10
Co-Authored-By: Claude Opus 5 (1M context) <noreply@anthropic.com>
Claude-Session: https://claude.ai/code/session_01FniDZANGZVtrQgN1eacurN
eeholmes
added a commit
that referenced
this pull request
Aug 27, 2026
Issue #10 / PR #11 is merged into main, so the handoff now carries the BASE_URL rule it leaves behind: files in public/ are referenced from script through import.meta.env.BASE_URL, never a leading slash. The single-branch note about fix/codec-error-messages becomes a table of two, now that fix/colormap-swatch-base-url exists alongside it. Both are open on d70-t/gridlook (d70-t#210 and d70-t#211), both must stay byte-identical to their copies on main, and neither is merged here as a branch — but the swatch fix reached main on its own PR, so merging d70-t#211 upstream is a no-op on those lines. Co-Authored-By: Claude Opus 5 (1M context) <noreply@anthropic.com> Claude-Session: https://claude.ai/code/session_01FniDZANGZVtrQgN1eacurN
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
1 participant
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.
Closes #10 (same symptom as
eeholmes/gridlook-xl#61).The bug
Both swatch call sites requested the pre-generated WebP gradients from an
absolute, site-root URL:
`/static/colormaps/${cm}.webp`The build sets
base: "./", so the app is served from a subpath — GitHubPages at
/gridlook/, and the JupyterHub proxy prefix in dev. The leadingslash bypasses that base and points at the domain root, so every swatch
request 404s. Nothing surfaces the failure:
ColormapControlsrenders abroken
<img>andHoverReadout'simg.onerrorjust resolves the promise.The fix
Prefix both with
import.meta.env.BASE_URL, which Vite substitutes with theconfigured
base—./in the production build, the proxy prefix undervite.jupyter.config.ts. Two one-line changes; no other absolute public-assetpaths exist in
src/.gridlook-xl#70fixed this by dropping the leading slash, which also worksfor a hash-routed app.
BASE_URLis the same size and stays correct if thedocument is ever served from a nested path.
Verification
npm run lint-ci,npm run typecheck,npm run test(216 passing),npm run buildall clean../static/colormaps/${…}.webpfor both callsites, and
dist/static/colormaps/holds all 58 swatches.Note:
upstream/maincarries the identical bug in both files, so this isalso worth proposing to
d70-t/gridlook.🤖 Generated with Claude Code
https://claude.ai/code/session_01FniDZANGZVtrQgN1eacurN