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

[davibarbosa2]

This pull request refactors the drawMainTitle function to improve how main titles and subtitles are selected.

Previously, the function used a global d3.selectAll to select the .gtitle and .gtitle-subtitle elements. This could lead to incorrect selections if multiple plots were present on the same page.

The changes in this PR modify the selection to be context-specific by using d3.select(gd).selectAll, ensuring that the title and subtitle elements are selected only from within the current graph div (gd). This prevents styling and layout conflicts between different plots.

Closes #7521

[emilykl]

createShadowGraphDiv() is a specialized function for testing graphs in the shadow DOM; I'd rather not use it here.

Instead let's modify the createGraphDiv() function to accept an optional divId argument.

[davibarbosa2]

PR is updated! I included a cleanup to destroy the new graph div after the test. Let me know if you'd prefer I update destroyGraphDiv to handle other IDs instead.

[emilykl]

See one comment regarding the test; otherwise looks great. Thanks very much for the fix @davibarbosa2 . 🎉

[davibarbosa2]

I'm seeing a CI failure 😢 the tests are passing on my machine. Any chance you could restart the build for me?

[Lexachoc]

@davibarbosa2 @emilykl Please see my comment #7513 (comment) on how to fix the CI issue as a workaround in the GitHub workflow.

I see that your jasmine error report shows the line transition_test.js:653:13. Increasing the delay time from 50 to 100 might help.

plotly.js/test/jasmine/tests/transition_test.js

Lines 646 to 652 in e8434c8

	.then(function() {
	data[0].marker.color = 'black';
	layout.xaxis.range = [-1, 1];
	return Plotly.react(gd, data, layout);
	})
	.then(delay(50))
	.then(function() {