diff --git a/frontend/src/app/components/block-overview-multi/block-overview-multi.component.ts b/frontend/src/app/components/block-overview-multi/block-overview-multi.component.ts index 6c6c3eee4..32e6ffea3 100644 --- a/frontend/src/app/components/block-overview-multi/block-overview-multi.component.ts +++ b/frontend/src/app/components/block-overview-multi/block-overview-multi.component.ts @@ -73,6 +73,7 @@ export class BlockOverviewMultiComponent implements AfterViewInit, OnDestroy, On animationHeartBeat: number; displayWidth: number; displayHeight: number; + displayBlockWidth: number; cssWidth: number; cssHeight: number; shaderProgram: WebGLProgram; @@ -386,21 +387,22 @@ export class BlockOverviewMultiComponent implements AfterViewInit, OnDestroy, On this.cssHeight = this.canvas.nativeElement.offsetParent.clientHeight; this.displayWidth = window.devicePixelRatio * this.cssWidth; this.displayHeight = window.devicePixelRatio * this.cssHeight; + this.displayBlockWidth = window.devicePixelRatio * this.blockWidth; this.canvas.nativeElement.width = this.displayWidth; this.canvas.nativeElement.height = this.displayHeight; if (this.gl) { this.gl.viewport(0, 0, this.displayWidth, this.displayHeight); } for (let i = 0; i < this.scenes.length; i++) { - const blocksPerRow = Math.floor((this.displayWidth + this.padding) / (this.blockWidth + this.padding)); - const x = (i % blocksPerRow) * (this.blockWidth + this.padding); + const blocksPerRow = Math.floor((this.displayWidth + this.padding) / (this.displayBlockWidth + this.padding)); + const x = (i % blocksPerRow) * (this.displayBlockWidth + this.padding); const row = Math.floor(i / blocksPerRow); - const y = this.displayHeight - ((row + 1) * this.blockWidth); + const y = this.displayHeight - ((row + 1) * this.displayBlockWidth); if (this.scenes[i]) { - this.scenes[i].resize({ x, y, width: this.blockWidth, height: this.blockWidth, animate: false }); + this.scenes[i].resize({ x, y, width: this.displayBlockWidth, height: this.displayBlockWidth, animate: false }); this.start(); } else { - this.scenes[i] = new BlockScene({ x, y, width: this.blockWidth, height: this.blockWidth, resolution: this.resolution, + this.scenes[i] = new BlockScene({ x, y, width: this.displayBlockWidth, height: this.displayBlockWidth, resolution: this.resolution, blockLimit: this.blockLimit, orientation: this.orientation, flip: this.flip, vertexArray: this.vertexArray, theme: this.themeService, highlighting: this.auditHighlighting, animationDuration: this.animationDuration, animationOffset: this.animationOffset, colorFunction: this.getColorFunction() }); 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 b18c4b8d1..6678cb892 100644 --- a/frontend/src/app/components/eight-blocks/eight-blocks.component.html +++ b/frontend/src/app/components/eight-blocks/eight-blocks.component.html @@ -1,25 +1,26 @@ - - - \ No newline at end of file + \ No newline at end of file diff --git a/frontend/src/app/components/eight-blocks/eight-blocks.component.scss b/frontend/src/app/components/eight-blocks/eight-blocks.component.scss index 6d2c9931c..af75a689e 100644 --- a/frontend/src/app/components/eight-blocks/eight-blocks.component.scss +++ b/frontend/src/app/components/eight-blocks/eight-blocks.component.scss @@ -1,4 +1,7 @@ .blocks { + position: absolute; + left: 0; + top: 0; width: 100%; height: 100%; min-width: 100vw; 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 df96ea315..7d19ccd0c 100644 --- a/frontend/src/app/components/eight-blocks/eight-blocks.component.ts +++ b/frontend/src/app/components/eight-blocks/eight-blocks.component.ts @@ -81,6 +81,7 @@ export class EightBlocksComponent implements OnInit, OnDestroy { wrapperStyle = { '--block-width': '1080px', width: '1080px', + height: '1080px', maxWidth: '1080px', padding: '', }; @@ -125,6 +126,7 @@ export class EightBlocksComponent implements OnInit, OnDestroy { this.wrapperStyle = { '--block-width': this.blockWidth + 'px', width: this.blockWidth + 'px', + height: this.blockWidth + 'px', maxWidth: this.blockWidth + 'px', padding: (this.padding || 0) +'px 0px', }; 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 982fad08c..4c4fc452b 100644 --- a/frontend/src/app/components/eight-mempool/eight-mempool.component.html +++ b/frontend/src/app/components/eight-mempool/eight-mempool.component.html @@ -1,26 +1,25 @@ - - - \ No newline at end of file + \ No newline at end of file diff --git a/frontend/src/app/components/eight-mempool/eight-mempool.component.scss b/frontend/src/app/components/eight-mempool/eight-mempool.component.scss index 6d2c9931c..af75a689e 100644 --- a/frontend/src/app/components/eight-mempool/eight-mempool.component.scss +++ b/frontend/src/app/components/eight-mempool/eight-mempool.component.scss @@ -1,4 +1,7 @@ .blocks { + position: absolute; + left: 0; + top: 0; width: 100%; height: 100%; min-width: 100vw; 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 8cc7d02cb..6d263f9b7 100644 --- a/frontend/src/app/components/eight-mempool/eight-mempool.component.ts +++ b/frontend/src/app/components/eight-mempool/eight-mempool.component.ts @@ -27,10 +27,6 @@ function bestFitResolution(min, max, n): number { return best; } -interface BlockInfo extends BlockExtended { - timeString: string; -} - @Component({ selector: 'app-eight-mempool', templateUrl: './eight-mempool.component.html', @@ -53,11 +49,11 @@ export class EightMempoolComponent implements OnInit, OnDestroy { webGlEnabled = true; hoverTx: string | null = null; - tipSubscription: Subscription; networkChangedSubscription: Subscription; queryParamsSubscription: Subscription; graphChangeSubscription: Subscription; blockSub: Subscription; + mempoolBlockSub: Subscription; chainDirection: string = 'right'; poolDirection: string = 'left'; @@ -78,11 +74,16 @@ export class EightMempoolComponent implements OnInit, OnDestroy { testShiftTimeout: number; showInfo: boolean = true; - blockInfo: BlockInfo[] = []; + blockInfo: { label: string}[] = [ + { label: '' }, + { label: 'mempool' }, + { label: 'blocks' }, + ]; wrapperStyle = { '--block-width': '1080px', width: '1080px', + height: '1080px', maxWidth: '1080px', padding: '', }; @@ -104,7 +105,7 @@ export class EightMempoolComponent implements OnInit, OnDestroy { } ngOnInit(): void { - this.websocketService.want(['blocks']); + this.websocketService.want(['blocks', 'mempool-blocks']); this.network = this.stateService.network; this.blockSub = this.stateService.mempoolBlockUpdate$.subscribe((update) => { @@ -149,6 +150,10 @@ export class EightMempoolComponent implements OnInit, OnDestroy { } }); + this.mempoolBlockSub = this.stateService.mempoolBlocks$.subscribe((blocks) => { + this.blockInfo[0].label = `+${blocks.length - this.numBlocks}`; + }); + this.queryParamsSubscription = this.route.queryParams.subscribe((params) => { this.numBlocks = Number.isInteger(Number(params.numBlocks)) ? Number(params.numBlocks) : 8; this.blockIndices = [...Array(this.numBlocks).keys()]; @@ -170,6 +175,7 @@ export class EightMempoolComponent implements OnInit, OnDestroy { this.wrapperStyle = { '--block-width': this.blockWidth + 'px', width: this.blockWidth + 'px', + height: this.blockWidth + 'px', maxWidth: this.blockWidth + 'px', padding: (this.padding || 0) +'px 0px', }; @@ -183,7 +189,8 @@ export class EightMempoolComponent implements OnInit, OnDestroy { ngOnDestroy(): void { this.stateService.markBlock$.next({}); - this.tipSubscription.unsubscribe(); + this.blockSub.unsubscribe(); + this.mempoolBlockSub.unsubscribe(); this.networkChangedSubscription?.unsubscribe(); this.queryParamsSubscription?.unsubscribe(); }