Merge pull request #595 from lukecotter/feat-search-filtered-rows-only

feat: call tree search within filtered visible rows only

Author: lcottercertinia

CHANGELOG.md

@@ -21,6 +21,7 @@ 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.
 - Sharper timeline rending on HiDPI displays ([#588][#588]).
+- Call Tree search will now only search in the visible filtered rows ([#539]).
 
 ### Fixed
 
@@ -394,6 +395,7 @@ Skipped due to adopting odd numbering for pre releases and even number for relea
 [#590]: https://github.com/certinia/debug-log-analyzer/issues/590
 [#592]: https://github.com/certinia/debug-log-analyzer/issues/592
 [#93]: https://github.com/certinia/debug-log-analyzer/issues/93
+[#539]: https://github.com/certinia/debug-log-analyzer/issues/539
 
 <!-- 1.16.1 -->
 

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

@@ -302,6 +302,7 @@ export class CalltreeView extends LitElement {
     }
     this.calltreeTable.blockRedraw();
     this._expandCollapseAll(this.calltreeTable.getRows(), true);
+    this.calltreeTable.element?.querySelector<HTMLElement>('.tabulator-tableholder')?.focus();
     this.calltreeTable.restoreRedraw();
   }
 
@@ -311,6 +312,7 @@ export class CalltreeView extends LitElement {
     }
     this.calltreeTable.blockRedraw();
     this._expandCollapseAll(this.calltreeTable.getRows(), false);
+    this.calltreeTable.element?.querySelector<HTMLElement>('.tabulator-tableholder')?.focus();
     this.calltreeTable.restoreRedraw();
   }
 
@@ -343,15 +345,12 @@ export class CalltreeView extends LitElement {
     this.calltreeTable.goToRow(treeRow, { scrollIfVisible: true, focusRow: true });
   }
 
-  _find(
-    e: CustomEvent<{ text: string; count: number; options: { matchCase: boolean } }>,
-    canClearOverride = true,
-  ) {
+  _find(e: CustomEvent<{ text: string; count: number; options: { matchCase: boolean } }>) {
     const isTableVisible = !!this.calltreeTable?.element?.clientHeight;
     if (!isTableVisible && !this.totalMatches) {
       return;
     }
-    this.canClearSearchHighlights = canClearOverride;
+    this.canClearSearchHighlights = false;
 
     const newFindArgs = JSON.parse(JSON.stringify(e.detail));
     const newSearch =
@@ -360,7 +359,8 @@ export class CalltreeView extends LitElement {
     this.findArgs = newFindArgs;
 
     const clearHighlights =
-      e.type === 'lv-find-close' || (!isTableVisible && newFindArgs.count === 0);
+      e.type === 'lv-find-close' ||
+      (this.canClearSearchHighlights && !isTableVisible && newFindArgs.count === 0);
     if (clearHighlights) {
       newFindArgs.text = '';
     }
@@ -377,6 +377,7 @@ export class CalltreeView extends LitElement {
       }
     }
 
+    this.calltreeTable?.blockRedraw();
     const currentRow = this.findMap[this.findArgs.count];
     const rows = [
       currentRow,
@@ -391,6 +392,8 @@ export class CalltreeView extends LitElement {
       //@ts-expect-error This is a custom function added in by RowNavigation custom module
       this.calltreeTable.goToRow(currentRow, { scrollIfVisible: false, focusRow: false });
     }
+    this.calltreeTable?.restoreRedraw();
+    this.canClearSearchHighlights = true;
   }
 
   _highlight(inputString: string, substring: string) {
@@ -805,7 +808,6 @@ export class CalltreeView extends LitElement {
       new CustomEvent('lv-find', {
         detail: { text: '', count: 0, options: { matchCase: false } },
       }),
-      false,
     );
   }
 

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

@@ -1,7 +1,13 @@
 /*
  * Copyright (c) 2024 Certinia Inc. All rights reserved.
  */
-import { Module, type GroupComponent, type RowComponent, type Tabulator } from 'tabulator-tables';
+import {
+  Module,
+  type CellComponent,
+  type GroupComponent,
+  type RowComponent,
+  type Tabulator,
+} from 'tabulator-tables';
 
 export class Find extends Module {
   static moduleName = 'FindModule';
@@ -34,18 +40,9 @@ export class Find extends Module {
       return mergedArray;
     };
 
-    const flatten = (row: RowComponent): RowComponent[] => {
-      const mergedArray = [row];
-      (row.getTreeChildren() ?? []).flatMap(flatten).forEach((child) => {
-        mergedArray.push(child);
-      });
-      return mergedArray;
-    };
-
-    // Only get the currently visible rows
     const tbl = this.table;
     const grps = tbl.getGroups().flatMap(flattenFromGrps);
-    const flattenedRows = grps.length ? grps : tbl.getRows('active').flatMap(flatten);
+    const flattenedRows = grps.length ? grps : this._getRows(tbl.getRows('active'));
 
     const findOptions = findArgs.options;
     let searchString = findOptions.matchCase ? findArgs.text : findArgs.text.toLowerCase();
@@ -76,7 +73,7 @@ export class Find extends Module {
       }
       let reformat = false;
 
-      row.getCells().forEach((cell) => {
+      row.getCells().forEach((cell: CellComponent) => {
         const elem = cell.getElement();
         const matchCount = this._countMatches(elem, findArgs, regex);
         if (matchCount) {
@@ -130,6 +127,52 @@ export class Find extends Module {
     return count;
   }
 
+  _getRows(rows: RowComponent[]) {
+    const isDataTreeEnabled = this.table.modules.dataTree && this.table.options.dataTreeFilter;
+    if (!isDataTreeEnabled) {
+      return rows;
+    }
+
+    const children = [];
+    for (const row of rows) {
+      children.push(row);
+      for (const child of this._getFilteredChildren(row)) {
+        children.push(child);
+      }
+    }
+    return children;
+  }
+
+  _getFilteredChildren(row: RowComponent): RowComponent[] {
+    const output: RowComponent[] = [];
+
+    const filtering = this.table.modules.filter;
+    const sorting = this.table.options.dataTreeSort ? this.table.modules.sort : null;
+    let internalChildren = [];
+    for (const child of row.getTreeChildren()) {
+      //@ts-expect-error This is private to tabulator, but we have no other choice atm.
+      internalChildren.push(child._getSelf());
+    }
+    internalChildren = filtering.filter(internalChildren);
+    if (sorting) {
+      sorting.sort(internalChildren, true);
+    }
+
+    const filteredChildren = [];
+    for (const internalChild of internalChildren) {
+      const childComp: RowComponent = internalChild.getComponent();
+      filteredChildren.push(childComp);
+      output.push(childComp);
+
+      const subChildren = this._getFilteredChildren(childComp);
+      subChildren.forEach((sub) => {
+        output.push(sub);
+      });
+    }
+
+    return output;
+  }
+
   _clearMatches() {
     const matches = this.table.element.querySelectorAll('.currentFindMatch, .findMatch');
     for (const elm of matches) {

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

@@ -75,11 +75,9 @@ export class MiddleRowFocus extends Module {
       if (rowToScrollTo) {
         this.table.scrollToRow(rowToScrollTo, 'center', true).then(() => {
           setTimeout(() => {
-            if (rowToScrollTo) {
-              rowToScrollTo
-                ?.getElement()
-                .scrollIntoView({ behavior: 'auto', block: 'center', inline: 'start' });
-            }
+            rowToScrollTo
+              ?.getElement()
+              .scrollIntoView({ behavior: 'auto', block: 'center', inline: 'start' });
           });
         });
       }

log-viewer/modules/datagrid/module/RowKeyboardNavigation.ts

@@ -48,13 +48,10 @@ export class RowKeyboardNavigation extends Module {
 
   rowExpandedToggled(row: RowComponent, _level: number) {
     const table = row.getTable();
-    this.tableHolder ??= table.element.querySelector('.tabulator-tableholder') as HTMLElement;
-
-    const selectedRow = table.getSelectedRows()[0];
-    if (!selectedRow) {
+    const selectedRows = table.getSelectedRows();
+    if (!selectedRows.length) {
       row.select();
     }
-    this.tableHolder?.focus();
   }
 
   rowClick(event: UIEvent, row: RowComponent) {