make heatmap/contour(carpet)/carpet plot method remove its own trace

... instead of relying on slow selectAll() during subroutines.drawData
    and Plots.cleanPlot. This can be a major perf improvement on
    graph with many DOM nodes (e.g. from many traces and/or many subplots)

Author: etpinard

src/plot_api/subroutines.js

@@ -488,34 +488,13 @@ exports.doCamera = function(gd) {
 exports.drawData = function(gd) {
     var fullLayout = gd._fullLayout;
     var calcdata = gd.calcdata;
-    var rangesliderContainers = fullLayout._infolayer.selectAll('g.rangeslider-container');
     var i;
 
-    // in case of traces that were heatmaps or contour maps
-    // previously, remove them and their colorbars explicitly
+    // remove old colorbars explicitly
     for(i = 0; i < calcdata.length; i++) {
         var trace = calcdata[i][0].trace;
-        var isVisible = (trace.visible === true);
-        var uid = trace.uid;
-
-        if(!isVisible || !Registry.traceIs(trace, '2dMap')) {
-            var query = (
-                '.hm' + uid +
-                ',.contour' + uid +
-                ',#clip' + uid
-            );
-
-            fullLayout._paper
-                .selectAll(query)
-                .remove();
-
-            rangesliderContainers
-                .selectAll(query)
-                .remove();
-        }
-
-        if(!isVisible || !trace._module.colorbar) {
-            fullLayout._infolayer.selectAll('.cb' + uid).remove();
+        if(trace.visible !== true || !trace._module.colorbar) {
+            fullLayout._infolayer.select('.cb' + trace.uid).remove();
         }
     }
 

src/plots/plots.js

@@ -672,8 +672,6 @@ plots.cleanPlot = function(newFullData, newFullLayout, oldFullData, oldFullLayou
         }
     }
 
-    var hasPaper = !!oldFullLayout._paper;
-    var hasInfoLayer = !!oldFullLayout._infolayer;
     var hadGl = oldFullLayout._has && oldFullLayout._has('gl');
     var hasGl = newFullLayout._has && newFullLayout._has('gl');
 
@@ -684,6 +682,8 @@ plots.cleanPlot = function(newFullData, newFullLayout, oldFullData, oldFullLayou
         }
     }
 
+    var hasInfoLayer = !!oldFullLayout._infolayer;
+
     oldLoop:
     for(i = 0; i < oldFullData.length; i++) {
         var oldTrace = oldFullData[i],
@@ -695,26 +695,9 @@ plots.cleanPlot = function(newFullData, newFullLayout, oldFullData, oldFullLayou
             if(oldUid === newTrace.uid) continue oldLoop;
         }
 
-        var query = (
-            '.hm' + oldUid +
-            ',.contour' + oldUid +
-            ',.carpet' + oldUid +
-            ',#clip' + oldUid +
-            ',.trace' + oldUid
-        );
-
-        // clean old heatmap, contour traces and clip paths
-        // that rely on uid identifiers
-        if(hasPaper) {
-            oldFullLayout._paper.selectAll(query).remove();
-        }
-
-        // clean old colorbars and range slider plot
+        // clean old colorbars
         if(hasInfoLayer) {
-            oldFullLayout._infolayer.selectAll('.cb' + oldUid).remove();
-
-            oldFullLayout._infolayer.selectAll('g.rangeslider-container')
-                .selectAll(query).remove();
+            oldFullLayout._infolayer.select('.cb' + oldUid).remove();
         }
     }
 

src/traces/carpet/plot.js

@@ -18,15 +18,20 @@ var svgTextUtils = require('../../lib/svg_text_utils');
 var Lib = require('../../lib');
 var alignmentConstants = require('../../constants/alignment');
 
-module.exports = function plot(gd, plotinfo, cdcarpet) {
-    if(!cdcarpet.length) {
-        plotinfo.plot.select('.carpetlayer')
-            .selectAll('g.trace')
-            .remove();
-    }
+module.exports = function plot(gd, plotinfo, cdcarpet, carpetLayer) {
+    var i;
+
+    carpetLayer.selectAll('g.trace').each(function() {
+        var classString = d3.select(this).attr('class');
+        var oldUid = classString.split('carpet')[1].split(/\s/)[0];
+        for(i = 0; i < cdcarpet.length; i++) {
+            if(oldUid === cdcarpet[i][0].trace.uid) return;
+        }
+        d3.select(this).remove();
+    });
 
-    for(var i = 0; i < cdcarpet.length; i++) {
-        plotOne(gd, plotinfo, cdcarpet[i]);
+    for(i = 0; i < cdcarpet.length; i++) {
+        plotOne(gd, plotinfo, cdcarpet[i], carpetLayer);
     }
 };
 

src/traces/contour/plot.js

@@ -27,9 +27,18 @@ var constants = require('./constants');
 var costConstants = constants.LABELOPTIMIZER;
 
 
-exports.plot = function plot(gd, plotinfo, cdcontours) {
-    for(var i = 0; i < cdcontours.length; i++) {
-        plotOne(gd, plotinfo, cdcontours[i]);
+exports.plot = function plot(gd, plotinfo, cdcontours, contourLayer) {
+    var i;
+
+    contourLayer.selectAll('g.contour').each(function(d) {
+        for(i = 0; i < cdcontours.length; i++) {
+            if(d.trace.uid === cdcontours[i][0].trace.uid) return;
+        }
+        d3.select(this).remove();
+    });
+
+    for(i = 0; i < cdcontours.length; i++) {
+        plotOne(gd, plotinfo, cdcontours[i], contourLayer);
     }
 };
 

src/traces/contourcarpet/plot.js

@@ -26,9 +26,18 @@ var lookupCarpet = require('../carpet/lookup_carpetid');
 var closeBoundaries = require('../contour/close_boundaries');
 
 
-module.exports = function plot(gd, plotinfo, cdcontours) {
-    for(var i = 0; i < cdcontours.length; i++) {
-        plotOne(gd, plotinfo, cdcontours[i]);
+module.exports = function plot(gd, plotinfo, cdcontours, contourcarpetLayer) {
+    var i;
+
+    contourcarpetLayer.selectAll('g.contour').each(function(d) {
+        for(i = 0; i < cdcontours.length; i++) {
+            if(d.trace.uid === cdcontours[i][0].trace.uid) return;
+        }
+        d3.select(this).remove();
+    });
+
+    for(i = 0; i < cdcontours.length; i++) {
+        plotOne(gd, plotinfo, cdcontours[i], contourcarpetLayer);
     }
 };
 
@@ -46,7 +55,6 @@ function plotOne(gd, plotinfo, cd, contourcarpetLayer) {
     var uid = trace.uid;
     var xa = plotinfo.xaxis;
     var ya = plotinfo.yaxis;
-    var fullLayout = gd._fullLayout;
     var id = 'contour' + uid;
     var pathinfo = emptyPathinfo(contours, plotinfo, cd[0]);
     var isConstraint = contours.type === 'constraint';
@@ -59,11 +67,6 @@ function plotOne(gd, plotinfo, cd, contourcarpetLayer) {
         return [xa.c2p(pt[0]), ya.c2p(pt[1])];
     }
 
-    if(trace.visible !== true) {
-        fullLayout._infolayer.selectAll('.cb' + uid).remove();
-        return;
-    }
-
     // Define the perimeter in a/b coordinates:
     var perimeter = [
         [a[0], b[b.length - 1]],

src/traces/heatmap/plot.js

@@ -9,6 +9,7 @@
 
 'use strict';
 
+var d3 = require('d3');
 var tinycolor = require('tinycolor2');
 
 var Registry = require('../../registry');
@@ -18,32 +19,28 @@ var xmlnsNamespaces = require('../../constants/xmlns_namespaces');
 
 var maxRowLength = require('./max_row_length');
 
+module.exports = function(gd, plotinfo, cdheatmaps, heatmapLayer) {
+    var i;
 
-module.exports = function(gd, plotinfo, cdheatmaps) {
-    for(var i = 0; i < cdheatmaps.length; i++) {
-        plotOne(gd, plotinfo, cdheatmaps[i]);
+    heatmapLayer.selectAll('.hm > image').each(function(d) {
+        var oldTrace = d.trace || {};
+        for(i = 0; i < cdheatmaps.length; i++) {
+            if(oldTrace.uid === cdheatmaps[i][0].trace.uid) return;
+        }
+        d3.select(this.parentNode).remove();
+    });
+
+    for(i = 0; i < cdheatmaps.length; i++) {
+        plotOne(gd, plotinfo, cdheatmaps[i], heatmapLayer);
     }
 };
 
 function plotOne(gd, plotinfo, cd, heatmapLayer) {
     var cd0 = cd[0];
     var trace = cd0.trace;
-    var uid = trace.uid;
     var xa = plotinfo.xaxis;
     var ya = plotinfo.yaxis;
-    var fullLayout = gd._fullLayout;
-    var id = 'hm' + uid;
-
-    // in case this used to be a contour map
-    fullLayout._paper.selectAll('.contour' + uid).remove();
-    fullLayout._infolayer.selectAll('g.rangeslider-container')
-        .selectAll('.contour' + uid).remove();
-
-    if(trace.visible !== true) {
-        fullLayout._paper.selectAll('.' + id).remove();
-        fullLayout._infolayer.selectAll('.cb' + uid).remove();
-        return;
-    }
+    var id = 'hm' + trace.uid;
 
     var z = cd0.z;
     var x = cd0.x;