From d18285abdab3fc689036ac5d7aeb64fa953a6be1 Mon Sep 17 00:00:00 2001 From: keisuke-umezawa Date: Wed, 21 Sep 2022 00:56:19 +0900 Subject: [PATCH 1/6] Align graph history --- .../ts/components/GraphHistory.tsx | 21 +++++++------------ 1 file changed, 8 insertions(+), 13 deletions(-) diff --git a/optuna_dashboard/ts/components/GraphHistory.tsx b/optuna_dashboard/ts/components/GraphHistory.tsx index eabaa8f1..25e1e539 100644 --- a/optuna_dashboard/ts/components/GraphHistory.tsx +++ b/optuna_dashboard/ts/components/GraphHistory.tsx @@ -228,24 +228,22 @@ const plotHistory = ( return } const trialsForLinePlot: Trial[] = [] - let currentBest: number | null = null + let currentBest: Trial | null = null filteredTrials.forEach((t) => { if (currentBest === null) { - currentBest = t.values![objectiveId] as number - trialsForLinePlot.push(t) + currentBest = t } else if ( study.directions[objectiveId] === "maximize" && - t.values![objectiveId] > currentBest + t.values![objectiveId] > currentBest.values![objectiveId] ) { - currentBest = t.values![objectiveId] as number - trialsForLinePlot.push(t) + currentBest = t } else if ( study.directions[objectiveId] === "minimize" && - t.values![objectiveId] < currentBest + t.values![objectiveId] < currentBest.values![objectiveId] ) { - currentBest = t.values![objectiveId] as number - trialsForLinePlot.push(t) + currentBest = t } + trialsForLinePlot.push(currentBest) }) const getAxisX = (trial: Trial): number | Date => { @@ -256,12 +254,9 @@ const plotHistory = ( : trial.datetime_complete! } - const xForLinePlot = trialsForLinePlot.map(getAxisX) - xForLinePlot.push(getAxisX(filteredTrials[filteredTrials.length - 1])) const yForLinePlot = trialsForLinePlot.map( (t: Trial): number => t.values![objectiveId] as number ) - yForLinePlot.push(yForLinePlot[yForLinePlot.length - 1]) const plotData: Partial[] = [ { @@ -273,7 +268,7 @@ const plotHistory = ( type: "scatter", }, { - x: xForLinePlot, + x: filteredTrials.map(getAxisX), y: yForLinePlot, mode: "lines", type: "scatter", From 71cdcb52c1ef784539da6aea0f5e3ac0040d3d4c Mon Sep 17 00:00:00 2001 From: keisuke-umezawa Date: Tue, 11 Oct 2022 22:57:34 +0900 Subject: [PATCH 2/6] Remove intermediate plots of best values --- .../ts/components/GraphHistory.tsx | 62 ++++++++++++------- 1 file changed, 39 insertions(+), 23 deletions(-) diff --git a/optuna_dashboard/ts/components/GraphHistory.tsx b/optuna_dashboard/ts/components/GraphHistory.tsx index 25e1e539..c15dfcde 100644 --- a/optuna_dashboard/ts/components/GraphHistory.tsx +++ b/optuna_dashboard/ts/components/GraphHistory.tsx @@ -227,24 +227,6 @@ const plotHistory = ( plotly.react(plotDomId, []) return } - const trialsForLinePlot: Trial[] = [] - let currentBest: Trial | null = null - filteredTrials.forEach((t) => { - if (currentBest === null) { - currentBest = t - } else if ( - study.directions[objectiveId] === "maximize" && - t.values![objectiveId] > currentBest.values![objectiveId] - ) { - currentBest = t - } else if ( - study.directions[objectiveId] === "minimize" && - t.values![objectiveId] < currentBest.values![objectiveId] - ) { - currentBest = t - } - trialsForLinePlot.push(currentBest) - }) const getAxisX = (trial: Trial): number | Date => { return xAxis === "number" @@ -254,9 +236,43 @@ const plotHistory = ( : trial.datetime_complete! } - const yForLinePlot = trialsForLinePlot.map( - (t: Trial): number => t.values![objectiveId] as number - ) + const xForLinePlot: number[] = [] + const yForLinePlot: number[] = [] + let currentBest: number | null = null + for (var i = 0; i < filteredTrials.length; i++) { + let t = filteredTrials[i] + if (currentBest === null) { + currentBest = t.values![objectiveId] as number + xForLinePlot.push(getAxisX(t)) + yForLinePlot.push(t.values![objectiveId] as number) + } else if ( + study.directions[objectiveId] === "maximize" && + t.values![objectiveId] > currentBest + ) { + let p = filteredTrials[i - 1] + if (!xForLinePlot.includes(getAxisX(p))) { + xForLinePlot.push(getAxisX(p)) + yForLinePlot.push(currentBest) + } + currentBest = t.values![objectiveId] as number + xForLinePlot.push(getAxisX(t)) + yForLinePlot.push(t.values![objectiveId] as number) + } else if ( + study.directions[objectiveId] === "minimize" && + t.values![objectiveId] < currentBest + ) { + let p = filteredTrials[i - 1] + if (!xForLinePlot.includes(getAxisX(p))) { + xForLinePlot.push(getAxisX(p)) + yForLinePlot.push(currentBest) + } + currentBest = t.values![objectiveId] as number + xForLinePlot.push(getAxisX(t)) + yForLinePlot.push(t.values![objectiveId] as number) + } + } + xForLinePlot.push(getAxisX(filteredTrials[filteredTrials.length - 1])) + yForLinePlot.push(yForLinePlot[yForLinePlot.length - 1]) const plotData: Partial[] = [ { @@ -268,11 +284,11 @@ const plotHistory = ( type: "scatter", }, { - x: filteredTrials.map(getAxisX), + x: xForLinePlot, y: yForLinePlot, - mode: "lines", type: "scatter", }, ] + console.log(plotData) plotly.react(plotDomId, plotData, layout) } From d5b0a47164effddf76de92ac3bf3a62e9415eb42 Mon Sep 17 00:00:00 2001 From: keisuke-umezawa Date: Tue, 11 Oct 2022 23:08:08 +0900 Subject: [PATCH 3/6] Follow linter --- optuna_dashboard/ts/components/GraphHistory.tsx | 9 ++++----- 1 file changed, 4 insertions(+), 5 deletions(-) diff --git a/optuna_dashboard/ts/components/GraphHistory.tsx b/optuna_dashboard/ts/components/GraphHistory.tsx index c15dfcde..3c510c38 100644 --- a/optuna_dashboard/ts/components/GraphHistory.tsx +++ b/optuna_dashboard/ts/components/GraphHistory.tsx @@ -239,8 +239,8 @@ const plotHistory = ( const xForLinePlot: number[] = [] const yForLinePlot: number[] = [] let currentBest: number | null = null - for (var i = 0; i < filteredTrials.length; i++) { - let t = filteredTrials[i] + for (let i = 0; i < filteredTrials.length; i++) { + const t = filteredTrials[i] if (currentBest === null) { currentBest = t.values![objectiveId] as number xForLinePlot.push(getAxisX(t)) @@ -249,7 +249,7 @@ const plotHistory = ( study.directions[objectiveId] === "maximize" && t.values![objectiveId] > currentBest ) { - let p = filteredTrials[i - 1] + const p = filteredTrials[i - 1] if (!xForLinePlot.includes(getAxisX(p))) { xForLinePlot.push(getAxisX(p)) yForLinePlot.push(currentBest) @@ -261,7 +261,7 @@ const plotHistory = ( study.directions[objectiveId] === "minimize" && t.values![objectiveId] < currentBest ) { - let p = filteredTrials[i - 1] + const p = filteredTrials[i - 1] if (!xForLinePlot.includes(getAxisX(p))) { xForLinePlot.push(getAxisX(p)) yForLinePlot.push(currentBest) @@ -289,6 +289,5 @@ const plotHistory = ( type: "scatter", }, ] - console.log(plotData) plotly.react(plotDomId, plotData, layout) } From 255b94b54e3012af073cf56519a6d35f73f9f27c Mon Sep 17 00:00:00 2001 From: keisuke-umezawa Date: Tue, 11 Oct 2022 23:14:48 +0900 Subject: [PATCH 4/6] Fix type definition --- optuna_dashboard/ts/components/GraphHistory.tsx | 2 +- 1 file changed, 1 insertion(+), 1 deletion(-) diff --git a/optuna_dashboard/ts/components/GraphHistory.tsx b/optuna_dashboard/ts/components/GraphHistory.tsx index 3c510c38..b4b1bcc4 100644 --- a/optuna_dashboard/ts/components/GraphHistory.tsx +++ b/optuna_dashboard/ts/components/GraphHistory.tsx @@ -236,7 +236,7 @@ const plotHistory = ( : trial.datetime_complete! } - const xForLinePlot: number[] = [] + const xForLinePlot: (number | Date)[] = [] const yForLinePlot: number[] = [] let currentBest: number | null = null for (let i = 0; i < filteredTrials.length; i++) { From 42dcfdb0ffc3fb6977eebe3d78ae47c126264040 Mon Sep 17 00:00:00 2001 From: keisuke-umezawa Date: Wed, 12 Oct 2022 23:24:18 +0900 Subject: [PATCH 5/6] Add labels and legend --- optuna_dashboard/ts/components/GraphHistory.tsx | 7 ++++++- 1 file changed, 6 insertions(+), 1 deletion(-) diff --git a/optuna_dashboard/ts/components/GraphHistory.tsx b/optuna_dashboard/ts/components/GraphHistory.tsx index b4b1bcc4..53a92c16 100644 --- a/optuna_dashboard/ts/components/GraphHistory.tsx +++ b/optuna_dashboard/ts/components/GraphHistory.tsx @@ -207,12 +207,14 @@ const plotHistory = ( b: 0, }, yaxis: { + title: "Objective Value", type: logScale ? "log" : "linear", }, xaxis: { + title: xAxis === "number" ? "Trial" : "Time", type: xAxis === "number" ? "linear" : "date", }, - showlegend: false, + showlegend: true, template: mode === "dark" ? plotlyDarkTemplate : {}, } @@ -280,12 +282,15 @@ const plotHistory = ( y: filteredTrials.map( (t: Trial): number => t.values![objectiveId] as number ), + name: "Objective Value", mode: "markers", type: "scatter", }, { x: xForLinePlot, y: yForLinePlot, + name: "Best Value", + mode :"lines", type: "scatter", }, ] From 431e303f34049071042dae9f6db25f001df04a7c Mon Sep 17 00:00:00 2001 From: keisuke-umezawa Date: Wed, 12 Oct 2022 23:28:27 +0900 Subject: [PATCH 6/6] Fix lint --- optuna_dashboard/ts/components/GraphHistory.tsx | 2 +- 1 file changed, 1 insertion(+), 1 deletion(-) diff --git a/optuna_dashboard/ts/components/GraphHistory.tsx b/optuna_dashboard/ts/components/GraphHistory.tsx index 53a92c16..1a2862ca 100644 --- a/optuna_dashboard/ts/components/GraphHistory.tsx +++ b/optuna_dashboard/ts/components/GraphHistory.tsx @@ -290,7 +290,7 @@ const plotHistory = ( x: xForLinePlot, y: yForLinePlot, name: "Best Value", - mode :"lines", + mode: "lines", type: "scatter", }, ]