From 619a6bd34d5fe4c088aea856cf11c0ec2ceeca1c Mon Sep 17 00:00:00 2001
From: Mononaut <github@monospace.live>
Date: Thu, 29 Sep 2022 15:41:14 +0000
Subject: [PATCH] Toggle option for tx flow diagram w/ query param

---
 .../transaction/transaction.component.html    | 126 ++++++++++--------
 .../transaction/transaction.component.scss    |  34 ++++-
 .../transaction/transaction.component.ts      |  25 +++-
 3 files changed, 129 insertions(+), 56 deletions(-)

diff --git a/frontend/src/app/components/transaction/transaction.component.html b/frontend/src/app/components/transaction/transaction.component.html
index 81d3778f8..5b35fc7b1 100644
--- a/frontend/src/app/components/transaction/transaction.component.html
+++ b/frontend/src/app/components/transaction/transaction.component.html
@@ -190,39 +190,55 @@
 
     <br>
 
-    <div class="title">
-      <h2 i18n="transaction.flow|Transaction flow">Flow</h2>
-    </div>
-
-    <div class="box">
-      <div class="graph-container" #graphContainer>
-        <tx-bowtie-graph
-          [tx]="tx"
-          [width]="graphWidth"
-          [height]="graphExpanded ? (maxInOut * 15) : graphHeight"
-          [lineLimit]="inOutLimit"
-          [maxStrands]="graphExpanded ? maxInOut : 24"
-          [network]="network"
-          [tooltip]="true">
-        </tx-bowtie-graph>
+    <ng-container *ngIf="showFlow; else flowPlaceholder">
+      <div class="title float-left">
+        <h2 id="flow" i18n="transaction.flow|Transaction flow">Flow</h2>
       </div>
-      <div class="toggle-wrapper" *ngIf="maxInOut > 24">
-        <button class="btn btn-sm btn-primary graph-toggle" (click)="expandGraph();" *ngIf="!graphExpanded; else collapseBtn"><span i18n="show-more">Show more</span></button>
-        <ng-template #collapseBtn>
-          <button class="btn btn-sm btn-primary graph-toggle" (click)="collapseGraph();"><span i18n="show-less">Show less</span></button>
-        </ng-template>
+
+      <button type="button" class="btn btn-outline-info flow-toggle btn-sm float-right" (click)="toggleGraph()" i18n="hide-flow-diagram">Hide flow diagram</button>
+
+      <div class="clearfix"></div>
+
+      <div class="box">
+        <div class="graph-container" #graphContainer>
+          <tx-bowtie-graph
+            [tx]="tx"
+            [width]="graphWidth"
+            [height]="graphExpanded ? (maxInOut * 15) : graphHeight"
+            [lineLimit]="inOutLimit"
+            [maxStrands]="graphExpanded ? maxInOut : 24"
+            [network]="network"
+            [tooltip]="true">
+          </tx-bowtie-graph>
+        </div>
+        <div class="toggle-wrapper" *ngIf="maxInOut > 24">
+          <button class="btn btn-sm btn-primary graph-toggle" (click)="expandGraph();" *ngIf="!graphExpanded; else collapseBtn"><span i18n="show-more">Show more</span></button>
+          <ng-template #collapseBtn>
+            <button class="btn btn-sm btn-primary graph-toggle" (click)="collapseGraph();"><span i18n="show-less">Show less</span></button>
+          </ng-template>
+        </div>
+      </div>
+
+      <br>
+    </ng-container>
+    <ng-template #flowPlaceholder>
+      <div class="box hidden">
+        <div class="graph-container" #graphContainer>
+        </div>
+      </div>
+    </ng-template>
+
+    <div class="subtitle-block">
+      <div class="title">
+        <h2 i18n="transaction.inputs-and-outputs|Transaction inputs and outputs">Inputs & Outputs</h2>
+      </div>
+
+      <div class="title-buttons">
+        <button *ngIf="!showFlow" type="button" class="btn btn-outline-info flow-toggle btn-sm" (click)="toggleGraph()" i18n="show">Show flow diagram</button>
+        <button type="button" class="btn btn-outline-info btn-sm" (click)="txList.toggleDetails()" i18n="transaction.details|Transaction Details">Details</button>
       </div>
     </div>
 
-    <br>
-
-    <div class="title float-left">
-      <h2 i18n="transaction.inputs-and-outputs|Transaction inputs and outputs">Inputs & Outputs</h2>
-    </div>
-
-    <button type="button" class="btn btn-outline-info details-button btn-sm float-right" (click)="txList.toggleDetails()" i18n="transaction.details|Transaction Details">Details</button>
-
-    <div class="clearfix"></div>
 
     <app-transactions-list #txList [transactions]="[tx]" [errorUnblinded]="errorUnblinded" [outputIndex]="outputIndex" [transactionPage]="true"></app-transactions-list>
 
@@ -309,35 +325,37 @@
 
     <br>
 
-    <div class="title">
-      <h2 i18n="transaction.diagram|Transaction diagram">Diagram</h2>
-    </div>
+    <ng-container *ngIf="showFlow">
+      <div class="title">
+        <h2 i18n="transaction.flow|Transaction flow">Flow</h2>
+      </div>
 
-    <div class="box">
-      <div class="graph-container" #graphContainer style="visibility: hidden;"></div>
-      <div class="row">
-        <div class="col-sm">
-          <table class="table table-borderless table-striped">
-            <tbody>
-              <tr>
-                <td><span class="skeleton-loader"></span></td>
-              </tr>
-            </tbody>
-          </table>
-        </div>
-        <div class="col-sm">
-          <table class="table table-borderless table-striped">
-            <tbody>
-              <tr>
-                <td><span class="skeleton-loader"></span></td>
-              </tr>
-            </tbody>
-          </table>
+      <div class="box">
+        <div class="graph-container" #graphContainer style="visibility: hidden;"></div>
+        <div class="row">
+          <div class="col-sm">
+            <table class="table table-borderless table-striped">
+              <tbody>
+                <tr>
+                  <td><span class="skeleton-loader"></span></td>
+                </tr>
+              </tbody>
+            </table>
+          </div>
+          <div class="col-sm">
+            <table class="table table-borderless table-striped">
+              <tbody>
+                <tr>
+                  <td><span class="skeleton-loader"></span></td>
+                </tr>
+              </tbody>
+            </table>
+          </div>
         </div>
       </div>
-    </div>
 
-    <br>
+      <br>
+    </ng-container>
 
     <div class="title">
       <h2 i18n="transaction.inputs-and-outputs|Transaction inputs and outputs">Inputs & Outputs</h2>
diff --git a/frontend/src/app/components/transaction/transaction.component.scss b/frontend/src/app/components/transaction/transaction.component.scss
index ec514369f..e0e7d79fe 100644
--- a/frontend/src/app/components/transaction/transaction.component.scss
+++ b/frontend/src/app/components/transaction/transaction.component.scss
@@ -73,6 +73,15 @@
 	}
 }
 
+.box.hidden {
+  visibility: hidden;
+  height: 0px;
+  padding-top: 0px;
+  padding-bottom: 0px;
+  margin-top: 0px;
+  margin-bottom: 0px;
+}
+
 .graph-container {
   position: relative;
   width: 100%;
@@ -150,10 +159,33 @@
 	}
 }
 
-.details-button {
+.details-button, .flow-toggle {
   margin-top: -5px;
+  margin-left: 10px;
 	@media (min-width: 768px){
 		display: inline-block;
     margin-top: 0px;
+    margin-bottom: 0px;
 	}
 }
+
+.subtitle-block {
+  display: flex;
+  flex-direction: row;
+  align-items: baseline;
+  justify-content: space-between;
+
+  .title {
+    flex-shrink: 0;
+  }
+
+  .title-buttons {
+    flex-shrink: 1;
+    text-align: right;
+    .btn {
+      margin-top: 0;
+      margin-bottom: 8px;
+      margin-left: 8px;
+    }
+  }
+}
\ No newline at end of file
diff --git a/frontend/src/app/components/transaction/transaction.component.ts b/frontend/src/app/components/transaction/transaction.component.ts
index 3c29f210d..1db6e8f09 100644
--- a/frontend/src/app/components/transaction/transaction.component.ts
+++ b/frontend/src/app/components/transaction/transaction.component.ts
@@ -1,6 +1,6 @@
 import { Component, OnInit, AfterViewInit, OnDestroy, HostListener, ViewChild, ElementRef } from '@angular/core';
 import { ElectrsApiService } from '../../services/electrs-api.service';
-import { ActivatedRoute, ParamMap } from '@angular/router';
+import { ActivatedRoute, ParamMap, Router } from '@angular/router';
 import {
   switchMap,
   filter,
@@ -39,6 +39,7 @@ export class TransactionComponent implements OnInit, AfterViewInit, OnDestroy {
   fetchCpfpSubscription: Subscription;
   txReplacedSubscription: Subscription;
   blocksSubscription: Subscription;
+  queryParamsSubscription: Subscription;
   rbfTransaction: undefined | Transaction;
   cpfpInfo: CpfpInfo | null;
   showCpfpDetails = false;
@@ -47,6 +48,7 @@ export class TransactionComponent implements OnInit, AfterViewInit, OnDestroy {
   timeAvg$: Observable<number>;
   liquidUnblinding = new LiquidUnblinding();
   outputIndex: number;
+  showFlow: boolean = true;
   graphExpanded: boolean = false;
   graphWidth: number = 1000;
   graphHeight: number = 360;
@@ -60,6 +62,7 @@ export class TransactionComponent implements OnInit, AfterViewInit, OnDestroy {
 
   constructor(
     private route: ActivatedRoute,
+    private router: Router,
     private electrsApiService: ElectrsApiService,
     private stateService: StateService,
     private websocketService: WebsocketService,
@@ -231,6 +234,15 @@ export class TransactionComponent implements OnInit, AfterViewInit, OnDestroy {
       }
       this.rbfTransaction = rbfTransaction;
     });
+
+    this.queryParamsSubscription = this.route.queryParams.subscribe((params) => {
+      if (params.showFlow === 'false') {
+        this.showFlow = false;
+      } else {
+        this.showFlow = true;
+        this.setGraphSize();
+      }
+    });
   }
 
   ngAfterViewInit(): void {
@@ -304,6 +316,16 @@ export class TransactionComponent implements OnInit, AfterViewInit, OnDestroy {
     this.graphHeight = Math.min(360, this.maxInOut * 80);
   }
 
+  toggleGraph() {
+    this.showFlow = !this.showFlow;
+    this.router.navigate([], {
+      relativeTo: this.route,
+      queryParams: { showFlow: this.showFlow },
+      queryParamsHandling: 'merge',
+      fragment: 'flow'
+    });
+  }
+
   expandGraph() {
     this.graphExpanded = true;
   }
@@ -324,6 +346,7 @@ export class TransactionComponent implements OnInit, AfterViewInit, OnDestroy {
     this.fetchCpfpSubscription.unsubscribe();
     this.txReplacedSubscription.unsubscribe();
     this.blocksSubscription.unsubscribe();
+    this.queryParamsSubscription.unsubscribe();
     this.leaveTransaction();
   }
 }