machankura/mempool
3
0
Fork 0
Code Issues Pull Requests Actions Packages Projects Releases Wiki Activity

Reduce thrashing while initializing blockchain scroll position

Browse Source
This commit is contained in:
Mononaut 2023-09-19 22:55:57 +00:00
parent b979594a04
commit b645ad3fd8
No known key found for this signature in database
GPG Key ID: A3F058E41374C04E
2 changed files with 85 additions and 61 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

2
frontend/src/app/components/blockchain/blockchain.component.ts
View File

@ -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 { firstValueFrom, Subscription } from 'rxjs';
import { StateService } from '../../services/state.service'; import { StateService } from '../../services/state.service';

144
frontend/src/app/components/start/start.component.ts
View File

@ -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 { Subscription } from 'rxjs';
import { MarkBlockState, StateService } from '../../services/state.service'; import { MarkBlockState, StateService } from '../../services/state.service';
import { specialBlocks } from '../../app.constants'; import { specialBlocks } from '../../app.constants';
@ -8,8 +8,9 @@ import { BlockExtended } from '../../interfaces/node-api.interface';
selector: 'app-start', selector: 'app-start',
templateUrl: './start.component.html', templateUrl: './start.component.html',
styleUrls: ['./start.component.scss'], styleUrls: ['./start.component.scss'],
changeDetection: ChangeDetectionStrategy.OnPush
}) })
export class StartComponent implements OnInit, OnDestroy, DoCheck { export class StartComponent implements OnInit, AfterViewChecked, OnDestroy {
@Input() showLoadingIndicator = false; @Input() showLoadingIndicator = false;
interval = 60; interval = 60;
@ -42,6 +43,7 @@ export class StartComponent implements OnInit, OnDestroy, DoCheck {
pageWidth: number; pageWidth: number;
firstPageWidth: number; firstPageWidth: number;
minScrollWidth: number; minScrollWidth: number;
currentScrollWidth: number = null;
pageIndex: number = 0; pageIndex: number = 0;
pages: any[] = []; pages: any[] = [];
pendingMark: number | null = null; pendingMark: number | null = null;
@ -49,9 +51,10 @@ export class StartComponent implements OnInit, OnDestroy, DoCheck {
lastUpdate: number = 0; lastUpdate: number = 0;
lastMouseX: number; lastMouseX: number;
velocity: number = 0; velocity: number = 0;
mempoolOffset: number = 0; mempoolOffset: number | null = null;
mempoolWidth: number = 0;
scrollLeft: number = null;
private resizeObserver: ResizeObserver;
chainWidth: number = window.innerWidth; chainWidth: number = window.innerWidth;
menuOpen: boolean = false; menuOpen: boolean = false;
menuSliding: boolean = false; menuSliding: boolean = false;
@ -59,19 +62,12 @@ export class StartComponent implements OnInit, OnDestroy, DoCheck {
constructor( constructor(
private stateService: StateService, private stateService: StateService,
private cd: ChangeDetectorRef,
) { ) {
this.isiOS = ['iPhone','iPod','iPad'].includes((navigator as any)?.userAgentData?.platform || navigator.platform); this.isiOS = ['iPhone','iPod','iPad'].includes((navigator as any)?.userAgentData?.platform || navigator.platform);
} }
ngDoCheck(): void { ngOnInit(): void {
if (this.pendingOffset != null) {
const offset = this.pendingOffset;
this.pendingOffset = null;
this.addConvertedScrollOffset(offset);
}
}
ngOnInit() {
this.firstPageWidth = 40 + (this.blockWidth * this.dynamicBlocksAmount); this.firstPageWidth = 40 + (this.blockWidth * this.dynamicBlocksAmount);
this.blockCounterSubscription = this.stateService.blocks$.subscribe((blocks) => { this.blockCounterSubscription = this.stateService.blocks$.subscribe((blocks) => {
this.blockCount = blocks.length; this.blockCount = blocks.length;
@ -122,7 +118,7 @@ export class StartComponent implements OnInit, OnDestroy, DoCheck {
this.scrollToBlock(scrollToHeight); this.scrollToBlock(scrollToHeight);
} }
} }
if (!this.tipIsSet || (blockHeight < 0 && !this.mempoolOffset)) { if (!this.tipIsSet || (blockHeight < 0 && this.mempoolOffset == null)) {
this.pendingMark = blockHeight; this.pendingMark = blockHeight;
} }
} }
@ -168,11 +164,41 @@ 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 { onMempoolOffsetChange(offset): void {
const delta = offset - this.mempoolOffset; this.pendingOffset = offset;
this.addConvertedScrollOffset(delta); }
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.markForCheck();
} }
applyPendingMarkArrow(): void { applyPendingMarkArrow(): void {
@ -191,6 +217,7 @@ export class StartComponent implements OnInit, OnDestroy, DoCheck {
window.clearTimeout(this.menuTimeout); window.clearTimeout(this.menuTimeout);
this.menuTimeout = window.setTimeout(() => { this.menuTimeout = window.setTimeout(() => {
this.menuSliding = false; this.menuSliding = false;
this.cd.markForCheck();
}, 300); }, 300);
} }
@ -200,24 +227,22 @@ export class StartComponent implements OnInit, OnDestroy, DoCheck {
this.isMobile = this.chainWidth <= 767.98; this.isMobile = this.chainWidth <= 767.98;
let firstVisibleBlock; let firstVisibleBlock;
let offset; 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.blocksPerPage = Math.ceil(this.chainWidth / this.blockWidth);
this.pageWidth = this.blocksPerPage * this.blockWidth; this.pageWidth = this.blocksPerPage * this.blockWidth;
this.minScrollWidth = this.firstPageWidth + (this.pageWidth * 2); this.minScrollWidth = this.firstPageWidth + (this.pageWidth * 2);
if (firstVisibleBlock != null) { if (firstVisibleBlock != null) {
this.scrollToBlock(firstVisibleBlock, offset + (this.isMobile ? this.blockWidth : 0)); this.scrollToBlock(firstVisibleBlock, offset);
} else { } else {
this.updatePages(); this.updatePages();
} }
@ -227,7 +252,7 @@ export class StartComponent implements OnInit, OnDestroy, DoCheck {
if (!(event.which > 1 || event.button > 0)) { if (!(event.which > 1 || event.button > 0)) {
this.mouseDragStartX = event.clientX; this.mouseDragStartX = event.clientX;
this.resetMomentum(event.clientX); this.resetMomentum(event.clientX);
this.blockchainScrollLeftInit = this.blockchainContainer.nativeElement.scrollLeft; this.blockchainScrollLeftInit = this.scrollLeft;
} }
} }
onPointerDown(event: PointerEvent) { onPointerDown(event: PointerEvent) {
@ -253,8 +278,8 @@ export class StartComponent implements OnInit, OnDestroy, DoCheck {
if (this.mouseDragStartX != null) { if (this.mouseDragStartX != null) {
this.updateVelocity(event.clientX); this.updateVelocity(event.clientX);
this.stateService.setBlockScrollingInProgress(true); 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', []) @HostListener('document:mouseup', [])
@ -310,25 +335,31 @@ export class StartComponent implements OnInit, OnDestroy, DoCheck {
} else { } else {
this.velocity += dv; this.velocity += dv;
} }
this.blockchainContainer.nativeElement.scrollLeft -= displacement; this.scrollLeft -= displacement;
this.applyScrollLeft();
this.animateMomentum(); this.animateMomentum();
} }
}); });
} }
onScroll(e) { 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]; const middlePage = this.pageIndex === 0 ? this.pages[0] : this.pages[1];
// compensate for css transform // compensate for css transform
const translation = (this.isMobile ? this.chainWidth * 0.95 : this.chainWidth * 0.5); const translation = (this.isMobile ? this.chainWidth * 0.95 : this.chainWidth * 0.5);
const backThreshold = middlePage.offset + (this.pageWidth * 0.5) + translation; const backThreshold = middlePage.offset + (this.pageWidth * 0.5) + translation;
const forwardThreshold = 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()) { if (this.shiftPagesBack()) {
this.addConvertedScrollOffset(-this.pageWidth); this.addConvertedScrollOffset(-this.pageWidth);
this.blockchainScrollLeftInit -= this.pageWidth; this.blockchainScrollLeftInit -= this.pageWidth;
} }
} else if (scrollLeft < forwardThreshold) { } else if (offsetScroll < forwardThreshold) {
if (this.shiftPagesForward()) { if (this.shiftPagesForward()) {
this.addConvertedScrollOffset(this.pageWidth); this.addConvertedScrollOffset(this.pageWidth);
this.blockchainScrollLeftInit += this.pageWidth; this.blockchainScrollLeftInit += this.pageWidth;
@ -337,10 +368,6 @@ export class StartComponent implements OnInit, OnDestroy, DoCheck {
} }
scrollToBlock(height, blockOffset = 0) { scrollToBlock(height, blockOffset = 0) {
if (!this.blockchainContainer?.nativeElement) {
setTimeout(() => { this.scrollToBlock(height, blockOffset); }, 50);
return;
}
if (this.isMobile) { if (this.isMobile) {
blockOffset -= this.blockWidth; blockOffset -= this.blockWidth;
} }
@ -348,15 +375,15 @@ export class StartComponent implements OnInit, OnDestroy, DoCheck {
const pages = []; const pages = [];
this.pageIndex = Math.max(viewingPageIndex - 1, 0); this.pageIndex = Math.max(viewingPageIndex - 1, 0);
let viewingPage = this.getPageAt(viewingPageIndex); let viewingPage = this.getPageAt(viewingPageIndex);
const isLastPage = viewingPage.height < this.blocksPerPage; const isLastPage = viewingPage.height <= 0;
if (isLastPage) { if (isLastPage) {
this.pageIndex = Math.max(viewingPageIndex - 2, 0); this.pageIndex = Math.max(viewingPageIndex - 2, 0);
viewingPage = this.getPageAt(viewingPageIndex); viewingPage = this.getPageAt(viewingPageIndex);
} }
const left = viewingPage.offset - this.getConvertedScrollOffset(); const left = viewingPage.offset - this.getConvertedScrollOffset(this.scrollLeft);
const blockIndex = viewingPage.height - height; const blockIndex = viewingPage.height - height;
const targetOffset = (this.blockWidth * blockIndex) + left; const targetOffset = (this.blockWidth * blockIndex) + left;
let deltaOffset = targetOffset - blockOffset; const deltaOffset = targetOffset - blockOffset;
if (isLastPage) { if (isLastPage) {
pages.push(this.getPageAt(viewingPageIndex - 2)); pages.push(this.getPageAt(viewingPageIndex - 2));
@ -386,6 +413,7 @@ export class StartComponent implements OnInit, OnDestroy, DoCheck {
pages.push(this.getPageAt(this.pageIndex + 1)); pages.push(this.getPageAt(this.pageIndex + 1));
pages.push(this.getPageAt(this.pageIndex + 2)); pages.push(this.getPageAt(this.pageIndex + 2));
this.pages = pages; this.pages = pages;
this.cd.markForCheck();
} }
shiftPagesBack(): boolean { shiftPagesBack(): boolean {
@ -439,44 +467,40 @@ export class StartComponent implements OnInit, OnDestroy, DoCheck {
blockInViewport(height: number): boolean { blockInViewport(height: number): boolean {
const firstHeight = this.pages[0].height; const firstHeight = this.pages[0].height;
const translation = (this.isMobile ? this.chainWidth * 0.95 : this.chainWidth * 0.5); 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); const xPos = firstX + ((firstHeight - height) * 155);
return xPos > -55 && xPos < (this.chainWidth - 100); return xPos > -55 && xPos < (this.chainWidth - 100);
} }
getConvertedScrollOffset(): number { getConvertedScrollOffset(scrollLeft): number {
if (this.timeLtr) { if (this.timeLtr) {
return -(this.blockchainContainer?.nativeElement?.scrollLeft || 0) - this.mempoolOffset; return -(scrollLeft || 0) - (this.mempoolOffset || 0);
} else { } else {
return (this.blockchainContainer?.nativeElement?.scrollLeft || 0) - this.mempoolOffset; return (scrollLeft || 0) - (this.mempoolOffset || 0);
} }
} }
setScrollLeft(offset: number): void { setScrollLeft(offset: number): void {
if (this.timeLtr) { if (this.timeLtr) {
this.blockchainContainer.nativeElement.scrollLeft = offset - this.mempoolOffset; this.scrollLeft = offset - (this.mempoolOffset || 0);
} else { } else {
this.blockchainContainer.nativeElement.scrollLeft = offset + this.mempoolOffset; this.scrollLeft = offset + (this.mempoolOffset || 0);
} }
this.applyScrollLeft();
} }
addConvertedScrollOffset(offset: number): void { addConvertedScrollOffset(offset: number): void {
if (!this.blockchainContainer?.nativeElement) {
this.pendingOffset = offset;
return;
}
if (this.timeLtr) { if (this.timeLtr) {
this.blockchainContainer.nativeElement.scrollLeft -= offset; this.scrollLeft -= offset;
} else { } else {
this.blockchainContainer.nativeElement.scrollLeft += offset; this.scrollLeft += offset;
} }
this.applyScrollLeft();
} }
ngOnDestroy() { 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.timeLtrSubscription.unsubscribe();
this.chainTipSubscription.unsubscribe(); this.chainTipSubscription.unsubscribe();
this.markBlockSubscription.unsubscribe(); this.markBlockSubscription.unsubscribe();