Block viz filters proof of concept

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

@@ -26,6 +26,7 @@ export class BlockOverviewGraphComponent implements AfterViewInit, OnDestroy, On
   @Input() mirrorTxid: string | void;
   @Input() unavailable: boolean = false;
   @Input() auditHighlighting: boolean = false;
+  @Input() filterFlags: bigint | null = 0b00000100_00000000_00000000_00000000n;
   @Input() blockConversion: Price;
   @Input() overrideColors: ((tx: TxView) => Color) | null = null;
   @Output() txClickEvent = new EventEmitter<{ tx: TransactionStripped, keyModifier: boolean}>();
@@ -462,6 +463,14 @@ export class BlockOverviewGraphComponent implements AfterViewInit, OnDestroy, On
     }
   }
 
+  setFilterFlags(flags: bigint | null): void {
+    if (this.scene) {
+      console.log('setting filter flags to ', this.filterFlags.toString(2));
+      this.scene.setFilterFlags(flags);
+      this.start();
+    }
+  }
+
   onTxClick(cssX: number, cssY: number, keyModifier: boolean = false) {
     const x = cssX * window.devicePixelRatio;
     const y = cssY * window.devicePixelRatio;

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

@@ -27,6 +27,7 @@ export default class BlockScene {
   configAnimationOffset: number | null;
   animationOffset: number;
   highlightingEnabled: boolean;
+  filterFlags: bigint | null = 0b00000100_00000000_00000000_00000000n;
   width: number;
   height: number;
   gridWidth: number;
@@ -277,6 +278,20 @@ export default class BlockScene {
     this.animateUntil = Math.max(this.animateUntil, tx.update(update));
   }
 
+  private updateTxColor(tx: TxView, startTime: number, delay: number, animate: boolean = true, duration?: number): void {
+    if (tx.dirty || this.dirty) {
+      const txColor = tx.getColor();
+      this.applyTxUpdate(tx, {
+        display: {
+          color: txColor
+        },
+        duration: animate ? (duration || this.animationDuration) : 1,
+        start: startTime,
+        delay: animate ? delay : 0,
+      });
+    }
+  }
+
   private updateTx(tx: TxView, startTime: number, delay: number, direction: string = 'left', animate: boolean = true): void {
     if (tx.dirty || this.dirty) {
       this.saveGridToScreenPosition(tx);
@@ -325,7 +340,7 @@ export default class BlockScene {
     } else {
       this.applyTxUpdate(tx, {
         display: {
-          position: tx.screenPosition
+          position: tx.screenPosition,
         },
         duration: animate ? this.animationDuration : 0,
         minDuration: animate ? (this.animationDuration / 2) : 0,

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

@@ -1,9 +1,9 @@
 import TxSprite from './tx-sprite';
 import { FastVertexArray } from './fast-vertex-array';
-import { TransactionStripped } from '../../interfaces/websocket.interface';
 import { SpriteUpdateParams, Square, Color, ViewUpdateParams } from './sprite-types';
 import { hexToColor } from './utils';
 import BlockScene from './block-scene';
+import { TransactionStripped } from '../../interfaces/node-api.interface';
 
 const hoverTransitionTime = 300;
 const defaultHoverColor = hexToColor('1bd8f4');
@@ -29,6 +29,7 @@ export default class TxView implements TransactionStripped {
   feerate: number;
   acc?: boolean;
   rate?: number;
+  bigintFlags?: bigint | null = 0b00000100_00000000_00000000_00000000n;
   status?: 'found' | 'missing' | 'sigop' | 'fresh' | 'freshcpfp' | 'added' | 'censored' | 'selected' | 'rbf' | 'accelerated';
   context?: 'projected' | 'actual';
   scene?: BlockScene;
@@ -57,6 +58,7 @@ export default class TxView implements TransactionStripped {
     this.acc = tx.acc;
     this.rate = tx.rate;
     this.status = tx.status;
+    this.bigintFlags = tx.flags ? BigInt(tx.flags) : 0n;
     this.initialised = false;
     this.vertexArray = scene.vertexArray;