Show unrounded durations on hover for chart tooltips

Author: Brian Vaughn

plugins/Profiler/views/ChartNode.js

@@ -24,19 +24,32 @@ type Props = {|
   onDoubleClick?: Function,
   placeLabelAboveNode?: boolean,
   theme: Theme,
+  title: string,
   width: number,
   x: number,
   y: number,
 |};
 
 const minWidthToDisplay = 35;
 
-const ChartNode = ({ color, height, isDimmed = false, label, onClick, onDoubleClick, theme, width, x, y }: Props) => (
+const ChartNode = ({
+  color,
+  height,
+  isDimmed = false,
+  label,
+  onClick,
+  onDoubleClick,
+  theme,
+  title,
+  width,
+  x,
+  y,
+}: Props) => (
   <g
     style={ChartAnimatedNode}
     transform={`translate(${x},${y})`}
   >
-    <title>{label}</title>
+    <title>{title}</title>
     <rect
       width={width}
       height={height}

plugins/Profiler/views/FiberRenderDurations.js

@@ -171,6 +171,7 @@ class ListItem extends PureComponent<any, void> {
         onClick={() => selectSnapshot(node.parentSnapshot)}
         onDoubleClick={stopInspecting}
         theme={theme}
+        title={`${node.value}ms`}
         width={width}
         x={left}
         y={height - safeHeight}

plugins/Profiler/views/SnapshotFlamegraph.js

@@ -270,6 +270,7 @@ class ListItem extends PureComponent<any, void> {
               onClick={this.handleClick.bind(this, id, name)}
               onDoubleClick={this.handleDoubleClick.bind(this, id, name)}
               theme={itemData.theme}
+              title={didRender ? `${name} (${actualDuration}ms)` : name}
               width={nodeWidth}
               x={nodeX - focusedNodeX}
               y={top}

plugins/Profiler/views/SnapshotRanked.js

@@ -25,6 +25,7 @@ type Node = {|
   id: any,
   label: string,
   name: string,
+  title: string,
   value: number,
 |};
 
@@ -199,6 +200,7 @@ class ListItem extends PureComponent<any, void> {
         onClick={this.handleClick}
         onDoubleClick={this.handleDoubleClick}
         theme={data.theme}
+        title={node.title}
         width={Math.max(minBarWidth, scaleX(node.value))}
         x={0}
         y={top}
@@ -258,6 +260,7 @@ const convertSnapshotToChartData = (snapshot: Snapshot, showNativeNodes: boolean
         id: node.id,
         label: `${name} (${node.actualDuration.toFixed(2)}ms)`,
         name,
+        title: `${name} (${node.actualDuration}ms)`,
         value: node.actualDuration,
       };
     })