From 713c8f3443ce4d3f687d2c4f3cc0a42f304a9534 Mon Sep 17 00:00:00 2001
From: keisuke-umezawa <keisuke.umezawa@gmail.com>
Date: Sat, 27 Jan 2024 14:10:16 +0900
Subject: [PATCH 1/2] Aligh button design

---
 .../ts/components/StudyDetail.tsx             | 26 -----------------
 optuna_dashboard/ts/components/TrialTable.tsx | 29 ++++++++++++++-----
 2 files changed, 21 insertions(+), 34 deletions(-)

diff --git a/optuna_dashboard/ts/components/StudyDetail.tsx b/optuna_dashboard/ts/components/StudyDetail.tsx
index 2f56ec8b4..d928daa40 100644
--- a/optuna_dashboard/ts/components/StudyDetail.tsx
+++ b/optuna_dashboard/ts/components/StudyDetail.tsx
@@ -150,32 +150,6 @@ export const StudyDetail: FC<{
   } else if (page === "trialTable") {
     content = (
       <Box sx={{ display: "flex", width: "100%", flexDirection: "column" }}>
-        <Card
-          sx={{
-            margin: theme.spacing(2),
-            width: "auto",
-            height: "auto",
-            display: "flex",
-            justifyContent: "left",
-            alignItems: "left",
-          }}
-        >
-          <CardContent>
-            <IconButton
-              aria-label="download csv"
-              size="small"
-              color="inherit"
-              download
-              sx={{ margin: "auto 0" }}
-              href={`/csv/${studyDetail?.id}`}
-            >
-              <DownloadIcon />
-              <Typography variant="button" sx={{ margin: theme.spacing(2) }}>
-                Download CSV File
-              </Typography>
-            </IconButton>
-          </CardContent>
-        </Card>
         <Card sx={{ margin: theme.spacing(2) }}>
           <CardContent>
             <TrialTable studyDetail={studyDetail} initialRowsPerPage={50} />
diff --git a/optuna_dashboard/ts/components/TrialTable.tsx b/optuna_dashboard/ts/components/TrialTable.tsx
index efc796266..98a0b176c 100644
--- a/optuna_dashboard/ts/components/TrialTable.tsx
+++ b/optuna_dashboard/ts/components/TrialTable.tsx
@@ -1,6 +1,7 @@
 import React, { FC } from "react"
-import { IconButton } from "@mui/material"
+import { IconButton, Button, useTheme } from "@mui/material"
 import LinkIcon from "@mui/icons-material/Link"
+import DownloadIcon from "@mui/icons-material/Download"
 
 import { DataGridColumn, DataGrid } from "./DataGrid"
 import { Link } from "react-router-dom"
@@ -9,6 +10,7 @@ export const TrialTable: FC<{
   studyDetail: StudyDetail | null
   initialRowsPerPage?: number
 }> = ({ studyDetail, initialRowsPerPage }) => {
+  const theme = useTheme()
   const trials: Trial[] = studyDetail !== null ? studyDetail.trials : []
   const objectiveNames: string[] = studyDetail?.objective_names || []
 
@@ -190,12 +192,23 @@ export const TrialTable: FC<{
   })
 
   return (
-    <DataGrid<Trial>
-      columns={columns}
-      rows={trials}
-      keyField={"trial_id"}
-      dense={true}
-      initialRowsPerPage={initialRowsPerPage}
-    />
+    <>
+      <DataGrid<Trial>
+        columns={columns}
+        rows={trials}
+        keyField={"trial_id"}
+        dense={true}
+        initialRowsPerPage={initialRowsPerPage}
+      />
+      <Button
+        variant="outlined"
+        startIcon={<DownloadIcon />}
+        download
+        href={`/csv/${studyDetail?.id}`}
+        sx={{ marginRight: theme.spacing(2), minWidth: "120px" }}
+      >
+        Download CSV File
+      </Button>
+    </>
   )
 }

From 33d913d6ea1ae88aa0658b482d0e2a168554873c Mon Sep 17 00:00:00 2001
From: keisuke-umezawa <keisuke.umezawa@gmail.com>
Date: Sat, 27 Jan 2024 14:31:43 +0900
Subject: [PATCH 2/2] Fix lint

---
 optuna_dashboard/ts/components/StudyDetail.tsx | 1 -
 1 file changed, 1 deletion(-)

diff --git a/optuna_dashboard/ts/components/StudyDetail.tsx b/optuna_dashboard/ts/components/StudyDetail.tsx
index d928daa40..92856a6e2 100644
--- a/optuna_dashboard/ts/components/StudyDetail.tsx
+++ b/optuna_dashboard/ts/components/StudyDetail.tsx
@@ -12,7 +12,6 @@ import {
 import Grid2 from "@mui/material/Unstable_Grid2"
 import ChevronRightIcon from "@mui/icons-material/ChevronRight"
 import HomeIcon from "@mui/icons-material/Home"
-import DownloadIcon from "@mui/icons-material/Download"
 
 import { StudyNote } from "./Note"
 import { actionCreator } from "../action"