Graphs - defuss-shadcn

defuss-shadcn / Graphs / graphs

One component for graphs too big to draw node by node. The Graph Explorer keeps a million nodes in a Web Worker, draws what is far away into one canvas and gives DOM only to the few hundred nodes worth reading - chips, cards, labels along the edges. You zoom into a cluster to enter it and out to leave it; search, an outline, details and relations sit wherever the page puts them. The Knowledge Graph scaffold puts them into a Border Layout of Panels and drills from a domain down to a dataset, with pages built from Chart, Geo Map and the other components.

On this page (3)

§A million nodes

Zoom with the wheel or a pinch: a cluster that fills most of the view is entered, the breadcrumb follows. Drag to pan - into a neighbour and you are there. Press / and type 'ledger', Enter flies to it. ? shows every key.

§How it works

The worker builds the graph and owns everything that scales with it: the hierarchy of clusters, a layout per cluster (made when you first come near it), the cycles, and every frame's far field - the dots and bulk edges of all nodes in view, drawn into an OffscreenCanvas. With each frame it sends back which nodes are worth a chip or a card. The main thread keeps a pool of DOM slots for those, morphs a slot only when its markup changed, and commits the bitmap and the DOM in the same animation frame. However big the graph, the page holds at most 120 cards, 300 chips and 200 edge labels.

flowchart LR
    Camera["camera<br/>pan, zoom, dive"] -->|"camera id"| Worker["worker:<br/>graph, layouts, cycles"]
    Worker -->|"ImageBitmap"| Canvas["canvas:<br/>dots and bulk edges"]
    Worker -->|"tiers: dot, chip, card"| Slots["pooled DOM slots:<br/>chips, cards, labels"]
    Canvas --> Frame["one animation frame"]
    Slots --> Frame

Fig 1. The worker draws everything far away and decides which nodes get markup; the page draws only those.

§Topics

Zoom & Navigation - semantic zoom, the keyboard, search, the breadcrumb and the outline, jumping to a neighbour. Node Renderers - the layers of information and your own chips, cards and parts. Edge Rules & Labels - how links are drawn, labelled per zoom level, and the circuit breakers. Details & Pages - the details and relations outlets and a node's full page.

Comments, ideas or improvements? Edit this page's source on GitHub