From 14ce72d048ebc76ed1dcdf3ffae65f724954c51b Mon Sep 17 00:00:00 2001
From: Harman Waseer <2403hwaseer@gmail.com>
Date: Wed, 24 Feb 2021 20:16:32 +0530
Subject: [PATCH] Make Categorical labels visible on x-axis

---
 .../static/components/GraphSlice.tsx          | 55 ++++++++++++-------
 1 file changed, 35 insertions(+), 20 deletions(-)

diff --git a/optuna_dashboard/static/components/GraphSlice.tsx b/optuna_dashboard/static/components/GraphSlice.tsx
index e64b029c..534a95aa 100644
--- a/optuna_dashboard/static/components/GraphSlice.tsx
+++ b/optuna_dashboard/static/components/GraphSlice.tsx
@@ -34,7 +34,6 @@ export const GraphSlice: FC<{
             t.params.filter((p) => paramNames.has(p.name)).map((p) => p.name)
            )
     })
-    console.log(trials[0].params)
     const paramnames = Array.from(paramNames)
 
     const classes = useStyles()
@@ -130,12 +129,11 @@ const plotSlice = (trials: Trial[], objectiveId: number, xAxis: string) => {
               color: "#185799"
             }
         }]
-        const updateLayout: Partial<plotly.Layout> = {
+        let updateLayout: Partial<plotly.Layout> = {
             title: "Slice",
             margin: {
               l: 50,
               r: 50,
-              b: 0,
             },
             xaxis: {
               title: "x",
@@ -152,7 +150,7 @@ const plotSlice = (trials: Trial[], objectiveId: number, xAxis: string) => {
               zerolinewidth: 2,
               linecolor: "#f2f5fa",
               linewidth: 5,
-              gridcolor: "#f2f5fa",
+              gridcolor: "#f2f5fa",     
               gridwidth: 1
             },
             plot_bgcolor: "#E5ecf6",
@@ -204,25 +202,42 @@ const plotSlice = (trials: Trial[], objectiveId: number, xAxis: string) => {
                 x: values,
                 y: objectiveValues,
                 mode: "markers",
-                xaxis: paramName,
+                // xaxis: paramName,
                 marker: {
                   color: "#185799"
-                }
+                }                
               }]
-              updateLayout["xaxis"]= {
-                title: paramName,
-                zerolinecolor: "#f2f5fa",
-                zerolinewidth: 1.5,
-                linecolor: "#f2f5fa",
-                linewidth: 5,
-                gridcolor: "#f2f5fa",
-                gridwidth: 1,
-                showticklabels: true,
-                tickvals: tickvals,
-                ticktext: vocabArr,
-                tickfont: {
-                  color: "#000000"
-                }
+              updateLayout = {
+                title: "Slice",
+                margin: {
+                  l: 50,
+                  r: 50,
+                },
+                xaxis: {
+                  title: paramName,
+                  zerolinecolor: "#f2f5fa",
+                  zerolinewidth: 1.5,
+                  linecolor: "#f2f5fa",
+                  linewidth: 5,
+                  gridcolor: "#f2f5fa",
+                  gridwidth: 1,
+                  tickfont: {
+                    color: "#000000"
+                  },
+                  tickvals: tickvals,
+                  ticktext: vocabArr,
+                },
+                yaxis: {
+                  title: "Objective Values",
+                  zerolinecolor: "#f2f5fa",
+                  zerolinewidth: 2,
+                  linecolor: "#f2f5fa",
+                  linewidth: 5,
+                  gridcolor: "#f2f5fa",     
+                  gridwidth: 1
+                },
+                plot_bgcolor: "#E5ecf6",
+                showlegend: false
               }
               plotly.react(plotDomId, trace, updateLayout)
             }