Rebar UI

1.0

opinion

GraphExplorer

A force-directed network of people, projects and files, with search and a category legend.

Who is on whatSelect a node, then Expand to reveal the crew
Who is on what
100%
Empty
Nothing yet
100%
No data
Quiet
100%

In context

Project networkThe graph beside the project it is showing
Who is on whatPeople, projects and files
100%
On track
Harbour rebrandBrand

Identity, site and launch kit for the harbour trust.

84% done

Props

PropTypeRequiredDefault
nodesGraphExplorerNode[]Yes—
edgesGraphExplorerEdge[]Yes—
titlestring | undefinedNo—
ariaLabelstring | undefinedNo—
widthnumber | undefinedNo640
heightnumber | undefinedNo480
legendboolean | undefinedNotrue
searchableboolean | undefinedNotrue
pinnableboolean | undefinedNotrue
nodeActions((node: GraphExplorerNode) => GraphExplorerAction[]) | undefinedNo—
onNodeClick((node: GraphExplorerNode) => void) | undefinedNo—
chargeStrengthnumber | undefinedNo-30
linkDistancenumber | undefinedNo50
classNamestring | undefinedNo—
bionicboolean | undefinedNo—
bionicOptionsBionicOptions | undefinedNo—

data-rebar-* attributes

data-rebar-component="graph-explorer" on the root; parts: toolbar, search, search-results, zoom-controls, legend, legend-chip, canvas-wrap, canvas, radial-menu, radial-menu-button, status (the visually-hidden aria-live selection announcer).

Migrating to Ant Design

Not codemod-covered — AntD has no force-directed network graph component at all; migrating means reaching for a dedicated graph-visualization library (e.g. AntV G6, from the same Ant ecosystem) directly.