fix(frontend): minimap/controls white background (dark colorMode)#13
Merged
Conversation
The editor is now runnable: it debounces the canvas graph to POST /api/evaluate and shows a live preview on each node. - toGnodeGraph converts the ReactFlow canvas to a .gnode payload. - Debounced evaluate (keyed on a position-independent graph signature) with all nodes as targets; a persistent-cache-friendly loop. - GlitchNode shows a live thumbnail + error border, read from a PreviewContext (kept out of the node state that triggers evaluation). - Toolbar: global seed (+ reroll), output size, and evaluate status (evaluating / ready / node error / invalid). - ConfigPanel image_id field: editable id + "upload…" (POST /api/images). - Validation/error bar for invalid-graph (400) messages; cleaner API error text. Verified live in-browser: a Load node with an uploaded image renders its thumbnail from the backend and the toolbar shows "ready". Gate green: biome check, tsc -b, vite build. Co-Authored-By: Claude Opus 4.8 <noreply@anthropic.com>
- App: guard the debounced evaluate against a stale in-flight response overwriting newer previews (only the latest effect commits). - ConfigPanel: reset the file input after upload so re-picking the same image still fires onChange. - api/client: fall back to `HTTP <status>` when statusText/detail is empty, so errors never surface with an empty message. Co-Authored-By: Claude Opus 4.8 <noreply@anthropic.com>
…singularity/gnode
The MiniMap and zoom Controls used React Flow's light-mode defaults (a white minimap panel, #fefefe control buttons) since we never told React Flow the canvas is dark. Setting colorMode="dark" switches to its built-in dark theme, which also fixes the zoom Controls' background/border/hover colors and the selection-box outline color — all without hand-rolled CSS overrides. Co-Authored-By: Claude Opus 4.8 <noreply@anthropic.com>
There was a problem hiding this comment.
Pull request overview
This PR fixes React Flow’s built-in MiniMap and Controls rendering with light-theme backgrounds on gnode’s dark canvas by enabling React Flow’s official dark theming mode.
Changes:
- Set
colorMode="dark"on<ReactFlow>so React Flow applies its.darktheme variables (MiniMap, Controls, selection box, etc.).
💡 Add Copilot custom instructions for smarter, more guided reviews. Learn how to get started.
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.
Fix: minimap/controls white background
Spotted during M3 wrap-up: the MiniMap panel renders with a white background,
and the zoom Controls buttons default to
#fefefe— both stick out againstgnode's dark canvas.
Root cause
We never told React Flow the canvas is dark, so its built-in
MiniMapandControlscomponents fall back to their light-theme CSS variables(
--xy-minimap-background-color-default: #fff,--xy-controls-button-background-color-default: #fefefe),regardless of gnode's own dark app chrome.
Fix
Set
colorMode="dark"on<ReactFlow>. This is React Flow's officiallysupported theming mechanism (adds a
.darkclass that supplies a full set ofdark-mode CSS variables) — fixes the minimap background, the controls'
background/border/hover colors, and the selection-box outline, all in one
line, with no hand-rolled CSS overrides needed.
Verified live in-browser
Before:
.react-flow__minimapcomputedbackground-color: rgb(255, 255, 255);.react-flow__controls-buttoncomputedrgb(254, 254, 254).After: minimap
rgb(20, 20, 20)(#141414), controls buttonrgb(43, 43, 43)(#2b2b2b) — both match the dark theme. Confirmed visuallyvia screenshot too.
Gate green: biome check + tsc -b + vite build.
🤖 Generated with Claude Code