explorer-page.component.html

<div class="is-hidden-mobile" [style.color]="textColor">
  <app-launch-analysis [(show)]="showAnalysisDialog"
                       [target]="analysisDialogTarget">
  </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">
  </app-add-expressed-proteins>

  <div class="covex explorer">

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

        <div *ngIf="myConfig.showOverview" 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)="collapseOverview= !collapseOverview" data-action="collapse"
               class="card-header-icon is-hidden-fullscreen" aria-label="more options">
             <span class="icon">
            <i *ngIf="collapseOverview" class="fas fa-angle-down" aria-hidden="true"></i>
            <i *ngIf="!collapseOverview" 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>
          </div>
        </div>

        <div *ngIf="myConfig.showQuery"  class="card bar-large">
          <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