Add button to remove edge

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)
+if __name__ == "__main__":
+    uvicorn.run(app, host="0.0.0.0", port=8001)

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": []
 }

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
       >