Hello Dash Community –
I’m excited to announce the new Dash Validation feature, which will be a major help in debugging Dash applications!
You can install Dash Validation with the following versions:
pip install dash==0.29.0rc6
pip install dash-renderer==0.15.0rc1
pip install dash-core-components==0.31.0rc2
pip install dash-html-components==0.14.0rc2
Validation is enabled by default with these versions. To turn it off, simply set app.config.disable_component_validation = True
.
All Dash component properties have a strict schema as defined in the PropTypes of the React Component definition.
Currently, when Dash components are initialized or when properties of Dash components are updated via callbacks, the property values are not validated against this schema. This can sometimes lead to difficult-to-debug errors being thrown in the front end, e.g. 1, 2. With this update, Dash will strictly validate against this schema and throw an informative error any time a value does not validate.
With Validation enabled, Dash will throw an error every time:
- You initialize a component with a property that does not match the property schema.
- For example, trying to set
html.Div(children=[[]])
. Thechildren
property does not allow for nested lists.
- For example, trying to set
- A callback to a property returns a value that does not match the property schema.
- For example, trying to set
Input.disabled
to the string"hello world"
.disabled
should be a Boolean.
- For example, trying to set
Would be great to hear any feedback / issues here, or on page for this PR
Here are some example error messages that would be thrown:
Updating RadioItems.options
with a typo in the label
key.
CallbackOutputValidationError:
A Dash Callback produced an invalid value!
Dash tried to update the `options` prop of the
`RadioItems` with id `output3` by calling the
`crash_it3` function with `(1)` as arguments.
This function call returned `[{'value': {'not okay': True}, 'labl': 'not okay'}]`, which did not pass
validation tests for the `RadioItems` component.
The expected schema for the `options` prop of the
`RadioItems` component is:
***************************************************************
{'schema': {'allow_unknown': False,
'nullable': False,
'schema': {'disabled': {'type': 'boolean'},
'label': {'type': 'string'},
'value': {'type': 'string'}},
'type': 'dict'},
'type': 'list'}
***************************************************************
The errors in validation are as follows:
* options
* 0
* value <- must be of string type
* labl <- unknown field
Updating Graph.figure
with an invalid Plotly figure
CallbackOutputValidationError:
A Dash Callback produced an invalid value!
Dash tried to update the `figure` prop of the
`Graph` with id `output2` by calling the
`crash_it2` function with `(1)` as arguments.
This function call returned `{'layout': {}, 'data': {'y': [1, 2, 3], 'x': [1, 2, 3], 'type': 'scatter'}}`, which did not pass
validation tests for the `Graph` component.
The expected schema for the `figure` prop of the
`Graph` component is:
***************************************************************
{'validator': 'plotly_figure'}
***************************************************************
The errors in validation are as follows:
* figure <- Invalid Plotly Figure:
Invalid value of type '__builtin__.dict' received for the 'data' property of
Received value: {'y': [1, 2, 3], 'x': [1, 2, 3], 'type': 'scatter'}
The 'data' property is a tuple of trace instances
that may be specified as:
- A list or tuple of trace instances
(e.g. [Scatter(...), Bar(...)])
- A list or tuple of dicts of string/value properties where:
- The 'type' property specifies the trace type
One of: ['mesh3d', 'splom', 'scattercarpet',
'scattergl', 'scatterternary', 'pie',
'surface', 'histogram', 'ohlc', 'heatmapgl',
'cone', 'scatterpolar', 'table',
'scatterpolargl', 'histogram2d', 'contour',
'carpet', 'box', 'violin', 'bar',
'contourcarpet', 'area', 'choropleth',
'candlestick', 'streamtube', 'parcoords',
'heatmap', 'barpolar', 'scattermapbox',
'scatter3d', 'pointcloud',
'histogram2dcontour', 'scatter', 'scattergeo',
'sankey']
- All remaining properties are passed to the constructor of
the specified trace type
(e.g. [{'type': 'scatter', ...}, {'type': 'bar, ...}])
Initializing RadioItems.options
with an invalid array
ComponentInitializationValidationError:
A Dash Component was initialized with invalid properties!
Dash tried to create a `RadioItems` component with the
following arguments, which caused a validation failure:
***************************************************************
{'id': 'output3', 'options': [{'label': 'okay', 'value': {}}]}
***************************************************************
The expected schema for the `RadioItems` component is:
***************************************************************
{'className': {'type': 'string'},
'dashEvents': {'allowed': ['change'], 'type': ('string', 'number')},
'fireEvent': {},
'id': {'type': 'string'},
'inputClassName': {'type': 'string'},
'inputStyle': {'type': 'dict'},
'labelClassName': {'type': 'string'},
'labelStyle': {'type': 'dict'},
'options': {'schema': {'allow_unknown': False,
'nullable': False,
'schema': {'disabled': {'type': 'boolean'},
'label': {'type': 'string'},
'value': {'type': 'string'}},
'type': 'dict'},
'type': 'list'},
'setProps': {},
'style': {'type': 'dict'},
'value': {'type': 'string'}}
***************************************************************
The errors in validation are as follows:
* options
* 0
* value <- must be of string type