Merge pull request #949 from c-bata/improve-settings-component

Improve settings component

Author: c-bata

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",
                 }}
               >

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}