Merge pull request #927 from keisuke-umezawa/feature/add-plotly-mode

Add plotly mode argument to all existing plot in tslib

optuna_dashboard/ts/components/GraphHyperparameterImportances.tsx

@@ -1,4 +1,4 @@
-import { Box, Card, CardContent } from "@mui/material"
+import { Box, Card, CardContent, useTheme } from "@mui/material"
 import * as plotly from "plotly.js-dist-min"
 import React, { FC, useEffect } from "react"
 
@@ -7,7 +7,7 @@ import { StudyDetail } from "ts/types/optuna"
 import { PlotType } from "../apiClient"
 import { useParamImportance } from "../hooks/useParamImportance"
 import { usePlot } from "../hooks/usePlot"
-import { useBackendRender } from "../state"
+import { useBackendRender, usePlotlyColorTheme } from "../state"
 
 const plotDomId = "graph-hyperparameter-importances"
 
@@ -32,13 +32,16 @@ export const GraphHyperparameterImportance: FC<{
       />
     )
   } else {
+    const theme = useTheme()
+    const colorTheme = usePlotlyColorTheme(theme.palette.mode)
     return (
       <Card>
         <CardContent>
           <PlotImportance
             study={study}
             importance={importances}
             graphHeight={graphHeight}
+            colorTheme={colorTheme}
           />
         </CardContent>
       </Card>

optuna_dashboard/ts/components/GraphIntermediateValues.tsx

@@ -1,20 +1,24 @@
-import { Card, CardContent } from "@mui/material"
+import { Card, CardContent, useTheme } from "@mui/material"
 import { PlotIntermediateValues } from "@optuna/react"
 import React, { FC } from "react"
 import { Trial } from "ts/types/optuna"
+import { usePlotlyColorTheme } from "../state"
 
 export const GraphIntermediateValues: FC<{
   trials: Trial[]
   includePruned: boolean
   logScale: boolean
 }> = ({ trials, includePruned, logScale }) => {
+  const theme = useTheme()
+  const colorTheme = usePlotlyColorTheme(theme.palette.mode)
   return (
     <Card>
       <CardContent>
         <PlotIntermediateValues
           trials={trials}
           includePruned={includePruned}
           logScale={logScale}
+          colorTheme={colorTheme}
         />
       </CardContent>
     </Card>

optuna_dashboard/ts/components/GraphSlice.tsx

@@ -1,3 +1,4 @@
+import { useTheme } from "@mui/material"
 import {
   GraphContainer,
   PlotSlice,
@@ -8,15 +9,17 @@ import React, { FC, useEffect } from "react"
 import { StudyDetail } from "ts/types/optuna"
 import { PlotType } from "../apiClient"
 import { usePlot } from "../hooks/usePlot"
-import { useBackendRender } from "../state"
+import { useBackendRender, usePlotlyColorTheme } from "../state"
 
 export const GraphSlice: FC<{
   study: StudyDetail | null
 }> = ({ study = null }) => {
   if (useBackendRender()) {
     return <GraphSliceBackend study={study} />
   } else {
-    return <PlotSlice study={study} />
+    const theme = useTheme()
+    const colorTheme = usePlotlyColorTheme(theme.palette.mode)
+    return <PlotSlice study={study} colorTheme={colorTheme} />
   }
 }
 

tslib/react/src/components/PlotImportance.tsx

@@ -10,17 +10,19 @@ export const PlotImportance: FC<{
   study: Optuna.Study | null
   importance?: Optuna.ParamImportance[][]
   graphHeight?: string
-}> = ({ study = null, importance, graphHeight = "450px" }) => {
+  colorTheme?: Partial<Plotly.Template>
+}> = ({ study = null, importance, graphHeight = "450px", colorTheme }) => {
   const theme = useTheme()
+  const colorThemeUsed =
+    colorTheme ?? (theme.palette.mode === "dark" ? plotlyDarkTemplate : {})
   const objectiveNames: string[] = study
     ? study.directions.map((_d, i) => `Objective ${i}`)
     : []
-
   useEffect(() => {
     if (study !== null && importance !== undefined && importance.length > 0) {
-      plotParamImportancesBeta(importance, objectiveNames, theme.palette.mode)
+      plotParamImportancesBeta(importance, objectiveNames, colorThemeUsed)
     }
-  }, [study, objectiveNames, importance, theme.palette.mode])
+  }, [study, objectiveNames, importance, colorThemeUsed])
 
   return (
     <>
@@ -38,7 +40,7 @@ export const PlotImportance: FC<{
 const plotParamImportancesBeta = (
   importances: Optuna.ParamImportance[][],
   objectiveNames: string[],
-  mode: string
+  colorTheme: Partial<Plotly.Template>
 ) => {
   const layout: Partial<plotly.Layout> = {
     xaxis: {
@@ -58,7 +60,7 @@ const plotParamImportancesBeta = (
     bargap: 0.15,
     bargroupgap: 0.1,
     uirevision: "true",
-    template: mode === "dark" ? plotlyDarkTemplate : {},
+    template: colorTheme,
     legend: {
       x: 1.0,
       y: 0.95,

tslib/react/src/components/PlotIntermediateValues.tsx

@@ -10,18 +10,21 @@ export const PlotIntermediateValues: FC<{
   trials: Optuna.Trial[]
   includePruned: boolean
   logScale: boolean
-}> = ({ trials, includePruned, logScale }) => {
+  colorTheme?: Partial<Plotly.Template>
+}> = ({ trials, includePruned, logScale, colorTheme }) => {
   const theme = useTheme()
+  const colorThemeUsed =
+    colorTheme ?? (theme.palette.mode === "dark" ? plotlyDarkTemplate : {})
 
   useEffect(() => {
     plotIntermediateValue(
       trials,
-      theme.palette.mode,
+      colorThemeUsed,
       false,
       !includePruned,
       logScale
     )
-  }, [trials, theme.palette.mode, includePruned, logScale])
+  }, [trials, colorThemeUsed, includePruned, logScale])
 
   return (
     <>
@@ -38,7 +41,7 @@ export const PlotIntermediateValues: FC<{
 
 const plotIntermediateValue = (
   trials: Optuna.Trial[],
-  mode: string,
+  colorTheme: Partial<Plotly.Template>,
   filterCompleteTrial: boolean,
   filterPrunedTrial: boolean,
   logScale: boolean
@@ -63,7 +66,7 @@ const plotIntermediateValue = (
       type: "linear",
     },
     uirevision: "true",
-    template: mode === "dark" ? plotlyDarkTemplate : {},
+    template: colorTheme,
     legend: {
       x: 1.0,
       y: 0.95,

tslib/react/src/components/PlotSlice.tsx

@@ -34,10 +34,13 @@ const domId = "plot-slice"
 
 export const PlotSlice: FC<{
   study: Optuna.Study | null
-}> = ({ study = null }) => {
+  colorTheme?: Partial<Plotly.Template>
+}> = ({ study = null, colorTheme }) => {
   const { graphComponentState, notifyGraphDidRender } = useGraphComponentState()
 
   const theme = useTheme()
+  const colorThemeUsed =
+    colorTheme ?? (theme.palette.mode === "dark" ? plotlyDarkTemplate : {})
 
   const [objectiveTargets, selectedObjective, setObjectiveTarget] =
     useObjectiveAndUserAttrTargets(study)
@@ -63,7 +66,7 @@ export const PlotSlice: FC<{
         selectedParamTarget,
         searchSpace.find((s) => s.name === selectedParamTarget?.key) || null,
         logYScale,
-        theme.palette.mode
+        colorThemeUsed
       )?.then(notifyGraphDidRender)
     }
   }, [
@@ -72,7 +75,7 @@ export const PlotSlice: FC<{
     searchSpace,
     selectedParamTarget,
     logYScale,
-    theme.palette.mode,
+    colorThemeUsed,
     graphComponentState,
   ])
 
@@ -160,7 +163,7 @@ const plotSlice = (
   selectedParamTarget: Target | null,
   selectedParamSpace: Optuna.SearchSpaceItem | null,
   logYScale: boolean,
-  mode: string
+  colorTheme: Partial<Plotly.Template>
 ) => {
   if (document.getElementById(domId) === null) {
     return
@@ -190,7 +193,7 @@ const plotSlice = (
     },
     showlegend: false,
     uirevision: "true",
-    template: mode === "dark" ? plotlyDarkTemplate : {},
+    template: colorTheme,
   }
   if (
     selectedParamSpace === null ||