Plot histograms only when visible (ReactVisibilitySensor)

flatironinstitute · Aug 5, 2024 · c748a3f · c748a3f
1 parent 073b74b
commit c748a3f
Show file tree

Hide file tree

Showing 3 changed files with 26 additions and 9 deletions.
diff --git a/gui/package.json b/gui/package.json
@@ -38,6 +38,7 @@
     "react-plotly.js": "^2.6.0",
     "react-router-dom": "^6.17.0",
     "react-use-measure": "^2.1.1",
+    "react-visibility-sensor": "^5.1.1",
     "tinystan": "^0.0.2",
     "webr": "^0.4.0"
   },

diff --git a/gui/src/app/SamplerOutputView/SequenceHistogramWidget.tsx b/gui/src/app/SamplerOutputView/SequenceHistogramWidget.tsx
@@ -1,5 +1,6 @@
 import LazyPlotlyPlot from "@SpComponents/LazyPlotlyPlot";
 import { FunctionComponent, useMemo } from "react";
+import ReactVisibilitySensor from "react-visibility-sensor";
 
 type Props = {
   histData: number[];
@@ -25,15 +26,23 @@ const SequenceHistogramWidget: FunctionComponent<Props> = ({
   );
   return (
     <div className="SequenceHistogram">
-      <LazyPlotlyPlot
-        data={[data]}
-        layout={{
-          title: { text: title, font: { size: 12 } },
-          xaxis: { title: variableName },
-          yaxis: { title: "Count" },
-          margin: { r: 0 },
-        }}
-      />
+      <ReactVisibilitySensor partialVisibility>
+        {({ isVisible }: { isVisible: boolean }) =>
+          isVisible ? (
+            <LazyPlotlyPlot
+              data={[data]}
+              layout={{
+                title: { text: title, font: { size: 12 } },
+                xaxis: { title: variableName },
+                yaxis: { title: "Count" },
+                margin: { r: 0 },
+              }}
+            />
+          ) : (
+            <div style={{ height: "200px" }}></div>
+          )
+        }
+      </ReactVisibilitySensor>
     </div>
   );
 };

diff --git a/gui/yarn.lock b/gui/yarn.lock
@@ -3558,6 +3558,13 @@ react-use-measure@^2.1.1:
   dependencies:
     debounce "^1.2.1"
 
+react-visibility-sensor@^5.1.1:
+  version "5.1.1"
+  resolved "https://registry.yarnpkg.com/react-visibility-sensor/-/react-visibility-sensor-5.1.1.tgz#5238380960d3a0b2be0b7faddff38541e337f5a9"
+  integrity sha512-cTUHqIK+zDYpeK19rzW6zF9YfT4486TIgizZW53wEZ+/GPBbK7cNS0EHyJVyHYacwFEvvHLEKfgJndbemWhB/w==
+  dependencies:
+    prop-types "^15.7.2"
+
 react@^18.2.0:
   version "18.3.1"
   resolved "https://registry.yarnpkg.com/react/-/react-18.3.1.tgz#49ab892009c53933625bd16b2533fc754cab2891"