{"commit":{"subject":"Added commit tree reconstruction","revision":"821a6504b8b6341c0b1cac8ca436483e42ad30dd","shortRevision":"821a6504b8","authorName":"Brian Vaughn","authorEmail":"bvaughn@fb.com","authoredAt":"2019-03-15T20:05:52-07:00"},"parents":["8a7be78ed734322576923283bcfc71666be2458a"],"body":"","files":[{"status":"M","path":"OVERVIEW.md"},{"status":"M","path":"src\/backend\/agent.js"},{"status":"M","path":"src\/backend\/renderer.js"},{"status":"M","path":"src\/backend\/types.js"},{"status":"M","path":"src\/constants.js"},{"status":"M","path":"src\/devtools\/ProfilingCache.js"},{"status":"M","path":"src\/devtools\/store.js"},{"status":"A","path":"src\/devtools\/views\/Profiler\/CommitFlamegraph.css"},{"status":"A","path":"src\/devtools\/views\/Profiler\/CommitFlamegraph.js"},{"status":"A","path":"src\/devtools\/views\/Profiler\/CommitRanked.css"},{"status":"A","path":"src\/devtools\/views\/Profiler\/CommitRanked.js"},{"status":"A","path":"src\/devtools\/views\/Profiler\/CommitTreeBuilder.js"},{"status":"M","path":"src\/devtools\/views\/Profiler\/Profiler.css"},{"status":"M","path":"src\/devtools\/views\/Profiler\/Profiler.js"},{"status":"M","path":"src\/devtools\/views\/Profiler\/ProfilerContext.js"},{"status":"M","path":"src\/devtools\/views\/Profiler\/SnapshotSelector.js"},{"status":"M","path":"src\/devtools\/views\/Profiler\/types.js"}],"patch":"diff --git a\/OVERVIEW.md b\/OVERVIEW.md\nindex 78ae10aff2..e615faf4b3 100644\n--- a\/OVERVIEW.md\n+++ b\/OVERVIEW.md\n@@ -16,7 +16,7 @@ Every React commit that changes the tree in a way DevTools cares about results i\n \n The payload for each message is a typed array. The first two entries are numbers that identify which renderer and root the update belongs to (for multi-root support). The rest of the array depends on the operations being made to the tree.\n \n-We only send the following bits of information: element type, id, parent id, owner id, name, and key. Additional information (e.g. props, state) requires a separate \"_inspectElement_\" message.\n+No updates are required for many commits because we only send the following bits of information: element type, id, parent id, owner id, name, and key. Additional information (e.g. props, state) requires a separate \"_inspectElement_\" message.\n \n #### Adding a root node\n \n@@ -25,7 +25,7 @@ Adding a root to the tree requires sending 4 numbers:\n 1. add operation constant (`1`)\n 1. fiber id\n 1. element type constant (`8 === ElementTypeRoot`)\n-1. profiling flag\n+1. profiling supported flag\n \n For example, adding a root fiber with an id of 1:\n ```js\n@@ -100,6 +100,23 @@ For example:\n ]\n ```\n \n+#### Updating tree base duration\n+\n+While profiling is in progress, we send an extra operation any time a fiber is added or a updated in a way that affects its tree base duration. This information is needed by the Profiler UI in order to render the \"snapshot\" and \"ranked\" chart views.\n+\n+1. tree base duration constant (`4`)\n+1. fiber id\n+1. tree base duration\n+\n+For example, updating the base duration for a fiber with an id of 1:\n+```js\n+[\n+ 4, \/\/ tree base duration operation\n+ 1, \/\/ fiber id\n+ 32, \/\/ new tree base duration value\n+]\n+```\n+\n ## Reconstructing the tree\n \n The frontend stores its information about the tree in a map of id to objects with the following keys:\n@@ -251,12 +268,10 @@ Here is an example commit in which two elements were rendered and one interactio\n commitIndex: 0,\n interactions: [\n {\n- id: 1,\n timestamp: 4,\n name: \"Foo\"\n },\n {\n- id: 2,\n timestamp: 4,\n name: \"Bar\"\n }\n@@ -265,13 +280,11 @@ Here is an example commit in which two elements were rendered and one interactio\n {\n id: 1,\n baseDuration: 15,\n- selfDuration: 4,\n actualDuration: 15\n },\n {\n id: 2,\n baseDuration: 11,\n- selfDuration: 8,\n actualDuration: 11\n }\n }\n@@ -319,16 +332,16 @@ Here is an example of a profiling session consisting of two interactions:\n rootID: 1,\n interactions: [\n {\n- id: 1,\n name: \"Foo\",\n+ timestamp: 4,\n commits: [\n 0, \/\/ index of first commit\n 2 \/\/ index of second commit\n ]\n },\n {\n- id: 2,\n name: \"Bar\",\n+ timestamp: 4,\n commits: [\n 0 \/\/ index of first commit\n ]\ndiff --git a\/src\/backend\/agent.js b\/src\/backend\/agent.js\nindex b7df24d42f..7a7c7a62bb 100644\n--- a\/src\/backend\/agent.js\n+++ b\/src\/backend\/agent.js\n@@ -46,6 +46,7 @@ export default class Agent extends EventEmitter {\n addBridge(bridge: Bridge) {\n this._bridge = bridge;\n \n+ bridge.addListener('getCommitDetails', this.getCommitDetails);\n bridge.addListener('getProfilingStatus', this.getProfilingStatus);\n bridge.addListener('getProfilingSummary', this.getProfilingSummary);\n bridge.addListener('highlightElementInDOM', this.highlightElementInDOM);\n@@ -76,6 +77,26 @@ export default class Agent extends EventEmitter {\n return null;\n }\n \n+ getCommitDetails = ({\n+ commitIndex,\n+ rendererID,\n+ rootID,\n+ }: {\n+ commitIndex: number,\n+ rendererID: number,\n+ rootID: number,\n+ }) => {\n+ const renderer = this._rendererInterfaces[rendererID];\n+ if (renderer == null) {\n+ console.warn(`Invalid renderer id \"${rendererID}\"`);\n+ } else {\n+ this._bridge.send(\n+ 'commitDetails',\n+ renderer.getCommitDetails(rootID, commitIndex)\n+ );\n+ }\n+ };\n+\n getProfilingStatus = () => {\n this._bridge.send('profilingStatus', this._isProfiling);\n };\ndiff --git a\/src\/backend\/renderer.js b\/src\/backend\/renderer.js\nindex 1d45f6c3e9..a6510e1310 100644\n--- a\/src\/backend\/renderer.js\n+++ b\/src\/backend\/renderer.js\n@@ -19,11 +19,13 @@ import {\n TREE_OPERATION_ADD,\n TREE_OPERATION_REMOVE,\n TREE_OPERATION_RESET_CHILDREN,\n+ TREE_OPERATION_UPDATE_TREE_BASE_DURATION,\n } from '..\/constants';\n import { getUID } from '..\/utils';\n import { inspectHooksOfFiber } from '.\/ReactDebugHooks';\n \n import type {\n+ CommitDetails,\n DevToolsHook,\n Fiber,\n FiberData,\n@@ -474,6 +476,10 @@ export function attach(\n \/\/ When a mount or update is in progress, this value tracks the root that is being operated on.\n let currentRootID: number = -1;\n \n+ function getInteractionID({ name, timestamp }: Interaction): string {\n+ return `${timestamp}-${name}`;\n+ }\n+\n function getFiberID(primaryFiber: Fiber): number {\n if (!fiberToIDMap.has(primaryFiber)) {\n const id = getUID();\n@@ -623,6 +629,14 @@ export function attach(\n }\n addOperation(operation);\n }\n+\n+ if (isProfiling) {\n+ const operation = new Uint32Array(3);\n+ operation[0] = TREE_OPERATION_UPDATE_TREE_BASE_DURATION;\n+ operation[1] = id;\n+ operation[2] = fiber.treeBaseDuration;\n+ addOperation(operation);\n+ }\n }\n \n function enqueueUnmount(fiber) {\n@@ -682,21 +696,26 @@ export function attach(\n if (isProfiling) {\n if (haveProfilerTimesChanged(fiber.alternate, fiber)) {\n const id = getFiberID(getPrimaryFiber(fiber));\n+ const { actualDuration, treeBaseDuration } = fiber;\n+\n+ const operation = new Uint32Array(3);\n+ operation[0] = TREE_OPERATION_UPDATE_TREE_BASE_DURATION;\n+ operation[1] = id;\n+ operation[2] = treeBaseDuration;\n+ addOperation(operation);\n \n- idToTreeBaseDurationMap.set(id, fiber.treeBaseDuration);\n+ idToTreeBaseDurationMap.set(id, treeBaseDuration);\n \n- if (fiber.actualDuration > 0) {\n+ if (actualDuration > 0) {\n \/\/ If profiling is active, store durations for elements that were rendered during the commit.\n const metadata = ((currentCommitProfilingMetadata: any): CommitProfilingData);\n metadata.committedFibers.push({\n id,\n- actualDuration: fiber.actualDuration,\n- selfDuration: fiber.selfDuration,\n- treeBaseDuration: fiber.treeBaseDuration,\n+ actualDuration,\n });\n metadata.maxActualDuration = Math.max(\n metadata.maxActualDuration,\n- fiber.actualDuration\n+ actualDuration\n );\n }\n }\n@@ -864,9 +883,10 @@ export function attach(\n committedFibers: [],\n commitTime: performance.now() - profilingStartTime,\n interactions: Array.from(root.memoizedInteractions).map(\n- ({ name, timestamp }: Interaction) => ({\n- name,\n- timestamp: timestamp - profilingStartTime,\n+ (interaction: Interaction) => ({\n+ id: getInteractionID(interaction),\n+ name: interaction.name,\n+ timestamp: interaction.timestamp - profilingStartTime,\n })\n ),\n maxActualDuration: 0,\n@@ -1360,8 +1380,6 @@ export function attach(\n type CommittedFiber = {|\n actualDuration: number,\n id: number,\n- selfDuration: number,\n- treeBaseDuration: number,\n |};\n \n type CommitProfilingData = {|\n@@ -1379,6 +1397,33 @@ export function attach(\n let profilingStartTime: number = 0;\n let rootToCommitProfilingMetadataMap: CommitProfilingMetadataMap | null = null;\n \n+ function getCommitDetails(\n+ rootID: number,\n+ commitIndex: number\n+ ): CommitDetails {\n+ const commitProfilingMetadata = ((rootToCommitProfilingMetadataMap: any): CommitProfilingMetadataMap).get(\n+ rootID\n+ );\n+ if (commitProfilingMetadata != null) {\n+ const commitProfilingData = commitProfilingMetadata[commitIndex];\n+ if (commitProfilingData != null) {\n+ return {\n+ commitIndex,\n+ interactions: commitProfilingData.interactions,\n+ committedFibers: commitProfilingData.committedFibers,\n+ rootID,\n+ };\n+ }\n+ }\n+ \/\/ TODO (profiling) Is this right? Should I return null? Does it matter?\n+ return {\n+ commitIndex,\n+ interactions: [],\n+ committedFibers: [],\n+ rootID,\n+ };\n+ }\n+\n function getProfilingSummary(rootID: number): ProfilingSummary {\n const interactions = new Set();\n const commitDurations = [];\n@@ -1428,6 +1473,7 @@ export function attach(\n \n return {\n cleanup,\n+ getCommitDetails,\n getFiberIDFromNative,\n getNativeFromReactElement,\n getProfilingSummary,\ndiff --git a\/src\/backend\/types.js b\/src\/backend\/types.js\nindex 47b0280860..64c6169a69 100644\n--- a\/src\/backend\/types.js\n+++ b\/src\/backend\/types.js\n@@ -19,11 +19,6 @@ export type FiberData = {|\n type: ElementType,\n |};\n \n-export type Interaction = {|\n- name: string,\n- timestamp: number,\n-|};\n-\n export type NativeType = {};\n export type RendererID = number;\n \n@@ -54,6 +49,22 @@ export type ReactRenderer = {\n currentDispatcherRef?: {| current: null | Dispatcher |},\n };\n \n+export type Interaction = {|\n+ id: string,\n+ name: string,\n+ timestamp: number,\n+|};\n+\n+export type CommitDetails = {|\n+ commitIndex: number,\n+ interactions: Array,\n+ committedFibers: Array<{|\n+ actualDuration: number,\n+ id: number,\n+ |}>,\n+ rootID: number,\n+|};\n+\n export type ProfilingSummary = {|\n commitDurations: Array,\n commitTimes: Array,\n@@ -64,6 +75,7 @@ export type ProfilingSummary = {|\n \n export type RendererInterface = {\n cleanup: () => void,\n+ getCommitDetails: (rootID: number, commitIndex: number) => CommitDetails,\n getNativeFromReactElement?: ?(component: Fiber) => ?NativeType,\n getFiberIDFromNative: (\n component: NativeType,\ndiff --git a\/src\/constants.js b\/src\/constants.js\nindex dcbe8aa585..1800fa8001 100644\n--- a\/src\/constants.js\n+++ b\/src\/constants.js\n@@ -3,5 +3,6 @@\n export const TREE_OPERATION_ADD = 1;\n export const TREE_OPERATION_REMOVE = 2;\n export const TREE_OPERATION_RESET_CHILDREN = 3;\n+export const TREE_OPERATION_UPDATE_TREE_BASE_DURATION = 4;\n \n export const __DEBUG__ = false;\ndiff --git a\/src\/devtools\/ProfilingCache.js b\/src\/devtools\/ProfilingCache.js\nindex b718f81f51..a5a3b255e8 100644\n--- a\/src\/devtools\/ProfilingCache.js\n+++ b\/src\/devtools\/ProfilingCache.js\n@@ -2,30 +2,110 @@\n \n import { createResource, invalidateResources } from '.\/cache';\n import Store from '.\/store';\n+import { getCommitTree } from 'src\/devtools\/views\/Profiler\/CommitTreeBuilder';\n \n import type { Resource } from '.\/cache';\n import type { Bridge } from '..\/types';\n-import type { ProfilingSummary as ProfilingSummaryBackend } from 'src\/backend\/types';\n-import type { ProfilingSummary as ProfilingSummaryFrontend } from 'src\/devtools\/views\/Profiler\/types';\n+import type {\n+ CommitDetails as CommitDetailsBackend,\n+ ProfilingSummary as ProfilingSummaryBackend,\n+} from 'src\/backend\/types';\n+import type {\n+ CommitDetails as CommitDetailsFrontend,\n+ CommitTree,\n+ ProfilingSummary as ProfilingSummaryFrontend,\n+} from 'src\/devtools\/views\/Profiler\/types';\n \n-type RendererAndRootID = {|\n+type CommitDetailsParams = {|\n+ commitIndex: number,\n+ rootID: number,\n+ rendererID: number,\n+|};\n+\n+type CommitTreeParams = {|\n+ commitIndex: number,\n+ profilingSummary: ProfilingSummaryFrontend,\n+ rendererID: number,\n+ rootID: number,\n+|};\n+\n+type ProfilingSummaryParams = {|\n rootID: number,\n rendererID: number,\n |};\n \n export default class ProfilingCache {\n+ _pendingCommitDetailsMap: Map<\n+ string,\n+ (commitDetails: CommitDetailsFrontend) => void\n+ > = new Map();\n+\n _pendingProfileSummaryMap: Map<\n number,\n (profilingSummary: ProfilingSummaryFrontend) => void\n > = new Map();\n \n- ProfilingSummary: Resource;\n+ CommitDetails: Resource;\n+ CommitTree: Resource;\n+ ProfilingSummary: Resource;\n \n constructor(bridge: Bridge, store: Store) {\n+ this.CommitDetails = createResource(\n+ ({ commitIndex, rendererID, rootID }: CommitDetailsParams) => {\n+ return new Promise(resolve => {\n+ if (!store.profilingOperations.has(rootID)) {\n+ \/\/ If no profiling data was recorded for this root, skip the round trip.\n+ resolve({\n+ committedFibers: [],\n+ interactions: [],\n+ });\n+ } else {\n+ this._pendingCommitDetailsMap.set(\n+ `${rootID}-${commitIndex}`,\n+ resolve\n+ );\n+ bridge.send('getCommitDetails', {\n+ commitIndex,\n+ rendererID,\n+ rootID,\n+ });\n+ }\n+ });\n+ },\n+ ({ commitIndex, rendererID, rootID }: CommitDetailsParams) =>\n+ `${rootID}-${commitIndex}`\n+ );\n+\n+ this.CommitTree = createResource(\n+ ({\n+ commitIndex,\n+ profilingSummary,\n+ rendererID,\n+ rootID,\n+ }: CommitTreeParams) =>\n+ new Promise(resolve =>\n+ resolve(\n+ getCommitTree({\n+ commitIndex,\n+ profilingSummary,\n+ rendererID,\n+ rootID,\n+ store,\n+ })\n+ )\n+ ),\n+ ({\n+ commitIndex,\n+ profilingSummary,\n+ rendererID,\n+ rootID,\n+ }: CommitTreeParams) => `${rootID}-${commitIndex}`\n+ );\n+\n this.ProfilingSummary = createResource(\n- ({ rendererID, rootID }: RendererAndRootID) => {\n+ ({ rendererID, rootID }: ProfilingSummaryParams) => {\n return new Promise(resolve => {\n- if (!store._profilingOperations.has(rootID)) {\n+ if (!store.profilingOperations.has(rootID)) {\n \/\/ If no profiling data was recorded for this root, skip the round trip.\n resolve({\n commitDurations: [],\n@@ -39,17 +119,38 @@ export default class ProfilingCache {\n }\n });\n },\n- ({ rendererID, rootID }: RendererAndRootID) => rootID\n+ ({ rendererID, rootID }: ProfilingSummaryParams) => rootID\n );\n \n+ bridge.addListener('commitDetails', this.onCommitDetails);\n bridge.addListener('profilingSummary', this.onProfileSummary);\n }\n \n invalidate() {\n invalidateResources();\n- this._pendingProfileSummaryMap = new Map();\n+\n+ this._pendingCommitDetailsMap.clear();\n+ this._pendingProfileSummaryMap.clear();\n }\n \n+ onCommitDetails = ({\n+ commitIndex,\n+ committedFibers,\n+ interactions,\n+ rootID,\n+ }: CommitDetailsBackend) => {\n+ const key = `${rootID}-${commitIndex}`;\n+ const resolve = this._pendingCommitDetailsMap.get(key);\n+ if (resolve != null) {\n+ this._pendingCommitDetailsMap.delete(key);\n+\n+ resolve({\n+ committedFibers,\n+ interactions,\n+ });\n+ }\n+ };\n+\n onProfileSummary = ({\n commitDurations,\n commitTimes,\n@@ -59,6 +160,7 @@ export default class ProfilingCache {\n }: ProfilingSummaryBackend) => {\n const resolve = this._pendingProfileSummaryMap.get(rootID);\n if (resolve != null) {\n+ this._pendingProfileSummaryMap.delete(rootID);\n const initialTreeBaseDurationsMap = new Map();\n for (let i = 0; i < initialTreeBaseDurations.length; i++) {\n initialTreeBaseDurationsMap.set(\ndiff --git a\/src\/devtools\/store.js b\/src\/devtools\/store.js\nindex ba731a0fd1..76fa683fa4 100644\n--- a\/src\/devtools\/store.js\n+++ b\/src\/devtools\/store.js\n@@ -5,6 +5,7 @@ import {\n TREE_OPERATION_ADD,\n TREE_OPERATION_REMOVE,\n TREE_OPERATION_RESET_CHILDREN,\n+ TREE_OPERATION_UPDATE_TREE_BASE_DURATION,\n } from '..\/constants';\n import { ElementTypeRoot } from '.\/types';\n import { utfDecodeString } from '..\/utils';\n@@ -12,7 +13,7 @@ import { __DEBUG__ } from '..\/constants';\n import ProfilingCache from '.\/ProfilingCache';\n \n import type { ElementType } from '.\/types';\n-import type { Element } from '.\/views\/elements\/types';\n+import type { Element } from '.\/views\/Elements\/types';\n import type { Bridge } from '..\/types';\n \n const debug = (methodName, ...args) => {\n@@ -119,6 +120,14 @@ export default class Store extends EventEmitter {\n return this._profilingCache;\n }\n \n+ get profilingOperations(): Map> {\n+ return this._profilingOperations;\n+ }\n+\n+ get profilingSnapshot(): Map {\n+ return this._profilingSnapshot;\n+ }\n+\n get revision(): number {\n return this._revision;\n }\n@@ -507,6 +516,12 @@ export default class Store extends EventEmitter {\n \n weightDelta = childWeight + 1 - prevWeight;\n break;\n+ case TREE_OPERATION_UPDATE_TREE_BASE_DURATION:\n+ \/\/ Base duration updates are only sent while profiling is in progress.\n+ \/\/ We can ignore them at this point.\n+ \/\/ The profiler UI uses them lazily in order to generate the tree.\n+ i = i + 3;\n+ break;\n default:\n throw Error(`Unsupported Bridge operation ${operation}`);\n }\ndiff --git a\/src\/devtools\/views\/Profiler\/CommitFlamegraph.css b\/src\/devtools\/views\/Profiler\/CommitFlamegraph.css\nnew file mode 100644\nindex 0000000000..e69de29bb2\ndiff --git a\/src\/devtools\/views\/Profiler\/CommitFlamegraph.js b\/src\/devtools\/views\/Profiler\/CommitFlamegraph.js\nnew file mode 100644\nindex 0000000000..fe820621d6\n--- \/dev\/null\n+++ b\/src\/devtools\/views\/Profiler\/CommitFlamegraph.js\n@@ -0,0 +1,35 @@\n+\/\/ @flow\n+\n+import React, { useContext } from 'react';\n+import { ProfilerContext } from '.\/ProfilerContext';\n+import { StoreContext } from '..\/context';\n+\n+import styles from '.\/CommitFlamegraph.css';\n+\n+export default function CommitFlamegraph(_: {||}) {\n+ const { rendererID, rootID, selectedCommitIndex } = useContext(\n+ ProfilerContext\n+ );\n+\n+ const { profilingCache } = useContext(StoreContext);\n+\n+ const profilingSummary = profilingCache.ProfilingSummary.read({\n+ rendererID: ((rendererID: any): number),\n+ rootID: ((rootID: any): number),\n+ });\n+\n+ const commitDetails = profilingCache.CommitDetails.read({\n+ commitIndex: ((selectedCommitIndex: any): number),\n+ rendererID: ((rendererID: any): number),\n+ rootID: ((rootID: any): number),\n+ });\n+\n+ const commitTree = profilingCache.CommitTree.read({\n+ commitIndex: ((selectedCommitIndex: any): number),\n+ profilingSummary,\n+ rendererID: ((rendererID: any): number),\n+ rootID: ((rootID: any): number),\n+ });\n+\n+ return 'Coming soon: Flamegraph';\n+}\ndiff --git a\/src\/devtools\/views\/Profiler\/CommitRanked.css b\/src\/devtools\/views\/Profiler\/CommitRanked.css\nnew file mode 100644\nindex 0000000000..e69de29bb2\ndiff --git a\/src\/devtools\/views\/Profiler\/CommitRanked.js b\/src\/devtools\/views\/Profiler\/CommitRanked.js\nnew file mode 100644\nindex 0000000000..8e50869a37\n--- \/dev\/null\n+++ b\/src\/devtools\/views\/Profiler\/CommitRanked.js\n@@ -0,0 +1,35 @@\n+\/\/ @flow\n+\n+import React, { useContext } from 'react';\n+import { ProfilerContext } from '.\/ProfilerContext';\n+import { StoreContext } from '..\/context';\n+\n+import styles from '.\/CommitRanked.css';\n+\n+export default function CommitRanked(_: {||}) {\n+ const { rendererID, rootID, selectedCommitIndex } = useContext(\n+ ProfilerContext\n+ );\n+\n+ const { profilingCache } = useContext(StoreContext);\n+\n+ const profilingSummary = profilingCache.ProfilingSummary.read({\n+ rendererID: ((rendererID: any): number),\n+ rootID: ((rootID: any): number),\n+ });\n+\n+ const commitDetails = profilingCache.CommitDetails.read({\n+ commitIndex: ((selectedCommitIndex: any): number),\n+ rendererID: ((rendererID: any): number),\n+ rootID: ((rootID: any): number),\n+ });\n+\n+ const commitTree = profilingCache.CommitTree.read({\n+ commitIndex: ((selectedCommitIndex: any): number),\n+ profilingSummary,\n+ rendererID: ((rendererID: any): number),\n+ rootID: ((rootID: any): number),\n+ });\n+\n+ return 'Coming soon: Ranked';\n+}\ndiff --git a\/src\/devtools\/views\/Profiler\/CommitTreeBuilder.js b\/src\/devtools\/views\/Profiler\/CommitTreeBuilder.js\nnew file mode 100644\nindex 0000000000..449833c1b0\n--- \/dev\/null\n+++ b\/src\/devtools\/views\/Profiler\/CommitTreeBuilder.js\n@@ -0,0 +1,235 @@\n+\/\/ @flow\n+\n+import {\n+ TREE_OPERATION_ADD,\n+ TREE_OPERATION_REMOVE,\n+ TREE_OPERATION_RESET_CHILDREN,\n+ TREE_OPERATION_UPDATE_TREE_BASE_DURATION,\n+} from 'src\/constants';\n+import { utfDecodeString } from 'src\/utils';\n+import { ElementTypeRoot } from 'src\/devtools\/types';\n+import Store from 'src\/devtools\/store';\n+\n+import type { ElementType } from 'src\/devtools\/types';\n+import type {\n+ CommitTree,\n+ Node,\n+ ProfilingSummary as ProfilingSummaryFrontend,\n+} from 'src\/devtools\/views\/Profiler\/types';\n+\n+const rootToCommitTreeMap: Map> = new Map();\n+\n+export function getCommitTree({\n+ commitIndex,\n+ profilingSummary,\n+ rendererID,\n+ rootID,\n+ store,\n+}: {|\n+ commitIndex: number,\n+ profilingSummary: ProfilingSummaryFrontend,\n+ rendererID: number,\n+ rootID: number,\n+ store: Store,\n+|}): CommitTree {\n+ if (store.profilingSnapshot.has(rootID)) {\n+ if (!rootToCommitTreeMap.has(rootID)) {\n+ rootToCommitTreeMap.set(rootID, []);\n+ }\n+\n+ const commitTrees = ((rootToCommitTreeMap.get(\n+ rootID\n+ ): any): Array);\n+\n+ if (commitIndex < commitTrees.length) {\n+ return commitTrees[commitIndex];\n+ }\n+\n+ \/\/ Commits are generated sequentially and cached.\n+ \/\/ If this is the very first commit, start with the cached snapshot and apply the first mutation.\n+ \/\/ Otherwise load (or generate) the previous commit and append a mutation to it.\n+ if (commitIndex === 0) {\n+ const initialCommitTree = {\n+ nodes: new Map(),\n+ rootID,\n+ };\n+\n+ \/\/ Construct the initial tree.\n+ const queue: Array = [rootID];\n+ while (queue.length > 0) {\n+ const currentID = queue.pop();\n+ const currentNode = ((store.profilingSnapshot.get(\n+ currentID\n+ ): any): Node);\n+\n+ initialCommitTree.nodes.set(currentID, {\n+ id: currentID,\n+ children: currentNode.children,\n+ displayName: currentNode.displayName,\n+ key: currentNode.key,\n+ parentID: 0,\n+ treeBaseDuration: ((profilingSummary.initialTreeBaseDurations.get(\n+ currentID\n+ ): any): number),\n+ });\n+\n+ queue.push(...currentNode.children);\n+ }\n+\n+ \/\/ Mutate the tree\n+ const commitOperations = store.profilingOperations.get(rootID);\n+ if (commitOperations != null && commitIndex < commitOperations.length) {\n+ const commitTree = updateTree(\n+ initialCommitTree,\n+ commitOperations[commitIndex]\n+ );\n+ commitTrees.push(commitTree);\n+ return commitTree;\n+ }\n+ } else {\n+ const previousCommitTree = getCommitTree({\n+ commitIndex: commitIndex - 1,\n+ profilingSummary,\n+ rendererID,\n+ rootID,\n+ store,\n+ });\n+ const commitOperations = store.profilingOperations.get(rootID);\n+ if (commitOperations != null && commitIndex < commitOperations.length) {\n+ const commitTree = updateTree(\n+ previousCommitTree,\n+ commitOperations[commitIndex]\n+ );\n+ commitTrees.push(commitTree);\n+ return commitTree;\n+ }\n+ }\n+ }\n+\n+ \/\/ TODO (profiling) Should I throw here? Is this ever expected?\n+ return {\n+ nodes: new Map(),\n+ rootID,\n+ };\n+}\n+\n+function updateTree(\n+ commitTree: CommitTree,\n+ operations: Uint32Array\n+): CommitTree {\n+ const nodes = new Map(commitTree.nodes);\n+\n+ let i = 2;\n+ while (i < operations.length) {\n+ let id: number = ((null: any): number);\n+ let node: Node = ((null: any): Node);\n+ let parentID: number = ((null: any): number);\n+ let parentNode: Node = ((null: any): Node);\n+ let type: ElementType = ((null: any): ElementType);\n+\n+ const operation = operations[i];\n+\n+ switch (operation) {\n+ case TREE_OPERATION_ADD:\n+ id = ((operations[i + 1]: any): number);\n+ type = ((operations[i + 2]: any): ElementType);\n+\n+ i = i + 3;\n+\n+ if (type === ElementTypeRoot) {\n+ \/\/ No-op\n+ } else {\n+ parentID = ((operations[i]: any): number);\n+ i++;\n+\n+ i++; \/\/ ownerID\n+\n+ const displayNameLength = operations[i];\n+ i++;\n+ const displayName =\n+ displayNameLength === 0\n+ ? null\n+ : utfDecodeString(\n+ (operations.slice(i, i + displayNameLength): any)\n+ );\n+ i += displayNameLength;\n+\n+ const keyLength = operations[i];\n+ i++;\n+ const key =\n+ keyLength === 0\n+ ? null\n+ : utfDecodeString((operations.slice(i, i + keyLength): any));\n+ i += +keyLength;\n+\n+ if (nodes.has(id)) {\n+ \/\/ The renderer's tree walking approach sometimes mounts the same Fiber twice with Suspense and Lazy.\n+ \/\/ For now, we avoid adding it to the tree twice by checking if it's already been mounted.\n+ \/\/ Maybe in the future we'll revisit this.\n+ } else {\n+ parentNode = ((nodes.get(parentID): any): Node);\n+ parentNode.children = parentNode.children.concat(id);\n+\n+ const node: Node = {\n+ children: [],\n+ displayName,\n+ id,\n+ key,\n+ parentID,\n+ treeBaseDuration: 0, \/\/ This will be updated by a subsequent operation\n+ };\n+\n+ nodes.set(id, node);\n+ }\n+ }\n+ break;\n+ case TREE_OPERATION_REMOVE:\n+ id = ((operations[i + 1]: any): number);\n+\n+ i = i + 2;\n+\n+ node = ((nodes.get(id): any): Node);\n+ parentID = node.parentID;\n+\n+ nodes.delete(id);\n+\n+ parentNode = ((nodes.get(parentID): any): Node);\n+ if (parentNode == null) {\n+ \/\/ No-op\n+ } else {\n+ parentNode.children = parentNode.children.filter(\n+ childID => childID !== id\n+ );\n+ }\n+ break;\n+ case TREE_OPERATION_RESET_CHILDREN:\n+ id = ((operations[i + 1]: any): number);\n+ const numChildren = ((operations[i + 2]: any): number);\n+ const children = ((operations.slice(\n+ i + 3,\n+ i + 3 + numChildren\n+ ): any): Array);\n+\n+ i = i + 3 + numChildren;\n+\n+ node = ((nodes.get(id): any): Node);\n+ node.children = Array.from(children);\n+ break;\n+ case TREE_OPERATION_UPDATE_TREE_BASE_DURATION:\n+ id = operations[i + 1];\n+\n+ node = ((nodes.get(id): any): Node);\n+ node.treeBaseDuration = operations[i + 2];\n+\n+ i = i + 3;\n+ break;\n+ default:\n+ throw Error(`Unsupported Bridge operation ${operation}`);\n+ }\n+ }\n+\n+ return {\n+ nodes,\n+ rootID: commitTree.rootID,\n+ };\n+}\ndiff --git a\/src\/devtools\/views\/Profiler\/Profiler.css b\/src\/devtools\/views\/Profiler\/Profiler.css\nindex 7829df4dff..65c8c6bf6c 100644\n--- a\/src\/devtools\/views\/Profiler\/Profiler.css\n+++ b\/src\/devtools\/views\/Profiler\/Profiler.css\n@@ -81,3 +81,13 @@\n font-size: var(--font-size-sans-large);\n padding: 0.5rem;\n }\n+\n+.Fallback {\n+ width: 100%;\n+ height: 100%;\n+ display: flex;\n+ align-items: center;\n+ justify-content: center;\n+ font-size: var(--font-size-sans-large);\n+ color: var(--color-dim);\n+}\ndiff --git a\/src\/devtools\/views\/Profiler\/Profiler.js b\/src\/devtools\/views\/Profiler\/Profiler.js\nindex e86f1b8cf9..add7926922 100644\n--- a\/src\/devtools\/views\/Profiler\/Profiler.js\n+++ b\/src\/devtools\/views\/Profiler\/Profiler.js\n@@ -5,6 +5,8 @@ import { ProfilerContext } from '.\/ProfilerContext';\n import Button from '..\/Button';\n import ButtonIcon from '..\/ButtonIcon';\n import TabBar from '..\/TabBar';\n+import CommitFlamegraph from '.\/CommitFlamegraph';\n+import CommitRanked from '.\/CommitRanked';\n import FilterModal from '.\/FilterModal';\n import RecordToggle from '.\/RecordToggle';\n import SnapshotSelector from '.\/SnapshotSelector';\n@@ -12,24 +14,41 @@ import SnapshotSelector from '.\/SnapshotSelector';\n import styles from '.\/Profiler.css';\n \n export default function Profiler(_: {||}) {\n- const { hasProfilingData, isProfiling } = useContext(ProfilerContext);\n+ const { hasProfilingData, isProfiling, rootHasProfilingData } = useContext(\n+ ProfilerContext\n+ );\n \n- if (isProfiling || !hasProfilingData) {\n- return ;\n- } else {\n+ if (isProfiling || !rootHasProfilingData) {\n return (\n- }>\n- \n- <\/Suspense>\n+ \n );\n+ } else {\n+ return ;\n }\n }\n \n \/\/ This view is rendered when there is no profiler data (either we haven't profiled yet or we're currently profiling).\n \/\/ Nothing in this view's subtree suspends.\n \/\/ By not suspending while profiling is in progress, we avoid potential cache invalidation trickiness.\n-function NonSuspendingProfiler({ isProfiling }: {| isProfiling: boolean |}) {\n- const view = isProfiling ? : ;\n+\/\/ NOTE that the structure of this UI should mirror SuspendingProfiler.\n+function NonSuspendingProfiler({\n+ hasProfilingData,\n+ isProfiling,\n+}: {|\n+ hasProfilingData: boolean,\n+ isProfiling: boolean,\n+|}) {\n+ let view = null;\n+ if (isProfiling) {\n+ view = ;\n+ } else if (!hasProfilingData) {\n+ view = ;\n+ } else {\n+ view = ;\n+ }\n \n return (\n

\n@@ -58,21 +77,33 @@ function NonSuspendingProfiler({ isProfiling }: {| isProfiling: boolean |}) {\n \n \/\/ TODO (profiling) Real fallback UI\n function ProfilerFallback() {\n- return

Loading...<\/div>;\n+ return

Loading...<\/div>;\n }\n \n \/\/ This view is rendered when there is profiler data (even though there may not be any for the currently selected root).\n \/\/ This view's subtree uses suspense to request profiler data from the backend.\n-function SuspendingProfiler(_: {||}) {\n+\/\/ NOTE that the structure of this UI should mirror NonSuspendingProfiler.\n+function SuspendingProfiler() {\n const [tab, setTab] = useState('flame-chart');\n const [isFilterModalShowing, setIsFilterModalShowing] = useState(false);\n \n const showFilterModal = useCallback(() => setIsFilterModalShowing(true));\n const dismissFilterModal = useCallback(() => setIsFilterModalShowing(false));\n \n- \/\/ TODO (profiling) Show selected \"tab\" view\n- \/\/ TODO (profiling) Handle cases: no selected commit, no data for root\n- const view =

Coming soon...<\/div>;\n+ let view = null;\n+ switch (tab) {\n+ case 'flame-chart':\n+ view = ;\n+ break;\n+ case 'ranked-chart':\n+ view = ;\n+ break;\n+ case 'interactions':\n+ view =

Coming soon: Interactions<\/div>; \/\/ TODO (profiling)\n+ break;\n+ default:\n+ break;\n+ }\n \n return (\n

\n@@ -95,19 +126,23 @@ function SuspendingProfiler(_: {||}) {\n

dillon1000/react

Files changed