diff --git a/optuna_dashboard/ts/components/GraphEdf.tsx b/optuna_dashboard/ts/components/GraphEdf.tsx index db92bde3..0a341619 100644 --- a/optuna_dashboard/ts/components/GraphEdf.tsx +++ b/optuna_dashboard/ts/components/GraphEdf.tsx @@ -1,5 +1,5 @@ import * as plotly from "plotly.js-dist-min" -import React, { FC, useEffect } from "react" +import React, { FC, useEffect, useMemo } from "react" import { Grid, FormControl, @@ -15,6 +15,34 @@ import { plotlyDarkTemplate } from "./PlotlyDarkMode" import { Target, useFilteredTrials, useObjectiveTargets } from "../trialFilter" const plotDomId = "graph-edf" +const getPlotDomId = (objectiveId: number) => `graph-edf-${objectiveId}` + +export const GraphEdfBeta: FC<{ + study: StudyDetail | null + objectiveId: number +}> = ({ study, objectiveId }) => { + const theme = useTheme() + const domId = getPlotDomId(objectiveId) + const target = useMemo( + () => new Target("objective", objectiveId), + [objectiveId] + ) + const trials = useFilteredTrials(study, [target], false, false) + + useEffect(() => { + if (study !== null) { + plotEdf(trials, target, domId, theme.palette.mode) + } + }, [trials, target, domId, theme.palette.mode]) + return ( + + + {`EDF for ${target.toLabel(study?.objective_names)}`} + + + + ) +} export const GraphEdf: FC<{ study: StudyDetail | null @@ -29,7 +57,7 @@ export const GraphEdf: FC<{ useEffect(() => { if (study != null) { - plotEdf(trials, selected, theme.palette.mode) + plotEdf(trials, selected, plotDomId, theme.palette.mode) } }, [trials, selected, theme.palette.mode]) return ( @@ -67,12 +95,17 @@ export const GraphEdf: FC<{ ) } -const plotEdf = (trials: Trial[], target: Target, mode: string) => { - if (document.getElementById(plotDomId) === null) { +const plotEdf = ( + trials: Trial[], + target: Target, + domId: string, + mode: string +) => { + if (document.getElementById(domId) === null) { return } if (trials.length === 0) { - plotly.react(plotDomId, [], { + plotly.react(domId, [], { template: mode === "dark" ? plotlyDarkTemplate : {}, }) return @@ -117,5 +150,5 @@ const plotEdf = (trials: Trial[], target: Target, mode: string) => { y: yValues, }, ] - plotly.react(plotDomId, plotData, layout) + plotly.react(domId, plotData, layout) } diff --git a/optuna_dashboard/ts/components/StudyDetailBeta.tsx b/optuna_dashboard/ts/components/StudyDetailBeta.tsx index 6c753dc1..9e2f8f73 100644 --- a/optuna_dashboard/ts/components/StudyDetailBeta.tsx +++ b/optuna_dashboard/ts/components/StudyDetailBeta.tsx @@ -32,7 +32,7 @@ import { GraphSlice } from "./GraphSlice" import { GraphParetoFront } from "./GraphParetoFront" import { DataGrid, DataGridColumn } from "./DataGrid" import { GraphIntermediateValues } from "./GraphIntermediateValues" -import { GraphEdf } from "./GraphEdf" +import { GraphEdfBeta } from "./GraphEdf" import { TrialList } from "./TrialList" import { BestTrialsCard } from "./BestTrialsCard" @@ -173,11 +173,19 @@ export const StudyDetailBeta: FC<{ Empirical Distribution of the Objective Value - - - - - + + {studyDetail !== null + ? studyDetail.directions.map((d, i) => ( + + + + + + + + )) + : null} + ) } else if (page === "trialTable") {