Add interactivity to tx sankey diagram

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 };
+    }
+  }
+}