From 6a19acb351b33d80d30d689ff2cb965cf6f62cbf Mon Sep 17 00:00:00 2001
From: ShahanaFarooqui <shahana.farooqui@gmail.com>
Date: Thu, 20 Oct 2022 11:26:57 -0700
Subject: [PATCH] CLN Query Routes Page Layout

---
 .../node-lookup/node-lookup.component.html    |  6 ++-
 .../node-lookup/node-lookup.component.scss    |  9 ++++
 .../query-routes/query-routes.component.html  | 42 +++++++++++--------
 .../query-routes/query-routes.component.scss  | 15 +++----
 .../query-routes/query-routes.component.ts    | 29 ++++++++-----
 .../utxo-tables/utxos/utxos.component.html    |  2 +-
 .../peers-channels/peers/peers.component.html | 22 ++++++----
 .../peers-channels/peers/peers.component.scss | 24 +++--------
 .../failed-transactions.component.html        |  2 +-
 .../forwarding-history.component.html         |  2 +-
 .../local-failed-transactions.component.html  |  2 +-
 .../lightning-payments.component.html         |  2 +-
 .../query-routes/query-routes.component.html  |  2 +-
 ...n-chain-transaction-history.component.html |  2 +-
 .../channel-pending-table.component.html      |  2 +-
 .../forwarding-history.component.html         |  2 +-
 .../lightning-payments.component.html         |  2 +-
 .../query-routes/query-routes.component.html  |  2 +-
 ...n-chain-transaction-history.component.html |  2 +-
 .../channel-closed-table.component.html       |  2 +-
 .../channel-pending-table.component.html      |  8 ++--
 .../forwarding-history.component.html         |  2 +-
 .../routing-peers.component.html              |  4 +-
 .../lightning-payments.component.html         |  2 +-
 .../boltz/swaps/swaps.component.html          |  2 +-
 .../loop/swaps/swaps.component.html           |  2 +-
 .../page-settings/page-settings.component.ts  | 15 ++++---
 .../transactions-report-table.component.html  |  2 +-
 .../shared/services/consts-enums-functions.ts | 22 ++++++++++
 29 files changed, 139 insertions(+), 93 deletions(-)

diff --git a/src/app/cln/graph/lookups/node-lookup/node-lookup.component.html b/src/app/cln/graph/lookups/node-lookup/node-lookup.component.html
index 8522a5c8..9b52ab15 100644
--- a/src/app/cln/graph/lookups/node-lookup/node-lookup.component.html
+++ b/src/app/cln/graph/lookups/node-lookup/node-lookup.component.html
@@ -39,10 +39,12 @@
           <td mat-cell *matCellDef="let address"> {{address?.port}} </td>
         </ng-container>
         <ng-container matColumnDef="actions">
-          <th mat-header-cell *matHeaderCellDef class="pl-1"><span fxLayoutAlign="end center">Actions</span></th>
+          <th mat-header-cell *matHeaderCellDef class="pl-1">
+            <div class="bordered-box table-actions-select btn-action" fxLayoutAlign="center center">Actions</div>
+          </th>
           <td mat-cell *matCellDef="let address" class="pl-1">
             <span fxLayoutAlign="end center">
-              <button mat-stroked-button color="primary" type="button" tabindex="1" rtlClipboard [payload]="lookupResult?.nodeid + '@' + address.address + ':' + address.port" (copied)="onCopyNodeURI($event)">Copy Node URI</button>          
+              <button mat-stroked-button class="btn-action-copy" color="primary" type="button" tabindex="1" rtlClipboard [payload]="lookupResult?.nodeid + '@' + address.address + ':' + address.port" (copied)="onCopyNodeURI($event)">Copy Node URI</button>          
             </span>
           </td>
         </ng-container>
diff --git a/src/app/cln/graph/lookups/node-lookup/node-lookup.component.scss b/src/app/cln/graph/lookups/node-lookup/node-lookup.component.scss
index e69de29b..b542b955 100644
--- a/src/app/cln/graph/lookups/node-lookup/node-lookup.component.scss
+++ b/src/app/cln/graph/lookups/node-lookup/node-lookup.component.scss
@@ -0,0 +1,9 @@
+div.bordered-box.table-actions-select.btn-action {
+  min-width: 13rem;
+  width: 13rem;
+}
+
+button.mat-stroked-button.btn-action-copy {
+  min-width: 13rem;
+  width: 13rem;
+}
diff --git a/src/app/cln/graph/query-routes/query-routes.component.html b/src/app/cln/graph/query-routes/query-routes.component.html
index 52f85c55..cf760c20 100644
--- a/src/app/cln/graph/query-routes/query-routes.component.html
+++ b/src/app/cln/graph/query-routes/query-routes.component.html
@@ -28,38 +28,44 @@
     <table mat-table #table [dataSource]="qrHops" matSort [ngClass]="{'overflow-auto error-border': flgLoading[0]==='error','overflow-auto': true}">
       <ng-container matColumnDef="id">
         <th mat-header-cell *matHeaderCellDef mat-sort-header> ID </th>
-        <td mat-cell *matCellDef="let hop"> {{hop?.id}} </td>
+        <td mat-cell *matCellDef="let hop">
+          <div class="ellipsis-parent" [ngStyle]="{'max-width': (screenSize === screenSizeEnum.XS) ? '12rem' : '40rem'}">
+            <span class="ellipsis-child">{{hop?.id}}</span>
+          </div>
+        </td>
       </ng-container>
       <ng-container matColumnDef="alias">
-        <th mat-header-cell *matHeaderCellDef mat-sort-header> Alias </th>
-        <td mat-cell *matCellDef="let hop"> {{hop?.alias}} </td>
+        <th mat-header-cell *matHeaderCellDef mat-sort-header class="pl-1"> Alias </th>
+        <td mat-cell *matCellDef="let hop" class="pl-1"> 
+          <div class="ellipsis-parent" [ngStyle]="{'max-width': (screenSize === screenSizeEnum.XS) ? '12rem' : '40rem'}">
+            <span class="ellipsis-child">{{hop?.alias}}</span>
+          </div>
+        </td>
       </ng-container>
       <ng-container matColumnDef="channel">
-        <th mat-header-cell *matHeaderCellDef mat-sort-header> Channel </th>
-        <td mat-cell *matCellDef="let hop"> {{hop?.channel}} </td>
+        <th mat-header-cell *matHeaderCellDef mat-sort-header class="pl-1"> Channel </th>
+        <td mat-cell *matCellDef="let hop" class="pl-1"> {{hop?.channel}} </td>
       </ng-container>
       <ng-container matColumnDef="direction">
-        <th mat-header-cell *matHeaderCellDef mat-sort-header> Direction </th>
-        <td mat-cell *matCellDef="let hop"> {{hop?.direction}} </td>
+        <th mat-header-cell *matHeaderCellDef mat-sort-header class="pl-1"> Direction </th>
+        <td mat-cell *matCellDef="let hop" class="pl-1"> {{hop?.direction}} </td>
       </ng-container>
       <ng-container matColumnDef="delay">
-        <th mat-header-cell *matHeaderCellDef mat-sort-header arrowPosition="before"> Delay </th>
-        <td mat-cell *matCellDef="let hop"><span fxLayoutAlign="end center"> {{hop?.delay | number}} </span>
+        <th mat-header-cell *matHeaderCellDef mat-sort-header arrowPosition="before" class="pl-1"> Delay </th>
+        <td mat-cell *matCellDef="let hop" class="pl-1"><span fxLayoutAlign="end center"> {{hop?.delay | number}} </span>
         </td>
       </ng-container>
       <ng-container matColumnDef="msatoshi">
-        <th mat-header-cell *matHeaderCellDef mat-sort-header arrowPosition="before"> Amount (Sats) </th>
-        <td mat-cell *matCellDef="let hop"><span fxLayoutAlign="end center"> {{hop?.msatoshi/1000 | number}}
+        <th mat-header-cell *matHeaderCellDef mat-sort-header arrowPosition="before" class="pl-1"> Amount (Sats) </th>
+        <td mat-cell *matCellDef="let hop" class="pl-1"><span fxLayoutAlign="end center"> {{hop?.msatoshi/1000 | number}}
           </span></td>
       </ng-container>
-      <ng-container matColumnDef="amount_msat">
-        <th mat-header-cell class="pl-4" *matHeaderCellDef mat-sort-header> Amount mSat </th>
-        <td mat-cell class="pl-4" *matCellDef="let hop"> {{hop?.amount_msat}} </td>
-      </ng-container>
       <ng-container matColumnDef="actions">
-        <th mat-header-cell *matHeaderCellDef class="pl-4 pr-3"><span fxLayoutAlign="end center">Actions</span></th>
-        <td mat-cell *matCellDef="let hop" class="pl-4">
-          <button mat-stroked-button color="primary" type="button" tabindex="4" (click)="onHopClick(hop, $event)"class="table-actions-button">View Info</button>          
+        <th mat-header-cell *matHeaderCellDef class="pl-2 pr-3">
+          <div class="bordered-box table-actions-select" fxLayoutAlign="center center">Actions</div>          
+        </th>
+        <td mat-cell *matCellDef="let hop" class="pl-2 pr-3" fxLayoutAlign="end center">
+          <button mat-stroked-button color="primary" type="button" tabindex="4" (click)="onHopClick(hop, $event)" class="table-actions-button">View Info</button>          
         </td>
       </ng-container>
       <tr mat-header-row *matHeaderRowDef="displayedColumns"></tr>
diff --git a/src/app/cln/graph/query-routes/query-routes.component.scss b/src/app/cln/graph/query-routes/query-routes.component.scss
index 3d0e9c13..dc75eed4 100644
--- a/src/app/cln/graph/query-routes/query-routes.component.scss
+++ b/src/app/cln/graph/query-routes/query-routes.component.scss
@@ -1,10 +1,11 @@
-.mat-column-actions {
-  min-height: 4.8rem;
+.mat-column-id, .mat-column-alias {
+  flex: 0 0 22%;
+  width: 22%;
+  & .ellipsis-parent {
+    display: flex;
+  }
 }
 
-.mat-column-pubkey_alias {
-  flex: 1 1 25%;
-  white-space: nowrap;
-  overflow: hidden;
-  text-overflow: ellipsis;
+.mat-column-actions {
+  min-height: 4.8rem;
 }
diff --git a/src/app/cln/graph/query-routes/query-routes.component.ts b/src/app/cln/graph/query-routes/query-routes.component.ts
index 383c47cb..2329bde2 100644
--- a/src/app/cln/graph/query-routes/query-routes.component.ts
+++ b/src/app/cln/graph/query-routes/query-routes.component.ts
@@ -7,13 +7,16 @@ import { MatTableDataSource } from '@angular/material/table';
 import { faRoute, faExclamationTriangle } from '@fortawesome/free-solid-svg-icons';
 
 import { Routes } from '../../../shared/models/clnModels';
-import { AlertTypeEnum, DataTypeEnum, ScreenSizeEnum } from '../../../shared/services/consts-enums-functions';
+import { AlertTypeEnum, CLN_DEFAULT_PAGE_SETTINGS, DataTypeEnum, PAGE_SIZE, ScreenSizeEnum, SortOrderEnum } from '../../../shared/services/consts-enums-functions';
 import { CommonService } from '../../../shared/services/common.service';
 
 import { CLNEffects } from '../../store/cln.effects';
 import { RTLState } from '../../../store/rtl.state';
 import { openAlert } from '../../../store/rtl.actions';
 import { getQueryRoutes } from '../../store/cln.actions';
+import { PageSettings, TableSetting } from '../../../shared/models/pageSettings';
+import { clnPageSettings } from '../../store/cln.selector';
+import { ApiCallStatusPayload } from '../../../shared/models/apiCallsPayload';
 
 @Component({
   selector: 'rtl-cln-query-routes',
@@ -24,6 +27,8 @@ export class CLNQueryRoutesComponent implements OnInit, OnDestroy {
 
   @ViewChild(MatSort, { static: false }) sort: MatSort | undefined;
   @ViewChild('queryRoutesForm', { static: true }) form: any;
+  public PAGE_ID = 'graph_lookup';
+  public tableSetting: TableSetting = { tableId: 'query_routes', recordsPerPage: PAGE_SIZE, sortBy: 'id', sortOrder: SortOrderEnum.ASCENDING };
   public destinationPubkey = '';
   public amount: number | null = null;
   public qrHops: any;
@@ -33,22 +38,23 @@ export class CLNQueryRoutesComponent implements OnInit, OnDestroy {
   public faExclamationTriangle = faExclamationTriangle;
   public screenSize = '';
   public screenSizeEnum = ScreenSizeEnum;
-  private unSubs: Array<Subject<void>> = [new Subject(), new Subject()];
+  private unSubs: Array<Subject<void>> = [new Subject(), new Subject(), new Subject(), new Subject()];
 
   constructor(private store: Store<RTLState>, private clnEffects: CLNEffects, private commonService: CommonService) {
     this.screenSize = this.commonService.getScreenSize();
-    if (this.screenSize === ScreenSizeEnum.XS) {
-      this.displayedColumns = ['alias', 'msatoshi', 'actions'];
-    } else if (this.screenSize === ScreenSizeEnum.SM) {
-      this.displayedColumns = ['alias', 'direction', 'msatoshi', 'actions'];
-    } else if (this.screenSize === ScreenSizeEnum.MD) {
-      this.displayedColumns = ['alias', 'direction', 'delay', 'msatoshi', 'actions'];
-    } else {
-      this.displayedColumns = ['alias', 'channel', 'direction', 'delay', 'msatoshi', 'actions'];
-    }
   }
 
   ngOnInit() {
+    this.store.select(clnPageSettings).pipe(takeUntil(this.unSubs[0])).
+      subscribe((settings: { pageSettings: PageSettings[], apiCallStatus: ApiCallStatusPayload }) => {
+        this.tableSetting = settings.pageSettings.find((page) => page.pageId === this.PAGE_ID)?.tables.find((table) => table.tableId === this.tableSetting.tableId) || CLN_DEFAULT_PAGE_SETTINGS.find((page) => page.pageId === this.PAGE_ID)?.tables.find((table) => table.tableId === this.tableSetting.tableId)!;
+        if (this.screenSize === ScreenSizeEnum.XS || this.screenSize === ScreenSizeEnum.SM) {
+          this.displayedColumns = JSON.parse(JSON.stringify(this.tableSetting.columnSelectionSM));
+        } else {
+          this.displayedColumns = JSON.parse(JSON.stringify(this.tableSetting.columnSelection));
+        }
+        this.displayedColumns.push('actions');
+      });
     this.clnEffects.setQueryRoutesCL.pipe(takeUntil(this.unSubs[1])).subscribe((queryRoute) => {
       this.qrHops = new MatTableDataSource([]);
       this.qrHops.data = [];
@@ -61,6 +67,7 @@ export class CLNQueryRoutesComponent implements OnInit, OnDestroy {
       }
       this.qrHops.sort = this.sort;
       this.qrHops.sortingDataAccessor = (data: any, sortHeaderId: string) => ((data[sortHeaderId] && isNaN(data[sortHeaderId])) ? data[sortHeaderId].toLocaleLowerCase() : data[sortHeaderId] ? +data[sortHeaderId] : null);
+      this.qrHops.sort?.sort({ id: this.tableSetting.sortBy, start: this.tableSetting.sortOrder, disableClear: true });
     });
   }
 
diff --git a/src/app/cln/on-chain/utxo-tables/utxos/utxos.component.html b/src/app/cln/on-chain/utxo-tables/utxos/utxos.component.html
index 5470caae..e027a348 100644
--- a/src/app/cln/on-chain/utxo-tables/utxos/utxos.component.html
+++ b/src/app/cln/on-chain/utxo-tables/utxos/utxos.component.html
@@ -80,7 +80,7 @@
             </div>
           </th>
           <td mat-cell *matCellDef="let utxo" fxLayoutAlign="end center">
-            <button mat-stroked-button color="primary" type="button" tabindex="4" (click)="onUTXOClick(utxo, $event)"class="table-actions-button">View Info</button>
+            <button mat-stroked-button color="primary" type="button" tabindex="4" (click)="onUTXOClick(utxo, $event)" class="table-actions-button">View Info</button>
           </td>
         </ng-container>
         <ng-container matColumnDef="no_utxo">
diff --git a/src/app/cln/peers-channels/peers/peers.component.html b/src/app/cln/peers-channels/peers/peers.component.html
index e1ec6aa8..65b0c298 100644
--- a/src/app/cln/peers-channels/peers/peers.component.html
+++ b/src/app/cln/peers-channels/peers/peers.component.html
@@ -26,20 +26,26 @@
         </ng-container>
         <ng-container matColumnDef="alias">
           <th mat-header-cell *matHeaderCellDef mat-sort-header> Alias </th>
-          <td mat-cell *matCellDef="let peer" [ngStyle]="{'max-width': (screenSize === screenSizeEnum.XS) ? '10rem' : '40rem'}"> 
-            {{peer?.alias}} 
+          <td mat-cell *matCellDef="let peer"> 
+            <div class="ellipsis-parent" [ngStyle]="{'max-width': (screenSize === screenSizeEnum.XS) ? '12rem' : '40rem'}">
+              <span class="ellipsis-child">{{peer?.alias}}</span>
+            </div>
           </td>
         </ng-container>
         <ng-container matColumnDef="id">
-          <th mat-header-cell *matHeaderCellDef class="px-3" mat-sort-header> ID </th>
-          <td mat-cell *matCellDef="let peer" class="px-3" [ngStyle]="{'max-width': (screenSize === screenSizeEnum.XS) ? '10rem' : '40rem'}">
-            {{peer?.id}}
+          <th mat-header-cell *matHeaderCellDef class="pl-2" mat-sort-header> ID </th>
+          <td mat-cell *matCellDef="let peer" class="pl-2">
+            <div class="ellipsis-parent" [ngStyle]="{'max-width': (screenSize === screenSizeEnum.XS) ? '12rem' : '40rem'}">
+              <span class="ellipsis-child">{{peer?.id}}</span>
+            </div>
           </td>
         </ng-container>
         <ng-container matColumnDef="netaddr">
-          <th mat-header-cell *matHeaderCellDef mat-sort-header> Network Address </th>
-          <td mat-cell *matCellDef="let peer" [ngStyle]="{'max-width': (screenSize === screenSizeEnum.XS) ? '10rem' : '40rem'}">
-            <span *ngFor="let addr of peer?.netaddr; last as isLast">{{addr}}<span *ngIf="!isLast">,<br></span></span>
+          <th mat-header-cell *matHeaderCellDef mat-sort-header class="pl-2"> Network Address </th>
+          <td mat-cell *matCellDef="let peer" class="pl-2">
+            <div class="ellipsis-parent" [ngStyle]="{'max-width': (screenSize === screenSizeEnum.XS) ? '12rem' : '40rem'}">
+              <span class="ellipsis-child" *ngFor="let addr of peer?.netaddr; last as isLast">{{addr}}<span *ngIf="!isLast">,<br></span></span>
+            </div>
           </td>
         </ng-container>
         <ng-container matColumnDef="actions">
diff --git a/src/app/cln/peers-channels/peers/peers.component.scss b/src/app/cln/peers-channels/peers/peers.component.scss
index e679095b..143350f4 100644
--- a/src/app/cln/peers-channels/peers/peers.component.scss
+++ b/src/app/cln/peers-channels/peers/peers.component.scss
@@ -2,25 +2,13 @@
   width: 2rem;
 }
 
-.mat-column-alias {
-  flex: 1 1 20%;
+.mat-column-alias, .mat-column-id, .mat-column-netaddr {
+  flex: 0 0 20%;
+  width: 20%;
   white-space: nowrap;
-  overflow: hidden;
-  text-overflow: ellipsis;
-}
-
-.mat-column-id {
-  flex: 1 1 20%;
-  white-space: nowrap;
-  overflow: hidden;
-  text-overflow: ellipsis;
-  padding-left: 2rem;
-}
-
-.mat-column-netaddr {
-  white-space: nowrap;
-  overflow: hidden;  
-  text-overflow: ellipsis;
+  & .ellipsis-parent {
+    display: flex;
+  }
 }
 
 .mat-column-actions {
diff --git a/src/app/cln/routing/failed-transactions/failed-transactions.component.html b/src/app/cln/routing/failed-transactions/failed-transactions.component.html
index 3df0125f..3af0f89f 100644
--- a/src/app/cln/routing/failed-transactions/failed-transactions.component.html
+++ b/src/app/cln/routing/failed-transactions/failed-transactions.component.html
@@ -69,7 +69,7 @@
           </div>
         </th>
         <td mat-cell *matCellDef="let fhEvent" class="px-3" fxLayoutAlign="end center">
-          <button mat-stroked-button color="primary" type="button" tabindex="4" (click)="onFailedEventClick(fhEvent)"class="table-actions-button">View Info</button>          
+          <button mat-stroked-button color="primary" type="button" tabindex="4" (click)="onFailedEventClick(fhEvent)" class="table-actions-button">View Info</button>          
         </td>
       </ng-container>
       <ng-container matColumnDef="no_event">
diff --git a/src/app/cln/routing/forwarding-history/forwarding-history.component.html b/src/app/cln/routing/forwarding-history/forwarding-history.component.html
index 9aa744a5..11cdfebc 100644
--- a/src/app/cln/routing/forwarding-history/forwarding-history.component.html
+++ b/src/app/cln/routing/forwarding-history/forwarding-history.component.html
@@ -71,7 +71,7 @@
           </div>
         </th>
         <td mat-cell *matCellDef="let fhEvent" class="pl-1 pr-3" fxLayoutAlign="end center">
-          <button mat-stroked-button color="primary" type="button" tabindex="4" (click)="onForwardingEventClick(fhEvent,$event)"class="table-actions-button">View Info</button>
+          <button mat-stroked-button color="primary" type="button" tabindex="4" (click)="onForwardingEventClick(fhEvent,$event)" class="table-actions-button">View Info</button>
         </td>
       </ng-container>
       <ng-container matColumnDef="no_event">
diff --git a/src/app/cln/routing/local-failed-transactions/local-failed-transactions.component.html b/src/app/cln/routing/local-failed-transactions/local-failed-transactions.component.html
index 35d2f2ef..433ba391 100644
--- a/src/app/cln/routing/local-failed-transactions/local-failed-transactions.component.html
+++ b/src/app/cln/routing/local-failed-transactions/local-failed-transactions.component.html
@@ -53,7 +53,7 @@
           </div>
         </th>
         <td mat-cell *matCellDef="let fhEvent" class="px-3" fxLayoutAlign="end center">
-          <button mat-stroked-button color="primary" type="button" tabindex="4" (click)="onFailedLocalEventClick(fhEvent)"class="table-actions-button">View Info</button>          
+          <button mat-stroked-button color="primary" type="button" tabindex="4" (click)="onFailedLocalEventClick(fhEvent)" class="table-actions-button">View Info</button>          
         </td>
       </ng-container>
       <ng-container matColumnDef="no_event">
diff --git a/src/app/cln/transactions/payments/lightning-payments.component.html b/src/app/cln/transactions/payments/lightning-payments.component.html
index b981a662..342c7122 100644
--- a/src/app/cln/transactions/payments/lightning-payments.component.html
+++ b/src/app/cln/transactions/payments/lightning-payments.component.html
@@ -102,7 +102,7 @@
               </div>
             </th>
             <td mat-cell *matCellDef="let payment" class="pr-3" fxLayoutAlign="end center">
-              <button mat-stroked-button color="primary" type="button" tabindex="4" (click)="onPaymentClick(payment)"class="table-actions-button">View Info</button>
+              <button mat-stroked-button color="primary" type="button" tabindex="4" (click)="onPaymentClick(payment)" class="table-actions-button">View Info</button>
             </td>
           </ng-container>
           <ng-container matColumnDef="no_payment">
diff --git a/src/app/eclair/graph/query-routes/query-routes.component.html b/src/app/eclair/graph/query-routes/query-routes.component.html
index 527185da..41c06059 100644
--- a/src/app/eclair/graph/query-routes/query-routes.component.html
+++ b/src/app/eclair/graph/query-routes/query-routes.component.html
@@ -48,7 +48,7 @@
                 <ng-container matColumnDef="actions">
                   <th mat-header-cell *matHeaderCellDef class="pl-4 pr-3"><span fxLayoutAlign="end center">Actions</span></th>
                   <td mat-cell *matCellDef="let hop" class="pl-4">
-                    <button mat-stroked-button color="primary" type="button" tabindex="4" (click)="onHopClick(hop)"class="table-actions-button">View Info</button>
+                    <button mat-stroked-button color="primary" type="button" tabindex="4" (click)="onHopClick(hop)" class="table-actions-button">View Info</button>
                   </td>
                 </ng-container>
                 <tr mat-header-row *matHeaderRowDef="displayedColumns"></tr>
diff --git a/src/app/eclair/on-chain/on-chain-transaction-history/on-chain-transaction-history.component.html b/src/app/eclair/on-chain/on-chain-transaction-history/on-chain-transaction-history.component.html
index e4d8e400..56e3d025 100644
--- a/src/app/eclair/on-chain/on-chain-transaction-history/on-chain-transaction-history.component.html
+++ b/src/app/eclair/on-chain/on-chain-transaction-history/on-chain-transaction-history.component.html
@@ -47,7 +47,7 @@
             </div>
           </th>
           <td mat-cell *matCellDef="let transaction" class="pl-3" fxLayoutAlign="end center">
-            <button mat-stroked-button color="primary" type="button" tabindex="4" (click)="onTransactionClick(transaction, $event)"class="table-actions-button">View Info</button>
+            <button mat-stroked-button color="primary" type="button" tabindex="4" (click)="onTransactionClick(transaction, $event)" class="table-actions-button">View Info</button>
           </td>
         </ng-container>
         <ng-container matColumnDef="no_transaction">
diff --git a/src/app/eclair/peers-channels/channels/channels-tables/channel-pending-table/channel-pending-table.component.html b/src/app/eclair/peers-channels/channels/channels-tables/channel-pending-table/channel-pending-table.component.html
index 1af24c93..8287c19b 100644
--- a/src/app/eclair/peers-channels/channels/channels-tables/channel-pending-table/channel-pending-table.component.html
+++ b/src/app/eclair/peers-channels/channels/channels-tables/channel-pending-table/channel-pending-table.component.html
@@ -36,7 +36,7 @@
           </div>
         </th>        
         <td mat-cell *matCellDef="let channel" class="pl-1" fxLayoutAlign="end center">
-          <button mat-stroked-button color="primary" type="button" tabindex="4" (click)="onChannelClick(channel, $event)"class="table-actions-button">View Info</button>
+          <button mat-stroked-button color="primary" type="button" tabindex="4" (click)="onChannelClick(channel, $event)" class="table-actions-button">View Info</button>
         </td>
       </ng-container>
       <ng-container matColumnDef="no_channel">
diff --git a/src/app/eclair/routing/forwarding-history/forwarding-history.component.html b/src/app/eclair/routing/forwarding-history/forwarding-history.component.html
index b8099eff..1c1fa251 100644
--- a/src/app/eclair/routing/forwarding-history/forwarding-history.component.html
+++ b/src/app/eclair/routing/forwarding-history/forwarding-history.component.html
@@ -46,7 +46,7 @@
           </div>
         </th>
         <td mat-cell *matCellDef="let fhEvent" class="px-3" fxLayoutAlign="end center">
-          <button mat-stroked-button color="primary" type="button" tabindex="4" (click)="onForwardingEventClick(fhEvent,$event)"class="table-actions-button">View Info</button>
+          <button mat-stroked-button color="primary" type="button" tabindex="4" (click)="onForwardingEventClick(fhEvent,$event)" class="table-actions-button">View Info</button>
         </td>
       </ng-container>
       <ng-container matColumnDef="no_event">
diff --git a/src/app/eclair/transactions/payments/lightning-payments.component.html b/src/app/eclair/transactions/payments/lightning-payments.component.html
index 5df8001f..1662295f 100644
--- a/src/app/eclair/transactions/payments/lightning-payments.component.html
+++ b/src/app/eclair/transactions/payments/lightning-payments.component.html
@@ -61,7 +61,7 @@
               </div>
             </th>
             <td mat-cell *matCellDef="let payment" class="px-3" fxLayoutAlign="end center">
-              <button mat-stroked-button color="primary" type="button" tabindex="4" (click)="onPaymentClick(payment)"class="table-actions-button">View Info</button>          
+              <button mat-stroked-button color="primary" type="button" tabindex="4" (click)="onPaymentClick(payment)" class="table-actions-button">View Info</button>          
             </td>
           </ng-container>
           <ng-container matColumnDef="no_payment">
diff --git a/src/app/lnd/graph/query-routes/query-routes.component.html b/src/app/lnd/graph/query-routes/query-routes.component.html
index 0ed74c1f..cfa41cfe 100644
--- a/src/app/lnd/graph/query-routes/query-routes.component.html
+++ b/src/app/lnd/graph/query-routes/query-routes.component.html
@@ -55,7 +55,7 @@
       <ng-container matColumnDef="actions">
         <th mat-header-cell *matHeaderCellDef class="pl-4 pr-3"><span fxLayoutAlign="end center">Actions</span></th>
         <td mat-cell *matCellDef="let hop" class="pl-4">
-          <button mat-stroked-button color="primary" type="button" tabindex="4" (click)="onHopClick(hop, $event)"class="table-actions-button">View Info</button>          
+          <button mat-stroked-button color="primary" type="button" tabindex="4" (click)="onHopClick(hop, $event)" class="table-actions-button">View Info</button>          
         </td>
       </ng-container>
       <tr mat-header-row *matHeaderRowDef="displayedColumns"></tr>
diff --git a/src/app/lnd/on-chain/utxo-tables/on-chain-transaction-history/on-chain-transaction-history.component.html b/src/app/lnd/on-chain/utxo-tables/on-chain-transaction-history/on-chain-transaction-history.component.html
index cb6e96c6..703ce9f3 100644
--- a/src/app/lnd/on-chain/utxo-tables/on-chain-transaction-history/on-chain-transaction-history.component.html
+++ b/src/app/lnd/on-chain/utxo-tables/on-chain-transaction-history/on-chain-transaction-history.component.html
@@ -46,7 +46,7 @@
             </div>
           </th>
           <td mat-cell *matCellDef="let transaction" class="pl-3" fxLayoutAlign="end center">
-            <button mat-stroked-button color="primary" type="button" tabindex="4" (click)="onTransactionClick(transaction)"class="table-actions-button">View Info</button>
+            <button mat-stroked-button color="primary" type="button" tabindex="4" (click)="onTransactionClick(transaction)" class="table-actions-button">View Info</button>
           </td>
         </ng-container>
         <ng-container matColumnDef="no_transaction">
diff --git a/src/app/lnd/peers-channels/channels/channels-tables/channel-closed-table/channel-closed-table.component.html b/src/app/lnd/peers-channels/channels/channels-tables/channel-closed-table/channel-closed-table.component.html
index b55d663d..eb8f36e1 100644
--- a/src/app/lnd/peers-channels/channels/channels-tables/channel-closed-table/channel-closed-table.component.html
+++ b/src/app/lnd/peers-channels/channels/channels-tables/channel-closed-table/channel-closed-table.component.html
@@ -47,7 +47,7 @@
         </th>
         <td mat-cell *matCellDef="let channel" class="pl-1">
           <span fxLayoutAlign="end center">
-            <button mat-stroked-button color="primary" type="button" tabindex="4" (click)="onClosedChannelClick(channel,$event)"class="table-actions-button">View Info</button>          
+            <button mat-stroked-button color="primary" type="button" tabindex="4" (click)="onClosedChannelClick(channel,$event)" class="table-actions-button">View Info</button>          
           </span>
         </td>
       </ng-container>
diff --git a/src/app/lnd/peers-channels/channels/channels-tables/channel-pending-table/channel-pending-table.component.html b/src/app/lnd/peers-channels/channels/channels-tables/channel-pending-table/channel-pending-table.component.html
index b4723502..1fcea9df 100644
--- a/src/app/lnd/peers-channels/channels/channels-tables/channel-pending-table/channel-pending-table.component.html
+++ b/src/app/lnd/peers-channels/channels/channels-tables/channel-pending-table/channel-pending-table.component.html
@@ -80,7 +80,7 @@
               <div class="bordered-box table-actions-select" fxLayoutAlign="center center">Actions</div>              
             </mat-header-cell>            
             <mat-cell fxLayoutAlign="end center" *matCellDef="let channel" class="pl-4">
-              <button mat-stroked-button color="primary" type="button" tabindex="2" (click)="onForceClosingClick(channel)"class="table-actions-button">View Info</button>          
+              <button mat-stroked-button color="primary" type="button" tabindex="2" (click)="onForceClosingClick(channel)" class="table-actions-button">View Info</button>          
             </mat-cell>
           </ng-container>
           <ng-container matColumnDef="no_pending_force_closing">
@@ -128,10 +128,10 @@
           </ng-container>
           <ng-container matColumnDef="actions">
             <mat-header-cell fxLayoutAlign="end center" class="pl-4 pr-3" *matHeaderCellDef>
-              <div class="bordered-box table-actions-select" fxLayoutAlign="center center">Actions</div>              
+              <div class="bordered-box table-actions-select" fxLayoutAlign="center center">Actions</div>
             </mat-header-cell>            
             <mat-cell fxLayoutAlign="end center" *matCellDef="let channel" class="pl-4">
-              <button mat-stroked-button color="primary" type="button" tabindex="3" (click)="onClosingClick(channel)"class="table-actions-button">View Info</button>          
+              <button mat-stroked-button color="primary" type="button" tabindex="3" (click)="onClosingClick(channel)" class="table-actions-button">View Info</button>          
             </mat-cell>
           </ng-container>
           <ng-container matColumnDef="no_pending_closing">
@@ -188,7 +188,7 @@
               <div class="bordered-box table-actions-select" fxLayoutAlign="center center">Actions</div>              
             </mat-header-cell>
             <mat-cell fxLayoutAlign="end center" *matCellDef="let channel" class="pl-4">
-              <button mat-stroked-button color="primary" type="button" tabindex="4" (click)="onWaitClosingClick(channel)"class="table-actions-button">View Info</button>          
+              <button mat-stroked-button color="primary" type="button" tabindex="4" (click)="onWaitClosingClick(channel)" class="table-actions-button">View Info</button>          
             </mat-cell>
           </ng-container>
           <ng-container matColumnDef="no_pending_wait_closing">
diff --git a/src/app/lnd/routing/forwarding-history/forwarding-history.component.html b/src/app/lnd/routing/forwarding-history/forwarding-history.component.html
index 850a5d63..f6664f40 100644
--- a/src/app/lnd/routing/forwarding-history/forwarding-history.component.html
+++ b/src/app/lnd/routing/forwarding-history/forwarding-history.component.html
@@ -43,7 +43,7 @@
           </div>
         </th>
         <td mat-cell *matCellDef="let fhEvent" class="pl-3" fxLayoutAlign="end center">
-          <button mat-stroked-button color="primary" type="button" tabindex="4" (click)="onForwardingEventClick(fhEvent,$event)"class="table-actions-button">View Info</button>          
+          <button mat-stroked-button color="primary" type="button" tabindex="4" (click)="onForwardingEventClick(fhEvent,$event)" class="table-actions-button">View Info</button>          
         </td>
       </ng-container>
       <ng-container matColumnDef="no_event">
diff --git a/src/app/lnd/routing/routing-peers/routing-peers.component.html b/src/app/lnd/routing/routing-peers/routing-peers.component.html
index e68ee735..861852ef 100644
--- a/src/app/lnd/routing/routing-peers/routing-peers.component.html
+++ b/src/app/lnd/routing/routing-peers/routing-peers.component.html
@@ -31,7 +31,7 @@
           <ng-container matColumnDef="actions">
             <th mat-header-cell *matHeaderCellDef class="pr-3"><span fxLayoutAlign="end center">Actions</span></th>
             <td mat-cell *matCellDef="let rPeer" class="pl-2" fxLayoutAlign="end center">
-              <button mat-stroked-button color="primary" type="button" tabindex="4" (click)="onRoutingPeerClick(rPeer, $event, 'in')"class="table-actions-button">View Info</button>
+              <button mat-stroked-button color="primary" type="button" tabindex="4" (click)="onRoutingPeerClick(rPeer, $event, 'in')" class="table-actions-button">View Info</button>
             </td>
           </ng-container>
           <ng-container matColumnDef="no_incoming_event">
@@ -78,7 +78,7 @@
           <ng-container matColumnDef="actions">
             <th mat-header-cell *matHeaderCellDef class="pr-3"><span fxLayoutAlign="end center">Actions</span></th>
             <td mat-cell *matCellDef="let rPeer" class="pl-2">
-              <button mat-stroked-button color="primary" type="button" tabindex="5" (click)="onRoutingPeerClick(rPeer, $event, 'out')"class="table-actions-button">View Info</button>
+              <button mat-stroked-button color="primary" type="button" tabindex="5" (click)="onRoutingPeerClick(rPeer, $event, 'out')" class="table-actions-button">View Info</button>
             </td>
           </ng-container>
           <ng-container matColumnDef="no_outgoing_event">
diff --git a/src/app/lnd/transactions/payments/lightning-payments.component.html b/src/app/lnd/transactions/payments/lightning-payments.component.html
index cf2d6ccd..435e0483 100644
--- a/src/app/lnd/transactions/payments/lightning-payments.component.html
+++ b/src/app/lnd/transactions/payments/lightning-payments.component.html
@@ -65,7 +65,7 @@
               </div>
             </th>
             <td mat-cell *matCellDef="let payment" class="px-2" fxLayoutAlign="end center">
-              <button mat-stroked-button color="primary" type="button" tabindex="4" (click)="onPaymentClick(payment)"class="table-actions-button">View Info</button>          
+              <button mat-stroked-button color="primary" type="button" tabindex="4" (click)="onPaymentClick(payment)" class="table-actions-button">View Info</button>          
             </td>
           </ng-container>
           <ng-container matColumnDef="no_payment">
diff --git a/src/app/shared/components/ln-services/boltz/swaps/swaps.component.html b/src/app/shared/components/ln-services/boltz/swaps/swaps.component.html
index caa42654..e4505360 100755
--- a/src/app/shared/components/ln-services/boltz/swaps/swaps.component.html
+++ b/src/app/shared/components/ln-services/boltz/swaps/swaps.component.html
@@ -117,7 +117,7 @@
           </th>
           <td mat-cell *matCellDef="let swap" class="pl-1" fxLayoutAlign="end center">
             <button mat-stroked-button color="primary" type="button" tabindex="4"
-              (click)="onSwapClick(swap, $event)"class="table-actions-button">View Info</button>
+              (click)="onSwapClick(swap, $event)" class="table-actions-button">View Info</button>
           </td>
         </ng-container>
         <ng-container matColumnDef="no_swap">
diff --git a/src/app/shared/components/ln-services/loop/swaps/swaps.component.html b/src/app/shared/components/ln-services/loop/swaps/swaps.component.html
index 3cd619a1..ef044f56 100755
--- a/src/app/shared/components/ln-services/loop/swaps/swaps.component.html
+++ b/src/app/shared/components/ln-services/loop/swaps/swaps.component.html
@@ -78,7 +78,7 @@
           </th>
           <td mat-cell *matCellDef="let swap" class="pl-3" fxLayoutAlign="end center">
             <button mat-stroked-button color="primary" type="button" tabindex="4"
-              (click)="onSwapClick(swap, $event)"class="table-actions-button">View Info</button>
+              (click)="onSwapClick(swap, $event)" class="table-actions-button">View Info</button>
           </td>
         </ng-container>
         <ng-container matColumnDef="no_swap">
diff --git a/src/app/shared/components/node-config/page-settings/page-settings.component.ts b/src/app/shared/components/node-config/page-settings/page-settings.component.ts
index fa7377f7..6f3fce96 100644
--- a/src/app/shared/components/node-config/page-settings/page-settings.component.ts
+++ b/src/app/shared/components/node-config/page-settings/page-settings.component.ts
@@ -69,11 +69,14 @@ export class PageSettingsComponent implements OnInit, OnDestroy {
               } else {
                 if (!nodeSettings?.enableOffers) {
                   const transactionsPage = updatedPageSettings.find((pg) => pg.pageId === 'transactions');
-                  transactionsPage?.tables.splice(transactionsPage?.tables.findIndex((tb) => tb.tableId === 'offers'), 1);
-                  transactionsPage?.tables.splice(transactionsPage?.tables.findIndex((tb) => tb.tableId === 'offer_bookmarks'), 1);
+                  const offerIdx = transactionsPage?.tables.findIndex((tb) => tb.tableId === 'offers');
+                  const offerBookmarkIdx = transactionsPage?.tables.findIndex((tb) => tb.tableId === 'offer_bookmarks');
+                  if (offerIdx > -1) { transactionsPage?.tables.splice(offerIdx, 1); }
+                  if (offerBookmarkIdx > -1) { transactionsPage?.tables.splice(offerBookmarkIdx, 1); }
                 }
                 if (!nodeSettings?.enablePeerswap) {
-                  updatedPageSettings.splice(updatedPageSettings.findIndex((pg) => pg.pageId === 'peerswap'), 1);
+                  const psIdx = updatedPageSettings.findIndex((pg) => pg.pageId === 'peerswap');
+                  if (psIdx > -1) { updatedPageSettings.splice(psIdx, 1); }
                 }
                 this.pageSettings = updatedPageSettings;
                 this.initialPageSettings = updatedPageSettings;
@@ -132,10 +135,12 @@ export class PageSettingsComponent implements OnInit, OnDestroy {
                 this.initialPageSettings = updatedPageSettings;
               } else {
                 if (!nodeSettings?.swapServerUrl || nodeSettings.swapServerUrl.trim() === '') {
-                  updatedPageSettings.splice(updatedPageSettings.findIndex((pg) => pg.pageId === 'loop'), 1);
+                  const loopIdx = updatedPageSettings.findIndex((pg) => pg.pageId === 'loop');
+                  if (loopIdx > -1) { updatedPageSettings.splice(loopIdx, 1); }
                 }
                 if (!nodeSettings?.boltzServerUrl || nodeSettings.boltzServerUrl.trim() === '') {
-                  updatedPageSettings.splice(updatedPageSettings.findIndex((pg) => pg.pageId === 'boltz'), 1);
+                  const boltzIdx = updatedPageSettings.findIndex((pg) => pg.pageId === 'boltz');
+                  if (boltzIdx > -1) { updatedPageSettings.splice(boltzIdx, 1); }
                 }
                 this.pageSettings = updatedPageSettings;
                 this.initialPageSettings = updatedPageSettings;
diff --git a/src/app/shared/components/transactions-report-table/transactions-report-table.component.html b/src/app/shared/components/transactions-report-table/transactions-report-table.component.html
index aadc998e..886db114 100644
--- a/src/app/shared/components/transactions-report-table/transactions-report-table.component.html
+++ b/src/app/shared/components/transactions-report-table/transactions-report-table.component.html
@@ -39,7 +39,7 @@
               </div>
             </th>
             <td mat-cell *matCellDef="let transaction" class="px-3" fxLayoutAlign="end center">
-              <button mat-stroked-button color="primary" type="button" tabindex="4" (click)="onTransactionClick(transaction)"class="table-actions-button">View Info</button>
+              <button mat-stroked-button color="primary" type="button" tabindex="4" (click)="onTransactionClick(transaction)" class="table-actions-button">View Info</button>
             </td>
           </ng-container>
           <ng-container matColumnDef="no_transaction">
diff --git a/src/app/shared/services/consts-enums-functions.ts b/src/app/shared/services/consts-enums-functions.ts
index 838a44b2..69c7c780 100644
--- a/src/app/shared/services/consts-enums-functions.ts
+++ b/src/app/shared/services/consts-enums-functions.ts
@@ -740,6 +740,16 @@ export const CLN_DEFAULT_PAGE_SETTINGS: PageSettings[] = [
     { tableId: 'transactions', recordsPerPage: PAGE_SIZE, sortBy: 'date', sortOrder: SortOrderEnum.DESCENDING,
       columnSelectionSM: ['date', 'amount_paid', 'amount_received'],
       columnSelection: ['date', 'amount_paid', 'num_payments', 'amount_received', 'num_invoices'] }
+  ] },
+  { pageId: 'graph_lookup', tables: [
+    { tableId: 'query_routes', recordsPerPage: PAGE_SIZE, sortBy: 'msatoshi', sortOrder: SortOrderEnum.DESCENDING,
+      columnSelectionSM: ['alias', 'direction', 'msatoshi'],
+      columnSelection: ['alias', 'channel', 'direction', 'delay', 'msatoshi'] }
+  ] },
+  { pageId: 'peerswap', tables: [
+    { tableId: 'swaps', recordsPerPage: PAGE_SIZE, sortBy: '', sortOrder: SortOrderEnum.DESCENDING,
+      columnSelectionSM: [],
+      columnSelection: [] }
   ] }
 ];
 
@@ -819,6 +829,18 @@ export const CLN_TABLES_DEF = {
       maxColumns: 5,
       allowedColumns: ['date', 'amount_paid', 'num_payments', 'amount_received', 'num_invoices']
     }
+  },
+  graph_lookup: {
+    query_routes: {
+      maxColumns: 6,
+      allowedColumns: ['id', 'alias', 'channel', 'direction', 'delay', 'msatoshi']
+    }
+  },
+  peerswap: {
+    swaps: {
+      maxColumns: 5,
+      allowedColumns: []
+    }
   }
 };