Incorporated some interactions feedback from Shirley Wu:

1. Replace interaction commit circles with squares
2. Color commits in both the main and right-side pane based on their duration (to tie into other chart views)
3. Remove click-to-select commit because this surprised Sophie and Shirley initially

Author: Brian Vaughn

plugins/Profiler/views/InteractionTimeline.js

@@ -18,14 +18,13 @@ import React, { PureComponent } from 'react';
 import { FixedSizeList as List } from 'react-window';
 import AutoSizer from 'react-virtualized-auto-sizer';
 import NoInteractionsMessage from './NoInteractionsMessage';
-import { scale } from './constants';
+import { getGradientColor, scale } from './constants';
 
 const INTERACTION_SIZE = 4;
 const ITEM_SIZE = 25;
 const SNAPSHOT_SIZE = 10;
 
 type SelectInteraction = (interaction: Interaction) => void;
-type ViewSnapshot = (snapshot: Snapshot) => void;
 
 type ChartItem = {|
   interaction: Interaction,
@@ -35,6 +34,7 @@ type ChartItem = {|
 
 type ChartData = {|
   items: Array<ChartItem>,
+  maxDuration: number,
   stopTime: number,
 |};
 
@@ -47,38 +47,37 @@ type ItemData = {|
   selectedSnapshot: Snapshot,
   selectInteraction: SelectInteraction,
   theme: Theme,
-  viewSnapshot: ViewSnapshot,
 |};
 
 type Props = {|
   cacheInteractionData: CacheInteractionData,
   getCachedInteractionData: GetCachedInteractionData,
   hasMultipleRoots: boolean,
   interactionsToSnapshots: Map<Interaction, Set<Snapshot>>,
+  maxDuration: number,
   selectedInteraction: Interaction | null,
   selectedSnapshot: Snapshot,
   selectInteraction: SelectInteraction,
   theme: Theme,
   timestampsToInteractions: Map<number, Set<Interaction>>,
-  viewSnapshot: ViewSnapshot,
 |};
 
 const InteractionTimeline = ({
   cacheInteractionData,
   getCachedInteractionData,
   hasMultipleRoots,
   interactionsToSnapshots,
+  maxDuration,
   selectedInteraction,
   selectedSnapshot,
   selectInteraction,
   theme,
   timestampsToInteractions,
-  viewSnapshot,
 }: Props) => {
   // Cache data in ProfilerStore so we only have to compute it the first time the interactions tab is shown
   let chartData = getCachedInteractionData(selectedSnapshot.root);
   if (chartData === null) {
-    chartData = getChartData(interactionsToSnapshots, timestampsToInteractions);
+    chartData = getChartData(interactionsToSnapshots, maxDuration, timestampsToInteractions);
     cacheInteractionData(selectedSnapshot.root, chartData);
   }
 
@@ -94,7 +93,6 @@ const InteractionTimeline = ({
           selectInteraction={selectInteraction}
           theme={theme}
           width={width}
-          viewSnapshot={viewSnapshot}
         />
       )}
     </AutoSizer>
@@ -109,7 +107,6 @@ type InteractionsListProps = {|
   selectedSnapshot: Snapshot,
   selectInteraction: SelectInteraction,
   theme: Theme,
-  viewSnapshot: ViewSnapshot,
   width: number,
 |};
 
@@ -153,7 +150,6 @@ class InteractionsList extends PureComponent<InteractionsListProps, void> {
       selectedSnapshot,
       selectInteraction,
       theme,
-      viewSnapshot,
       width,
     } = this.props;
 
@@ -176,7 +172,6 @@ class InteractionsList extends PureComponent<InteractionsListProps, void> {
       selectedSnapshot,
       selectInteraction,
       theme,
-      viewSnapshot,
       width,
     );
 
@@ -214,44 +209,36 @@ type ListItemProps = {|
 |};
 type ListItemState = {|
   isHovered: boolean,
-  hoveredSnapshot: Snapshot | null,
 |};
 
 class ListItem extends PureComponent<ListItemProps, ListItemState> {
   state = {
     isHovered: false,
-    hoveredSnapshot: null,
   };
 
-  handleMouseEnter = (snapshot: Snapshot | null) => this.setState({
-    isHovered: true,
-    hoveredSnapshot: snapshot,
-  });
-
+  handleMouseEnter = () => this.setState({isHovered: true});
   handleMouseLeave = () => this.setState({isHovered: false});
 
   render() {
     const { data: itemData, index: itemIndex, style } = this.props;
-    const { isHovered, hoveredSnapshot } = this.state;
+    const { isHovered } = this.state;
 
     const { chartData, labelColumnWidth, scaleX, selectedInteraction, selectedSnapshot, theme } = itemData;
-    const { items } = chartData;
+    const { items, maxDuration } = chartData;
 
     const item: ChartItem = items[itemIndex];
     const { interaction, lastSnapshotCommitTime } = item;
 
-    const showRowHover = isHovered && hoveredSnapshot === null;
-
     return (
       <div
         onClick={() => itemData.selectInteraction(interaction)}
-        onMouseEnter={() => this.handleMouseEnter(null)}
+        onMouseEnter={this.handleMouseEnter}
         onMouseLeave={this.handleMouseLeave}
         style={{
           ...style,
           display: 'flex',
           alignItems: 'center',
-          backgroundColor: showRowHover ? theme.state03 : (selectedInteraction === interaction ? theme.base01 : 'transparent'),
+          backgroundColor: isHovered ? theme.state03 : (selectedInteraction === interaction ? theme.base01 : 'transparent'),
           borderBottom: `1px solid ${theme.base01}`,
           cursor: 'pointer',
         }}
@@ -265,8 +252,8 @@ class ListItem extends PureComponent<ListItemProps, ListItemState> {
             lineHeight: `${ITEM_SIZE}px`,
             boxSizing: 'border-box',
             padding: '0 0.25rem',
-            color: showRowHover ? theme.state00 : theme.base05,
-            textDecoration: showRowHover ? 'underline' : 'none',
+            color: isHovered ? theme.state00 : theme.base05,
+            textDecoration: isHovered ? 'underline' : 'none',
             userSelect: 'none',
           }}
           title={interaction.name}
@@ -283,32 +270,35 @@ class ListItem extends PureComponent<ListItemProps, ListItemState> {
             borderRadius: '0.125rem',
           }}
         />
-        {item.snapshots.map((snapshot, snapshotIndex) => (
-          <div
-            key={snapshotIndex}
-            onClick={() => itemData.viewSnapshot(snapshot)}
-            onMouseEnter={() => this.handleMouseEnter(snapshot)}
-            onMouseLeave={() => this.handleMouseEnter(null)}
-            style={{
-              position: 'absolute',
-              left: `${labelColumnWidth + scaleX(snapshot.commitTime)}px`,
-              width: `${SNAPSHOT_SIZE}px`,
-              height: `${SNAPSHOT_SIZE}px`,
-              borderRadius: `${SNAPSHOT_SIZE}px`,
-              backgroundColor: hoveredSnapshot === snapshot || selectedSnapshot === snapshot ? theme.state00 : theme.base00,
-              border: `2px solid ${theme.state00}`,
-              boxSizing: 'border-box',
-              cursor: 'pointer',
-            }}
-          />
-        ))}
+        {item.snapshots.map((snapshot, snapshotIndex) => {
+          // Guard against commits with duration 0
+          const percentage = Math.min(1, Math.max(0, snapshot.duration / maxDuration)) || 0;
+
+          return (
+            <div
+              key={snapshotIndex}
+              style={{
+                position: 'absolute',
+                left: `${labelColumnWidth + scaleX(snapshot.commitTime)}px`,
+                width: `${SNAPSHOT_SIZE}px`,
+                height: `${SNAPSHOT_SIZE}px`,
+                backgroundColor: selectedSnapshot === snapshot
+                  ? theme.state06
+                  : getGradientColor(percentage),
+                boxSizing: 'border-box',
+                cursor: 'pointer',
+              }}
+            />
+          );
+        })}
       </div>
     );
   }
 }
 
 const getChartData = memoize((
   interactionsToSnapshots: Map<Interaction, Set<Snapshot>>,
+  maxDuration: number,
   timestampsToInteractions: Map<number, Set<Interaction>>,
 ): ChartData => {
   const items: Array<ChartItem> = [];
@@ -332,6 +322,7 @@ const getChartData = memoize((
 
   return {
     items,
+    maxDuration,
     stopTime,
   };
 });
@@ -342,7 +333,6 @@ const getItemData = memoize((
   selectedSnapshot: Snapshot,
   selectInteraction: SelectInteraction,
   theme: Theme,
-  viewSnapshot: ViewSnapshot,
   width: number,
 ): ItemData => {
   const labelColumnWidth = Math.min(200, width / 5);
@@ -357,7 +347,6 @@ const getItemData = memoize((
     selectedSnapshot,
     selectInteraction,
     theme,
-    viewSnapshot,
   };
 });
 

plugins/Profiler/views/ProfilerInteractionDetailPane.js

@@ -14,14 +14,15 @@ import type {Theme} from '../../../frontend/types';
 import type {Interaction, Snapshot} from '../ProfilerTypes';
 
 import React, {Fragment} from 'react';
-import { formatDuration, formatPercentage, formatTime } from './constants';
+import { getGradientColor, formatDuration, formatTime } from './constants';
 import {sansSerif} from '../../../frontend/Themes/Fonts';
 import Hoverable from '../../../frontend/Hoverable';
 
 type ViewSnapshot = (snapshot: Snapshot) => void;
 
 type Props = {|
   interaction: Interaction,
+  maxDuration: number,
   selectedSnapshot: Snapshot | null,
   snapshots: Set<Snapshot>,
   theme: Theme,
@@ -30,6 +31,7 @@ type Props = {|
 
 const ProfilerInteractionDetailPane = ({
   interaction,
+  maxDuration,
   selectedSnapshot,
   snapshots,
   theme,
@@ -50,16 +52,19 @@ const ProfilerInteractionDetailPane = ({
           overflow: 'hidden',
           textOverflow: 'ellipsis',
           whiteSpace: 'nowrap',
+          display: 'flex',
+          justifyContent: 'space-between',
         }}
         title={interaction.name}
       >
-        {interaction.name}
+        {interaction.name} at {formatTime(interaction.timestamp)}s
       </div>
       <div style={{
         padding: '0.5rem',
       }}>
-        <div><strong>Timestamp</strong>: {formatTime(interaction.timestamp)}s</div>
-        <div style={{margin: '0.5rem 0'}}><strong>Renders</strong>:</div>
+        <div style={{marginBottom: '0.5rem'}}>
+          <strong>Commits</strong>:
+        </div>
         <ul style={{
           listStyle: 'none',
           margin: 0,
@@ -72,6 +77,7 @@ const ProfilerInteractionDetailPane = ({
             return (
               <SnapshotLink
                 key={index}
+                maxDuration={maxDuration}
                 onClick={() => viewSnapshot(snapshot)}
                 previousTimestamp={previousTimestamp}
                 selectedSnapshot={selectedSnapshot}
@@ -89,6 +95,7 @@ const ProfilerInteractionDetailPane = ({
 
 const SnapshotLink = Hoverable(({
   isHovered,
+  maxDuration,
   onClick,
   onMouseEnter,
   onMouseLeave,
@@ -98,9 +105,6 @@ const SnapshotLink = Hoverable(({
   theme,
   viewSnapshot,
 }) => {
-  const cpuPercentage = Math.max(0, Math.min(snapshot.duration / (snapshot.commitTime - previousTimestamp)));
-  const cpuSvg = CPU_SVGS[Math.round(cpuPercentage * (CPU_SVGS.length - 1))];
-
   return (
     <li
       onClick={onClick}
@@ -114,59 +118,26 @@ const SnapshotLink = Hoverable(({
         display: 'flex',
         alignItems: 'center',
         padding: '0.5rem',
-        borderBottom: `1px solid ${theme.base01}`,
+        borderTop: `1px solid ${theme.base01}`,
       }}
     >
-      {cpuSvg}
+      <div
+        style={{
+          width: '1rem',
+          height: '1rem',
+          backgroundColor: getGradientColor(snapshot.duration / maxDuration),
+        }}
+      />
       <ul style={{paddingLeft: '1.5rem'}}>
-        <li>Timestamp: {formatTime(snapshot.commitTime)}s</li>
-        <li>Duration: {formatDuration(snapshot.duration)}ms</li>
-        <li>CPU: {formatPercentage(cpuPercentage)}%</li>
+        <li style={{marginBottom: '0.25rem'}}>
+          Timestamp: {formatTime(snapshot.commitTime)}s
+        </li>
+        <li>
+          Duration: {formatDuration(snapshot.duration)}ms
+        </li>
       </ul>
     </li>
   );
 });
 
-const CPU_STYLE = {
-  width: '1.5rem',
-  height: '1.5rem',
-  fill: 'currentColor',
-  marginRight: '0.5rem',
-};
-
-const CPU_0 = (
-  <svg style={CPU_STYLE} viewBox="0 0 24 24">
-    <path fillOpacity=".3" d="M2 22h20V2z" />
-  </svg>
-);
-
-const CPU_25 = (
-  <svg style={CPU_STYLE} viewBox="0 0 24 24">
-    <path fillOpacity=".3" d="M2 22h20V2z" />
-    <path d="M12 12L2 22h10z" />
-  </svg>
-);
-
-const CPU_50 = (
-  <svg style={CPU_STYLE} viewBox="0 0 24 24">
-    <path fillOpacity=".3" d="M2 22h20V2z" />
-    <path d="M14 10L2 22h12z" />
-  </svg>
-);
-
-const CPU_75 = (
-  <svg style={CPU_STYLE} viewBox="0 0 24 24">
-    <path fillOpacity=".3" d="M2 22h20V2z" />
-    <path d="M17 7L2 22h15z" />
-  </svg>
-);
-
-const CPU_100 = (
-  <svg style={CPU_STYLE} viewBox="0 0 24 24">
-    <path d="M2 22h20V2z" />
-  </svg>
-);
-
-const CPU_SVGS = [CPU_0, CPU_25, CPU_50, CPU_75, CPU_100];
-
 export default ProfilerInteractionDetailPane;