Merge pull request #4269 from mempool/mononaut/reduce-blockchain-jumping

Reduce blockchain jumping

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

@@ -166,7 +166,6 @@ export class BlockComponent implements OnInit, OnDestroy {
         this.page = 1;
         this.error = undefined;
         this.fees = undefined;
-        this.stateService.markBlock$.next({});
 
         if (history.state.data && history.state.data.blockHeight) {
           this.blockHeight = history.state.data.blockHeight;
@@ -176,6 +175,7 @@ export class BlockComponent implements OnInit, OnDestroy {
         let isBlockHeight = false;
         if (/^[0-9]+$/.test(blockHash)) {
           isBlockHeight = true;
+          this.stateService.markBlock$.next({ blockHeight: parseInt(blockHash, 10)});
         } else {
           this.blockHash = blockHash;
         }

frontend/src/app/components/blockchain/blockchain.component.html

@@ -1,5 +1,5 @@
 <div class="text-center" class="blockchain-wrapper" [class.time-ltr]="timeLtr" [class.ltr-transition]="ltrTransitionEnabled" #container>
-  <div class="position-container" [ngClass]="network ? network : ''" [style.--divider-offset]="dividerOffset + 'px'" [style.--mempool-offset]="mempoolOffset + 'px'">
+  <div #positionContainer class="position-container" [ngClass]="network ? network : ''" [style]="positionStyle">
     <span>
       <div class="blocks-wrapper">
         <div class="scroll-spacer" *ngIf="minScrollWidth" [style.left]="minScrollWidth + 'px'"></div>

frontend/src/app/components/blockchain/blockchain.component.scss

@@ -26,15 +26,7 @@
   position: absolute;
   left: 0;
   top: 75px;
-  --divider-offset: 50vw;
+  transform: translateX(1280px);
-  --mempool-offset: 0px;
-  transform: translateX(calc(var(--divider-offset) + var(--mempool-offset)));
-}
-
-.blockchain-wrapper.time-ltr {
-  .position-container {
-    transform: translateX(calc(100vw - var(--divider-offset) - var(--mempool-offset)));
-  }
 }
 
 .black-background {

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

@@ -1,4 +1,4 @@
-import { Component, OnInit, OnDestroy, ChangeDetectionStrategy, Input, Output, EventEmitter, HostListener, ChangeDetectorRef, OnChanges, SimpleChanges } from '@angular/core';
+import { Component, OnInit, OnDestroy, ChangeDetectionStrategy, Input, Output, EventEmitter, ChangeDetectorRef, OnChanges, SimpleChanges } from '@angular/core';
 import { firstValueFrom, Subscription } from 'rxjs';
 import { StateService } from '../../services/state.service';
 
@@ -27,8 +27,11 @@ export class BlockchainComponent implements OnInit, OnDestroy, OnChanges {
   loadingTip: boolean = true;
   connected: boolean = true;
 
-  dividerOffset: number = 0;
+  dividerOffset: number | null = null;
-  mempoolOffset: number = 0;
+  mempoolOffset: number | null = null;
+  positionStyle = {
+    transform: "translateX(1280px)",
+  };
 
   constructor(
     public stateService: StateService,
@@ -40,6 +43,7 @@ export class BlockchainComponent implements OnInit, OnDestroy, OnChanges {
     this.network = this.stateService.network;
     this.timeLtrSubscription = this.stateService.timeLtr.subscribe((ltr) => {
       this.timeLtr = !!ltr;
+      this.updateStyle();
     });
     this.connectionStateSubscription = this.stateService.connectionState$.subscribe(state => {
       this.connected = (state === 2);
@@ -63,29 +67,47 @@ export class BlockchainComponent implements OnInit, OnDestroy, OnChanges {
     const prevOffset = this.mempoolOffset;
     this.mempoolOffset = 0;
     this.mempoolOffsetChange.emit(0);
+    this.updateStyle();
     setTimeout(() => {
       this.ltrTransitionEnabled = true;
       this.flipping = true;
       this.stateService.timeLtr.next(!this.timeLtr);
+      this.cd.markForCheck();
       setTimeout(() => {
         this.ltrTransitionEnabled = false;
         this.flipping = false;
         this.mempoolOffset = prevOffset;
-        this.mempoolOffsetChange.emit(this.mempoolOffset);
+        this.mempoolOffsetChange.emit((this.mempoolOffset || 0));
+        this.updateStyle();
+        this.cd.markForCheck();
       },  1000);
     }, 0);
-    this.cd.markForCheck();
   }
 
   onMempoolWidthChange(width): void {
     if (this.flipping) {
       return;
     }
-    this.mempoolOffset = Math.max(0, width - this.dividerOffset);
+    this.mempoolOffset = Math.max(0, width - (this.dividerOffset || 0));
-    this.cd.markForCheck();
+    this.updateStyle();
     this.mempoolOffsetChange.emit(this.mempoolOffset);
   }
 
+  updateStyle(): void {
+    if (this.dividerOffset == null || this.mempoolOffset == null) {
+      return;
+    }
+    const oldTransform = this.positionStyle.transform;
+    this.positionStyle = this.timeLtr ? {
+      transform: `translateX(calc(100vw - ${this.dividerOffset + this.mempoolOffset}px)`,
+    } : {
+      transform: `translateX(${this.dividerOffset + this.mempoolOffset}px)`,
+    };
+    if (oldTransform !== this.positionStyle.transform) {
+      this.cd.detectChanges();
+    }
+  }
+
   ngOnChanges(changes: SimpleChanges): void {
     if (changes.containerWidth) {
       this.onResize();
@@ -107,6 +129,6 @@ export class BlockchainComponent implements OnInit, OnDestroy, OnChanges {
         this.dividerOffset = width * 0.95;
       }
     }
-    this.cd.markForCheck();
+    this.updateStyle();
   }
 }

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

@@ -97,6 +97,10 @@ export class MempoolBlocksComponent implements OnInit, OnChanges, OnDestroy {
   ngOnInit() {
     this.chainTip = this.stateService.latestBlockHeight;
 
+    const width = this.containerOffset + (this.stateService.env.MEMPOOL_BLOCKS_AMOUNT) * this.blockOffset;
+    this.mempoolWidth = width;
+    this.widthChange.emit(this.mempoolWidth);
+
     if (['', 'testnet', 'signet'].includes(this.stateService.network)) {
       this.enabledMiningInfoIfNeeded(this.location.path());
       this.location.onUrlChange((url) => this.enabledMiningInfoIfNeeded(url));
@@ -161,11 +165,11 @@ export class MempoolBlocksComponent implements OnInit, OnChanges, OnDestroy {
           return this.mempoolBlocks;
         }),
         tap(() => {
-          this.cd.markForCheck();
           const width = this.containerOffset + this.mempoolBlocks.length * this.blockOffset;
           if (this.mempoolWidth !== width) {
             this.mempoolWidth = width;
             this.widthChange.emit(this.mempoolWidth);
+            this.cd.markForCheck();
           }
         })
       );
@@ -215,11 +219,13 @@ export class MempoolBlocksComponent implements OnInit, OnChanges, OnDestroy {
         if (isNewBlock && (block?.extras?.similarity == null || block?.extras?.similarity > 0.5) && !this.tabHidden) {
           this.blockIndex++;
         }
+        this.cd.markForCheck();
       });
 
     this.chainTipSubscription = this.stateService.chainTip$.subscribe((height) => {
       if (this.chainTip === -1) {
         this.chainTip = height;
+        this.cd.markForCheck();
       }
     });
 
@@ -257,6 +263,7 @@ export class MempoolBlocksComponent implements OnInit, OnChanges, OnDestroy {
       this.blockPadding = 0.24 * this.blockWidth;
       this.containerOffset = 0.32 * this.blockWidth;
       this.blockOffset = this.blockWidth + this.blockPadding;
+      this.cd.markForCheck();
     }
   }
 
@@ -275,6 +282,7 @@ export class MempoolBlocksComponent implements OnInit, OnChanges, OnDestroy {
   onResize(): void {
     this.animateEntry = false;
     this.reduceEmptyBlocksToFitScreen(this.mempoolEmptyBlocks);
+    this.cd.markForCheck();
   }
 
   trackByFn(index: number, block: MempoolBlock) {

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

@@ -1,4 +1,4 @@
-import { Component, ElementRef, HostListener, OnInit, OnDestroy, ViewChild, Input, DoCheck } from '@angular/core';
+import { Component, ElementRef, HostListener, OnInit, OnDestroy, ViewChild, Input, ChangeDetectorRef, ChangeDetectionStrategy, AfterViewChecked } from '@angular/core';
 import { Subscription } from 'rxjs';
 import { MarkBlockState, StateService } from '../../services/state.service';
 import { specialBlocks } from '../../app.constants';
@@ -8,8 +8,9 @@ import { BlockExtended } from '../../interfaces/node-api.interface';
   selector: 'app-start',
   templateUrl: './start.component.html',
   styleUrls: ['./start.component.scss'],
+  changeDetection: ChangeDetectionStrategy.OnPush
 })
-export class StartComponent implements OnInit, OnDestroy, DoCheck {
+export class StartComponent implements OnInit, AfterViewChecked, OnDestroy {
   @Input() showLoadingIndicator = false;
 
   interval = 60;
@@ -23,7 +24,7 @@ export class StartComponent implements OnInit, OnDestroy, DoCheck {
   timeLtrSubscription: Subscription;
   timeLtr: boolean = this.stateService.timeLtr.value;
   chainTipSubscription: Subscription;
-  chainTip: number = -1;
+  chainTip: number = 100;
   tipIsSet: boolean = false;
   lastMark: MarkBlockState;
   markBlockSubscription: Subscription;
@@ -41,7 +42,8 @@ export class StartComponent implements OnInit, OnDestroy, DoCheck {
   blocksPerPage: number = 1;
   pageWidth: number;
   firstPageWidth: number;
-  minScrollWidth: number;
+  minScrollWidth: number = 40 + (155 * (8 + (2 * Math.ceil(window.innerWidth / 155))));
+  currentScrollWidth: number = null;
   pageIndex: number = 0;
   pages: any[] = [];
   pendingMark: number | null = null;
@@ -49,9 +51,10 @@ export class StartComponent implements OnInit, OnDestroy, DoCheck {
   lastUpdate: number = 0;
   lastMouseX: number;
   velocity: number = 0;
-  mempoolOffset: number = 0;
+  mempoolOffset: number = null;
+  mempoolWidth: number = 0;
+  scrollLeft: number = null;
 
-  private resizeObserver: ResizeObserver;
   chainWidth: number = window.innerWidth;
   menuOpen: boolean = false;
   menuSliding: boolean = false;
@@ -59,24 +62,18 @@ export class StartComponent implements OnInit, OnDestroy, DoCheck {
 
   constructor(
     private stateService: StateService,
+    private cd: ChangeDetectorRef,
   ) {
     this.isiOS = ['iPhone','iPod','iPad'].includes((navigator as any)?.userAgentData?.platform || navigator.platform);
   }
 
-  ngDoCheck(): void {
-    if (this.pendingOffset != null) {
-      const offset = this.pendingOffset;
-      this.pendingOffset = null;
-      this.addConvertedScrollOffset(offset);
-    }
-  }
-
   ngOnInit() {
     this.firstPageWidth = 40 + (this.blockWidth * this.dynamicBlocksAmount);
     this.blockCounterSubscription = this.stateService.blocks$.subscribe((blocks) => {
       this.blockCount = blocks.length;
       this.dynamicBlocksAmount = Math.min(this.blockCount, this.stateService.env.KEEP_BLOCKS_AMOUNT, 8);
       this.firstPageWidth = 40 + (this.blockWidth * this.dynamicBlocksAmount);
+      this.minScrollWidth = 40 + (8 * this.blockWidth) + (this.pageWidth * 2);
       if (this.blockCount <= Math.min(8, this.stateService.env.KEEP_BLOCKS_AMOUNT)) {
         this.onResize();
       }
@@ -122,7 +119,7 @@ export class StartComponent implements OnInit, OnDestroy, DoCheck {
             this.scrollToBlock(scrollToHeight);
           }
         }
-        if (!this.tipIsSet || (blockHeight < 0 && !this.mempoolOffset)) {
+        if (!this.tipIsSet || (blockHeight < 0 && this.mempoolOffset == null)) {
           this.pendingMark = blockHeight;
         }
       }
@@ -168,15 +165,47 @@ export class StartComponent implements OnInit, OnDestroy, DoCheck {
     });
   }
 
+  ngAfterViewChecked(): void {
+    if (this.currentScrollWidth !== this.blockchainContainer?.nativeElement?.scrollWidth) {
+      this.currentScrollWidth = this.blockchainContainer?.nativeElement?.scrollWidth;
+      if (this.pendingOffset != null) {
+        const delta = this.pendingOffset - (this.mempoolOffset || 0);
+        this.mempoolOffset = this.pendingOffset;
+        this.currentScrollWidth = this.blockchainContainer?.nativeElement?.scrollWidth;
+        this.pendingOffset = null;
+        this.addConvertedScrollOffset(delta);
+        this.applyPendingMarkArrow();
+      } else {
+        this.applyScrollLeft();
+      }
+    }
+  }
+
   onMempoolOffsetChange(offset): void {
-    const delta = offset - this.mempoolOffset;
+    if (offset !== this.mempoolOffset) {
-    this.addConvertedScrollOffset(delta);
+      this.pendingOffset = offset;
-    this.mempoolOffset = offset;
+    }
-    this.applyPendingMarkArrow();
+  }
+
+  applyScrollLeft(): void {
+    if (this.blockchainContainer?.nativeElement?.scrollWidth) {
+      let lastScrollLeft = null;
+      while (this.scrollLeft < 0 && this.shiftPagesForward() && lastScrollLeft !== this.scrollLeft) {
+        lastScrollLeft = this.scrollLeft;
+        this.scrollLeft += this.pageWidth;
+      }
+      lastScrollLeft = null;
+      while (this.scrollLeft > this.blockchainContainer.nativeElement.scrollWidth && this.shiftPagesBack() && lastScrollLeft !== this.scrollLeft) {
+        lastScrollLeft = this.scrollLeft;
+        this.scrollLeft -= this.pageWidth;
+      }
+      this.blockchainContainer.nativeElement.scrollLeft = this.scrollLeft;
+    }
+    this.cd.detectChanges();
   }
 
   applyPendingMarkArrow(): void {
-    if (this.pendingMark != null) {
+    if (this.pendingMark != null && this.pendingMark <= this.chainTip) {
       if (this.pendingMark < 0) {
         this.scrollToBlock(this.chainTip - this.pendingMark);
       } else {
@@ -191,6 +220,7 @@ export class StartComponent implements OnInit, OnDestroy, DoCheck {
     window.clearTimeout(this.menuTimeout);
     this.menuTimeout = window.setTimeout(() => {
       this.menuSliding = false;
+      this.cd.markForCheck();
     }, 300);
   }
 
@@ -200,34 +230,33 @@ export class StartComponent implements OnInit, OnDestroy, DoCheck {
     this.isMobile = this.chainWidth <= 767.98;
     let firstVisibleBlock;
     let offset;
-    if (this.blockchainContainer?.nativeElement != null) {
+    this.pages.forEach(page => {
-      this.pages.forEach(page => {
+      const left = page.offset - this.getConvertedScrollOffset(this.scrollLeft);
-        const left = page.offset - this.getConvertedScrollOffset();
+      const right = left + this.pageWidth;
-        const right = left + this.pageWidth;
+      if (left <= 0 && right > 0) {
-        if (left <= 0 && right > 0) {
+        const blockIndex = Math.max(0, Math.floor(left / -this.blockWidth));
-          const blockIndex = Math.max(0, Math.floor(left / -this.blockWidth));
+        firstVisibleBlock = page.height - blockIndex;
-          firstVisibleBlock = page.height - blockIndex;
+        offset = left + (blockIndex * this.blockWidth);
-          offset = left + (blockIndex * this.blockWidth);
+      }
-        }
+    });
-      });
-    }
 
     this.blocksPerPage = Math.ceil(this.chainWidth / this.blockWidth);
     this.pageWidth = this.blocksPerPage * this.blockWidth;
-    this.minScrollWidth = this.firstPageWidth + (this.pageWidth * 2);
+    this.minScrollWidth = 40 + (8 * this.blockWidth) + (this.pageWidth * 2);
 
     if (firstVisibleBlock != null) {
-      this.scrollToBlock(firstVisibleBlock, offset + (this.isMobile ? this.blockWidth : 0));
+      this.scrollToBlock(firstVisibleBlock, offset);
     } else {
       this.updatePages();
     }
+    this.cd.markForCheck();
   }
 
   onMouseDown(event: MouseEvent) {
     if (!(event.which > 1 || event.button > 0)) {
       this.mouseDragStartX = event.clientX;
       this.resetMomentum(event.clientX);
-      this.blockchainScrollLeftInit = this.blockchainContainer.nativeElement.scrollLeft;
+      this.blockchainScrollLeftInit = this.scrollLeft;
     }
   }
   onPointerDown(event: PointerEvent) {
@@ -253,8 +282,8 @@ export class StartComponent implements OnInit, OnDestroy, DoCheck {
     if (this.mouseDragStartX != null) {
       this.updateVelocity(event.clientX);
       this.stateService.setBlockScrollingInProgress(true);
-      this.blockchainContainer.nativeElement.scrollLeft =
+      this.scrollLeft = this.blockchainScrollLeftInit + this.mouseDragStartX - event.clientX;
-        this.blockchainScrollLeftInit + this.mouseDragStartX - event.clientX;
+      this.applyScrollLeft();
     }
   }
   @HostListener('document:mouseup', [])
@@ -310,25 +339,31 @@ export class StartComponent implements OnInit, OnDestroy, DoCheck {
         } else {
           this.velocity += dv;
         }
-        this.blockchainContainer.nativeElement.scrollLeft -= displacement;
+        this.scrollLeft -= displacement;
+        this.applyScrollLeft();
         this.animateMomentum();
       }
     });
   }
 
   onScroll(e) {
+    if (this.blockchainContainer?.nativeElement?.scrollLeft == null) {
+      return;
+    }
+    this.scrollLeft = this.blockchainContainer?.nativeElement?.scrollLeft;
     const middlePage = this.pageIndex === 0 ? this.pages[0] : this.pages[1];
     // compensate for css transform
     const translation = (this.isMobile ? this.chainWidth * 0.95 : this.chainWidth * 0.5);
     const backThreshold = middlePage.offset + (this.pageWidth * 0.5) + translation;
     const forwardThreshold = middlePage.offset - (this.pageWidth * 0.5) + translation;
-    const scrollLeft = this.getConvertedScrollOffset();
+    this.scrollLeft = this.blockchainContainer.nativeElement.scrollLeft;
-    if (scrollLeft > backThreshold) {
+    const offsetScroll = this.getConvertedScrollOffset(this.scrollLeft);
+    if (offsetScroll > backThreshold) {
       if (this.shiftPagesBack()) {
         this.addConvertedScrollOffset(-this.pageWidth);
         this.blockchainScrollLeftInit -= this.pageWidth;
       }
-    } else if (scrollLeft < forwardThreshold) {
+    } else if (offsetScroll < forwardThreshold) {
       if (this.shiftPagesForward()) {
         this.addConvertedScrollOffset(this.pageWidth);
         this.blockchainScrollLeftInit += this.pageWidth;
@@ -337,10 +372,6 @@ export class StartComponent implements OnInit, OnDestroy, DoCheck {
   }
 
   scrollToBlock(height, blockOffset = 0) {
-    if (!this.blockchainContainer?.nativeElement) {
-      setTimeout(() => { this.scrollToBlock(height, blockOffset); }, 50);
-      return;
-    }
     if (this.isMobile) {
       blockOffset -= this.blockWidth;
     }
@@ -348,15 +379,15 @@ export class StartComponent implements OnInit, OnDestroy, DoCheck {
     const pages = [];
     this.pageIndex = Math.max(viewingPageIndex - 1, 0);
     let viewingPage = this.getPageAt(viewingPageIndex);
-    const isLastPage = viewingPage.height < this.blocksPerPage;
+    const isLastPage = viewingPage.height <= 0;
     if (isLastPage) {
       this.pageIndex = Math.max(viewingPageIndex - 2, 0);
       viewingPage = this.getPageAt(viewingPageIndex);
     }
-    const left = viewingPage.offset - this.getConvertedScrollOffset();
+    const left = viewingPage.offset - this.getConvertedScrollOffset(this.scrollLeft);
     const blockIndex = viewingPage.height - height;
     const targetOffset = (this.blockWidth * blockIndex) + left;
-    let deltaOffset = targetOffset - blockOffset;
+    const deltaOffset = targetOffset - blockOffset;
 
     if (isLastPage) {
       pages.push(this.getPageAt(viewingPageIndex - 2));
@@ -386,6 +417,7 @@ export class StartComponent implements OnInit, OnDestroy, DoCheck {
     pages.push(this.getPageAt(this.pageIndex + 1));
     pages.push(this.getPageAt(this.pageIndex + 2));
     this.pages = pages;
+    this.cd.markForCheck();
   }
 
   shiftPagesBack(): boolean {
@@ -439,44 +471,40 @@ export class StartComponent implements OnInit, OnDestroy, DoCheck {
   blockInViewport(height: number): boolean {
     const firstHeight = this.pages[0].height;
     const translation = (this.isMobile ? this.chainWidth * 0.95 : this.chainWidth * 0.5);
-    const firstX = this.pages[0].offset - this.getConvertedScrollOffset() + translation;
+    const firstX = this.pages[0].offset - this.getConvertedScrollOffset(this.scrollLeft) + translation;
     const xPos = firstX + ((firstHeight - height) * 155);
     return xPos > -55 && xPos < (this.chainWidth - 100);
   }
 
-  getConvertedScrollOffset(): number {
+  getConvertedScrollOffset(scrollLeft): number {
     if (this.timeLtr) {
-      return -(this.blockchainContainer?.nativeElement?.scrollLeft || 0) - this.mempoolOffset;
+      return -(scrollLeft || 0) - (this.mempoolOffset || 0);
     } else {
-      return (this.blockchainContainer?.nativeElement?.scrollLeft || 0) - this.mempoolOffset;
+      return (scrollLeft || 0) - (this.mempoolOffset || 0);
     }
   }
 
   setScrollLeft(offset: number): void {
     if (this.timeLtr) {
-      this.blockchainContainer.nativeElement.scrollLeft = offset - this.mempoolOffset;
+      this.scrollLeft = offset - (this.mempoolOffset || 0);
     } else {
-      this.blockchainContainer.nativeElement.scrollLeft = offset + this.mempoolOffset;
+      this.scrollLeft = offset + (this.mempoolOffset || 0);
     }
+    this.applyScrollLeft();
   }
 
   addConvertedScrollOffset(offset: number): void {
-    if (!this.blockchainContainer?.nativeElement) {
-      this.pendingOffset = offset;
-      return;
-    }
     if (this.timeLtr) {
-      this.blockchainContainer.nativeElement.scrollLeft -= offset;
+      this.scrollLeft -= offset;
     } else {
-      this.blockchainContainer.nativeElement.scrollLeft += offset;
+      this.scrollLeft += offset;
     }
+    this.applyScrollLeft();
   }
 
   ngOnDestroy() {
-    if (this.blockchainContainer?.nativeElement) {
+    // clean up scroll position to prevent caching wrong scroll in Firefox
-      // clean up scroll position to prevent caching wrong scroll in Firefox
+    this.setScrollLeft(0);
-      this.setScrollLeft(0);
-    }
     this.timeLtrSubscription.unsubscribe();
     this.chainTipSubscription.unsubscribe();
     this.markBlockSubscription.unsubscribe();