machankura/mempool
3
0
Fork 0
Code Issues Pull Requests Actions Packages Projects Releases Wiki Activity

Merge pull request #4146 from mempool/mononaut/fix-mempool-blocks-stacking

Browse Source 
Fix stacked mempool blocks layout & width
This commit is contained in:
softsimon 2023-08-17 19:17:19 +02:00 committed by GitHub
commit 52cc3022c6
No known key found for this signature in database
GPG Key ID: 4AEE18F83AFDEB23
1 changed files with 11 additions and 12 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

23
frontend/src/app/components/mempool-blocks/mempool-blocks.component.ts
View File

@ -31,6 +31,7 @@ export class MempoolBlocksComponent implements OnInit, OnChanges, OnDestroy {
@Input() spotlight: number = 0; @Input() spotlight: number = 0;
@Input() getHref?: (index) => string = (index) => `/mempool-block/${index}`; @Input() getHref?: (index) => string = (index) => `/mempool-block/${index}`;
@Input() allBlocks: boolean = false; @Input() allBlocks: boolean = false;
@Input() forceRtl: boolean = false;
mempoolWidth: number = 0; mempoolWidth: number = 0;
@Output() widthChange: EventEmitter<number> = new EventEmitter(); @Output() widthChange: EventEmitter<number> = new EventEmitter();
@ -102,7 +103,7 @@ export class MempoolBlocksComponent implements OnInit, OnChanges, OnDestroy {
} }
this.timeLtrSubscription = this.stateService.timeLtr.subscribe((ltr) => { this.timeLtrSubscription = this.stateService.timeLtr.subscribe((ltr) => {
this.timeLtr = !!ltr; this.timeLtr = !this.forceRtl && !!ltr;
this.cd.markForCheck(); this.cd.markForCheck();
}); });
@ -114,11 +115,6 @@ export class MempoolBlocksComponent implements OnInit, OnChanges, OnDestroy {
}); });
this.reduceEmptyBlocksToFitScreen(this.mempoolEmptyBlocks); this.reduceEmptyBlocksToFitScreen(this.mempoolEmptyBlocks);
this.mempoolBlocks.map(() => {
this.updateMempoolBlockStyles();
this.calculateTransactionPosition();
});
this.reduceMempoolBlocksToFitScreen(this.mempoolBlocks);
this.isTabHiddenSubscription = this.stateService.isTabHidden$.subscribe((tabHidden) => this.tabHidden = tabHidden); this.isTabHiddenSubscription = this.stateService.isTabHidden$.subscribe((tabHidden) => this.tabHidden = tabHidden);
this.loadingBlocks$ = combineLatest([ this.loadingBlocks$ = combineLatest([
this.stateService.isLoadingWebSocket$, this.stateService.isLoadingWebSocket$,
@ -206,14 +202,17 @@ export class MempoolBlocksComponent implements OnInit, OnChanges, OnDestroy {
if (!block) { if (!block) {
return; return;
} }
const isNewBlock = block.height > this.chainTip;
if (this.chainTip === -1) { if (this.chainTip === -1) {
this.animateEntry = block.height === this.stateService.latestBlockHeight; this.animateEntry = block.height === this.stateService.latestBlockHeight;
} else { } else {
this.animateEntry = block.height > this.chainTip; this.animateEntry = isNewBlock;
} }
this.chainTip = this.stateService.latestBlockHeight; this.chainTip = this.stateService.latestBlockHeight;
if ((block?.extras?.similarity == null || block?.extras?.similarity > 0.5) && !this.tabHidden) { if (isNewBlock && (block?.extras?.similarity == null || block?.extras?.similarity > 0.5) && !this.tabHidden) {
this.blockIndex++; this.blockIndex++;
} }
}); });
@ -283,7 +282,7 @@ export class MempoolBlocksComponent implements OnInit, OnChanges, OnDestroy {
} }
reduceEmptyBlocksToFitScreen(blocks: MempoolBlock[]): MempoolBlock[] { reduceEmptyBlocksToFitScreen(blocks: MempoolBlock[]): MempoolBlock[] {
const innerWidth = this.stateService.env.BASE_MODULE !== 'liquid' && window.innerWidth <= 767.98 ? window.innerWidth : window.innerWidth / 2; const innerWidth = this.containerWidth || (this.stateService.env.BASE_MODULE !== 'liquid' && window.innerWidth <= 767.98 ? window.innerWidth : window.innerWidth / 2);
let blocksAmount = this.stateService.env.MEMPOOL_BLOCKS_AMOUNT; let blocksAmount = this.stateService.env.MEMPOOL_BLOCKS_AMOUNT;
if (!this.allBlocks) { if (!this.allBlocks) {
blocksAmount = Math.min(this.stateService.env.MEMPOOL_BLOCKS_AMOUNT, Math.floor(innerWidth / (this.blockWidth + this.blockPadding))); blocksAmount = Math.min(this.stateService.env.MEMPOOL_BLOCKS_AMOUNT, Math.floor(innerWidth / (this.blockWidth + this.blockPadding)));
@ -306,7 +305,7 @@ export class MempoolBlocksComponent implements OnInit, OnChanges, OnDestroy {
} }
reduceMempoolBlocksToFitScreen(blocks: MempoolBlock[]): MempoolBlock[] { reduceMempoolBlocksToFitScreen(blocks: MempoolBlock[]): MempoolBlock[] {
const innerWidth = this.stateService.env.BASE_MODULE !== 'liquid' && window.innerWidth <= 767.98 ? window.innerWidth : window.innerWidth / 2; const innerWidth = this.containerWidth || (this.stateService.env.BASE_MODULE !== 'liquid' && window.innerWidth <= 767.98 ? window.innerWidth : window.innerWidth / 2);
let blocksAmount = this.stateService.env.MEMPOOL_BLOCKS_AMOUNT; let blocksAmount = this.stateService.env.MEMPOOL_BLOCKS_AMOUNT;
if (this.count) { if (this.count) {
blocksAmount = 8; blocksAmount = 8;
@ -316,7 +315,7 @@ export class MempoolBlocksComponent implements OnInit, OnChanges, OnDestroy {
while (blocks.length > blocksAmount) { while (blocks.length > blocksAmount) {
const block = blocks.pop(); const block = blocks.pop();
if (!this.count) { if (!this.count) {
const lastBlock = blocks[0]; const lastBlock = blocks[blocks.length - 1];
lastBlock.blockSize += block.blockSize; lastBlock.blockSize += block.blockSize;
lastBlock.blockVSize += block.blockVSize; lastBlock.blockVSize += block.blockVSize;
lastBlock.nTx += block.nTx; lastBlock.nTx += block.nTx;
@ -327,7 +326,7 @@ export class MempoolBlocksComponent implements OnInit, OnChanges, OnDestroy {
} }
} }
if (blocks.length) { if (blocks.length) {
blocks[0].isStack = blocks[0].blockVSize > this.stateService.blockVSize; blocks[blocks.length - 1].isStack = blocks[blocks.length - 1].blockVSize > this.stateService.blockVSize;
} }
return blocks; return blocks;
} }