From 727f913bfc861187c436f59c31f9a17bb12fca6f Mon Sep 17 00:00:00 2001 From: Davi Barbosa Date: Thu, 14 Aug 2025 23:44:34 -0300 Subject: [PATCH 1/4] Refactor title and subtitle selection in drawMainTitle function to use context-specific selection from the graph div (gd). --- src/plot_api/subroutines.js | 6 +++--- 1 file changed, 3 insertions(+), 3 deletions(-) diff --git a/src/plot_api/subroutines.js b/src/plot_api/subroutines.js index 85b96ffec5c..7cb735ce338 100644 --- a/src/plot_api/subroutines.js +++ b/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(); From 0b1d6c9ba03a00bc30ba152fefda5d399ba01553 Mon Sep 17 00:00:00 2001 From: Davi Barbosa Date: Fri, 15 Aug 2025 00:22:44 -0300 Subject: [PATCH 2/4] Update draftlog for PR #7522 --- draftlogs/7522_fix.md | 1 + 1 file changed, 1 insertion(+) create mode 100644 draftlogs/7522_fix.md diff --git a/draftlogs/7522_fix.md b/draftlogs/7522_fix.md new file mode 100644 index 00000000000..11547cb7c8f --- /dev/null +++ b/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)] From bc8096798247b5893e6d412e834c2f207382cec1 Mon Sep 17 00:00:00 2001 From: Davi Barbosa Date: Fri, 15 Aug 2025 01:57:07 -0300 Subject: [PATCH 3/4] Add test for title automargins in multiple plots --- test/jasmine/tests/titles_test.js | 43 +++++++++++++++++++++++++++++++ 1 file changed, 43 insertions(+) diff --git a/test/jasmine/tests/titles_test.js b/test/jasmine/tests/titles_test.js index 839cbdd55b3..6137c8adeaf 100644 --- a/test/jasmine/tests/titles_test.js +++ b/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) { From e8434c8cadd5e9333a5587771bbc35d00beff100 Mon Sep 17 00:00:00 2001 From: Davi Barbosa Date: Fri, 15 Aug 2025 18:32:51 -0300 Subject: [PATCH 4/4] Enhance createGraphDiv function to accept a customizable divId parameter and update tests to utilize the new functionality. --- test/jasmine/assets/create_graph_div.js | 4 ++-- test/jasmine/tests/titles_test.js | 6 ++++-- 2 files changed, 6 insertions(+), 4 deletions(-) diff --git a/test/jasmine/assets/create_graph_div.js b/test/jasmine/assets/create_graph_div.js index 9791d46018c..3dce4997b92 100644 --- a/test/jasmine/assets/create_graph_div.js +++ b/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 diff --git a/test/jasmine/tests/titles_test.js b/test/jasmine/tests/titles_test.js index 6137c8adeaf..68772a00ffc 100644 --- a/test/jasmine/tests/titles_test.js +++ b/test/jasmine/tests/titles_test.js @@ -8,7 +8,6 @@ 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'); @@ -984,7 +983,7 @@ describe('Title automargining', function() { it('computes title automargins independently when multiple plots exist', function(done) { var gd1 = gd; - var gd2 = createShadowGraphDiv(); + var gd2 = createGraphDiv('title-automargining-2'); var dataLocal = [{x: [1, 2], y: [1, 2]}]; @@ -1020,6 +1019,9 @@ describe('Title automargining', function() { 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); });