From 49b237052987271e5df7181616e2ef1e8edaa2f3 Mon Sep 17 00:00:00 2001
From: porink0424 <daichi2120@gmail.com>
Date: Wed, 28 Aug 2024 15:28:46 +0900
Subject: [PATCH] Fix the bug that violates "Rules of Hooks"

---
 optuna_dashboard/ts/components/GraphEdf.tsx                  | 5 +++--
 .../ts/components/GraphHyperparameterImportances.tsx         | 5 +++--
 optuna_dashboard/ts/components/GraphSlice.tsx                | 5 +++--
 3 files changed, 9 insertions(+), 6 deletions(-)

diff --git a/optuna_dashboard/ts/components/GraphEdf.tsx b/optuna_dashboard/ts/components/GraphEdf.tsx
index d067f8f3..7211176d 100644
--- a/optuna_dashboard/ts/components/GraphEdf.tsx
+++ b/optuna_dashboard/ts/components/GraphEdf.tsx
@@ -11,11 +11,12 @@ export const GraphEdf: FC<{
   studies: StudyDetail[]
   objectiveId: number
 }> = ({ studies, objectiveId }) => {
+  const theme = useTheme()
+  const colorTheme = usePlotlyColorTheme(theme.palette.mode)
+
   if (useBackendRender()) {
     return <GraphEdfBackend studies={studies} />
   } else {
-    const theme = useTheme()
-    const colorTheme = usePlotlyColorTheme(theme.palette.mode)
     return (
       <PlotEdf
         studies={studies}
diff --git a/optuna_dashboard/ts/components/GraphHyperparameterImportances.tsx b/optuna_dashboard/ts/components/GraphHyperparameterImportances.tsx
index b69c1fef..84af888b 100644
--- a/optuna_dashboard/ts/components/GraphHyperparameterImportances.tsx
+++ b/optuna_dashboard/ts/components/GraphHyperparameterImportances.tsx
@@ -23,6 +23,9 @@ export const GraphHyperparameterImportance: FC<{
     studyId,
   })
 
+  const theme = useTheme()
+  const colorTheme = usePlotlyColorTheme(theme.palette.mode)
+
   if (useBackendRender()) {
     return (
       <GraphHyperparameterImportanceBackend
@@ -32,8 +35,6 @@ export const GraphHyperparameterImportance: FC<{
       />
     )
   } else {
-    const theme = useTheme()
-    const colorTheme = usePlotlyColorTheme(theme.palette.mode)
     return (
       <Card>
         <CardContent>
diff --git a/optuna_dashboard/ts/components/GraphSlice.tsx b/optuna_dashboard/ts/components/GraphSlice.tsx
index 4c67d8ff..8f75b1ae 100644
--- a/optuna_dashboard/ts/components/GraphSlice.tsx
+++ b/optuna_dashboard/ts/components/GraphSlice.tsx
@@ -14,11 +14,12 @@ import { useBackendRender, usePlotlyColorTheme } from "../state"
 export const GraphSlice: FC<{
   study: StudyDetail | null
 }> = ({ study = null }) => {
+  const theme = useTheme()
+  const colorTheme = usePlotlyColorTheme(theme.palette.mode)
+
   if (useBackendRender()) {
     return <GraphSliceBackend study={study} />
   } else {
-    const theme = useTheme()
-    const colorTheme = usePlotlyColorTheme(theme.palette.mode)
     return <PlotSlice study={study} colorTheme={colorTheme} />
   }
 }