Draw Molecular Matched Pair as SVG.

Somedays ago, I posted drawing molecule as SVG using RDKit.
It works fine.
So, I challenged draw MMP as SVG.
My plan is …
1. Generate MMP using RDKit.
2. Store MMP data to MongoDB.
3. Provide MMP data to user using flask.
4. Draw structure on the fly using Ajax.
OK, Let start!
Step 1 is skipped. If reader who want to know how to generate MMP using RDKit I recommend check http://www.rdkit.org/.
Step 2 Use Mongodb.
I used mongodb from pymongo.( I installed using following command ‘conda install pymongo’.)
Data is stored in MongoDB like json format.
Like this..
> db.molcollection.findOne()
“_id” : ObjectId(“55e84d6b4058aa5e3eade147”),
“idl” : “2963575”,
“transform” : “[*:1]c1cccc([*:2])c1>>[*:1]c1ccc([*:2])cc1”,
“moll” : “Cc1cccn2cc(-c3cccc(S(=O)(=O)N4CCCCC4)c3)nc12”,
“context” : “[*:1]c1cn2cccc(C)c2n1.[*:2]S(=O)(=O)N1CCCCC1”,
“pairid” : “2963575>>1156028”,
“molr” : “Cc1cccn2cc(-c3ccc(S(=O)(=O)N4CCCCC4)cc3)nc12”,
“idr” : “1156028”
OK, let’s make APP.
I used some javascript library for convenience.
jquery, footable are very cool and useful.

App.py is very simple script.
Root page provide toppage and _moldraw function return mmp as SVG.
I used simple tricks for draw molecule, using transform data to highlight structure that is transformed.

Script was following code.

from flask import Flask, render_template, request, url_for, jsonify
from flask_bootstrap import Bootstrap
from moduleset import chemistry
import pandas as pd
import numpy as np
import json
import pymongo
from pymongo import MongoClient
import urllib

db = MongoClient().test
collection = db.molcollection
app = Flask( __name__ )
dataset = collection.find()
dataset = [ data for data in dataset]

def top():
    return render_template("top.html", data=dataset)

def drawmol(pairid):
    pairid = urllib.parse.unquote(pairid)

    res = collection.find_one({ "pairid" : pairid })
    moll = res['moll']
    molr = res['molr']
    trans = res['transform']
    core = res["context"]
    trans = trans.replace("[*:1]","[*]")
    trans = trans.replace("[*:2]","[*]")
    trans = trans.replace("[*:3]","[*]")

    transl, transr = trans.split(">>")

    svgl = chemistry.depictmol( moll, transl )
    svgr = chemistry.depictmol( molr, transr )

    return jsonify( ml=svgl, mr=svgr )

if __name__ == '__main__':
    app.run( debug = True )

I embedded javascript directory in top.html file.
Footable.js is very easy to use and it can generate cool table view!
I used jQuery to show molecule when user mouseover the pairID.

	<title>test web page</title>
	<link href={{ url_for("static", filename="js/FooTable-2/css/footable.core.min.css")}} rel="stylesheet" type="text/css" />
    <link href={{ url_for("static", filename="js/FooTable-2/css/footable.standalone.min.css")}} rel="stylesheet" type="text/css" />
	<script type="text/javascript" src={{url_for("static", filename="js/jquery-2.1.4.min.js")}}></script>
	<script type="text/javascript" src={{url_for("static", filename="js/FooTable-2/js/footable.js")}}></script>
	<script type="text/javascript" src={{url_for("static", filename="js/FooTable-2/js/footable.sort.js")}}></script>
	<script type="text/javascript" src={{url_for("static", filename="js/FooTable-2/js/footable.paginate.js")}}></script>
	<script type="text/javascript">
			var url = "/_draw/"+this.textContent;
				url: url,
				contentType:"application/json; charset=utf-8",
				success: function(json){




<div style="float:left;width:400px">
	<table class="footable" data-page-size="5">
	<th data-type="numeric">IDL</th>
	{% for row in data %}
	<tr><td>{{row['idl']}}</td><td>{{row['idr']}}</td><td class='pair_id'>{{row['pairid']}}</td></tr>
	{% endfor %}
							<td colspan="5">
								<div class="pagination pagination-centered"></div>
<div style="float:left;" >
<table name="pair_table" border=1>
<tr style="height:200px"><td style="width:300px;" id="moll">MOL</td><td style="width:300px;" id="molr">MOR</td></tr>
<script type="text/javascript">
	$(function () {

Finally I wrote script to drawing molecule like following

from rdkit import Chem
from rdkit.Chem import rdDepictor, AllChem
from rdkit.Chem.Draw import rdMolDraw2D

def depictmol( smiles, core ):
    #mol = Chem.MolFromSmiles( smiles  )
    mol = Chem.MolFromSmiles( smiles  )
    atoms = mol.GetSubstructMatch(Chem.MolFromSmarts( core ))
        Chem.Kekulize( mol )
        rdDepictor.Compute2DCoords( mol )
        rdDepictor.Compute2DCoords( mol )
    drawer = rdMolDraw2D.MolDraw2DSVG( 300, 200 )
    drawer.DrawMolecule( mol, highlightAtoms=atoms )
    svg = drawer.GetDrawingText().replace( 'svg:', '' )
    return svg

Run the script from terminal.
It works fine!
Screen Shot 2015-09-06 at 9.31.10 PM

Upload code snippet to myrepo.

I want to align pair molecules core, but it can not now.


Published by iwatobipen

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

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 )

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: