Add AutoBenchmarkShortcutCardList

torchci/components/benchmark_v3/components/common/BenchmarkShortcutCardList.tsx

@@ -0,0 +1,156 @@
+import ChevronLeftIcon from "@mui/icons-material/ChevronLeft";
+import ChevronRightIcon from "@mui/icons-material/ChevronRight";
+import {
+  Box,
+  Card,
+  CardActionArea,
+  CardContent,
+  IconButton,
+  Typography,
+} from "@mui/material";
+import React, { useMemo, useRef } from "react";
+// import { useRouter } from "next/router";
+
+export type BenchmarkShortcutItem = {
+  displayName: string;
+  fieldName: string;
+  value: string;
+  description?: string;
+  url?: string;
+};
+
+type BenchmarkShortcutCardListProps = {
+  benchmarkId: string;
+  // whatever your query params shape is
+  data: any;
+  title?: string;
+  /**
+   * Optional custom navigation (e.g. Next.js router.push).
+   * If not provided, falls back to window.location.href.
+   */
+  onNavigate?: (item: BenchmarkShortcutItem) => void;
+};
+
+export const BenchmarkShortcutCardList: React.FC<
+  BenchmarkShortcutCardListProps
+> = ({ benchmarkId, data, title = "Shortcuts", onNavigate }) => {
+  const scrollContainerRef = useRef<HTMLDivElement | null>(null);
+  // const router = useRouter();
+
+  // ---- map API response -> cardList ----
+  const cardList: BenchmarkShortcutItem[] = useMemo(() => {
+    if (!data) return [];
+    return data;
+  }, [data]);
+
+  // ---- scrolling helpers ----
+  const handleScroll = (direction: "left" | "right") => {
+    const node = scrollContainerRef.current;
+    if (!node) return;
+    const delta = direction === "left" ? -320 : 320;
+    node.scrollBy({ left: delta, behavior: "smooth" });
+  };
+
+  // ---- navigation ----
+  const handleClickCard = (item: BenchmarkShortcutItem) => {
+    if (onNavigate) {
+      onNavigate(item);
+      return;
+    }
+    // Fallback: normal navigation
+    if (typeof window !== "undefined" && item.url) {
+      window.location.href = item.url;
+    }
+  };
+
+  if (!cardList.length) {
+    return null;
+  }
+
+  // ---- main UI ----
+  return (
+    <Box sx={{ mx: 1 }}>
+      <Box
+        sx={{
+          display: "flex",
+          alignItems: "center",
+          mb: 1,
+          justifyContent: "flex-start",
+        }}
+      >
+        <Typography variant="subtitle1" fontWeight={600}>
+          {title}
+        </Typography>
+        <Box>
+          <IconButton
+            size="small"
+            aria-label="Scroll left"
+            onClick={() => handleScroll("left")}
+          >
+            <ChevronLeftIcon fontSize="small" />
+          </IconButton>
+          <IconButton
+            size="small"
+            aria-label="Scroll right"
+            onClick={() => handleScroll("right")}
+          >
+            <ChevronRightIcon fontSize="small" />
+          </IconButton>
+        </Box>
+      </Box>
+
+      <Box
+        ref={scrollContainerRef}
+        sx={{
+          display: "flex",
+          overflowX: "auto",
+          width: "80%",
+          border: "1px solid #ccc",
+          borderRadius: 1,
+          "::-webkit-scrollbar": { height: 6 },
+          "::-webkit-scrollbar-thumb": {
+            borderRadius: 3,
+          },
+        }}
+      >
+        {cardList.map((item) => (
+          <Card
+            key={item.fieldName}
+            sx={{
+              minWidth: 200,
+              maxWidth: 260,
+              flex: "0 0 auto",
+            }}
+          >
+            <CardActionArea onClick={() => handleClickCard(item)}>
+              <CardContent sx={{ py: 1.5 }}>
+                <Typography
+                  variant="subtitle2"
+                  fontWeight={600}
+                  gutterBottom
+                  title={item.displayName}
+                >
+                  {item.displayName}
+                </Typography>
+                {item.description && (
+                  <Typography
+                    variant="body2"
+                    color="text.secondary"
+                    sx={{
+                      display: "-webkit-box",
+                      WebkitBoxOrient: "vertical",
+                      WebkitLineClamp: 3,
+                      overflow: "hidden",
+                    }}
+                  >
+                    {item.description}
+                  </Typography>
+                )}
+              </CardContent>
+            </CardActionArea>
+          </Card>
+        ))}
+      </Box>
+    </Box>
+  );
+};

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

@@ -1,10 +1,11 @@
 import { Alert, Typography } from "@mui/material";
-import { Grid, Stack } from "@mui/system";
+import { Box, Grid, Stack } from "@mui/system";
 import { AutoComponentProps } from "components/benchmark_v3/configs/utils/autoRegistration";
 import LoadingPage from "components/common/LoadingPage";
 import {
   useBenchmarkCommittedContext,
   useBenchmarkTimeSeriesData,
+  useListBenchmarkMetadata,
 } from "lib/benchmark/api_helper/fe/hooks";
 import { useDashboardSelector } from "lib/benchmark/store/benchmark_dashboard_provider";
 import BenchmarkRawDataTable from "../components/benchmarkTimeSeries/components/BenchmarkRawDataTable";
@@ -14,6 +15,10 @@ import { UIRenderConfig } from "components/benchmark_v3/configs/config_book_type
 import { useRouter } from "next/router";
 import { useEffect, useState } from "react";
 import { BenchmarkLogSidePanelWrapper } from "../../common/BenchmarkLogViewer/BenchmarkSidePanel";
+import {
+  BenchmarkShortcutCardList,
+  BenchmarkShortcutItem,
+} from "../../common/BenchmarkShortcutCardList";
 import BenchmarkSingleDataTable from "../components/benchmarkTimeSeries/components/BenchmarkSingleDataTable";
 import { BenchmarkSingleViewNavigation } from "../components/benchmarkTimeSeries/components/BenchmarkSingleViewNatigation";
 import BenchmarkTimeSeriesChartGroup from "../components/benchmarkTimeSeries/components/BenchmarkTimeSeriesChart/BenchmarkTimeSeriesChartGroup";
@@ -326,16 +331,18 @@ export function AutoBenchmarkComparisonGithubExternalLink({
     return <></>;
   }
   return (
-    <BenchmarkComparisonGithubExternalLink
-      benchmarkId={ctx.benchmarkId}
-      lcommit={ctx.lcommit}
-      rcommit={ctx.rcommit}
-      repo={repo}
-      title={{
-        text: config?.title,
-        description: config?.description,
-      }}
-    />
+    <Box sx={{ ml: 1 }}>
+      <BenchmarkComparisonGithubExternalLink
+        benchmarkId={ctx.benchmarkId}
+        lcommit={ctx.lcommit}
+        rcommit={ctx.rcommit}
+        repo={repo}
+        title={{
+          text: config?.title,
+          description: config?.description,
+        }}
+      />
+    </Box>
   );
 }
 
@@ -675,6 +682,84 @@ export function AutoBenchmarkRawDataTable({ config }: AutoComponentProps) {
   );
 }
 
+export function AutoBenchmarkShortcutCardList({ config }: AutoComponentProps) {
+  const ctx = useBenchmarkCommittedContext();
+  const update = useDashboardSelector((s) => s.update);
+
+  const ready = !!ctx && !!ctx.committedTime;
+  const dataBinding = ctx?.configHandler.dataBinding;
+  const uiRenderConfig = config as UIRenderConfig;
+  const queryParams = ready
+    ? dataBinding.toQueryParams({
+        repo: ctx.repo,
+        benchmarkName: ctx.benchmarkName,
+        timeRange: ctx.committedTime,
+        filters: {}, // does not rerender when filter changes, since it fetches the filter optons
+      })
+    : null;
+
+  const {
+    data: resp,
+    isLoading,
+    error,
+  } = useListBenchmarkMetadata(ctx.benchmarkId, queryParams);
+
+  if (isLoading) {
+    return (
+      <LoadingPage
+        height={300}
+        content="loading data for AutoBenchmarkShortcutCardList..."
+      />
+    );
+  }
+
+  if (error) {
+    return (
+      <Alert severity="error">
+        (AutoBenchmarkShortcutCardList){error.message}
+      </Alert>
+    );
+  }
+
+  // ------------------ convert to the shortcut items ------------------
+  const filters = uiRenderConfig.config?.filters;
+  let data: BenchmarkShortcutItem[] = [];
+  resp?.data?.forEach((item: any) => {
+    const name = filters?.find((f: string) => f === item?.type);
+    if (name) {
+      const options = item?.options;
+      options.forEach((option: any) => {
+        data.push({
+          displayName: option.displayName ?? "unkown",
+          value: option.value,
+          description: item?.labelName ?? "",
+          fieldName: name,
+        });
+      });
+    }
+  });
+
+  return (
+    <>
+      <BenchmarkShortcutCardList
+        benchmarkId={ctx.benchmarkId}
+        data={data}
+        title={uiRenderConfig?.title}
+        onNavigate={(item: BenchmarkShortcutItem) => {
+          const changed: Record<string, string> = {};
+          changed[item.fieldName] = item.value;
+          update({
+            filters: {
+              ...ctx.committedFilters,
+              ...changed,
+            },
+          });
+        }}
+      />
+    </>
+  );
+}
+
 export function AutoBenchmarkSingleDataTable({ config }: AutoComponentProps) {
   const ctx = useBenchmarkCommittedContext();
   const isWorkflowsReady =

torchci/components/benchmark_v3/configs/teams/torchao/ao_micro_api_config.ts

@@ -9,6 +9,10 @@ export const PYTORCH_AO_MICRO_API_BENCHMARK_ID = "torchao_micro_api_benchmark";
 
 const COMPARISON_TABLE_METADATA_COLUMNS = [
   ...DEFAULT_COMPARISON_TABLE_METADATA_COLUMNS,
+  {
+    field: "dtype",
+    displayName: "Quant Type",
+  },
   {
     field: "extra_key.use_compile",
     displayName: "Use Compile",
@@ -96,8 +100,16 @@ export const PytorcAoMicroApiBenchmarkDashoboardConfig: BenchmarkUIConfig = {
       },
     },
     renders: [
+      {
+        type: "AutoBenchmarkShortcutCardList",
+        title: "Dtype Lists",
+        config: {
+          filters: ["dtype"],
+        },
+      },
       {
         type: "AutoBenchmarkComparisonGithubExternalLink",
+        title: "Github Runs",
         description: "See original github runs for left and right runs",
         config: {},
       },

torchci/components/benchmark_v3/configs/teams/torchao/config.ts

@@ -150,8 +150,16 @@ export const PytorchOperatorMicroBenchmarkDashoboardConfig: BenchmarkUIConfig =
         },
       },
       renders: [
+        {
+          type: "AutoBenchmarkShortcutCardList",
+          title: "Operator Lists",
+          config: {
+            filters: ["operatorName"],
+          },
+        },
         {
           type: "AutoBenchmarkComparisonGithubExternalLink",
+          title: "Github runs (external)",
           description: "See original github runs for left and right runs",
           config: {},
         },

torchci/components/benchmark_v3/configs/utils/autoRegistration.tsx

@@ -3,6 +3,7 @@ import {
   AutoBenchmarkLogs,
   AutoBenchmarkPairwiseTable,
   AutoBenchmarkRawDataTable,
+  AutoBenchmarkShortcutCardList,
   AutoBenchmarkSingleDataTable,
   AutoBenchmarkSingleViewNavigation,
   AutoBenchmarkTimeSeriesChartGroup,
@@ -70,7 +71,9 @@ export class AutoComponentRegistry {
       AutoBenchmarkLogs: {
         Component: AutoBenchmarkLogs,
       },
-
+      AutoBenchmarkShortcutCardList: {
+        Component: AutoBenchmarkShortcutCardList,
+      },
       // Add your auto components here
     };
     this.map = Object.freeze({ ...registry });

torchci/lib/benchmark/api_helper/backend/compilers/compiler_benchmark_data.ts

@@ -28,6 +28,9 @@ export async function getCompilerBenchmarkTimeSeriesData(
   const queryParams = await getCompilerBenchmarkTimeRangeQueryParams(
     inputparams
   );
+  if (!queryParams) {
+    return emptyTimeSeriesResponse();
+  }
   const rows = await fetchCompilerDataFromDb(queryParams);
   if (rows.length === 0) {
     return emptyTimeSeriesResponse();
@@ -106,7 +109,7 @@ export async function getCompilerBenchmarkTimeRangeQueryParams(
       queryParams["workflows"] = unique_workflows;
     } else {
       console.log(`no workflow found in clickhouse using ${queryParams}`);
-      return [];
+      return undefined;
     }
   } else {
     console.log(

torchci/lib/benchmark/api_helper/backend/dataFetchers/fetchers.ts

@@ -12,6 +12,7 @@ import {
 import {
   BenchmarkMetadataQuery,
   PytorchOperatorMicrobenchmarkMetadataFetcher,
+  TorchAoMicrobApienchmarkMetadataFetcher,
 } from "./queryBuilderUtils/listMetadataQueryBuilder";
 import {
   BenchmarkDataFetcher,
@@ -31,6 +32,7 @@ const dataCtors: Record<string, new () => BenchmarkDataFetcher> = {
 // Register benchmark metadata fetchers. this is mainly used in list_metadata api
 const metaCtors: Record<string, new () => BenchmarkMetadataFetcher> = {
   pytorch_operator_microbenchmark: PytorchOperatorMicrobenchmarkMetadataFetcher,
+  torchao_micro_api_benchmark: TorchAoMicrobApienchmarkMetadataFetcher,
   default: BenchmarkMetadataQuery,
 };