From e144e139b70bec3af496725a88706d41179912d6 Mon Sep 17 00:00:00 2001
From: Mononaut <github@monospace.live>
Date: Sun, 22 Sep 2024 18:06:55 +0000
Subject: [PATCH] Update accelerating pie chart in real time

---
 .../active-acceleration-box.component.html           |  4 ++--
 .../active-acceleration-box.component.ts             | 12 ++++++++----
 .../transaction/transaction.component.html           |  2 +-
 3 files changed, 11 insertions(+), 7 deletions(-)

diff --git a/frontend/src/app/components/acceleration/active-acceleration-box/active-acceleration-box.component.html b/frontend/src/app/components/acceleration/active-acceleration-box/active-acceleration-box.component.html
index 13d38443e..dbc79fb95 100644
--- a/frontend/src/app/components/acceleration/active-acceleration-box/active-acceleration-box.component.html
+++ b/frontend/src/app/components/acceleration/active-acceleration-box/active-acceleration-box.component.html
@@ -10,10 +10,10 @@
       </td>
       <td class="field-value" [class]="chartPositionLeft ? 'chart-left' : ''">
         <div class="effective-fee-container">
-          @if (accelerationInfo?.acceleratedFeeRate && (!tx.effectiveFeePerVsize || accelerationInfo.acceleratedFeeRate >= tx.effectiveFeePerVsize)) {
+          @if (accelerationInfo?.acceleratedFeeRate && (!effectiveFeeRate || accelerationInfo.acceleratedFeeRate >= effectiveFeeRate)) {
             <app-fee-rate class="oobFees" [fee]="accelerationInfo.acceleratedFeeRate"></app-fee-rate>
           } @else {
-            <app-fee-rate class="oobFees" [fee]="tx.effectiveFeePerVsize"></app-fee-rate>
+            <app-fee-rate class="oobFees" [fee]="effectiveFeeRate"></app-fee-rate>
           }
         </div>
       </td>
diff --git a/frontend/src/app/components/acceleration/active-acceleration-box/active-acceleration-box.component.ts b/frontend/src/app/components/acceleration/active-acceleration-box/active-acceleration-box.component.ts
index f95bb71c8..fb727c1a4 100644
--- a/frontend/src/app/components/acceleration/active-acceleration-box/active-acceleration-box.component.ts
+++ b/frontend/src/app/components/acceleration/active-acceleration-box/active-acceleration-box.component.ts
@@ -1,4 +1,4 @@
-import { Component, ChangeDetectionStrategy, Input, Output, OnChanges, SimpleChanges, EventEmitter } from '@angular/core';
+import { Component, ChangeDetectionStrategy, Input, Output, OnChanges, SimpleChanges, EventEmitter, ChangeDetectorRef } from '@angular/core';
 import { Transaction } from '../../../interfaces/electrs.interface';
 import { Acceleration, SinglePoolStats } from '../../../interfaces/node-api.interface';
 import { EChartsOption, PieSeriesOption } from '../../../graphs/echarts';
@@ -23,7 +23,8 @@ function toRGB({r,g,b}): string {
   changeDetection: ChangeDetectionStrategy.OnPush,
 })
 export class ActiveAccelerationBox implements OnChanges {
-  @Input() tx: Transaction;
+  @Input() acceleratedBy?: number[];
+  @Input() effectiveFeeRate?: number;
   @Input() accelerationInfo: Acceleration;
   @Input() miningStats: MiningStats;
   @Input() pools: number[];
@@ -41,10 +42,12 @@ export class ActiveAccelerationBox implements OnChanges {
   timespan = '';
   chartInstance: any = undefined;
 
-  constructor() {}
+  constructor(
+    private cd: ChangeDetectorRef,
+  ) {}
 
   ngOnChanges(changes: SimpleChanges): void {
-    const pools = this.pools || this.accelerationInfo?.pools || this.tx.acceleratedBy;
+    const pools = this.pools || this.accelerationInfo?.pools || this.acceleratedBy;
     if (pools && this.miningStats) {
       this.prepareChartOptions(pools);
     }
@@ -132,6 +135,7 @@ export class ActiveAccelerationBox implements OnChanges {
         }
       ]
     };
+    this.cd.markForCheck();
   }
 
   onChartInit(ec) {
diff --git a/frontend/src/app/components/transaction/transaction.component.html b/frontend/src/app/components/transaction/transaction.component.html
index c0f5c6103..9d3c0d678 100644
--- a/frontend/src/app/components/transaction/transaction.component.html
+++ b/frontend/src/app/components/transaction/transaction.component.html
@@ -670,7 +670,7 @@
 <ng-template #acceleratingRow>
   <tr>
     <td rowspan="2" colspan="2" style="padding: 0;">
-      <app-active-acceleration-box [tx]="tx" [accelerationInfo]="accelerationInfo" [miningStats]="miningStats" [hasCpfp]="hasCpfp" (toggleCpfp)="showCpfpDetails = !showCpfpDetails" [chartPositionLeft]="isMobile"></app-active-acceleration-box>
+      <app-active-acceleration-box [acceleratedBy]="tx.acceleratedBy" [effectiveFeeRate]="tx.effectiveFeePerVsize" [accelerationInfo]="accelerationInfo" [miningStats]="miningStats" [hasCpfp]="hasCpfp" (toggleCpfp)="showCpfpDetails = !showCpfpDetails" [chartPositionLeft]="isMobile"></app-active-acceleration-box>
     </td>
   </tr>
   <tr></tr>