SAR visualization with RDKit ver2.

Somedays ago I posted SARviz test code using RDKit.
It was based on command line type. So, I think it is easy to use for applying SDF etc but not familiar for chemist.
Because almost of chemist, don’t like black command screen….;-)
Next step, I tried to make very simple web-app using sarviz.py.
I used flask for web framework and JSME for molecular editor.( Point!! I want to make app, only using open source tools !!!)
Structure of app folder is following.
– chemolib folder stored library for calculate molprop. and make image.
– dataprep folder strored sklearn predictive model as pkl format.
– static folder stored static files. js and tempfig( figure generated sarviz function. ) => static and templates folder is needed to run app.( flask manner.)

sarviz_web/
├── README.md
├── __init__.py
├── app.py
├── chemolib
│   ├── __init__.py
│   ├── __pycache__
│   │   ├── __init__.cpython-34.pyc
│   │   └── sarviz.cpython-34.pyc
│   └── sarviz.py
├── dataprep
│   └── svcmodel.pkl
├── static
│   ├── js
│   │   ├── jquery-2.2.2.min.js
│   │   └── jsme
│   │       ├── 0C2FB4F99F888620E6F186FB989A1E5F.cache.js
| ~~~~~~~~~~~~~~cut too long ~~~~~~~~~~~~~~~
│   └── tempfig
│       └── activemol_dummy.png
└── templates
    ├── query.html
    ├── result.html
    ├── template.html
    └── top.html

App.py is main code of this app.
But not so complicated.

# this is test app for SARviz.
# Author iwatobipen
# Licence FREE and please enjoy chemoinfromatics

from flask import Flask
from flask import render_template, url_for
from flask_bootstrap import Bootstrap
from flask_wtf import Form
from wtforms import StringField
from wtforms.validators import DataRequired
from chemolib import sarviz
import pickle
from rdkit import Chem

class Smiles( Form ):
    smi = StringField( "- mol to smiles", validators=[ DataRequired() ] )

def create_app():
    app = Flask( __name__ )
    Bootstrap( app )
    return app

app = create_app()

@app.route( "/top/" )
def top():
    return render_template( "top.html" )

@app.route( "/predict/", methods = ( "GET", "POST" ) )
def predict():
    actcls = { -1: "non-active", 1: "active" }
    form = Smiles( csrf_enabled=False )
    if form.validate_on_submit():
        smi = form.smi.data
        try:
            mol = Chem.MolFromSmiles( smi )

        except:
            mol = Chem.MolFromSmiles( "c1ccccc1" )
        # get molwt, mollogp, tpsa
        molprop = sarviz.molprop_calc( mol )
        # predict active / nonactive as integer and save image.
        res, fname = sarviz.mapperfunc( mol )
        res = int( res[0] )
        return render_template( "result.html", res = actcls[res], fname=fname, molprop = molprop )
    else:
        return render_template( "query.html", form = form, fname="dummy.png" )

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

And one of key function is sarviz.py.
I used uuid to avoid crash of names.
I added some function to calculate molecular property.
Property will be provided for user as table format.

# this is core function of SAR visualizetion.

from rdkit import Chem, DataStructs
from rdkit.Chem import AllChem
from rdkit.Chem import Descriptors
from rdkit.Chem.Draw import SimilarityMaps
from sklearn.svm import SVC
from matplotlib import cm
import numpy as np
import pickle
import uuid

modelf = open( "./dataprep/svcmodel.pkl", "rb" )
model = pickle.load( modelf )

def calc_fp_arr( mol ):
    fp = AllChem.GetMorganFingerprintAsBitVect( mol, 2 )
    arr = np.zeros((1,))
    DataStructs.ConvertToNumpyArray( fp, arr )
    return arr

def getProba( fp, probabilityfunc ):
    # probability function returns 2 x 1 matrix.
    return probabilityfunc( fp )[0][1]
#save fig random or unique name!!! avoid chaching
def mapperfunc( mol ):
    fig, weight = SimilarityMaps.GetSimilarityMapForModel( mol,
                                                           SimilarityMaps.GetMorganFingerprint,
                                                            lambda x:getProba( x, model.predict_proba ),
                                                            colorMap=cm.bwr )
    cls_result = model.predict( calc_fp_arr(mol) )
    fname = uuid.uuid1().hex+".png"
    fig.savefig( "static/tempfig/"+fname, bbox_inches = "tight" )
    return cls_result, fname

def molprop_calc( mol ):
    mw = round( Descriptors.MolWt( mol ), 2 )
    mollogp = round( Descriptors.MolLogP( mol ), 2 )
    tpsa = round( Descriptors.TPSA( mol ), 2  )
    return [ mw, mollogp, tpsa ]

Finally I made template. It was difficult task for me, because I’m not good at html… ;-/
Following code shows only results.html. I uploaded all code to my github repo.
Using Flask-Boot strap for good visualisation.

{% extends "template.html" %}

{% block header %}
{% endblock %}

{% block content %}
<div class="container">
<div class="row">
<div class="col-md-5">
      <img src="{{ url_for( 'static', filename='tempfig/'+fname) }}" height="300" width="300" alt="IMAGE"></br></div>
<div class="col-md-3">
<table class="table table-hover">
<thead>
<tr>
<th> Pram</th>
<th> Val</th>
</tr>
</thead>
<tbody>
<tr>
<td>MW</td>
<td>{{ molprop[0] }}</td>
</tr>
<tr>
<td>MolLogP</td>
<td>{{ molprop[1] }}</td>
</tr>
<tr>
<td>TPSA</td>
<td>{{ molprop[2] }}</td>
</tr>
<tr>
<td>Predicted</td>
<td>{{ res }}</td>
</tr>
<tr>
<td>#</td>
<td><a href="/predict/"> predict again </a></td>
</tr>
</tbody>
</table>
</div>
</div>
</div>
{% endblock %}

OK, All done.
Let’s run app.
From terminal tipe.
python app.py
Then access localhost:5000/predict.
User get query input page.
Screen Shot 2016-03-27 at 8.04.16 AM

I embed javascript function to get smiles from JMSE. When user mouse over the button, smiles will be got automatically.

Then push button, prediction will start and image will be generated.
Screen Shot 2016-03-27 at 8.04.29 AM

This accuracy of this app depend on performance of sklern model.
I’ll introduce in this point in mishima.syk8. 😉
Readers who are interested in mishima.syk, I recommend check following URL.
The event will be held on 28.Mar.2016.
http://connpass.com/event/29258/

And my code was uploaded to my repo.
https://github.com/iwatobipen/sarviz_flask

Form handling in Flask

Now I’m coding simple design-tracking system. Almost looks like a blog service.

I use Flask as web app flame work. But I’m not good at web design. It’s difficult for me to make form template.

There are some extensions about Flask.  And I found that using Flask-Bootstrap( Bootstrap ) make easy to beautiful layout.

Key point was that, wrap form tag with <div class=”form-group tag”> and set “form-control” class in form.field.

 

{% extends "base.html" %}
{% block content %}
<div class='content container'>
<div class="row">
<div class="col-md-12">
<p>Project Code {{ pj }}</p>
<p> DESIGN TRACKER</p>
</div>
</div>
<div class="row">
<div class="col-md-4">

<form role="form" action="/hypothesis/create/", method='post'>
<div class="form-group">
{% for field in form if field.id != "csrf_token" %}
 {{ field.label }}{{ field(class="form-control") }}
{% endfor %}
</div>
</form>
</div>

This code will make following view..
form_screenshot

Just tips for me.

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.

similarity network using cytoscape.js.

Lots of relationships are presented as graph.
For example, if I set molecule as node, and similarity as edge, I could make molecular networks.
Cytoscape.js is one of the good tool.
It is an open-source JavaScript graph theory library for analysis and visualisation. And works on server side. So, Not depend on client machine.
I wrote some examples.
If you interested in it, please read following ;-).

At first, I get sample data from Chembl.(Cyclin-dependent kinase 2)
Then load data and make network structure as json.

from rdkit import Chem
from rdkit.Chem import AllChem
from rdkit.Chem import PandasTools
import pandas as pd
from rdkit.Chem import DataStructs
import json

df=pd.read_table( "bioactivity-14_6-07-32.txt", header=0 )
PandasTools.AddMoleculeColumnToFrame( df, smilesCol="CANONICAL_SMILES",molCol="ROMol" )
fps = [ AllChem.GetMorganFingerprintAsBitVect(mol,2) for mol in df.ROMol ]
nodes = []
edges = []

# make nodes
for i in range( len( fps [:100] ) ):
    cmp_id = df.CMPD_CHEMBLID[i]
    smi = df.CANONICAL_SMILES[i]
    node = { "data":{ "cmp_id":cmp_id, "smi":smi }}
    nodes.append(node)

# make edges
for i in range(len(fps[:100])):
    for j in range(i):
        tc = DataStructs.TanimotoSimilarity(fps[i],fps[j])
        if tc >= 0.6:
            source = df.CMPD_CHEMBLID[i]
            target = df.CMPD_CHEMBLID[j]
            edge = { "data": { "source":source, "target":target }}
            edges.append(edge)

# make json format data
data = { "nodes":nodes, "edges":edges}  

# write network to text
f = open("mols.json","w")
f.write(json.dumps(data))
f.close()

Now I got network data.
Then, let’s make the site using flask.

First, I wrote app.py.

from flask import Flask, url_for
from flask import render_template
from flask_bootstrap import Bootstrap
app  = Flask(__name__)
Bootstrap( app )
@app.route('/mol_network/')
def mol_network():
    return render_template("mol_network.html")
if __name__ =="__main__":
    app.run(debug = True)

Next, wrote template.html and mol_network.html.
Follwing code, links and any actions are blank.

temple.html

{% extends "bootstrap/base.html" %}
{% block title %} This is an example {% endblock %}
{% block navbar %}
{% block scripts %}
{{ super() }}
// set your placed folder following code.
<script src="{{url_for('static', filename='cytoscape/build/cytoscape.js')}}"></script>
{% endblock %}

<nav class="navbar navbar-default" role="navigation">
  <div class="container-fluid">
    <!-- Brand and toggle get grouped for better mobile display -->
    <div class="navbar-header">
      <button type="button" class="navbar-toggle" data-toggle="collapse" data-target="#bs-example-navbar-collapse-1">
        <span class="sr-only">Toggle navigation</span>
        <span class="icon-bar"></span>
        <span class="icon-bar"></span>
        <span class="icon-bar"></span>
      </button>
      <a class="navbar-brand" href="#">Brand</a>
    </div>

    <!-- Collect the nav links, forms, and other content for toggling -->
    <div class="collapse navbar-collapse" id="bs-example-navbar-collapse-1">
      <ul class="nav navbar-nav">
        <li class="active"><a href="#">Link</a></li>
        <li><a href="#">Link</a></li>
        <li class="dropdown">
          <a href="#" class="dropdown-toggle" data-toggle="dropdown">Dropdown <span class="caret"></span></a>
          <ul class="dropdown-menu" role="menu">
            <li><a href="#">Action</a></li>
            <li><a href="#">Another action</a></li>
            <li><a href="#">Something else here</a></li>
            <li class="divider"></li>
            <li><a href="#">Separated link</a></li>
            <li class="divider"></li>
            <li><a href="#">One more separated link</a></li>
          </ul>
        </li>
      </ul>
      <form class="navbar-form navbar-left" role="search">
        <div class="form-group">
          <input type="text" class="form-control" placeholder="Search">
        </div>
        <button type="submit" class="btn btn-default">Submit</button>
      </form>
      <ul class="nav navbar-nav navbar-right">
        <li><a href="#">Link</a></li>
        <li class="dropdown">
          <a href="#" class="dropdown-toggle" data-toggle="dropdown">Dropdown <span class="caret"></span></a>
          <ul class="dropdown-menu" role="menu">
            <li><a href="#">Action</a></li>
            <li><a href="#">Another action</a></li>
            <li><a href="#">Something else here</a></li>
            <li class="divider"></li>
            <li><a href="#">Separated link</a></li>
          </ul>
        </li>
      </ul>
    </div><!-- /.navbar-collapse -->
  </div><!-- /.container-fluid -->
</nav>
{% endblock %}

{% block content %}
 <h1> hello, bootstrap </h1>
{% endblock %}

OK, now Make mol_network.html
Hmm, too long..

{% extends "temple.html" %}
{% block title %}network{% endblock title %}

{% block content %}
<style id="jsbin-css">

body { 
  font: 14px helvetica neue, helvetica, arial, sans-serif;
}

#cy {
  height: 100%;
  width: 100%;
  position: absolute;
  left: 0;
  top: 0;
}

#info {
  color: #c88;
  font-size: 1em;
  position: absolute;
  z-index: -1;
  left: 1em;
  top: 1em;
}
</style>

<script src="{{ url_for("static", filename="node_modules/cytoscape/lib/arbor.js") }}"></script>
</head>
  <body>     


<script>

var cy3json = {"nodes": [{"data": {"id": "CHEMBL186120", "smi": "CC(C)c1cnc(NC(=O)Oc2ccccc2)s1"}}, {"data": {"id": "CHEMBL362369", "smi": "CC(=O)c1cnc(NC(=O)Cc2ccccc2)s1"}}, {"data": {"id": "CHEMBL2347577", "smi": "CC[C@@H](Nc1nc(NCc2cc(F)ccc2O)c3ncn(C(C)C)c3n1)C(C)O"}}, {"data": {"id": "CHEMBL428690", "smi": "CN1CC[C@@H]([C@H](O)C1)c2c(O)cc(O)c3C(=O)C=C(Oc23)c4ccccc4Cl"}}, {"data": {"id": "CHEMBL186371", "smi": "O=C(Nc1cccc2[nH]nnc12)Nc3ncc(s3)C4CCC4"}}, {"data": {"id": "CHEMBL186898", "smi": "O=C(Cc1ccc2[nH]cnc2c1)Nc3ncc(s3)C4CCC4"}}, {"data": {"id": "CHEMBL593683", "smi": "CC(C)(C)c1cc2c(N\\N=C\\c3ccc(cc3)C(=O)O)ncnc2s1"}}, {"data": {"id": "CHEMBL2335928", "smi": "CCCn1cnc2c(NC(=N)N)nc(N)nc12"}}, {"data": {"id": "CHEMBL64758", "smi": "Brc1ccc2c(c1)[nH]c3c4[nH]c5ccccc5c4c6C(=O)NC(=O)c6c23"}}, {"data": {"id": "CHEMBL3115672", "smi": "Clc1ccc2C[C@@H](Cc2c1)NCc3cc(NC(=O)Nc4cccc5C(=O)N6CCCC6c45)n[nH]3"}}, {"data": {"id": "CHEMBL1094408", "smi": "COc1ccc(cc1Nc2ncc3CCc4c(nn(C)c4c3n2)C(=O)N)N5CCN(C)CC5"}}, {"data": {"id": "CHEMBL1952028", "smi": "COc1cc[nH]c1\\C=C\\2/C(=O)Nc3ccc(F)cc23"}}, {"data": {"id": "CHEMBL180341", "smi": "Oc1ccc2cnc(Nc3ccc(cc3)N4CCOCC4)nc2c1C5CCCC5"}}, {"data": {"id": "CHEMBL363711", "smi": "CC(C)C(=O)Nc1ncc(s1)C(C)C"}}, {"data": {"id": "CHEMBL1098686", "smi": "O\\N=C\\1/C(=C\\2/C(=O)Nc3ccc(Cl)cc23)/Nc4ccc(O)cc14"}}, {"data": {"id": "CHEMBL1086811", "smi": "O\\N=C\\1/C(=C\\2/C(=O)Nc3ccc(cc23)[N+](=O)[O-])/Nc4ccc(Cl)cc14"}}, {"data": {"id": "CHEMBL1087075", "smi": "O\\N=C\\1/C(=C\\2/C(=O)Nc3ccc(F)cc23)/Nc4ccc(F)cc14"}}, {"data": {"id": "CHEMBL1086701", "smi": "Cc1ccc2N\\C(=C\\3/C(=O)Nc4ccc(cc34)[N+](=O)[O-])\\C(=N/O)\\c2c1"}}, {"data": {"id": "CHEMBL369303", "smi": "Oc1[nH]c2ccc(cc2c1c3[nH]c4ccccc4c3N=O)[N+](=O)[O-]"}}, {"data": {"id": "CHEMBL2058161", "smi": "COc1ccc(cc1)c2nn(cc2CNc3ccc(Br)cc3)c4ccccc4"}}, {"data": {"id": "CHEMBL182325", "smi": "COc1ccc2cnc(Nc3ccc(cc3)N4CCN(CC4)C(=O)C)nc2c1C(C)C"}}, {"data": {"id": "CHEMBL2069718", "smi": "FCCNS(=O)(=O)c1cc(cs1)c2nc3ccccc3s2"}}, {"data": {"id": "CHEMBL2069719", "smi": "O=S(=O)(Nc1nccs1)c2cc(cs2)c3nc4ccccc4s3"}}, {"data": {"id": "CHEMBL2058160", "smi": "COc1ccc(cc1)c2nn(cc2CNc3ccc(Cl)cc3)c4ccccc4"}}, {"data": {"id": "CHEMBL2069717", "smi": "ONS(=O)(=O)c1cc(cs1)c2nc3ccccc3s2"}}, {"data": {"id": "CHEMBL2347581", "smi": "CC(C)n1cnc2c(NCc3ccccc3N)nc(NCCC(C)(C)O)nc12"}}, {"data": {"id": "CHEMBL187256", "smi": "O=C(Nc1cccc2ncccc12)Nc3ncc(s3)C4CCC4"}}, {"data": {"id": "CHEMBL2425654", "smi": "O[C@@H]1CC[C@H](CC1)Nc2nccc(n2)n3nnc4ccccc34"}}, {"data": {"id": "CHEMBL2403099", "smi": "CC(C)(O)CNc1nc(NCc2ccc(nc2)c3occc3)c4ncn(C5CCCC5)c4n1"}}, {"data": {"id": "CHEMBL182641", "smi": "COc1ccc2cnc(Nc3ccc(cc3)N4CCNCC4)nc2c1C(C)C"}}, {"data": {"id": "CHEMBL181834", "smi": "COc1ccc2cnc(Nc3ccc(cc3)N4CCN(CC4)C(=O)C)nc2c1C5CCCC5"}}, {"data": {"id": "CHEMBL1952200", "smi": "COc1cc[nH]c1\\C=C\\2/C(=O)Nc3ccc(c(N4CC[C@H](O)C4)c23)[N+](=O)[O-]"}}, {"data": {"id": "CHEMBL1952203", "smi": "COc1cc[nH]c1\\C=C\\2/C(=O)Nc3ccc(c(N4CCCC(CO)C4)c23)[N+](=O)[O-]"}}, {"data": {"id": "CHEMBL182011", "smi": "COc1ccc2cnc(Nc3ccc(cc3)N4CCOCC4)nc2c1C(C)C"}}, {"data": {"id": "CHEMBL1086662", "smi": "O\\N=C\\1/C(=C\\2/C(=O)Nc3ccc(F)cc23)/Nc4ccc(O)cc14"}}, {"data": {"id": "CHEMBL1164457", "smi": "CC(C)CN(C)C(=O)c1ccc2cc([nH]c2c1)c3cc(Cc4ccccc4)[nH]n3"}}, {"data": {"id": "CHEMBL1952027", "smi": "COc1cc[nH]c1\\C=C\\2/C(=O)Nc3ccccc23"}}, {"data": {"id": "CHEMBL182498", "smi": "COc1ccc2cnc(Nc3ccc(N4CCNCC4)c(F)c3)nc2c1C(C)C"}}, {"data": {"id": "CHEMBL133712", "smi": "CC(=O)c1cnc2oc3ccc(O)cc3c2c1c4ccccc4"}}, {"data": {"id": "CHEMBL434917", "smi": "CC(C)c1cnc(NC(=O)C(=O)c2ccccc2)s1"}}, {"data": {"id": "CHEMBL3093062", "smi": "C(Nc1oc(nn1)c2c[nH]c3ncccc23)c4ccccc4"}}, {"data": {"id": "CHEMBL3093056", "smi": "Fc1cc2cc(ccc2cn1)c3oc(NCc4ccccc4)nn3"}}, {"data": {"id": "CHEMBL2347584", "smi": "CC(C)CNc1nc(NCc2ccccc2O)c3ncn(C(C)C)c3n1"}}, {"data": {"id": "CHEMBL2336384", "smi": "CC(C)n1cnc2c(NC(=N)N)nc(NC3CC3)nc12"}}, {"data": {"id": "CHEMBL2425652", "smi": "N[C@@H]1CC[C@H](CC1)Nc2nccc(n2)n3nnc4ccccc34"}}, {"data": {"id": "CHEMBL595023", "smi": "CN(CCO)Cc1ccc(\\C=N\\Nc2ncnc3sc(cc23)C(C)(C)C)cc1"}}, {"data": {"id": "CHEMBL597754", "smi": "CNC(=O)c1nn(C)c2c1CCc3cnc(NC4CCN(CC4)C(=O)C5CCN(CC5)S(=O)(=O)C)nc23"}}, {"data": {"id": "CHEMBL2336375", "smi": "CC(C)n1cnc2c(NC(=N)N)nc(NCCCCCCO)nc12"}}, {"data": {"id": "CHEMBL2336374", "smi": "CC(C)n1cnc2c(NC(=N)N)nc(NCCCO)nc12"}}, {"data": {"id": "CHEMBL2347585", "smi": "CC(C)n1cnc2c(NCc3ccc(O)cc3)nc(nc12)N4CCNCC4"}}, {"data": {"id": "CHEMBL186932", "smi": "CCCCCc1cnc(NC(=O)Cc2ccccc2)s1"}}, {"data": {"id": "CHEMBL14762", "smi": "CC[C@H](CO)Nc1nc(NCc2ccccc2)c3ncn(C(C)C)c3n1"}}, {"data": {"id": "CHEMBL183511", "smi": "COc1ccc2cnc(Nc3ccc(cc3)N4CCC(N)C4)nc2c1C(C)C"}}, {"data": {"id": "CHEMBL185734", "smi": "CSc1cnc(NC(=O)Cc2ccccc2)s1"}}, {"data": {"id": "CHEMBL1086683", "smi": "O\\N=C\\1/C(=C\\2/C(=O)Nc3ccc(OC(F)(F)F)cc23)/Nc4ccc(O)cc14"}}, {"data": {"id": "CHEMBL1087073", "smi": "O\\N=C\\1/C(=C\\2/C(=O)Nc3ccc(cc23)[N+](=O)[O-])/Nc4ccc(F)cc14"}}, {"data": {"id": "CHEMBL1087074", "smi": "O\\N=C\\1/C(=C\\2/C(=O)Nc3ccc(Cl)cc23)/Nc4ccc(F)cc14"}}, {"data": {"id": "CHEMBL1087740", "smi": "COc1ccc2N\\C(=C\\3/C(=O)Nc4ccc(OC(F)(F)F)cc34)\\C(=N/O)\\c2c1"}}, {"data": {"id": "CHEMBL1922223", "smi": "CC[C@@H](Nc1nc(NCc2ccccc2)c3ncn(C(C)C)c3n1)C(=O)O"}}, {"data": {"id": "CHEMBL1738742", "smi": "CC[C@H](CO)Nc1nc(NCc2ccccc2)c3[nH]nc(C(C)C)c3n1"}}, {"data": {"id": "CHEMBL2069712", "smi": "NS(=O)(=O)c1cc(cs1)c2nc3ccc(F)cc3s2"}}, {"data": {"id": "CHEMBL2069724", "smi": "Oc1cccnc1NS(=O)(=O)c2cc(cs2)c3nc4ccccc4s3"}}, {"data": {"id": "CHEMBL2069728", "smi": "NS(=O)(=O)c1cc(cs1)c2nc3cccc(c4ccc(F)cc4)c3s2"}}, {"data": {"id": "CHEMBL2057888", "smi": "Cc1ccc(cc1)c2nn(cc2CNc3ccc(Cl)cc3)c4ccccc4"}}, {"data": {"id": "CHEMBL2336376", "smi": "CC[C@@H](N)COc1nc(NC(=N)N)c2ncn(C(C)C)c2n1"}}, {"data": {"id": "CHEMBL2349192", "smi": "CC(C)n1cnc2c(NCc3cc(Cl)ccc3O)nc(NC4CCC(O)CC4)nc12"}}, {"data": {"id": "CHEMBL361987", "smi": "Oc1ccc2cnc(Nc3ccc(N4CCNCC4)c(F)c3)nc2c1C5CCCC5"}}, {"data": {"id": "CHEMBL1922123", "smi": "CC[C@@H](Nc1nc(NCc2cccnc2)c3ncn(C(C)C)c3n1)C(C)(C)O"}}, {"data": {"id": "CHEMBL1922201", "smi": "CC[C@@H](Nc1nc(NCc2ccccc2)c3ncn(C(C)C)c3n1)C(O)C(C)C"}}, {"data": {"id": "CHEMBL1922204", "smi": "CC[C@H](Nc1nc(NCc2ccccn2)c3ncn(C(C)C)c3n1)C(C)O"}}, {"data": {"id": "CHEMBL1922207", "smi": "CC[C@H](Nc1nc(NCc2ccccn2)c3ncn(C(C)C)c3n1)C(O)C(C)(C)C"}}, {"data": {"id": "CHEMBL1952029", "smi": "COc1ccc2NC(=O)\\C(=C/c3[nH]ccc3OC)\\c2c1"}}, {"data": {"id": "CHEMBL1952032", "smi": "COc1cc[nH]c1\\C=C\\2/C(=O)Nc3ccc(c(N4CCNC(C4)C(=O)N)c23)[N+](=O)[O-]"}}, {"data": {"id": "CHEMBL1952208", "smi": "COc1cc[nH]c1\\C=C\\2/C(=O)Nc3ccc(c(N4CC[C@@H](N)C4)c23)[N+](=O)[O-]"}}, {"data": {"id": "CHEMBL2402946", "smi": "NC1CCC(CC1)Nc2nc(NCc3ccc(nc3)c4ccccc4O)c5ncn(C6CCCC6)c5n2"}}, {"data": {"id": "CHEMBL1922120", "smi": "CCC(O)[C@@H](CC)Nc1nc(NCc2cccnc2)c3ncn(C(C)C)c3n1"}}, {"data": {"id": "CHEMBL360250", "smi": "COc1ccc2cnc(Nc3ccc(cc3)N4CCN(CC4)C(=O)CN)nc2c1C(C)C"}}, {"data": {"id": "CHEMBL1164353", "smi": "CC(C)CN(C)C(=O)c1ccc2cc([nH]c2c1)c3n[nH]cc3c4ccccc4"}}, {"data": {"id": "CHEMBL1774056", "smi": "C[C@H](Nc1nc(Nc2cc(C)[nH]n2)c(F)cc1C#N)c3ccc(F)cn3"}}, {"data": {"id": "CHEMBL1952202", "smi": "COc1cc[nH]c1\\C=C\\2/C(=O)Nc3ccc(c(N4CCC(O)CC4)c23)[N+](=O)[O-]"}}, {"data": {"id": "CHEMBL1952209", "smi": "COc1cc[nH]c1\\C=C\\2/C(=O)Nc3ccc(c(N4CC[C@H](C4)NC=O)c23)[N+](=O)[O-]"}}, {"data": {"id": "CHEMBL361537", "smi": "CCOc1cnc2oc3ccc(O)cc3c2c1c4ccccc4"}}, {"data": {"id": "CHEMBL3093066", "smi": "C(Nc1oc(nn1)c2c[nH]c3ncccc23)c4ccccn4"}}, {"data": {"id": "CHEMBL3093060", "smi": "O=C1Nc2ccc(cc2O1)c3oc(NCc4ccccc4)nn3"}}, {"data": {"id": "CHEMBL3093055", "smi": "C(Nc1oc(nn1)c2ccc3cnccc3c2)c4ccccc4"}}, {"data": {"id": "CHEMBL1922217", "smi": "CC[C@H](Nc1nc(NCc2ccccc2)c3ncn(C(C)C)c3n1)C(C)(C)O"}}, {"data": {"id": "CHEMBL1952033", "smi": "COc1cc[nH]c1\\C=C\\2/C(=O)Nc3ccc(c(N4CCCC(C4)C(=O)N)c23)[N+](=O)[O-]"}}, {"data": {"id": "CHEMBL1949699", "smi": "COc1cc[nH]c1\\C=C\\2/C(=O)Nc3ccc(c(N[C@H]4CC[C@H](N)C4)c23)[N+](=O)[O-]"}}, {"data": {"id": "CHEMBL3093079", "smi": "Fc1ccc2c(c[nH]c2n1)c3oc(N[C@H](C4CC4)c5cccnc5F)nn3"}}, {"data": {"id": "CHEMBL2347586", "smi": "COc1ccc(CNc2nc(nc3c2ncn3C(C)C)N4CCNCC4)cc1"}}, {"data": {"id": "CHEMBL2347579", "smi": "CC[C@H](CO)Nc1nc(NCc2ccc(N)cc2)c3ncn(C(C)C)c3n1"}}, {"data": {"id": "CHEMBL2001835", "smi": "Nc1ccc2C(=S)c3ccccc3Nc2c1"}}, {"data": {"id": "CHEMBL2402947", "smi": "NC1CCC(CC1)Nc2nc(NCc3cc(Cl)ccc3O)c4ncn(C5CCCC5)c4n2"}}, {"data": {"id": "CHEMBL186934", "smi": "O=C(Cc1ccccc1)Nc2ncc(s2)c3ccccc3"}}, {"data": {"id": "CHEMBL183408", "smi": "COc1cnc2oc3ccc(O)cc3c2c1c4ccccc4"}}, {"data": {"id": "CHEMBL2425656", "smi": "C1CCC(CC1)Nc2nccc(n2)n3nnc4ccccc34"}}, {"data": {"id": "CHEMBL361565", "smi": "Oc1ccc2oc3ncc(Cl)c(c4ccccc4)c3c2c1"}}, {"data": {"id": "CHEMBL607544", "smi": "CC(C)(C)c1cc2c(N\\N=C\\c3ccc(CO)cc3)ncnc2s1"}}, {"data": {"id": "CHEMBL599428", "smi": "Cn1nc(C(=O)N)c2CCc3cnc(NC4CCN(CC4)C(=O)c5ccccc5)nc3c12"}}, {"data": {"id": "CHEMBL2336381", "smi": "CC(C)[C@H](CO)Nc1nc(NC(=N)N)c2ncn(C(C)C)c2n1"}}], "edges": [{"data": {"source": "CHEMBL1086811", "target": "CHEMBL1098686"}}, {"data": {"source": "CHEMBL1087075", "target": "CHEMBL1098686"}}, {"data": {"source": "CHEMBL1086701", "target": "CHEMBL1086811"}}, {"data": {"source": "CHEMBL2069719", "target": "CHEMBL2069718"}}, {"data": {"source": "CHEMBL2058160", "target": "CHEMBL2058161"}}, {"data": {"source": "CHEMBL2069717", "target": "CHEMBL2069718"}}, {"data": {"source": "CHEMBL2069717", "target": "CHEMBL2069719"}}, {"data": {"source": "CHEMBL182641", "target": "CHEMBL182325"}}, {"data": {"source": "CHEMBL181834", "target": "CHEMBL182325"}}, {"data": {"source": "CHEMBL1952203", "target": "CHEMBL1952200"}}, {"data": {"source": "CHEMBL182011", "target": "CHEMBL182325"}}, {"data": {"source": "CHEMBL182011", "target": "CHEMBL182641"}}, {"data": {"source": "CHEMBL1086662", "target": "CHEMBL1098686"}}, {"data": {"source": "CHEMBL1086662", "target": "CHEMBL1087075"}}, {"data": {"source": "CHEMBL1952027", "target": "CHEMBL1952028"}}, {"data": {"source": "CHEMBL182498", "target": "CHEMBL182641"}}, {"data": {"source": "CHEMBL434917", "target": "CHEMBL186120"}}, {"data": {"source": "CHEMBL2425652", "target": "CHEMBL2425654"}}, {"data": {"source": "CHEMBL595023", "target": "CHEMBL593683"}}, {"data": {"source": "CHEMBL2336375", "target": "CHEMBL2336384"}}, {"data": {"source": "CHEMBL2336374", "target": "CHEMBL2336384"}}, {"data": {"source": "CHEMBL2336374", "target": "CHEMBL2336375"}}, {"data": {"source": "CHEMBL186932", "target": "CHEMBL362369"}}, {"data": {"source": "CHEMBL183511", "target": "CHEMBL182325"}}, {"data": {"source": "CHEMBL183511", "target": "CHEMBL182641"}}, {"data": {"source": "CHEMBL183511", "target": "CHEMBL182011"}}, {"data": {"source": "CHEMBL185734", "target": "CHEMBL362369"}}, {"data": {"source": "CHEMBL1086683", "target": "CHEMBL1098686"}}, {"data": {"source": "CHEMBL1086683", "target": "CHEMBL1087075"}}, {"data": {"source": "CHEMBL1086683", "target": "CHEMBL1086662"}}, {"data": {"source": "CHEMBL1087073", "target": "CHEMBL1086811"}}, {"data": {"source": "CHEMBL1087073", "target": "CHEMBL1087075"}}, {"data": {"source": "CHEMBL1087073", "target": "CHEMBL1086701"}}, {"data": {"source": "CHEMBL1087073", "target": "CHEMBL1086662"}}, {"data": {"source": "CHEMBL1087074", "target": "CHEMBL1098686"}}, {"data": {"source": "CHEMBL1087074", "target": "CHEMBL1086811"}}, {"data": {"source": "CHEMBL1087074", "target": "CHEMBL1087075"}}, {"data": {"source": "CHEMBL1087074", "target": "CHEMBL1086662"}}, {"data": {"source": "CHEMBL1087074", "target": "CHEMBL1087073"}}, {"data": {"source": "CHEMBL1087740", "target": "CHEMBL1087075"}}, {"data": {"source": "CHEMBL1087740", "target": "CHEMBL1086683"}}, {"data": {"source": "CHEMBL1922223", "target": "CHEMBL14762"}}, {"data": {"source": "CHEMBL2069724", "target": "CHEMBL2069719"}}, {"data": {"source": "CHEMBL2069724", "target": "CHEMBL2069717"}}, {"data": {"source": "CHEMBL2069728", "target": "CHEMBL2069712"}}, {"data": {"source": "CHEMBL2057888", "target": "CHEMBL2058161"}}, {"data": {"source": "CHEMBL2057888", "target": "CHEMBL2058160"}}, {"data": {"source": "CHEMBL1922201", "target": "CHEMBL14762"}}, {"data": {"source": "CHEMBL1922201", "target": "CHEMBL1922223"}}, {"data": {"source": "CHEMBL1922204", "target": "CHEMBL2347577"}}, {"data": {"source": "CHEMBL1922204", "target": "CHEMBL1922201"}}, {"data": {"source": "CHEMBL1922207", "target": "CHEMBL1922201"}}, {"data": {"source": "CHEMBL1922207", "target": "CHEMBL1922204"}}, {"data": {"source": "CHEMBL1952029", "target": "CHEMBL1952028"}}, {"data": {"source": "CHEMBL1952029", "target": "CHEMBL1952027"}}, {"data": {"source": "CHEMBL1952032", "target": "CHEMBL1952200"}}, {"data": {"source": "CHEMBL1952032", "target": "CHEMBL1952203"}}, {"data": {"source": "CHEMBL1952208", "target": "CHEMBL1952200"}}, {"data": {"source": "CHEMBL1952208", "target": "CHEMBL1952203"}}, {"data": {"source": "CHEMBL1952208", "target": "CHEMBL1952032"}}, {"data": {"source": "CHEMBL1922120", "target": "CHEMBL14762"}}, {"data": {"source": "CHEMBL1922120", "target": "CHEMBL1922123"}}, {"data": {"source": "CHEMBL1922120", "target": "CHEMBL1922201"}}, {"data": {"source": "CHEMBL1922120", "target": "CHEMBL1922204"}}, {"data": {"source": "CHEMBL360250", "target": "CHEMBL182325"}}, {"data": {"source": "CHEMBL360250", "target": "CHEMBL182641"}}, {"data": {"source": "CHEMBL360250", "target": "CHEMBL182011"}}, {"data": {"source": "CHEMBL360250", "target": "CHEMBL183511"}}, {"data": {"source": "CHEMBL1164353", "target": "CHEMBL1164457"}}, {"data": {"source": "CHEMBL1952202", "target": "CHEMBL1952200"}}, {"data": {"source": "CHEMBL1952202", "target": "CHEMBL1952203"}}, {"data": {"source": "CHEMBL1952202", "target": "CHEMBL1952032"}}, {"data": {"source": "CHEMBL1952202", "target": "CHEMBL1952208"}}, {"data": {"source": "CHEMBL1952209", "target": "CHEMBL1952200"}}, {"data": {"source": "CHEMBL1952209", "target": "CHEMBL1952203"}}, {"data": {"source": "CHEMBL1952209", "target": "CHEMBL1952032"}}, {"data": {"source": "CHEMBL1952209", "target": "CHEMBL1952208"}}, {"data": {"source": "CHEMBL1952209", "target": "CHEMBL1952202"}}, {"data": {"source": "CHEMBL361537", "target": "CHEMBL133712"}}, {"data": {"source": "CHEMBL3093066", "target": "CHEMBL3093062"}}, {"data": {"source": "CHEMBL3093055", "target": "CHEMBL3093056"}}, {"data": {"source": "CHEMBL1922217", "target": "CHEMBL14762"}}, {"data": {"source": "CHEMBL1922217", "target": "CHEMBL1922223"}}, {"data": {"source": "CHEMBL1922217", "target": "CHEMBL1922123"}}, {"data": {"source": "CHEMBL1922217", "target": "CHEMBL1922201"}}, {"data": {"source": "CHEMBL1952033", "target": "CHEMBL1952200"}}, {"data": {"source": "CHEMBL1952033", "target": "CHEMBL1952203"}}, {"data": {"source": "CHEMBL1952033", "target": "CHEMBL1952032"}}, {"data": {"source": "CHEMBL1952033", "target": "CHEMBL1952208"}}, {"data": {"source": "CHEMBL1952033", "target": "CHEMBL1952202"}}, {"data": {"source": "CHEMBL1952033", "target": "CHEMBL1952209"}}, {"data": {"source": "CHEMBL1949699", "target": "CHEMBL1952200"}}, {"data": {"source": "CHEMBL1949699", "target": "CHEMBL1952208"}}, {"data": {"source": "CHEMBL1949699", "target": "CHEMBL1952202"}}, {"data": {"source": "CHEMBL2347586", "target": "CHEMBL2347585"}}, {"data": {"source": "CHEMBL2347579", "target": "CHEMBL14762"}}, {"data": {"source": "CHEMBL2347579", "target": "CHEMBL1922223"}}, {"data": {"source": "CHEMBL2347579", "target": "CHEMBL1922201"}}, {"data": {"source": "CHEMBL2347579", "target": "CHEMBL1922217"}}, {"data": {"source": "CHEMBL2402947", "target": "CHEMBL2349192"}}, {"data": {"source": "CHEMBL2402947", "target": "CHEMBL2402946"}}, {"data": {"source": "CHEMBL186934", "target": "CHEMBL362369"}}, {"data": {"source": "CHEMBL186934", "target": "CHEMBL185734"}}, {"data": {"source": "CHEMBL183408", "target": "CHEMBL133712"}}, {"data": {"source": "CHEMBL183408", "target": "CHEMBL361537"}}, {"data": {"source": "CHEMBL2425656", "target": "CHEMBL2425654"}}, {"data": {"source": "CHEMBL2425656", "target": "CHEMBL2425652"}}, {"data": {"source": "CHEMBL361565", "target": "CHEMBL133712"}}, {"data": {"source": "CHEMBL361565", "target": "CHEMBL361537"}}, {"data": {"source": "CHEMBL361565", "target": "CHEMBL183408"}}, {"data": {"source": "CHEMBL607544", "target": "CHEMBL593683"}}, {"data": {"source": "CHEMBL607544", "target": "CHEMBL595023"}}, {"data": {"source": "CHEMBL2336381", "target": "CHEMBL2336384"}}, {"data": {"source": "CHEMBL2336381", "target": "CHEMBL2336375"}}, {"data": {"source": "CHEMBL2336381", "target": "CHEMBL2336374"}}]}
;


$(function(){ // on dom ready

var cy = cytoscape({
  container: $('#cy')[0],
  style: cytoscape.stylesheet()
    .selector('node')
      .css({
        'text-valign': 'center',
        'background-color': 'darkblue',
        'text-outline-width': 2,
        'width': 10,
        'height':10,
        'text-outline-color': '#888'
      })
    .selector('edge')
      .css({
        'width': 5,
        'line-color': 'blue',
      })
    .selector(':selected')
      .css({
        'background-color': 'black',
        'line-color': 'black',
        'target-arrow-color': 'black',
        'source-arrow-color': 'black'
      })
    .selector('.faded')
      .css({
        'opacity': 0.25,
        'text-opacity': 0
      }),
  
  elements: cy3json,
  
  layout: {
    name: 'arbor',
    padding: [50,50,50,50]
  },
});
cy.on('tap', 'node', function(){
  alert( this.data('smi') );
});
}); // on dom ready
</script>
<div class="container">
    <div class="row">
        <div class="col-md-12" style="background:lightblue; height:600px;">
        This is test env.<br>
  <div id="cy"></div>
        </div>
    </div>
 </div>
</body>
{% endblock content %}

OK I did it. Then run the localserver.
And Access mol_network site.

pen:chemoflask iwatobipen$ python app.py

Yah! I could make molecular network.
I used arbor layout. “The arbor layout uses a force-directed physics simulation.”
And tap each node, the site return smiles strings.

If you are good at javascript programming, you can make more rich web site.

network

mol_prop_calc and Flask and Ajax

I build very simple portal site in my lab, that can predict some physchem value using structure designed by med chem.
I used javascript library jQuery and python library flask , rdkit for main code.
Ajax is very powerful because it can return results without screen translation.
But,,,,,,, I’m not good at javascript ;-(…. (also python. hahaha).
So, I searched google, and some books and write simple snipet.
OK.
Used Libs are…
Flask, Flask-Bootstrap, RDKit => Python
jQuery and jsme (molecular structure editor) => javascript
And, my folder structure is following.

pen:chemoflask iwatobipen$ tree -L 2
.
├── __init__.py
├── app.py
├── app.pyc
├── static
│   ├── JSME_2014-06-28
│   ├── img
│   └── jquery-2.1.1.min.js
├── templates
│   ├── 404.html
│   ├── index.html
│   ├── mol_calc.html
│   └── temple.html
└── treest.txt

Flask uses template engine jinja2. And templates are placed in templaes folder.
Static file i.e. javascript or image files are placed in static folder. (I stored jquery and jsme.)

First, I wrote app.py.
Useing this script, If I access /mol_cal/.
I’ll get mol_weight and heavy_mol_weight as json format.

from flask import Flask, url_for, jsonify, request
from flask import render_template
from flask_bootstrap import Bootstrap
import urllib
from rdkit import Chem
from rdkit.Chem import Descriptors

app  = Flask(__name__)
Bootstrap( app )

@app.route("/")
def index():
    return render_template("index.html")

@app.route('/')
def top():
    return render_template("index.html")

@app.route('/mol_calc/')
def mol_calc():
    return render_template("mol_calc.html")

@app.route('/mol_calc/<smiles>/')
def do_calc(smiles):
    smiles = urllib.unquote_plus( smiles )
    mol = Chem.MolFromSmiles( smiles )
    molwt = round(Descriptors.MolWt( mol ),2)
    hawt = round(Descriptors.HeavyAtomMolWt( mol ),2)
    return jsonify( molwt = molwt, hawt = hawt )

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

Next, wrote template.html and mol_calc.html.
Follwing code, links and any actions are blank.

temple.html

{% extends "bootstrap/base.html" %}
{% block title %} This is an example {% endblock %}
{% block navbar %}

{% block scripts %}
<script src="{{url_for('static', filename='JSME_2014-06-28/jsme/jsme.nocache.js')}}"></script>
{{super()}}
{% endblock %}


<nav class="navbar navbar-default" role="navigation">
  <div class="container-fluid">
    <!-- Brand and toggle get grouped for better mobile display -->
    <div class="navbar-header">
      <button type="button" class="navbar-toggle" data-toggle="collapse" data-target="#bs-example-navbar-collapse-1">
        <span class="sr-only">Toggle navigation</span>
        <span class="icon-bar"></span>
        <span class="icon-bar"></span>
        <span class="icon-bar"></span>
      </button>
      <a class="navbar-brand" href="#">Brand</a>
    </div>

    <!-- Collect the nav links, forms, and other content for toggling -->
    <div class="collapse navbar-collapse" id="bs-example-navbar-collapse-1">
      <ul class="nav navbar-nav">
        <li class="active"><a href="#">Link</a></li>
        <li><a href="#">Link</a></li>
        <li class="dropdown">
          <a href="#" class="dropdown-toggle" data-toggle="dropdown">Dropdown <span class="caret"></span></a>
          <ul class="dropdown-menu" role="menu">
            <li><a href="#">Action</a></li>
            <li><a href="#">Another action</a></li>
            <li><a href="#">Something else here</a></li>
            <li class="divider"></li>
            <li><a href="#">Separated link</a></li>
            <li class="divider"></li>
            <li><a href="#">One more separated link</a></li>
          </ul>
        </li>
      </ul>
      <form class="navbar-form navbar-left" role="search">
        <div class="form-group">
          <input type="text" class="form-control" placeholder="Search">
        </div>
        <button type="submit" class="btn btn-default">Submit</button>
      </form>
      <ul class="nav navbar-nav navbar-right">
        <li><a href="#">Link</a></li>
        <li class="dropdown">
          <a href="#" class="dropdown-toggle" data-toggle="dropdown">Dropdown <span class="caret"></span></a>
          <ul class="dropdown-menu" role="menu">
            <li><a href="#">Action</a></li>
            <li><a href="#">Another action</a></li>
            <li><a href="#">Something else here</a></li>
            <li class="divider"></li>
            <li><a href="#">Separated link</a></li>
          </ul>
        </li>
      </ul>
    </div><!-- /.navbar-collapse -->
  </div><!-- /.container-fluid -->
</nav>
{% endblock %}

{% block content %}
 <h1> hello, bootstrap </h1>
{% endblock %}

submitsmile is function that get smiles from jsme_draw and encoding smiles to url format.
Then ajax fuction get the url and rdkit calc mol prop.
…..uh …

mol_calc.html

{% extends "temple.html" %}
{% block title %}calc_mol_prop{% endblock title %}

{% block content %}
<script type=text/javascript src="{{ url_for('static', filename="jquery-2.1.1.min.js")}}"></script>
<script type=text/javascript>
  $SCRIPT_ROOT={{ request.script_root|tojson|safe  }};

function getSmiles() {
  var drawing = document.JME.smiles();
  document.form.smi.value = drawing;
}


function processJme() {
  document.JME.readMolecule(document.form.jme_output.value);
}


function openHelpWindow() {
  window.open("http://www.molinspiration.com/jme/help/jme2008hints.html","jmehelp","toolbar=no,menubar=no,scrollbars=yes,resizable=yes,width=510,height=675,left=400,top=20");
}

/*redirect query smiles*/
function submitsmile(){
    var Searchtext = document.JME.smiles();
    var url = "http://127.0.0.1:5000/mol_calc/"+encodeURIComponent(Searchtext);
    return url;  
}

/* this is calculater function */
$(function(){
  $("#btn").click(function(){
    var url = submitsmile();
    $.ajax({
        type :"GET",
        url : url,
        datatype:'json',
        contentType : 'application/json',
        success: function(json){
            $("#calc").html( "MolWt is ==>>>" + json.molwt+"<br>"+"HA MolWt is ===>>>" + json.hawt+"<br>" );
           }
          })
        })
       })
</script>


<body>
<div class="container">
    <div class="row">
        <div class="col-md-12" style="background:lightgray; height:100px;">

        This is pilot server.<br>
        </div>
    </div>
    
    <div class="row">
        <div class="col-md-12" style="background:lightgreen; height:700px;">

       sample_page.<br>
        <br>

    <div><strong id="calc">result here</strong></div>
 
<BODY BGCOLOR="#FFFFFF">
<center>
  <p>
   write your designed molecule.</br>
    <P>
      <table border=0 width="100%">
        <tr>
          <td align="center">
            <table>
             <tr>
               <td>
                <div code="JME.class" name="JME" archive="JME.jar" width=300 height=250>You have to enable Java and JavaScritpt on your machine !</div>
               </td>
        </tr>
        <tr>
          <td align="right"><a href="javascript:openHelpWindow();">JME Help</a></td>
        </tr>
      </table>
          </td>
            <td align="center">
             <FORM METHOD="POST" NAME="form" ONSUBMIT="return false;">
    <p>
               <div align="left">
                 <P><INPUT TYPE="button" VALUE="calc_prop" id="btn"><BR>
                  <P><INPUT TYPE="button" VALUE="Clear Editor" onClick="document.JME.reset()"> &nbsp; <INPUT TYPE="reset" VALUE="Clear Fields">
	        </div>
              </FORM>
            </td>
             </tr>
           </table>

          <p>
		<TABLE BORDER=1>
			<CAPTION>
				<B>Keyboard shortcuts</B>
			</CAPTION>
			<TR>
				<TD><FONT SIZE=2>bonds -,=,#</FONT></TD>
				<TD><FONT SIZE=2>rings 3..8, Ph is 1, furyl 0</FONT></TD>
				<TD><FONT SIZE=2>atoms C,N,O,P,S,F,L,B,I,H</FONT></TD>
				<TD><FONT SIZE=2>groups t - tert.butyl, ft - CF3, y -
						nitro, a - COOH, z - SO3H</FONT></TD>
			</TR>
			<TR>
				<TD><FONT SIZE=2>d - delete</FONT></TD>
				<TD COLSPAN=3><FONT SIZE=2>Esc - return to the standard
						state (C, single bond)</FONT></TD>
			<TR>
				<TD COLSPAN=4><FONT SIZE=2>molecule may by moved by
						"dragging" free space and rotated by pressing concurrently also
						the shift key</FONT></TD>
			</TR>
		</TABLE>
	</center>
	<P>
  
        </div>
    </div>
</div>
</body>
{% endblock content %}

OK I did it. Then run the localserver.
And Access mol_calc site.

pen:chemoflask iwatobipen$ python app.py

Access the site and write structure, then push calc button.
Screen Shot 2014-07-19 at 4.31.13 PM
It works well :-). I could get result without any page transition.
Screen Shot 2014-07-19 at 4.31.56 PM