From a53d7a266c33de35e4c59ffac82ab15e55008b64 Mon Sep 17 00:00:00 2001 From: Hiroki Takizawa Date: Thu, 9 Nov 2023 13:49:33 +0900 Subject: [PATCH 1/3] Update GraphRank.tsx --- optuna_dashboard/ts/components/GraphRank.tsx | 10 ++++++++++ 1 file changed, 10 insertions(+) diff --git a/optuna_dashboard/ts/components/GraphRank.tsx b/optuna_dashboard/ts/components/GraphRank.tsx index 4e3e7544..9763ac17 100644 --- a/optuna_dashboard/ts/components/GraphRank.tsx +++ b/optuna_dashboard/ts/components/GraphRank.tsx @@ -32,6 +32,7 @@ interface RankPlotInfo { yvalues: (string | number)[] zvalues: number[] colors: number[] + is_feasible: boolean[] hovertext: string[] } @@ -156,6 +157,7 @@ const getRankPlotInfo = ( const xValues: (string | number)[] = [] const yValues: (string | number)[] = [] const zValues: number[] = [] + const isFeasible: boolean[] = [] const hovertext: string[] = [] filteredTrials.forEach((trial) => { const xValue = @@ -168,9 +170,11 @@ const getRankPlotInfo = ( return } const zValue = Number(trial.values[objectiveId]) + const feasibility = trial.constraints.every((c) => c <= 0) xValues.push(xValue) yValues.push(yValue) zValues.push(zValue) + isFeasible.push(feasibility) hovertext.push(makeHovertext(trial)) }) @@ -183,6 +187,7 @@ const getRankPlotInfo = ( yvalues: yValues, zvalues: zValues, colors, + is_feasible: isFeasible, hovertext, } } @@ -382,5 +387,10 @@ const plotRank = (rankPlotInfo: RankPlotInfo | null, mode: string) => { hovertext: rankPlotInfo.hovertext, }, ] + for (let i = 0; i < plotData.length; i++) { + if(rankPlotInfo.is_feasible[i] == false){ + plotData[i].marker.color = "#cccccc" + } + } plotly.react(plotDomId, plotData, layout) } From 00ce7ceb00ca2b581d33e12c6f358b2ab80f2528 Mon Sep 17 00:00:00 2001 From: Hiroki Takizawa Date: Thu, 9 Nov 2023 15:53:05 +0900 Subject: [PATCH 2/3] Update GraphRank.tsx --- optuna_dashboard/ts/components/GraphRank.tsx | 32 ++++++++++++++------ 1 file changed, 23 insertions(+), 9 deletions(-) diff --git a/optuna_dashboard/ts/components/GraphRank.tsx b/optuna_dashboard/ts/components/GraphRank.tsx index 9763ac17..662135d2 100644 --- a/optuna_dashboard/ts/components/GraphRank.tsx +++ b/optuna_dashboard/ts/components/GraphRank.tsx @@ -367,10 +367,10 @@ const plotRank = (rankPlotInfo: RankPlotInfo | null, mode: string) => { const plotData: Partial[] = [ { type: "scatter", - x: xValues, - y: yValues, + x: xValues.filter((_, i) => rankPlotInfo.is_feasible[i]), + y: yValues.filter((_, i) => rankPlotInfo.is_feasible[i]), marker: { - color: rankPlotInfo.colors, + color: rankPlotInfo.colors.filter((_, i) => rankPlotInfo.is_feasible[i]), colorscale: "Portland", colorbar: { title: "Rank", @@ -382,15 +382,29 @@ const plotRank = (rankPlotInfo: RankPlotInfo | null, mode: string) => { }, }, mode: "markers", + name: "Feasible Trial", showlegend: false, hovertemplate: "%{hovertext}", - hovertext: rankPlotInfo.hovertext, + hovertext: rankPlotInfo.hovertext.filter((_, i) => rankPlotInfo.is_feasible[i]), }, - ] - for (let i = 0; i < plotData.length; i++) { - if(rankPlotInfo.is_feasible[i] == false){ - plotData[i].marker.color = "#cccccc" + { + type: "scatter", + x: xValues.filter((_, i) => !rankPlotInfo.is_feasible[i]), + y: yValues.filter((_, i) => !rankPlotInfo.is_feasible[i]), + marker: { + color: "#cccccc", + size: 10, + line: { + color: "Grey", + width: 0.5, + }, + }, + mode: "markers", + name: "Infeasible Trial", + showlegend: false, + hovertemplate: "%{hovertext}", + hovertext: rankPlotInfo.hovertext.filter((_, i) => !rankPlotInfo.is_feasible[i]), } - } + ] plotly.react(plotDomId, plotData, layout) } From 9182fba762c3dc367d07b5fec555ef4dda1a50d5 Mon Sep 17 00:00:00 2001 From: Hiroki Takizawa Date: Thu, 9 Nov 2023 17:13:46 +0900 Subject: [PATCH 3/3] fix lint --- optuna_dashboard/ts/components/GraphRank.tsx | 16 ++++++++++------ 1 file changed, 10 insertions(+), 6 deletions(-) diff --git a/optuna_dashboard/ts/components/GraphRank.tsx b/optuna_dashboard/ts/components/GraphRank.tsx index 662135d2..6781793f 100644 --- a/optuna_dashboard/ts/components/GraphRank.tsx +++ b/optuna_dashboard/ts/components/GraphRank.tsx @@ -370,7 +370,9 @@ const plotRank = (rankPlotInfo: RankPlotInfo | null, mode: string) => { x: xValues.filter((_, i) => rankPlotInfo.is_feasible[i]), y: yValues.filter((_, i) => rankPlotInfo.is_feasible[i]), marker: { - color: rankPlotInfo.colors.filter((_, i) => rankPlotInfo.is_feasible[i]), + color: rankPlotInfo.colors.filter( + (_, i) => rankPlotInfo.is_feasible[i] + ), colorscale: "Portland", colorbar: { title: "Rank", @@ -382,10 +384,11 @@ const plotRank = (rankPlotInfo: RankPlotInfo | null, mode: string) => { }, }, mode: "markers", - name: "Feasible Trial", showlegend: false, hovertemplate: "%{hovertext}", - hovertext: rankPlotInfo.hovertext.filter((_, i) => rankPlotInfo.is_feasible[i]), + hovertext: rankPlotInfo.hovertext.filter( + (_, i) => rankPlotInfo.is_feasible[i] + ), }, { type: "scatter", @@ -400,11 +403,12 @@ const plotRank = (rankPlotInfo: RankPlotInfo | null, mode: string) => { }, }, mode: "markers", - name: "Infeasible Trial", showlegend: false, hovertemplate: "%{hovertext}", - hovertext: rankPlotInfo.hovertext.filter((_, i) => !rankPlotInfo.is_feasible[i]), - } + hovertext: rankPlotInfo.hovertext.filter( + (_, i) => !rankPlotInfo.is_feasible[i] + ), + }, ] plotly.react(plotDomId, plotData, layout) }