Move plotBackendRendering from atom into localStorage

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 { plotBackendRenderingState, usePlotlyColorThemeState } from "../state"
+import { usePlotBackendRendering, usePlotlyColorThemeState } from "../state"
 
 interface SettingsProps {
   handleClose: () => void
@@ -21,9 +20,8 @@ interface SettingsProps {
 export const Settings = ({ handleClose }: SettingsProps) => {
   const theme = useTheme()
   const [plotlyColorTheme, setPlotlyColorTheme] = usePlotlyColorThemeState()
-  const [plotBackendRendering, setPlotBackendRendering] = useRecoilState(
-    plotBackendRenderingState
-  )
+  const [plotBackendRendering, setPlotBackendRendering] =
+    usePlotBackendRendering()
 
   const handleDarkModeColorChange = (event: SelectChangeEvent) => {
     const dark = event.target.value as PlotlyColorThemeDark

optuna_dashboard/ts/state.ts

@@ -43,11 +43,6 @@ export const artifactIsAvailable = atom<boolean>({
   default: false,
 })
 
-export const plotBackendRenderingState = atom<boolean>({
-  key: "plotBackendRendering",
-  default: false,
-})
-
 export const plotlypyIsAvailableState = atom<boolean>({
   key: "plotlypyIsAvailable",
   default: true,
@@ -63,6 +58,10 @@ 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",
@@ -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) {