Unify preview scaling model across vertex, edge, and label previews
- Dominant language
- TypeScript
- Stars
- 481
- Forks
- 108
- Avg merge
- 6d 8h
- Merged PRs (30d)
- 5
Description
## Task
The cytoscape-matching previews scale their geometry with two separate, differently-named model→pixel constants, plus a per-call-site CSS `zoom` fit control. This works but has no single, obvious rule.
Current state:
- **Vertex family** (`VertexSymbol`): `PREVIEW_SCALE = VIEWBOX(96) / CANVAS_NODE_SIZE(24) = 4`. Canvas-unit lengths (border width) and the label (`scale={PREVIEW_SCALE}`) multiply by it. On-screen size set by `size-*` classes.
- **Edge family** (`EdgeLinePreview` / `LabelPreview`): `EDGE_PREVIEW_SCALE = 2` (renamed from `DEFAULT_EDGE_PREVIEW_ZOOM`). Different factor (2 vs 4) than the vertex family.
- **Composite fit**: both `EdgePreview` and `VertexPreview` are additionally scaled at the call site with a non-standard CSS `zoom-*` class (vertex `zoom-50`; edges `zoom-90`/`zoom-75`/`zoom-65`) to fit their surface. `zoom` is chosen deliberately over `transform: scale()` because it affects layout (the surrounding grid/flexbox reflows around the scaled preview).
The result: a 2-unit edge line and a 2-unit vertex border are NOT drawn at the same on-screen scale across previews, and there are two names for one concept.
## Goal
A single, documented preview-scaling model:
- One shared `CANVAS_PREVIEW_SCALE` (model→px) consumed by `VertexSymbol`, `EdgeLinePreview`, and `LabelPreview`, so every preview shares one coordinate system and a given cytoscape unit looks identical everywhere.
- Set on-screen display size only via `size-*` / width-height (as the vertex family already does), reducing or eliminating reliance on the non-standard `zoom` property where a size class suffices.
- Decide whether the composite fit-to-surface control stays as `zoom` (documented as intentionally layout-affecting) or is expressed another way.
## Considerations / risks
- Reconciling the 4× (vertex) vs 2× (edge) factors requires re-tuning and visually re-verifying every preview surface (node/edge style dialogs, style import cards, edge details sidebar, schema sidebar, graph viewer overlays). Easy to get subtly wrong — verify in the running app.
- `zoom` on `EdgePreview` currently scales the vertex placeholders too; any replacement must preserve "fit the whole composite," not just the inner line.
## Related
Follow-up to the edge line/arrow dedup work (#1985, #1986). The conservative step (consistent constant naming + corrected docs) ships with #1986; this issue is the full unification.
> [!IMPORTANT]
> Internal only — this issue is maintained by the core team and is not accepting external contributions.
Contributor guide
Research direction
Start by locating VertexSymbol, EdgeLinePreview, LabelPreview, EdgePreview, and VertexPreview, then trace their current scale constants and size or zoom classes. Verify the preview surfaces named in the issue in the running app. Done means one documented CANVAS_PREVIEW_SCALE is shared across the three inner previews, composite fitting still works, and the affected surfaces have been visually rechecked.
Written by the indexing model from the issue text.
Assessment
- Tech stack
- react, typescript
- Domain
- frontend
- Issue type
- Refactor
- Difficulty
- 4/5
- Estimated time
- 3-5 days
- Activity status
- Quiet
- Clarity
- Mostly clear
- Newbie friendliness
- 25/100