fix dynamic ordering of carpets, and 🔪 getUidsFromCalcData

Author: alexcjohnson

src/plots/get_data.js

@@ -124,20 +124,3 @@ exports.getSubplotData = function getSubplotData(data, type, subplotId) {
 
     return subplotData;
 };
-
-/**
- * Get a lookup object of trace uids corresponding in a given calcdata array.
- *
- * @param {array} calcdata: as in gd.calcdata (or a subset)
- * @return {object} lookup object of uids (`uid: 1`)
- */
-exports.getUidsFromCalcData = function(calcdata) {
-    var out = {};
-
-    for(var i = 0; i < calcdata.length; i++) {
-        var trace = calcdata[i][0].trace;
-        out[trace.uid] = 1;
-    }
-
-    return out;
-};

src/traces/carpet/plot.js

@@ -17,37 +17,34 @@ var orientText = require('./orient_text');
 var svgTextUtils = require('../../lib/svg_text_utils');
 var Lib = require('../../lib');
 var alignmentConstants = require('../../constants/alignment');
-var getUidsFromCalcData = require('../../plots/get_data').getUidsFromCalcData;
 
 module.exports = function plot(gd, plotinfo, cdcarpet, carpetLayer) {
-    var uidLookup = getUidsFromCalcData(cdcarpet);
+    var carpets = carpetLayer.selectAll('g.trace')
+        .data(
+            cdcarpet.map(function(d) { return d[0]; }),
+            function(cd) { return cd.trace.uid; }
+        );
 
-    carpetLayer.selectAll('g.trace').each(function() {
-        var classString = d3.select(this).attr('class');
-        var oldUid = classString.split('carpet')[1].split(/\s/)[0];
+    carpets.exit().remove();
 
-        if(!uidLookup[oldUid]) {
-            d3.select(this).remove();
-        }
-    });
+    carpets.enter().append('g')
+        .classed('trace', true);
 
-    for(var i = 0; i < cdcarpet.length; i++) {
-        plotOne(gd, plotinfo, cdcarpet[i], carpetLayer);
-    }
+    carpets.each(function(cd) {
+        plotOne(gd, plotinfo, cd, d3.select(this));
+    }).order();
 };
 
-function plotOne(gd, plotinfo, cd, carpetLayer) {
-    var t = cd[0];
-    var trace = cd[0].trace,
-        xa = plotinfo.xaxis,
-        ya = plotinfo.yaxis,
-        aax = trace.aaxis,
-        bax = trace.baxis,
-        fullLayout = gd._fullLayout;
+function plotOne(gd, plotinfo, cd, axisLayer) {
+    var trace = cd.trace;
+    var xa = plotinfo.xaxis;
+    var ya = plotinfo.yaxis;
+    var aax = trace.aaxis;
+    var bax = trace.baxis;
+    var fullLayout = gd._fullLayout;
 
     var clipLayer = fullLayout._clips;
 
-    var axisLayer = Lib.ensureSingle(carpetLayer, 'g', 'carpet' + trace.uid).classed('trace', true);
     var minorLayer = Lib.ensureSingle(axisLayer, 'g', 'minorlayer');
     var majorLayer = Lib.ensureSingle(axisLayer, 'g', 'majorlayer');
     var boundaryLayer = Lib.ensureSingle(axisLayer, 'g', 'boundarylayer');
@@ -65,12 +62,12 @@ function plotOne(gd, plotinfo, cd, carpetLayer) {
     drawGridLines(xa, ya, boundaryLayer, aax, 'a-boundary', aax._boundarylines);
     drawGridLines(xa, ya, boundaryLayer, bax, 'b-boundary', bax._boundarylines);
 
-    var labelOrientationA = drawAxisLabels(gd, xa, ya, trace, t, labelLayer, aax._labels, 'a-label');
-    var labelOrientationB = drawAxisLabels(gd, xa, ya, trace, t, labelLayer, bax._labels, 'b-label');
+    var labelOrientationA = drawAxisLabels(gd, xa, ya, trace, cd, labelLayer, aax._labels, 'a-label');
+    var labelOrientationB = drawAxisLabels(gd, xa, ya, trace, cd, labelLayer, bax._labels, 'b-label');
 
-    drawAxisTitles(gd, labelLayer, trace, t, xa, ya, labelOrientationA, labelOrientationB);
+    drawAxisTitles(gd, labelLayer, trace, cd, xa, ya, labelOrientationA, labelOrientationB);
 
-    drawClipPath(trace, t, clipLayer, xa, ya);
+    drawClipPath(trace, cd, clipLayer, xa, ya);
 }
 
 function drawClipPath(trace, t, layer, xaxis, yaxis) {

test/jasmine/tests/carpet_test.js

@@ -537,6 +537,39 @@ describe('Test carpet interactions:', function() {
         .catch(failTest)
         .then(done);
     });
+
+    it('preserves order of carpets on the same subplot after hide/show', function(done) {
+        function getIndices() {
+            var out = [];
+            d3.selectAll('.carpetlayer .trace').each(function(d) { out.push(d.trace.index); });
+            return out;
+        }
+
+        Plotly.newPlot(gd, [{
+            type: 'carpet',
+            a: [1, 2, 3],
+            b: [1, 2, 3],
+            y: [[0, 0.8, 2], [1.2, 2, 3.2], [2, 2.8, 4]]
+        }, {
+            type: 'carpet',
+            a: [1, 2, 3],
+            b: [1, 2, 3],
+            y: [[10, 10.8, 12], [11.2, 12, 13.2], [12, 12.8, 14]]
+        }])
+        .then(function() {
+            expect(getIndices()).toEqual([0, 1]);
+            return Plotly.restyle(gd, 'visible', false, [0]);
+        })
+        .then(function() {
+            expect(getIndices()).toEqual([1]);
+            return Plotly.restyle(gd, 'visible', true, [0]);
+        })
+        .then(function() {
+            expect(getIndices()).toEqual([0, 1]);
+        })
+        .catch(failTest)
+        .then(done);
+    });
 });
 
 describe('scattercarpet array attributes', function() {