reorganize JS code to be outside of document.ready

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

@@ -1,15 +1,78 @@
+// keeps track of blenders connected in form of
+// {shown:bool, filename:string, headers:array}
+const connectedClients = {};
+let socket;
+
+// Document ready function
 $(document).ready(function () {
-  // Connect to the Socket.IO server
+  connectSocket();
+});
+
+// Function to connect to Socket.IO server
+function connectSocket() {
   const url = "ws://localhost:" + SOCKET_PORT + "/web";
-  const socket = io(url);
+  socket = io(url);
   console.log("socket: ", socket);
 
-  // keeps track of blenders connected in form of
+  // Register socket event handlers
-  // {shown:bool, filename:name}
+  socket.on("blender_connect", handleBlenderConnect);
-  const connectedClients = {};
+  socket.on("blender_disconnect", handleBlenderDisconnect);
+  socket.on("csv_data", handleCsvData);
+}
 
-  // add a new talbe with data and filename
+// Function to handle 'blender_connect' event
-  function addTableElement(blenderId, csvData, filename) {
+function handleBlenderConnect(blenderId) {
+  console.log("blender_connect: ", blenderId);
+  if (!connectedClients.hasOwnProperty(blenderId)) {
+    connectedClients[blenderId] = { shown: false, ifc_file: "" };
+  }
+}
+
+// Function to handle 'blender_disconnect' event
+function handleBlenderDisconnect(blenderId) {
+  console.log("blender_disconnect: ", blenderId);
+  if (connectedClients.hasOwnProperty(blenderId)) {
+    delete connectedClients[blenderId];
+    removeTableElement(blenderId);
+  }
+}
+
+// Function to handle 'csv_data' event
+function handleCsvData(data) {
+  const blenderId = data["blenderId"];
+  const csvData = data["data"]["data"];
+  const filename = data["data"]["IFC_File"];
+  console.log(data);
+
+  if (connectedClients.hasOwnProperty(blenderId)) {
+    if (!connectedClients[blenderId].shown) {
+      connectedClients[blenderId] = {
+        shown: true,
+        ifc_file: filename,
+        headers: [],
+      };
+      addTableElement(blenderId, csvData, filename);
+    } else {
+      updateTableElement(blenderId, csvData, filename);
+    }
+  } else {
+    connectedClients[blenderId] = {
+      shown: true,
+      ifc_file: filename,
+      headers: [],
+    };
+    addTableElement(blenderId, csvData, filename);
+  }
+}
+
+// Function to add a new table with data and filename
+function addTableElement(blenderId, csvData, filename) {
+  // store headers of the csv data
+  const firstLine = csvData.indexOf("\n");
+  const csvHeaders = csvData.substring(0, firstLine).split(",");
+  connectedClients[blenderId].headers = csvHeaders;
+
+  console.log(connectedClients[blenderId]);
   const tableContainer = $("<div></div>")
     .addClass("table-container")
     .attr("id", "container-" + blenderId);
@@ -27,6 +90,51 @@ $(document).ready(function () {
   tableContainer.append(tableDiv);
   $("#container").append(tableContainer);
 
+  function createHeaderMenu(definitions) {
+    var menu = [];
+
+    for (let column of definitions) {
+      // Create text element for checkbox
+      if (!column.hasOwnProperty("key")) {
+        column.visible = true;
+      }
+      let checkbox = document.createElement("span");
+      checkbox.textContent = column.visible ? "\u2611" : "\u2610"; // ☑ or ☐
+
+      // Build label
+      let label = document.createElement("span");
+      let title = document.createElement("span");
+
+      title.textContent = " " + column.title;
+
+      label.appendChild(checkbox);
+      label.appendChild(title);
+
+      // Create menu item
+      menu.push({
+        label: label,
+        action: function (e) {
+          // Prevent menu closing
+          e.stopPropagation();
+
+          // Toggle current column visibility
+          column.visible = !column.visible;
+          console.log(column.title, column.visible);
+          // Change menu item checkbox
+          if (column.visible) {
+            table.showColumn(column.title);
+            checkbox.textContent = "\u2611"; // ☑
+          } else {
+            table.hideColumn(column.title);
+            checkbox.textContent = "\u2610"; // ☐
+          }
+        },
+      });
+    }
+
+    return menu;
+  }
+
   var table = new Tabulator("#table-" + blenderId, {
     height: "400px",
     index: "GlobalId",
@@ -35,6 +143,14 @@ $(document).ready(function () {
     autoColumns: true,
     selectableRows: 1,
     layout: "fitColumns",
+    autoColumnsDefinitions: function (definitions) {
+      menu = createHeaderMenu(definitions, table);
+      definitions.forEach((column) => {
+        column.visible = true;
+        column.headerMenu = menu;
+      });
+      return definitions;
+    },
   });
 
   table.on("rowSelected", function (row) {
@@ -52,55 +168,46 @@ $(document).ready(function () {
     };
     socket.emit("web_operator", msg);
   });
-  }
+}
+
+// Function to update table and filename
+function updateTableElement(blenderId, csvData, filename) {
+  // check if the headers are the same
+  // if yes, just replace the data
+  // else, replace the whole data and column definations
+  const firstLine = csvData.indexOf("\n");
+  const newHeaders = csvData.substring(0, firstLine).split(",");
+  const sameHeaders = compareHeaders(
+    connectedClients[blenderId].headers,
+    newHeaders
+  );
 
-  // update table and filename
-  function updateTableElement(blenderId, csvData, filename) {
-    // TODO: see if we can only replace updated rows only.
-    // TODO: and handle case where new columns are added
-    // for now just replace the data in the table
   const table = Tabulator.findTable("#table-" + blenderId)[0];
   if (table) {
+    if (sameHeaders) {
+      table.replaceData(csvData, { importFormat: "csv" });
+    } else {
       table.setData(csvData);
-      $("#title-" + blenderId).text(filename); // Update the title
+      connectedClients[blenderId].headers = newHeaders;
     }
+    $("#title-" + blenderId).text(filename);
   }
+}
 
-  function removeTableElement(blenderId) {
+// Function to remove table element
+function removeTableElement(blenderId) {
   $("#container-" + blenderId).remove();
-  }
+}
 
-  socket.on("blender_connect", (blenderId) => {
+// Utility function to compare two csv header
-    console.log("blender_connect: ", blenderId);
+function compareHeaders(headers1, headers2) {
-    if (!connectedClients.hasOwnProperty(blenderId)) {
+  if (headers1.length !== headers2.length) {
-      connectedClients[blenderId] = { shown: false, ifc_file: "" };
+    return false;
   }
-  });
+  for (let i = 0; i < headers1.length; i++) {
-
+    if (headers1[i] !== headers2[i]) {
-  socket.on("blender_disconnect", (blenderId) => {
+      return false;
-    console.log("blender_disconnect: ", blenderId);
-    if (connectedClients.hasOwnProperty(blenderId)) {
-      delete connectedClients[blenderId];
-      removeTableElement(blenderId);
     }
-  });
-
-  socket.on("csv_data", (data) => {
-    const blenderId = data["blenderId"];
-    const csvData = data["data"]["data"];
-    const filename = data["data"]["IFC_File"];
-    console.log(data);
-
-    if (connectedClients.hasOwnProperty(blenderId)) {
-      if (!connectedClients[blenderId].shown) {
-        addTableElement(blenderId, csvData, filename);
-        connectedClients[blenderId] = { shown: true, ifc_file: filename };
-      } else {
-        updateTableElement(blenderId, csvData, filename);
   }
-    } else {
+  return true;
-      connectedClients[blenderId] = { shown: true, ifc_file: filename };
+}
-      addTableElement(blenderId, csvData, filename);
-    }
-  });
-});