Depicting SMILES Dynamically

Sometime back I was playing around with dynamic HTML and cam across a tutorial that described how to implement the dynamic suggestion feature that is commonly found on many websites (such as Google and Amazon). This set me wondering how I could use this mechanism to dynamically depict a SMILES string as I type it.

I whipped a quick example at here. The code is quite simple and makes good use of the REST services that I have written. The depiction service uses the CDK. By constructing a URL of the form

http://www.chembiogrid.org/cheminfo/rest/depict/c1ccccc1C(=O)CN(C)(C)

you get a PNG depiction of the molecule at the end of the URL. So it’s pretty easy to get depictions simply by manipulating the URL.

The application starts with an HTML page containing a form


1
2
3
4
5
6
7
8
9
10
<form id="frmSearch" action="http://so.me.url./action.py">
  <input type="text"
               id="txtSearch"
               name="txtSearch"
               alt="Search Criteria"
               onkeyup="getImage();"
               autocomplete="off" />
  <div id="search_suggest">
  </div>
</form>

We need to set the

1
id

of the

1
input

element so that we can get the value of the field via Javascript. But the key thing here is the value of the

1
onkeyup

attribute that is set to the name of a Javascript function. So, whenever we press a key in the input field, this function will be called. Finally, the

1
div

will hold the 2D depiction based on the contents of the input field. (Note that the action URL in this example is imaginary, since we’re not really concerned with what we do with the final SMILES)

The remaining component is the Javascript function:


1
2
3
4
5
6
function getImage() {
  var str = escape(document.getElementById('txtSearch').value);
  var depicturl = 'http://www.chembiogrid.org/cheminfo/rest/depict/' + str;
  var ss = document.getElementById('search_suggest');
  ss.innerHTML = "<img border="0" alt="" />";
}

When this function is called, we get the current value of the

1
input

field (via it’s

1
id

attribute) and then construct the URL from which we can get the image. We then get the

1
div

element and set its HTML to an

1
img

element whose

1
src

attribute is the REST URL that we just constructed. As a result, when the browser displays the

1
div

, it will automatically retrieve the 2D depiction from the URL.

There are some drawbacks to this application. First, if the network is slow, the depictions are slow to show. Second, there’s no real warning if you have an invalid SMILES. In general, it will try to represent the SMILES rather than complain. This can lead to some strange depictions. But, it’s a toy so I don’t know how useful it is in general. However, it’s cute since it lets you play with SMILES and see the results in real time.

2 thoughts on “Depicting SMILES Dynamically

  1. Rich Apodaca says:

    Rajarshi, cool. John Jaeger posted another approach with Ruby/Camping here:

    http://goeslightly.blogspot.com/2008/04/campdepict-jruby-cdk-and-camping.html

    And a couple of years ago, I put this tutorial together that discusses how to do this from scratch with Ruby on Rails and all open source components:

    http://depth-first.com/articles/2006/11/27/anatomy-of-a-cheminformatics-web-application-beautifying-depict

    The approach is different, but complementary to yours in that the rendering code is contained in the application itself, rather than provided as a Web service.

    I’ve also been playing around with the idea of a lightweight SMILES depiction applet/script that doesn’t require a server at all. Maybe someday…

  2. Thanks for the pointers. They’re much more comprehensive than my toy :)

Leave a Reply

Your email address will not be published. Required fields are marked *