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

Add plotly color theme to GraphEdf

optuna_dashboard/ts/components/GraphEdf.tsx

@@ -1,10 +1,11 @@
+import { useTheme } from "@mui/material"
 import { GraphContainer, PlotEdf, useGraphComponentState } from "@optuna/react"
 import * as plotly from "plotly.js-dist-min"
 import React, { FC, useEffect } from "react"
 import { StudyDetail } from "ts/types/optuna"
 import { CompareStudiesPlotType } from "../apiClient"
 import { useAPIClient } from "../apiClientProvider"
-import { useBackendRender } from "../state"
+import { useBackendRender, usePlotlyColorTheme } from "../state"
 
 export const GraphEdf: FC<{
   studies: StudyDetail[]
@@ -13,7 +14,15 @@ export const GraphEdf: FC<{
   if (useBackendRender()) {
     return <GraphEdfBackend studies={studies} />
   } else {
-    return <PlotEdf studies={studies} objectiveId={objectiveId} />
+    const theme = useTheme()
+    const colorTheme = usePlotlyColorTheme(theme.palette.mode)
+    return (
+      <PlotEdf
+        studies={studies}
+        objectiveId={objectiveId}
+        colorTheme={colorTheme}
+      />
+    )
   }
 }
 

tslib/react/src/components/PlotEdf.tsx

@@ -17,10 +17,13 @@ const getPlotDomId = (objectiveId: number) => `plot-edf-${objectiveId}`
 export const PlotEdf: FC<{
   studies: Optuna.Study[]
   objectiveId: number
-}> = ({ studies, objectiveId }) => {
+  colorTheme?: Partial<Plotly.Template>
+}> = ({ studies, objectiveId, colorTheme }) => {
   const { graphComponentState, notifyGraphDidRender } = useGraphComponentState()
 
   const theme = useTheme()
+  const colorThemeUsed =
+    colorTheme ?? (theme.palette.mode === "dark" ? plotlyDarkTemplate : {})
 
   const domId = getPlotDomId(objectiveId)
   const target = useMemo<Target>(
@@ -39,11 +42,11 @@ export const PlotEdf: FC<{
   // biome-ignore lint/correctness/useExhaustiveDependencies: <explanation>
   useEffect(() => {
     if (graphComponentState !== "componentWillMount") {
-      plotEdf(edfPlotInfos, target, domId, theme.palette.mode)?.then(
+      plotEdf(edfPlotInfos, target, domId, colorThemeUsed)?.then(
         notifyGraphDidRender
       )
     }
-  }, [studies, target, theme.palette.mode, graphComponentState])
+  }, [studies, target, colorThemeUsed, graphComponentState])
 
   return (
     <Box component="div">
@@ -65,14 +68,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) {
     return plotly.react(domId, [], {
-      template: mode === "dark" ? plotlyDarkTemplate : {},
+      template: colorTheme,
     })
   }
 
@@ -90,7 +93,7 @@ const plotEdf = (
       r: 50,
       b: 50,
     },
-    template: mode === "dark" ? plotlyDarkTemplate : {},
+    template: colorTheme,
     legend: {
       x: 1.0,
       y: 0.95,