Fix width for component (#7294)

This just UI render fix when chart has many point, (>40)
make everything dynamically shrink to browser view and no overflow



https://torchci-git-fixwidth-fbopensource.vercel.app/benchmark/compilers_regression

Author: yangw-dev

torchci/components/benchmark/v3/components/common/navigate.tsx

@@ -21,12 +21,11 @@ export async function navigateToDataGrid(
     openToggleSectionById(toggleId);
     await delay(350); // wait for toggle animation
   }
-  const target = scrollToDataGridView(sectionId, keywords, field);
-  await delay(300); // wait for scroll animation
+  const target = await scrollToDataGridView(sectionId, keywords, field);
   return target;
 }
 
-function scrollToDataGridView(
+async function scrollToDataGridView(
   sectionId: string,
   keywords: string[],
   field?: string
@@ -58,7 +57,7 @@ function scrollToDataGridView(
     );
     if (cell) {
       target = cell;
-      scrollingToElement(cell);
+      await scrollingToElement(cell);
     }
   }
   return target;
@@ -85,7 +84,7 @@ export async function navigateToEchartInGroup(
     return null;
   }
   // scroll into view
-  scrollingToElement(target);
+  await scrollingToElement(target);
   return target;
 }
 
@@ -94,11 +93,35 @@ export function getElementById(id: string): HTMLElement | null {
   return document.getElementById(id);
 }
 
-export async function scrollingToElement(
-  target: HTMLElement | null,
-  delay_ts: number = 200
-) {
+export async function scrollingToElement(target: HTMLElement | null) {
   if (!target) return null;
   target.scrollIntoView({ behavior: "smooth", block: "center" });
-  await delay(delay_ts);
+  await waitUntilElementVisible(target);
+}
+
+// Wait until element is visible in the viewport (with timeout)
+export async function waitUntilElementVisible(
+  el: HTMLElement | null,
+  timeout = 1500
+): Promise<void> {
+  if (!el) {
+    return;
+  }
+  const start = performance.now();
+  return new Promise((resolve) => {
+    const check = () => {
+      const rect = el.getBoundingClientRect();
+      const inView =
+        rect.top >= 0 &&
+        rect.bottom <=
+          (window.innerHeight || document.documentElement.clientHeight);
+
+      if (inView || performance.now() - start > timeout) {
+        resolve();
+      } else {
+        requestAnimationFrame(check);
+      }
+    };
+    requestAnimationFrame(check);
+  });
 }

torchci/components/benchmark/v3/components/dataRender/components/benchmarkTimeSeries/components/BenchmarkTimeSeriesChart/BenchmarkTimeSeriesChartGroup.tsx

@@ -89,13 +89,13 @@ export default function BenchmarkTimeSeriesChartGroup({
           chartGroup?.chart
         );
 
-        console.log(g.labels.join("-"), chartGroup?.sectionSelectMode);
-        const enableSelectMode =
-          chartGroup?.sectionSelectMode?.[g.labels.join("-")] ?? true;
+        const maxTimeSeries = groupSeries
+          .map((s) => s.data.length)
+          .reduce((a, b) => Math.max(a, b));
         return (
           <Grid
             key={g.key}
-            size={{ xs: 12, md: 12, lg: 6 }}
+            size={{ xs: 12, md: 12, lg: maxTimeSeries > 40 ? 12 : 6 }}
             id={toBenchmarkTimeseriesChartGroupId(g.key)}
           >
             <Typography variant="h6" sx={{ mb: 1.5 }}>

torchci/components/benchmark/v3/components/dataRender/components/benchmarkTimeSeries/components/BenchmarkTimeSeriesComparisonSection/BenchmarkTimeSeriesComparisonTableSlider.tsx

@@ -116,7 +116,7 @@ export function BenchmarkTimeSeriesComparisonTableSlider({
     [ids, onChange]
   );
 
-  const minWidth = Math.max(200, 50 * ids.length);
+  const minWidth = Math.min(200, 50 * ids.length);
 
   return (
     <Paper sx={{ p: 2, width: "100%", minWidth }}>

torchci/components/benchmark/v3/configs/teams/compilers/CompilerPrecomputeConfirmDialogContent.tsx

@@ -50,13 +50,15 @@ export const CompilerPrecomputeConfirmDialogContent: React.FC<
     const tableId = toBenchamrkTimeSeriesComparisonTableId(
       `metric=${left.metric}`
     );
+
     const table = getElementById(tableId);
     // if the table is not exist,scroll to the toggle section
     if (!table) {
       scrollingToElement(elToggle);
       triggerUpdate();
       return;
     }
+
     const cell = await navigateToDataGrid(
       tableId,
       [`${left?.compiler}`],

torchci/components/benchmark/v3/pages/BenchmarkRegressionPage.tsx

@@ -1,3 +1,4 @@
+import { Box } from "@mui/system";
 import dayjs from "dayjs";
 import utc from "dayjs/plugin/utc";
 import { BenchmarkDashboardStoreProvider } from "lib/benchmark/store/benchmark_dashboard_provider";
@@ -19,12 +20,12 @@ export default function BenchmarkRegressionPage({
 
   return (
     <BenchmarkDashboardStoreProvider key={benchmarkId} initial={initial}>
-      <div style={{ display: "flex" }}>
+      <Box style={{ display: "flex", minWidth: "800px", width: "100%" }}>
         <BenchmarkSideBar />
-        <main style={{ flex: 1 }}>
+        <Box style={{ flex: 1, minWidth: "600px" }}>
           <Comp />
-        </main>
-      </div>
+        </Box>
+      </Box>
     </BenchmarkDashboardStoreProvider>
   );
 }