Merge pull request #501 from lukecotter/feat-update-tabulator-to-v6

chore: update tabulator to v6
certinia · Mar 28, 2024 · dadf874 · dadf874
2 parents 4a98fde + a5a4557
commit dadf874
Show file tree

Hide file tree

Showing 9 changed files with 881 additions and 245 deletions.
diff --git a/CHANGELOG.md b/CHANGELOG.md
@@ -14,6 +14,8 @@ and this project adheres to [Semantic Versioning](https://semver.org/spec/v2.0.0
 
 ### Changed
 
+- Huge perfornmance improvement for the Call Tree, all operations should be 3X faster. ([#500][#500])
+  - Includes expanding, filtering and scrolling.
 - Call Tree to keep currently visible rows in view when filtering / expanding([#481][#481])
   - This wil keep what you are currentl looking at in view instead of it disapearing
 - Timeline errors can be clicked to go to the Call Tree ([#481][#481])
@@ -351,6 +353,7 @@ Skipped due to adopting odd numbering for pre releases and even number for relea
 
 <!-- Unreleased -->
 
+[#500]: https://github.com/certinia/debug-log-analyzer/issues/500
 [#65]: https://github.com/certinia/debug-log-analyzer/issues/65
 [#481]: https://github.com/certinia/debug-log-analyzer/issues/481
 

diff --git a/log-viewer/modules/components/AnalysisView.ts b/log-viewer/modules/components/AnalysisView.ts
@@ -9,7 +9,8 @@ import {
 } from '@vscode/webview-ui-toolkit';
 import { LitElement, css, html, unsafeCSS, type PropertyValues } from 'lit';
 import { customElement, property } from 'lit/decorators.js';
-import { TabulatorFull as Tabulator, type ColumnComponent } from 'tabulator-tables';
+import { Tabulator, type ColumnComponent } from 'tabulator-tables';
+import * as CommonModules from '../datagrid/module/CommonModules.js';
 
 import NumberAccessor from '../datagrid/dataaccessor/Number.js';
 import { progressFormatter } from '../datagrid/format/Progress.js';
@@ -142,10 +143,11 @@ async function renderAnalysis(rootMethod: ApexLog) {
     },
   ];
 
+  Tabulator.registerModule(Object.values(CommonModules));
   Tabulator.registerModule(RowKeyboardNavigation);
   analysisTable = new Tabulator(tableContainer, {
     rowKeyboardNavigation: true,
-    selectable: 1,
+    selectableRows: 1,
     data: metricList,
     layout: 'fitColumns',
     placeholder: 'No Analysis Available',

diff --git a/log-viewer/modules/components/calltree-view/CalltreeView.ts b/log-viewer/modules/components/calltree-view/CalltreeView.ts
@@ -12,7 +12,8 @@
 import { provideVSCodeDesignSystem, vsCodeCheckbox } from '@vscode/webview-ui-toolkit';
 import { LitElement, css, html, unsafeCSS, type PropertyValues } from 'lit';
 import { customElement, property } from 'lit/decorators.js';
-import { TabulatorFull as Tabulator, type RowComponent } from 'tabulator-tables';
+import { Tabulator, type RowComponent } from 'tabulator-tables';
+import * as CommonModules from '../../datagrid/module/CommonModules.js';
 
 import MinMaxEditor from '../../datagrid/editors/MinMax.js';
 import MinMaxFilter from '../../datagrid/filters/MinMax.js';
@@ -268,6 +269,7 @@ export async function renderCallTree(
   }
 
   return new Promise((resolve) => {
+    Tabulator.registerModule(Object.values(CommonModules));
     Tabulator.registerModule([RowKeyboardNavigation, RowNavigation]);
 
     const selfTimeFilterCache = new Map<string, boolean>();
@@ -285,7 +287,7 @@ export async function renderCallTree(
       dataTree: true,
       dataTreeChildColumnCalcs: true,
       dataTreeBranchElement: '<span/>',
-      selectable: 1,
+      selectableRows: 1,
       // @ts-expect-error custom property for datagrid/module/RowKeyboardNavigation
       rowKeyboardNavigation: true,
       columnDefaults: {

diff --git a/log-viewer/modules/components/database-view/DatabaseView.ts b/log-viewer/modules/components/database-view/DatabaseView.ts
@@ -10,12 +10,14 @@ import {
 import { LitElement, css, html, render, unsafeCSS, type PropertyValues } from 'lit';
 import { customElement, property, state } from 'lit/decorators.js';
 import {
-  TabulatorFull as Tabulator,
+  Tabulator,
   type ColumnComponent,
   type GroupComponent,
   type RowComponent,
 } from 'tabulator-tables';
 
+import * as CommonModules from '../../datagrid/module/CommonModules.js';
+
 import { DatabaseAccess } from '../../Database.js';
 import NumberAccessor from '../../datagrid/dataaccessor/Number.js';
 import Number from '../../datagrid/format/Number.js';
@@ -199,6 +201,7 @@ export class DatabaseView extends LitElement {
           this.dmlLines = dbAccess.getDMLLines() || [];
           this.soqlLines = dbAccess.getSOQLLines() || [];
 
+          Tabulator.registerModule(Object.values(CommonModules));
           Tabulator.registerModule([RowKeyboardNavigation]);
           renderDMLTable(dmlTableWrapper, this.dmlLines);
           renderSOQLTable(soqlTableWrapper, this.soqlLines);
@@ -270,7 +273,7 @@ function renderDMLTable(dmlTableContainer: HTMLElement, dmlLines: DMLBeginLine[]
     },
 
     groupToggleElement: 'header',
-    selectableCheck: function (row) {
+    selectableRowsCheck: function (row: RowComponent) {
       return !row.getData().isDetail;
     },
     dataTree: true,
@@ -468,8 +471,7 @@ function renderSOQLTable(soqlTableContainer: HTMLElement, soqlLines: SOQLExecute
       </div>`;
     },
     groupToggleElement: 'header',
-
-    selectableCheck: function (row) {
+    selectableRowsCheck: function (row: RowComponent) {
       return !row.getData().isDetail;
     },
     dataTree: true,

diff --git a/log-viewer/modules/datagrid/module/CommonModules.ts b/log-viewer/modules/datagrid/module/CommonModules.ts
@@ -0,0 +1,22 @@
+export {
+  AccessorModule,
+  ClipboardModule,
+  ColumnCalcsModule,
+  DataTreeModule,
+  DownloadModule,
+  EditModule,
+  ExportModule,
+  FilterModule,
+  FormatModule,
+  GroupRowsModule,
+  InteractionModule,
+  KeybindingsModule,
+  MenuModule,
+  ResizeColumnsModule,
+  ResizeRowsModule,
+  ResizeTableModule,
+  ResponsiveLayoutModule,
+  SelectRowModule,
+  SortModule,
+  TooltipModule,
+} from 'tabulator-tables';
diff --git a/log-viewer/modules/datagrid/module/RowKeyboardNavigation.ts b/log-viewer/modules/datagrid/module/RowKeyboardNavigation.ts
@@ -15,7 +15,11 @@ const rowNavOptionName = 'rowKeyboardNavigation' as const;
  * in keybings e.g  keybindings: { previousRow: false },
  */
 export class RowKeyboardNavigation extends Module {
+  static moduleName = 'rowNavigation';
+  static moduleExtensions = this.getModuleExtensions();
+
   localTable: Tabulator;
+
   tableHolder: HTMLElement | null = null;
   constructor(table: Tabulator) {
     super(table);
@@ -40,125 +44,128 @@ export class RowKeyboardNavigation extends Module {
     !selectedRow && row.select();
     this.tableHolder?.focus();
   }
-}
-
-const rowNavActions: { [key: string]: unknown } = {
-  previousRow: function (e: KeyboardEvent) {
-    // @ts-expect-error see types todo
-    if (!this.options(rowNavOptionName)) {
-      return;
-    }
-    const targetElem = e.target as HTMLElement;
-    if (!targetElem.classList.contains('tabulator-tableholder')) {
-      return;
-    }
-    e.preventDefault();
-    const table = this.table as Tabulator;
-    const row = table.getSelectedRows()[0];
-    const previousRow = row?.getPrevRow();
-    if (row && previousRow) {
-      table.blockRedraw();
-      row.deselect();
-      previousRow.select();
-      table.restoreRedraw();
-      previousRow.getElement().scrollIntoView({ block: 'nearest' });
-    }
-  },
-  nextRow: function (e: KeyboardEvent) {
-    // @ts-expect-error see types todo
-    if (!this.options(rowNavOptionName)) {
-      return;
-    }
 
-    const targetElem = e.target as HTMLElement;
-    if (!targetElem.classList.contains('tabulator-tableholder')) {
-      return;
-    }
-    e.preventDefault();
+  private static getModuleExtensions() {
+    return {
+      keybindings: {
+        actions: {
+          previousRow: function (e: KeyboardEvent) {
+            // @ts-expect-error see types todo
+            if (!this.options(rowNavOptionName)) {
+              return;
+            }
+            const targetElem = e.target as HTMLElement;
+            if (!targetElem.classList.contains('tabulator-tableholder')) {
+              return;
+            }
+            e.preventDefault();
+            // @ts-expect-error this.table exists
+            const table = this.table as Tabulator;
+            const row = table.getSelectedRows()[0];
+            const previousRow = row?.getPrevRow();
+            if (row && previousRow) {
+              table.blockRedraw();
+              row.deselect();
+              previousRow.select();
+              table.restoreRedraw();
+              previousRow.getElement().scrollIntoView({ block: 'nearest' });
+            }
+          },
+          nextRow: function (e: KeyboardEvent) {
+            // @ts-expect-error see types todo
+            if (!this.options(rowNavOptionName)) {
+              return;
+            }
 
-    const table = this.table as Tabulator;
-    const row = table.getSelectedRows()[0];
-    const nextRow = row?.getNextRow();
-    if (row && nextRow) {
-      table.blockRedraw();
-      row.deselect();
-      nextRow.select();
-      table.restoreRedraw();
-      nextRow.getElement().scrollIntoView({ block: 'nearest' });
-    }
-  },
-  expandRow: function (e: KeyboardEvent) {
-    // @ts-expect-error see types todo
-    if (!this.options(rowNavOptionName)) {
-      return;
-    }
+            const targetElem = e.target as HTMLElement;
+            if (!targetElem.classList.contains('tabulator-tableholder')) {
+              return;
+            }
+            e.preventDefault();
+            // @ts-expect-error this.table exists
+            const table = this.table as Tabulator;
+            const row = table.getSelectedRows()[0];
+            const nextRow = row?.getNextRow();
+            if (row && nextRow) {
+              table.blockRedraw();
+              row.deselect();
+              nextRow.select();
+              table.restoreRedraw();
+              nextRow.getElement().scrollIntoView({ block: 'nearest' });
+            }
+          },
+          expandRow: function (e: KeyboardEvent) {
+            // @ts-expect-error see types todo
+            if (!this.options(rowNavOptionName)) {
+              return;
+            }
 
-    const targetElem = e.target as HTMLElement;
-    if (!targetElem.classList.contains('tabulator-tableholder')) {
-      return;
-    }
+            const targetElem = e.target as HTMLElement;
+            if (!targetElem.classList.contains('tabulator-tableholder')) {
+              return;
+            }
+            // @ts-expect-error this.table exists
+            const table = this.table as Tabulator;
+            const row = table.getSelectedRows()[0];
+            if (!row || !table.options.dataTree) {
+              return;
+            }
+            e.preventDefault();
 
-    const table = this.table as Tabulator;
-    const row = table.getSelectedRows()[0];
-    if (!row || !table.options.dataTree) {
-      return;
-    }
-    e.preventDefault();
+            if (row.isTreeExpanded()) {
+              const nextRow = row?.getNextRow();
+              if (nextRow && nextRow.getTreeParent() === row) {
+                table.blockRedraw();
+                row.deselect();
+                nextRow.select();
+                table.restoreRedraw();
+                nextRow.getElement().scrollIntoView({ block: 'nearest' });
+              }
+            } else {
+              row.treeExpand();
+            }
+          },
+          collapseRow: function (e: KeyboardEvent) {
+            // @ts-expect-error see types todo
+            if (!this.options(rowNavOptionName)) {
+              return;
+            }
 
-    if (row.isTreeExpanded()) {
-      const nextRow = row?.getNextRow();
-      if (nextRow && nextRow.getTreeParent() === row) {
-        table.blockRedraw();
-        row.deselect();
-        nextRow.select();
-        table.restoreRedraw();
-        nextRow.getElement().scrollIntoView({ block: 'nearest' });
-      }
-    } else {
-      row.treeExpand();
-    }
-  },
-  collapseRow: function (e: KeyboardEvent) {
-    // @ts-expect-error see types todo
-    if (!this.options(rowNavOptionName)) {
-      return;
-    }
+            const targetElem = e.target as HTMLElement;
+            if (!targetElem.classList.contains('tabulator-tableholder')) {
+              return;
+            }
+            // @ts-expect-error this.table exists
+            const table = this.table as Tabulator;
+            const row = table.getSelectedRows()[0];
+            if (!row || !table.options.dataTree) {
+              return;
+            }
+            e.preventDefault();
 
-    const targetElem = e.target as HTMLElement;
-    if (!targetElem.classList.contains('tabulator-tableholder')) {
-      return;
-    }
-
-    const table = this.table as Tabulator;
-    const row = table.getSelectedRows()[0];
-    if (!row || !table.options.dataTree) {
-      return;
-    }
-    e.preventDefault();
+            if (!row.isTreeExpanded()) {
+              const prevRow = row?.getTreeParent();
+              if (prevRow) {
+                table.blockRedraw();
+                row.deselect();
+                prevRow.select();
+                table.restoreRedraw();
+                prevRow.getElement().scrollIntoView({ block: 'nearest' });
+              }
+            } else {
+              row.treeCollapse();
+            }
+          },
+        },
+        bindings: {
+          previousRow: '38',
+          nextRow: '40',
+          expandRow: '39',
+          collapseRow: '37',
+        },
+      },
+    };
+  }
+}
 
-    if (!row.isTreeExpanded()) {
-      const prevRow = row?.getTreeParent();
-      if (prevRow) {
-        table.blockRedraw();
-        row.deselect();
-        prevRow.select();
-        table.restoreRedraw();
-        prevRow.getElement().scrollIntoView({ block: 'nearest' });
-      }
-    } else {
-      row.treeCollapse();
-    }
-  },
-};
-const bindings = {
-  previousRow: '38',
-  nextRow: '40',
-  expandRow: '39',
-  collapseRow: '37',
-};
-RowKeyboardNavigation.moduleName = 'rowNavigation';
 Tabulator.registerModule(KeybindingsModule);
-// @ts-expect-error moduleName needs adding to tabulator types
-Tabulator.extendModule(KeybindingsModule.moduleName, 'actions', rowNavActions);
-// @ts-expect-error moduleName needs adding to tabulator types
-Tabulator.extendModule(KeybindingsModule.moduleName, 'bindings', bindings);
diff --git a/log-viewer/modules/datagrid/module/RowNavigation.ts b/log-viewer/modules/datagrid/module/RowNavigation.ts
@@ -4,6 +4,8 @@
 import { Module, Tabulator, type RowComponent } from 'tabulator-tables';
 
 export class RowNavigation extends Module {
+  static moduleName = 'rowNavigation';
+
   constructor(table: Tabulator) {
     super(table);
     // @ts-expect-error registerTableFunction() needs adding to tabulator types