Drugst.One turns your tool that outputs a list of genes or proteins into a feature rich, drug repurposing web tool with interactive network visualization.
With just 3 lines of code, users of your website can benefit from the exploratory functions and immediately start researching the results of your tool.
<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. <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>
<body>
<drugst-one></drugst-one>
</body>
: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;
;
}
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>
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>
import {CUSTOM_ELEMENTS_SCHEMA, NgModule} from '@angular/core';
@NgModule({
declarations: [],
imports: [],
bootstrap: [AppComponent],
schemas: [CUSTOM_ELEMENTS_SCHEMA],
})
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 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 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'
}
}
}
module.exports = {
externals: {
'drugst-one': 'ELEMENT'
}
}
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.
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 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.
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.
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.
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.
The overview panel shows a summary of the currently displayed network consisting of the numbers of edges and nodes.
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.
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.
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.
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.
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.
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.
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.
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.
In the analysis mode, the network menu has additionally the functions to highlight seed genes used for the analysis.
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.
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.
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 Drugst.One component accepts 3 different arguments: 'config', 'groups' and 'network'.
<drugst-one
config="{}"
groups="{}"
network="{}">
</drugst-one>
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.
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. |
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 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. nodeGroup1: {
groupName: "My Node Group",
color: "#FF0000",
shape: "diamond",
type: "One of my nodes"
}
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.jsName 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). edgeGroup1: {
groupName: "My Edge Group",
color: "#000000",
}
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.
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
}
}
}
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.
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.
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"}] }
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"}] }
You have the possibility to select any tagged version of Drugst.One in your project. <head>
<script src="https://cdn.drugst.one/latest/drugstone.js"></script>
<link rel="stylesheet" href="https://cdn.drugst.one/latest/styles.css">
</head>'
<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>'
v1.2.2
refers to the specific version. To load the latest committed version of drugst.one, the 'nightly' tag can be used: <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 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!
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)})
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 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)})
{
"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
}
}
document.getElementById("drugstone-component-id").setAttribute("task-id", "GFpwPHkc6gsXGvIx1g83w0hO8i95przG")
<drugst-one
id='drugstone-component-id'
config='{...}'
network='{...}'
task-id='GFpwPHkc6gsXGvIx1g83w0hO8i95przG'
>
</drugst-one>
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:
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.
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.
<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-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-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>
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
Set Edges
Network Configuration
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.
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
https://drugst.one?nodes=PTEN,TP53&edges=PTEN%20TP53&autofillEdges=false
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
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: {...}
}
)
https://drugst.one?id=18baf56f4fca46e3952eaad97681f658
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.
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.
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. |
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. |
The Drugst.One network is based on the javascript visualization library vis.js network library version 9.1.6.
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 | ✓ |
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.
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.
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.
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
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 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
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 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 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.
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.
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:
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.
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.