explorer-page.component.html

<div id="appWindow" class="is-hidden-mobile fullheight" [style.color]="textColor" (window:resize)="onResize($event)">


  <app-launch-analysis [(show)]="showAnalysisDialog"
                       [target]="analysisDialogTarget"
                       [config]="myConfig"
                       [inputNetwork]="{nodes:proteins, edges:edges}">
  </app-launch-analysis>

  <app-custom-proteins [(show)]="showCustomProteinsDialog" [visibleNodes]="currentViewNodes">
  </app-custom-proteins>

  <app-add-expressed-proteins [(show)]="showThresholdDialog"
                              [selectedTissue]="currentViewSelectedTissue"
                              [visibleNodes]="currentViewNodes"
                              [currentViewProteins]="currentViewProteins"
                              [expressionMap]="expressionMap"
                              >
  </app-add-expressed-proteins>

  <!-- Start explorer -->
  <div class="covex explorer">

    <!-- Start left sidebar -->
    <div *ngIf="myConfig.showLeftSidebar" class="covex sidebar bar-left">

      <div *ngIf="myConfig.showOverview" class="card bar-large" [ngClass]="{'b-text-small':smallStyle}">
        <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)="collapseOverview= !collapseOverview" data-action="collapse"
             class="card-header-icon is-hidden-fullscreen" aria-label="more options">
             <span *ngIf="collapseOverview" class="icon">
              <i class="fas fa-angle-down" aria-hidden="true"></i>
            </span>
            <span *ngIf="!collapseOverview" class="icon">
              <i class="fas fa-angle-left" aria-hidden="true"></i>
            </span>
          </a>
        </header>
        <div *ngIf="collapseOverview">
          <div class="card-content">
            <nav class="level" *ngIf="proteinData">

              <!-- TO DO  : CHANGE THIS LATER
             <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">Proteins</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>