Merge pull request #856 from porink0424/feat/localstorage

Save setting values into Local Storage

optuna_dashboard/package-lock.json

@@ -35,6 +35,7 @@
         "remark-gfm": "^4.0.0",
         "remark-math": "^6.0.0",
         "three": "^0.160.1",
+        "usehooks-ts": "^3.0.2",
         "wavesurfer.js": "^7.7.0"
       },
       "devDependencies": {
@@ -10075,8 +10076,7 @@
     "node_modules/lodash.debounce": {
       "version": "4.0.8",
       "resolved": "https://registry.npmjs.org/lodash.debounce/-/lodash.debounce-4.0.8.tgz",
-      "integrity": "sha512-FT1yDzDYEoYWhnSGnpE/4Kj1fLZkDFyqRb7fNt6FdYOSxlUWAtp42Eh6Wb0rGIv/m9Bgo7x4GhQbm5Ys4SG5ow==",
-      "dev": true
+      "integrity": "sha512-FT1yDzDYEoYWhnSGnpE/4Kj1fLZkDFyqRb7fNt6FdYOSxlUWAtp42Eh6Wb0rGIv/m9Bgo7x4GhQbm5Ys4SG5ow=="
     },
     "node_modules/lodash.memoize": {
       "version": "4.1.2",
@@ -13820,6 +13820,20 @@
         "react": "^16.8.0 || ^17.0.0 || ^18.0.0"
       }
     },
+    "node_modules/usehooks-ts": {
+      "version": "3.0.2",
+      "resolved": "https://registry.npmjs.org/usehooks-ts/-/usehooks-ts-3.0.2.tgz",
+      "integrity": "sha512-qJScCj8YOxa8RV3Iz2T+2IsydLG0EID5FouTGE7aNFEpFlCXmRrnJiPCESDArKr1FLTaUQSfDQ43UDn7yMLExw==",
+      "dependencies": {
+        "lodash.debounce": "^4.0.8"
+      },
+      "engines": {
+        "node": ">=16.15.0"
+      },
+      "peerDependencies": {
+        "react": "^16.8.0  || ^17 || ^18"
+      }
+    },
     "node_modules/util-deprecate": {
       "version": "1.0.2",
       "resolved": "https://registry.npmjs.org/util-deprecate/-/util-deprecate-1.0.2.tgz",

optuna_dashboard/package.json

@@ -21,8 +21,8 @@
     "@mui/material": "^5.15.6",
     "@react-three/drei": "^9.96.4",
     "@react-three/fiber": "^8.15.15",
-    "@tanstack/react-virtual": "^3.1.2",
     "@tanstack/react-query": "^5.18.1",
+    "@tanstack/react-virtual": "^3.1.2",
     "@types/three": "^0.160.0",
     "axios": "^1.6.7",
     "elkjs": "^0.9.1",
@@ -40,6 +40,7 @@
     "remark-gfm": "^4.0.0",
     "remark-math": "^6.0.0",
     "three": "^0.160.1",
+    "usehooks-ts": "^3.0.2",
     "wavesurfer.js": "^7.7.0"
   },
   "devDependencies": {

optuna_dashboard/ts/components/Settings.tsx

@@ -11,8 +11,7 @@ import {
   Box,
 } from "@mui/material"
 import ClearIcon from "@mui/icons-material/Clear"
-import { useRecoilState } from "recoil"
-import { plotlyColorThemeState, plotBackendRenderingState } from "../state"
+import { usePlotBackendRendering, usePlotlyColorThemeState } from "../state"
 
 interface SettingsProps {
   handleClose: () => void
@@ -20,12 +19,9 @@ interface SettingsProps {
 
 export const Settings = ({ handleClose }: SettingsProps) => {
   const theme = useTheme()
-  const [plotlyColorTheme, setPlotlyColorTheme] = useRecoilState(
-    plotlyColorThemeState
-  )
-  const [plotBackendRendering, setPlotBackendRendering] = useRecoilState(
-    plotBackendRenderingState
-  )
+  const [plotlyColorTheme, setPlotlyColorTheme] = usePlotlyColorThemeState()
+  const [plotBackendRendering, setPlotBackendRendering] =
+    usePlotBackendRendering()
 
   const handleDarkModeColorChange = (event: SelectChangeEvent) => {
     const dark = event.target.value as PlotlyColorThemeDark

optuna_dashboard/ts/state.ts

@@ -3,6 +3,7 @@ import {
   LightColorTemplates,
   DarkColorTemplates,
 } from "./components/PlotlyColorTemplates"
+import { useLocalStorage } from "usehooks-ts"
 
 export const studySummariesState = atom<StudySummary[]>({
   key: "studySummaries",
@@ -42,19 +43,6 @@ export const artifactIsAvailable = atom<boolean>({
   default: false,
 })
 
-export const plotlyColorThemeState = atom<PlotlyColorTheme>({
-  key: "plotlyColorThemeState",
-  default: {
-    dark: "default",
-    light: "default",
-  },
-})
-
-export const plotBackendRenderingState = atom<boolean>({
-  key: "plotBackendRendering",
-  default: false,
-})
-
 export const plotlypyIsAvailableState = atom<boolean>({
   key: "plotlypyIsAvailable",
   default: true,
@@ -70,6 +58,17 @@ export const studyDetailLoadingState = atom<Record<number, boolean>>({
   default: {},
 })
 
+export const usePlotBackendRendering = () => {
+  return useLocalStorage<boolean>("plotBackendRendering", false)
+}
+
+export const usePlotlyColorThemeState = () => {
+  return useLocalStorage<PlotlyColorTheme>("plotlyColorTheme", {
+    dark: "default",
+    light: "default",
+  })
+}
+
 export const useStudyDetailValue = (studyId: number): StudyDetail | null => {
   const studyDetails = useRecoilValue<StudyDetails>(studyDetailsState)
   return studyDetails[studyId] || null
@@ -115,7 +114,7 @@ export const useArtifacts = (studyId: number, trialId: number): Artifact[] => {
 }
 
 export const usePlotlyColorTheme = (mode: string): Partial<Plotly.Template> => {
-  const theme = useRecoilValue(plotlyColorThemeState)
+  const [theme] = usePlotlyColorThemeState()
   if (mode === "dark") {
     return DarkColorTemplates[theme.dark]
   } else {
@@ -124,7 +123,7 @@ export const usePlotlyColorTheme = (mode: string): Partial<Plotly.Template> => {
 }
 
 export const useBackendRender = (): boolean => {
-  const plotBackendRendering = useRecoilValue(plotBackendRenderingState)
+  const [plotBackendRendering] = usePlotBackendRendering()
   const plotlypyIsAvailable = useRecoilValue(plotlypyIsAvailableState)
 
   if (plotBackendRendering) {