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

Add interactive gallery via JupyterLite #2593

Draft
wants to merge 25 commits into
base: main
Choose a base branch
from

Conversation

joelostblom
Copy link
Contributor

I re-discovered JupyterLite today and find it remarkably cool! We could use it to add interaction to the example gallery and add a "Try online" menu entry in the navbar similar to what is available on the VegaLite home page. You can try this live at https://joelostblom.github.io/altair-docs/ and here is a short video of what it looks like

alt-interactive-gallery-2022-04-19_21.40.03.mp4

As you can see in the demo, there is still some boilerplate setup code required, and it is worth noting that JupyterLite is still in beta. I also played around with having it inline in the documentation, I think it could look good with with the replite directive on the bottom of each gallery example once it matures a bit and adds the ability to load on demand instead of on each page load. Currently I used jupytext to convert all the examples to notebook files and add them to JupyterLite; we could sort them into folders and make other tweaks if this is a direction we want to pursue.

This PR doesn't change anything in #2566 (the demo is just served on the same URL) so that it still ready to merge as is and the diff from this PR will be easier to understand afterwards. The only new commits here are the following:

  • Add minimal jupyterlite setup
  • Add extension gallery notebooks to jupyterlite

@jakevdp
Copy link
Collaborator

jakevdp commented Apr 22, 2022

That's pretty cool! Great idea to have this available via the docs

@joelostblom
Copy link
Contributor Author

joelostblom commented Mar 27, 2023

Note to self that sphinx gallery added support for something like this in sphinx-gallery/sphinx-gallery#977 that might be wortwhile checking out. They mention some drawbacks with using a separate console on each example page (e.g. loading times) which is what I was considering as an alternative to the jupyterlite approach I am using here. I think more people are used t oa notebook interface so either inline notebook via retrolite directive or standalone via the new button makes sense.

Some good examples here https://www.tryhamilton.dev/ (but I think that is using a react component for pyodide which we couldn't access via sphinx). The panel dev docs also use this and nicely links all the code snippets on the same page to the same kernel so that we don't need to download pyodide once per cell)

ipywidgets have a nice setup with a stylish button: https://ipywidgets.readthedocs.io/en/latest/embedding.html

image

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.

2 participants