CallGraph

API reference and demos for CallGraph.

Source

Import

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

Demos

Go Index Graph · Open in Storybook

Oipa References · Open in Storybook

Oipa Data Access · 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
access	CallGraphAccess[]	—	The edge types the host follows, at least one of call, read and write; all three by default. Controlled with `onAccessChange`.
canOpenNode	(…) => boolean	—	Whether `onOpenNode` opens a node; every node by default.
className	string	—	—
collapsedGroups	string[]	—	The groups drawn as their header alone, by `graph.groups` id: each folds into one node, and its members' edges merge onto it, counting the members. The root's group never folds. Controlled with `onCollapsedGroupsChange`; without one the component holds it, starting here, none by default.
columns	boolean	—	Columns and fields as nodes of their own; collapsed into tables and entities by default.
dataAccess	boolean	—	The source reports reads and writes of data: shows the Access toggles and the Columns switch.
defaultExclude	(…) => string[]	—	The patterns in force when `exclude` is undefined: the host's defaults, as its response reports them.
depth	number	—	—
direction	enum	—	Pass `onDirectionChange` to control it; without one the component holds it, starting here.
edgeLabels	Partial<CallGraphEdgeLabels>	—	—
emptyMessage	ReactNode	—	—
exclude	string[]	—	The exclusion patterns; undefined takes the host's defaults. Controlled with `onExcludeChange`.
excludeMatcher	ExcludeMatcher	—	How a pattern matches a group, for a host with keywords of its own.
fetchGraph*	(…) => Promise<G>	—	Loads the graph around `params.root`, and one hop around a node for its `+N`.
fetchKey	string	—	What else `fetchGraph` reads, such as the host's scope: part of the request's key, so a change refetches.
groupFacts	(…) => CallGraphGroupFact[]	—	The groups the graph reached, drawn or excluded. Without it the graph offers no exclusions.
guardLabel	enum	—	What a conditional edge's pill says of its guards; "innermost" by default. The edge's tooltip always lists them.
loadSiteGuards	(…) => Promise<CallGraphSite[]>	—	Fetches the guards of a selected edge's sites, for a host whose graph leaves them out.
maxDepth	number	—	—
nodeHref	(…) => string	—	Where a node opens. A node the vocabulary gives no source is never opened, and Open is disabled on a node with no href that `onOpenNode` does not accept.
onAccessChange	(…) => void	—	—
onCollapsedGroupsChange	(…) => void	—	—
onColumnsChange	(…) => void	—	—
onDepthChange	(…) => void	—	—
onDirectionChange	(…) => void	—	—
onExcludeChange	(…) => void	—	—
onFocusNode	(…) => void	—	Re-roots the graph on a node, by id: a drawn node the vocabulary can root, or the column behind a field.
onOpenNode	(…) => void	—	Opens a node; with `nodeHref` it handles a plain click on the link.
onPinnedChange	(…) => void	—	—
onRevealSite	(…) => void	—	—
onSelectedChange	(…) => void	—	—
openLabel	string	—	—
pinned	boolean	—	Shows a Pin root toggle; the host keeps `root` while pinned.
renderHeader	(…) => ReactNode	—	Host facts above the diagram, such as how the root was resolved.
root*	string | undefined	—	What the graph is drawn around, in the host's terms. Undefined shows `emptyMessage`.
selected	CallGraphSelection	—	—
siteHref	(…) => string	—	Where a call site opens; a site opens only when its caller has a source.
toolbarEnd	ReactNode	—	—
variableAccess	boolean	—	The source can follow the variables a body reads and writes: shows a Variables toggle beside the Access ones. Needs `dataAccess`.
vocabulary	CallGraphVocabulary	—	—