highperfocused/mempool
1
0
Fork 0
mirror of https://github.com/mempool/mempool.git synced 2025-03-17 21:32:02 +01:00
Code Issues Packages Projects Releases Wiki Activity

multiblock fix padding, add loading spinner

Browse Source
This commit is contained in:
Mononaut 2024-10-18 02:33:03 +00:00
parent a48b631012
commit 81ab575bce
No known key found for this signature in database
GPG Key ID: A3F058E41374C04E
4 changed files with 26 additions and 10 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

3
frontend/src/app/components/eight-blocks/eight-blocks.component.html
View File

@ -1,7 +1,7 @@
<app-block-overview-multi
#blockGraph
[isLoading]="false"
[isLoading]="isLoadingTransactions"
[numBlocks]="numBlocks"
[padding]="padding"
[blockWidth]="blockWidth"
@ -11,7 +11,6 @@
[flip]="false"
[animationDuration]="animationDuration"
[animationOffset]="animationOffset"
[disableSpinner]="true"
></app-block-overview-multi>
<div class="blocks" [class.wrap]="wrapBlocks">
<ng-container *ngFor="let i of blockIndices">

22
frontend/src/app/components/eight-blocks/eight-blocks.component.ts
View File

@ -121,7 +121,8 @@ export class EightBlocksComponent implements OnInit, OnDestroy {
this.autoNumBlocks = true;
const width = window.innerWidth;
const height = window.innerHeight;
this.numBlocks = Math.floor(width / this.blockWidth) * Math.floor(height / this.blockWidth);
const paddedWidth = this.blockWidth + (this.padding * 2);
this.numBlocks = Math.floor(width / paddedWidth) * Math.floor(height / paddedWidth);
}
this.blockIndices = [...Array(this.numBlocks).keys()];
@ -171,7 +172,8 @@ export class EightBlocksComponent implements OnInit, OnDestroy {
this.autoNumBlocks = true;
const width = window.innerWidth;
const height = window.innerHeight;
this.numBlocks = Math.floor(width / this.blockWidth) * Math.floor(height / this.blockWidth);
const paddedWidth = this.blockWidth + (this.padding * 2);
this.numBlocks = Math.floor(width / paddedWidth) * Math.floor(height / paddedWidth);
this.blockIndices = [...Array(this.numBlocks).keys()];
if (this.autofit) {
@ -234,6 +236,7 @@ export class EightBlocksComponent implements OnInit, OnDestroy {
}
}
await Promise.allSettled(readyPromises);
this.isLoadingTransactions = false;
this.updateBlockGraphs(blocks);
// free up old transactions
@ -280,7 +283,7 @@ export class EightBlocksComponent implements OnInit, OnDestroy {
const startTime = performance.now() + 1000 - (this.stagger < 0 ? this.stagger * 8 : 0);
if (this.blockGraph) {
for (let i = 0; i < this.numBlocks; i++) {
this.blockGraph.replace(i, this.strippedTransactions[blocks?.[i]?.height] || [], 'right', false, startTime + (this.stagger * i));
this.blockGraph.replace(i, this.strippedTransactions[blocks?.[this.getBlockIndex(i)]?.height] || [], 'right', false, startTime + (this.stagger * i));
}
}
this.showInfo = false;
@ -299,8 +302,19 @@ export class EightBlocksComponent implements OnInit, OnDestroy {
if (this.blockGraph) {
for (let i = 0; i < this.numBlocks; i++) {
this.blockGraph.destroy(i);
this.blockGraph.setup(i, this.strippedTransactions[this.latestBlocks?.[i]?.height] || []);
this.blockGraph.setup(i, this.strippedTransactions[this.latestBlocks?.[this.getBlockIndex(i)]?.height] || []);
}
}
}
getBlockIndex(slotIndex: number): number {
const width = window.innerWidth;
const height = window.innerHeight;
const paddedWidth = this.blockWidth + (this.padding * 2);
const blocksPerRow = Math.floor(width / paddedWidth);
const blocksPerColumn = Math.floor(height / paddedWidth);
const row = Math.floor(slotIndex / blocksPerRow);
const column = slotIndex % blocksPerRow;
return (blocksPerColumn - 1 - row) * blocksPerRow + column;
}
}

3
frontend/src/app/components/eight-mempool/eight-mempool.component.html
View File

@ -1,6 +1,6 @@
<app-block-overview-multi
#blockGraph
[isLoading]="false"
[isLoading]="isLoading"
[numBlocks]="numBlocks"
[padding]="padding"
[blockWidth]="blockWidth"
@ -11,6 +11,5 @@
[showFilters]="true"
[animationDuration]="animationDuration"
[animationOffset]="animationOffset"
[disableSpinner]="true"
(txClickEvent)="onTxClick($event)"
></app-block-overview-multi>

8
frontend/src/app/components/eight-mempool/eight-mempool.component.ts
View File

@ -46,6 +46,7 @@ function bestFitResolution(min, max, n): number {
export class EightMempoolComponent implements OnInit, OnDestroy {
network = '';
strippedTransactions: { [height: number]: TransactionStripped[] } = {};
isLoading = true;
webGlEnabled = true;
hoverTx: string | null = null;
@ -161,7 +162,8 @@ export class EightMempoolComponent implements OnInit, OnDestroy {
this.autoNumBlocks = true;
const width = window.innerWidth;
const height = window.innerHeight;
this.numBlocks = Math.floor(width / this.blockWidth) * Math.floor(height / this.blockWidth);
const paddedWidth = this.blockWidth + (this.padding * 2);
this.numBlocks = Math.floor(width / paddedWidth) * Math.floor(height / paddedWidth);
}
this.blockIndices = [...Array(this.numBlocks).keys()];
@ -203,7 +205,8 @@ export class EightMempoolComponent implements OnInit, OnDestroy {
this.autoNumBlocks = true;
const width = window.innerWidth;
const height = window.innerHeight;
this.numBlocks = Math.floor(width / this.blockWidth) * Math.floor(height / this.blockWidth);
const paddedWidth = this.blockWidth + (this.padding * 2);
this.numBlocks = Math.floor(width / paddedWidth) * Math.floor(height / paddedWidth);
this.blockIndices = [...Array(this.numBlocks).keys()];
this.lastBlockHeightUpdate = this.blockIndices.map(() => 0);
@ -239,6 +242,7 @@ export class EightMempoolComponent implements OnInit, OnDestroy {
} else {
this.blockGraph.update(this.numBlocks - delta.block - 1, delta.added, delta.removed, delta.changed || [], this.poolDirection);
}
this.isLoading = false;
this.lastBlockHeightUpdate[delta.block] = this.stateService.latestBlockHeight;
}