Save flow diagram preference to localStorage

frontend/src/app/components/transaction/transaction.component.html

@@ -190,7 +190,7 @@
 
     <br>
 
-    <ng-container *ngIf="showFlow; else flowPlaceholder">
+    <ng-container *ngIf="flowEnabled; else flowPlaceholder">
       <div class="title float-left">
         <h2 id="flow" i18n="transaction.flow|Transaction flow">Flow</h2>
       </div>
@@ -238,7 +238,7 @@
       </div>
 
       <div class="title-buttons">
-        <button *ngIf="!showFlow" type="button" class="btn btn-outline-info flow-toggle btn-sm" (click)="toggleGraph()" i18n="show-diagram">Show diagram</button>
+        <button *ngIf="!flowEnabled" type="button" class="btn btn-outline-info flow-toggle btn-sm" (click)="toggleGraph()" i18n="show-diagram">Show diagram</button>
         <button type="button" class="btn btn-outline-info btn-sm" (click)="txList.toggleDetails()" i18n="transaction.details|Transaction Details">Details</button>
       </div>
     </div>
@@ -329,7 +329,7 @@
 
     <br>
 
-    <ng-container *ngIf="showFlow">
+    <ng-container *ngIf="flowEnabled">
       <div class="title">
         <h2 i18n="transaction.flow|Transaction flow">Flow</h2>
       </div>

frontend/src/app/components/transaction/transaction.component.ts

@@ -49,12 +49,15 @@ export class TransactionComponent implements OnInit, AfterViewInit, OnDestroy {
   liquidUnblinding = new LiquidUnblinding();
   inputIndex: number;
   outputIndex: number;
-  showFlow: boolean = true;
   graphExpanded: boolean = false;
   graphWidth: number = 1000;
   graphHeight: number = 360;
   inOutLimit: number = 150;
   maxInOut: number = 0;
+  flowPrefSubscription: Subscription;
+  hideFlow: boolean = this.stateService.hideFlow.value;
+  overrideFlowPreference: boolean = null;
+  flowEnabled: boolean;
 
   tooltipPosition: { x: number, y: number };
 
@@ -78,6 +81,12 @@ export class TransactionComponent implements OnInit, AfterViewInit, OnDestroy {
       (network) => (this.network = network)
     );
 
+    this.setFlowEnabled();
+    this.flowPrefSubscription = this.stateService.hideFlow.subscribe((hide) => {
+      this.hideFlow = !!hide;
+      this.setFlowEnabled();
+    });
+
     this.timeAvg$ = timer(0, 1000)
       .pipe(
         switchMap(() => this.stateService.difficultyAdjustment$),
@@ -245,11 +254,14 @@ export class TransactionComponent implements OnInit, AfterViewInit, OnDestroy {
 
     this.queryParamsSubscription = this.route.queryParams.subscribe((params) => {
       if (params.showFlow === 'false') {
-        this.showFlow = false;
+        this.overrideFlowPreference = false;
+      } else if (params.showFlow === 'true') {
+        this.overrideFlowPreference = true;
       } else {
-        this.showFlow = true;
-        this.setGraphSize();
+        this.overrideFlowPreference = null;
       }
+      this.setFlowEnabled();
+      this.setGraphSize();
     });
   }
 
@@ -325,15 +337,20 @@ export class TransactionComponent implements OnInit, AfterViewInit, OnDestroy {
   }
 
   toggleGraph() {
-    this.showFlow = !this.showFlow;
+    const showFlow = !this.flowEnabled;
+    this.stateService.hideFlow.next(!showFlow);
     this.router.navigate([], {
       relativeTo: this.route,
-      queryParams: { showFlow: this.showFlow },
+      queryParams: { showFlow: showFlow },
       queryParamsHandling: 'merge',
       fragment: 'flow'
     });
   }
 
+  setFlowEnabled() {
+    this.flowEnabled = (this.overrideFlowPreference != null ? this.overrideFlowPreference : !this.hideFlow);
+  }
+
   expandGraph() {
     this.graphExpanded = true;
   }
@@ -365,6 +382,7 @@ export class TransactionComponent implements OnInit, AfterViewInit, OnDestroy {
     this.txReplacedSubscription.unsubscribe();
     this.blocksSubscription.unsubscribe();
     this.queryParamsSubscription.unsubscribe();
+    this.flowPrefSubscription.unsubscribe();
     this.leaveTransaction();
   }
 }

frontend/src/app/services/state.service.ts

@@ -110,6 +110,7 @@ export class StateService {
 
   blockScrolling$: Subject<boolean> = new Subject<boolean>();
   timeLtr: BehaviorSubject<boolean>;
+  hideFlow: BehaviorSubject<boolean>;
 
   constructor(
     @Inject(PLATFORM_ID) private platformId: any,
@@ -159,6 +160,16 @@ export class StateService {
     this.timeLtr.subscribe((ltr) => {
       this.storageService.setValue('time-preference-ltr', ltr ? 'true' : 'false');
     });
+
+    const savedFlowPreference = this.storageService.getValue('flow-preference');
+    this.hideFlow = new BehaviorSubject<boolean>(savedFlowPreference === 'hide');
+    this.hideFlow.subscribe((hide) => {
+      if (hide) {
+        this.storageService.setValue('flow-preference', hide ? 'hide' : 'show');
+      } else {
+        this.storageService.removeItem('flow-preference');
+      }
+    });
   }
 
   setNetworkBasedonUrl(url: string) {

frontend/src/app/services/storage.service.ts

@@ -46,4 +46,12 @@ export class StorageService {
       console.log(e);
     }
   }
+
+  removeItem(key: string): void {
+    try {
+      localStorage.removeItem(key);
+    } catch (e) {
+      console.log(e);
+    }
+  }
 }