npm - @perses-dev/flame-chart-plugin - Versions diffs - 0.5.0 → 0.5.1 - Mend

@perses-dev/flame-chart-plugin 0.5.0 → 0.5.1

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 (16) hide show

package/lib/components/FlameChartPanel.js.map CHANGED Viewed

	@@ -1 +1 @@
1	- {"version":3,"sources":["../../../src/components/FlameChartPanel.tsx"],"sourcesContent":["// Copyright The Perses Authors\n// Licensed under the Apache License, Version 2.0 (the \"License\");\n// you may not use this file except in compliance with the License.\n// You may obtain a copy of the License at\n//\n// http://www.apache.org/licenses/LICENSE-2.0\n//\n// Unless required by applicable law or agreed to in writing, software\n// distributed under the License is distributed on an \"AS IS\" BASIS,\n// WITHOUT WARRANTIES OR CONDITIONS OF ANY KIND, either express or implied.\n// See the License for the specific language governing permissions and\n// limitations under the License.\n\nimport { TitleComponentOption } from 'echarts';\nimport { useChartsTheme } from '@perses-dev/components';\nimport { Stack, Typography, SxProps, useMediaQuery, useTheme } from '@mui/material';\nimport { FC, useState, useEffect, useMemo } from 'react';\nimport { ProfileData, StackTrace } from '@perses-dev/core';\nimport { PanelProps } from '@perses-dev/plugin-system';\nimport { FlameChartOptions } from '../flame-chart-model';\nimport { filterStackTraceById, getMaxDepth } from '../utils/data-transform';\nimport { FlameChart } from './FlameChart';\nimport { Settings } from './Settings';\nimport { TableChart } from './TableChart';\nimport { SeriesChart } from './SeriesChart';\n\nconst LARGE_PANEL_THRESHOLD = 600;\nconst DEFAULT_SERIES_CHART_HEIGHT = 200;\n\nexport type FlameChartPanelProps = PanelProps<FlameChartOptions, ProfileData>;\n\nexport const FlameChartPanel: FC<FlameChartPanelProps> = (props) => {\n const { contentDimensions, queryResults, spec } = props;\n\n const isMobileSize = useMediaQuery(useTheme().breakpoints.down('sm'));\n\n // selectedId equals 0 => Flame Graph is not zoomed in\n // selectedId different from 0 => Flame Graph is zoomed in\n const [selectedId, setSelectedId] = useState(0);\n const [searchValue, setSearchValue] = useState('');\n\n // This spec is used to manage settings temporarily\n const [liveSpec, setLiveSpec] = useState<FlameChartOptions>(spec);\n\n // keep liveSpec up to date\n useEffect(() => {\n setLiveSpec(spec);\n setSelectedId(0);\n setSearchValue('');\n }, [spec]);\n\n const chartsTheme = useChartsTheme();\n const flameChartData = useMemo(() => {\n return queryResults[0];\n }, [queryResults]);\n\n const selectedStackTrace: StackTrace \| undefined = useMemo(() => {\n if (!flameChartData) return undefined;\n if (!selectedId) return flameChartData.data.profile.stackTrace;\n\n return filterStackTraceById(flameChartData.data.profile.stackTrace, selectedId);\n }, [flameChartData, selectedId]);\n\n const maxDepth: number = useMemo(\n () => (selectedStackTrace ? getMaxDepth(selectedStackTrace) : 0),\n [selectedStackTrace]\n );\n\n const noDataTextStyle = (chartsTheme.noDataOption.title as TitleComponentOption).textStyle as SxProps;\n\n const onChangePalette = (newPalette: 'package-name' \| 'value') => {\n setLiveSpec((prev) => {\n return { ...prev, palette: newPalette };\n });\n };\n\n const onDisplayChange = (value: 'table' \| 'flame-graph' \| 'both' \| 'none') => {\n let showTable = true;\n let showFlameGraph = true;\n if (value === 'table') {\n showFlameGraph = false;\n } else if (value === 'flame-graph') {\n showTable = false;\n }\n setLiveSpec((prev) => {\n return { ...prev, showTable: showTable, showFlameGraph: showFlameGraph };\n });\n };\n\n if (!contentDimensions) return null;\n\n const PADDING =\n liveSpec.showSeries && liveSpec.showSettings ? 32 : liveSpec.showSeries \|\| liveSpec.showSettings ? 16 : 0;\n\n const SETTINGS_HEIGHT = liveSpec.showSettings ? 30 : 0;\n\n const SERIES_CHART_HEIGHT = liveSpec.showSeries\n ? contentDimensions.height < DEFAULT_SERIES_CHART_HEIGHT\n ? contentDimensions.height\n : DEFAULT_SERIES_CHART_HEIGHT\n : 0;\n\n const TABLE_FLAME_CHART_HEIGHT = liveSpec.traceHeight\n ? Math.max(\n contentDimensions.height -\n (contentDimensions.height > LARGE_PANEL_THRESHOLD ? SERIES_CHART_HEIGHT + SETTINGS_HEIGHT + PADDING : 0),\n maxDepth * liveSpec.traceHeight\n )\n : contentDimensions.height -\n (contentDimensions.height > LARGE_PANEL_THRESHOLD ? SERIES_CHART_HEIGHT + SETTINGS_HEIGHT + PADDING : 0);\n\n const TABLE_CHART_WIDTH = isMobileSize\n ? contentDimensions.width\n : liveSpec.showFlameGraph\n ? 0.4 * contentDimensions.width\n : contentDimensions.width;\n\n const FLAME_CHART_WIDTH = isMobileSize\n ? contentDimensions.width\n : liveSpec.showTable\n ? 0.6 * contentDimensions.width\n : contentDimensions.width;\n\n // TODO (gladorme): allow users to override height (useful for explorer for stack traces with high depth)\n return (\n <Stack\n height={contentDimensions.height}\n width={contentDimensions.width}\n justifyContent=\"center\"\n alignItems=\"center\"\n >\n {queryResults.length > 1 ? (\n // display a message if there is more than one query\n <Typography sx={{ ...noDataTextStyle }}>\n There is more than one query. Please make sure that you provided only one query.\n </Typography>\n ) : flameChartData ? (\n <Stack\n gap={2}\n sx={{\n overflowY: 'auto',\n scrollbarGutter: 'stable both-edges',\n paddingTop: liveSpec.showSettings \|\| liveSpec.showSeries ? 1 : 0,\n }}\n >\n {liveSpec.showSeries && (\n <SeriesChart width={contentDimensions.width} height={SERIES_CHART_HEIGHT} data={flameChartData.data} />\n )}\n {liveSpec.showSettings && (\n <Settings\n onSelectedIdChange={setSelectedId}\n onChangePalette={onChangePalette}\n onDisplayChange={onDisplayChange}\n value={liveSpec}\n selectedId={selectedId}\n />\n )}\n <Stack\n direction={isMobileSize ? 'column' : 'row'}\n justifyContent=\"center\"\n alignItems={isMobileSize ? 'center' : 'top'}\n >\n {liveSpec.showTable && (\n <TableChart\n width={TABLE_CHART_WIDTH}\n height={TABLE_FLAME_CHART_HEIGHT}\n data={flameChartData.data}\n searchValue={searchValue}\n onSearchValueChange={setSearchValue}\n onSelectedIdChange={setSelectedId}\n />\n )}\n {liveSpec.showFlameGraph && (\n <FlameChart\n width={FLAME_CHART_WIDTH}\n height={TABLE_FLAME_CHART_HEIGHT}\n data={flameChartData.data}\n palette={liveSpec.palette}\n selectedId={selectedId}\n searchValue={searchValue}\n onSelectedIdChange={setSelectedId}\n />\n )}\n </Stack>\n </Stack>\n ) : (\n <Typography sx={{ ...noDataTextStyle }}>No data</Typography>\n )}\n </Stack>\n );\n};\n"],"names":["useChartsTheme","Stack","Typography","useMediaQuery","useTheme","useState","useEffect","useMemo","filterStackTraceById","getMaxDepth","FlameChart","Settings","TableChart","SeriesChart","LARGE_PANEL_THRESHOLD","DEFAULT_SERIES_CHART_HEIGHT","FlameChartPanel","props","contentDimensions","queryResults","spec","isMobileSize","breakpoints","down","selectedId","setSelectedId","searchValue","setSearchValue","liveSpec","setLiveSpec","chartsTheme","flameChartData","selectedStackTrace","undefined","data","profile","stackTrace","maxDepth","noDataTextStyle","noDataOption","title","textStyle","onChangePalette","newPalette","prev","palette","onDisplayChange","value","showTable","showFlameGraph","PADDING","showSeries","showSettings","SETTINGS_HEIGHT","SERIES_CHART_HEIGHT","height","TABLE_FLAME_CHART_HEIGHT","traceHeight","Math","max","TABLE_CHART_WIDTH","width","FLAME_CHART_WIDTH","justifyContent","alignItems","length","sx","gap","overflowY","scrollbarGutter","paddingTop","onSelectedIdChange","direction","onSearchValueChange"],"mappings":"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"}
1	+ {"version":3,"sources":["../../../src/components/FlameChartPanel.tsx"],"sourcesContent":["// Copyright The Perses Authors\n// Licensed under the Apache License, Version 2.0 (the \"License\");\n// you may not use this file except in compliance with the License.\n// You may obtain a copy of the License at\n//\n// http://www.apache.org/licenses/LICENSE-2.0\n//\n// Unless required by applicable law or agreed to in writing, software\n// distributed under the License is distributed on an \"AS IS\" BASIS,\n// WITHOUT WARRANTIES OR CONDITIONS OF ANY KIND, either express or implied.\n// See the License for the specific language governing permissions and\n// limitations under the License.\n\nimport { TitleComponentOption } from 'echarts';\nimport { useChartsTheme } from '@perses-dev/components';\nimport { Stack, Typography, SxProps, useMediaQuery, useTheme } from '@mui/material';\nimport { FC, useState, useEffect, useMemo } from 'react';\nimport { ProfileData, StackTrace } from '@perses-dev/core';\nimport { PanelProps } from '@perses-dev/plugin-system';\nimport { FlameChartOptions } from '../flame-chart-model';\nimport { filterStackTraceById, getMaxDepth } from '../utils/data-transform';\nimport { FlameChart } from './FlameChart';\nimport { Settings } from './Settings';\nimport { TableChart } from './TableChart';\nimport { SeriesChart } from './SeriesChart';\n\nconst LARGE_PANEL_THRESHOLD = 600;\nconst DEFAULT_SERIES_CHART_HEIGHT = 200;\n\nexport type FlameChartPanelProps = PanelProps<FlameChartOptions, ProfileData>;\n\nexport const FlameChartPanel: FC<FlameChartPanelProps> = (props) => {\n const { contentDimensions, queryResults, spec } = props;\n\n const isMobileSize = useMediaQuery(useTheme().breakpoints.down('sm'));\n\n // selectedId equals 0 => Flame Graph is not zoomed in\n // selectedId different from 0 => Flame Graph is zoomed in\n const [selectedId, setSelectedId] = useState(0);\n const [searchValue, setSearchValue] = useState('');\n\n // This spec is used to manage settings temporarily\n const [liveSpec, setLiveSpec] = useState<FlameChartOptions>(spec);\n\n // keep liveSpec up to date\n useEffect(() => {\n setLiveSpec(spec);\n setSelectedId(0);\n setSearchValue('');\n }, [spec]);\n\n const chartsTheme = useChartsTheme();\n const flameChartData = useMemo(() => {\n return queryResults[0];\n }, [queryResults]);\n\n const selectedStackTrace: StackTrace \| undefined = useMemo(() => {\n if (!flameChartData) return undefined;\n if (!selectedId) return flameChartData.data.profile.stackTrace;\n\n return filterStackTraceById(flameChartData.data.profile.stackTrace, selectedId);\n }, [flameChartData, selectedId]);\n\n const maxDepth: number = useMemo(\n () => (selectedStackTrace ? getMaxDepth(selectedStackTrace) : 0),\n [selectedStackTrace]\n );\n\n const noDataTextStyle = (chartsTheme.noDataOption.title as TitleComponentOption).textStyle as SxProps;\n\n const onChangePalette = (newPalette: 'package-name' \| 'value'): void => {\n setLiveSpec((prev) => {\n return { ...prev, palette: newPalette };\n });\n };\n\n const onDisplayChange = (value: 'table' \| 'flame-graph' \| 'both' \| 'none'): void => {\n let showTable = true;\n let showFlameGraph = true;\n if (value === 'table') {\n showFlameGraph = false;\n } else if (value === 'flame-graph') {\n showTable = false;\n }\n setLiveSpec((prev) => {\n return { ...prev, showTable: showTable, showFlameGraph: showFlameGraph };\n });\n };\n\n if (!contentDimensions) return null;\n\n const PADDING =\n liveSpec.showSeries && liveSpec.showSettings ? 32 : liveSpec.showSeries \|\| liveSpec.showSettings ? 16 : 0;\n\n const SETTINGS_HEIGHT = liveSpec.showSettings ? 30 : 0;\n\n const SERIES_CHART_HEIGHT = liveSpec.showSeries\n ? contentDimensions.height < DEFAULT_SERIES_CHART_HEIGHT\n ? contentDimensions.height\n : DEFAULT_SERIES_CHART_HEIGHT\n : 0;\n\n const TABLE_FLAME_CHART_HEIGHT = liveSpec.traceHeight\n ? Math.max(\n contentDimensions.height -\n (contentDimensions.height > LARGE_PANEL_THRESHOLD ? SERIES_CHART_HEIGHT + SETTINGS_HEIGHT + PADDING : 0),\n maxDepth * liveSpec.traceHeight\n )\n : contentDimensions.height -\n (contentDimensions.height > LARGE_PANEL_THRESHOLD ? SERIES_CHART_HEIGHT + SETTINGS_HEIGHT + PADDING : 0);\n\n const TABLE_CHART_WIDTH = isMobileSize\n ? contentDimensions.width\n : liveSpec.showFlameGraph\n ? 0.4 * contentDimensions.width\n : contentDimensions.width;\n\n const FLAME_CHART_WIDTH = isMobileSize\n ? contentDimensions.width\n : liveSpec.showTable\n ? 0.6 * contentDimensions.width\n : contentDimensions.width;\n\n // TODO (gladorme): allow users to override height (useful for explorer for stack traces with high depth)\n return (\n <Stack\n height={contentDimensions.height}\n width={contentDimensions.width}\n justifyContent=\"center\"\n alignItems=\"center\"\n >\n {queryResults.length > 1 ? (\n // display a message if there is more than one query\n <Typography sx={{ ...noDataTextStyle }}>\n There is more than one query. Please make sure that you provided only one query.\n </Typography>\n ) : flameChartData ? (\n <Stack\n gap={2}\n sx={{\n overflowY: 'auto',\n scrollbarGutter: 'stable both-edges',\n paddingTop: liveSpec.showSettings \|\| liveSpec.showSeries ? 1 : 0,\n }}\n >\n {liveSpec.showSeries && (\n <SeriesChart width={contentDimensions.width} height={SERIES_CHART_HEIGHT} data={flameChartData.data} />\n )}\n {liveSpec.showSettings && (\n <Settings\n onSelectedIdChange={setSelectedId}\n onChangePalette={onChangePalette}\n onDisplayChange={onDisplayChange}\n value={liveSpec}\n selectedId={selectedId}\n />\n )}\n <Stack\n direction={isMobileSize ? 'column' : 'row'}\n justifyContent=\"center\"\n alignItems={isMobileSize ? 'center' : 'top'}\n >\n {liveSpec.showTable && (\n <TableChart\n width={TABLE_CHART_WIDTH}\n height={TABLE_FLAME_CHART_HEIGHT}\n data={flameChartData.data}\n searchValue={searchValue}\n onSearchValueChange={setSearchValue}\n onSelectedIdChange={setSelectedId}\n />\n )}\n {liveSpec.showFlameGraph && (\n <FlameChart\n width={FLAME_CHART_WIDTH}\n height={TABLE_FLAME_CHART_HEIGHT}\n data={flameChartData.data}\n palette={liveSpec.palette}\n selectedId={selectedId}\n searchValue={searchValue}\n onSelectedIdChange={setSelectedId}\n />\n )}\n </Stack>\n </Stack>\n ) : (\n <Typography sx={{ ...noDataTextStyle }}>No data</Typography>\n )}\n </Stack>\n );\n};\n"],"names":["useChartsTheme","Stack","Typography","useMediaQuery","useTheme","useState","useEffect","useMemo","filterStackTraceById","getMaxDepth","FlameChart","Settings","TableChart","SeriesChart","LARGE_PANEL_THRESHOLD","DEFAULT_SERIES_CHART_HEIGHT","FlameChartPanel","props","contentDimensions","queryResults","spec","isMobileSize","breakpoints","down","selectedId","setSelectedId","searchValue","setSearchValue","liveSpec","setLiveSpec","chartsTheme","flameChartData","selectedStackTrace","undefined","data","profile","stackTrace","maxDepth","noDataTextStyle","noDataOption","title","textStyle","onChangePalette","newPalette","prev","palette","onDisplayChange","value","showTable","showFlameGraph","PADDING","showSeries","showSettings","SETTINGS_HEIGHT","SERIES_CHART_HEIGHT","height","TABLE_FLAME_CHART_HEIGHT","traceHeight","Math","max","TABLE_CHART_WIDTH","width","FLAME_CHART_WIDTH","justifyContent","alignItems","length","sx","gap","overflowY","scrollbarGutter","paddingTop","onSelectedIdChange","direction","onSearchValueChange"],"mappings":"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"}

package/lib/components/Settings.js.map CHANGED Viewed

	@@ -1 +1 @@
1	- {"version":3,"sources":["../../../src/components/Settings.tsx"],"sourcesContent":["// Copyright The Perses Authors\n// Licensed under the Apache License, Version 2.0 (the \"License\");\n// you may not use this file except in compliance with the License.\n// You may obtain a copy of the License at\n//\n// http://www.apache.org/licenses/LICENSE-2.0\n//\n// Unless required by applicable law or agreed to in writing, software\n// distributed under the License is distributed on an \"AS IS\" BASIS,\n// WITHOUT WARRANTIES OR CONDITIONS OF ANY KIND, either express or implied.\n// See the License for the specific language governing permissions and\n// limitations under the License.\n\nimport { ReactElement, useState, useMemo } from 'react';\nimport RefreshIcon from 'mdi-material-ui/Refresh';\nimport PaletteIcon from 'mdi-material-ui/Palette';\nimport { Stack, Button, useTheme, MenuItem, Menu, Fade } from '@mui/material';\nimport { ToolbarIconButton, InfoTooltip } from '@perses-dev/components';\nimport { TOOLTIP_TEXT } from '../utils/ui-text';\nimport { FlameChartOptions } from '../flame-chart-model';\n\nexport interface SettingsProps {\n value: FlameChartOptions;\n selectedId: number;\n onChangePalette: (palette: 'package-name' \| 'value') => void;\n onSelectedIdChange: (newId: number) => void;\n onDisplayChange: (value: 'table' \| 'flame-graph' \| 'both') => void;\n}\n\nexport function Settings(props: SettingsProps): ReactElement {\n const { value, selectedId, onSelectedIdChange, onChangePalette, onDisplayChange } = props;\n const theme = useTheme();\n const [anchorEl, setAnchorEl] = useState<null \| HTMLElement>(null);\n const open = Boolean(anchorEl);\n\n const customButtonStyle = {\n fontSize: '12px',\n padding: '2px 6px',\n minWidth: 'auto',\n };\n\n const handleChangeColorShemeClick = (event: React.MouseEvent<HTMLElement>) => {\n setAnchorEl(event.currentTarget);\n };\n\n const handleByPackageNameClick = () => {\n onChangePalette('package-name');\n handleClose();\n };\n\n const handleByValueClick = () => {\n onChangePalette('value');\n handleClose();\n };\n\n const handleClose = () => {\n setAnchorEl(null);\n };\n\n const isTableSelected = () => selectedView === 'table';\n const isFlameGraphSelected = () => selectedView === 'flame-graph';\n const isBothSelected = () => selectedView === 'both';\n\n // Update selected view based on the value of showTable and showFlameGraph\n const selectedView: 'table' \| 'flame-graph' \| 'both' \| 'none' = useMemo(() => {\n if (!value.showTable && !value.showFlameGraph) {\n return 'none';\n } else if (value.showTable && value.showFlameGraph) {\n return 'both';\n } else if (value.showTable) {\n return 'table';\n } else {\n return 'flame-graph';\n }\n }, [value.showTable, value.showFlameGraph]);\n\n return (\n <Stack spacing=\"10px\" direction=\"row\" justifyContent=\"center\" alignItems=\"center\">\n {selectedId !== 0 && (\n <InfoTooltip description={TOOLTIP_TEXT.resetFlameGraph}>\n <ToolbarIconButton\n aria-label={TOOLTIP_TEXT.resetFlameGraph}\n onClick={() => onSelectedIdChange(0)}\n color=\"primary\"\n >\n <RefreshIcon fontSize=\"small\" />\n </ToolbarIconButton>\n </InfoTooltip>\n )}\n <Stack>\n <InfoTooltip description={TOOLTIP_TEXT.changeColorSheme}>\n <ToolbarIconButton\n id=\"change-color-sheme-button\"\n aria-label={TOOLTIP_TEXT.changeColorSheme}\n aria-controls={open ? 'change-color-sheme-menu' : undefined}\n aria-haspopup=\"true\"\n aria-expanded={open ? 'true' : undefined}\n onClick={handleChangeColorShemeClick}\n color=\"primary\"\n >\n <PaletteIcon fontSize=\"small\" />\n </ToolbarIconButton>\n </InfoTooltip>\n <Menu\n id=\"change-color-sheme-menu\"\n slotProps={{\n list: { 'aria-labelledby': 'change-color-sheme-button' },\n }}\n anchorEl={anchorEl}\n open={open}\n onClose={handleClose}\n slots={{ transition: Fade }}\n anchorOrigin={{\n vertical: 'bottom',\n horizontal: 'center',\n }}\n transformOrigin={{\n vertical: 'top',\n horizontal: 'center',\n }}\n sx={{\n mt: 1,\n '& .MuiPaper-root': {\n backgroundColor: theme.palette.background.paper,\n padding: '0 5px',\n },\n '& .MuiMenuItem-root:hover': {\n backgroundColor: theme.palette.action.hover,\n },\n }}\n >\n <MenuItem onClick={handleByPackageNameClick} selected={value.palette === 'package-name'}>\n By package name\n </MenuItem>\n <MenuItem onClick={handleByValueClick} selected={value.palette === 'value'}>\n By value\n </MenuItem>\n </Menu>\n </Stack>\n <Stack\n direction=\"row\"\n sx={{\n border: `1px solid ${theme.palette.primary.main}`,\n borderRadius: `${theme.shape.borderRadius}px`,\n padding: '2px',\n }}\n >\n <InfoTooltip description={TOOLTIP_TEXT.showTable}>\n <Button\n variant={isTableSelected() ? 'contained' : 'text'}\n color=\"primary\"\n size=\"small\"\n onClick={() => onDisplayChange('table')}\n sx={customButtonStyle}\n >\n Table\n </Button>\n </InfoTooltip>\n <InfoTooltip description={TOOLTIP_TEXT.showFlameGraph}>\n <Button\n variant={isFlameGraphSelected() ? 'contained' : 'text'}\n color=\"primary\"\n size=\"small\"\n onClick={() => onDisplayChange('flame-graph')}\n sx={customButtonStyle}\n >\n Flame Graph\n </Button>\n </InfoTooltip>\n <InfoTooltip description={TOOLTIP_TEXT.showBoth}>\n <Button\n variant={isBothSelected() ? 'contained' : 'text'}\n color=\"primary\"\n size=\"small\"\n onClick={() => onDisplayChange('both')}\n sx={customButtonStyle}\n >\n Both\n </Button>\n </InfoTooltip>\n </Stack>\n </Stack>\n );\n}\n"],"names":["useState","useMemo","RefreshIcon","PaletteIcon","Stack","Button","useTheme","MenuItem","Menu","Fade","ToolbarIconButton","InfoTooltip","TOOLTIP_TEXT","Settings","props","value","selectedId","onSelectedIdChange","onChangePalette","onDisplayChange","theme","anchorEl","setAnchorEl","open","Boolean","customButtonStyle","fontSize","padding","minWidth","handleChangeColorShemeClick","event","currentTarget","handleByPackageNameClick","handleClose","handleByValueClick","isTableSelected","selectedView","isFlameGraphSelected","isBothSelected","showTable","showFlameGraph","spacing","direction","justifyContent","alignItems","description","resetFlameGraph","aria-label","onClick","color","changeColorSheme","id","aria-controls","undefined","aria-haspopup","aria-expanded","slotProps","list","onClose","slots","transition","anchorOrigin","vertical","horizontal","transformOrigin","sx","mt","backgroundColor","palette","background","paper","action","hover","selected","border","primary","main","borderRadius","shape","variant","size","showBoth"],"mappings":"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"}
1	+ {"version":3,"sources":["../../../src/components/Settings.tsx"],"sourcesContent":["// Copyright The Perses Authors\n// Licensed under the Apache License, Version 2.0 (the \"License\");\n// you may not use this file except in compliance with the License.\n// You may obtain a copy of the License at\n//\n// http://www.apache.org/licenses/LICENSE-2.0\n//\n// Unless required by applicable law or agreed to in writing, software\n// distributed under the License is distributed on an \"AS IS\" BASIS,\n// WITHOUT WARRANTIES OR CONDITIONS OF ANY KIND, either express or implied.\n// See the License for the specific language governing permissions and\n// limitations under the License.\n\nimport { ReactElement, useState, useMemo } from 'react';\nimport RefreshIcon from 'mdi-material-ui/Refresh';\nimport PaletteIcon from 'mdi-material-ui/Palette';\nimport { Stack, Button, useTheme, MenuItem, Menu, Fade } from '@mui/material';\nimport { ToolbarIconButton, InfoTooltip } from '@perses-dev/components';\nimport { TOOLTIP_TEXT } from '../utils/ui-text';\nimport { FlameChartOptions } from '../flame-chart-model';\n\nexport interface SettingsProps {\n value: FlameChartOptions;\n selectedId: number;\n onChangePalette: (palette: 'package-name' \| 'value') => void;\n onSelectedIdChange: (newId: number) => void;\n onDisplayChange: (value: 'table' \| 'flame-graph' \| 'both') => void;\n}\n\nexport function Settings(props: SettingsProps): ReactElement {\n const { value, selectedId, onSelectedIdChange, onChangePalette, onDisplayChange } = props;\n const theme = useTheme();\n const [anchorEl, setAnchorEl] = useState<null \| HTMLElement>(null);\n const open = Boolean(anchorEl);\n\n const customButtonStyle = {\n fontSize: '12px',\n padding: '2px 6px',\n minWidth: 'auto',\n };\n\n const handleChangeColorShemeClick = (event: React.MouseEvent<HTMLElement>): void => {\n setAnchorEl(event.currentTarget);\n };\n\n const handleByPackageNameClick = (): void => {\n onChangePalette('package-name');\n handleClose();\n };\n\n const handleByValueClick = (): void => {\n onChangePalette('value');\n handleClose();\n };\n\n const handleClose = (): void => {\n setAnchorEl(null);\n };\n\n const isTableSelected = (): boolean => selectedView === 'table';\n const isFlameGraphSelected = (): boolean => selectedView === 'flame-graph';\n const isBothSelected = (): boolean => selectedView === 'both';\n\n // Update selected view based on the value of showTable and showFlameGraph\n const selectedView: 'table' \| 'flame-graph' \| 'both' \| 'none' = useMemo(() => {\n if (!value.showTable && !value.showFlameGraph) {\n return 'none';\n } else if (value.showTable && value.showFlameGraph) {\n return 'both';\n } else if (value.showTable) {\n return 'table';\n } else {\n return 'flame-graph';\n }\n }, [value.showTable, value.showFlameGraph]);\n\n return (\n <Stack spacing=\"10px\" direction=\"row\" justifyContent=\"center\" alignItems=\"center\">\n {selectedId !== 0 && (\n <InfoTooltip description={TOOLTIP_TEXT.resetFlameGraph}>\n <ToolbarIconButton\n aria-label={TOOLTIP_TEXT.resetFlameGraph}\n onClick={() => onSelectedIdChange(0)}\n color=\"primary\"\n >\n <RefreshIcon fontSize=\"small\" />\n </ToolbarIconButton>\n </InfoTooltip>\n )}\n <Stack>\n <InfoTooltip description={TOOLTIP_TEXT.changeColorSheme}>\n <ToolbarIconButton\n id=\"change-color-sheme-button\"\n aria-label={TOOLTIP_TEXT.changeColorSheme}\n aria-controls={open ? 'change-color-sheme-menu' : undefined}\n aria-haspopup=\"true\"\n aria-expanded={open ? 'true' : undefined}\n onClick={handleChangeColorShemeClick}\n color=\"primary\"\n >\n <PaletteIcon fontSize=\"small\" />\n </ToolbarIconButton>\n </InfoTooltip>\n <Menu\n id=\"change-color-sheme-menu\"\n slotProps={{\n list: { 'aria-labelledby': 'change-color-sheme-button' },\n }}\n anchorEl={anchorEl}\n open={open}\n onClose={handleClose}\n slots={{ transition: Fade }}\n anchorOrigin={{\n vertical: 'bottom',\n horizontal: 'center',\n }}\n transformOrigin={{\n vertical: 'top',\n horizontal: 'center',\n }}\n sx={{\n mt: 1,\n '& .MuiPaper-root': {\n backgroundColor: theme.palette.background.paper,\n padding: '0 5px',\n },\n '& .MuiMenuItem-root:hover': {\n backgroundColor: theme.palette.action.hover,\n },\n }}\n >\n <MenuItem onClick={handleByPackageNameClick} selected={value.palette === 'package-name'}>\n By package name\n </MenuItem>\n <MenuItem onClick={handleByValueClick} selected={value.palette === 'value'}>\n By value\n </MenuItem>\n </Menu>\n </Stack>\n <Stack\n direction=\"row\"\n sx={{\n border: `1px solid ${theme.palette.primary.main}`,\n borderRadius: `${theme.shape.borderRadius}px`,\n padding: '2px',\n }}\n >\n <InfoTooltip description={TOOLTIP_TEXT.showTable}>\n <Button\n variant={isTableSelected() ? 'contained' : 'text'}\n color=\"primary\"\n size=\"small\"\n onClick={() => onDisplayChange('table')}\n sx={customButtonStyle}\n >\n Table\n </Button>\n </InfoTooltip>\n <InfoTooltip description={TOOLTIP_TEXT.showFlameGraph}>\n <Button\n variant={isFlameGraphSelected() ? 'contained' : 'text'}\n color=\"primary\"\n size=\"small\"\n onClick={() => onDisplayChange('flame-graph')}\n sx={customButtonStyle}\n >\n Flame Graph\n </Button>\n </InfoTooltip>\n <InfoTooltip description={TOOLTIP_TEXT.showBoth}>\n <Button\n variant={isBothSelected() ? 'contained' : 'text'}\n color=\"primary\"\n size=\"small\"\n onClick={() => onDisplayChange('both')}\n sx={customButtonStyle}\n >\n Both\n </Button>\n </InfoTooltip>\n </Stack>\n </Stack>\n );\n}\n"],"names":["useState","useMemo","RefreshIcon","PaletteIcon","Stack","Button","useTheme","MenuItem","Menu","Fade","ToolbarIconButton","InfoTooltip","TOOLTIP_TEXT","Settings","props","value","selectedId","onSelectedIdChange","onChangePalette","onDisplayChange","theme","anchorEl","setAnchorEl","open","Boolean","customButtonStyle","fontSize","padding","minWidth","handleChangeColorShemeClick","event","currentTarget","handleByPackageNameClick","handleClose","handleByValueClick","isTableSelected","selectedView","isFlameGraphSelected","isBothSelected","showTable","showFlameGraph","spacing","direction","justifyContent","alignItems","description","resetFlameGraph","aria-label","onClick","color","changeColorSheme","id","aria-controls","undefined","aria-haspopup","aria-expanded","slotProps","list","onClose","slots","transition","anchorOrigin","vertical","horizontal","transformOrigin","sx","mt","backgroundColor","palette","background","paper","action","hover","selected","border","primary","main","borderRadius","shape","variant","size","showBoth"],"mappings":"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"}

package/lib/components/TableChart.js.map CHANGED Viewed

	@@ -1 +1 @@
1	- {"version":3,"sources":["../../../src/components/TableChart.tsx"],"sourcesContent":["// Copyright The Perses Authors\n// Licensed under the Apache License \| Version 2.0 (the \"License\");\n// you may not use this file except in compliance with the License.\n// You may obtain a copy of the License at\n//\n// http://www.apache.org/licenses/LICENSE-2.0\n//\n// Unless required by applicable law or agreed to in writing \| software\n// distributed under the License is distributed on an \"AS IS\" BASIS \|\n// WITHOUT WARRANTIES OR CONDITIONS OF ANY KIND \| either express or implied.\n// See the License for the specific language governing permissions and\n// limitations under the License.\n\nimport { ReactElement, useMemo, useState } from 'react';\nimport { Stack, useTheme, Link } from '@mui/material';\nimport { ProfileData } from '@perses-dev/core';\nimport { Table, TableColumnConfig } from '@perses-dev/components';\nimport { SortingState } from '@tanstack/react-table';\nimport { tableRecursionJson } from '../utils/data-transform';\nimport { TableChartSample } from '../utils/data-model';\nimport { formatItemValue } from '../utils/format';\nimport { SearchBar } from './SearchBar';\n\nconst LARGE_PANEL_TRESHOLD = 600; // heigth treshold to switch to large panel mode\nconst PADDING_TOP = 8;\nconst SCROLL_BAR_WIDTH = 15;\nconst SEARCH_BAR_HEIGHT = 50;\n\nexport interface TableChartProps {\n width: number;\n height: number;\n data: ProfileData;\n searchValue: string;\n onSearchValueChange: (value: string) => void;\n onSelectedIdChange: (id: number) => void;\n}\n\nexport function TableChart(props: TableChartProps): ReactElement {\n const { width, height, data, searchValue, onSearchValueChange, onSelectedIdChange } = props;\n\n const theme = useTheme();\n\n const availableHeight = height;\n const availableWidth = width - 10;\n\n const tableData: TableChartSample[] = useMemo(() => {\n return tableRecursionJson(data.profile.stackTrace, searchValue);\n }, [data, searchValue]);\n\n const columns: Array<TableColumnConfig<unknown>> = useMemo(() => {\n const unit = data.metadata?.units \|\| '';\n\n const columnSettings: Array<TableColumnConfig<unknown>> = [\n {\n accessorKey: 'name',\n header: 'Name',\n headerDescription: 'Function name',\n align: 'left',\n enableSorting: true,\n width: 0.5 * availableWidth,\n cell: (ctx) => {\n const cellValue = ctx.getValue();\n return (\n <Link\n href=\"#\"\n underline=\"hover\"\n onClick={(e) => {\n e.preventDefault();\n const currentSample = ctx.row.original as TableChartSample;\n onSelectedIdChange(currentSample.id); // focus on this item in the flame graph\n onSearchValueChange(currentSample.name);\n }}\n >\n {cellValue}\n </Link>\n );\n },\n cellDescription: () => '',\n },\n {\n accessorKey: 'self',\n header: 'Self',\n headerDescription: 'Function self samples',\n align: 'right',\n enableSorting: true,\n width: 0.25 * availableWidth - SCROLL_BAR_WIDTH,\n cell: (ctx) => {\n const cellValue = ctx.getValue();\n return formatItemValue(unit, cellValue);\n },\n },\n {\n accessorKey: 'total',\n header: 'Total',\n headerDescription: 'Function total samples',\n align: 'right',\n enableSorting: true,\n width: 0.25 * availableWidth,\n cell: (ctx) => {\n const cellValue = ctx.getValue();\n return formatItemValue(unit, cellValue);\n },\n },\n ];\n\n return columnSettings;\n }, [data.metadata?.units, availableWidth, onSearchValueChange, onSelectedIdChange]);\n\n const [sorting, setSorting] = useState<SortingState>([{ id: 'total', desc: true }]);\n\n return (\n <Stack\n width={availableWidth}\n height={availableHeight}\n gap={1}\n sx={{\n '& .MuiTable-root': {\n borderCollapse: 'collapse',\n },\n '& .MuiTableCell-root': {\n borderBottom: `1px solid ${theme.palette.divider}`,\n borderRight: `1px solid ${theme.palette.divider}`,\n '&:last-child': {\n borderRight: 'none',\n },\n },\n }}\n >\n <SearchBar searchValue={searchValue} onSearchValueChange={onSearchValueChange} />\n <Table\n data={tableData}\n columns={columns}\n height={availableHeight - PADDING_TOP - SEARCH_BAR_HEIGHT}\n width={availableWidth}\n density={availableHeight < LARGE_PANEL_TRESHOLD ? 'compact' : 'standard'}\n defaultColumnWidth=\"auto\"\n defaultColumnHeight=\"auto\"\n sorting={sorting}\n onSortingChange={setSorting}\n />\n </Stack>\n );\n}\n"],"names":["useMemo","useState","Stack","useTheme","Link","Table","tableRecursionJson","formatItemValue","SearchBar","LARGE_PANEL_TRESHOLD","PADDING_TOP","SCROLL_BAR_WIDTH","SEARCH_BAR_HEIGHT","TableChart","props","width","height","data","searchValue","onSearchValueChange","onSelectedIdChange","theme","availableHeight","availableWidth","tableData","profile","stackTrace","columns","unit","metadata","units","columnSettings","accessorKey","header","headerDescription","align","enableSorting","cell","ctx","cellValue","getValue","href","underline","onClick","e","preventDefault","currentSample","row","original","id","name","cellDescription","sorting","setSorting","desc","gap","sx","borderCollapse","borderBottom","palette","divider","borderRight","density","defaultColumnWidth","defaultColumnHeight","onSortingChange"],"mappings":";AAAA,+BAA+B;AAC/B,oEAAoE;AACpE,mEAAmE;AACnE,0CAA0C;AAC1C,EAAE;AACF,6CAA6C;AAC7C,EAAE;AACF,wEAAwE;AACxE,qEAAqE;AACrE,6EAA6E;AAC7E,sEAAsE;AACtE,iCAAiC;AAEjC,SAAuBA,OAAO,EAAEC,QAAQ,QAAQ,QAAQ;AACxD,SAASC,KAAK,EAAEC,QAAQ,EAAEC,IAAI,QAAQ,gBAAgB;AAEtD,SAASC,KAAK,QAA2B,yBAAyB;AAElE,SAASC,kBAAkB,QAAQ,0BAA0B;AAE7D,SAASC,eAAe,QAAQ,kBAAkB;AAClD,SAASC,SAAS,QAAQ,cAAc;AAExC,MAAMC,uBAAuB,KAAK,gDAAgD;AAClF,MAAMC,cAAc;AACpB,MAAMC,mBAAmB;AACzB,MAAMC,oBAAoB;AAW1B,OAAO,SAASC,WAAWC,KAAsB;IAC/C,MAAM,EAAEC,KAAK,EAAEC,MAAM,EAAEC,IAAI,EAAEC,WAAW,EAAEC,mBAAmB,EAAEC,kBAAkB,EAAE,GAAGN;IAEtF,MAAMO,QAAQlB;IAEd,MAAMmB,kBAAkBN;IACxB,MAAMO,iBAAiBR,QAAQ;IAE/B,MAAMS,YAAgCxB,QAAQ;QAC5C,OAAOM,mBAAmBW,KAAKQ,OAAO,CAACC,UAAU,EAAER;IACrD,GAAG;QAACD;QAAMC;KAAY;IAEtB,MAAMS,UAA6C3B,QAAQ;QACzD,MAAM4B,OAAOX,KAAKY,QAAQ,EAAEC,SAAS;QAErC,MAAMC,iBAAoD;YACxD;gBACEC,aAAa;gBACbC,QAAQ;gBACRC,mBAAmB;gBACnBC,OAAO;gBACPC,eAAe;gBACfrB,OAAO,MAAMQ;gBACbc,MAAM,CAACC;oBACL,MAAMC,YAAYD,IAAIE,QAAQ;oBAC9B,qBACE,KAACpC;wBACCqC,MAAK;wBACLC,WAAU;wBACVC,SAAS,CAACC;4BACRA,EAAEC,cAAc;4BAChB,MAAMC,gBAAgBR,IAAIS,GAAG,CAACC,QAAQ;4BACtC5B,mBAAmB0B,cAAcG,EAAE,GAAG,wCAAwC;4BAC9E9B,oBAAoB2B,cAAcI,IAAI;wBACxC;kCAECX;;gBAGP;gBACAY,iBAAiB,IAAM;YACzB;YACA;gBACEnB,aAAa;gBACbC,QAAQ;gBACRC,mBAAmB;gBACnBC,OAAO;gBACPC,eAAe;gBACfrB,OAAO,OAAOQ,iBAAiBZ;gBAC/B0B,MAAM,CAACC;oBACL,MAAMC,YAAYD,IAAIE,QAAQ;oBAC9B,OAAOjC,gBAAgBqB,MAAMW;gBAC/B;YACF;YACA;gBACEP,aAAa;gBACbC,QAAQ;gBACRC,mBAAmB;gBACnBC,OAAO;gBACPC,eAAe;gBACfrB,OAAO,OAAOQ;gBACdc,MAAM,CAACC;oBACL,MAAMC,YAAYD,IAAIE,QAAQ;oBAC9B,OAAOjC,gBAAgBqB,MAAMW;gBAC/B;YACF;SACD;QAED,OAAOR;IACT,GAAG;QAACd,KAAKY,QAAQ,EAAEC;QAAOP;QAAgBJ;QAAqBC;KAAmB;IAElF,MAAM,CAACgC,SAASC,WAAW,GAAGpD,SAAuB;QAAC;YAAEgD,IAAI;YAASK,MAAM;QAAK;KAAE;IAElF,qBACE,MAACpD;QACCa,OAAOQ;QACPP,QAAQM;QACRiC,KAAK;QACLC,IAAI;YACF,oBAAoB;gBAClBC,gBAAgB;YAClB;YACA,wBAAwB;gBACtBC,cAAc,CAAC,UAAU,EAAErC,MAAMsC,OAAO,CAACC,OAAO,EAAE;gBAClDC,aAAa,CAAC,UAAU,EAAExC,MAAMsC,OAAO,CAACC,OAAO,EAAE;gBACjD,gBAAgB;oBACdC,aAAa;gBACf;YACF;QACF;;0BAEA,KAACrD;gBAAUU,aAAaA;gBAAaC,qBAAqBA;;0BAC1D,KAACd;gBACCY,MAAMO;gBACNG,SAASA;gBACTX,QAAQM,kBAAkBZ,cAAcE;gBACxCG,OAAOQ;gBACPuC,SAASxC,kBAAkBb,uBAAuB,YAAY;gBAC9DsD,oBAAmB;gBACnBC,qBAAoB;gBACpBZ,SAASA;gBACTa,iBAAiBZ;;;;AAIzB"}
1	+ {"version":3,"sources":["../../../src/components/TableChart.tsx"],"sourcesContent":["// Copyright The Perses Authors\n// Licensed under the Apache License \| Version 2.0 (the \"License\");\n// you may not use this file except in compliance with the License.\n// You may obtain a copy of the License at\n//\n// http://www.apache.org/licenses/LICENSE-2.0\n//\n// Unless required by applicable law or agreed to in writing \| software\n// distributed under the License is distributed on an \"AS IS\" BASIS \|\n// WITHOUT WARRANTIES OR CONDITIONS OF ANY KIND \| either express or implied.\n// See the License for the specific language governing permissions and\n// limitations under the License.\n\nimport { ReactElement, useMemo, useState } from 'react';\nimport { Stack, useTheme, Link } from '@mui/material';\nimport { ProfileData } from '@perses-dev/core';\nimport { Table, TableColumnConfig } from '@perses-dev/components';\nimport { SortingState } from '@tanstack/react-table';\nimport { tableRecursionJson } from '../utils/data-transform';\nimport { TableChartSample } from '../utils/data-model';\nimport { formatItemValue } from '../utils/format';\nimport { SearchBar } from './SearchBar';\n\nconst LARGE_PANEL_TRESHOLD = 600; // heigth treshold to switch to large panel mode\nconst PADDING_TOP = 8;\nconst SCROLL_BAR_WIDTH = 15;\nconst SEARCH_BAR_HEIGHT = 50;\n\nexport interface TableChartProps {\n width: number;\n height: number;\n data: ProfileData;\n searchValue: string;\n onSearchValueChange: (value: string) => void;\n onSelectedIdChange: (id: number) => void;\n}\n\nexport function TableChart(props: TableChartProps): ReactElement {\n const { width, height, data, searchValue, onSearchValueChange, onSelectedIdChange } = props;\n\n const theme = useTheme();\n\n const availableHeight = height;\n const availableWidth = width - 10;\n\n const tableData: TableChartSample[] = useMemo(() => {\n return tableRecursionJson(data.profile.stackTrace, searchValue);\n }, [data, searchValue]);\n\n const columns: Array<TableColumnConfig<unknown>> = useMemo(() => {\n const unit = data.metadata?.units \|\| '';\n\n const columnSettings: Array<TableColumnConfig<unknown>> = [\n {\n accessorKey: 'name',\n header: 'Name',\n headerDescription: 'Function name',\n align: 'left',\n enableSorting: true,\n width: 0.5 * availableWidth,\n cell: (ctx): ReactElement => {\n const cellValue = ctx.getValue();\n return (\n <Link\n href=\"#\"\n underline=\"hover\"\n onClick={(e) => {\n e.preventDefault();\n const currentSample = ctx.row.original as TableChartSample;\n onSelectedIdChange(currentSample.id); // focus on this item in the flame graph\n onSearchValueChange(currentSample.name);\n }}\n >\n {cellValue}\n </Link>\n );\n },\n cellDescription: () => '',\n },\n {\n accessorKey: 'self',\n header: 'Self',\n headerDescription: 'Function self samples',\n align: 'right',\n enableSorting: true,\n width: 0.25 * availableWidth - SCROLL_BAR_WIDTH,\n cell: (ctx): string => {\n const cellValue = ctx.getValue();\n return formatItemValue(unit, cellValue);\n },\n },\n {\n accessorKey: 'total',\n header: 'Total',\n headerDescription: 'Function total samples',\n align: 'right',\n enableSorting: true,\n width: 0.25 * availableWidth,\n cell: (ctx): string => {\n const cellValue = ctx.getValue();\n return formatItemValue(unit, cellValue);\n },\n },\n ];\n\n return columnSettings;\n }, [data.metadata?.units, availableWidth, onSearchValueChange, onSelectedIdChange]);\n\n const [sorting, setSorting] = useState<SortingState>([{ id: 'total', desc: true }]);\n\n return (\n <Stack\n width={availableWidth}\n height={availableHeight}\n gap={1}\n sx={{\n '& .MuiTable-root': {\n borderCollapse: 'collapse',\n },\n '& .MuiTableCell-root': {\n borderBottom: `1px solid ${theme.palette.divider}`,\n borderRight: `1px solid ${theme.palette.divider}`,\n '&:last-child': {\n borderRight: 'none',\n },\n },\n }}\n >\n <SearchBar searchValue={searchValue} onSearchValueChange={onSearchValueChange} />\n <Table\n data={tableData}\n columns={columns}\n height={availableHeight - PADDING_TOP - SEARCH_BAR_HEIGHT}\n width={availableWidth}\n density={availableHeight < LARGE_PANEL_TRESHOLD ? 'compact' : 'standard'}\n defaultColumnWidth=\"auto\"\n defaultColumnHeight=\"auto\"\n sorting={sorting}\n onSortingChange={setSorting}\n />\n </Stack>\n );\n}\n"],"names":["useMemo","useState","Stack","useTheme","Link","Table","tableRecursionJson","formatItemValue","SearchBar","LARGE_PANEL_TRESHOLD","PADDING_TOP","SCROLL_BAR_WIDTH","SEARCH_BAR_HEIGHT","TableChart","props","width","height","data","searchValue","onSearchValueChange","onSelectedIdChange","theme","availableHeight","availableWidth","tableData","profile","stackTrace","columns","unit","metadata","units","columnSettings","accessorKey","header","headerDescription","align","enableSorting","cell","ctx","cellValue","getValue","href","underline","onClick","e","preventDefault","currentSample","row","original","id","name","cellDescription","sorting","setSorting","desc","gap","sx","borderCollapse","borderBottom","palette","divider","borderRight","density","defaultColumnWidth","defaultColumnHeight","onSortingChange"],"mappings":"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"}

package/mf-manifest.json CHANGED Viewed

@@ -5,11 +5,11 @@
     "name": "FlameChart",
     "type": "app",
     "buildInfo": {
-      "buildVersion": "0.5.0",
+      "buildVersion": "0.5.1",
       "buildName": "@perses-dev/flame-chart-plugin"
     },
     "remoteEntry": {
-      "name": "__mf/js/FlameChart.e5753e9e.js",
+      "name": "__mf/js/FlameChart.1166890c.js",
       "path": "",
       "type": "global"
     },
@@ -87,14 +87,14 @@
     {
       "id": "FlameChart:@perses-dev/components",
       "name": "@perses-dev/components",
-      "version": "0.53.0",
+      "version": "0.53.1",
       "singleton": true,
-      "requiredVersion": "^0.53.0",
+      "requiredVersion": "^0.53.1",
       "assets": {
         "js": {
           "async": [],
           "sync": [
-            "__mf/js/async/800.9db0f6e6.js"
+            "__mf/js/async/372.8b193f5e.js"
           ]
         },
         "css": {
@@ -106,14 +106,14 @@
     {
       "id": "FlameChart:@perses-dev/plugin-system",
       "name": "@perses-dev/plugin-system",
-      "version": "0.53.0",
+      "version": "0.53.1",
       "singleton": true,
-      "requiredVersion": "^0.53.0",
+      "requiredVersion": "^0.53.1",
       "assets": {
         "js": {
           "async": [],
           "sync": [
-            "__mf/js/async/648.402a936f.js"
+            "__mf/js/async/634.563ff812.js"
           ]
         },
         "css": {
@@ -247,7 +247,7 @@
           "sync": [
             "__mf/js/async/551.70629715.js",
             "__mf/js/async/482.9649d5bd.js",
-            "__mf/js/async/__federation_expose_FlameChart.e4622bb9.js"
+            "__mf/js/async/__federation_expose_FlameChart.96f61c46.js"
           ],
           "async": [
             "__mf/js/async/588.eb7ff066.js",

package/mf-stats.json CHANGED Viewed

@@ -5,11 +5,11 @@
     "name": "FlameChart",
     "type": "app",
     "buildInfo": {
-      "buildVersion": "0.5.0",
+      "buildVersion": "0.5.1",
       "buildName": "@perses-dev/flame-chart-plugin"
     },
     "remoteEntry": {
-      "name": "__mf/js/FlameChart.e5753e9e.js",
+      "name": "__mf/js/FlameChart.1166890c.js",
       "path": "",
       "type": "global"
     },
@@ -95,17 +95,17 @@
     },
     {
       "singleton": true,
-      "requiredVersion": "^0.53.0",
+      "requiredVersion": "^0.53.1",
       "shareScope": "default",
       "name": "@perses-dev/components",
-      "version": "0.53.0",
+      "version": "0.53.1",
       "eager": false,
       "id": "FlameChart:@perses-dev/components",
       "assets": {
         "js": {
           "async": [],
           "sync": [
-            "__mf/js/async/800.9db0f6e6.js"
+            "__mf/js/async/372.8b193f5e.js"
           ]
         },
         "css": {
@@ -119,17 +119,17 @@
     },
     {
       "singleton": true,
-      "requiredVersion": "^0.53.0",
+      "requiredVersion": "^0.53.1",
       "shareScope": "default",
       "name": "@perses-dev/plugin-system",
-      "version": "0.53.0",
+      "version": "0.53.1",
       "eager": false,
       "id": "FlameChart:@perses-dev/plugin-system",
       "assets": {
         "js": {
           "async": [],
           "sync": [
-            "__mf/js/async/648.402a936f.js"
+            "__mf/js/async/634.563ff812.js"
           ]
         },
         "css": {
@@ -296,7 +296,7 @@
           "sync": [
             "__mf/js/async/551.70629715.js",
             "__mf/js/async/482.9649d5bd.js",
-            "__mf/js/async/__federation_expose_FlameChart.e4622bb9.js"
+            "__mf/js/async/__federation_expose_FlameChart.96f61c46.js"
           ],
           "async": [
             "__mf/js/async/588.eb7ff066.js",

package/package.json CHANGED Viewed

@@ -1,6 +1,6 @@
 {
   "name": "@perses-dev/flame-chart-plugin",
-  "version": "0.5.0",
+  "version": "0.5.1",
   "homepage": "https://github.com/perses/plugins/blob/main/README.md",
   "repository": {
     "type": "git",
@@ -30,9 +30,9 @@
     "@emotion/react": "^11.7.1",
     "@emotion/styled": "^11.6.0",
     "@hookform/resolvers": "^3.2.0",
-    "@perses-dev/components": "^0.53.0",
-    "@perses-dev/core": "^0.53.0-rc.2",
-    "@perses-dev/plugin-system": "^0.53.0",
+    "@perses-dev/components": "^0.53.1",
+    "@perses-dev/core": "^0.53.0",
+    "@perses-dev/plugin-system": "^0.53.1",
     "@tanstack/react-table": "^8.20.5",
     "date-fns": "^4.1.0",
     "date-fns-tz": "^3.2.0",