Sep 22, 2024

clj-async-profiler 1.4.0: custom tooltips, easy diffing, new index page

It's been a month since the 1.3.0 announcement, and I'm ready to present you with a new, better, and improved clj-async-profiler1.4.0. This version maintains the focus on improvements to user experience and visual appeal. Teamed up with my talented design advisor, we've revamped the index page and implemented new custom tooltips in the flamegraph. Read on to discover these and other changes in the 1.4.0 release.

Custom tooltips

When you move your mouse over stackframes in the flamegraph, a tooltip appears which contains the name of the frame, the number of samples, and the percentage this frame occupies in the profile. Previously, this tooltip was a standard system tooltip. The main drawback of this solution was that the tooltip took a while to show (I think it was around 1 second on MacOS with default settings), which was annoying. The tooltip could only contain plain text, unable to highlight more significant parts (the numbers).

The new tooltips are manually rendered with HTML. They appear much more quickly and present the information in a bit more structured form. They additionally host a hint for new users about right-clicking the frames. The new tooltips look like this:

On the left is a flamegraph tooltip. On the right is a diffgraph tooltip.

New index page

The index page received plenty of love in this version. The awkward sorting order was my main problem with the old index page. Flamegraphs are automatically numbered with an incrementing ID so that they can be easily referred to in functions like generate-flamegraph and generate-diffgraph. However, the ID is reset between processes; if you restart often, your flamegraphs from different processes will be interspersed in the list.

The new release has changed the naming pattern for the flamegraphs — the creation datetime now comes first. The index page itself has a new look, showing flamegraphs as a table instead of a list, parsing the important flamegraph properties into separate columns. The toggle "Show raw files" is gone; instead, each flamegraph is accompanied by a link to its raw profile file (the "collapsed stacks" file) if one could be found. Here's a screenshot of the updated index page:

New index page.

Easy diff generation

So far, the only way to generate a diffgraph has been to call generate-diffgraph. This function either accepts a profile ID (only generated in the current process) or a full path to the profile file. As a result, it was quite inconvenient to create diffgraphs in these scenarios:

The updated index page now offers a much handier way to create diffs. You first click on the button "Diff to..." in the row of the flamegraph that you want to diff as a "before" profile. After clicking that button, the buttons in all other rows change text to "...to this". Clicking the one you want to use as an "after" profile will create a diffgraph.

More to come

There are still a few fixes and improvements that I plan to implement during this quarter specifically for clj-async-profiler. Expect more news soon, and thank you for following my projects. I hope you have a good time using them!

I thank Clojurists Together for sponsoring my open-source work in Q3 2024 and making this release possible.