github.com/pyroscope-io/pyroscope@v0.37.3-0.20230725203016-5f6947968bd0/packages/pyroscope-flamegraph/src/FlameGraph/FlameGraphComponent/ContextMenuHighlight.tsx (about)

     1  import React from 'react';
     2  import { Maybe } from 'true-myth';
     3  import styles from './ContextMenuHighlight.module.css';
     4  
     5  export interface HighlightProps {
     6    // probably the same as the bar height
     7    barHeight: number;
     8  
     9    node: Maybe<{ top: number; left: number; width: number }>;
    10  }
    11  
    12  const initialSyle: React.CSSProperties = {
    13    height: '0px',
    14    visibility: 'hidden',
    15  };
    16  
    17  /**
    18   * Highlight on the node that triggered the context menu
    19   */
    20  export default function ContextMenuHighlight(props: HighlightProps) {
    21    const { node, barHeight } = props;
    22    const [style, setStyle] = React.useState(initialSyle);
    23  
    24    React.useEffect(
    25      () => {
    26        node.match({
    27          Nothing: () => setStyle(initialSyle),
    28          Just: (data) =>
    29            setStyle({
    30              visibility: 'visible',
    31              height: `${barHeight}px`,
    32              ...data,
    33            }),
    34        });
    35      },
    36      // refresh callback functions when they change
    37      [node]
    38    );
    39  
    40    return (
    41      <div
    42        className={styles.highlightContextMenu}
    43        style={style}
    44        data-testid="flamegraph-highlight-contextmenu"
    45      />
    46    );
    47  }