From b5e1c12c24113f6c98bb177e934c00a185c41cb4 Mon Sep 17 00:00:00 2001
From: keisuke-umezawa <keisuke.umezawa@gmail.com>
Date: Mon, 9 Aug 2021 16:19:51 +0900
Subject: [PATCH] Change x axis by distribution

---
 optuna_dashboard/serializer.py                |  2 +-
 .../static/components/GraphSlice.tsx          | 29 +++++++++----------
 optuna_dashboard/static/types/index.d.ts      |  3 +-
 3 files changed, 17 insertions(+), 17 deletions(-)

diff --git a/optuna_dashboard/serializer.py b/optuna_dashboard/serializer.py
index b113f515..1252ce4c 100644
--- a/optuna_dashboard/serializer.py
+++ b/optuna_dashboard/serializer.py
@@ -139,7 +139,7 @@ def serialize_search_space(
         serialized.append(
             {
                 "name": param_name,
-                "type": distribution.__class__.__name__,
+                "distribution": distribution.__class__.__name__,
                 "attributes": distribution._asdict(),
             }
         )
diff --git a/optuna_dashboard/static/components/GraphSlice.tsx b/optuna_dashboard/static/components/GraphSlice.tsx
index 3c06840f..d5e942bb 100644
--- a/optuna_dashboard/static/components/GraphSlice.tsx
+++ b/optuna_dashboard/static/components/GraphSlice.tsx
@@ -26,6 +26,11 @@ const useStyles = makeStyles((theme: Theme) =>
   })
 )
 
+const logDistributions = [
+  "LogUniformDistribution",
+  "IntLogUniformDistribution"
+]
+
 export const GraphSlice: FC<{
   study: StudyDetail | null
 }> = ({ study = null }) => {
@@ -36,8 +41,12 @@ export const GraphSlice: FC<{
   const [logXScale, setLogXScale] = useState<boolean>(false)
   const [logYScale, setLogYScale] = useState<boolean>(false)
   const paramNames = study?.union_search_space.map((s) => s.name)
+  const distributions  = new Map(
+    study?.union_search_space.map((s) => [s.name, s.distribution]))
   if (selected === null && paramNames && paramNames.length > 0) {
+    const distribution = distributions.get(paramNames[0]) || ""
     setSelected(paramNames[0])
+    setLogXScale(logDistributions.includes(distribution))
   }
 
   useEffect(() => {
@@ -51,12 +60,10 @@ export const GraphSlice: FC<{
   }
 
   const handleSelectedParam = (e: ChangeEvent<{ value: unknown }>) => {
-    setSelected(e.target.value as string)
-  }
-
-  const handleLogXScaleChange = (e: ChangeEvent<HTMLInputElement>) => {
-    e.preventDefault()
-    setLogXScale(!logXScale)
+    const paramName = e.target.value as string
+    const distribution = distributions.get(paramName) || ""
+    setSelected(paramName)
+    setLogXScale(logDistributions.includes(distribution))
   }
 
   const handleLogYScaleChange = (e: ChangeEvent<HTMLInputElement>) => {
@@ -94,15 +101,7 @@ export const GraphSlice: FC<{
             </Select>
           </FormControl>
           <FormControl component="fieldset" className={classes.formControl}>
-            <FormLabel component="legend">Log x scale:</FormLabel>
-            <Switch
-              checked={logXScale}
-              onChange={handleLogXScaleChange}
-              value="enable"
-            />
-          </FormControl>
-          <FormControl component="fieldset" className={classes.formControl}>
-            <FormLabel component="legend">Log y scale:</FormLabel>
+            <FormLabel component="legend">Log scale:</FormLabel>
             <Switch
               checked={logYScale}
               onChange={handleLogYScaleChange}
diff --git a/optuna_dashboard/static/types/index.d.ts b/optuna_dashboard/static/types/index.d.ts
index 9a94e3ec..4b50f399 100644
--- a/optuna_dashboard/static/types/index.d.ts
+++ b/optuna_dashboard/static/types/index.d.ts
@@ -35,7 +35,8 @@ declare interface ParamImportance {
 
 declare interface SearchSpace {
   name: string
-  type: string
+  distribution: Distribution
+  attributes: Attribute[]
 }
 
 declare interface Attribute {