jbrowse-components icon indicating copy to clipboard operation
jbrowse-components copied to clipboard

Add ability for views to pin elements, such as headers and tracks

Open garrettjstevens opened this issue 1 year ago • 16 comments

This adds the concept of pinning (or sticky positioning, using CSS positioning terminology) various UI elements.

First, the view menu bar is pinned for all views, so you can access things like the view menu even if you're scrolled far down in the view.

Views can then also use sticky positioning with any of their own elements they choose. In initial versions I said that you had to render the view component twice, once with sticky elements and once without, but that's changed now so that you only need to render it once. I did have to set the view menu height as a constant and export it from core so that views know where to pin themselves.

I then added pinned elements to the LGV. The header bar (and mini controls if the header bar is hidden) is now always pinned. Tracks can also be pinned from the "Pin track" entry in the track menu.

One thing to remember if adding pinning to future is that if you're using "position: sticky", make sure any non-sticky parent elements have "overflow: visible" set on them so that the sticky positioning ignores them (see MDN docs.

One possible addition is to add an indication that a track is pinned, like the shadow that appears under a pinned track in JBrowse 1.

Another possible addition, but likely in a separate PR, would be having the track labels be pinned as well.

Try it out here: https://s3.amazonaws.com/jbrowse.org/code/jb2/3685_pin_tracks/index.html?config=test_data%2Fvolvox%2Fconfig.json&session=share-n2-uSzxOMb&password=2Gb4e

Fixes #3685

garrettjstevens avatar Feb 24 '24 00:02 garrettjstevens