From 9a0b5befa5327e76f1b587625c16accc4d4e6a67 Mon Sep 17 00:00:00 2001
From: AndiMajore <andi.majore@googlemail.com>
Date: Fri, 14 Apr 2023 14:32:33 +0200
Subject: [PATCH] updated drgst.one example cases

---
 src/app/app.module.ts                         |  2 +-
 .../examples => config}/cystic_fibrosis.json  |  0
 .../playground/examples/config/default.json   | 74 +++++++++++++++++++
 .../inflammatory_bowel_disease.json           |  0
 .../{examples => }/examples.component.html    |  0
 .../{examples => }/examples.component.scss    |  0
 .../{examples => }/examples.component.spec.ts |  0
 .../{examples => }/examples.component.ts      |  9 ++-
 .../pages/playground/playground.component.ts  |  4 +-
 .../standalone/standalone.component.html      | 51 +++++++------
 10 files changed, 110 insertions(+), 30 deletions(-)
 rename src/app/components/playground/examples/{examples/examples => config}/cystic_fibrosis.json (100%)
 create mode 100644 src/app/components/playground/examples/config/default.json
 rename src/app/components/playground/examples/{examples/examples => config}/inflammatory_bowel_disease.json (100%)
 rename src/app/components/playground/examples/{examples => }/examples.component.html (100%)
 rename src/app/components/playground/examples/{examples => }/examples.component.scss (100%)
 rename src/app/components/playground/examples/{examples => }/examples.component.spec.ts (100%)
 rename src/app/components/playground/examples/{examples => }/examples.component.ts (76%)

diff --git a/src/app/app.module.ts b/src/app/app.module.ts
index 68b9f15..3b01556 100644
--- a/src/app/app.module.ts
+++ b/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({
diff --git a/src/app/components/playground/examples/examples/examples/cystic_fibrosis.json b/src/app/components/playground/examples/config/cystic_fibrosis.json
similarity index 100%
rename from src/app/components/playground/examples/examples/examples/cystic_fibrosis.json
rename to src/app/components/playground/examples/config/cystic_fibrosis.json
diff --git a/src/app/components/playground/examples/config/default.json b/src/app/components/playground/examples/config/default.json
new file mode 100644
index 0000000..29d7d94
--- /dev/null
+++ b/src/app/components/playground/examples/config/default.json
@@ -0,0 +1,74 @@
+{
+  "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"
+  }
+}
diff --git a/src/app/components/playground/examples/examples/examples/inflammatory_bowel_disease.json b/src/app/components/playground/examples/config/inflammatory_bowel_disease.json
similarity index 100%
rename from src/app/components/playground/examples/examples/examples/inflammatory_bowel_disease.json
rename to src/app/components/playground/examples/config/inflammatory_bowel_disease.json
diff --git a/src/app/components/playground/examples/examples/examples.component.html b/src/app/components/playground/examples/examples.component.html
similarity index 100%
rename from src/app/components/playground/examples/examples/examples.component.html
rename to src/app/components/playground/examples/examples.component.html
diff --git a/src/app/components/playground/examples/examples/examples.component.scss b/src/app/components/playground/examples/examples.component.scss
similarity index 100%
rename from src/app/components/playground/examples/examples/examples.component.scss
rename to src/app/components/playground/examples/examples.component.scss
diff --git a/src/app/components/playground/examples/examples/examples.component.spec.ts b/src/app/components/playground/examples/examples.component.spec.ts
similarity index 100%
rename from src/app/components/playground/examples/examples/examples.component.spec.ts
rename to src/app/components/playground/examples/examples.component.spec.ts
diff --git a/src/app/components/playground/examples/examples/examples.component.ts b/src/app/components/playground/examples/examples.component.ts
similarity index 76%
rename from src/app/components/playground/examples/examples/examples.component.ts
rename to src/app/components/playground/examples/examples.component.ts
index a50cc17..37c2c17 100644
--- a/src/app/components/playground/examples/examples/examples.component.ts
+++ b/src/app/components/playground/examples/examples.component.ts
@@ -1,9 +1,11 @@
 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);
diff --git a/src/app/pages/playground/playground.component.ts b/src/app/pages/playground/playground.component.ts
index 752abc5..94f8a50 100644
--- a/src/app/pages/playground/playground.component.ts
+++ b/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();
     }
 
diff --git a/src/app/pages/standalone/standalone/standalone.component.html b/src/app/pages/standalone/standalone/standalone.component.html
index 06369eb..824cab7 100644
--- a/src/app/pages/standalone/standalone/standalone.component.html
+++ b/src/app/pages/standalone/standalone/standalone.component.html
@@ -1,30 +1,33 @@
 <div class="container">
-  <div class="row">
-    <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>.
-      </p>
+    <div class="row">
+        <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>.
+            </p>
+        </div>
     </div>
-  </div>
-  <div class="accordion" id="accordionPanelsStandalone">
-    <div
-      class="accordion-item"
-      [ngClass]="{
+    <div class="accordion" id="accordionPanelsStandalone">
+        <div
+                class="accordion-item"
+                [ngClass]="{
         'text-light bg-dark': themeService.theme === 'theme-dark',
         'text-dark bg-light': themeService.theme === 'theme-light'
       }"
-    >
-      <h2 class="accordion-header" id="panelsDrugstone">
-        <button
-          #drugstoneApp
-          class="accordion-button"
-          type="button"
-          data-bs-toggle="collapse"
-          data-bs-target="#panelsStayOpen-collapseThree"
-          aria-expanded="true"
-          aria-controls="panelsStayOpen-collapseThree"
-          [ngClass]="{
+        >
+            <h2 class="accordion-header" id="panelsDrugstone">
+                <button
+                    #drugstoneApp
+                    class="accordion-button"
+                    type="button"
+                    data-bs-toggle="collapse"
+                    data-bs-target="#panelsStayOpen-collapseThree"
+                    aria-expanded="true"
+                    aria-controls="panelsStayOpen-collapseThree"
+                    [ngClass]="{
             'text-light bg-dark': themeService.theme === 'theme-dark',
             'text-dark bg-light': themeService.theme === 'theme-light'
           }"
@@ -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>
-- 
GitLab