clear old legends for react calls

Author: archmoj

src/components/legend/draw.js

@@ -24,13 +24,30 @@ var helpers = require('./helpers');
 
 var MAIN_TITLE = 1;
 
+var LEGEND_PATTERN = /^legend[0-9]*$/;
+
 module.exports = function draw(gd, opts) {
     if(opts) {
         drawOne(gd, opts);
     } else {
-        var legends = gd._fullLayout._legends;
-        for(var i = 0; i < legends.length; i++) {
-            var legendId = legends[i];
+        var fullLayout = gd._fullLayout;
+        var newLegends = fullLayout._legends;
+
+        // remove old legends that won't stay on the graph
+        var oldLegends = fullLayout._infolayer.selectAll('[class^="legend"]');
+
+        oldLegends.each(function() {
+            var el = d3.select(this);
+            var classes = el.attr('class');
+            var cls = classes.split(' ')[0];
+            if(cls.match(LEGEND_PATTERN) && newLegends.indexOf(cls) === -1) {
+                el.remove();
+            }
+        });
+
+        // draw/update new legends
+        for(var i = 0; i < newLegends.length; i++) {
+            var legendId = newLegends[i];
             var legendObj = gd._fullLayout[legendId];
             drawOne(gd, legendObj);
         }

test/jasmine/tests/legend_test.js

@@ -1122,6 +1122,44 @@ describe('legend relayout update', function() {
         })
         .then(done, done.fail);
     });
+
+    it('should be able to add & clear multiple legends using react', function(done) {
+        var fig1 = {
+            data: [{
+                y: [1, 2, 3]
+            }]
+        };
+
+        var fig2 = {
+            data: [{
+                y: [1, 2, 3]
+            }, {
+                y: [3, 1, 2],
+                legend: 'legend2'
+            }],
+            layout: {
+                legend2: {y: 0.5}
+            }
+        };
+
+        Plotly.newPlot(gd, fig1)
+        .then(function() {
+            expect(d3SelectAll('.legend2')[0].length).toBe(0);
+        })
+        .then(function() {
+            return Plotly.react(gd, fig2);
+        })
+        .then(function() {
+            expect(d3SelectAll('.legend2')[0].length).toBe(1);
+        })
+        .then(function() {
+            return Plotly.react(gd, fig1);
+        })
+        .then(function() {
+            expect(d3SelectAll('.legend2')[0].length).toBe(0);
+        })
+        .then(done, done.fail);
+    });
 });
 
 describe('legend orientation change:', function() {