visualizer: added view of where TXs are in their lifecycle

SupernaviX · SupernaviX · commit effd76a4e64b · 2025-04-23T17:17:10.000-04:00
diff --git a/sim-rs/sim-cli/src/events/aggregate.rs b/sim-rs/sim-cli/src/events/aggregate.rs
@@ -1,4 +1,7 @@
-use std::collections::{BTreeMap, BTreeSet};
+use std::{
+    collections::{BTreeMap, BTreeSet},
+    time::Duration,
+};
 
 use serde::Serialize;
 use sim_core::{
@@ -9,6 +12,24 @@ use sim_core::{
 
 use super::{EndorserBlockId, InputBlockId, OutputEvent, VoteBundleId};
 
+#[derive(PartialEq, Eq, PartialOrd, Ord)]
+enum TransactionStatus {
+    Created,
+    InIb,
+    InEb,
+    OnChain,
+}
+
+#[derive(Serialize, Default)]
+#[serde(rename_all = "camelCase")]
+struct TransactionCounts {
+    timestamp: Timestamp,
+    created: u64,
+    in_ib: u64,
+    in_eb: u64,
+    on_chain: u64,
+}
+
 #[derive(Default)]
 pub struct TraceAggregator {
     current_time: Timestamp,
@@ -17,15 +38,19 @@ pub struct TraceAggregator {
     ibs: BTreeMap<InputBlockId, InputBlock>,
     ebs: BTreeMap<EndorserBlockId, EndorsementBlock>,
     rbs: Vec<Block>,
+    tx_counts: Vec<TransactionCounts>,
     nodes: BTreeMap<Node, NodeAggregatedData>,
     bytes: BTreeMap<MessageId, u64>,
+    tx_statuses: BTreeMap<TransactionId, TransactionStatus>,
     leios_txs: BTreeSet<TransactionId>,
     praos_txs: BTreeSet<TransactionId>,
 }
 
 impl TraceAggregator {
     pub fn new() -> Self {
-        Self::default()
+        let mut me = Self::default();
+        me.tx_counts.push(TransactionCounts::default());
+        me
     }
 
     pub fn process(&mut self, event: OutputEvent) -> Option<AggregatedData> {
@@ -42,6 +67,7 @@ impl TraceAggregator {
                         bytes: size_bytes,
                     },
                 );
+                self.tx_statuses.insert(id, TransactionStatus::Created);
                 self.track_data_generated(MessageId::TX(id), publisher, size_bytes);
             }
             Event::TXSent { id, sender, .. } => {
@@ -73,6 +99,15 @@ impl TraceAggregator {
                             .collect(),
                     },
                 );
+                for tx in transactions {
+                    let status = self
+                        .tx_statuses
+                        .entry(tx)
+                        .or_insert(TransactionStatus::InIb);
+                    if *status == TransactionStatus::Created {
+                        *status = TransactionStatus::InIb;
+                    }
+                }
                 self.track_data_generated(MessageId::IB(id), producer, size_bytes);
             }
             Event::IBSent { id, sender, .. } => {
@@ -108,6 +143,19 @@ impl TraceAggregator {
                             .collect(),
                     },
                 );
+                for tx in input_blocks
+                    .iter()
+                    .map(|ib| self.ibs.get(&ib.id).unwrap())
+                    .flat_map(|ib| ib.txs.iter())
+                {
+                    let status = self
+                        .tx_statuses
+                        .entry(tx.id)
+                        .or_insert(TransactionStatus::InEb);
+                    if matches!(status, TransactionStatus::Created | TransactionStatus::InIb) {
+                        *status = TransactionStatus::InEb;
+                    }
+                }
                 self.track_data_generated(MessageId::EB(id), producer, size_bytes);
             }
             Event::EBSent { id, sender, .. } => {
@@ -140,6 +188,7 @@ impl TraceAggregator {
                 ..
             } => {
                 for id in &transactions {
+                    self.tx_statuses.insert(*id, TransactionStatus::OnChain);
                     self.praos_txs.insert(*id);
                 }
                 for tx in endorsement
@@ -149,6 +198,7 @@ impl TraceAggregator {
                     .flat_map(|eb| &eb.ibs)
                     .flat_map(|ib| ib.txs.iter())
                 {
+                    self.tx_statuses.insert(tx.id, TransactionStatus::OnChain);
                     self.leios_txs.insert(tx.id);
                 }
                 self.rbs.push(Block {
@@ -180,6 +230,10 @@ impl TraceAggregator {
         let new_chunk = (event.time_s - Timestamp::zero()).as_millis() / 250;
         self.current_time = event.time_s;
         if current_chunk != new_chunk {
+            if new_chunk % 4 == 0 {
+                let timestamp = Duration::from_secs((new_chunk / 4) as u64).into();
+                self.tx_counts.push(self.produce_tx_counts(timestamp));
+            }
             Some(self.produce_message())
         } else {
             None
@@ -194,6 +248,22 @@ impl TraceAggregator {
         }
     }
 
+    fn produce_tx_counts(&self, timestamp: Timestamp) -> TransactionCounts {
+        let mut tx_counts = TransactionCounts {
+            timestamp,
+            ..TransactionCounts::default()
+        };
+        for status in self.tx_statuses.values() {
+            match status {
+                TransactionStatus::Created => tx_counts.created += 1,
+                TransactionStatus::InIb => tx_counts.in_ib += 1,
+                TransactionStatus::InEb => tx_counts.in_eb += 1,
+                TransactionStatus::OnChain => tx_counts.on_chain += 1,
+            }
+        }
+        tx_counts
+    }
+
     fn produce_message(&mut self) -> AggregatedData {
         let nodes_updated = std::mem::take(&mut self.nodes_updated);
         AggregatedData {
@@ -204,6 +274,7 @@ impl TraceAggregator {
                 leios_tx_on_chain: self.leios_txs.len() as u64,
             },
             blocks: std::mem::take(&mut self.rbs),
+            transactions: std::mem::take(&mut self.tx_counts),
             last_nodes_updated: nodes_updated.into_iter().collect(),
         }
     }
@@ -243,6 +314,7 @@ pub struct AggregatedData {
     nodes: BTreeMap<Node, NodeAggregatedData>,
     global: GlobalAggregatedData,
     blocks: Vec<Block>,
+    transactions: Vec<TransactionCounts>,
     last_nodes_updated: Vec<Node>,
 }
 
diff --git a/ui/public/traces/100xsummary.jsonl.gz b/ui/public/traces/100xsummary.jsonl.gz
@@ -1,3 +1,3 @@
 version https://git-lfs.github.com/spec/v1
-oid sha256:1281503935998e956789bec2e61118220295f3adb2739042dbd83477480ad6a0
-size 14666871
+oid sha256:4f484999993f16c36feacd5dae30d21f9e8463694150966244ea048386f8026c
+size 14706812
diff --git a/ui/public/traces/10xsummary.jsonl.gz b/ui/public/traces/10xsummary.jsonl.gz
@@ -1,3 +1,3 @@
 version https://git-lfs.github.com/spec/v1
-oid sha256:5d759f81fccbf40834de524276ac54d2745c5d22ee011bcedc8fc17a70732300
-size 12704902
+oid sha256:887602dac9aef3193f36c402f7cfca1730dfa36fb00630b86ebb1841b24894cc
+size 12774319
diff --git a/ui/public/traces/1xsummary.jsonl.gz b/ui/public/traces/1xsummary.jsonl.gz
@@ -1,3 +1,3 @@
 version https://git-lfs.github.com/spec/v1
-oid sha256:3f5a2c6ebf733d1a73e871f011b2925de39a98a38e3e7f0cfba645eb3070b563
-size 8610186
+oid sha256:79bb79faf0e5149ea2b8dce32e1e14f0d046a460faf1b1d5f6223ed2d0bba077
+size 8650616
diff --git a/ui/src/components/Sim/SimWrapper.tsx b/ui/src/components/Sim/SimWrapper.tsx
@@ -7,6 +7,7 @@ import { parse } from "yaml";
 import { Coord2D, Node } from "../../../../data/simulation/topology";
 import { BlocksView } from "../Blocks/BlocksView";
 import { GraphWrapper } from "../Graph/GraphWrapper";
+import { TransactionsView } from "../Transactions/TransactionsView";
 import { Controls } from "./modules/Controls";
 import { Scenario } from "./modules/Scenario";
 import { Progress } from "./modules/Slider";
@@ -81,12 +82,14 @@ export const SimWrapper: FC = ({
         <Stats />
       </div>
       <div className="flex items-center justify-center gap-4 relative h-screen w-screen">
-        {activeTab == Tab.Graph && topologyLoaded ? <GraphWrapper /> : null}
-        {activeTab == Tab.Blocks ? <BlocksView /> : null}
+        {activeTab === Tab.Graph && topologyLoaded ? <GraphWrapper /> : null}
+        {activeTab === Tab.Blocks ? <BlocksView /> : null}
+        {activeTab === Tab.Transactions ? <TransactionsView /> : null}
         <div className="absolute top-10 w-full">
           <div className="flex justify-center gap-4 min-w-[200px]">
-            <TabButton name="Graph" active={activeTab == Tab.Graph} onClick={() => setActiveTab(Tab.Graph)} />
-            <TabButton name="Blocks" active={activeTab == Tab.Blocks && currentBlock === undefined} onClick={() => setActiveTab(Tab.Blocks)} />
+            <TabButton name="Graph" active={activeTab === Tab.Graph} onClick={() => setActiveTab(Tab.Graph)} />
+            <TabButton name="Blocks" active={activeTab === Tab.Blocks && currentBlock === undefined} onClick={() => setActiveTab(Tab.Blocks)} />
+            <TabButton name="Transactions" active={activeTab === Tab.Transactions} onClick={() => setActiveTab(Tab.Transactions)} />
           </div>
         </div>
         <div className="absolute bottom-12 flex w-1/2 gap-4 justify-center">
diff --git a/ui/src/components/Sim/hooks/utils.ts b/ui/src/components/Sim/hooks/utils.ts
@@ -59,6 +59,7 @@ const extractEb = (intermediate: ISimulationIntermediateDataState, ebId: string)
     for (const tx of ib.txs) {
       if (!intermediate.praosTxs.has(tx)) {
         intermediate.leiosTxs.add(tx);
+        intermediate.txStatuses[tx] = 'onChain';
       }
     }
     const txs = ib.txs.map(tx => intermediate.txs[tx]);
@@ -89,6 +90,7 @@ export const processMessage = (
   const { message } = json;
 
   if (message.type === EMessageType.TransactionGenerated) {
+    intermediate.txStatuses[Number(message.id)] = 'created';
     trackDataGenerated(aggregatedData, intermediate, message.publisher, "tx", message.id, message.size_bytes);
     intermediate.txs.push({ id: Number(message.id), bytes: message.size_bytes });
   } else if (message.type === EMessageType.TransactionSent) {
@@ -98,6 +100,11 @@ export const processMessage = (
   } else if (message.type === EMessageType.IBGenerated) {
     const bytes = message.transactions.reduce((sum, tx) => sum + (intermediate.bytes.get(`tx-${tx}`) ?? 0), message.header_bytes);
     trackDataGenerated(aggregatedData, intermediate, message.producer, "ib", message.id, bytes);
+    for (const id of message.transactions) {
+      if (intermediate.txStatuses[id] === 'created') {
+        intermediate.txStatuses[id] = 'inIb';
+      }
+    }
     intermediate.ibs.set(message.id, {
       slot: message.slot,
       pipeline: message.pipeline,
@@ -118,6 +125,7 @@ export const processMessage = (
     };
     for (const id of message.transactions) {
       intermediate.praosTxs.add(id);
+      intermediate.txStatuses[id] = 'onChain';
     }
     if (message.endorsement != null) {
       bytes += message.endorsement.size_bytes;
@@ -137,6 +145,13 @@ export const processMessage = (
     trackDataReceived(aggregatedData, intermediate, message.recipient, "pb", message.id);
   } else if (message.type === EMessageType.EBGenerated) {
     trackDataGenerated(aggregatedData, intermediate, message.producer, "eb", message.id, message.size_bytes);
+    for (const { id: ibId } of message.input_blocks) {
+      for (const tx of intermediate.ibs.get(ibId)?.txs ?? []) {
+        if (intermediate.txStatuses[tx] === 'created' || intermediate.txStatuses[tx] === 'inIb') {
+          intermediate.txStatuses[tx] = 'inEb';
+        }
+      }
+    }
     intermediate.ebs.set(message.id, {
       slot: message.slot,
       pipeline: message.pipeline,
diff --git a/ui/src/components/Sim/hooks/worker.ts b/ui/src/components/Sim/hooks/worker.ts
@@ -1,4 +1,4 @@
-import { ISimulationAggregatedDataState, ISimulationBlock, ISimulationIntermediateDataState } from '@/contexts/SimContext/types';
+import { ISimulationAggregatedDataState, ISimulationBlock, ISimulationIntermediateDataState, ISimulationTransactionData } from '@/contexts/SimContext/types';
 import * as cbor from 'cborg';
 import type { ReadableStream } from 'stream/web';
 import { IServerMessage } from '../types';
@@ -81,10 +81,12 @@ const consumeStream = async (
       leiosTxOnChain: 0,
     },
     blocks: [],
+    transactions: [],
     lastNodesUpdated: [],
   };
   const intermediate: ISimulationIntermediateDataState = {
     txs: [],
+    txStatuses: [],
     leiosTxs: new Set(),
     praosTxs: new Set(),
     ibs: new Map(),
@@ -94,6 +96,7 @@ const consumeStream = async (
 
   const nodesUpdated = new Set<string>();
   let batchEvents = 0;
+  let lastSec = null;
   for await (const { time_s, message } of stream) {
     if (message.type.endsWith("Received") && "recipient" in message) {
       nodesUpdated.add(message.recipient);
@@ -105,6 +108,19 @@ const consumeStream = async (
       nodesUpdated.add(message.id);
     }
     processMessage({ time_s, message }, aggregatedData, intermediate);
+    if (lastSec !== Math.floor(time_s)) {
+      lastSec = Math.floor(time_s);
+      aggregatedData.transactions.push(intermediate.txStatuses.reduce((acc, curr) => {
+        acc[curr] += 1;
+        return acc;
+      }, {
+        timestamp: lastSec,
+        created: 0,
+        inIb: 0,
+        inEb: 0,
+        onChain: 0,
+      }));
+    }
     aggregatedData.progress = time_s;
     batchEvents++;
     if (batchEvents === batchSize) {
@@ -141,6 +157,7 @@ const consumeAggregateStream = async (
 ) => {
   let lastTimestamp = 0;
   let blocks: ISimulationBlock[] = [];
+  let transactions: ISimulationTransactionData[] = [];
   for await (const aggregatedData of stream) {
     const nodes = new Map();
     for (const [id, stats] of Object.entries(aggregatedData.nodes)) {
@@ -149,6 +166,8 @@ const consumeAggregateStream = async (
     aggregatedData.nodes = nodes;
     blocks.push(...aggregatedData.blocks);
     aggregatedData.blocks = blocks;
+    transactions.push(...aggregatedData.transactions);
+    aggregatedData.transactions = transactions;
 
     const elapsedMs = (aggregatedData.progress - lastTimestamp) * 1000;
     lastTimestamp = aggregatedData.progress;
diff --git a/ui/src/components/Transactions/TransactionsView.tsx b/ui/src/components/Transactions/TransactionsView.tsx
@@ -0,0 +1,42 @@
+import { useSimContext } from "@/contexts/SimContext/context";
+import { FC, useMemo } from "react";
+import { Area, AreaChart, Tooltip, XAxis, YAxis } from "recharts";
+
+export const TransactionsView: FC = ({ }) => {
+  const {
+    state: {
+      aggregatedData: {
+        transactions,
+      }
+    },
+  } = useSimContext();
+
+  const data = useMemo(() => {
+    return transactions.map(data => {
+      const minutes = Math.floor(data.timestamp / 60);
+      const seconds = Math.floor(data.timestamp % 60);
+      return {
+        Time: minutes ? `${minutes}m${seconds}s` : `${seconds}s`,
+        "Created": data.created,
+        "In Input Block": data.inIb,
+        "In Endorser Block": data.inEb,
+        "On Chain": data.onChain,
+      };
+    })
+  }, [transactions]);
+
+  return (
+    <div className="flex flex-col w-full h-4/5 items-center justify-center">
+      <h2 className="font-bold text-xl">Transactions</h2>
+      <AreaChart width={640} height={480} data={data}>
+        <XAxis dataKey="Time" />
+        <YAxis />
+        <Tooltip />
+        <Area type="monotone" dataKey="Created" stackId="1" stroke="#26de81" fill="#26de81" />
+        <Area type="monotone" dataKey="In Input Block" stackId="1" stroke="#2bcbba" fill="#2bcbba" />
+        <Area type="monotone" dataKey="In Endorser Block" stackId="1" stroke="#4b7bec" fill="#4b7bec" />
+        <Area type="monotone" dataKey="On Chain" stackId="1" stroke="#2d98da" fill="#2d98da" />
+      </AreaChart>
+    </div>
+  );
+}
diff --git a/ui/src/contexts/SimContext/context.ts b/ui/src/contexts/SimContext/context.ts
@@ -10,6 +10,7 @@ export const defaultAggregatedData: ISimulationAggregatedDataState = {
     leiosTxOnChain: 0,
   },
   blocks: [],
+  transactions: [],
   lastNodesUpdated: []
 };
 
diff --git a/ui/src/contexts/SimContext/types.ts b/ui/src/contexts/SimContext/types.ts
