clear traces in range slider plot when needed

- scatter, heatmap and contour traces must be cleared
  manually as they can't rely on the nasty
  `selectAll('g.trace').remove()` in the cartesian plot routine.
- lock down all (I hope) possible combination in new test case.

Author: etpinard

src/plot_api/plot_api.js

@@ -288,11 +288,19 @@ Plotly.plot = function(gd, data, layout, config) {
                 uid = trace.uid;
 
             if(!isVisible || !Registry.traceIs(trace, '2dMap')) {
-                fullLayout._paper.selectAll(
+                var query = (
                     '.hm' + uid +
                     ',.contour' + uid +
                     ',#clip' + uid
-                ).remove();
+                );
+
+                fullLayout._paper
+                    .selectAll(query)
+                    .remove();
+
+                fullLayout._infolayer.selectAll('g.rangeslider-container')
+                    .selectAll(query)
+                    .remove();
             }
 
             if(!isVisible || !trace._module.colorbar) {

src/plots/cartesian/index.js

@@ -160,6 +160,11 @@ exports.clean = function(newFullData, newFullLayout, oldFullData, oldFullLayout)
                     .remove();
             }
         }
+
+        oldFullLayout._infolayer.selectAll('g.rangeslider-container')
+            .select('g.scatterlayer')
+            .selectAll('g.trace')
+            .remove();
     }
 
     var hadCartesian = (oldFullLayout._has && oldFullLayout._has('cartesian'));

src/plots/plots.js

@@ -571,23 +571,25 @@ plots.cleanPlot = function(newFullData, newFullLayout, oldFullData, oldFullLayou
             if(oldUid === newTrace.uid) continue oldLoop;
         }
 
-        // clean old heatmap, contour, and scatter traces
-        //
-        // Note: This is also how scatter traces (cartesian and scatterternary) get
-        // removed since otherwise the scatter module is not called (and so the join
-        // doesn't register the removal) if scatter traces disappear entirely.
+        var query = (
+            '.hm' + oldUid +
+            ',.contour' + oldUid +
+            ',#clip' + oldUid +
+            ',.trace' + oldUid
+        );
+
+        // clean old heatmap, contour traces and clip paths
+        // that rely on uid identifiers
         if(hasPaper) {
-            oldFullLayout._paper.selectAll(
-                '.hm' + oldUid +
-                ',.contour' + oldUid +
-                ',#clip' + oldUid +
-                ',.trace' + oldUid
-            ).remove();
+            oldFullLayout._paper.selectAll(query).remove();
         }
 
-        // clean old colorbars
+        // clean old colorbars and range slider plot
         if(hasInfoLayer) {
             oldFullLayout._infolayer.selectAll('.cb' + oldUid).remove();
+
+            oldFullLayout._infolayer.selectAll('g.rangeslider-container')
+                .select(query).remove();
         }
     }
 };

src/traces/contour/plot.js

@@ -56,7 +56,11 @@ function plotOne(gd, plotinfo, cd) {
         heatmapPlot(gd, plotinfo, [cd]);
     }
     // in case this used to be a heatmap (or have heatmap fill)
-    else fullLayout._paper.selectAll('.hm' + uid).remove();
+    else {
+        fullLayout._paper.selectAll('.hm' + uid).remove();
+        fullLayout._infolayer.selectAll('g.rangeslider-container')
+            .selectAll('.hm' + uid).remove();
+    }
 
     makeCrossings(pathinfo);
     findAllPaths(pathinfo);

src/traces/heatmap/plot.js

@@ -36,6 +36,8 @@ function plotOne(gd, plotinfo, cd) {
 
     // 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();

test/jasmine/tests/range_slider_test.js

@@ -345,6 +345,90 @@ describe('the range slider', function() {
             })
             .then(done);
         });
+
+        it('should clear traces in range plot when needed', function(done) {
+
+            function count(query) {
+                return d3.select(getRangeSlider()).selectAll(query).size();
+            }
+
+            Plotly.plot(gd, [{
+                type: 'scatter',
+                x: [1, 2, 3],
+                y: [2, 1, 2]
+            }, {
+                type: 'bar',
+                x: [1, 2, 3],
+                y: [2, 5, 2]
+            }], {
+                xaxis: {
+                    rangeslider: { visible: true }
+                }
+            })
+            .then(function() {
+                expect(count('g.scatterlayer > g.trace')).toEqual(1);
+                expect(count('g.barlayer > g.trace')).toEqual(1);
+
+                return Plotly.restyle(gd, 'visible', false);
+            })
+            .then(function() {
+                expect(count('g.scatterlayer > g.trace')).toEqual(0);
+                expect(count('g.barlayer > g.trace')).toEqual(0);
+
+                return Plotly.restyle(gd, 'visible', true);
+            })
+            .then(function() {
+                expect(count('g.scatterlayer > g.trace')).toEqual(1);
+                expect(count('g.barlayer > g.trace')).toEqual(1);
+
+                return Plotly.deleteTraces(gd, [0, 1]);
+            })
+            .then(function() {
+                expect(count('g.scatterlayer > g.trace')).toEqual(0);
+                expect(count('g.barlayer > g.trace')).toEqual(0);
+
+                return Plotly.addTraces(gd, [{
+                    type: 'heatmap',
+                    z: [[1, 2, 3], [2, 1, 3]]
+                }]);
+            })
+            .then(function() {
+                expect(count('g.imagelayer > g.hm')).toEqual(1);
+
+                return Plotly.restyle(gd, 'visible', false);
+            })
+            .then(function() {
+                expect(count('g.imagelayer > g.hm')).toEqual(0);
+
+                return Plotly.restyle(gd, {
+                    visible: true,
+                    type: 'contour'
+                });
+            })
+            .then(function() {
+                expect(count('g.maplayer > g.contour')).toEqual(1);
+
+                return Plotly.restyle(gd, 'type', 'heatmap');
+            })
+            .then(function() {
+                expect(count('g.imagelayer > g.hm')).toEqual(1);
+                expect(count('g.maplayer > g.contour')).toEqual(0);
+
+                return Plotly.restyle(gd, 'type', 'contour');
+            })
+            .then(function() {
+                expect(count('g.imagelayer > g.hm')).toEqual(0);
+                expect(count('g.maplayer > g.contour')).toEqual(1);
+
+                return Plotly.deleteTraces(gd, [0]);
+            })
+            .then(function() {
+                expect(count('g.imagelayer > g.hm')).toEqual(0);
+                expect(count('g.maplayer > g.contour')).toEqual(0);
+            })
+            .then(done);
+
+        });
     });
 
     describe('handleDefaults function', function() {