From 16ee07d4d8ff7f085fc025de98ac1c2b0de9d55e Mon Sep 17 00:00:00 2001
From: Kenshin Abe <abe.kenshin@gmail.com>
Date: Fri, 9 Feb 2024 19:04:12 +0900
Subject: [PATCH 1/3] Add "use plotlypy" button

---
 optuna_dashboard/ts/components/Settings.tsx | 23 +++++++++++++++++++--
 optuna_dashboard/ts/state.ts                |  9 ++++++--
 2 files changed, 28 insertions(+), 4 deletions(-)

diff --git a/optuna_dashboard/ts/components/Settings.tsx b/optuna_dashboard/ts/components/Settings.tsx
index 328521c0..5598b9ca 100644
--- a/optuna_dashboard/ts/components/Settings.tsx
+++ b/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>
   )
 }
diff --git a/optuna_dashboard/ts/state.ts b/optuna_dashboard/ts/state.ts
index dd07319e..1954c98e 100644
--- a/optuna_dashboard/ts/state.ts
+++ b/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
     }

From 3fd6fd9ccf93f3503d5701f42d761fe18f12a451 Mon Sep 17 00:00:00 2001
From: Kenshin Abe <abe.kenshin@gmail.com>
Date: Fri, 9 Feb 2024 19:07:06 +0900
Subject: [PATCH 2/3] Remove unused import

---
 optuna_dashboard/ts/state.ts | 1 -
 1 file changed, 1 deletion(-)

diff --git a/optuna_dashboard/ts/state.ts b/optuna_dashboard/ts/state.ts
index 1954c98e..f63fd1e4 100644
--- a/optuna_dashboard/ts/state.ts
+++ b/optuna_dashboard/ts/state.ts
@@ -3,7 +3,6 @@ import {
   LightColorTemplates,
   DarkColorTemplates,
 } from "./components/PlotlyColorTemplates"
-import { useQuery } from "./urlQuery"
 
 export const studySummariesState = atom<StudySummary[]>({
   key: "studySummaries",

From 1f718d9ec9f6a2093b9ffa93c13901a967c90ae4 Mon Sep 17 00:00:00 2001
From: Kenshin Abe <abe.kenshin@gmail.com>
Date: Fri, 9 Feb 2024 19:08:23 +0900
Subject: [PATCH 3/3] Apply fmt

---
 optuna_dashboard/ts/components/Settings.tsx | 3 ++-
 optuna_dashboard/ts/state.ts                | 4 +++-
 2 files changed, 5 insertions(+), 2 deletions(-)

diff --git a/optuna_dashboard/ts/components/Settings.tsx b/optuna_dashboard/ts/components/Settings.tsx
index 5598b9ca..78ec883f 100644
--- a/optuna_dashboard/ts/components/Settings.tsx
+++ b/optuna_dashboard/ts/components/Settings.tsx
@@ -29,7 +29,8 @@ export const Settings: FC = () => {
     setPlotlyColorTheme({ dark: darkModeColor, light: event.target.value })
   }
 
-  const [plotBackendRendering, setPlotBackendRendering] = useRecoilState<boolean>(plotBackendRenderingState)
+  const [plotBackendRendering, setPlotBackendRendering] =
+    useRecoilState<boolean>(plotBackendRenderingState)
   const handleBackendRenderingChange = () => {
     setPlotBackendRendering(!plotBackendRendering)
   }
diff --git a/optuna_dashboard/ts/state.ts b/optuna_dashboard/ts/state.ts
index f63fd1e4..44c9341a 100644
--- a/optuna_dashboard/ts/state.ts
+++ b/optuna_dashboard/ts/state.ts
@@ -119,7 +119,9 @@ export const usePlotlyColorTheme = (mode: string): Partial<Plotly.Template> => {
 }
 
 export const useBackendRender = (): boolean => {
-  const plotBackendRendering = useRecoilValue<boolean>(plotBackendRenderingState)
+  const plotBackendRendering = useRecoilValue<boolean>(
+    plotBackendRenderingState
+  )
   const plotlypyIsAvailable = useRecoilValue<boolean>(plotlypyIsAvailableState)
 
   if (plotBackendRendering) {