Depth-First: Tag editor

Screencast: Drawing Structures Quickly With ChemWriter

Rich Apodaca — Wed, 18 Jun 2008 13:55:00 -0400

This short video shows how to use ChemWriter to draw structures quickly with keyboard shortcuts.

Better Structure Drawing With ChemWriter 1.3.0

Rich Apodaca — Mon, 16 Jun 2008 16:18:00 -0400

ChemWriter 1.3.0 has been released and is ready for download. This version makes it possible to change the mouse cursor hover radius for more accurate drawing. It also adds a setting to disable heteroatom keyboard shortcut events occurring away from a molecule node, reducing the possibility of an off-atom label being inadvertently drawn.

For details, see the Metamolecular Company Blog.

ChemWriter Now Available for Download

Rich Apodaca — Mon, 14 Jan 2008 10:29:00 -0500

A 2D chemical structure editor is a key component in most cheminformatics systems. With an ever-increasing number of groups using the Web as a cheminformatics platform, the need for a structure editor built specifically around the capabilities and constraints of the Web becomes more apparent.

For the last several months, my company (Metamolecular, LLC) has been developing a 2D structure editor called ChemWriter(TM). It was created specifically to solve the problem of building interactive, chemically-enabled Web applications that look good and load fast.

You can now download a free, fully-functional, non-expiring copy of ChemWriter (the ChemWriter Starter Package) good for development and testing of your chemically-aware Web application. The Metamolecular Company Blog has the details.

ChemWriter, Chemical Structures, and the Web

Rich Apodaca — Tue, 27 Nov 2007 12:09:00 -0500

Of all the components that make up today's cheminformatics systems, the 2D structure editor may be the most widely-used. A 2D structure editor is often a chemist's first and most enduring exposure to cheminformatics, and can be encountered as early as Junior High or High School.

Over time, a good 2D structure editor becomes every bit as important to a chemist as a text editor is to a writer or software developer. At any given ACS organic division symposium, you're likely to find several bench chemists who only casually, if ever, use a 3D molecular modelling program; finding any who don't regularly use a 2D structure editor would be much more challenging.

2D structure editors are ubiquitous. They can be found in one form or another in most cheminformatics systems, ranging from databases, to standalone applications, to property calculators, and even 3D molecular modelling programs.

Despite the importance of structure editors, they don't get much attention among cheminformatics developers. For example, if your bibliography is anything like mine, it contains dozens of papers on molecular descriptors. Yet the number of cheminformatics papers describing the design of ergonomic chemical structure editors is, well, one or maybe two.

About ChemWriter

ChemWriter™ is a new product aimed at making 2D chemical structure editors a lot more interesting, easy to use, and versatile than they have been in the past. Designed specifically as a lightweight, extendable component, ChemWriter is ideal for use in chemically-enabled Web applications.

The second beta version of ChemWriter has recently been released by my company, Metamolecular, LLC. A recent article on the Metamolecular company blog discusses ChemWriter in more detail.

The Structure Editor In-Depth

Because the design and use of 2D chemical structure editors is an unusual subject in cheminformatics, a compilation of articles on the topic from Depth-First and the Metamolecular Web site is provided below. Many of these articles refer to "Firefly", which was ChemWriter's name during early development.

Why the Structure Editor Matters

The Structure Editor: (Forgotten) Link Between Chemistry and Cheminformatics Title says it all.
Four Free 2-D Structure Editors for Web Applications An early look with example code.
Waldorf Salad Why aesthetics matter in chemistry.

Creating ChemWriter

A 2D Chemical Structure Editor for the Web: Embracing Constraints in Firefly Creating remarkable products depends on identifying and embracing constraints.
A Chemical Structure Editor for the Web: Four Screenshots of a Firefly Prototype Some screenshots of an early ChemWriter prototype.
A Chemical Structure Editor for the Web: Firefly's Two Audiences A good structure editor needs to delight both developers and end users.

Using ChemWriter

Open Notebook Science Using InChIMatic ChemWriter in action.
Googling for Molecules with InChIMatic and Firefly One application of InChI using ChemWriter.
Top Ten Best-Selling Drugs Worldwide (2006) - Depth-First Structures courtesy of an early development version of ChemWriter Desktop.
Top Ten Best-Selling Drugs Worldwide With Structures 2006 - Metamolecular ChemWriter can also be used to dynamically render resizable 2D chemical structures in Web pages.
ChemWriter and the Java Deployment Toolkit A simplified method for cross-browser applet deployment using ChemWriter.
Transferring Molecules With ChemWriter Demonstrates how JavaScript can be used to move molecular information into and out of ChemWriter.

Extending ChemWriter

Building a Molecule Preview with Firefly: The Joy of Swing Shows one use for ChemWriter as a Swing GUI component.
Making Your 2D Structures Look Good: Firefly, Styles and Stylesheets Every aspect of ChemWriter's rendering can be customized, as is shown with this early development version of ChemWriter Desktop.
Never Draw the Same Molecule Twice: Viewing Image Metadata Embedding 2D structure information as a molfile in PNG images.
Editable and Searchable 2D Molecular Images Metadata applied in a novel way using a development version of ChemWriter Desktop.

Googling for Molecules with InChIMatic and Firefly

Rich Apodaca — Wed, 15 Aug 2007 09:16:00 -0400

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.

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

Rich Apodaca — Fri, 13 Jul 2007 11:19:00 -0400

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.

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

Rich Apodaca — Wed, 02 May 2007 10:13:00 -0400

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 -0400

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

Update: Four Free 2-D Structure Editors for Web Applications

Rich Apodaca — Sun, 22 Apr 2007 11:26:00 -0400

A previous article discussing the deployment of four free 2D structure editors has been fixed. The sample pages demonstrating how to obtain a molfile from each have also been restored.

A 2D Chemical Structure Editor for the Web: Embracing Constraints in Firefly

Rich Apodaca — Wed, 18 Apr 2007 10:09:00 -0400

A previous article outlined the major concepts behind Firefly, a new 2D structure editor for the Web. Structure editors are unique in that they require solutions to problems in so many different areas: graphical user interface design; chemical structure aesthetics; 2D graphics and geometry; molecular representation; and graph theory, to name a few.

These are important considerations, but they pale in comparison to the biggest design challenge: Firefly must be deployed and run in a heterogeneous network environment. This one constraint frames all of the basic design questions involving platform, programming language, footprint, and mode of deployment. And this is a Good Thing.

Platform, Programming Language, and Deployment

Considering the diverse array of hardware and operating systems on the Internet, it's amazing that anything works at all. Although standards save the day in most cases, there is no all-purpose solution when it comes to interactive Web technologies. Today, there are essentially three options for Firefly:

Flash To my knowledge, no 2D structure editor has ever been implemented in Flash. (This alone sounds like a good reason to try it sometime.) As a platform, Flash has a lot going for it, including a large installed base, and the abstraction layer OpenLaszlo. On the down side, Flash support on platforms such as Linux has not been what it could be. As Flash continues to mature, this problem may become less important.
Ajax Essentially nothing more than HTML and JavaScript - and no plug-ins of any kind. At least two editors have been written in Ajax: WebME and PubChem's editor. Ajax works in a lot of situations, but in my opinion it still isn't up to the job of creating a responsive, interactive structure editor.
Java Applet A massive installed base, support for just about every kind of hardware in use, a robust object-oriented language with a powerful 2D graphics and GUI libraries, and it's even Open Source. Although Flash and Ajax have their advantages, Java is the best option for the foreseeable future. There are several Java structure editors to choose from, and for good reason. (Future articles will discuss what makes Firefly different.)

What about a Java application? Unfortunately, not even a user's ability to install software on their own machines can be taken for granted in the context in which Firefly will be running. For example, many companies enforce prohibitions against employee-installation of non-approved software. Machines found in libraries or other public places may face similar limitations. Given these real possibilties, an applet is the only option that makes sense.

As to the version of Java that Firefly is built on, JDK 1.4.2 seems to have become the unwritten standard. It's mature enough the have most of what Java has today, but is old enough to be on most machines. Even with this compromise, Firefly will have an impressive array of functionality to work with: Java2D, Swing, and many performance optimizations relative to earlier Java versions.

Footprint

High-speed Internet access is ubiquitous. Bandwidth is now a commodity. Memory is practically free and processors - don't get me started on processors these days. But developers who take massive bandwidth and staggering processor power for granted are setting themselves and their users up for many unpleasant interactions. Firefly must be lightweight, responsive, and fast to deploy under any network load and on 80% of the hardware on the Web. Limiting its footprint to 150K will increase the chances of success.

With such a small footprint, none of the currently-available open source Java cheminformatics libraries (e.g. CDK, JOELib, Octet) will be of much use. They are simply too big. Even the smallest of them (Octet) weighs in at about 300K. Of course, it's possible to strip out unnecessary features from these libraries. But even then, a great deal of unused functionality would remain. This is the unavoidable downside of general-purpose libraries. By developing a small cheminformatics library specifically designed to power a 2D structure editor, Firefly should be able to meet the 150K target.

Is 150K a realistic goal? My previous experience in developing Structure and Structure-CDK taught me that with Java2D, very lightweight structure-rendering code is well within reach. For example, the Structure-CDK jarfile is an unoptimized 39K. (But even Structure-CDK faces the same problem as other general-purpose libraries - it's much bigger than it needs to be. In other words, some Structure-CDK concepts may be applicable to Firefly, but the code itself must be completely re-written.)

When combined with the fact that a lot of cheminformatics functionality, such as structure clean-up, can be offloaded to a server, 150K begins to look like a very reasonable target.

As a final encouragement, consider that everything Java Molecular Editor does, including SMILES canonicalization, is contained in a jarfile no larger than 40K.

Wrap-Up

As you can see, even before a single line of code was written, Firefly's design was constrained in some very important ways. Identifying and embracing these constraints doesn't ensure success, but it greatly increases its chances. In articles to follow, I'll show how Firefly was designed to thrive within these constraints.

Image Credit: frogmuseum2