From 8d57aa1f06bddf34f3ea9d43b3872bf22930bfd7 Mon Sep 17 00:00:00 2001
From: Mononaut <github@monospace.live>
Date: Sun, 5 Mar 2023 20:53:59 -0600
Subject: [PATCH] scroll selected rbf node into view

---
 .../rbf-timeline/rbf-timeline.component.html         |  1 +
 .../rbf-timeline/rbf-timeline.component.ts           | 12 +++++++++++-
 2 files changed, 12 insertions(+), 1 deletion(-)

diff --git a/frontend/src/app/components/rbf-timeline/rbf-timeline.component.html b/frontend/src/app/components/rbf-timeline/rbf-timeline.component.html
index 206b3f01f..e9d531cb8 100644
--- a/frontend/src/app/components/rbf-timeline/rbf-timeline.component.html
+++ b/frontend/src/app/components/rbf-timeline/rbf-timeline.component.html
@@ -17,6 +17,7 @@
         <ng-container *ngFor="let cell of timeline; let i = index;">
           <ng-container *ngIf="cell.replacement; else nonNode">
             <div class="node"
+              [id]="'node-'+cell.replacement.tx.txid"
               [class.selected]="txid === cell.replacement.tx.txid"
               [class.mined]="cell.replacement.tx.mined"
               [class.first-node]="cell.first"
diff --git a/frontend/src/app/components/rbf-timeline/rbf-timeline.component.ts b/frontend/src/app/components/rbf-timeline/rbf-timeline.component.ts
index a0add7499..f02e8ca35 100644
--- a/frontend/src/app/components/rbf-timeline/rbf-timeline.component.ts
+++ b/frontend/src/app/components/rbf-timeline/rbf-timeline.component.ts
@@ -42,8 +42,11 @@ export class RbfTimelineComponent implements OnInit, OnChanges {
     this.rows = this.buildTimelines(this.replacements);
   }
 
-  ngOnChanges(): void {
+  ngOnChanges(changes): void {
     this.rows = this.buildTimelines(this.replacements);
+    if (changes.txid) {
+      setTimeout(() => { this.scrollToSelected(); });
+    }
   }
 
   // converts a tree of RBF events into a format that can be more easily rendered in HTML
@@ -166,6 +169,13 @@ export class RbfTimelineComponent implements OnInit, OnChanges {
     return rows;
   }
 
+  scrollToSelected() {
+    const node = document.getElementById('node-' + this.txid);
+    if (node) {
+      node.scrollIntoView({ block: 'nearest', inline: 'center' });
+    }
+  }
+
   @HostListener('pointermove', ['$event'])
   onPointerMove(event) {
     this.tooltipPosition = { x: event.clientX, y: event.clientY };