diff --git a/gui/src/app/SamplerOutputView/HistsView.tsx b/gui/src/app/SamplerOutputView/HistsView.tsx index 3335e51..2b1d06a 100644 --- 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 = ({ const namesWithSuffix = paramNames.filter((name) => name.endsWith("__")); return [...names, ...namesWithSuffix]; }, [paramNames]); + const [abbreviatedToNumPlots, setAbbreviatedToNumPlots] = + useState(30); return ( - - {paramNamesResorted.map((paramName) => ( - - ))} - + <> + + {paramNamesResorted.slice(0, abbreviatedToNumPlots).map((paramName) => ( + + ))} + + {abbreviatedToNumPlots < paramNamesResorted.length && ( +
+ +
+ )} + ); }; diff --git a/gui/src/localStyles.css b/gui/src/localStyles.css index 97ce7d4..101deb6 100644 --- 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 { }