From a290c5cf7404dc20af7694e5dac92996e58f3025 Mon Sep 17 00:00:00 2001
From: porink0424 <daichi2120@gmail.com>
Date: Wed, 28 Aug 2024 18:06:45 +0900
Subject: [PATCH] Disable use plotlypy setting when plotlypy is not available

---
 optuna_dashboard/ts/components/Settings.tsx | 9 ++++++++-
 1 file changed, 8 insertions(+), 1 deletion(-)

diff --git a/optuna_dashboard/ts/components/Settings.tsx b/optuna_dashboard/ts/components/Settings.tsx
index 4df44812f..3a6a14d3d 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}
           />
         </Stack>
       </Stack>