multiblock label overlays

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 blocksPerRow = Math.floor((this.displayWidth + this.padding) / (this.displayBlockWidth + this.padding));
-        const x = (i % blocksPerRow) * (this.blockWidth + 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() });

frontend/src/app/components/eight-blocks/eight-blocks.component.html

@@ -1,25 +1,26 @@
-<!-- <div class="blocks" [class.wrap]="wrapBlocks">
+
+<app-block-overview-multi
+  #blockGraph
+  [isLoading]="false"
+  [numBlocks]="numBlocks"
+  [blockWidth]="blockWidth"
+  [resolution]="resolution"
+  [blockLimit]="stateService.blockVSize"
+  [orientation]="'top'"
+  [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">
     <div class="block-wrapper" [style]="wrapperStyle">
-      <div class="block-container" [style]="containerStyle"> -->
+      <div class="block-container" [style]="containerStyle">
-        <app-block-overview-multi
+        <div *ngIf="showInfo && blockInfo[i]" class="info" @infoChange>
-          #blockGraph
-          [isLoading]="false"
-          [numBlocks]="numBlocks"
-          [blockWidth]="blockWidth"
-          [resolution]="resolution"
-          [blockLimit]="stateService.blockVSize"
-          [orientation]="'top'"
-          [flip]="false"
-          [animationDuration]="animationDuration"
-          [animationOffset]="animationOffset"
-          [disableSpinner]="true"
-        ></app-block-overview-multi>
-        <!-- <div *ngIf="showInfo && blockInfo[i]" class="info" @infoChange>
           <h1 class="height">{{ blockInfo[i].height }}</h1>
           <h2 class="mined-by">by {{ blockInfo[i].extras.pool.name || 'Unknown' }}</h2>
         </div>
       </div>
     </div>
   </ng-container>
-</div> -->
+</div>

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;

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

frontend/src/app/components/eight-mempool/eight-mempool.component.html

@@ -1,26 +1,25 @@
-<!-- <div class="blocks" [class.wrap]="wrapBlocks">
+<app-block-overview-multi
+  #blockGraph
+  [isLoading]="false"
+  [numBlocks]="numBlocks"
+  [padding]="padding"
+  [blockWidth]="blockWidth"
+  [resolution]="resolution"
+  [blockLimit]="stateService.blockVSize"
+  [orientation]="'left'"
+  [flip]="true"
+  [animationDuration]="animationDuration"
+  [animationOffset]="animationOffset"
+  [disableSpinner]="true"
+></app-block-overview-multi>
+<div class="blocks" [class.wrap]="wrapBlocks">
   <ng-container *ngFor="let i of blockIndices">
     <div class="block-wrapper" [style]="wrapperStyle">
-      <div class="block-container" [style]="containerStyle"> -->
+      <div class="block-container" [style]="containerStyle">
-        <app-block-overview-multi
+        <div *ngIf="showInfo && blockInfo[i]" class="info" @infoChange>
-          #blockGraph
+          <h1 class="height">{{ blockInfo[i].label }}</h1>
-          [isLoading]="false"
-          [numBlocks]="numBlocks"
-          [padding]="padding"
-          [blockWidth]="blockWidth"
-          [resolution]="resolution"
-          [blockLimit]="stateService.blockVSize"
-          [orientation]="'left'"
-          [flip]="true"
-          [animationDuration]="animationDuration"
-          [animationOffset]="animationOffset"
-          [disableSpinner]="true"
-        ></app-block-overview-multi>
-        <!-- <div *ngIf="showInfo && blockInfo[i]" class="info" @infoChange>
-          <h1 class="height">{{ blockInfo[i].height }}</h1>
-          <h2 class="mined-by">by {{ blockInfo[i].extras.pool.name || 'Unknown' }}</h2>
         </div>
       </div>
     </div>
   </ng-container>
-</div> -->
+</div>

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;

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