sim-rs: visualize recursive EBs

Author: SupernaviX

sim-rs/parameters/full.yaml

@@ -0,0 +1 @@
+leios-variant: full

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

@@ -1,6 +1,6 @@
-import { ISimulationBlock, ISimulationTransaction } from '@/contexts/SimContext/types';
+import { ISimulationBlock, ISimulationEndorsementBlock, ISimulationInputBlock, ISimulationTransaction } from '@/contexts/SimContext/types';
 import cx from "classnames";
-import { CSSProperties, FC, MouseEvent, PropsWithChildren, useMemo, useState } from "react";
+import { CSSProperties, FC, MouseEvent, PropsWithChildren, ReactElement, useMemo, useState } from "react";
 
 import { printBytes } from '@/utils';
 import classes from "./styles.module.css";
@@ -12,21 +12,34 @@ export interface IBlockContentsProps {
 interface IBoxProps extends PropsWithChildren {
   className?: string;
   style?: CSSProperties;
-  selected?: boolean;
-  select?: (e: MouseEvent) => void;
+  hovered?: boolean;
+  onHover?: (e: MouseEvent) => void;
+  onClick?: (e: MouseEvent) => void;
 }
 
-const Box: FC<IBoxProps> = ({ selected, select, children, className, style }) => {
-  const color = selected ? "border-black" : "border-gray-400";
+const Box: FC<IBoxProps> = ({ hovered, onHover, onClick, children, className, style }) => {
+  const color = hovered ? "border-black" : "border-gray-400";
   return (
-    <span className={cx("border-2 border-solid min-h-24 max-h-48 w-48 flex flex-col items-center justify-center text-center", color, { 'cursor-pointer': !!select }, { [classes.selected]: selected }, className)} style={style}
-      onMouseEnter={select}
-      onMouseMove={select} >
+    <span className={cx("border-2 border-solid min-h-24 max-h-48 w-48 flex flex-col items-center justify-center text-center", color, { 'cursor-pointer': !!onHover }, { [classes.hovered]: hovered }, className)} style={style}
+      onMouseEnter={onHover}
+      onMouseMove={onHover}
+      onClick={onClick} >
       {children}
     </span >
   )
 }
 
+interface ITabButtonProps {
+  name: string;
+  active: boolean;
+  onClick: () => void;
+}
+
+const TabButton: FC<ITabButtonProps> = ({ name, active, onClick }) => {
+  const color = active ? "bg-[blue]" : "bg-gray-400";
+  return <button className={`${color} text-white rounded-md px-4 py-2`} onClick={onClick}>{name}</button>
+}
+
 interface ITXStats {
   name: string;
   slot: number;
@@ -64,11 +77,92 @@ const Stats: FC<IStatsProps> = ({ name, slot, txs, breakdown, position: [left, t
   )
 }
 
-interface SelectState {
+interface HoverState {
   key: string,
   position: [number, number]
 }
 
+enum ContentsView {
+  Input,
+  Endorser,
+}
+
+interface IBlockProps {
+  block: ISimulationBlock,
+  hovered: boolean,
+  onHover: (e: MouseEvent) => void;
+}
+
+const Block: FC<IBlockProps> = ({ block, hovered, onHover }) => {
+  return <div className={classes.block}>
+    <Box hovered={hovered} onHover={onHover}>
+      Block
+      <span className='text-sm'>Slot {block.slot}, {block.txs.length} TX</span>
+    </Box>
+  </div>
+}
+
+interface IInputBlocksProps {
+  ibs: ISimulationInputBlock[],
+  block: ISimulationBlock,
+  hovered: HoverState | null,
+  onHover: (box: string | null) => (e: MouseEvent) => void;
+}
+
+const InputBlocksList: FC<IInputBlocksProps> = ({ ibs, hovered, block, onHover }) => {
+  return <div className={cx("border-2 p-[25px] border-black max-w-[80vw] overflow-scroll")}>
+    <div className="flex gap-2">
+      {ibs.map(ib => {
+        const isHovered = hovered?.key === ib.id;
+        const proportion = Math.min(100, ib.txs.length * 1000 / block.txs.length);
+        return (
+          <Box key={ib.id} style={{ backgroundColor: `color-mix(in hsl, white, #82ca9d ${proportion}%)` }} hovered={isHovered} onHover={onHover(ib.id)} className={classes.input}>
+            {isHovered ? 'Input Block' : 'IB'}
+            <span className="text-sm">Slot&nbsp;{ib.slot}, {ib.txs.length}&nbsp;TX</span>
+          </Box>
+        );
+      })}
+    </div>
+  </div>
+};
+
+interface IEndorserBlockProps {
+  eb: ISimulationEndorsementBlock,
+  hovered: boolean,
+  onHover: (e: MouseEvent) => void;
+  onClick?: (e: MouseEvent) => void;
+}
+
+const EndorserBlock: FC<IEndorserBlockProps> = ({ eb, hovered, onHover, onClick }) => {
+  return <div className={classes.endorser}>
+    <Box hovered={hovered} onHover={onHover} onClick={onClick}>
+      Endorser Block
+      <span className='text-sm'>Slot {eb.slot}</span>
+      {eb.ibs.length ? <span className='text-sm'>References {eb.ibs.length} IB(s)</span> : null}
+      {eb.ebs.length ? <span className='text-sm'>References {eb.ebs.length} EB(s)</span> : null}
+    </Box>
+  </div>
+};
+
+interface IEndorserBlocksProps {
+  ebs: ISimulationEndorsementBlock[],
+  hovered: HoverState | null,
+  onHover: (box: string | null) => (e: MouseEvent) => void;
+  onClick: (eb: ISimulationEndorsementBlock) => (e: MouseEvent) => void;
+}
+
+const EndorserBlocksList: FC<IEndorserBlocksProps> = ({ ebs, hovered, onHover, onClick }) => {
+  return <div className={cx("border-2 p-[25px] border-black max-w-[80vw] overflow-scroll")}>
+    <div className="flex gap-2">
+      {ebs.map(eb => {
+        return (
+          <EndorserBlock key={eb.id} eb={eb} hovered={hovered?.key == eb.id} onHover={onHover(eb.id)} onClick={onClick(eb)} />
+        );
+      })}
+    </div>
+  </div>
+};
+
 export const BlockContents: FC<IBlockContentsProps> = ({ block }) => {
   const stats = useMemo(() => {
     const result: Map<string, ITXStats> = new Map();
@@ -85,80 +179,94 @@ export const BlockContents: FC<IBlockContentsProps> = ({ block }) => {
       breakdown,
     });
     if (block.cert) {
-      result.set("eb", {
-        name: "Endorsement Block",
-        slot: block.cert.eb.slot,
-        txs: null,
-        breakdown: [["Size", block.cert.eb.bytes]],
-      });
-      for (const ib of block.cert.eb.ibs) {
-        result.set(ib.id, {
-          name: "Input Block",
-          slot: ib.slot,
-          txs: ib.txs,
-          breakdown: [
-            ["Header size", ib.headerBytes],
-          ],
+      const ebs = [block.cert.eb];
+      while (ebs.length) {
+        const eb = ebs.pop()!;
+        result.set(eb.id, {
+          name: "Endorser Block",
+          slot: eb.slot,
+          txs: null,
+          breakdown: [["Size", eb.bytes]],
         });
+        for (const ib of eb.ibs) {
+          result.set(ib.id, {
+            name: "Input Block",
+            slot: ib.slot,
+            txs: ib.txs,
+            breakdown: [
+              ["Header size", ib.headerBytes],
+            ],
+          });
+        }
+        for (const nestedEb of eb.ebs) {
+          ebs.push(nestedEb);
+        }
       }
     }
     return result;
   }, [block]);
 
-  const [selected, setSelected] = useState<SelectState | null>(null);
-  const selectBox = (box: string | null) => (e: MouseEvent) => {
+  const [hovered, setHovered] = useState<HoverState | null>(null);
+  const [viewing, setViewing] = useState(ContentsView.Input);
+  const [ebTrail, setEbTrail] = useState(block.cert?.eb ? [block.cert.eb] : []);
+
+  const onHover = (box: string | null) => (e: MouseEvent) => {
     e.stopPropagation();
     if (box) {
-      setSelected({
+      setHovered({
         key: box,
         position: [e.pageX, e.pageY],
       });
     } else {
-      setSelected(null);
+      setHovered(null);
     }
   };
 
-  const eb = block.cert?.eb;
-  const ibs = block.cert?.eb?.ibs ?? [];
+  const viewParentEb = () => {
+    setEbTrail(trail => trail.slice(1));
+  }
+  const viewChildEb = (eb: ISimulationEndorsementBlock) => () => {
+    setEbTrail(trail => [eb, ...trail]);
+  }
+
+  const eb: ISimulationEndorsementBlock | undefined = ebTrail[0];
+  const ibs = eb?.ibs ?? [];
+  const ebs = eb?.ebs ?? [];
+
+  const parent = ebTrail[1];
+  const topRow = parent ? (
+    <EndorserBlock eb={parent} hovered={hovered?.key == parent.id} onHover={onHover(parent.id)} onClick={viewParentEb} />
+  ) : (
+    <Block block={block} hovered={hovered?.key == "block"} onHover={onHover("block")} />
+  )
+
+  let bottomRow: ReactElement | null = null;
+  if (viewing == ContentsView.Input && ibs.length) {
+    bottomRow = <InputBlocksList ibs={ibs} block={block} hovered={hovered} onHover={onHover} />
+  }
+  if (viewing == ContentsView.Endorser && ebs.length) {
+    bottomRow = <EndorserBlocksList ebs={ebs} hovered={hovered} onHover={onHover} onClick={viewChildEb} />
+  }
 
   return (
     <>
-      {selected && <Stats {...stats.get(selected.key)!} position={selected.position} onMouseMove={selectBox(selected.key)} />}
+      {hovered && <Stats {...stats.get(hovered.key)!} position={hovered.position} onMouseMove={onHover(hovered.key)} />}
 
-      <div className='flex flex-col w-full h-3/5 items-center' onMouseMove={selectBox(null)}>
+      <div className='flex flex-col w-full h-3/5 items-center' onMouseMove={onHover(null)}>
         <h2 className='font-bold text-xl'>Block Transactions</h2>
         <div className="flex flex-col w-full h-full items-center justify-center">
-          <div className={classes.block}>
-            <Box selected={selected?.key === "block"} select={selectBox("block")}>
-              Block
-              <span className='text-sm'>Slot {block.slot}, {block.txs.length} TX</span>
-            </Box>
-          </div>
+          {topRow}
           {eb && (<span className="flex flex-none w-[2px] h-[50px] bg-black" />)}
           {eb && (
-            <div className={classes.endorser}>
-              <Box selected={selected?.key === "eb"} select={selectBox("eb")}>
-                Endorsement Block
-                <span className='text-sm'>Slot {eb.slot}</span>
-              </Box>
+            <div className='flex gap-4 items-center'>
+              <TabButton name="View IB(s)" active={viewing == ContentsView.Input} onClick={() => setViewing(ContentsView.Input)} />
+              <EndorserBlock eb={eb} hovered={hovered?.key == eb.id} onHover={onHover(eb.id)} />
+              <TabButton name="View EB(s)" active={viewing == ContentsView.Endorser} onClick={() => setViewing(ContentsView.Endorser)} />
             </div>
           )}
-          {ibs.length ? <>
-            <span className="flex flex-none w-[2px] h-[25px] bg-black" />
-            <div className={cx("border-2 p-[25px] border-black max-w-[80vw] overflow-scroll")}>
-              <div className="flex gap-2">
-                {ibs.map(ib => {
-                  const isSelected = selected?.key === ib.id;
-                  const proportion = Math.min(100, ib.txs.length * 1000 / block.txs.length);
-                  return (
-                    <Box key={ib.id} style={{ backgroundColor: `color-mix(in hsl, white, #82ca9d ${proportion}%)` }} selected={isSelected} select={selectBox(ib.id)} className={classes.input}>
-                      {isSelected ? 'Input Block' : 'IB'}
-                      <span className="text-sm">Slot&nbsp;{ib.slot}, {ib.txs.length}&nbsp;TX</span>
-                    </Box>
-                  );
-                })}
-              </div>
-            </div>
+          {bottomRow ? <>
+            <span className="flex flex-none w-[2px] h-[50px] bg-black" />
+            {bottomRow}
           </> : null}
         </div>
       </div>

ui/src/components/Blocks/modules/styles.module.css

@@ -15,6 +15,6 @@
   flex-shrink: 1;
 }
 
-.input.selected {
+.input.hovered {
   flex-shrink: 0;
 }

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

@@ -75,7 +75,7 @@ export const NodeStats: FC = () => {
   const data = [
     { name: "Transactions", ...getCounts("tx"), color: '#26de81' },
     { name: "Input Blocks", ...getCounts("ib"), color: '#2bcbba' },
-    { name: "Endorsement Blocks", ...getCounts("eb"), color: '#4b7bec' },
+    { name: "Endorser Blocks", ...getCounts("eb"), color: '#4b7bec' },
     { name: "Votes", ...getCounts("votes"), color: '#2d98da' },
     { name: "Blocks", ...getCounts("pb"), color: '#fc5c65' },
   ]

ui/src/components/Sim/hooks/utils.ts

@@ -4,6 +4,7 @@ import {
   ISimulationAggregatedData,
   ISimulationAggregatedDataState,
   ISimulationBlock,
+  ISimulationEndorsementBlock,
   ISimulationIntermediateDataState,
 } from "@/contexts/SimContext/types";
 
@@ -51,6 +52,33 @@ const getNodeData = (aggregationNodeDataRef: ISimulationAggregatedDataState, nod
   return data;
 };
 
+const extractEb = (intermediate: ISimulationIntermediateDataState, ebId: string): ISimulationEndorsementBlock => {
+  const eb = intermediate.ebs.get(ebId)!;
+  const ibs = eb.ibs.map(id => {
+    const ib = intermediate.ibs.get(id)!;
+    for (const tx of ib.txs) {
+      if (!intermediate.praosTxs.has(tx)) {
+        intermediate.leiosTxs.add(tx);
+      }
+    }
+    const txs = ib.txs.map(tx => intermediate.txs[tx]);
+    return {
+      id,
+      slot: ib.slot,
+      headerBytes: ib.headerBytes,
+      txs,
+    };
+  });
+  const ebs = eb.ebs.map(id => extractEb(intermediate, id));
+  return {
+    id: ebId,
+    slot: eb.slot,
+    bytes: eb.bytes,
+    ibs,
+    ebs,
+  }
+};
+
 export const processMessage = (
   json: IServerMessage,
   aggregatedData: ISimulationAggregatedDataState,
@@ -91,30 +119,9 @@ export const processMessage = (
     if (message.endorsement != null) {
       bytes += message.endorsement.bytes;
       const ebId = message.endorsement.eb.id;
-      const eb = intermediate.ebs.get(ebId)!;
-      const ibs = eb.ibs.map(id => {
-        const ib = intermediate.ibs.get(id)!;
-        for (const tx of ib.txs) {
-          if (!intermediate.praosTxs.has(tx)) {
-            intermediate.leiosTxs.add(tx);
-          }
-        }
-        const txs = ib.txs.map(tx => intermediate.txs[tx]);
-        return {
-          id,
-          slot: ib.slot,
-          headerBytes: ib.headerBytes,
-          txs,
-        };
-      })
       block.cert = {
         bytes: message.endorsement.bytes,
-        eb: {
-          id: ebId,
-          slot: eb.slot,
-          bytes: eb.bytes,
-          ibs,
-        }
+        eb: extractEb(intermediate, ebId),
       }
     }
     trackDataGenerated(aggregatedData, intermediate, message.producer, "pb", message.id, bytes);
@@ -131,6 +138,7 @@ export const processMessage = (
       slot: message.slot,
       bytes: message.bytes,
       ibs: message.input_blocks.map(ib => ib.id),
+      ebs: message.endorser_blocks.map(eb => eb.id),
     });
   } else if (message.type === EMessageType.EBSent) {
     trackDataSent(aggregatedData, intermediate, message.sender, "eb", message.id);