What is drugst.one?

drugst.one is a plugin that aims to provide an easy and convenient way to integrate a network viewer into any applicable website. The focus of drugst.one lies on biological networks, meaning gene or protein nodes, and it provides a toolbox to enrich the initial set of entries with interaction information or even different algorithms for the ranking of drug candidates. But also not strictly defined data, like patient labels or celllines, can be visualized. The data necessary for this as well as any computation is carried out on our backend servers.
drugst.one is integrated easily into any website, as can be seen below or on the HowTo-Page, and is highly adjustable to your current website styling. Different features or panels of drugst.one can be even removed from your specific implementation, if it does not suit the concept of the rest of the page.
If your current website or web-application features at some point a list of genes or proteins and are interested to close the gap to drugs that might yield therapeutic effects, then you should consider giving drugst.one a try. This project is still under development so bugs or other issues might occur, but together with you we hope to get rid of all of those and to further improve the drugst.one plugin (Contact).

What Data does drugst.one use?

Detailed information about the data sources will be added in the future.
With the node checker below you can check for availability of specific protein/gene entries:

Node ID

Check your node ID

Use drugst.one!

The integration of drugst.one into any existing website is straight forward and was successfully tested for some popular frameworks already (e.g. Vue-js, AngularJS). The main idea is that you only have to import our js component and stylesheet. After that the <drugst-one> tag is available in your project. Through parameters the content, style and behaviour of this component can be adjusted and is even able to adjust dynamically to configuration changes.
To get the information needed to integrate drugst.one yourself, please refer to the basic instructions below or the Documentation section.

How to integrate drugst.one?

We prepared this plugin in a way that the integration process is as easy as currently possible. To add the necessary script and style files to your project, just add the code below to the <head> section of your index.html file.

<head>
   <script src="https://cdn.drugst.one/latest/drugstone.js"></script>
   <link rel="stylesheet" href="https://cdn.drugst.one/latest/styles.css">
</head>

Based on the framework you use in your project, additional configuration may be necessary. Check out the section below for more information on that. Adjusting the version tag helps you to use some specific version of the drugst.one plugin (Version List), but older versions may not be supported forever. A tag for the automatic use of the newest version is not yet integrated but is worked on.
After adding a valid version of drugst.one to your project a html component is exposed that can be then used to add a default drugst.one panel to your website.

<body>
   <drugst-one></drugst-one>
</body>

The customization of the panel is achieved by handing over parameters to the component. All the configuration parameters, their syntax and structure can be checked in the Documentation or interactively explored and set in the Playground tab. Any configuration created there can be copied and directly added to your project and provides an easy way to quickly set up drugst.one to your liking and to get familiar with its use.
The color theme of drugst.one can also be adjusted freely by setting specific css variables for your website. These can be of course adjusted manually, but again the Playground tab has some nice features to create a theme that fits into your application. The available variables are the following:

:root {
   --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;
   ;
}

Get Started

Basic Integration

For the integration of Drugst.One into a simple html project, the Drugst.One plugin has to be imported. For this, only two lines of code have to be added in the <head> section of your html file:

<head>
   <script src="https://cdn.drugst.one/latest/drugstone.js"></script>
   <link rel="stylesheet" href="https://cdn.drugst.one/latest/styles.css">
</head>

These urls will always provide you with the latest release version of Drugst.One. For the use of specific versions please refer to the dedicated version section.
Adding these import lines loads the plugin from a content delivery network and allows now the use of the <drugst-one> tag. An unconfigured and customized version of Drugst.one can therefore be integrated by creating an html component:

<html>
    <drugst-one id='drugstone-component-id'></drugst-one>
</html>

The ID can of course be changed or removed but is here set specifically to 'drugstone-component-id' for documentation consistency reasons. To add network information, or customize styling or general configuration please refer to the specific sections.

AngularJS

import {CUSTOM_ELEMENTS_SCHEMA, NgModule} from '@angular/core';
@NgModule({
   declarations: [],
   imports: [],
   bootstrap: [AppComponent],
   schemas: [CUSTOM_ELEMENTS_SCHEMA],
})

AngularJS will give an error warning when just doing the basic setup steps. To allow the use of the custom component tag, the schemas entry has to be extended by adding CUSTOM_ELEMENTS_SCHEMA to the list in the module.ts file, which then should look as follows: This configuration should be enough to now use the Drugst.One plugin as in any other framework.

Django

Django build applications accepted the Drugst.One plugin out of the box without any special configuration.
You can check out the Drugst.One integration into a standalone django web-service.

Vue.js

Vue.js will return an error warning when just doing the basic setup steps. To allow the use of an external components in Vue.js an entry has to be added to the externals object vue.config.js : The way this entry has to be specifically structure can differ between versions and setups.
Basic vue.js 2 project:

module.exports = {
   configureWebpack:
      externals: {
         'drugst-one': 'ELEMENT'
      }
   }
}

Vue.js 2 webpack project:

module.exports = {
   externals: {
      'drugst-one': 'ELEMENT'
   }
}

This configuration should be enough to now use the Drugst.One plugin as in any other framework.

R-Shiny

For R-Shiny apps there were so far no specific framework related problems apparent that would demand some specific framework configuration. Some functionalities necessary to fully use drugst.one may not be natively supported by R-shiny but you can always use the normal JavaScript functions as a fallback option.
To adjust network and configuration dynamically, make sure that the created JSON file has the correct structure and fields as described in the customization section.

Other Frameworks

All component based frameworks (Vue.js and AngularJS) seem to have similar barriers to overcome concerning custom components. So this may also hold true for other, similar frameworks like React.
Try to integrate Drugst.One the normal way and check the error messages your compiler will give you.
In case the error messages are not enough to fix the problem, try to reach out to us!

From Scratch

If you want to create a new website from scratch, we provide a django template to help you get started. It includes a working django webserver with an example program that returns a list of genes and the visualization of the results in a Drugst.One instance. For more information and the code, check out our website template repository.

The Drugst.One UI

Network

The main part of Drugst.One is an interactive network along with its legend. The network is implement with the visvis.js network library. Nodes and edges will be visualized according to the styles defined in their groups. By clicking on a node, the node attributes will be displayed in the detail view (if enabled) in the sidebar. If Drugst.One can find the gene in its database, it is possible to select it and thus use it for the algorithms. Nodes can be selected or deselected for analysis with a double click. Selected nodes will be the seed nodes for the drug and drug target search algorithms. To visualize the selected nodes, the group 'selectedNode' will the merged with the according node group style.

Only genes/proteins that can be mapped to Drugst.One entities can be selected.

The legend will automatically be generated with the custom node styles defined in the groups. Alternatively, it is also possible to pass an image via the 'legendUrl' parameter. The position of the legend can be set via the option 'legendPos', which accepts the values 'left' or 'right'. The legend can be hidden by setting the parameter 'showLegend' to 'false'. Likewise, the parts of the legend describing the nodes or the edges can be hidden by setting 'showLegendNodes' or 'showLegendEdges' to 'false'. For more information, please refer to the config.

Sidebar Panels

The Drugst.One sidebar consists of different panels which can be individually integrated or excluded to fit your websites needs. If desired, the complete sidebar can be deactivated by setting the parameter 'showSidebar' to 'false' in the config. In the following, each panel and its functionality is described.

Drugst.one sidepanel — The Drugst.One sidebar holds various panels providing different features. Panels can be retracted or expanded.

Detail View

The detail view shows the node information of the currently selected network component. The name and the group of the gene will be displayed here. If a gene can be found by Drugst.One in its database, the information will be complemented by information from different databases. If a tissue is selected, the exact measured expression value will be displayed here when the gene is selected. If the gene cab be found in the Drugst.One database and thus is available for selection, a button to toggle the selection status fo the gene will be displayed.

Drugst.one detail panel — The Drugst.One detail panel with content for the CFTR gene.

Network Overview

The overview panel shows a summary of the currently displayed network consisting of the numbers of edges and nodes.

Drugst.one overview panel — The Drugst.One overview panel for a small network.

Query Node

This panel allows searching nodes in the network. A search bar allows filtering the nodes in the network and assists the user with an autocomplete function. The query functionality is especially valuable for large and complex networks.

Drugst.one query panel — The Drugst.One query panel with a search for 'cystic fibrosis' showing the CTFR gene.

Connect Genes

The 'Connect Genes' panel offers the option to connect the genes in the network with one click. The buttons start a Multi-Steiner algorithm on all genes in the network or the selected genes. The resulting network find connections between the seed genes if any exist.

Quick Drug Search

The 'Quick Drug Search' panel allows to search for drug candidates with one click. It starts a Multi-Steiner algorithm on all genes in the network or the selected genes, similar to the 'Connect Genes' function. In a second step, Drugst.One will execute a Closeness Centrality algorithm on the resulting network, finding drug candidates that are related to the original seed genes.

Analysis

The analysis panel gives the user three ways to analyze the selected seed genes. The 'drug target search' allows to select algorithms that will find genes related to the seed genes. It depends on the selected algorithm, if the algorithm will try to find genes in between the seed genes or if the algorithm searches for new genes in close proximity to the seed genes. These genes can extend existing disease module or, if seen in the context of drug repurposing, represent putative drug targets. The 'drug search' works similar, but the algorithms will return a list of putative drugs in the network neighborhood of the seed genes. Lastly, the 'enrichment analysis' will export the list of selected genes either to g:Profiler or DIGEST which offer different evaluation, enrichment, profiling and conversion methods. Another option is to search for selected proteins in NDEx integrated Query (iQuery) to show curated pathways with the same participants.

For more information about the algorithm see the section about algorithms.

Drugst.one analysis panel — The Drugst.One analysis panel with full configuration option for 'drug target' and 'drug' searches and redirects to external resources.

Tasks

The task list offers an overview over the tasks and indicates the used algorithm, the status of the Task ('running', 'done', 'failed') and a timestamp. While the tasks should never fail, in the case of an error and the task status 'failed', a short error message will be displayed to inform the user. In this case, please reach out to us with the displayed message. In the task list, tasks will be listed chronologically from newest to oldest. A click on a task in this list opens the analysis window for this task. Lastly, tasks that are not needed anymore can be deleted by the user individually or all together by clicking the button 'Delete All' at the bottom of the list.

Selection

This panel shows a list of all selected genes. Labels and the group are displayed for each genes to give the user an overview over their current selection. Individual genes or the complete selection can be removed here. Genes can be manually selected by double-clicking nodes in the network, checking boxes in the according tabular view, or by using the 'rectangular select' function, which can be used by pressing shift and then holding the left mouse button down while dragging the cursor over the network. Options for selection expansion are provided though the 'Add First neighbors' and 'Add Connected Components' buttons, that use the current selection list as input.

Views

The views panel shows a list of all created views. A view is a subnetwork based on a selection of other networks. The user can create a view by selecting a network and a selection of genes in the network. The view will then be created and displayed in the network panel. The user can also delete views from the list. The view list is saved in the browser's local storage and will be restored when the user returns to the page.

Network Menu

The network menu consists of all options that are directly related to the network. It allows you to modify the network, add and remove node types and highlight genes based on expression. The complete network information can be exported from here e.g. as an image or a json.

Reset View: Reset the network zoom and center the network.
Screenshot: Exports the network as an image. If the legend is generated by Drugst.One, it will be included in the image. If the legend is loaded via an url, it is currently not possible to include it into the screenshot. Also please note that the screenshot function will work if the network nodes have images due to security reasons.
Download: Download the network data as .graphml, .json or .csv format.
Tissue: Visualize the expression information for genes in the network based on GTEx media Tissue expression (TPM) values. For the pie chart representation, values are scaled based on the highest expression observed in the selected tissue.
Drugs: Display first neighbor drugs for the genes in the network.
Disorders (Protein): Display first neighbor disorders for the genes in the network.
Disorders (Drug): Display first neighbor drugs for the disorders in the network.
Animation: Toggle the network physic (on/off).

In the analysis mode, the network menu has additionally the functions to highlight seed genes used for the analysis.

Seeds: Highlight the seeds used for the analysis in the network. This will apply the 'seedNode' group style to the seed nodes.

Task Execution

When the user selected genes in the network, Drugst.One can be used to execute network algorithms based on these seed genes. The algorithms can be started in the sidebar in the 'Analysis' panel. In the 'Analysis' panel, the user has the option to choose between drug and drug target searching algorithms. The user can choose between all enabled algorithms and configure a number of different parameters to customize the algorithm to their needs. Alternatively, the 'Quick Drug Search' and the 'Connect Genes' panels in the sidebar can be used to run predefined algorithms. For more information see the panel explanations.

Drugst.one task configuration — The Drugst.One task configuration, here a 'drug target search' task.

Users can find all their started tasks in the task list element in the Drugst.One sidebar. Upon clicking a task in the list, the analysis window will open where the user can browse the task results. For more information about the task list, see our description of the 'Tasks' panel.

Analysis Window

The analysis window can be opened by clicking on finished tasks in the task list in the sidebar. The analysis window consists of three different tabs: The 'table', the 'network' and the 'parameters'.

The 'table' contains all the data used for the analysis. Here are tables displayed which show the genes/proteins of the search and which ones were found by the algorithm. If applicable, an additional table ranks the found drugs.
The 'network' shows the resulting network in the analysis context. It displays the complete input network such that the found nodes can be interpreted in its context. The network menu in the analysis view has the option to highlight the used seed nodes for the analysis task, hence the genes which the algorithm received as input. In addition to the initial network, the analysis network contains additional node groups for the found nodes ('foundNodes') and for possible connectors ('connectorNode').
The 'parameters' tab contains all information needed to reproduce the results. Here you can find the name of the used algorithm, the version numbers of the used datasets and the additional parameters that were set by the user.

Drugst.one analysis table — The Drugst.One analysis table, containing the ranked drugs and identified 'drug target' genes.

Drugst.one analysis network — The Drugst.One analysis network visualizing found drugs and 'drug targets' or here 'connector genes'.

Drugst.one analysis parameters — The Drugst.One analysis parameters lists executed algorithms and the used parametrization as well as database with the according version.

Customize Drugst.One

Configuration

The Drugst.One component accepts 3 different arguments: 'config', 'groups' and 'network'.

'config' describes the general configuration of the app. Here you can define, which elements and functionalities you want to include in your Drugst.One instance and the position in the app.
'groups' defines the labels and styles such as color and shape for each node/edge group. These configurations will be applied to each node/edge with the according 'group' attribute.
'network' contains the complete network data for nodes and edges. Keep in mind that you don't need to define edges, instead Drugst.One can load them from a PPI dataset of your choice.

<drugst-one
    config="{}"
    groups="{}"
    network="{}">
  </drugst-one>

Config Object

The general configuration allows you to fully customise the layout of the panels as well as the settings for the functionalities like automatically adding network edges or the design of the network nodes. Below, we provide the default configuration of Drugst.One, the settings when no argument is given for the specific parameters. Any of these parameters can be overwritten by passing it to the ‘config’ parameter.

Options
Raw JSON

Parameter	Type	Default	Description
title	string	Drugst.One	The title which will be used in the header of the Drugst.One.
legendUrl	string	''	Url to an image (png, jpg) which should be loaded as legend. If none is given, a default legend will be created.
legendClass	string	legend	Additional class to append to the legend.
legendPos	string	left	Position of the legend. Can be either 'left', 'right' or 'off'.
taskTargetName	string	Drug Target Search	Label of the button for the drug target search.
taskDrugName	string	Drug Search	Label of the button for the drug search.
showSidebar	boolean \| string	left	Position of the sidebar with the algorithms, node details, etc. If set to 'false', the sidebar will be hidden and the network will cover the complete Drugst.One panel.
showLegendNodes	boolean	true	Only if legendUrl is not given. Controls the visibility of the node entries in the legend.
showLegendEdges	boolean	true	Only if legendUrl is not given. Controls the visibility of the edge entries in the legend.
showOverview	boolean	true	Show or hide the overview panel.
showQuery	boolean	true	Show or hide the query panel.
showItemSelector	boolean	true	Show or hide the node detail panel.
showSimpleAnalysis	boolean	false	Show or hide the panel with the quick analysis buttons.
showAdvAnalysis	boolean	true	Show or hide the panel with the advanced analysis buttons.
showSelection	boolean	true	Show or hide the panel with the selection table.
showTasks	boolean	true	Show or hide the panel with the task table.
showViews	boolean	true	Show or hide the panel with the view table.
showNetworkMenu	boolean \| string	right	Show or hide the network menu. The network menu can be positioned with the values 'left' and 'right'.
expandNetworkMenu	boolean	true	Indicates whether the network menu should be open or closed when the Drugst.One component is loaded.
showLegend	boolean	true	Show or hide the complete legend.
showNetworkMenuButtonExpression	boolean	true	Show or hide the button to load the expression data in the network menu.
showNetworkMenuButtonScreenshot	boolean	true	Show or hide the screenshot button in the network menu.
showNetworkMenuButtonExportGraphml	boolean	true	Show or hide the graphml-export button in the network menu.
showNetworkMenuButtonAdjacentDrugs	boolean	true	Show or hide the adjacent drugs button in the network menu.
activateNetworkMenuButtonAdjacentDrugs	boolean	false	Activates adjacent drugs by default once proteins or genes are loaded.
showNetworkMenuButtonCenter	boolean	true	Show or hide the button to re-center the network in the network menu.
showNetworkMenuButtonAnimation	boolean	true	Show or hide the button to toggle the network physics in the network menu.
showNetworkMenuButtonAdjacentDisordersProteins	boolean	true	Show or hide the button to toggle the first neighbor disorders to the proteins in the network menu.
activateNetworkMenuButtonAdjacentDisorders	boolean	false	Activates adjacent disorders by default once proteins or genes are loaded.
showNetworkMenuButtonAdjacentDisordersDrugs	boolean	true	Show or hide the button to toggle the first neighbor disorders to the drugs in the network menu.
activateNetworkMenuButtonAdjacentDisorderDrugs	boolean	false	Activates adjacent drugs by default if drugs are loaded.
showConnectGenes	boolean	true	Show or hide the options to connect nodes in the sidebar.
networkMenuButtonAdjacentDrugsLabel	string		Label of the button to toggle the first neighbor drugs to the proteins in the network menu.
networkMenuButtonAdjacentDisordersProteinsLabel	string		Label of the button to toggle the first neighbor disorders to the proteins in the network menu.
networkMenuButtonAdjacentDisordersDrugsLabel	string		Label of the button to toggle the first neighbor disorders to the drugs in the network menu.
networkMenuButtonAnimationLabel	string		Label of the button to toggle the network physics in the network menu.
identifier	string	symbol	The identifier type of the given node IDs. Can be one of 'symbol' (HUGO symbol), 'uniprot' (Uniprot AC), 'ensg' or 'ensembl' (Ensembl Gene ID), 'entrez' or 'ncbigene' (Entrez ID).
selfReferences	boolean	false	Allow self referencing edges ('loops') in the network. If set to false, they will be removed from the dataset.
customEdges	object	{default: true, selectable: true}	Options for edge functionality regarding the user input edges. Expects a dictionary like '{default: true, selectable: true}', indicating whether custom edges should be considered in the analysis algorithms and whether they should be selectable in the network.
interactionDrugProtein	string	NeDRex	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
interactionProteinProtein	string	NeDRex	The database which should be used to fetch the protein-protein interactions. Possible values are 'NeDRex', 'BioGRID', 'IID', 'IntAct', 'STRING', 'APID'. For more information check Implementation > Data
indicationDrugDisorder	string	NeDRex	The database which should be used to fetch the drug-disorder interactions. Possible values are 'NeDRex', 'CTD', 'DrugCentral', 'DrugBank'. For more information check Implementation > Data
associatedProteinDisorder	string	NeDRex	The database which should be used to fetch the protein-disorder interactions. Possible values are 'NeDRex', 'DisGeNET', 'OMIM'. For more information check Implementation > Data
autofillEdges	boolean	false	Automatically fetch interactions for all network nodes from the selected protein interaction database (see 'interactionDrugProtein').
physicsOn	boolean	false	Sets initial state of the network interaction physics.
physicsInitial	boolean	true	Whether or not to run initial layouting on the network before visualizing. This setting is always turned off for big networks (> 100 nodes or > 100 edges) to prevent long loading times.
nodeShadow	boolean	true	Turn the shadows of the network nodes on or off.
edgeShadow	boolean	true	Turn the shadows of the network edges on or off.
licensedDatasets	boolean	false	Indicates whether licenced data should be used. If set to true, users will have to accept the terms of usage for the licenced data. For more information check Implementation > Data
groups	object	see 'Raw JSON'	Groups ('nodeGroups' and 'edgeGroups') which define the style for the network nodes. Every node in the network will be assigned to one of the node groups. The styles of the default node groups can be overwritten here. For more information see 'Groups'.
algorithms	object	see 'Raw JSON'	List of algorithms which should be available for selection to the user.

config: {
        title: "Drugst.One",
        backendUrl: "",
        legendUrl: "",
        legendClass: "legend",
        legendPos: "left",
        taskTargetName: "Drug target search",
        taskDrugName: "Drug search",
        showSidebar: "left",
        showLegendNodes: true,
        showLegendEdges: true,
        showOverview: true,
        showQuery: true,
        showItemSelector: true,
        showSimpleAnalysis: true,
        showAdvAnalysis: true,
        showAdvAnalysisContent: ["drug-search", "drug-target-search", "enrichment-gprofiler", "enrichment-digest", "search-ndex"],
        showSelection: true,
        showTasks: true,
        showViews: true,
        showNetworkMenu: "right",
        showLegend: true,
        expandNetworkMenu: true,
        showNetworkMenuButtonExpression: true,
        showNetworkMenuButtonScreenshot: true,
        showNetworkMenuButtonExportGraphml: true,
        showNetworkMenuButtonAdjacentDrugs: true,
        activateNetworkMenuButtonAdjacentDrugs: false,
        showNetworkMenuButtonCenter: true,
        showNetworkMenuButtonAnimation: true,
        activateNetworkMenuButtonAdjacentDisorders: false,
        showNetworkMenuButtonAdjacentDisordersProteins: true,
        activateNetworkMenuButtonAdjacentDisorderDrugs: false,
        showNetworkMenuButtonAdjacentDisordersDrugs: true,
        showConnectGenes: true,
        networkMenuButtonAdjacentDrugsLabel: "Drugs",
        networkMenuButtonAdjacentDisordersProteinsLabel: "Disorders (protein)",
        networkMenuButtonAdjacentDisordersDrugsLabel: "Disorders (drug)",
        networkMenuButtonAnimationLabel: "Animation",
        identifier: "symbol",
        selfReferences: false,
        customEdges: {default: true, selectable: true},
        interactionDrugProtein: "NeDRex",
        interactionProteinProtein: "NeDRex",
        indicationDrugDisorder: "NeDRex",
        associatedProteinDisorder: "NeDRex",
        autofillEdges: true,
        physicsOn: false,
        physicsInitial: true,
        nodeShadow: true,
        edgeShadow: true,
        licensedDatasets: false,
        algorithms: {
          drug: ["trustrank", "closeness", "degree", "proximity"],
          "drug-target": ["trustrank", "multisteiner", "keypathwayminer", "degree", "closeness", "betweenness"]
        }
      },
    }

config: {
        title: "Drugst.One",
        backendUrl: "",
        legendUrl: "",
        legendClass: "legend",
        legendPos: "left",
        taskTargetName: "Drug target search",
        taskDrugName: "Drug search",
        showSidebar: "left",
        showLegendNodes: true,
        showLegendEdges: true,
        showOverview: true,
        showQuery: true,
        showItemSelector: true,
        showSimpleAnalysis: true,
        showAdvAnalysis: true,
        showAdvAnalysisContent: ["drug-search", "drug-target-search", "enrichment-gprofiler", "enrichment-digest", "search-ndex"],
        showSelection: true,
        showTasks: true,
        showViews: true,
        showNetworkMenu: "right",
        showLegend: true,
        expandNetworkMenu: true,
        showNetworkMenuButtonExpression: true,
        showNetworkMenuButtonScreenshot: true,
        showNetworkMenuButtonExportGraphml: true,
        showNetworkMenuButtonAdjacentDrugs: true,
        activateNetworkMenuButtonAdjacentDrugs: false,
        showNetworkMenuButtonCenter: true,
        showNetworkMenuButtonAnimation: true,
        activateNetworkMenuButtonAdjacentDisorders: false,
        showNetworkMenuButtonAdjacentDisordersProteins: true,
        activateNetworkMenuButtonAdjacentDisorderDrugs: false,
        showNetworkMenuButtonAdjacentDisordersDrugs: true,
        showConnectGenes: true,
        networkMenuButtonAdjacentDrugsLabel: "Drugs",
        networkMenuButtonAdjacentDisordersProteinsLabel: "Disorders (protein)",
        networkMenuButtonAdjacentDisordersDrugsLabel: "Disorders (drug)",
        networkMenuButtonAnimationLabel: "Animation",
        identifier: "symbol",
        selfReferences: false,
        customEdges: {default: true, selectable: true},
        interactionDrugProtein: "NeDRex",
        interactionProteinProtein: "NeDRex",
        indicationDrugDisorder: "NeDRex",
        associatedProteinDisorder: "NeDRex",
        autofillEdges: true,
        physicsOn: false,
        physicsInitial: true,
        nodeShadow: true,
        edgeShadow: true,
        licensedDatasets: false,
        algorithms: {
          drug: ["trustrank", "closeness", "degree", "proximity"],
          "drug-target": ["trustrank", "multisteiner", "keypathwayminer", "degree", "closeness", "betweenness"]
        }
      },
    }

Group Configuration

Groups

Groups are templates for either edges ('edgeGroups') or nodes ('nodeGroups'). Drugst.One comes with some predefined groups, but you can overwrite any styles and define your own groups as you please. As we use Vis.js in Drugst.One, most of the Vis.js features are supported.
Drugst.One requires some groups do be always defined to work out of the box. These groups need to be defined, but all styles can be overwritten in your custom configuration.

Node Groups

Node groups define the style of the nodes assigned to them. You can define your own node groups with your custom styles. Later, you simply need to pass the group to the nodes in the 'group' argument and the style will be applied.

A group can contain any of the vis.js node options, but must contain 'groupName', 'type', 'shape' and 'color'.

Name	Type	Description
groupName	string	The name of the node group as it appears in the legend.
type	string	The name of the type of node as it appears in the node detail panel.
shape	string	The shape of all nodes belonging to this group. Can be one of 'circle', 'triangle', 'star', 'square', 'image', 'text', 'ellipse', 'box', 'diamond', 'dot'.
color	string \| object	The color of nodes in this group. Can be either a color string (hexcode, rgb, rgba) or an object based on the Vis.js node color property.

A minimal configuration of a node group could look like this:

nodeGroup1: {
  groupName: "My Node Group",
  color: "#FF0000",
  shape: "diamond",
  type: "One of my nodes"
}

Edge Groups

The edge groups define the styles of the network nodes. Similar to 'nodeGroups', you can define custom edge groups to design your edges. There is only one edge group predefined, the edge group 'default'. An edge group must have at least the attributes 'groupName' and 'color'. Optionally, attributes like 'dashes' can be passed onto the group as they are defined in vis.js

Name	Type	Description
groupName	string	The name of the edge group as it appears in the legend.
color	string \| object	The color of edges in this group. Expects a color string (hexcode, rgb, rgba).

A minimal configuration of an edge group could look like this:

edgeGroup1: {
  groupName: "My Edge Group",
  color: "#000000",
}

Default Groups

Drugst.One requires some default groups like a group for the found nodes in the target search ('foundNode') or a group for the found drugs in the drug search ('foundDrug'), thus the styles for these groups are predefined. The default groups defines the style of all nodes without a group. However, these styles may be partially or completely overwritten by you.

'default' groups should just be used as fallbacks and do therefore not appear in the custom legend.

Name	Function
default	Fallback option for all nodes without any group assigned.
foundNode	Node group for all nodes found by Drugst.One that are not drugs (either drug target nodes or nodes that connect drugs to the network).
foundDrug	Node group for all drug nodes found by Drugst.One. Drugs can either be found via the drug search or via the 'Drugs' button in the footer of the network.
seedNode	Style to highlight seed nodes in the task result used as input for the particular task.
selectedNode	Style for the nodes that are selected by the user as seeds nodes.

The full default configuration for the 'nodeGroups' and 'edgeGroups' can be found below:

groups: {
    nodeGroups: {
        default: {
          groupName: "Default Node Group",
          color: {
            border: "#FFFF00",
            background: "#FFFF00",
            highlight: {
              border: "#FF0000",
              background: "#FF0000"
            },
          },
          shape: "triangle",
          type: "default type",
          detailShowLabel: false,
          font: {
            color: "#000000",
            size: 14,
            face: "arial",
            background: undefined,
            strokeWidth: 0,
            strokeColor: "#ffffff",
            align: "center",
            bold: false,
            ital: false,
            boldital: false,
            mono: false,
          },
          borderWidth: 1,
          borderWidthSelected: 2
        },
        foundNode: {
          groupName: "Found Nodes",
          color: {
            border: "#F12590",
            background: "#F12590",
            highlight: {
              border: "#F12590",
              background: "#F12590"
            },
          },
          shape: "circle",
          type: "default node type",
        },
        foundDrug: {
          groupName: "Drugs",
          color: {
            border: "#F12590",
            background: "#F12590",
            highlight: {
              border: "#F12590",
              background: "#F12590"
            },
          },
          shape: "diamond",
          type: "default drug type",
        },
        seedNode: {
          groupName: "Seed Nodes",
          shape: "triangle",
          type: "seed",
          color: {
            border: "#F1111D",
            background: "#F1111D",
            highlight: {
              border: "#F1111D",
              background: "#F1111D"
            },
          },
          font: {
            color: "#F1111D",
            size: 14
          }
        },
        selectedNode: {
          borderWidth: 3,
          borderWidthSelected: 4,
          color: {
            border: "#F8981D",
            highlight: {
              border: "#F8981D",
            },
          },
          font: {
            color: "#F8981D",
            size: 14
          }
        }
      },
      edgeGroups: {
        default: {
          groupName: "Default Edge Group",
          color: "black",
          dashes: false
        }
      }
  }

groups: {
    nodeGroups: {
        default: {
          groupName: "Default Node Group",
          color: {
            border: "#FFFF00",
            background: "#FFFF00",
            highlight: {
              border: "#FF0000",
              background: "#FF0000"
            },
          },
          shape: "triangle",
          type: "default type",
          detailShowLabel: false,
          font: {
            color: "#000000",
            size: 14,
            face: "arial",
            background: undefined,
            strokeWidth: 0,
            strokeColor: "#ffffff",
            align: "center",
            bold: false,
            ital: false,
            boldital: false,
            mono: false,
          },
          borderWidth: 1,
          borderWidthSelected: 2
        },
        foundNode: {
          groupName: "Found Nodes",
          color: {
            border: "#F12590",
            background: "#F12590",
            highlight: {
              border: "#F12590",
              background: "#F12590"
            },
          },
          shape: "circle",
          type: "default node type",
        },
        foundDrug: {
          groupName: "Drugs",
          color: {
            border: "#F12590",
            background: "#F12590",
            highlight: {
              border: "#F12590",
              background: "#F12590"
            },
          },
          shape: "diamond",
          type: "default drug type",
        },
        seedNode: {
          groupName: "Seed Nodes",
          shape: "triangle",
          type: "seed",
          color: {
            border: "#F1111D",
            background: "#F1111D",
            highlight: {
              border: "#F1111D",
              background: "#F1111D"
            },
          },
          font: {
            color: "#F1111D",
            size: 14
          }
        },
        selectedNode: {
          borderWidth: 3,
          borderWidthSelected: 4,
          color: {
            border: "#F8981D",
            highlight: {
              border: "#F8981D",
            },
          },
          font: {
            color: "#F8981D",
            size: 14
          }
        }
      },
      edgeGroups: {
        default: {
          groupName: "Default Edge Group",
          color: "black",
          dashes: false
        }
      }
  }

Network

The network is based on Vis.js version 9.1.6. Therefore, Drugst.One supports all options available for Vis.js networks as describes on the official Vis.js webpage. The nodes and edges can be defined in the parameter 'network' while the styles for nodes and edges should be defined in the parameter 'groups' under the keys 'nodeGroups' and 'edgeGroups', respectively. Each group (nodeGroups and edgeGroups) is defined by a key and an object. A minimal example of how the groups could look like is shown in 'groups'.

While the node and edge styles are defined in the 'group' parameter, the network parameter in the Drugst.One component serves as data input for the network. The network has the two attributes 'nodes' and 'edges', which each expect a list with objects for nodes and edges, respectively.

network = {
  "nodes": [],
  "edges": []
}

Here some of the required and some of the optional parameters for the node and edge objects are described. Since Drugst.One is using Vis.js, valid node and edge parameters in Vis.js can also be used in Drugst.One in addition to the parameters describes here.

Nodes

The 'nodes' attributes expects a list with objects for each node. Each node must have an unique 'id', which is the only required parameter. The 'id' is the node identifier and will be displayed as node name in the network.
For genes/proteins, the 'id' attribute is the gene identifier in the selected 'identifier' space. For example, if the 'identifier' is 'symbol', valid ids are 'PTEN', 'MYC', 'TP53' and so forth. Drugst.One will attempt to map each node to a gene/protein entity in its database and fetch corresponding known information from the database. If it cannot be mapped, it will still display the node with all attributes that are passed in the node object. However, this node will not be available for selection and thus for the analysis tasks.

All node objects must have an unique 'id' attribute, regardless whether they are biological entities.

Other nodes which do not represent genes/proteins will still have to have an 'id' attribute. In this case, the 'id' will still be used to display the name of the node in the network.

network = {
  "nodes": [{"id":"PTEN"}, {"id":"custom123"}]
}

In addition to the 'id', each should have a 'group' that it is assigned. The node will inherit all styles defined in the group. Note that the group assigned to a node must exist in the nodeGroups, otherwise an error will be thrown.

network = {
  "nodes": [{"id":"PTEN" "group": "gene"}, {"id":"custom123", "group": "customNodes"}]
}

Edges

The 'edges' attribute expects a list of edge objects, each containing the keys 'from' and 'to'. The values for these keys must the node 'id' values of the source and the target node. By default, the network is undirected. In this case, the values of 'from' and 'to' are exchangeable.

network = {
  "nodes": [{"id":"PTEN"}, {"id":"custom123"}],
  "edges": [{"from":"PTEN", "to":"custom123"}]
}

In addition to the required parameters, each node can also have a 'group'. The value of the 'group' must be a key of an 'edgeGroup'. If the 'edgeGroup' does not exist, an error will be thrown. The edge will inherit all styles defined in the edge group.

network = {
  "nodes": [{"id":"PTEN"}, {"id":"custom123"}],
  "edges": [{"from":"PTEN", "to":"custom123", "group":"significantEdges"}]
}

Version Selection

You have the possibility to select any tagged version of Drugst.One in your project.

Be aware that older versions might not be supported at some point regarding the according backend endpoints!

Like introduced in the basic setup section best practice is to always include the newest minor version release:

<head>
   <script src="https://cdn.drugst.one/latest/drugstone.js"></script>
   <link rel="stylesheet" href="https://cdn.drugst.one/latest/styles.css">
</head>'

Be aware, that latest or nightly does not use the stable endpoint of Drugst.One.

Apart from this another option for the latest development and thus newest release candidate version would be:

<head>
   <script src="https://cdn.drugst.one/v1.2.2/drugstone.js"></script>
   <link rel="stylesheet" href="https://cdn.drugst.one/v1.2.2/styles.css">
</head>'

Here v1.2.2 refers to the specific version. To load the latest committed version of drugst.one, the 'nightly' tag can be used:

Be aware that nightly versions are not guaranteed to be stable because they are in the middle of developing the next version!

<head>
   <script src="https://cdn.drugst.one/cdn/nightly/drugstone.js"></script>
   <link rel="stylesheet" href="https://cdn.drugst.one/cdn/nightly/styles.css">
</head>'

The available versions can be checked here: Version index.html

Style Adjustments

The style of the Drugst.One component is encapsulated. This means that its style does not affect the styling of the host website in any way and you also don't need to worry about your CSS affecting the style inside the Drugst.One component.

To still give you full control over the styling inside of the Drugst.One component, it allows you to set a variety of color and styling parameters. The colors for the Drugst.One component are defined by CSS variables at the highest parent element of the DOM (:root selector). The following variables are available (here with their default values):

:root {
    --drgstn-primary: #347eee;
    --drgstn-secondary: #fd6818;
    --drgstn-success: #48C774;
    --drgstn-warning: #ffdd00;
    --drgstn-danger: #f14668;
    --drgstn-background: #ffffff;
    --drgstn-panel: #f7f7f7;
    --drgstn-info: #61c43d;
    --drgstn-text-primary: #020202;
    --drgstn-text-secondary: #eeeeee;
    --drgstn-border: rgba(0, 0, 0, 0.2);
    --drgstn-tooltip: rgba(74, 74, 74, 0.9);
    --drgstn-panel-secondary: #fafafa;
    --drgstn-height: 500px;
    --drgstn-font-family: Helvetica Neue, sans-serif;
  }

You can override these values in your CSS stylesheet to customize your Drugst.One component. The playground offers tools to test different color and color schemes interactively. Try out your custom colors and then copy and paste the styles from there!

Make sure to set your custom variables after importing the Drugst.One CSS file to override the defaults.

Events

For now we depicted cases of information flow from the host page to the drugstone component (<drugst-one>).
To communicate some information from Drugst.One to your host page, if requested, we emit events that can be listened to. This is generally achieved by adding an EventListener to the component:

document.getElementById("drugstone-component-id").addEventListener("$eventName",(event)=>{console.log(event.detail)})

We select the component by its id (here 'drugstone-component-id') and add the necessary EventListener where '$eventName' has to be replaced with one of the events specified below. In this example we just want the received content to be printed into the browsers console, but this call may be replaced by any custom code, handling the event data.
In the following the specific events will be covered, including the necessary eventName to listen to, as well as how the result object is structured. Also some use-cases for the received object might be proposed here.

Task creation ('taskEvent')

Task IDs are emitted when algorithms are applied to subnetworks. This happens both for module and drug analysis. These tasks are tracked internally but for general result tracking reasons from a hosts perspective it can be necessary to acquire them.

document.getElementById("drugstone-component-id").addEventListener("taskEvent,(event)=>{callback(event)})

The event.detail object, your callback function receives is structured like follows:

{
    "taskId": "GFpwPHkc6gsXGvIx1g83w0hO8i95przG",   // Unique taskID (token) assigned for this task, can be used to request the loading of this specific result
    "algorithm": "multisteiner",                    // The algorithm that was applied on the selected seed nodes
    "target": "drug-target",                        // The type of analysis this search had as goal
    "params": {                                     // Input parameters of the algorithms
        "seeds": ["BRCA2","PTEN"],                 // The selected seed genes the algorithms starts with
        "config": {...},                            // The general drugstone config that was loaded at the moment of execution
        "input_network": {...},                     // The general drugstone network tat was loaded at the moment of execution to be later merged with the results
        "ppi_dataset": "STRING",                    // The database for protein-protein interaction information
        "pdi_dataset": "NeDRex",                  // The database for protein-drug targeting information
        "target": "drug-target",                    // The type of analysis this search has as goal
        "num_trees": 5,                             // Specific multisteiner algorithms parameters
        "tolerance": 10,                            // Specific multisteiner algorithms parameters
        "hub_penalty": 0                            // Specific multisteiner algorithms parameters
    }
}

{
    "taskId": "GFpwPHkc6gsXGvIx1g83w0hO8i95przG",   // Unique taskID (token) assigned for this task, can be used to request the loading of this specific result
    "algorithm": "multisteiner",                    // The algorithm that was applied on the selected seed nodes
    "target": "drug-target",                        // The type of analysis this search had as goal
    "params": {                                     // Input parameters of the algorithms
        "seeds": ["BRCA2","PTEN"],                 // The selected seed genes the algorithms starts with
        "config": {...},                            // The general drugstone config that was loaded at the moment of execution
        "input_network": {...},                     // The general drugstone network tat was loaded at the moment of execution to be later merged with the results
        "ppi_dataset": "STRING",                    // The database for protein-protein interaction information
        "pdi_dataset": "NeDRex",                  // The database for protein-drug targeting information
        "target": "drug-target",                    // The type of analysis this search has as goal
        "num_trees": 5,                             // Specific multisteiner algorithms parameters
        "tolerance": 10,                            // Specific multisteiner algorithms parameters
        "hub_penalty": 0                            // Specific multisteiner algorithms parameters
    }
}

The taskId can be used to tell drugstone programmatically to load a specific result. For this similar to the id, config or network attributes an additional one (task-id) can be set. It accepts the id of a successfully finished task. Example where the taskId from the received object is set is shown below:

document.getElementById("drugstone-component-id").setAttribute("task-id", "GFpwPHkc6gsXGvIx1g83w0hO8i95przG")

<drugst-one
        id='drugstone-component-id'
        config='{...}'
        network='{...}'
        task-id='GFpwPHkc6gsXGvIx1g83w0hO8i95przG'
        >
</drugst-one>

TODO: additional info on how to get status of task using the token with https://api.drugst.one/

Standalone

There are situations where a own setup or integration of Drugst.One is not the best way or even impossible. To this end, we provide a Standalone version on Drugst.One.

There are different ways in which this version can be accessed:

GET request: It allows you to manually define input nodes, edges and some basic parameters.
POST request:
Further this small network configuration can be passed by URL, which allows simple redirection from any other page to a specific network loaded in our Drugst.One instance. Having some limitations due to the nature of GET requests, we have an additional way to transmit a full Drugst.One configuration first by POST request to our backend server and to then load the exact network using the unique ID with which the server responded.

Drugst.One Buttons

A link to Drugst.One where users can visualize the PPI network and execute a variety of different methods on it is an elegant way to enhance the functionality on you website. For the buttons to work, you will only need to import one stylesheet in the of your html file as follows:

<link rel="stylesheet" href="https://cdn.drugst.one/libs/drugstone-buttons/0.0.1/drugstone-buttons.min.css">

Here we provide different button layouts, ready for you to copy and paste to you website.

Bright Colors

Drugst.One Drugst.One Drugst.One Drugst.One Drugst.One Drugst.One

<a class="drugstone-button drugstone-blue" href="https://drugst.one/standalone?nodes=PTEN,TP53,BRCA2&autofillEdges=true&activateNetworkMenuButtonAdjacentDrugs=true&interactionDrugProtein=NeDRex&licensedDatasets=true" target="_blank" >Drugst.One</a>
<a class="drugstone-button drugstone-green" href="https://drugst.one/standalone?nodes=PTEN,TP53,BRCA2&autofillEdges=true&activateNetworkMenuButtonAdjacentDrugs=true&interactionDrugProtein=NeDRex&licensedDatasets=true" target="_blank" >Drugst.One</a>
<a class="drugstone-button drugstone-yellow" href="https://drugst.one/standalone?nodes=PTEN,TP53,BRCA2&autofillEdges=true&activateNetworkMenuButtonAdjacentDrugs=true&interactionDrugProtein=NeDRex&licensedDatasets=true" target="_blank" >Drugst.One</a>
<a class="drugstone-button drugstone-red" href="https://drugst.one/standalone?nodes=PTEN,TP53,BRCA2&autofillEdges=true&activateNetworkMenuButtonAdjacentDrugs=true&interactionDrugProtein=NeDRex&licensedDatasets=true" target="_blank" >Drugst.One</a>
<a class="drugstone-button drugstone-white" href="https://drugst.one/standalone?nodes=PTEN,TP53,BRCA2&autofillEdges=true&activateNetworkMenuButtonAdjacentDrugs=true&interactionDrugProtein=NeDRex&licensedDatasets=true" target="_blank" >Drugst.One</a>
<a class="drugstone-button drugstone-grey" href="https://drugst.one/standalone?nodes=PTEN,TP53,BRCA2&autofillEdges=true&activateNetworkMenuButtonAdjacentDrugs=true&interactionDrugProtein=NeDRex&licensedDatasets=true" target="_blank" >Drugst.One</a>

<a class="drugstone-button drugstone-blue" href="https://drugst.one/standalone?nodes=PTEN,TP53,BRCA2&autofillEdges=true&activateNetworkMenuButtonAdjacentDrugs=true&interactionDrugProtein=NeDRex&licensedDatasets=true" target="_blank" >Drugst.One</a>
<a class="drugstone-button drugstone-green" href="https://drugst.one/standalone?nodes=PTEN,TP53,BRCA2&autofillEdges=true&activateNetworkMenuButtonAdjacentDrugs=true&interactionDrugProtein=NeDRex&licensedDatasets=true" target="_blank" >Drugst.One</a>
<a class="drugstone-button drugstone-yellow" href="https://drugst.one/standalone?nodes=PTEN,TP53,BRCA2&autofillEdges=true&activateNetworkMenuButtonAdjacentDrugs=true&interactionDrugProtein=NeDRex&licensedDatasets=true" target="_blank" >Drugst.One</a>
<a class="drugstone-button drugstone-red" href="https://drugst.one/standalone?nodes=PTEN,TP53,BRCA2&autofillEdges=true&activateNetworkMenuButtonAdjacentDrugs=true&interactionDrugProtein=NeDRex&licensedDatasets=true" target="_blank" >Drugst.One</a>
<a class="drugstone-button drugstone-white" href="https://drugst.one/standalone?nodes=PTEN,TP53,BRCA2&autofillEdges=true&activateNetworkMenuButtonAdjacentDrugs=true&interactionDrugProtein=NeDRex&licensedDatasets=true" target="_blank" >Drugst.One</a>
<a class="drugstone-button drugstone-grey" href="https://drugst.one/standalone?nodes=PTEN,TP53,BRCA2&autofillEdges=true&activateNetworkMenuButtonAdjacentDrugs=true&interactionDrugProtein=NeDRex&licensedDatasets=true" target="_blank" >Drugst.One</a>

Dark Colors

Drugst.One Drugst.One Drugst.One Drugst.One Drugst.One Drugst.One

<a class="drugstone-button drugstone-darkblue" href="https://drugst.one/standalone?nodes=PTEN,TP53,BRCA2&autofillEdges=true&activateNetworkMenuButtonAdjacentDrugs=true&interactionDrugProtein=NeDRex&licensedDatasets=true" target="_blank">Drugst.One</a>
<a class="drugstone-button drugstone-darkgreen" href="https://drugst.one/standalone?nodes=PTEN,TP53,BRCA2&autofillEdges=true&activateNetworkMenuButtonAdjacentDrugs=true&interactionDrugProtein=NeDRex&licensedDatasets=true" target="_blank">Drugst.One</a>
<a class="drugstone-button drugstone-darkyellow" href="https://drugst.one/standalone?nodes=PTEN,TP53,BRCA2&autofillEdges=true&activateNetworkMenuButtonAdjacentDrugs=true&interactionDrugProtein=NeDRex&licensedDatasets=true" target="_blank" >Drugst.One</a>
<a class="drugstone-button drugstone-darkred" href="https://drugst.one/standalone?nodes=PTEN,TP53,BRCA2&autofillEdges=true&activateNetworkMenuButtonAdjacentDrugs=true&interactionDrugProtein=NeDRex&licensedDatasets=true" target="_blank" >Drugst.One</a>
<a class="drugstone-button drugstone-darkgrey" href="https://drugst.one/standalone?nodes=PTEN,TP53,BRCA2&autofillEdges=true&activateNetworkMenuButtonAdjacentDrugs=true&interactionDrugProtein=NeDRex&licensedDatasets=true" target="_blank" >Drugst.One</a>
<a class="drugstone-button drugstone-black" href="https://drugst.one/standalone?nodes=PTEN,TP53,BRCA2&autofillEdges=true&activateNetworkMenuButtonAdjacentDrugs=true&interactionDrugProtein=NeDRex&licensedDatasets=true" target="_blank" >Drugst.One</a>

<a class="drugstone-button drugstone-darkblue" href="https://drugst.one/standalone?nodes=PTEN,TP53,BRCA2&autofillEdges=true&activateNetworkMenuButtonAdjacentDrugs=true&interactionDrugProtein=NeDRex&licensedDatasets=true" target="_blank">Drugst.One</a>
<a class="drugstone-button drugstone-darkgreen" href="https://drugst.one/standalone?nodes=PTEN,TP53,BRCA2&autofillEdges=true&activateNetworkMenuButtonAdjacentDrugs=true&interactionDrugProtein=NeDRex&licensedDatasets=true" target="_blank">Drugst.One</a>
<a class="drugstone-button drugstone-darkyellow" href="https://drugst.one/standalone?nodes=PTEN,TP53,BRCA2&autofillEdges=true&activateNetworkMenuButtonAdjacentDrugs=true&interactionDrugProtein=NeDRex&licensedDatasets=true" target="_blank" >Drugst.One</a>
<a class="drugstone-button drugstone-darkred" href="https://drugst.one/standalone?nodes=PTEN,TP53,BRCA2&autofillEdges=true&activateNetworkMenuButtonAdjacentDrugs=true&interactionDrugProtein=NeDRex&licensedDatasets=true" target="_blank" >Drugst.One</a>
<a class="drugstone-button drugstone-darkgrey" href="https://drugst.one/standalone?nodes=PTEN,TP53,BRCA2&autofillEdges=true&activateNetworkMenuButtonAdjacentDrugs=true&interactionDrugProtein=NeDRex&licensedDatasets=true" target="_blank" >Drugst.One</a>
<a class="drugstone-button drugstone-black" href="https://drugst.one/standalone?nodes=PTEN,TP53,BRCA2&autofillEdges=true&activateNetworkMenuButtonAdjacentDrugs=true&interactionDrugProtein=NeDRex&licensedDatasets=true" target="_blank" >Drugst.One</a>

Outlined

Drugst.One Drugst.One Drugst.One Drugst.One Drugst.One Drugst.One

<a class="drugstone-button drugstone-outlined-blue" href="https://drugst.one/standalone?nodes=PTEN,TP53,BRCA2&autofillEdges=true&activateNetworkMenuButtonAdjacentDrugs=true&interactionDrugProtein=NeDRex&licensedDatasets=true" target="_blank" >Drugst.One</a>
<a class="drugstone-button drugstone-outlined-green" href="https://drugst.one/standalone?nodes=PTEN,TP53,BRCA2&autofillEdges=true&activateNetworkMenuButtonAdjacentDrugs=true&interactionDrugProtein=NeDRex&licensedDatasets=true" target="_blank" >Drugst.One</a>
<a class="drugstone-button drugstone-outlined-yellow" href="https://drugst.one/standalone?nodes=PTEN,TP53,BRCA2&autofillEdges=true&activateNetworkMenuButtonAdjacentDrugs=true&interactionDrugProtein=NeDRex&licensedDatasets=true" target="_blank" >Drugst.One</a>
<a class="drugstone-button drugstone-outlined-red" href="https://drugst.one/standalone?nodes=PTEN,TP53,BRCA2&autofillEdges=true&activateNetworkMenuButtonAdjacentDrugs=true&interactionDrugProtein=NeDRex&licensedDatasets=true" target="_blank" >Drugst.One</a>
<a class="drugstone-button drugstone-outlined-white" href="https://drugst.one/standalone?nodes=PTEN,TP53,BRCA2&autofillEdges=true&activateNetworkMenuButtonAdjacentDrugs=true&interactionDrugProtein=NeDRex&licensedDatasets=true" target="_blank" >Drugst.One</a>
<a class="drugstone-button drugstone-outlined-black" href="https://drugst.one/standalone?nodes=PTEN,TP53,BRCA2&autofillEdges=true&activateNetworkMenuButtonAdjacentDrugs=true&interactionDrugProtein=NeDRex&licensedDatasets=true" target="_blank" >Drugst.One</a>

<a class="drugstone-button drugstone-outlined-blue" href="https://drugst.one/standalone?nodes=PTEN,TP53,BRCA2&autofillEdges=true&activateNetworkMenuButtonAdjacentDrugs=true&interactionDrugProtein=NeDRex&licensedDatasets=true" target="_blank" >Drugst.One</a>
<a class="drugstone-button drugstone-outlined-green" href="https://drugst.one/standalone?nodes=PTEN,TP53,BRCA2&autofillEdges=true&activateNetworkMenuButtonAdjacentDrugs=true&interactionDrugProtein=NeDRex&licensedDatasets=true" target="_blank" >Drugst.One</a>
<a class="drugstone-button drugstone-outlined-yellow" href="https://drugst.one/standalone?nodes=PTEN,TP53,BRCA2&autofillEdges=true&activateNetworkMenuButtonAdjacentDrugs=true&interactionDrugProtein=NeDRex&licensedDatasets=true" target="_blank" >Drugst.One</a>
<a class="drugstone-button drugstone-outlined-red" href="https://drugst.one/standalone?nodes=PTEN,TP53,BRCA2&autofillEdges=true&activateNetworkMenuButtonAdjacentDrugs=true&interactionDrugProtein=NeDRex&licensedDatasets=true" target="_blank" >Drugst.One</a>
<a class="drugstone-button drugstone-outlined-white" href="https://drugst.one/standalone?nodes=PTEN,TP53,BRCA2&autofillEdges=true&activateNetworkMenuButtonAdjacentDrugs=true&interactionDrugProtein=NeDRex&licensedDatasets=true" target="_blank" >Drugst.One</a>
<a class="drugstone-button drugstone-outlined-black" href="https://drugst.one/standalone?nodes=PTEN,TP53,BRCA2&autofillEdges=true&activateNetworkMenuButtonAdjacentDrugs=true&interactionDrugProtein=NeDRex&licensedDatasets=true" target="_blank" >Drugst.One</a>

Options

The Standalone tab provides a basic and unspecified version of the Drugst.One plugin. For once it is a demonstration how Drugst.One can be integrated and basic functions and networks can be tested here before or instead of integrating it into an own website.

Set Nodes

To add nodes, simply add a list of nodeIds in the left box. These can be separated by tabulator, newline, comma, semicolon or space. Also they have to fit the selected ID source. Accepted types are Symbols, Ensembl IDs or UniProt Accession numbers. For now the IDs are also case sensitive, so non numeric characters are most times written as uppercase letters. All nodes are added to the default Gene node group.

Set Edges

Edges can be defined by entering a newline separated list of node id pairs in the right text input field. The node ids can be again separated by tabulator, comma, semicolon or space. All entries are added to the group of default edges.

Network Configuration

Some additional options for basic network configuration are available in the Advanced panel. For once the source of internally used datasets for protein protein interaction (PPI) and drug protein interaction (DPI) information can be selected.
For PPIs we have STRING, BioGrid and APID to select from. STRING is the default dataset.
For DPIs there are DrugBank, ChEML and DGIdb. Here also the first option, DrugBank is the default selection.
Further there is an option to allow Drugst.One to add all missing interaction edges, based of course on the selected PPI datasource. By default this option is enabled.

API

All the parameters described in the Standalone Options section can also be defined through a simple GET request so a parametrized URL. With an intermediate POST request the boundaries of this small standalone interface can even be skipped and any network and configuration that is applicable on the Drugst.One plugin itself, can be loaded.

GET

The following depicts an explicit example, how a simple network can be loaded and configured through an URL:

https://drugst.one?nodes=PTEN,TP53&edges=PTEN%20TP53&autofillEdges=false

The available options are a limited selection of to those of the previous section and can be targeted as follows:

In case you are not familiar with the syntax of HTTP GET requests the following resources might be of additional help: en.wikipedia.org/wiki/Query_string#Structure

Compact ID notation can be used to generate URLs with mixed node ID spaces. All IDs will be transferred into the defined 'identifier' space (default: symbol) before visualization in Drugst.one. Example:

https://drugst.one?nodes=PTEN,TP53,uniprot:P13569,ensembl:ENSG00000255346,ncbigene:6658

Parameter	Type	Default	Description
nodes	list	[]	Comma separated list of node ids. Optionally compact IDs can be used (e.g. uniprot:H2EHT1 or ensembl:ENSG00000141510)
edges	list	[]	Comma separated list of node id pairs. Pairs are separated by space which is encoded as '%20' in the URL.
identifier	string	symbol	Can be one of the supported identifier types to map gene names. Options are: 'symbol' (gene Symbol), 'uniprot' (Uniprot accession number), 'ensg' or 'ensembl' (Ensembl Gene ID), 'entrez' or 'ncbigene' (Entrez ID).
physicsOn	boolean	false	Enables the interactive physics of the network by default.
licensedDatasets	boolean	false	Use licensed versions of selected datasets if these should exist.
autofillEdges	boolean	false	Enable to autofill protein interaction edges.
interactionProteinProtein	string	NeDRex	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
interactionDrugProtein	string	NeDRex	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
associatedProteinDisorder	string	NeDRex	The database which should be used to fetch protein-disorder association edges. Possible values are 'NeDRex', 'DisGeNET', 'OMIM'. For more information check Implementation > Data
indicationDrugDisorder	string	NeDRex	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
activateNetworkMenuButtonAdjacentDrugs	boolean	false	Enable to automatically show drug interacting with proteins.
activateNetworkMenuButtonAdjacentDisorders	boolean	false	Enable to automatically show disorders linked to shown proteins.
activateNetworkMenuButtonAdjacentDisorderDrugs	boolean	false	Enable to automatically show drugs for shown disorders.

POST

For configurations with more than 2,048 characters or additional network parameters or own edge or node groups we also provide a way to load these programatically in our Standalone Drugst.One application. This option consists of two separate request: first a POST request to transmit all the necessary network and configuration data to the backend service and receive an associated ID and secondly then again a GET request to the Standalone application with said received ID.
A skeleton of the first POST request call is shown below:

let networkID = post(
   'https://api.drugst.one/create_network',
   {
       network: {nodes: [...], edges: [...]},
       groups: {...}
       config: {...}
   }
)

Network and config objects can be defined exactly as the ones handed to the Drugst.One plugin, further defined in the customization section. The call returns a networkID that can be used to load this saved network in the Standalone application. This UUID contains 32 random alphanumeric characters (e.g. 'cbfa6a27ded04b20963c04376e212ca6'). It is then used to request the loading of the referenced graph into the Drugst.One Standalone by a simple GET request:

https://drugst.one?id=18baf56f4fca46e3952eaad97681f658

Currently node and edge styles are still based on the design of the Drugst.One website to ensure the readability of the network. This may be changed in the future!

Implementation

GitHub

For code versioning Drugst.One uses GitHub. Under the drugst-one organization you can find the plugin repository, the backend repository and other repositories like the integration examples and the website skeleton project.

Datasources

Drugst.One includes a variaty of different data types and data sources. It is up to you, which data sources for e.g. protein-protein interactions you want to integrate in your app. Below, all possible options are listed. Please note, that some data resources require a licence agreement by the end user. If such a datasource is integrated in your app, users will have to agree to the licence in pop-up window in the Drugst.one app.

Some datasets require a licence agreement by the end user.

The default Drugst.One database undergoes automatic updates on a weekly basis. For a more stable version that is only updated once a year, please refer to the stable version here.

Unlicenced Sources

Source	Version	Type	Description
Chembl	tbi	Protein-Drug	ChEMBL is a database of bioactive drug-like small molecules, abstracted and curated from the primary scientific literature.
DGIdb	tbi	Protein-Drug	DGIdb contains information on drug-gene interactions and the druggable genome, mined from over thirty trusted sources.
NeDRex	tbi	Protein-DrugProtein-ProteinDrug-DisorderProtein-Disorder	NeDRex is a network medicine platform for disease module identification and drug repurposing.
STRING	tbi	Protein-Protein	STRING is a protein-protein interaction database with interactions computed by combining the probabilities from the different evidence channels.
BioGRID	tbi	Protein-Protein	BioGRID is a biomedical interaction repository with data compiled through comprehensive curation efforts
APID	tbi	Protein-Protein	APID unifies PPIs from primary databases of molecular interactions (BIND, BioGRID, DIP, HPRD, IntAct, MINT) and also from experimentally resolved 3D structures (PDB).
DisGeNET	tbi	Protein-Disorder	DisGeNET is a discovery platform containing one of the largest publicly available collections of genes and variants associated to human diseases.

Licenced Sources

Source	Version	Type	Description
DrugBank	tbi	Protein-DrugDrug-Disorder	DrugBank is a bioinformatics and cheminformatics resource containing information on drugs and drug targets.
NeDRex	tbi	Protein-DrugProtein-ProteinDrug-DisorderProtein-Disorder	NeDRex is a network medicine platform for disease module identification and drug repurposing.

Network

The Drugst.One network is based on the javascript visualization library vis.js network library version 9.1.6.

Algorithms

Drugst.One offers the possibility to analyze the displayed genes and proteins (nodes) in regard to network models and drug repurposing. Given nodes can be connected by shortest paths, modules can be extended by new highly interconnected nodes. Further, drugs can be found that target the nodes in the network. Thus, Drugst.One also functions as a drug repurposing tool.

To this end, Drugst.One offers different algorithms which can be chosen by the user to fit the application case. It is up to the developer of the website, which algorithms are available for selection or if the analysis function is enabled at all.

Algorithm	Gene Search	Drug Search
Multi-Level Steiner Trees	✓	X
KeyPathwayMiner	✓	X
Harmonic Centrality	✓	✓
Degree Centrality	✓	✓
Betweenness Centrality	✓	X
TrustRank	✓	✓
Network Proximity	X	✓

Runtime analysis

To estimate the runtime of the Drugst.One algorithms, the algorthms were executed for each scenario (drug-target & drug search) on multiple diseases from NeDRexDB with varying input sizes. For the sake of this runtime analysis, the diseases were grouped based on the number of known disease genes (inputs of sizes 10, 25, 50, and 100). If necessary, the disease-associated genes were randomly subsampled. The code as well as the results can be found here: https://github.com/drugst-one/algo-running-times.

Multi-Level Steiner Trees

The Multi-level Steiner tree algorithm is used to approximate the minimum spanning tree spanned by the seed nodes in a reasonable time. The implementation is adopted from Ahmed et al. It can be used to create a minimum spanning subnetwork between user-selected seed nodes, which happen to be central interaction partners between the seed nodes, and thus represent favorable drug-targets.

Number of Steiner trees: Number of computed Steiner trees to approximate minimum spanning tree. A higher number leads to more variations at the cost of a longer runtime.
Tolerance: Indicates how much the subsequent trees may increase the number of edges.

KeyPathwayMiner

KeyPathwayMiner (KPM) is an online tool developed by Alcaraz et al. for pathway enrichment analysis. Users have the option to utilize KPM for their drug-target search by selecting seed nodes in the GGI network and letting KPM find an interaction network of genes that are commonly dysregulated spanned by the seed genes. The resulting proteins are presumably functionally related to the seed nodes, and therefore are suitable drug-target candidates. Only one parameter K has to be set by the user which defines the amount of permitted intermediate nodes that are neither part of the seed nodes nor the common pathway.

Additional proteins (k): Number of intermediate nodes that are allowed in between the seed nodes.

Harmonic Centrality

Harmonic centrality measurement can be described as the average shortest distance from each node to all other nodes in a network. This measurement is the equivalent of harmonic centrality for disconnected graphs. Formally speaking, it can be annotated as

centrality_harmonic(x) = ∑_y≠x^y( 1 / dist(x, y) )

where x is a given node and 1/dist(x, y) = 0 if dist(x, y) = ∞ (reference). The closer a node is to other nodes, the higher the score. It has already been proven successful in a number of biological network problems for instance with metabolic or PPI networks .

Degree Centrality

Degree centrality measurement is obtained by ranking the nodes in a network based on their degree, which is defined as the number of neighbors a node has divided by the number of nodes. It be described as

centrality_degree(x) = deg(x)

where x is a given node and deg(x) is its degree. While it is a commonly used network analysis technique, it most importantly has been shown useful in the identification of essential proteins in PPI networks. Thus, it is a simple approach to classifying the network-related importance of a particular protein. In Drugst.One it can be used to discover valuable drug-targets or drugs, based on the seed selection given by the user.

Betweenness Centrality

Betweenness is obtained by finding the shortest paths for each pair of nodes in the network and assessing the number of shortest paths that pass through a particular node, such that a measure of the centrality of a node in a network global context is received. Betweenness Centrality has been established as a common measurement in network biological application and is especially practical in finding communities in large networks. In Drugst.One, betweenness is based on the shortest paths between the seed nodes only and can be used to find drug targets with maximized connectivity to all seeds.

Trustrank

TrustRank is based on the same concepts as the Google PageRank algorithm and Harmonic Centrality. A crawler searches the network based on user-selected seeds and ranks visited nodes, damping the score based on the distance traveled. The damping factor can be set by the user in a range from 0-1, with a higher damping factor causing the crawler to explore nodes in close proximity or in larger portions of the GGI network. In Drugst.One, TrustRank is able to find putative drug targets as well as drug candidates.

Damping Factor: The speed with which the crawler propagates through the network. The larger the factor, the larger the proportion of the network that is considered.

Network Proximity

As introduced in Sadegh et al. we adopted the modified version of the originally proposed network-based proximity metric proposed by Guney et al.,. Network proximity is defined as the average length of shortest paths from target protein nodes of a drug to a set of disease nodes, called seeds. A background distribution is computed by creating a specified number (default 32) of random drug target sets and a specified number of random seed sets (default 32). Drug target set sizes are chosen to represent the observed drug degrees in the drug-target network, differing from the original bin-based degree-preserving set randomization. The average shortest path between each observed drug-target set and the input seed set is compared to the background distribution to compute a statistical significance score (z-core) using mean and standard deviation of the background. This algorithm was adopted in Drugst.One such that highest-scoring drugs are returned to the user as candidate drugs.

Number Random Seed Sets: Default 32. Sets the number of random seed sets generate to establish the background distribution.
Number Random Drug Target Sets: Default 32. Sets the number of random drug target sets generated to establish the background distribution.

General Parameters

All of the algorithms can be adjusted to your needs with parameters. We also provide custom options such as filtering out unapproved or nutraceutical drugs. In general, the following options exist:

Result Size: Number of returned results (drug-targets or drugs)
Maximum Degree: Option to filter out hub genes. if set to > 0, genes with a network degree in the complete gene-drug interaction network above this threshold will be excluded.
Hub Penalty: Penalize genes with a large degree in the network. The higher the value, the more algorithms will try to avoid genes with a high network degree in the complete gene-drug interaction network.
Filter Edges: If set, only the shortest paths to the results (drug-target genes or drugs) will be displayed in the resulting network. Otherwise, all found pathways will be shown.

Other

Python Package

Apart from the main drugst.one application and web-based API a python package was developed. It provides convenient wrapper functions to call the API and mimic the functionalities of the drugst.one plugin. It is available through the pypi repository and documentation is provided.

Contact

Privacy Policy

The Drugst.One plugin only stores data to provide full functionality to the user. Upon starting an analysis task in the explorer, a task identification string is anonymously stored in your browser. This enables you to revisit previous analysis tasks without storing the URLs and to select tasks to summarize them. When removing the data of the Drugst.One plugin, previous analysis tasks will not appear in the task list anymore. The Drugst.One plugin uses no cookies or tracks of user data in any way.

All data is processed directly the Drugst.One Server if not stated otherwise by the host website. Task results are stored on the server such that tasks can be revisited and shared. All data will be deleted on inactivity.

FAQ

coming soon

How to cite

If you use Drugst.One in your work, please cite as follows:

Plain

 Maier A, Hartung M, Baumbach J, et al. Drugst.One — a plug-and-play solution for online systems medicine and network-based drug repurposing, Nucleic Acids Research, 2024; gkae388, https://doi.org/10.1093/nar/gkae388

BibTeX

 @article{10.1093/nar/gkae388,
    author = {Maier, Andreas and Hartung, Michael and Abovsky, Mark and Adamowicz, Klaudia and Bader, Gary D and Baier, Sylvie and Blumenthal, David B and Chen, Jing and Elkjaer, Maria L and Garcia-Hernandez, Carlos and Helmy, Mohamed and Hoffmann, Markus and Jurisica, Igor and Kotlyar, Max and Lazareva, Olga and Levi, Hagai and List, Markus and Lobentanzer, Sebastian and Loscalzo, Joseph and Malod-Dognin, Noel and Manz, Quirin and Matschinske, Julian and Mee, Miles and Oubounyt, Mhaned and Pastrello, Chiara and Pico, Alexander R and Pillich, Rudolf T and Poschenrieder, Julian M and Pratt, Dexter and Pržulj, Nataša and Sadegh, Sepideh and Saez-Rodriguez, Julio and Sarkar, Suryadipto and Shaked, Gideon and Shamir, Ron and Trummer, Nico and Turhan, Ugur and Wang, Rui-Sheng and Zolotareva, Olga and Baumbach, Jan},
    title = "{Drugst.One — a plug-and-play solution for online systems medicine and network-based drug repurposing}",
    journal = {Nucleic Acids Research},
    pages = {gkae388},
    year = {2024},
    month = {05},
    abstract = "{In recent decades, the development of new drugs has become increasingly expensive and inefficient, and the molecular mechanisms of most pharmaceuticals remain poorly understood. In response, computational systems and network medicine tools have emerged to identify potential drug repurposing candidates. However, these tools often require complex installation and lack intuitive visual network mining capabilities. To tackle these challenges, we introduce Drugst.One, a platform that assists specialized computational medicine tools in becoming user-friendly, web-based utilities for drug repurposing. With just three lines of code, Drugst.One turns any systems biology software into an interactive web tool for modeling and analyzing complex protein-drug-disease networks. Demonstrating its broad adaptability, Drugst.One has been successfully integrated with 21 computational systems medicine tools. Available at https://drugst.one, Drugst.One has significant potential for streamlining the drug discovery process, allowing researchers to focus on essential aspects of pharmaceutical treatment research.}",
    issn = {0305-1048},
    doi = {10.1093/nar/gkae388},
    url = {https://doi.org/10.1093/nar/gkae388},
    eprint = {https://academic.oup.com/nar/advance-article-pdf/doi/10.1093/nar/gkae388/57850045/gkae388.pdf},
}

DOI URL: https://doi.org/10.1093/nar/gkae388

Network Exploration and Drug Repurposing on your website

Drugst.One Initiative

Funding

Get Started

Basic Integration

AngularJS

Django

Vue.js

R-Shiny

Other Frameworks

From Scratch

The Drugst.One UI

Network

Sidebar Panels

Detail View

Network Overview

Query Node

Connect Genes

Quick Drug Search

Analysis

Tasks

Selection

Views

Network Menu

Task Execution

Analysis Window

Customize Drugst.One

Configuration

Config Object

Group Configuration

Groups

Node Groups

Edge Groups

Default Groups

Network

Nodes

Edges

Version Selection

Style Adjustments

Events

Standalone

Drugst.One Buttons

Bright Colors

Dark Colors

Outlined

Options

Set Nodes

Set Edges

Network Configuration

API

GET

POST

Implementation

GitHub

Datasources

Unlicenced Sources

Licenced Sources

Network

Algorithms

Runtime analysis

Multi-Level Steiner Trees

KeyPathwayMiner

Harmonic Centrality

Degree Centrality

Betweenness Centrality

Trustrank

Network Proximity

General Parameters

Other

Python Package

Contact

Privacy Policy

FAQ

How to cite