Initiative: Make the Cytoscape abstraction a deep, performant module
- 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
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