✨ use dynamic thumbnails in GrapherImage

[ikesau]

Resolves #3661

Decided to go with an overload to support these 2 cases:

• SSR where we can only ever know the slug
• gdocs SSR where we have a full URL (potentially with a query string)

Seemed better than converting all the slugs to full URLs but I'm happy to change it if we don't like the overload pattern.

GrapherImage usage:

• gdocs/blocks/Charts.tsx - works
• GrapherPage.tsx - works
• GrapherWithFallback.tsx - works
• RelatedChart.tsx - works
• AllChartsListItem.tsx - works
• DynamicCollection.tsx - n/a, needs JS to function
• StaticCollection.tsx - n/a, needs JS to function

[owidbot]

Quick links (staging server):

Site	Admin	Wizard

Login: ssh owid@staging-site-gdoc-grapher-previews

• Site-screenshots: https://github.com/owid/site-screenshots/compare/gdoc-grapher-previews
• SVG tester: https://github.com/owid/owid-grapher-svgs/compare/gdoc-grapher-previews

SVG tester:

Number of differences (default views): 0 ✅
Number of differences (all views): 0 ✅

Edited: 2024-06-25 22:51:39 UTC
Execution time: 1.12 seconds

[marcelgerber]

Note: I've just pushed a commit to master that uses more reasonable font sizes for this (6214343), because I've just realized that fonts are a big toooo big here :)

[marcelgerber]

Nice, this is definitely a positive!

For whatever reason I don't see the "interactionNotice" here, but that's not too bad because with JS disabled, they can't really interact either way.

If you feel like it, you could let grapher / data pages handle query params using the CF Worker ;) but that's very much non-trivial...

[ikesau]

TODO: improve the CSS for the failure case, and fix the spacing for the interaction notice

[github-actions]

This PR has had no activity within the last two weeks. It is considered stale and will be closed in 3 days if no further activity is detected.

[ikesau]

@marcelgerber taking a bit of this "cooldown" to look at this again. I feel like no one would miss the interaction notice if we got rid of it? 🤔

[marcelgerber]

I feel like it is still serving a purpose (for static previews on mobile, in particular), namely that there is an interactive version of this exact chart available if you click through.
It thereby also differentiates these from static charts.

On the other hand, it doesn't really serve a good purpose for no-JS cases, and will only lead to confusion in that case. Not sure if we can easily hide it in that case?

[github-actions]

This PR has had no activity within the last two weeks. It is considered stale and will be closed in 3 days if no further activity is detected.

[github-actions]

This PR has had no activity within the last two weeks. It is considered stale and will be closed in 3 days if no further activity is detected.