diff --git a/optuna_dashboard/static/components/GraphContour.tsx b/optuna_dashboard/static/components/GraphContour.tsx index f8c6426c..8e92bfce 100644 --- a/optuna_dashboard/static/components/GraphContour.tsx +++ b/optuna_dashboard/static/components/GraphContour.tsx @@ -36,12 +36,12 @@ export const GraphContour: FC<{ (t) => t.state === "Complete" || t.state === "Pruned" ) - const paramArray = getParamNames(filteredTrials) + const paramNames = getParamNames(filteredTrials) const classes = useStyles() const [objectiveId, setObjectiveId] = useState(0) - const [xAxis, setXAxis] = useState(paramArray[0]) - const [yAxis, setYAxis] = useState(paramArray[1]) + const [xAxis, setXAxis] = useState(paramNames[0]) + const [yAxis, setYAxis] = useState(paramNames[1]) const handleObjectiveChange = ( event: React.ChangeEvent<{ value: unknown }> @@ -59,9 +59,9 @@ export const GraphContour: FC<{ useEffect(() => { if (study !== null) { - plotContour(study, objectiveId, xAxis, yAxis) + plotContour(study, objectiveId, xAxis, yAxis, paramNames) } - }, [study, objectiveId, xAxis, yAxis]) + }, [study, objectiveId, xAxis, yAxis, paramNames]) return ( @@ -82,7 +82,7 @@ export const GraphContour: FC<{ X Axis Parameter - {paramArray.map((x) => ( + {paramNames.map((x) => ( {x} @@ -112,7 +112,8 @@ const plotContour = ( study: StudyDetail, objectiveId: number, xAxis: string, - yAxis: string + yAxis: string, + paramNames: string[] ) => { if (document.getElementById(plotDomId) === null) { return @@ -141,15 +142,13 @@ const plotContour = ( const trials: Trial[] = study !== null ? study.trials : [] - if (trials.length === 0) { - plotly.react(plotDomId, [], layout) - } - const filteredTrials = trials.filter( (t) => t.state === "Complete" || t.state === "Pruned" ) - const paramNames = getParamNames(filteredTrials) + if (filteredTrials.length === 0) { + plotly.react(plotDomId, [], layout) + } if (paramNames.length === 0 || paramNames.length === 1) { plotly.react(plotDomId, [], layout)