updated drgst.one example cases

src/app/app.module.ts

@@ -125,7 +125,7 @@ import { GitLinkComponent } from './pages/doc/elements/git-link/git-link.compone
 import { PythonPackageComponent } from './pages/doc/content/other/python-package/python-package.component';
 import { FromScratchComponent } from './pages/doc/content/start/from-scratch/from-scratch.component';
 import { PrivacyPolicyComponent } from './pages/doc/content/other/privacy-policy/privacy-policy.component';
-import { ExamplesComponent } from './components/playground/examples/examples/examples.component';
+import { ExamplesComponent } from './components/playground/examples/examples.component';
 
 
 @NgModule({

src/app/components/playground/examples/config/default.json

+{
+  "label": "Default",
+  "value": "default",
+  "config": {
+    "identifier": "symbol",
+    "title": "Breast cancer example network",
+    "nodeShadow": true,
+    "edgeShadow": false,
+    "autofillEdges": false
+  },
+  "groups": {
+  "nodeGroups": {
+    "important": {
+      "type": "gene",
+      "color": "#ff881f",
+      "font": {
+        "color": "#000000"
+      },
+      "groupName": "Important Gene",
+      "shape": "star"
+    },
+    "gene": {
+      "type": "gene",
+      "color": "#4da300",
+      "font": {
+        "color": "#f0f0f0"
+      },
+      "groupName": "Gene",
+      "shape": "circle"
+    },
+    "foundDrug": {
+      "type": "drug",
+      "color": "#F12590",
+      "font": {
+        "color": "#000000"
+      },
+      "groupName": "Drug",
+      "shape": "diamond"
+    }
+  },
+  "edgeGroups": {
+    "default": {
+      "color": "#000000",
+      "groupName": "default edge"
+    }
+  }
+},
+  "network": {
+    "nodes": [{"id":"CFTR","group":"gene","label":"CFTR"},{"id":"TGFB1","group":"gene","label":"TGFB1"},{"id":"TNFRSF1A","group":"gene","label":"TNFRSF1A"},{"id":"FCGR2A","group":"gene","label":"FCGR2A"},{"id":"ENG","group":"gene","label":"ENG"},{"id":"DCTN4","group":"gene","label":"DCTN4"},{"id":"CLCA4","group":"gene","label":"CLCA4"},{"id":"STX1A","group":"gene","label":"STX1A"},{"id":"SCNN1G","group":"gene","label":"SCNN1G"},{"id":"SCNN1A","group":"gene","label":"SCNN1A"},{"id":"SCNN1B","group":"gene","label":"SCNN1B"}],
+    "edges": [{"from": "DCTN4", "to": "CFTR"},
+      {"from": "STX1A", "to": "SCNN1B", "group": "default"},
+      {"from": "SCNN1A", "to": "SCNN1G", "group": "default"},
+      {"from": "SCNN1B", "to": "SCNN1G", "group": "default"}
+    ]
+  }
+,
+  "styles":{
+    "--drgstn-primary": "#347eee",
+    "--drgstn-secondary": "#2e42f2",
+    "--drgstn-success": "#48C774",
+    "--drgstn-warning": "#ffdd00",
+    "--drgstn-danger": "#ff2744",
+    "--drgstn-background": "#f8f9fa",
+    "--drgstn-panel": "#ffffff",
+    "--drgstn-info": "#61c43d",
+    "--drgstn-text-primary": "#151515",
+    "--drgstn-text-secondary": "#eeeeee",
+    "--drgstn-border": "rgba(0, 0, 0, 0.2)",
+    "--drgstn-tooltip": "rgba(74,74,74,0.9)",
+    "--drgstn-panel-secondary": "#FFFFFF",
+    "--drgstn-height": "600px",
+    "--drgstn-font-family":"Helvetica Neue, sans-serif"
+  }
+}

src/app/components/playground/examples/examples/examples.component.ts → src/app/components/playground/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 './config/cystic_fibrosis.json';
 // @ts-ignore
-import ibd_example from './examples/inflammatory_bowel_disease.json';
+import ibd_example from './config/inflammatory_bowel_disease.json';
+// @ts-ignore
+import default_example from './config/default.json';
 
 @Component({
   selector: 'app-examples',
@@ -20,13 +22,12 @@ export class ExamplesComponent implements OnInit {
   @Output() activateExampleEvent = new EventEmitter<ExampleConfig>();
 
   public drugstOneExamples: ExampleConfig[] = [
-    {label: 'None', value: 'none', config: {}, groups: {}, network: {}, styles: {}},
+    default_example,
     cystic_fibrosis_example,
     ibd_example
   ];
 
   public changeDrugstOneExample($event: string) {
-    if ($event === 'none') return
     for (const example of this.drugstOneExamples) {
       if (example.value === $event) {
         this.activateExample(example);

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

@@ -5,7 +5,8 @@ import config from '../../../exampleConfig.json';
 import groups from '../../../exampleGroups.json';
 // @ts-ignore
 import network from '../../../exampleNetwork.json';
-
+// @ts-ignore
+import default_example from '../../components/playground/examples/config/default.json';
 // @ts-ignore
 import * as merge from 'lodash/fp/merge';
 import { ExampleConfig } from 'src/interfaces';
@@ -39,6 +40,7 @@ export class PlaygroundComponent implements OnInit {
     }
 
     ngOnInit(): void {
+        this.activateExamplePlayground(default_example)
         this.updateCode();
     }
 

src/app/pages/standalone/standalone/standalone.component.html

@@ -3,7 +3,10 @@
         <div class="col-lg-12">
             <h1>Standalone</h1>
             <p>
-        Use Drugst.One as if it was integrated on your one website! Below you have the Drugst.One app based on the configuration below. This page can be the target of URL based requests to visualize specific genes. You can read more about how to create such URLs <a class="link-primary" (click)="switchToDoc('standalone')">here</a>.
+                Use Drugst.One as if it was integrated on your one website! Below you have the Drugst.One app based on
+                the configuration below. This page can be the target of URL based requests to visualize specific genes.
+                You can read more about how to create such URLs <a class="link-primary"
+                                                                   (click)="switchToDoc('standalone')">here</a>.
             </p>
         </div>
     </div>
@@ -38,12 +41,12 @@
                     aria-labelledby="panelspanelsDrugstone"
             >
                 <div class="accordion-body" #standalonePlugin>
-                    <!-- <app-drugstonepanel
+                    <app-drugstonepanel
                             id="drugstone_standalone_plugin"
                             [config]="config"
                             [network]="network"
                             [groups]="groups"
-                    ></app-drugstonepanel> -->
+                    ></app-drugstonepanel>
                 </div>
             </div>
         </div>