Canvas Modes

Design Mode

The default mode. The canvas is fully editable. Node palette, config forms, and connection tools are active.

// Entered on first load and after exitExecutionMode()
// currentMode = "design"
// isReadonly  = false
// executionId = null
// nodeStatuses = {}   (empty — no run data shown)

Execution Mode

Entered when the user clicks Run or opens a past execution. The canvas switches to a read-only observer — node status overlays appear, the run progress bar is shown, and the config forms become read-only.

// Entered by calling enterExecutionMode("exec-abc")
// currentMode = "execution"
// isReadonly  = true
// executionId = "exec-abc"
// nodeStatuses populated by SignalR events (live) or API response (historical)

Readonly Mode

Used for shared views, embedded viewers, and users with Viewer-only access. The canvas renders identically to design mode visually but all editing interactions are disabled.

// Entered by calling enterReadonly()
// currentMode = "readonly"
// isReadonly  = true
// executionId = null
// nodeStatuses = {}   (no execution data in readonly mode)

Mode Transition Diagram

             ┌──────────────────────────────────┐
             │           DesignMode              │
             │  (currentMode = "design")         │
             └──────────┬──────────────┬─────────┘
                        │              │
          enterExecution│              │enterReadonly()
          Mode(execId)  │              │
                        ▼              ▼
          ┌─────────────────┐   ┌─────────────────┐
          │  ExecutionMode  │   │  ReadonlyMode   │
          │ (currentMode=   │   │ (currentMode=   │
          │  "execution")   │   │  "readonly")    │
          └────────┬────────┘   └────────┬────────┘
                   │                     │
    exitExecution  │                     │ exitReadonly()
    Mode()         │                     │
                   └──────────┬──────────┘
                              ▼
                        DesignMode