{title}<\/title>\n+ <title>{label}<\/title>\n <rect\n width={width}\n height={height}\ndiff --git a\/src\/devtools\/views\/Profiler\/CommitFlamegraph.css b\/src\/devtools\/views\/Profiler\/CommitFlamegraph.css\nindex e69de29bb2..bc441e485e 100644\n--- a\/src\/devtools\/views\/Profiler\/CommitFlamegraph.css\n+++ b\/src\/devtools\/views\/Profiler\/CommitFlamegraph.css\n@@ -0,0 +1,5 @@\n+.Container {\n+ width: 100%;\n+ height: 100%;\n+ padding: 0.5rem;\n+}\ndiff --git a\/src\/devtools\/views\/Profiler\/CommitFlamegraph.js b\/src\/devtools\/views\/Profiler\/CommitFlamegraph.js\nindex 7e5c533ce3..75967d4b59 100644\n--- a\/src\/devtools\/views\/Profiler\/CommitFlamegraph.js\n+++ b\/src\/devtools\/views\/Profiler\/CommitFlamegraph.js\n@@ -1,16 +1,64 @@\n \/\/ @flow\n \n-import React, { useContext } from 'react';\n+import React, { useCallback, useContext, useMemo } from 'react';\n+import AutoSizer from 'react-virtualized-auto-sizer';\n+import { FixedSizeList } from 'react-window';\n import { ProfilerContext } from '.\/ProfilerContext';\n+import NoCommitData from '.\/NoCommitData';\n+import CommitFlamegraphListItem from '.\/CommitFlamegraphListItem';\n+import { barHeight } from '.\/constants';\n+import { scale } from '.\/utils';\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+import type { ChartData, ChartNode } from '.\/FlamegraphChartBuilder';\n+\n+export type ItemData = {|\n+ chartData: ChartData,\n+ scaleX: (value: number, fallbackValue: number) => number,\n+ selectedChartNode: ChartNode,\n+ selectedChartNodeIndex: number,\n+ selectFiber: (id: number | null) => void,\n+ width: number,\n+|};\n+\n+export default function CommitFlamegraphAutoSizer(_: {||}) {\n+ const { selectFiber } = useContext(ProfilerContext);\n+ const deselectCurrentFiber = useCallback(\n+ event => {\n+ event.stopPropagation();\n+ selectFiber(null);\n+ },\n+ [selectFiber]\n );\n \n+ return (\n+ <div className={styles.Container} onClick={deselectCurrentFiber}>\n+ <AutoSizer>\n+ {({ height, width }) => (\n+ <CommitFlamegraph height={height} width={width} \/>\n+ )}\n+ <\/AutoSizer>\n+ <\/div>\n+ );\n+}\n+\n+function CommitFlamegraph({\n+ height,\n+ width,\n+}: {|\n+ height: number,\n+ width: number,\n+|}) {\n+ const {\n+ rendererID,\n+ rootID,\n+ selectedCommitIndex,\n+ selectFiber,\n+ selectedFiberID,\n+ } = useContext(ProfilerContext);\n+\n const { profilingCache } = useContext(StoreContext);\n \n const profilingSummary = profilingCache.ProfilingSummary.read({\n@@ -31,5 +79,58 @@ export default function CommitFlamegraph(_: {||}) {\n rootID: ((rootID: any): number),\n });\n \n- return 'Coming soon: Flamegraph';\n+ const chartData = profilingCache.getFlamegraphChartData({\n+ commitDetails,\n+ commitIndex: ((selectedCommitIndex: any): number),\n+ commitTree,\n+ rootID: ((rootID: any): number),\n+ });\n+\n+ const selectedChartNodeIndex = useMemo(\n+ () =>\n+ selectedFiberID === null\n+ ? 0\n+ : ((chartData.idToDepthMap.get(selectedFiberID): any): number) - 1,\n+ [chartData, selectedFiberID]\n+ );\n+\n+ const selectedChartNode = useMemo(() => {\n+ if (selectedFiberID === null) {\n+ return chartData.rows[0][0];\n+ }\n+ return ((chartData.rows[selectedChartNodeIndex].find(\n+ chartNode => chartNode.id === selectedFiberID\n+ ): any): ChartNode);\n+ }, [chartData, selectedFiberID, selectedChartNodeIndex]);\n+\n+ const itemData = useMemo<ItemData>(\n+ () => ({\n+ chartData,\n+ scaleX: scale(0, selectedChartNode.treeBaseDuration, 0, width),\n+ selectedChartNode,\n+ selectedChartNodeIndex,\n+ selectFiber,\n+ width,\n+ }),\n+ [chartData, selectedChartNode, selectedChartNodeIndex, selectFiber, width]\n+ );\n+\n+ \/\/ If a commit contains no fibers with an actualDuration > 0,\n+ \/\/ Display a fallback message.\n+ if (chartData.depth === 0) {\n+ return <NoCommitData \/>;\n+ }\n+\n+ return (\n+ <FixedSizeList\n+ height={height}\n+ innerElementType=\"svg\"\n+ itemCount={chartData.depth}\n+ itemData={itemData}\n+ itemSize={barHeight}\n+ width={width}\n+ >\n+ {CommitFlamegraphListItem}\n+ <\/FixedSizeList>\n+ );\n }\ndiff --git a\/src\/devtools\/views\/Profiler\/CommitFlamegraphListItem.js b\/src\/devtools\/views\/Profiler\/CommitFlamegraphListItem.js\nnew file mode 100644\nindex 0000000000..7769381dfa\n--- \/dev\/null\n+++ b\/src\/devtools\/views\/Profiler\/CommitFlamegraphListItem.js\n@@ -0,0 +1,102 @@\n+\/\/ @flow\n+\n+import React, { Fragment, useCallback } from 'react';\n+import { barHeight, barWidthThreshold } from '.\/constants';\n+import { getGradientColor } from '.\/utils';\n+import ChartNode from '.\/ChartNode';\n+\n+import type { ItemData } from '.\/CommitFlamegraph';\n+\n+export default function CommitFlamegraphListItem({\n+ data,\n+ index,\n+ style,\n+}: {\n+ data: ItemData,\n+ index: number,\n+ style: Object,\n+}) {\n+ const {\n+ chartData,\n+ scaleX,\n+ selectedChartNode,\n+ selectedChartNodeIndex,\n+ selectFiber,\n+ width,\n+ } = data;\n+ const { maxSelfDuration, rows } = chartData;\n+\n+ const handleClick = useCallback(\n+ (event: MouseEvent, id: number) => {\n+ event.stopPropagation();\n+ selectFiber(id);\n+ },\n+ [selectFiber]\n+ );\n+\n+ \/\/ List items are absolutely positioned using the CSS \"top\" attribute.\n+ \/\/ The \"left\" value will always be 0.\n+ \/\/ Since height is fixed, and width is based on the node's duration,\n+ \/\/ We can ignore those values as well.\n+ const top = parseInt(style.top, 10);\n+\n+ const row = rows[index];\n+\n+ let selectedNodeOffset = scaleX(selectedChartNode.offset, width);\n+\n+ return (\n+ <Fragment>\n+ {row.map(chartNode => {\n+ const {\n+ actualDuration,\n+ didRender,\n+ id,\n+ name,\n+ offset,\n+ selfDuration,\n+ treeBaseDuration,\n+ } = chartNode;\n+\n+ const nodeOffset = scaleX(offset, width);\n+ const nodeWidth = scaleX(treeBaseDuration, width);\n+\n+ \/\/ Filter out nodes that are too small to see or click.\n+ \/\/ This also helps render large trees faster.\n+ if (nodeWidth < barWidthThreshold) {\n+ return null;\n+ }\n+\n+ \/\/ Filter out nodes that are outside of the horizontal window.\n+ if (\n+ nodeOffset + nodeWidth < selectedNodeOffset ||\n+ nodeOffset > selectedNodeOffset + width\n+ ) {\n+ return null;\n+ }\n+\n+ let color = 'var(--color-commit-did-not-render)';\n+ let label = name;\n+ if (didRender) {\n+ color = getGradientColor(selfDuration \/ maxSelfDuration);\n+ label = `${name} (${selfDuration.toFixed(\n+ 1\n+ )}ms of ${actualDuration.toFixed(1)}ms)`;\n+ }\n+\n+ return (\n+ <ChartNode\n+ color={color}\n+ height={barHeight}\n+ isDimmed={index < selectedChartNodeIndex}\n+ key={id}\n+ label={label}\n+ onClick={event => handleClick(event, id)}\n+ width={nodeWidth}\n+ x={nodeOffset - selectedNodeOffset}\n+ y={top}\n+ \/>\n+ );\n+ })}\n+ <\/Fragment>\n+ );\n+}\ndiff --git a\/src\/devtools\/views\/Profiler\/CommitRankedListItem.js b\/src\/devtools\/views\/Profiler\/CommitRankedListItem.js\nindex d47ff5059a..4ed5500aaf 100644\n--- a\/src\/devtools\/views\/Profiler\/CommitRankedListItem.js\n+++ b\/src\/devtools\/views\/Profiler\/CommitRankedListItem.js\n@@ -42,7 +42,6 @@ export default function CommitRankedListItem({\n key={node.id}\n label={node.label}\n onClick={handleClick}\n- title={node.title}\n width={Math.max(minBarWidth, scaleX(node.value, width))}\n x={0}\n y={top}\ndiff --git a\/src\/devtools\/views\/Profiler\/CommitTreeBuilder.js b\/src\/devtools\/views\/Profiler\/CommitTreeBuilder.js\nindex 24b92d665a..4a9dbc5f80 100644\n--- a\/src\/devtools\/views\/Profiler\/CommitTreeBuilder.js\n+++ b\/src\/devtools\/views\/Profiler\/CommitTreeBuilder.js\n@@ -264,7 +264,7 @@ function updateTree(\n id = operations[i + 1];\n \n node = ((nodes.get(id): any): Node);\n- node.treeBaseDuration = operations[i + 2];\n+ node.treeBaseDuration = operations[i + 2] \/ 1000; \/\/ Convert microseconds back to milliseconds;\n \n debug(\n 'Update',\ndiff --git a\/src\/devtools\/views\/Profiler\/FlamegraphChartBuilder.js b\/src\/devtools\/views\/Profiler\/FlamegraphChartBuilder.js\nnew file mode 100644\nindex 0000000000..347fa113b3\n--- \/dev\/null\n+++ b\/src\/devtools\/views\/Profiler\/FlamegraphChartBuilder.js\n@@ -0,0 +1,112 @@\n+\/\/ @flow\n+\n+import { calculateSelfDuration } from '.\/utils';\n+\n+import type { CommitDetails, CommitTree, Node } from '.\/types';\n+\n+export type ChartNode = {|\n+ actualDuration: number,\n+ didRender: boolean,\n+ id: number,\n+ label: string,\n+ name: string,\n+ offset: number,\n+ selfDuration: number,\n+ treeBaseDuration: number,\n+|};\n+\n+export type ChartData = {|\n+ depth: number,\n+ idToDepthMap: Map<number, number>,\n+ maxSelfDuration: number,\n+ rows: Array<Array<ChartNode>>,\n+|};\n+\n+const cachedChartData: Map<string, ChartData> = new Map();\n+\n+export function getChartData({\n+ commitDetails,\n+ commitIndex,\n+ commitTree,\n+ rootID,\n+}: {|\n+ commitDetails: CommitDetails,\n+ commitIndex: number,\n+ commitTree: CommitTree,\n+ rootID: number,\n+|}): ChartData {\n+ const key = `${rootID}-${commitIndex}`;\n+\n+ if (cachedChartData.has(key)) {\n+ return ((cachedChartData.get(key): any): ChartData);\n+ }\n+\n+ const { nodes } = commitTree;\n+ const { actualDurations } = commitDetails;\n+\n+ const idToDepthMap: Map<number, number> = new Map();\n+ const rows: Array<Array<ChartNode>> = [];\n+\n+ let maxDepth = 0;\n+ let maxSelfDuration = 0;\n+\n+ \/\/ Generate flame graph structure using tree base durations.\n+ const walkTree = (\n+ id: number,\n+ parentOffset: number = 0,\n+ currentDepth: number = 1\n+ ) => {\n+ idToDepthMap.set(id, currentDepth);\n+\n+ const node = ((nodes.get(id): any): Node);\n+ const name = node.displayName || 'Unknown';\n+\n+ const selfDuration = calculateSelfDuration(id, commitTree, commitDetails);\n+\n+ maxDepth = Math.max(maxDepth, currentDepth);\n+ maxSelfDuration = Math.max(maxSelfDuration, selfDuration);\n+\n+ const chartNode: ChartNode = {\n+ actualDuration: actualDurations.get(id) || 0,\n+ didRender: actualDurations.has(id),\n+ id,\n+ label: `${name} (${selfDuration.toFixed(1)}ms)`,\n+ name,\n+ offset: parentOffset,\n+ selfDuration,\n+ treeBaseDuration: node.treeBaseDuration,\n+ };\n+\n+ if (currentDepth > rows.length) {\n+ rows.push([chartNode]);\n+ } else {\n+ rows[currentDepth - 1].push(chartNode);\n+ }\n+\n+ node.children.forEach(childID => {\n+ const childChartNode = walkTree(childID, parentOffset, currentDepth + 1);\n+ parentOffset += childChartNode.treeBaseDuration;\n+ });\n+\n+ return chartNode;\n+ };\n+\n+ \/\/ Skip over the root; we don't want to show it in the flamegraph.\n+ const root = ((nodes.get(rootID): any): Node);\n+ walkTree(root.children[0]);\n+\n+ const chartData = {\n+ depth: maxDepth,\n+ idToDepthMap,\n+ maxSelfDuration,\n+ rows,\n+ };\n+\n+ cachedChartData.set(key, chartData);\n+\n+ return chartData;\n+}\n+\n+export function invalidateChartData(): void {\n+ cachedChartData.clear();\n+}\ndiff --git a\/src\/devtools\/views\/Profiler\/RankedChartBuilder.js b\/src\/devtools\/views\/Profiler\/RankedChartBuilder.js\nindex 0b3115b023..bf673f05d6 100644\n--- a\/src\/devtools\/views\/Profiler\/RankedChartBuilder.js\n+++ b\/src\/devtools\/views\/Profiler\/RankedChartBuilder.js\n@@ -8,7 +8,6 @@ export type ChartNode = {|\n id: number,\n label: string,\n name: string,\n- title: string,\n value: number,\n |};\n \n@@ -58,7 +57,6 @@ export function getChartData({\n id,\n label,\n name,\n- title: label,\n value: selfDuration,\n });\n });\ndiff --git a\/src\/devtools\/views\/Profiler\/constants.js b\/src\/devtools\/views\/Profiler\/constants.js\nindex 61162f61c5..2a8ece16fc 100644\n--- a\/src\/devtools\/views\/Profiler\/constants.js\n+++ b\/src\/devtools\/views\/Profiler\/constants.js\n@@ -1,6 +1,7 @@\n \/\/ @flow\n \n export const barHeight = 20;\n+export const barWidthThreshold = 2;\n export const maxBarWidth = 30;\n export const minBarHeight = 5;\n export const minBarWidth = 5;\n","files":[{"status":"M","path":"src\/backend\/renderer.js"},{"status":"M","path":"src\/devtools\/ProfilingCache.js"},{"status":"M","path":"src\/devtools\/views\/Profiler\/ChartNode.js"},{"status":"M","path":"src\/devtools\/views\/Profiler\/CommitFlamegraph.css"},{"status":"M","path":"src\/devtools\/views\/Profiler\/CommitFlamegraph.js"},{"status":"A","path":"src\/devtools\/views\/Profiler\/CommitFlamegraphListItem.js"},{"status":"M","path":"src\/devtools\/views\/Profiler\/CommitRankedListItem.js"},{"status":"M","path":"src\/devtools\/views\/Profiler\/CommitTreeBuilder.js"},{"status":"A","path":"src\/devtools\/views\/Profiler\/FlamegraphChartBuilder.js"},{"status":"M","path":"src\/devtools\/views\/Profiler\/RankedChartBuilder.js"},{"status":"M","path":"src\/devtools\/views\/Profiler\/constants.js"}]}</article></body></html>

{"body":"","parents":["01ad9f1da6d6db997b1b2c865b2eb36de577538d"],"commit":{"authorName":"Brian Vaughn","authorEmail":"bvaughn@fb.com","authoredAt":"2019-03-17T09:49:10-07:00","shortRevision":"c82a7fb560","subject":"First pass at flame graph chart","revision":"c82a7fb56063f241ea3213f27a536b73da7f70a7"},"patch":"diff --git a\/src\/backend\/renderer.js b\/src\/backend\/renderer.js\nindex f58d34c6b6..9adcdd4af1 100644\n--- a\/src\/backend\/renderer.js\n+++ b\/src\/backend\/renderer.js\n@@ -631,10 +631,14 @@ export function attach(\n }\n \n if (isProfiling) {\n+ \/\/ Tree base duration updates are included in the operations typed array.\n+ \/\/ So we have to convert them from milliseconds to microseconds so we can send them as ints.\n+ const treeBaseDuration = Math.floor(fiber.treeBaseDuration * 1000);\n+\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+ operation[2] = treeBaseDuration;\n addOperation(operation);\n }\n }\n@@ -702,6 +706,10 @@ export function attach(\n \n if (isProfiling) {\n if (treeBaseDuration !== fiber.alternate.treeBaseDuration) {\n+ \/\/ Tree base duration updates are included in the operations typed array.\n+ \/\/ So we have to convert them from milliseconds to microseconds so we can send them as ints.\n+ const treeBaseDuration = Math.floor(fiber.treeBaseDuration * 1000);\n+\n const operation = new Uint32Array(3);\n operation[0] = TREE_OPERATION_UPDATE_TREE_BASE_DURATION;\n operation[1] = getFiberID(getPrimaryFiber(fiber));\n@@ -1443,6 +1451,8 @@ export function attach(\n ((initialTreeBaseDurationsMap: any): Map).forEach(\n (treeBaseDuration, id) => {\n if (idToRootMap.get(id) === rootID) {\n+ \/\/ We don't need to convert milliseconds to microseconds in this case,\n+ \/\/ because the profiling summary is JSON serialized.\n initialTreeBaseDurations.push(id, treeBaseDuration);\n }\n }\ndiff --git a\/src\/devtools\/ProfilingCache.js b\/src\/devtools\/ProfilingCache.js\nindex bed859d665..a1b9675dad 100644\n--- a\/src\/devtools\/ProfilingCache.js\n+++ b\/src\/devtools\/ProfilingCache.js\n@@ -6,6 +6,10 @@ import {\n getCommitTree,\n invalidateCommitTrees,\n } from 'src\/devtools\/views\/Profiler\/CommitTreeBuilder';\n+import {\n+ getChartData as getFlamegraphChartData,\n+ invalidateChartData as invalidateFlamegraphChartData,\n+} from 'src\/devtools\/views\/Profiler\/FlamegraphChartBuilder';\n import {\n getChartData as getRankedChartData,\n invalidateChartData as invalidateRankedChartData,\n@@ -22,6 +26,7 @@ import type {\n CommitTree as CommitTreeFrontend,\n ProfilingSummary as ProfilingSummaryFrontend,\n } from 'src\/devtools\/views\/Profiler\/types';\n+import type { ChartData as FlamegraphChartData } from 'src\/devtools\/views\/Profiler\/FlamegraphChartBuilder';\n import type { ChartData as RankedChartData } from 'src\/devtools\/views\/Profiler\/RankedChartBuilder';\n \n type CommitDetailsParams = {|\n@@ -130,6 +135,24 @@ export default class ProfilingCache {\n store: this._store,\n });\n \n+ getFlamegraphChartData = ({\n+ commitDetails,\n+ commitIndex,\n+ commitTree,\n+ rootID,\n+ }: {|\n+ commitDetails: CommitDetailsFrontend,\n+ commitIndex: number,\n+ commitTree: CommitTreeFrontend,\n+ rootID: number,\n+ |}): FlamegraphChartData =>\n+ getFlamegraphChartData({\n+ commitDetails,\n+ commitIndex,\n+ commitTree,\n+ rootID,\n+ });\n+\n getRankedChartData = ({\n commitDetails,\n commitIndex,\n@@ -154,6 +177,7 @@ export default class ProfilingCache {\n \n \/\/ Invalidate non-Suspense caches too.\n invalidateCommitTrees();\n+ invalidateFlamegraphChartData();\n invalidateRankedChartData();\n \n this._pendingCommitDetailsMap.clear();\ndiff --git a\/src\/devtools\/views\/Profiler\/ChartNode.js b\/src\/devtools\/views\/Profiler\/ChartNode.js\nindex 085228502d..77fa24e1e8 100644\n--- a\/src\/devtools\/views\/Profiler\/ChartNode.js\n+++ b\/src\/devtools\/views\/Profiler\/ChartNode.js\n@@ -13,7 +13,6 @@ type Props = {|\n onClick: Function,\n onDoubleClick?: Function,\n placeLabelAboveNode?: boolean,\n- title: string,\n width: number,\n x: number,\n y: number,\n@@ -28,14 +27,13 @@ export default function ChartNode({\n label,\n onClick,\n onDoubleClick,\n- title,\n width,\n x,\n y,\n }: Props) {\n return (\n \n- {title}<\/title>\n+ <title>{label}<\/title>\n <rect\n width={width}\n height={height}\ndiff --git a\/src\/devtools\/views\/Profiler\/CommitFlamegraph.css b\/src\/devtools\/views\/Profiler\/CommitFlamegraph.css\nindex e69de29bb2..bc441e485e 100644\n--- a\/src\/devtools\/views\/Profiler\/CommitFlamegraph.css\n+++ b\/src\/devtools\/views\/Profiler\/CommitFlamegraph.css\n@@ -0,0 +1,5 @@\n+.Container {\n+ width: 100%;\n+ height: 100%;\n+ padding: 0.5rem;\n+}\ndiff --git a\/src\/devtools\/views\/Profiler\/CommitFlamegraph.js b\/src\/devtools\/views\/Profiler\/CommitFlamegraph.js\nindex 7e5c533ce3..75967d4b59 100644\n--- a\/src\/devtools\/views\/Profiler\/CommitFlamegraph.js\n+++ b\/src\/devtools\/views\/Profiler\/CommitFlamegraph.js\n@@ -1,16 +1,64 @@\n \/\/ @flow\n \n-import React, { useContext } from 'react';\n+import React, { useCallback, useContext, useMemo } from 'react';\n+import AutoSizer from 'react-virtualized-auto-sizer';\n+import { FixedSizeList } from 'react-window';\n import { ProfilerContext } from '.\/ProfilerContext';\n+import NoCommitData from '.\/NoCommitData';\n+import CommitFlamegraphListItem from '.\/CommitFlamegraphListItem';\n+import { barHeight } from '.\/constants';\n+import { scale } from '.\/utils';\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+import type { ChartData, ChartNode } from '.\/FlamegraphChartBuilder';\n+\n+export type ItemData = {|\n+ chartData: ChartData,\n+ scaleX: (value: number, fallbackValue: number) => number,\n+ selectedChartNode: ChartNode,\n+ selectedChartNodeIndex: number,\n+ selectFiber: (id: number | null) => void,\n+ width: number,\n+|};\n+\n+export default function CommitFlamegraphAutoSizer(_: {||}) {\n+ const { selectFiber } = useContext(ProfilerContext);\n+ const deselectCurrentFiber = useCallback(\n+ event => {\n+ event.stopPropagation();\n+ selectFiber(null);\n+ },\n+ [selectFiber]\n );\n \n+ return (\n+ <div className={styles.Container} onClick={deselectCurrentFiber}>\n+ <AutoSizer>\n+ {({ height, width }) => (\n+ <CommitFlamegraph height={height} width={width} \/>\n+ )}\n+ <\/AutoSizer>\n+ <\/div>\n+ );\n+}\n+\n+function CommitFlamegraph({\n+ height,\n+ width,\n+}: {|\n+ height: number,\n+ width: number,\n+|}) {\n+ const {\n+ rendererID,\n+ rootID,\n+ selectedCommitIndex,\n+ selectFiber,\n+ selectedFiberID,\n+ } = useContext(ProfilerContext);\n+\n const { profilingCache } = useContext(StoreContext);\n \n const profilingSummary = profilingCache.ProfilingSummary.read({\n@@ -31,5 +79,58 @@ export default function CommitFlamegraph(_: {||}) {\n rootID: ((rootID: any): number),\n });\n \n- return 'Coming soon: Flamegraph';\n+ const chartData = profilingCache.getFlamegraphChartData({\n+ commitDetails,\n+ commitIndex: ((selectedCommitIndex: any): number),\n+ commitTree,\n+ rootID: ((rootID: any): number),\n+ });\n+\n+ const selectedChartNodeIndex = useMemo(\n+ () =>\n+ selectedFiberID === null\n+ ? 0\n+ : ((chartData.idToDepthMap.get(selectedFiberID): any): number) - 1,\n+ [chartData, selectedFiberID]\n+ );\n+\n+ const selectedChartNode = useMemo(() => {\n+ if (selectedFiberID === null) {\n+ return chartData.rows[0][0];\n+ }\n+ return ((chartData.rows[selectedChartNodeIndex].find(\n+ chartNode => chartNode.id === selectedFiberID\n+ ): any): ChartNode);\n+ }, [chartData, selectedFiberID, selectedChartNodeIndex]);\n+\n+ const itemData = useMemo<ItemData>(\n+ () => ({\n+ chartData,\n+ scaleX: scale(0, selectedChartNode.treeBaseDuration, 0, width),\n+ selectedChartNode,\n+ selectedChartNodeIndex,\n+ selectFiber,\n+ width,\n+ }),\n+ [chartData, selectedChartNode, selectedChartNodeIndex, selectFiber, width]\n+ );\n+\n+ \/\/ If a commit contains no fibers with an actualDuration > 0,\n+ \/\/ Display a fallback message.\n+ if (chartData.depth === 0) {\n+ return <NoCommitData \/>;\n+ }\n+\n+ return (\n+ <FixedSizeList\n+ height={height}\n+ innerElementType=\"svg\"\n+ itemCount={chartData.depth}\n+ itemData={itemData}\n+ itemSize={barHeight}\n+ width={width}\n+ >\n+ {CommitFlamegraphListItem}\n+ <\/FixedSizeList>\n+ );\n }\ndiff --git a\/src\/devtools\/views\/Profiler\/CommitFlamegraphListItem.js b\/src\/devtools\/views\/Profiler\/CommitFlamegraphListItem.js\nnew file mode 100644\nindex 0000000000..7769381dfa\n--- \/dev\/null\n+++ b\/src\/devtools\/views\/Profiler\/CommitFlamegraphListItem.js\n@@ -0,0 +1,102 @@\n+\/\/ @flow\n+\n+import React, { Fragment, useCallback } from 'react';\n+import { barHeight, barWidthThreshold } from '.\/constants';\n+import { getGradientColor } from '.\/utils';\n+import ChartNode from '.\/ChartNode';\n+\n+import type { ItemData } from '.\/CommitFlamegraph';\n+\n+export default function CommitFlamegraphListItem({\n+ data,\n+ index,\n+ style,\n+}: {\n+ data: ItemData,\n+ index: number,\n+ style: Object,\n+}) {\n+ const {\n+ chartData,\n+ scaleX,\n+ selectedChartNode,\n+ selectedChartNodeIndex,\n+ selectFiber,\n+ width,\n+ } = data;\n+ const { maxSelfDuration, rows } = chartData;\n+\n+ const handleClick = useCallback(\n+ (event: MouseEvent, id: number) => {\n+ event.stopPropagation();\n+ selectFiber(id);\n+ },\n+ [selectFiber]\n+ );\n+\n+ \/\/ List items are absolutely positioned using the CSS \"top\" attribute.\n+ \/\/ The \"left\" value will always be 0.\n+ \/\/ Since height is fixed, and width is based on the node's duration,\n+ \/\/ We can ignore those values as well.\n+ const top = parseInt(style.top, 10);\n+\n+ const row = rows[index];\n+\n+ let selectedNodeOffset = scaleX(selectedChartNode.offset, width);\n+\n+ return (\n+ <Fragment>\n+ {row.map(chartNode => {\n+ const {\n+ actualDuration,\n+ didRender,\n+ id,\n+ name,\n+ offset,\n+ selfDuration,\n+ treeBaseDuration,\n+ } = chartNode;\n+\n+ const nodeOffset = scaleX(offset, width);\n+ const nodeWidth = scaleX(treeBaseDuration, width);\n+\n+ \/\/ Filter out nodes that are too small to see or click.\n+ \/\/ This also helps render large trees faster.\n+ if (nodeWidth < barWidthThreshold) {\n+ return null;\n+ }\n+\n+ \/\/ Filter out nodes that are outside of the horizontal window.\n+ if (\n+ nodeOffset + nodeWidth < selectedNodeOffset ||\n+ nodeOffset > selectedNodeOffset + width\n+ ) {\n+ return null;\n+ }\n+\n+ let color = 'var(--color-commit-did-not-render)';\n+ let label = name;\n+ if (didRender) {\n+ color = getGradientColor(selfDuration \/ maxSelfDuration);\n+ label = `${name} (${selfDuration.toFixed(\n+ 1\n+ )}ms of ${actualDuration.toFixed(1)}ms)`;\n+ }\n+\n+ return (\n+ <ChartNode\n+ color={color}\n+ height={barHeight}\n+ isDimmed={index < selectedChartNodeIndex}\n+ key={id}\n+ label={label}\n+ onClick={event => handleClick(event, id)}\n+ width={nodeWidth}\n+ x={nodeOffset - selectedNodeOffset}\n+ y={top}\n+ \/>\n+ );\n+ })}\n+ <\/Fragment>\n+ );\n+}\ndiff --git a\/src\/devtools\/views\/Profiler\/CommitRankedListItem.js b\/src\/devtools\/views\/Profiler\/CommitRankedListItem.js\nindex d47ff5059a..4ed5500aaf 100644\n--- a\/src\/devtools\/views\/Profiler\/CommitRankedListItem.js\n+++ b\/src\/devtools\/views\/Profiler\/CommitRankedListItem.js\n@@ -42,7 +42,6 @@ export default function CommitRankedListItem({\n key={node.id}\n label={node.label}\n onClick={handleClick}\n- title={node.title}\n width={Math.max(minBarWidth, scaleX(node.value, width))}\n x={0}\n y={top}\ndiff --git a\/src\/devtools\/views\/Profiler\/CommitTreeBuilder.js b\/src\/devtools\/views\/Profiler\/CommitTreeBuilder.js\nindex 24b92d665a..4a9dbc5f80 100644\n--- a\/src\/devtools\/views\/Profiler\/CommitTreeBuilder.js\n+++ b\/src\/devtools\/views\/Profiler\/CommitTreeBuilder.js\n@@ -264,7 +264,7 @@ function updateTree(\n id = operations[i + 1];\n \n node = ((nodes.get(id): any): Node);\n- node.treeBaseDuration = operations[i + 2];\n+ node.treeBaseDuration = operations[i + 2] \/ 1000; \/\/ Convert microseconds back to milliseconds;\n \n debug(\n 'Update',\ndiff --git a\/src\/devtools\/views\/Profiler\/FlamegraphChartBuilder.js b\/src\/devtools\/views\/Profiler\/FlamegraphChartBuilder.js\nnew file mode 100644\nindex 0000000000..347fa113b3\n--- \/dev\/null\n+++ b\/src\/devtools\/views\/Profiler\/FlamegraphChartBuilder.js\n@@ -0,0 +1,112 @@\n+\/\/ @flow\n+\n+import { calculateSelfDuration } from '.\/utils';\n+\n+import type { CommitDetails, CommitTree, Node } from '.\/types';\n+\n+export type ChartNode = {|\n+ actualDuration: number,\n+ didRender: boolean,\n+ id: number,\n+ label: string,\n+ name: string,\n+ offset: number,\n+ selfDuration: number,\n+ treeBaseDuration: number,\n+|};\n+\n+export type ChartData = {|\n+ depth: number,\n+ idToDepthMap: Map<number, number>,\n+ maxSelfDuration: number,\n+ rows: Array<Array<ChartNode>>,\n+|};\n+\n+const cachedChartData: Map<string, ChartData> = new Map();\n+\n+export function getChartData({\n+ commitDetails,\n+ commitIndex,\n+ commitTree,\n+ rootID,\n+}: {|\n+ commitDetails: CommitDetails,\n+ commitIndex: number,\n+ commitTree: CommitTree,\n+ rootID: number,\n+|}): ChartData {\n+ const key = `${rootID}-${commitIndex}`;\n+\n+ if (cachedChartData.has(key)) {\n+ return ((cachedChartData.get(key): any): ChartData);\n+ }\n+\n+ const { nodes } = commitTree;\n+ const { actualDurations } = commitDetails;\n+\n+ const idToDepthMap: Map<number, number> = new Map();\n+ const rows: Array<Array<ChartNode>> = [];\n+\n+ let maxDepth = 0;\n+ let maxSelfDuration = 0;\n+\n+ \/\/ Generate flame graph structure using tree base durations.\n+ const walkTree = (\n+ id: number,\n+ parentOffset: number = 0,\n+ currentDepth: number = 1\n+ ) => {\n+ idToDepthMap.set(id, currentDepth);\n+\n+ const node = ((nodes.get(id): any): Node);\n+ const name = node.displayName || 'Unknown';\n+\n+ const selfDuration = calculateSelfDuration(id, commitTree, commitDetails);\n+\n+ maxDepth = Math.max(maxDepth, currentDepth);\n+ maxSelfDuration = Math.max(maxSelfDuration, selfDuration);\n+\n+ const chartNode: ChartNode = {\n+ actualDuration: actualDurations.get(id) || 0,\n+ didRender: actualDurations.has(id),\n+ id,\n+ label: `${name} (${selfDuration.toFixed(1)}ms)`,\n+ name,\n+ offset: parentOffset,\n+ selfDuration,\n+ treeBaseDuration: node.treeBaseDuration,\n+ };\n+\n+ if (currentDepth > rows.length) {\n+ rows.push([chartNode]);\n+ } else {\n+ rows[currentDepth - 1].push(chartNode);\n+ }\n+\n+ node.children.forEach(childID => {\n+ const childChartNode = walkTree(childID, parentOffset, currentDepth + 1);\n+ parentOffset += childChartNode.treeBaseDuration;\n+ });\n+\n+ return chartNode;\n+ };\n+\n+ \/\/ Skip over the root; we don't want to show it in the flamegraph.\n+ const root = ((nodes.get(rootID): any): Node);\n+ walkTree(root.children[0]);\n+\n+ const chartData = {\n+ depth: maxDepth,\n+ idToDepthMap,\n+ maxSelfDuration,\n+ rows,\n+ };\n+\n+ cachedChartData.set(key, chartData);\n+\n+ return chartData;\n+}\n+\n+export function invalidateChartData(): void {\n+ cachedChartData.clear();\n+}\ndiff --git a\/src\/devtools\/views\/Profiler\/RankedChartBuilder.js b\/src\/devtools\/views\/Profiler\/RankedChartBuilder.js\nindex 0b3115b023..bf673f05d6 100644\n--- a\/src\/devtools\/views\/Profiler\/RankedChartBuilder.js\n+++ b\/src\/devtools\/views\/Profiler\/RankedChartBuilder.js\n@@ -8,7 +8,6 @@ export type ChartNode = {|\n id: number,\n label: string,\n name: string,\n- title: string,\n value: number,\n |};\n \n@@ -58,7 +57,6 @@ export function getChartData({\n id,\n label,\n name,\n- title: label,\n value: selfDuration,\n });\n });\ndiff --git a\/src\/devtools\/views\/Profiler\/constants.js b\/src\/devtools\/views\/Profiler\/constants.js\nindex 61162f61c5..2a8ece16fc 100644\n--- a\/src\/devtools\/views\/Profiler\/constants.js\n+++ b\/src\/devtools\/views\/Profiler\/constants.js\n@@ -1,6 +1,7 @@\n \/\/ @flow\n \n export const barHeight = 20;\n+export const barWidthThreshold = 2;\n export const maxBarWidth = 30;\n export const minBarHeight = 5;\n export const minBarWidth = 5;\n","files":[{"status":"M","path":"src\/backend\/renderer.js"},{"status":"M","path":"src\/devtools\/ProfilingCache.js"},{"status":"M","path":"src\/devtools\/views\/Profiler\/ChartNode.js"},{"status":"M","path":"src\/devtools\/views\/Profiler\/CommitFlamegraph.css"},{"status":"M","path":"src\/devtools\/views\/Profiler\/CommitFlamegraph.js"},{"status":"A","path":"src\/devtools\/views\/Profiler\/CommitFlamegraphListItem.js"},{"status":"M","path":"src\/devtools\/views\/Profiler\/CommitRankedListItem.js"},{"status":"M","path":"src\/devtools\/views\/Profiler\/CommitTreeBuilder.js"},{"status":"A","path":"src\/devtools\/views\/Profiler\/FlamegraphChartBuilder.js"},{"status":"M","path":"src\/devtools\/views\/Profiler\/RankedChartBuilder.js"},{"status":"M","path":"src\/devtools\/views\/Profiler\/constants.js"}]}</article></body></html>

dillon1000/react

Files changed