Dash in Jupyter - more seamless jupyter notebook integration

[lincolnfrias]

This answer in forum provides this function to do this using iframe:

from IPython import display
def show_app(app,  # type: dash.Dash
             port=9999,
             width=700,
             height=350,
             offline=True,
             style=True,
             **dash_flask_kwargs):
    """
    Run the application inside a Jupyter notebook and show an iframe with it
    :param app:
    :param port:
    :param width:
    :param height:
    :param offline:
    :return:
    """
    url = 'http://localhost:%d' % port
    iframe = '<iframe src="{url}" width={width} height={height}></iframe>'.format(url=url,
                                                                                  width=width,
                                                                                  height=height)
    display.display_html(iframe, raw=True)
    if offline:
        app.css.config.serve_locally = True
        app.scripts.config.serve_locally = True
    if style:
        external_css = ["https://fonts.googleapis.com/css?family=Raleway:400,300,600",
                        "https://maxcdn.bootstrapcdn.com/font-awesome/4.7.0/css/font-awesome.min.css",
                        "http://getbootstrap.com/dist/css/bootstrap.min.css", ]

        for css in external_css:
            app.css.append_css({"external_url": css})

        external_js = ["https://code.jquery.com/jquery-3.2.1.min.js",
                       "https://cdn.rawgit.com/plotly/dash-app-stylesheets/a3401de132a6d0b652ba11548736b1d1e80aa10d/dash-goldman-sachs-report-js.js",
                       "http://getbootstrap.com/dist/js/bootstrap.min.js"]

        for js in external_js:
            app.scripts.append_script({"external_url": js})

    return app.run_server(debug=False,  # needs to be false in Jupyter
                          port=port,
                          **dash_flask_kwargs)

This question on Stack Overflow provides further evidence of interest in this feature. So, I'm posting this here both as feature request and as a reference. Feel free to close this issue if you are already aware of this.

[yumyumz]

Is there any way to do this in purely offline mode (behind a corporate firewall)?

[chriddyp]

Is there any way to do this in purely offline mode (behind a corporate firewall)?

That should already work. The exception might be the CSS and JS assets (which are, by default, loaded from a CDN) but you can toggle those here: https://dash.plot.ly/external-resources

[chriddyp]

For reference, @GibbsConsulting has a project here: https://github.com/GibbsConsulting/jupyter-plotly-dash/

[chriddyp]

We're experimenting with a lightweight JupyterLab extension that:

• renders the Dash app in a JupyterLab tab as an iframe.
• runs the app in a separate process/thread to prevent the run_server call from blocking the kernel. It detects when the app has changed and then restarts the dash app.

One of the nice things about developing in Jupyter is that the data pre-processing steps are sort of "cached" in the initial cells. So, you can preserve a single cell for your app.layout and iterate pretty quickly.

We'll keep this thread updated with our progress

[erolosty]

Any way to make it work with hub?

[GibbsConsulting]

@chriddyp - Thanks for the mention. We've just pushed a new, albeit still prerelease, version.

[TiemenSch]

@chriddyp

We'll keep this thread updated with our progress

Is there a beta version we could try out?

[chriddyp]

We have open sourced this extension in this repo: https://github.com/plotly/jupyterlab-dash 🎉

[AlexCaranha]

Awesome! Thanks.

[xiaolulu2017]

Cool!

[therondcharles]

Hi,

I'm very interested in using dash in my jupyter lab.
The installation is just running fine:

However when it comes to import the package in jupyter it says module not found

Do you have any clue to solve this issue ?
( This is my first post, I tried my best)

Sincerly,
Charles.