From 36d094a905ec936c860490cca73b016eef56738d Mon Sep 17 00:00:00 2001
From: c-bata <contact@c-bata.link>
Date: Wed, 28 Aug 2024 18:28:07 +0900
Subject: [PATCH] Improve settings component

---
 optuna_dashboard/ts/components/AppDrawer.tsx |  4 +-
 optuna_dashboard/ts/components/Settings.tsx  | 50 +++++++++++---------
 2 files changed, 30 insertions(+), 24 deletions(-)

diff --git a/optuna_dashboard/ts/components/AppDrawer.tsx b/optuna_dashboard/ts/components/AppDrawer.tsx
index 99ee0b433..2ce2bac7b 100644
--- a/optuna_dashboard/ts/components/AppDrawer.tsx
+++ b/optuna_dashboard/ts/components/AppDrawer.tsx
@@ -384,8 +384,8 @@ export const AppDrawer: FC<{
                   left: "50%",
                   transform: "translate(-50%, -50%)",
                   overflow: "scroll",
-                  width: "500px",
-                  height: "400px",
+                  width: "600px",
+                  height: "600px",
                   bgcolor: "background.paper",
                 }}
               >
diff --git a/optuna_dashboard/ts/components/Settings.tsx b/optuna_dashboard/ts/components/Settings.tsx
index 3a6a14d3d..1cb6e8524 100644
--- a/optuna_dashboard/ts/components/Settings.tsx
+++ b/optuna_dashboard/ts/components/Settings.tsx
@@ -2,6 +2,7 @@ import ClearIcon from "@mui/icons-material/Clear"
 import {
   Box,
   IconButton,
+  Link,
   MenuItem,
   Select,
   SelectChangeEvent,
@@ -68,31 +69,29 @@ export const Settings = ({ handleClose }: SettingsProps) => {
           </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 variant="h6">Dark Mode</Typography>
               <Typography color="textSecondary">
                 Only the "Default" color scale is supported in 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 direction="row" spacing={2} alignItems="center">
+            <>
               <Typography variant="h6">Light Mode</Typography>
               <Select
                 value={plotlyColorTheme.light}
@@ -114,7 +113,7 @@ export const Settings = ({ handleClose }: SettingsProps) => {
                   </MenuItem>
                 ))}
               </Select>
-            </Stack>
+            </>
           )}
         </Stack>
 
@@ -123,7 +122,14 @@ export const Settings = ({ handleClose }: SettingsProps) => {
             variant="h5"
             sx={{ fontWeight: theme.typography.fontWeightBold }}
           >
-            Use Plotlypy
+            Use Plotly Python library
+          </Typography>
+          <Typography color="textSecondary">
+            {"If enabled, the plots will be rendered using the "}
+            <Link href="https://optuna.readthedocs.io/en/stable/reference/visualization/index.html">
+              optuna.visualization module
+            </Link>
+            .
           </Typography>
           <Switch
             checked={plotBackendRendering}