From 5d74323c213f235e363e9772ef668a32f7a5a250 Mon Sep 17 00:00:00 2001 From: porink0424 Date: Wed, 17 Apr 2024 19:07:21 +0900 Subject: [PATCH 01/14] Impl lazy loading for GraphContour --- .../ts/components/GraphContour.tsx | 44 ++++++++++++++----- optuna_dashboard/ts/constants/graph.ts | 7 +++ 2 files changed, 40 insertions(+), 11 deletions(-) create mode 100644 optuna_dashboard/ts/constants/graph.ts diff --git a/optuna_dashboard/ts/components/GraphContour.tsx b/optuna_dashboard/ts/components/GraphContour.tsx index 3d2d1a4c..31af15f5 100644 --- a/optuna_dashboard/ts/components/GraphContour.tsx +++ b/optuna_dashboard/ts/components/GraphContour.tsx @@ -12,6 +12,7 @@ import { Box, Stack, Link, + CircularProgress, } from "@mui/material" import blue from "@mui/material/colors/blue" import { useMergedUnionSearchSpace } from "../searchSpace" @@ -21,6 +22,7 @@ import { PlotType } from "../apiClient" import { useBackendRender } from "../state" import { usePlot } from "../hooks/usePlot" import { SearchSpaceItem, StudyDetail, Trial } from "ts/types/optuna" +import { GRAPH_COMPONENT_STATE, GraphComponentState } from "../constants/graph" const plotDomId = "graph-contour" const CONTOUR_DISABLED_THRESHOLD = 100 @@ -110,6 +112,11 @@ const ContourBackend: FC<{ const ContourFrontend: FC<{ study: StudyDetail | null }> = ({ study = null }) => { + const [graphComponentState, setGraphComponentState] = useState(GRAPH_COMPONENT_STATE.COMPONENT_WILL_MOUNT) + useEffect(() => { + setGraphComponentState(GRAPH_COMPONENT_STATE.COMPONENT_DID_MOUNT) + }, []) + const theme = useTheme() const colorTheme = usePlotlyColorTheme(theme.palette.mode) @@ -139,10 +146,12 @@ const ContourFrontend: FC<{ } useEffect(() => { - if (study != null) { - plotContour(study, objectiveId, xParam, yParam, colorTheme) + if (study != null && graphComponentState !== GRAPH_COMPONENT_STATE.COMPONENT_WILL_MOUNT) { + plotContour(study, objectiveId, xParam, yParam, colorTheme)?.then(() => { + setGraphComponentState(GRAPH_COMPONENT_STATE.GRAPH_DID_RENDER) + }) } - }, [study, objectiveId, xParam, yParam, colorTheme]) + }, [study, objectiveId, xParam, yParam, colorTheme, graphComponentState]) const space: SearchSpaceItem[] = study ? study.union_search_space : [] @@ -201,7 +210,23 @@ const ContourFrontend: FC<{ ) : null} - + + { + graphComponentState !== GRAPH_COMPONENT_STATE.GRAPH_DID_RENDER && ( + + + + ) + } + ) @@ -225,10 +250,9 @@ const plotContour = ( const trials: Trial[] = study ? study.trials : [] const filteredTrials = trials.filter((t) => filterFunc(t)) if (filteredTrials.length < 2 || xParam === null || yParam === null) { - plotly.react(plotDomId, [], { + return plotly.react(plotDomId, [], { template: colorTheme, }) - return } const xAxis = getAxisInfo(trials, xParam) @@ -257,8 +281,7 @@ const plotContour = ( // TODO(c-bata): Support parameters that only have the single value if (xIndices.length <= 1 || yIndices.length <= 1) { - plotly.react(plotDomId, [], layout) - return + return plotly.react(plotDomId, [], layout) } const xValues: plotly.Datum[] = [] @@ -322,8 +345,7 @@ const plotContour = ( showlegend: false, }, ] - plotly.react(plotDomId, plotData, layout) - return + return plotly.react(plotDomId, plotData, layout) } layout.legend = { @@ -351,5 +373,5 @@ const plotContour = ( mode: "markers", }, ] - plotly.react(plotDomId, plotData, layout) + return plotly.react(plotDomId, plotData, layout) } diff --git a/optuna_dashboard/ts/constants/graph.ts b/optuna_dashboard/ts/constants/graph.ts new file mode 100644 index 00000000..9ade0456 --- /dev/null +++ b/optuna_dashboard/ts/constants/graph.ts @@ -0,0 +1,7 @@ +export const GRAPH_COMPONENT_STATE = { + COMPONENT_WILL_MOUNT: 'componentWillMount', + COMPONENT_DID_MOUNT: 'componentDidMount', + GRAPH_DID_RENDER: 'graphDidRender', +} as const; + +export type GraphComponentState = typeof GRAPH_COMPONENT_STATE[keyof typeof GRAPH_COMPONENT_STATE]; \ No newline at end of file From 99ab2cbafff2d9f4d3555c7beed7e21e71966d5e Mon Sep 17 00:00:00 2001 From: porink0424 Date: Wed, 17 Apr 2024 19:08:00 +0900 Subject: [PATCH 02/14] Apply formatter --- .../ts/components/GraphContour.tsx | 38 ++++++++++--------- optuna_dashboard/ts/constants/graph.ts | 11 +++--- 2 files changed, 26 insertions(+), 23 deletions(-) diff --git a/optuna_dashboard/ts/components/GraphContour.tsx b/optuna_dashboard/ts/components/GraphContour.tsx index 31af15f5..572cc25f 100644 --- a/optuna_dashboard/ts/components/GraphContour.tsx +++ b/optuna_dashboard/ts/components/GraphContour.tsx @@ -112,7 +112,8 @@ const ContourBackend: FC<{ const ContourFrontend: FC<{ study: StudyDetail | null }> = ({ study = null }) => { - const [graphComponentState, setGraphComponentState] = useState(GRAPH_COMPONENT_STATE.COMPONENT_WILL_MOUNT) + const [graphComponentState, setGraphComponentState] = + useState(GRAPH_COMPONENT_STATE.COMPONENT_WILL_MOUNT) useEffect(() => { setGraphComponentState(GRAPH_COMPONENT_STATE.COMPONENT_DID_MOUNT) }, []) @@ -146,7 +147,10 @@ const ContourFrontend: FC<{ } useEffect(() => { - if (study != null && graphComponentState !== GRAPH_COMPONENT_STATE.COMPONENT_WILL_MOUNT) { + if ( + study != null && + graphComponentState !== GRAPH_COMPONENT_STATE.COMPONENT_WILL_MOUNT + ) { plotContour(study, objectiveId, xParam, yParam, colorTheme)?.then(() => { setGraphComponentState(GRAPH_COMPONENT_STATE.GRAPH_DID_RENDER) }) @@ -210,22 +214,20 @@ const ContourFrontend: FC<{ ) : null} - - { - graphComponentState !== GRAPH_COMPONENT_STATE.GRAPH_DID_RENDER && ( - - - - ) - } + + {graphComponentState !== GRAPH_COMPONENT_STATE.GRAPH_DID_RENDER && ( + + + + )} diff --git a/optuna_dashboard/ts/constants/graph.ts b/optuna_dashboard/ts/constants/graph.ts index 9ade0456..0f9b391e 100644 --- a/optuna_dashboard/ts/constants/graph.ts +++ b/optuna_dashboard/ts/constants/graph.ts @@ -1,7 +1,8 @@ export const GRAPH_COMPONENT_STATE = { - COMPONENT_WILL_MOUNT: 'componentWillMount', - COMPONENT_DID_MOUNT: 'componentDidMount', - GRAPH_DID_RENDER: 'graphDidRender', -} as const; + COMPONENT_WILL_MOUNT: "componentWillMount", + COMPONENT_DID_MOUNT: "componentDidMount", + GRAPH_DID_RENDER: "graphDidRender", +} as const -export type GraphComponentState = typeof GRAPH_COMPONENT_STATE[keyof typeof GRAPH_COMPONENT_STATE]; \ No newline at end of file +export type GraphComponentState = + (typeof GRAPH_COMPONENT_STATE)[keyof typeof GRAPH_COMPONENT_STATE] From 8e5c46f542f8ee259ec6bf8bc88353dac610b143 Mon Sep 17 00:00:00 2001 From: porink0424 Date: Fri, 19 Apr 2024 17:52:43 +0900 Subject: [PATCH 03/14] Simplify the type --- optuna_dashboard/ts/components/GraphContour.tsx | 13 ++++++------- optuna_dashboard/ts/constants/graph.ts | 8 -------- optuna_dashboard/ts/types/optuna.ts | 2 ++ 3 files changed, 8 insertions(+), 15 deletions(-) delete mode 100644 optuna_dashboard/ts/constants/graph.ts diff --git a/optuna_dashboard/ts/components/GraphContour.tsx b/optuna_dashboard/ts/components/GraphContour.tsx index 613c87a9..929d5bcb 100644 --- a/optuna_dashboard/ts/components/GraphContour.tsx +++ b/optuna_dashboard/ts/components/GraphContour.tsx @@ -15,14 +15,13 @@ import { import blue from "@mui/material/colors/blue" import * as plotly from "plotly.js-dist-min" import React, { FC, useEffect, useMemo, useState } from "react" -import { 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" import { useMergedUnionSearchSpace } from "../searchSpace" import { usePlotlyColorTheme } from "../state" import { useBackendRender } from "../state" -import { GRAPH_COMPONENT_STATE, GraphComponentState } from "../constants/graph" const plotDomId = "graph-contour" const CONTOUR_DISABLED_THRESHOLD = 100 @@ -113,9 +112,9 @@ const ContourFrontend: FC<{ study: StudyDetail | null }> = ({ study = null }) => { const [graphComponentState, setGraphComponentState] = - useState(GRAPH_COMPONENT_STATE.COMPONENT_WILL_MOUNT) + useState("componentWillMount") useEffect(() => { - setGraphComponentState(GRAPH_COMPONENT_STATE.COMPONENT_DID_MOUNT) + setGraphComponentState("componentDidMount") }, []) const theme = useTheme() @@ -149,10 +148,10 @@ const ContourFrontend: FC<{ useEffect(() => { if ( study != null && - graphComponentState !== GRAPH_COMPONENT_STATE.COMPONENT_WILL_MOUNT + graphComponentState !== "componentWillMount" ) { plotContour(study, objectiveId, xParam, yParam, colorTheme)?.then(() => { - setGraphComponentState(GRAPH_COMPONENT_STATE.GRAPH_DID_RENDER) + setGraphComponentState("graphDidRender") }) } }, [study, objectiveId, xParam, yParam, colorTheme, graphComponentState]) @@ -215,7 +214,7 @@ const ContourFrontend: FC<{ - {graphComponentState !== GRAPH_COMPONENT_STATE.GRAPH_DID_RENDER && ( + {graphComponentState !== "graphDidRender" && ( Date: Fri, 19 Apr 2024 18:06:49 +0900 Subject: [PATCH 04/14] Impl lazy loading for GraphContour Backend as well --- .../ts/components/GraphContour.tsx | 43 ++++++++----------- optuna_dashboard/ts/types/optuna.ts | 5 ++- 2 files changed, 23 insertions(+), 25 deletions(-) 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" From 4579c0ef51a5e0e6057b54f8d400fa967f60de7a Mon Sep 17 00:00:00 2001 From: porink0424 Date: Fri, 19 Apr 2024 18:22:04 +0900 Subject: [PATCH 05/14] Impl GraphContainer for common use --- .../ts/components/GraphContainer.tsx | 32 +++++++++++++++++++ .../ts/components/GraphContour.tsx | 13 ++++++-- 2 files changed, 43 insertions(+), 2 deletions(-) create mode 100644 optuna_dashboard/ts/components/GraphContainer.tsx diff --git a/optuna_dashboard/ts/components/GraphContainer.tsx b/optuna_dashboard/ts/components/GraphContainer.tsx new file mode 100644 index 00000000..c3a0ae65 --- /dev/null +++ b/optuna_dashboard/ts/components/GraphContainer.tsx @@ -0,0 +1,32 @@ +import { Box, Typography, useTheme } from "@mui/material" +import React from "react" +import { GraphComponentState } from "ts/types/optuna" + +function GraphContainer({ + plotDomId, + graphComponentState, +}: { + plotDomId: string + graphComponentState: GraphComponentState +}) { + const theme = useTheme() + return ( + + {graphComponentState !== "graphDidRender" && ( + + Loading... + + )} + + ) +} + +export default GraphContainer diff --git a/optuna_dashboard/ts/components/GraphContour.tsx b/optuna_dashboard/ts/components/GraphContour.tsx index 75b88fc5..d1123111 100644 --- a/optuna_dashboard/ts/components/GraphContour.tsx +++ b/optuna_dashboard/ts/components/GraphContour.tsx @@ -26,6 +26,7 @@ import { usePlot } from "../hooks/usePlot" import { useMergedUnionSearchSpace } from "../searchSpace" import { usePlotlyColorTheme } from "../state" import { useBackendRender } from "../state" +import GraphContainer from "./GraphContainer" const plotDomId = "graph-contour" const CONTOUR_DISABLED_THRESHOLD = 100 @@ -117,7 +118,12 @@ const ContourBackend: FC<{ } }, [error]) - return + return ( + + ) } const ContourFrontend: FC<{ @@ -222,7 +228,10 @@ const ContourFrontend: FC<{ ) : null} - + ) From d916fdbabd9e36239bcde480a440e7444feccf82 Mon Sep 17 00:00:00 2001 From: porink0424 Date: Fri, 19 Apr 2024 18:36:56 +0900 Subject: [PATCH 06/14] Impl lazy loading for GraphSlice --- optuna_dashboard/ts/components/GraphSlice.tsx | 67 ++++++++++++++----- 1 file changed, 49 insertions(+), 18 deletions(-) diff --git a/optuna_dashboard/ts/components/GraphSlice.tsx b/optuna_dashboard/ts/components/GraphSlice.tsx index 58576be4..d208395e 100644 --- a/optuna_dashboard/ts/components/GraphSlice.tsx +++ b/optuna_dashboard/ts/components/GraphSlice.tsx @@ -1,5 +1,4 @@ import { - Box, FormControl, FormLabel, Grid, @@ -12,7 +11,12 @@ import { } from "@mui/material" import * as plotly from "plotly.js-dist-min" import React, { FC, useEffect, useState } from "react" -import { SearchSpaceItem, StudyDetail, Trial } from "ts/types/optuna" +import { + GraphComponentState, + SearchSpaceItem, + StudyDetail, + Trial, +} from "ts/types/optuna" import { PlotType } from "../apiClient" import { usePlot } from "../hooks/usePlot" import { useMergedUnionSearchSpace } from "../searchSpace" @@ -23,6 +27,7 @@ import { useObjectiveAndUserAttrTargets, useParamTargets, } from "../trialFilter" +import GraphContainer from "./GraphContainer" const plotDomId = "graph-slice" @@ -46,6 +51,12 @@ export const GraphSlice: FC<{ const GraphSliceBackend: 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 @@ -57,22 +68,35 @@ const GraphSliceBackend: 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) } }, [error]) - return + return ( + + ) } const GraphSliceFrontend: FC<{ study: StudyDetail | null }> = ({ study = null }) => { + const [graphComponentState, setGraphComponentState] = + useState("componentWillMount") + useEffect(() => { + setGraphComponentState("componentDidMount") + }, []) + const theme = useTheme() const colorTheme = usePlotlyColorTheme(theme.palette.mode) @@ -92,14 +116,18 @@ const GraphSliceFrontend: FC<{ ) useEffect(() => { - plotSlice( - trials, - selectedObjective, - selectedParamTarget, - searchSpace.find((s) => s.name === selectedParamTarget?.key) || null, - logYScale, - colorTheme - ) + if (graphComponentState !== "componentWillMount") { + plotSlice( + trials, + selectedObjective, + selectedParamTarget, + searchSpace.find((s) => s.name === selectedParamTarget?.key) || null, + logYScale, + colorTheme + )?.then(() => { + setGraphComponentState("graphDidRender") + }) + } }, [ trials, selectedObjective, @@ -107,6 +135,7 @@ const GraphSliceFrontend: FC<{ selectedParamTarget, logYScale, colorTheme, + graphComponentState, ]) const handleObjectiveChange = (event: SelectChangeEvent) => { @@ -176,7 +205,10 @@ const GraphSliceFrontend: FC<{ - + ) @@ -225,8 +257,7 @@ const plotSlice = ( selectedParamTarget === null || trials.length === 0 ) { - plotly.react(plotDomId, [], layout) - return + return plotly.react(plotDomId, [], layout) } const feasibleTrials: Trial[] = [] @@ -305,5 +336,5 @@ const plotSlice = ( automargin: true, // Otherwise the label is outside of the plot } } - plotly.react(plotDomId, trace, layout) + return plotly.react(plotDomId, trace, layout) } From d456df39689ba214c2729886acde9142d4b09d3a Mon Sep 17 00:00:00 2001 From: porink0424 Date: Fri, 19 Apr 2024 18:42:56 +0900 Subject: [PATCH 07/14] Impl lazy loading for GraphParallelCoordinate --- .../ts/components/GraphParallelCoordinate.tsx | 44 ++++++++++++------- 1 file changed, 29 insertions(+), 15 deletions(-) diff --git a/optuna_dashboard/ts/components/GraphParallelCoordinate.tsx b/optuna_dashboard/ts/components/GraphParallelCoordinate.tsx index 78b61c7a..0ef27f21 100644 --- a/optuna_dashboard/ts/components/GraphParallelCoordinate.tsx +++ b/optuna_dashboard/ts/components/GraphParallelCoordinate.tsx @@ -1,5 +1,4 @@ import { - Box, Checkbox, FormControlLabel, FormGroup, @@ -9,7 +8,7 @@ import { } from "@mui/material" import * as plotly from "plotly.js-dist-min" import React, { FC, ReactNode, useEffect, useState } from "react" -import { SearchSpaceItem, StudyDetail, Trial } from "ts/types/optuna" +import { GraphComponentState, SearchSpaceItem, StudyDetail, Trial } from "ts/types/optuna" import { PlotType } from "../apiClient" import { usePlot } from "../hooks/usePlot" import { useMergedUnionSearchSpace } from "../searchSpace" @@ -21,6 +20,7 @@ import { useObjectiveAndUserAttrTargets, useParamTargets, } from "../trialFilter" +import GraphContainer from "./GraphContainer" const plotDomId = "graph-parallel-coordinate" @@ -101,6 +101,12 @@ export const GraphParallelCoordinate: FC<{ const GraphParallelCoordinateBackend: 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 @@ -112,22 +118,30 @@ const GraphParallelCoordinateBackend: 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) } }, [error]) - return + return } const GraphParallelCoordinateFrontend: FC<{ study: StudyDetail | null }> = ({ study = null }) => { + const [graphComponentState, setGraphComponentState] = + useState("componentWillMount") + useEffect(() => { + setGraphComponentState("componentDidMount") + }, []) + const theme = useTheme() const colorTheme = usePlotlyColorTheme(theme.palette.mode) @@ -135,10 +149,12 @@ const GraphParallelCoordinateFrontend: FC<{ const trials = useFilteredTrials(study, targets, false) useEffect(() => { - if (study !== null) { - plotCoordinate(study, trials, targets, searchSpace, colorTheme) + if (study !== null && graphComponentState !== "componentWillMount") { + plotCoordinate(study, trials, targets, searchSpace, colorTheme)?.then(() => { + setGraphComponentState("graphDidRender") + }) } - }, [study, trials, targets, searchSpace, colorTheme]) + }, [study, trials, targets, searchSpace, colorTheme, graphComponentState]) return ( @@ -162,7 +178,7 @@ const GraphParallelCoordinateFrontend: FC<{ {renderCheckBoxes()} - + ) @@ -190,8 +206,7 @@ const plotCoordinate = ( uirevision: "true", } if (trials.length === 0 || targets.length === 0) { - plotly.react(plotDomId, [], layout) - return + return plotly.react(plotDomId, [], layout) } const maxLabelLength = 40 @@ -282,8 +297,7 @@ const plotCoordinate = ( }) if (dimensions.length === 0) { console.log("Must not reach here.") - plotly.react(plotDomId, [], layout) - return + return plotly.react(plotDomId, [], layout) } let reversescale = false if ( @@ -312,5 +326,5 @@ const plotCoordinate = ( }, ] - plotly.react(plotDomId, plotData, layout) + return plotly.react(plotDomId, plotData, layout) } From 30d241bffbddc9976d25bdfbb084bc99b089460a Mon Sep 17 00:00:00 2001 From: porink0424 Date: Fri, 19 Apr 2024 18:49:25 +0900 Subject: [PATCH 08/14] Impl lazy loading for GraphRank --- optuna_dashboard/ts/components/GraphRank.tsx | 41 +++++++++++++------- 1 file changed, 28 insertions(+), 13 deletions(-) diff --git a/optuna_dashboard/ts/components/GraphRank.tsx b/optuna_dashboard/ts/components/GraphRank.tsx index ba4382c5..a0a0f370 100644 --- a/optuna_dashboard/ts/components/GraphRank.tsx +++ b/optuna_dashboard/ts/components/GraphRank.tsx @@ -1,5 +1,4 @@ import { - Box, FormControl, FormLabel, Grid, @@ -11,12 +10,13 @@ import { } from "@mui/material" import * as plotly from "plotly.js-dist-min" import React, { FC, useEffect, useState } from "react" -import { SearchSpaceItem, StudyDetail, Trial } from "ts/types/optuna" +import { GraphComponentState, SearchSpaceItem, StudyDetail, Trial } from "ts/types/optuna" import { PlotType } from "../apiClient" import { getAxisInfo, makeHovertext } from "../graphUtil" import { usePlot } from "../hooks/usePlot" import { useMergedUnionSearchSpace } from "../searchSpace" import { useBackendRender, usePlotlyColorTheme } from "../state" +import GraphContainer from "./GraphContainer" const plotDomId = "graph-rank" @@ -45,6 +45,12 @@ export const GraphRank: FC<{ const GraphRankBackend: 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 @@ -56,22 +62,30 @@ const GraphRankBackend: 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) } }, [error]) - return + return } const GraphRankFrontend: FC<{ study: StudyDetail | null }> = ({ study = null }) => { + const [graphComponentState, setGraphComponentState] = + useState("componentWillMount") + useEffect(() => { + setGraphComponentState("componentDidMount") + }, []) + const theme = useTheme() const colorTheme = usePlotlyColorTheme(theme.palette.mode) @@ -101,11 +115,13 @@ const GraphRankFrontend: FC<{ } useEffect(() => { - if (study != null) { + if (study != null && graphComponentState !== "componentWillMount") { const rankPlotInfo = getRankPlotInfo(study, objectiveId, xParam, yParam) - plotRank(rankPlotInfo, colorTheme) + plotRank(rankPlotInfo, colorTheme)?.then(() => { + setGraphComponentState("graphDidRender") + }) } - }, [study, objectiveId, xParam, yParam, theme.palette.mode, colorTheme]) + }, [study, objectiveId, xParam, yParam, theme.palette.mode, colorTheme, graphComponentState]) const space: SearchSpaceItem[] = study ? study.union_search_space : [] @@ -164,7 +180,7 @@ const GraphRankFrontend: FC<{ ) : null} - + ) @@ -301,10 +317,9 @@ const plotRank = ( } if (rankPlotInfo === null) { - plotly.react(plotDomId, [], { + return plotly.react(plotDomId, [], { template: colorTheme, }) - return } const layout: Partial = { @@ -375,5 +390,5 @@ const plotRank = ( ), }, ] - plotly.react(plotDomId, plotData, layout) + return plotly.react(plotDomId, plotData, layout) } From 6155ef1b782369a9eebb50fd70e9d80572204f92 Mon Sep 17 00:00:00 2001 From: porink0424 Date: Fri, 19 Apr 2024 18:58:53 +0900 Subject: [PATCH 09/14] Impl lazy loading for GraphEdf --- optuna_dashboard/ts/components/GraphEdf.tsx | 62 +++++++++++++++------ 1 file changed, 45 insertions(+), 17 deletions(-) diff --git a/optuna_dashboard/ts/components/GraphEdf.tsx b/optuna_dashboard/ts/components/GraphEdf.tsx index 88af0105..e823311e 100644 --- a/optuna_dashboard/ts/components/GraphEdf.tsx +++ b/optuna_dashboard/ts/components/GraphEdf.tsx @@ -1,10 +1,11 @@ import { Box, Typography, useTheme } from "@mui/material" import * as plotly from "plotly.js-dist-min" -import React, { FC, useEffect, useMemo } from "react" -import { StudyDetail, Trial } from "ts/types/optuna" +import React, { FC, useEffect, useMemo, useState } from "react" +import { GraphComponentState, StudyDetail, Trial } from "ts/types/optuna" import { CompareStudiesPlotType, getCompareStudiesPlotAPI } from "../apiClient" import { useBackendRender, usePlotlyColorTheme } from "../state" import { Target, useFilteredTrialsFromStudies } from "../trialFilter" +import GraphContainer from "./GraphContainer" const getPlotDomId = (objectiveId: number) => `graph-edf-${objectiveId}` @@ -27,6 +28,12 @@ export const GraphEdf: FC<{ const GraphEdfBackend: FC<{ studies: StudyDetail[] }> = ({ studies }) => { + const [graphComponentState, setGraphComponentState] = + useState("componentWillMount") + useEffect(() => { + setGraphComponentState("componentDidMount") + }, []) + const studyIds = studies.map((s) => s.id) const domId = getPlotDomId(-1) const numCompletedTrials = studies.reduce( @@ -38,21 +45,36 @@ const GraphEdfBackend: FC<{ if (studyIds.length === 0) { return } - getCompareStudiesPlotAPI(studyIds, CompareStudiesPlotType.EDF) - .then(({ data, layout }) => { - plotly.react(domId, data, layout) - }) - .catch((err) => { - console.error(err) - }) - }, [studyIds, numCompletedTrials]) - return + if (graphComponentState !== "componentWillMount") { + getCompareStudiesPlotAPI(studyIds, CompareStudiesPlotType.EDF) + .then(({ data, layout }) => { + plotly.react(domId, data, layout).then(() => { + setGraphComponentState("graphDidRender") + }) + }) + .catch((err) => { + console.error(err) + }) + } + }, [studyIds, numCompletedTrials, graphComponentState]) + return ( + + ) } const GraphEdfFrontend: FC<{ studies: StudyDetail[] objectiveId: number }> = ({ studies, objectiveId }) => { + const [graphComponentState, setGraphComponentState] = + useState("componentWillMount") + useEffect(() => { + setGraphComponentState("componentDidMount") + }, []) + const theme = useTheme() const colorTheme = usePlotlyColorTheme(theme.palette.mode) @@ -71,8 +93,12 @@ const GraphEdfFrontend: FC<{ }) useEffect(() => { - plotEdf(edfPlotInfos, target, domId, colorTheme) - }, [studies, target, colorTheme]) + if (graphComponentState !== "componentWillMount") { + plotEdf(edfPlotInfos, target, domId, colorTheme)?.then(() => { + setGraphComponentState("graphDidRender") + }) + } + }, [studies, target, colorTheme, graphComponentState]) return ( @@ -82,7 +108,10 @@ const GraphEdfFrontend: FC<{ > {`EDF for ${target.toLabel(studies[0].objective_names)}`} - + ) } @@ -97,10 +126,9 @@ const plotEdf = ( return } if (edfPlotInfos.length === 0) { - plotly.react(domId, [], { + return plotly.react(domId, [], { template: colorTheme, }) - return } const target_name = "Objective Value" @@ -143,5 +171,5 @@ const plotEdf = ( y: yValues, } }) - plotly.react(domId, plotData, layout) + return plotly.react(domId, plotData, layout) } From 46a5c4a15bfddd377036fab0898de136c5908472 Mon Sep 17 00:00:00 2001 From: porink0424 Date: Fri, 19 Apr 2024 18:59:19 +0900 Subject: [PATCH 10/14] Apply formatter --- .../ts/components/GraphParallelCoordinate.tsx | 29 ++++++++++++----- optuna_dashboard/ts/components/GraphRank.tsx | 31 ++++++++++++++++--- 2 files changed, 48 insertions(+), 12 deletions(-) diff --git a/optuna_dashboard/ts/components/GraphParallelCoordinate.tsx b/optuna_dashboard/ts/components/GraphParallelCoordinate.tsx index 0ef27f21..3a2985a5 100644 --- a/optuna_dashboard/ts/components/GraphParallelCoordinate.tsx +++ b/optuna_dashboard/ts/components/GraphParallelCoordinate.tsx @@ -8,7 +8,12 @@ import { } from "@mui/material" import * as plotly from "plotly.js-dist-min" import React, { FC, ReactNode, useEffect, 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 { usePlot } from "../hooks/usePlot" import { useMergedUnionSearchSpace } from "../searchSpace" @@ -106,7 +111,7 @@ const GraphParallelCoordinateBackend: FC<{ useEffect(() => { setGraphComponentState("componentDidMount") }, []) - + const studyId = study?.id const numCompletedTrials = study?.trials.filter((t) => t.state === "Complete").length || 0 @@ -130,7 +135,12 @@ const GraphParallelCoordinateBackend: FC<{ } }, [error]) - return + return ( + + ) } const GraphParallelCoordinateFrontend: FC<{ @@ -150,9 +160,11 @@ const GraphParallelCoordinateFrontend: FC<{ const trials = useFilteredTrials(study, targets, false) useEffect(() => { if (study !== null && graphComponentState !== "componentWillMount") { - plotCoordinate(study, trials, targets, searchSpace, colorTheme)?.then(() => { - setGraphComponentState("graphDidRender") - }) + plotCoordinate(study, trials, targets, searchSpace, colorTheme)?.then( + () => { + setGraphComponentState("graphDidRender") + } + ) } }, [study, trials, targets, searchSpace, colorTheme, graphComponentState]) @@ -178,7 +190,10 @@ const GraphParallelCoordinateFrontend: FC<{ {renderCheckBoxes()} - + ) diff --git a/optuna_dashboard/ts/components/GraphRank.tsx b/optuna_dashboard/ts/components/GraphRank.tsx index a0a0f370..9a86cc2b 100644 --- a/optuna_dashboard/ts/components/GraphRank.tsx +++ b/optuna_dashboard/ts/components/GraphRank.tsx @@ -10,7 +10,12 @@ import { } from "@mui/material" import * as plotly from "plotly.js-dist-min" import React, { FC, useEffect, 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, makeHovertext } from "../graphUtil" import { usePlot } from "../hooks/usePlot" @@ -50,7 +55,7 @@ const GraphRankBackend: FC<{ useEffect(() => { setGraphComponentState("componentDidMount") }, []) - + const studyId = study?.id const numCompletedTrials = study?.trials.filter((t) => t.state === "Complete").length || 0 @@ -74,7 +79,12 @@ const GraphRankBackend: FC<{ } }, [error]) - return + return ( + + ) } const GraphRankFrontend: FC<{ @@ -121,7 +131,15 @@ const GraphRankFrontend: FC<{ setGraphComponentState("graphDidRender") }) } - }, [study, objectiveId, xParam, yParam, theme.palette.mode, colorTheme, graphComponentState]) + }, [ + study, + objectiveId, + xParam, + yParam, + theme.palette.mode, + colorTheme, + graphComponentState, + ]) const space: SearchSpaceItem[] = study ? study.union_search_space : [] @@ -180,7 +198,10 @@ const GraphRankFrontend: FC<{ ) : null} - + ) From 5831d17e8f96bd6f03ce51650493256d334d1a8a Mon Sep 17 00:00:00 2001 From: porink0424 Date: Wed, 24 Apr 2024 12:00:17 +0900 Subject: [PATCH 11/14] Impl useGraphComponentState --- optuna_dashboard/ts/components/GraphSlice.tsx | 11 +++-------- .../ts/hooks/useGraphComponentState.ts | 14 ++++++++++++++ 2 files changed, 17 insertions(+), 8 deletions(-) create mode 100644 optuna_dashboard/ts/hooks/useGraphComponentState.ts diff --git a/optuna_dashboard/ts/components/GraphSlice.tsx b/optuna_dashboard/ts/components/GraphSlice.tsx index d208395e..b9569965 100644 --- a/optuna_dashboard/ts/components/GraphSlice.tsx +++ b/optuna_dashboard/ts/components/GraphSlice.tsx @@ -18,6 +18,7 @@ import { Trial, } from "ts/types/optuna" import { PlotType } from "../apiClient" +import { useGraphComponentState } from "../hooks/useGraphComponentState" import { usePlot } from "../hooks/usePlot" import { useMergedUnionSearchSpace } from "../searchSpace" import { useBackendRender, usePlotlyColorTheme } from "../state" @@ -51,11 +52,7 @@ export const GraphSlice: FC<{ const GraphSliceBackend: FC<{ study: StudyDetail | null }> = ({ study = null }) => { - const [graphComponentState, setGraphComponentState] = - useState("componentWillMount") - useEffect(() => { - setGraphComponentState("componentDidMount") - }, []) + const { graphComponentState, notifyGraphDidRender } = useGraphComponentState() const studyId = study?.id const numCompletedTrials = @@ -69,9 +66,7 @@ const GraphSliceBackend: FC<{ useEffect(() => { if (data && layout && graphComponentState !== "componentWillMount") { - plotly.react(plotDomId, data, layout).then(() => { - setGraphComponentState("graphDidRender") - }) + plotly.react(plotDomId, data, layout).then(notifyGraphDidRender) } }, [data, layout, graphComponentState]) useEffect(() => { diff --git a/optuna_dashboard/ts/hooks/useGraphComponentState.ts b/optuna_dashboard/ts/hooks/useGraphComponentState.ts new file mode 100644 index 00000000..cf95777d --- /dev/null +++ b/optuna_dashboard/ts/hooks/useGraphComponentState.ts @@ -0,0 +1,14 @@ +import { useEffect, useState } from "react" +import { GraphComponentState } from "ts/types/optuna" + +export const useGraphComponentState = () => { + const [graphComponentState, setGraphComponentState] = + useState("componentWillMount") + useEffect(() => { + setGraphComponentState("componentDidMount") + }, []) + return { + graphComponentState, + notifyGraphDidRender: () => setGraphComponentState("graphDidRender"), + } +} From 9499cdd1b9d62c12a7a523abb1b50575cad0a459 Mon Sep 17 00:00:00 2001 From: porink0424 Date: Wed, 24 Apr 2024 12:28:21 +0900 Subject: [PATCH 12/14] Use useGraphComponentState --- .../ts/components/GraphContour.tsx | 30 +++++-------------- optuna_dashboard/ts/components/GraphEdf.tsx | 27 ++++++----------- .../ts/components/GraphParallelCoordinate.tsx | 28 ++++------------- optuna_dashboard/ts/components/GraphRank.tsx | 28 ++++------------- optuna_dashboard/ts/components/GraphSlice.tsx | 17 ++--------- 5 files changed, 32 insertions(+), 98 deletions(-) diff --git a/optuna_dashboard/ts/components/GraphContour.tsx b/optuna_dashboard/ts/components/GraphContour.tsx index d1123111..400da332 100644 --- a/optuna_dashboard/ts/components/GraphContour.tsx +++ b/optuna_dashboard/ts/components/GraphContour.tsx @@ -14,12 +14,8 @@ import { 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 { useGraphComponentState } from "ts/hooks/useGraphComponentState" +import { SearchSpaceItem, StudyDetail, Trial } from "ts/types/optuna" import { PlotType } from "../apiClient" import { getAxisInfo } from "../graphUtil" import { usePlot } from "../hooks/usePlot" @@ -90,11 +86,7 @@ const DisabledContour: FC<{ const ContourBackend: FC<{ study: StudyDetail | null }> = ({ study = null }) => { - const [graphComponentState, setGraphComponentState] = - useState("componentWillMount") - useEffect(() => { - setGraphComponentState("componentDidMount") - }, []) + const { graphComponentState, notifyGraphDidRender } = useGraphComponentState() const studyId = study?.id const numCompletedTrials = @@ -107,9 +99,7 @@ const ContourBackend: FC<{ useEffect(() => { if (data && layout && graphComponentState !== "componentWillMount") { - plotly.react(plotDomId, data, layout).then(() => { - setGraphComponentState("graphDidRender") - }) + plotly.react(plotDomId, data, layout).then(notifyGraphDidRender) } }, [data, layout, graphComponentState]) useEffect(() => { @@ -129,11 +119,7 @@ const ContourBackend: FC<{ const ContourFrontend: FC<{ study: StudyDetail | null }> = ({ study = null }) => { - const [graphComponentState, setGraphComponentState] = - useState("componentWillMount") - useEffect(() => { - setGraphComponentState("componentDidMount") - }, []) + const { graphComponentState, notifyGraphDidRender } = useGraphComponentState() const theme = useTheme() const colorTheme = usePlotlyColorTheme(theme.palette.mode) @@ -165,9 +151,9 @@ const ContourFrontend: FC<{ useEffect(() => { if (study != null && graphComponentState !== "componentWillMount") { - plotContour(study, objectiveId, xParam, yParam, colorTheme)?.then(() => { - setGraphComponentState("graphDidRender") - }) + plotContour(study, objectiveId, xParam, yParam, colorTheme)?.then( + notifyGraphDidRender + ) } }, [study, objectiveId, xParam, yParam, colorTheme, graphComponentState]) diff --git a/optuna_dashboard/ts/components/GraphEdf.tsx b/optuna_dashboard/ts/components/GraphEdf.tsx index e823311e..cf508c07 100644 --- a/optuna_dashboard/ts/components/GraphEdf.tsx +++ b/optuna_dashboard/ts/components/GraphEdf.tsx @@ -1,7 +1,8 @@ import { Box, Typography, useTheme } from "@mui/material" import * as plotly from "plotly.js-dist-min" -import React, { FC, useEffect, useMemo, useState } from "react" -import { GraphComponentState, StudyDetail, Trial } from "ts/types/optuna" +import React, { FC, useEffect, useMemo } from "react" +import { useGraphComponentState } from "ts/hooks/useGraphComponentState" +import { StudyDetail, Trial } from "ts/types/optuna" import { CompareStudiesPlotType, getCompareStudiesPlotAPI } from "../apiClient" import { useBackendRender, usePlotlyColorTheme } from "../state" import { Target, useFilteredTrialsFromStudies } from "../trialFilter" @@ -28,11 +29,7 @@ export const GraphEdf: FC<{ const GraphEdfBackend: FC<{ studies: StudyDetail[] }> = ({ studies }) => { - const [graphComponentState, setGraphComponentState] = - useState("componentWillMount") - useEffect(() => { - setGraphComponentState("componentDidMount") - }, []) + const { graphComponentState, notifyGraphDidRender } = useGraphComponentState() const studyIds = studies.map((s) => s.id) const domId = getPlotDomId(-1) @@ -48,9 +45,7 @@ const GraphEdfBackend: FC<{ if (graphComponentState !== "componentWillMount") { getCompareStudiesPlotAPI(studyIds, CompareStudiesPlotType.EDF) .then(({ data, layout }) => { - plotly.react(domId, data, layout).then(() => { - setGraphComponentState("graphDidRender") - }) + plotly.react(domId, data, layout).then(notifyGraphDidRender) }) .catch((err) => { console.error(err) @@ -69,11 +64,7 @@ const GraphEdfFrontend: FC<{ studies: StudyDetail[] objectiveId: number }> = ({ studies, objectiveId }) => { - const [graphComponentState, setGraphComponentState] = - useState("componentWillMount") - useEffect(() => { - setGraphComponentState("componentDidMount") - }, []) + const { graphComponentState, notifyGraphDidRender } = useGraphComponentState() const theme = useTheme() const colorTheme = usePlotlyColorTheme(theme.palette.mode) @@ -94,9 +85,9 @@ const GraphEdfFrontend: FC<{ useEffect(() => { if (graphComponentState !== "componentWillMount") { - plotEdf(edfPlotInfos, target, domId, colorTheme)?.then(() => { - setGraphComponentState("graphDidRender") - }) + plotEdf(edfPlotInfos, target, domId, colorTheme)?.then( + notifyGraphDidRender + ) } }, [studies, target, colorTheme, graphComponentState]) diff --git a/optuna_dashboard/ts/components/GraphParallelCoordinate.tsx b/optuna_dashboard/ts/components/GraphParallelCoordinate.tsx index 3a2985a5..7753569f 100644 --- a/optuna_dashboard/ts/components/GraphParallelCoordinate.tsx +++ b/optuna_dashboard/ts/components/GraphParallelCoordinate.tsx @@ -8,12 +8,8 @@ import { } from "@mui/material" import * as plotly from "plotly.js-dist-min" import React, { FC, ReactNode, useEffect, useState } from "react" -import { - GraphComponentState, - SearchSpaceItem, - StudyDetail, - Trial, -} from "ts/types/optuna" +import { useGraphComponentState } from "ts/hooks/useGraphComponentState" +import { SearchSpaceItem, StudyDetail, Trial } from "ts/types/optuna" import { PlotType } from "../apiClient" import { usePlot } from "../hooks/usePlot" import { useMergedUnionSearchSpace } from "../searchSpace" @@ -106,11 +102,7 @@ export const GraphParallelCoordinate: FC<{ const GraphParallelCoordinateBackend: FC<{ study: StudyDetail | null }> = ({ study = null }) => { - const [graphComponentState, setGraphComponentState] = - useState("componentWillMount") - useEffect(() => { - setGraphComponentState("componentDidMount") - }, []) + const { graphComponentState, notifyGraphDidRender } = useGraphComponentState() const studyId = study?.id const numCompletedTrials = @@ -124,9 +116,7 @@ const GraphParallelCoordinateBackend: FC<{ useEffect(() => { if (data && layout && graphComponentState !== "componentWillMount") { - plotly.react(plotDomId, data, layout).then(() => { - setGraphComponentState("graphDidRender") - }) + plotly.react(plotDomId, data, layout).then(notifyGraphDidRender) } }, [data, layout, graphComponentState]) useEffect(() => { @@ -146,11 +136,7 @@ const GraphParallelCoordinateBackend: FC<{ const GraphParallelCoordinateFrontend: FC<{ study: StudyDetail | null }> = ({ study = null }) => { - const [graphComponentState, setGraphComponentState] = - useState("componentWillMount") - useEffect(() => { - setGraphComponentState("componentDidMount") - }, []) + const { graphComponentState, notifyGraphDidRender } = useGraphComponentState() const theme = useTheme() const colorTheme = usePlotlyColorTheme(theme.palette.mode) @@ -161,9 +147,7 @@ const GraphParallelCoordinateFrontend: FC<{ useEffect(() => { if (study !== null && graphComponentState !== "componentWillMount") { plotCoordinate(study, trials, targets, searchSpace, colorTheme)?.then( - () => { - setGraphComponentState("graphDidRender") - } + notifyGraphDidRender ) } }, [study, trials, targets, searchSpace, colorTheme, graphComponentState]) diff --git a/optuna_dashboard/ts/components/GraphRank.tsx b/optuna_dashboard/ts/components/GraphRank.tsx index 9a86cc2b..a3b51adb 100644 --- a/optuna_dashboard/ts/components/GraphRank.tsx +++ b/optuna_dashboard/ts/components/GraphRank.tsx @@ -10,12 +10,8 @@ import { } from "@mui/material" import * as plotly from "plotly.js-dist-min" import React, { FC, useEffect, useState } from "react" -import { - GraphComponentState, - SearchSpaceItem, - StudyDetail, - Trial, -} from "ts/types/optuna" +import { useGraphComponentState } from "ts/hooks/useGraphComponentState" +import { SearchSpaceItem, StudyDetail, Trial } from "ts/types/optuna" import { PlotType } from "../apiClient" import { getAxisInfo, makeHovertext } from "../graphUtil" import { usePlot } from "../hooks/usePlot" @@ -50,11 +46,7 @@ export const GraphRank: FC<{ const GraphRankBackend: FC<{ study: StudyDetail | null }> = ({ study = null }) => { - const [graphComponentState, setGraphComponentState] = - useState("componentWillMount") - useEffect(() => { - setGraphComponentState("componentDidMount") - }, []) + const { graphComponentState, notifyGraphDidRender } = useGraphComponentState() const studyId = study?.id const numCompletedTrials = @@ -68,9 +60,7 @@ const GraphRankBackend: FC<{ useEffect(() => { if (data && layout && graphComponentState !== "componentWillMount") { - plotly.react(plotDomId, data, layout).then(() => { - setGraphComponentState("graphDidRender") - }) + plotly.react(plotDomId, data, layout).then(notifyGraphDidRender) } }, [data, layout, graphComponentState]) useEffect(() => { @@ -90,11 +80,7 @@ const GraphRankBackend: FC<{ const GraphRankFrontend: FC<{ study: StudyDetail | null }> = ({ study = null }) => { - const [graphComponentState, setGraphComponentState] = - useState("componentWillMount") - useEffect(() => { - setGraphComponentState("componentDidMount") - }, []) + const { graphComponentState, notifyGraphDidRender } = useGraphComponentState() const theme = useTheme() const colorTheme = usePlotlyColorTheme(theme.palette.mode) @@ -127,9 +113,7 @@ const GraphRankFrontend: FC<{ useEffect(() => { if (study != null && graphComponentState !== "componentWillMount") { const rankPlotInfo = getRankPlotInfo(study, objectiveId, xParam, yParam) - plotRank(rankPlotInfo, colorTheme)?.then(() => { - setGraphComponentState("graphDidRender") - }) + plotRank(rankPlotInfo, colorTheme)?.then(notifyGraphDidRender) } }, [ study, diff --git a/optuna_dashboard/ts/components/GraphSlice.tsx b/optuna_dashboard/ts/components/GraphSlice.tsx index b9569965..751c3025 100644 --- a/optuna_dashboard/ts/components/GraphSlice.tsx +++ b/optuna_dashboard/ts/components/GraphSlice.tsx @@ -11,12 +11,7 @@ import { } from "@mui/material" import * as plotly from "plotly.js-dist-min" import React, { FC, useEffect, useState } from "react" -import { - GraphComponentState, - SearchSpaceItem, - StudyDetail, - Trial, -} from "ts/types/optuna" +import { SearchSpaceItem, StudyDetail, Trial } from "ts/types/optuna" import { PlotType } from "../apiClient" import { useGraphComponentState } from "../hooks/useGraphComponentState" import { usePlot } from "../hooks/usePlot" @@ -86,11 +81,7 @@ const GraphSliceBackend: FC<{ const GraphSliceFrontend: FC<{ study: StudyDetail | null }> = ({ study = null }) => { - const [graphComponentState, setGraphComponentState] = - useState("componentWillMount") - useEffect(() => { - setGraphComponentState("componentDidMount") - }, []) + const { graphComponentState, notifyGraphDidRender } = useGraphComponentState() const theme = useTheme() const colorTheme = usePlotlyColorTheme(theme.palette.mode) @@ -119,9 +110,7 @@ const GraphSliceFrontend: FC<{ searchSpace.find((s) => s.name === selectedParamTarget?.key) || null, logYScale, colorTheme - )?.then(() => { - setGraphComponentState("graphDidRender") - }) + )?.then(notifyGraphDidRender) } }, [ trials, From 1da112b6f5867330e04ba0f68714b02ea65af9f3 Mon Sep 17 00:00:00 2001 From: porink0424 Date: Wed, 24 Apr 2024 12:30:22 +0900 Subject: [PATCH 13/14] Resolve import errors --- optuna_dashboard/ts/components/GraphContour.tsx | 2 +- optuna_dashboard/ts/components/GraphEdf.tsx | 2 +- optuna_dashboard/ts/components/GraphParallelCoordinate.tsx | 2 +- optuna_dashboard/ts/components/GraphRank.tsx | 2 +- 4 files changed, 4 insertions(+), 4 deletions(-) diff --git a/optuna_dashboard/ts/components/GraphContour.tsx b/optuna_dashboard/ts/components/GraphContour.tsx index 400da332..6b3e8367 100644 --- a/optuna_dashboard/ts/components/GraphContour.tsx +++ b/optuna_dashboard/ts/components/GraphContour.tsx @@ -14,7 +14,7 @@ import { import blue from "@mui/material/colors/blue" import * as plotly from "plotly.js-dist-min" import React, { FC, useEffect, useMemo, useState } from "react" -import { useGraphComponentState } from "ts/hooks/useGraphComponentState" +import { useGraphComponentState } from "../hooks/useGraphComponentState" import { SearchSpaceItem, StudyDetail, Trial } from "ts/types/optuna" import { PlotType } from "../apiClient" import { getAxisInfo } from "../graphUtil" diff --git a/optuna_dashboard/ts/components/GraphEdf.tsx b/optuna_dashboard/ts/components/GraphEdf.tsx index cf508c07..689a1ffb 100644 --- a/optuna_dashboard/ts/components/GraphEdf.tsx +++ b/optuna_dashboard/ts/components/GraphEdf.tsx @@ -1,7 +1,7 @@ import { Box, Typography, useTheme } from "@mui/material" import * as plotly from "plotly.js-dist-min" import React, { FC, useEffect, useMemo } from "react" -import { useGraphComponentState } from "ts/hooks/useGraphComponentState" +import { useGraphComponentState } from "../hooks/useGraphComponentState" import { StudyDetail, Trial } from "ts/types/optuna" import { CompareStudiesPlotType, getCompareStudiesPlotAPI } from "../apiClient" import { useBackendRender, usePlotlyColorTheme } from "../state" diff --git a/optuna_dashboard/ts/components/GraphParallelCoordinate.tsx b/optuna_dashboard/ts/components/GraphParallelCoordinate.tsx index 7753569f..c131c127 100644 --- a/optuna_dashboard/ts/components/GraphParallelCoordinate.tsx +++ b/optuna_dashboard/ts/components/GraphParallelCoordinate.tsx @@ -8,7 +8,7 @@ import { } from "@mui/material" import * as plotly from "plotly.js-dist-min" import React, { FC, ReactNode, useEffect, useState } from "react" -import { useGraphComponentState } from "ts/hooks/useGraphComponentState" +import { useGraphComponentState } from "../hooks/useGraphComponentState" import { SearchSpaceItem, StudyDetail, Trial } from "ts/types/optuna" import { PlotType } from "../apiClient" import { usePlot } from "../hooks/usePlot" diff --git a/optuna_dashboard/ts/components/GraphRank.tsx b/optuna_dashboard/ts/components/GraphRank.tsx index a3b51adb..4d49d9d0 100644 --- a/optuna_dashboard/ts/components/GraphRank.tsx +++ b/optuna_dashboard/ts/components/GraphRank.tsx @@ -10,7 +10,7 @@ import { } from "@mui/material" import * as plotly from "plotly.js-dist-min" import React, { FC, useEffect, useState } from "react" -import { useGraphComponentState } from "ts/hooks/useGraphComponentState" +import { useGraphComponentState } from "../hooks/useGraphComponentState" import { SearchSpaceItem, StudyDetail, Trial } from "ts/types/optuna" import { PlotType } from "../apiClient" import { getAxisInfo, makeHovertext } from "../graphUtil" From 24cd970fdd1051d23fb6c89d1c72e0890492228a Mon Sep 17 00:00:00 2001 From: porink0424 Date: Wed, 24 Apr 2024 12:31:29 +0900 Subject: [PATCH 14/14] Apply formatter --- optuna_dashboard/ts/components/GraphContour.tsx | 2 +- optuna_dashboard/ts/components/GraphEdf.tsx | 2 +- optuna_dashboard/ts/components/GraphParallelCoordinate.tsx | 2 +- optuna_dashboard/ts/components/GraphRank.tsx | 2 +- 4 files changed, 4 insertions(+), 4 deletions(-) diff --git a/optuna_dashboard/ts/components/GraphContour.tsx b/optuna_dashboard/ts/components/GraphContour.tsx index 6b3e8367..c922533a 100644 --- a/optuna_dashboard/ts/components/GraphContour.tsx +++ b/optuna_dashboard/ts/components/GraphContour.tsx @@ -14,10 +14,10 @@ import { import blue from "@mui/material/colors/blue" import * as plotly from "plotly.js-dist-min" import React, { FC, useEffect, useMemo, useState } from "react" -import { useGraphComponentState } from "../hooks/useGraphComponentState" import { SearchSpaceItem, StudyDetail, Trial } from "ts/types/optuna" import { PlotType } from "../apiClient" import { getAxisInfo } from "../graphUtil" +import { useGraphComponentState } from "../hooks/useGraphComponentState" import { usePlot } from "../hooks/usePlot" import { useMergedUnionSearchSpace } from "../searchSpace" import { usePlotlyColorTheme } from "../state" diff --git a/optuna_dashboard/ts/components/GraphEdf.tsx b/optuna_dashboard/ts/components/GraphEdf.tsx index 689a1ffb..4db8666f 100644 --- a/optuna_dashboard/ts/components/GraphEdf.tsx +++ b/optuna_dashboard/ts/components/GraphEdf.tsx @@ -1,9 +1,9 @@ import { Box, Typography, useTheme } from "@mui/material" import * as plotly from "plotly.js-dist-min" import React, { FC, useEffect, useMemo } from "react" -import { useGraphComponentState } from "../hooks/useGraphComponentState" import { StudyDetail, Trial } from "ts/types/optuna" import { CompareStudiesPlotType, getCompareStudiesPlotAPI } from "../apiClient" +import { useGraphComponentState } from "../hooks/useGraphComponentState" import { useBackendRender, usePlotlyColorTheme } from "../state" import { Target, useFilteredTrialsFromStudies } from "../trialFilter" import GraphContainer from "./GraphContainer" diff --git a/optuna_dashboard/ts/components/GraphParallelCoordinate.tsx b/optuna_dashboard/ts/components/GraphParallelCoordinate.tsx index c131c127..8c5c683e 100644 --- a/optuna_dashboard/ts/components/GraphParallelCoordinate.tsx +++ b/optuna_dashboard/ts/components/GraphParallelCoordinate.tsx @@ -8,9 +8,9 @@ import { } from "@mui/material" import * as plotly from "plotly.js-dist-min" import React, { FC, ReactNode, useEffect, useState } from "react" -import { useGraphComponentState } from "../hooks/useGraphComponentState" import { SearchSpaceItem, StudyDetail, Trial } from "ts/types/optuna" import { PlotType } from "../apiClient" +import { useGraphComponentState } from "../hooks/useGraphComponentState" import { usePlot } from "../hooks/usePlot" import { useMergedUnionSearchSpace } from "../searchSpace" import { usePlotlyColorTheme } from "../state" diff --git a/optuna_dashboard/ts/components/GraphRank.tsx b/optuna_dashboard/ts/components/GraphRank.tsx index 4d49d9d0..83899a43 100644 --- a/optuna_dashboard/ts/components/GraphRank.tsx +++ b/optuna_dashboard/ts/components/GraphRank.tsx @@ -10,10 +10,10 @@ import { } from "@mui/material" import * as plotly from "plotly.js-dist-min" import React, { FC, useEffect, useState } from "react" -import { useGraphComponentState } from "../hooks/useGraphComponentState" import { SearchSpaceItem, StudyDetail, Trial } from "ts/types/optuna" import { PlotType } from "../apiClient" import { getAxisInfo, makeHovertext } from "../graphUtil" +import { useGraphComponentState } from "../hooks/useGraphComponentState" import { usePlot } from "../hooks/usePlot" import { useMergedUnionSearchSpace } from "../searchSpace" import { useBackendRender, usePlotlyColorTheme } from "../state"