Skip to content
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.

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

ENH: pass-through image metadata #588

Merged
merged 4 commits into from
Apr 12, 2024

Conversation

flying-sheep
Copy link
Contributor

@flying-sheep flying-sheep commented Mar 11, 2024

Fixes #522

I’m not super interested in getting this to the finish line, so please feel free to take it over and change it in any way you see fit.

The important part is that #522 gets fixed.

The only question is precedence: Will .get_cell_level_config() return a width and height if e.g. only a global or notebook-wide default width/height is specified? Which should override which?

Copy link

welcome bot commented Mar 11, 2024

Thanks for submitting your first pull request! You are awesome! 🤗

If you haven't done so already, check out EBP's Code of Conduct and our Contributing Guide, as this will greatly help the review process.

Welcome to the EBP community! 🎉

@ma-sadeghi
Copy link

Hi @flying-sheep, what needs to be done here? I might be able to look at it if it's reasonable effort.

@flying-sheep
Copy link
Contributor Author

flying-sheep commented Apr 11, 2024

The changes to test output that I made (adding height=...) is exactly what I’m after. When e.g. matplotlib emits that metadata, it should end up becoming HTML attributes (not CSS*), which is what seems to be happening.

What needs to be done: I don’t understand the test failure: what do these hashes mean and why do my changes cause them to change? If it’s a quick fix, I’m happy to do it, but as said, I only care about the result, so if you want to take this up and update this PR until tests pass, feel free.

*why not CSS? Because browsers derive aspect-ratio from HTML width and height. So if you use HTML width and height, and also set max-width: 100%, you get the best of all worlds: An image that isn’t too big and also never squeezed or stretched.

@ma-sadeghi
Copy link

I'll look into it, but I'm no expert, so not sure if I succeed. For the time being, I switched to nbshpinx, because I really despise the large figures 😀

@agoose77
Copy link
Collaborator

@flying-sheep thank you for this PR! It looks like a good change. In future, we might want to allow the user to override these settings, though I'm not 100% sure -- In my view, the user can always tweak the image-producing code to change the size.

If we want this to be overridable, we can do it at a later date with a new config variable that can be set at cell, notebook, or project level.

I'll take over this PR to get it across the finish line :)

@agoose77
Copy link
Collaborator

@ma-sadeghi I just saw your reply! We are always keen to have new contributors, are you still interested in pushing this forward given my reply above? I'm happy to help where necessary.

@flying-sheep
Copy link
Contributor Author

In my view, the user can always tweak the image-producing code to change the size.

I agree. It should be between the theme and the user. MyST-nb shouldn’t be another factor that needs to be tweaked here.

When matplotlib says the metadata is {"width": "500px", "height": "300px"}, that directly translates to <img width="500px" height="300px">. Both things mean “instead of the image data’s intrinsic size, this is the size the image is intended to be displayed”. MyST-NB is just the broker passing this metadata on.

@flying-sheep
Copy link
Contributor Author

Hm, looks like the hashes are no longer different. Now locally all tests pass, let’s see.

@agoose77
Copy link
Collaborator

The hashes had changed because, I presume, an update to the pandas LaTeX renderer produced a different image. That's a benign change, so I've manually checked in the changes.

@flying-sheep
Copy link
Contributor Author

Well, as said: After merging in master, all is green locally, so maybe this is ready now!

@agoose77 agoose77 merged commit ac5f9b4 into executablebooks:master Apr 12, 2024
13 checks passed
Copy link

welcome bot commented Apr 12, 2024

Congrats on your first merged pull request in this project! 🎉
congrats

Thank you for contributing, we are very proud of you! ❤️

@flying-sheep flying-sheep deleted the fix-img-metadata branch April 12, 2024 12:42
@flying-sheep
Copy link
Contributor Author

woop! I have to say, your silly fish always cheers me up.

@agoose77 agoose77 changed the title Fix image metadata ENH: pass-through image metadata Apr 12, 2024
@ma-sadeghi
Copy link

@flying-sheep Thanks for getting this across the finish line!

Copy link
Contributor

@OriolAbril OriolAbril left a comment

Choose a reason for hiding this comment

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

Something is not working right after this PR, and I think the updated tests are testing for the failure.

After this, if one image has height/width attributes, all images are affected by that, not only the image with those attributes. I have commented below and added screenshots of the outputs in the complex_outputs.ipynb notebook used for testing, however, the height=400 is not only applied to all images of the complex_outputs notebook, but to all images, also all images in the matplotlib.ipynb notebook.

I have used a very minimal configuration and with the alabaster theme to try and discard theme issues, but it is not a theme specific issue
as I have seen it with multiple themes.

MWE repo: https://github.com/OriolAbril/sphinx-playground/tree/3eccd4b738070c15016c29f3640f0b82ad2cab74

tests/test_parser/test_complex_outputs.xml Show resolved Hide resolved
@@ -109,7 +109,7 @@
<container classes="cell_output" nb_element="cell_code_output">
<container nb_element="mime_bundle">
<container mime_type="image/jpeg">
<image candidates="{'*': '_build/jupyter_execute/a4c9580c74dacf6f3316a3bd2e2a347933aa4463834dcf1bb8f20b4fcb476ae1.jpg'}" uri="_build/jupyter_execute/a4c9580c74dacf6f3316a3bd2e2a347933aa4463834dcf1bb8f20b4fcb476ae1.jpg">
<image candidates="{'*': '_build/jupyter_execute/a4c9580c74dacf6f3316a3bd2e2a347933aa4463834dcf1bb8f20b4fcb476ae1.jpg'}" height="400" uri="_build/jupyter_execute/a4c9580c74dacf6f3316a3bd2e2a347933aa4463834dcf1bb8f20b4fcb476ae1.jpg">
Copy link
Contributor

Choose a reason for hiding this comment

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

I understand this image gets the height=400 metadata. However, it seems to end up being css instead of html attribute.

imatge

From the description and the xml here I expected to get <img ... height="400px"> instead of the <img ... style="height: 400px;"> that shows up.

Copy link
Contributor Author

Choose a reason for hiding this comment

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

Yeah, seems like this one is the only one that should get that, weird that the others do, I’ll check that out.

Regarding CSS: That’s another issue, but it should definitely be fixed, I agree!

tests/test_parser/test_complex_outputs.xml Show resolved Hide resolved
@flying-sheep
Copy link
Contributor Author

@OriolAbril I have a fix in #599

Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment
Labels
None yet
Projects
None yet
Development

Successfully merging this pull request may close these issues.

Images in notebook are rendered too large
4 participants