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} - + )