Add blocks to ui (#177)

kmchicoine · web-flow · commit 2668204627eb · 2026-05-04T13:42:30.000-07:00
diff --git a/report/index.html b/report/index.html
@@ -3,7 +3,7 @@
   <head>
     <meta charset="UTF-8" />
     <meta name="viewport" content="width=device-width, initial-scale=1.0" />
-    <title>Base Bench Metrics</title>
+    <title>Base Load Tests</title>
   </head>
   <body>
     <div id="root"></div>
diff --git a/report/src/pages/LoadTestDetail.tsx b/report/src/pages/LoadTestDetail.tsx
@@ -12,11 +12,11 @@ import {
   durationToNanos,
   formatDuration,
   formatEthFromWei,
-  formatGps,
+  formatGasVerbose,
+  formatGpsVerbose,
   formatLoadTestTimestamp,
   formatPercent,
   formatTps,
-  formatValue,
 } from "../utils/formatters";
 import {
   FlashblocksLatencyStats,
@@ -107,17 +107,27 @@ const SummarySection = ({ result }: { result: LoadTestResult }) => {
         />
         <Stat label="Failed" value={failed.toLocaleString()} />
         <Stat label="Avg TPS" value={formatTps(result.throughput.tps)} />
-        <Stat label="Avg gas/s" value={formatGps(result.throughput.gps)} />
+        <Stat
+          label="Avg gas/s"
+          value={formatGpsVerbose(result.throughput.gps)}
+        />
         <Stat
           label="Total gas"
-          value={formatValue(result.gas.total_gas, "gas")}
+          value={formatGasVerbose(result.gas.total_gas)}
           hint={`${result.gas.avg_gas.toLocaleString()} avg / tx`}
         />
         <Stat
           label="Total cost"
           value={formatEthFromWei(result.gas.total_cost_wei)}
           hint={`${result.gas.avg_gas_price.toLocaleString()} wei avg gas price`}
         />
+        {result.block_range && (
+          <Stat
+            label="Block range"
+            value={`${result.block_range.first_block.toLocaleString()} → ${result.block_range.last_block.toLocaleString()}`}
+            hint={`${result.block_range.block_count.toLocaleString()} blocks`}
+          />
+        )}
       </StatGrid>
     </StatCard>
   );
diff --git a/report/src/types.ts b/report/src/types.ts
@@ -166,6 +166,12 @@ export interface ThroughputPercentiles {
   gps_max: number;
 }
 
+export interface BlockRange {
+  first_block: number;
+  last_block: number;
+  block_count: number;
+}
+
 export interface GasStats {
   total_gas: number;
   avg_gas: number;
@@ -229,6 +235,9 @@ export interface LoadTestResult {
   // gated on its presence rather than rendering empty placeholders.
   config?: LoadTestConfig;
   throughput_timeseries?: ThroughputSample[];
+  // Optional for back-compat: older runs predate this field. The summary
+  // section gates the block range stats on its presence.
+  block_range?: BlockRange;
 }
 
 /**
diff --git a/report/src/utils/formatters.tsx b/report/src/utils/formatters.tsx
@@ -129,6 +129,31 @@ export const formatTps = (n: number): string => `${n.toFixed(1)} tx/s`;
 
 export const formatGps = (n: number): string => formatValue(n, "gas/s");
 
+const WRITTEN_PREFIXES: Record<string, string> = {
+  "": "",
+  k: "thousand ",
+  M: "million ",
+  G: "billion ",
+  T: "trillion ",
+};
+
+const formatGasWritten = (value: number, suffix: string): string => {
+  if (value === 0) return `0 gas${suffix}`;
+  const sortedPrefixes = Object.entries(PREFIXES).sort(([, a], [, b]) => b - a);
+  for (const [prefix, multiplier] of sortedPrefixes) {
+    if (Math.abs(value) >= multiplier) {
+      const written = WRITTEN_PREFIXES[prefix] ?? `${prefix} `;
+      return `${(value / multiplier).toFixed(1)} ${written}gas${suffix}`;
+    }
+  }
+  return `${value.toFixed(1)} gas${suffix}`;
+};
+
+export const formatGasVerbose = (n: number): string => formatGasWritten(n, "");
+
+export const formatGpsVerbose = (n: number): string =>
+  formatGasWritten(n, "/s");
+
 export const formatPercent = (
   numerator: number,
   denominator: number,
