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

     1  import React from 'react';
     2  import FlameGraphRenderer from './FlameGraph/FlameGraphRenderer';
     3  import './sass/flamegraph.scss';
     4  
     5  const overrideProps = {
     6    //  showPyroscopeLogo: !process.env.PYROSCOPE_HIDE_LOGO as any, // this is injected by webpack
     7    showPyroscopeLogo: false,
     8  };
     9  
    10  export type FlamegraphRendererProps = Omit<
    11    FlameGraphRenderer['props'],
    12    'showPyroscopeLogo'
    13  >;
    14  
    15  // Module augmentation so that typescript sees our 'custom' element
    16  declare global {
    17    // eslint-disable-next-line @typescript-eslint/no-namespace
    18    namespace JSX {
    19      interface IntrinsicElements {
    20        'pyro-flamegraph': React.DetailedHTMLProps<
    21          React.HTMLAttributes<HTMLElement>,
    22          HTMLElement
    23        >;
    24      }
    25    }
    26  }
    27  
    28  // TODO: type props
    29  export const FlamegraphRenderer = (
    30    props: FlamegraphRendererProps & { colorMode?: 'light' | 'dark' }
    31  ) => {
    32    // Although 'flamegraph' is not a valid HTML element
    33    // It's used to scope css without affecting specificity
    34    // For more info see flamegraph.scss
    35    return (
    36      <pyro-flamegraph
    37        is="span"
    38        data-flamegraph-color-mode={props.colorMode || 'dark'}
    39      >
    40        {/* eslint-disable-next-line react/jsx-props-no-spreading */}
    41        <FlameGraphRenderer {...props} {...overrideProps} />
    42      </pyro-flamegraph>
    43    );
    44  };