diff --git a/src/app/app.module.ts b/src/app/app.module.ts index 68b9f15c589edb1a06f8d75aa717d40920a41929..3b01556c6f4a59b29212458686e708b8c00a0800 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 0000000000000000000000000000000000000000..29d7d94910a17d146366edcbd1a53773a0374b6c --- /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 a50cc173c8d67a10890e153a14625ffb247f424c..37c2c172da0c4eae04bf82e3bfb57749ee86d2da 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 752abc516bef82f8612e8b06d5fa0e67f5e5ce07..94f8a5016a96873e3ea76b031fee0896f8d8d749 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 06369ebd0bfc44460f18baff954b51d6862eb24f..824cab7ff92843f9768ec1aa73fb044da6738905 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>