[HUD] Upgrade MUI versions (#6117)

Grid is getting deprecated in favor of Grid2. I'm not sure what Grid2
doesn't like about things not being in Grid items for cost_analysis
page, but putting everything in Grid2 containers helped
Types of some value formatter + render cell callbacks changed. I put a
lot of anys since I'm not sure what the actual type is (I think its the
row and value types?)
Number of rows in a table is max 100. Disabled tests page was getting
around it using a set height? so it is now truncated to 100

90% of this Grid -> Grid2 and xs/lg -> size={{xs, lg}}
I think the important things to look for are cost_analysis page and
disabled tests page

Benefits:
New version lets you change the size of the columns of tables in the UI

torchci/components/additionalTestInfo/TestCounts.tsx

@@ -14,7 +14,7 @@ function TestCountsDataGrid({
   info: any;
   showComparison?: boolean;
 }) {
-  function renderTime(params: GridRenderCellParams<string>) {
+  function renderTime(params: GridRenderCellParams<any, string>) {
     if (params.value === undefined) {
       return <></>;
     }

torchci/components/benchmark/compilers/ModelGraphPanel.tsx

@@ -1,4 +1,4 @@
-import { Grid, Skeleton } from "@mui/material";
+import { Grid2, Skeleton } from "@mui/material";
 import {
   COMMIT_TO_WORKFLOW_ID,
   WORKFLOW_ID_TO_COMMIT,
@@ -153,8 +153,8 @@ export function GraphPanel({
     <>
       <div>
         <h2>Details for {model}</h2>
-        <Grid container spacing={2}>
-          <Grid item xs={12} lg={4} height={GRAPH_ROW_HEIGHT}>
+        <Grid2 container spacing={2}>
+          <Grid2 size={{ xs: 12, lg: 4 }} height={GRAPH_ROW_HEIGHT}>
             <TimeSeriesPanelWithData
               data={chartData}
               series={geomeanSeries}
@@ -176,9 +176,9 @@ export function GraphPanel({
                 },
               }}
             />
-          </Grid>
+          </Grid2>
 
-          <Grid item xs={12} lg={4} height={GRAPH_ROW_HEIGHT}>
+          <Grid2 size={{ xs: 12, lg: 4 }} height={GRAPH_ROW_HEIGHT}>
             <TimeSeriesPanelWithData
               data={chartData}
               series={compTimeSeries}
@@ -201,9 +201,9 @@ export function GraphPanel({
                 },
               }}
             />
-          </Grid>
+          </Grid2>
 
-          <Grid item xs={12} lg={4} height={GRAPH_ROW_HEIGHT}>
+          <Grid2 size={{ xs: 12, lg: 4 }} height={GRAPH_ROW_HEIGHT}>
             <TimeSeriesPanelWithData
               data={chartData}
               series={memorySeries}
@@ -225,9 +225,9 @@ export function GraphPanel({
                 },
               }}
             />
-          </Grid>
+          </Grid2>
 
-          <Grid item xs={12} lg={4} height={GRAPH_ROW_HEIGHT}>
+          <Grid2 size={{ xs: 12, lg: 4 }} height={GRAPH_ROW_HEIGHT}>
             <TimeSeriesPanelWithData
               data={chartData}
               series={absTimeSeries}
@@ -250,9 +250,9 @@ export function GraphPanel({
                 },
               }}
             />
-          </Grid>
+          </Grid2>
 
-          <Grid item xs={12} lg={4} height={GRAPH_ROW_HEIGHT}>
+          <Grid2 size={{ xs: 12, lg: 4 }} height={GRAPH_ROW_HEIGHT}>
             <TimeSeriesPanelWithData
               data={chartData}
               series={peakMemoryUsageTimeSeries}
@@ -275,8 +275,8 @@ export function GraphPanel({
                 },
               }}
             />
-          </Grid>
-        </Grid>
+          </Grid2>
+        </Grid2>
       </div>
       <div>
         <table>

torchci/components/benchmark/compilers/ModelPanel.tsx

@@ -1,4 +1,4 @@
-import { Grid } from "@mui/material";
+import { Grid2 } from "@mui/material";
 import { GridCellParams, GridRenderCellParams } from "@mui/x-data-grid";
 import { LOG_PREFIX, SHA_DISPLAY_LENGTH } from "components/benchmark/common";
 import {
@@ -142,8 +142,11 @@ export function ModelPanel({
 
   const minEntries = data.length > MIN_ENTRIES ? data.length : MIN_ENTRIES;
   return (
-    <Grid container spacing={2} style={{ height: "100%" }}>
-      <Grid item xs={12} lg={12} height={minEntries * ROW_HEIGHT + ROW_GAP}>
+    <Grid2 container spacing={2} style={{ height: "100%" }}>
+      <Grid2
+        size={{ xs: 12, lg: 12 }}
+        height={minEntries * ROW_HEIGHT + ROW_GAP}
+      >
         <TablePanelWithData
           title={"Models"}
           data={data}
@@ -152,7 +155,7 @@ export function ModelPanel({
               field: "metadata",
               headerName: "Name",
               flex: 1,
-              cellClassName: (params: GridCellParams<any>) => {
+              cellClassName: (params: GridCellParams<any, any>) => {
                 const name = params.value.name;
                 if (name === undefined) {
                   return "";
@@ -228,7 +231,7 @@ export function ModelPanel({
                   ? ACCURACY_HEADER
                   : `${ACCURACY_HEADER}: ${DIFF_HEADER}`,
               flex: 1,
-              cellClassName: (params: GridCellParams<any>) => {
+              cellClassName: (params: GridCellParams<any, any>) => {
                 const v = params.value;
                 if (v === undefined || v.r == undefined) {
                   return "";
@@ -281,7 +284,7 @@ export function ModelPanel({
               field: "speedup",
               headerName: SPEEDUP_HEADER,
               flex: 1,
-              cellClassName: (params: GridCellParams<any>) => {
+              cellClassName: (params: GridCellParams<any, any>) => {
                 const v = params.value;
                 if (v === undefined || v.r === 0) {
                   return "";
@@ -338,7 +341,7 @@ export function ModelPanel({
               field: "compilation_latency",
               headerName: COMPILATION_LATENCY_HEADER,
               flex: 1,
-              cellClassName: (params: GridCellParams<any>) => {
+              cellClassName: (params: GridCellParams<any, any>) => {
                 const v = params.value;
                 if (v === undefined || v.r === 0) {
                   return "";
@@ -388,7 +391,7 @@ export function ModelPanel({
               field: "compression_ratio",
               headerName: MEMORY_HEADER,
               flex: 1,
-              cellClassName: (params: GridCellParams<any>) => {
+              cellClassName: (params: GridCellParams<any, any>) => {
                 const v = params.value;
                 if (v === undefined || v.r === 0) {
                   return "";
@@ -442,7 +445,7 @@ export function ModelPanel({
               field: "abs_latency",
               headerName: ABS_LATENCY_HEADER,
               flex: 1,
-              cellClassName: (params: GridCellParams<any>) => {
+              cellClassName: (params: GridCellParams<any, any>) => {
                 const v = params.value;
                 if (v === undefined || v.r === 0) {
                   return "";
@@ -492,7 +495,7 @@ export function ModelPanel({
               field: "dynamo_peak_mem",
               headerName: PEAK_MEMORY_USAGE_HEADER,
               flex: 1,
-              cellClassName: (params: GridCellParams<any>) => {
+              cellClassName: (params: GridCellParams<any, any>) => {
                 const v = params.value;
                 if (v === undefined || v.r === 0) {
                   return "";
@@ -541,7 +544,7 @@ export function ModelPanel({
           ]}
           dataGridProps={{ getRowId: (el: any) => el.name }}
         />
-      </Grid>
-    </Grid>
+      </Grid2>
+    </Grid2>
   );
 }

torchci/components/benchmark/compilers/SummaryGraphPanel.tsx

@@ -1,4 +1,4 @@
-import { Grid, Skeleton } from "@mui/material";
+import { Grid2, Skeleton } from "@mui/material";
 import { COMMIT_TO_WORKFLOW_ID } from "components/benchmark/BranchAndCommitPicker";
 import { TIME_FIELD_NAME } from "components/benchmark/common";
 import { SUITES } from "components/benchmark/compilers/SuitePicker";
@@ -242,8 +242,8 @@ function SuiteGraphPanel({
   );
 
   return (
-    <Grid container spacing={2}>
-      <Grid item xs={12} lg={6} height={GRAPH_ROW_HEIGHT}>
+    <Grid2 container spacing={2}>
+      <Grid2 size={{ xs: 12, lg: 6 }} height={GRAPH_ROW_HEIGHT}>
         <TimeSeriesPanelWithData
           data={passrate}
           series={passrateSeries}
@@ -266,9 +266,9 @@ function SuiteGraphPanel({
             },
           }}
         />
-      </Grid>
+      </Grid2>
 
-      <Grid item xs={12} lg={6} height={GRAPH_ROW_HEIGHT}>
+      <Grid2 size={{ xs: 12, lg: 6 }} height={GRAPH_ROW_HEIGHT}>
         <TimeSeriesPanelWithData
           data={geomean}
           series={geomeanSeries}
@@ -291,9 +291,9 @@ function SuiteGraphPanel({
             },
           }}
         />
-      </Grid>
+      </Grid2>
 
-      <Grid item xs={12} lg={6} height={GRAPH_ROW_HEIGHT}>
+      <Grid2 size={{ xs: 12, lg: 6 }} height={GRAPH_ROW_HEIGHT}>
         <TimeSeriesPanelWithData
           data={compTime}
           series={compTimeSeries}
@@ -316,9 +316,9 @@ function SuiteGraphPanel({
             },
           }}
         />
-      </Grid>
+      </Grid2>
 
-      <Grid item xs={12} lg={6} height={GRAPH_ROW_HEIGHT}>
+      <Grid2 size={{ xs: 12, lg: 6 }} height={GRAPH_ROW_HEIGHT}>
         <TimeSeriesPanelWithData
           data={memory}
           series={memorySeries}
@@ -340,9 +340,9 @@ function SuiteGraphPanel({
             },
           }}
         />
-      </Grid>
+      </Grid2>
 
-      <Grid item xs={12} lg={6} height={GRAPH_ROW_HEIGHT}>
+      <Grid2 size={{ xs: 12, lg: 6 }} height={GRAPH_ROW_HEIGHT}>
         <TimeSeriesPanelWithData
           data={peakMemory}
           series={peakMemorySeries}
@@ -365,9 +365,9 @@ function SuiteGraphPanel({
             },
           }}
         />
-      </Grid>
+      </Grid2>
 
-      <Grid item xs={12} lg={6} height={GRAPH_ROW_HEIGHT}>
+      <Grid2 size={{ xs: 12, lg: 6 }} height={GRAPH_ROW_HEIGHT}>
         <TimeSeriesPanelWithData
           data={executionTime}
           series={executionTimeSeries}
@@ -390,7 +390,7 @@ function SuiteGraphPanel({
             },
           }}
         />
-      </Grid>
-    </Grid>
+      </Grid2>
+    </Grid2>
   );
 }

torchci/components/benchmark/compilers/SummaryPanel.tsx

@@ -1,4 +1,4 @@
-import { Grid } from "@mui/material";
+import { Grid2 } from "@mui/material";
 import { GridCellParams, GridRenderCellParams } from "@mui/x-data-grid";
 import {
   ACCURACY_THRESHOLD,
@@ -214,11 +214,9 @@ export function SummaryPanel({
 
   return (
     <div>
-      <Grid container spacing={2} style={{ height: "100%" }}>
-        <Grid
-          item
-          xs={12}
-          lg={6}
+      <Grid2 container spacing={2} style={{ height: "100%" }}>
+        <Grid2
+          size={{ xs: 12, lg: 6 }}
           height={ROW_HEIGHT * Object.keys(passrate).length + ROW_GAP}
         >
           <TablePanelWithData
@@ -267,7 +265,7 @@ export function SummaryPanel({
                       );
                     }
                   },
-                  cellClassName: (params: GridCellParams<any>) => {
+                  cellClassName: (params: GridCellParams<any, any>) => {
                     const v = params.value;
                     if (v === undefined) {
                       return "";
@@ -309,12 +307,10 @@ export function SummaryPanel({
             )}
             dataGridProps={{ getRowId: (el: any) => el.suite + el.compiler }}
           />
-        </Grid>
+        </Grid2>
 
-        <Grid
-          item
-          xs={12}
-          lg={6}
+        <Grid2
+          size={{ xs: 12, lg: 6 }}
           height={ROW_HEIGHT * Object.keys(geomean).length + ROW_GAP}
         >
           <TablePanelWithData
@@ -360,7 +356,7 @@ export function SummaryPanel({
                       );
                     }
                   },
-                  cellClassName: (params: GridCellParams<any>) => {
+                  cellClassName: (params: GridCellParams<any, any>) => {
                     const v = params.value;
                     if (
                       v === undefined ||
@@ -404,12 +400,10 @@ export function SummaryPanel({
             )}
             dataGridProps={{ getRowId: (el: any) => el.suite + el.compiler }}
           />
-        </Grid>
+        </Grid2>
 
-        <Grid
-          item
-          xs={12}
-          lg={6}
+        <Grid2
+          size={{ xs: 12, lg: 6 }}
           height={ROW_HEIGHT * Object.keys(compTime).length + ROW_GAP}
         >
           <TablePanelWithData
@@ -455,7 +449,7 @@ export function SummaryPanel({
                       );
                     }
                   },
-                  cellClassName: (params: GridCellParams<any>) => {
+                  cellClassName: (params: GridCellParams<any, any>) => {
                     const v = params.value;
                     if (
                       v === undefined ||
@@ -495,12 +489,10 @@ export function SummaryPanel({
             )}
             dataGridProps={{ getRowId: (el: any) => el.suite + el.compiler }}
           />
-        </Grid>
+        </Grid2>
 
-        <Grid
-          item
-          xs={12}
-          lg={6}
+        <Grid2
+          size={{ xs: 12, lg: 6 }}
           height={ROW_HEIGHT * Object.keys(memory).length + ROW_GAP}
         >
           <TablePanelWithData
@@ -546,7 +538,7 @@ export function SummaryPanel({
                       );
                     }
                   },
-                  cellClassName: (params: GridCellParams<any>) => {
+                  cellClassName: (params: GridCellParams<any, any>) => {
                     const v = params.value;
                     if (
                       v === undefined ||
@@ -592,8 +584,8 @@ export function SummaryPanel({
             )}
             dataGridProps={{ getRowId: (el: any) => el.suite + el.compiler }}
           />
-        </Grid>
-      </Grid>
+        </Grid2>
+      </Grid2>
     </div>
   );
 }