2022-09-17 01:20:08 +00:00
|
|
|
<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%">
|
2022-08-24 18:54:11 +00:00
|
|
|
<stop offset="0%" [attr.stop-color]="gradient[0]" />
|
2022-09-17 01:20:08 +00:00
|
|
|
<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);"
|
2022-10-04 21:00:46 +00:00
|
|
|
(click)="onClick($event, 'input', inputData[i].index);"
|
2022-09-17 01:20:08 +00:00
|
|
|
/>
|
|
|
|
|
</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);"
|
2022-10-04 21:00:46 +00:00
|
|
|
(click)="onClick($event, 'output', outputData[i].index);"
|
2022-09-17 01:20:08 +00:00
|
|
|
/>
|
|
|
|
|
</ng-container>
|
|
|
|
|
</svg>
|
|
|
|
|
|
|
|
|
|
<app-tx-bowtie-graph-tooltip
|
|
|
|
|
*ngIf=[tooltip]
|
|
|
|
|
[line]="hoverLine"
|
|
|
|
|
[cursorPosition]="tooltipPosition"
|
|
|
|
|
></app-tx-bowtie-graph-tooltip>
|
|
|
|
|
</div>
|
