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

Toggle option for tx flow diagram w/ query param

Browse Source
This commit is contained in:
Mononaut 2022-09-29 15:41:14 +00:00
parent 678977a2a0
commit 619a6bd34d
No known key found for this signature in database
GPG Key ID: 61B952CAF4838F94
3 changed files with 129 additions and 56 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

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

@ -190,39 +190,55 @@
<br> <br>
<div class="title"> <ng-container *ngIf="showFlow; else flowPlaceholder">
<h2 i18n="transaction.flow|Transaction flow">Flow</h2> <div class="title float-left">
</div> <h2 id="flow" i18n="transaction.flow|Transaction flow">Flow</h2>
<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>
<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> <button type="button" class="btn btn-outline-info flow-toggle btn-sm float-right" (click)="toggleGraph()" i18n="hide-flow-diagram">Hide flow diagram</button>
<ng-template #collapseBtn>
<button class="btn btn-sm btn-primary graph-toggle" (click)="collapseGraph();"><span i18n="show-less">Show less</span></button> <div class="clearfix"></div>
</ng-template>
<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>
</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> <app-transactions-list #txList [transactions]="[tx]" [errorUnblinded]="errorUnblinded" [outputIndex]="outputIndex" [transactionPage]="true"></app-transactions-list>
@ -309,35 +325,37 @@
<br> <br>
<div class="title"> <ng-container *ngIf="showFlow">
<h2 i18n="transaction.diagram|Transaction diagram">Diagram</h2> <div class="title">
</div> <h2 i18n="transaction.flow|Transaction flow">Flow</h2>
</div>
<div class="box"> <div class="box">
<div class="graph-container" #graphContainer style="visibility: hidden;"></div> <div class="graph-container" #graphContainer style="visibility: hidden;"></div>
<div class="row"> <div class="row">
<div class="col-sm"> <div class="col-sm">
<table class="table table-borderless table-striped"> <table class="table table-borderless table-striped">
<tbody> <tbody>
<tr> <tr>
<td><span class="skeleton-loader"></span></td> <td><span class="skeleton-loader"></span></td>
</tr> </tr>
</tbody> </tbody>
</table> </table>
</div> </div>
<div class="col-sm"> <div class="col-sm">
<table class="table table-borderless table-striped"> <table class="table table-borderless table-striped">
<tbody> <tbody>
<tr> <tr>
<td><span class="skeleton-loader"></span></td> <td><span class="skeleton-loader"></span></td>
</tr> </tr>
</tbody> </tbody>
</table> </table>
</div>
</div> </div>
</div> </div>
</div>
<br> <br>
</ng-container>
<div class="title"> <div class="title">
<h2 i18n="transaction.inputs-and-outputs|Transaction inputs and outputs">Inputs & Outputs</h2> <h2 i18n="transaction.inputs-and-outputs|Transaction inputs and outputs">Inputs & Outputs</h2>

34
frontend/src/app/components/transaction/transaction.component.scss
View File

@ -73,6 +73,15 @@
} }
} }
.box.hidden {
visibility: hidden;
height: 0px;
padding-top: 0px;
padding-bottom: 0px;
margin-top: 0px;
margin-bottom: 0px;
}
.graph-container { .graph-container {
position: relative; position: relative;
width: 100%; width: 100%;
@ -150,10 +159,33 @@
} }
} }
.details-button { .details-button, .flow-toggle {
margin-top: -5px; margin-top: -5px;
margin-left: 10px;
@media (min-width: 768px){ @media (min-width: 768px){
display: inline-block; display: inline-block;
margin-top: 0px; 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;
}
}
}

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

@ -1,6 +1,6 @@
import { Component, OnInit, AfterViewInit, OnDestroy, HostListener, ViewChild, ElementRef } from '@angular/core'; import { Component, OnInit, AfterViewInit, OnDestroy, HostListener, ViewChild, ElementRef } from '@angular/core';
import { ElectrsApiService } from '../../services/electrs-api.service'; import { ElectrsApiService } from '../../services/electrs-api.service';
import { ActivatedRoute, ParamMap } from '@angular/router'; import { ActivatedRoute, ParamMap, Router } from '@angular/router';
import { import {
switchMap, switchMap,
filter, filter,
@ -39,6 +39,7 @@ export class TransactionComponent implements OnInit, AfterViewInit, OnDestroy {
fetchCpfpSubscription: Subscription; fetchCpfpSubscription: Subscription;
txReplacedSubscription: Subscription; txReplacedSubscription: Subscription;
blocksSubscription: Subscription; blocksSubscription: Subscription;
queryParamsSubscription: Subscription;
rbfTransaction: undefined | Transaction; rbfTransaction: undefined | Transaction;
cpfpInfo: CpfpInfo | null; cpfpInfo: CpfpInfo | null;
showCpfpDetails = false; showCpfpDetails = false;
@ -47,6 +48,7 @@ export class TransactionComponent implements OnInit, AfterViewInit, OnDestroy {
timeAvg$: Observable<number>; timeAvg$: Observable<number>;
liquidUnblinding = new LiquidUnblinding(); liquidUnblinding = new LiquidUnblinding();
outputIndex: number; outputIndex: number;
showFlow: boolean = true;
graphExpanded: boolean = false; graphExpanded: boolean = false;
graphWidth: number = 1000; graphWidth: number = 1000;
graphHeight: number = 360; graphHeight: number = 360;
@ -60,6 +62,7 @@ export class TransactionComponent implements OnInit, AfterViewInit, OnDestroy {
constructor( constructor(
private route: ActivatedRoute, private route: ActivatedRoute,
private router: Router,
private electrsApiService: ElectrsApiService, private electrsApiService: ElectrsApiService,
private stateService: StateService, private stateService: StateService,
private websocketService: WebsocketService, private websocketService: WebsocketService,
@ -231,6 +234,15 @@ export class TransactionComponent implements OnInit, AfterViewInit, OnDestroy {
} }
this.rbfTransaction = rbfTransaction; 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 { ngAfterViewInit(): void {
@ -304,6 +316,16 @@ export class TransactionComponent implements OnInit, AfterViewInit, OnDestroy {
this.graphHeight = Math.min(360, this.maxInOut * 80); 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() { expandGraph() {
this.graphExpanded = true; this.graphExpanded = true;
} }
@ -324,6 +346,7 @@ export class TransactionComponent implements OnInit, AfterViewInit, OnDestroy {
this.fetchCpfpSubscription.unsubscribe(); this.fetchCpfpSubscription.unsubscribe();
this.txReplacedSubscription.unsubscribe(); this.txReplacedSubscription.unsubscribe();
this.blocksSubscription.unsubscribe(); this.blocksSubscription.unsubscribe();
this.queryParamsSubscription.unsubscribe();
this.leaveTransaction(); this.leaveTransaction();
} }
} }