From 2ca3f86fc94068d5222a4b076697dc852447fd1b Mon Sep 17 00:00:00 2001
From: Ziad-I <68874104+Ziad-I@users.noreply.github.com>
Date: Fri, 23 Aug 2024 21:30:21 +0300
Subject: [PATCH] add RMB context menu to tables to set top calc type

---
 .../bonsai/bim/data/webui/static/js/index.js  | 54 +++++++++++++++----
 1 file changed, 45 insertions(+), 9 deletions(-)

diff --git a/src/bonsai/bonsai/bim/data/webui/static/js/index.js b/src/bonsai/bonsai/bim/data/webui/static/js/index.js
index 3fac376f28..d4b6d7fb73 100644
--- a/src/bonsai/bonsai/bim/data/webui/static/js/index.js
+++ b/src/bonsai/bonsai/bim/data/webui/static/js/index.js
@@ -207,8 +207,35 @@ function addTableElement(blenderId, csvData, filename) {
     return menu;
   }
 
-  var containerHeight=$('.table-container').height();
-  var h3Height=$('.table-container>h3').height();
+  // create right click context menu for choosing column top calculation
+  function createColumnContextMenu(column) {
+    const field = column.field;
+    const calculations = ["sum", "avg", "max", "min"];
+
+    // label is the item label in the menu
+    // update column defination on clicking an item
+    // specifically the topCalc and pass calc type to the topCalcFormatter function
+    // uisng the topCalcFormatterParams field
+    return calculations.map((calc) => ({
+      label: `Show ${
+        calc.charAt(0).toUpperCase() + calc.slice(1)
+      } for ${field}`,
+      action: (e, cell) =>
+        cell
+          .getColumn()
+          .updateDefinition({ topCalc: calc, topCalcFormatterParams: calc }),
+    }));
+  }
+
+  function calcFormatter(cell, formatterParams, onRendered) {
+    // formatterParams is anything in the topCalcFormatterParams field in the column definition
+    // so we pass the calculation type to display what the calculation type is
+    return `${formatterParams}: ${cell.getValue()}`;
+  }
+
+  var containerHeight = $(".table-container").height();
+  var h3Height = $(".table-container>h3").height();
+
   var table = new Tabulator("#table-" + blenderId, {
     placeholder: "No data to display",
     resizableColumnGuide: true,
@@ -222,14 +249,21 @@ function addTableElement(blenderId, csvData, filename) {
     movableColumns: true,
     // Our fields are never nested, and we use the "." character in queries
     nestedFieldSeparator: false,
+    // defines column defualts that are applied to all columns
+    columnDefaults: {
+      visible: true,
+      headerFilter: true,
+      topCalc: "sum",
+      topCalcFormatter: calcFormatter,
+      topCalcFormatterParams: "sum",
+    },
+    // defines a callback to edit the column definition generated by autoColumns
+    // that cannot be set as default
     autoColumnsDefinitions: function (definitions) {
-      menu = createHeaderMenu(definitions, table);
+      headerMenu = createHeaderMenu(definitions, table);
       definitions.forEach((column) => {
-        column.visible = true;
-        column.headerFilter = true;
-        column.headerMenu = menu;
-        // TODO: more user control to choose function, style at bottomCalc
-        column.topCalc = 'sum';
+        column.headerMenu = headerMenu;
+        column.contextMenu = createColumnContextMenu(column);
       });
       return definitions;
     },
@@ -239,7 +273,9 @@ function addTableElement(blenderId, csvData, filename) {
     .css("margin-left", "10px")
     .css("cursor", "pointer");
   tableTitle.append(downloadCsv);
-  downloadCsv.on('click', function() { table.download("csv", "data.csv"); })
+  downloadCsv.on("click", function () {
+    table.download("csv", "data.csv");
+  });
 
   table.on("rowSelected", function (row) {
     var index = row.getIndex(); // the guid of the object