UI Options

Pivotick provides a flexible UI layer on top of your graph, allowing you to control how users interact with nodes, edges, and the canvas. Using UI options, you can:

• Configure the overall mode of the UI (full, viewer, static, etc.).
• Customize sidebar and panels to show properties or extra information.
• Define tooltips for nodes and edges, with optional custom renderers.
• Configure context menus for nodes, edges, and the canvas.

UI Mode

The mode option controls the overall behavior and interaction level of the graph UI.

• full default: Complete UI with all panels, menus, and interactions enabled.
• light: Minimal UI with essential interactions enabled.
• viewer: Only allows navigating the graph (pan, zoom, drag) without displaying any UI panels.
• static: Static graph, no UI panels or interactions; the graph is read-only.

For image-style usage of Pivotick, use the following:

const container = document.getElementById('graph-container')
const options = {
    UI: {  
        mode: 'viewer'
    },
}
const graph = Pivotick(container, options)

Other UI component can be configured through their respective namespace

const options = {
    UI: { 
        sidebar: {},
        mainHeader: {},
        propertiesPanel: {},
        extraPanels: [],
        tooltip: {},
        contextMenu: {},
    }
}

The full-mode control surface

In full mode the chrome is a mode-driven layout: a left mode rail (Select / Create / View), a contextual tool panel for the active mode, a View flyout with layout / physics / grid settings, the top main header (search, filter, notes), the selection sidebar (properties, facets, neighbours, and a bulk-action row), and a right-side viewport rail (fit-and-center, zoom, settings, fullscreen). light mode drops the sidebar; viewer keeps only the viewport rail and View flyout; static is a bare canvas.

Migrating from the corner chrome

The floating GraphControls and GraphToolbar overlays were removed. Layout and physics moved into the View flyout (UIManager.viewFlyout); Select/Create tools live in the tool panel (UIManager.toolPanel) and mode rail (UIManager.modeRail). The UI.selectionMenu option is gone — use contextMenu for per-node actions and the sidebar bulk-action row for multi-selection actions. UIManager.graphNaviation was renamed to graphNavigation. See the CHANGELOG.