From 5076818e46160dca255bcbd2453a5f1dd28261c3 Mon Sep 17 00:00:00 2001
From: Kenshin Abe <abe.kenshin@gmail.com>
Date: Wed, 8 Nov 2023 18:42:41 +0900
Subject: [PATCH] Support constraints in slice plot

---
 optuna_dashboard/ts/components/GraphSlice.tsx | 41 +++++++++++++++----
 1 file changed, 34 insertions(+), 7 deletions(-)

diff --git a/optuna_dashboard/ts/components/GraphSlice.tsx b/optuna_dashboard/ts/components/GraphSlice.tsx
index 1498f451..2a807cb7 100644
--- a/optuna_dashboard/ts/components/GraphSlice.tsx
+++ b/optuna_dashboard/ts/components/GraphSlice.tsx
@@ -188,22 +188,38 @@ const plotSlice = (
     return
   }
 
-  const objectiveValues: number[] = trials.map(
+  const feasibleTrials: Trial[] = []
+  const infeasibleTrials: Trial[] = []
+  trials.forEach((t) => {
+    if (t.constraints.every((c) => c <= 0)) {
+      feasibleTrials.push(t)
+    } else {
+      infeasibleTrials.push(t)
+    }
+  })
+
+  const feasibleObjectiveValues: number[] = feasibleTrials.map(
     (t) => objectiveTarget.getTargetValue(t) as number
   )
-  const values = trials.map(
-    (t) => selectedParamTarget.getTargetValue(t) as number
+  const infeasibleObjectiveValues: number[] = infeasibleTrials.map(
+    (t) => objectiveTarget.getTargetValue(t) as number
   )
 
-  const trialNumbers: number[] = trials.map((t) => t.number)
+  const feasibleValues = feasibleTrials.map(
+    (t) => selectedParamTarget.getTargetValue(t) as number
+  )
+  const infeasibleValues = infeasibleTrials.map(
+    (t) => selectedParamTarget.getTargetValue(t) as number
+  )
   const trace: plotly.Data[] = [
     {
       type: "scatter",
-      x: values,
-      y: objectiveValues,
+      x: feasibleValues,
+      y: feasibleObjectiveValues,
       mode: "markers",
+      name: "Feasible Trial",
       marker: {
-        color: trialNumbers,
+        color: feasibleTrials.map((t) => t.number),
         colorscale: "Blues",
         reversescale: true,
         colorbar: {
@@ -215,6 +231,17 @@ const plotSlice = (
         },
       },
     },
+    {
+      type: "scatter",
+      x: infeasibleValues,
+      y: infeasibleObjectiveValues,
+      mode: "markers",
+      name: "Infeasible Trial",
+      marker: {
+        color: "#cccccc",
+        reversescale: true,
+      },
+    },
   ]
   if (selectedParamSpace.distribution.type !== "CategoricalDistribution") {
     layout["xaxis"] = {