1.9.1 • Published 10 months ago

@iktos-oss/molecule-representation v1.9.1

Weekly downloads
-
License
MIT
Repository
github
Last release
10 months ago

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.

Usage

Initial setup

1- First follow the @iktos-oss/rdkit-provider setup.

2- Wrap your components in an RDKit provider from @iktos-oss/rdkit-provider

import { RDKitProvider } from '@iktos-oss/rdkit-provider';
<RDKitProvider>
  <Component />
</RDKitProvider>`

3- For better preformance we recommend enabling the caching of rdkitjs JsMol instances, this can be done using RDKitProvider

import { RDKitProvider } from '@iktos-oss/rdkit-provider';
<RDKitProvider  cache={{ enableJsMolCaching: true, maxJsMolsCached: 30 }}>
  <Component />
</RDKitProvider>`

Rendering molecules

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
};
<MoleculeRepresentation {...props} onAtomClick={} />

Local dev

    git clone https://github.com/iktos/molecule-representation.git
    cd molecule-representation
    npm install
    npm run storybook
1.9.1

10 months ago

1.9.0

10 months ago

1.8.3

10 months ago

1.8.2

1 year ago

1.8.2-beta.0

1 year ago

1.8.1

1 year ago

1.8.0

1 year ago

1.8.0-beta.0

1 year ago

1.7.2-beta.2

1 year ago

1.7.2

1 year ago

1.7.2-beta.1

1 year ago

1.7.1

1 year ago

1.7.0-beta.0

1 year ago

1.7.0-beta.1

1 year ago

1.7.0

1 year ago

1.6.1

1 year ago

1.6.1-beta.0

1 year ago

1.6.0

1 year ago

1.6.0-beta.0

1 year ago

1.5.1-beta-2

2 years ago

1.4.3

2 years ago

1.4.2

2 years ago

1.5.0

2 years ago

1.4.1

2 years ago

1.2.3

2 years ago

1.4.0

2 years ago

1.3.0

2 years ago

1.5.0-beta.0

2 years ago

1.5.1-beta.1

2 years ago

1.5.0-beta.1

2 years ago

1.3.0-beta.1

2 years ago

1.3.0-beta.2

2 years ago

1.3.0-beta.3

2 years ago

1.3.0-beta.0

2 years ago

1.4.3-beta.0

2 years ago

1.2.2

2 years ago

1.2.1

2 years ago

1.2.1-beta.1

2 years ago

1.2.0

2 years ago

1.2.0-beta.4

2 years ago

1.2.0-beta.3

2 years ago

1.2.0-beta.2

2 years ago

1.2.0-beta.1

2 years ago

1.1.1-beta.1

2 years ago

1.1.0

2 years ago

1.0.0

2 years ago