search

pymc-devs / pymc-examples

Examples of PyMC models, including a library of Jupyter notebooks.
https://www.pymc.io/projects/examples/en/latest/
MIT License
269 stars 234 forks source link

Improve visuals of the notebook gallery #447

Open drbenvincent opened 1 year ago

drbenvincent commented 1 year ago

The gallery is great, but there is definitely room for improvement. This is particularly noticeable since the core notebooks were added to the top of the page. The thumbnails are small and the full width of the central column of the page is not used.

I'm not sure, but can we fix this simply by editing the thumbnail size here?

https://github.com/pymc-devs/pymc-examples/blob/dce63a03b894d39a0a39a4773f9a0226078391c1/sphinxext/thumbnail_extractor.py#L26

Anyone know where the formatting code for the core notebooks is?

Example 1

Screenshot 2022-10-16 at 11 57 50

Example 2

With a narrower browser window, the right bar becomes hidden (which is fine), but now we have 4 columns of notebooks rather than 3 for the regular notebooks. Not sure if this is set to fill available space.

Screenshot 2022-10-16 at 12 01 27

Tagging @OriolAbril , @twiecki, @reshamas

reshamas commented 1 year ago

cc: @symeneses, in case you have any ideas on sphinx.

OriolAbril commented 1 year ago

I suspect it is a css and/or javascript issue with sphinx gallery but I have no idea for how to fix it.

Anyone know where the formatting code for the core notebooks is?

The grid and cards for core notebooks has no formatting code in our codebase. We use https://sphinx-design.readthedocs.io/en/sbt-theme/ and everything works straight out of the box

twiecki commented 1 year ago

I bet it's because not getting picked up in https://github.com/pymc-devs/pymc-examples/blob/dce63a03b894d39a0a39a4773f9a0226078391c1/sphinxext/thumbnail_extractor.py#L93

How are the NBs from the pymc repo included?

OriolAbril commented 1 year ago

They are manually (both name and image) included in https://github.com/pymc-devs/pymc-examples/blob/main/examples/gallery.rst#core-notebooks. They use a different approach to generate the grid and card view though, as they are not in this repo they can't be included via the gallery extension.

twiecki commented 1 year ago

I see, but we could place a thumbnail into the thumbnail dir manually, no?

OriolAbril commented 1 year ago

We can define an image for the card manually yes and put that image in the thumbnail dir or anywhere else

OriolAbril commented 1 year ago

I have added some custom images in #539. They are in _thumbnails/core_notebooks. I am not closing this issue though, I think it should be closed once someone makes those images have a more square ration so they look nicer or they are directly updated to something else that looks better and/or makes more sense