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;
}