Enable Jupyter-Dash inline display to enhance the dashboard building experience

[jravenel]

It would give a better developper experience.

[jravenel]

Might have to create awesome-notebooks in the end @Dr0p42

[Dr0p42]

Setup and usage of jupyter-dash

The goal is to have Dash working inline in Jupyterlab instead of having to start the app and open a new tab to see what's going on.

There is a library named jupyter-dash that is supposed to do just that.

The result should look like this:

By going on the repository we can see that to install jupyter-dash we hust have to run pip install jupyter-dash but as we are on naas we have to run pip install --user jupyter-dash instead to have the installation being persistent between restarts.

It seems that we need to re build Jupyterlab to have everything working, so this means that we need to deploy a new release of naas embedding this Jupyterlab extension directly as users won't be able to do it themselves. (Only locally but it's not sufficient of course).

Updating Dockerfile.dev

First test to do is to update the .docker/dev/Dockerfile.dev in naas repo and run a make build then make run.

This line is here to install jupyter-dash and re build jupyter lab.

Ok so it seems like we have a newly built container 👍

Let's try it now

Running naas

make run

The app seems to be ready. Let's head to http://127.0.0.1:8888?token=naas

Testing jupyter-dash

In jupyter-dash's Github repo we can see that there is an example notebook here:

https://github.com/plotly/jupyter-dash/blob/master/notebooks/getting_started.ipynb

We will download it and run it.

The notebook is using port 8050 as we are running naas in Docker (at least I am), then we need to update the docker-compose.yaml and restart the container.

Ok so after looking at the notebook it seems that jupyter-dash lab extension is just to allow jupyter-dash to open a new tab when running the run_server function.

It's not what we want right now. So I am following the testing on app.naas.ai instead.

Debugging

I have some errors when running the run_server, everytime it is trying to load the app from 127.0.0.1:8050 which is not possible.

Not much luck by looking at the documentation. But I remember that we have a notebook about Dash in awesome-notebook that I already worked on here.

We can see that we have this cell to configure the Flask/Dash app

and we also have this proxy argument

So after updating this line in the example notebook

and adding the proxy

we can see that I still have the same error.

But by looking at the network console we can see that the requests_pathname_prefix is useful

So what we want to acheive is to let know the app that we are running on app.naas.ai and not 127.0.0.1:8050

After searching for a while, not much luck on the documentation, so I decided to look at the code of jupyter-dash and I saw this:

So I tried to give it a shot.

And Voila!

But I was wondering if the proxy parameter was still needed as Dash now knows that we are using app.naas.ai, so I removed it to see if I have a difference

And it's still working so that's good.

As I am using the variable DASH_PORT in requests_pathname_prefix I also decided to pass it to the app.run_server to be consistent.

Still working fine so I am happy with this.

Conclusion

So the only thing needed to run jupyter-dash on naass is to;

• Run pip install --user jupyter-dash
• Create a DASH_PORT = 8050 variable.
• Instantiate JupyterDash like so

  app = JupyterDash(__name__,  server_url="https://app.naas.ai" ,external_stylesheets=external_stylesheets, requests_pathname_prefix=f'/user/{os.environ.get("JUPYTERHUB_USER")}/proxy/{DASH_PORT}/')
  

• Call app.run_server(mode="inline", port=DASH_PORT) like so.

And you should be good 👍

[jravenel]

cc @Dr0p42 we just discussed this issue and would like to do a working session with you to understand the testing locally of this.

maybe with Ismail and Muhammed. Let's find time this week?

[jravenel]

This Issue is closed by PR on awesome-notebooks repo : jupyter-naas/awesome-notebooks#1143