Improve DevTools Profiler commit-selector UX

packages/react-devtools-shared/src/devtools/views/Profiler/SnapshotCommitList.js

@@ -13,6 +13,8 @@ import AutoSizer from 'react-virtualized-auto-sizer';
 import {FixedSizeList} from 'react-window';
 import SnapshotCommitListItem from './SnapshotCommitListItem';
 import {minBarWidth} from './constants';
+import {formatDuration, formatTime} from './utils';
+import Tooltip from './Tooltip';
 
 import styles from './SnapshotCommitList.css';
 
@@ -24,6 +26,7 @@ export type ItemData = {|
   selectedCommitIndex: number | null,
   selectedFilteredCommitIndex: number | null,
   selectCommitIndex: (index: number) => void,
+  setHoveredCommitIndex: (index: number) => void,
   startCommitDrag: (newDragState: DragState) => void,
 |};
 
@@ -166,6 +169,10 @@ function List({
     }
   }, [dragState]);
 
+  const [hoveredCommitIndex, setHoveredCommitIndex] = useState<number | null>(
+    null,
+  );
+
   // Pass required contextual data down to the ListItem renderer.
   const itemData = useMemo<ItemData>(
     () => ({
@@ -176,6 +183,7 @@ function List({
       selectedCommitIndex,
       selectedFilteredCommitIndex,
       selectCommitIndex,
+      setHoveredCommitIndex,
       startCommitDrag: setDragState,
     }),
     [
@@ -186,22 +194,37 @@ function List({
       selectedCommitIndex,
       selectedFilteredCommitIndex,
       selectCommitIndex,
+      setHoveredCommitIndex,
     ],
   );
 
+  let tooltipLabel = null;
+  if (hoveredCommitIndex !== null) {
+    const commitDuration = commitDurations[hoveredCommitIndex];
+    const commitTime = commitTimes[hoveredCommitIndex];
+    tooltipLabel = `${formatDuration(commitDuration)}ms at ${formatTime(
+      commitTime,
+    )}s`;
+  }
+
   return (
-    <div ref={divRef} style={{height, width}}>
-      <FixedSizeList
-        className={styles.List}
-        layout="horizontal"
-        height={height}
-        itemCount={filteredCommitIndices.length}
-        itemData={itemData}
-        itemSize={itemSize}
-        ref={(listRef: any) /* Flow bug? */}
-        width={width}>
-        {SnapshotCommitListItem}
-      </FixedSizeList>
-    </div>
+    <Tooltip label={tooltipLabel}>
+      <div
+        ref={divRef}
+        style={{height, width}}
+        onMouseLeave={() => setHoveredCommitIndex(null)}>
+        <FixedSizeList
+          className={styles.List}
+          layout="horizontal"
+          height={height}
+          itemCount={filteredCommitIndices.length}
+          itemData={itemData}
+          itemSize={itemSize}
+          ref={(listRef: any) /* Flow bug? */}
+          width={width}>
+          {SnapshotCommitListItem}
+        </FixedSizeList>
+      </div>
+    </Tooltip>
   );
 }

packages/react-devtools-shared/src/devtools/views/Profiler/SnapshotCommitListItem.css

@@ -7,10 +7,13 @@
   display: flex;
   align-items: flex-end;
 }
+.Outer:hover {
+  background-color: var(--color-background);
+}
 
 .Inner {
   width: 100%;
-  min-height: 5px;
+  min-height: 2px;
   background-color: var(--color-commit-did-not-render-fill);
   color: var(--color-commit-did-not-render-fill-text);
 }

packages/react-devtools-shared/src/devtools/views/Profiler/SnapshotCommitListItem.js

@@ -31,6 +31,7 @@ function SnapshotCommitListItem({data: itemData, index, style}: Props) {
     maxDuration,
     selectedCommitIndex,
     selectCommitIndex,
+    setHoveredCommitIndex,
     startCommitDrag,
   } = itemData;
 
@@ -39,9 +40,21 @@ function SnapshotCommitListItem({data: itemData, index, style}: Props) {
   const commitDuration = commitDurations[index];
   const commitTime = commitTimes[index];
 
-  // Guard against commits with duration 0
-  const percentage =
+  // Use natural log for bar height.
+  // This prevents one (or a few) outliers from squishing the majority of other commits.
+  // So rather than e.g. _█_ we get something more like e.g. ▄█_
+  const heightScale =
+    Math.min(
+      1,
+      Math.max(0, Math.log(commitDuration) / Math.log(maxDuration)),
+    ) || 0;
+
+  // Use a linear scale for color.
+  // This gives some visual contrast between cheaper and more expensive commits
+  // and somewhat compensates for the log scale height.
+  const colorScale =
     Math.min(1, Math.max(0, commitDuration / maxDuration)) || 0;
+
   const isSelected = selectedCommitIndex === index;
 
   // Leave a 1px gap between snapshots
@@ -62,6 +75,7 @@ function SnapshotCommitListItem({data: itemData, index, style}: Props) {
     <div
       className={styles.Outer}
       onMouseDown={handleMouseDown}
+      onMouseEnter={() => setHoveredCommitIndex(index)}
       style={{
         ...style,
         width,
@@ -75,9 +89,9 @@ function SnapshotCommitListItem({data: itemData, index, style}: Props) {
       <div
         className={styles.Inner}
         style={{
-          height: `${Math.round(percentage * 100)}%`,
+          height: `${Math.round(heightScale * 100)}%`,
           backgroundColor:
-            percentage > 0 ? getGradientColor(percentage) : undefined,
+            commitDuration > 0 ? getGradientColor(colorScale) : undefined,
         }}
       />
     </div>

packages/react-devtools-shared/src/devtools/views/Profiler/SnapshotSelector.css

@@ -7,7 +7,7 @@
   height: 100%;
   min-width: 30px;
   margin-left: 0.25rem;
-  overflow: hidden;
+  overflow: visible;
 }
 .Commits:focus {
   outline: none;

packages/react-devtools-shared/src/devtools/views/Profiler/Tooltip.css

@@ -9,6 +9,7 @@
   background-color: var(--color-tooltip-background);
   color: var(--color-tooltip-text);
   opacity: 1;
+  white-space: nowrap;
   /* Make sure this is above the DevTools, which are above the Overlay */
   z-index: 10000002;
 }