Skip to content
Snippets Groups Projects
Select Git revision
  • 7e775c30f07f2fb73719984047d69600100955b1
  • master default protected
  • csv_export
  • ndex
  • v1.1.18-rc2
  • v1.1.17
  • v1.1.16
  • v1.1.16-rc12
  • v1.1.16-rc11
  • v1.1.16-rc10
  • v1.1.16-rc9
  • v1.1.16-rc8
  • v1.1.16-rc7
  • v1.1.16-rc4
  • v1.1.16-rc3
  • v1.1.16-rc1
  • v1.1.6-rc1
  • v1.1.15
  • v1.1.15-rc7
  • v1.1.15-rc6
  • v1.1.15-rc3
  • v1.1.15-rc1
  • v1.1.14
  • v1.1.13
24 results

explorer-page.component.html

Blame
  • Code owners
    Assign users and groups as approvers for specific file changes. Learn more.
    explorer-page.component.html 22.97 KiB
    <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>
            </div>
          </div>
    
          <div *ngIf="myConfig.showQuery" 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-search" aria-hidden="true"></i>
                    </span> Query Protein/Gene
              </p>
              <a (click)="collapseQuery = !collapseQuery" data-action="collapse"
                 class="card-header-icon is-hidden-fullscreen" aria-label="more options">
               <span class="icon">
                 <span *ngIf="collapseQuery" class="icon">
                  <i class="fas fa-angle-down" aria-hidden="true"></i>
                </span>
                <span *ngIf="!collapseQuery" class="icon">
                  <i class="fas fa-angle-left" aria-hidden="true"></i>
                </span>
               </span>
              </a>
            </header>
            <div *ngIf="collapseQuery">
              <div class="card-content">
                <div class="field">
                  <div class="control">
                    <app-query-tile-component (selectItem)="queryAction($event)"
                                              [queryItems]="queryItems"></app-query-tile-component>
                  </div>
                </div>
              </div>
            </div>
          </div>
        </div>
    
        <!-- Start network block -->
        <div class="covex network center-panel" id="main-column">
    
          <div class="analysis-view" *ngIf="selectedAnalysisToken">
            <app-analysis-panel [(token)]="selectedAnalysisToken"
                                (showDetailsChange)="selectedWrapper = $event"
                                (visibleItems)="analysisWindowChanged($event)" [config]="myConfig"
                                [smallStyle]="smallStyle"></app-analysis-panel>
          </div>
    
          <div class="card network">
    
            <header class="card-header">
              <p class="card-header-title">
                {{myConfig.title}}
              </p>
            </header>
            <div class="card-content fullheight">
              <div class="card-image canvas-content" #networkWithLegend>
                <div *ngIf="myConfig.showLegend">
                  <app-network-legend [config]="myConfig" [analysis]="false"></app-network-legend>
                </div>
                <div class="parent fullheight">
                  <div class="center image1 fullheight" #network>
                    <button class="button is-loading center" alt="loading...">Loading</button>
                  </div>
                </div>
              </div>
    
              <footer *ngIf="myConfig.showFooter" class="card-footer toolbar explorer-footer">
    
                <ng-container *ngIf="myConfig.showFooterButtonScreenshot">
                  <button (click)="toImage()" class="button is-primary is-rounded has-tooltip explorer-footer-element"
                          pTooltip="Take a screenshot of the current network." tooltipPosition="top">
                  <span class="icon">
                    <i class="fas fa-camera" aria-hidden="true"></i>
                  </span>
                    <span [ngClass]="{'text-normal':smallStyle}">Screenshot</span>
                  </button>
                </ng-container>
    
                <ng-container *ngIf="myConfig.showFooterButtonExpression">
                  <div class="footer-buttons dropdown is-up explorer-footer-element" [class.is-active]="expressionExpanded">
                    <div class="dropdown-trigger">
                      <button (click)="expressionExpanded=!expressionExpanded"
                              class="button is-rounded is-primary" [class.is-outlined]="!selectedTissue"
                              aria-haspopup="true" aria-controls="dropdown-menu"
                              pTooltip="Tissue expression data is provided by the GTEx project." tooltipPosition="top"
                              [ngClass]="{'button-small':smallStyle}">
                        <span *ngIf="!selectedTissue" [ngClass]="{'text-small':smallStyle}">Tissue</span>
                        <span *ngIf="selectedTissue">{{selectedTissue.name}}</span>
                        <span *ngIf="expressionExpanded" class="icon is-small">
                                  <i class="fas fa-angle-up" aria-hidden="true"></i>
                                </span>
                        <span *ngIf="!expressionExpanded" class="icon is-small">
                                  <i class="fas fa-angle-left" aria-hidden="true"></i>
                                </span>
                      </button>
                    </div>
                    <div class="dropdown-menu" id="dropdown-menu" role="menu">
                      <div class="dropdown-content tissue-dropdown">
                        <div class="scroll-area">
                          <a (click)="selectTissue(null)"
                             [class.is-active]="!selectedTissue"
                             class="dropdown-item">
                            None
                          </a>
                          <a *ngFor="let tissue of analysis.getTissues()"
                             (click)="selectTissue(tissue)"
                             [class.is-active]="selectedTissue && tissue.netexId === selectedTissue.netexId"
                             class="dropdown-item">
                            {{tissue.name}}
                          </a>
                        </div>
                      </div>
                    </div>
                  </div>
                </ng-container>
    
            <app-toggle class="footer-buttons" textOn="Drugs On" textOff="Off"
                tooltipOn="Display adjacent drugs ON."
                tooltipOff="Display adjacent drugs OFF."
                [smallStyle]="smallStyle"
                [value]="adjacentDrugs" (valueChange)="updateAdjacentDrugs($event)"></app-toggle>
    
            <app-toggle class="footer-buttons explorer-footer-element" textOn="Animation On" textOff="Off"
                        tooltipOn="Enable the network animation."
                        tooltipOff="Disable the network animation and freeze nodes."
                        [smallStyle]="smallStyle"
                        [value]="physicsEnabled" (valueChange)="updatePhysicsEnabled($event)"></app-toggle>
    
            </footer>
          </div>
        </div>
      </div>
    
      <!-- End  network block -->
    
      <div *ngIf="myConfig.showRightSidebar" class="covex sidebar bar-right">
        <div *ngIf="myConfig.showItemSelector" class="card bar-large">
          <header class="card-header" [ngClass]="{'b-text-small':smallStyle}">
            <p class="card-header-title">
                <span *ngIf="!selectedWrapper" class="icon">
                  <i class="fas fa-info" aria-hidden="true"></i>
                </span>
                <!-- <i *ngIf="selectedWrapper && selectedWrapper.data.netexId && selectedWrapper.data.netexId.startsWith('p')" class="fas fa-dna" aria-hidden="true"></i>
                <i *ngIf="selectedWrapper && selectedWrapper.data.netexId && selectedWrapper.data.netexId.startsWith('d')" class="fas fa-capsules"
                   aria-hidden="true"></i> -->
              <span *ngIf="!selectedWrapper">No item selected</span>
              <span *ngIf="selectedWrapper">
                  <span>{{ selectedWrapper.data.type }}</span>
                </span>
            </p>
            <a (click)="collapseDetails = !collapseDetails" data-action="collapse"
               class="card-header-icon is-hidden-fullscreen" aria-label="more options">
                 <span *ngIf="collapseDetails" class="icon">
                  <i class="fas fa-angle-down" aria-hidden="true"></i>
                </span>
              <span *ngIf="!collapseDetails" class="icon">
                  <i class="fas fa-angle-left" aria-hidden="true"></i>
                </span>
            </a>
          </header>
          <div *ngIf="collapseDetails">
            <div class="card-content">
              <app-info-tile [wrapper]="selectedWrapper" [smallStyle]="smallStyle"></app-info-tile>
            </div>
          </div>
        </div>
    
        <div *ngIf="myConfig.showSimpleAnalysis" class="card bar-large">
          <header class="card-header" [ngClass]="{'b-text-small':smallStyle}">
            <p class="card-header-title">
              <span class="icon">
                <i class="fas fa-flask" aria-hidden="true"></i>
              </span>
              Simple Analysis
            </p>
            <a (click)="collapseAnalysisQuick = !collapseAnalysisQuick" data-action="collapse"
               class="card-header-icon is-hidden-fullscreen" aria-label="more options">
               <span *ngIf="collapseAnalysisQuick" class="icon">
                  <i class="fas fa-angle-down" aria-hidden="true"></i>
                </span>
              <span *ngIf="!collapseAnalysisQuick" class="icon">
                  <i class="fas fa-angle-left" aria-hidden="true"></i>
                </span>
            </a>
          </header>
          <div *ngIf="collapseAnalysisQuick">
            <div class="card-content quick-find">
              <div class="field">
                <div class="control">
                  <div class="tile notification is-danger">
                    <div class="align-vmiddle">
                      <div class="digit"><i class="fa fa-fast-forward"></i></div>
                      <button (click)="analysis.startQuickAnalysis(true, null)"
                              [disabled]="analysis.isLaunchingQuick()"
                              class="button is-white is-rounded has-tooltip" pTooltip="Find drugs for all proteins." tooltipPosition="top">
                        <span class="icon">
                          <i class="fa fa-capsules" *ngIf="!analysis.isLaunchingQuick()"></i>
                          <i class="fa fa-spin fa-spinner" *ngIf="analysis.isLaunchingQuick()"></i>
                        </span>
                        <span [ngClass]="{'text-normal':smallStyle}">
                          Quick Start
                        </span>
                      </button>
                    </div>
                  </div>
                  <div class="divisor-rapid">
                    &mdash; or &mdash;
                  </div>
                  <div class="tile notification is-info">
                    <div class="align-vmiddle">
                      <div class="digit" *ngIf="analysis.getCount() == 0">1</div>
                      <div class="digit" *ngIf="analysis.getCount() > 0"><i class="fa fa-check"></i></div>
                      <div>
                        <span [ngClass]="{'text-normal':smallStyle}">Select Proteins</span>
                      </div>
                    </div>
                  </div>
                  <div class="tile notification is-info">
                    <div class="align-vmiddle">
                      <div class="digit">2</div>
                      <button (click)="analysis.startQuickAnalysis(false, null)"
                              [disabled]="analysis.getCount() === 0 || analysis.isLaunchingQuick()"
                              class="button is-white is-rounded has-tooltip"
                              pTooltip="Find drugs for the selected proteins." tooltipPosition="top">
                        <span class="icon">
                          <i class="fa fa-capsules" *ngIf="!analysis.isLaunchingQuick()"></i>
                          <i class="fa fa-spin fa-spinner" *ngIf="analysis.isLaunchingQuick()"></i>
                        </span>
                        <span [ngClass]="{'text-normal':smallStyle}">
                          {{ myConfig.taskName }}
                        </span>
                      </button>
                    </div>
                  </div>
                </div>
              </div>
            </div>
          </div>
        </div>
    
        <div *ngIf="myConfig.showAdvAnalysis" class="card bar-large">
          <header class="card-header" [ngClass]="{'b-text-small':smallStyle}">
            <p class="card-header-title">
              <span class="icon">
                <i class="fas fa-flask" aria-hidden="true"></i>
              </span>
              Analysis
            </p>
            <a (click)="collapseAnalysis = !collapseAnalysis" data-action="collapse"
               class="card-header-icon is-hidden-fullscreen" aria-label="more options">
              <span *ngIf="collapseAnalysis" class="icon">
                  <i class="fas fa-angle-down" aria-hidden="true"></i>
                </span>
              <span *ngIf="!collapseAnalysis" class="icon">
                  <i class="fas fa-angle-left" aria-hidden="true"></i>
                </span>
            </a>
          </header>
          <div *ngIf="collapseAnalysis">
            <div class="card-content">
              <div class="field">
                <div class="control" pTooltip="Find drug targets for the selected proteins." tooltipPosition="top">
                  <button (click)="analysisDialogTarget = 'drug-target'; showAnalysisDialog = true;"
                          class="button is-primary is-fullwidth is-rounded has-tooltip"
                          [disabled]="analysis.getCount() === 0" [ngClass]="{'text-small':smallStyle}">
                    <span class="icon">
                      <i class="fa fa-crosshairs"></i>
                    </span>
                    <span>
                      Find Drug Targets
                    </span>
                  </button>
                </div>
              </div>
              <div class="field">
                <div class="control" pTooltip="Find drugs for the selected proteins." tooltipPosition="top">
                  <button (click)="analysisDialogTarget = 'drug'; showAnalysisDialog = true;"
                          class="button is-primary is-fullwidth is-rounded has-tooltip"
                          [disabled]="analysis.getCount() === 0" [ngClass]="{'text-small':smallStyle}">
                    <span class="icon">
                      <i class="fa fa-capsules"></i>
                    </span>
                    <span>
                      {{myConfig.taskName}}
                    </span>
                  </button>
                </div>
              </div>
              <div class="field">
                <div class="control">
                  <a *ngIf="analysis.getCount() > 0" [href]="gProfilerLink()" target="_blank"
                     class="button is-primary is-fullwidth is-rounded has-tooltip"
                     pTooltip="Use enrichment analysis via g:Profiler (external)." tooltipPosition="top">
                    <span class="icon">
                      <i class="fa fa-external-link-alt"></i>
                    </span>
                    <span [ngClass]="{'text-small':smallStyle}">
                      Enrichment Analysis
                    </span>
                  </a>
                  <a *ngIf="analysis.getCount() === 0" disabled
                     class="button is-primary is-fullwidth is-rounded has-tooltip"
                     pTooltip="Use enrichment analysis via g:Profiler (external)." tooltipPosition="top">
                    <span class="icon">
                      <i class="fa fa-external-link-alt"></i>
                    </span>
                    <span [ngClass]="{'text-small':smallStyle}">
                      Enrichment Analysis
                    </span>
                  </a>
                </div>
              </div>
            </div>
          </div>
        </div>
    
        <div *ngIf="myConfig.showTasks" class="card bar-large">
          <header class="card-header" [ngClass]="{'b-text-small':smallStyle}">
            <p class="card-header-title">
              <span class="icon">
                <i class="fas fa-tasks" aria-hidden="true"></i>
              </span>
              Tasks ({{analysis.tasks.length}})
            </p>
            <a (click)="collapseTask = !collapseTask" data-action="collapse" class="card-header-icon is-hidden-fullscreen"
               aria-label="more options">
                <span *ngIf="collapseTask" class="icon">
                  <i class="fas fa-angle-down" aria-hidden="true"></i>
                </span>
              <span *ngIf="!collapseTask" class="icon">
                  <i class="fas fa-angle-left" aria-hidden="true"></i>
                </span>
            </a>
          </header>
          <div *ngIf="collapseTask">
            <div class="card-content overflow" *ngIf="analysis.tasks && analysis.tasks.length > 0">
              <app-task-list [(token)]="selectedAnalysisToken"></app-task-list>
            </div>
            <footer class="card-footer">
              <a *ngIf="analysis.tasks && analysis.tasks.length > 0"
                 (click)="analysis.removeAllTasks(); selectedAnalysisToken = null;"
                 class="card-footer-item text-danger" pTooltip="Delete all tasks." tooltipPosition="top">
                <span class="icon">
                    <i class="fa fa-trash"></i>
                  </span>
                <span>
                    Delete all
                  </span>
              </a>
            </footer>
          </div>
        </div>
    
        <div *ngIf="myConfig.showSelection" class="card bar-large">
          <header class="card-header" [ngClass]="{'b-text-small':smallStyle}">
            <p class="card-header-title">
              <span class="icon">
                <i class="fas fa-filter" aria-hidden="true"></i>
              </span> Selection ({{analysis.getCount()}})
            </p>
            <a (click)="collapseSelection = !collapseSelection" data-action="collapse"
               class="card-header-icon is-hidden-fullscreen" aria-label="more options">
               <span *ngIf="collapseSelection" class="icon">
                  <i class="fas fa-angle-down" aria-hidden="true"></i>
                </span>
              <span *ngIf="!collapseSelection" class="icon">
                  <i class="fas fa-angle-left" aria-hidden="true"></i>
                </span>
    
            </a>
          </header>
          <div *ngIf="collapseSelection" class="seed-selection" [ngClass]="{'text-normal':smallStyle}">
            <div class="card-content overflow">
              <table class="table selection-table" *ngIf="analysis.getCount() > 0">
                <thead>
                <tr>
                  <td>Type</td>
                  <td>Name</td>
                  <td>Actions</td>
                </tr>
                </thead>
                <tbody>
                <tr *ngFor="let p of analysis.getSelection()">
                  <td><p class="is-capitalized">{{p.data.type}}</p></td>
                  <td><p class="is-capitalized">{{p.data.label}}</p></td>
                  <td>
                    <button (click)="analysis.removeItems([p])" class="button is-small is-danger is-outlined has-tooltip"
                            tooltipPosition="top" pTooltip="Remove from selection.">
                      <i class="fa fa-trash"></i>
                    </button>
                  </td>
                </tr>
                </tbody>
              </table>
              <i *ngIf="analysis.getCount() === 0">
                Double-click on a protein to select it for the analysis.
              </i>
            </div>
    
            <footer class="card-footer" *ngIf="selectedAnalysisToken">
              <a (click)="analysis.addSeeds(currentViewNodes)"
                 class="card-footer-item has-text-success" tooltipPosition="top" pTooltip="Add all visible seeds.">
    
                <span class="icon">
                  <i class="fa fa-plus"></i>
                </span>
                <span>
                  Add seeds
                </span>
              </a>
              <a (click)="analysis.removeSeeds(currentViewNodes)"
                 class="card-footer-item text-danger" tooltipPosition="top" pTooltip="Remove all seeds.">
                <span class="icon">
                  <i class="fa fa-minus"></i>
                </span>
                <span>
                  Remove seeds
                </span>
              </a>
            </footer>
    
            <footer class="card-footer">
              <a (click)="showCustomProteinsDialog = true"
                 class="card-footer-item text-primary"
                 tooltipPosition="top" pTooltip="Add a custom list of proteins.">
                <span class="icon">
                  <i class="fa fa-upload"></i>
                </span>
                <span>
                  Custom proteins
                </span>
              </a>
              <a (click)="showThresholdDialog = true"
                 class="card-footer-item text-primary"
                 pTooltip="Add proteins expressed in the tissue." tooltipPosition="top">
                <span class="icon">
                  <i class="fas fa-angle-double-up"></i>
                </span>
                <span>
                  Tissue proteins
                </span>
              </a>
            </footer>
    
            <footer class="card-footer">
              <a (click)="analysis.invertSelection(currentViewNodes)" class="card-footer-item text-primary"
                 tooltipPosition="top" pTooltip="Invert the current selection.">
                <span class="icon">
                  <i class="fa fa-sync"></i>
                </span>
                <span>
                  Invert
                </span>
              </a>
              <a (click)="analysis.resetSelection()" class="card-footer-item text-danger"
                 tooltipPosition="top" pTooltip="Remove all entries from the selection.">
                <span class="icon">
                  <i class="fa fa-broom"></i>
                </span>
                <span>
                  Reset
                </span>
              </a>
            </footer>
    
          </div>
        </div>
      </div>
    </div>
    </div>
    
    <div class="is-hidden-tablet mobile-fallback">
      Sorry, CoVex is not available for mobile phones.
      To find information about CoVex, please check the <a routerLink="/about">About</a> page or visit this page
      with another device with a larger screen.
    </div>