Add error handling and update styles

script.js

@@ -24,46 +24,109 @@ let network = new vis.Network(container, data, options);
 
 // Function to add a node
 function addNode() {
-   let nodeName = document.getElementById('node-name').value;
-   if (nodeName) {
-       nodes.add({ id: nodeName, label: nodeName });
-       document.getElementById('node-name').value = '';
-   }
+    let nodeName = document.getElementById('node-name').value.trim();
+    if (nodeName) {
+        if (!nodes.get(nodeName)) {
+            nodes.add({ id: nodeName, label: nodeName });
+            document.getElementById('node-name').value = '';
+        } else {
+            alert('A node with this name already exists!');
+        }
+    } else {
+        alert('Please enter a node name!');
+    }
 }
 
 // Function to add an edge
 function addEdge() {
-   let fromNode = document.getElementById('edge-from').value;
-   let toNode = document.getElementById('edge-to').value;
-   if (fromNode && toNode) {
-       edges.add({ from: fromNode, to: toNode });
-       document.getElementById('edge-from').value = '';
-       document.getElementById('edge-to').value = '';
-   }
+    let fromNode = document.getElementById('edge-from').value.trim();
+    let toNode = document.getElementById('edge-to').value.trim();
+    if (fromNode && toNode) {
+        if (nodes.get(fromNode) && nodes.get(toNode)) {
+            edges.add({ from: fromNode, to: toNode });
+            document.getElementById('edge-from').value = '';
+            document.getElementById('edge-to').value = '';
+        } else {
+            alert('One or both of the specified nodes do not exist!');
+        }
+    } else {
+        alert('Please enter both from and to node names!');
+    }
 }
 
 // Function to rename a node
 function renameNode() {
-   let oldName = document.getElementById('rename-old').value;
-   let newName = document.getElementById('rename-new').value;
-   if (oldName && newName) {
-       nodes.update({ id: oldName, label: newName });
-       document.getElementById('rename-old').value = '';
-       document.getElementById('rename-new').value = '';
-   }
+    let oldName = document.getElementById('rename-old').value.trim();
+    let newName = document.getElementById('rename-new').value.trim();
+    if (oldName && newName) {
+        if (nodes.get(oldName)) {
+            if (!nodes.get(newName)) {
+                nodes.update({ id: oldName, label: newName });
+                edges.forEach((edge) => {
+                    if (edge.from === oldName) {
+                        edges.update({ id: edge.id, from: newName });
+                    }
+                    if (edge.to === oldName) {
+                        edges.update({ id: edge.id, to: newName });
+                    }
+                });
+                document.getElementById('rename-old').value = '';
+                document.getElementById('rename-new').value = '';
+            } else {
+                alert('A node with the new name already exists!');
+            }
+        } else {
+            alert('The node to rename does not exist!');
+        }
+    } else {
+        alert('Please enter both old and new node names!');
+    }
 }
 
 // Function to remove a node
 function removeNode() {
-   let nodeName = document.getElementById('remove-node').value;
-   if (nodeName) {
-       nodes.remove(nodeName);
-       document.getElementById('remove-node').value = '';
-   }
+    let nodeName = document.getElementById('remove-node').value.trim();
+    if (nodeName) {
+        if (nodes.get(nodeName)) {
+            nodes.remove(nodeName);
+            document.getElementById('remove-node').value = '';
+        } else {
+            alert('The node to remove does not exist!');
+        }
+    } else {
+        alert('Please enter a node name to remove!');
+    }
+}
+
+// Function to save the current graph
+function saveGraph() {
+    let data = {
+        nodes: nodes.get(),
+        edges: edges.get()
+    };
+    localStorage.setItem('savedGraph', JSON.stringify(data));
+    alert('Graph saved!');
+}
+
+// Function to load a saved graph
+function loadGraph() {
+    let savedData = localStorage.getItem('savedGraph');
+    if (savedData) {
+        let data = JSON.parse(savedData);
+        nodes.clear();
+        edges.clear();
+        nodes.add(data.nodes);
+        edges.add(data.edges);
+        alert('Graph loaded!');
+    } else {
+        alert('No saved graph found!');
+    }
 }
 
 // Add event listeners
 document.getElementById('add-node').addEventListener('click', addNode);
 document.getElementById('add-edge').addEventListener('click', addEdge);
 document.getElementById('rename-node').addEventListener('click', renameNode);
 document.getElementById('remove-node-btn').addEventListener('click', removeNode);
+document.getElementById('save-graph').addEventListener('click', saveGraph);
+document.getElementById('load-graph').addEventListener('click', loadGraph);

styles.css

@@ -1,20 +1,67 @@
+:root {
+    --primary-color: #3498db;
+    --secondary-color: #2ecc71;
+    --background-color: #ecf0f1;
+    --text-color: #2c3e50;
+}
+
 body {
-   font-family: Arial, sans-serif;
-   margin: 0;
-   padding: 20px;
+    font-family: Arial, sans-serif;
+    margin: 0;
+    padding: 20px;
+    background-color: var(--background-color);
+    color: var(--text-color);
+}
+
+header {
+    text-align: center;
+    margin-bottom: 20px;
 }
 
 #graph-container {
-   width: 100%;
-   height: 600px;
-   border: 1px solid #ccc;
+    width: 100%;
+    height: 600px;
+    border: 1px solid #ccc;
+    margin-bottom: 20px;
 }
 
 #controls {
-   margin-top: 20px;
+    display: flex;
+    flex-wrap: wrap;
+    gap: 10px;
+    margin-bottom: 20px;
+}
+
+label {
+    display: flex;
+    flex-direction: column;
+    font-weight: bold;
 }
 
 input, button {
-   margin: 5px;
-   padding: 5px;
+    padding: 10px;
+    font-size: 16px;
+}
+
+button {
+    background-color: var(--primary-color);
+    color: white;
+    border: none;
+    cursor: pointer;
+    transition: background-color 0.3s;
+}
+
+button:hover {
+    background-color: var(--secondary-color);
+}
+
+footer {
+    text-align: center;
+    margin-top: 20px;
+}
+
+@media (max-width: 600px) {
+    #controls {
+        flex-direction: column;
+    }
 }