Graph Surface

Node-link diagrams: transform, hit-test, labels.

Preview

About

Six viewers draw things joined by lines and differ only in what produces the positions. What they share is a 2D pan/zoom transform (a uniform scale plus a translation anchored under the cursor — not two 1-D viewports, which would shear the diagram), hit-testing that includes edges (point-to-segment distance, four lines of algebra nobody wrote, so edges were unhoverable everywhere), and labels that collide. SVG-first on purpose: these are hundreds of elements, not hundreds of thousands, so the DOM buys real text, native focus per node, and a vector export — the argument for canvas doesn't apply.

Usage

import { GraphSurface, useGraphSurface } from "@/components/ui/graph-surface"

const surface = useGraphSurface({ nodes, edges, height: 420 })

<GraphSurface surface={surface} label="Interaction network">
  {edges.map((e) => <line key={e.id} {...} />)}
  {nodes.map((n) => <circle key={n.id} cx={n.x} cy={n.y} r={6} />)}
</GraphSurface>