diff --git a/optuna_dashboard/ts/action.ts b/optuna_dashboard/ts/action.ts index f7d182071..6e112f05b 100644 --- a/optuna_dashboard/ts/action.ts +++ b/optuna_dashboard/ts/action.ts @@ -21,9 +21,15 @@ import { paramImportanceState, isFileUploading, artifactIsAvailable, + reloadIntervalState, } from "./state" const localStorageGraphVisibility = "graphVisibility" +const localStorageReloadInterval = "reloadInterval" + +type LocalStorageReloadInterval = { + reloadInterval?: number +} export const actionCreator = () => { const { enqueueSnackbar } = useSnackbar() @@ -33,6 +39,7 @@ export const actionCreator = () => { useRecoilState(studyDetailsState) const [graphVisibility, setGraphVisibility] = useRecoilState(graphVisibilityState) + const setReloadInterval = useSetRecoilState(reloadIntervalState) const [paramImportance, setParamImportance] = useRecoilState(paramImportanceState) const setUploading = useSetRecoilState(isFileUploading) @@ -264,6 +271,25 @@ export const actionCreator = () => { localStorage.setItem(localStorageGraphVisibility, JSON.stringify(value)) } + const loadReloadInterval = () => { + const reloadIntervalJSON = localStorage.getItem(localStorageReloadInterval) + if (reloadIntervalJSON === null) { + return + } + const gp = JSON.parse(reloadIntervalJSON) as LocalStorageReloadInterval + if (gp.reloadInterval !== undefined) { + setReloadInterval(gp.reloadInterval) + } + } + + const saveReloadInterval = (interval: number) => { + setReloadInterval(interval) + const value: LocalStorageReloadInterval = { + reloadInterval: interval, + } + localStorage.setItem(localStorageReloadInterval, JSON.stringify(value)) + } + const saveStudyNote = (studyId: number, note: Note): Promise => { return saveStudyNoteAPI(studyId, note) .then(() => { @@ -437,6 +463,8 @@ export const actionCreator = () => { renameStudy, getGraphVisibility, saveGraphVisibility, + loadReloadInterval, + saveReloadInterval, saveStudyNote, saveTrialNote, uploadArtifact, diff --git a/optuna_dashboard/ts/components/AppDrawer.tsx b/optuna_dashboard/ts/components/AppDrawer.tsx index 99306435a..15d63c423 100644 --- a/optuna_dashboard/ts/components/AppDrawer.tsx +++ b/optuna_dashboard/ts/components/AppDrawer.tsx @@ -1,5 +1,5 @@ import React, { FC } from "react" -import { useRecoilState } from "recoil" +import { useRecoilState, useRecoilValue } from "recoil" import { styled, useTheme, Theme, CSSObject } from "@mui/material/styles" import Box from "@mui/material/Box" import MuiDrawer from "@mui/material/Drawer" @@ -30,6 +30,7 @@ import GitHubIcon from "@mui/icons-material/GitHub" import OpenInNewIcon from "@mui/icons-material/OpenInNew" import QueryStatsIcon from "@mui/icons-material/QueryStats" import { Switch } from "@mui/material" +import { actionCreator } from "../action" const drawerWidth = 240 @@ -117,9 +118,9 @@ export const AppDrawer: FC<{ children?: React.ReactNode }> = ({ studyId, toggleColorMode, page, toolbar, children }) => { const theme = useTheme() + const action = actionCreator() const [open, setOpen] = useRecoilState(drawerOpenState) - const [reloadInterval, updateReloadInterval] = - useRecoilState(reloadIntervalState) + const reloadInterval = useRecoilValue(reloadIntervalState) const styleListItem = { display: "block", @@ -256,7 +257,7 @@ export const AppDrawer: FC<{ { - updateReloadInterval(reloadInterval === -1 ? 10 : -1) + action.saveReloadInterval(reloadInterval === -1 ? 10 : -1) }} > diff --git a/optuna_dashboard/ts/components/ReloadIntervalSelect.tsx b/optuna_dashboard/ts/components/ReloadIntervalSelect.tsx index 0693f214d..1c323f6f9 100644 --- a/optuna_dashboard/ts/components/ReloadIntervalSelect.tsx +++ b/optuna_dashboard/ts/components/ReloadIntervalSelect.tsx @@ -1,13 +1,14 @@ import React, { FC } from "react" import { styled } from "@mui/system" -import { useRecoilState } from "recoil" +import { useRecoilValue } from "recoil" import { reloadIntervalState } from "../state" import { MenuItem, TextField, alpha } from "@mui/material" import { Cached } from "@mui/icons-material" +import { actionCreator } from "../action" export const ReloadIntervalSelect: FC = () => { - const [reloadInterval, updateReloadInterval] = - useRecoilState(reloadIntervalState) + const action = actionCreator() + const reloadInterval = useRecoilValue(reloadIntervalState) const Wrapper = styled("div")(({ theme }) => ({ position: "relative", @@ -71,7 +72,7 @@ export const ReloadIntervalSelect: FC = () => { select value={reloadInterval} onChange={(e) => { - updateReloadInterval(e.target.value as unknown as number) + action.saveReloadInterval(e.target.value as unknown as number) }} > stop diff --git a/optuna_dashboard/ts/components/StudyDetail.tsx b/optuna_dashboard/ts/components/StudyDetail.tsx index fbce0b8e1..530125fbd 100644 --- a/optuna_dashboard/ts/components/StudyDetail.tsx +++ b/optuna_dashboard/ts/components/StudyDetail.tsx @@ -66,6 +66,7 @@ export const StudyDetail: FC<{ usePreferenceDialog(studyDetail) useEffect(() => { + action.loadReloadInterval() action.updateStudyDetail(studyIdNumber) }, []) diff --git a/optuna_dashboard/ts/components/StudyDetailBeta.tsx b/optuna_dashboard/ts/components/StudyDetailBeta.tsx index c239acbd1..a2809f51a 100644 --- a/optuna_dashboard/ts/components/StudyDetailBeta.tsx +++ b/optuna_dashboard/ts/components/StudyDetailBeta.tsx @@ -54,6 +54,7 @@ export const StudyDetailBeta: FC<{ studyName !== null ? `${studyName} (id=${studyId})` : `Study #${studyId}` useEffect(() => { + action.loadReloadInterval() action.updateStudyDetail(studyId) action.updateAPIMeta() }, [])