Merge pull request #274 from keisuke-umezawa/feature/align-graph-slice

Align graph slice between optuna and optuna-dashboard

optuna_dashboard/ts/components/GraphSlice.tsx

@@ -162,7 +162,7 @@ const plotSlice = (
       automargin: true,
     },
     yaxis: {
-      title: "Objective Values",
+      title: "Objective Value",
       type: logYScale ? "log" : "linear",
       gridwidth: 1,
       automargin: true,
@@ -187,6 +187,8 @@ const plotSlice = (
     return t.params.find((p) => p.name == selected)!.value
   })
 
+  const trialNumbers: number[] = filteredTrials.map((t) => t.number)
+
   const isnum = valueStrings.every((v) => {
     return !isNaN(Number(v))
   })
@@ -198,6 +200,18 @@ const plotSlice = (
         x: valuesNum,
         y: objectiveValues,
         mode: "markers",
+        marker: {
+          color: trialNumbers,
+          colorscale: "Blues",
+          reversescale: true,
+          colorbar: {
+            title: "Trial",
+          },
+          line: {
+            color: "Grey",
+            width: 0.5,
+          },
+        },
       },
     ]
     layout["xaxis"] = {
@@ -220,6 +234,18 @@ const plotSlice = (
         x: valuesCategorical,
         y: objectiveValues,
         mode: "markers",
+        marker: {
+          color: trialNumbers,
+          colorscale: "Blues",
+          reversescale: true,
+          colorbar: {
+            title: "Trial",
+          },
+          line: {
+            color: "Grey",
+            width: 0.5,
+          },
+        },
       },
     ]
     layout["xaxis"] = {