From c995bea82c122073458868846120c14a6e33dd69 Mon Sep 17 00:00:00 2001
From: AndiMajore <andi.majore@googlemail.com>
Date: Fri, 21 Oct 2022 17:46:18 +0200
Subject: [PATCH] fixed rendering issues

---
 .../analysis-panel.component.ts               |  5 +-
 .../components/network/network.component.ts   | 11 ++--
 .../launch-analysis.component.ts              |  1 -
 src/app/network-settings.ts                   | 63 +++++++++++--------
 .../explorer-page/explorer-page.component.ts  | 35 +++--------
 5 files changed, 56 insertions(+), 59 deletions(-)

diff --git a/src/app/components/analysis-panel/analysis-panel.component.ts b/src/app/components/analysis-panel/analysis-panel.component.ts
index 313e18f5..ca9d637f 100644
--- a/src/app/components/analysis-panel/analysis-panel.component.ts
+++ b/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,
diff --git a/src/app/components/network/network.component.ts b/src/app/components/network/network.component.ts
index 97766ba6..331fc3bb 100644
--- a/src/app/components/network/network.component.ts
+++ b/src/app/components/network/network.component.ts
@@ -107,9 +107,10 @@ export class NetworkComponent implements OnInit {
 
   updateQueryItems() {
     this.queryItems = [];
-    this.currentViewNodes.forEach((protein) => {
-      this.queryItems.push(getWrapperFromNode(protein));
-    });
+    if (this.currentViewNodes)
+      this.currentViewNodes.forEach((protein) => {
+        this.queryItems.push(getWrapperFromNode(protein));
+      });
   }
 
   public saveAddNodes(nodeList: Node[]) {
@@ -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));
diff --git a/src/app/dialogs/launch-analysis/launch-analysis.component.ts b/src/app/dialogs/launch-analysis/launch-analysis.component.ts
index 752cdf6e..132a99d7 100644
--- a/src/app/dialogs/launch-analysis/launch-analysis.component.ts
+++ b/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;
diff --git a/src/app/network-settings.ts b/src/app/network-settings.ts
index 2041d20f..01d0b927 100644
--- a/src/app/network-settings.ts
+++ b/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;
   }
 }
diff --git a/src/app/pages/explorer-page/explorer-page.component.ts b/src/app/pages/explorer-page/explorer-page.component.ts
index 6a521aff..cb51e27b 100644
--- a/src/app/pages/explorer-page/explorer-page.component.ts
+++ b/src/app/pages/explorer-page/explorer-page.component.ts
@@ -24,8 +24,8 @@ import {NetexControllerService} from 'src/app/services/netex-controller/netex-co
 import {removeDuplicateObjectsFromList} from '../../utils';
 import * as merge from 'lodash/fp/merge';
 import * as JSON5 from 'json5';
-import { DrugstoneConfigService } from 'src/app/services/drugstone-config/drugstone-config.service';
-import { NetworkHandlerService } from 'src/app/services/network-handler/network-handler.service';
+import {DrugstoneConfigService} from 'src/app/services/drugstone-config/drugstone-config.service';
+import {NetworkHandlerService} from 'src/app/services/network-handler/network-handler.service';
 
 
 declare var vis: any;
@@ -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);
       }
     });
   }
@@ -261,8 +248,7 @@ export class ExplorerPageComponent implements OnInit, AfterViewInit {
     this.networkHandler.activeNetwork.selectedWrapper = null;
     // 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);
-
+    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);
     }
@@ -302,16 +288,16 @@ export class ExplorerPageComponent implements OnInit, AfterViewInit {
       return true
     })
 
-     // @ts-ignore
+    // @ts-ignore
     if (!this.drugstoneConfig.selfReferences) {
-       edges = edges.filter(el => el.from !== el.to);
-     }
+      edges = edges.filter(el => el.from !== el.to);
+    }
 
     this.nodeData.nodes = new vis.DataSet(nodes);
     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
@@ -574,14 +559,14 @@ export class ExplorerPageComponent implements OnInit, AfterViewInit {
   //TODO change to access through network service
   @ViewChild('analysisPanel') analysisPanel;
 
-  getNodes() :any {
+  getNodes(): any {
     if (this.selectedAnalysisToken && this.analysisPanel)
       return this.analysisPanel.getResultNodes()
     return this.networkHandler.activeNetwork.inputNetwork.nodes;
   }
 
-  getEdges() :any {
-    if(this.selectedAnalysisToken && this.analysisPanel)
+  getEdges(): any {
+    if (this.selectedAnalysisToken && this.analysisPanel)
       return this.analysisPanel.getResultEdges()
     return this.networkHandler.activeNetwork.inputNetwork.edges
   }
-- 
GitLab