How to hide alkyl hydrogens in Chem Viewer 2D

[akulmehta]

I am loading the structure from a mol file for e.g. the following mol file is for biotin:

171548
  -OEChem-07302110412D

 32 33  0     1  0  0  0  0  0999 V2000
    5.4765   -1.7328    0.0000 S   0  0  0  0  0  0  0  0  0  0  0  0
    9.5452   -1.7328    0.0000 O   0  0  0  0  0  0  0  0  0  0  0  0
    2.1926    2.5422    0.0000 O   0  0  0  0  0  0  0  0  0  0  0  0
    3.8390    3.0802    0.0000 O   0  0  0  0  0  0  0  0  0  0  0  0
    7.9574   -0.9238    0.0000 N   0  0  0  0  0  0  0  0  0  0  0  0
    7.9574   -2.5418    0.0000 N   0  0  0  0  0  0  0  0  0  0  0  0
    7.0063   -1.2328    0.0000 C   0  0  1  0  0  0  0  0  0  0  0  0
    7.0063   -2.2328    0.0000 C   0  0  2  0  0  0  0  0  0  0  0  0
    6.0601   -0.9281    0.0000 C   0  0  2  0  0  0  0  0  0  0  0  0
    6.0601   -2.5375    0.0000 C   0  0  0  0  0  0  0  0  0  0  0  0
    5.7495    0.0225    0.0000 C   0  0  0  0  0  0  0  0  0  0  0  0
    4.7710    0.2287    0.0000 C   0  0  0  0  0  0  0  0  0  0  0  0
    8.5452   -1.7328    0.0000 C   0  0  0  0  0  0  0  0  0  0  0  0
    4.4603    1.1792    0.0000 C   0  0  0  0  0  0  0  0  0  0  0  0
    3.4818    1.3854    0.0000 C   0  0  0  0  0  0  0  0  0  0  0  0
    3.1711    2.3359    0.0000 C   0  0  0  0  0  0  0  0  0  0  0  0
    7.0052   -0.3828    0.0000 H   0  0  0  0  0  0  0  0  0  0  0  0
    7.0052   -3.0828    0.0000 H   0  0  0  0  0  0  0  0  0  0  0  0
    5.4476   -0.8319    0.0000 H   0  0  0  0  0  0  0  0  0  0  0  0
    5.5227   -2.8468    0.0000 H   0  0  0  0  0  0  0  0  0  0  0  0
    6.3111   -3.1044    0.0000 H   0  0  0  0  0  0  0  0  0  0  0  0
    6.3633    0.1098    0.0000 H   0  0  0  0  0  0  0  0  0  0  0  0
    5.7700    0.6421    0.0000 H   0  0  0  0  0  0  0  0  0  0  0  0
    8.1490   -0.3341    0.0000 H   0  0  0  0  0  0  0  0  0  0  0  0
    8.1490   -3.1315    0.0000 H   0  0  0  0  0  0  0  0  0  0  0  0
    4.1571    0.1413    0.0000 H   0  0  0  0  0  0  0  0  0  0  0  0
    4.7504   -0.3910    0.0000 H   0  0  0  0  0  0  0  0  0  0  0  0
    5.0741    1.2665    0.0000 H   0  0  0  0  0  0  0  0  0  0  0  0
    4.4808    1.7988    0.0000 H   0  0  0  0  0  0  0  0  0  0  0  0
    2.8680    1.2981    0.0000 H   0  0  0  0  0  0  0  0  0  0  0  0
    3.4612    0.7658    0.0000 H   0  0  0  0  0  0  0  0  0  0  0  0
    2.0000    3.1315    0.0000 H   0  0  0  0  0  0  0  0  0  0  0  0
  1  9  1  0  0  0  0
  1 10  1  0  0  0  0
  2 13  2  0  0  0  0
  3 16  1  0  0  0  0
  3 32  1  0  0  0  0
  4 16  2  0  0  0  0
  5  7  1  0  0  0  0
  5 13  1  0  0  0  0
  5 24  1  0  0  0  0
  6  8  1  0  0  0  0
  6 13  1  0  0  0  0
  6 25  1  0  0  0  0
  7  8  1  0  0  0  0
  7  9  1  0  0  0  0
  7 17  1  6  0  0  0
  8 10  1  0  0  0  0
  8 18  1  6  0  0  0
  9 11  1  1  0  0  0
  9 19  1  0  0  0  0
 10 20  1  0  0  0  0
 10 21  1  0  0  0  0
 11 12  1  0  0  0  0
 11 22  1  0  0  0  0
 11 23  1  0  0  0  0
 12 14  1  0  0  0  0
 12 26  1  0  0  0  0
 12 27  1  0  0  0  0
 14 15  1  0  0  0  0
 14 28  1  0  0  0  0
 14 29  1  0  0  0  0
 15 16  1  0  0  0  0
 15 30  1  0  0  0  0
 15 31  1  0  0  0  0
M  END

The structure draws with the alkyl hydrogens as circled in red in the image below, creating clutter for larger structures:

Is there a way to draw the structure without these alkyl hydrogens?

[partridgejiang]

The hydrogens explicitly stored in source file will be displayed in viewer or editor. You may manually clear them with the following code:

var mol = Kekule.IO.loadFormatData(data, Kekule.IO.DataFormat.MOL);
mol.clearExplicitBondHydrogens();

Note the clearExplicitBondHydrogens method only clears hydrogen atoms connected with simple single bond. The one connected with stereo bond (e.g., the ones with wedge bonds in your image) will be preservered to keep the stereo information.

[akulmehta]

I am on version 0.9.5.20022100 and I get an error in console:

Here is my code:

import {renderSingleMolecule} from './renderSingleMolecule.js';

function renderMolecules() {
  let molFiles = document.querySelectorAll('.mol_file');

  molFiles.forEach(molFile => {
    let id = molFile.dataset.id;
    let file = molFile.textContent;
    let mol = Kekule.IO.loadFormatData(file, Kekule.IO.DataFormat.MOL);
    mol.clearExplicitBondHydrogens();
    renderSingleMolecule(id, mol);
  })
}

renderSingleMolecule.js:

export function renderSingleMolecule(id = '', mol) {
  var renderType = Kekule.Render.RendererType.R2D//R3D  // do 2D or 3D drawing
  var is3D = (renderType === Kekule.Render.RendererType.R3D);

  // parent HTML element, we will draw inside it
  var parentElem = document.getElementById(`linkerstructurediv${id}`);
  let width = parentElem.style.width ?? '350px';
  let height = parentElem.style.height ?? '350px';
  // clear parent elem
  Kekule.DomUtils.clearChildContent(parentElem);

  var chemViewer = new Kekule.ChemWidget.Viewer(document);
  chemViewer.setDimension(width, height)
  .setEnableToolbar(false)
  .setAutofit(true)
  .setRenderType(Kekule.Render.RendererType.R2D)
  .appendToElem(parentElem).setChemObj(mol)

}

Any help is appreciated.

[partridgejiang]

The clearExplicitBondHydrogens method is introduced after version 0.9.5, please use the files in the /dist directory of this repo to overwrite the ones downloaded by npm manually, :).

[akulmehta]

Thanks it's working now. I thought it was a version issue but just didn't know there was a newer version as the release version in the repo still shows 0.9.3