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

package/lib/bootstrap.js

@@ -1,3 +1,4 @@
+import { jsx as _jsx } from "react/jsx-runtime";
 // Copyright 2024 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.
@@ -10,7 +11,6 @@
 // WITHOUT WARRANTIES OR CONDITIONS OF ANY KIND, either express or implied.
 // See the License for the specific language governing permissions and
 // limitations under the License.
-import { jsx as _jsx } from "react/jsx-runtime";
 import React from 'react';
 import ReactDOM from 'react-dom/client';
 const root = ReactDOM.createRoot(document.getElementById('root'));

package/lib/bootstrap.js.map

@@ -1 +1 @@
-{"version":3,"sources":["../../src/bootstrap.tsx"],"sourcesContent":["// Copyright 2024 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 React from 'react';\nimport ReactDOM from 'react-dom/client';\n\nconst root = ReactDOM.createRoot(document.getElementById('root')!);\nroot.render(<React.StrictMode></React.StrictMode>);\n"],"names":["React","ReactDOM","root","createRoot","document","getElementById","render","StrictMode"],"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;;AAEjC,OAAOA,WAAW,QAAQ;AAC1B,OAAOC,cAAc,mBAAmB;AAExC,MAAMC,OAAOD,SAASE,UAAU,CAACC,SAASC,cAAc,CAAC;AACzDH,KAAKI,MAAM,eAAC,KAACN,MAAMO,UAAU"}
+{"version":3,"sources":["../../src/bootstrap.tsx"],"sourcesContent":["// Copyright 2024 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 React from 'react';\nimport ReactDOM from 'react-dom/client';\n\nconst root = ReactDOM.createRoot(document.getElementById('root')!);\nroot.render(<React.StrictMode></React.StrictMode>);\n"],"names":["React","ReactDOM","root","createRoot","document","getElementById","render","StrictMode"],"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;AAEjC,OAAOA,WAAW,QAAQ;AAC1B,OAAOC,cAAc,mBAAmB;AAExC,MAAMC,OAAOD,SAASE,UAAU,CAACC,SAASC,cAAc,CAAC;AACzDH,KAAKI,MAAM,eAAC,KAACN,MAAMO,UAAU"}

package/lib/cjs/components/FlameChart.js

@@ -231,7 +231,7 @@ function FlameChart(props) {
     // This ensures the chart does not re-render when the onClick event updates state variables
     // like menuPosition or selectedId.
     const flameChart = (0, _react.useMemo)(()=>/*#__PURE__*/ (0, _jsxruntime.jsx)(_components.EChart, {
-            sx: {
+            style: {
                 width: width,
                 height: height - 2 * CONTAINER_PADDING - BREADCRUMB_SPACE
             },

package/lib/cjs/index-federation.js

@@ -1,15 +1,3 @@
-// Copyright 2025 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
-//
-// http://www.apache.org/licenses/LICENSE-2.0
-//
-// Unless required by applicable law or agreed to in writing, software
-// distributed under the License is distributed on an "AS IS" BASIS,
-// WITHOUT WARRANTIES OR CONDITIONS OF ANY KIND, either express or implied.
-// See the License for the specific language governing permissions and
-// limitations under the License.
 "use strict";
 function _getRequireWildcardCache(nodeInterop) {
     if (typeof WeakMap !== "function") return null;
@@ -52,4 +40,16 @@ function _interop_require_wildcard(obj, nodeInterop) {
     }
     return newObj;
 }
+// Copyright 2025 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
+//
+// http://www.apache.org/licenses/LICENSE-2.0
+//
+// Unless required by applicable law or agreed to in writing, software
+// distributed under the License is distributed on an "AS IS" BASIS,
+// WITHOUT WARRANTIES OR CONDITIONS OF ANY KIND, either express or implied.
+// See the License for the specific language governing permissions and
+// limitations under the License.
 Promise.resolve().then(()=>/*#__PURE__*/ _interop_require_wildcard(require("./bootstrap")));

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

@@ -17,23 +17,23 @@ Object.defineProperty(exports, "__esModule", {
 function _export(target, all) {
     for(var name in all)Object.defineProperty(target, name, {
         enumerable: true,
-        get: all[name]
+        get: Object.getOwnPropertyDescriptor(all, name).get
     });
 }
 _export(exports, {
-    buildSamples: function() {
+    get buildSamples () {
         return buildSamples;
     },
-    filterStackTraceById: function() {
+    get filterStackTraceById () {
         return filterStackTraceById;
     },
-    findTotalSampleByName: function() {
+    get findTotalSampleByName () {
         return findTotalSampleByName;
     },
-    getMaxDepth: function() {
+    get getMaxDepth () {
         return getMaxDepth;
     },
-    tableRecursionJson: function() {
+    get tableRecursionJson () {
         return tableRecursionJson;
     }
 });

package/lib/cjs/utils/format.js

@@ -17,14 +17,14 @@ Object.defineProperty(exports, "__esModule", {
 function _export(target, all) {
     for(var name in all)Object.defineProperty(target, name, {
         enumerable: true,
-        get: all[name]
+        get: Object.getOwnPropertyDescriptor(all, name).get
     });
 }
 _export(exports, {
-    formatItemValue: function() {
+    get formatItemValue () {
         return formatItemValue;
     },
-    formatNanoDuration: function() {
+    get formatNanoDuration () {
         return formatNanoDuration;
     }
 });

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

@@ -17,17 +17,17 @@ Object.defineProperty(exports, "__esModule", {
 function _export(target, all) {
     for(var name in all)Object.defineProperty(target, name, {
         enumerable: true,
-        get: all[name]
+        get: Object.getOwnPropertyDescriptor(all, name).get
     });
 }
 _export(exports, {
-    getColorByPackageName: function() {
+    get getColorByPackageName () {
         return getColorByPackageName;
     },
-    getColorByValue: function() {
+    get getColorByValue () {
         return getColorByValue;
     },
-    getSpanColor: function() {
+    get getSpanColor () {
         return getSpanColor;
     }
 });

package/lib/cjs/utils/utils.js

@@ -17,29 +17,29 @@ Object.defineProperty(exports, "__esModule", {
 function _export(target, all) {
     for(var name in all)Object.defineProperty(target, name, {
         enumerable: true,
-        get: all[name]
+        get: Object.getOwnPropertyDescriptor(all, name).get
     });
 }
 _export(exports, {
-    resetSettings: function() {
+    get resetSettings () {
         return resetSettings;
     },
-    usePaletteState: function() {
+    get usePaletteState () {
         return usePaletteState;
     },
-    useShowFlameGraphState: function() {
+    get useShowFlameGraphState () {
         return useShowFlameGraphState;
     },
-    useShowSeriesState: function() {
+    get useShowSeriesState () {
         return useShowSeriesState;
     },
-    useShowSettingsState: function() {
+    get useShowSettingsState () {
         return useShowSettingsState;
     },
-    useShowTableState: function() {
+    get useShowTableState () {
         return useShowTableState;
     },
-    useTraceHeightState: function() {
+    get useTraceHeightState () {
         return useTraceHeightState;
     }
 });

package/lib/components/FlameChart.js

@@ -216,7 +216,7 @@ export function FlameChart(props) {
     // This ensures the chart does not re-render when the onClick event updates state variables
     // like menuPosition or selectedId.
     const flameChart = useMemo(()=>/*#__PURE__*/ _jsx(EChart, {
-            sx: {
+            style: {
                 width: width,
                 height: height - 2 * CONTAINER_PADDING - BREADCRUMB_SPACE
             },

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        sx={{\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","sx","echartsTheme","onEvents","click","alignItems","totalValue","totalSample","otherItemSample","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 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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"}

package/lib/components/SeriesChart.js

@@ -1,3 +1,4 @@
+import { jsx as _jsx } from "react/jsx-runtime";
 // Copyright 2025 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.
@@ -10,7 +11,6 @@
 // WITHOUT WARRANTIES OR CONDITIONS OF ANY KIND |  either express or implied.
 // See the License for the specific language governing permissions and
 // limitations under the License.
-import { jsx as _jsx } from "react/jsx-runtime";
 import { useMemo, useRef } from 'react';
 import { Stack, useTheme } from '@mui/material';
 import { useChartsTheme, EChart, enableDataZoom } from '@perses-dev/components';

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 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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"}

package/lib/components/Settings.js

@@ -1,3 +1,4 @@
+import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
 // Copyright 2025 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.
@@ -10,7 +11,6 @@
 // WITHOUT WARRANTIES OR CONDITIONS OF ANY KIND, either express or implied.
 // See the License for the specific language governing permissions and
 // limitations under the License.
-import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
 import { useState, useMemo } from 'react';
 import RefreshIcon from 'mdi-material-ui/Refresh';
 import PaletteIcon from 'mdi-material-ui/Palette';

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 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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"}

package/lib/components/TableChart.js

@@ -1,3 +1,4 @@
+import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
 // Copyright 2025 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.
@@ -10,7 +11,6 @@
 // WITHOUT WARRANTIES OR CONDITIONS OF ANY KIND |  either express or implied.
 // See the License for the specific language governing permissions and
 // limitations under the License.
-import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
 import { useMemo, useState } from 'react';
 import { Stack, useTheme, Link } from '@mui/material';
 import { Table } from '@perses-dev/components';

package/lib/components/TableChart.js.map

@@ -1 +1 @@
-{"version":3,"sources":["../../../src/components/TableChart.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, useState } from 'react';\nimport { Stack, useTheme, Link } from '@mui/material';\nimport { ProfileData } from '@perses-dev/core';\nimport { Table, TableColumnConfig } from '@perses-dev/components';\nimport { SortingState } from '@tanstack/react-table';\nimport { tableRecursionJson } from '../utils/data-transform';\nimport { TableChartSample } from '../utils/data-model';\nimport { formatItemValue } from '../utils/format';\nimport { SearchBar } from './SearchBar';\n\nconst LARGE_PANEL_TRESHOLD = 600; // heigth treshold to switch to large panel mode\nconst PADDING_TOP = 8;\nconst SCROLL_BAR_WIDTH = 15;\nconst SEARCH_BAR_HEIGHT = 50;\n\nexport interface TableChartProps {\n  width: number;\n  height: number;\n  data: ProfileData;\n  searchValue: string;\n  onSearchValueChange: (value: string) => void;\n  onSelectedIdChange: (id: number) => void;\n}\n\nexport function TableChart(props: TableChartProps): ReactElement {\n  const { width, height, data, searchValue, onSearchValueChange, onSelectedIdChange } = props;\n\n  const theme = useTheme();\n\n  const availableHeight = height;\n  const availableWidth = width - 10;\n\n  const tableData: TableChartSample[] = useMemo(() => {\n    return tableRecursionJson(data.profile.stackTrace, searchValue);\n  }, [data, searchValue]);\n\n  const columns: Array<TableColumnConfig<unknown>> = useMemo(() => {\n    const unit = data.metadata?.units || '';\n\n    const columnSettings: Array<TableColumnConfig<unknown>> = [\n      {\n        accessorKey: 'name',\n        header: 'Name',\n        headerDescription: 'Function name',\n        align: 'left',\n        enableSorting: true,\n        width: 0.5 * availableWidth,\n        cell: (ctx) => {\n          const cellValue = ctx.getValue();\n          return (\n            <Link\n              href=\"#\"\n              underline=\"hover\"\n              onClick={(e) => {\n                e.preventDefault();\n                const currentSample = ctx.row.original as TableChartSample;\n                onSelectedIdChange(currentSample.id); // focus on this item in the flame graph\n                onSearchValueChange(currentSample.name);\n              }}\n            >\n              {cellValue}\n            </Link>\n          );\n        },\n        cellDescription: () => '',\n      },\n      {\n        accessorKey: 'self',\n        header: 'Self',\n        headerDescription: 'Function self samples',\n        align: 'right',\n        enableSorting: true,\n        width: 0.25 * availableWidth - SCROLL_BAR_WIDTH,\n        cell: (ctx) => {\n          const cellValue = ctx.getValue();\n          return formatItemValue(unit, cellValue);\n        },\n      },\n      {\n        accessorKey: 'total',\n        header: 'Total',\n        headerDescription: 'Function total samples',\n        align: 'right',\n        enableSorting: true,\n        width: 0.25 * availableWidth,\n        cell: (ctx) => {\n          const cellValue = ctx.getValue();\n          return formatItemValue(unit, cellValue);\n        },\n      },\n    ];\n\n    return columnSettings;\n  }, [data.metadata?.units, availableWidth, onSearchValueChange, onSelectedIdChange]);\n\n  const [sorting, setSorting] = useState<SortingState>([{ id: 'total', desc: true }]);\n\n  return (\n    <Stack\n      width={availableWidth}\n      height={availableHeight}\n      gap={1}\n      sx={{\n        '& .MuiTable-root': {\n          borderCollapse: 'collapse',\n        },\n        '& .MuiTableCell-root': {\n          borderBottom: `1px solid ${theme.palette.divider}`,\n          borderRight: `1px solid ${theme.palette.divider}`,\n          '&:last-child': {\n            borderRight: 'none',\n          },\n        },\n      }}\n    >\n      <SearchBar searchValue={searchValue} onSearchValueChange={onSearchValueChange} />\n      <Table\n        data={tableData}\n        columns={columns}\n        height={availableHeight - PADDING_TOP - SEARCH_BAR_HEIGHT}\n        width={availableWidth}\n        density={availableHeight < LARGE_PANEL_TRESHOLD ? 'compact' : 'standard'}\n        defaultColumnWidth=\"auto\"\n        defaultColumnHeight=\"auto\"\n        sorting={sorting}\n        onSortingChange={setSorting}\n      />\n    </Stack>\n  );\n}\n"],"names":["useMemo","useState","Stack","useTheme","Link","Table","tableRecursionJson","formatItemValue","SearchBar","LARGE_PANEL_TRESHOLD","PADDING_TOP","SCROLL_BAR_WIDTH","SEARCH_BAR_HEIGHT","TableChart","props","width","height","data","searchValue","onSearchValueChange","onSelectedIdChange","theme","availableHeight","availableWidth","tableData","profile","stackTrace","columns","unit","metadata","units","columnSettings","accessorKey","header","headerDescription","align","enableSorting","cell","ctx","cellValue","getValue","href","underline","onClick","e","preventDefault","currentSample","row","original","id","name","cellDescription","sorting","setSorting","desc","gap","sx","borderCollapse","borderBottom","palette","divider","borderRight","density","defaultColumnWidth","defaultColumnHeight","onSortingChange"],"mappings":"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"}
+{"version":3,"sources":["../../../src/components/TableChart.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, useState } from 'react';\nimport { Stack, useTheme, Link } from '@mui/material';\nimport { ProfileData } from '@perses-dev/core';\nimport { Table, TableColumnConfig } from '@perses-dev/components';\nimport { SortingState } from '@tanstack/react-table';\nimport { tableRecursionJson } from '../utils/data-transform';\nimport { TableChartSample } from '../utils/data-model';\nimport { formatItemValue } from '../utils/format';\nimport { SearchBar } from './SearchBar';\n\nconst LARGE_PANEL_TRESHOLD = 600; // heigth treshold to switch to large panel mode\nconst PADDING_TOP = 8;\nconst SCROLL_BAR_WIDTH = 15;\nconst SEARCH_BAR_HEIGHT = 50;\n\nexport interface TableChartProps {\n  width: number;\n  height: number;\n  data: ProfileData;\n  searchValue: string;\n  onSearchValueChange: (value: string) => void;\n  onSelectedIdChange: (id: number) => void;\n}\n\nexport function TableChart(props: TableChartProps): ReactElement {\n  const { width, height, data, searchValue, onSearchValueChange, onSelectedIdChange } = props;\n\n  const theme = useTheme();\n\n  const availableHeight = height;\n  const availableWidth = width - 10;\n\n  const tableData: TableChartSample[] = useMemo(() => {\n    return tableRecursionJson(data.profile.stackTrace, searchValue);\n  }, [data, searchValue]);\n\n  const columns: Array<TableColumnConfig<unknown>> = useMemo(() => {\n    const unit = data.metadata?.units || '';\n\n    const columnSettings: Array<TableColumnConfig<unknown>> = [\n      {\n        accessorKey: 'name',\n        header: 'Name',\n        headerDescription: 'Function name',\n        align: 'left',\n        enableSorting: true,\n        width: 0.5 * availableWidth,\n        cell: (ctx) => {\n          const cellValue = ctx.getValue();\n          return (\n            <Link\n              href=\"#\"\n              underline=\"hover\"\n              onClick={(e) => {\n                e.preventDefault();\n                const currentSample = ctx.row.original as TableChartSample;\n                onSelectedIdChange(currentSample.id); // focus on this item in the flame graph\n                onSearchValueChange(currentSample.name);\n              }}\n            >\n              {cellValue}\n            </Link>\n          );\n        },\n        cellDescription: () => '',\n      },\n      {\n        accessorKey: 'self',\n        header: 'Self',\n        headerDescription: 'Function self samples',\n        align: 'right',\n        enableSorting: true,\n        width: 0.25 * availableWidth - SCROLL_BAR_WIDTH,\n        cell: (ctx) => {\n          const cellValue = ctx.getValue();\n          return formatItemValue(unit, cellValue);\n        },\n      },\n      {\n        accessorKey: 'total',\n        header: 'Total',\n        headerDescription: 'Function total samples',\n        align: 'right',\n        enableSorting: true,\n        width: 0.25 * availableWidth,\n        cell: (ctx) => {\n          const cellValue = ctx.getValue();\n          return formatItemValue(unit, cellValue);\n        },\n      },\n    ];\n\n    return columnSettings;\n  }, [data.metadata?.units, availableWidth, onSearchValueChange, onSelectedIdChange]);\n\n  const [sorting, setSorting] = useState<SortingState>([{ id: 'total', desc: true }]);\n\n  return (\n    <Stack\n      width={availableWidth}\n      height={availableHeight}\n      gap={1}\n      sx={{\n        '& .MuiTable-root': {\n          borderCollapse: 'collapse',\n        },\n        '& .MuiTableCell-root': {\n          borderBottom: `1px solid ${theme.palette.divider}`,\n          borderRight: `1px solid ${theme.palette.divider}`,\n          '&:last-child': {\n            borderRight: 'none',\n          },\n        },\n      }}\n    >\n      <SearchBar searchValue={searchValue} onSearchValueChange={onSearchValueChange} />\n      <Table\n        data={tableData}\n        columns={columns}\n        height={availableHeight - PADDING_TOP - SEARCH_BAR_HEIGHT}\n        width={availableWidth}\n        density={availableHeight < LARGE_PANEL_TRESHOLD ? 'compact' : 'standard'}\n        defaultColumnWidth=\"auto\"\n        defaultColumnHeight=\"auto\"\n        sorting={sorting}\n        onSortingChange={setSorting}\n      />\n    </Stack>\n  );\n}\n"],"names":["useMemo","useState","Stack","useTheme","Link","Table","tableRecursionJson","formatItemValue","SearchBar","LARGE_PANEL_TRESHOLD","PADDING_TOP","SCROLL_BAR_WIDTH","SEARCH_BAR_HEIGHT","TableChart","props","width","height","data","searchValue","onSearchValueChange","onSelectedIdChange","theme","availableHeight","availableWidth","tableData","profile","stackTrace","columns","unit","metadata","units","columnSettings","accessorKey","header","headerDescription","align","enableSorting","cell","ctx","cellValue","getValue","href","underline","onClick","e","preventDefault","currentSample","row","original","id","name","cellDescription","sorting","setSorting","desc","gap","sx","borderCollapse","borderBottom","palette","divider","borderRight","density","defaultColumnWidth","defaultColumnHeight","onSortingChange"],"mappings":"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"}