Merge pull request #807 from porink0424/fix/add-color-scale-setting-follow-up

Follow up of #632 (Add color scale setting) & #806 (Add "use plotlypy" button)

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>

optuna_dashboard/ts/components/Settings.tsx

@@ -1,93 +1,147 @@
-import React, { FC, useState } from "react"
-
+import React from "react"
 import {
   Typography,
   Select,
   Switch,
   MenuItem,
-  Grid,
   SelectChangeEvent,
+  Stack,
+  useTheme,
+  IconButton,
+  Box,
 } from "@mui/material"
+import ClearIcon from "@mui/icons-material/Clear"
+import { useRecoilState } from "recoil"
+import { plotlyColorThemeState, plotBackendRenderingState } from "../state"
 
-import { useRecoilValue, useSetRecoilState, useRecoilState } from "recoil"
-import { plotlyColorTheme, plotBackendRenderingState } from "../state"
+interface SettingsProps {
+  handleClose: () => void
+}
 
-export const Settings: FC = () => {
-  const colorTheme = useRecoilValue<PlotlyColorTheme>(plotlyColorTheme)
-  const setPlotlyColorTheme = useSetRecoilState(plotlyColorTheme)
-
-  const [darkModeColor, setDarkModeColor] = useState(colorTheme.dark)
-  const [lightModeColor, setLightModeColor] = useState(colorTheme.light)
+export const Settings = ({ handleClose }: SettingsProps) => {
+  const theme = useTheme()
+  const [plotlyColorTheme, setPlotlyColorTheme] = useRecoilState(
+    plotlyColorThemeState
+  )
+  const [plotBackendRendering, setPlotBackendRendering] = useRecoilState(
+    plotBackendRenderingState
+  )
 
   const handleDarkModeColorChange = (event: SelectChangeEvent) => {
-    setDarkModeColor(event.target.value)
-    setPlotlyColorTheme({ dark: event.target.value, light: lightModeColor })
+    const dark = event.target.value as PlotlyColorThemeDark
+    setPlotlyColorTheme((cur) => ({ ...cur, dark }))
   }
 
   const handleLightModeColorChange = (event: SelectChangeEvent) => {
-    setLightModeColor(event.target.value)
-    setPlotlyColorTheme({ dark: darkModeColor, light: event.target.value })
+    const light = event.target.value as PlotlyColorThemeLight
+    setPlotlyColorTheme((cur) => ({ ...cur, light }))
   }
 
-  const [plotBackendRendering, setPlotBackendRendering] =
-    useRecoilState<boolean>(plotBackendRenderingState)
-  const handleBackendRenderingChange = () => {
-    setPlotBackendRendering(!plotBackendRendering)
+  const togglePlotBackendRendering = () => {
+    setPlotBackendRendering((cur) => !cur)
   }
 
   return (
-    <Grid container spacing={4} sx={{ padding: "40px" }}>
-      <Grid item xs={12}>
-        <Typography variant="h3" gutterBottom color="textSecondary">
+    <Box component="div" sx={{ position: "relative" }}>
+      <Stack
+        spacing={4}
+        sx={{
+          p: "2rem",
+        }}
+      >
+        <Typography
+          variant="h4"
+          sx={{ fontWeight: theme.typography.fontWeightBold }}
+        >
           Settings
         </Typography>
-      </Grid>
-      <Grid item xs={12}>
-        <Typography variant="h5" gutterBottom color="textPrimary">
-          Plotly Color Scales
-        </Typography>
-      </Grid>
 
-      <Grid item xs={2}>
-        <Typography variant="h6" color="textSecondary">
-          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>
+        <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>
 
-      <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>
+        <Stack>
+          <Typography
+            variant="h5"
+            sx={{ fontWeight: theme.typography.fontWeightBold }}
+          >
+            Use Plotlypy
+          </Typography>
+          <Switch
+            checked={plotBackendRendering}
+            onChange={togglePlotBackendRendering}
+            value="enable"
+          />
+        </Stack>
+      </Stack>
 
-      <Grid item xs={2}>
-        <Typography variant="h6" color="textSecondary">
-          Use Plotlypy
-        </Typography>
-      </Grid>
-      <Grid item xs={10} sx={{ display: "flex", alignItems: "center" }}>
-        <Switch
-          checked={plotBackendRendering}
-          onChange={handleBackendRenderingChange}
-          value="enable"
-        />
-      </Grid>
-    </Grid>
+      <IconButton
+        sx={{
+          position: "absolute",
+          top: "1rem",
+          right: "1rem",
+          width: "2rem",
+          height: "2rem",
+        }}
+        onClick={handleClose}
+      >
+        <ClearIcon />
+      </IconButton>
+    </Box>
   )
 }

optuna_dashboard/ts/state.ts

@@ -42,8 +42,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",
@@ -110,7 +110,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 {
@@ -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) {

optuna_dashboard/ts/types/index.d.ts

@@ -236,7 +236,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
 }