introduce new strategy for cartesian trace module layer updates

- make trace module layers 'data-driven', one layer per unique
  plot module. Use _module.layerName to denote reused plot methods.
- pass layer to trace _module.plot (as 3rd arg) to not mutate node data
  and allow a given _module.plot method to trace in multiple layers
- no need for previous `_plotMethods` stash attempt
- rename 'imagelayer' -> 'heatmaplayer', 'maplayer' -> 'contourlayer'
  for consistency for other trace modules

Author: etpinard

src/components/rangeslider/draw.js

@@ -456,8 +456,7 @@ function drawRangePlot(rangeSlider, gd, axisOpts, opts) {
             plotgroup: plotgroup,
             xaxis: xa,
             yaxis: ya,
-            isRangePlot: true,
-            plotMethods: opts._plotMethods
+            isRangePlot: true
         };
 
         if(isMainPlot) mainplotinfo = plotinfo;
@@ -467,10 +466,6 @@ function drawRangePlot(rangeSlider, gd, axisOpts, opts) {
         }
 
         Cartesian.rangePlot(gd, plotinfo, filterRangePlotCalcData(calcData, id));
-
-        // stash list of plot methods on range-plot for later,
-        // so that they can be called to clear traces of 'gone' modules
-        opts._plotMethods = plotinfo.plotMethods;
     });
 }
 

src/plot_api/subroutines.js

@@ -21,7 +21,6 @@ var Titles = require('../components/titles');
 var ModeBar = require('../components/modebar');
 
 var Axes = require('../plots/cartesian/axes');
-var cartesianConstants = require('../plots/cartesian/constants');
 var alignmentConstants = require('../constants/alignment');
 var axisConstraints = require('../plots/cartesian/constraints');
 var enforceAxisConstraints = axisConstraints.enforce;
@@ -199,15 +198,9 @@ exports.lsInner = function(gd) {
 
         Drawing.setClipUrl(plotinfo.plot, plotClipId);
 
-        for(i = 0; i < cartesianConstants.traceLayerClasses.length; i++) {
-            var layer = cartesianConstants.traceLayerClasses[i];
-            if(layer !== 'scatterlayer' && layer !== 'barlayer') {
-                plotinfo.plot.selectAll('g.' + layer).call(Drawing.setClipUrl, layerClipId);
-            }
-        }
-
         // stash layer clipId value (null or same as clipId)
-        // to DRY up Drawing.setClipUrl calls downstream
+        // to DRY up Drawing.setClipUrl calls on trace-module and trace layers
+        // downstream
         plotinfo.layerClipId = layerClipId;
 
         // figure out extra axis line and tick positions as needed

src/plots/cartesian/constants.js

@@ -61,15 +61,16 @@ module.exports = {
     DFLTRANGEY: [-1, 4],
 
     // Layers to keep trace types in the right order
+    // N.B. each  'unique' plot method must have its own layer
     traceLayerClasses: [
-        'imagelayer',
-        'maplayer',
+        'heatmaplayer',
+        'contourcarpetlayer', 'contourlayer',
         'barlayer',
         'carpetlayer',
         'violinlayer',
         'boxlayer',
         'ohlclayer',
-        'scatterlayer'
+        'scattercarpetlayer', 'scatterlayer'
     ],
 
     layerValue2layerClass: {

src/plots/cartesian/index.js

@@ -10,10 +10,13 @@
 'use strict';
 
 var d3 = require('d3');
+
+var Registry = require('../../registry');
 var Lib = require('../../lib');
 var Plots = require('../plots');
-var getModuleCalcData = require('../get_data').getModuleCalcData;
+var Drawing = require('../../components/drawing');
 
+var getModuleCalcData = require('../get_data').getModuleCalcData;
 var axisIds = require('./axis_ids');
 var constants = require('./constants');
 var xmlnsNamespaces = require('../../constants/xmlns_namespaces');
@@ -179,40 +182,75 @@ exports.plot = function(gd, traces, transitionOpts, makeOnCompleteCallback) {
 };
 
 function plotOne(gd, plotinfo, cdSubplot, transitionOpts, makeOnCompleteCallback) {
+    var traceLayerClasses = constants.traceLayerClasses;
     var fullLayout = gd._fullLayout;
     var modules = fullLayout._modules;
-    // list of plot methods to call (this list includes plot methods of 'gone' modules)
-    var plotMethodsToCall = plotinfo.plotMethods || [];
-    // list of plot methods of visible module on this subplot
-    var plotMethods = [];
-    var i, plotMethod;
-
-    for(i = 0; i < modules.length; i++) {
-        var _module = modules[i];
-
-        if(_module.basePlotModule.name === 'cartesian') {
-            plotMethod = _module.plot;
-            Lib.pushUnique(plotMethodsToCall, plotMethod);
-            Lib.pushUnique(plotMethods, plotMethod);
+    var _module, cdModuleAndOthers, cdModule;
+
+    var layerData = [];
+
+    for(var i = 0; i < traceLayerClasses.length; i++) {
+        var className = traceLayerClasses[i];
+
+        for(var j = 0; j < modules.length; j++) {
+            _module = modules[j];
+
+            if(_module.basePlotModule.name === 'cartesian' &&
+                (_module.layerName || _module.name + 'layer') === className
+            ) {
+                var plotMethod = _module.plot;
+
+                // plot all traces of this type on this subplot at once
+                cdModuleAndOthers = getModuleCalcData(cdSubplot, plotMethod);
+                cdModule = cdModuleAndOthers[0];
+                // don't need to search the found traces again - in fact we need to NOT
+                // so that if two modules share the same plotter we don't double-plot
+                cdSubplot = cdModuleAndOthers[1];
+
+                if(cdModule.length) {
+                    layerData.push({
+                        className: className,
+                        plotMethod: plotMethod,
+                        cdModule: cdModule
+                    });
+                }
+                break;
+            }
         }
     }
 
-    for(i = 0; i < plotMethodsToCall.length; i++) {
-        plotMethod = plotMethodsToCall[i];
+    var layers = plotinfo.plot.selectAll('g.mlayer')
+        .data(layerData, function(d) { return d.className; });
 
-        // plot all traces of this type on this subplot at once
-        var cdModuleAndOthers = getModuleCalcData(cdSubplot, plotMethod);
-        var cdModule = cdModuleAndOthers[0];
-        // don't need to search the found traces again - in fact we need to NOT
-        // so that if two modules share the same plotter we don't double-plot
-        cdSubplot = cdModuleAndOthers[1];
+    layers.enter().append('g')
+        .attr('class', function(d) { return d.className; })
+        .classed('mlayer', true);
 
-        plotMethod(gd, plotinfo, cdModule, transitionOpts, makeOnCompleteCallback);
-    }
+    layers.exit().remove();
+
+    layers.order();
+
+    layers.each(function(d) {
+        var sel = d3.select(this);
+        var className = d.className;
 
-    // save list of plot methods on subplot for later,
-    // so that they can be called to clear traces of 'gone' modules
-    plotinfo.plotMethods = plotMethods;
+        d.plotMethod(
+            gd, plotinfo, d.cdModule, sel,
+            transitionOpts, makeOnCompleteCallback
+        );
+
+        // layers that allow `cliponaxis: false`
+        if(className !== 'scatterlayer' && className !== 'barlayer') {
+            Drawing.setClipUrl(sel, plotinfo.layerClipId);
+        }
+    });
+
+    // call Scattergl.plot separately
+    if(fullLayout._has('scattergl')) {
+        _module = Registry.getModule('scattergl');
+        cdModule = getModuleCalcData(cdSubplot, _module)[0];
+        _module.plot(gd, plotinfo, cdModule);
+    }
 }
 
 exports.clean = function(newFullData, newFullLayout, oldFullData, oldFullLayout) {
@@ -441,10 +479,6 @@ function makeSubplotLayer(gd, plotinfo) {
         ensureSingleAndAddDatum(plotinfo.gridlayer, 'g', plotinfo.xaxis._id);
         ensureSingleAndAddDatum(plotinfo.gridlayer, 'g', plotinfo.yaxis._id);
         plotinfo.gridlayer.selectAll('g').sort(axisIds.idSort);
-
-        for(var i = 0; i < constants.traceLayerClasses.length; i++) {
-            ensureSingle(plotinfo.plot, 'g', constants.traceLayerClasses[i]);
-        }
     }
 
     plotinfo.xlines

src/traces/bar/plot.js

@@ -30,13 +30,12 @@ var attributes = require('./attributes'),
 // padding in pixels around text
 var TEXTPAD = 3;
 
-module.exports = function plot(gd, plotinfo, cdbar) {
-    var xa = plotinfo.xaxis,
-        ya = plotinfo.yaxis,
-        fullLayout = gd._fullLayout;
+module.exports = function plot(gd, plotinfo, cdbar, barLayer) {
+    var xa = plotinfo.xaxis;
+    var ya = plotinfo.yaxis;
+    var fullLayout = gd._fullLayout;
 
-    var bartraces = plotinfo.plot.select('.barlayer')
-        .selectAll('g.trace.bars')
+    var bartraces = barLayer.selectAll('g.trace.bars')
         .data(cdbar, function(d) { return d[0].trace.uid; });
 
     bartraces.enter().append('g')

src/traces/box/plot.js

@@ -17,13 +17,12 @@ var Drawing = require('../../components/drawing');
 var JITTERCOUNT = 5; // points either side of this to include
 var JITTERSPREAD = 0.01; // fraction of IQR to count as "dense"
 
-function plot(gd, plotinfo, cdbox) {
+function plot(gd, plotinfo, cdbox, boxLayer) {
     var fullLayout = gd._fullLayout;
     var xa = plotinfo.xaxis;
     var ya = plotinfo.yaxis;
 
-    var boxtraces = plotinfo.plot.select('.boxlayer')
-        .selectAll('g.trace.boxes')
+    var boxtraces = boxLayer.selectAll('g.trace.boxes')
         .data(cdbox, function(d) { return d[0].trace.uid; });
 
     boxtraces.enter().append('g')

src/traces/candlestick/index.js

@@ -36,6 +36,7 @@ module.exports = {
     supplyDefaults: require('./defaults'),
     calc: require('./calc'),
     plot: require('../box/plot').plot,
+    layerName: 'boxlayer',
     style: require('../box/style'),
     hoverPoints: require('../ohlc/hover'),
     selectPoints: require('../ohlc/select')

src/traces/carpet/plot.js

@@ -30,7 +30,7 @@ module.exports = function plot(gd, plotinfo, cdcarpet) {
     }
 };
 
-function plotOne(gd, plotinfo, cd) {
+function plotOne(gd, plotinfo, cd, carpetLayer) {
     var t = cd[0];
     var trace = cd[0].trace,
         xa = plotinfo.xaxis,
@@ -39,10 +39,9 @@ function plotOne(gd, plotinfo, cd) {
         bax = trace.baxis,
         fullLayout = gd._fullLayout;
 
-    var gridLayer = plotinfo.plot.select('.carpetlayer');
     var clipLayer = fullLayout._clips;
 
-    var axisLayer = Lib.ensureSingle(gridLayer, 'g', 'carpet' + trace.uid).classed('trace', true);
+    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');

src/traces/contour/plot.js

@@ -33,41 +33,30 @@ exports.plot = function plot(gd, plotinfo, cdcontours) {
     }
 };
 
-function plotOne(gd, plotinfo, cd) {
-    var trace = cd[0].trace,
-        x = cd[0].x,
-        y = cd[0].y,
-        contours = trace.contours,
-        uid = trace.uid,
-        xa = plotinfo.xaxis,
-        ya = plotinfo.yaxis,
-        fullLayout = gd._fullLayout,
-        id = 'contour' + uid,
-        pathinfo = emptyPathinfo(contours, plotinfo, cd[0]);
-
-    if(trace.visible !== true) {
-        fullLayout._paper.selectAll('.' + id + ',.hm' + uid).remove();
-        fullLayout._infolayer.selectAll('.cb' + uid).remove();
-        return;
-    }
+function plotOne(gd, plotinfo, cd, contourLayer) {
+    var trace = cd[0].trace;
+    var x = cd[0].x;
+    var y = cd[0].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]);
 
     // use a heatmap to fill - draw it behind the lines
+    var heatmapColoringLayer = Lib.ensureSingle(contourLayer, 'g', 'heatmapcoloring');
+    var cdheatmaps = [];
     if(contours.coloring === 'heatmap') {
         if(trace.zauto && (trace.autocontour === false)) {
             trace._input.zmin = trace.zmin =
                 contours.start - contours.size / 2;
             trace._input.zmax = trace.zmax =
                 trace.zmin + pathinfo.length * contours.size;
         }
-
-        heatmapPlot(gd, plotinfo, [cd]);
-    }
-    // in case this used to be a heatmap (or have heatmap fill)
-    else {
-        fullLayout._paper.selectAll('.hm' + uid).remove();
-        fullLayout._infolayer.selectAll('g.rangeslider-container')
-            .selectAll('.hm' + uid).remove();
+        cdheatmaps = [cd];
     }
+    heatmapPlot(gd, plotinfo, cdheatmaps, heatmapColoringLayer);
 
     makeCrossings(pathinfo);
     findAllPaths(pathinfo);
@@ -90,15 +79,15 @@ function plotOne(gd, plotinfo, cd) {
     }
 
     // draw everything
-    var plotGroup = exports.makeContourGroup(plotinfo, cd, id);
+    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);
 }
 
-exports.makeContourGroup = function(plotinfo, cd, id) {
-    var plotgroup = plotinfo.plot.select('.maplayer')
+exports.makeContourGroup = function(layer, cd, id) {
+    var plotgroup = layer
         .selectAll('g.contour.' + id)
         .data(cd);
 

src/traces/contourcarpet/plot.js

@@ -32,7 +32,7 @@ module.exports = function plot(gd, plotinfo, cdcontours) {
     }
 };
 
-function plotOne(gd, plotinfo, cd) {
+function plotOne(gd, plotinfo, cd, contourcarpetLayer) {
     var trace = cd[0].trace;
 
     var carpet = trace._carpetTrace = lookupCarpet(gd, trace);
@@ -96,7 +96,7 @@ function plotOne(gd, plotinfo, cd) {
     mapPathinfo(pathinfo, ab2p);
 
     // draw everything
-    var plotGroup = contourPlot.makeContourGroup(plotinfo, cd, id);
+    var plotGroup = contourPlot.makeContourGroup(contourcarpetLayer, cd, id);
 
     // Compute the boundary path
     var seg, xp, yp, i;

src/traces/heatmap/plot.js

@@ -25,7 +25,7 @@ module.exports = function(gd, plotinfo, cdheatmaps) {
     }
 };
 
-function plotOne(gd, plotinfo, cd) {
+function plotOne(gd, plotinfo, cd, heatmapLayer) {
     var cd0 = cd[0];
     var trace = cd0.trace;
     var uid = trace.uid;
@@ -137,8 +137,7 @@ function plotOne(gd, plotinfo, cd) {
     // if image is entirely off-screen, don't even draw it
     var isOffScreen = (imageWidth <= 0 || imageHeight <= 0);
 
-    var plotgroup = plotinfo.plot.select('.imagelayer')
-        .selectAll('g.hm.' + id)
+    var plotgroup = heatmapLayer.selectAll('g.hm.' + id)
         .data(isOffScreen ? [] : [0]);
 
     plotgroup.enter().append('g')

src/traces/histogram/index.js

@@ -32,6 +32,7 @@ Histogram.supplyLayoutDefaults = require('../bar/layout_defaults');
 Histogram.calc = require('./calc');
 Histogram.setPositions = require('../bar/set_positions');
 Histogram.plot = require('../bar/plot');
+Histogram.layerName = 'barlayer';
 Histogram.style = require('../bar/style');
 Histogram.colorbar = require('../scatter/colorbar');
 Histogram.hoverPoints = require('./hover');

src/traces/histogram2d/index.js

@@ -15,6 +15,7 @@ Histogram2D.attributes = require('./attributes');
 Histogram2D.supplyDefaults = require('./defaults');
 Histogram2D.calc = require('../heatmap/calc');
 Histogram2D.plot = require('../heatmap/plot');
+Histogram2D.layerName = 'heatmaplayer';
 Histogram2D.colorbar = require('../heatmap/colorbar');
 Histogram2D.style = require('../heatmap/style');
 Histogram2D.hoverPoints = require('./hover');

src/traces/histogram2dcontour/index.js

@@ -15,6 +15,7 @@ Histogram2dContour.attributes = require('./attributes');
 Histogram2dContour.supplyDefaults = require('./defaults');
 Histogram2dContour.calc = require('../contour/calc');
 Histogram2dContour.plot = require('../contour/plot').plot;
+Histogram2dContour.layerName = 'contourlayer';
 Histogram2dContour.style = require('../contour/style');
 Histogram2dContour.colorbar = require('../contour/colorbar');
 Histogram2dContour.hoverPoints = require('../contour/hover');