Unable to run jupyter dash in Google Colab

[napsternxg]

I would like to run jupyter-dash in google colab. However, it is not possible to do so based on the example notebook.

Running the notebook I get a blank iframe.

When I followed the steps for embedding iframe of a flask app into colab notebook described at: https://stackoverflow.com/questions/54465816/how-to-use-flask-in-google-colaboratory-python-notebook

I get empty charts:

If I rerun the app without the mode="inline" I get the following error messages:

import IPython.display

def display_iframe(port, height):
    shell = """
        (async () => {
            const url = await google.colab.kernel.proxyPort(%PORT%, {"cache": true});
            console.log(`Adding ifram from URL:${url}`);
            const iframe = document.createElement('iframe');
            iframe.src = url;
            iframe.setAttribute('width', '100%');
            iframe.setAttribute('height', '%HEIGHT%');
            iframe.setAttribute('frameborder', 0);
            document.body.appendChild(iframe);
        })();
    """
    replacements = [
        ("%PORT%", "%d" % port),
        ("%HEIGHT%", "%d" % height),
    ]
    for (k, v) in replacements:
        shell = shell.replace(k, v)

    script = IPython.display.Javascript(shell)
    IPython.display.display(script)

[jonmmease]

Hi @napsternxg, thanks for giving the library a try. It's not surprising that this doesn't work out-of-the-box in Colab, but that google.colab.kernel.proxyPort trick is interesting. For Dash's callbacks to work properly, Dash needs to know the URL subpath that it will be accessed as. So you would probably need to customize the requests_pathname_prefix argument to the JupyterDash constructor. There's some info on that at https://dash.plotly.com/integrating-dash.

In order for the the URL printed out by run_server(mode='external') to be correct, I think you would also need to customize the server_url argument to match the colab's base URL.

[napsternxg]

Thanks.
The requests_pathname_prefix should not be an issue as the path prefix is always /.

I think the run_server(mode='external') is the right way, I was able to get the correct URL for the dash page after setting server_url equal to the colab URL.

Here is what I tried:

app = JupyterDash(
    __name__, 
    server_url=server_url,
    external_stylesheets=external_stylesheets
    )
## App code goes here.

app.run_server(mode='external') # This part prints the correct URL and the iframe shows the dash app at this URL. 

However, the earlier error still persists.

Looking at the network traffic, the error appears to be in this request (status code: 500):

This what the details of this request looks like:

[rdelubi]

New to Dash. I'm in similar situation where I would like to run jupyer-dash with Jupyterlab 2.1.2 in notebook hosted with JupyterHub running in Kubernetes.

As it’s hosted environment, launching dash with default configuration (localhost) would not work.

If a user launches Dash as “app = JupyterDash (name, server_url=xxx)” and then “app.run_server(mode=’external’)”, what should the server_url be set to? Would each user require a unique server_url in a hosted environment? Or can the server_url be a common one shared by multiple users?

And what kind of service need to run at the server_url? Any examples?

Thanks!

[jonmmease]

Hi @rdelubi,
This issue is specifically concerning Colab, because Colab isn't a standard Jupyter front-end. For regular JupyterHub, it should be enough to:

1. Make sure the jupyterlab-dash extension is built (https://github.com/plotly/jupyter-dash#jupyterlab-support)
2. Make sure jupyter_server_proxy is installed in the environment running the Jupyter server.
3. Call JupyterDash.infer_jupyter_proxy_config() at the top of the notebook. This uses the JupyterLab extension to detect the URL that JupyterLab is being accessed at (This is what server_url is), passes that info back to the Python library for use in configuring Dash.

If that doesn't work for you, could you open a new issue? Thanks!

[jonmmease]

Colab support added in #27 and released in version 0.3.0

[Nnamdi-sys]

Colab support added in #27 and released in version 0.3.0

It doesn't still work in Colab.

Gives the following error:
AttributeError: ('Read-only: can only be set in the Dash constructor or during init_app()', 'requests_pathname_prefix')

[fhk]

Same issue here.

Work around:

pip install dash==1.19.0 jupyter-dash==0.3.0 tornado==5.0.2

Waiting for updates....

[wjm41]

Same issue for me!

[alexcjohnson]

Does the workaround in plotly/dash#1907 (comment) solve this for dash 2.1 in Colab as well? We will have a fix for that issue out soon. (edit: using #75 (comment) as the main tracking issue here)