From 04e81c3f0323a9f35a272e89493981559de02a18 Mon Sep 17 00:00:00 2001 From: E-Liang Tan Date: Fri, 3 Jul 2020 11:50:48 +0800 Subject: [PATCH] Rename all *V2 --- src/App.js | 21 +++++++------- src/CanvasPage.js | 28 ++++++++----------- src/EventTooltip.js | 14 +++++----- src/ImportPage.js | 18 ++++++------ src/canvas/canvasUtils.js | 6 ++-- src/canvas/renderCanvas.js | 4 +-- src/types.js | 18 ++++++------ src/util/__tests__/preprocessData-test.js | 2 +- src/util/getBatchRange.js | 4 +-- ...{preprocessDataV2.js => preprocessData.js} | 10 +++---- 10 files changed, 60 insertions(+), 65 deletions(-) rename src/util/{preprocessDataV2.js => preprocessData.js} (98%) diff --git a/src/App.js b/src/App.js index c8b2bf0d0e710..4fd0e60b67af5 100644 --- a/src/App.js +++ b/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(null); + const [profilerData, setProfilerData] = useState( + null, + ); const [flamechart, setFlamechart] = useState(null); const [schedulerCanvasHeight, setSchedulerCanvasHeight] = useState(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 ( ); } else { - return ; + return ; } } diff --git a/src/CanvasPage.js b/src/CanvasPage.js index c117e4d47a4e7..4308931504c79 100644 --- a/src/CanvasPage.js +++ b/src/CanvasPage.js @@ -28,27 +28,23 @@ 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 (
{({height, width}: {height: number, width: number}) => ( { }; type AutoSizedCanvasProps = {| - dataV2: ReactProfilerDataV2, + data: ReactProfilerData, flamechart: FlamechartData, height: number, schedulerCanvasHeight: number, @@ -102,7 +98,7 @@ type AutoSizedCanvasProps = {| |}; function AutoSizedCanvas({ - dataV2, + data, flamechart, height, schedulerCanvasHeight, @@ -116,7 +112,7 @@ 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, @@ -124,7 +120,7 @@ function AutoSizedCanvas({ const hoveredEvent = getHoveredEvent( schedulerCanvasHeight, - dataV2, + data, flamechart, state, ); @@ -132,7 +128,7 @@ function AutoSizedCanvas({ useContextMenu({ 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({ }} {!isContextMenuShown && ( - + )} ); diff --git a/src/EventTooltip.js b/src/EventTooltip.js index fd3faecf8a7bb..c81927aa2f2e4 100644 --- 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 { - 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, }) => { const {componentName, componentStack, timestamp, type} = event; @@ -213,8 +213,8 @@ const TooltipReactMeasure = ({ measure, tooltipRef, }: { - data: ReactProfilerDataV2, - measure: ReactMeasureV2, + data: ReactProfilerData, + measure: ReactMeasure, tooltipRef: Return, }) => { const {batchUID, duration, timestamp, type} = measure; diff --git a/src/ImportPage.js b/src/ImportPage.js index 2e2e2b162d028..cff17739523aa 100644 --- a/src/ImportPage.js +++ b/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); } }); }, []); diff --git a/src/canvas/canvasUtils.js b/src/canvas/canvasUtils.js index babdd23bcfa95..59f11d75c4586 100644 --- a/src/canvas/canvasUtils.js +++ b/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, + data: $ReadOnly, flamechart: $ReadOnly, state: PanAndZoomState, ): ReactHoverContextInfo | null { @@ -243,7 +243,7 @@ export function getHoveredEvent( } export const getLaneHeight = ( - data: $ReadOnly, + data: $ReadOnly, lane: ReactLane, ): number => { // TODO: Return 0 if data has no data for lane diff --git a/src/canvas/renderCanvas.js b/src/canvas/renderCanvas.js index 535a92775c07f..d792189891233 100644 --- a/src/canvas/renderCanvas.js +++ b/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, + data: $ReadOnly, flamechart: $ReadOnly, canvas: HTMLCanvasElement, canvasWidth: number, diff --git a/src/types.js b/src/types.js index 557bfa369425f..66ebf68054868 100644 --- a/src/types.js +++ b/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; +export type ReactEventType = $PropertyType; 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 | null, + data: $ReadOnly | null, flamechartNode: FlamechartFrame | null, |}; diff --git a/src/util/__tests__/preprocessData-test.js b/src/util/__tests__/preprocessData-test.js index f84a540eee7b5..d77c8d3b3dc00 100644 --- a/src/util/__tests__/preprocessData-test.js +++ b/src/util/__tests__/preprocessData-test.js @@ -2,7 +2,7 @@ import preprocessData, { getLanesFromTransportDecimalBitmask, -} from '../preprocessDataV2'; +} from '../preprocessData'; import {REACT_TOTAL_NUM_LANES} from '../../constants'; // Disable quotes rule in the whole file as we paste raw JSON as test inputs and diff --git a/src/util/getBatchRange.js b/src/util/getBatchRange.js index 393766940002c..023f2591fe438 100644 --- a/src/util/getBatchRange.js +++ b/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; diff --git a/src/util/preprocessDataV2.js b/src/util/preprocessData.js similarity index 98% rename from src/util/preprocessDataV2.js rename to src/util/preprocessData.js index e9a08e770ab87..8994989e807f4 100644 --- a/src/util/preprocessDataV2.js +++ b/src/util/preprocessData.js @@ -6,7 +6,7 @@ import type { BatchUID, ReactLane, ReactMeasureType, - ReactProfilerDataV2, + ReactProfilerData, } from '../types'; import {REACT_TOTAL_NUM_LANES} from '../constants'; @@ -69,7 +69,7 @@ function markWorkStarted( type: ReactMeasureType, startTime: Milliseconds, lanes: ReactLane[], - currentProfilerData: ReactProfilerDataV2, + currentProfilerData: ReactProfilerData, state: ProcessorState, ) { const {batchUID, measureStack} = state; @@ -91,7 +91,7 @@ function markWorkStarted( function markWorkCompleted( type: ReactMeasureType, stopTime: Milliseconds, - currentProfilerData: ReactProfilerDataV2, + currentProfilerData: ReactProfilerData, stack: $PropertyType, ) { if (stack.length === 0) { @@ -137,7 +137,7 @@ function throwIfIncomplete( function processTimelineEvent( event: TimelineEvent, /** Finalized profiler data up to `event`. May be mutated. */ - currentProfilerData: ReactProfilerDataV2, + currentProfilerData: ReactProfilerData, /** Intermediate processor state. May be mutated. */ state: ProcessorState, ) { @@ -350,7 +350,7 @@ function processTimelineEvent( export default function preprocessData( timeline: TimelineEvent[], -): ReactProfilerDataV2 { +): ReactProfilerData { const profilerData = { startTime: 0, duration: 0,