diff --git a/optuna_dashboard/ts/action.ts b/optuna_dashboard/ts/action.ts index a0037f46..ff66b8e9 100644 --- a/optuna_dashboard/ts/action.ts +++ b/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( studySummariesLoadingState ) + const [studyDetailLoading, setStudyDetailLoading] = useRecoilState< + Record + >(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})`, { diff --git a/optuna_dashboard/ts/state.ts b/optuna_dashboard/ts/state.ts index 5828985f..0811c51a 100644 --- a/optuna_dashboard/ts/state.ts +++ b/optuna_dashboard/ts/state.ts @@ -65,6 +65,11 @@ export const studySummariesLoadingState = atom({ default: false, }) +export const studyDetailLoadingState = atom>({ + key: "studyDetailLoading", + default: {}, +}) + export const useStudyDetailValue = (studyId: number): StudyDetail | null => { const studyDetails = useRecoilValue(studyDetailsState) return studyDetails[studyId] || null