系譜グラフLineageGraphExperimental
Lineage / dependency graph: a layered, directed-acyclic node-link graph that handles multi-parent and multi-child edges (the fan-in / fan-out a tree can't draw). Nodes are auto-assigned to layers by longest-path depth and laid out along a flow axis (horizontal or vertical); edges are drawn as SVG connectors with arrowheads. Nodes are focusable buttons whose accessible name names their upstream/downstream neighbours. For lot genealogy / traceability (recall blast-radius), data lineage, build/dependency graphs, ETL pipelines and approval routing with joins.
プレビュー
Props
表は横にスクロールできます
| プロパティ | 型 | 初期値 | 説明 |
|---|---|---|---|
| nodes | LineageNode[] | - | { id, label, sublabel?, tone?, ariaLabel? }. |
| edges | LineageEdge[] | - | { from, to } directed edges (a DAG; from is upstream). Multi-parent / multi-child are supported and drawn as cross-links. |
| direction | "horizontal" | "vertical" | "horizontal" | Flow axis: left→right or top→bottom. |
| renderNode | (node) => ReactNode | - | Render a node's body (default: label + sublabel). |
| onSelectNode | (node) => void | - | When set, nodes are activatable buttons. |
| nodeWidth / nodeHeight | number | 160 / 56 | Node box size. |
| layerGap / rowGap | number | 64 / 16 | Gap between layers (depth) / between nodes in a layer. |
| label | ReactNode | - | Accessible name for the graph. |
Usage
import { LineageGraph, type LineageNode, type LineageEdge } from "@gunjo/ui"
const nodes: LineageNode[] = [
{ id: "m1", label: "原料ロット RM-01", tone: "info" },
{ id: "m2", label: "原料ロット RM-02", tone: "info" },
{ id: "p1", label: "製品ロット PL-2405", tone: "primary" },
{ id: "s2", label: "出荷 SH-102", tone: "destructive" },
]
const edges: LineageEdge[] = [
{ from: "m1", to: "p1" },
{ from: "m2", to: "p1" }, // multi-parent (fan-in)
{ from: "p1", to: "s2" }, // multi-child (fan-out)
]
<LineageGraph nodes={nodes} edges={edges} onSelectNode={(n) => inspect(n)} />