info-tile.component.html

<div *ngIf="wrapper">
  <div>
    <p
      *ngIf="
        !wrapper.data.drugId &&
        wrapper.data.detailShowLabel &&
        wrapper.data.label
      "
      [ngClass]="{ 'text-normal': drugstoneConfig.smallStyle }"
    >
      <b><span>Label:</span></b>
      <span class="is-capitalized"> {{ wrapper.data.label }}</span>
    </p>
    <p
      *ngIf="wrapper.data.proteinName"
      [ngClass]="{ 'text-normal': drugstoneConfig.smallStyle }"
    >
      <b><span>Name:</span></b>
      <span class="is-capitalized"> {{ wrapper.data.proteinName }}</span>
    </p>
    <p *ngIf="wrapper.data.symbol" [ngClass]="{ 'text-normal': drugstoneConfig.smallStyle }">
      <b><span>Symbol:</span></b>
      <span class="is-capitalized"> {{ wrapper.data.symbol }}</span>
    </p>
    <p
      *ngIf="wrapper.data.drugId || wrapper.data.disorderId"
      [ngClass]="{ 'text-normal': drugstoneConfig.smallStyle }"
    >
      <b><span>Name:</span></b>
      <span class="is-capitalized"> {{ wrapper.data.label }}</span>
    </p>
    <p *ngIf="wrapper.data.icd10" [ngClass]="{ 'text-normal': drugstoneConfig.smallStyle }">
      <b><span>ICD10:</span></b>
      <span class="is-capitalized">
        {{
          wrapper.data.icd10.length === 0 ||
          (wrapper.data.icd10.length === 1 &&
            wrapper.data.icd10[0].length === 0)
            ? "-"
            : wrapper.data.icd10
        }}</span
      >
    </p>
    <p *ngIf="wrapper.data.drugId" [ngClass]="{ 'text-normal': drugstoneConfig.smallStyle }">
      <b><span>DrugBank:</span></b>
      <a
        href="https://go.drugbank.com/drugs/{{ wrapper.data.drugId }}"
        target="_blank"
      >
        <span class="is-capitalized"> {{ wrapper.data.drugId }}</span>
      </a>
    </p>
    <p
      *ngIf="wrapper.data.disorderId"
      [ngClass]="{ 'text-normal': drugstoneConfig.smallStyle }"
    >
      <b><span>Mondo:</span></b>
      <a
        href="https://www.ebi.ac.uk/ols/ontologies/mondo/terms?iri=http%3A%2F%2Fpurl.obolibrary.org%2Fobo%2FMONDO_{{
          writeZeros(7 - ('' + wrapper.data.disorderId).length)
        }}{{ wrapper.data.disorderId }}"
        target="_blank"
      >
        <span class="is-capitalized"> MONDO:{{ wrapper.data.disorderId }}</span>
      </a>
    </p>
    <p *ngIf="wrapper.data.groupName" [ngClass]="{ 'text-normal': drugstoneConfig.smallStyle }">
      <b><span>Group:</span></b>
      <span class="is-capitalized"> {{ wrapper.data.groupName }}</span>
    </p>
    <p *ngIf="wrapper.data.uniprotAc" [ngClass]="{ 'text-normal': drugstoneConfig.smallStyle }">
      <b><span>Uniprot:</span></b>
      <a
        href="https://www.uniprot.org/uniprot/{{ wrapper.data.uniprotAc }}"
        target="_blank"
      >
        <span class="is-capitalized"> {{ wrapper.data.uniprotAc }}</span>
      </a>
    </p>
    <p *ngIf="wrapper.data.ensg" [ngClass]="{ 'text-normal': drugstoneConfig.smallStyle }">
      <b><span>Ensembl:</span></b>
      <a
        *ngFor="let ensg of wrapper.data.ensg"
        href="https://www.ensembl.org/Homo_sapiens/Gene/Summary?g={{ ensg }}"
        target="_blank"
      >
        <span class="is-capitalized"> {{ ensg }}</span>
      </a>
    </p>
    <p *ngIf="wrapper.expression" [ngClass]="{ 'text-normal': drugstoneConfig.smallStyle }">
      <b><span>Expression:</span></b>
      <span class="is-capitalized"> {{ wrapper.expression | number }}</span>
      <span
        class="icon has-text-info"
        pTooltip="Tissue expression data is provided by the GTEx project. Unit is transcript per million."
        [tooltipStyleClass]="'drgstn drgstn-tooltip drgstn-tooltip-left'"
        tooltipPosition="left"
        ><i class="fas fa-info-circle"></i
      ></span>
    </p>
  </div>

  <app-toggle
    *ngIf="wrapper.data.drugstoneId && wrapper.data.drugstoneId.startsWith('p')"
    [value]="analysis.inSelection(wrapper)"
    (valueChange)="
      $event ? analysis.addItems([wrapper]) : analysis.removeItems([wrapper])
    "
    textOn="Seed"
    textOff="Off"
    tooltipOn="Add protein to selection."
    tooltipOff="Remove protein from selection."
  ></app-toggle>
</div>
<div *ngIf="!wrapper" [ngClass]="{ 'text-normal': drugstoneConfig.smallStyle }">
  Please select a node for further information.
</div>