analysis-window.component.html

<div *ngIf="token">
  <div class="card analysis" *ngIf="task && task.info.done">
    <header class="card-header">
      <p class="card-header-title">
        <span class="icon">
          <i class="fas fa-flask" aria-hidden="true"></i>
        </span>
        Analysis Results
      </p>
      <a (click)="close()" class="card-header-icon" aria-label="close">
        <span class="icon">
          <i class="fas fa-times" aria-hidden="true"></i>
        </span>
      </a>
    </header>
    <div class="card-content">
      <div class="content">
        <div class="network center" #network>
          <button class="button is-loading center">Loading</button>
        </div>
      </div>
      <button (click)="toggleDrugs()">Show/hide</button>
    </div>
    <footer class="card-footer">
    </footer>
  </div>

  <div class="card analysis" *ngIf="task && !task.info.startedAt">
    <header class="card-header">
      <p class="card-header-title">
        <span class="icon">
          <i class="fas fa-cog" aria-hidden="true"></i>
        </span>
        Analysis Queued...
      </p>
      <a (click)="close()" class="card-header-icon" aria-label="close">
        <span class="icon">
          <i class="fas fa-times" aria-hidden="true"></i>
        </span>
      </a>
    </header>
    <div class="card-content">
      <div class="content">
        The analysis is queued
        <!--TODO: Display queue information-->
      </div>
    </div>
    <footer class="card-footer">
    </footer>
  </div>

  <div class="card analysis" *ngIf="task && task.info.startedAt && !task.info.done">
    <header class="card-header">
      <p class="card-header-title">
        <span class="icon">
          <i class="fas fa-cog fa-spin" aria-hidden="true"></i>
        </span>
        Analysis in Progress...
      </p>
      <a (click)="close()" class="card-header-icon" aria-label="close">
        <span class="icon">
          <i class="fas fa-times" aria-hidden="true"></i>
        </span>
      </a>
    </header>
    <div class="card-content">
      <div class="content">
        The analysis is in progress
        <!--TODO: Display analysis progress-->
      </div>
    </div>
    <footer class="card-footer">
    </footer>
  </div>

  <div class="card analysis" *ngIf="!task">
    <header class="card-header">
      <p class="card-header-title">
        <span class="icon">
          <i class="fas fa-question" aria-hidden="true"></i>
        </span>
        Analysis not found
      </p>
      <a (click)="close()" class="card-header-icon" aria-label="more options">
        <span class="icon">
          <i class="fas fa-times" aria-hidden="true"></i>
        </span>
      </a>
    </header>
    <div class="card-content">
      <div class="content">
        <span class="notification is-danger">
          The analysis you were looking for is either gone or never existed.
        </span>
      </div>
    </div>
    <footer class="card-footer">
    </footer>
  </div>
</div>