refactor: improve goToRow with promise-based flow and scroll fallback

Return a Promise from goToRow for async coordination. Use
scrollIntoView as fallback after tabulator's scrollToRow to handle
edge cases near the bottom of the grid. Check element connectivity
in _isVisible and compare against tableholder bounds instead of
window.

Author: lukecotter

log-viewer/src/tabulator/module/RowNavigation.ts

@@ -13,70 +13,89 @@ export class RowNavigation extends Module {
     this.registerTableFunction('goToRow', this.goToRow.bind(this));
   }
 
-  goToRow(row: RowComponent, opts: GoToRowOptions = { scrollIfVisible: true, focusRow: true }) {
-    if (row) {
-      const { focusRow } = opts;
+  goToRow(
+    row: RowComponent,
+    opts: GoToRowOptions = { scrollIfVisible: true, focusRow: true },
+  ): Promise<void> {
+    if (!row) {
+      return Promise.resolve();
+    }
 
-      const table = this.table;
-      this.tableHolder ??= table.element.querySelector('.tabulator-tableholder') as HTMLElement;
+    const { focusRow } = opts;
 
-      table.blockRedraw();
+    const table = this.table;
+    this.tableHolder ??= table.element.querySelector('.tabulator-tableholder') as HTMLElement;
 
-      const grp = row.getGroup();
-      if (grp && !grp.isVisible()) {
-        grp.show();
-      }
+    table.blockRedraw();
 
-      const rowsToExpand = [];
-      //@ts-expect-error This is private to tabulator, but we have no other choice atm.
-      let parent = row._getSelf().modules.dataTree ? row.getTreeParent() : false;
-      while (parent) {
-        if (!parent.isTreeExpanded()) {
-          rowsToExpand.push(parent);
-        }
-        parent = parent.getTreeParent();
+    const grp = row.getGroup();
+    if (grp && !grp.isVisible()) {
+      grp.show();
+    }
+
+    const rowsToExpand = [];
+    //@ts-expect-error This is private to tabulator, but we have no other choice atm.
+    let parent = row._getSelf().modules.dataTree ? row.getTreeParent() : false;
+    while (parent) {
+      if (!parent.isTreeExpanded()) {
+        rowsToExpand.push(parent);
       }
+      parent = parent.getTreeParent();
+    }
 
-      rowsToExpand.forEach((row) => {
-        row.treeExpand();
-      });
+    for (const row of rowsToExpand) {
+      row.treeExpand();
+    }
 
-      table.getSelectedRows().forEach((rowToDeselect) => {
-        rowToDeselect.deselect();
-      });
-      row.select();
-      table.restoreRedraw();
+    for (const row of table.getSelectedRows()) {
+      row.deselect();
+    }
 
-      if (focusRow) {
-        this.tableHolder.focus();
-      }
-      if (row) {
-        setTimeout(() => this._scrollToRow(row, opts));
-      }
+    row.select();
+    table.restoreRedraw();
+
+    if (focusRow) {
+      this.tableHolder.focus();
     }
+
+    return new Promise<void>((resolve) => {
+      setTimeout(() => {
+        this._scrollToRow(row, opts).then(resolve);
+      });
+    });
   }
 
-  _scrollToRow(row: RowComponent, opts: GoToRowOptions) {
+  _scrollToRow(row: RowComponent, opts: GoToRowOptions): Promise<void> {
     const { scrollIfVisible, focusRow } = opts;
 
-    this.table.scrollToRow(row, 'center', scrollIfVisible).then(() => {
-      setTimeout(() => {
-        const elem = row.getElement();
+    return this.table
+      .scrollToRow(row, 'center', scrollIfVisible)
+      .catch(() => {})
+      .then(() => {
+        return new Promise<void>((resolve) => {
+          setTimeout(() => {
+            const elem = row.getElement();
+
+            if (scrollIfVisible || !this._isVisible(elem)) {
+              elem.scrollIntoView({ behavior: 'auto', block: 'center', inline: 'start' });
+            }
 
-        if (scrollIfVisible || !this._isVisible(elem)) {
-          // NOTE: work around because this.table.scrollToRow does not work correctly when the row is near the very bottom of the grid.
-          elem.scrollIntoView({ behavior: 'auto', block: 'center', inline: 'start' });
-        }
+            if (focusRow) {
+              elem.focus();
+            }
 
-        if (focusRow) {
-          elem.focus();
-        }
+            resolve();
+          });
+        });
       });
-    });
   }
 
   _isVisible(el: Element) {
+    if (!this.tableHolder || !el.isConnected) {
+      return false;
+    }
+    const holderRect = this.tableHolder.getBoundingClientRect();
     const rect = el.getBoundingClientRect();
-    return rect.top >= 0 && rect.bottom <= window.innerHeight;
+    return rect.top >= holderRect.top && rect.bottom <= holderRect.bottom;
   }
 }