https://github.com/iktos/molecule-representation

Interactif molecule represnetations as react components
https://github.com/iktos/molecule-representation

cheminformatics chemistry molecule-viewer react typescript

Last synced: 3 months ago
JSON representation

Interactif molecule represnetations as react components

• Host: GitHub
• URL: https://github.com/iktos/molecule-representation
• Owner: iktos
• License: mit
• Created: 2023-01-23T14:56:35.000Z (almost 2 years ago)
• Default Branch: master
• Last Pushed: 2024-10-02T15:21:11.000Z (3 months ago)
• Last Synced: 2024-10-02T15:25:12.789Z (3 months ago)
• Topics: cheminformatics, chemistry, molecule-viewer, react, typescript
• Language: TypeScript
• Homepage: https://molecule-representation-ramziweslati.vercel.app
• Size: 1.45 MB
• Stars: 7
• 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],

  ],

  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

```