fix: improve the reliability of scroll when rows are clicked

The behaviour of keeping the grouped and normal rows that
are clicked in focus should be far more reliable.
This should reduce the jumping effect that can be seen
with tables of a large height.

Author: lukecotter

log-viewer/modules/database-view/DatabaseView.scss

@@ -1,13 +1,5 @@
 @import '../datagrid/style/DataGrid.scss';
 
-#db-container {
-  overflow: scroll;
-}
-#db-dml-table,
-#db-soql-table {
-  margin-bottom: 1rem;
-  height: 100%;
-}
 .row__details-container {
   padding: 4px 0px 4px 0px;
   background-color: var(--vscode-editorHoverWidget-background);

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

@@ -95,6 +95,9 @@ export class DatabaseView extends LitElement {
         width: 100%;
         min-height: 0%;
         min-width: 0%;
+        margin-bottom: 1rem;
+        display: flex;
+        flex-direction: column;
       }
     `,
   ];
@@ -320,15 +323,13 @@ function renderDMLTable(dmlTableContainer: HTMLElement, dmlLines: DMLBeginLine[]
     }
   });
 
-  dmlTable.on('groupVisibilityChanged', (group: GroupComponent, visible: boolean) => {
-    const firstRow = visible ? group.getRows()[0] : group.getRows()[0].getPrevRow();
-    if (firstRow) {
-      // @ts-expect-error it has 2 params
-      firstRow.scrollTo('center', true).then(() => {
-        firstRow
-          .getElement()
-          .scrollIntoView({ behavior: 'auto', block: 'center', inline: 'start' });
-      });
+  dmlTable.on('groupVisibilityChanged', (group: GroupComponent, _visible: boolean) => {
+    const groupToFocus = group.getElement() ? group : findGroup(soqlTable, group.getKey());
+
+    if (groupToFocus) {
+      groupToFocus
+        .getElement()
+        .scrollIntoView({ behavior: 'instant', block: 'center', inline: 'start' });
     }
   });
 
@@ -337,18 +338,13 @@ function renderDMLTable(dmlTableContainer: HTMLElement, dmlLines: DMLBeginLine[]
     if (!(data.timestamp && data.dml)) {
       return;
     }
-    const origRowHeight = row.getElement().offsetHeight;
 
+    const origRowHeight = row.getElement().offsetHeight;
     row.treeToggle();
-    row.getCell('soql').getElement().style.height = origRowHeight + 'px';
+    row.getCell('dml').getElement().style.height = origRowHeight + 'px';
 
-    const nextRow = row.getNextRow() || row.getTreeChildren()[0];
-    if (nextRow) {
-      // @ts-expect-error it has 2 params
-      nextRow.scrollTo('center', true).then(() => {
-        nextRow.getElement().scrollIntoView({ behavior: 'auto', block: 'center', inline: 'start' });
-      });
-    }
+    row &&
+      row.getElement().scrollIntoView({ behavior: 'instant', block: 'center', inline: 'start' });
   });
 }
 
@@ -598,15 +594,13 @@ function renderSOQLTable(soqlTableContainer: HTMLElement, soqlLines: SOQLExecute
     }
   });
 
-  soqlTable.on('groupVisibilityChanged', (group: GroupComponent, visible: boolean) => {
-    const firstRow = visible ? group.getRows()[0] : group.getRows()[0].getPrevRow();
-    if (firstRow) {
-      // @ts-expect-error it has 2 params
-      firstRow.scrollTo('center', true).then(() => {
-        firstRow
-          .getElement()
-          .scrollIntoView({ behavior: 'auto', block: 'center', inline: 'start' });
-      });
+  soqlTable.on('groupVisibilityChanged', (group: GroupComponent, _visible: boolean) => {
+    const groupToFocus = group.getElement() ? group : findGroup(soqlTable, group.getKey());
+
+    if (groupToFocus) {
+      groupToFocus
+        .getElement()
+        .scrollIntoView({ behavior: 'instant', block: 'center', inline: 'start' });
     }
   });
 
@@ -617,17 +611,11 @@ function renderSOQLTable(soqlTableContainer: HTMLElement, soqlLines: SOQLExecute
     }
 
     const origRowHeight = row.getElement().offsetHeight;
-
     row.treeToggle();
     row.getCell('soql').getElement().style.height = origRowHeight + 'px';
 
-    const nextRow = row.getNextRow() || row.getTreeChildren()[0];
-    if (nextRow) {
-      // @ts-expect-error it has 2 params
-      nextRow.scrollTo('center', true).then(() => {
-        nextRow.getElement().scrollIntoView({ behavior: 'auto', block: 'center', inline: 'start' });
-      });
-    }
+    row &&
+      row.getElement().scrollIntoView({ behavior: 'instant', block: 'center', inline: 'start' });
   });
 }
 
@@ -689,3 +677,18 @@ function downlodEncoder(defaultFileName: string) {
     return new Blob([fileContents], { type: mimeType });
   };
 }
+
+function findGroup(table: Tabulator, groupKey: string): GroupComponent | null {
+  let foundGroup = null;
+  const groups = soqlTable.getGroups();
+  let len = groups?.length - 1 || 0;
+  while (len >= 0 && !foundGroup) {
+    const toSearch = groups[len];
+    if (toSearch.getKey() === groupKey) {
+      foundGroup = toSearch;
+      break;
+    }
+    len--;
+  }
+  return foundGroup;
+}