Merge pull request #7522 from davibarbosa2/fix-global-title-calcs

Refactor title and subtitle selection in drawMainTitle function to use scoped selector

Author: gvwilson

draftlogs/7522_fix.md

@@ -0,0 +1 @@
+- Refactor `drawMainTitle` to use context-specific selections for title and subtitle, avoiding conflicts when multiple plots are present on the same page [[#7522](https://github.com/plotly/plotly.js/pull/7522)]

src/plot_api/subroutines.js

@@ -428,8 +428,8 @@ exports.drawMainTitle = function(gd) {
     });
 
     if(title.text && title.automargin) {
-        var titleObj = d3.selectAll('.gtitle');
-        var titleHeight = Drawing.bBox(d3.selectAll('.g-gtitle').node()).height;
+        var titleObj = d3.select(gd).selectAll('.gtitle');
+        var titleHeight = Drawing.bBox(d3.select(gd).selectAll('.g-gtitle').node()).height;
         var pushMargin = needsMarginPush(gd, title, titleHeight);
         if(pushMargin > 0) {
             applyTitleAutoMargin(gd, y, pushMargin, titleHeight);
@@ -455,7 +455,7 @@ exports.drawMainTitle = function(gd) {
             }
 
             // If there is a subtitle
-            var subtitleObj = d3.selectAll('.gtitle-subtitle');
+            var subtitleObj = d3.select(gd).selectAll('.gtitle-subtitle');
             if(subtitleObj.node()) {
                 // Get bottom edge of title bounding box
                 var titleBB = titleObj.node().getBBox();

test/jasmine/assets/create_graph_div.js

@@ -1,8 +1,8 @@
 'use strict';
 
-module.exports = function createGraphDiv() {
+module.exports = function createGraphDiv(divId = 'graph') {
     var gd = document.createElement('div');
-    gd.id = 'graph';
+    gd.id = divId;
     document.body.appendChild(gd);
 
     // force the graph to be at position 0,0 no matter what

test/jasmine/tests/titles_test.js

@@ -980,6 +980,51 @@ describe('Title automargining', function() {
             expect(gd._fullLayout._size.h).toBeCloseTo(243, -1);
         }).then(done, done.fail);
     });
+
+    it('computes title automargins independently when multiple plots exist', function(done) {
+        var gd1 = gd; 
+        var gd2 = createGraphDiv('title-automargining-2');
+
+        var dataLocal = [{x: [1, 2], y: [1, 2]}];
+
+        var layout1 = {
+            margin: {t: 0, b: 0, l: 0, r: 0},
+            height: 300,
+            width: 400,
+            title: {
+                text: 'Large title for plot 1',
+                font: {size: 36},
+                yref: 'paper',
+                automargin: true
+            }
+        };
+
+        var layout2 = {
+            margin: {t: 0, b: 0, l: 0, r: 0},
+            height: 300,
+            width: 400,
+            title: {
+                text: 'Small',
+                font: {size: 12},
+                yref: 'paper',
+                automargin: true
+            }
+        };
+
+        Plotly.newPlot(gd1, dataLocal, layout1)
+        .then(function() { return Plotly.newPlot(gd2, dataLocal, layout2); })
+        .then(function() {
+            // Each graph should compute its own top automargin from its own title bbox
+            var t1 = gd1._fullLayout._size.t;
+            var t2 = gd2._fullLayout._size.t;
+
+            expect(t1).toBeGreaterThan(t2);
+        }).then(function() {
+            var el = document.getElementById('title-automargining-2');
+            if(el) document.body.removeChild(el);
+        })
+        .then(done, done.fail);
+    });
 });
 
 function expectTitle(expTitle) {