The previous chemistry-related post described some of the issues involved in representing chemical reactions. The Green Lab Notebook app-in-progress needs to be able to express multistep reactions as a collection of highly marked up molecular components, and it also needs to be able to render them on demand, to a level of quality that is comparable to what a user might draw themselves, if they happened to be in total control over where everything is positioned. Drawing a multistep reaction algorithmically is not an entirely trivial task, though, since there are multiple opportunities for making judgment calls for how best to fit the scheme on a piece of paper to achieve close packing, aesthetic readability, and consistency across a series.

The component-wise reaction description concepts are already implemented in the Mobile Molecular DataSheet, Reaction101 and Yield101 apps, and these products already have their own layout algorithms. Because they only support a single reaction step, though, the degrees of freedom are fewer: the reaction is either rendered left-to-right or top-to-bottom (the latter being preferential for editing on narrow devices like iPhones in portrait mode).

When it comes to drawing multistep reactions, rendering the whole thing in the same direction often runs over the width of a reasonably sized page, forcing the user to do a lot of scrolling, or to downscale the entire reaction into a very thin band. When chemists draw their own reaction schemes, they often start with the first arrow pointing right, then once the edge of the page is reached, the next arrow points down. For describing protracted multistep syntheses (e.g. natural products, from scratch), a scheme often winds its way around an entire page, in order to avoid blank space.

The reaction experiment datastructure used by the Green Lab Notebook is not intended to describe 18 step natural product syntheses in a single entry, but rather to be able to capture multiple steps of a single discrete laboratory operation, which may involve describing an important in situ intermediate, separating out a stepwise sequence, or describing two or more subsequent reactions done in the same pot prior to isolation and purification of the product. For this reason the layout engine provides just two arrow orientations: right and down. When performing the layout of components, the direction can be entirely left to right (horizontal), entirely top to bottom (vertical) or switch from horizontal to vertical partway through (“bent”). As another degree of freedom, a block of reactants or products may individually drawn vertically (i.e. the plus symbols stack vertically instead of horizontally), prior to the directionality of the reaction arrow switching to vertical.

What this all means is that when a reaction layout is prepared for rendering onscreen, several different layout styles are attempted, and whichever style best matches the available width, the desired scale, and the general aesthetic desire to avoid having too much empty space, is selected in preference.

The algorithmicly-chosen layout can vary, even for the same reaction scheme. For example, the organometallic compounds shown in the first reaction above are rendered using the bent style, because that nicely fits the form-factor of an iPhone, at the desired resolution for displaying within a list. For editing the reaction, it arranges itself differently:

For the editing panel, the components have to be big enough for the user to be able to tap on them, and so the desired scale is larger, and so the preferred layout is to have the reaction sections stacked vertically (outer) and horizontally (inner). Rotate the phone to landscape mode, though, and the criteria change again, and the layout is changed to the bent form.