From e60967397938ab1a562b74a1d7f702ea1b65d52f Mon Sep 17 00:00:00 2001
From: porink0424 <daichi2120@gmail.com>
Date: Wed, 14 Feb 2024 11:45:59 +0900
Subject: [PATCH] Follow-up of #806

---
 optuna_dashboard/ts/components/Settings.tsx | 186 ++++++++++----------
 optuna_dashboard/ts/state.ts                |   6 +-
 2 files changed, 99 insertions(+), 93 deletions(-)

diff --git a/optuna_dashboard/ts/components/Settings.tsx b/optuna_dashboard/ts/components/Settings.tsx
index 23ac647e..4e7a38dd 100644
--- a/optuna_dashboard/ts/components/Settings.tsx
+++ b/optuna_dashboard/ts/components/Settings.tsx
@@ -8,6 +8,7 @@ import {
   Stack,
   useTheme,
   IconButton,
+  Box,
 } from "@mui/material"
 import ClearIcon from "@mui/icons-material/Clear"
 import { useRecoilState } from "recoil"
@@ -22,31 +23,113 @@ export const Settings = ({ handleClose }: SettingsProps) => {
   const [plotlyColorTheme, setPlotlyColorTheme] = useRecoilState(
     plotlyColorThemeState
   )
+  const [plotBackendRendering, setPlotBackendRendering] = useRecoilState(
+    plotBackendRenderingState
+  )
 
   const handleDarkModeColorChange = (event: SelectChangeEvent) => {
     const dark = event.target.value as PlotlyColorThemeDark
-    setPlotlyColorTheme((prev) => ({ ...prev, dark }))
+    setPlotlyColorTheme((cur) => ({ ...cur, dark }))
   }
 
   const handleLightModeColorChange = (event: SelectChangeEvent) => {
     const light = event.target.value as PlotlyColorThemeLight
-    setPlotlyColorTheme((prev) => ({ ...prev, light }))
+    setPlotlyColorTheme((cur) => ({ ...cur, light }))
   }
 
-  const [plotBackendRendering, setPlotBackendRendering] =
-    useRecoilState<boolean>(plotBackendRenderingState)
-  const handleBackendRenderingChange = () => {
-    setPlotBackendRendering(!plotBackendRendering)
+  const togglePlotBackendRendering = () => {
+    setPlotBackendRendering((cur) => !cur)
   }
 
   return (
-    <Stack
-      spacing={4}
-      sx={{
-        position: "relative",
-        p: "2rem",
-      }}
-    >
+    <Box component="div" sx={{ position: "relative" }}>
+      <Stack
+        spacing={4}
+        sx={{
+          p: "2rem",
+        }}
+      >
+        <Typography
+          variant="h4"
+          sx={{ fontWeight: theme.typography.fontWeightBold }}
+        >
+          Settings
+        </Typography>
+
+        <Stack spacing={2}>
+          <Typography
+            variant="h5"
+            sx={{ fontWeight: theme.typography.fontWeightBold }}
+          >
+            Plotly Color Scales
+          </Typography>
+          {theme.palette.mode === "dark" ? (
+            <>
+              <Stack direction="row" spacing={2} alignItems="center">
+                <Typography variant="h6">Dark Mode</Typography>
+                <Select
+                  disabled
+                  value={plotlyColorTheme.dark}
+                  onChange={handleDarkModeColorChange}
+                >
+                  {(
+                    [{ value: "default", label: "Default" }] as {
+                      value: PlotlyColorThemeDark
+                      label: string
+                    }[]
+                  ).map((v) => (
+                    <MenuItem key={v.value} value={v.value}>
+                      {v.label}
+                    </MenuItem>
+                  ))}
+                </Select>
+              </Stack>
+              <Typography color="textSecondary">
+                Only the "Default" color scale is supported in dark mode
+              </Typography>
+            </>
+          ) : (
+            <Stack direction="row" spacing={2} alignItems="center">
+              <Typography variant="h6">Light Mode</Typography>
+              <Select
+                value={plotlyColorTheme.light}
+                onChange={handleLightModeColorChange}
+              >
+                {(
+                  [
+                    { value: "default", label: "Default" },
+                    { value: "seaborn", label: "Seaborn" },
+                    { value: "presentation", label: "Presentation" },
+                    { value: "ggplot2", label: "GGPlot2" },
+                  ] as {
+                    value: PlotlyColorThemeLight
+                    label: string
+                  }[]
+                ).map((v) => (
+                  <MenuItem key={v.value} value={v.value}>
+                    {v.label}
+                  </MenuItem>
+                ))}
+              </Select>
+            </Stack>
+          )}
+        </Stack>
+
+        <Stack>
+          <Typography
+            variant="h5"
+            sx={{ fontWeight: theme.typography.fontWeightBold }}
+          >
+            Use Plotlypy
+          </Typography>
+          <Switch
+            checked={plotBackendRendering}
+            onChange={togglePlotBackendRendering}
+            value="enable"
+          />
+        </Stack>
+      </Stack>
+
       <IconButton
         sx={{
           position: "absolute",
@@ -59,81 +142,6 @@ export const Settings = ({ handleClose }: SettingsProps) => {
       >
         <ClearIcon />
       </IconButton>
-
-      <Typography
-        variant="h4"
-        sx={{ fontWeight: theme.typography.fontWeightBold }}
-      >
-        Settings
-      </Typography>
-
-      <Stack spacing={2}>
-        <Typography
-          variant="h5"
-          sx={{ fontWeight: theme.typography.fontWeightBold }}
-        >
-          Plotly Color Scales
-        </Typography>
-        {theme.palette.mode === "dark" ? (
-          <>
-            <Stack direction="row" spacing={2} alignItems="center">
-              <Typography variant="h6">Dark Mode</Typography>
-              <Select
-                disabled
-                value={plotlyColorTheme.dark}
-                onChange={handleDarkModeColorChange}
-              >
-                {(
-                  [{ value: "default", label: "Default" }] as {
-                    value: PlotlyColorThemeDark
-                    label: string
-                  }[]
-                ).map((v) => (
-                  <MenuItem key={v.value} value={v.value}>
-                    {v.label}
-                  </MenuItem>
-                ))}
-              </Select>
-            </Stack>
-            <Typography color="textSecondary">
-              Only the "Default" color scale is supported in dark mode
-            </Typography>
-          </>
-        ) : (
-          <Stack direction="row" spacing={2} alignItems="center">
-            <Typography variant="h6">Light Mode</Typography>
-            <Select
-              value={plotlyColorTheme.light}
-              onChange={handleLightModeColorChange}
-            >
-              {(
-                [
-                  { value: "default", label: "Default" },
-                  { value: "seaborn", label: "Seaborn" },
-                  { value: "presentation", label: "Presentation" },
-                  { value: "ggplot2", label: "GGPlot2" },
-                ] as {
-                  value: PlotlyColorThemeLight
-                  label: string
-                }[]
-              ).map((v) => (
-                <MenuItem key={v.value} value={v.value}>
-                  {v.label}
-                </MenuItem>
-              ))}
-            </Select>
-          </Stack>
-        )}
-        
-        <Typography variant="h6" color="textSecondary">
-          Use Plotlypy
-        </Typography>
-        <Switch
-          checked={plotBackendRendering}
-          onChange={handleBackendRenderingChange}
-          value="enable"
-        />
-      </Stack>
-    </Stack>
+    </Box>
   )
 }
diff --git a/optuna_dashboard/ts/state.ts b/optuna_dashboard/ts/state.ts
index f8d51e64..5828985f 100644
--- a/optuna_dashboard/ts/state.ts
+++ b/optuna_dashboard/ts/state.ts
@@ -119,10 +119,8 @@ export const usePlotlyColorTheme = (mode: string): Partial<Plotly.Template> => {
 }
 
 export const useBackendRender = (): boolean => {
-  const plotBackendRendering = useRecoilValue<boolean>(
-    plotBackendRenderingState
-  )
-  const plotlypyIsAvailable = useRecoilValue<boolean>(plotlypyIsAvailableState)
+  const plotBackendRendering = useRecoilValue(plotBackendRenderingState)
+  const plotlypyIsAvailable = useRecoilValue(plotlypyIsAvailableState)
 
   if (plotBackendRendering) {
     if (plotlypyIsAvailable) {