Freeze Linear Genome View Header/toolbar

[RickGelhausen]

Hi all,

I am creating a lot of JBrowse2 instances for different collaborators lately.
As I am new to JBrowse, I regularly try to learn new things to improve my JBrowse2 setups.

My colleagues are working with a lot of coverage tracks (multiple conditions / replicates) and different annotations (reference / predictions).

I observered that one big issue for them is that there is no scroll-bar inside of the linear genome view.
So when normally scrolling down the entire view is moved down. Which is fine to access other views that are open, but if they want to look at the tracks on the very bottom of the linear view, they lose the access to the toolbar-header of said view.

Then they do not have access to features like the selection of regions to extract sequences, and always have to re-arrange the tracks.

I tried to find information about this in the GitHub issues and the documentation, but it could be that I simply overlooked how to do this.

Is there a way to have a scroll-bar inside of a linear genome view? So that the header is always "frozen" when scrolling down to other tracks within one linear-genome view?

I would appriciate some help,
Thank you,
Rick

[cmdcolin]

good question... this sometimes this is called "sticky" positioning in webdesign (example https://www.w3schools.com/howto/howto_js_sticky_header.asp)

we don't have this currently but may be a good add-on!

the other option is making all the tracks of the linear-genome-view go into a scroll container so the linear-genome-view area doesn't get too tall. this could be a good option for some people. just curious, do you use the jbrowse-web app or the embedded component?

random note: one way your users may be able to get a small amount of benefit currently is by holding shift and then "click and drag" the mouse anywhere inside the linear genome view, this will give them a region selection similar to doing so on the header bar. this can then get the sequence, show a coordinate indicator, etc

short screencap: i am holding shift and then clicking and dragging

Screencast.from.2023-02-16.10-29-10.webm

[RickGelhausen]

Thank you.
This is already really helpful, I did not know about the shift + "click and drag" hotkey.
I noticed that CTRL + scroll does the zooming.

This kind of resolves my issue already as the search bar is not so important in my case, as it is ok to scroll up to change the region.
Overall a sticky header might still be a nice feature to have at some point.

I am currently using the jbrowse-webapp as I am not very experienced with webdesign yet and it provides me an easy way to provide JBrowse instances quickly to my collaborators. But I am also interested to look at the embedded features soon to provide more customized browsers.

[marcarreaza]

For freezing the header tool bar, I did a JavaScript. I disabled the vertical scrolling on the webpage, hidding it. However, I had to enable horizontal scrolling while keeping the vertical scrolling disabled. As a result, the horizontal scrolling is permitted, but any attempt to scroll vertically will be reset to the top of the page immediately.
The JS code:
// Disable vertical scrolling
document.body.style.overflowY = 'hidden';

// Enable horizontal scrolling
window.addEventListener('scroll', function(e) {
window.scrollTo(window.scrollX, 0);
});

Tell me if it's working for you!