diff --git a/frontend/src/app/components/block-overview-graph/block-overview-graph.component.html b/frontend/src/app/components/block-overview-graph/block-overview-graph.component.html index 77ee62cae..54cd995aa 100644 --- a/frontend/src/app/components/block-overview-graph/block-overview-graph.component.html +++ b/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" > diff --git a/frontend/src/app/components/block-overview-graph/block-overview-graph.component.ts b/frontend/src/app/components/block-overview-graph/block-overview-graph.component.ts index 37225ea1d..7c71d36fe 100644 --- a/frontend/src/app/components/block-overview-graph/block-overview-graph.component.ts +++ b/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(); @Output() txHoverEvent = new EventEmitter(); @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; diff --git a/frontend/src/app/components/block-overview-graph/block-scene.ts b/frontend/src/app/components/block-overview-graph/block-scene.ts index 8d3c46af4..e7853d5a1 100644 --- a/frontend/src/app/components/block-overview-graph/block-scene.ts +++ b/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, diff --git a/frontend/src/app/components/block-overview-graph/tx-view.ts b/frontend/src/app/components/block-overview-graph/tx-view.ts index a4355870e..fe224ebac 100644 --- a/frontend/src/app/components/block-overview-graph/tx-view.ts +++ b/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': diff --git a/frontend/src/app/components/block-overview-tooltip/block-overview-tooltip.component.html b/frontend/src/app/components/block-overview-tooltip/block-overview-tooltip.component.html index 1a58bfbd9..7a1145a0e 100644 --- a/frontend/src/app/components/block-overview-tooltip/block-overview-tooltip.component.html +++ b/frontend/src/app/components/block-overview-tooltip/block-overview-tooltip.component.html @@ -32,7 +32,7 @@ Virtual size - + Audit status Match diff --git a/frontend/src/app/components/block-overview-tooltip/block-overview-tooltip.component.ts b/frontend/src/app/components/block-overview-tooltip/block-overview-tooltip.component.ts index e30f40b9a..6702c4d62 100644 --- a/frontend/src/app/components/block-overview-tooltip/block-overview-tooltip.component.ts +++ b/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; diff --git a/frontend/src/app/components/block/block.component.html b/frontend/src/app/components/block/block.component.html index 78b48ab4b..9e204b8e6 100644 --- a/frontend/src/app/components/block/block.component.html +++ b/frontend/src/app/components/block/block.component.html @@ -215,7 +215,7 @@

Projected Block

@@ -224,7 +224,7 @@

Actual Block