From 35baab0117514c0a1ce499f3addcdb8c2968af98 Mon Sep 17 00:00:00 2001
From: Kenshin Abe <abe.kenshin@gmail.com>
Date: Fri, 2 Feb 2024 18:59:50 +0900
Subject: [PATCH] Fetch plot API when num_trials is updated

---
 optuna_dashboard/ts/components/GraphContour.tsx            | 4 +++-
 optuna_dashboard/ts/components/GraphParallelCoordinate.tsx | 4 +++-
 optuna_dashboard/ts/components/GraphRank.tsx               | 4 +++-
 optuna_dashboard/ts/components/GraphSlice.tsx              | 4 +++-
 4 files changed, 12 insertions(+), 4 deletions(-)

diff --git a/optuna_dashboard/ts/components/GraphContour.tsx b/optuna_dashboard/ts/components/GraphContour.tsx
index 7f59e7184..c0c296de5 100644
--- a/optuna_dashboard/ts/components/GraphContour.tsx
+++ b/optuna_dashboard/ts/components/GraphContour.tsx
@@ -34,6 +34,8 @@ const ContourBackend: FC<{
   study: StudyDetail | null
 }> = ({ study = null }) => {
   const studyId = study?.id
+  const numCompletedTrials =
+    study?.trials.filter((t) => t.state === "Complete").length || 0
   useEffect(() => {
     if (studyId === undefined) {
       return
@@ -45,7 +47,7 @@ const ContourBackend: FC<{
       .catch((err) => {
         console.error(err)
       })
-  }, [studyId])
+  }, [studyId, numCompletedTrials])
   return <Box id={plotDomId} sx={{ height: "450px" }} />
 }
 
diff --git a/optuna_dashboard/ts/components/GraphParallelCoordinate.tsx b/optuna_dashboard/ts/components/GraphParallelCoordinate.tsx
index 3a2272372..22d4852ae 100644
--- a/optuna_dashboard/ts/components/GraphParallelCoordinate.tsx
+++ b/optuna_dashboard/ts/components/GraphParallelCoordinate.tsx
@@ -100,6 +100,8 @@ const GraphParallelCoordinateBackend: FC<{
   study: StudyDetail | null
 }> = ({ study = null }) => {
   const studyId = study?.id
+  const numCompletedTrials =
+    study?.trials.filter((t) => t.state === "Complete").length || 0
   useEffect(() => {
     if (studyId === undefined) {
       return
@@ -111,7 +113,7 @@ const GraphParallelCoordinateBackend: FC<{
       .catch((err) => {
         console.error(err)
       })
-  }, [studyId])
+  }, [studyId, numCompletedTrials])
   return <Box id={plotDomId} sx={{ height: "450px" }} />
 }
 
diff --git a/optuna_dashboard/ts/components/GraphRank.tsx b/optuna_dashboard/ts/components/GraphRank.tsx
index 3ee4f9dfc..ab25afeb1 100644
--- a/optuna_dashboard/ts/components/GraphRank.tsx
+++ b/optuna_dashboard/ts/components/GraphRank.tsx
@@ -45,6 +45,8 @@ const GraphRankBackend: FC<{
   study: StudyDetail | null
 }> = ({ study = null }) => {
   const studyId = study?.id
+  const numCompletedTrials =
+    study?.trials.filter((t) => t.state === "Complete").length || 0
   useEffect(() => {
     if (studyId === undefined) {
       return
@@ -56,7 +58,7 @@ const GraphRankBackend: FC<{
       .catch((err) => {
         console.error(err)
       })
-  }, [studyId])
+  }, [studyId, numCompletedTrials])
   return <Box id={plotDomId} sx={{ height: "450px" }} />
 }
 
diff --git a/optuna_dashboard/ts/components/GraphSlice.tsx b/optuna_dashboard/ts/components/GraphSlice.tsx
index c668423c2..6abaca50d 100644
--- a/optuna_dashboard/ts/components/GraphSlice.tsx
+++ b/optuna_dashboard/ts/components/GraphSlice.tsx
@@ -46,6 +46,8 @@ const GraphSliceBackend: FC<{
   study: StudyDetail | null
 }> = ({ study = null }) => {
   const studyId = study?.id
+  const numCompletedTrials =
+    study?.trials.filter((t) => t.state === "Complete").length || 0
   useEffect(() => {
     if (studyId === undefined) {
       return
@@ -57,7 +59,7 @@ const GraphSliceBackend: FC<{
       .catch((err) => {
         console.error(err)
       })
-  }, [studyId])
+  }, [studyId, numCompletedTrials])
   return <Box id={plotDomId} sx={{ height: "450px" }} />
 }