Merge pull request #2185 from mempool/nymkappa/feature/link-country-isp-node-page

[Node page] Add link to node list per country/isp in node page

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

@@ -5,7 +5,7 @@ class NodesApi {
   public async $getNode(public_key: string): Promise<any> {
     try {
       const query = `
-        SELECT nodes.*, geo_names_as.names as as_organization, geo_names_city.names as city,
+        SELECT nodes.*, geo_names_iso.names as iso_code, geo_names_as.names as as_organization, geo_names_city.names as city,
         geo_names_country.names as country, geo_names_subdivision.names as subdivision,
           (SELECT Count(*)
           FROM channels
@@ -24,6 +24,7 @@ class NodesApi {
         LEFT JOIN geo_names geo_names_city on geo_names_city.id = city_id
         LEFT JOIN geo_names geo_names_subdivision on geo_names_subdivision.id = subdivision_id
         LEFT JOIN geo_names geo_names_country on geo_names_country.id = country_id
+        LEFT JOIN geo_names geo_names_iso ON geo_names_iso.id = nodes.country_id AND geo_names_iso.type = 'country_iso_code'
         WHERE public_key = ?
       `;
       const [rows]: any = await DB.query(query, [public_key, public_key, public_key, public_key, public_key, public_key, public_key, public_key, public_key]);

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

@@ -43,11 +43,23 @@
             </tr>
             <tr *ngIf="node.country && node.city && node.subdivision">
               <td i18n="location">Location</td>
-              <td>{{ node.city.en }}, {{ node.subdivision.en }}<br>{{ node.country.en }}</td>
+              <td>
+                <span>{{ node.city.en }}, {{ node.subdivision.en }}</span>
+                <br>
+                <a class="d-flex align-items-center" [routerLink]="['/lightning/nodes/country' | relativeUrl, node.iso_code]">
+                  <span class="link">{{ node.country.en }}</span>
+                  &nbsp;
+                  <span class="flag">{{ node.flag }}</span>
+                </a>
+              </td>
             </tr>
             <tr *ngIf="node.country && !node.city">
               <td i18n="location">Location</td>
-              <td>{{ node.country.en }}</td>
+              <td>
+                <a [routerLink]="['/lightning/nodes/country' | relativeUrl, node.iso_code]">
+                  {{ node.country.en }} {{ node.flag }}
+                </a>
+              </td>
             </tr>
           </tbody>
         </table>
@@ -77,7 +89,9 @@
             <tr *ngIf="node.country">
               <td i18n="isp">ISP</td>
               <td>
-                {{ node.as_organization }} [ASN {{node.as_number}}]
+                <a [routerLink]="['/lightning/nodes/isp' | relativeUrl, node.as_number]">
+                  {{ node.as_organization }} [ASN {{node.as_number}}]
+                </a>                
               </td>
             </tr>
           </tbody>

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

@@ -3,6 +3,7 @@ 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 { getFlagEmoji } from 'src/app/shared/graphs.utils';
 import { LightningApiService } from '../lightning-api.service';
 
 @Component({
@@ -51,6 +52,7 @@ export class NodeComponent implements OnInit {
             } else if (socket.indexOf('onion') > -1) {
               label = 'Tor';
             }
+            node.flag = getFlagEmoji(node.iso_code);
             socketsObject.push({
               label: label,
               socket: node.public_key + '@' + socket,

frontend/src/app/shared/graphs.utils.ts

@@ -92,6 +92,9 @@ export function detectWebGL() {
 }
 
 export function getFlagEmoji(countryCode) {
+  if (!countryCode) {
+    return '';
+  }
   const codePoints = countryCode
     .toUpperCase()
     .split('')