Skip to content

Update profile-details.mdx #7658

New issue

Have a question about this project? Sign up for a free GitHub account to open an issue and contact its maintainers and the community.

Sign up for GitHub

By clicking “Sign up for GitHub”, you agree to our terms of service and privacy statement. We’ll occasionally send you account related emails.

Already on GitHub? Sign in to your account

Merged
merged 1 commit into from
Aug 16, 2023
Merged

Update profile-details.mdx #7658

Changes from all commits
Commits
Show all changes
1 commit
Select commit
File filter

Filter by extension

Filter by extension
Conversations
Failed to load comments.
Loading
Jump to
Jump to file
Failed to load files.
Loading
Diff view
Diff view
26 changes: 13 additions & 13 deletions src/docs/product/profiling/profile-details.mdx
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -8,46 +8,46 @@ Profiling data can be used to gain insight into what methods and lines of your c

![Profiling details page](profiling-details.png)

The main visualization on this page is a flame chart. Learn more about flame charts in [Flame Charts and Flame Graphs](/product/profiling/flame-charts-graphs).
The main visualization on this page is a flame graph. Learn more about flame graphs in [Flame Graphs and Aggregated Flame Graphs](/product/profiling/flame-charts-graphs).

## Thread Selector

A flame chart can only show data from one thread at a time. You can use the thread selector dropdown to choose which thread to look at.
A flame graph can only show data from one thread at a time. You can use the thread selector dropdown to choose which thread to look at.

![Profiling flame chart thread selector](thread-selector.png)
![Profiling flame graph thread selector](thread-selector.png)

## Flame Chart Sorting Options
## Flame Graph Sorting Options

Samples are displayed in chronological (call) order by default. You can change the way samples are sorted in the flame chart with these options:
Samples are displayed in chronological (call) order by default. You can change the way samples are sorted in the flame graph with these options:

- **Call Order:** The default sorting order which displays samples in chronological order.
- **Alphabetical:** Sorts samples by frame name.
- **Left Heavy:** Sorts samples from highest weight to lowest weight.

When you use alphabetical or left heavy sorting, adjacent frames with the same name are merged and their durations are summed. This helps when your profile has a lot of tiny stacks (called “hair”) which are easier to see when summed together.

!["Hairy" flame chart](flame-chart-hair.png)
!["Hairy" flame graph](flame-chart-hair.png)

![Flame chart after merge](flame-chart-less-hair.png)
![Flame graph after merge](flame-chart-less-hair.png)

_Example of a NodeJS flame chart with a lot of “hair” vs the merged visualization. Notice how the right side of the second chart is able to display the sum durations for loading our modules._
_Example of a NodeJS flame graph with a lot of “hair” vs the merged visualization. Notice how the right side of the second graph is able to display the sum durations for loading our modules._

**Bottom Up/Top Down**

Flame charts represent profile data with leaves either at the top or the bottom. This toggle lets you choose which visualization style your flame charts default to.
Flame graphs represent profile data with leaves either at the top or the bottom. This toggle lets you choose which visualization style your flame graphs default to.

## Search

The search bar allows you to search for function names inside the profile. It supports fuzzy search and regular expressions.

![Profile search bar](search-bar.png)

## Flame Chart Colors
## Flame Graph Colors

The **Color Coding** toggle offers different ways to color the flame chart:
The **Color Coding** toggle offers different ways to color the flame graph:

- **By System vs. Application Frame** (default)
- **By Symbol Name:** Each unique function frame has its own color. When a unique function appears in different places in the chart it can be identified by its color.
- **By Symbol Name:** Each unique function frame has its own color. When a unique function appears in different places in the graph it can be identified by its color.
- **By Package:** Frames from different packages or modules share the same color.
- **By System Frame:** System frames each have their own color so you can easily tell them apart. Application frames are grey.
- **By Application Frame:** Application frames each have their own color. System frames are grey.
Expand All @@ -72,7 +72,7 @@ _Example of the waterfall vs tree span view._

## Table View

The bottom of the screen shows a table representation of the flame chart. It provides an alternate view that enables you to see and sort functions by name, time spent in them, and their type (application or system).
The bottom of the screen shows a table representation of the flame graph. It provides an alternate view that enables you to see and sort functions by name, time spent in them, and their type (application or system).

By default, the table displays “Bottom Up”, which shows the leafmost functions, or those with the most time at the top of a call stack. Long-running leaf functions are a good first indicator of performance bottlenecks.

Expand Down