Journal:Chemozart: A web-based 3D molecular structure editor and visualizer platform

From LIMSWiki
Revision as of 20:30, 19 April 2016 by Shawndouglas (talk | contribs) (Added content. Saving and adding more.)
Jump to navigationJump to search
Full article title Chemozart: A web-based 3D molecular structure editor and visualizer platform
Journal Journal of Cheminformatics
Author(s) Mohebifar, Mohamad; Sajadi, Fatemehsadat
Author affiliation(s) Shahid Beheshti University
Primary contact Email: mohamad@mohebifar.com
Year published 2015
Volume and issue 7
Page(s) 56
DOI 10.1186/s13321-015-0101-7
ISSN 1758-2946
Distribution license Creative Commons Attribution 4.0 International
Website http://jcheminf.springeropen.com/articles/10.1186/s13321-015-0101-7
Download http://jcheminf.springeropen.com/track/pdf/10.1186/s13321-015-0101-7 (PDF)
This article should not be considered complete until this message box has been removed. This is a work in progress.

Abstract

Background: Chemozart is a 3D Molecule editor and visualizer built on top of native web components. It offers an easy to access service, user-friendly graphical interface and modular design. It is a client centric web application which communicates with the server via a representational state transfer style web service. Both client-side and server-side application are written in JavaScript. A combination of JavaScript and HTML is used to draw three-dimensional structures of molecules.

Results: With the help of WebGL, three-dimensional visualization tool is provided. Using CSS3 and HTML5, a user-friendly interface is composed. More than 30 packages are used to compose this application which adds enough flexibility to it to be extended. Molecule structures can be drawn on all types of platforms and is compatible with mobile devices. No installation is required in order to use this application and it can be accessed through the internet. This application can be extended on both server-side and client-side by implementing modules in JavaScript. Molecular compounds are drawn on the HTML5 Canvas element using WebGL context.

Conclusions: Chemozart is a chemical platform which is powerful, flexible, and easy to access. It provides an online web-based tool used for chemical visualization along with result oriented optimization for cloud based API (application programming interface). JavaScript libraries which allow creation of web pages containing interactive three-dimensional molecular structures has also been made available. The application has been released under Apache 2 License and is available from the project website https://chemozart.com.

Keywords: Cheminformatics, web-based, JavaScript, visualization

Background

In the field of computational chemistry, applications which are capable of constructing and viewing 3D structures of molecules play an important role. Such software can be used by students to understand stereochemical concepts.[1] There are numerous desktop applications available for viewing and building 3D molecules. Avogadro[2], Jmol[3], QuteMol[4] and PyMol are few such examples. When it comes to web applications capable of constructing 3D chemical structures, there are not many available.

Today web-based tools are becoming extremely popular. There are numerous benefits which can be derived from them; accessibility, flexible core technologies, platform independence and compatibility are some of them. Most of the web applications which are used for building chemical structures have limited capabilities and most of them are two-dimensional editors such as ChemDoodle.[5] There are several chemical structure editors available powered by Java applets such as JME, a free 2D molecule editor java applet[6]; however, they are not compatible with all the browsers. Besides, Java needs to be separately installed on the system in order to run these applications. This issue exists for other embedded objects like Flash and Flame[7], a Flash molecular editor is a case in point. There is another web application available to build 3D chemical structures, it is called CH5M3D.[8] It portrays a 3D picture with HTML5; however, it fails to deliver optimum results as it uses canvas 2D context. Because of its limitation, it does not use any shader program. As a result, three-dimensional rendering cannot be portrayed in the truest sense. Today, it is possible to draw sophisticated graphics that are hardware accelerated by the GPU thanks to HTML5 and WebGL. Furthermore, these components are supported by all modern web browsers, especially mobile browsers.

Applications built using web-based components can be accessed with ease on portable devices such as iPods and smartphones with an additional feature which enables use of it in offline mode too. In today's tech-savvy world, the utilization of chemistry-related applications is dramatically growing.[9] This 3D molecule editor targets students at varied levels of study, i.e. high school, college, and graduate school. Along with the students Chemozart targets, chemical professionals and teachers also can effectively research in any topic and appropriately solve the queries of their students. We have developed a 3D molecule editor on top of web components which leads to better performance and maintainability. With the help of node.js (https://nodejs.org/)​, it is now possible to use JavaScript outside the web browsers. Both server-side and client-side codes are fully written in JavaScript. By writing both in the same language, we seek to enhance integration. JavaScript is the language used to develop this software. A Github data visualization factually states that JavaScript is considered to have the most active repositories. As a result, there are diverse packages written in JavaScript with which this software can be bundled.

A chemical toolbox is also needed in order to read different chemical file formats, calculate energy, etc. OpenBabel is considered to be one of the best open-source chemical toolkits, and it can be easily ported to different languages. There are bindings of OpenBabel in some languages such as Rubabel[10] for Ruby and Pybel[11] for Python. We also made OpenBabel-Node (http://mohebifar.github.io/​OpenBabel-Node/​) to port OpenBabel[12] to node.js. It exposes OpenBabel application programming interfaces (APIs) to many available packages in node.js via a convenient interface. We bundled it with express.js web framework to create a chemical representational state transfer style RESTful API. OpenBabel-Node is used to read and write a variety of chemical file formats. Apart from this, it also supports various molecular mechanics force fields and provides optimization of geometry of the molecules.

Chemozart is a web application tool that can be used for viewing and editing of 3D molecular structures. With the help of this web-based platform, users can easily create, modify, or view the structures of the molecular compounds. With the help of JavaScript and HTML, users can easily draw or view the 3D structures of the molecular compounds. The web application represents the molecular structures in both of the client-side and server-side applications. The client-side consists of the UI and the visualization part that helps one to view or edit the structures easily. The convenient user interface allows for modifying molecular structures interactively, while the visualization part helps in viewing the 3D representations of the molecular compounds.

Implementation

Software architecture and interactivity

Chemozart provides a web-based platform for creation, modification and display of molecules. It is available under the Apache 2 License, which gives power and access to everyone to contribute to and extend it. This package consists of a client-side and a server-side application. The client-side application is designed according to the Model View ViewModel (MVVM) pattern. It is built with Angular.js which is an MV* client-side framework. It offers service providers, two-way bindings, data models, convenient RESTful resource client service, declarative user interface, etc. The server-side application is designed according to the Model View Controller (MVC) pattern. It is also completely written in JavaScript and uses node.js as the runtime environment. This package is flexible enough to be developed with a well-organized structure. The entire application is written in JavaScript according to ECMAScript 6, which offers classy, flexible, and cleaner syntax, a universal way for module definition, etc. Chemozart transpiles ES6 codes to ES5-friendly codes using Babel (https://babeljs.io/)​ for browser support. The stylesheets are originally written in LESS, which are compiled to CSS.

The client-side application depends on two major packages, which are designed to facilitate the process of binding chemical data to the graphics. Chem.js is a JavaScript package which creates event-based models of molecules, atoms, and bonds through an object-oriented approach. It is also used to serialize the molecules in JSON format. Mol3D (https://github.com/​mohebifar/​mol3d) is another JavaScript package that displays the structure of molecules, and it uses Three.js to render 3D objects with WebGL. It converts the Chem.js objects into Three.js (https://github.com/​mrdoob/​three.​js) objects according to the atoms’ position, atomic radius, and CPK coloring convention. The default display mode is “ball and stick” as it is the most convenient model for editing molecules. It is also possible to make arbitrary display modes.

The server-side application depends on OpenBabel-Node, which is a sub-module of Chemozart, to provide native bindings of OpenBabel in node.js. It is originally written in C++ and makes it possible to use OpenBabel APIs in JavaScript code. This package is used to build 3D coordinates, calculate the energy of molecules, and import and export chemical files, including SMILES [13], CML [14], Hyperchem HIN, MDL SD [15], Sybyl Mol2 [16] and PDB [17].


References

  1. ↑ Abraham, M.; Varghese, V.; Tang, H. (2010). "Using molecular representations to aid student understanding of stereochemical concepts". Journal of Chemical Education 87 (12): 1425–1429. doi:10.1021/ed100497f. 
  2. ↑ Hanwell, M.D.; Curtis, D.E.; Lonie, D.C. et al. (2012). "Avogadro: An advanced semantic chemical editor, visualization, and analysis platform". Journal of Cheminformatics 4: 17. doi:10.1186/1758-2946-4-17. PMC PMC3542060. PMID 22889332. https://www.ncbi.nlm.nih.gov/pmc/articles/PMC3542060. 
  3. ↑ "Jmol: An open-source Java viewer for chemical structures in 3D". SourceForge.net. Slashdot Media. http://jmol.sourceforge.net/. Retrieved 01 November 2015. 
  4. ↑ Tarini, M.; Cignoni, P.; Montani, C. (2006). "Ambient occlusion and edge cueing for enhancing real time molecular visualization". IEEE Transactions on Visualization and Computer Graphics 12 (5): 1237–1244. doi:10.1109/TVCG.2006.115. 
  5. ↑ Burger, M.C. (2015). "ChemDoodle Web Components: HTML5 toolkit for chemical graphics, interfaces, and informatics". Journal of Cheminformatics 7: 35. doi:10.1186/s13321-015-0085-3. PMC PMC4503857. PMID 26185528. https://www.ncbi.nlm.nih.gov/pmc/articles/PMC4503857. 
  6. ↑ Ertl, P. (2010). "Molecular structure input on the web". Journal of Cheminformatics 2: 1. doi:10.1186/1758-2946-2-1. PMC PMC2827360. https://www.ncbi.nlm.nih.gov/pmc/articles/PMC2827360. 
  7. ↑ Dallakian, P.; Haider, N. (2011). "FlaME: Flash Molecular Editor - A 2D structure input tool for the web". Journal of Cheminformatics 3: 6. doi:10.1186/1758-2946-3-6. PMC PMC3037917. PMID 21284863. https://www.ncbi.nlm.nih.gov/pmc/articles/PMC3037917. 
  8. ↑ Earley, C.W. (2013). "CH5M3D: An HTML5 program for creating 3D molecular structures". Journal of Cheminformatics 5: 46. doi:10.1186/1758-2946-5-46. PMC PMC4177146. PMID 24246004. https://www.ncbi.nlm.nih.gov/pmc/articles/PMC4177146. 
  9. ↑ Libman, D.; Huang, L. (2013). "Chemistry on the go: Review of chemistry apps on smartphones". Journal of Chemical Education 90 (3): 320–325. doi:10.1021/ed300329e. 
  10. ↑ Smith, R.; Williamson, R.; Ventura, D.; Prince, J.T. (2013). "Rubabel: Wrapping open Babel with Ruby". Journal of Cheminformatics 5: 35. doi:10.1186/1758-2946-5-35. PMC PMC3733738. PMID 23883475. https://www.ncbi.nlm.nih.gov/pmc/articles/PMC3733738. 
  11. ↑ O'Boyle, N.M.; Morley, C.; Hutchison, G.R. (2008). "Pybel: A Python wrapper for the OpenBabel cheminformatics toolkit". Chemistry Center Journal 2: 5. doi:10.1186/1752-153X-2-5. PMC PMC2270842. PMID 18328109. https://www.ncbi.nlm.nih.gov/pmc/articles/PMC2270842. 
  12. ↑ O'Boyle, N.M.; Banck, M.; James, C.A. (2011). "Open Babel: An open chemical toolbox". Journal of Cheminformatics 3: 33. doi:10.1186/1758-2946-3-33. PMC PMC3198950. PMID 21982300. https://www.ncbi.nlm.nih.gov/pmc/articles/PMC3198950. 

Notes

This presentation is faithful to the original, with only a few minor changes to presentation. In some cases important information was missing from the references, and that information was added. Numerous grammar errors were also corrected.

Retrieved from "https://www.limswiki.org/index.php?title=Journal:Chemozart:_A_web-based_3D_molecular_structure_editor_and_visualizer_platform&oldid=25145"