Selection menu + multi-select

When several elements are selected, Pivotick shows a selection menu for bulk actions. Populate it via selectionMenu.menuNode — the same { topbar, menu } shape as the context menu, but each onclick receives the array of selected nodes.

Select multiple nodes — hold Shift and click them, or drag a box around them — and the selection menu appears. Try its actions.

Options

// `graph` is your Pivotick instance. The selection menu appears when several nodes
// are selected; each action's onclick receives the whole array of selected nodes —
// ideal for bulk operations.
const options = {
    UI: {
        // The selection menu is part of the full UI — enable it (the default
        // 'viewer' mode ships pan/zoom only):
        mode: 'full',
        selectionMenu: {
            menuNode: {
                topbar: [
                    {
                        text: 'Summarize',
                        variant: 'outline-primary',
                        onclick: (e, nodes) => graph.notifier.info('Selection', `${nodes.length} nodes selected`)
                    }
                ],
                menu: [
                    {
                        text: 'List selected',
                        variant: 'outline-secondary',
                        onclick: (e, nodes) => graph.notifier.info('Selected', nodes.map((n) => n.getData().label).join(', '))
                    },
                    {
                        text: 'Total commits',
                        variant: 'outline-secondary',
                        onclick: (e, nodes) => graph.notifier.success('Total commits', String(nodes.reduce((sum, n) => sum + n.getData().commits, 0)))
                    }
                ]
            }
        }
    }
}

Data

const data = {
    nodes: [
        { id: 'alice', data: { label: 'Alice', role: 'Maintainer', team: 'Core', commits: 342 } },
        { id: 'bob', data: { label: 'Bob', role: 'Contributor', team: 'Core', commits: 87 } },
        { id: 'carol', data: { label: 'Carol', role: 'Reviewer', team: 'Docs', commits: 45 } },
        { id: 'dave', data: { label: 'Dave', role: 'Contributor', team: 'Docs', commits: 63 } },
        { id: 'erin', data: { label: 'Erin', role: 'Maintainer', team: 'Infra', commits: 210 } }
    ],
    edges: [
        { from: 'alice', to: 'bob', data: { label: 'mentors' } },
        { from: 'alice', to: 'carol', data: { label: 'reviews' } },
        { from: 'carol', to: 'dave', data: { label: 'pairs' } },
        { from: 'erin', to: 'alice', data: { label: 'syncs' } }
    ]
}