Skip to content

Commit

Permalink
Post-review2 commit: Fix sidebar timings displays
Browse files Browse the repository at this point in the history
  • Loading branch information
@julienw
julienw committed Jul 12, 2019
1 parent 2a9c78d commit a818a72
Show file tree
Hide file tree
Showing 3 changed files with 57 additions and 98 deletions.
29 changes: 22 additions & 7 deletions src/components/sidebar/CallTreeSidebar.js
View file
Original file line number Diff line number Diff line change
Expand Up @@ -117,13 +117,18 @@ class CategoryBreakdown extends React.PureComponent<CategoryBreakdownProps> {
.sort(({ value: valueA }, { value: valueB }) => valueB - valueA)
.filter(({ value }) => value);

const totalTime = data.reduce((accum, { value }) => accum + value, 0);
// Values can be negative for diffing tracks, that's why we use the absolute
// value to compute the total time. Indeed even if all values average out,
// we want to display a sensible percentage.
const totalTime = data.reduce(
(accum, { value }) => accum + Math.abs(value),
0
);
const maxFractionalDigits = isIntervalInteger ? 0 : 1;

return (
<div className="sidebar-categorylist">
{data.map(({ category, value, subcategories }) => {
const percentage = Math.round((value / totalTime) * 100);
return (
<React.Fragment key={category.name}>
<div className="sidebar-categoryname">
Expand All @@ -137,7 +142,7 @@ class CategoryBreakdown extends React.PureComponent<CategoryBreakdownProps> {
</div>
<div className="sidebar-categorytiming">
{formatMilliseconds(value, 3, maxFractionalDigits)} (
{percentage}%)
{formatPercent(value / totalTime)})
</div>
{shouldDisplaySubcategoryInfoForCategory(category)
? subcategories.map(({ name, value }) => (
Expand Down Expand Up @@ -252,8 +257,13 @@ class CallTreeSidebar extends React.PureComponent<Props> {
</header>
<h3 className="sidebar-title2">This selected call node</h3>
<SidebarDetail label="Running Time">
{formatMilliseconds(totalTime.value, 3, maxFractionalDigits)} (
{totalTimePercent}%)
{totalTime.value
? `${formatMilliseconds(
totalTime.value,
3,
maxFractionalDigits
)} (${totalTimePercent}%)`
: '—'}
</SidebarDetail>
<SidebarDetail label="Self Time">
{selfTime.value
Expand Down Expand Up @@ -296,8 +306,13 @@ class CallTreeSidebar extends React.PureComponent<Props> {
This function across the entire tree
</h3>
<SidebarDetail label="Running Time">
{formatMilliseconds(totalTimeForFunc.value, 3, maxFractionalDigits)}{' '}
({totalTimeForFuncPercent}%)
{totalTimeForFunc.value
? `${formatMilliseconds(
totalTimeForFunc.value,
3,
maxFractionalDigits
)} (${totalTimeForFuncPercent}%)`
: '—'}
</SidebarDetail>
<SidebarDetail label="Self Time">
{selfTimeForFunc.value
Expand Down
2 changes: 1 addition & 1 deletion src/profile-logic/profile-data.js
View file
Original file line number Diff line number Diff line change
Expand Up @@ -468,7 +468,7 @@ export function getTimingsForCallNodeIndex(
? samples.duration[sampleIndex]
: interval;

rootTime += duration;
rootTime += Math.abs(duration);

const thisNodeIndex = stackIndexToCallNodeIndex[thisStackIndex];
const thisFunc = callNodeTable.func[thisNodeIndex];
Expand Down
124 changes: 34 additions & 90 deletions src/test/components/__snapshots__/CallTreeSidebar.test.js.snap
View file
Original file line number Diff line number Diff line change
Expand Up @@ -44,10 +44,7 @@ exports[`CallTreeSidebar matches the snapshots when displaying data about the cu
<div
class="sidebar-value"
>
2ms
(
50
%)
2ms (50%)
</div>
<div
class="sidebar-label"
Expand Down Expand Up @@ -82,8 +79,8 @@ exports[`CallTreeSidebar matches the snapshots when displaying data about the cu
>
2ms
(
100
%)
100%
)
</div>
</div>
<h4
Expand Down Expand Up @@ -119,11 +116,7 @@ exports[`CallTreeSidebar matches the snapshots when displaying data about the cu
<div
class="sidebar-value"
>
2ms
(
50
%)
2ms (50%)
</div>
<div
class="sidebar-label"
Expand Down Expand Up @@ -195,10 +188,7 @@ exports[`CallTreeSidebar matches the snapshots when displaying data about the cu
<div
class="sidebar-value"
>
1ms
(
25
%)
1ms (25%)
</div>
<div
class="sidebar-label"
Expand Down Expand Up @@ -233,8 +223,8 @@ exports[`CallTreeSidebar matches the snapshots when displaying data about the cu
>
1ms
(
100
%)
100%
)
</div>
</div>
<h4
Expand Down Expand Up @@ -270,11 +260,7 @@ exports[`CallTreeSidebar matches the snapshots when displaying data about the cu
<div
class="sidebar-value"
>
1ms
(
25
%)
1ms (25%)
</div>
<div
class="sidebar-label"
Expand Down Expand Up @@ -346,10 +332,7 @@ exports[`CallTreeSidebar matches the snapshots when displaying data about the cu
<div
class="sidebar-value"
>
2ms
(
50
%)
2ms (50%)
</div>
<div
class="sidebar-label"
Expand Down Expand Up @@ -384,8 +367,8 @@ exports[`CallTreeSidebar matches the snapshots when displaying data about the cu
>
1ms
(
50
%)
50%
)
</div>
<div
class="sidebar-categoryname"
Expand All @@ -401,8 +384,8 @@ exports[`CallTreeSidebar matches the snapshots when displaying data about the cu
>
1ms
(
50
%)
50%
)
</div>
</div>
<h4
Expand Down Expand Up @@ -457,11 +440,7 @@ exports[`CallTreeSidebar matches the snapshots when displaying data about the cu
<div
class="sidebar-value"
>
2ms
(
50
%)
2ms (50%)
</div>
<div
class="sidebar-label"
Expand Down Expand Up @@ -552,10 +531,7 @@ exports[`CallTreeSidebar matches the snapshots when displaying data about the cu
<div
class="sidebar-value"
>
1ms
(
25
%)
1ms (25%)
</div>
<div
class="sidebar-label"
Expand Down Expand Up @@ -590,8 +566,8 @@ exports[`CallTreeSidebar matches the snapshots when displaying data about the cu
>
1ms
(
100
%)
100%
)
</div>
</div>
<h4
Expand Down Expand Up @@ -646,11 +622,7 @@ exports[`CallTreeSidebar matches the snapshots when displaying data about the cu
<div
class="sidebar-value"
>
2ms
(
50
%)
2ms (50%)
</div>
<div
class="sidebar-label"
Expand Down Expand Up @@ -749,10 +721,7 @@ exports[`CallTreeSidebar matches the snapshots when displaying data about the cu
<div
class="sidebar-value"
>
2ms
(
50
%)
2ms (50%)
</div>
<div
class="sidebar-label"
Expand Down Expand Up @@ -787,8 +756,8 @@ exports[`CallTreeSidebar matches the snapshots when displaying data about the cu
>
2ms
(
100
%)
100%
)
</div>
</div>
<h4
Expand Down Expand Up @@ -824,11 +793,7 @@ exports[`CallTreeSidebar matches the snapshots when displaying data about the cu
<div
class="sidebar-value"
>
2ms
(
50
%)
2ms (50%)
</div>
<div
class="sidebar-label"
Expand Down Expand Up @@ -919,10 +884,7 @@ exports[`CallTreeSidebar matches the snapshots when displaying data about the cu
<div
class="sidebar-value"
>
1ms
(
25
%)
1ms (25%)
</div>
<div
class="sidebar-label"
Expand Down Expand Up @@ -957,8 +919,8 @@ exports[`CallTreeSidebar matches the snapshots when displaying data about the cu
>
1ms
(
100
%)
100%
)
</div>
</div>
<h4
Expand Down Expand Up @@ -994,11 +956,7 @@ exports[`CallTreeSidebar matches the snapshots when displaying data about the cu
<div
class="sidebar-value"
>
2ms
(
50
%)
2ms (50%)
</div>
<div
class="sidebar-label"
Expand Down Expand Up @@ -1089,10 +1047,7 @@ exports[`CallTreeSidebar matches the snapshots when displaying data about the cu
<div
class="sidebar-value"
>
1ms
(
25
%)
1ms (25%)
</div>
<div
class="sidebar-label"
Expand Down Expand Up @@ -1127,8 +1082,8 @@ exports[`CallTreeSidebar matches the snapshots when displaying data about the cu
>
1ms
(
100
%)
100%
)
</div>
</div>
<h4
Expand Down Expand Up @@ -1164,11 +1119,7 @@ exports[`CallTreeSidebar matches the snapshots when displaying data about the cu
<div
class="sidebar-value"
>
2ms
(
50
%)
2ms (50%)
</div>
<div
class="sidebar-label"
Expand Down Expand Up @@ -1259,10 +1210,7 @@ exports[`CallTreeSidebar matches the snapshots when displaying data about the cu
<div
class="sidebar-value"
>
1ms
(
25
%)
1ms (25%)
</div>
<div
class="sidebar-label"
Expand Down Expand Up @@ -1297,8 +1245,8 @@ exports[`CallTreeSidebar matches the snapshots when displaying data about the cu
>
1ms
(
100
%)
100%
)
</div>
</div>
<h4
Expand Down Expand Up @@ -1334,11 +1282,7 @@ exports[`CallTreeSidebar matches the snapshots when displaying data about the cu
<div
class="sidebar-value"
>
4ms
(
100
%)
4ms (100%)
</div>
<div
class="sidebar-label"
Expand Down

0 comments on commit a818a72

Please sign in to comment.