Highlight matching transactions in the block visualizations

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

@@ -7,6 +7,7 @@ import BlockScene from './block-scene';
 
 const hoverTransitionTime = 300;
 const defaultHoverColor = hexToColor('1bd8f4');
+const defaultHighlightColor = hexToColor('800080');
 
 const feeColors = mempoolFeeColors.map(hexToColor);
 const auditFeeColors = feeColors.map((color) => darken(desaturate(color, 0.3), 0.9));
@@ -44,8 +45,10 @@ export default class TxView implements TransactionStripped {
   initialised: boolean;
   vertexArray: FastVertexArray;
   hover: boolean;
+  highlight: boolean;
   sprite: TxSprite;
   hoverColor: Color | void;
+  highlightColor: Color | void;
 
   screenPosition: Square;
   gridPosition: Square | void;
@@ -150,8 +153,40 @@ export default class TxView implements TransactionStripped {
     } else {
       this.hover = false;
       this.hoverColor = null;
-      if (this.sprite) {
-        this.sprite.resume(hoverTransitionTime);
+      if (this.highlight) {
+        this.setHighlight(true, this.highlightColor);
+      } else {
+        if (this.sprite) {
+          this.sprite.resume(hoverTransitionTime);
+        }
+      }
+    }
+    this.dirty = false;
+    return performance.now() + hoverTransitionTime;
+  }
+
+  // Temporarily override the tx color
+  // returns minimum transition end time
+  setHighlight(highlightOn: boolean, color: Color | void = defaultHighlightColor): number {
+    if (highlightOn) {
+      this.highlight = true;
+      this.highlightColor = color;
+
+      this.sprite.update({
+        ...this.highlightColor,
+        duration: hoverTransitionTime,
+        adjust: false,
+        temp: true
+      });
+    } else {
+      this.highlight = false;
+      this.highlightColor = null;
+      if (this.hover) {
+        this.setHover(true, this.hoverColor);
+      } else {
+        if (this.sprite) {
+          this.sprite.resume(hoverTransitionTime);
+        }
       }
     }
     this.dirty = false;