Avoid excessive updates

circle.yml

@@ -1,16 +1,15 @@
 machine:
+    pre:
+        - echo export PERCY_PARALLEL_NONCE=$CIRCLE_BUILD_NUM >> $HOME/.circlerc
+
     node:
         version: 6.9.2
     post:
-        - pyenv global 2.7.10 3.3.6 3.4.4 3.5.3 3.6.2
+        - pyenv global 2.7.10 3.6.2
     environment:
         TOX_PYTHON_27: python2.7
-        TOX_PYTHON_33: python3.3
-        TOX_PYTHON_34: python3.4
-        TOX_PYTHON_35: python3.5
         TOX_PYTHON_36: python3.6
 
-
 dependencies:
     pre:
         - pip install tox

dash_renderer/__init__.py

@@ -30,9 +30,9 @@
     {
         'relative_package_path': 'bundle.js',
         "external_url": (
-            'https://unpkg.com/dash-renderer@{}'
+            'https://unpkg.com/dash-renderer@0.10.0-rc1'
             '/dash_renderer/bundle.js'
-        ).format(__version__),
+        ),
         'namespace': 'dash_renderer'
     }
 ]

dash_renderer/version.py

@@ -1 +1 @@
-__version__ = '0.9.0'
+__version__ = '0.10.0rc1'

dev-requirements.txt

@@ -1,6 +1,6 @@
 dash_core_components==0.12.0
 dash_html_components==0.7.0
-dash==0.18.0
+dash==0.18.3
 percy
 selenium
 mock

package.json

@@ -1,6 +1,6 @@
 {
   "name": "dash-renderer",
-  "version": "0.9.0",
+  "version": "0.10.0-rc1",
   "description": "render dash components in react",
   "main": "src/index.js",
   "scripts": {

src/actions/index.js

@@ -7,7 +7,9 @@ import {
     isEmpty,
     keys,
     lensPath,
+    pluck,
     reject,
+    slice,
     sort,
     type,
     union,
@@ -40,10 +42,10 @@ function triggerDefaultState(dispatch, getState) {
     const {graphs} = getState();
     const {InputGraph} = graphs;
     const allNodes = InputGraph.overallOrder();
+    const inputNodeIds = [];
     allNodes.reverse();
     allNodes.forEach(nodeId => {
-        const [componentId, componentProp] = nodeId.split('.');
-
+        const componentId = nodeId.split('.')[0];
         /*
          * Filter out the outputs,
          * inputs that aren't leaves,
@@ -53,24 +55,28 @@ function triggerDefaultState(dispatch, getState) {
             InputGraph.dependantsOf(nodeId).length == 0 &&
             has(componentId, getState().paths)
         ) {
+            inputNodeIds.push(nodeId);
+        }
+    });
 
-            // Get the initial property
-            const propLens = lensPath(
-                concat(getState().paths[componentId],
-                ['props', componentProp]
-            ));
-            const propValue = view(
-                propLens,
-                getState().layout
-            );
-
-            dispatch(notifyObservers({
-                id: componentId,
-                props: {[componentProp]: propValue}
-            }));
+    reduceInputIds(inputNodeIds, InputGraph).forEach(nodeId => {
+        const [componentId, componentProp] = nodeId.split('.');
+        // Get the initial property
+        const propLens = lensPath(
+            concat(getState().paths[componentId],
+            ['props', componentProp]
+        ));
+        const propValue = view(
+            propLens,
+            getState().layout
+        );
 
-        }
+        dispatch(notifyObservers({
+            id: componentId,
+            props: {[componentProp]: propValue}
+        }));
     });
+
 }
 
 export function redo() {
@@ -116,6 +122,31 @@ export function undo() {
 
 
 
+function reduceInputIds(nodeIds, InputGraph) {
+    /*
+     * Create input-output(s) pairs,
+     * sort by number of outputs,
+     * and remove redudant inputs (inputs that update the same output)
+     */
+    const inputOutputPairs = nodeIds.map(nodeId => ({
+        input: nodeId,
+        outputs: InputGraph.dependenciesOf(nodeId)
+    }));
+
+    const sortedInputOutputPairs = sort(
+        (a, b) => b.outputs.length - a.outputs.length,
+        inputOutputPairs
+    );
+
+    const uniquePairs = sortedInputOutputPairs.filter((pair, i) => !contains(
+        pair.outputs,
+        pluck('outputs', slice(i + 1, Infinity, sortedInputOutputPairs))
+    ));
+
+    return pluck('input', uniquePairs);
+}
+
+
 
 export function notifyObservers(payload) {
     return function (dispatch, getState) {
@@ -136,7 +167,6 @@ export function notifyObservers(payload) {
         const {EventGraph, InputGraph} = graphs;
 
         /*
-
          * Figure out all of the output id's that depend on this
          * event or input.
          * This includes id's that are direct children as well as
@@ -394,7 +424,7 @@ export function notifyObservers(payload) {
                              * We don't need to do this - just need
                              * to compute the subtree
                              */
-                            const newProps = [];
+                            const newProps = {};
                             crawlLayout(
                                 observerUpdatePayload.props.children,
                                 function appendIds(child) {
@@ -404,7 +434,7 @@ export function notifyObservers(payload) {
                                                 `${child.props.id}.${childProp}`
                                             );
                                             if (has(inputId, InputGraph.nodes)) {
-                                                newProps.push({
+                                                newProps[inputId] = ({
                                                     id: child.props.id,
                                                     props: {
                                                         [childProp]: child.props[childProp]
@@ -416,21 +446,20 @@ export function notifyObservers(payload) {
                                 }
                             );
 
+                            /*
+                             * Organize props by shared outputs so that we
+                             * only make one request per output component
+                             * (even if there are multiple inputs).
+                             */
+                            const reducedNodeIds = reduceInputIds(
+                                keys(newProps), InputGraph);
                             const depOrder = InputGraph.overallOrder();
                             const sortedNewProps = sort((a, b) =>
-                                depOrder.indexOf(a.id) - depOrder.indexOf(b.id),
-                                newProps
+                                depOrder.indexOf(a) - depOrder.indexOf(b),
+                                reducedNodeIds
                             );
-
-                            /*
-                             * TODO - As in the case of Jack Luo's indicator app,
-                             * all of these inputs could update a _single_ output.
-                             * If that is the case, then we can collect all of their
-                             * values and make a single request instead of making a
-                             * different request for each input
-                             */
-                            sortedNewProps.forEach(function(propUpdate) {
-                                dispatch(notifyObservers(propUpdate));
+                            sortedNewProps.forEach(function(nodeId) {
+                                dispatch(notifyObservers(newProps[nodeId]));
                             });
 
                         }

tests/IntegrationTests.py

@@ -9,12 +9,25 @@
 import percy
 import time
 import unittest
+import os
+import sys
 
 
 class IntegrationTests(unittest.TestCase):
 
+    def percy_snapshot(cls, name=''):
+        snapshot_name = '{} - {}'.format(name, sys.version_info)
+        print(snapshot_name)
+        cls.percy_runner.snapshot(
+            name=snapshot_name
+        )
+
     @classmethod
     def setUpClass(cls):
+        print('PERCY_PARALLEL_NONCE')
+        print(os.environ['PERCY_PARALLEL_NONCE'])
+        print('PERCY_PARALLEL_TOTAL')
+        print(os.environ['PERCY_PARALLEL_TOTAL'])
         super(IntegrationTests, cls).setUpClass()
         cls.driver = webdriver.Chrome()
 
@@ -25,6 +38,7 @@ def setUpClass(cls):
 
         cls.percy_runner.initialize_build()
 
+
     @classmethod
     def tearDownClass(cls):
         super(IntegrationTests, cls).tearDownClass()