WHITEPAPER

Understanding the Benefits of ChemDraw® Embedded in an ELN

Embedding a chemical structure editor in a web browser application is certainly not a new thing. Going as far back as 1995, in the infancy of the World Wide Web, CambridgeSoft (later acquired by PerkinElmer) had already pioneered the concept. ChemFinder.com, the first chemistry enabled search engine, introduced the ChemDraw Netscape Navigator Plugin which enabled users to find chemical information on the web. Sergei and Larry were still in their Stanford dorm room hacking the first Google search engine.

From the beginning, the embeddable ChemDraw plugin allowed users to directly draw chemical structures inside the browser using the familiar ChemDraw toolbar and keyboard shortcuts. Meanwhile, contemporaneous web applications had to rely on using external chemical editors to copy SMILES strings and mol-files into a textbox on the web page. The Netscape ChemDraw Plugin, and its twin, the ChemDraw ActiveX control for Internet Explorer, ushered in a new generation of Enterprise cheminformatics applications

including: chemical registration, procurement, inventory management, and ultimately the first widely adopted chemistry electronic notebook system. While the ability to directly draw structures into the browser was instrumental to its widespread adoption, even more important was the fact that the embedded editor behaved exactly like the standalone ChemDraw desktop application. This is evidenced by the large number of light-weight chemistry web editors that failed to gain traction in commercial cheminformatics applications.

However, the ability to replicate the ChemDraw desktop behavior inside a browser came at a cost. The plugins often required cumbersome and unreliable installation procedures. Depending on the specific browser make and version, different Java, ActiveX or other client-side software components had to be pre-installed on the end-user’s computer. Furthermore, some of these installation procedures required system administrator privileges, greatly impacting the usability of the host web sites and cheminformatics systems.

2

The JavaScript Chemical Editor

As web technologies matured, the technical answer became obvious. Rather than installing “desktop-like” applications and components, it became possible to author the chemical editors using JavaScript, the native programming language supported by all modern web browsers. This explains why a whole new generation of light-weight, embeddable, zero-installation-footprint, and platform-independent chemistry editors have flooded the market in recent years. The problem, of course, is that even though this new generation of JavaScript editors is easy to use and require no installation, they do not provide the same look-and-feel, features, and behaviors as the well-established desktop editors. After all, it took CambridgeSoft 30 years and a lot of code to write ChemDraw, so it’s impossible to rewrite a full featured JavaScript version overnight.

The solution to this challenge came from an unexpected source - the video game and mobile phone gaming industry! It turns out that ChemDraw is not the only highly complex, graphically rich desktop application that needed to be ported to JavaScript. There are thousands of computer and video games looking to reinvent themselves in the age of web browsers and mobile phones. Enter a new “trans-compilation” technology, pioneered by the gaming industry, that allows reusing the exiting desktop application code by automatically translating it into browser compatible JavaScript. So, in 2017 the new ChemDraw JS editor was born. It is the culmination of decades of leadership in desktop and web chemical editing rolled up into a single package. It delivers on the promise of full desktop features, in a browser-embedded, platform-independent, and zero-installation solution. Conveniently, because ChemDraw JS and the ChemDraw desktop products are built from the same exact code-base, any new feature added to the desktop product can be immediately enabled in the web-based editor.

Embedding into Electronic Lab Notebooks

Of all enterprise cheminformatics applications, electronic lab notebooks place the most stringent demands on embedded chemical editors. They not only exercise the editor as a chemical query tool, but also require authoring complex reaction schemes, performing stoichiometry calculations, generating chemical properties, and even automating the authoring of synthetic preparation narratives from the chemical reaction drawing. Hence there is no better way to illustrate the impact of the capabilities of ChemDraw JS than by looking at how it is used within PerkinElmer’s Signals™ Notebook.

Let’s start with the most obvious. The chemical drawing functionality within Signals Notebook is provided by ChemDraw JS. This means that nearly anything you can draw in ChemDraw, you can also draw and view within Signals Notebook. Every tool, label, nickname, keyboard shortcut, and drawing template available in ChemDraw is accessible within the browser. This not only includes the extensible collection of chemical structure templates, but also BioArt, Advanced BioDraw, and labware clipart templates. The ChemDraw element can therefore also be used to visually document biological systems and even experimental laboratory setups.

There are a few advanced drawing features that are just too cumbersome to implement and effectively use within an embedded editor. These are features that require additional helper tools such as the biopolymer tool, HELM monomer tool, or the TLC plate tool. However, Signals Notebook provides a seamless integration with ChemDraw Desktop. In a single-click the contents of the embedded chemical drawing are launched in the desktop product allowing access to all features. Once edited, the contents of the desktop application are directly saved to your experiment in Signals Notebook, and the embedded editor

Figure 1. Draw chemical and biological entities and more with ChemDraw JS.

3

Figure 2. ChemDraw JS in Signals Notebook is integrated with ChemDraw on the desktop.

Figure 3. Use the Quick Add toolbar or ChemACX Explorer panel to add components to your reaction.

automatically reflects the changes. Note that the embedded ChemDraw editor will correctly display all features drawn in the desktop product.

In addition, Signals Notebook provides a full featured stoichiometry grid. As reactants, reagents, catalysts, and products are drawn in the reaction scheme, the stoichiometry table is dynamically updated with autogenerated Rxn ID values, chemical name, molecular formula, formula mass, and exact mass. The heavy lifting of parsing the reaction components and calculating the chemical properties is delegated to the embedded ChemDraw editor. This guarantees consistency with the behaviors of the desktop product. The embedded editor also supports adding content from external chemical compound

libraries. In Signals Notebook, that capability is widely used by the Quick Add search bar, which enables importing content from the users favorite or frequently used compounds, and from the integrated ChemACX Explorer panel. The integration with our ChemACX database allows easy search and retrieval of over 20M available reagents, their chemical structures, properties, and even material safety sheets. In summary, users have full chemical drawing capabilities and can also efficiently access chemical structures and data from external sources. This capability can be extended to integrate with other data sources, such as internal registration and inventory systems or subscription-based reaction and patent content.

For a complete listing of our global offices, visit www.perkinelmer.com/ContactUs

Copyright ©2018, PerkinElmer, Inc. All rights reserved. PerkinElmer® is a registered trademark of PerkinElmer, Inc. All other trademarks are the property of their respective owners. 014502_01 PKI

PerkinElmer, Inc. 940 Winter Street Waltham, MA 02451 USA P: (800) 762-4000 or (+1) 203-925-4602www.perkinelmer.com

Figure 4. Autotext in Signals Notebook pulls information directly from the reaction and stoichiometry table.

Signals Notebook also includes a sophisticated text editor element that aids users in rapidly and consistently documenting the preparation details of their chemical synthesis. The editor supports pre-configured text snippets for commonly used phrases including place-holders that provide quick access to lists of glassware, equipment, and experimental conditions, and even direct access to the reactant and product names and properties. Once again, it is the embedded ChemDraw editor that exposes the details of the reaction scheme to other Signals Notebook components such as the preparation section.

The Essential Feature: Copy/Paste

Most chemists do not like to draw their chemical structures and reactions from scratch. We all have preexisting drawings that we prefer to tweak or extend – this is why the most appreciated feature of any chemical drawing tool by far is its ability to import and export content from other tools and documents, preferably via copy (Ctrl-C) and paste (Ctrl-V) keyboard shortcuts. Unfortunately, even the best chemical editors, once embedded into a web browser, face significant technical challenges to deliver this widely expected functionality. By design, web browsers greatly limit access to the end-user’s copy/paste clipboard. In particular, only text-based formats such as SMILES and mol-file can be accessed from the browser. This forces awkward workflows like having to use “copy as SMILES” context menus to read data from other editors, or the inability to copy chemical objects from Microsoft Office applications. These limitations have been a source of frustration to users accustomed to seamless copy/paste of chemical structures from various cheminformatics

tools for decades. Fortunately, ChemDraw JS also addresses this critical requirement.

ChemDraw JS includes an optional Web Clipboard component that enables Ctrl-C/Ctrl-V support from within any browser. This advanced technology does require the installation of a tray application or browser extension that enables full access to the end-user’s clipboard. The ChemDraw team has worked diligently to ensure that the installation of these components is straight-forward on all supported browsers, and that it does not require administrative permissions. The end result is that upon enabling the Web Clipboard, users can copy/paste freely between their favorite applications with a wide support of chemical formats. In addition, ChemDraw JS implements extensive chemical format conversions, allowing users to simply drag-and-drop many chemical file formats directly onto the canvas.

Take it for a Spin

In summary, after over 30 years of evolution, ChemDraw JS remains the most advanced, programmable, and feature-rich web-based chemical editor in the industry. It is an essential tool for teams developing intranet or commercial web applications that require chemical intelligence. It provides all the features of the desktop application, including the extensive copy/paste and file format compatibility, all in a zero-footprint installation package compatible with all modern browsers. The reference implementation is available in PerkinElmer’s Signals Notebook, which demonstrates ChemDraw JS most advanced capabilities. If you haven’t tried it yet, simply request a free 30-day trial of Signals Notebook and take ChemDraw JS for a spin.