rm <g .trace> in overlaid subplots when removing exit() subplots

Author: etpinard

src/plots/cartesian/index.js

@@ -368,17 +368,39 @@ function makeSubplotLayer(plotinfo) {
 function purgeSubplotLayers(layers, fullLayout) {
     if(!layers) return;
 
-    layers.each(function(subplot) {
-        var plotgroup = d3.select(this),
-            clipId = 'clip' + fullLayout._uid + subplot + 'plot';
+    var overlayIdsToRemove = {};
+
+    layers.each(function(subplotId) {
+        var plotgroup = d3.select(this);
+        var clipId = 'clip' + fullLayout._uid + subplotId + 'plot';
 
         plotgroup.remove();
-        fullLayout._draggers.selectAll('g.' + subplot).remove();
+        fullLayout._draggers.selectAll('g.' + subplotId).remove();
         fullLayout._defs.select('#' + clipId).remove();
 
+        overlayIdsToRemove[subplotId] = true;
+
         // do not remove individual axis <clipPath>s here
         // as other subplots may need them
     });
+
+    // must remove overlaid subplot trace layers 'manually'
+
+    var subplots = fullLayout._plots;
+    var subplotIds = Object.keys(subplots);
+
+    for(var i = 0; i < subplotIds.length; i++) {
+        var subplotInfo = subplots[subplotIds[i]];
+        var overlays = subplotInfo.overlays || [];
+
+        for(var j = 0; j < overlays.length; j++) {
+            var overlayInfo = overlays[j];
+
+            if(overlayIdsToRemove[overlayInfo.id]) {
+                overlayInfo.plot.selectAll('.trace').remove();
+            }
+        }
+    }
 }
 
 function joinLayer(parent, nodeType, className) {

test/jasmine/tests/cartesian_test.js

@@ -8,7 +8,6 @@ var createGraphDiv = require('../assets/create_graph_div');
 var destroyGraphDiv = require('../assets/destroy_graph_div');
 var failTest = require('../assets/fail_test');
 
-
 describe('restyle', function() {
     describe('scatter traces', function() {
         var gd;
@@ -375,4 +374,33 @@ describe('subplot creation / deletion:', function() {
         .catch(failTest)
         .then(done);
     });
+
+    it('should clear overlaid subplot trace layers on restyle', function(done) {
+        var fig = Lib.extendDeep({}, require('@mocks/overlaying-axis-lines.json'));
+
+        function _assert(xyCnt, x2y2Cnt) {
+            expect(d3.select('.subplot.xy').select('.plot').selectAll('.trace').size())
+                .toBe(xyCnt, 'has correct xy subplot trace count');
+            expect(d3.select('.overplot').select('.x2y2').selectAll('.trace').size())
+                .toBe(x2y2Cnt, 'has correct x2y2 oveylaid subplot trace count');
+        }
+
+        Plotly.plot(gd, fig).then(function() {
+            _assert(1, 1);
+            return Plotly.restyle(gd, 'visible', false, [1]);
+        })
+        .then(function() {
+            _assert(1, 0);
+            return Plotly.restyle(gd, 'visible', true);
+        })
+        .then(function() {
+            _assert(1, 1);
+            return Plotly.restyle(gd, 'visible', false);
+        })
+        .then(function() {
+            _assert(0, 0);
+        })
+        .catch(failTest)
+        .then(done);
+    });
 });