From 337b293bd33fdebb32a685b575f712502f3bba95 Mon Sep 17 00:00:00 2001
From: =?UTF-8?q?Julian=20Sp=C3=A4th?= <julian.spaeth@wzw.tum.de>
Date: Fri, 10 Apr 2020 16:04:51 +0200
Subject: [PATCH] Use better seed colors
---
src/app/analysis.service.ts | 7 ++-
.../analysis-window.component.ts | 9 ++-
.../task-list/task-list.component.html | 6 +-
src/app/network-settings.ts | 61 +++++++++++++------
.../about-page/about-page.component.html | 9 ++-
.../explorer-page.component.html | 2 +-
.../explorer-page/explorer-page.component.ts | 6 +-
7 files changed, 64 insertions(+), 36 deletions(-)
diff --git a/src/app/analysis.service.ts b/src/app/analysis.service.ts
index 61baa3d9..2968401c 100644
--- a/src/app/analysis.service.ts
+++ b/src/app/analysis.service.ts
@@ -69,9 +69,10 @@ export class AnalysisService {
}
removeAllTasks() {
- this.tasks.forEach((task) => {
- this.removeTask(task.token);
- });
+ this.tasks = [];
+ this.finishedTokens = [];
+ this.tokens = [];
+ localStorage.removeItem('tokens');
}
async getTasks() {
diff --git a/src/app/components/analysis-window/analysis-window.component.ts b/src/app/components/analysis-window/analysis-window.component.ts
index 21b92fea..bf0814b2 100644
--- a/src/app/components/analysis-window/analysis-window.component.ts
+++ b/src/app/components/analysis-window/analysis-window.component.ts
@@ -98,6 +98,7 @@ export class AnalysisWindowComponent implements OnInit, OnChanges {
this.network = new vis.Network(container, this.nodeData, options);
+
const promises: Promise<any>[] = [];
promises.push(this.http.get<any>(`${environment.backend}task_result/?token=${this.token}&view=proteins`).toPromise()
.then((table) => {
@@ -130,6 +131,9 @@ export class AnalysisWindowComponent implements OnInit, OnChanges {
if (nodeIds.length > 0) {
const nodeId = nodeIds[0];
const node = this.nodeData.nodes.get(nodeId);
+ if (node.nodeType === 'drug') {
+ return;
+ }
const wrapper = node.wrapper;
if (this.analysis.inSelection(wrapper)) {
this.analysis.removeItem(wrapper);
@@ -152,6 +156,7 @@ export class AnalysisWindowComponent implements OnInit, OnChanges {
}
});
+
this.analysis.subscribe((item, selected) => {
const node = this.nodeData.nodes.get(item.nodeId);
if (!node) {
@@ -166,6 +171,7 @@ export class AnalysisWindowComponent implements OnInit, OnChanges {
}
}
this.emitVisibleItems(true);
+
}
public emitVisibleItems(on: boolean) {
@@ -271,7 +277,6 @@ export class AnalysisWindowComponent implements OnInit, OnChanges {
edges.push(this.mapEdge(edge, 'protein-protein', wrappers));
}
-
return {
nodes,
edges,
@@ -299,12 +304,12 @@ export class AnalysisWindowComponent implements OnInit, OnChanges {
}
const node = NetworkSettings.getNodeStyle(nodeType, isSeed, this.analysis.inSelection(wrapper));
-
node.id = wrapper.nodeId;
node.label = nodeLabel;
node.nodeType = nodeType;
node.isSeed = isSeed;
node.wrapper = wrapper;
+
return node;
}
diff --git a/src/app/components/task-list/task-list.component.html b/src/app/components/task-list/task-list.component.html
index 2b659a54..cdb62063 100644
--- a/src/app/components/task-list/task-list.component.html
+++ b/src/app/components/task-list/task-list.component.html
@@ -8,13 +8,13 @@
<span class="icon is-pulled-right"><i class="fas fa-pause" aria-hidden="true"></i></span>
</p>
<p>
- <small *ngIf="task.stats.queuePosition === 1">
+ <small *ngIf="task.stats.queueLength > 0 && task.stats.queuePosition === 1">
Queued: 1 other task to finish
</small>
- <small *ngIf="task.stats.queuePosition > 1">
+ <small *ngIf="task.stats.queueLength > 0 && task.stats.queuePosition > 1">
Queued: {{task.stats.queuePosition}} other tasks to finish
</small>
- <small *ngIf="task.stats.queuePosition === 0">
+ <small *ngIf="task.stats.queueLength === 0 || task.stats.queuePosition === 0">
Execution imminent...
</small>
<a (click)="analysis.removeTask(task.token)" class="has-text-danger">
diff --git a/src/app/network-settings.ts b/src/app/network-settings.ts
index 15c54545..a336062f 100644
--- a/src/app/network-settings.ts
+++ b/src/app/network-settings.ts
@@ -5,9 +5,10 @@ export class NetworkSettings {
// Node color
private static hostColor = '#123456';
private static virusColor = '#BE093C';
- private static drugColor = '#F8981D';
- private static seedHostColor = '#3070B3';
- private static seedVirusColor = '#3070B3';
+ private static approvedDrugColor = '#48C774';
+ private static unapprovedDrugColor = '#F8981D';
+ private static nonSeedHostColor = '#3070B3';
+ private static nonSeedVirusColor = '#87082c';
private static selectedBorderColor = '#F8981D';
private static selectBorderHighlightColor = '#F8981D';
@@ -100,25 +101,27 @@ export class NetworkSettings {
}
}
- static getColor(color: 'host' | 'virus' | 'drug' | 'hostFont' | 'virusFont' | 'drugFont' |
- 'seedHost' | 'seedVirus' | 'selectedForAnalysis' | 'selectedForAnalysisText' |
+ static getColor(color: 'host' | 'virus' | 'approvedDrug' | 'unapprovedDrug' | 'hostFont' | 'virusFont' | 'drugFont' |
+ 'nonSeedHost' | 'nonSeedVirus' | 'selectedForAnalysis' | 'selectedForAnalysisText' |
'edgeHostVirus' | 'edgeHostVirusHighlight' | 'edgeHostDrug' | 'edgeHostDrugHighlight') {
if (color === 'host') {
return this.hostColor;
} else if (color === 'virus') {
return this.virusColor;
- } else if (color === 'drug') {
- return this.drugColor;
+ } else if (color === 'approvedDrug') {
+ return this.approvedDrugColor;
+ } else if (color === 'unapprovedDrug') {
+ return this.unapprovedDrugColor;
} else if (color === 'hostFont') {
return this.hostFontColor;
} else if (color === 'virusFont') {
return this.virusFontColor;
} else if (color === 'drugFont') {
return this.drugFontColor;
- } else if (color === 'seedHost') {
- return this.seedHostColor;
- } else if (color === 'seedVirus') {
- return this.seedVirusColor;
+ } else if (color === 'nonSeedHost') {
+ return this.nonSeedHostColor;
+ } else if (color === 'nonSeedVirus') {
+ return this.nonSeedVirusColor;
} else if (color === 'edgeHostVirus') {
return this.edgeHostVirusColor;
} else if (color === 'edgeHostDrug') {
@@ -140,7 +143,7 @@ export class NetworkSettings {
}
}
- static getNodeStyle(nodeType: WrapperType, isSeed: boolean, isSelected: boolean): any {
+ static getNodeStyle(nodeType: WrapperType, isSeed: boolean, isSelected: boolean, drugType?: string): any {
let nodeColor;
let nodeShape;
let nodeSize;
@@ -152,28 +155,48 @@ export class NetworkSettings {
if (nodeType === 'host') {
nodeColor = NetworkSettings.getColor(nodeType);
nodeFont = NetworkSettings.getFont('host');
- if (isSeed) {
- nodeColor = NetworkSettings.getColor('seedHost');
+ if (!isSeed) {
+ nodeColor = NetworkSettings.getColor('nonSeedHost');
}
} else if (nodeType === 'virus') {
nodeColor = NetworkSettings.getColor(nodeType);
if (nodeType === 'virus') {
nodeFont = NetworkSettings.getFont('virus');
- if (isSeed) {
- nodeColor = NetworkSettings.getColor('seedVirus');
+ if (!isSeed) {
+ nodeColor = NetworkSettings.getColor('nonSeedVirus');
}
}
} else if (nodeType === 'drug') {
- nodeColor = NetworkSettings.getColor(nodeType);
+ if (drugType === 'approved') {
+ nodeColor = NetworkSettings.getColor('approvedDrug');
+ } else {
+ nodeColor = NetworkSettings.getColor('unapprovedDrug');
+ }
}
- const node: any = {size: nodeSize, color: nodeColor, shape: nodeShape, font: nodeFont, shadow: nodeShadow};
+ const node: any = {
+ size: nodeSize,
+ shape: nodeShape,
+ font: nodeFont,
+ shadow: nodeShadow,
+ };
if (isSelected) {
- node.color = {color: node.color, border: this.selectedBorderColor, highlight: {border: this.selectBorderHighlightColor}};
+ node.color = {
+ background: nodeColor,
+ border: this.selectedBorderColor,
+ highlight: {
+ border: this.selectBorderHighlightColor,
+ background: nodeColor,
+ },
+ };
+
node.borderWidth = this.selectedBorderWidth;
node.borderWidthSelected = this.selectedBorderWidthSelected;
+ } else {
+ node.color = nodeColor;
}
+
return node;
}
}
diff --git a/src/app/pages/about-page/about-page.component.html b/src/app/pages/about-page/about-page.component.html
index 7d30ee20..603d3829 100644
--- a/src/app/pages/about-page/about-page.component.html
+++ b/src/app/pages/about-page/about-page.component.html
@@ -42,12 +42,11 @@
<li>Lab Website: http://www.exbio.de</li>
</ul>
- <h2>License</h2>
- <p>COVex is freely available for non-commercial use. The Software is provided "AS IS" without warranty
- whatsoever.
- COVex is publicly available and its source code is released under the GPLv3 license </p>
+ <br>
+ <br>
+
<div class="has-text-centered">
- <h2>Impressum</h2>
+ <h2 class="subtitle"> Impressum</h2>
<p>Prof. Dr. Jan Baumbach
Chair of Experimental Bioinformatics
<br>
diff --git a/src/app/pages/explorer-page/explorer-page.component.html b/src/app/pages/explorer-page/explorer-page.component.html
index ae27326a..1b15d2f7 100644
--- a/src/app/pages/explorer-page/explorer-page.component.html
+++ b/src/app/pages/explorer-page/explorer-page.component.html
@@ -200,7 +200,7 @@
</span>
<span *ngIf="!selectedWrapper">No item selected</span>
<span *ngIf="selectedWrapper">
- <span *ngIf="selectedWrapper.type === 'host'">Host</span>
+ <span *ngIf="selectedWrapper.type === 'host'">Host Protein</span>
<span *ngIf="selectedWrapper.type === 'virus'">Viral Protein</span>
<span *ngIf="selectedWrapper.type === 'drug'">Drug</span>
</span>
diff --git a/src/app/pages/explorer-page/explorer-page.component.ts b/src/app/pages/explorer-page/explorer-page.component.ts
index e4e0ba4b..a89bdc1c 100644
--- a/src/app/pages/explorer-page/explorer-page.component.ts
+++ b/src/app/pages/explorer-page/explorer-page.component.ts
@@ -89,7 +89,7 @@ export class ExplorerPageComponent implements OnInit, AfterViewInit {
const pos = this.network.getPositions([item.nodeId]);
node.x = pos[item.nodeId].x;
node.y = pos[item.nodeId].y;
- Object.assign(node, NetworkSettings.getNodeStyle(node.wrapper.type, false, selected));
+ Object.assign(node, NetworkSettings.getNodeStyle(node.wrapper.type, true, selected));
this.nodeData.nodes.update(node);
});
}
@@ -337,7 +337,7 @@ export class ExplorerPageComponent implements OnInit, AfterViewInit {
private mapHostProteinToNode(hostProtein: Protein): any {
const wrapper = getWrapperFromProtein(hostProtein);
- const node = NetworkSettings.getNodeStyle('host', false, this.analysis.inSelection(wrapper));
+ const node = NetworkSettings.getNodeStyle('host', true, this.analysis.inSelection(wrapper));
let nodeLabel = hostProtein.name;
if (hostProtein.name.length === 0) {
nodeLabel = hostProtein.proteinAc;
@@ -352,7 +352,7 @@ export class ExplorerPageComponent implements OnInit, AfterViewInit {
private mapViralProteinToNode(viralProtein: ViralProtein): any {
const wrapper = getWrapperFromViralProtein(viralProtein);
- const node = NetworkSettings.getNodeStyle('virus', false, this.analysis.inSelection(wrapper));
+ const node = NetworkSettings.getNodeStyle('virus', true, this.analysis.inSelection(wrapper));
node.id = wrapper.nodeId;
node.label = viralProtein.effectName;
node.id = wrapper.nodeId;
--
GitLab