From 218f54600c1ac3e30e1a890d51afd1ac654d1416 Mon Sep 17 00:00:00 2001 From: porink0424 Date: Fri, 29 Mar 2024 16:31:13 +0900 Subject: [PATCH 1/4] Add usehooks-ts dependencies --- optuna_dashboard/package-lock.json | 18 ++++++++++++++++-- optuna_dashboard/package.json | 3 ++- 2 files changed, 18 insertions(+), 3 deletions(-) diff --git a/optuna_dashboard/package-lock.json b/optuna_dashboard/package-lock.json index d9577445..b0759965 100644 --- a/optuna_dashboard/package-lock.json +++ b/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", diff --git a/optuna_dashboard/package.json b/optuna_dashboard/package.json index e9afdac9..d2cf8a1b 100644 --- a/optuna_dashboard/package.json +++ b/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": { From e367ce6c1f1b09fe577926d2767603b5e087be5f Mon Sep 17 00:00:00 2001 From: porink0424 Date: Fri, 29 Mar 2024 16:32:59 +0900 Subject: [PATCH 2/4] Move plotlyColorThemeState from atom into localStorage --- optuna_dashboard/ts/components/Settings.tsx | 6 ++---- optuna_dashboard/ts/state.ts | 18 +++++++++--------- 2 files changed, 11 insertions(+), 13 deletions(-) diff --git a/optuna_dashboard/ts/components/Settings.tsx b/optuna_dashboard/ts/components/Settings.tsx index 4e7a38dd..e1e67cc9 100644 --- a/optuna_dashboard/ts/components/Settings.tsx +++ b/optuna_dashboard/ts/components/Settings.tsx @@ -12,7 +12,7 @@ import { } from "@mui/material" import ClearIcon from "@mui/icons-material/Clear" import { useRecoilState } from "recoil" -import { plotlyColorThemeState, plotBackendRenderingState } from "../state" +import { plotBackendRenderingState, usePlotlyColorThemeState } from "../state" interface SettingsProps { handleClose: () => void @@ -20,9 +20,7 @@ interface SettingsProps { export const Settings = ({ handleClose }: SettingsProps) => { const theme = useTheme() - const [plotlyColorTheme, setPlotlyColorTheme] = useRecoilState( - plotlyColorThemeState - ) + const [plotlyColorTheme, setPlotlyColorTheme] = usePlotlyColorThemeState() const [plotBackendRendering, setPlotBackendRendering] = useRecoilState( plotBackendRenderingState ) diff --git a/optuna_dashboard/ts/state.ts b/optuna_dashboard/ts/state.ts index 0811c51a..88b794f5 100644 --- a/optuna_dashboard/ts/state.ts +++ b/optuna_dashboard/ts/state.ts @@ -3,6 +3,7 @@ import { LightColorTemplates, DarkColorTemplates, } from "./components/PlotlyColorTemplates" +import { useLocalStorage } from "usehooks-ts" export const studySummariesState = atom({ key: "studySummaries", @@ -42,14 +43,6 @@ export const artifactIsAvailable = atom({ default: false, }) -export const plotlyColorThemeState = atom({ - key: "plotlyColorThemeState", - default: { - dark: "default", - light: "default", - }, -}) - export const plotBackendRenderingState = atom({ key: "plotBackendRendering", default: false, @@ -70,6 +63,13 @@ export const studyDetailLoadingState = atom>({ default: {}, }) +export const usePlotlyColorThemeState = () => { + return useLocalStorage("plotlyColorTheme", { + dark: "default", + light: "default", + }) +} + export const useStudyDetailValue = (studyId: number): StudyDetail | null => { const studyDetails = useRecoilValue(studyDetailsState) return studyDetails[studyId] || null @@ -115,7 +115,7 @@ export const useArtifacts = (studyId: number, trialId: number): Artifact[] => { } export const usePlotlyColorTheme = (mode: string): Partial => { - const theme = useRecoilValue(plotlyColorThemeState) + const [theme, _] = usePlotlyColorThemeState() if (mode === "dark") { return DarkColorTemplates[theme.dark] } else { From 4255aa4d652407f75980815e0d87271ce3b085cd Mon Sep 17 00:00:00 2001 From: porink0424 Date: Fri, 29 Mar 2024 16:54:05 +0900 Subject: [PATCH 3/4] Move plotBackendRendering from atom into localStorage --- optuna_dashboard/ts/components/Settings.tsx | 8 +++----- optuna_dashboard/ts/state.ts | 11 +++++------ 2 files changed, 8 insertions(+), 11 deletions(-) diff --git a/optuna_dashboard/ts/components/Settings.tsx b/optuna_dashboard/ts/components/Settings.tsx index e1e67cc9..87061283 100644 --- a/optuna_dashboard/ts/components/Settings.tsx +++ b/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 diff --git a/optuna_dashboard/ts/state.ts b/optuna_dashboard/ts/state.ts index 88b794f5..dbe5c6a6 100644 --- a/optuna_dashboard/ts/state.ts +++ b/optuna_dashboard/ts/state.ts @@ -43,11 +43,6 @@ export const artifactIsAvailable = atom({ default: false, }) -export const plotBackendRenderingState = atom({ - key: "plotBackendRendering", - default: false, -}) - export const plotlypyIsAvailableState = atom({ key: "plotlypyIsAvailable", default: true, @@ -63,6 +58,10 @@ export const studyDetailLoadingState = atom>({ default: {}, }) +export const usePlotBackendRendering = () => { + return useLocalStorage("plotBackendRendering", false) +} + export const usePlotlyColorThemeState = () => { return useLocalStorage("plotlyColorTheme", { dark: "default", @@ -124,7 +123,7 @@ export const usePlotlyColorTheme = (mode: string): Partial => { } export const useBackendRender = (): boolean => { - const plotBackendRendering = useRecoilValue(plotBackendRenderingState) + const [plotBackendRendering, _] = usePlotBackendRendering() const plotlypyIsAvailable = useRecoilValue(plotlypyIsAvailableState) if (plotBackendRendering) { From 26fe670c9d3f78402a8f6ceb338867168e241bb9 Mon Sep 17 00:00:00 2001 From: porink0424 Date: Fri, 29 Mar 2024 17:00:35 +0900 Subject: [PATCH 4/4] Delete unnecessary variables in state.ts --- optuna_dashboard/ts/state.ts | 4 ++-- 1 file changed, 2 insertions(+), 2 deletions(-) diff --git a/optuna_dashboard/ts/state.ts b/optuna_dashboard/ts/state.ts index dbe5c6a6..07071af1 100644 --- a/optuna_dashboard/ts/state.ts +++ b/optuna_dashboard/ts/state.ts @@ -114,7 +114,7 @@ export const useArtifacts = (studyId: number, trialId: number): Artifact[] => { } export const usePlotlyColorTheme = (mode: string): Partial => { - const [theme, _] = usePlotlyColorThemeState() + const [theme] = usePlotlyColorThemeState() if (mode === "dark") { return DarkColorTemplates[theme.dark] } else { @@ -123,7 +123,7 @@ export const usePlotlyColorTheme = (mode: string): Partial => { } export const useBackendRender = (): boolean => { - const [plotBackendRendering, _] = usePlotBackendRendering() + const [plotBackendRendering] = usePlotBackendRendering() const plotlypyIsAvailable = useRecoilValue(plotlypyIsAvailableState) if (plotBackendRendering) {