Use plot title as default filename for "Download plot" button

[emilykl]

Addresses #5124

• Use layout.title.text as default download filename when neither config.toImageButtonOptions.filename or gd.fn are defined.
  • "slugify" title by lowercasing, removing HTML tags, removing most special characters, and replacing whitespace with hyphens
  • Ignore MathJax titles entirely, to avoid generating horrible filenames like ihbarfracdpsidt-v-frac-hbar22mnabla2p.png (fall back to subtitle if title is MathJax)
  • Add helper function to get title and subtitle from _fullLayout (so that template values are respected) while ignoring the "Click to add title" placeholder
• Change fallback filename to plot-image rather than newplot
• Change notifier wording for image download slightly, to better match button tooltip (remove references to "snapshot")
• Add/modify tests for the above

Steps for testing

1. Pull this branch and run devtools (npm run start)
2. Load any plot in the devtools
3. Click the "Download plot as PNG" button (camera icon) and verify that the downloaded plot filename corresponds to the plot title
4. Repeat for several more plots, including the below:
   a. scatter_marker_line_dash (normal example, filename should match)
   b. bar-like_traces_tozero (title is defined in template, filename should match)
   c. automargin-small-width (no title, should default to plot-image.png)
   d. mathjax (MathJax title, should default to plot-image.png)

[archmoj]

Nice!
What's the expected behavior when title.text is set to a dot?

Plotly.newPlot(gd, [{y: [1, 2]}], {title: {text: "."}});

Right now it returns png.png!

[archmoj]

You may also consider adding the subtitle.text if present.

[emilykl]

I'm open to that, but I'm having trouble thinking of a real-world example where adding the subtitle would result in a better filename.

I suppose maybe in the case where you have multiple plots with the same title but different subtitles, that could differentiate the filenames.

Do you have any particular examples in mind?

[archmoj]

Here is a common example where subtitle could be used to provide the time stamp of the graph.

Plotly.newPlot(gd, [{y: [1, 2]}], {title: {text: "Hourly Temp. (°C) Forecast - Montréal", subtitle: {text: "9 June 2026"}}});

[emilykl]

That's a positive example, if we add the subtitle we would get hourly-temp-c-forecast-montreal-9-june-2.png instead of hourly-temp-c-forecast-montreal.png. Though I also think the filename with just the title is fine.

However I also see cases where adding the subtitle gives a worse result, for example this plot in the docs where we would end up with life-expectancy-life-expectancy-by-europ.png rather than life-expectancy.png.

I've updated the logic to fall back to the subtitle in cases where the title is missing or consists of MathJax, which I think might be the best of both worlds.

[emilykl]

Nice! What's the expected behavior when title.text is set to a dot?

Plotly.newPlot(gd, [{y: [1, 2]}], {title: {text: "."}});

Right now it returns png.png!

Good catch!! That's a wild edge case, I guess I would have expected it to return ..png, which also isn't a good outcome.

I suppose . should either be treated the same as whitespace characters, or simply removed, I'll make that change.

[emilykl]

Nice! What's the expected behavior when title.text is set to a dot?

Plotly.newPlot(gd, [{y: [1, 2]}], {title: {text: "."}});

Right now it returns png.png!

Good catch!! That's a wild edge case, I guess I would have expected it to return ..png, which also isn't a good outcome.

I suppose . should either be treated the same as whitespace characters, or simply removed, I'll make that change.

@archmoj Updated — I added . to the list of forbidden characters, so it will be removed, and therefore a plot with the title . results in a download named plot-image.png.

[archmoj]

I'm not sure about lowering the case.

[emilykl]

I'm going to keep the lowercasing for now, since it's consistent with the lowercasing in newplot.png and also matches the way most URLs are lowercased. However open to changing it in the future depending on feedback.

[camdecoster]

Looks good. I made one small suggestion, but feel free to ignore it.