search

kimikage / ProfileSVG.jl

Write flame graphs to SVG format and explore them interactively in Jupyter, Pluto, etc.
MIT License
52 stars 7 forks source link

Problem with zooming performance and UX #29

Closed kimikage closed 4 years ago

kimikage commented 4 years ago

The profiler of browser says the zoom is taking a long time. The zoom handler accesses all <rect>s, so the overhead of Snap.svg cannot be ignored.

There is also some UX problems. (I was going to fix this in ProfileSVG v0.2 series, but I'll fix it in v0.1.3 because it's difficult to separate from the performance improvement.)

1. Scaling origin (on the double click event)

https://github.com/kimikage/ProfileSVG.jl/blob/827cab36ecb98d4429a586e70df8dccf40e9a700/src/viewer.js#L65-L66

https://github.com/kimikage/ProfileSVG.jl/blob/827cab36ecb98d4429a586e70df8dccf40e9a700/src/viewer.js#L93-L101

The argument xs seems to be the x coordinate of the scaling origin, but it seems that the xs is not the intended value in the context due to the translation. This is noticeable when you double-click the rectangle on the left side.

2. Scaling origin (on the mouse wheel event)

In addition to the above, the zooming using the mouse wheel behaves in a very strange way because it doesn't get the cursor position correctly.

https://github.com/kimikage/ProfileSVG.jl/blob/827cab36ecb98d4429a586e70df8dccf40e9a700/src/viewer.js#L221-L226 This method, introduced in so many articles, generally does not work. (FYI, the comment was written by me.)

3. Interpolation of the translation by dragging

You can drag the graph, but its translation is reset when zoomed.The reset itself is not a big issue, but it causes a "teleportation".

4. Corner rounding

https://github.com/kimikage/ProfileSVG.jl/blob/827cab36ecb98d4429a586e70df8dccf40e9a700/src/viewer.js#L102-L107 The current script rewrites the rx and ry according to the scale, but rx and ry have the same value.

rxry

This is a matter of taste, but when zoomed in, the corners are less noticeable, so I want the corners to be circular arcs.

FYI, that code is one of the main causes of the poor performance.

5. Zooming scale

https://github.com/kimikage/ProfileSVG.jl/blob/827cab36ecb98d4429a586e70df8dccf40e9a700/src/viewer.js#L227 The current zooming scale using the mouse wheel is a linear scale. However, I think the logarithmic scale is more intuitive and useful. Also, as I wrote in the comment, there is a problem that the scale can be negative. Note that negative rx is prohibited.