Flow Studio
Jump to Node on Canvas
Clicking a row in the Node List publishes a node:selected EventBus event. The canvas reacts by panning the viewport to the node and selecting it, so you can visually locate any node without manually searching the canvas.
Click Behaviour
1
User Clicks a Node Row
Single click on any row in the Node List tab.
2
EventBus Publish
bus.publish('node:selected', { nodeId: row.nodeId }) fires on the shared EventBus.
3
Canvas Listener Reacts
The canvas EventBus subscriber calls React Flow's fitView on the target node, animates the viewport pan, and adds the selection state to the node.
4
Node Highlighted on Canvas
The canvas pans to the node and shows it with its selection highlight. The node's execution status border (running/completed/failed) remains visible.
Implementation
// Inside ExecutionNodeListTabContent row click handler
function handleRowClick(nodeId: string) {
bus.publish('node:selected', { nodeId, source: 'node-list-tab' });
}
// Inside WorkflowCanvas EventBus subscriber
bus.subscribe('node:selected', ({ nodeId }) => {
const node = getNode(nodeId); // React Flow internal getter
if (!node) return;
reactFlowInstance.fitView({
nodes: [{ id: nodeId }],
padding: 0.3,
duration: 600 // animate over 600ms
});
// Also select the node in React Flow state
setNodes(nodes => nodes.map(n => ({
...n,
selected: n.id === nodeId
})));
});
Canvas Must Be Visible
If the Observer Panel is in floating mode and the canvas is not visible (e.g., a modal is open), the jump fires but the canvas pan happens in the background. Switch to the canvas to see the result.