Command Palette

On a tree with a few hundred nodes, panning to find someone is slower than typing their name. enableCommandPalette adds a Cmd/Ctrl + K overlay for jumping to a node or running a quick action.

Enabling it

const tree = new ApexTree(document.getElementById('chart'), {
  enableCommandPalette: true,
})
const graph = tree.render(data)

That is the whole configuration. The palette is a plain DOM overlay rather than SVG, which keeps it out of the foreignObject constraints that apply to node templates and makes it safe in Safari.

What it does

Typing filters nodes by fuzzy label match, using the same resolved labels as search. Selecting a node centers the camera on it.

Three quick actions are always available:

Action	Equivalent method
Expand all	`graph.expandAll()`
Collapse all	`graph.collapseAll()`
Fit to screen	`graph.fitScreen()`

Keyboard flow

Key	Behavior
`Cmd/Ctrl + K`	Open the palette
Type	Filter nodes and actions
Up / Down	Move through results
Enter	Run the highlighted result
Escape	Dismiss

The overlay is keyboard-navigable throughout and returns focus to the chart on dismiss.

Localization

Every string in the palette is overridable:

Message key	Default
`commandPaletteAriaLabel`	`'Command palette'`
`commandPalettePlaceholder`	`'Jump to a node or run a command…'`
`commandExpandAll`	`'Expand all'`
`commandCollapseAll`	`'Collapse all'`
`commandFitScreen`	`'Fit to screen'`
`commandNoResults`	`'No matches'`

const tree = new ApexTree(el, {
  enableCommandPalette: true,
  locale: {
    messages: {
      commandPalettePlaceholder: 'Zu Knoten springen…',
      commandExpandAll: 'Alle ausklappen',
      commandCollapseAll: 'Alle einklappen',
      commandFitScreen: 'Einpassen',
      commandNoResults: 'Keine Treffer',
    },
  },
})

Unset keys fall back to their English defaults. See Localization and RTL.

Lazy-loaded trees

The palette searches the tree as it currently exists. Nodes behind an unexpanded hasChildren: true node have not been fetched yet, so they are not in the index. If you need those searchable, either load them up front or drive the search against your own backend and call graph.centerOnNode(id) with the result. See Lazy Children.