Rename all *V2

src/App.js

@@ -1,6 +1,6 @@
 // @flow
 
-import type {FlamechartData, ReactLane, ReactProfilerDataV2} from './types';
+import type {FlamechartData, ReactLane, ReactProfilerData} from './types';
 
 import React, {useState, useCallback} from 'react';
 import {unstable_batchedUpdates} from 'react-dom';
@@ -11,20 +11,19 @@ import ImportPage from './ImportPage';
 import CanvasPage from './CanvasPage';
 
 export default function App() {
-  const [
-    profilerDataV2,
-    setProfilerDataV2,
-  ] = useState<ReactProfilerDataV2 | null>(null);
+  const [profilerData, setProfilerData] = useState<ReactProfilerData | null>(
+    null,
+  );
   const [flamechart, setFlamechart] = useState<FlamechartData | null>(null);
   const [schedulerCanvasHeight, setSchedulerCanvasHeight] = useState<number>(0);
 
-  const handleDataImportedV2 = useCallback(
+  const handleDataImported = useCallback(
     (
-      importedProfilerData: ReactProfilerDataV2,
+      importedProfilerData: ReactProfilerData,
       importedFlamechart: FlamechartData,
     ) => {
       unstable_batchedUpdates(() => {
-        setProfilerDataV2(importedProfilerData);
+        setProfilerData(importedProfilerData);
         setFlamechart(importedFlamechart);
 
         const lanesToRender: ReactLane[] = Array.from(
@@ -40,15 +39,15 @@ export default function App() {
     },
   );
 
-  if (profilerDataV2 && flamechart) {
+  if (profilerData && flamechart) {
     return (
       <CanvasPage
-        profilerDataV2={profilerDataV2}
+        profilerData={profilerData}
         flamechart={flamechart}
         schedulerCanvasHeight={schedulerCanvasHeight}
       />
     );
   } else {
-    return <ImportPage onDataImportedV2={handleDataImportedV2} />;
+    return <ImportPage onDataImported={handleDataImported} />;
   }
 }

src/CanvasPage.js

@@ -28,35 +28,31 @@ const CONTEXT_MENU_ID = 'canvas';
 import type {
   FlamechartData,
   ReactHoverContextInfo,
-  ReactProfilerDataV2,
+  ReactProfilerData,
 } from './types';
 
 type ContextMenuContextData = {|
-  data: ReactProfilerDataV2,
+  data: ReactProfilerData,
   flamechart: FlamechartData,
   hoveredEvent: ReactHoverContextInfo | null,
   state: PanAndZoomState,
 |};
 
 type Props = {|
-  profilerDataV2: ReactProfilerDataV2,
+  profilerData: ReactProfilerData,
   flamechart: FlamechartData,
   schedulerCanvasHeight: number,
 |};
 
-function CanvasPage({
-  profilerDataV2,
-  flamechart,
-  schedulerCanvasHeight,
-}: Props) {
+function CanvasPage({profilerData, flamechart, schedulerCanvasHeight}: Props) {
   return (
     <div
       className={styles.CanvasPage}
       style={{backgroundColor: COLORS.PAGE_BG}}>
       <AutoSizer>
         {({height, width}: {height: number, width: number}) => (
           <AutoSizedCanvas
-            dataV2={profilerDataV2}
+            data={profilerData}
             flamechart={flamechart}
             height={height}
             schedulerCanvasHeight={schedulerCanvasHeight}
@@ -94,15 +90,15 @@ const zoomToBatch = (data, measure, state) => {
 };
 
 type AutoSizedCanvasProps = {|
-  dataV2: ReactProfilerDataV2,
+  data: ReactProfilerData,
   flamechart: FlamechartData,
   height: number,
   schedulerCanvasHeight: number,
   width: number,
 |};
 
 function AutoSizedCanvas({
-  dataV2,
+  data,
   flamechart,
   height,
   schedulerCanvasHeight,
@@ -116,23 +112,23 @@ function AutoSizedCanvas({
     canvasWidth: width,
     fixedColumnWidth: LABEL_FIXED_WIDTH,
     fixedHeaderHeight: HEADER_HEIGHT_FIXED,
-    unscaledContentWidth: dataV2.duration,
+    unscaledContentWidth: data.duration,
     unscaledContentHeight:
       schedulerCanvasHeight +
       flamechart.layers.length * FLAMECHART_FRAME_HEIGHT,
   });
 
   const hoveredEvent = getHoveredEvent(
     schedulerCanvasHeight,
-    dataV2,
+    data,
     flamechart,
     state,
   );
   const [isContextMenuShown, setIsContextMenuShown] = useState<boolean>(false);
 
   useContextMenu<ContextMenuContextData>({
     data: {
-      data: dataV2,
+      data,
       flamechart,
       hoveredEvent,
       state,
@@ -145,7 +141,7 @@ function AutoSizedCanvas({
   useLayoutEffect(() => {
     if (canvasRef.current !== null) {
       renderCanvas(
-        dataV2,
+        data,
         flamechart,
         canvasRef.current,
         width,
@@ -218,7 +214,7 @@ function AutoSizedCanvas({
         }}
       </ContextMenu>
       {!isContextMenuShown && (
-        <EventTooltip data={dataV2} hoveredEvent={hoveredEvent} state={state} />
+        <EventTooltip data={data} hoveredEvent={hoveredEvent} state={state} />
       )}
     </Fragment>
   );

src/EventTooltip.js

@@ -3,9 +3,9 @@
 import type {PanAndZoomState} from './util/usePanAndZoom';
 import type {FlamechartFrame} from './speedscope/lib/flamechart';
 import type {
-  ReactEventV2,
-  ReactMeasureV2,
-  ReactProfilerDataV2,
+  ReactEvent,
+  ReactMeasure,
+  ReactProfilerData,
   ReactHoverContextInfo,
   Return,
 } from './types';
@@ -18,7 +18,7 @@ import useSmartTooltip from './util/useSmartTooltip';
 import styles from './EventTooltip.css';
 
 type Props = {|
-  data: ReactProfilerDataV2,
+  data: ReactProfilerData,
   hoveredEvent: ReactHoverContextInfo | null,
   state: PanAndZoomState,
 |};
@@ -148,7 +148,7 @@ const TooltipReactEvent = ({
   tooltipRef,
 }: {
   color: string,
-  event: ReactEventV2,
+  event: ReactEvent,
   tooltipRef: Return<typeof useRef>,
 }) => {
   const {componentName, componentStack, timestamp, type} = event;
@@ -213,8 +213,8 @@ const TooltipReactMeasure = ({
   measure,
   tooltipRef,
 }: {
-  data: ReactProfilerDataV2,
-  measure: ReactMeasureV2,
+  data: ReactProfilerData,
+  measure: ReactMeasure,
   tooltipRef: Return<typeof useRef>,
 }) => {
   const {batchUID, duration, timestamp, type} = measure;

src/ImportPage.js

@@ -1,26 +1,26 @@
 // @flow
 
 import type {TimelineEvent} from './speedscope/import/chrome';
-import type {FlamechartData, ReactProfilerDataV2} from './types';
+import type {FlamechartData, ReactProfilerData} from './types';
 
 import React, {useEffect} from 'react';
 
-import preprocessDataV2 from './util/preprocessDataV2';
+import preprocessData from './util/preprocessData';
 import preprocessFlamechart from './util/preprocessFlamechart';
 
 // TODO: Add import button but keep a static path until canvas layout is ready
-import JSON_PATHV2 from 'url:../static/Profile-20200625T133129.json';
+import JSON_PATH from 'url:../static/Profile-20200625T133129.json';
 
 type Props = {|
-  onDataImportedV2: (
-    profilerData: ReactProfilerDataV2,
+  onDataImported: (
+    profilerData: ReactProfilerData,
     flamechart: FlamechartData,
   ) => void,
 |};
 
-export default function ImportPage({onDataImportedV2}: Props) {
+export default function ImportPage({onDataImported}: Props) {
   useEffect(() => {
-    fetch(JSON_PATHV2)
+    fetch(JSON_PATH)
       .then(res => res.json())
       .then((events: TimelineEvent[]) => {
         // Filter null entries and sort by timestamp.
@@ -29,9 +29,9 @@ export default function ImportPage({onDataImportedV2}: Props) {
         events = events.filter(Boolean).sort((a, b) => (a.ts > b.ts ? 1 : -1));
 
         if (events.length > 0) {
-          const processedData = preprocessDataV2(events);
+          const processedData = preprocessData(events);
           const processedFlamechart = preprocessFlamechart(events);
-          onDataImportedV2(processedData, processedFlamechart);
+          onDataImported(processedData, processedFlamechart);
         }
       });
   }, []);

src/canvas/canvasUtils.js

@@ -5,7 +5,7 @@ import type {
   FlamechartData,
   ReactHoverContextInfo,
   ReactLane,
-  ReactProfilerDataV2,
+  ReactProfilerData,
 } from '../types';
 import type {PanAndZoomState} from '../util/usePanAndZoom';
 
@@ -110,7 +110,7 @@ export const trimFlamegraphText = (
 
 export function getHoveredEvent(
   schedulerCanvasHeight: number,
-  data: $ReadOnly<ReactProfilerDataV2>,
+  data: $ReadOnly<ReactProfilerData>,
   flamechart: $ReadOnly<FlamechartData>,
   state: PanAndZoomState,
 ): ReactHoverContextInfo | null {
@@ -243,7 +243,7 @@ export function getHoveredEvent(
 }
 
 export const getLaneHeight = (
-  data: $ReadOnly<ReactProfilerDataV2>,
+  data: $ReadOnly<ReactProfilerData>,
   lane: ReactLane,
 ): number => {
   // TODO: Return 0 if data has no data for lane

src/canvas/renderCanvas.js

@@ -4,7 +4,7 @@ import type {
   FlamechartData,
   ReactHoverContextInfo,
   ReactLane,
-  ReactProfilerDataV2,
+  ReactProfilerData,
 } from '../types';
 import type {PanAndZoomState} from '../util/usePanAndZoom';
 
@@ -507,7 +507,7 @@ function renderAxisMarkers(
 // TODO Passing "state" directly breaks memoization for e.g. mouse moves
 export const renderCanvas = memoize(
   (
-    data: $ReadOnly<ReactProfilerDataV2>,
+    data: $ReadOnly<ReactProfilerData>,
     flamechart: $ReadOnly<FlamechartData>,
     canvas: HTMLCanvasElement,
     canvasWidth: number,

src/types.js

@@ -58,14 +58,14 @@ export type ReactSuspenseRejectedEvent = {|
   type: 'suspense-rejected',
 |};
 
-export type ReactEventV2 =
+export type ReactEvent =
   | ReactScheduleRenderEvent
   | ReactScheduleStateUpdateEvent
   | ReactScheduleForceUpdateEvent
   | ReactSuspenseSuspendEvent
   | ReactSuspenseResolvedEvent
   | ReactSuspenseRejectedEvent;
-export type ReactEventTypeV2 = $PropertyType<ReactEventV2, 'type'>;
+export type ReactEventType = $PropertyType<ReactEvent, 'type'>;
 
 export type ReactMeasureType =
   | 'commit'
@@ -78,7 +78,7 @@ export type ReactMeasureType =
 
 export type BatchUID = number;
 
-export type ReactMeasureV2 = {|
+export type ReactMeasure = {|
   +type: ReactMeasureType,
   +lanes: ReactLane[],
   +timestamp: Milliseconds,
@@ -87,18 +87,18 @@ export type ReactMeasureV2 = {|
   +depth: number,
 |};
 
-export type ReactProfilerDataV2 = {|
+export type ReactProfilerData = {|
   startTime: number,
   duration: number,
-  events: ReactEventV2[],
-  measures: ReactMeasureV2[],
+  events: ReactEvent[],
+  measures: ReactMeasure[],
 |};
 
 export type ReactHoverContextInfo = {|
-  event: ReactEventV2 | null,
-  measure: ReactMeasureV2 | null,
+  event: ReactEvent | null,
+  measure: ReactMeasure | null,
   lane: ReactLane | null,
-  data: $ReadOnly<ReactProfilerDataV2> | null,
+  data: $ReadOnly<ReactProfilerData> | null,
   flamechartNode: FlamechartFrame | null,
 |};
 

src/util/getBatchRange.js

@@ -2,14 +2,14 @@
 
 import memoize from 'memoize-one';
 
-import type {BatchUID, Milliseconds, ReactProfilerDataV2} from '../types';
+import type {BatchUID, Milliseconds, ReactProfilerData} from '../types';
 
 // TODO Batch duration probably shouldn't include delayed passive effects?
 // It should probably end with the layout effect.
 
 function unmemoizedGetBatchRange(
   batchUID: BatchUID,
-  data: ReactProfilerDataV2,
+  data: ReactProfilerData,
 ): [Milliseconds, Milliseconds] {
   const {measures} = data;