Merge remote-tracking branch 'origin/master' into v4.0

Author: camdecoster

draftlogs/7815_fix.md

@@ -0,0 +1 @@
+- Defer automargin during scroll-wheel zoom, to prevent erratic jittering while zooming [[#7815](https://github.com/plotly/plotly.js/pull/7815)], with thanks to @keilogic for the contribution!

draftlogs/7959_fix.md

@@ -0,0 +1 @@
+- Fix numeric color sorting for bundled parallel-categories (parcats) paths [[#7959](https://github.com/plotly/plotly.js/pull/7959)], with thanks to @CAOShurong for the contribution!

src/plots/cartesian/dragbox.js

@@ -486,6 +486,10 @@ function makeDragBox(gd, plotinfo, x, y, w, h, ns, ew) {
             return;
         }
 
+        // Keep automargin from changing plot size while wheel zoom is still
+        // debouncing. The final dragTail relayout will release this guard.
+        gd._fullLayout._replotting = true;
+
         var zoom = Math.exp(-Math.min(Math.max(wheelDelta, -20), 20) / 200);
         var gbb = mainplot.draglayer.select('.nsewdrag').node().getBoundingClientRect();
         var xfrac = (e.clientX - gbb.left) / gbb.width;

src/traces/parcats/parcats.js

@@ -370,6 +370,33 @@ function compareRawColor(a, b) {
     }
 }
 
+/**
+ * Compare two sort arrays element by element in ascending order.
+ * Values that do not order against each other, for example NaN, sort last.
+ * The shorter array sorts first when one array is a prefix of the other.
+ *
+ * @param {Array} a
+ * @param {Array} b
+ */
+function compareArrays(a, b) {
+    for(var i = 0; i < Math.min(a.length, b.length); i++) {
+        var valA = a[i];
+        var valB = b[i];
+
+        if(valA < valB) return -1;
+        if(valA > valB) return 1;
+        // Handle values that do not order against each other (NaN, undefined, etc.)
+        if(valA !== valB) {
+            // Sort these after every orderable value.
+            var badA = isNaN(valA);
+            var badB = isNaN(valB);
+            if(badA !== badB) return badA ? 1 : -1;
+        }
+    }
+
+    return a.length - b.length;
+}
+
 /**
  * Handle path mouseover
  * @param {PathViewModel} d
@@ -1732,15 +1759,8 @@ function updatePathViewModels(parcatsViewModel) {
             sortArray2.unshift(v2.rawColor);
         }
 
-        // colors equal, sort by display categories
-        if(sortArray1 < sortArray2) {
-            return -1;
-        }
-        if(sortArray1 > sortArray2) {
-            return 1;
-        }
-
-        return 0;
+        // Sort by color, then display categories
+        return compareArrays(sortArray1, sortArray2);
     });
 
     // Create path models

test/jasmine/tests/cartesian_interact_test.js

@@ -4,6 +4,7 @@ var d3SelectAll = require('../../strict-d3').selectAll;
 var Plotly = require('../../../lib/index');
 var Lib = require('../../../src/lib');
 var Axes = require('../../../src/plots/cartesian/axes');
+var Plots = require('../../../src/plots/plots');
 var Drawing = require('../../../src/components/drawing');
 var constants = require('../../../src/plots/cartesian/constants');
 
@@ -691,6 +692,36 @@ describe('axis zoom/pan and main plot zoom', function() {
         .then(done, done.fail);
     });
 
+    it('should defer automargin while zooming via mouse wheel', function(done) {
+        var doAutoMarginSpy;
+        var data = [{y: [0, 12]}];
+        var layout = {
+            width: 500,
+            height: 400,
+            yaxis: {automargin: true}
+        };
+
+        Plotly.newPlot(gd, data, layout, {scrollZoom: true})
+        .then(function() {
+            doAutoMarginSpy = spyOn(Plots, 'doAutoMargin').and.callThrough();
+
+            var dragger = getDragger('xy', 'nsew');
+            var coords = getNodeCoords(dragger, 'se');
+
+            mouseEvent('scroll', coords.x, coords.y, {deltaY: 100, element: dragger});
+
+            expect(gd._fullLayout._replotting).toBe(true);
+            expect(doAutoMarginSpy).not.toHaveBeenCalled();
+
+            return delay(constants.REDRAWDELAY + 10)();
+        })
+        .then(function() {
+            expect(gd._fullLayout._replotting).toBe(false);
+            expect(doAutoMarginSpy).toHaveBeenCalled();
+        })
+        .then(done, done.fail);
+    });
+
     it('handles xy, x-only and y-only zoombox updates', function(done) {
         function _assert(msg, xrng, yrng) {
             expect(gd.layout.xaxis.range).toBeCloseToArray(xrng, 2, 'xrng - ' + msg);

test/jasmine/tests/parcats_test.js

@@ -284,6 +284,55 @@ describe('Basic parcats trace', function() {
             .then(done, done.fail);
     });
 
+    it('should sort bundled paths by numeric color values', function(done) {
+        var trace = {
+            type: 'parcats',
+            dimensions: [
+                {values: ['a', 'a', 'a', 'a']},
+                {values: ['b', 'b', 'b', 'b']}
+            ],
+            line: {color: [1, 10, 2, 20]},
+            bundlecolors: true
+        };
+
+        Plotly.newPlot(gd, [trace])
+            .then(function() {
+                var parcatsViewModel = d3Select('g.trace.parcats').datum();
+                var pathColors = parcatsViewModel.paths.map(function(path) {
+                    return path.model.rawColor;
+                });
+
+                expect(pathColors).toEqual([1, 2, 10, 20]);
+            })
+            .then(done, done.fail);
+    });
+
+    it('should sort NaN color values after orderable values', function(done) {
+        var trace = {
+            type: 'parcats',
+            dimensions: [
+                {values: ['a', 'a', 'a', 'a']},
+                {values: ['b', 'b', 'b', 'b']}
+            ],
+            line: {color: [10, NaN, 2, NaN]},
+            bundlecolors: true
+        };
+
+        Plotly.newPlot(gd, [trace])
+            .then(function() {
+                var parcatsViewModel = d3Select('g.trace.parcats').datum();
+                var pathColors = parcatsViewModel.paths.map(function(path) {
+                    return path.model.rawColor;
+                });
+
+                // Orderable values sort first, NaN values sort last
+                expect(pathColors.length).toBe(3)
+                expect(pathColors.slice(0, 2)).toEqual([2, 10]);
+                expect(isNaN(pathColors[2])).toBe(true);
+            })
+            .then(done, done.fail);
+    });
+
     it('should compute initial model views properly', function(done) {
         Plotly.newPlot(gd, basicMock)
             .then(function() {