From c0a63bbbbc2114239158d93f02773e79d76c9fd8 Mon Sep 17 00:00:00 2001
From: porink0424 <daichi2120@gmail.com>
Date: Wed, 14 Feb 2024 09:39:42 +0900
Subject: [PATCH 1/5] Improve modal position and size & add close button

---
 optuna_dashboard/ts/components/AppDrawer.tsx |  13 ++-
 optuna_dashboard/ts/components/Settings.tsx  | 115 ++++++++++++-------
 optuna_dashboard/ts/types/index.d.ts         |   7 +-
 3 files changed, 88 insertions(+), 47 deletions(-)

diff --git a/optuna_dashboard/ts/components/AppDrawer.tsx b/optuna_dashboard/ts/components/AppDrawer.tsx
index 1d4d9c78..068dcff2 100644
--- a/optuna_dashboard/ts/components/AppDrawer.tsx
+++ b/optuna_dashboard/ts/components/AppDrawer.tsx
@@ -361,15 +361,16 @@ export const AppDrawer: FC<{
               <Box
                 sx={{
                   position: "absolute",
-                  top: "10%",
-                  left: "10%",
-                  overflow: "auto",
-                  width: "80%",
-                  height: "80%",
+                  top: "50%",
+                  left: "50%",
+                  transform: "translate(-50%, -50%)",
+                  overflow: "scroll",
+                  width: "500px",
+                  height: "400px",
                   bgcolor: "background.paper",
                 }}
               >
-                <Settings />
+                <Settings handleClose={handleSettingClose} />
               </Box>
             </Modal>
           </ListItem>
diff --git a/optuna_dashboard/ts/components/Settings.tsx b/optuna_dashboard/ts/components/Settings.tsx
index 328521c0..f3d5b2af 100644
--- a/optuna_dashboard/ts/components/Settings.tsx
+++ b/optuna_dashboard/ts/components/Settings.tsx
@@ -1,17 +1,25 @@
-import React, { FC, useState } from "react"
+import React, { useState } from "react"
 
 import {
   Typography,
   Select,
   MenuItem,
-  Grid,
   SelectChangeEvent,
+  Stack,
+  useTheme,
+  IconButton,
 } from "@mui/material"
+import ClearIcon from "@mui/icons-material/Clear"
 
 import { useRecoilValue, useSetRecoilState } from "recoil"
 import { plotlyColorTheme } from "../state"
 
-export const Settings: FC = () => {
+interface SettingsProps {
+  handleClose: () => void
+}
+
+export const Settings = ({ handleClose }: SettingsProps) => {
+  const theme = useTheme()
   const colorTheme = useRecoilValue<PlotlyColorTheme>(plotlyColorTheme)
   const setPlotlyColorTheme = useSetRecoilState(plotlyColorTheme)
 
@@ -29,45 +37,74 @@ export const Settings: FC = () => {
   }
 
   return (
-    <Grid container spacing={4} sx={{ padding: "40px" }}>
-      <Grid item xs={12}>
-        <Typography variant="h3" gutterBottom color="textSecondary">
-          Settings
-        </Typography>
-      </Grid>
-      <Grid item xs={12}>
-        <Typography variant="h5" gutterBottom color="textPrimary">
+    <Stack
+      spacing={4}
+      sx={{
+        position: "relative",
+        p: "2rem",
+      }}
+    >
+      <IconButton
+        sx={{
+          position: "absolute",
+          top: "1rem",
+          right: "1rem",
+          width: "2rem",
+          height: "2rem",
+        }}
+        onClick={handleClose}
+      >
+        <ClearIcon />
+      </IconButton>
+
+      <Typography
+        variant="h4"
+        sx={{ fontWeight: theme.typography.fontWeightBold, marginTop: 0 }}
+      >
+        Settings
+      </Typography>
+
+      <Stack spacing={2}>
+        <Typography
+          variant="h5"
+          sx={{ fontWeight: theme.typography.fontWeightBold }}
+        >
           Plotly Color Scales
         </Typography>
-      </Grid>
-
-      <Grid item xs={2}>
-        <Typography variant="h6" color="textSecondary">
-          Dark Mode
+        <Stack direction="row" spacing={2} alignItems="center">
+          <Typography variant="h6">Dark Mode</Typography>
+          <Select
+            disabled
+            value={darkModeColor}
+            onChange={handleDarkModeColorChange}
+          >
+            <MenuItem value={"default" as PlotlyColorThemeDark}>
+              Default
+            </MenuItem>
+          </Select>
+        </Stack>
+        <Typography color="textSecondary">
+          Only the "Default" color scale is supported in dark mode
         </Typography>
-      </Grid>
-      <Grid item xs={10} sx={{ display: "flex", alignItems: "center" }}>
-        <Select value={darkModeColor} onChange={handleDarkModeColorChange}>
-          <MenuItem value={"default"}>Default</MenuItem>
-          <MenuItem value={"seaborn"}>Seaborn</MenuItem>
-          <MenuItem value={"presentation"}>Presentation</MenuItem>
-          <MenuItem value={"ggplot2"}>GGPlot2</MenuItem>
-        </Select>
-      </Grid>
 
-      <Grid item xs={2}>
-        <Typography variant="h6" color="textSecondary">
-          Light Mode
-        </Typography>
-      </Grid>
-      <Grid item xs={10} sx={{ display: "flex", alignItems: "center" }}>
-        <Select value={lightModeColor} onChange={handleLightModeColorChange}>
-          <MenuItem value={"default"}>Default</MenuItem>
-          <MenuItem value={"seaborn"}>Seaborn</MenuItem>
-          <MenuItem value={"presentation"}>Presentation</MenuItem>
-          <MenuItem value={"ggplot2"}>GGPlot2</MenuItem>
-        </Select>
-      </Grid>
-    </Grid>
+        <Stack direction="row" spacing={2} alignItems="center">
+          <Typography variant="h6">Light Mode</Typography>
+          <Select value={lightModeColor} onChange={handleLightModeColorChange}>
+            <MenuItem value={"default" as PlotlyColorThemeLight}>
+              Default
+            </MenuItem>
+            <MenuItem value={"seaborn" as PlotlyColorThemeLight}>
+              Seaborn
+            </MenuItem>
+            <MenuItem value={"presentation" as PlotlyColorThemeLight}>
+              Presentation
+            </MenuItem>
+            <MenuItem value={"ggplot2" as PlotlyColorThemeLight}>
+              GGPlot2
+            </MenuItem>
+          </Select>
+        </Stack>
+      </Stack>
+    </Stack>
   )
 }
diff --git a/optuna_dashboard/ts/types/index.d.ts b/optuna_dashboard/ts/types/index.d.ts
index 30d6708f..78ca0386 100644
--- a/optuna_dashboard/ts/types/index.d.ts
+++ b/optuna_dashboard/ts/types/index.d.ts
@@ -240,7 +240,10 @@ type PreferenceHistory = {
   is_removed: boolean
 }
 
+type PlotlyColorThemeDark = "default"
+type PlotlyColorThemeLight = "default" | "seaborn" | "presentation" | "ggplot2"
+
 type PlotlyColorTheme = {
-  dark: string
-  light: string
+  dark: PlotlyColorThemeDark
+  light: PlotlyColorThemeLight
 }

From 704a5900242550cc80b316e948eaa8a0840a833a Mon Sep 17 00:00:00 2001
From: porink0424 <daichi2120@gmail.com>
Date: Wed, 14 Feb 2024 09:53:28 +0900
Subject: [PATCH 2/5] Fix plotlyColorTheme state in Settings component

---
 optuna_dashboard/ts/components/Settings.tsx | 31 ++++++++++-----------
 optuna_dashboard/ts/state.ts                |  6 ++--
 2 files changed, 18 insertions(+), 19 deletions(-)

diff --git a/optuna_dashboard/ts/components/Settings.tsx b/optuna_dashboard/ts/components/Settings.tsx
index f3d5b2af..e8420094 100644
--- a/optuna_dashboard/ts/components/Settings.tsx
+++ b/optuna_dashboard/ts/components/Settings.tsx
@@ -1,5 +1,4 @@
-import React, { useState } from "react"
-
+import React from "react"
 import {
   Typography,
   Select,
@@ -10,9 +9,8 @@ import {
   IconButton,
 } from "@mui/material"
 import ClearIcon from "@mui/icons-material/Clear"
-
-import { useRecoilValue, useSetRecoilState } from "recoil"
-import { plotlyColorTheme } from "../state"
+import { useRecoilState } from "recoil"
+import { plotlyColorThemeState } from "../state"
 
 interface SettingsProps {
   handleClose: () => void
@@ -20,20 +18,18 @@ interface SettingsProps {
 
 export const Settings = ({ handleClose }: SettingsProps) => {
   const theme = useTheme()
-  const colorTheme = useRecoilValue<PlotlyColorTheme>(plotlyColorTheme)
-  const setPlotlyColorTheme = useSetRecoilState(plotlyColorTheme)
-
-  const [darkModeColor, setDarkModeColor] = useState(colorTheme.dark)
-  const [lightModeColor, setLightModeColor] = useState(colorTheme.light)
+  const [plotlyColorTheme, setPlotlyColorTheme] = useRecoilState(
+    plotlyColorThemeState
+  )
 
   const handleDarkModeColorChange = (event: SelectChangeEvent) => {
-    setDarkModeColor(event.target.value)
-    setPlotlyColorTheme({ dark: event.target.value, light: lightModeColor })
+    const dark = event.target.value as PlotlyColorThemeDark
+    setPlotlyColorTheme((prev) => ({ ...prev, dark }))
   }
 
   const handleLightModeColorChange = (event: SelectChangeEvent) => {
-    setLightModeColor(event.target.value)
-    setPlotlyColorTheme({ dark: darkModeColor, light: event.target.value })
+    const light = event.target.value as PlotlyColorThemeLight
+    setPlotlyColorTheme((prev) => ({ ...prev, light }))
   }
 
   return (
@@ -75,7 +71,7 @@ export const Settings = ({ handleClose }: SettingsProps) => {
           <Typography variant="h6">Dark Mode</Typography>
           <Select
             disabled
-            value={darkModeColor}
+            value={plotlyColorTheme.dark}
             onChange={handleDarkModeColorChange}
           >
             <MenuItem value={"default" as PlotlyColorThemeDark}>
@@ -89,7 +85,10 @@ export const Settings = ({ handleClose }: SettingsProps) => {
 
         <Stack direction="row" spacing={2} alignItems="center">
           <Typography variant="h6">Light Mode</Typography>
-          <Select value={lightModeColor} onChange={handleLightModeColorChange}>
+          <Select
+            value={plotlyColorTheme.light}
+            onChange={handleLightModeColorChange}
+          >
             <MenuItem value={"default" as PlotlyColorThemeLight}>
               Default
             </MenuItem>
diff --git a/optuna_dashboard/ts/state.ts b/optuna_dashboard/ts/state.ts
index 8ca7586a..7227b819 100644
--- a/optuna_dashboard/ts/state.ts
+++ b/optuna_dashboard/ts/state.ts
@@ -48,8 +48,8 @@ export const artifactIsAvailable = atom<boolean>({
   default: false,
 })
 
-export const plotlyColorTheme = atom<PlotlyColorTheme>({
-  key: "plotlyDarkColorScale",
+export const plotlyColorThemeState = atom<PlotlyColorTheme>({
+  key: "plotlyColorThemeState",
   default: {
     dark: "default",
     light: "default",
@@ -119,7 +119,7 @@ export const useArtifacts = (studyId: number, trialId: number): Artifact[] => {
 }
 
 export const usePlotlyColorTheme = (mode: string): Partial<Plotly.Template> => {
-  const theme = useRecoilValue(plotlyColorTheme)
+  const theme = useRecoilValue(plotlyColorThemeState)
   if (mode === "dark") {
     return DarkColorTemplates[theme.dark]
   } else {

From 71143e5ac5dbcc6ce5bb511007b3c67a7598c21a Mon Sep 17 00:00:00 2001
From: porink0424 <daichi2120@gmail.com>
Date: Wed, 14 Feb 2024 09:56:43 +0900
Subject: [PATCH 3/5] Conditional dark and light mode settings

---
 optuna_dashboard/ts/components/Settings.tsx | 76 +++++++++++----------
 1 file changed, 40 insertions(+), 36 deletions(-)

diff --git a/optuna_dashboard/ts/components/Settings.tsx b/optuna_dashboard/ts/components/Settings.tsx
index e8420094..50ad1213 100644
--- a/optuna_dashboard/ts/components/Settings.tsx
+++ b/optuna_dashboard/ts/components/Settings.tsx
@@ -67,42 +67,46 @@ export const Settings = ({ handleClose }: SettingsProps) => {
         >
           Plotly Color Scales
         </Typography>
-        <Stack direction="row" spacing={2} alignItems="center">
-          <Typography variant="h6">Dark Mode</Typography>
-          <Select
-            disabled
-            value={plotlyColorTheme.dark}
-            onChange={handleDarkModeColorChange}
-          >
-            <MenuItem value={"default" as PlotlyColorThemeDark}>
-              Default
-            </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}
-          >
-            <MenuItem value={"default" as PlotlyColorThemeLight}>
-              Default
-            </MenuItem>
-            <MenuItem value={"seaborn" as PlotlyColorThemeLight}>
-              Seaborn
-            </MenuItem>
-            <MenuItem value={"presentation" as PlotlyColorThemeLight}>
-              Presentation
-            </MenuItem>
-            <MenuItem value={"ggplot2" as PlotlyColorThemeLight}>
-              GGPlot2
-            </MenuItem>
-          </Select>
-        </Stack>
+        {theme.palette.mode === "dark" ? (
+          <>
+            <Stack direction="row" spacing={2} alignItems="center">
+              <Typography variant="h6">Dark Mode</Typography>
+              <Select
+                disabled
+                value={plotlyColorTheme.dark}
+                onChange={handleDarkModeColorChange}
+              >
+                <MenuItem value={"default" as PlotlyColorThemeDark}>
+                  Default
+                </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}
+            >
+              <MenuItem value={"default" as PlotlyColorThemeLight}>
+                Default
+              </MenuItem>
+              <MenuItem value={"seaborn" as PlotlyColorThemeLight}>
+                Seaborn
+              </MenuItem>
+              <MenuItem value={"presentation" as PlotlyColorThemeLight}>
+                Presentation
+              </MenuItem>
+              <MenuItem value={"ggplot2" as PlotlyColorThemeLight}>
+                GGPlot2
+              </MenuItem>
+            </Select>
+          </Stack>
+        )}
       </Stack>
     </Stack>
   )

From 372f4fc64890984f10e3f4cf3933328bccdf989e Mon Sep 17 00:00:00 2001
From: porink0424 <daichi2120@gmail.com>
Date: Wed, 14 Feb 2024 10:12:07 +0900
Subject: [PATCH 4/5] Remove redundant repetitions

---
 optuna_dashboard/ts/components/Settings.tsx | 42 +++++++++++++--------
 1 file changed, 26 insertions(+), 16 deletions(-)

diff --git a/optuna_dashboard/ts/components/Settings.tsx b/optuna_dashboard/ts/components/Settings.tsx
index 50ad1213..6b58453d 100644
--- a/optuna_dashboard/ts/components/Settings.tsx
+++ b/optuna_dashboard/ts/components/Settings.tsx
@@ -55,7 +55,7 @@ export const Settings = ({ handleClose }: SettingsProps) => {
 
       <Typography
         variant="h4"
-        sx={{ fontWeight: theme.typography.fontWeightBold, marginTop: 0 }}
+        sx={{ fontWeight: theme.typography.fontWeightBold }}
       >
         Settings
       </Typography>
@@ -76,9 +76,16 @@ export const Settings = ({ handleClose }: SettingsProps) => {
                 value={plotlyColorTheme.dark}
                 onChange={handleDarkModeColorChange}
               >
-                <MenuItem value={"default" as PlotlyColorThemeDark}>
-                  Default
-                </MenuItem>
+                {(
+                  [{ 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">
@@ -92,18 +99,21 @@ export const Settings = ({ handleClose }: SettingsProps) => {
               value={plotlyColorTheme.light}
               onChange={handleLightModeColorChange}
             >
-              <MenuItem value={"default" as PlotlyColorThemeLight}>
-                Default
-              </MenuItem>
-              <MenuItem value={"seaborn" as PlotlyColorThemeLight}>
-                Seaborn
-              </MenuItem>
-              <MenuItem value={"presentation" as PlotlyColorThemeLight}>
-                Presentation
-              </MenuItem>
-              <MenuItem value={"ggplot2" as PlotlyColorThemeLight}>
-                GGPlot2
-              </MenuItem>
+              {(
+                [
+                  { 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>
         )}

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 5/5] 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) {