[Question] How to make "Kekule.Indigo.enable();" faster or enable it simultaneously

test-user-18 commented 6 years ago

I would like to show SMILES in 2D on a web browser, and found Kekule.js.

I wrote this code below and I was able to do what I wanted.

html

<!DOCTYPE html>
<html>
  <head>
    <title>Test</title>
    <meta charset="utf-8" />
    <script src="https://ajax.googleapis.com/ajax/libs/jquery/3.2.1/jquery.min.js"></script>
    <script src="js/kekule/kekule.js?modules=chemWidget,openbabel,indigo"></script>
  </head>
  <body>
    <p>This is a test.</p>
    <textarea placeholder="Please insert text."></textarea>
    <div id="kekule">
    </div>
    <script src="js/script.js"></script>
  </body>
</html>

Javascript

Kekule.Indigo.enable();

$(window).on('load', function () {
  chemViewer = new Kekule.ChemWidget.Viewer(document.getElementById('kekule'));
  var smi = "CCN(c1cc(C)ccc1C)S(=O)(=O)c1cc(C(N)=O)n(C)c1";
  var mol = Kekule.IO.loadFormatData(smi, "smi");
  chemViewer.setChemObj(mol);
});

However, it seems that it takes a long time to enable Kekule.Indigo, and I cannot type anything into textarea until it is loaded.

If you know how to make it enable faster or load it simultaneously, please let me know.

Thank you.

test-user-18 commented 6 years ago

It seems that this only happens on Chrome.

My Computer Environment

iMac (macOS High Sierra (Version 10.13.4))
Google Chrome Version 66.0.3359.117 (Official Build) (64-bit)

Repro Steps

I have found that this issue happens on one of the demos as well. Here are the steps to reproduce the issue:

Open the demo page. http://partridgejiang.github.io/Kekule.js/demos/demoLauncher.html?id=chemViewer2D or http://partridgejiang.github.io/Kekule.js/demos/items/chemViewer/chemViewer2D.html
Make sure that you can drag the small molecule on the screen.
Click "Enable Indigo Plugins."
Try to drag the small molecule.

Then, you will see that you will not be able to drag it for a while (about 30 seconds).

Different browsers on different OS

I have tried on different browsers on different machines, and it seems that it only happens on Chrome. I tried on Firefox and Safari on my machine and they do not have the issue:

Firefox Quantum 59.0.2 (64-bit)
Safari Version 11.1

I also tested on other browsers on other OS, and I found that Chrome on Windows has the same issue.

Conclusion

I found a way to work around this (use mol instead of SMILES). So, I am just letting you know what I found.

Thank you.

partridgejiang commented 6 years ago

@test-user-18 Thanks a lot for your feedback. The Indigo module is actually an asm.js file generated by Emscripten. The long-time block of browser UI seems to be caused by the compiling process of asm.js codes in Chrome. The problem may be avoided by regenerate the Indigo module to WebAssembly directly, and we may do that in the near future.

test-user-18 commented 6 years ago

Thank you for letting me know. We look forward to your update. We have been using Kekule.js for our research, and it has been working great. Thank you very much!

rmrmg commented 6 years ago

@partridgejiang: I have seen big performance enhancement in changelog. Have you fixed this issue?

partridgejiang / Kekule.js