visualizer: prettify graphs

Author: SupernaviX

ui/.gitignore

@@ -22,3 +22,6 @@ dist-ssr
 *.njsproj
 *.sln
 *.sw?
+
+# files used for debugging
+public/traces/*.jsonl

ui/src/components/Blocks/modules/BlockGraph.tsx

@@ -1,6 +1,6 @@
 import { useSimContext } from "@/contexts/SimContext/context";
 import { FC, useCallback, useMemo } from "react";
-import { Bar, BarChart, Legend, Tooltip, XAxis, YAxis } from "recharts";
+import { Bar, BarChart, Legend, ResponsiveContainer, Tooltip, XAxis, YAxis } from "recharts";
 
 export const BlockGraph: FC = ({ }) => {
   const {
@@ -34,14 +34,16 @@ export const BlockGraph: FC = ({ }) => {
   return (
     <div className="flex flex-col w-full h-4/5 items-center justify-center">
       <h2 className="font-bold text-xl">Transactions Per Block</h2>
-      <BarChart width={640} height={480} data={data}>
-        <XAxis dataKey="name" />
-        <YAxis />
-        <Tooltip />
-        <Legend />
-        <Bar dataKey="praosTx" stackId="a" name={"TXs in block"} fill="#8884d8" onClick={viewBlock} />
-        <Bar dataKey="leiosTx" stackId="a" name={"TXs from Leios"} fill="#82ca9d" onClick={viewBlock} />
-      </BarChart>
+      <ResponsiveContainer width="80%" height="80%">
+        <BarChart data={data}>
+          <XAxis dataKey="name" />
+          <YAxis />
+          <Tooltip />
+          <Legend />
+          <Bar dataKey="praosTx" stackId="a" name={"TXs in block"} fill="#8884d8" onClick={viewBlock} />
+          <Bar dataKey="leiosTx" stackId="a" name={"TXs from Leios"} fill="#82ca9d" onClick={viewBlock} />
+        </BarChart>
+      </ResponsiveContainer>
     </div>
   )
 

ui/src/components/Sim/SimWrapper.tsx

@@ -78,9 +78,9 @@ export const SimWrapper: FC = ({
   const setActiveTab = useCallback((tab: Tab) => dispatch({ type: 'SET_ACTIVE_TAB', payload: tab }), [dispatch]);
   return (
     <>
-      <div className="flex flex-col items-center justify-between gap-4 z-10 absolute left-10 top-10">
+      {activeTab === Tab.Graph ? <div className="flex flex-col items-center justify-between gap-4 z-10 absolute left-10 top-10">
         <Stats />
-      </div>
+      </div> : null}
       <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}

ui/src/components/Transactions/TransactionsView.tsx

@@ -1,6 +1,6 @@
 import { useSimContext } from "@/contexts/SimContext/context";
 import { FC, useMemo } from "react";
-import { Area, AreaChart, Tooltip, XAxis, YAxis } from "recharts";
+import { Area, AreaChart, ResponsiveContainer, Tooltip, XAxis, YAxis } from "recharts";
 
 export const TransactionsView: FC = ({ }) => {
   const {
@@ -28,15 +28,17 @@ export const TransactionsView: FC = ({ }) => {
   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>
+      <ResponsiveContainer width="80%" height="80%">
+        <AreaChart data={data}>
+          <XAxis dataKey="Time" />
+          <YAxis />
+          <Tooltip />
+          <Area type="monotone" dataKey="Created" stackId="1" stroke="#9e0142" fill="#9e0142" />
+          <Area type="monotone" dataKey="In Input Block" stackId="1" stroke="#d0394e" fill="#d0394e" />
+          <Area type="monotone" dataKey="In Endorser Block" stackId="1" stroke="#ef6445" fill="#ef6445" />
+          <Area type="monotone" dataKey="On Chain" stackId="1" stroke="#fb9d56" fill="#fb9d56" />
+        </AreaChart>
+      </ResponsiveContainer>
     </div>
   );
 }