\n+ \n+ {({ height, width }) => }\n+ <\/AutoSizer>\n+ <\/div>\n+ );\n+}\n+\n+function Interactions({ height, width }: {| height: number, width: number |}) {\n+ const {\n+ rendererID,\n+ rootID,\n+ selectedInteractionID,\n+ selectInteraction,\n+ } = useContext(ProfilerContext);\n+ const { profilingCache } = useContext(StoreContext);\n+\n+ const { interactions } = profilingCache.Interactions.read({\n+ rendererID: ((rendererID: any): number),\n+ rootID: ((rootID: any): number),\n+ });\n+\n+ const itemData = useMemo(\n+ () => ({\n+ interactions,\n+ selectedInteractionID,\n+ selectInteraction,\n+ }),\n+ [interactions, selectedInteractionID, selectInteraction]\n+ );\n+\n+ \/\/ TODO (profiling) Up\/down arrow keys to select prev\/next interaction.\n+\n+ \/\/ If a commit contains no fibers with an actualDuration > 0,\n+ \/\/ Display a fallback message.\n+ if (interactions.length === 0) {\n+ return ;\n+ }\n+\n+ return (\n+ \n+ {InteractionListItem}\n+ <\/FixedSizeList>\n+ );\n+}\ndiff --git a\/src\/devtools\/views\/Profiler\/NoCommitData.css b\/src\/devtools\/views\/Profiler\/NoCommitData.css\nindex 0f66490ee9..656834b3eb 100644\n--- a\/src\/devtools\/views\/Profiler\/NoCommitData.css\n+++ b\/src\/devtools\/views\/Profiler\/NoCommitData.css\n@@ -2,6 +2,7 @@\n width: 100%;\n height: 100%;\n display: flex;\n+ flex-direction: column;\n align-items: center;\n justify-content: center;\n }\ndiff --git a\/src\/devtools\/views\/Profiler\/NoCommitData.js b\/src\/devtools\/views\/Profiler\/NoCommitData.js\nindex 8cd316aa93..601b552966 100644\n--- a\/src\/devtools\/views\/Profiler\/NoCommitData.js\n+++ b\/src\/devtools\/views\/Profiler\/NoCommitData.js\n@@ -4,9 +4,15 @@ import React from 'react';\n \n import styles from '.\/NoCommitData.css';\n \n-export default function NoCommitData() {\n+export default function NoCommitData({\n+ height,\n+ width,\n+}: {|\n+ height: number,\n+ width: number,\n+|}) {\n return (\n-

\n+

\n There is no timing data to display for the currently selected commit.\n <\/p>\ndiff --git a\/src\/devtools\/views\/Profiler\/NoInteractions.css b\/src\/devtools\/views\/Profiler\/NoInteractions.css\nnew file mode 100644\nindex 0000000000..6c6872058a\n--- \/dev\/null\n+++ b\/src\/devtools\/views\/Profiler\/NoInteractions.css\n@@ -0,0 +1,16 @@\n+.NoInteractions {\n+ width: 100%;\n+ height: 100%;\n+ display: flex;\n+ flex-direction: column;\n+ align-items: center;\n+ justify-content: center;\n+}\n+\n+.Header {\n+ font-size: var(--font-size-sans-large);\n+}\n+\n+.Link {\n+ color: var(--color-button);\n+}\ndiff --git a\/src\/devtools\/views\/Profiler\/NoInteractions.js b\/src\/devtools\/views\/Profiler\/NoInteractions.js\nnew file mode 100644\nindex 0000000000..f317aa2b62\n--- \/dev\/null\n+++ b\/src\/devtools\/views\/Profiler\/NoInteractions.js\n@@ -0,0 +1,29 @@\n+\/\/ @flow\n+\n+import React from 'react';\n+\n+import styles from '.\/NoInteractions.css';\n+\n+export default function NoInteractions({\n+ height,\n+ width,\n+}: {|\n+ height: number,\n+ width: number,\n+|}) {\n+ return (\n+

\n+

No interactions were recorded.<\/p>\n+

\n+ \n+ Learn more about the interaction tracing API here.\n+ <\/a>\n+ <\/p>\n+ <\/div>\n+ );\n+}\ndiff --git a\/src\/devtools\/views\/Profiler\/Profiler.css b\/src\/devtools\/views\/Profiler\/Profiler.css\nindex 682532e88a..3bf17ac9af 100644\n--- a\/src\/devtools\/views\/Profiler\/Profiler.css\n+++ b\/src\/devtools\/views\/Profiler\/Profiler.css\n@@ -87,3 +87,7 @@\n font-size: var(--font-size-sans-large);\n color: var(--color-dim);\n }\n+\n+.Link {\n+ color: var(--color-button);\n+}\ndiff --git a\/src\/devtools\/views\/Profiler\/Profiler.js b\/src\/devtools\/views\/Profiler\/Profiler.js\nindex 5de8973a76..97f39b8f65 100644\n--- a\/src\/devtools\/views\/Profiler\/Profiler.js\n+++ b\/src\/devtools\/views\/Profiler\/Profiler.js\n@@ -9,7 +9,9 @@ import TabBar from '..\/TabBar';\n import CommitFlamegraph from '.\/CommitFlamegraph';\n import CommitRanked from '.\/CommitRanked';\n import FilterModal from '.\/FilterModal';\n+import Interactions from '.\/Interactions';\n import RecordToggle from '.\/RecordToggle';\n+import ReloadAndProfileButton from '.\/ReloadAndProfileButton';\n import SnapshotSelector from '.\/SnapshotSelector';\n import SidebarCommitInfo from '.\/SidebarCommitInfo';\n import SidebarInteractions from '.\/SidebarInteractions';\n@@ -76,10 +78,7 @@ function NonSuspendingProfiler({\n

\n \n-

dillon1000/react

Files changed