chore: hook up transaction list, etc

ui/src/app/queries.ts

@@ -78,7 +78,7 @@ export const getSetSimulationMaxTime = async (): Promise<number> => {
 export const getSimulationTopography = async () => {
   const filePath = path.resolve(
     __dirname,
-    "../../../../../sim-rs/test_data/realistic.toml",
+    "../../../../../sim-rs/test_data/simplified.toml",
   );
   const fileStream = createReadStream(filePath, {
     encoding: "utf8",

ui/src/components/Graph/GraphWapper.tsx

@@ -1,6 +1,5 @@
 "use client";
 
-import { Test } from "@/app/Test";
 import { GraphContextProvider } from "@/contexts/GraphContext/GraphContextProvider";
 import { FC } from "react";
 import { Canvas } from "./modules/Canvas";
@@ -19,7 +18,6 @@ export const GraphWrapper: FC<IGraphWrapperProps> = ({
   topography,
 }) => (
   <GraphContextProvider maxTime={maxTime} topography={topography}>
-    <Test />
     <div className="container mx-auto">
       <div className="flex items-center justify-center gap-4 my-4 max-w-3xl mx-auto">
         <Slider />

ui/src/components/Graph/hooks/queries.tsx

@@ -11,11 +11,10 @@ import {
 } from "../types";
 
 export const useStreamMessagesHandler = () => {
-  const { state: { messages }, dispatch } = useGraphContext();
+  const { dispatch } = useGraphContext();
   const eventSource = useRef<EventSource>();
 
   // Mutable refs to store messages and transactions without causing re-renders
-  const totalEventCount = useRef<number>(0);
   const transactionsByIdRef = useRef<Map<number, ITransactionMessage[]>>(new Map());
   const txGeneratedMessagesById = useRef<Map<number, IServerMessage<ITransactionGenerated>>>(new Map());
   const txSentMessagesById = useRef<Map<number, IServerMessage<ITransactionSent>[]>>(new Map());
@@ -30,7 +29,6 @@ export const useStreamMessagesHandler = () => {
       eventSource.current = new EventSource(url);
       eventSource.current.onmessage = function (message) {
         const json: IServerMessage = JSON.parse(message.data);
-        totalEventCount.current++;
         processMessage(json);
       };
     },

ui/src/components/Graph/hooks/useHandlers.ts

@@ -39,7 +39,13 @@ export const useHandlers = () => {
       simulationStartTime.current !== 0
         ? (now - simulationStartTime.current) * speed
         : 0;
-    dispatch({ type: "SET_CURRENT_TIME", payload: elapsed });
+
+    if (elapsed >= maxTime) {
+      togglePlayPause();
+      return;
+    } else {
+      dispatch({ type: "SET_CURRENT_TIME", payload: elapsed });
+    }
 
     if (elapsed >= maxTime) {
       intervalId.current && clearInterval(intervalId.current);
@@ -103,9 +109,19 @@ export const useHandlers = () => {
     });
 
     // Draw the transactions
-    transactionsRef.current.forEach((txList) => {
+    transactionsRef.current.forEach((txList, id) => {
+      const lastMessage = txList[txList.length -1];
+      if (elapsed > lastMessage.sentTime + lastMessage.duration) {
+        dispatch({ type: "ADD_GENERATED_MESSAGE", payload: elapsed })
+        transactionsRef.current.delete(id);
+        txList.forEach(tx => {
+          txSentMessagesRef.current.delete(tx.sentTime);
+          txReceivedMessagesRef.current.delete(tx.sentTime + tx.duration);
+        })
+      }
+
       txList.forEach((transaction) => {
-        const { duration, source, target, sentTime, id } = transaction;
+        const { duration, source, target, sentTime } = transaction;
         const sourceNode = topography.nodes.get(source);
         const targetNode = topography.nodes.get(target);
 
@@ -126,12 +142,12 @@ export const useHandlers = () => {
         if (transactionElapsedTime < 0) {
           return;
         }
-        // Cleanup if transaction is 50ms old.
-        else if (transactionElapsedTime > sentTime + duration + 100) {
-          transactionsRef.current.delete(id);
-          txSentMessagesRef.current.delete(sentTime);
-          txReceivedMessagesRef.current.delete(sentTime + duration);
+
+        // If we're past the animation, log it to our sent transaction store.
+        else if (elapsed > sentTime + duration) {
+          dispatch({ type: "ADD_SENT_TX", payload: sentTime })
         }
+
         // Draw the transaction event.
         else {
           // Calculate the interpolation factor
@@ -174,7 +190,7 @@ export const useHandlers = () => {
     });
 
     context.restore();
-  }, [playing, speed]);
+  }, [playing, speed, maxTime]);
 
   // Function to toggle play/pause
   const togglePlayPause = useCallback(() => {

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

@@ -5,26 +5,22 @@ import { FC, useEffect } from "react";
 import { useHandlers } from "../hooks/useHandlers";
 
 export const Canvas: FC = () => {
-  const { state: { topographyLoaded, canvasRef } } = useGraphContext();
+  const { state: { sentTxs, generatedMessages, canvasRef } } = useGraphContext();
   const { drawCanvas } = useHandlers();
 
   useEffect(() => {
-    if (!topographyLoaded) {
-      return;
-    }
-
     drawCanvas();
-  }, [topographyLoaded])
+  }, [])
 
   return (
     <div className="h-[80vh] border-2 border-gray-200 rounded mb-8 w-2/3">
       <div className="flex items-center justify-center gap-4 mt-4">
-        {/* <div>
-          <h4>Transactions Generated: {generatedTxs.size}</h4>
+        <div>
+          <h4>Transactions Generated: {generatedMessages.size}</h4>
         </div>
         <div>
           <h4>Transactions Sent: {sentTxs.size}</h4>
-        </div> */}
+        </div>
       </div>
       <canvas ref={canvasRef} />
     </div>

ui/src/components/Graph/modules/Chart.TransactionsSent.tsx

@@ -17,8 +17,7 @@ import { useGraphContext } from "@/contexts/GraphContext/context";
 
 const CustomTooltip = ({
   active,
-  payload,
-  label,
+  payload
 }: TooltipProps<ValueType, NameType>) => {
   if (active && payload && payload.length) {
     return (
@@ -39,9 +38,9 @@ export const ChartTransactionsSent: FC = () => {
     () =>
       [...sentTxs.values()].map((v, index) => ({
         message: index + 1,
-        time: Number(v.split("#")[1]),
+        time: v,
       })),
-    [sentTxs.size],
+    [sentTxs],
   );
 
   return (

ui/src/contexts/GraphContext/reducer.ts

@@ -15,48 +15,16 @@ export const reducer = (
       return { ...state, generatedMessages: newSet };
     }
 
+    case "SET_GENERATED_MESSSAGES": {
+      return { ...state, generatedMessages: action.payload };
+    }
+
     case "REMOVE_GENERATED_MESSAGE": {
       const newSet = new Set(state.generatedMessages);
       newSet.delete(action.payload);
       return { ...state, generatedMessages: newSet };
     }
 
-    case "SET_MAX_TIME":
-      return { ...state, maxTime: action.payload };
-
-    case "ADD_MESSAGE": {
-      const newMessages = new Map(state.messages);
-      newMessages.set(action.payload.time, action.payload);
-      return { ...state, messages: newMessages };
-    }
-
-    case "ADD_MESSAGES": {
-      const newPrev = new Map(state.messages);
-      newPrev.forEach(v => {
-        if (state.currentTime > v.time / 1_000_000) {
-          newPrev.delete(v.time);
-        }
-      })
-
-      const newMessages = new Map([...newPrev, ...action.payload]);
-      return { ...state, messages: newMessages };
-    }
-
-    case "REMOVE_MESSAGE": {
-      const newMessages = new Map(state.messages);
-      newMessages.delete(action.payload);
-      return { ...state, messages: newMessages };
-    }
-
-    case "REMOVE_MESSAGES": {
-      debugger;
-      const newMessages = new Map(state.messages);
-      action.payload.forEach((time) => {
-        newMessages.delete(time);
-      });
-      return { ...state, messages: newMessages };
-    }
-
     case "SET_PLAYING": {
       return { ...state, playing: action.payload };
     }
@@ -71,30 +39,18 @@ export const reducer = (
       return { ...state, sentTxs: newSet };
     }
 
+    case "SET_SENT_TXS": {
+      return { ...state, sentTxs: action.payload };
+    }
+
     case "REMOVE_SENT_TX": {
       const newSet = new Set(state.sentTxs);
       newSet.delete(action.payload);
       return { ...state, sentTxs: newSet };
     }
 
-    case "SET_SPEED":
+    case "SET_SPEED": {
       return { ...state, speed: action.payload };
-
-    case "SET_TOPOGRAPHY":
-      return { ...state, topography: action.payload };
-
-    case "SET_TOPOGRAPHY_LOADED":
-      return { ...state, topographyLoaded: action.payload };
-
-    case "SET_TRANSACTIONS": {
-      return { ...state, transactions: action.payload };
-    }
-
-    case "REMOVE_TRANSACTION": {
-      debugger;
-      const newTxs = new Map(state.transactions);
-      newTxs.delete(action.payload);
-      return { ...state, transactions: newTxs };
     }
 
     case "BATCH_UPDATE": {

ui/src/contexts/GraphContext/types.ts

@@ -1,7 +1,7 @@
 import {
   IServerMessage,
   ITransactionMessage,
-  ITransformedNodeMap,
+  ITransformedNodeMap
 } from "@/components/Graph/types";
 import { Dispatch, MutableRefObject, RefObject } from "react";
 
@@ -19,7 +19,7 @@ export interface IGraphContextState {
   maxTime: number;
   messages: Map<number, IServerMessage>;
   playing: boolean;
-  sentTxs: Set<string>;
+  sentTxs: Set<number>;
   simulationStartTime: MutableRefObject<number>;
   simulationPauseTime: MutableRefObject<number>;
   speed: ESpeedOptions;
@@ -31,27 +31,14 @@ export interface IGraphContextState {
 export type TGraphContextActions =
   | { type: "SET_CURRENT_TIME"; payload: number }
   | { type: "ADD_GENERATED_MESSAGE"; payload: number }
+  | { type: "SET_GENERATED_MESSSAGES", payload: Set<number> }
   | { type: "REMOVE_GENERATED_MESSAGE"; payload: number }
-  | { type: "SET_MAX_TIME"; payload: number }
-  | { type: "ADD_MESSAGE"; payload: IServerMessage }
-  | { type: "ADD_MESSAGES"; payload: Map<number, IServerMessage> }
-  | { type: "REMOVE_MESSAGE"; payload: number }
-  | { type: "REMOVE_MESSAGES"; payload: number[] }
+  | { type: "ADD_SENT_TX"; payload: number }
+  | { type: "SET_SENT_TXS"; payload: Set<number> }
+  | { type: "REMOVE_SENT_TX"; payload: number }
   | { type: "SET_PLAYING"; payload: boolean }
   | { type: "TOGGLE_PLAYING" }
-  | { type: "ADD_SENT_TX"; payload: string }
-  | { type: "REMOVE_SENT_TX"; payload: string }
   | { type: "SET_SPEED"; payload: ESpeedOptions }
-  | { type: "SET_TOPOGRAPHY"; payload: ITransformedNodeMap }
-  | { type: "SET_TOPOGRAPHY_LOADED"; payload: boolean }
-  | {
-      type: "SET_TRANSACTIONS";
-      payload: Map<number, ITransactionMessage[]>;
-    }
-  | {
-    type: "REMOVE_TRANSACTION";
-    payload: number;
-  }
   | {
     type: "BATCH_UPDATE";
     payload: Partial<IGraphContextState>;