Signals Blog by Metamolecular 2012-05-17T13:58:40-07:00 http://metamolecular.com Metamolecular Foundational Cheminformatics Software and Why Chemistry May Need Something Better 2012-02-02T00:00:00-08:00 http://metamolecular.com/blog/2012/02/02/foundational-cheminformatics-software-and-why-chemistry-may-need-something-better <p>Chemistry is peculiar among scientific fields due to its use of the molecule as an organizing principle. This gives chemistry an expressive, mostly regular, often graphical language at the core of the discipline. Although apparently simple on the surface, the concept of the molecule is deep with subtleties that can take years to appreciate. Chemists in different subdisciplines (e.g., analytical, organic, bioorganic) may find it hard to communicate at times because their common molecular language blinds them to critical nuances.</p> <p>Computers know nothing about this language of molecules that chemists use. To develop even the most rudimentary application in chemistry requires a foundational cheminformatics software layer that enables the easy use of molecular concepts within a programming environment.</p> <p>Software developers need better foundational tools to create applications that will empower chemists to make new discoveries. This article describes one approach.</p> <h4>Toolkits, Oh We Have Toolkits</h4> <p>Most of the time, foundational cheminformatics software is referred to as a ‘cheminformatics toolkit’. The purpose of this software is to provide something akin to a <a href="http://en.wikipedia.org/wiki/Domain-specific_language">domain specific language</a> that defines and operates on molecular structure representations. The toolkit makes it possible to develop a chemistry application in a given programming environment. No toolkit, no application.</p> <p>Cheminformatics toolkits can be divided into roughly two categories: (1) those distributed by commercial organizations; and (2) those distributed by informal academic collaborations and nonprofits.</p> <h4>Lock-In</h4> <p>Some kinds of software are especially ‘sticky’. Once you start using them, it’s difficult to stop because they become so intertwined with the work you do or the products you distribute. There was a time when Microsoft Office was sticky because it was the only way to share documents. If you’ve ever developed a Web or desktop application, then you know how incredibly sticky Web frameworks and UI toolkits can be.</p> <p>Cheminformatics toolkits are among the stickiest of software packages in chemistry. They alone stand between a programming environment and a lot of application code. So a lot of code gets written to the toolkit’s application programming interface (API). Coupled with the time and effort of development staff to learn a toolkit’s quirks and nuances, it’s not hard to see how an organization’s investment in a cheminformatics toolkit can be enormous.</p> <p>Lock-in is not necessarily a bad thing. But it can become a problem when the goals of the toolkit provider don’t match your goals.</p> <h4>Commercial Vendor Lock-In</h4> <p>The advantages of using a toolkit provided by a traditional vendor are that the vendor takes care of the maintenance and upkeep of the toolkit. This lets your development staff focus on building applications.</p> <p>The flip-side of this tight control can be restrictions on how your application works or how it’s distributed. For example, to convert your successful desktop application into a Web application may require a major license renegotiation, new fees, and possibly unsavory restrictions on distribution. Similar considerations would apply to taking an application in a mobile direction, or rebuilding the toolkit to run in a hardware or software environment - or programming language - not supported by the vendor. Likewise, an API that wasn’t sufficiently flexible would require waiting (and hoping) for the vendor to upgrade.</p> <p>Limitations on redistribution, recompilation, and modification are some of the tradeoffs made by application developers who base their products on traditionally-licensed commercial cheminformatics toolkits.</p> <h4>Open Source</h4> <p>Given that toolkit lock-in is inevitable when developing chemistry software, some have opted to use open source options.</p> <p>However, unlike traditionally-licensed cheminformatics software, nobody is responsible for responding to bug reports, new feature requests, or lack of documentation. Furthermore, open source licenses vary significantly in the freedoms allowed to application developers. The <a href="http://www.gnu.org/licenses/">GPL and LGPL</a> in particular both place restrictions on commercial vendors that may ultimately be bad for business. Compounding the problem is the fact that sometimes copyright to the source code resides, not with a single entity with whom better terms can be negotiated, but with many individual contributors - some of whom may no longer even be traceable.</p> <p>The problem is that the organizations or individuals behind open source cheminformatics toolkits are poorly equipped to deal with the demands of a commercial organization developing products in a competitive environment.</p> <h4>Why We Chose None Of The Above</h4> <p>At Metamolecular, we’ve developed our own cheminformatics toolkit rather than be subject to vendor or open source lock-in. Our two products, <a href="http://metamolecular.com/chemwriter/">ChemWriter</a> and <a href="http://metamolecular.com/chemvector/">ChemVector</a> both rely on proprietary cheminformatics toolkits we’ve developed and refined over the last few years.</p> <p>In addition to these activities, we’ve worked with other companies to build cheminformatics systems and services. Each of these transactions have helped refine our cheminformatics toolkit by overcoming real-world problems.</p> <p>We’ve also built a number of concept products that have further improved the understanding of what a toolkit needs to do and how it needs to do it.</p> <p>Maintaining and growing our own cheminformatics toolkit has enabled us to achieve goals that neither an open source nor traditional commercial vendor arrangement would have allowed.</p> <h4>Consolidation</h4> <p>Our products and services have been written in two main languages: Java and JavaScript. These codebases have remained separate due to the fundamentally different nature of each language and its associated runtime environment.</p> <p>But in the last few months, it’s become apparent that this can’t continue. For example, some <a href="http://metamolecular.com/chemwriter/">ChemWriter</a> customers have requested <a href="http://www.opensmiles.org/">SMILES</a> input and output. The technical challenges of maintaining separate codebases in Java and JavaScript for such code made the request impossible to fill in a cost-effective way.</p> <p>Fortunately, we’ve found a solution that will enable us to maintain a single Java-based codebase for all of our toolkit functionality. The key to making this work is a new Java-to-JavaScript source translation library that was developed in-house and which now works reliably.</p> <p>We are now consolidating all code essential for a modern cheminformatics platform into a single Java codebase. JavaScript will be generated for products like ChemWriter and ChemVector through source code translation. Other uses will also be possible given some of the tools that have been recently developed to cross-compile Java to fast native binaries and other runtimes and platforms.</p> <h4>ChemCore™</h4> <p>Our cheminformatics platform is called <a href="http://metamolecular.com/chemcore/">ChemCore</a>. Its foundation consists of a chemistry model designed with the <a href="http://depth-first.com/articles/2012/01/11/on-the-futility-of-extending-the-molfile-format/">future in mind</a>. Around this has been added a layer of efficient and flexible graph operations:</p> <ul> <li>Fast subgraph matching</li> <li>Powerful graph query capabilities</li> <li>Flexible, efficient graph traversals</li> </ul> <p>Higher-level capabilities already or will include:</p> <ul> <li>Fast file input/output</li> <li>A complete system of atomic weights and elemental properties</li> <li>Sensible handling of implicit hydrogens</li> <li>Molecule validation and correctness-checking</li> <li>Molecule transformations, including canonicalization and salt-stripping</li> <li>Stereoisomer enumeration and checking</li> <li>Tautomer enumeration</li> <li>Fingerprint generation</li> <li>Name-to-structure</li> </ul> <h4>Commercial Open Source</h4> <p>Given the above survey of the cheminformatics software landscape and the trouble we had with the current options, is it possible we aren’t alone?</p> <p>Had a commercial software vendor offered a platform like ChemCore under an open source license and with first-rate technical support, we would have used that option. But this solution may not be attractive to many others.</p> <p>Does the world need a better cheminformatics toolkit offering greater flexibility to application developers combined with dedicated technical support? Or are the existing options working well enough?</p> <p>If you’d like to discuss these questions, please feel free to <a href="mailto:rapodaca@metamolecular.com">drop me a line</a>.</p> An Introduction to ChemVector 2011-10-26T00:00:00-07:00 http://metamolecular.com/blog/2011/10/26/an-introduction-to-chemvector <iframe width="640" height="480" src="http://www.youtube.com/embed/sJRycENilIk" frameborder="0" allowfullscreen></iframe> <p><a href="http://metamolecular.com/chemvector/">ChemVector</a> is a JavaScript solution to the chemical structure imaging problem. Structure images are generated directly in the browser from source files, eliminating the need for an image server.</p> <p>This video introduces ChemVector through illustrative live examples and source code.</p> How to run a Presentation from an iPad Using Keynote [Video] 2011-09-21T00:00:00-07:00 http://metamolecular.com/blog/2011/09/21/how-to-run-a-presentation-from-an-ipad-using-keynote-video <center><iframe width="620" height="340" src="http://www.youtube.com/embed/ZOzCCtcToTY" frameborder="0" allowfullscreen></iframe></center> <p>Have you wondered if it’s possible to run your presentation slide decks from your iPad? This video shows how.</p> <h4>Materials</h4> <ul> <li>a Mac running <a href="http://www.apple.com/iwork/keynote/">Keynote</a></li> <li>an iPad 1 or later running the <a href="http://itunes.apple.com/us/app/keynote/id361285480">Keynote App</a></li> <li>an <a href="http://store.apple.com/us/product/MC552ZM/B">iPad VGA Adapter</a></li> </ul> <h4>Summary</h4> <p>I was skeptical that this would actually work, so I created a PDF version of my presentation and saved it to a memory stick - just in case. But everything came together without a hitch.</p> <p>The video output ‘just worked’ - without any futzing around, and I was able to use the timer and current/next slides on my display to keep the presentation moving along and on time.</p> <p>There were other benefits as well. For one, the iPad is much lighter and more compact than most laptops - there’s just less technology in your face. For another, battery life was a non-issue.</p> Cross-Platform Mobile Chemistry Apps 2011-09-05T00:00:00-07:00 http://metamolecular.com/blog/2011/09/05/cross-platform-mobile-chemistry-apps <div style="width:640px" id="__ss_9139676"><iframe src="http://www.slideshare.net/slideshow/embed_code/9139676" width="640" height="450" frameborder="0" marginwidth="0" marginheight="0" scrolling="no"></iframe> <div style="padding:5px 0 12px"></div> </div> <p>I recently spoke at the Fall 2011 American Chemical Society meeting on cross-platform mobile chemistry apps. This talk argues that the best answer to the question “Which platform should I choose for my chemistry mobile app?” may well be “None of the above.”</p> <p>As support, I describe the creation of two mobile applications. The first, <a href="http://itunes.apple.com/us/app/reagents/id453336174">Reagents</a>, took six weeks from concept to App Store and required no native code. The second, <a href="http://metamolecular.com/chemtab/">ChemTab</a>, is a work in progress that illustrates how an HTML5 native app can interact with native code to access the file system for hi-performance I/O.</p> ChemVector 1.0: Fast Client-Side Chemical Structure Rendering 2011-09-02T00:00:00-07:00 http://metamolecular.com/blog/2011/09/02/chemvector-1-0-fast-client-side-chemical-structure-rendering <p>I’m happy to announce that <a href="http://metamolecular.com/chemvector/">ChemVector 1.0.0 is now available</a>. This first stable release offers a fundamentally new approach to the <a href="http://metamolecular.com/blog/2011/08/10/fast-chemical-structure-rendering-on-all-browsers-with-chemvector/">chemical structure imaging problem</a>.</p> <p>Chemical structure images for use in web pages are typically deployed from a server - either as dynamically generated or precompiled rasters. Both approaches impose restrictions related to performance, page design, scalability, and maintenance.</p> <p>ChemVector takes advantage of the native vector graphics capabilities all browsers have had for years. Chemical structures are generated directly from source files (.mol or .cdx). Raster images are no longer necessary.</p> <p>Here are some of the features that make ChemVector unique:</p> <ul> <li> 100% JavaScript. No browser plugins are necessary. </li> <li> Runs with all commonly-used browsers on Windows, Linux, Mac, and iPad. This includes Internet Explorer 6-9 in addition to Firefox, Google Chrome, and Safari. </li> <li> Renders structures directly from individual molfiles hosted on a server, or inline. </li> <li> Renders structures directly from ChemDrawâ„¢ (.cdx) binary files. </li> <li> Declarative syntax replaces <img> tags with analogous <object> tags, making it easy for both developers and designers to work with the resulting markup. </li> <li> Non-blocking implementation makes it possible to render dozens of structures on a single page while maintaining UI responsiveness. </li> <li> Structures can be magnified programmatically or through the browser UI with no pixellation. </li> </ul> <p>We have big plans for ChemVector in the months ahead, including still more performance optimizations and extensions. Your input can play a part as well. If you’d like to discuss ways that ChemVector can help your organization build better chemistry web & mobile applications, please feel free to <a href="http://metamolecular.com/support/">get in touch</a>.</p> The ChemWriter Special Tools Palette: Selectively Hiding Complexity in Chemistry Software 2011-08-24T00:00:00-07:00 http://metamolecular.com/blog/2011/08/24/the-chemwriter-special-tools-palette-selectively-hiding-complexity-in-chemistry-software <p><a href="http://metamolecular.com/chemwriter/"><img src="http://metamolecular.com/images/chemwriter.png" class="right-intro" align="right"></img></a>One of the biggest challenges in creating a sophisticated drawing tool like ChemWriter is how to support more advanced use cases while maintaining a streamlined, simplified user interface for everyone else. Over the last several months, we’ve been doing this through the Special Tools Palette (STP). This short article introduces the STP, explains the functionality it currently contains, and how to activate it.</p> <h4>About the STP</h4> <p>The Special Tools Palette will only appear after one or more of its tools have been activated. This is done by passing the id of the tool into the config object on deployment. The following deployment script will deploy all of the STP’s tools available to date:</p> <p><img src="http://metamolecular.com/images/posts/stp.png" class="figure" /></p> <ul> <li><strong>wildcard-atom-bond</strong> Converts any atom or bond into a wildcard atom or bond. Useful for structure-based searches.</li> <li><strong>atom-list</strong> Allows multiple elements to be specified. Useful for structure-based searches.</li> <li><strong>increase-r-group</strong> Increases the R-group number of an atom, or adds one if a symbol is already present.</li> <li><strong>decrease-r-group</strong> Decreases the R-group number of an atom.</li> <li><strong>crossed-bond</strong> Converts any bond into a “Cis or Trans” double bond.</li> <li><strong>wavy-bond</strong> Converts any bond into a single bond with ‘Either’ stereochemistry.</li> </ul> <h4>Customer-Driven</h4> <p>Every tool in the STP was created in response to a customer request. When these requests intersect the capabilities of the V2000 molfile spec, the new capability has generally been added. These tools appear in the STP, rather than the main palette because they are either useful to only a small set of customers, or they only apply in some situations.</p> <h4>Why Hide?</h4> <p>There are many situations in which displaying the full range of tools to a chemists would result in outcomes ranging from inconvenience to outright error. Few editors on the market treat this topic with the care it deserves. Regardless, it’s essential that ChemWriter not just be an ergonomic tool, but a tool that integrates well with the larger software frameworks it’s deployed with.</p> <p>For example, many structure search system back-ends don’t support wildcard atoms or bonds. If ChemWriter were to always display the Wildcard tool, most chemists would assume that wildcard searches were supported - even when they were not. The results would range from confusion/frustration, to outright deception.</p> <p>Likewise, there are only a limited number of situations in which adding R-groups to a structure makes sense syntactically. One of those situations might be a library enumeration tool. But in a single-substance registration system, the availability of an R-group tool would give those chemists wanting to register libraries the false belief that variables were allowed during registration.</p> <p>In each case, leaving the decision to show an STP tool puts the developer in control of the user experience.</p> <h4>Conclusions</h4> <p>The Special Tool Palette hosts a growing collection of less frequently-used tools. By segregating these tools and disabling them by default, ChemWriter can both enable and communicate the capabilities of the system it’s deployed with.</p> Fast Chemical Structure Rendering on All Browsers with ChemVector 2011-08-10T00:00:00-07:00 http://metamolecular.com/blog/2011/08/10/fast-chemical-structure-rendering-on-all-browsers-with-chemvector <p>Any web application dealing with small organic molecules must solve the problem of showing images of these structures to a chemist. As more scientific organizations discover the flexibility and cost-savings of web applications, tools to address the chemical structure rendering problem cleanly and efficiently will become more important. This post introduces a new solution to this longstanding problem.</p> <h4>What is ChemVector?</h4> <p>ChemVector™ is a pure-JavaScript solution to the chemical structure rendering problem. Although other tools are capable of generating chemical structure images client-side, ChemVector is the only solution designed and optimized to efficiently produce great-looking structures across all browsers in current use.</p> <h4>Simple to Use</h4> <p>Athough the <img> tag suffers from many limitations as a way to display chemical structures, one of its advantages is ease of use on the client. We wanted to bring this same ease of use to ChemVector. This means you won’t need to write a line of JavaScript to get structures to display.</p> <h4>Declarative Syntax</h4> <p>Sacrificing valid HTML markup for the sake of simplicity is a terrible tradeoff. To enable declarative structure syntax with valid markup, ChemVector uses <object>, an element supported by all browsers in use today.</p> <p>To illustrate, this markup produces a 200x150 pixel image from the file called “histamine.mol”:</p> <p>Notice that no JavaScript needs to be written to get a structure to display. Loading the molfile and rendering the contents are taken care of by the ChemVector system loaded in the document’s <head> tag.</p> <h4>Dynamically-Resizable Images</h4> <p>One of the benefits of vector graphics is that images can be resized without pixellation. This is particularly important due to wide variation in molecular sizes in most databases. ChemVector makes it possible to rescale structure images after page rendering to any dimensions without any client-server round-trips.</p> <h4>Supported on Legacy Microsoft Browsers</h4> <p>Despite widespread migration away from Microsoft’s browsers in the consumer sector, large research organizations continue to depend on Internet Explorer versions 6-8. ChemVector runs, unmodified and without plugins of any kind, on these browsers.</p> <p>ChemVector also runs on modern, HTML5-enabled browsers like Chrome and Internet Explorer 9.</p> <h4>Chemical Stylesheets</h4> <p>Appearance matters a great deal in chemical structures, just as fonts matter in publishing. Consistency is key, something for stylesheets are well-suited.</p> <p>To enable consistency across an entire suite of web applications, ChemVector introduces chemical stylesheets. These work like traditional CSS, but are coded in JSON. For example, this HTML fragment, placed in a document’s <head> tag, will load the stylesheet called ‘chemistry.json’:</p> <p>The stylesheet is both human readable and easy to adapt:</p> <h4>Responsive JavaScript</h4> <p>ChemVector is designed to be used on pages containing dozens of structures, which may take a few seconds to load entirely. During load time, it’s unacceptable to block the UI thread - the browser must remain responsive. This is particularly important on older browsers such as IE6. ChemVector splits its rendering into small chunks, between which the user interface remains responsive to scrolling, page updates, and the back button.</p> <h4>Built for Speed</h4> <p>Although <a href="http://chemwriter.com">ChemWriter</a> is capable of rendering chemical structures, it lacks most of the design and performance optimizations that ChemVector has. The reason is that ChemWriter and ChemVector are designed to render structures under very different constraints.</p> <p>ChemWriter’s renderer is optimized to allow redrawing only small portions of a structure that change as a result user interaction - deletion of an atom, or modification of a bond type, for example. This means that every bond has a counterpart in the document object model (DOM).</p> <p>ChemVector, in contrast, is optimized for single-use structure display, with no need to quickly redraw portions of a molecule. As a result, all bond lines are combined into a single vector graphics shape. This greatly reduces the number of DOM elements required to display a structure and increases the speed of rendering many-fold on some browsers.</p> <p>A number of optimizations like this have been made to ensure the fastest-possible structure rendering without sacrificing quality.</p> <h4>Why ChemVector?</h4> <p>Isn’t the <img> a good enough solution to the problem of rendering structures in web pages?</p> <p>There are many cases where the need for a dedicated ‘imaging server’ prevents the development of what would otherwise be straightforward in a technical sense. For example, consider a Wordpress blog modified as a synthetic organic lab notebook.</p> <p>Without ChemVector, this system might require interfacing a PHP plugin to server-side imaging software written in Java or C++. It can be done, but at a high cost in time, money, and flexibility.</p> <p>ChemVector makes is possible for the Wordpress lab notebook to display structures using nothing more than plain-text molfiles, which are easily stored in the database back-end. There are other examples in which widely-used, off-the-shelf software can be easily adapted to work with chemical structures using ChemVector.</p> <p>Then there are situations where an imaging server is simply out of the question - for example, a mobile application that must work even when disconnected from a network.</p> <p>Eliminating the imaging server and the <img> tag’s limitations makes it possible to deliver applications that would otherwise have been considered impractical.</p> <h4>Learn More</h4> <p>ChemVector eliminates a major pain point in building fast, great-looking chemistry web applications. If you’re interested in learning how ChemVector can work in your web application, <a href="http://metamolecular.com/support/">please get in touch</a>.</p> Five Tools for Managing Complexity in Large-Scale JavaScript Projects 2011-08-08T00:00:00-07:00 http://metamolecular.com/blog/2011/08/08/five-tools-for-managing-complexity-in-large-scale-javascript-projects <p><a href="http://www.flickr.com/photos/sprengben/5946682974/"><img src="http://metamolecular.com/images/posts/bigapple.jpg" align="right" class='right-intro' /></a>JavaScript lacks many of the tools and culture that define a clear ‘right way’ to approach large-scale projects. Yet it’s still possible to build and maintain complex software with JavaScript. But how?</p> <p>For the last year, I’ve been involved in the development of a <a href="http://metamolecular.com/chemwriter/articles/the-chemical-structure-editor-bridging-chemistry-and-cheminformatics/">chemical structure editor</a> written in JavaScript. <a href="http://metamolecular.com/chemwriter/">ChemWriter</a> is an interactive, graphically-oriented component that combines many characteristics of a drawing program with chemistry domain knowledge.</p> <p>In the course of developing ChemWriter, we’ve experimented with many tools and approaches for managing complexity as the capabilities of the software increased. Below is a short list of what we’ve found essential:</p> <ol> <li><strong>Google Closure.</strong> JavaScript offers neither a bundled standard library nor any practical means to split source into simpler units and then efficiently re-assemble them. <a href="http://code.google.com/closure/">Closure</a> addresses both of these needs extremely well. The <a href="http://oreilly.com/catalog/0636920001416">definitive guide by O’Reilly</a> is a must-read.</li> <li><strong>Test-First Development</strong> If you don’t yet test your code first, the single best point I can make is that it greatly reduces time and frustration in debugging sessions.</li> <li><strong>Jasmine.</strong> A good, fast testing environment is essential if you’re serious about test-first development. It turns out that JavaScript’s dynamic nature and support for closures make it a great fit for <a href="http://en.wikipedia.org/wiki/Behavior_Driven_Development">BDD</a>, but only with the right tool. Our initial forays into this area lead to Screw.Unit, a slow, buggy tool to say the least that is no longer actively developed. A few months ago, we re-wrote all of our Screw.Unit tests in <a href="http://pivotal.github.com/jasmine/">Jasmine</a>, which has proven itself to be indispensable in its performance and functionality. Jasmine routinely runs over 1,600 automated ChemWriter tests in about one second. This means that every change we make to the ChemWriter source can be validated by running the entire test suite in realtime.</li> <li><strong>Autospec.</strong> Having to re-run tests is no fun. More importantly, it’s easy to forget to do. A far better workflow is to write software while having tests run automatically (on a separate monitor) after every file save. Thanks to a little Ruby, I’ve been using this approach for several months now.</li> <li><strong>Git Submodules.</strong> If you’ll be basing your code off of another JavaScript library, you’ll quickly find that keeping both codebases in sync to be a major problem. Unlike languages such as Ruby and Python, there is no package manager for JavaScript (at least not the client). <a href="http://book.git-scm.com/5_submodules.html">Git submodules</a> offer a pretty good solution. For example, we’re using major sections of ChemWriter source in <a href="http://metamolecular.com/chemtab/">ChemTab</a>, a native tablet app under development. Submodules have made it possible to keep both codebases separate, yet cleanly synchronized. Each project that uses Closure includes it as a submodule through our <a href="https://github.com/metamolecular/closure">public Closure GitHub repository</a>.</li> </ol> <p>ChemWriter is a component consisting of over 14,000 lines of JavaScript code spread over 112 source files and 14 packages, and is backed by over 1,600 automated tests. Constant experimentation with tools and techniques for managing this codebase has led to a system that works very well for this project and others in progress.</p> Saving the Last-Drawn Chemical Structure: Using HTML5 Local Storage with ChemWriter 2011-07-28T00:00:00-07:00 http://metamolecular.com/blog/2011/07/28/saving-the-last-drawn-chemical-structure-using-html5-local-storage-with-chemwriter <div id="persistant-editor-test"></div> <script src="http://metamolecular.com/javascripts/examples/chemwriter-local-storage.js"></script> <p>If you draw a structure in the <a href="http://metamolecular.com/chemwriter/">ChemWriter</a> editor above and reload the page, your structure will be re-loaded as well. This article explains why this capability might be useful and how to implement it.</p> <h4>The Problem</h4> <p>Drawing a chemical structure can take a lot of valuable time and effort. There are some situations in which a <a href="http://metamolecular.com/chemwriter/articles/the-chemical-structure-editor-bridging-chemistry-and-cheminformatics/">chemical structure editor</a> that remembers the last structure drawn by a user would be helpful:</p> <ul> <li><strong>Structure-searchable database</strong> A user frequently searches for related structures - a family of steroids for example. Always starting the editor with the structure s/he last drew means that the next query structure can be entered by editing the last one, not drawing from scratch.</li> <li><strong>Lab notebooks and registration systems</strong> A user repeatedly enters structures bearing the same core. Displaying the last structure drawn at startup lets the user edit, rather than draw from scratch. This promotes efficiency and consistency. If a completely new molecule needed to be drawn, the editor’s ‘clear’ button would start the canvas from scratch.</li> <li><strong>Back button protection</strong> The developer wants to ensure that in the event the browser window should be accidentally closed or navigated from, the user will be able to pick up where they left off with their structure drawing.</li> </ul> <h4>HTML5 Local Storage</h4> <p>All modern browsers support a helpful new feature called <a href="http://diveintohtml5.org/storage.html">Local Storage</a>. In contrast to cookies, which suffer from size restrictions and other undesirable performance characteristics, HTML5 Local Storage is ideal for client-side storage of larger bits of data such as chemical structure representations. This storage persists across browser sessions.</p> <h4>Source Code</h4> <p>The demo above takes advantage of HTML5 Local Storage and the <span class="param">onbeforeunload</span> event:</p> <h4>Conclusions</h4> <p>HTML5 Local Storage makes it simple and easy to save the last-drawn structure from a ChemWriter editor. The same technique described here can be used to persist additional ChemWriter state, such as drawing preferences and other settings.</p> 3D ChemWriter Buttons with CSS3 Gradients 2011-07-26T00:00:00-07:00 http://metamolecular.com/blog/2011/07/26/3d-chemwriter-buttons-with-css3-gradients <p><img src="http://metamolecular.com/images/posts/chemwriter-3d-button.png" class="figure" /></p> <p><a href="http://metamolecular.com/chemwriter/">ChemWriter</a> is unique among client-side chemistry toolkits due to its tight integration with the browser. This makes many things possible that were previously not. For example, using simple CSS, ChemWriter’s look can be be customized to a very high level of precision. This article shows one way to use CSS to give ChemWriter’s buttons a 3D metal look without resorting to background image hacks.</p> <h4>CSS3 Gradients</h4> <p>If you’ve ever used background images as gradients you’re probably aware of the limitations. The process of creating the right gradient is slow and error prone due to the need to match the dimensions and colors of a static image (created in an imaging program) to dynamic web content (created in a separate application). Once the site is live, changing these gradients requires revisiting the entire process anew.</p> <p>CSS3 introduced <a href="http://net.tutsplus.com/tutorials/html-css-techniques/quick-tip-understanding-css3-gradients/">new functionality around gradients</a> that renders much of this busywork unnecessary.</p> <h4>ChemWriter CSS</h4> <p>The following CSS will streamline the look of ChemWriter’s editor and give its buttons a more 3D metal appearance:</p> <p>Notice the use of <span class="parameter">filter</span>, which is how gradients are rendered on legacy Microsoft browsers.</p> <h4>Conclusions</h4> <p>CSS3 makes possible many new and powerful visual effects with relatively little effort. ChemWriter’s focus on web standards makes it possible to take advantage of these new capabilities in a straightforward way.</p> High-Performance Chemical Structure Image Rendering in JavaScript 2011-07-25T00:00:00-07:00 http://metamolecular.com/blog/2011/07/25/high-performance-chemical-structure-image-rendering-in-javascript <p><a href="http://metamolecular.com/chemtab/">ChemTab</a> is an iPad application I’m developing for visualizing chemical structure datasets. The user interface is based around a scrollable grid of chemical structures. A screenshot of the work in progress can be seen here:</p> <p><img src="http://metamolecular.com/images/posts/chemtab-ios-emulator.png" class="figure" /></p> <h4>Performance Lessons from a Java Application</h4> <p>Because ChemTab will be running on devices with reduced speed and memory compared to most desktops, performance is critical to achieving a usable application. Fortunately, I’ve had some experience in building a high-performance chemical structure dataset viewer with <a href="http://depth-first.com/articles/2008/10/24/chemphoto-beta-1-now-available/">ChemPhoto</a>. Written in Java, ChemPhoto solved a number of tricky problems relating to the display and manipulation of very large chemical datasets. Although many of these lessons will translate to ChemTab, some will not.</p> <h4>Painter Rendering: Fast, But Not Fast Enough for ChemTab</h4> <p>One area requiring a lot of optimization is chemical structure rendering. ChemTab uses <a href="http://metamolecular.com/chemwriter/">ChemWriter</a>, our chemical structure editor and rendering package, to draw its chemcial structure images directly from molfiles. Back in April of this year, we introduced <a href="http://metamolecular.com/blog/2011/04/14/ten-reasons-chemical-structure-images-should-be-rendered-on-the-browser-not-the-server/">browser-side chemical structure depiction</a> with Painter.</p> <p>Although ChemWriter’s Painter rendering has been fast enough in most cases we and our customers have tested, it’s not fast enough for ChemTab, where many more structures need to be drawn in real-time in response to scrolling events.</p> <h4>Imager: High Performance Structure Rendering for the Browser</h4> <p>To improve structure rendering speed, we’ve developed Imager, a component that will be making its way into a future ChemWriter release.</p> <p>Imager works quite differently from Painter. If you imagine ChemWriter’s Editor without buttons, panels, or dialogs, that’s a fairly accurate description of Painter. In addition to generating SVG, Painter allocates a lot of extra memory and processor cycles to services that are unnecessary to simply view a structure: cached objects; event handlers; containers, and UI handles. Painter retains almost all of the latent interactivity that Editor has, and could be very useful in situations where user events on a structure need to be synchronized with another page element (more on this later).</p> <p>Imager, in contrast, is designed to do one thing only - create an SVG DOM tree representing a 2D chemical structure. There is no possibility of detecting events on a given atom or bond on the resulting image. The tradeoff is much faster image creation. To push performance even further, Imager uses a custom Graphics context instead of the <a href="http://closure-library.googlecode.com/svn/docs/class_goog_graphics_SvgGraphics.html">SvgGraphics</a> object provided by <a href="http://code.google.com/closure/">Google Closure</a>.</p> <p>The result is noticeably faster image generation in ChemTab. In a future article, I hope to discuss benchmarking studies to quantitate the improvement.</p> <p>As a bonus, Imager introduces a capability previously unavailable in ChemWriter: the automatic scaling of chemical structure images. Think of a DOM element in a web page that the user can resize. Imager makes it trivial to automatically scale and center this image as the user resizes the containing element. This applies equally to a single image or to a collection of images, as in a table or grid.</p> <h4>Conclusions</h4> <p>This post introduces Imager, a new chemical structure imaging component that will be appearing in a future ChemWriter release. Although developed to solve a performance problem in an iPad application called ChemTab, Imager should also be useful for a variety of high performance chemistry web applications.</p> Cheminformatics for iPad: ChemTab Now Running on iOS Simulator 2011-07-21T00:00:00-07:00 http://metamolecular.com/blog/2011/07/21/cheminformatics-for-ipad-chemtab-now-running-on-ios-simulator <p>The last article described the achievement of one of the first major <a href="http://metamolecular.com/chemtab/">ChemTab</a> development goals - to <a href="http://metamolecular.com/blog/2011/07/19/building-chemtab-displaying-a-grid-of-chemical-structures-in-a-browser/">display a grid of chemical structures from an SD file</a>. We’ve now met the next milestone - running the current version on an iPad simulator:</p> <p><img src="http://metamolecular.com/images/posts/chemtab-ios-emulator.png" class="figure"></img></p> <p>For those not familiar with iOS development, one of the useful tools offered by Apple is an iPad simulator. This software was used to generate the screenshot above, and we’ll be using it for future ChemTab screenshots.</p> <p>Notice that there’s nothing in the screenshot to indicate the presence of a browser - no address bar, no toolbars - just the app itself.</p> <p>You may have also noticed the Navigation bar at the top of the screenshot. Although we’re using HTML, CSS, and JavaScript to build ChemTab, one of our goals is to match the standard native iPad app look and feel. We’ll return to this topic in future articles.</p> Four Speculations on Future Enterprise Software Demand 2011-07-20T00:00:00-07:00 http://metamolecular.com/blog/2011/07/20/four-speculations-on-future-enterprise-software-demand <center><object classid="clsid:d27cdb6e-ae6d-11cf-96b8-444553540000" codebase="http://download.macromedia.com/pub/shockwave/cabs/flash/swflash.cab#version=9,0,0,0" width="400" height="264" ><param name="flashvars" value="webhost=fora.tv& clipid=13752& cliptype=clip" /><param name="allowScriptAccess" value="always" /><param name="allowFullScreen" value="true" /><param name="movie" value="http://fora.tv/embedded_player" /><embed flashvars="webhost=fora.tv& clipid=13752& cliptype=clip" src="http://fora.tv/embedded_player" width="400" height="264" allowScriptAccess="always" allowFullScreen="true" type="application/x-shockwave-flash" pluginspage="http://www.macromedia.com/go/getflashplayer"></embed></object></center> <p><a href="http://www.elevation.com/EP_IT.asp?id=102">Roger McNamee</a>, cofounder of <a href="http://www.elevation.com/">Elevation Partners</a> recently gave a <a href="http://fora.tv/2011/06/28/Elevation_Partners_Director_and_Co-Founder_Roger_McNamee#fullprogram">talk</a> in which he offered some hypotheses about the present and future of information technology. Although the entire video is well worth watching, four of his hypotheses are relevant to scientific software and the companies that create and buy it:</p> <ol> <li><strong>The Decline and Fall of Windows Unlocks Revenue.</strong> Windows no longer provides measurable ROI to enterprises, who will eventually reallocate tech spending.</li> <li><strong>HTML5 is Game Changer for Publishers.</strong> First major upgrade in a decade to infrastructure of the web will be disruptive, enabling monetizable differentiation of content.</li> <li><strong>Tablets are Hugely Disruptive.</strong> Apples’s iPad will be even more disruptive than the iPhone.</li> <li><strong>“Next” Web architecture = Cloud + Lots of Screens.</strong> Proliferation of Smartphones + Tablets will accelerate need for an value of cloud services.</li> </ol> <p>If McNamee is correct, there are big changes ahead in the ways large organizations allocate their IT budgets. Small, nimble technology companies will be presented with a rare chance, if prepared. Larger players will face significant problems adapting to the new normal.</p> Building ChemTab: Displaying a Grid of Chemical Structures in a Browser 2011-07-19T00:00:00-07:00 http://metamolecular.com/blog/2011/07/19/building-chemtab-displaying-a-grid-of-chemical-structures-in-a-browser <p>As <a href="http://metamolecular.com/blog/2011/07/14/building-chemtab-cheminformatics-on-the-ipad/">previously mentioned</a>, I’m building an iPad application called <a href="http://metamolecular.com/chemtab/">ChemTab</a> to visualize chemical structure data. Development of this app has been proceeding fast enough that I can now show the first of what will hopefully be many screenshots of work in progress.</p> <p><img src="http://metamolecular.com/images/posts/chemtab-grid.png" width="620px" class="figure" /></p> <p>You may be wondering why, if I’m creating iPad software to be distributed in the App Store, would I be using HTML? The answer is simple: ChemTab will be a native app built mainly with HTML, CSS and JavaScript. If that sounds impossible, stick around and I’ll show you how it’s done.</p> <p>A few words about the screenshot may be useful. Behind the scenes, I’ve written an SD file parser with be beginnings of a high-performance I/O system to work with potentially very large Structure Data (SD) files. The entire table is generated dynamically using JavaScript together and <a href="http://metamolecular.com/chemwriter/">ChemWriter</a> for structure depiction. The table can be programmatically scrolled up and down, just like a spreadsheet or table of images.</p> <p>There’s still a lot more work to be done on every level, but hopefully this first look at ChemTab offers a better idea of where we’re going.</p> ChemBot: Batch Convert ChemDraw CDX Files Into PNG Images Using AppleScript 2011-07-18T00:00:00-07:00 http://metamolecular.com/blog/2011/07/18/chembot-convert-chemdraw-cdx-files-into-png-images-using-applescript <p><a href="http://www.flickr.com/photos/donsolo/3961083153/"><img src="http://metamolecular.com/images/posts/wall-e.jpg" align="right" class="right-intro"/></a>If you’ve ever worked with a large collection of <a href="http://www.cambridgesoft.com/software/chemdraw/">ChemDraw™</a> (.cdx) files, you may have needed to convert them into images for publication on the web or elsewhere. You may have concluded that the only way to do this would be by through liberal application of elbow grease, or finding someone willing to do it.</p> <p>If you’re working on a Mac, I have good news for you. As part of an iPhone chemistry application my company is helping to develop, we needed to convert a large number of CDX files into PNGs. Read on to find out how we automated this process and saved a bunch of time.</p> <h4>Downloading and Running ChemBot</h4> <p>ChemBot is a small Mac application written in AppleScript. It can be <a href="https://github.com/metamolecular/chembot/tarball/master">downloaded from GitHub</a>, and the <a href="https://github.com/metamolecular/chembot/">source code</a> is also available there. ChemBot requires ChemDraw Ultra 12.</p> <p>To run ChemBot:</p> <ol> <li>Open ChemDraw Ultra 12.0 or later.</li> <li>Double-click on the ChemBotApp icon and follow the prompts.</li> </ol> <p>Faster execution is possible by launching ChemBot through the AppleScript editor:</p> <ol> <li>Open ChemDraw Ultra 12.0 or later.</li> <li>Double-click on the ChemBotScript icon.</li> <li>Click the “Run” button and follow the prompts.</li> </ol> <h4>How It Works</h4> <p>ChemBot is written in <a href="http://developer.apple.com/library/mac/#documentation/AppleScript/Conceptual/AppleScriptX/AppleScriptX.html">AppleScript</a>, Apple’s built-in application scripting language for Mac. Although conceptually a very simple piece of software, one of the hard things about creating ChemBot was the surprising scarcity of real-world AppleScript examples.</p> <p>Our starting point was <a href="http://homepage.mac.com/swain/Macinchem/Applescript/page2.html">Chris Swain’s excellent AppleScript tutorial series</a>. One of his tutorials proved especially useful: <a href="http://homepage.mac.com/swain/Macinchem/Applescript/AppScript_tut/AppScrip_tut_1/appscript_tut_1.htm">Convert ChemDraw to TIFF</a>. Although it wasn’t quite what we were looking for, it was a start.</p> <p>After some experimentation, we hit a major problem. Although we could get ChemDraw to open CDX files automatically and recurse folders, we couldn’t get PNG files to be saved. Chris Swain very quickly came back with an answer to my email: ChemDraw apparently can only save images files to an existing alias. Attempting to save to a filename that doesn’t exist won’t work.</p> <p>Making the needed change allowed us to finish ChemBot and solve the problem of automatically converting CDX files into PNG images.</p> <h4>Source Code</h4> <p>ChemBot is distributed under the MIT License. For completeness sake, here is the source code:</p> <h4>Other Ways to Automate ChemDraw</h4> <p>Although I didn’t find many other examples of ChemDraw automation, one worth noting is <a href="http://blog.rguha.net/?p=549">Rajarshi Guha’s use of Python in ChemDraw scripting</a>. This approach has the advantage of working on Windows. Finally, CambridgeSoft (now Perkin-Elmer) also offers a scripting language for ChemDraw called <a href="http://www.cambridgesoft.com/databases/details/?fid=115">ChemScript</a>.</p> <h4>Conclusions</h4> <p>AppleScript is a useful piece of technology, although good examples of its use are in short supply. In addition to solving our specific problem of converting CDX files into PNGs, ChemBot could be used as a starting point for more complex ChemDraw automation workflows.</p>