Merge pull request #2315 from mempool/nykappa/feature/node-ranking

Refactor top nodes widgets, create related top 100 nodes pages

frontend/src/app/lightning/lightning-api.service.ts

@@ -2,6 +2,7 @@ import { Injectable } from '@angular/core';
 import { HttpClient, HttpParams } from '@angular/common/http';
 import { Observable } from 'rxjs';
 import { StateService } from '../services/state.service';
+import { INodesRanking, ITopNodesPerCapacity, ITopNodesPerChannels } from '../interfaces/node-api.interface';
 
 @Injectable({
   providedIn: 'root'
@@ -48,8 +49,8 @@ export class LightningApiService {
     return this.httpClient.get<any>(this.apiBasePath + '/api/v1/lightning/nodes/' + publicKey + '/statistics');
   }
 
-  listTopNodes$(): Observable<any> {
-    return this.httpClient.get<any>(this.apiBasePath + '/api/v1/lightning/nodes/top');
+  getNodesRanking$(): Observable<INodesRanking> {
+    return this.httpClient.get<INodesRanking>(this.apiBasePath + '/api/v1/lightning/nodes/rankings');
   }
 
   listChannelStats$(publicKey: string): Observable<any> {
@@ -62,4 +63,16 @@ export class LightningApiService {
       (interval !== undefined ? `/${interval}` : ''), { observe: 'response' }
     );
   }
+
+  getTopNodesByCapacity$(): Observable<ITopNodesPerCapacity[]> {
+    return this.httpClient.get<ITopNodesPerCapacity[]>(
+      this.apiBasePath + '/api/v1/lightning/nodes/rankings/capacity'
+    );
+  }
+
+  getTopNodesByChannels$(): Observable<ITopNodesPerChannels[]> {
+    return this.httpClient.get<ITopNodesPerChannels[]>(
+      this.apiBasePath + '/api/v1/lightning/nodes/rankings/channels'
+    );
+  }
 }

frontend/src/app/lightning/lightning-dashboard/lightning-dashboard.component.html

@@ -56,9 +56,13 @@
     <div class="col">
       <div class="card">
         <div class="card-body">
-          <h5 class="card-title">Top Capacity Nodes</h5>
-          <app-nodes-list [nodes$]="nodesByCapacity$" [show]="'mobile-capacity'"></app-nodes-list>
-          <!-- <div><a [routerLink]="['/lightning/nodes' | relativeUrl]" i18n="dashboard.view-more">View more &raquo;</a></div> -->
+          <a class="title-link" href="" [routerLink]="['/lightning/nodes/top-capacity' | relativeUrl]">
+            <h5 class="card-title d-inline" i18n="lightning.top-capacity-nodes">Top capacity nodes</h5>
+            <span>&nbsp;</span>
+            <fa-icon [icon]="['fas', 'external-link-alt']" [fixedWidth]="true" style="vertical-align: 'text-top'; font-size: 13px; color: '#4a68b9'"></fa-icon>
+          </a>
+          <h5 class="card-title"></h5>
+          <app-top-nodes-per-capacity [nodes$]="nodesRanking$" [widget]="true"></app-top-nodes-per-capacity>
         </div>
       </div>
     </div>
@@ -66,9 +70,12 @@
     <div class="col">
       <div class="card">
         <div class="card-body">
-          <h5 class="card-title">Most Connected Nodes</h5>
-          <app-nodes-list [nodes$]="nodesByChannels$" [show]="'mobile-channels'"></app-nodes-list>
-          <!-- <div><a [routerLink]="['/lightning/nodes' | relativeUrl]" i18n="dashboard.view-more">View more &raquo;</a></div> -->
+          <a class="title-link" href="" [routerLink]="['/lightning/nodes/top-channels' | relativeUrl]">
+            <h5 class="card-title d-inline" i18n="lightning.top-channels-nodes">Most connected nodes</h5>
+            <span>&nbsp;</span>
+            <fa-icon [icon]="['fas', 'external-link-alt']" [fixedWidth]="true" style="vertical-align: 'text-top'; font-size: 13px; color: '#4a68b9'"></fa-icon>
+          </a>
+          <app-top-nodes-per-channels [nodes$]="nodesRanking$" [widget]="true"></app-top-nodes-per-channels>
         </div>
       </div>
     </div>

frontend/src/app/lightning/lightning-dashboard/lightning-dashboard.component.ts

@@ -1,6 +1,7 @@
 import { ChangeDetectionStrategy, Component, OnInit } from '@angular/core';
 import { Observable } from 'rxjs';
-import { map, share } from 'rxjs/operators';
+import { share } from 'rxjs/operators';
+import { INodesRanking } from 'src/app/interfaces/node-api.interface';
 import { SeoService } from 'src/app/services/seo.service';
 import { LightningApiService } from '../lightning-api.service';
 
@@ -11,9 +12,8 @@ import { LightningApiService } from '../lightning-api.service';
   changeDetection: ChangeDetectionStrategy.OnPush,
 })
 export class LightningDashboardComponent implements OnInit {
-  nodesByCapacity$: Observable<any>;
-  nodesByChannels$: Observable<any>;
   statistics$: Observable<any>;
+  nodesRanking$: Observable<INodesRanking>;
 
   constructor(
     private lightningApiService: LightningApiService,
@@ -23,18 +23,7 @@ export class LightningDashboardComponent implements OnInit {
   ngOnInit(): void {
     this.seoService.setTitle($localize`Lightning Dashboard`);
 
-    const sharedObservable = this.lightningApiService.listTopNodes$().pipe(share());
-
-    this.nodesByCapacity$ = sharedObservable
-      .pipe(
-        map((object) => object.topByCapacity),
-      );
-
-    this.nodesByChannels$ = sharedObservable
-      .pipe(
-        map((object) => object.topByChannels),
-      );
-
+    this.nodesRanking$ = this.lightningApiService.getNodesRanking$().pipe(share());
     this.statistics$ = this.lightningApiService.getLatestStatistics$().pipe(share());
   }
 

frontend/src/app/lightning/lightning.module.ts

@@ -24,6 +24,9 @@ import { NodesPerISP } from './nodes-per-isp/nodes-per-isp.component';
 import { NodesPerCountryChartComponent } from '../lightning/nodes-per-country-chart/nodes-per-country-chart.component';
 import { NodesMap } from '../lightning/nodes-map/nodes-map.component';
 import { NodesChannelsMap } from '../lightning/nodes-channels-map/nodes-channels-map.component';
+import { NodesRanking } from '../lightning/nodes-ranking/nodes-ranking.component';
+import { TopNodesPerChannels } from '../lightning/nodes-ranking/top-nodes-per-channels/top-nodes-per-channels.component';
+import { TopNodesPerCapacity } from '../lightning/nodes-ranking/top-nodes-per-capacity/top-nodes-per-capacity.component';
 @NgModule({
   declarations: [
     LightningDashboardComponent,
@@ -45,6 +48,9 @@ import { NodesChannelsMap } from '../lightning/nodes-channels-map/nodes-channels
     NodesPerCountryChartComponent,
     NodesMap,
     NodesChannelsMap,
+    NodesRanking,
+    TopNodesPerChannels,
+    TopNodesPerCapacity,
   ],
   imports: [
     CommonModule,
@@ -73,6 +79,9 @@ import { NodesChannelsMap } from '../lightning/nodes-channels-map/nodes-channels
     NodesPerCountryChartComponent,
     NodesMap,
     NodesChannelsMap,
+    NodesRanking,
+    TopNodesPerChannels,
+    TopNodesPerCapacity,
   ],
   providers: [
     LightningApiService,

frontend/src/app/lightning/lightning.routing.module.ts

@@ -6,6 +6,7 @@ import { NodeComponent } from './node/node.component';
 import { ChannelComponent } from './channel/channel.component';
 import { NodesPerCountry } from './nodes-per-country/nodes-per-country.component';
 import { NodesPerISP } from './nodes-per-isp/nodes-per-isp.component';
+import { NodesRanking } from './nodes-ranking/nodes-ranking.component';
 
 const routes: Routes = [
     {
@@ -32,6 +33,20 @@ const routes: Routes = [
           path: 'nodes/isp/:isp',
           component: NodesPerISP,
         },
+        {
+          path: 'nodes/top-capacity',
+          component: NodesRanking,
+          data: {
+            type: 'capacity'
+          },
+        },
+        {
+          path: 'nodes/top-channels',
+          component: NodesRanking,
+          data: {
+            type: 'channels'
+          },
+        },
         {
           path: '**',
           redirectTo: ''

frontend/src/app/lightning/nodes-ranking/nodes-ranking.component.html

@@ -0,0 +1,5 @@
+<app-top-nodes-per-capacity [nodes$]="null" [widget]="false" *ngIf="type === 'capacity'">
+</app-top-nodes-per-capacity>
+
+<app-top-nodes-per-channels [nodes$]="null" [widget]="false" *ngIf="type === 'channels'">
+</app-top-nodes-per-channels>

frontend/src/app/lightning/nodes-ranking/nodes-ranking.component.ts

@@ -0,0 +1,20 @@
+import { ChangeDetectionStrategy, Component, OnInit } from '@angular/core';
+import { ActivatedRoute } from '@angular/router';
+
+@Component({
+  selector: 'app-nodes-ranking',
+  templateUrl: './nodes-ranking.component.html',
+  styleUrls: ['./nodes-ranking.component.scss'],
+  changeDetection: ChangeDetectionStrategy.OnPush,
+})
+export class NodesRanking implements OnInit {
+  type: string;
+
+  constructor(private route: ActivatedRoute) {}
+
+  ngOnInit(): void {
+    this.route.data.subscribe(data => {
+      this.type = data.type;
+    });
+  }
+}

frontend/src/app/lightning/nodes-ranking/top-nodes-per-capacity/top-nodes-per-capacity.component.html

@@ -0,0 +1,71 @@
+<div [class]="!widget ? 'container-xl full-height' : ''">
+  <h1 *ngIf="!widget" class="float-left" i18n="lightning.top-100-capacity">
+    <span>Top 100 nodes by capacity</span>
+  </h1>
+
+  <div [class]="widget ? 'widget' : 'full'">
+    <table class="table table-borderless">
+      <thead>
+        <th class="rank"></th>
+        <th class="alias text-left" i18n="nodes.alias">Alias</th>
+        <th class="capacity text-right" i18n="node.capacity">Capacity</th>
+        <th *ngIf="!widget" class="channels text-right" i18n="lightning.channels">Channels</th>
+        <th *ngIf="!widget" class="timestamp-first text-left" i18n="lightning.first_seen">First seen</th>
+        <th *ngIf="!widget" class="timestamp-update text-left" i18n="lightning.last_update">Last update</th>
+        <th *ngIf="!widget" class="location text-right" i18n="lightning.location">Location</th>
+      </thead>
+      <tbody *ngIf="topNodesPerCapacity$ | async as nodes; else skeleton">
+        <tr *ngFor="let node of nodes; let i = index;">
+          <td class="rank text-left">
+            {{ i + 1 }}
+          </td>
+          <td class="alias text-left">
+            <a [routerLink]="['/lightning/node' | relativeUrl, node.publicKey]">{{ node.alias }}</a>
+          </td>
+          <td class="capacity text-right">
+            <app-amount [satoshis]="node.capacity" [digitsInfo]="'1.2-2'" [noFiat]="true"></app-amount>
+          </td>
+          <td *ngIf="!widget" class="channels text-right">
+            {{ node.channels | number }}
+          </td>
+          <td *ngIf="!widget" class="timestamp-first text-left">
+            <app-timestamp [customFormat]="'yyyy-MM-dd'" [unixTime]="node.firstSeen"></app-timestamp>
+          </td>
+          <td *ngIf="!widget" class="timestamp-update text-left">
+            <app-timestamp [customFormat]="'yyyy-MM-dd'" [unixTime]="node.updatedAt"></app-timestamp>
+          </td>
+          <td *ngIf="!widget" class="location text-right text-truncate">
+            {{ node?.city?.en ?? '-' }}
+          </td>
+        </tr>
+      </tbody>
+      <ng-template #skeleton>
+        <tbody>
+          <tr *ngFor="let item of skeletonRows">
+            <td class="rank text-left">
+              <span class="skeleton-loader"></span>
+            </td>
+            <td class="alias text-left">
+              <span class="skeleton-loader"></span>
+            </td>
+            <td class="capacity text-right">
+              <span class="skeleton-loader"></span>
+            </td>
+            <td *ngIf="!widget" class="channels text-right">
+              <span class="skeleton-loader"></span>
+            </td>
+            <td *ngIf="!widget" class="timestamp-first text-left">
+              <span class="skeleton-loader"></span>
+            </td>
+            <td *ngIf="!widget" class="timestamp-update text-left">
+              <span class="skeleton-loader"></span>
+            </td>
+            <td *ngIf="!widget" class="location text-right text-truncate">
+              <span class="skeleton-loader"></span>
+            </td>
+          </tr>
+        </tbody>
+      </ng-template>
+    </table>
+  </div>
+</div>

frontend/src/app/lightning/nodes-ranking/top-nodes-per-capacity/top-nodes-per-capacity.component.scss

@@ -0,0 +1,84 @@
+.container-xl {
+  max-width: 1400px;
+  padding-bottom: 100px;
+  @media (min-width: 767.98px) {
+    padding-left: 50px;
+    padding-right: 50px;
+  }
+}
+
+.table td, .table th {
+  padding: 0.5rem;
+}
+
+.full .rank {
+  width: 5%;
+}
+.widget .rank {
+  @media (min-width: 767.98px) {
+    width: 13%;
+  }
+  @media (max-width: 767.98px) {
+    padding-left: 0px;
+    padding-right: 0px;
+  }
+}
+
+.full .alias {
+  width: 10%;
+  overflow: hidden;
+  text-overflow: ellipsis;
+  max-width: 350px;
+  @media (max-width: 767.98px) {
+    max-width: 175px;
+  }
+}
+.widget .alias {
+  width: 55%;
+  overflow: hidden;
+  text-overflow: ellipsis;
+  max-width: 350px;
+  @media (max-width: 767.98px) {
+    max-width: 175px;
+  }
+}
+
+.full .capacity {
+  width: 10%;
+}
+.widget .capacity {
+  width: 32%;
+  @media (max-width: 767.98px) {
+    padding-left: 0px;
+    padding-right: 0px;
+  }
+}
+
+.full .channels {
+  width: 15%;
+  padding-right: 50px;
+  @media (max-width: 767.98px) {
+    display: none;
+  }
+}
+
+.full .timestamp-first {
+  width: 15%;
+  @media (max-width: 767.98px) {
+    display: none;
+  }
+}
+
+.full .timestamp-update {
+  width: 15%;
+  @media (max-width: 767.98px) {
+    display: none;
+  }
+}
+
+.full .location {
+  width: 10%;
+  @media (max-width: 767.98px) {
+    display: none;
+  }
+}

frontend/src/app/lightning/nodes-ranking/top-nodes-per-capacity/top-nodes-per-capacity.component.ts

@@ -0,0 +1,37 @@
+import { ChangeDetectionStrategy, Component, Input, OnInit } from '@angular/core';
+import { map, Observable } from 'rxjs';
+import { INodesRanking, ITopNodesPerCapacity } from 'src/app/interfaces/node-api.interface';
+import { LightningApiService } from '../../lightning-api.service';
+
+@Component({
+  selector: 'app-top-nodes-per-capacity',
+  templateUrl: './top-nodes-per-capacity.component.html',
+  styleUrls: ['./top-nodes-per-capacity.component.scss'],
+  changeDetection: ChangeDetectionStrategy.OnPush,
+})
+export class TopNodesPerCapacity implements OnInit {
+  @Input() nodes$: Observable<INodesRanking>;
+  @Input() widget: boolean = false;
+  
+  topNodesPerCapacity$: Observable<ITopNodesPerCapacity[]>;
+  skeletonRows: number[] = [];
+
+  constructor(private apiService: LightningApiService) {}
+
+  ngOnInit(): void {
+    for (let i = 1; i <= (this.widget ? 10 : 100); ++i) {
+      this.skeletonRows.push(i);
+    }
+
+    if (this.widget === false) {
+      this.topNodesPerCapacity$ = this.apiService.getTopNodesByCapacity$();
+    } else {
+      this.topNodesPerCapacity$ = this.nodes$.pipe(
+        map((ranking) => {
+          return ranking.topByCapacity.slice(0, 10);
+        })
+      );
+    }
+  }
+
+}

frontend/src/app/lightning/nodes-ranking/top-nodes-per-channels/top-nodes-per-channels.component.html

@@ -0,0 +1,71 @@
+<div [class]="!widget ? 'container-xl full-height' : ''">
+  <h1 *ngIf="!widget" class="float-left" i18n="lightning.top-100-channel">
+    <span>Top 100 nodes by channel count</span>
+  </h1>
+
+  <div [class]="widget ? 'widget' : 'full'">
+    <table class="table table-borderless">
+      <thead>
+        <th class="rank"></th>
+        <th class="alias text-left" i18n="nodes.alias">Alias</th>
+        <th class="channels text-right" i18n="node.channels">Channels</th>
+        <th *ngIf="!widget" class="capacity text-right" i18n="lightning.capacity">Capacity</th>
+        <th *ngIf="!widget" class="timestamp-first text-left" i18n="lightning.first_seen">First seen</th>
+        <th *ngIf="!widget" class="timestamp-update text-left" i18n="lightning.last_update">Last update</th>
+        <th *ngIf="!widget" class="location text-right" i18n="lightning.location">Location</th>
+      </thead>
+      <tbody *ngIf="topNodesPerChannels$ | async as nodes; else skeleton">
+        <tr *ngFor="let node of nodes; let i = index;">
+          <td class="rank text-left">
+            {{ i + 1 }}
+          </td>
+          <td class="alias text-left">
+            <a [routerLink]="['/lightning/node' | relativeUrl, node.publicKey]">{{ node.alias }}</a>
+          </td>
+          <td class="channels text-right">
+            {{ node.channels | number }}
+          </td>
+          <td *ngIf="!widget" class="capacity text-right">
+            <app-amount [satoshis]="node.capacity" [digitsInfo]="'1.2-2'" [noFiat]="true"></app-amount>
+          </td>
+          <td *ngIf="!widget" class="timestamp-first text-left">
+            <app-timestamp [customFormat]="'yyyy-MM-dd'" [unixTime]="node.firstSeen"></app-timestamp>
+          </td>
+          <td *ngIf="!widget" class="timestamp-update text-left">
+            <app-timestamp [customFormat]="'yyyy-MM-dd'" [unixTime]="node.updatedAt"></app-timestamp>
+          </td>
+          <td *ngIf="!widget" class="location text-right text-truncate">
+            {{ node?.city?.en ?? '-' }}
+          </td>
+        </tr>
+      </tbody>
+      <ng-template #skeleton>
+        <tbody>
+          <tr *ngFor="let item of skeletonRows">
+            <td class="rank text-left">
+              <span class="skeleton-loader"></span>
+            </td>
+            <td class="alias text-left">
+              <span class="skeleton-loader"></span>
+            </td>
+            <td class="channels text-right">
+              <span class="skeleton-loader"></span>
+            </td>
+            <td *ngIf="!widget" class="capacity text-right">
+              <span class="skeleton-loader"></span>
+            </td>
+            <td *ngIf="!widget" class="timestamp-first text-left">
+              <span class="skeleton-loader"></span>
+            </td>
+            <td *ngIf="!widget" class="timestamp-update text-left">
+              <span class="skeleton-loader"></span>
+            </td>
+            <td *ngIf="!widget" class="location text-right text-truncate">
+              <span class="skeleton-loader"></span>
+            </td>
+          </tr>
+        </tbody>
+      </ng-template>
+    </table>
+  </div>
+</div>

frontend/src/app/lightning/nodes-ranking/top-nodes-per-channels/top-nodes-per-channels.component.scss

@@ -0,0 +1,84 @@
+.container-xl {
+  max-width: 1400px;
+  padding-bottom: 100px;
+  @media (min-width: 767.98px) {
+    padding-left: 50px;
+    padding-right: 50px;
+  }
+}
+
+.table td, .table th {
+  padding: 0.5rem;
+}
+
+.full .rank {
+  width: 5%;
+}
+.widget .rank {
+  @media (min-width: 767.98px) {
+    width: 13%;
+  }
+  @media (max-width: 767.98px) {
+    padding-left: 0px;
+    padding-right: 0px;
+  }
+}
+
+.full .alias {
+  width: 10%;
+  overflow: hidden;
+  text-overflow: ellipsis;
+  max-width: 350px;
+  @media (max-width: 767.98px) {
+    max-width: 175px;
+  }
+}
+.widget .alias {
+  width: 55%;
+  overflow: hidden;
+  text-overflow: ellipsis;
+  max-width: 350px;
+  @media (max-width: 767.98px) {
+    max-width: 175px;
+  }
+}
+
+.full .channels {
+  width: 10%;
+}
+.widget .channels {
+  width: 32%;
+  @media (max-width: 767.98px) {
+    padding-left: 0px;
+    padding-right: 0px;
+  }
+}
+
+.full .capacity {
+  width: 15%;
+  padding-right: 50px;
+  @media (max-width: 767.98px) {
+    display: none;
+  }
+}
+
+.full .timestamp-first {
+  width: 15%;
+  @media (max-width: 767.98px) {
+    display: none;
+  }
+}
+
+.full .timestamp-update {
+  width: 15%;
+  @media (max-width: 767.98px) {
+    display: none;
+  }
+}
+
+.full .location {
+  width: 10%;
+  @media (max-width: 767.98px) {
+    display: none;
+  }
+}

frontend/src/app/lightning/nodes-ranking/top-nodes-per-channels/top-nodes-per-channels.component.ts

@@ -0,0 +1,37 @@
+import { ChangeDetectionStrategy, Component, Input, OnInit } from '@angular/core';
+import { map, Observable } from 'rxjs';
+import { INodesRanking, ITopNodesPerChannels } from 'src/app/interfaces/node-api.interface';
+import { LightningApiService } from '../../lightning-api.service';
+
+@Component({
+  selector: 'app-top-nodes-per-channels',
+  templateUrl: './top-nodes-per-channels.component.html',
+  styleUrls: ['./top-nodes-per-channels.component.scss'],
+  changeDetection: ChangeDetectionStrategy.OnPush,
+})
+export class TopNodesPerChannels implements OnInit {
+  @Input() nodes$: Observable<INodesRanking>;
+  @Input() widget: boolean = false;
+  
+  topNodesPerChannels$: Observable<ITopNodesPerChannels[]>;
+  skeletonRows: number[] = [];
+
+  constructor(private apiService: LightningApiService) {}
+
+  ngOnInit(): void {
+    for (let i = 1; i <= (this.widget ? 10 : 100); ++i) {
+      this.skeletonRows.push(i);
+    }
+
+    if (this.widget === false) {
+      this.topNodesPerChannels$ = this.apiService.getTopNodesByChannels$();
+    } else {
+      this.topNodesPerChannels$ = this.nodes$.pipe(
+        map((ranking) => {
+          return ranking.topByChannels.slice(0, 10);
+        })
+      );
+    }
+  }
+
+}