Merge pull request #780 from keisuke-umezawa/fix/add-button-csv

Align button design of csv downloader

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"
@@ -150,32 +149,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} />

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