Merge pull request #856 from porink0424/feat/localstorage

Save setting values into Local Storage

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,21 +11,17 @@ 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
 }
 
 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) {