Merge pull request #525 from hrntsm/Add_constraints_for_pareto_front

Add constraints for pareto front

optuna_dashboard/_serializer.py

@@ -83,6 +83,7 @@ if TYPE_CHECKING:
 
 
 MAX_ATTR_LENGTH = 1024
+CONSTRAINTS_KEY = "constraints"
 
 
 def serialize_attrs(attrs: dict[str, Any]) -> list[Attribute]:
@@ -187,6 +188,7 @@ def serialize_frozen_trial(
         ),
         "note": note.get_note_from_system_attrs(study_system_attrs, trial._trial_id),
         "artifacts": list_trial_artifacts(study_system_attrs, trial._trial_id),
+        "constraints": trial_system_attrs.get(CONSTRAINTS_KEY, []),
     }
 
     serialized_intermediate_values: list[IntermediateValue] = []

optuna_dashboard/ts/apiClient.ts

@@ -30,6 +30,7 @@ interface TrialResponse {
   system_attrs: Attribute[]
   note: Note
   artifacts: Artifact[]
+  constraints: number[]
 }
 
 const convertTrialResponse = (res: TrialResponse): Trial => {
@@ -52,6 +53,7 @@ const convertTrialResponse = (res: TrialResponse): Trial => {
     system_attrs: res.system_attrs,
     note: res.note,
     artifacts: res.artifacts,
+    constraints: res.constraints,
   }
 }
 

optuna_dashboard/ts/components/GraphParetoFront.tsx

@@ -108,9 +108,10 @@ const makeScatterObject = (
   objectiveXId: number,
   objectiveYId: number,
   hovertemplate: string,
-  dominated: boolean
+  dominated: boolean,
+  feasible: boolean
 ): Partial<plotly.PlotData> => {
-  const marker = makeMarker(trials, dominated)
+  const marker = makeMarker(trials, dominated, feasible)
   return {
     x: trials.map((t) => t.values![objectiveXId] as number),
     y: trials.map((t) => t.values![objectiveYId] as number),
@@ -124,9 +125,10 @@ const makeScatterObject = (
 
 const makeMarker = (
   trials: Trial[],
-  dominated: boolean
+  dominated: boolean,
+  feasible: boolean
 ): Partial<plotly.PlotData> => {
-  if (dominated) {
+  if (feasible && dominated) {
     return {
       line: { width: 0.5, color: "Grey" },
       // @ts-ignore
@@ -137,7 +139,7 @@ const makeMarker = (
         title: "Trial",
       },
     }
-  } else {
+  } else if (feasible && !dominated) {
     return {
       line: { width: 0.5, color: "Grey" },
       // @ts-ignore
@@ -149,6 +151,11 @@ const makeMarker = (
         xpad: 80,
       },
     }
+  } else {
+    return {
+      // @ts-ignore
+      color: "#cccccc",
+    }
   }
 }
 
@@ -183,8 +190,18 @@ const plotParetoFront = (
     return
   }
 
-  const normalizedValues: number[][] = []
+  const feasibleTrials: Trial[] = []
+  const InfeasibleTrials: Trial[] = []
   filteredTrials.forEach((t) => {
+    if (t.constraints.every((c) => c <= 0)) {
+      feasibleTrials.push(t)
+    } else {
+      InfeasibleTrials.push(t)
+    }
+  })
+
+  const normalizedValues: number[][] = []
+  feasibleTrials.forEach((t) => {
     if (t.values && t.values.length === study.directions.length) {
       const trialValues = t.values.map((v, i) => {
         return study.directions[i] === "minimize"
@@ -210,17 +227,29 @@ const plotParetoFront = (
 
   const plotData: Partial<plotly.PlotData>[] = [
     makeScatterObject(
-      filteredTrials.filter((t, i) => dominatedTrials[i]),
+      feasibleTrials.filter((t, i) => dominatedTrials[i]),
       objectiveXId,
       objectiveYId,
-      "%{text}<extra>Trial</extra>",
+      InfeasibleTrials.length === 0
+        ? "%{text}<extra>Trial</extra>"
+        : "%{text}<extra>Feasible Trial</extra>",
+      true,
       true
     ),
     makeScatterObject(
-      filteredTrials.filter((t, i) => !dominatedTrials[i]),
+      feasibleTrials.filter((t, i) => !dominatedTrials[i]),
       objectiveXId,
       objectiveYId,
       "%{text}<extra>Best Trial</extra>",
+      false,
+      true
+    ),
+    makeScatterObject(
+      InfeasibleTrials,
+      objectiveXId,
+      objectiveYId,
+      "%{text}<extra>Infeasible Trial</extra>",
+      false,
       false
     ),
   ]

optuna_dashboard/ts/types/index.d.ts

@@ -112,6 +112,7 @@ type Trial = {
   }[]
   user_attrs: Attribute[]
   system_attrs: Attribute[]
+  constraints: number[]
   note: Note
   artifacts: Artifact[]
 }