Refactor GraphContour.tsx

optuna_dashboard/ts/components/GraphContour.tsx

@@ -184,9 +184,6 @@ const plotContour = (
     },
     uirevision: "true",
     template: mode === "dark" ? plotlyDarkTemplate : {},
-    legend: {
-      y: 0.8,
-    },
   }
 
   // TODO(c-bata): Support parameters that only have the single value
@@ -214,58 +211,65 @@ const plotContour = (
       zValues[yi][xi] = zValue
     }
   })
-  const bestTrialIndices = study.best_trials.map((trial) => trial.number)
-  const plotData: Partial<plotly.PlotData>[] = study.is_preferential
-    ? [
-        {
-          type: "scatter",
-          x: xValues.filter((_, i) => bestTrialIndices.includes(i)),
-          y: yValues.filter((_, i) => bestTrialIndices.includes(i)),
-          marker: {
-            line: { width: 2.0, color: "Grey" },
-            color: blue[200],
-          },
-          name: "best trials",
-          mode: "markers",
-        },
-        {
-          type: "scatter",
-          x: xValues.filter((_, i) => !bestTrialIndices.includes(i)),
-          y: yValues.filter((_, i) => !bestTrialIndices.includes(i)),
-          marker: { line: { width: 2.0, color: "Grey" }, color: "black" },
-          name: "others",
-          mode: "markers",
-        },
-      ]
-    : [
-        {
-          type: "contour",
-          x: xIndices,
-          y: yIndices,
-          z: zValues,
-          colorscale: "Blues",
-          connectgaps: true,
-          hoverinfo: "none",
-          line: {
-            smoothing: 1.3,
-          },
-          reversescale: study.directions[objectiveId] !== "minimize",
-          // https://github.com/plotly/react-plotly.js/issues/251
-          // @ts-ignore
-          contours: {
-            coloring: "heatmap",
-          },
-        },
-        {
-          type: "scatter",
-          x: xValues,
-          y: yValues,
-          marker: { line: { width: 2.0, color: "Grey" }, color: "black" },
-          mode: "markers",
-          showlegend: false,
-        },
-      ]
 
+  if (!study.is_preferential) {
+    const plotData: Partial<plotly.PlotData>[] = [
+      {
+        type: "contour",
+        x: xIndices,
+        y: yIndices,
+        z: zValues,
+        colorscale: "Blues",
+        connectgaps: true,
+        hoverinfo: "none",
+        line: {
+          smoothing: 1.3,
+        },
+        reversescale: study.directions[objectiveId] !== "minimize",
+        // https://github.com/plotly/react-plotly.js/issues/251
+        // @ts-ignore
+        contours: {
+          coloring: "heatmap",
+        },
+      },
+      {
+        type: "scatter",
+        x: xValues,
+        y: yValues,
+        marker: { line: { width: 2.0, color: "Grey" }, color: "black" },
+        mode: "markers",
+        showlegend: false,
+      },
+    ]
+    plotly.react(plotDomId, plotData, layout)
+    return
+  }
+
+  layout.legend = {
+    y: 0.8,
+  }
+  const bestTrialIndices = study.best_trials.map((trial) => trial.number)
+  const plotData: Partial<plotly.PlotData>[] = [
+    {
+      type: "scatter",
+      x: xValues.filter((_, i) => bestTrialIndices.includes(i)),
+      y: yValues.filter((_, i) => bestTrialIndices.includes(i)),
+      marker: {
+        line: { width: 2.0, color: "Grey" },
+        color: blue[200],
+      },
+      name: "best trials",
+      mode: "markers",
+    },
+    {
+      type: "scatter",
+      x: xValues.filter((_, i) => !bestTrialIndices.includes(i)),
+      y: yValues.filter((_, i) => !bestTrialIndices.includes(i)),
+      marker: { line: { width: 2.0, color: "Grey" }, color: "black" },
+      name: "others",
+      mode: "markers",
+    },
+  ]
   plotly.react(plotDomId, plotData, layout)
 }