Port the tree reporter to textual

[pablogsal]

Now that we are using Textual for the live mode, we can port the tree reporter to be a live Textual App. This has plenty of advantages over the static version as it offers interactive exploration of the tree, as well as the possibility of using different screens for showing detailed information about allocations such as the source and metadata.

Signed-off-by: Pablo Galindo pablogsal@gmail.com

Issue number of the reported bug or feature request: #

Describe your changes A clear and concise description of the changes you have made.

Testing performed Describe the testing you have performed to ensure that the bug has been addressed, or that the new feature works as planned.

Additional context Add any other context about your contribution here.

[godlygeek]

Some notes:

• I love this!

• We should probably have a toggle for "uninteresting" frames, like we do for the flame graph. Currently every import shows 6 <frozen importlib...> descendents

• I'd like to see the function names in a different color than the percentages (as it is, I think the function names don't stand out enough)

• I'd like to reuse the same module name shortening that we did for the live TUI. I think it helps to make the screen a lot less cluttered when there's not a ton of redundant paths

• I'm a bit confused by the top line here. It seems to have two widgets on it - clicking the leftmost one (looks like a circle) pops up the command palette - OK, fair enough, but the command palette isn't that useful, especially if we haven't added anything custom to it. One thing it can be used for is toggling between light and dark mode - but when I toggle it to light mode, I get colors with fairly poor contrast... That cyan is not great, but granted that might be partially my terminal settings...

• The top line has another interactable widget, with the text "TreeApp" on it. When I click that, it just... adds 2 blank lines, one above "TreeApp" and one below? I have absolutely no idea what that is 😆

• Anyway, if we can get rid of that top line entirely, I think that would be an improvement

• The popup window is very cool, but when I leave my terminal emulator at its normal size, I wind up with a teeny tiny popup in just the corner, rendered with a scrollbar if the source code is wider than that little window:

• I think I'd rather this be shown in the center than the top left, and I'd rather the window use more of the available width (a maximum is fine, but that maximum should probably leave space for at least ~120 characters - that's a pretty common width I've seen people use for their source code in the wild)

• The scrollbar is particularly annoying in that you can't interact with it using the keyboard - click and drag works, but pressing the left or right arrow key closes the popup instead of scrolling, which isn't the most user friendly

• Speaking of clicking, you can click and drag to highlight code in the text box, and you can click to select individual messages on the bottom. That's probably not desirable...

Overall, I think this is excellent, and a huge improvement over the existing non-interactive tree reporter!

[godlygeek]

Ya know... an alternative to the popup might be to split the window into two panes, both always shown - one would be focusable and let you navigate through the tree, and the other would always display info about the highlighted node. We could even support both - an always-on display for big terminals, and a popup when there's few enough rows/columns that we want to prioritize space efficiency over usability...

[pablogsal]

@willmcgugan do you know if there is an easy way to have a TextArea widget that's frozen and allows highlighting of lines? If not, what would be the best way to get something similar?

[willmcgugan]

@pablogsal Can't think of an straightforward way to do that, but it shouldn't be difficult to add to the TextArea. If you add a feature request to the repo, I think we could get it in the next version.

[codecov-commenter]

Codecov Report

Attention: 7 lines in your changes are missing coverage. Please review.

Comparison is base (3f0447b) 92.21% compared to head (793cfe4) 92.30%.

Files	Patch %	Lines
src/memray/reporters/tree.py	97.14%	5 Missing :warning:
tests/utils.py	71.42%	2 Missing :warning:

Additional details and impacted files

```diff @@ Coverage Diff @@ ## main #499 +/- ## ========================================== + Coverage 92.21% 92.30% +0.09% ========================================== Files 91 91 Lines 11030 11212 +182 Branches 1526 1553 +27 ========================================== + Hits 10171 10349 +178 - Misses 854 858 +4 Partials 5 5 ``` | [Flag](https://app.codecov.io/gh/bloomberg/memray/pull/499/flags?src=pr&el=flags&utm_medium=referral&utm_source=github&utm_content=comment&utm_campaign=pr+comments&utm_term=bloomberg) | Coverage Δ | | |---|---|---| | [cpp](https://app.codecov.io/gh/bloomberg/memray/pull/499/flags?src=pr&el=flag&utm_medium=referral&utm_source=github&utm_content=comment&utm_campaign=pr+comments&utm_term=bloomberg) | `85.66% <ø> (+0.02%)` | :arrow_up: | | [python_and_cython](https://app.codecov.io/gh/bloomberg/memray/pull/499/flags?src=pr&el=flag&utm_medium=referral&utm_source=github&utm_content=comment&utm_campaign=pr+comments&utm_term=bloomberg) | `95.52% <98.37%> (+0.04%)` | :arrow_up: | Flags with carried forward coverage won't be shown. [Click here](https://docs.codecov.io/docs/carryforward-flags?utm_medium=referral&utm_source=github&utm_content=comment&utm_campaign=pr+comments&utm_term=bloomberg#carryforward-flags-in-the-pull-request-comment) to find out more.

:umbrella: View full report in Codecov by Sentry.
:loudspeaker: Have feedback on the report? Share it here.

[pablogsal]

small nitpick: can we get a slightly bigger screenshot? It looks like the previous one was about 5000px wide, and the new one is only around 1800px wide. This makes the text harder to read.

Done