Designer Layout
The designer is a five-zone workspace. Each zone has a dedicated role, and they compose to give you full control over building and monitoring workflows without switching screens.
The Five Zones
| Zone | Location | Component | Purpose |
|---|---|---|---|
| Top Toolbar | Top edge, full width | TopToolbar | Mode selector, Save, Undo/Redo, Zoom controls, Process name, Back to Dashboard |
| Left Toolbar | Left edge, vertical | LeftToolbar | Node palette drawer — searchable node catalog grouped by category |
| Canvas | Centre, occupies remaining space | WorkflowCanvas | React Flow canvas — drag nodes, draw connections, zoom/pan |
| Right Toolbar / Properties Panel | Right edge, collapsible | RightToolbar | Configuration form for the selected node (Atlas Form rendered inline) |
| Observer Panel | Bottom or floating | FlowObserverPanel | Execution monitoring: Status, Node List, Logs, Node Inspector tabs |
Top Toolbar Detail
The Top Toolbar is always visible. Its contents change based on the current mode:
In Design Mode
- Process Name — Editable inline. Click to rename.
- Unsaved Indicator — A dot appears when there are unsaved changes (isDirty).
- Save — Ctrl+S or the save button. Persists the graph to the server.
- Undo / Redo — Step back or forward through graph changes.
- Zoom In / Out / Fit — Canvas zoom controls.
- Mode Selector — Toggle between Design and Execution.
- Back to Dashboard — Navigates back; prompts to unlock and save.
In Execution Mode
- Run — Starts workflow execution.
- Pause / Resume — Suspends or resumes the current execution.
- Cancel — Cancels the current execution.
- Execution ID Display — Shows the active execution identifier.
Left Toolbar — Node Palette
The Left Toolbar is a collapsible drawer that houses the node palette. Click the toolbar edge to expand/collapse it. Inside you will find:
- A search box for finding nodes by name or keyword
- Node categories as collapsible sections (Trigger, Logic, Data, AI, Integration, etc.)
- Draggable node cards — drag to the canvas to create a node instance
Right Panel — Properties
Clicking any node on the canvas opens its configuration form in the Right Panel. This is an Atlas Form rendered inline. Changes auto-save to the node's configuration within the workflow graph (the full workflow graph must still be saved with Ctrl+S to persist to the server).
Observer Panel
The Observer Panel is hidden in Design Mode and appears automatically when you start an execution. It docks to the bottom of the canvas by default. You can:
- Drag it out to float it as a separate window
- Resize it by dragging the top edge
- Minimise it to a thin tab strip by clicking the minimise icon
- Close it entirely (it reopens on next execution)