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

import { Component, OnInit, Input, OnChanges, HostListener, Inject, LOCALE_ID } from '@angular/core';
import { StateService } from '../../services/state.service';
import { Outspend, Transaction, Vin, Vout } from '../../interfaces/electrs.interface';
import { Router } from '@angular/router';
import { ReplaySubject, merge, Subscription, of } from 'rxjs';
import { tap, switchMap } from 'rxjs/operators';
import { ApiService } from '../../services/api.service';
import { RelativeUrlPipe } from '../../shared/pipes/relative-url/relative-url.pipe';
import { AssetsService } from '../../services/assets.service';
import { environment } from '../../../environments/environment';
import { ElectrsApiService } from '../../services/electrs-api.service';

interface SvgLine {
  path: string;
  style: string;
  class?: string;
  connectorPath?: string;
  markerPath?: string;
  zeroValue?: boolean;
}

interface Xput {
  type: 'input' | 'output' | 'fee';
  value?: number;
  displayValue?: number;
  index?: number;
  txid?: string;
  vin?: number;
  vout?: number;
  address?: string;
  rest?: number;
  coinbase?: boolean;
  pegin?: boolean;
  pegout?: string;
  confidential?: boolean;
  timestamp?: number;
  blockHeight?: number;
  asset?: string;
}

@Component({
  selector: 'tx-bowtie-graph',
  templateUrl: './tx-bowtie-graph.component.html',
  styleUrls: ['./tx-bowtie-graph.component.scss'],
})
export class TxBowtieGraphComponent implements OnInit, OnChanges {
  @Input() tx: Transaction;
  @Input() network: string;
  @Input() cached: boolean = false;
  @Input() width = 1200;
  @Input() height = 600;
  @Input() lineLimit = 250;
  @Input() maxCombinedWeight = 100;
  @Input() minWeight = 2; //
  @Input() maxStrands = 24; // number of inputs/outputs to keep fully on-screen.
  @Input() tooltip = false;
  @Input() connectors = false;
  @Input() inputIndex: number;
  @Input() outputIndex: number;

  dir: 'rtl' | 'ltr' = 'ltr';

  inputData: Xput[];
  outputData: Xput[];
  inputs: SvgLine[];
  outputs: SvgLine[];
  middle: SvgLine;
  midWidth: number;
  txWidth: number;
  connectorWidth: number;
  combinedWeight: number;
  isLiquid: boolean = false;
  hoverLine: Xput | void = null;
  hoverConnector: boolean = false;
  tooltipPosition = { x: 0, y: 0 };
  outspends: Outspend[] = [];
  zeroValueWidth = 60;
  zeroValueThickness = 20;
  hasLine: boolean;
  assetsMinimal: any;
  nativeAssetId = this.stateService.network === 'liquidtestnet' ? environment.nativeTestAssetId : environment.nativeAssetId;

  outspendsSubscription: Subscription;
  refreshOutspends$: ReplaySubject<string> = new ReplaySubject();

  gradientColors = {
    '': ['#9339f4', '#105fb0', '#9339f400'],
    bisq: ['#9339f4', '#105fb0', '#9339f400'],
    // liquid: ['#116761', '#183550'],
    liquid: ['#09a197', '#0f62af', '#09a19700'],
    // 'liquidtestnet': ['#494a4a', '#272e46'],
    'liquidtestnet': ['#d2d2d2', '#979797', '#d2d2d200'],
    // testnet: ['#1d486f', '#183550'],
    testnet: ['#4edf77', '#10a0af', '#4edf7700'],
    // signet: ['#6f1d5d', '#471850'],
    signet: ['#d24fc8', '#a84fd2', '#d24fc800'],
  };

  gradient: string[] = ['#105fb0', '#105fb0'];

  constructor(
    private router: Router,
    private relativeUrlPipe: RelativeUrlPipe,
    private stateService: StateService,
    private electrsApiService: ElectrsApiService,
    private assetsService: AssetsService,
    @Inject(LOCALE_ID) private locale: string,
  ) {
    if (this.locale.startsWith('ar') || this.locale.startsWith('fa') || this.locale.startsWith('he')) {
      this.dir = 'rtl';
    }
  }

  ngOnInit(): void {
    this.initGraph();

    if (this.network === 'liquid' || this.network === 'liquidtestnet') {
      this.assetsService.getAssetsMinimalJson$.subscribe((assets) => {
        this.assetsMinimal = assets;
      });
    }

    this.outspendsSubscription = merge(
      this.refreshOutspends$
        .pipe(
          switchMap((txid) => {
            if (!this.cached) {
              return this.electrsApiService.cachedRequest(this.electrsApiService.getOutspendsBatched$, 250, [txid]);
            } else {
              return of(null);
            }
          }),
          tap((outspends: Outspend[][]) => {
            if (!this.tx || !outspends || !outspends.length) {
              return;
            }
            this.outspends = outspends[0];
          }),
        ),
      this.stateService.utxoSpent$
        .pipe(
          tap((utxoSpent) => {
            for (const i in utxoSpent) {
              this.outspends[i] = {
                spent: true,
                txid: utxoSpent[i].txid,
                vin: utxoSpent[i].vin,
              };
            }
          }),
        ),
    ).subscribe(() => {});
  }

  ngOnChanges(): void {
    this.initGraph();
    if (!this.cached) {
      this.refreshOutspends$.next(this.tx.txid);
    }
  }

  initGraph(): void {
    this.isLiquid = (this.network === 'liquid' || this.network === 'liquidtestnet');
    this.gradient = this.gradientColors[this.network];
    this.midWidth = Math.min(10, Math.ceil(this.width / 100));
    this.txWidth = this.connectors ? Math.max(this.width - 200, this.width * 0.8) : this.width - 20;
    this.combinedWeight = Math.min(this.maxCombinedWeight, Math.floor((this.txWidth - (2 * this.midWidth)) / 6));
    this.connectorWidth = (this.width - this.txWidth) / 2;
    this.zeroValueWidth = Math.max(20, Math.min((this.txWidth / 2) - this.midWidth - 110, 60));

    const totalValue = this.calcTotalValue(this.tx);
    let voutWithFee = this.tx.vout.map((v, i) => {
      return {
        type: v.scriptpubkey_type === 'fee' ? 'fee' : 'output',
        value: this.getOutputValue(v),
        displayValue: v?.value,
        address: v?.scriptpubkey_address || v?.scriptpubkey_type?.toUpperCase(),
        index: i,
        pegout: v?.pegout?.scriptpubkey_address,
        confidential: (this.isLiquid && v?.value === undefined),
        timestamp: this.tx.status.block_time,
        blockHeight: this.tx.status.block_height,
        asset: v?.asset,
      } as Xput;
    });

    if (this.tx.fee && !this.isLiquid) {
      voutWithFee.unshift({ type: 'fee', value: this.tx.fee });
    }
    const outputCount = voutWithFee.length;

    let truncatedInputs = this.tx.vin.map((v, i) => {
      return {
        type: 'input',
        value: (v?.is_coinbase && !totalValue ? 0 : this.getInputValue(v)),
        displayValue: v?.prevout?.value,
        txid: v.txid,
        vout: v.vout,
        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),
        timestamp: this.tx.status.block_time,
        blockHeight: this.tx.status.block_height,
        asset: v?.prevout?.asset,
      } as Xput;
    });

    if (truncatedInputs.length > this.lineLimit) {
      const valueOfRest = truncatedInputs.slice(this.lineLimit).reduce((r, v) => {
        return r + (v.value || 0);
      }, 0);
      truncatedInputs = truncatedInputs.slice(0, this.lineLimit);
      truncatedInputs.push({ type: 'input', value: valueOfRest, rest: this.tx.vin.length - this.lineLimit });
    }
    if (voutWithFee.length > this.lineLimit) {
      const valueOfRest = voutWithFee.slice(this.lineLimit).reduce((r, v) => {
        return r + (v.value || 0);
      }, 0);
      voutWithFee = voutWithFee.slice(0, this.lineLimit);
      voutWithFee.push({ type: 'output', value: valueOfRest, rest: outputCount - this.lineLimit });
    }

    this.inputData = truncatedInputs;
    this.outputData = voutWithFee;

    this.inputs = this.initLines('in', truncatedInputs, totalValue, this.maxStrands);
    this.outputs = this.initLines('out', voutWithFee, totalValue, this.maxStrands);

    this.middle = {
      path: `M ${(this.width / 2) - this.midWidth} ${(this.height / 2) + 0.25} L ${(this.width / 2) + this.midWidth} ${(this.height / 2) + 0.25}`,
      style: `stroke-width: ${this.combinedWeight + 0.5}; stroke: ${this.gradient[1]}`
    };

    this.hasLine = this.inputs.reduce((line, put) => line || !put.zeroValue, false)
      && this.outputs.reduce((line, put) => line || !put.zeroValue, false);
  }

  calcTotalValue(tx: Transaction): number {
    let totalOutput = this.tx.vout.reduce((acc, v) => (this.getOutputValue(v) || 0) + acc, 0);
    // simple sum of outputs + fee for bitcoin
    if (!this.isLiquid) {
      return this.tx.fee ? totalOutput + this.tx.fee : totalOutput;
    } else {
      const totalInput = this.tx.vin.reduce((acc, v) => (this.getInputValue(v) || 0) + acc, 0);
      const confidentialInputCount = this.tx.vin.reduce((acc, v) => acc + (this.isUnknownInputValue(v) ? 1 : 0), 0);
      const confidentialOutputCount = this.tx.vout.reduce((acc, v) => acc + (this.isUnknownOutputValue(v) ? 1 : 0), 0);

      // if there are unknowns on both sides, the total is indeterminate, so we'll just fudge it
      if (confidentialInputCount && confidentialOutputCount) {
        const knownInputCount = (tx.vin.length - confidentialInputCount) || 1;
        const knownOutputCount = (tx.vout.length - confidentialOutputCount) || 1;
        // assume confidential inputs/outputs have the same average value as the known ones
        const adjustedTotalInput = totalInput + ((totalInput / knownInputCount) * confidentialInputCount);
        const adjustedTotalOutput = totalOutput + ((totalOutput / knownOutputCount) * confidentialOutputCount);
        return Math.max(adjustedTotalInput, adjustedTotalOutput);
      } else {
        // otherwise knowing the actual total of one side suffices
        return Math.max(totalInput, totalOutput);
      }
    }
  }

  initLines(side: 'in' | 'out', xputs: Xput[], total: number, maxVisibleStrands: number): SvgLine[] {
    if (!total) {
      const weights = xputs.map((put) => this.combinedWeight / xputs.length);
      return this.linesFromWeights(side, xputs, weights, maxVisibleStrands);
    } else {
      let unknownCount = 0;
      let unknownTotal = total;
      xputs.forEach(put => {
        if (put.value == null) {
          unknownCount++;
        } else {
          unknownTotal -= put.value as number;
        }
      });
      const unknownShare = unknownTotal / unknownCount;
      // conceptual weights
      const weights = xputs.map((put) => this.combinedWeight * (put.value == null ? unknownShare : put.value as number) / total);
      return this.linesFromWeights(side, xputs, weights, maxVisibleStrands);
    }
  }

  linesFromWeights(side: 'in' | 'out', xputs: Xput[], weights: number[], maxVisibleStrands: number): SvgLine[] {
    const lineParams = weights.map((w, i) => {
      return {
        weight: w,
        thickness: xputs[i].value === 0 ? this.zeroValueThickness : Math.min(this.combinedWeight + 0.5, Math.max(this.minWeight - 1, w) + 1),
        offset: 0,
        innerY: 0,
        outerY: 0,
      };
    });
    const visibleStrands = Math.min(maxVisibleStrands, xputs.length);
    const visibleWeight = lineParams.slice(0, visibleStrands).reduce((acc, v) => v.thickness + acc, 0);
    const gaps = visibleStrands - 1;

    // bounds of the middle segment
    const innerTop = (this.height / 2) - (this.combinedWeight / 2);
    const innerBottom = innerTop + this.combinedWeight + 0.5;
    // tracks the visual bottom of the endpoints of the previous line
    let lastOuter = 0;
    let lastInner = innerTop;
    // gap between strands
    const spacing = Math.max(4, (this.height - visibleWeight) / gaps);

    // curve adjustments to prevent overlaps
    let offset = 0;
    let minOffset = 0;
    let maxOffset = 0;
    let lastWeight = 0;
    let pad = 0;
    lineParams.forEach((line, i) => {
      if (xputs[i].value === 0) {
        line.outerY = lastOuter + (this.zeroValueThickness / 2);
        if (xputs.length === 1) {
          line.outerY = (this.height / 2);
        }
        lastOuter += this.zeroValueThickness + spacing;
        return;
      }

      // set the vertical position of the (center of the) outer side of the line
      line.outerY = lastOuter + (line.thickness / 2);
      line.innerY = Math.min(innerBottom - (line.thickness / 2), Math.max(innerTop + (line.thickness / 2), lastInner + (line.weight / 2)));

      // special case to center single input/outputs
      if (xputs.length === 1) {
        line.outerY = (this.height / 2);
      }

      lastOuter += line.thickness + spacing;
      lastInner += line.weight;

      // calculate conservative lower bound of the amount of horizontal offset
      // required to prevent this line overlapping its neighbor

      if (this.tooltip || !xputs[i].rest) {
        const w = (this.txWidth - Math.max(lastWeight, line.weight) - (this.connectorWidth * 2)) / 2; // approximate horizontal width of the curved section of the line
        const y1 = line.outerY;
        const y2 = line.innerY;
        const t = (lastWeight + line.weight) / 2; // distance between center of this line and center of previous line

        // slope of the inflection point of the bezier curve
        const dx = 0.75 * w;
        const dy = 1.5 * (y2 - y1);
        const a = Math.atan2(dy, dx);

        // parallel curves should be separated by >=t at the inflection point to prevent overlap
        // vertical offset is always = t, contributing tCos(a)
        // horizontal offset h will contribute hSin(a)
        // tCos(a) + hSin(a) >= t
        // h >= t(1 - cos(a)) / sin(a)
        if (Math.sin(a) !== 0) {
          // (absolute value clamped to t for sanity)
          offset += Math.max(Math.min(t * (1 - Math.cos(a)) / Math.sin(a), t), -t);
        }

        line.offset = offset;
        minOffset = Math.min(minOffset, offset);
        maxOffset = Math.max(maxOffset, offset);
        pad = Math.max(pad, line.thickness / 2);
        lastWeight = line.weight;
      } else {
        // skip the offsets for consolidated lines in unfurls, since these *should* overlap a little
      }
    });

    // normalize offsets
    lineParams.forEach((line) => {
      line.offset -= minOffset;
    });
    maxOffset -= minOffset;

    return lineParams.map((line, i) => {
      if (xputs[i].value === 0) {
        return {
          path: this.makeZeroValuePath(side, line.outerY),
          style: this.makeStyle(this.zeroValueThickness, xputs[i].type),
          class: xputs[i].type,
          zeroValue: true,
        };
      } else {
        return {
          path: this.makePath(side, line.outerY, line.innerY, line.thickness, line.offset, pad + maxOffset),
          style: this.makeStyle(line.thickness, xputs[i].type),
          class: xputs[i].type,
          connectorPath: this.connectors ? this.makeConnectorPath(side, line.outerY, line.innerY, line.thickness): null,
          markerPath: this.makeMarkerPath(side, line.outerY, line.innerY, line.thickness),
        };
      }
    });
  }

  makePath(side: 'in' | 'out', outer: number, inner: number, weight: number, offset: number, pad: number): string {
    const start = (weight * 0.5) + this.connectorWidth;
    const curveStart = Math.max(start + 5, pad + this.connectorWidth - offset);
    const end =  this.width / 2 - (this.midWidth * 0.9) + 1;
    const curveEnd = end - offset - 10;
    const midpoint = (curveStart + curveEnd) / 2;

    // correct for svg horizontal gradient bug
    if (Math.round(outer) === Math.round(inner)) {
      outer -= 1;
    }

    if (side === 'in') {
      return `M ${start} ${outer} L ${curveStart} ${outer} C ${midpoint} ${outer}, ${midpoint} ${inner}, ${curveEnd} ${inner} L ${end} ${inner}`;
    } else { // mirrored in y-axis for the right hand side
      return `M ${this.width - start} ${outer} L ${this.width - curveStart} ${outer} C ${this.width - midpoint} ${outer}, ${this.width - midpoint} ${inner}, ${this.width - curveEnd} ${inner} L ${this.width - end} ${inner}`;
    }
  }

  makeZeroValuePath(side: 'in' | 'out', y: number): string {
    const offset = this.zeroValueThickness / 2;
    const start = (this.connectorWidth / 2) + 10;
    if (side === 'in') {
      return `M ${start + offset} ${y} L ${start + this.zeroValueWidth + offset} ${y}`;
    } else { // mirrored in y-axis for the right hand side
      return `M ${this.width - start - offset} ${y} L ${this.width - start - this.zeroValueWidth - offset} ${y}`;
    }
  }

  makeConnectorPath(side: 'in' | 'out', y: number, inner, weight: number): string {
    const halfWidth = weight * 0.5;
    const offset = 10; //Math.max(2, halfWidth * 0.2);
    const lineEnd = this.connectorWidth;

    // align with for svg horizontal gradient bug correction
    if (Math.round(y) === Math.round(inner)) {
      y -= 1;
    }

    if (side === 'in') {
      return `M ${lineEnd - offset} ${y - halfWidth} L ${halfWidth + lineEnd - offset} ${y} L ${lineEnd - offset} ${y + halfWidth} L -${10} ${ y + halfWidth} L -${10} ${y - halfWidth}`;
    } else {
      return `M ${this.width - halfWidth - lineEnd + offset} ${y - halfWidth} L ${this.width - lineEnd + offset} ${y} L ${this.width - halfWidth - lineEnd + offset} ${y + halfWidth} L ${this.width + 10} ${ y + halfWidth} L ${this.width + 10} ${y - halfWidth}`;
    }
  }

  makeMarkerPath(side: 'in' | 'out', y: number, inner, weight: number): string {
    const halfWidth = weight * 0.5;
    const offset = 10; //Math.max(2, halfWidth * 0.2);
    const lineEnd = this.connectorWidth;

    // align with for svg horizontal gradient bug correction
    if (Math.round(y) === Math.round(inner)) {
      y -= 1;
    }

    if (side === 'in') {
      return `M ${lineEnd - offset} ${y - halfWidth} L ${halfWidth + lineEnd - offset} ${y} L ${lineEnd - offset} ${y + halfWidth} L ${weight + lineEnd} ${ y + halfWidth} L ${weight + lineEnd} ${y - halfWidth}`;
    } else {
      return `M ${this.width - halfWidth - lineEnd + offset} ${y - halfWidth} L ${this.width - lineEnd + offset} ${y} L ${this.width - halfWidth - lineEnd + offset} ${y + halfWidth} L ${this.width - halfWidth - lineEnd} ${ y + halfWidth} L ${this.width - halfWidth - lineEnd} ${y - halfWidth}`;
    }
  }

  makeStyle(minWeight, type): string {
    if (type === 'fee') {
      return `stroke-width: ${minWeight}`;
    } else {
      return `stroke-width: ${minWeight}`;
    }
  }

  getOutputValue(v: Vout): number | void {
    if (!v) {
      return null;
    } else if (this.isLiquid && v.asset !== this.nativeAssetId) {
      return null;
    } else {
      return v.value;
    }
  }

  getInputValue(v: Vin): number | void {
    if (!v?.prevout) {
      return null;
    } else if (this.isLiquid && v.prevout.asset !== this.nativeAssetId) {
      return null;
    } else {
      return v.prevout.value;
    }
  }

  isUnknownInputValue(v: Vin): boolean {
    return v?.prevout?.value == null || this.isLiquid && v?.prevout?.asset !== this.nativeAssetId;
  }

  isUnknownOutputValue(v: Vout): boolean {
    return v?.value == null || this.isLiquid && v?.asset !== this.nativeAssetId;
  }

  @HostListener('pointermove', ['$event'])
  onPointerMove(event) {
    if (this.dir === 'rtl') {
      this.tooltipPosition = { x: this.width - event.offsetX, y: event.offsetY };
    } else {
     this.tooltipPosition = { x: event.offsetX, y: event.offsetY };
    }
  }

  onHover(event, side, index): void {
    if (side.startsWith('input')) {
      this.hoverLine = {
        ...this.inputData[index],
        index
      };
      this.hoverConnector = (side === 'input-connector');

    } else {
      this.hoverLine = {
        ...this.outputData[index],
        ...this.outspends[this.outputData[index].index]
      };
      this.hoverConnector = (side === 'output-connector');
    }
  }

  onBlur(event, side, index): void {
    this.hoverLine = null;
    this.hoverConnector = false;
  }

  onClick(event, side, index): void {
    if (side.startsWith('input')) {
      const input = this.tx.vin[index];
      if (side === 'input-connector' && input && !input.is_coinbase && !input.is_pegin && input.txid && input.vout != null) {
        this.router.navigate([this.relativeUrlPipe.transform('/tx'), input.txid], {
          queryParamsHandling: 'merge',
          fragment: (new URLSearchParams({
            flow: '',
            vout: input.vout.toString(),
          })).toString(),
        });
      } else if (index != null) {
        this.router.navigate([this.relativeUrlPipe.transform('/tx'), this.tx.txid], {
          queryParamsHandling: 'merge',
          fragment: (new URLSearchParams({
            flow: '',
            vin: index.toString(),
          })).toString(),
        });
      }
    } else {
      const output = this.tx.vout[index];
      const outspend = this.outspends[index];
      if (side === 'output-connector' && output && outspend && outspend.spent && outspend.txid) {
        this.router.navigate([this.relativeUrlPipe.transform('/tx'), outspend.txid], {
          queryParamsHandling: 'merge',
          fragment: (new URLSearchParams({
            flow: '',
            vin: outspend.vin.toString(),
          })).toString(),
        });
      } else if (index != null) {
        this.router.navigate([this.relativeUrlPipe.transform('/tx'), this.tx.txid], {
          queryParamsHandling: 'merge',
          fragment: (new URLSearchParams({
            flow: '',
            vout: index.toString(),
          })).toString(),
        });
      }
    }
  }
}