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

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/tests/titles_test.js

@@ -8,6 +8,7 @@ var Lib = require('../../../src/lib');
 var rgb = require('../../../src/components/color').rgb;
 
 var createGraphDiv = require('../assets/create_graph_div');
+var createShadowGraphDiv = require('../assets/create_shadow_graph_div');
 var destroyGraphDiv = require('../assets/destroy_graph_div');
 var mouseEvent = require('../assets/mouse_event');
 
@@ -980,6 +981,48 @@ 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 = createShadowGraphDiv();
+
+        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(done, done.fail);
+    });
 });
 
 function expectTitle(expTitle) {