Repository navigation
Validation on component properties #264
Description
This is part of the "A Pleasant and Productive Developer Experience" objective ❤️
Currently, we don't do any validation on property values of components. So, if you pass in
html.Div([[]])
instead of
html.Div([])
Dash will not raise an error but instead silently fail in the front-end, sometimes but not always showing the notorious "Error loading dependencies" error message.
We have all of the prop-type values available in the component's metadata.json files, extracted from the component's propTypes.
For example, here is the Dropdown.react.js prop types:
https://github.com/plotly/dash-core-components/blob/7c2b102c680d9fe0cb9df61f1682feccfa3ddc05/src/components/Dropdown.react.js#L101-L180
and here is it's associated JSON types:
https://github.com/plotly/dash-core-components/blob/7c2b102c680d9fe0cb9df61f1682feccfa3ddc05/dash_core_components/metadata.json#L810-L946
So, implementing prop type checking would involve:
- Making sure that all component props are sufficiently described. I'm sure that flexible properties like
childrenaren't sufficiently described. For example,childrenis most explicitly:
propTypes.oneOfType([
PropTypes.string,
PropTypes.null,
PropTypes.number,
PropTypes.node,
PropTypes.arrayOf(
propTypes.oneOfType([
PropTypes.string,
PropTypes.null,
PropTypes.number,
PropTypes.node,
])
)
])
- Use the
metadata.jsonproperty types to raise helpful error messages. I used the Cerberus package recently for type-checking and I think it's a really good fit for this project. It has a declarative structure for describing nested properties that is very similar to the structure inmetadata.json - Type validation will exist as part of the component base class: https://github.com/plotly/dash/blob/master/dash/development/base_component.py
Activity
zogzog commentedon Oct 31, 2018
Well, ok. However the experience of working dash apps suddenly not starting was not that pleasant (I know, I should have pinned a precise dash version).
Also I had to stuff
children={}all over the place. And replace a few Nones with ''. That gets the validator satisfied. And then "Error loading dependencies".rmarren1 commentedon Nov 2, 2018
@zogzog Thanks for taking the time to check out this PR! This is still packaged as a release candidate, so it shouldn't have been installed whether you pinned the version or not unless you explicitly asked for it (e.g.
pip install dash==0.29.0rc7). Did you install it using something different thanpip?I'd be interested to know the specific components that required
children={}or<something>="". Do you happen to remember which ones these were? The former should not have been required (perhaps a bug on our end, I do not think any components definechildrenas a JSON object), the latter is something would happen often since some string props are not nullable.Also, do you have an example that produces the "Error loading dependencies" bug? This is a common error in Dash when component properties are the wrong type, which would be bad because that's what this PR should solve. I think it may be
children={}causing this.zogzog commentedon Nov 9, 2018
@rmarren1 I had (mistakenly) pinned everything but dash itself and I hit this the last time I attempted a deployment. So as I previously reported I did whatever I could to satisfy the validator, only to land on the "error loading dependencies" thing. In the end I wound up pinning dash to 0.22.0rc2 to have a working version.
I think the validation thing is a good idea. However the js side of things is a bit creepy and debugging these errors remains unspeakable. Obviously since April things have moved a bit and even with a validated html structure I get into a non-working system.
As for an "example" I can only point to the relevant components : https://bitbucket.org/pythonian/tsview and https://bitbucket.org/pythonian/tshistory_editor ... (they're small components and can easily be reviewed. If you have look, I apologize in advance for the suboptimal formatting of the html part).
I fear I have thrown away (in anger) the commits that made validation happy ... (though some vcs surgery might bring them back to life, but not before monday :).
chriddyp commentedon Jul 29, 2019
Finished in plotly/dash-renderer#100