Time-aligned panels should track mouse position in the timeline-axis

[hotsphink]

edit from Greg: This is an older issue, but see the comment below for the work that needs to happen here.

---

When I mouse around, a vertical bar is shown in the upper views. I would like that on the Timeline view as well.

[gregtatum]

I'm editing your title a bit to reflect that we should annotate the time better. The timeline view should have vertical markers showing the timing information, and then should also include information about the current time.

[clarkbw]

@hotsphink With the addition of the tooltips in the flame chart is this still needed?

[hotsphink]

Something is still needed. With the tooltips, I'm no longer sure it's a good idea to have a vertical bar when you're mousing over the timeline view; seems like it might be too noisy. But the underlying request is to better correlate your ephemeral position (the one from a mouseover) between the timeline view and the... why can't I ever remember what you call the upper views? So, let me modify the request:

When mousing over the upper pane, I would like a vertical bar to show the matching position in the timeline. When mousing over the timeline (flame graph), I would like the vertical bar to appear in the upper pane. Note that I do not expect these vertical bars to line up, eg if you have a portion of the upper pane selected so that the timeline is only showing that selection. But that's kind of the point -- there are two regions displaying time-based information. When my mouse is in one, I want to see the corresponding position displayed somehow in the other one. The vertical bar is the most obvious (to me) way to do it, given its current use when your mouse is within the upper pane.

[gregtatum]

Changing this to polish, as it's a relatively simple request.

[julienw]

The work here would be to put the "mouse time position" in the redux state, and draw vertical lines out of this state in our various time-based panels (top timeline, stack chart, marker chart, network chart).

[gregtatum]

Here's an idea of how this can be implemented: main...gregtatum:track-mouse-ideas

It shows where the various files are. For a contributor, this would need to be done in multiple PRs outlined below. This would be a good task for someone who has done a few good first issues and wants something a bit bigger.

PR 1:

• Add a changeMouseTimePosition and getMouseTimePosition
• Write a test for this action, reducer, selector combo.

PR 2:

• Update the src/components/timeline/Selection.js to use this mouseTimePosition, and correctly offset it to draw the vertical line. This is a matter of utilizing the hoverLocation.
• Write a src/test/components/Timeline.test.js test to assert these changes.

PR 3:

• Update the marker chart to dispatch the changeMouseTimePosition based on the mouse position and the current preview selection.
• Add a test for the marker chart.

PR 4:

• Update the stack chart to dispatch the changeMouseTimePosition based on the mouse position and the current preview selection.
• Add a test for the stack chart.

[CipherGirl]

@gregtatum I'd like to get assigned to this one. If it's not urgent then assign me as I'd take a couple of days to go through the requirements here and also some resources about testing. I'll keep you posted on matrix about this, or if I need to know anything. Thanks!

[gregtatum]

@CipherGirl Sure thing, I've marked you as assigned. Let me know if you have any questions or decide to drop this issue and work on something else.