Compiler dashboard feature (#7421)

# Overview
Add Dashboard for compiler inductor non-aggreated data

# Demo:
you can access the new dashboard in list benchmark pages:

https://torchci-git-compilerdashboard-fbopensource.vercel.app/benchmark/benchmark_list

Or directly:

https://torchci-git-compilerdashboard-fbopensource.vercel.app/benchmark/v3/dashboard/compiler_inductor

# New features For Comparison Table : Compare Status 
in the comparison table, add another comparison policy that user define
the statusComparison policy. By default, the UI assume all metric values
are numeric, user need to add custom logics to display status properly

status
```
export type BenchmarkStatusComparisonPolicy = {
  /** "good" (indicate desired value) */
  goodValues?: string[];
  goodValuePatterns?: string[];

  /** "bad" (indicated failure) */
  badValues?: string[];
  badValuePatterns?: string[];
};
```
Example use default, this will use default goodValuePatterns
['pass'],and default badValuePatterns: ['fail']
```
comparisonPolicy: {
    accuracy: {
        target: "accuracy",
         type: "status",
    }
}
```
user can also override it with their specific goodValues and badValues
list or patterns.

# Next step
- Sync the link in regression page to dashboard detail page
-  A log component to provide logging info 
-  Add CSV download for comparison table

Author: yangw-dev

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

@@ -69,7 +69,7 @@ export default function DefaultMetricsDropdowns() {
   const filters = {
     ...stagedFilters,
     deviceName:
-      stagedFilters.deviceName.length > 0
+      stagedFilters?.deviceName?.length > 0
         ? stagedFilters.deviceName
         : toDeviceName(stagedFilters.device, stagedFilters.arch),
   };

torchci/components/benchmark_v3/components/common/BackToMainButton.tsx

@@ -9,14 +9,17 @@ import { useEffect, useRef } from "react";
 export function BackToMainButton() {
   const router = useRouter();
   const renderGroupId = useDashboardSelector((s) => s.renderGroupId);
+
   const { prevRef, currentRef } = useRouteHistory();
 
   const handleClick = () => {
     if (prevRef.current) {
       router.back();
     } else {
+      // if there is no history, push to main page with existing query params
       const { renderGroupId, ...rest } = router.query as Record<string, any>;
-      const nextMainQuery = { ...rest, renderGroupId: "main" };
+
+      let nextMainQuery: any = { ...rest, renderGroupId: "main" };
 
       // push the main page
       router.push(

torchci/components/benchmark_v3/components/common/RawContentDialog.tsx

@@ -149,15 +149,15 @@ export function RawContentDialog({
 
 export function RenderRawContent({
   data,
-  title,
-  buttonName,
-  type,
+  title = "Raw Content",
+  buttonName = "Raw Content",
+  type = "json",
   component,
 }: {
   data: any;
-  title: string;
-  buttonName: string;
-  type: "json" | "component";
+  title?: string;
+  buttonName?: string;
+  type?: "json" | "component";
   component?: (data: any, title: string) => JSX.Element;
 }) {
   return (

torchci/components/benchmark_v3/components/common/SelectionDialog.tsx

@@ -7,7 +7,7 @@ import {
 } from "@mui/material";
 
 import { Typography } from "@mui/material";
-import { resolveComponent } from "../../configs/configRegistration";
+import { resolveComponent } from "../../configs/helpers/configRegistration";
 import { RawTimeSeriesPoint } from "../dataRender/components/benchmarkTimeSeries/helper";
 
 export interface TimeSeriesChartDialogContentProps {

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

@@ -9,6 +9,7 @@ import {
 import { UIRenderConfig } from "lib/benchmark/store/benchmark_config_book";
 import { useDashboardSelector } from "lib/benchmark/store/benchmark_dashboard_provider";
 import BenchmarkRawDataTable from "../components/benchmarkTimeSeries/components/BenchmarkRawDataTable";
+
 import BenchmarkTimeSeriesChartGroup from "../components/benchmarkTimeSeries/components/BenchmarkTimeSeriesChart/BenchmarkTimeSeriesChartGroup";
 import { ComparisonTable } from "../components/benchmarkTimeSeries/components/BenchmarkTimeSeriesComparisonSection/BenchmarkTimeSeriesComparisonTable/ComparisonTable";
 

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

@@ -22,7 +22,7 @@ export function DefaultAutoRenderContent() {
   // if renderGroupId is not main, we try to find the subSectionRenders, auto fallback to main render if nothing is found
   if (renderGroupId != "main" && ctx.dataRender?.subSectionRenders) {
     autoUIConfigs =
-      ctx.dataRender.subSectionRenders[renderGroupId].renders ?? [];
+      ctx.dataRender.subSectionRenders[renderGroupId]?.renders ?? [];
   }
 
   if (autoUIConfigs?.length === 0) {

torchci/components/benchmark_v3/components/dataRender/components/benchmarkTimeSeries/components/BenchmarkTimeSeriesChart/BenchmarkTimeSeriesChart.tsx

@@ -95,8 +95,6 @@ const BenchmarkTimeSeriesChart: React.FC<Props> = ({
       displayName = rc?.displayName ?? meta.metric;
     }
 
-    console.log("p", p);
-
     let legendKeyItems: string[] = [];
     if (renderOptions?.showLegendDetails) {
       legendKeys?.forEach((k) => {

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

@@ -22,7 +22,7 @@ import {
   getBenchmarkTimeSeriesComparisonTableTarget,
   renderBasedOnUnitConifg,
 } from "../../../helper";
-import { asNumber, displayNameOf, valOf } from "./ComparisonTableHelpers";
+import { displayNameOf, valOf } from "./ComparisonTableHelpers";
 
 /**
  *
@@ -122,6 +122,7 @@ export function getComparisionTableConlumnRendering(
 /** Colors */
 const VIOLATE_RULE_COLOR = "#ffebee"; // red[50]
 const IMPROVEMENT_COLOR = "#e8f5e9"; // green[50]
+const WARNING_COLOR = "#fff9c4"; // yellow[50]
 
 export function ComparisonTablePrimaryFieldValueCell({
   params,
@@ -184,37 +185,22 @@ export function ComparisonTableColumnFieldValueCell({
       row.byWorkflow[rWorkflowId]?.[field]
     : undefined;
 
-  // get rabw value of left and right field
+  // get raw value of left and right field
   const L = valOf(ldata);
   const R = valOf(rdata);
 
-  // assume l and r are numbers
-  // todo(elainwy): support non-number values (e.g. string)
-  const ln = asNumber(L);
-  const rn = asNumber(R);
-
-  // get target field key name, for instance, metric
-  // so we can get the comparison policy by get the value of target field
   const targetField = getBenchmarkTimeSeriesComparisonTableTarget();
-
   const findFieldValueFromColData =
     ldata?.[targetField] ?? rdata?.[targetField];
   const targetVal = findFieldValueFromColData;
 
-  let comparisonPolicy: BenchmarkComparisonPolicyConfig | undefined = undefined;
-  if (targetVal && config?.comparisonPolicy) {
-    comparisonPolicy = targetVal
-      ? config?.comparisonPolicy[targetVal]
-      : undefined;
-  }
-
-  //console.log("ComparisonTableValueCell", ldata, rdata,targetField,row);
-  // evaluate the value comparison result, return the comparison report for each field
-  const result = evaluateComparison(
-    comparisonPolicy?.target,
-    ln,
-    rn,
-    comparisonPolicy
+  const { result, text } = getComparisonResult(
+    L,
+    R,
+    ldata,
+    rdata,
+    targetVal,
+    config
   );
 
   // pick background color based on result signals
@@ -226,14 +212,14 @@ export function ComparisonTableColumnFieldValueCell({
     case "regression":
       bgColor = VIOLATE_RULE_COLOR;
       break;
+    case "warning":
+      bgColor = WARNING_COLOR;
+      break;
     case "neutral":
     default:
       break;
   }
 
-  const ldisplay = displayNameOf(ldata);
-  const rdisplay = displayNameOf(rdata);
-  const text = getFieldRender(targetVal, L, R, config, ldisplay, rdisplay);
   return (
     <Box sx={{ bgcolor: bgColor, borderRadius: 1, px: 0.5, py: 0.25 }}>
       <Tooltip title={renderComparisonResult(result)}>
@@ -268,12 +254,12 @@ export function getFieldRender(
   R: any,
   config?: ComparisonTableConfig,
   ldisplay?: string,
-  rdisplay?: string
+  rdisplay?: string,
+  missingText: string = "N/A"
 ) {
   if (ldisplay || rdisplay) {
-    return `${ldisplay ?? "N/A"}→${rdisplay ?? "N/A"}`;
+    return `${ldisplay ?? missingText}→${rdisplay ?? missingText}`;
   }
-
   const rc = getBenchmarkTimeSeriesComparisionTableRenderingConfig(
     targetField,
     config
@@ -283,21 +269,61 @@ export function getFieldRender(
 export function formatTransitionWithUnit(
   L: any,
   R: any,
-  table_unit?: BenchmarkUnitConfig
+  table_unit?: BenchmarkUnitConfig,
+  missingText: string = "N/A"
 ): string {
-  const formatValue = (v: any) =>
-    v == null ? "N/A" : renderBasedOnUnitConifg(fmtFixed2(v), table_unit);
+  const formatValue = (v: any) => {
+    if (v == null || v == undefined) return missingText;
+    const num = Number(v);
+    const isNumeric = !isNaN(num) && v !== "";
+    if (isNumeric) {
+      return renderBasedOnUnitConifg(fmtFixed2(num), table_unit);
+    }
+    // non-numeric → render raw
+    return String(v);
+  };
+
   if (L == null && R == null) {
-    return "N/A";
+    return missingText;
   }
+
   if (L == null) {
-    return `N/A→${formatValue(R)}`;
+    return `${missingText}→${formatValue(R)}`;
   }
   if (R == null) {
-    return `${formatValue(L)}→N/A`;
+    return `${formatValue(L)}→${missingText}`;
   }
+
   if (fmtFixed2(L) === fmtFixed2(R)) {
     return formatValue(L);
   }
   return `${formatValue(L)}→${formatValue(R)}`;
 }
+
+export function getComparisonResult(
+  L: any,
+  R: any,
+  ldata: any,
+  rdata: any,
+  targetVal: string,
+  config?: ComparisonTableConfig
+) {
+  // get target field key name, for instance, metric
+  // so we can get the comparison policy by get the value of target field
+
+  let policy: BenchmarkComparisonPolicyConfig | undefined = undefined;
+  if (targetVal && config?.comparisonPolicy) {
+    policy = targetVal ? config.comparisonPolicy[targetVal] : undefined;
+  }
+  // evaluate the value comparison result, return the comparison report for each field
+  const result = evaluateComparison(policy?.target, L, R, policy);
+
+  const ldisplay = displayNameOf(ldata);
+  const rdisplay = displayNameOf(rdata);
+  const text = getFieldRender(targetVal, L, R, config, ldisplay, rdisplay);
+
+  return {
+    result,
+    text,
+  };
+}

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

@@ -52,7 +52,14 @@ export type SnapshotRow = {
 };
 
 /** Helpers */
-export const asNumber = (v: unknown) => (typeof v === "number" ? v : undefined);
+export const asNumber = (v: unknown): number | undefined => {
+  if (typeof v === "number") return v;
+  if (typeof v === "string" && v.trim() !== "") {
+    const num = Number(v);
+    return isNaN(num) ? undefined : num;
+  }
+  return undefined;
+};
 export const valOf = (cell?: RowCellObj) => (cell ? cell.value : undefined);
 export const displayNameOf = (cell?: RowCellObj) =>
   cell ? cell.displayName : undefined;

torchci/components/benchmark_v3/components/dataRender/components/benchmarkTimeSeries/helper.tsx

@@ -306,13 +306,12 @@ export function getBenchmarkTimeSeriesComparisonTableTarget(
   return config?.targetField ?? DEFAULT_TARGET_FILED;
 }
 
-export const fmtFixed2 = (v: any) =>
-  v == null
-    ? "—"
-    : typeof v === "number"
-    ? Number(v).toFixed(2)
-    : String(v.toFixed(2));
-
+export const fmtFixed2 = (v: any) => {
+  if (v == null) return "—";
+  const num = Number(v);
+  if (isNaN(num)) return String(v ?? ""); // not a valid number
+  return num.toFixed(2);
+};
 /**
  * helper function to get the value from a nested object.
  * try to get the value from the keyPath, if not found, return the fallback value