viz: show TX throughput

Author: SupernaviX

ui/src/app/api/messages/batch/route.ts

@@ -3,7 +3,7 @@ import { NextResponse } from "next/server";
 import readline from "readline";
 
 import { EMessageType, IServerMessage } from "@/components/Graph/types";
-import { ISimulationAggregatedDataState } from "@/contexts/GraphContext/types";
+import { ISimulationAggregatedDataState, ISimulationIntermediateDataState } from "@/contexts/GraphContext/types";
 import { messagesPath } from "../../utils";
 import { processMessage } from "./utils";
 
@@ -97,8 +97,16 @@ export async function GET(req: Request, res: Response) {
         const aggregatedData: ISimulationAggregatedDataState = {
           progress: 0,
           nodes: new Map(),
+          global: {
+            praosTxOnChain: 0,
+            leiosTxOnChain: 0,
+          },
           lastNodesUpdated: [],
         };
+        const intermediate: ISimulationIntermediateDataState = {
+          txsPerIb: new Map(),
+          txsPerEb: new Map(),
+        };
 
         interval = setInterval(() => {
           if (isProcessing) {
@@ -145,7 +153,7 @@ export async function GET(req: Request, res: Response) {
                 nodesUpdated.add(data.message.sender.toString())
               }
 
-              processMessage(data, aggregatedData);
+              processMessage(data, aggregatedData, intermediate);
             }
 
             const serializedData = {
@@ -167,7 +175,7 @@ export async function GET(req: Request, res: Response) {
           if (!line) {
             return;
           }
-          
+
           eventBuffer.push(line);
         });
 

ui/src/app/api/messages/batch/utils.ts

@@ -5,6 +5,7 @@ import readline from "readline";
 import {
   ISimulationAggregatedData,
   ISimulationAggregatedDataState,
+  ISimulationIntermediateDataState,
 } from "@/contexts/GraphContext/types";
 
 export const incrementNodeAggregationData = (
@@ -37,6 +38,7 @@ export const incrementNodeAggregationData = (
 export const processMessage = (
   json: IServerMessage,
   aggregatedData: ISimulationAggregatedDataState,
+  intermediate: ISimulationIntermediateDataState,
 ) => {
   const { message } = json;
 
@@ -64,6 +66,7 @@ export const processMessage = (
       message.producer.toString(),
       "ibGenerated",
     );
+    intermediate.txsPerIb.set(message.id, message.transactions.length);
   } else if (message.type === EMessageType.InputBlockSent) {
     incrementNodeAggregationData(
       aggregatedData.nodes,
@@ -82,6 +85,11 @@ export const processMessage = (
       message.producer.toString(),
       "pbGenerated",
     );
+    aggregatedData.global.praosTxOnChain += message.transactions.length;
+    if (message.endorsement != null) {
+      let eb = message.endorsement.eb.id;
+      aggregatedData.global.leiosTxOnChain += intermediate.txsPerEb.get(eb) ?? 0;
+    }
   } else if (message.type === EMessageType.PraosBlockSent) {
     incrementNodeAggregationData(
       aggregatedData.nodes,
@@ -100,6 +108,10 @@ export const processMessage = (
       message.producer.toString(),
       "ebGenerated",
     );
+    const txs = message.input_blocks
+      .map(ib => intermediate.txsPerIb.get(ib.id) ?? 0)
+      .reduce((p, c) => p + c, 0);
+    intermediate.txsPerEb.set(message.id, txs);
   } else if (message.type === EMessageType.EndorserBlockSent) {
     incrementNodeAggregationData(
       aggregatedData.nodes,

ui/src/components/Graph/modules/Controls.tsx

@@ -10,16 +10,14 @@ export const Controls: FC = memo(() => {
   const { startStream, streaming, stopStream } = useStreamMessagesHandler();
 
   const handleCancelSim = useCallback(() => {
-    () => {
-      stopStream();
-      dispatch({
-        type: "BATCH_UPDATE",
-        payload: {
-          currentNode: undefined,
-          aggregatedData: defaultAggregatedData,
-        },
-      });
-    }
+    stopStream();
+    dispatch({
+      type: "BATCH_UPDATE",
+      payload: {
+        currentNode: undefined,
+        aggregatedData: defaultAggregatedData,
+      },
+    });
   }, [stopStream, dispatch])
 
   return (

ui/src/components/Graph/modules/NodeStats.tsx

@@ -24,41 +24,41 @@ export const NodeStats: FC = () => {
   const { left, top } = useMemo(() => {
     const margin = 10;
     const elementRect = ref.current?.getBoundingClientRect();
-  
+
     if (!elementRect) {
       return { left: 0, top: 0 };
     }
-  
+
     const fx = currentNodeData?.fx ?? 0;
     const fy = currentNodeData?.fy ?? 0;
-  
+
     // Convert node position to canvas pixel space
     const nodeCanvasX = fx * canvasScale + canvasOffsetX;
     const nodeCanvasY = fy * canvasScale + canvasOffsetY;
-  
+
     // Start by placing the box with bottom-left corner at the node's position
     let calculatedLeft = nodeCanvasX + margin;
     let calculatedTop = nodeCanvasY - margin - elementRect.height;
-  
+
     // If the box goes off the top of the screen, place it below the node
     if (calculatedTop < 0) {
       calculatedTop = nodeCanvasY - margin;
     }
-  
+
     // If the box goes off the right side of the screen, place it to the left of the node
     if (calculatedLeft + elementRect.width > screen.width) {
       calculatedLeft = nodeCanvasX - elementRect.width - margin;
     } else if (calculatedLeft < 0) {
       // If it goes off the left side, adjust to the right again
       calculatedLeft = nodeCanvasX - margin;
     }
-  
+
     return {
       left: calculatedLeft,
       top: calculatedTop,
     };
   }, [currentNodeData, canvasScale, canvasOffsetX, canvasOffsetY]);
-  
+
   return (
     <div
       ref={ref}

ui/src/components/Graph/modules/Slider.tsx

@@ -8,12 +8,16 @@ export const Progress: FC = () => {
 
   const percent = (aggregatedData.progress / maxTime) * 100;
 
+  const minutes = Math.floor(aggregatedData.progress / 60_000);
+  const seconds = (aggregatedData.progress / 1000 % 60).toFixed(3);
+  const time = minutes ? `${minutes}m${seconds}s` : `${seconds}s`;
+
   return (
     <div className="w-full mx-auto px-4 flex flex-col items-between justify-center">
       <p className="mb-0">
-        Time in ms: {aggregatedData.progress}<br/>
+        Time: {time}<br />
       </p>
-      
+
       <div
         className="relative w-full mt-2"
       >

ui/src/components/Graph/modules/Stats.tsx

@@ -53,6 +53,7 @@ export const Stats: FC = () => {
       txPropagations: 0,
       votesGenerated: 0,
       votesPropagations: 0,
+      ...aggregatedData.global,
     } as ISimulationAggregatedTotalData,
   );
 
@@ -66,10 +67,13 @@ export const Stats: FC = () => {
         <h4 className="flex items-center justify-between gap-4">IB Propagations: <span>{totals.ibPropagations}</span></h4>
         <h4 className="flex items-center justify-between gap-4">EB Generated: <span>{totals.ebGenerated}</span></h4>
         <h4 className="flex items-center justify-between gap-4">EB Propagations: <span>{totals.ebPropagations}</span></h4>
-        <h4 className="flex items-center justify-between gap-4">PB Generated: <span>{totals.pbGenerated}</span></h4>
-        <h4 className="flex items-center justify-between gap-4">PB Propagations: <span>{totals.pbPropagations}</span></h4>
-        <h4 className="flex items-center justify-between gap-4">Votes Generated: <span>{totals.votesGenerated}</span></h4>
-        <h4 className="flex items-center justify-between gap-4">Votes Propagations: <span>{totals.votesPropagations}</span></h4>
+        <h4 className="flex items-center justify-between gap-4">Blocks Generated: <span>{totals.pbGenerated}</span></h4>
+        <h4 className="flex items-center justify-between gap-4">Block Propagations: <span>{totals.pbPropagations}</span></h4>
+        <h4 className="flex items-center justify-between gap-4">Vote Bundles Generated: <span>{totals.votesGenerated}</span></h4>
+        <h4 className="flex items-center justify-between gap-4">Vote Bundle Propagations: <span>{totals.votesPropagations}</span></h4>
+        <br />
+        <h4 className="flex items-center justify-between gap-4">Transactions On-Chain Directly<span>{totals.praosTxOnChain}</span></h4>
+        <h4 className="flex items-center justify-between gap-4">Transactions On-Chain from Leios<span>{totals.leiosTxOnChain}</span></h4>
       </div>
     </div>
   );

ui/src/components/Graph/types.ts

@@ -128,6 +128,12 @@ export interface IPraosBlockGenerated {
   id: string;
   slot: number;
   producer: number;
+  endorsement: IEndorsement | null;
+  transactions: number[];
+}
+
+export interface IEndorsement {
+  eb: { id: string }
 }
 
 export interface IPraosBlockReceived {
@@ -151,7 +157,11 @@ export interface IEndorserBlockGenerated {
   id: string;
   slot: number;
   producer: number;
-  blocks: any[] // @todo
+  input_blocks: IInputBlock[] // @todo
+}
+
+export interface IInputBlock {
+  id: string;
 }
 
 export interface IEndorserBlockReceived {

ui/src/contexts/GraphContext/GraphContextProvider.tsx

@@ -50,7 +50,7 @@ export const GraphContextProvider: FC<
   }, []);
 
   const [state, dispatch] = useReducer(reducer, defaultSyncedState);
-  
+
   const canvasRef = useRef<HTMLCanvasElement>(defaultState.canvasRef.current);
   const resolvedState = useMemo(
     () => ({

ui/src/contexts/GraphContext/context.ts

@@ -6,6 +6,10 @@ import { IGraphContext, IGraphContextState, ISimulationAggregatedDataState } fro
 export const defaultAggregatedData: ISimulationAggregatedDataState = {
   progress: 0,
   nodes: new Map(),
+  global: {
+    praosTxOnChain: 0,
+    leiosTxOnChain: 0,
+  },
   lastNodesUpdated: []
 };
 
@@ -23,6 +27,6 @@ export const defaultState: IGraphContextState = {
 
 export const GraphContext: Context<IGraphContext> = createContext({
   state: defaultState,
-  dispatch: (_val) => {}
+  dispatch: (_val) => { }
 });
 export const useGraphContext = () => useContext(GraphContext);

ui/src/contexts/GraphContext/types.ts

@@ -20,6 +20,8 @@ export interface ISimulationAggregatedTotalData {
   pbPropagations: number;
   votesGenerated: number;
   votesPropagations: number;
+  praosTxOnChain: number;
+  leiosTxOnChain: number;
 }
 
 export interface ISimulationAggregatedData {
@@ -40,12 +42,23 @@ export interface ISimulationAggregatedData {
   votesSent: number;
 }
 
+export interface ISimulationGlobalData {
+  praosTxOnChain: number;
+  leiosTxOnChain: number;
+}
+
 export interface ISimulationAggregatedDataState {
   progress: number;
   nodes: Map<string, ISimulationAggregatedData>;
+  global: ISimulationGlobalData;
   lastNodesUpdated: string[];
 }
 
+export interface ISimulationIntermediateDataState {
+  txsPerIb: Map<string, number>;
+  txsPerEb: Map<string, number>;
+}
+
 export interface IGraphContextState {
   canvasRef: RefObject<HTMLCanvasElement>;
   canvasScale: number;
@@ -62,11 +75,13 @@ export interface IGraphContextState {
 export type TGraphContextActions =
   | { type: "SET_CURRENT_NODE"; payload: string | undefined }
   | { type: "SET_BATCH_SIZE"; payload: number }
-  | { type: "SET_CANVAS_PROPS"; payload: Partial<{
-    canvasScale: ((prev: number) => number) | number,
-    canvasOffsetX: ((prev: number) => number) | number,
-    canvasOffsetY: ((prev: number) => number) | number
-  }> }
+  | {
+    type: "SET_CANVAS_PROPS"; payload: Partial<{
+      canvasScale: ((prev: number) => number) | number,
+      canvasOffsetX: ((prev: number) => number) | number,
+      canvasOffsetY: ((prev: number) => number) | number
+    }>
+  }
   | { type: "SET_AGGREGATED_DATA"; payload: ISimulationAggregatedDataState }
   | {
     type: "BATCH_UPDATE";