Compiler dashboard feature

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