Faithful vertex shape preview matching the canvas#1929
Open
kmcginnes wants to merge 7 commits into
Open
Conversation
Replace the fixed-circle VertexSymbol with an SVG renderer that draws the actual cytoscape node shape, fill, border, and icon — matching the canvas appearance across all 24 SHAPE_STYLES values. - Port cytoscape 3.34's geometry verbatim: sharp polygons, round polygons, round-rectangle, cut-rectangle, and barrel - Icon loaded through the production pipeline via TanStack Query (same cache as the canvas), clipped to the shape at 60% sizing - Proportional viewBox (96) with CSS-driven sizing via className - New deep module: components/VertexSymbol/ (VertexSymbol.tsx, nodeShapes.ts, useIconDataUrl.ts, nodeShapes.test.ts) - Delete spike scaffolding (SpikeNodePreview, spikeNodeShapes, spike doc)
Use React's useId() for the SVG clipPath ID instead of a type-derived
string. The old approach (vs-clip-${type}) collided when the same vertex
type rendered in multiple places (Graph View legend + Schema View sidebar),
causing the second instance's icon to clip against the wrong element.
Border width from VertexStyle is in canvas pixels (relative to a 24px node). The SVG viewBox is 96 units, so a raw value of 1 rendered as sub-pixel (0.375px at 36px display). Scale by viewBox/canvasNode (4x) so a 1px canvas border appears proportionally correct in the preview.
- Clamp insetSize to minimum 1 so extreme borderWidth doesn't produce degenerate geometry - Add exhaustive default to renderShape switch for type safety - Skip icon query when iconUrl is empty (no pointless cache entries)
The queryFn receives the QueryClient as a parameter, eliminating the need for useQueryClient and the eslint-disable comment. Matches the pattern used in useBackgroundImageMap.
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.
Description
Replaces the fixed-circle
VertexSymbolwith an SVG renderer that draws the actual cytoscape node shape, fill, border, and clipped icon — matching the canvas appearance across all 24 shape values.Every place that previously showed a blue circle (search results, legend, schema sidebar, style dialog) now shows the vertex's true shape, color, opacity, border, and icon at the correct proportions.
Core change
A new deep module
components/VertexSymbol/replaces the oldVertexSymbolimplementation:SHAPE_STYLESrender correctly in SVG, including the canvas-broken round-* shapes.renderNodepipeline), so icons load instantly from cache after first fetch.backgroundWidth/Height: "60%") and clipped to the shape outline.className. Border width scaled to match canvas proportions.Tangential
nodeShape.tsgets aShapeStyletype annotation so the picker values are compile-time checked.VertexSymbol/VertexSymbolByTyperemoved fromVertexIcon.tsx; re-exported from the new module through the same barrel so all existing consumers work unchanged.How to read
nodeShapes.ts— start here; all shape geometryVertexSymbol.tsx— the SVG componentuseIconDataUrl.ts— icon query hooknodeShapes.test.ts— geometry coverageVertexIcon.tsx— removed old implementationnodeShape.ts— typing improvementValidation
pnpm checksgreenScreenshots
Each screenshot shows the same vertex style rendered in three places at once — the canvas (ground truth), the style dialog's icon swatch, and the Details View symbol — so shape, border, and icon parity can be checked directly.
Barrel shape with a dotted border — the barrel's curved top/bottom and the dotted border render identically on the canvas nodes and in the preview symbols:
Cut Rectangle with a solid magenta border — chamfered corners and border color match across all three renderings:
Round Diamond with a dashed green border — one of the round-* shapes; the preview renders the correct rounded-diamond geometry with the thin dashed border:
Related Issues
Check List
pnpm checkspasses with no errors.pnpm testpasses with no failures.