Highlight url input/output in tx diagram & list

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

@@ -209,6 +209,7 @@
             [maxStrands]="graphExpanded ? maxInOut : 24"
             [network]="network"
             [tooltip]="true"
+            [inputIndex]="inputIndex" [outputIndex]="outputIndex"
             (selectInput)="selectInput($event)"
             (selectOutput)="selectOutput($event)"
           >

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

@@ -122,8 +122,15 @@ export class TransactionComponent implements OnInit, AfterViewInit, OnDestroy {
       .pipe(
         switchMap((params: ParamMap) => {
           const urlMatch = (params.get('id') || '').split(':');
+          if (urlMatch.length === 2 && urlMatch[1].length === 64) {
+            this.inputIndex = parseInt(urlMatch[0], 10);
+            this.outputIndex = null;
+            this.txId = urlMatch[1];
+          } else {
             this.txId = urlMatch[0];
             this.outputIndex = urlMatch[1] === undefined ? null : parseInt(urlMatch[1], 10);
+            this.inputIndex = null;
+          }
           this.seoService.setTitle(
             $localize`:@@bisq.transaction.browser-title:Transaction: ${this.txId}:INTERPOLATION:`
           );

frontend/src/app/components/transactions-list/transactions-list.component.html

@@ -220,7 +220,7 @@
                       <fa-icon [icon]="['fas', 'arrow-alt-circle-right']" [fixedWidth]="true"></fa-icon>
                     </span>
                     <ng-template #spent>
-                      <a *ngIf="tx._outspends[vindex].txid else outputNoTxId" [routerLink]="['/tx/' | relativeUrl, tx._outspends[vindex].txid]" class="red">
+                      <a *ngIf="tx._outspends[vindex].txid else outputNoTxId" [routerLink]="['/tx/' | relativeUrl, tx._outspends[vindex].vin + ':' + tx._outspends[vindex].txid]" class="red">
                         <fa-icon [icon]="['fas', 'arrow-alt-circle-right']" [fixedWidth]="true"></fa-icon>
                       </a>
                       <ng-template #outputNoTxId>

frontend/src/app/components/transactions-list/transactions-list.component.ts

@@ -104,7 +104,7 @@ export class TransactionsListComponent implements OnInit, OnChanges {
     if (changes.inputIndex || changes.outputIndex || changes.rowLimit) {
       this.inputRowLimit = Math.max(this.rowLimit, (this.inputIndex || 0) + 3);
       this.outputRowLimit = Math.max(this.rowLimit, (this.outputIndex || 0) + 3);
-      if (this.inputIndex || this.outputIndex) {
+      if ((this.inputIndex || this.outputIndex) && !changes.transactions) {
         setTimeout(() => {
           const assetBoxElements = document.getElementsByClassName('assetBox');
           if (assetBoxElements && assetBoxElements[0]) {

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

@@ -41,6 +41,18 @@
         <stop offset="98%" [attr.stop-color]="gradient[0]" />
         <stop offset="100%" [attr.stop-color]="gradient[0]" />
       </linearGradient>
+      <linearGradient id="input-highlight-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="#1bd8f4" />
+        <stop offset="100%" [attr.stop-color]="gradient[1]" />
+      </linearGradient>
+      <linearGradient id="output-highlight-gradient" x1="0%" y1="0%" x2="100%" y2="0%">
+        <stop offset="0%" [attr.stop-color]="gradient[1]" />
+        <stop offset="70%" stop-color="#1bd8f4" />
+        <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" />
@@ -56,6 +68,7 @@
       <path
         [attr.d]="input.path"
         class="line {{input.class}}"
+        [class.highlight]="inputData[i].index === inputIndex"
         [style]="input.style"
         attr.marker-start="url(#{{input.class}}-arrow)"
         (pointerover)="onHover($event, 'input', i);"
@@ -67,6 +80,7 @@
       <path
         [attr.d]="output.path"
         class="line {{output.class}}"
+        [class.highlight]="outputData[i].index === outputIndex"
         [style]="output.style"
         attr.marker-start="url(#{{output.class}}-arrow)"
         (pointerover)="onHover($event, 'output', i);"

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

@@ -12,6 +12,17 @@
       stroke: url(#fee-gradient);
     }
 
+    &.highlight {
+      z-index: 8;
+      cursor: pointer;
+      &.input {
+        stroke: url(#input-highlight-gradient);
+      }
+      &.output {
+        stroke: url(#output-highlight-gradient);
+      }
+    }
+
     &:hover {
       z-index: 10;
       cursor: pointer;

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

@@ -40,6 +40,8 @@ export class TxBowtieGraphComponent implements OnInit, OnChanges {
   @Input() minWeight = 2; //
   @Input() maxStrands = 24; // number of inputs/outputs to keep fully on-screen.
   @Input() tooltip = false;
+  @Input() inputIndex: number;
+  @Input() outputIndex: number;
 
   @Output() selectInput = new EventEmitter<number>();
   @Output() selectOutput = new EventEmitter<number>();
@@ -378,7 +380,7 @@ export class TxBowtieGraphComponent implements OnInit, OnChanges {
       const output = this.tx.vout[index];
       const outspend = this.outspends[index];
       if (output && outspend && outspend.spent && outspend.txid) {
-        this.router.navigate([this.relativeUrlPipe.transform('/tx'), outspend.txid], {
+        this.router.navigate([this.relativeUrlPipe.transform('/tx'), outspend.vin + ':' + outspend.txid], {
           queryParamsHandling: 'merge',
           fragment: 'flow'
         });