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

package/lib/cjs/index-federation.js

@@ -40,7 +40,7 @@ function _interop_require_wildcard(obj, nodeInterop) {
     }
     return newObj;
 }
-// Copyright 2025 The Perses Authors
+// Copyright The Perses Authors
 // Licensed under the Apache License, Version 2.0 (the "License");
 // you may not use this file except in compliance with the License.
 // You may obtain a copy of the License at

package/lib/cjs/index.js

@@ -1,4 +1,4 @@
-// Copyright 2025 The Perses Authors
+// Copyright The Perses Authors
 // Licensed under the Apache License, Version 2.0 (the "License");
 // you may not use this file except in compliance with the License.
 // You may obtain a copy of the License at

package/lib/cjs/setup-tests.js

@@ -1,4 +1,4 @@
-// Copyright 2023 The Perses Authors
+// Copyright The Perses Authors
 // Licensed under the Apache License, Version 2.0 (the "License");
 // you may not use this file except in compliance with the License.
 // You may obtain a copy of the License at

package/lib/cjs/utils/data-model.js

@@ -1,4 +1,4 @@
-// Copyright 2025 The Perses Authors
+// Copyright The Perses Authors
 // Licensed under the Apache License, Version 2.0 (the "License");
 // you may not use this file except in compliance with the License.
 // You may obtain a copy of the License at

package/lib/cjs/utils/data-transform.js

@@ -1,4 +1,4 @@
-// Copyright 2025 The Perses Authors
+// Copyright The Perses Authors
 // Licensed under the Apache License, Version 2.0 (the "License");
 // you may not use this file except in compliance with the License.
 // You may obtain a copy of the License at

package/lib/cjs/utils/format.js

@@ -1,4 +1,4 @@
-// Copyright 2025 The Perses Authors
+// Copyright The Perses Authors
 // Licensed under the Apache License, Version 2.0 (the "License");
 // you may not use this file except in compliance with the License.
 // You may obtain a copy of the License at

package/lib/cjs/utils/palette-gen.js

@@ -1,4 +1,4 @@
-// Copyright 2025 The Perses Authors
+// Copyright The Perses Authors
 // Licensed under the Apache License, Version 2.0 (the "License");
 // you may not use this file except in compliance with the License.
 // You may obtain a copy of the License at

package/lib/cjs/utils/palette.js

@@ -1,4 +1,4 @@
-// Copyright 2025 The Perses Authors
+// Copyright The Perses Authors
 // Licensed under the Apache License, Version 2.0 (the "License");
 // you may not use this file except in compliance with the License.
 // You may obtain a copy of the License at

package/lib/cjs/utils/series-tooltip.js

@@ -1,4 +1,4 @@
-// Copyright 2025 The Perses Authors
+// Copyright The Perses Authors
 // Licensed under the Apache License, Version 2.0 (the "License");
 // you may not use this file except in compliance with the License.
 // You may obtain a copy of the License at

package/lib/cjs/utils/tooltip.js

@@ -1,4 +1,4 @@
-// Copyright 2025 The Perses Authors
+// Copyright The Perses Authors
 // Licensed under the Apache License, Version 2.0 (the "License");
 // you may not use this file except in compliance with the License.
 // You may obtain a copy of the License at

package/lib/cjs/utils/ui-text.js

@@ -1,4 +1,4 @@
-// Copyright 2025 The Perses Authors
+// Copyright The Perses Authors
 // Licensed under the Apache License, Version 2.0 (the "License");
 // you may not use this file except in compliance with the License.
 // You may obtain a copy of the License at

package/lib/cjs/utils/utils.js

@@ -1,4 +1,4 @@
-// Copyright 2025 The Perses Authors
+// Copyright The Perses Authors
 // Licensed under the Apache License, Version 2.0 (the "License");
 // you may not use this file except in compliance with the License.
 // You may obtain a copy of the License at

package/lib/components/CustomBreadcrumb.js

@@ -1,4 +1,4 @@
-// Copyright 2025 The Perses Authors
+// Copyright The Perses Authors
 // Licensed under the Apache License |  Version 2.0 (the "License");
 // you may not use this file except in compliance with the License.
 // You may obtain a copy of the License at

package/lib/components/CustomBreadcrumb.js.map

@@ -1 +1 @@
-{"version":3,"sources":["../../../src/components/CustomBreadcrumb.tsx"],"sourcesContent":["// Copyright 2025 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 } from 'react';\nimport { Stack, Breadcrumbs } from '@mui/material';\nimport ChevronRightIcon from 'mdi-material-ui/ChevronRight';\nimport EyeIcon from 'mdi-material-ui/EyeOutline';\nimport CloseIcon from 'mdi-material-ui/Close';\nimport Chip from '@mui/material/Chip';\nimport { emphasize, styled } from '@mui/material/styles';\nimport { formatValue } from '@perses-dev/core';\n\nexport interface CustomBreadcrumbProps {\n  totalValue: string;\n  totalSample: number;\n  otherItemSample: number | undefined;\n  onSelectedIdChange: (newId: number) => void;\n}\n\nconst StyledBreadcrumb = styled(Chip)(({ theme }) => {\n  const backgroundColor = theme.palette.mode === 'light' ? theme.palette.grey[100] : theme.palette.grey[800];\n  return {\n    backgroundColor,\n    height: theme.spacing(3),\n    color: theme.palette.text.primary,\n    fontWeight: theme.typography.fontWeightRegular,\n    '&:hover, &:focus': {\n      backgroundColor: emphasize(backgroundColor, 0.06),\n    },\n    '&:active': {\n      boxShadow: theme.shadows[1],\n      backgroundColor: emphasize(backgroundColor, 0.12),\n    },\n  };\n});\n\nexport function CustomBreadcrumb(props: CustomBreadcrumbProps): ReactElement {\n  const { totalValue, totalSample, otherItemSample, onSelectedIdChange } = props;\n\n  const handleClick = (event: React.MouseEvent<Element, MouseEvent>) => {\n    event.preventDefault();\n    onSelectedIdChange(0);\n  };\n\n  const splitedValue = totalValue.split('(');\n  const totalValueText = splitedValue[splitedValue.length - 1]?.slice(0, -1);\n\n  const totalLabel = formatValue(totalSample, { unit: 'decimal', decimalPlaces: 2, shortValues: true }) + ' samples';\n\n  return (\n    <Stack direction=\"row\" spacing={1} minHeight={40} alignItems=\"center\">\n      <Breadcrumbs\n        separator={<ChevronRightIcon fontSize=\"small\" />}\n        aria-label=\"breadcrumb\"\n        sx={{ justifyContent: 'center' }}\n      >\n        <StyledBreadcrumb label={totalValueText + '  |  ' + totalLabel} />\n        {otherItemSample !== undefined && (\n          <StyledBreadcrumb\n            label={((otherItemSample / totalSample) * 100).toFixed(2) + '% of total'}\n            icon={<EyeIcon fontSize=\"small\" color=\"secondary\" />}\n            deleteIcon={<CloseIcon fontSize=\"small\" />}\n            onDelete={handleClick}\n          />\n        )}\n      </Breadcrumbs>\n    </Stack>\n  );\n}\n"],"names":["Stack","Breadcrumbs","ChevronRightIcon","EyeIcon","CloseIcon","Chip","emphasize","styled","formatValue","StyledBreadcrumb","theme","backgroundColor","palette","mode","grey","height","spacing","color","text","primary","fontWeight","typography","fontWeightRegular","boxShadow","shadows","CustomBreadcrumb","props","totalValue","totalSample","otherItemSample","onSelectedIdChange","handleClick","event","preventDefault","splitedValue","split","totalValueText","length","slice","totalLabel","unit","decimalPlaces","shortValues","direction","minHeight","alignItems","separator","fontSize","aria-label","sx","justifyContent","label","undefined","toFixed","icon","deleteIcon","onDelete"],"mappings":"AAAA,oCAAoC;AACpC,oEAAoE;AACpE,mEAAmE;AACnE,0CAA0C;AAC1C,EAAE;AACF,6CAA6C;AAC7C,EAAE;AACF,wEAAwE;AACxE,qEAAqE;AACrE,6EAA6E;AAC7E,sEAAsE;AACtE,iCAAiC;;AAGjC,SAASA,KAAK,EAAEC,WAAW,QAAQ,gBAAgB;AACnD,OAAOC,sBAAsB,+BAA+B;AAC5D,OAAOC,aAAa,6BAA6B;AACjD,OAAOC,eAAe,wBAAwB;AAC9C,OAAOC,UAAU,qBAAqB;AACtC,SAASC,SAAS,EAAEC,MAAM,QAAQ,uBAAuB;AACzD,SAASC,WAAW,QAAQ,mBAAmB;AAS/C,MAAMC,mBAAmBF,OAAOF,MAAM,CAAC,EAAEK,KAAK,EAAE;IAC9C,MAAMC,kBAAkBD,MAAME,OAAO,CAACC,IAAI,KAAK,UAAUH,MAAME,OAAO,CAACE,IAAI,CAAC,IAAI,GAAGJ,MAAME,OAAO,CAACE,IAAI,CAAC,IAAI;IAC1G,OAAO;QACLH;QACAI,QAAQL,MAAMM,OAAO,CAAC;QACtBC,OAAOP,MAAME,OAAO,CAACM,IAAI,CAACC,OAAO;QACjCC,YAAYV,MAAMW,UAAU,CAACC,iBAAiB;QAC9C,oBAAoB;YAClBX,iBAAiBL,UAAUK,iBAAiB;QAC9C;QACA,YAAY;YACVY,WAAWb,MAAMc,OAAO,CAAC,EAAE;YAC3Bb,iBAAiBL,UAAUK,iBAAiB;QAC9C;IACF;AACF;AAEA,OAAO,SAASc,iBAAiBC,KAA4B;IAC3D,MAAM,EAAEC,UAAU,EAAEC,WAAW,EAAEC,eAAe,EAAEC,kBAAkB,EAAE,GAAGJ;IAEzE,MAAMK,cAAc,CAACC;QACnBA,MAAMC,cAAc;QACpBH,mBAAmB;IACrB;IAEA,MAAMI,eAAeP,WAAWQ,KAAK,CAAC;IACtC,MAAMC,iBAAiBF,YAAY,CAACA,aAAaG,MAAM,GAAG,EAAE,EAAEC,MAAM,GAAG,CAAC;IAExE,MAAMC,aAAa/B,YAAYoB,aAAa;QAAEY,MAAM;QAAWC,eAAe;QAAGC,aAAa;IAAK,KAAK;IAExG,qBACE,KAAC1C;QAAM2C,WAAU;QAAM3B,SAAS;QAAG4B,WAAW;QAAIC,YAAW;kBAC3D,cAAA,MAAC5C;YACC6C,yBAAW,KAAC5C;gBAAiB6C,UAAS;;YACtCC,cAAW;YACXC,IAAI;gBAAEC,gBAAgB;YAAS;;8BAE/B,KAACzC;oBAAiB0C,OAAOf,iBAAiB,UAAUG;;gBACnDV,oBAAoBuB,2BACnB,KAAC3C;oBACC0C,OAAO,AAAC,CAAA,AAACtB,kBAAkBD,cAAe,GAAE,EAAGyB,OAAO,CAAC,KAAK;oBAC5DC,oBAAM,KAACnD;wBAAQ4C,UAAS;wBAAQ9B,OAAM;;oBACtCsC,0BAAY,KAACnD;wBAAU2C,UAAS;;oBAChCS,UAAUzB;;;;;AAMtB"}
+{"version":3,"sources":["../../../src/components/CustomBreadcrumb.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 } from 'react';\nimport { Stack, Breadcrumbs } from '@mui/material';\nimport ChevronRightIcon from 'mdi-material-ui/ChevronRight';\nimport EyeIcon from 'mdi-material-ui/EyeOutline';\nimport CloseIcon from 'mdi-material-ui/Close';\nimport Chip from '@mui/material/Chip';\nimport { emphasize, styled } from '@mui/material/styles';\nimport { formatValue } from '@perses-dev/core';\n\nexport interface CustomBreadcrumbProps {\n  totalValue: string;\n  totalSample: number;\n  otherItemSample: number | undefined;\n  onSelectedIdChange: (newId: number) => void;\n}\n\nconst StyledBreadcrumb = styled(Chip)(({ theme }) => {\n  const backgroundColor = theme.palette.mode === 'light' ? theme.palette.grey[100] : theme.palette.grey[800];\n  return {\n    backgroundColor,\n    height: theme.spacing(3),\n    color: theme.palette.text.primary,\n    fontWeight: theme.typography.fontWeightRegular,\n    '&:hover, &:focus': {\n      backgroundColor: emphasize(backgroundColor, 0.06),\n    },\n    '&:active': {\n      boxShadow: theme.shadows[1],\n      backgroundColor: emphasize(backgroundColor, 0.12),\n    },\n  };\n});\n\nexport function CustomBreadcrumb(props: CustomBreadcrumbProps): ReactElement {\n  const { totalValue, totalSample, otherItemSample, onSelectedIdChange } = props;\n\n  const handleClick = (event: React.MouseEvent<Element, MouseEvent>) => {\n    event.preventDefault();\n    onSelectedIdChange(0);\n  };\n\n  const splitedValue = totalValue.split('(');\n  const totalValueText = splitedValue[splitedValue.length - 1]?.slice(0, -1);\n\n  const totalLabel = formatValue(totalSample, { unit: 'decimal', decimalPlaces: 2, shortValues: true }) + ' samples';\n\n  return (\n    <Stack direction=\"row\" spacing={1} minHeight={40} alignItems=\"center\">\n      <Breadcrumbs\n        separator={<ChevronRightIcon fontSize=\"small\" />}\n        aria-label=\"breadcrumb\"\n        sx={{ justifyContent: 'center' }}\n      >\n        <StyledBreadcrumb label={totalValueText + '  |  ' + totalLabel} />\n        {otherItemSample !== undefined && (\n          <StyledBreadcrumb\n            label={((otherItemSample / totalSample) * 100).toFixed(2) + '% of total'}\n            icon={<EyeIcon fontSize=\"small\" color=\"secondary\" />}\n            deleteIcon={<CloseIcon fontSize=\"small\" />}\n            onDelete={handleClick}\n          />\n        )}\n      </Breadcrumbs>\n    </Stack>\n  );\n}\n"],"names":["Stack","Breadcrumbs","ChevronRightIcon","EyeIcon","CloseIcon","Chip","emphasize","styled","formatValue","StyledBreadcrumb","theme","backgroundColor","palette","mode","grey","height","spacing","color","text","primary","fontWeight","typography","fontWeightRegular","boxShadow","shadows","CustomBreadcrumb","props","totalValue","totalSample","otherItemSample","onSelectedIdChange","handleClick","event","preventDefault","splitedValue","split","totalValueText","length","slice","totalLabel","unit","decimalPlaces","shortValues","direction","minHeight","alignItems","separator","fontSize","aria-label","sx","justifyContent","label","undefined","toFixed","icon","deleteIcon","onDelete"],"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;;AAGjC,SAASA,KAAK,EAAEC,WAAW,QAAQ,gBAAgB;AACnD,OAAOC,sBAAsB,+BAA+B;AAC5D,OAAOC,aAAa,6BAA6B;AACjD,OAAOC,eAAe,wBAAwB;AAC9C,OAAOC,UAAU,qBAAqB;AACtC,SAASC,SAAS,EAAEC,MAAM,QAAQ,uBAAuB;AACzD,SAASC,WAAW,QAAQ,mBAAmB;AAS/C,MAAMC,mBAAmBF,OAAOF,MAAM,CAAC,EAAEK,KAAK,EAAE;IAC9C,MAAMC,kBAAkBD,MAAME,OAAO,CAACC,IAAI,KAAK,UAAUH,MAAME,OAAO,CAACE,IAAI,CAAC,IAAI,GAAGJ,MAAME,OAAO,CAACE,IAAI,CAAC,IAAI;IAC1G,OAAO;QACLH;QACAI,QAAQL,MAAMM,OAAO,CAAC;QACtBC,OAAOP,MAAME,OAAO,CAACM,IAAI,CAACC,OAAO;QACjCC,YAAYV,MAAMW,UAAU,CAACC,iBAAiB;QAC9C,oBAAoB;YAClBX,iBAAiBL,UAAUK,iBAAiB;QAC9C;QACA,YAAY;YACVY,WAAWb,MAAMc,OAAO,CAAC,EAAE;YAC3Bb,iBAAiBL,UAAUK,iBAAiB;QAC9C;IACF;AACF;AAEA,OAAO,SAASc,iBAAiBC,KAA4B;IAC3D,MAAM,EAAEC,UAAU,EAAEC,WAAW,EAAEC,eAAe,EAAEC,kBAAkB,EAAE,GAAGJ;IAEzE,MAAMK,cAAc,CAACC;QACnBA,MAAMC,cAAc;QACpBH,mBAAmB;IACrB;IAEA,MAAMI,eAAeP,WAAWQ,KAAK,CAAC;IACtC,MAAMC,iBAAiBF,YAAY,CAACA,aAAaG,MAAM,GAAG,EAAE,EAAEC,MAAM,GAAG,CAAC;IAExE,MAAMC,aAAa/B,YAAYoB,aAAa;QAAEY,MAAM;QAAWC,eAAe;QAAGC,aAAa;IAAK,KAAK;IAExG,qBACE,KAAC1C;QAAM2C,WAAU;QAAM3B,SAAS;QAAG4B,WAAW;QAAIC,YAAW;kBAC3D,cAAA,MAAC5C;YACC6C,yBAAW,KAAC5C;gBAAiB6C,UAAS;;YACtCC,cAAW;YACXC,IAAI;gBAAEC,gBAAgB;YAAS;;8BAE/B,KAACzC;oBAAiB0C,OAAOf,iBAAiB,UAAUG;;gBACnDV,oBAAoBuB,2BACnB,KAAC3C;oBACC0C,OAAO,AAAC,CAAA,AAACtB,kBAAkBD,cAAe,GAAE,EAAGyB,OAAO,CAAC,KAAK;oBAC5DC,oBAAM,KAACnD;wBAAQ4C,UAAS;wBAAQ9B,OAAM;;oBACtCsC,0BAAY,KAACnD;wBAAU2C,UAAS;;oBAChCS,UAAUzB;;;;;AAMtB"}

package/lib/components/FlameChart.js

@@ -1,4 +1,4 @@
-// Copyright 2025 The Perses Authors
+// Copyright The Perses Authors
 // Licensed under the Apache License, Version 2.0 (the "License");
 // you may not use this file except in compliance with the License.
 // You may obtain a copy of the License at

package/lib/components/FlameChart.js.map

@@ -1 +1 @@
-{"version":3,"sources":["../../../src/components/FlameChart.tsx"],"sourcesContent":["// Copyright 2025 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 {\n  CustomSeriesRenderItem,\n  CustomSeriesRenderItemAPI,\n  CustomSeriesRenderItemParams,\n  CustomSeriesRenderItemReturn,\n} from 'echarts';\nimport { Stack, Box, Menu, MenuItem, Divider, useTheme } from '@mui/material';\nimport { ReactElement, useState, useMemo, MouseEvent } from 'react';\nimport { ProfileData } from '@perses-dev/core';\nimport { useChartsTheme, EChart, MouseEventsParameters } from '@perses-dev/components';\nimport RefreshIcon from 'mdi-material-ui/Refresh';\nimport EyeIcon from 'mdi-material-ui/EyeOutline';\nimport ContentCopyIcon from 'mdi-material-ui/ContentCopy';\nimport { EChartsCoreOption } from 'echarts/core';\nimport { buildSamples, findTotalSampleByName } from '../utils/data-transform';\nimport { generateTooltip } from '../utils/tooltip';\nimport { FlameChartSample as Sample } from '../utils/data-model';\nimport { CustomBreadcrumb } from './CustomBreadcrumb';\n\nconst ITEM_GAP = 2; // vertical gap between flame chart items\nconst Y_MIN_SMALL = 6; // min value of y axis for small containers\nconst Y_MIN_LARGE = 20; // min value of y axis for large containers\nconst LARGE_CONTAINER_THRESHOLD = 600;\nconst CONTAINER_PADDING = 10;\nconst BREADCRUMB_SPACE = 50;\n\nexport interface FlameChartProps {\n  width: number;\n  height: number;\n  data: ProfileData;\n  palette: 'package-name' | 'value';\n  selectedId: number;\n  searchValue: string;\n  onSelectedIdChange: (newId: number) => void;\n}\n\nexport function FlameChart(props: FlameChartProps): ReactElement {\n  const { width, height, data, palette, selectedId, searchValue, onSelectedIdChange } = props;\n  const theme = useTheme();\n  const chartsTheme = useChartsTheme();\n  const [menuPosition, setMenuPosition] = useState<{ mouseX: number; mouseY: number } | null>(null);\n  const [selectedItem, setSelectedItem] = useState<{ id: number; name: string }>({ id: 0, name: '' });\n  const [isCopied, setIsCopied] = useState(false);\n\n  const seriesData = useMemo(\n    () => buildSamples(palette, data.metadata, data.profile.stackTrace, searchValue, selectedId),\n    [palette, data.metadata, data.profile.stackTrace, selectedId, searchValue]\n  );\n\n  const handleItemClick = (params: MouseEventsParameters<Sample>): void => {\n    const data: Sample = params.data;\n    const functionName = data.value[6];\n    const functionId = data.name;\n    setSelectedItem({ id: functionId, name: functionName });\n\n    // To ensure that the cursor is positioned inside the menu when it opens,\n    // we adjust the click event coordinates as follows:\n    if ('event' in params) {\n      const mouseEvent = params.event as { event: MouseEvent };\n      setMenuPosition({\n        mouseX: mouseEvent.event.clientX - 2,\n        mouseY: mouseEvent.event.clientY - 4,\n      });\n    }\n  };\n\n  const handleFocusBlock = (): void => {\n    onSelectedIdChange(selectedItem.id);\n    handleClose();\n  };\n\n  const handleCopyFunctionName = (): void => {\n    if ((selectedId || selectedId === 0) && selectedItem.name) {\n      navigator.clipboard.writeText(selectedItem.name);\n    }\n    setIsCopied(true);\n  };\n\n  const handleResetGraph = (): void => {\n    if (selectedId) {\n      onSelectedIdChange(0);\n    }\n    handleClose();\n  };\n\n  const handleClose = (): void => {\n    setMenuPosition(null);\n    if (isCopied) setIsCopied(false);\n  };\n\n  const renderItem: CustomSeriesRenderItem = (params: CustomSeriesRenderItemParams, api: CustomSeriesRenderItemAPI) => {\n    const level = api.value(0);\n    const start = api.coord([api.value(1), level]);\n    const end = api.coord([api.value(2), level]);\n    const height = (((api.size && api.size([0, 1])) || [0, 20]) as number[])[1];\n    const width = (end?.[0] ?? 0) - (start?.[0] ?? 0);\n\n    return {\n      type: 'rect',\n      transition: ['shape'],\n      shape: {\n        x: start?.[0],\n        y: (start?.[1] ?? 0) - (height ?? 0) / 2,\n        width,\n        height: (height ?? ITEM_GAP) - ITEM_GAP,\n        r: 0,\n      },\n      style: {\n        fill: api.visual('color'),\n      },\n      emphasis: {\n        style: {\n          stroke: '#000',\n        },\n      },\n      textConfig: {\n        position: 'insideLeft',\n      },\n      textContent: {\n        style: {\n          text: api.value(3),\n          fill: '#000',\n          width: width - 4,\n          overflow: 'truncate',\n          ellipsis: '..',\n          truncateMinChar: 1,\n        },\n        emphasis: {\n          style: {\n            stroke: '#000',\n            lineWidth: 0.5,\n          },\n        },\n      },\n    } as CustomSeriesRenderItemReturn;\n  };\n\n  const option: EChartsCoreOption = useMemo(() => {\n    if (data.profile.stackTrace === undefined) return chartsTheme.noDataOption;\n\n    const maxDepth = Math.max(...seriesData.map((s) => s.value[0])); // maximum depth of the stack trace\n    const yAxisMax = Math.max(height > LARGE_CONTAINER_THRESHOLD ? Y_MIN_LARGE : Y_MIN_SMALL, maxDepth);\n    const totalStart = seriesData[0]?.value[1]; // start value of the total function\n    const totalEnd = seriesData[0]?.value[2]; // end value of the total function\n    const xAxisMin = totalStart;\n    const xAxisMax = totalEnd;\n\n    // compute flame chart padding top and bottom\n    const padding = (height / (yAxisMax - 1) - ITEM_GAP) / 2 + 1;\n\n    const option = {\n      tooltip: {\n        appendToBody: true,\n        confine: true,\n        formatter: (params: Sample): string => generateTooltip(params, data.metadata?.units),\n        backgroundColor: theme.palette.background.paper,\n        borderColor: theme.palette.background.paper,\n        textStyle: {\n          color: theme.palette.text.primary,\n        },\n      },\n      xAxis: {\n        show: false,\n        min: xAxisMin,\n        max: xAxisMax,\n        axisLabel: {\n          show: false,\n        },\n      },\n      yAxis: {\n        show: false,\n        max: yAxisMax,\n        inverse: true, // Reverse Y axis\n        axisLabel: {\n          show: false,\n        },\n      },\n      axisLabel: {\n        overflow: 'truncate',\n        width: width / 3,\n      },\n      grid: {\n        left: 5,\n        right: 5,\n        top: padding + 5,\n        bottom: padding,\n      },\n      series: [\n        {\n          type: 'custom',\n          renderItem,\n          encode: {\n            x: [0, 1, 2],\n            y: 0,\n          },\n          data: seriesData,\n        },\n      ],\n    };\n\n    return option;\n  }, [data, chartsTheme, theme, width, seriesData, height]);\n\n  // Use useMemo to memoize the flame chart component and prevent unnecessary re-renders.\n  // This ensures the chart does not re-render when the onClick event updates state variables\n  // like menuPosition or selectedId.\n  const flameChart = useMemo(\n    () => (\n      <EChart\n        style={{\n          width: width,\n          height: height - 2 * CONTAINER_PADDING - BREADCRUMB_SPACE,\n        }}\n        option={option} // even data is in this prop\n        theme={chartsTheme.echartsTheme}\n        onEvents={{\n          click: handleItemClick as (params: MouseEventsParameters<unknown>) => void,\n        }}\n      />\n    ),\n    [chartsTheme.echartsTheme, height, option, width]\n  );\n\n  return (\n    <Stack\n      style={{\n        width: width,\n        height: height,\n      }}\n      alignItems=\"center\"\n    >\n      <CustomBreadcrumb\n        totalValue={seriesData[0]?.value[3] || ''} // name of the total function\n        totalSample={seriesData[0]?.value[8] || 0} // total sample of the total function\n        otherItemSample={findTotalSampleByName(seriesData, selectedId)} // total sample of the selected function\n        onSelectedIdChange={onSelectedIdChange}\n      />\n      {flameChart}\n      <Menu\n        sx={{\n          '& .MuiPaper-root': {\n            backgroundColor: theme.palette.background.paper,\n            color: theme.palette.text.primary,\n            padding: '5px',\n            paddingBottom: '0px',\n          },\n          '& .MuiMenuItem-root': {\n            '&:hover': {\n              backgroundColor: theme.palette.action.hover,\n            },\n          },\n        }}\n        open={menuPosition !== null}\n        onClose={handleClose}\n        anchorReference=\"anchorPosition\"\n        anchorPosition={menuPosition !== null ? { top: menuPosition.mouseY, left: menuPosition.mouseX } : undefined}\n      >\n        <Box\n          sx={{\n            paddingLeft: '16px',\n            paddingBottom: '8px',\n          }}\n        >\n          {selectedItem.name}\n        </Box>\n        <Divider sx={{ backgroundColor: theme.palette.divider }} />\n        <MenuItem onClick={handleFocusBlock}>\n          <EyeIcon fontSize=\"small\" color=\"secondary\" sx={{ marginRight: '10px' }} />\n          Focus block\n        </MenuItem>\n        <MenuItem onClick={handleCopyFunctionName} disabled={isCopied}>\n          <ContentCopyIcon fontSize=\"small\" color=\"secondary\" sx={{ marginRight: '10px' }} />\n          {isCopied ? 'Copied' : 'Copy function name'}\n        </MenuItem>\n        <MenuItem onClick={handleResetGraph}>\n          <RefreshIcon fontSize=\"small\" color=\"secondary\" sx={{ marginRight: '10px' }} />\n          Reset graph\n        </MenuItem>\n      </Menu>\n    </Stack>\n  );\n}\n"],"names":["Stack","Box","Menu","MenuItem","Divider","useTheme","useState","useMemo","useChartsTheme","EChart","RefreshIcon","EyeIcon","ContentCopyIcon","buildSamples","findTotalSampleByName","generateTooltip","CustomBreadcrumb","ITEM_GAP","Y_MIN_SMALL","Y_MIN_LARGE","LARGE_CONTAINER_THRESHOLD","CONTAINER_PADDING","BREADCRUMB_SPACE","FlameChart","props","width","height","data","palette","selectedId","searchValue","onSelectedIdChange","theme","chartsTheme","menuPosition","setMenuPosition","selectedItem","setSelectedItem","id","name","isCopied","setIsCopied","seriesData","metadata","profile","stackTrace","handleItemClick","params","functionName","value","functionId","mouseEvent","event","mouseX","clientX","mouseY","clientY","handleFocusBlock","handleClose","handleCopyFunctionName","navigator","clipboard","writeText","handleResetGraph","renderItem","api","level","start","coord","end","size","type","transition","shape","x","y","r","style","fill","visual","emphasis","stroke","textConfig","position","textContent","text","overflow","ellipsis","truncateMinChar","lineWidth","option","undefined","noDataOption","maxDepth","Math","max","map","s","yAxisMax","totalStart","totalEnd","xAxisMin","xAxisMax","padding","tooltip","appendToBody","confine","formatter","units","backgroundColor","background","paper","borderColor","textStyle","color","primary","xAxis","show","min","axisLabel","yAxis","inverse","grid","left","right","top","bottom","series","encode","flameChart","echartsTheme","onEvents","click","alignItems","totalValue","totalSample","otherItemSample","sx","paddingBottom","action","hover","open","onClose","anchorReference","anchorPosition","paddingLeft","divider","onClick","fontSize","marginRight","disabled"],"mappings":"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"}
+{"version":3,"sources":["../../../src/components/FlameChart.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 {\n  CustomSeriesRenderItem,\n  CustomSeriesRenderItemAPI,\n  CustomSeriesRenderItemParams,\n  CustomSeriesRenderItemReturn,\n} from 'echarts';\nimport { Stack, Box, Menu, MenuItem, Divider, useTheme } from '@mui/material';\nimport { ReactElement, useState, useMemo, MouseEvent } from 'react';\nimport { ProfileData } from '@perses-dev/core';\nimport { useChartsTheme, EChart, MouseEventsParameters } from '@perses-dev/components';\nimport RefreshIcon from 'mdi-material-ui/Refresh';\nimport EyeIcon from 'mdi-material-ui/EyeOutline';\nimport ContentCopyIcon from 'mdi-material-ui/ContentCopy';\nimport { EChartsCoreOption } from 'echarts/core';\nimport { buildSamples, findTotalSampleByName } from '../utils/data-transform';\nimport { generateTooltip } from '../utils/tooltip';\nimport { FlameChartSample as Sample } from '../utils/data-model';\nimport { CustomBreadcrumb } from './CustomBreadcrumb';\n\nconst ITEM_GAP = 2; // vertical gap between flame chart items\nconst Y_MIN_SMALL = 6; // min value of y axis for small containers\nconst Y_MIN_LARGE = 20; // min value of y axis for large containers\nconst LARGE_CONTAINER_THRESHOLD = 600;\nconst CONTAINER_PADDING = 10;\nconst BREADCRUMB_SPACE = 50;\n\nexport interface FlameChartProps {\n  width: number;\n  height: number;\n  data: ProfileData;\n  palette: 'package-name' | 'value';\n  selectedId: number;\n  searchValue: string;\n  onSelectedIdChange: (newId: number) => void;\n}\n\nexport function FlameChart(props: FlameChartProps): ReactElement {\n  const { width, height, data, palette, selectedId, searchValue, onSelectedIdChange } = props;\n  const theme = useTheme();\n  const chartsTheme = useChartsTheme();\n  const [menuPosition, setMenuPosition] = useState<{ mouseX: number; mouseY: number } | null>(null);\n  const [selectedItem, setSelectedItem] = useState<{ id: number; name: string }>({ id: 0, name: '' });\n  const [isCopied, setIsCopied] = useState(false);\n\n  const seriesData = useMemo(\n    () => buildSamples(palette, data.metadata, data.profile.stackTrace, searchValue, selectedId),\n    [palette, data.metadata, data.profile.stackTrace, selectedId, searchValue]\n  );\n\n  const handleItemClick = (params: MouseEventsParameters<Sample>): void => {\n    const data: Sample = params.data;\n    const functionName = data.value[6];\n    const functionId = data.name;\n    setSelectedItem({ id: functionId, name: functionName });\n\n    // To ensure that the cursor is positioned inside the menu when it opens,\n    // we adjust the click event coordinates as follows:\n    if ('event' in params) {\n      const mouseEvent = params.event as { event: MouseEvent };\n      setMenuPosition({\n        mouseX: mouseEvent.event.clientX - 2,\n        mouseY: mouseEvent.event.clientY - 4,\n      });\n    }\n  };\n\n  const handleFocusBlock = (): void => {\n    onSelectedIdChange(selectedItem.id);\n    handleClose();\n  };\n\n  const handleCopyFunctionName = (): void => {\n    if ((selectedId || selectedId === 0) && selectedItem.name) {\n      navigator.clipboard.writeText(selectedItem.name);\n    }\n    setIsCopied(true);\n  };\n\n  const handleResetGraph = (): void => {\n    if (selectedId) {\n      onSelectedIdChange(0);\n    }\n    handleClose();\n  };\n\n  const handleClose = (): void => {\n    setMenuPosition(null);\n    if (isCopied) setIsCopied(false);\n  };\n\n  const renderItem: CustomSeriesRenderItem = (params: CustomSeriesRenderItemParams, api: CustomSeriesRenderItemAPI) => {\n    const level = api.value(0);\n    const start = api.coord([api.value(1), level]);\n    const end = api.coord([api.value(2), level]);\n    const height = (((api.size && api.size([0, 1])) || [0, 20]) as number[])[1];\n    const width = (end?.[0] ?? 0) - (start?.[0] ?? 0);\n\n    return {\n      type: 'rect',\n      transition: ['shape'],\n      shape: {\n        x: start?.[0],\n        y: (start?.[1] ?? 0) - (height ?? 0) / 2,\n        width,\n        height: (height ?? ITEM_GAP) - ITEM_GAP,\n        r: 0,\n      },\n      style: {\n        fill: api.visual('color'),\n      },\n      emphasis: {\n        style: {\n          stroke: '#000',\n        },\n      },\n      textConfig: {\n        position: 'insideLeft',\n      },\n      textContent: {\n        style: {\n          text: api.value(3),\n          fill: '#000',\n          width: width - 4,\n          overflow: 'truncate',\n          ellipsis: '..',\n          truncateMinChar: 1,\n        },\n        emphasis: {\n          style: {\n            stroke: '#000',\n            lineWidth: 0.5,\n          },\n        },\n      },\n    } as CustomSeriesRenderItemReturn;\n  };\n\n  const option: EChartsCoreOption = useMemo(() => {\n    if (data.profile.stackTrace === undefined) return chartsTheme.noDataOption;\n\n    const maxDepth = Math.max(...seriesData.map((s) => s.value[0])); // maximum depth of the stack trace\n    const yAxisMax = Math.max(height > LARGE_CONTAINER_THRESHOLD ? Y_MIN_LARGE : Y_MIN_SMALL, maxDepth);\n    const totalStart = seriesData[0]?.value[1]; // start value of the total function\n    const totalEnd = seriesData[0]?.value[2]; // end value of the total function\n    const xAxisMin = totalStart;\n    const xAxisMax = totalEnd;\n\n    // compute flame chart padding top and bottom\n    const padding = (height / (yAxisMax - 1) - ITEM_GAP) / 2 + 1;\n\n    const option = {\n      tooltip: {\n        appendToBody: true,\n        confine: true,\n        formatter: (params: Sample): string => generateTooltip(params, data.metadata?.units),\n        backgroundColor: theme.palette.background.paper,\n        borderColor: theme.palette.background.paper,\n        textStyle: {\n          color: theme.palette.text.primary,\n        },\n      },\n      xAxis: {\n        show: false,\n        min: xAxisMin,\n        max: xAxisMax,\n        axisLabel: {\n          show: false,\n        },\n      },\n      yAxis: {\n        show: false,\n        max: yAxisMax,\n        inverse: true, // Reverse Y axis\n        axisLabel: {\n          show: false,\n        },\n      },\n      axisLabel: {\n        overflow: 'truncate',\n        width: width / 3,\n      },\n      grid: {\n        left: 5,\n        right: 5,\n        top: padding + 5,\n        bottom: padding,\n      },\n      series: [\n        {\n          type: 'custom',\n          renderItem,\n          encode: {\n            x: [0, 1, 2],\n            y: 0,\n          },\n          data: seriesData,\n        },\n      ],\n    };\n\n    return option;\n  }, [data, chartsTheme, theme, width, seriesData, height]);\n\n  // Use useMemo to memoize the flame chart component and prevent unnecessary re-renders.\n  // This ensures the chart does not re-render when the onClick event updates state variables\n  // like menuPosition or selectedId.\n  const flameChart = useMemo(\n    () => (\n      <EChart\n        style={{\n          width: width,\n          height: height - 2 * CONTAINER_PADDING - BREADCRUMB_SPACE,\n        }}\n        option={option} // even data is in this prop\n        theme={chartsTheme.echartsTheme}\n        onEvents={{\n          click: handleItemClick as (params: MouseEventsParameters<unknown>) => void,\n        }}\n      />\n    ),\n    [chartsTheme.echartsTheme, height, option, width]\n  );\n\n  return (\n    <Stack\n      style={{\n        width: width,\n        height: height,\n      }}\n      alignItems=\"center\"\n    >\n      <CustomBreadcrumb\n        totalValue={seriesData[0]?.value[3] || ''} // name of the total function\n        totalSample={seriesData[0]?.value[8] || 0} // total sample of the total function\n        otherItemSample={findTotalSampleByName(seriesData, selectedId)} // total sample of the selected function\n        onSelectedIdChange={onSelectedIdChange}\n      />\n      {flameChart}\n      <Menu\n        sx={{\n          '& .MuiPaper-root': {\n            backgroundColor: theme.palette.background.paper,\n            color: theme.palette.text.primary,\n            padding: '5px',\n            paddingBottom: '0px',\n          },\n          '& .MuiMenuItem-root': {\n            '&:hover': {\n              backgroundColor: theme.palette.action.hover,\n            },\n          },\n        }}\n        open={menuPosition !== null}\n        onClose={handleClose}\n        anchorReference=\"anchorPosition\"\n        anchorPosition={menuPosition !== null ? { top: menuPosition.mouseY, left: menuPosition.mouseX } : undefined}\n      >\n        <Box\n          sx={{\n            paddingLeft: '16px',\n            paddingBottom: '8px',\n          }}\n        >\n          {selectedItem.name}\n        </Box>\n        <Divider sx={{ backgroundColor: theme.palette.divider }} />\n        <MenuItem onClick={handleFocusBlock}>\n          <EyeIcon fontSize=\"small\" color=\"secondary\" sx={{ marginRight: '10px' }} />\n          Focus block\n        </MenuItem>\n        <MenuItem onClick={handleCopyFunctionName} disabled={isCopied}>\n          <ContentCopyIcon fontSize=\"small\" color=\"secondary\" sx={{ marginRight: '10px' }} />\n          {isCopied ? 'Copied' : 'Copy function name'}\n        </MenuItem>\n        <MenuItem onClick={handleResetGraph}>\n          <RefreshIcon fontSize=\"small\" color=\"secondary\" sx={{ marginRight: '10px' }} />\n          Reset graph\n        </MenuItem>\n      </Menu>\n    </Stack>\n  );\n}\n"],"names":["Stack","Box","Menu","MenuItem","Divider","useTheme","useState","useMemo","useChartsTheme","EChart","RefreshIcon","EyeIcon","ContentCopyIcon","buildSamples","findTotalSampleByName","generateTooltip","CustomBreadcrumb","ITEM_GAP","Y_MIN_SMALL","Y_MIN_LARGE","LARGE_CONTAINER_THRESHOLD","CONTAINER_PADDING","BREADCRUMB_SPACE","FlameChart","props","width","height","data","palette","selectedId","searchValue","onSelectedIdChange","theme","chartsTheme","menuPosition","setMenuPosition","selectedItem","setSelectedItem","id","name","isCopied","setIsCopied","seriesData","metadata","profile","stackTrace","handleItemClick","params","functionName","value","functionId","mouseEvent","event","mouseX","clientX","mouseY","clientY","handleFocusBlock","handleClose","handleCopyFunctionName","navigator","clipboard","writeText","handleResetGraph","renderItem","api","level","start","coord","end","size","type","transition","shape","x","y","r","style","fill","visual","emphasis","stroke","textConfig","position","textContent","text","overflow","ellipsis","truncateMinChar","lineWidth","option","undefined","noDataOption","maxDepth","Math","max","map","s","yAxisMax","totalStart","totalEnd","xAxisMin","xAxisMax","padding","tooltip","appendToBody","confine","formatter","units","backgroundColor","background","paper","borderColor","textStyle","color","primary","xAxis","show","min","axisLabel","yAxis","inverse","grid","left","right","top","bottom","series","encode","flameChart","echartsTheme","onEvents","click","alignItems","totalValue","totalSample","otherItemSample","sx","paddingBottom","action","hover","open","onClose","anchorReference","anchorPosition","paddingLeft","divider","onClick","fontSize","marginRight","disabled"],"mappings":"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"}

package/lib/components/FlameChartOptionsEditorSettings.js

@@ -1,4 +1,4 @@
-// Copyright 2025 The Perses Authors
+// Copyright The Perses Authors
 // Licensed under the Apache License, Version 2.0 (the "License");
 // you may not use this file except in compliance with the License.
 // You may obtain a copy of the License at

package/lib/components/FlameChartOptionsEditorSettings.js.map

@@ -1 +1 @@
-{"version":3,"sources":["../../../src/components/FlameChartOptionsEditorSettings.tsx"],"sourcesContent":["// Copyright 2025 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 } from 'react';\nimport {\n  OptionsEditorGroup,\n  OptionsEditorGrid,\n  OptionsEditorColumn,\n  OptionsEditorControl,\n} from '@perses-dev/components';\nimport { Button, TextField } from '@mui/material';\nimport { FlameChartOptionsEditorProps } from '../flame-chart-model';\nimport {\n  usePaletteState,\n  useShowSettingsState,\n  useShowSeriesState,\n  useShowTableState,\n  useShowFlameGraphState,\n  resetSettings,\n  useTraceHeightState,\n} from '../utils/utils';\nimport { PaletteSelector } from './PaletteSelector';\nimport { SwitchSelector } from './SwitchSelector';\n\nexport function FlameChartOptionsEditorSettings(props: FlameChartOptionsEditorProps): ReactElement {\n  const { value } = props;\n\n  const { handlePaletteChange } = usePaletteState(props);\n  const { handleShowSettingsChange } = useShowSettingsState(props);\n  const { handleShowSeriesChange } = useShowSeriesState(props);\n  const { handleShowTableChange } = useShowTableState(props);\n  const { handleShowFlameGraphChange } = useShowFlameGraphState(props);\n  const { handleTraceHeightChange } = useTraceHeightState(props);\n\n  return (\n    <OptionsEditorGrid>\n      <OptionsEditorColumn>\n        <OptionsEditorGroup title=\"Misc\">\n          <PaletteSelector value={value.palette} onChange={handlePaletteChange} />\n          <OptionsEditorControl\n            label=\"Trace Height\"\n            control={\n              <TextField\n                type=\"number\"\n                value={value.traceHeight ?? ''}\n                slotProps={{ htmlInput: { min: 0, step: 1 } }}\n                onChange={handleTraceHeightChange}\n              />\n            }\n          />\n        </OptionsEditorGroup>\n      </OptionsEditorColumn>\n      <OptionsEditorColumn>\n        <OptionsEditorGroup title=\"Panels to display\">\n          <SwitchSelector label=\"Show Options\" value={value.showSettings} onChange={handleShowSettingsChange} />\n          <SwitchSelector label=\"Show Series\" value={value.showSeries} onChange={handleShowSeriesChange} />\n          <SwitchSelector label=\"Show Table\" value={value.showTable} onChange={handleShowTableChange} />\n          <SwitchSelector label=\"Show Flame Graph\" value={value.showFlameGraph} onChange={handleShowFlameGraphChange} />\n        </OptionsEditorGroup>\n      </OptionsEditorColumn>\n      <OptionsEditorColumn>\n        <OptionsEditorGroup title=\"Reset Settings\">\n          <Button variant=\"outlined\" color=\"secondary\" onClick={() => resetSettings(props)}>\n            Reset To Defaults\n          </Button>\n        </OptionsEditorGroup>\n      </OptionsEditorColumn>\n    </OptionsEditorGrid>\n  );\n}\n"],"names":["OptionsEditorGroup","OptionsEditorGrid","OptionsEditorColumn","OptionsEditorControl","Button","TextField","usePaletteState","useShowSettingsState","useShowSeriesState","useShowTableState","useShowFlameGraphState","resetSettings","useTraceHeightState","PaletteSelector","SwitchSelector","FlameChartOptionsEditorSettings","props","value","handlePaletteChange","handleShowSettingsChange","handleShowSeriesChange","handleShowTableChange","handleShowFlameGraphChange","handleTraceHeightChange","title","palette","onChange","label","control","type","traceHeight","slotProps","htmlInput","min","step","showSettings","showSeries","showTable","showFlameGraph","variant","color","onClick"],"mappings":"AAAA,oCAAoC;AACpC,kEAAkE;AAClE,mEAAmE;AACnE,0CAA0C;AAC1C,EAAE;AACF,6CAA6C;AAC7C,EAAE;AACF,sEAAsE;AACtE,oEAAoE;AACpE,2EAA2E;AAC3E,sEAAsE;AACtE,iCAAiC;;AAGjC,SACEA,kBAAkB,EAClBC,iBAAiB,EACjBC,mBAAmB,EACnBC,oBAAoB,QACf,yBAAyB;AAChC,SAASC,MAAM,EAAEC,SAAS,QAAQ,gBAAgB;AAElD,SACEC,eAAe,EACfC,oBAAoB,EACpBC,kBAAkB,EAClBC,iBAAiB,EACjBC,sBAAsB,EACtBC,aAAa,EACbC,mBAAmB,QACd,iBAAiB;AACxB,SAASC,eAAe,QAAQ,oBAAoB;AACpD,SAASC,cAAc,QAAQ,mBAAmB;AAElD,OAAO,SAASC,gCAAgCC,KAAmC;IACjF,MAAM,EAAEC,KAAK,EAAE,GAAGD;IAElB,MAAM,EAAEE,mBAAmB,EAAE,GAAGZ,gBAAgBU;IAChD,MAAM,EAAEG,wBAAwB,EAAE,GAAGZ,qBAAqBS;IAC1D,MAAM,EAAEI,sBAAsB,EAAE,GAAGZ,mBAAmBQ;IACtD,MAAM,EAAEK,qBAAqB,EAAE,GAAGZ,kBAAkBO;IACpD,MAAM,EAAEM,0BAA0B,EAAE,GAAGZ,uBAAuBM;IAC9D,MAAM,EAAEO,uBAAuB,EAAE,GAAGX,oBAAoBI;IAExD,qBACE,MAACf;;0BACC,KAACC;0BACC,cAAA,MAACF;oBAAmBwB,OAAM;;sCACxB,KAACX;4BAAgBI,OAAOA,MAAMQ,OAAO;4BAAEC,UAAUR;;sCACjD,KAACf;4BACCwB,OAAM;4BACNC,uBACE,KAACvB;gCACCwB,MAAK;gCACLZ,OAAOA,MAAMa,WAAW,IAAI;gCAC5BC,WAAW;oCAAEC,WAAW;wCAAEC,KAAK;wCAAGC,MAAM;oCAAE;gCAAE;gCAC5CR,UAAUH;;;;;;0BAMpB,KAACrB;0BACC,cAAA,MAACF;oBAAmBwB,OAAM;;sCACxB,KAACV;4BAAea,OAAM;4BAAeV,OAAOA,MAAMkB,YAAY;4BAAET,UAAUP;;sCAC1E,KAACL;4BAAea,OAAM;4BAAcV,OAAOA,MAAMmB,UAAU;4BAAEV,UAAUN;;sCACvE,KAACN;4BAAea,OAAM;4BAAaV,OAAOA,MAAMoB,SAAS;4BAAEX,UAAUL;;sCACrE,KAACP;4BAAea,OAAM;4BAAmBV,OAAOA,MAAMqB,cAAc;4BAAEZ,UAAUJ;;;;;0BAGpF,KAACpB;0BACC,cAAA,KAACF;oBAAmBwB,OAAM;8BACxB,cAAA,KAACpB;wBAAOmC,SAAQ;wBAAWC,OAAM;wBAAYC,SAAS,IAAM9B,cAAcK;kCAAQ;;;;;;AAO5F"}
+{"version":3,"sources":["../../../src/components/FlameChartOptionsEditorSettings.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 } from 'react';\nimport {\n  OptionsEditorGroup,\n  OptionsEditorGrid,\n  OptionsEditorColumn,\n  OptionsEditorControl,\n} from '@perses-dev/components';\nimport { Button, TextField } from '@mui/material';\nimport { FlameChartOptionsEditorProps } from '../flame-chart-model';\nimport {\n  usePaletteState,\n  useShowSettingsState,\n  useShowSeriesState,\n  useShowTableState,\n  useShowFlameGraphState,\n  resetSettings,\n  useTraceHeightState,\n} from '../utils/utils';\nimport { PaletteSelector } from './PaletteSelector';\nimport { SwitchSelector } from './SwitchSelector';\n\nexport function FlameChartOptionsEditorSettings(props: FlameChartOptionsEditorProps): ReactElement {\n  const { value } = props;\n\n  const { handlePaletteChange } = usePaletteState(props);\n  const { handleShowSettingsChange } = useShowSettingsState(props);\n  const { handleShowSeriesChange } = useShowSeriesState(props);\n  const { handleShowTableChange } = useShowTableState(props);\n  const { handleShowFlameGraphChange } = useShowFlameGraphState(props);\n  const { handleTraceHeightChange } = useTraceHeightState(props);\n\n  return (\n    <OptionsEditorGrid>\n      <OptionsEditorColumn>\n        <OptionsEditorGroup title=\"Misc\">\n          <PaletteSelector value={value.palette} onChange={handlePaletteChange} />\n          <OptionsEditorControl\n            label=\"Trace Height\"\n            control={\n              <TextField\n                type=\"number\"\n                value={value.traceHeight ?? ''}\n                slotProps={{ htmlInput: { min: 0, step: 1 } }}\n                onChange={handleTraceHeightChange}\n              />\n            }\n          />\n        </OptionsEditorGroup>\n      </OptionsEditorColumn>\n      <OptionsEditorColumn>\n        <OptionsEditorGroup title=\"Panels to display\">\n          <SwitchSelector label=\"Show Options\" value={value.showSettings} onChange={handleShowSettingsChange} />\n          <SwitchSelector label=\"Show Series\" value={value.showSeries} onChange={handleShowSeriesChange} />\n          <SwitchSelector label=\"Show Table\" value={value.showTable} onChange={handleShowTableChange} />\n          <SwitchSelector label=\"Show Flame Graph\" value={value.showFlameGraph} onChange={handleShowFlameGraphChange} />\n        </OptionsEditorGroup>\n      </OptionsEditorColumn>\n      <OptionsEditorColumn>\n        <OptionsEditorGroup title=\"Reset Settings\">\n          <Button variant=\"outlined\" color=\"secondary\" onClick={() => resetSettings(props)}>\n            Reset To Defaults\n          </Button>\n        </OptionsEditorGroup>\n      </OptionsEditorColumn>\n    </OptionsEditorGrid>\n  );\n}\n"],"names":["OptionsEditorGroup","OptionsEditorGrid","OptionsEditorColumn","OptionsEditorControl","Button","TextField","usePaletteState","useShowSettingsState","useShowSeriesState","useShowTableState","useShowFlameGraphState","resetSettings","useTraceHeightState","PaletteSelector","SwitchSelector","FlameChartOptionsEditorSettings","props","value","handlePaletteChange","handleShowSettingsChange","handleShowSeriesChange","handleShowTableChange","handleShowFlameGraphChange","handleTraceHeightChange","title","palette","onChange","label","control","type","traceHeight","slotProps","htmlInput","min","step","showSettings","showSeries","showTable","showFlameGraph","variant","color","onClick"],"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;;AAGjC,SACEA,kBAAkB,EAClBC,iBAAiB,EACjBC,mBAAmB,EACnBC,oBAAoB,QACf,yBAAyB;AAChC,SAASC,MAAM,EAAEC,SAAS,QAAQ,gBAAgB;AAElD,SACEC,eAAe,EACfC,oBAAoB,EACpBC,kBAAkB,EAClBC,iBAAiB,EACjBC,sBAAsB,EACtBC,aAAa,EACbC,mBAAmB,QACd,iBAAiB;AACxB,SAASC,eAAe,QAAQ,oBAAoB;AACpD,SAASC,cAAc,QAAQ,mBAAmB;AAElD,OAAO,SAASC,gCAAgCC,KAAmC;IACjF,MAAM,EAAEC,KAAK,EAAE,GAAGD;IAElB,MAAM,EAAEE,mBAAmB,EAAE,GAAGZ,gBAAgBU;IAChD,MAAM,EAAEG,wBAAwB,EAAE,GAAGZ,qBAAqBS;IAC1D,MAAM,EAAEI,sBAAsB,EAAE,GAAGZ,mBAAmBQ;IACtD,MAAM,EAAEK,qBAAqB,EAAE,GAAGZ,kBAAkBO;IACpD,MAAM,EAAEM,0BAA0B,EAAE,GAAGZ,uBAAuBM;IAC9D,MAAM,EAAEO,uBAAuB,EAAE,GAAGX,oBAAoBI;IAExD,qBACE,MAACf;;0BACC,KAACC;0BACC,cAAA,MAACF;oBAAmBwB,OAAM;;sCACxB,KAACX;4BAAgBI,OAAOA,MAAMQ,OAAO;4BAAEC,UAAUR;;sCACjD,KAACf;4BACCwB,OAAM;4BACNC,uBACE,KAACvB;gCACCwB,MAAK;gCACLZ,OAAOA,MAAMa,WAAW,IAAI;gCAC5BC,WAAW;oCAAEC,WAAW;wCAAEC,KAAK;wCAAGC,MAAM;oCAAE;gCAAE;gCAC5CR,UAAUH;;;;;;0BAMpB,KAACrB;0BACC,cAAA,MAACF;oBAAmBwB,OAAM;;sCACxB,KAACV;4BAAea,OAAM;4BAAeV,OAAOA,MAAMkB,YAAY;4BAAET,UAAUP;;sCAC1E,KAACL;4BAAea,OAAM;4BAAcV,OAAOA,MAAMmB,UAAU;4BAAEV,UAAUN;;sCACvE,KAACN;4BAAea,OAAM;4BAAaV,OAAOA,MAAMoB,SAAS;4BAAEX,UAAUL;;sCACrE,KAACP;4BAAea,OAAM;4BAAmBV,OAAOA,MAAMqB,cAAc;4BAAEZ,UAAUJ;;;;;0BAGpF,KAACpB;0BACC,cAAA,KAACF;oBAAmBwB,OAAM;8BACxB,cAAA,KAACpB;wBAAOmC,SAAQ;wBAAWC,OAAM;wBAAYC,SAAS,IAAM9B,cAAcK;kCAAQ;;;;;;AAO5F"}

package/lib/components/FlameChartPanel.js

@@ -1,4 +1,4 @@
-// Copyright 2023 The Perses Authors
+// Copyright The Perses Authors
 // Licensed under the Apache License, Version 2.0 (the "License");
 // you may not use this file except in compliance with the License.
 // You may obtain a copy of the License at

package/lib/components/FlameChartPanel.js.map

@@ -1 +1 @@
-{"version":3,"sources":["../../../src/components/FlameChartPanel.tsx"],"sourcesContent":["// Copyright 2023 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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"}
+{"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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"}

package/lib/components/PaletteSelector.js

@@ -1,4 +1,4 @@
-// Copyright 2025 The Perses Authors
+// Copyright The Perses Authors
 // Licensed under the Apache License |  Version 2.0 (the "License");
 // you may not use this file except in compliance with the License.
 // You may obtain a copy of the License at

package/lib/components/PaletteSelector.js.map

@@ -1 +1 @@
-{"version":3,"sources":["../../../src/components/PaletteSelector.tsx"],"sourcesContent":["// Copyright 2025 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 } from 'react';\nimport { OptionsEditorControl, SettingsAutocomplete } from '@perses-dev/components';\n\nconst PALETTE_OPTIONS: Array<{ id: PaletteOption; label: string }> = [\n  { id: 'package-name', label: 'By Package Name' },\n  { id: 'value', label: 'By Value' },\n];\n\nexport type PaletteOption = 'package-name' | 'value';\n\nexport interface PaletteSelectorProps {\n  onChange: (palette: PaletteOption) => void;\n  value?: PaletteOption;\n}\n\nexport function PaletteSelector({ onChange, value = 'package-name' }: PaletteSelectorProps): ReactElement {\n  const handlePaletteChange = (_: unknown, { id }: { id: PaletteOption }): void => {\n    onChange(id);\n  };\n\n  return (\n    <OptionsEditorControl\n      label=\"Palette\"\n      control={\n        <SettingsAutocomplete\n          value={PALETTE_OPTIONS.find((o) => o.id === value)}\n          options={PALETTE_OPTIONS}\n          getOptionLabel={(o) => o.label}\n          onChange={handlePaletteChange}\n          disableClearable\n        />\n      }\n    />\n  );\n}\n"],"names":["OptionsEditorControl","SettingsAutocomplete","PALETTE_OPTIONS","id","label","PaletteSelector","onChange","value","handlePaletteChange","_","control","find","o","options","getOptionLabel","disableClearable"],"mappings":"AAAA,oCAAoC;AACpC,oEAAoE;AACpE,mEAAmE;AACnE,0CAA0C;AAC1C,EAAE;AACF,6CAA6C;AAC7C,EAAE;AACF,wEAAwE;AACxE,qEAAqE;AACrE,6EAA6E;AAC7E,sEAAsE;AACtE,iCAAiC;;AAGjC,SAASA,oBAAoB,EAAEC,oBAAoB,QAAQ,yBAAyB;AAEpF,MAAMC,kBAA+D;IACnE;QAAEC,IAAI;QAAgBC,OAAO;IAAkB;IAC/C;QAAED,IAAI;QAASC,OAAO;IAAW;CAClC;AASD,OAAO,SAASC,gBAAgB,EAAEC,QAAQ,EAAEC,QAAQ,cAAc,EAAwB;IACxF,MAAMC,sBAAsB,CAACC,GAAY,EAAEN,EAAE,EAAyB;QACpEG,SAASH;IACX;IAEA,qBACE,KAACH;QACCI,OAAM;QACNM,uBACE,KAACT;YACCM,OAAOL,gBAAgBS,IAAI,CAAC,CAACC,IAAMA,EAAET,EAAE,KAAKI;YAC5CM,SAASX;YACTY,gBAAgB,CAACF,IAAMA,EAAER,KAAK;YAC9BE,UAAUE;YACVO,gBAAgB;;;AAK1B"}
+{"version":3,"sources":["../../../src/components/PaletteSelector.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 } from 'react';\nimport { OptionsEditorControl, SettingsAutocomplete } from '@perses-dev/components';\n\nconst PALETTE_OPTIONS: Array<{ id: PaletteOption; label: string }> = [\n  { id: 'package-name', label: 'By Package Name' },\n  { id: 'value', label: 'By Value' },\n];\n\nexport type PaletteOption = 'package-name' | 'value';\n\nexport interface PaletteSelectorProps {\n  onChange: (palette: PaletteOption) => void;\n  value?: PaletteOption;\n}\n\nexport function PaletteSelector({ onChange, value = 'package-name' }: PaletteSelectorProps): ReactElement {\n  const handlePaletteChange = (_: unknown, { id }: { id: PaletteOption }): void => {\n    onChange(id);\n  };\n\n  return (\n    <OptionsEditorControl\n      label=\"Palette\"\n      control={\n        <SettingsAutocomplete\n          value={PALETTE_OPTIONS.find((o) => o.id === value)}\n          options={PALETTE_OPTIONS}\n          getOptionLabel={(o) => o.label}\n          onChange={handlePaletteChange}\n          disableClearable\n        />\n      }\n    />\n  );\n}\n"],"names":["OptionsEditorControl","SettingsAutocomplete","PALETTE_OPTIONS","id","label","PaletteSelector","onChange","value","handlePaletteChange","_","control","find","o","options","getOptionLabel","disableClearable"],"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;;AAGjC,SAASA,oBAAoB,EAAEC,oBAAoB,QAAQ,yBAAyB;AAEpF,MAAMC,kBAA+D;IACnE;QAAEC,IAAI;QAAgBC,OAAO;IAAkB;IAC/C;QAAED,IAAI;QAASC,OAAO;IAAW;CAClC;AASD,OAAO,SAASC,gBAAgB,EAAEC,QAAQ,EAAEC,QAAQ,cAAc,EAAwB;IACxF,MAAMC,sBAAsB,CAACC,GAAY,EAAEN,EAAE,EAAyB;QACpEG,SAASH;IACX;IAEA,qBACE,KAACH;QACCI,OAAM;QACNM,uBACE,KAACT;YACCM,OAAOL,gBAAgBS,IAAI,CAAC,CAACC,IAAMA,EAAET,EAAE,KAAKI;YAC5CM,SAASX;YACTY,gBAAgB,CAACF,IAAMA,EAAER,KAAK;YAC9BE,UAAUE;YACVO,gBAAgB;;;AAK1B"}

package/lib/components/SearchBar.js

@@ -1,4 +1,4 @@
-// Copyright 2025 The Perses Authors
+// Copyright The Perses Authors
 // Licensed under the Apache License |  Version 2.0 (the "License");
 // you may not use this file except in compliance with the License.
 // You may obtain a copy of the License at

package/lib/components/SearchBar.js.map

@@ -1 +1 @@
-{"version":3,"sources":["../../../src/components/SearchBar.tsx"],"sourcesContent":["// Copyright 2025 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 } from 'react';\nimport { TextField, InputAdornment, Chip } from '@mui/material';\nimport Magnify from 'mdi-material-ui/Magnify';\n\nexport interface SearchBarProps {\n  searchValue: string;\n  onSearchValueChange: (value: string) => void;\n}\n\nexport function SearchBar(props: SearchBarProps): ReactElement {\n  const { searchValue, onSearchValueChange } = props;\n\n  return (\n    <TextField\n      size=\"small\"\n      variant=\"outlined\"\n      placeholder=\"Search...\"\n      fullWidth\n      value={searchValue}\n      onChange={(event) => onSearchValueChange(event.target.value)}\n      slotProps={{\n        input: {\n          startAdornment: (\n            <InputAdornment position=\"start\">\n              <Magnify fontSize=\"small\" />\n            </InputAdornment>\n          ),\n          endAdornment: searchValue !== '' && (\n            <InputAdornment position=\"end\">\n              <Chip label=\"Clear\" size=\"small\" onClick={() => onSearchValueChange('')} />\n            </InputAdornment>\n          ),\n        },\n      }}\n    />\n  );\n}\n"],"names":["TextField","InputAdornment","Chip","Magnify","SearchBar","props","searchValue","onSearchValueChange","size","variant","placeholder","fullWidth","value","onChange","event","target","slotProps","input","startAdornment","position","fontSize","endAdornment","label","onClick"],"mappings":"AAAA,oCAAoC;AACpC,oEAAoE;AACpE,mEAAmE;AACnE,0CAA0C;AAC1C,EAAE;AACF,6CAA6C;AAC7C,EAAE;AACF,wEAAwE;AACxE,qEAAqE;AACrE,6EAA6E;AAC7E,sEAAsE;AACtE,iCAAiC;;AAGjC,SAASA,SAAS,EAAEC,cAAc,EAAEC,IAAI,QAAQ,gBAAgB;AAChE,OAAOC,aAAa,0BAA0B;AAO9C,OAAO,SAASC,UAAUC,KAAqB;IAC7C,MAAM,EAAEC,WAAW,EAAEC,mBAAmB,EAAE,GAAGF;IAE7C,qBACE,KAACL;QACCQ,MAAK;QACLC,SAAQ;QACRC,aAAY;QACZC,SAAS;QACTC,OAAON;QACPO,UAAU,CAACC,QAAUP,oBAAoBO,MAAMC,MAAM,CAACH,KAAK;QAC3DI,WAAW;YACTC,OAAO;gBACLC,8BACE,KAACjB;oBAAekB,UAAS;8BACvB,cAAA,KAAChB;wBAAQiB,UAAS;;;gBAGtBC,cAAcf,gBAAgB,oBAC5B,KAACL;oBAAekB,UAAS;8BACvB,cAAA,KAACjB;wBAAKoB,OAAM;wBAAQd,MAAK;wBAAQe,SAAS,IAAMhB,oBAAoB;;;YAG1E;QACF;;AAGN"}
+{"version":3,"sources":["../../../src/components/SearchBar.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 } from 'react';\nimport { TextField, InputAdornment, Chip } from '@mui/material';\nimport Magnify from 'mdi-material-ui/Magnify';\n\nexport interface SearchBarProps {\n  searchValue: string;\n  onSearchValueChange: (value: string) => void;\n}\n\nexport function SearchBar(props: SearchBarProps): ReactElement {\n  const { searchValue, onSearchValueChange } = props;\n\n  return (\n    <TextField\n      size=\"small\"\n      variant=\"outlined\"\n      placeholder=\"Search...\"\n      fullWidth\n      value={searchValue}\n      onChange={(event) => onSearchValueChange(event.target.value)}\n      slotProps={{\n        input: {\n          startAdornment: (\n            <InputAdornment position=\"start\">\n              <Magnify fontSize=\"small\" />\n            </InputAdornment>\n          ),\n          endAdornment: searchValue !== '' && (\n            <InputAdornment position=\"end\">\n              <Chip label=\"Clear\" size=\"small\" onClick={() => onSearchValueChange('')} />\n            </InputAdornment>\n          ),\n        },\n      }}\n    />\n  );\n}\n"],"names":["TextField","InputAdornment","Chip","Magnify","SearchBar","props","searchValue","onSearchValueChange","size","variant","placeholder","fullWidth","value","onChange","event","target","slotProps","input","startAdornment","position","fontSize","endAdornment","label","onClick"],"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;;AAGjC,SAASA,SAAS,EAAEC,cAAc,EAAEC,IAAI,QAAQ,gBAAgB;AAChE,OAAOC,aAAa,0BAA0B;AAO9C,OAAO,SAASC,UAAUC,KAAqB;IAC7C,MAAM,EAAEC,WAAW,EAAEC,mBAAmB,EAAE,GAAGF;IAE7C,qBACE,KAACL;QACCQ,MAAK;QACLC,SAAQ;QACRC,aAAY;QACZC,SAAS;QACTC,OAAON;QACPO,UAAU,CAACC,QAAUP,oBAAoBO,MAAMC,MAAM,CAACH,KAAK;QAC3DI,WAAW;YACTC,OAAO;gBACLC,8BACE,KAACjB;oBAAekB,UAAS;8BACvB,cAAA,KAAChB;wBAAQiB,UAAS;;;gBAGtBC,cAAcf,gBAAgB,oBAC5B,KAACL;oBAAekB,UAAS;8BACvB,cAAA,KAACjB;wBAAKoB,OAAM;wBAAQd,MAAK;wBAAQe,SAAS,IAAMhB,oBAAoB;;;YAG1E;QACF;;AAGN"}

package/lib/components/SeriesChart.js

@@ -1,5 +1,5 @@
 import { jsx as _jsx } from "react/jsx-runtime";
-// Copyright 2025 The Perses Authors
+// Copyright The Perses Authors
 // Licensed under the Apache License |  Version 2.0 (the "License");
 // you may not use this file except in compliance with the License.
 // You may obtain a copy of the License at

package/lib/components/SeriesChart.js.map

@@ -1 +1 @@
-{"version":3,"sources":["../../../src/components/SeriesChart.tsx"],"sourcesContent":["// Copyright 2025 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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"}
+{"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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"}

package/lib/components/Settings.js

@@ -1,5 +1,5 @@
 import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
-// Copyright 2025 The Perses Authors
+// Copyright The Perses Authors
 // Licensed under the Apache License, Version 2.0 (the "License");
 // you may not use this file except in compliance with the License.
 // You may obtain a copy of the License at

package/lib/components/Settings.js.map

@@ -1 +1 @@
-{"version":3,"sources":["../../../src/components/Settings.tsx"],"sourcesContent":["// Copyright 2025 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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"}
+{"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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"}

package/lib/components/SwitchSelector.js

@@ -1,4 +1,4 @@
-// Copyright 2025 The Perses Authors
+// Copyright The Perses Authors
 // Licensed under the Apache License |  Version 2.0 (the "License");
 // you may not use this file except in compliance with the License.
 // You may obtain a copy of the License at

package/lib/components/SwitchSelector.js.map

@@ -1 +1 @@
-{"version":3,"sources":["../../../src/components/SwitchSelector.tsx"],"sourcesContent":["// Copyright 2025 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 } from 'react';\nimport { OptionsEditorControl } from '@perses-dev/components';\nimport { Switch } from '@mui/material';\n\nexport interface SwitchSelectorProps {\n  onChange: (newValue: boolean) => void;\n  value?: boolean;\n  label: string;\n}\n\nexport function SwitchSelector({ onChange, value, label }: SwitchSelectorProps): ReactElement {\n  const handleValuesChange = (_: unknown, checked: boolean): void => {\n    onChange(checked);\n  };\n\n  return <OptionsEditorControl label={label} control={<Switch checked={value} onChange={handleValuesChange} />} />;\n}\n"],"names":["OptionsEditorControl","Switch","SwitchSelector","onChange","value","label","handleValuesChange","_","checked","control"],"mappings":"AAAA,oCAAoC;AACpC,oEAAoE;AACpE,mEAAmE;AACnE,0CAA0C;AAC1C,EAAE;AACF,6CAA6C;AAC7C,EAAE;AACF,wEAAwE;AACxE,qEAAqE;AACrE,6EAA6E;AAC7E,sEAAsE;AACtE,iCAAiC;;AAGjC,SAASA,oBAAoB,QAAQ,yBAAyB;AAC9D,SAASC,MAAM,QAAQ,gBAAgB;AAQvC,OAAO,SAASC,eAAe,EAAEC,QAAQ,EAAEC,KAAK,EAAEC,KAAK,EAAuB;IAC5E,MAAMC,qBAAqB,CAACC,GAAYC;QACtCL,SAASK;IACX;IAEA,qBAAO,KAACR;QAAqBK,OAAOA;QAAOI,uBAAS,KAACR;YAAOO,SAASJ;YAAOD,UAAUG;;;AACxF"}
+{"version":3,"sources":["../../../src/components/SwitchSelector.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 } from 'react';\nimport { OptionsEditorControl } from '@perses-dev/components';\nimport { Switch } from '@mui/material';\n\nexport interface SwitchSelectorProps {\n  onChange: (newValue: boolean) => void;\n  value?: boolean;\n  label: string;\n}\n\nexport function SwitchSelector({ onChange, value, label }: SwitchSelectorProps): ReactElement {\n  const handleValuesChange = (_: unknown, checked: boolean): void => {\n    onChange(checked);\n  };\n\n  return <OptionsEditorControl label={label} control={<Switch checked={value} onChange={handleValuesChange} />} />;\n}\n"],"names":["OptionsEditorControl","Switch","SwitchSelector","onChange","value","label","handleValuesChange","_","checked","control"],"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;;AAGjC,SAASA,oBAAoB,QAAQ,yBAAyB;AAC9D,SAASC,MAAM,QAAQ,gBAAgB;AAQvC,OAAO,SAASC,eAAe,EAAEC,QAAQ,EAAEC,KAAK,EAAEC,KAAK,EAAuB;IAC5E,MAAMC,qBAAqB,CAACC,GAAYC;QACtCL,SAASK;IACX;IAEA,qBAAO,KAACR;QAAqBK,OAAOA;QAAOI,uBAAS,KAACR;YAAOO,SAASJ;YAAOD,UAAUG;;;AACxF"}

package/lib/components/TableChart.js

@@ -1,5 +1,5 @@
 import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
-// Copyright 2025 The Perses Authors
+// Copyright The Perses Authors
 // Licensed under the Apache License |  Version 2.0 (the "License");
 // you may not use this file except in compliance with the License.
 // You may obtain a copy of the License at