Add interactivity to tx sankey diagram

frontend/src/app/components/transaction/transaction.component.html

@@ -196,7 +196,7 @@
 
     <div class="box">
       <div class="graph-container" #graphContainer>
-        <tx-bowtie-graph [tx]="tx" [width]="graphWidth" [height]="graphExpanded ? (maxInOut * 15) : 360" [maxStrands]="graphExpanded ? maxInOut : 24" [network]="network"></tx-bowtie-graph>
+        <tx-bowtie-graph [tx]="tx" [width]="graphWidth" [height]="graphExpanded ? (maxInOut * 15) : graphHeight" [maxStrands]="graphExpanded ? maxInOut : 24" [network]="network" [tooltip]="true"></tx-bowtie-graph>
       </div>
       <div class="toggle-wrapper" *ngIf="maxInOut > 24">
         <button class="btn btn-sm btn-primary graph-toggle" (click)="expandGraph();" *ngIf="!graphExpanded; else collapseBtn"><span i18n="show-more">Show more</span></button>

frontend/src/app/components/transaction/transaction.component.ts

@@ -49,7 +49,9 @@ export class TransactionComponent implements OnInit, AfterViewInit, OnDestroy {
   outputIndex: number;
   graphExpanded: boolean = false;
   graphWidth: number = 1000;
+  graphHeight: number = 360;
   maxInOut: number = 0;
+  tooltipPosition: { x: number, y: number };
 
   @ViewChild('graphContainer')
   graphContainer: ElementRef;
@@ -296,7 +298,8 @@ export class TransactionComponent implements OnInit, AfterViewInit, OnDestroy {
   }
 
   setupGraph() {
-    this.maxInOut = Math.min(250, Math.max(this.tx?.vin?.length || 1, this.tx?.vout?.length || 1));
+    this.maxInOut = Math.min(250, Math.max(this.tx?.vin?.length || 1, this.tx?.vout?.length + 1 || 1));
+    this.graphHeight = Math.min(360, this.maxInOut * 80);
   }
 
   expandGraph() {
@@ -309,7 +312,6 @@ export class TransactionComponent implements OnInit, AfterViewInit, OnDestroy {
 
   @HostListener('window:resize', ['$event'])
   setGraphSize(): void {
-    console.log('resize', this.graphContainer);
     if (this.graphContainer) {
       this.graphWidth = this.graphContainer.nativeElement.clientWidth - 24;
     }

frontend/src/app/components/tx-bowtie-graph-tooltip/tx-bowtie-graph-tooltip.component.html

@@ -0,0 +1,33 @@
+<div
+  #tooltip
+  *ngIf="line"
+  class="bowtie-graph-tooltip"
+  [style.visibility]="line ? 'visible' : 'hidden'"
+  [style.left]="tooltipPosition.x + 'px'"
+  [style.top]="tooltipPosition.y + 'px'"
+>
+  <ng-container *ngIf="!line.rest; else restMsg">
+    <p>
+      <ng-container [ngSwitch]="line.type">
+        <span *ngSwitchCase="'input'" i18n="transaction.input">Input</span>
+        <span *ngSwitchCase="'output'" i18n="transaction.output">Output</span>
+        <span *ngSwitchCase="'fee'" i18n="transaction.fee">Fee</span>
+      </ng-container>
+      <span *ngIf="line.type !== 'fee'"> #{{ line.index }}</span>
+    </p>
+    <p *ngIf="line.value != null"><app-amount [satoshis]="line.value"></app-amount></p>
+  </ng-container>
+
+  <ng-template #restMsg>
+    <span>{{ line.rest }} </span>
+    <ng-container [ngSwitch]="line.type">
+      <span *ngSwitchCase="'input'" i18n="transaction.other-inputs">other inputs</span>
+      <span *ngSwitchCase="'output'" i18n="transaction.other-outputs">other outputs</span>
+    </ng-container>
+  </ng-template>
+
+  <p *ngIf="line.type !== 'fee' && line.address" class="address">
+    <span class="first">{{ line.address.slice(0, -4) }}</span>
+    <span class="last-four">{{ line.address.slice(-4) }}</span>
+  </p>
+</div>

frontend/src/app/components/tx-bowtie-graph-tooltip/tx-bowtie-graph-tooltip.component.scss

@@ -0,0 +1,38 @@
+.bowtie-graph-tooltip {
+  position: absolute;
+  background: rgba(#11131f, 0.95);
+  border-radius: 4px;
+  box-shadow: 1px 1px 10px rgba(0,0,0,0.5);
+  color: #b1b1b1;
+  padding: 10px 15px;
+  text-align: left;
+  pointer-events: none;
+  max-width: 300px;
+
+  p {
+    margin: 0;
+    white-space: nowrap;
+  }
+
+  .address {
+    width: 100%;
+    max-width: 100%;
+    display: flex;
+    flex-direction: row;
+    align-items: baseline;
+    justify-content: flex-start;
+
+    .first {
+      flex-grow: 0;
+      flex-shrink: 1;
+      overflow: hidden;
+      text-overflow: ellipsis;
+      margin-right: -2px;
+    }
+
+    .last-four {
+      flex-shrink: 0;
+      flex-grow: 0;
+    }
+  }
+}

frontend/src/app/components/tx-bowtie-graph-tooltip/tx-bowtie-graph-tooltip.component.ts

@@ -0,0 +1,36 @@
+import { Component, ElementRef, ViewChild, Input, OnChanges, ChangeDetectionStrategy } from '@angular/core';
+import { TransactionStripped } from 'src/app/interfaces/websocket.interface';
+
+@Component({
+  selector: 'app-tx-bowtie-graph-tooltip',
+  templateUrl: './tx-bowtie-graph-tooltip.component.html',
+  styleUrls: ['./tx-bowtie-graph-tooltip.component.scss'],
+})
+export class TxBowtieGraphTooltipComponent implements OnChanges {
+  @Input() line: { type: string, value?: number, index?: number, address?: string, rest?: number } | void;
+  @Input() cursorPosition: { x: number, y: number };
+
+  tooltipPosition = { x: 0, y: 0 };
+
+  @ViewChild('tooltip') tooltipElement: ElementRef<HTMLCanvasElement>;
+
+  constructor() {}
+
+  ngOnChanges(changes): void {
+    if (changes.cursorPosition && changes.cursorPosition.currentValue) {
+      let x = Math.max(10, changes.cursorPosition.currentValue.x - 50);
+      let y = changes.cursorPosition.currentValue.y + 20;
+      if (this.tooltipElement) {
+        const elementBounds = this.tooltipElement.nativeElement.getBoundingClientRect();
+        const parentBounds = this.tooltipElement.nativeElement.offsetParent.getBoundingClientRect();
+        if ((parentBounds.left + x + elementBounds.width) > parentBounds.right) {
+          x = Math.max(0, parentBounds.width - elementBounds.width - 10);
+        }
+        if (y + elementBounds.height > parentBounds.height) {
+          y = y - elementBounds.height - 20;
+        }
+      }
+      this.tooltipPosition = { x, y };
+    }
+  }
+}

frontend/src/app/components/tx-bowtie-graph/tx-bowtie-graph.component.html

@@ -1,3 +1,4 @@
+<div class="bowtie-graph">
   <svg *ngIf="inputs && outputs" class="bowtie" [attr.height]="(height + 10) + 'px'" [attr.width]="width + 'px'">
     <defs>
       <marker id="input-arrow" viewBox="-5 -5 10 10"
@@ -28,6 +29,22 @@
         <stop offset="0%" [attr.stop-color]="gradient[1]" />
         <stop offset="100%" [attr.stop-color]="gradient[0]" />
       </linearGradient>
+      <linearGradient id="input-hover-gradient" x1="0%" y1="0%" x2="100%" y2="0%">
+      <stop offset="0%" [attr.stop-color]="gradient[0]" />
+      <stop offset="2%" [attr.stop-color]="gradient[0]" />
+        <stop offset="30%" stop-color="white" />
+        <stop offset="100%" [attr.stop-color]="gradient[1]" />
+      </linearGradient>
+      <linearGradient id="output-hover-gradient" x1="0%" y1="0%" x2="100%" y2="0%">
+        <stop offset="0%" [attr.stop-color]="gradient[1]" />
+        <stop offset="70%" stop-color="white" />
+        <stop offset="98%" [attr.stop-color]="gradient[0]" />
+        <stop offset="100%" [attr.stop-color]="gradient[0]" />
+      </linearGradient>
+      <linearGradient id="fee-hover-gradient" x1="0%" y1="0%" x2="100%" y2="0%">
+        <stop offset="0%" [attr.stop-color]="gradient[1]" />
+        <stop offset="100%" stop-color="white" />
+      </linearGradient>
       <linearGradient id="fee-gradient" x1="0%" y1="0%" x2="100%" y2="0%">
         <stop offset="0%" [attr.stop-color]="gradient[1]" />
         <stop offset="50%" [attr.stop-color]="gradient[1]" />
@@ -35,10 +52,31 @@
       </linearGradient>
     </defs>
     <path [attr.d]="middle.path" class="line middle" [style]="middle.style"/>
-  <ng-container *ngFor="let input of inputs">
+    <ng-container *ngFor="let input of inputs; let i = index">
-    <path [attr.d]="input.path" class="line {{input.class}}" [style]="input.style" attr.marker-start="url(#{{input.class}}-arrow)"/>
+      <path
+        [attr.d]="input.path"
+        class="line {{input.class}}"
+        [style]="input.style"
+        attr.marker-start="url(#{{input.class}}-arrow)"
+        (pointerover)="onHover($event, 'input', i);"
+        (pointerout)="onBlur($event, 'input', i);"
+      />
     </ng-container>
-  <ng-container *ngFor="let output of outputs">
+    <ng-container *ngFor="let output of outputs; let i = index">
-    <path [attr.d]="output.path" class="line {{output.class}}" [style]="output.style" attr.marker-start="url(#{{output.class}}-arrow)" />
+      <path
+        [attr.d]="output.path"
+        class="line {{output.class}}"
+        [style]="output.style"
+        attr.marker-start="url(#{{output.class}}-arrow)"
+        (pointerover)="onHover($event, 'output', i);"
+        (pointerout)="onBlur($event, 'output', i);"
+      />
     </ng-container>
   </svg>
+
+  <app-tx-bowtie-graph-tooltip
+    *ngIf=[tooltip]
+    [line]="hoverLine"
+    [cursorPosition]="tooltipPosition"
+  ></app-tx-bowtie-graph-tooltip>
+</div>

frontend/src/app/components/tx-bowtie-graph/tx-bowtie-graph.component.scss

@@ -11,5 +11,19 @@
     &.fee {
       stroke: url(#fee-gradient);
     }
+
+    &:hover {
+      z-index: 10;
+      cursor: pointer;
+      &.input {
+        stroke: url(#input-hover-gradient);
+      }
+      &.output {
+        stroke: url(#output-hover-gradient);
+      }
+      &.fee {
+        stroke: url(#fee-hover-gradient);
+      }
+    }
   }
 }

frontend/src/app/components/tx-bowtie-graph/tx-bowtie-graph.component.ts

@@ -1,4 +1,4 @@
-import { Component, OnInit, Input, OnChanges } from '@angular/core';
+import { Component, OnInit, Input, OnChanges, HostListener } from '@angular/core';
 import { Transaction } from '../../interfaces/electrs.interface';
 
 interface SvgLine {
@@ -10,6 +10,9 @@ interface SvgLine {
 interface Xput {
   type: 'input' | 'output' | 'fee';
   value?: number;
+  index?: number;
+  address?: string;
+  rest?: number;
 }
 
 const lineLimit = 250;
@@ -27,12 +30,17 @@ export class TxBowtieGraphComponent implements OnInit, OnChanges {
   @Input() combinedWeight = 100;
   @Input() minWeight = 2; //
   @Input() maxStrands = 24; // number of inputs/outputs to keep fully on-screen.
+  @Input() tooltip = false;
 
+  inputData: Xput[];
+  outputData: Xput[];
   inputs: SvgLine[];
   outputs: SvgLine[];
   middle: SvgLine;
   midWidth: number;
   isLiquid: boolean = false;
+  hoverLine: Xput | void = null;
+  tooltipPosition = { x: 0, y: 0 };
 
   gradientColors = {
     '': ['#9339f4', '#105fb0'],
@@ -59,34 +67,51 @@ export class TxBowtieGraphComponent implements OnInit, OnChanges {
   ngOnChanges(): void {
     this.isLiquid = (this.network === 'liquid' || this.network === 'liquidtestnet');
     this.gradient = this.gradientColors[this.network];
+    this.midWidth = Math.min(50, Math.ceil(this.width / 20));
     this.initGraph();
   }
 
   initGraph(): void {
     const totalValue = this.calcTotalValue(this.tx);
-    let voutWithFee = this.tx.vout.map(v => { return { type: v.scriptpubkey_type === 'fee' ? 'fee' : 'output', value: v?.value } as Xput; });
+    let voutWithFee = this.tx.vout.map(v => {
+      return {
+        type: v.scriptpubkey_type === 'fee' ? 'fee' : 'output',
+        value: v?.value,
+        address: v?.scriptpubkey_address || v?.scriptpubkey_type?.toUpperCase(),
+      } as Xput;
+    });
 
     if (this.tx.fee && !this.isLiquid) {
       voutWithFee.unshift({ type: 'fee', value: this.tx.fee });
     }
+    const outputCount = voutWithFee.length;
 
-    let truncatedInputs = this.tx.vin.map(v => { return {type: 'input', value: v?.prevout?.value } as Xput; });
+    let truncatedInputs = this.tx.vin.map(v => {
+      return {
+        type: 'input',
+        value: v?.prevout?.value,
+        address: v?.prevout?.scriptpubkey_address || v?.prevout?.scriptpubkey_type?.toUpperCase(),
+      } as Xput;
+    });
 
     if (truncatedInputs.length > lineLimit) {
       const valueOfRest = truncatedInputs.slice(lineLimit).reduce((r, v) => {
         return r + (v.value || 0);
       }, 0);
       truncatedInputs = truncatedInputs.slice(0, lineLimit);
-      truncatedInputs.push({ type: 'input', value: valueOfRest });
+      truncatedInputs.push({ type: 'input', value: valueOfRest, rest: this.tx.vin.length - lineLimit });
     }
     if (voutWithFee.length > lineLimit) {
       const valueOfRest = voutWithFee.slice(lineLimit).reduce((r, v) => {
         return r + (v.value || 0);
       }, 0);
       voutWithFee = voutWithFee.slice(0, lineLimit);
-      voutWithFee.push({ type: 'output', value: valueOfRest });
+      voutWithFee.push({ type: 'output', value: valueOfRest, rest: outputCount - lineLimit });
     }
 
+    this.inputData = truncatedInputs;
+    this.outputData = voutWithFee;
+
     this.inputs = this.initLines('in', truncatedInputs, totalValue, this.maxStrands);
     this.outputs = this.initLines('out', voutWithFee, totalValue, this.maxStrands);
 
@@ -195,9 +220,32 @@ export class TxBowtieGraphComponent implements OnInit, OnChanges {
 
   makeStyle(minWeight, type): string {
     if (type === 'fee') {
-      return `stroke-width: ${minWeight}; stroke: url(#fee-gradient)`;
+      return `stroke-width: ${minWeight}`;
     } else {
       return `stroke-width: ${minWeight}`;
     }
   }
+
+  @HostListener('pointermove', ['$event'])
+  onPointerMove(event) {
+    this.tooltipPosition = { x: event.offsetX, y: event.offsetY };
+  }
+
+  onHover(event, side, index): void {
+    if (side === 'input') {
+      this.hoverLine = {
+        ...this.inputData[index],
+        index
+      };
+    } else {
+      this.hoverLine = {
+        ...this.outputData[index],
+        index
+      };
+    }
+  }
+
+  onBlur(event, side, index): void {
+    this.hoverLine = null;
+  }
 }

frontend/src/app/shared/shared.module.ts

@@ -61,6 +61,7 @@ import { FeesBoxComponent } from '../components/fees-box/fees-box.component';
 import { DifficultyComponent } from '../components/difficulty/difficulty.component';
 import { TermsOfServiceComponent } from '../components/terms-of-service/terms-of-service.component';
 import { TxBowtieGraphComponent } from '../components/tx-bowtie-graph/tx-bowtie-graph.component';
+import { TxBowtieGraphTooltipComponent } from '../components/tx-bowtie-graph-tooltip/tx-bowtie-graph-tooltip.component';
 import { PrivacyPolicyComponent } from '../components/privacy-policy/privacy-policy.component';
 import { TrademarkPolicyComponent } from '../components/trademark-policy/trademark-policy.component';
 import { PushTransactionComponent } from '../components/push-transaction/push-transaction.component';
@@ -134,6 +135,7 @@ import { GeolocationComponent } from '../shared/components/geolocation/geolocati
     FeesBoxComponent,
     DifficultyComponent,
     TxBowtieGraphComponent,
+    TxBowtieGraphTooltipComponent,
     TermsOfServiceComponent,
     PrivacyPolicyComponent,
     TrademarkPolicyComponent,
@@ -236,6 +238,7 @@ import { GeolocationComponent } from '../shared/components/geolocation/geolocati
     FeesBoxComponent,
     DifficultyComponent,
     TxBowtieGraphComponent,
+    TxBowtieGraphTooltipComponent,
     TermsOfServiceComponent,
     PrivacyPolicyComponent,
     TrademarkPolicyComponent,