From 6e8d85d10b37852daaf43e2ee48c0d874bc7426a Mon Sep 17 00:00:00 2001
From: Nikhil-Doye <nikhil.doye@gmail.com>
Date: Sat, 18 Oct 2025 21:53:56 -0400
Subject: [PATCH] Implement clearAllNodes functionality in WorkflowToolbar and
 workflowStore

- Added clearAllNodes method to the workflow store to reset the workflow state, clearing all nodes and edges.
- Updated WorkflowToolbar to replace the clearExecutionResults function with clearAllNodes, renaming the button to "Reset workflow (clear all nodes)" for clarity.
- Enhanced user experience by ensuring the reset action is clearly communicated through UI changes.
---
 src/components/WorkflowToolbar.tsx |  7 ++++---
 src/store/workflowStore.ts         | 24 ++++++++++++++++++++++++
 2 files changed, 28 insertions(+), 3 deletions(-)

diff --git a/src/components/WorkflowToolbar.tsx b/src/components/WorkflowToolbar.tsx
index 37df173..b9b535f 100644
--- a/src/components/WorkflowToolbar.tsx
+++ b/src/components/WorkflowToolbar.tsx
@@ -23,6 +23,7 @@ export const WorkflowToolbar: React.FC = () => {
     executeWorkflow,
     isExecuting,
     clearExecutionResults,
+    clearAllNodes,
   } = useWorkflowStore();
 
   const fileInputRef = useRef<HTMLInputElement>(null);
@@ -70,7 +71,7 @@ export const WorkflowToolbar: React.FC = () => {
   };
 
   const handleClear = () => {
-    clearExecutionResults();
+    clearAllNodes();
   };
 
   if (!currentWorkflow) return null;
@@ -156,10 +157,10 @@ export const WorkflowToolbar: React.FC = () => {
         <button
           onClick={handleClear}
           className="flex items-center space-x-2 px-3 py-2 bg-gray-100 text-gray-700 rounded-md hover:bg-gray-200 transition-colors"
-          title="Clear execution results"
+          title="Reset workflow (clear all nodes)"
         >
           <RotateCcw className="w-4 h-4" />
-          <span>Clear</span>
+          <span>Reset</span>
         </button>
       </div>
 
diff --git a/src/store/workflowStore.ts b/src/store/workflowStore.ts
index c0d3d50..f26567d 100644
--- a/src/store/workflowStore.ts
+++ b/src/store/workflowStore.ts
@@ -83,6 +83,7 @@ interface WorkflowStore {
   addNode: (type: string, position: { x: number; y: number }) => void;
   updateNode: (nodeId: string, data: Partial<NodeData>) => void;
   deleteNode: (nodeId: string) => void;
+  clearAllNodes: () => void;
   selectNode: (nodeId: string | null) => void;
 
   // Edge management
@@ -280,6 +281,29 @@ export const useWorkflowStore = create<WorkflowStore>((set, get) => ({
     }));
   },
 
+  clearAllNodes: () => {
+    // Clear execution state first
+    set((state) => ({
+      selectedNodeId: null,
+      executionResults: {},
+      isExecuting: false,
+    }));
+
+    // Use setTimeout to allow React Flow to properly handle node removal
+    setTimeout(() => {
+      set((state) => ({
+        currentWorkflow: state.currentWorkflow
+          ? {
+              ...state.currentWorkflow,
+              nodes: [],
+              edges: [],
+              updatedAt: new Date(),
+            }
+          : null,
+      }));
+    }, 0);
+  },
+
   selectNode: (nodeId: string | null) => {
     set({ selectedNodeId: nodeId });
   },