@grafana/flamegraph/dist/cjs/FlameGraph/FlameGraphMetadata.cjs.map

Grafana flamegraph visualization component

{"version":3,"file":"FlameGraphMetadata.cjs","sources":["../../../src/FlameGraph/FlameGraphMetadata.tsx"],"sourcesContent":["import { css } from '@emotion/css';\nimport { memo, type ReactNode } from 'react';\n\nimport { getValueFormat, type GrafanaTheme2 } from '@grafana/data';\nimport { Icon, IconButton, Tooltip, useStyles2 } from '@grafana/ui';\n\nimport { type ClickedItemData } from '../types';\n\nimport { type FlameGraphDataContainer } from './dataTransform';\n\ntype Props = {\n  data: FlameGraphDataContainer;\n  totalTicks: number;\n  onFocusPillClick: () => void;\n  onSandwichPillClick: () => void;\n  focusedItem?: ClickedItemData;\n  sandwichedLabel?: string;\n};\n\nconst FlameGraphMetadata = memo(\n  ({ data, focusedItem, totalTicks, sandwichedLabel, onFocusPillClick, onSandwichPillClick }: Props) => {\n    const styles = useStyles2(getStyles);\n    const parts: ReactNode[] = [];\n    const ticksVal = getValueFormat('short')(totalTicks);\n\n    const displayValue = data.valueDisplayProcessor(totalTicks);\n    let unitValue = displayValue.text + displayValue.suffix;\n    const unitTitle = data.getUnitTitle();\n    if (unitTitle === 'Count') {\n      if (!displayValue.suffix) {\n        // Makes sure we don't show 123undefined or something like that if suffix isn't defined\n        unitValue = displayValue.text;\n      }\n    }\n\n    parts.push(\n      <div className={styles.metadataPill} key={'default'}>\n        {unitValue} | {ticksVal.text}\n        {ticksVal.suffix} samples ({unitTitle})\n      </div>\n    );\n\n    if (sandwichedLabel) {\n      parts.push(\n        <Tooltip key={'sandwich'} content={sandwichedLabel} placement=\"top\">\n          <div>\n            <Icon size={'sm'} name={'angle-right'} />\n            <div className={styles.metadataPill}>\n              <Icon size={'sm'} name={'gf-show-context'} />{' '}\n              <span className={styles.metadataPillName}>\n                {sandwichedLabel.substring(sandwichedLabel.lastIndexOf('/') + 1)}\n              </span>\n              <IconButton\n                className={styles.pillCloseButton}\n                name={'times'}\n                size={'sm'}\n                onClick={onSandwichPillClick}\n                tooltip={'Remove sandwich view'}\n                aria-label={'Remove sandwich view'}\n              />\n            </div>\n          </div>\n        </Tooltip>\n      );\n    }\n\n    if (focusedItem) {\n      const percentValue = totalTicks > 0 ? Math.round(10000 * (focusedItem.item.value / totalTicks)) / 100 : 0;\n      const iconName = percentValue > 0 ? 'eye' : 'exclamation-circle';\n\n      parts.push(\n        <Tooltip key={'focus'} content={focusedItem.label} placement=\"top\">\n          <div>\n            <Icon size={'sm'} name={'angle-right'} />\n            <div className={styles.metadataPill}>\n              <Icon size={'sm'} name={iconName} />\n              &nbsp;{percentValue}% of total\n              <IconButton\n                className={styles.pillCloseButton}\n                name={'times'}\n                size={'sm'}\n                onClick={onFocusPillClick}\n                tooltip={'Remove focus'}\n                aria-label={'Remove focus'}\n              />\n            </div>\n          </div>\n        </Tooltip>\n      );\n    }\n\n    return <div className={styles.metadata}>{parts}</div>;\n  }\n);\n\nFlameGraphMetadata.displayName = 'FlameGraphMetadata';\n\nconst getStyles = (theme: GrafanaTheme2) => ({\n  metadataPill: css({\n    label: 'metadataPill',\n    display: 'inline-flex',\n    alignItems: 'center',\n    background: theme.colors.background.secondary,\n    borderRadius: theme.shape.borderRadius(8),\n    padding: theme.spacing(0.5, 1),\n    fontSize: theme.typography.bodySmall.fontSize,\n    fontWeight: theme.typography.fontWeightMedium,\n    lineHeight: theme.typography.bodySmall.lineHeight,\n    color: theme.colors.text.secondary,\n  }),\n  pillCloseButton: css({\n    label: 'pillCloseButton',\n    verticalAlign: 'text-bottom',\n    margin: theme.spacing(0, 0.5),\n  }),\n  metadata: css({\n    display: 'flex',\n    alignItems: 'center',\n    justifyContent: 'center',\n    margin: '8px 0',\n  }),\n  metadataPillName: css({\n    label: 'metadataPillName',\n    maxWidth: '200px',\n    overflow: 'hidden',\n    textOverflow: 'ellipsis',\n    whiteSpace: 'nowrap',\n    marginLeft: theme.spacing(0.5),\n  }),\n});\n\nexport default FlameGraphMetadata;\n"],"names":["memo","data","useStyles2","getValueFormat","jsxs","Tooltip","jsx","Icon","IconButton","css"],"mappings":"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"}