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

Advertisements

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 )

Twitter picture

You are commenting using your Twitter account. Log Out / Change )

Facebook photo

You are commenting using your Facebook account. Log Out / Change )

Google+ photo

You are commenting using your Google+ account. Log Out / Change )

Connecting to %s