Merge pull request #205 from flatironinstitute/hists-show-more

Add button to show more histogram plots
flatironinstitute · Aug 6, 2024 · 26a269c · 26a269c
2 parents 77d1665 + fef2fd1
commit 26a269c
Show file tree

Hide file tree

Showing 2 changed files with 34 additions and 11 deletions.
diff --git a/gui/src/app/SamplerOutputView/HistsView.tsx b/gui/src/app/SamplerOutputView/HistsView.tsx
@@ -1,6 +1,7 @@
 import ResponsiveGrid from "@SpComponents/ResponsiveGrid";
 import SequenceHistogramWidget from "@SpComponents/SequenceHistogramWidget";
-import { FunctionComponent, useMemo } from "react";
+import { Button } from "@mui/material";
+import { FunctionComponent, useMemo, useState } from "react";
 
 type HistsViewProps = {
   draws: number[][];
@@ -18,17 +19,32 @@ const HistsView: FunctionComponent<HistsViewProps> = ({
     const namesWithSuffix = paramNames.filter((name) => name.endsWith("__"));
     return [...names, ...namesWithSuffix];
   }, [paramNames]);
+  const [abbreviatedToNumPlots, setAbbreviatedToNumPlots] =
+    useState<number>(30);
   return (
-    <ResponsiveGrid>
-      {paramNamesResorted.map((paramName) => (
-        <SequenceHistogramWidget
-          key={paramName}
-          histData={draws[paramNames.indexOf(paramName)]}
-          title={paramName}
-          variableName={paramName}
-        />
-      ))}
-    </ResponsiveGrid>
+    <>
+      <ResponsiveGrid>
+        {paramNamesResorted.slice(0, abbreviatedToNumPlots).map((paramName) => (
+          <SequenceHistogramWidget
+            key={paramName}
+            histData={draws[paramNames.indexOf(paramName)]}
+            title={paramName}
+            variableName={paramName}
+          />
+        ))}
+      </ResponsiveGrid>
+      {abbreviatedToNumPlots < paramNamesResorted.length && (
+        <div className="PlotAbbreviationToggle">
+          <Button
+            onClick={() => {
+              setAbbreviatedToNumPlots((x) => x + 30);
+            }}
+          >
+            Show more
+          </Button>
+        </div>
+      )}
+    </>
   );
 };
 

diff --git a/gui/src/localStyles.css b/gui/src/localStyles.css
@@ -207,6 +207,13 @@ span.EditorTitle {
   padding: 5px;
 }
 
+/* Histograms */
+
+.PlotAbbreviationToggle {
+  background: white;
+  padding: 5px;
+}
+
 /* Trace Plots */
 .TracePlotsView {
 }