refactor(frontend): update block time tracker components for improved execution time visualization

Im-Madhur-Gupta · Im-Madhur-Gupta · commit 048da03e9e84 · 2026-01-13T22:04:28.000+05:30
diff --git a/frontend/components/block-time-tracker/block-time-legend.tsx b/frontend/components/block-time-tracker/block-time-legend.tsx
@@ -4,37 +4,24 @@ export const BlockTimeLegend = () => {
   return (
     <div className="flex flex-col justify-between gap-6 text-xs sm:gap-4 sm:flex-row sm:text-sm text-zinc-400">
       <div className="flex flex-row gap-2 sm:max-w-1/3 text-zinc-500">
-        <Info className="w-4 h-lh" />
+        <Info className="w-4 h-4 shrink-0 mt-0.5" />
         <div className="flex flex-col gap-1">
-          <span className="text-sm">Height = execution time</span>
+          <span className="text-sm">Bar height reflects execution time.</span>
           <span className="text-sm">
-            Purple glow = concurrent transactions observed
+            Factor = total tx exec time / block exec time.
           </span>
         </div>
       </div>
       <div className="flex flex-wrap gap-2 xs:gap-6">
         <div className="flex items-center gap-2">
-          <div className="w-4 h-10 bg-zinc-600 rounded-t-sm" />
-          <p className="hidden xs:block">Block Execution Time</p>
-          <p className="block xs:hidden">Block Exec. Time</p>
+          <div className="w-4 h-10 bg-tracker-active/25 rounded-t-sm ring-1 ring-tracker-active/25" />
+          <p className="hidden xs:block">Block execution time</p>
+          <p className="block xs:hidden">Block</p>
         </div>
         <div className="flex items-center gap-2">
-          <div className="w-4 h-10 bg-zinc-600 rounded-t-sm relative">
-            <div className="absolute bottom-0 left-0 w-full h-1/2 bg-bg-card-darker rounded-t-sm" />
-          </div>
-          <p className="hidden xs:block">Transaction Execution Time</p>
-          <p className="block xs:hidden">Tx Exec. Time</p>
-        </div>
-        <div className="flex items-center gap-2">
-          <div
-            className="w-4 h-10 bg-[#7B66A2] rounded-t-sm"
-            style={{
-              boxShadow:
-                '0 0 0.3125rem var(--color-purple-glow), 0 0 0.625rem var(--color-purple-glow)',
-            }}
-          />
-          <p className="hidden xs:block">Parallel Execution</p>
-          <p className="block xs:hidden">Parallel Exec.</p>
+          <div className="w-4 h-10 bg-tracker-active rounded-t-sm" />
+          <p className="hidden xs:block">Total tx execution time</p>
+          <p className="block xs:hidden">Tx exec</p>
         </div>
       </div>
     </div>
diff --git a/frontend/components/block-time-tracker/block-time-timeline.tsx b/frontend/components/block-time-tracker/block-time-timeline.tsx
@@ -8,8 +8,8 @@ import type { Block } from '@/types/block'
 import { BlockTime } from './block-time'
 
 const BLOCK_DIMENSIONS = {
-  small: { itemWidth: 120, gridHeight: 280 },
-  large: { itemWidth: 140, gridHeight: 280 },
+  small: { itemWidth: 150, gridHeight: 280 },
+  large: { itemWidth: 180, gridHeight: 280 },
 }
 
 const getResponsiveDimensions = () => {
@@ -27,27 +27,27 @@ const getResponsiveDimensions = () => {
 interface BlockTimeTimelineProps {
   blocks: Block[]
   isFollowingChain: boolean
-  normalizedBlockExecutionTime: number
+  normalizedTimeScaleMs: number
 }
 
 interface BlockCellData {
   blocks: Block[]
-  normalizedBlockExecutionTime: number
+  normalizedTimeScaleMs: number
 }
 
 function BlockCell({
   columnIndex,
   style,
   blocks,
-  normalizedBlockExecutionTime,
+  normalizedTimeScaleMs,
 }: CellComponentProps<BlockCellData>) {
   const block = blocks[columnIndex]
 
   return (
     <div style={style} className="flex items-center justify-center relative">
       <BlockTime
         block={block}
-        normalizedBlockExecutionTime={normalizedBlockExecutionTime}
+        normalizedTimeScaleMs={normalizedTimeScaleMs}
       />
     </div>
   )
@@ -61,7 +61,7 @@ function BlockCell({
 export function BlockTimeTimeline({
   blocks,
   isFollowingChain,
-  normalizedBlockExecutionTime,
+  normalizedTimeScaleMs,
 }: BlockTimeTimelineProps) {
   const containerRef = useRef<HTMLDivElement>(null)
   const [containerWidth, setContainerWidth] = useState(0)
@@ -117,7 +117,7 @@ export function BlockTimeTimeline({
           defaultWidth={containerWidth}
           overscanCount={3}
           cellComponent={BlockCell}
-          cellProps={{ blocks: sortedBlocks, normalizedBlockExecutionTime }}
+          cellProps={{ blocks: sortedBlocks, normalizedTimeScaleMs }}
           className="scrollbar-none"
           style={{
             overflowX: isFollowingChain ? 'hidden' : 'auto',
diff --git a/frontend/components/block-time-tracker/block-time.tsx b/frontend/components/block-time-tracker/block-time.tsx
@@ -6,80 +6,77 @@ import {
   TooltipTrigger,
 } from '@/components/ui/tooltip'
 import { EXPLORER_URL } from '@/constants/common'
-import { calculateBarMetrics, fromNsToMsPrecise } from '@/lib/block-metrics'
+import { PARALLEL_EXECUTION_RATIO_THRESHOLD } from '@/hooks/use-block-tracker'
+import { calculateBarMetrics } from '@/lib/block-metrics'
 import { formatBlockNumber } from '@/lib/ui'
 import { cn } from '@/lib/utils'
 import type { Block } from '@/types/block'
 import { ExternalLink } from '../ui/external-link'
 
 interface BlockTimeProps {
   block: Block
-  normalizedBlockExecutionTime: number
+  normalizedTimeScaleMs: number
 }
 
-export const BlockTime = ({
-  block,
-  normalizedBlockExecutionTime,
-}: BlockTimeProps) => {
+export const BlockTime = ({ block, normalizedTimeScaleMs }: BlockTimeProps) => {
   const {
-    barHeightPercentage,
-    fillPercentage,
+    blockHeightPct,
+    txHeightPct,
+    blockMs,
     totalTransactionTime,
-    isHighlyParallel,
+    isParallelExecution,
+    parallelizationRatio,
+    timeSavedMs,
   } = useMemo(
-    () => calculateBarMetrics(block, normalizedBlockExecutionTime),
-    [block, normalizedBlockExecutionTime],
+    () =>
+      calculateBarMetrics(
+        block,
+        normalizedTimeScaleMs,
+        PARALLEL_EXECUTION_RATIO_THRESHOLD,
+      ),
+    [block, normalizedTimeScaleMs],
   )
 
-  const formattedBlockExecutionTime = fromNsToMsPrecise(
-    block.executionTime ?? BigInt(0),
-  ).toFixed(3)
+  const formattedBlockExecutionTime = blockMs.toFixed(3)
   const formattedTotalTransactionTime = totalTransactionTime.toFixed(3)
   const numberOfTransactions = (block.transactions ?? []).length
-  const parallelPercentage = isHighlyParallel
-    ? (Number(formattedTotalTransactionTime) * 100) /
-        Number(formattedBlockExecutionTime) -
-      100
-    : 0 // Compute actual percentage of difference tx time and execution between block
-  const timeSaved =
-    Number(formattedTotalTransactionTime) - Number(formattedBlockExecutionTime)
+  const parallelRatioLabel = `${parallelizationRatio.toFixed(2)}×`
+  const timeSaved = timeSavedMs
 
   return (
-    <div className="flex flex-col items-center gap-4 min-w-20">
+    <div className="flex flex-col items-center gap-4 min-w-20 w-full">
       {/* Block Bar Container */}
-      <div className="relative w-full h-32 flex flex-col justify-end p-1.5">
-        {/* Block Time Container (represents total block execution time) */}
+      <div className="relative w-full h-32 flex flex-col justify-end">
+        {/* Dual bar comparison (Block exec time vs total tx exec time) */}
         <Tooltip>
           <TooltipTrigger asChild>
-            <motion.div
-              initial={{ height: 0 }}
-              animate={{ height: `${barHeightPercentage}%` }}
-              transition={{ duration: 0.2 }}
+            <div
               className={cn(
-                'w-full rounded-t-md relative bg-zinc-600',
-                'hover:shadow-lg transition-all duration-200 cursor-pointer',
+                'w-full h-full flex items-end gap-2 px-3.5 py-1.5 rounded-lg',
+                'hover:bg-white/5 transition-all duration-200 cursor-pointer',
               )}
-              title={`Block ${block.number}: ${formattedBlockExecutionTime}ms execution time, ${formattedTotalTransactionTime}ms total tx time, ${numberOfTransactions} transactions`}
+              title={`Block ${block.number}: ${formattedBlockExecutionTime}ms block execution time, ${formattedTotalTransactionTime}ms total tx execution time`}
             >
-              {/* Transaction Time Fill */}
               <motion.div
                 initial={{ height: 0 }}
-                animate={{ height: `${fillPercentage}%` }}
-                transition={{
-                  duration: 0.4,
-                }}
+                animate={{ height: `${blockHeightPct}%` }}
+                transition={{ duration: 0.2 }}
                 className={cn(
-                  'absolute bottom-0 left-0 w-full rounded-t-md bg-bg-card-darker',
-                  isHighlyParallel && 'bg-[#7B66A2]',
+                  'flex-1 rounded-t-md bg-tracker-active/25 ring-1 ring-tracker-active/25',
                 )}
-                style={{
-                  boxShadow: isHighlyParallel
-                    ? '0 0 0.625rem var(--color-purple-glow), 0 0 1.25rem var(--color-purple-glow)'
-                    : undefined,
-                }}
-                title={`${formattedTotalTransactionTime}ms total transaction execution time`}
+                title={`${formattedBlockExecutionTime}ms block execution time`}
               />
-            </motion.div>
+              <motion.div
+                initial={{ height: 0 }}
+                animate={{ height: `${txHeightPct}%` }}
+                transition={{ duration: 0.2 }}
+                className={cn(
+                  'flex-1 rounded-t-md bg-tracker-active ring-1 ring-tracker-active/25',
+                  isParallelExecution && 'ring-1 ring-tracker-active/60',
+                )}
+                title={`${formattedTotalTransactionTime}ms total tx execution time`}
+              />
+            </div>
           </TooltipTrigger>
           <TooltipContent
             sideOffset={5}
@@ -96,15 +93,15 @@ export const BlockTime = ({
                 <div className="flex flex-col gap-1">
                   <div className="flex flex-row items-center justify-between">
                     <p className="text-xs font-mono text-tooltip-text-secondary break-all">
-                      Block Execution Time
+                      Block execution time
                     </p>
                     <p className="text-tooltip-text text-sm font-medium">
                       {formattedBlockExecutionTime}ms
                     </p>
                   </div>
                   <div className="flex flex-row items-center justify-between">
                     <p className="text-xs font-mono text-tooltip-text-secondary break-all">
-                      Transaction Execution Time
+                      Total tx execution time
                     </p>
                     <p className="text-tooltip-text text-sm font-medium">
                       {formattedTotalTransactionTime}ms
@@ -120,30 +117,37 @@ export const BlockTime = ({
                   </div>
                   <div className="flex flex-row items-center justify-between">
                     <p className="text-xs font-mono text-tooltip-text-secondary break-all">
-                      Time Saved
+                      Time saved
                     </p>
                     <p className="text-tooltip-text text-sm font-medium">
-                      {timeSaved < 0 ? 0 : timeSaved.toFixed(3)}
-                      ms
+                      {timeSaved.toFixed(3)}ms
                     </p>
                   </div>
                   <div className="flex flex-row items-center justify-between">
                     <p className="text-xs font-mono text-tooltip-text-secondary break-all">
-                      Parallel Efficiency
+                      Parallel factor
                     </p>
-                    <p className="text-tooltip-text-accent text-sm font-medium">
-                      {parallelPercentage.toFixed(3)}%
+                    <p
+                      className={cn(
+                        'text-sm font-medium',
+                        isParallelExecution
+                          ? 'text-tooltip-text-accent'
+                          : 'text-tooltip-text',
+                      )}
+                    >
+                      {parallelRatioLabel}
                     </p>
                   </div>
                 </div>
               </div>
-              {isHighlyParallel && (
+              {isParallelExecution && (
                 <div className="flex flex-col gap-0">
                   <div className="border-t border-tooltip-separator my-2" />
                   <div className="flex flex-row items-center gap-2">
                     <div className="bg-tooltip-text-accent w-2 h-2 rounded-full" />
                     <p className="text-tooltip-text-accent font-medium">
-                      High parallel execution detected
+                      Parallel execution: total tx execution time &gt; block
+                      execution time
                     </p>
                   </div>
                 </div>
@@ -154,19 +158,51 @@ export const BlockTime = ({
       </div>
 
       {/* Block Stats */}
-      <div className="text-center space-y-1">
-        <p className="text-zinc-600 font-medium text-base">
-          {formattedBlockExecutionTime}ms
-        </p>
-        <p className="text-zinc-500 text-sm">{numberOfTransactions} tx</p>
+      <div className="w-full px-3.5 flex flex-col gap-2 tabular-nums">
+        <div className="w-full grid grid-cols-2 gap-2">
+          <div className="flex flex-col items-center leading-tight text-center">
+            <span className="text-[10px] text-zinc-400 uppercase tracking-wide">
+              Block
+            </span>
+            <span className="text-base font-semibold text-zinc-100">
+              {blockMs.toFixed(2)}ms
+            </span>
+          </div>
+          <div className="flex flex-col items-center leading-tight text-center">
+            <span className="text-[10px] text-zinc-400 uppercase tracking-wide">
+              Tx exec
+            </span>
+            <span className="text-base font-semibold text-tracker-active">
+              {totalTransactionTime.toFixed(2)}ms
+            </span>
+          </div>
+        </div>
+
+        <div className="w-full h-7 mt-1 flex items-center justify-center">
+          <span
+            className={cn(
+              'inline-flex max-w-full items-center rounded-md border px-2 py-0.5 text-[12px] font-medium whitespace-nowrap truncate',
+              isParallelExecution
+                ? 'border-tracker-active/60 bg-tracker-active/20 text-white shadow-[0_0_0_0.5px_rgba(131,110,249,0.35)]'
+                : 'border-zinc-700 bg-zinc-800/40 text-zinc-300',
+            )}
+            title="Parallel factor (Tx exec / Block exec)"
+          >
+            {isParallelExecution
+              ? `Parallel ${parallelRatioLabel}`
+              : `Factor ${parallelRatioLabel}`}
+          </span>
+        </div>
       </div>
 
       {/* Separator */}
       <div className="w-full h-px bg-zinc-700" />
 
       {/* Block number Label */}
-      <div className="text-sm font-medium text-zinc-600">
-        {formatBlockNumber(block.number)}
+      <div className="w-full px-3.5 flex items-center justify-center">
+        <div className="text-sm font-medium text-zinc-400">
+          {formatBlockNumber(block.number)}
+        </div>
       </div>
     </div>
   )
diff --git a/frontend/components/block-time-tracker/index.tsx b/frontend/components/block-time-tracker/index.tsx
@@ -22,11 +22,8 @@ import { BlockTimeTimeline } from './block-time-timeline'
  * and calculates execution timing metrics for visualization.
  */
 export function BlockTimeExecutionTracker() {
-  const {
-    finalizedBlocks,
-    maxBlockExecutionTime,
-    normalizedBlockExecutionTime,
-  } = useBlockTracker()
+  const { finalizedBlocks, maxBlockExecutionTime, normalizedTimeScaleMs } =
+    useBlockTracker()
   const [isFollowingChain, setIsFollowingChain] = useState(true)
   const { isHovering, hoverProps } = useMouseHover()
   const isPaused = !isFollowingChain || isHovering
@@ -80,7 +77,7 @@ export function BlockTimeExecutionTracker() {
       <div className="w-full flex flex-col gap-4 sm:gap-6">
         <SectionHeader
           title="Block Execution Timeline"
-          description="Each bar represents a block. Height shows execution time."
+          description="Two bars per block: block execution time (gray) and total tx execution time (purple). Purple bar taller than gray bar indicates parallel execution in the block."
         >
           <button
             type="button"
@@ -106,13 +103,13 @@ export function BlockTimeExecutionTracker() {
           <span>Tap Pause to freeze and scroll through blocks</span>
         </div>
 
-        <div className="w-full flex flex-col gap-5 dark-component-colors rounded-xl border p-4 sm:p-6 lg:p-8">
+        <div className="w-full flex flex-col gap-5 dark-component-colors rounded-xl border p-4 sm:p-5">
           {/* Scrollable Blocks Container */}
           <button type="button" className="flex-1" {...hoverProps}>
             <BlockTimeTimeline
               blocks={finalizedBlocks}
               isFollowingChain={!isPaused}
-              normalizedBlockExecutionTime={normalizedBlockExecutionTime}
+              normalizedTimeScaleMs={normalizedTimeScaleMs}
             />
           </button>
 
diff --git a/frontend/hooks/use-block-tracker.ts b/frontend/hooks/use-block-tracker.ts
diff --git a/frontend/lib/block-metrics.ts b/frontend/lib/block-metrics.ts
