diff --git a/optuna_dashboard/ts/components/AppDrawer.tsx b/optuna_dashboard/ts/components/AppDrawer.tsx index c1c7a5c4..a050bbc2 100644 --- a/optuna_dashboard/ts/components/AppDrawer.tsx +++ b/optuna_dashboard/ts/components/AppDrawer.tsx @@ -35,6 +35,7 @@ import { useRecoilState, useRecoilValue } from "recoil" import { drawerOpenState, reloadIntervalState, + useShowExperimentalFeature, useStudyIsPreferential, } from "../state" import { Settings } from "./Settings" @@ -147,6 +148,7 @@ export const AppDrawer: FC<{ const reloadInterval = useRecoilValue(reloadIntervalState) const isPreferential = studyId !== undefined ? useStudyIsPreferential(studyId) : null + const [showExperimentalFeatures] = useShowExperimentalFeature() const styleListItem = { display: "block", @@ -347,27 +349,29 @@ export const AppDrawer: FC<{ - - - - - - - - + + + + + + + + ) : null} { const [plotBackendRendering, setPlotBackendRendering] = usePlotBackendRendering() const plotlypyIsAvailable = useRecoilValue(plotlypyIsAvailableState) + const [showExperimentalFeature, setShowExperimentalFeature] = + useShowExperimentalFeature() const handleDarkModeColorChange = (event: SelectChangeEvent) => { const dark = event.target.value as PlotlyColorThemeDark @@ -45,6 +48,10 @@ export const Settings = ({ handleClose }: SettingsProps) => { setPlotBackendRendering((cur) => !cur) } + const toggleShowExperimentalFeature = () => { + setShowExperimentalFeature((cur) => !cur) + } + return ( { disabled={!plotlypyIsAvailable} /> + + + + Show Experimental Feature + + + { + 'If enabled, show experimental features "Trial (Selection)" in the UI.' + } + + + { return useLocalStorage("plotBackendRendering", false) } +export const useShowExperimentalFeature = () => { + return useLocalStorage("showExperimentalFeature", false) +} + export const usePlotlyColorThemeState = () => { return useLocalStorage("plotlyColorTheme", { dark: "default",