Skip to content

instantiate an RDKit web worker in a React context

License

Notifications You must be signed in to change notification settings

iktos/rdkit-provider

Repository files navigation

rdkit-provider

Initialises a web worker with RDKitModule instance from @rdkit/rdkit and exposes it via a react context

Setup

Assets

The project using this package needs to provide it with RDKit package assets

After installing @rdkit/rdkit copy to your public folder node_modules/@iktos-oss/rdkit-provider/lib/rdkit-worker*.js node_modules/@rdkit/rdkit/dist/RDKit_minimal.js node_modules/@rdkit/rdkit/dist/RDKit_minimal.wasm

Usage

Wrap your components/App with RDKitProvider

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

you can also enable caching for molecule, which would enhance performance

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

Options that can be passed to RDKitProvider :

prop type functionality required/optional
cache RDKitProviderCacheOptions = { enableJsMolCaching?: boolean; maxJsMolsCached?: number; } enables JSMol caching for better performance optional
preferCoordgen boolean will be passed to @rdkit/rdkitjs prefer_coordgen to use Schrodinger’s open-source Coordgen library to generate 2D coordinates of molecules optional
removeHs boolean toggles removing hydrogens molecules. Defaults to true optional
initialWorkerInstance Worker instance of rdkit-worker.js pass an rdkit worker instance, if not passed rdkit-provider creates one for you optional
rdkitPath string default to /RDKit_minimal.js in initRDKit.ts pass a custom path to rdkit module optional
rdkitWorkerPublicFolder string, default is '', meaning the file is at the root level of the public folder path to the folder containing the rdkit-worker-[version].js relative to the public folder optional

You can make use of a set of helper functions exposed by the package

import { useRDKitUtils, useRDKit } from '@iktos/rdkit-provider';

const Component = () => {
  const { worker } = useRDKit();
  const { isValidSmiles } = useRDKitUtils();
  const submit = useCallback(
    async (smiles) => {
      const { isValid } = await isValidSmiles({ smiles });
      if (!isValid) return;
      // ...
    },
    [isValidSmiles],
  );

  if (!worker) return 'loading ...';
  return <>...</>;
  //...
};

Example of usage can be found in github.com/iktos/molecule-representation