Merge pull request #438 from lukecotter/bug-database-ui-jumping-on-group-expand

bug: database UI jumping on group expand

Author: lcottercertinia

CHANGELOG.md

@@ -11,6 +11,7 @@ and this project adheres to [Semantic Versioning](https://semver.org/spec/v2.0.0
 
 - Call Tree Show Details not showing and hiding correctly ([#433][#433])
 - Infinite loading screen if file can not be found ([#435][#435])
+- Many cases of UI jumping in the Database view when rows and groups are clicked ([#434][#434])
 
 ## [1.10.1] - 2023-10-26
 
@@ -275,6 +276,7 @@ Skipped due to adopting odd numbering for pre releases and even number for relea
 
 <!-- v1.10.2 -->
 
+[#434]: https://github.com/certinia/debug-log-analyzer/issues/434
 [#435]: https://github.com/certinia/debug-log-analyzer/issues/435
 [#433]: https://github.com/certinia/debug-log-analyzer/issues/433
 

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;
+}