Frontend error (TypeError: e[r] is undefined) when updating graph after legends are selected

[slazicoicr]

I have attached a gif of the problem at the bottom of this comment.

I have a bar graph that I can update by two drop down menus (changing the X-axis time binning and the grouping of the bars). The bug occurs when I

1. Unselected all bars using the legends
2. Change one of the drop down menus

There are no errors in the back end console. On the front end console, the following error is displayed:

The bug makes the Dash application unresponsive until I click the Reset axes button on the Dash graph.

Gif of issue:

Code below:

raw_df = load_df_as_json()
app = dash.Dash(__name__)
raw_df_table_col_names = [
    {'name': i, 'id': i} for i in raw_df.columns
]

app.layout = html.Div([
    dcc.Dropdown(
        id='freq_dropdown',
        options=[
            {'label': 'Daily', 'value': 'D'},
            {'label': 'Weekly', 'value': 'W'},
            {'label': 'Monthly', 'value': 'M'},
            {'label': 'Quarterly', 'value': 'BQ-MAR'},
            {'label': 'Yearly', 'value': 'Y'},
        ],
        value='M',
        clearable=False,
    ),

    dcc.Dropdown(
        id='colour_by_dropdown',
        options=[
            {'label': 'Machine ID', 'value': 'sequencerName'},
            {'label': 'Machine Model', 'value': 'name_model'},
        ],
        value=None,
        placeholder='Colour By'
    ),

    dcc.Graph(
        id='bar_sum',
    ),

    dcc.Tabs(id="table_tabs", value='grouped', children=[
        dcc.Tab(label='Grouped Data', value='grouped'),
        dcc.Tab(label='All Data', value='all'),
    ]),

    html.Div(
        id='table_tabs_content'
    ),

    html.Div(
        id='raw_df_json',
        style={'display': 'none'},
        children=raw_df.to_json(
            date_format='iso', orient='records'
        ),
    ),

    html.Div(
        id='df_group_sum',
        style={'display': 'none'},
        children=raw_df.groupby(
            [pandas.Grouper(key='startDate', freq='1M')]
        ).sum().reset_index().to_json(
            date_format='iso', orient='split'
        ),
    ),
])


@app.callback(
    Output('bar_sum', 'figure'),
    [Input('df_group_sum', 'children'),
     Input('colour_by_dropdown', 'value')]
)
def create_bar_sum_fig(df_group_sum, colour_by):
    print('hello')
    df = pandas.read_json(df_group_sum, orient='split')

    if colour_by is None:
        return {
            'data': [go.Bar(
                x=df['startDate'],
                y=df['Total Yield (GB)']
            )]
        }
    else:
        traces = []
        for name, data in df.groupby(colour_by):
            t = go.Bar(
                x=list(data['startDate']),
                y=list(data['Total Yield (GB)']),
                name=name
            )
            traces.append(t)

        return {
            'data': traces
        }


@app.callback(
    Output('table_tabs_content', 'children'),
    [Input('table_tabs', 'value'),
     Input('raw_df_json', 'children'),
     Input('df_group_sum', 'children')]
)
def update_table_tab(selected_tab, raw_df_json, group_df_json):
    if selected_tab == 'grouped':
        df = pandas.read_json(group_df_json, orient='split')
    if selected_tab == 'all':
        df = pandas.read_json(raw_df_json, orient='records')

    col_names = [{'name': i, 'id': i} for i in df.columns]

    return dash_table.DataTable(
        id='test',
        columns=col_names,
        data=df.to_dict('rows')
    )


@app.callback(
    Output('df_group_sum', 'children'),
    [Input('raw_df_json', 'children'),
     Input('freq_dropdown', 'value'),
     Input('colour_by_dropdown', 'value')]
)
def update_grouped_df(raw_df_json, frequency, colour_grouper):
    raw = pandas.read_json(
        raw_df_json, orient='records', convert_dates=['startDate']
    )

    if colour_grouper is None:
        grouper = [
            pandas.Grouper(key='startDate', freq=frequency)
        ]
    else:
        grouper = [
            pandas.Grouper(key='startDate', freq=frequency),
            colour_grouper
        ]

    return raw.groupby(
        grouper
    ).sum().reset_index().to_json(
        date_format='iso', orient='split',
    )


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

Python module versions:

aiohttp==2.3.9
alabaster==0.7.12
appdirs==1.4.3
astroid==1.6.3
async-timeout==2.0.0
atomicwrites==1.2.1
attrs==18.2.0
autopep8==1.4
Babel==2.6.0
backcall==0.1.0
beautifulsoup4==4.6.0
black==18.9b0
bleach==2.1.3
brewer2mpl==1.4.1
certifi==2018.11.29
chardet==3.0.4
click==6.7
cloudpickle==0.5.2
colormath==3.0.0
Crimson==0.4.0
cycler==0.10.0
dash==0.35.1
dash-core-components==0.42.1
dash-html-components==0.13.4
dash-renderer==0.13.1
dash-table==3.1.11
decorator==4.3.0
docopt==0.6.2
docutils==0.14
entrypoints==0.2.3
Flask==1.0.2
Flask-Compress==1.4.0
future==0.16.0
ggplot==0.11.5
greenlet==0.4.15
grip==4.5.2
gunicorn==19.9.0
html5lib==1.0.1
idna==2.8
imagesize==1.1.0
interop==1.1.6
ipykernel==4.8.2
ipython==6.3.1
ipython-genutils==0.2.0
ipywidgets==7.2.1
isort==4.3.4
itsdangerous==1.1.0
jedi==0.12.0
Jinja2==2.10
jsonschema==2.6.0
jupyter==1.0.0
jupyter-client==5.2.3
jupyter-console==5.2.0
jupyter-contrib-core==0.3.3
jupyter-contrib-nbextensions==0.5.1
jupyter-core==4.4.0
jupyter-highlight-selected-word==0.2.0
jupyter-latex-envs==1.4.6
jupyter-nbextensions-configurator==0.4.1
lazy-object-proxy==1.3.1
lxml==4.2.6
lzstring==0.1
Markdown==2.6.11
MarkupSafe==1.1.0
matplotlib==2.1.0
mccabe==0.6.1
mistune==0.8.3
more-itertools==4.3.0
msgpack==0.5.6
multidict==4.0.0
multiqc==1.5
mypy==0.630
mypy-extensions==0.4.1
nbconvert==5.3.1
nbformat==4.4.0
neovim==0.2.6
networkx==2.1
notebook==5.5.0
numexpr==2.6.5
numpy==1.15.4
numpydoc==0.8.0
packaging==18.0
pandas==0.23.4
pandocfilters==1.4.2
parso==0.2.0
path-and-address==2.0.1
patsy==0.5.1
pexpect==4.5.0
pickleshare==0.7.4
plotly==3.3.0
pluggy==0.7.1
prompt-toolkit==1.0.15
psutil==5.4.5
ptyprocess==0.5.2
py==1.7.0
pybedtools==0.7.10
pycodestyle==2.4.0
pydocstyle==2.1.1
pyflakes==1.6.0
Pygments==2.3.0
pylint==1.8.4
pyls-black==0.2.1
pyls-isort==0.1.1
pyls-mypy==0.1.3
PyOpenGL==3.1.0
pyparsing==2.3.0
PyQt5==5.9.2
pysam==0.15.0
pytest==4.0.2
python-dateutil==2.7.5
python-jsonrpc-server==0.0.2
python-language-server==0.21.2
pytz==2018.7
PyYAML==3.12
pyzmq==17.0.0
QtAwesome==0.4.4
qtconsole==4.3.1
QtPy==1.4.2
requests==2.21.0
retrying==1.3.3
rope==0.10.7
scipy==1.2.0
seaborn==0.9.0
Send2Trash==1.5.0
simplegeneric==0.8.1
simplejson==3.13.2
sip==4.19.8
six==1.12.0
snowballstemmer==1.2.1
spectra==0.0.11
Sphinx==1.8.2
sphinx-rtd-theme==0.4.2
sphinxcontrib-websupport==1.1.0
spyder==3.2.8
statsmodels==0.9.0
tables==3.4.4
terminado==0.8.1
testpath==0.3.1
toml==0.9.6
tornado==5.0.2
traitlets==4.3.2
typed-ast==1.1.0
urllib3==1.24.1
wcwidth==0.1.7
webencodings==0.5.1
Werkzeug==0.14.1
widgetsnbextension==3.2.1
wrapt==1.10.11
yapf==0.24.0
yarl==1.1.0

[alexcjohnson]

Thanks @slazicoicr - this is a plotly.js bug, I'll open an issue for it over there. (bare plotly.js codepen https://codepen.io/alexcjohnson/pen/RvxLNy?editors=1010)