Merge pull request #580 from lukecotter/perf-calltree-render

bug(perf): regression in call tree render performance

Author: lcottercertinia

CHANGELOG.md

@@ -12,6 +12,11 @@ and this project adheres to [Semantic Versioning](https://semver.org/spec/v2.0.0
 - Highlight and copy text to clipboard: Call Tree, Analysis and Database views ([#504][#504])
   - Previously the highlighted text would be immediately cleared
 
+### Fixed
+
+- Performance regression of Call Tree rendering ([#581][#581])
+- Call Tree not correctly keeping position when rows where hidden / shown via Details and Debug Only ([#581][#581])
+
 ## [1.16.1] - 2024-12-03
 
 ### Fixed
@@ -369,6 +374,7 @@ Skipped due to adopting odd numbering for pre releases and even number for relea
 <!-- Unreleased -->
 
 [#504]: https://github.com/certinia/debug-log-analyzer/issues/504
+[#581]: https://github.com/certinia/debug-log-analyzer/issues/581
 
 <!-- 1.16.1 -->
 

log-viewer/modules/components/calltree-view/CalltreeView.ts

@@ -571,9 +571,7 @@ export class CalltreeView extends LitElement {
           }
         },
         rowFormatter: (row: RowComponent) => {
-          requestAnimationFrame(() => {
-            formatter(row, this.findArgs);
-          });
+          formatter(row, this.findArgs);
         },
         columnCalcs: 'both',
         columnDefaults: {

log-viewer/modules/components/calltree-view/module/Find.ts

@@ -157,25 +157,27 @@ export class Find extends Module {
 }
 
 export function formatter(row: RowComponent, findArgs: FindArgs) {
-  if (!findArgs.text || !row.getData()) {
+  const { text, count } = findArgs;
+  if (!text || !count || !row.getData()) {
     return;
   }
+  requestAnimationFrame(() => {
+    const data = row.getData();
+    const highlights = {
+      indexes: data.highlightIndexes,
+      currentMatch: 0,
+    };
 
-  const data = row.getData();
-  const highlights = {
-    indexes: data.highlightIndexes,
-    currentMatch: 0,
-  };
+    row.getCells().forEach((cell) => {
+      const cellElem = cell.getElement();
+      _highlightText(cellElem, findArgs, highlights);
+    });
 
-  row.getCells().forEach((cell) => {
-    const cellElem = cell.getElement();
-    _highlightText(cellElem, findArgs, highlights);
+    //@ts-expect-error This is private to tabulator, but we have no other choice atm.
+    if (row._getSelf().type === 'row') {
+      row.normalizeHeight();
+    }
   });
-
-  //@ts-expect-error This is private to tabulator, but we have no other choice atm.
-  if (row._getSelf().type === 'row') {
-    row.normalizeHeight();
-  }
 }
 
 function _highlightText(

log-viewer/modules/components/calltree-view/module/MiddleRowFocus.ts

@@ -16,7 +16,8 @@ const middleRowFocusOption = 'middleRowFocus' as const;
 export class MiddleRowFocus extends Module {
   static moduleName = 'middleRowFocus';
 
-  goToRowId: number = 0;
+  tableHolder: HTMLElement | null = null;
+  middleRow: RowComponent | null = null;
   constructor(table: Tabulator) {
     super(table);
     this.registerTableOption(middleRowFocusOption, false);
@@ -25,60 +26,64 @@ export class MiddleRowFocus extends Module {
   initialize() {
     // @ts-expect-error not in types
     if (this.options(middleRowFocusOption)) {
+      this.tableHolder = this.table.element.querySelector('.tabulator-tableholder');
+
       this.table.on('dataTreeRowExpanded', () => {
-        window.clearTimeout(this.goToRowId);
-        middleRow = null;
+        this._clearFocusRow();
       });
 
       this.table.on('dataTreeRowCollapsed', () => {
-        window.clearTimeout(this.goToRowId);
-        middleRow = null;
+        this._clearFocusRow();
       });
 
-      let middleRow: RowComponent | null;
       this.table.on('renderStarted', () => {
-        if (this.table && !middleRow) {
-          middleRow = this._findMiddleVisibleRow(this.table);
+        if (this.table && this.tableHolder && !this.middleRow) {
+          this.middleRow = this._findMiddleVisibleRow(this.tableHolder);
         }
       });
 
       this.table.on('renderComplete', async () => {
-        const rowToScrollTo = middleRow;
-        this.goToRowId = this._scrollToRow(rowToScrollTo);
-        middleRow = null;
+        const rowToScrollTo = this.middleRow;
+        this._scrollToRow(rowToScrollTo);
+        this.middleRow = null;
       });
     }
   }
 
-  private _scrollToRow(row: RowComponent | null): number {
+  private _clearFocusRow() {
+    this.middleRow = null;
+  }
+
+  private _scrollToRow(row: RowComponent | null) {
     if (!row) {
-      return 0;
+      return;
     }
-    return window.setTimeout(() => {
-      let rowToScrollTo: RowComponent | null = row;
-      if (rowToScrollTo) {
-        //@ts-expect-error This is private to tabulator, but we have no other choice atm.
-        const internalRow = rowToScrollTo._getSelf();
-        const displayRows = internalRow.table.rowManager.getDisplayRows();
-        const canScroll = displayRows.indexOf(internalRow) !== -1;
-        if (!canScroll) {
-          const rowData = rowToScrollTo.getData() as TimedNodeProp;
-          const node = rowData.originalData;
-
-          rowToScrollTo = this._findClosestActive(this.table.getRows('active'), node.timestamp);
-        }
 
-        if (rowToScrollTo) {
-          this.table.scrollToRow(rowToScrollTo, 'center', true).then(() => {
+    let rowToScrollTo: RowComponent | null = row;
+    if (rowToScrollTo) {
+      const displayRows = this.table.rowManager.getDisplayRows();
+      //@ts-expect-error This is private to tabulator, but we have no other choice atm.
+      const internalRow = rowToScrollTo._getSelf();
+      const canScroll = displayRows.indexOf(internalRow) !== -1;
+      if (!canScroll) {
+        const rowData = rowToScrollTo.getData() as TimedNodeProp;
+        const node = rowData.originalData;
+
+        rowToScrollTo = this._findClosestActive(this.table.getRows('active'), node.timestamp);
+      }
+
+      if (rowToScrollTo) {
+        this.table.scrollToRow(rowToScrollTo, 'center', true).then(() => {
+          setTimeout(() => {
             if (rowToScrollTo) {
               rowToScrollTo
                 ?.getElement()
                 .scrollIntoView({ behavior: 'auto', block: 'center', inline: 'start' });
             }
           });
-        }
+        });
       }
-    });
+    }
   }
 
   private _findClosestActive(rows: RowComponent[], timeStamp: number): RowComponent | null {
@@ -90,6 +95,7 @@ export class MiddleRowFocus extends Module {
       end = rows.length - 1;
 
     // Iterate as long as the beginning does not encounter the end.
+    const displayRows = this.table.rowManager.getDisplayRows();
     while (start <= end) {
       // find out the middle index
       const mid = Math.floor((start + end) / 2);
@@ -99,13 +105,11 @@ export class MiddleRowFocus extends Module {
         break;
       }
       const node = (row.getData() as TimedNodeProp).originalData;
-
-      //@ts-expect-error This is private to tabulator, but we have no other choice atm.
-      const internalRow = row._getSelf();
-      const displayRows = internalRow.table.rowManager.getDisplayRows();
       const endTime = node.exitStamp ?? node.timestamp;
 
       if (timeStamp === node.timestamp) {
+        //@ts-expect-error This is private to tabulator, but we have no other choice atm.
+        const internalRow = row._getSelf();
         const isActive = displayRows.indexOf(internalRow) !== -1;
         if (isActive) {
           return row;
@@ -187,13 +191,16 @@ export class MiddleRowFocus extends Module {
     return closestIndex ? rows[closestIndex] || null : null;
   }
 
-  private _findMiddleVisibleRow(table: Tabulator) {
-    const visibleRows = table.getRows('visible');
-    if (visibleRows.length === 1) {
-      return visibleRows[0] || null;
+  private _findMiddleVisibleRow(tableHolder: HTMLElement) {
+    const visibleRows = this.table.getRows('visible');
+    const len = visibleRows.length;
+    if (len === 0) {
+      return null;
+    } else if (len === 1) {
+      return visibleRows[0] ?? null;
     }
 
-    const tableRect = table.element.getBoundingClientRect();
+    const tableRect = tableHolder.getBoundingClientRect();
     const totalHeight = Math.round(tableRect.height / 2);
 
     let currentHeight = 0;

log-viewer/modules/components/database-view/DMLView.ts

@@ -338,9 +338,7 @@ export class DMLView extends LitElement {
           row.normalizeHeight();
         }
 
-        requestAnimationFrame(() => {
-          formatter(row, this.findArgs);
-        });
+        formatter(row, this.findArgs);
       },
     });
 

log-viewer/modules/components/database-view/SOQLView.ts

@@ -477,9 +477,7 @@ export class SOQLView extends LitElement {
           row.normalizeHeight();
         }
 
-        requestAnimationFrame(() => {
-          formatter(row, this.findArgs);
-        });
+        formatter(row, this.findArgs);
       },
     });