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>