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

     1  import React from 'react';
     2  import { Flamebearer } from '@pyroscope/models/src';
     3  import styles from './Header.module.css';
     4  import { FlamegraphPalette } from './colorPalette';
     5  import { DiffLegendPaletteDropdown } from './DiffLegendPaletteDropdown';
     6  
     7  interface HeaderProps {
     8    format: Flamebearer['format'];
     9    units: Flamebearer['units'];
    10  
    11    palette: FlamegraphPalette;
    12    setPalette: (p: FlamegraphPalette) => void;
    13    toolbarVisible?: boolean;
    14  }
    15  export default function Header(props: HeaderProps) {
    16    const { format, units, palette, setPalette, toolbarVisible } = props;
    17  
    18    const unitsToFlamegraphTitle = {
    19      objects: 'number of objects in RAM per function',
    20      goroutines: 'number of goroutines',
    21      bytes: 'amount of RAM per function',
    22      samples: 'CPU time per function',
    23      lock_nanoseconds: 'time spent waiting on locks per function',
    24      lock_samples: 'number of contended locks per function',
    25      trace_samples: 'aggregated span duration',
    26      exceptions: 'number of exceptions thrown',
    27      unknown: '',
    28    };
    29  
    30    const getTitle = () => {
    31      switch (format) {
    32        case 'single': {
    33          return (
    34            <div>
    35              <div
    36                className={`${styles.row} ${styles.flamegraphTitle}`}
    37                role="heading"
    38                aria-level={2}
    39              >
    40                {unitsToFlamegraphTitle[units] && (
    41                  <>Frame width represents {unitsToFlamegraphTitle[units]}</>
    42                )}
    43              </div>
    44            </div>
    45          );
    46        }
    47  
    48        case 'double': {
    49          return (
    50            <>
    51              <DiffLegendPaletteDropdown
    52                palette={palette}
    53                onChange={setPalette}
    54              />
    55            </>
    56          );
    57        }
    58  
    59        default:
    60          throw new Error(`unexpected format ${format}`);
    61      }
    62    };
    63  
    64    const title = toolbarVisible ? getTitle() : null;
    65  
    66    return (
    67      <div className={styles.flamegraphHeader}>
    68        <div>{title}</div>
    69      </div>
    70    );
    71  }