edit html/js/css to use tabulator to show csv data

src/blenderbim/blenderbim/bim/data/webui/sioserver.py

@@ -38,7 +38,8 @@ class WebNamespace(socketio.AsyncNamespace):
     async def on_operator(self, sid, data):
         print(f"Web client {sid} operator: {data}")
         json_data = json.loads(data)
-        await sio.emit("web_operator", json_data, namespace="/blender", room=json_data["blenderId"])
+        # need to add event listeners in blenderbim side for event web_operator
+        # await sio.emit("web_operator", json_data, namespace="/blender", room=json_data["blenderId"])
 
 
 # Blender namespace
@@ -67,7 +68,7 @@ class BlenderNamespace(socketio.AsyncNamespace):
     async def on_default_data(self, sid, data):
         print(f"Default data from Blender client {sid}: {data}")
         # blender_messages[sid] = data
-        # await sio.emit("blender_data", {"blenderId": sid, "data": data}, namespace="/web")
+        await sio.emit("default_data", {"blenderId": sid, "data": data}, namespace="/web")
 
     async def on_csv_data(self, sid, data):
         print(f"CSV data from Blender client {sid}: {data}")

src/blenderbim/blenderbim/bim/data/webui/static/css/styles.css

@@ -1,12 +1,23 @@
 body {
+    background-color: #2e2e2e;
+    /* Dark background color */
+    color: #e0e0e0;
+    /* Light text color */
     font-family: Arial, sans-serif;
-    margin: 0;
+}
-    padding: 20px;
+
+#messages {
+    margin: 20px;
 }
 
 .message {
-    margin-bottom: 10px;
+    background-color: #3c3c3c;
     padding: 10px;
-    border: 1px solid #ccc;
+    margin-bottom: 10px;
     border-radius: 5px;
+    color: #ffffff;
+}
+
+.csv-table {
+    margin-top: 20px;
 }

src/blenderbim/blenderbim/bim/data/webui/static/js/index.js

@@ -1,61 +1,81 @@
 $(document).ready(function () {
   // Connect to the Socket.IO server
   const url = "ws://localhost:" + SOCKET_PORT + "/web";
-
   const socket = io(url);
-
   console.log("socket: ", socket);
 
-  const connectedClients = {};
+  connectedClients = [];
 
-  function addMessageElement(blenderId, message) {
+  function addTableElement(blenderId, csvData) {
-    const messageDiv = $("<div></div>")
+    const tableDiv = $("<div></div>")
-      .addClass("message")
+      .addClass("csv-table")
-      .attr("id", blenderId)
+      .attr("id", "table-" + blenderId);
-      .text(message);
+    $("#container").append(tableDiv);
 
-    $("#messages").append(messageDiv);
+    var table = new Tabulator("#table-" + blenderId, {
+      index: "GlobalId",
+      data: csvData,
+      importFormat: "csv",
+      autoColumns: true,
+      selectableRows: 1,
+      layout: "fitColumns",
+      // selectableRowsRangeMode: "click",
+    });
+
+    table.on("rowSelected", function (row) {
+      var index = row.getIndex(); // the guid of the object
+      var tableId = row.getTable().element.id.substr(6);
+
+      msg = JSON.stringify({
+        operator_type: "selection",
+        blenderId: tableId,
+        guid: index,
+      });
+      socket.emit("operator", msg);
+    });
   }
 
-  function updateMessageElement(blenderId, message) {
+  function updateTableElement(blenderId, csvData) {
-    $("#" + blenderId).text(message);
+    const table = Tabulator.findTable("#table-" + blenderId)[0];
+    if (table) {
+      table.replaceData(csvData, { importFormat: "csv" });
+    }
   }
 
-  function removeMessageElement(blenderId) {
+  function removeTableElement(blenderId) {
-    $("#" + blenderId).remove();
+    $("#table-" + blenderId).remove();
   }
 
   socket.on("blender_connect", (blenderId) => {
     console.log("blender_connect: ", blenderId);
-
+    if (!connectedClients.hasOwnProperty(blenderId)) {
-    if (!connectedClients[blenderId]) {
+      connectedClients[blenderId] = false; // No data shown yet
-      connectedClients[blenderId] = true;
-      addMessageElement(blenderId, "");
     }
   });
 
-  // Listen for client disconnect events
   socket.on("blender_disconnect", (blenderId) => {
     console.log("blender_disconnect: ", blenderId);
-
+    if (connectedClients.hasOwnProperty(blenderId)) {
-    if (connectedClients[blenderId]) {
       delete connectedClients[blenderId];
-      removeMessageElement(blenderId);
+      removeTableElement(blenderId);
     }
   });
 
-  // Listen for messages from the server
+  socket.on("csv_data", (data) => {
-  socket.on("blender_data", (data) => {
+    const blenderId = data["blenderId"];
-    blenderId = data["blenderId"];
+    const csvData = data["data"];
-    message = data["data"]["IFC_File"];
-
     console.log(data);
 
-    if (connectedClients[blenderId] == true) {
+    if (connectedClients.hasOwnProperty(blenderId)) {
-      updateMessageElement(blenderId, message);
+      if (!connectedClients[blenderId]) {
+        addTableElement(blenderId, csvData);
+        connectedClients[blenderId] = true; // Data has been shown
+      } else {
+        updateTableElement(blenderId, csvData);
+      }
     } else {
       connectedClients[blenderId] = true;
-      addMessageElement(blenderId, message);
+      addTableElement(blenderId, csvData);
     }
   });
 });

src/blenderbim/blenderbim/bim/data/webui/templates/index.html

@@ -5,15 +5,29 @@
     <meta name="viewport" content="width=device-width, initial-scale=1.0" />
     <title>Web Client</title>
     <link rel="stylesheet" href="/static/css/styles.css" />
-    <script src="https://code.jquery.com/jquery-3.6.0.min.js"></script>
+    <link
-    <script src="https://cdn.socket.io/4.0.0/socket.io.min.js"></script>
+      rel="stylesheet"
+      href="https://unpkg.com/tabulator-tables/dist/css/tabulator_site_dark.min.css"
+    />
+    <script
+      type="text/javascript"
+      src="https://code.jquery.com/jquery-3.6.0.min.js"
+    ></script>
+    <script
+      type="text/javascript"
+      src="https://unpkg.com/tabulator-tables/dist/js/tabulator.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/index.js"></script>
   </head>
   <body>
-    <h1>IFC Files</h1>
+    <h1>IFC Data</h1>
-    <div id="messages"></div>
+    <div id="container"></div>
   </body>
 </html>