Add lightning node link previews

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

@@ -0,0 +1,26 @@
+import { NgModule } from '@angular/core';
+import { CommonModule } from '@angular/common';
+import { SharedModule } from '../shared/shared.module';
+import { RouterModule } from '@angular/router';
+import { GraphsModule } from '../graphs/graphs.module';
+import { LightningModule } from './lightning.module';
+import { LightningApiService } from './lightning-api.service';
+import { NodePreviewComponent } from './node/node-preview.component';
+import { LightningPreviewsRoutingModule } from './lightning-previews.routing.module';
+@NgModule({
+  declarations: [
+    NodePreviewComponent,
+  ],
+  imports: [
+    CommonModule,
+    SharedModule,
+    RouterModule,
+    GraphsModule,
+    LightningPreviewsRoutingModule,
+    LightningModule,
+  ],
+  providers: [
+    LightningApiService,
+  ]
+})
+export class LightningPreviewsModule { }

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

@@ -0,0 +1,20 @@
+import { NgModule } from '@angular/core';
+import { RouterModule, Routes } from '@angular/router';
+import { NodePreviewComponent } from './node/node-preview.component';
+
+const routes: Routes = [
+    {
+      path: 'node/:public_key',
+      component: NodePreviewComponent,
+    },
+    {
+      path: '**',
+      redirectTo: ''
+    }
+];
+
+@NgModule({
+  imports: [RouterModule.forChild(routes)],
+  exports: [RouterModule]
+})
+export class LightningPreviewsRoutingModule { }

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

@@ -53,6 +53,27 @@ import { NodesChannelsMap } from '../lightning/nodes-channels-map/nodes-channels
     LightningRoutingModule,
     GraphsModule,
   ],
+  exports: [
+    LightningDashboardComponent,
+    NodesListComponent,
+    NodeStatisticsComponent,
+    NodeStatisticsChartComponent,
+    NodeComponent,
+    ChannelsListComponent,
+    ChannelComponent,
+    LightningWrapperComponent,
+    ChannelBoxComponent,
+    ClosingTypeComponent,
+    LightningStatisticsChartComponent,
+    NodesNetworksChartComponent,
+    ChannelsStatisticsComponent,
+    NodesPerISPChartComponent,
+    NodesPerCountry,
+    NodesPerISP,
+    NodesPerCountryChartComponent,
+    NodesMap,
+    NodesChannelsMap,
+  ],
   providers: [
     LightningApiService,
   ]

frontend/src/app/lightning/node/node-preview.component.html

@@ -0,0 +1,50 @@
+<div class="box preview-box" *ngIf="(node$ | async) as node">
+  <div class="row">
+    <div class="col-md">
+      <h1 class="title">{{ node.alias }}</h1>
+      <table class="table table-borderless table-striped">
+        <tbody>
+          <tr>
+            <td i18n="lightning.active-capacity">Active capacity</td>
+            <td>
+              <app-amount [satoshis]="node.capacity" [noFiat]="true"></app-amount>
+            </td>
+          </tr>
+          <tr>
+            <td i18n="lightning.active-channels">Active channels</td>
+            <td>
+              {{ node.active_channel_count }}
+            </td>
+          </tr>
+          <tr>
+            <td i18n="lightning.active-channels-avg">Average size</td>
+            <td>
+              <app-amount [satoshis]="node.avgCapacity" [noFiat]="true"></app-amount>
+            </td>
+          </tr>
+          <tr *ngIf="node.city">
+            <td i18n="location">Location</td>
+            <td>
+              <span>{{ node.city.en }}</span>
+            </td>
+          </tr>
+          <tr *ngIf="node.country">
+            <td i18n="country">Country</td>
+            <td>
+              {{ node.country.en }} {{ node.flag }}
+            </td>
+          </tr>
+        </tbody>
+      </table>
+    </div>
+    <div class="col-md map-col">
+      <app-nodes-channels-map *ngIf="!error" [style]="'nodepage'" [publicKey]="node.public_key" [fitContainer]="true" (readyEvent)="onMapReady()"></app-nodes-channels-map>
+    </div>
+  </div>
+</div>
+
+<ng-template [ngIf]="error">
+  <div class="text-center">
+    <span i18n="error.general-loading-data">Error loading data.</span>
+  </div>
+</ng-template>

frontend/src/app/lightning/node/node-preview.component.scss

@@ -0,0 +1,27 @@
+.title {
+  font-size: 52px;
+  margin-bottom: 48px;
+}
+
+.table {
+  font-size: 32px;
+}
+
+.map-col {
+  flex-grow: 0;
+  flex-shrink: 0;
+  width: 470px;
+  min-width: 470px;
+  padding: 0;
+  background: #181b2d;
+  max-height: 470px;
+  overflow: hidden;
+}
+
+.row {
+  margin-right: 0;
+}
+
+::ng-deep .symbol {
+  font-size: 24px;
+}

frontend/src/app/lightning/node/node-preview.component.ts

@@ -0,0 +1,101 @@
+import { ChangeDetectionStrategy, Component, OnInit } from '@angular/core';
+import { ActivatedRoute, ParamMap } from '@angular/router';
+import { Observable } from 'rxjs';
+import { catchError, map, switchMap } from 'rxjs/operators';
+import { SeoService } from 'src/app/services/seo.service';
+import { OpenGraphService } from 'src/app/services/opengraph.service';
+import { getFlagEmoji } from 'src/app/shared/graphs.utils';
+import { LightningApiService } from '../lightning-api.service';
+import { isMobile } from '../../shared/common.utils';
+
+@Component({
+  selector: 'app-node-preview',
+  templateUrl: './node-preview.component.html',
+  styleUrls: ['./node-preview.component.scss'],
+  changeDetection: ChangeDetectionStrategy.OnPush,
+})
+export class NodePreviewComponent implements OnInit {
+  node$: Observable<any>;
+  statistics$: Observable<any>;
+  publicKey$: Observable<string>;
+  selectedSocketIndex = 0;
+  qrCodeVisible = false;
+  channelsListStatus: string;
+  error: Error;
+  publicKey: string;
+
+  publicKeySize = 99;
+
+  constructor(
+    private lightningApiService: LightningApiService,
+    private activatedRoute: ActivatedRoute,
+    private seoService: SeoService,
+    private openGraphService: OpenGraphService,
+  ) {
+    if (isMobile()) {
+      this.publicKeySize = 12;
+    }
+  }
+
+  ngOnInit(): void {
+    this.node$ = this.activatedRoute.paramMap
+      .pipe(
+        switchMap((params: ParamMap) => {
+          this.openGraphService.waitFor('node-map');
+          this.openGraphService.waitFor('node-data');
+          this.publicKey = params.get('public_key');
+          return this.lightningApiService.getNode$(params.get('public_key'));
+        }),
+        map((node) => {
+          this.seoService.setTitle(`Node: ${node.alias}`);
+
+          const socketsObject = [];
+          for (const socket of node.sockets.split(',')) {
+            if (socket === '') {
+              continue;
+            }
+            let label = '';
+            if (socket.match(/(?:[0-9]{1,3}\.){3}[0-9]{1,3}/)) {
+              label = 'IPv4';
+            } else if (socket.indexOf('[') > -1) {
+              label = 'IPv6';
+            } else if (socket.indexOf('onion') > -1) {
+              label = 'Tor';
+            }
+            node.flag = getFlagEmoji(node.iso_code);
+            socketsObject.push({
+              label: label,
+              socket: node.public_key + '@' + socket,
+            });
+          }
+          node.socketsObject = socketsObject;
+          node.avgCapacity = node.capacity / Math.max(1, node.active_channel_count);
+
+          this.openGraphService.waitOver('node-data');
+
+          return node;
+        }),
+        catchError(err => {
+          this.error = err;
+          this.openGraphService.waitOver('node-map');
+          this.openGraphService.waitOver('node-data');
+          return [{
+            alias: this.publicKey,
+            public_key: this.publicKey,
+          }];
+        })
+      );
+  }
+
+  changeSocket(index: number) {
+    this.selectedSocketIndex = index;
+  }
+
+  onChannelsListStatusChanged(e) {
+    this.channelsListStatus = e;
+  }
+
+  onMapReady() {
+    this.openGraphService.waitOver('node-map');
+  }
+}

frontend/src/app/lightning/nodes-channels-map/nodes-channels-map.component.html

@@ -1,4 +1,4 @@
-<div [class]="'full-container ' + style">
+<div [class]="'full-container ' + style + (fitContainer ? ' fit-container' : '')">
 
   <div *ngIf="style === 'graph'" class="card-header">
     <div class="d-flex d-md-block align-items-baseline" style="margin-bottom: -5px">
@@ -8,7 +8,7 @@
   </div>
 
   <div *ngIf="observable$ | async" class="chart" echarts [initOpts]="chartInitOptions" [options]="chartOptions"
-    (chartInit)="onChartInit($event)">
+    (chartInit)="onChartInit($event)" (chartFinished)="onChartFinished($event)">
   </div>
 
 </div>

frontend/src/app/lightning/nodes-channels-map/nodes-channels-map.component.scss

@@ -29,6 +29,18 @@
   min-height: 250px;
 }
 
+.full-container.fit-container {
+  margin: 0;
+  padding: 0;
+  height: 100%;
+  min-height: 100px;
+
+  .chart {
+    padding: 0;
+    min-height: 100px;
+  }
+}
+
 .widget {
   width: 90vw;
   margin-left: auto;

frontend/src/app/lightning/nodes-channels-map/nodes-channels-map.component.ts

@@ -1,4 +1,4 @@
-import { ChangeDetectionStrategy, Component, HostListener, Input, NgZone, OnDestroy, OnInit, ViewChild } from '@angular/core';
+import { ChangeDetectionStrategy, Component, HostListener, Input, Output, EventEmitter, NgZone, OnDestroy, OnInit, ViewChild } from '@angular/core';
 import { SeoService } from 'src/app/services/seo.service';
 import { ApiService } from 'src/app/services/api.service';
 import { Observable, switchMap, tap, zip } from 'rxjs';
@@ -20,9 +20,11 @@ export class NodesChannelsMap implements OnInit, OnDestroy {
   @Input() style: 'graph' | 'nodepage' | 'widget' | 'channelpage' = 'graph';
   @Input() publicKey: string | undefined;
   @Input() channel: any[] = [];
+  @Input() fitContainer = false;
+  @Output() readyEvent = new EventEmitter();
 
   observable$: Observable<any>;
-  
+
   center: number[] | undefined;
   zoom: number | undefined;
   channelWidth = 0.6;
@@ -313,4 +315,8 @@ export class NodesChannelsMap implements OnInit, OnDestroy {
       this.chartInstance.setOption(chartOptions);
     });
   }
+
+  onChartFinished(e) {
+    this.readyEvent.emit();
+  }
 }