Flow Studio
Selecting a Node
The Node Inspector tab is populated by selecting a node. Selection can happen from the canvas (clicking a node) or from the Node List tab (double-clicking a row). The inspector always shows the most recently selected node.
Ways to Select a Node for Inspection
| Action | Selects For Inspector | Also Switches To Inspector Tab? |
|---|---|---|
| Click a node on the canvas | Yes | No (stay on current tab) |
| Double-click a node on the canvas | Yes | Yes — switches to Node Inspector |
| Double-click a row in Node List tab | Yes | Yes — switches to Node Inspector |
| Click icon on Node List row | Yes | Yes — switches to Node Inspector |
Selection Flow
// Canvas node click handler (execution mode)
onNodeClick: (event, node) => {
// Update the observer store's selected node
flowObserverPanelStore.getState().setSelectedNodeId(node.id);
// Publish for any other subscribers
bus.publish('node:selected', { nodeId: node.id, source: 'canvas' });
}
// Canvas node double-click (execution mode) — additionally switches tab
onNodeDoubleClick: (event, node) => {
flowObserverPanelStore.getState().setSelectedNodeId(node.id);
bus.publish('node:selected', { nodeId: node.id, source: 'canvas-dblclick' });
engine.activateTab('node-inspector');
}Node Inspector When No Node Is Selected
When no node has been selected yet (e.g., the user opens the Node Inspector tab before clicking any node), the tab shows an empty state:
Empty State Message
"Click a node on the canvas or select one from the Node List to inspect its execution data."
"Click a node on the canvas or select one from the Node List to inspect its execution data."