refactor(devtools): improve profiler ux - #70102
Conversation
- Add info tooltips that describe the visualizations and other parts of the UI - Improve the frame selector by adding axes labels and a horizontal line for frames exceeding 60 fps - Use a precise frame rate calculations instead of approximations - Introduce improvements to the details panel - Improve the bar chart visualization - And more
JeanMeche
left a comment
JeanMeche
left a comment
There was a problem hiding this comment.
LGTM on the feature itself, it's a welcomed improvement.
|
Along with the addressed comments, the fixup includes an It converts the HSL flamegraph colors to RGB, since HSL produces very distinct bar colors in our profiler when we don't have a great variety of values to render, which makes it hard to notice a tendency in the coloring. This is because HSL color transition goes through all colors in the spectrum between the selected min and max, whereas RGB does a gradual transition between the two. You can check more about the change along with a visual example in this PR: mgechev/ngx-flamegraph#69 |
620fcfa to
68e4879
Compare
| @extend %caption-text; | ||
| margin: 0; | ||
| color: var(--quaternary-contrast); | ||
| white-space: norwrap; |
There was a problem hiding this comment.
Bug: Typo in white-space value. It should be nowrap instead of norwrap.
| @@ -24,6 +24,9 @@ export interface FlamegraphNode { | |||
| export const ROOT_LEVEL_ELEMENT_LABEL = 'Entire application'; | |||
|
|
|||
| export class FlamegraphFormatter extends RecordFormatter<FlamegraphNode> { | |||
There was a problem hiding this comment.
Consider: Avoid storing transient state like cdColor and noCdColor as class properties in FlamegraphFormatter. They are only used during formatFrame execution. Consider passing them as arguments to addFrame or refactoring addFrame to be a local function inside formatFrame to maintain purity.
There was a problem hiding this comment.
Yeah, on a second look, the change doesn't seem good.
| [VisualizationMode.BarGraph]: | ||
| 'The bar chart displays the processing time of the components during the selected CD cycle(s) in descending order.', | ||
| [VisualizationMode.FlameGraph]: | ||
| 'The flame graph displays the full component tree hierarchy for the selected cycle(s). During this period, processed components shift from blue to orange. The more orange a component is, the longer it took to process. You can expand and explore deeply nested nodes by double-clicking a bar.', |
There was a problem hiding this comment.
Nit: "more orange" is a bit awkward language, maybe "closer to orange" might be a little more accurate? Not sure there is a great phrasing option here.
3 participants
One of the goals of this change is to make the Profiler more welcoming to new users of Angular DevTools.
Changes: