Embed mols2grid to web page #mols2grid #RDKit #webapp

I often use flask for my web app development because the package is light weight web framework and easy to write.

BTW rendering molecules as grid image is easy in jupyter notebook by using RDKit’s Draw.MolsToGridImage function. And also recently developed package named mols2grid is really cool for rendering molecules on jupyter notebook. mols2grid generaetes image data as HTML. So it means that we can embed these grid image to webpage.

So I tried to it ;)

Following code uses Flask, Flask-bootsrap, mols2grid. All packages are installed from conda-forge.

Directory structure is below.

root/app.py
root/cdk2.sdf
root/templates/top.html

And app.py

from flask import Flask
from flask import render_template
from flask_bootstrap import Bootstrap
from rdkit import Chem
import mols2grid


app = Flask(__name__)
Bootstrap(app)

@app.route('/')
def top():
    im = mols2grid.display('./cdk2.sdf',
    #tooltip=["id", "r_mmffld_Potential_Energy-OPLS_2005"]
    )
    return render_template('/top.html', data=im.data)


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

And top.html is below.

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


{% block navbar %}
  <div class="navbar navbar-inverse" role="navigation">
    <div class="container">
      <a class="navbar-brand" href="#">Navbar</a>
    </div>
</div>
{% endblock %}

{% block content %}
<div class="container">
  <div>{{data|safe}}</div>
</div>
{% endblock %}

That’s all. It is really simple isn’t it ;)

Let’s run the web app.

$ python app.py

Then access localhost:5000. I could get molecules as grid image.

The data has pagenation and check box. It can dowonload selected molecules. I think it is one of the convenient way to implement rendering molecules function in my web applications.

Advertisement