From 1614972e512dbb63e9c255fe9cb91d027b437937 Mon Sep 17 00:00:00 2001 From: Nick Reiley Date: Sun, 26 Apr 2020 17:16:59 +0500 Subject: [PATCH 1/2] add component highlighting Co-authored-by: Moji Izadmehr --- .../src/devtools/views/Profiler/ChartNode.js | 4 +- .../views/Profiler/CommitFlamegraph.js | 34 ++++++++++++--- .../Profiler/CommitFlamegraphListItem.js | 9 ++-- .../devtools/views/Profiler/CommitRanked.js | 41 ++++++++++++++++--- .../views/Profiler/CommitRankedListItem.js | 9 ++-- 5 files changed, 78 insertions(+), 19 deletions(-) diff --git a/packages/react-devtools-shared/src/devtools/views/Profiler/ChartNode.js b/packages/react-devtools-shared/src/devtools/views/Profiler/ChartNode.js index 82c58e86da460..267ee68ed312a 100644 --- a/packages/react-devtools-shared/src/devtools/views/Profiler/ChartNode.js +++ b/packages/react-devtools-shared/src/devtools/views/Profiler/ChartNode.js @@ -15,6 +15,7 @@ type Props = {| color: string, height: number, isDimmed?: boolean, + isHovered?: boolean, label: string, onClick: (event: SyntheticMouseEvent<*>) => mixed, onDoubleClick?: (event: SyntheticMouseEvent<*>) => mixed, @@ -33,6 +34,7 @@ export default function ChartNode({ color, height, isDimmed = false, + isHovered = false, label, onClick, onMouseEnter, @@ -55,7 +57,7 @@ export default function ChartNode({ onDoubleClick={onDoubleClick} className={styles.Rect} style={{ - opacity: isDimmed ? 0.5 : 1, + opacity: isHovered ? 0.75 : isDimmed ? 0.5 : 1, }} /> {width >= minWidthToDisplay && ( diff --git a/packages/react-devtools-shared/src/devtools/views/Profiler/CommitFlamegraph.js b/packages/react-devtools-shared/src/devtools/views/Profiler/CommitFlamegraph.js index 77afddbf040ee..cfad1d6b07930 100644 --- a/packages/react-devtools-shared/src/devtools/views/Profiler/CommitFlamegraph.js +++ b/packages/react-devtools-shared/src/devtools/views/Profiler/CommitFlamegraph.js @@ -16,6 +16,7 @@ import NoCommitData from './NoCommitData'; import CommitFlamegraphListItem from './CommitFlamegraphListItem'; import HoveredFiberInfo from './HoveredFiberInfo'; import {scale} from './utils'; +import {useHighlightNativeElement} from '../hooks'; import {StoreContext} from '../context'; import {SettingsContext} from '../Settings/SettingsContext'; import Tooltip from './Tooltip'; @@ -28,7 +29,9 @@ import type {CommitTree} from './types'; export type ItemData = {| chartData: ChartData, - hoverFiber: (fiberData: TooltipFiberData | null) => void, + isHovered: boolean, + onElementMouseEnter: (fiberData: TooltipFiberData) => void, + onElementMouseLeave: () => void, scaleX: (value: number, fallbackValue: number) => number, selectedChartNode: ChartNode | null, selectedChartNodeIndex: number, @@ -96,11 +99,16 @@ type Props = {| |}; function CommitFlamegraph({chartData, commitTree, height, width}: Props) { - const [hoveredFiberData, hoverFiber] = useState( - null, - ); + const [ + hoveredFiberData, + setHoveredFiberData, + ] = useState(null); const {lineHeight} = useContext(SettingsContext); const {selectFiber, selectedFiberID} = useContext(ProfilerContext); + const { + highlightNativeElement, + clearHighlightNativeElement, + } = useHighlightNativeElement(); const selectedChartNodeIndex = useMemo(() => { if (selectedFiberID === null) { @@ -123,10 +131,22 @@ function CommitFlamegraph({chartData, commitTree, height, width}: Props) { return null; }, [chartData, selectedFiberID, selectedChartNodeIndex]); + const handleElementMouseEnter = ({id, name}) => { + highlightNativeElement(id); // Highlight last hovered element. + setHoveredFiberData({id, name}); // Set hovered fiber data for tooltip + }; + + const handleElementMouseLeave = () => { + clearHighlightNativeElement(); // clear highlighting of element on mouse leave + setHoveredFiberData(null); // clear hovered fiber data for tooltip + }; + const itemData = useMemo( () => ({ chartData, - hoverFiber, + isHovered: hoveredFiberData !== null, + onElementMouseEnter: handleElementMouseEnter, + onElementMouseLeave: handleElementMouseLeave, scaleX: scale( 0, selectedChartNode !== null @@ -142,7 +162,9 @@ function CommitFlamegraph({chartData, commitTree, height, width}: Props) { }), [ chartData, - hoverFiber, + hoveredFiberData, + handleElementMouseEnter, + handleElementMouseLeave, selectedChartNode, selectedChartNodeIndex, selectFiber, diff --git a/packages/react-devtools-shared/src/devtools/views/Profiler/CommitFlamegraphListItem.js b/packages/react-devtools-shared/src/devtools/views/Profiler/CommitFlamegraphListItem.js index 5b94c94e2d2d8..960c0c592207a 100644 --- a/packages/react-devtools-shared/src/devtools/views/Profiler/CommitFlamegraphListItem.js +++ b/packages/react-devtools-shared/src/devtools/views/Profiler/CommitFlamegraphListItem.js @@ -28,7 +28,9 @@ type Props = { function CommitFlamegraphListItem({data, index, style}: Props) { const { chartData, - hoverFiber, + isHovered, + onElementMouseEnter, + onElementMouseLeave, scaleX, selectedChartNode, selectedChartNodeIndex, @@ -49,11 +51,11 @@ function CommitFlamegraphListItem({data, index, style}: Props) { const handleMouseEnter = (nodeData: ChartNodeType) => { const {id, name} = nodeData; - hoverFiber({id, name}); + onElementMouseEnter({id, name}); }; const handleMouseLeave = () => { - hoverFiber(null); + onElementMouseLeave(); }; // List items are absolutely positioned using the CSS "top" attribute. @@ -114,6 +116,7 @@ function CommitFlamegraphListItem({data, index, style}: Props) { color={color} height={lineHeight} isDimmed={index < selectedChartNodeIndex} + isHovered={isHovered} key={id} label={label} onClick={event => handleClick(event, id, name)} diff --git a/packages/react-devtools-shared/src/devtools/views/Profiler/CommitRanked.js b/packages/react-devtools-shared/src/devtools/views/Profiler/CommitRanked.js index 996433dffc282..ed930025f69bb 100644 --- a/packages/react-devtools-shared/src/devtools/views/Profiler/CommitRanked.js +++ b/packages/react-devtools-shared/src/devtools/views/Profiler/CommitRanked.js @@ -18,6 +18,7 @@ import HoveredFiberInfo from './HoveredFiberInfo'; import {scale} from './utils'; import {StoreContext} from '../context'; import {SettingsContext} from '../Settings/SettingsContext'; +import {useHighlightNativeElement} from '../hooks'; import Tooltip from './Tooltip'; import styles from './CommitRanked.css'; @@ -28,7 +29,9 @@ import type {CommitTree} from './types'; export type ItemData = {| chartData: ChartData, - hoverFiber: (fiberData: TooltipFiberData | null) => void, + isHovered: boolean, + onElementMouseEnter: (fiberData: TooltipFiberData) => void, + onElementMouseLeave: () => void, scaleX: (value: number, fallbackValue: number) => number, selectedFiberID: number | null, selectedFiberIndex: number, @@ -94,28 +97,54 @@ type Props = {| |}; function CommitRanked({chartData, commitTree, height, width}: Props) { - const [hoveredFiberData, hoverFiber] = useState( - null, - ); + const [ + hoveredFiberData, + setHoveredFiberData, + ] = useState(null); const {lineHeight} = useContext(SettingsContext); const {selectedFiberID, selectFiber} = useContext(ProfilerContext); + const { + highlightNativeElement, + clearHighlightNativeElement, + } = useHighlightNativeElement(); const selectedFiberIndex = useMemo( () => getNodeIndex(chartData, selectedFiberID), [chartData, selectedFiberID], ); + const handleElementMouseEnter = ({id, name}) => { + highlightNativeElement(id); // Highlight last hovered element. + setHoveredFiberData({id, name}); // Set hovered fiber data for tooltip + }; + + const handleElementMouseLeave = () => { + clearHighlightNativeElement(); // clear highlighting of element on mouse leave + setHoveredFiberData(null); // clear hovered fiber data for tooltip + }; + const itemData = useMemo( () => ({ chartData, - hoverFiber, + isHovered: hoveredFiberData !== null, + onElementMouseEnter: handleElementMouseEnter, + onElementMouseLeave: handleElementMouseLeave, scaleX: scale(0, chartData.nodes[selectedFiberIndex].value, 0, width), selectedFiberID, selectedFiberIndex, selectFiber, width, }), - [chartData, selectedFiberID, selectedFiberIndex, selectFiber, width], + [ + chartData, + hoveredFiberData, + handleElementMouseEnter, + handleElementMouseLeave, + selectedFiberID, + selectedFiberIndex, + selectFiber, + width, + ], ); // Tooltip used to show summary of fiber info on hover diff --git a/packages/react-devtools-shared/src/devtools/views/Profiler/CommitRankedListItem.js b/packages/react-devtools-shared/src/devtools/views/Profiler/CommitRankedListItem.js index 314c928cc50e9..b9974705b1698 100644 --- a/packages/react-devtools-shared/src/devtools/views/Profiler/CommitRankedListItem.js +++ b/packages/react-devtools-shared/src/devtools/views/Profiler/CommitRankedListItem.js @@ -27,7 +27,9 @@ type Props = { function CommitRankedListItem({data, index, style}: Props) { const { chartData, - hoverFiber, + isHovered, + onElementMouseEnter, + onElementMouseLeave, scaleX, selectedFiberIndex, selectFiber, @@ -49,11 +51,11 @@ function CommitRankedListItem({data, index, style}: Props) { const handleMouseEnter = () => { const {id, name} = node; - hoverFiber({id, name}); + onElementMouseEnter({id, name}); }; const handleMouseLeave = () => { - hoverFiber(null); + onElementMouseLeave(); }; // List items are absolutely positioned using the CSS "top" attribute. @@ -67,6 +69,7 @@ function CommitRankedListItem({data, index, style}: Props) { color={getGradientColor(node.value / chartData.maxValue)} height={lineHeight} isDimmed={index < selectedFiberIndex} + isHovered={isHovered} key={node.id} label={node.label} onClick={handleClick} From ad686c54f89f977c659a08e1e98807791b70f219 Mon Sep 17 00:00:00 2001 From: Brian Vaughn Date: Mon, 18 May 2020 10:51:27 -0700 Subject: [PATCH 2/2] Removed 'isHovered' bool; fixed broken memoization --- .../src/devtools/views/Profiler/ChartNode.js | 4 +--- .../views/Profiler/CommitFlamegraph.js | 18 +++++++++--------- .../views/Profiler/CommitFlamegraphListItem.js | 2 -- .../devtools/views/Profiler/CommitRanked.js | 18 +++++++++--------- .../views/Profiler/CommitRankedListItem.js | 2 -- 5 files changed, 19 insertions(+), 25 deletions(-) diff --git a/packages/react-devtools-shared/src/devtools/views/Profiler/ChartNode.js b/packages/react-devtools-shared/src/devtools/views/Profiler/ChartNode.js index 267ee68ed312a..82c58e86da460 100644 --- a/packages/react-devtools-shared/src/devtools/views/Profiler/ChartNode.js +++ b/packages/react-devtools-shared/src/devtools/views/Profiler/ChartNode.js @@ -15,7 +15,6 @@ type Props = {| color: string, height: number, isDimmed?: boolean, - isHovered?: boolean, label: string, onClick: (event: SyntheticMouseEvent<*>) => mixed, onDoubleClick?: (event: SyntheticMouseEvent<*>) => mixed, @@ -34,7 +33,6 @@ export default function ChartNode({ color, height, isDimmed = false, - isHovered = false, label, onClick, onMouseEnter, @@ -57,7 +55,7 @@ export default function ChartNode({ onDoubleClick={onDoubleClick} className={styles.Rect} style={{ - opacity: isHovered ? 0.75 : isDimmed ? 0.5 : 1, + opacity: isDimmed ? 0.5 : 1, }} /> {width >= minWidthToDisplay && ( diff --git a/packages/react-devtools-shared/src/devtools/views/Profiler/CommitFlamegraph.js b/packages/react-devtools-shared/src/devtools/views/Profiler/CommitFlamegraph.js index cfad1d6b07930..99289ff392f31 100644 --- a/packages/react-devtools-shared/src/devtools/views/Profiler/CommitFlamegraph.js +++ b/packages/react-devtools-shared/src/devtools/views/Profiler/CommitFlamegraph.js @@ -29,7 +29,6 @@ import type {CommitTree} from './types'; export type ItemData = {| chartData: ChartData, - isHovered: boolean, onElementMouseEnter: (fiberData: TooltipFiberData) => void, onElementMouseLeave: () => void, scaleX: (value: number, fallbackValue: number) => number, @@ -131,20 +130,22 @@ function CommitFlamegraph({chartData, commitTree, height, width}: Props) { return null; }, [chartData, selectedFiberID, selectedChartNodeIndex]); - const handleElementMouseEnter = ({id, name}) => { - highlightNativeElement(id); // Highlight last hovered element. - setHoveredFiberData({id, name}); // Set hovered fiber data for tooltip - }; + const handleElementMouseEnter = useCallback( + ({id, name}) => { + highlightNativeElement(id); // Highlight last hovered element. + setHoveredFiberData({id, name}); // Set hovered fiber data for tooltip + }, + [highlightNativeElement], + ); - const handleElementMouseLeave = () => { + const handleElementMouseLeave = useCallback(() => { clearHighlightNativeElement(); // clear highlighting of element on mouse leave setHoveredFiberData(null); // clear hovered fiber data for tooltip - }; + }, [clearHighlightNativeElement]); const itemData = useMemo( () => ({ chartData, - isHovered: hoveredFiberData !== null, onElementMouseEnter: handleElementMouseEnter, onElementMouseLeave: handleElementMouseLeave, scaleX: scale( @@ -162,7 +163,6 @@ function CommitFlamegraph({chartData, commitTree, height, width}: Props) { }), [ chartData, - hoveredFiberData, handleElementMouseEnter, handleElementMouseLeave, selectedChartNode, diff --git a/packages/react-devtools-shared/src/devtools/views/Profiler/CommitFlamegraphListItem.js b/packages/react-devtools-shared/src/devtools/views/Profiler/CommitFlamegraphListItem.js index 960c0c592207a..35622433e37b5 100644 --- a/packages/react-devtools-shared/src/devtools/views/Profiler/CommitFlamegraphListItem.js +++ b/packages/react-devtools-shared/src/devtools/views/Profiler/CommitFlamegraphListItem.js @@ -28,7 +28,6 @@ type Props = { function CommitFlamegraphListItem({data, index, style}: Props) { const { chartData, - isHovered, onElementMouseEnter, onElementMouseLeave, scaleX, @@ -116,7 +115,6 @@ function CommitFlamegraphListItem({data, index, style}: Props) { color={color} height={lineHeight} isDimmed={index < selectedChartNodeIndex} - isHovered={isHovered} key={id} label={label} onClick={event => handleClick(event, id, name)} diff --git a/packages/react-devtools-shared/src/devtools/views/Profiler/CommitRanked.js b/packages/react-devtools-shared/src/devtools/views/Profiler/CommitRanked.js index ed930025f69bb..d02ac1fadd4bf 100644 --- a/packages/react-devtools-shared/src/devtools/views/Profiler/CommitRanked.js +++ b/packages/react-devtools-shared/src/devtools/views/Profiler/CommitRanked.js @@ -29,7 +29,6 @@ import type {CommitTree} from './types'; export type ItemData = {| chartData: ChartData, - isHovered: boolean, onElementMouseEnter: (fiberData: TooltipFiberData) => void, onElementMouseLeave: () => void, scaleX: (value: number, fallbackValue: number) => number, @@ -113,20 +112,22 @@ function CommitRanked({chartData, commitTree, height, width}: Props) { [chartData, selectedFiberID], ); - const handleElementMouseEnter = ({id, name}) => { - highlightNativeElement(id); // Highlight last hovered element. - setHoveredFiberData({id, name}); // Set hovered fiber data for tooltip - }; + const handleElementMouseEnter = useCallback( + ({id, name}) => { + highlightNativeElement(id); // Highlight last hovered element. + setHoveredFiberData({id, name}); // Set hovered fiber data for tooltip + }, + [highlightNativeElement], + ); - const handleElementMouseLeave = () => { + const handleElementMouseLeave = useCallback(() => { clearHighlightNativeElement(); // clear highlighting of element on mouse leave setHoveredFiberData(null); // clear hovered fiber data for tooltip - }; + }, [clearHighlightNativeElement]); const itemData = useMemo( () => ({ chartData, - isHovered: hoveredFiberData !== null, onElementMouseEnter: handleElementMouseEnter, onElementMouseLeave: handleElementMouseLeave, scaleX: scale(0, chartData.nodes[selectedFiberIndex].value, 0, width), @@ -137,7 +138,6 @@ function CommitRanked({chartData, commitTree, height, width}: Props) { }), [ chartData, - hoveredFiberData, handleElementMouseEnter, handleElementMouseLeave, selectedFiberID, diff --git a/packages/react-devtools-shared/src/devtools/views/Profiler/CommitRankedListItem.js b/packages/react-devtools-shared/src/devtools/views/Profiler/CommitRankedListItem.js index b9974705b1698..6b92499eceb31 100644 --- a/packages/react-devtools-shared/src/devtools/views/Profiler/CommitRankedListItem.js +++ b/packages/react-devtools-shared/src/devtools/views/Profiler/CommitRankedListItem.js @@ -27,7 +27,6 @@ type Props = { function CommitRankedListItem({data, index, style}: Props) { const { chartData, - isHovered, onElementMouseEnter, onElementMouseLeave, scaleX, @@ -69,7 +68,6 @@ function CommitRankedListItem({data, index, style}: Props) { color={getGradientColor(node.value / chartData.maxValue)} height={lineHeight} isDimmed={index < selectedFiberIndex} - isHovered={isHovered} key={node.id} label={node.label} onClick={handleClick}