use react-virtuoso with Jupyter #5844
Merged
Conversation
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
…t when clicking the bell) to (1) be a modern functional component, and (2) use Virtuoso
…ing is now rewritten using react-virtuoso.
…maintain iframe state in the context of full on windowing! Yes, this does work.
williamstein
force-pushed
the
jupyter-virtuoso
branch
from
5defdf1 to
fb56794
Compare
… work in progress
Sign up for free
to join this conversation on GitHub.
Already have an account?
Sign in to comment
Add this suggestion to a batch that can be applied as a single commit.
This suggestion is invalid because no changes were made to the code.
Suggestions cannot be applied while the pull request is closed.
Suggestions cannot be applied while viewing a subset of changes.
Only one suggestion per line can be applied in a batch.
Add this suggestion to a batch that can be applied as a single commit.
Applying suggestions on deleted lines is not supported.
You must change the existing code in this line in order to create a valid suggestion.
Outdated suggestions cannot be applied.
This suggestion has been applied or marked resolved.
Suggestions cannot be applied from pending reviews.
Suggestions cannot be applied on multi-line comments.
Suggestions cannot be applied while the pull request is queued to merge.
Suggestion cannot be applied right now. Please check back later.
I learned https://virtuoso.dev/ really well recently, due to needing it for my version of slate.js. It turns out to be ideal for implementing virtualized windowing for Jupyter notebooks, and with very, very little work, actually works really well. Virtuoso is a genuinely nontrivial "deep" library -- not just an obvious thing at all.
This PR switches our Jupyter to use this for rendering, but doesn't yet implementing anything related to scroll state, which is kind of tedious (but pretty similar to what I did already for editors/slate, so won't be hard). I'm going to make using this an easy toggle in the View menu of Jupyter with the state stored in the notebook metadata, rather than an account setting or something dumb like that. The default will be enabled though.
My motivation for this is the notebook here: https://nbviewer.org/url/archive.org/download/musing_math/Volume_Solutions_To_Snub_Dodecahedron.ipynb
Trying to scroll through it (via the up/down keys - not actually scrolling) is incredibly painful. There's a huge amount mathematical formulas rendered throughout, and just moving the selection from one cell to another with the normal way of rendering, causes tons of expensive layout computations, which makes it unusably slow (I think Mathjax is a little better in this regard). It's not even a lot of cells, and loading and scrolling with the scrollbar is fine. However, with the way react-virtualized renders things, moving around is VERY fast - as snappy as can be.