From 8f136b3acb04d2b2c19182ec9c0ae45b406366d0 Mon Sep 17 00:00:00 2001
From: Austen Money <austen.money@gmail.com>
Date: Tue, 22 Oct 2024 15:24:27 -0400
Subject: [PATCH] adjust threshold instead of debouncing (#3578)

---
 CHANGELOG-fix-shaking-viewport.md                           | 1 +
 .../ProcessedDataset/ProcessedDatasetAccordion.tsx          | 6 +++++-
 2 files changed, 6 insertions(+), 1 deletion(-)
 create mode 100644 CHANGELOG-fix-shaking-viewport.md

diff --git a/CHANGELOG-fix-shaking-viewport.md b/CHANGELOG-fix-shaking-viewport.md
new file mode 100644
index 0000000000..a3e61f7714
--- /dev/null
+++ b/CHANGELOG-fix-shaking-viewport.md
@@ -0,0 +1 @@
+- Fix bug where expanding a processed dataset section leads to a shaking viewport.
\ No newline at end of file
diff --git a/context/app/static/js/components/detailPage/ProcessedData/ProcessedDataset/ProcessedDatasetAccordion.tsx b/context/app/static/js/components/detailPage/ProcessedData/ProcessedDataset/ProcessedDatasetAccordion.tsx
index 512f21a2dc..1aca1e21de 100644
--- a/context/app/static/js/components/detailPage/ProcessedData/ProcessedDataset/ProcessedDatasetAccordion.tsx
+++ b/context/app/static/js/components/detailPage/ProcessedData/ProcessedDataset/ProcessedDatasetAccordion.tsx
@@ -18,6 +18,7 @@ import useProcessedDataStore from '../store';
 import { DetailPageSection } from '../../DetailPageSection';
 
 const iconPlaceholder = <Skeleton variant="circular" width={24} height={24} animation="pulse" />;
+const inViewThreshold = 0.1;
 
 function LoadingFallback() {
   return <Skeleton variant="rectangular" height={200} />;
@@ -27,19 +28,22 @@ export function ProcessedDatasetAccordion({ children }: PropsWithChildren) {
   const { defaultExpanded, dataset, sectionDataset, conf, isLoading } = useProcessedDatasetContext();
   const visualizationIcon = conf ? <VisualizationIcon /> : null;
   const track = useTrackEntityPageEvent();
+  const [threshold, setThreshold] = useState(inViewThreshold);
 
   const { setCurrentDataset, removeVisibleDataset } = useProcessedDataStore((state) => ({
     setCurrentDataset: state.setCurrentDataset,
     removeVisibleDataset: state.removeFromVisibleDatasets,
   }));
   const { ref } = useInView({
-    threshold: 0,
+    threshold,
     initialInView: false,
     onChange: (visible) => {
       if (visible && dataset) {
+        setThreshold(0);
         setCurrentDataset(dataset);
       }
       if (!visible) {
+        setThreshold(inViewThreshold);
         removeVisibleDataset(sectionDataset.hubmap_id);
       }
     },