diff --git a/optuna_dashboard/ts/components/GraphContour.tsx b/optuna_dashboard/ts/components/GraphContour.tsx index 929d5bcb..75b88fc5 100644 --- a/optuna_dashboard/ts/components/GraphContour.tsx +++ b/optuna_dashboard/ts/components/GraphContour.tsx @@ -8,14 +8,18 @@ import { Select, SelectChangeEvent, Stack, - CircularProgress, Typography, useTheme, } from "@mui/material" import blue from "@mui/material/colors/blue" import * as plotly from "plotly.js-dist-min" import React, { FC, useEffect, useMemo, useState } from "react" -import { GraphComponentState, SearchSpaceItem, StudyDetail, Trial } from "ts/types/optuna" +import { + GraphComponentState, + SearchSpaceItem, + StudyDetail, + Trial, +} from "ts/types/optuna" import { PlotType } from "../apiClient" import { getAxisInfo } from "../graphUtil" import { usePlot } from "../hooks/usePlot" @@ -85,6 +89,12 @@ const DisabledContour: FC<{ const ContourBackend: FC<{ study: StudyDetail | null }> = ({ study = null }) => { + const [graphComponentState, setGraphComponentState] = + useState("componentWillMount") + useEffect(() => { + setGraphComponentState("componentDidMount") + }, []) + const studyId = study?.id const numCompletedTrials = study?.trials.filter((t) => t.state === "Complete").length || 0 @@ -95,10 +105,12 @@ const ContourBackend: FC<{ }) useEffect(() => { - if (data && layout) { - plotly.react(plotDomId, data, layout) + if (data && layout && graphComponentState !== "componentWillMount") { + plotly.react(plotDomId, data, layout).then(() => { + setGraphComponentState("graphDidRender") + }) } - }, [data, layout]) + }, [data, layout, graphComponentState]) useEffect(() => { if (error) { console.error(error) @@ -146,10 +158,7 @@ const ContourFrontend: FC<{ } useEffect(() => { - if ( - study != null && - graphComponentState !== "componentWillMount" - ) { + if (study != null && graphComponentState !== "componentWillMount") { plotContour(study, objectiveId, xParam, yParam, colorTheme)?.then(() => { setGraphComponentState("graphDidRender") }) @@ -213,21 +222,7 @@ const ContourFrontend: FC<{ ) : null} - - {graphComponentState !== "graphDidRender" && ( - - - - )} - + ) diff --git a/optuna_dashboard/ts/types/optuna.ts b/optuna_dashboard/ts/types/optuna.ts index c2ad253c..8ad2e50e 100644 --- a/optuna_dashboard/ts/types/optuna.ts +++ b/optuna_dashboard/ts/types/optuna.ts @@ -197,4 +197,7 @@ export type PlotlyColorTheme = { light: PlotlyColorThemeLight } -export type GraphComponentState = "componentWillMount" | "componentDidMount" | "graphDidRender" \ No newline at end of file +export type GraphComponentState = + | "componentWillMount" + | "componentDidMount" + | "graphDidRender"