add group name to groupName

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

 <div *ngIf="wrapper">
   <div>
-    <p *ngIf="wrapper.data.label" [ngClass]="{'text-normal':smallStyle}">
+    <p *ngIf="wrapper.data.detailShowLabel && wrapper.data.label" [ngClass]="{'text-normal':smallStyle}">
       <b><span>Label:</span></b>
       <span class="is-capitalized"> {{ wrapper.data.label }}</span>
     </p>
@@ -18,9 +18,9 @@
         <span class="is-capitalized"> {{ wrapper.data.drugId }}</span>
       </a>
     </p>
-    <p *ngIf="wrapper.data.group" [ngClass]="{'text-normal':smallStyle}">
+    <p *ngIf="wrapper.data.groupName" [ngClass]="{'text-normal':smallStyle}">
       <b><span>Group:</span></b>
-      <span class="is-capitalized"> {{ wrapper.data.group }}</span>
+      <span class="is-capitalized"> {{ wrapper.data.groupName }}</span>
     </p>
     <p *ngIf="wrapper.data.uniprotAc" [ngClass]="{'text-normal':smallStyle}">
       <b><span>Access:</span></b>

src/app/config.ts

-// export interface NodeGroup {
-//   fill: string;
-// }
-//
-// export interface EdgeGroup {
-//   color: string;
-// }
-
 export interface NodeGroup {
-  name: string;
+  groupName: string;
   color: string;
   shape: 'circle' | 'triangle' | 'star' | 'square' | 'image';
-  type: 'gene' | 'protein' | 'drug';
+  type?: string;
   image?: string;
+  detailShowLabel?: boolean;
 }
 
 export interface EdgeGroup {
-  name: string;
+  groupName: string;
   color: string;
   // see https://visjs.github.io/vis-network/docs/network/edges.html
   dashes?: false | Array<number>; 
@@ -54,6 +47,10 @@ export interface IConfig {
   identifier?: Identifier;
 }
 
+/**
+ * Provide default values
+ */
+
 export const defaultConfig: IConfig = {
   legendUrl: '', // 'https://exbio.wzw.tum.de/covex/assets/leg1.png' show legend image if set, otherwise default legend
   legendClass: 'legend',
@@ -77,19 +74,21 @@ export const defaultConfig: IConfig = {
   interactionProteinProtein: 'STRING',
   nodeGroups: {
     default: {
-      name: 'Default Group',
+      // this default group is used for default node group values
+      groupName: 'Default Node Group',
       color: 'yellow',
       shape: 'triangle',
       type: 'protein',
+      detailShowLabel: false,
     },
-    protein: {
-      name: 'Resulting Proteins',
+    default_protein: {
+      groupName: 'Resulting Proteins',
       color: 'red',
       shape: 'circle',
       type: 'protein',
     },
-    drug: {
-      name: 'Possible Drugs',
+    default_drug: {
+      groupName: 'Possible Drugs',
       color: 'green',
       shape: 'star',
       type: 'drug',
@@ -97,8 +96,10 @@ export const defaultConfig: IConfig = {
   },
   edgeGroups: {
     default: {
-      name: 'Edgy edges',
-      color: 'black'
+      // this default group is used for default edge group values
+      groupName: 'Default Edge Group',
+      color: 'black',
+      dashes: false
     }
   },
 };

src/app/interfaces.ts

@@ -8,6 +8,7 @@ export interface Node {
   uniprotAc?: string;
   ensg?: Array<string>;
   group?: string;
+  groupName?: string;
   color?: string;
   shape?: string;
   interactions?: Node[];
@@ -172,6 +173,7 @@ export interface Wrapper {
     color?: string;
     interactions?: any;
     group?: string;
+    groupName?: string;
     uniprotAc?: string;
     expressionLevel?: number;
     x?: number;
@@ -181,6 +183,7 @@ export interface Wrapper {
     inTrial?: boolean;
     inLiterature?: boolean;
     trialLinks?: string[];
+    detailShowLabel?: boolean;
   };
 }
 

src/app/main-network.ts

@@ -53,13 +53,6 @@ export class ProteinNetwork {
     }
     let node = JSON.parse(JSON.stringify(config.nodeGroups[group]));
 
-    // remove group name
-    delete node.name
-
-    // node.name is actually group name since it comes from the group configuration
-    // this property is already stored in the wrapper object
-    // instead, node.name should reflect the actual node name
-    // "node.name = customNode.name";
     // update the node with custom node properties, including values fetched from backend
     node = {
       ... node,
@@ -67,6 +60,7 @@ export class ProteinNetwork {
     }
 
     // label is only used for network visualization
+    console.log(customNode)
     node.label = customNode.label ? customNode.label : customNode.id;
 
     if (node.image) {

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

@@ -13,7 +13,6 @@ import {
   Tissue
 } from '../../interfaces';
 import {ProteinNetwork} from '../../main-network';
-import {HttpClient} from '@angular/common/http';
 import {AnalysisService} from '../../services/analysis/analysis.service';
 import {OmnipathControllerService} from '../../services/omnipath-controller/omnipath-controller.service';
 import html2canvas from 'html2canvas';
@@ -38,6 +37,7 @@ export class ExplorerPageComponent implements OnInit, AfterViewInit {
 
   private networkJSON = '{"nodes": [], "edges": []}';
 
+  // set default config on init
   public myConfig: IConfig = JSON.parse(JSON.stringify(defaultConfig));
 
   @Input()
@@ -53,11 +53,17 @@ export class ExplorerPageComponent implements OnInit, AfterViewInit {
     for (const key of Object.keys(configObj)) {
       if (key === 'nodeGroups' ) {
         this.setConfigNodeGroup(key, configObj[key]);
+        // dont set the key here, will be set in function
+        continue;
       } else if (key === 'edgeGroups') {
         this.setConfigEdgeGroup(key, configObj[key])
+        // dont set the key here, will be set in function
+        continue;
       }
       else if (key === 'interactions') {
         this.getInteractions();
+        // dont set the key here, will be set in function
+        continue;
       } else if (key === 'showLeftSidebar') {
         if (configObj[key]) {
           // shrink main column
@@ -343,30 +349,54 @@ export class ExplorerPageComponent implements OnInit, AfterViewInit {
   }
 
     /**
-   * Function to set the node group attribute in config
-   * Handles setting defaults
+   * Function to set the node group attribute in config 
+   * Validates input NodeGroups and handles setting defaults
    * @param key 
    * @param values 
    */
-  public setConfigNodeGroup(key: string, values: Array<NodeGroup>) {
-    this.myConfig[key] = {...this.myConfig[key], ...values};
+  public setConfigNodeGroup(key: string, nodeGroups: Array<NodeGroup>) {
+    console.log(Object.keys(nodeGroups).length)
+    if (nodeGroups === undefined || !Object.keys(nodeGroups).length) {
+      // if node groups are not set or empty, use default edge group(s)
+      this.myConfig[key] = defaultConfig.nodeGroups;
+      // stop if nodeGroups do not contain any information
+      return
+    }
+    // make sure all keys are set
+    Object.entries(nodeGroups).forEach(([key, value]) => {
+      if (!('detailShowLabel' in value)) {
+        // use detailShowLabel default value if not set
+        value['detailShowLabel'] = defaultConfig.nodeGroups.default.detailShowLabel;
+      }
+    })
+    
+    // override default edge groups
+    this.myConfig[key] = nodeGroups;
+    console.log(nodeGroups)
   }
 
   /**
    * Function to set the edge group attribute in config
-   * Handles setting defaults
+   * Validates input EdgeGroups and handles setting defaults
    * @param key 
    * @param values 
    */
   public setConfigEdgeGroup(key: string, edgeGroups: Array<EdgeGroup>) {
+    if (edgeGroups === undefined || !edgeGroups.length) {
+      // if edge groups are not set or empty, use default edge group(s)
+      this.myConfig[key] = defaultConfig.edgeGroups;
+      // stop if edgeGroups do not contain any information
+      return
+    }
     // make sure all keys are set
     Object.entries(edgeGroups).forEach(([key, value]) => {
       if (!('dashes' in value)) {
-        // dashes defaults to 'false' if not set
-        value['dashes'] = false;
+        // use dashes default value if not set
+        value['dashes'] = defaultConfig.edgeGroups.default.dashes;
       }
     })
-    this.myConfig[key] = {...this.myConfig[key], ...edgeGroups};
+    // override default node groups
+    this.myConfig[key] = edgeGroups;
   }
 
   public toCanvas() {

src/index.html

@@ -38,10 +38,9 @@
 
   <network-expander id="netexp1"
                     config='{
-                      "nodeGroups": {"0.5": {"type": "gene", "color": "rgb(204, 255, 51)", "name": "0.5", "shape": "circle"}, "patient_group": {"type": "patient", "color": "red", "name": "patient group", "shape": "circle"}, "2.0": {"type": "gene", "color": "rgb(51, 204, 51)", "name": "2.0", "shape": "circle"}, "-2.0": {"type": "gene", "color": "rgb(255, 0, 0)", "name": "-2.0", "shape": "circle"}},
-                      "edgeGroups": {"dashes": {"color": "black", "name": "Custom Group", "dashes": [1, 2]}}, 
-                      "identifier": "symbol",
-                      "legendUrl": "https://exbio.wzw.tum.de/covex/assets/leg1.png"
+                      "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"
                     }'
                     network='{
                       "nodes": [{"id": "TP53", "group": "0.5"}, {"id": "C5", "group": "0.5"}, {"id": "Patient", "group": "patient_group"}, {"label": "PTEN", "id": "PTEN", "group": 0.5}],