GraphDiagram

API reference and demos for GraphDiagram.

Source

Import

import { GraphDiagram } from "@flanksource/clicky-ui/data";

Demos

Default · Open in Storybook

Selectable · Open in Storybook

Single Node · Open in Storybook

The props table documents the component-specific surface. Standard DOM attributes inherited from React, such as className, event handlers, and accessibility attributes, may also be accepted when the component’s prop type extends a native element.

Props

Prop	Type	Default	Description
ariaLabel*	string	—	—
className	string	—	—
columnGap	number	—	"columns" layout: horizontal gap between columns in px. Leave room for edge label pills.
compactNodeHeight	number	24	"columns" layout: the height of a node with `size: "compact"`, drawn on one line. A group of only compact nodes stacks them closer and pads them tighter. Defaults to 24.
edgeFocus	enum	auto	Whether an edge shows its pill only while in focus, and fades while another is. Defaults to "auto": a diagram with more than 32 edges is focused, a smaller one shows everything.
edges*	GraphDiagramEdge[]	—	—
fitMinScale	number	—	Zoomable: the smallest scale the diagram opens at, so its text stays readable. A diagram too large for it opens overflowing, centred on `focusId`, and is panned to reach the rest. `Fit to view` still shows everything, and `Reset view` returns here. Unset, the diagram opens whole.
focusId	string	—	Zoomable: the node an overflowing diagram opens centred on. Defaults to the diagram's centre.
groups	GraphDiagramGroup[]	—	"columns" layout: captions for the group rectangles. A group without an entry shows its id. A group with more than `GROUP_MEMBER_WINDOW` members in a column scrolls them in a window that many rows tall.
layout	enum	ring	Defaults to "ring". "columns" needs a `level` on every node.
maxHeight	string | number	—	—
nodeHeight	number	60	—
nodes*	GraphDiagramNode[]	—	—
nodeWidth	number	168	—
onEdgeSelect	(…) => void	—	Makes edges, and their label pills, selectable.
onGroupToggle	(…) => void	—	"columns" layout: the chevron of a group whose `collapsed` is set asks to collapse or expand it.
onNodeExpand	(…) => void	—	Called by a node's `+N` control (see `expandCount`); does not select the node.
onNodeSelect	(…) => void	—	—
recordHeaderHeight	number	24	"columns" layout: height of a record group's header in px. Defaults to 24.
rowGap	number	—	"columns" layout: vertical gap between stacked nodes in px.
selectedEdgeId	string	—	—
selectedId	string	—	—
wheelZoom	enum	modifier	Zoomable: "zoom" makes a plain mouse wheel zoom too, for a diagram that fills its pane. Defaults to "modifier".
zoomable	boolean	false	Ctrl/meta + wheel (or pinch) zooms, dragging the background pans, and zoom controls appear.