Undo & history

The two buttons in the top bar are split buttons: the icon steps once, the caret opens the whole history. It is one timeline with a now line through it — the rows above have been undone, the rows below are what can still be undone — and clicking a row travels there.

Make some history, then open it:

Hide Node or Delete Node from a node's right-click menu
Create ▸ Add node on the left rail, then click the canvas
Run a pivot, if you have one — an ingest is an entry like any other

Hover a row and it marks the span a click would reverse, states the net effect in the footer, and forecasts it on the canvas: what would go drains where it stands, and what would come back is outlined where it would land. Ctrl + Z steps back without the menu.

Undo is contiguous: aiming three rows down reverses those three, as one batch.

OptionsWrite-throughData

// Nothing here switches the history on: `graph.history` records the four kinds of
// composition change on its own, and the two split buttons in the header are wired to
// it. `mode: 'full'` is what brings the header the buttons live in, and the left rail's
// Create tool.
const options = {
    UI: {
        mode: 'full',
        // Off: this card is about the top bar, and `full` mode's minimap and data dock
        // are neither (see the Minimap and Data table cards for those).
        minimap: false,
        table: false
    },
    render: { nodeTypeAccessor: (node) => node.getData().kind }
}

// A consumer that writes a change through to its own backend says so. Undo makes no
// compensating write, so it follows the direction of yours: a creation still reverses
// and the row is chipped `saved`, while a deletion is sealed — undoing it would put
// back a node your backend no longer has.
const writeThrough = {
    callbacks: {
        onBeforeNodeCreate: async (ctx) => {
            const values = await ctx.promptData({
                fields: [{ key: 'label', label: 'Name', type: 'text' }]
            })
            if (!values) return false
            const saved = await myBackend.create(values)
            return { accept: true, id: saved.uuid, data: values, persisted: true }
        },
        onBeforeDelete: async (ctx) => {
            await myBackend.remove(ctx.nodes.map((node) => node.id))
            return { accept: true, persisted: true }
        }
    }
}

const data = {
    nodes: [
        { id: 'gw', data: { label: 'gateway-01', kind: 'Host' } },
        { id: 'db', data: { label: 'orders-db', kind: 'Database' } },
        { id: 'api', data: { label: 'orders-api', kind: 'Service' } },
        { id: 'cache', data: { label: 'session-cache', kind: 'Service' } },
        { id: 'job', data: { label: 'nightly-export', kind: 'Job' } },
        { id: 'sftp', data: { label: 'partner-sftp', kind: 'Host' } }
    ],
    edges: [
        { from: 'gw', to: 'api', data: { label: 'routes' } },
        { from: 'api', to: 'db', data: { label: 'reads' } },
        { from: 'api', to: 'cache', data: { label: 'reads' } },
        { from: 'job', to: 'db', data: { label: 'reads' } },
        { from: 'job', to: 'sftp', data: { label: 'writes' } }
    ]
}

Undo never writes to your backend, so a change you wrote through follows the direction it went. A creation still reverses — the canvas loses what the backend keeps, and the footer counts it (Undoes 2 steps · 1 item saved upstream). A deletion is sealed: listed, never reversed, and a span containing one passes over it (Undoes 2 of 3 · 1 saved item kept).

See Undo & history for the four kinds of entry, what is deliberately not recorded, and how undoing an ingest puts its candidates back in the triage pane.

Undo & history ​

Undo & history