multiblock mempool page

frontend/src/app/components/block-overview-graph/block-scene.ts

@@ -278,7 +278,7 @@ export default class BlockScene {
   }
 
   private applyTxUpdate(tx: TxView, update: ViewUpdateParams): void {
-    this.animateUntil = Math.max(this.animateUntil, tx.update(update, { minX: this.x, maxY: this.y + this.height }));
+    this.animateUntil = Math.max(this.animateUntil, tx.update(update, { minX: this.x - this.width, maxX: this.x + this.width + this.width, maxY: this.y + this.height }));
   }
 
   private updateTxColor(tx: TxView, startTime: number, delay: number, animate: boolean = true, duration?: number): void {

frontend/src/app/components/block-overview-graph/tx-sprite.ts

@@ -17,10 +17,11 @@ export default class TxSprite {
   tempAttributes: OptionalAttributes;
 
   minX: number;
+  maxX: number;
   maxY: number;
 
 
-  constructor(params: SpriteUpdateParams, vertexArray: FastVertexArray, minX, maxY: number) {
+  constructor(params: SpriteUpdateParams, vertexArray: FastVertexArray, minX: number, maxX: number, maxY: number) {
     const offsetTime = params.start;
     this.vertexArray = vertexArray;
     this.vertexData = Array(VI.length).fill(0);
@@ -30,6 +31,7 @@ export default class TxSprite {
     };
 
     this.minX = minX;
+    this.maxX = maxX;
     this.maxY = maxY;
 
     this.attributes = {
@@ -84,7 +86,7 @@ export default class TxSprite {
       minDuration: minimum remaining transition duration when adjust = true
       temp: if true, this update is only temporary (can be reversed with 'resume')
   */
-  update(params: SpriteUpdateParams, minX?: number, maxY?: number): void {
+  update(params: SpriteUpdateParams, minX?: number, maxX?: number, maxY?: number): void {
     const offsetTime = params.start || performance.now();
     const v = params.duration > 0 ? (1 / params.duration) : 0;
 

frontend/src/app/components/block-overview-graph/tx-view.ts

@@ -106,7 +106,7 @@ export default class TxView implements TransactionStripped {
 
     returns minimum transition end time
   */
-  update(params: ViewUpdateParams, { minX, maxY }: { minX: number, maxY: number }): number {
+  update(params: ViewUpdateParams, { minX, maxX, maxY }: { minX: number, maxX: number, maxY: number }): number {
     if (params.jitter) {
       params.delay += (Math.random() * params.jitter);
     }
@@ -117,6 +117,7 @@ export default class TxView implements TransactionStripped {
         toSpriteUpdate(params),
         this.vertexArray,
         minX,
+        maxX,
         maxY
       );
       // apply any pending hover event
@@ -130,6 +131,7 @@ export default class TxView implements TransactionStripped {
             temp: true
           },
           minX,
+          maxX,
           maxY
         );
       }
@@ -137,6 +139,7 @@ export default class TxView implements TransactionStripped {
       this.sprite.update(
         toSpriteUpdate(params),
         minX,
+        maxX,
         maxY
       );
     }