Merge pull request optuna#948 from porink0424/fix/setting-ui

Disable use plotlypy setting when plotlypy is not available

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}
           />
         </Stack>
       </Stack>

optuna_dashboard/ts/state.ts

@@ -53,7 +53,7 @@ export const artifactIsAvailable = atom<boolean>({
 
 export const plotlypyIsAvailableState = atom<boolean>({
   key: "plotlypyIsAvailable",
-  default: true,
+  default: false,
 })
 
 export const studySummariesLoadingState = atom<boolean>({
@@ -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
 }