"Uncaught TypeError: Cannot read property 'data' of null" when plotting data

[michael-ziedalski]

So, it is really hard for me to adequately describe this bug in the first place, since the presence of a seemingly unrelated additional Output in the same callback is what determines if it is triggered.

I was writing a simple demo app that features a line-graph being updated by a dcc.Interval object.

1. I press a button,
2. graph is populated with a nice line,
3. this turns on the dcc.Interval (by setting max_intervals to -1),
4. dcc.Interval then further continues updating the graph. Afterwards, the higher the n_intervals, the higher the line plotted by the corresponding dcc.Graph object.

After some tinkering, I uncovered this bug. My MWE below displays the bug. To see the normal behavior of the code, simply delete the 4 #'s in the bottom callback.

Is this a bug, or something strange I am missing?

import dash
import dash_core_components as dcc
import dash_html_components as html
import dash_table
from dash.dependencies import Input, Output, State


###### Setup ######

app = dash.Dash(dev_tools_hot_reload=True)
app.scripts.config.serve_locally = True
app.config['suppress_callback_exceptions'] = True


###### Main code ######

app.layout = html.Div(children=[
    
    
    dcc.Interval(id='update', interval=1*1000, n_intervals=0,
                 max_intervals=0), ## Interval component is disabled as default through max_intervas
    
    html.Div(children=[html.Label(id='Label', children='Just a Label.')]),
        
    ## Button triggering graph to populate with random data.
    html.Div(children=[html.Button(id='button', children='Populate graph.')]),
    
    dcc.Graph(id='Graph_triggered_by_Interval')
    
    
]
                     )


@app.callback(
    Output(component_id='Label', component_property='children'),
   [Input(component_id='update', component_property='n_intervals'),
    Input(component_id='update', component_property='max_intervals'),
    Input(component_id='update', component_property='disabled')]
)
def check_interval_update(n_intervals, max_intervals, disabled):

    return 'n_intervals: {}, max_intervals: {}, disabled: {}'.format(n_intervals, max_intervals, disabled)


## Callback with error.
@app.callback(
#   [
   Output(component_id='Graph_triggered_by_Interval', component_property='figure'),
#     Output(component_id='update', component_property='max_intervals')],
   [Input(component_id='update', component_property='n_intervals'),
    Input(component_id='button', component_property='n_clicks_timestamp')]
)
def update_graph(update, button):
    
    if not update:
        update = 1
    
    print('\nInterval counter: {}\n'.format(update))
    
    if button:
        
        if update == 1:
            print('\nThis is what should be printed each time after un-disabling interval (letting it go again).\n')
            return {'data': [{'y': [i**2 for i in range(100)]}]}#, -1
        
        elif update > 1:
            return {'data': [{'y': [i**2 for i in range(update)]}]}#, -1


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

[michael-ziedalski]

I previously erroneously said to delete the 3 hashes in the lowermost callback to display the intended behavior of the graph, instead of actually the 4 lower hashes. Basically, the multiple output of that callback needs to be enabled.

[michael-ziedalski]

The error was resolved under this Dash thread: button's n_clicks_timestamp is null when the app starts, and this error refuses to budge, even after the button got clicked, unintuitively.

Perhaps better error messages would be desirable, but more importantly, I am not sure if the underlying issue of the error that freezes the app remaining, despite the button being pressed and not being null anymore, is a bug, so I am closing this issue.