add component highlighting

Co-authored-by: Moji Izadmehr <m.eezadmehr@gmail.com>

Author: 2 people

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 && (

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<TooltipFiberData | null>(
-    null,
-  );
+  const [
+    hoveredFiberData,
+    setHoveredFiberData,
+  ] = useState<TooltipFiberData | null>(null);
   const {lineHeight} = useContext(SettingsContext);
   const {selectFiber, selectedFiberID} = useContext(ProfilerContext);
+  const {
+    highlightNativeElement,
+    clearHighlightNativeElement,
+  } = useHighlightNativeElement();
 
   const selectedChartNodeIndex = useMemo<number>(() => {
     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<ItemData>(
     () => ({
       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,

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)}

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<TooltipFiberData | null>(
-    null,
-  );
+  const [
+    hoveredFiberData,
+    setHoveredFiberData,
+  ] = useState<TooltipFiberData | null>(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<ItemData>(
     () => ({
       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

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}