Make interactive dashboard with Dash #chemoinformatcs #RDKit

I am happy that I could have fruitful discussions in mishima.syk #13 held on last Saturday.
And I knew the new package for data visualization named dash.
From the document, dash can provide interactive dashboard for data analysis. I read the documents and wrote sample code.

Following code provides 2D scatter plot with two descriptors which are calculated with RDKit. Callback function of Dash can make interactive response.

It is worth to know that by using dash, I can make cool web app with out JS coding!

import dash
import dash_core_components as dcc
import dash_html_components as html
from dash.dependencies import Input, Output

import os
import argparse
from rdkit import Chem
from rdkit.Chem import Descriptors
import plotly.graph_objs as go
descdict = dict(Descriptors._descList)
app = dash.Dash(__name__)

def getParser():
    parser = argparse.ArgumentParser()
    parser.add_argument('--sdf', default='cdk2.sdf', type=str)
    return parser

app.layout = html.Div(children=[
    html.H1(children='Hello Chemoinfo'),
    html.Div(children='''
    Dash : sample plot
    '''),

    html.Div([dcc.Dropdown(id='x-column',
                           value='MaxEStateIndex',
                           options=[{'label': key, 'value': key} for key in descdict.keys()],
                           style={'width':'48%', 'display':'inline-block'}),
              dcc.Dropdown(id='y-column',
                           value='MaxEStateIndex',
                           options=[{'label': key, 'value': key} for key in descdict.keys()],
                           style={'width':'48%', 'display':'inline-block'}),
                           ]),
    dcc.Graph(id='example-graph'),
    ])

@app.callback(
    Output('example-graph', 'figure'),
    [Input('x-column', 'value'),
     Input('y-column', 'value')]
)
def update_graph(x_column_name, y_column_name):
    args = getParser().parse_args()
    mols = [mol for mol in Chem.SDMolSupplier(args.sdf) if mol != None]
    x = [descdict[x_column_name](mol) for mol in mols]
    y = [descdict[y_column_name](mol) for mol in mols]
    return {'data':[go.Scatter(
        x=x,
        y=y,
        text=[Chem.MolToSmiles(mol) for mol in mols],
        mode='markers',
        marker={
            'size':15,
            'opacity':0.5
        }
    )],
    'layout':go.Layout(
        xaxis={'title':x_column_name},
        yaxis={'title':y_column_name}
    )}
if __name__=='__main__':
    app.run_server(debug=True)

Let’s run the app

iwatobipen$ python app.py

You can see interactive plot. This is very simple example for dash usage. I would like to make more content rich dashboard for chemoinformatics near the future.

Advertisement

Published by iwatobipen

I'm medicinal chemist in mid size of pharmaceutical company. I love chemoinfo, cording, organic synthesis, my family.

9 thoughts on “Make interactive dashboard with Dash #chemoinformatcs #RDKit

  1. It’s actually a great and useful piece of info. I am satisfied that you shared this useful
    information with us. Please keep us informed like this.

    Thanks for sharing.

  2. All your programs are very helpful! Thank you! I repeated your dash work and I have a question. In RDKit you can display a molecular feature (say a benzene ring) in highlights. For example, m = Chem.MolFromSmiles(‘smiles’) then Descriptors.fr_benzene(m), and if you now display m, it will highlight the benzene ring if the molecule has one. I tried so hard to get this into your smi2svg function but couldn’t get it to display the molecules with highlights. Do you have any suggestions for me? Thank you so much!

    1. Thank you very much! It helped. I can display structures with highlights now in dash thanks to you!

  3. Thank you very for all your posts. I am new on dash and I encountered some difficulties. I am trying to modify your code in order to generate dasboard for my dataframe containing isoSMILES of kinases inhibitors. When I run the browser the select molecules menu is not active. what would be the matter.
    Thank you in advance for your response and once again Whaou for all your posts

    1. Hi,
      Thank you for your comment.
      I’m sorry but I can’t understand details of your code from the comment. Do you have github repo? If you have, could you please share your code?
      Thanks,

Leave a Reply

Fill in your details below or click an icon to log in:

WordPress.com Logo

You are commenting using your WordPress.com account. Log Out /  Change )

Twitter picture

You are commenting using your Twitter account. Log Out /  Change )

Facebook photo

You are commenting using your Facebook account. Log Out /  Change )

Connecting to %s

This site uses Akismet to reduce spam. Learn how your comment data is processed.

%d bloggers like this: