From b844ea4c6bcf64aa73ecc16faf3515512305e8a7 Mon Sep 17 00:00:00 2001
From: Harman Waseer <2403hwaseer@gmail.com>
Date: Tue, 23 Feb 2021 18:09:40 +0530
Subject: [PATCH] WIP: Add Select Box in Graph slice

---
 .../components/GraphParallelCoordinate.tsx    |   3 +-
 .../static/components/GraphSlice.tsx          |  39 ++--
 .../static/components/GraphSlice2.tsx         | 184 ++++++++++++++++++
 .../static/components/StudyDetail.tsx         |  13 +-
 4 files changed, 216 insertions(+), 23 deletions(-)
 create mode 100644 optuna_dashboard/static/components/GraphSlice2.tsx

diff --git a/optuna_dashboard/static/components/GraphParallelCoordinate.tsx b/optuna_dashboard/static/components/GraphParallelCoordinate.tsx
index d9e81466..cfa0b9d2 100644
--- a/optuna_dashboard/static/components/GraphParallelCoordinate.tsx
+++ b/optuna_dashboard/static/components/GraphParallelCoordinate.tsx
@@ -72,7 +72,8 @@ const plotCoordinate = (trials: Trial[], objectiveId: number) => {
         values: values,
         range: [Math.min(...values), Math.max(...values)],
       })
-    } else {
+    }
+     else {
       // categorical
       const vocabSet = new Set<string>(valueStrings)
       const vocabArr = Array.from<string>(vocabSet)
diff --git a/optuna_dashboard/static/components/GraphSlice.tsx b/optuna_dashboard/static/components/GraphSlice.tsx
index c2cb3204..3af712c6 100644
--- a/optuna_dashboard/static/components/GraphSlice.tsx
+++ b/optuna_dashboard/static/components/GraphSlice.tsx
@@ -1,16 +1,18 @@
 import * as plotly from "plotly.js-dist"
 import React, { FC, useEffect } from "react"
 
+
 const plotDomId = "graph-slice"
 
+
 export const GraphSlice: FC<{
-    trials: Trial[]
-  }> = ({ trials = [] }) => {
-    useEffect(() => {
-      plotSlice(trials, 0) 
-    }, [trials])
-    return <div id={plotDomId} />
-  }
+  trials: Trial[]
+}> = ({ trials = [] }) => {
+  useEffect(() => {
+    plotSlice(trials, 0)
+  }, [trials])
+  return <div id={plotDomId} />
+}
 
   const plotSlice = (trials: Trial[], objectiveId: number) => {
     if (document.getElementById(plotDomId) === null) {
@@ -46,8 +48,7 @@ export const GraphSlice: FC<{
       (t) => t.values![objectiveId]
    )
 
-    if (paramNames.size === 0) {
-        
+    if (paramNames.size === 0) {        
         plotly.react(plotDomId, [])
         return 
     }
@@ -55,7 +56,7 @@ export const GraphSlice: FC<{
       let  trace: Partial<plotly.PlotData> =  {
         type: "scatter",
         x:[],
-        y:objectiveValues,
+        y:[],
         mode :"markers",
         xaxis : "x",
         marker:{
@@ -75,8 +76,8 @@ export const GraphSlice: FC<{
           pattern:'coupled'
         },
         xaxis : {
-          title:"x",
-          zerolinecolor: "#f2f5fa",
+          title: "x",
+          zerolinecolor: "white",
           zerolinewidth: 1.5,
           linecolor: "#f2f5fa",
           linewidth: 5,
@@ -111,7 +112,10 @@ export const GraphSlice: FC<{
             x: values,
             y: objectiveValues,
             mode :"markers",
-            xaxis : "x"
+            xaxis : "x",
+            marker:{
+              color:"#185799"
+            }
           }
         }
         else{
@@ -133,17 +137,22 @@ export const GraphSlice: FC<{
           updatelayout[axisname] = {
           title: paramName,
           zerolinecolor: "#f2f5fa",
-          zerolinewidth: 1.5,
+          zerolinewidth: 2,
           linecolor: "#f2f5fa",
           linewidth: 5,
           gridcolor: "#f2f5fa",
-          gridwidth:1,
+          gridwidth:1
           }
           
         }
         traces.push(trace)
         i++
       })
+      if(i==2){
+        updatelayout["width"] = 400
+      }
+        
+      
       const plotData: Partial<plotly.PlotData>[] = traces
       plotly.react(plotDomId, plotData, updatelayout)
 
diff --git a/optuna_dashboard/static/components/GraphSlice2.tsx b/optuna_dashboard/static/components/GraphSlice2.tsx
new file mode 100644
index 00000000..e2df2c74
--- /dev/null
+++ b/optuna_dashboard/static/components/GraphSlice2.tsx
@@ -0,0 +1,184 @@
+import * as plotly from "plotly.js-dist"
+import React, { ChangeEvent , FC, useEffect, useState } from "react"
+import {
+  Grid, 
+  FormControl,
+  FormLabel,
+  InputLabel,
+  MenuItem,
+  Select
+} from "@material-ui/core"
+import { createStyles, makeStyles, Theme} from "@material-ui/core/styles"
+
+const plotDomId = "graph-slice"
+
+const useStyles = makeStyles((theme: Theme) =>
+createStyles({
+  formControl :{
+    marginBottom: theme.spacing(2)
+  },
+})
+)
+
+export const GraphSlice2: FC<{
+    trials: Trial[]
+}> = ({ trials = [] }) => {
+    const classes = useStyles()
+    const [xAxis, setXAxis] = useState<String>("number")
+    const [objectiveId, setObjectiveId] = useState<number>(0)
+  
+    const handleObjectiveChange = (
+      event: React.ChangeEvent<{ value: unknown}>
+    ) => {
+      setObjectiveId(event.target.value as number )
+    }
+  
+    const handleXAxisChange = (
+      e: ChangeEvent<{value: unknown}>) => {
+      setXAxis(e.target.value as string)
+    }
+  
+    useEffect(() => {
+      plotSlice(trials, 0)
+    } ,
+     [trials,
+      xAxis,
+      objectiveId
+    ])
+  
+    let filteredTrials = trials.filter(
+      (t) => t.state === "Complete" || t.state === "Pruned"
+    )
+    const objectiveValues: number[] = filteredTrials.map(
+      (t) => t.values![objectiveId]
+   )
+  
+   let paramNames = new Set<string>(trials[0].params.map((p) => p.name))
+       filteredTrials.forEach((t) => {
+         paramNames = new Set<string>(
+          t.params.filter((p) => paramNames.has(p.name)).map((p) => p.name)
+         )
+      })
+    let paramnames = Array.from(paramNames)
+  
+    return (    
+      <Grid container direction="row">
+        <Grid item xs = {3}>
+          <Grid container direction="column">
+            <FormControl component = "fieldset" className={classes.formControl}>
+              <FormLabel component="legend">Objective ID:</FormLabel>
+              <Select value={objectiveId} onChange={handleObjectiveChange}>
+                {objectiveValues.map((x) => (
+                  <MenuItem value={x} key={x}>
+                    {x}
+                  </MenuItem>
+                ))}
+              </Select>
+            </FormControl>
+            <FormControl component="fieldset" className={classes.formControl}>
+              <InputLabel id="parameter">Parameter</InputLabel>
+              <Select value={xAxis} onChange={handleXAxisChange}>
+                {paramnames.map((x) => (
+                  <MenuItem value = {x} key={x}>
+                    {x}
+                  </MenuItem>
+                ))}
+              </Select>
+            </FormControl>
+          </Grid>
+        </Grid>
+        <Grid item xs={9}>
+          <div id = {plotDomId} />
+        </Grid>
+      </Grid>  
+    )
+}
+
+const plotSlice = (trials: Trial[], objectiveId: number, xAxis: string) => {
+    if(document.getElementById(plotDomId) === null){
+        return
+    }
+    
+    const layout: Partial<plotly.Layout> = {
+        title: "Slice",
+        margin: {
+          l: 50,
+          r: 50,
+          b: 0,
+        },
+    }
+
+    if (trials.length === 0) {
+        plotly.react(plotDomId, [], layout)
+        return
+    }
+
+    let filteredTrials = trials.filter(
+        (t) => t.state === "Complete" || t.state === "Pruned"
+      )
+        
+    let paramNames = new Set<string>(trials[0].params.map((p) => p.name))
+     filteredTrials.forEach((t) => {
+       paramNames = new Set<string>(
+        t.params.filter((p) => paramNames.has(p.name)).map((p) => p.name)
+       )
+    })
+
+    const objectiveValues: number[] = filteredTrials.map(
+        (t) => t.values![objectiveId]
+    )
+
+    if (paramNames.size === 0) {        
+        plotly.react(plotDomId, [])
+        return 
+    }
+    else{
+        let trace: Partial<plotly.PlotData>[] =  [{
+            type: "scatter",
+            x:[],
+            y:[],
+            mode :"markers",
+            xaxis : "x",
+            marker:{
+              color: "#185799"
+            }
+        }]
+        let updatelayout: Partial<plotly.Layout> = {
+            title: "Slice",
+            margin: {
+              l: 50,
+              r: 50,
+              b: 0,
+            },
+            xaxis : {
+              title: "x",
+              zerolinecolor: "white",
+              zerolinewidth: 1.5,
+              linecolor: "#f2f5fa",
+              linewidth: 5,
+              gridcolor: "#f2f5fa",
+              gridwidth:1,
+            },
+            yaxis:{
+              title:"Objective Values",
+              zerolinecolor: "#f2f5fa",
+              zerolinewidth: 2,
+              linecolor: "#f2f5fa",
+              linewidth: 5,
+              gridcolor: "#f2f5fa",
+              gridwidth:1
+            },
+            plot_bgcolor: "#E5ecf6",
+            showlegend: false
+        } 
+        paramNames.forEach((paramName) => {
+
+
+        })
+
+
+
+    }
+
+
+}
\ No newline at end of file
diff --git a/optuna_dashboard/static/components/StudyDetail.tsx b/optuna_dashboard/static/components/StudyDetail.tsx
index 0207d577..3654413d 100644
--- a/optuna_dashboard/static/components/StudyDetail.tsx
+++ b/optuna_dashboard/static/components/StudyDetail.tsx
@@ -22,6 +22,7 @@ import { DataGridColumn, DataGrid } from "./DataGrid"
 import { GraphParallelCoordinate } from "./GraphParallelCoordinate"
 import { GraphIntermediateValues } from "./GraphIntermediateValues"
 import { GraphSlice } from "./GraphSlice"
+import { GraphSlice2} from "./GraphSlice2"
 import { GraphHistory } from "./GraphHistory"
 import { actionCreator } from "../action"
 import { studyDetailsState } from "../state"
@@ -194,15 +195,13 @@ export const StudyDetail: FC<{}> = () => {
                   </CardContent>
                 </Card>
               </Grid>
-              <Grid item xs={6}>
-                <Card className={classes.card}>
-                  <CardContent>
-                    <GraphSlice trials={trials} />
-                  </CardContent>
-                </Card>
-              </Grid>
             </Grid>
           ) : null}
+          <Card className={classes.card}>
+            <CardContent>
+              <GraphSlice trials={trials} />
+            </CardContent>
+          </Card>
           <Card className={classes.card}>
             <TrialTable studyDetail={studyDetail} />
           </Card>