aws / aws/graph-explorer

Decouple display state from canvas elements (paint-time labels and badges)

Open
#1,889 0 comments 0 reactions 0 assignees View on GitHub
internal performance ready-for-agent tech debt
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

Open the contributing 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

Get new issues in your inbox

A short digest of beginner-friendly GitHub issues.