A React Component to Visualize Molecules in 2D
10:28:00 AM
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.
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
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.
0 comments