improve block scrolling & new block animation

2024-11-20 10:21:52 +01:00 · 2022-12-27 11:33:08 -06:00 · 2022-12-27 11:33:08 -06:00 · 32bf30872d
commit 32bf30872d
parent 7be3ed416e
6 changed files with 180 additions and 114 deletions
--- a/frontend/src/app/components/blockchain-blocks/blockchain-blocks.component.html
+++ b/frontend/src/app/components/blockchain-blocks/blockchain-blocks.component.html
@ -1,6 +1,6 @@
 <div class="blocks-container blockchain-blocks-container" [class.time-ltr]="timeLtr" [style.left]="static ? (offset || 0) + 'px' : null" *ngIf="(loadingBlocks$ | async) === false; else loadingBlocksTemplate">
-  <div *ngFor="let block of blocks; let i = index; trackBy: trackByBlocksFn" >
-    <ng-container *ngIf="block && !block.loading; else loadingBlock">
+  <div *ngFor="let block of blocks; let i = index; trackBy: trackByBlocksFn">
+    <ng-container *ngIf="block && !block.loading && !block.placeholder; else placeholderBlock">
      <div [attr.data-cy]="'bitcoin-block-' + i" class="text-center bitcoin-block mined-block blockchain-blocks-{{ i }}" id="bitcoin-block-{{ block.height }}" [ngStyle]="blockStyles[i]" [class.blink-bg]="(specialBlocks[block.height] !== undefined)">
        <a draggable="false" [routerLink]="['/block/' | relativeUrl, block.id]" [state]="{ data: { block: block } }"
          class="blockLink" [ngClass]="{'disabled': (this.stateService.blockScrolling$ | async)}">&nbsp;</a>
@ -11,8 +11,11 @@
          <div [attr.data-cy]="'bitcoin-block-' + i + '-fees'" class="fees">
            ~{{ block?.extras?.medianFee | number:feeRounding }} <ng-container i18n="shared.sat-vbyte|sat/vB">sat/vB</ng-container>
          </div>
-          <div [attr.data-cy]="'bitcoin-block-' + i + '-fee-span'" class="fee-span">
-            {{ block?.extras?.feeRange[1] | number:feeRounding }} - {{ block?.extras?.feeRange[block?.extras?.feeRange.length - 1] | number:feeRounding }} <ng-container i18n="shared.sat-vbyte|sat/vB">sat/vB</ng-container>
+          <div [attr.data-cy]="'bitcoin-block-' + i + '-fee-span'" class="fee-span" *ngIf="block?.extras?.feeRange">
+            {{ block?.extras?.feeRange?.[1] | number:feeRounding }} - {{ block?.extras?.feeRange[block?.extras?.feeRange?.length - 1] | number:feeRounding }} <ng-container i18n="shared.sat-vbyte|sat/vB">sat/vB</ng-container>
+          </div>
+          <div [attr.data-cy]="'bitcoin-block-' + i + '-fee-span'" class="fee-span" *ngIf="!block?.extras?.feeRange">
+            &nbsp;
          </div>
          <div [attr.data-cy]="'bitcoin-block-' + i + '-total-fees'" *ngIf="showMiningInfo" class="block-size">
            <app-amount [satoshis]="block.extras?.totalFees ?? 0" digitsInfo="1.2-3" [noFiat]="true"></app-amount>
@ -31,16 +34,19 @@
        </div>
      </div>
    </ng-container>
+    <ng-template #placeholderBlock>
+      <ng-container *ngIf="block && block.placeholder; else loadingBlock">
+        <div [attr.data-cy]="'bitcoin-block-' + i" class="text-center bitcoin-block mined-block placeholder-block blockchain-blocks-{{ i }}" id="bitcoin-block-{{ block.height }}" [ngStyle]="blockStyles[i]">
+ 
+        </div>
+      </ng-container>
+    </ng-template>
    <ng-template #loadingBlock>
-      <div [attr.data-cy]="'bitcoin-block-' + i" class="text-center bitcoin-block mined-block blockchain-blocks-{{ i }}" id="bitcoin-block-{{ block.height }}" [ngStyle]="blockStyles[i]" [class.blink-bg]="(specialBlocks[block.height] !== undefined)">
-        <span draggable="false" class="blockLink" [ngClass]="{'disabled': (this.stateService.blockScrolling$ | async)}">&nbsp;</span>
-        <div [attr.data-cy]="'bitcoin-block-' + i + '-height'" class="block-height">
-          <span>{{ block.height }}</span>
+      <ng-container *ngIf="block && block.loading">
+        <div class="flashing">
+          <div class="text-center bitcoin-block mined-block" id="bitcoin-block-{{ block.height }}" [ngStyle]="blockStyles[i]"></div>
        </div>
-        <div class="block-body">
-          loading
-        </div>
-      </div>
+      </ng-container>
    </ng-template>
  </div>
 <div [hidden]="!arrowVisible" id="arrow-up" [style.transition]="transition" [ngStyle]="{'left': arrowLeftPx + 'px' }"></div>
--- a/frontend/src/app/components/blockchain-blocks/blockchain-blocks.component.scss
+++ b/frontend/src/app/components/blockchain-blocks/blockchain-blocks.component.scss
@ -25,6 +25,10 @@
  transition: background 2s, left 2s, transform 1s;
 }

+.mined-block.placeholder-block {
+  background: none !important;
+}
+
 .block-size {
  font-size: 16px;
  font-weight: bold;
@ -96,6 +100,16 @@
  transform-origin: top;
 }

+.bitcoin-block.placeholder-block::after {
+  content: none;
+  background: 0;
+}
+
+.bitcoin-block.placeholder-block::before {
+  content: none;
+  background: 0;
+}
+
 .black-background {
  background-color: #11131f;
  z-index: 100;
--- a/frontend/src/app/components/blockchain-blocks/blockchain-blocks.component.ts
+++ b/frontend/src/app/components/blockchain-blocks/blockchain-blocks.component.ts
@ -8,6 +8,7 @@ import { config } from 'process';
 import { CacheService } from 'src/app/services/cache.service';

 interface BlockchainBlock extends BlockExtended {
+  placeholder?: boolean;
  loading?: boolean;
 }

@ -102,10 +103,6 @@ export class BlockchainBlocksComponent implements OnInit, OnChanges, OnDestroy {
          this.blocks.unshift(block);
          this.blocks = this.blocks.slice(0, this.stateService.env.KEEP_BLOCKS_AMOUNT);

-          if (this.blocksFilled && !this.tabHidden && block.extras) {
-            block.extras.stage = block.extras.matchRate >= 66 ? 1 : 2;
-          }
-
          if (txConfirmed) {
            this.markHeight = block.height;
            this.moveArrowToPosition(true, true);
@ -114,12 +111,16 @@ export class BlockchainBlocksComponent implements OnInit, OnChanges, OnDestroy {
          }

          this.blockStyles = [];
-          this.blocks.forEach((b, i) => this.blockStyles.push(this.getStyleForBlock(b, i)));
-          setTimeout(() => {
-            this.blockStyles = [];
+          if (this.blocksFilled) {
+            this.blocks.forEach((b, i) => this.blockStyles.push(this.getStyleForBlock(b, i, i ? -155 : -205)));
+            setTimeout(() => {
+              this.blockStyles = [];
+              this.blocks.forEach((b, i) => this.blockStyles.push(this.getStyleForBlock(b, i)));
+              this.cd.markForCheck();
+            }, 50);
+          } else {
            this.blocks.forEach((b, i) => this.blockStyles.push(this.getStyleForBlock(b, i)));
-            this.cd.markForCheck();
-          }, 50);
+          }

          if (this.blocks.length === this.stateService.env.KEEP_BLOCKS_AMOUNT) {
            this.blocksFilled = true;
@ -210,31 +211,34 @@ export class BlockchainBlocksComponent implements OnInit, OnChanges, OnDestroy {
    // reset blocks
    this.blocks = [];
    this.blockStyles = [];
-    while (this.blocks.length < Math.min(this.height + 1, this.count)) {
+    while (this.blocks.length < this.count) {
      const height = this.height - this.blocks.length;
+      let block;
      if (height >= 0) {
        this.cacheService.loadBlock(height);
-        const block = this.cacheService.getCachedBlock(height) || null;
-        this.blocks.push(block || {
-          loading: true,
-          id: '',
-          height,
-          version: 0,
-          timestamp: 0,
-          bits: 0,
-          nonce: 0,
-          difficulty: 0,
-          merkle_root: '',
-          tx_count: 0,
-          size: 0,
-          weight: 0,
-          previousblockhash: '',
-        });
+        block = this.cacheService.getCachedBlock(height) || null;
      }
+      this.blocks.push(block || {
+        placeholder: height < 0,
+        loading: height >= 0,
+        id: '',
+        height,
+        version: 0,
+        timestamp: 0,
+        bits: 0,
+        nonce: 0,
+        difficulty: 0,
+        merkle_root: '',
+        tx_count: 0,
+        size: 0,
+        weight: 0,
+        previousblockhash: '',
+      });
    }
    this.blocks = this.blocks.slice(0, this.count);
    this.blockStyles = [];
-    this.blocks.forEach((b, i) => this.blockStyles.push(this.getStyleForBlock(b, i, animateSlide)));
+    this.blocks.forEach((b, i) => this.blockStyles.push(this.getStyleForBlock(b, i, animateSlide ? -155 : 0)));
+    this.cd.markForCheck();
    if (animateSlide) {
      // animate blocks slide right
      setTimeout(() => {
@ -242,6 +246,9 @@ export class BlockchainBlocksComponent implements OnInit, OnChanges, OnDestroy {
        this.blocks.forEach((b, i) => this.blockStyles.push(this.getStyleForBlock(b, i)));
        this.cd.markForCheck();
      }, 50);
+      this.moveArrowToPosition(true, true);
+    } else {
+      this.moveArrowToPosition(false, false);
    }
  }

@ -254,18 +261,17 @@ export class BlockchainBlocksComponent implements OnInit, OnChanges, OnDestroy {
    this.cd.markForCheck();
  }

-  getStyleForBlock(block: BlockchainBlock, index: number, animateSlideStart: boolean = false) {
-    if (!block || block.loading) {
-      return this.getStyleForLoadingBlock(index, animateSlideStart);
+  getStyleForBlock(block: BlockchainBlock, index: number, animateEnterFrom: number = 0) {
+    if (!block || block.placeholder) {
+      return this.getStyleForPlaceholderBlock(index, animateEnterFrom);
+    } else if (block.loading) {
+      return this.getStyleForLoadingBlock(index, animateEnterFrom);
    }
    const greenBackgroundHeight = 100 - (block.weight / this.stateService.env.BLOCK_WEIGHT_UNITS) * 100;
    let addLeft = 0;

-    if (animateSlideStart) {
-      if (block?.extras) {
-        block.extras.stage = 2;
-      }
-      addLeft = -205;
+    if (animateEnterFrom) {
+      addLeft = animateEnterFrom || 0;
    }

    return {
@ -276,11 +282,12 @@ export class BlockchainBlocksComponent implements OnInit, OnChanges, OnDestroy {
        ${this.gradientColors[this.network][0]} ${Math.max(greenBackgroundHeight, 0)}%,
        ${this.gradientColors[this.network][1]} 100%
      )`,
+      transition: animateEnterFrom ? 'background 2s, transform 1s' : null,
    };
  }

-  getStyleForLoadingBlock(index: number, animateSlideStart: boolean = false) {
-    const addLeft = animateSlideStart ? -205 : 0;
+  getStyleForLoadingBlock(index: number, animateEnterFrom: number = 0) {
+    const addLeft = animateEnterFrom || 0;

    return {
      left: addLeft + (155 * index) + 'px',
@ -288,13 +295,15 @@ export class BlockchainBlocksComponent implements OnInit, OnChanges, OnDestroy {
    };
  }

-  getStyleForEmptyBlock(block: BlockExtended) {
-    let addLeft = 0;
+  getStyleForPlaceholderBlock(index: number, animateEnterFrom: number = 0) {
+    const addLeft = animateEnterFrom || 0;
+    return {
+      left: addLeft + (155 * index) + 'px',
+    };
+  }

-    if (block?.extras?.stage === 1) {
-      block.extras.stage = 2;
-      addLeft = -205;
-    }
+  getStyleForEmptyBlock(block: BlockExtended, animateEnterFrom: number = 0) {
+    const addLeft = animateEnterFrom || 0;

    return {
      left: addLeft + 155 * this.emptyBlocks.indexOf(block) + 'px',
@ -319,7 +328,6 @@ export class BlockchainBlocksComponent implements OnInit, OnChanges, OnDestroy {
        weight: 0,
        previousblockhash: '',
        matchRate: 0,
-        stage: 0,
      });
    }
    return emptyBlocks;
--- a/frontend/src/app/components/blockchain/blockchain.component.ts
+++ b/frontend/src/app/components/blockchain/blockchain.component.ts
@ -33,8 +33,8 @@ export class BlockchainComponent implements OnInit, OnDestroy {
    this.timeLtrSubscription.unsubscribe();
  }

-  trackByPageFn(index: number, item: { height: number }) {
-    return item.height;
+  trackByPageFn(index: number, item: { index: number }) {
+    return item.index;
  }

  toggleTimeDirection() {
--- a/frontend/src/app/components/start/start.component.ts
+++ b/frontend/src/app/components/start/start.component.ts
@ -47,7 +47,7 @@ export class StartComponent implements OnInit, OnDestroy {
      this.updatePages();
    });
    this.markBlockSubscription = this.stateService.markBlock$.subscribe((mark) => {
-      if (mark?.blockHeight != null) {
+      if (mark?.blockHeight != null && !this.blockInViewport(mark.blockHeight)) {
        this.scrollToBlock(mark.blockHeight);
      }
    });
@ -82,15 +82,17 @@ export class StartComponent implements OnInit, OnDestroy {
    this.isMobile = window.innerWidth <= 767.98;
    let firstVisibleBlock;
    let offset;
-    this.pages.forEach(page => {
-      const left = page.offset - (this.blockchainContainer?.nativeElement?.scrollLeft || 0);
-      const right = left + this.pageWidth;
-      if (left <= 0 && right > 0) {
-        const blockIndex = Math.max(0, Math.floor(left / -this.blockWidth));
-        firstVisibleBlock = page.height - blockIndex;
-        offset = left + (blockIndex * this.blockWidth);
-      }
-    });
+    if (this.blockchainContainer?.nativeElement != null) {
+      this.pages.forEach(page => {
+        const left = page.offset - this.getConvertedScrollOffset();
+        const right = left + this.pageWidth;
+        if (left <= 0 && right > 0) {
+          const blockIndex = Math.max(0, Math.floor(left / -this.blockWidth));
+          firstVisibleBlock = page.height - blockIndex;
+          offset = left + (blockIndex * this.blockWidth);
+        }
+      });
+    }

    this.blocksPerPage = Math.ceil(window.innerWidth / this.blockWidth);
    this.pageWidth = this.blocksPerPage * this.blockWidth;
@ -132,25 +134,16 @@ export class StartComponent implements OnInit, OnDestroy {
    const translation = (this.isMobile ? window.innerWidth * 0.95 : window.innerWidth * 0.5);
    const backThreshold = middlePage.offset + (this.pageWidth * 0.5) + translation;
    const forwardThreshold = middlePage.offset - (this.pageWidth * 0.5) + translation;
-    if (this.timeLtr) {
-      if (e.target.scrollLeft < -backThreshold) {
-        if (this.shiftPagesBack()) {
-          e.target.scrollLeft += this.pageWidth;
-        }
-      } else if (e.target.scrollLeft > -forwardThreshold) {
-        if (this.shiftPagesForward()) {
-          e.target.scrollLeft -= this.pageWidth;
-        }
+    const scrollLeft = this.getConvertedScrollOffset();
+    if (scrollLeft > backThreshold) {
+      if (this.shiftPagesBack()) {
+        this.addConvertedScrollOffset(-this.pageWidth);
+        this.blockchainScrollLeftInit -= this.pageWidth;
      }
-    } else {
-      if (e.target.scrollLeft > backThreshold) {
-        if (this.shiftPagesBack()) {
-          e.target.scrollLeft -= this.pageWidth;
-        }
-      } else if (e.target.scrollLeft < forwardThreshold) {
-        if (this.shiftPagesForward()) {
-          e.target.scrollLeft += this.pageWidth;
-        }
+    } else if (scrollLeft < forwardThreshold) {
+      if (this.shiftPagesForward()) {
+        this.addConvertedScrollOffset(this.pageWidth);
+        this.blockchainScrollLeftInit += this.pageWidth;
      }
    }
  }
@ -160,27 +153,39 @@ export class StartComponent implements OnInit, OnDestroy {
      setTimeout(() => { this.scrollToBlock(height, blockOffset); }, 50);
      return;
    }
-    let targetHeight = this.isMobile ? height - 1 : height;
-    const middlePageIndex = this.getPageIndexOf(targetHeight);
+    const targetHeight = this.isMobile ? height - 1 : height;
+    const viewingPageIndex = this.getPageIndexOf(targetHeight);
    const pages = [];
-    if (middlePageIndex > 0) {
-      this.pageIndex = middlePageIndex - 1;
-      const middlePage = this.getPageAt(middlePageIndex);
-      const left = middlePage.offset - this.blockchainContainer.nativeElement.scrollLeft;
-      const blockIndex = middlePage.height - targetHeight;
-      const targetOffset = (this.blockWidth * blockIndex) + left;
-      const deltaOffset = targetOffset - blockOffset;
-      if (this.pageIndex > 0) {
-        pages.push(this.getPageAt(this.pageIndex));
-      }
-      pages.push(middlePage);
-      pages.push(this.getPageAt(middlePageIndex + 1));
-      this.pages = pages;
-      this.blockchainContainer.nativeElement.scrollLeft += deltaOffset;
-    } else {
-      this.pageIndex = 0;
-      this.updatePages();
+    this.pageIndex = Math.max(viewingPageIndex - 1, 0);
+    let viewingPage = this.getPageAt(viewingPageIndex);
+    const isLastPage = viewingPage.height < this.blocksPerPage;
+    if (isLastPage) {
+      this.pageIndex = Math.max(viewingPageIndex - 2, 0);
+      viewingPage = this.getPageAt(viewingPageIndex);
    }
+    const left = viewingPage.offset - this.getConvertedScrollOffset();
+    const blockIndex = viewingPage.height - targetHeight;
+    const targetOffset = (this.blockWidth * blockIndex) + left;
+    let deltaOffset = targetOffset - blockOffset;
+
+    if (isLastPage) {
+      pages.push(this.getPageAt(viewingPageIndex - 2));
+    }
+    if (viewingPageIndex > 1) {
+      pages.push(this.getPageAt(viewingPageIndex - 1));
+    }
+    if (viewingPageIndex > 0) {
+      pages.push(viewingPage);
+    }
+    if (!isLastPage) {
+      pages.push(this.getPageAt(viewingPageIndex + 1));
+    }
+    if (viewingPageIndex === 0) {
+      pages.push(this.getPageAt(viewingPageIndex + 2));
+    }
+
+    this.pages = pages;
+    this.addConvertedScrollOffset(deltaOffset);
  }

  updatePages() {
@ -194,13 +199,18 @@ export class StartComponent implements OnInit, OnDestroy {
  }

  shiftPagesBack(): boolean {
-    this.pageIndex++;
-    this.pages.forEach(page => page.offset -= this.pageWidth);
-    if (this.pageIndex !== 1) {
-      this.pages.shift();
+    const nextPage = this.getPageAt(this.pageIndex + 3);
+    if (nextPage.height >= 0) {
+      this.pageIndex++;
+      this.pages.forEach(page => page.offset -= this.pageWidth);
+      if (this.pageIndex !== 1) {
+        this.pages.shift();
+      }
+      this.pages.push(this.getPageAt(this.pageIndex + 2));
+     return true;
+    } else {
+      return false;
    }
-    this.pages.push(this.getPageAt(this.pageIndex + 2));
-    return true;
  }

  shiftPagesForward(): boolean {
@ -217,9 +227,12 @@ export class StartComponent implements OnInit, OnDestroy {
  }

  getPageAt(index: number) {
+    const height = this.chainTip - 8 - ((index - 1) * this.blocksPerPage)
    return {
      offset: this.firstPageWidth + (this.pageWidth * (index - 1 - this.pageIndex)),
-      height: this.chainTip - 8 - ((index - 1) * this.blocksPerPage),
+      height: height,
+      depth: this.chainTip - height,
+      index: index,
    };
  }

@ -228,6 +241,33 @@ export class StartComponent implements OnInit, OnDestroy {
    return Math.max(0, Math.floor(delta / this.blocksPerPage) + 1);
  }

+  blockInViewport(height: number): boolean {
+    const firstHeight = this.pages[0].height;
+    const translation = (this.isMobile ? window.innerWidth * 0.95 : window.innerWidth * 0.5);
+    const firstX = this.pages[0].offset - this.getConvertedScrollOffset() + translation;
+    const xPos = firstX + ((firstHeight - height) * 155);
+    return xPos > -55 && xPos < (window.innerWidth - 100);
+  }
+
+  getConvertedScrollOffset(): number {
+    if (this.timeLtr) {
+      return -this.blockchainContainer?.nativeElement?.scrollLeft || 0;
+    } else {
+      return this.blockchainContainer?.nativeElement?.scrollLeft || 0;
+    }
+  }
+
+  addConvertedScrollOffset(offset: number): void {
+    if (!this.blockchainContainer?.nativeElement) {
+      return;
+    }
+    if (this.timeLtr) {
+      this.blockchainContainer.nativeElement.scrollLeft -= offset;
+    } else {
+      this.blockchainContainer.nativeElement.scrollLeft += offset;
+    }
+  }
+
  ngOnDestroy() {
    this.timeLtrSubscription.unsubscribe();
  }
--- a/frontend/src/app/interfaces/node-api.interface.ts
+++ b/frontend/src/app/interfaces/node-api.interface.ts
@ -122,8 +122,6 @@ export interface BlockExtension {
    name: string;
    slug: string;
  }
-
-  stage?: number; // Frontend only
 }

 export interface BlockExtended extends Block {