Decouple display state from canvas elements (paint-time labels and badges)
- Dominant language
- TypeScript
- Stars
- 481
- Forks
- 108
- Avg merge
- 8d 9h
- Merged PRs (30d)
- 7
Description
## Task
Decouple volatile display state from canvas elements so element identity carries structure only. All display text resolves at paint time. The existing full-replace still runs (untouched) on stable, smaller objects — so this is verifiable on its own before the reconciler exists.
## Details
- **Node badges:** look up `displayName`/`displayTypes`/`neighborCount` at draw time from the source of truth (display vertex / neighbor state), keyed on `vertexId`, instead of reading them from element `data`. Node badges are the only consumer of these node fields.
- **Edge label — style-function mapper (spike, non-gating):** replace the data-bound edge label with a function mapper that reads a display-text map keyed on `edgeId`, built alongside the existing edge-style loop. Spike first to confirm the mapper re-resolves reliably on stylesheet reapply and performs at scale. Not a gate — if it misbehaves, keep the edge display name in element data and let the reconciler handle config-edit changes via harmless edge remove + add. Record the spike outcome.
- **Slim the converters:** Canvas Vertex → `{ id, vertexId, type }` from `Vertex`; Canvas Edge → `{ id, source, target, edgeId, type }` from `Edge`. Remove `DisplayVertex`/`DisplayEdge` from the graph path; switch converter input to source `Vertex`/`Edge`.
## Acceptance
- Node labels and neighbor-count badges still update on expand and on Style edit.
- Edge labels still update on Style edit.
- No visual regression on the Graph View.
- `pnpm check:types` and `pnpm test` green.
## Related Issues
- Parent #1887
- Blocked by the rename task
> [!IMPORTANT]
> Internal only — this issue is maintained by the core team and is not accepting external contributions.
Contributor guide
Research direction
Start with the graph converters, the node badge draw path, and the existing edge-style loop. Verify whether the edge style-function mapper re-resolves on stylesheet reapply and performs at scale, then check expand and Style edit behavior in the Graph View. Done means the stated type checks and tests pass with labels, badges, and neighbor counts updating without visual regression; record the spike outcome.
Written by the indexing model from the issue text.
Assessment
- Tech stack
- react, typescript
- Domain
- data-visualization, frontend
- Issue type
- Refactor
- Difficulty
- 4/5
- Estimated time
- 3-5 days
- Activity status
- Quiet
- Clarity
- Mostly clear
- Newbie friendliness
- 35/100