make nodes that are not mapped to network unavailable for selection

src/app/components/info-tile/info-tile.component.html

@@ -40,7 +40,7 @@
   </div>
 
   <app-toggle 
-  *ngIf="wrapper.type !== 'drug'"
+  *ngIf="wrapper.data.netexId && wrapper.data.netexId.startsWith('p')"
   [value]="analysis.inSelection(wrapper)" [smallStyle]="smallStyle"
               (valueChange)="$event ? analysis.addItems([wrapper]) : analysis.removeItems([wrapper])" textOn="Selected"
               textOff="Deselected" tooltipOn="Add protein to selection." tooltipOff="Remove protein from selection."></app-toggle>

src/app/interfaces.ts

@@ -26,11 +26,13 @@ export interface NodeInteraction {
   from: string;
   to: string;
   group?: string;
+  label?: string;
 }
 
 export interface NetworkEdge {
   from: string;
   to: string;
+  label: string;
 }
 
 export interface Task {

src/app/main-network.ts

@@ -51,12 +51,13 @@ export class ProteinNetwork {
     if (typeof group === 'undefined' || typeof config.nodeGroups[group] === 'undefined') {
       group = 'default';
     }
+    console.log(config.nodeGroups[group])
     let node = JSON.parse(JSON.stringify(config.nodeGroups[group]));
 
     // update the node with custom node properties, including values fetched from backend
     node = {
-      ... node,
-      ... customNode
+      ...node,
+      ...customNode
     }
 
     // label is only used for network visualization
@@ -80,13 +81,23 @@ export class ProteinNetwork {
     if (typeof group === 'undefined' || typeof config.edgeGroups[group] === 'undefined') {
       group = 'default';
     }
-    const edge = JSON.parse(JSON.stringify(config.edgeGroups[group]));
-    edge.from = customEdge.from;
-    edge.to = customEdge.to;
+    let edge = JSON.parse(JSON.stringify(config.edgeGroups[group]));
+    console.log("edge")
+
+    console.log(edge)
+
+    console.log("customEdge")
+    console.log(customEdge)
+
+
+    edge = {
+      ...edge,
+      ...customEdge
+    }
     return edge;
   }
 
-  public mapDataToNodes(config: IConfig): { nodes: any[], edges: any[]; } {
+  public mapDataToNetworkInput(config: IConfig): { nodes: any[], edges: any[]; } {
     const nodes = [];
     const edges = [];
 

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

@@ -273,7 +273,7 @@ export class ExplorerPageComponent implements OnInit, AfterViewInit {
     this.proteinData = new ProteinNetwork(this.proteins, this.edges);
     this.proteinData.linkNodes();
 
-    const {nodes, edges} = this.proteinData.mapDataToNodes(this.myConfig);
+    const {nodes, edges} = this.proteinData.mapDataToNetworkInput(this.myConfig);
 
     this.nodeData.nodes = new vis.DataSet(nodes);
     this.nodeData.edges = new vis.DataSet(edges);
@@ -286,6 +286,10 @@ export class ExplorerPageComponent implements OnInit, AfterViewInit {
         const nodeId = nodeIds[0];
         const node = this.nodeData.nodes.get(nodeId);
         const wrapper = getWrapperFromNode(node);
+        if (wrapper.data.netexId === undefined || !wrapper.data.netexId.startsWith('p')) {
+          // skip if node is not a protein mapped to backend
+          return
+        }
         if (this.analysis.inSelection(node)) {
           this.analysis.removeItems([wrapper]);
         } else {

src/index.html

@@ -38,13 +38,22 @@
 
   <network-expander id="netexp1"
                     config='{
-                      "nodeGroups": {"0.5": {"type": "gene", "color": "rgb(204, 255, 51)", "groupName": "0.5", "shape": "circle"}, "patient_group": {"type": "patient", "color": "red", "groupName": "patient group", "shape": "circle"}},
-                      "edgeGroups": {"dashes": {"color": "black", "groupName": "Dashes Group", "dashes": [1, 2]}}, 
-                      "identifier": "symbol"
+                      "nodeGroups":{
+                        "0.5":{"type":"gene","color":"#CCFF33FF","groupName":"0.5","shape":"circle"},
+                        "1.5":{"type":"gene","color":"#66FF33FF","groupName":"1.5","shape":"circle"},
+                        "2.0":{"type":"gene","color":"#33CC33FF","groupName":"2.0","shape":"circle"},
+                        "patient_group":{"type":"gene","color":"#FF0000FF","groupName":"-2.0","shape":"circle"}
+                      },
+                      "edgeGroups":{
+                        "custom":{"color":"black","groupName":"Custom Group"}
+                      },
+                      "identifier":"symbol",
+                      "legendUrl":"https://exbio.wzw.tum.de/covex/assets/leg1.png"
                     }'
+
                     network='{
-                      "nodes": [{"id": "TP53", "group": "0.5"}, {"id": "C5", "group": "0.5"}, {"id": "Patient", "group": "patient_group"}, {"label": "PTEN", "id": "PTEN", "group": 0.5}],
-                      "edges": [{"from": "TP53","to": "C5","group": "dashes"}]
+                      "nodes":[{"id":"TP53","group":"0.5"},{"id":"C5","group":"0.5"},{"id":"Patient","group":"patient_group"},{"label":"PTEN","id":"PTEN","group":0.5}],
+                      "edges":[]
                     }'
                     style="height: 100%; width: 100vw; display: block;"
                     ></network-expander>