Add interactivity to tx sankey diagram

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>