diff --git a/src/app/pages/doc/content/standalone/standalone-buttons/standalone-buttons.component.html b/src/app/pages/doc/content/standalone/standalone-buttons/standalone-buttons.component.html index 725d74324acaed50fbed25370be89e99015ea4c5..b6801a02a41b9bfae689d1d6548d9e50661ad9f4 100644 --- a/src/app/pages/doc/content/standalone/standalone-buttons/standalone-buttons.component.html +++ b/src/app/pages/doc/content/standalone/standalone-buttons/standalone-buttons.component.html @@ -22,37 +22,37 @@ <div> <a class="drugstone-button drugstone-blue" - href="https://drugst.one?nodes=PTEN,TP53" + [href]="buttonURL" target="_blank" >Drugst.One</a > <a class="drugstone-button drugstone-green" - href="https://drugst.one?nodes=PTEN,TP53" + [href]="buttonURL" target="_blank" >Drugst.One</a > <a class="drugstone-button drugstone-yellow" - href="https://drugst.one?nodes=PTEN,TP53" + [href]="buttonURL" target="_blank" >Drugst.One</a > <a class="drugstone-button drugstone-red" - href="https://drugst.one?nodes=PTEN,TP53" + [href]="buttonURL" target="_blank" >Drugst.One</a > <a class="drugstone-button drugstone-white" - href="https://drugst.one?nodes=PTEN,TP53" + [href]="buttonURL" target="_blank" >Drugst.One</a > <a class="drugstone-button drugstone-grey" - href="https://drugst.one?nodes=PTEN,TP53" + [href]="buttonURL" target="_blank" >Drugst.One</a > @@ -61,12 +61,12 @@ <app-code lang="html" code=' -<a class="drugstone-button drugstone-blue" href="https://drugst.one?nodes=PTEN,TP53" target="_blank" >Drugst.One</a> -<a class="drugstone-button drugstone-green" href="https://drugst.one?nodes=PTEN,TP53" target="_blank" >Drugst.One</a> -<a class="drugstone-button drugstone-yellow" href="https://drugst.one?nodes=PTEN,TP53" target="_blank" >Drugst.One</a> -<a class="drugstone-button drugstone-red" href="https://drugst.one?nodes=PTEN,TP53" target="_blank" >Drugst.One</a> -<a class="drugstone-button drugstone-white" href="https://drugst.one?nodes=PTEN,TP53" target="_blank" >Drugst.One</a> -<a class="drugstone-button drugstone-grey" href="https://drugst.one?nodes=PTEN,TP53" target="_blank" >Drugst.One</a> +<a class="drugstone-button drugstone-blue" href="{{buttonURL}}" target="_blank" >Drugst.One</a> +<a class="drugstone-button drugstone-green" [href]="{{buttonURL}}" target="_blank" >Drugst.One</a> +<a class="drugstone-button drugstone-yellow" [href]="{{buttonURL}}" target="_blank" >Drugst.One</a> +<a class="drugstone-button drugstone-red" [href]="{{buttonURL}}" target="_blank" >Drugst.One</a> +<a class="drugstone-button drugstone-white" [href]="{{buttonURL}}" target="_blank" >Drugst.One</a> +<a class="drugstone-button drugstone-grey" [href]="{{buttonURL}}" target="_blank" >Drugst.One</a> ' ></app-code> @@ -74,37 +74,37 @@ <div> <a class="drugstone-button drugstone-darkblue" - href="https://drugst.one?nodes=PTEN,TP53" + [href]="buttonURL" target="_blank" >Drugst.One</a > <a class="drugstone-button drugstone-darkgreen" - href="https://drugst.one?nodes=PTEN,TP53" + [href]="buttonURL" target="_blank" >Drugst.One</a > <a class="drugstone-button drugstone-darkyellow" - href="https://drugst.one?nodes=PTEN,TP53" + [href]="buttonURL" target="_blank" >Drugst.One</a > <a class="drugstone-button drugstone-darkred" - href="https://drugst.one?nodes=PTEN,TP53" + [href]="buttonURL" target="_blank" >Drugst.One</a > <a class="drugstone-button drugstone-darkgrey" - href="https://drugst.one?nodes=PTEN,TP53" + [href]="buttonURL" target="_blank" >Drugst.One</a > <a class="drugstone-button drugstone-black" - href="https://drugst.one?nodes=PTEN,TP53" + [href]="buttonURL" target="_blank" >Drugst.One</a > @@ -113,12 +113,12 @@ <app-code lang="html" code=' -<a class="drugstone-button drugstone-darkblue" href="https://drugst.one?nodes=PTEN,TP53" target="_blank">Drugst.One</a> -<a class="drugstone-button drugstone-darkgreen" href="https://drugst.one?nodes=PTEN,TP53" target="_blank">Drugst.One</a> -<a class="drugstone-button drugstone-darkyellow" href="https://drugst.one?nodes=PTEN,TP53" target="_blank" >Drugst.One</a> -<a class="drugstone-button drugstone-darkred" href="https://drugst.one?nodes=PTEN,TP53" target="_blank" >Drugst.One</a> -<a class="drugstone-button drugstone-darkgrey" href="https://drugst.one?nodes=PTEN,TP53" target="_blank" >Drugst.One</a> -<a class="drugstone-button drugstone-black" href="https://drugst.one?nodes=PTEN,TP53" target="_blank" >Drugst.One</a> +<a class="drugstone-button drugstone-darkblue" [href]="{{buttonURL}}" target="_blank">Drugst.One</a> +<a class="drugstone-button drugstone-darkgreen" [href]="{{buttonURL}}" target="_blank">Drugst.One</a> +<a class="drugstone-button drugstone-darkyellow" [href]="{{buttonURL}}" target="_blank" >Drugst.One</a> +<a class="drugstone-button drugstone-darkred" [href]="{{buttonURL}}" target="_blank" >Drugst.One</a> +<a class="drugstone-button drugstone-darkgrey" [href]="{{buttonURL}}" target="_blank" >Drugst.One</a> +<a class="drugstone-button drugstone-black" [href]="{{buttonURL}}" target="_blank" >Drugst.One</a> ' ></app-code> @@ -127,37 +127,37 @@ <div> <a class="drugstone-button drugstone-outlined-blue" - href="https://drugst.one?nodes=PTEN,TP53" + [href]="buttonURL" target="_blank" >Drugst.One</a > <a class="drugstone-button drugstone-outlined-green" - href="https://drugst.one?nodes=PTEN,TP53" + [href]="buttonURL" target="_blank" >Drugst.One</a > <a class="drugstone-button drugstone-outlined-yellow" - href="https://drugst.one?nodes=PTEN,TP53" + [href]="buttonURL" target="_blank" >Drugst.One</a > <a class="drugstone-button drugstone-outlined-red" - href="https://drugst.one?nodes=PTEN,TP53" + [href]="buttonURL" target="_blank" >Drugst.One</a > <a class="drugstone-button drugstone-outlined-white" - href="https://drugst.one?nodes=PTEN,TP53" + [href]="buttonURL" target="_blank" >Drugst.One</a > <a class="drugstone-button drugstone-outlined-black" - href="https://drugst.one?nodes=PTEN,TP53" + [href]="buttonURL" target="_blank" >Drugst.One</a > @@ -166,11 +166,11 @@ <app-code lang="html" code=' -<a class="drugstone-button drugstone-outlined-blue" href="https://drugst.one?nodes=PTEN,TP53" target="_blank" >Drugst.One</a> -<a class="drugstone-button drugstone-outlined-green" href="https://drugst.one?nodes=PTEN,TP53" target="_blank" >Drugst.One</a> -<a class="drugstone-button drugstone-outlined-yellow" href="https://drugst.one?nodes=PTEN,TP53" target="_blank" >Drugst.One</a> -<a class="drugstone-button drugstone-outlined-red" href="https://drugst.one?nodes=PTEN,TP53" target="_blank" >Drugst.One</a> -<a class="drugstone-button drugstone-outlined-white" href="https://drugst.one?nodes=PTEN,TP53" target="_blank" >Drugst.One</a> -<a class="drugstone-button drugstone-outlined-black" href="https://drugst.one?nodes=PTEN,TP53" target="_blank" >Drugst.One</a> +<a class="drugstone-button drugstone-outlined-blue" [href]="{{buttonURL}}" target="_blank" >Drugst.One</a> +<a class="drugstone-button drugstone-outlined-green" [href]="{{buttonURL}}" target="_blank" >Drugst.One</a> +<a class="drugstone-button drugstone-outlined-yellow" [href]="{{buttonURL}}" target="_blank" >Drugst.One</a> +<a class="drugstone-button drugstone-outlined-red" [href]="{{buttonURL}}" target="_blank" >Drugst.One</a> +<a class="drugstone-button drugstone-outlined-white" [href]="{{buttonURL}}" target="_blank" >Drugst.One</a> +<a class="drugstone-button drugstone-outlined-black" [href]="{{buttonURL}}" target="_blank" >Drugst.One</a> ' ></app-code> diff --git a/src/app/pages/doc/content/standalone/standalone-buttons/standalone-buttons.component.ts b/src/app/pages/doc/content/standalone/standalone-buttons/standalone-buttons.component.ts index b631ff8612fdf105a6522d491c7a59551ab4c233..6bb90c6d0780b79b7630cdf33a3bc3c64a0f4b3a 100644 --- a/src/app/pages/doc/content/standalone/standalone-buttons/standalone-buttons.component.ts +++ b/src/app/pages/doc/content/standalone/standalone-buttons/standalone-buttons.component.ts @@ -6,7 +6,7 @@ import { Component, OnInit } from '@angular/core'; styleUrls: ['./standalone-buttons.component.scss'] }) export class StandaloneButtonsComponent implements OnInit { - + public buttonURL = window.location.origin+"/standalone?nodes=PTEN,TP53,BRCA2&autofillEdges=true&activateNetworkMenuButtonAdjacentDrugs=true&interactionDrugProtein=NeDRex&licensedDatasets=true" constructor() { } ngOnInit(): void { diff --git a/src/app/pages/doc/content/standalone/standalone-url/standalone-url.component.ts b/src/app/pages/doc/content/standalone/standalone-url/standalone-url.component.ts index 8ed6b0a5b06d282b744890ce2ed488860c51e183..83b53f5fd941bff2a86750e5066b38d63081a02c 100644 --- a/src/app/pages/doc/content/standalone/standalone-url/standalone-url.component.ts +++ b/src/app/pages/doc/content/standalone/standalone-url/standalone-url.component.ts @@ -24,25 +24,61 @@ export class StandaloneUrlComponent implements OnInit { name: "identifier", type: "string", default: "symbol", - description: "Can be one of the supported identifier types to map gene names. Options are: \"symbol\" (gene Symbol), \"uniprot\" (Uniprot accession number), \"ensg\" (Ensembl Gene ID)." + description: "Can be one of the supported identifier types to map gene names. Options are: \"symbol\" (gene Symbol), \"uniprot\" (Uniprot accession number), \"ensg\" (Ensembl Gene ID), \"entrez\" (Entrez ID)." + }, + { + name: "licensedDatasets", + type: "boolean", + default: "false", + description: "Use licensed versions of selected datasets if these should exist." + }, + { + name: "autofillEdges", + type: "boolean", + default: "false", + description: "Enable to autofill protein interaction edges." }, { name: "interactionProteinProtein", type: "string", - default: "STRING", - description: "The database which should be used to fetch the protein-protein interactions. Possible values are \"STRING\", \"BioGRID\", \"APID\"." + default: "NeDRex", + description: "The database which should be used to fetch the protein-protein interactions. Possible values are \"NeDRex\", \"IID\", \"IntAct\", \"STRING\", \"BioGRID\", \"APID\". For more information check Implementation > Data" }, { name: "interactionDrugProtein", type: "string", - default: "DrugBank", - description: "The drug database which should be used to fetch the drug-protein interactions. Possible values are \"DrugBank\", \"Chembl\", \"DGIdb\"." + default: "NeDRex", + description: "The drug database which should be used to fetch the drug-protein interactions. Possible values are \"NeDRex\", \"DrugBank\", \"DrugCentral\", \"ChEMBL\", \"DGIdb\". For more information check Implementation > Data" }, { - name: "autofillEdges", + name: "associatedProteinDisorder", + type: "string", + default: "NeDRex", + description: "The database which should be used to fetch protein-disorder association edges. Possible values are \"NeDRex\", \"DisGeNET\", \"OMIM\". For more information check Implementation > Data" + }, + { + name: "indicationDrugDisorder", + type: "string", + default: "NeDRex", + description: "The database which should be used to fetch drug-disorder indication edges. Possible values are \"NeDRex\", \"CTD\", \"DrugCentral\", \"DrugBank\". For more information check Implementation > Data" + }, + { + name: "activateNetworkMenuButtonAdjacentDrugs", + type: "boolean", + default: "false", + description: "Enable to automatically show drug interacting with proteins." + }, + { + name: "activateNetworkMenuButtonAdjacentDisorders", + type: "boolean", + default: "false", + description: "Enable to automatically show disorders linked to shown proteins." + }, + { + name: "activateNetworkMenuButtonAdjacentDisorderDrugs", type: "boolean", - default: "true", - description: "Switch to activate or deactivate the loading of known interaction edges from the selected interaction database." + default: "false", + description: "Enable to automatically show drugs for shown disorders." }, ] diff --git a/src/app/pages/standalone/standalone/standalone.component.html b/src/app/pages/standalone/standalone/standalone.component.html index 5a8c720d74ac0da6f9e30bfc8baccbcfa24136d5..c9f591e0bb8724f3f493d11463aca5945c802571 100644 --- a/src/app/pages/standalone/standalone/standalone.component.html +++ b/src/app/pages/standalone/standalone/standalone.component.html @@ -1,193 +1,197 @@ <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 collapsed" - 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 collapsed" + 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' }" - > - <i class="fas fa-capsules"></i> Drugst.One - </button> - </h2> - <div - id="panelsStayOpen-collapseThree" - class="accordion-collapse collapse show" - aria-labelledby="panelspanelsDrugstone" - > - <div class="accordion-body" #standalonePlugin> - <app-drugstonepanel - id="drugstone_standalone_plugin" - [config]="config" - [network]="network" - ></app-drugstonepanel> + > + <i class="fas fa-capsules"></i> Drugst.One + </button> + </h2> + <div + id="panelsStayOpen-collapseThree" + class="accordion-collapse collapse show" + aria-labelledby="panelspanelsDrugstone" + > + <div class="accordion-body" #standalonePlugin> + <app-drugstonepanel + id="drugstone_standalone_plugin" + [config]="config" + [network]="network" + [groups]="groups" + ></app-drugstonepanel> + </div> + </div> </div> - </div> - </div> - <div - class="accordion-item" - [ngClass]="{ + <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="panelsNetworkInput"> - <button - #networkInput - class="accordion-button" - type="button" - data-bs-toggle="collapse" - data-bs-target="#panelsStayOpen-collapseOne" - aria-expanded="true" - aria-controls="panelsStayOpen-collapseOne" - [ngClass]="{ + > + <h2 class="accordion-header" id="panelsNetworkInput"> + <button + #networkInput + class="accordion-button" + type="button" + data-bs-toggle="collapse" + data-bs-target="#panelsStayOpen-collapseOne" + aria-expanded="true" + aria-controls="panelsStayOpen-collapseOne" + [ngClass]="{ 'text-light bg-dark': themeService.theme === 'theme-dark', 'text-dark bg-light': themeService.theme === 'theme-light' }" - > - <i class="far fa-list-alt"></i> Network Input - </button> - </h2> - <div - id="panelsStayOpen-collapseOne" - class="accordion-collapse collapse show" - aria-labelledby="panelsNetworkInput" - > - <div class="accordion-body"> - <app-dropdown - label="Node Source" - [items]="dataLists.identifierList" - tooltip="Select the type of source IDs you use for your gene/protein nodes. This is necessary to correctly map the entries and to provide additional information. Additional sources may be included in the future or upon request." - [model]="getConfig('identifier')" - (onChange)="changeConfig('identifier', $event)" - ></app-dropdown> - <div class="row p-2"> - <div class="col-md-6 border-end"> - <h3>Nodes</h3> - <textarea - class="w-100" - pInputTextarea - [(ngModel)]="rawNodes" - placeholder="Enter a list of node ids separated by: tab, newline, comma, semicolon or space! E.g.: PTEN, TP53 " - [autoResize]="false" - ></textarea> - </div> - <div class="col-md-6"> - <h3>Edges</h3> - <div> + > + <i class="far fa-list-alt"></i> Network Input + </button> + </h2> + <div + id="panelsStayOpen-collapseOne" + class="accordion-collapse collapse show" + aria-labelledby="panelsNetworkInput" + > + <div class="accordion-body"> + <app-dropdown + label="Node Source" + [items]="dataLists.identifierList" + tooltip="Select the type of source IDs you use for your gene/protein nodes. This is necessary to correctly map the entries and to provide additional information. Additional sources may be included in the future or upon request." + [model]="getConfig('identifier')" + (onChange)="changeConfig('identifier', $event)" + ></app-dropdown> + <div class="row p-2"> + <div class="col-md-6 border-end"> + <h3>Nodes</h3> + <textarea + class="w-100" + pInputTextarea + [(ngModel)]="rawNodes" + placeholder="Enter a list of node ids separated by: tab, newline, comma, semicolon or space! E.g.: PTEN, TP53 " + [autoResize]="false" + ></textarea> + </div> + <div class="col-md-6"> + <h3>Edges</h3> + <div> <textarea - class="w-100" - pInputTextarea - [(ngModel)]="rawEdges" - placeholder="Enter an edge list, so pairs of nodeIDs separated by: tab, comma, semicolon or space and each pair separated by newline (\n)! E.g.: PTEN, TP53\nPTEN, BRCA1 " - [autoResize]="false" + class="w-100" + pInputTextarea + [(ngModel)]="rawEdges" + placeholder="Enter an edge list, so pairs of nodeIDs separated by: tab, comma, semicolon or space and each pair separated by newline (\n)! E.g.: PTEN, TP53\nPTEN, BRCA1 " + [autoResize]="false" ></textarea> - </div> - </div> - </div> - <div class="row"> - <div class="col-12 text-center p-2"> - <p-button - label="Load Network" - icon="fas fa-long-arrow-alt-right" - styleClass="p-button-sm p-button-primary" - (onClick)="setNetwork()" - ></p-button> + </div> + </div> + </div> + <div class="row"> + <div class="col-12 text-center p-2"> + <p-button + label="Load Network" + icon="fas fa-long-arrow-alt-right" + styleClass="p-button-sm p-button-primary" + (onClick)="setNetwork()" + ></p-button> + </div> + </div> + </div> </div> - </div> </div> - </div> - </div> - <div - class="accordion-item" - [ngClass]="{ + <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="panelsAdvancedSettings"> - <button - #advancedSettings - class="accordion-button" - type="button" - data-bs-toggle="collapse" - data-bs-target="#panelsStayOpen-collapseTwo" - aria-expanded="true" - aria-controls="panelsStayOpen-collapseTwo" - [ngClass]="{ + > + <h2 class="accordion-header" id="panelsAdvancedSettings"> + <button + #advancedSettings + class="accordion-button" + type="button" + data-bs-toggle="collapse" + data-bs-target="#panelsStayOpen-collapseTwo" + aria-expanded="true" + aria-controls="panelsStayOpen-collapseTwo" + [ngClass]="{ 'text-light bg-dark': themeService.theme === 'theme-dark', 'text-dark bg-light': themeService.theme === 'theme-light' }" - > - <i class="fas fa-cogs"></i> Advanced Settings - </button> - </h2> - <div - id="panelsStayOpen-collapseTwo" - class="accordion-collapse collapse show" - aria-labelledby="panelsAdvancedSettings" - > - <div class="accordion-body"> - <app-dropdown - label="Protein-Protein Interaction DB" - [items]="dataLists.protProtInterList" - [model]="getConfig('interactionProteinProtein')" - tooltip="Select the dataset of protein-protein information that is later used in functions like 'Find Drug Targets' and 'Run Task X'." - (onChange)="changeDataset('interactionProteinProtein', $event)" - ></app-dropdown> - <app-dropdown - label="Drug-Protein Interaction DB" - [items]="dataLists.drugProtInterList" - [model]="getConfig('interactionDrugProtein')" - tooltip="Select the dataset of drug-protein information that is later used in functions like 'Find Drug Targets'." - (onChange)="changeDataset('interactionDrugProtein', $event)" - ></app-dropdown> - <app-dropdown - label="Protein-Disease Association DB" - [items]="dataLists.protDisList" - [model]="getConfig('associatedProteinDisorder')" - tooltip="Select the dataset of protein-disease information that is later used in functions like 'Show disorders adjacent to displayed proteins'." - (onChange)="changeDataset('associatedProteinDisorder', $event)" - ></app-dropdown> - <app-dropdown - label="Drug-Disease Indication DB" - [items]="dataLists.drugDisList" - [model]="getConfig('indicationDrugDisorder')" - tooltip="Select the dataset of drug-disease information that is later used in functions like 'Show disorders adjacent to displayed drugs'." - (onChange)="changeDataset('indicationDrugDisorder', $event)" - ></app-dropdown> - <app-switch - label="Autofill interactions" - [model]=" + > + <i class="fas fa-cogs"></i> Advanced Settings + </button> + </h2> + <div + id="panelsStayOpen-collapseTwo" + class="accordion-collapse collapse show" + aria-labelledby="panelsAdvancedSettings" + > + <div class="accordion-body"> + <app-dropdown + label="Protein-Protein Interaction DB" + [items]="dataLists.protProtInterList" + [model]="getConfig('interactionProteinProtein')" + tooltip="Select the dataset of protein-protein information that is later used in functions like 'Find Drug Targets' and 'Run Task X'." + (onChange)="changeDataset('interactionProteinProtein', $event)" + ></app-dropdown> + <app-dropdown + label="Drug-Protein Interaction DB" + [items]="dataLists.drugProtInterList" + [model]="getConfig('interactionDrugProtein')" + tooltip="Select the dataset of drug-protein information that is later used in functions like 'Find Drug Targets'." + (onChange)="changeDataset('interactionDrugProtein', $event)" + ></app-dropdown> + <app-dropdown + label="Protein-Disease Association DB" + [items]="dataLists.protDisList" + [model]="getConfig('associatedProteinDisorder')" + tooltip="Select the dataset of protein-disease information that is later used in functions like 'Show disorders adjacent to displayed proteins'." + (onChange)="changeDataset('associatedProteinDisorder', $event)" + ></app-dropdown> + <app-dropdown + label="Drug-Disease Indication DB" + [items]="dataLists.drugDisList" + [model]="getConfig('indicationDrugDisorder')" + tooltip="Select the dataset of drug-disease information that is later used in functions like 'Show disorders adjacent to displayed drugs'." + (onChange)="changeDataset('indicationDrugDisorder', $event)" + ></app-dropdown> + <app-switch + label="Autofill interactions" + [model]=" getConfig('autofillEdges') == null || getConfig('autofillEdges') " - (onChange)="changeConfig('autofillEdges', $event)" - tooltip="If enabled, adds automatically gene-gene interaction edges." - ></app-switch> + (onChange)="changeConfig('autofillEdges', $event)" + tooltip="If enabled, adds automatically gene-gene interaction edges." + ></app-switch> + </div> + </div> </div> - </div> </div> - </div> </div> diff --git a/src/app/pages/standalone/standalone/standalone.component.ts b/src/app/pages/standalone/standalone/standalone.component.ts index 948c9e55dc81ad2cc26aa46704361d90935e8a78..956a7eccbc279a2cbc3afc88c3e7cb2025c65baa 100644 --- a/src/app/pages/standalone/standalone/standalone.component.ts +++ b/src/app/pages/standalone/standalone/standalone.component.ts @@ -28,6 +28,7 @@ export class StandaloneComponent implements OnInit { themeDark: Object = {} theme: Object = {} config: Object = {} + groups: Object = {} configDark: Object = {} configLight: Object = {} @@ -81,21 +82,26 @@ export class StandaloneComponent implements OnInit { if (val instanceof NavigationEnd) { if (val.url != null) { // @ts-ignore - var page = val.url.substr(1).split("/")[0].split('#')[0] - if (page.indexOf("?") > -1) { - let params = {} - page.split("?")[1].split("&").forEach(pair => { - let p = pair.split("="); - // @ts-ignore - params[p[0]] = p[1]; - }) - this.setParams(params) - } + this.readParamsFromURL(val.url) } } }) } + readParamsFromURL(url: string): void{ + var page = url.substr(1).split("/")[0].split('#')[0] + if (page.indexOf("?") > -1) { + let params = {} + page.split("?")[1].split("&").forEach(pair => { + let p = pair.split("="); + // @ts-ignore + params[p[0]] = p[1]; + }) + this.setParams(params).catch(console.error) + history.replaceState('','',"/standalone"+location.search) + } + } + ngOnInit(): void { this.themeLight = themes["integrated-light"]; this.themeDark = themes["integrated-dark"]; @@ -108,6 +114,8 @@ export class StandaloneComponent implements OnInit { this.configDark = configDark this.config = this.configLight this.loadDatasets() + this.readParamsFromURL(window.location.href.substring(window.location.origin.length)) + } ngAfterViewInit(): void { @@ -158,9 +166,11 @@ export class StandaloneComponent implements OnInit { // @ts-ignore let response = await this.drugstone.getNetwork(this.api, params["id"]).then(response => { return response - }) + }).catch(console.error) nodes = response.network.nodes edges = response.network.edges + if (response.groups !=null) + Object.keys(response.groups).forEach(key=>this.changeGroups(key, response.groups[key])) if (response.config != null) Object.keys(response.config).forEach(key => this.changeConfig(key, response.config[key])) @@ -191,11 +201,47 @@ export class StandaloneComponent implements OnInit { if (this.dataLists.drugProtInterList.map(o => o.value).indexOf(ident) > -1) this.changeDataset("interactionDrugProtein", ident) } + if ("indicationDrugDisorder" in params) { + // @ts-ignore + let ident = params["indicationDrugDisorder"] + if (this.dataLists.drugProtInterList.map(o => o.value).indexOf(ident) > -1) + this.changeDataset("indicationDrugDisorder", ident) + } + if ("associatedProteinDisorder" in params) { + // @ts-ignore + let ident = params["associatedProteinDisorder"] + if (this.dataLists.drugProtInterList.map(o => o.value).indexOf(ident) > -1) + this.changeDataset("associatedProteinDisorder", ident) + } if ("autofillEdges" in params) { // @ts-ignore let fill = params["autofillEdges"] === "true" this.changeConfig("autofillEdges", fill) } + if ("activateNetworkMenuButtonAdjacentDrugs" in params) { + // @ts-ignore + let activate = params["activateNetworkMenuButtonAdjacentDrugs"] === "true" + this.changeConfig("activateNetworkMenuButtonAdjacentDrugs", activate) + } + + if ("activateNetworkMenuButtonAdjacentDisorders" in params) { + // @ts-ignore + let activate = params["activateNetworkMenuButtonAdjacentDisorders"] === "true" + this.changeConfig("activateNetworkMenuButtonAdjacentDisorders", activate) + } + + if ("activateNetworkMenuButtonAdjacentDisorderDrugs" in params) { + // @ts-ignore + let activate = params["activateNetworkMenuButtonAdjacentDisorderDrugs"] === "true" + this.changeConfig("activateNetworkMenuButtonAdjacentDisorderDrugs", activate) + } + + if("licensedDatasets" in params){ + // @ts-ignore + let activate = params["licensedDatasets"] === "true" + this.changeConfig("licensedDatasets", activate) + } + } if (nodes.length > 0 || edges.length > 0) { this.network = {nodes: nodes, edges: edges} @@ -259,6 +305,20 @@ export class StandaloneComponent implements OnInit { this.changeConfig('licensedDatasets', value.licenced) this.changeConfig(name, value.name) } + changeGroups(name: string, value: any) { + let change = {} + // @ts-ignore + change[name] = value; + Object.keys(change).forEach(name => { + // @ts-ignore + if (change[name] != null) + // @ts-ignore + this.groups[name] = change[name]; + else + // @ts-ignore + delete this.groups[name] + }) + } changeConfig(name: string, value: any) { let change = {}