Plotly Dash host/proxy issue in SageMaker

[austinmw]

Hi, is it possible to use Plotly's Dash framework in a SageMaker notebook (standard or lab)? Dash offers 3 different modes, inline (in cell), external (new tab), and jupyterlab (new frame), but I've been unsuccessful in deploying all three. I suspect there's a compatibility issue with the proxy address SageMaker uses, but have not been able to get to the root of the issue.

Code example:

import plotly.express as px
from jupyter_dash import JupyterDash
import dash_core_components as dcc
import dash_html_components as html
from dash.dependencies import Input, Output

# Load Data
df = px.data.tips()

# Build App
app = JupyterDash(__name__)
app.layout = html.Div([
    html.H1("JupyterDash Demo"),
    dcc.Graph(id='graph'),
    html.Label([
        "colorscale",
        dcc.Dropdown(
            id='colorscale-dropdown', clearable=False,
            value='plasma', options=[
                {'label': c, 'value': c}
                for c in px.colors.named_colorscales()
            ])
    ]),
])
# Define callback to update graph
@app.callback(
    Output('graph', 'figure'),
    [Input("colorscale-dropdown", "value")]
)
def update_figure(colorscale):
    return px.scatter(
        df, x="total_bill", y="tip", color="size",
        color_continuous_scale=colorscale,
        render_mode="webgl", title="Tips"
    )
# Run app and display result inline in the notebook
app.run_server(mode='inline')

Dash has a large community, and the ability to design python-native interactive dashboards for model evaluation and other use cases I believe makes this worth finding a solution for.

[kjsr7]

@austinmw Have you found a solution for this?

[emfashenpour]

@austinmw I have been trying to figure this out as well, have you found a solution or work-around?

[agt64]

Agree...having difficulty running Dash in sagemaker as well and think its related to proxy IP addresses. Thought running it in in a regular jupyter notebook would help, but its not. I'm going to have to move my development outside sagemaker unless anyone has suggestions!

[LegendMichalisPalaiokostas]

January 2023, this is still an issue for JupyterLab v3 sessions in AWS Sagemaker.

[thomaskelm]

@austinmw if you are still hitting this issue, one workaround is to set the following parameter requests_pathname_prefix to be equal to /proxy/*port-number* in your JupyterDash object (or Dash more generally).

To expand on why it is stuck on loading, since Dash is a react based app and it loads most of the visuals after the page has already loaded. When it is trying to load the visuals (through other API calls to dash), it is looking for those artifacts at the root of the sagemaker instance (which sagemaker won't allow/ isn't expecting). So you need to set the requests pathname prefix to essentially make all of those artifacts go through the proxy.

As a concrete example of what is happening:

before you change the requests path it was trying to pull a javascript library called foobar.js from this url: https://sagemaker-url.sagemaker.aws/foobar.js

but it should be using this url: https://sagemaker-url.sagemaker.aws/proxy/*port-number*/foobar.js

this is what it would look like for the default port config when you define your app.

app = JupyterDash(__name__ , requests_pathname_prefix='/proxy/8050/')