A react component for adding the Molstar Macromolecular Visualiser to your app.
With npm:
npm install molstar-react
The Viewer is a built-in, full page interface for using Molstar. It comes with a complete set of options for loading files, changing the view, etc. If you don't need a great deal of customisation, it is the most straightforward way to use Molstar.
(It is also, for the moment, the only way of using molstar-react - more customisations are coming soon.)
To use:
import MolstarViewer from "molstar-react";
export const App = () => {
return (
<div>
<MolstarViewer />
</div>
);
}
export default App;
This will render a blank, full page interface, from which you upload a file to view, or download using a PDB code.
You can pre-load an official PDB structure by supplying its 4 letter ID as a prop. By default these are downloaded from PDBe, but this can be customised using the Molstar options (see below).
You can also pre-load a structure by passing in the URL of the file - as long as it is a file type that Molstar supports.
The initial settings and state of the viewer are set using an options object, which has some defaults set by Molstar itself. Some useful options are:
layoutShowSequence
- show the polymer sequences along the top (defaulttrue
).layoutShowLeftPanel
- show the state tree on the left (defaulttrue
).collapseLeftPanel
- minimise the state tree on the left, but make it togglable (defaultfalse
).layoutShowLog
- show the event log on the bottom (defaulttrue
).layoutShowControls
- show controls around the edges (combination of above, defaulttrue
).pdbProvider
- where PDBs will be downloaded from (default"pdbe"
).
import MolstarViewer from "molstar-react";
export const App = () => {
const options = {
pdbProvider: "rcsb",
layoutShowLog: false,
layoutShowSequence: false
}
return (
<div>
<MolstarViewer pdbId="1XDA" options={options} />
</div>
);
}
export default App;
16 July 2021
- Fixed re-render initialising.
- Component now disposes of viewer when removed.
13 July 2021
- Made distinction between Molstar Viewer and Molstar Core.
- Enabled custom viewer options.
- Added option to load structure from URL.
- Made pre-loading structure optional.
3 July 2021
- Basic full screen Molstar.
- Added fetching by PDB ID.