Getting started with RDKit-JS

Drawing molecules

First we'll work with an SVG drawing:

As of v2020.09 of the RDKit we can do the same thing using the HTML5 canvas:

We can do substructure searches and highlight the results:

You can also change drawing options and do highlighting with the SVG renderer, but we don't show it here. You just need to replace

mol.draw_to_canvas_with_highlights(canvas, mdetails);

with

var svg = mol.get_svg_with_highlights(mdetails);

The same call can be used to control drawing options or to manually set the atoms/bonds which should be highlighted:

and of course we can combine the two:

The currently supported options are:

atoms,bonds: lists to specify which atoms/bonds are highlighted
width,heightoffsetx,offsety: used to draw in a subregion of a canvas. Only supported by the HTML5 canvas drawer.
legend: the legend drawn under the molecule
These MolDrawOptions values: atomLabelDeuteriumTritium, dummiesAreAttachments, circleAtoms, splitBonds, continuousHighlight, fillHighlights, highlightRadius, flagCloseContactsDist, includeAtomTags, clearBackground, legendFontSize, maxFontSize, minFontSize, annotationFontScale, fontFile, multipleBondOffset, padding, additionalAtomLabelPadding, noAtomLabels, bondLineWidth, scaleBondWidth, scaleHighlightBondWidth, highlightBondWidthMultiplier, prepareMolsBeforeDrawing, fixedScale, fixedBondLength, rotate, addAtomIndices, addBondIndices, isotopeLabels, dummyIsotopeLabels, addStereoAnnotation, atomHighlightsAreCircles, centreMoleculesBeforeDrawing, explicitMethyl, includeMetadata, includeRadicals, comicMode, variableBondWidthMultiplier, variableAtomRadius, includeChiralFlagLabel, simplifiedStereoGroupLabel, singleColourWedgeBonds

It's often useful to generate molecule renderings where the coordinates of a core are constrained.

get_mol can be passed a JSON dictionary of boolean options. Currently supported options are: sanitize, kekulize, removeHs, mergeQueryHs

The SubstructLibrary functionality is exposed to enable running fast substructure searches taking advantage of pre-filtering through pattern fingerprints:

var sslib = new RDKitModule.SubstructLibrary();
var mol0 = RDKitModule.get_mol("Cc1cc(F)ccc1");
var mol1 = RDKitModule.get_mol("Clc1ccccn1");
sslib.add_trusted_smiles(mol0.get_smiles());
sslib.add_trusted_smiles(mol1.get_smiles());
var query = RDKitModule.get_mol(`
  MJ201100          2D

6  6  0  0  0  0  0  0  0  0999 V2000
   -1.0491    0.7134    0.0000 C   0  0  0  0  0  0  0  0  0  0  0  0
   -1.7635    0.3009    0.0000 C   0  0  0  0  0  0  0  0  0  0  0  0
   -1.7635   -0.5241    0.0000 C   0  0  0  0  0  0  0  0  0  0  0  0
   -1.0491   -0.9366    0.0000 C   0  0  0  0  0  0  0  0  0  0  0  0
   -0.3346   -0.5241    0.0000 C   0  0  0  0  0  0  0  0  0  0  0  0
   -0.3346    0.3009    0.0000 C   0  0  0  0  0  0  0  0  0  0  0  0
  2  3  1  0  0  0  0
  5  6  2  0  0  0  0
  1  2  2  0  0  0  0
  6  1  1  0  0  0  0
  3  4  2  0  0  0  0
  4  5  1  0  0  0  0
M  END`);
matches = JSON.parse(sslib.get_matches(query));
var canvas_query = document.getElementById("canvas-8-query");
query.draw_to_canvas_with_highlights(canvas_query, JSON.stringify({ legend: 'query' }));
var canvas_mol0 = document.getElementById("canvas-8-mol0");
mol0.draw_to_canvas_with_highlights(canvas_mol0, JSON.stringify({ legend: `mol0 matches: ${matches.includes(0)}` }));
var canvas_mol1 = document.getElementById("canvas-8-mol1");
mol1.draw_to_canvas_with_highlights(canvas_mol1, JSON.stringify({ legend: `mol1 matches: ${matches.includes(1)}` }));