From 00606bc3f5118b6392c3b4140693928ed9f21cb5 Mon Sep 17 00:00:00 2001
From: Toshihiko Yanase <toshihiko.yanase@gmail.com>
Date: Wed, 1 Nov 2023 18:27:54 +0900
Subject: [PATCH] Add constraints handling for contour plot.

---
 optuna_dashboard/ts/components/GraphContour.tsx | 16 ++++++++++++++--
 1 file changed, 14 insertions(+), 2 deletions(-)

diff --git a/optuna_dashboard/ts/components/GraphContour.tsx b/optuna_dashboard/ts/components/GraphContour.tsx
index b186fffe..a5416f5b 100644
--- a/optuna_dashboard/ts/components/GraphContour.tsx
+++ b/optuna_dashboard/ts/components/GraphContour.tsx
@@ -195,12 +195,16 @@ const plotContour = (
   const xValues: plotly.Datum[] = []
   const yValues: plotly.Datum[] = []
   const zValues: plotly.Datum[][] = new Array(yIndices.length)
+  const feasibleXY = new Set<number>()
   for (let j = 0; j < yIndices.length; j++) {
     zValues[j] = new Array(xIndices.length).fill(null)
   }
 
   filteredTrials.forEach((trial, i) => {
     if (xAxis.values[i] && yAxis.values[i] && trial.values) {
+      if (trial.constraints.every((c) => c <= 0)) {
+        feasibleXY.add(xValues.length)
+      }
       const xValue = xAxis.values[i] as string | number
       const yValue = yAxis.values[i] as string | number
       xValues.push(xValue)
@@ -234,12 +238,20 @@ const plotContour = (
       },
       {
         type: "scatter",
-        x: xValues,
-        y: yValues,
+        x: xValues.filter((_, i) => feasibleXY.has(i)),
+        y: yValues.filter((_, i) => feasibleXY.has(i)),
         marker: { line: { width: 2.0, color: "Grey" }, color: "black" },
         mode: "markers",
         showlegend: false,
       },
+      {
+        type: "scatter",
+        x: xValues.filter((_, i) => !feasibleXY.has(i)),
+        y: yValues.filter((_, i) => !feasibleXY.has(i)),
+        marker: { line: { width: 2.0, color: "Grey" }, color: "#cccccc" },
+        mode: "markers",
+        showlegend: false,
+      },
     ]
     plotly.react(plotDomId, plotData, layout)
     return