CSS Loading States don't work with multi-output // Empty `component_name` and `prop_name` on `loading_state` for callbacks with multiple output
Nobody has claimed this yet.
- Dominant language
- Python
- Stars
- 24.4k
- Forks
- 2.3k
- Avg merge
- 2d 7h
- Merged PRs (30d)
- 13
Description
Behavior observed in dash==1.2.0 but has probably been present since multi-output support was added, shortly after loading_state, both in dash==0.39.0.
Problematic handling of multi-output is here: https://github.com/plotly/dash/blob/master/dash-renderer/src/TreeContainer.js#L313
The assumption is that all request strings are of the form id.prop but multi-output is of form ..id1.prop1...id1.prop2...id2.prop3.., resulting in '' component and prop name.
Expected behavior would be for prop_name to be an array of strings with the affected props if multiple values are found.
Test app - observed while reviewing / testing https://github.com/plotly/dash-table/pull/484 (the test case is essentially described here: https://github.com/plotly/dash-table/pull/484/files#r319109146)
import json
import time
import pandas as pd
import dash
from dash.dependencies import Input, Output, State
from dash.exceptions import PreventUpdate
from dash_table import DataTable, FormatTemplate
import dash_core_components as dcc
import dash_html_components as html
app = dash.Dash(__name__)
app.layout = DataTable(
id='table',
columns=[{
'name': x,
'id': x,
'selectable': True
} for x in ['a', 'b', 'c', 'd']],
column_selectable="single",
editable=True,
data=[{
'a': 'a' + str(x),
'b': 'b' + str(x) + str(x),
'c': 'c' + str(x) + 'c',
'd': 'd' + str(x) + '-' + str(x)
} for x in range(0,100)]
)
@app.callback(
[Output('table', 'style_data_conditional'), Output('table', 'style_data')],
[Input('table', 'selected_columns'), Input('table', 'data')]
)
def update_styles(selected_columns, data):
if selected_columns is None or data is None:
raise PreventUpdate
return [{
'if': { 'column_id': i },
'background_color': '#D2F3FF'
} for i in selected_columns], {}
if __name__ == '__main__':
app.run_server(debug=False)
Contributor guide
First steps
- Read the whole issue, then the project's contributing guide.
- Comment on the issue to say you are picking it up — it saves two people doing the same work.
- Fork the repository and make your change on a branch.
- Open a pull request that references the issue number.
Research direction
Start with dash-renderer/src/TreeContainer.js around line 313 and trace how multi-output request strings are parsed for loading states. Use the linked dash-table pull request test case and the supplied app to reproduce the empty component and prop names. Done means multi-output loading states identify the affected component and props, with prop_name represented as an array when multiple values are present.
Written by the indexing model from the issue text.
Assessment
- Tech stack
- javascript, python
- Domain
- frontend
- Issue type
- Bug
- Difficulty
- 3/5
- Estimated time
- 1-2 days
- Activity status
- Stale
- Clarity
- Mostly clear
- Newbie friendliness
- 45/100