fix dynamic contour ordering and multi-heatmap-contour plots

Author: alexcjohnson

src/components/drawing/index.js

@@ -453,6 +453,13 @@ drawing.singlePointStyle = function(d, sel, trace, fns, gd) {
         if(gradientType) perPointGradient = true;
         else gradientType = markerGradient && markerGradient.type;
 
+        // for legend - arrays will propagate through here, but we don't need
+        // to treat it as per-point.
+        if(Array.isArray(gradientType)) {
+            gradientType = gradientType[0];
+            if(!gradientInfo[gradientType]) gradientType = 0;
+        }
+
         if(gradientType && gradientType !== 'none') {
             var gradientColor = d.mgc;
             if(gradientColor) perPointGradient = true;

src/components/legend/style.js

@@ -71,7 +71,8 @@ module.exports = function style(s, gd) {
                 showGradientLine = true;
             }
             else {
-                showLine = coloring === 'none' || contours.showlines;
+                showLine = coloring === 'none' || coloring === 'heatmap' ||
+                    contours.showlines;
             }
 
             if(contours.type === 'constraint') {

src/traces/contour/plot.js

@@ -16,7 +16,6 @@ var Drawing = require('../../components/drawing');
 var svgTextUtils = require('../../lib/svg_text_utils');
 var Axes = require('../../plots/cartesian/axes');
 var setConvert = require('../../plots/cartesian/set_convert');
-var getUidsFromCalcData = require('../../plots/get_data').getUidsFromCalcData;
 
 var heatmapPlot = require('../heatmap/plot');
 var makeCrossings = require('./make_crossings');
@@ -28,32 +27,35 @@ var constants = require('./constants');
 var costConstants = constants.LABELOPTIMIZER;
 
 exports.plot = function plot(gd, plotinfo, cdcontours, contourLayer) {
-    var uidLookup = getUidsFromCalcData(cdcontours);
+    var contours = contourLayer.selectAll('g.contour')
+        .data(
+            cdcontours.map(function(d) { return d[0]; }),
+            function(cd) { return cd.trace.uid; }
+        );
 
-    contourLayer.selectAll('g.contour').each(function(d) {
-        if(!uidLookup[d.trace.uid]) {
-            d3.select(this).remove();
-        }
-    });
+    contours.exit().remove();
 
-    for(var i = 0; i < cdcontours.length; i++) {
-        plotOne(gd, plotinfo, cdcontours[i], contourLayer);
-    }
+    contours.enter().append('g')
+        .classed('contour', true);
+
+    contours.each(function(cd) {
+        plotOne(gd, plotinfo, cd, d3.select(this));
+    })
+    .order();
 };
 
-function plotOne(gd, plotinfo, cd, contourLayer) {
-    var trace = cd[0].trace;
-    var x = cd[0].x;
-    var y = cd[0].y;
+function plotOne(gd, plotinfo, cd, plotGroup) {
+    var trace = cd.trace;
+    var x = cd.x;
+    var y = cd.y;
     var contours = trace.contours;
-    var id = 'contour' + trace.uid;
     var xa = plotinfo.xaxis;
     var ya = plotinfo.yaxis;
     var fullLayout = gd._fullLayout;
-    var pathinfo = emptyPathinfo(contours, plotinfo, cd[0]);
+    var pathinfo = emptyPathinfo(contours, plotinfo, cd);
 
     // use a heatmap to fill - draw it behind the lines
-    var heatmapColoringLayer = Lib.ensureSingle(contourLayer, 'g', 'heatmapcoloring');
+    var heatmapColoringLayer = Lib.ensureSingle(plotGroup, 'g', 'heatmapcoloring');
     var cdheatmaps = [];
     if(contours.coloring === 'heatmap') {
         if(trace.zauto && (trace.autocontour === false)) {
@@ -62,7 +64,7 @@ function plotOne(gd, plotinfo, cd, contourLayer) {
             trace._input.zmax = trace.zmax =
                 trace.zmin + pathinfo.length * contours.size;
         }
-        cdheatmaps = [cd];
+        cdheatmaps = [[cd]];
     }
     heatmapPlot(gd, plotinfo, cdheatmaps, heatmapColoringLayer);
 
@@ -87,11 +89,10 @@ function plotOne(gd, plotinfo, cd, contourLayer) {
     }
 
     // draw everything
-    var plotGroup = exports.makeContourGroup(contourLayer, cd, id);
     makeBackground(plotGroup, perimeter, contours);
     makeFills(plotGroup, fillPathinfo, perimeter, contours);
-    makeLinesAndLabels(plotGroup, pathinfo, gd, cd[0], contours, perimeter);
-    clipGaps(plotGroup, plotinfo, fullLayout._clips, cd[0], perimeter);
+    makeLinesAndLabels(plotGroup, pathinfo, gd, cd, contours, perimeter);
+    clipGaps(plotGroup, plotinfo, fullLayout._clips, cd, perimeter);
 }
 
 exports.makeContourGroup = function(layer, cd, id) {

test/image/baselines/contour_legend.png

@@ -27,6 +27,24 @@
       "z": [[3, 2, 1], [6, 5, 4], [9, 8, 7]],
       "line": {"color": "#f88"},
       "name": "constraint"
+  }, {
+      "type": "contour",
+      "contours": {"coloring": "heatmap"},
+      "z": [[1, 2], [3, 4]],
+      "showscale": false,
+      "showlegend": true,
+      "y": [2, 3],
+      "name": "heatmap 1"
+  }, {
+      "type": "contour",
+      "contours": {"coloring": "heatmap"},
+      "z": [[1, 2], [3, 4]],
+      "showscale": false,
+      "showlegend": true,
+      "colorscale": "Viridis",
+      "x": [1, 2],
+      "y": [2, 3],
+      "name": "heatmap 2"
   }],
   "layout":{
     "autosize":false,

test/image/mocks/contour_legend.json

@@ -1,3 +1,5 @@
+var d3 = require('d3');
+
 var Plotly = require('@lib/index');
 var Plots = require('@src/plots/plots');
 var Lib = require('@src/lib');
@@ -414,12 +416,12 @@ describe('contour plotting and editing', function() {
 
         function _assert(exp) {
             var msg = ' index in <g.contourlayer> (call #' + cnt + ')';
-            var contourLayer = gd.querySelector('.xy > .plot > .contourlayer');
+            var contourPlot = gd.querySelector('.xy > .plot > .contourlayer > .contour');
             var hmIndex = -1;
             var contoursIndex = -1;
 
-            for(var i in contourLayer.children) {
-                var child = contourLayer.children[i];
+            for(var i in contourPlot.children) {
+                var child = contourPlot.children[i];
                 if(child.querySelector) {
                     if(child.querySelector('.hm')) hmIndex = +i;
                     else if(child.querySelector('.contourlevel')) contoursIndex = +i;
@@ -439,21 +441,21 @@ describe('contour plotting and editing', function() {
         .then(function() {
             _assert({
                 hmIndex: 0,
-                contoursIndex: 1
+                contoursIndex: 3
             });
             return Plotly.restyle(gd, 'contours.coloring', 'lines');
         })
         .then(function() {
             _assert({
                 hmIndex: -1,
-                contoursIndex: 1
+                contoursIndex: 3
             });
             return Plotly.restyle(gd, 'contours.coloring', 'heatmap');
         })
         .then(function() {
             _assert({
                 hmIndex: 0,
-                contoursIndex: 1
+                contoursIndex: 3
             });
         })
         .catch(fail)
@@ -501,4 +503,34 @@ describe('contour plotting and editing', function() {
         .catch(fail)
         .then(done);
     });
+
+    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: 'contour',
+            z: [[1, 2], [3, 4]]
+        }, {
+            type: 'contour',
+            z: [[2, 1], [4, 3]],
+            contours: {coloring: 'lines'}
+        }])
+        .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(fail)
+        .then(done);
+    });
 });