Adding "mempool block" details. Work in progress!

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

@@ -2,6 +2,7 @@
   <div class="flashing">
     <div *ngFor="let projectedBlock of mempoolBlocks; let i = index; trackBy: trackByFn">
       <div class="bitcoin-block text-center mempool-block" id="mempool-block-{{ i }}" [ngStyle]="getStyleForMempoolBlockAtIndex(i)">
+        <a [routerLink]="['/mempool-block/', i]" class="blockLink">&nbsp;</a>
         <div class="block-body" *ngIf="mempoolBlocks?.length">
           <div class="fees">
             <span class="yellow-color">~{{ projectedBlock.medianFee | ceil }} sats/vB</span>

frontend/src/app/components/mempool-blocks/mempool-blocks.component.scss

@@ -104,3 +104,11 @@
   border-right: 35px solid transparent;
   border-bottom: 35px solid #FFF;
 }
+
+.blockLink {
+  width: 100%;
+  height: 100%;
+  position: absolute;
+  left: 0;
+  z-index: 10;
+}

frontend/src/app/components/mempool-blocks/mempool-blocks.component.ts

@@ -20,6 +20,7 @@ export class MempoolBlocksComponent implements OnInit, OnChanges, OnDestroy {
   rightPosition = 0;
 
   @Input() txFeePerVSize: number;
+  @Input() markIndex: number;
 
   constructor(
     private stateService: StateService,
@@ -42,7 +43,6 @@ export class MempoolBlocksComponent implements OnInit, OnChanges, OnDestroy {
     }
   }
 
-
   ngOnChanges() {
     this.calculateTransactionPosition();
   }
@@ -91,13 +91,18 @@ export class MempoolBlocksComponent implements OnInit, OnChanges, OnDestroy {
   }
 
   calculateTransactionPosition() {
-    if (!this.txFeePerVSize || !this.mempoolBlocks) {
+    if ((!this.txFeePerVSize && this.markIndex === -1) || !this.mempoolBlocks) {
       this.arrowVisible = false;
       return;
     }
 
     this.arrowVisible = true;
 
+    if (this.markIndex > -1) {
+      this.rightPosition = this.markIndex * (this.blockWidth + this.blockPadding) + 0.5 * this.blockWidth;
+      return;
+    }
+
     for (const block of this.mempoolBlocks) {
       for (let i = 0; i < block.feeRange.length - 1; i++) {
         if (this.txFeePerVSize < block.feeRange[i + 1] && this.txFeePerVSize >= block.feeRange[i]) {