Canvas basics

The canvas is a React Flow graph: mouse-heavy, keyboard-aware, predictable. It takes about five minutes to learn and stops surprising you after that. This page covers the mechanics — panning, zooming, selecting, deleting, laying out — so the rest of the Query Builder section can focus on the actual querying.

What you're looking at

A fresh canvas has three persistent zones plus the graph itself.

• The top toolbar carries the current query name (or "Query Builder" if nothing is loaded), a three-dot menu for query-level actions, and the Run button on the far right.
• The canvas fills the middle. It's infinite in both directions with a dotted background; on first open it holds a single Start node and a floating hint — "Start Building Your Query — Drag from the Start node to add your first query component."
• The bottom zoom bar is a floating pill with zoom in/out, the current zoom percentage, Fit, Layout, and a lock/unlock toggle.

The right panel is hidden by default. It opens when you click a node and holds that node's configuration.

Pan, zoom, and fit

Three small mechanics make everything else possible:

The number between + and − is the current zoom as a percentage. Handy when you want to compare against a teammate — "zoom to 75 %, fit, same screen."

Selecting

• Click a node → the right panel opens with that node's configuration.
• Click an edge → edge-level configuration (only meaningful for pipeline edges; see Pipelines).
• Click empty canvas → deselects everything and closes the right panel.

Moving nodes

Drag any node to reposition it. Node positions are purely visual — they don't affect execution order or query shape. Edges are what carry meaning; the layout is for your eyes.

Interactive mode must be on for dragging (see below).

Auto-layout

The Layout button in the bottom zoom bar re-arranges every node using a layered graph algorithm — Start on the left, classes in sequence, outputs on the right. It's the cure for spaghetti canvases.

It only moves positions. Edges, node data, filters, post-processors — nothing else changes.

Interactive mode (lock / unlock)

The lock toggle at the right end of the zoom bar controls whether the canvas is editable.

• Unlocked (green unlock icon, "Unlock" label). Default. Drag, connect, resize, delete — everything works.
• Locked (grey lock icon, "Lock" label). Clicks still open the right panel, so you can inspect any node's configuration, but you can't accidentally move nodes or draw edges.

Locking is useful during a review or when you're walking someone through a query — no risk of a stray click deforming the graph.

Deleting

There are three ways to remove things from the canvas:

• A single node or edge — click to select, press Delete or Backspace. A confirmation dialog asks before the deletion actually happens.
• Everything — toolbar three-dot menu → Clear Canvas. Also confirmation-gated. Resets to a single empty Start node.

The toolbar three-dot menu

Top-right of the canvas, next to the Run button. The menu holds the actions that affect the query as a whole:

• Load Query / Template — opens the saved queries dialog. Pick one and it replaces what's on the canvas.
• Execution History — recent runs of whatever is currently loaded, with timestamps and result previews.
• Save Query — covered fully in Saving and sharing.
• Clear Canvas — the nuclear option. Confirmation required.

The Run button

The Run button lives at the far right of the toolbar. It's the lightning-bolt button.

• Disabled when the canvas is empty (only a Start node and nothing else).
• "Run" (lightning bolt) for plain queries — click and go.
• "Configure & Run" (wrench icon) when any node declares runtime variables. Opens a dialog to fill in values first. See Variables.
• "Cancel" (red, X icon) while a query is in flight. Click to abort cleanly — the backend receives the cancellation and stops the APIC call.

Keyboard shortcuts

A handful of shortcuts are wired into the canvas itself. Everything else lives in the full shortcuts dialog.

Press ⌘/ (or Ctrl+/) any time to see the full list in a dialog.

The right panel

Clicking any node opens the right panel with that node's configuration — APIC connection for Start, class and properties for Class, filter rules for Filter, processor type for Post-Processor, format and pagination for Output.

• Drag the left edge of the panel to resize it. Your width sticks per session.
• Press ⌘B / Ctrl+B to collapse without deselecting.
• Click empty canvas to dismiss.

Each node type gets its own configuration page — see Node types for the full inventory.

---

That's the canvas. Up next: Node types — the five shapes you can put on it and what each one actually means.