Merge pull request #262 from submetu/enhancement/label-improvement

Profiler: Improve labels for times that round to 0.0ms

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,
     },

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)`;
     }
 

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,

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) =>