| 1 | /** |
| 2 | * Copyright (c) Meta Platforms, Inc. and affiliates. |
| 3 | * |
| 4 | * This source code is licensed under the MIT license found in the |
| 5 | * LICENSE file in the root directory of this source tree. |
| 6 | * |
| 7 | * @flow |
| 8 | */ |
| 9 | |
| 10 | import * as React from 'react'; |
| 11 | import {memo, useCallback, useContext} from 'react'; |
| 12 | import {areEqual} from 'react-window'; |
| 13 | import {minBarWidth} from './constants'; |
| 14 | import {getGradientColor} from './utils'; |
| 15 | import ChartNode from './ChartNode'; |
| 16 | import {SettingsContext} from '../Settings/SettingsContext'; |
| 17 | |
| 18 | import type {ItemData} from './CommitRanked'; |
| 19 | |
| 20 | type Props = { |
| 21 | data: ItemData, |
| 22 | index: number, |
| 23 | style: Object, |
| 24 | }; |
| 25 | |
| 26 | function CommitRankedListItem({data, index, style}: Props) { |
| 27 | const { |
| 28 | chartData, |
| 29 | currentSearchMatchID, |
| 30 | matchedFiberIDs, |
| 31 | onElementMouseEnter, |
| 32 | onElementMouseLeave, |
| 33 | scaleX, |
| 34 | searchRegExp, |
| 35 | selectedFiberIndex, |
| 36 | selectFiber, |
| 37 | width, |
| 38 | } = data; |
| 39 | |
| 40 | const node = chartData.nodes[index]; |
| 41 | |
| 42 | const {lineHeight} = useContext(SettingsContext); |
| 43 | |
| 44 | const handleClick = useCallback( |
| 45 | (event: $FlowFixMe) => { |
| 46 | event.stopPropagation(); |
| 47 | const {id, name} = node; |
| 48 | selectFiber(id, name); |
| 49 | }, |
| 50 | [node, selectFiber], |
| 51 | ); |
| 52 | |
| 53 | const handleMouseEnter = () => { |
| 54 | const {id, name} = node; |
| 55 | onElementMouseEnter({id, name}); |
| 56 | }; |
| 57 | |
| 58 | const handleMouseLeave = () => { |
| 59 | onElementMouseLeave(); |
| 60 | }; |
| 61 | |
| 62 | // List items are absolutely positioned using the CSS "top" attribute. |
| 63 | // The "left" value will always be 0. |
| 64 | // Since height is fixed, and width is based on the node's duration, |
| 65 | // We can ignore those values as well. |
| 66 | const top = parseInt(style.top, 10); |
| 67 | |
| 68 | return ( |
| 69 | <ChartNode |
| 70 | color={getGradientColor(node.value / chartData.maxValue)} |
| 71 | height={lineHeight} |
| 72 | isCurrentSearchMatch={node.id === currentSearchMatchID} |
| 73 | isDimmed={index < selectedFiberIndex} |
| 74 | isSearchMatch={matchedFiberIDs.has(node.id)} |
| 75 | key={node.id} |
| 76 | label={node.label} |
| 77 | onClick={handleClick} |
| 78 | onMouseEnter={handleMouseEnter} |
| 79 | onMouseLeave={handleMouseLeave} |
| 80 | searchRegExp={searchRegExp} |
| 81 | width={Math.max(minBarWidth, scaleX(node.value, width))} |
| 82 | x={0} |
| 83 | y={top} |
| 84 | /> |
| 85 | ); |
| 86 | } |
| 87 | |
| 88 | export default memo(CommitRankedListItem, areEqual) as component( |
| 89 | ...props: Props |
| 90 | ); |