How to include a functional JSME (chemical editor) widget in a Voila dashboard and run commands?

Question

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/