Create state for each study

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})`, {

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)

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 => {