Blocked by design, and a decision to do this.

Caroline, when you start to think about this, please consider how this top sticky bar can be useful in ways other than just reinforcing which users are in which column. Should the date also stick? Should users be able to adjust the filters from this sticky bar?

Also, consider that information density is important. By nature this tool will decrease the amount of data in the viewport at any given time. I suggest we think of a pin/unpin show/hide option.

Here's my first thoughts — This bar scrolls and picks up the current date as you scroll. Clicking the pin icon hides the overlay, but the pin icon would continue to float on the far right. Clicking it again would show the overlay again.

We'll probably want better icons for the pin than the 📌 emoji. Hide/show or pin/unpin.

Hovering over the icons should show appropriate hint text (e.g. "show username overlay" or "hide username overlay")

Ping @dbarratt @dmaza @SPoore @CSindersWMF @czar for feedback on the above comment

I like it! I'm not sure it takes up enough screen real estate to warrant a preference though.

In T180245#3804923, @TBolliger wrote:

Here's my first thoughts — This bar scrolls and picks up the current date as you scroll. Clicking the pin icon hides the overlay, but the pin icon would continue to float on the far right. Clicking it again would show the overlay again.

We'll probably want better icons for the pin than the 📌 emoji. Hide/show or pin/unpin.

Hovering over the icons should show appropriate hint text (e.g. "show username overlay" or "hide username overlay")

I think that you are on the right track with a sticky top bar and an overlay that can be off or on. Not clear though about the specifics of the way you describe it here.

I like it. An alternative would be to show all the search params in the toolbar (Names, Dates and Wiki).

TBD: Include a link to 'back to top' in the overlay

+1 on this. This is a must have on infinite scroll pages.

TBD: Allow users to refine the search directly from the overlay

I don't think we should do this. Query update means different results so we have to scroll up anyway to show the interaction from the beginning. I don't think it will be a good user experience.

In T180245#3809942, @dmaza wrote:

I like it. An alternative would be to show all the search params in the toolbar (Names, Dates and Wiki).

Let me dummy one up so we can see what it might look like.

TBD: Allow users to refine the search directly from the overlay

I don't think we should do this. Query update means different results so we have to scroll up anyway to show the interaction from the beginning. I don't think it will be a good user experience.

Agreed, and the "back to top" link essentially solves a similar need of refining the query.

Few more options. This one (below) puts the icons in a similar rectangle as the dates, so they're not just in the either by themselves. I like this as the "back-to-top" link could still be visible, even if the overlay is disabled.

And this one (below) has a bottom border:

We'll probably want to use a more subtle color than black for these icons.

@SPoore — Let me try to clarify what I mean in these designs. I think this wireframe conveys the concept the best:

The current top of the tool would look the same: the header, the search filters, the row for the usernames, and the timeline. When a user scrolls down the page, as soon as they pass the usernames, the usernames would stick to the top of the browser (e.g. how the VisualEditor toolbar sticks.)

Similar behavior would happen as a user scrolls past the different calendar dates. As the user scrolls past a new date box, it would 'stick' inside the bar.

On the far right of the screen would be two icons — a 'back to top' icon and a 'hide' icon. Clicking 'back-to-top' would scroll the page all the way to the top. Clicking 'hide' would make the overlay disappear (except for the 'hide' icon, which would change to a 'show' icon) so the timeline would look how it does today.

There are some animations we'll need to make sure are smooth and not clunky, but I'm sure @dbarratt has a few tricks up his sleeves. :)

This is the "back to top" icon I used, from Material:

https://github.com/wikimedia/InteractionTimeline/pull/57

@TBolliger & @CSindersWMF What do you think?

LGTM! ship it!

Yeah, just tested. Great work!

Two quick, minor questions for David:

• Is it possible to add a browser tooltip for "scroll to top"?
• On crazy long scrolls on very heavy queries, how smooth will the animations be?

https://github.com/wikimedia/InteractionTimeline/pull/59

nice!

So we can also mark T188533: Timeline throws rude error on Safari. as resolved?

In T180245#4014471, @TBolliger wrote:

So we can also mark T188533: Timeline throws rude error on Safari. as resolved?

Yes.

1,000 points to your Hogwarts house of choice. Great work!

In T180245#4014482, @TBolliger wrote:

1,000 points to your Hogwarts house of choice. Great work!

I'm a Gryffindor (at least according to Pottermore)