MolPress: more interactivity & reaction importing

molpress_interactive00After a bit of inattention, the MolPress project has received some important new features: chemical objects are rendered within the editor itself, and there’s a better onboarding process for bringing in reactions.

MolPress is an open source project for bringing chemistry objects (molecules, reactions and collections) to the hyperpopular WordPress blogging & content management system. The key value proposition is that these chemical data objects are stored within or alongside the post itself, in their uncontaminated cheminformatically pure form, and then rendered by the plugin. This is the best of both worlds, because you can disclose your data for humans and machines at the same time, as opposed to creating a diagram and (maybe) bundling the data as well in a separate location.

The technical accomplishment is made possible by a WordPress plugin technique based on shortcodes. These look a bit like HTML, and allow special non-standard things to be embedded within a WordPress page, and then when the page is viewed as per usual on the internet, the plugin’s special rendering capability kicks in. This was step one for the MolPress project. And as an additional fun feature, the WebMolKit sketcher was implemented as a button, so molecules could be drawn and inserted using just the web interface.

There are 3 main view modes that every WordPress user is familiar with: visual, text and preview. The text mode is the raw content, like viewing the source to an HTML page, while preview mode is the final user-facing rendition. Most of the time spent is usually in the visual mode, which is a visual editor that renders similarly to the final product, though not quite identical. One of the most important updates to MolPress is that the visual mode now displays chemical objects in their visual form when possible, rather than showing the raw data, which makes the editing experience significantly more pleasant.

The other major new enhancement is that there is an easier way to get reactions into a MolPress page. While the WebMolKit sketcher does not have a reaction editor (these are quite complex to design), the XMDS app for macOS does, and they are now quite easy to integrate.

Let’s begin with some nostalgia: my first day in the undergraduate chemistry lab, where we got to make aspirin. This is a reaction sketch of the procedure using XMDS:

molpress_interactive01

Switching to a browser and editing a new WordPress/MolPress page, there is a convenient button that invites us to provide a reaction:

molpress_interactive02

This sits alongside the Molecule button, so there are now two MolPress-specific actions. Clicking the button brings up the import dialog:

molpress_interactive03

This is beckoning us to provide a reaction from an external source. At some point there will likely be a built-in reaction editor, but for the moment the best way to create the content is to use XMDS, and deliver it by either dragging or copy’n’paste. The dragging part can be done in several ways: the file can be saved to disk, or it can be dragged directly from XMDS itself, to save the hassle of writing the content to the disk:

molpress_interactive04

The innocuous little icon at the top right subtitled Drag is the content that can be dragged over into the receiving area on the website. Once the transfer is complete, the import dialog displays the content:

molpress_interactive05

This is essentially a preview of what’s about to be inserted into the blog post. In this case there is just one reaction in the import package, but if there were more than one, there would be an option to select the preferred reaction. The options at the top show HeaderSchemeQuantity and Metrics, which show various parts of a reaction. The Scheme (i.e. diagram) is the default, because that’s most likely to be what you want.

Hitting the import button brings the content right into the blog post:

molpress_interactive06

Note that this above shows the editor, which is in visual mode. The new plugin features co-opt some of the TinyMCE editor’s functionality and perform a last minute switcheroo, exchanging the rather ugly internal shortcode representation for a beautifully rendered reaction scheme diagram.

The ugly version is certainly still there in the background, and you can see it by switching to text mode:

molpress_interactive07

Another improvement in this last update is that directly imported reactions are encoded in a base64 version of the native XML datasheet format. The reason for this is that the WordPress/TinyMCE interplay between visual & text is rather janky, and it has a habit of wrecking escape characters and whitespace. By converting to base64, the reaction definition is just one big chunk of ASCII text, which is not in any great danger of being mutilated.

The newly added reaction scheme can be mixed with a molecular structure which can be pasted in or drawn using the built in sketcher, e.g.

molpress_interactive08

molpress_interactive09

A look at the raw content for molecules shows a similar idea, except that molecules are preferentially expressed using the SketchEl format, which is relatively tolerant of whitespace finagling, so converting to base64 is unnecessary:

molpress_interactive10

In terms of data storage, there are now 3 categories: raw data, base64 encoded raw data, and references to files. The last style has certain advantages (e.g. the article itself is relatively concise), but it also involves multiple steps, since the datafile has to be uploaded to the WordPress site, and then referenced. This is definitely worth considering for larger files (e.g. collections), or cases when a chemical object is referred to multiple times, either within the same article or across several articles.

Another thing to note is that presently only molecules and reaction schemes are rendered within the visual editor. Collections and other kinds of views onto reactions are shown with a polite note, and rendered fully upon entering preview mode. The reason has to do with the rickety way in which the editor plugin mechanism is made available to the world (it’s not an unsolvable problem, just a level of kludge that goes beyond this incremental update).

As another general note, the objective of the MolPress plugin is to make it possible to use WordPress as a repository for chemical data objects, which sit alongside the text and other graphical content that describe a unit of scientific research (i.e. an ELN). At the present time one can rest assured that as long as the chemical objects are being displayed, then the machine readable data is being perfectly preserved. However, there are no convenient ways to extract it at the moment. But that’s now high on the to-do list.

Leave a Reply

Fill in your details below or click an icon to log in:

WordPress.com Logo

You are commenting using your WordPress.com account. Log Out /  Change )

Twitter picture

You are commenting using your Twitter account. Log Out /  Change )

Facebook photo

You are commenting using your Facebook account. Log Out /  Change )

Connecting to %s