Increase the size of select diagram and add .gitignore to backend

Reviewed-on: #6

.woodpecker.yaml

@@ -9,19 +9,17 @@ steps:
         include: [ frontend/** ]
     settings:
       registry: harbor.dvirlabs.com
-      repo: my-apps/labmap-frontend
+      repo: my-apps/${CI_REPO_NAME}-frontend
       dockerfile: frontend/Dockerfile
       context: frontend
       tags:
         - latest
-        - ${CI_COMMIT_SHA:0:7}
+        - ${CI_COMMIT_TAG:-${CI_COMMIT_BRANCH}-${CI_COMMIT_SHA:0:7}}
-        - ${CI_COMMIT_BRANCH}-${CI_COMMIT_SHA:0:7}
       username:
         from_secret: DOCKER_USERNAME
       password:
         from_secret: DOCKER_PASSWORD
 
-
   build-backend:
     name: Build & Push Backend
     image: woodpeckerci/plugin-kaniko
@@ -32,13 +30,12 @@ steps:
         include: [ backend/** ]
     settings:
       registry: harbor.dvirlabs.com
-      repo: my-apps/labmap-backend
+      repo: my-apps/${CI_REPO_NAME}-backend
       dockerfile: backend/Dockerfile
       context: backend
       tags:
         - latest
-        - ${CI_COMMIT_SHA:0:7}
+        - ${CI_COMMIT_TAG:-${CI_COMMIT_BRANCH}-${CI_COMMIT_SHA:0:7}}
-        - ${CI_COMMIT_BRANCH}-${CI_COMMIT_SHA:0:7}
       username:
         from_secret: DOCKER_USERNAME
       password:
@@ -64,16 +61,12 @@ steps:
       - git clone "https://$${GIT_USERNAME}:$${GIT_TOKEN}@git.dvirlabs.com/dvirlabs/my-apps.git"
       - cd my-apps
       - |
-        if [ "$CI_COMMIT_BRANCH" = "develop" ]; then
+        TAG="${CI_COMMIT_BRANCH}-${CI_COMMIT_SHA:0:7}"
-          TAG="develop-${CI_BUILD_NUMBER}"
-        else
-          TAG="${CI_COMMIT_SHA:0:7}"
-        fi
         echo "💡 Setting frontend tag to: $TAG"
-        yq -i ".frontend.tag = \"$TAG\"" manifests/labmap/values.yaml
+        yq -i ".frontend.tag = \"$TAG\"" manifests/${CI_REPO_NAME}/values.yaml
-        git add manifests/labmap/values.yaml
+        git add manifests/${CI_REPO_NAME}/values.yaml
         git commit -m "frontend: update tag to $TAG" || echo "No changes"
-        git push origin master
+        git push origin HEAD
 
   update-values-backend:
     name: Update backend tag in values.yaml
@@ -92,16 +85,29 @@ steps:
       - apk add --no-cache git yq
       - git config --global user.name "woodpecker-bot"
       - git config --global user.email "ci@dvirlabs.com"
-      - git clone "https://$${GIT_USERNAME}:$${GIT_TOKEN}@git.dvirlabs.com/dvirlabs/my-apps.git"
       - cd my-apps
       - |
-        if [ "$CI_COMMIT_BRANCH" = "develop" ]; then
+        TAG="${CI_COMMIT_BRANCH}-${CI_COMMIT_SHA:0:7}"
-          TAG="develop-${CI_BUILD_NUMBER}"
-        else
-          TAG="${CI_COMMIT_SHA:0:7}"
-        fi
         echo "💡 Setting backend tag to: $TAG"
-        yq -i ".backend.tag = \"$TAG\"" manifests/labmap/values.yaml
+        yq -i ".backend.tag = \"$TAG\"" manifests/${CI_REPO_NAME}/values.yaml
-        git add manifests/labmap/values.yaml
+        git add manifests/${CI_REPO_NAME}/values.yaml
         git commit -m "backend: update tag to $TAG" || echo "No changes"
-        git push origin master
+        git push origin HEAD
+
+  trigger-gitops-via-push:
+    name: Trigger apps-gitops via Git push
+    image: alpine/git
+    environment:
+      GIT_USERNAME:
+        from_secret: GIT_USERNAME
+      GIT_TOKEN:
+        from_secret: GIT_TOKEN
+    commands: |
+      git config --global user.name "woodpecker-bot"
+      git config --global user.email "ci@dvirlabs.com"
+      git clone "https://$${GIT_USERNAME}:$${GIT_TOKEN}@git.dvirlabs.com/dvirlabs/apps-gitops.git"
+      cd apps-gitops
+      echo "# trigger at $(date) by $${CI_REPO_NAME}" >> .trigger
+      git add .trigger
+      git commit -m "ci: trigger apps-gitops build" || echo "no changes"
+      git push origin HEAD

backend/.gitignore

@@ -0,0 +1 @@
+digrams/

backend/diagrams/diagram_Exposed services.json

@@ -0,0 +1,4 @@
+{
+  "nodes": [],
+  "edges": []
+}

backend/main.py

@@ -3,57 +3,71 @@ from fastapi.middleware.cors import CORSMiddleware
 import uvicorn
 from models import DiagramItem
 import json
-import os
 import requests
 import xml.etree.ElementTree as ET
 from typing import List, Dict
+from pathlib import Path
 
 app = FastAPI()
 
 app.add_middleware(
     CORSMiddleware,
-    allow_origins=["*"],  # בהמשך תוכל לצמצם לכתובת הפרונטאנד
+    allow_origins=["*"],
-    allow_credentials=True,
     allow_methods=["*"],
     allow_headers=["*"],
 )
 
 BASE_URL = "https://s3.dvirlabs.com/lab-icons"
 S3_INDEX_URL = "https://s3.dvirlabs.com/lab-icons/?list-type=2"
-DATA_FILE = "diagram.json"
+
+BASE_DIR = Path(__file__).parent.resolve()
+DATA_DIR = BASE_DIR / "diagrams"
+DATA_DIR.mkdir(exist_ok=True)
 
 @app.get("/")
 def root():
     return {"message": "Check if the server is running"}
 
 @app.get("/diagram/fetch")
-def fetch_diagram():
+def fetch_diagram(name: str):
-    if not os.path.exists(DATA_FILE):
+    path = DATA_DIR / f"diagram_{name}.json"
+    if not path.exists():
         return {"nodes": [], "edges": []}
-    with open(DATA_FILE, "r") as f:
+    with open(path, "r") as f:
         return json.load(f)
 
-
 @app.post("/diagram/save")
-def save_diagram(payload: DiagramItem):
+def save_diagram(name: str, payload: DiagramItem):
+    if not name:
+        raise HTTPException(status_code=400, detail="Missing diagram name")
     try:
-        with open(DATA_FILE, "w") as f:
+        path = DATA_DIR / f"diagram_{name}.json"
+        with open(path, "w") as f:
             json.dump(payload.dict(), f, indent=2)
         return {"status": "ok"}
     except Exception as e:
         raise HTTPException(status_code=500, detail=str(e))
 
+@app.get("/diagram/list")
+def list_diagrams():
+    diagrams = []
+    for file in DATA_DIR.glob("diagram_*.json"):
+        diagrams.append(file.stem.replace("diagram_", ""))
+    return {"diagrams": diagrams}
+
+@app.delete("/diagram/delete")
+def delete_diagram(name: str):
+    path = DATA_DIR / f"diagram_{name}.json"
+    if not path.exists():
+        raise HTTPException(status_code=404, detail="Diagram not found")
+    try:
+        path.unlink()
+        return {"status": "deleted"}
+    except Exception as e:
+        raise HTTPException(status_code=500, detail=str(e))
 
 @app.get("/icons", response_model=Dict[str, List[str]])
 def list_icons():
-    """
-    Returns a dictionary of available icons grouped by folder (category).
-    Example:
-    {
-        "dev-tools": [ "https://s3.dvirlabs.com/lab-icons/dev-tools/gitea.svg", ... ],
-        "observability": [ ... ]
-    }
-    """
     resp = requests.get(S3_INDEX_URL)
     if resp.status_code != 200:
         raise HTTPException(status_code=500, detail="Failed to fetch icon list from S3")
@@ -80,6 +94,5 @@ def list_icons():
 
     return categories
 
-
 if __name__ == "__main__":
-    uvicorn.run(app, host="0.0.0.0", port=8000)
+    uvicorn.run("main:app", host="0.0.0.0", port=8000, reload=True)

diagram.json

@@ -1,36 +0,0 @@
-{
-  "nodes": [
-    {
-      "id": "1",
-      "type": "custom",
-      "data": {
-        "label": "ArgoCD",
-        "icon": "https://s3.dvirlabs.com/lab-icons/argocd.svg"
-      },
-      "position": {
-        "x": 100,
-        "y": 100
-      }
-    },
-    {
-      "id": "2",
-      "type": "custom",
-      "data": {
-        "label": "Gitea",
-        "icon": "https://s3.dvirlabs.com/lab-icons/gitea.svg"
-      },
-      "position": {
-        "x": 300,
-        "y": 200
-      }
-    }
-  ],
-  "edges": [
-    {
-      "id": "e1-2",
-      "source": "1",
-      "target": "2",
-      "animated": true
-    }
-  ]
-}

frontend/.gitignore

@@ -22,3 +22,6 @@ dist-ssr
 *.njsproj
 *.sln
 *.sw?
+
+# Custom
+public/env.js

frontend/10-generate-env.sh

@@ -0,0 +1,4 @@
+#!/bin/sh
+
+# Generate env.js from the template
+envsubst < /etc/env/env.js.template > /usr/share/nginx/html/env.js

frontend/Dockerfile

@@ -3,7 +3,6 @@ FROM node:20 AS builder
 
 WORKDIR /app
 COPY . .
-
 RUN npm install
 RUN npm run build
 
@@ -16,15 +15,15 @@ RUN apk add --no-cache dos2unix
 # Copy built app
 COPY --from=builder /app/dist /usr/share/nginx/html
 
-# Copy nginx config
+# ✅ Copy env.js.template
+COPY public/env.js.template /etc/env/env.js.template
+
+# ✅ Copy nginx config
 COPY nginx.conf /etc/nginx/conf.d/default.conf
 
-# Copy runtime env template + entrypoint
+# ✅ Add env generator script to nginx entrypoint hook
-COPY public/env.js.template /usr/share/nginx/html/env.js.template
+COPY 10-generate-env.sh /docker-entrypoint.d/10-generate-env.sh
-COPY docker-entrypoint.sh /entrypoint.sh
+RUN dos2unix /docker-entrypoint.d/10-generate-env.sh && chmod +x /docker-entrypoint.d/10-generate-env.sh
-
-# Normalize line endings and set permissions
-RUN dos2unix /entrypoint.sh && chmod +x /entrypoint.sh
 
 EXPOSE 80
-ENTRYPOINT ["/entrypoint.sh"]
+CMD ["nginx", "-g", "daemon off;"]

frontend/docker-entrypoint.sh

@@ -1,9 +0,0 @@
-#!/bin/sh
-
-cat <<EOF > /usr/share/nginx/html/env.js
-window.ENV = {
-  API_BASE: "${API_BASE:-http://localhost:8000}"
-};
-EOF
-
-exec nginx -g "daemon off;"

frontend/index.html

@@ -2,10 +2,10 @@
 <html lang="en">
   <head>
     <meta charset="UTF-8" />
-    <link rel="icon" type="image/svg+xml" href="/vite.svg" />
+    <link rel="icon" type="image/svg+xml" href="/labmap.svg" />
     <meta name="viewport" content="width=device-width, initial-scale=1.0" />
-    <script src="%PUBLIC_URL%/env.js"></script>
+    <script src="/env.js"></script>
-    <title>Vite + React</title>
+    <title>Labmap</title>
   </head>
   <body>
     <div id="root"></div>

frontend/package.json

@@ -10,8 +10,11 @@
     "preview": "vite preview"
   },
   "dependencies": {
+    "prop-types": "^15.8.1",
     "react": "^19.1.0",
+    "react-confirm-alert": "^3.0.6",
     "react-dom": "^19.1.0",
+    "react-toastify": "^11.0.5",
     "reactflow": "^11.11.4"
   },
   "devDependencies": {

frontend/src/App.jsx

@@ -1,7 +1,14 @@
 import Diagram from './components/Diagram';
+import { ToastContainer } from 'react-toastify';
+import 'react-toastify/dist/ReactToastify.css';
 
 function App() {
-  return <Diagram />;
+  return (
+    <>
+      <Diagram />
+      <ToastContainer position="bottom-right" autoClose={3000} />
+    </>
+  );
 }
 
 export default App;

frontend/src/assets/default.svg

@@ -0,0 +1,4 @@
+<svg xmlns="http://www.w3.org/2000/svg" width="64" height="64" viewBox="0 0 24 24" fill="none" stroke="gray" stroke-width="2" stroke-linecap="round" stroke-linejoin="round">
+  <rect x="3" y="3" width="18" height="18" rx="2" ry="2" />
+  <path d="M3 9h18M9 21V9" />
+</svg>

frontend/src/components/CustomNode.jsx

@@ -3,31 +3,61 @@ import { Handle, Position } from 'reactflow';
 function CustomNode({ data }) {
   const icon = data.icon || 'https://s3.dvirlabs.com/lab-icons/default.svg';
 
+  const handleSize = 5;
+
+  const visibleHandleStyle = {
+    background: '#1976d2',
+    width: handleSize,
+    height: handleSize,
+    borderRadius: '50%',
+    zIndex: 2,
+  };
+
+  const invisibleHandleStyle = {
+    background: 'transparent',
+    width: handleSize,
+    height: handleSize,
+    borderRadius: '50%',
+    zIndex: 1,
+  };
+
   return (
     <div style={{
       background: 'transparent',
       border: '2px solid #1976d2',
       borderRadius: 6,
-      padding: 10,
       textAlign: 'center',
-      width: 80,
+      width: 100,
-      height: 40,
+      height: 100,
       boxShadow: '0 2px 6px rgba(0,0,0,0.2)',
       position: 'relative',
     }}>
-      {/* Handles - חובה */}
+      {/* === TOP === */}
-      <Handle type="target" position={Position.Top} />
+      <Handle id="source-top" type="source" position={Position.Top} style={{ ...visibleHandleStyle, top: -6 }} />
-      <Handle type="source" position={Position.Bottom} />
+      <Handle id="target-top" type="target" position={Position.Top} style={{ ...invisibleHandleStyle, top: -6 }} />
 
+      {/* === BOTTOM === */}
+      <Handle id="source-bottom" type="source" position={Position.Bottom} style={{ ...visibleHandleStyle, bottom: -6 }} />
+      <Handle id="target-bottom" type="target" position={Position.Bottom} style={{ ...invisibleHandleStyle, bottom: -6 }} />
+
+      {/* === LEFT === */}
+      <Handle id="source-left" type="source" position={Position.Left} style={{ ...visibleHandleStyle, left: -6, top: 30 }} />
+      <Handle id="target-left" type="target" position={Position.Left} style={{ ...invisibleHandleStyle, left: -6, top: 30 }} />
+
+      {/* === RIGHT === */}
+      <Handle id="source-right" type="source" position={Position.Right} style={{ ...visibleHandleStyle, right: -6, top: 30 }} />
+      <Handle id="target-right" type="target" position={Position.Right} style={{ ...invisibleHandleStyle, right: -6, top: 30 }} />
+
+      {/* === ICON + LABEL === */}
       <img
         src={icon}
         alt={data.label}
         onError={(e) => {
           e.target.src = 'https://s3.dvirlabs.com/lab-icons/default.svg';
         }}
-        style={{ width: 40, height: 40, marginBottom: 6 }}
+        style={{ width: 40, height: 40, marginTop: 6 }}
       />
-      <div style={{ fontWeight: 'bold' }}>{data.label}</div>
+      <div style={{ fontWeight: 'bold', fontSize: 10 }}>{data.label}</div>
     </div>
   );
 }

frontend/src/components/Diagram.jsx

@@ -1,4 +1,3 @@
-// src/components/Diagram.jsx
 import { useEffect, useState, useCallback } from 'react';
 import ReactFlow, {
   addEdge,
@@ -8,48 +7,91 @@ import ReactFlow, {
   useEdgesState,
 } from 'reactflow';
 import 'reactflow/dist/style.css';
-import { fetchDiagram, saveDiagram } from '../services/api';
+import { confirmAlert } from 'react-confirm-alert';
+import 'react-confirm-alert/src/react-confirm-alert.css';
+import '../styles/ConfirmDialog.css';
+import {
+  fetchDiagramByName,
+  saveDiagramByName,
+  listDiagrams,
+  deleteDiagramByName,
+} from '../services/api';
 import CustomNode from './CustomNode';
 import IconSelector from './IconSelector';
+import { toast } from 'react-toastify';
+import RouterNode from './RouterNode';
 
 const nodeTypes = {
   custom: CustomNode,
+  router: RouterNode,
 };
 
 function Diagram() {
   const [nodes, setNodes, onNodesChange] = useNodesState([]);
   const [edges, setEdges, onEdgesChange] = useEdgesState([]);
   const [selectedNode, setSelectedNode] = useState(null);
+  const [selectedEdge, setSelectedEdge] = useState(null);
   const [showForm, setShowForm] = useState(false);
   const [newLabel, setNewLabel] = useState('');
+  const [newType, setNewType] = useState('custom');
   const [selectedIcon, setSelectedIcon] = useState('');
+  const [diagramName, setDiagramName] = useState(null);
+  const [diagramList, setDiagramList] = useState([]);
+  const isIframe = window.self !== window.top;
 
   useEffect(() => {
-    fetchDiagram().then((data) => {
+    const load = async () => {
+      try {
+        const { diagrams } = await listDiagrams();
+        setDiagramList(diagrams);
+        if (diagrams.length > 0) {
+          setDiagramName(diagrams[0]);
+        } else {
+          setDiagramName("default"); // <- ensure we use this name
+        }
+      } catch (err) {
+        console.error(err);
+        setDiagramList([]);
+        setDiagramName("default"); // <- fallback to default always
+      }
+    };
+    load();
+  }, []);
+
+
+  useEffect(() => {
+    const loadDiagram = async () => {
+      if (!diagramName) {
+        setNodes([]);
+        setEdges([]);
+        return;
+      }
+      try {
+        const data = await fetchDiagramByName(diagramName);
         setNodes(data.nodes || []);
         const sanitizedEdges = (data.edges || []).map(({ id, source, target, animated }) => ({
-        id,
+          id, source, target, animated: !!animated
-        source,
-        target,
-        animated: !!animated,
         }));
         setEdges(sanitizedEdges);
-    });
+        setSelectedNode(null);
-  }, [setNodes, setEdges]);
+        setSelectedEdge(null);
+      } catch (err) {
+        console.error(err);
+        toast.error(`❌ Failed to load diagram "${diagramName}"`);
+        setNodes([]);
+        setEdges([]);
+      }
+    };
+    loadDiagram();
+  }, [diagramName]);
 
   const handleSave = async () => {
+    if (!diagramName) return;
     const cleanedEdges = edges.map(({ id, source, target, animated }) => ({
-      id,
+      id, source, target, animated: !!animated
-      source,
-      target,
-      animated: !!animated,
     }));
-    await saveDiagram({ nodes, edges: cleanedEdges });
+    await saveDiagramByName(diagramName, { nodes, edges: cleanedEdges });
-    alert('Diagram saved!');
+    toast.success(`✅ Diagram "${diagramName}" saved!`);
-  };
-
-  const handleAddNode = () => {
-    setShowForm(true);
   };
 
   const handleSubmitNode = () => {
@@ -59,21 +101,24 @@ function Diagram() {
 
     const newNode = {
       id,
-      type: 'custom',
+      type: newType,
-      data: { label, icon },
+      data: newType === 'custom' ? { label, icon } : { label },
       position: { x: Math.random() * 400, y: Math.random() * 300 },
     };
 
     setNodes((nds) => [...nds, newNode]);
+    toast.success(`🟢 Node "${label}" added`);
     setShowForm(false);
     setNewLabel('');
     setSelectedIcon('');
+    setNewType('custom');
   };
 
   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));
+    toast.error(`🗑️ Node "${selectedNode.data.label}" deleted`);
     setSelectedNode(null);
   };
 
@@ -82,7 +127,21 @@ function Diagram() {
     [setEdges]
   );
 
-  const handleNodeDoubleClick = (event, node) => {
+  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 onNodeClick = (_, node) => setSelectedNode(node);
+
+  const handleNodeDoubleClick = (_, node) => {
     const newLabel = prompt('Enter new name:', node.data.label);
     if (newLabel !== null) {
       setNodes((nds) =>
@@ -90,76 +149,149 @@ function Diagram() {
           n.id === node.id ? { ...n, data: { ...n.data, label: newLabel } } : n
         )
       );
+      toast.info(`✏️ Node renamed to "${newLabel}"`);
     }
   };
 
-  const onNodeClick = (_, node) => {
+  const handleDeleteDiagram = async () => {
-    setSelectedNode(node);
+    if (!diagramName || diagramName === 'default') {
+      toast.warn("❌ Cannot delete 'default' diagram or nothing selected.");
+      return;
+    }
+
+    confirmAlert({
+      title: 'Are you sure?',
+      message: `Delete "${diagramName}"?`,
+      buttons: [
+        {
+          label: 'Yes',
+          onClick: async () => {
+            try {
+              await deleteDiagramByName(diagramName);
+              const updatedList = diagramList.filter(name => name !== diagramName);
+              setDiagramList(updatedList);
+              const newSelected = updatedList[0] || null;
+              setDiagramName(newSelected);
+              setNodes([]);
+              setEdges([]);
+              toast.success(`🗑️ Diagram "${diagramName}" deleted`);
+            } catch (err) {
+              toast.error(`❌ Failed to delete diagram "${diagramName}"`);
+            }
+          }
+        },
+        {
+          label: 'No',
+          onClick: () => {} // do nothing
+        }
+      ]
+    });
   };
 
+
   return (
     <div style={{ width: '100vw', height: '100vh' }}>
-      <div style={{ position: 'absolute', zIndex: 10, right: 10, top: 10 }}>
+      <div style={{ position: 'absolute', zIndex: 10, right: 10, top: 10, display: 'flex', alignItems: 'center', gap: 10 }}>
-        <button onClick={handleSave} className="btn">💾 Save</button>
+        <div style={{ position: 'relative' }}>
-        <button onClick={handleAddNode} className="btn" style={{ marginLeft: 8 }}>➕ Add Node</button>
+          <select
-        <button onClick={handleDeleteNode} className="btn" style={{ marginLeft: 8 }} disabled={!selectedNode}>🗑️ Delete Node</button>
+            value={diagramName || ''}
+            onChange={(e) => setDiagramName(e.target.value)}
+            style={{
+              padding: '10px 16px',
+              height: '48px',
+              fontSize: '16px',
+              fontWeight: 'bold',
+              borderRadius: '12px',
+              border: 'none',
+              background: '#111',
+              color: 'white',
+              cursor: 'pointer',
+              appearance: 'none',
+              width: 230,
+              paddingRight: 32,
+            }}
+          >
+            {diagramList.map((name) => (
+              <option key={name} value={name}>
+                📌 {name}
+              </option>
+            ))}
+          </select>
+          <div style={{ position: 'absolute', right: 12, top: '50%', transform: 'translateY(-50%)', pointerEvents: 'none', color: 'white' }}>
+            ⏷
+          </div>
+        </div>
+
+        {!isIframe && (
+          <>
+            <button className="btn" style={{ background: '#d28519' }} onClick={async () => {
+              const newName = prompt("Enter new diagram name:");
+              if (!newName) return;
+
+              if (diagramList.includes(newName)) {
+                toast.warn("❗ Diagram already exists.");
+                return;
+              }
+
+              try {
+                // Save current content (only if in 'default')
+                if (diagramName === 'default' && (nodes.length > 0 || edges.length > 0)) {
+                  const cleanedEdges = edges.map(({ id, source, target, animated }) => ({
+                    id, source, target, animated: !!animated
+                  }));
+                  await saveDiagramByName(newName, { nodes, edges: cleanedEdges });
+                  toast.success(`📁 Migrated content from 'default' to '${newName}'`);
+                }
+
+                setDiagramList((prev) => [...prev, newName]);
+                setDiagramName(newName); // <- only after saving
+              } catch (err) {
+                toast.error(`❌ Failed to migrate default diagram`);
+                console.error(err);
+              }
+            }}>
+              🆕 New Diagram
+            </button>
+
+
+            {diagramName !== 'default' && (
+              <button className="btn" onClick={handleSave} style={{ background: 'green' }}>💾 Save</button>
+              )}
+            <button className="btn" onClick={() => setShowForm(true)} style={{ background: 'blue' }}>➕ Add Node</button>
+            <button className="btn" onClick={handleDeleteNode} style={{ color: 'white', background: selectedNode ? '#b81a1a' : '#424040' }} disabled={!selectedNode}>🗑️ Delete Node</button>
+            <button className="btn" onClick={handleDeleteEdge} style={{ color: 'white', background: selectedEdge ? '#b81a1a' : '#424040' }} disabled={!selectedEdge}>🗑️ Delete Edge</button>
+            <button className="btn" onClick={handleDeleteDiagram} style={{ background: 'red' }}>🗑️ Delete Diagram</button>
+          </>
+        )}
       </div>
 
       {showForm && (
-        <div
+        <div style={{ position: 'absolute', zIndex: 20, right: 10, top: 80, background: '#13141a', padding: '16px', borderRadius: '12px', boxShadow: '0 4px 8px rgba(0,0,0,0.15)', width: 280 }}>
-          style={{
+          <h4 style={{ color: 'white', marginBottom: 12 }}>🧩 Add New Node</h4>
-            position: 'absolute',
-            zIndex: 20,
-            right: 10,
-            top: 80,
-            background: '#e6f0fa',
-            padding: '16px',
-            borderRadius: '12px',
-            boxShadow: '0 4px 8px rgba(0,0,0,0.15)',
-            width: 280,
-          }}
-        >
-          <h4
-            style={{
-              color: '#125ea8',
-              marginBottom: 12,
-              fontSize: 18,
-              display: 'flex',
-              alignItems: 'center',
-              gap: 8,
-            }}
-          >
-            🧩 Add New Node
-          </h4>
 
-          <label style={{ fontWeight: 'bold', marginBottom: 4, display: 'block', color: '#333' }}>
+          <label style={{ fontWeight: 'bold', color: 'white' }}>Label:</label>
-            Label:
-          </label>
           <input
             type="text"
-            placeholder="Enter label"
             value={newLabel}
             onChange={(e) => setNewLabel(e.target.value)}
-            style={{
+            style={{ padding: '6px', width: '100%', borderRadius: 6, border: '1px solid #ccc', marginBottom: 12 }}
-              padding: '6px',
-              width: '100%',
-              borderRadius: 6,
-              border: '1px solid #ccc',
-              marginBottom: 12,
-            }}
           />
 
-          <IconSelector onSelect={setSelectedIcon} />
+          <label style={{ fontWeight: 'bold', color: 'white' }}>Type:</label>
+          <select
+            value={newType}
+            onChange={(e) => setNewType(e.target.value)}
+            style={{ padding: '6px', width: '100%', borderRadius: 6, border: '1px solid #ccc', marginBottom: 12 }}
+          >
+            <option value="custom">🧱 Custom</option>
+            <option value="router">📡 Router</option>
+          </select>
+
+          {newType === 'custom' && <IconSelector onSelect={setSelectedIcon} />}
 
           <div style={{ marginTop: 12 }}>
             <button className="btn" onClick={handleSubmitNode}>✅ Add</button>
-            <button
+            <button className="btn" style={{ marginLeft: 8, background: '#ccc', color: '#333' }} onClick={() => setShowForm(false)}>❌ Cancel</button>
-              className="btn"
-              style={{ marginLeft: 8, background: '#ccc', color: '#333' }}
-              onClick={() => setShowForm(false)}
-            >
-              ❌ Cancel
-            </button>
           </div>
         </div>
       )}
@@ -172,6 +304,11 @@ function Diagram() {
         onConnect={onConnect}
         onNodeClick={onNodeClick}
         onNodeDoubleClick={handleNodeDoubleClick}
+        onEdgeClick={onEdgeClick}
+        onPaneClick={() => {
+          setSelectedNode(null);
+          setSelectedEdge(null);
+        }}
         nodeTypes={nodeTypes}
         fitView
       >

frontend/src/components/IconSelector.jsx

@@ -25,7 +25,7 @@ function IconSelector({ onSelect }) {
   return (
     <div style={{ marginBottom: '1rem' }}>
       <div style={{ marginBottom: '0.5rem' }}>
-        <label style={{ fontWeight: 'bold', color: '#333' }}>Category:&nbsp;</label>
+        <label style={{ fontWeight: 'bold', color: 'white' }}>Category:&nbsp;</label>
         <select
           value={selectedCategory}
           onChange={handleCategoryChange}
@@ -47,7 +47,7 @@ function IconSelector({ onSelect }) {
 
       {selectedCategory && (
         <div>
-          <label style={{ fontWeight: 'bold' }}>Choose an icon:</label>
+          <label style={{ fontWeight: 'bold', color: 'white' }}>Choose an icon:</label>
           <div
             style={{
               display: 'grid',
@@ -81,7 +81,7 @@ function IconSelector({ onSelect }) {
             ))}
           </div>
           {selectedIcon && (
-            <p style={{ marginTop: 8, fontSize: 13 }}>
+            <p style={{ marginTop: 8, fontSize: 13, color: 'white' }}>
               Selected: <code>{selectedIcon.split('/').pop()}</code>
             </p>
           )}

frontend/src/components/RouterNode.jsx

@@ -0,0 +1,14 @@
+// components/RouterNode.js
+import { Handle, Position } from 'reactflow';
+
+function RouterNode({ data }) {
+  return (
+    <div style={{ border: '2px dashed #ff9800', borderRadius: 6, padding: 10, width: 100, textAlign: 'center' }}>
+      <Handle type="target" position={Position.Top} />
+      <div>📡 {data.label}</div>
+      <Handle type="source" position={Position.Bottom} />
+    </div>
+  );
+}
+
+export default RouterNode;

frontend/src/services/api.js

@@ -1,20 +1,39 @@
-const API_BASE = window?.ENV?.API_BASE || '';
+const API_BASE = window?.ENV?.API_BASE || "";
-
-export async function fetchDiagram() {
-  const res = await fetch(`${API_BASE}/diagram/fetch`);
-  return await res.json();
-}
-
-export async function saveDiagram(data) {
-  const res = await fetch(`${API_BASE}/diagram/save`, {
-    method: 'POST',
-    headers: { 'Content-Type': 'application/json' },
-    body: JSON.stringify(data),
-  });
-  return await res.json();
-}
 
 export async function fetchIconCategories() {
   const res = await fetch(`${API_BASE}/icons`);
+  if (!res.ok) {
+    throw new Error(`Failed to fetch icons: ${res.status}`);
+  }
+  return await res.json();
+}
+
+export async function listDiagrams() {
+  const res = await fetch(`${API_BASE}/diagram/list`);
+  if (!res.ok) throw new Error("Failed to list diagrams");
+  return await res.json();
+}
+
+export async function fetchDiagramByName(name) {
+  const res = await fetch(`${API_BASE}/diagram/fetch?name=${name}`);
+  if (!res.ok) throw new Error(`Failed to load diagram "${name}"`);
+  return await res.json();
+}
+
+export async function saveDiagramByName(name, data) {
+  const res = await fetch(`${API_BASE}/diagram/save?name=${name}`, {
+    method: "POST",
+    headers: { "Content-Type": "application/json" },
+    body: JSON.stringify(data),
+  });
+  if (!res.ok) throw new Error(`Failed to save diagram "${name}"`);
+  return await res.json();
+}
+
+export async function deleteDiagramByName(name) {
+  const res = await fetch(`${API_BASE}/diagram/delete?name=${name}`, {
+    method: "DELETE",
+  });
+  if (!res.ok) throw new Error(`Failed to delete diagram "${name}"`);
   return await res.json();
 }

frontend/src/styles/ConfirmDialog.css

@@ -0,0 +1,24 @@
+.react-confirm-alert-overlay {
+  background: rgba(0, 0, 0, 0.6); /* כהה ונעים לעין */
+  z-index: 1000;
+}
+
+.react-confirm-alert-body {
+  background-color: #e6e3e3;
+  color: #333;
+}
+
+.react-confirm-alert-button-group button {
+  margin: 0 10px;
+  padding: 8px 18px;
+  border: none;
+  border-radius: 6px;
+  font-weight: bold;
+  background-color: #333;
+  color: white;
+  cursor: pointer;
+}
+
+.react-confirm-alert-button-group button:hover {
+  background-color: #555;
+}

frontend/vite.config.js

@@ -1,7 +1,7 @@
-import { defineConfig } from 'vite'
+import { defineConfig } from 'vite';
-import react from '@vitejs/plugin-react-swc'
+import react from '@vitejs/plugin-react-swc';
 
-// https://vite.dev/config/
+// https://vitejs.dev/config/
 export default defineConfig({
   plugins: [react()],
-})
+});

labmap-chart/templates/frontend-deployment.yaml

@@ -19,4 +19,4 @@ spec:
             - containerPort: {{ .Values.frontend.port }}
           env:
             - name: API_BASE
-              value: "https://{{ .Values.backend.ingress.host }}"
+              value: {{ .Values.frontend.env.API_BASE | quote }}

labmap-chart/values.yaml

@@ -5,6 +5,8 @@ frontend:
   ingress:
     enabled: true
     host: labmap.dvirlabs.com
+  env:
+    API_BASE: "https://api-labmap.dvirlabs.com"
 
 backend:
   image: harbor.dvirlabs.com/my-apps/labmap-backend