Make modal scrollable

optuna_dashboard/ts/components/Artifact/ArtifactCardMedia.tsx

@@ -2,7 +2,6 @@ import InsertDriveFileIcon from "@mui/icons-material/InsertDriveFile"
 import { Box, CardMedia } from "@mui/material"
 import React, { FC } from "react"
 import { Artifact } from "ts/types/optuna"
-import { TableArtifactViewer, isTableArtifact } from "./TableArtifactViewer"
 import {
   ThreejsArtifactViewer,
   isThreejsArtifact,
@@ -14,14 +13,7 @@ export const ArtifactCardMedia: FC<{
   urlPath: string
   height: string
 }> = ({ artifact, urlPath, height }) => {
-  if (isTableArtifact(artifact)) {
-    return (
-      <TableArtifactViewer
-        src={urlPath}
-        filetype={artifact.filename.split(".").pop()}
-      />
-    )
-  } else if (isThreejsArtifact(artifact)) {
+  if (isThreejsArtifact(artifact)) {
     return (
       <ThreejsArtifactViewer
         src={urlPath}

optuna_dashboard/ts/components/Artifact/TableArtifactViewer.tsx

@@ -43,7 +43,7 @@ export const TableArtifactViewer: React.FC<TableArtifactViewerProps> = (
     }))
   }, [data])
 
-  return <DataGrid data={data} columns={columns} />
+  return <DataGrid data={data} columns={columns} initialRowsPerPage={10} />
 }
 
 export const useTableArtifactModal = (): [
@@ -77,6 +77,10 @@ export const useTableArtifactModal = (): [
             transform: "translate(-50%, -50%)",
             bgcolor: "background.paper",
             borderRadius: "15px",
+            width: "80%",
+            maxHeight: "80%",
+            overflowY: "auto",
+            p: 2,
           }}
         >
           <IconButton

optuna_dashboard/ts/components/DataGrid.tsx

@@ -119,17 +119,24 @@ function FilterMenu<T>({
 function DataGrid<T>({
   data,
   columns,
+  initialRowsPerPage,
 }: {
   data: T[]
   columns: ColumnDef<T>[]
+  initialRowsPerPage?: number
 }): React.ReactElement {
   const [sorting, setSorting] = React.useState<SortingState>([])
   const [columnFilters, setColumnFilters] = React.useState<ColumnFiltersState>(
     []
   )
+  const rowsPerPageOptions = [10, 50, 100, { label: "All", value: data.length }]
+
   const [pagination, setPagination] = React.useState<PaginationState>({
     pageIndex: 0,
-    pageSize: 50,
+    pageSize:
+      initialRowsPerPage && rowsPerPageOptions.includes(initialRowsPerPage)
+        ? initialRowsPerPage
+        : 50,
   })
 
   const table = useReactTable({
@@ -236,12 +243,7 @@ function DataGrid<T>({
       </TableContainer>
       <Box component="div" display="flex" alignItems="center">
         <TablePagination
-          rowsPerPageOptions={[
-            10,
-            50,
-            100,
-            { label: "All", value: data.length },
-          ]}
+          rowsPerPageOptions={rowsPerPageOptions}
           component="div"
           count={table.getFilteredRowModel().rows.length}
           rowsPerPage={table.getState().pagination.pageSize}