mirrors/mempool
1
0
Fork 0
mirror of https://github.com/mempool/mempool.git synced 2024-11-20 10:21:52 +01:00
Code Issues Projects Releases Wiki Activity

Merge pull request #2418 from mempool/nymkappa/bugfix/node-page-js-error

Browse Source 
Fix js crash in node page and add loading spinner to channel tree chart
This commit is contained in:
wiz 2022-08-28 16:33:12 +02:00 committed by GitHub
commit 49813c9629
No known key found for this signature in database
GPG Key ID: 4AEE18F83AFDEB23
5 changed files with 37 additions and 11 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

2
frontend/src/app/lightning/channels-list/channels-list.component.html
View File

@ -87,8 +87,6 @@
</ng-template> </ng-template>
<ng-template #skeleton> <ng-template #skeleton>
<h2 class="float-left" i18n="lightning.channels">Channels</h2>
<table class="table table-borderless"> <table class="table table-borderless">
<ng-container *ngTemplateOutlet="tableHeader"></ng-container> <ng-container *ngTemplateOutlet="tableHeader"></ng-container>
<tbody> <tbody>

1
frontend/src/app/lightning/node/node.component.html
View File

@ -131,7 +131,6 @@
<app-node-statistics-chart [publicKey]="node.public_key"></app-node-statistics-chart> <app-node-statistics-chart [publicKey]="node.public_key"></app-node-statistics-chart>
</div> </div>
<h2 i18n="lightning.active-channels-map">Active channels map</h2>
<app-node-channels style="display:block;margin-bottom: 40px" [publicKey]="node.public_key"></app-node-channels> <app-node-channels style="display:block;margin-bottom: 40px" [publicKey]="node.public_key"></app-node-channels>
<div class="d-flex justify-content-between"> <div class="d-flex justify-content-between">

9
frontend/src/app/lightning/nodes-channels/node-channels.component.html
View File

@ -1,2 +1,9 @@
<div *ngIf="channelsObservable$ | async" echarts [initOpts]="chartInitOptions" [options]="chartOptions" (chartInit)="onChartInit($event)"> <div *ngIf="channelsObservable$ | async" style="min-height: 455px">
<h2 i18n="lightning.active-channels-map">Active channels map</h2>
<div echarts [initOpts]="chartInitOptions" [options]="chartOptions" (chartInit)="onChartInit($event)">
</div>
</div>
<div *ngIf="isLoading" class="text-center loading-spinner">
<div class="spinner-border text-light"></div>
</div> </div>

9
frontend/src/app/lightning/nodes-channels/node-channels.component.scss
View File

@ -0,0 +1,9 @@
.loading-spinner {
min-height: 455px;
z-index: 100;
}
.spinner-border {
position: relative;
top: 225px;
}

27
frontend/src/app/lightning/nodes-channels/node-channels.component.ts
View File

@ -1,8 +1,8 @@
import { formatNumber } from '@angular/common'; import { formatNumber } from '@angular/common';
import { ChangeDetectionStrategy, Component, Inject, Input, LOCALE_ID, NgZone, OnChanges, OnInit } from '@angular/core'; import { ChangeDetectionStrategy, Component, Inject, Input, LOCALE_ID, NgZone, OnChanges } from '@angular/core';
import { Router } from '@angular/router'; import { Router } from '@angular/router';
import { ECharts, EChartsOption, TreemapSeriesOption } from 'echarts'; import { ECharts, EChartsOption, TreemapSeriesOption } from 'echarts';
import { Observable, tap } from 'rxjs'; import { Observable, share, switchMap, tap } from 'rxjs';
import { lerpColor } from 'src/app/shared/graphs.utils'; import { lerpColor } from 'src/app/shared/graphs.utils';
import { AmountShortenerPipe } from 'src/app/shared/pipes/amount-shortener.pipe'; import { AmountShortenerPipe } from 'src/app/shared/pipes/amount-shortener.pipe';
import { LightningApiService } from '../lightning-api.service'; import { LightningApiService } from '../lightning-api.service';
@ -25,7 +25,7 @@ export class NodeChannels implements OnChanges {
}; };
channelsObservable$: Observable<any>; channelsObservable$: Observable<any>;
isLoading: true; isLoading = true;
constructor( constructor(
@Inject(LOCALE_ID) public locale: string, @Inject(LOCALE_ID) public locale: string,
@ -41,9 +41,20 @@ export class NodeChannels implements OnChanges {
this.channelsObservable$ = this.lightningApiService.getChannelsByNodeId$(this.publicKey, -1, 'active') this.channelsObservable$ = this.lightningApiService.getChannelsByNodeId$(this.publicKey, -1, 'active')
.pipe( .pipe(
tap((response) => { switchMap((response) => {
const biggestCapacity = response.body[0].capacity; this.isLoading = true;
this.prepareChartOptions(response.body.map(channel => { if ((response.body?.length ?? 0) <= 0) {
return [];
}
return [response.body];
}),
tap((body: any[]) => {
if (body.length === 0) {
this.isLoading = false;
return;
}
const biggestCapacity = body[0].capacity;
this.prepareChartOptions(body.map(channel => {
return { return {
name: channel.node.alias, name: channel.node.alias,
value: channel.capacity, value: channel.capacity,
@ -54,7 +65,9 @@ export class NodeChannels implements OnChanges {
} }
}; };
})); }));
}) this.isLoading = false;
}),
share(),
); );
} }