Show geolocation in node channels ranking widget

backend/src/api/explorer/nodes.api.ts

@@ -228,7 +228,7 @@ class NodesApi {
             nodes.capacity
           FROM nodes
           ORDER BY capacity DESC
-          LIMIT 100
+          LIMIT 6
         `;
 
         [rows] = await DB.query(query);
@@ -269,14 +269,26 @@ class NodesApi {
       let query: string;
       if (full === false) {
         query = `
-          SELECT nodes.public_key as publicKey, IF(nodes.alias = '', SUBSTRING(nodes.public_key, 1, 20), alias) as alias,
+          SELECT
-            nodes.channels
+            nodes.public_key as publicKey,
+            IF(nodes.alias = '', SUBSTRING(nodes.public_key, 1, 20), alias) as alias,
+            nodes.channels,
+            geo_names_city.names as city, geo_names_country.names as country,
+            geo_names_iso.names as iso_code, geo_names_subdivision.names as subdivision
           FROM nodes
+          LEFT JOIN geo_names geo_names_country ON geo_names_country.id = nodes.country_id AND geo_names_country.type = 'country'
+          LEFT JOIN geo_names geo_names_city ON geo_names_city.id = nodes.city_id AND geo_names_city.type = 'city'
+          LEFT JOIN geo_names geo_names_iso ON geo_names_iso.id = nodes.country_id AND geo_names_iso.type = 'country_iso_code'
+          LEFT JOIN geo_names geo_names_subdivision on geo_names_subdivision.id = nodes.subdivision_id AND geo_names_subdivision.type = 'division'
           ORDER BY channels DESC
-          LIMIT 100;
+          LIMIT 6;
         `;
 
         [rows] = await DB.query(query);
+        for (let i = 0; i < rows.length; ++i) {
+          rows[i].country = JSON.parse(rows[i].country);
+          rows[i].city = JSON.parse(rows[i].city);
+        }
       } else {
         query = `
           SELECT nodes.public_key AS publicKey, IF(nodes.alias = '', SUBSTRING(nodes.public_key, 1, 20), alias) as alias,

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

@@ -8,13 +8,13 @@
   <div style="min-height: 295px">
     <table class="table table-borderless">
       <thead>
-        <th class="alias text-left" i18n="nodes.alias">Alias</th>
+        <th class="pool text-left" i18n="nodes.alias" [ngClass]="{'widget': widget}">Alias</th>
         <th class="liquidity text-right" i18n="node.channels">Channels</th>
         <th *ngIf="!widget" class="d-none d-md-table-cell channels text-right" i18n="lightning.channels">Capacity</th>
         <th *ngIf="!widget" class="d-none d-md-table-cell text-right" i18n="node.liquidity">{{ currency$ | async }}</th>
         <th *ngIf="!widget" class="d-none d-md-table-cell timestamp text-right" i18n="transaction.first-seen|Transaction first seen">First seen</th>
         <th *ngIf="!widget" class="d-none d-md-table-cell timestamp text-right" i18n="lightning.last_update">Last update</th>
-        <th *ngIf="!widget" class="d-none d-md-table-cell text-right" i18n="lightning.location">Location</th>
+        <th class="d-none d-md-table-cell text-right" i18n="lightning.location">Location</th>
       </thead>
       <tbody *ngIf="topNodesPerChannels$ | async as nodes">
         <tr *ngFor="let node of nodes;">
@@ -40,7 +40,7 @@
           <td *ngIf="!widget" class="d-none d-md-table-cell text-right">
             <app-timestamp [customFormat]="'yyyy-MM-dd'" [unixTime]="node.updatedAt" [hideTimeSince]="true"></app-timestamp>
           </td>
-          <td *ngIf="!widget" class="d-none d-md-table-cell text-right text-truncate">
+          <td class="d-none d-md-table-cell text-right text-truncate">
             <app-geolocation [data]="node.geolocation" [type]="'list-isp'"></app-geolocation>
           </td>
         </tr>

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

@@ -33,6 +33,9 @@ tr, td, th {
   text-overflow: ellipsis;
   overflow: hidden;
 }
+.pool.widget {
+  width: 45%;
+}
 
 .liquidity {
   width: 10%;

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

@@ -28,7 +28,7 @@ export class TopNodesPerChannels implements OnInit {
   ngOnInit(): void {
     this.currency$ = this.stateService.fiatCurrency$;
     
-    for (let i = 1; i <= (this.widget ? (isMobile() ? 8 : 6) : 100); ++i) {
+    for (let i = 1; i <= (this.widget ? 6 : 100); ++i) {
       this.skeletonRows.push(i);
     }
 
@@ -49,7 +49,16 @@ export class TopNodesPerChannels implements OnInit {
     } else {
       this.topNodesPerChannels$ = this.nodes$.pipe(
         map((ranking) => {
-          return ranking.topByChannels.slice(0, isMobile() ? 8 : 6);
+          for (const i in ranking.topByChannels) {
+            ranking.topByChannels[i].geolocation = <GeolocationData>{
+              country: ranking.topByChannels[i].country?.en,
+              city: ranking.topByChannels[i].city?.en,
+              subdivision: ranking.topByChannels[i].subdivision?.en,
+              iso: ranking.topByChannels[i].iso_code,
+            };
+            console.log(ranking.topByChannels[i].geolocation);
+          }
+          return ranking.topByChannels;
         })
       );
     }