For an internal project, I needed a web control that will display the structure of the molecule as I type in the name (or SMILES, CAS number, IUPAC name or a host of other ways you can textually describe a molecule in one line). Now this is not really easy, but thanks to the some open APIs provided by the CADD group at NIH/NCI (http://cactus.nci.nih.gov), it was really easy to get this done.
Here is a quick overview of the hack I wrote. The code for the same is available on GitHub (https://github.com/tovganesh/mol-auto-view.js)
The Cactus (http://cactus.nci.nih.gov/chemical/structure)
The molecule description can be given in various ways, and it usually a very tiresome task to think through and write interpreters. One can of course use tools like Open Babel or CDK, but a more cleaner interface is a web service offered by NCI, called the Cactus. A simple API call as follows,
gives you a mol file that can be viewed:
JSME (http://peter-ertl.com/jsme/)
Next to view this structure, I use the simple but powerful 2D molecule drawing tool by Peter Ertl and Bruno Bienfait (http://peter-ertl.com/jsme/)
I, particularly use the following API:
The above call is the clear the drawing area, and read in the new molecule file obtained from call to the Cactus API.
Next, I need to get the molecule file data from JSME and well as a graphics representation to show in a list. This is does using the following API call:
The first call is for getting the molecule data, as a mol file. The second call is to get the graphics of the molecule as a SVG data, that is then encoded to base64.
Putting it all together: Angular JS and Bootstrap
Putting it all together required using Angular JS and some basic Bootstrap. The following is used for the text field that takes the molecule description:
Here is a quick overview of the hack I wrote. The code for the same is available on GitHub (https://github.com/tovganesh/mol-auto-view.js)
 |
| The final control. You give a molecule description, the molecule appears in draw area, click "Save to list" and it gets saved to a list that is depicted on the right hand side. |
The Cactus (http://cactus.nci.nih.gov/chemical/structure)
The molecule description can be given in various ways, and it usually a very tiresome task to think through and write interpreters. One can of course use tools like Open Babel or CDK, but a more cleaner interface is a web service offered by NCI, called the Cactus. A simple API call as follows,
gives you a mol file that can be viewed:
http://cactus.nci.nih.gov/chemical/structure/[Molecule Description]/pdf
JSME (http://peter-ertl.com/jsme/)
Next to view this structure, I use the simple but powerful 2D molecule drawing tool by Peter Ertl and Bruno Bienfait (http://peter-ertl.com/jsme/)
I, particularly use the following API:
jsmeApplet.reset();
jsmeApplet.readMolFile(dataFromCactusAPICall);
The above call is the clear the drawing area, and read in the new molecule file obtained from call to the Cactus API.
Next, I need to get the molecule file data from JSME and well as a graphics representation to show in a list. This is does using the following API call:
molFile: jsmeApplet.molFile(),
molImage: btoa(jsmeApplet.getMolecularAreaGraphicsString())
Putting it all together: Angular JS and Bootstrap
Putting it all together required using Angular JS and some basic Bootstrap. The following is used for the text field that takes the molecule description:
The above code is used to fetch the mol data from giving a call to the cactus API, as you type the molecule text. The model change even is delayed by 750ms, so that the API call is only fired, when the user pauses for some time.
Thats it! I hope you find it useful. To see the full code see Github: https://github.com/tovganesh/mol-auto-view.js
No comments:
Post a Comment