Implement animate and update binding computation

Author: rreusser

src/plots/command.js

@@ -11,7 +11,6 @@
 
 var Plotly = require('../plotly');
 var Lib = require('../lib');
-var helpers = require('../plot_api/helpers');
 
 exports.executeAPICommand = function(gd, method, args) {
     var apiMethod = Plotly[method];
@@ -37,10 +36,16 @@ exports.computeAPICommandBindings = function(gd, method, args) {
         case 'relayout':
             bindings = computeLayoutBindings(gd, args);
             break;
-        case 'animate':
+        case 'update':
             bindings = computeDataBindings(gd, [args[0], args[2]])
                 .concat(computeLayoutBindings(gd, [args[1]]));
             break;
+        case 'animate':
+            // This case could be analyzed more in-depth, but for a start,
+            // we'll assume that the only relevant modification an animation
+            // makes that's meaningfully tracked is the frame:
+            bindings = ['layout._currentFrame'];
+            break;
         default:
             // We'll elect to fail-non-fatal since this is a correct
             // answer and since this is not a validation method.
@@ -49,7 +54,7 @@ exports.computeAPICommandBindings = function(gd, method, args) {
     return bindings;
 };
 
-function computeLayoutBindings (gd, args) {
+function computeLayoutBindings(gd, args) {
     var bindings = [];
 
     var astr = args[0];
@@ -62,15 +67,15 @@ function computeLayoutBindings (gd, args) {
         return bindings;
     }
 
-    crawl(aobj, function (path, attrName, attr) {
+    crawl(aobj, function(path) {
         bindings.push('layout' + path);
     });
 
     return bindings;
 }
 
-function computeDataBindings (gd, args) {
-    var i, traces, astr, attr, val, traces, aobj;
+function computeDataBindings(gd, args) {
+    var i, traces, astr, val, aobj;
     var bindings = [];
 
     // Logic copied from Plotly.restyle:
@@ -91,33 +96,29 @@ function computeDataBindings (gd, args) {
         return bindings;
     }
 
-    if (traces === undefined) {
+    if(traces === undefined) {
         traces = [];
-        for (i = 0; i < gd.data.length; i++) {
+        for(i = 0; i < gd.data.length; i++) {
             traces.push(i);
         }
     }
 
-    crawl(aobj, function (path, attrName, attr) {
+    crawl(aobj, function(path, attrName, attr) {
         var nAttr;
-        if (Array.isArray(attr)) {
+        if(Array.isArray(attr)) {
             nAttr = Math.min(attr.length, traces.length);
         } else {
             nAttr = traces.length;
         }
-        for (var j = 0; j < nAttr; j++) {
+        for(var j = 0; j < nAttr; j++) {
             bindings.push('data[' + traces[j] + ']' + path);
         }
     });
 
     return bindings;
 }
 
-function crawl(attrs, callback, path, depth) {
-    if(depth === undefined) {
-        depth = 0;
-    }
-
+function crawl(attrs, callback, path) {
     if(path === undefined) {
         path = '';
     }
@@ -130,7 +131,7 @@ function crawl(attrs, callback, path, depth) {
         var thisPath = path + '.' + attrName;
 
         if(Lib.isPlainObject(attr)) {
-            crawl(attr, callback, thisPath, depth + 1);
+            crawl(attr, callback, thisPath);
         } else {
             // Only execute the callback on leaf nodes:
             callback(thisPath, attrName, attr);

test/jasmine/tests/command_test.js

@@ -1,6 +1,5 @@
 var Plotly = require('@lib/index');
 var PlotlyInternal = require('@src/plotly');
-var Lib = require('@src/lib');
 var Plots = Plotly.Plots;
 var createGraphDiv = require('../assets/create_graph_div');
 var destroyGraphDiv = require('../assets/destroy_graph_div');
@@ -220,8 +219,6 @@ describe('Plots.computeAPICommandBindings', function() {
                     }
                 }, [1, 0]]);
 
-                // The results are definitely not completely intuitive, so this
-                // is based upon empirical results with a codepen example:
                 expect(result).toEqual([
                     'data[1].y',
                     'data[1].marker.size',
@@ -243,8 +240,6 @@ describe('Plots.computeAPICommandBindings', function() {
                     }
                 }, [1]]);
 
-                // The results are definitely not completely intuitive, so this
-                // is based upon empirical results with a codepen example:
                 expect(result).toEqual([
                     'data[1].y',
                     'data[1].marker.size',
@@ -264,31 +259,31 @@ describe('Plots.computeAPICommandBindings', function() {
         });
 
         describe('with aobj notation', function() {
-            it('and a single attribute', function () {
+            it('and a single attribute', function() {
                 var result = Plots.computeAPICommandBindings(gd, 'relayout', [{height: 500}]);
                 expect(result).toEqual(['layout.height']);
             });
 
-            it('and two attributes', function () {
+            it('and two attributes', function() {
                 var result = Plots.computeAPICommandBindings(gd, 'relayout', [{height: 500, width: 100}]);
                 expect(result).toEqual(['layout.height', 'layout.width']);
             });
         });
 
         describe('with astr + val notation', function() {
-            it('and an attribute', function () {
+            it('and an attribute', function() {
                 var result = Plots.computeAPICommandBindings(gd, 'relayout', ['width', 100]);
                 expect(result).toEqual(['layout.width']);
             });
 
-            it('and nested atributes', function () {
+            it('and nested atributes', function() {
                 var result = Plots.computeAPICommandBindings(gd, 'relayout', ['margin.l', 10]);
                 expect(result).toEqual(['layout.margin.l']);
             });
         });
 
         describe('with mixed notation', function() {
-            it('containing aob + astr', function () {
+            it('containing aob + astr', function() {
                 var result = Plots.computeAPICommandBindings(gd, 'relayout', [{
                     'width': 100,
                     'margin.l': 10
@@ -297,4 +292,37 @@ describe('Plots.computeAPICommandBindings', function() {
             });
         });
     });
+
+    describe('update', function() {
+        it('computes bindings', function() {
+            var result = Plots.computeAPICommandBindings(gd, 'update', [{
+                y: [[3, 4, 5]],
+                'marker.size': [10, 20, 25],
+                'line.color': 'red',
+                line: {
+                    width: [2, 8]
+                }
+            }, {
+                'margin.l': 50,
+                width: 10
+            }, [1]]);
+
+            expect(result).toEqual([
+                'data[1].y',
+                'data[1].marker.size',
+                'data[1].line.color',
+                'data[1].line.width',
+                'layout.margin.l',
+                'layout.width'
+            ]);
+        });
+    });
+
+    describe('animate', function() {
+        it('computes bindings', function() {
+            var result = Plots.computeAPICommandBindings(gd, 'animate', [{}]);
+
+            expect(result).toEqual(['layout._currentFrame']);
+        });
+    });
 });