@perses-dev/flame-chart-plugin 0.2.0

package/lib/components/FlameChart.js

@@ -0,0 +1,328 @@
+// 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.
+import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
+import { Stack, Box, Menu, MenuItem, Divider, useTheme } from '@mui/material';
+import { useState, useMemo } from 'react';
+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 { generateTooltip } from '../utils/tooltip';
+import { CustomBreadcrumb } from './CustomBreadcrumb';
+const ITEM_GAP = 2; // vertical gap between flame chart items
+const Y_MIN_SMALL = 6; // min value of y axis for small containers
+const Y_MIN_LARGE = 20; // min value of y axis for large containers
+const LARGE_CONTAINER_THRESHOLD = 600;
+const CONTAINER_PADDING = 10;
+const BREADCRUMB_SPACE = 50;
+export function FlameChart(props) {
+    const { width, height, data, palette, selectedId, searchValue, onSelectedIdChange } = props;
+    const theme = useTheme();
+    const chartsTheme = useChartsTheme();
+    const [menuPosition, setMenuPosition] = useState(null);
+    const [selectedItem, setSelectedItem] = useState({
+        id: 0,
+        name: ''
+    });
+    const [isCopied, setIsCopied] = useState(false);
+    const seriesData = useMemo(()=>recursionJson(palette, data.metadata, data.profile.stackTrace, searchValue, selectedId), [
+        palette,
+        data.metadata,
+        data.profile.stackTrace,
+        selectedId,
+        searchValue
+    ]);
+    const handleItemClick = (params)=>{
+        const data = params.data;
+        const functionName = data.value[6];
+        const functionId = data.name;
+        setSelectedItem({
+            id: functionId,
+            name: functionName
+        });
+        // To ensure that the cursor is positioned inside the menu when it opens,
+        // we adjust the click event coordinates as follows:
+        if ('event' in params) {
+            const mouseEvent = params.event;
+            setMenuPosition({
+                mouseX: mouseEvent.event.clientX - 2,
+                mouseY: mouseEvent.event.clientY - 4
+            });
+        }
+    };
+    const handleFocusBlock = ()=>{
+        onSelectedIdChange(selectedItem.id);
+        handleClose();
+    };
+    const handleCopyFunctionName = ()=>{
+        if ((selectedId || selectedId === 0) && selectedItem.name) {
+            navigator.clipboard.writeText(selectedItem.name);
+        }
+        setIsCopied(true);
+    };
+    const handleResetGraph = ()=>{
+        if (selectedId) {
+            onSelectedIdChange(0);
+        }
+        handleClose();
+    };
+    const handleClose = ()=>{
+        setMenuPosition(null);
+        if (isCopied) setIsCopied(false);
+    };
+    const renderItem = (params, api)=>{
+        const level = api.value(0);
+        const start = api.coord([
+            api.value(1),
+            level
+        ]);
+        const end = api.coord([
+            api.value(2),
+            level
+        ]);
+        const height = (api.size && api.size([
+            0,
+            1
+        ]) || [
+            0,
+            20
+        ])[1];
+        const width = (end?.[0] ?? 0) - (start?.[0] ?? 0);
+        return {
+            type: 'rect',
+            transition: [
+                'shape'
+            ],
+            shape: {
+                x: start?.[0],
+                y: (start?.[1] ?? 0) - (height ?? 0) / 2,
+                width,
+                height: (height ?? ITEM_GAP) - ITEM_GAP,
+                r: 0
+            },
+            style: {
+                fill: api.visual('color')
+            },
+            emphasis: {
+                style: {
+                    stroke: '#000'
+                }
+            },
+            textConfig: {
+                position: 'insideLeft'
+            },
+            textContent: {
+                style: {
+                    text: api.value(3),
+                    fill: '#000',
+                    width: width - 4,
+                    overflow: 'truncate',
+                    ellipsis: '..',
+                    truncateMinChar: 1
+                },
+                emphasis: {
+                    style: {
+                        stroke: '#000',
+                        lineWidth: 0.5
+                    }
+                }
+            }
+        };
+    };
+    const option = useMemo(()=>{
+        if (data.profile.stackTrace === undefined) return chartsTheme.noDataOption;
+        const maxDepth = Math.max(...seriesData.map((s)=>s.value[0])); // maximum depth of the stack trace
+        const yAxisMax = Math.max(height > LARGE_CONTAINER_THRESHOLD ? Y_MIN_LARGE : Y_MIN_SMALL, maxDepth);
+        const totalStart = seriesData[0]?.value[1]; // start value of the total function
+        const totalEnd = seriesData[0]?.value[2]; // end value of the total function
+        const xAxisMin = totalStart;
+        const xAxisMax = totalEnd;
+        // compute flame chart padding top and bottom
+        const padding = (height / (yAxisMax - 1) - ITEM_GAP) / 2 + 1;
+        const option = {
+            tooltip: {
+                appendToBody: true,
+                confine: true,
+                formatter: (params)=>generateTooltip(params, data.metadata?.units),
+                backgroundColor: theme.palette.background.paper,
+                borderColor: theme.palette.background.paper,
+                textStyle: {
+                    color: theme.palette.text.primary
+                }
+            },
+            xAxis: {
+                show: false,
+                min: xAxisMin,
+                max: xAxisMax,
+                axisLabel: {
+                    show: false
+                }
+            },
+            yAxis: {
+                show: false,
+                max: yAxisMax,
+                inverse: true,
+                axisLabel: {
+                    show: false
+                }
+            },
+            axisLabel: {
+                overflow: 'truncate',
+                width: width / 3
+            },
+            grid: {
+                left: 5,
+                right: 5,
+                top: padding + 5,
+                bottom: padding
+            },
+            series: [
+                {
+                    type: 'custom',
+                    renderItem,
+                    encode: {
+                        x: [
+                            0,
+                            1,
+                            2
+                        ],
+                        y: 0
+                    },
+                    data: seriesData
+                }
+            ]
+        };
+        return option;
+    }, [
+        data,
+        chartsTheme,
+        theme,
+        width,
+        seriesData,
+        height
+    ]);
+    // Use useMemo to memoize the flame chart component and prevent unnecessary re-renders.
+    // 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: {
+                width: width,
+                height: height - 2 * CONTAINER_PADDING - BREADCRUMB_SPACE
+            },
+            option: option,
+            theme: chartsTheme.echartsTheme,
+            onEvents: {
+                click: handleItemClick
+            }
+        }), [
+        chartsTheme.echartsTheme,
+        height,
+        option,
+        width
+    ]);
+    return /*#__PURE__*/ _jsxs(Stack, {
+        style: {
+            width: width,
+            height: height
+        },
+        alignItems: "center",
+        children: [
+            /*#__PURE__*/ _jsx(CustomBreadcrumb, {
+                totalValue: seriesData[0]?.value[3] || '',
+                totalSample: seriesData[0]?.value[8] || 0,
+                otherItemSample: findTotalSampleByName(seriesData, selectedId),
+                onSelectedIdChange: onSelectedIdChange
+            }),
+            flameChart,
+            /*#__PURE__*/ _jsxs(Menu, {
+                sx: {
+                    '& .MuiPaper-root': {
+                        backgroundColor: theme.palette.background.paper,
+                        color: theme.palette.text.primary,
+                        padding: '5px',
+                        paddingBottom: '0px'
+                    },
+                    '& .MuiMenuItem-root': {
+                        '&:hover': {
+                            backgroundColor: theme.palette.action.hover
+                        }
+                    }
+                },
+                open: menuPosition !== null,
+                onClose: handleClose,
+                anchorReference: "anchorPosition",
+                anchorPosition: menuPosition !== null ? {
+                    top: menuPosition.mouseY,
+                    left: menuPosition.mouseX
+                } : undefined,
+                children: [
+                    /*#__PURE__*/ _jsx(Box, {
+                        sx: {
+                            paddingLeft: '16px',
+                            paddingBottom: '8px'
+                        },
+                        children: selectedItem.name
+                    }),
+                    /*#__PURE__*/ _jsx(Divider, {
+                        sx: {
+                            backgroundColor: theme.palette.divider
+                        }
+                    }),
+                    /*#__PURE__*/ _jsxs(MenuItem, {
+                        onClick: handleFocusBlock,
+                        children: [
+                            /*#__PURE__*/ _jsx(EyeIcon, {
+                                fontSize: "small",
+                                color: "secondary",
+                                sx: {
+                                    marginRight: '10px'
+                                }
+                            }),
+                            "Focus block"
+                        ]
+                    }),
+                    /*#__PURE__*/ _jsxs(MenuItem, {
+                        onClick: handleCopyFunctionName,
+                        disabled: isCopied,
+                        children: [
+                            /*#__PURE__*/ _jsx(ContentCopyIcon, {
+                                fontSize: "small",
+                                color: "secondary",
+                                sx: {
+                                    marginRight: '10px'
+                                }
+                            }),
+                            isCopied ? 'Copied' : 'Copy function name'
+                        ]
+                    }),
+                    /*#__PURE__*/ _jsxs(MenuItem, {
+                        onClick: handleResetGraph,
+                        children: [
+                            /*#__PURE__*/ _jsx(RefreshIcon, {
+                                fontSize: "small",
+                                color: "secondary",
+                                sx: {
+                                    marginRight: '10px'
+                                }
+                            }),
+                            "Reset graph"
+                        ]
+                    })
+                ]
+            })
+        ]
+    });
+}
+
+//# sourceMappingURL=FlameChart.js.map

package/lib/components/FlameChart.js.map

@@ -0,0 +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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"}

package/lib/components/FlameChartOptionsEditorSettings.d.ts

@@ -0,0 +1,4 @@
+import { ReactElement } from 'react';
+import { FlameChartOptionsEditorProps } from '../flame-chart-model';
+export declare function FlameChartOptionsEditorSettings(props: FlameChartOptionsEditorProps): ReactElement;
+//# sourceMappingURL=FlameChartOptionsEditorSettings.d.ts.map

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

@@ -0,0 +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"}

package/lib/components/FlameChartOptionsEditorSettings.js

@@ -0,0 +1,79 @@
+// 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.
+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 { PaletteSelector } from './PaletteSelector';
+import { SwitchSelector } from './SwitchSelector';
+export function FlameChartOptionsEditorSettings(props) {
+    const { value } = props;
+    const { handlePaletteChange } = usePaletteState(props);
+    const { handleShowSettingsChange } = useShowSettingsState(props);
+    const { handleShowSeriesChange } = useShowSeriesState(props);
+    const { handleShowTableChange } = useShowTableState(props);
+    const { handleShowFlameGraphChange } = useShowFlameGraphState(props);
+    return /*#__PURE__*/ _jsxs(OptionsEditorGrid, {
+        children: [
+            /*#__PURE__*/ _jsx(OptionsEditorColumn, {
+                children: /*#__PURE__*/ _jsx(OptionsEditorGroup, {
+                    title: "Misc",
+                    children: /*#__PURE__*/ _jsx(PaletteSelector, {
+                        value: value.palette,
+                        onChange: handlePaletteChange
+                    })
+                })
+            }),
+            /*#__PURE__*/ _jsx(OptionsEditorColumn, {
+                children: /*#__PURE__*/ _jsxs(OptionsEditorGroup, {
+                    title: "Panels to display",
+                    children: [
+                        /*#__PURE__*/ _jsx(SwitchSelector, {
+                            label: "Show Options",
+                            value: value.showSettings,
+                            onChange: handleShowSettingsChange
+                        }),
+                        /*#__PURE__*/ _jsx(SwitchSelector, {
+                            label: "Show Series",
+                            value: value.showSeries,
+                            onChange: handleShowSeriesChange
+                        }),
+                        /*#__PURE__*/ _jsx(SwitchSelector, {
+                            label: "Show Table",
+                            value: value.showTable,
+                            onChange: handleShowTableChange
+                        }),
+                        /*#__PURE__*/ _jsx(SwitchSelector, {
+                            label: "Show Flame Graph",
+                            value: value.showFlameGraph,
+                            onChange: handleShowFlameGraphChange
+                        })
+                    ]
+                })
+            }),
+            /*#__PURE__*/ _jsx(OptionsEditorColumn, {
+                children: /*#__PURE__*/ _jsx(OptionsEditorGroup, {
+                    title: "Reset Settings",
+                    children: /*#__PURE__*/ _jsx(Button, {
+                        variant: "outlined",
+                        color: "secondary",
+                        onClick: ()=>resetSettings(props),
+                        children: "Reset To Defaults"
+                    })
+                })
+            })
+        ]
+    });
+}
+
+//# sourceMappingURL=FlameChartOptionsEditorSettings.js.map

package/lib/components/FlameChartOptionsEditorSettings.js.map

@@ -0,0 +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"}

package/lib/components/FlameChartPanel.d.ts

@@ -0,0 +1,7 @@
+import { FC } from 'react';
+import { ProfileData } from '@perses-dev/core';
+import { PanelProps } from '@perses-dev/plugin-system';
+import { FlameChartOptions } from '../flame-chart-model';
+export type FlameChartPanelProps = PanelProps<FlameChartOptions, ProfileData>;
+export declare const FlameChartPanel: FC<FlameChartPanelProps>;
+//# sourceMappingURL=FlameChartPanel.d.ts.map

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

@@ -0,0 +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"}

package/lib/components/FlameChartPanel.js

@@ -0,0 +1,139 @@
+// Copyright 2023 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.
+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 { FlameChart } from './FlameChart';
+import { Settings } from './Settings';
+import { TableChart } from './TableChart';
+import { SeriesChart } from './SeriesChart';
+const LARGE_PANEL_TRESHOLD = 600;
+const DEFAULT_SERIES_CHART_HEIGHT = 200;
+export const FlameChartPanel = (props)=>{
+    const { contentDimensions, queryResults, spec } = props;
+    const isMobileSize = useMediaQuery(useTheme().breakpoints.down('sm'));
+    // selectedId equals 0 => Flame Graph is not zoomed in
+    // selectedId different from 0 => Flame Graph is zoomed in
+    const [selectedId, setSelectedId] = useState(0);
+    const [searchValue, setSearchValue] = useState('');
+    // This spec is used to manage settings temporarily
+    const [liveSpec, setLiveSpec] = useState(spec);
+    // keep liveSpec up to date
+    useEffect(()=>{
+        setLiveSpec(spec);
+        setSelectedId(0);
+        setSearchValue('');
+    }, [
+        spec
+    ]);
+    const chartsTheme = useChartsTheme();
+    const flameChartData = queryResults[0];
+    if (contentDimensions === undefined) return null;
+    const noDataTextStyle = chartsTheme.noDataOption.title.textStyle;
+    const onChangePalette = (newPalette)=>{
+        setLiveSpec((prev)=>{
+            return {
+                ...prev,
+                palette: newPalette
+            };
+        });
+    };
+    const onDisplayChange = (value)=>{
+        let showTable = true;
+        let showFlameGraph = true;
+        if (value === 'table') {
+            showFlameGraph = false;
+        } else if (value === 'flame-graph') {
+            showTable = false;
+        }
+        setLiveSpec((prev)=>{
+            return {
+                ...prev,
+                showTable: showTable,
+                showFlameGraph: showFlameGraph
+            };
+        });
+    };
+    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_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;
+    return /*#__PURE__*/ _jsx(Stack, {
+        height: contentDimensions.height,
+        width: contentDimensions.width,
+        justifyContent: "center",
+        alignItems: "center",
+        children: queryResults.length > 1 ? // display a message if there is more than one query
+        /*#__PURE__*/ _jsx(Typography, {
+            sx: {
+                ...noDataTextStyle
+            },
+            children: "There is more than one query. Please make sure that you provided only one query."
+        }) : flameChartData ? /*#__PURE__*/ _jsxs(Stack, {
+            gap: 2,
+            sx: {
+                overflowY: 'auto',
+                scrollbarGutter: 'stable both-edges',
+                paddingTop: liveSpec.showSeries ? 0 : 1
+            },
+            children: [
+                liveSpec.showSeries && /*#__PURE__*/ _jsx(SeriesChart, {
+                    width: contentDimensions.width,
+                    height: SERIES_CHART_HEIGHT,
+                    data: flameChartData.data
+                }),
+                liveSpec.showSettings && /*#__PURE__*/ _jsx(Settings, {
+                    onSelectedIdChange: setSelectedId,
+                    onChangePalette: onChangePalette,
+                    onDisplayChange: onDisplayChange,
+                    value: liveSpec,
+                    selectedId: selectedId
+                }),
+                /*#__PURE__*/ _jsxs(Stack, {
+                    direction: isMobileSize ? 'column' : 'row',
+                    justifyContent: "center",
+                    alignItems: isMobileSize ? 'center' : 'top',
+                    children: [
+                        liveSpec.showTable && /*#__PURE__*/ _jsx(TableChart, {
+                            width: TABLE_CHART_WIDTH,
+                            height: TABLE_FLAME_CHART_HEIGHT,
+                            data: flameChartData.data,
+                            searchValue: searchValue,
+                            onSearchValueChange: setSearchValue,
+                            onSelectedIdChange: setSelectedId
+                        }),
+                        liveSpec.showFlameGraph && /*#__PURE__*/ _jsx(FlameChart, {
+                            width: FLAME_CHART_WIDTH,
+                            height: TABLE_FLAME_CHART_HEIGHT,
+                            data: flameChartData.data,
+                            palette: liveSpec.palette,
+                            selectedId: selectedId,
+                            searchValue: searchValue,
+                            onSelectedIdChange: setSelectedId
+                        })
+                    ]
+                })
+            ]
+        }) : /*#__PURE__*/ _jsx(Typography, {
+            sx: {
+                ...noDataTextStyle
+            },
+            children: "No data"
+        })
+    });
+};
+
+//# sourceMappingURL=FlameChartPanel.js.map

package/lib/components/FlameChartPanel.js.map

@@ -0,0 +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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"}