From afba752034973ae42857aec2a50ee096db6478d4 Mon Sep 17 00:00:00 2001 From: Brian Vaughn Date: Sun, 24 Mar 2019 09:46:54 -0700 Subject: [PATCH] Clicking commits and interactions link to each other --- shells/dev/app/InteractionTracing/index.js | 15 +++++++++++ .../views/Profiler/InteractionListItem.js | 8 ++++++ src/devtools/views/Profiler/Interactions.js | 9 +++++++ .../views/Profiler/ProfilerContext.js | 10 +++---- .../views/Profiler/SidebarCommitInfo.css | 13 +++++++--- .../views/Profiler/SidebarCommitInfo.js | 23 ++++++++++++---- .../views/Profiler/SidebarInteractions.css | 14 ++++++++++ .../views/Profiler/SidebarInteractions.js | 23 ++++++++++++---- .../views/Profiler/SnapshotCommitList.js | 16 ++++++------ .../views/Profiler/SnapshotCommitListItem.js | 6 ++--- .../views/Profiler/SnapshotSelector.js | 26 ++++++------------- 11 files changed, 116 insertions(+), 47 deletions(-) diff --git a/shells/dev/app/InteractionTracing/index.js b/shells/dev/app/InteractionTracing/index.js index c67e60ca98..d062f976f9 100644 --- a/shells/dev/app/InteractionTracing/index.js +++ b/shells/dev/app/InteractionTracing/index.js @@ -21,6 +21,7 @@ export default function InteractionTracing() { ); }); }, [count]); + const handleCascadingUpdate = useCallback(() => { trace('cascade', performance.now(), () => { setTimeout( @@ -35,6 +36,19 @@ export default function InteractionTracing() { }); }, [count]); + const handleMultiple = useCallback(() => { + trace('first', performance.now(), () => { + trace('second', performance.now(), () => { + setTimeout( + wrap(() => { + setCount(count + 1); + }), + count * 100 + ); + }); + }); + }, [count]); + useEffect(() => { if (shouldCascade) { setTimeout( @@ -53,6 +67,7 @@ export default function InteractionTracing() { + ); } diff --git a/src/devtools/views/Profiler/InteractionListItem.js b/src/devtools/views/Profiler/InteractionListItem.js index d7b85d6bd7..a4e3cd7054 100644 --- a/src/devtools/views/Profiler/InteractionListItem.js +++ b/src/devtools/views/Profiler/InteractionListItem.js @@ -22,7 +22,9 @@ function InteractionListItem({ data: itemData, index, style }: Props) { profilingSummary, scaleX, selectedInteractionID, + selectCommitIndex, selectInteraction, + selectTab, } = itemData; const { maxCommitDuration } = chartData; @@ -40,6 +42,11 @@ function InteractionListItem({ data: itemData, index, style }: Props) { ? commitTimes[interaction.commits[interaction.commits.length - 1]] : interaction.timestamp; + const viewCommit = (commitIndex: number) => { + selectTab('flame-chart'); + selectCommitIndex(commitIndex); + }; + return (
viewCommit(commitIndex)} style={{ backgroundColor: getGradientColor( Math.min( diff --git a/src/devtools/views/Profiler/Interactions.js b/src/devtools/views/Profiler/Interactions.js index 64032ea8a7..827a8634fe 100644 --- a/src/devtools/views/Profiler/Interactions.js +++ b/src/devtools/views/Profiler/Interactions.js @@ -12,6 +12,7 @@ import { scale } from './utils'; import styles from './Interactions.css'; import type { ChartData } from './InteractionsChartBuilder'; +import type { TabID } from './ProfilerContext'; import type { InteractionWithCommits, ProfilingSummary } from './types'; export type ItemData = {| @@ -21,7 +22,9 @@ export type ItemData = {| profilingSummary: ProfilingSummary, scaleX: (value: number, fallbackValue: number) => number, selectedInteractionID: number | null, + selectCommitIndex: (id: number | null) => void, selectInteraction: (id: number | null) => void, + selectTab: (id: TabID) => void, |}; export default function InteractionsAutoSizer(_: {||}) { @@ -40,6 +43,8 @@ function Interactions({ height, width }: {| height: number, width: number |}) { rootID, selectedInteractionID, selectInteraction, + selectCommitIndex, + selectTab, } = useContext(ProfilerContext); const { profilingCache } = useContext(StoreContext); @@ -71,14 +76,18 @@ function Interactions({ height, width }: {| height: number, width: number |}) { profilingSummary, scaleX: scale(0, chartData.lastInteractionTime, 0, timelineWidth), selectedInteractionID, + selectCommitIndex, selectInteraction, + selectTab, }; }, [ chartData, interactions, profilingSummary, selectedInteractionID, + selectCommitIndex, selectInteraction, + selectTab, width, ]); diff --git a/src/devtools/views/Profiler/ProfilerContext.js b/src/devtools/views/Profiler/ProfilerContext.js index dbfc3189b3..3cd6076ac2 100644 --- a/src/devtools/views/Profiler/ProfilerContext.js +++ b/src/devtools/views/Profiler/ProfilerContext.js @@ -50,7 +50,7 @@ type Context = {| // This value is controlled by the commit selector UI in the Profiler toolbar. // It impacts the flame graph and ranked charts. selectedCommitIndex: number | null, - setSelectedCommitIndex: (value: number | null) => void, + selectCommitIndex: (value: number | null) => void, // Which fiber is currently selected in the Ranked or Flamegraph charts? selectedFiberID: number | null, @@ -125,7 +125,7 @@ function ProfilerContextController({ children }: Props) { 0 ); - const [selectedCommitIndex, setSelectedCommitIndex] = useState( + const [selectedCommitIndex, selectCommitIndex] = useState( null ); const [selectedTabID, selectTab] = useState('flame-chart'); @@ -137,7 +137,7 @@ function ProfilerContextController({ children }: Props) { if (isProfiling) { batchedUpdates(() => { if (selectedCommitIndex !== null) { - setSelectedCommitIndex(null); + selectCommitIndex(null); } if (selectedFiberID !== null) { selectFiber(null); @@ -168,7 +168,7 @@ function ProfilerContextController({ children }: Props) { setMinCommitDuration, selectedCommitIndex, - setSelectedCommitIndex, + selectCommitIndex, selectedFiberID, selectFiber, @@ -195,7 +195,7 @@ function ProfilerContextController({ children }: Props) { setMinCommitDuration, selectedCommitIndex, - setSelectedCommitIndex, + selectCommitIndex, selectedFiberID, selectFiber, diff --git a/src/devtools/views/Profiler/SidebarCommitInfo.css b/src/devtools/views/Profiler/SidebarCommitInfo.css index c62374ab90..62991da498 100644 --- a/src/devtools/views/Profiler/SidebarCommitInfo.css +++ b/src/devtools/views/Profiler/SidebarCommitInfo.css @@ -10,6 +10,7 @@ .Content { padding: 0.5rem; + user-select: none; } .List, @@ -20,14 +21,20 @@ } .InteractionList { - padding: 0.5rem; + padding: 0.25rem; } -.ListItem, -.InteractionListItem { +.ListItem { margin: 0 0 0.5rem; } +.InteractionListItem { + padding: 0.25rem 0.5rem; +} +.InteractionListItem:hover { + background-color: var(--color-hover-background); +} + .Label { overflow: hidden; text-overflow: ellipsis; diff --git a/src/devtools/views/Profiler/SidebarCommitInfo.js b/src/devtools/views/Profiler/SidebarCommitInfo.js index ce6616b615..9e31b15af1 100644 --- a/src/devtools/views/Profiler/SidebarCommitInfo.js +++ b/src/devtools/views/Profiler/SidebarCommitInfo.js @@ -10,9 +10,13 @@ import styles from './SidebarCommitInfo.css'; export type Props = {||}; export default function SidebarCommitInfo(_: Props) { - const { selectedCommitIndex, rendererID, rootID } = useContext( - ProfilerContext - ); + const { + selectedCommitIndex, + rendererID, + rootID, + selectInteraction, + selectTab, + } = useContext(ProfilerContext); const { profilingCache } = useContext(StoreContext); @@ -33,6 +37,11 @@ export default function SidebarCommitInfo(_: Props) { rootID: ((rootID: any): number), }); + const viewInteraction = interaction => { + selectTab('interactions'); + selectInteraction(interaction.id); + }; + return (
Commit information
@@ -53,14 +62,18 @@ export default function SidebarCommitInfo(_: Props) { ms -
  • +
  • :
      {interactions.length === 0 ? (
    • None
      • ) : null} {interactions.map((interaction, index) => ( -
    • +
    • viewInteraction(interaction)} + > {interaction.name}
      • ))} diff --git a/src/devtools/views/Profiler/SidebarInteractions.css b/src/devtools/views/Profiler/SidebarInteractions.css index f2b91539cb..e0dbd3b4f5 100644 --- a/src/devtools/views/Profiler/SidebarInteractions.css +++ b/src/devtools/views/Profiler/SidebarInteractions.css @@ -10,6 +10,7 @@ .Content { padding: 0.5rem; + user-select: none; } .Name { @@ -27,3 +28,16 @@ height: 100%; color: var(--color-dim); } + +.List { + list-style: none; + margin: 0; + padding: 0; +} + +.ListItem { + padding: 0.25rem 0.5rem; +} +.ListItem:hover { + background-color: var(--color-hover-background); +} diff --git a/src/devtools/views/Profiler/SidebarInteractions.js b/src/devtools/views/Profiler/SidebarInteractions.js index 423ad29389..c5e788dba7 100644 --- a/src/devtools/views/Profiler/SidebarInteractions.js +++ b/src/devtools/views/Profiler/SidebarInteractions.js @@ -12,9 +12,13 @@ import type { InteractionWithCommits } from './types'; export type Props = {||}; export default function SidebarInteractions(_: Props) { - const { selectedInteractionID, rendererID, rootID } = useContext( - ProfilerContext - ); + const { + selectedInteractionID, + rendererID, + rootID, + selectCommitIndex, + selectTab, + } = useContext(ProfilerContext); const { profilingCache } = useContext(StoreContext); @@ -37,15 +41,24 @@ export default function SidebarInteractions(_: Props) { interaction => interaction.id === selectedInteractionID ): any): InteractionWithCommits); + const viewCommit = (commitIndex: number) => { + selectTab('flame-chart'); + selectCommitIndex(commitIndex); + }; + return (
      {interaction.name}
      -
        +
          {interaction.commits.map(commitIndex => ( -
        • +
        • viewCommit(commitIndex)} + > timestamp: {formatTime(commitTimes[commitIndex])}s
          duration: {formatDuration(commitDurations[commitIndex])}ms diff --git a/src/devtools/views/Profiler/SnapshotCommitList.js b/src/devtools/views/Profiler/SnapshotCommitList.js index bf9e4e5525..5b51f9ce34 100644 --- a/src/devtools/views/Profiler/SnapshotCommitList.js +++ b/src/devtools/views/Profiler/SnapshotCommitList.js @@ -20,7 +20,7 @@ export type ItemData = {| maxDuration: number, selectedCommitIndex: number | null, selectedFilteredCommitIndex: number | null, - setSelectedCommitIndex: (index: number) => void, + selectCommitIndex: (index: number) => void, |}; type Props = {| @@ -29,7 +29,7 @@ type Props = {| filteredCommitIndices: Array, selectedCommitIndex: number | null, selectedFilteredCommitIndex: number | null, - setSelectedCommitIndex: (index: number) => void, + selectCommitIndex: (index: number) => void, |}; export default function SnapshotCommitList({ @@ -38,7 +38,7 @@ export default function SnapshotCommitList({ filteredCommitIndices, selectedCommitIndex, selectedFilteredCommitIndex, - setSelectedCommitIndex, + selectCommitIndex, }: Props) { return ( @@ -50,7 +50,7 @@ export default function SnapshotCommitList({ filteredCommitIndices={filteredCommitIndices} selectedCommitIndex={selectedCommitIndex} selectedFilteredCommitIndex={selectedFilteredCommitIndex} - setSelectedCommitIndex={setSelectedCommitIndex} + selectCommitIndex={selectCommitIndex} width={width} /> )} @@ -65,7 +65,7 @@ type ListProps = {| filteredCommitIndices: Array, selectedCommitIndex: number | null, selectedFilteredCommitIndex: number | null, - setSelectedCommitIndex: (index: number) => void, + selectCommitIndex: (index: number) => void, width: number, |}; @@ -76,7 +76,7 @@ function List({ height, filteredCommitIndices, selectedFilteredCommitIndex, - setSelectedCommitIndex, + selectCommitIndex, width, }: ListProps) { const listRef = useRef | null>(null); @@ -139,7 +139,7 @@ function List({ maxDuration, selectedCommitIndex, selectedFilteredCommitIndex, - setSelectedCommitIndex, + selectCommitIndex, }), [ commitDurations, @@ -149,7 +149,7 @@ function List({ maxDuration, selectedCommitIndex, selectedFilteredCommitIndex, - setSelectedCommitIndex, + selectCommitIndex, ] ); diff --git a/src/devtools/views/Profiler/SnapshotCommitListItem.js b/src/devtools/views/Profiler/SnapshotCommitListItem.js index 651466c5c0..bcca4494dc 100644 --- a/src/devtools/views/Profiler/SnapshotCommitListItem.js +++ b/src/devtools/views/Profiler/SnapshotCommitListItem.js @@ -22,7 +22,7 @@ function SnapshotCommitListItem({ data: itemData, index, style }: Props) { isMouseDown, maxDuration, selectedCommitIndex, - setSelectedCommitIndex, + selectCommitIndex, } = itemData; index = filteredCommitIndices[index]; @@ -30,9 +30,9 @@ function SnapshotCommitListItem({ data: itemData, index, style }: Props) { const commitDuration = commitDurations[index]; const commitTime = commitTimes[index]; - const handleClick = useCallback(() => setSelectedCommitIndex(index), [ + const handleClick = useCallback(() => selectCommitIndex(index), [ index, - setSelectedCommitIndex, + selectCommitIndex, ]); // Guard against commits with duration 0 diff --git a/src/devtools/views/Profiler/SnapshotSelector.js b/src/devtools/views/Profiler/SnapshotSelector.js index 81f7260888..6a49e9d026 100644 --- a/src/devtools/views/Profiler/SnapshotSelector.js +++ b/src/devtools/views/Profiler/SnapshotSelector.js @@ -21,7 +21,7 @@ export default function SnapshotSelector(_: Props) { rendererID, rootID, selectedCommitIndex, - setSelectedCommitIndex, + selectCommitIndex, } = useContext(ProfilerContext); const { profilingCache } = useContext(StoreContext); @@ -62,12 +62,10 @@ export default function SnapshotSelector(_: Props) { // Maybe this component should pass filteredCommitIndices up? if (selectedFilteredCommitIndex === null) { if (numFilteredCommits > 0) { - setSelectedCommitIndex(0); + selectCommitIndex(0); } } else if (selectedFilteredCommitIndex >= numFilteredCommits) { - setSelectedCommitIndex( - numFilteredCommits === 0 ? null : numFilteredCommits - 1 - ); + selectCommitIndex(numFilteredCommits === 0 ? null : numFilteredCommits - 1); } let label = null; @@ -86,23 +84,15 @@ export default function SnapshotSelector(_: Props) { ((selectedFilteredCommitIndex: any): number) + 1, filteredCommitIndices.length - 1 ); - setSelectedCommitIndex(filteredCommitIndices[nextCommitIndex]); - }, [ - selectedFilteredCommitIndex, - filteredCommitIndices, - setSelectedCommitIndex, - ]); + selectCommitIndex(filteredCommitIndices[nextCommitIndex]); + }, [selectedFilteredCommitIndex, filteredCommitIndices, selectCommitIndex]); const viewPrevCommit = useCallback(() => { const nextCommitIndex = Math.max( ((selectedFilteredCommitIndex: any): number) - 1, 0 ); - setSelectedCommitIndex(filteredCommitIndices[nextCommitIndex]); - }, [ - selectedFilteredCommitIndex, - filteredCommitIndices, - setSelectedCommitIndex, - ]); + selectCommitIndex(filteredCommitIndices[nextCommitIndex]); + }, [selectedFilteredCommitIndex, filteredCommitIndices, selectCommitIndex]); if (rendererID === null || rootID === null) { return null; @@ -136,7 +126,7 @@ export default function SnapshotSelector(_: Props) { filteredCommitIndices={filteredCommitIndices} selectedCommitIndex={selectedCommitIndex} selectedFilteredCommitIndex={selectedFilteredCommitIndex} - setSelectedCommitIndex={setSelectedCommitIndex} + selectCommitIndex={selectCommitIndex} /> )} {numFilteredCommits === 0 && (