using the Chem viewer widget to generate 2D structures from InChI

[tstone-1]

Hey,

Kekule.js is amazing and I'm wondering why haven't come across it earlier. Thank you for creating and maintaining Kekule.js! The procedure mentioned here using something like <span style="display:block" data-widget="Kekule.ChemWidget.Viewer2D" data-chem-obj="url(benzene.mol)" data-predefined-setting="static" data-auto-size="true"></span> is quite useful for me. However, it would be even better to generate the molecule from an InChI code like InChI=1S/C3H2Cl3F3/c4-1(7)3(6,9)2(5)8/h1-2H. Is this possible? I found that Kekule.js supports InChI, but couldn't find out how to do it.

Thank you for your help!

Best wishes

[partridgejiang]

Hi @tstone-1, the support of InChI (and the 2D coordinates generation) relies on a extra .wasm compiliation of OpenBabel. So to load InChI data, firstly you need to explicitly load the OpenBabel module and enable it in HTML/JavaScript code:

<script src="./kekule/kekule.js?modules=chemWidget,calculation,openbabel"></script>

Kekule.OpenBabel.enable(function(error){
  if (!error)
    // OpenBabel functions is now available
});

However, since the loading of external .wasm file is an asynchronous process, we do not know when the InChI format is available. Therefore we have to modify the auto-launch process of widget system a little, suspending it after the ready of OpenBabel module:

<script>
  Kekule.Widget.AutoLauncher.enabled = false;  // disable auto-launch of widgets at first
  Kekule.X.domReady(function(){
    Kekule.OpenBabel.enable(function(error){     // enable OpenBabel module
      if (!error)
      {
        Kekule.Widget.autoLauncher.execute(document.body);  // manually launch all widgets in page after InChI being available
      }
    });
  });
</script>

After that, in the HTML page, InChI data can be loaded in viewer widget as other data formats:

<script id="mol1" type="inchi">
InChI=1S/C3H2Cl3F3/c4-1(7)3(6,9)2(5)8/h1-2H
</script>
<div id="viewer1" data-widget="Kekule.ChemWidget.Viewer2D" data-chem-obj="url(#mol1)" data-predefined-setting="static"></div>

Even the data can set in attribute of viewer element rather than using an Githubissues.

Githubissues is a development platform for aggregating issues.