Add delete button and prompt to set the icon

frontend/src/components/Diagram.jsx

@@ -17,6 +17,7 @@ const nodeTypes = {
 function Diagram() {
   const [nodes, setNodes, onNodesChange] = useNodesState([]);
   const [edges, setEdges, onEdgesChange] = useEdgesState([]);
+  const [selectedNode, setSelectedNode] = useState(null);
 
   useEffect(() => {
     fetchDiagram().then((data) => {
@@ -44,18 +45,26 @@ function Diagram() {
 
   const handleAddNode = () => {
     const id = (nodes.length + 1).toString();
+    const icon = prompt('Enter icon URL:', 'https://s3.dvirlabs.com/lab-icons/default.svg') || 'https://s3.dvirlabs.com/lab-icons/default.svg';
+    const label = prompt('Enter label:', `Node ${id}`) || `Node ${id}`;
+
     const newNode = {
       id,
       type: 'custom',
-      data: {
-        label: `Node ${id}`,
-        icon: 'https://s3.dvirlabs.com/lab-icons/default.svg',
-      },
+      data: { label, icon },
       position: { x: Math.random() * 400, y: Math.random() * 300 },
     };
+
     setNodes((nds) => [...nds, newNode]);
   };
 
+  const handleDeleteNode = () => {
+    if (!selectedNode) return;
+    setNodes((nds) => nds.filter((n) => n.id !== selectedNode.id));
+    setEdges((eds) => eds.filter((e) => e.source !== selectedNode.id && e.target !== selectedNode.id));
+    setSelectedNode(null);
+  };
+
   const onConnect = useCallback(
     (params) => setEdges((eds) => addEdge({ ...params, animated: true }, eds)),
     [setEdges]
@@ -72,11 +81,16 @@ function Diagram() {
     }
   };
 
+  const onNodeClick = (_, node) => {
+    setSelectedNode(node);
+  };
+
   return (
     <div style={{ width: '100vw', height: '100vh' }}>
       <div style={{ position: 'absolute', zIndex: 10, right: 10, top: 10 }}>
         <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>
       </div>
 
       <ReactFlow
@@ -85,6 +99,7 @@ function Diagram() {
         onNodesChange={onNodesChange}
         onEdgesChange={onEdgesChange}
         onConnect={onConnect}
+        onNodeClick={onNodeClick}
         onNodeDoubleClick={handleNodeDoubleClick}
         nodeTypes={nodeTypes}
         fitView