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