Black Lives Matter. Please consider donating to Black Girls Code today.
Dash HoloViews is now available! Check out the docs.

dcc.Location Error Loading Dependencies

Hello,

I am getting an “Error loading dependencies” in my browser trying to use the URL components.

app = dash.Dash()
app.config.supress_callback_exceptions = True

app.layout = html.Div(children=[

    dcc.Location(id='url', refresh=False),
    dcc.Link('Player', href='/player'),
    html.Br(),
    dcc.Link('Match', href='/match'), ...

If I comment out dcc.Location() then I do not get the error - my dcc version is 0.7.1.

Do you know why I might be getting this error?

Thanks

Hey @edbduck - Hm, I’m not sure what’s going on here. This “works for me”. Could you open your browser’s dev tools and copy and paste a screenshot of the console? It’ll look something like


there might be an error message hidden in there somewhere.

Thanks for the quick reply. This is the first part of my browser console error log:

Thanks! Not sure what that could be. Could you also try taking a screenshot of the “Network” tab and see if there are any 403 or 500 level errors? This is what that looks like (sorted by “Status”):
image

Also, did any of the examples on https://plot.ly/dash/urls work for you?

I don’t have any 403 or 500 level errors in the Network tab. I haven’t tried the raw example code - I’ll give it a go now and report back.

Both examples are working correctly

Firefox gave some more detail in the console log:

@edbduck - Could you copy and paste the entire example that you are using?

import pandas as pd
import dash
import dash_html_components as html
import dash_core_components as dcc
import plotly.graph_objs as go
import os

app = dash.Dash()

print(dcc.__version__) # 0.6.0 or above is required
app.config.supress_callback_exceptions = True

filepath = os.path.join(os.path.dirname(__file__),"SharksDatabase.xlsx")

match_df = pd.read_excel(filepath, 'Match')
mp_df = pd.read_excel(filepath, 'MatchPlayer')

mp_df['Appearances'] = 1  # add appearances column to match player df
mp_df = mp_df.merge(match_df[['MatchID', 'Season', 'Competition Type']], on='MatchID', how='left')

ps_df = mp_df.groupby(['Player']).sum().reset_index()  # stats by player (player stats)
pscs_df = mp_df.groupby(['Player', 'Season', 'Competition Type']).sum().reset_index()

seasons = match_df['Season'].unique()
comps = match_df['Competition Type'].unique()

#appearance processing - this can be optimised with showlegend=False
apps_sorted_df = ps_df.sort_values('Appearances').dropna(subset=['Appearances'])
players_ordered = apps_sorted_df['Player'].values

iterables = [players_ordered, seasons, comps]
app_plot_df = pd.Series(0, index=pd.MultiIndex.from_product(iterables, names=['Player', 'Season', 'Competition Type']))
app_plot_df = app_plot_df.reset_index()
app_plot_df.drop([0], axis=1, inplace=True)

app_plot_df = app_plot_df.merge(pscs_df, on=['Player', 'Season', 'Competition Type'], how='left')
app_plot_df['Appearances'].fillna(0, inplace=True)

app.layout = html.Div(children=[

    dcc.Location(id='location', refresh=False),

    dcc.Link('Player', href='/player'),
    html.Br(),
    dcc.Link('Match', href='/match'),

    html.Div(children=[
        html.Div(children=[
            # html.Label('Page'),
            dcc.RadioItems(
                id='page',
                options=[{'label': i, 'value': i} for i in ['Player', 'Match']],
                value='Player',
                # labelStyle={'display': 'inline-block'}
            ),
        ], ), # style={'padding': 10}),

        html.Div(children=[
            html.Label('Group By'),
            dcc.RadioItems(
                id='grouping',
                options=[{'label': i, 'value': i} for i in ['Season', 'Competition']],
                value='Season',
                # labelStyle={'display': 'inline-block'}
            ),
        ], style={'display': 'inline-block', 'padding': 10}),

        html.Div(children=[
            html.Label('Competition'),
            dcc.RadioItems(
                id='comp-type',
                options=[{'label': i, 'value': i} for i in ['All', 'League', 'Cup']],
                value='All',
                # labelStyle={'display': 'inline-block'}
            ),
        ], style={'display': 'inline-block', 'padding': 10}),

        html.Div(children=[
            html.Label('Season'),
            dcc.Checklist(
                id='season',
                options=[{'label': season, 'value': season} for season in seasons],
                values=list(seasons),
                # labelStyle={'display': 'inline-block'}
            ),
        ], style={'display': 'inline-block', 'padding': 10}),
    ], style={'textAlign': 'center'}),

    html.Div(id='page-body'),
    dcc.Graph(id='app-graph'),

])

@app.callback(
    dash.dependencies.Output('app-graph', 'figure'),
    [dash.dependencies.Input('grouping', 'value'),
     dash.dependencies.Input('comp-type', 'value'),
     dash.dependencies.Input('season', 'values'),
     dash.dependencies.Input('page', 'value')])
def update_app_figure(grouping_value, comp_type_value, season_values, page_value):

    if comp_type_value == 'All':
        comp_selector = ['League', 'Cup']
    elif comp_type_value == 'League':
        comp_selector = ['League']
    elif comp_type_value == 'Cup':
        comp_selector = ['Cup']

    season_selector = season_values

    user_app_plot_df = app_plot_df[(app_plot_df['Competition Type'].isin(comp_selector))
                                   & (app_plot_df['Season'].isin(season_selector))]

    if grouping_value == 'Season':
        group_by_season = True
        group_by_comp = False
    elif grouping_value == 'Competition':
        group_by_season = False
        group_by_comp = True

    traces = []
    if group_by_season:
        user_app_plot_df = user_app_plot_df.groupby(['Player', 'Season'], sort=False).sum().reset_index()

        for season in seasons:
            traces.append(
                go.Bar(
                    x=user_app_plot_df[user_app_plot_df['Season'] == season]['Player'],
                    y=user_app_plot_df[user_app_plot_df['Season'] == season]['Appearances'],
                    name=season
                )
            )

    elif group_by_comp:
        user_app_plot_df = user_app_plot_df.groupby(['Player', 'Competition Type'], sort=False).sum().reset_index()

        for comp in comps:
            traces.append(
                go.Bar(
                    x=user_app_plot_df[user_app_plot_df['Competition Type'] == comp]['Player'],
                    y=user_app_plot_df[user_app_plot_df['Competition Type'] == comp]['Appearances'],
                    name=comp
                )
            )

    xaxis_template = dict(# title='Name',
                          zeroline=False)
    yaxis_template = dict(title='Appearances',
                          zeroline=False)
    layout = go.Layout(title='Appearances by Player',
                       xaxis=xaxis_template,
                       yaxis=yaxis_template,
                       barmode='stack',
                       legend=dict(orientation="h", x=0, y=1),)

    data = traces

    fig = go.Figure(
        data=data,
        layout=layout)

    return fig

if __name__ == '__main__':
    app.run_server(debug=True)

I can provide the excel file if you would like to run the code also

That would be really helpful, then I can run the code as it is on my own machine. Thanks!

I have shared the excel file on dropbox via the following link:

Let me know if you manage to replicate the problem or whether it’s just a problem with my set up. Thanks

I’m having this same issue…any updates?

yes, the problem was that I wasn’t using all the code necessary - you can’t just test the layout using dcc.Location without then using that location in your callback later (ie use dash.dependencies.Input(‘url’, ‘pathname’) in your callback function in addition. Let me know if that works!

Thanks @edbduck for the help! That makes sense. I was trying to use url (dcc.Location ) in dash.dependencies.Output, and apparently that’s not supported.

Could you try upgrading dash-core-components? I created an issue about this here: https://github.com/plotly/dash-core-components/issues/145#issuecomment-357994131 and some folks weren’t able to replicate it.