diff --git a/frontend/src/app/components/eight-blocks/eight-blocks.component.html b/frontend/src/app/components/eight-blocks/eight-blocks.component.html index 65b245cc1..961dce326 100644 --- a/frontend/src/app/components/eight-blocks/eight-blocks.component.html +++ b/frontend/src/app/components/eight-blocks/eight-blocks.component.html @@ -1,7 +1,7 @@
diff --git a/frontend/src/app/components/eight-blocks/eight-blocks.component.ts b/frontend/src/app/components/eight-blocks/eight-blocks.component.ts index 2fcea1ea8..f617aef43 100644 --- a/frontend/src/app/components/eight-blocks/eight-blocks.component.ts +++ b/frontend/src/app/components/eight-blocks/eight-blocks.component.ts @@ -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; + } } diff --git a/frontend/src/app/components/eight-mempool/eight-mempool.component.html b/frontend/src/app/components/eight-mempool/eight-mempool.component.html index 682810b5a..d0daa86c3 100644 --- a/frontend/src/app/components/eight-mempool/eight-mempool.component.html +++ b/frontend/src/app/components/eight-mempool/eight-mempool.component.html @@ -1,6 +1,6 @@ \ No newline at end of file diff --git a/frontend/src/app/components/eight-mempool/eight-mempool.component.ts b/frontend/src/app/components/eight-mempool/eight-mempool.component.ts index be727e8a3..217b3cbe7 100644 --- a/frontend/src/app/components/eight-mempool/eight-mempool.component.ts +++ b/frontend/src/app/components/eight-mempool/eight-mempool.component.ts @@ -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; }