Add external hook for mousemove event

[soulgalore]

It would be super cool to open up for users of PerfCascade to add screenshots that change depending on where the mouse hovers on the graph. It would be a perfect fit for sitespeed.io if we could have events reporting the timing (or is there a better way to do it?). See #193 (comment)

[micmro]

mousemove is always a bit performance sensitive, so we should only setup eventListener for mousemove event when external hook is present.

should should have signature like: (hoverPositionMs: number, OriginalEvt: MouseEvent) => void.

I suppose getting this to work with touch would be bit of a pain.

[tobli]

Another way might be to create regions (e.g. transparent svg rects) of configurable widths, and attach mouseenter/leave listeners. If you have a screenshot every 500ms, you ask for slices (and thereby events) at intervals of whatever 500ms corresponds to.

[soulgalore]

I think you wanna match screenshots with the exact timeline in PerfCascade. So when firstPaint really happens you wanna see that. VisualMetrics today creates screenshots for every change that happens and I think we will do the same right?

[tobli]

Sure, even slices was a simplified example. You'd ask for the intervals you need/have data for.
setItUp([0, 48, 52, 120, 287, 1204]), ...)

[soulgalore]

yep cool.

[micmro]

Hi @soulgalore & @tobli
Can you check out the 196 branch to see if this would work for your use-case?

{
   ...
   timeSlices: [0, 750, 1300],
   timeSliceOnEnter: (slice, evt) => {console.log("timeSliceOnEnter", slice, evt)},
   timeSliceOnLeave: (slice, evt) => {console.log("timeSliceOnLeave", slice, evt)}
}

I tried the overlays @tobli had suggested but I totally forgot that the events on items below will not fire (could not find any good work-around).
I used a passive (when available) mousemove listener for hit-tests instead - tested it and it did take:
< 100 µs (chrome/MBP)
< 0.1ms (FF/MBP)
< 0.7ms in chrome with 20x CPU throttling
so I think it should be fine perf-wise.

[soulgalore]

thank you @micmro - super cool, I'll try it tonight!

[soulgalore]

Or I tried now :) I got an error when I tried to get it up and running:

npm run watch
...
>> TypeScript error: src/ts/waterfall/row/svg-row-subcomponents.ts(40,7): Error TS2322: Type 'Timer' is not assignable to type 'number'.

[soulgalore]

My fault, I cleaned node_modules ad installed again and it worked. Been trying out npm5 but it does do so good for me.

[soulgalore]

I've been trying out different scenarios and I think I was wrong from the beginning. I have a hard time to figure out how the GUI would work, how we can make sure that you see the screenshot at the same time as you move the mouse over the waterfall. The waterfall could be so high so you need then to display the screenshot on top of the waterfall and I'm not sure that it would look good (need to find us a GUI person :)). WebPageTest do the other way around: You scroll the images and then draw a line over the waterfall https://www.webpagetest.org/video/compare.php?tests=170624_92_ZC2-r%3A1-c%3A0&thumbSize=200&ival=100&end=visual

I think we need to discuss how we wanna do before you do too much @micmro !

Ping @tobli and @beenanner .

[micmro]

Cool, np at all.

I have not though about it too much but how about something like this (very rough outline)?:
If you get the exact mouse x-position you could keep a preview in an overlay following the mouse (above the PerfCascade chart, but letting though mouse-events), this could position itself relative to the viewport on the y-axis, so large HARs would work as well.
There are some perf considerations, but just as an idea.

[soulgalore]

@micmro ah yes sounds like a really good idea!