disable circularity trigger when an output is also an input

Author: chadaeschliman

dash-renderer/src/actions/dependencies.js

@@ -363,32 +363,21 @@ function findDuplicateOutputs(outputs, head, dispatchError, outStrs, outObjs) {
     });
 }
 
-function findInOutOverlap(outputs, inputs, head, dispatchError) {
-    outputs.forEach((out, outi) => {
+function checkInOutOverlap(out, inputs) {
         const {id: outId, property: outProp} = out;
-        inputs.forEach((in_, ini) => {
+    return inputs.some(in_ => {
             const {id: inId, property: inProp} = in_;
             if (outProp !== inProp || typeof outId !== typeof inId) {
-                return;
+            return false;
             }
             if (typeof outId === 'string') {
                 if (outId === inId) {
-                    dispatchError('Same `Input` and `Output`', [
-                        head,
-                        `Input ${ini} (${combineIdAndProp(in_)})`,
-                        `matches Output ${outi} (${combineIdAndProp(out)})`
-                    ]);
+                return true;
                 }
             } else if (wildcardOverlap(in_, [out])) {
-                dispatchError('Same `Input` and `Output`', [
-                    head,
-                    `Input ${ini} (${combineIdAndProp(in_)})`,
-                    'can match the same component(s) as',
-                    `Output ${outi} (${combineIdAndProp(out)})`
-                ]);
+            return true;
             }
         });
-    });
 }
 
 function findMismatchedWildcards(outputs, inputs, state, head, dispatchError) {
@@ -748,15 +737,52 @@ export function computeGraphs(dependencies, dispatchError) {
         return idList;
     }
 
+    /* multiGraph is used only for testing circularity
+     * 
+     * Each component+property that is used as an input or output is added as a node
+     * to a directed graph with a dependency from each input to each output. The
+     * function triggerDefaultState in index.js then checks this graph for circularity.
+     * 
+     * In order to allow the same component+property to be both an input and output
+     * of the same callback, a two pass approach is used.
+     * 
+     * In the first pass, the graph is built up normally with the exception that
+     * in cases where an output is also an input to the same callback a special 
+     * "output" node is added and the dependencies target this output node instead.
+     * For example, if `slider.value` is both an input and an output, then the a new
+     * node `slider.value__output` will be added with a dependency from `slide.value`
+     * to `slider.value__output`. Splitting the input and output into separate nodes
+     * removes the circularity.
+     * 
+     * In order to still detect other forms of circularity, it is necessary to do a
+     * second pass and add the new output nodes as a dependency in any *other* callbacks
+     * where the original node was an input. Continuing the example, any other callback
+     * that had `slider.value` as an input dependency also needs to have
+     * `slider.value__output` as a dependency. To make this efficient, all the inputs
+     * and outputs for each callback are stored during the first pass.
+     */
+
+    const outputTag = "__output";
+    const duplicateOutputs = [];
+    const cbIn = [];
+    const cbOut = [];
+
+    function addInputToMulti(inIdProp, outIdProp, firstPass=true) {
+        multiGraph.addNode(inIdProp);
+        multiGraph.addDependency(inIdProp, outIdProp);
+        // only store callback inputs and outputs during the first pass
+        if (firstPass){
+            cbIn[cbIn.length-1].push(inIdProp);
+            cbOut[cbOut.length-1].push(outIdProp);
+        }
+    }
+
     parsedDependencies.forEach(function registerDependency(dependency) {
         const {outputs, inputs} = dependency;
 
-        // multiGraph - just for testing circularity
-
-        function addInputToMulti(inIdProp, outIdProp) {
-            multiGraph.addNode(inIdProp);
-            multiGraph.addDependency(inIdProp, outIdProp);
-        }
+        // new callback, add an empty array for its inputs and outputs
+        cbIn.push([]);
+        cbOut.push([]);
 
         function addOutputToMulti(outIdFinal, outIdProp) {
             multiGraph.addNode(outIdProp);
@@ -790,15 +816,29 @@ export function computeGraphs(dependencies, dispatchError) {
 
         outputs.forEach(outIdProp => {
             const {id: outId, property} = outIdProp;
+            // check if this output is also an input to the same callback
+            const alsoInput = checkInOutOverlap(outIdProp, inputs);
             if (typeof outId === 'object') {
                 const outIdList = makeAllIds(outId, {});
                 outIdList.forEach(id => {
-                    addOutputToMulti(id, combineIdAndProp({id, property}));
+                    let tempOutIdProp = {id, property};
+                    let outIdName = combineIdAndProp(tempOutIdProp);
+                    // if this output is also an input, add `outputTag` to the name
+                    if (alsoInput){
+                        duplicateOutputs.push(tempOutIdProp);
+                        outIdName += outputTag;
+                    }
+                    addOutputToMulti(id, outIdName);
                 });
-
                 addPattern(outputPatterns, outId, property, finalDependency);
             } else {
-                addOutputToMulti({}, combineIdAndProp(outIdProp));
+                let outIdName = combineIdAndProp(outIdProp);
+                // if this output is also an input, add `outputTag` to the name
+                if (alsoInput){
+                    duplicateOutputs.push(outIdProp);
+                    outIdName += outputTag;
+                }
+                addOutputToMulti({}, outIdName);
                 addMap(outputMap, outId, property, finalDependency);
             }
         });
@@ -813,6 +853,25 @@ export function computeGraphs(dependencies, dispatchError) {
         });
     });
 
+    // second pass for adding new output nodes as dependencies where needed 
+    duplicateOutputs.forEach(dupeOutIdProp => {
+        let originalName = combineIdAndProp(dupeOutIdProp);
+        let newName = originalName.concat(outputTag);
+        for (var cnt=0; cnt<cbIn.length; cnt++){
+            // check if input to the callback
+            if (cbIn[cnt].some(inName=>(inName==originalName))){
+                /* make sure it's not also an output of the callback
+                 * (this will be the original callback)
+                 */
+                if(!cbOut[cnt].some(outName=>(outName==newName))){
+                    cbOut[cnt].forEach(outName => {
+                        addInputToMulti(newName, outName, false);
+                    });
+                }
+            }
+        }
+    });
+
     return finalGraphs;
 }