Add "use plotlypy" button

optuna_dashboard/ts/components/Settings.tsx

@@ -3,13 +3,14 @@ import React, { FC, useState } from "react"
 import {
   Typography,
   Select,
+  Switch,
   MenuItem,
   Grid,
   SelectChangeEvent,
 } from "@mui/material"
 
-import { useRecoilValue, useSetRecoilState } from "recoil"
-import { plotlyColorTheme } from "../state"
+import { useRecoilValue, useSetRecoilState, useRecoilState } from "recoil"
+import { plotlyColorTheme, plotBackendRenderingState } from "../state"
 
 export const Settings: FC = () => {
   const colorTheme = useRecoilValue<PlotlyColorTheme>(plotlyColorTheme)
@@ -28,6 +29,11 @@ export const Settings: FC = () => {
     setPlotlyColorTheme({ dark: darkModeColor, light: event.target.value })
   }
 
+  const [plotBackendRendering, setPlotBackendRendering] = useRecoilState<boolean>(plotBackendRenderingState)
+  const handleBackendRenderingChange = () => {
+    setPlotBackendRendering(!plotBackendRendering)
+  }
+
   return (
     <Grid container spacing={4} sx={{ padding: "40px" }}>
       <Grid item xs={12}>
@@ -68,6 +74,19 @@ export const Settings: FC = () => {
           <MenuItem value={"ggplot2"}>GGPlot2</MenuItem>
         </Select>
       </Grid>
+
+      <Grid item xs={2}>
+        <Typography variant="h6" color="textSecondary">
+          Use Plotlypy
+        </Typography>
+      </Grid>
+      <Grid item xs={10} sx={{ display: "flex", alignItems: "center" }}>
+        <Switch
+          checked={plotBackendRendering}
+          onChange={handleBackendRenderingChange}
+          value="enable"
+        />
+      </Grid>
     </Grid>
   )
 }

optuna_dashboard/ts/state.ts

@@ -51,6 +51,11 @@ export const plotlyColorTheme = atom<PlotlyColorTheme>({
   },
 })
 
+export const plotBackendRenderingState = atom<boolean>({
+  key: "plotBackendRendering",
+  default: false,
+})
+
 export const plotlypyIsAvailableState = atom<boolean>({
   key: "plotlypyIsAvailable",
   default: true,
@@ -115,10 +120,10 @@ export const usePlotlyColorTheme = (mode: string): Partial<Plotly.Template> => {
 }
 
 export const useBackendRender = (): boolean => {
-  const query = useQuery()
+  const plotBackendRendering = useRecoilValue<boolean>(plotBackendRenderingState)
   const plotlypyIsAvailable = useRecoilValue<boolean>(plotlypyIsAvailableState)
 
-  if (query.get("plotlypy_rendering") === "true") {
+  if (plotBackendRendering) {
     if (plotlypyIsAvailable) {
       return true
     }