Add interactivity to tx sankey diagram

2022-09-17 01:20:08 +00:00
parent 1e5cef4a62
commit 64f3a597a2
9 changed files with 264 additions and 52 deletions
--- a/frontend/src/app/components/tx-bowtie-graph/tx-bowtie-graph.component.html
+++ b/frontend/src/app/components/tx-bowtie-graph/tx-bowtie-graph.component.html
@@ -1,44 +1,82 @@
-<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"
-        refX="0" refY="0"
-        markerUnits="strokeWidth"
-        markerWidth="1.5" markerHeight="1"
-        orient="auto">
-      <path d="M -5 -5 L 0 0 L -5 5 L 1 5 L 1 -5 Z" stroke-width="0" [attr.fill]="gradient[0]"/>
-    </marker>
-    <marker id="output-arrow" viewBox="-5 -5 10 10"
-        refX="0" refY="0"
-        markerUnits="strokeWidth"
-        markerWidth="1.5" markerHeight="1"
-        orient="auto">
-      <path d="M 1 -5 L 0 -5 L -5 0 L 0 5 L 1 5 Z" stroke-width="0" [attr.fill]="gradient[0]"/>
-    </marker>
-    <marker id="fee-arrow" viewBox="-5 -5 10 10"
-        refX="0" refY="0"
-        markerUnits="strokeWidth"
-        markerWidth="1.5" markerHeight="1"
-        orient="auto">
-    </marker>
-    <linearGradient id="input-gradient" x1="0%" y1="0%" x2="100%" y2="0%">
+<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"
+          refX="0" refY="0"
+          markerUnits="strokeWidth"
+          markerWidth="1.5" markerHeight="1"
+          orient="auto">
+        <path d="M -5 -5 L 0 0 L -5 5 L 1 5 L 1 -5 Z" stroke-width="0" [attr.fill]="gradient[0]"/>
+      </marker>
+      <marker id="output-arrow" viewBox="-5 -5 10 10"
+          refX="0" refY="0"
+          markerUnits="strokeWidth"
+          markerWidth="1.5" markerHeight="1"
+          orient="auto">
+        <path d="M 1 -5 L 0 -5 L -5 0 L 0 5 L 1 5 Z" stroke-width="0" [attr.fill]="gradient[0]"/>
+      </marker>
+      <marker id="fee-arrow" viewBox="-5 -5 10 10"
+          refX="0" refY="0"
+          markerUnits="strokeWidth"
+          markerWidth="1.5" markerHeight="1"
+          orient="auto">
+      </marker>
+      <linearGradient id="input-gradient" x1="0%" y1="0%" x2="100%" y2="0%">
+        <stop offset="0%" [attr.stop-color]="gradient[0]" />
+        <stop offset="100%" [attr.stop-color]="gradient[1]" />
+      </linearGradient>
+      <linearGradient id="output-gradient" x1="0%" y1="0%" x2="100%" y2="0%">
+        <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="100%" [attr.stop-color]="gradient[1]" />
-    </linearGradient>
-    <linearGradient id="output-gradient" x1="0%" y1="0%" x2="100%" y2="0%">
-      <stop offset="0%" [attr.stop-color]="gradient[1]" />
-      <stop offset="100%" [attr.stop-color]="gradient[0]" />
-    </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]" />
-      <stop offset="100%" stop-color="transparent" />
-    </linearGradient>
-  </defs>
-  <path [attr.d]="middle.path" class="line middle" [style]="middle.style"/>
-  <ng-container *ngFor="let input of inputs">
-    <path [attr.d]="input.path" class="line {{input.class}}" [style]="input.style" attr.marker-start="url(#{{input.class}}-arrow)"/>
-  </ng-container>
-  <ng-container *ngFor="let output of outputs">
-    <path [attr.d]="output.path" class="line {{output.class}}" [style]="output.style" attr.marker-start="url(#{{output.class}}-arrow)" />
-  </ng-container>
-</svg>
+      <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]" />
+        <stop offset="100%" stop-color="transparent" />
+      </linearGradient>
+    </defs>
+    <path [attr.d]="middle.path" class="line middle" [style]="middle.style"/>
+    <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)"
+        (pointerover)="onHover($event, 'input', i);"
+        (pointerout)="onBlur($event, 'input', i);"
+      />
+    </ng-container>
+    <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)"
+        (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>
--- a/frontend/src/app/components/tx-bowtie-graph/tx-bowtie-graph.component.scss
+++ b/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);
+      }
+    }
  }
 }
--- a/frontend/src/app/components/tx-bowtie-graph/tx-bowtie-graph.component.ts
+++ b/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;
+  }
 }