From 75b3bc62494b702f8101c6dacee4c432f921e69d Mon Sep 17 00:00:00 2001
From: natsee <nat.coisne@gmail.com>
Date: Sun, 17 Dec 2023 19:15:23 +0100
Subject: [PATCH 1/3] Expand toggle for RBF history view

---
 .../rbf-timeline/rbf-timeline.component.html    | 17 ++++++++++++++---
 .../rbf-timeline/rbf-timeline.component.scss    |  6 ++++++
 .../rbf-timeline/rbf-timeline.component.ts      |  6 ++++++
 3 files changed, 26 insertions(+), 3 deletions(-)

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 a2012d45f..8a750e624 100644
--- a/frontend/src/app/components/rbf-timeline/rbf-timeline.component.html
+++ b/frontend/src/app/components/rbf-timeline/rbf-timeline.component.html
@@ -1,7 +1,7 @@
 <div class="rbf-timeline box" [class.mined]="replacements.mined">
   <div class="timeline-wrapper">
-    <div class="timeline" *ngFor="let timeline of rows">
-      <div class="intervals">
+    <div class="timeline" *ngFor="let timeline of rows; let j = index">
+      <div class="intervals" *ngIf="j < rowLimit || timelineExpanded">
         <ng-container *ngFor="let cell of timeline; let i = index;">
           <div class="node-spacer"></div>
           <ng-container *ngIf="i < timeline.length - 1">
@@ -13,7 +13,7 @@
           </ng-container>
         </ng-container>
       </div>
-      <div class="nodes">
+      <div class="nodes" *ngIf="j < rowLimit || timelineExpanded">
         <ng-container *ngFor="let cell of timeline; let i = index;">
           <ng-container *ngIf="cell.replacement?.tx; else nonNode">
             <div class="node"
@@ -50,6 +50,15 @@
         </ng-container>
       </div>
     </div>
+    <div class="toggle-wrapper" *ngIf="rows.length > rowLimit && rowLimit !== 0">
+      <button class="btn btn-sm btn-primary graph-toggle" (click)="toggleTimeline(true);" *ngIf="!timelineExpanded; else collapseBtn">
+        <span i18n="show-all">Show all</span>
+        (<ng-container *ngTemplateOutlet="xRemaining; context: {$implicit: rows.length - rowLimit}"></ng-container>)
+      </button>
+      <ng-template #collapseBtn>
+        <button class="btn btn-sm btn-primary graph-toggle" (click)="toggleTimeline(false);"><span i18n="show-less">Show less</span></button>
+      </ng-template>
+    </div>
   </div>
 
   <ng-template #nodeSpacer>
@@ -72,3 +81,5 @@
     [isConnector]="hoverConnector"
   ></app-rbf-timeline-tooltip> -->
 </div>
+
+<ng-template #xRemaining let-x i18n="x-remaining">{{ x }} remaining</ng-template>
\ No newline at end of file
diff --git a/frontend/src/app/components/rbf-timeline/rbf-timeline.component.scss b/frontend/src/app/components/rbf-timeline/rbf-timeline.component.scss
index be7aef2d6..8afc3f026 100644
--- a/frontend/src/app/components/rbf-timeline/rbf-timeline.component.scss
+++ b/frontend/src/app/components/rbf-timeline/rbf-timeline.component.scss
@@ -34,6 +34,12 @@
     &::-webkit-scrollbar {
       display: none;
     }
+
+    .toggle-wrapper {
+      width: 100%;
+      text-align: center;
+      margin: 1.25em 0 0;
+    }
   }
 
   .intervals, .nodes {
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 474da7326..687a7dbfd 100644
--- a/frontend/src/app/components/rbf-timeline/rbf-timeline.component.ts
+++ b/frontend/src/app/components/rbf-timeline/rbf-timeline.component.ts
@@ -25,7 +25,9 @@ function isTimelineCell(val: RbfTree | TimelineCell): boolean {
 export class RbfTimelineComponent implements OnInit, OnChanges {
   @Input() replacements: RbfTree;
   @Input() txid: string;
+  @Input() rowLimit: number = 5; // If explicitly set to 0, all timelines rows will be displayed by default
   rows: TimelineCell[][] = [];
+  timelineExpanded: boolean = this.rowLimit === 0;
 
   hoverInfo: RbfTree | null = null;
   tooltipPosition = null;
@@ -191,6 +193,10 @@ export class RbfTimelineComponent implements OnInit, OnChanges {
     return rows;
   }
 
+  toggleTimeline(expand: boolean): void {
+    this.timelineExpanded = expand;
+  }
+
   scrollToSelected() {
     const node = document.getElementById('node-' + this.txid);
     if (node) {

From 7f488f5b01048dce6552a69c72daa42e3147dbe9 Mon Sep 17 00:00:00 2001
From: natsee <nat.coisne@gmail.com>
Date: Tue, 19 Dec 2023 14:40:37 +0100
Subject: [PATCH 2/3] Fade out the bottom of collapsed rbf history

---
 .../rbf-timeline/rbf-timeline.component.html    |  4 ++--
 .../rbf-timeline/rbf-timeline.component.scss    | 17 +++++++++++++++++
 2 files changed, 19 insertions(+), 2 deletions(-)

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 8a750e624..9ff35d669 100644
--- a/frontend/src/app/components/rbf-timeline/rbf-timeline.component.html
+++ b/frontend/src/app/components/rbf-timeline/rbf-timeline.component.html
@@ -1,6 +1,6 @@
 <div class="rbf-timeline box" [class.mined]="replacements.mined">
   <div class="timeline-wrapper">
-    <div class="timeline" *ngFor="let timeline of rows; let j = index">
+    <div class="timeline" *ngFor="let timeline of rows; let j = index" [class.fade-out]="!timelineExpanded && j === rowLimit - 1">
       <div class="intervals" *ngIf="j < rowLimit || timelineExpanded">
         <ng-container *ngFor="let cell of timeline; let i = index;">
           <div class="node-spacer"></div>
@@ -37,7 +37,7 @@
           </ng-container>
           <ng-template #nonNode>
             <ng-container [ngSwitch]="cell.connector">
-              <div class="connector" [class.fullrbf]="cell.fullRbf" *ngSwitchCase="'pipe'"><div class="pipe" [class.fullrbf]="cell.fullRbf"></div></div>
+              <div class="connector" [class.fullrbf]="cell.fullRbf" *ngSwitchCase="'pipe'"><div class="pipe" [class.fullrbf]="cell.fullRbf" [class.last-pipe]="!timelineExpanded && j === rowLimit - 1"></div></div>
               <div class="connector" *ngSwitchCase="'corner'"><div class="corner" [class.fullrbf]="cell.fullRbf"></div></div>
               <div class="node-spacer" *ngSwitchDefault></div>
             </ng-container>
diff --git a/frontend/src/app/components/rbf-timeline/rbf-timeline.component.scss b/frontend/src/app/components/rbf-timeline/rbf-timeline.component.scss
index 8afc3f026..c0b38b59d 100644
--- a/frontend/src/app/components/rbf-timeline/rbf-timeline.component.scss
+++ b/frontend/src/app/components/rbf-timeline/rbf-timeline.component.scss
@@ -31,6 +31,19 @@
     -ms-overflow-style: none;
     scrollbar-width: none;
 
+    .fade-out {
+      position: relative;
+
+      &::before {
+        content: '';
+        position: absolute;
+        width: 100%;
+        height: 100%;
+        background: linear-gradient(to bottom, rgba(36, 39, 62, 0) 0%, rgba(36, 39, 62, 1) 100%);
+        z-index: 1;
+      }
+    }
+    
     &::-webkit-scrollbar {
       display: none;
     }
@@ -197,6 +210,10 @@
         &.fullrbf {
           border-right: solid 10px #1bd8f4;
         }
+        &.last-pipe {
+          height: 150px;
+          bottom: -42px;
+        }
       }
 
       .corner {

From f4715419073e98792b78e2735c4f72c2bed665e8 Mon Sep 17 00:00:00 2001
From: natsee <nat.coisne@gmail.com>
Date: Wed, 20 Dec 2023 16:21:40 +0100
Subject: [PATCH 3/3] Fix fade out on RBF history

---
 .../rbf-timeline/rbf-timeline.component.html  | 21 +++++------
 .../rbf-timeline/rbf-timeline.component.scss  | 35 ++++++++++---------
 2 files changed, 29 insertions(+), 27 deletions(-)

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 9ff35d669..6f19537e1 100644
--- a/frontend/src/app/components/rbf-timeline/rbf-timeline.component.html
+++ b/frontend/src/app/components/rbf-timeline/rbf-timeline.component.html
@@ -1,6 +1,6 @@
 <div class="rbf-timeline box" [class.mined]="replacements.mined">
   <div class="timeline-wrapper">
-    <div class="timeline" *ngFor="let timeline of rows; let j = index" [class.fade-out]="!timelineExpanded && j === rowLimit - 1">
+    <div class="timeline" *ngFor="let timeline of rows; let j = index">
       <div class="intervals" *ngIf="j < rowLimit || timelineExpanded">
         <ng-container *ngFor="let cell of timeline; let i = index;">
           <div class="node-spacer"></div>
@@ -50,15 +50,16 @@
         </ng-container>
       </div>
     </div>
-    <div class="toggle-wrapper" *ngIf="rows.length > rowLimit && rowLimit !== 0">
-      <button class="btn btn-sm btn-primary graph-toggle" (click)="toggleTimeline(true);" *ngIf="!timelineExpanded; else collapseBtn">
-        <span i18n="show-all">Show all</span>
-        (<ng-container *ngTemplateOutlet="xRemaining; context: {$implicit: rows.length - rowLimit}"></ng-container>)
-      </button>
-      <ng-template #collapseBtn>
-        <button class="btn btn-sm btn-primary graph-toggle" (click)="toggleTimeline(false);"><span i18n="show-less">Show less</span></button>
-      </ng-template>
-    </div>
+  </div>
+  <div [class.fade-out]="!timelineExpanded && rows.length > rowLimit"></div>
+  <div class="toggle-wrapper" *ngIf="rows.length > rowLimit && rowLimit !== 0">
+    <button class="btn btn-sm btn-primary graph-toggle" (click)="toggleTimeline(true);" *ngIf="!timelineExpanded; else collapseBtn">
+      <span i18n="show-all">Show all</span>
+      (<ng-container *ngTemplateOutlet="xRemaining; context: {$implicit: rows.length - rowLimit}"></ng-container>)
+    </button>
+    <ng-template #collapseBtn>
+      <button class="btn btn-sm btn-primary graph-toggle" (click)="toggleTimeline(false);"><span i18n="show-less">Show less</span></button>
+    </ng-template>
   </div>
 
   <ng-template #nodeSpacer>
diff --git a/frontend/src/app/components/rbf-timeline/rbf-timeline.component.scss b/frontend/src/app/components/rbf-timeline/rbf-timeline.component.scss
index c0b38b59d..8962be63c 100644
--- a/frontend/src/app/components/rbf-timeline/rbf-timeline.component.scss
+++ b/frontend/src/app/components/rbf-timeline/rbf-timeline.component.scss
@@ -30,31 +30,32 @@
     overflow-x: auto;
     -ms-overflow-style: none;
     scrollbar-width: none;
-
-    .fade-out {
-      position: relative;
-
-      &::before {
-        content: '';
-        position: absolute;
-        width: 100%;
-        height: 100%;
-        background: linear-gradient(to bottom, rgba(36, 39, 62, 0) 0%, rgba(36, 39, 62, 1) 100%);
-        z-index: 1;
-      }
-    }
-    
+  
     &::-webkit-scrollbar {
       display: none;
     }
+  }
 
-    .toggle-wrapper {
+  .fade-out {
+    position: relative;
+
+    &::before {
+      content: '';
+      position: absolute;
       width: 100%;
-      text-align: center;
-      margin: 1.25em 0 0;
+      height: 70px;
+      top: -70px;
+      background: linear-gradient(to bottom, rgba(36, 39, 62, 0) 0%, rgba(36, 39, 62, 1) 100%);
+      z-index: 1;
     }
   }
 
+  .toggle-wrapper {
+    width: 100%;
+    text-align: center;
+    margin: 1.25em 0 0;
+  }
+
   .intervals, .nodes {
     min-width: 100%;
     display: flex;