Burger. J Cheminform (2015) 7:35 DOI 10.1186/s13321-015-0085-3

REVIEW Open Access ChemDoodle Web Components: HTML5 toolkit for chemical graphics, interfaces, and informatics Melanie C Burger1,2*

Abstract ChemDoodle Web Components (abbreviated CWC, iChemLabs, LLC) is a light-weight (~340 KB) JavaScript/HTML5 toolkit for chemical graphics, structure editing, interfaces, and informatics based on the proprietary ChemDoodle desktop software. The library uses and WebGL technologies and other HTML5 features to provide solutions for creating chemistry-related applications for the web on desktop and mobile platforms. CWC can serve a broad range of scientific disciplines including crystallography, materials science, organic and inorganic chemistry, biochem- istry and chemical biology. CWC is freely available for in-house use and is open source (GPL v3) for all other uses. Keywords: ChemDoodle Web Components, Chemical graphics, Animations, Cheminformatics, HTML5, Canvas, JavaScript, WebGL, Structure editor, Structure query

Introduction Mobile browsers did support HTML5, which opened How we communicate chemical information is increas- the door to web applications built with only HTML, ingly technology driven. Learning management systems, CSS and JavaScript (JS), such as the ChemDoodle Web virtual classrooms and MOOCs are a few examples where Components. chemistry educators need forward compatible tools for digital natives. Companies that implement emerg- Review ing web technologies can find efficiencies and benefit The ChemDoodle Web Components technology stack from competitive advantages. The first chemical graph- and features ics toolkit for the web, MDL Chime, was introduced in The ChemDoodle Web Components library, released in 1996 [1]. Based on the molecular visualization program 2009, is the first chemistry toolkit for structure viewing RasMol, Chime was developed as a plugin for Netscape and editing that is originally built using only web stand- and later for Internet Explorer and Firefox. In 2004 Jmol, ard technologies, HTML5, CSS, and JS, and is accord- a Java applet [2], was released to replace Chime and pro- ingly supported by all modern desktop and mobile vide an open source and operating system independent browsers. CWC is made available under the free and solution to the growing number of web browsers. JME, a open source, GNU GPLv3 license and is accompanied by molecular editor [3], was later integrated into Jmol to add detailed documentation and commercial support pack- chemical structure upload and editing functionality. In ages. The CWC source code follows JS best practices to 2007 however, the hardware landscape changed dramati- ensure maintainability and cross-compatibility with other cally with the introduction of mobile devices that did not libraries and frameworks. support third party plugins such as Flash or Java applets. Using web standard technology has a number of advan- tages over 3rd party plugins like Java applets and Flash:

*Correspondence: [email protected] 2 Imagineeringart.com Inc., 208 Bloor Street West Suite 300, Toronto, •• installation or updates are not required since JS is ON M5S 3B4, Canada enabled in browsers by default, Full list of author information is available at the end of the article

© 2015 Burger. This article is distributed under the terms of the Creative Commons Attribution 4.0 International License (http:// creativecommons.org/licenses/by/4.0/), which permits unrestricted use, distribution, and reproduction in any medium, provided you give appropriate credit to the original author(s) and the source, provide a link to the Creative Commons license, and indicate if changes were made. The Creative Commons Public Domain Dedication waiver (http://creativecommons.org/publicdomain/ zero/1.0/) applies to the data made available in this article, unless otherwise stated. Burger. J Cheminform (2015) 7:35 Page 2 of 7

•• JS applications are quick to load without the over- page within a JavaScript code block. The appearance of head of 3rd party plugins, the component can be customized in an optional third •• there are fewer security concerns since the code is step. Finally, molecular data is loaded into the compo- sand-boxed in the browser, nent either by creating a molecule manually, or by fetch- •• the deep integration of HTML, CSS and JS in the ing ChemDoodle JSON or the contents of a MOL file browser creates a seamless user experience, and or other molecular structure file. The components are •• the ChemDoodle Web Components library can be “chemically intelligent”: chemical data loaded in com- loaded and displayed wherever a HTML5 engine is ponents can be later handled or altered with scripting. available, including WYSIWIG text editors, Apple’s Support for building components is also available in the Cocoa development kit, and mobile app webviews. ChemDoodle v7 desktop application. Component code can be exported through the “Generate ChemDoodle Beyond rendering 2D and 3D chemical graphics, the Web Component” dialogue screen, however, advanced library also provides access to cheminformatics algo- users will prefer to use the CWC API (Figure 2) for full rithms, chemical file input/output and manipulation, control over component appearance and behavior. Tuto- and a toolset for chemistry web application development rials for using the CWC API are provided on the CWC through a component system that gives the library its website, web.chemdoodle.com. name. The components of the CWC library are special- ized HTML5 classes that expose a high-level 2D graphics API for quick loading and viewing of chemical data, as The 2D graphics engine in the ChemDoodle Web Com- well as providing utility functions and multi-device event ponents is based on HTML5 technology. The handling. When first released, CWC comprised of 6 tag creates a bitmap drawing surface in an components: the Viewer, Rotator, Transformer, MolGrab- HTML document that is controllable with JS. CWC ber, File Loader, and Doodler (pre-cursor to Sketcher) abstracts the interface and provides a uniform components. Averaging a yearly version release cycle, codebase for drawing a wide range of 2D chemical graph- CWC has now grown to 20 components including ones ics within 2D CWC components: for displaying chemical spectra, 3D WebGL graphics, and animations. The latest update, version 7, introduces •• When displayed, atom labels can show standard ele- new 3D features including Pipe and Plank protein mod- ment labels or any alternative symbol. els, full support for high DPI and retina display devices, •• Ionic/zero order, half, single, double, triple, and res- query interface tools for advanced chemical searches, onance chemical bond types, and protruding and and structure spectrum correlation utilities. recessed stereochemical bonds are available. •• Charges, radicals and lone electron pairs are posi- Usage tioned automatically on attributed atoms. A ChemDoodle Web Component is implemented in •• Advanced query notation can be displayed on atoms four basic steps (Figure 1). First, the ChemDoodle Web or bonds to represent sets of molecules. Components library is referenced within the HTML •• Synthetic, retrosynthetic, resonance and equilibrium document. Second, the component is instantiated on the arrows can have text placed above or below them.

Figure 1 JavaScript code for creating an instance of a Viewer component on a web page. The ChemDoodle Web Components library is A included in the web page using the