Cytoscape.js v4
WebGPU demo

Network

Style:

Generated size (gen/compound):

Background:

View

Animated:
Rendered bounding box:

Pan: 0

Zoom: 1

Layout

Animate (tween to the finished layout)

Live (force streams its run)

Infinite (force keeps running at rest for free; drag a node to reflow)

Layout-appropriate edge types (taxi for flow, …)

Pack components (grid, circle, concentric, breadthfirst, radial: one drawing per component, packed)

Tidy small components (force: a pair stands, three make a triangle, four a diamond)

Avoid overlap (space nodes so bodies never touch)

… including labels (nodeDimensionsIncludeLabels)

Force overlap by: (an infinite run is always sim)

Seed: Time taken: —

Spacing: 1.00× (spacingFactor, over the layout's own default)

Options for the selected layout (125.11: every option the layout takes that the boxes above do not spell; an empty field is the library's default)

Live spacing: 1.00× (rescales the current positions about their centre as you drag; 1 is the layout's own output)

Airiness: —

Preset restores the positions the graph loaded with.

Hover

Outside the hovered neighbourhood:

Selection

v4 has no selector strings — this takes a query object:

Examples:

Toggles on selected

Core toggles

panningEnabled

userPanningEnabled

zoomingEnabled

userZoomingEnabled

boxSelectionEnabled

autolock

autoungrabify

autounselectify

boxSelectionIncludesLabels (v4)

pointerCursors (v4)

selectionType:

boxSelectionMode (v4):

wheelSensitivity:

zoom min: max:

Add & remove

nodes: edges:

—

Events

LOD

Edge width floor (px):

Node plain-disc below (px):

Size floor (px):

Zoom-based edge dimming

Target arrowheads (triangle)

Render scale min:

Render scale max:

Labels

SDF labels (the sheet's own mapping)

Min label size (px, 0 = off):

Loading

Columnar load (toColumnarElements)

Binary wire round trip (serializeElements)

Wheel: zoom about cursor. Drag background: pan. Drag node: move (edges follow on-GPU). Click: select (shift = additive). Shift-drag background: box select.

Open the debug console for timings and errors.

Cytoscape.js v4WebGPU demo