From da1259aec8b8f3a79aecdd64b33b32dba236a56e Mon Sep 17 00:00:00 2001
From: "google-labs-jules[bot]"
 <161369871+google-labs-jules[bot]@users.noreply.github.com>
Date: Mon, 5 Jan 2026 03:38:45 +0000
Subject: [PATCH] feat: Add "Clear" button to reset the mind map

This commit introduces a "Clear" button to the mind-mapping application, allowing users to easily reset the canvas and start a new mind map.

The implementation includes:
- A new "Clear" button in the header.
- A `handleClear` function that resets the nodes and edges.
- Refactoring the `nodeId` counter to use the `useRef` hook for better state management.
---
 src/App.jsx | 38 ++++++++++++++++++++++++++++++--------
 1 file changed, 30 insertions(+), 8 deletions(-)

diff --git a/src/App.jsx b/src/App.jsx
index 5f3df15..63babbd 100644
--- a/src/App.jsx
+++ b/src/App.jsx
@@ -15,7 +15,6 @@ import { saveAs } from 'file-saver';
 // 🧠 Initial State & Helpers
 const initialNodes = [];
 const initialEdges = [];
-let nodeId = 1;
 
 const getColor = (type) => {
   switch (type) {
@@ -27,7 +26,7 @@ const getColor = (type) => {
 };
 
 // 🤖 AI Logic with Domino Effect Thinking (Updated: Using Puter AI API)
-const createAIChildren = async (text, parentId, setNodes, setEdges, stopGenerationRef) => {
+const createAIChildren = async (text, parentId, setNodes, setEdges, stopGenerationRef, nodeId) => {
   try {
     if (stopGenerationRef.current) return;
     const res = await axios.post(
@@ -64,7 +63,7 @@ Return only 3 outputs: one of each type.`
     const childTypes = ['positive', 'neutral', 'negative'];
 
     const newNodes = lines.map((line, idx) => {
-      const newId = `${nodeId++}`;
+      const newId = `${nodeId.current++}`;
       return {
         id: newId,
         data: { label: line.replace(/^\d+\.\s*/, '') },
@@ -96,7 +95,7 @@ Return only 3 outputs: one of each type.`
     // Recursively expand each child one level deep
     for (const n of newNodes) {
       if (stopGenerationRef.current) break;
-      await createAIChildren(n.data.label, n.id, setNodes, setEdges, stopGenerationRef);
+      await createAIChildren(n.data.label, n.id, setNodes, setEdges, stopGenerationRef, nodeId);
     }
 
   } catch (err) {
@@ -115,6 +114,7 @@ export default function App() {
   const [loading, setLoading] = useState(false);
   const stopGenerationRef = useRef(false);
   const reactFlowWrapper = useRef(null);
+  const nodeId = useRef(1);
 
   const handleExport = () => {
     if (reactFlowWrapper.current) {
@@ -126,12 +126,18 @@ export default function App() {
     }
   };
 
+  const handleClear = () => {
+    setNodes([]);
+    setEdges([]);
+    nodeId.current = 1;
+  };
+
   const handleSubmit = async () => {
     if (!prompt.trim()) return;
     setLoading(true);
     stopGenerationRef.current = false;
 
-    const rootId = `${nodeId++}`;
+    const rootId = `${nodeId.current++}`;
     const rootNode = {
       id: rootId,
       data: { label: prompt },
@@ -150,7 +156,7 @@ export default function App() {
     setNodes([rootNode]);
     setEdges([]);
 
-    await createAIChildren(prompt, rootId, setNodes, setEdges, stopGenerationRef);
+    await createAIChildren(prompt, rootId, setNodes, setEdges, stopGenerationRef, nodeId);
 
     setPrompt('');
     setLoading(false);
@@ -164,7 +170,7 @@ export default function App() {
   const onNodeClick = async (_event, node) => {
     stopGenerationRef.current = false;
     setLoading(true);
-    await createAIChildren(node.data.label, node.id, setNodes, setEdges, stopGenerationRef);
+    await createAIChildren(node.data.label, node.id, setNodes, setEdges, stopGenerationRef, nodeId);
     setLoading(false);
   };
 
@@ -246,6 +252,22 @@ export default function App() {
           >
             Export as PNG
           </button>
+          <button
+            onClick={handleClear}
+            disabled={loading || nodes.length === 0}
+            style={{
+              padding: '10px 20px',
+              backgroundColor: '#f44336',
+              color: 'white',
+              border: 'none',
+              borderRadius: '8px',
+              fontWeight: 'bold',
+              cursor: loading || nodes.length === 0 ? 'not-allowed' : 'pointer',
+              opacity: loading || nodes.length === 0 ? 0.7 : 1,
+            }}
+          >
+            Clear
+          </button>
         </div>
       </div>
 
@@ -267,4 +289,4 @@ export default function App() {
       </div>
     </div>
   );
-}
+}
\ No newline at end of file