fix: reset aggregation panel scroll when loading cached data

Author: mtrezza

src/components/AggregationPanel/AggregationPanel.js

@@ -1,6 +1,6 @@
 import LoaderDots from 'components/LoaderDots/LoaderDots.react';
 import Parse from 'parse';
-import React, { useCallback, useEffect, useMemo, useState } from 'react';
+import React, { useCallback, useEffect, useMemo, useRef, useState } from 'react';
 import styles from './AggregationPanel.scss';
 import {
   AudioElement,
@@ -31,6 +31,13 @@ const AggregationPanel = ({
   const [isExpanded, setIsExpanded] = useState(false);
   const [nestedData, setNestedData] = useState(null);
   const [isLoadingNested, setIsLoadingNested] = useState(false);
+  const containerRef = useRef(null);
+
+  useEffect(() => {
+    if (containerRef.current) {
+      containerRef.current.scrollTop = 0;
+    }
+  }, [data, selectedObjectId]);
 
   useEffect(() => {
     if (Object.keys(errorAggregatedData).length !== 0) {
@@ -191,7 +198,7 @@ const AggregationPanel = ({
   }
 
   return (
-    <div className={styles.aggregationPanel}>
+    <div className={styles.aggregationPanel} ref={containerRef}>
       {isLoadingInfoPanel ? (
         <div className={styles.center}>
           <LoaderDots />

src/dashboard/Data/Browser/DataBrowser.react.js

@@ -132,7 +132,6 @@ export default class DataBrowser extends React.Component {
     this.setShowRowNumber = this.setShowRowNumber.bind(this);
     this.handleCellClick = this.handleCellClick.bind(this);
     this.saveOrderTimeout = null;
-    this.aggregationPanelRef = React.createRef();
   }
 
   componentWillReceiveProps(props) {
@@ -735,9 +734,6 @@ export default class DataBrowser extends React.Component {
     const { prefetchCache } = this.state;
     const { prefetchStale } = this.getPrefetchSettings();
     const cached = prefetchCache[objectId];
-    if (this.aggregationPanelRef.current) {
-      this.aggregationPanelRef.current.scrollTop = 0;
-    }
     if (
       cached &&
       (!prefetchStale || (Date.now() - cached.timestamp) / 1000 < prefetchStale)
@@ -906,10 +902,7 @@ export default class DataBrowser extends React.Component {
               resizeHandles={['w']}
               className={styles.resizablePanel}
             >
-              <div
-                className={styles.aggregationPanelContainer}
-                ref={this.aggregationPanelRef}
-              >
+              <div className={styles.aggregationPanelContainer}>
                 <AggregationPanel
                   data={this.props.AggregationPanelData}
                   isLoadingCloudFunction={this.props.isLoadingCloudFunction}