handling of multiple ensg numbers for same gene

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

@@ -31,6 +31,7 @@ import {NetworkSettings} from '../../network-settings';
 import {NetexControllerService} from 'src/app/services/netex-controller/netex-controller.service';
 import {defaultConfig, IConfig} from 'src/app/config';
 import { mapCustomEdge, mapCustomNode } from 'src/app/main-network';
+import { removeDuplicateObjectsFromList } from 'src/app/utils';
 
 
 declare var vis: any;

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

@@ -23,7 +23,7 @@ import domtoimage from 'dom-to-image';
 import {NetworkSettings} from '../../network-settings';
 import {defaultConfig, EdgeGroup, IConfig, InteractionDatabase, NodeGroup} from '../../config';
 import {NetexControllerService} from 'src/app/services/netex-controller/netex-controller.service';
-import {rgbaToHex, rgbToHex, standardize_color} from '../../utils'
+import {removeDuplicateObjectsFromList, rgbaToHex, rgbToHex, standardize_color} from '../../utils'
 import * as merge from 'lodash/fp/merge';
 
 // import * as 'vis' from 'vis-network';
@@ -272,27 +272,37 @@ export class ExplorerPageComponent implements OnInit, AfterViewInit {
     if (network.nodes.length) {
       network.nodes = await this.netex.mapNodes(network.nodes, this.myConfig.identifier);
     }
+
+    if (this.myConfig.identifier === 'ensg') {
+      // remove possible duplicate IDs
+      network.nodes = removeDuplicateObjectsFromList(network.nodes, 'netexId');
+    }
+
     // at this point, we have nodes synched with the backend
     // use netexIds where posssible, but use original id as node name if no label given
     const nodeIdMap = {};
-    const seenNodeIds = new Set();
-    network.nodes.forEach((node, index, object) => {
-      if (seenNodeIds.has(node.id)) {
-        // remove duplicate ensg nodes, TODO is there a better way to do this?
-        object.splice(index, 1);
-        return;
-      } else {
-        seenNodeIds.add(node.id);
-      }
-      nodeIdMap[node.id] = node.netexId ? node.netexId : node.id;
+    
+    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;
+
+      nodeIdMap[node.id] = node.netexId ? node.netexId : node.id;
       node.id = nodeIdMap[node.id];
     });
-    // adjust edge labels accordingly
+
+    // adjust edge labels accordingly and filter 
+    const edges = new Array();
     network.edges.forEach(edge => {
       edge.from = nodeIdMap[edge.from];
       edge.to = nodeIdMap[edge.to];
+      // check if edges have endpoints
+      if (edge.from !== undefined && edge.to !== undefined) {
+        edges.push(edge);
+      }
     });
+    // remove edges without endpoints
+    network.edges = edges;
+
     this.proteins = network.nodes;
     this.edges = network.edges;
   }
@@ -534,8 +544,6 @@ export class ExplorerPageComponent implements OnInit, AfterViewInit {
     nodeGroups = merge(defaultNodeGroups, nodeGroups);
     // overwrite default node groups
     this.myConfig[key] = nodeGroups;
-    console.log('nodeGroups after preprocessing')
-    console.log(nodeGroups)
   }
 
   /**

src/app/utils.ts

 // From https://stackoverflow.com/a/27709336/3850564
 
+import { Node } from "./interfaces";
+
 export function getGradientColor(startColor: string, endColor: string, percent: number) {
   // strip the leading # if it's there
   startColor = startColor.replace(/^\s*#|\s*$/g, '');
@@ -104,3 +106,16 @@ export function standardize_color(str){
 	return ctx.fillStyle.toString();
 }
 
+export function removeDuplicateObjectsFromList(nodes: Node[], attribute: string): Node[] {
+  const seenIds = new Set();
+  const filteredArray = new Array();
+  for (const node of nodes) {
+    if (seenIds.has(node[attribute])) {
+      continue;
+    }
+    filteredArray.push(node);
+    seenIds.add(node[attribute]);
+  }
+  return filteredArray;
+}
+

src/index.html

@@ -37,10 +37,10 @@
                     config='{
                       "nodeGroups": {"selectedNode": {"font": {"size": "18"} }, "0.5": {"font": "18px verdana blue", "type": "0.5er Instanz", "color": "green", "groupName": "0.5", "shape": "star"}, "patientgroup": {"type": "Patient", "detailShowLabel": "true", "color": "#632345", "groupName": "patient group", "shape": "dot", "size": "50"}, "pugGroup": {"type": "woof woof", "color": "grey", "groupName": "Pug Group", "shape": "triangle", "image": "https://static.raymondcamden.com/images/2016/11/pug.png"}},
                       "edgeGroups": {"xxx": {"color": "black", "groupName": "xxx Group", "dashes": [1, 2]}, "notdashes": {"color": "black", "groupName": "not dashes Group"}},
-                      "identifier": "symbol"
+                      "identifier": "ensg"
                     }'
                     network='{
-                      "nodes": [{"id": "MYC", "label": "node w/o group"}, {"id": "TP53", "group": "0.5"}, {"id": "C5", "group": "pugGroup"}, {"id": "Patient No. 5", "group": "patientgroup"}, {"label": "PTEN", "id": "PTEN", "group": 0.5, "value":"5"}],
+                      "nodes": [{"id": "ENSG00000171862", "label": "node w/o group"}, {"id": "ENSG00000284792", "group": "0.5"}, {"id": "ENSG00000106804", "group": "pugGroup"}, {"id": "Patient No. 5", "group": "patientgroup"}, {"label": "PTEN", "id": "PTEN", "group": 0.5, "value":"5"}],
                       "edges": [
                       {"from": "TP53","to": "C5","group": "xxx", "label": "this is a label", "title": "this is a title"},
                       {"from": "Patient No. 5","to": "C5","label": "w/o group"}