0

EDITED to (I hope) clarify

I'm trying to enhance one of my tools by adding the JSME editor (https://jsme-editor.github.io/) in a ipynb that I render in a Voila dashboard.

Working directly on the ipynb in JupyterHub, I manage to display the widget and use it. It works perfectly, I can run commands with the button (e.g. in code below, I get the SMILES from the drawing and then change the widget value with that SMILES). I can also create other javascript functions that I link to ipywidgets buttons and that does what I want.

Limitations: It only works if I use the url "http://ipaddress/user/myname/tree/JSMapp/JSME_2022-09-26/jsme/jsme.nocache.js". Any other path (relative, absolute path) from the server does not work. It's OK like this, but then I have two problems:

Problem 1:

When I render the ipynb with Voila (clicking on the "voila" button in my notebook), the widget is displayed and I can use it... BUT, any actions through buttons does not work. Same if I create a Voila dashboard through the control panel.

Problem 2:

If I share the Voila dashboard, the widget is displayed ONLY if my jupterhub server is started. (Commands still don't work). If my server is not started, the user only sees the html button defined in the code below.

I've tried to place the jsme js in different other folders, but I still face the same error. Adding *.js in the whitelist did not solve the issue(s) either.

I'd like to find a way to display the widget even if my server is not started, and also be able to fully interact with it to run scripts.

Here is the code (full version) that I use and that should give the same errors pointed above.

import ipywidgets as widgets
from IPython.display import display, Javascript, HTML

def jsme_widget():
 # Load JSME applet
        
    jsme_script = """
    <script type="text/javascript" src="http://ipaddress/user/myname/tree/JSMapp/JSME_2022-09-26/jsme/jsme.nocache.js"></script>
    <script type="text/javascript">
    function jsmeOnLoad() {{
        //arguments: HTML id, width, height (must be string not number!)
        jsmeApplet = new JSApplet.JSME("appletContainer", "640px", "400px", {{
                         //optional parameters
                         "options" : "number,query,hydrogens,paste,atommovebutton,border,fullScreenIcon,contextmenu, nozoomgui"
        }});
        var jme = `~A`;
        jsmeApplet.readMolFile(jme);
    }}
    function onSubmit() {{
        var drawing = jsmeApplet.smiles(); // Get the SMILES string
        var command = 'smiles = "' + drawing + '"';
        console.log("Executing Command: " + command);
        var kernel = IPython.notebook.kernel;
        kernel.execute(command);
        var command2 = 'text_widget.value = smiles';
        console.log("Executing Command 2: " + command2);
        kernel.execute(command2);
    }}
    </script>
    <table align="left" style="border: none;">
    <tr style="border: none;">
    <td id="appletContainer" style="border: none;"></td>
    <td style="vertical-align: bottom; border: none;">
    <button onclick="onSubmit()">done !</button>
    </td>
    </tr>
    </table>
    """
    return HTML(jsme_script)

#For the axample, create and fill a text widget
text_widget = widgets.Text(description="SMILES:")
display(text_widget)

#Display the JSME widget
jsme_w = jsme_widget()
jsme_w

For it to work, one have to download the JSME this address: https://github.com/jsme-editor/jsme-editor.github.io/tree/main/downloads/

Pepimouth
  • 1
  • 1
  • I'm seeing inconsistent information here. For example your post states, "I also manage to display it in Voila." Then the very next paragraph states, "If I make a voila dashboard from this notebook, the widget is no longer displayed." It's hard to understand what you are asking here. Your title focuses on 'display' but your text at one point says that works. And.... Is the block of code from the one that works or not? And if one works, you should post that, or a least link to it posted as a gist, to help others understand the differences. – Wayne Aug 08 '23 at 17:32
  • Thanks for pointing this, I'll see to rephrase – Pepimouth Aug 08 '23 at 21:03
  • Hope it is more clear now :) – Pepimouth Aug 10 '23 at 14:50
  • At Stackoverflow, you are supposed to focus on a specific problem and not multiple ones in a single post. What is your single posted code block meant to illustrate. Problem 1 or 2? If it is number 1 then it is obvious. You haven't built in anything to communicate to the ipywidgets which is what Voila uses to run. You need to be using ipywidgets for Voila and compatible widgets and communication. There is [appmode](https://github.com/oschuett/appmode), which offers a simpler system. I wonder if your code would work there 'as-is'? – Wayne Aug 10 '23 at 14:59
  • Thanks for your answer. We'll try to find other solutions. Looks like part of the problem is that Voila doesn't accept IPython commands in JS. I'm rather new to this, so sorry for not being so clear. – Pepimouth Aug 15 '23 at 11:14
  • If that isn't your post, you may be interested in seeing if anything good gets answered for [this](https://discourse.jupyter.org/t/help-creating-comm-between-javascript-and-python-using-voila/20916?u=fomightez). – Wayne Aug 15 '23 at 18:34
  • 1
    This is not mine :) Thanks for the reference – Pepimouth Aug 15 '23 at 18:43

0 Answers0