From 8f66d8663abd4963ed06d8e31a1d50d90bdf7111 Mon Sep 17 00:00:00 2001
From: =?UTF-8?q?Y=C3=BBki=20Vachot?= <yuki@vachot.fr>
Date: Sun, 12 May 2024 03:49:55 +0200
Subject: [PATCH] Replace modal to drawer

---
 index.html |  6 +++---
 script.js  | 23 ++++++++++++-----------
 styles.css | 31 +++++++++++++------------------
 3 files changed, 28 insertions(+), 32 deletions(-)
diff --git a/index.html b/index.html
index df5d69d..a27faff 100644
--- a/index.html
+++ b/index.html
@@ -7,10 +7,10 @@
 </head>
 <body>
     <div id="container"></div>
-    <div id="nodeModal" class="modal">
-        <div class="modal-content">
+    <div id="nodeDrawer" class="drawer">
+        <div class="drawer-content">
             <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>
     <script type="module" src="script.js"></script>
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}<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];
     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,
