Skip to content
Snippets Groups Projects
Commit 19e9537c authored by Mhaned Oubounyt's avatar Mhaned Oubounyt Committed by Julian Späth
Browse files

enhance the lift and the right bar and add the protein selection to the right bar

parent 76f9d257
No related branches found
No related tags found
No related merge requests found
Hide whitespace changes
Inline Side-by-side
package-lock.json
+ 0
− 15
View file @ 19e9537c
......@@ -1464,21 +1464,6 @@
"to-fast-properties": "^2.0.0"
}
},
"@creativebulma/bulma-collapsible": {
"version": "1.0.4",
"resolved": "https://registry.npmjs.org/@creativebulma/bulma-collapsible/-/bulma-collapsible-1.0.4.tgz",
"integrity": "sha512-aNqSwyuJxshoIc4oD3wJ3eRqOANRweYfpzqmef/fj5tf0Yn7UVx99yh8ovY6vhB8Il31bFcc7f/eRfJvEMNUPw==",
"requires": {
"bulma": "^0.8.1"
},
"dependencies": {
"bulma": {
"version": "0.8.1",
"resolved": "https://registry.npmjs.org/bulma/-/bulma-0.8.1.tgz",
"integrity": "sha512-Afi2zv4DKmNSYfmx55V+Mtnt8+WfR8Rs65kWArmzEuWP7vNr7dSAEDI+ORZlgOR1gueNZwpKaPdUi4ZiTNwgPA=="
}
}
},
"@fortawesome/angular-fontawesome": {
"version": "0.6.1",
"resolved": "https://registry.npmjs.org/@fortawesome/angular-fontawesome/-/angular-fontawesome-0.6.1.tgz",
......
src/app/pages/explorer-page/explorer-page.component.html
+ 63
− 58
View file @ 19e9537c
......@@ -15,10 +15,8 @@
</p>
</header>
<div class="card-content">
<div class="content">
<app-select-dataset [datasetItems]="datasetItems"
(selectDataset)="createNetwork($event)"></app-select-dataset>
</div>
<app-select-dataset [datasetItems]="datasetItems"
(selectDataset)="createNetwork($event)"></app-select-dataset>
</div>
</div>
......@@ -31,28 +29,26 @@
</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>
<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 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">Host<br>Proteins</p>
<p class="title">{{ proteinData.proteins.length }}</p>
</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>
<div class="level-item has-text-centered">
<div>
<p class="heading">Virus-Host<br>Interactions</p>
<p class="title">{{ proteinData.edges.length }}</p>
</div>
</nav>
</div>
</div>
</nav>
</div>
</div>
......@@ -65,12 +61,10 @@
</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 class="field">
<div class="control">
<app-query-component [queryItems]="queryItems"
(selectProtein)="openSummary($event, true)"></app-query-component>
</div>
</div>
</div>
......@@ -84,17 +78,13 @@
</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 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">
......@@ -105,6 +95,7 @@
</div>
</div>
<div class="content network">
<div class="card network">
......@@ -152,7 +143,7 @@
</p>
</header>
<div class="card-content">
<div *ngIf="showDetails" class="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>-->
......@@ -173,23 +164,6 @@
</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">
......@@ -252,6 +226,37 @@
</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>
src/app/pages/explorer-page/explorer-page.component.scss
+ 0
− 13
View file @ 19e9537c
.card {
height: 100%;
display:flex;
flex-direction: column;
}
.card-block{
height: 100%;
}
.bait-frame {
height: 300px;
overflow: scroll;
}
src/styles.scss
+ 10
− 1
View file @ 19e9537c
......@@ -64,11 +64,14 @@ div.content.bar-left {
float: left;
width: 350px;
height: calc(100vh - 102px);
overflow: auto;
}
div.content.bar-right {
float: right;
width: 350px;
height: calc(100vh - 102px);
overflow: auto;
}
div.card.bar-small {
......@@ -85,9 +88,15 @@ div.card.bar-medium {
div.card.bar-large {
margin-bottom: 15px;
height: calc(100vh - 660px);
height: 600px;
}
div.card-content.overflow {
overflow: auto;
height: 500px;
}
div.content.left-window {
float: left;
width: calc(100vw - 350px - 2 * 20px);
......
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