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__ )
Bootstrap(app)
dataset = collection.find()
dataset = [ data for data in dataset]

@app.route("/")
def top():
    return render_template("top.html", data=dataset)



@app.route("/_draw/<pairid>")
#@app.route("/_draw")
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.

<!DOCTYPE HTML>
<html>
<head>
	<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">
	$(function(){
		$("td.pair_id").mouseover(function(){
			var url = "/_draw/"+this.textContent;
			$.ajax({
				type:"GET",
				url: url,
				datatype:"json",
				contentType:"application/json; charset=utf-8",
				success: function(json){
					$("#moll").html(json.ml);
					$("#molr").html(json.mr);

				}
			});
		});
	});
	</script>

</head>

<script>
</script>


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

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 ))
    try:
        Chem.Kekulize( mol )
        rdDepictor.Compute2DCoords( mol )
    except:
        rdDepictor.Compute2DCoords( mol )
    drawer = rdMolDraw2D.MolDraw2DSVG( 300, 200 )
    
    drawer.DrawMolecule( mol, highlightAtoms=atoms )
    drawer.FinishDrawing()
    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.
https://github.com/iwatobipen/mishimasyk/tree/master/flaskymmp

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

広告

コメントを残す

以下に詳細を記入するか、アイコンをクリックしてログインしてください。

WordPress.com ロゴ

WordPress.com アカウントを使ってコメントしています。 ログアウト / 変更 )

Twitter 画像

Twitter アカウントを使ってコメントしています。 ログアウト / 変更 )

Facebook の写真

Facebook アカウントを使ってコメントしています。 ログアウト / 変更 )

Google+ フォト

Google+ アカウントを使ってコメントしています。 ログアウト / 変更 )

%s と連携中