From a73c9c4e0df9688b3b05f086ca2c27d68d4b0548 Mon Sep 17 00:00:00 2001 From: E-Liang Tan Date: Fri, 3 Jul 2020 11:46:42 +0800 Subject: [PATCH 1/2] Remove V1 types and usage --- src/App.js | 27 +-- src/CanvasPage.js | 6 - src/ImportPage.js | 31 +--- src/canvas/canvasUtils.js | 42 ----- src/types.js | 88 +++------- src/util/preprocessData.js | 338 ------------------------------------- 6 files changed, 26 insertions(+), 506 deletions(-) delete mode 100644 src/util/preprocessData.js diff --git a/src/App.js b/src/App.js index 6c65cde7eed28..c8b2bf0d0e710 100644 --- a/src/App.js +++ b/src/App.js @@ -1,11 +1,6 @@ // @flow -import type { - FlamechartData, - ReactLane, - ReactProfilerData, - ReactProfilerDataV2, -} from './types'; +import type {FlamechartData, ReactLane, ReactProfilerDataV2} from './types'; import React, {useState, useCallback} from 'react'; import {unstable_batchedUpdates} from 'react-dom'; @@ -16,9 +11,6 @@ import ImportPage from './ImportPage'; import CanvasPage from './CanvasPage'; export default function App() { - const [profilerData, setProfilerData] = useState( - null, - ); const [ profilerDataV2, setProfilerDataV2, @@ -26,13 +18,6 @@ export default function App() { const [flamechart, setFlamechart] = useState(null); const [schedulerCanvasHeight, setSchedulerCanvasHeight] = useState(0); - const handleDataImported = useCallback( - (importedProfilerData: ReactProfilerData) => { - setProfilerData(importedProfilerData); - }, - ); - - // TODO: Migrate and completely remove V2 stuff const handleDataImportedV2 = useCallback( ( importedProfilerData: ReactProfilerDataV2, @@ -55,21 +40,15 @@ export default function App() { }, ); - if (profilerData && profilerDataV2 && flamechart) { + if (profilerDataV2 && flamechart) { return ( ); } else { - return ( - - ); + return ; } } diff --git a/src/CanvasPage.js b/src/CanvasPage.js index 552c7a211be47..c117e4d47a4e7 100644 --- a/src/CanvasPage.js +++ b/src/CanvasPage.js @@ -28,7 +28,6 @@ const CONTEXT_MENU_ID = 'canvas'; import type { FlamechartData, ReactHoverContextInfo, - ReactProfilerData, ReactProfilerDataV2, } from './types'; @@ -40,14 +39,12 @@ type ContextMenuContextData = {| |}; type Props = {| - profilerData: ReactProfilerData, profilerDataV2: ReactProfilerDataV2, flamechart: FlamechartData, schedulerCanvasHeight: number, |}; function CanvasPage({ - profilerData, profilerDataV2, flamechart, schedulerCanvasHeight, @@ -59,7 +56,6 @@ function CanvasPage({ {({height, width}: {height: number, width: number}) => ( { }; type AutoSizedCanvasProps = {| - data: ReactProfilerData, dataV2: ReactProfilerDataV2, flamechart: FlamechartData, height: number, @@ -107,7 +102,6 @@ type AutoSizedCanvasProps = {| |}; function AutoSizedCanvas({ - data, dataV2, flamechart, height, diff --git a/src/ImportPage.js b/src/ImportPage.js index 47b9c9d971a6c..2e2e2b162d028 100644 --- a/src/ImportPage.js +++ b/src/ImportPage.js @@ -1,51 +1,24 @@ // @flow import type {TimelineEvent} from './speedscope/import/chrome'; -import type { - FlamechartData, - ReactProfilerData, - ReactProfilerDataV2, -} from './types'; +import type {FlamechartData, ReactProfilerDataV2} from './types'; import React, {useEffect} from 'react'; -import preprocessData from './util/preprocessData'; import preprocessDataV2 from './util/preprocessDataV2'; import preprocessFlamechart from './util/preprocessFlamechart'; // TODO: Add import button but keep a static path until canvas layout is ready -import JSON_PATH from 'url:../static/small-devtools.json'; import JSON_PATHV2 from 'url:../static/Profile-20200625T133129.json'; type Props = {| - onDataImported: ( - profilerData: ReactProfilerData, - flamechart: FlamechartData, - ) => void, onDataImportedV2: ( profilerData: ReactProfilerDataV2, flamechart: FlamechartData, ) => void, |}; -export default function ImportPage({onDataImported, onDataImportedV2}: Props) { - useEffect(() => { - fetch(JSON_PATH) - .then(res => res.json()) - .then((events: TimelineEvent[]) => { - // Filter null entries and sort by timestamp. - // I would not expect to have to do either of this, - // but some of the data being passed in requires it. - events = events.filter(Boolean).sort((a, b) => (a.ts > b.ts ? 1 : -1)); - - if (events.length > 0) { - const processedData = preprocessData(events); - const processedFlamechart = preprocessFlamechart(events); - onDataImported(processedData, processedFlamechart); - } - }); - }, []); - +export default function ImportPage({onDataImportedV2}: Props) { useEffect(() => { fetch(JSON_PATHV2) .then(res => res.json()) diff --git a/src/canvas/canvasUtils.js b/src/canvas/canvasUtils.js index 65ba867e1e523..babdd23bcfa95 100644 --- a/src/canvas/canvasUtils.js +++ b/src/canvas/canvasUtils.js @@ -5,8 +5,6 @@ import type { FlamechartData, ReactHoverContextInfo, ReactLane, - ReactPriority, - ReactProfilerData, ReactProfilerDataV2, } from '../types'; import type {PanAndZoomState} from '../util/usePanAndZoom'; @@ -244,46 +242,6 @@ export function getHoveredEvent( return null; } -const cachedPriorityHeights = new Map(); -export const getPriorityHeight = ( - data: $ReadOnly, - priority: ReactPriority, -): number => { - if (cachedPriorityHeights.has(priority)) { - // We know the value must be present because we've just checked. - return ((cachedPriorityHeights.get(priority): any): number); - } else { - const numMeasures = data[priority].maxNestedMeasures; - const events = data[priority].events; - - let priorityHeight = 0; - if (numMeasures > 0 && events.length > 0) { - priorityHeight = - REACT_GUTTER_SIZE + - REACT_EVENT_SIZE + - REACT_WORK_SIZE * numMeasures + - REACT_GUTTER_SIZE * numMeasures + - REACT_PRIORITY_BORDER_SIZE; - } else if (numMeasures > 0) { - priorityHeight = - REACT_GUTTER_SIZE + - REACT_WORK_SIZE * numMeasures + - REACT_GUTTER_SIZE * numMeasures + - REACT_PRIORITY_BORDER_SIZE; - } else if (events.length > 0) { - priorityHeight = - REACT_GUTTER_SIZE + - REACT_EVENT_SIZE + - REACT_GUTTER_SIZE + - REACT_PRIORITY_BORDER_SIZE; - } - - cachedPriorityHeights.set(priority, priorityHeight); - - return priorityHeight; - } -}; - export const getLaneHeight = ( data: $ReadOnly, lane: ReactLane, diff --git a/src/types.js b/src/types.js index f9a8545dce002..557bfa369425f 100644 --- a/src/types.js +++ b/src/types.js @@ -14,73 +14,6 @@ export type Return = Return_<*, T>; export type Milliseconds = number; -/** @deprecated */ -export type ReactPriority = 'unscheduled' | 'high' | 'normal' | 'low'; - -/** @deprecated */ -export type ReactEventType = - | 'schedule-render' - | 'schedule-state-update' - | 'suspend'; - -export type ReactMeasureType = - | 'commit' - // render-idle: A measure spanning the time when a render starts, through all - // yields and restarts, and ends when commit stops OR render is cancelled. - | 'render-idle' - | 'render' - | 'layout-effects' - | 'passive-effects'; - -/** @deprecated */ -export type ReactEvent = {| - +type: ReactEventType, - +priority: ReactPriority, - +timestamp: Milliseconds, - +componentName?: string, - +componentStack?: string, - +isCascading?: boolean, -|}; - -export type BatchUID = number; - -/** @deprecated */ -export type ReactMeasure = {| - +type: ReactMeasureType, - +priority: ReactPriority, - +timestamp: Milliseconds, - +duration: Milliseconds, - +batchUID: BatchUID, - +depth: number, -|}; - -/** @deprecated */ -export type ReactProfilerDataPriority = {| - events: Array, - measures: Array, - maxNestedMeasures: number, -|}; - -/** @deprecated */ -export type ReactProfilerData = {| - startTime: number, - duration: number, - unscheduled: ReactProfilerDataPriority, - high: ReactProfilerDataPriority, - normal: ReactProfilerDataPriority, - low: ReactProfilerDataPriority, -|}; - -export type ReactHoverContextInfo = {| - event: ReactEventV2 | null, - measure: ReactMeasureV2 | null, - lane: ReactLane | null, - data: $ReadOnly | null, - flamechartNode: FlamechartFrame | null, -|}; - -export type FlamechartData = Flamechart; - export type ReactLane = number; type BaseReactEvent = {| @@ -134,6 +67,17 @@ export type ReactEventV2 = | ReactSuspenseRejectedEvent; export type ReactEventTypeV2 = $PropertyType; +export type ReactMeasureType = + | 'commit' + // render-idle: A measure spanning the time when a render starts, through all + // yields and restarts, and ends when commit stops OR render is cancelled. + | 'render-idle' + | 'render' + | 'layout-effects' + | 'passive-effects'; + +export type BatchUID = number; + export type ReactMeasureV2 = {| +type: ReactMeasureType, +lanes: ReactLane[], @@ -149,3 +93,13 @@ export type ReactProfilerDataV2 = {| events: ReactEventV2[], measures: ReactMeasureV2[], |}; + +export type ReactHoverContextInfo = {| + event: ReactEventV2 | null, + measure: ReactMeasureV2 | null, + lane: ReactLane | null, + data: $ReadOnly | null, + flamechartNode: FlamechartFrame | null, +|}; + +export type FlamechartData = Flamechart; diff --git a/src/util/preprocessData.js b/src/util/preprocessData.js deleted file mode 100644 index fda39690decb5..0000000000000 --- a/src/util/preprocessData.js +++ /dev/null @@ -1,338 +0,0 @@ -// @flow - -import type {TimelineEvent} from './speedscope/import/chrome'; - -import type { - Milliseconds, - BatchUID, - ReactEvent, - ReactMeasureType, - ReactPriority, - ReactProfilerData, - ReactProfilerDataPriority, -} from './types'; - -// TODO Combine yields/starts that are closer than some threshold with the previous event to reduce renders. - -// TODO: Figure out what this is -type StackElement = {| - type: ReactMeasureType, - depth: number, - index: number, - startTime: Milliseconds, - stopTime?: Milliseconds, -|}; - -type Metadata = {| - nextRenderShouldGenerateNewBatchID: boolean, - batchUID: BatchUID, - +stack: StackElement[], -|}; - -export default function reactProfilerProcessor( - rawData: TimelineEvent[], -): ReactProfilerData { - const reactProfilerData = { - startTime: rawData[0].ts, - duration: 0, - high: { - events: [], - measures: [], - maxNestedMeasures: 0, - }, - normal: { - events: [], - measures: [], - maxNestedMeasures: 0, - }, - low: { - events: [], - measures: [], - maxNestedMeasures: 0, - }, - unscheduled: { - events: [], - measures: [], - maxNestedMeasures: 0, - }, - }; - - let currentMetadata: Metadata | null = null; - let currentPriority: ReactPriority = 'unscheduled'; - let currentProfilerDataGroup: ReactProfilerDataPriority | null = null; - let uidCounter = 0; - - const metadata: {|[priority: ReactPriority]: Metadata|} = { - high: { - batchUID: 0, - nextRenderShouldGenerateNewBatchID: true, - stack: [], - }, - normal: { - batchUID: 0, - nextRenderShouldGenerateNewBatchID: true, - stack: [], - }, - low: { - batchUID: 0, - nextRenderShouldGenerateNewBatchID: true, - stack: [], - }, - unscheduled: { - batchUID: 0, - nextRenderShouldGenerateNewBatchID: true, - stack: [], - }, - }; - - const getLastType = () => { - if (!currentMetadata) { - return null; - } - const {stack} = currentMetadata; - if (stack.length > 0) { - const {type} = stack[stack.length - 1]; - return type; - } - return null; - }; - - const getDepth = () => { - if (!currentMetadata) { - return 0; - } - const {stack} = currentMetadata; - if (stack.length > 0) { - const {depth, type} = (stack[stack.length - 1]: StackElement); - return type === 'render-idle' ? depth : depth + 1; - } - return 0; - }; - - const markWorkCompleted = ( - type: ReactMeasureType, - stopTime: Milliseconds, - ) => { - if (!currentMetadata) { - return; - } - const {stack} = currentMetadata; - if (stack.length === 0) { - console.error( - `Unexpected type "${type}" completed while stack is empty.`, - ); - } else { - const last = stack[stack.length - 1]; - if (last.type !== type) { - console.error( - `Unexpected type "${type}" completed before "${last.type}" completed.`, - ); - } else { - const {index, startTime} = stack.pop(); - - if (currentProfilerDataGroup) { - const measure = currentProfilerDataGroup.measures[index]; - if (!measure) { - console.error( - `Could not find matching measure for type "${type}".`, - ); - } else { - // $FlowFixMe This property should not be writable outside of this function. - measure.duration = stopTime - startTime; - } - } - } - } - }; - - const markWorkStarted = (type: ReactMeasureType, startTime: Milliseconds) => { - if (!currentMetadata || !currentProfilerDataGroup) { - return; - } - const {batchUID, stack} = currentMetadata; - - const index = currentProfilerDataGroup.measures.length; - const depth = getDepth(); - - currentProfilerDataGroup.maxNestedMeasures = Math.max( - currentProfilerDataGroup.maxNestedMeasures, - depth + 1, - ); - - stack.push({ - depth, - index, - startTime, - type, - }); - - currentProfilerDataGroup.measures.push({ - type, - batchUID, - depth, - priority: currentPriority, - timestamp: startTime, - duration: 0, - }); - }; - - const throwIfIncomplete = type => { - if (!currentMetadata) { - return; - } - const {stack} = currentMetadata; - const lastIndex = stack.length - 1; - if (lastIndex >= 0) { - const last = stack[lastIndex]; - if (last.stopTime === undefined && last.type === type) { - throw new Error( - `Unexpected type "${type}" started before "${last.type}" completed.`, - ); - } - } - }; - - for (let i = 0; i < rawData.length; i++) { - const currentEvent = rawData[i]; - - const {cat, name, ts} = currentEvent; - - if (cat !== 'blink.user_timing' || !name.startsWith('--')) { - continue; - } - - currentMetadata = metadata[currentPriority] || metadata.unscheduled; - if (!currentMetadata) { - console.error('Unexpected priority', currentPriority); - } - - currentProfilerDataGroup = - reactProfilerData[currentPriority || 'unscheduled']; - if (!currentProfilerDataGroup) { - console.error('Unexpected priority', currentPriority); - } - - const startTime = (ts - reactProfilerData.startTime) / 1000; - - if (name.startsWith('--scheduler-start-')) { - if (currentPriority !== 'unscheduled') { - console.error( - `Unexpected scheduler start: "${name}" with current priority: "${currentPriority}"`, - ); - continue; // TODO Should we throw? Will this corrupt our data? - } - - currentPriority = ((name.substr(18): any): ReactPriority); - } else if (name.startsWith('--scheduler-stop-')) { - if ( - currentPriority === 'unscheduled' || - currentPriority !== name.substr(17) - ) { - console.error( - `Unexpected scheduler stop: "${name}" with current priority: "${currentPriority}"`, - ); - continue; // TODO Should we throw? Will this corrupt our data? - } - - currentPriority = 'unscheduled'; - } else if (name === '--render-start') { - if (currentMetadata.nextRenderShouldGenerateNewBatchID) { - currentMetadata.nextRenderShouldGenerateNewBatchID = false; - currentMetadata.batchUID = ((uidCounter++: any): BatchUID); - } - throwIfIncomplete('render'); - if (getLastType() !== 'render-idle') { - markWorkStarted('render-idle', startTime); - } - markWorkStarted('render', startTime); - } else if (name === '--render-stop') { - markWorkCompleted('render', startTime); - } else if (name === '--render-yield') { - markWorkCompleted('render', startTime); - } else if (name === '--render-cancel') { - currentMetadata.nextRenderShouldGenerateNewBatchID = true; - markWorkCompleted('render', startTime); - markWorkCompleted('render-idle', startTime); - } else if (name === '--commit-start') { - currentMetadata.nextRenderShouldGenerateNewBatchID = true; - markWorkStarted('commit', startTime); - } else if (name === '--commit-stop') { - markWorkCompleted('commit', startTime); - markWorkCompleted('render-idle', startTime); - } else if ( - name === '--layout-effects-start' || - name === '--passive-effects-start' - ) { - const type = - name === '--layout-effects-start' - ? 'layout-effects' - : 'passive-effects'; - markWorkStarted(type, startTime); - } else if ( - name === '--layout-effects-stop' || - name === '--passive-effects-stop' - ) { - const type = - name === '--layout-effects-stop' ? 'layout-effects' : 'passive-effects'; - markWorkCompleted(type, startTime); - } else if (name.startsWith('--schedule-render')) { - currentProfilerDataGroup.events.push({ - type: 'schedule-render', - priority: currentPriority, // TODO Change to target priority - timestamp: startTime, - }); - } else if (name.startsWith('--schedule-state-update-')) { - const [componentName, componentStack] = name.substr(24).split('-'); - const isCascading = !!currentMetadata.stack.find( - ({type}) => type === 'commit', - ); - currentProfilerDataGroup.events.push({ - type: 'schedule-state-update', - priority: currentPriority, // TODO Change to target priority - isCascading, - timestamp: startTime, - componentName, - componentStack, - }); - } else if (name.startsWith('--suspend-')) { - const [componentName, componentStack] = name.substr(10).split('-'); - currentProfilerDataGroup.events.push({ - type: 'suspend', - priority: currentPriority, // TODO Change to target priority - timestamp: startTime, - componentName, - componentStack, - }); - } - } - - Object.entries(metadata).forEach(([priority, metadataForPriority]) => { - const {stack} = ((metadataForPriority: any): Metadata); - if (stack.length > 0) { - console.error( - `Incomplete events or measures for priority ${priority}`, - stack, - ); - } - }); - - ['unscheduled', 'high', 'normal', 'low'].forEach(priority => { - const {events, measures} = reactProfilerData[priority]; - if (events.length > 0) { - const {timestamp} = (events[events.length - 1]: ReactEvent); - reactProfilerData.duration = Math.max( - reactProfilerData.duration, - timestamp, - ); - } - if (measures.length > 0) { - const {duration, timestamp} = measures[measures.length - 1]; - reactProfilerData.duration = Math.max( - reactProfilerData.duration, - timestamp + duration, - ); - } - }); - - return reactProfilerData; -} From 04e81c3f0323a9f35a272e89493981559de02a18 Mon Sep 17 00:00:00 2001 From: E-Liang Tan Date: Fri, 3 Jul 2020 11:50:48 +0800 Subject: [PATCH 2/2] 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,