Merge pull request #4516 from natsee/toggle-expand-rbf-history

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="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"
@@ -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>
@@ -51,6 +51,16 @@
       </div>
     </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>
     <div class="node-spacer"></div>
@@ -72,3 +82,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

@@ -36,6 +36,26 @@
     }
   }
 
+  .fade-out {
+    position: relative;
+
+    &::before {
+      content: '';
+      position: absolute;
+      width: 100%;
+      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;
@@ -191,6 +211,10 @@
         &.fullrbf {
           border-right: solid 10px #1bd8f4;
         }
+        &.last-pipe {
+          height: 150px;
+          bottom: -42px;
+        }
       }
 
       .corner {

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