Skip to content

Fix issue causing empty ScatterGL plots when using text elements #7563

New issue

Have a question about this project? Sign up for a free GitHub account to open an issue and contact its maintainers and the community.

Sign up for GitHub

By clicking “Sign up for GitHub”, you agree to our terms of service and privacy statement. We’ll occasionally send you account related emails.

Already on GitHub? Sign in to your account

Jump to bottom
Merged
merged 6 commits into from
Sep 26, 2025
Merged

Fix issue causing empty ScatterGL plots when using text elements #7563

merged 6 commits into from
Sep 26, 2025
+40 −49

Conversation

emilykl
Copy link
Contributor

@emilykl emilykl commented Sep 26, 2025 •
edited
Loading

Closes #7353 , #7441

  • The error was Uncaught TypeError: systemFontKeywords.indexOf is not a function
  • This was due to a JSON file in the css-system-font-keywords (sub-)dependency not being included properly during the build process
  • It turns out the build step where we strip out some metadata attributes (to reduce bundle size) was also inadvertently causing JSON files to be processed as JavaScript files, which resulted in them showing up 'blank' in the final build
  • I've replaced that build step with a native ESBuild plugin with the same functionality
  • This also allows us to remove one dev dependency, which is a nice bonus

Thanks to @ayjayt for helping diagnose and to @WeisSeb and @pawel-paciorek-at-metrohm for reporting.

Minimal HTML/JS example demonstrating issue

(Based on @WeisSeb 's example in #7353)

<!DOCTYPE html>
<html>
<head>
    <title>Scattergl empty</title>
    <script src="dist/plotly.js"></script>
</head>
<body>
    <div id="graph" style="width:600px;height:400px;"></div>
    <script>
        Plotly.newPlot('graph', [{
            type: 'scattergl',
            x: [1],
            y: [1],
            text: 'some text',
            mode: 'text+markers',
            textposition: 'top center',
        },]);
    </script>
</body>
</html>

Should look like:
Screenshot 2025-09-26 at 12 35 57 PM

Steps for testing

  1. Check out this branch
  2. Run npm i && npm run build
  3. Place the above HTML in a file in the root of your plotly.js/ directory and visit in your browser
  4. The chart should look like the image above

@emilykl emilykl changed the title Fix empty ScatterGL plots when using text elements Fix issue causing empty ScatterGL plots when using text elements Sep 26, 2025
@emilykl
Copy link
Contributor Author

emilykl commented Sep 26, 2025

Also should resolve plotly/plotly.py#5336 but that won't be closed until this fix is included in Plotly.py.

@emilykl emilykl force-pushed the fix-missing-json-font-attrs branch from cdf9dcc to 443b385 Compare September 26, 2025 18:18
camdecoster
camdecoster approved these changes Sep 26, 2025
View reviewed changes
Copy link
Contributor

@camdecoster camdecoster left a comment

Choose a reason for hiding this comment

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

This worked for me. I made a couple of small comments for formatting changes.

tasks/compress_attributes.js Outdated
makeStringRegex('hrName')
];

var esbuildPluginStripMeta = {
Copy link
Contributor

Choose a reason for hiding this comment

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

Suggested change
var esbuildPluginStripMeta = {
const esbuildPluginStripMeta = {

@emilykl
Copy link
Contributor Author

emilykl commented Sep 26, 2025 •
edited
Loading

Another bonus: Possibly reduces build time

(this is just one data point, wanted to do a sanity check to make sure it wasn't massively slower)

time npm run build on master
npm run build 20.12s user 2.54s system 185% cpu 12.191 total

time npm run build on fix-missing-json-font-attrs
npm run build 13.88s user 1.99s system 131% cpu 12.086 total

@gvwilson
Copy link
Contributor

faster is gooder

@emilykl
Copy link
Contributor Author

emilykl commented Sep 26, 2025 •
edited
Loading

This bug should have been caught by the CI, but it turns out that we weren't actually running the compress_attributes step in the CI build process 🤦. So the build in the CI did not experience this issue. I've pushed 33c46a4 to fix that.

(And the tests on this branch I just created prove that many baseline images fail to generate when we are using the correct build process in the CI.)

@emilykl emilykl merged commit c624d3d into master Sep 26, 2025
6 checks passed
@emilykl emilykl deleted the fix-missing-json-font-attrs branch September 26, 2025 22:13
This was referenced Oct 1, 2025
Closed
Closed
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

@gvwilson gvwilson Awaiting requested review from gvwilson

Assignees
No one assigned
Labels
None yet
Projects
None yet
Milestone
No milestone
Development

Successfully merging this pull request may close these issues.

"TypeError: POt.indexOf is not a function" with mode: text and type: scattergl
3 participants
@emilykl @gvwilson @camdecoster