Expand toggle for RBF history view

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="timeline" *ngFor="let timeline of rows; let j = index">
-      <div class="intervals">
+      <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>

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 {

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) {