[Benchmark UI] Make the mui table scrollerable (#6447)

it is not ideal when a benchmark table has 100 records, when user
scrolls down, they cannot see the column headers

#6430


Preview UI with long data:
[vercel](https://torchci-git-benchexfefix-fbopensource.vercel.app/benchmark/llms?startTime=Thu%2C%2006%20Mar%202025%2001%3A42%3A40%20GMT&stopTime=Thu%2C%2020%20Mar%202025%2000%3A42%3A40%20GMT&granularity=hour&lBranch=main&lCommit=51901f3849723b44f3a48768b7a7bf7ffdc08094&rBranch=main&rCommit=b195ed9a2564e5c2cd3554518213c4769d3ad022&repoName=pytorch%2Fexecutorch&benchmarkName=&modelName=All%20Models&backendName=All%20Backends&modeName=All%20Modes&dtypeName=All%20DType&deviceName=All%20Devices&archName=All%20Platforms)

Example with small data

Author: yangw-dev

torchci/components/benchmark/llms/components/LLMsSummaryPanel.tsx

@@ -13,9 +13,6 @@ import {
 } from "lib/benchmark/llms/common";
 import { combineLeftAndRight } from "lib/benchmark/llms/utils/llmUtils";
 
-const ROW_GAP = 100;
-const ROW_HEIGHT = 38;
-
 const getDeviceArch = (
   device: string | undefined,
   arch: string | undefined
@@ -345,21 +342,18 @@ export default function LLMsSummaryPanel({
 
   // TODO (huydhn): Table bigger than 100 rows requires x-data-grid-pro
   return (
-    <Grid2 container spacing={2} style={{ height: "100%" }}>
-      <Grid2
-        size={{ xs: 12, lg: 12 }}
-        height={
-          data.length > 90
-            ? 90 * ROW_HEIGHT
-            : (data.length + 1) * ROW_HEIGHT + ROW_GAP
-        }
-      >
+    <Grid2 container spacing={10}>
+      <Grid2 size={{ xs: 12, lg: 11.8 }}>
         <TablePanelWithData
           title={"Models"}
           data={data}
           columns={columns}
           dataGridProps={{ getRowId: (el: any) => el.name }}
           showFooter={true}
+          disableAutoPageSize={true}
+          customStyle={{
+            maxHeight: 1200,
+          }}
         />
       </Grid2>
     </Grid2>

torchci/components/metrics/panels/TablePanel.tsx

@@ -2,6 +2,7 @@ import HelpIcon from "@mui/icons-material/Help";
 import { Skeleton, Typography } from "@mui/material";
 import IconButton from "@mui/material/IconButton";
 import { DataGrid, GridColDef } from "@mui/x-data-grid";
+import { CSSProperties } from "react";
 import useSWR from "swr";
 
 const fetcher = (url: string) => fetch(url).then((res) => res.json());
@@ -64,13 +65,17 @@ export function TablePanelWithData({
   // An optional flag to show the table footer
   showFooter,
   pageSize,
+  disableAutoPageSize,
+  customStyle,
 }: {
   title: string;
   data: any;
   columns: GridColDef[];
   dataGridProps: any;
   helpLink?: string;
   showFooter?: boolean;
+  disableAutoPageSize?: boolean;
+  customStyle?: CSSProperties;
   pageSize?: number;
 }) {
   if (data === undefined) {
@@ -95,15 +100,20 @@ export function TablePanelWithData({
   }
 
   return (
-    <DataGrid
-      {...dataGridProps}
-      density={"compact"}
-      rows={data}
-      columns={columns}
-      hideFooter={!showFooter}
-      autoPageSize={showFooter && pageSize === undefined}
-      pageSize={pageSize}
-      slots={{ toolbar: Header }}
-    />
+    <>
+      <DataGrid
+        style={customStyle}
+        {...dataGridProps}
+        density={"compact"}
+        rows={data}
+        columns={columns}
+        hideFooter={!showFooter}
+        autoPageSize={
+          showFooter && pageSize === undefined && !disableAutoPageSize
+        }
+        pageSize={pageSize}
+        slots={{ toolbar: Header }}
+      />
+    </>
   );
 }