Add color scale setting

optuna_dashboard/ts/components/AppDrawer.tsx

@@ -1,6 +1,8 @@
 import React, { FC } from "react"
 import { useRecoilState, useRecoilValue } from "recoil"
 import { styled, useTheme, Theme, CSSObject } from "@mui/material/styles"
+import Modal from "@mui/material/Modal"
+import { Settings } from "./Settings"
 import Box from "@mui/material/Box"
 import MuiDrawer from "@mui/material/Drawer"
 import MuiAppBar, { AppBarProps as MuiAppBarProps } from "@mui/material/AppBar"
@@ -28,6 +30,8 @@ import Brightness4Icon from "@mui/icons-material/Brightness4"
 import Brightness7Icon from "@mui/icons-material/Brightness7"
 import TableViewIcon from "@mui/icons-material/TableView"
 import RateReviewIcon from "@mui/icons-material/RateReview"
+import SettingsIcon from "@mui/icons-material/Settings"
+
 import MenuIcon from "@mui/icons-material/Menu"
 import GitHubIcon from "@mui/icons-material/GitHub"
 import OpenInNewIcon from "@mui/icons-material/OpenInNew"
@@ -160,6 +164,16 @@ export const AppDrawer: FC<{
     setOpen(false)
   }
 
+  const [settingOpen, setSettingOpen] = React.useState(false)
+
+  const handleSettingOpen = () => {
+    setSettingOpen(true)
+  }
+
+  const handleSettingClose = () => {
+    setSettingOpen(false)
+  }
+
   return (
     <Box sx={{ display: "flex", width: "100%" }}>
       <AppBar position="fixed" open={open}>
@@ -328,6 +342,37 @@ export const AppDrawer: FC<{
               </ListItemButton>
             </ListItem>
           )}
+          <ListItem key="Settings" disablePadding sx={styleListItem}>
+            <ListItemButton
+              sx={styleListItemButton}
+              onClick={handleSettingOpen}
+            >
+              <ListItemIcon sx={styleListItemIcon}>
+                <SettingsIcon />
+              </ListItemIcon>
+              <ListItemText primary="Settings" sx={styleListItemText} />
+            </ListItemButton>
+            <Modal
+              open={settingOpen}
+              onClose={handleSettingClose}
+              aria-labelledby="modal-modal-title"
+              aria-describedby="modal-modal-description"
+            >
+              <Box
+                sx={{
+                  position: "absolute",
+                  top: "10%",
+                  left: "10%",
+                  overflow: "auto",
+                  width: "80%",
+                  height: "80%",
+                  bgcolor: "background.paper",
+                }}
+              >
+                <Settings />
+              </Box>
+            </Modal>
+          </ListItem>
           <ListItem key="DarkMode" disablePadding sx={styleListItem}>
             <ListItemButton
               sx={styleListItemButton}

optuna_dashboard/ts/components/GraphContour.tsx

@@ -12,8 +12,10 @@ import {
   Box,
 } from "@mui/material"
 import blue from "@mui/material/colors/blue"
-import { plotlyDarkTemplate } from "./PlotlyDarkMode"
 import { useMergedUnionSearchSpace } from "../searchSpace"
+import { getColorTemplate } from "./PlotlyColorTemplates"
+import { useRecoilValue } from "recoil"
+import { plotlyColorTheme } from "../state"
 import { getAxisInfo } from "../graphUtil"
 
 const plotDomId = "graph-contour"
@@ -47,9 +49,18 @@ export const Contour: FC<{
     setYParam(param || null)
   }
 
+  const colorTheme = useRecoilValue<PlotlyColorTheme>(plotlyColorTheme)
+
   useEffect(() => {
     if (study != null) {
-      plotContour(study, objectiveId, xParam, yParam, theme.palette.mode)
+      plotContour(
+        study,
+        objectiveId,
+        xParam,
+        yParam,
+        theme.palette.mode,
+        colorTheme
+      )
     }
   }, [study, objectiveId, xParam, yParam, theme.palette.mode])
 
@@ -130,7 +141,8 @@ const plotContour = (
   objectiveId: number,
   xParam: SearchSpaceItem | null,
   yParam: SearchSpaceItem | null,
-  mode: string
+  mode: string,
+  colorTheme: PlotlyColorTheme
 ) => {
   if (document.getElementById(plotDomId) === null) {
     return
@@ -140,7 +152,7 @@ const plotContour = (
   const filteredTrials = trials.filter((t) => filterFunc(t, objectiveId))
   if (filteredTrials.length < 2 || xParam === null || yParam === null) {
     plotly.react(plotDomId, [], {
-      template: mode === "dark" ? plotlyDarkTemplate : {},
+      template: getColorTemplate(mode, colorTheme),
     })
     return
   }
@@ -166,7 +178,7 @@ const plotContour = (
       b: 50,
     },
     uirevision: "true",
-    template: mode === "dark" ? plotlyDarkTemplate : {},
+    template: getColorTemplate(mode, colorTheme),
   }
 
   // TODO(c-bata): Support parameters that only have the single value

optuna_dashboard/ts/components/GraphEdf.tsx

@@ -1,8 +1,10 @@
 import * as plotly from "plotly.js-dist-min"
 import React, { FC, useEffect, useMemo } from "react"
 import { Typography, useTheme, Box } from "@mui/material"
-import { plotlyDarkTemplate } from "./PlotlyDarkMode"
 import { Target, useFilteredTrialsFromStudies } from "../trialFilter"
+import { getColorTemplate } from "./PlotlyColorTemplates"
+import { plotlyColorTheme } from "../state"
+import { useRecoilValue } from "recoil"
 
 const getPlotDomId = (objectiveId: number) => `graph-edf-${objectiveId}`
 
@@ -30,9 +32,11 @@ export const GraphEdf: FC<{
     return e
   })
 
+  const colorTheme = useRecoilValue<PlotlyColorTheme>(plotlyColorTheme)
+
   useEffect(() => {
-    plotEdf(edfPlotInfos, target, domId, theme.palette.mode)
-  }, [studies, target, theme.palette.mode])
+    plotEdf(edfPlotInfos, target, domId, theme.palette.mode, colorTheme)
+  }, [studies, target, theme.palette.mode, colorTheme])
 
   return (
     <Box>
@@ -51,14 +55,15 @@ const plotEdf = (
   edfPlotInfos: EdfPlotInfo[],
   target: Target,
   domId: string,
-  mode: string
+  mode: string,
+  colorTheme: PlotlyColorTheme
 ) => {
   if (document.getElementById(domId) === null) {
     return
   }
   if (edfPlotInfos.length === 0) {
     plotly.react(domId, [], {
-      template: mode === "dark" ? plotlyDarkTemplate : {},
+      template: getColorTemplate(mode, colorTheme),
     })
     return
   }
@@ -77,7 +82,7 @@ const plotEdf = (
       r: 50,
       b: 50,
     },
-    template: mode === "dark" ? plotlyDarkTemplate : {},
+    template: getColorTemplate(mode, colorTheme),
   }
 
   const plotData: Partial<plotly.PlotData>[] = edfPlotInfos.map((h) => {

optuna_dashboard/ts/components/GraphHistory.tsx

@@ -15,12 +15,14 @@ import {
   useTheme,
   Slider,
 } from "@mui/material"
-import { plotlyDarkTemplate } from "./PlotlyDarkMode"
 import {
   useFilteredTrialsFromStudies,
   Target,
   useObjectiveAndUserAttrTargetsFromStudies,
 } from "../trialFilter"
+import { getColorTemplate } from "./PlotlyColorTemplates"
+import { plotlyColorTheme } from "../state"
+import { useRecoilValue } from "recoil"
 
 const plotDomId = "graph-history"
 
@@ -60,16 +62,27 @@ export const GraphHistory: FC<{
     return h
   })
 
+  const colorTheme = useRecoilValue<PlotlyColorTheme>(plotlyColorTheme)
+
   useEffect(() => {
     plotHistory(
       historyPlotInfos,
       selected,
       xAxis,
       logScale,
       theme.palette.mode,
+      colorTheme,
       markerSize
     )
-  }, [studies, selected, logScale, xAxis, theme.palette.mode, markerSize])
+  }, [
+    studies,
+    selected,
+    logScale,
+    xAxis,
+    theme.palette.mode,
+    colorTheme,
+    markerSize,
+  ])
 
   const handleObjectiveChange = (event: SelectChangeEvent<string>) => {
     setTarget(event.target.value)
@@ -179,14 +192,15 @@ const plotHistory = (
   xAxis: "number" | "datetime_start" | "datetime_complete",
   logScale: boolean,
   mode: string,
+  colorTheme: PlotlyColorTheme,
   markerSize: number
 ) => {
   if (document.getElementById(plotDomId) === null) {
     return
   }
   if (historyPlotInfos.length === 0) {
     plotly.react(plotDomId, [], {
-      template: mode === "dark" ? plotlyDarkTemplate : {},
+      template: getColorTemplate(mode, colorTheme),
     })
     return
   }
@@ -207,7 +221,7 @@ const plotHistory = (
       type: xAxis === "number" ? "linear" : "date",
     },
     showlegend: historyPlotInfos.length === 1 ? false : true,
-    template: mode === "dark" ? plotlyDarkTemplate : {},
+    template: getColorTemplate(mode, colorTheme),
   }
 
   const getAxisX = (trial: Trial): number | Date => {

optuna_dashboard/ts/components/GraphHyperparameterImportances.tsx

@@ -2,10 +2,12 @@ import * as plotly from "plotly.js-dist-min"
 import React, { FC, useEffect } from "react"
 import { Typography, useTheme, Box, Card, CardContent } from "@mui/material"
 
-import { plotlyDarkTemplate } from "./PlotlyDarkMode"
 import { actionCreator } from "../action"
 import { useParamImportanceValue, useStudyDirections } from "../state"
 const plotDomId = "graph-hyperparameter-importances"
+import { getColorTemplate } from "./PlotlyColorTemplates"
+import { plotlyColorTheme } from "../state"
+import { useRecoilValue } from "recoil"
 
 export const GraphHyperparameterImportance: FC<{
   studyId: number
@@ -22,14 +24,20 @@ export const GraphHyperparameterImportance: FC<{
     study?.objective_names ||
     study?.directions.map((d, i) => `Objective ${i}`) ||
     []
+  const colorTheme = useRecoilValue<PlotlyColorTheme>(plotlyColorTheme)
 
   useEffect(() => {
     action.updateParamImportance(studyId)
   }, [numCompletedTrials])
 
   useEffect(() => {
     if (importances !== null && nObjectives === importances.length) {
-      plotParamImportance(importances, objectiveNames, theme.palette.mode)
+      plotParamImportance(
+        importances,
+        objectiveNames,
+        theme.palette.mode,
+        colorTheme
+      )
     }
   }, [nObjectives, importances, theme.palette.mode])
 
@@ -51,7 +59,8 @@ export const GraphHyperparameterImportance: FC<{
 const plotParamImportance = (
   importances: ParamImportance[][],
   objectiveNames: string[],
-  mode: string
+  mode: string,
+  colorTheme: PlotlyColorTheme
 ) => {
   const layout: Partial<plotly.Layout> = {
     xaxis: {
@@ -71,7 +80,7 @@ const plotParamImportance = (
     bargap: 0.15,
     bargroupgap: 0.1,
     uirevision: "true",
-    template: mode === "dark" ? plotlyDarkTemplate : {},
+    template: getColorTemplate(mode, colorTheme),
   }
 
   if (document.getElementById(plotDomId) === null) {

optuna_dashboard/ts/components/GraphIntermediateValues.tsx

@@ -1,7 +1,9 @@
 import * as plotly from "plotly.js-dist-min"
 import React, { FC, useEffect } from "react"
 import { Box, Typography, useTheme, CardContent, Card } from "@mui/material"
-import { plotlyDarkTemplate } from "./PlotlyDarkMode"
+import { getColorTemplate } from "./PlotlyColorTemplates"
+import { plotlyColorTheme } from "../state"
+import { useRecoilValue } from "recoil"
 
 const plotDomId = "graph-intermediate-values"
 
@@ -11,16 +13,18 @@ export const GraphIntermediateValues: FC<{
   logScale: boolean
 }> = ({ trials, includePruned, logScale }) => {
   const theme = useTheme()
+  const colorTheme = useRecoilValue<PlotlyColorTheme>(plotlyColorTheme)
 
   useEffect(() => {
     plotIntermediateValue(
       trials,
       theme.palette.mode,
+      colorTheme,
       false,
       !includePruned,
       logScale
     )
-  }, [trials, theme.palette.mode, false, includePruned, logScale])
+  }, [trials, theme.palette.mode, colorTheme, includePruned, logScale])
 
   return (
     <Card>
@@ -40,6 +44,7 @@ export const GraphIntermediateValues: FC<{
 const plotIntermediateValue = (
   trials: Trial[],
   mode: string,
+  colorTheme: PlotlyColorTheme,
   filterCompleteTrial: boolean,
   filterPrunedTrial: boolean,
   logScale: boolean
@@ -64,7 +69,7 @@ const plotIntermediateValue = (
       type: "linear",
     },
     uirevision: "true",
-    template: mode === "dark" ? plotlyDarkTemplate : {},
+    template: getColorTemplate(mode, colorTheme),
   }
   if (trials.length === 0) {
     plotly.react(plotDomId, [], layout)