GlcoinCore/mempool
1
0
Fork 0
mirror of https://github.com/mempool/mempool.git synced 2026-08-13 12:33:11 +02:00
Code Issues Projects Releases Packages Wiki Activity Actions 3

improve cluster mempool visualization ux

Browse source
This commit is contained in:
mononaut 2026-04-22 06:38:07 +00:00
parent e326061055
commit c8d72c9371
No known key found for this signature in database
GPG key ID: BFD16BE592A9CD8D
5 changed files with 11 additions and 30 deletions
Download patch file Download diff file Expand all files Collapse all files

6
frontend/src/app/components/transaction/transaction-details/transaction-details.component.html
View file

@ -264,7 +264,11 @@
}
</div>
@if (hasCpfp) {
<button type="button" class="btn btn-outline-info btn-sm btn-small-height float-end" (click)="toggleCpfp()">CPFP</button>
@if (cpfpInfo?.cluster) {
<button type="button" class="btn btn-outline-info btn-sm btn-small-height float-end" (click)="toggleCpfp()" i18n="transaction.cluster|Cluster">Cluster</button>
} @else {
<button type="button" class="btn btn-outline-info btn-sm btn-small-height float-end" (click)="toggleCpfp()">CPFP</button>
}
}
</td>
</tr>

12
frontend/src/app/components/transaction/transaction-raw.component.html
View file

@ -97,17 +97,11 @@
<br>
<div class="subtitle-block">
<div class="title">
<h2 *ngIf="cpfpInfo?.cluster && cpfpMode === 'advanced'"><span i18n="transaction.cluster-mempool-chunking|Cluster Mempool Chunking">Cluster Mempool Chunking</span><span class="badge badge-pill badge-warning cpfp-beta" i18n="beta">beta</span></h2>
<h2 *ngIf="!(cpfpInfo?.cluster && cpfpMode === 'advanced')" i18n="transaction.related-transactions|CPFP List">Related Transactions</h2>
</div>
<div class="title-buttons" *ngIf="cpfpInfo?.cluster">
<button type="button" class="btn btn-outline-info btn-sm" (click)="toggleCpfpView()">
<ng-container *ngIf="cpfpMode === 'advanced'" i18n="transaction.cpfp-simple-view|Simple CPFP view">Simple</ng-container>
<ng-container *ngIf="cpfpMode !== 'advanced'" i18n="transaction.cpfp-advanced-view|Advanced CPFP view">Advanced</ng-container>
</button>
<h2 *ngIf="cpfpInfo?.cluster" i18n="transaction.cluster|Cluster">Cluster</h2>
<h2 *ngIf="!cpfpInfo?.cluster" i18n="transaction.related-transactions|CPFP List">Related Transactions</h2>
</div>
</div>
<ng-container *ngIf="cpfpInfo?.cluster && cpfpMode === 'advanced'; else legacyCpfpRaw">
<ng-container *ngIf="cpfpInfo?.cluster; else legacyCpfpRaw">
<div class="box">
<app-cluster-diagram
[cluster]="cpfpInfo.cluster" [txid]="transaction.txid">

5
frontend/src/app/components/transaction/transaction-raw.component.ts
View file

@ -398,11 +398,6 @@ export class TransactionRawComponent implements OnInit, OnDestroy {
this.updateCpfpMode(newMode);
}
toggleCpfpView() {
const newMode = this.cpfpMode === 'advanced' ? 'simple' : 'advanced';
this.updateCpfpMode(newMode);
}
private updateCpfpMode(mode: 'advanced' | 'simple' | null) {
this.cpfpMode = mode;
this.router.navigate([], {

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

@ -84,17 +84,11 @@
<br>
<div class="subtitle-block">
<div class="title">
<h2 *ngIf="cpfpInfo?.cluster && cpfpMode === 'advanced'"><span i18n="transaction.cluster-mempool-chunking|Cluster Mempool Chunking">Cluster Mempool Chunking</span><span class="badge badge-pill badge-warning cpfp-beta" i18n="beta">beta</span></h2>
<h2 *ngIf="!(cpfpInfo?.cluster && cpfpMode === 'advanced')" i18n="transaction.related-transactions|CPFP List">Related Transactions</h2>
</div>
<div class="title-buttons" *ngIf="cpfpInfo?.cluster">
<button type="button" class="btn btn-outline-info btn-sm" (click)="toggleCpfpView()">
<ng-container *ngIf="cpfpMode === 'advanced'" i18n="transaction.cpfp-simple-view|Simple CPFP view">Simple</ng-container>
<ng-container *ngIf="cpfpMode !== 'advanced'" i18n="transaction.cpfp-advanced-view|Advanced CPFP view">Advanced</ng-container>
</button>
<h2 *ngIf="cpfpInfo?.cluster" i18n="transaction.cluster|Cluster">Cluster</h2>
<h2 *ngIf="!cpfpInfo?.cluster" i18n="transaction.related-transactions|CPFP List">Related Transactions</h2>
</div>
</div>
<ng-container *ngIf="cpfpInfo?.cluster && cpfpMode === 'advanced'; else legacyCpfp">
<ng-container *ngIf="cpfpInfo?.cluster; else legacyCpfp">
<div class="box">
<app-cluster-diagram
[cluster]="cpfpInfo.cluster" [txid]="tx.txid">

6
frontend/src/app/components/transaction/transaction.component.ts
View file

@ -1124,16 +1124,10 @@ export class TransactionComponent implements OnInit, AfterViewInit, OnDestroy {
}
toggleCpfp() {
// cycle: null (closed) -> 'advanced' (open) -> null (closed)
const newMode = this.cpfpMode ? null : (this.cpfpInfo?.cluster ? 'advanced' : 'simple');
this.updateCpfpMode(newMode);
}
toggleCpfpView() {
const newMode = this.cpfpMode === 'advanced' ? 'simple' : 'advanced';
this.updateCpfpMode(newMode);
}
private updateCpfpMode(mode: 'advanced' | 'simple' | null) {
this.cpfpMode = mode;
this.router.navigate([], {