add edge dashes option to edge groups

src/app/config.ts

@@ -17,6 +17,8 @@ export interface NodeGroup {
 export interface EdgeGroup {
   name: string;
   color: string;
+  // see https://visjs.github.io/vis-network/docs/network/edges.html
+  dashes?: false | Array<number>; 
 }
 
 export type Identifier = 'symbol'|'uniprot'|'ensg';

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

@@ -51,12 +51,13 @@ export class ExplorerPageComponent implements OnInit, AfterViewInit {
 
     const configObj = JSON.parse(config);
     for (const key of Object.keys(configObj)) {
-      if (key === 'nodeGroups' || key === 'edgeGroups') {
-        this.myConfig[key] = {...this.myConfig[key], ...configObj[key]};
-        continue;
-      } else if (key === 'interactions') {
+      if (key === 'nodeGroups' ) {
+        this.setConfigNodeGroup(key, configObj[key]);
+      } else if (key === 'edgeGroups') {
+        this.setConfigEdgeGroup(key, configObj[key])
+      }
+      else if (key === 'interactions') {
         this.getInteractions();
-        continue;
       } else if (key === 'showLeftSidebar') {
         if (configObj[key]) {
           // shrink main column
@@ -74,7 +75,6 @@ export class ExplorerPageComponent implements OnInit, AfterViewInit {
           document.getElementById('main-column').classList.add('rightgone');
         }
       }
-      console.log(key)
       this.myConfig[key] = configObj[key];
     }
   }
@@ -342,12 +342,33 @@ export class ExplorerPageComponent implements OnInit, AfterViewInit {
     });
   }
 
-  public setConfigEdgeGroup(key: string, values: EdgeGroup) {
-    // make sure all keys are set
-
+    /**
+   * Function to set the node group attribute in config
+   * Handles setting defaults
+   * @param key 
+   * @param values 
+   */
+  public setConfigNodeGroup(key: string, values: Array<NodeGroup>) {
     this.myConfig[key] = {...this.myConfig[key], ...values};
   }
 
+  /**
+   * Function to set the edge group attribute in config
+   * Handles setting defaults
+   * @param key 
+   * @param values 
+   */
+  public setConfigEdgeGroup(key: string, edgeGroups: Array<EdgeGroup>) {
+    // 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;
+      }
+    })
+    this.myConfig[key] = {...this.myConfig[key], ...edgeGroups};
+  }
+
   public toCanvas() {
     html2canvas(this.networkEl.nativeElement).then((canvas) => {
       const generatedImage = canvas.toDataURL('image/png').replace('image/png', 'image/octet-stream');

src/index.html

@@ -39,13 +39,13 @@
   <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": {"custom": {"color": "black", "name": "Custom Group"}}, 
+                      "edgeGroups": {"dashes": {"color": "black", "name": "Custom Group", "dashes": [1, 2]}}, 
                       "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": []
+                      "edges": [{"from": "TP53","to": "C5","group": "dashes"}]
                     }'
                     style="height: 100%; width: 100vw; display: block;"
                     ></network-expander>