Add showExperimentalFeature toggle in settings

optuna · Dec 6, 2024 · cbe6057 · cbe6057
1 parent 0973d05
commit cbe6057
Show file tree

Hide file tree

Showing 3 changed files with 54 additions and 20 deletions.
diff --git 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<number>(reloadIntervalState)
   const isPreferential =
     studyId !== undefined ? useStudyIsPreferential(studyId) : null
+  const [showExperimentalFeatures] = useShowExperimentalFeature()
 
   const styleListItem = {
     display: "block",
@@ -347,27 +349,29 @@ export const AppDrawer: FC<{
                 <ListItemText primary="Trials (Table)" sx={styleListItemText} />
               </ListItemButton>
             </ListItem>
-            <ListItem
-              key="TrialCompare"
-              disablePadding
-              sx={styleListItem}
-              title="Trials (Compare)"
-            >
-              <ListItemButton
-                component={Link}
-                to={`${url_prefix}/studies/${studyId}/trialCompare`}
-                sx={styleListItemButton}
-                selected={page === "trialTable"}
+            {showExperimentalFeatures === true ? (
+              <ListItem
+                key="TrialCompare"
+                disablePadding
+                sx={styleListItem}
+                title="Trials (Compare)"
               >
-                <ListItemIcon sx={styleListItemIcon}>
-                  <CompareIcon />
-                </ListItemIcon>
-                <ListItemText
-                  primary="Trials (Compare)"
-                  sx={styleListItemText}
-                />
-              </ListItemButton>
-            </ListItem>
+                <ListItemButton
+                  component={Link}
+                  to={`${url_prefix}/studies/${studyId}/trialCompare`}
+                  sx={styleListItemButton}
+                  selected={page === "trialTable"}
+                >
+                  <ListItemIcon sx={styleListItemIcon}>
+                    <CompareIcon />
+                  </ListItemIcon>
+                  <ListItemText
+                    primary="Trials (Compare)"
+                    sx={styleListItemText}
+                  />
+                </ListItemButton>
+              </ListItem>
+            ) : null}
             <ListItem key="Note" disablePadding sx={styleListItem} title="Note">
               <ListItemButton
                 component={Link}

diff --git a/optuna_dashboard/ts/components/Settings.tsx b/optuna_dashboard/ts/components/Settings.tsx
@@ -18,6 +18,7 @@ import {
   plotlypyIsAvailableState,
   usePlotBackendRendering,
   usePlotlyColorThemeState,
+  useShowExperimentalFeature,
 } from "../state"
 
 interface SettingsProps {
@@ -30,6 +31,8 @@ export const Settings = ({ handleClose }: SettingsProps) => {
   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 (
     <Box component="div" sx={{ position: "relative" }}>
       <Stack
@@ -138,6 +145,25 @@ export const Settings = ({ handleClose }: SettingsProps) => {
             disabled={!plotlypyIsAvailable}
           />
         </Stack>
+
+        <Stack>
+          <Typography
+            variant="h5"
+            sx={{ fontWeight: theme.typography.fontWeightBold }}
+          >
+            Show Experimental Feature
+          </Typography>
+          <Typography color="textSecondary">
+            {
+              'If enabled, show experimental features "Trial (Selection)" in the UI.'
+            }
+          </Typography>
+          <Switch
+            checked={showExperimentalFeature}
+            onChange={toggleShowExperimentalFeature}
+            value="enable"
+          />
+        </Stack>
       </Stack>
 
       <IconButton

diff --git a/optuna_dashboard/ts/state.ts b/optuna_dashboard/ts/state.ts
@@ -70,6 +70,10 @@ export const usePlotBackendRendering = () => {
   return useLocalStorage<boolean>("plotBackendRendering", false)
 }
 
+export const useShowExperimentalFeature = () => {
+  return useLocalStorage<boolean>("showExperimentalFeature", false)
+}
+
 export const usePlotlyColorThemeState = () => {
   return useLocalStorage<PlotlyColorTheme>("plotlyColorTheme", {
     dark: "default",