Build dynamic rendering with compiler regression page

torchci/components/benchmark/compilers/common.tsx

@@ -95,3 +95,6 @@ export const DISPLAY_KEYS_TO_HIGHLIGHT: { [k: string]: string } = {
   None: DEFAULT_HIGHLIGHT_KEY,
   Max_autotune: "max_autotune",
 };
+
+export const COMPILERS_DTYPES_V2 = ["amp", "float16", "bfloat16", "none"];
+export const COMPILERS_MODES_V2 = ["training", "inference", "none"];

torchci/components/benchmark/v3/BenchmarkRegressionPage.tsx

@@ -0,0 +1,30 @@
+import dayjs from "dayjs";
+import utc from "dayjs/plugin/utc";
+import { BenchmarkDashboardStoreProvider } from "lib/benchmark/store/benchmark_dashboard_provider";
+import BenchmarkSideBar from "./components/benchmarkSideBar/BenchmarkSideBar";
+import { getConfig } from "./configs/configBook";
+dayjs.extend(utc);
+
+export default function BenchmarkRegressionPage({
+  benchmarkId,
+  initial,
+}: {
+  benchmarkId: string;
+  initial: any;
+}) {
+  const config = getConfig(benchmarkId);
+
+  // get dynamic componenet if any registered, otherwise use default
+  const Comp = config.getDataRenderComponent();
+
+  return (
+    <BenchmarkDashboardStoreProvider key={benchmarkId} initial={initial}>
+      <div style={{ display: "flex" }}>
+        <BenchmarkSideBar />
+        <main style={{ flex: 1 }}>
+          <Comp />
+        </main>
+      </div>
+    </BenchmarkDashboardStoreProvider>
+  );
+}

torchci/components/benchmark/v3/components/benchmarkSideBar/BenchmarkSideBar.tsx

@@ -0,0 +1,147 @@
+import ChevronLeftIcon from "@mui/icons-material/ChevronLeft";
+import ChevronRightIcon from "@mui/icons-material/ChevronRight";
+import { Box, Divider, IconButton, Typography } from "@mui/material";
+import { useEffect, useRef, useState } from "react";
+import { CommitWorflowSelectSection } from "./components/CommitWorkfowSelectSection";
+import { SideBarMainSection } from "./components/SideBarMainSection";
+
+const SIDEBAR_WIDTH = 300; // expanded width
+const RAIL_WIDTH = 44; // collapsed width
+const WIDTH_MS = 300;
+const FADE_MS = 200;
+
+const styles = {
+  container: (open: boolean) => (theme: any) => ({
+    width: open
+      ? {
+          sm: "250px",
+          md: "300px",
+          lg: "350px",
+        }
+      : RAIL_WIDTH,
+    transition: theme.transitions.create("width", {
+      duration: WIDTH_MS,
+    }),
+    flexShrink: 0,
+  }),
+
+  inner: {
+    position: "sticky",
+    top: 0,
+    height: "100dvh",
+    borderRight: 1,
+    borderColor: "divider",
+    bgcolor: "background.paper",
+    display: "flex",
+    flexDirection: "column",
+    overflow: "hidden",
+    p: 1, // keep padding constant to avoid layout shift
+  },
+
+  headerRow: {
+    display: "flex",
+    alignItems: "center",
+    marginBottom: 2,
+  },
+
+  title: { whiteSpace: "nowrap" },
+  toggleBox: { marginLeft: "auto" },
+  content: (visible: boolean) => ({
+    opacity: visible ? 1 : 0,
+    transform: visible ? "translateX(0)" : "translateX(-6px)",
+    transition: `opacity ${FADE_MS}ms ease, transform ${FADE_MS}ms ease`,
+    pointerEvents: visible ? "auto" : "none",
+  }),
+
+  collapsedPlaceholder: {
+    flex: 1,
+    display: "flex",
+    alignItems: "center",
+    justifyContent: "center",
+  },
+};
+
+/**
+ * Benchmark sidebar (left rail)
+ * can be collapsed to a rail with a toggle button
+ */
+export default function BenchmarkSideBar() {
+  const [open, setOpen] = useState(true);
+
+  // initial = open → first paint shows content when open
+  const [contentMounted, setContentMounted] = useState(open);
+  const [contentVisible, setContentVisible] = useState(open);
+
+  const prevOpenRef = useRef(open);
+  const toggle = () => setOpen((o) => !o);
+
+  useEffect(() => {
+    // Only run this logic when open actually changes (not on first render)
+    if (prevOpenRef.current === open) return;
+
+    if (open) {
+      // Opening: mount first, keep hidden; will show after width transition ends
+      setContentMounted(true);
+      setContentVisible(false);
+    } else {
+      // Closing: hide immediately (no flash), keep mounted until width transition ends
+      setContentVisible(false);
+    }
+
+    prevOpenRef.current = open;
+  }, [open]);
+
+  const handleTransitionEnd = (e: React.TransitionEvent<HTMLDivElement>) => {
+    if (e.propertyName !== "width") return;
+
+    if (open) {
+      // Finished expanding → reveal
+      setContentVisible(true);
+    } else {
+      // Finished collapsing → unmount
+      setContentMounted(false);
+    }
+  };
+
+  const SidebarTitleAndToggle = () => (
+    <Box sx={styles.headerRow}>
+      {open && (
+        <Typography variant="h6" sx={styles.title}>
+          Search
+        </Typography>
+      )}
+      <Box sx={styles.toggleBox}>
+        <IconButton
+          size="small"
+          onClick={toggle}
+          aria-label={open ? "Collapse sidebar" : "Expand sidebar"}
+        >
+          {open ? <ChevronLeftIcon /> : <ChevronRightIcon />}
+        </IconButton>
+      </Box>
+    </Box>
+  );
+
+  return (
+    <Box
+      component="aside"
+      sx={styles.container(open)}
+      onTransitionEnd={handleTransitionEnd}
+    >
+      <Box sx={styles.inner}>
+        {/* Top bar (always visible) */}
+        <SidebarTitleAndToggle />
+        {/* Content: visible immediately on first open; deferred on toggled open; faded on close */}
+        {contentMounted ? (
+          <Box sx={styles.content(contentVisible)}>
+            <SideBarMainSection />
+            <Divider />
+            <CommitWorflowSelectSection />
+          </Box>
+        ) : (
+          <Box sx={styles.collapsedPlaceholder} />
+        )}
+      </Box>
+    </Box>
+  );
+}

torchci/components/benchmark/v3/components/benchmarkSideBar/components/BranchDropdown.tsx

@@ -0,0 +1,104 @@
+import { Alert } from "@mui/material";
+import { Box } from "@mui/system";
+import { UMDenseDropdown } from "components/uiModules/UMDenseComponents";
+
+type BranchDropdownsProps = {
+  type: string;
+  lBranch: string;
+  rBranch: string;
+  setLBranch: (val: string) => void;
+  setRBranch: (val: string) => void;
+  branchOptions?: string[];
+};
+
+const styles = {
+  missingBranch: {
+    width: 1,
+    wordBreak: "break-word",
+    whiteSpace: "normal",
+    padding: 0.2,
+    // ↓ shrink the text inside the Alert
+    "& .MuiAlert-message": {
+      fontSize: "0.7rem", // ~13px
+      lineHeight: 1.4,
+    },
+
+    // (optional) shrink the icon to match the smaller text
+    "& .MuiAlert-icon": {
+      padding: 0.8, // tighten spacing
+      "& svg": { fontSize: 20 },
+    },
+  },
+};
+
+/**
+ *
+ * BranchDropdown UI component
+ * @param {string} type - type of the dropdown, can be "comparison" or "single".
+ * @param {string} lBranch - left branch
+ * @param {string} rBranch - right branch
+ * @param {function} setLBranch - set left branch
+ * @param {function} setRBranch - set right branch
+ *
+ * @returns
+ */
+const SectionShell: React.FC<{ children: React.ReactNode }> = ({
+  children,
+}) => (
+  <Box
+    sx={{
+      width: 1, // fill parent width
+      minWidth: 0, // IMPORTANT in flex layouts to allow wrapping
+      display: "grid", // keeps children from affecting width
+      gap: 1,
+    }}
+  >
+    {children}
+  </Box>
+);
+
+export function BranchDropdowns({
+  type,
+  lBranch,
+  rBranch,
+  setLBranch,
+  setRBranch,
+  branchOptions,
+}: BranchDropdownsProps) {
+  const empty = !branchOptions || branchOptions.length === 0;
+
+  return (
+    <SectionShell>
+      {empty ? (
+        <Alert severity="warning" sx={styles.missingBranch}>
+          No branch is found, please select other features.
+        </Alert>
+      ) : type === "comparison" ? (
+        <>
+          <UMDenseDropdown
+            dtype={lBranch}
+            setDType={setLBranch}
+            dtypes={branchOptions}
+            label="Left Branch"
+          />
+          <UMDenseDropdown
+            dtype={rBranch}
+            setDType={setRBranch}
+            dtypes={branchOptions}
+            label="Right Branch"
+          />
+        </>
+      ) : (
+        <UMDenseDropdown
+          dtype={lBranch}
+          setDType={(val: string) => {
+            setLBranch(val);
+            setRBranch(val);
+          }}
+          dtypes={branchOptions}
+          label="Branch"
+        />
+      )}
+    </SectionShell>
+  );
+}