Merge JupyterDash with Dash

[T4rk1n]

Merge JupyterDash functionality in dash to render dash apps in jupyter notebooks.

Simply run app inside a jupyter cell to render automatically on the cell output:

Changed from jupyter dash

• Default display mode changed to inline.
• Add mode tab, automatically open the app in a new browser tab.
• Set the default mode and inline exception options on the jupyter_dash instance:

from dash import jupyter_dash

jupyter_dash.default_mode = "external"
jupyter_dash.inline_exceptions = False

[janosh]

Exciting work! Thanks @T4rk1n, looking forward to using this.

[alexcjohnson]

This is currently published to npm as jupyterlab-dash - is that published version used for anything? Is there a reason to change its name and scoping here?

[T4rk1n]

It uses the tar bundle included in the Python package, that needs to be built the first time you open jupyterlab. Not sure if the npm package is used for anything, the jupyterlab docs says it can be directly to jupyterlab with npm but I am not sure the user really want to do that. https://jupyterlab.readthedocs.io/en/latest/extension/extension_tutorial.html#publishing-your-extension

I changed the name to avoid conflict if jupyter-dash is installed.

[alexcjohnson]

Do we need this in the main namespace? Will users ever need to use it directly?

[T4rk1n]

I moved some options previously in JupyterDash .__init__ or run to be globally settable on the jupyter_dash instance.
You can change the default mode with jupyter_dash.default_mode and disable exception inlining jupyter_dash.inline_exceptions = False.

[alexcjohnson]

cc @LiamConnors to make sure these options get documented

[alexcjohnson]

💃 just a style point #2530 (comment), this looks great!

[MP-MaximilianLattka]

Is an additional extension required to be able to open dash as a jupyterlab-tab?

On a clean setup, I'm trying app.run(jupyter_mode="jupyterlab") without success. To clarify, I'm not running jupyter-lab v3, but already v4.

https://dash.plotly.com/dash-in-jupyter#display-modes

I'm uncertain whether to open an issue for my concern.

[Coding-with-Adam]

hi @MP-MaximilianLattka
We highlight recommend using Dash 2.11 or higher with JupyterLab 3. We have encountered a few issues running Dash with JupyterLab version 4.

[bjlittle]

Hi @Coding-with-Adam,

As @MP-MaximilianLattka mentions above, I'm also having similar issues with dash and the jupyter_mode="jupyterlab" mode, which executes but doesn't open a new tab.

I've simply been attempting to get the minimal dash app to work in this mode, but sadly to no avail.

I've pinned back jupyterlab<4 but this makes no difference.

Can you recommend a combination other than conda create -n dash -c conda-forge dash pandas "jupyterlab<4" that will work for the minimal dash app and for the jupyter_mode=jupyterlab mode?

Many thanks

P.S., Are there other similar live issues that you know of that I can track to monitor progress on this?

[Coding-with-Adam]

This might be a bug.
@T4rk1n can you please take a quick look? I installed Jupyterlab 3 and ran the app code below. All jupyter modes work except for the jupyter_mode="jupyterlab" . Even after I restart the kernel, it doesn't do anything. It remains stuck as if the code cannot be executed.

from dash import Dash, html, dcc, callback, Output, Input
import plotly.express as px
import pandas as pd

df = pd.read_csv('https://raw.githubusercontent.com/plotly/datasets/master/gapminder_unfiltered.csv')

app = Dash(__name__)

app.layout = html.Div([
    html.H1(children='Title of Dash App', style={'textAlign':'center'}),
    dcc.Dropdown(df.country.unique(), 'Canada', id='dropdown-selection'),
    dcc.Graph(id='graph-content')
])

@callback(
    Output('graph-content', 'figure'),
    Input('dropdown-selection', 'value')
)
def update_graph(value):
    dff = df[df.country==value]
    return px.line(dff, x='year', y='pop')

if __name__ == '__main__':
    app.run(jupyter_mode="jupyterlab")

[bjlittle]

@Coding-with-Adam Also, you'll notice that once you start the app, no jupyter tab is opened, but you can hit the URL of the app in another browser window and it connects and renders.