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

Merge pull request #2804 from mempool/mononaut/zero-value-tx-diagrams

Browse Source 
Handle zero-value flow diagram edge case
This commit is contained in:
wiz 2022-12-26 20:16:56 +09:00 committed by GitHub
commit 313df79e33
No known key found for this signature in database
GPG Key ID: 4AEE18F83AFDEB23
2 changed files with 20 additions and 3 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

14
frontend/src/app/components/tx-bowtie-graph/tx-bowtie-graph.component.html
View File

@ -88,7 +88,7 @@
<stop offset="100%" stop-color="transparent" /> <stop offset="100%" stop-color="transparent" />
</linearGradient> </linearGradient>
</defs> </defs>
<path [attr.d]="middle.path" class="line middle" [style]="middle.style"/> <path *ngIf="hasLine" [attr.d]="middle.path" class="line middle" [style]="middle.style"/>
<ng-container *ngFor="let input of inputs; let i = index"> <ng-container *ngFor="let input of inputs; let i = index">
<path *ngIf="connectors && !inputData[i].coinbase && !inputData[i].pegin" <path *ngIf="connectors && !inputData[i].coinbase && !inputData[i].pegin"
[attr.d]="input.connectorPath" [attr.d]="input.connectorPath"
@ -106,7 +106,7 @@
(pointerout)="onBlur($event, 'input', i);" (pointerout)="onBlur($event, 'input', i);"
(click)="onClick($event, 'input', inputData[i].index);" (click)="onClick($event, 'input', inputData[i].index);"
/> />
<path <path *ngIf="!input.zeroValue"
[attr.d]="input.path" [attr.d]="input.path"
class="line {{input.class}}" class="line {{input.class}}"
[class.highlight]="inputIndex != null && inputData[i].index === inputIndex" [class.highlight]="inputIndex != null && inputData[i].index === inputIndex"
@ -116,6 +116,16 @@
(pointerout)="onBlur($event, 'input', i);" (pointerout)="onBlur($event, 'input', i);"
(click)="onClick($event, 'input', inputData[i].index);" (click)="onClick($event, 'input', inputData[i].index);"
/> />
<path *ngIf="input.zeroValue"
[attr.d]="input.path"
class="line {{input.class}} zerovalue"
[class.highlight]="inputIndex != null && inputData[i].index === inputIndex"
[class.zerovalue]="input.zeroValue"
[style]="input.style"
(pointerover)="onHover($event, 'input', i);"
(pointerout)="onBlur($event, 'input', i);"
(click)="onClick($event, 'input', inputData[i].index);"
/>
</ng-container> </ng-container>
<ng-container *ngFor="let output of outputs; let i = index"> <ng-container *ngFor="let output of outputs; let i = index">
<path *ngIf="connectors && outspends[outputData[i].index]?.spent" <path *ngIf="connectors && outspends[outputData[i].index]?.spent"

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

@ -68,6 +68,7 @@ export class TxBowtieGraphComponent implements OnInit, OnChanges {
outspends: Outspend[] = []; outspends: Outspend[] = [];
zeroValueWidth = 60; zeroValueWidth = 60;
zeroValueThickness = 20; zeroValueThickness = 20;
hasLine: boolean;
outspendsSubscription: Subscription; outspendsSubscription: Subscription;
refreshOutspends$: ReplaySubject<string> = new ReplaySubject(); refreshOutspends$: ReplaySubject<string> = new ReplaySubject();
@ -162,7 +163,7 @@ export class TxBowtieGraphComponent implements OnInit, OnChanges {
let truncatedInputs = this.tx.vin.map((v, i) => { let truncatedInputs = this.tx.vin.map((v, i) => {
return { return {
type: 'input', type: 'input',
value: v?.prevout?.value, value: v?.prevout?.value || (v?.is_coinbase && !totalValue ? 0 : undefined),
txid: v.txid, txid: v.txid,
vout: v.vout, vout: v.vout,
address: v?.prevout?.scriptpubkey_address || v?.prevout?.scriptpubkey_type?.toUpperCase(), address: v?.prevout?.scriptpubkey_address || v?.prevout?.scriptpubkey_type?.toUpperCase(),
@ -198,6 +199,9 @@ export class TxBowtieGraphComponent implements OnInit, OnChanges {
path: `M ${(this.width / 2) - this.midWidth} ${(this.height / 2) + 0.5} L ${(this.width / 2) + this.midWidth} ${(this.height / 2) + 0.5}`, path: `M ${(this.width / 2) - this.midWidth} ${(this.height / 2) + 0.5} L ${(this.width / 2) + this.midWidth} ${(this.height / 2) + 0.5}`,
style: `stroke-width: ${this.combinedWeight + 1}; stroke: ${this.gradient[1]}` style: `stroke-width: ${this.combinedWeight + 1}; stroke: ${this.gradient[1]}`
}; };
this.hasLine = this.inputs.reduce((line, put) => line || !put.zeroValue, false)
&& this.outputs.reduce((line, put) => line || !put.zeroValue, false);
} }
calcTotalValue(tx: Transaction): number { calcTotalValue(tx: Transaction): number {
@ -278,6 +282,9 @@ export class TxBowtieGraphComponent implements OnInit, OnChanges {
lineParams.forEach((line, i) => { lineParams.forEach((line, i) => {
if (xputs[i].value === 0) { if (xputs[i].value === 0) {
line.outerY = lastOuter + (this.zeroValueThickness / 2); line.outerY = lastOuter + (this.zeroValueThickness / 2);
if (xputs.length === 1) {
line.outerY = (this.height / 2);
}
lastOuter += this.zeroValueThickness + spacing; lastOuter += this.zeroValueThickness + spacing;
return; return;
} }