<app-protein-analysis [(show)]="showAnalysisDialog"></app-protein-analysis> <div class="content explorer"> <div class="content left-window"> <div> <div class="content 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"> <div class="content"> <app-select-dataset [datasetItems]="datasetItems" (selectDataset)="createNetwork($event)"></app-select-dataset> </div> </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"> <div class="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-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="content"> <div class="field"> <div class="control"> <app-query-component [queryItems]="queryItems" (selectProtein)="openSummary($event, true)"></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> </header> <div class="card-content"> <div class="content"> <div class="bait-frame"> <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> </div> </div> <footer class="card-footer"> <button (click)="reset($event);" class="card-footer-item button is-danger"> Reset </button> </footer> </div> </div> <div class="content 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" [hidden]="!analysisWindow"> <app-analysis-window (closeWindow)="closeAnalysisWindow()"></app-analysis-window> </div> </div> <div class="content 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" class="content"> <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)="showAnalysisWindow()"> 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-filter" aria-hidden="true"></i> </span> Summary </p> </header> <div *ngIf="showDetails" class="card-content"> <div class="content"> <figure class="image"> <img src="assets/boxplot.png" alt="Boxplots"> </figure> </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" [class.is-info]="!analysis.getTask()" [class.is-warning]="analysis.getTask() && !analysis.getTask().startedAt" [class.is-primary]="analysis.getTask() && analysis.getTask().startedAt && !analysis.getTask().done" [class.is-success]="analysis.getTask() && analysis.getTask().done" [disabled]="analysis.getCount() === 0 && !analysis.getTask()"> <span *ngIf="!analysis.getTask()"> <span class="icon"> <i class="fa fa-list"></i> </span> <span> Open Analysis </span> </span> <span *ngIf="analysis.getTask() && !analysis.getTask().startedAt"> <span class="icon"> <i class="fa fa-cog"></i> </span> <span> Analysis queued... </span> </span> <span *ngIf="analysis.getTask() && !analysis.getTask().done && analysis.getTask().startedAt"> <span class="icon"> <i class="fa fa-cog fa-spin"></i> </span> <span> Analysis running ({{analysis.getTask().progress | percent}}) </span> </span> <span *ngIf="analysis.getTask() && analysis.getTask().done"> <span class="icon"> <i class="fa fa-check"></i> </span> <span> Analysis done </span> </span> </button> </div> </div> </div> </div>