Blog

Signals Blog

High-Performance Chemical Structure Image Rendering in JavaScript

ChemTab 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:

Performance Lessons from a Java Application

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 ChemPhoto. 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.

Painter Rendering: Fast, But Not Fast Enough for ChemTab

One area requiring a lot of optimization is chemical structure rendering. ChemTab uses ChemWriter, our chemical structure editor and rendering package, to draw its chemcial structure images directly from molfiles. Back in April of this year, we introduced browser-side chemical structure depiction with Painter.

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.

Imager: High Performance Structure Rendering for the Browser

To improve structure rendering speed, we've developed Imager, a component that will be making its way into a future ChemWriter release.

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).

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 SvgGraphics object provided by Google Closure.

The result is noticeably faster image generation in ChemTab. In a future article, I hope to discuss benchmarking studies to quantitate the improvement.

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.

Conclusions

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.