Merge pull request #632 from gen740/add_color_scale_setting

Add color scale setting

biome.json

@@ -12,7 +12,7 @@
 			"vscode/src/**/*.tsx"
 		],
 		"ignore": [
-			"optuna_dashboard/ts/components/PlotlyDarkMode.ts",
+			"optuna_dashboard/ts/components/PlotlyColorTemplates.ts",
 			"standalone_app/src/PlotlyDarkMode.ts"
 		]
 	},

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}>
@@ -333,6 +347,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,8 @@ import {
   Box,
 } from "@mui/material"
 import blue from "@mui/material/colors/blue"
-import { plotlyDarkTemplate } from "./PlotlyDarkMode"
 import { useMergedUnionSearchSpace } from "../searchSpace"
+import { usePlotlyColorTheme } from "../state"
 import { getAxisInfo } from "../graphUtil"
 import { getPlotAPI, PlotType } from "../apiClient"
 import { useBackendRender } from "../state"
@@ -55,6 +55,8 @@ const ContourFrontend: FC<{
   study: StudyDetail | null
 }> = ({ study = null }) => {
   const theme = useTheme()
+  const colorTheme = usePlotlyColorTheme(theme.palette.mode)
+
   const [objectiveId, setObjectiveId] = useState<number>(0)
   const searchSpace = useMergedUnionSearchSpace(study?.union_search_space)
   const [xParam, setXParam] = useState<SearchSpaceItem | null>(null)
@@ -82,9 +84,9 @@ const ContourFrontend: FC<{
 
   useEffect(() => {
     if (study != null) {
-      plotContour(study, objectiveId, xParam, yParam, theme.palette.mode)
+      plotContour(study, objectiveId, xParam, yParam, colorTheme)
     }
-  }, [study, objectiveId, xParam, yParam, theme.palette.mode])
+  }, [study, objectiveId, xParam, yParam, colorTheme])
 
   const space: SearchSpaceItem[] = study ? study.union_search_space : []
 
@@ -163,7 +165,7 @@ const plotContour = (
   objectiveId: number,
   xParam: SearchSpaceItem | null,
   yParam: SearchSpaceItem | null,
-  mode: string
+  colorTheme: Partial<Plotly.Template>
 ) => {
   if (document.getElementById(plotDomId) === null) {
     return
@@ -173,7 +175,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: colorTheme,
     })
     return
   }
@@ -199,7 +201,7 @@ const plotContour = (
       b: 50,
     },
     uirevision: "true",
-    template: mode === "dark" ? plotlyDarkTemplate : {},
+    template: colorTheme,
   }
 
   // TODO(c-bata): Support parameters that only have the single value

optuna_dashboard/ts/components/GraphEdf.tsx

@@ -1,10 +1,9 @@
 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 { getCompareStudiesPlotAPI, CompareStudiesPlotType } from "../apiClient"
-import { useBackendRender } from "../state"
+import { usePlotlyColorTheme, useBackendRender } from "../state"
 
 const getPlotDomId = (objectiveId: number) => `graph-edf-${objectiveId}`
 
@@ -54,6 +53,8 @@ const GraphEdfFrontend: FC<{
   objectiveId: number
 }> = ({ studies, objectiveId }) => {
   const theme = useTheme()
+  const colorTheme = usePlotlyColorTheme(theme.palette.mode)
+
   const domId = getPlotDomId(objectiveId)
   const target = useMemo<Target>(
     () => new Target("objective", objectiveId),
@@ -69,8 +70,8 @@ const GraphEdfFrontend: FC<{
   })
 
   useEffect(() => {
-    plotEdf(edfPlotInfos, target, domId, theme.palette.mode)
-  }, [studies, target, theme.palette.mode])
+    plotEdf(edfPlotInfos, target, domId, colorTheme)
+  }, [studies, target, colorTheme])
 
   return (
     <Box>
@@ -89,14 +90,14 @@ const plotEdf = (
   edfPlotInfos: EdfPlotInfo[],
   target: Target,
   domId: string,
-  mode: string
+  colorTheme: Partial<Plotly.Template>
 ) => {
   if (document.getElementById(domId) === null) {
     return
   }
   if (edfPlotInfos.length === 0) {
     plotly.react(domId, [], {
-      template: mode === "dark" ? plotlyDarkTemplate : {},
+      template: colorTheme,
     })
     return
   }
@@ -115,7 +116,7 @@ const plotEdf = (
       r: 50,
       b: 50,
     },
-    template: mode === "dark" ? plotlyDarkTemplate : {},
+    template: colorTheme,
   }
 
   const plotData: Partial<plotly.PlotData>[] = edfPlotInfos.map((h) => {

optuna_dashboard/ts/components/GraphHistory.tsx

@@ -15,12 +15,12 @@ import {
   useTheme,
   Slider,
 } from "@mui/material"
-import { plotlyDarkTemplate } from "./PlotlyDarkMode"
 import {
   useFilteredTrialsFromStudies,
   Target,
   useObjectiveAndUserAttrTargetsFromStudies,
 } from "../trialFilter"
+import { usePlotlyColorTheme } from "../state"
 import { useNavigate } from "react-router-dom"
 
 const plotDomId = "graph-history"
@@ -38,6 +38,7 @@ export const GraphHistory: FC<{
   includePruned: boolean
 }> = ({ studies, logScale, includePruned }) => {
   const theme = useTheme()
+  const colorTheme = usePlotlyColorTheme(theme.palette.mode)
   const navigate = useNavigate()
   const [xAxis, setXAxis] = useState<
     "number" | "datetime_start" | "datetime_complete"
@@ -69,6 +70,7 @@ export const GraphHistory: FC<{
       xAxis,
       logScale,
       theme.palette.mode,
+      colorTheme,
       markerSize
     )
     const element = document.getElementById(plotDomId)
@@ -106,7 +108,15 @@ export const GraphHistory: FC<{
         element.removeAllListeners("plotly_click")
       }
     }
-  }, [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)
@@ -216,6 +226,7 @@ const plotHistory = (
   xAxis: "number" | "datetime_start" | "datetime_complete",
   logScale: boolean,
   mode: string,
+  colorTheme: Partial<Plotly.Template>,
   markerSize: number
 ) => {
   if (document.getElementById(plotDomId) === null) {
@@ -223,7 +234,7 @@ const plotHistory = (
   }
   if (historyPlotInfos.length === 0) {
     plotly.react(plotDomId, [], {
-      template: mode === "dark" ? plotlyDarkTemplate : {},
+      template: colorTheme,
     })
     return
   }
@@ -244,7 +255,7 @@ const plotHistory = (
       type: xAxis === "number" ? "linear" : "date",
     },
     showlegend: historyPlotInfos.length === 1 ? false : true,
-    template: mode === "dark" ? plotlyDarkTemplate : {},
+    template: colorTheme,
   }
 
   const getAxisX = (trial: Trial): number | Date => {

optuna_dashboard/ts/components/GraphHyperparameterImportances.tsx

@@ -2,9 +2,10 @@ 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"
+import { usePlotlyColorTheme } from "../state"
+
 const plotDomId = "graph-hyperparameter-importances"
 
 export const GraphHyperparameterImportance: FC<{
@@ -13,6 +14,8 @@ export const GraphHyperparameterImportance: FC<{
   graphHeight: string
 }> = ({ studyId, study = null, graphHeight }) => {
   const theme = useTheme()
+  const colorTheme = usePlotlyColorTheme(theme.palette.mode)
+
   const action = actionCreator()
   const importances = useParamImportanceValue(studyId)
   const numCompletedTrials =
@@ -29,9 +32,9 @@ export const GraphHyperparameterImportance: FC<{
 
   useEffect(() => {
     if (importances !== null && nObjectives === importances.length) {
-      plotParamImportance(importances, objectiveNames, theme.palette.mode)
+      plotParamImportance(importances, objectiveNames, colorTheme)
     }
-  }, [nObjectives, importances, theme.palette.mode])
+  }, [nObjectives, importances, colorTheme])
 
   return (
     <Card>
@@ -51,7 +54,7 @@ export const GraphHyperparameterImportance: FC<{
 const plotParamImportance = (
   importances: ParamImportance[][],
   objectiveNames: string[],
-  mode: string
+  colorTheme: Partial<Plotly.Template>
 ) => {
   const layout: Partial<plotly.Layout> = {
     xaxis: {
@@ -71,7 +74,7 @@ const plotParamImportance = (
     bargap: 0.15,
     bargroupgap: 0.1,
     uirevision: "true",
-    template: mode === "dark" ? plotlyDarkTemplate : {},
+    template: colorTheme,
   }
 
   if (document.getElementById(plotDomId) === null) {

optuna_dashboard/ts/components/GraphIntermediateValues.tsx

@@ -1,7 +1,7 @@
 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 { usePlotlyColorTheme } from "../state"
 
 const plotDomId = "graph-intermediate-values"
 
@@ -11,16 +11,11 @@ export const GraphIntermediateValues: FC<{
   logScale: boolean
 }> = ({ trials, includePruned, logScale }) => {
   const theme = useTheme()
+  const colorTheme = usePlotlyColorTheme(theme.palette.mode)
 
   useEffect(() => {
-    plotIntermediateValue(
-      trials,
-      theme.palette.mode,
-      false,
-      !includePruned,
-      logScale
-    )
-  }, [trials, theme.palette.mode, false, includePruned, logScale])
+    plotIntermediateValue(trials, colorTheme, false, !includePruned, logScale)
+  }, [trials, colorTheme, includePruned, logScale])
 
   return (
     <Card>
@@ -39,7 +34,7 @@ export const GraphIntermediateValues: FC<{
 
 const plotIntermediateValue = (
   trials: Trial[],
-  mode: string,
+  colorTheme: Partial<Plotly.Template>,
   filterCompleteTrial: boolean,
   filterPrunedTrial: boolean,
   logScale: boolean
@@ -64,7 +59,7 @@ const plotIntermediateValue = (
       type: "linear",
     },
     uirevision: "true",
-    template: mode === "dark" ? plotlyDarkTemplate : {},
+    template: colorTheme,
   }
   if (trials.length === 0) {
     plotly.react(plotDomId, [], layout)

optuna_dashboard/ts/components/GraphParallelCoordinate.tsx

@@ -9,7 +9,7 @@ import {
   FormControlLabel,
   Checkbox,
 } from "@mui/material"
-import { plotlyDarkTemplate } from "./PlotlyDarkMode"
+import { usePlotlyColorTheme } from "../state"
 import {
   Target,
   useFilteredTrials,
@@ -121,14 +121,16 @@ const GraphParallelCoordinateFrontend: FC<{
   study: StudyDetail | null
 }> = ({ study = null }) => {
   const theme = useTheme()
+  const colorTheme = usePlotlyColorTheme(theme.palette.mode)
+
   const [targets, searchSpace, renderCheckBoxes] = useTargets(study)
 
   const trials = useFilteredTrials(study, targets, false)
   useEffect(() => {
     if (study !== null) {
-      plotCoordinate(study, trials, targets, searchSpace, theme.palette.mode)
+      plotCoordinate(study, trials, targets, searchSpace, colorTheme)
     }
-  }, [study, trials, targets, searchSpace, theme.palette.mode])
+  }, [study, trials, targets, searchSpace, colorTheme])
 
   return (
     <Grid container direction="row">
@@ -163,7 +165,7 @@ const plotCoordinate = (
   trials: Trial[],
   targets: Target[],
   searchSpace: SearchSpaceItem[],
-  mode: string
+  colorTheme: Partial<Plotly.Template>
 ) => {
   if (document.getElementById(plotDomId) === null) {
     return
@@ -176,7 +178,7 @@ const plotCoordinate = (
       r: 50,
       b: 100,
     },
-    template: mode === "dark" ? plotlyDarkTemplate : {},
+    template: colorTheme,
     uirevision: "true",
   }
   if (trials.length === 0 || targets.length === 0) {

optuna_dashboard/ts/components/GraphParetoFront.tsx

@@ -11,8 +11,8 @@ import {
   useTheme,
   Box,
 } from "@mui/material"
-import { plotlyDarkTemplate } from "./PlotlyDarkMode"
 import { makeHovertext } from "../graphUtil"
+import { usePlotlyColorTheme } from "../state"
 import { useNavigate } from "react-router-dom"
 
 const plotDomId = "graph-pareto-front"
@@ -21,6 +21,7 @@ export const GraphParetoFront: FC<{
   study: StudyDetail | null
 }> = ({ study = null }) => {
   const theme = useTheme()
+  const colorTheme = usePlotlyColorTheme(theme.palette.mode)
   const navigate = useNavigate()
   const [objectiveXId, setObjectiveXId] = useState<number>(0)
   const [objectiveYId, setObjectiveYId] = useState<number>(1)
@@ -36,7 +37,13 @@ export const GraphParetoFront: FC<{
 
   useEffect(() => {
     if (study != null) {
-      plotParetoFront(study, objectiveXId, objectiveYId, theme.palette.mode)
+      plotParetoFront(
+        study,
+        objectiveXId,
+        objectiveYId,
+        theme.palette.mode,
+        colorTheme
+      )
       const element = document.getElementById(plotDomId)
       if (element != null) {
         // @ts-ignore
@@ -55,7 +62,7 @@ export const GraphParetoFront: FC<{
         }
       }
     }
-  }, [study, objectiveXId, objectiveYId, theme.palette.mode])
+  }, [study, objectiveXId, objectiveYId, theme.palette.mode, colorTheme])
 
   return (
     <Grid container direction="row">
@@ -254,7 +261,8 @@ const plotParetoFront = (
   study: StudyDetail,
   objectiveXId: number,
   objectiveYId: number,
-  mode: string
+  mode: string,
+  colorTheme: Partial<Plotly.Template>
 ) => {
   if (document.getElementById(plotDomId) === null) {
     return
@@ -267,7 +275,7 @@ const plotParetoFront = (
       r: 50,
       b: 0,
     },
-    template: mode === "dark" ? plotlyDarkTemplate : {},
+    template: colorTheme,
     uirevision: "true",
   }
 

optuna_dashboard/ts/components/GraphRank.tsx

@@ -11,11 +11,10 @@ import {
   useTheme,
   Box,
 } from "@mui/material"
-import { plotlyDarkTemplate } from "./PlotlyDarkMode"
 import { getAxisInfo, makeHovertext } from "../graphUtil"
 import { useMergedUnionSearchSpace } from "../searchSpace"
+import { usePlotlyColorTheme, useBackendRender } from "../state"
 import { getPlotAPI, PlotType } from "../apiClient"
-import { useBackendRender } from "../state"
 
 const plotDomId = "graph-rank"
 
@@ -66,6 +65,8 @@ const GraphRankFrontend: FC<{
   study: StudyDetail | null
 }> = ({ study = null }) => {
   const theme = useTheme()
+  const colorTheme = usePlotlyColorTheme(theme.palette.mode)
+
   const [objectiveId, setobjectiveId] = useState<number>(0)
   const searchSpace = useMergedUnionSearchSpace(study?.union_search_space)
   const [xParam, setXParam] = useState<SearchSpaceItem | null>(null)
@@ -94,9 +95,9 @@ const GraphRankFrontend: FC<{
   useEffect(() => {
     if (study != null) {
       const rankPlotInfo = getRankPlotInfo(study, objectiveId, xParam, yParam)
-      plotRank(rankPlotInfo, theme.palette.mode)
+      plotRank(rankPlotInfo, colorTheme)
     }
-  }, [study, objectiveId, xParam, yParam, theme.palette.mode])
+  }, [study, objectiveId, xParam, yParam, theme.palette.mode, colorTheme])
 
   const space: SearchSpaceItem[] = study ? study.union_search_space : []
 
@@ -291,14 +292,17 @@ const getOrderWithSameOrderAveraging = (values: number[]): number[] => {
   return ranks
 }
 
-const plotRank = (rankPlotInfo: RankPlotInfo | null, mode: string) => {
+const plotRank = (
+  rankPlotInfo: RankPlotInfo | null,
+  colorTheme: Partial<Plotly.Template>
+) => {
   if (document.getElementById(plotDomId) === null) {
     return
   }
 
   if (rankPlotInfo === null) {
     plotly.react(plotDomId, [], {
-      template: mode === "dark" ? plotlyDarkTemplate : {},
+      template: colorTheme,
     })
     return
   }
@@ -319,7 +323,7 @@ const plotRank = (rankPlotInfo: RankPlotInfo | null, mode: string) => {
       b: 50,
     },
     uirevision: "true",
-    template: mode === "dark" ? plotlyDarkTemplate : {},
+    template: colorTheme,
   }
 
   const xValues = rankPlotInfo.xvalues

optuna_dashboard/ts/components/GraphSlice.tsx

@@ -12,7 +12,6 @@ import {
   useTheme,
   Box,
 } from "@mui/material"
-import { plotlyDarkTemplate } from "./PlotlyDarkMode"
 import {
   Target,
   useFilteredTrials,
@@ -20,8 +19,8 @@ import {
   useParamTargets,
 } from "../trialFilter"
 import { useMergedUnionSearchSpace } from "../searchSpace"
+import { usePlotlyColorTheme, useBackendRender } from "../state"
 import { getPlotAPI, PlotType } from "../apiClient"
-import { useBackendRender } from "../state"
 
 const plotDomId = "graph-slice"
 
@@ -67,6 +66,7 @@ const GraphSliceFrontend: FC<{
   study: StudyDetail | null
 }> = ({ study = null }) => {
   const theme = useTheme()
+  const colorTheme = usePlotlyColorTheme(theme.palette.mode)
 
   const [objectiveTargets, selectedObjective, setObjectiveTarget] =
     useObjectiveAndUserAttrTargets(study)
@@ -90,7 +90,7 @@ const GraphSliceFrontend: FC<{
       selectedParamTarget,
       searchSpace.find((s) => s.name === selectedParamTarget?.key) || null,
       logYScale,
-      theme.palette.mode
+      colorTheme
     )
   }, [
     trials,
@@ -98,7 +98,7 @@ const GraphSliceFrontend: FC<{
     searchSpace,
     selectedParamTarget,
     logYScale,
-    theme.palette.mode,
+    colorTheme,
   ])
 
   const handleObjectiveChange = (event: SelectChangeEvent<string>) => {
@@ -180,7 +180,7 @@ const plotSlice = (
   selectedParamTarget: Target | null,
   selectedParamSpace: SearchSpaceItem | null,
   logYScale: boolean,
-  mode: string
+  colorTheme: Partial<Plotly.Template>
 ) => {
   if (document.getElementById(plotDomId) === null) {
     return
@@ -210,7 +210,7 @@ const plotSlice = (
     },
     showlegend: false,
     uirevision: "true",
-    template: mode === "dark" ? plotlyDarkTemplate : {},
+    template: colorTheme,
   }
   if (
     selectedParamSpace === null ||

optuna_dashboard/ts/components/GraphTimeline.tsx

@@ -1,8 +1,8 @@
 import * as plotly from "plotly.js-dist-min"
 import React, { FC, useEffect } from "react"
 import { Card, CardContent, Grid, Typography, useTheme } from "@mui/material"
-import { plotlyDarkTemplate } from "./PlotlyDarkMode"
 import { makeHovertext } from "../graphUtil"
+import { usePlotlyColorTheme } from "../state"
 
 const plotDomId = "graph-timeline"
 const maxBars = 100
@@ -11,14 +11,15 @@ export const GraphTimeline: FC<{
   study: StudyDetail | null
 }> = ({ study }) => {
   const theme = useTheme()
+  const colorTheme = usePlotlyColorTheme(theme.palette.mode)
 
   const trials = study?.trials ?? []
 
   useEffect(() => {
     if (study !== null) {
-      plotTimeline(trials, theme.palette.mode)
+      plotTimeline(trials, colorTheme)
     }
-  }, [trials, theme.palette.mode])
+  }, [trials, colorTheme])
 
   return (
     <Card>
@@ -37,14 +38,17 @@ export const GraphTimeline: FC<{
   )
 }
 
-const plotTimeline = (trials: Trial[], mode: string) => {
+const plotTimeline = (
+  trials: Trial[],
+  colorTheme: Partial<Plotly.Template>
+) => {
   if (document.getElementById(plotDomId) === null) {
     return
   }
 
   if (trials.length === 0) {
     plotly.react(plotDomId, [], {
-      template: mode === "dark" ? plotlyDarkTemplate : {},
+      template: colorTheme,
     })
     return
   }
@@ -115,7 +119,7 @@ const plotTimeline = (trials: Trial[], mode: string) => {
       range: [lastTrials[0].number, lastTrials[0].number + lastTrials.length],
     },
     uirevision: "true",
-    template: mode === "dark" ? plotlyDarkTemplate : {},
+    template: colorTheme,
   }
 
   const makeTrace = (bars: Trial[], state: string, color: string) => {

optuna_dashboard/ts/components/Settings.tsx

@@ -0,0 +1,73 @@
+import React, { FC, useState } from "react"
+
+import {
+  Typography,
+  Select,
+  MenuItem,
+  Grid,
+  SelectChangeEvent,
+} from "@mui/material"
+
+import { useRecoilValue, useSetRecoilState } from "recoil"
+import { plotlyColorTheme } from "../state"
+
+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)
+
+  const handleDarkModeColorChange = (event: SelectChangeEvent) => {
+    setDarkModeColor(event.target.value)
+    setPlotlyColorTheme({ dark: event.target.value, light: lightModeColor })
+  }
+
+  const handleLightModeColorChange = (event: SelectChangeEvent) => {
+    setLightModeColor(event.target.value)
+    setPlotlyColorTheme({ dark: darkModeColor, light: event.target.value })
+  }
+
+  return (
+    <Grid container spacing={4} sx={{ padding: "40px" }}>
+      <Grid item xs={12}>
+        <Typography variant="h3" gutterBottom color="textSecondary">
+          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>
+
+      <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>
+    </Grid>
+  )
+}

optuna_dashboard/ts/state.ts

@@ -1,4 +1,8 @@
 import { atom, useRecoilValue } from "recoil"
+import {
+  LightColorTemplates,
+  DarkColorTemplates,
+} from "./components/PlotlyColorTemplates"
 import { useQuery } from "./urlQuery"
 
 export const studySummariesState = atom<StudySummary[]>({
@@ -49,6 +53,14 @@ export const artifactIsAvailable = atom<boolean>({
   default: false,
 })
 
+export const plotlyColorTheme = atom<PlotlyColorTheme>({
+  key: "plotlyDarkColorScale",
+  default: {
+    dark: "default",
+    light: "default",
+  },
+})
+
 export const plotlypyIsAvailableState = atom<boolean>({
   key: "plotlypyIsAvailable",
   default: true,
@@ -111,6 +123,15 @@ export const useArtifacts = (studyId: number, trialId: number): Artifact[] => {
   return trial.artifacts
 }
 
+export const usePlotlyColorTheme = (mode: string): Partial<Plotly.Template> => {
+  const theme = useRecoilValue(plotlyColorTheme)
+  if (mode === "dark") {
+    return DarkColorTemplates[theme.dark]
+  } else {
+    return LightColorTemplates[theme.light]
+  }
+}
+
 export const useBackendRender = (): boolean => {
   const query = useQuery()
   const plotlypyIsAvailable = useRecoilValue<boolean>(plotlypyIsAvailableState)

optuna_dashboard/ts/types/index.d.ts

@@ -230,6 +230,7 @@ type StudyDetails = {
 type StudyParamImportance = {
   [study_id: string]: ParamImportance[][]
 }
+
 type PreferenceHistory = {
   id: string
   candidates: number[]
@@ -239,3 +240,8 @@ type PreferenceHistory = {
   preferences: [number, number][]
   is_removed: boolean
 }
+
+type PlotlyColorTheme = {
+  dark: string
+  light: string
+}