GV

GeezerVison

The World Wide Web, restored to 800 pixels of glory.

Home|About|Gaming cabinet|Archives|How it works|Starter sites

On this site

  • Sign in
  • ActionsCI/CD and automation
  • CodespacesCloud development environments
  • All Features
  • Documentation
  • Training
  • Certifications
  • Build with Copilot
  • Customize Copilot
  • Integrations
  • Trending repos
  • GitHub Sponsors
  • Developer articles
  • Enterprises

This view

  • Original page
  • New address

GeezerVison is showing github.com — Use plot title as default filename for "Download plot" button by emilykl · Pull Request #7828 · plotly/plotly.js

Conversation

@emilykl

@emilykl emilykl commented Jun 8, 2026 •
edited
Loading

Uh oh!

There was an error while loading. Please reload this page.

Copy link
Copy Markdown
Contributor

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)

Sorry, something went wrong.

Uh oh!

There was an error while loading. Please reload this page.

All reactions
emilykl added 4 commits June 8, 2026 15:28
@emilykl
use plot title for download filename, and change fallback to plot-ima…
6d907c1
…ge rather than newplot
@emilykl
add tests
5c96fa4
@emilykl
slightly change notifier wording for image download
7cf0e1f
@emilykl
ignore tex titles for filename
1d8668a
@emilykl
emilykl requested a review from camdecoster June 8, 2026 21:15
@archmoj

archmoj commented Jun 8, 2026

Copy link
Copy Markdown
Contributor

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!

All reactions

Sorry, something went wrong.

Uh oh!

There was an error while loading. Please reload this page.

archmoj
archmoj reviewed Jun 8, 2026
View reviewed changes
Comment thread src/snapshot/download.js
// so ignore the title entirely if it contains LaTeX markup
if (!svgTextUtils.matchTex(plotTitle)) {
potentialFilename = Lib.slugify(plotTitle, 40);
}

@archmoj archmoj Jun 8, 2026

Copy link
Copy Markdown
Contributor

There was a problem hiding this comment.

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

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

Sorry, something went wrong.

Uh oh!

There was an error while loading. Please reload this page.

All reactions

@emilykl emilykl Jun 8, 2026

Copy link
Copy Markdown
Contributor Author

There was a problem hiding this comment.

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

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?

Sorry, something went wrong.

Uh oh!

There was an error while loading. Please reload this page.

All reactions

@archmoj archmoj Jun 9, 2026

Copy link
Copy Markdown
Contributor

There was a problem hiding this comment.

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

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"}}});

Sorry, something went wrong.

Uh oh!

There was an error while loading. Please reload this page.

All reactions

@emilykl emilykl Jun 16, 2026

Copy link
Copy Markdown
Contributor Author

There was a problem hiding this comment.

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

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.

Sorry, something went wrong.

Uh oh!

There was an error while loading. Please reload this page.

All reactions
@emilykl

emilykl commented Jun 8, 2026

Copy link
Copy Markdown
Contributor Author

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.

All reactions

Sorry, something went wrong.

Uh oh!

There was an error while loading. Please reload this page.

emilykl added 2 commits June 9, 2026 11:32
@emilykl
expand forbidden chars
0a74890
@emilykl
update locales files
6a487f0
@emilykl

emilykl commented Jun 9, 2026 •
edited
Loading

Uh oh!

There was an error while loading. Please reload this page.

Copy link
Copy Markdown
Contributor Author

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.

All reactions

Sorry, something went wrong.

Uh oh!

There was an error while loading. Please reload this page.

archmoj
archmoj reviewed Jun 9, 2026
View reviewed changes
Comment thread src/lib/slugify.js Resolved

Uh oh!

There was an error while loading. Please reload this page.

archmoj
archmoj reviewed Jun 9, 2026
View reviewed changes
Comment thread src/lib/slugify.js Outdated
.replace(UNICODE_REPLACEMENT_CHAR_REGEX, '') // Drop Unicode replacement chars left by previous step
.replace(HTML_TAGS_REGEX, ' ') // Remove < > tags, such as <br> (replace with space)
.replace(FORBIDDEN_CHARS_REGEX, '') // Remove forbidden filename characters
.toLowerCase() // Lowercase everything

@archmoj archmoj Jun 9, 2026

Copy link
Copy Markdown
Contributor

There was a problem hiding this comment.

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

I'm not sure about lowering the case.

Sorry, something went wrong.

Uh oh!

There was an error while loading. Please reload this page.

All reactions

@emilykl emilykl Jun 17, 2026

Copy link
Copy Markdown
Contributor Author

There was a problem hiding this comment.

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

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.

Sorry, something went wrong.

Uh oh!

There was an error while loading. Please reload this page.

All reactions
camdecoster
camdecoster reviewed Jun 9, 2026
View reviewed changes
Comment thread src/lib/svg_text_utils.js Resolved

Uh oh!

There was an error while loading. Please reload this page.

Comment thread src/snapshot/download.js Resolved

Uh oh!

There was an error while loading. Please reload this page.

Comment thread lib/locales/cs.js Resolved

Uh oh!

There was an error while loading. Please reload this page.

emilykl and others added 6 commits June 16, 2026 15:12
@emilykl
also remove = + ; chars from filenames
93599ac
@emilykl @camdecoster
Apply suggestion from @camdecoster
2cfef6d
Co-authored-by: Cameron DeCoster <[email protected]>
@emilykl
update translations
7b7753f
@emilykl
fall back to plot subtitle if title is not suitable for filename
fc722c3
@emilykl
exclude ALMOST ALL symbols and punctuation (more aggressive, using Un…
9c1d9a0
…icode classes) from filenames
@emilykl
ignore biome rule
8895c4c
camdecoster
camdecoster approved these changes Jun 17, 2026
View reviewed changes

@camdecoster camdecoster left a comment

Copy link
Copy Markdown
Contributor

There was a problem hiding this comment.

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

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

Sorry, something went wrong.

Uh oh!

There was an error while loading. Please reload this page.

All reactions
Comment thread src/lib/svg_text_utils.js Resolved

Uh oh!

There was an error while loading. Please reload this page.

@emilykl @camdecoster
Update src/lib/svg_text_utils.js
d8e3bf9
Co-authored-by: Cameron DeCoster <[email protected]>
@emilykl
emilykl merged commit 7b9c347 into v4.0 Jun 17, 2026
83 checks passed

Uh oh!

There was an error while loading. Please reload this page.

@emilykl
emilykl deleted the 5124-feature branch June 17, 2026 20:08
@emilykl emilykl mentioned this pull request Jun 18, 2026
Add missing draftlog for PR 7828 #7851
Merged
Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment

Reviewers

@camdecoster camdecoster camdecoster approved these changes
+1 more reviewer
@archmoj archmoj archmoj left review comments
Reviewers whose approvals may not affect merge requirements

Uh oh!

There was an error while loading. Please reload this page.

Assignees

No one assigned

Labels

None yet

Projects

None yet

Milestone

No milestone

Development

Successfully merging this pull request may close these issues.

Uh oh!

There was an error while loading. Please reload this page.

3 participants

@emilykl @archmoj @camdecoster
Add this suggestion to a batch that can be applied as a single commit.This suggestion is invalid because no changes were made to the code.Suggestions cannot be applied while the pull request is closed.Suggestions cannot be applied while viewing a subset of changes.Only one suggestion per line can be applied in a batch.Add this suggestion to a batch that can be applied as a single commit.Applying suggestions on deleted lines is not supported.You must change the existing code in this line in order to create a valid suggestion.Outdated suggestions cannot be applied.This suggestion has been applied or marked resolved.Suggestions cannot be applied from pending reviews.Suggestions cannot be applied on multi-line comments.Suggestions cannot be applied while the pull request is queued to merge.Suggestion cannot be applied right now. Please check back later.
You are visitor 01402520 — GeezerVison does not store the pages you look up.
Best viewed with Netscape Navigator 4.7 or Internet Explorer 6 at 800×600. No cookies required.