From 52f260da31679fa2d355311ff9e05478438ae0df Mon Sep 17 00:00:00 2001
From: Harman Waseer <2403hwaseer@gmail.com>
Date: Sat, 20 Feb 2021 22:13:56 +0530
Subject: [PATCH] Remove the use of dimension variable , minor refactoring and
 change the layout to enable data point visibility

---
 .../static/components/GraphSlice.tsx          | 144 ++++++++++--------
 1 file changed, 82 insertions(+), 62 deletions(-)

diff --git a/optuna_dashboard/static/components/GraphSlice.tsx b/optuna_dashboard/static/components/GraphSlice.tsx
index 1e6ec6ec..0ae8db2c 100644
--- a/optuna_dashboard/static/components/GraphSlice.tsx
+++ b/optuna_dashboard/static/components/GraphSlice.tsx
@@ -41,88 +41,108 @@ export const GraphSlice: FC<{
         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 
     }
-    
-    const objectiveValues: number[] = filteredTrials.map(
-       (t) => t.values![objectiveId]
-    )
-    
-    let dimensions = [
-      {
-        label: "Objective value",
-        values: objectiveValues,
-        range: [Math.min(...objectiveValues), Math.max(...objectiveValues)]
-      }
-    ]
-    if(paramNames.size ===1){
-      dimensions = [{
-        label: "objective values",
-        values: objectiveValues,
-        range: [Math.min(...objectiveValues), Math.max(...objectiveValues)],
-      }]
-      const plotData: Partial<plotly.PlotData>[] = [
-        {
-          type: "scatter",
-          //@ts-ignore
-          dimensions: dimensions,
-          mode: "markers",
-          // xpad: 40
-        },
-      ]
-      console.log(dimensions)
-      return plotly.react(plotDomId, plotData, layout)
-    }
     else{
-      let i=0
       let  trace: Partial<plotly.PlotData> =  {
         type: "scatter",
-        //@ts-ignore
-        dimensions :dimensions, 
+        x:[],
+        y:objectiveValues,
         mode :"markers",
-        xaxis : "x"
+        xaxis : "x",
+        marker:{
+          color: "#185799"
+        }
       }
-
-      
+      let updatelayout: Partial<plotly.Layout> = {
+        title: "Slice",
+        margin: {
+          l: 50,
+          r: 50,
+          b: 0,
+        },
+        grid: {
+          rows: 1,
+          columns: paramNames.size,
+          pattern:'coupled'
+        },
+        xaxis : {
+          title:"x",
+          zerolinecolor: "#f2f5fa",
+          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
+      } 
       let traces: Partial<plotly.PlotData>[]= []
-      
+      let i=1
       paramNames.forEach((paramName) => {
         const valueStrings = filteredTrials.map((t) => {
           const param = t.params.find((p) => p.name == paramName)
           return param!.value
         })
-        const isnum = valueStrings.every((v) => {
-          return /^-?\d+\.\d+$/.test(v)
-        })
-        if (isnum) {
-          const values: number[] = valueStrings.map((v) => parseFloat(v))
-          dimensions = [{
-            label: paramName,
-            values: values,
-            range: [Math.min(...values), Math.max(...values)],
-          }]
-        } 
-        trace = {
-          type: "scatter",
-          //@ts-ignore
-          dimensions: dimensions,
-          mode:"markers",
-          xaxis: `x ${i}`
+        const values: number[] = valueStrings.map((v) => parseFloat(v))
+          
+        const axisx: string = `x${i}`
+        if(i==1){
+          trace = {
+            type: "scatter",
+            x: values,
+            y: objectiveValues,
+            mode :"markers",
+            xaxis : "x"
+          }
         }
-
-        traces.push(trace) 
-        i++         
-
+        else{
+          trace  = {
+            type: "scatter",
+            x: values,
+            y: objectiveValues, 
+            mode :"markers",
+            xaxis : axisx,
+            marker: {
+              color: "#185799"
+            }
+          }
+          updatelayout["xaxis2"] = {
+              title: paramName,
+              zerolinecolor: "#f2f5fa",
+              zerolinewidth: 1.5,
+              linecolor: "#f2f5fa",
+              linewidth: 5,
+              gridcolor: "#f2f5fa",
+              gridwidth:1,
+              
+            }
+        }
+        traces.push(trace)
+        i++
       })
       const plotData: Partial<plotly.PlotData>[] = traces
-    
-      plotly.react(plotDomId, plotData, layout)
-    }
+      plotly.react(plotDomId, plotData, updatelayout)
+
+    } 
 
   }