From e00fb28b5a3d4368b72b05a7d7bf80eb407bcc3e Mon Sep 17 00:00:00 2001 From: Simon Hessner Date: Thu, 22 Apr 2021 11:38:09 +0100 Subject: [PATCH 1/6] Show label in Slice Graph on x axis --- optuna_dashboard/static/components/GraphSlice.tsx | 1 + 1 file changed, 1 insertion(+) diff --git a/optuna_dashboard/static/components/GraphSlice.tsx b/optuna_dashboard/static/components/GraphSlice.tsx index 03d7a0d5..d816b5b8 100644 --- a/optuna_dashboard/static/components/GraphSlice.tsx +++ b/optuna_dashboard/static/components/GraphSlice.tsx @@ -205,6 +205,7 @@ const plotSlice = ( }, tickvals: tickvals, ticktext: vocabArr, + automargin: true } plotly.react(plotDomId, trace, layout) } From 416218f8b33107b9c19485933379a09bfee66826 Mon Sep 17 00:00:00 2001 From: Simon Hessner Date: Thu, 22 Apr 2021 11:50:58 +0100 Subject: [PATCH 2/6] Add x axis label also for numerical types and prepare log scale feature --- .../static/components/GraphSlice.tsx | 17 ++++++++++++----- 1 file changed, 12 insertions(+), 5 deletions(-) diff --git a/optuna_dashboard/static/components/GraphSlice.tsx b/optuna_dashboard/static/components/GraphSlice.tsx index d816b5b8..58dcc33f 100644 --- a/optuna_dashboard/static/components/GraphSlice.tsx +++ b/optuna_dashboard/static/components/GraphSlice.tsx @@ -32,14 +32,15 @@ export const GraphSlice: FC<{ const trials: Trial[] = study !== null ? study.trials : [] const [objectiveId, setObjectiveId] = useState(0) const [selected, setSelected] = useState(null) + const [log, setLog] = useState(false) const paramNames = study?.union_search_space.map((s) => s.name) if (selected === null && paramNames && paramNames.length > 0) { setSelected(paramNames[0]) } useEffect(() => { - plotSlice(trials, objectiveId, selected) - }, [trials, objectiveId, selected]) + plotSlice(trials, objectiveId, selected, log) + }, [trials, objectiveId, selected, log]) const handleObjectiveChange = ( event: React.ChangeEvent<{ value: unknown }> @@ -92,7 +93,8 @@ export const GraphSlice: FC<{ const plotSlice = ( trials: Trial[], objectiveId: number, - selected: string | null + selected: string | null, + log: boolean ) => { if (document.getElementById(plotDomId) === null) { return @@ -116,6 +118,7 @@ const plotSlice = ( }, yaxis: { title: "Objective Values", + type: log ? "log" : "linear", zerolinecolor: "#f2f5fa", zerolinewidth: 2, linecolor: "#f2f5fa", @@ -171,6 +174,10 @@ const plotSlice = ( linewidth: 5, gridcolor: "#f2f5fa", gridwidth: 1, + tickfont: { + "color": "#000000" + }, + automargin: true // Otherwise the label is outside of the plot } plotly.react(plotDomId, trace, layout) } else { @@ -189,7 +196,7 @@ const plotSlice = ( // xaxis: paramName, marker: { color: "#185799", - }, + } }, ] layout["xaxis"] = { @@ -205,7 +212,7 @@ const plotSlice = ( }, tickvals: tickvals, ticktext: vocabArr, - automargin: true + automargin: true // Otherwise the label is outside of the plot } plotly.react(plotDomId, trace, layout) } From a72f556d110d9bdfe7bce3ae745ae73283a0faa0 Mon Sep 17 00:00:00 2001 From: Simon Hessner Date: Thu, 22 Apr 2021 12:04:14 +0100 Subject: [PATCH 3/6] Add option for log scale in slice graph --- .../static/components/GraphSlice.tsx | 20 ++++++++++++++++--- 1 file changed, 17 insertions(+), 3 deletions(-) diff --git a/optuna_dashboard/static/components/GraphSlice.tsx b/optuna_dashboard/static/components/GraphSlice.tsx index 58dcc33f..92c1a136 100644 --- a/optuna_dashboard/static/components/GraphSlice.tsx +++ b/optuna_dashboard/static/components/GraphSlice.tsx @@ -6,6 +6,7 @@ import { FormLabel, InputLabel, MenuItem, + Switch, Select, Typography, } from "@material-ui/core" @@ -32,15 +33,15 @@ export const GraphSlice: FC<{ const trials: Trial[] = study !== null ? study.trials : [] const [objectiveId, setObjectiveId] = useState(0) const [selected, setSelected] = useState(null) - const [log, setLog] = useState(false) + const [logScale, setLogScale] = useState(false) const paramNames = study?.union_search_space.map((s) => s.name) if (selected === null && paramNames && paramNames.length > 0) { setSelected(paramNames[0]) } useEffect(() => { - plotSlice(trials, objectiveId, selected, log) - }, [trials, objectiveId, selected, log]) + plotSlice(trials, objectiveId, selected, logScale) + }, [trials, objectiveId, selected, logScale]) const handleObjectiveChange = ( event: React.ChangeEvent<{ value: unknown }> @@ -52,6 +53,11 @@ export const GraphSlice: FC<{ setSelected(e.target.value as string) } + const handleLogScaleChange = (e: ChangeEvent) => { + e.preventDefault() + setLogScale(!logScale) + } + return ( @@ -81,6 +87,14 @@ export const GraphSlice: FC<{ ))} + + Log scale: + + From ff73aaa68920025d4d97eefd5db57df28e95589f Mon Sep 17 00:00:00 2001 From: Simon Hessner Date: Thu, 22 Apr 2021 12:10:59 +0100 Subject: [PATCH 4/6] Rename log to logScale --- optuna_dashboard/static/components/GraphSlice.tsx | 4 ++-- 1 file changed, 2 insertions(+), 2 deletions(-) diff --git a/optuna_dashboard/static/components/GraphSlice.tsx b/optuna_dashboard/static/components/GraphSlice.tsx index 92c1a136..e7755aba 100644 --- a/optuna_dashboard/static/components/GraphSlice.tsx +++ b/optuna_dashboard/static/components/GraphSlice.tsx @@ -108,7 +108,7 @@ const plotSlice = ( trials: Trial[], objectiveId: number, selected: string | null, - log: boolean + logScale: boolean ) => { if (document.getElementById(plotDomId) === null) { return @@ -132,7 +132,7 @@ const plotSlice = ( }, yaxis: { title: "Objective Values", - type: log ? "log" : "linear", + type: logScale ? "log" : "linear", zerolinecolor: "#f2f5fa", zerolinewidth: 2, linecolor: "#f2f5fa", From cd44cfa05257465608d751c1ca8842f1fd1a4f5d Mon Sep 17 00:00:00 2001 From: Simon Hessner Date: Thu, 22 Apr 2021 12:28:13 +0100 Subject: [PATCH 5/6] Lint --- optuna_dashboard/static/components/GraphSlice.tsx | 8 ++++---- 1 file changed, 4 insertions(+), 4 deletions(-) diff --git a/optuna_dashboard/static/components/GraphSlice.tsx b/optuna_dashboard/static/components/GraphSlice.tsx index e7755aba..32349b79 100644 --- a/optuna_dashboard/static/components/GraphSlice.tsx +++ b/optuna_dashboard/static/components/GraphSlice.tsx @@ -189,9 +189,9 @@ const plotSlice = ( gridcolor: "#f2f5fa", gridwidth: 1, tickfont: { - "color": "#000000" + color: "#000000", }, - automargin: true // Otherwise the label is outside of the plot + automargin: true, // Otherwise the label is outside of the plot } plotly.react(plotDomId, trace, layout) } else { @@ -210,7 +210,7 @@ const plotSlice = ( // xaxis: paramName, marker: { color: "#185799", - } + }, }, ] layout["xaxis"] = { @@ -226,7 +226,7 @@ const plotSlice = ( }, tickvals: tickvals, ticktext: vocabArr, - automargin: true // Otherwise the label is outside of the plot + automargin: true, // Otherwise the label is outside of the plot } plotly.react(plotDomId, trace, layout) } From 496a4f6371de26e08d3e70cbb6767f74b8a1662e Mon Sep 17 00:00:00 2001 From: Simon Hessner Date: Thu, 22 Apr 2021 16:24:35 +0100 Subject: [PATCH 6/6] Fix bug mentioned in comments of PR #90 --- optuna_dashboard/static/components/GraphSlice.tsx | 4 ++-- 1 file changed, 2 insertions(+), 2 deletions(-) diff --git a/optuna_dashboard/static/components/GraphSlice.tsx b/optuna_dashboard/static/components/GraphSlice.tsx index 32349b79..188826a8 100644 --- a/optuna_dashboard/static/components/GraphSlice.tsx +++ b/optuna_dashboard/static/components/GraphSlice.tsx @@ -129,6 +129,7 @@ const plotSlice = ( linewidth: 5, gridcolor: "#f2f5fa", gridwidth: 1, + automargin: true, }, yaxis: { title: "Objective Values", @@ -139,6 +140,7 @@ const plotSlice = ( linewidth: 5, gridcolor: "#f2f5fa", gridwidth: 1, + automargin: true, }, plot_bgcolor: "#E5ecf6", showlegend: false, @@ -174,7 +176,6 @@ const plotSlice = ( x: valuesNum, y: objectiveValues, mode: "markers", - xaxis: selected, marker: { color: "#185799", }, @@ -207,7 +208,6 @@ const plotSlice = ( x: valuesCategorical, y: objectiveValues, mode: "markers", - // xaxis: paramName, marker: { color: "#185799", },