npm - @perses-dev/flame-chart-plugin - Versions diffs - 0.5.0 → 0.6.0-beta.0 - Mend

@perses-dev/flame-chart-plugin 0.5.0 → 0.6.0-beta.0

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 (200) 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 { PanelProps } from '@perses-dev/plugin-system';\nimport { ProfileData, StackTrace } from '@perses-dev/spec';\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/SeriesChart.d.ts CHANGED Viewed

@@ -1,5 +1,5 @@
 import { ReactElement } from 'react';
-import { ProfileData } from '@perses-dev/core';
+import { ProfileData } from '@perses-dev/spec';
 export interface SeriesChartProps {
     width: number;
     height: number;

package/lib/components/SeriesChart.d.ts.map CHANGED Viewed

	@@ -1 +1 @@
1	- {"version":3,"file":"SeriesChart.d.ts","sourceRoot":"","sources":["../../../src/components/SeriesChart.tsx"],"names":[],"mappings":"AAaA,OAAO,EAAE,YAAY,EAAmB,MAAM,OAAO,CAAC;~~AAEtD~~,OAAO,EAAE,WAAW,EAAY,MAAM,kBAAkB,CAAC;~~AAazD~~,MAAM,WAAW,gBAAgB;IAC/B,KAAK,EAAE,MAAM,CAAC;IACd,MAAM,EAAE,MAAM,CAAC;IACf,IAAI,EAAE,WAAW,CAAC;CACnB;AAED,wBAAgB,WAAW,CAAC,KAAK,EAAE,gBAAgB,GAAG,YAAY,CAgKjE"}
1	+ {"version":3,"file":"SeriesChart.d.ts","sourceRoot":"","sources":["../../../src/components/SeriesChart.tsx"],"names":[],"mappings":"AAaA,OAAO,EAAE,YAAY,EAAmB,MAAM,OAAO,CAAC;AAOtD,OAAO,EAAE,WAAW,EAAY,MAAM,kBAAkB,CAAC;AAQzD,MAAM,WAAW,gBAAgB;IAC/B,KAAK,EAAE,MAAM,CAAC;IACd,MAAM,EAAE,MAAM,CAAC;IACf,IAAI,EAAE,WAAW,CAAC;CACnB;AAED,wBAAgB,WAAW,CAAC,KAAK,EAAE,gBAAgB,GAAG,YAAY,CAgKjE"}

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

	@@ -1 +1 @@
1	- {"version":3,"sources":["../../../src/components/SeriesChart.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, useRef } from 'react';\nimport { Stack, useTheme } from '@mui/material';\nimport { ProfileData, Timeline } from '@perses-dev/core';\nimport { useChartsTheme, EChart, ZoomEventData, OnEventsType, enableDataZoom } from '@perses-dev/components';\nimport { useTimeRange } from '@perses-dev/plugin-system';\nimport type { EChartsCoreOption, LineSeriesOption } from 'echarts';\nimport { ECharts as EChartsInstance } from 'echarts/core';\nimport { CallbackDataParams } from 'echarts/types/dist/shared';\nimport { formatItemValue } from '../utils/format';\nimport { getSeriesTooltip } from '../utils/series-tooltip';\nimport { SeriesSample } from '../utils/data-model';\n\nconst LINE_WIDTH = 1.25;\nconst POINT_SIZE_OFFSET = 2;\n\nexport interface SeriesChartProps {\n width: number;\n height: number;\n data: ProfileData;\n}\n\nexport function SeriesChart(props: SeriesChartProps): ReactElement {\n const { width, height, data } = props;\n\n const chartsTheme = useChartsTheme();\n const theme = useTheme();\n const { setTimeRange } = useTimeRange();\n const chartRef = useRef<EChartsInstance>();\n\n const handleEvents: OnEventsType<LineSeriesOption['data'] \| unknown> = useMemo(() => {\n return {\n datazoom: (params): void => {\n if (params.batch[0] === undefined) return;\n const xAxisStartValue = params.batch?.[0]?.startValue;\n const xAxisEndValue = params.batch?.[0]?.endValue;\n if (xAxisStartValue !== undefined && xAxisEndValue !== undefined) {\n const zoomEvent: ZoomEventData = {\n start: xAxisStartValue,\n end: xAxisEndValue,\n };\n setTimeRange({ start: new Date(zoomEvent.start), end: new Date(zoomEvent.end) });\n }\n },\n finished: (): void => {\n if (chartRef.current !== undefined) {\n enableDataZoom(chartRef.current);\n }\n },\n };\n }, [setTimeRange]);\n\n const seriesData: SeriesSample[] = useMemo(() => {\n const timeLine: Timeline = data.timeline \|\| ({} as Timeline);\n const startTime = timeLine.startTime;\n const durationDelta = timeLine.durationDelta;\n return timeLine.samples.map((sample, index) => ({\n id: index,\n value: [(startTime + index * durationDelta) * 1000, Number(sample)],\n }));\n }, [data.timeline]);\n\n const option: EChartsCoreOption = useMemo(() => {\n const seriesMapping = {\n type: 'line',\n color: theme.palette.primary.main,\n sampling: 'lttb',\n showSymbol: true,\n showAllSymbol: true,\n symbolSize: LINE_WIDTH + POINT_SIZE_OFFSET,\n lineStyle: {\n width: LINE_WIDTH,\n opacity: 0.95,\n },\n areaStyle: {\n opacity: 0,\n },\n data: seriesData,\n };\n\n const timeLine: Timeline = data.timeline \|\| ({} as Timeline);\n\n const option: EChartsCoreOption = {\n series: seriesMapping,\n xAxis: {\n type: 'time',\n min: timeLine.startTime * 1000,\n max: (timeLine.startTime + timeLine.samples.length * timeLine.durationDelta) * 1000,\n axisLabel: {\n hideOverlap: true,\n },\n axisPointer: {\n snap: false, // important so shared crosshair does not lag\n },\n },\n yAxis: {\n type: 'value',\n axisLabel: {\n formatter: (value: number) => {\n return formatItemValue(data.metadata?.units, value);\n },\n },\n },\n animation: false,\n tooltip: {\n show: true,\n showContent: true,\n trigger: 'axis',\n appendToBody: true,\n confine: true,\n backgroundColor: theme.palette.background.paper,\n borderColor: theme.palette.background.paper,\n textStyle: {\n color: theme.palette.text.primary,\n },\n formatter: (params: CallbackDataParams[]) =>\n getSeriesTooltip(\n (params[0]?.data as SeriesSample) \|\| {},\n data.metadata?.units \|\| '',\n data.metadata?.name \|\| '',\n theme.palette.primary.main,\n theme.palette.divider\n ),\n },\n axisPointer: {\n type: 'line',\n z: 0, // ensure point symbol shows on top of dashed line\n triggerEmphasis: true,\n triggerTooltip: false,\n snap: false,\n },\n toolbox: {\n feature: {\n dataZoom: {\n icon: null,\n yAxisIndex: 'none',\n },\n },\n },\n grid: {\n left: 10,\n right: 10,\n top: 10,\n bottom: 10,\n },\n };\n\n return option;\n }, [data.timeline, data.metadata, seriesData, theme]);\n\n const seriesChart = useMemo(\n () => (\n <EChart\n style={{\n width: width,\n height: height,\n }}\n option={option}\n theme={chartsTheme.echartsTheme}\n onEvents={handleEvents}\n _instance={chartRef}\n />\n ),\n [chartsTheme.echartsTheme, height, option, width, handleEvents]\n );\n\n return (\n <Stack\n width={width}\n height={height}\n alignItems=\"center\"\n justifyContent=\"center\"\n onMouseEnter={() => {\n // This is necessary to ensure that the data zoom feature is enabled after the theme is changed.\n if (chartRef.current !== undefined) {\n enableDataZoom(chartRef.current);\n }\n }}\n >\n {seriesChart}\n </Stack>\n );\n}\n"],"names":["useMemo","useRef","Stack","useTheme","useChartsTheme","EChart","enableDataZoom","useTimeRange","formatItemValue","getSeriesTooltip","LINE_WIDTH","POINT_SIZE_OFFSET","SeriesChart","props","width","height","data","chartsTheme","theme","setTimeRange","chartRef","handleEvents","datazoom","params","batch","undefined","xAxisStartValue","startValue","xAxisEndValue","endValue","zoomEvent","start","end","Date","finished","current","seriesData","timeLine","timeline","startTime","durationDelta","samples","map","sample","index","id","value","Number","option","seriesMapping","type","color","palette","primary","main","sampling","showSymbol","showAllSymbol","symbolSize","lineStyle","opacity","areaStyle","series","xAxis","min","max","length","axisLabel","hideOverlap","axisPointer","snap","yAxis","formatter","metadata","units","animation","tooltip","show","showContent","trigger","appendToBody","confine","backgroundColor","background","paper","borderColor","textStyle","text","name","divider","z","triggerEmphasis","triggerTooltip","toolbox","feature","dataZoom","icon","yAxisIndex","grid","left","right","top","bottom","seriesChart","style","echartsTheme","onEvents","_instance","alignItems","justifyContent","onMouseEnter"],"mappings":"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"}
1	+ {"version":3,"sources":["../../../src/components/SeriesChart.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, useRef } from 'react';\nimport { Stack, useTheme } from '@mui/material';\nimport { useChartsTheme, EChart, ZoomEventData, OnEventsType, enableDataZoom } from '@perses-dev/components';\nimport { useTimeRange } from '@perses-dev/plugin-system';\nimport type { EChartsCoreOption, LineSeriesOption } from 'echarts';\nimport { ECharts as EChartsInstance } from 'echarts/core';\nimport { CallbackDataParams } from 'echarts/types/dist/shared';\nimport { ProfileData, Timeline } from '@perses-dev/spec';\nimport { formatItemValue } from '../utils/format';\nimport { getSeriesTooltip } from '../utils/series-tooltip';\nimport { SeriesSample } from '../utils/data-model';\n\nconst LINE_WIDTH = 1.25;\nconst POINT_SIZE_OFFSET = 2;\n\nexport interface SeriesChartProps {\n width: number;\n height: number;\n data: ProfileData;\n}\n\nexport function SeriesChart(props: SeriesChartProps): ReactElement {\n const { width, height, data } = props;\n\n const chartsTheme = useChartsTheme();\n const theme = useTheme();\n const { setTimeRange } = useTimeRange();\n const chartRef = useRef<EChartsInstance>();\n\n const handleEvents: OnEventsType<LineSeriesOption['data'] \| unknown> = useMemo(() => {\n return {\n datazoom: (params): void => {\n if (params.batch[0] === undefined) return;\n const xAxisStartValue = params.batch?.[0]?.startValue;\n const xAxisEndValue = params.batch?.[0]?.endValue;\n if (xAxisStartValue !== undefined && xAxisEndValue !== undefined) {\n const zoomEvent: ZoomEventData = {\n start: xAxisStartValue,\n end: xAxisEndValue,\n };\n setTimeRange({ start: new Date(zoomEvent.start), end: new Date(zoomEvent.end) });\n }\n },\n finished: (): void => {\n if (chartRef.current !== undefined) {\n enableDataZoom(chartRef.current);\n }\n },\n };\n }, [setTimeRange]);\n\n const seriesData: SeriesSample[] = useMemo(() => {\n const timeLine: Timeline = data.timeline \|\| ({} as Timeline);\n const startTime = timeLine.startTime;\n const durationDelta = timeLine.durationDelta;\n return timeLine.samples.map((sample, index) => ({\n id: index,\n value: [(startTime + index * durationDelta) * 1000, Number(sample)],\n }));\n }, [data.timeline]);\n\n const option: EChartsCoreOption = useMemo(() => {\n const seriesMapping = {\n type: 'line',\n color: theme.palette.primary.main,\n sampling: 'lttb',\n showSymbol: true,\n showAllSymbol: true,\n symbolSize: LINE_WIDTH + POINT_SIZE_OFFSET,\n lineStyle: {\n width: LINE_WIDTH,\n opacity: 0.95,\n },\n areaStyle: {\n opacity: 0,\n },\n data: seriesData,\n };\n\n const timeLine: Timeline = data.timeline \|\| ({} as Timeline);\n\n const option: EChartsCoreOption = {\n series: seriesMapping,\n xAxis: {\n type: 'time',\n min: timeLine.startTime * 1000,\n max: (timeLine.startTime + timeLine.samples.length * timeLine.durationDelta) * 1000,\n axisLabel: {\n hideOverlap: true,\n },\n axisPointer: {\n snap: false, // important so shared crosshair does not lag\n },\n },\n yAxis: {\n type: 'value',\n axisLabel: {\n formatter: (value: number) => {\n return formatItemValue(data.metadata?.units, value);\n },\n },\n },\n animation: false,\n tooltip: {\n show: true,\n showContent: true,\n trigger: 'axis',\n appendToBody: true,\n confine: true,\n backgroundColor: theme.palette.background.paper,\n borderColor: theme.palette.background.paper,\n textStyle: {\n color: theme.palette.text.primary,\n },\n formatter: (params: CallbackDataParams[]) =>\n getSeriesTooltip(\n (params[0]?.data as SeriesSample) \|\| {},\n data.metadata?.units \|\| '',\n data.metadata?.name \|\| '',\n theme.palette.primary.main,\n theme.palette.divider\n ),\n },\n axisPointer: {\n type: 'line',\n z: 0, // ensure point symbol shows on top of dashed line\n triggerEmphasis: true,\n triggerTooltip: false,\n snap: false,\n },\n toolbox: {\n feature: {\n dataZoom: {\n icon: null,\n yAxisIndex: 'none',\n },\n },\n },\n grid: {\n left: 10,\n right: 10,\n top: 10,\n bottom: 10,\n },\n };\n\n return option;\n }, [data.timeline, data.metadata, seriesData, theme]);\n\n const seriesChart = useMemo(\n () => (\n <EChart\n style={{\n width: width,\n height: height,\n }}\n option={option}\n theme={chartsTheme.echartsTheme}\n onEvents={handleEvents}\n _instance={chartRef}\n />\n ),\n [chartsTheme.echartsTheme, height, option, width, handleEvents]\n );\n\n return (\n <Stack\n width={width}\n height={height}\n alignItems=\"center\"\n justifyContent=\"center\"\n onMouseEnter={() => {\n // This is necessary to ensure that the data zoom feature is enabled after the theme is changed.\n if (chartRef.current !== undefined) {\n enableDataZoom(chartRef.current);\n }\n }}\n >\n {seriesChart}\n </Stack>\n );\n}\n"],"names":["useMemo","useRef","Stack","useTheme","useChartsTheme","EChart","enableDataZoom","useTimeRange","formatItemValue","getSeriesTooltip","LINE_WIDTH","POINT_SIZE_OFFSET","SeriesChart","props","width","height","data","chartsTheme","theme","setTimeRange","chartRef","handleEvents","datazoom","params","batch","undefined","xAxisStartValue","startValue","xAxisEndValue","endValue","zoomEvent","start","end","Date","finished","current","seriesData","timeLine","timeline","startTime","durationDelta","samples","map","sample","index","id","value","Number","option","seriesMapping","type","color","palette","primary","main","sampling","showSymbol","showAllSymbol","symbolSize","lineStyle","opacity","areaStyle","series","xAxis","min","max","length","axisLabel","hideOverlap","axisPointer","snap","yAxis","formatter","metadata","units","animation","tooltip","show","showContent","trigger","appendToBody","confine","backgroundColor","background","paper","borderColor","textStyle","text","name","divider","z","triggerEmphasis","triggerTooltip","toolbox","feature","dataZoom","icon","yAxisIndex","grid","left","right","top","bottom","seriesChart","style","echartsTheme","onEvents","_instance","alignItems","justifyContent","onMouseEnter"],"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.d.ts CHANGED Viewed

@@ -1,5 +1,5 @@
 import { ReactElement } from 'react';
-import { ProfileData } from '@perses-dev/core';
+import { ProfileData } from '@perses-dev/spec';
 export interface TableChartProps {
     width: number;
     height: number;

package/lib/components/TableChart.d.ts.map CHANGED Viewed

	@@ -1 +1 @@
1	- {"version":3,"file":"TableChart.d.ts","sourceRoot":"","sources":["../../../src/components/TableChart.tsx"],"names":[],"mappings":"AAaA,OAAO,EAAE,YAAY,EAAqB,MAAM,OAAO,CAAC;~~AAExD~~,OAAO,EAAE,WAAW,EAAE,MAAM,kBAAkB,CAAC;~~AAa~~/C,MAAM,WAAW,eAAe;IAC9B,KAAK,EAAE,MAAM,CAAC;IACd,MAAM,EAAE,MAAM,CAAC;IACf,IAAI,EAAE,WAAW,CAAC;IAClB,WAAW,EAAE,MAAM,CAAC;IACpB,mBAAmB,EAAE,CAAC,KAAK,EAAE,MAAM,KAAK,IAAI,CAAC;IAC7C,kBAAkB,EAAE,CAAC,EAAE,EAAE,MAAM,KAAK,IAAI,CAAC;CAC1C;AAED,wBAAgB,UAAU,CAAC,KAAK,EAAE,eAAe,GAAG,YAAY,CAyG/D"}
1	+ {"version":3,"file":"TableChart.d.ts","sourceRoot":"","sources":["../../../src/components/TableChart.tsx"],"names":[],"mappings":"AAaA,OAAO,EAAE,YAAY,EAAqB,MAAM,OAAO,CAAC;AAKxD,OAAO,EAAE,WAAW,EAAE,MAAM,kBAAkB,CAAC;AAW/C,MAAM,WAAW,eAAe;IAC9B,KAAK,EAAE,MAAM,CAAC;IACd,MAAM,EAAE,MAAM,CAAC;IACf,IAAI,EAAE,WAAW,CAAC;IAClB,WAAW,EAAE,MAAM,CAAC;IACpB,mBAAmB,EAAE,CAAC,KAAK,EAAE,MAAM,KAAK,IAAI,CAAC;IAC7C,kBAAkB,EAAE,CAAC,EAAE,EAAE,MAAM,KAAK,IAAI,CAAC;CAC1C;AAED,wBAAgB,UAAU,CAAC,KAAK,EAAE,eAAe,GAAG,YAAY,CAyG/D"}

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';\n\nimport { Table, TableColumnConfig } from '@perses-dev/components';\nimport { SortingState } from '@tanstack/react-table';\nimport { ProfileData } from '@perses-dev/spec';\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":";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;AAGlE,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"}

package/lib/flame-chart-model.d.ts CHANGED Viewed

@@ -1,5 +1,5 @@
-import { Definition } from '@perses-dev/core';
 import { OptionsEditorProps } from '@perses-dev/plugin-system';
+import { Definition } from '@perses-dev/spec';
 /**
  * The schema for a FlameChart panel.
  */

package/lib/flame-chart-model.d.ts.map CHANGED Viewed

	@@ -1 +1 @@
1	- {"version":3,"file":"flame-chart-model.d.ts","sourceRoot":"","sources":["../../src/flame-chart-model.ts"],"names":[],"mappings":"AAaA,OAAO,EAAE,~~UAAU~~,EAAE,MAAM,~~kBAAkB~~,CAAC;~~AAC9C~~,OAAO,EAAE,~~kBAAkB~~,EAAE,MAAM,~~2BAA2B~~,CAAC;~~AAE/D~~;;GAEG;AACH,MAAM,WAAW,oBAAqB,SAAQ,UAAU,CAAC,iBAAiB,CAAC;IACzE,IAAI,EAAE,YAAY,CAAC;CACpB;AAED,MAAM,WAAW,iBAAiB;IAChC,OAAO,EAAE,cAAc,GAAG,OAAO,CAAC;IAClC,YAAY,EAAE,OAAO,CAAC;IACtB,UAAU,EAAE,OAAO,CAAC;IACpB,SAAS,EAAE,OAAO,CAAC;IACnB,cAAc,EAAE,OAAO,CAAC;IACxB,WAAW,CAAC,EAAE,MAAM,CAAC;CACtB;AAED,MAAM,MAAM,4BAA4B,GAAG,kBAAkB,CAAC,iBAAiB,CAAC,CAAC;AAEjF,wBAAgB,8BAA8B,IAAI,iBAAiB,CAQlE"}
1	+ {"version":3,"file":"flame-chart-model.d.ts","sourceRoot":"","sources":["../../src/flame-chart-model.ts"],"names":[],"mappings":"AAaA,OAAO,EAAE,kBAAkB,EAAE,MAAM,2BAA2B,CAAC;AAC/D,OAAO,EAAE,UAAU,EAAE,MAAM,kBAAkB,CAAC;AAE9C;;GAEG;AACH,MAAM,WAAW,oBAAqB,SAAQ,UAAU,CAAC,iBAAiB,CAAC;IACzE,IAAI,EAAE,YAAY,CAAC;CACpB;AAED,MAAM,WAAW,iBAAiB;IAChC,OAAO,EAAE,cAAc,GAAG,OAAO,CAAC;IAClC,YAAY,EAAE,OAAO,CAAC;IACtB,UAAU,EAAE,OAAO,CAAC;IACpB,SAAS,EAAE,OAAO,CAAC;IACnB,cAAc,EAAE,OAAO,CAAC;IACxB,WAAW,CAAC,EAAE,MAAM,CAAC;CACtB;AAED,MAAM,MAAM,4BAA4B,GAAG,kBAAkB,CAAC,iBAAiB,CAAC,CAAC;AAEjF,wBAAgB,8BAA8B,IAAI,iBAAiB,CAQlE"}

package/lib/flame-chart-model.js.map CHANGED Viewed

	@@ -1 +1 @@
1	- {"version":3,"sources":["../../src/flame-chart-model.ts"],"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 { ~~Definition~~ } from '@perses-dev/~~core~~';\nimport { ~~OptionsEditorProps~~ } from '@perses-dev/~~plugin-system~~';\n\n/*\n The schema for a FlameChart panel.\n */\nexport interface FlameChartDefinition extends Definition<FlameChartOptions> {\n kind: 'FlameChart';\n}\n\nexport interface FlameChartOptions {\n palette: 'package-name' \| 'value';\n showSettings: boolean;\n showSeries: boolean;\n showTable: boolean;\n showFlameGraph: boolean;\n traceHeight?: number;\n}\n\nexport type FlameChartOptionsEditorProps = OptionsEditorProps<FlameChartOptions>;\n\nexport function createInitialFlameChartOptions(): FlameChartOptions {\n return {\n palette: 'package-name',\n showSettings: true,\n showSeries: false,\n showTable: true,\n showFlameGraph: true,\n };\n}\n"],"names":["createInitialFlameChartOptions","palette","showSettings","showSeries","showTable","showFlameGraph"],"mappings":"AAAA,+BAA+B;AAC/B,kEAAkE;AAClE,mEAAmE;AACnE,0CAA0C;AAC1C,EAAE;AACF,6CAA6C;AAC7C,EAAE;AACF,sEAAsE;AACtE,oEAAoE;AACpE,2EAA2E;AAC3E,sEAAsE;AACtE,iCAAiC;AAuBjC,OAAO,SAASA;IACd,OAAO;QACLC,SAAS;QACTC,cAAc;QACdC,YAAY;QACZC,WAAW;QACXC,gBAAgB;IAClB;AACF"}
1	+ {"version":3,"sources":["../../src/flame-chart-model.ts"],"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 { OptionsEditorProps } from '@perses-dev/plugin-system';\nimport { Definition } from '@perses-dev/spec';\n\n/*\n The schema for a FlameChart panel.\n */\nexport interface FlameChartDefinition extends Definition<FlameChartOptions> {\n kind: 'FlameChart';\n}\n\nexport interface FlameChartOptions {\n palette: 'package-name' \| 'value';\n showSettings: boolean;\n showSeries: boolean;\n showTable: boolean;\n showFlameGraph: boolean;\n traceHeight?: number;\n}\n\nexport type FlameChartOptionsEditorProps = OptionsEditorProps<FlameChartOptions>;\n\nexport function createInitialFlameChartOptions(): FlameChartOptions {\n return {\n palette: 'package-name',\n showSettings: true,\n showSeries: false,\n showTable: true,\n showFlameGraph: true,\n };\n}\n"],"names":["createInitialFlameChartOptions","palette","showSettings","showSeries","showTable","showFlameGraph"],"mappings":"AAAA,+BAA+B;AAC/B,kEAAkE;AAClE,mEAAmE;AACnE,0CAA0C;AAC1C,EAAE;AACF,6CAA6C;AAC7C,EAAE;AACF,sEAAsE;AACtE,oEAAoE;AACpE,2EAA2E;AAC3E,sEAAsE;AACtE,iCAAiC;AAuBjC,OAAO,SAASA;IACd,OAAO;QACLC,SAAS;QACTC,cAAc;QACdC,YAAY;QACZC,WAAW;QACXC,gBAAgB;IAClB;AACF"}

package/lib/utils/data-transform.d.ts CHANGED Viewed

@@ -1,4 +1,4 @@
-import { ProfileMetaData, StackTrace } from '@perses-dev/core';
+import { ProfileMetaData, StackTrace } from '@perses-dev/spec';
 import { FlameChartSample as Sample, TableChartSample } from './data-model';
 /**
  * Filter the global stacktrace by a function ID to focus on that function and display its corresponding flame chart

package/lib/utils/data-transform.js.map CHANGED Viewed

	@@ -1 +1 @@
1	- {"version":3,"sources":["../../../src/utils/data-transform.ts"],"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 { ProfileMetaData, StackTrace } from '@perses-dev/~~core~~';\nimport { FlameChartSample as Sample, TableChartSample } from './data-model';\nimport { getSpanColor } from './palette-gen';\nimport { formatItemValue } from './format';\n\n/*\n Filter the global stacktrace by a function ID to focus on that function and display its corresponding flame chart\n /\nexport function filterStackTraceById(trace: StackTrace, id: number \| undefined): StackTrace {\n if (id === undefined) {\n return trace;\n }\n\n const recur = (trace: StackTrace, id: number \| undefined): StackTrace \| undefined => {\n if (trace.id === id) {\n return trace;\n }\n\n for (const child of trace.children ?? []) {\n const temp = recur(child, id);\n if (temp) {\n trace = { ...trace }; // Create a shallow copy of the trace to avoid mutating the original object\n // Override parents' values\n trace.children = [temp];\n trace.start = temp.start;\n trace.end = temp.end;\n\n return trace;\n }\n }\n\n return undefined;\n };\n\n return recur(trace, id) ?? trace;\n}\n\n// build the name of the corresponding flamechart item\nfunction formatName(item: StackTrace, rootVal: number, unit: string \| undefined): string {\n return (item.total / rootVal) 100 < 1 ? '' : item.name + ` (${formatItemValue(unit, item.total)})`;\n}\n\n/*\n Search the total value of an item corresponding to a given ID\n /\nfunction getCurrentTotalValue(json: StackTrace, id: number \| undefined): number {\n if (id === undefined) return 0;\n\n const recur = (item: StackTrace): number => {\n if (item.id === id) {\n return item.total;\n }\n\n for (const child of item.children \|\| []) {\n const total = recur(child);\n if (total !== undefined) {\n return total;\n }\n }\n return 0; // If not found, return 0\n };\n\n return recur(json);\n}\n\n/\n Build series data for the flame chart option\n /\nexport function buildSamples(\n palette: string,\n metadata: ProfileMetaData \| undefined,\n traces: StackTrace,\n searchValue: string,\n id?: number\n): Sample[] {\n const data: Sample[] = [];\n const filteredJson = filterStackTraceById(traces, id);\n\n const rootVal = filteredJson.total; // total samples of root node\n const currentVal = getCurrentTotalValue(filteredJson, id); // total samples of the selected item, used to generate items colors\n\n const recur = (item: StackTrace): void => {\n const temp = {\n name: item.id,\n value: [\n item.level,\n item.start,\n item.end,\n formatName(item, currentVal ? currentVal : rootVal, metadata?.units),\n (item.total / rootVal) 100,\n (item.self / rootVal) * 100,\n item.name,\n item.self,\n item.total,\n ],\n itemStyle: {\n color: !isItemNameMatchesSearchFilters(item.name, searchValue)\n ? '#dee2e6'\n : getSpanColor(palette, item.name, (item.total / (currentVal ? currentVal : rootVal)) * 100),\n },\n };\n data.push(temp as Sample);\n\n for (const child of item.children \|\| []) {\n recur(child);\n }\n };\n\n // check is filteredJson is not empty before call recur\n if (filteredJson.id) recur(filteredJson);\n return data;\n}\n\n/*\n Transform query results to a tabular format for the table chart\n /\nexport function tableRecursionJson(jsonObj: StackTrace, searchValue: string): TableChartSample[] {\n const data: TableChartSample[] = [];\n const structuredJson = structuredClone(jsonObj);\n\n const recur = (item: StackTrace): void => {\n const temp = {\n id: item.id,\n name: item.name,\n self: item.self,\n total: item.total,\n };\n\n if (isItemNameMatchesSearchFilters(temp.name, searchValue)) data.push(temp as TableChartSample);\n\n for (const child of item.children \|\| []) {\n recur(child);\n }\n };\n\n // check is structuredJson is not empty before call recur\n if (structuredJson.id) recur(structuredJson);\n return data;\n}\n\n// Checks if an item name matches all parts of a search value.\nfunction isItemNameMatchesSearchFilters(itemName: string, searchValue: string): boolean {\n if (searchValue === '') return true;\n\n const filters = searchValue\n .trim()\n .toLocaleLowerCase()\n .split(/[^a-zA-Z0-9']+/)\n .filter((s) => s !== '');\n\n if (filters.length === 0) {\n return false;\n } else {\n return filters.every((filter) => itemName.toLowerCase().includes(filter.trim()));\n }\n}\n\n/\n Finds the total sample value of the series data item with the specified name.\n /\nexport function findTotalSampleByName(seriesData: Sample[], name: number \| undefined): number \| undefined {\n if (name === undefined \|\| name === 0) return undefined;\n const item = seriesData.find((item) => item.name === name);\n const totalSample = item?.value[8];\n return Number(totalSample);\n}\n\n/\n * Calculate the maximum depth of the stack trace\n */\nexport function getMaxDepth(trace: StackTrace): number {\n if (!trace.children?.length) {\n return 1;\n }\n return 1 + Math.max(...trace.children.map(getMaxDepth));\n}\n"],"names":["getSpanColor","formatItemValue","filterStackTraceById","trace","id","undefined","recur","child","children","temp","start","end","formatName","item","rootVal","unit","total","name","getCurrentTotalValue","json","buildSamples","palette","metadata","traces","searchValue","data","filteredJson","currentVal","value","level","units","self","itemStyle","color","isItemNameMatchesSearchFilters","push","tableRecursionJson","jsonObj","structuredJson","structuredClone","itemName","filters","trim","toLocaleLowerCase","split","filter","s","length","every","toLowerCase","includes","findTotalSampleByName","seriesData","find","totalSample","Number","getMaxDepth","Math","max","map"],"mappings":"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"}
1	+ {"version":3,"sources":["../../../src/utils/data-transform.ts"],"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 { ProfileMetaData, StackTrace } from '@perses-dev/spec';\nimport { FlameChartSample as Sample, TableChartSample } from './data-model';\nimport { getSpanColor } from './palette-gen';\nimport { formatItemValue } from './format';\n\n/*\n Filter the global stacktrace by a function ID to focus on that function and display its corresponding flame chart\n /\nexport function filterStackTraceById(trace: StackTrace, id: number \| undefined): StackTrace {\n if (id === undefined) {\n return trace;\n }\n\n const recur = (trace: StackTrace, id: number \| undefined): StackTrace \| undefined => {\n if (trace.id === id) {\n return trace;\n }\n\n for (const child of trace.children ?? []) {\n const temp = recur(child, id);\n if (temp) {\n trace = { ...trace }; // Create a shallow copy of the trace to avoid mutating the original object\n // Override parents' values\n trace.children = [temp];\n trace.start = temp.start;\n trace.end = temp.end;\n\n return trace;\n }\n }\n\n return undefined;\n };\n\n return recur(trace, id) ?? trace;\n}\n\n// build the name of the corresponding flamechart item\nfunction formatName(item: StackTrace, rootVal: number, unit: string \| undefined): string {\n return (item.total / rootVal) 100 < 1 ? '' : item.name + ` (${formatItemValue(unit, item.total)})`;\n}\n\n/*\n Search the total value of an item corresponding to a given ID\n /\nfunction getCurrentTotalValue(json: StackTrace, id: number \| undefined): number {\n if (id === undefined) return 0;\n\n const recur = (item: StackTrace): number => {\n if (item.id === id) {\n return item.total;\n }\n\n for (const child of item.children \|\| []) {\n const total = recur(child);\n if (total !== undefined) {\n return total;\n }\n }\n return 0; // If not found, return 0\n };\n\n return recur(json);\n}\n\n/\n Build series data for the flame chart option\n /\nexport function buildSamples(\n palette: string,\n metadata: ProfileMetaData \| undefined,\n traces: StackTrace,\n searchValue: string,\n id?: number\n): Sample[] {\n const data: Sample[] = [];\n const filteredJson = filterStackTraceById(traces, id);\n\n const rootVal = filteredJson.total; // total samples of root node\n const currentVal = getCurrentTotalValue(filteredJson, id); // total samples of the selected item, used to generate items colors\n\n const recur = (item: StackTrace): void => {\n const temp = {\n name: item.id,\n value: [\n item.level,\n item.start,\n item.end,\n formatName(item, currentVal ? currentVal : rootVal, metadata?.units),\n (item.total / rootVal) 100,\n (item.self / rootVal) * 100,\n item.name,\n item.self,\n item.total,\n ],\n itemStyle: {\n color: !isItemNameMatchesSearchFilters(item.name, searchValue)\n ? '#dee2e6'\n : getSpanColor(palette, item.name, (item.total / (currentVal ? currentVal : rootVal)) * 100),\n },\n };\n data.push(temp as Sample);\n\n for (const child of item.children \|\| []) {\n recur(child);\n }\n };\n\n // check is filteredJson is not empty before call recur\n if (filteredJson.id) recur(filteredJson);\n return data;\n}\n\n/*\n Transform query results to a tabular format for the table chart\n /\nexport function tableRecursionJson(jsonObj: StackTrace, searchValue: string): TableChartSample[] {\n const data: TableChartSample[] = [];\n const structuredJson = structuredClone(jsonObj);\n\n const recur = (item: StackTrace): void => {\n const temp = {\n id: item.id,\n name: item.name,\n self: item.self,\n total: item.total,\n };\n\n if (isItemNameMatchesSearchFilters(temp.name, searchValue)) data.push(temp as TableChartSample);\n\n for (const child of item.children \|\| []) {\n recur(child);\n }\n };\n\n // check is structuredJson is not empty before call recur\n if (structuredJson.id) recur(structuredJson);\n return data;\n}\n\n// Checks if an item name matches all parts of a search value.\nfunction isItemNameMatchesSearchFilters(itemName: string, searchValue: string): boolean {\n if (searchValue === '') return true;\n\n const filters = searchValue\n .trim()\n .toLocaleLowerCase()\n .split(/[^a-zA-Z0-9']+/)\n .filter((s) => s !== '');\n\n if (filters.length === 0) {\n return false;\n } else {\n return filters.every((filter) => itemName.toLowerCase().includes(filter.trim()));\n }\n}\n\n/\n Finds the total sample value of the series data item with the specified name.\n /\nexport function findTotalSampleByName(seriesData: Sample[], name: number \| undefined): number \| undefined {\n if (name === undefined \|\| name === 0) return undefined;\n const item = seriesData.find((item) => item.name === name);\n const totalSample = item?.value[8];\n return Number(totalSample);\n}\n\n/\n * Calculate the maximum depth of the stack trace\n */\nexport function getMaxDepth(trace: StackTrace): number {\n if (!trace.children?.length) {\n return 1;\n }\n return 1 + Math.max(...trace.children.map(getMaxDepth));\n}\n"],"names":["getSpanColor","formatItemValue","filterStackTraceById","trace","id","undefined","recur","child","children","temp","start","end","formatName","item","rootVal","unit","total","name","getCurrentTotalValue","json","buildSamples","palette","metadata","traces","searchValue","data","filteredJson","currentVal","value","level","units","self","itemStyle","color","isItemNameMatchesSearchFilters","push","tableRecursionJson","jsonObj","structuredJson","structuredClone","itemName","filters","trim","toLocaleLowerCase","split","filter","s","length","every","toLowerCase","includes","findTotalSampleByName","seriesData","find","totalSample","Number","getMaxDepth","Math","max","map"],"mappings":"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"}

package/lib/utils/format.d.ts.map CHANGED Viewed

	@@ -1 +1 @@
1	- {"version":3,"file":"format.d.ts","sourceRoot":"","sources":["../../../src/utils/format.ts"],"names":[],"mappings":"~~AAeA~~,wBAAgB,kBAAkB,CAAC,KAAK,EAAE,MAAM,GAAG,MAAM,CASxD;AAED,wBAAgB,eAAe,CAAC,IAAI,EAAE,MAAM,GAAG,SAAS,EAAE,KAAK,EAAE,MAAM,GAAG,MAAM,CAuB/E"}
1	+ {"version":3,"file":"format.d.ts","sourceRoot":"","sources":["../../../src/utils/format.ts"],"names":[],"mappings":"AAgBA,wBAAgB,kBAAkB,CAAC,KAAK,EAAE,MAAM,GAAG,MAAM,CASxD;AAED,wBAAgB,eAAe,CAAC,IAAI,EAAE,MAAM,GAAG,SAAS,EAAE,KAAK,EAAE,MAAM,GAAG,MAAM,CAuB/E"}

package/lib/utils/format.js CHANGED Viewed

@@ -10,7 +10,8 @@
 // WITHOUT WARRANTIES OR CONDITIONS OF ANY KIND, either express or implied.
 // See the License for the specific language governing permissions and
 // limitations under the License.
-import { msToPrometheusDuration, formatDuration, formatValue } from '@perses-dev/core';
+import { formatValue } from '@perses-dev/components';
+import { convertTimeToDuration, formatDuration } from '@perses-dev/spec';
 export function formatNanoDuration(value) {
     // The value to format is in nanoseconds
     if (value < 1_000) {
@@ -26,7 +27,7 @@ export function formatNanoDuration(value) {
             shortValues: true
         }) + 'μs';
     } else {
-        return formatDuration(msToPrometheusDuration(value / 1_000_000));
+        return formatDuration(convertTimeToDuration(value / 1_000_000));
     }
 }
 export function formatItemValue(unit, value) {

package/lib/utils/format.js.map CHANGED Viewed

	@@ -1 +1 @@
1	- {"version":3,"sources":["../../../src/utils/format.ts"],"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 { ~~msToPrometheusDuration~~, formatDuration, ~~formatValue~~ } from '@perses-dev/~~core~~';\n\nexport function formatNanoDuration(value: number): string {\n // The value to format is in nanoseconds\n if (value < 1_000) {\n return formatValue(value, { unit: 'decimal', decimalPlaces: 2, shortValues: true }) + 'ns';\n } else if (value < 1_000_000) {\n return formatValue(value / 1_000, { unit: 'decimal', decimalPlaces: 2, shortValues: true }) + 'μs';\n } else {\n return formatDuration(~~msToPrometheusDuration~~(value / 1_000_000));\n }\n}\n\nexport function formatItemValue(unit: string \| undefined, value: number): string {\n let valueWithUnit = '';\n switch (unit) {\n case 'count':\n valueWithUnit = formatValue(value, { unit: 'decimal', decimalPlaces: 2, shortValues: true });\n break;\n case 'samples':\n valueWithUnit = formatValue(value, { unit: 'decimal', decimalPlaces: 2, shortValues: true });\n break;\n case 'objects':\n valueWithUnit = formatValue(value, { unit: 'decimal', decimalPlaces: 2, shortValues: true });\n break;\n case 'bytes':\n valueWithUnit = formatValue(value, { unit: 'bytes' });\n break;\n case 'nanoseconds':\n valueWithUnit = formatNanoDuration(value);\n break;\n default:\n valueWithUnit = `${value} ${unit}`;\n break;\n }\n return valueWithUnit;\n}\n"],"names":["~~msToPrometheusDuration~~","~~formatDuration~~","~~formatValue~~","formatNanoDuration","value","unit","decimalPlaces","shortValues","formatItemValue","valueWithUnit"],"mappings":"AAAA,+BAA+B;AAC/B,kEAAkE;AAClE,mEAAmE;AACnE,0CAA0C;AAC1C,EAAE;AACF,6CAA6C;AAC7C,EAAE;AACF,sEAAsE;AACtE,oEAAoE;AACpE,2EAA2E;AAC3E,sEAAsE;AACtE,iCAAiC;AAEjC,SAASA,~~sBAAsB~~,~~EAAEC~~,~~cAAc~~,EAAEC,~~WAAW~~,QAAQ,mBAAmB;~~AAEvF~~,OAAO,SAASC,mBAAmBC,KAAa;IAC9C,wCAAwC;IACxC,IAAIA,QAAQ,OAAO;QACjB,~~OAAOF~~,~~YAAYE~~,OAAO;YAAEC,MAAM;YAAWC,eAAe;YAAGC,aAAa;QAAK,KAAK;IACxF,OAAO,IAAIH,QAAQ,WAAW;QAC5B,~~OAAOF~~,~~YAAYE~~,QAAQ,OAAO;YAAEC,MAAM;YAAWC,eAAe;YAAGC,aAAa;QAAK,KAAK;IAChG,OAAO;QACL,~~OAAON~~,eAAeD,~~uBAAuBI~~,QAAQ;~~IACvD~~;AACF;AAEA,OAAO,SAASI,gBAAgBH,IAAwB,EAAED,KAAa;IACrE,IAAIK,gBAAgB;IACpB,OAAQJ;QACN,KAAK;YACHI,~~gBAAgBP~~,~~YAAYE~~,OAAO;gBAAEC,MAAM;gBAAWC,eAAe;gBAAGC,aAAa;YAAK;YAC1F;QACF,KAAK;YACHE,~~gBAAgBP~~,~~YAAYE~~,OAAO;gBAAEC,MAAM;gBAAWC,eAAe;gBAAGC,aAAa;YAAK;YAC1F;QACF,KAAK;YACHE,~~gBAAgBP~~,~~YAAYE~~,OAAO;gBAAEC,MAAM;gBAAWC,eAAe;gBAAGC,aAAa;YAAK;YAC1F;QACF,KAAK;YACHE,~~gBAAgBP~~,~~YAAYE~~,OAAO;gBAAEC,MAAM;YAAQ;YACnD;QACF,KAAK;YACHI,gBAAgBN,mBAAmBC;YACnC;QACF;YACEK,gBAAgB,GAAGL,MAAM,CAAC,EAAEC,MAAM;YAClC;IACJ;IACA,OAAOI;AACT"}
1	+ {"version":3,"sources":["../../../src/utils/format.ts"],"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 { formatValue } from '@perses-dev/components';\nimport { convertTimeToDuration, formatDuration } from '@perses-dev/spec';\n\nexport function formatNanoDuration(value: number): string {\n // The value to format is in nanoseconds\n if (value < 1_000) {\n return formatValue(value, { unit: 'decimal', decimalPlaces: 2, shortValues: true }) + 'ns';\n } else if (value < 1_000_000) {\n return formatValue(value / 1_000, { unit: 'decimal', decimalPlaces: 2, shortValues: true }) + 'μs';\n } else {\n return formatDuration(convertTimeToDuration(value / 1_000_000));\n }\n}\n\nexport function formatItemValue(unit: string \| undefined, value: number): string {\n let valueWithUnit = '';\n switch (unit) {\n case 'count':\n valueWithUnit = formatValue(value, { unit: 'decimal', decimalPlaces: 2, shortValues: true });\n break;\n case 'samples':\n valueWithUnit = formatValue(value, { unit: 'decimal', decimalPlaces: 2, shortValues: true });\n break;\n case 'objects':\n valueWithUnit = formatValue(value, { unit: 'decimal', decimalPlaces: 2, shortValues: true });\n break;\n case 'bytes':\n valueWithUnit = formatValue(value, { unit: 'bytes' });\n break;\n case 'nanoseconds':\n valueWithUnit = formatNanoDuration(value);\n break;\n default:\n valueWithUnit = `${value} ${unit}`;\n break;\n }\n return valueWithUnit;\n}\n"],"names":["formatValue","convertTimeToDuration","formatDuration","formatNanoDuration","value","unit","decimalPlaces","shortValues","formatItemValue","valueWithUnit"],"mappings":"AAAA,+BAA+B;AAC/B,kEAAkE;AAClE,mEAAmE;AACnE,0CAA0C;AAC1C,EAAE;AACF,6CAA6C;AAC7C,EAAE;AACF,sEAAsE;AACtE,oEAAoE;AACpE,2EAA2E;AAC3E,sEAAsE;AACtE,iCAAiC;AAEjC,SAASA,WAAW,QAAQ,yBAAyB;AACrD,SAASC,qBAAqB,EAAEC,cAAc,QAAQ,mBAAmB;AAEzE,OAAO,SAASC,mBAAmBC,KAAa;IAC9C,wCAAwC;IACxC,IAAIA,QAAQ,OAAO;QACjB,OAAOJ,YAAYI,OAAO;YAAEC,MAAM;YAAWC,eAAe;YAAGC,aAAa;QAAK,KAAK;IACxF,OAAO,IAAIH,QAAQ,WAAW;QAC5B,OAAOJ,YAAYI,QAAQ,OAAO;YAAEC,MAAM;YAAWC,eAAe;YAAGC,aAAa;QAAK,KAAK;IAChG,OAAO;QACL,OAAOL,eAAeD,sBAAsBG,QAAQ;IACtD;AACF;AAEA,OAAO,SAASI,gBAAgBH,IAAwB,EAAED,KAAa;IACrE,IAAIK,gBAAgB;IACpB,OAAQJ;QACN,KAAK;YACHI,gBAAgBT,YAAYI,OAAO;gBAAEC,MAAM;gBAAWC,eAAe;gBAAGC,aAAa;YAAK;YAC1F;QACF,KAAK;YACHE,gBAAgBT,YAAYI,OAAO;gBAAEC,MAAM;gBAAWC,eAAe;gBAAGC,aAAa;YAAK;YAC1F;QACF,KAAK;YACHE,gBAAgBT,YAAYI,OAAO;gBAAEC,MAAM;gBAAWC,eAAe;gBAAGC,aAAa;YAAK;YAC1F;QACF,KAAK;YACHE,gBAAgBT,YAAYI,OAAO;gBAAEC,MAAM;YAAQ;YACnD;QACF,KAAK;YACHI,gBAAgBN,mBAAmBC;YACnC;QACF;YACEK,gBAAgB,GAAGL,MAAM,CAAC,EAAEC,MAAM;YAClC;IACJ;IACA,OAAOI;AACT"}