@grafana/flamegraph 11.5.0-218248 → 11.5.0-218249

This diff represents the content of publicly available package versions that have been released to one of the supported registries. The information contained in this diff is provided for informational purposes only and reflects changes between package versions as they appear in their respective public registries.
Files changed (11) hide show
  1. package/README.md +12 -11
  2. package/dist/esm/FlameGraph/FlameGraph.js +38 -33
  3. package/dist/esm/FlameGraph/FlameGraph.js.map +1 -1
  4. package/dist/esm/FlameGraph/FlameGraphMetadata.js +13 -10
  5. package/dist/esm/FlameGraph/FlameGraphMetadata.js.map +1 -1
  6. package/dist/esm/FlameGraphContainer.js +33 -5
  7. package/dist/esm/FlameGraphContainer.js.map +1 -1
  8. package/dist/index.d.ts +5 -1
  9. package/dist/index.js +83 -47
  10. package/dist/index.js.map +1 -1
  11. package/package.json +3 -3
package/README.md CHANGED
@@ -26,17 +26,18 @@ import { Flamegraph } from '@grafana/flamegraph';
26
26
 
27
27
  #### Props
28
28
 
29
- | Name | Type | Description |
30
- | ------------------- | ------------------------ | --------------------------------------------------------------------------------------------------------------------------- |
31
- | data | DataFrame | DataFrame with the profile data. Optional, if missing or empty the flamegraph is not rendered |
32
- | stickyHeader | boolean | Whether the header should be sticky and be always visible on the top when scrolling. |
33
- | getTheme | () => GrafanaTheme2 | Provides a theme for the visualization on which colors and some sizes are based. |
34
- | onTableSymbolClick | (symbol: string) => void | Interaction hook that can be used to report on the interaction. Fires when user click on a name in the table. |
35
- | onViewSelected | (view: string) => void | Interaction hook that can be used to report on the interaction. Fires when user changes the view to show (table/graph/both) |
36
- | onTextAlignSelected | (align: string) => void | Interaction hook that can be used to report on the interaction. Fires when user changes the text align. |
37
- | onTableSort | (sort: string) => void | Interaction hook that can be used to report on the interaction. Fires when user changes the teble sorting. |
38
- | extraHeaderElements | React.ReactNode | Elements that will be shown in the header on the right side of the header buttons. Useful for additional functionality. |
39
- | vertical | boolean | If true the flamegraph will be rendered on top of the table. |
29
+ | Name | Type | Description |
30
+ | --------------------- | ------------------------ | --------------------------------------------------------------------------------------------------------------------------- |
31
+ | data | DataFrame | DataFrame with the profile data. Optional, if missing or empty the flamegraph is not rendered |
32
+ | stickyHeader | boolean | Whether the header should be sticky and be always visible on the top when scrolling. |
33
+ | getTheme | () => GrafanaTheme2 | Provides a theme for the visualization on which colors and some sizes are based. |
34
+ | onTableSymbolClick | (symbol: string) => void | Interaction hook that can be used to report on the interaction. Fires when user click on a name in the table. |
35
+ | onViewSelected | (view: string) => void | Interaction hook that can be used to report on the interaction. Fires when user changes the view to show (table/graph/both) |
36
+ | onTextAlignSelected | (align: string) => void | Interaction hook that can be used to report on the interaction. Fires when user changes the text align. |
37
+ | onTableSort | (sort: string) => void | Interaction hook that can be used to report on the interaction. Fires when user changes the teble sorting. |
38
+ | extraHeaderElements | React.ReactNode | Elements that will be shown in the header on the right side of the header buttons. Useful for additional functionality. |
39
+ | vertical | boolean | If true the flamegraph will be rendered on top of the table. |
40
+ | keepFocusOnDataChange | boolean | If true any focused block will stay focused when the profile data changes. Same for the sandwich view. |
40
41
 
41
42
  ##### DataFrame schema
42
43
 
package/dist/esm/FlameGraph/FlameGraph.js CHANGED
@@ -82,40 +82,45 @@ const FlameGraph = ({
82
82
  search,
83
83
  selectedView
84
84
  };
85
- const canvas = levelsCallers ? /* @__PURE__ */ jsxs(Fragment, { children: [
86
- /* @__PURE__ */ jsxs("div", { className: styles.sandwichCanvasWrapper, children: [
87
- /* @__PURE__ */ jsxs("div", { className: styles.sandwichMarker, children: [
88
- "Callers",
89
- /* @__PURE__ */ jsx(Icon, { className: styles.sandwichMarkerIcon, name: "arrow-down" })
85
+ let canvas = null;
86
+ if (levelsCallers == null ? void 0 : levelsCallers.length) {
87
+ canvas = /* @__PURE__ */ jsxs(Fragment, { children: [
88
+ /* @__PURE__ */ jsxs("div", { className: styles.sandwichCanvasWrapper, children: [
89
+ /* @__PURE__ */ jsxs("div", { className: styles.sandwichMarker, children: [
90
+ "Callers",
91
+ /* @__PURE__ */ jsx(Icon, { className: styles.sandwichMarkerIcon, name: "arrow-down" })
92
+ ] }),
93
+ /* @__PURE__ */ jsx(
94
+ FlameGraphCanvas,
95
+ {
96
+ ...commonCanvasProps,
97
+ root: levelsCallers[levelsCallers.length - 1][0],
98
+ depth: levelsCallers.length,
99
+ direction: "parents",
100
+ collapsing: false
101
+ }
102
+ )
90
103
  ] }),
91
- /* @__PURE__ */ jsx(
92
- FlameGraphCanvas,
93
- {
94
- ...commonCanvasProps,
95
- root: levelsCallers[levelsCallers.length - 1][0],
96
- depth: levelsCallers.length,
97
- direction: "parents",
98
- collapsing: false
99
- }
100
- )
101
- ] }),
102
- /* @__PURE__ */ jsxs("div", { className: styles.sandwichCanvasWrapper, children: [
103
- /* @__PURE__ */ jsxs("div", { className: cx(styles.sandwichMarker, styles.sandwichMarkerCalees), children: [
104
- /* @__PURE__ */ jsx(Icon, { className: styles.sandwichMarkerIcon, name: "arrow-up" }),
105
- "Callees"
106
- ] }),
107
- /* @__PURE__ */ jsx(
108
- FlameGraphCanvas,
109
- {
110
- ...commonCanvasProps,
111
- root: levels[0][0],
112
- depth: levels.length,
113
- direction: "children",
114
- collapsing: false
115
- }
116
- )
117
- ] })
118
- ] }) : /* @__PURE__ */ jsx(FlameGraphCanvas, { ...commonCanvasProps, root: levels[0][0], depth: levels.length, direction: "children" });
104
+ /* @__PURE__ */ jsxs("div", { className: styles.sandwichCanvasWrapper, children: [
105
+ /* @__PURE__ */ jsxs("div", { className: cx(styles.sandwichMarker, styles.sandwichMarkerCalees), children: [
106
+ /* @__PURE__ */ jsx(Icon, { className: styles.sandwichMarkerIcon, name: "arrow-up" }),
107
+ "Callees"
108
+ ] }),
109
+ /* @__PURE__ */ jsx(
110
+ FlameGraphCanvas,
111
+ {
112
+ ...commonCanvasProps,
113
+ root: levels[0][0],
114
+ depth: levels.length,
115
+ direction: "children",
116
+ collapsing: false
117
+ }
118
+ )
119
+ ] })
120
+ ] });
121
+ } else if (levels == null ? void 0 : levels.length) {
122
+ canvas = /* @__PURE__ */ jsx(FlameGraphCanvas, { ...commonCanvasProps, root: levels[0][0], depth: levels.length, direction: "children" });
123
+ }
119
124
  return /* @__PURE__ */ jsxs("div", { className: styles.graph, children: [
120
125
  /* @__PURE__ */ jsx(
121
126
  FlameGraphMetadata,
package/dist/esm/FlameGraph/FlameGraph.js.map CHANGED
@@ -1 +1 @@
1
- {"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 const canvas = levelsCallers ? (\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 <FlameGraphCanvas {...commonCanvasProps} root={levels[0][0]} depth={levels.length} direction={'children'} />\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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"}
1
+ {"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":";;;;;;;;AAyDA,MAAM,aAAa,CAAC;AAAA,EAClB,IAAA;AAAA,EACA,QAAA;AAAA,EACA,QAAA;AAAA,EACA,aAAA;AAAA,EACA,WAAA;AAAA,EACA,WAAA;AAAA,EACA,aAAA;AAAA,EACA,eAAA;AAAA,EACA,SAAA;AAAA,EACA,UAAA;AAAA,EACA,YAAA;AAAA,EACA,gBAAA;AAAA,EACA,mBAAA;AAAA,EACA,WAAA;AAAA,EACA,kBAAA;AAAA,EACA,0BAAA;AAAA,EACA,UAAA;AAAA,EACA,YAAA;AAAA,EACA,MAAA;AAAA,EACA,YAAA;AAAA,EACA;AACF,CAAa,KAAA;AACX,EAAA,MAAM,SAAS,SAAU,EAAA;AAEzB,EAAA,MAAM,CAAC,MAAA,EAAQ,SAAS,CAAA,GAAI,QAAwB,EAAA;AACpD,EAAA,MAAM,CAAC,aAAA,EAAe,gBAAgB,CAAA,GAAI,QAAwB,EAAA;AAClE,EAAA,MAAM,CAAC,iBAAA,EAAmB,oBAAoB,CAAA,GAAI,SAAiB,CAAC,CAAA;AACpE,EAAA,MAAM,CAAC,sBAAA,EAAwB,yBAAyB,CAAA,GAAI,QAAiB,EAAA;AAC7E,EAAA,MAAM,CAAC,cAAA,EAAgB,iBAAiB,CAAA,GAAI,SAAiB,CAAC,CAAA;AAE9D,EAAA,SAAA,CAAU,MAAM;AAxFlB,IAAA,IAAA,EAAA,EAAA,EAAA,EAAA,EAAA;AAyFI,IAAA,IAAI,IAAM,EAAA;AACR,MAAIA,IAAAA,OAAAA,GAAS,KAAK,SAAU,EAAA;AAC5B,MAAIC,IAAAA,kBAAAA,GAAoBD,QAAO,MAASA,GAAAA,OAAAA,CAAO,CAAC,CAAE,CAAA,CAAC,EAAE,KAAQ,GAAA,CAAA;AAC7D,MAAIE,IAAAA,uBAAAA,GAAyBF,QAAO,MAASA,GAAAA,OAAAA,CAAO,CAAC,CAAE,CAAA,CAAC,EAAE,UAAa,GAAA,KAAA,CAAA;AACvE,MAAA,IAAIG,eAAiBF,GAAAA,kBAAAA;AACrB,MAAA,IAAIG,cAAgB,GAAA,KAAA,CAAA;AAEpB,MAAA,IAAI,YAAc,EAAA;AAChB,QAAA,MAAM,CAAC,OAAS,EAAA,OAAO,CAAI,GAAA,IAAA,CAAK,kBAAkB,YAAY,CAAA;AAC9D,QAAAJ,OAAS,GAAA,OAAA;AACT,QAAAI,cAAgB,GAAA,OAAA;AAEhB,QAAAD,eAAAA,GAAAA,CAAiB,yBAAQ,CAAC,CAAA,KAAT,mBAAa,CAAb,CAAA,KAAA,IAAA,GAAA,KAAA,CAAA,GAAA,EAAA,CAAiB,UAAjB,IAA0B,GAAA,EAAA,GAAA,CAAA;AAAA;AAE7C,MAAA,SAAA,CAAUH,OAAM,CAAA;AAChB,MAAA,gBAAA,CAAiBI,cAAa,CAAA;AAC9B,MAAA,oBAAA,CAAqBH,kBAAiB,CAAA;AACtC,MAAA,yBAAA,CAA0BC,uBAAsB,CAAA;AAChD,MAAA,iBAAA,CAAkBC,eAAc,CAAA;AAAA;AAClC,GACC,EAAA,CAAC,IAAM,EAAA,YAAY,CAAC,CAAA;AAEvB,EAAA,IAAI,CAAC,MAAQ,EAAA;AACX,IAAO,OAAA,IAAA;AAAA;AAGT,EAAA,MAAM,iBAAoB,GAAA;AAAA,IACxB,IAAA;AAAA,IACA,QAAA;AAAA,IACA,QAAA;AAAA,IACA,aAAA;AAAA,IACA,WAAA;AAAA,IACA,WAAA;AAAA,IACA,aAAA;AAAA,IACA,eAAA;AAAA,IACA,SAAA;AAAA,IACA,UAAA;AAAA,IACA,WAAA;AAAA,IACA,iBAAA;AAAA,IACA,sBAAA;AAAA,IACA,cAAA;AAAA,IACA,kBAAA;AAAA,IACA,YAAA;AAAA,IACA,eAAA;AAAA,IACA,0BAAA;AAAA,IACA,UAAA;AAAA,IACA,MAAA;AAAA,IACA;AAAA,GACF;AACA,EAAA,IAAI,MAAS,GAAA,IAAA;AAEb,EAAA,IAAI,+CAAe,MAAQ,EAAA;AACzB,IAAA,MAAA,mBAEI,IAAA,CAAA,QAAA,EAAA,EAAA,QAAA,EAAA;AAAA,sBAAC,IAAA,CAAA,KAAA,EAAA,EAAI,SAAW,EAAA,MAAA,CAAO,qBACrB,EAAA,QAAA,EAAA;AAAA,wBAAC,IAAA,CAAA,KAAA,EAAA,EAAI,SAAW,EAAA,MAAA,CAAO,cAAgB,EAAA,QAAA,EAAA;AAAA,UAAA,SAAA;AAAA,8BAEpC,IAAK,EAAA,EAAA,SAAA,EAAW,MAAO,CAAA,kBAAA,EAAoB,MAAM,YAAc,EAAA;AAAA,SAClE,EAAA,CAAA;AAAA,wBACA,GAAA;AAAA,UAAC,gBAAA;AAAA,UAAA;AAAA,YACE,GAAG,iBAAA;AAAA,YACJ,MAAM,aAAc,CAAA,aAAA,CAAc,MAAS,GAAA,CAAC,EAAE,CAAC,CAAA;AAAA,YAC/C,OAAO,aAAc,CAAA,MAAA;AAAA,YACrB,SAAW,EAAA,SAAA;AAAA,YAEX,UAAY,EAAA;AAAA;AAAA;AACd,OACF,EAAA,CAAA;AAAA,sBAEC,IAAA,CAAA,KAAA,EAAA,EAAI,SAAW,EAAA,MAAA,CAAO,qBACrB,EAAA,QAAA,EAAA;AAAA,wBAAA,IAAA,CAAC,SAAI,SAAW,EAAA,EAAA,CAAG,OAAO,cAAgB,EAAA,MAAA,CAAO,oBAAoB,CACnE,EAAA,QAAA,EAAA;AAAA,0BAAA,GAAA,CAAC,IAAK,EAAA,EAAA,SAAA,EAAW,MAAO,CAAA,kBAAA,EAAoB,MAAM,UAAY,EAAA,CAAA;AAAA,UAAE;AAAA,SAElE,EAAA,CAAA;AAAA,wBACA,GAAA;AAAA,UAAC,gBAAA;AAAA,UAAA;AAAA,YACE,GAAG,iBAAA;AAAA,YACJ,IAAM,EAAA,MAAA,CAAO,CAAC,CAAA,CAAE,CAAC,CAAA;AAAA,YACjB,OAAO,MAAO,CAAA,MAAA;AAAA,YACd,SAAW,EAAA,UAAA;AAAA,YACX,UAAY,EAAA;AAAA;AAAA;AACd,OACF,EAAA;AAAA,KACF,EAAA,CAAA;AAAA,GAEJ,MAAA,IAAW,iCAAQ,MAAQ,EAAA;AACzB,IAAA,MAAA,mBACG,GAAA,CAAA,gBAAA,EAAA,EAAkB,GAAG,iBAAA,EAAmB,MAAM,MAAO,CAAA,CAAC,CAAE,CAAA,CAAC,CAAG,EAAA,KAAA,EAAO,MAAO,CAAA,MAAA,EAAQ,WAAW,UAAY,EAAA,CAAA;AAAA;AAI9G,EAAA,uBACG,IAAA,CAAA,KAAA,EAAA,EAAI,SAAW,EAAA,MAAA,CAAO,KACrB,EAAA,QAAA,EAAA;AAAA,oBAAA,GAAA;AAAA,MAAC,kBAAA;AAAA,MAAA;AAAA,QACC,IAAA;AAAA,QACA,WAAa,EAAA,eAAA;AAAA,QACb,eAAiB,EAAA,YAAA;AAAA,QACjB,UAAY,EAAA,cAAA;AAAA,QACZ,gBAAA;AAAA,QACA;AAAA;AAAA,KACF;AAAA,IACC;AAAA,GACH,EAAA,CAAA;AAEJ;AAEA,MAAM,YAAY,OAAO;AAAA,EACvB,OAAO,GAAI,CAAA;AAAA,IACT,KAAO,EAAA,OAAA;AAAA,IACP,QAAU,EAAA,MAAA;AAAA,IACV,QAAU,EAAA,CAAA;AAAA,IACV,SAAW,EAAA;AAAA,GACZ,CAAA;AAAA,EACD,uBAAuB,GAAI,CAAA;AAAA,IACzB,KAAO,EAAA,uBAAA;AAAA,IACP,OAAS,EAAA,MAAA;AAAA,IACT,YAAc,EAAA,CAAA,EAAG,gBAAmB,GAAA,MAAA,CAAO,gBAAgB,CAAA,EAAA;AAAA,GAC5D,CAAA;AAAA,EACD,gBAAgB,GAAI,CAAA;AAAA,IAClB,KAAO,EAAA,gBAAA;AAAA,IACP,WAAa,EAAA,aAAA;AAAA,IACb,SAAW,EAAA,gBAAA;AAAA,IACX,QAAU,EAAA,QAAA;AAAA,IACV,UAAY,EAAA;AAAA,GACb,CAAA;AAAA,EACD,sBAAsB,GAAI,CAAA;AAAA,IACxB,KAAO,EAAA,sBAAA;AAAA,IACP,SAAW,EAAA;AAAA,GACZ,CAAA;AAAA,EACD,oBAAoB,GAAI,CAAA;AAAA,IACtB,KAAO,EAAA,oBAAA;AAAA,IACP,aAAe,EAAA;AAAA,GAChB;AACH,CAAA,CAAA;;;;"}
package/dist/esm/FlameGraph/FlameGraphMetadata.js CHANGED
@@ -2,7 +2,7 @@ import { jsxs, jsx } from 'react/jsx-runtime';
2
2
  import { css } from '@emotion/css';
3
3
  import { memo } from 'react';
4
4
  import { getValueFormat } from '@grafana/data';
5
- import { useStyles2, Icon, IconButton } from '@grafana/ui';
5
+ import { useStyles2, Tooltip, Icon, IconButton } from '@grafana/ui';
6
6
 
7
7
  const FlameGraphMetadata = memo(
8
8
  ({ data, focusedItem, totalTicks, sandwichedLabel, onFocusPillClick, onSandwichPillClick }) => {
@@ -30,7 +30,7 @@ const FlameGraphMetadata = memo(
30
30
  );
31
31
  if (sandwichedLabel) {
32
32
  parts.push(
33
- /* @__PURE__ */ jsxs("span", { children: [
33
+ /* @__PURE__ */ jsx(Tooltip, { content: sandwichedLabel, placement: "top", children: /* @__PURE__ */ jsxs("div", { children: [
34
34
  /* @__PURE__ */ jsx(Icon, { size: "sm", name: "angle-right" }),
35
35
  /* @__PURE__ */ jsxs("div", { className: styles.metadataPill, children: [
36
36
  /* @__PURE__ */ jsx(Icon, { size: "sm", name: "gf-show-context" }),
@@ -48,17 +48,18 @@ const FlameGraphMetadata = memo(
48
48
  }
49
49
  )
50
50
  ] })
51
- ] }, "sandwich")
51
+ ] }) }, "sandwich")
52
52
  );
53
53
  }
54
54
  if (focusedItem) {
55
- const percentValue = Math.round(1e4 * (focusedItem.item.value / totalTicks)) / 100;
55
+ const percentValue = totalTicks > 0 ? Math.round(1e4 * (focusedItem.item.value / totalTicks)) / 100 : 0;
56
+ const iconName = percentValue > 0 ? "eye" : "exclamation-circle";
56
57
  parts.push(
57
- /* @__PURE__ */ jsxs("span", { children: [
58
+ /* @__PURE__ */ jsx(Tooltip, { content: focusedItem.label, placement: "top", children: /* @__PURE__ */ jsxs("div", { children: [
58
59
  /* @__PURE__ */ jsx(Icon, { size: "sm", name: "angle-right" }),
59
60
  /* @__PURE__ */ jsxs("div", { className: styles.metadataPill, children: [
60
- /* @__PURE__ */ jsx(Icon, { size: "sm", name: "eye" }),
61
- " ",
61
+ /* @__PURE__ */ jsx(Icon, { size: "sm", name: iconName }),
62
+ "\xA0",
62
63
  percentValue,
63
64
  "% of total",
64
65
  /* @__PURE__ */ jsx(
@@ -73,7 +74,7 @@ const FlameGraphMetadata = memo(
73
74
  }
74
75
  )
75
76
  ] })
76
- ] }, "focus")
77
+ ] }) }, "focus")
77
78
  );
78
79
  }
79
80
  return /* @__PURE__ */ jsx("div", { className: styles.metadata, children: parts });
@@ -99,8 +100,10 @@ const getStyles = (theme) => ({
99
100
  margin: theme.spacing(0, 0.5)
100
101
  }),
101
102
  metadata: css({
102
- margin: "8px 0",
103
- textAlign: "center"
103
+ display: "flex",
104
+ alignItems: "center",
105
+ justifyContent: "center",
106
+ margin: "8px 0"
104
107
  }),
105
108
  metadataPillName: css({
106
109
  label: "metadataPillName",
package/dist/esm/FlameGraph/FlameGraphMetadata.js.map CHANGED
@@ -1 +1 @@
1
- {"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, 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 <span key={'sandwich'}>\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 </span>\n );\n }\n\n if (focusedItem) {\n const percentValue = Math.round(10000 * (focusedItem.item.value / totalTicks)) / 100;\n parts.push(\n <span key={'focus'}>\n <Icon size={'sm'} name={'angle-right'} />\n <div className={styles.metadataPill}>\n <Icon size={'sm'} name={'eye'} /> {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 </span>\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 margin: '8px 0',\n textAlign: 'center',\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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"}
1
+ {"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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"}
package/dist/esm/FlameGraphContainer.js CHANGED
@@ -24,6 +24,7 @@ const FlameGraphContainer = ({
24
24
  vertical,
25
25
  showFlameGraphOnly,
26
26
  disableCollapsing,
27
+ keepFocusOnDataChange,
27
28
  getExtraContextMenuButtons
28
29
  }) => {
29
30
  const [focusedItemData, setFocusedItemData] = useState();
@@ -57,13 +58,40 @@ const FlameGraphContainer = ({
57
58
  setRangeMin(0);
58
59
  setRangeMax(1);
59
60
  }, [setFocusedItemData, setRangeMax, setRangeMin]);
60
- function resetSandwich() {
61
+ const resetSandwich = useCallback(() => {
61
62
  setSandwichItem(void 0);
62
- }
63
+ }, [setSandwichItem]);
63
64
  useEffect(() => {
64
- resetFocus();
65
- resetSandwich();
66
- }, [data, resetFocus]);
65
+ var _a;
66
+ if (!keepFocusOnDataChange) {
67
+ resetFocus();
68
+ resetSandwich();
69
+ return;
70
+ }
71
+ if (dataContainer && focusedItemData) {
72
+ const item = (_a = dataContainer.getNodesWithLabel(focusedItemData.label)) == null ? void 0 : _a[0];
73
+ if (item) {
74
+ setFocusedItemData({ ...focusedItemData, item });
75
+ const levels = dataContainer.getLevels();
76
+ const totalViewTicks = levels.length ? levels[0][0].value : 0;
77
+ setRangeMin(item.start / totalViewTicks);
78
+ setRangeMax((item.start + item.value) / totalViewTicks);
79
+ } else {
80
+ setFocusedItemData({
81
+ ...focusedItemData,
82
+ item: {
83
+ start: 0,
84
+ value: 0,
85
+ itemIndexes: [],
86
+ children: [],
87
+ level: 0
88
+ }
89
+ });
90
+ setRangeMin(0);
91
+ setRangeMax(1);
92
+ }
93
+ }
94
+ }, [dataContainer, keepFocusOnDataChange]);
67
95
  const onSymbolClick = useCallback(
68
96
  (symbol) => {
69
97
  if (search === symbol) {
package/dist/esm/FlameGraphContainer.js.map CHANGED
@@ -1 +1 @@
1
- {"version":3,"file":"FlameGraphContainer.js","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\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 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 function resetSandwich() {\n setSandwichItem(undefined);\n }\n\n useEffect(() => {\n resetFocus();\n resetSandwich();\n }, [data, resetFocus]);\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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"}
1
+ {"version":3,"file":"FlameGraphContainer.js","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/index.d.ts CHANGED
@@ -99,8 +99,12 @@ type Props = {
99
99
  * Disable behaviour where similar items in the same stack will be collapsed into single item.
100
100
  */
101
101
  disableCollapsing?: boolean;
102
+ /**
103
+ * Whether or not to keep any focused item when the profile data changes.
104
+ */
105
+ keepFocusOnDataChange?: boolean;
102
106
  };
103
- declare const FlameGraphContainer: ({ data, onTableSymbolClick, onViewSelected, onTextAlignSelected, onTableSort, getTheme, stickyHeader, extraHeaderElements, vertical, showFlameGraphOnly, disableCollapsing, getExtraContextMenuButtons, }: Props) => react_jsx_runtime.JSX.Element | null;
107
+ declare const FlameGraphContainer: ({ data, onTableSymbolClick, onViewSelected, onTextAlignSelected, onTableSort, getTheme, stickyHeader, extraHeaderElements, vertical, showFlameGraphOnly, disableCollapsing, keepFocusOnDataChange, getExtraContextMenuButtons, }: Props) => react_jsx_runtime.JSX.Element | null;
104
108
 
105
109
  declare const data: DataFrameDTO;
106
110