Load molecule into viewer using Smiles

[mrcrittall2016]

Hi guys,

Just been reading the tutorial and nearly all the examples I can find of Kekule.IO.loadFormatData() uses the 'cml' type. I was wondering, is it possible to use the 'smi' type to load data into the viewer?

For example, I have a smiles string as follows:

var smiles = "C2=Cc1ccccc1C2";

However, when I use:

var mol = Kekule.IO.loadFormatData(smiles, 'smi');

I receive an error message saying "Can not read data of format: smi"

How does one get around this?

Kind Regards

[partridgejiang]

Hi,

Currently the toolkit is capable of outputting SMILES. However, as we still lack a 2D diagram module, SMILES as input is currently disabled. And aside from CML, data in MOL2000/3000. SDF and JSON formats are all with built-in supports.

[hsiaoyi0504]

Is this issue resolved?

[partridgejiang]

Not yet... please stay tuned.

[sjdv1982]

Works for me with the current version (using Kekule.Indigo.enable() ) ... as long as I don't try to parse SMILES before the window is loaded.

[AaronLlanos]

Hey @sjdv1982 can you paste an example of how you got SMILE strings to work? Having some trouble with that and also can't find great documentation on it on the site.

[sjdv1982]

@AaronLlanos : sure, there you go: https://gist.github.com/sjdv1982/955cd983c05a9d252d1fdeea3a803962

[AaronLlanos]

Huh, thanks for sharing @sjdv1982 ! I have a similar setup with React that renders the DOM, THEN Kekule 2D Painter. I unfortunately never get to setting up the painter though because it crashes on the smile parsing sigh. For anyone else wondering a alternative solution, I am using a 3rd party npm library called openchemlib to parse my SMILE strings into molfile format. Then loading that into the Painter.

[rmrmg]

@sjdv1982 Thx for sharing! I realized that kekule has problem with aromatic rings (with small letter) Have you observed similar problem? Do you have any idea how to solve it (now I convert notation from aromatic to conjugated eg. c1ccccc1 -> C1=CC=CC=C1)

@AaronLlanos : Could you share you code to convert smiles into molfile?

[sjdv1982]

@rmrmg That would be an Indigo bug, I think? Sorry, I don't know much of SMILES itself...

[AaronLlanos]

@rmrmg heres a small example:

const {Molecule} = require('openchemlib')
const molfile = Molecule.fromSmiles('smile_string_here').toMolfile()
const mol = Kekule.IO.loadFormatData(molfile, 'mol')
this.chemViewer.setChemObj(mol)

[partridgejiang]

@rmrmg It's a Indigo issue. Indigo always parses aromatic rings to a series of explicit aromatic bond. For example, if the input is c1ccccc1 (benzene), Indigo will output the following MOL 2000 format connection table:

  6  6  0  0  0  0  0  0  0  0999 V2000
    8.8555   41.6405    0.0000 C   0  0  0  0  0  0  0  0  0  0  0  0
    9.5483   41.2405    0.0000 C   0  0  0  0  0  0  0  0  0  0  0  0
    8.1627   41.2405    0.0000 C   0  0  0  0  0  0  0  0  0  0  0  0
    9.5483   40.4405    0.0000 C   0  0  0  0  0  0  0  0  0  0  0  0
    8.1627   40.4405    0.0000 C   0  0  0  0  0  0  0  0  0  0  0  0
    8.8555   40.0405    0.0000 C   0  0  0  0  0  0  0  0  0  0  0  0
  1  2  4  0  0  0  0
  1  3  4  0  0  0  0
  2  4  4  0  0  0  0
  3  5  4  0  0  0  0
  4  6  4  0  0  0  0
  5  6  4  0  0  0  0
M  END

Note the all bond orders are set to 4, not conjugated 1 and 2. Then when displaying, Kekule.js paint those bonds in a uncommon way (although still correct in structure).

[sergsb]

Hi, is there any progress with reading smiles? All other formats are extremely inconvenient for processing data in a browser.

[partridgejiang]

@sergsb Quite sorry that it has not been implemented. Anyway, enable the extra module Indigo gives the ability to read SMILES in Kekule.js, as sjdv1982 have mentioned:

Works for me with the current version (using Kekule.Indigo.enable() ) ... as long as I don't try to parse SMILES before the window is loaded.

[rmrmg]

@partridgejiang: Is there any progress with slow loading of indigo under Chrome (https://github.com/partridgejiang/Kekule.js/issues/61)?

[CristianoYL]

Just want to follow up on this issue. I'm wondering if there is any recommended solution for loading from SMILES? It seems that using using Kekule.Indigo.enable() requires quite a few hacks with the current release.

[partridgejiang]

Hi @CristianoYL, in recent releases, the Indigo module can be used as normal. Please check the latest files from the dist directory? Another way to load SMILES in the latest dist is using OpenBabel module, e.g.:

Kekule.OpenBabel.enable(function(error){
  if (!error)
  {
    var smiles = 'c1ccccc1';
    var mol = Kekule.IO.loadFormatData(smiles, 'smi');
    // the molecule loaded from SMILES by OpenBabel has no coordinates for atoms, and you can generate them manually
    var generator = new Kekule.Calculator.ObStructure2DGenerator():
    generator.setSourceMol(mol);
    generator.executeSync(function() {
       var newMol = generator.getGeneratedMol();                       
       console.log(newMol);                     
    });
  }
});

[CristianoYL]

@partridgejiang Thanks for the reply. I tried replacing the dist from this repo and it threw an error.

scheduler.development.js:171 Uncaught TypeError: Cannot read property 'Composer' of undefined
    at kekule_composer.js:26
    at invokePassiveEffectCreate (react-dom.development.js:23487)
    at HTMLUnknownElement.callCallback (react-dom.development.js:3945)
    at Object.invokeGuardedCallbackDev (react-dom.development.js:3994)
    at invokeGuardedCallback (react-dom.development.js:4056)
    at flushPassiveEffectsImpl (react-dom.development.js:23574)
    at unstable_runWithPriority (scheduler.development.js:646)
    at runWithPriority$1 (react-dom.development.js:11276)
    at flushPassiveEffects (react-dom.development.js:23447)
    at react-dom.development.js:23324
    at workLoop (scheduler.development.js:590)
    at flushWork (scheduler.development.js:545)
    at MessagePort.performWorkUntilDeadline (scheduler.development.js:157)

when I'm trying to initialize the composer:

const _composer = new Kekule.Editor.Composer(composerRef.current);                

And there's an warning in the console:

./node_modules/kekule/dist/kekule.js
Critical dependency: require function is used in a way in which dependencies cannot be statically extracted

The code was working with the original npm version. I also tried specifying the path to the kekule.min.js as suggested in some other threads, but had no luck. This is how I tried to import the module.

import Kekule from 'kekule';
// import Kekule from 'kekule/dist/kekule.min.js';  // tried both

Please let me know if you have any suggestions. Thanks.

[partridgejiang]

Hi @CristianoYL, please change the import statement to:

import { Kekule } from 'kekule';

then have another try?

[CristianoYL]

Hi @partridgejiang, thanks for the suggestion. I can import Kekule using your suggestion now. But I still cannot enable Indigo or OpenBabel.

I tried enabling them as suggested and just print out a string regardless of error, but it never reached the callback.

Kekule.Indigo.enable(function (error) {
    console.log('test1');
});
Kekule.OpenBabel.enable(function (error) {
    console.log('test2');
});

And I got corresponding (indigo/openbabel) Uncaught SyntaxError in the console.

react_devtools_backend.js:2430 ./node_modules/kekule/dist/kekule.js
Critical dependency: require function is used in a way in which dependencies cannot be statically extracted

indigo.js:1 Uncaught SyntaxError: Unexpected token '<'
openbabel.js:1 Uncaught SyntaxError: Unexpected token '<'

I also tried loading from SMILES after the enable line, and it threw an error (Can not read data of format: smi) so the module are not enabled indeed.

Please let me know if you have any idea. Thanks!

[partridgejiang]

Hi @CristianoYL, it seems that the wasm files of Indigo and OpenBabel are not properly transferred by your server. Please open the developer tools of the browser and check the responses of indigo.wasm/openbabel.wasm requests in the network tab. From the error message, it seems an HTML error page is returned rather than the normal wasm file content. If the response are not correct, you may have to configure the mime type settings of your web server.

[CristianoYL]

Hi @partridgejiang, thanks for the reply.

I'm only running it locally at the moment, so it's probably not due to server configuration. I checked the dev tools and can see indigo/openbabel .js requests, not sure if it's relevant to the .wasm request you mentioned.

As loading from SMILES should be a rather common use case, I'm wondering if there's an easier way to make it work? It would be great to have it available in the stable release.

As you mentioned a while ago:

Currently the toolkit is capable of outputting SMILES. However, as we still lack a 2D diagram module, SMILES as input is currently disabled.

I'm wondering if this assumption still holds. It would be nice to have Indigo or OpenBabel enabled by default.

[partridgejiang]

Hi @CristianoYL, does running locally means using the file:/// protocol to load the HTML page and JavaScript files? In such a case, for security reasons, the browser will reject to load web assembly files (.wasm) and the Indigo or OpenBabel modules will surely fail to run. When running under with a web server, the Indigo or OpenBabel modules will be loaded in the following way:

• Kekule.js requests to load the glue .js file(indigo.js/openbabel.js)
• The glue .js then requests to load web assembly file (indigo.wasm/openbabel.wasm)
• For Indigo, an additional adapter js file(indigoAdapter.js) is also be requested by Kekule.js

So in the network tab of browser developer tool, you may find the following loading sequence:

Currently Kekule.js still lacks the native support of 2D diagram. And there is also no plan to load those wasm modules by default in recent releases. The reason is quite simple: for the large file sizes. You may notice that the size of Indigo.wasm or openbabel.wasm is 5MB+ each, more than twice of kekule.min.js (about 2MB). Including them may cause performance problems over Internet and we prefer to provide them as optional modules.

[CristianoYL]

@partridgejiang Thanks again for your reply. I'm running a react app locally. It's a local server so it basically behaves the same as a real server. And I didn't see those requests you mentioned. At this point, I'm afraid it's too much of a hassle to do a simple thing. For anyone running into the same issue, what I end up doing is to make an API call to the backend instead, where I make use of the rdkit library to convert the smiles string to a mol string, and then let kekule load from the mol string in the frontend.