diff --git a/src/__tests__/__snapshots__/profilingCharts-test.js.snap b/src/__tests__/__snapshots__/profilingCharts-test.js.snap index 36e4c8cf90..3e0539db75 100644 --- a/src/__tests__/__snapshots__/profilingCharts-test.js.snap +++ b/src/__tests__/__snapshots__/profilingCharts-test.js.snap @@ -61,7 +61,7 @@ Object { "actualDuration": 14, "didRender": true, "id": 2, - "label": "Parent (10.0ms of 14.0ms)", + "label": "Parent (10ms of 14ms)", "name": "Parent", "offset": 0, "selfDuration": 10, @@ -73,7 +73,7 @@ Object { "actualDuration": 2, "didRender": true, "id": 4, - "label": "Memo(Child) key=\\"second\\" (2.0ms of 2.0ms)", + "label": "Memo(Child) key=\\"second\\" (2ms of 2ms)", "name": "Memo(Child)", "offset": 12, "selfDuration": 2, @@ -83,7 +83,7 @@ Object { "actualDuration": 2, "didRender": true, "id": 3, - "label": "Memo(Child) key=\\"first\\" (2.0ms of 2.0ms)", + "label": "Memo(Child) key=\\"first\\" (2ms of 2ms)", "name": "Memo(Child)", "offset": 10, "selfDuration": 2, @@ -155,7 +155,7 @@ Object { "actualDuration": 10, "didRender": true, "id": 2, - "label": "Parent (10.0ms of 10.0ms)", + "label": "Parent (10ms of 10ms)", "name": "Parent", "offset": 0, "selfDuration": 10, @@ -253,19 +253,19 @@ Object { "nodes": Array [ Object { "id": 2, - "label": "Parent (10.0ms)", + "label": "Parent (10ms)", "name": "Parent", "value": 10, }, Object { "id": 3, - "label": "Memo(Child) key=\\"first\\" (2.0ms)", + "label": "Memo(Child) key=\\"first\\" (2ms)", "name": "Memo(Child)", "value": 2, }, Object { "id": 4, - "label": "Memo(Child) key=\\"second\\" (2.0ms)", + "label": "Memo(Child) key=\\"second\\" (2ms)", "name": "Memo(Child)", "value": 2, }, @@ -324,7 +324,7 @@ Object { "nodes": Array [ Object { "id": 2, - "label": "Parent (10.0ms)", + "label": "Parent (10ms)", "name": "Parent", "value": 10, }, diff --git a/src/devtools/views/Profiler/FlamegraphChartBuilder.js b/src/devtools/views/Profiler/FlamegraphChartBuilder.js index dd6dc8f827..8f314ba754 100644 --- a/src/devtools/views/Profiler/FlamegraphChartBuilder.js +++ b/src/devtools/views/Profiler/FlamegraphChartBuilder.js @@ -1,6 +1,6 @@ // @flow -import { calculateSelfDuration } from './utils'; +import { calculateSelfDuration, formatDuration } from './utils'; import type { CommitDetailsFrontend, CommitTreeFrontend } from './types'; @@ -68,8 +68,8 @@ export function getChartData({ let label = `${name}${maybeKey}`; if (didRender) { - label += ` (${selfDuration.toFixed(1)}ms of ${actualDuration.toFixed( - 1 + label += ` (${formatDuration(selfDuration)}ms of ${formatDuration( + actualDuration )}ms)`; } diff --git a/src/devtools/views/Profiler/RankedChartBuilder.js b/src/devtools/views/Profiler/RankedChartBuilder.js index 4274bac0c4..f11c97200f 100644 --- a/src/devtools/views/Profiler/RankedChartBuilder.js +++ b/src/devtools/views/Profiler/RankedChartBuilder.js @@ -1,6 +1,6 @@ // @flow -import { calculateSelfDuration } from './utils'; +import { calculateSelfDuration, formatDuration } from './utils'; import type { CommitDetailsFrontend, CommitTreeFrontend } from './types'; @@ -49,13 +49,12 @@ export function getChartData({ if (node.parentID === 0) { return; } - const selfDuration = calculateSelfDuration(id, commitTree, commitDetails); maxSelfDuration = Math.max(maxSelfDuration, selfDuration); const name = node.displayName || 'Unknown'; const maybeKey = node.key !== null ? ` key="${node.key}"` : ''; - const label = `${name}${maybeKey} (${selfDuration.toFixed(1)}ms)`; + const label = `${name}${maybeKey} (${formatDuration(selfDuration)}ms)`; chartNodes.push({ id, label, diff --git a/src/devtools/views/Profiler/utils.js b/src/devtools/views/Profiler/utils.js index ca8114a318..93443d9714 100644 --- a/src/devtools/views/Profiler/utils.js +++ b/src/devtools/views/Profiler/utils.js @@ -113,7 +113,7 @@ export const getGradientColor = (value: number) => { }; export const formatDuration = (duration: number) => - Math.round(duration * 10) / 10; + Math.round(duration * 10) / 10 || '<0.1'; export const formatPercentage = (percentage: number) => Math.round(percentage * 100); export const formatTime = (timestamp: number) =>