ibd use case as example in playground

.gitignore

@@ -2,4 +2,6 @@
 node_modules
 dist/
 
+.prettierrc
+
 .DS_Store
\ No newline at end of file

src/app/components/playground/datapanel/datapanel.component.html

@@ -34,7 +34,7 @@
             <app-dropdown
             [items]="diseaseExamples"
             label="Examples"
-            (onChange)="updateNodeImport($event)"
+            (onChange)="loadExample($event)"
             tooltip="Choose genes from a list of example diseases."
           ></app-dropdown>
           </div>

src/app/components/playground/datapanel/datapanel.component.ts

@@ -69,7 +69,11 @@ export class DatapanelComponent implements OnInit {
         this.setNodesEvent.emit(this.jsonData)
     }
 
-    public updateNodeImport(genes: any) {
+    public loadExample(genes: any) {
+        this._updateNodeImport(genes);
+    }
+
+    private _updateNodeImport(genes: any) {
         this.rawData = genes.join(',');
     }
 }

src/app/components/playground/examples/examples/examples.component.ts

 import { Component, EventEmitter, OnInit, Output } from '@angular/core';
 import { ExampleConfig } from 'src/interfaces';
 // @ts-ignore
-import cystic_fibrosis_example from './examples/cystic_fibrosis.json'
+import cystic_fibrosis_example from './examples/cystic_fibrosis.json';
+// @ts-ignore
+import ibd_example from './examples/inflammatory_bowel_disease.json';
 
 @Component({
   selector: 'app-examples',
@@ -19,7 +21,8 @@ export class ExamplesComponent implements OnInit {
 
   public drugstOneExamples: ExampleConfig[] = [
     {label: 'None', value: 'none', config: {}, groups: {}, network: {}, styles: {}},
-    cystic_fibrosis_example
+    cystic_fibrosis_example,
+    ibd_example
   ];
 
   public changeDrugstOneExample($event: string) {

src/app/components/playground/examples/examples/examples/cystic_fibrosis.json

 {
-  "label": "Cystic Fibrosis (from article)",
+  "label": "Cystic Fibrosis",
   "value": "cystic_fibrosis",
   "config": {
     "activateNetworkMenuButtonAdjacentDisorders": false,
     "activateNetworkMenuButtonAdjacentDrugs": false,
     "activateNetworkMenuButtonAdjacentDisorderDrugs": false,
-    "licensedDatasets": true
+    "licensedDatasets": true,
+    "physicsOn": true
   },
   "groups": {
     "nodeGroups": {

src/app/components/playground/examples/examples/examples/inflammatory_bowel_disease.json

+{
+  "label": "IBD",
+  "value": "ibd",
+  "config": {
+    "activateNetworkMenuButtonAdjacentDisorders": false,
+    "activateNetworkMenuButtonAdjacentDrugs": false,
+    "activateNetworkMenuButtonAdjacentDisorderDrugs": false,
+    "licensedDatasets": true,
+    "physicsOn": true,
+    "autofillEdges": true,
+    "interactionProteinProtein": "NeDRex",
+    "interactionDrugProtein": "NeDRex"
+  },
+  "groups": {
+    "nodeGroups": {
+      "protein": {
+        "type": "protein",
+        "color": "#00008b",
+        "font": { "color": "#f0f0f0" },
+        "groupName": "Protein",
+        "shape": "circle"
+      },
+      "foundDrug": {
+        "type": "drug",
+        "color": "#F12590",
+        "font": { "color": "#000000" },
+        "groupName": "Drug",
+        "shape": "diamond"
+      },
+      "connectorNode": {
+        "type": "protein",
+        "color": "#d29034",
+        "font": { "color": "#f0f0f0" },
+        "groupName": "Connector Proteins",
+        "shape": "circle"
+      }
+    },
+    "edgeGroups": {
+      "default": { "color": "#000000", "groupName": "default edge" }
+    }
+  },
+  "network": {
+    "nodes": [
+        { "id": "ATG16L1", "group": "protein", "label": "ATG16L1" },
+        { "id": "ICAM1", "group": "protein", "label": "ICAM1" },
+        { "id": "TNF", "group": "protein", "label": "TNF" },
+        { "id": "SFRP2", "group": "protein", "label": "SFRP2" },
+        { "id": "APC2", "group": "protein", "label": "APC2" },
+        { "id": "IL10", "group": "protein", "label": "IL10" },
+        { "id": "CUL2", "group": "protein", "label": "CUL2" },
+        { "id": "SFRP1", "group": "protein", "label": "SFRP1" },
+        { "id": "TNFSF15", "group": "protein", "label": "TNFSF15" },
+        { "id": "ITGA4", "group": "protein", "label": "ITGA4" },
+        { "id": "DEFA5", "group": "protein", "label": "DEFA5" },
+        { "id": "MUC19", "group": "protein", "label": "MUC19" },
+        { "id": "SLAMF8", "group": "protein", "label": "SLAMF8" },
+        { "id": "APC", "group": "protein", "label": "APC" },
+        { "id": "IL6", "group": "protein", "label": "IL6" },
+        { "id": "INAVA", "group": "protein", "label": "INAVA" },
+        { "id": "CARD9", "group": "protein", "label": "CARD9" },
+        { "id": "ITGB8", "group": "protein", "label": "ITGB8" },
+        { "id": "IL23R", "group": "protein", "label": "IL23R" },
+        { "id": "NOD2", "group": "protein", "label": "NOD2" },
+        { "id": "RASSF1", "group": "protein", "label": "RASSF1" },
+        { "id": "SLC11A1", "group": "protein", "label": "SLC11A1" },
+        { "id": "IL18RAP", "group": "protein", "label": "IL18RAP" },
+        { "id": "TGFB1", "group": "protein", "label": "TGFB1" },
+        { "id": "IRGM", "group": "protein", "label": "IRGM" },
+        { "id": "PLCG2", "group": "protein", "label": "PLCG2" },
+        { "id": "PTPN22", "group": "protein", "label": "PTPN22" },
+        { "id": "PTGS2", "group": "protein", "label": "PTGS2" },
+        { "id": "VNN1", "group": "protein", "label": "VNN1" },
+        { "id": "ITGAL", "group": "protein", "label": "ITGAL" }
+    ],
+    "edges": []
+  },
+  "styles": {
+    "--drgstn-primary": "#4285F4",
+    "--drgstn-secondary": "#303030",
+    "--drgstn-success": "#48C774",
+    "--drgstn-warning": "#f5f5f5",
+    "--drgstn-danger": "#ff2744",
+    "--drgstn-background": "#ffffff",
+    "--drgstn-panel": "#ededed",
+    "--drgstn-info": "#61c43d",
+    "--drgstn-text-primary": "#151515",
+    "--drgstn-text-secondary": "#ebecf0",
+    "--drgstn-border": "rgba(0, 0, 0, 0.2)",
+    "--drgstn-tooltip": "rgba(74,74,74,0.9)",
+    "--drgstn-panel-secondary": "#f5f5f5",
+    "--drgstn-height": "600px",
+    "--drgstn-font-family": "Helvetica Neue, sans-serif"
+  }
+}

src/app/pages/playground/playground.component.html

@@ -21,6 +21,7 @@
       <app-examples (activateExampleEvent)="activateExamplePlayground($event)"></app-examples>
       <h2>Drugst.One Plugin</h2>
       <app-drugstonepanel
+        *ngIf="config && groups && network"
         class="p-1"
         [id]="id"
         [config]="config"

src/app/pages/playground/playground.component.ts

@@ -174,16 +174,21 @@ export class PlaygroundComponent implements OnInit {
     }
 
     public activateExamplePlayground(example: ExampleConfig) {
-        this.network.edges = [];
-        this.network.nodes = [];
+        // this.network.edges = [];
+        // this.network.nodes = [];
+        this.network = undefined;
 
-        this.groups = example.groups;
+        this.changeGroup(example.groups);
+        this.changeConfig(example.config);
+        // this.groups = example.groups;
         this.changeStyle(example.styles);
 
+        // drugstone is removed with *ngIf until network is set
+        // start in next cycle to avoid race conditions
         setTimeout(() => {
-            this.config = example.config;
             this.network = example.network;
-        }, 500);
+            this.updateCode()
+        });
     }
 
 }