From 8d2717d25b95bb869f82458ee5d5c0f3f95e427b Mon Sep 17 00:00:00 2001
From: Ziad-I <68874104+Ziad-I@users.noreply.github.com>
Date: Wed, 24 Jul 2024 23:26:43 +0300
Subject: [PATCH 01/16] add connected blender list for index page

---
 .../bim/data/webui/static/css/index.css       | 69 ++++++++++++++++++-
 .../bim/data/webui/static/js/index.js         | 67 ++++++++++++++++++
 .../bim/data/webui/templates/index.html       |  8 +++
 3 files changed, 142 insertions(+), 2 deletions(-)

diff --git a/src/blenderbim/blenderbim/bim/data/webui/static/css/index.css b/src/blenderbim/blenderbim/bim/data/webui/static/css/index.css
index 7a480b42c8..bd491ffbf2 100644
--- a/src/blenderbim/blenderbim/bim/data/webui/static/css/index.css
+++ b/src/blenderbim/blenderbim/bim/data/webui/static/css/index.css
@@ -7,6 +7,7 @@
     --padding-medium: 1rem;
     --font-size-large: 1.2rem;
     --logo-height: 2.5rem;
+    --nav-height: 2.5rem;
 }
 
 :root.dark {
@@ -18,6 +19,7 @@
     --nav-link-color: #fff;
     --nav-link-hover-color: #3fb449;
     --warning-color: #FFDB8F;
+    --table-border-color: #464444;
 }
 
 :root.light {
@@ -29,6 +31,7 @@
     --nav-link-color: #000000;
     --nav-link-hover-color: #38a63d;
     --warning-color: #FF4500;
+    --table-border-color: #222;
 }
 
 html {
@@ -63,6 +66,7 @@ h3 {
 
 nav {
     background-color: var(--nav-bg-color);
+    height: var(--nav-height);
     padding: var(--padding-medium) 0;
     display: flex;
     align-items: center;
@@ -118,6 +122,67 @@ nav ul li a.active {
     outline: none;
 }
 
+#client-list {
+    position: absolute;
+    top: calc(0 + var(--nav-height));
+    overflow-y: auto;
+    overflow: hidden;
+    transition: opacity 0.3s ease-out, visibility 0.3s ease-out;
+    border: 1px solid var(--table-border-color);
+    background-color: var(--nav-bg-color);
+    z-index: 1;
+    opacity: 0;
+    visibility: hidden;
+    width: auto;
+}
+
+#client-list.show {
+    opacity: 1;
+    visibility: visible;
+}
+
+#connected-list-div {
+    display: inline-block;
+}
+
+.client {
+    padding: 10px;
+    border-bottom: 1px solid var(--table-border-color);
+    cursor: pointer;
+}
+
+.client-details {
+    max-height: 0;
+    overflow: hidden;
+    padding-left: 10px;
+    transition: max-height 0.2s ease-out, padding 0.2s ease-out, opacity 0.1s ease-out;
+    background-color: var(--bg-color);
+    margin-top: 5px;
+    opacity: 0;
+}
+
+.client-details.show {
+    max-height: none;
+    padding: 10px;
+    opacity: 1;
+}
+
+.client-detail {
+    border-bottom: 1px solid var(--table-border-color);
+    padding: 10px;
+}
+
+#show-connected-button {
+    width: auto;
+    background-color: var(--bg-color);
+    border: none;
+    font-size: var(--base-font-size);
+}
+
+#show-connected-button:hover {
+    cursor: pointer;
+}
+
 /* ------------ Overwriting Tabulator CSS rules ------------ */
 
 :root.light .tabulator-header,
@@ -127,6 +192,6 @@ nav ul li a.active {
 }
 
 :root.light .tabulator {
-    border-top: 1px solid #222;
-    border-bottom: 2px solid #222;
+    border-top: 1px solid var(--table-border-color);
+    border-bottom: 2px solid var(--table-border-color);
 }
\ No newline at end of file
diff --git a/src/blenderbim/blenderbim/bim/data/webui/static/js/index.js b/src/blenderbim/blenderbim/bim/data/webui/static/js/index.js
index 0d4db42480..4896a1643c 100644
--- a/src/blenderbim/blenderbim/bim/data/webui/static/js/index.js
+++ b/src/blenderbim/blenderbim/bim/data/webui/static/js/index.js
@@ -81,6 +81,10 @@ function handleDefaultData(data) {
 
 // Function to add a new table with data and filename
 function addTableElement(blenderId, csvData, filename) {
+  $("#blender-count").text(function (i, text) {
+    return parseInt(text, 10) + 1;
+  });
+
   // store headers of the csv data
   const firstLine = csvData.indexOf("\n");
   const csvHeaders = csvData.substring(0, firstLine).split(",");
@@ -274,3 +278,66 @@ function toggleTheme() {
     setTheme("dark");
   }
 }
+
+function toggleClientList() {
+  var clientList = $("#client-list");
+
+  if (clientList.hasClass("show")) {
+    clientList.removeClass("show");
+    return;
+  }
+
+  clientList.empty();
+
+  $.each(connectedClients, function (id, client) {
+    if (!client.shown) return;
+
+    const icon = $("<i>")
+      .addClass("fas fa-chevron-down")
+      .css("margin-left", "8px");
+
+    const clientDiv = $("<div>").addClass("client").text(client.ifc_file);
+
+    clientDiv.append(icon);
+
+    const clientDetailsDiv = $("<div>").addClass("client-details");
+
+    if (id) {
+      const clientId = $("<div>")
+        .addClass("client-detail")
+        .text(`Blender ID: ${id}`);
+      clientDetailsDiv.append(clientId);
+    }
+
+    if (client.headers && client.headers.length) {
+      const clientHeaders = $("<div>")
+        .addClass("client-detail")
+        .text(`Table Headers: ${client.headers.join(", ")}`);
+
+      const scrollButton = $("<button>")
+        .addClass("scroll-button")
+        .text("Scroll to Table")
+        .on("click", function () {
+          $("html, body").animate(
+            {
+              scrollTop: $("#table-" + id).offset().top,
+            },
+            600
+          );
+          clientList.removeClass("show");
+        });
+
+      clientDetailsDiv.append(clientHeaders);
+      clientDetailsDiv.append(scrollButton);
+    }
+
+    clientDiv.append(clientDetailsDiv);
+
+    clientDiv.on("click", function () {
+      clientDetailsDiv.toggleClass("show");
+    });
+
+    clientList.append(clientDiv);
+  });
+  clientList.addClass("show");
+}
diff --git a/src/blenderbim/blenderbim/bim/data/webui/templates/index.html b/src/blenderbim/blenderbim/bim/data/webui/templates/index.html
index e948b4c4be..3d9661618b 100644
--- a/src/blenderbim/blenderbim/bim/data/webui/templates/index.html
+++ b/src/blenderbim/blenderbim/bim/data/webui/templates/index.html
@@ -46,6 +46,14 @@
         <i class="fas fa-moon"></i>
       </button>
     </nav>
+    <div id="connected-list-div">
+      <button id="show-connected-button" onclick="toggleClientList()">
+        Connected Blenders:
+        <span id="blender-count">0</span>
+        <i class="fas fa-chevron-down"></i>
+      </button>
+      <div id="client-list"></div>
+    </div>
     <div id="container"></div>
   </body>
 </html>

From a14fc0a7f53972acf0b63fccd4997c29f2721afa Mon Sep 17 00:00:00 2001
From: Ziad-I <68874104+Ziad-I@users.noreply.github.com>
Date: Thu, 25 Jul 2024 14:25:44 +0300
Subject: [PATCH 02/16] edit css rules

---
 .../bim/data/webui/static/css/index.css       | 44 ++++++++++++-------
 .../bim/data/webui/static/js/index.js         |  4 +-
 2 files changed, 29 insertions(+), 19 deletions(-)

diff --git a/src/blenderbim/blenderbim/bim/data/webui/static/css/index.css b/src/blenderbim/blenderbim/bim/data/webui/static/css/index.css
index bd491ffbf2..63cd80c40c 100644
--- a/src/blenderbim/blenderbim/bim/data/webui/static/css/index.css
+++ b/src/blenderbim/blenderbim/bim/data/webui/static/css/index.css
@@ -1,10 +1,12 @@
 :root {
     --font-family: Arial, sans-serif;
+    --margin-tiny: 0.125;
     --margin-small: 0.625rem;
     --margin-medium: 1.25rem;
     --margin-large: 2.5rem;
-    --padding-small: 0.125rem;
+    --padding-small: 0.625rem;
     --padding-medium: 1rem;
+    --warning-padding: 0.125rem;
     --font-size-large: 1.2rem;
     --logo-height: 2.5rem;
     --nav-height: 2.5rem;
@@ -52,14 +54,6 @@ body {
     margin-bottom: var(--margin-medium);
 }
 
-.table-container {
-    margin-bottom: var(--margin-large);
-}
-
-.csv-table {
-    margin-top: var(--margin-small);
-}
-
 h3 {
     margin-top: 0;
 }
@@ -106,7 +100,7 @@ nav ul li a.active {
 .warning {
     color: var(--warning-color);
     margin-bottom: var(--margin-small);
-    padding: var(--padding-small);
+    padding: var(--warning-padding);
     display: none;
 }
 
@@ -146,7 +140,7 @@ nav ul li a.active {
 }
 
 .client {
-    padding: 10px;
+    padding: var(--margin-small);
     border-bottom: 1px solid var(--table-border-color);
     cursor: pointer;
 }
@@ -154,22 +148,22 @@ nav ul li a.active {
 .client-details {
     max-height: 0;
     overflow: hidden;
-    padding-left: 10px;
+    padding-left: var(--padding-small);
     transition: max-height 0.2s ease-out, padding 0.2s ease-out, opacity 0.1s ease-out;
-    background-color: var(--bg-color);
-    margin-top: 5px;
+    background-color: var(--nav-bg-color);
+    margin-top: var(--margin-tiny);
     opacity: 0;
 }
 
 .client-details.show {
     max-height: none;
-    padding: 10px;
+    padding: var(--padding-small);
     opacity: 1;
 }
 
 .client-detail {
     border-bottom: 1px solid var(--table-border-color);
-    padding: 10px;
+    padding: var(--padding-small);
 }
 
 #show-connected-button {
@@ -179,10 +173,26 @@ nav ul li a.active {
     font-size: var(--base-font-size);
 }
 
-#show-connected-button:hover {
+#show-connected-button:hover,
+.scroll-button:hover {
     cursor: pointer;
 }
 
+.scroll-button {
+    font-size: var(--base-font-size);
+    margin-left: var(--margin-tiny);
+    margin-top: var(--margin-small);
+}
+
+
+.table-container {
+    margin-bottom: var(--margin-large);
+}
+
+.csv-table {
+    margin-top: var(--margin-small);
+}
+
 /* ------------ Overwriting Tabulator CSS rules ------------ */
 
 :root.light .tabulator-header,
diff --git a/src/blenderbim/blenderbim/bim/data/webui/static/js/index.js b/src/blenderbim/blenderbim/bim/data/webui/static/js/index.js
index 4896a1643c..78bd2c59b7 100644
--- a/src/blenderbim/blenderbim/bim/data/webui/static/js/index.js
+++ b/src/blenderbim/blenderbim/bim/data/webui/static/js/index.js
@@ -292,13 +292,13 @@ function toggleClientList() {
   $.each(connectedClients, function (id, client) {
     if (!client.shown) return;
 
-    const icon = $("<i>")
+    const dropdownIcon = $("<i>")
       .addClass("fas fa-chevron-down")
       .css("margin-left", "8px");
 
     const clientDiv = $("<div>").addClass("client").text(client.ifc_file);
 
-    clientDiv.append(icon);
+    clientDiv.append(dropdownIcon);
 
     const clientDetailsDiv = $("<div>").addClass("client-details");
 

From c8defbb77f28c38f8aec217d142e243443b42fa1 Mon Sep 17 00:00:00 2001
From: Ziad-I <68874104+Ziad-I@users.noreply.github.com>
Date: Thu, 25 Jul 2024 14:59:56 +0300
Subject: [PATCH 03/16] add connected list to gantt chart page

---
 .../bim/data/webui/static/css/gantt.css       | 78 +++++++++++++++++-
 .../bim/data/webui/static/css/index.css       |  7 +-
 .../bim/data/webui/static/js/gantt.js         | 82 +++++++++++++++++++
 .../bim/data/webui/static/js/index.js         |  6 +-
 .../bim/data/webui/templates/gantt.html       |  8 ++
 5 files changed, 175 insertions(+), 6 deletions(-)

diff --git a/src/blenderbim/blenderbim/bim/data/webui/static/css/gantt.css b/src/blenderbim/blenderbim/bim/data/webui/static/css/gantt.css
index 1256b09080..bad0ccad59 100644
--- a/src/blenderbim/blenderbim/bim/data/webui/static/css/gantt.css
+++ b/src/blenderbim/blenderbim/bim/data/webui/static/css/gantt.css
@@ -1,13 +1,17 @@
 :root {
     --font-family: Arial, sans-serif;
+    --base-font-size: 16px;
+    --margin-tiny: 0.125rem;
     --margin-small: 0.625rem;
     --margin-medium: 1.25rem;
     --margin-large: 2.5rem;
-    --padding-small: 0.125rem;
+    --padding-tiny: 0.125rem;
+    --padding-small: 0.625rem;
     --padding-medium: 1rem;
     --font-size-small: 1rem;
     --font-size-large: 1.2rem;
     --logo-height: 2.5rem;
+    --nav-height: 2.5rem;
     --folder-collapse-font-size: 0.75rem;
     --folder-collapse-font-family: Courier, "Courier New", monospace;
     --box-shadow: 0 0 0.7rem #5f5f5f66;
@@ -31,6 +35,7 @@
     --group-item-bg-color: #4b4b4b;
     --input-bg-color: #3b3b3b;
     --input-border-color: #000;
+    --details-border-color: #464444;
 }
 
 :root.light {
@@ -42,6 +47,7 @@
     --nav-link-color: #000000;
     --nav-link-hover-color: #38a63d;
     --warning-color: #FF4500;
+    --details-border-color: #222;
 }
 
 html {
@@ -107,7 +113,7 @@ nav ul li a.active {
 .warning {
     color: var(--warning-color);
     margin-bottom: var(--margin-small);
-    padding: var(--padding-small);
+    padding: var(--padding-tiny);
     display: none;
 }
 
@@ -141,6 +147,74 @@ nav ul li a.active {
     outline: none;
 }
 
+#client-list {
+    position: absolute;
+    top: calc(0 + var(--nav-height));
+    overflow-y: auto;
+    overflow: hidden;
+    transition: opacity 0.3s ease-out, visibility 0.3s ease-out;
+    border: 1px solid var(--table-border-color);
+    background-color: var(--nav-bg-color);
+    z-index: 1;
+    opacity: 0;
+    visibility: hidden;
+    width: auto;
+}
+
+#client-list.show {
+    opacity: 1;
+    visibility: visible;
+}
+
+#connected-list-div {
+    display: inline-block;
+}
+
+.client {
+    padding: var(--margin-small);
+    border-bottom: 1px solid var(--table-border-color);
+    cursor: pointer;
+}
+
+.client-details {
+    max-height: 0;
+    overflow: hidden;
+    padding-left: var(--padding-small);
+    transition: max-height 0.2s ease-out, padding 0.2s ease-out, opacity 0.1s ease-out;
+    background-color: var(--nav-bg-color);
+    margin-top: var(--margin-tiny);
+    opacity: 0;
+}
+
+.client-details.show {
+    max-height: none;
+    padding: var(--padding-small);
+    opacity: 1;
+}
+
+.client-detail {
+    border-bottom: 1px solid var(--table-border-color);
+    padding: var(--padding-small);
+}
+
+#show-connected-button {
+    width: auto;
+    background-color: var(--bg-color);
+    border: none;
+    font-size: var(--base-font-size);
+}
+
+#show-connected-button:hover,
+.scroll-button:hover {
+    cursor: pointer;
+}
+
+.scroll-button {
+    font-size: var(--base-font-size);
+    margin-left: var(--margin-tiny);
+    margin-top: var(--margin-small);
+}
+
 .gantt-info {
     margin: 0.5rem;
     font-size: var(--font-size-small);
diff --git a/src/blenderbim/blenderbim/bim/data/webui/static/css/index.css b/src/blenderbim/blenderbim/bim/data/webui/static/css/index.css
index 63cd80c40c..d8a46fa708 100644
--- a/src/blenderbim/blenderbim/bim/data/webui/static/css/index.css
+++ b/src/blenderbim/blenderbim/bim/data/webui/static/css/index.css
@@ -1,12 +1,13 @@
 :root {
     --font-family: Arial, sans-serif;
-    --margin-tiny: 0.125;
+    --base-font-size: 16px;
+    --margin-tiny: 0.125rem;
     --margin-small: 0.625rem;
     --margin-medium: 1.25rem;
     --margin-large: 2.5rem;
+    --padding-tiny: 0.125rem;
     --padding-small: 0.625rem;
     --padding-medium: 1rem;
-    --warning-padding: 0.125rem;
     --font-size-large: 1.2rem;
     --logo-height: 2.5rem;
     --nav-height: 2.5rem;
@@ -100,7 +101,7 @@ nav ul li a.active {
 .warning {
     color: var(--warning-color);
     margin-bottom: var(--margin-small);
-    padding: var(--warning-padding);
+    padding: var(--padding-tiny);
     display: none;
 }
 
diff --git a/src/blenderbim/blenderbim/bim/data/webui/static/js/gantt.js b/src/blenderbim/blenderbim/bim/data/webui/static/js/gantt.js
index e822c600d8..926d6cf5ad 100644
--- a/src/blenderbim/blenderbim/bim/data/webui/static/js/gantt.js
+++ b/src/blenderbim/blenderbim/bim/data/webui/static/js/gantt.js
@@ -60,6 +60,10 @@ function handleBlenderDisconnect(blenderId) {
     delete connectedClients[blenderId];
     removeGanttElement(blenderId);
   }
+
+  $("#blender-count").text(function (i, text) {
+    return parseInt(text, 10) - 1;
+  });
 }
 
 // Function to handle 'gantt_data' event
@@ -77,6 +81,7 @@ function handleGanttData(data) {
     if (!connectedClients[blenderId].shown) {
       connectedClients[blenderId] = {
         shown: true,
+        ifc_file: filename,
         ganttTasks: ganttTasks,
         workSchedule: ganttWorkSched,
       };
@@ -89,6 +94,7 @@ function handleGanttData(data) {
   } else {
     connectedClients[blenderId] = {
       shown: true,
+      ifc_file: filename,
       ganttTasks: ganttTasks,
       workSchedule: ganttWorkSched,
     };
@@ -105,6 +111,10 @@ function handleDefaultData(data) {
 
 // Function to add a new gantt with data and filename
 function addGanttElement(blenderId, tasks, workSched, filename) {
+  $("#blender-count").text(function (i, text) {
+    return parseInt(text, 10) + 1;
+  });
+
   const ganttContainer = $("<div></div>")
     .addClass("gantt-container")
     .attr("id", "container-" + blenderId);
@@ -382,3 +392,75 @@ function toggleTheme() {
     setTheme("dark");
   }
 }
+
+function toggleClientList() {
+  var clientList = $("#client-list");
+
+  if (clientList.hasClass("show")) {
+    clientList.removeClass("show");
+    return;
+  }
+
+  clientList.empty();
+
+  $.each(connectedClients, function (id, client) {
+    if (!client.shown) return;
+
+    const dropdownIcon = $("<i>")
+      .addClass("fas fa-chevron-down")
+      .css("margin-left", "0.5rem");
+
+    const clientDiv = $("<div>").addClass("client").text(client.ifc_file);
+
+    clientDiv.append(dropdownIcon);
+
+    const clientDetailsDiv = $("<div>").addClass("client-details");
+
+    if (id) {
+      const clientId = $("<div>")
+        .addClass("client-detail")
+        .text(`Blender ID: ${id}`);
+      clientDetailsDiv.append(clientId);
+    }
+
+    if (client.workSchedule && client.gantt) {
+      const clientScheduleName = $("<div>")
+        .addClass("client-detail")
+        .text(`Schedule Name: ${client.workSchedule.Name}`);
+
+      const clientScheduleDate = $("<div>")
+        .addClass("client-detail")
+        .text(
+          `Schedule Date: ${new Date(
+            client.workSchedule.CreationDate
+          ).toLocaleDateString()}`
+        );
+
+      const scrollButton = $("<button>")
+        .addClass("scroll-button")
+        .text("Scroll to Gantt Chart")
+        .on("click", function () {
+          $("html, body").animate(
+            {
+              scrollTop: $("#gantt-" + id).offset().top,
+            },
+            600
+          );
+          clientList.removeClass("show");
+        });
+
+      clientDetailsDiv.append(clientScheduleName);
+      clientDetailsDiv.append(clientScheduleDate);
+      clientDetailsDiv.append(scrollButton);
+    }
+
+    clientDiv.append(clientDetailsDiv);
+
+    clientDiv.on("click", function () {
+      clientDetailsDiv.toggleClass("show");
+    });
+
+    clientList.append(clientDiv);
+  });
+  clientList.addClass("show");
+}
diff --git a/src/blenderbim/blenderbim/bim/data/webui/static/js/index.js b/src/blenderbim/blenderbim/bim/data/webui/static/js/index.js
index 78bd2c59b7..b4fc422e10 100644
--- a/src/blenderbim/blenderbim/bim/data/webui/static/js/index.js
+++ b/src/blenderbim/blenderbim/bim/data/webui/static/js/index.js
@@ -42,6 +42,10 @@ function handleBlenderDisconnect(blenderId) {
     delete connectedClients[blenderId];
     removeTableElement(blenderId);
   }
+
+  $("#blender-count").text(function (i, text) {
+    return parseInt(text, 10) - 1;
+  });
 }
 
 // Function to handle 'csv_data' event
@@ -294,7 +298,7 @@ function toggleClientList() {
 
     const dropdownIcon = $("<i>")
       .addClass("fas fa-chevron-down")
-      .css("margin-left", "8px");
+      .css("margin-left", "0.5rem");
 
     const clientDiv = $("<div>").addClass("client").text(client.ifc_file);
 
diff --git a/src/blenderbim/blenderbim/bim/data/webui/templates/gantt.html b/src/blenderbim/blenderbim/bim/data/webui/templates/gantt.html
index 78044d45a3..3556aa86bc 100644
--- a/src/blenderbim/blenderbim/bim/data/webui/templates/gantt.html
+++ b/src/blenderbim/blenderbim/bim/data/webui/templates/gantt.html
@@ -39,6 +39,14 @@
         <i class="fas fa-moon"></i>
       </button>
     </nav>
+    <div id="connected-list-div">
+      <button id="show-connected-button" onclick="toggleClientList()">
+        Connected Blenders:
+        <span id="blender-count">0</span>
+        <i class="fas fa-chevron-down"></i>
+      </button>
+      <div id="client-list"></div>
+    </div>
     <div id="container"></div>
   </body>
 </html>

From adbf9093d359e6a5f0b1cc22bbe9045b1d9aad10 Mon Sep 17 00:00:00 2001
From: Ziad-I <68874104+Ziad-I@users.noreply.github.com>
Date: Thu, 25 Jul 2024 15:12:37 +0300
Subject: [PATCH 04/16] add initial drawings page

---
 .../blenderbim/bim/data/webui/sioserver.py    |   8 +
 .../bim/data/webui/static/css/drawings.css    | 186 ++++++++++++++++++
 .../bim/data/webui/static/js/drawings.js      |  28 +++
 .../bim/data/webui/templates/drawings.html    |  51 +++++
 .../bim/data/webui/templates/gantt.html       |   1 +
 .../bim/data/webui/templates/index.html       |   1 +
 6 files changed, 275 insertions(+)
 create mode 100644 src/blenderbim/blenderbim/bim/data/webui/static/css/drawings.css
 create mode 100644 src/blenderbim/blenderbim/bim/data/webui/static/js/drawings.js
 create mode 100644 src/blenderbim/blenderbim/bim/data/webui/templates/drawings.html

diff --git a/src/blenderbim/blenderbim/bim/data/webui/sioserver.py b/src/blenderbim/blenderbim/bim/data/webui/sioserver.py
index fdbef0b50c..269f355fce 100644
--- a/src/blenderbim/blenderbim/bim/data/webui/sioserver.py
+++ b/src/blenderbim/blenderbim/bim/data/webui/sioserver.py
@@ -119,11 +119,19 @@ async def gantt(request):
     return web.Response(text=html_content, content_type="text/html")
 
 
+async def drawings(request):
+    with open("templates/drawings.html", "r") as f:
+        template = f.read()
+    html_content = pystache.render(template, {"port": sio_port})
+    return web.Response(text=html_content, content_type="text/html")
+
+
 async def open_web_browser(app):
     webbrowser.open(f"http://127.0.0.1:{sio_port}/")
 
 
 app.router.add_get("/", index)
+app.router.add_get("/drawings", drawings)
 app.router.add_get("/gantt", gantt)
 app.router.add_static("/jsgantt/", path="../gantt", name="jsgantt")
 app.router.add_static("/static/", path="./static", name="static")
diff --git a/src/blenderbim/blenderbim/bim/data/webui/static/css/drawings.css b/src/blenderbim/blenderbim/bim/data/webui/static/css/drawings.css
new file mode 100644
index 0000000000..3798c42875
--- /dev/null
+++ b/src/blenderbim/blenderbim/bim/data/webui/static/css/drawings.css
@@ -0,0 +1,186 @@
+:root {
+    --font-family: Arial, sans-serif;
+    --base-font-size: 16px;
+    --margin-tiny: 0.125rem;
+    --margin-small: 0.625rem;
+    --margin-medium: 1.25rem;
+    --margin-large: 2.5rem;
+    --padding-tiny: 0.125rem;
+    --padding-small: 0.625rem;
+    --padding-medium: 1rem;
+    --font-size-large: 1.2rem;
+    --logo-height: 2.5rem;
+    --nav-height: 2.5rem;
+}
+
+:root.dark {
+    color-scheme: dark;
+    --bg-color: #252525;
+    --text-color: #e0e0e0;
+    --nav-bg-color: #121212;
+    --nav-border-color: #25682a;
+    --nav-link-color: #fff;
+    --nav-link-hover-color: #3fb449;
+    --warning-color: #FFDB8F;
+    --table-border-color: #464444;
+}
+
+:root.light {
+    color-scheme: light;
+    --bg-color: #ffffff;
+    --text-color: #000000;
+    --nav-bg-color: #f8f8f8;
+    --nav-border-color: #cccccc;
+    --nav-link-color: #000000;
+    --nav-link-hover-color: #38a63d;
+    --warning-color: #FF4500;
+    --table-border-color: #222;
+}
+
+html {
+    font-size: var(--base-font-size);
+}
+
+body {
+    background-color: var(--bg-color);
+    color: var(--text-color);
+    margin: 0;
+    font-family: var(--font-family);
+}
+
+#container {
+    margin-top: var(--margin-medium);
+    margin-left: var(--margin-small);
+    margin-right: var(--margin-small);
+    margin-bottom: var(--margin-medium);
+}
+
+h3 {
+    margin-top: 0;
+}
+
+nav {
+    background-color: var(--nav-bg-color);
+    height: var(--nav-height);
+    padding: var(--padding-medium) 0;
+    display: flex;
+    align-items: center;
+    position: relative;
+    border-bottom: 2px solid var(--nav-border-color);
+}
+
+nav .logo {
+    margin-left: var(--margin-large);
+    height: var(--logo-height);
+}
+
+nav ul {
+    list-style-type: none;
+    margin: 0;
+    margin-left: 0.0625rem;
+    display: flex;
+    flex-grow: 1;
+    justify-content: center;
+}
+
+nav ul li {
+    margin-right: 3.125rem;
+}
+
+nav ul li a {
+    text-decoration: none;
+    color: var(--nav-link-color);
+    font-size: var(--font-size-large);
+}
+
+nav ul li a:hover,
+nav ul li a.active {
+    color: var(--nav-link-hover-color);
+}
+
+.warning {
+    color: var(--warning-color);
+    margin-bottom: var(--margin-small);
+    padding: var(--padding-tiny);
+    display: none;
+}
+
+#toggle-theme {
+    border: none;
+    background: none;
+    cursor: pointer;
+    font-size: var(--font-size-large);
+    margin-right: var(--margin-medium);
+}
+
+#toggle-theme:focus {
+    outline: none;
+}
+
+#client-list {
+    position: absolute;
+    top: calc(0 + var(--nav-height));
+    overflow-y: auto;
+    overflow: hidden;
+    transition: opacity 0.3s ease-out, visibility 0.3s ease-out;
+    border: 1px solid var(--table-border-color);
+    background-color: var(--nav-bg-color);
+    z-index: 1;
+    opacity: 0;
+    visibility: hidden;
+    width: auto;
+}
+
+#client-list.show {
+    opacity: 1;
+    visibility: visible;
+}
+
+#connected-list-div {
+    display: inline-block;
+}
+
+.client {
+    padding: var(--margin-small);
+    border-bottom: 1px solid var(--table-border-color);
+    cursor: pointer;
+}
+
+.client-details {
+    max-height: 0;
+    overflow: hidden;
+    padding-left: var(--padding-small);
+    transition: max-height 0.2s ease-out, padding 0.2s ease-out, opacity 0.1s ease-out;
+    background-color: var(--nav-bg-color);
+    margin-top: var(--margin-tiny);
+    opacity: 0;
+}
+
+.client-details.show {
+    max-height: none;
+    padding: var(--padding-small);
+    opacity: 1;
+}
+
+.client-detail {
+    border-bottom: 1px solid var(--table-border-color);
+    padding: var(--padding-small);
+}
+
+#show-connected-button {
+    width: auto;
+    background-color: var(--bg-color);
+    border: none;
+    font-size: var(--base-font-size);
+}
+
+#show-connected-button:hover,
+.scroll-button:hover {
+    cursor: pointer;
+}
+
+.scroll-button {
+    font-size: var(--base-font-size);
+    margin-left: var(--margin-tiny);
+    margin-top: var(--margin-small);
+}
\ No newline at end of file
diff --git a/src/blenderbim/blenderbim/bim/data/webui/static/js/drawings.js b/src/blenderbim/blenderbim/bim/data/webui/static/js/drawings.js
new file mode 100644
index 0000000000..ae254501a2
--- /dev/null
+++ b/src/blenderbim/blenderbim/bim/data/webui/static/js/drawings.js
@@ -0,0 +1,28 @@
+// keeps track of blenders connected in form of
+// {shown:bool, filename:string, headers:array}
+const connectedClients = {};
+let socket;
+
+// Document ready function
+$(document).ready(function () {
+  var systemTheme = window.matchMedia("(prefers-color-scheme: light)").matches
+    ? "light"
+    : "dark";
+  var theme = localStorage.getItem("theme") || systemTheme;
+  setTheme(theme);
+
+  connectSocket();
+});
+
+// Function to connect to Socket.IO server
+function connectSocket() {
+  const url = "ws://localhost:" + SOCKET_PORT + "/web";
+  socket = io(url);
+  console.log("socket: ", socket);
+
+  // Register socket event handlers
+  //   socket.on("blender_connect", handleBlenderConnect);
+  //   socket.on("blender_disconnect", handleBlenderDisconnect);
+  //   socket.on("csv_data", handleCsvData);
+  //   socket.on("default_data", handleDefaultData);
+}
diff --git a/src/blenderbim/blenderbim/bim/data/webui/templates/drawings.html b/src/blenderbim/blenderbim/bim/data/webui/templates/drawings.html
new file mode 100644
index 0000000000..159e2a95fd
--- /dev/null
+++ b/src/blenderbim/blenderbim/bim/data/webui/templates/drawings.html
@@ -0,0 +1,51 @@
+<!DOCTYPE html>
+<html lang="en" class="dark">
+  <head>
+    <meta charset="UTF-8" />
+    <meta name="viewport" content="width=device-width, initial-scale=1.0" />
+    <title>Web Client</title>
+    <link rel="stylesheet" href="/static/css/drawings.css" />
+    <link
+      rel="stylesheet"
+      href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/6.6.0/css/all.min.css"
+    />
+    <script
+      type="text/javascript"
+      src="https://code.jquery.com/jquery-3.6.0.min.js"
+    ></script>
+    <script
+      type="text/javascript"
+      src="https://cdn.socket.io/4.0.0/socket.io.min.js"
+    ></script>
+    <script>
+      var SOCKET_PORT = {{port}};
+    </script>
+    <script defer src="./static/js/drawings.js"></script>
+  </head>
+  <body>
+    <nav>
+      <img
+        src="https://blenderbim.org/assets/images/blender/blender-logo.png"
+        alt="Logo"
+        class="logo"
+      />
+      <ul>
+        <li><a href="/">IFC Data</a></li>
+        <li><a href="/gantt">Gantt Chart</a></li>
+        <li><a href="/drawings" class="active">Drawings</a></li>
+      </ul>
+      <button id="toggle-theme" onclick="toggleTheme()">
+        <i class="fas fa-moon"></i>
+      </button>
+    </nav>
+    <div id="connected-list-div">
+      <button id="show-connected-button" onclick="toggleClientList()">
+        Connected Blenders:
+        <span id="blender-count">0</span>
+        <i class="fas fa-chevron-down"></i>
+      </button>
+      <div id="client-list"></div>
+    </div>
+    <div id="container"></div>
+  </body>
+</html>
diff --git a/src/blenderbim/blenderbim/bim/data/webui/templates/gantt.html b/src/blenderbim/blenderbim/bim/data/webui/templates/gantt.html
index 3556aa86bc..aa28ce3705 100644
--- a/src/blenderbim/blenderbim/bim/data/webui/templates/gantt.html
+++ b/src/blenderbim/blenderbim/bim/data/webui/templates/gantt.html
@@ -34,6 +34,7 @@
       <ul>
         <li><a href="/">IFC Data</a></li>
         <li><a href="/gantt" class="active">Gantt Chart</a></li>
+        <li><a href="/drawings">Drawings</a></li>
       </ul>
       <button id="toggle-theme" onclick="toggleTheme()">
         <i class="fas fa-moon"></i>
diff --git a/src/blenderbim/blenderbim/bim/data/webui/templates/index.html b/src/blenderbim/blenderbim/bim/data/webui/templates/index.html
index 3d9661618b..ac50f5b224 100644
--- a/src/blenderbim/blenderbim/bim/data/webui/templates/index.html
+++ b/src/blenderbim/blenderbim/bim/data/webui/templates/index.html
@@ -41,6 +41,7 @@
       <ul>
         <li><a href="/" class="active">IFC Data</a></li>
         <li><a href="/gantt">Gantt Chart</a></li>
+        <li><a href="/drawings">Drawings</a></li>
       </ul>
       <button id="toggle-theme" onclick="toggleTheme()">
         <i class="fas fa-moon"></i>

From c4d3dad63967302e9e465c122ce0fb5030f119a7 Mon Sep 17 00:00:00 2001
From: Ziad-I <68874104+Ziad-I@users.noreply.github.com>
Date: Thu, 25 Jul 2024 15:35:08 +0300
Subject: [PATCH 05/16] add page setup functions

---
 .../bim/data/webui/static/js/drawings.js      | 91 +++++++++++++++++++
 1 file changed, 91 insertions(+)

diff --git a/src/blenderbim/blenderbim/bim/data/webui/static/js/drawings.js b/src/blenderbim/blenderbim/bim/data/webui/static/js/drawings.js
index ae254501a2..151086de96 100644
--- a/src/blenderbim/blenderbim/bim/data/webui/static/js/drawings.js
+++ b/src/blenderbim/blenderbim/bim/data/webui/static/js/drawings.js
@@ -26,3 +26,94 @@ function connectSocket() {
   //   socket.on("csv_data", handleCsvData);
   //   socket.on("default_data", handleDefaultData);
 }
+
+function setTheme(theme) {
+  var stylesheet = $("#tabulator-stylesheet");
+  if (theme === "light") {
+    stylesheet.attr(
+      "href",
+      "https://unpkg.com/tabulator-tables/dist/css/tabulator_site.min.css"
+    );
+    $("html").removeClass("dark").addClass("light");
+    $("#toggle-theme").html('<i class="fas fa-sun"></i>');
+  } else {
+    stylesheet.attr(
+      "href",
+      "https://unpkg.com/tabulator-tables/dist/css/tabulator_site_dark.min.css"
+    );
+    $("html").removeClass("light").addClass("dark");
+    $("#toggle-theme").html('<i class="fas fa-moon"></i>');
+  }
+  localStorage.setItem("theme", theme);
+}
+
+function toggleTheme() {
+  if ($("html").hasClass("dark")) {
+    setTheme("light");
+  } else {
+    setTheme("dark");
+  }
+}
+
+function toggleClientList() {
+  var clientList = $("#client-list");
+
+  if (clientList.hasClass("show")) {
+    clientList.removeClass("show");
+    return;
+  }
+
+  clientList.empty();
+
+  $.each(connectedClients, function (id, client) {
+    if (!client.shown) return;
+
+    const dropdownIcon = $("<i>")
+      .addClass("fas fa-chevron-down")
+      .css("margin-left", "0.5rem");
+
+    const clientDiv = $("<div>").addClass("client").text(client.ifc_file);
+
+    clientDiv.append(dropdownIcon);
+
+    const clientDetailsDiv = $("<div>").addClass("client-details");
+
+    if (id) {
+      const clientId = $("<div>")
+        .addClass("client-detail")
+        .text(`Blender ID: ${id}`);
+      clientDetailsDiv.append(clientId);
+    }
+
+    if (client.headers && client.headers.length) {
+      const clientHeaders = $("<div>")
+        .addClass("client-detail")
+        .text(`Table Headers: ${client.headers.join(", ")}`);
+
+      const scrollButton = $("<button>")
+        .addClass("scroll-button")
+        .text("Scroll to Table")
+        .on("click", function () {
+          $("html, body").animate(
+            {
+              scrollTop: $("#table-" + id).offset().top,
+            },
+            600
+          );
+          clientList.removeClass("show");
+        });
+
+      clientDetailsDiv.append(clientHeaders);
+      clientDetailsDiv.append(scrollButton);
+    }
+
+    clientDiv.append(clientDetailsDiv);
+
+    clientDiv.on("click", function () {
+      clientDetailsDiv.toggleClass("show");
+    });
+
+    clientList.append(clientDiv);
+  });
+  clientList.addClass("show");
+}

From bddb8d1e560db2dff4880a7184160d5f01f51e94 Mon Sep 17 00:00:00 2001
From: Ziad-I <68874104+Ziad-I@users.noreply.github.com>
Date: Fri, 26 Jul 2024 02:19:55 +0300
Subject: [PATCH 06/16] add initial page layout

---
 .../bim/data/webui/static/css/drawings.css    | 53 ++++++++++++++++-
 .../bim/data/webui/templates/drawings.html    | 58 ++++++++++++++++++-
 2 files changed, 108 insertions(+), 3 deletions(-)

diff --git a/src/blenderbim/blenderbim/bim/data/webui/static/css/drawings.css b/src/blenderbim/blenderbim/bim/data/webui/static/css/drawings.css
index 3798c42875..2b91ee913e 100644
--- a/src/blenderbim/blenderbim/bim/data/webui/static/css/drawings.css
+++ b/src/blenderbim/blenderbim/bim/data/webui/static/css/drawings.css
@@ -22,7 +22,7 @@
     --nav-link-color: #fff;
     --nav-link-hover-color: #3fb449;
     --warning-color: #FFDB8F;
-    --table-border-color: #464444;
+    --border-color: #464444;
 }
 
 :root.light {
@@ -34,11 +34,12 @@
     --nav-link-color: #000000;
     --nav-link-hover-color: #38a63d;
     --warning-color: #FF4500;
-    --table-border-color: #222;
+    --border-color: #222;
 }
 
 html {
     font-size: var(--base-font-size);
+    color: var(--text-color);
 }
 
 body {
@@ -53,6 +54,9 @@ body {
     margin-left: var(--margin-small);
     margin-right: var(--margin-small);
     margin-bottom: var(--margin-medium);
+    height: calc(100vh - var(--nav-height));
+    box-sizing: border-box;
+    display: flex;
 }
 
 h3 {
@@ -183,4 +187,49 @@ nav ul li a.active {
     font-size: var(--base-font-size);
     margin-left: var(--margin-tiny);
     margin-top: var(--margin-small);
+}
+
+
+.left {
+    background-color: var(--bg-color);
+    display: flex;
+    flex-direction: column;
+    padding: 20px;
+}
+
+.right {
+    background-color: var(--bg-color);
+    /* Light gray background for the right part */
+}
+
+.panel {
+    background-color: var(--nav-bg-color);
+    border: 1px solid var(--border-color);
+    padding: 10px;
+    flex-grow: 1;
+    /* Take the remaining space */
+    display: flex;
+    flex-direction: column;
+}
+
+.card-header,
+.card {
+    background-color: var(--bg-color);
+    border: 1px solid var(--border-color);
+}
+
+#dropdown-menu:focus {
+    outline: none;
+}
+
+/* remove bootstrap css confilcts */
+*,
+::after,
+::before {
+    box-sizing: unset;
+}
+
+.btn,
+.btn:hover {
+    color: var(--text-color);
 }
\ No newline at end of file
diff --git a/src/blenderbim/blenderbim/bim/data/webui/templates/drawings.html b/src/blenderbim/blenderbim/bim/data/webui/templates/drawings.html
index 159e2a95fd..8e97678a13 100644
--- a/src/blenderbim/blenderbim/bim/data/webui/templates/drawings.html
+++ b/src/blenderbim/blenderbim/bim/data/webui/templates/drawings.html
@@ -4,6 +4,10 @@
     <meta charset="UTF-8" />
     <meta name="viewport" content="width=device-width, initial-scale=1.0" />
     <title>Web Client</title>
+    <link
+      rel="stylesheet"
+      href="https://stackpath.bootstrapcdn.com/bootstrap/4.5.2/css/bootstrap.min.css"
+    />
     <link rel="stylesheet" href="/static/css/drawings.css" />
     <link
       rel="stylesheet"
@@ -13,6 +17,7 @@
       type="text/javascript"
       src="https://code.jquery.com/jquery-3.6.0.min.js"
     ></script>
+    <script src="https://stackpath.bootstrapcdn.com/bootstrap/4.5.2/js/bootstrap.min.js"></script>
     <script
       type="text/javascript"
       src="https://cdn.socket.io/4.0.0/socket.io.min.js"
@@ -46,6 +51,57 @@
       </button>
       <div id="client-list"></div>
     </div>
-    <div id="container"></div>
+    <div class="container-fluid d-flex" id="container">
+      <div class="col-2 left">
+        <!-- Dropdown menu -->
+        <div class="dropdown mb-3">
+          <label for="dropdown-menu">IFC File</label>
+          <select class="w-50 p-0 pl-2" id="dropdown-menu"></select>
+        </div>
+        <!-- Panel with sub-panels -->
+        <div class="panel">
+          <div id="accordion">
+            <div class="card">
+              <div class="card-header" id="headingOne">
+                <button
+                  class="btn p-0"
+                  data-toggle="collapse"
+                  data-target="#collapseOne"
+                >
+                  Sub-panel 1
+                </button>
+              </div>
+
+              <div id="collapseOne" class="collapse">
+                <div class="card-body">
+                  <ul class="sub-panel" id="sub-panel-1"></ul>
+                </div>
+              </div>
+            </div>
+            <div class="card">
+              <div class="card-header" id="headingTwo">
+                <button
+                  class="btn p-0"
+                  data-toggle="collapse"
+                  data-target="#collapseTwo"
+                >
+                  Sub-panel 2
+                </button>
+              </div>
+              <div id="collapseTwo" class="collapse">
+                <div class="card-body">
+                  <ul class="sub-panel" id="sub-panel-2"></ul>
+                </div>
+              </div>
+            </div>
+          </div>
+        </div>
+      </div>
+      <div class="col-10 right p-3">
+        <!-- Elements for the right part go here -->
+        <h1>Right Part</h1>
+        <p>This is the right part of the container.</p>
+      </div>
+    </div>
   </body>
 </html>

From 9d79337fa704840675c96e908cf3d02b9a09479a Mon Sep 17 00:00:00 2001
From: Ziad-I <68874104+Ziad-I@users.noreply.github.com>
Date: Fri, 26 Jul 2024 17:29:39 +0300
Subject: [PATCH 07/16] edit drawings html/css/js

---
 .../bim/data/webui/static/css/drawings.css    | 13 +++++---
 .../bim/data/webui/static/js/drawings.js      | 31 ++++++++++++++++---
 .../bim/data/webui/templates/drawings.html    | 14 ++++-----
 3 files changed, 42 insertions(+), 16 deletions(-)

diff --git a/src/blenderbim/blenderbim/bim/data/webui/static/css/drawings.css b/src/blenderbim/blenderbim/bim/data/webui/static/css/drawings.css
index 2b91ee913e..df6da34a0e 100644
--- a/src/blenderbim/blenderbim/bim/data/webui/static/css/drawings.css
+++ b/src/blenderbim/blenderbim/bim/data/webui/static/css/drawings.css
@@ -199,7 +199,7 @@ nav ul li a.active {
 
 .right {
     background-color: var(--bg-color);
-    /* Light gray background for the right part */
+    border: 1px solid var(--border-color);
 }
 
 .panel {
@@ -207,15 +207,20 @@ nav ul li a.active {
     border: 1px solid var(--border-color);
     padding: 10px;
     flex-grow: 1;
-    /* Take the remaining space */
     display: flex;
     flex-direction: column;
 }
 
 .card-header,
-.card {
+.card-body {
     background-color: var(--bg-color);
     border: 1px solid var(--border-color);
+    overflow: auto;
+}
+
+.card {
+    background-color: var(--nav-bg-color);
+    overflow: auto;
 }
 
 #dropdown-menu:focus {
@@ -231,5 +236,5 @@ nav ul li a.active {
 
 .btn,
 .btn:hover {
-    color: var(--text-color);
+    color: var(--nav-link-hover-color);
 }
\ No newline at end of file
diff --git a/src/blenderbim/blenderbim/bim/data/webui/static/js/drawings.js b/src/blenderbim/blenderbim/bim/data/webui/static/js/drawings.js
index 151086de96..3733c4a0bb 100644
--- a/src/blenderbim/blenderbim/bim/data/webui/static/js/drawings.js
+++ b/src/blenderbim/blenderbim/bim/data/webui/static/js/drawings.js
@@ -1,5 +1,4 @@
-// keeps track of blenders connected in form of
-// {shown:bool, filename:string, headers:array}
+// keeps track of blenders connected
 const connectedClients = {};
 let socket;
 
@@ -21,12 +20,36 @@ function connectSocket() {
   console.log("socket: ", socket);
 
   // Register socket event handlers
-  //   socket.on("blender_connect", handleBlenderConnect);
-  //   socket.on("blender_disconnect", handleBlenderDisconnect);
+  socket.on("blender_connect", handleBlenderConnect);
+  socket.on("blender_disconnect", handleBlenderDisconnect);
   //   socket.on("csv_data", handleCsvData);
   //   socket.on("default_data", handleDefaultData);
 }
 
+// Function to handle 'blender_connect' event
+function handleBlenderConnect(blenderId) {
+  console.log("blender_connect: ", blenderId);
+  if (!connectedClients.hasOwnProperty(blenderId)) {
+    connectedClients[blenderId] = {
+      shown: false,
+      filename: "",
+    };
+  }
+}
+
+// Function to handle 'blender_disconnect' event
+function handleBlenderDisconnect(blenderId) {
+  console.log("blender_disconnect: ", blenderId);
+  if (connectedClients.hasOwnProperty(blenderId)) {
+    delete connectedClients[blenderId];
+    removeGanttElement(blenderId);
+  }
+
+  $("#blender-count").text(function (i, text) {
+    return parseInt(text, 10) - 1;
+  });
+}
+
 function setTheme(theme) {
   var stylesheet = $("#tabulator-stylesheet");
   if (theme === "light") {
diff --git a/src/blenderbim/blenderbim/bim/data/webui/templates/drawings.html b/src/blenderbim/blenderbim/bim/data/webui/templates/drawings.html
index 8e97678a13..b6b26dc441 100644
--- a/src/blenderbim/blenderbim/bim/data/webui/templates/drawings.html
+++ b/src/blenderbim/blenderbim/bim/data/webui/templates/drawings.html
@@ -61,18 +61,18 @@
         <!-- Panel with sub-panels -->
         <div class="panel">
           <div id="accordion">
-            <div class="card">
+            <div class="card pb-2">
               <div class="card-header" id="headingOne">
                 <button
                   class="btn p-0"
                   data-toggle="collapse"
                   data-target="#collapseOne"
                 >
-                  Sub-panel 1
+                  Drawings
                 </button>
               </div>
 
-              <div id="collapseOne" class="collapse">
+              <div id="collapseOne" class="collapse show">
                 <div class="card-body">
                   <ul class="sub-panel" id="sub-panel-1"></ul>
                 </div>
@@ -85,10 +85,10 @@
                   data-toggle="collapse"
                   data-target="#collapseTwo"
                 >
-                  Sub-panel 2
+                  Sheets
                 </button>
               </div>
-              <div id="collapseTwo" class="collapse">
+              <div id="collapseTwo" class="collapse show">
                 <div class="card-body">
                   <ul class="sub-panel" id="sub-panel-2"></ul>
                 </div>
@@ -98,9 +98,7 @@
         </div>
       </div>
       <div class="col-10 right p-3">
-        <!-- Elements for the right part go here -->
-        <h1>Right Part</h1>
-        <p>This is the right part of the container.</p>
+        <div id="svg-container"></div>
       </div>
     </div>
   </body>

From c25173aa12f17b142fe368df68997619e1439ffc Mon Sep 17 00:00:00 2001
From: Ziad-I <68874104+Ziad-I@users.noreply.github.com>
Date: Fri, 26 Jul 2024 22:43:10 +0300
Subject: [PATCH 08/16] add event listeners and joining of room in drawings
 page

---
 .../blenderbim/bim/data/webui/sioserver.py    | 12 +++++
 .../bim/data/webui/static/js/drawings.js      | 52 ++++++++++++++-----
 .../bim/data/webui/templates/drawings.html    | 26 +++++++---
 3 files changed, 71 insertions(+), 19 deletions(-)

diff --git a/src/blenderbim/blenderbim/bim/data/webui/sioserver.py b/src/blenderbim/blenderbim/bim/data/webui/sioserver.py
index 269f355fce..5521a8c182 100644
--- a/src/blenderbim/blenderbim/bim/data/webui/sioserver.py
+++ b/src/blenderbim/blenderbim/bim/data/webui/sioserver.py
@@ -47,6 +47,13 @@ class WebNamespace(socketio.AsyncNamespace):
     async def on_disconnect(self, sid):
         print(f"Web client disconnected: {sid}")
 
+    async def on_join_room(self, sid, data):
+        room = data["room"]
+        await sio.enter_room(sid, room=room)
+
+        if room == "drawings":
+            await sio.emit("get_drawings_data", namespace="/blender")
+
     async def on_web_operator(self, sid, data):
         await sio.emit(
             "web_operator",
@@ -98,6 +105,11 @@ class BlenderNamespace(socketio.AsyncNamespace):
         blender_messages[sid]["gantt_data"] = data
         await sio.emit("gantt_data", {"blenderId": sid, "data": data}, namespace="/web")
 
+    async def on_drawings_data(self, sid, data):
+        print(f"Drawings directory from Blender client {sid}")
+        blender_messages[sid]["drwings_data"] = data
+        await sio.emit("drawings_data", {"blenderId": sid, "data": data}, namespace="/web")
+
 
 # Attach namespaces
 sio.register_namespace(WebNamespace("/web"))
diff --git a/src/blenderbim/blenderbim/bim/data/webui/static/js/drawings.js b/src/blenderbim/blenderbim/bim/data/webui/static/js/drawings.js
index 3733c4a0bb..71a335e973 100644
--- a/src/blenderbim/blenderbim/bim/data/webui/static/js/drawings.js
+++ b/src/blenderbim/blenderbim/bim/data/webui/static/js/drawings.js
@@ -1,5 +1,6 @@
 // keeps track of blenders connected
 const connectedClients = {};
+const allDrawings = {};
 let socket;
 
 // Document ready function
@@ -22,17 +23,23 @@ function connectSocket() {
   // Register socket event handlers
   socket.on("blender_connect", handleBlenderConnect);
   socket.on("blender_disconnect", handleBlenderDisconnect);
-  //   socket.on("csv_data", handleCsvData);
+  socket.on("connect", handleWebConnect);
+  socket.on("drawings_data", handleDrawingsData);
   //   socket.on("default_data", handleDefaultData);
 }
 
+// function used to join drawings room
+function handleWebConnect() {
+  socket.emit("join_room", { room: "drawings" });
+}
+
 // Function to handle 'blender_connect' event
 function handleBlenderConnect(blenderId) {
   console.log("blender_connect: ", blenderId);
   if (!connectedClients.hasOwnProperty(blenderId)) {
     connectedClients[blenderId] = {
       shown: false,
-      filename: "",
+      ifc_file: "",
     };
   }
 }
@@ -42,7 +49,7 @@ function handleBlenderDisconnect(blenderId) {
   console.log("blender_disconnect: ", blenderId);
   if (connectedClients.hasOwnProperty(blenderId)) {
     delete connectedClients[blenderId];
-    removeGanttElement(blenderId);
+    // remove(blenderId);
   }
 
   $("#blender-count").text(function (i, text) {
@@ -50,20 +57,41 @@ function handleBlenderDisconnect(blenderId) {
   });
 }
 
+function handleDrawingsData(blenderId) {
+  const blenderId = data["blenderId"];
+
+  console.log(data);
+
+  const filename = data["data"]["ifc_file"];
+  const drawings = data["data"]["drawings_data"]["drawings"];
+  const sheets = data["data"]["drawings_data"]["sheets"];
+
+  allDrawings[filename] = { drawings: drawings, sheets: sheets };
+
+  if (connectedClients.hasOwnProperty(blenderId)) {
+    if (!connectedClients[blenderId].shown) {
+      connectedClients[blenderId] = {
+        shown: true,
+        ifc_file: filename,
+      };
+      // add(blenderId, data, filename);
+    } else {
+      // update(blenderId, data, filename);
+    }
+  } else {
+    connectedClients[blenderId] = {
+      shown: true,
+      ifc_file: filename,
+    };
+    // add(blenderId, data, filename);
+  }
+}
+
 function setTheme(theme) {
-  var stylesheet = $("#tabulator-stylesheet");
   if (theme === "light") {
-    stylesheet.attr(
-      "href",
-      "https://unpkg.com/tabulator-tables/dist/css/tabulator_site.min.css"
-    );
     $("html").removeClass("dark").addClass("light");
     $("#toggle-theme").html('<i class="fas fa-sun"></i>');
   } else {
-    stylesheet.attr(
-      "href",
-      "https://unpkg.com/tabulator-tables/dist/css/tabulator_site_dark.min.css"
-    );
     $("html").removeClass("light").addClass("dark");
     $("#toggle-theme").html('<i class="fas fa-moon"></i>');
   }
diff --git a/src/blenderbim/blenderbim/bim/data/webui/templates/drawings.html b/src/blenderbim/blenderbim/bim/data/webui/templates/drawings.html
index b6b26dc441..3ca89f6744 100644
--- a/src/blenderbim/blenderbim/bim/data/webui/templates/drawings.html
+++ b/src/blenderbim/blenderbim/bim/data/webui/templates/drawings.html
@@ -56,15 +56,20 @@
         <!-- Dropdown menu -->
         <div class="dropdown mb-3">
           <label for="dropdown-menu">IFC File</label>
-          <select class="w-50 p-0 pl-2" id="dropdown-menu"></select>
+          <select class="w-50 p-0 pl-2" id="dropdown-menu">
+            <!-- IFC files will be dynamically populated here -->
+            <option value="option1">Option 1</option>
+            <option value="option2">Option 2</option>
+            <option value="option3">Option 3</option>
+          </select>
         </div>
         <!-- Panel with sub-panels -->
         <div class="panel">
           <div id="accordion">
             <div class="card pb-2">
-              <div class="card-header" id="headingOne">
+              <div class="card-header overflow-hidden" id="headingOne">
                 <button
-                  class="btn p-0"
+                  class="btn p-0 w-100 text-left"
                   data-toggle="collapse"
                   data-target="#collapseOne"
                 >
@@ -74,14 +79,19 @@
 
               <div id="collapseOne" class="collapse show">
                 <div class="card-body">
-                  <ul class="sub-panel" id="sub-panel-1"></ul>
+                  <div class="sub-panel" id="sub-panel-1">
+                    <label>Item 1</label>
+                    <label>Item 2</label>
+                    <label>Item 3</label>
+                    <!-- Drawings will be dynamically populated here -->
+                  </div>
                 </div>
               </div>
             </div>
             <div class="card">
-              <div class="card-header" id="headingTwo">
+              <div class="card-header overflow-hidden" id="headingTwo">
                 <button
-                  class="btn p-0"
+                  class="btn p-0 w-100 text-left"
                   data-toggle="collapse"
                   data-target="#collapseTwo"
                 >
@@ -90,7 +100,9 @@
               </div>
               <div id="collapseTwo" class="collapse show">
                 <div class="card-body">
-                  <ul class="sub-panel" id="sub-panel-2"></ul>
+                  <ul class="sub-panel" id="sub-panel-2">
+                    <!-- Sheets will be dynamically populated here -->
+                  </ul>
                 </div>
               </div>
             </div>

From 9d4493e1da00579dd36067396115c01356f19356 Mon Sep 17 00:00:00 2001
From: Ziad-I <68874104+Ziad-I@users.noreply.github.com>
Date: Sat, 27 Jul 2024 15:52:49 +0300
Subject: [PATCH 09/16] add footer to index and gantt page

---
 .../blenderbim/bim/data/webui/sioserver.py     |  8 +++++---
 .../bim/data/webui/static/css/gantt.css        | 18 ++++++++++++++++++
 .../bim/data/webui/static/css/index.css        | 17 +++++++++++++++++
 .../bim/data/webui/templates/gantt.html        |  3 +++
 .../bim/data/webui/templates/index.html        |  3 +++
 src/blenderbim/blenderbim/tool/web.py          |  3 ++-
 6 files changed, 48 insertions(+), 4 deletions(-)

diff --git a/src/blenderbim/blenderbim/bim/data/webui/sioserver.py b/src/blenderbim/blenderbim/bim/data/webui/sioserver.py
index 5521a8c182..e195635952 100644
--- a/src/blenderbim/blenderbim/bim/data/webui/sioserver.py
+++ b/src/blenderbim/blenderbim/bim/data/webui/sioserver.py
@@ -2,7 +2,9 @@ import sys
 import os
 import webbrowser
 
-blenderbim_lib_path = os.environ.get("blenderbim_lib_path")
+blenderbim_lib_path = os.environ.get("BLENDERBIM_LIB_PATH")
+blender_version = os.environ.get("BLENDER_VERSION")
+
 if blenderbim_lib_path:
     sys.path.insert(0, blenderbim_lib_path)
 
@@ -120,14 +122,14 @@ sio.register_namespace(BlenderNamespace("/blender"))
 async def index(request):
     with open("templates/index.html", "r") as f:
         template = f.read()
-    html_content = pystache.render(template, {"port": sio_port})
+    html_content = pystache.render(template, {"port": sio_port, "version": blender_version})
     return web.Response(text=html_content, content_type="text/html")
 
 
 async def gantt(request):
     with open("templates/gantt.html", "r") as f:
         template = f.read()
-    html_content = pystache.render(template, {"port": sio_port})
+    html_content = pystache.render(template, {"port": sio_port, "version": blender_version})
     return web.Response(text=html_content, content_type="text/html")
 
 
diff --git a/src/blenderbim/blenderbim/bim/data/webui/static/css/gantt.css b/src/blenderbim/blenderbim/bim/data/webui/static/css/gantt.css
index bad0ccad59..fda2dbc600 100644
--- a/src/blenderbim/blenderbim/bim/data/webui/static/css/gantt.css
+++ b/src/blenderbim/blenderbim/bim/data/webui/static/css/gantt.css
@@ -59,9 +59,13 @@ body {
     color: var(--primary-text-color);
     margin: 0;
     font-family: var(--font-family);
+    display: flex;
+    flex-direction: column;
+    min-height: 100vh;
 }
 
 #container {
+    flex: 1;
     margin-top: var(--margin-medium);
     margin-left: var(--margin-small);
     margin-right: var(--margin-small);
@@ -215,6 +219,20 @@ nav ul li a.active {
     margin-top: var(--margin-small);
 }
 
+footer {
+    background-color: var(--nav-bg-color);
+    text-align: right;
+    padding: var(--padding-tiny);
+    border-top: 1px solid var(--nav-border-color);
+}
+
+footer p {
+    margin: 0;
+    color: var(--text-color);
+    margin-right: var(--margin-small);
+    font-size: 0.8rem;
+}
+
 .gantt-info {
     margin: 0.5rem;
     font-size: var(--font-size-small);
diff --git a/src/blenderbim/blenderbim/bim/data/webui/static/css/index.css b/src/blenderbim/blenderbim/bim/data/webui/static/css/index.css
index d8a46fa708..dfed2fad62 100644
--- a/src/blenderbim/blenderbim/bim/data/webui/static/css/index.css
+++ b/src/blenderbim/blenderbim/bim/data/webui/static/css/index.css
@@ -46,9 +46,13 @@ body {
     color: var(--text-color);
     margin: 0;
     font-family: var(--font-family);
+    display: flex;
+    flex-direction: column;
+    min-height: 100vh;
 }
 
 #container {
+    flex: 1;
     margin-top: var(--margin-medium);
     margin-left: var(--margin-small);
     margin-right: var(--margin-small);
@@ -185,6 +189,19 @@ nav ul li a.active {
     margin-top: var(--margin-small);
 }
 
+footer {
+    background-color: var(--nav-bg-color);
+    text-align: right;
+    padding: var(--padding-tiny);
+    border-top: 1px solid var(--nav-border-color);
+}
+
+footer p {
+    margin: 0;
+    color: var(--text-color);
+    margin-right: var(--margin-small);
+    font-size: 0.8rem;
+}
 
 .table-container {
     margin-bottom: var(--margin-large);
diff --git a/src/blenderbim/blenderbim/bim/data/webui/templates/gantt.html b/src/blenderbim/blenderbim/bim/data/webui/templates/gantt.html
index aa28ce3705..1454158ba2 100644
--- a/src/blenderbim/blenderbim/bim/data/webui/templates/gantt.html
+++ b/src/blenderbim/blenderbim/bim/data/webui/templates/gantt.html
@@ -49,5 +49,8 @@
       <div id="client-list"></div>
     </div>
     <div id="container"></div>
+    <footer>
+      <p>Blender Version: {{version}}</p>
+    </footer>
   </body>
 </html>
diff --git a/src/blenderbim/blenderbim/bim/data/webui/templates/index.html b/src/blenderbim/blenderbim/bim/data/webui/templates/index.html
index ac50f5b224..9ffda835b1 100644
--- a/src/blenderbim/blenderbim/bim/data/webui/templates/index.html
+++ b/src/blenderbim/blenderbim/bim/data/webui/templates/index.html
@@ -56,5 +56,8 @@
       <div id="client-list"></div>
     </div>
     <div id="container"></div>
+    <footer>
+      <p>Blender Version: {{version}}</p>
+    </footer>
   </body>
 </html>
diff --git a/src/blenderbim/blenderbim/tool/web.py b/src/blenderbim/blenderbim/tool/web.py
index d15d5f0a6f..116841289b 100644
--- a/src/blenderbim/blenderbim/tool/web.py
+++ b/src/blenderbim/blenderbim/tool/web.py
@@ -122,7 +122,8 @@ class Web(blenderbim.core.tool.Web):
             blenderbim_lib_path = os.path.join(blenderbim_path, "libs", "site", "packages")
 
         env = os.environ.copy()
-        env["blenderbim_lib_path"] = str(blenderbim_lib_path)
+        env["BLENDERBIM_LIB_PATH"] = str(blenderbim_lib_path)
+        env["BLENDER_VERSION"] = ".".join(map(str, bpy.app.version))
 
         ws_process = subprocess.Popen(
             [sys.executable, ws_path, "--p", str(port), "--host", "127.0.0.1"],

From f72359918db82cf9855df0746b21a3b1a4a59172 Mon Sep 17 00:00:00 2001
From: Ziad-I <68874104+Ziad-I@users.noreply.github.com>
Date: Sat, 27 Jul 2024 22:12:14 +0300
Subject: [PATCH 10/16] use blenderbim version instead of  blender version

---
 src/blenderbim/blenderbim/bim/data/webui/sioserver.py       | 6 +++---
 .../blenderbim/bim/data/webui/templates/gantt.html          | 2 +-
 .../blenderbim/bim/data/webui/templates/index.html          | 2 +-
 src/blenderbim/blenderbim/tool/web.py                       | 2 +-
 4 files changed, 6 insertions(+), 6 deletions(-)

diff --git a/src/blenderbim/blenderbim/bim/data/webui/sioserver.py b/src/blenderbim/blenderbim/bim/data/webui/sioserver.py
index e195635952..b441272e0d 100644
--- a/src/blenderbim/blenderbim/bim/data/webui/sioserver.py
+++ b/src/blenderbim/blenderbim/bim/data/webui/sioserver.py
@@ -3,7 +3,7 @@ import os
 import webbrowser
 
 blenderbim_lib_path = os.environ.get("BLENDERBIM_LIB_PATH")
-blender_version = os.environ.get("BLENDER_VERSION")
+blenderbim_version = os.environ.get("BLENDERBIM_VERSION")
 
 if blenderbim_lib_path:
     sys.path.insert(0, blenderbim_lib_path)
@@ -122,14 +122,14 @@ sio.register_namespace(BlenderNamespace("/blender"))
 async def index(request):
     with open("templates/index.html", "r") as f:
         template = f.read()
-    html_content = pystache.render(template, {"port": sio_port, "version": blender_version})
+    html_content = pystache.render(template, {"port": sio_port, "version": blenderbim_version})
     return web.Response(text=html_content, content_type="text/html")
 
 
 async def gantt(request):
     with open("templates/gantt.html", "r") as f:
         template = f.read()
-    html_content = pystache.render(template, {"port": sio_port, "version": blender_version})
+    html_content = pystache.render(template, {"port": sio_port, "version": blenderbim_version})
     return web.Response(text=html_content, content_type="text/html")
 
 
diff --git a/src/blenderbim/blenderbim/bim/data/webui/templates/gantt.html b/src/blenderbim/blenderbim/bim/data/webui/templates/gantt.html
index 1454158ba2..280c116dbb 100644
--- a/src/blenderbim/blenderbim/bim/data/webui/templates/gantt.html
+++ b/src/blenderbim/blenderbim/bim/data/webui/templates/gantt.html
@@ -50,7 +50,7 @@
     </div>
     <div id="container"></div>
     <footer>
-      <p>Blender Version: {{version}}</p>
+      <p>BlenderBIM Version: {{version}}</p>
     </footer>
   </body>
 </html>
diff --git a/src/blenderbim/blenderbim/bim/data/webui/templates/index.html b/src/blenderbim/blenderbim/bim/data/webui/templates/index.html
index 9ffda835b1..e31204d197 100644
--- a/src/blenderbim/blenderbim/bim/data/webui/templates/index.html
+++ b/src/blenderbim/blenderbim/bim/data/webui/templates/index.html
@@ -57,7 +57,7 @@
     </div>
     <div id="container"></div>
     <footer>
-      <p>Blender Version: {{version}}</p>
+      <p>BlenderBIM Version: {{version}}</p>
     </footer>
   </body>
 </html>
diff --git a/src/blenderbim/blenderbim/tool/web.py b/src/blenderbim/blenderbim/tool/web.py
index 116841289b..1ce1b92b77 100644
--- a/src/blenderbim/blenderbim/tool/web.py
+++ b/src/blenderbim/blenderbim/tool/web.py
@@ -123,7 +123,7 @@ class Web(blenderbim.core.tool.Web):
 
         env = os.environ.copy()
         env["BLENDERBIM_LIB_PATH"] = str(blenderbim_lib_path)
-        env["BLENDER_VERSION"] = ".".join(map(str, bpy.app.version))
+        env["BLENDERBIM_VERSION"] = tool.Blender.get_blenderbim_version()
 
         ws_process = subprocess.Popen(
             [sys.executable, ws_path, "--p", str(port), "--host", "127.0.0.1"],

From e5edd9a34d8d433e0a6e34276f64eb3e8908823c Mon Sep 17 00:00:00 2001
From: Ziad-I <68874104+Ziad-I@users.noreply.github.com>
Date: Sun, 28 Jul 2024 15:09:55 +0300
Subject: [PATCH 11/16] add retrieving drawings data from blender to web ui

---
 .../blenderbim/bim/data/webui/sioserver.py    | 10 ++------
 .../bim/data/webui/static/js/drawings.js      | 12 ++++++---
 .../bim/data/webui/templates/drawings.html    |  6 ++---
 src/blenderbim/blenderbim/tool/web.py         | 25 +++++++++++++++++++
 4 files changed, 38 insertions(+), 15 deletions(-)

diff --git a/src/blenderbim/blenderbim/bim/data/webui/sioserver.py b/src/blenderbim/blenderbim/bim/data/webui/sioserver.py
index b441272e0d..7b57057caf 100644
--- a/src/blenderbim/blenderbim/bim/data/webui/sioserver.py
+++ b/src/blenderbim/blenderbim/bim/data/webui/sioserver.py
@@ -49,19 +49,12 @@ class WebNamespace(socketio.AsyncNamespace):
     async def on_disconnect(self, sid):
         print(f"Web client disconnected: {sid}")
 
-    async def on_join_room(self, sid, data):
-        room = data["room"]
-        await sio.enter_room(sid, room=room)
-
-        if room == "drawings":
-            await sio.emit("get_drawings_data", namespace="/blender")
-
     async def on_web_operator(self, sid, data):
         await sio.emit(
             "web_operator",
             data,
             namespace="/blender",
-            room=data["blenderId"],
+            room=data.get("blenderId", None),
         )
 
     async def send_cached_messages(self, sid):
@@ -109,6 +102,7 @@ class BlenderNamespace(socketio.AsyncNamespace):
 
     async def on_drawings_data(self, sid, data):
         print(f"Drawings directory from Blender client {sid}")
+        print(data)
         blender_messages[sid]["drwings_data"] = data
         await sio.emit("drawings_data", {"blenderId": sid, "data": data}, namespace="/web")
 
diff --git a/src/blenderbim/blenderbim/bim/data/webui/static/js/drawings.js b/src/blenderbim/blenderbim/bim/data/webui/static/js/drawings.js
index 71a335e973..39c5f30b49 100644
--- a/src/blenderbim/blenderbim/bim/data/webui/static/js/drawings.js
+++ b/src/blenderbim/blenderbim/bim/data/webui/static/js/drawings.js
@@ -28,9 +28,15 @@ function connectSocket() {
   //   socket.on("default_data", handleDefaultData);
 }
 
-// function used to join drawings room
+// function used to get drawings data from blenderbim
 function handleWebConnect() {
-  socket.emit("join_room", { room: "drawings" });
+  const msg = {
+    sourcePage: "drawings",
+    operator: {
+      type: "getDrawings",
+    },
+  };
+  socket.emit("web_operator", msg);
 }
 
 // Function to handle 'blender_connect' event
@@ -57,7 +63,7 @@ function handleBlenderDisconnect(blenderId) {
   });
 }
 
-function handleDrawingsData(blenderId) {
+function handleDrawingsData(data) {
   const blenderId = data["blenderId"];
 
   console.log(data);
diff --git a/src/blenderbim/blenderbim/bim/data/webui/templates/drawings.html b/src/blenderbim/blenderbim/bim/data/webui/templates/drawings.html
index 3ca89f6744..ff190fbaaa 100644
--- a/src/blenderbim/blenderbim/bim/data/webui/templates/drawings.html
+++ b/src/blenderbim/blenderbim/bim/data/webui/templates/drawings.html
@@ -56,11 +56,9 @@
         <!-- Dropdown menu -->
         <div class="dropdown mb-3">
           <label for="dropdown-menu">IFC File</label>
-          <select class="w-50 p-0 pl-2" id="dropdown-menu">
+          <select class="p-0 pl-2" id="dropdown-menu">
             <!-- IFC files will be dynamically populated here -->
-            <option value="option1">Option 1</option>
-            <option value="option2">Option 2</option>
-            <option value="option3">Option 3</option>
+            <option value="" selected disabled hidden>Select IFC File</option>
           </select>
         </div>
         <!-- Panel with sub-panels -->
diff --git a/src/blenderbim/blenderbim/tool/web.py b/src/blenderbim/blenderbim/tool/web.py
index 1ce1b92b77..ddcd8d1ff5 100644
--- a/src/blenderbim/blenderbim/tool/web.py
+++ b/src/blenderbim/blenderbim/tool/web.py
@@ -280,6 +280,8 @@ class Web(blenderbim.core.tool.Web):
                 cls.handle_csv_operator(operator["operator"])
             elif operator["sourcePage"] == "gantt":
                 cls.handle_gantt_operator(operator["operator"])
+            elif operator["sourcePage"] == "drawings":
+                cls.handle_drawings_operator(operator["operator"])
         return 1.0
 
     @classmethod
@@ -324,6 +326,29 @@ class Web(blenderbim.core.tool.Web):
         gantt_data = {"tasks": task_json, "work_schedule": work_schedule.get_info(recursive=True)}
         cls.send_webui_data(data=gantt_data, data_key="gantt_data", event="gantt_data")
 
+    @classmethod
+    def handle_drawings_operator(cls, operator_data: dict) -> None:
+        if operator_data["type"] == "getDrawings":
+            drawings_data = []
+            sheets_data = []
+            ifc_file_dir = os.path.dirname(bpy.context.scene.BIMProperties.ifc_file)
+
+            sheets = [d for d in tool.Ifc.get().by_type("IfcDocumentInformation") if d.Scope == "SHEET"]
+            for sheet in sorted(sheets, key=lambda s: getattr(s, "Identification", getattr(s, "DocumentId", None))):
+                for reference in tool.Drawing.get_document_references(sheet):
+                    reference_description = tool.Drawing.get_reference_description(reference)
+                    reference_location = tool.Drawing.get_reference_location(reference)
+                    reference_name = os.path.basename(reference_location)
+                    reference_path = os.path.join(ifc_file_dir, reference_location)
+                    if reference_description == "SHEET":
+                        sheets_data.append({"name": reference_name, "path": reference_path})
+                    if reference_description == "DRAWING":
+                        drawings_data.append({"name": reference_name, "path": reference_path})
+
+            cls.send_webui_data(
+                data={"drawings": drawings_data, "sheets": sheets_data}, data_key="drawings_data", event="drawings_data"
+            )
+
     @classmethod
     def open_web_browser(cls, port: int) -> None:
         webbrowser.open(f"http://127.0.0.1:{port}/")

From ec3dc71c0ea45598604bcea2b89f6f4425bfa8ae Mon Sep 17 00:00:00 2001
From: Ziad-I <68874104+Ziad-I@users.noreply.github.com>
Date: Sun, 28 Jul 2024 21:04:16 +0300
Subject: [PATCH 12/16] add showing of drawings' and sheets' names

---
 .../bim/data/webui/static/js/drawings.js      | 42 ++++++++++++++++++-
 .../bim/data/webui/templates/drawings.html    | 13 +++---
 2 files changed, 45 insertions(+), 10 deletions(-)

diff --git a/src/blenderbim/blenderbim/bim/data/webui/static/js/drawings.js b/src/blenderbim/blenderbim/bim/data/webui/static/js/drawings.js
index 39c5f30b49..51f8fe3137 100644
--- a/src/blenderbim/blenderbim/bim/data/webui/static/js/drawings.js
+++ b/src/blenderbim/blenderbim/bim/data/webui/static/js/drawings.js
@@ -11,6 +11,7 @@ $(document).ready(function () {
   var theme = localStorage.getItem("theme") || systemTheme;
   setTheme(theme);
 
+  $("#dropdown-menu").change(displayDrawingsNames);
   connectSocket();
 });
 
@@ -74,13 +75,15 @@ function handleDrawingsData(data) {
 
   allDrawings[filename] = { drawings: drawings, sheets: sheets };
 
+  console.log(connectedClients);
+
   if (connectedClients.hasOwnProperty(blenderId)) {
     if (!connectedClients[blenderId].shown) {
       connectedClients[blenderId] = {
         shown: true,
         ifc_file: filename,
       };
-      // add(blenderId, data, filename);
+      addSelectOption(blenderId, filename);
     } else {
       // update(blenderId, data, filename);
     }
@@ -89,10 +92,45 @@ function handleDrawingsData(data) {
       shown: true,
       ifc_file: filename,
     };
-    // add(blenderId, data, filename);
+    addSelectOption(blenderId, filename);
   }
 }
 
+function addSelectOption(blenderId, filename) {
+  const filenameOption = $("<option></option>")
+    .attr("id", "blender" + blenderId)
+    .val(filename)
+    .text(filename);
+  $("#dropdown-menu").append(filenameOption);
+}
+
+function displayDrawingsNames() {
+  ifcFile = $("#dropdown-menu").val();
+
+  drawings = allDrawings[ifcFile].drawings;
+  sheets = allDrawings[ifcFile].sheets;
+
+  function createLabel(text, index, type) {
+    var label = $("<li></lio>")
+      .text(text)
+      .attr("id", index)
+      .click(function () {
+        console.log("ID:", $(this).attr("id"), "Name:", text);
+      });
+
+    if (type === "drawing") $("#drawings-sub-panel").append(label);
+    else if (type === "sheet") $("#sheets-sub-panel").append(label);
+  }
+
+  drawings.forEach(function (drawing, index) {
+    createLabel(drawing.name, index, "drawing");
+  });
+
+  sheets.forEach(function (sheet, index) {
+    createLabel(sheet.name, index, "sheet");
+  });
+}
+
 function setTheme(theme) {
   if (theme === "light") {
     $("html").removeClass("dark").addClass("light");
diff --git a/src/blenderbim/blenderbim/bim/data/webui/templates/drawings.html b/src/blenderbim/blenderbim/bim/data/webui/templates/drawings.html
index ff190fbaaa..d02612709b 100644
--- a/src/blenderbim/blenderbim/bim/data/webui/templates/drawings.html
+++ b/src/blenderbim/blenderbim/bim/data/webui/templates/drawings.html
@@ -55,10 +55,10 @@
       <div class="col-2 left">
         <!-- Dropdown menu -->
         <div class="dropdown mb-3">
-          <label for="dropdown-menu">IFC File</label>
+          <label for="dropdown-menu">IFC File:</label>
           <select class="p-0 pl-2" id="dropdown-menu">
             <!-- IFC files will be dynamically populated here -->
-            <option value="" selected disabled hidden>Select IFC File</option>
+            <option value="" selected disabled hidden>IFC File</option>
           </select>
         </div>
         <!-- Panel with sub-panels -->
@@ -77,16 +77,13 @@
 
               <div id="collapseOne" class="collapse show">
                 <div class="card-body">
-                  <div class="sub-panel" id="sub-panel-1">
-                    <label>Item 1</label>
-                    <label>Item 2</label>
-                    <label>Item 3</label>
+                  <div class="sub-panel pl-2" id="drawings-sub-panel">
                     <!-- Drawings will be dynamically populated here -->
                   </div>
                 </div>
               </div>
             </div>
-            <div class="card">
+            <div class="card pb-2">
               <div class="card-header overflow-hidden" id="headingTwo">
                 <button
                   class="btn p-0 w-100 text-left"
@@ -98,7 +95,7 @@
               </div>
               <div id="collapseTwo" class="collapse show">
                 <div class="card-body">
-                  <ul class="sub-panel" id="sub-panel-2">
+                  <ul class="sub-panel pl-2" id="sheets-sub-panel">
                     <!-- Sheets will be dynamically populated here -->
                   </ul>
                 </div>

From 2538c47d01f9a69bddb768f597aead7d5d273e64 Mon Sep 17 00:00:00 2001
From: Ziad-I <68874104+Ziad-I@users.noreply.github.com>
Date: Sun, 28 Jul 2024 22:01:13 +0300
Subject: [PATCH 13/16] fix display of list items

---
 .../blenderbim/bim/data/webui/static/css/drawings.css      | 4 ++++
 .../blenderbim/bim/data/webui/static/js/drawings.js        | 7 ++++---
 .../blenderbim/bim/data/webui/templates/drawings.html      | 4 ++--
 3 files changed, 10 insertions(+), 5 deletions(-)

diff --git a/src/blenderbim/blenderbim/bim/data/webui/static/css/drawings.css b/src/blenderbim/blenderbim/bim/data/webui/static/css/drawings.css
index df6da34a0e..84e9b6f324 100644
--- a/src/blenderbim/blenderbim/bim/data/webui/static/css/drawings.css
+++ b/src/blenderbim/blenderbim/bim/data/webui/static/css/drawings.css
@@ -223,6 +223,10 @@ nav ul li a.active {
     overflow: auto;
 }
 
+li.svg-name {
+    list-style-type: none;
+}
+
 #dropdown-menu:focus {
     outline: none;
 }
diff --git a/src/blenderbim/blenderbim/bim/data/webui/static/js/drawings.js b/src/blenderbim/blenderbim/bim/data/webui/static/js/drawings.js
index 51f8fe3137..bd3b52f766 100644
--- a/src/blenderbim/blenderbim/bim/data/webui/static/js/drawings.js
+++ b/src/blenderbim/blenderbim/bim/data/webui/static/js/drawings.js
@@ -110,10 +110,11 @@ function displayDrawingsNames() {
   drawings = allDrawings[ifcFile].drawings;
   sheets = allDrawings[ifcFile].sheets;
 
-  function createLabel(text, index, type) {
+  function createSvgNames(text, index, type) {
     var label = $("<li></lio>")
       .text(text)
       .attr("id", index)
+      .addClass("svg-name")
       .click(function () {
         console.log("ID:", $(this).attr("id"), "Name:", text);
       });
@@ -123,11 +124,11 @@ function displayDrawingsNames() {
   }
 
   drawings.forEach(function (drawing, index) {
-    createLabel(drawing.name, index, "drawing");
+    createSvgNames(drawing.name, index, "drawing");
   });
 
   sheets.forEach(function (sheet, index) {
-    createLabel(sheet.name, index, "sheet");
+    createSvgNames(sheet.name, index, "sheet");
   });
 }
 
diff --git a/src/blenderbim/blenderbim/bim/data/webui/templates/drawings.html b/src/blenderbim/blenderbim/bim/data/webui/templates/drawings.html
index d02612709b..4b9b034614 100644
--- a/src/blenderbim/blenderbim/bim/data/webui/templates/drawings.html
+++ b/src/blenderbim/blenderbim/bim/data/webui/templates/drawings.html
@@ -77,9 +77,9 @@
 
               <div id="collapseOne" class="collapse show">
                 <div class="card-body">
-                  <div class="sub-panel pl-2" id="drawings-sub-panel">
+                  <ul class="sub-panel pl-2" id="drawings-sub-panel">
                     <!-- Drawings will be dynamically populated here -->
-                  </div>
+                  </ul>
                 </div>
               </div>
             </div>

From d9ee3522bc5f6849395c82ee4dabaf799c4ed725 Mon Sep 17 00:00:00 2001
From: Ziad-I <68874104+Ziad-I@users.noreply.github.com>
Date: Sun, 28 Jul 2024 22:28:20 +0300
Subject: [PATCH 14/16] empty panels before adding names

---
 .../bim/data/webui/static/js/drawings.js          | 15 ++++++++++-----
 1 file changed, 10 insertions(+), 5 deletions(-)

diff --git a/src/blenderbim/blenderbim/bim/data/webui/static/js/drawings.js b/src/blenderbim/blenderbim/bim/data/webui/static/js/drawings.js
index bd3b52f766..8ce3265cfc 100644
--- a/src/blenderbim/blenderbim/bim/data/webui/static/js/drawings.js
+++ b/src/blenderbim/blenderbim/bim/data/webui/static/js/drawings.js
@@ -11,7 +11,12 @@ $(document).ready(function () {
   var theme = localStorage.getItem("theme") || systemTheme;
   setTheme(theme);
 
-  $("#dropdown-menu").change(displayDrawingsNames);
+  $("#dropdown-menu").change(function () {
+    const blenderId = $(this).attr("id");
+    const ifcFile = $(this).val();
+    displayDrawingsNames(blenderId, ifcFile);
+  });
+
   connectSocket();
 });
 
@@ -98,15 +103,13 @@ function handleDrawingsData(data) {
 
 function addSelectOption(blenderId, filename) {
   const filenameOption = $("<option></option>")
-    .attr("id", "blender" + blenderId)
+    .attr("id", "blender-" + blenderId)
     .val(filename)
     .text(filename);
   $("#dropdown-menu").append(filenameOption);
 }
 
-function displayDrawingsNames() {
-  ifcFile = $("#dropdown-menu").val();
-
+function displayDrawingsNames(blenderId, ifcFile) {
   drawings = allDrawings[ifcFile].drawings;
   sheets = allDrawings[ifcFile].sheets;
 
@@ -123,10 +126,12 @@ function displayDrawingsNames() {
     else if (type === "sheet") $("#sheets-sub-panel").append(label);
   }
 
+  $("#drawings-sub-panel").empty();
   drawings.forEach(function (drawing, index) {
     createSvgNames(drawing.name, index, "drawing");
   });
 
+  $("#sheets-sub-panel").empty();
   sheets.forEach(function (sheet, index) {
     createSvgNames(sheet.name, index, "sheet");
   });

From 03e2cb70bbb3cbbb70a9f8fa125d011eac4d688d Mon Sep 17 00:00:00 2001
From: Ziad-I <68874104+Ziad-I@users.noreply.github.com>
Date: Mon, 29 Jul 2024 22:45:35 +0300
Subject: [PATCH 15/16] remove unnecessary padding

---
 src/blenderbim/blenderbim/bim/data/webui/static/css/drawings.css | 1 -
 src/blenderbim/blenderbim/bim/data/webui/static/css/gantt.css    | 1 -
 src/blenderbim/blenderbim/bim/data/webui/static/css/index.css    | 1 -
 3 files changed, 3 deletions(-)

diff --git a/src/blenderbim/blenderbim/bim/data/webui/static/css/drawings.css b/src/blenderbim/blenderbim/bim/data/webui/static/css/drawings.css
index 84e9b6f324..340cb9ef56 100644
--- a/src/blenderbim/blenderbim/bim/data/webui/static/css/drawings.css
+++ b/src/blenderbim/blenderbim/bim/data/webui/static/css/drawings.css
@@ -162,7 +162,6 @@ nav ul li a.active {
 
 .client-details.show {
     max-height: none;
-    padding: var(--padding-small);
     opacity: 1;
 }
 
diff --git a/src/blenderbim/blenderbim/bim/data/webui/static/css/gantt.css b/src/blenderbim/blenderbim/bim/data/webui/static/css/gantt.css
index fda2dbc600..f19ab94c28 100644
--- a/src/blenderbim/blenderbim/bim/data/webui/static/css/gantt.css
+++ b/src/blenderbim/blenderbim/bim/data/webui/static/css/gantt.css
@@ -192,7 +192,6 @@ nav ul li a.active {
 
 .client-details.show {
     max-height: none;
-    padding: var(--padding-small);
     opacity: 1;
 }
 
diff --git a/src/blenderbim/blenderbim/bim/data/webui/static/css/index.css b/src/blenderbim/blenderbim/bim/data/webui/static/css/index.css
index dfed2fad62..37386ebea9 100644
--- a/src/blenderbim/blenderbim/bim/data/webui/static/css/index.css
+++ b/src/blenderbim/blenderbim/bim/data/webui/static/css/index.css
@@ -162,7 +162,6 @@ nav ul li a.active {
 
 .client-details.show {
     max-height: none;
-    padding: var(--padding-small);
     opacity: 1;
 }
 

From ca781655b0f30a7045e31c3fd35ee125fe0bfdeb Mon Sep 17 00:00:00 2001
From: Ziad-I <68874104+Ziad-I@users.noreply.github.com>
Date: Mon, 29 Jul 2024 23:35:28 +0300
Subject: [PATCH 16/16] add displaying of svgs in drawings page

---
 .../blenderbim/bim/data/webui/sioserver.py    |  7 +++
 .../bim/data/webui/static/css/drawings.css    |  6 +++
 .../bim/data/webui/static/js/drawings.js      | 47 ++++++++++++++++++-
 .../bim/data/webui/templates/drawings.html    | 15 +++++-
 4 files changed, 71 insertions(+), 4 deletions(-)

diff --git a/src/blenderbim/blenderbim/bim/data/webui/sioserver.py b/src/blenderbim/blenderbim/bim/data/webui/sioserver.py
index 7b57057caf..fc09437f36 100644
--- a/src/blenderbim/blenderbim/bim/data/webui/sioserver.py
+++ b/src/blenderbim/blenderbim/bim/data/webui/sioserver.py
@@ -57,6 +57,13 @@ class WebNamespace(socketio.AsyncNamespace):
             room=data.get("blenderId", None),
         )
 
+    async def on_get_svg(self, sid, data):
+        print("hello world!")
+        file_path = data["path"]
+        with open(file_path, "r") as file:
+            svg_data = file.read()
+        await sio.emit("svg_data", svg_data, room=sid, namespace="/web")
+
     async def send_cached_messages(self, sid):
         # Send cached messages to the connected web client
         for blenderId, messages in blender_messages.items():
diff --git a/src/blenderbim/blenderbim/bim/data/webui/static/css/drawings.css b/src/blenderbim/blenderbim/bim/data/webui/static/css/drawings.css
index 340cb9ef56..9dd2437ecf 100644
--- a/src/blenderbim/blenderbim/bim/data/webui/static/css/drawings.css
+++ b/src/blenderbim/blenderbim/bim/data/webui/static/css/drawings.css
@@ -190,6 +190,7 @@ nav ul li a.active {
 
 
 .left {
+    flex: 1;
     background-color: var(--bg-color);
     display: flex;
     flex-direction: column;
@@ -197,10 +198,15 @@ nav ul li a.active {
 }
 
 .right {
+    flex: 4;
     background-color: var(--bg-color);
     border: 1px solid var(--border-color);
 }
 
+#svg-container {
+    height: 100%;
+}
+
 .panel {
     background-color: var(--nav-bg-color);
     border: 1px solid var(--border-color);
diff --git a/src/blenderbim/blenderbim/bim/data/webui/static/js/drawings.js b/src/blenderbim/blenderbim/bim/data/webui/static/js/drawings.js
index 8ce3265cfc..8a865dcab1 100644
--- a/src/blenderbim/blenderbim/bim/data/webui/static/js/drawings.js
+++ b/src/blenderbim/blenderbim/bim/data/webui/static/js/drawings.js
@@ -31,6 +31,7 @@ function connectSocket() {
   socket.on("blender_disconnect", handleBlenderDisconnect);
   socket.on("connect", handleWebConnect);
   socket.on("drawings_data", handleDrawingsData);
+  socket.on("svg_data", handleSvgData);
   //   socket.on("default_data", handleDefaultData);
 }
 
@@ -101,6 +102,31 @@ function handleDrawingsData(data) {
   }
 }
 
+function handleSvgData(data) {
+  const svgContainer = document.getElementById("svg-container");
+  svgContainer.innerHTML = "";
+  svgContainer.style.backgroundColor = "white";
+
+  const dom = SVG(svgContainer).svg(data);
+  const svgElement = dom.node.children[0];
+
+  // to make the svg not grow outside the svg container
+  svgElement.setAttribute("width", "100%");
+  svgElement.setAttribute("height", "100%");
+  svgElement.style.maxWidth = "100%";
+  svgElement.style.maxHeight = "100%";
+  svgElement.style.width = "100%";
+  svgElement.style.height = "100%";
+  svgElement.style.boxSizing = "border-box"; // Ensure padding and borders are included in the element's total width and height
+
+  const panZoomControls = svgPanZoom(svgElement, {
+    zoomEnabled: true,
+    controlIconsEnabled: true,
+    fit: true,
+    center: true,
+  });
+}
+
 function addSelectOption(blenderId, filename) {
   const filenameOption = $("<option></option>")
     .attr("id", "blender-" + blenderId)
@@ -116,10 +142,27 @@ function displayDrawingsNames(blenderId, ifcFile) {
   function createSvgNames(text, index, type) {
     var label = $("<li></lio>")
       .text(text)
-      .attr("id", index)
+      .attr("id", type + "-" + index)
       .addClass("svg-name")
       .click(function () {
-        console.log("ID:", $(this).attr("id"), "Name:", text);
+        const id = $(this).attr("id").split("-");
+        const index = parseInt(id[1]);
+        const type = id[0];
+        const ifcFile = $("#dropdown-menu").val();
+
+        var path = "";
+
+        if (type === "drawing") {
+          path = allDrawings[ifcFile].drawings[index].path;
+        } else if (type === "sheet") {
+          path = allDrawings[ifcFile].sheets[index].path;
+        }
+
+        const msg = {
+          path: path,
+        };
+        console.log(msg);
+        socket.emit("get_svg", msg);
       });
 
     if (type === "drawing") $("#drawings-sub-panel").append(label);
diff --git a/src/blenderbim/blenderbim/bim/data/webui/templates/drawings.html b/src/blenderbim/blenderbim/bim/data/webui/templates/drawings.html
index 4b9b034614..41eebcd93a 100644
--- a/src/blenderbim/blenderbim/bim/data/webui/templates/drawings.html
+++ b/src/blenderbim/blenderbim/bim/data/webui/templates/drawings.html
@@ -17,7 +17,18 @@
       type="text/javascript"
       src="https://code.jquery.com/jquery-3.6.0.min.js"
     ></script>
-    <script src="https://stackpath.bootstrapcdn.com/bootstrap/4.5.2/js/bootstrap.min.js"></script>
+    <script
+      type="text/javascript"
+      src="https://cdnjs.cloudflare.com/ajax/libs/svg.js/3.1.1/svg.min.js"
+    ></script>
+    <script
+      type="text/javascript"
+      src="https://cdn.jsdelivr.net/npm/svg-pan-zoom@3.6.1/dist/svg-pan-zoom.min.js"
+    ></script>
+    <script
+      type="text/javascript"
+      src="https://stackpath.bootstrapcdn.com/bootstrap/4.5.2/js/bootstrap.min.js"
+    ></script>
     <script
       type="text/javascript"
       src="https://cdn.socket.io/4.0.0/socket.io.min.js"
@@ -104,7 +115,7 @@
           </div>
         </div>
       </div>
-      <div class="col-10 right p-3">
+      <div class="col-10 right pl-3">
         <div id="svg-container"></div>
       </div>
     </div>