From 7bafeefa9569e720469a5837b0ddd2303a793bad Mon Sep 17 00:00:00 2001
From: Mononaut <github@monospace.live>
Date: Tue, 22 Nov 2022 16:30:04 +0900
Subject: [PATCH] fix squashed tx flow diagram

---
 .../app/components/transaction/transaction.component.html    | 2 +-
 .../src/app/components/transaction/transaction.component.ts  | 5 ++++-
 .../components/tx-bowtie-graph/tx-bowtie-graph.component.ts  | 4 ++--
 3 files changed, 7 insertions(+), 4 deletions(-)

diff --git a/frontend/src/app/components/transaction/transaction.component.html b/frontend/src/app/components/transaction/transaction.component.html
index cd0cd716d..d478da053 100644
--- a/frontend/src/app/components/transaction/transaction.component.html
+++ b/frontend/src/app/components/transaction/transaction.component.html
@@ -204,7 +204,7 @@
           <tx-bowtie-graph
             [tx]="tx"
             [width]="graphWidth"
-            [height]="graphExpanded ? (maxInOut * 15) : graphHeight"
+            [height]="graphHeight"
             [lineLimit]="inOutLimit"
             [maxStrands]="graphExpanded ? maxInOut : 24"
             [network]="network"
diff --git a/frontend/src/app/components/transaction/transaction.component.ts b/frontend/src/app/components/transaction/transaction.component.ts
index f5a22d929..1c20be732 100644
--- a/frontend/src/app/components/transaction/transaction.component.ts
+++ b/frontend/src/app/components/transaction/transaction.component.ts
@@ -226,6 +226,7 @@ export class TransactionComponent implements OnInit, AfterViewInit, OnDestroy {
           this.waitingForTransaction = false;
           this.setMempoolBlocksSubscription();
           this.websocketService.startTrackTransaction(tx.txid);
+          this.graphExpanded = false;
           this.setupGraph();
 
           if (!tx.status.confirmed && tx.firstSeen) {
@@ -364,7 +365,7 @@ export class TransactionComponent implements OnInit, AfterViewInit, OnDestroy {
 
   setupGraph() {
     this.maxInOut = Math.min(this.inOutLimit, Math.max(this.tx?.vin?.length || 1, this.tx?.vout?.length + 1 || 1));
-    this.graphHeight = Math.min(360, this.maxInOut * 80);
+    this.graphHeight = this.graphExpanded ? this.maxInOut * 15 : Math.min(360, this.maxInOut * 80);
   }
 
   toggleGraph() {
@@ -384,10 +385,12 @@ export class TransactionComponent implements OnInit, AfterViewInit, OnDestroy {
 
   expandGraph() {
     this.graphExpanded = true;
+    this.graphHeight = this.maxInOut * 15;
   }
 
   collapseGraph() {
     this.graphExpanded = false;
+    this.graphHeight = Math.min(360, this.maxInOut * 80);
   }
 
   // simulate normal anchor fragment behavior
diff --git a/frontend/src/app/components/tx-bowtie-graph/tx-bowtie-graph.component.ts b/frontend/src/app/components/tx-bowtie-graph/tx-bowtie-graph.component.ts
index 3e4c87678..74eb4c67b 100644
--- a/frontend/src/app/components/tx-bowtie-graph/tx-bowtie-graph.component.ts
+++ b/frontend/src/app/components/tx-bowtie-graph/tx-bowtie-graph.component.ts
@@ -298,7 +298,7 @@ export class TxBowtieGraphComponent implements OnInit, OnChanges {
       // required to prevent this line overlapping its neighbor
 
       if (this.tooltip || !xputs[i].rest) {
-        const w = (this.width - Math.max(lastWeight, line.weight) - (2 * this.connectorWidth)) / 2; // approximate horizontal width of the curved section of the line
+        const w = (this.txWidth - Math.max(lastWeight, line.weight) - (this.connectorWidth * 2)) / 2; // approximate horizontal width of the curved section of the line
         const y1 = line.outerY;
         const y2 = line.innerY;
         const t = (lastWeight + line.weight) / 2; // distance between center of this line and center of previous line
@@ -356,7 +356,7 @@ export class TxBowtieGraphComponent implements OnInit, OnChanges {
 
   makePath(side: 'in' | 'out', outer: number, inner: number, weight: number, offset: number, pad: number): string {
     const start = (weight * 0.5) + this.connectorWidth;
-    const curveStart = Math.max(start + 5, pad - offset);
+    const curveStart = Math.max(start + 5, pad + this.connectorWidth - offset);
     const end =  this.width / 2 - (this.midWidth * 0.9) + 1;
     const curveEnd = end - offset - 10;
     const midpoint = (curveStart + curveEnd) / 2;