From 65d7c8e4cc62818a4c304bad692b5c75652b05ef Mon Sep 17 00:00:00 2001
From: Hiroki Takizawa <contact@hiroki-takizawa.name>
Date: Wed, 6 Dec 2023 11:39:12 +0900
Subject: [PATCH] add download button

---
 .../ts/components/StudyDetail.tsx             | 48 +++++++++++++------
 1 file changed, 33 insertions(+), 15 deletions(-)

diff --git a/optuna_dashboard/ts/components/StudyDetail.tsx b/optuna_dashboard/ts/components/StudyDetail.tsx
index f85d7458..ce7fe3ce 100644
--- a/optuna_dashboard/ts/components/StudyDetail.tsx
+++ b/optuna_dashboard/ts/components/StudyDetail.tsx
@@ -150,21 +150,39 @@ export const StudyDetail: FC<{
     content = <TrialList studyDetail={studyDetail} />
   } else if (page === "trialTable") {
     content = (
-      <Card sx={{ margin: theme.spacing(2) }}>
-        <CardContent>
-          <IconButton
-            aria-label="download csv"
-            size="small"
-            color="inherit"
-            download={`trials_${studyDetail?.id}.csv`}
-            sx={{ margin: "auto 0" }}
-            href={`/csv/${studyDetail?.id}`}
-          >
-            <DownloadIcon />
-          </IconButton>
-          <TrialTable studyDetail={studyDetail} initialRowsPerPage={50} />
-        </CardContent>
-      </Card>
+      <Box sx={{ display: "flex", width: "100%", flexDirection: "column" }}>
+        <Card sx={{ margin: theme.spacing(2) }}>
+          <CardContent>
+            <TrialTable studyDetail={studyDetail} initialRowsPerPage={50} />
+          </CardContent>
+        </Card>
+        <Typography variant="h5" sx={{ margin: theme.spacing(2) }}>
+          Download CSV File
+        </Typography>{" "}
+        <Card
+          sx={{
+            margin: theme.spacing(2),
+            width: 80,
+            height: 80,
+            display: "flex",
+            justifyContent: "center",
+            alignItems: "center",
+          }}
+        >
+          <CardContent>
+            <IconButton
+              aria-label="download csv"
+              size="small"
+              color="inherit"
+              download={`trials_${studyDetail?.id}.csv`}
+              sx={{ margin: "auto 0" }}
+              href={`/csv/${studyDetail?.id}`}
+            >
+              <DownloadIcon />
+            </IconButton>
+          </CardContent>
+        </Card>
+      </Box>
     )
   } else if (page === "note" && studyDetail !== null) {
     content = (