machankura/mempool
3
0
Fork 0
Code Issues Pull Requests Actions Packages Projects Releases Wiki Activity

Merge pull request #2721 from mononaut/fix-squashed-flow-diagram

Browse Source 
fix squashed tx flow diagram
This commit is contained in:
wiz 2022-11-22 18:57:22 +09:00 committed by GitHub
commit ca33a629cf
No known key found for this signature in database
GPG Key ID: 4AEE18F83AFDEB23
3 changed files with 7 additions and 4 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

2
frontend/src/app/components/transaction/transaction.component.html
View File

@ -204,7 +204,7 @@
<tx-bowtie-graph <tx-bowtie-graph
[tx]="tx" [tx]="tx"
[width]="graphWidth" [width]="graphWidth"
[height]="graphExpanded ? (maxInOut * 15) : graphHeight" [height]="graphHeight"
[lineLimit]="inOutLimit" [lineLimit]="inOutLimit"
[maxStrands]="graphExpanded ? maxInOut : 24" [maxStrands]="graphExpanded ? maxInOut : 24"
[network]="network" [network]="network"

5
frontend/src/app/components/transaction/transaction.component.ts
View File

@ -226,6 +226,7 @@ export class TransactionComponent implements OnInit, AfterViewInit, OnDestroy {
this.waitingForTransaction = false; this.waitingForTransaction = false;
this.setMempoolBlocksSubscription(); this.setMempoolBlocksSubscription();
this.websocketService.startTrackTransaction(tx.txid); this.websocketService.startTrackTransaction(tx.txid);
this.graphExpanded = false;
this.setupGraph(); this.setupGraph();
if (!tx.status.confirmed && tx.firstSeen) { if (!tx.status.confirmed && tx.firstSeen) {
@ -364,7 +365,7 @@ export class TransactionComponent implements OnInit, AfterViewInit, OnDestroy {
setupGraph() { setupGraph() {
this.maxInOut = Math.min(this.inOutLimit, Math.max(this.tx?.vin?.length || 1, this.tx?.vout?.length + 1 || 1)); 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() { toggleGraph() {
@ -384,10 +385,12 @@ export class TransactionComponent implements OnInit, AfterViewInit, OnDestroy {
expandGraph() { expandGraph() {
this.graphExpanded = true; this.graphExpanded = true;
this.graphHeight = this.maxInOut * 15;
} }
collapseGraph() { collapseGraph() {
this.graphExpanded = false; this.graphExpanded = false;
this.graphHeight = Math.min(360, this.maxInOut * 80);
} }
// simulate normal anchor fragment behavior // simulate normal anchor fragment behavior

4
frontend/src/app/components/tx-bowtie-graph/tx-bowtie-graph.component.ts
View File

@ -298,7 +298,7 @@ export class TxBowtieGraphComponent implements OnInit, OnChanges {
// required to prevent this line overlapping its neighbor // required to prevent this line overlapping its neighbor
if (this.tooltip || !xputs[i].rest) { 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 y1 = line.outerY;
const y2 = line.innerY; const y2 = line.innerY;
const t = (lastWeight + line.weight) / 2; // distance between center of this line and center of previous line 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 { makePath(side: 'in' | 'out', outer: number, inner: number, weight: number, offset: number, pad: number): string {
const start = (weight * 0.5) + this.connectorWidth; 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 end = this.width / 2 - (this.midWidth * 0.9) + 1;
const curveEnd = end - offset - 10; const curveEnd = end - offset - 10;
const midpoint = (curveStart + curveEnd) / 2; const midpoint = (curveStart + curveEnd) / 2;