Validate component properties #264 #340

rmarren1 · 2018-08-17T13:05:27Z

PR for #264

Current Prerelease

pip install dash==0.29.0rc8
pip install dash-renderer==0.15.0rc1
pip install dash-core-components==0.31.0rc2
pip install dash-html-components==0.14.0rc3

Validation is on by default. To turn it off, you can set app.config.disable_component_validation = True

Test Cases to run for demo

import dash
import dash_html_components as html
import dash_core_components as dcc
import plotly.graph_objs as go
from dash.dependencies import Input, Output

app = dash.Dash()
app.scripts.config.serve_locally=True

app.layout = html.Div([
    html.Button(id='click1', children='click to return bad Div children'),
    html.Div(id='output1', **{'data-cb': 'foo'}),
    html.Button(id='click2', children='click to return a bad figure'),
    dcc.Graph(id='output2', figure={'data': [], 'layout': {}}),
    html.Button(id='click3', children='click to return a bad radio'),
    dcc.RadioItems(id='output3', options=[{'value': 'okay', 'label': 'okay'}]),
    html.Button(id='click4', children='click to make a figure with no id'),
    html.Div(id='output4'),
])



@app.callback(Output('output1', 'children'),
              [Input('click1', 'n_clicks')])
def crash_it1(clicks):
    if clicks:
        return [[]]
    return clicks

@app.callback(Output('output2', 'figure'),
              [Input('click2', 'n_clicks')])
def crash_it2(clicks):
    if clicks:
        return {'data': {'x': [1, 2, 3], 'y': [1, 2, 3], 'type': 'scatter'}, 'layout': {}}
    return go.Figure(data=[go.Scatter(x=[1,2,3], y=[1,2,3])], layout=go.Layout()) 

@app.callback(Output('output3', 'options'),
              [Input('click3', 'n_clicks')])
def crash_it3(clicks):
    if clicks:
        return [{'value': {'not okay': True}, 'labl': 'not okay'}]
    return [{'value': 'okay', 'label': 'okay'}]

@app.callback(Output('output4', 'children'),
              [Input('click4', 'n_clicks')])
def crash_it4(clicks):
    if clicks:
        return dcc.Graph()
    return dcc.Graph(id='hi')

app.run_server(debug=True, port=8050)

Example Error Messages

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, ...}])

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

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

PropTypes to Cerberus reference

PropType	Cerberus Schema Validated Against	Known Current Limitations
`array`	`{'type': 'list'}`
`bool`	`{'type': 'boolean'}`
`func`	`{}`	No validation occurs.
`object`	`{'type': 'dict'}`	Validates that input is explicitly a `dict` object. We cannot be more general (e.g. `collections.abc.Mapping`) since the core `Component` is an instance of that.
`string`	`{'type': 'string'}`
`symbol`	`{}`	No validation occurs
`node`	`{'anyof': [{'type': 'component'}, {'type': 'boolean'}, {'type': 'number'}, {'type': 'string'}, {'type': 'list', 'schema': {'anyof': [{'type': 'component'}, {'type': 'boolean'}, {'type': 'number'}, {'type': 'string'}]}}]}`
`instanceOf(Object)`	`{}`	No validation occurs
`oneOf(['val1', 2])`	`{'allowed': [None, 'val1', 2]}`	Strings will have `'` characters stripped off each end. This is because `metadata.json` generation serializes the literal values as json, so for example `PropTypes.oneOf(['News', 'Photos'])` serializes to `["'News'", "'Photos'"]`. reactjs/react-docgen#57
`oneOfType( [ PropTypes.string, PropTypes.bool ] )`	`{'anyof': [{'type': 'string', 'type': 'boolean'}]}`	If one of the types is a `PropType` that cannot be validated individually (e.g. `PropType.func`), no validation will occur and the schema will effectively be `{}`
`arrayOf( PropTypes.number )`	`{'type': 'list', 'schema': {'type': 'number'}}`
`objectOf( PropTypes.number )`	`{'type': 'dict', 'valueschema': {'type': 'number'}}`
`shape( { k1: PropTypes.string, k2: PropTypes.number } )`	`{'type': 'dict', 'allow_unknown': False, 'schema': {'k1': {'type': 'string}, 'k2': {'type': 'number'}}}`
`any`	`{'type': ('boolean', 'number', 'string', 'dict', 'list')}`

dash/dash.py

@@ -805,6 +811,23 @@ def wrap_func(func):
            def add_context(*args, **kwargs):

                output_value = func(*args, **kwargs)
+                setattr(


dash/dash.py

+                self._components[output.component_id]._validator.validate({
+                    output.component_property: output_value
+                })
+                if output.component_property == 'children':


dash/dash.py

+                    break
+            matched_state_value = matched_state.get('value', None)
+            args.append(matched_state_value)
+            setattr(


dash/development/base_component.py

rmarren1 · 2018-08-17T13:17:20Z

dash/development/base_component.py

+    pass
+
+
+cerberus.Validator.types_mapping['component'] =\


Let us validate Component objects with cerberus (useful for children prop)

dash/development/base_component.py

rmarren1 · 2018-08-17T13:20:14Z

dash/development/base_component.py

@@ -382,7 +488,8 @@ def __repr__(self):
         p not in keyword.kwlist and
         p not in ['dashEvents', 'fireEvent', 'setProps']] + ['**kwargs']
    )
-
+    schema = {str(k): generate_property_schema(v)


Make cerberus schema for this dash component type.

dash/development/base_component.py

Bachibouzouk · 2018-08-19T09:30:19Z

Hi, I tried to pip install this branch locally in a venv to test this PR, but I the way I did it doesn't work as I get an error by running the example code you provide above :
AttributeError: 'RadioItems' object has no attribute '_schema'

I typed the command pip install git+https://github.com/rmarren1/dash.git@validate, maybe it is not the way to proceed?

Bachibouzouk · 2018-08-19T09:51:32Z

dash/development/base_component.py

+
+
+
+# Forward declated Component class, see below.


did you mean 'declared'? PEP8 requires one space less :)

PS : this is my first review on dash code and I am mainly reading the code you wrote to learn more, my suggestion will mostly be about styling and spelling, I apologize in advance for that!

my suggestion will mostly be about styling and spelling, I apologize in advance for that!

Note that we enforce PEP8 in our tests here:

dash/.circleci/config.yml

Lines 38 to 39 in 4d93652

pylint dash setup.py --rcfile=$PYLINTRC

flake8 dash setup.py

So, it's not necessary to review PEP8 issues in our PRs as they will get fixed before it gets merged into master.

chriddyp · 2018-08-20T19:00:50Z

To validate the components in the callbacks, I think we'll need to pass the component name back in the _dash-update-components API call. With Dash's stateless backend, I think this will be the most reliable way to ensure that the front-end component that is getting updated is the same one that we are validating against.

So, that is, we could modify the Dash API to include type and namespace in the payload:

https://github.com/plotly/dash-renderer/blob/0dc6f331eda404ee848145db71a4dc3bc35a759e/src/actions/index.js#L406-L408

and then do a component lookup in the callback decorator

rmarren1 · 2018-08-20T20:08:36Z

^ Definitely, I was going to add this to the next iteration. You don't need this to validate against components in the initial layout, but I don't think there is any other way to validate against dynamically generated components without updating state in the backend after initialization.

rmarren1 · 2018-08-21T19:00:24Z

plotly/dash-core-components#257

rmarren1 · 2018-08-21T19:01:45Z

PR which adds 'type' and 'namespace' to the _dash-update-components payload. plotly/dash-renderer#69

rmarren1 · 2018-10-18T22:03:37Z

suppress_callback_exceptions is the current name, I would just be changing the name of the config to disable validation from disable_component_validation to suppress_validation_exceptions.

T4rk1n · 2018-10-18T22:05:26Z

Oh ok, I would still integrate with the dev tools so just setting debug=True is required for it.

rmarren1 · 2018-10-18T22:07:37Z

Oh I thought you meant something different, yeah it should be disabled in production.

T4rk1n · 2018-10-30T20:13:10Z

@rmarren1 How would the component as prop validate ? proptype is PropTypes.node.

rmarren1 · 2018-10-30T21:33:32Z

@T4rk1n There is a custom type called component which makes sure objects are an instance of dash.development.base_component.Component, PropTypes.node works with this custom type:

dash/dash/development/base_component.py

Lines 380 to 397 in 588ce3d

    
           'node': lambda x: { 
        
               'anyof': [ 
        
                   {'type': 'component'}, 
        
                   {'type': 'boolean'}, 
        
                   {'type': 'number'}, 
        
                   {'type': 'string'}, 
        
                   { 
        
                       'type': 'list', 
        
                       'schema': { 
        
                           'type': ( 
        
                               'component', 
        
                               'boolean', 
        
                               'number', 
        
                               'string') 
        
                       } 
        
                   } 
        
               ] 
        
           },

dash/dash.py

dash/development/base_component.py

rmarren1 · 2018-11-08T20:03:43Z

Closing in favor of #452, which is the same PR but with a more readable commit history. Will link back to here for the relevant discussions.

Allow tabs null children

rmarren1 added 3 commits August 14, 2018 21:53

Update layout on server with each callback, for ids in initial layout.

49d8c21

Update layout for dynamically created elements with ids.

12dc611

Cerberus validation of initial layout.

a0e2f4f