Skip to content
Snippets Groups Projects
Commit 86d2649c authored by ge54hev's avatar ge54hev
Browse files

collabs cards

parent 7600038f
No related branches found
No related tags found
No related merge requests found
Hide whitespace changes
Inline Side-by-side
src/app/pages/explorer-page/explorer-page.component.html
+ 120
− 84
View file @ 86d2649c
...@@ -79,14 +79,21 @@ ...@@ -79,14 +79,21 @@
<i class="fas fa-filter" aria-hidden="true"></i> <i class="fas fa-filter" aria-hidden="true"></i>
</span> Filter Viral Proteins </span> Filter Viral Proteins
</p> </p>
<a (click)="collabsDFilter = !collabsDFilter" data-action="collapse" class="card-header-icon is-hidden-fullscreen" aria-label="more options">
<span class="icon">
<i class="fas fa-angle-down" aria-hidden="true"></i>
</span>
</a>
</header> </header>
<div class="card-content overflow"> <div *ngIf="collabsDFilter">
<div *ngFor="let bait of viralProteinCheckboxes"> <div class="card-content overflow">
<label class="checkbox"> <div *ngFor="let bait of viralProteinCheckboxes">
<input type="checkbox" class="checkbox" [ngModel]="bait.checked" <label class="checkbox">
(ngModelChange)="bait.checked = $event; filterNodes()"> <input type="checkbox" class="checkbox" [ngModel]="bait.checked"
{{ bait.data.effectName }} (ngModelChange)="bait.checked = $event; filterNodes()">
</label> {{ bait.data.effectName }}
</label>
</div>
</div> </div>
</div> </div>
<footer class="card-footer"> <footer class="card-footer">
...@@ -158,42 +165,49 @@ ...@@ -158,42 +165,49 @@
<i class="fas fa-info" aria-hidden="true"></i> <i class="fas fa-info" aria-hidden="true"></i>
</span> {{currentProteinAc}} </span> {{currentProteinAc}}
</p> </p>
<a (click)="collabsDetails = !collabsDetails" data-action="collapse" class="card-header-icon is-hidden-fullscreen" aria-label="more options">
<span class="icon">
<i class="fas fa-angle-down" aria-hidden="true"></i>
</span>
</a>
</header> </header>
<div class="card-content"> <div *ngIf="collabsDetails">
<div *ngIf="showDetails"> <div class="card-content">
<p><b>Protein Name:</b> {{ currentProteinAc }}</p> <div *ngIf="showDetails">
<p><b>Protein AC(s):</b> <p><b>Protein Name:</b> {{ currentProteinAc }}</p>
<a href="https://www.uniprot.org/uniprot/{{proteinAc}}" target="_blank" <p><b>Protein AC(s):</b>
*ngFor="let proteinAc of proteinAcs"> <a href="https://www.uniprot.org/uniprot/{{proteinAc}}" target="_blank"
{{ proteinAc }} *ngFor="let proteinAc of proteinAcs">
</a> {{ proteinAc }}
</p> </a>
<div class="field has-addons add-remove-toggle">
<p class="control">
<button class="button is-rounded" [class.is-success]="!inSelection(currentProteinAc)"
[disabled]="inSelection(currentProteinAc)"
(click)="addToSelection(currentProteinAc)">
<span class="icon is-small">
<i class="fas fa-plus"></i>
</span>
<span>Add to Analysis</span>
</button>
</p>
<p class="control">
<button class="button is-rounded" [class.is-danger]="inSelection(currentProteinAc)"
[disabled]="!inSelection(currentProteinAc)"
(click)="removeFromSelection(currentProteinAc)">
<span>Remove</span>
<span class="icon is-small">
<i class="fas fa-trash"></i>
</span>
</button>
</p> </p>
<div class="field has-addons add-remove-toggle">
<p class="control">
<button class="button is-rounded" [class.is-success]="!inSelection(currentProteinAc)"
[disabled]="inSelection(currentProteinAc)"
(click)="addToSelection(currentProteinAc)">
<span class="icon is-small">
<i class="fas fa-plus"></i>
</span>
<span>Add to Analysis</span>
</button>
</p>
<p class="control">
<button class="button is-rounded" [class.is-danger]="inSelection(currentProteinAc)"
[disabled]="!inSelection(currentProteinAc)"
(click)="removeFromSelection(currentProteinAc)">
<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 *ngIf="!showDetails">
Please select a node for further information.
<!-- <a (click)="selectedAnalysisToken = 'oy4UsXfBDobTucdQBhN9IUzfnpqKwzqx'"> Open Analysis Window </a>-->
</div> </div>
</div> </div>
</div> </div>
...@@ -205,18 +219,25 @@ ...@@ -205,18 +219,25 @@
<i class="fas fa-flask" aria-hidden="true"></i> <i class="fas fa-flask" aria-hidden="true"></i>
</span> Analysis </span> Analysis
</p> </p>
</header> <a (click)="collabsAnalysis = !collabsAnalysis" data-action="collapse" class="card-header-icon is-hidden-fullscreen" aria-label="more options">
<div class="card-content">
<button (click)="showAnalysisDialog = true"
class="button is-primary is-fullwidth is-rounded"
[disabled]="analysis.getCount() === 0">
<span class="icon"> <span class="icon">
<i class="fa fa-rocket"></i> <i class="fas fa-angle-down" aria-hidden="true"></i>
</span>
<span>
Launch Analysis
</span> </span>
</button> </a>
</header>
<div *ngIf="collabsAnalysis">
<div class="card-content">
<button (click)="showAnalysisDialog = true"
class="button is-primary is-fullwidth is-rounded"
[disabled]="analysis.getCount() === 0">
<span class="icon">
<i class="fa fa-rocket"></i>
</span>
<span>
Launch Analysis
</span>
</button>
</div>
</div> </div>
</div> </div>
...@@ -227,22 +248,30 @@ ...@@ -227,22 +248,30 @@
<i class="fas fa-filter" aria-hidden="true"></i> <i class="fas fa-filter" aria-hidden="true"></i>
</span> Tasks </span> Tasks
</p> </p>
</header> <a (click)="collabsTask = !collabsTask" data-action="collapse" class="card-header-icon is-hidden-fullscreen" aria-label="more options">
<div class="card-content overflow">
<app-task-list [(token)]="selectedAnalysisToken"></app-task-list>
</div>
<footer class="card-footer">
<a (click)="analysis.removeAllTasks();" class="card-footer-item has-text-danger">
<span class="icon"> <span class="icon">
<i class="fa fa-trash"></i> <i class="fas fa-angle-down" aria-hidden="true"></i>
</span> </span>
<span>
Delete All
</span>
</a> </a>
</footer> </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();" 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>
<div class="card bar-large"> <div class="card bar-large">
<header class="card-header"> <header class="card-header">
<p class="card-header-title"> <p class="card-header-title">
...@@ -250,29 +279,36 @@ ...@@ -250,29 +279,36 @@
<i class="fas fa-filter" aria-hidden="true"></i> <i class="fas fa-filter" aria-hidden="true"></i>
</span> Selection </span> Selection
</p> </p>
<a (click)="collabsSelection = !collabsSelection" data-action="collapse" class="card-header-icon is-hidden-fullscreen" aria-label="more options">
<span class="icon">
<i class="fas fa-angle-down" aria-hidden="true"></i>
</span>
</a>
</header> </header>
<div class="card-content overflow"> <div *ngIf="collabsSelection">
<table class="table" *ngIf="analysis.getCount() > 0"> <div class="card-content overflow">
<thead> <table class="table" *ngIf="analysis.getCount() > 0">
<tr> <thead>
<td>AC</td> <tr>
<td>Actions</td> <td>AC</td>
</tr> <td>Actions</td>
</thead> </tr>
<tbody> </thead>
<tr *ngFor="let p of analysis.getSelection()"> <tbody>
<td>{{p.proteinAc}}</td> <tr *ngFor="let p of analysis.getSelection()">
<td> <td>{{p.proteinAc}}</td>
<button (click)="analysis.removeProtein(p)" class="button is-small is-danger is-outlined"> <td>
<i class="fa fa-trash"></i> <button (click)="analysis.removeProtein(p)" class="button is-small is-danger is-outlined">
</button> <i class="fa fa-trash"></i>
</td> </button>
</tr> </td>
</tbody> </tr>
</table> </tbody>
<i *ngIf="analysis.getCount() === 0"> </table>
To select proteins, click them while pressing CTRL. <i *ngIf="analysis.getCount() === 0">
</i> To select proteins, click them while pressing CTRL.
</i>
</div>
</div> </div>
<footer class="card-footer"> <footer class="card-footer">
<a (click)="addAllHostProteins()" class="card-footer-item has-text-success"> <a (click)="addAllHostProteins()" class="card-footer-item has-text-success">
......
src/app/pages/explorer-page/explorer-page.component.ts
+ 5
− 0
View file @ 86d2649c
...@@ -23,6 +23,11 @@ declare var vis: any; ...@@ -23,6 +23,11 @@ declare var vis: any;
export class ExplorerPageComponent implements OnInit, AfterViewInit { export class ExplorerPageComponent implements OnInit, AfterViewInit {
public showDetails = false; public showDetails = false;
public collabsAnalysis = true;
public collabsDetails = true;
public collabsTask = true;
public collabsSelection = true;
public collabsDFilter = true;
public currentProteinAc = ''; public currentProteinAc = '';
public geneNames: Array<string> = []; public geneNames: Array<string> = [];
public proteinNames: Array<string> = []; public proteinNames: Array<string> = [];
......
0% or .
You are about to add 0 people to the discussion. Proceed with caution.
Finish editing this message first!
Please register or to comment