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!
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.
Is life worth living? 