fix multiple concurrent loading states by alexcjohnson · Pull Request #1310 · plotly/dash

alexcjohnson · 2020-06-24T23:16:07Z

Fixeshttps://github.com/plotly/dash-core/issues/195
Regression from #1254 - only one loading state could be shown at a time.

I have run the tests locally and they passed. (refer to testing section in contributing)
I have added tests, or extended existing tests, to cover any new features or bugs fixed in this PR
I have added entry in the CHANGELOG.md

alexcjohnson · 2020-06-24T23:19:40Z

- forEach(p => {
- target = (target[p] =
- target[p] ??
- p === 'children' ? [] : {}


Turns out ?? has higher precedence than ? in JS 🙈 The only necessary part of this fix is the extra parentheses around this line.
Added the typeof path[i + 1] clause so that the [] vs {} distinction is correct - though it doesn't seem to actually cause problems when the container has the wrong type 🤷

chriddyp · 2020-06-24T23:22:04Z

Do we want to test loading states for chained callbacks too? Dropdown A ➡️ Dropdown B ➡️ Graph. If Dropdown A changes, do we show a loading state for Graph before Dropdown B is updated?

I'm not sure what the existing behavior is but seems like it could be another piece of logic that could've changed during the refactor.

alexcjohnson · 2020-06-24T23:26:23Z

Do we want to test loading states for chained callbacks too?

Sure, I can add a test for that later tonight.

chriddyp · 2020-06-24T23:50:55Z

Here is a test case for chained callbacks & loading states:

importdashfromdash.dependenciesimportInput, Outputimportdash_core_componentsasdccimportdash_html_componentsashtmlimporttimeapp=dash.Dash(__name__)
app.layout=html.Div([
html.Button(id='button', children='Start', n_clicks=0),
html.Div(
dcc.Loading(html.Div(id='output-1', style={
'width': 200,
'height': 200,
'backgroundColor': 'hotpink',
})),
style={'display': 'inline-block'}
),
html.Div(
dcc.Loading(html.Div(id='output-2', style={
'width': 200,
'height': 200,
'backgroundColor': 'rebeccapurple',
})),
style={'display': 'inline-block'}
),
html.Div(
dcc.Loading(html.Div(id='output-3', style={
'width': 200,
'height': 200,
'backgroundColor': 'green',
})), style={'display': 'inline-block'}
),
html.Div(
dcc.Loading(html.Div(id='output-4', style={
'width': 200,
'height': 200,
'backgroundColor': '#FF851B', # orange
})),
style={'display': 'inline-block'}
)
])
@app.callback(Output('output-1', 'children'), [Input('button', 'n_clicks')])defupdate_output_2(n_clicks):
time.sleep(2)
return'Output 1: {}'.format(n_clicks)
@app.callback(Output('output-2', 'children'), [Input('output-1', 'children')])defupdate_output_2(children):
time.sleep(2)
return'Output 2: {}'.format(children)
@app.callback([Output('output-3', 'children'), Output('output-4', 'children')], [Input('output-2', 'children')])defupdate_output_2(children):
time.sleep(2)
return [
'Output 3: {}'.format(children),
'Output 4: {}'.format(children)
]
if__name__=='__main__':
app.run_server(debug=True)

In 1.12.0 we don't display a loading state for grandchildren, only immediate children. Looks like the 1.13 behavior is the same right now.

Here's what this looks like in 1.12.0

alexcjohnson · 2020-06-25T01:51:38Z

Thanks @chriddyp - added that app as a test case in a225922

chriddyp

💃 beautiful

This release upgrades dash-renderer from v1.4.1 to v1.5.1, and is timed with the release of Dash for Python v1.13.4. This update also addresses a regression that prevented multiple loading states from displaying concurrently when a callback updates multiple outputs, as noted in [plotly/dash#1310](plotly/dash#1310).

alexcjohnson · 2020-06-24T23:16:07Z

Fixeshttps://github.com/plotly/dash-core/issues/195
Regression from #1254 - only one loading state could be shown at a time.

I have run the tests locally and they passed. (refer to testing section in contributing)
I have added tests, or extended existing tests, to cover any new features or bugs fixed in this PR
I have added entry in the CHANGELOG.md

alexcjohnson · 2020-06-24T23:19:40Z

- forEach(p => {
- target = (target[p] =
- target[p] ??
- p === 'children' ? [] : {}


Turns out ?? has higher precedence than ? in JS 🙈 The only necessary part of this fix is the extra parentheses around this line.
Added the typeof path[i + 1] clause so that the [] vs {} distinction is correct - though it doesn't seem to actually cause problems when the container has the wrong type 🤷

chriddyp · 2020-06-24T23:22:04Z

Do we want to test loading states for chained callbacks too? Dropdown A ➡️ Dropdown B ➡️ Graph. If Dropdown A changes, do we show a loading state for Graph before Dropdown B is updated?

I'm not sure what the existing behavior is but seems like it could be another piece of logic that could've changed during the refactor.

alexcjohnson · 2020-06-24T23:26:23Z

Do we want to test loading states for chained callbacks too?

Sure, I can add a test for that later tonight.

chriddyp · 2020-06-24T23:50:55Z

Here is a test case for chained callbacks & loading states:

importdashfromdash.dependenciesimportInput, Outputimportdash_core_componentsasdccimportdash_html_componentsashtmlimporttimeapp=dash.Dash(__name__)
app.layout=html.Div([
html.Button(id='button', children='Start', n_clicks=0),
html.Div(
dcc.Loading(html.Div(id='output-1', style={
'width': 200,
'height': 200,
'backgroundColor': 'hotpink',
})),
style={'display': 'inline-block'}
),
html.Div(
dcc.Loading(html.Div(id='output-2', style={
'width': 200,
'height': 200,
'backgroundColor': 'rebeccapurple',
})),
style={'display': 'inline-block'}
),
html.Div(
dcc.Loading(html.Div(id='output-3', style={
'width': 200,
'height': 200,
'backgroundColor': 'green',
})), style={'display': 'inline-block'}
),
html.Div(
dcc.Loading(html.Div(id='output-4', style={
'width': 200,
'height': 200,
'backgroundColor': '#FF851B', # orange
})),
style={'display': 'inline-block'}
)
])
@app.callback(Output('output-1', 'children'), [Input('button', 'n_clicks')])defupdate_output_2(n_clicks):
time.sleep(2)
return'Output 1: {}'.format(n_clicks)
@app.callback(Output('output-2', 'children'), [Input('output-1', 'children')])defupdate_output_2(children):
time.sleep(2)
return'Output 2: {}'.format(children)
@app.callback([Output('output-3', 'children'), Output('output-4', 'children')], [Input('output-2', 'children')])defupdate_output_2(children):
time.sleep(2)
return [
'Output 3: {}'.format(children),
'Output 4: {}'.format(children)
]
if__name__=='__main__':
app.run_server(debug=True)

In 1.12.0 we don't display a loading state for grandchildren, only immediate children. Looks like the 1.13 behavior is the same right now.

Here's what this looks like in 1.12.0

alexcjohnson · 2020-06-25T01:51:38Z

Thanks @chriddyp - added that app as a test case in a225922

chriddyp

💃 beautiful

This release upgrades dash-renderer from v1.4.1 to v1.5.1, and is timed with the release of Dash for Python v1.13.4. This update also addresses a regression that prevented multiple loading states from displaying concurrently when a callback updates multiple outputs, as noted in [plotly/dash#1310](plotly/dash#1310).

alexcjohnson · 2020-06-24T23:16:07Z

Fixeshttps://github.com/plotly/dash-core/issues/195
Regression from #1254 - only one loading state could be shown at a time.

I have run the tests locally and they passed. (refer to testing section in contributing)
I have added tests, or extended existing tests, to cover any new features or bugs fixed in this PR
I have added entry in the CHANGELOG.md

alexcjohnson · 2020-06-24T23:19:40Z

- forEach(p => {
- target = (target[p] =
- target[p] ??
- p === 'children' ? [] : {}


Turns out ?? has higher precedence than ? in JS 🙈 The only necessary part of this fix is the extra parentheses around this line.
Added the typeof path[i + 1] clause so that the [] vs {} distinction is correct - though it doesn't seem to actually cause problems when the container has the wrong type 🤷

chriddyp · 2020-06-24T23:22:04Z

Do we want to test loading states for chained callbacks too? Dropdown A ➡️ Dropdown B ➡️ Graph. If Dropdown A changes, do we show a loading state for Graph before Dropdown B is updated?

I'm not sure what the existing behavior is but seems like it could be another piece of logic that could've changed during the refactor.

alexcjohnson · 2020-06-24T23:26:23Z

Do we want to test loading states for chained callbacks too?

Sure, I can add a test for that later tonight.

chriddyp · 2020-06-24T23:50:55Z

Here is a test case for chained callbacks & loading states:

importdashfromdash.dependenciesimportInput, Outputimportdash_core_componentsasdccimportdash_html_componentsashtmlimporttimeapp=dash.Dash(__name__)
app.layout=html.Div([
html.Button(id='button', children='Start', n_clicks=0),
html.Div(
dcc.Loading(html.Div(id='output-1', style={
'width': 200,
'height': 200,
'backgroundColor': 'hotpink',
})),
style={'display': 'inline-block'}
),
html.Div(
dcc.Loading(html.Div(id='output-2', style={
'width': 200,
'height': 200,
'backgroundColor': 'rebeccapurple',
})),
style={'display': 'inline-block'}
),
html.Div(
dcc.Loading(html.Div(id='output-3', style={
'width': 200,
'height': 200,
'backgroundColor': 'green',
})), style={'display': 'inline-block'}
),
html.Div(
dcc.Loading(html.Div(id='output-4', style={
'width': 200,
'height': 200,
'backgroundColor': '#FF851B', # orange
})),
style={'display': 'inline-block'}
)
])
@app.callback(Output('output-1', 'children'), [Input('button', 'n_clicks')])defupdate_output_2(n_clicks):
time.sleep(2)
return'Output 1: {}'.format(n_clicks)
@app.callback(Output('output-2', 'children'), [Input('output-1', 'children')])defupdate_output_2(children):
time.sleep(2)
return'Output 2: {}'.format(children)
@app.callback([Output('output-3', 'children'), Output('output-4', 'children')], [Input('output-2', 'children')])defupdate_output_2(children):
time.sleep(2)
return [
'Output 3: {}'.format(children),
'Output 4: {}'.format(children)
]
if__name__=='__main__':
app.run_server(debug=True)

In 1.12.0 we don't display a loading state for grandchildren, only immediate children. Looks like the 1.13 behavior is the same right now.

Here's what this looks like in 1.12.0

alexcjohnson · 2020-06-25T01:51:38Z

Thanks @chriddyp - added that app as a test case in a225922

chriddyp

💃 beautiful

This release upgrades dash-renderer from v1.4.1 to v1.5.1, and is timed with the release of Dash for Python v1.13.4. This update also addresses a regression that prevented multiple loading states from displaying concurrently when a callback updates multiple outputs, as noted in [plotly/dash#1310](plotly/dash#1310).

alexcjohnson · 2020-06-24T23:16:07Z

Fixeshttps://github.com/plotly/dash-core/issues/195
Regression from #1254 - only one loading state could be shown at a time.

I have run the tests locally and they passed. (refer to testing section in contributing)
I have added tests, or extended existing tests, to cover any new features or bugs fixed in this PR
I have added entry in the CHANGELOG.md

alexcjohnson · 2020-06-24T23:19:40Z

- forEach(p => {
- target = (target[p] =
- target[p] ??
- p === 'children' ? [] : {}


Turns out ?? has higher precedence than ? in JS 🙈 The only necessary part of this fix is the extra parentheses around this line.
Added the typeof path[i + 1] clause so that the [] vs {} distinction is correct - though it doesn't seem to actually cause problems when the container has the wrong type 🤷

chriddyp · 2020-06-24T23:22:04Z

Do we want to test loading states for chained callbacks too? Dropdown A ➡️ Dropdown B ➡️ Graph. If Dropdown A changes, do we show a loading state for Graph before Dropdown B is updated?

I'm not sure what the existing behavior is but seems like it could be another piece of logic that could've changed during the refactor.

alexcjohnson · 2020-06-24T23:26:23Z

Do we want to test loading states for chained callbacks too?

Sure, I can add a test for that later tonight.

chriddyp · 2020-06-24T23:50:55Z

Here is a test case for chained callbacks & loading states:

importdashfromdash.dependenciesimportInput, Outputimportdash_core_componentsasdccimportdash_html_componentsashtmlimporttimeapp=dash.Dash(__name__)
app.layout=html.Div([
html.Button(id='button', children='Start', n_clicks=0),
html.Div(
dcc.Loading(html.Div(id='output-1', style={
'width': 200,
'height': 200,
'backgroundColor': 'hotpink',
})),
style={'display': 'inline-block'}
),
html.Div(
dcc.Loading(html.Div(id='output-2', style={
'width': 200,
'height': 200,
'backgroundColor': 'rebeccapurple',
})),
style={'display': 'inline-block'}
),
html.Div(
dcc.Loading(html.Div(id='output-3', style={
'width': 200,
'height': 200,
'backgroundColor': 'green',
})), style={'display': 'inline-block'}
),
html.Div(
dcc.Loading(html.Div(id='output-4', style={
'width': 200,
'height': 200,
'backgroundColor': '#FF851B', # orange
})),
style={'display': 'inline-block'}
)
])
@app.callback(Output('output-1', 'children'), [Input('button', 'n_clicks')])defupdate_output_2(n_clicks):
time.sleep(2)
return'Output 1: {}'.format(n_clicks)
@app.callback(Output('output-2', 'children'), [Input('output-1', 'children')])defupdate_output_2(children):
time.sleep(2)
return'Output 2: {}'.format(children)
@app.callback([Output('output-3', 'children'), Output('output-4', 'children')], [Input('output-2', 'children')])defupdate_output_2(children):
time.sleep(2)
return [
'Output 3: {}'.format(children),
'Output 4: {}'.format(children)
]
if__name__=='__main__':
app.run_server(debug=True)

In 1.12.0 we don't display a loading state for grandchildren, only immediate children. Looks like the 1.13 behavior is the same right now.

Here's what this looks like in 1.12.0

alexcjohnson · 2020-06-25T01:51:38Z

Thanks @chriddyp - added that app as a test case in a225922

chriddyp

💃 beautiful

This release upgrades dash-renderer from v1.4.1 to v1.5.1, and is timed with the release of Dash for Python v1.13.4. This update also addresses a regression that prevented multiple loading states from displaying concurrently when a callback updates multiple outputs, as noted in [plotly/dash#1310](plotly/dash#1310).

alexcjohnson · 2020-06-24T23:16:07Z

Fixeshttps://github.com/plotly/dash-core/issues/195
Regression from #1254 - only one loading state could be shown at a time.

I have run the tests locally and they passed. (refer to testing section in contributing)
I have added tests, or extended existing tests, to cover any new features or bugs fixed in this PR
I have added entry in the CHANGELOG.md

alexcjohnson · 2020-06-24T23:19:40Z

- forEach(p => {
- target = (target[p] =
- target[p] ??
- p === 'children' ? [] : {}


Turns out ?? has higher precedence than ? in JS 🙈 The only necessary part of this fix is the extra parentheses around this line.
Added the typeof path[i + 1] clause so that the [] vs {} distinction is correct - though it doesn't seem to actually cause problems when the container has the wrong type 🤷

chriddyp · 2020-06-24T23:22:04Z

Do we want to test loading states for chained callbacks too? Dropdown A ➡️ Dropdown B ➡️ Graph. If Dropdown A changes, do we show a loading state for Graph before Dropdown B is updated?

I'm not sure what the existing behavior is but seems like it could be another piece of logic that could've changed during the refactor.

alexcjohnson · 2020-06-24T23:26:23Z

Do we want to test loading states for chained callbacks too?

Sure, I can add a test for that later tonight.

chriddyp · 2020-06-24T23:50:55Z

Here is a test case for chained callbacks & loading states:

importdashfromdash.dependenciesimportInput, Outputimportdash_core_componentsasdccimportdash_html_componentsashtmlimporttimeapp=dash.Dash(__name__)
app.layout=html.Div([
html.Button(id='button', children='Start', n_clicks=0),
html.Div(
dcc.Loading(html.Div(id='output-1', style={
'width': 200,
'height': 200,
'backgroundColor': 'hotpink',
})),
style={'display': 'inline-block'}
),
html.Div(
dcc.Loading(html.Div(id='output-2', style={
'width': 200,
'height': 200,
'backgroundColor': 'rebeccapurple',
})),
style={'display': 'inline-block'}
),
html.Div(
dcc.Loading(html.Div(id='output-3', style={
'width': 200,
'height': 200,
'backgroundColor': 'green',
})), style={'display': 'inline-block'}
),
html.Div(
dcc.Loading(html.Div(id='output-4', style={
'width': 200,
'height': 200,
'backgroundColor': '#FF851B', # orange
})),
style={'display': 'inline-block'}
)
])
@app.callback(Output('output-1', 'children'), [Input('button', 'n_clicks')])defupdate_output_2(n_clicks):
time.sleep(2)
return'Output 1: {}'.format(n_clicks)
@app.callback(Output('output-2', 'children'), [Input('output-1', 'children')])defupdate_output_2(children):
time.sleep(2)
return'Output 2: {}'.format(children)
@app.callback([Output('output-3', 'children'), Output('output-4', 'children')], [Input('output-2', 'children')])defupdate_output_2(children):
time.sleep(2)
return [
'Output 3: {}'.format(children),
'Output 4: {}'.format(children)
]
if__name__=='__main__':
app.run_server(debug=True)

In 1.12.0 we don't display a loading state for grandchildren, only immediate children. Looks like the 1.13 behavior is the same right now.

Here's what this looks like in 1.12.0

alexcjohnson · 2020-06-25T01:51:38Z

Thanks @chriddyp - added that app as a test case in a225922

chriddyp

💃 beautiful

This release upgrades dash-renderer from v1.4.1 to v1.5.1, and is timed with the release of Dash for Python v1.13.4. This update also addresses a regression that prevented multiple loading states from displaying concurrently when a callback updates multiple outputs, as noted in [plotly/dash#1310](plotly/dash#1310).

alexcjohnson · 2020-06-24T23:16:07Z

Fixeshttps://github.com/plotly/dash-core/issues/195
Regression from #1254 - only one loading state could be shown at a time.

I have run the tests locally and they passed. (refer to testing section in contributing)
I have added tests, or extended existing tests, to cover any new features or bugs fixed in this PR
I have added entry in the CHANGELOG.md

alexcjohnson · 2020-06-24T23:19:40Z

- forEach(p => {
- target = (target[p] =
- target[p] ??
- p === 'children' ? [] : {}


Turns out ?? has higher precedence than ? in JS 🙈 The only necessary part of this fix is the extra parentheses around this line.
Added the typeof path[i + 1] clause so that the [] vs {} distinction is correct - though it doesn't seem to actually cause problems when the container has the wrong type 🤷

chriddyp · 2020-06-24T23:22:04Z

Do we want to test loading states for chained callbacks too? Dropdown A ➡️ Dropdown B ➡️ Graph. If Dropdown A changes, do we show a loading state for Graph before Dropdown B is updated?

I'm not sure what the existing behavior is but seems like it could be another piece of logic that could've changed during the refactor.

alexcjohnson · 2020-06-24T23:26:23Z

Do we want to test loading states for chained callbacks too?

Sure, I can add a test for that later tonight.

chriddyp · 2020-06-24T23:50:55Z

Here is a test case for chained callbacks & loading states:

importdashfromdash.dependenciesimportInput, Outputimportdash_core_componentsasdccimportdash_html_componentsashtmlimporttimeapp=dash.Dash(__name__)
app.layout=html.Div([
html.Button(id='button', children='Start', n_clicks=0),
html.Div(
dcc.Loading(html.Div(id='output-1', style={
'width': 200,
'height': 200,
'backgroundColor': 'hotpink',
})),
style={'display': 'inline-block'}
),
html.Div(
dcc.Loading(html.Div(id='output-2', style={
'width': 200,
'height': 200,
'backgroundColor': 'rebeccapurple',
})),
style={'display': 'inline-block'}
),
html.Div(
dcc.Loading(html.Div(id='output-3', style={
'width': 200,
'height': 200,
'backgroundColor': 'green',
})), style={'display': 'inline-block'}
),
html.Div(
dcc.Loading(html.Div(id='output-4', style={
'width': 200,
'height': 200,
'backgroundColor': '#FF851B', # orange
})),
style={'display': 'inline-block'}
)
])
@app.callback(Output('output-1', 'children'), [Input('button', 'n_clicks')])defupdate_output_2(n_clicks):
time.sleep(2)
return'Output 1: {}'.format(n_clicks)
@app.callback(Output('output-2', 'children'), [Input('output-1', 'children')])defupdate_output_2(children):
time.sleep(2)
return'Output 2: {}'.format(children)
@app.callback([Output('output-3', 'children'), Output('output-4', 'children')], [Input('output-2', 'children')])defupdate_output_2(children):
time.sleep(2)
return [
'Output 3: {}'.format(children),
'Output 4: {}'.format(children)
]
if__name__=='__main__':
app.run_server(debug=True)

In 1.12.0 we don't display a loading state for grandchildren, only immediate children. Looks like the 1.13 behavior is the same right now.

Here's what this looks like in 1.12.0

alexcjohnson · 2020-06-25T01:51:38Z

Thanks @chriddyp - added that app as a test case in a225922

chriddyp

💃 beautiful

This release upgrades dash-renderer from v1.4.1 to v1.5.1, and is timed with the release of Dash for Python v1.13.4. This update also addresses a regression that prevented multiple loading states from displaying concurrently when a callback updates multiple outputs, as noted in [plotly/dash#1310](plotly/dash#1310).

alexcjohnson · 2020-06-24T23:16:07Z

Fixeshttps://github.com/plotly/dash-core/issues/195
Regression from #1254 - only one loading state could be shown at a time.

I have run the tests locally and they passed. (refer to testing section in contributing)
I have added tests, or extended existing tests, to cover any new features or bugs fixed in this PR
I have added entry in the CHANGELOG.md

alexcjohnson · 2020-06-24T23:19:40Z

- forEach(p => {
- target = (target[p] =
- target[p] ??
- p === 'children' ? [] : {}


Turns out ?? has higher precedence than ? in JS 🙈 The only necessary part of this fix is the extra parentheses around this line.
Added the typeof path[i + 1] clause so that the [] vs {} distinction is correct - though it doesn't seem to actually cause problems when the container has the wrong type 🤷

chriddyp · 2020-06-24T23:22:04Z

Do we want to test loading states for chained callbacks too? Dropdown A ➡️ Dropdown B ➡️ Graph. If Dropdown A changes, do we show a loading state for Graph before Dropdown B is updated?

I'm not sure what the existing behavior is but seems like it could be another piece of logic that could've changed during the refactor.

alexcjohnson · 2020-06-24T23:26:23Z

Do we want to test loading states for chained callbacks too?

Sure, I can add a test for that later tonight.

chriddyp · 2020-06-24T23:50:55Z

Here is a test case for chained callbacks & loading states:

importdashfromdash.dependenciesimportInput, Outputimportdash_core_componentsasdccimportdash_html_componentsashtmlimporttimeapp=dash.Dash(__name__)
app.layout=html.Div([
html.Button(id='button', children='Start', n_clicks=0),
html.Div(
dcc.Loading(html.Div(id='output-1', style={
'width': 200,
'height': 200,
'backgroundColor': 'hotpink',
})),
style={'display': 'inline-block'}
),
html.Div(
dcc.Loading(html.Div(id='output-2', style={
'width': 200,
'height': 200,
'backgroundColor': 'rebeccapurple',
})),
style={'display': 'inline-block'}
),
html.Div(
dcc.Loading(html.Div(id='output-3', style={
'width': 200,
'height': 200,
'backgroundColor': 'green',
})), style={'display': 'inline-block'}
),
html.Div(
dcc.Loading(html.Div(id='output-4', style={
'width': 200,
'height': 200,
'backgroundColor': '#FF851B', # orange
})),
style={'display': 'inline-block'}
)
])
@app.callback(Output('output-1', 'children'), [Input('button', 'n_clicks')])defupdate_output_2(n_clicks):
time.sleep(2)
return'Output 1: {}'.format(n_clicks)
@app.callback(Output('output-2', 'children'), [Input('output-1', 'children')])defupdate_output_2(children):
time.sleep(2)
return'Output 2: {}'.format(children)
@app.callback([Output('output-3', 'children'), Output('output-4', 'children')], [Input('output-2', 'children')])defupdate_output_2(children):
time.sleep(2)
return [
'Output 3: {}'.format(children),
'Output 4: {}'.format(children)
]
if__name__=='__main__':
app.run_server(debug=True)

In 1.12.0 we don't display a loading state for grandchildren, only immediate children. Looks like the 1.13 behavior is the same right now.

Here's what this looks like in 1.12.0

alexcjohnson · 2020-06-25T01:51:38Z

Thanks @chriddyp - added that app as a test case in a225922

chriddyp

💃 beautiful

This release upgrades dash-renderer from v1.4.1 to v1.5.1, and is timed with the release of Dash for Python v1.13.4. This update also addresses a regression that prevented multiple loading states from displaying concurrently when a callback updates multiple outputs, as noted in [plotly/dash#1310](plotly/dash#1310).

alexcjohnson · 2020-06-24T23:16:07Z

Fixeshttps://github.com/plotly/dash-core/issues/195
Regression from #1254 - only one loading state could be shown at a time.

I have run the tests locally and they passed. (refer to testing section in contributing)
I have added tests, or extended existing tests, to cover any new features or bugs fixed in this PR
I have added entry in the CHANGELOG.md

alexcjohnson · 2020-06-24T23:19:40Z

- forEach(p => {
- target = (target[p] =
- target[p] ??
- p === 'children' ? [] : {}


Turns out ?? has higher precedence than ? in JS 🙈 The only necessary part of this fix is the extra parentheses around this line.
Added the typeof path[i + 1] clause so that the [] vs {} distinction is correct - though it doesn't seem to actually cause problems when the container has the wrong type 🤷

chriddyp · 2020-06-24T23:22:04Z

Do we want to test loading states for chained callbacks too? Dropdown A ➡️ Dropdown B ➡️ Graph. If Dropdown A changes, do we show a loading state for Graph before Dropdown B is updated?

I'm not sure what the existing behavior is but seems like it could be another piece of logic that could've changed during the refactor.

alexcjohnson · 2020-06-24T23:26:23Z

Do we want to test loading states for chained callbacks too?

Sure, I can add a test for that later tonight.

chriddyp · 2020-06-24T23:50:55Z

Here is a test case for chained callbacks & loading states:

importdashfromdash.dependenciesimportInput, Outputimportdash_core_componentsasdccimportdash_html_componentsashtmlimporttimeapp=dash.Dash(__name__)
app.layout=html.Div([
html.Button(id='button', children='Start', n_clicks=0),
html.Div(
dcc.Loading(html.Div(id='output-1', style={
'width': 200,
'height': 200,
'backgroundColor': 'hotpink',
})),
style={'display': 'inline-block'}
),
html.Div(
dcc.Loading(html.Div(id='output-2', style={
'width': 200,
'height': 200,
'backgroundColor': 'rebeccapurple',
})),
style={'display': 'inline-block'}
),
html.Div(
dcc.Loading(html.Div(id='output-3', style={
'width': 200,
'height': 200,
'backgroundColor': 'green',
})), style={'display': 'inline-block'}
),
html.Div(
dcc.Loading(html.Div(id='output-4', style={
'width': 200,
'height': 200,
'backgroundColor': '#FF851B', # orange
})),
style={'display': 'inline-block'}
)
])
@app.callback(Output('output-1', 'children'), [Input('button', 'n_clicks')])defupdate_output_2(n_clicks):
time.sleep(2)
return'Output 1: {}'.format(n_clicks)
@app.callback(Output('output-2', 'children'), [Input('output-1', 'children')])defupdate_output_2(children):
time.sleep(2)
return'Output 2: {}'.format(children)
@app.callback([Output('output-3', 'children'), Output('output-4', 'children')], [Input('output-2', 'children')])defupdate_output_2(children):
time.sleep(2)
return [
'Output 3: {}'.format(children),
'Output 4: {}'.format(children)
]
if__name__=='__main__':
app.run_server(debug=True)

In 1.12.0 we don't display a loading state for grandchildren, only immediate children. Looks like the 1.13 behavior is the same right now.

Here's what this looks like in 1.12.0

alexcjohnson · 2020-06-25T01:51:38Z

Thanks @chriddyp - added that app as a test case in a225922

chriddyp

💃 beautiful

This release upgrades dash-renderer from v1.4.1 to v1.5.1, and is timed with the release of Dash for Python v1.13.4. This update also addresses a regression that prevented multiple loading states from displaying concurrently when a callback updates multiple outputs, as noted in [plotly/dash#1310](plotly/dash#1310).

fix multiple concurrnt loading states
1b673e3

alexcjohnson requested a review from Marc-Andre-Rivet as a code owner June 24, 2020 23:16

alexcjohnson commented Jun 24, 2020
View reviewed changes

changelog for loading states fix
b012fd6

alexcjohnson added 2 commits June 24, 2020 20:52

move new loading state test to its own file
32939ef

add chained loading states test and format
a225922

alexcjohnson requested a review from chriddyp June 25, 2020 02:04

chriddyp approved these changes Jun 25, 2020
View reviewed changes

alexcjohnson merged commit 0d528ac into devJun 25, 2020

alexcjohnson deleted the multi-loading branch June 25, 2020 13:02

rpkyle mentioned this pull request Jun 25, 2020
Dash for R v0.6.3 plotly/dashR#213
Merged

fix multiple concurrnt loading states
1b673e3

alexcjohnson requested a review from Marc-Andre-Rivet as a code owner June 24, 2020 23:16

alexcjohnson commented Jun 24, 2020
View reviewed changes

changelog for loading states fix
b012fd6

alexcjohnson added 2 commits June 24, 2020 20:52

move new loading state test to its own file
32939ef

add chained loading states test and format
a225922

alexcjohnson requested a review from chriddyp June 25, 2020 02:04

chriddyp approved these changes Jun 25, 2020
View reviewed changes

alexcjohnson merged commit 0d528ac into devJun 25, 2020

alexcjohnson deleted the multi-loading branch June 25, 2020 13:02

rpkyle mentioned this pull request Jun 25, 2020
Dash for R v0.6.3 plotly/dashR#213
Merged

fix multiple concurrnt loading states
1b673e3

alexcjohnson requested a review from Marc-Andre-Rivet as a code owner June 24, 2020 23:16

alexcjohnson commented Jun 24, 2020
View reviewed changes

changelog for loading states fix
b012fd6

alexcjohnson added 2 commits June 24, 2020 20:52

move new loading state test to its own file
32939ef

add chained loading states test and format
a225922

alexcjohnson requested a review from chriddyp June 25, 2020 02:04

chriddyp approved these changes Jun 25, 2020
View reviewed changes

alexcjohnson merged commit 0d528ac into devJun 25, 2020

alexcjohnson deleted the multi-loading branch June 25, 2020 13:02

rpkyle mentioned this pull request Jun 25, 2020
Dash for R v0.6.3 plotly/dashR#213
Merged

fix multiple concurrnt loading states
1b673e3

alexcjohnson requested a review from Marc-Andre-Rivet as a code owner June 24, 2020 23:16

alexcjohnson commented Jun 24, 2020
View reviewed changes

changelog for loading states fix
b012fd6

alexcjohnson added 2 commits June 24, 2020 20:52

move new loading state test to its own file
32939ef

add chained loading states test and format
a225922

alexcjohnson requested a review from chriddyp June 25, 2020 02:04

chriddyp approved these changes Jun 25, 2020
View reviewed changes

alexcjohnson merged commit 0d528ac into devJun 25, 2020

alexcjohnson deleted the multi-loading branch June 25, 2020 13:02

rpkyle mentioned this pull request Jun 25, 2020
Dash for R v0.6.3 plotly/dashR#213
Merged

fix multiple concurrnt loading states
1b673e3

alexcjohnson requested a review from Marc-Andre-Rivet as a code owner June 24, 2020 23:16

alexcjohnson commented Jun 24, 2020
View reviewed changes

changelog for loading states fix
b012fd6

alexcjohnson added 2 commits June 24, 2020 20:52

move new loading state test to its own file
32939ef

add chained loading states test and format
a225922

alexcjohnson requested a review from chriddyp June 25, 2020 02:04

chriddyp approved these changes Jun 25, 2020
View reviewed changes

alexcjohnson merged commit 0d528ac into devJun 25, 2020

alexcjohnson deleted the multi-loading branch June 25, 2020 13:02

rpkyle mentioned this pull request Jun 25, 2020
Dash for R v0.6.3 plotly/dashR#213
Merged

fix multiple concurrnt loading states
1b673e3

alexcjohnson requested a review from Marc-Andre-Rivet as a code owner June 24, 2020 23:16

alexcjohnson commented Jun 24, 2020
View reviewed changes

changelog for loading states fix
b012fd6

alexcjohnson added 2 commits June 24, 2020 20:52

move new loading state test to its own file
32939ef

add chained loading states test and format
a225922

alexcjohnson requested a review from chriddyp June 25, 2020 02:04

chriddyp approved these changes Jun 25, 2020
View reviewed changes

alexcjohnson merged commit 0d528ac into devJun 25, 2020

alexcjohnson deleted the multi-loading branch June 25, 2020 13:02

rpkyle mentioned this pull request Jun 25, 2020
Dash for R v0.6.3 plotly/dashR#213
Merged

fix multiple concurrnt loading states
1b673e3

alexcjohnson requested a review from Marc-Andre-Rivet as a code owner June 24, 2020 23:16

alexcjohnson commented Jun 24, 2020
View reviewed changes

changelog for loading states fix
b012fd6

alexcjohnson added 2 commits June 24, 2020 20:52

move new loading state test to its own file
32939ef

add chained loading states test and format
a225922

alexcjohnson requested a review from chriddyp June 25, 2020 02:04

chriddyp approved these changes Jun 25, 2020
View reviewed changes

alexcjohnson merged commit 0d528ac into devJun 25, 2020

alexcjohnson deleted the multi-loading branch June 25, 2020 13:02

rpkyle mentioned this pull request Jun 25, 2020
Dash for R v0.6.3 plotly/dashR#213
Merged

fix multiple concurrnt loading states
1b673e3

alexcjohnson requested a review from Marc-Andre-Rivet as a code owner June 24, 2020 23:16

alexcjohnson commented Jun 24, 2020
View reviewed changes

changelog for loading states fix
b012fd6

alexcjohnson added 2 commits June 24, 2020 20:52

move new loading state test to its own file
32939ef

add chained loading states test and format
a225922

alexcjohnson requested a review from chriddyp June 25, 2020 02:04

chriddyp approved these changes Jun 25, 2020
View reviewed changes

alexcjohnson merged commit 0d528ac into devJun 25, 2020

alexcjohnson deleted the multi-loading branch June 25, 2020 13:02

rpkyle mentioned this pull request Jun 25, 2020
Dash for R v0.6.3 plotly/dashR#213
Merged

Uh oh!

Uh oh!

Conversation

alexcjohnson commented Jun 24, 2020• edited Loading Uh oh! There was an error while loading. Please reload this page.

Uh oh!

Uh oh!

alexcjohnsonJun 24, 2020

Choose a reason for hiding this comment

Uh oh!

chriddyp commented Jun 24, 2020

Uh oh!

alexcjohnson commented Jun 24, 2020

Uh oh!

chriddyp commented Jun 24, 2020

Uh oh!

alexcjohnson commented Jun 25, 2020

Uh oh!

chriddyp left a comment

Choose a reason for hiding this comment

Uh oh!

Reviewers

Assignees

Labels

Projects

Milestone

Development

Uh oh!

2 participants

Uh oh!

Uh oh!

Conversation

alexcjohnson commented Jun 24, 2020• edited Loading Uh oh! There was an error while loading. Please reload this page.

Uh oh!

Uh oh!

alexcjohnsonJun 24, 2020

Choose a reason for hiding this comment

Uh oh!

chriddyp commented Jun 24, 2020

Uh oh!

alexcjohnson commented Jun 24, 2020

Uh oh!

chriddyp commented Jun 24, 2020

Uh oh!

alexcjohnson commented Jun 25, 2020

Uh oh!

chriddyp left a comment

Choose a reason for hiding this comment

Uh oh!

Reviewers

Assignees

Labels

Projects

Milestone

Development

Uh oh!

2 participants

Uh oh!

Uh oh!

Conversation

alexcjohnson commented Jun 24, 2020• edited Loading Uh oh! There was an error while loading. Please reload this page.

Uh oh!

Uh oh!

alexcjohnsonJun 24, 2020

Choose a reason for hiding this comment

Uh oh!

chriddyp commented Jun 24, 2020

Uh oh!

alexcjohnson commented Jun 24, 2020

Uh oh!

chriddyp commented Jun 24, 2020

Uh oh!

alexcjohnson commented Jun 25, 2020

Uh oh!

chriddyp left a comment

Choose a reason for hiding this comment

Uh oh!

Reviewers

Assignees

Labels

Projects

alexcjohnson commented Jun 24, 2020•
edited
Loading

alexcjohnson commented Jun 24, 2020•
edited
Loading

alexcjohnson commented Jun 24, 2020•
edited
Loading

alexcjohnson commented Jun 24, 2020•
edited
Loading

alexcjohnson commented Jun 24, 2020•
edited
Loading