Flow Studio
Sorting the List
The Node List can be sorted in three ways. Sorting is applied on top of any active filter. The sort order is chosen via a dropdown in the tab's toolbar area.
Sort Options
| Sort Mode | Order | Best For |
|---|---|---|
| Execution Order (default) | Nodes appear in the sequence they started executing — first node at top | Following the flow linearly; understanding the execution path |
| By Status | Groups: Running → Failed → Suspended → Completed → Skipped → Pending | Immediately seeing which nodes need attention (failed/running) without scrolling |
| By Duration (slowest first) | Descending by durationMs; nodes without a duration appear last | Performance profiling — identifying bottlenecks |
Sort Implementation
// NodeListSort enum
type NodeListSort = 'execution-order' | 'by-status' | 'by-duration';
// Status sort priority (lower = higher priority)
const statusPriority: Record<string, number> = {
running: 1,
failed: 2,
suspended: 3,
completed: 4,
skipped: 5,
pending: 6,
};
function sortNodes(nodes: NodeState[], sort: NodeListSort): NodeState[] {
switch (sort) {
case 'execution-order':
return [...nodes].sort((a, b) => a.startedAtMs - b.startedAtMs);
case 'by-status':
return [...nodes].sort((a, b) =>
(statusPriority[a.status] ?? 99) - (statusPriority[b.status] ?? 99)
);
case 'by-duration':
return [...nodes].sort((a, b) => (b.durationMs ?? -1) - (a.durationMs ?? -1));
default:
return nodes;
}
}
Sort is Local Only
Sorting is a client-side operation applied to the data already in
flowObserverPanelStore.nodeStatuses. Changing the sort mode does not make any server requests and takes effect instantly.