From 89c87c14c63e8608aaff71ebfa986072a865ba72 Mon Sep 17 00:00:00 2001
From: keisuke-umezawa <keisuke.umezawa@gmail.com>
Date: Sat, 10 Aug 2024 14:05:15 +0900
Subject: [PATCH] Add plotly color theme to PlotSlice

---
 optuna_dashboard/ts/components/GraphSlice.tsx |  7 +++++--
 tslib/react/src/components/PlotSlice.tsx      | 13 ++++++++-----
 2 files changed, 13 insertions(+), 7 deletions(-)

diff --git a/optuna_dashboard/ts/components/GraphSlice.tsx b/optuna_dashboard/ts/components/GraphSlice.tsx
index d758c661..4c67d8ff 100644
--- a/optuna_dashboard/ts/components/GraphSlice.tsx
+++ b/optuna_dashboard/ts/components/GraphSlice.tsx
@@ -1,3 +1,4 @@
+import { useTheme } from "@mui/material"
 import {
   GraphContainer,
   PlotSlice,
@@ -8,7 +9,7 @@ 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
@@ -16,7 +17,9 @@ export const GraphSlice: FC<{
   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} />
   }
 }
 
diff --git a/tslib/react/src/components/PlotSlice.tsx b/tslib/react/src/components/PlotSlice.tsx
index 3a70c5e8..82e569cd 100644
--- a/tslib/react/src/components/PlotSlice.tsx
+++ b/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 ||