feat(report): group metrics by category in chart grid

report/src/components/ChartGrid.tsx

@@ -23,37 +23,61 @@ function resolveMetricKey(
   return primaryKey;
 }
 
+const GROUP_ORDER = ["Latency", "Chain", "Throughput"];
+
 const ChartGrid: React.FC<ProvidedProps> = ({ data, role }: ProvidedProps) => {
+  const chartData = data.flatMap((s) => s.data);
+  const thresholds = data[0]?.thresholds;
+
+  const visibleCharts = SORTED_CHART_CONFIG.flatMap(([metricKey, config]) => {
+    const resolvedKey = resolveMetricKey(data, metricKey, config.aliases);
+    const executionMetrics = chartData
+      .map((d) => d.ExecutionMetrics[resolvedKey])
+      .filter((v) => v !== undefined);
+    if (executionMetrics.length === 0) return [];
+    return [{ metricKey, resolvedKey, config }];
+  });
+
+  const grouped = visibleCharts.reduce<Record<string, typeof visibleCharts>>(
+    (acc, item) => {
+      const group = item.config.group ?? "Other";
+      if (!acc[group]) acc[group] = [];
+      acc[group].push(item);
+      return acc;
+    },
+    {},
+  );
+
+  const groupKeys = [
+    ...GROUP_ORDER.filter((g) => grouped[g]),
+    ...Object.keys(grouped).filter((g) => !GROUP_ORDER.includes(g)),
+  ];
+
   return (
     <div className="charts-container">
-      {SORTED_CHART_CONFIG.map(([metricKey, config]) => {
-        const resolvedKey = resolveMetricKey(data, metricKey, config.aliases);
-        const thresholdKey = role ? `${role}/${metricKey}` : null;
-        const chartData = data.flatMap((s) => s.data);
-        const thresholds = data[0]?.thresholds;
-        const executionMetrics = chartData
-          .map((d) => d.ExecutionMetrics[resolvedKey])
-          .filter((v) => v !== undefined);
-
-        if (executionMetrics.length === 0) {
-          return null;
-        }
-
-        const chartProps = {
-          series: data,
-          metricKey: resolvedKey,
-          title: config.title,
-          description: config.description,
-          unit: config.unit,
-          thresholds,
-        };
-
-        return (
-          <div key={metricKey} className="chart-container">
-            <LineChart thresholdKey={thresholdKey} {...chartProps} />
+      {groupKeys.map((group) => (
+        <div key={group} className="metric-group">
+          <h2 className="metric-group-title">{group}</h2>
+          <div className="metric-group-charts">
+            {grouped[group].map(({ metricKey, resolvedKey, config }) => {
+              const thresholdKey = role ? `${role}/${metricKey}` : null;
+              return (
+                <div key={metricKey} className="chart-container">
+                  <LineChart
+                    thresholdKey={thresholdKey}
+                    series={data}
+                    metricKey={resolvedKey}
+                    title={config.title}
+                    description={config.description}
+                    unit={config.unit}
+                    thresholds={thresholds}
+                  />
+                </div>
+              );
+            })}
           </div>
-        );
-      })}
+        </div>
+      ))}
     </div>
   );
 };

report/src/index.css

@@ -82,3 +82,23 @@ body {
 .filter-select {
   @apply p-2 rounded border border-gray-300 mt-1 bg-white;
 }
+
+/* Metric grouping */
+.metric-group {
+  margin-bottom: 2rem;
+}
+
+.metric-group-title {
+  font-size: 1.25rem;
+  font-weight: 600;
+  color: #374151;
+  padding: 0.5rem 0;
+  margin-bottom: 1rem;
+  border-bottom: 2px solid #e5e7eb;
+}
+
+.metric-group-charts {
+  display: grid;
+  grid-template-columns: repeat(auto-fill, minmax(480px, 1fr));
+  gap: 1rem;
+}

report/src/metricDefinitions.ts

@@ -2,30 +2,35 @@ import { ChartConfig } from "./types"; // Import from types.ts
 export const CHART_CONFIG = {
   "latency/send_txs": {
     type: "line",
+    group: "Latency",
     title: "Send Txs",
     description: "Shows the median time taken for send txs",
     unit: "ns",
   },
   "latency/update_fork_choice": {
     type: "line",
+    group: "Latency",
     title: "Update Fork Choice",
     description: "Shows the median time taken for update fork choice",
     unit: "ns",
   },
   "latency/get_payload": {
     type: "line",
+    group: "Latency",
     title: "Get Payload",
     description: "Shows the median time taken for get payload",
     unit: "ns",
   },
   "latency/new_payload": {
     type: "line",
+    group: "Latency",
     title: "New Payload",
     description: "Shows the median time taken for new payload",
     unit: "ns",
   },
   "chain/inserts.50-percentile": {
     type: "line",
+    group: "Chain",
     title: "Inserts",
     description:
       "Shows the median time taken for block processing and insertion (end-to-end)",
@@ -41,6 +46,7 @@ export const CHART_CONFIG = {
   },
   "chain/storage/reads.50-percentile": {
     type: "line",
+    group: "Chain",
     title: "Storage Reads",
     description:
       "Shows the median time taken for storage reads during block processing",
@@ -56,27 +62,31 @@ export const CHART_CONFIG = {
   },
   "chain/account/updates.50-percentile": {
     type: "line",
+    group: "Chain",
     title: "Account Updates",
     description:
       "Shows the median time taken for updating accounts during state validation",
     unit: "ns",
   },
   "chain/account/hashes.50-percentile": {
     type: "line",
+    group: "Chain",
     title: "Account Hashes",
     description:
       "Shows the median time taken for hashing accounts during state validation",
     unit: "ns",
   },
   "chain/storage/updates.50-percentile": {
     type: "line",
+    group: "Chain",
     title: "Storage Updates", // Renamed from 'Storage Writes' for consistency
     description:
       "Shows the median time taken for updating storage during state validation",
     unit: "ns",
   },
   "chain/validation.50-percentile": {
     type: "line",
+    group: "Chain",
     title: "Validation (Misc)",
     description:
       "Shows the median time taken for miscellaneous block validation steps",
@@ -92,46 +102,53 @@ export const CHART_CONFIG = {
   },
   "chain/write.50-percentile": {
     type: "line",
+    group: "Chain",
     title: "Write (Misc)",
     description:
       "Shows the median time taken for miscellaneous block write operations (excluding commits)",
     unit: "ns",
   },
   "chain/account/commits.50-percentile": {
     type: "line",
+    group: "Chain",
     title: "Account Commits",
     description:
       "Shows the median time taken for committing account changes to the DB",
     unit: "ns",
   },
   "chain/storage/commits.50-percentile": {
     type: "line",
+    group: "Chain",
     title: "Storage Commits",
     description:
       "Shows the median time taken for committing storage changes to the DB",
     unit: "ns",
   },
   "chain/snapshot/commits.50-percentile": {
     type: "line",
+    group: "Chain",
     title: "Snapshot Commits",
     description:
       "Shows the median time taken for committing snapshot changes to the DB",
     unit: "ns",
   },
   "chain/triedb/commits.50-percentile": {
     type: "line",
+    group: "Chain",
     title: "TrieDB Commits",
     description: "Shows the median time taken for committing TrieDB changes",
     unit: "ns",
   },
   "transactions/per_block": {
     type: "line",
+    group: "Throughput",
     title: "Transactions per Block",
     description: "Shows the number of transactions per block",
     unit: "count",
   },
   "gas/per_block": {
     type: "line",
+    group: "Throughput",
     title: "Gas Per Block",
     description: "Shows the median gas per block",
     unit: "gas",

report/src/types.ts

@@ -40,6 +40,7 @@ export interface ChartConfig {
   title: string;
   description: string;
   type: "line";
+  group?: "Latency" | "Chain" | "Throughput";
   unit?:
     | "ns"
     | "us"