Add color scale setting

optuna_dashboard/ts/components/App.tsx

@@ -87,6 +87,15 @@ export const App: FC = () => {
                     />
                   }
                 />
+                <Route
+                  path={URL_PREFIX + "/studies/:studyId/settings"}
+                  element={
+                    <StudyDetail
+                      toggleColorMode={toggleColorMode}
+                      page={"settings"}
+                    />
+                  }
+                />
                 <Route
                   path={URL_PREFIX + "/studies/:studyId/graph"}
                   element={

optuna_dashboard/ts/components/AppDrawer.tsx

@@ -28,6 +28,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"
@@ -46,6 +48,7 @@ export type PageId =
   | "trialTable"
   | "trialList"
   | "note"
+  | "settings"
   | "preferenceHistory"
   | "graph"
 
@@ -300,6 +303,19 @@ export const AppDrawer: FC<{
                 <ListItemText primary="Note" sx={styleListItemText} />
               </ListItemButton>
             </ListItem>
+            <ListItem key="Settings" disablePadding sx={styleListItem}>
+              <ListItemButton
+                component={Link}
+                to={`${URL_PREFIX}/studies/${studyId}/settings`}
+                sx={styleListItemButton}
+                selected={page === "settings"}
+              >
+                <ListItemIcon sx={styleListItemIcon}>
+                  <SettingsIcon />
+                </ListItemIcon>
+                <ListItemText primary="Settings" sx={styleListItemText} />
+              </ListItemButton>
+            </ListItem>
           </List>
         )}
         <Box sx={{ flexGrow: 1 }} />

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 "./PlotlyDarkMode"
+import { useRecoilValue } from "recoil"
+import { plotlyColorTheme } from "../state"
 
 // eslint-disable-next-line @typescript-eslint/no-explicit-any
 const unique = (array: any[]) => {
@@ -64,9 +66,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])
 
@@ -147,7 +158,8 @@ const plotContour = (
   objectiveId: number,
   xParam: SearchSpaceItem | null,
   yParam: SearchSpaceItem | null,
-  mode: string
+  mode: string,
+  colorTheme: PlotlyColorTheme
 ) => {
   if (document.getElementById(plotDomId) === null) {
     return
@@ -157,7 +169,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
   }
@@ -183,7 +195,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 "./PlotlyDarkMode"
+import { plotlyColorTheme } from "../state"
+import { useRecoilValue } from "recoil"
 
 const getPlotDomId = (objectiveId: number) => `graph-edf-${objectiveId}`
 
@@ -30,8 +32,10 @@ export const GraphEdf: FC<{
     return e
   })
 
+  const colorTheme = useRecoilValue<PlotlyColorTheme>(plotlyColorTheme)
+
   useEffect(() => {
-    plotEdf(edfPlotInfos, target, domId, theme.palette.mode)
+    plotEdf(edfPlotInfos, target, domId, theme.palette.mode, colorTheme)
   }, [studies, target, theme.palette.mode])
 
   return (
@@ -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 "./PlotlyDarkMode"
+import { plotlyColorTheme } from "../state"
+import { useRecoilValue } from "recoil"
 
 const plotDomId = "graph-history"
 
@@ -60,13 +62,16 @@ 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])
@@ -179,14 +184,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 +213,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 "./PlotlyDarkMode"
+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 "./PlotlyDarkMode"
+import { plotlyColorTheme } from "../state"
+import { useRecoilValue } from "recoil"
 
 const plotDomId = "graph-intermediate-values"
 
@@ -11,11 +13,13 @@ 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
@@ -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)

optuna_dashboard/ts/components/GraphParallelCoordinate.tsx

@@ -9,7 +9,9 @@ import {
   FormControlLabel,
   Checkbox,
 } from "@mui/material"
-import { plotlyDarkTemplate } from "./PlotlyDarkMode"
+import { getColorTemplate } from "./PlotlyDarkMode"
+import { useRecoilValue } from "recoil"
+import { plotlyColorTheme } from "../state"
 import {
   Target,
   useFilteredTrials,
@@ -90,10 +92,19 @@ export const GraphParallelCoordinate: FC<{
   const theme = useTheme()
   const [targets, searchSpace, renderCheckBoxes] = useTargets(study)
 
+  const colorTheme = useRecoilValue<PlotlyColorTheme>(plotlyColorTheme)
+
   const trials = useFilteredTrials(study, targets, false)
   useEffect(() => {
     if (study !== null) {
-      plotCoordinate(study, trials, targets, searchSpace, theme.palette.mode)
+      plotCoordinate(
+        study,
+        trials,
+        targets,
+        searchSpace,
+        theme.palette.mode,
+        colorTheme
+      )
     }
   }, [study, trials, targets, searchSpace, theme.palette.mode])
 
@@ -130,7 +141,8 @@ const plotCoordinate = (
   trials: Trial[],
   targets: Target[],
   searchSpace: SearchSpaceItem[],
-  mode: string
+  mode: string,
+  colorTheme: PlotlyColorTheme
 ) => {
   if (document.getElementById(plotDomId) === null) {
     return
@@ -143,7 +155,7 @@ const plotCoordinate = (
       r: 50,
       b: 100,
     },
-    template: mode === "dark" ? plotlyDarkTemplate : {},
+    template: getColorTemplate(mode, colorTheme),
     uirevision: "true",
   }
   if (trials.length === 0 || targets.length === 0) {