The ChEMBL group had the honour of hosting the second RDKit UGM. It was a great way to catch up with the RDKit community, find out about what they are working and learn about new features the toolkit offers. We gave two talks during the meeting, so if you want to know how Clippy can make interacting with different chemical formats on your desktop easier, go here, and if you want to learn about wrapping RDKit up in a RESTful Web Service a.k.a. Beaker (to be described in future blog post), go here. Many discussions about new features RDKit could offer were had throughout the meeting and one which caught my attention was support for plotting compound images on HTML5 Canvas.
Unable to participate in a hackathon held on the final day, I set about hosting my own small hackathon during the weekend (only 1 attendee). The result of this weekend coding effect was a pull request made against RDKit github repo, introducing the new class called JSONCanvas.
Technical Details
As a general rule of the past, the model for generating image relies on the server to sending a binary representation of the compound (e.g. .png, .jpeg) to the client. With advances in browser technologies, it is now feasible to rely on the client to generate the graphical representation of the compound as it now has access to many methods, which allows it to handle geometrical primitives. It can decide if those primitives should be rendered as SVG, VML or even HTML5 Canvas (check out Kinetic.js for HTML5 canvas rendering, as it knows how to draw some core shapes on canvas).
My solution uses Raphael.js - a JavaScript library for drawing vector graphics in the browser. For displaying the graphic is uses SVG on browsers that support this format. On older browsers it will fail over to VML. In the library documentation we can find a very interesting method called Paper.add(). This method accepts JSON containing an array of geometrical objects (such as circle, rectangle, path) to be displayed and returns a handle for manipulating (moving, rotating, scaling) the object as a whole. This means that if we could create a JSON object, which uses shapes to represent a chemical compound, we could draw it or manipulate the compound directly. The new JSONCanvas class produces the previously described JSON object for any* given RDKit compound.
(*I am sure we might find a couple of exceptions)
But why?
1. Cost - reduced server processing required to raster image and often third-party drawing libraries are also required.
2. Bandwidth - reduced bandwidth required to transfer JSON representation of compounds. Also, as it is text-based you can employ further compression (by configuring your server to send gziped JSON which most modern browsers understand) or using AMF.
3. Accuracy - improved scaling quality made possible with vector graphics.
4. Interactivity - compounds rendered using JSON on the client side can handle standard events such as click, hover, etc. Complex operations (animating, sorting, dragging,...), can also be applied to these objects.
Usage
As an example usage of this technique please look at our chemical game. To give you some idea of scale and performance the game loads 1000 compounds when page first loads. If you want to see raw example please explore source of my demo page. Other examples can involve:
1. Online compound cloud (similar to tag cloud but with compound images instead of words). Such a cloud can be used to visualise compound similarity.
2. Compound stream - substructure search can sometimes return very large number of results. Such results can be represented as pseudo-infinite stream of compounds - only small portion of results is presented on the screen but scrolling down causes more results to be rendered when older one are discarded.
How can I use it?
1. You can download my fork or RDKit containing all relevant changes.
2. Today Greg Landrum, RDKit creator made his own branch containing modified version of the original pull request, so hopefully this is on it's way to be accepted in master branch in future.
As a group we are happy to participate in such a great open source library!
--
Michał
Comments