don't reset blockchain position on every mempool update

frontend/src/app/components/start/start.component.ts

@@ -1,6 +1,6 @@
 import { Component, ElementRef, HostListener, OnInit, OnDestroy, ViewChild, Input } from '@angular/core';
 import { Subscription } from 'rxjs';
-import { StateService } from '../../services/state.service';
+import { MarkBlockState, StateService } from '../../services/state.service';
 import { specialBlocks } from '../../app.constants';
 
 @Component({
@@ -24,6 +24,7 @@ export class StartComponent implements OnInit, OnDestroy {
   chainTipSubscription: Subscription;
   chainTip: number = -1;
   tipIsSet: boolean = false;
+  lastMark: MarkBlockState;
   markBlockSubscription: Subscription;
   blockCounterSubscription: Subscription;
   @ViewChild('blockchainContainer') blockchainContainer: ElementRef;
@@ -75,20 +76,31 @@ export class StartComponent implements OnInit, OnDestroy {
     });
     this.markBlockSubscription = this.stateService.markBlock$.subscribe((mark) => {
       let blockHeight;
+      let newMark = true;
       if (mark?.blockHeight != null) {
+        if (this.lastMark?.blockHeight === mark.blockHeight) {
+          newMark = false;
+        }
         blockHeight = mark.blockHeight;
       } else if (mark?.mempoolBlockIndex != null) {
+        if (this.lastMark?.mempoolBlockIndex === mark.mempoolBlockIndex || (mark.txid && this.lastMark?.txid === mark.txid)) {
+          newMark = false;
+        }
         blockHeight = -1 - mark.mempoolBlockIndex;
       } else if (mark?.mempoolPosition?.block != null) {
+        if (this.lastMark?.txid === mark.txid) {
+          newMark = false;
+        }
         blockHeight = -1 - mark.mempoolPosition.block;
       }
+      this.lastMark = mark;
       if (blockHeight != null) {
         if (this.tipIsSet) {
           let scrollToHeight = blockHeight;
           if (blockHeight < 0) {
             scrollToHeight = this.chainTip - blockHeight;
           }
-          if (!this.blockInViewport(scrollToHeight)) {
+          if (newMark && !this.blockInViewport(scrollToHeight)) {
             this.scrollToBlock(scrollToHeight);
           }
         }

frontend/src/app/components/transaction/transaction.component.ts

@@ -240,6 +240,7 @@ export class TransactionComponent implements OnInit, AfterViewInit, OnDestroy {
         this.mempoolPosition = txPosition.position;
         if (this.tx && !this.tx.status.confirmed) {
           this.stateService.markBlock$.next({
+            txid: txPosition.txid,
             mempoolPosition: this.mempoolPosition
           });
           this.txInBlockIndex = this.mempoolPosition.block;
@@ -359,6 +360,7 @@ export class TransactionComponent implements OnInit, AfterViewInit, OnDestroy {
           } else {
             if (tx.cpfpChecked) {
               this.stateService.markBlock$.next({
+                txid: tx.txid,
                 txFeePerVSize: tx.effectiveFeePerVsize,
                 mempoolPosition: this.mempoolPosition,
               });

frontend/src/app/services/state.service.ts

@@ -8,8 +8,9 @@ import { isPlatformBrowser } from '@angular/common';
 import { map, shareReplay } from 'rxjs/operators';
 import { StorageService } from './storage.service';
 
-interface MarkBlockState {
+export interface MarkBlockState {
   blockHeight?: number;
+  txid?: string;
   mempoolBlockIndex?: number;
   txFeePerVSize?: number;
   mempoolPosition?: MempoolPosition;