Viztein is a React library component for visualizing proteins and other macromolecules. The code is a light wrapper around NGL which uses WebGL for rendering graphics.
$ npm install viztein@0.1.7
import Viztein from 'viztein';
class Example extends React.Component {
render() {
return (
<Viztein data={{ filename: "https://files.rcsb.org/download/4hhb.pdb" }} />
);
}
};
Default with Custom Viewport Style
# latest stable
$ npm install viztein
The macromolecule source and display config data.
Requires a filename key which can be a file path or url path to the source data. Supported file types are mmCIF, PDB, PQR, GRO, SDF, MOL2, and MMTF. A config key can also be passed in to change the display options. Each config option contains a type and input. The type is the name of the NGL function to use and the input are the arguments to pass in. A list of display functions is found in the NGL molecular display documentation.
data Prop Example:
{
filename: 'https://files.rcsb.org/download/4hhb.pdb',
config: [
{
type: 'addRepresentation',
input: ['ball+stick', { color: 'orange' }]
}
]
}
Id of the div element to render the graphic inside. When rendering multiple Viztein components on the same page, pass in an unique viewportId prop to each Viztein component.
viewportId Default
'viztein-viewport'
CSS style of the viewport.
viewportStyle Default
{
backgroundColor: 'black',
width: '500px',
height: '500px'
}
$ git clone https://github.com/mcmenemy/viztein.git
$ cd viztein
$ npm install
$ npm start