From c748a3fddbc0620e245790b6b0fcdbd0019f3a77 Mon Sep 17 00:00:00 2001
From: Jeremy Magland <jmagland@flatironinstitute.org>
Date: Mon, 5 Aug 2024 17:21:20 -0400
Subject: [PATCH] Plot histograms only when visible (ReactVisibilitySensor)

---
 gui/package.json                              |  1 +
 .../SequenceHistogramWidget.tsx               | 27 ++++++++++++-------
 gui/yarn.lock                                 |  7 +++++
 3 files changed, 26 insertions(+), 9 deletions(-)

diff --git a/gui/package.json b/gui/package.json
index 2d994e88..9ff941b3 100644
--- 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
index cd4812a9..6e4e0d19 100644
--- 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
index 8112cc92..9d8c4123 100644
--- 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"