Merge pull request #623 from lukecotter/fix-find-in-groups

fix: find to work in groups

Author: lcottercertinia

log-viewer/modules/components/analysis-view/AnalysisView.ts

@@ -185,7 +185,9 @@ export class AnalysisView extends LitElement {
     return (this.tableContainer ??= this.renderRoot?.querySelector('#analysis-table'));
   }
 
-  _findEvt = ((event: FindEvt) => this._find(event)) as EventListener;
+  _findEvt = ((event: FindEvt) => {
+    this._find(event);
+  }) as EventListener;
 
   _groupBy(event: Event) {
     const target = event.target as HTMLInputElement;
@@ -208,7 +210,7 @@ export class AnalysisView extends LitElement {
     });
   }
 
-  _find(e: CustomEvent<{ text: string; count: number; options: { matchCase: boolean } }>) {
+  async _find(e: CustomEvent<{ text: string; count: number; options: { matchCase: boolean } }>) {
     const isTableVisible = !!this.analysisTable?.element?.clientHeight;
     if (!isTableVisible && !this.totalMatches) {
       return;
@@ -226,8 +228,8 @@ export class AnalysisView extends LitElement {
     }
     if (newSearch || clearHighlights) {
       this.blockClearHighlights = true;
-      //@ts-expect-error This is a custom function added in by Find custom module
-      const result = this.analysisTable.find(this.findArgs);
+      // @ts-expect-error This is a custom function added in by Find custom module
+      const result = await this.analysisTable?.find(this.findArgs);
       this.blockClearHighlights = false;
       this.totalMatches = result.totalMatches;
       this.findMap = result.matchIndexes;

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

@@ -218,7 +218,9 @@ export class CalltreeView extends LitElement {
     `;
   }
 
-  _findEvt = ((event: FindEvt) => this._find(event)) as EventListener;
+  _findEvt = ((event: FindEvt) => {
+    this._find(event);
+  }) as EventListener;
 
   _getAllTypes(data: LogLine[]): string[] {
     const flattened = this._flatten(data);
@@ -345,7 +347,7 @@ export class CalltreeView extends LitElement {
     this.calltreeTable.goToRow(treeRow, { scrollIfVisible: true, focusRow: true });
   }
 
-  _find(e: CustomEvent<{ text: string; count: number; options: { matchCase: boolean } }>) {
+  async _find(e: CustomEvent<{ text: string; count: number; options: { matchCase: boolean } }>) {
     const isTableVisible = !!this.calltreeTable?.element?.clientHeight;
     if (!isTableVisible && !this.totalMatches) {
       return;
@@ -365,7 +367,7 @@ export class CalltreeView extends LitElement {
     if (newSearch || clearHighlights) {
       this.blockClearHighlights = true;
       //@ts-expect-error This is a custom function added in by Find custom module
-      const result = this.calltreeTable.find(this.findArgs);
+      const result = await this.calltreeTable.find(this.findArgs);
       this.blockClearHighlights = false;
       this.totalMatches = result.totalMatches;
       this.findMap = result.matchIndexes;

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

@@ -1,13 +1,7 @@
 /*
  * Copyright (c) 2024 Certinia Inc. All rights reserved.
  */
-import {
-  Module,
-  type CellComponent,
-  type GroupComponent,
-  type RowComponent,
-  type Tabulator,
-} from 'tabulator-tables';
+import { Module, type GroupComponent, type RowComponent, type Tabulator } from 'tabulator-tables';
 
 export class Find extends Module {
   static moduleName = 'FindModule';
@@ -22,14 +16,15 @@ export class Find extends Module {
 
   initialize() {}
 
-  _find(findArgs: FindArgs) {
+  async _find(findArgs: FindArgs) {
     const result: { totalMatches: number; matchIndexes: { [key: number]: RowComponent } } = {
       totalMatches: 0,
       matchIndexes: {},
     };
 
     this._clearMatches();
 
+    // We only do this when groups exist to get row order
     const flattenFromGrps = (row: GroupComponent): RowComponent[] => {
       const mergedArray: RowComponent[] = [];
       Array.prototype.push.apply(mergedArray, row.getRows());
@@ -52,51 +47,50 @@ export class Find extends Module {
     const regex = new RegExp(searchString, `g${findArgs.options.matchCase ? '' : 'i'}`);
 
     tbl.blockRedraw();
-    let totalMatches = 0;
-    const rowsToReformat = [];
-    const len = flattenedRows.length;
-    for (let i = 0; i < len; i++) {
-      const row = flattenedRows[i];
-      if (!row) {
-        continue;
-      }
-
-      let clearHighlight = false;
+    for (const row of flattenedRows) {
       const data = row.getData();
-      if (data.highlightIndexes?.length) {
-        clearHighlight = true;
-        rowsToReformat.push(row);
+      if (data.highlightIndexes?.length > 0) {
+        data.highlightIndexes.length = 0;
+        row.reformat();
+      } else if (!data.highlightIndexes) {
+        data.highlightIndexes = [];
       }
+    }
+    tbl.restoreRedraw();
 
-      data.highlightIndexes = [];
-
-      if (!searchString) {
-        continue;
-      }
-      let reformat = false;
-
-      row.getCells().forEach((cell: CellComponent) => {
-        const elem = cell.getElement();
-        const matchCount = this._countMatches(elem, findArgs, regex);
-        if (matchCount) {
-          const kLen = matchCount;
-          for (let k = 0; k < kLen; k++) {
-            totalMatches++;
-            data.highlightIndexes.push(totalMatches);
-            result.matchIndexes[totalMatches] = row;
-          }
-          reformat = true;
+    await new Promise((resolve) => requestAnimationFrame(resolve));
+    let totalMatches = 0;
+    if (searchString) {
+      const rowsToReformat = new Set<RowComponent>();
+      const len = flattenedRows.length;
+      for (let i = 0; i < len; i++) {
+        const row = flattenedRows[i];
+        if (!row) {
+          continue;
         }
-      });
 
-      if (reformat && !clearHighlight) {
-        rowsToReformat.push(row);
+        const data = row.getData();
+        data.highlightIndexes = [];
+        row.getCells().forEach((cell) => {
+          const elem = cell.getElement();
+          const matchCount = this._countMatches(elem, findArgs, regex);
+          if (matchCount) {
+            const kLen = matchCount;
+            for (let k = 0; k < kLen; k++) {
+              totalMatches++;
+              data.highlightIndexes.push(totalMatches);
+              result.matchIndexes[totalMatches] = row;
+            }
+            rowsToReformat.add(row);
+          }
+        });
       }
+      tbl.blockRedraw();
+      rowsToReformat.forEach((row) => {
+        row?.reformat();
+      });
+      tbl.restoreRedraw();
     }
-    rowsToReformat.forEach((row) => {
-      row?.reformat();
-    });
-    tbl.restoreRedraw();
 
     result.totalMatches = totalMatches;
     return result;
@@ -212,21 +206,28 @@ export class Find extends Module {
 }
 
 export function formatter(row: RowComponent, findArgs: FindArgs) {
-  const { text, count } = findArgs;
-  if (!text || !count || !row.getData() || !row.getData().highlightIndexes?.length) {
+  const { text } = findArgs;
+  if (!text) {
     return;
   }
-
   const data = row.getData();
+  if (!data || !data.highlightIndexes?.length) {
+    return;
+  }
+
   const highlights = {
     indexes: data.highlightIndexes,
     currentMatch: 0,
   };
-
   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();
+  }
 }
 
 function _highlightText(

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

@@ -159,7 +159,9 @@ export class DMLView extends LitElement {
     this.dmlTable?.download('csv', 'dml.csv', { bom: true, delimiter: ',' });
   }
 
-  _findEvt = ((event: FindEvt) => this._find(event)) as EventListener;
+  _findEvt = ((event: FindEvt) => {
+    this._find(event);
+  }) as EventListener;
 
   _dmlGroupBy(event: Event) {
     const target = event.target as HTMLInputElement;
@@ -219,7 +221,7 @@ export class DMLView extends LitElement {
     this.oldIndex = highlightIndex;
   }
 
-  _find(e: CustomEvent<{ text: string; count: number; options: { matchCase: boolean } }>) {
+  async _find(e: CustomEvent<{ text: string; count: number; options: { matchCase: boolean } }>) {
     const isTableVisible = !!this.dmlTable?.element?.clientHeight;
     if (!isTableVisible && !this.totalMatches) {
       return;
@@ -242,7 +244,7 @@ export class DMLView extends LitElement {
     if (newSearch || clearHighlights) {
       this.blockClearHighlights = true;
       //@ts-expect-error This is a custom function added in by Find custom module
-      const result = this.dmlTable.find(this.findArgs);
+      const result = await this.dmlTable.find(this.findArgs);
       this.blockClearHighlights = false;
       this.totalMatches = result.totalMatches;
       this.findMap = result.matchIndexes;
@@ -270,7 +272,6 @@ export class DMLView extends LitElement {
         });
       }
     }
-    const dmlText = this.sortByFrequency(dmlData || [], 'dml');
 
     this.dmlTable = new Tabulator(dmlTableContainer, {
       height: '100%',
@@ -296,8 +297,6 @@ export class DMLView extends LitElement {
       groupSort: true,
       groupClosedShowCalcs: true,
       groupStartOpen: false,
-      groupValues: [dmlText],
-      groupBy: ['dml'],
       groupToggleElement: false,
       selectableRowsCheck: function (row: RowComponent) {
         return !row.getData().isDetail;
@@ -379,7 +378,6 @@ export class DMLView extends LitElement {
         if (data.isDetail && data.timestamp) {
           const detailContainer = this.createDetailPanel(data.timestamp);
           row.getElement().replaceChildren(detailContainer);
-          row.normalizeHeight();
         }
 
         requestAnimationFrame(() => {
@@ -422,22 +420,39 @@ export class DMLView extends LitElement {
       row.getCell('dml').getElement().style.height = origRowHeight + 'px';
     });
 
-    this.dmlTable.on('renderStarted', () => {
-      if (!this.blockClearHighlights && this.totalMatches > 0) {
-        this._resetFindWidget();
-        this._clearSearchHighlights();
-      }
-
+    this.dmlTable.on('tableBuilt', () => {
       const holder = this._getTableHolder();
-      holder.style.minHeight = holder.clientHeight + 'px';
       holder.style.overflowAnchor = 'none';
+      //@ts-expect-error This is a custom function added in the GroupSort custom module
+      this.dmlTable?.setSortedGroupBy('dml');
     });
 
     this.dmlTable.on('renderComplete', () => {
       const holder = this._getTableHolder();
       const table = this._getTable();
       holder.style.minHeight = Math.min(holder.clientHeight, table.clientHeight) + 'px';
     });
+
+    this.dmlTable.on('dataSorted', () => {
+      if (!this.blockClearHighlights && this.totalMatches > 0) {
+        this._resetFindWidget();
+        this._clearSearchHighlights();
+      }
+    });
+
+    this.dmlTable.on('dataGrouped', () => {
+      if (!this.blockClearHighlights && this.totalMatches > 0) {
+        this._resetFindWidget();
+        this._clearSearchHighlights();
+      }
+    });
+
+    this.dmlTable.on('dataFiltering', () => {
+      if (!this.blockClearHighlights && this.totalMatches > 0) {
+        this._resetFindWidget();
+        this._clearSearchHighlights();
+      }
+    });
   }
 
   _resetFindWidget() {
@@ -455,6 +470,12 @@ export class DMLView extends LitElement {
     this.dmlTable.clearFindHighlights(Object.values(this.findMap));
     this.findMap = {};
     this.totalMatches = 0;
+
+    document.dispatchEvent(
+      new CustomEvent('db-find-results', {
+        detail: { totalMatches: this.totalMatches, type: 'dml' },
+      }),
+    );
   }
 
   _getTable() {
@@ -475,17 +496,6 @@ export class DMLView extends LitElement {
     return detailContainer;
   }
 
-  sortByFrequency(dataArray: DMLRow[], field: keyof DMLRow) {
-    const map = new Map<unknown, number>();
-    dataArray.forEach((row) => {
-      const val = row[field];
-      map.set(val, (map.get(val) || 0) + 1);
-    });
-    const newMap = new Map([...map.entries()].sort((a, b) => b[1] - a[1]));
-
-    return [...newMap.keys()];
-  }
-
   downlodEncoder(defaultFileName: string) {
     return function (fileContents: string, mimeType: string) {
       const vscode = vscodeMessenger.getVsCodeAPI();

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

@@ -84,10 +84,6 @@ export class DatabaseView extends LitElement {
   };
 
   _findResults = (e: CustomEvent<{ totalMatches: number; type: 'dml' | 'soql' }>) => {
-    if (!this.shadowRoot?.host.clientHeight) {
-      return;
-    }
-
     if (e.detail.type === 'dml') {
       this.dmlMatches = e.detail.totalMatches;
     } else if (e.detail.type === 'soql') {