Data table

A force layout is bad at three things people do constantly: reading exact values, selecting at scale, and working out where to start. UI.table splits a data dock off the bottom of the canvas to answer all three — the graph's rows, sortable and selectable.

The loop is table to find, canvas to understand, sidebar to read:

The table opens sorted by requests, so the busiest service is the first row.
Click any heading to re-sort; click again to reverse.
Click a row to select it, Ctrl + Click to add one, or Shift + Click to take a range in the order shown — then act on the lot with the sidebar's bulk actions.
Rubber-band a group on the canvas instead and the matching rows light up.
Narrow the rows from the headers — the control follows the column: type into Service, pick from Kind, set bounds on Requests / day. That never touches the canvas: the graph's own filter stays with the filter panel, so the two can't fight.
Nodes / Edges switch what is listed. CSV and JSON write out exactly what is on screen — this tab, these columns, this sort, this filter.

The dock also lists nodes the graph is currently hiding, with a Visibility column saying whether a filter or a manual hide is responsible — so "23 nodes hidden" is something you can inspect rather than take on trust.

Drag the divider to resize it, or fold it to its header bar with the chevron. Neither moves the graph: the simulation tunes itself against the container, not the canvas, so chrome opening and closing can never change a layout.

See Data table for the full option set.

OptionsData

// import { ColorPaletteMapper, tableColumns } from 'pivotick'
//
// The data dock comes with `mode: 'full'`, folded to its header bar — click the chevron
// or press Shift+T. `open: true` below starts it expanded instead. Everything here is
// optional; `UI: { mode: 'full' }` alone gets you a dock.
//
// Columns are derived when you don't declare any: the graph-aware ones lead (Label,
// Degree, Visibility) and the data keys follow, ordered by how many nodes carry them.
// They are declared here instead, to put `requests` on the right and give three columns
// a row filter — one of each kind, since the control follows the column's `type`.
// `tableColumns` holds the graph-aware ones — clone one to relabel it.
const options = {
    UI: {
        mode: 'full',
        // Full mode's minimap would sit in the corner this card wants for the dock,
        // and the dock is the subject — see the Minimap card for that one.
        minimap: false,
        // Top-left, because this embed is 560px tall and the dock takes 42% of it: the
        // canvas that's left is shorter than the mode rail, so the bottom-left corner has
        // no column to give. A bottom-left legend would shrink to its header here.
        legend: { position: 'top-left' },
        table: {
            open: true,
            height: 0.42,
            // Busiest first — the question you actually arrive with.
            sort: { key: 'requests', direction: 'desc' },
            columns: [
                { ...tableColumns.label, label: 'Service', filterable: true },
                { key: 'kind', label: 'Kind', type: 'select', filterable: true },
                { key: 'owner', label: 'Owner', type: 'select' },
                { key: 'tier', label: 'Tier', type: 'select' },
                { key: 'requests', label: 'Requests / day', type: 'numberRange', align: 'right', filterable: true },
                { ...tableColumns.degree, label: 'Links' },
            ],
        },
    },
    // Colour by the same `kind` the table shows, so a row and a dot can be matched by
    // eye. Declaring `nodeTypeAccessor` is also what earns the canvas its legend.
    render: {
        nodeTypeAccessor: (node) => node.getData().kind,
        defaultNodeStyle: {
            color: (node) => palette.getColor(node.getData().kind),
        },
    },
}

const data = {
    nodes: [
        { id: 'api', data: { label: 'api-gateway', kind: 'service', owner: 'Platform', requests: 48200, tier: 'edge' } },
        { id: 'auth', data: { label: 'auth-service', kind: 'service', owner: 'Identity', requests: 31400, tier: 'core' } },
        { id: 'billing', data: { label: 'billing-service', kind: 'service', owner: 'Payments', requests: 8600, tier: 'core' } },
        { id: 'search', data: { label: 'search-service', kind: 'service', owner: 'Discovery', requests: 22750, tier: 'core' } },
        { id: 'users-db', data: { label: 'users-db', kind: 'datastore', owner: 'Identity', requests: 39900, tier: 'data' } },
        { id: 'orders-db', data: { label: 'orders-db', kind: 'datastore', owner: 'Payments', requests: 12300, tier: 'data' } },
        { id: 'index', data: { label: 'search-index', kind: 'datastore', owner: 'Discovery', requests: 20100, tier: 'data' } },
        { id: 'cache', data: { label: 'edge-cache', kind: 'datastore', owner: 'Platform', requests: 51000, tier: 'edge' } },
        { id: 'mailer', data: { label: 'mailer', kind: 'worker', owner: 'Payments', requests: 1450, tier: 'async' } },
        { id: 'reindexer', data: { label: 'reindexer', kind: 'worker', owner: 'Discovery', requests: 980, tier: 'async' } },
    ],
    edges: [
        { from: 'api', to: 'auth', data: { label: 'authenticates' } },
        { from: 'api', to: 'search', data: { label: 'queries' } },
        { from: 'api', to: 'billing', data: { label: 'charges' } },
        { from: 'api', to: 'cache', data: { label: 'reads' } },
        { from: 'auth', to: 'users-db', data: { label: 'reads' } },
        { from: 'billing', to: 'orders-db', data: { label: 'writes' } },
        { from: 'billing', to: 'mailer', data: { label: 'enqueues' } },
        { from: 'search', to: 'index', data: { label: 'reads' } },
        { from: 'reindexer', to: 'index', data: { label: 'writes' } },
        { from: 'reindexer', to: 'orders-db', data: { label: 'reads' } },
    ],
}

Data table ​

Data table