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

広告

コメントを残す

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

WordPress.com ロゴ

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

Twitter 画像

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

Facebook の写真

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

Google+ フォト

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

%s と連携中