Skip to content
Starlight Site Graph

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, or perform an action on the graph. Almost all buttons also have context menu options which will show the available options for that action when right-clicking the button.

If you are looking for ways to customize the interactions that the user can perform on the graph, check out the User Interactions page.

Fullscreen

Section titled “Fullscreen”

The fullscreen action button allows the user to toggle the graph between fullscreen and the normal (minimized) view.

When the canvas is focused, the user can also press F to toggle fullscreen.

{
  "graphConfig": {
    "actions": ["fullscreen"]
  }
}

Depth

Section titled “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 when they are not reachable from the current page’s node.

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

Reset Zoom

Section titled “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.

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

Render Arrows

Section titled “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.

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

Render External

Section titled “Render External”

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

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

Render Unresolved

Section titled “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.

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

Settings

Section titled “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.

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