From 8bb63f6a7ea7d4e807906153f48daaeace488555 Mon Sep 17 00:00:00 2001 From: c-bata Date: Sat, 7 Jan 2023 14:57:15 +0900 Subject: [PATCH] Refactor Parallel Coordinate --- .../ts/components/GraphParallelCoordinate.tsx | 90 ++++++++++--------- optuna_dashboard/ts/components/GraphSlice.tsx | 15 +++- 2 files changed, 60 insertions(+), 45 deletions(-) diff --git a/optuna_dashboard/ts/components/GraphParallelCoordinate.tsx b/optuna_dashboard/ts/components/GraphParallelCoordinate.tsx index 7347f42e..976bb218 100644 --- a/optuna_dashboard/ts/components/GraphParallelCoordinate.tsx +++ b/optuna_dashboard/ts/components/GraphParallelCoordinate.tsx @@ -1,5 +1,5 @@ import * as plotly from "plotly.js-dist-min" -import React, { FC, useEffect, useState } from "react" +import React, { FC, useEffect, useMemo } from "react" import { Grid, FormControl, @@ -12,6 +12,11 @@ import { Box, } from "@mui/material" import { plotlyDarkTemplate } from "./PlotlyDarkMode" +import { + Target, + useFilteredTrials, + useObjectiveAndSystemAttrTargets, +} from "../trialFilter" const plotDomId = "graph-parallel-coordinate" @@ -19,18 +24,29 @@ export const GraphParallelCoordinate: FC<{ study: StudyDetail | null }> = ({ study = null }) => { const theme = useTheme() - const [objectiveId, setObjectiveId] = useState(0) - const objectiveNames: string[] = study?.objective_names || [] + const [targets, selected, setTarget] = useObjectiveAndSystemAttrTargets(study) + const filterTargets = useMemo( + () => [ + ...(study !== null + ? study.intersection_search_space.map( + (s) => new Target("params", s.name) + ) + : []), + ...(selected !== null ? [selected] : []), + ], + [study?.intersection_search_space, selected] + ) + const trials = useFilteredTrials(study, filterTargets, false, false) - const handleObjectiveChange = (event: SelectChangeEvent) => { - setObjectiveId(event.target.value as number) + const handleObjectiveChange = (event: SelectChangeEvent) => { + setTarget(event.target.value) } useEffect(() => { if (study !== null) { - plotCoordinate(study, objectiveId, theme.palette.mode) + plotCoordinate(study, trials, selected, theme.palette.mode) } - }, [study, objectiveId, theme.palette.mode]) + }, [study, trials, selected, theme.palette.mode]) return ( @@ -44,15 +60,16 @@ export const GraphParallelCoordinate: FC<{ Parallel Coordinate - {study !== null && study.directions.length !== 1 ? ( + {study !== null && targets.length >= 2 ? ( - Objective ID: - + {targets.map((t, i) => ( + + {t.toLabel(study.objective_names)} ))} @@ -66,23 +83,10 @@ export const GraphParallelCoordinate: FC<{ ) } -const filterFunc = (trial: Trial, objectiveId: number): boolean => { - if (trial.state !== "Complete" && trial.state !== "Pruned") { - return false - } - if (trial.values === undefined) { - return false - } - return ( - trial.values.length > objectiveId && - trial.values[objectiveId] !== "inf" && - trial.values[objectiveId] !== "-inf" - ) -} - const plotCoordinate = ( study: StudyDetail, - objectiveId: number, + trials: Trial[], + target: Target | null, mode: string ) => { if (document.getElementById(plotDomId) === null) { @@ -98,14 +102,11 @@ const plotCoordinate = ( }, template: mode === "dark" ? plotlyDarkTemplate : {}, } - - if (study.trials.length === 0) { + if (trials.length === 0 || target === null) { plotly.react(plotDomId, [], layout) return } - const filteredTrials = study.trials.filter((t) => filterFunc(t, objectiveId)) - const maxLabelLength = 40 const breakLength = maxLabelLength / 2 const ellipsis = "…" @@ -125,25 +126,25 @@ const plotCoordinate = ( } // Intersection param names - const objectiveValues: number[] = filteredTrials.map( - (t) => t.values![objectiveId] as number + const objectiveValues: number[] = trials.map( + (t) => target.getTargetValue(t) as number ) const dimensions = [ { - label: "Objective value", + label: target.toLabel(study.objective_names), values: objectiveValues, range: [Math.min(...objectiveValues), Math.max(...objectiveValues)], }, ] study.intersection_search_space.forEach((s) => { - const values: number[] = filteredTrials.map( + const values: number[] = trials.map( (t) => t.params.find((p) => p.name === s.name)!.param_internal_value ) if (s.distribution.type !== "CategoricalDistribution") { dimensions.push({ label: breakLabelIfTooLong(s.name), values: values, - range: [Math.min(...values), Math.max(...values)], + range: [s.distribution.low, s.distribution.high], }) } else { // categorical @@ -152,13 +153,18 @@ const plotCoordinate = ( dimensions.push({ label: breakLabelIfTooLong(s.name), values: values, - range: [Math.min(...values), Math.max(...values)], + range: [0, s.distribution.choices.length - 1], // @ts-ignore tickvals: tickvals, ticktext: vocabArr, }) } }) + const objectiveId = target.getObjectiveId() + const reversescale = + objectiveId !== null && study.directions.length > objectiveId + ? study.directions[objectiveId] === "maximize" + : "minimize" const plotData: Partial[] = [ { type: "parcoords", @@ -170,10 +176,10 @@ const plotCoordinate = ( // @ts-ignore colorscale: "Blues", colorbar: { - title: "Objective value", + title: target.toLabel(study.objective_names), }, showscale: true, - reversescale: study.directions[objectiveId] === "maximize", + reversescale: reversescale, }, }, ] diff --git a/optuna_dashboard/ts/components/GraphSlice.tsx b/optuna_dashboard/ts/components/GraphSlice.tsx index 10dae613..3afd0aa6 100644 --- a/optuna_dashboard/ts/components/GraphSlice.tsx +++ b/optuna_dashboard/ts/components/GraphSlice.tsx @@ -160,7 +160,10 @@ const plotSlice = ( }, xaxis: { title: selectedParamTarget?.toLabel() || "", - type: selectedParamSpace !== null && isLogScale(selectedParamSpace) ? "log" : "linear", + type: + selectedParamSpace !== null && isLogScale(selectedParamSpace) + ? "log" + : "linear", gridwidth: 1, automargin: true, }, @@ -173,7 +176,11 @@ const plotSlice = ( showlegend: false, template: mode === "dark" ? plotlyDarkTemplate : {}, } - if (selectedParamSpace === null || selectedParamTarget === null || trials.length === 0) { + if ( + selectedParamSpace === null || + selectedParamTarget === null || + trials.length === 0 + ) { plotly.react(plotDomId, [], layout) return } @@ -181,7 +188,9 @@ const plotSlice = ( const objectiveValues: number[] = trials.map( (t) => objectiveTarget.getTargetValue(t) as number ) - const values = trials.map((t) => selectedParamTarget.getTargetValue(t) as number) + const values = trials.map( + (t) => selectedParamTarget.getTargetValue(t) as number + ) const trialNumbers: number[] = trials.map((t) => t.number) if (selectedParamSpace.distribution.type !== "CategoricalDistribution") {