Merge branch 'use-better-seed-colors' into 'master'

Use better seed colors

See merge request covid-19/frontend!77

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() {

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;
   }
 

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">

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;
   }
 }

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>

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>

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;