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