explorer-page.component.html

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

<div class="covex explorer">

  <div class="covex left-window">
    <div>
      <div class="covex bar-left">

        <div class="card bar-small">
          <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">
            <app-select-dataset [datasetItems]="datasetItems"
                                (selectDataset)="createNetwork($event)"></app-select-dataset>
          </div>
        </div>

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

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