Skip to content

Quick Actions

The quick actions are a set of buttons that allow the user to quickly change some of the graph’s settings through the UI. In most cases, the buttons also have context menu options which show all available options for that action.

Fullscreen

The fullscreen action button allows the user to toggle the graph between fullscreen and normal view.
When the canvas is focused, the user can also press F to toggle fullscreen.

{
"actions": [
"fullscreen"
]
}

Depth

The depth action button changes the depth of the graph. The depth determines the maximum number of hops between two nodes, a depth of 2 would mean that the graph only shows nodes that are 2 hops away from the current node.

When the depth is negative or greater than the maximum depth of 5, the graph will show all nodes in the graph, even if they are not reachable from the current node.

{
"actions": [
"depth"
],
"depth": 1
}

Reset Zoom

The reset-zoom action button resets the zoom level of the graph to the default zoom level, and re-centers the graph on the current node.

{
"actions": [
"reset-zoom"
]
}

Render Arrows

The render-arrows action button toggles the rendering of arrows on the edges of the graph.
When arrows are rendered, they indicate which way the link is pointing.

{
"actions": [
"render-arrows"
],
"renderArrows": true
}

Render External

The render-external action button toggles the rendering of links going to external pages on the graph.

{
"actions": [
"render-external"
],
"renderExternal": true
}

Render Unresolved

The render-unresolved action button toggles the rendering of unresolved nodes on the graph.
Unresolved nodes are links that do lead to pages that do not exist in the website.

{
"actions": [
"render-unresolved"
],
"renderUnresolved": true
}

Settings

The settings action button opens a modal that allows the user to configure the simulation forces. For more information on how the simulation forces work, see the Simulation Configuration page.

{
"actions": [
"settings"
],
"alphaDecay": 0.0228,
"repelForce": 0.5,
"centerForce": 0.05,
"linkDistance": 30,
"colliderPadding": 20
}