Merge branch 'master' into fix-block-viz-resize

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

@@ -18,7 +18,9 @@ export class BlockOverviewGraphComponent implements AfterViewInit, OnDestroy, On
   @Input() orientation = 'left';
   @Input() flip = true;
   @Input() disableSpinner = false;
+  @Input() mirrorTxid: string | void;
   @Output() txClickEvent = new EventEmitter<TransactionStripped>();
+  @Output() txHoverEvent = new EventEmitter<string>();
   @Output() readyEvent = new EventEmitter();
 
   @ViewChild('blockCanvas')
@@ -37,6 +39,7 @@ export class BlockOverviewGraphComponent implements AfterViewInit, OnDestroy, On
   scene: BlockScene;
   hoverTx: TxView | void;
   selectedTx: TxView | void;
+  mirrorTx: TxView | void;
   tooltipPosition: Position;
 
   readyNextFrame = false;
@@ -63,6 +66,9 @@ export class BlockOverviewGraphComponent implements AfterViewInit, OnDestroy, On
         this.scene.setOrientation(this.orientation, this.flip);
       }
     }
+    if (changes.mirrorTxid) {
+      this.setMirror(this.mirrorTxid);
+    }
   }
 
   ngOnDestroy(): void {
@@ -76,6 +82,7 @@ export class BlockOverviewGraphComponent implements AfterViewInit, OnDestroy, On
     this.exit(direction);
     this.hoverTx = null;
     this.selectedTx = null;
+    this.onTxHover(null);
     this.start();
   }
 
@@ -301,6 +308,7 @@ export class BlockOverviewGraphComponent implements AfterViewInit, OnDestroy, On
       }
       this.hoverTx = null;
       this.selectedTx = null;
+      this.onTxHover(null);
     }
   }
 
@@ -352,17 +360,20 @@ export class BlockOverviewGraphComponent implements AfterViewInit, OnDestroy, On
             this.selectedTx = selected;
           } else {
             this.hoverTx = selected;
+            this.onTxHover(this.hoverTx ? this.hoverTx.txid : null);
           }
         } else {
           if (clicked) {
             this.selectedTx = null;
           }
           this.hoverTx = null;
+          this.onTxHover(null);
         }
       } else if (clicked) {
         if (selected === this.selectedTx) {
           this.hoverTx = this.selectedTx;
           this.selectedTx = null;
+          this.onTxHover(this.hoverTx ? this.hoverTx.txid : null);
         } else {
           this.selectedTx = selected;
         }
@@ -370,6 +381,18 @@ export class BlockOverviewGraphComponent implements AfterViewInit, OnDestroy, On
     }
   }
 
+  setMirror(txid: string | void) {
+    if (this.mirrorTx) {
+      this.scene.setHover(this.mirrorTx, false);
+      this.start();
+    }
+    if (txid && this.scene.txs[txid]) {
+      this.mirrorTx = this.scene.txs[txid];
+      this.scene.setHover(this.mirrorTx, true);
+      this.start();
+    }
+  }
+
   onTxClick(cssX: number, cssY: number) {
     const x = cssX * window.devicePixelRatio;
     const y = cssY * window.devicePixelRatio;
@@ -378,6 +401,10 @@ export class BlockOverviewGraphComponent implements AfterViewInit, OnDestroy, On
       this.txClickEvent.emit(selected);
     }
   }
+
+  onTxHover(hoverId: string) {
+    this.txHoverEvent.emit(hoverId);
+  }
 }
 
 // WebGL shader attributes

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

@@ -12,8 +12,8 @@ const auditFeeColors = feeColors.map((color) => desaturate(color, 0.3));
 const auditColors = {
   censored: hexToColor('f344df'),
   missing: darken(desaturate(hexToColor('f344df'), 0.3), 0.7),
-  added: hexToColor('03E1E5'),
-  selected: darken(desaturate(hexToColor('039BE5'), 0.3), 0.7),
+  added: hexToColor('0099ff'),
+  selected: darken(desaturate(hexToColor('0099ff'), 0.3), 0.7),
 }
 
 // convert from this class's update format to TxSprite's update format