@grafana/flamegraph 11.6.0-228014 → 11.6.0-228056
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.
- package/dist/{index.js → cjs/index.cjs} +1 -1
- package/dist/cjs/index.cjs.map +1 -0
- package/dist/esm/FlameGraph/{FlameGraph.js → FlameGraph.mjs} +4 -4
- package/dist/esm/FlameGraph/FlameGraph.mjs.map +1 -0
- package/dist/esm/FlameGraph/{FlameGraphCanvas.js → FlameGraphCanvas.mjs} +5 -5
- package/dist/esm/FlameGraph/FlameGraphCanvas.mjs.map +1 -0
- package/dist/esm/FlameGraph/{FlameGraphContextMenu.js → FlameGraphContextMenu.mjs} +1 -1
- package/dist/esm/FlameGraph/FlameGraphContextMenu.mjs.map +1 -0
- package/dist/esm/FlameGraph/{FlameGraphMetadata.js → FlameGraphMetadata.mjs} +1 -1
- package/dist/esm/FlameGraph/FlameGraphMetadata.mjs.map +1 -0
- package/dist/esm/FlameGraph/{FlameGraphTooltip.js → FlameGraphTooltip.mjs} +1 -1
- package/dist/esm/FlameGraph/FlameGraphTooltip.mjs.map +1 -0
- package/dist/esm/FlameGraph/{colors.js → colors.mjs} +3 -3
- package/dist/esm/FlameGraph/colors.mjs.map +1 -0
- package/dist/esm/FlameGraph/{dataTransform.js → dataTransform.mjs} +3 -3
- package/dist/esm/FlameGraph/dataTransform.mjs.map +1 -0
- package/dist/esm/FlameGraph/{murmur3.js → murmur3.mjs} +1 -1
- package/dist/esm/FlameGraph/murmur3.mjs.map +1 -0
- package/dist/esm/FlameGraph/{rendering.js → rendering.mjs} +4 -4
- package/dist/esm/FlameGraph/rendering.mjs.map +1 -0
- package/dist/esm/FlameGraph/testData/{dataNestedSet.js → dataNestedSet.mjs} +1 -1
- package/dist/esm/FlameGraph/testData/dataNestedSet.mjs.map +1 -0
- package/dist/esm/FlameGraph/{treeTransforms.js → treeTransforms.mjs} +1 -1
- package/dist/esm/FlameGraph/treeTransforms.mjs.map +1 -0
- package/dist/esm/{FlameGraphContainer.js → FlameGraphContainer.mjs} +7 -7
- package/dist/esm/FlameGraphContainer.mjs.map +1 -0
- package/dist/esm/{FlameGraphHeader.js → FlameGraphHeader.mjs} +4 -4
- package/dist/esm/FlameGraphHeader.mjs.map +1 -0
- package/dist/esm/TopTable/{FlameGraphTopTableContainer.js → FlameGraphTopTableContainer.mjs} +4 -4
- package/dist/esm/TopTable/FlameGraphTopTableContainer.mjs.map +1 -0
- package/dist/esm/{constants.js → constants.mjs} +1 -1
- package/dist/esm/constants.mjs.map +1 -0
- package/dist/esm/index.d.mts +111 -0
- package/dist/esm/index.mjs +4 -0
- package/dist/esm/index.mjs.map +1 -0
- package/dist/esm/{types.js → types.mjs} +1 -1
- package/dist/esm/types.mjs.map +1 -0
- package/package.json +24 -11
- package/dist/esm/FlameGraph/FlameGraph.js.map +0 -1
- package/dist/esm/FlameGraph/FlameGraphCanvas.js.map +0 -1
- package/dist/esm/FlameGraph/FlameGraphContextMenu.js.map +0 -1
- package/dist/esm/FlameGraph/FlameGraphMetadata.js.map +0 -1
- package/dist/esm/FlameGraph/FlameGraphTooltip.js.map +0 -1
- package/dist/esm/FlameGraph/colors.js.map +0 -1
- package/dist/esm/FlameGraph/dataTransform.js.map +0 -1
- package/dist/esm/FlameGraph/murmur3.js.map +0 -1
- package/dist/esm/FlameGraph/rendering.js.map +0 -1
- package/dist/esm/FlameGraph/testData/dataNestedSet.js.map +0 -1
- package/dist/esm/FlameGraph/treeTransforms.js.map +0 -1
- package/dist/esm/FlameGraphContainer.js.map +0 -1
- package/dist/esm/FlameGraphHeader.js.map +0 -1
- package/dist/esm/TopTable/FlameGraphTopTableContainer.js.map +0 -1
- package/dist/esm/constants.js.map +0 -1
- package/dist/esm/index.js +0 -4
- package/dist/esm/index.js.map +0 -1
- package/dist/esm/types.js.map +0 -1
- package/dist/index.js.map +0 -1
- /package/dist/{index.d.ts → cjs/index.d.cts} +0 -0
@@ -1 +0,0 @@
|
|
1
|
-
{"version":3,"file":"treeTransforms.js","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":"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"}
|
@@ -1 +0,0 @@
|
|
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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"}
|
@@ -1 +0,0 @@
|
|
1
|
-
{"version":3,"file":"FlameGraphHeader.js","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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"}
|
@@ -1 +0,0 @@
|
|
1
|
-
{"version":3,"file":"FlameGraphTopTableContainer.js","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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"}
|
@@ -1 +0,0 @@
|
|
1
|
-
{"version":3,"file":"constants.js","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.js
DELETED
package/dist/esm/index.js.map
DELETED
@@ -1 +0,0 @@
|
|
1
|
-
{"version":3,"file":"index.js","sources":[],"sourcesContent":[],"names":[],"mappings":";;"}
|
package/dist/esm/types.js.map
DELETED
@@ -1 +0,0 @@
|
|
1
|
-
{"version":3,"file":"types.js","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;;;;"}
|