custom-proteins.component.html

<div class="modal" [class.is-active]="show">
  <div class="modal-background"></div>
  <div class="modal-card">
    <header class="modal-card-head">
      <p class="modal-card-title">
        <span class="icon"><i class="fa fa-dna"></i></span>
        Add Custom Proteins
      </p>
      <button (click)="close()" class="delete" aria-label="close"></button>
    </header>
    <section class="modal-card-body">
      <div class="notification is-success" *ngIf="addedCount > 0">
        {{addedCount}} host proteins have been added to the selection.
        <div *ngIf="itemsFound.length > addedCount && !selectOnly">
          {{itemsFound.length - addedCount}} proteins have already been selected before.
        </div>
        <div *ngIf="itemsFound.length > addedCount && selectOnly">
          {{itemsFound.length - addedCount}} proteins either have been selected already or did not appear in the current graph.
        </div>
      </div>
      <div class="notification is-warning" *ngIf="itemsFound.length > 0 && addedCount === 0">
        <div *ngIf="itemsFound.length > addedCount && !selectOnly">
          {{itemsFound.length - addedCount}} proteins have already been selected before.
        </div>
        <div *ngIf="itemsFound.length > addedCount && selectOnly">
          {{itemsFound.length - addedCount}} proteins either have been selected already or did not appear in the current graph.
        </div>
      </div>
      <div class="notification is-danger" *ngIf="notFound.length > 0">
        The following {{notFound.length}} items could not be found and have been ignored:
        <ul><li class="not-found" *ngFor="let nf of notFound">{{nf}}</li></ul>
      </div>
      <div class="field">
        <label class="label" for="protein-list">List of items (Uniprot ids or Drugbank ids)</label>
        <div class="control">
          <textarea class="input" [ngModel]="textList" (ngModelChange)="changeTextList($event)" id="protein-list">
          </textarea>
        </div>
      </div>
      <p *ngIf="proteins">
        Items parsed: {{proteins.length}}
      </p>
    </section>
    <footer class="modal-card-foot">
      <button (click)="addProteins();" class="button is-success is-rounded has-tooltip"
              data-tooltip="Add all to the selection."
              [disabled]="proteins.length === 0 || loading">
        <span class="icon">
          <i class="fa fa-plus"></i>
        </span>
        <span>
          Add
        </span>
      </button>
      <button (click)="addVisibleProteins();" class="button is-success is-rounded has-tooltip"
              data-tooltip="Add to selection if they appear in the current network."
              [disabled]="proteins.length === 0 || loading">
        <span class="icon">
          <i class="fas fa-expand"></i>
        </span>
        <span>
          Select
        </span>
      </button>
      <button (click)="close()" class="button is-rounded has-tooltip" data-tooltip="Close the current window.">Close
      </button>
    </footer>
  </div>
</div>