fix show/hide ordering for contourcarpet matching contour

Author: alexcjohnson

src/traces/contour/plot.js

@@ -27,6 +27,10 @@ var constants = require('./constants');
 var costConstants = constants.LABELOPTIMIZER;
 
 exports.plot = function plot(gd, plotinfo, cdcontours, contourLayer) {
+    plotWrapper(gd, plotinfo, cdcontours, contourLayer, plotOne);
+};
+
+function plotWrapper(gd, plotinfo, cdcontours, contourLayer, plotOneFn) {
     var contours = contourLayer.selectAll('g.contour')
         .data(
             cdcontours.map(function(d) { return d[0]; }),
@@ -39,10 +43,11 @@ exports.plot = function plot(gd, plotinfo, cdcontours, contourLayer) {
         .classed('contour', true);
 
     contours.each(function(cd) {
-        plotOne(gd, plotinfo, cd, d3.select(this));
+        plotOneFn(gd, plotinfo, cd, d3.select(this));
     })
     .order();
-};
+}
+exports.plotWrapper = plotWrapper;
 
 function plotOne(gd, plotinfo, cd, plotGroup) {
     var trace = cd.trace;
@@ -95,20 +100,6 @@ function plotOne(gd, plotinfo, cd, plotGroup) {
     clipGaps(plotGroup, plotinfo, fullLayout._clips, cd, perimeter);
 }
 
-exports.makeContourGroup = function(layer, cd, id) {
-    var plotgroup = layer
-        .selectAll('g.contour.' + id)
-        .data(cd);
-
-    plotgroup.enter().append('g')
-        .classed('contour', true)
-        .classed(id, true);
-
-    plotgroup.exit().remove();
-
-    return plotgroup;
-};
-
 function makeBackground(plotgroup, perimeter, contours) {
     var bggroup = Lib.ensureSingle(plotgroup, 'g', 'contourbg');
 

src/traces/contourcarpet/plot.js

@@ -13,7 +13,6 @@ var map1dArray = require('../carpet/map_1d_array');
 var makepath = require('../carpet/makepath');
 var Drawing = require('../../components/drawing');
 var Lib = require('../../lib');
-var getUidsFromCalcData = require('../../plots/get_data').getUidsFromCalcData;
 
 var makeCrossings = require('../contour/make_crossings');
 var findAllPaths = require('../contour/find_all_paths');
@@ -27,35 +26,23 @@ var lookupCarpet = require('../carpet/lookup_carpetid');
 var closeBoundaries = require('../contour/close_boundaries');
 
 module.exports = function plot(gd, plotinfo, cdcontours, contourcarpetLayer) {
-    var uidLookup = getUidsFromCalcData(cdcontours);
-
-    contourcarpetLayer.selectAll('g.contour').each(function(d) {
-        if(!uidLookup[d.trace.uid]) {
-            d3.select(this).remove();
-        }
-    });
-
-    for(var i = 0; i < cdcontours.length; i++) {
-        plotOne(gd, plotinfo, cdcontours[i], contourcarpetLayer);
-    }
+    contourPlot.plotWrapper(gd, plotinfo, cdcontours, contourcarpetLayer, plotOne);
 };
 
-function plotOne(gd, plotinfo, cd, contourcarpetLayer) {
-    var trace = cd[0].trace;
+function plotOne(gd, plotinfo, cd, plotGroup) {
+    var trace = cd.trace;
 
     var carpet = trace._carpetTrace = lookupCarpet(gd, trace);
     var carpetcd = gd.calcdata[carpet.index][0];
 
     if(!carpet.visible || carpet.visible === 'legendonly') return;
 
-    var a = cd[0].a;
-    var b = cd[0].b;
+    var a = cd.a;
+    var b = cd.b;
     var contours = trace.contours;
-    var uid = trace.uid;
     var xa = plotinfo.xaxis;
     var ya = plotinfo.yaxis;
-    var id = 'contour' + uid;
-    var pathinfo = emptyPathinfo(contours, plotinfo, cd[0]);
+    var pathinfo = emptyPathinfo(contours, plotinfo, cd);
     var isConstraint = contours.type === 'constraint';
     var operation = contours._operation;
     var coloring = isConstraint ? (operation === '=' ? 'lines' : 'fill') : contours.coloring;
@@ -98,7 +85,6 @@ function plotOne(gd, plotinfo, cd, contourcarpetLayer) {
     mapPathinfo(pathinfo, ab2p);
 
     // draw everything
-    var plotGroup = contourPlot.makeContourGroup(contourcarpetLayer, cd, id);
 
     // Compute the boundary path
     var seg, xp, yp, i;
@@ -124,7 +110,7 @@ function plotOne(gd, plotinfo, cd, contourcarpetLayer) {
     makeFills(trace, plotGroup, xa, ya, fillPathinfo, perimeter, ab2p, carpet, carpetcd, coloring, boundaryPath);
 
     // Draw contour lines:
-    makeLinesAndLabels(plotGroup, pathinfo, gd, cd[0], contours, plotinfo, carpet);
+    makeLinesAndLabels(plotGroup, pathinfo, gd, cd, contours, plotinfo, carpet);
 
     // Clip the boundary of the plot
     Drawing.setClipUrl(plotGroup, carpet._clipPathId);

test/jasmine/tests/carpet_test.js

@@ -646,3 +646,52 @@ describe('scattercarpet hover labels', function() {
         .then(done);
     });
 });
+
+describe('contourcarpet plotting & editing', function() {
+    var gd;
+
+    beforeEach(function() {
+        gd = createGraphDiv();
+    });
+    afterEach(destroyGraphDiv);
+
+    it('keeps the correct ordering after hide and show', function(done) {
+        function getIndices() {
+            var out = [];
+            d3.selectAll('.contour').each(function(d) { out.push(d.trace.index); });
+            return out;
+        }
+
+        Plotly.newPlot(gd, [{
+            type: 'carpet',
+            a: [1, 1, 1, 3, 3, 3, 5, 5, 5],
+            b: [1, 2, 3, 1, 2, 3, 1, 2, 3],
+            y: [1, 2, 3, 2, 3, 4, 3, 4, 5],
+            cheaterslope: 2
+        }, {
+            type: 'contourcarpet',
+            a: [1, 1, 1, 3, 3, 3, 5, 5, 5],
+            b: [1, 2, 3, 1, 2, 3, 1, 2, 3],
+            z: [1, 2, 3, 4, 5, 6, 7, 8, 9]
+        }, {
+            type: 'contourcarpet',
+            a: [1, 1, 1, 3, 3, 3, 5, 5, 5],
+            b: [1, 2, 3, 1, 2, 3, 1, 2, 3],
+            z: [1, 4, 7, 2, 5, 8, 3, 6, 9],
+            contours: {coloring: 'lines'}
+        }])
+        .then(function() {
+            expect(getIndices()).toEqual([1, 2]);
+            return Plotly.restyle(gd, 'visible', false, [1]);
+        })
+        .then(function() {
+            expect(getIndices()).toEqual([2]);
+            return Plotly.restyle(gd, 'visible', true, [1]);
+        })
+        .then(function() {
+            expect(getIndices()).toEqual([1, 2]);
+        })
+        .catch(fail)
+        .then(done);
+    });
+});