Make interactive chemical space plot with Dash #RDKit #useful_rdkit_utils #Dash #Chemoinfomratics

Recently I posted really useful package named molplotly. The package can make interactive plot with compound structure as hover.

Inspired the activity, I tried to wrote code for making chemical space mapping with interactive rendering of molecules.

Base code came from my previous post. There small changes in dash part because of I used new version of dash in this code.

Here is a code. The points of the code are below.

1. I used BytesIO for reading uploaded file without save it as temporaly file. And loaded external css file to make horizontal layout of compound structure and scatterplot.

import base64
import os
import io
import numpy as np
import pandas as pd
import flask
import dash
import dash_dangerously_set_inner_html as dhtml
from dash import dcc
from dash import html
from dash.dependencies import Input, Output, State
import plotly.express as px
import plotly.graph_objects as go
from rdkit import Chem
from rdkit.Chem import PandasTools
from rdkit.Chem import Descriptors
from rdkit.Chem import Draw
from rdkit.Chem.Draw import rdDepictor
from sklearn.decomposition import PCA
from sklearn.manifold import TSNE
import molplotly4flask
import useful_rdkit_utils
import dash_bootstrap_components as dbc


def smi2svg(smi):
    mol = Chem.MolFromSmiles(smi)
    rdDepictor.Compute2DCoords(mol)
    mc = Chem.Mol(mol.ToBinary())
    Chem.Kekulize(mc)
    drawer = Draw.MolDraw2DSVG(200,200)
    drawer.DrawMolecule(mc)
    drawer.FinishDrawing()
    svg = drawer.GetDrawingText().replace('svg:','')
    return svg

upload_style = {
    "width": "50%",
    "height": "120px",
    "lineHeight": "60px",
    "borderWidth": "1px",
    "borderStyle": "dashed",
    "borderRadius": "5px",
    "textAlign": "center",
    "margin": "10px",
    "margin": "3% auto",
}

#https://stackoverflow.com/questions/63459424/how-to-add-multiple-graphs-to-dash-app-on-a-single-browser-page
external_stylesheets = ['https://codepen.io/chriddyp/pen/bWLwgP.css']
app = dash.Dash(__name__, external_stylesheets=external_stylesheets)

app.config.suppress_callback_exceptions=True

vals = {'PC-1':'PC-1',
        'PC-2':'PC-2',
        'TSNE-1':'TSNE-1',
        'TSNE-2': 'TSNE-2'}


df_bar = pd.DataFrame({
    "Fruit": ["Apples", "Oranges", "Bananas", "Apples", "Oranges", "Bananas"],
    "Amount": [4, 1, 2, 2, 4, 5],
    "City": ["SF", "SF", "SF", "Montreal", "Montreal", "Montreal"]
})

fig2 = px.bar(df_bar, x="Fruit", y="Amount", color="City", barmode="group")


app.layout = html.Div(children=[
    html.H1(children='Hello Chemoinfo'),
        dcc.Upload(
            id='sdf',
            children=html.Div(['upload sdf']),
            style=upload_style,
        ),
     
    html.Div(children='''
    Dash : sample plot
    '''),
 
    html.Div([dcc.Dropdown(id='x-column',
                           value='PC-1',
                           options=[{'label': key, 'value': key} for key in vals.keys()],
                           style={'width':'48%', 'display':'inline-block'}),
              dcc.Dropdown(id='y-column',
                           value='PC-2',
                           options=[{'label': key, 'value': key} for key in vals.keys()],
                           style={'width':'48%', 'display':'inline-block'}),
                           ]),
    html.Div([
        html.Div([html.Div(id="molimg")], className="two columns"),
        html.Div([dcc.Graph(id='mol_graph')], className="eight columns")
        ], 
        className="row"
        ),
    
    #html.Div([dcc.Graph(id='chemical-space')])
    ])

def parse_content(contents, filename):

    content_type, content_string = contents.split(",")
    decoded = base64.b64decode(content_string)
    bio = io.BytesIO(decoded)
    bio.seek(0)
    try:
        df = PandasTools.LoadSDF(bio)
    except Exception as e:
        print(e)
        return html.Div([f"{filename} error occured during file reading"])
    X = [useful_rdkit_utils.mol2numpy_fp(m, 2, 1024) for m in df.ROMol]
    pca = PCA(n_components=2)
    tsne = TSNE()
    pca_res = pca.fit_transform(X)
    tsne_res = tsne.fit_transform(X)
    df['PC-1'] = pca_res[:,0]
    df['PC-2'] = pca_res[:,1]
    df['TSNE-1'] = tsne_res[:,0]
    df['TSNE-2'] = tsne_res[:,1]
    return df

@app.callback(
    Output('mol_graph', 'figure'),
    [Input('sdf', 'contents'),
    Input('x-column', 'value'),
    Input('y-column', 'value')],
    [State('sdf', 'filename')],
    prevent_initial_call=True
)
def drawgraph(contents,x_column_name, y_column_name ,filename):
    df = parse_content(contents, filename)
    return {'data':[go.Scatter(
        x=df[x_column_name],
        y=df[y_column_name],
        #text=['mol_{}'.format(i) for i in range(len(mols))],
        text=[Chem.MolToSmiles(mol) for mol in df.ROMol],
        mode='markers',
        marker={
            'size':15,
            'opacity':0.5
        }
    )],
    'layout':go.Layout(
        xaxis={'title':x_column_name},
        yaxis={'title':y_column_name}
    )}

@app.callback(
    Output('molimg', 'children'),
    [Input('mol_graph', 'hoverData'),
    ]
)
def update_img(hoverData):
    try:
        svg = smi2svg(hoverData['points'][0]['text'])
    except:
        svg = 'Select molecule'
    return dhtml.DangerouslySetInnerHTML(svg)

if __name__=="__main__":

    app.run_server(debug=True)

After writing the code, run it with following command.

$ python app.py

Then I could see interactive chemical space plot of uploaded file. Like below ;)

Chemical space is represented with PCA/TSNE. And I used useful_rdkit_utils for calculation of molecular fingerprint. The package is worth to use for chemoinformatics task.

To use dash, pythonista can make really cool view in short time I think. It’s really useful for chemoiformaticians. Enjoy OSS and coding!