[DevTools] Add Component Highlighting to Profiler (#18745)
Co-authored-by: Moji Izadmehr <m.eezadmehr@gmail.com> Co-authored-by: Brian Vaughn <bvaughn@fb.com>
Nick Reiley committed
May 18, 2020 at 23:13 UTC
d897c35ecfb7471b55e41933fd4d993b98dbf600
4 files changed
+71
-18
packages/react-devtools-shared/src/devtools/views/Profiler/CommitFlamegraph.js
+28
-6
@@ -16,6 +16,7 @@ import NoCommitData from './NoCommitData';
16
import CommitFlamegraphListItem from './CommitFlamegraphListItem';
17
import HoveredFiberInfo from './HoveredFiberInfo';
18
import {scale} from './utils';
19
+import {useHighlightNativeElement} from '../hooks';
20
import {StoreContext} from '../context';
21
import {SettingsContext} from '../Settings/SettingsContext';
22
import Tooltip from './Tooltip';
@@ -28,7 +29,8 @@ import type {CommitTree} from './types';
29
30
export type ItemData = {|
31
chartData: ChartData,
31
- hoverFiber: (fiberData: TooltipFiberData | null) => void,
32
+ onElementMouseEnter: (fiberData: TooltipFiberData) => void,
33
+ onElementMouseLeave: () => void,
34
scaleX: (value: number, fallbackValue: number) => number,
35
selectedChartNode: ChartNode | null,
36
selectedChartNodeIndex: number,
@@ -96,11 +98,16 @@ type Props = {|
98
|};
99
100
function CommitFlamegraph({chartData, commitTree, height, width}: Props) {
99
- const [hoveredFiberData, hoverFiber] = useState<TooltipFiberData | null>(
100
- null,
101
- );
101
+ const [
102
+ hoveredFiberData,
103
+ setHoveredFiberData,
104
+ ] = useState<TooltipFiberData | null>(null);
105
const {lineHeight} = useContext(SettingsContext);
106
const {selectFiber, selectedFiberID} = useContext(ProfilerContext);
107
+ const {
108
+ highlightNativeElement,
109
+ clearHighlightNativeElement,
110
+ } = useHighlightNativeElement();
111
112
const selectedChartNodeIndex = useMemo<number>(() => {
113
if (selectedFiberID === null) {
@@ -123,10 +130,24 @@ function CommitFlamegraph({chartData, commitTree, height, width}: Props) {
130
return null;
131
}, [chartData, selectedFiberID, selectedChartNodeIndex]);
132
133
+ const handleElementMouseEnter = useCallback(
134
+ ({id, name}) => {
135
+ highlightNativeElement(id); // Highlight last hovered element.
136
+ setHoveredFiberData({id, name}); // Set hovered fiber data for tooltip
137
+ },
138
+ [highlightNativeElement],
139
+ );
140
+
141
+ const handleElementMouseLeave = useCallback(() => {
142
+ clearHighlightNativeElement(); // clear highlighting of element on mouse leave
143
+ setHoveredFiberData(null); // clear hovered fiber data for tooltip
144
+ }, [clearHighlightNativeElement]);
145
+
146
const itemData = useMemo<ItemData>(
147
() => ({
148
chartData,
129
- hoverFiber,
149
+ onElementMouseEnter: handleElementMouseEnter,
150
+ onElementMouseLeave: handleElementMouseLeave,
151
scaleX: scale(
152
0,
153
selectedChartNode !== null
@@ -142,7 +163,8 @@ function CommitFlamegraph({chartData, commitTree, height, width}: Props) {
163
}),
164
[
165
chartData,
145
- hoverFiber,
166
+ handleElementMouseEnter,
167
+ handleElementMouseLeave,
168
selectedChartNode,
169
selectedChartNodeIndex,
170
selectFiber,
packages/react-devtools-shared/src/devtools/views/Profiler/CommitFlamegraphListItem.js
+4
-3
@@ -28,7 +28,8 @@ type Props = {
28
function CommitFlamegraphListItem({data, index, style}: Props) {
29
const {
30
chartData,
31
- hoverFiber,
31
+ onElementMouseEnter,
32
+ onElementMouseLeave,
33
scaleX,
34
selectedChartNode,
35
selectedChartNodeIndex,
@@ -49,11 +50,11 @@ function CommitFlamegraphListItem({data, index, style}: Props) {
50
51
const handleMouseEnter = (nodeData: ChartNodeType) => {
52
const {id, name} = nodeData;
52
- hoverFiber({id, name});
53
+ onElementMouseEnter({id, name});
54
};
55
56
const handleMouseLeave = () => {
56
- hoverFiber(null);
57
+ onElementMouseLeave();
58
};
59
60
// List items are absolutely positioned using the CSS "top" attribute.
packages/react-devtools-shared/src/devtools/views/Profiler/CommitRanked.js
+35
-6
@@ -18,6 +18,7 @@ import HoveredFiberInfo from './HoveredFiberInfo';
18
import {scale} from './utils';
19
import {StoreContext} from '../context';
20
import {SettingsContext} from '../Settings/SettingsContext';
21
+import {useHighlightNativeElement} from '../hooks';
22
import Tooltip from './Tooltip';
23
24
import styles from './CommitRanked.css';
@@ -28,7 +29,8 @@ import type {CommitTree} from './types';
29
30
export type ItemData = {|
31
chartData: ChartData,
31
- hoverFiber: (fiberData: TooltipFiberData | null) => void,
32
+ onElementMouseEnter: (fiberData: TooltipFiberData) => void,
33
+ onElementMouseLeave: () => void,
34
scaleX: (value: number, fallbackValue: number) => number,
35
selectedFiberID: number | null,
36
selectedFiberIndex: number,
@@ -94,28 +96,55 @@ type Props = {|
96
|};
97
98
function CommitRanked({chartData, commitTree, height, width}: Props) {
97
- const [hoveredFiberData, hoverFiber] = useState<TooltipFiberData | null>(
98
- null,
99
- );
99
+ const [
100
+ hoveredFiberData,
101
+ setHoveredFiberData,
102
+ ] = useState<TooltipFiberData | null>(null);
103
const {lineHeight} = useContext(SettingsContext);
104
const {selectedFiberID, selectFiber} = useContext(ProfilerContext);
105
+ const {
106
+ highlightNativeElement,
107
+ clearHighlightNativeElement,
108
+ } = useHighlightNativeElement();
109
110
const selectedFiberIndex = useMemo(
111
() => getNodeIndex(chartData, selectedFiberID),
112
[chartData, selectedFiberID],
113
);
114
115
+ const handleElementMouseEnter = useCallback(
116
+ ({id, name}) => {
117
+ highlightNativeElement(id); // Highlight last hovered element.
118
+ setHoveredFiberData({id, name}); // Set hovered fiber data for tooltip
119
+ },
120
+ [highlightNativeElement],
121
+ );
122
+
123
+ const handleElementMouseLeave = useCallback(() => {
124
+ clearHighlightNativeElement(); // clear highlighting of element on mouse leave
125
+ setHoveredFiberData(null); // clear hovered fiber data for tooltip
126
+ }, [clearHighlightNativeElement]);
127
+
128
const itemData = useMemo<ItemData>(
129
() => ({
130
chartData,
111
- hoverFiber,
131
+ onElementMouseEnter: handleElementMouseEnter,
132
+ onElementMouseLeave: handleElementMouseLeave,
133
scaleX: scale(0, chartData.nodes[selectedFiberIndex].value, 0, width),
134
selectedFiberID,
135
selectedFiberIndex,
136
selectFiber,
137
width,
138
}),
118
- [chartData, selectedFiberID, selectedFiberIndex, selectFiber, width],
139
+ [
140
+ chartData,
141
+ handleElementMouseEnter,
142
+ handleElementMouseLeave,
143
+ selectedFiberID,
144
+ selectedFiberIndex,
145
+ selectFiber,
146
+ width,
147
+ ],
148
);
149
150
// Tooltip used to show summary of fiber info on hover
packages/react-devtools-shared/src/devtools/views/Profiler/CommitRankedListItem.js
+4
-3
@@ -27,7 +27,8 @@ type Props = {
27
function CommitRankedListItem({data, index, style}: Props) {
28
const {
29
chartData,
30
- hoverFiber,
30
+ onElementMouseEnter,
31
+ onElementMouseLeave,
32
scaleX,
33
selectedFiberIndex,
34
selectFiber,
@@ -49,11 +50,11 @@ function CommitRankedListItem({data, index, style}: Props) {
50
51
const handleMouseEnter = () => {
52
const {id, name} = node;
52
- hoverFiber({id, name});
53
+ onElementMouseEnter({id, name});
54
};
55
56
const handleMouseLeave = () => {
56
- hoverFiber(null);
57
+ onElementMouseLeave();
58
};
59
60
// List items are absolutely positioned using the CSS "top" attribute.