Improve DevTools Profiler commit-selector UX

1. Replace linear scale for commit durations with log scale. This reduces the impact of one (or few) outlier times on more common smaller durations. 2. Decrease the minimum bar height to make the differences in height more noticeable. 3. Add a backgound hover highlight to increase contrast. 4. Add hover tooltip with commit duration and timestamp.
facebook · Mar 7, 2021 · b5ac359 · b5ac359
1 parent c7b4497
commit b5ac359
Show file tree

Hide file tree

Showing 5 changed files with 49 additions and 17 deletions.
diff --git a/packages/react-devtools-shared/src/devtools/views/Profiler/SnapshotCommitList.js b/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>
   );
 }
diff --git a/packages/react-devtools-shared/src/devtools/views/Profiler/SnapshotCommitListItem.css b/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);
 }
diff --git a/packages/react-devtools-shared/src/devtools/views/Profiler/SnapshotCommitListItem.js b/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;
 
@@ -41,7 +42,10 @@ function SnapshotCommitListItem({data: itemData, index, style}: Props) {
 
   // Guard against commits with duration 0
   const percentage =
-    Math.min(1, Math.max(0, commitDuration / maxDuration)) || 0;
+    Math.min(
+      1,
+      Math.max(0, Math.log(commitDuration) / Math.log(maxDuration)),
+    ) || 0;
   const isSelected = selectedCommitIndex === index;
 
   // Leave a 1px gap between snapshots
@@ -62,6 +66,7 @@ function SnapshotCommitListItem({data: itemData, index, style}: Props) {
     <div
       className={styles.Outer}
       onMouseDown={handleMouseDown}
+      onMouseEnter={() => setHoveredCommitIndex(index)}
       style={{
         ...style,
         width,
@@ -77,7 +82,7 @@ function SnapshotCommitListItem({data: itemData, index, style}: Props) {
         style={{
           height: `${Math.round(percentage * 100)}%`,
           backgroundColor:
-            percentage > 0 ? getGradientColor(percentage) : undefined,
+            commitDuration > 0 ? getGradientColor(percentage) : undefined,
         }}
       />
     </div>

diff --git a/packages/react-devtools-shared/src/devtools/views/Profiler/SnapshotSelector.css b/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;

diff --git a/packages/react-devtools-shared/src/devtools/views/Profiler/Tooltip.css b/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;
 }