@perses-dev/flame-chart-plugin 0.2.0 → 0.3.0

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

@@ -21,14 +21,17 @@ function _export(target, all) {
     });
 }
 _export(exports, {
-    filterJson: function() {
-        return filterJson;
+    buildSamples: function() {
+        return buildSamples;
+    },
+    filterStackTraceById: function() {
+        return filterStackTraceById;
     },
     findTotalSampleByName: function() {
         return findTotalSampleByName;
     },
-    recursionJson: function() {
-        return recursionJson;
+    getMaxDepth: function() {
+        return getMaxDepth;
     },
     tableRecursionJson: function() {
         return tableRecursionJson;
@@ -36,30 +39,32 @@ _export(exports, {
 });
 const _palettegen = require("./palette-gen");
 const _format = require("./format");
-function filterJson(json, id) {
-    if (id === null) {
-        return json;
+function filterStackTraceById(trace, id) {
+    if (id === undefined) {
+        return trace;
     }
-    const recur = (item, id)=>{
-        if (item.id === id) {
-            return item;
+    const recur = (trace, id)=>{
+        if (trace.id === id) {
+            return trace;
         }
-        for (const child of item.children || []){
+        for (const child of trace.children ?? []){
             const temp = recur(child, id);
             if (temp) {
-                item.children = [
+                trace = {
+                    ...trace
+                }; // Create a shallow copy of the trace to avoid mutating the original object
+                // Override parents' values
+                trace.children = [
                     temp
                 ];
-                // change the parents' values
-                item.start = temp.start;
-                item.end = temp.end;
-                // item.self = temp.self;
-                // item.total = temp.total;
-                return item;
+                trace.start = temp.start;
+                trace.end = temp.end;
+                return trace;
             }
         }
+        return undefined;
     };
-    return recur(json, id) || json;
+    return recur(trace, id) ?? trace;
 }
 // build the name of the corresponding flamechart item
 function formatName(item, rootVal, unit) {
@@ -83,9 +88,9 @@ function formatName(item, rootVal, unit) {
     };
     return recur(json);
 }
-function recursionJson(palette, metadata, jsonObj, searchValue, id) {
+function buildSamples(palette, metadata, traces, searchValue, id) {
     const data = [];
-    const filteredJson = filterJson(structuredClone(jsonObj), id);
+    const filteredJson = filterStackTraceById(traces, id);
     const rootVal = filteredJson.total; // total samples of root node
     const currentVal = getCurrentTotalValue(filteredJson, id); // total samples of the selected item, used to generate items colors
     const recur = (item)=>{
@@ -150,3 +155,9 @@ function findTotalSampleByName(seriesData, name) {
     const totalSample = item?.value[8];
     return Number(totalSample);
 }
+function getMaxDepth(trace) {
+    if (!trace.children?.length) {
+        return 1;
+    }
+    return 1 + Math.max(...trace.children.map(getMaxDepth));
+}

package/lib/cjs/utils/utils.js

@@ -38,6 +38,9 @@ _export(exports, {
     },
     useShowTableState: function() {
         return useShowTableState;
+    },
+    useTraceHeightState: function() {
+        return useTraceHeightState;
     }
 });
 const _immer = require("immer");
@@ -52,6 +55,17 @@ function usePaletteState(props) {
         handlePaletteChange
     };
 }
+function useTraceHeightState(props) {
+    const { onChange, value } = props;
+    const handleTraceHeightChange = (event)=>{
+        onChange((0, _immer.produce)(value, (draft)=>{
+            draft.traceHeight = event.target.value ? Number(event.target.value) : undefined;
+        }));
+    };
+    return {
+        handleTraceHeightChange
+    };
+}
 function useShowSettingsState(props) {
     const { onChange, value } = props;
     const handleShowSettingsChange = (newValue)=>{

package/lib/components/FlameChart.js

@@ -17,7 +17,7 @@ import { useChartsTheme, EChart } from '@perses-dev/components';
 import RefreshIcon from 'mdi-material-ui/Refresh';
 import EyeIcon from 'mdi-material-ui/EyeOutline';
 import ContentCopyIcon from 'mdi-material-ui/ContentCopy';
-import { recursionJson, findTotalSampleByName } from '../utils/data-transform';
+import { buildSamples, findTotalSampleByName } from '../utils/data-transform';
 import { generateTooltip } from '../utils/tooltip';
 import { CustomBreadcrumb } from './CustomBreadcrumb';
 const ITEM_GAP = 2; // vertical gap between flame chart items
@@ -36,7 +36,7 @@ export function FlameChart(props) {
         name: ''
     });
     const [isCopied, setIsCopied] = useState(false);
-    const seriesData = useMemo(()=>recursionJson(palette, data.metadata, data.profile.stackTrace, searchValue, selectedId), [
+    const seriesData = useMemo(()=>buildSamples(palette, data.metadata, data.profile.stackTrace, searchValue, selectedId), [
         palette,
         data.metadata,
         data.profile.stackTrace,

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 { recursionJson, 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    () => recursionJson(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","recursionJson","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        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":"AAAA,oCAAoC;AACpC,kEAAkE;AAClE,mEAAmE;AACnE,0CAA0C;AAC1C,EAAE;AACF,6CAA6C;AAC7C,EAAE;AACF,sEAAsE;AACtE,oEAAoE;AACpE,2EAA2E;AAC3E,sEAAsE;AACtE,iCAAiC;;AAQjC,SAASA,KAAK,EAAEC,GAAG,EAAEC,IAAI,EAAEC,QAAQ,EAAEC,OAAO,EAAEC,QAAQ,QAAQ,gBAAgB;AAC9E,SAAuBC,QAAQ,EAAEC,OAAO,QAAoB,QAAQ;AAEpE,SAASC,cAAc,EAAEC,MAAM,QAA+B,yBAAyB;AACvF,OAAOC,iBAAiB,0BAA0B;AAClD,OAAOC,aAAa,6BAA6B;AACjD,OAAOC,qBAAqB,8BAA8B;AAE1D,SAASC,YAAY,EAAEC,qBAAqB,QAAQ,0BAA0B;AAC9E,SAASC,eAAe,QAAQ,mBAAmB;AAEnD,SAASC,gBAAgB,QAAQ,qBAAqB;AAEtD,MAAMC,WAAW,GAAG,yCAAyC;AAC7D,MAAMC,cAAc,GAAG,2CAA2C;AAClE,MAAMC,cAAc,IAAI,2CAA2C;AACnE,MAAMC,4BAA4B;AAClC,MAAMC,oBAAoB;AAC1B,MAAMC,mBAAmB;AAYzB,OAAO,SAASC,WAAWC,KAAsB;IAC/C,MAAM,EAAEC,KAAK,EAAEC,MAAM,EAAEC,IAAI,EAAEC,OAAO,EAAEC,UAAU,EAAEC,WAAW,EAAEC,kBAAkB,EAAE,GAAGP;IACtF,MAAMQ,QAAQ3B;IACd,MAAM4B,cAAczB;IACpB,MAAM,CAAC0B,cAAcC,gBAAgB,GAAG7B,SAAoD;IAC5F,MAAM,CAAC8B,cAAcC,gBAAgB,GAAG/B,SAAuC;QAAEgC,IAAI;QAAGC,MAAM;IAAG;IACjG,MAAM,CAACC,UAAUC,YAAY,GAAGnC,SAAS;IAEzC,MAAMoC,aAAanC,QACjB,IAAMM,aAAae,SAASD,KAAKgB,QAAQ,EAAEhB,KAAKiB,OAAO,CAACC,UAAU,EAAEf,aAAaD,aACjF;QAACD;QAASD,KAAKgB,QAAQ;QAAEhB,KAAKiB,OAAO,CAACC,UAAU;QAAEhB;QAAYC;KAAY;IAG5E,MAAMgB,kBAAkB,CAACC;QACvB,MAAMpB,OAAeoB,OAAOpB,IAAI;QAChC,MAAMqB,eAAerB,KAAKsB,KAAK,CAAC,EAAE;QAClC,MAAMC,aAAavB,KAAKY,IAAI;QAC5BF,gBAAgB;YAAEC,IAAIY;YAAYX,MAAMS;QAAa;QAErD,yEAAyE;QACzE,oDAAoD;QACpD,IAAI,WAAWD,QAAQ;YACrB,MAAMI,aAAaJ,OAAOK,KAAK;YAC/BjB,gBAAgB;gBACdkB,QAAQF,WAAWC,KAAK,CAACE,OAAO,GAAG;gBACnCC,QAAQJ,WAAWC,KAAK,CAACI,OAAO,GAAG;YACrC;QACF;IACF;IAEA,MAAMC,mBAAmB;QACvB1B,mBAAmBK,aAAaE,EAAE;QAClCoB;IACF;IAEA,MAAMC,yBAAyB;QAC7B,IAAI,AAAC9B,CAAAA,cAAcA,eAAe,CAAA,KAAMO,aAAaG,IAAI,EAAE;YACzDqB,UAAUC,SAAS,CAACC,SAAS,CAAC1B,aAAaG,IAAI;QACjD;QACAE,YAAY;IACd;IAEA,MAAMsB,mBAAmB;QACvB,IAAIlC,YAAY;YACdE,mBAAmB;QACrB;QACA2B;IACF;IAEA,MAAMA,cAAc;QAClBvB,gBAAgB;QAChB,IAAIK,UAAUC,YAAY;IAC5B;IAEA,MAAMuB,aAAqC,CAACjB,QAAsCkB;QAChF,MAAMC,QAAQD,IAAIhB,KAAK,CAAC;QACxB,MAAMkB,QAAQF,IAAIG,KAAK,CAAC;YAACH,IAAIhB,KAAK,CAAC;YAAIiB;SAAM;QAC7C,MAAMG,MAAMJ,IAAIG,KAAK,CAAC;YAACH,IAAIhB,KAAK,CAAC;YAAIiB;SAAM;QAC3C,MAAMxC,SAAS,AAAE,CAAA,AAACuC,IAAIK,IAAI,IAAIL,IAAIK,IAAI,CAAC;YAAC;YAAG;SAAE,KAAM;YAAC;YAAG;SAAG,AAAD,CAAe,CAAC,EAAE;QAC3E,MAAM7C,QAAQ,AAAC4C,CAAAA,KAAK,CAAC,EAAE,IAAI,CAAA,IAAMF,CAAAA,OAAO,CAAC,EAAE,IAAI,CAAA;QAE/C,OAAO;YACLI,MAAM;YACNC,YAAY;gBAAC;aAAQ;YACrBC,OAAO;gBACLC,GAAGP,OAAO,CAAC,EAAE;gBACbQ,GAAG,AAACR,CAAAA,OAAO,CAAC,EAAE,IAAI,CAAA,IAAK,AAACzC,CAAAA,UAAU,CAAA,IAAK;gBACvCD;gBACAC,QAAQ,AAACA,CAAAA,UAAUT,QAAO,IAAKA;gBAC/B2D,GAAG;YACL;YACAC,OAAO;gBACLC,MAAMb,IAAIc,MAAM,CAAC;YACnB;YACAC,UAAU;gBACRH,OAAO;oBACLI,QAAQ;gBACV;YACF;YACAC,YAAY;gBACVC,UAAU;YACZ;YACAC,aAAa;gBACXP,OAAO;oBACLQ,MAAMpB,IAAIhB,KAAK,CAAC;oBAChB6B,MAAM;oBACNrD,OAAOA,QAAQ;oBACf6D,UAAU;oBACVC,UAAU;oBACVC,iBAAiB;gBACnB;gBACAR,UAAU;oBACRH,OAAO;wBACLI,QAAQ;wBACRQ,WAAW;oBACb;gBACF;YACF;QACF;IACF;IAEA,MAAMC,SAA4BnF,QAAQ;QACxC,IAAIoB,KAAKiB,OAAO,CAACC,UAAU,KAAK8C,WAAW,OAAO1D,YAAY2D,YAAY;QAE1E,MAAMC,WAAWC,KAAKC,GAAG,IAAIrD,WAAWsD,GAAG,CAAC,CAACC,IAAMA,EAAEhD,KAAK,CAAC,EAAE,IAAI,mCAAmC;QACpG,MAAMiD,WAAWJ,KAAKC,GAAG,CAACrE,SAASN,4BAA4BD,cAAcD,aAAa2E;QAC1F,MAAMM,aAAazD,UAAU,CAAC,EAAE,EAAEO,KAAK,CAAC,EAAE,EAAE,oCAAoC;QAChF,MAAMmD,WAAW1D,UAAU,CAAC,EAAE,EAAEO,KAAK,CAAC,EAAE,EAAE,kCAAkC;QAC5E,MAAMoD,WAAWF;QACjB,MAAMG,WAAWF;QAEjB,6CAA6C;QAC7C,MAAMG,UAAU,AAAC7E,CAAAA,SAAUwE,CAAAA,WAAW,CAAA,IAAKjF,QAAO,IAAK,IAAI;QAE3D,MAAMyE,SAAS;YACbc,SAAS;gBACPC,cAAc;gBACdC,SAAS;gBACTC,WAAW,CAAC5D,SAA2BhC,gBAAgBgC,QAAQpB,KAAKgB,QAAQ,EAAEiE;gBAC9EC,iBAAiB7E,MAAMJ,OAAO,CAACkF,UAAU,CAACC,KAAK;gBAC/CC,aAAahF,MAAMJ,OAAO,CAACkF,UAAU,CAACC,KAAK;gBAC3CE,WAAW;oBACTC,OAAOlF,MAAMJ,OAAO,CAACyD,IAAI,CAAC8B,OAAO;gBACnC;YACF;YACAC,OAAO;gBACLC,MAAM;gBACNC,KAAKjB;gBACLN,KAAKO;gBACLiB,WAAW;oBACTF,MAAM;gBACR;YACF;YACAG,OAAO;gBACLH,MAAM;gBACNtB,KAAKG;gBACLuB,SAAS;gBACTF,WAAW;oBACTF,MAAM;gBACR;YACF;YACAE,WAAW;gBACTjC,UAAU;gBACV7D,OAAOA,QAAQ;YACjB;YACAiG,MAAM;gBACJC,MAAM;gBACNC,OAAO;gBACPC,KAAKtB,UAAU;gBACfuB,QAAQvB;YACV;YACAwB,QAAQ;gBACN;oBACExD,MAAM;oBACNP;oBACAgE,QAAQ;wBACNtD,GAAG;4BAAC;4BAAG;4BAAG;yBAAE;wBACZC,GAAG;oBACL;oBACAhD,MAAMe;gBACR;aACD;QACH;QAEA,OAAOgD;IACT,GAAG;QAAC/D;QAAMM;QAAaD;QAAOP;QAAOiB;QAAYhB;KAAO;IAExD,uFAAuF;IACvF,2FAA2F;IAC3F,mCAAmC;IACnC,MAAMuG,aAAa1H,QACjB,kBACE,KAACE;YACCyH,IAAI;gBACFzG,OAAOA;gBACPC,QAAQA,SAAS,IAAIL,oBAAoBC;YAC3C;YACAoE,QAAQA;YACR1D,OAAOC,YAAYkG,YAAY;YAC/BC,UAAU;gBACRC,OAAOvF;YACT;YAGJ;QAACb,YAAYkG,YAAY;QAAEzG;QAAQgE;QAAQjE;KAAM;IAGnD,qBACE,MAACzB;QACC6E,OAAO;YACLpD,OAAOA;YACPC,QAAQA;QACV;QACA4G,YAAW;;0BAEX,KAACtH;gBACCuH,YAAY7F,UAAU,CAAC,EAAE,EAAEO,KAAK,CAAC,EAAE,IAAI;gBACvCuF,aAAa9F,UAAU,CAAC,EAAE,EAAEO,KAAK,CAAC,EAAE,IAAI;gBACxCwF,iBAAiB3H,sBAAsB4B,YAAYb;gBACnDE,oBAAoBA;;YAErBkG;0BACD,MAAC/H;gBACCgI,IAAI;oBACF,oBAAoB;wBAClBrB,iBAAiB7E,MAAMJ,OAAO,CAACkF,UAAU,CAACC,KAAK;wBAC/CG,OAAOlF,MAAMJ,OAAO,CAACyD,IAAI,CAAC8B,OAAO;wBACjCZ,SAAS;wBACTmC,eAAe;oBACjB;oBACA,uBAAuB;wBACrB,WAAW;4BACT7B,iBAAiB7E,MAAMJ,OAAO,CAAC+G,MAAM,CAACC,KAAK;wBAC7C;oBACF;gBACF;gBACAC,MAAM3G,iBAAiB;gBACvB4G,SAASpF;gBACTqF,iBAAgB;gBAChBC,gBAAgB9G,iBAAiB,OAAO;oBAAE2F,KAAK3F,aAAaqB,MAAM;oBAAEoE,MAAMzF,aAAamB,MAAM;gBAAC,IAAIsC;;kCAElG,KAAC1F;wBACCiI,IAAI;4BACFe,aAAa;4BACbP,eAAe;wBACjB;kCAECtG,aAAaG,IAAI;;kCAEpB,KAACnC;wBAAQ8H,IAAI;4BAAErB,iBAAiB7E,MAAMJ,OAAO,CAACsH,OAAO;wBAAC;;kCACtD,MAAC/I;wBAASgJ,SAAS1F;;0CACjB,KAAC9C;gCAAQyI,UAAS;gCAAQlC,OAAM;gCAAYgB,IAAI;oCAAEmB,aAAa;gCAAO;;4BAAK;;;kCAG7E,MAAClJ;wBAASgJ,SAASxF;wBAAwB2F,UAAU9G;;0CACnD,KAAC5B;gCAAgBwI,UAAS;gCAAQlC,OAAM;gCAAYgB,IAAI;oCAAEmB,aAAa;gCAAO;;4BAC7E7G,WAAW,WAAW;;;kCAEzB,MAACrC;wBAASgJ,SAASpF;;0CACjB,KAACrD;gCAAY0I,UAAS;gCAAQlC,OAAM;gCAAYgB,IAAI;oCAAEmB,aAAa;gCAAO;;4BAAK;;;;;;;AAMzF"}

package/lib/components/FlameChartOptionsEditorSettings.d.ts.map

@@ -1 +1 @@
-{"version":3,"file":"FlameChartOptionsEditorSettings.d.ts","sourceRoot":"","sources":["../../../src/components/FlameChartOptionsEditorSettings.tsx"],"names":[],"mappings":"AAaA,OAAO,EAAE,YAAY,EAAE,MAAM,OAAO,CAAC;AAGrC,OAAO,EAAE,4BAA4B,EAAE,MAAM,sBAAsB,CAAC;AAYpE,wBAAgB,+BAA+B,CAAC,KAAK,EAAE,4BAA4B,GAAG,YAAY,CAiCjG"}
+{"version":3,"file":"FlameChartOptionsEditorSettings.d.ts","sourceRoot":"","sources":["../../../src/components/FlameChartOptionsEditorSettings.tsx"],"names":[],"mappings":"AAaA,OAAO,EAAE,YAAY,EAAE,MAAM,OAAO,CAAC;AAQrC,OAAO,EAAE,4BAA4B,EAAE,MAAM,sBAAsB,CAAC;AAapE,wBAAgB,+BAA+B,CAAC,KAAK,EAAE,4BAA4B,GAAG,YAAY,CA6CjG"}

package/lib/components/FlameChartOptionsEditorSettings.js

@@ -11,9 +11,9 @@
 // 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 { OptionsEditorGroup, OptionsEditorGrid, OptionsEditorColumn } from '@perses-dev/components';
-import { Button } from '@mui/material';
-import { usePaletteState, useShowSettingsState, useShowSeriesState, useShowTableState, useShowFlameGraphState, resetSettings } from '../utils/utils';
+import { OptionsEditorGroup, OptionsEditorGrid, OptionsEditorColumn, OptionsEditorControl } from '@perses-dev/components';
+import { Button, TextField } from '@mui/material';
+import { usePaletteState, useShowSettingsState, useShowSeriesState, useShowTableState, useShowFlameGraphState, resetSettings, useTraceHeightState } from '../utils/utils';
 import { PaletteSelector } from './PaletteSelector';
 import { SwitchSelector } from './SwitchSelector';
 export function FlameChartOptionsEditorSettings(props) {
@@ -23,15 +23,32 @@ export function FlameChartOptionsEditorSettings(props) {
     const { handleShowSeriesChange } = useShowSeriesState(props);
     const { handleShowTableChange } = useShowTableState(props);
     const { handleShowFlameGraphChange } = useShowFlameGraphState(props);
+    const { handleTraceHeightChange } = useTraceHeightState(props);
     return /*#__PURE__*/ _jsxs(OptionsEditorGrid, {
         children: [
             /*#__PURE__*/ _jsx(OptionsEditorColumn, {
-                children: /*#__PURE__*/ _jsx(OptionsEditorGroup, {
+                children: /*#__PURE__*/ _jsxs(OptionsEditorGroup, {
                     title: "Misc",
-                    children: /*#__PURE__*/ _jsx(PaletteSelector, {
-                        value: value.palette,
-                        onChange: handlePaletteChange
-                    })
+                    children: [
+                        /*#__PURE__*/ _jsx(PaletteSelector, {
+                            value: value.palette,
+                            onChange: handlePaletteChange
+                        }),
+                        /*#__PURE__*/ _jsx(OptionsEditorControl, {
+                            label: "Trace Height",
+                            control: /*#__PURE__*/ _jsx(TextField, {
+                                type: "number",
+                                value: value.traceHeight ?? '',
+                                slotProps: {
+                                    htmlInput: {
+                                        min: 0,
+                                        step: 1
+                                    }
+                                },
+                                onChange: handleTraceHeightChange
+                            })
+                        })
+                    ]
                 })
             }),
             /*#__PURE__*/ _jsx(OptionsEditorColumn, {

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 { OptionsEditorGroup, OptionsEditorGrid, OptionsEditorColumn } from '@perses-dev/components';\nimport { Button } from '@mui/material';\nimport { FlameChartOptionsEditorProps } from '../flame-chart-model';\nimport {\n  usePaletteState,\n  useShowSettingsState,\n  useShowSeriesState,\n  useShowTableState,\n  useShowFlameGraphState,\n  resetSettings,\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\n  return (\n    <OptionsEditorGrid>\n      <OptionsEditorColumn>\n        <OptionsEditorGroup title=\"Misc\">\n          <PaletteSelector value={value.palette} onChange={handlePaletteChange} />\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","Button","usePaletteState","useShowSettingsState","useShowSeriesState","useShowTableState","useShowFlameGraphState","resetSettings","PaletteSelector","SwitchSelector","FlameChartOptionsEditorSettings","props","value","handlePaletteChange","handleShowSettingsChange","handleShowSeriesChange","handleShowTableChange","handleShowFlameGraphChange","title","palette","onChange","label","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,SAASA,kBAAkB,EAAEC,iBAAiB,EAAEC,mBAAmB,QAAQ,yBAAyB;AACpG,SAASC,MAAM,QAAQ,gBAAgB;AAEvC,SACEC,eAAe,EACfC,oBAAoB,EACpBC,kBAAkB,EAClBC,iBAAiB,EACjBC,sBAAsB,EACtBC,aAAa,QACR,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,GAAGX,gBAAgBS;IAChD,MAAM,EAAEG,wBAAwB,EAAE,GAAGX,qBAAqBQ;IAC1D,MAAM,EAAEI,sBAAsB,EAAE,GAAGX,mBAAmBO;IACtD,MAAM,EAAEK,qBAAqB,EAAE,GAAGX,kBAAkBM;IACpD,MAAM,EAAEM,0BAA0B,EAAE,GAAGX,uBAAuBK;IAE9D,qBACE,MAACZ;;0BACC,KAACC;0BACC,cAAA,KAACF;oBAAmBoB,OAAM;8BACxB,cAAA,KAACV;wBAAgBI,OAAOA,MAAMO,OAAO;wBAAEC,UAAUP;;;;0BAGrD,KAACb;0BACC,cAAA,MAACF;oBAAmBoB,OAAM;;sCACxB,KAACT;4BAAeY,OAAM;4BAAeT,OAAOA,MAAMU,YAAY;4BAAEF,UAAUN;;sCAC1E,KAACL;4BAAeY,OAAM;4BAAcT,OAAOA,MAAMW,UAAU;4BAAEH,UAAUL;;sCACvE,KAACN;4BAAeY,OAAM;4BAAaT,OAAOA,MAAMY,SAAS;4BAAEJ,UAAUJ;;sCACrE,KAACP;4BAAeY,OAAM;4BAAmBT,OAAOA,MAAMa,cAAc;4BAAEL,UAAUH;;;;;0BAGpF,KAACjB;0BACC,cAAA,KAACF;oBAAmBoB,OAAM;8BACxB,cAAA,KAACjB;wBAAOyB,SAAQ;wBAAWC,OAAM;wBAAYC,SAAS,IAAMrB,cAAcI;kCAAQ;;;;;;AAO5F"}
+{"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"}

package/lib/components/FlameChartPanel.d.ts.map

@@ -1 +1 @@
-{"version":3,"file":"FlameChartPanel.d.ts","sourceRoot":"","sources":["../../../src/components/FlameChartPanel.tsx"],"names":[],"mappings":"AAgBA,OAAO,EAAE,EAAE,EAAuB,MAAM,OAAO,CAAC;AAChD,OAAO,EAAE,WAAW,EAAE,MAAM,kBAAkB,CAAC;AAC/C,OAAO,EAAE,UAAU,EAAE,MAAM,2BAA2B,CAAC;AACvD,OAAO,EAAE,iBAAiB,EAAE,MAAM,sBAAsB,CAAC;AASzD,MAAM,MAAM,oBAAoB,GAAG,UAAU,CAAC,iBAAiB,EAAE,WAAW,CAAC,CAAC;AAE9E,eAAO,MAAM,eAAe,EAAE,EAAE,CAAC,oBAAoB,CAqIpD,CAAC"}
+{"version":3,"file":"FlameChartPanel.d.ts","sourceRoot":"","sources":["../../../src/components/FlameChartPanel.tsx"],"names":[],"mappings":"AAgBA,OAAO,EAAE,EAAE,EAAgC,MAAM,OAAO,CAAC;AACzD,OAAO,EAAE,WAAW,EAAc,MAAM,kBAAkB,CAAC;AAC3D,OAAO,EAAE,UAAU,EAAE,MAAM,2BAA2B,CAAC;AACvD,OAAO,EAAE,iBAAiB,EAAE,MAAM,sBAAsB,CAAC;AAUzD,MAAM,MAAM,oBAAoB,GAAG,UAAU,CAAC,iBAAiB,EAAE,WAAW,CAAC,CAAC;AAE9E,eAAO,MAAM,eAAe,EAAE,EAAE,CAAC,oBAAoB,CA+JpD,CAAC"}

package/lib/components/FlameChartPanel.js

@@ -13,12 +13,13 @@
 import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
 import { useChartsTheme } from '@perses-dev/components';
 import { Stack, Typography, useMediaQuery, useTheme } from '@mui/material';
-import { useState, useEffect } from 'react';
+import { useState, useEffect, useMemo } from 'react';
+import { filterStackTraceById, getMaxDepth } from '../utils/data-transform';
 import { FlameChart } from './FlameChart';
 import { Settings } from './Settings';
 import { TableChart } from './TableChart';
 import { SeriesChart } from './SeriesChart';
-const LARGE_PANEL_TRESHOLD = 600;
+const LARGE_PANEL_THRESHOLD = 600;
 const DEFAULT_SERIES_CHART_HEIGHT = 200;
 export const FlameChartPanel = (props)=>{
     const { contentDimensions, queryResults, spec } = props;
@@ -38,8 +39,22 @@ export const FlameChartPanel = (props)=>{
         spec
     ]);
     const chartsTheme = useChartsTheme();
-    const flameChartData = queryResults[0];
-    if (contentDimensions === undefined) return null;
+    const flameChartData = useMemo(()=>{
+        return queryResults[0];
+    }, [
+        queryResults
+    ]);
+    const selectedStackTrace = useMemo(()=>{
+        if (!flameChartData) return undefined;
+        if (!selectedId) return flameChartData.data.profile.stackTrace;
+        return filterStackTraceById(flameChartData.data.profile.stackTrace, selectedId);
+    }, [
+        flameChartData,
+        selectedId
+    ]);
+    const maxDepth = useMemo(()=>selectedStackTrace ? getMaxDepth(selectedStackTrace) : 0, [
+        selectedStackTrace
+    ]);
     const noDataTextStyle = chartsTheme.noDataOption.title.textStyle;
     const onChangePalette = (newPalette)=>{
         setLiveSpec((prev)=>{
@@ -65,12 +80,14 @@ export const FlameChartPanel = (props)=>{
             };
         });
     };
+    if (!contentDimensions) return null;
     const PADDING = liveSpec.showSeries && liveSpec.showSettings ? 32 : liveSpec.showSeries || liveSpec.showSettings ? 16 : 0;
     const SETTINGS_HEIGHT = liveSpec.showSettings ? 30 : 0;
     const SERIES_CHART_HEIGHT = liveSpec.showSeries ? contentDimensions.height < DEFAULT_SERIES_CHART_HEIGHT ? contentDimensions.height : DEFAULT_SERIES_CHART_HEIGHT : 0;
-    const TABLE_FLAME_CHART_HEIGHT = contentDimensions.height - (contentDimensions.height > LARGE_PANEL_TRESHOLD ? SERIES_CHART_HEIGHT + SETTINGS_HEIGHT + PADDING : 0);
+    const TABLE_FLAME_CHART_HEIGHT = liveSpec.traceHeight ? Math.max(contentDimensions.height - (contentDimensions.height > LARGE_PANEL_THRESHOLD ? SERIES_CHART_HEIGHT + SETTINGS_HEIGHT + PADDING : 0), maxDepth * liveSpec.traceHeight) : contentDimensions.height - (contentDimensions.height > LARGE_PANEL_THRESHOLD ? SERIES_CHART_HEIGHT + SETTINGS_HEIGHT + PADDING : 0);
     const TABLE_CHART_WIDTH = isMobileSize ? contentDimensions.width : liveSpec.showFlameGraph ? 0.4 * contentDimensions.width : contentDimensions.width;
     const FLAME_CHART_WIDTH = isMobileSize ? contentDimensions.width : liveSpec.showTable ? 0.6 * contentDimensions.width : contentDimensions.width;
+    // TODO (gladorme): allow users to override height (useful for explorer for stack traces with high depth)
     return /*#__PURE__*/ _jsx(Stack, {
         height: contentDimensions.height,
         width: contentDimensions.width,
@@ -87,7 +104,7 @@ export const FlameChartPanel = (props)=>{
             sx: {
                 overflowY: 'auto',
                 scrollbarGutter: 'stable both-edges',
-                paddingTop: liveSpec.showSeries ? 0 : 1
+                paddingTop: liveSpec.showSettings || liveSpec.showSeries ? 1 : 0
             },
             children: [
                 liveSpec.showSeries && /*#__PURE__*/ _jsx(SeriesChart, {

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 } from 'react';\nimport { ProfileData } from '@perses-dev/core';\nimport { PanelProps } from '@perses-dev/plugin-system';\nimport { FlameChartOptions } from '../flame-chart-model';\nimport { FlameChart } from './FlameChart';\nimport { Settings } from './Settings';\nimport { TableChart } from './TableChart';\nimport { SeriesChart } from './SeriesChart';\n\nconst LARGE_PANEL_TRESHOLD = 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 = queryResults[0];\n\n  if (contentDimensions === undefined) return null;\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  const PADDING =\n    liveSpec.showSeries && liveSpec.showSettings ? 32 : liveSpec.showSeries || liveSpec.showSettings ? 16 : 0;\n\n  const SETTINGS_HEIGHT = liveSpec.showSettings ? 30 : 0;\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  const TABLE_FLAME_CHART_HEIGHT =\n    contentDimensions.height -\n    (contentDimensions.height > LARGE_PANEL_TRESHOLD ? 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  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={{ overflowY: 'auto', scrollbarGutter: 'stable both-edges', paddingTop: liveSpec.showSeries ? 0 : 1 }}\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","FlameChart","Settings","TableChart","SeriesChart","LARGE_PANEL_TRESHOLD","DEFAULT_SERIES_CHART_HEIGHT","FlameChartPanel","props","contentDimensions","queryResults","spec","isMobileSize","breakpoints","down","selectedId","setSelectedId","searchValue","setSearchValue","liveSpec","setLiveSpec","chartsTheme","flameChartData","undefined","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","TABLE_CHART_WIDTH","width","FLAME_CHART_WIDTH","justifyContent","alignItems","length","sx","gap","overflowY","scrollbarGutter","paddingTop","data","onSelectedIdChange","direction","onSearchValueChange"],"mappings":"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"}
+{"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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"}

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

@@ -12,6 +12,7 @@ export interface FlameChartOptions {
     showSeries: boolean;
     showTable: boolean;
     showFlameGraph: boolean;
+    traceHeight?: number;
 }
 export type FlameChartOptionsEditorProps = OptionsEditorProps<FlameChartOptions>;
 export declare function createInitialFlameChartOptions(): FlameChartOptions;

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

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

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

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

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

@@ -3,11 +3,11 @@ import { FlameChartSample as Sample, TableChartSample } from './data-model';
 /**
  * Filter the global stacktrace by a function ID to focus on that function and display its corresponding flame chart
  */
-export declare function filterJson(json: StackTrace, id?: number): StackTrace;
+export declare function filterStackTraceById(trace: StackTrace, id: number | undefined): StackTrace;
 /**
  * Build series data for the flame chart option
  */
-export declare function recursionJson(palette: string, metadata: ProfileMetaData | undefined, jsonObj: StackTrace, searchValue: string, id?: number): Sample[];
+export declare function buildSamples(palette: string, metadata: ProfileMetaData | undefined, traces: StackTrace, searchValue: string, id?: number): Sample[];
 /**
  * Transform query results to a tabular format for the table chart
  */
@@ -16,4 +16,5 @@ export declare function tableRecursionJson(jsonObj: StackTrace, searchValue: str
  * Finds the total sample value of the series data item with the specified name.
  */
 export declare function findTotalSampleByName(seriesData: Sample[], name: number | undefined): number | undefined;
+export declare function getMaxDepth(trace: StackTrace): number;
 //# sourceMappingURL=data-transform.d.ts.map

package/lib/utils/data-transform.d.ts.map

@@ -1 +1 @@
-{"version":3,"file":"data-transform.d.ts","sourceRoot":"","sources":["../../../src/utils/data-transform.ts"],"names":[],"mappings":"AAaA,OAAO,EAAE,eAAe,EAAE,UAAU,EAAE,MAAM,kBAAkB,CAAC;AAC/D,OAAO,EAAE,gBAAgB,IAAI,MAAM,EAAE,gBAAgB,EAAE,MAAM,cAAc,CAAC;AAI5E;;GAEG;AACH,wBAAgB,UAAU,CAAC,IAAI,EAAE,UAAU,EAAE,EAAE,CAAC,EAAE,MAAM,GAAG,UAAU,CA2BpE;AA8BD;;GAEG;AACH,wBAAgB,aAAa,CAC3B,OAAO,EAAE,MAAM,EACf,QAAQ,EAAE,eAAe,GAAG,SAAS,EACrC,OAAO,EAAE,UAAU,EACnB,WAAW,EAAE,MAAM,EACnB,EAAE,CAAC,EAAE,MAAM,GACV,MAAM,EAAE,CAqCV;AAED;;GAEG;AACH,wBAAgB,kBAAkB,CAAC,OAAO,EAAE,UAAU,EAAE,WAAW,EAAE,MAAM,GAAG,gBAAgB,EAAE,CAsB/F;AAmBD;;GAEG;AACH,wBAAgB,qBAAqB,CAAC,UAAU,EAAE,MAAM,EAAE,EAAE,IAAI,EAAE,MAAM,GAAG,SAAS,GAAG,MAAM,GAAG,SAAS,CAKxG"}
+{"version":3,"file":"data-transform.d.ts","sourceRoot":"","sources":["../../../src/utils/data-transform.ts"],"names":[],"mappings":"AAaA,OAAO,EAAE,eAAe,EAAE,UAAU,EAAE,MAAM,kBAAkB,CAAC;AAC/D,OAAO,EAAE,gBAAgB,IAAI,MAAM,EAAE,gBAAgB,EAAE,MAAM,cAAc,CAAC;AAI5E;;GAEG;AACH,wBAAgB,oBAAoB,CAAC,KAAK,EAAE,UAAU,EAAE,EAAE,EAAE,MAAM,GAAG,SAAS,GAAG,UAAU,CA2B1F;AA8BD;;GAEG;AACH,wBAAgB,YAAY,CAC1B,OAAO,EAAE,MAAM,EACf,QAAQ,EAAE,eAAe,GAAG,SAAS,EACrC,MAAM,EAAE,UAAU,EAClB,WAAW,EAAE,MAAM,EACnB,EAAE,CAAC,EAAE,MAAM,GACV,MAAM,EAAE,CAqCV;AAED;;GAEG;AACH,wBAAgB,kBAAkB,CAAC,OAAO,EAAE,UAAU,EAAE,WAAW,EAAE,MAAM,GAAG,gBAAgB,EAAE,CAsB/F;AAmBD;;GAEG;AACH,wBAAgB,qBAAqB,CAAC,UAAU,EAAE,MAAM,EAAE,EAAE,IAAI,EAAE,MAAM,GAAG,SAAS,GAAG,MAAM,GAAG,SAAS,CAKxG;AAKD,wBAAgB,WAAW,CAAC,KAAK,EAAE,UAAU,GAAG,MAAM,CAKrD"}

package/lib/utils/data-transform.js

@@ -14,30 +14,32 @@ import { getSpanColor } from './palette-gen';
 import { formatItemValue } from './format';
 /**
  * Filter the global stacktrace by a function ID to focus on that function and display its corresponding flame chart
- */ export function filterJson(json, id) {
-    if (id === null) {
-        return json;
+ */ export function filterStackTraceById(trace, id) {
+    if (id === undefined) {
+        return trace;
     }
-    const recur = (item, id)=>{
-        if (item.id === id) {
-            return item;
+    const recur = (trace, id)=>{
+        if (trace.id === id) {
+            return trace;
         }
-        for (const child of item.children || []){
+        for (const child of trace.children ?? []){
             const temp = recur(child, id);
             if (temp) {
-                item.children = [
+                trace = {
+                    ...trace
+                }; // Create a shallow copy of the trace to avoid mutating the original object
+                // Override parents' values
+                trace.children = [
                     temp
                 ];
-                // change the parents' values
-                item.start = temp.start;
-                item.end = temp.end;
-                // item.self = temp.self;
-                // item.total = temp.total;
-                return item;
+                trace.start = temp.start;
+                trace.end = temp.end;
+                return trace;
             }
         }
+        return undefined;
     };
-    return recur(json, id) || json;
+    return recur(trace, id) ?? trace;
 }
 // build the name of the corresponding flamechart item
 function formatName(item, rootVal, unit) {
@@ -63,9 +65,9 @@ function formatName(item, rootVal, unit) {
 }
 /**
  * Build series data for the flame chart option
- */ export function recursionJson(palette, metadata, jsonObj, searchValue, id) {
+ */ export function buildSamples(palette, metadata, traces, searchValue, id) {
     const data = [];
-    const filteredJson = filterJson(structuredClone(jsonObj), id);
+    const filteredJson = filterStackTraceById(traces, id);
     const rootVal = filteredJson.total; // total samples of root node
     const currentVal = getCurrentTotalValue(filteredJson, id); // total samples of the selected item, used to generate items colors
     const recur = (item)=>{
@@ -134,5 +136,13 @@ function isItemNameMatchesSearchFilters(itemName, searchValue) {
     const totalSample = item?.value[8];
     return Number(totalSample);
 }
+/*
+ * Calculate the maximum depth of the stack trace
+ */ export function getMaxDepth(trace) {
+    if (!trace.children?.length) {
+        return 1;
+    }
+    return 1 + Math.max(...trace.children.map(getMaxDepth));
+}
 
 //# sourceMappingURL=data-transform.js.map