LND Graph Lookup Page layout

src/app/lnd/graph/query-routes/query-routes.component.html

@@ -32,11 +32,23 @@
       </ng-container>
       <ng-container matColumnDef="pubkey_alias">
         <th mat-header-cell *matHeaderCellDef mat-sort-header> Peer </th>
-        <td mat-cell *matCellDef="let hop" [ngStyle]="{'max-width': (screenSize === screenSizeEnum.XS) ? '10rem' : '28rem'}"> {{hop?.pubkey_alias}} </td>
+        <td mat-cell *matCellDef="let hop" [ngStyle]="{'max-width': (screenSize === screenSizeEnum.XS) ? '10rem' : '20rem'}"> {{hop?.pubkey_alias}} </td>
+      </ng-container>
+      <ng-container matColumnDef="pub_key">
+        <th mat-header-cell *matHeaderCellDef mat-sort-header> Peer Pubkey </th>
+        <td mat-cell *matCellDef="let hop" [ngStyle]="{'max-width': (screenSize === screenSizeEnum.XS) ? '10rem' : '20rem'}"> {{hop?.pub_key}} </td>
       </ng-container>
       <ng-container matColumnDef="chan_id">
-        <th mat-header-cell *matHeaderCellDef mat-sort-header> Channel </th>
-        <td mat-cell *matCellDef="let hop"> {{hop?.chan_id}} </td>
+        <th mat-header-cell *matHeaderCellDef mat-sort-header class="pl-1"> Channel </th>
+        <td mat-cell *matCellDef="let hop" class="pl-1" [ngStyle]="{'max-width': (screenSize === screenSizeEnum.XS) ? '10rem' : '20rem'}"> {{hop?.chan_id}} </td>
+      </ng-container>
+      <ng-container matColumnDef="tlv_payload">
+        <th mat-header-cell *matHeaderCellDef mat-sort-header> TLV Payload </th>
+        <td mat-cell *matCellDef="let hop"> {{hop?.tlv_payload ? 'Yes' : 'No'}} </td>
+      </ng-container>
+      <ng-container matColumnDef="expiry">
+        <th mat-header-cell *matHeaderCellDef mat-sort-header arrowPosition="before"> Expiry </th>
+        <td mat-cell *matCellDef="let hop"><span fxLayoutAlign="end center"> {{hop?.expiry | number}}</span></td>
       </ng-container>
       <ng-container matColumnDef="chan_capacity">
         <th mat-header-cell *matHeaderCellDef mat-sort-header arrowPosition="before"> Capacity (Sats) </th>

src/app/lnd/graph/query-routes/query-routes.component.scss

@@ -2,8 +2,8 @@
   min-height: 4.8rem;
 }
 
-.mat-column-pubkey_alias {
-  flex: 1 1 25%;
+.mat-column-pubkey_alias, .mat-column-pub_key, .mat-column-chan_id {
+  flex: 1 1 20%;
   white-space: nowrap;
   overflow: hidden;
   text-overflow: ellipsis;

src/app/shared/components/node-config/page-settings/page-settings.component.ts

@@ -210,7 +210,8 @@ export class PageSettingsComponent implements OnInit, OnDestroy {
     return (this.selNode.lnImplementation === 'LND' && pageId === 'peers_channels' && tableId === 'pending_open') ||
     (this.selNode.lnImplementation === 'LND' && pageId === 'peers_channels' && tableId === 'pending_force_closing') ||
     (this.selNode.lnImplementation === 'LND' && pageId === 'peers_channels' && tableId === 'pending_closing') ||
-    (this.selNode.lnImplementation === 'LND' && pageId === 'peers_channels' && tableId === 'pending_waiting_close');
+    (this.selNode.lnImplementation === 'LND' && pageId === 'peers_channels' && tableId === 'pending_waiting_close') ||
+    (this.selNode.lnImplementation === 'LND' && pageId === 'graph_lookup' && tableId === 'query_routes');
   }
 
   ngOnDestroy() {

src/app/shared/services/consts-enums-functions.ts

@@ -1014,8 +1014,8 @@ export const LND_TABLES_DEF = {
   },
   graph_lookup: {
     query_routes: {
-      maxColumns: 5,
-      allowedColumns: ['hop_sequence', 'pubkey_alias', 'chan_capacity', 'amt_to_forward_msat', 'fee_msat']
+      maxColumns: 8,
+      allowedColumns: ['hop_sequence', 'pubkey_alias', 'pub_key', 'chan_id', 'tlv_payload', 'expiry', 'chan_capacity', 'amt_to_forward_msat', 'fee_msat']
     }
   },
   loop: {