Profiler tweaks (#1105)

* Fixed a potential null prop access bug in SnapshotSelector

* Fixed horizontal padding nit Sophie mentioned

* Tweaked duration rounding

* Changed label when filtered fiber isn't in the selector to -/X

* "Render count" -> "Total renders"

* Snapshot selector shouldnt wrap around

* Time -> Timestamp

* Hide snapshot selector when viewing Interactions tab

Author: bvaughn

plugins/Profiler/views/FiberRenderDurations.js

@@ -193,11 +193,11 @@ class ListItem extends PureComponent<any, void> {
         height={safeHeight}
         isDimmed={node.parentSnapshot === selectedSnapshot}
         key={index}
-        label={`${node.value.toFixed(2)}ms`}
+        label={`${node.value.toFixed(1)}ms`}
         onClick={() => selectSnapshot(node.parentSnapshot)}
         onDoubleClick={stopInspecting}
         theme={theme}
-        title={`${node.value}ms`}
+        title={`${node.value.toFixed(3)}ms`}
         width={width}
         x={left}
         y={height - safeHeight}

plugins/Profiler/views/ProfilerFiberDetailPane.js

@@ -101,7 +101,7 @@ const ProfilerFiberDetailPane = ({
           fontSize: monospace.sizes.normal,
           fontFamily: monospace.family,
         }}>
-          <strong>Render count</strong>: {snapshotFiber.get('renders')}
+          <strong>Total renders</strong>: {snapshotFiber.get('renders')}
         </div>
         <DetailPane theme={theme}>
           <DetailPaneSection title="Props">

plugins/Profiler/views/ProfilerInteractionDetailPane.js

@@ -58,7 +58,7 @@ const ProfilerInteractionDetailPane = ({
       <div style={{
         padding: '0.5rem',
       }}>
-        <div><strong>Time</strong>: {formatTime(interaction.timestamp)}s</div>
+        <div><strong>Timestamp</strong>: {formatTime(interaction.timestamp)}s</div>
         <div style={{margin: '0.5rem 0'}}><strong>Renders</strong>:</div>
         <ul style={{
           listStyle: 'none',
@@ -119,8 +119,8 @@ const SnapshotLink = Hoverable(({
     >
       {cpuSvg}
       <ul style={{paddingLeft: '1.5rem'}}>
+        <li>Timestamp: {formatTime(snapshot.commitTime)}s</li>
         <li>Duration: {formatDuration(snapshot.duration)}ms</li>
-        <li>Time: {formatTime(snapshot.commitTime)}s</li>
         <li>CPU: {formatPercentage(cpuPercentage)}%</li>
       </ul>
     </li>

plugins/Profiler/views/ProfilerTabToolbar.js

@@ -162,19 +162,23 @@ const ProfilerTabToolbar = ({
           theme={theme}
         />
 
-        <HRule theme={theme} />
+        {selectedChartType !== 'interactions' && (
+          <Fragment>
+            <HRule theme={theme} />
 
-        <SnapshotSelector
-          commitThreshold={commitThreshold}
-          hideCommitsBelowThreshold={hideCommitsBelowThreshold}
-          isInspectingSelectedFiber={isInspectingSelectedFiber}
-          selectedFiberID={selectedFiberID}
-          selectedSnapshot={selectedSnapshot}
-          selectSnapshot={selectSnapshot}
-          snapshotIndex={snapshotIndex}
-          snapshots={snapshots}
-          theme={theme}
-        />
+            <SnapshotSelector
+              commitThreshold={commitThreshold}
+              hideCommitsBelowThreshold={hideCommitsBelowThreshold}
+              isInspectingSelectedFiber={isInspectingSelectedFiber}
+              selectedFiberID={selectedFiberID}
+              selectedSnapshot={selectedSnapshot}
+              selectSnapshot={selectSnapshot}
+              snapshotIndex={snapshotIndex}
+              snapshots={snapshots}
+              theme={theme}
+            />
+          </Fragment>
+        )}
       </Fragment>
     )}
   </div>
@@ -185,7 +189,7 @@ const HRule = ({ theme }) => (
     height: '18px',
     width: '1px',
     backgroundColor: theme.base03,
-    margin: '0 0.5rem',
+    margin: '0px 0.5rem 0 0.25rem',
   }} />
 );
 

plugins/Profiler/views/SnapshotFlamegraph.js

@@ -266,11 +266,11 @@ class ListItem extends PureComponent<any, void> {
               height={barHeight}
               isDimmed={index < focusedNodeIndex}
               key={id}
-              label={didRender ? `${name} (${actualDuration.toFixed(2)}ms)` : name}
+              label={didRender ? `${name} (${actualDuration.toFixed(1)}ms)` : name}
               onClick={this.handleClick.bind(this, id, name)}
               onDoubleClick={this.handleDoubleClick.bind(this, id, name)}
               theme={itemData.theme}
-              title={didRender ? `${name} (${actualDuration}ms)` : name}
+              title={didRender ? `${name} (${actualDuration.toFixed(3)}ms)` : name}
               width={nodeWidth}
               x={nodeX - focusedNodeX}
               y={top}

plugins/Profiler/views/SnapshotRanked.js

@@ -258,9 +258,9 @@ const convertSnapshotToChartData = (snapshot: Snapshot, showNativeNodes: boolean
 
       return {
         id: node.id,
-        label: `${name} (${node.actualDuration.toFixed(2)}ms)`,
+        label: `${name} (${node.actualDuration.toFixed(1)}ms)`,
         name,
-        title: `${name} (${node.actualDuration}ms)`,
+        title: `${name} (${node.actualDuration.toFixed(3)}ms)`,
         value: node.actualDuration,
       };
     })

plugins/Profiler/views/SnapshotSelector.js

@@ -115,11 +115,11 @@ class SnapshotSelectorWrapper extends PureComponent<Props, void> {
       snapshots,
     } = this.props;
 
-    if (snapshots.length > 0) {
-      const newIndex = snapshotIndex < snapshots.length - 1
-        ? snapshotIndex + 1
-        : 0;
-
+    if (
+      snapshots.length > 0 &&
+      snapshotIndex < snapshots.length - 1
+    ) {
+      const newIndex = snapshotIndex + 1;
       selectSnapshot(snapshots[newIndex]);
     }
   };
@@ -131,11 +131,11 @@ class SnapshotSelectorWrapper extends PureComponent<Props, void> {
       snapshots,
     } = this.props;
 
-    if (snapshots.length > 0) {
-      const newIndex = snapshotIndex > 0
-        ? snapshotIndex - 1
-        : snapshots.length - 1;
-
+    if (
+      snapshots.length > 0 &&
+      snapshotIndex > 0
+    ) {
+      const newIndex = snapshotIndex - 1;
       selectSnapshot(snapshots[newIndex]);
     }
   };
@@ -173,11 +173,11 @@ class SnapshotSelectorWrapper extends PureComponent<Props, void> {
         )}
         {numSnapshots > 0 && (
           <span style={{whiteSpace: 'nowrap'}}>
-            {`${snapshotIndex + 1}`.padStart(`${numSnapshots}`.length, '0')} / {numSnapshots}
+            {`${snapshotIndex >= 0 ? snapshotIndex + 1 : '-'}`.padStart(`${numSnapshots}`.length, '0')} / {numSnapshots}
           </span>
         )}
         <IconButton
-          disabled={numSnapshots === 0}
+          disabled={snapshotIndex <= 0}
           icon={Icons.BACK}
           isTransparent={true}
           onClick={this.selectPreviousSnapshotIndex}
@@ -196,7 +196,7 @@ class SnapshotSelectorWrapper extends PureComponent<Props, void> {
           theme={theme}
         />
         <IconButton
-          disabled={numSnapshots === 0}
+          disabled={numSnapshots === 0 || snapshotIndex >= numSnapshots - 1}
           icon={Icons.FORWARD}
           isTransparent={true}
           onClick={this.selectNextSnapshotIndex}
@@ -271,7 +271,10 @@ class SnapshotSelector extends PureComponent<SnapshotSelectorProps, SnapshotSele
 
   componentDidUpdate(prevProps) {
     // Make sure any newly selected snapshot is visible within the list.
-    if (this.props.snapshotIndex !== prevProps.snapshotIndex) {
+    if (
+      this.props.snapshotIndex !== prevProps.snapshotIndex &&
+      this.listRef.current !== null
+    ) {
       this.listRef.current.scrollToItem(this.props.snapshotIndex);
     }
   }

plugins/Profiler/views/constants.js

@@ -79,7 +79,7 @@ export const getFilteredSnapshotData = memoize((
   const filteredSnapshotIndex = filteredSnapshots.indexOf(selectedSnapshot);
 
   return {
-    snapshotIndex: filteredSnapshotIndex >= 0 ? filteredSnapshotIndex : 0,
+    snapshotIndex: filteredSnapshotIndex,
     snapshots: filteredSnapshots,
   };
 });