From c8d72c9371cf72860444be07559591062e8fbe4d Mon Sep 17 00:00:00 2001
From: mononaut <mononaut@mempool.space>
Date: Wed, 22 Apr 2026 06:38:07 +0000
Subject: [PATCH] improve cluster mempool visualization ux

---
 .../transaction-details.component.html               |  6 +++++-
 .../transaction/transaction-raw.component.html       | 12 +++---------
 .../transaction/transaction-raw.component.ts         |  5 -----
 .../transaction/transaction.component.html           | 12 +++---------
 .../components/transaction/transaction.component.ts  |  6 ------
 5 files changed, 11 insertions(+), 30 deletions(-)

diff --git a/frontend/src/app/components/transaction/transaction-details/transaction-details.component.html b/frontend/src/app/components/transaction/transaction-details/transaction-details.component.html
index 691cf35cc..6b1082668 100644
--- a/frontend/src/app/components/transaction/transaction-details/transaction-details.component.html
+++ b/frontend/src/app/components/transaction/transaction-details/transaction-details.component.html
@@ -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>
diff --git a/frontend/src/app/components/transaction/transaction-raw.component.html b/frontend/src/app/components/transaction/transaction-raw.component.html
index ff9a2abf3..228aedcb9 100644
--- a/frontend/src/app/components/transaction/transaction-raw.component.html
+++ b/frontend/src/app/components/transaction/transaction-raw.component.html
@@ -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">
diff --git a/frontend/src/app/components/transaction/transaction-raw.component.ts b/frontend/src/app/components/transaction/transaction-raw.component.ts
index cfcf77e26..9c295f0a5 100644
--- a/frontend/src/app/components/transaction/transaction-raw.component.ts
+++ b/frontend/src/app/components/transaction/transaction-raw.component.ts
@@ -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([], {
diff --git a/frontend/src/app/components/transaction/transaction.component.html b/frontend/src/app/components/transaction/transaction.component.html
index bb6b33e3e..a854fb7b5 100644
--- a/frontend/src/app/components/transaction/transaction.component.html
+++ b/frontend/src/app/components/transaction/transaction.component.html
@@ -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">
diff --git a/frontend/src/app/components/transaction/transaction.component.ts b/frontend/src/app/components/transaction/transaction.component.ts
index 0ecbecf90..507f232b3 100644
--- a/frontend/src/app/components/transaction/transaction.component.ts
+++ b/frontend/src/app/components/transaction/transaction.component.ts
@@ -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([], {