From d4bce76031477d3f90ef987151115aa347ea0706 Mon Sep 17 00:00:00 2001 From: Manuel <5673677+mtrezza@users.noreply.github.com> Date: Thu, 17 Jul 2025 15:07:32 +0200 Subject: [PATCH 1/5] fix: AggregationPanel scroll position persists when using cache --- src/dashboard/Data/Browser/DataBrowser.react.js | 9 ++++++++- 1 file changed, 8 insertions(+), 1 deletion(-) diff --git a/src/dashboard/Data/Browser/DataBrowser.react.js b/src/dashboard/Data/Browser/DataBrowser.react.js index 5fda24e448..3944c3f1e1 100644 --- a/src/dashboard/Data/Browser/DataBrowser.react.js +++ b/src/dashboard/Data/Browser/DataBrowser.react.js @@ -132,6 +132,7 @@ 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) { @@ -734,6 +735,9 @@ 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) @@ -902,7 +906,10 @@ export default class DataBrowser extends React.Component { resizeHandles={['w']} className={styles.resizablePanel} > -
+
Date: Fri, 18 Jul 2025 10:04:35 +0200 Subject: [PATCH 2/5] fix: reset aggregation panel scroll when loading cached data --- src/components/AggregationPanel/AggregationPanel.js | 11 +++++++++-- src/dashboard/Data/Browser/DataBrowser.react.js | 9 +-------- 2 files changed, 10 insertions(+), 10 deletions(-) diff --git a/src/components/AggregationPanel/AggregationPanel.js b/src/components/AggregationPanel/AggregationPanel.js index 1f572d3345..30d92a34fd 100644 --- a/src/components/AggregationPanel/AggregationPanel.js +++ b/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 ( -
+
{isLoadingInfoPanel ? (
diff --git a/src/dashboard/Data/Browser/DataBrowser.react.js b/src/dashboard/Data/Browser/DataBrowser.react.js index 3944c3f1e1..5fda24e448 100644 --- a/src/dashboard/Data/Browser/DataBrowser.react.js +++ b/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} > -
+
Date: Fri, 18 Jul 2025 17:04:19 +0200 Subject: [PATCH 3/5] fix: aggregation panel retains scroll when using cached data --- .../AggregationPanel/AggregationPanel.js | 11 ++--------- src/dashboard/Data/Browser/DataBrowser.react.js | 15 ++++++++++++++- 2 files changed, 16 insertions(+), 10 deletions(-) diff --git a/src/components/AggregationPanel/AggregationPanel.js b/src/components/AggregationPanel/AggregationPanel.js index 30d92a34fd..1f572d3345 100644 --- a/src/components/AggregationPanel/AggregationPanel.js +++ b/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, useRef, useState } from 'react'; +import React, { useCallback, useEffect, useMemo, useState } from 'react'; import styles from './AggregationPanel.scss'; import { AudioElement, @@ -31,13 +31,6 @@ 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) { @@ -198,7 +191,7 @@ const AggregationPanel = ({ } return ( -
+
{isLoadingInfoPanel ? (
diff --git a/src/dashboard/Data/Browser/DataBrowser.react.js b/src/dashboard/Data/Browser/DataBrowser.react.js index 5fda24e448..29f10a41d7 100644 --- a/src/dashboard/Data/Browser/DataBrowser.react.js +++ b/src/dashboard/Data/Browser/DataBrowser.react.js @@ -132,6 +132,7 @@ 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) { @@ -215,6 +216,15 @@ export default class DataBrowser extends React.Component { this.props.setErrorAggregatedData({}); } } + + if ( + (this.props.AggregationPanelData !== prevProps.AggregationPanelData || + this.state.selectedObjectId !== prevState.selectedObjectId) && + this.state.isPanelVisible && + this.aggregationPanelRef?.current + ) { + this.aggregationPanelRef.current.scrollTop = 0; + } } handleResizeStart() { @@ -902,7 +912,10 @@ export default class DataBrowser extends React.Component { resizeHandles={['w']} className={styles.resizablePanel} > -
+
Date: Sat, 19 Jul 2025 23:39:19 +0200 Subject: [PATCH 4/5] fix: momentum scroll persists on cached panel --- src/dashboard/Data/Browser/DataBrowser.react.js | 9 ++++++++- 1 file changed, 8 insertions(+), 1 deletion(-) diff --git a/src/dashboard/Data/Browser/DataBrowser.react.js b/src/dashboard/Data/Browser/DataBrowser.react.js index 29f10a41d7..4db0892586 100644 --- a/src/dashboard/Data/Browser/DataBrowser.react.js +++ b/src/dashboard/Data/Browser/DataBrowser.react.js @@ -223,7 +223,14 @@ export default class DataBrowser extends React.Component { this.state.isPanelVisible && this.aggregationPanelRef?.current ) { - this.aggregationPanelRef.current.scrollTop = 0; + const panel = this.aggregationPanelRef.current; + panel.scrollTop = 0; + panel.style.overflowY = 'hidden'; + setTimeout(() => { + if (panel === this.aggregationPanelRef.current) { + panel.style.overflowY = 'auto'; + } + }, 0); } } From 3248cc6b89c95c09b6ff4bb4a1e20861e7139e61 Mon Sep 17 00:00:00 2001 From: Manuel Trezza <5673677+mtrezza@users.noreply.github.com> Date: Sun, 20 Jul 2025 02:14:53 +0200 Subject: [PATCH 5/5] Revert "fix: momentum scroll persists on cached panel" This reverts commit 8af69bc8deaab40c3de029d9f1644ff131d339e0. --- src/dashboard/Data/Browser/DataBrowser.react.js | 9 +-------- 1 file changed, 1 insertion(+), 8 deletions(-) diff --git a/src/dashboard/Data/Browser/DataBrowser.react.js b/src/dashboard/Data/Browser/DataBrowser.react.js index 4db0892586..29f10a41d7 100644 --- a/src/dashboard/Data/Browser/DataBrowser.react.js +++ b/src/dashboard/Data/Browser/DataBrowser.react.js @@ -223,14 +223,7 @@ export default class DataBrowser extends React.Component { this.state.isPanelVisible && this.aggregationPanelRef?.current ) { - const panel = this.aggregationPanelRef.current; - panel.scrollTop = 0; - panel.style.overflowY = 'hidden'; - setTimeout(() => { - if (panel === this.aggregationPanelRef.current) { - panel.style.overflowY = 'auto'; - } - }, 0); + this.aggregationPanelRef.current.scrollTop = 0; } }