Enable footer for the DataGrid widget to enable paging (#4745)

When the number of metrics exceeds a threshold (100), enable paging and DataGrid footer to view all metrics. <img width="1880" alt="image" src="https://github.com/pytorch/test-infra/assets/502017/2f2a2817-95d8-440d-99a6-443e80f06070">
pytorch · Feb 13, 2024 · a06fd6c · a06fd6c
1 parent 3751549
commit a06fd6c
Show file tree

Hide file tree

Showing 2 changed files with 10 additions and 3 deletions.
diff --git a/torchci/components/metrics/panels/TablePanel.tsx b/torchci/components/metrics/panels/TablePanel.tsx
@@ -95,7 +95,7 @@ export function TablePanelWithData({
       density={"compact"}
       rows={data}
       columns={columns}
-      hideFooter
+      autoPageSize
       components={{
         Toolbar: Header,
       }}

diff --git a/torchci/pages/torchbench/userbenchmark.tsx b/torchci/pages/torchbench/userbenchmark.tsx
@@ -22,6 +22,7 @@ const queryCollection = "torchbench";
 const ROW_GAP = 30;
 const ROW_HEIGHT = 48;
 const MIN_ENTRIES = 10;
+const MAX_ENTRIES = 100;
 const MAX_PYTORCH_VERSIONS = 30;
 const SHA_DISPLAY_LENGTH = 10;
 
@@ -329,7 +330,11 @@ function Report({
   tMetrics = tMetrics === undefined ? {} : tMetrics[0];
   const metrics: Record<string, any>[] = genABMetrics(cMetrics, tMetrics);
   const minEntries =
-    metrics.length > MIN_ENTRIES ? Object.keys(metrics).length : MIN_ENTRIES;
+    metrics.length > MIN_ENTRIES
+      ? Object.keys(metrics).length > MAX_ENTRIES
+        ? MAX_ENTRIES
+        : Object.keys(metrics).length
+      : MIN_ENTRIES;
 
   return (
     <div>
@@ -406,7 +411,9 @@ function Report({
                 },
               },
             ]}
-            dataGridProps={{ getRowId: (el: any) => el.name }}
+            dataGridProps={{
+              getRowId: (el: any) => el.name,
+            }}
           />
         </Grid>
       </Grid>