+
+
×
-
Some text in the Modal..
+
Node details will appear here...
diff --git a/script.js b/script.js
index 1482366..b0be1a5 100644
--- a/script.js
+++ b/script.js
@@ -14,7 +14,7 @@ async function main(){
console.log("Graph data:", network_graph_json);
console.log("Graph object:", graph);
const sigmaInstance = new Sigma(graph, document.getElementById('container'));
- add_modal(sigmaInstance, graph);
+ add_drawer(sigmaInstance, graph);
} catch (error) {
console.error('Failed to load or create the graph:', error);
}
@@ -73,26 +73,27 @@ async function getNetworkGraphJson(){
return await response.json();
}
-function add_modal(sigmaInstance, graph){
+function add_drawer(sigmaInstance, graph){
sigmaInstance.on('clickNode', ({node}) => {
const attributes = graph.getNodeAttributes(node);
- const modal = document.getElementById('nodeModal');
- const modalText = document.getElementById('modalText');
+ const drawer = document.getElementById('nodeDrawer');
+ const drawerText = document.getElementById('drawerText');
- modalText.innerHTML = `Node Label: ${attributes.label}
Node Type: ${attributes.tag}
More info:
Click here`;
+ drawerText.innerHTML = `Node Label: ${attributes.label}
Node Type: ${attributes.tag}
More info:
Click here`;
- modal.style.display = "block";
+ drawer.style.width = "30%";
+ drawer.style.display = "block";
});
const close = document.getElementsByClassName("close")[0];
close.onclick = function() {
- const modal = document.getElementById('nodeModal');
- modal.style.display = "none";
+ const drawer = document.getElementById('nodeDrawer');
+ drawer.style.display = "none";
}
window.onclick = function(event) {
- const modal = document.getElementById('nodeModal');
- if (event.target == modal) {
- modal.style.display = "none";
+ const drawer = document.getElementById('nodeDrawer');
+ if (event.target === drawer) {
+ drawer.style.display = "none";
}
}
}
diff --git a/styles.css b/styles.css
index 0a19e76..22de47b 100644
--- a/styles.css
+++ b/styles.css
@@ -11,35 +11,30 @@ html, body {
background: white;
}
-/* The Modal (background) */
-.modal {
+/* The Drawer (background) */
+.drawer {
display: none; /* Hidden by default */
position: fixed; /* Stay in place */
z-index: 1; /* Sit on top */
- left: 0;
+ right: 0; /* Align to the right side */
top: 0;
- width: 100%; /* Full width */
+ width: 30%; /* Adjust width as needed */
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 */
+ background-color: white; /* Drawer background color */
+ box-shadow: -2px 0 5px rgba(0,0,0,0.5); /* Shadow for better visibility */
+ overflow-x: hidden; /* Prevent horizontal scroll */
}
-/* Modal Content */
-.modal-content {
- background-color: #fefefe;
- margin: 15% auto; /* 15% from the top and centered */
+.drawer-content {
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;
+ position: absolute;
+ top: 10px;
+ right: 25px;
+ font-size: 30px;
+ cursor: pointer;
}
.close:hover,