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

Replace modal to drawer

Browse source
This commit is contained in:
Yûki VACHOT 2024-05-12 03:49:55 +02:00
parent 8881b4937d
commit 8f66d8663a
3 changed files with 28 additions and 32 deletions
Download patch file Download diff file Expand all files Collapse all files

6
index.html
View file

@ -7,10 +7,10 @@
</head> </head>
<body> <body>
<div id="container"></div> <div id="container"></div>
<div id="nodeModal" class="modal"> <div id="nodeDrawer" class="drawer">
<div class="modal-content"> <div class="drawer-content">
<span class="close">&times;</span> <span class="close">&times;</span>
<p id="modalText">Some text in the Modal..</p> <p id="drawerText">Node details will appear here...</p>
</div> </div>
</div> </div>
<script type="module" src="script.js"></script> <script type="module" src="script.js"></script>

23
script.js
View file

@ -14,7 +14,7 @@ async function main(){
console.log("Graph data:", network_graph_json); console.log("Graph data:", network_graph_json);
console.log("Graph object:", graph); console.log("Graph object:", graph);
const sigmaInstance = new Sigma(graph, document.getElementById('container')); const sigmaInstance = new Sigma(graph, document.getElementById('container'));
add_modal(sigmaInstance, graph); add_drawer(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);
} }
@ -73,26 +73,27 @@ async function getNetworkGraphJson(){
return await response.json(); return await response.json();
} }
function add_modal(sigmaInstance, graph){ function add_drawer(sigmaInstance, graph){
sigmaInstance.on('clickNode', ({node}) => { sigmaInstance.on('clickNode', ({node}) => {
const attributes = graph.getNodeAttributes(node); const attributes = graph.getNodeAttributes(node);
const modal = document.getElementById('nodeModal'); const drawer = document.getElementById('nodeDrawer');
const modalText = document.getElementById('modalText'); const drawerText = document.getElementById('drawerText');
modalText.innerHTML = `Node Label: ${attributes.label}<br>Node Type: ${attributes.tag}<br>More info: <a href="${attributes.URL}">Click here</a>`; drawerText.innerHTML = `Node Label: ${attributes.label}<br>Node Type: ${attributes.tag}<br>More info: <a href="${attributes.URL}">Click here</a>`;
modal.style.display = "block"; drawer.style.width = "30%";
drawer.style.display = "block";
}); });
const close = document.getElementsByClassName("close")[0]; const close = document.getElementsByClassName("close")[0];
close.onclick = function() { close.onclick = function() {
const modal = document.getElementById('nodeModal'); const drawer = document.getElementById('nodeDrawer');
modal.style.display = "none"; drawer.style.display = "none";
} }
window.onclick = function(event) { window.onclick = function(event) {
const modal = document.getElementById('nodeModal'); const drawer = document.getElementById('nodeDrawer');
if (event.target == modal) { if (event.target === drawer) {
modal.style.display = "none"; drawer.style.display = "none";
} }
} }
} }

31
styles.css
View file

@ -11,35 +11,30 @@ html, body {
background: white; background: white;
} }
/* The Modal (background) */ /* The Drawer (background) */
.modal { .drawer {
display: none; /* Hidden by default */ display: none; /* Hidden by default */
position: fixed; /* Stay in place */ position: fixed; /* Stay in place */
z-index: 1; /* Sit on top */ z-index: 1; /* Sit on top */
left: 0; right: 0; /* Align to the right side */
top: 0; top: 0;
width: 100%; /* Full width */ width: 30%; /* Adjust width as needed */
height: 100%; /* Full height */ height: 100%; /* Full height */
overflow: auto; /* Enable scroll if needed */ background-color: white; /* Drawer background color */
background-color: rgb(0,0,0); /* Fallback color */ box-shadow: -2px 0 5px rgba(0,0,0,0.5); /* Shadow for better visibility */
background-color: rgba(0,0,0,0.4); /* Black w/ opacity */ overflow-x: hidden; /* Prevent horizontal scroll */
} }
/* Modal Content */ .drawer-content {
.modal-content {
background-color: #fefefe;
margin: 15% auto; /* 15% from the top and centered */
padding: 20px; padding: 20px;
border: 1px solid #888;
width: 80%; /* Could be more or less, depending on screen size */
} }
/* The Close Button */
.close { .close {
color: #aaa; position: absolute;
float: right; top: 10px;
font-size: 28px; right: 25px;
font-weight: bold; font-size: 30px;
cursor: pointer;
} }
.close:hover, .close:hover,