Depth-First: Tag firefly

Googling for Molecules with InChIMatic and Firefly

Rich Apodaca — Wed, 15 Aug 2007 09:16:00 +0000

A series of D-F articles have discussed InChIMatic, a Web application that lets you structure-search the Web using popular search engines such as Google. Recent articles have also described Firefly, a lightweight 2D structure editor designed especially for the Web.

Today, the first alpha release of Firefly is available for use with InChIMatic.

Despite its small size of only 103K, the Firefly applet offers a number of advanced features:

A clean interface with major functionality in plain sight.
Antialiased rendering. Pressing the "+" and "-" keys will zoom in and out to reveal rendering detail.
User-overridable bond length and angle constraints. When dragging a bond, use Shift to relax both angle and length constraints, or Ctrl to relax only angle constraints.
Automatic inside-outside double bond rendering.
Built-in molfile import/export. Use the File->Import Molfile and File->Export Molfile options to copy/paste a molfile from your system clipboard.
Automatic implicit hydrogen detection. The quadrant for hydrogen placement is chosen based on the bonds surrounding the atom.
Twenty levels of undo/redo. The commands can either be issued from the menu, or Ctrl-Z/Ctrl-Y.
Persistent molecule. When you visit another page and come back, Firefly remembers the molecule you were working on.
No digital certificate authorization. Just start using it.

Firefly also incorporates a number of keyboard shortcuts to speed up structure drawing:

1-9 keys Builds a chain with the indicated number of carbons.
a key Phenyl (aromatic) ring. When hovering over a bond, fuses the ring to the bond. When hovering over an atom, fuses the ring to that atom, if possible, or sprouts the ring.
f, l, r, i keys The elements F, Cl, Br, and I, respectively.
z and t keys The elements Si and Sn, respectively
b, c, n, o, s, and p keys The elements B, C, N, O, S, and P, respectively.
[delete] and [backspace] keys deletes whatever is underneath the cursor.

To use these shortcuts, simply hover the cursor over an atom and press the key on your keyboard.

Being an alpha release, this version of Firefly still has room for improvement. Your feedback is important. Please send questions, comments, and suggestions to the email address found under Firefly's "Help" menu.

Never Draw the Same Molecule Twice: Viewing Image Metadata

Rich Apodaca — Wed, 08 Aug 2007 07:40:00 +0000

Chemists are accustomed to embedding live molecular objects in their documents with Microsoft Word/ChemDraw. These objects can then be reprocessed and embedded into other documents, such as PowerPoint presentations, saving enormous amounts of time. What if the same feature were available with Web documents?

A recent D-F article proposed a method to encode molecular structure data within commonly-used Web image formats such as PNG. That article contained an embedded image of GlaxoSmithKline's diabetes treatment rosiglitazone (Avandia) encoded by a rendering toolkit built with Firefly. I claimed that this image contained the complete connection table and atom coordinates as embedded metadata. In this article, I'll show a simple method to read this metadata.

Metadata is a standard part of the PNG specification; to read it requires nothing more than software capable of recognizing it. I recently found a Web-based, cross-platform method for doing so. The Image Metadata Viewer by FileFormat.info accepts an uploaded image file and returns that image's metadata. Let's try it with the image of rosiglitazone.

After saving the image to my hard drive, uploading it to FileFormat.info and pressing start, I can see that the image contains metadata:

The metadata can be viewed either as XML or as plain text. Choosing plain text (second option) gives me the complete molfile, stored as a key/value hash (molfile=[molfile]).

Clearly, reading metadata is not a problem given the right software. But this leaves the question of how metadata is encoded in the first place - especially in a programming language such as Java. Like everything else, it's not difficult when you know how. Stay tuned for the answer.

Never Draw the Same Molecule Twice: Image Metadata for Cheminformatics

Rich Apodaca — Wed, 01 Aug 2007 06:17:00 +0000

The graphical language of 2D structures has served chemistry well for the last 100 years. Ironically, this language which is so useful for human communication is extraordinarily difficult for machines to understand. Heroic efforts at digital raster image recognition such as OSRA and those recently summarized by Egon Willighagen, in addition to a handful of others, have tried to tackle this problem with varying degrees of success.

The problem remains unsolved, and continues to be one of the most difficult technical challenges in cheminformatics. But the pace at which non-machine readable images are generated has accelerated dramatically in the last two years with the emergence of numerous free chemical databases.

What if 2D structure images simply contained all of the information needed for machine processing in the first place?

This idea isn't as far-fetched as it may sound initially. As discussed in a recent D-F article, both GChemPaint and ACD ChemSketch have been claimed to be capable of encoding machine-readable structure information.

Previous D-F articles have described "Firefly", the codename for a new lightweight 2D structure editor designed specifically for the Web. With major work on the editor's user interface complete, more recent efforts have focused on implementing a 2D rendering toolkit, and with it a mechanism to encode structural information within 2D molecular images.

As a demonstration of what is now possible, consider the structure of GlaxoSmithKline's diabetes treatment rosiglitazone (Avandia), depicted as a PNG image at the beginning of this article. At first glance, the image appears to be just like any other image of a 2D molecular structure. But it is not, for embedded within it are the connection table and 2D atom coordinates of rosiglitazone encoded as an industry-standard molfile.

Given the right software, a computer can interpret the structural information encoded in the rosiglitazone image and precisely re-create the original molecular representation. A graphical diagnostic tool bundled with Firefly was equipped with code for precisely this purpose.

This tool can work with molfile-encoded PNG images just as easily as it can with molfiles; they can be opened and the resulting molecule can be further edited, saved in another format, or re-written as a embedded-molfile PNG image.

The first step is to select the PNG image from a local hard drive:

Opening this image produces a fully-editable version of the original molecule:

Obviously, nothing limits this technique to molfiles. InChI, SMILES, CML, or any other molecular encoding scheme would work just as well.

Using molecular-encoded PNG images as a Web-ready replacement for the Word/Chemdraw OLE technology may be one application of this approach. With a large corpus of these images, chemical Web spidering and data mining would be possible on a scale unimaginable today. As always, these possibilities reinforce the desperate need for high quality tools that chemists actually want to use, and which simultaneously yield machine-readable output.

Editable and Searchable 2D Molecular Images

Rich Apodaca — Mon, 30 Jul 2007 08:01:00 +0000

Word processing replaced the typewriter for the simple reason that documents could be prepared and edited so much more quickly. If Web authoring replaces conventional word processors, it will be for the simple reason that Web documents can be found, distributed, reprocessed, and combined with other content so much more effectively. The peculiar nature of chemical structure information complicates chemistry's transition to Web authoring. This article, the first in a series, discusses some of the challenges that lie ahead.

State of the Art: Word/ChemDraw

Microsoft Word allows 2D molecular graphics, typically created with ChemDraw, to be embedded in documents and later edited. Those images can then be copied into Power Point presentations and reused in a variety of other Windows-specific products. This practice has become so widespread throughout industry and academics, that few chemists even think about the technology that many of them rely on several times a week.

Chemical Structures are Peculiar

A 2D molecular image, like the one depicting fluoxetine at the top of this article, is a peculiar beast. On one level, it's a picture that anybody can look at. But on another level, it's a type of object for which manipulation by humans and computers is extremely useful. The combination of Microsoft Word and ChemDraw lets chemists conveniently manage the dual nature of chemical structures.

Live Molecular Images

Why would anybody want to create editable and searchable 2D molecular graphics such as JPGs, PNGs, and SVGs? Alas, technology has a way of moving on just when we're getting comfortable with it (an especially difficult concept for typewriter manufacturers who went bust during the 1980s, and the dedicated word processor manufacturers who followed).

Consider the number of Word and PowerPoint documents you read last week compared to the number of Web pages. Chances are the ratio is at least 1:10. The trend shows no signs of reversing itself.

Although Web authoring tools have been very slow to reach the average user, the blogging explosion has led to rapid evolution in the field. As tools like WordPress, Movable Type, and even Wikipedia race to satisfy the needs of power authors, the average user will rather unexpectedly discover that they have access to perfectly capable tools that let them abandon their over-engineered (and expensive) word processors to experiment with Web publishing.

The Wikipedia Chemisty/Structure Drawing Workgroup hints at what lies ahead for chemistry. Two tools, GChemPaint and ACD ChemSketch, now enable molecular structure information to be embedded in images.

As chemistry turns to the Web as its primary publication medium, chemists will need the same ability to deal with chemical structures offered by their current tools of choice. In articles to follow, I'll discuss some ways this could happen.

Top Ten Best-Selling Drugs Worldwide (2006)

Rich Apodaca — Wed, 25 Jul 2007 06:40:00 +0000

If you haven't had a chance to do so yet, IMS Health's recent Intelligence.360 on the global pharmaceutical industry is worth reading. One noteworthy set of data contained in the report is a list of the top ten best-selling drugs worldwide for 2006.

A list of chemical names and numbers by itself is not that useful. However, adding chemical structures has a way of prompting better questions and generating many more ideas. In that spirit, I've created an online table of the ten best-selling drugs worldwide for 2006. This table contains the 2D chemical structure, generic name, trade name, global sales in US$, company, and indication for each drug.

A new software package codenamed "Firefly" was used to generate the chemical structures in the table. Firefly is a lightweight 2D editor and rendering library written in Java. A series of articles on Firefly can be found on Depth-First.

This link takes you to the table.

Building a Molecule Preview with Firefly: The Joy of Swing

Rich Apodaca — Wed, 18 Jul 2007 06:52:00 +0000

Previous articles have discussed Firefly, the codename for a new 2D structure editor for the Web. Although it can be deployed as a self-contained applet on Web pages, Firefly is composed of modules that are readily re-used. By taking advantage of this design and Java's native UI toolkit Swing, new UI elements can be built with relatively little effort. This article outlines one such use - the creation of a file dialog that contains a molecule preview.

Many image processing applications such as Photoshop or GIMP provide an image preview that appears in file browser dialogs. Wouldn't it be nice if applications that process molecular structure files came with a similar feature? The screenshot below shows a file chooser with an embedded molecule preview based of Firefly's Painter component:

When a new molfile is highlighted, a new preview is automatically generated:

The molecule preview is capable of all of the customizations available in Firefly including background, bond, and atom colors, borders, and atom label fonts. No matter how large or small the molecule, and regardless of its starting coordinates, it will always be exactly scaled to fit the available space and precisely centered.

This dialog was rapidly implemented using the accessory capability provided by Swing's JFileChooser:

JFileChooser chooser = new JFileChooser();
PreviewAccessory accessory = new PreviewAccessory(chooser);

accessory.setPreferredSize(new Dimension(150, 150));

chooser.setAccessory(accessory);
chooser.addPropertyChangeListener(accessory);

// ...

Defining a JComponent implmenting the PropertyChangeListener interface is all that's needed to get a working molecule preview:

class PreviewAccessory extends DefaultPainter implements PropertyChangeListener
{
  // implementation
}

Swing has come a long way since the dark days of JDK 1.2. What started out as the dog-slow ugly duckling of user interface toolkits has developed into one of the best platforms for building desktop applications out there. Advanced tools such as the WYSIWYG interface builder Matisse and the polished components offered by JIDE make Swing an even more attractive option. The example described here is just one instance of how Swing's well-conceived design simplifies the job of building rich user interfaces.

Making Your 2D Structures Look Good: Firefly, Styles and Stylesheets

Rich Apodaca — Fri, 13 Jul 2007 11:19:00 +0000

Chemists can be very discerning when it comes to chemical structure aesthetics. This is not surprising, given the central role played by 2D chemical structures in the day-to-day work of many chemists. For example, consider the Wikipedia Chemistry/Structure drawing workgroup's ongoing discussion about achieving a consistent look for chemical structures on the online encyclopedia.

Several articles have discussed Firefly, a 2D chemical structure editor specifically designed for the Web. With major work on the rendering engine and structure manipulation interface complete, recent efforts have turned toward exposing drawing settings through a graphical user interface. Here I'll provide some screenshots of an interface prototype along with sample structures. I'll also briefly discuss the larger question of making 2D structure drawing styles portable.

Drawing styles are edited through a tabbed dialog containing a live preview window that uses the current structure or a default structure if none is available. The dialog is resizable, enabling users to immediately see the effects of changes on structures of varying sizes. Although this dialog could be bundled and deployed with the editor, its large footprint makes it more appropriate for use as an optional feature or as a standalone configuration tool in a Web application.

Changes can be rolled back entirely ("Reset"), canceled ("Cancel"), or accepted ("OK").

Let's say we'd like to apply a black background with white bonds, as used in some Power Point presentations:

After applying this change, we decide that we'd rather not use atom coloring:

After looking at this structure for a few seconds, we decide that narrower stereo bonds are needed:

After some experimentation, we find a more appropriate non-stereo bond width and double bond offset:

What about a Serif font? No, I don't think so:

But we could certainly reduce the size of the atom labels:

On second thought, the original atom sizes were fine, although changing font may require us to reconsider the atom label heights:

As you can see, the possibilities for customization are nearly endless. In practice, however, most chemists will adopt only two structure drawing styles that they re-use as needed: one for reports and manuscripts; and one for presentations. It will be interesting to see whether a third style makes it's way into the standard repertoire: Web.

Each chemist will want a way to save their styles, possibly share them, and easily apply them. Although a few systems for doing so are feasible, the most practical approach would be a stylesheet. Applying a stylesheet to any structure diagram would change its appearance, offering a simple mechanism to achieve a consistent look across documents.

Developing a universal (cross-editor) stylesheet system would be no easy task, given the wildly divergent capabilities of 2D structure rendering software. Despite the technical difficulty, the payoff for users is obvious.

Open Notebook Science Using InChIMatic

Rich Apodaca — Thu, 21 Jun 2007 10:27:00 +0000

Have you ever wanted to find a molecule on the Web using your favorite search engine in combination with a 2-D structure editor? InChIMatic is a service that lets you do just that. In this article, I'll show how InChIMatic can be used to look up molecules in the UsefulChem-Molecules blog.

For those who aren't familiar with it, UsefulChem-Molecules is a blog operated by Jean-Claude Bradly's research group at Drexel University that publicly archives molecules of interest. Each entry is a single molecule that may be linked to other Web resources.

Let's say you wanted to look up dithranol. This can be done by simply pointing your browser to inchimatic.com and drawing the structure:

When you're finished, select your search engine of choice (we'll use Google here) and press "Search". You'll be taken to the familiar results page. The second result links to the UsefulChem-Molecules entry for dithranol.

In performing this simple workflow, I noticed areas for improvement in both UsefulChem and InChIMatic:

UsefulChem If you look at the entry for dithranol, you'll notice there are no linkouts. In essence, the entry is a bookmark without context. Although it's useful to know that the Bradly group is interested in this molecule, it would be even more interesting to know in what context. Each entry should contain at least one link giving the molecule a context.
InChIMatic Using the back button on the Google results page takes you back to InChIMatic, but your molecule is gone. If you wanted to look for a series of related molecules, you couldn't edit your existing structure. As Firefly 1.0 nears completion, a top priority will be to incorporate it into InChIMatic and fix the back-button problem.

As you can see, between InChIMatic and UsefulChem-Molecules, we have the makings of a crude laboratory information management system. The problem is we're trying to use existing tools (search engines and blogs) for purposes they are ill-suited for. It can work, but it could also work much better.

What chemistry really needs is open, user-friendly systems specifically designed to archive and search chemical information of the type maintained by the Bradly group. But that's a story for another time.

A Chemical Structure Editor for the Web: Four Screenshots of a Firefly Prototype

Rich Apodaca — Wed, 02 May 2007 10:13:00 +0000

The previous article in this series discussed the requirements of Firefly, a new 2D chemical structure editor for the Web. Another article discussed Firefly's design constraints and the importance of embracing them. Why so much focus on a structure editor? Simply put, the structure editor is the key link between chemistry and cheminformatics. Without the structure editor, there would be no audience for cheminformatics software.

So far the discussion has been rather abstract. To make it less so, the following four screenshots illustrate the user interface and rendering capabilities of a Firefly prototype. All molecules were drawn with the Firefly interface running on Linux. Screenshots were directly captured from the running application.

Cholesterol

The image below illustrates fused rings and stereo atoms. Also notice that the atom label for oxygen has one implicit hydrogen atom that is properly placed to the left.

Doxorubicin

This image illustrates both atom labels and aromatic bonding. Notice the improperly-placed quinone double bond. Refining Firefly's aromaticity perception is currently a top priority.

Flunoxaprofen

Firefly comes complete with a developer-overridable atom coloring scheme. Also notice the correct length of the internal carbon-nitrogen double bond line.

Uric Acid

One of the more difficult aspects of rendering molecules with implicit hydrogens is placing them in the correct quandrant. In this screenshot of uric acid, notice how the hydrogens occupy three different quadrants relative to their hosting nitrogen atoms.

A Chemical Structure Editor for the Web: Firefly's Two Audiences

Rich Apodaca — Mon, 23 Apr 2007 11:22:00 +0000

The previous article in this series outlined the main technical constraints in the design of Firefly, a new chemical structure editor for the Web. Knowing the technical barriers you're up against is important in any software project, but understanding what the software needs to do is also important. This article offers a high-level approach to answering this important question.

Why Use an Editor at All?

The purpose of Firefly will be to conveniently convert the language of chemistry (structure diagrams) into the language of cheminformatics (line notations and file formats). There are certainly alternatives to using a graphical editor. For example, SMILES strings could be directly entered. Molfiles could be pasted into a window. But as a real-world solution, a graphical editor embedded in the host application is the only approach that makes sense.

Two Audiences

As discussed previously, the structure editor plays the pivotal role of linking consumers of cheminformatics software (i.e., chemists) with producers of cheminformatics software. As a result, the structure editor is one of those few pieces of software that is simultaneously "seen" and "felt" by chemists, and used as a building block by cheminformatics developers. For an editor to be successful, the needs of both of these audiences must be satisfied.

The Chemist Experience

To understand how to build a good structure editor, it's important to understand what's happening in the thirty seconds just before the editor is run. Typically, a chemist is in the middle of doing something important like answering a burning question, preparing a presentation, or setting up an experiment. Firing up a structure editor is actually a major distraction from that work-flow; it interrupts the scientific thought process with a mundane data-entry task far more complex than any text box.

Understandably, using a structure editor is not something that most chemists are enthusiastic about. And using a new structure editor, with its own quirky way of doing things, is potentially even worse. This makes it especially important that any new editor behave intuitively. But what exactly does "intuitive" mean?

ChemDraw and IsisDraw are the 500-pound gorillas of structure editors. They're everywhere - in universities (often bootlegged), at home, and in industry. Important portions of the ChemDraw/IsisDraw user interfaces make appearances in all major structure editors (e.g., ChemSketch). The two things that can be assumed about any prospective user of a new structure editor are that: (1) they have used ChemDraw/IsisDraw; and (2) their current editor is either ChemDraw/IsisDraw or something very similar.

For better or worse, ChemDraw/IsisDraw define the meaning of the word "intuitive" when it comes to 2D structure editors. When faced with any new editor, the first thing Joe the Chemist is likely to try is what works in ChemDraw/IsisDraw. Any attempt to innovate the user interface therefore needs to be very carefully considered. Developers who violate this "principle of least surprise" are likely to meet with well-founded resistance.

To summarize: Firefly should minimize the number of "innovations" it introduces into the user interface.

The Developer Experience

In contrast to chemists, developers are likely to be much more tolerant of innovations in Firefly. The reason is simple: there is no standard structure editor for Web applications. This leaves just a few basic requirements:

Molfile input/output. Many tools exist, such as Ruby Open Babel, that can be deployed on a server and which will convert a Molfile into virtually any desired format. To fully satisfy developer expectations, it will be sufficient that Firefly can export and import Molfiles. Additional formats are unnecessary, at least for the 1.0 release.
Designed with JavaScript in mind. All applet settings will be addressable though get/set methods. Using Java primitives as arguments to these methods will maximize developer productivity in languages such as JavaScript.
Extensibility. A mechanism to conveniently extend the functionality of Firefly through JavaScript must exist.
Adaptability. It must be possible to use Firefly as a 2D molecular rendering framework, independent of its user interface.
Comprehensible Design. Firefly's design will be made more understandable through the use and documentation of Design Patterns. Monolithic classes and methods are to be avoided.

Summary

To be successful, Firefly must satisfy two very different groups of users: chemists who will interact with its graphical interface; and developers who will plug it into other software frameworks. These two groups have very different expectations and needs. Understanding, and embracing, these expectations will go a long way toward making Firefly the best editor it can be.

Image Credit: elbisreverri