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:
Symbol
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;
   ;
}