Merge pull request #3678 from plotly/fix-3677

ensure we create only one `modebar-container`

Author: antoinerg

src/plot_api/plot_api.js

@@ -3802,6 +3802,7 @@ function makePlotFramework(gd) {
         .classed('gl-container', true);
 
     fullLayout._paperdiv.selectAll('.main-svg').remove();
+    fullLayout._paperdiv.select('.modebar-container').remove();
 
     fullLayout._paper = fullLayout._paperdiv.insert('svg', ':first-child')
         .classed('main-svg', true);

test/jasmine/tests/hover_label_test.js

@@ -3221,6 +3221,36 @@ describe('hovermode defaults to', function() {
     });
 });
 
+describe('hover labels z-position', function() {
+    var gd;
+
+    beforeEach(function() {
+        gd = createGraphDiv();
+    });
+
+    afterEach(destroyGraphDiv);
+    var mock = require('@mocks/14.json');
+
+    it('is above the modebar', function(done) {
+        Plotly.plot(gd, mock).then(function() {
+            var infolayer = document.getElementsByClassName('infolayer');
+            var modebar = document.getElementsByClassName('modebar-container');
+            var hoverlayer = document.getElementsByClassName('hoverlayer');
+
+            expect(infolayer.length).toBe(1);
+            expect(modebar.length).toBe(1);
+            expect(hoverlayer.length).toBe(1);
+
+            var compareMask = infolayer[0].compareDocumentPosition(modebar[0]);
+            expect(compareMask).toBe(Node.DOCUMENT_POSITION_FOLLOWING, '.modebar-container appears after the .infolayer');
+
+            compareMask = modebar[0].compareDocumentPosition(hoverlayer[0]);
+            expect(compareMask).toBe(Node.DOCUMENT_POSITION_FOLLOWING, '.hoverlayer appears after the .modebar');
+        })
+        .catch(failTest)
+        .then(done);
+    });
+});
 
 describe('touch devices', function() {
     afterEach(destroyGraphDiv);

test/jasmine/tests/plot_api_test.js

@@ -2683,6 +2683,23 @@ describe('Test plot api', function() {
             .catch(failTest)
             .then(done);
         });
+
+        it('should only have one modebar-container', function(done) {
+            var data = [{y: [1, 2]}];
+
+            Plotly.plot(gd, data).then(function() {
+                var modebars = document.getElementsByClassName('modebar-container');
+                expect(modebars.length).toBe(1);
+
+                return Plotly.newPlot(gd, data);
+            })
+            .then(function() {
+                var modebars = document.getElementsByClassName('modebar-container');
+                expect(modebars.length).toBe(1);
+            })
+            .catch(failTest)
+            .then(done);
+        });
     });
 
     describe('Plotly.update should', function() {