Skip to content
Snippets Groups Projects
Select Git revision
  • 83b624d30c3bdd4ab47bd9e0579ab99b19e95d76
  • 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 17.78 KiB
    <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 *ngIf="collabsData" class="fas fa-angle-up" aria-hidden="true"></i>
                <i *ngIf="!collabsData" 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>
                    <br>
                    <font size="2">
                    <p ><span>Virus: SARS-CoV-2</span>
                    <p ><span>Host/target: Human cell line, HEK-293T kidney cells</span>
                    <p ><span>Method: AP-MS (affinity purification-mass spectrometry)</span>
                    <p ><span>Source:<a href="https://www.biorxiv.org/content/10.1101/2020.03.22.002386v3" target="_blank"> Gordon et al., 2020</a></span></font>
    
                </div>
    
                </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 *ngIf="collabsOverview" class="fas fa-angle-up" aria-hidden="true"></i>
                <i *ngIf="!collabsOverview" 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>
              </div>
            </div>
    
            <div 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
                </p>
                <a (click)="collabsQuery = !collabsQuery" data-action="collapse"
                   class="card-header-icon is-hidden-fullscreen" aria-label="more options">
               <span class="icon">
                <i *ngIf="collabsQuery" class="fas fa-angle-up" aria-hidden="true"></i>
                <i *ngIf="!collabsQuery" class="fas fa-angle-down" aria-hidden="true"></i>
               </span>
                </a>
              </header>
              <div *ngIf="collabsQuery">
                <div class="card-content">
                  <div class="field">
                    <div class="control">
                      <app-query-component [queryItems]="queryItems"
                                           (selectItem)="queryAction($event)"></app-query-component>
                    </div>
                  </div>
                </div>
              </div>
            </div>
    
            <div class="card bar-large">
              <header class="card-header">
                <p class="card-header-title">
              <span class="icon">
            <i class="fas fa-filter" aria-hidden="true"></i>
          </span> Filter Viral Proteins
                </p>
                <a (click)="collabsDFilter = !collabsDFilter" data-action="collapse"
                   class="card-header-icon is-hidden-fullscreen" aria-label="more options">
                  <span class="icon">
                    <i *ngIf="collabsDFilter" class="fas fa-angle-up" aria-hidden="true"></i>
                    <i *ngIf="!collabsDFilter" class="fas fa-angle-down" aria-hidden="true"></i>
                  </span>
                </a>
              </header>
              <div *ngIf="collabsDFilter">
                <div class="card-content overflow">
                  <div *ngFor="let bait of viralProteinCheckboxes">
                    <label class="checkbox">
                      <input type="checkbox" class="checkbox" [ngModel]="bait.checked"
                             (ngModelChange)="bait.checked = $event; filterNodes()">
                      {{ bait.data.effectName }}
                    </label>
                  </div>
                </div>
                <footer class="card-footer">
                  <a (click)="reset($event);" class="card-footer-item has-text-danger">
                  <span class="icon">
                  <i class="fa fa-refresh"></i>
                </span>
                    <span>
                  Reset
                </span>
                  </a>
                </footer>
              </div>
            </div>
          </div>
    
          <div class="covex network">
            <div class="card network">
              <header class="card-header">
                <p class="card-header-title">
                  Protein-Protein Interaction Network
                </p>
              </header>
              <div class="card-content">
                <div class="card-image" id="0">
                  <div class="parent">
                    <div class="network center image1" #network>
                      <button class="button is-loading center" alt="Snow">Loading</button>
                    </div>
                    <div class="image2">
                      <img src="assets/legend.png" width="160px"/>
                    </div>
                  </div>
                </div>
                <footer class="card-footer toolbar">
                  <button (click)="toCanvas()" class="button is-primary is-rounded">
                    <span class="icon">
                      <i class="fas fa-camera" aria-hidden="true"></i>
                    </span> <span>Screenshot</span>
                  </button>
                  <div class="field has-addons footer-toggle-buttons">
                    <p class="control">
                      <button class="button is-rounded" [class.is-primary]="physicsEnabled"
                              (click)="updatePhysicsEnabled(true)">
                    <span class="icon is-small">
                      <i class="fas fa-wind"></i>
                    </span>
                        <span>Animation On</span>
                      </button>
                    </p>
                    <p class="control">
                      <button class="button is-rounded" [class.is-primary]="!physicsEnabled"
                              (click)="updatePhysicsEnabled(false)">
                        <span>Off</span>
                      </button>
                    </p>
                  </div>
                </footer>
              </div>
            </div>
          </div>
        </div>
    
        <div class="analysis-view" *ngIf="selectedAnalysisToken">
          <app-analysis-window [(token)]="selectedAnalysisToken"
                               (showDetailsChange)="showDetails = $event[0]; changeInfo($event[1])"
                               (visibleItems)="analysisWindowChanged($event)"
          ></app-analysis-window>
        </div>
      </div>
    
      <div class="covex bar-right">
    
        <div class="card bar-large">
          <header class="card-header">
            <p class="card-header-title">
              <span class="icon">
            <i *ngIf="!showDetails" class="fas fa-info" aria-hidden="true"></i>
            <i *ngIf="selectedType === 'Host Protein'" class="fas fa-dna" aria-hidden="true"></i>
            <i *ngIf="selectedType === 'Viral Protein'" class="fas fa-virus" aria-hidden="true"></i>
            <i *ngIf="selectedType === 'Drug'" class="fas fa-capsules" aria-hidden="true"></i>
          </span> {{ selectedType }}
            </p>
            <a (click)="collabsDetails = !collabsDetails" data-action="collapse"
               class="card-header-icon is-hidden-fullscreen" aria-label="more options">
              <span class="icon">
                <i *ngIf="collabsDetails" class="fas fa-angle-up" aria-hidden="true"></i>
                <i *ngIf="!collabsDetails" class="fas fa-angle-down" aria-hidden="true"></i>
              </span>
            </a>
          </header>
          <div *ngIf="collabsDetails">
            <div class="card-content">
              <div *ngIf="showDetails">
                <p *ngIf="selectedName && selectedType=='Drug'"><b><span>Name:</span></b> {{ selectedName }} <span
                  class="icon is-small">
                      <i class="fas fa-capsules"></i>
                </span></p>
                <p *ngIf="selectedName && selectedType=='Host Protein'"><b><span>Gene Name:</span></b> {{ selectedName }}
                  <span class="icon is-small">
                      <i class="fas fa-dna"></i>
                </span></p>
                <p *ngIf="selectedVirusName"><b><span>Virus:</span></b> {{ selectedVirusName }} <span class="icon is-small">
                      <i class="fas fa-virus"></i>
                </span></p>
                <p *ngIf="selectedName && selectedType=='Viral Protein'"><b>Effect:</b> {{ selectedName }}</p>
                <p *ngIf="selectedId && selectedType == 'Host Protein'"><b>Uniprot AC:</b>
                  <a href="https://www.uniprot.org/uniprot/{{ selectedId }}"
                     target="_blank"> {{ selectedId }}</a>
                </p>
                <p *ngIf="selectedId && selectedType == 'Drug'"><b>DrugBank ID:</b>
                  <a href="https://www.drugbank.ca/drugs/{{ selectedId }}"
                     target="_blank"> {{ selectedId }}</a>
                </p>
                <p *ngIf="selectedStatus === 'investigational' "><b>Status:</b> Investigational <span class="icon is-small"><i class="fas fa-search investigational"></i></span>
                <p *ngIf="selectedStatus === 'approved' "><b>Status:</b> Approved <span class="icon is-small"><i class="fas fa-check"></i></span>
                </p>
                <div class="field has-addons add-remove-toggle">
                  <p *ngIf="selectedType !== 'Drug'" class="control">
                    <button class="button is-rounded" [class.is-success]="!analysis.inSelection(selectedName)"
                            [disabled]="analysis.inSelection(selectedName)"
                            (click)="analysis.addItem(selectedItem)">
                    <span class="icon is-small">
                      <i class="fas fa-plus"></i>
                    </span>
                      <span>Add to Analysis</span>
                    </button>
                  </p>
                  <p *ngIf="selectedType !== 'Drug'" class="control">
                    <button class="button is-rounded" [class.is-danger]="analysis.inSelection(selectedName)"
                            [disabled]="!analysis.inSelection(selectedName)"
                            (click)="analysis.removeItem(selectedName)">
                      <span>Remove</span>
                      <span class="icon is-small">
                      <i class="fas fa-trash"></i>
                    </span>
                    </button>
                  </p>
                </div>
              </div>
              <div *ngIf="!showDetails">
                Please select a node for further information.
                <!--          <a (click)="selectedAnalysisToken = 'oy4UsXfBDobTucdQBhN9IUzfnpqKwzqx'"> Open Analysis Window </a>-->
              </div>
            </div>
          </div>
        </div>
    
        <div class="card bar-large">
          <header class="card-header">
            <p class="card-header-title">
              <span class="icon">
            <i class="fas fa-flask" aria-hidden="true"></i>
          </span> Analysis
            </p>
            <a (click)="collabsAnalysis = !collabsAnalysis" data-action="collapse"
               class="card-header-icon is-hidden-fullscreen" aria-label="more options">
              <span class="icon">
                <i *ngIf="collabsAnalysis" class="fas fa-angle-up" aria-hidden="true"></i>
                <i *ngIf="!collabsAnalysis" class="fas fa-angle-down" aria-hidden="true"></i>
              </span>
            </a>
          </header>
          <div *ngIf="collabsAnalysis">
            <div class="card-content">
              <div class="field">
                <div class="control">
                  <button (click)="analysisDialogTarget = 'drug-target'; showAnalysisDialog = true;"
                          class="button is-primary is-fullwidth is-rounded"
                          [disabled]="analysis.getCount() === 0">
                  <span class="icon">
                    <i class="fa fa-crosshairs"></i>
                  </span>
                    <span>
                    Find Drug Targets
                  </span>
                  </button>
                </div>
              </div>
              <div class="field">
                <div class="control">
                  <button (click)="analysisDialogTarget = 'drug'; showAnalysisDialog = true;"
                          class="button is-primary is-fullwidth is-rounded"
                          [disabled]="analysis.getCount() === 0">
                  <span class="icon">
                    <i class="fa fa-capsules"></i>
                  </span>
                    <span>
                    Find Drugs
                  </span>
                  </button>
                </div>
              </div>
            </div>
          </div>
        </div>
    
        <div class="card bar-large">
          <header class="card-header">
            <p class="card-header-title">
              <span class="icon">
                <i class="fas fa-filter" aria-hidden="true"></i>
              </span> Tasks
            </p>
            <a (click)="collabsTask = !collabsTask" data-action="collapse" class="card-header-icon is-hidden-fullscreen"
               aria-label="more options">
              <span class="icon">
                <i *ngIf="collabsSelection" class="fas fa-angle-up" aria-hidden="true"></i>
                <i *ngIf="!collabsSelection" class="fas fa-angle-down" aria-hidden="true"></i>
              </span>
            </a>
          </header>
          <div *ngIf="collabsTask">
            <div class="card-content overflow">
              <app-task-list [(token)]="selectedAnalysisToken"></app-task-list>
            </div>
            <footer class="card-footer">
              <a (click)="analysis.removeAllTasks(); selectedAnalysisToken = null;"
                 class="card-footer-item has-text-danger">
                <span class="icon">
                    <i class="fa fa-trash"></i>
                  </span>
                <span>
                    Delete All
                  </span>
              </a>
            </footer>
          </div>
        </div>
    
    
        <div class="card bar-large">
          <header class="card-header">
            <p class="card-header-title">
                    <span class="icon">
                  <i class="fas fa-filter" aria-hidden="true"></i>
                </span> Selection
            </p>
            <a (click)="collabsSelection = !collabsSelection" data-action="collapse"
               class="card-header-icon is-hidden-fullscreen" aria-label="more options">
              <span class="icon">
                <i *ngIf="collabsSelection" class="fas fa-angle-up" aria-hidden="true"></i>
                <i *ngIf="!collabsSelection" class="fas fa-angle-down" aria-hidden="true"></i>
              </span>
            </a>
          </header>
          <div *ngIf="collabsSelection">
            <div class="card-content overflow">
              <table class="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>
                       <span class="icon">
                          <i class="fa fa-dna" *ngIf="p.type == 'Host Protein'"></i>
                          <i class="fa fa-virus" *ngIf="p.type =='Viral Protein'"></i>
                        </span>
                  </td>
                  <td *ngIf="p.type == 'Viral Protein'">{{p.name}}</td>
                  <td *ngIf="p.type == 'Host Protein'">{{p.data.name}}</td>
                  <td>
                    <button (click)="analysis.removeItem(p.name)" class="button is-small is-danger is-outlined">
                      <i class="fa fa-trash"></i>
                    </button>
                  </td>
                </tr>
                </tbody>
              </table>
              <i *ngIf="analysis.getCount() === 0">
                To select proteins, click them while pressing CTRL.
              </i>
            </div>
            <footer class="card-footer">
              <a (click)="analysis.addAllHostProteins(currentViewNodes, currentViewProteins)" class="card-footer-item has-text-success">
              <span class="icon">
                <i class="fa fa-plus"></i>
              </span>
                <span>
                Host Proteins
              </span>
              </a>
              <a (click)="analysis.addAllViralProteins(currentViewNodes, currentViewEffects)" class="card-footer-item has-text-success">
              <span class="icon">
                <i class="fa fa-plus"></i>
              </span>
                <span>
                Viral Proteins
              </span>
              </a>
            </footer>
            <footer class="card-footer">
              <a (click)="analysis.resetSelection()" class="card-footer-item has-text-danger">
              <span class="icon">
                <i class="fa fa-refresh"></i>
              </span>
                <span>
                Reset
              </span>
              </a>
            </footer>
          </div>
        </div>
    
      </div>
    
    </div>