diff --git a/optuna_dashboard/ts/components/Settings.tsx b/optuna_dashboard/ts/components/Settings.tsx index 4df44812..3a6a14d3 100644 --- a/optuna_dashboard/ts/components/Settings.tsx +++ b/optuna_dashboard/ts/components/Settings.tsx @@ -11,8 +11,13 @@ import { useTheme, } from "@mui/material" import React from "react" +import { useRecoilValue } from "recoil" import { PlotlyColorThemeDark, PlotlyColorThemeLight } from "ts/types/optuna" -import { usePlotBackendRendering, usePlotlyColorThemeState } from "../state" +import { + plotlypyIsAvailableState, + usePlotBackendRendering, + usePlotlyColorThemeState, +} from "../state" interface SettingsProps { handleClose: () => void @@ -23,6 +28,7 @@ export const Settings = ({ handleClose }: SettingsProps) => { const [plotlyColorTheme, setPlotlyColorTheme] = usePlotlyColorThemeState() const [plotBackendRendering, setPlotBackendRendering] = usePlotBackendRendering() + const plotlypyIsAvailable = useRecoilValue(plotlypyIsAvailableState) const handleDarkModeColorChange = (event: SelectChangeEvent) => { const dark = event.target.value as PlotlyColorThemeDark @@ -123,6 +129,7 @@ export const Settings = ({ handleClose }: SettingsProps) => { checked={plotBackendRendering} onChange={togglePlotBackendRendering} value="enable" + disabled={!plotlypyIsAvailable} /> diff --git a/optuna_dashboard/ts/state.ts b/optuna_dashboard/ts/state.ts index 644bd984..02e86bc1 100644 --- a/optuna_dashboard/ts/state.ts +++ b/optuna_dashboard/ts/state.ts @@ -53,7 +53,7 @@ export const artifactIsAvailable = atom({ export const plotlypyIsAvailableState = atom({ key: "plotlypyIsAvailable", - default: true, + default: false, }) export const studySummariesLoadingState = atom({ @@ -138,9 +138,6 @@ export const useBackendRender = (): boolean => { if (plotlypyIsAvailable) { return true } - console.warn( - "Use frontend rendering because plotlypy is specified but not available." - ) } return false }