graph_cy_controller

the cytoscape object should use event driven patterns; lifecycle is documented here.
GraphCyController in graph-cy-controller.ts owns the cytoscape instance with inline lifecycle state ( idle, syncing, layouting, physics ).
syncGeneration cancels stale layout callbacks when the slice changes mid-layout.
Selection and drag-pinned positions are tracked in userPositionedNodes on the controller.
syncSlice diffs elements ( add / remove / update the delta ) via graph-cy-elements.ts so surviving nodes keep positions; requestLayout restarts the active algorithm and clears user pins.
Pointer / selection wiring lives in graph-cy-interactions.ts; compound hover / selection in graph-cy-highlight.ts.
Live physics is the custom simulation in graph-physics.ts; one instance persists with the cytoscape instance and is paused / resumed, never rebuilt. Grabbing a node pins it in the running sim ( its live position keeps exerting forces ); release unpins with no restart and no snap.
ResizeObserver debounces cy. resize ( ) and re-triggers a pending sync when the container gains size.
Mount only while the graph container is visible and non-zero — do not keep cytoscape alive under display: none; WebGL init on a zero-size hidden container can break the host webview before messaging is attached.
Viewport fitting per reframe_view; tracks lastSyncedNodeSetKey vs fittedNodeSetKey to drive auto_reframe.
Label visibility per graph_label_modes / graph_label_auto: setLabelMode updates text-opacity from zoom ( and hover / drag force-opaque in auto ).

Interactive page: graph_cy_controller