aws / aws/graph-explorer

Initiative: Make the Cytoscape abstraction a deep, performant module

Open
#1,891 0 comments 0 reactions 0 assignees View on GitHub
enhancement internal performance roadmap tech debt
Dominant language
TypeScript
Stars
481
Forks
108
Avg merge
6d 8h
Merged PRs (30d)
5

Description

## Description

The React ↔ Cytoscape.js wrapper in the graph layer is a **shallow module** today: a ~50-prop interface fanned out across ~14 imperative hooks, coordinated by a home-grown structure-version counter, with the raw Cytoscape instance leaking out through a context ref so callers drive it directly. The interface is nearly as complex as the implementation, the core Cytoscape-touching logic is untested, and rendering rebuilds the entire element set on every change.

The goal is to turn this into a **deep module** — a small declarative interface over a substantial, well-tested implementation — that first and foremost serves the Graph View and Schema View, is significantly more performant at scale (50k+ elements), and has the potential to be reused in other products.

## High-Level Plan

Four deepening candidates were identified in an architecture review. They compose: the reconciler is the deep engine that a small interface can later sit on top of.

- **B — Reconciler engine (first, in progress).** Replace the full-replace + structure-version counter with a pure diff → thin apply reconciler over referentially-stable canvas elements. Directly delivers the performance goal and produces the internals the other candidates build on. Tracked in the child Epic below.
- **A — Shrink the interface.** Collapse the ~50-prop surface into a small declarative interface (elements, stylesheet, layout, selection, handlers), keeping the internal hooks as private seams.
- **C — Move the seam.** Replace the magic data-attribute handshake (`__isGroupNode`, `__iconUrl`) and domain imports in the generic layer with a typed element contract, so a second consumer only has to satisfy a clean interface.
- **D — Seal the raw-Cytoscape escape hatch.** Replace the leaked raw instance with a small typed command handle (zoom, fit, center, screenshot, run layout).

A/C/D are not yet planned in detail — a scoping spike (child below) will investigate them before they become their own Epics.

## Related Issues

> [!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-layer React↔Cytoscape wrapper and the reconciler work described in section B; no file or test paths are named in the issue. Completion means replacing full replacement and the structure-version counter with a well-tested implementation that meets the 50k+ performance goal, but this initiative is internal-only and not accepting external contributions.

Written by the indexing model from the issue text.

Assessment

Tech stack
react, typescript
Domain
frontend, performance
Issue type
Refactor
Difficulty
5/5
Estimated time
Over a week
Activity status
Quiet
Clarity
Needs clarification
Newbie friendliness
15/100

Get new issues in your inbox

A short digest of beginner-friendly GitHub issues.