Scroll to input/output when clicked in tx diagram

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

@@ -60,6 +60,7 @@
         attr.marker-start="url(#{{input.class}}-arrow)"
         (pointerover)="onHover($event, 'input', i);"
         (pointerout)="onBlur($event, 'input', i);"
+        (click)="onClick($event, 'input', inputData[i].index);"
       />
     </ng-container>
     <ng-container *ngFor="let output of outputs; let i = index">
@@ -70,6 +71,7 @@
         attr.marker-start="url(#{{output.class}}-arrow)"
         (pointerover)="onHover($event, 'output', i);"
         (pointerout)="onBlur($event, 'output', i);"
+        (click)="onClick($event, 'output', outputData[i].index);"
       />
     </ng-container>
   </svg>

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

@@ -1,4 +1,4 @@
-import { Component, OnInit, Input, OnChanges, HostListener } from '@angular/core';
+import { Component, OnInit, Input, Output, EventEmitter, OnChanges, HostListener } from '@angular/core';
 import { Transaction } from '../../interfaces/electrs.interface';
 
 interface SvgLine {
@@ -35,6 +35,9 @@ export class TxBowtieGraphComponent implements OnInit, OnChanges {
   @Input() maxStrands = 24; // number of inputs/outputs to keep fully on-screen.
   @Input() tooltip = false;
 
+  @Output() selectInput = new EventEmitter<number>();
+  @Output() selectOutput = new EventEmitter<number>();
+
   inputData: Xput[];
   outputData: Xput[];
   inputs: SvgLine[];
@@ -76,11 +79,12 @@ export class TxBowtieGraphComponent implements OnInit, OnChanges {
     this.combinedWeight = Math.min(this.maxCombinedWeight, Math.floor((this.width - (2 * this.midWidth)) / 6));
 
     const totalValue = this.calcTotalValue(this.tx);
-    let voutWithFee = this.tx.vout.map(v => {
+    let voutWithFee = this.tx.vout.map((v, i) => {
       return {
         type: v.scriptpubkey_type === 'fee' ? 'fee' : 'output',
         value: v?.value,
         address: v?.scriptpubkey_address || v?.scriptpubkey_type?.toUpperCase(),
+        index: i,
         pegout: v?.pegout?.scriptpubkey_address,
         confidential: (this.isLiquid && v?.value === undefined),
       } as Xput;
@@ -91,11 +95,12 @@ export class TxBowtieGraphComponent implements OnInit, OnChanges {
     }
     const outputCount = voutWithFee.length;
 
-    let truncatedInputs = this.tx.vin.map(v => {
+    let truncatedInputs = this.tx.vin.map((v, i) => {
       return {
         type: 'input',
         value: v?.prevout?.value,
         address: v?.prevout?.scriptpubkey_address || v?.prevout?.scriptpubkey_type?.toUpperCase(),
+        index: i,
         coinbase: v?.is_coinbase,
         pegin: v?.is_pegin,
         confidential: (this.isLiquid && v?.prevout?.value === undefined),
@@ -306,8 +311,7 @@ export class TxBowtieGraphComponent implements OnInit, OnChanges {
       };
     } else {
       this.hoverLine = {
-        ...this.outputData[index],
-        index
+        ...this.outputData[index]
       };
     }
   }
@@ -315,4 +319,12 @@ export class TxBowtieGraphComponent implements OnInit, OnChanges {
   onBlur(event, side, index): void {
     this.hoverLine = null;
   }
+
+  onClick(event, side, index): void {
+    if (side === 'input') {
+      this.selectInput.emit(index);
+    } else {
+      this.selectOutput.emit(index);
+    }
+  }
 }