https://github.com/iktos/molecule-representation
Interactif molecule representations / drawing as react components
https://github.com/iktos/molecule-representation
cheminformatics chemistry molecule-viewer rdkit react typescript
Last synced: 8 months ago
JSON representation
Interactif molecule representations / drawing as react components
- Host: GitHub
- URL: https://github.com/iktos/molecule-representation
- Owner: iktos
- License: mit
- Created: 2023-01-23T14:56:35.000Z (over 3 years ago)
- Default Branch: master
- Last Pushed: 2025-02-07T14:24:38.000Z (over 1 year ago)
- Last Synced: 2025-02-07T14:57:50.100Z (over 1 year ago)
- Topics: cheminformatics, chemistry, molecule-viewer, rdkit, react, typescript
- Language: TypeScript
- Homepage: https://molecule-representation-ramziweslati.vercel.app
- Size: 4.69 MB
- Stars: 8
- Watchers: 6
- Forks: 1
- Open Issues: 3
-
Metadata Files:
- Readme: README.md
- License: LICENSE.md
Awesome Lists containing this project
README
# molecule-representation
React components for interactive 2D molecule representation rendering.
## Demo
Visit https://molecule-representation-ramziweslati.vercel.app for a demo of the package, you can browse the diffrent options like molecule representations with zoom, click handler, substructure alignement...
Deployments are automated via [Vercel](https://vercel.com).
## Usage
#### Initial setup
1- First follow [the @iktos-oss/rdkit-provider setup](https://github.com/iktos/rdkit-provider?tab=readme-ov-file#setup).
2- Wrap your components in an RDKit provider from [@iktos-oss/rdkit-provider](https://github.com/iktos/rdkit-provider)
```html
import { RDKitProvider } from '@iktos-oss/rdkit-provider';
`
```
3- For better preformance we recommend enabling the caching of rdkitjs JsMol instances, this can be done using RDKitProvider
```html
import { RDKitProvider } from '@iktos-oss/rdkit-provider';
`
```
#### Rendering molecules
```js
import { MoleculeRepresentation, MoleculeRepresentationProps } from '@iktos-oss/molecule-representation';
const props: MoleculeRepresentationProps = {
smiles: 'Cc1cccc(-c2ccccc2)c1',
addAtomIndices: true,
bondsToHighlight: [
[1, 0],
[3, 4],
],
atomsToHighlight: [
[1, 0],
[3, 4],
],
atomsStyles: {
default: { fill: 'green' },
1: { fill: 'red' },
},
bondsStyles: {
default: { stroke: 'black', 'stroke-width': '1px' },
'0-1': { stroke: 'green', 'stroke-width': '2px' },
'4-*': { 'stroke-width': '3px' },
'*-6': { 'stroke-width': '4px' },
'6-*': { 'stroke-width': '2px' },
},
height: 200,
width: 300,
onAtomClick: (atomId: string) => console.log("clicked atoms idx:", atomId),
onBondClick: (bondIdentifier: ClickedBondIdentifiers) => {
console.log("clicked bond idx:", bondIdentifier.bondId)
console.log("clicked bond starting atom idx:", bondIdentifier.startAtomId)
console.log("clicked bond ending atom idx:", bondIdentifier.endAtomId)
}
zoomable: true
};
```
## Local dev
```bash
git clone https://github.com/iktos/molecule-representation.git
cd molecule-representation
npm install
npm run storybook
```