-
Notifications
You must be signed in to change notification settings - Fork 595
Commit
This commit does not belong to any branch on this repository, and may belong to a fork outside of the repository.
Added alternative flamegraph implementation that can show callers. (#716
) Add an experimental flame-graph implementation. It can be selected in pprof's web interface using the new "Flame (experimental)" menu entry. At some point this new implementation may become the default. The new view is similar to flame-graph view. But it can show caller information as well. This should allow it to satisfy many users of Graph and Peek views as well. Let's illustrate with an example. Suppose we have profile data that consists of the following stacks: ``` 1000 main -> foo -> malloc 2000 main -> bar -> malloc ``` When main is selected, both the old and new views show: ``` [-------------------3000 main---------------------] [---1000 foo-----] [----------2000 bar------------] [---1000 malloc--] [----------2000 malloc---------] ``` But suppose now the user selects the right-most malloc slot. The old view will show just the path leading to that malloc: ``` [----------2000 main-----------] [----------2000 bar------------] [----------2000 malloc---------] ``` The new view will however show a flame-graph view that grows upwards that displays the call stacks leading to malloc: ``` [---1000 main----] [----------2000 main-----------] [---1000 foo-----] [----------2000 bar------------] [-------------------3000 malloc-------------------] ``` This caller display is useful when trying to determine expensive callers of function. A list of important differences between the new view and flame graphs: New view pros: 1. Callers are shown, e.g., all paths leading to malloc. 2. Shows self-cost clearly with a different saturation. 3. Font size is adjusted to fit more text into boxes. 4. Highlighting on hover shows other occurrences of a function. 5. Search works more like other views. 6. Pivot changes are reflected in browser history (so back and forward buttons can be used to navigate between different selections). 7. Allows eventual removal of the D3 dependency, which may make integrations into various environments easier. 8. Colors provide higher contrast between foreground and background. New view cons: 1. There are small differences in how things look and feel. 2. Color-scheme is very different. 3. Change triggered by selecting a new entry is not animated.
- Loading branch information
Showing
18 changed files
with
1,292 additions
and
20 deletions.
There are no files selected for viewing
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
| Original file line number | Diff line number | Diff line change |
|---|---|---|
| @@ -0,0 +1,75 @@ | ||
| body { | ||
| overflow: hidden; /* Want scrollbar not here, but in #stack-holder */ | ||
| } | ||
| /* Scrollable container for flame graph */ | ||
| #stack-holder { | ||
| width: 100%; | ||
| flex-grow: 1; | ||
| overflow-y: auto; | ||
| background: #eee; /* Light grey gives better contrast with boxes */ | ||
| position: relative; /* Allows absolute positioning of child boxes */ | ||
| } | ||
| /* Flame graph */ | ||
| #stack-chart { | ||
| width: 100%; | ||
| position: relative; /* Allows absolute positioning of child boxes */ | ||
| } | ||
| /* Shows details of frame that is under the mouse */ | ||
| #current-details { | ||
| position: absolute; | ||
| top: 5px; | ||
| right: 5px; | ||
| z-index: 2; | ||
| font-size: 12pt; | ||
| } | ||
| /* Background of a single flame-graph frame */ | ||
| .boxbg { | ||
| border-width: 0px; | ||
| position: absolute; | ||
| overflow: hidden; | ||
| } | ||
| /* Function name */ | ||
| .boxtext { | ||
| position: absolute; | ||
| width: 100%; | ||
| padding-left: 2px; | ||
| line-height: 18px; | ||
| cursor: default; | ||
| font-family: "Google Sans", Arial, sans-serif; | ||
| font-size: 12pt; | ||
| z-index: 2; | ||
| } | ||
| /* Box highlighting via shadows to avoid size changes */ | ||
| .hilite { box-shadow: 0px 0px 0px 2px #000; z-index: 1; } | ||
| .hilite2 { box-shadow: 0px 0px 0px 2px #000; z-index: 1; } | ||
| /* Self-cost region inside a box */ | ||
| .self { | ||
| position: absolute; | ||
| background: rgba(0,0,0,0.25); /* Darker hue */ | ||
| } | ||
| /* Gap left between callers and callees */ | ||
| .separator { | ||
| position: absolute; | ||
| text-align: center; | ||
| font-size: 12pt; | ||
| font-weight: bold; | ||
| } | ||
| /* Ensure that pprof menu is above boxes */ | ||
| .submenu { z-index: 3; } | ||
| /* Right-click menu */ | ||
| #action-menu { | ||
| max-width: 15em; | ||
| } | ||
| /* Right-click menu title */ | ||
| #action-title { | ||
| display: block; | ||
| padding: 0.5em 1em; | ||
| background: #888; | ||
| text-overflow: ellipsis; | ||
| overflow: hidden; | ||
| } | ||
| /* Internal canvas used to measure text size when picking fonts */ | ||
| #textsizer { | ||
| position: absolute; | ||
| bottom: -100px; | ||
| } |
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
| Original file line number | Diff line number | Diff line change |
|---|---|---|
| @@ -0,0 +1,32 @@ | ||
| <!DOCTYPE html> | ||
| <html> | ||
| <head> | ||
| <meta charset="utf-8"> | ||
| <title>{{.Title}}</title> | ||
| {{template "css" .}} | ||
| {{template "stacks_css"}} | ||
| </head> | ||
| <body> | ||
| {{template "header" .}} | ||
| <div id="stack-holder"> | ||
| <div id="stack-chart"></div> | ||
| <div id="current-details"></div> | ||
| </div> | ||
| <div id="action-menu" class="submenu"> | ||
| <span id="action-title"></span> | ||
| <hr> | ||
| <a title="{{.Help.list}}" id="action-source" href="./source">Show source code</a> | ||
| <a title="{{.Help.list}}" id="action-source-tab" href="./source" target="_blank">Show source in new tab</a> | ||
| <hr> | ||
| <a title="{{.Help.focus}}" id="action-focus" href="?">Focus</a> | ||
| <a title="{{.Help.ignore}}" id="action-ignore" href="?">Ignore</a> | ||
| <a title="{{.Help.hide}}" id="action-hide" href="?">Hide</a> | ||
| <a title="{{.Help.show_from}}" id="action-showfrom" href="?">Show from</a> | ||
| </div> | ||
| {{template "script" .}} | ||
| {{template "stacks_js"}} | ||
| <script> | ||
| stackViewer({{.Stacks}}, {{.Nodes}}); | ||
| </script> | ||
| </body> | ||
| </html> |
Oops, something went wrong.