Dashboard ux fixes.

frontend/src/app/dashboard/dashboard.component.html

@@ -22,7 +22,7 @@
       </div>
     </div>
     <div class="col mb-4">
-      <div class="card text-center">
+      <div class="card text-center graph-card">
         <div class="card-body pl-0">
           <div style="padding-left: 1.25rem;">
             <table style="width: 100%;">
@@ -50,8 +50,8 @@
       </div>
     </div>
     <div class="col mb-4">
-      <div class="card text-center">
+      <div class="card text-center graph-card">
-        <div class="card-body more-padding">
+        <div class="card-body ">
           <h5 class="card-title">Tx weight per second</h5>
             <ng-template [ngIf]="mempoolInfoData.value" [ngIfElse]="loading">
               <span *ngIf="mempoolInfoData.value.vBytesPerSecond === 0; else inSync">
@@ -112,14 +112,14 @@
             <thead>
               <th style="width: 20%;">TXID</th>
               <th style="width: 35%;" class="text-right d-none d-lg-table-cell">Amount</th>
-              <th *ngIf="(network$ | async) !== 'liquid'" style="width: 20%;" class="text-right d-none d-lg-table-cell">USD</th>
+              <th *ngIf="(network$ | async) === ''" style="width: 20%;" class="text-right d-none d-lg-table-cell">USD</th>
               <th style="width: 25%;" class="text-right">Fee</th>
             </thead>
             <tbody>
               <tr *ngFor="let transaction of transactions$ | async; let i = index;">
                 <td><a [routerLink]="['/tx' | relativeUrl, transaction.txid]">{{ transaction.txid | shortenString : 10 }}</a></td>
                 <td class="text-right d-none d-lg-table-cell"><app-amount [satoshis]="transaction.value" digitsInfo="1.8-8" [noFiat]="true"></app-amount></td>
-                <td *ngIf="(network$ | async) !== 'liquid'" class="text-right d-none d-lg-table-cell"><app-fiat [value]="transaction.value" digitsInfo="1.0-0"></app-fiat></td>
+                <td *ngIf="(network$ | async) === ''" class="text-right d-none d-lg-table-cell"><app-fiat [value]="transaction.value" digitsInfo="1.0-0"></app-fiat></td>
                 <td class="text-right">{{ transaction.fee / (transaction.weight / 4) | number : '1.1-1' }} sat/vB</td>
               </tr>
             </tbody>

frontend/src/app/dashboard/dashboard.component.scss

@@ -30,3 +30,7 @@
 .more-padding {
   padding: 1.25rem 2rem 1.25rem 2rem;
 }
+
+.graph-card {
+  height: 385px;
+}

frontend/src/app/dashboard/dashboard.component.ts

@@ -1,6 +1,6 @@
 import { ChangeDetectionStrategy, Component, Inject, LOCALE_ID, OnInit } from '@angular/core';
 import { combineLatest, merge, Observable, of } from 'rxjs';
-import { map, scan, share, switchMap, tap } from 'rxjs/operators';
+import { filter, map, scan, share, switchMap, tap } from 'rxjs/operators';
 import { Block } from '../interfaces/electrs.interface';
 import { OptimizedMempoolStats } from '../interfaces/node-api.interface';
 import { MempoolInfo, TransactionStripped } from '../interfaces/websocket.interface';
@@ -158,29 +158,30 @@ export class DashboardComponent implements OnInit {
         map((txs) => txs.slice(0, 6)),
       );
 
-    this.mempoolStats$ = this.apiService.list2HStatistics$()
+    this.mempoolStats$ = this.stateService.connectionState$.pipe(
-      .pipe(
+      filter((state) => state === 2),
-        switchMap((mempoolStats) => {
+      switchMap(() => this.apiService.list2HStatistics$()),
-          return merge(
+      switchMap((mempoolStats) => {
-            this.stateService.live2Chart$
+        return merge(
-              .pipe(
+          this.stateService.live2Chart$
-                scan((acc, stats) => {
+            .pipe(
-                  acc.unshift(stats);
+              scan((acc, stats) => {
-                  acc = acc.slice(0, acc.length - 1);
+                acc.unshift(stats);
-                  return acc;
+                acc = acc.slice(0, acc.length - 1);
-                }, mempoolStats)
+                return acc;
-              ),
+              }, mempoolStats)
-            of(mempoolStats)
+            ),
-          );
+          of(mempoolStats)
-        }),
+        );
-        map((mempoolStats) => {
+      }),
-          return {
+      map((mempoolStats) => {
-            mempool: mempoolStats,
+        return {
-            weightPerSecond: this.handleNewMempoolData(mempoolStats.concat([])),
+          mempool: mempoolStats,
-          };
+          weightPerSecond: this.handleNewMempoolData(mempoolStats.concat([])),
-        }),
+        };
-        share(),
+      }),
-      );
+      share(),
+    );
 
     this.transactionsWeightPerSecondOptions = {
         showArea: false,