From b3a63b2d75c2a6d97aec31960d8111392b564780 Mon Sep 17 00:00:00 2001
From: keisuke-umezawa <keisuke.umezawa@gmail.com>
Date: Mon, 4 Mar 2024 17:58:00 +0900
Subject: [PATCH] Create state for each study

---
 optuna_dashboard/ts/action.ts                  | 12 ++++++------
 optuna_dashboard/ts/components/StudyDetail.tsx |  8 +++++---
 optuna_dashboard/ts/state.ts                   |  4 ++--
 3 files changed, 13 insertions(+), 11 deletions(-)

diff --git a/optuna_dashboard/ts/action.ts b/optuna_dashboard/ts/action.ts
index 1a59d8fe..04c3532b 100644
--- a/optuna_dashboard/ts/action.ts
+++ b/optuna_dashboard/ts/action.ts
@@ -51,9 +51,9 @@ export const actionCreator = () => {
   const setStudySummariesLoading = useSetRecoilState<boolean>(
     studySummariesLoadingState
   )
-  const setStudyDetailLoading = useSetRecoilState<boolean>(
-    studyDetailLoadingState
-  )
+  const [studyDetailLoading, setStudyDetailLoading] = useRecoilState<
+    Record<number, boolean>
+  >(studyDetailLoadingState)
 
   const setStudyDetailState = (studyId: number, study: StudyDetail) => {
     setStudyDetails((prevVal) => {
@@ -235,7 +235,7 @@ export const actionCreator = () => {
   }
 
   const updateStudyDetail = (studyId: number) => {
-    setStudyDetailLoading(true)
+    setStudyDetailLoading({ ...studyDetailLoading, [studyId]: true })
     let nLocalFixedTrials = 0
     if (studyId in studyDetails) {
       const currentTrials = studyDetails[studyId].trials
@@ -247,7 +247,7 @@ export const actionCreator = () => {
     }
     getStudyDetailAPI(studyId, nLocalFixedTrials)
       .then((study) => {
-        setStudyDetailLoading(false)
+        setStudyDetailLoading({ ...studyDetailLoading, [studyId]: false })
         const currentFixedTrials =
           studyId in studyDetails
             ? studyDetails[studyId].trials.slice(0, nLocalFixedTrials)
@@ -256,7 +256,7 @@ export const actionCreator = () => {
         setStudyDetailState(studyId, study)
       })
       .catch((err) => {
-        setStudyDetailLoading(false)
+        setStudyDetailLoading({ ...studyDetailLoading, [studyId]: false })
         const reason = err.response?.data.reason
         if (reason !== undefined) {
           enqueueSnackbar(`Failed to fetch study (reason=${reason})`, {
diff --git a/optuna_dashboard/ts/components/StudyDetail.tsx b/optuna_dashboard/ts/components/StudyDetail.tsx
index ff9ac356..eaa17bb0 100644
--- a/optuna_dashboard/ts/components/StudyDetail.tsx
+++ b/optuna_dashboard/ts/components/StudyDetail.tsx
@@ -54,7 +54,9 @@ export const StudyDetail: FC<{
   const action = actionCreator()
   const studyId = useURLVars()
   const studyDetail = useStudyDetailValue(studyId)
-  const isLoading = useRecoilValue<boolean>(studyDetailLoadingState)
+  const isLoading = useRecoilValue<Record<number, boolean>>(
+    studyDetailLoadingState
+  )
   const reloadInterval = useRecoilValue<number>(reloadIntervalState)
   const studyName = useStudyName(studyId)
   const isPreferential = useStudyIsPreferential(studyId)
@@ -63,7 +65,7 @@ export const StudyDetail: FC<{
     studyName !== null ? `${studyName} (id=${studyId})` : `Study #${studyId}`
 
   useEffect(() => {
-    if (!isLoading) {
+    if (!isLoading[studyId]) {
       action.updateStudyDetail(studyId)
     }
     action.updateAPIMeta()
@@ -90,7 +92,7 @@ export const StudyDetail: FC<{
     }
 
     const intervalId = setInterval(function () {
-      if (!isLoading) {
+      if (!isLoading[studyId]) {
         action.updateStudyDetail(studyId)
       }
     }, interval)
diff --git a/optuna_dashboard/ts/state.ts b/optuna_dashboard/ts/state.ts
index 19659aa4..0811c51a 100644
--- a/optuna_dashboard/ts/state.ts
+++ b/optuna_dashboard/ts/state.ts
@@ -65,9 +65,9 @@ export const studySummariesLoadingState = atom<boolean>({
   default: false,
 })
 
-export const studyDetailLoadingState = atom<boolean>({
+export const studyDetailLoadingState = atom<Record<number, boolean>>({
   key: "studyDetailLoading",
-  default: false,
+  default: {},
 })
 
 export const useStudyDetailValue = (studyId: number): StudyDetail | null => {