Skip to content

Select the call tree tab when clicking a node in the activity graph#4331

Merged
julienw merged 2 commits into
firefox-devtools:mainfrom
julienw:select-call-tree-when-clicking-node
Nov 22, 2022
Merged

Select the call tree tab when clicking a node in the activity graph#4331
julienw merged 2 commits into
firefox-devtools:mainfrom
julienw:select-call-tree-when-clicking-node

Conversation

@julienw
Copy link
Copy Markdown
Contributor

@julienw julienw commented Nov 18, 2022

STR:

  1. Open a profile.
  2. Select the marker chart panel.
  3. Click on the graph in the timeline to select a node.

=> as a user, I expect the call tree to be displayed.

Note: I considered not doing it when the flame graph or the stack chart was selected, but when I tried it with the flame graph, I found it not useful: indeed the selected nodes are usually at the bottom of a stack with only a small selftime, so they're barely visible in the flame graph, and same for the stack chart. The call tree is much more useful for these nodes.

Example profile:

Comment thread src/reducers/app.js
}
return state;
case 'FOCUS_CALL_TREE':
return 'calltree';
Copy link
Copy Markdown
Contributor Author

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

I'm not a huge fan of this lastVisibleThreadTabSlug, it's missing some corner cases (for example when navigating using the URL only, either loading a URL with another slug than calltree at load time, or navigating with back/forward). But I didn't want to change all of this now :-)

(reminder: this state links the network chart and the network track, so that when changing the track back to another track, we go back at the previous selected tab too)

expect(getCallNodePath()).toEqual(['j', 'k', 'l']);
});

it('when clicking a stack, this selects the call tree panel', function () {
Copy link
Copy Markdown
Contributor Author

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

I couldn't find a test using the activity graph, but using the stack graph canvas works too :-D

@codecov
Copy link
Copy Markdown

codecov Bot commented Nov 18, 2022

Codecov Report

Base: 88.32% // Head: 88.33% // Increases project coverage by +0.00% 🎉

Coverage data is based on head (2aec81a) compared to base (be78e21).
Patch coverage: 100.00% of modified lines in pull request are covered.

❗ Current head 2aec81a differs from pull request most recent head 53db899. Consider uploading reports for the commit 53db899 to get more accurate results

Additional details and impacted files
@@           Coverage Diff           @@
##             main    #4331   +/-   ##
=======================================
  Coverage   88.32%   88.33%           
=======================================
  Files         282      282           
  Lines       25225    25229    +4     
  Branches     6795     6797    +2     
=======================================
+ Hits        22281    22285    +4     
  Misses       2731     2731           
  Partials      213      213           
Impacted Files Coverage Δ
src/reducers/app.js 97.86% <100.00%> (+0.02%) ⬆️
src/reducers/url-state.js 96.89% <100.00%> (+0.01%) ⬆️

Help us with your feedback. Take ten seconds to tell us how you rate us. Have a feature suggestion? Share it here.

☔ View full report at Codecov.
📢 Do you have feedback about the report comment? Let us know in this issue.

@gregtatum
Copy link
Copy Markdown
Member

I'm a bit sad the stack chart and flame graph don't get used. I agree the selection is kind of worthless for those charts. Maybe this could be a different bug, but what would be useful is selecting the root-most frame of the category that is being rendered to the chart. For example clicking on the chart on the flame or stack charts could select the following:

image

@julienw
Copy link
Copy Markdown
Contributor Author

julienw commented Nov 18, 2022

I was thinking of something different: that we highlight the whole call node path when selecting one call node .

Copy link
Copy Markdown
Member

@canova canova left a comment

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

Thanks!

I agree with @gregtatum's comment. I think it would be nice if we can keep the tab the same for flame graph and stack chart and highlight the node somehow. Although not sure whether to highlight the whole call node or selecting the root-most in the category. It would be good to discuss it in an issue I guess.

@julienw julienw enabled auto-merge (squash) November 22, 2022 14:03
Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment

Labels

None yet

Projects

None yet

Development

Successfully merging this pull request may close these issues.

3 participants