refactor: split clear highlight + search logic

Author: lukecotter

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';
@@ -53,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;

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;

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

@@ -191,7 +191,9 @@ export class SOQLView extends LitElement {
     this.soqlTable?.download('csv', 'soql.csv', { bom: true, delimiter: ',' });
   }
 
-  _findEvt = ((event: FindEvt) => this._find(event)) as EventListener;
+  _findEvt = ((event: FindEvt) => {
+    this._find(event);
+  }) as EventListener;
 
   _soqlGroupBy(event: Event) {
     if (!this.soqlTable) {