1 viewer
Back to Components
Component · Visualization

NodeHypergraph

Interactive node-and-relation canvas for graph, hypergraph, route, and trace views.

Category
Visualization
Slots
7
States
4
Writer
Shared
cre8.primitive.node-hypergraph

Preview

Live renderShared SSR + WASM writers
Relational Hypergraph
  • Account::Alice
  • Task::Benchmark
  • STARK::Receipt
  • Escrow::Manifold
  • acc → task: authorizes
  • task → proof: proves
  • Manifold Settlement: task, proof, vault
Relational Hypergraph4 vertices, 3 hyperedges (1 of arity 3 or more)authorizesprovesManifold SettlementManifold Settlement (3 members)Manifold Settlemen…Account::Alice · account · degree 1Account::AliceaccountTask::Benchmark · task · degree 3Task::BenchmarktaskSTARK::Receipt · proof · degree 2STARK::ReceiptproofEscrow::Manifold · vault · degree 1Escrow::Manifoldvault
<NodeHypergraph
  edges={[
    { label: "authorizes", source: "acc", target: "task" },
    { label: "proves", source: "task", target: "proof" }
  ]}
  height={260}
  nodes={[
    { id: "acc", kind: "account", label: "Account::Alice", x: 40, y: 60 },
    { id: "task", kind: "task", label: "Task::Benchmark", x: 240, y: 30 },
    { id: "proof", kind: "proof", label: "STARK::Receipt", x: 240, y: 140 },
    { id: "vault", kind: "vault", label: "Escrow::Manifold", x: 440, y: 80 }
  ]}
  relations={[
    {
      id: "settlement",
      kind: "settle",
      label: "Manifold Settlement",
      nodeIds: ["task", "proof", "vault"]
    }
  ]}
  title="Relational Hypergraph"
/>

Anatomy

The named parts of the rendered markup. Recipes style these hooks, and every renderer keeps them stable.

SlotDOM class
root.primitive-node-hypergraph
toolbar—
stage—
node—
edge—
relation—
port—
7 rows

States and platforms

The states the contract publishes, the platforms it declares, and the style recipes that dress it.

States
selectedexpandeddraggingconnecting
Platforms
webruntime-nodecanvas
Recipes
unstyledruntime-console

Renderers

Shared writer
NodeHypergraph renders through the one writer the server and the WASM DOM share, so both emit the same markup.

Every tag in the example above renders through a shared writer.

Declared adapters. A status is the manifest's declaration, not a measured parity result.

TargetRendererStatus
webreactexperimental
runtime-nodeview-nodeready
ssrhtml-visualization-placeholderready
terminalterminal-textplanned
canvascanvas-adapterexperimental
5 rows

Accessibility

Nodes are keyboard-focusable and expose selection through button semantics; SSR pairs a role="img" hypergraph drawing with the node/edge/relation listing so the same structure is available with or without sight and with or without JavaScript.

  • Node selection is available with Enter or Space.
  • Arrow keys can move nodes when editing is enabled.
  • Toolbar controls use native buttons with stable labels.
  • The SSR drawing is decorative-redundant: every vertex, edge, and relation it paints also appears in the figure's text listing.
  • When a vertex or edge cap truncates the drawing, the SVG states the shown-of-total counts rather than presenting a partial graph as whole.