fix #305: bug when output is list of one Output (#308)

* fix #305:
- simplify single_case vs multiple_case handling
- refactor calls to self.callback_map[target_id]
- adapt tests
- (misc) add missing dev dep on dash-bootstrap-components

* fix bug in reading response in the single_case

* remove dead code as according to https://github.com/plotly/dash/blob/dev/dash/dash.py#L1037, dash always returns a multi:true response

Co-authored-by: GFJ138 <sebastien.dementen@engie.com>

Author: sdementen

demo/demo/dash_apps.py

@@ -50,7 +50,8 @@
                                         className='col-md-12',
                                     ),
 
-                                    html.Div(id='test-output-div2')
+                                    html.Div(id='test-output-div2'),
+                                    html.Div(id='test-output-div3')
 
                                     ]) # end of 'main'
 
@@ -100,3 +101,35 @@ def callback_test2(*args, **kwargs):
                 html.Div(["The session context message is '%s'" %(kwargs['session_state']['django_to_dash_context'])])]
 
     return children
+
+@dash_example1.expanded_callback(
+    [dash.dependencies.Output('test-output-div3', 'children')],
+    [dash.dependencies.Input('my-dropdown1', 'value')])
+def callback_test(*args, **kwargs): #pylint: disable=unused-argument
+    'Callback to generate test data on each change of the dropdown'
+
+    # Creating a random Graph from a Plotly example:
+    N = 500
+    random_x = np.linspace(0, 1, N)
+    random_y = np.random.randn(N)
+
+    # Create a trace
+    trace = go.Scatter(x=random_x,
+                       y=random_y)
+
+    data = [trace]
+
+    layout = dict(title='',
+                  yaxis=dict(zeroline=False, title='Total Expense (£)',),
+                  xaxis=dict(zeroline=False, title='Date', tickangle=0),
+                  margin=dict(t=20, b=50, l=50, r=40),
+                  height=350,
+                 )
+
+
+    fig = dict(data=data, layout=layout)
+    line_graph = dcc.Graph(id='line-area-graph2', figure=fig, style={'display':'inline-block', 'width':'100%',
+                                                                     'height':'100%;'})
+    children = [line_graph]
+
+    return [children]

dev_requirements.txt

@@ -4,6 +4,7 @@ coveralls>=1.6.0
 channels>=2.0
 channels-redis
 daphne
+dash-bootstrap-components
 Django>=2.0
 django-bootstrap4
 django-redis

django_plotly_dash/dash_wrapper.py

@@ -589,43 +589,29 @@ def dispatch_with_args(self, body, argMap):
         if len(argMap) > 0:
             argMap['callback_context'] = callback_context
 
-        outputs = []
-        try:
-            if output[:2] == '..' and output[-2:] == '..':
-                # Multiple outputs
-                outputs = output[2:-2].split('...')
-                target_id = output
-                # Special case of a single output
-                if len(outputs) == 1:
-                    target_id = output[2:-2]
-        except:
-            pass
-
-        single_case = False
-        if len(outputs) < 1:
-            try:
-                output_id = output['id']
-                output_property = output['property']
-                target_id = "%s.%s" %(output_id, output_property)
-            except:
-                target_id = output
-                output_id, output_property = output.split(".")
-            single_case = True
-            outputs = [output,]
+        single_case = not(output.startswith('..') and output.endswith('..'))
+        if single_case:
+            # single Output (not in a list)
+            outputs = [output]
+        else:
+            # multiple outputs in a list (the list could contain a single item)
+            outputs = output[2:-2].split('...')
 
         args = []
 
         da = argMap.get('dash_app', None)
 
-        for component_registration in self.callback_map[target_id]['inputs']:
+        callback_info = self.callback_map[output]
+
+        for component_registration in callback_info['inputs']:
             for c in inputs:
                 if c['property'] == component_registration['property'] and c['id'] == component_registration['id']:
                     v = c.get('value', None)
                     args.append(v)
                     if da:
                         da.update_current_state(c['id'], c['property'], v)
 
-        for component_registration in self.callback_map[target_id]['state']:
+        for component_registration in callback_info['state']:
             for c in states:
                 if c['property'] == component_registration['property'] and c['id'] == component_registration['id']:
                     v = c.get('value', None)
@@ -638,21 +624,16 @@ def dispatch_with_args(self, body, argMap):
         argMap['outputs_list'] = outputs_list
 
         # Special: intercept case of insufficient arguments
-        # This happens when a propery has been updated with a pipe component
+        # This happens when a property has been updated with a pipe component
         # TODO see if this can be attacked from the client end
 
-        if len(args) < len(self.callback_map[target_id]['inputs']):
+        if len(args) < len(callback_info['inputs']):
             return 'EDGECASEEXIT'
 
-        res = self.callback_map[target_id]['callback'](*args, **argMap)
+        res = callback_info['callback'](*args, **argMap)
         if da:
-            if single_case and da.have_current_state_entry(output_id, output_property):
-                response = json.loads(res.data.decode('utf-8'))
-                value = response.get('response', {}).get('props', {}).get(output_property, None)
-                da.update_current_state(output_id, output_property, value)
+            root_value = json.loads(res).get('response', {})
 
-            response = json.loads(res)
-            root_value = response.get('response', {})
             for output_item in outputs:
                 if isinstance(output_item, str):
                     output_id, output_property = output_item.split('.')

django_plotly_dash/tests.py

@@ -221,10 +221,10 @@ def test_injection_updating(client):
 
         rStart = b'{"response": {"test-output-div": {"children": [{"props": {"id": "line-area-graph2"'
 
-        assert response.content[:len(rStart)] == rStart
+        assert response.content.startswith(rStart)
         assert response.status_code == 200
 
-        # New variant of output has a string used to name the properties
+        # Single output callback, output=="component_id.component_prop"
         response = client.post(url, json.dumps({'output':'test-output-div.children',
                                                 'inputs':[{'id':'my-dropdown1',
                                                            'property':'value',
@@ -233,49 +233,61 @@ def test_injection_updating(client):
 
         rStart = b'{"response": {"test-output-div": {"children": [{"props": {"id": "line-area-graph2"'
 
-        assert response.content[:len(rStart)] == rStart
+        assert response.content.startswith(rStart)
         assert response.status_code == 200
 
-        # Second variant has a single-entry mulitple property output
-        response = client.post(url, json.dumps({'output':'..test-output-div.children..',
+        # Single output callback, fails if output=="..component_id.component_prop.."
+        with pytest.raises(KeyError, match="..test-output-div.children.."):
+            client.post(url, json.dumps({'output':'..test-output-div.children..',
                                                 'inputs':[{'id':'my-dropdown1',
                                                            'property':'value',
                                                            'value':'TestIt'},
                                                          ]}), content_type="application/json")
 
-        rStart = b'{"response": {"test-output-div": {"children": {"props": {"id": "line-area-graph2"'
 
-        assert response.content[:len(rStart)] == rStart
-        assert response.status_code == 200
+        # Multiple output callback, fails if output=="component_id.component_prop"
+        with pytest.raises(KeyError, match="test-output-div3.children"):
+            client.post(url, json.dumps({'output':'test-output-div3.children',
+                                                'inputs':[{'id':'my-dropdown1',
+                                                           'property':'value',
+                                                           'value':'TestIt'},
+                                                         ]}), content_type="application/json")
 
-        have_thrown = False
 
-        try:
+        # Multiple output callback, output=="..component_id.component_prop.."
+        response = client.post(url, json.dumps({'output':'..test-output-div3.children..',
+                                                'inputs':[{'id':'my-dropdown1',
+                                                           'property':'value',
+                                                           'value':'TestIt'},
+                                                         ]}), content_type="application/json")
+
+        rStart = b'{"response": {"test-output-div3": {"children": [{"props": {"id": "line-area-graph2"'
+
+        assert response.content.startswith(rStart)
+        assert response.status_code == 200
+
+        with pytest.raises(KeyError, match="django_to_dash_context"):
             client.post(url, json.dumps({'output': 'test-output-div2.children',
                                          'inputs':[{'id':'my-dropdown2',
                                                     'property':'value',
                                                     'value':'TestIt'},
                                                   ]}), content_type="application/json")
-        except:
-            have_thrown = True
-
-        assert have_thrown
 
         session = client.session
         session['django_plotly_dash'] = {'django_to_dash_context': 'Test 789 content'}
         session.save()
 
-        response3 = client.post(url, json.dumps({'output': 'test-output-div2.children',
+        response = client.post(url, json.dumps({'output': 'test-output-div2.children',
                                                  'inputs':[{'id':'my-dropdown2',
                                                             'property':'value',
                                                             'value':'TestIt'},
                                                           ]}), content_type="application/json")
-        rStart3 = b'{"response": {"test-output-div2": {"children": [{"props": {"children": ["You have '
+        rStart = b'{"response": {"test-output-div2": {"children": [{"props": {"children": ["You have '
 
-        assert response3.content[:len(rStart3)] == rStart3
-        assert response3.status_code == 200
+        assert response.content.startswith(rStart)
+        assert response.status_code == 200
 
-        assert response3.content.find(b'Test 789 content') > 0
+        assert response.content.find(b'Test 789 content') > 0
 
 
 @pytest.mark.django_db