Merge pull request #3178 from plotly/parcoords-restyle-fix

Parcoords line.color restyle fix

Author: etpinard

Diff for: src/traces/parcoords/parcoords.js

@@ -456,16 +456,15 @@ module.exports = function(root, svg, parcoordsLineLayers, styledData, layout, ca
 
     parcoordsLineLayer
         .each(function(d) {
-
             if(d.viewModel) {
-                if(d.lineLayer) d.lineLayer.update(d);
-                else d.lineLayer = lineLayerMaker(this, d);
+                if(!d.lineLayer || callbacks) { // recreate in case of having callbacks e.g. restyle. Should we test for callback to be a restyle?
+                    d.lineLayer = lineLayerMaker(this, d);
+                } else d.lineLayer.update(d);
 
-                d.viewModel[d.key] = d.lineLayer;
+                if(d.key || d.key === 0) d.viewModel[d.key] = d.lineLayer;
 
-                var setChanged = ((d.key) &&
-                    (((d.key !== 'contextLayer') || (callbacks)) || // unless there is callback on this line layer
-                    (!d.context))); // don't update background
+                var setChanged = (!d.context || // don't update background
+                                  callbacks);   // unless there is a callback on the context layer. Should we test the callback?
 
                 d.lineLayer.render(d.viewModel.panels, setChanged);
             }

Diff for: test/jasmine/tests/config_test.js

@@ -7,6 +7,7 @@ var click = require('../assets/click');
 var mouseEvent = require('../assets/mouse_event');
 var failTest = require('../assets/fail_test');
 var delay = require('../assets/delay');
+var RESIZE_DELAY = 300;
 
 describe('config argument', function() {
 
@@ -585,7 +586,7 @@ describe('config argument', function() {
             viewport.set(width / 2, height / 2);
 
             return Promise.resolve()
-            .then(delay(200))
+            .then(delay(RESIZE_DELAY))
             .then(function() {
                 checkLayoutSize(elWidth / 2, elHeight / 2);
             })
@@ -639,7 +640,7 @@ describe('config argument', function() {
             Plotly.plot(gd, data, {}, {responsive: true})
             .then(function() {return Plotly.restyle(gd, 'y[0]', data[0].y[0] + 2);})
             .then(function() {viewport.set(width / 2, width / 2);})
-            .then(delay(200))
+            .then(delay(RESIZE_DELAY))
             // .then(function() {viewport.set(newWidth, 2 * newHeight);}).then(delay(200))
             .then(function() {
                 expect(cntWindowResize).toBe(1);
@@ -667,7 +668,7 @@ describe('config argument', function() {
             // Resize viewport
             .then(function() {viewport.set(width / 2, height / 2);})
             // Wait for resize to happen (Plotly.resize has an internal timeout)
-            .then(delay(200))
+            .then(delay(RESIZE_DELAY))
             // Check that final figure's size hasn't changed
             .then(function() {checkLayoutSize(width, height);})
             .catch(failTest)

Diff for: test/jasmine/tests/parcoords_test.js

@@ -790,6 +790,51 @@ describe('parcoords Lifecycle methods', function() {
                 .then(done);
         });
     });
+
+    it('@gl line.color `Plotly.restyle` should work', function(done) {
+        function getAvgPixelByChannel() {
+            var canvas = d3.select('.gl-canvas-focus').node();
+            var imgData = readPixel(canvas, 0, 0, canvas.width, canvas.height);
+            var n = imgData.length / 4;
+            var r = 0;
+            var g = 0;
+            var b = 0;
+
+            for(var i = 0; i < imgData.length; i++) {
+                r += imgData[i++];
+                g += imgData[i++];
+                b += imgData[i++];
+            }
+            return [r / n, g / n, b / n];
+        }
+
+        Plotly.plot(gd, [{
+            type: 'parcoords',
+            dimensions: [{
+                values: [1, 2]
+            }, {
+                values: [2, 4]
+            }],
+            line: {color: 'blue'}
+        }], {
+            width: 300,
+            height: 200
+        })
+        .then(function() {
+            var rbg = getAvgPixelByChannel();
+            expect(rbg[0]).toBe(0, 'no red');
+            expect(rbg[2]).not.toBe(0, 'all blue');
+
+            return Plotly.restyle(gd, 'line.color', 'red');
+        })
+        .then(function() {
+            var rbg = getAvgPixelByChannel();
+            expect(rbg[0]).not.toBe(0, 'all red');
+            expect(rbg[2]).toBe(0, 'no blue');
+        })
+        .catch(failTest)
+        .then(done);
+    });
 });
 
 describe('parcoords basic use', function() {
@@ -868,7 +913,7 @@ describe('parcoords basic use', function() {
 
     });
 
-    it('@gl Calling `Plotly.restyle` with a string path should amend the preexisting parcoords', function(done) {
+    it('@gl Calling `Plotly.restyle` with a string path to colorscale should amend the preexisting parcoords', function(done) {
 
         expect(gd.data.length).toEqual(1);