Use boolean state for api call

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

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])

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",