@grafana/flamegraph 11.6.0-227801 → 11.6.0-228039

package/dist/esm/FlameGraph/{treeTransforms.js → treeTransforms.mjs}

@@ -83,4 +83,4 @@ function mergeSubtrees(roots, data, direction = "children") {
 }
 
 export { mergeParentSubtrees, mergeSubtrees };
-//# sourceMappingURL=treeTransforms.js.map
+//# sourceMappingURL=treeTransforms.mjs.map

package/dist/esm/FlameGraph/treeTransforms.mjs.map

@@ -0,0 +1 @@
+{"version":3,"file":"treeTransforms.mjs","sources":["../../../src/FlameGraph/treeTransforms.ts"],"sourcesContent":["import { groupBy } from 'lodash';\n\nimport { LevelItem } from './dataTransform';\n\ntype DataInterface = {\n  getLabel: (index: number) => string;\n};\n\n// Merge parent subtree of the roots for the callers tree in the sandwich view of the flame graph.\nexport function mergeParentSubtrees(roots: LevelItem[], data: DataInterface): LevelItem[][] {\n  const newRoots = getParentSubtrees(roots);\n  return mergeSubtrees(newRoots, data, 'parents');\n}\n\n// Returns a subtrees per root that will have the parents resized to the same value as the root. When doing callers\n// tree we need to keep proper sizes of the parents, before we merge them, so we correctly attribute to the parents\n// only the value it contributed to the root.\n// So if we have something like:\n// [0/////////////]\n// [1//][4/////][6]\n// [2]  [5/////]\n// [6]  [6/][8/]\n// [7]\n// Taking all the node with '6' will create:\n// [0][0/]\n// [1][4/]\n// [2][5/][0]\n// [6][6/][6]\n// Which we can later merge.\nfunction getParentSubtrees(roots: LevelItem[]) {\n  return roots.map((r) => {\n    if (!r.parents?.length) {\n      return r;\n    }\n\n    const newRoot = {\n      ...r,\n      children: [],\n    };\n    const stack: Array<{ child: undefined | LevelItem; parent: LevelItem }> = [\n      { child: newRoot, parent: r.parents[0] },\n    ];\n\n    while (stack.length) {\n      const args = stack.shift()!;\n      const newNode = {\n        ...args.parent,\n        children: args.child ? [args.child] : [],\n        parents: [],\n      };\n\n      if (args.child) {\n        newNode.value = args.child.value;\n        args.child.parents = [newNode];\n      }\n\n      if (args.parent.parents?.length) {\n        stack.push({ child: newNode, parent: args.parent.parents[0] });\n      }\n    }\n    return newRoot;\n  });\n}\n\n// Merge subtrees into a single tree. Returns an array of levels for easy rendering. It assumes roots are mergeable,\n// meaning they represent the same unit of work (same label). Then we walk the tree in a specified direction,\n// merging nodes with the same label and same parent/child into single bigger node. This copies the tree (and all nodes)\n// as we are creating new merged nodes and modifying the parents/children.\nexport function mergeSubtrees(\n  roots: LevelItem[],\n  data: DataInterface,\n  direction: 'parents' | 'children' = 'children'\n): LevelItem[][] {\n  const oppositeDirection = direction === 'parents' ? 'children' : 'parents';\n  const levels: LevelItem[][] = [];\n\n  // Loop instead of recursion to be sure we don't blow stack size limit and save some memory. Each stack item is\n  // basically a list of arrays you would pass to each level of recursion.\n  const stack: Array<{ previous: undefined | LevelItem; items: LevelItem[]; level: number }> = [\n    { previous: undefined, items: roots, level: 0 },\n  ];\n\n  while (stack.length) {\n    const args = stack.shift()!;\n    const indexes = args.items.flatMap((i) => i.itemIndexes);\n    const newItem: LevelItem = {\n      // We use the items value instead of value from the data frame, cause we could have changed it in the process\n      value: args.items.reduce((acc, i) => acc + i.value, 0),\n      itemIndexes: indexes,\n      // these will change later\n      children: [],\n      parents: [],\n      start: 0,\n      level: args.level,\n    };\n\n    levels[args.level] = levels[args.level] || [];\n    levels[args.level].push(newItem);\n\n    if (args.previous) {\n      // Not the first level, so we need to make sure we update previous items to keep the child/parent relationships\n      // and compute correct new start offset for the item.\n      newItem[oppositeDirection] = [args.previous];\n      const prevSiblingsVal =\n        args.previous[direction]?.reduce((acc, node) => {\n          return acc + node.value;\n        }, 0) || 0;\n      newItem.start = args.previous.start + prevSiblingsVal;\n      args.previous[direction]!.push(newItem);\n    }\n\n    const nextItems = args.items.flatMap((i) => i[direction] || []);\n    // Group by label which for now is the only identifier by which we decide if node represents the same unit of work.\n    const nextGroups = groupBy(nextItems, (c) => data.getLabel(c.itemIndexes[0]));\n    for (const g of Object.values(nextGroups)) {\n      stack.push({ previous: newItem, items: g, level: args.level + 1 });\n    }\n  }\n\n  // Reverse the levels if we are doing callers tree, so we return levels in the correct order.\n  if (direction === 'parents') {\n    levels.reverse();\n    levels.forEach((level, index) => {\n      level.forEach((item) => {\n        item.level = index;\n      });\n    });\n  }\n\n  return levels;\n}\n"],"names":[],"mappings":";;AASgB,SAAA,mBAAA,CAAoB,OAAoB,IAAoC,EAAA;AAC1F,EAAM,MAAA,QAAA,GAAW,kBAAkB,KAAK,CAAA;AACxC,EAAO,OAAA,aAAA,CAAc,QAAU,EAAA,IAAA,EAAM,SAAS,CAAA;AAChD;AAiBA,SAAS,kBAAkB,KAAoB,EAAA;AAC7C,EAAO,OAAA,KAAA,CAAM,GAAI,CAAA,CAAC,CAAM,KAAA;AA9B1B,IAAA,IAAA,EAAA,EAAA,EAAA;AA+BI,IAAA,IAAI,EAAC,CAAA,EAAA,GAAA,CAAA,CAAE,OAAF,KAAA,IAAA,GAAA,SAAA,GAAA,EAAA,CAAW,MAAQ,CAAA,EAAA;AACtB,MAAO,OAAA,CAAA;AAAA;AAGT,IAAA,MAAM,OAAU,GAAA;AAAA,MACd,GAAG,CAAA;AAAA,MACH,UAAU;AAAC,KACb;AACA,IAAA,MAAM,KAAoE,GAAA;AAAA,MACxE,EAAE,KAAO,EAAA,OAAA,EAAS,QAAQ,CAAE,CAAA,OAAA,CAAQ,CAAC,CAAE;AAAA,KACzC;AAEA,IAAA,OAAO,MAAM,MAAQ,EAAA;AACnB,MAAM,MAAA,IAAA,GAAO,MAAM,KAAM,EAAA;AACzB,MAAA,MAAM,OAAU,GAAA;AAAA,QACd,GAAG,IAAK,CAAA,MAAA;AAAA,QACR,UAAU,IAAK,CAAA,KAAA,GAAQ,CAAC,IAAK,CAAA,KAAK,IAAI,EAAC;AAAA,QACvC,SAAS;AAAC,OACZ;AAEA,MAAA,IAAI,KAAK,KAAO,EAAA;AACd,QAAQ,OAAA,CAAA,KAAA,GAAQ,KAAK,KAAM,CAAA,KAAA;AAC3B,QAAK,IAAA,CAAA,KAAA,CAAM,OAAU,GAAA,CAAC,OAAO,CAAA;AAAA;AAG/B,MAAA,IAAA,CAAI,EAAK,GAAA,IAAA,CAAA,MAAA,CAAO,OAAZ,KAAA,IAAA,GAAA,SAAA,GAAA,EAAA,CAAqB,MAAQ,EAAA;AAC/B,QAAM,KAAA,CAAA,IAAA,CAAK,EAAE,KAAA,EAAO,OAAS,EAAA,MAAA,EAAQ,KAAK,MAAO,CAAA,OAAA,CAAQ,CAAC,CAAA,EAAG,CAAA;AAAA;AAC/D;AAEF,IAAO,OAAA,OAAA;AAAA,GACR,CAAA;AACH;AAMO,SAAS,aACd,CAAA,KAAA,EACA,IACA,EAAA,SAAA,GAAoC,UACrB,EAAA;AAxEjB,EAAA,IAAA,EAAA;AAyEE,EAAM,MAAA,iBAAA,GAAoB,SAAc,KAAA,SAAA,GAAY,UAAa,GAAA,SAAA;AACjE,EAAA,MAAM,SAAwB,EAAC;AAI/B,EAAA,MAAM,KAAuF,GAAA;AAAA,IAC3F,EAAE,QAAU,EAAA,SAAA,EAAW,KAAO,EAAA,KAAA,EAAO,OAAO,CAAE;AAAA,GAChD;AAEA,EAAA,OAAO,MAAM,MAAQ,EAAA;AACnB,IAAM,MAAA,IAAA,GAAO,MAAM,KAAM,EAAA;AACzB,IAAA,MAAM,UAAU,IAAK,CAAA,KAAA,CAAM,QAAQ,CAAC,CAAA,KAAM,EAAE,WAAW,CAAA;AACvD,IAAA,MAAM,OAAqB,GAAA;AAAA;AAAA,MAEzB,KAAA,EAAO,IAAK,CAAA,KAAA,CAAM,MAAO,CAAA,CAAC,KAAK,CAAM,KAAA,GAAA,GAAM,CAAE,CAAA,KAAA,EAAO,CAAC,CAAA;AAAA,MACrD,WAAa,EAAA,OAAA;AAAA;AAAA,MAEb,UAAU,EAAC;AAAA,MACX,SAAS,EAAC;AAAA,MACV,KAAO,EAAA,CAAA;AAAA,MACP,OAAO,IAAK,CAAA;AAAA,KACd;AAEA,IAAA,MAAA,CAAO,KAAK,KAAK,CAAA,GAAI,OAAO,IAAK,CAAA,KAAK,KAAK,EAAC;AAC5C,IAAA,MAAA,CAAO,IAAK,CAAA,KAAK,CAAE,CAAA,IAAA,CAAK,OAAO,CAAA;AAE/B,IAAA,IAAI,KAAK,QAAU,EAAA;AAGjB,MAAA,OAAA,CAAQ,iBAAiB,CAAA,GAAI,CAAC,IAAA,CAAK,QAAQ,CAAA;AAC3C,MAAM,MAAA,eAAA,GAAA,CAAA,CACJ,UAAK,QAAS,CAAA,SAAS,MAAvB,IAA0B,GAAA,SAAA,GAAA,EAAA,CAAA,MAAA,CAAO,CAAC,GAAA,EAAK,IAAS,KAAA;AAC9C,QAAA,OAAO,MAAM,IAAK,CAAA,KAAA;AAAA,SACjB,CAAM,CAAA,KAAA,CAAA;AACX,MAAQ,OAAA,CAAA,KAAA,GAAQ,IAAK,CAAA,QAAA,CAAS,KAAQ,GAAA,eAAA;AACtC,MAAA,IAAA,CAAK,QAAS,CAAA,SAAS,CAAG,CAAA,IAAA,CAAK,OAAO,CAAA;AAAA;AAGxC,IAAM,MAAA,SAAA,GAAY,IAAK,CAAA,KAAA,CAAM,OAAQ,CAAA,CAAC,MAAM,CAAE,CAAA,SAAS,CAAK,IAAA,EAAE,CAAA;AAE9D,IAAM,MAAA,UAAA,GAAa,OAAQ,CAAA,SAAA,EAAW,CAAC,CAAA,KAAM,IAAK,CAAA,QAAA,CAAS,CAAE,CAAA,WAAA,CAAY,CAAC,CAAC,CAAC,CAAA;AAC5E,IAAA,KAAA,MAAW,CAAK,IAAA,MAAA,CAAO,MAAO,CAAA,UAAU,CAAG,EAAA;AACzC,MAAM,KAAA,CAAA,IAAA,CAAK,EAAE,QAAA,EAAU,OAAS,EAAA,KAAA,EAAO,GAAG,KAAO,EAAA,IAAA,CAAK,KAAQ,GAAA,CAAA,EAAG,CAAA;AAAA;AACnE;AAIF,EAAA,IAAI,cAAc,SAAW,EAAA;AAC3B,IAAA,MAAA,CAAO,OAAQ,EAAA;AACf,IAAO,MAAA,CAAA,OAAA,CAAQ,CAAC,KAAA,EAAO,KAAU,KAAA;AAC/B,MAAM,KAAA,CAAA,OAAA,CAAQ,CAAC,IAAS,KAAA;AACtB,QAAA,IAAA,CAAK,KAAQ,GAAA,KAAA;AAAA,OACd,CAAA;AAAA,KACF,CAAA;AAAA;AAGH,EAAO,OAAA,MAAA;AACT;;;;"}

package/dist/esm/{FlameGraphContainer.js → FlameGraphContainer.mjs}

@@ -4,12 +4,12 @@ import uFuzzy from '@leeoniya/ufuzzy';
 import { useState, useMemo, useEffect, useCallback } from 'react';
 import { useMeasure } from 'react-use';
 import { ThemeContext } from '@grafana/ui';
-import FlameGraph from './FlameGraph/FlameGraph.js';
-import { CollapsedMap, FlameGraphDataContainer } from './FlameGraph/dataTransform.js';
-import FlameGraphHeader from './FlameGraphHeader.js';
-import FlameGraphTopTableContainer from './TopTable/FlameGraphTopTableContainer.js';
-import { MIN_WIDTH_TO_SHOW_BOTH_TOPTABLE_AND_FLAMEGRAPH } from './constants.js';
-import { SelectedView, ColorSchemeDiff, ColorScheme } from './types.js';
+import FlameGraph from './FlameGraph/FlameGraph.mjs';
+import { CollapsedMap, FlameGraphDataContainer } from './FlameGraph/dataTransform.mjs';
+import FlameGraphHeader from './FlameGraphHeader.mjs';
+import FlameGraphTopTableContainer from './TopTable/FlameGraphTopTableContainer.mjs';
+import { MIN_WIDTH_TO_SHOW_BOTH_TOPTABLE_AND_FLAMEGRAPH } from './constants.mjs';
+import { SelectedView, ColorSchemeDiff, ColorScheme } from './types.mjs';
 
 const ufuzzy = new uFuzzy();
 const FlameGraphContainer = ({
@@ -276,4 +276,4 @@ function getStyles(theme) {
 }
 
 export { FlameGraphContainer as default };
-//# sourceMappingURL=FlameGraphContainer.js.map
+//# sourceMappingURL=FlameGraphContainer.mjs.map

package/dist/esm/FlameGraphContainer.mjs.map

@@ -0,0 +1 @@
+{"version":3,"file":"FlameGraphContainer.mjs","sources":["../../src/FlameGraphContainer.tsx"],"sourcesContent":["import { css } from '@emotion/css';\nimport uFuzzy from '@leeoniya/ufuzzy';\nimport { useCallback, useEffect, useMemo, useState } from 'react';\nimport * as React from 'react';\nimport { useMeasure } from 'react-use';\n\nimport { DataFrame, GrafanaTheme2 } from '@grafana/data';\nimport { ThemeContext } from '@grafana/ui';\n\nimport FlameGraph from './FlameGraph/FlameGraph';\nimport { GetExtraContextMenuButtonsFunction } from './FlameGraph/FlameGraphContextMenu';\nimport { CollapsedMap, FlameGraphDataContainer } from './FlameGraph/dataTransform';\nimport FlameGraphHeader from './FlameGraphHeader';\nimport FlameGraphTopTableContainer from './TopTable/FlameGraphTopTableContainer';\nimport { MIN_WIDTH_TO_SHOW_BOTH_TOPTABLE_AND_FLAMEGRAPH } from './constants';\nimport { ClickedItemData, ColorScheme, ColorSchemeDiff, SelectedView, TextAlign } from './types';\n\nconst ufuzzy = new uFuzzy();\n\nexport type Props = {\n  /**\n   * DataFrame with the profile data. The dataFrame needs to have the following fields:\n   * label: string - the label of the node\n   * level: number - the nesting level of the node\n   * value: number - the total value of the node\n   * self: number - the self value of the node\n   * Optionally if it represents diff of 2 different profiles it can also have fields:\n   * valueRight: number - the total value of the node in the right profile\n   * selfRight: number - the self value of the node in the right profile\n   */\n  data?: DataFrame;\n\n  /**\n   * Whether the header should be sticky and be always visible on the top when scrolling.\n   */\n  stickyHeader?: boolean;\n\n  /**\n   * Provides a theme for the visualization on which colors and some sizes are based.\n   */\n  getTheme: () => GrafanaTheme2;\n\n  /**\n   * Various interaction hooks that can be used to report on the interaction.\n   */\n  onTableSymbolClick?: (symbol: string) => void;\n  onViewSelected?: (view: string) => void;\n  onTextAlignSelected?: (align: string) => void;\n  onTableSort?: (sort: string) => void;\n\n  /**\n   * Elements that will be shown in the header on the right side of the header buttons. Useful for additional\n   * functionality.\n   */\n  extraHeaderElements?: React.ReactNode;\n\n  /**\n   * Extra buttons that will be shown in the context menu when user clicks on a Node.\n   */\n  getExtraContextMenuButtons?: GetExtraContextMenuButtonsFunction;\n\n  /**\n   * If true the flamegraph will be rendered on top of the table.\n   */\n  vertical?: boolean;\n\n  /**\n   * If true only the flamegraph will be rendered.\n   */\n  showFlameGraphOnly?: boolean;\n\n  /**\n   * Disable behaviour where similar items in the same stack will be collapsed into single item.\n   */\n  disableCollapsing?: boolean;\n  /**\n   * Whether or not to keep any focused item when the profile data changes.\n   */\n  keepFocusOnDataChange?: boolean;\n};\n\nconst FlameGraphContainer = ({\n  data,\n  onTableSymbolClick,\n  onViewSelected,\n  onTextAlignSelected,\n  onTableSort,\n  getTheme,\n  stickyHeader,\n  extraHeaderElements,\n  vertical,\n  showFlameGraphOnly,\n  disableCollapsing,\n  keepFocusOnDataChange,\n  getExtraContextMenuButtons,\n}: Props) => {\n  const [focusedItemData, setFocusedItemData] = useState<ClickedItemData>();\n\n  const [rangeMin, setRangeMin] = useState(0);\n  const [rangeMax, setRangeMax] = useState(1);\n  const [search, setSearch] = useState('');\n  const [selectedView, setSelectedView] = useState(SelectedView.Both);\n  const [sizeRef, { width: containerWidth }] = useMeasure<HTMLDivElement>();\n  const [textAlign, setTextAlign] = useState<TextAlign>('left');\n  // This is a label of the item because in sandwich view we group all items by label and present a merged graph\n  const [sandwichItem, setSandwichItem] = useState<string>();\n  const [collapsedMap, setCollapsedMap] = useState(new CollapsedMap());\n\n  const theme = useMemo(() => getTheme(), [getTheme]);\n  const dataContainer = useMemo((): FlameGraphDataContainer | undefined => {\n    if (!data) {\n      return;\n    }\n\n    const container = new FlameGraphDataContainer(data, { collapsing: !disableCollapsing }, theme);\n    setCollapsedMap(container.getCollapsedMap());\n    return container;\n  }, [data, theme, disableCollapsing]);\n  const [colorScheme, setColorScheme] = useColorScheme(dataContainer);\n  const styles = getStyles(theme);\n  const matchedLabels = useLabelSearch(search, dataContainer);\n\n  // If user resizes window with both as the selected view\n  useEffect(() => {\n    if (\n      containerWidth > 0 &&\n      containerWidth < MIN_WIDTH_TO_SHOW_BOTH_TOPTABLE_AND_FLAMEGRAPH &&\n      selectedView === SelectedView.Both &&\n      !vertical\n    ) {\n      setSelectedView(SelectedView.FlameGraph);\n    }\n  }, [selectedView, setSelectedView, containerWidth, vertical]);\n\n  const resetFocus = useCallback(() => {\n    setFocusedItemData(undefined);\n    setRangeMin(0);\n    setRangeMax(1);\n  }, [setFocusedItemData, setRangeMax, setRangeMin]);\n\n  const resetSandwich = useCallback(() => {\n    setSandwichItem(undefined);\n  }, [setSandwichItem]);\n\n  useEffect(() => {\n    if (!keepFocusOnDataChange) {\n      resetFocus();\n      resetSandwich();\n      return;\n    }\n\n    if (dataContainer && focusedItemData) {\n      const item = dataContainer.getNodesWithLabel(focusedItemData.label)?.[0];\n\n      if (item) {\n        setFocusedItemData({ ...focusedItemData, item });\n\n        const levels = dataContainer.getLevels();\n        const totalViewTicks = levels.length ? levels[0][0].value : 0;\n        setRangeMin(item.start / totalViewTicks);\n        setRangeMax((item.start + item.value) / totalViewTicks);\n      } else {\n        setFocusedItemData({\n          ...focusedItemData,\n          item: {\n            start: 0,\n            value: 0,\n            itemIndexes: [],\n            children: [],\n            level: 0,\n          },\n        });\n\n        setRangeMin(0);\n        setRangeMax(1);\n      }\n    }\n  }, [dataContainer, keepFocusOnDataChange]); // eslint-disable-line react-hooks/exhaustive-deps\n\n  const onSymbolClick = useCallback(\n    (symbol: string) => {\n      if (search === symbol) {\n        setSearch('');\n      } else {\n        onTableSymbolClick?.(symbol);\n        setSearch(symbol);\n        resetFocus();\n      }\n    },\n    [setSearch, resetFocus, onTableSymbolClick, search]\n  );\n\n  if (!dataContainer) {\n    return null;\n  }\n\n  const flameGraph = (\n    <FlameGraph\n      data={dataContainer}\n      rangeMin={rangeMin}\n      rangeMax={rangeMax}\n      matchedLabels={matchedLabels}\n      setRangeMin={setRangeMin}\n      setRangeMax={setRangeMax}\n      onItemFocused={(data) => setFocusedItemData(data)}\n      focusedItemData={focusedItemData}\n      textAlign={textAlign}\n      sandwichItem={sandwichItem}\n      onSandwich={(label: string) => {\n        resetFocus();\n        setSandwichItem(label);\n      }}\n      onFocusPillClick={resetFocus}\n      onSandwichPillClick={resetSandwich}\n      colorScheme={colorScheme}\n      showFlameGraphOnly={showFlameGraphOnly}\n      collapsing={!disableCollapsing}\n      getExtraContextMenuButtons={getExtraContextMenuButtons}\n      selectedView={selectedView}\n      search={search}\n      collapsedMap={collapsedMap}\n      setCollapsedMap={setCollapsedMap}\n    />\n  );\n\n  const table = (\n    <FlameGraphTopTableContainer\n      data={dataContainer}\n      onSymbolClick={onSymbolClick}\n      search={search}\n      matchedLabels={matchedLabels}\n      sandwichItem={sandwichItem}\n      onSandwich={setSandwichItem}\n      onSearch={setSearch}\n      onTableSort={onTableSort}\n      colorScheme={colorScheme}\n    />\n  );\n\n  let body;\n  if (showFlameGraphOnly || selectedView === SelectedView.FlameGraph) {\n    body = flameGraph;\n  } else if (selectedView === SelectedView.TopTable) {\n    body = <div className={styles.tableContainer}>{table}</div>;\n  } else if (selectedView === SelectedView.Both) {\n    if (vertical) {\n      body = (\n        <div>\n          <div className={styles.verticalGraphContainer}>{flameGraph}</div>\n          <div className={styles.verticalTableContainer}>{table}</div>\n        </div>\n      );\n    } else {\n      body = (\n        <div className={styles.horizontalContainer}>\n          <div className={styles.horizontalTableContainer}>{table}</div>\n          <div className={styles.horizontalGraphContainer}>{flameGraph}</div>\n        </div>\n      );\n    }\n  }\n\n  return (\n    // We add the theme context to bridge the gap if this is rendered in non grafana environment where the context\n    // isn't already provided.\n    <ThemeContext.Provider value={theme}>\n      <div ref={sizeRef} className={styles.container}>\n        {!showFlameGraphOnly && (\n          <FlameGraphHeader\n            search={search}\n            setSearch={setSearch}\n            selectedView={selectedView}\n            setSelectedView={(view) => {\n              setSelectedView(view);\n              onViewSelected?.(view);\n            }}\n            containerWidth={containerWidth}\n            onReset={() => {\n              resetFocus();\n              resetSandwich();\n            }}\n            textAlign={textAlign}\n            onTextAlignChange={(align) => {\n              setTextAlign(align);\n              onTextAlignSelected?.(align);\n            }}\n            showResetButton={Boolean(focusedItemData || sandwichItem)}\n            colorScheme={colorScheme}\n            onColorSchemeChange={setColorScheme}\n            stickyHeader={Boolean(stickyHeader)}\n            extraHeaderElements={extraHeaderElements}\n            vertical={vertical}\n            isDiffMode={dataContainer.isDiffFlamegraph()}\n            setCollapsedMap={setCollapsedMap}\n            collapsedMap={collapsedMap}\n          />\n        )}\n\n        <div className={styles.body}>{body}</div>\n      </div>\n    </ThemeContext.Provider>\n  );\n};\n\nfunction useColorScheme(dataContainer: FlameGraphDataContainer | undefined) {\n  const defaultColorScheme = dataContainer?.isDiffFlamegraph() ? ColorSchemeDiff.Default : ColorScheme.PackageBased;\n  const [colorScheme, setColorScheme] = useState<ColorScheme | ColorSchemeDiff>(defaultColorScheme);\n\n  // This makes sure that if we change the data to/from diff profile we reset the color scheme.\n  useEffect(() => {\n    setColorScheme(defaultColorScheme);\n  }, [defaultColorScheme]);\n\n  return [colorScheme, setColorScheme] as const;\n}\n\n/**\n * Based on the search string it does a fuzzy search over all the unique labels, so we can highlight them later.\n */\nfunction useLabelSearch(\n  search: string | undefined,\n  data: FlameGraphDataContainer | undefined\n): Set<string> | undefined {\n  return useMemo(() => {\n    if (search && data) {\n      const foundLabels = new Set<string>();\n      let idxs = ufuzzy.filter(data.getUniqueLabels(), search);\n\n      if (idxs) {\n        for (let idx of idxs) {\n          foundLabels.add(data.getUniqueLabels()[idx]);\n        }\n      }\n\n      return foundLabels;\n    }\n    // In this case undefined means there was no search so no attempt to highlighting anything should be made.\n    return undefined;\n  }, [search, data]);\n}\n\nfunction getStyles(theme: GrafanaTheme2) {\n  return {\n    container: css({\n      label: 'container',\n      overflow: 'auto',\n      height: '100%',\n      display: 'flex',\n      flex: '1 1 0',\n      flexDirection: 'column',\n      minHeight: 0,\n      gap: theme.spacing(1),\n    }),\n    body: css({\n      label: 'body',\n      flexGrow: 1,\n    }),\n\n    tableContainer: css({\n      // This is not ideal for dashboard panel where it creates a double scroll. In a panel it should be 100% but then\n      // in explore we need a specific height.\n      height: 800,\n    }),\n\n    horizontalContainer: css({\n      label: 'horizontalContainer',\n      display: 'flex',\n      minHeight: 0,\n      flexDirection: 'row',\n      columnGap: theme.spacing(1),\n      width: '100%',\n    }),\n\n    horizontalGraphContainer: css({\n      flexBasis: '50%',\n    }),\n\n    horizontalTableContainer: css({\n      flexBasis: '50%',\n      maxHeight: 800,\n    }),\n\n    verticalGraphContainer: css({\n      marginBottom: theme.spacing(1),\n    }),\n\n    verticalTableContainer: css({\n      height: 800,\n    }),\n  };\n}\n\nexport default FlameGraphContainer;\n"],"names":["data"],"mappings":"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"}

package/dist/esm/{FlameGraphHeader.js → FlameGraphHeader.mjs}

@@ -4,9 +4,9 @@ import { useState, useEffect } from 'react';
 import useDebounce from 'react-use/lib/useDebounce';
 import usePrevious from 'react-use/lib/usePrevious';
 import { useStyles2, Input, Button, ButtonGroup, RadioButtonGroup, Menu, Dropdown } from '@grafana/ui';
-import { byValueGradient, byPackageGradient, diffDefaultGradient, diffColorBlindGradient } from './FlameGraph/colors.js';
-import { MIN_WIDTH_TO_SHOW_BOTH_TOPTABLE_AND_FLAMEGRAPH } from './constants.js';
-import { SelectedView, ColorScheme, ColorSchemeDiff } from './types.js';
+import { byValueGradient, byPackageGradient, diffDefaultGradient, diffColorBlindGradient } from './FlameGraph/colors.mjs';
+import { MIN_WIDTH_TO_SHOW_BOTH_TOPTABLE_AND_FLAMEGRAPH } from './constants.mjs';
+import { SelectedView, ColorScheme, ColorSchemeDiff } from './types.mjs';
 
 const FlameGraphHeader = ({
   search,
@@ -289,4 +289,4 @@ const getStyles = (theme) => ({
 });
 
 export { FlameGraphHeader as default };
-//# sourceMappingURL=FlameGraphHeader.js.map
+//# sourceMappingURL=FlameGraphHeader.mjs.map

package/dist/esm/FlameGraphHeader.mjs.map

@@ -0,0 +1 @@
+{"version":3,"file":"FlameGraphHeader.mjs","sources":["../../src/FlameGraphHeader.tsx"],"sourcesContent":["import { css, cx } from '@emotion/css';\nimport { useEffect, useState } from 'react';\nimport * as React from 'react';\nimport useDebounce from 'react-use/lib/useDebounce';\nimport usePrevious from 'react-use/lib/usePrevious';\n\nimport { GrafanaTheme2, SelectableValue } from '@grafana/data';\nimport { Button, ButtonGroup, Dropdown, Input, Menu, RadioButtonGroup, useStyles2 } from '@grafana/ui';\n\nimport { byPackageGradient, byValueGradient, diffColorBlindGradient, diffDefaultGradient } from './FlameGraph/colors';\nimport { CollapsedMap } from './FlameGraph/dataTransform';\nimport { MIN_WIDTH_TO_SHOW_BOTH_TOPTABLE_AND_FLAMEGRAPH } from './constants';\nimport { ColorScheme, ColorSchemeDiff, SelectedView, TextAlign } from './types';\n\ntype Props = {\n  search: string;\n  setSearch: (search: string) => void;\n  selectedView: SelectedView;\n  setSelectedView: (view: SelectedView) => void;\n  containerWidth: number;\n  onReset: () => void;\n  textAlign: TextAlign;\n  onTextAlignChange: (align: TextAlign) => void;\n  showResetButton: boolean;\n  colorScheme: ColorScheme | ColorSchemeDiff;\n  onColorSchemeChange: (colorScheme: ColorScheme | ColorSchemeDiff) => void;\n  stickyHeader: boolean;\n  vertical?: boolean;\n  isDiffMode: boolean;\n  setCollapsedMap: (collapsedMap: CollapsedMap) => void;\n  collapsedMap: CollapsedMap;\n\n  extraHeaderElements?: React.ReactNode;\n};\n\nconst FlameGraphHeader = ({\n  search,\n  setSearch,\n  selectedView,\n  setSelectedView,\n  containerWidth,\n  onReset,\n  textAlign,\n  onTextAlignChange,\n  showResetButton,\n  colorScheme,\n  onColorSchemeChange,\n  stickyHeader,\n  extraHeaderElements,\n  vertical,\n  isDiffMode,\n  setCollapsedMap,\n  collapsedMap,\n}: Props) => {\n  const styles = useStyles2(getStyles);\n  const [localSearch, setLocalSearch] = useSearchInput(search, setSearch);\n\n  const suffix =\n    localSearch !== '' ? (\n      <Button\n        icon=\"times\"\n        fill=\"text\"\n        size=\"sm\"\n        onClick={() => {\n          // We could set only one and wait them to sync but there is no need to debounce this.\n          setSearch('');\n          setLocalSearch('');\n        }}\n      >\n        Clear\n      </Button>\n    ) : null;\n\n  return (\n    <div className={cx(styles.header, { [styles.stickyHeader]: stickyHeader })}>\n      <div className={styles.inputContainer}>\n        <Input\n          value={localSearch || ''}\n          onChange={(v) => {\n            setLocalSearch(v.currentTarget.value);\n          }}\n          placeholder={'Search...'}\n          suffix={suffix}\n        />\n      </div>\n\n      <div className={styles.rightContainer}>\n        {showResetButton && (\n          <Button\n            variant={'secondary'}\n            fill={'outline'}\n            size={'sm'}\n            icon={'history-alt'}\n            tooltip={'Reset focus and sandwich state'}\n            onClick={() => {\n              onReset();\n            }}\n            className={styles.buttonSpacing}\n            aria-label={'Reset focus and sandwich state'}\n          />\n        )}\n        <ColorSchemeButton value={colorScheme} onChange={onColorSchemeChange} isDiffMode={isDiffMode} />\n        <ButtonGroup className={styles.buttonSpacing}>\n          <Button\n            variant={'secondary'}\n            fill={'outline'}\n            size={'sm'}\n            tooltip={'Expand all groups'}\n            onClick={() => {\n              setCollapsedMap(collapsedMap.setAllCollapsedStatus(false));\n            }}\n            aria-label={'Expand all groups'}\n            icon={'angle-double-down'}\n            disabled={selectedView === SelectedView.TopTable}\n          />\n          <Button\n            variant={'secondary'}\n            fill={'outline'}\n            size={'sm'}\n            tooltip={'Collapse all groups'}\n            onClick={() => {\n              setCollapsedMap(collapsedMap.setAllCollapsedStatus(true));\n            }}\n            aria-label={'Collapse all groups'}\n            icon={'angle-double-up'}\n            disabled={selectedView === SelectedView.TopTable}\n          />\n        </ButtonGroup>\n        <RadioButtonGroup<TextAlign>\n          size=\"sm\"\n          disabled={selectedView === SelectedView.TopTable}\n          options={alignOptions}\n          value={textAlign}\n          onChange={onTextAlignChange}\n          className={styles.buttonSpacing}\n        />\n        <RadioButtonGroup<SelectedView>\n          size=\"sm\"\n          options={getViewOptions(containerWidth, vertical)}\n          value={selectedView}\n          onChange={setSelectedView}\n        />\n        {extraHeaderElements && <div className={styles.extraElements}>{extraHeaderElements}</div>}\n      </div>\n    </div>\n  );\n};\n\ntype ColorSchemeButtonProps = {\n  value: ColorScheme | ColorSchemeDiff;\n  onChange: (colorScheme: ColorScheme | ColorSchemeDiff) => void;\n  isDiffMode: boolean;\n};\nfunction ColorSchemeButton(props: ColorSchemeButtonProps) {\n  // TODO: probably create separate getStyles\n  const styles = useStyles2(getStyles);\n  let menu = (\n    <Menu>\n      <Menu.Item label=\"By package name\" onClick={() => props.onChange(ColorScheme.PackageBased)} />\n      <Menu.Item label=\"By value\" onClick={() => props.onChange(ColorScheme.ValueBased)} />\n    </Menu>\n  );\n\n  // Show a bit different gradient as a way to indicate selected value\n  const colorDotStyle =\n    {\n      [ColorScheme.ValueBased]: styles.colorDotByValue,\n      [ColorScheme.PackageBased]: styles.colorDotByPackage,\n      [ColorSchemeDiff.DiffColorBlind]: styles.colorDotDiffColorBlind,\n      [ColorSchemeDiff.Default]: styles.colorDotDiffDefault,\n    }[props.value] || styles.colorDotByValue;\n\n  let contents = <span className={cx(styles.colorDot, colorDotStyle)} />;\n\n  if (props.isDiffMode) {\n    menu = (\n      <Menu>\n        <Menu.Item label=\"Default (green to red)\" onClick={() => props.onChange(ColorSchemeDiff.Default)} />\n        <Menu.Item label=\"Color blind (blue to red)\" onClick={() => props.onChange(ColorSchemeDiff.DiffColorBlind)} />\n      </Menu>\n    );\n\n    contents = (\n      <div className={cx(styles.colorDotDiff, colorDotStyle)}>\n        <div>-100% (removed)</div>\n        <div>0%</div>\n        <div>+100% (added)</div>\n      </div>\n    );\n  }\n\n  return (\n    <Dropdown overlay={menu}>\n      <Button\n        variant={'secondary'}\n        fill={'outline'}\n        size={'sm'}\n        tooltip={'Change color scheme'}\n        onClick={() => {}}\n        className={styles.buttonSpacing}\n        aria-label={'Change color scheme'}\n      >\n        {contents}\n      </Button>\n    </Dropdown>\n  );\n}\n\nconst alignOptions: Array<SelectableValue<TextAlign>> = [\n  { value: 'left', description: 'Align text left', icon: 'align-left' },\n  { value: 'right', description: 'Align text right', icon: 'align-right' },\n];\n\nfunction getViewOptions(width: number, vertical?: boolean): Array<SelectableValue<SelectedView>> {\n  let viewOptions: Array<{ value: SelectedView; label: string; description: string }> = [\n    { value: SelectedView.TopTable, label: 'Top Table', description: 'Only show top table' },\n    { value: SelectedView.FlameGraph, label: 'Flame Graph', description: 'Only show flame graph' },\n  ];\n\n  if (width >= MIN_WIDTH_TO_SHOW_BOTH_TOPTABLE_AND_FLAMEGRAPH || vertical) {\n    viewOptions.push({\n      value: SelectedView.Both,\n      label: 'Both',\n      description: 'Show both the top table and flame graph',\n    });\n  }\n\n  return viewOptions;\n}\n\nfunction useSearchInput(\n  search: string,\n  setSearch: (search: string) => void\n): [string | undefined, (search: string) => void] {\n  const [localSearchState, setLocalSearchState] = useState(search);\n  const prevSearch = usePrevious(search);\n\n  // Debouncing cause changing parent search triggers rerender on both the flamegraph and table\n  useDebounce(\n    () => {\n      setSearch(localSearchState);\n    },\n    250,\n    [localSearchState]\n  );\n\n  // Make sure we still handle updates from parent (from clicking on a table item for example). We check if the parent\n  // search value changed to something that isn't our local value.\n  useEffect(() => {\n    if (prevSearch !== search && search !== localSearchState) {\n      setLocalSearchState(search);\n    }\n  }, [search, prevSearch, localSearchState]);\n\n  return [localSearchState, setLocalSearchState];\n}\n\nconst getStyles = (theme: GrafanaTheme2) => ({\n  header: css({\n    label: 'header',\n    display: 'flex',\n    flexWrap: 'wrap',\n    justifyContent: 'space-between',\n    width: '100%',\n    top: 0,\n    gap: theme.spacing(1),\n    marginTop: theme.spacing(1),\n  }),\n  stickyHeader: css({\n    zIndex: theme.zIndex.navbarFixed,\n    position: 'sticky',\n    background: theme.colors.background.primary,\n  }),\n  inputContainer: css({\n    label: 'inputContainer',\n    flexGrow: 1,\n    minWidth: '150px',\n    maxWidth: '350px',\n  }),\n  rightContainer: css({\n    label: 'rightContainer',\n    display: 'flex',\n    alignItems: 'flex-start',\n    flexWrap: 'wrap',\n  }),\n  buttonSpacing: css({\n    label: 'buttonSpacing',\n    marginRight: theme.spacing(1),\n  }),\n  resetButton: css({\n    label: 'resetButton',\n    display: 'flex',\n    marginRight: theme.spacing(2),\n  }),\n  resetButtonIconWrapper: css({\n    label: 'resetButtonIcon',\n    padding: '0 5px',\n    color: theme.colors.text.disabled,\n  }),\n  colorDot: css({\n    label: 'colorDot',\n    display: 'inline-block',\n    width: '10px',\n    height: '10px',\n    // eslint-disable-next-line @grafana/no-border-radius-literal\n    borderRadius: '50%',\n  }),\n  colorDotDiff: css({\n    label: 'colorDotDiff',\n    display: 'flex',\n    width: '200px',\n    height: '12px',\n    color: 'white',\n    fontSize: 9,\n    lineHeight: 1.3,\n    fontWeight: 300,\n    justifyContent: 'space-between',\n    padding: '0 2px',\n    // We have a specific sizing for this so probably makes sense to use hardcoded value here\n    // eslint-disable-next-line @grafana/no-border-radius-literal\n    borderRadius: '2px',\n  }),\n  colorDotByValue: css({\n    label: 'colorDotByValue',\n    background: byValueGradient,\n  }),\n  colorDotByPackage: css({\n    label: 'colorDotByPackage',\n    background: byPackageGradient,\n  }),\n  colorDotDiffDefault: css({\n    label: 'colorDotDiffDefault',\n    background: diffDefaultGradient,\n  }),\n  colorDotDiffColorBlind: css({\n    label: 'colorDotDiffColorBlind',\n    background: diffColorBlindGradient,\n  }),\n  extraElements: css({\n    label: 'extraElements',\n    marginLeft: theme.spacing(1),\n  }),\n});\n\nexport default FlameGraphHeader;\n"],"names":[],"mappings":"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"}

package/dist/esm/TopTable/{FlameGraphTopTableContainer.js → FlameGraphTopTableContainer.mjs}

@@ -4,9 +4,9 @@ import { memo, useMemo, useState } from 'react';
 import AutoSizer from 'react-virtualized-auto-sizer';
 import { FieldType, MappingType, applyFieldOverrides } from '@grafana/data';
 import { useStyles2, useTheme2, Table, TableCellDisplayMode, IconButton } from '@grafana/ui';
-import { diffColorBlindColors, diffDefaultColors } from '../FlameGraph/colors.js';
-import { TOP_TABLE_COLUMN_WIDTH } from '../constants.js';
-import { ColorSchemeDiff } from '../types.js';
+import { diffColorBlindColors, diffDefaultColors } from '../FlameGraph/colors.mjs';
+import { TOP_TABLE_COLUMN_WIDTH } from '../constants.mjs';
+import { ColorSchemeDiff } from '../types.mjs';
 
 const FlameGraphTopTableContainer = memo(
   ({
@@ -264,4 +264,4 @@ const getStylesActionCell = () => {
 };
 
 export { FlameGraphTopTableContainer as default };
-//# sourceMappingURL=FlameGraphTopTableContainer.js.map
+//# sourceMappingURL=FlameGraphTopTableContainer.mjs.map

package/dist/esm/TopTable/FlameGraphTopTableContainer.mjs.map

@@ -0,0 +1 @@
+{"version":3,"file":"FlameGraphTopTableContainer.mjs","sources":["../../../src/TopTable/FlameGraphTopTableContainer.tsx"],"sourcesContent":["import { css } from '@emotion/css';\nimport { memo, useMemo, useState } from 'react';\nimport AutoSizer from 'react-virtualized-auto-sizer';\n\nimport {\n  applyFieldOverrides,\n  DataFrame,\n  DataLinkClickEvent,\n  Field,\n  FieldType,\n  GrafanaTheme2,\n  MappingType,\n} from '@grafana/data';\nimport {\n  IconButton,\n  Table,\n  TableCellDisplayMode,\n  TableCustomCellOptions,\n  TableFieldOptions,\n  TableSortByFieldState,\n  useStyles2,\n  useTheme2,\n} from '@grafana/ui';\n\nimport { diffColorBlindColors, diffDefaultColors } from '../FlameGraph/colors';\nimport { FlameGraphDataContainer } from '../FlameGraph/dataTransform';\nimport { TOP_TABLE_COLUMN_WIDTH } from '../constants';\nimport { ColorScheme, ColorSchemeDiff, TableData } from '../types';\n\ntype Props = {\n  data: FlameGraphDataContainer;\n  onSymbolClick: (symbol: string) => void;\n  // This is used for highlighting the search button in case there is exact match.\n  search?: string;\n  // We use these to filter out rows in the table if users is doing text search.\n  matchedLabels?: Set<string>;\n  sandwichItem?: string;\n  onSearch: (str: string) => void;\n  onSandwich: (str?: string) => void;\n  onTableSort?: (sort: string) => void;\n  colorScheme: ColorScheme | ColorSchemeDiff;\n};\n\nconst FlameGraphTopTableContainer = memo(\n  ({\n    data,\n    onSymbolClick,\n    search,\n    matchedLabels,\n    onSearch,\n    sandwichItem,\n    onSandwich,\n    onTableSort,\n    colorScheme,\n  }: Props) => {\n    const table = useMemo(() => {\n      // Group the data by label, we show only one row per label and sum the values\n      // TODO: should be by filename + funcName + linenumber?\n      let filteredTable: { [key: string]: TableData } = {};\n      for (let i = 0; i < data.data.length; i++) {\n        const value = data.getValue(i);\n        const valueRight = data.getValueRight(i);\n        const self = data.getSelf(i);\n        const label = data.getLabel(i);\n\n        // If user is doing text search we filter out labels in the same way we highlight them in flame graph.\n        if (!matchedLabels || matchedLabels.has(label)) {\n          filteredTable[label] = filteredTable[label] || {};\n          filteredTable[label].self = filteredTable[label].self ? filteredTable[label].self + self : self;\n          filteredTable[label].total = filteredTable[label].total ? filteredTable[label].total + value : value;\n          filteredTable[label].totalRight = filteredTable[label].totalRight\n            ? filteredTable[label].totalRight + valueRight\n            : valueRight;\n        }\n      }\n      return filteredTable;\n    }, [data, matchedLabels]);\n\n    const styles = useStyles2(getStyles);\n    const theme = useTheme2();\n\n    const [sort, setSort] = useState<TableSortByFieldState[]>([{ displayName: 'Self', desc: true }]);\n\n    return (\n      <div className={styles.topTableContainer} data-testid=\"topTable\">\n        <AutoSizer style={{ width: '100%' }}>\n          {({ width, height }) => {\n            if (width < 3 || height < 3) {\n              return null;\n            }\n\n            const frame = buildTableDataFrame(\n              data,\n              table,\n              width,\n              onSymbolClick,\n              onSearch,\n              onSandwich,\n              theme,\n              colorScheme,\n              search,\n              sandwichItem\n            );\n            return (\n              <Table\n                initialSortBy={sort}\n                onSortByChange={(s) => {\n                  if (s && s.length) {\n                    onTableSort?.(s[0].displayName + '_' + (s[0].desc ? 'desc' : 'asc'));\n                  }\n                  setSort(s);\n                }}\n                data={frame}\n                width={width}\n                height={height}\n              />\n            );\n          }}\n        </AutoSizer>\n      </div>\n    );\n  }\n);\n\nFlameGraphTopTableContainer.displayName = 'FlameGraphTopTableContainer';\n\nfunction buildTableDataFrame(\n  data: FlameGraphDataContainer,\n  table: { [key: string]: TableData },\n  width: number,\n  onSymbolClick: (str: string) => void,\n  onSearch: (str: string) => void,\n  onSandwich: (str?: string) => void,\n  theme: GrafanaTheme2,\n  colorScheme: ColorScheme | ColorSchemeDiff,\n  search?: string,\n  sandwichItem?: string\n): DataFrame {\n  const actionField: Field = createActionField(onSandwich, onSearch, search, sandwichItem);\n\n  const symbolField: Field = {\n    type: FieldType.string,\n    name: 'Symbol',\n    values: [],\n    config: {\n      custom: { width: width - actionColumnWidth - TOP_TABLE_COLUMN_WIDTH * 2 },\n      links: [\n        {\n          title: 'Highlight symbol',\n          url: '',\n          onClick: (e: DataLinkClickEvent) => {\n            const field: Field = e.origin.field;\n            const value = field.values[e.origin.rowIndex];\n            onSymbolClick(value);\n          },\n        },\n      ],\n    },\n  };\n\n  let frame;\n\n  if (data.isDiffFlamegraph()) {\n    symbolField.config.custom.width = width - actionColumnWidth - TOP_TABLE_COLUMN_WIDTH * 3;\n\n    const baselineField = createNumberField('Baseline', 'percent');\n    const comparisonField = createNumberField('Comparison', 'percent');\n    const diffField = createNumberField('Diff', 'percent');\n    diffField.config.custom.cellOptions.type = TableCellDisplayMode.ColorText;\n\n    const [removeColor, addColor] =\n      colorScheme === ColorSchemeDiff.DiffColorBlind\n        ? [diffColorBlindColors[0], diffColorBlindColors[2]]\n        : [diffDefaultColors[0], diffDefaultColors[2]];\n\n    diffField.config.mappings = [\n      { type: MappingType.ValueToText, options: { [Infinity]: { text: 'new', color: addColor } } },\n      { type: MappingType.ValueToText, options: { [-100]: { text: 'removed', color: removeColor } } },\n      { type: MappingType.RangeToText, options: { from: 0, to: Infinity, result: { color: addColor } } },\n      { type: MappingType.RangeToText, options: { from: -Infinity, to: 0, result: { color: removeColor } } },\n    ];\n\n    // For this we don't really consider sandwich view even though you can switch it on.\n    const levels = data.getLevels();\n    const totalTicks = levels.length ? levels[0][0].value : 0;\n    const totalTicksRight = levels.length ? levels[0][0].valueRight : undefined;\n\n    for (let key in table) {\n      actionField.values.push(null);\n      symbolField.values.push(key);\n\n      const ticksLeft = table[key].total;\n      const ticksRight = table[key].totalRight;\n\n      // We are iterating over table of the data so totalTicksRight needs to be defined\n      const totalTicksLeft = totalTicks - totalTicksRight!;\n\n      const percentageLeft = Math.round((10000 * ticksLeft) / totalTicksLeft) / 100;\n      const percentageRight = Math.round((10000 * ticksRight) / totalTicksRight!) / 100;\n\n      const diff = ((percentageRight - percentageLeft) / percentageLeft) * 100;\n\n      diffField.values.push(diff);\n      baselineField.values.push(percentageLeft);\n      comparisonField.values.push(percentageRight);\n    }\n\n    frame = {\n      fields: [actionField, symbolField, baselineField, comparisonField, diffField],\n      length: symbolField.values.length,\n    };\n  } else {\n    const selfField = createNumberField('Self', data.selfField.config.unit);\n    const totalField = createNumberField('Total', data.valueField.config.unit);\n\n    for (let key in table) {\n      actionField.values.push(null);\n      symbolField.values.push(key);\n      selfField.values.push(table[key].self);\n      totalField.values.push(table[key].total);\n    }\n\n    frame = { fields: [actionField, symbolField, selfField, totalField], length: symbolField.values.length };\n  }\n\n  const dataFrames = applyFieldOverrides({\n    data: [frame],\n    fieldConfig: {\n      defaults: {},\n      overrides: [],\n    },\n    replaceVariables: (value: string) => value,\n    theme,\n  });\n\n  return dataFrames[0];\n}\n\nfunction createNumberField(name: string, unit?: string): Field {\n  const tableFieldOptions: TableFieldOptions = {\n    width: TOP_TABLE_COLUMN_WIDTH,\n    align: 'auto',\n    inspect: false,\n    cellOptions: { type: TableCellDisplayMode.Auto },\n  };\n\n  return {\n    type: FieldType.number,\n    name,\n    values: [],\n    config: {\n      unit,\n      custom: tableFieldOptions,\n    },\n  };\n}\n\nconst actionColumnWidth = 61;\n\nfunction createActionField(\n  onSandwich: (str?: string) => void,\n  onSearch: (str: string) => void,\n  search?: string,\n  sandwichItem?: string\n): Field {\n  const options: TableCustomCellOptions = {\n    type: TableCellDisplayMode.Custom,\n    cellComponent: (props) => {\n      return (\n        <ActionCell\n          frame={props.frame}\n          onSandwich={onSandwich}\n          onSearch={onSearch}\n          search={search}\n          sandwichItem={sandwichItem}\n          rowIndex={props.rowIndex}\n        />\n      );\n    },\n  };\n\n  const actionFieldTableConfig: TableFieldOptions = {\n    filterable: false,\n    width: actionColumnWidth,\n    hideHeader: true,\n    inspect: false,\n    align: 'auto',\n    cellOptions: options,\n  };\n\n  return {\n    type: FieldType.number,\n    name: 'actions',\n    values: [],\n    config: {\n      custom: actionFieldTableConfig,\n    },\n  };\n}\n\ntype ActionCellProps = {\n  frame: DataFrame;\n  rowIndex: number;\n  search?: string;\n  sandwichItem?: string;\n  onSearch: (symbol: string) => void;\n  onSandwich: (symbol: string) => void;\n};\n\nfunction ActionCell(props: ActionCellProps) {\n  const styles = getStylesActionCell();\n  const symbol = props.frame.fields.find((f: Field) => f.name === 'Symbol')?.values[props.rowIndex];\n  const isSearched = props.search === symbol;\n  const isSandwiched = props.sandwichItem === symbol;\n\n  return (\n    <div className={styles.actionCellWrapper}>\n      <IconButton\n        className={styles.actionCellButton}\n        name={'search'}\n        variant={isSearched ? 'primary' : 'secondary'}\n        tooltip={isSearched ? 'Clear from search' : 'Search for symbol'}\n        aria-label={isSearched ? 'Clear from search' : 'Search for symbol'}\n        onClick={() => {\n          props.onSearch(isSearched ? '' : symbol);\n        }}\n      />\n      <IconButton\n        className={styles.actionCellButton}\n        name={'gf-show-context'}\n        tooltip={isSandwiched ? 'Remove from sandwich view' : 'Show in sandwich view'}\n        variant={isSandwiched ? 'primary' : 'secondary'}\n        aria-label={isSandwiched ? 'Remove from sandwich view' : 'Show in sandwich view'}\n        onClick={() => {\n          props.onSandwich(isSandwiched ? undefined : symbol);\n        }}\n      />\n    </div>\n  );\n}\n\nconst getStyles = (theme: GrafanaTheme2) => {\n  return {\n    topTableContainer: css({\n      label: 'topTableContainer',\n      padding: theme.spacing(1),\n      backgroundColor: theme.colors.background.secondary,\n      height: '100%',\n    }),\n  };\n};\n\nconst getStylesActionCell = () => {\n  return {\n    actionCellWrapper: css({\n      label: 'actionCellWrapper',\n      display: 'flex',\n      height: '24px',\n    }),\n    actionCellButton: css({\n      label: 'actionCellButton',\n      marginRight: 0,\n      width: '24px',\n    }),\n  };\n};\n\nexport default FlameGraphTopTableContainer;\n"],"names":[],"mappings":"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"}

package/dist/esm/{constants.js → constants.mjs}

@@ -12,4 +12,4 @@ const MIN_WIDTH_TO_SHOW_BOTH_TOPTABLE_AND_FLAMEGRAPH = 800;
 const TOP_TABLE_COLUMN_WIDTH = 120;
 
 export { BAR_BORDER_WIDTH, BAR_TEXT_PADDING_LEFT, GROUP_STRIP_MARGIN_LEFT, GROUP_STRIP_PADDING, GROUP_STRIP_WIDTH, GROUP_TEXT_OFFSET, HIDE_THRESHOLD, LABEL_THRESHOLD, MIN_WIDTH_TO_SHOW_BOTH_TOPTABLE_AND_FLAMEGRAPH, MUTE_THRESHOLD, PIXELS_PER_LEVEL, TOP_TABLE_COLUMN_WIDTH };
-//# sourceMappingURL=constants.js.map
+//# sourceMappingURL=constants.mjs.map

package/dist/esm/constants.mjs.map

@@ -0,0 +1 @@
+{"version":3,"file":"constants.mjs","sources":["../../src/constants.ts"],"sourcesContent":["export const PIXELS_PER_LEVEL = 22 * window.devicePixelRatio;\nexport const MUTE_THRESHOLD = 10 * window.devicePixelRatio;\nexport const HIDE_THRESHOLD = 0.5 * window.devicePixelRatio;\nexport const LABEL_THRESHOLD = 20 * window.devicePixelRatio;\nexport const BAR_BORDER_WIDTH = 0.5 * window.devicePixelRatio;\nexport const BAR_TEXT_PADDING_LEFT = 4 * window.devicePixelRatio;\nexport const GROUP_STRIP_WIDTH = 3 * window.devicePixelRatio;\nexport const GROUP_STRIP_PADDING = 3 * window.devicePixelRatio;\nexport const GROUP_STRIP_MARGIN_LEFT = 4 * window.devicePixelRatio;\nexport const GROUP_TEXT_OFFSET = 2 * window.devicePixelRatio;\nexport const MIN_WIDTH_TO_SHOW_BOTH_TOPTABLE_AND_FLAMEGRAPH = 800;\nexport const TOP_TABLE_COLUMN_WIDTH = 120;\n"],"names":[],"mappings":"AAAa,MAAA,gBAAA,GAAmB,KAAK,MAAO,CAAA;AAC/B,MAAA,cAAA,GAAiB,KAAK,MAAO,CAAA;AAC7B,MAAA,cAAA,GAAiB,MAAM,MAAO,CAAA;AAC9B,MAAA,eAAA,GAAkB,KAAK,MAAO,CAAA;AAC9B,MAAA,gBAAA,GAAmB,MAAM,MAAO,CAAA;AAChC,MAAA,qBAAA,GAAwB,IAAI,MAAO,CAAA;AACnC,MAAA,iBAAA,GAAoB,IAAI,MAAO,CAAA;AAC/B,MAAA,mBAAA,GAAsB,IAAI,MAAO,CAAA;AACjC,MAAA,uBAAA,GAA0B,IAAI,MAAO,CAAA;AACrC,MAAA,iBAAA,GAAoB,IAAI,MAAO,CAAA;AACrC,MAAM,8CAAiD,GAAA;AACvD,MAAM,sBAAyB,GAAA;;;;"}

package/dist/esm/index.d.mts

@@ -0,0 +1,111 @@
+import * as react_jsx_runtime from 'react/jsx-runtime';
+import * as React from 'react';
+import { FieldType, DataFrame, GrafanaTheme2, DataFrameDTO } from '@grafana/data';
+import { IconName } from '@grafana/ui';
+
+type LevelItem = {
+    start: number;
+    value: number;
+    valueRight?: number;
+    itemIndexes: number[];
+    children: LevelItem[];
+    level: number;
+    parents?: LevelItem[];
+};
+type CollapseConfig = {
+    items: LevelItem[];
+    collapsed: boolean;
+};
+declare function getMessageCheckFieldsResult(wrongFields: CheckFieldsResult): string;
+type CheckFieldsResult = {
+    wrongTypeFields: Array<{
+        name: string;
+        expectedTypes: FieldType[];
+        type: FieldType;
+    }>;
+    missingFields: string[];
+};
+declare function checkFields(data: DataFrame): CheckFieldsResult | undefined;
+
+type ClickedItemData = {
+    posX: number;
+    posY: number;
+    label: string;
+    item: LevelItem;
+};
+declare enum SelectedView {
+    TopTable = "topTable",
+    FlameGraph = "flameGraph",
+    Both = "both"
+}
+
+type GetExtraContextMenuButtonsFunction = (clickedItemData: ClickedItemData, data: DataFrame, state: {
+    selectedView: SelectedView;
+    isDiff: boolean;
+    search: string;
+    collapseConfig?: CollapseConfig;
+}) => ExtraContextMenuButton[];
+type ExtraContextMenuButton = {
+    label: string;
+    icon: IconName;
+    onClick: () => void;
+};
+
+type Props = {
+    /**
+     * DataFrame with the profile data. The dataFrame needs to have the following fields:
+     * label: string - the label of the node
+     * level: number - the nesting level of the node
+     * value: number - the total value of the node
+     * self: number - the self value of the node
+     * Optionally if it represents diff of 2 different profiles it can also have fields:
+     * valueRight: number - the total value of the node in the right profile
+     * selfRight: number - the self value of the node in the right profile
+     */
+    data?: DataFrame;
+    /**
+     * Whether the header should be sticky and be always visible on the top when scrolling.
+     */
+    stickyHeader?: boolean;
+    /**
+     * Provides a theme for the visualization on which colors and some sizes are based.
+     */
+    getTheme: () => GrafanaTheme2;
+    /**
+     * Various interaction hooks that can be used to report on the interaction.
+     */
+    onTableSymbolClick?: (symbol: string) => void;
+    onViewSelected?: (view: string) => void;
+    onTextAlignSelected?: (align: string) => void;
+    onTableSort?: (sort: string) => void;
+    /**
+     * Elements that will be shown in the header on the right side of the header buttons. Useful for additional
+     * functionality.
+     */
+    extraHeaderElements?: React.ReactNode;
+    /**
+     * Extra buttons that will be shown in the context menu when user clicks on a Node.
+     */
+    getExtraContextMenuButtons?: GetExtraContextMenuButtonsFunction;
+    /**
+     * If true the flamegraph will be rendered on top of the table.
+     */
+    vertical?: boolean;
+    /**
+     * If true only the flamegraph will be rendered.
+     */
+    showFlameGraphOnly?: boolean;
+    /**
+     * Disable behaviour where similar items in the same stack will be collapsed into single item.
+     */
+    disableCollapsing?: boolean;
+    /**
+     * Whether or not to keep any focused item when the profile data changes.
+     */
+    keepFocusOnDataChange?: boolean;
+};
+declare const FlameGraphContainer: ({ data, onTableSymbolClick, onViewSelected, onTextAlignSelected, onTableSort, getTheme, stickyHeader, extraHeaderElements, vertical, showFlameGraphOnly, disableCollapsing, keepFocusOnDataChange, getExtraContextMenuButtons, }: Props) => react_jsx_runtime.JSX.Element | null;
+
+declare const data: DataFrameDTO;
+
+export { FlameGraphContainer as FlameGraph, type Props, checkFields, data, getMessageCheckFieldsResult };

package/dist/esm/index.mjs

@@ -0,0 +1,4 @@
+export { default as FlameGraph } from './FlameGraphContainer.mjs';
+export { checkFields, getMessageCheckFieldsResult } from './FlameGraph/dataTransform.mjs';
+export { data } from './FlameGraph/testData/dataNestedSet.mjs';
+//# sourceMappingURL=index.mjs.map

package/dist/esm/index.mjs.map

@@ -0,0 +1 @@
+{"version":3,"file":"index.mjs","sources":[],"sourcesContent":[],"names":[],"mappings":";;"}

package/dist/esm/{types.js → types.mjs}

@@ -22,4 +22,4 @@ var ColorSchemeDiff = /* @__PURE__ */ ((ColorSchemeDiff2) => {
 })(ColorSchemeDiff || {});
 
 export { ColorScheme, ColorSchemeDiff, SampleUnit, SelectedView };
-//# sourceMappingURL=types.js.map
+//# sourceMappingURL=types.mjs.map

package/dist/esm/types.mjs.map

@@ -0,0 +1 @@
+{"version":3,"file":"types.mjs","sources":["../../src/types.ts"],"sourcesContent":["import { LevelItem } from './FlameGraph/dataTransform';\n\nexport { type FlameGraphDataContainer } from './FlameGraph/dataTransform';\n\nexport { type ExtraContextMenuButton } from './FlameGraph/FlameGraphContextMenu';\n\nexport type ClickedItemData = {\n  posX: number;\n  posY: number;\n  label: string;\n  item: LevelItem;\n};\n\nexport enum SampleUnit {\n  Bytes = 'bytes',\n  Short = 'short',\n  Nanoseconds = 'ns',\n}\n\nexport enum SelectedView {\n  TopTable = 'topTable',\n  FlameGraph = 'flameGraph',\n  Both = 'both',\n}\n\nexport interface TableData {\n  self: number;\n  total: number;\n  // For diff view\n  totalRight: number;\n}\n\nexport enum ColorScheme {\n  ValueBased = 'valueBased',\n  PackageBased = 'packageBased',\n}\n\nexport enum ColorSchemeDiff {\n  Default = 'default',\n  DiffColorBlind = 'diffColorBlind',\n}\n\nexport type TextAlign = 'left' | 'right';\n"],"names":["SampleUnit","SelectedView","ColorScheme","ColorSchemeDiff"],"mappings":"AAaY,IAAA,UAAA,qBAAAA,WAAL,KAAA;AACL,EAAAA,YAAA,OAAQ,CAAA,GAAA,OAAA;AACR,EAAAA,YAAA,OAAQ,CAAA,GAAA,OAAA;AACR,EAAAA,YAAA,aAAc,CAAA,GAAA,IAAA;AAHJ,EAAAA,OAAAA,WAAAA;AAAA,CAAA,EAAA,UAAA,IAAA,EAAA;AAMA,IAAA,YAAA,qBAAAC,aAAL,KAAA;AACL,EAAAA,cAAA,UAAW,CAAA,GAAA,UAAA;AACX,EAAAA,cAAA,YAAa,CAAA,GAAA,YAAA;AACb,EAAAA,cAAA,MAAO,CAAA,GAAA,MAAA;AAHG,EAAAA,OAAAA,aAAAA;AAAA,CAAA,EAAA,YAAA,IAAA,EAAA;AAaA,IAAA,WAAA,qBAAAC,YAAL,KAAA;AACL,EAAAA,aAAA,YAAa,CAAA,GAAA,YAAA;AACb,EAAAA,aAAA,cAAe,CAAA,GAAA,cAAA;AAFL,EAAAA,OAAAA,YAAAA;AAAA,CAAA,EAAA,WAAA,IAAA,EAAA;AAKA,IAAA,eAAA,qBAAAC,gBAAL,KAAA;AACL,EAAAA,iBAAA,SAAU,CAAA,GAAA,SAAA;AACV,EAAAA,iBAAA,gBAAiB,CAAA,GAAA,gBAAA;AAFP,EAAAA,OAAAA,gBAAAA;AAAA,CAAA,EAAA,eAAA,IAAA,EAAA;;;;"}

package/package.json

@@ -2,7 +2,7 @@
   "author": "Grafana Labs",
   "license": "Apache-2.0",
   "name": "@grafana/flamegraph",
-  "version": "11.6.0-227801",
+  "version": "11.6.0-228039",
   "description": "Grafana flamegraph visualization component",
   "keywords": [
     "grafana",
@@ -16,12 +16,12 @@
     "url": "http://github.com/grafana/grafana.git",
     "directory": "packages/grafana-flamegraph"
   },
-  "main": "dist/index.js",
-  "types": "dist/index.d.ts",
+  "main": "./dist/cjs/index.cjs",
+  "types": "./dist/cjs/index.d.cts",
   "publishConfig": {
-    "main": "dist/index.js",
-    "module": "dist/esm/index.js",
-    "types": "dist/index.d.ts",
+    "main": "./dist/cjs/index.cjs",
+    "module": "./dist/esm/index.mjs",
+    "types": "./dist/cjs/index.d.cts",
     "access": "public"
   },
   "files": [
@@ -35,7 +35,7 @@
     "bundle": "rollup -c rollup.config.ts --configPlugin esbuild",
     "clean": "rimraf ./dist ./compiled ./package.tgz",
     "typecheck": "tsc --emitDeclarationOnly false --noEmit",
-    "prepack": "cp package.json package.json.bak && node ../../scripts/prepare-packagejson.js",
+    "prepack": "cp package.json package.json.bak && node ../../scripts/prepare-npm-package.js",
     "postpack": "mv package.json.bak package.json"
   },
   "browserslist": [
@@ -44,12 +44,12 @@
   ],
   "dependencies": {
     "@emotion/css": "11.13.5",
-    "@grafana/data": "11.6.0-227801",
-    "@grafana/ui": "11.6.0-227801",
+    "@grafana/data": "11.6.0-228039",
+    "@grafana/ui": "11.6.0-228039",
     "@leeoniya/ufuzzy": "1.0.18",
     "d3": "^7.8.5",
     "lodash": "4.17.21",
-    "react": "18.3.1",
+    "react": "^18.0.0",
     "react-use": "17.6.0",
     "react-virtualized-auto-sizer": "1.0.25",
     "tinycolor2": "1.6.0",
@@ -88,5 +88,18 @@
     "react": "^18.0.0",
     "react-dom": "^18.0.0"
   },
-  "module": "dist/esm/index.js"
+  "module": "./dist/esm/index.mjs",
+  "exports": {
+    "./package.json": "./package.json",
+    ".": {
+      "import": {
+        "types": "./dist/esm/index.d.mts",
+        "default": "./dist/esm/index.mjs"
+      },
+      "require": {
+        "types": "./dist/cjs/index.d.cts",
+        "default": "./dist/cjs/index.cjs"
+      }
+    }
+  }
 }

package/dist/esm/FlameGraph/FlameGraph.js.map

@@ -1 +0,0 @@
-{"version":3,"file":"FlameGraph.js","sources":["../../../src/FlameGraph/FlameGraph.tsx"],"sourcesContent":["// This component is based on logic from the flamebearer project\n// https://github.com/mapbox/flamebearer\n\n// ISC License\n\n// Copyright (c) 2018, Mapbox\n\n// Permission to use, copy, modify, and/or distribute this software for any purpose\n// with or without fee is hereby granted, provided that the above copyright notice\n// and this permission notice appear in all copies.\n\n// THE SOFTWARE IS PROVIDED \"AS IS\" AND THE AUTHOR DISCLAIMS ALL WARRANTIES WITH\n// REGARD TO THIS SOFTWARE INCLUDING ALL IMPLIED WARRANTIES OF MERCHANTABILITY AND\n// FITNESS. IN NO EVENT SHALL THE AUTHOR BE LIABLE FOR ANY SPECIAL, DIRECT,\n// INDIRECT, OR CONSEQUENTIAL DAMAGES OR ANY DAMAGES WHATSOEVER RESULTING FROM LOSS\n// OF USE, DATA OR PROFITS, WHETHER IN AN ACTION OF CONTRACT, NEGLIGENCE OR OTHER\n// TORTIOUS ACTION, ARISING OUT OF OR IN CONNECTION WITH THE USE OR PERFORMANCE OF\n// THIS SOFTWARE.\nimport { css, cx } from '@emotion/css';\nimport { useEffect, useState } from 'react';\nimport * as React from 'react';\n\nimport { Icon } from '@grafana/ui';\n\nimport { PIXELS_PER_LEVEL } from '../constants';\nimport { ClickedItemData, ColorScheme, ColorSchemeDiff, SelectedView, TextAlign } from '../types';\n\nimport FlameGraphCanvas from './FlameGraphCanvas';\nimport { GetExtraContextMenuButtonsFunction } from './FlameGraphContextMenu';\nimport FlameGraphMetadata from './FlameGraphMetadata';\nimport { CollapsedMap, FlameGraphDataContainer, LevelItem } from './dataTransform';\n\ntype Props = {\n  data: FlameGraphDataContainer;\n  rangeMin: number;\n  rangeMax: number;\n  matchedLabels?: Set<string>;\n  setRangeMin: (range: number) => void;\n  setRangeMax: (range: number) => void;\n  style?: React.CSSProperties;\n  onItemFocused: (data: ClickedItemData) => void;\n  focusedItemData?: ClickedItemData;\n  textAlign: TextAlign;\n  sandwichItem?: string;\n  onSandwich: (label: string) => void;\n  onFocusPillClick: () => void;\n  onSandwichPillClick: () => void;\n  colorScheme: ColorScheme | ColorSchemeDiff;\n  showFlameGraphOnly?: boolean;\n  getExtraContextMenuButtons?: GetExtraContextMenuButtonsFunction;\n  collapsing?: boolean;\n  selectedView: SelectedView;\n  search: string;\n  collapsedMap: CollapsedMap;\n  setCollapsedMap: (collapsedMap: CollapsedMap) => void;\n};\n\nconst FlameGraph = ({\n  data,\n  rangeMin,\n  rangeMax,\n  matchedLabels,\n  setRangeMin,\n  setRangeMax,\n  onItemFocused,\n  focusedItemData,\n  textAlign,\n  onSandwich,\n  sandwichItem,\n  onFocusPillClick,\n  onSandwichPillClick,\n  colorScheme,\n  showFlameGraphOnly,\n  getExtraContextMenuButtons,\n  collapsing,\n  selectedView,\n  search,\n  collapsedMap,\n  setCollapsedMap,\n}: Props) => {\n  const styles = getStyles();\n\n  const [levels, setLevels] = useState<LevelItem[][]>();\n  const [levelsCallers, setLevelsCallers] = useState<LevelItem[][]>();\n  const [totalProfileTicks, setTotalProfileTicks] = useState<number>(0);\n  const [totalProfileTicksRight, setTotalProfileTicksRight] = useState<number>();\n  const [totalViewTicks, setTotalViewTicks] = useState<number>(0);\n\n  useEffect(() => {\n    if (data) {\n      let levels = data.getLevels();\n      let totalProfileTicks = levels.length ? levels[0][0].value : 0;\n      let totalProfileTicksRight = levels.length ? levels[0][0].valueRight : undefined;\n      let totalViewTicks = totalProfileTicks;\n      let levelsCallers = undefined;\n\n      if (sandwichItem) {\n        const [callers, callees] = data.getSandwichLevels(sandwichItem);\n        levels = callees;\n        levelsCallers = callers;\n        // We need this separate as in case of diff profile we want to compute diff colors based on the original ticks.\n        totalViewTicks = callees[0]?.[0]?.value ?? 0;\n      }\n      setLevels(levels);\n      setLevelsCallers(levelsCallers);\n      setTotalProfileTicks(totalProfileTicks);\n      setTotalProfileTicksRight(totalProfileTicksRight);\n      setTotalViewTicks(totalViewTicks);\n    }\n  }, [data, sandwichItem]);\n\n  if (!levels) {\n    return null;\n  }\n\n  const commonCanvasProps = {\n    data,\n    rangeMin,\n    rangeMax,\n    matchedLabels,\n    setRangeMin,\n    setRangeMax,\n    onItemFocused,\n    focusedItemData,\n    textAlign,\n    onSandwich,\n    colorScheme,\n    totalProfileTicks,\n    totalProfileTicksRight,\n    totalViewTicks,\n    showFlameGraphOnly,\n    collapsedMap,\n    setCollapsedMap,\n    getExtraContextMenuButtons,\n    collapsing,\n    search,\n    selectedView,\n  };\n  let canvas = null;\n\n  if (levelsCallers?.length) {\n    canvas = (\n      <>\n        <div className={styles.sandwichCanvasWrapper}>\n          <div className={styles.sandwichMarker}>\n            Callers\n            <Icon className={styles.sandwichMarkerIcon} name={'arrow-down'} />\n          </div>\n          <FlameGraphCanvas\n            {...commonCanvasProps}\n            root={levelsCallers[levelsCallers.length - 1][0]}\n            depth={levelsCallers.length}\n            direction={'parents'}\n            // We do not support collapsing in sandwich view for now.\n            collapsing={false}\n          />\n        </div>\n\n        <div className={styles.sandwichCanvasWrapper}>\n          <div className={cx(styles.sandwichMarker, styles.sandwichMarkerCalees)}>\n            <Icon className={styles.sandwichMarkerIcon} name={'arrow-up'} />\n            Callees\n          </div>\n          <FlameGraphCanvas\n            {...commonCanvasProps}\n            root={levels[0][0]}\n            depth={levels.length}\n            direction={'children'}\n            collapsing={false}\n          />\n        </div>\n      </>\n    );\n  } else if (levels?.length) {\n    canvas = (\n      <FlameGraphCanvas {...commonCanvasProps} root={levels[0][0]} depth={levels.length} direction={'children'} />\n    );\n  }\n\n  return (\n    <div className={styles.graph}>\n      <FlameGraphMetadata\n        data={data}\n        focusedItem={focusedItemData}\n        sandwichedLabel={sandwichItem}\n        totalTicks={totalViewTicks}\n        onFocusPillClick={onFocusPillClick}\n        onSandwichPillClick={onSandwichPillClick}\n      />\n      {canvas}\n    </div>\n  );\n};\n\nconst getStyles = () => ({\n  graph: css({\n    label: 'graph',\n    overflow: 'auto',\n    flexGrow: 1,\n    flexBasis: '50%',\n  }),\n  sandwichCanvasWrapper: css({\n    label: 'sandwichCanvasWrapper',\n    display: 'flex',\n    marginBottom: `${PIXELS_PER_LEVEL / window.devicePixelRatio}px`,\n  }),\n  sandwichMarker: css({\n    label: 'sandwichMarker',\n    writingMode: 'vertical-lr',\n    transform: 'rotate(180deg)',\n    overflow: 'hidden',\n    whiteSpace: 'nowrap',\n  }),\n  sandwichMarkerCalees: css({\n    label: 'sandwichMarkerCalees',\n    textAlign: 'right',\n  }),\n  sandwichMarkerIcon: css({\n    label: 'sandwichMarkerIcon',\n    verticalAlign: 'baseline',\n  }),\n});\n\nexport default FlameGraph;\n"],"names":["levels","totalProfileTicks","totalProfileTicksRight","totalViewTicks","levelsCallers"],"mappings":"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"}

package/dist/esm/FlameGraph/FlameGraphCanvas.js.map

@@ -1 +0,0 @@
-{"version":3,"file":"FlameGraphCanvas.js","sources":["../../../src/FlameGraph/FlameGraphCanvas.tsx"],"sourcesContent":["import { css } from '@emotion/css';\nimport { MouseEvent as ReactMouseEvent, useCallback, useEffect, useRef, useState } from 'react';\nimport * as React from 'react';\nimport { useMeasure } from 'react-use';\n\nimport { PIXELS_PER_LEVEL } from '../constants';\nimport { ClickedItemData, ColorScheme, ColorSchemeDiff, SelectedView, TextAlign } from '../types';\n\nimport FlameGraphContextMenu, { GetExtraContextMenuButtonsFunction } from './FlameGraphContextMenu';\nimport FlameGraphTooltip from './FlameGraphTooltip';\nimport { CollapsedMap, FlameGraphDataContainer, LevelItem } from './dataTransform';\nimport { getBarX, useFlameRender } from './rendering';\n\ntype Props = {\n  data: FlameGraphDataContainer;\n  rangeMin: number;\n  rangeMax: number;\n  matchedLabels: Set<string> | undefined;\n  setRangeMin: (range: number) => void;\n  setRangeMax: (range: number) => void;\n  style?: React.CSSProperties;\n  onItemFocused: (data: ClickedItemData) => void;\n  focusedItemData?: ClickedItemData;\n  textAlign: TextAlign;\n  onSandwich: (label: string) => void;\n  colorScheme: ColorScheme | ColorSchemeDiff;\n\n  root: LevelItem;\n  direction: 'children' | 'parents';\n  // Depth in number of levels\n  depth: number;\n\n  totalProfileTicks: number;\n  totalProfileTicksRight?: number;\n  totalViewTicks: number;\n  showFlameGraphOnly?: boolean;\n\n  collapsedMap: CollapsedMap;\n  setCollapsedMap: (collapsedMap: CollapsedMap) => void;\n  collapsing?: boolean;\n  getExtraContextMenuButtons?: GetExtraContextMenuButtonsFunction;\n\n  selectedView: SelectedView;\n  search: string;\n};\n\nconst FlameGraphCanvas = ({\n  data,\n  rangeMin,\n  rangeMax,\n  matchedLabels,\n  setRangeMin,\n  setRangeMax,\n  onItemFocused,\n  focusedItemData,\n  textAlign,\n  onSandwich,\n  colorScheme,\n  totalProfileTicks,\n  totalProfileTicksRight,\n  totalViewTicks,\n  root,\n  direction,\n  depth,\n  showFlameGraphOnly,\n  collapsedMap,\n  setCollapsedMap,\n  collapsing,\n  getExtraContextMenuButtons,\n  selectedView,\n  search,\n}: Props) => {\n  const styles = getStyles();\n\n  const [sizeRef, { width: wrapperWidth }] = useMeasure<HTMLDivElement>();\n  const graphRef = useRef<HTMLCanvasElement>(null);\n  const [tooltipItem, setTooltipItem] = useState<LevelItem>();\n\n  const [clickedItemData, setClickedItemData] = useState<ClickedItemData>();\n\n  useFlameRender({\n    canvasRef: graphRef,\n    colorScheme,\n    data,\n    focusedItemData,\n    root,\n    direction,\n    depth,\n    rangeMax,\n    rangeMin,\n    matchedLabels,\n    textAlign,\n    totalViewTicks,\n    // We need this so that if we have a diff profile and are in sandwich view we still show the same diff colors.\n    totalColorTicks: data.isDiffFlamegraph() ? totalProfileTicks : totalViewTicks,\n    totalTicksRight: totalProfileTicksRight,\n    wrapperWidth,\n    collapsedMap,\n  });\n\n  const onGraphClick = useCallback(\n    (e: ReactMouseEvent<HTMLCanvasElement>) => {\n      setTooltipItem(undefined);\n      const pixelsPerTick = graphRef.current!.clientWidth / totalViewTicks / (rangeMax - rangeMin);\n      const item = convertPixelCoordinatesToBarCoordinates(\n        { x: e.nativeEvent.offsetX, y: e.nativeEvent.offsetY },\n        root,\n        direction,\n        depth,\n        pixelsPerTick,\n        totalViewTicks,\n        rangeMin,\n        collapsedMap\n      );\n\n      // if clicking on a block in the canvas\n      if (item) {\n        setClickedItemData({\n          posY: e.clientY,\n          posX: e.clientX,\n          item,\n          label: data.getLabel(item.itemIndexes[0]),\n        });\n      } else {\n        // if clicking on the canvas but there is no block beneath the cursor\n        setClickedItemData(undefined);\n      }\n    },\n    [data, rangeMin, rangeMax, totalViewTicks, root, direction, depth, collapsedMap]\n  );\n\n  const [mousePosition, setMousePosition] = useState<{ x: number; y: number }>();\n  const onGraphMouseMove = useCallback(\n    (e: ReactMouseEvent<HTMLCanvasElement>) => {\n      if (clickedItemData === undefined) {\n        setTooltipItem(undefined);\n        setMousePosition(undefined);\n        const pixelsPerTick = graphRef.current!.clientWidth / totalViewTicks / (rangeMax - rangeMin);\n        const item = convertPixelCoordinatesToBarCoordinates(\n          { x: e.nativeEvent.offsetX, y: e.nativeEvent.offsetY },\n          root,\n          direction,\n          depth,\n          pixelsPerTick,\n          totalViewTicks,\n          rangeMin,\n          collapsedMap\n        );\n\n        if (item) {\n          setMousePosition({ x: e.clientX, y: e.clientY });\n          setTooltipItem(item);\n        }\n      }\n    },\n    [rangeMin, rangeMax, totalViewTicks, clickedItemData, setMousePosition, root, direction, depth, collapsedMap]\n  );\n\n  const onGraphMouseLeave = useCallback(() => {\n    setTooltipItem(undefined);\n  }, []);\n\n  // hide context menu if outside the flame graph canvas is clicked\n  useEffect(() => {\n    const handleOnClick = (e: MouseEvent) => {\n      if (\n        e.target instanceof HTMLElement &&\n        e.target.parentElement?.id !== 'flameGraphCanvasContainer_clickOutsideCheck'\n      ) {\n        setClickedItemData(undefined);\n      }\n    };\n    window.addEventListener('click', handleOnClick);\n    return () => window.removeEventListener('click', handleOnClick);\n  }, [setClickedItemData]);\n\n  return (\n    <div className={styles.graph}>\n      <div className={styles.canvasWrapper} id=\"flameGraphCanvasContainer_clickOutsideCheck\" ref={sizeRef}>\n        <canvas\n          ref={graphRef}\n          data-testid=\"flameGraph\"\n          onClick={onGraphClick}\n          onMouseMove={onGraphMouseMove}\n          onMouseLeave={onGraphMouseLeave}\n        />\n      </div>\n      <FlameGraphTooltip\n        position={mousePosition}\n        item={tooltipItem}\n        data={data}\n        totalTicks={totalViewTicks}\n        collapseConfig={tooltipItem ? collapsedMap.get(tooltipItem) : undefined}\n      />\n      {!showFlameGraphOnly && clickedItemData && (\n        <FlameGraphContextMenu\n          data={data}\n          itemData={clickedItemData}\n          collapsing={collapsing}\n          collapseConfig={collapsedMap.get(clickedItemData.item)}\n          onMenuItemClick={() => {\n            setClickedItemData(undefined);\n          }}\n          onItemFocus={() => {\n            setRangeMin(clickedItemData.item.start / totalViewTicks);\n            setRangeMax((clickedItemData.item.start + clickedItemData.item.value) / totalViewTicks);\n            onItemFocused(clickedItemData);\n          }}\n          onSandwich={() => {\n            onSandwich(data.getLabel(clickedItemData.item.itemIndexes[0]));\n          }}\n          onExpandGroup={() => {\n            setCollapsedMap(collapsedMap.setCollapsedStatus(clickedItemData.item, false));\n          }}\n          onCollapseGroup={() => {\n            setCollapsedMap(collapsedMap.setCollapsedStatus(clickedItemData.item, true));\n          }}\n          onExpandAllGroups={() => {\n            setCollapsedMap(collapsedMap.setAllCollapsedStatus(false));\n          }}\n          onCollapseAllGroups={() => {\n            setCollapsedMap(collapsedMap.setAllCollapsedStatus(true));\n          }}\n          allGroupsCollapsed={Array.from(collapsedMap.values()).every((i) => i.collapsed)}\n          allGroupsExpanded={Array.from(collapsedMap.values()).every((i) => !i.collapsed)}\n          getExtraContextMenuButtons={getExtraContextMenuButtons}\n          selectedView={selectedView}\n          search={search}\n        />\n      )}\n    </div>\n  );\n};\n\nconst getStyles = () => ({\n  graph: css({\n    label: 'graph',\n    overflow: 'auto',\n    flexGrow: 1,\n    flexBasis: '50%',\n  }),\n  canvasContainer: css({\n    label: 'canvasContainer',\n    display: 'flex',\n  }),\n  canvasWrapper: css({\n    label: 'canvasWrapper',\n    cursor: 'pointer',\n    flex: 1,\n    overflow: 'hidden',\n  }),\n  sandwichMarker: css({\n    label: 'sandwichMarker',\n    writingMode: 'vertical-lr',\n    transform: 'rotate(180deg)',\n    overflow: 'hidden',\n    whiteSpace: 'nowrap',\n  }),\n  sandwichMarkerIcon: css({\n    label: 'sandwichMarkerIcon',\n    verticalAlign: 'baseline',\n  }),\n});\n\nexport const convertPixelCoordinatesToBarCoordinates = (\n  // position relative to the start of the graph\n  pos: { x: number; y: number },\n  root: LevelItem,\n  direction: 'children' | 'parents',\n  depth: number,\n  pixelsPerTick: number,\n  totalTicks: number,\n  rangeMin: number,\n  collapsedMap: CollapsedMap\n): LevelItem | undefined => {\n  let next: LevelItem | undefined = root;\n  let currentLevel = direction === 'children' ? 0 : depth - 1;\n  const levelIndex = Math.floor(pos.y / (PIXELS_PER_LEVEL / window.devicePixelRatio));\n  let found = undefined;\n\n  while (next) {\n    const node: LevelItem = next;\n    next = undefined;\n    if (currentLevel === levelIndex) {\n      found = node;\n      break;\n    }\n\n    const nextList = direction === 'children' ? node.children : node.parents || [];\n\n    for (const child of nextList) {\n      const xStart = getBarX(child.start, totalTicks, rangeMin, pixelsPerTick);\n      const xEnd = getBarX(child.start + child.value, totalTicks, rangeMin, pixelsPerTick);\n      if (xStart <= pos.x && pos.x < xEnd) {\n        next = child;\n        // Check if item is a collapsed item. if so also check if the item is the first collapsed item in the chain,\n        // which we render, or a child which we don't render. If it's a child in the chain then don't increase the\n        // level end effectively skip it.\n        const collapsedConfig = collapsedMap.get(child);\n        if (!collapsedConfig || !collapsedConfig.collapsed || collapsedConfig.items[0] === child) {\n          currentLevel = currentLevel + (direction === 'children' ? 1 : -1);\n        }\n        break;\n      }\n    }\n  }\n\n  return found;\n};\n\nexport default FlameGraphCanvas;\n"],"names":[],"mappings":"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"}

package/dist/esm/FlameGraph/FlameGraphContextMenu.js.map

@@ -1 +0,0 @@
-{"version":3,"file":"FlameGraphContextMenu.js","sources":["../../../src/FlameGraph/FlameGraphContextMenu.tsx"],"sourcesContent":["import { DataFrame } from '@grafana/data';\nimport { MenuItem, MenuGroup, ContextMenu, IconName } from '@grafana/ui';\n\nimport { ClickedItemData, SelectedView } from '../types';\n\nimport { CollapseConfig, FlameGraphDataContainer } from './dataTransform';\n\nexport type GetExtraContextMenuButtonsFunction = (\n  clickedItemData: ClickedItemData,\n  data: DataFrame,\n  state: { selectedView: SelectedView; isDiff: boolean; search: string; collapseConfig?: CollapseConfig }\n) => ExtraContextMenuButton[];\n\nexport type ExtraContextMenuButton = {\n  label: string;\n  icon: IconName;\n  onClick: () => void;\n};\n\ntype Props = {\n  data: FlameGraphDataContainer;\n  itemData: ClickedItemData;\n  onMenuItemClick: () => void;\n  onItemFocus: () => void;\n  onSandwich: () => void;\n  onExpandGroup: () => void;\n  onCollapseGroup: () => void;\n  onExpandAllGroups: () => void;\n  onCollapseAllGroups: () => void;\n  getExtraContextMenuButtons?: GetExtraContextMenuButtonsFunction;\n  collapseConfig?: CollapseConfig;\n  collapsing?: boolean;\n  allGroupsCollapsed?: boolean;\n  allGroupsExpanded?: boolean;\n  selectedView: SelectedView;\n  search: string;\n};\n\nconst FlameGraphContextMenu = ({\n  data,\n  itemData,\n  onMenuItemClick,\n  onItemFocus,\n  onSandwich,\n  collapseConfig,\n  onExpandGroup,\n  onCollapseGroup,\n  onExpandAllGroups,\n  onCollapseAllGroups,\n  getExtraContextMenuButtons,\n  collapsing,\n  allGroupsExpanded,\n  allGroupsCollapsed,\n  selectedView,\n  search,\n}: Props) => {\n  function renderItems() {\n    const extraButtons =\n      getExtraContextMenuButtons?.(itemData, data.data, {\n        selectedView,\n        isDiff: data.isDiffFlamegraph(),\n        search,\n        collapseConfig,\n      }) || [];\n    return (\n      <>\n        <MenuItem\n          label=\"Focus block\"\n          icon={'eye'}\n          onClick={() => {\n            onItemFocus();\n            onMenuItemClick();\n          }}\n        />\n        <MenuItem\n          label=\"Copy function name\"\n          icon={'copy'}\n          onClick={() => {\n            navigator.clipboard.writeText(itemData.label).then(() => {\n              onMenuItemClick();\n            });\n          }}\n        />\n        <MenuItem\n          label=\"Sandwich view\"\n          icon={'gf-show-context'}\n          onClick={() => {\n            onSandwich();\n            onMenuItemClick();\n          }}\n        />\n        {extraButtons.map(({ label, icon, onClick }) => {\n          return <MenuItem label={label} icon={icon} onClick={() => onClick()} key={label} />;\n        })}\n        {collapsing && (\n          <MenuGroup label={'Grouping'}>\n            {collapseConfig ? (\n              collapseConfig.collapsed ? (\n                <MenuItem\n                  label=\"Expand group\"\n                  icon={'angle-double-down'}\n                  onClick={() => {\n                    onExpandGroup();\n                    onMenuItemClick();\n                  }}\n                />\n              ) : (\n                <MenuItem\n                  label=\"Collapse group\"\n                  icon={'angle-double-up'}\n                  onClick={() => {\n                    onCollapseGroup();\n                    onMenuItemClick();\n                  }}\n                />\n              )\n            ) : null}\n            {!allGroupsExpanded && (\n              <MenuItem\n                label=\"Expand all groups\"\n                icon={'angle-double-down'}\n                onClick={() => {\n                  onExpandAllGroups();\n                  onMenuItemClick();\n                }}\n              />\n            )}\n            {!allGroupsCollapsed && (\n              <MenuItem\n                label=\"Collapse all groups\"\n                icon={'angle-double-up'}\n                onClick={() => {\n                  onCollapseAllGroups();\n                  onMenuItemClick();\n                }}\n              />\n            )}\n          </MenuGroup>\n        )}\n      </>\n    );\n  }\n\n  return (\n    <div data-testid=\"contextMenu\">\n      <ContextMenu\n        renderMenuItems={renderItems}\n        x={itemData.posX + 10}\n        y={itemData.posY}\n        focusOnOpen={false}\n      ></ContextMenu>\n    </div>\n  );\n};\n\nexport default FlameGraphContextMenu;\n"],"names":[],"mappings":"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"}

package/dist/esm/FlameGraph/FlameGraphMetadata.js.map

@@ -1 +0,0 @@
-{"version":3,"file":"FlameGraphMetadata.js","sources":["../../../src/FlameGraph/FlameGraphMetadata.tsx"],"sourcesContent":["import { css } from '@emotion/css';\nimport { memo, ReactNode } from 'react';\n\nimport { getValueFormat, GrafanaTheme2 } from '@grafana/data';\nimport { Icon, IconButton, Tooltip, useStyles2 } from '@grafana/ui';\n\nimport { ClickedItemData } from '../types';\n\nimport { 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":[],"mappings":"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"}