From 7f199f37890ee78932c498d4e4aede524b4891e3 Mon Sep 17 00:00:00 2001
From: dvirlabs <dvirlabs@gmail.com>
Date: Fri, 11 Jul 2025 17:18:17 +0300
Subject: [PATCH] Add button to remove edge

---
 backend/main.py                     |  8 ++++----
 diagram.json                        | 23 +----------------------
 frontend/src/components/Diagram.jsx | 17 +++++++++++++++++
 3 files changed, 22 insertions(+), 26 deletions(-)

diff --git a/backend/main.py b/backend/main.py
index 928c622..b2ff2e4 100644
--- a/backend/main.py
+++ b/backend/main.py
@@ -80,9 +80,9 @@ def list_icons():
     return categories
 
 
-if __name__ == "__main__":
-    uvicorn.run(app, host="0.0.0.0", port=8000)
+# if __name__ == "__main__":
+#     uvicorn.run(app, host="0.0.0.0", port=8000)
     
 # For development, you can uncomment the line below to run the server with uvicorn directly.   
-# if __name__ == "__main__":
-#     uvicorn.run(app, host="0.0.0.0", port=8001)
\ No newline at end of file
+if __name__ == "__main__":
+    uvicorn.run(app, host="0.0.0.0", port=8001)
\ No newline at end of file
diff --git a/diagram.json b/diagram.json
index aa5bf7d..4736f13 100644
--- a/diagram.json
+++ b/diagram.json
@@ -1,25 +1,4 @@
 {
-  "nodes": [
-    {
-      "id": "1",
-      "type": "custom",
-      "data": {
-        "label": "Node 1",
-        "icon": "https://s3.dvirlabs.com/lab-icons/dev-tools/argocd.svg"
-      },
-      "position": {
-        "x": 68.5849844537563,
-        "y": 225.18693121594464
-      },
-      "width": 82,
-      "height": 82,
-      "selected": false,
-      "positionAbsolute": {
-        "x": 68.5849844537563,
-        "y": 225.18693121594464
-      },
-      "dragging": false
-    }
-  ],
+  "nodes": [],
   "edges": []
 }
\ No newline at end of file
diff --git a/frontend/src/components/Diagram.jsx b/frontend/src/components/Diagram.jsx
index bff55d2..3a97dd1 100644
--- a/frontend/src/components/Diagram.jsx
+++ b/frontend/src/components/Diagram.jsx
@@ -23,6 +23,8 @@ function Diagram() {
   const [showForm, setShowForm] = useState(false);
   const [newLabel, setNewLabel] = useState('');
   const [selectedIcon, setSelectedIcon] = useState('');
+  const [selectedEdge, setSelectedEdge] = useState(null);
+
 
   useEffect(() => {
     fetchDiagram().then((data) => {
@@ -80,6 +82,19 @@ function Diagram() {
     setSelectedNode(null);
   };
 
+  const onEdgeClick = (_, edge) => {
+    setSelectedEdge(edge);
+    setSelectedNode(null);
+  };
+
+  const handleDeleteEdge = () => {
+    if (!selectedEdge) return;
+
+    setEdges((eds) => eds.filter((e) => e.id !== selectedEdge.id));
+    toast.error(`🗑️ Edge "${selectedEdge.id}" deleted`);
+    setSelectedEdge(null);
+  };
+
   const onConnect = useCallback(
     (params) => setEdges((eds) => addEdge({ ...params, animated: true }, eds)),
     [setEdges]
@@ -107,6 +122,7 @@ function Diagram() {
         <button onClick={handleSave} className="btn">💾 Save</button>
         <button onClick={handleAddNode} className="btn" style={{ marginLeft: 8 }}>➕ Add Node</button>
         <button onClick={handleDeleteNode} className="btn" style={{ marginLeft: 8 }} disabled={!selectedNode}>🗑️ Delete Node</button>
+        <button onClick={handleDeleteEdge} className="btn" style={{ marginLeft: 8 }} disabled={!selectedEdge}>🗑️ Delete Edge</button>
       </div>
 
       {showForm && (
@@ -176,6 +192,7 @@ function Diagram() {
         onConnect={onConnect}
         onNodeClick={onNodeClick}
         onNodeDoubleClick={handleNodeDoubleClick}
+        onEdgeClick={onEdgeClick}
         nodeTypes={nodeTypes}
         fitView
       >