Merge pull request #2978 from mempool/mononaut/audit-highlighting

Only show block audit highlighting when audit is enabled

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

@@ -9,5 +9,6 @@
     [tx]="selectedTx || hoverTx"
     [cursorPosition]="tooltipPosition"
     [clickable]="!!selectedTx"
+    [auditEnabled]="auditHighlighting"
   ></app-block-overview-tooltip>
 </div>

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

@@ -20,6 +20,7 @@ export class BlockOverviewGraphComponent implements AfterViewInit, OnDestroy, On
   @Input() disableSpinner = false;
   @Input() mirrorTxid: string | void;
   @Input() unavailable: boolean = false;
+  @Input() auditHighlighting: boolean = false;
   @Output() txClickEvent = new EventEmitter<TransactionStripped>();
   @Output() txHoverEvent = new EventEmitter<string>();
   @Output() readyEvent = new EventEmitter();
@@ -70,6 +71,9 @@ export class BlockOverviewGraphComponent implements AfterViewInit, OnDestroy, On
     if (changes.mirrorTxid) {
       this.setMirror(this.mirrorTxid);
     }
+    if (changes.auditHighlighting) {
+      this.setHighlightingEnabled(this.auditHighlighting);
+    }
   }
 
   ngOnDestroy(): void {
@@ -195,7 +199,7 @@ export class BlockOverviewGraphComponent implements AfterViewInit, OnDestroy, On
       this.start();
     } else {
       this.scene = new BlockScene({ width: this.displayWidth, height: this.displayHeight, resolution: this.resolution,
-        blockLimit: this.blockLimit, orientation: this.orientation, flip: this.flip, vertexArray: this.vertexArray });
+        blockLimit: this.blockLimit, orientation: this.orientation, flip: this.flip, vertexArray: this.vertexArray, highlighting: this.auditHighlighting });
       this.start();
     }
   }
@@ -396,6 +400,13 @@ export class BlockOverviewGraphComponent implements AfterViewInit, OnDestroy, On
     }
   }
 
+  setHighlightingEnabled(enabled: boolean): void {
+    if (this.scene) {
+      this.scene.setHighlighting(enabled);
+      this.start();
+    }
+  }
+
   onTxClick(cssX: number, cssY: number) {
     const x = cssX * window.devicePixelRatio;
     const y = cssY * window.devicePixelRatio;

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

@@ -9,6 +9,7 @@ export default class BlockScene {
   txs: { [key: string]: TxView };
   orientation: string;
   flip: boolean;
+  highlightingEnabled: boolean;
   width: number;
   height: number;
   gridWidth: number;
@@ -22,11 +23,11 @@ export default class BlockScene {
   animateUntil = 0;
   dirty: boolean;
 
-  constructor({ width, height, resolution, blockLimit, orientation, flip, vertexArray }:
+  constructor({ width, height, resolution, blockLimit, orientation, flip, vertexArray, highlighting }:
       { width: number, height: number, resolution: number, blockLimit: number,
-        orientation: string, flip: boolean, vertexArray: FastVertexArray }
+        orientation: string, flip: boolean, vertexArray: FastVertexArray, highlighting: boolean }
   ) {
-    this.init({ width, height, resolution, blockLimit, orientation, flip, vertexArray });
+    this.init({ width, height, resolution, blockLimit, orientation, flip, vertexArray, highlighting });
   }
 
   resize({ width = this.width, height = this.height, animate = true }: { width?: number, height?: number, animate: boolean }): void {
@@ -51,6 +52,13 @@ export default class BlockScene {
     }
   }
 
+  setHighlighting(enabled: boolean): void {
+    this.highlightingEnabled = enabled;
+    if (this.initialised && this.scene) {
+      this.updateAll(performance.now(), 50);
+    }
+  }
+
   // Destroy the current layout and clean up graphics sprites without any exit animation
   destroy(): void {
     Object.values(this.txs).forEach(tx => tx.destroy());
@@ -67,7 +75,7 @@ export default class BlockScene {
     });
     this.layout = new BlockLayout({ width: this.gridWidth, height: this.gridHeight });
     txs.forEach(tx => {
-      const txView = new TxView(tx, this.vertexArray);
+      const txView = new TxView(tx, this);
       this.txs[tx.txid] = txView;
       this.place(txView);
       this.saveGridToScreenPosition(txView);
@@ -114,7 +122,7 @@ export default class BlockScene {
     });
     txs.forEach(tx => {
       if (!this.txs[tx.txid]) {
-        this.txs[tx.txid] = new TxView(tx, this.vertexArray);
+        this.txs[tx.txid] = new TxView(tx, this);
       }
     });
 
@@ -156,7 +164,7 @@ export default class BlockScene {
     if (resetLayout) {
       add.forEach(tx => {
         if (!this.txs[tx.txid]) {
-          this.txs[tx.txid] = new TxView(tx, this.vertexArray);
+          this.txs[tx.txid] = new TxView(tx, this);
         }
       });
       this.layout = new BlockLayout({ width: this.gridWidth, height: this.gridHeight });
@@ -166,7 +174,7 @@ export default class BlockScene {
     } else {
       // try to insert new txs directly
       const remaining = [];
-      add.map(tx => new TxView(tx, this.vertexArray)).sort(feeRateDescending).forEach(tx => {
+      add.map(tx => new TxView(tx, this)).sort(feeRateDescending).forEach(tx => {
         if (!this.tryInsertByFee(tx)) {
           remaining.push(tx);
         }
@@ -192,13 +200,14 @@ export default class BlockScene {
     this.animateUntil = Math.max(this.animateUntil, tx.setHover(value));
   }
 
-  private init({ width, height, resolution, blockLimit, orientation, flip, vertexArray }:
+  private init({ width, height, resolution, blockLimit, orientation, flip, vertexArray, highlighting }:
       { width: number, height: number, resolution: number, blockLimit: number,
-        orientation: string, flip: boolean, vertexArray: FastVertexArray }
+        orientation: string, flip: boolean, vertexArray: FastVertexArray, highlighting: boolean }
   ): void {
     this.orientation = orientation;
     this.flip = flip;
     this.vertexArray = vertexArray;
+    this.highlightingEnabled = highlighting;
 
     this.scene = {
       count: 0,

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

@@ -38,6 +38,7 @@ export default class TxView implements TransactionStripped {
   feerate: number;
   status?: 'found' | 'missing' | 'fresh' | 'added' | 'censored' | 'selected';
   context?: 'projected' | 'actual';
+  scene?: BlockScene;
 
   initialised: boolean;
   vertexArray: FastVertexArray;
@@ -50,7 +51,8 @@ export default class TxView implements TransactionStripped {
 
   dirty: boolean;
 
-  constructor(tx: TransactionStripped, vertexArray: FastVertexArray) {
+  constructor(tx: TransactionStripped, scene: BlockScene) {
+    this.scene = scene;
     this.context = tx.context;
     this.txid = tx.txid;
     this.fee = tx.fee;
@@ -59,7 +61,7 @@ export default class TxView implements TransactionStripped {
     this.feerate = tx.fee / tx.vsize;
     this.status = tx.status;
     this.initialised = false;
-    this.vertexArray = vertexArray;
+    this.vertexArray = scene.vertexArray;
 
     this.hover = false;
 
@@ -157,6 +159,10 @@ export default class TxView implements TransactionStripped {
   getColor(): Color {
     const feeLevelIndex = feeLevels.findIndex((feeLvl) => Math.max(1, this.feerate) < feeLvl) - 1;
     const feeLevelColor = feeColors[feeLevelIndex] || feeColors[mempoolFeeColors.length - 1];
+    // Normal mode
+    if (!this.scene?.highlightingEnabled) {
+      return feeLevelColor;
+    }
     // Block audit
     switch(this.status) {
       case 'censored':

frontend/src/app/components/block-overview-tooltip/block-overview-tooltip.component.html

@@ -32,7 +32,7 @@
         <td class="td-width" i18n="transaction.vsize|Transaction Virtual Size">Virtual size</td>
         <td [innerHTML]="'&lrm;' + (vsize | vbytes: 2)"></td>
       </tr>
-      <tr *ngIf="tx && tx.status && tx.status.length">
+      <tr *ngIf="auditEnabled && tx && tx.status && tx.status.length">
         <td class="td-width" i18n="transaction.audit-status">Audit status</td>
         <ng-container [ngSwitch]="tx?.status">
           <td *ngSwitchCase="'found'" i18n="transaction.audit.match">Match</td>

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

@@ -11,6 +11,7 @@ export class BlockOverviewTooltipComponent implements OnChanges {
   @Input() tx: TransactionStripped | void;
   @Input() cursorPosition: Position;
   @Input() clickable: boolean;
+  @Input() auditEnabled: boolean = false;
 
   txid = '';
   fee = 0;

frontend/src/app/components/block/block.component.html

@@ -215,7 +215,7 @@
         <h3 class="block-subtitle" *ngIf="!isMobile" i18n="block.projected-block">Projected Block</h3>
         <div class="block-graph-wrapper">
           <app-block-overview-graph #blockGraphProjected [isLoading]="isLoadingOverview" [resolution]="75"
-            [blockLimit]="stateService.blockVSize" [orientation]="'top'" [flip]="false" [mirrorTxid]="hoverTx"
+            [blockLimit]="stateService.blockVSize" [orientation]="'top'" [flip]="false" [mirrorTxid]="hoverTx" [auditHighlighting]="showAudit"
             (txClickEvent)="onTxClick($event)" (txHoverEvent)="onTxHover($event)" [unavailable]="!isMobile && !showAudit"></app-block-overview-graph>
           <ng-container *ngIf="!isMobile || mode !== 'actual'; else emptyBlockInfo"></ng-container>
         </div>
@@ -224,7 +224,7 @@
         <h3 class="block-subtitle" *ngIf="!isMobile" i18n="block.actual-block">Actual Block</h3>
         <div class="block-graph-wrapper">
           <app-block-overview-graph #blockGraphActual [isLoading]="isLoadingOverview" [resolution]="75"
-            [blockLimit]="stateService.blockVSize" [orientation]="'top'" [flip]="false" [mirrorTxid]="hoverTx" mode="mined"
+            [blockLimit]="stateService.blockVSize" [orientation]="'top'" [flip]="false" [mirrorTxid]="hoverTx" mode="mined"  [auditHighlighting]="showAudit"
             (txClickEvent)="onTxClick($event)" (txHoverEvent)="onTxHover($event)" [unavailable]="isMobile && !showAudit"></app-block-overview-graph>
           <ng-container *ngTemplateOutlet="emptyBlockInfo"></ng-container>
         </div>