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

Improve tx flow diagram drawing algorithm

Browse Source
This commit is contained in:
Mononaut
2022-09-23 19:03:21 +00:00
parent 5239e04909
commit 51b252e625
3 changed files with 116 additions and 48 deletions
Download Patch File Download Diff File Expand all files Collapse all files

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

@@ -191,12 +191,20 @@
<br>
<div class="title">
<h2 i18n="transaction.diagram|Transaction diagram">Diagram</h2>
<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" [maxStrands]="graphExpanded ? maxInOut : 24" [network]="network" [tooltip]="true"></tx-bowtie-graph>
<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>

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

@@ -50,7 +50,9 @@ export class TransactionComponent implements OnInit, AfterViewInit, OnDestroy {
graphExpanded: boolean = false;
graphWidth: number = 1000;
graphHeight: number = 360;
inOutLimit: number = 150;
maxInOut: number = 0;
tooltipPosition: { x: number, y: number };
@ViewChild('graphContainer')
@@ -298,7 +300,7 @@ export class TransactionComponent implements OnInit, AfterViewInit, OnDestroy {
}
setupGraph() {
this.maxInOut = Math.min(250, 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);
}