Merge pull request #1440 from plotly/clear-parcoords-canvas-of-zero-panels

Clear parcoords canvas specially if no panels exist

Author: monfera

src/traces/parcoords/lines.js

@@ -365,6 +365,11 @@ module.exports = function(canvasGL, lines, canvasWidth, canvasHeight, initialDim
             }
         }
 
+        if(panelCount === 0) {
+            // clear canvas here, as the panel iteration below will not enter the loop body
+            clear(regl, 0, 0, canvasWidth, canvasHeight);
+        }
+
         for(I = 0; I < panelCount; I++) {
             var panel = panels[I];
             var dim1 = panel.dim1;
@@ -396,10 +401,23 @@ module.exports = function(canvasGL, lines, canvasWidth, canvasHeight, initialDim
         return pickPixel;
     }
 
+    function readPixels(canvasX, canvasY, width, height) {
+        var pixelArray = new Uint8Array(4 * width * height);
+        regl.read({
+            x: canvasX,
+            y: canvasY,
+            width: width,
+            height: height,
+            data: pixelArray
+        });
+        return pixelArray;
+    }
+
     return {
         setColorDomain: setColorDomain,
         render: renderGLParcoords,
         readPixel: readPixel,
+        readPixels: readPixels,
         destroy: regl.destroy
     };
 };

src/traces/parcoords/parcoords.js

@@ -127,8 +127,8 @@ function model(layout, d, i) {
         canvasOverdrag: c.overdrag * c.canvasPixelRatio
     });
 
-    var groupWidth = width * (domain.x[1] - domain.x[0]);
-    var groupHeight = layout.height * (domain.y[1] - domain.y[0]);
+    var groupWidth = Math.floor(width * (domain.x[1] - domain.x[0]));
+    var groupHeight = Math.floor(layout.height * (domain.y[1] - domain.y[0]));
 
     var pad = layout.margin || {l: 80, r: 80, t: 100, b: 80};
     var rowContentWidth = groupWidth;

test/image/baselines/gl2d_parcoords_2.png

@@ -792,6 +792,36 @@ describe('parcoords', function() {
                 });
         });
 
+        it('Calling `Plotly.restyle` with zero panels left should erase lines', function(done) {
+
+            var mockCopy = Lib.extendDeep({}, mock2);
+            var gd = createGraphDiv();
+            Plotly.plot(gd, mockCopy.data, mockCopy.layout);
+
+            function restyleDimension(key, dimIndex, setterValue) {
+                var value = Lib.isArray(setterValue) ? setterValue[0] : setterValue;
+                return function() {
+                    return Plotly.restyle(gd, 'dimensions[' + dimIndex + '].' + key, setterValue).then(function() {
+                        expect(gd.data[0].dimensions[dimIndex][key]).toEqual(value, 'for dimension attribute \'' + key + '\'');
+                    });
+                };
+            }
+
+            restyleDimension('values', 1, [[]])()
+                .then(function() {
+                    d3.selectAll('.parcoords-lines').each(function(d) {
+                        var imageArray = d.lineLayer.readPixels(0, 0, d.model.canvasWidth, d.model.canvasHeight);
+                        var foundPixel = false;
+                        var i = 0;
+                        do {
+                            foundPixel = foundPixel || imageArray[i++] !== 0;
+                        } while(!foundPixel && i < imageArray.length);
+                        expect(foundPixel).toEqual(false);
+                    });
+                    done();
+                });
+        });
+
         describe('Having two datasets', function() {
 
             it('Two subsequent calls to Plotly.plot should create two parcoords rows', function(done) {