From e24137bff5e66355cb00357465a8ba5da307fa43 Mon Sep 17 00:00:00 2001
From: keisuke-umezawa <keisuke.umezawa@gmail.com>
Date: Sat, 2 Mar 2024 22:34:14 +0900
Subject: [PATCH] Use boolean state for api call

---
 optuna_dashboard/ts/action.ts                  |  5 +++++
 optuna_dashboard/ts/components/StudyDetail.tsx | 10 ++++++++--
 optuna_dashboard/ts/state.ts                   |  5 +++++
 3 files changed, 18 insertions(+), 2 deletions(-)

diff --git a/optuna_dashboard/ts/action.ts b/optuna_dashboard/ts/action.ts
index a0037f46..c4ad3cd9 100644
--- a/optuna_dashboard/ts/action.ts
+++ b/optuna_dashboard/ts/action.ts
@@ -27,6 +27,7 @@ import {
   isFileUploading,
   artifactIsAvailable,
   plotlypyIsAvailableState,
+  reloadingState,
   reloadIntervalState,
   trialsUpdatingState,
   studySummariesLoadingState,
@@ -40,6 +41,7 @@ export const actionCreator = () => {
     useRecoilState<StudySummary[]>(studySummariesState)
   const [studyDetails, setStudyDetails] =
     useRecoilState<StudyDetails>(studyDetailsState)
+  const setReloading = useSetRecoilState<boolean>(reloadingState)
   const setReloadInterval = useSetRecoilState<number>(reloadIntervalState)
   const setUploading = useSetRecoilState<boolean>(isFileUploading)
   const setTrialsUpdating = useSetRecoilState(trialsUpdatingState)
@@ -231,6 +233,7 @@ export const actionCreator = () => {
   }
 
   const updateStudyDetail = (studyId: number) => {
+    setReloading(true)
     let nLocalFixedTrials = 0
     if (studyId in studyDetails) {
       const currentTrials = studyDetails[studyId].trials
@@ -242,6 +245,7 @@ export const actionCreator = () => {
     }
     getStudyDetailAPI(studyId, nLocalFixedTrials)
       .then((study) => {
+        setReloading(false)
         const currentFixedTrials =
           studyId in studyDetails
             ? studyDetails[studyId].trials.slice(0, nLocalFixedTrials)
@@ -250,6 +254,7 @@ export const actionCreator = () => {
         setStudyDetailState(studyId, study)
       })
       .catch((err) => {
+        setReloading(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 065b90f5..963f7826 100644
--- a/optuna_dashboard/ts/components/StudyDetail.tsx
+++ b/optuna_dashboard/ts/components/StudyDetail.tsx
@@ -16,6 +16,7 @@ import HomeIcon from "@mui/icons-material/Home"
 import { StudyNote } from "./Note"
 import { actionCreator } from "../action"
 import {
+  reloadingState,
   reloadIntervalState,
   useStudyDetailValue,
   useStudyIsPreferential,
@@ -53,6 +54,7 @@ export const StudyDetail: FC<{
   const action = actionCreator()
   const studyId = useURLVars()
   const studyDetail = useStudyDetailValue(studyId)
+  const isLoading = useRecoilValue<boolean>(reloadingState)
   const reloadInterval = useRecoilValue<number>(reloadIntervalState)
   const studyName = useStudyName(studyId)
   const isPreferential = useStudyIsPreferential(studyId)
@@ -61,7 +63,9 @@ export const StudyDetail: FC<{
     studyName !== null ? `${studyName} (id=${studyId})` : `Study #${studyId}`
 
   useEffect(() => {
-    action.updateStudyDetail(studyId)
+    if (!isLoading) {
+      action.updateStudyDetail(studyId)
+    }
     action.updateAPIMeta()
   }, [])
 
@@ -86,7 +90,9 @@ export const StudyDetail: FC<{
     }
 
     const intervalId = setInterval(function () {
-      action.updateStudyDetail(studyId)
+      if (!isLoading) {
+        action.updateStudyDetail(studyId)
+      }
     }, interval)
     return () => clearInterval(intervalId)
   }, [reloadInterval, studyDetail, page])
diff --git a/optuna_dashboard/ts/state.ts b/optuna_dashboard/ts/state.ts
index 5828985f..bac5d641 100644
--- a/optuna_dashboard/ts/state.ts
+++ b/optuna_dashboard/ts/state.ts
@@ -21,6 +21,11 @@ export const trialsUpdatingState = atom<{
   default: {},
 })
 
+export const reloadingState = atom<boolean>({
+  key: "reloadng",
+  default: false,
+})
+
 // TODO(c-bata): Consider representing the state as boolean.
 export const reloadIntervalState = atom<number>({
   key: "reloadInterval",