Added Network measures to the Scheduling Profiler

Also slightly refactored the preprocessData data function to split separate sections out into helper functions for readability. (We can do more of this for other mark types in a follow up commit.)

packages/react-devtools-scheduling-profiler/src/CanvasPage.js

@@ -44,6 +44,7 @@ import {
   ComponentMeasuresView,
   FlamechartView,
   NativeEventsView,
+  NetworkMeasuresView,
   ReactMeasuresView,
   SchedulingEventsView,
   SnapshotsView,
@@ -128,6 +129,18 @@ const zoomToBatch = (
   viewState.updateHorizontalScrollState(scrollState);
 };
 
+const EMPTY_CONTEXT_INFO: ReactHoverContextInfo = {
+  componentMeasure: null,
+  flamechartStackFrame: null,
+  measure: null,
+  nativeEvent: null,
+  networkMeasure: null,
+  schedulingEvent: null,
+  snapshot: null,
+  suspenseEvent: null,
+  userTimingMark: null,
+};
+
 type AutoSizedCanvasProps = {|
   data: ReactProfilerData,
   height: number,
@@ -150,14 +163,20 @@ function AutoSizedCanvas({
     setHoveredEvent,
   ] = useState<ReactHoverContextInfo | null>(null);
 
-  const surfaceRef = useRef(new Surface());
+  const resetHoveredEvent = useCallback(
+    () => setHoveredEvent(EMPTY_CONTEXT_INFO),
+    [],
+  );
+
+  const surfaceRef = useRef(new Surface(resetHoveredEvent));
   const userTimingMarksViewRef = useRef(null);
   const nativeEventsViewRef = useRef(null);
   const schedulingEventsViewRef = useRef(null);
   const suspenseEventsViewRef = useRef(null);
   const componentMeasuresViewRef = useRef(null);
   const reactMeasuresViewRef = useRef(null);
   const flamechartViewRef = useRef(null);
+  const networkMeasuresViewRef = useRef(null);
   const snapshotsViewRef = useRef(null);
 
   const {hideMenu: hideContextMenu} = useContext(RegistryContext);
@@ -318,6 +337,22 @@ function AutoSizedCanvas({
       );
     }
 
+    let networkMeasuresViewWrapper = null;
+    if (data.snapshots.length > 0) {
+      const networkMeasuresView = new NetworkMeasuresView(
+        surface,
+        defaultFrame,
+        data,
+      );
+      networkMeasuresViewRef.current = networkMeasuresView;
+      networkMeasuresViewWrapper = createViewHelper(
+        networkMeasuresView,
+        'network',
+        true,
+        true,
+      );
+    }
+
     const flamechartView = new FlamechartView(
       surface,
       defaultFrame,
@@ -357,6 +392,9 @@ function AutoSizedCanvas({
     if (snapshotsViewWrapper !== null) {
       rootView.addSubview(snapshotsViewWrapper);
     }
+    if (networkMeasuresViewWrapper !== null) {
+      rootView.addSubview(networkMeasuresViewWrapper);
+    }
     rootView.addSubview(flamechartViewWrapper);
 
     const verticalScrollOverflowView = new VerticalScrollOverflowView(
@@ -395,16 +433,18 @@ function AutoSizedCanvas({
             prevHoverEvent.flamechartStackFrame !== null ||
             prevHoverEvent.measure !== null ||
             prevHoverEvent.nativeEvent !== null ||
+            prevHoverEvent.networkMeasure !== null ||
             prevHoverEvent.schedulingEvent !== null ||
+            prevHoverEvent.snapshot !== null ||
             prevHoverEvent.suspenseEvent !== null ||
             prevHoverEvent.userTimingMark !== null
           ) {
             return {
               componentMeasure: null,
-              data: prevHoverEvent.data,
               flamechartStackFrame: null,
               measure: null,
               nativeEvent: null,
+              networkMeasure: null,
               schedulingEvent: null,
               snapshot: null,
               suspenseEvent: null,
@@ -460,10 +500,10 @@ function AutoSizedCanvas({
         if (!hoveredEvent || hoveredEvent.userTimingMark !== userTimingMark) {
           setHoveredEvent({
             componentMeasure: null,
-            data,
             flamechartStackFrame: null,
             measure: null,
             nativeEvent: null,
+            networkMeasure: null,
             schedulingEvent: null,
             snapshot: null,
             suspenseEvent: null,
@@ -479,10 +519,10 @@ function AutoSizedCanvas({
         if (!hoveredEvent || hoveredEvent.nativeEvent !== nativeEvent) {
           setHoveredEvent({
             componentMeasure: null,
-            data,
             flamechartStackFrame: null,
             measure: null,
             nativeEvent,
+            networkMeasure: null,
             schedulingEvent: null,
             snapshot: null,
             suspenseEvent: null,
@@ -498,10 +538,10 @@ function AutoSizedCanvas({
         if (!hoveredEvent || hoveredEvent.schedulingEvent !== schedulingEvent) {
           setHoveredEvent({
             componentMeasure: null,
-            data,
             flamechartStackFrame: null,
             measure: null,
             nativeEvent: null,
+            networkMeasure: null,
             schedulingEvent,
             snapshot: null,
             suspenseEvent: null,
@@ -517,10 +557,10 @@ function AutoSizedCanvas({
         if (!hoveredEvent || hoveredEvent.suspenseEvent !== suspenseEvent) {
           setHoveredEvent({
             componentMeasure: null,
-            data,
             flamechartStackFrame: null,
             measure: null,
             nativeEvent: null,
+            networkMeasure: null,
             schedulingEvent: null,
             snapshot: null,
             suspenseEvent,
@@ -536,10 +576,10 @@ function AutoSizedCanvas({
         if (!hoveredEvent || hoveredEvent.measure !== measure) {
           setHoveredEvent({
             componentMeasure: null,
-            data,
             flamechartStackFrame: null,
             measure,
             nativeEvent: null,
+            networkMeasure: null,
             schedulingEvent: null,
             snapshot: null,
             suspenseEvent: null,
@@ -558,10 +598,10 @@ function AutoSizedCanvas({
         ) {
           setHoveredEvent({
             componentMeasure,
-            data,
             flamechartStackFrame: null,
             measure: null,
             nativeEvent: null,
+            networkMeasure: null,
             schedulingEvent: null,
             snapshot: null,
             suspenseEvent: null,
@@ -577,10 +617,10 @@ function AutoSizedCanvas({
         if (!hoveredEvent || hoveredEvent.snapshot !== snapshot) {
           setHoveredEvent({
             componentMeasure: null,
-            data,
             flamechartStackFrame: null,
             measure: null,
             nativeEvent: null,
+            networkMeasure: null,
             schedulingEvent: null,
             snapshot,
             suspenseEvent: null,
@@ -599,10 +639,10 @@ function AutoSizedCanvas({
         ) {
           setHoveredEvent({
             componentMeasure: null,
-            data,
             flamechartStackFrame,
             measure: null,
             nativeEvent: null,
+            networkMeasure: null,
             schedulingEvent: null,
             snapshot: null,
             suspenseEvent: null,
@@ -611,53 +651,79 @@ function AutoSizedCanvas({
         }
       });
     }
+
+    const {current: networkMeasuresView} = networkMeasuresViewRef;
+    if (networkMeasuresView) {
+      networkMeasuresView.onHover = networkMeasure => {
+        if (!hoveredEvent || hoveredEvent.networkMeasure !== networkMeasure) {
+          setHoveredEvent({
+            componentMeasure: null,
+            flamechartStackFrame: null,
+            measure: null,
+            nativeEvent: null,
+            networkMeasure,
+            schedulingEvent: null,
+            snapshot: null,
+            suspenseEvent: null,
+            userTimingMark: null,
+          });
+        }
+      };
+    }
   }, [
     hoveredEvent,
     data, // Attach onHover callbacks when views are re-created on data change
   ]);
 
   useLayoutEffect(() => {
-    const {current: userTimingMarksView} = userTimingMarksViewRef;
+    const userTimingMarksView = userTimingMarksViewRef.current;
     if (userTimingMarksView) {
       userTimingMarksView.setHoveredMark(
         hoveredEvent ? hoveredEvent.userTimingMark : null,
       );
     }
 
-    const {current: nativeEventsView} = nativeEventsViewRef;
+    const nativeEventsView = nativeEventsViewRef.current;
     if (nativeEventsView) {
       nativeEventsView.setHoveredEvent(
         hoveredEvent ? hoveredEvent.nativeEvent : null,
       );
     }
 
-    const {current: schedulingEventsView} = schedulingEventsViewRef;
+    const schedulingEventsView = schedulingEventsViewRef.current;
     if (schedulingEventsView) {
       schedulingEventsView.setHoveredEvent(
         hoveredEvent ? hoveredEvent.schedulingEvent : null,
       );
     }
 
-    const {current: suspenseEventsView} = suspenseEventsViewRef;
+    const suspenseEventsView = suspenseEventsViewRef.current;
     if (suspenseEventsView) {
       suspenseEventsView.setHoveredEvent(
         hoveredEvent ? hoveredEvent.suspenseEvent : null,
       );
     }
 
-    const {current: reactMeasuresView} = reactMeasuresViewRef;
+    const reactMeasuresView = reactMeasuresViewRef.current;
     if (reactMeasuresView) {
       reactMeasuresView.setHoveredMeasure(
         hoveredEvent ? hoveredEvent.measure : null,
       );
     }
 
-    const {current: flamechartView} = flamechartViewRef;
+    const flamechartView = flamechartViewRef.current;
     if (flamechartView) {
       flamechartView.setHoveredFlamechartStackFrame(
         hoveredEvent ? hoveredEvent.flamechartStackFrame : null,
       );
     }
+
+    const networkMeasuresView = networkMeasuresViewRef.current;
+    if (networkMeasuresView) {
+      networkMeasuresView.setHoveredEvent(
+        hoveredEvent ? hoveredEvent.networkMeasure : null,
+      );
+    }
   }, [hoveredEvent]);
 
   // Draw to canvas in React's commit phase
@@ -677,6 +743,7 @@ function AutoSizedCanvas({
             componentMeasure,
             flamechartStackFrame,
             measure,
+            networkMeasure,
             schedulingEvent,
             suspenseEvent,
           } = contextData.hoveredEvent;
@@ -689,6 +756,13 @@ function AutoSizedCanvas({
                   Copy component name
                 </ContextMenuItem>
               )}
+              {networkMeasure !== null && (
+                <ContextMenuItem
+                  onClick={() => copy(networkMeasure.url)}
+                  title="Copy URL">
+                  Copy URL
+                </ContextMenuItem>
+              )}
               {schedulingEvent !== null && (
                 <ContextMenuItem
                   onClick={() => copy(schedulingEvent.componentName)}

packages/react-devtools-scheduling-profiler/src/EventTooltip.css

@@ -3,10 +3,10 @@
 }
 
 .TooltipSection,
-.TooltipWarningSection {
+.TooltipWarningSection,
+.SingleLineTextSection {
   display: block;
   border-radius: 0.125rem;
-  max-width: 300px;
   padding: 0.25rem;
   user-select: none;
   pointer-events: none;
@@ -19,6 +19,13 @@
   margin-top: 0.25rem;
   background-color: var(--color-warning-background);
 }
+.TooltipSection,
+.TooltipWarningSection {
+  max-width: 300px;
+}
+.SingleLineTextSection {
+  white-space: nowrap;
+}
 
 .Divider {
   height: 1px;
@@ -75,4 +82,8 @@
 
 .Image {
   border: 1px solid var(--color-border);
+}
+
+.DimText {
+  color: var(--color-dim);
 }