yvachot/MicrosoftCDM-NetworkVisualizer
1
0
Fork 0
Code Issues Pull requests Projects Releases Packages Wiki Activity Actions

Add modal

Browse source
This commit is contained in:
Yûki VACHOT 2024-05-12 03:25:35 +02:00
parent 6e3b4850a1
commit 8881b4937d
4 changed files with 79 additions and 6 deletions
Download patch file Download diff file Expand all files Collapse all files

6
assets/network_graph_json.json
View file

@ -1462,11 +1462,13 @@
"tags": [ "tags": [
{ {
"key": "Entity", "key": "Entity",
"image": "" "size": 15,
"color": "#ff5733"
}, },
{ {
"key": "Table", "key": "Table",
"image": "" "size": 5,
"color": "#6c3e81"
} }
] ]
} }

8
index.html
View file

@ -2,11 +2,17 @@
<html lang="en"> <html lang="en">
<head> <head>
<meta charset="UTF-8"/> <meta charset="UTF-8"/>
<title>Quick Sigma.js Example</title> <title>Microsoft CDM - Network Graph Visualizer</title>
<link rel="stylesheet" href="styles.css"/> <link rel="stylesheet" href="styles.css"/>
</head> </head>
<body> <body>
<div id="container"></div> <div id="container"></div>
<div id="nodeModal" class="modal">
<div class="modal-content">
<span class="close">&times;</span>
<p id="modalText">Some text in the Modal..</p>
</div>
</div>
<script type="module" src="script.js"></script> <script type="module" src="script.js"></script>
</body> </body>
</html> </html>

31
script.js
View file

@ -13,7 +13,8 @@ async function main(){
graph = addLayout(graph); graph = addLayout(graph);
console.log("Graph data:", network_graph_json); console.log("Graph data:", network_graph_json);
console.log("Graph object:", graph); 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) { } catch (error) {
console.error('Failed to load or create the graph:', error); console.error('Failed to load or create the graph:', error);
} }
@ -31,6 +32,8 @@ function createGraph(network_graph_json){
tag: node.tag, tag: node.tag,
URL: node.URL, URL: node.URL,
cluster: node.cluster, 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, iterations: 100,
settings: { settings: {
gravity: 0.5, gravity: 0.5,
scalingRatio: 1.0 scalingRatio: 2.0
} }
}); });
@ -69,3 +72,27 @@ async function getNetworkGraphJson(){
} }
return await response.json(); 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";
}
}
}

40
styles.css
View file

@ -9,4 +9,42 @@ html, body {
width: 100vw; width: 100vw;
height: 100vh; height: 100vh;
background: white; background: white;
} }
/* 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;
}