diff --git a/gui/package.json b/gui/package.json index 2d994e8..9ff941b 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 cd4812a..6e4e0d1 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 = ({ ); return (
- + + {({ isVisible }: { isVisible: boolean }) => + isVisible ? ( + + ) : ( +
+ ) + } +
); }; diff --git a/gui/yarn.lock b/gui/yarn.lock index 8112cc9..9d8c412 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"