[Canvas V2][4/n] Migrate hover and context menus (#34)

MLH-Fellowship · Jul 3, 2020 · c3eb419 · c3eb419
1 parent 92702a9
commit c3eb419
Show file tree

Hide file tree

Showing 8 changed files with 138 additions and 135 deletions.
diff --git a/src/App.js b/src/App.js
@@ -2,15 +2,16 @@
 
 import type {
   FlamechartData,
+  ReactLane,
   ReactProfilerData,
   ReactProfilerDataV2,
 } from './types';
 
 import React, {useState, useCallback} from 'react';
 import {unstable_batchedUpdates} from 'react-dom';
 
-import {getPriorityHeight} from './canvas/canvasUtils';
-import {REACT_PRIORITIES} from './canvas/constants';
+import {getLaneHeight} from './canvas/canvasUtils';
+import {REACT_TOTAL_NUM_LANES} from './constants';
 import ImportPage from './ImportPage';
 import CanvasPage from './CanvasPage';
 
@@ -26,19 +27,8 @@ export default function App() {
   const [schedulerCanvasHeight, setSchedulerCanvasHeight] = useState<number>(0);
 
   const handleDataImported = useCallback(
-    (
-      importedProfilerData: ReactProfilerData,
-      importedFlamechart: FlamechartData,
-    ) => {
-      unstable_batchedUpdates(() => {
-        setSchedulerCanvasHeight(
-          REACT_PRIORITIES.reduce((height, priority) => {
-            return height + getPriorityHeight(importedProfilerData, priority);
-          }, 0),
-        );
-        setProfilerData(importedProfilerData);
-        setFlamechart(importedFlamechart);
-      });
+    (importedProfilerData: ReactProfilerData) => {
+      setProfilerData(importedProfilerData);
     },
   );
 
@@ -51,6 +41,16 @@ export default function App() {
       unstable_batchedUpdates(() => {
         setProfilerDataV2(importedProfilerData);
         setFlamechart(importedFlamechart);
+
+        const lanesToRender: ReactLane[] = Array.from(
+          Array(REACT_TOTAL_NUM_LANES).keys(),
+        );
+        // TODO: Figure out if this is necessary
+        setSchedulerCanvasHeight(
+          lanesToRender.reduce((height, lane) => {
+            return height + getLaneHeight(importedProfilerData, lane);
+          }, 0),
+        );
       });
     },
   );

diff --git a/src/CanvasPage.js b/src/CanvasPage.js
@@ -28,13 +28,12 @@ const CONTEXT_MENU_ID = 'canvas';
 import type {
   FlamechartData,
   ReactHoverContextInfo,
-  ReactMeasure,
   ReactProfilerData,
   ReactProfilerDataV2,
 } from './types';
 
 type ContextMenuContextData = {|
-  data: ReactProfilerData,
+  data: ReactProfilerDataV2,
   flamechart: FlamechartData,
   hoveredEvent: ReactHoverContextInfo | null,
   state: PanAndZoomState,
@@ -73,10 +72,10 @@ function CanvasPage({
   );
 }
 
-const copySummary = (data: ReactProfilerData, measure: ReactMeasure) => {
-  const {batchUID, duration, priority, timestamp, type} = measure;
+const copySummary = (data, measure) => {
+  const {batchUID, duration, timestamp, type} = measure;
 
-  const [startTime, stopTime] = getBatchRange(batchUID, priority, data);
+  const [startTime, stopTime] = getBatchRange(batchUID, data);
 
   copy(
     JSON.stringify({
@@ -88,17 +87,13 @@ const copySummary = (data: ReactProfilerData, measure: ReactMeasure) => {
   );
 };
 
-const zoomToBatch = (
-  data: ReactProfilerData,
-  measure: ReactMeasure,
-  state: PanAndZoomState,
-) => {
+const zoomToBatch = (data, measure, state) => {
   const {zoomTo} = state;
   if (!zoomTo) {
     return;
   }
-  const {batchUID, priority} = measure;
-  const [startTime, stopTime] = getBatchRange(batchUID, priority, data);
+  const {batchUID} = measure;
+  const [startTime, stopTime] = getBatchRange(batchUID, data);
   zoomTo(startTime, stopTime);
 };
 
@@ -135,15 +130,15 @@ function AutoSizedCanvas({
 
   const hoveredEvent = getHoveredEvent(
     schedulerCanvasHeight,
-    data,
+    dataV2,
     flamechart,
     state,
   );
   const [isContextMenuShown, setIsContextMenuShown] = useState<boolean>(false);
 
   useContextMenu<ContextMenuContextData>({
     data: {
-      data,
+      data: dataV2,
       flamechart,
       hoveredEvent,
       state,
@@ -229,7 +224,7 @@ function AutoSizedCanvas({
         }}
       </ContextMenu>
       {!isContextMenuShown && (
-        <EventTooltip data={data} hoveredEvent={hoveredEvent} state={state} />
+        <EventTooltip data={dataV2} hoveredEvent={hoveredEvent} state={state} />
       )}
     </Fragment>
   );

diff --git a/src/EventTooltip.js b/src/EventTooltip.js
@@ -3,9 +3,9 @@
 import type {PanAndZoomState} from './util/usePanAndZoom';
 import type {FlamechartFrame} from './speedscope/lib/flamechart';
 import type {
-  ReactEvent,
-  ReactMeasure,
-  ReactProfilerData,
+  ReactEventV2,
+  ReactMeasureV2,
+  ReactProfilerDataV2,
   ReactHoverContextInfo,
   Return,
 } from './types';
@@ -18,7 +18,7 @@ import useSmartTooltip from './util/useSmartTooltip';
 import styles from './EventTooltip.css';
 
 type Props = {|
-  data: ReactProfilerData,
+  data: ReactProfilerDataV2,
   hoveredEvent: ReactHoverContextInfo | null,
   state: PanAndZoomState,
 |};
@@ -49,6 +49,7 @@ export default function EventTooltip({data, hoveredEvent, state}: Props) {
           />
         );
       case 'schedule-state-update': // eslint-disable-line no-case-declarations
+      case 'schedule-force-update':
         const color = event.isCascading
           ? COLORS.REACT_SCHEDULE_CASCADING_HOVER
           : COLORS.REACT_SCHEDULE_HOVER;
@@ -60,7 +61,9 @@ export default function EventTooltip({data, hoveredEvent, state}: Props) {
             tooltipRef={tooltipRef}
           />
         );
-      case 'suspend':
+      case 'suspense-suspend':
+      case 'suspense-resolved':
+      case 'suspense-rejected':
         return (
           <TooltipReactEvent
             color={COLORS.REACT_SUSPEND_HOVER}
@@ -94,7 +97,6 @@ export default function EventTooltip({data, hoveredEvent, state}: Props) {
   } else if (flamechartNode !== null) {
     return (
       <TooltipFlamechartNode
-        data={data}
         flamechartNode={flamechartNode}
         tooltipRef={tooltipRef}
       />
@@ -114,11 +116,9 @@ function formatComponentStack(componentStack: string): string {
 }
 
 const TooltipFlamechartNode = ({
-  data,
   flamechartNode,
   tooltipRef,
 }: {
-  data: ReactProfilerData,
   flamechartNode: FlamechartFrame,
   tooltipRef: Return<typeof useRef>,
 }) => {
@@ -144,13 +144,11 @@ const TooltipFlamechartNode = ({
 
 const TooltipReactEvent = ({
   color,
-  data,
   event,
   tooltipRef,
 }: {
   color: string,
-  data: ReactProfilerData,
-  event: ReactEvent,
+  event: ReactEventV2,
   tooltipRef: Return<typeof useRef>,
 }) => {
   const {componentName, componentStack, timestamp, type} = event;
@@ -163,9 +161,18 @@ const TooltipReactEvent = ({
     case 'schedule-state-update':
       label = 'state update scheduled';
       break;
-    case 'suspend':
+    case 'schedule-force-update':
+      label = 'force update scheduled';
+      break;
+    case 'suspense-suspend':
       label = 'suspended';
       break;
+    case 'suspense-resolved':
+      label = 'suspense resolved';
+      break;
+    case 'suspense-rejected':
+      label = 'suspense rejected';
+      break;
     default:
       break;
   }
@@ -206,11 +213,11 @@ const TooltipReactMeasure = ({
   measure,
   tooltipRef,
 }: {
-  data: ReactProfilerData,
-  measure: ReactMeasure,
+  data: ReactProfilerDataV2,
+  measure: ReactMeasureV2,
   tooltipRef: Return<typeof useRef>,
 }) => {
-  const {batchUID, duration, priority, timestamp, type} = measure;
+  const {batchUID, duration, timestamp, type} = measure;
 
   let label = null;
   switch (type) {
@@ -233,7 +240,7 @@ const TooltipReactMeasure = ({
       break;
   }
 
-  const [startTime, stopTime] = getBatchRange(batchUID, priority, data);
+  const [startTime, stopTime] = getBatchRange(batchUID, data);
 
   return (
     <div