From 4579c0ef51a5e0e6057b54f8d400fa967f60de7a Mon Sep 17 00:00:00 2001
From: porink0424 <daichi2120@gmail.com>
Date: Fri, 19 Apr 2024 18:22:04 +0900
Subject: [PATCH] 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 (
+    <Box component="div" id={plotDomId} sx={{ height: "450px" }}>
+      {graphComponentState !== "graphDidRender" && (
+        <Box
+          component="div"
+          sx={{
+            height: "100%",
+            display: "flex",
+            alignItems: "center",
+            justifyContent: "center",
+          }}
+        >
+          <Typography color={theme.palette.grey[700]}>Loading...</Typography>
+        </Box>
+      )}
+    </Box>
+  )
+}
+
+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 <Box component="div" id={plotDomId} sx={{ height: "450px" }} />
+  return (
+    <GraphContainer
+      plotDomId={plotDomId}
+      graphComponentState={graphComponentState}
+    />
+  )
 }
 
 const ContourFrontend: FC<{
@@ -222,7 +228,10 @@ const ContourFrontend: FC<{
         ) : null}
       </Grid>
       <Grid item xs={9}>
-        <Box component="div" id={plotDomId} sx={{ height: "450px" }} />
+        <GraphContainer
+          plotDomId={plotDomId}
+          graphComponentState={graphComponentState}
+        />
       </Grid>
     </Grid>
   )