Blog

Signals Blog

Fast Chemical Structure Rendering on All Browsers with ChemVector

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.

What is ChemVector?

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.

Simple to Use

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.

Declarative Syntax

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.

To illustrate, this markup produces a 200x150 pixel image from the file called "histamine.mol":

<object width="200" height="150" class="chemvector-object">
  <param name="src" value="/data/histamine.mol">
</object>
 

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.

Dynamically-Resizable Images

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.

Supported on Legacy Microsoft Browsers

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.

ChemVector also runs on modern, HTML5-enabled browsers like Chrome and Internet Explorer 9.

Chemical Stylesheets

Appearance matters a great deal in chemical structures, just as fonts matter in publishing. Consistency is key, something for stylesheets are well-suited.

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

<link rel="stylesheet/chemical" type="application/json" href="/stylesheets/chemistry.json" />
 

The stylesheet is both human readable and easy to adapt:

{
  "line-width": 0.1,
  "line-color": "#000000",
  "line-offset": 0.2,
  "line-end-padding": 0.05,
  "stereo-width": 0.25,
  "atom-label-height": 0.42,
  "atom-colors": {
    "N": "#2222FF",
    "O": "#FF2222"
  }
}
 

Responsive JavaScript

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.

Built for Speed

Although ChemWriter 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.

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

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.

A number of optimizations like this have been made to ensure the fastest-possible structure rendering without sacrificing quality.

Why ChemVector?

Isn't the <img> a good enough solution to the problem of rendering structures in web pages?

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.

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.

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.

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.

Eliminating the imaging server and the <img> tag's limitations makes it possible to deliver applications that would otherwise have been considered impractical.

Learn More

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, please get in touch.