New Operator Microbench With Auto Component Dashboard (#7363)

# Overview 
Set up Pytorch Operateor Microbench And  auto-style dashabord

## Auto vs Fanout
- auto: Each component in auto calls api to fetch data
- fanout: data are passed from the center parent

## Details
1. fix bug in TimeSeriesTable
2. add default metrics filter option based on listMetadata api
3. set up customzied config for Pytorch Operateor Microbench
4. configure a default auto style configuration

## Next step 
1. add pairwise table ( only render two workflows)
2. set up model detail view
3. support navigation to details view from the dashboard

Demo Link

https://torchci-git-newbenchmicro2-fbopensource.vercel.app/benchmark/v3/dashboard/pytorch_operator_microbenchmark

Author: yangw-dev

torchci/components/benchmark_v3/components/benchmarkSideBar/components/SideBarMainSection.tsx

@@ -66,10 +66,13 @@ export function SideBarMainSection() {
   // pushUrlFromStore();
 
   // 1) Read benchmarkId (low-churn) to fetch config
-  const benchmarkId = useDashboardSelector((s) => s.benchmarkId);
+  const { benchmarkId, type } = useDashboardSelector((s) => ({
+    benchmarkId: s.benchmarkId,
+    type: s.type,
+  }));
 
   const getConfig = useBenchmarkBook((s) => s.getConfig);
-  const config = getConfig(benchmarkId);
+  const config = getConfig(benchmarkId, type);
   const dataBinding = config.dataBinding;
 
   const required_filter_fields = config.raw?.required_filter_fields ?? [];

torchci/components/benchmark_v3/components/benchmarkSideBar/components/commits/CommitWorkfowSelectSection.tsx

@@ -1,6 +1,7 @@
 import { Typography } from "@mui/material";
 import { Stack } from "@mui/system";
 import { QueryParameterConverterInputs } from "components/benchmark_v3/configs/utils/dataBindingRegistration";
+import { CenteredLoader } from "components/common/LoadingIcon";
 import { UMDenseCommitDropdown } from "components/uiModules/UMDenseComponents";
 import { useBenchmarkCommitsData } from "lib/benchmark/api_helper/fe/hooks";
 import { useBenchmarkBook } from "lib/benchmark/store/benchmark_config_book";
@@ -16,6 +17,7 @@ import { useEffect, useState } from "react";
 export function CommitWorflowSelectSection() {
   const {
     repo,
+    type,
     benchmarkName,
     benchmarkId,
     committedTime,
@@ -29,6 +31,7 @@ export function CommitWorflowSelectSection() {
     setLcommit,
     setRcommit,
   } = useDashboardSelector((s) => ({
+    type: s.type,
     benchmarkId: s.benchmarkId,
     committedTime: s.committedTime,
     committedFilters: s.committedFilters,
@@ -48,7 +51,7 @@ export function CommitWorflowSelectSection() {
   const [rightList, setRightList] = useState<BenchmarkCommitMeta[]>([]);
 
   const getConfig = useBenchmarkBook((s) => s.getConfig);
-  const config = getConfig(benchmarkId);
+  const config = getConfig(benchmarkId, type);
   const dataBinding = config.dataBinding;
   const required_filter_fields = config.raw?.required_filter_fields ?? [];
 
@@ -137,7 +140,7 @@ export function CommitWorflowSelectSection() {
   ]);
 
   if (error) return <div>Error: {error.message}</div>;
-  if (isLoading || !data) return null;
+  if (isLoading || !data) return <CenteredLoader />;
 
   return (
     <Stack spacing={1.5} direction={"row"} alignItems={"center"}>

torchci/components/benchmark_v3/components/benchmarkSideBar/components/filters/BenchmarkFilterDropdownGroup.tsx

@@ -0,0 +1,66 @@
+import { Stack } from "@mui/system";
+import {
+  UMDenseDropdown,
+  UMDenseDropdownOption,
+} from "components/uiModules/UMDenseComponents";
+
+/**
+ * The enum type of benchmark dashboard dropgroup item
+ * this is used to render dropdowns dynamically in the LLMs Benchmark page.
+ * the field value must match the fields in LLMsBenchmarkProps
+ */
+export enum BenchmarkDropdownGroupItemType {
+  ModelName = "model",
+  BackendName = "backend",
+  ModeName = "modeN",
+  DtypeName = "dtype",
+  DeviceName = "deviceName",
+  ArchName = "arch",
+  Qps = "qps",
+}
+
+/**
+ * The input item for benchmark dashboard dropdown
+ * @property DropdownGroupItemType enum type
+ * @property options the list of options in the dropdown
+ * @property labelName the label name of the dropdown
+ */
+export interface BenchmarkDropdownGroupItem {
+  type: BenchmarkDropdownGroupItemType;
+  options: (string | UMDenseDropdownOption)[];
+  labelName: string;
+}
+
+export default function BenchmarkDropdownGroup({
+  onChange,
+  props,
+  optionListMap,
+}: {
+  onChange: (_key: string, _value: any) => void;
+  props: any;
+  optionListMap: BenchmarkDropdownGroupItem[];
+}) {
+  return (
+    <Stack spacing={1}>
+      {optionListMap.length > 1 &&
+        optionListMap.map((option, index) => {
+          const type = option.type;
+          const olist = option.options;
+          if (!olist || olist.length <= 1) {
+            return null;
+          }
+          return (
+            <UMDenseDropdown
+              key={index}
+              dtype={props[type]}
+              setDType={(val: any) => {
+                onChange(type, val);
+              }}
+              dtypes={olist}
+              label={option.labelName}
+            />
+          );
+        })}
+    </Stack>
+  );
+}

torchci/components/benchmark_v3/components/benchmarkSideBar/components/filters/DefaultSideBarMetricsDropdowns.tsx

@@ -1,3 +1,79 @@
+import { Alert } from "@mui/material";
+import { Box } from "@mui/system";
+import LoadingPage from "components/common/LoadingPage";
+import {
+  useBenchmarkConfigBook,
+  useListBenchmarkMetadata,
+} from "lib/benchmark/api_helper/fe/hooks";
+import { useDashboardSelector } from "lib/benchmark/store/benchmark_dashboard_provider";
+import BenchmarkDropdownGroup from "./BenchmarkFilterDropdownGroup";
+
 export default function DefaultMetricsDropdowns() {
-  return <div>Not supported yet: comming soon</div>;
+  const {
+    setStagedFilter,
+    repo,
+    type,
+    benchmarkId,
+    benchmarkName,
+    stagedTime,
+    stagedFilters,
+  } = useDashboardSelector((s) => ({
+    setStagedFilter: s.setStagedFilter,
+    repo: s.repo,
+    type: s.type,
+    benchmarkName: s.benchmarkName,
+    benchmarkId: s.benchmarkId,
+    stagedTime: s.stagedTime,
+    stagedFilters: s.stagedFilters,
+  }));
+
+  const configHandler = useBenchmarkConfigBook(benchmarkId, type);
+  const ready = !!configHandler && !!stagedTime?.start && !!stagedTime?.end;
+
+  // convert to the query params
+  const queryParams = ready
+    ? configHandler.dataBinding.toQueryParams({
+        repo: repo,
+        benchmarkName: benchmarkName,
+        timeRange: stagedTime,
+        filters: {}, // the dropdown does not rerender when filter changes, since it manages the filter optons
+      })
+    : null;
+
+  const {
+    data: resp,
+    isLoading: isLoading,
+    error: error,
+  } = useListBenchmarkMetadata(benchmarkId, queryParams);
+
+  if (isLoading) {
+    return <LoadingPage />;
+  }
+
+  if (error) {
+    return (
+      <Alert severity="error"> DefaultMetricsDropdowns {error.message}</Alert>
+    );
+  }
+
+  const metadataList = resp?.data || [];
+
+  return (
+    <Box>
+      <BenchmarkDropdownGroup
+        optionListMap={metadataList}
+        onChange={(_key: string, _value: any) => {
+          if (_key == "deviceName") {
+            const v = _value.split("||");
+            if (v.length === 2) {
+              setStagedFilter("device", v[0]);
+              setStagedFilter("arch", v[1]);
+            }
+          }
+          setStagedFilter(_key, _value);
+        }}
+        props={stagedFilters}
+      />
+    </Box>
+  );
 }

torchci/components/benchmark_v3/components/benchmarkSideBar/components/useUrlSync.tsx

@@ -57,10 +57,11 @@ export function useUrlStoreSync<T extends Record<string, any>>(
     // prevent no-op replace and re-pushing the same thing
     if (nextSig === currSig || nextSig === lastPushedSigRef.current) return;
 
+    const [pathname] = router.asPath.split("?"); // strip query
     // briefly mark as syncing to avoid URL->store echo
     isApplyingUrlRef.current = true;
     router
-      .replace({ pathname: router.pathname, query: nextQueryObj }, undefined, {
+      .replace({ pathname: pathname, query: nextQueryObj }, undefined, {
         shallow: true,
       })
       .finally(() => {

torchci/components/benchmark_v3/components/common/BenchmarkIdNotRegisterError.tsx

@@ -0,0 +1,16 @@
+import { Alert } from "@mui/material";
+
+export function BenchmarkIdNotRegisterError({
+  benchmarkId,
+  content,
+}: {
+  benchmarkId: string;
+  content: string;
+}) {
+  return (
+    <Alert severity="error">
+      {content}BenchmarkId `{benchmarkId}` is not registered in the repo, please
+      register it as BenchmarkIdMappingItem in BENCHMARK_ID_MAPPING in the store
+    </Alert>
+  );
+}

torchci/components/benchmark_v3/components/dataRender/auto/autoComponents.tsx

@@ -0,0 +1,84 @@
+import { Alert } from "@mui/material";
+import { Grid } from "@mui/system";
+import { AutoComponentProps } from "components/benchmark_v3/configs/utils/autoRegistration";
+import LoadingPage from "components/common/LoadingPage";
+import {
+  useBenchmarkCommittedContext,
+  useBenchmarkTimeSeriesData,
+} from "lib/benchmark/api_helper/fe/hooks";
+import { UIRenderConfig } from "lib/benchmark/store/benchmark_config_book";
+import { ComparisonTable } from "../components/benchmarkTimeSeries/components/BenchmarkTimeSeriesComparisonSection/BenchmarkTimeSeriesComparisonTable/ComparisonTable";
+
+export function AutoBenchmarkTimeSeriesTable({ config }: AutoComponentProps) {
+  const ctx = useBenchmarkCommittedContext();
+
+  const ready =
+    !!ctx &&
+    !!ctx.committedTime?.start &&
+    !!ctx.committedTime?.end &&
+    !!ctx.committedLbranch &&
+    !!ctx.committedRbranch &&
+    ctx.requiredFilters.every((k: string) => !!ctx.committedFilters[k]);
+
+  const dataBinding = ctx?.configHandler.dataBinding;
+  const uiRenderConfig = config as UIRenderConfig;
+
+  const branches = [
+    ...new Set(
+      [ctx.committedLbranch, ctx.committedRbranch].filter((b) => b.length > 0)
+    ),
+  ];
+
+  // convert to the query params
+  const params = dataBinding.toQueryParams({
+    repo: ctx.repo,
+    branches: branches,
+    benchmarkName: ctx.benchmarkName,
+    timeRange: ctx.committedTime,
+    filters: ctx.committedFilters,
+    maxSampling: ctx.committedMaxSampling,
+  });
+
+  const queryParams: any | null = ready ? params : null;
+  // fetch the bechmark data
+  const {
+    data: resp,
+    isLoading,
+    error,
+  } = useBenchmarkTimeSeriesData(ctx.benchmarkId, queryParams, ["table"]);
+
+  if (isLoading) {
+    return <LoadingPage />;
+  }
+
+  if (error) {
+    return (
+      <Alert severity="error">
+        (AutoBenchmarkTimeSeriesTable){error.message}
+      </Alert>
+    );
+  }
+  if (!ctx.dataRender?.renders) {
+    return <div>no data render</div>;
+  }
+  if (!resp?.data?.data) {
+    return <div>no data</div>;
+  }
+  const data = resp?.data?.data;
+  return (
+    <Grid container sx={{ m: 1 }}>
+      <Grid size={{ xs: 12 }}>
+        <ComparisonTable
+          data={data["table"]}
+          config={uiRenderConfig.config}
+          lWorkflowId={ctx.lcommit?.workflow_id ?? null}
+          rWorkflowId={ctx.rcommit?.workflow_id ?? null}
+          title={{
+            text: "Comparison Table",
+          }}
+          onSelect={() => {}}
+        />
+      </Grid>
+    </Grid>
+  );
+}

torchci/components/benchmark_v3/components/dataRender/auto/defaultAutoRenderContent.tsx

@@ -27,7 +27,7 @@ export function DefaultAutoRenderContent() {
           const { Component } = getAutoRenderComponent(autoUIConfig);
           return (
             <Box key={index}>
-              <Component />
+              <Component config={autoUIConfig} />
             </Box>
           );
         })}

torchci/components/benchmark_v3/components/dataRender/components/benchmarkTimeSeries/components/BenchmarkTimeSeriesComparisonSection/BenchmarkTimeSeriesComparisonTable/ComparisonTable.tsx

@@ -1,5 +1,10 @@
 import { Typography } from "@mui/material";
-import { DataGrid, GridColDef, GridRowModel } from "@mui/x-data-grid";
+import {
+  DataGrid,
+  GridColDef,
+  GridRowModel,
+  useGridApiRef,
+} from "@mui/x-data-grid";
 import { SelectionDialog } from "components/benchmark_v3/components/common/SelectionDialog";
 import { useMemo, useState } from "react";
 import { ComparisonTableConfig } from "../../../helper";
@@ -28,6 +33,7 @@ export function ComparisonTable({
   };
   onSelect?: (payload: any) => void;
 }) {
+  const apiRef = useGridApiRef();
   // group raw data into rows, each row contains all values across workflowIds
   const rows: GridRowModel[] = useMemo(() => {
     return ToComparisonTableRow(config, data);
@@ -59,6 +65,7 @@ export function ComparisonTable({
     const tail = auto.filter((c) => !head.includes(c));
     return [...head, ...tail];
   }, [rows, columnOrder]);
+
   // Form the columns
   const columns: GridColDef[] = useMemo(
     () =>
@@ -82,8 +89,8 @@ export function ComparisonTable({
         {lWorkflowId} - {rWorkflowId}
       </Typography>
       <DataGrid
+        apiRef={apiRef}
         density="compact"
-        disableRowSelectionOnClick
         rows={rows}
         columns={columns}
         initialState={{