Merge pull request #817 from keisuke-umezawa/feature/use-state-api-call

Use boolean state to stop API requests being issued multiple times

optuna_dashboard/ts/action.ts

@@ -27,6 +27,7 @@ import {
   isFileUploading,
   artifactIsAvailable,
   plotlypyIsAvailableState,
+  studyDetailLoadingState,
   reloadIntervalState,
   trialsUpdatingState,
   studySummariesLoadingState,
@@ -50,6 +51,9 @@ export const actionCreator = () => {
   const setStudySummariesLoading = useSetRecoilState<boolean>(
     studySummariesLoadingState
   )
+  const [studyDetailLoading, setStudyDetailLoading] = useRecoilState<
+    Record<number, boolean>
+  >(studyDetailLoadingState)
 
   const setStudyDetailState = (studyId: number, study: StudyDetail) => {
     setStudyDetails((prevVal) => {
@@ -231,6 +235,10 @@ export const actionCreator = () => {
   }
 
   const updateStudyDetail = (studyId: number) => {
+    if (studyDetailLoading[studyId]) {
+      return
+    }
+    setStudyDetailLoading({ ...studyDetailLoading, [studyId]: true })
     let nLocalFixedTrials = 0
     if (studyId in studyDetails) {
       const currentTrials = studyDetails[studyId].trials
@@ -242,6 +250,7 @@ export const actionCreator = () => {
     }
     getStudyDetailAPI(studyId, nLocalFixedTrials)
       .then((study) => {
+        setStudyDetailLoading({ ...studyDetailLoading, [studyId]: false })
         const currentFixedTrials =
           studyId in studyDetails
             ? studyDetails[studyId].trials.slice(0, nLocalFixedTrials)
@@ -250,6 +259,7 @@ export const actionCreator = () => {
         setStudyDetailState(studyId, study)
       })
       .catch((err) => {
+        setStudyDetailLoading({ ...studyDetailLoading, [studyId]: false })
         const reason = err.response?.data.reason
         if (reason !== undefined) {
           enqueueSnackbar(`Failed to fetch study (reason=${reason})`, {

optuna_dashboard/ts/state.ts

@@ -65,6 +65,11 @@ export const studySummariesLoadingState = atom<boolean>({
   default: false,
 })
 
+export const studyDetailLoadingState = atom<Record<number, boolean>>({
+  key: "studyDetailLoading",
+  default: {},
+})
+
 export const useStudyDetailValue = (studyId: number): StudyDetail | null => {
   const studyDetails = useRecoilValue<StudyDetails>(studyDetailsState)
   return studyDetails[studyId] || null