To demonstrate:
Starting up
INFO:werkzeug: * Running on http://127.0.0.1:8050/ (Press CTRL+C to quit)
INFO:werkzeug:127.0.0.1 - - [03/Mar/2018 17:04:56] "GET / HTTP/1.1" 200 -
INFO:werkzeug:127.0.0.1 - - [03/Mar/2018 17:04:59] "GET /_dash-layout HTTP/1.1" 200 -
INFO:werkzeug:127.0.0.1 - - [03/Mar/2018 17:04:59] "GET /_dash-dependencies HTTP/1.1" 200 -
WARNING:root:display-bar, location is None, site is None
WARNING:root:get dff returning df
WARNING:root:generate bar with items 3
WARNING:root:dcc.Graph bar is {'orientation': 'h', 'name': 'Num Stock Units', 'y': Index(['Cables', 'Other', 'Power Supplies'], dtype='object', name='Stock Type'), 'type': 'bar', 'x': Stock Type
Cables 1
Other 2
Power Supplies 5
Name: Current Balance, dtype: int64}
WARNING:root:dcc.Graph line is {'name': 'Inventory value (k)', 'y': Index(['Cables', 'Other', 'Power Supplies'], dtype='object', name='Stock Type'), 'type': 'scatter', 'x': Stock Type
Cables 0.000000
Other 1.754630
Power Supplies 0.808845
Name: Inventory Value, dtype: float64}
INFO:werkzeug:127.0.0.1 - - [03/Mar/2018 17:04:59] "POST /_dash-update-component HTTP/1.1" 200 -
WARNING:root:display_metric_itm, type(seldata) is <class 'NoneType'>, value is None
WARNING:root:display_metric_itm, location None, site None
WARNING:root:get dff returning df
INFO:werkzeug:127.0.0.1 - - [03/Mar/2018 17:04:59] "POST /_dash-update-component HTTP/1.1" 200 -
WARNING:root:display_metric_qty, location is None, site is None
WARNING:root:get dff returning df
INFO:werkzeug:127.0.0.1 - - [03/Mar/2018 17:04:59] "POST /_dash-update-component HTTP/1.1" 200 -
WARNING:root:display_table, location is None, site is None
WARNING:root:get dff returning df
INFO:werkzeug:127.0.0.1 - - [03/Mar/2018 17:04:59] "POST /_dash-update-component HTTP/1.1" 200 -
The callbacks fire in random order, first display_bar, then display_metric_item followed by display_metric_quantity.
(other runs show different orders for these callbacks) When clicking a point on the initial graph (twice), I see:
WARNING:root:display_metric_itm, type(seldata) is <class 'NoneType'>, value is None
WARNING:root:display_metric_itm, location None, site None
WARNING:root:get dff returning df
INFO:werkzeug:127.0.0.1 - - [03/Mar/2018 17:05:30] "POST /_dash-update-component HTTP/1.1" 200 -
WARNING:root:display_metric_itm, type(seldata) is <class 'NoneType'>, value is None
WARNING:root:display_metric_itm, location None, site None
WARNING:root:get dff returning df
INFO:werkzeug:127.0.0.1 - - [03/Mar/2018 17:05:40] "POST /_dash-update-component HTTP/1.1" 200 -
Both of which yield a seldata with a None value (I forgot to change the param name seldata to clickData).
Then selecting UK in the location dropdown:
WARNING:root:display-bar, location is UK, site is None
WARNING:root:get dff returning df[location=]
WARNING:root:generate bar with items 3
WARNING:root:dcc.Graph bar is {'orientation': 'h', 'name': 'Num Stock Units', 'y': Index(['Cables', 'Other', 'Power Supplies'], dtype='object', name='Stock Type'), 'type': 'bar', 'x': Stock Type
Cables 1
Other 1
Power Supplies 4
Name: Current Balance, dtype: int64}
WARNING:root:dcc.Graph line is {'name': 'Inventory value (k)', 'y': Index(['Cables', 'Other', 'Power Supplies'], dtype='object', name='Stock Type'), 'type': 'scatter', 'x': Stock Type
Cables 0.00000
Other 1.74363
Power Supplies 0.68929
Name: Inventory Value, dtype: float64}
INFO:werkzeug:127.0.0.1 - - [03/Mar/2018 17:06:26] "POST /_dash-update-component HTTP/1.1" 200 -
WARNING:root:display_metric_itm, type(seldata) is <class 'NoneType'>, value is None
WARNING:root:display_metric_itm, location UK, site None
WARNING:root:get dff returning df[location=]
INFO:werkzeug:127.0.0.1 - - [03/Mar/2018 17:06:26] "POST /_dash-update-component HTTP/1.1" 200 -
WARNING:root:display_metric_qty, location is UK, site is None
WARNING:root:get dff returning df[location=]
INFO:werkzeug:127.0.0.1 - - [03/Mar/2018 17:06:26] "POST /_dash-update-component HTTP/1.1" 200 -
WARNING:root:display_table, location is UK, site is None
WARNING:root:get dff returning df[location=]
INFO:werkzeug:127.0.0.1 - - [03/Mar/2018 17:06:26] "POST /_dash-update-component HTTP/1.1" 200 -
In callback display_metric_item, the seldata is still None. So the previous click on the Graph was not
seen or cached. Now, at this eh… point, after clicking a point:
WARNING:root:display_metric_itm, type(seldata) is <class 'dict'>, value is {'points': [{'pointNumber': 2, 'curveNumber': 1, 'y': 'Power Supplies', 'x': 0.6892903, 'pointIndex': 2}, {'pointNumber': 1, 'curveNumber': 0, 'y': 'Other', 'x': 1, 'pointIndex': 1}]}
WARNING:root:display_metric_itm, location UK, site None
WARNING:root:get dff returning df[location=]
INFO:werkzeug:127.0.0.1 - - [03/Mar/2018 17:06:37] "POST /_dash-update-component HTTP/1.1" 200 -
The display_metric_item callback is triggered again, and seldata shows up having a value
So now I’m a bit lost on the difference between the initial graph and the second one. The only difference
I see is the original is based on an unfiltered df, whereas the second based on dff = df[df.Location == Location]
but both are of type <class 'pandas.core.frame.DataFrame'>, just different lengths. Moreover, adding value='UK'
to the location dropdown in the initial layout doesn’t make any difference whatsoever.
Perhaps some initialisation issue in react?