highperfocused/mempool
1
0
Fork 0
mirror of https://github.com/mempool/mempool.git synced 2025-04-09 12:30:13 +02:00
Code Issues Packages Projects Releases Wiki Activity

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

Browse Source 
Reduce blockchain jumping
This commit is contained in:
softsimon 2023-09-20 18:20:34 +04:00 committed by GitHub
commit bda361cf57
No known key found for this signature in database
GPG Key ID: 4AEE18F83AFDEB23
6 changed files with 133 additions and 83 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

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

@ -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;
}

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

@ -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>

10
frontend/src/app/components/blockchain/blockchain.component.scss
View File

@ -26,15 +26,7 @@
position: absolute;
left: 0;
top: 75px;
--divider-offset: 50vw;
--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)));
}
transform: translateX(1280px);
}
.black-background {

38
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 { 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;
mempoolOffset: number = 0;
dividerOffset: number | null = null;
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.cd.markForCheck();
this.mempoolOffset = Math.max(0, width - (this.dividerOffset || 0));
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();
}
}

10
frontend/src/app/components/mempool-blocks/mempool-blocks.component.ts
View File

@ -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) {

154
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 { 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;
this.addConvertedScrollOffset(delta);
this.mempoolOffset = offset;
this.applyPendingMarkArrow();
if (offset !== this.mempoolOffset) {
this.pendingOffset = offset;
}
}
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 => {
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.pages.forEach(page => {
const left = page.offset - this.getConvertedScrollOffset(this.scrollLeft);
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(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.blockchainScrollLeftInit + this.mouseDragStartX - event.clientX;
this.scrollLeft = 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();
if (scrollLeft > backThreshold) {
this.scrollLeft = this.blockchainContainer.nativeElement.scrollLeft;
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
this.setScrollLeft(0);
}
// clean up scroll position to prevent caching wrong scroll in Firefox
this.setScrollLeft(0);
this.timeLtrSubscription.unsubscribe();
this.chainTipSubscription.unsubscribe();
this.markBlockSubscription.unsubscribe();