From 8881b4937d947b9ac41b8c66d052cda39dda4d60 Mon Sep 17 00:00:00 2001 From: =?UTF-8?q?Y=C3=BBki=20Vachot?= Date: Sun, 12 May 2024 03:25:35 +0200 Subject: [PATCH] Add modal --- assets/network_graph_json.json | 6 +++-- index.html | 8 ++++++- script.js | 31 ++++++++++++++++++++++++-- styles.css | 40 +++++++++++++++++++++++++++++++++- 4 files changed, 79 insertions(+), 6 deletions(-) diff --git a/assets/network_graph_json.json b/assets/network_graph_json.json index f89cb51..00194c5 100644 --- a/assets/network_graph_json.json +++ b/assets/network_graph_json.json @@ -1462,11 +1462,13 @@ "tags": [ { "key": "Entity", - "image": "" + "size": 15, + "color": "#ff5733" }, { "key": "Table", - "image": "" + "size": 5, + "color": "#6c3e81" } ] } \ No newline at end of file diff --git a/index.html b/index.html index 1ae90bb..df5d69d 100644 --- a/index.html +++ b/index.html @@ -2,11 +2,17 @@ - Quick Sigma.js Example + Microsoft CDM - Network Graph Visualizer
+ \ No newline at end of file diff --git a/script.js b/script.js index 4944d19..1482366 100644 --- a/script.js +++ b/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}
Node Type: ${attributes.tag}
More info: Click here`; + + 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"; + } + } +} diff --git a/styles.css b/styles.css index 2681f62..0a19e76 100644 --- a/styles.css +++ b/styles.css @@ -9,4 +9,42 @@ html, body { width: 100vw; height: 100vh; background: white; -} \ No newline at end of file +} + +/* The Modal (background) */ +.modal { + display: none; /* Hidden by default */ + position: fixed; /* Stay in place */ + z-index: 1; /* Sit on top */ + left: 0; + top: 0; + width: 100%; /* Full width */ + height: 100%; /* Full height */ + overflow: auto; /* Enable scroll if needed */ + background-color: rgb(0,0,0); /* Fallback color */ + background-color: rgba(0,0,0,0.4); /* Black w/ opacity */ +} + +/* Modal Content */ +.modal-content { + background-color: #fefefe; + margin: 15% auto; /* 15% from the top and centered */ + padding: 20px; + border: 1px solid #888; + width: 80%; /* Could be more or less, depending on screen size */ +} + +/* The Close Button */ +.close { + color: #aaa; + float: right; + font-size: 28px; + font-weight: bold; +} + +.close:hover, +.close:focus { + color: black; + text-decoration: none; + cursor: pointer; +}