From 68f4abc574d7ff40fa70d9580372cf1486752fee Mon Sep 17 00:00:00 2001
From: gsxdsm <gsxdsm@users.noreply.github.com>
Date: Sat, 11 Jul 2026 17:12:03 -0700
Subject: [PATCH] fix: remount simple canvas per workflow so fitView tracks the
 new graph

Switching or creating a workflow could leave the simplified canvas fitted to
the previous graph's bounds (an apparently empty canvas after New workflow).
Keying the canvas's ReactFlowProvider on the workflow id forces a fresh
measure + initial fitView per workflow; the in-place refit still handles
inserts/deletes within one workflow.

Co-Authored-By: Claude Fable 5 <noreply@anthropic.com>
---
 packages/dashboard/app/components/WorkflowNodeEditor.tsx  | 2 ++
 .../dashboard/app/components/WorkflowSimpleCanvas.tsx     | 8 +++++++-
 2 files changed, 9 insertions(+), 1 deletion(-)

diff --git a/packages/dashboard/app/components/WorkflowNodeEditor.tsx b/packages/dashboard/app/components/WorkflowNodeEditor.tsx
index b74b7beb52..b63894f5ea 100644
--- a/packages/dashboard/app/components/WorkflowNodeEditor.tsx
+++ b/packages/dashboard/app/components/WorkflowNodeEditor.tsx
@@ -3155,6 +3155,7 @@ function InnerEditor({
                             <div className="wf-mobile-simple-canvas" data-testid="wf-mobile-simple-canvas">
                               <WorkflowEditorCatalogContext.Provider value={catalogs}>
                                 <WorkflowSimpleCanvas
+                                  instanceKey={activeWorkflow.id}
                                   nodes={nodesForRender}
                                   edges={edges}
                                   columnNames={columnNameMap}
@@ -3883,6 +3884,7 @@ function InnerEditor({
                   <div className="wf-editor-canvas wf-editor-canvas--simple" ref={canvasRef} tabIndex={-1}>
                     <WorkflowEditorCatalogContext.Provider value={catalogs}>
                       <WorkflowSimpleCanvas
+                        instanceKey={activeWorkflow.id}
                         nodes={nodesForRender}
                         edges={edges}
                         columnNames={columnNameMap}
diff --git a/packages/dashboard/app/components/WorkflowSimpleCanvas.tsx b/packages/dashboard/app/components/WorkflowSimpleCanvas.tsx
index 6f13e9ab57..2f414a5966 100644
--- a/packages/dashboard/app/components/WorkflowSimpleCanvas.tsx
+++ b/packages/dashboard/app/components/WorkflowSimpleCanvas.tsx
@@ -368,6 +368,11 @@ function SimpleCanvasAutoFit({
 }
 
 export interface WorkflowSimpleCanvasProps {
+  /** Identity of the workflow being rendered (e.g. its id). Changing it
+   *  remounts the flow so React Flow re-measures and re-fits from scratch —
+   *  switching workflows otherwise leaves a viewport fitted to the PREVIOUS
+   *  graph's bounds (seen as an empty-looking canvas after "New workflow"). */
+  instanceKey: string;
   nodes: FlowNode<WorkflowFlowNodeData>[];
   edges: FlowEdge[];
   /** Column id → display name (v2). Empty map for v1 workflows. */
@@ -388,6 +393,7 @@ export interface WorkflowSimpleCanvasProps {
 }
 
 export function WorkflowSimpleCanvas({
+  instanceKey,
   nodes,
   edges,
   columnNames,
@@ -451,7 +457,7 @@ export function WorkflowSimpleCanvas({
           advanced canvas mounted (CSS-hidden) in list/mobile presentations;
           sharing one store between two ReactFlow instances corrupts node
           measurements and breaks fitView on the visible one. */}
-      <ReactFlowProvider>
+      <ReactFlowProvider key={instanceKey}>
       <SimpleCanvasInsertContext.Provider value={onInsertOnEdge}>
       <ReactFlow
         nodes={displayNodes}