A React Component to Visualize Molecules in 2D


One of the things we’re working on at Autodesk BioNano Research is creating a suite of tools for molecular design.  Visualization is a big part of that, so we wrote a simple D3 molecule visualizer to give a quick and easy way to view and interact with molecules.  We also needed something that could be easily integrated into other apps wherever we needed it, from IPython Notebooks to web apps, and that led us to React.

Screen Shot 2016-10-25 at 9.49.37 AM.pngScreen Shot 2016-10-25 at 10.08.27 AM.pngScreen Shot 2016-10-25 at 10.05.54 AM.png



With React, we can hide away D3’s complexity and just provide a simple data-bound interface.  Just pass in some JSON representing a molecule and it will be rendered.  If that JSON changes, the visualization will update.
<Molecule2d
 modelData={{ nodes: …, links: … }}
 selectedAtomIds={[ 3, 1, 4 ]}
/>
This has allowed us to easily use Molecule2d in multiple projects, including ones that do not use React.  The main way to add UI to IPython Notebooks, called ipywidgets, provides a very opinionated Backbone interface, for example.  However, we were able to wrap Molecule2d inside of a Backbone view for great compatibility without a lot of effort.

Interactivity

caffeine3.gif
Despite the simple one way data-bound interface, Molecule2d is still completely interactive.  Clicking on an atom will update the internal state representation of selectedAtomIds as well as calling the onChangeSelection prop with the latest selectedAtomIds.  This allows the developer using Molecule2d to react to the selection in whatever way their application calls for.

Get It

You can start using Molecule2d right now by installing with npm:
npm install –save molecule-2d-for-react
You can find full usage instructions and documentation in the README.  A full working example is also included in the Github repo.

From Here

Molecule2dForReact is still under very active development due to its use in our Molecular Design Toolkit project.  We hope to standardize the JSON format for specifying molecules, improve support for more complex molecules, and add more options for customization.  As always, contributions are welcome.
Malte Tinnus

Malte Tinnus is a Senior Principal UX Designer at Autodesk Life Sciences, collaborating with world leading researchers to envision the paradigms and tools needed to understand and exploit the intersection of design and life.

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 )

Google+ photo

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

Connecting to %s