Implement viewport tracking and reactive rendering in scrollbar

[krassowski]

References

• a step towards Encoding more information in the virtual scroll bar #16332

Code changes

• WindowedList.IRenderer.createScrollbarItem can now return either HTMLElement (as before) or IScrollbarItem defined as:

  interface IScrollbarItem extends IDisposable {
    /**
     * Render the scrollbar item as an HTML element.
     */
    render: (props: { index: number }) => HTMLElement;
  
    /**
     * Unique item key used for caching.
     */
    key: string;
  }

• The entire scrollbar is no longer re-rendered on each update of the notebook; this enables adding more reactive information and updating only the cells that have changed; instead IScrollbarItem.render is called to modify the node reactively
• a new viewport indicator element is added which shows which cells are visible in the viewport (styling subject to change); this element is independent of cells to avoid scrolling causing re-render of items

User-facing changes

Backwards-incompatible changes

None

[jupyterlab-probot]

Thanks for making a pull request to jupyterlab!
To try out this branch on binder, follow this link:

[srdas]

@krassowski - This is really nice! As a parallel, I use the mini view in VSCode to traverse quickly to where my edits to the source file are, and I am not sure if this is a useful way to use the viewport in the notebook. If so, adding color to modified cells may be useful. It would definitely be nice to add this and get some feature parity with other IDEs.

[krassowski]

Thank you for the suggestion! I implemented it in #16432.

[brichet]

Thanks @krassowski, this looks great.

There is currently a gap between a selected item and the top separator, but not the bottom separator. And the viewport also seems to be a bit too low

With changes proposed below, it seems more regular:

[brichet]

Sorry I split the review for a better readability.

For a long notebook, the virtual scrollbar does not fit on the page, and the scrollbar viewport disappears.

Do you think the virtual scrollbar could be scrolled, to follow the scrollbar viewport ?

[krassowski]

Do you think the virtual scrollbar could be scrolled, to follow the scrollbar viewport ?

Yes, I had the same thought and completely agree that this could be useful, but since this is an additional behaviour change (as of today the virtual scrollbar does not scroll when you move the viewport outside of it) I would defer it to a separate PR. I opened #16518 to track this.

[brichet]

Thanks @krassowski, looks good to me.