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 and selection menus.

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: {},
        selectionMenu: {},
    }
}