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

<div
  #tooltip
  *ngIf="line"
  class="bowtie-graph-tooltip"
  [style.visibility]="line ? 'visible' : 'hidden'"
  [style.left]="tooltipPosition.x + 'px'"
  [style.top]="tooltipPosition.y + 'px'"
>
  <ng-container *ngIf="line.rest; else coinbase">
    <span>{{ line.rest }} </span>
    <ng-container [ngSwitch]="line.type">
      <span *ngSwitchCase="'input'" i18n="transaction.other-inputs">other inputs</span>
      <span *ngSwitchCase="'output'" i18n="transaction.other-outputs">other outputs</span>
    </ng-container>
  </ng-container>

  <ng-template #coinbase>
    <ng-container *ngIf="line.coinbase; else pegin">
      <p i18n="transactions-list.coinbase">Coinbase</p>
    </ng-container>
  </ng-template>

  <ng-template #pegin>
    <ng-container *ngIf="line.pegin; else pegout">
      <p *ngIf="!isConnector">Peg In</p>
    </ng-container>
  </ng-template>

  <ng-template #pegout>
    <ng-container *ngIf="line.pegout; else normal">
      <p *ngIf="!isConnector">Peg Out</p>
      <p *ngIf="line.displayValue != null"><app-amount [satoshis]="line.displayValue"></app-amount></p>
      <p class="address">
        <app-truncate [text]="line.pegout"></app-truncate>
      </p>
    </ng-container>
  </ng-template>

  <ng-template #normal>
      <p *ngIf="!isConnector">
        <ng-container [ngSwitch]="line.type">
          <span *ngSwitchCase="'input'" i18n="transaction.input">Input</span>
          <span *ngSwitchCase="'output'" i18n="transaction.output">Output</span>
          <span *ngSwitchCase="'fee'" i18n="transaction.fee|Transaction fee">Fee</span>
        </ng-container>
        <span *ngIf="line.type !== 'fee'"> #{{ line.index + 1 }}</span>
        <ng-container [ngSwitch]="line.type">
          <span *ngSwitchCase="'input'"> 
            <ng-container *ngIf="line.status?.block_height">
                <ng-container *ngIf="line.blockHeight; else noBlockHeight">
                  <ng-container *ngTemplateOutlet="nBlocksEarlier; context:{n: line.blockHeight - line?.status?.block_height, connector: false}"></ng-container>
              </ng-container>
              <ng-template #noBlockHeight>
                <ng-container *ngTemplateOutlet="nBlocksEarlier; context:{n: chainTip + 1 - line?.status?.block_height, connector: false}"></ng-container>
              </ng-template>
            </ng-container>
          </span>
          <span *ngSwitchCase="'output'">
            <ng-container *ngIf="line.blockHeight && line?.spent">
              <ng-container *ngIf="line?.status?.block_height; else noBlockHeight">
                <ng-container *ngTemplateOutlet="nBlocksLater; context:{n: line?.status?.block_height - line.blockHeight, connector: false}"></ng-container>
              </ng-container>
              <ng-template #noBlockHeight>
                <ng-container *ngTemplateOutlet="nBlocksLater; context:{n: chainTip + 1 - line.blockHeight, connector: false}"></ng-container>
              </ng-template>
            </ng-container>
          </span>
        </ng-container>
      </p>
      <ng-container *ngIf="isConnector && line.txid">
        <p>
          <span i18n="transaction">Transaction</span>&nbsp;
          <app-truncate [text]="line.txid"></app-truncate>
        </p>
          <ng-container [ngSwitch]="line.type">
            <p *ngSwitchCase="'input'"><span i18n="transaction.output">Output</span>&nbsp; #{{ line.vout + 1 }}
              <ng-container *ngIf="line.status?.block_height">
                <ng-container *ngIf="line.blockHeight; else noBlockHeight">
                  <ng-container *ngTemplateOutlet="nBlocksEarlier; context:{n: line.blockHeight - line?.status?.block_height, connector: true}"></ng-container>
                </ng-container>
                <ng-template #noBlockHeight>
                  <ng-container *ngTemplateOutlet="nBlocksEarlier; context:{n: chainTip + 1 - line?.status?.block_height, connector: true}"></ng-container>
                </ng-template>
              </ng-container>
            </p>
            <p *ngSwitchCase="'output'"><span i18n="transaction.input">Input</span>&nbsp; #{{ line.vin + 1 }}
              <ng-container *ngIf="line.blockHeight">
                <ng-container *ngIf="line?.status?.block_height; else noBlockHeight">
                  <ng-container *ngTemplateOutlet="nBlocksLater; context:{n: line?.status?.block_height - line.blockHeight, connector: true}"></ng-container>
                </ng-container>
                <ng-template #noBlockHeight>
                  <ng-container *ngTemplateOutlet="nBlocksLater; context:{n: chainTip + 1 - line.blockHeight, connector: true}"></ng-container>
                </ng-template>
              </ng-container>
            </p>
          </ng-container>
      </ng-container>
      <p *ngIf="line.displayValue == null && line.confidential" i18n="shared.confidential">Confidential</p>
      <p *ngIf="line.displayValue != null">
        <ng-template [ngIf]="line.asset && line.asset !== nativeAssetId" [ngIfElse]="defaultOutput">
          <div *ngIf="assetsMinimal && assetsMinimal[line.asset] else assetNotFound">
            <ng-container *ngTemplateOutlet="assetBox; context:{ $implicit: line }"></ng-container>
          </div>
          <ng-template #assetNotFound>
            {{ line.displayValue }} <span class="symbol">{{ line.asset | slice : 0 : 7 }}</span>
          </ng-template>
        </ng-template>
        <ng-template #defaultOutput>
          <app-amount [blockConversion]="isConnector ? blockConversions[line?.status?.block_time] : blockConversions[line?.timestamp]" [satoshis]="line.displayValue" [forceBlockConversion]="isConnector && line?.status?.block_time"></app-amount>
        </ng-template>
      </p>
      <p *ngIf="line.type !== 'fee' && line.address" class="address">
        <app-truncate [text]="line.address"></app-truncate>
      </p>
  </ng-template>
</div>

<ng-template #assetBox let-item>
  {{ item.displayValue / pow(10, assetsMinimal[item.asset][3]) | number: '1.' + assetsMinimal[item.asset][3] + '-' + assetsMinimal[item.asset][3] }} <span class="symbol">{{ assetsMinimal[item.asset][1] }}</span>
</ng-template>

<ng-template #oneBlockEarlier>
  <span i18n="shared.one-block-earlier">1 block earlier</span>
</ng-template>

<ng-template #oneBlockLater>
  <span i18n="shared.one-block-later">1 block later</span>
</ng-template>

<ng-template #inTheSameBlock>
  <span i18n="shared.in-the-same-block">in the same block</span>
</ng-template>

<ng-template #nBlocksEarlier let-n="n" let-connector="connector">
  (<span *ngIf="!connector">prevout </span>
  <ng-container *ngIf="n > 1">
    <span>{{ n }} <ng-container i18n="shared.n-blocks-earlier">blocks earlier</ng-container>)</span>
  </ng-container>
  <ng-container *ngIf="n === 1">
    <span><ng-container *ngTemplateOutlet="oneBlockEarlier"></ng-container>)</span>
  </ng-container>
  <ng-container *ngIf="n === 0">
    <span><ng-container *ngTemplateOutlet="inTheSameBlock"></ng-container>)</span>
  </ng-container>
</ng-template>

<ng-template #nBlocksLater let-n="n" let-connector="connector">
  (<span *ngIf="!connector" i18n="shared.spent">spent </span>
  <ng-container *ngIf="n > 1">
    <span>{{ n }} <ng-container i18n="shared.n-blocks-later">blocks later</ng-container>)</span>
  </ng-container>
  <ng-container *ngIf="n === 1">
    <span><ng-container *ngTemplateOutlet="oneBlockLater"></ng-container>)</span>
  </ng-container>
  <ng-container *ngIf="n === 0">
    <span><ng-container *ngTemplateOutlet="inTheSameBlock"></ng-container>)</span>
  </ng-container>
</ng-template>