Highlight matching transactions in the block visualizations

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

@@ -6,6 +6,8 @@ import TxSprite from './tx-sprite';
 import TxView from './tx-view';
 import { Position } from './sprite-types';
 import { Price } from '../../services/price.service';
+import { StateService } from '../../services/state.service';
+import { Subscription } from 'rxjs';
 
 @Component({
   selector: 'app-block-overview-graph',
@@ -44,16 +46,25 @@ export class BlockOverviewGraphComponent implements AfterViewInit, OnDestroy, On
   scene: BlockScene;
   hoverTx: TxView | void;
   selectedTx: TxView | void;
+  highlightTx: TxView | void;
   mirrorTx: TxView | void;
   tooltipPosition: Position;
 
   readyNextFrame = false;
 
+  searchText: string;
+  searchSubscription: Subscription;
+
   constructor(
     readonly ngZone: NgZone,
     readonly elRef: ElementRef,
+    private stateService: StateService,
   ) {
     this.vertexArray = new FastVertexArray(512, TxSprite.dataSize);
+    this.searchSubscription = this.stateService.searchText$.subscribe((text) => {
+      this.searchText = text;
+      this.updateSearchHighlight();
+    });
   }
 
   ngAfterViewInit(): void {
@@ -109,6 +120,7 @@ export class BlockOverviewGraphComponent implements AfterViewInit, OnDestroy, On
       this.scene.setup(transactions);
       this.readyNextFrame = true;
       this.start();
+      this.updateSearchHighlight();
     }
   }
 
@@ -116,6 +128,7 @@ export class BlockOverviewGraphComponent implements AfterViewInit, OnDestroy, On
     if (this.scene) {
       this.scene.enter(transactions, direction);
       this.start();
+      this.updateSearchHighlight();
     }
   }
 
@@ -123,6 +136,7 @@ export class BlockOverviewGraphComponent implements AfterViewInit, OnDestroy, On
     if (this.scene) {
       this.scene.exit(direction);
       this.start();
+      this.updateSearchHighlight();
     }
   }
 
@@ -130,6 +144,7 @@ export class BlockOverviewGraphComponent implements AfterViewInit, OnDestroy, On
     if (this.scene) {
       this.scene.replace(transactions || [], direction, sort);
       this.start();
+      this.updateSearchHighlight();
     }
   }
 
@@ -137,6 +152,7 @@ export class BlockOverviewGraphComponent implements AfterViewInit, OnDestroy, On
     if (this.scene) {
       this.scene.update(add, remove, change, direction, resetLayout);
       this.start();
+      this.updateSearchHighlight();
     }
   }
 
@@ -406,6 +422,19 @@ export class BlockOverviewGraphComponent implements AfterViewInit, OnDestroy, On
     }
   }
 
+  updateSearchHighlight(): void {
+    if (this.highlightTx && this.highlightTx.txid !== this.searchText && this.scene) {
+      this.scene.setHighlight(this.highlightTx, false);
+      this.start();
+    } else if (this.searchText && this.searchText.length === 64) {
+      this.highlightTx = this.scene.txs[this.searchText];
+      if (this.highlightTx) {
+        this.scene.setHighlight(this.highlightTx, true);
+        this.start();
+      }
+    }
+  }
+
   setHighlightingEnabled(enabled: boolean): void {
     if (this.scene) {
       this.scene.setHighlighting(enabled);