From e8f71f3e98481102c40bfa7af35d556e46406f6c Mon Sep 17 00:00:00 2001
From: Julian Meyer <julian.meyer@coinbase.com>
Date: Tue, 4 Nov 2025 11:15:57 -0800
Subject: [PATCH] feat: sort charts

---
 report/src/components/ChartGrid.tsx |  5 ++--
 report/src/metricDefinitions.ts     | 46 +++++++++++++++++++++++++++--
 2 files changed, 46 insertions(+), 5 deletions(-)

diff --git a/report/src/components/ChartGrid.tsx b/report/src/components/ChartGrid.tsx
index 562b5bc..7217452 100644
--- a/report/src/components/ChartGrid.tsx
+++ b/report/src/components/ChartGrid.tsx
@@ -1,5 +1,5 @@
 import React from "react";
-import { CHART_CONFIG } from "../metricDefinitions";
+import { SORTED_CHART_CONFIG } from "../metricDefinitions";
 import { DataSeries } from "../types";
 import LineChart from "./LineChart";
 
@@ -11,9 +11,8 @@ interface ProvidedProps {
 const ChartGrid: React.FC<ProvidedProps> = ({ data, role }: ProvidedProps) => {
   return (
     <div className="charts-container">
-      {Object.entries(CHART_CONFIG).map(([metricKey, config]) => {
+      {SORTED_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;
diff --git a/report/src/metricDefinitions.ts b/report/src/metricDefinitions.ts
index e9a7987..b3ed991 100644
--- a/report/src/metricDefinitions.ts
+++ b/report/src/metricDefinitions.ts
@@ -1,5 +1,5 @@
 import { ChartConfig } from "./types"; // Import from types.ts
-export const CHART_CONFIG: Record<string, ChartConfig> = {
+export const CHART_CONFIG = {
   "latency/send_txs": {
     type: "line",
     title: "Send Txs",
@@ -210,4 +210,46 @@ export const CHART_CONFIG: Record<string, ChartConfig> = {
     description: "Shows the 90th percentile latency for account loads",
     unit: "s",
   },
-};
+} satisfies Record<string, ChartConfig>;
+
+const CHART_CONFIG_ORDER: (keyof typeof CHART_CONFIG)[] = [
+  "latency/get_payload",
+  "latency/new_payload",
+  "latency/update_fork_choice",
+  "latency/send_txs",
+  "gas/per_block",
+  "transactions/per_block",
+  "chain/inserts.50-percentile",
+  "chain/account/reads.50-percentile",
+  "chain/storage/reads.50-percentile",
+  "chain/execution.50-percentile",
+  "chain/account/updates.50-percentile",
+  "chain/account/hashes.50-percentile",
+  "chain/storage/updates.50-percentile",
+  "chain/validation.50-percentile",
+  "chain/crossvalidation.50-percentile",
+  "chain/write.50-percentile",
+  "chain/account/commits.50-percentile",
+  "chain/storage/commits.50-percentile",
+  "chain/snapshot/commits.50-percentile",
+  "chain/triedb/commits.50-percentile",
+];
+
+export const SORTED_CHART_CONFIG: [string, ChartConfig][] = Object.entries(
+  CHART_CONFIG,
+).sort((a, b) => {
+  const aIndex = CHART_CONFIG_ORDER.indexOf(a[0] as keyof typeof CHART_CONFIG);
+  const bIndex = CHART_CONFIG_ORDER.indexOf(b[0] as keyof typeof CHART_CONFIG);
+
+  // if both doesn't exist, sort it last (infinity)
+  if (aIndex === -1 && bIndex === -1) {
+    return 0;
+  }
+  if (aIndex === -1) {
+    return 1;
+  }
+  if (bIndex === -1) {
+    return -1;
+  }
+  return aIndex - bIndex;
+});