Add modal

script.js

@@ -13,7 +13,8 @@ async function main(){
         graph = addLayout(graph);
         console.log("Graph data:", network_graph_json);
         console.log("Graph object:", graph);
-        new Sigma(graph, document.getElementById('container'));
+        const sigmaInstance = new Sigma(graph, document.getElementById('container'));
+        add_modal(sigmaInstance, graph);
     } catch (error) {
         console.error('Failed to load or create the graph:', error);
     }
@@ -31,6 +32,8 @@ function createGraph(network_graph_json){
                 tag: node.tag,
                 URL: node.URL,
                 cluster: node.cluster,
+                size: network_graph_json.tags.find((el) => el.key === node.tag).size,
+                color: network_graph_json.tags.find((el) => el.key === node.tag).color,
             }
         );
     }
@@ -55,7 +58,7 @@ function addLayout(graph){
         iterations: 100,
         settings: {
             gravity: 0.5,
-            scalingRatio: 1.0
+            scalingRatio: 2.0
         }
     });
 
@@ -69,3 +72,27 @@ async function getNetworkGraphJson(){
     }
     return await response.json();
 }
+
+function add_modal(sigmaInstance, graph){
+    sigmaInstance.on('clickNode', ({node}) => {
+        const attributes = graph.getNodeAttributes(node);
+        const modal = document.getElementById('nodeModal');
+        const modalText = document.getElementById('modalText');
+
+        modalText.innerHTML = `Node Label: ${attributes.label}<br>Node Type: ${attributes.tag}<br>More info: <a href="${attributes.URL}">Click here</a>`;
+
+        modal.style.display = "block";
+    });
+
+    const close = document.getElementsByClassName("close")[0];
+    close.onclick = function() {
+        const modal = document.getElementById('nodeModal');
+        modal.style.display = "none";
+    }
+    window.onclick = function(event) {
+        const modal = document.getElementById('nodeModal');
+        if (event.target == modal) {
+            modal.style.display = "none";
+        }
+    }
+}