fixed rendering issues

src/app/components/analysis-panel/analysis-panel.component.ts

@@ -200,7 +200,7 @@ export class AnalysisPanelComponent implements OnInit, OnChanges, AfterViewInit
             this.nodeData.edges = new vis.DataSet(edges);
             const container = this.networkHandler.activeNetwork.networkEl.nativeElement;
             const isBig = nodes.length > 100 || edges.length > 100;
-            const options = NetworkSettings.getOptions(isBig ? 'analysis-big' : 'analysis', this.myConfig.physicsOn);
+            const options = NetworkSettings.getOptions(isBig ? 'analysis-big' : 'analysis', this.myConfig);
             // @ts-ignore
             options.groups = this.drugstoneConfig.config.nodeGroups;
             // @ts-ignore
@@ -208,7 +208,6 @@ export class AnalysisPanelComponent implements OnInit, OnChanges, AfterViewInit
               // @ts-ignore
               delete g.renderer
             }
-            console.log(options)
             this.drugstoneConfig.config.physicsOn = !isBig;
             this.networkHandler.activeNetwork.networkInternal = new vis.Network(container, this.nodeData, options);
             this.networkHandler.activeNetwork.networkInternal.on('stabilizationIterationsDone', () => {
@@ -321,6 +320,8 @@ export class AnalysisPanelComponent implements OnInit, OnChanges, AfterViewInit
                 const updatedNodes = [];
                 this.nodeData.nodes.forEach((node) => {
                   const isSeed = this.networkHandler.activeNetwork.highlightSeeds ? this.networkHandler.activeNetwork.seedMap[node.id] : false;
+                  if (!isSeed)
+                    return
                   const nodeStyled = NetworkSettings.getNodeStyle(
                     node,
                     this.myConfig,

src/app/components/network/network.component.ts

@@ -107,6 +107,7 @@ export class NetworkComponent implements OnInit {
 
   updateQueryItems() {
     this.queryItems = [];
+    if (this.currentViewNodes)
       this.currentViewNodes.forEach((protein) => {
         this.queryItems.push(getWrapperFromNode(protein));
       });
@@ -364,7 +365,7 @@ export class NetworkComponent implements OnInit {
           NetworkSettings.getNodeStyle(
             node,
             this.drugstoneConfig.config,
-            false,
+            node.isSeed && this.networkHandler.activeNetwork.highlightSeeds,
             this.analysis.inSelection(getWrapperFromNode(node)),
             1.0,
             this.nodeRenderer
@@ -428,7 +429,7 @@ export class NetworkComponent implements OnInit {
               NetworkSettings.getNodeStyle(
                 node,
                 this.drugstoneConfig.config,
-                node.isSeed,
+                node.isSeed && this.networkHandler.activeNetwork.highlightSeeds,
                 this.analysis.inSelection(wrapper),
                 gradient,
                 this.nodeRenderer));

src/app/dialogs/launch-analysis/launch-analysis.component.ts

@@ -116,7 +116,6 @@ export class LaunchAnalysisComponent implements OnInit, OnChanges {
       config: this.drugstoneConfig.config,
       input_network: this.networkHandler.activeNetwork.inputNetwork
     };
-    console.log(parameters)
     parameters.ppi_dataset = this.drugstoneConfig.config.interactionProteinProtein;
     parameters.pdi_dataset = this.drugstoneConfig.config.interactionDrugProtein;
     parameters.licenced = this.drugstoneConfig.config.licensedDatasets;

src/app/network-settings.ts

@@ -60,24 +60,29 @@ export class NetworkSettings {
     stabilization: true
   };
 
-  static getOptions(network: 'main' | 'analysis' | 'analysis-big', physicsOn) {
+  static getOptions(network: 'main' | 'analysis' | 'analysis-big', config) {
+    const physicsOn = config.physicsOn;
+    const groups = config.nodeGroups;
     if (network === 'main') {
       return {
         layout: this.mainLayout,
         edges: this.mainEdges,
         physics: physicsOn || this.mainPhysics,
+        groups,
       };
     } else if (network === 'analysis') {
       return {
         layout: this.analysisLayout,
         edges: this.analysisEdges,
         physics: physicsOn || this.analysisPhysics,
+        groups,
       };
     } else if (network === 'analysis-big') {
       return {
         layout: this.analysisLayout,
         edges: this.analysisEdges,
         physics: physicsOn || this.analysisBigPhysics,
+        groups,
       };
     }
   }
@@ -92,15 +97,6 @@ export class NetworkSettings {
     // delete possible old styles
     Object.keys(config.nodeGroups.default).forEach(e => delete node[e]);
 
-    // set group styles
-    // if (node.group === 'default') {
-    //   node = merge(node, config.nodeGroups.default);
-    // } else {
-    // node = merge(node, config.nodeGroups[node.group]);
-    // if (node.label === 'F11R' || node.label === 'GNAI1')
-    //   console.log(node)
-    // }
-
     // note that seed and selected node style are applied after the node style is fetched.
     // this allows to overwrite only attributes of interest, therefore in e.g. seedNode group
     // certain attributes like shape can remain undefined
@@ -109,6 +105,17 @@ export class NetworkSettings {
     if (node._group)
       // @ts-ignore
       node.group = node._group
+    // @ts-ignore
+    if (node._shadow) { // @ts-ignore
+      node.shadow = node._shadow
+    }else{
+      if (config.nodeGroups[node.group].shadow) {
+        node.shadow = {enabled: config.nodeGroups[node.group].shadow}
+        node.shadow.color = 'rgba(0,0,0,0.5)'
+      } else {
+        node.shadow = {color: 'rgba(0,0,0,0.5)'}
+      }
+    }
     if (isSeed) {
       // apply seed node style to node
       // @ts-ignore
@@ -121,42 +128,46 @@ export class NetworkSettings {
       node._group = node.group
       // apply selected node style to node
       node.group = 'selectedNode'
+      if (config.nodeGroups[node.group].shadow) {
+        node.shadow = {enabled: config.nodeGroups[node.group].shadow}
+        node.shadow.color = '#000000'
+      } else {
+        node.shadow = {color: '#000000'}
       }
+    }
+
     // show image if image url is given. If seed nodes are highlighted, ignore image property
     if (node.image && !isSeed) {
       node.shape = 'image';
     }
-    // use opactiy as gradient
-    // if (gradient === null) {
-    //   node.opacity = 0
-    // } else {
-    //   node.opacity = gradient
-    // }
+
     // custom ctx renderer for e.g. pie chart
     if (renderer !== null) {
       // @ts-ignore
-      node._shape = node.shape
       node.shape = 'custom';
       node.color = {opacity: gradient}
       node.opacity = gradient
+      if (isSeed) {
+        // apply seed node style to node
         // @ts-ignore
+        node.color = config.nodeGroups[node.group].color
+      }else{
+        delete node.color
+      }
+      // @ts-ignore
+      node._shadow = node.shadow
       if (config.nodeGroups[node.group].shadow) {
         node.shadow = {enabled: config.nodeGroups[node.group].shadow}
-        node.shadow.color = '#000000'
+        node.shadow.color = 'rgba(0,0,0,0.5)'
       } else {
-        node.shadow = {color: '#000000'}
+        node.shadow = {color: 'rgba(0,0,0,0.5)'}
       }
       node.ctxRenderer = renderer;
     } else {
       node.opacity = undefined
-      // @ts-ignore
-      if (node._shape) {
-        // @ts-ignore
-        node.shape = node._shape;
-      } else
-        delete node.shape
-      delete node.ctxRenderer
+      delete node.ctxRenderer;
     }
+
     return node;
   }
 }

src/app/pages/explorer-page/explorer-page.component.ts

@@ -164,19 +164,6 @@ export class ExplorerPageComponent implements OnInit, AfterViewInit {
           updatedNodes.push(nodeStyled);
         }
         this.nodeData.nodes.update(updatedNodes);
-      } else {
-        const updatedNodes = [];
-        this.nodeData.nodes.forEach((node) => {
-          // const nodeSelected = this.analysis.idInSelection(node.id);
-          // if (node.group == 'default') {
-          //   Object.assign(node, this.drugstoneConfig.config.nodeGroups.default);
-          // } else {
-          //   Object.assign(node, this.drugstoneConfig.config.nodeGroups[node.group]);
-          // };
-          Object.assign(node, this.drugstoneConfig.config.nodeGroups[node.group]);
-
-        });
-        this.nodeData.nodes.update(updatedNodes);
       }
     });
   }
@@ -262,7 +249,6 @@ export class ExplorerPageComponent implements OnInit, AfterViewInit {
     // getNetwork synchronizes the input network with the database
     await this.getNetwork();
     this.proteinData = new ProteinNetwork(this.networkHandler.activeNetwork.inputNetwork.nodes, this.networkHandler.activeNetwork.inputNetwork.edges);
-
     if (this.networkHandler.activeNetwork.networkPositions) {
       this.proteinData.updateNodePositions(this.networkHandler.activeNetwork.networkPositions);
     }
@@ -311,7 +297,7 @@ export class ExplorerPageComponent implements OnInit, AfterViewInit {
     this.nodeData.edges = new vis.DataSet(edges);
     const container = this.networkHandler.activeNetwork.networkEl.nativeElement;
 
-    const options = NetworkSettings.getOptions('main', this.drugstoneConfig.config.physicsOn);
+    const options = NetworkSettings.getOptions('main', this.drugstoneConfig.config);
 
     this.networkHandler.activeNetwork.networkInternal = new vis.Network(container, this.nodeData, options);
 
@@ -410,7 +396,6 @@ export class ExplorerPageComponent implements OnInit, AfterViewInit {
     network.nodes.forEach((node) => {
       // set node label to original id before node id will be set to netex id
       node.label = node.label ? node.label : node.id;
-
     });
 
     // adjust edge labels accordingly and filter