Flame Graph #502

adamsitnik · 2018-01-05T21:04:51Z

This PR is recreated #440

PerfView is very powerful tool, but sometimes for some inexperienced users like me it is hard to get a fast overview of what takes most of the CPU if there are plenty of methods on the stack.

This PR provides a simple implementation of the "Flame Graph".

It is just different visualization of the "call tree" view.

Sample result (for the "tutorial.exe")

Sample result for more complicated app (dotnet cli):

I added new tab (before the "notes")
I did not use SVG (most common way of implementing flame graph) because I would have to add external dependency to the project (link)
I decided to draw the rectangles/textblocks on a simple WPF Canvas. For small boxes, I use rectangles (too many textblocks on a single canvas = bad perf)
I have used some fancy color pallet to differentiate the boxes
I added possibility to export the flame graph to png file (right click => save)
I added the docs
The canvas is redrawn on resize/when the tab gets the focus
Both tool tip and bottom panel contains method name, samples count and % of total time
Since the flame graph is using data from call tree view, any filter applied to call tree view works for flame graph as well

vancem · 2018-01-08T19:52:47Z

@adamsitnik There is a failure in the debug test run. I looked into it a bit and it seems likely that it is issue #354 causihg the issue.

You need to update StackWindows to that the TestIncludeItemOnCallerCalleeTabCallerAsync test has the folloiwng

        [WpfFact(Skip = "Failing with indexOutOfRange and Debug testing.   See issue https://github.com/Microsoft/perfview/issues/354")]

vancem · 2018-01-08T19:55:40Z

PerfView has a mechanism where all files needed at runtime are emedded into the EXE itself and extracted at first launch. You added a new *.PNG file which needs to be emedded into PerfView.exe.

To do this modify src\PerfView\PerfVIew.csproj to add the following lines

    <EmbeddedResource Include="SupportFiles\Images\FlameGraphView.png">
      <Type>Non-Resx</Type>
      <WithCulture>false</WithCulture>
      <LogicalName>.\Images\FlameGraphView.png</LogicalName>
    </EmbeddedResource>

at line 417 (after all the other 'EmbeddedResource elements), but within the ItemGroup element.

sharwell · 2018-01-08T19:55:52Z

📝 I restarted the build, which may pass on second try with no changes.

Edit: Yes, it passed.

vancem · 2018-01-08T19:57:07Z

src/PerfView/FlameGraph.cs

@@ -0,0 +1,160 @@
+using System;


Please put the FlameGraph.cs file in the 'src\perfView\StackViewer' directory.

vancem · 2018-01-08T19:58:25Z

src/PerfView/SupportFiles/UsersGuide.htm

+        It gives you very intelligible overview.&nbsp;&nbsp;
+        The graph starts at the bottom. Each box represents a method in the stack. Every parent is the caller, children are the callees.
+        The wider the box, the more time it was on-CPU. The samples count is shown in the tooltip and in the bottom panel.
+        To change the content of the flame graph you need to apply the filters for call tree view.&nbsp;&nbsp;


Can you put a hyperlink to some documentation on how to use FlameGraphs that already exists somewhere on the internet?

codecov-io · 2018-01-08T19:59:44Z

Codecov Report

Merging #502 into master will decrease coverage by 0.12%.
The diff coverage is 6.71%.

@@            Coverage Diff             @@
##           master     #502      +/-   ##
==========================================
- Coverage   17.53%   17.41%   -0.13%     
==========================================
  Files         216      217       +1     
  Lines      123479   123627     +148     
  Branches    11910    11927      +17     
==========================================
- Hits        21658    21530     -128     
- Misses     100959   101231     +272     
- Partials      862      866       +4

Flag	Coverage Δ
#2017	`17.41% <6.71%> (-0.13%)`	⬇️
#Debug	`17.41% <6.71%> (-0.13%)`	⬇️

Impacted Files	Coverage Δ
src/PerfView.Tests/StackViewer/StackWindowTests.cs	`76.36% <ø> (-18.21%)`	⬇️
src/PerfView/StackViewer/FlameGraph.cs	`0% <0%> (ø)`
src/PerfView/StackViewer/StackWindow.xaml	`100% <100%> (ø)`	⬆️
src/PerfView/StackViewer/StackWindow.xaml.cs	`25.25% <13.2%> (-0.93%)`	⬇️
src/PerfView/GuiUtilities/GuiUtilities.cs	`9.42% <0%> (-6.81%)`	⬇️
src/PerfView/StackViewer/CallerCalleeView.xaml.cs	`43.02% <0%> (-5.82%)`	⬇️
src/TraceEvent/Stacks/CallTree.cs	`46.52% <0%> (-3.39%)`	⬇️
.../PerfView/GuiUtilities/StatusBar/StatusBar.xaml.cs	`57.22% <0%> (-3.18%)`	⬇️
src/PerfView/StackViewer/CallTreeView.cs	`47.89% <0%> (-1.06%)`	⬇️
... and 2 more

Continue to review full report at Codecov.

Legend - Click here to learn more
Δ = absolute <relative> (impact), ø = not affected, ? = missing data
Powered by Codecov. Last update 36de508...a4fdefc. Read the comment docs.

vancem · 2018-01-08T20:01:31Z

Please update the perfView version number (in the Directory.Build.Props file (it is in the 'Solution Items' folder in the solution). to be 2.0.1 and then udpate the 'ReleaseNotes' section of the UsersGuid.htm to indicate that flame graphs have been added in this version of PerfView).

vancem · 2018-01-08T20:04:36Z

src/PerfView/StackViewer/StackWindow.xaml.cs

@@ -411,6 +412,8 @@ public void SetStackSource(StackSource newSource, Action onComplete = null)
                            cumMax / 1000000, controller.GetStartTimeForBucket((HistogramCharacterIndex)cumMaxIdx));
                    }

+                    RedrawFlameGraph();


I would like this to be lazy. Simply have a bit that marks that the flame graph is invalid at this point. Then have an event when the canvas becomes visible that actually calls the RedrawFlamGraph.

This avoids a bunch of work that may never be used (if users never look at the flamegraph.

vancem

I have left a number of small change requests (the biggest being to delay redrawing the flamegraph until the view is visable). Other than those I am OK with this change.

adamsitnik · 2018-01-08T21:18:31Z

@vancem Done! Good idea with redrawing the graph only when it is visible.

vancem · 2018-01-08T22:48:48Z

Looks good to me

goldshtn · 2018-01-10T20:15:57Z

🎊 Very happy to see this merged! Nowadays I find that flame graphs are more useful than stack trees or other forms of stack visualization in 99% of the cases. Minor nitpick: if we could get rid of the "module" noise so that as much as possible of the actual function name would be shown in the flame rectangles, it would be even more awesome...

adamsitnik · 2018-01-10T20:20:11Z

Minor nitpick: if we could get rid of the "module" noise so that as much as possible of the actual function name would be shown in the flame rectangles, it would be even more awesome...

ok.

Once you start using it and have some more comments please create a separate issue. I would like to make the Flame Graphs user-friendly. And I did not forget about the colors, I just did not figure this out yet.

xiangzhai · 2020-07-10T09:52:53Z

:mips-interest

Flame Graph

ac31c4a

adamsitnik mentioned this pull request Jan 5, 2018

Flame Graph #440

Closed

vancem mentioned this pull request Jan 8, 2018

TestIncludeItemOnCallerCalleeTabCallerAsync fails locally #354

Closed

vancem reviewed Jan 8, 2018

View reviewed changes

vancem suggested changes Jan 8, 2018

View reviewed changes

adamsitnik added 2 commits January 8, 2018 21:35

Merge remote-tracking branch 'upstream/master' into flameGraph

99f4783

post code review improvements

a4fdefc

vancem approved these changes Jan 8, 2018

View reviewed changes

vancem merged commit f1731b1 into microsoft:master Jan 8, 2018

zpodlovics mentioned this pull request May 10, 2018

Visual Studio becomes slower over time with F# solutions dotnet/fsharp#4718

Closed

adamsitnik deleted the flameGraph branch July 10, 2020 10:04

Provide feedback

Saved searches

Use saved searches to filter your results more quickly

Flame Graph #502

Flame Graph #502

adamsitnik commented Jan 5, 2018

vancem commented Jan 8, 2018

vancem commented Jan 8, 2018

sharwell commented Jan 8, 2018 •

edited

Loading

vancem Jan 8, 2018

vancem Jan 8, 2018

codecov-io commented Jan 8, 2018 •

edited

Loading

vancem commented Jan 8, 2018

vancem Jan 8, 2018

vancem left a comment

adamsitnik commented Jan 8, 2018

vancem commented Jan 8, 2018

goldshtn commented Jan 10, 2018

adamsitnik commented Jan 10, 2018

xiangzhai commented Jul 10, 2020

Flame Graph #502

Flame Graph #502

Conversation

adamsitnik commented Jan 5, 2018

vancem commented Jan 8, 2018

vancem commented Jan 8, 2018

sharwell commented Jan 8, 2018 • edited Loading

vancem Jan 8, 2018

Choose a reason for hiding this comment

vancem Jan 8, 2018

Choose a reason for hiding this comment

codecov-io commented Jan 8, 2018 • edited Loading

Codecov Report

vancem commented Jan 8, 2018

vancem Jan 8, 2018

Choose a reason for hiding this comment

vancem left a comment

Choose a reason for hiding this comment

adamsitnik commented Jan 8, 2018

vancem commented Jan 8, 2018

goldshtn commented Jan 10, 2018

adamsitnik commented Jan 10, 2018

xiangzhai commented Jul 10, 2020

sharwell commented Jan 8, 2018 •

edited

Loading

codecov-io commented Jan 8, 2018 •

edited

Loading