diff --git a/frontend/src/app/components/block-overview-graph/block-overview-graph.component.scss b/frontend/src/app/components/block-overview-graph/block-overview-graph.component.scss index 05b9b340a..58b53aebf 100644 --- a/frontend/src/app/components/block-overview-graph/block-overview-graph.component.scss +++ b/frontend/src/app/components/block-overview-graph/block-overview-graph.component.scss @@ -26,6 +26,7 @@ .loader-wrapper { position: absolute; + background: #181b2d7f; left: 0; right: 0; top: 0; diff --git a/frontend/src/app/components/block-overview-graph/block-overview-graph.component.ts b/frontend/src/app/components/block-overview-graph/block-overview-graph.component.ts index a458ebd5f..e2774ac03 100644 --- a/frontend/src/app/components/block-overview-graph/block-overview-graph.component.ts +++ b/frontend/src/app/components/block-overview-graph/block-overview-graph.component.ts @@ -68,6 +68,21 @@ export class BlockOverviewGraphComponent implements AfterViewInit, OnDestroy { this.start(); } + destroy(): void { + if (this.scene) { + this.scene.destroy(); + this.start(); + } + } + + // initialize the scene without any entry transition + setup(transactions: TransactionStripped[]): void { + if (this.scene) { + this.scene.setup(transactions); + this.start(); + } + } + enter(transactions: TransactionStripped[], direction: string): void { if (this.scene) { this.scene.enter(transactions, direction); diff --git a/frontend/src/app/components/block-overview-graph/block-scene.ts b/frontend/src/app/components/block-overview-graph/block-scene.ts index fc5bfff8e..af64c0f20 100644 --- a/frontend/src/app/components/block-overview-graph/block-scene.ts +++ b/frontend/src/app/components/block-overview-graph/block-scene.ts @@ -29,10 +29,6 @@ export default class BlockScene { this.init({ width, height, resolution, blockLimit, orientation, flip, vertexArray }); } - destroy(): void { - Object.values(this.txs).forEach(tx => tx.destroy()); - } - resize({ width = this.width, height = this.height }: { width?: number, height?: number}): void { this.width = width; this.height = height; @@ -46,6 +42,36 @@ export default class BlockScene { } } + // Destroy the current layout and clean up graphics sprites without any exit animation + destroy(): void { + Object.values(this.txs).forEach(tx => tx.destroy()); + this.txs = {}; + this.layout = null; + } + + // set up the scene with an initial set of transactions, without any transition animation + setup(txs: TransactionStripped[]) { + // clean up any old transactions + Object.values(this.txs).forEach(tx => { + tx.destroy(); + delete this.txs[tx.txid]; + }); + this.layout = new BlockLayout({ width: this.gridWidth, height: this.gridHeight }); + txs.forEach(tx => { + const txView = new TxView(tx, this.vertexArray); + this.txs[tx.txid] = txView; + this.place(txView); + this.saveGridToScreenPosition(txView); + this.applyTxUpdate(txView, { + display: { + position: txView.screenPosition, + color: txView.getColor() + }, + duration: 0 + }); + }); + } + // Animate new block entering scene enter(txs: TransactionStripped[], direction) { this.replace(txs, direction); diff --git a/frontend/src/app/components/block/block.component.ts b/frontend/src/app/components/block/block.component.ts index 3ff65c9df..3eb8c5bb0 100644 --- a/frontend/src/app/components/block/block.component.ts +++ b/frontend/src/app/components/block/block.component.ts @@ -2,9 +2,9 @@ import { Component, OnInit, OnDestroy, ViewChild, ElementRef } from '@angular/co import { Location } from '@angular/common'; import { ActivatedRoute, ParamMap, Router } from '@angular/router'; import { ElectrsApiService } from '../../services/electrs-api.service'; -import { switchMap, tap, debounceTime, catchError, map, shareReplay, startWith, pairwise } from 'rxjs/operators'; +import { switchMap, tap, throttleTime, catchError, map, shareReplay, startWith, pairwise } from 'rxjs/operators'; import { Transaction, Vout } from '../../interfaces/electrs.interface'; -import { Observable, of, Subscription } from 'rxjs'; +import { Observable, of, Subscription, asyncScheduler } from 'rxjs'; import { StateService } from '../../services/state.service'; import { SeoService } from 'src/app/services/seo.service'; import { WebsocketService } from 'src/app/services/websocket.service'; @@ -33,7 +33,6 @@ export class BlockComponent implements OnInit, OnDestroy { strippedTransactions: TransactionStripped[]; overviewTransitionDirection: string; isLoadingOverview = true; - isAwaitingOverview = true; error: any; blockSubsidy: number; fees: number; @@ -127,6 +126,7 @@ export class BlockComponent implements OnInit, OnDestroy { return of(history.state.data.block); } else { this.isLoadingBlock = true; + this.isLoadingOverview = true; let blockInCache: BlockExtended; if (isBlockHeight) { @@ -181,12 +181,9 @@ export class BlockComponent implements OnInit, OnDestroy { this.transactions = null; this.transactionsError = null; this.isLoadingOverview = true; - this.isAwaitingOverview = true; - this.overviewError = true; - if (this.blockGraph) { - this.blockGraph.exit(direction); - } + this.overviewError = null; }), + throttleTime(300, asyncScheduler, { leading: true, trailing: true }), shareReplay(1) ); this.transactionSubscription = block$.pipe( @@ -204,11 +201,6 @@ export class BlockComponent implements OnInit, OnDestroy { } this.transactions = transactions; this.isLoadingTransactions = false; - - if (!this.isAwaitingOverview && this.blockGraph && this.strippedTransactions && this.overviewTransitionDirection) { - this.isLoadingOverview = false; - this.blockGraph.replace(this.strippedTransactions, this.overviewTransitionDirection, false); - } }, (error) => { this.error = error; @@ -236,18 +228,19 @@ export class BlockComponent implements OnInit, OnDestroy { ), ) .subscribe(({transactions, direction}: {transactions: TransactionStripped[], direction: string}) => { - this.isAwaitingOverview = false; this.strippedTransactions = transactions; - this.overviewTransitionDirection = direction; - if (!this.isLoadingTransactions && this.blockGraph) { - this.isLoadingOverview = false; - this.blockGraph.replace(this.strippedTransactions, this.overviewTransitionDirection, false); + this.isLoadingOverview = false; + if (this.blockGraph) { + this.blockGraph.destroy(); + this.blockGraph.setup(this.strippedTransactions); } }, (error) => { this.error = error; this.isLoadingOverview = false; - this.isAwaitingOverview = false; + if (this.blockGraph) { + this.blockGraph.destroy(); + } }); this.networkChangedSubscription = this.stateService.networkChanged$ diff --git a/frontend/src/app/components/language-selector/language-selector.component.html b/frontend/src/app/components/language-selector/language-selector.component.html index 81fcc8985..dee1e3acb 100644 --- a/frontend/src/app/components/language-selector/language-selector.component.html +++ b/frontend/src/app/components/language-selector/language-selector.component.html @@ -1,4 +1,4 @@ -
+
diff --git a/frontend/src/app/dashboard/dashboard.component.html b/frontend/src/app/dashboard/dashboard.component.html index 4eb95c1ca..c66750f70 100644 --- a/frontend/src/app/dashboard/dashboard.component.html +++ b/frontend/src/app/dashboard/dashboard.component.html @@ -1,8 +1,8 @@
- -
+ +
Transaction Fees
@@ -10,172 +10,135 @@
-
+
-
-
-
+ +
+
+
+
-
-
-
-
-
-
- -
-
-
- - - -
-
Transaction Fees
-
-
- -
-
-
-
- -
- -
-
-
-
- -
-
- - -
- -
- - - - - -
-
-
-
-
-
-
-
- - - - - - - - -
- - - - - {{ group.name }} -
-
- -
- -
-
+ + +
+ +
+ + + + +
- -
-
-
- -
Latest blocks
-   - - - - - - - - - - + +
+
+
+ +
+
+
HeightMinedPoolTXsSize
- - - - + - - +
{{ block.height }} - - - {{ block.extras.pool.name }} +
+ + {{ block.tx_count | number }} -
-
 
-
-
+ 		+ {{ group.name }}
+ +
+ +
+
-
-
-
-
Latest transactions
- - - - - - - - - - - - - - - -
TXIDAmountUSDFee
{{ transaction.txid | shortenString : 10 }}Confidential{{ transaction.fee / transaction.vsize | feeRounding }} sat/vB
-
-
-
- - -
- - +
+
+
+ +
Latest blocks
+   + + + + + + + + + + + + + + + + + + + +
HeightMinedPoolTXsSize
{{ block.height }} + + + {{ block.extras.pool.name }} + + {{ block.tx_count | number }} +
+
 
+
+
+
+
+
+
+
+
+
+
Latest transactions
+ + + + + + + + + + + + + + + +
TXIDAmountUSDFee
{{ transaction.txid | shortenString : 10 }}Confidential{{ transaction.fee / transaction.vsize | feeRounding }} sat/vB
+
 
+
+
+
+
diff --git a/frontend/src/app/dashboard/dashboard.component.ts b/frontend/src/app/dashboard/dashboard.component.ts index 910d6a81a..68c4ff35a 100644 --- a/frontend/src/app/dashboard/dashboard.component.ts +++ b/frontend/src/app/dashboard/dashboard.component.ts @@ -33,7 +33,6 @@ interface MempoolStatsData { changeDetection: ChangeDetectionStrategy.OnPush }) export class DashboardComponent implements OnInit { - collapseLevel: string; featuredAssets$: Observable; network$: Observable; mempoolBlocksData$: Observable; @@ -63,7 +62,6 @@ export class DashboardComponent implements OnInit { this.seoService.resetTitle(); this.websocketService.want(['blocks', 'stats', 'mempool-blocks', 'live-2h-chart']); this.network$ = merge(of(''), this.stateService.networkChanged$); - this.collapseLevel = this.storageService.getValue('dashboard-collapsed') || 'one'; this.mempoolLoadingStatus$ = this.stateService.loadingIndicators$ .pipe( map((indicators) => indicators.mempool !== undefined ? indicators.mempool : 100) @@ -230,15 +228,4 @@ export class DashboardComponent implements OnInit { trackByBlock(index: number, block: BlockExtended) { return block.height; } - - toggleCollapsed() { - if (this.collapseLevel === 'one') { - this.collapseLevel = 'two'; - } else if (this.collapseLevel === 'two') { - this.collapseLevel = 'three'; - } else { - this.collapseLevel = 'one'; - } - this.storageService.setValue('dashboard-collapsed', this.collapseLevel); - } }