Getting older javascript code to work with jupyter lab

[Christian Schafmeister]

How would I go about porting older javascript code to work with jupyter lab?

We are using some old javascript code that implements an editor for sketching molecular structures.

http://peter-ertl.com/jsme/

This editor can be embedded within web pages per the instructions on that website - but it's not modularized in the style of CommonJS.

I can embed this editor within a jupyter notebook output cell and sketch a molecule within it and make the output available to the jupyter notebook kernel.

https://i.imgur.com/d2I1LeM.png

I'd like to move to Jupyter lab - it looks fantastic! But I can't figure out how to get this molecular sketching javascript code to work with Jupyter lab.   Does anyone have any pointers - or can you tell me that it simply can't be done and we need javascript that is more modern?

This is the code that I use to hack this editor into a Jupyter notebook:

<script type="text/javascript" src="jsme/jsme.nocache.js"></script>
<script type="text/javascript">
function jsmeOnLoad() {
    //arguments: HTML id, width, height (must be string not number!)
    jsmeApplet12345 = new JSApplet.JSME("appletContainer12345", "640px", "400px", {
                     //optional parameters
                     "options" : "number,query,hydrogens,paste,zoom,atommovebutton,border"
    });
    var jme = `~A`;
    jsmeApplet12345.readMolFile(jme);
}
function onSubmit() {
    var drawing = jsmeApplet12345.molFile();
    // document.getElementById('jsme_smiles12345').value = drawing;
    var command = '(defparameter jsme::*sketch* "' + drawing + '")';
    console.log("Executing Command: " + command);
    var kernel = IPython.notebook.kernel;
    kernel.execute(command);
}
</script>
<table align="left" style="border: none;">
<tr style="border: none;">
<td id="appletContainer12345" style="border: none;"></td>
<td style="vertical-align: bottom; border: none;">
<button onclick="onSubmit()">done !</button>
</td>
</tr>
</table>

Best,

Christian Schafmeister,

Professor,

Chemistry,

Temple University

[Vidar Tonaas Fauske]

If I were you, I would look at making a MIME renderer extension.
Relevant resources:
 - Extensions docs (https://jupyterlab.readthedocs.io/en/stable/developer/extension_dev.html), particularly the chapter on MIME renderers (https://jupyterlab.readthedocs.io/en/stable/developer/extension_dev.html#mime-renderer-extensions)

 - The example PDF-renderer extension (https://github.com/jupyterlab/jupyterlab/tree/master/packages/pdf-extension)

 - The cookie-cutter for setting up boiler plate for such an extension (see https://github.com/jupyterlab/mimerender-cookiecutter/)

With this, you could register your extension as an editor for .mol files.

--
You received this message because you are subscribed to the Google Groups "Project Jupyter" group.
To unsubscribe from this group and stop receiving emails from it, send an email to jupyter+unsubscribe@googlegroups.com.
To post to this group, send email to jup...@googlegroups.com.
To view this discussion on the web visit https://groups.google.com/d/msgid/jupyter/446d1ab8-59f1-416b-9178-3272dba38473%40googlegroups.com.
For more options, visit https://groups.google.com/d/optout.