mirrors/mempool
1
0
Fork 0
mirror of https://github.com/mempool/mempool.git synced 2024-11-20 10:21:52 +01:00
Code Issues Projects Releases Wiki Activity

Optimize performance of next/previous block. (#729)

Browse Source
This commit is contained in:
softsimon 2021-08-18 12:49:42 +03:00 committed by GitHub
parent 7c95339324
commit 7fe9993f91
No known key found for this signature in database
GPG Key ID: 4AEE18F83AFDEB23
2 changed files with 23 additions and 25 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

6
frontend/src/app/components/block/block.component.html
View File

@ -4,7 +4,7 @@
<h1>
<ng-template [ngIf]="blockHeight === 0" i18n="block.genesis">Genesis
<div class="next-previous-blocks">
<a *ngIf="showNextBlocklink" [routerLink]="['/block/' | relativeUrl, nextBlockHeight]" i18n-ngbTooltip="Next Block" ngbTooltip="Next Block" placement="bottom">
<a *ngIf="showNextBlocklink" [routerLink]="['/block/' | relativeUrl, nextBlockHeight]" (click)="navigateToNextBlock()" i18n-ngbTooltip="Next Block" ngbTooltip="Next Block" placement="bottom">
<fa-icon [icon]="['fas', 'angle-left']" [fixedWidth]="true" i18n-title="dashboard.collapse" title="Collapse"></fa-icon>
</a>
<a [routerLink]="['/block/' | relativeUrl, blockHash]">{{ blockHeight }}</a>
@ -15,14 +15,14 @@
</ng-template>
<ng-template [ngIf]="blockHeight" i18n="block.block"> Block
<div class="next-previous-blocks">
<a *ngIf="showNextBlocklink" [routerLink]="['/block/' | relativeUrl, nextBlockHeight]" i18n-ngbTooltip="Next Block" ngbTooltip="Next Block" placement="bottom">
<a *ngIf="showNextBlocklink" [routerLink]="['/block/' | relativeUrl, nextBlockHeight]" (click)="navigateToNextBlock()" i18n-ngbTooltip="Next Block" ngbTooltip="Next Block" placement="bottom">
<fa-icon [icon]="['fas', 'angle-left']" [fixedWidth]="true" i18n-title="dashboard.collapse" title="Collapse"></fa-icon>
</a>
<span *ngIf="!showNextBlocklink" placement="bottom" class="disable">
<fa-icon [icon]="['fas', 'angle-left']" [fixedWidth]="true" i18n-title="dashboard.collapse" title="Collapse"></fa-icon>
</span>
<a [routerLink]="['/block/' | relativeUrl, blockHash]">{{ blockHeight }}</a>
<a *ngIf="showPreviousBlocklink" [routerLink]="['/block/' | relativeUrl, previousBlockHeight]" i18n-ngbTooltip="Previous Block" ngbTooltip="Previous Block" placement="bottom">
<a *ngIf="showPreviousBlocklink" [routerLink]="['/block/' | relativeUrl, block?.previousblockhash]" (click)="navigateToPreviousBlock()" i18n-ngbTooltip="Previous Block" ngbTooltip="Previous Block" placement="bottom">
<fa-icon [icon]="['fas', 'angle-right']" [fixedWidth]="true" i18n-title="dashboard.collapse" title="Collapse"></fa-icon>
</a>
<span *ngIf="!showPreviousBlocklink" placement="bottom" class="disable">

42
frontend/src/app/components/block/block.component.ts
View File

@ -18,11 +18,11 @@ export class BlockComponent implements OnInit, OnDestroy {
network = '';
block: Block;
blockHeight: number;
previousBlockHeight: number;
nextBlockHeight: number;
blockHash: string;
isLoadingBlock = true;
latestBlock: Block;
latestBlocks: Block[] = [];
transactions: Transaction[];
isLoadingTransactions = true;
error: any;
@ -73,9 +73,6 @@ export class BlockComponent implements OnInit, OnDestroy {
if (history.state.data && history.state.data.blockHeight) {
this.blockHeight = history.state.data.blockHeight;
this.previousBlockHeight = history.state.data.blockHeight - 1;
this.nextBlockHeight = history.state.data.blockHeight + 1;
this.setNextAndPreviousBlockLink();
}
let isBlockHeight = false;
@ -88,9 +85,6 @@ export class BlockComponent implements OnInit, OnDestroy {
if (history.state.data && history.state.data.block) {
this.blockHeight = history.state.data.block.height;
this.previousBlockHeight = history.state.data.block.height - 1;
this.nextBlockHeight = history.state.data.block.height + 1;
this.setNextAndPreviousBlockLink();
return of(history.state.data.block);
} else {
this.isLoadingBlock = true;
@ -120,7 +114,6 @@ export class BlockComponent implements OnInit, OnDestroy {
tap((block: Block) => {
this.block = block;
this.blockHeight = block.height;
this.previousBlockHeight = block.height - 1;
this.nextBlockHeight = block.height + 1;
this.setNextAndPreviousBlockLink();
@ -164,6 +157,8 @@ export class BlockComponent implements OnInit, OnDestroy {
this.stateService.blocks$
.subscribe(([block]) => {
this.latestBlock = block;
this.latestBlocks.unshift(block);
this.latestBlocks = this.latestBlocks.slice(0, this.stateService.env.KEEP_BLOCKS_AMOUNT);
this.setNextAndPreviousBlockLink();
});
@ -179,19 +174,11 @@ export class BlockComponent implements OnInit, OnDestroy {
});
this.stateService.keyNavigation$.subscribe((event) => {
if (this.showPreviousBlocklink) {
if (event.key === 'ArrowRight') {
if (this.previousBlockHeight >= 0) {
this.router.navigate([(this.network ? '/' + this.network : '') + '/block/', this.previousBlockHeight]);
this.blockHeight = this.previousBlockHeight;
}
}
}
if (this.showNextBlocklink) {
if (event.key === 'ArrowLeft') {
this.router.navigate([(this.network ? '/' + this.network : '') + '/block/', this.nextBlockHeight]);
this.blockHeight = this.nextBlockHeight;
if (this.showPreviousBlocklink && event.key === 'ArrowRight' && this.nextBlockHeight - 2 >= 0) {
this.navigateToPreviousBlock();
}
if (this.showNextBlocklink && event.key === 'ArrowLeft') {
this.navigateToNextBlock();
}
});
}
@ -263,8 +250,19 @@ export class BlockComponent implements OnInit, OnDestroy {
onResize(event: any) {
this.paginationMaxSize = event.target.innerWidth < 670 ? 3 : 5;
}
navigateToPreviousBlock() {
const block = this.latestBlocks.find((b) => b.height === this.nextBlockHeight - 2);
this.router.navigate([(this.network ? '/' + this.network : '') + '/block/', block ? block.id : this.block.previousblockhash], { state: { data: { block, blockHeight: this.nextBlockHeight - 2 } } });
}
navigateToNextBlock() {
const block = this.latestBlocks.find((b) => b.height === this.nextBlockHeight);
this.router.navigate([(this.network ? '/' + this.network : '') + '/block/', block ? block.id : this.nextBlockHeight], { state: { data: { block, blockHeight: this.nextBlockHeight } } });
}
setNextAndPreviousBlockLink(){
if (this.latestBlock && this.blockHeight){
if (this.latestBlock && this.blockHeight) {
if (this.blockHeight === 0){
this.showPreviousBlocklink = false;
} else {
@ -272,7 +270,7 @@ export class BlockComponent implements OnInit, OnDestroy {
}
if (this.latestBlock.height && this.latestBlock.height === this.blockHeight) {
this.showNextBlocklink = false;
}else{
} else {
this.showNextBlocklink = true;
}
}