Skip to content

Commit

Permalink
Improve DevTools Profiler commit-selector UX (facebook#20943)
Browse files Browse the repository at this point in the history
* Improve DevTools Profiler commit-selector UX

1. Use natural log of durations (rather than linear) when calculating bar height. This reduces the impact of one (or few) outlier times on more common smaller durations. (Continue to use linear for bar color though.)
2. Decrease the minimum bar height to make the differences in height more noticeable.
3. Add a background hover highlight to increase contrast.
4. Add hover tooltip with commit duration and timestamp.
  • Loading branch information
Brian Vaughn authored and koto committed Jun 15, 2021
1 parent e3d029e commit ba9f471
Show file tree
Hide file tree
Showing 5 changed files with 60 additions and 19 deletions.
Original file line number Diff line number Diff line change
Expand Up @@ -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';

Expand All @@ -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,
|};

Expand Down Expand Up @@ -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>(
() => ({
Expand All @@ -176,6 +183,7 @@ function List({
selectedCommitIndex,
selectedFilteredCommitIndex,
selectCommitIndex,
setHoveredCommitIndex,
startCommitDrag: setDragState,
}),
[
Expand All @@ -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>
);
}
Original file line number Diff line number Diff line change
Expand Up @@ -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);
}
Original file line number Diff line number Diff line change
Expand Up @@ -31,6 +31,7 @@ function SnapshotCommitListItem({data: itemData, index, style}: Props) {
maxDuration,
selectedCommitIndex,
selectCommitIndex,
setHoveredCommitIndex,
startCommitDrag,
} = itemData;

Expand All @@ -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
Expand All @@ -62,6 +75,7 @@ function SnapshotCommitListItem({data: itemData, index, style}: Props) {
<div
className={styles.Outer}
onMouseDown={handleMouseDown}
onMouseEnter={() => setHoveredCommitIndex(index)}
style={{
...style,
width,
Expand All @@ -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>
Expand Down
Original file line number Diff line number Diff line change
Expand Up @@ -7,7 +7,7 @@
height: 100%;
min-width: 30px;
margin-left: 0.25rem;
overflow: hidden;
overflow: visible;
}
.Commits:focus {
outline: none;
Expand Down
Original file line number Diff line number Diff line change
Expand Up @@ -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;
}
Expand Down

0 comments on commit ba9f471

Please sign in to comment.