Merge pull request #372 from c-bata/save-reload-interval-on-global-st…

…orage

Save reload interval on localStorage

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<StudyDetails>(studyDetailsState)
   const [graphVisibility, setGraphVisibility] =
     useRecoilState<GraphVisibility>(graphVisibilityState)
+  const setReloadInterval = useSetRecoilState<number>(reloadIntervalState)
   const [paramImportance, setParamImportance] =
     useRecoilState<StudyParamImportance>(paramImportanceState)
   const setUploading = useSetRecoilState<boolean>(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<void> => {
     return saveStudyNoteAPI(studyId, note)
       .then(() => {
@@ -437,6 +463,8 @@ export const actionCreator = () => {
     renameStudy,
     getGraphVisibility,
     saveGraphVisibility,
+    loadReloadInterval,
+    saveReloadInterval,
     saveStudyNote,
     saveTrialNote,
     uploadArtifact,

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<boolean>(drawerOpenState)
-  const [reloadInterval, updateReloadInterval] =
-    useRecoilState<number>(reloadIntervalState)
+  const reloadInterval = useRecoilValue<number>(reloadIntervalState)
 
   const styleListItem = {
     display: "block",
@@ -256,7 +257,7 @@ export const AppDrawer: FC<{
               <ListItemButton
                 sx={styleListItemButton}
                 onClick={() => {
-                  updateReloadInterval(reloadInterval === -1 ? 10 : -1)
+                  action.saveReloadInterval(reloadInterval === -1 ? 10 : -1)
                 }}
               >
                 <ListItemIcon sx={styleListItemIcon}>

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<number>(reloadIntervalState)
+  const action = actionCreator()
+  const reloadInterval = useRecoilValue<number>(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)
         }}
       >
         <MenuItem value={-1}>stop</MenuItem>

optuna_dashboard/ts/components/StudyDetail.tsx

@@ -66,6 +66,7 @@ export const StudyDetail: FC<{
     usePreferenceDialog(studyDetail)
 
   useEffect(() => {
+    action.loadReloadInterval()
     action.updateStudyDetail(studyIdNumber)
   }, [])
 

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()
   }, [])