@perses-dev/flame-chart-plugin 0.2.0

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

@@ -0,0 +1,68 @@
+// Copyright 2025 The Perses Authors
+// Licensed under the Apache License, Version 2.0 (the "License");
+// you may not use this file except in compliance with the License.
+// You may obtain a copy of the License at
+//
+// http://www.apache.org/licenses/LICENSE-2.0
+//
+// Unless required by applicable law or agreed to in writing, software
+// distributed under the License is distributed on an "AS IS" BASIS,
+// WITHOUT WARRANTIES OR CONDITIONS OF ANY KIND, either express or implied.
+// See the License for the specific language governing permissions and
+// limitations under the License.
+"use strict";
+Object.defineProperty(exports, "__esModule", {
+    value: true
+});
+function _export(target, all) {
+    for(var name in all)Object.defineProperty(target, name, {
+        enumerable: true,
+        get: all[name]
+    });
+}
+_export(exports, {
+    getColorByPackageName: function() {
+        return getColorByPackageName;
+    },
+    getColorByValue: function() {
+        return getColorByValue;
+    },
+    getSpanColor: function() {
+        return getSpanColor;
+    }
+});
+const _palette = require("./palette");
+const LESS_THAN_ONE_COLOR = '#dee2e6'; // use this color when the value is less than 1
+const MORE_THAN_HUNDRED_COLOR = '#ffbdbd'; // use this color when the value is more than 100
+const NOT_FOUND_COLOR = '#393d47';
+// Palette of color to display the flame chart by value
+const valueColorPalette = [
+    '#fff85b',
+    '#ffde4c',
+    '#ffc252',
+    '#ff8c00',
+    '#f08c00',
+    '#e67762',
+    '#ff8c00',
+    '#ff6f00',
+    '#ff7070',
+    '#ff3300',
+    '#ff004c'
+];
+function getSpanColor(palette, functionName, value) {
+    if (palette === 'package-name') {
+        return getColorByPackageName(functionName, value);
+    }
+    return getColorByValue(value);
+}
+function getColorByValue(value) {
+    if (value < 1) return LESS_THAN_ONE_COLOR;
+    if (value > 100) return MORE_THAN_HUNDRED_COLOR;
+    return valueColorPalette[Math.floor(value / (valueColorPalette.length - 1))] || NOT_FOUND_COLOR;
+}
+function getColorByPackageName(functionName, value) {
+    // get package name from the function name.
+    // It is the substring between the last '/' and the first '.' or the end of the string
+    const packageName = functionName.split('/').pop()?.split('.')[0] || functionName;
+    return value < 1 ? LESS_THAN_ONE_COLOR : (0, _palette.getConsistentColor)(packageName, false);
+}

package/lib/cjs/utils/palette.js

@@ -0,0 +1,62 @@
+// Copyright 2025 The Perses Authors
+// Licensed under the Apache License, Version 2.0 (the "License");
+// you may not use this file except in compliance with the License.
+// You may obtain a copy of the License at
+//
+// http://www.apache.org/licenses/LICENSE-2.0
+//
+// Unless required by applicable law or agreed to in writing, software
+// distributed under the License is distributed on an "AS IS" BASIS,
+// WITHOUT WARRANTIES OR CONDITIONS OF ANY KIND, either express or implied.
+// See the License for the specific language governing permissions and
+// limitations under the License.
+"use strict";
+Object.defineProperty(exports, "__esModule", {
+    value: true
+});
+Object.defineProperty(exports, "getConsistentColor", {
+    enumerable: true,
+    get: function() {
+        return getConsistentColor;
+    }
+});
+const _colorhash = /*#__PURE__*/ _interop_require_default(require("color-hash"));
+function _interop_require_default(obj) {
+    return obj && obj.__esModule ? obj : {
+        default: obj
+    };
+}
+// Valid hue values are 0 to 360 and can be adjusted to control the generated colors.
+// More info: https://github.com/zenozeng/color-hash#custom-hue
+// Picked min of 20 and max of 360 to exclude common threshold colors (red).
+// Items with "error" in them will always be generated as red.
+const ERROR_HUE_CUTOFF = 20;
+const colorGenerator = new _colorhash.default({
+    hue: {
+        min: ERROR_HUE_CUTOFF,
+        max: 360
+    }
+});
+const redColorGenerator = new _colorhash.default({
+    hue: {
+        min: 0,
+        max: ERROR_HUE_CUTOFF
+    }
+});
+function computeConsistentColor(name, error) {
+    const [hue, saturation, lightness] = error ? redColorGenerator.hsl(name) : colorGenerator.hsl(name);
+    const saturationPercent = `${(saturation * 100).toFixed(0)}%`;
+    const lightnessPercent = `${(lightness * 100).toFixed(0)}%`;
+    return `hsla(${hue.toFixed(2)},${saturationPercent},${lightnessPercent},0.9)`;
+}
+// To check whether a color has already been generated for a given string.
+const colorLookup = {};
+function getConsistentColor(name, error) {
+    const key = `${name}_____${error}`;
+    let value = colorLookup[key];
+    if (!value) {
+        value = computeConsistentColor(name, error);
+        colorLookup[key] = value;
+    }
+    return value;
+}

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

@@ -0,0 +1,51 @@
+// Copyright 2025 The Perses Authors
+// Licensed under the Apache License, Version 2.0 (the "License");
+// you may not use this file except in compliance with the License.
+// You may obtain a copy of the License at
+//
+// http://www.apache.org/licenses/LICENSE-2.0
+//
+// Unless required by applicable law or agreed to in writing, software
+// distributed under the License is distributed on an "AS IS" BASIS,
+// WITHOUT WARRANTIES OR CONDITIONS OF ANY KIND, either express or implied.
+// See the License for the specific language governing permissions and
+// limitations under the License.
+"use strict";
+Object.defineProperty(exports, "__esModule", {
+    value: true
+});
+Object.defineProperty(exports, "getSeriesTooltip", {
+    enumerable: true,
+    get: function() {
+        return getSeriesTooltip;
+    }
+});
+const _format = require("./format");
+function getSeriesTooltip(data, unit, name, color, divColor) {
+    const date = new Date(data.value[0]);
+    const formattedDate = date.toLocaleDateString('en-US', {
+        month: 'short',
+        day: '2-digit',
+        year: 'numeric'
+    });
+    const formattedTime = date.toLocaleString('en-US', {
+        hour: '2-digit',
+        minute: '2-digit',
+        second: '2-digit',
+        hour12: false
+    });
+    return `
+    <div>
+      <div>
+        ${formattedDate} - <b>${formattedTime}</b>
+      </div>
+      <hr style="border: none; border-top: 1px solid ${divColor}" />
+      <div style="display: flex; align-items: center">
+        <div style="margin-right: 8px; display: inline-block; width: 11px; height: 11px; border-radius: 2px; background-color: ${color}"></div>
+        <div style="width: 100%; display: flex; justify-content: space-between" >
+            <span style="margin-right: 8px">${name}</span> <b>${(0, _format.formatItemValue)(unit, data.value[1])}</b>
+        </div>
+      </div>
+    </div>
+  `;
+}

package/lib/cjs/utils/tooltip.js

@@ -0,0 +1,76 @@
+// Copyright 2025 The Perses Authors
+// Licensed under the Apache License, Version 2.0 (the "License");
+// you may not use this file except in compliance with the License.
+// You may obtain a copy of the License at
+//
+// http://www.apache.org/licenses/LICENSE-2.0
+//
+// Unless required by applicable law or agreed to in writing, software
+// distributed under the License is distributed on an "AS IS" BASIS,
+// WITHOUT WARRANTIES OR CONDITIONS OF ANY KIND, either express or implied.
+// See the License for the specific language governing permissions and
+// limitations under the License.
+"use strict";
+Object.defineProperty(exports, "__esModule", {
+    value: true
+});
+Object.defineProperty(exports, "generateTooltip", {
+    enumerable: true,
+    get: function() {
+        return generateTooltip;
+    }
+});
+const _echarts = /*#__PURE__*/ _interop_require_wildcard(require("echarts"));
+const _format = require("./format");
+function _getRequireWildcardCache(nodeInterop) {
+    if (typeof WeakMap !== "function") return null;
+    var cacheBabelInterop = new WeakMap();
+    var cacheNodeInterop = new WeakMap();
+    return (_getRequireWildcardCache = function(nodeInterop) {
+        return nodeInterop ? cacheNodeInterop : cacheBabelInterop;
+    })(nodeInterop);
+}
+function _interop_require_wildcard(obj, nodeInterop) {
+    if (!nodeInterop && obj && obj.__esModule) {
+        return obj;
+    }
+    if (obj === null || typeof obj !== "object" && typeof obj !== "function") {
+        return {
+            default: obj
+        };
+    }
+    var cache = _getRequireWildcardCache(nodeInterop);
+    if (cache && cache.has(obj)) {
+        return cache.get(obj);
+    }
+    var newObj = {
+        __proto__: null
+    };
+    var hasPropertyDescriptor = Object.defineProperty && Object.getOwnPropertyDescriptor;
+    for(var key in obj){
+        if (key !== "default" && Object.prototype.hasOwnProperty.call(obj, key)) {
+            var desc = hasPropertyDescriptor ? Object.getOwnPropertyDescriptor(obj, key) : null;
+            if (desc && (desc.get || desc.set)) {
+                Object.defineProperty(newObj, key, desc);
+            } else {
+                newObj[key] = obj[key];
+            }
+        }
+    }
+    newObj.default = obj;
+    if (cache) {
+        cache.set(obj, newObj);
+    }
+    return newObj;
+}
+function generateTooltip(params, unit) {
+    const totalPercentage = Number(params.value[4]);
+    const selfPercentage = Number(params.value[5]);
+    const functionName = params.value[6];
+    const total = Number(params.value[8]);
+    const self = Number(params.value[7]);
+    return `${functionName}<br/><br/>
+            Total: ${(0, _format.formatItemValue)(unit, total)} (${totalPercentage.toFixed(2)}%)<br/>
+            Self: ${(0, _format.formatItemValue)(unit, self)} (${selfPercentage.toFixed(2)}%)<br/>
+            Samples: ${_echarts.format.addCommas(total)}`;
+}

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

@@ -0,0 +1,30 @@
+// Copyright 2025 The Perses Authors
+// Licensed under the Apache License, Version 2.0 (the "License");
+// you may not use this file except in compliance with the License.
+// You may obtain a copy of the License at
+//
+// http://www.apache.org/licenses/LICENSE-2.0
+//
+// Unless required by applicable law or agreed to in writing, software
+// distributed under the License is distributed on an "AS IS" BASIS,
+// WITHOUT WARRANTIES OR CONDITIONS OF ANY KIND, either express or implied.
+// See the License for the specific language governing permissions and
+// limitations under the License.
+"use strict";
+Object.defineProperty(exports, "__esModule", {
+    value: true
+});
+Object.defineProperty(exports, "TOOLTIP_TEXT", {
+    enumerable: true,
+    get: function() {
+        return TOOLTIP_TEXT;
+    }
+});
+const TOOLTIP_TEXT = {
+    resetFlameGraph: 'Reset graph',
+    changeColorSheme: 'Change color sheme',
+    exportData: 'Export profile data',
+    showTable: 'Only show table',
+    showFlameGraph: 'Only show flame graph',
+    showBoth: 'Show both the table and flame graph'
+};

package/lib/cjs/utils/utils.js

@@ -0,0 +1,108 @@
+// Copyright 2025 The Perses Authors
+// Licensed under the Apache License, Version 2.0 (the "License");
+// you may not use this file except in compliance with the License.
+// You may obtain a copy of the License at
+//
+// http://www.apache.org/licenses/LICENSE-2.0
+//
+// Unless required by applicable law or agreed to in writing, software
+// distributed under the License is distributed on an "AS IS" BASIS,
+// WITHOUT WARRANTIES OR CONDITIONS OF ANY KIND, either express or implied.
+// See the License for the specific language governing permissions and
+// limitations under the License.
+"use strict";
+Object.defineProperty(exports, "__esModule", {
+    value: true
+});
+function _export(target, all) {
+    for(var name in all)Object.defineProperty(target, name, {
+        enumerable: true,
+        get: all[name]
+    });
+}
+_export(exports, {
+    resetSettings: function() {
+        return resetSettings;
+    },
+    usePaletteState: function() {
+        return usePaletteState;
+    },
+    useShowFlameGraphState: function() {
+        return useShowFlameGraphState;
+    },
+    useShowSeriesState: function() {
+        return useShowSeriesState;
+    },
+    useShowSettingsState: function() {
+        return useShowSettingsState;
+    },
+    useShowTableState: function() {
+        return useShowTableState;
+    }
+});
+const _immer = require("immer");
+function usePaletteState(props) {
+    const { onChange, value } = props;
+    const handlePaletteChange = (newPalette)=>{
+        onChange((0, _immer.produce)(value, (draft)=>{
+            draft.palette = newPalette;
+        }));
+    };
+    return {
+        handlePaletteChange
+    };
+}
+function useShowSettingsState(props) {
+    const { onChange, value } = props;
+    const handleShowSettingsChange = (newValue)=>{
+        onChange((0, _immer.produce)(value, (draft)=>{
+            draft.showSettings = newValue;
+        }));
+    };
+    return {
+        handleShowSettingsChange
+    };
+}
+function useShowSeriesState(props) {
+    const { onChange, value } = props;
+    const handleShowSeriesChange = (newValue)=>{
+        onChange((0, _immer.produce)(value, (draft)=>{
+            draft.showSeries = newValue;
+        }));
+    };
+    return {
+        handleShowSeriesChange
+    };
+}
+function useShowTableState(props) {
+    const { onChange, value } = props;
+    const handleShowTableChange = (newValue)=>{
+        onChange((0, _immer.produce)(value, (draft)=>{
+            draft.showTable = newValue;
+        }));
+    };
+    return {
+        handleShowTableChange
+    };
+}
+function useShowFlameGraphState(props) {
+    const { onChange, value } = props;
+    const handleShowFlameGraphChange = (newValue)=>{
+        onChange((0, _immer.produce)(value, (draft)=>{
+            draft.showFlameGraph = newValue;
+        }));
+    };
+    return {
+        handleShowFlameGraphChange
+    };
+}
+function resetSettings(props) {
+    const { onChange, value } = props;
+    onChange((0, _immer.produce)(value, (draft)=>{
+        draft.palette = 'package-name';
+        draft.showSettings = true;
+        draft.showSeries = false;
+        draft.showTable = true;
+        draft.showFlameGraph = true;
+    }));
+}

package/lib/components/CustomBreadcrumb.d.ts

@@ -0,0 +1,9 @@
+import { ReactElement } from 'react';
+export interface CustomBreadcrumbProps {
+    totalValue: string;
+    totalSample: number;
+    otherItemSample: number | undefined;
+    onSelectedIdChange: (newId: number) => void;
+}
+export declare function CustomBreadcrumb(props: CustomBreadcrumbProps): ReactElement;
+//# sourceMappingURL=CustomBreadcrumb.d.ts.map

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

@@ -0,0 +1 @@
+{"version":3,"file":"CustomBreadcrumb.d.ts","sourceRoot":"","sources":["../../../src/components/CustomBreadcrumb.tsx"],"names":[],"mappings":"AAaA,OAAO,EAAE,YAAY,EAAE,MAAM,OAAO,CAAC;AASrC,MAAM,WAAW,qBAAqB;IACpC,UAAU,EAAE,MAAM,CAAC;IACnB,WAAW,EAAE,MAAM,CAAC;IACpB,eAAe,EAAE,MAAM,GAAG,SAAS,CAAC;IACpC,kBAAkB,EAAE,CAAC,KAAK,EAAE,MAAM,KAAK,IAAI,CAAC;CAC7C;AAmBD,wBAAgB,gBAAgB,CAAC,KAAK,EAAE,qBAAqB,GAAG,YAAY,CAgC3E"}

package/lib/components/CustomBreadcrumb.js

@@ -0,0 +1,83 @@
+// 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, Breadcrumbs } from '@mui/material';
+import ChevronRightIcon from 'mdi-material-ui/ChevronRight';
+import EyeIcon from 'mdi-material-ui/EyeOutline';
+import CloseIcon from 'mdi-material-ui/Close';
+import Chip from '@mui/material/Chip';
+import { emphasize, styled } from '@mui/material/styles';
+import { formatValue } from '@perses-dev/core';
+const StyledBreadcrumb = styled(Chip)(({ theme })=>{
+    const backgroundColor = theme.palette.mode === 'light' ? theme.palette.grey[100] : theme.palette.grey[800];
+    return {
+        backgroundColor,
+        height: theme.spacing(3),
+        color: theme.palette.text.primary,
+        fontWeight: theme.typography.fontWeightRegular,
+        '&:hover, &:focus': {
+            backgroundColor: emphasize(backgroundColor, 0.06)
+        },
+        '&:active': {
+            boxShadow: theme.shadows[1],
+            backgroundColor: emphasize(backgroundColor, 0.12)
+        }
+    };
+});
+export function CustomBreadcrumb(props) {
+    const { totalValue, totalSample, otherItemSample, onSelectedIdChange } = props;
+    const handleClick = (event)=>{
+        event.preventDefault();
+        onSelectedIdChange(0);
+    };
+    const splitedValue = totalValue.split('(');
+    const totalValueText = splitedValue[splitedValue.length - 1]?.slice(0, -1);
+    const totalLabel = formatValue(totalSample, {
+        unit: 'decimal',
+        decimalPlaces: 2,
+        shortValues: true
+    }) + ' samples';
+    return /*#__PURE__*/ _jsx(Stack, {
+        direction: "row",
+        spacing: 1,
+        minHeight: 40,
+        alignItems: "center",
+        children: /*#__PURE__*/ _jsxs(Breadcrumbs, {
+            separator: /*#__PURE__*/ _jsx(ChevronRightIcon, {
+                fontSize: "small"
+            }),
+            "aria-label": "breadcrumb",
+            sx: {
+                justifyContent: 'center'
+            },
+            children: [
+                /*#__PURE__*/ _jsx(StyledBreadcrumb, {
+                    label: totalValueText + '  |  ' + totalLabel
+                }),
+                otherItemSample !== undefined && /*#__PURE__*/ _jsx(StyledBreadcrumb, {
+                    label: (otherItemSample / totalSample * 100).toFixed(2) + '% of total',
+                    icon: /*#__PURE__*/ _jsx(EyeIcon, {
+                        fontSize: "small",
+                        color: "secondary"
+                    }),
+                    deleteIcon: /*#__PURE__*/ _jsx(CloseIcon, {
+                        fontSize: "small"
+                    }),
+                    onDelete: handleClick
+                })
+            ]
+        })
+    });
+}
+
+//# sourceMappingURL=CustomBreadcrumb.js.map

package/lib/components/CustomBreadcrumb.js.map

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

package/lib/components/FlameChart.d.ts

@@ -0,0 +1,13 @@
+import { ReactElement } from 'react';
+import { ProfileData } from '@perses-dev/core';
+export interface FlameChartProps {
+    width: number;
+    height: number;
+    data: ProfileData;
+    palette: 'package-name' | 'value';
+    selectedId: number;
+    searchValue: string;
+    onSelectedIdChange: (newId: number) => void;
+}
+export declare function FlameChart(props: FlameChartProps): ReactElement;
+//# sourceMappingURL=FlameChart.d.ts.map

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

@@ -0,0 +1 @@
+{"version":3,"file":"FlameChart.d.ts","sourceRoot":"","sources":["../../../src/components/FlameChart.tsx"],"names":[],"mappings":"AAoBA,OAAO,EAAE,YAAY,EAAiC,MAAM,OAAO,CAAC;AACpE,OAAO,EAAE,WAAW,EAAE,MAAM,kBAAkB,CAAC;AAkB/C,MAAM,WAAW,eAAe;IAC9B,KAAK,EAAE,MAAM,CAAC;IACd,MAAM,EAAE,MAAM,CAAC;IACf,IAAI,EAAE,WAAW,CAAC;IAClB,OAAO,EAAE,cAAc,GAAG,OAAO,CAAC;IAClC,UAAU,EAAE,MAAM,CAAC;IACnB,WAAW,EAAE,MAAM,CAAC;IACpB,kBAAkB,EAAE,CAAC,KAAK,EAAE,MAAM,KAAK,IAAI,CAAC;CAC7C;AAED,wBAAgB,UAAU,CAAC,KAAK,EAAE,eAAe,GAAG,YAAY,CAqP/D"}