explorer-page.component.html

<app-protein-analysis [(show)]="showAnalysisDialog"></app-protein-analysis>

<div class="content explorer">

  <div class="content bar-left">

    <div class="card bar">
      <header class="card-header">
        <p class="card-header-title">
          <span class="icon">
        <i class="fas fa-database" aria-hidden="true"></i>
      </span> Choose Dataset
        </p>
      </header>
      <div class="card-content">
        <div class="content">
          <app-select-dataset [datasetItems]="datasetItems" (selectDataset)="createNetwork($event)"></app-select-dataset>
        </div>
      </div>
    </div>

    <div class="card bar">
      <header class="card-header">
        <p class="card-header-title">
          <span class="icon">
        <i class="fas fa-info" aria-hidden="true"></i>
      </span> Info
        </p>
      </header>
      <div class="card-content">
        <div class="content">
          <nav class="level" *ngIf="proteinData">
            <div class="level-item has-text-centered">
              <div>
                <p class="heading">Viral protein</p>
                <p class="title"> {{ proteinData.effects.length }}</p>
              </div>
            </div>
            <div class="level-item has-text-centered">
              <div>
                <p class="heading">Host protein</p>
                <p class="title">{{ proteinData.proteins.length }}</p>
              </div>
            </div>
            <div class="level-item has-text-centered">
              <div>
                <p class="heading">Interactions</p>
                <p class="title">{{ proteinData.edges.length }}</p>
              </div>
            </div>
          </nav>
        </div>
      </div>
    </div>

    <div class="card bar">
      <header class="card-header">
        <p class="card-header-title">
          <span class="icon">
        <i class="fas fa-search" aria-hidden="true"></i>
      </span> Query Protein/Gene
        </p>
      </header>
      <div class="card-content">
        <div class="content">
          <div class="field">
            <div class="control">
              <app-query-component [queryItems]="queryItems"
                                   (selectProtein)="openSummary($event, true)"></app-query-component>
            </div>
          </div>
        </div>
      </div>
    </div>

    <div class="card bar">
      <header class="card-header">
        <p class="card-header-title">
          <span class="icon">
        <i class="fas fa-filter" aria-hidden="true"></i>
      </span> Filtering
        </p>
      </header>
      <div class="card-content">
        <div class="content">
          <p><b>Baits</b></p>
          <div class="bait-frame">
            <div *ngFor="let bait of viralProteinCheckboxes">
              <label class="checkbox">
                <input type="checkbox" class="checkbox" [ngModel]="bait.checked"
                       (ngModelChange)="bait.checked = $event; filterNodes()">
                {{ bait.data.effectName }}
              </label>
            </div>
          </div>
        </div>
      </div>
      <footer class="card-footer">
        <button (click)="reset($event);" class="card-footer-item button is-danger">
          Reset
        </button>
      </footer>
    </div>

    <div class="card bar">
      <header class="card-header">
        <p class="card-header-title">
          <span class="icon">
        <i class="fas fa-cog" aria-hidden="true"></i>
      </span> Settings
        </p>
      </header>
      <div class="card-content">
        <div class="content">
          <label class="checkbox">
            <input type="checkbox" class="checkbox" [(ngModel)]="physicsEnabled"
                   (ngModelChange)="physicsEnabled = $event; updatePhysicsEnabled()">
            Physics enabled
          </label>
        </div>
      </div>
    </div>
  </div>

  <div class="content bar-right">

    <div class="card bar">
      <header class="card-header">
        <p class="card-header-title">
          <span class="icon">
        <i class="fas fa-flask" aria-hidden="true"></i>
      </span> Analysis
        </p>
      </header>
      <div class="card-content">
        <button (click)="showAnalysisDialog = true"
                class="button"
                [class.is-info]="!analysis.getTask()"
                [class.is-warning]="analysis.getTask() && !analysis.getTask().startedAt"
                [class.is-primary]="analysis.getTask() && analysis.getTask().startedAt && !analysis.getTask().done"
                [class.is-success]="analysis.getTask() && analysis.getTask().done"
                [disabled]="analysis.getCount() === 0 && !analysis.getTask()">
          <span *ngIf="!analysis.getTask()">
            <span class="icon">
              <i class="fa fa-list"></i>
            </span>
            <span>
              Open Protein Selection
            </span>
          </span>

          <span *ngIf="analysis.getTask() && !analysis.getTask().startedAt">
            <span class="icon">
              <i class="fa fa-cog"></i>
            </span>
            <span>
              Analysis queued...
            </span>
          </span>

          <span *ngIf="analysis.getTask() && !analysis.getTask().done && analysis.getTask().startedAt">
            <span class="icon">
              <i class="fa fa-cog fa-spin"></i>
            </span>
            <span>
              Analysis running ({{analysis.getTask().progress | percent}})
            </span>
          </span>

          <span *ngIf="analysis.getTask() && analysis.getTask().done">
            <span class="icon">
              <i class="fa fa-check"></i>
            </span>
            <span>
              Analysis done
            </span>
          </span>
        </button>
      </div>
    </div>

    <div class="card bar">
      <header class="card-header">
        <p class="card-header-title">
          <span class="icon">
        <i class="fas fa-info" aria-hidden="true"></i>
      </span> Details
        </p>
      </header>
      <div class="card-content">
        <div *ngIf="showDetails" class="content">

          <p><b>Protein Group:</b> {{ currentProteinAc }}</p>
          <!--          <p><b>Gene Name(s):</b> <span *ngFor="let geneName of geneNames"> {{ geneName }}</span></p>-->
          <!--          <p><b>Protein Name(s):</b> <span *ngFor="let proteinName of proteinNames"> {{ proteinName }}</span></p>-->
          <p><b>Protein AC(s):</b>
            <a href="https://www.uniprot.org/uniprot/{{proteinAc}}" target="_blank"
               *ngFor="let proteinAc of proteinAcs">
              {{ proteinAc }}
            </a>
          </p>
        </div>
        <div *ngIf="!showDetails">
          Please select a node for further information.
        </div>

      </div>
    </div>

    <div class="card bar">
            <header class="card-header">
              <p class="card-header-title">
                <span class="icon">
              <i class="fas fa-filter" aria-hidden="true"></i>
            </span> Summary
              </p>
            </header>
      <div *ngIf="showDetails" class="card-content">
        <div class="content">
<!--          <h2>Summary</h2>-->
          <p>Hold down the CTRL button to select multiple proteins.</p>
          <figure class="image">
            <!--            <img src="assets/boxplot.png" alt="Boxplots">-->
          </figure>
          <button class="button is-primary" *ngIf="!inSelection(currentProteinAc)"
                  (click)="addToSelection(currentProteinAc)">Select for analysis
          </button>
          <button class="button is-danger" *ngIf="inSelection(currentProteinAc)"
                  (click)="removeFromSelection(currentProteinAc)">Remove from analysis
          </button>
        </div>
      </div>
    </div>

  </div>

  <div class="content network">

    <div class="card network">
      <header class="card-header">
        <p class="card-header-title">
          SARS-CoV-2 Protein-Protein Interaction Network
        </p>
      </header>
      <div class="card-content">
        <div class="card-image">
          <div class="network center" #network>
            <button class="button is-loading center">Loading</button>
          </div>
        </div>
        <footer class="card-footer">
          <button class="card-footer-item button is-primary">
                <span class="icon">
        <i class="fas fa-cloud-download-alt" aria-hidden="true"></i>
      </span>
          </button>
        </footer>
      </div>
    </div>
  </div>

</div>