Portal Community

The Loading Transition

Clicking Open on a ProcessThread card triggers a state machine transition in WorkflowApp.tsx. The app moves from dashboard state to loading state while it fetches the workflow data, then to designer state once data arrives.

1

Fetch Workflow Data

The API call GET /api/v1/flow-studio/threads/{threadId}/graph retrieves the full graph: nodes, edges, groups, and configuration. This also validates your session lock.

2

Populate the Stores

The graph data is translated by ProcessElementToNodeTranslator and loaded into workflowStore. Node type metadata is loaded from cache or fetched fresh.

3

Determine Mode

If you hold the edit lock, the designer opens in Design mode. If another user holds the lock (or the thread is Published), it opens in Read-Only design mode.

4

Render the Canvas

React Flow renders the nodes and edges. The canvas centres on the workflow graph automatically. The left toolbar, top toolbar, and right panel all mount.

Edit Mode vs Read-Only Mode

ConditionModeWhat Is Disabled
You hold the edit lockFull Design ModeNothing — all edit features active
Another user holds the lockRead-Only Design ModeNode drag, connect, delete, save, paste
Thread is PublishedRead-Only Design ModeAll edits — canvas is a viewer only
Thread is ArchivedRead-Only Design ModeAll edits, execution buttons

Error States

If loading fails, WorkflowApp moves to the error state and shows an error page with:

Common causes of load failure:

ErrorCauseResolution
404 Not FoundThread was deleted after you opened the dashboardRefresh the dashboard and verify the thread exists
403 ForbiddenYour role was changed to Viewer while you had the thread openContact the project owner
409 ConflictLock acquired by another sessionWait for the other user to unlock, or ask an admin to force unlock
Network ErrorBackend API unreachableCheck connectivity; retry when the service recovers