node-clinic-doctor
node-clinic-doctor copied to clipboard
Help the user see where the line is interpolated due to missing/delayed data
This is something I've already implemented on my side because I find it useful for understanding the data. If we like the idea, it's ready to PR.
Our plots are unusual compared to other time series charts and various other profiling tools because the plotting along the x-axis is (by design) not consistent - when there's no event loop delay, we plot every poll interval (10ms), then when there are delays, the resolution goes down to whatever the delays are. Within one plot there could be areas where the data is extremely fine and areas where it's extremely coarse.
Visually, there's currently no difference between a time period where we have have fine enough data to know a variable follows a consistent linear trend, and a time period where we have missing data and we're just interpolating between two data points either side of an event loop delay. Users can learn to distinguish the two, by running the mouse along and seeing where the hover box jumps or by comparing to the event loop chart (which might be off screen), but it'd help if they could just see it.
Of course, we don't want to make the UI visually busy. It needs to be unobtrusive.
This edit essentially adds a subtle highlight to each actual datapoint, making a linear trend subtly but noticeably stronger than an interpolation, and making the individual data points within a coarser delayed area easy to see.
Example with node-clinic-examples/slow-gc :
Example with node-clinic-examples/slow-event-loop :