@grafana/flamegraph/dist/esm/FlameGraph/FlameGraphTooltip.mjs.map

Grafana flamegraph visualization component

{"version":3,"file":"FlameGraphTooltip.mjs","sources":["../../../src/FlameGraph/FlameGraphTooltip.tsx"],"sourcesContent":["import { css } from '@emotion/css';\n\nimport { DisplayValue, getValueFormat, GrafanaTheme2 } from '@grafana/data';\nimport { InteractiveTable, Portal, useStyles2, VizTooltipContainer } from '@grafana/ui';\n\nimport { CollapseConfig, FlameGraphDataContainer, LevelItem } from './dataTransform';\n\ntype Props = {\n  data: FlameGraphDataContainer;\n  totalTicks: number;\n  position?: { x: number; y: number };\n  item?: LevelItem;\n  collapseConfig?: CollapseConfig;\n};\n\nconst FlameGraphTooltip = ({ data, item, totalTicks, position, collapseConfig }: Props) => {\n  const styles = useStyles2(getStyles);\n\n  if (!(item && position)) {\n    return null;\n  }\n\n  let content;\n\n  if (data.isDiffFlamegraph()) {\n    const tableData = getDiffTooltipData(data, item, totalTicks);\n    content = (\n      <InteractiveTable\n        className={styles.tooltipTable}\n        columns={[\n          { id: 'label', header: '' },\n          { id: 'baseline', header: 'Baseline' },\n          { id: 'comparison', header: 'Comparison' },\n          { id: 'diff', header: 'Diff' },\n        ]}\n        data={tableData}\n        getRowId={(originalRow) => originalRow.rowId}\n      />\n    );\n  } else {\n    const tooltipData = getTooltipData(data, item, totalTicks);\n    content = (\n      <p className={styles.lastParagraph}>\n        {tooltipData.unitTitle}\n        <br />\n        Total: <b>{tooltipData.unitValue}</b> ({tooltipData.percentValue}%)\n        <br />\n        Self: <b>{tooltipData.unitSelf}</b> ({tooltipData.percentSelf}%)\n        <br />\n        Samples: <b>{tooltipData.samples}</b>\n      </p>\n    );\n  }\n\n  return (\n    <Portal>\n      <VizTooltipContainer className={styles.tooltipContainer} position={position} offset={{ x: 15, y: 0 }}>\n        <div className={styles.tooltipContent}>\n          <p className={styles.tooltipName}>\n            {data.getLabel(item.itemIndexes[0])}\n            {collapseConfig && collapseConfig.collapsed ? (\n              <span>\n                <br />\n                and {collapseConfig.items.length} similar items\n              </span>\n            ) : (\n              ''\n            )}\n          </p>\n          {content}\n        </div>\n      </VizTooltipContainer>\n    </Portal>\n  );\n};\n\ntype TooltipData = {\n  percentValue: number;\n  percentSelf: number;\n  unitTitle: string;\n  unitValue: string;\n  unitSelf: string;\n  samples: string;\n};\n\nexport const getTooltipData = (data: FlameGraphDataContainer, item: LevelItem, totalTicks: number): TooltipData => {\n  const displayValue = data.valueDisplayProcessor(item.value);\n  const displaySelf = data.getSelfDisplay(item.itemIndexes);\n\n  const percentValue = Math.round(10000 * (displayValue.numeric / totalTicks)) / 100;\n  const percentSelf = Math.round(10000 * (displaySelf.numeric / totalTicks)) / 100;\n  let unitValue = displayValue.text + displayValue.suffix;\n  let unitSelf = displaySelf.text + displaySelf.suffix;\n\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    if (!displaySelf.suffix) {\n      // Makes sure we don't show 123undefined or something like that if suffix isn't defined\n      unitSelf = displaySelf.text;\n    }\n  }\n\n  return {\n    percentValue,\n    percentSelf,\n    unitTitle,\n    unitValue,\n    unitSelf,\n    samples: displayValue.numeric.toLocaleString(),\n  };\n};\n\ntype DiffTableData = {\n  rowId: string;\n  label: string;\n  baseline: string | number;\n  comparison: string | number;\n  diff: string | number;\n};\n\nexport const getDiffTooltipData = (\n  data: FlameGraphDataContainer,\n  item: LevelItem,\n  totalTicks: number\n): DiffTableData[] => {\n  const levels = data.getLevels();\n  const totalTicksRight = levels[0][0].valueRight!;\n  const totalTicksLeft = totalTicks - totalTicksRight;\n  const valueLeft = item.value - item.valueRight!;\n\n  const percentageLeft = Math.round((10000 * valueLeft) / totalTicksLeft) / 100;\n  const percentageRight = Math.round((10000 * item.valueRight!) / totalTicksRight) / 100;\n\n  const diff = ((percentageRight - percentageLeft) / percentageLeft) * 100;\n\n  const displayValueLeft = getValueWithUnit(data, data.valueDisplayProcessor(valueLeft));\n  const displayValueRight = getValueWithUnit(data, data.valueDisplayProcessor(item.valueRight!));\n\n  const shortValFormat = getValueFormat('short');\n\n  return [\n    {\n      rowId: '1',\n      label: '% of total',\n      baseline: percentageLeft + '%',\n      comparison: percentageRight + '%',\n      diff: shortValFormat(diff).text + '%',\n    },\n    {\n      rowId: '2',\n      label: 'Value',\n      baseline: displayValueLeft,\n      comparison: displayValueRight,\n      diff: getValueWithUnit(data, data.valueDisplayProcessor(item.valueRight! - valueLeft)),\n    },\n    {\n      rowId: '3',\n      label: 'Samples',\n      baseline: shortValFormat(valueLeft).text,\n      comparison: shortValFormat(item.valueRight!).text,\n      diff: shortValFormat(item.valueRight! - valueLeft).text,\n    },\n  ];\n};\n\nfunction getValueWithUnit(data: FlameGraphDataContainer, displayValue: DisplayValue) {\n  let unitValue = displayValue.text + displayValue.suffix;\n\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  return unitValue;\n}\n\nconst getStyles = (theme: GrafanaTheme2) => ({\n  tooltipContainer: css({\n    title: 'tooltipContainer',\n    overflow: 'hidden',\n  }),\n  tooltipContent: css({\n    title: 'tooltipContent',\n    fontSize: theme.typography.bodySmall.fontSize,\n    width: '100%',\n  }),\n  tooltipName: css({\n    title: 'tooltipName',\n    marginTop: 0,\n    wordBreak: 'break-all',\n  }),\n  lastParagraph: css({\n    title: 'lastParagraph',\n    marginBottom: 0,\n  }),\n  name: css({\n    title: 'name',\n    marginBottom: '10px',\n  }),\n\n  tooltipTable: css({\n    title: 'tooltipTable',\n    maxWidth: '400px',\n  }),\n});\n\nexport default FlameGraphTooltip;\n"],"names":[],"mappings":"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"}