flamegraph frame rendering expands outside the view, incorrectly hiding profile information, also incorrectly overlapping frames on resizing.

[NHDaly]

Please answer these questions before submitting your issue. Thanks!

What version of pprof are you using?

Master branch, latest commit 83db2b799d1f74c40857232cb5eb4c60379fe6c2.

What operating system and processor architecture are you using?

MacOS, on both Chrome and Safari.

What did you do?

With very long function names, we have observed that the frame rendering is sometimes incorrect, causing lost or incorrect data in the profile.

For example, please consider this video, recorded from looking at a profile with a very long method name (the name + type signature was quite long).
At first, most of the contents of the frame are outside the view buffer until you click on it, making the data completely incorrect until it's click on. Once you click on it, the frames "zoom" into the view, where you can now see that actually the originally displayed profile data was only a small portion of the whole profile:

Screen.Recording.2022-04-14.at.12.10.42.PM.mov

Next, please consider this other video that I recorded with a dummy data set profile (which i'm able to upload here), which shows that when resizing the window, the frames can end up overlapping, which also incorrectly represents the size of the frames:

Screen.Recording.2022-04-14.at.12.20.25.PM.mov

Here is the dummy profile that shows the above problem:
really_long.pb.gz

What did you expect to see?

The whole profile

What did you see instead?

Only a partial profile.

---

This appears to be caused by changes to the UI, which make it more interactive than it was before. (we were previously using a commit from a year or two ago.)

Thanks!

[NHDaly]

CC: @vilterp, @Sacha0, @aalexand.