Skip to content
Snippets Groups Projects
Select Git revision
  • 8b4ec0026241b244dfbd4e77681406a955fb79a6
  • master default protected
  • Dawit
  • maike-patrick-first-pipeline
  • Jonas
  • Kamal
  • Maike
  • Patrick
  • Uni-Bremen
  • update-setup
10 results

README.md

Blame
  • Code owners
    Assign users and groups as approvers for specific file changes. Learn more.
    explorer-page.component.html 8.00 KiB
    <app-protein-analysis [(show)]="showAnalysisDialog"></app-protein-analysis>
    
    <div class="covex explorer">
    
      <div class="covex left-window">
        <div>
          <div class="covex bar-left">
    
            <div class="card bar-small">
              <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>
              </header>
              <div class="card-content">
                <app-select-dataset [datasetItems]="datasetItems"
                                    (selectDataset)="createNetwork($event)"></app-select-dataset>
              </div>
            </div>
    
            <div class="card bar-medium">
              <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>
              </header>
              <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 class="card bar-small">
              <header class="card-header">
                <p class="card-header-title">
              <span class="icon">
            <i class="fas fa-search" aria-hidden="true"></i>
          </span> Query Protein
                </p>
              </header>
              <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 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>
              </header>
              <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">
                <button (click)="reset($event);" class="card-footer-item button is-danger">
                  Reset
                </button>
              </footer>
            </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="network center" #network>
                    <button class="button is-loading center">Loading</button>
                  </div>
                </div>
                <footer class="card-footer">
                  <button (click)="toCanvas()" class="card-footer-item button is-primary">
                    <span class="icon">
            <i class="fas fa-cloud-download-alt" aria-hidden="true"></i>
          </span>
                  </button>
                  <label class="checkbox">
                    <input type="checkbox" class="checkbox" [(ngModel)]="physicsEnabled"
                           (ngModelChange)="physicsEnabled = $event; updatePhysicsEnabled()">
                    Physics enabled
                  </label>
                </footer>
              </div>
            </div>
          </div>
        </div>
    
        <div class="analysis-view" *ngIf="selectedAnalysisToken">
          <app-analysis-window [(token)]="selectedAnalysisToken"></app-analysis-window>
        </div>
      </div>
    
      <div class="covex bar-right">
    
        <div class="card bar-medium">
          <header class="card-header">
            <p class="card-header-title">
              <span class="icon">
            <i class="fas fa-info" aria-hidden="true"></i>
          </span> {{currentProteinAc}}
            </p>
          </header>
          <div class="card-content">
            <div *ngIf="showDetails">
    
              <p><b>Protein Name:</b> {{ currentProteinAc }}</p>
              <!--          <p><b>Gene Name(s):</b> <span *ngFor="let geneName of geneNames"> {{ geneName }}</span></p>-->
              <!--          <p><b>Protein Name(s):</b> <span *ngFor="let proteinName of proteinNames"> {{ proteinName }}</span></p>-->
              <p><b>Protein AC(s):</b>
                <a href="https://www.uniprot.org/uniprot/{{proteinAc}}" target="_blank"
                   *ngFor="let proteinAc of proteinAcs">
                  {{ proteinAc }}
                </a>
              </p>
            </div>
    
            <div *ngIf="!showDetails">
              Please select a node for further information.
              <!--          <a (click)="selectedAnalysisToken = 'oy4UsXfBDobTucdQBhN9IUzfnpqKwzqx'"> Open Analysis Window </a>-->
            </div>
    
          </div>
        </div>
    
        <div class="card bar-medium">
          <header class="card-header">
            <p class="card-header-title">
              <span class="icon">
            <i class="fas fa-flask" aria-hidden="true"></i>
          </span> Analysis
            </p>
          </header>
          <div class="card-content">
            <button class="button is-success" *ngIf="!inSelection(currentProteinAc)"
                    (click)="addToSelection(currentProteinAc)">Add to Analysis
            </button>
            <button class="button is-danger" *ngIf="inSelection(currentProteinAc)"
                    (click)="removeFromSelection(currentProteinAc)">Remove from Analysis
            </button>
            <p></p>
            <button (click)="showAnalysisDialog = true"
                    class="button is-primary"
                    [disabled]="analysis.getCount() === 0">
              <span>
                <span class="icon">
                  <i class="fa fa-list"></i>
                </span>
                <span>
                  Open Analysis
                </span>
              </span>
    
            </button>
          </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>
            </header>
            <div class="card-content">
              <app-task-list [(token)]="selectedAnalysisToken"></app-task-list>
            </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>
            </header>
            <div class="card-content overflow">
              <table class="table">
                <thead>
                <tr>
                  <td>AC</td>
                  <td>Actions</td>
                </tr>
                </thead>
                <tbody>
                <tr *ngFor="let p of analysis.getSelection()">
                  <td>{{p.proteinAc}}</td>
                  <td>
                    <button (click)="analysis.removeProtein(p)" class="button is-small is-danger">
                      <i class="fa fa-trash"></i>
                    </button>
                  </td>
                </tr>
                </tbody>
              </table>
            </div>
          </div>
    
    
        </div>
    
      </div>
    </div>