Unable to use javascript magic function

I am not able to use the jupyterhub magic functions in my notebook

Am I supposed to enable them? I thought it was already enabled? What’s strange to me is that I am able to run ruby code with the magic functions %%ruby

image

For a time, js outputs were disabled in JupyterLab. Unlike a display of server-executed code, or a output containing a picture, arbitrary javascript outputs are a pretty big deal, security-wise as it’s hard to anticipate what is going to draw some nice visualization and what is going to use the Jupyter API to read your files and send them to a third party.

So anyhow: there’s not a lot to go on (e.g. versions, extensions, etc.), but by default, %%javascript does work on more recent jupyterlab versions… but can be disabled. On JupyterHub, your administrator may have either disabled it, or built a custom jupyterlab that doesn’t even have that code.

2 Likes

I set up the jupyterhub instance and I didn’t do anything to disable it. How can I go about to enable it, since it seems like it’s not there? It seems like there’s no documentation on this
I tried to “trust” the notebook, but it still isn’t letting me run the js magic commands
jupyter trust /path/to/notebook.ipynb

Another question,
I’m working on my own custom ui for jupyter using the jupyterlab web-apis. Do you know if it’s possible to tell whether the code can recognize if i’m using a notebook or the lab? like something like this in one of the cells:

if <is jupyter notebook>:
    print("notebook")
elif <is jupyter lab>:
    print("lab")
else:
    print("Not in jupyter environment.")

the jupyterhub instance

Well, that’s slightly more information, I guess! Again, without knowing what version of lab (and or other extensions) you are running, it’s hard to know more: the output of jupyter labextension list would tell a lot.

no documentation

You may want to start at the top of the extensions section of the official docs. You might be able to track down whether it appears in disabledExtensions in the head of your UI.

whether the code can recognize if i’m using a notebook or the lab

A kernel might be able to, by fingerprinting the data/metadata of various requests. For example, execute-request messages from jupyterlab include the cellId in the metadata, while the notebook does not. However, other frontends (colab, cocalv, vscode, emacs, yadda, yadda) may or may not.

However, this (meta)data is often discarded by the time it gets to the user’s code. Here’s an example of a wrapper kernel using that data… it could just as easily update user_ns with some of that information.

1 Like

%%js is not an extension, at least, not as far as I have seen it documented anywhere. If it were, what is the name of this extension?

So the problem I’m having is that I can’t run %%js in my custom ui, but it works fine on the default jupyterlab and jupyter notebook classic. Javascript seems to be completely disabled on my custom ui for some reason.

Jupyter nbextension list

Known nbextensions:
  config dir: /opt/conda/etc/jupyter/nbconfig
    notebook section
      jupyter_dash/main  enabled 
      - Validating: OK
      jupyterlab-plotly/extension  enabled 
      - Validating: OK
      jupyter-js-widgets/extension  enabled 
      - Validating: OK
      plotlywidget/extension  enabled 
      - Validating: OK

jupyter labextension list:

JupyterLab v3.3.2
/opt/conda/share/jupyter/labextensions
        jupyterlab-plotly v5.6.0 enabled OK
        @jupyter-widgets/jupyterlab-manager v3.1.0 enabled OK (python, jupyterlab_widgets)

Other labextensions (built into JupyterLab)
   app dir: /opt/conda/share/jupyter/lab
        jupyterlab-dash v0.4.1 enabled OK

jupyter --version

Selected Jupyter core packages...
IPython          : 7.32.0
ipykernel        : 6.9.2
ipywidgets       : 7.7.0
jupyter_client   : 7.1.2
jupyter_core     : 4.9.2
jupyter_server   : 1.15.6
jupyterlab       : 3.3.2
nbclient         : 0.5.13
nbconvert        : 6.4.4
nbformat         : 5.2.0
notebook         : 6.4.10
qtconsole        : not installed
traitlets        : 5.1.1

what is the name of this extension?

Each of the different rich output types puts the minimum possible data on the wire, and the client is responsible for rendering it. So the kernel side is provided by IPython:
https://ipython.readthedocs.io/en/stable/interactive/magics.html?highlight=%%javascript#cellmagic-javascript

In jupyterlab, these are handled by mime renderer plugins, specifically the javascript-extension.

In this way, different kernels (i.e. Python and Julia and R) each only have to implement an agreed-upon, well known standard to get a predictable ouput in any number of kernels.

my custom ui,

You would have to implement rich display messages.

I think that I need to use this package somewhere in my ui:

Can you confirm? I don’t see any documentation on how to update my renderer

Without knowing more about your UI, it appears in the core of all the apps I know of:

It’s basically a fork of this GitHub - yuvipanda/simplest-notebook: A Jupyter Notebook frontend with simplest possible UI

Update: the problem was that the standardRendererFactories defined in rendermime library has a javascript factory with javascript disabled. I had to remove that factory and manually include the factory defined in the javascript-extension library (rendererFactory) in order for it to work.

Is there a better way? Ideally something like standardRendererFactoriesWithJS


Sadly, my ipywidgets are still broken, I was hoping that enabling js would make them work
image

On the console, I see: Exception opening new comm

Ideally

At this level, an implementation has to make the trade between ease of implementation and access to the rest of the ecosystem.

The provided links to the maintained applications of retro, core, and lite, all choose extensibility in return for some complexity. The archived simplest notebook example explicitly claims it does not want to be extensible.

I’m okay with having modifying the standardRendererFactories to get JS working. It just looks like there’s something that I’m not doing to get the ipywidgets working. They work on classic and lab ui, so I know the packages are installed and enabled

Widgets, too, are an extension: specifically, the widget manager plugin needs to gets loaded before trying to connect to widget comms.

A custom application could compile this directly… but this would be just the plumbing and base widgets, and no other custom widgets provided by extensions would work.

Meanwhile, an application that supports federated_extensions will be able to reuse any ecosystem extension that used the APIs conservatively (no DOM bashing, etc) and for which the application implemented enough of the API.

Thank you for all of the help, I’m trying to use the federated_extensions approach, so I can follow the jupyter best practices

When I do this on the console of my browser: const el = document.getElementById('jupyter-config-data');, I only see the keys&values that I’ve explicitly put onto my config_data dictionary, see this for clarification: jupyterlab/main.py at ffbb016cd8d072654d00285bf0404cafa627a476 · jupyterlab/jupyterlab · GitHub

But when I load the jupyterlab ui, and run the same JS command, I see a bunch of things in there. One of which is the federated_extensions key. So there must be something else missing on the demos