[BUG] FigureResampler show_dash in JupyterLab fails to display plot

[miloaissatu]

Describe the bug 🖍️

A clear and concise description of what the bug is.

Plotly-resampler figureresampler fails to load dash figures in a jupyterhub+jupyterlab on kubernetes (i.e. z2jh) environment. With jupyterhub on kubernetes, user notebook servers are spawned as pods and user access to those servers are proxied via jupyterhub.

Dash requires requests_pathname_prefix on init() and jupyter_server_url on run for it to display inline or provide correct link for external display. show_dash_kwargs is only passed to dash on run() and not init() so end result is it doesn't work.

Reproducing the bug 🔍

Please provide steps & minimal viable code to reproduce the behavior.
Giving this information makes it tremendously easier to work on your issue!

Snippet taken from plotly_resampler_basic_example.ipynb, main difference is adding extra dash kwargs for it to work in jupyterhub+jupyterlab on kubernetes behind jupyterhub proxy.

import pandas as pd
import numpy as np
import plotly.graph_objects as go
from plotly.subplots import make_subplots

import sys

# BEGIN Additional portion for jupyterhub
import os
import plotly.io as pio
pio.renderers.default = 'iframe' # or 'colab' or 'iframe' or 'iframe_connected' or 'sphinx_gallery'
port = 7004
service_prefix = os.getenv('JUPYTERHUB_SERVICE_PREFIX', '/')
domain = os.getenv('JUPYTERHUB_HTTP_REFERER', "https://<my jupyterhub domain>")
requests_pathname_prefix=f"{service_prefix}proxy/{port}/"
show_dash_kwargs={"requests_pathname_prefix":requests_pathname_prefix}
# END additional portion for jupyterhub

sys.path.append("..")
from plotly_resampler import FigureResampler, FigureWidgetResampler, EveryNthPoint
from plotly_resampler.aggregation import NoGapHandler, MedDiffGapHandler

n = 2_000_000
x = np.arange(n)
noisy_sine = (3 + np.sin(x / 2000) + np.random.randn(n) / 10) * x / (n / 4)
fig = FigureResampler(go.Figure(),show_dash_kwargs=show_dash_kwargs)
fig.add_trace(go.Scattergl(showlegend=True), hf_x=x, hf_y=noisy_sine, max_n_samples=300)
fig.add_trace(dict(x=x, y=noisy_sine + 1, name='sp1'), max_n_samples=2000)
fig.show_dash(mode="inline",jupyter_server_url=domain,port=port)

Expected behavior 🔧

Please give a clear and concise description of what you expected to happen.

Ability to pass kwargs to dash.Dash() init() and run() so that plot can display correctly in 'inline' or 'external' modes.

See workaround section for suggestion.

Screenshots 📸

If applicable, add screenshots to help explain your problem.

Without workaround

With workaround/suggested solution

Environment information: (please complete the following information)

• OS: Rocky Linux release 8.8 (Green Obsidian) kernel 5.14.0-284.30.1.el9_2.x86_64
• Python environment:
  • Python version: 3.11.6
  • plotly-resampler environment: JupyterLab, tested with Chrome/Edge but problem should be browser agnostic
• plotly-resampler version: 0.9.1

# pip3 freeze |egrep -i "jupy|dash|plotly"
dash==2.14.0
dash-core-components==2.0.0
dash-html-components==2.0.0
dash-table==5.0.0
jupyter_client==8.4.0
jupyter_core==5.4.0
jupyterlab-widgets==3.0.9
jupytext==1.15.2
plotly==5.17.0 #have also tried with 5.18.0
plotly-resampler==0.9.1

Workaround / Solution
Allow passing through kwargs to dash init.

Replace app = dash.Dash("local_app") with app = dash.Dash("local_app",**self._show_dash_kwargs) in plotly_resampler/figure_resampler/figure_resampler.py

Example one liner sed to do code replacement

sed -i 's/app = dash.Dash("local_app")/app = dash.Dash("local_app",**self._show_dash_kwargs)/g' ..../plotly_resampler/figure_resampler/figure_resampler.py

Might be cleaner to have a dash_kwargs in addition to show_dash kwargs though.

Additional context
Side note, I can't get other modes to work

• figureresampler + inline_persistent -> I don't have jupyter-dash installed since dash 2.11+ natively supports jupyterlab (expected)
• figurewidgetresampler + any mode -> get a javascript error indicating it fails to load model class from jupyter-plotly

[jonasvdd]

Hi @miloaissatu,

First and foremost, thank you so much for providing a highly detailed description of this issue! 🤝

I suppose, as how you've described this issue, that by adding the "show_dash_kwargs" and "init_dash_kwargs" variables to the show_dash method of the FigureResampler, this issue can be overcome? I added this to my backlog and aim to tackle this issue in a new branch which I will reference here somewhere this week, I'll keep you posted!

However, as I do not have a K8s jupyterhub test setup (and I guess it will take me quite some time to get this set up), I would highly appreciate it if you could aid me in providing (i) some documentation and/or (ii) an "JupyterHubFigureResampler" subclass for this environment.

Kind regards,
Jonas

[miloaissatu]

"'JupyterHubFigureResampler' subclass for this environment." I'm not quite sure what this entails, could you elaborate? :)

in terms of documentation, went and did abit more digging and these are relevant

1. brief mention of steps to use dash/jupyterdash in jupyterhub on kubernetes in this specific comment , the rest of the issue thread isn't too relevant. The jupyterdash project example notebook also has these steps https://github.com/plotly/jupyter-dash/blob/a18b3d2b29d34f0673938be956d85bac0a38c20f/notebooks/getting_started.ipynb
2. Looking into how jupyterdash handles it
   • jupyterdash has infer_jupyter_proxy_config -> _request_jupyter_config that sends base_url_request.
     • I believe its able to get the base_url where the client session is accessing the jupyter env/notebook from through its paired jupyterlab-dash frontend plugin, and that its otherwise not possible purely from a backend/python perspective since that all looks like localhost.
   • It then sets JupyterDash.default_requests_pathname_prefix to base_url +'/proxy/{port}/' and uses it in its init and run methods, similar to dash.Dash.
     • sidenote - now that i dig in to it, looks like there is an env var i could have set to achieve the same result: https://github.com/plotly/jupyter-dash/blob/a18b3d2b29d34f0673938be956d85bac0a38c20f/jupyter_dash/jupyter_app.py#L50
   • by doing this its able to resolve to the correct url for the client to display the plot/app
   • a note on the jupyterdash page says dash 2.11 has this functionality natively, looks like its here. They've also updated this page since i've last looked at it. I suspect that it might still need jupyterlab-dash frontend plugin, i tried without the plugin in my env and got an error