From 4828089fdff7d52a5f5b0e676442a46310fa359d Mon Sep 17 00:00:00 2001
From: Kenshin Abe <abe.kenshin@gmail.com>
Date: Fri, 26 Jan 2024 19:08:19 +0900
Subject: [PATCH] Split useBackendRender function

---
 optuna_dashboard/ts/components/GraphContour.tsx | 17 +++--------------
 optuna_dashboard/ts/state.ts                    | 16 ++++++++++++++++
 2 files changed, 19 insertions(+), 14 deletions(-)

diff --git a/optuna_dashboard/ts/components/GraphContour.tsx b/optuna_dashboard/ts/components/GraphContour.tsx
index 2c660a89..7f59e718 100644
--- a/optuna_dashboard/ts/components/GraphContour.tsx
+++ b/optuna_dashboard/ts/components/GraphContour.tsx
@@ -15,27 +15,16 @@ import blue from "@mui/material/colors/blue"
 import { plotlyDarkTemplate } from "./PlotlyDarkMode"
 import { useMergedUnionSearchSpace } from "../searchSpace"
 import { getAxisInfo } from "../graphUtil"
-import { useQuery } from "../urlQuery"
 import { getPlotAPI, PlotType } from "../apiClient"
-import { useRecoilValue } from "recoil"
-import { plotlypyIsAvailableState } from "../state"
+import { useBackendRender } from "../state"
 
 const plotDomId = "graph-contour"
 
 export const Contour: FC<{
   study: StudyDetail | null
 }> = ({ study = null }) => {
-  const query = useQuery()
-  const plotlypyIsAvailable = useRecoilValue<boolean>(plotlypyIsAvailableState)
-  if (query.get("plotlypy_rendering") === "true") {
-    if (plotlypyIsAvailable) {
-      return <ContourBackend study={study} />
-    } else {
-      console.warn(
-        "Use frontend rendering because plotlypy is specified but not available."
-      )
-      return <ContourFrontend study={study} />
-    }
+  if (useBackendRender()) {
+    return <ContourBackend study={study} />
   } else {
     return <ContourFrontend study={study} />
   }
diff --git a/optuna_dashboard/ts/state.ts b/optuna_dashboard/ts/state.ts
index 49307401..20f75c2d 100644
--- a/optuna_dashboard/ts/state.ts
+++ b/optuna_dashboard/ts/state.ts
@@ -1,4 +1,5 @@
 import { atom, useRecoilValue } from "recoil"
+import { useQuery } from "./urlQuery"
 
 export const studySummariesState = atom<StudySummary[]>({
   key: "studySummaries",
@@ -104,3 +105,18 @@ export const useArtifacts = (studyId: number, trialId: number): Artifact[] => {
   }
   return trial.artifacts
 }
+
+export const useBackendRender = (): boolean => {
+  const query = useQuery()
+  const plotlypyIsAvailable = useRecoilValue<boolean>(plotlypyIsAvailableState)
+
+  if (query.get("plotlypy_rendering") === "true") {
+    if (plotlypyIsAvailable) {
+      return true
+    }
+    console.warn(
+      "Use frontend rendering because plotlypy is specified but not available."
+    )
+  }
+  return false
+}