explorer-page.component.html

<app-launch-analysis [(show)]="showAnalysisDialog" [target]="analysisDialogTarget"></app-launch-analysis>

<div class="covex explorer">

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

        <div class="card bar-large">
          <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>
            <a (click)="collabsData = !collabsData" data-action="collapse" class="card-header-icon is-hidden-fullscreen"
               aria-label="more options">
             <span class="icon">
               <i class="fas fa-angle-down" aria-hidden="true"></i>
             </span>
            </a>
          </header>
          <div *ngIf="collabsData">

            <div class="card-content">
              <app-select-dataset [datasetItems]="datasetItems" [selectedDataset]="selectedDataset"
                                  (selectedDatasetChange)="selectedDataset = $event; createNetwork($event.data)">
              </app-select-dataset>

            </div>
          </div>
        </div>

        <div class="card bar-large">
          <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>
            <a (click)="collabsOverview= !collabsOverview" data-action="collapse"
               class="card-header-icon is-hidden-fullscreen" aria-label="more options">
             <span class="icon">
               <i class="fas fa-angle-down" aria-hidden="true"></i>
             </span>
            </a>
          </header>
          <div *ngIf="collabsOverview">
            <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>