fix: ensure thresholds are using role-specific metric names (#124)

Author: meyer9

report/src/components/ChartGrid.tsx

@@ -5,12 +5,16 @@ import LineChart from "./LineChart";
 
 interface ProvidedProps {
   data: DataSeries[];
+  role: "sequencer" | "validator" | null;
 }
 
-const ChartGrid: React.FC<ProvidedProps> = ({ data }: ProvidedProps) => {
+const ChartGrid: React.FC<ProvidedProps> = ({ data, role }: ProvidedProps) => {
   return (
     <div className="charts-container">
       {Object.entries(CHART_CONFIG).map(([metricKey, config]) => {
+        // sequencer and validator have different thresholds
+        console.log(role, metricKey);
+        const thresholdKey = role ? `${role}/${metricKey}` : null;
         const chartData = data.flatMap((s) => s.data);
         const thresholds = data[0]?.thresholds;
         const executionMetrics = chartData
@@ -32,7 +36,7 @@ const ChartGrid: React.FC<ProvidedProps> = ({ data }: ProvidedProps) => {
 
         return (
           <div key={metricKey} className="chart-container">
-            <LineChart {...chartProps} />
+            <LineChart thresholdKey={thresholdKey} {...chartProps} />
           </div>
         );
       })}

report/src/components/ChartSelector.tsx

@@ -24,9 +24,19 @@ export interface SelectedData {
 
 interface ChartSelectorProps {
   benchmarkRuns: BenchmarkRuns;
-  onChangeDataQuery: (data: SelectedData[]) => void;
+  onChangeDataQuery: (data: DataSelection) => void;
 }
 
+export interface DataSelection {
+  data: SelectedData[];
+  role: "sequencer" | "validator" | null;
+}
+
+export const EmptyDataSelection: DataSelection = {
+  data: [],
+  role: null,
+};
+
 const ChartSelector = ({
   benchmarkRuns,
   onChangeDataQuery,
@@ -51,6 +61,7 @@ const ChartSelector = ({
     filterSelections,
     setFilters,
     setByMetric,
+    role,
   } = useBenchmarkFilters(runsWithRoles, "role");
 
   const lastSentDataRef = useRef<SelectedData[]>([]);
@@ -106,9 +117,9 @@ const ChartSelector = ({
 
     if (!isEqual(dataToSend, lastSentDataRef.current)) {
       lastSentDataRef.current = dataToSend;
-      onChangeDataQuery(dataToSend);
+      onChangeDataQuery({ data: dataToSend, role });
     }
-  }, [matchedRuns, filterSelections.byMetric, onChangeDataQuery]);
+  }, [matchedRuns, filterSelections.byMetric, role, onChangeDataQuery]);
 
   return (
     <div className="flex items-start">

report/src/components/LineChart.tsx

@@ -16,6 +16,7 @@ import { isEqual } from "lodash";
 
 interface LineChartProps {
   series: DataSeries[];
+  thresholdKey: string | null;
   metricKey: string;
   title?: string;
   description?: string;
@@ -48,6 +49,7 @@ const MAX_TICKS = 10;
 
 const LineChart: React.FC<LineChartProps> = ({
   series,
+  thresholdKey,
   metricKey,
   title,
   description,
@@ -342,14 +344,14 @@ const LineChart: React.FC<LineChartProps> = ({
   const maxThreshold = useMemo(() => {
     let maxThreshold = 0;
     for (const thresholdMap of [thresholds?.warning, thresholds?.error]) {
-      if (thresholdMap) {
-        if (thresholdMap[metricKey] > maxThreshold) {
-          maxThreshold = thresholdMap[metricKey];
+      if (thresholdMap && thresholdKey) {
+        if (thresholdMap[thresholdKey] > maxThreshold) {
+          maxThreshold = thresholdMap[thresholdKey];
         }
       }
     }
     return maxThreshold;
-  }, [thresholds, metricKey]);
+  }, [thresholds, thresholdKey]);
 
   return (
     <BaseChart
@@ -409,9 +411,10 @@ const LineChart: React.FC<LineChartProps> = ({
           // Add warning threshold line (yellow)
           if (
             thresholds.warning &&
-            thresholds.warning[metricKey] !== undefined
+            thresholdKey &&
+            thresholds.warning[thresholdKey] !== undefined
           ) {
-            const warningY = y(thresholds.warning[metricKey]);
+            const warningY = y(thresholds.warning[thresholdKey]);
             svg
               .append("line")
               .attr("class", "threshold-line warning")
@@ -425,8 +428,12 @@ const LineChart: React.FC<LineChartProps> = ({
           }
 
           // Add error threshold line (red)
-          if (thresholds.error && thresholds.error[metricKey] !== undefined) {
-            const errorY = y(thresholds.error[metricKey]);
+          if (
+            thresholds.error &&
+            thresholdKey &&
+            thresholds.error[thresholdKey] !== undefined
+          ) {
+            const errorY = y(thresholds.error[thresholdKey]);
             svg
               .append("line")
               .attr("class", "threshold-line error")

report/src/components/RunList.tsx

@@ -135,9 +135,9 @@ const RunList = ({
     // Handle threshold displays for specific columns
     if (column === "getPayload") {
       const warningThreshold =
-        (run.thresholds?.warning?.["latency/get_payload"] ?? 0) / 1e9;
+        (run.thresholds?.warning?.["sequencer/latency/get_payload"] ?? 0) / 1e9;
       const errorThreshold =
-        (run.thresholds?.error?.["latency/get_payload"] ?? 0) / 1e9;
+        (run.thresholds?.error?.["sequencer/latency/get_payload"] ?? 0) / 1e9;
 
       return (
         <ThresholdDisplay
@@ -152,9 +152,9 @@ const RunList = ({
 
     if (column === "newPayload") {
       const warningThreshold =
-        (run.thresholds?.warning?.["latency/new_payload"] ?? 0) / 1e9;
+        (run.thresholds?.warning?.["validator/latency/new_payload"] ?? 0) / 1e9;
       const errorThreshold =
-        (run.thresholds?.error?.["latency/new_payload"] ?? 0) / 1e9;
+        (run.thresholds?.error?.["validator/latency/new_payload"] ?? 0) / 1e9;
 
       return (
         <ThresholdDisplay

report/src/hooks/useBenchmarkFilters.ts

@@ -96,12 +96,25 @@ export function useBenchmarkFilters(
     [setRawFilterSelections],
   );
 
+  // get the role if not grouped by role
+  const role = useMemo(() => {
+    if (filterSelections.byMetric === "role") {
+      return null;
+    }
+
+    return (
+      (filterSelections.params.role as "sequencer" | "validator") ??
+      variables.role[0]
+    );
+  }, [filterSelections.byMetric, filterSelections.params.role, variables]);
+
   return {
     variables,
     filterOptions,
     matchedRuns,
     filterSelections, // Return current selections for UI binding
     setFilters, // Return the simplified setter
     setByMetric,
+    role,
   };
 }

report/src/pages/RunComparison.tsx

@@ -1,5 +1,8 @@
 import { useMemo, useState } from "react";
-import ChartSelector, { SelectedData } from "../components/ChartSelector";
+import ChartSelector, {
+  DataSelection,
+  EmptyDataSelection,
+} from "../components/ChartSelector";
 import ChartGrid from "../components/ChartGrid";
 import { useTestMetadata, useMultipleDataSeries } from "../utils/useDataSeries";
 import { DataSeries } from "../types";
@@ -13,7 +16,7 @@ function RunComparison() {
     throw new Error("Benchmark run ID is required");
   }
 
-  const [selection, setSelection] = useState<SelectedData[]>([]);
+  const [selection, setSelection] = useState<DataSelection>(EmptyDataSelection);
 
   const { data: allBenchmarkRuns, isLoading: isLoadingBenchmarkRuns } =
     useTestMetadata();
@@ -42,15 +45,15 @@ function RunComparison() {
   }, [allBenchmarkRuns, benchmarkRunId]);
 
   const dataQueryKey = useMemo(() => {
-    return selection.map((query) => {
+    return selection.data.map((query) => {
       // Find the run that matches this outputDir to get the runId
       const run = benchmarkRuns.runs.find(
         (r) => r.outputDir === query.outputDir,
       );
       const runId = run?.id || query.outputDir; // Fallback to outputDir if no ID found
       return [runId, query.outputDir, query.role] as [string, string, string];
     });
-  }, [selection, benchmarkRuns]);
+  }, [selection.data, benchmarkRuns]);
 
   const { data: dataPerFile, isLoading } = useMultipleDataSeries(dataQueryKey);
   const data = useMemo(() => {
@@ -59,15 +62,15 @@ function RunComparison() {
     }
 
     return dataPerFile.map((data, index): DataSeries => {
-      const { name, color } = selection[index];
+      const { name, color } = selection.data[index];
       return {
         name,
         data,
         color,
-        thresholds: selection[index].thresholds,
+        thresholds: selection.data[index].thresholds,
       };
     });
-  }, [dataPerFile, selection]);
+  }, [dataPerFile, selection.data]);
 
   if (!benchmarkRuns || isLoadingBenchmarkRuns) {
     return <div>Loading...</div>;
@@ -82,7 +85,11 @@ function RunComparison() {
             onChangeDataQuery={setSelection}
             benchmarkRuns={benchmarkRuns}
           />
-          {isLoading ? "Loading..." : <ChartGrid data={data ?? []} />}
+          {isLoading ? (
+            "Loading..."
+          ) : (
+            <ChartGrid role={selection.role} data={data ?? []} />
+          )}
         </div>
       </div>
     </div>