@perses-dev/flame-chart-plugin 0.2.0

package/lib/cjs/components/TableChart.js

@@ -0,0 +1,143 @@
+// 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, "TableChart", {
+    enumerable: true,
+    get: function() {
+        return TableChart;
+    }
+});
+const _jsxruntime = require("react/jsx-runtime");
+const _react = require("react");
+const _material = require("@mui/material");
+const _components = require("@perses-dev/components");
+const _datatransform = require("../utils/data-transform");
+const _format = require("../utils/format");
+const _SearchBar = require("./SearchBar");
+const LARGE_PANEL_TRESHOLD = 600; // heigth treshold to switch to large panel mode
+const PADDING_TOP = 8;
+const SCROLL_BAR_WIDTH = 15;
+const SEARCH_BAR_HEIGHT = 50;
+function TableChart(props) {
+    const { width, height, data, searchValue, onSearchValueChange, onSelectedIdChange } = props;
+    const theme = (0, _material.useTheme)();
+    const availableHeight = height;
+    const availableWidth = width - 10;
+    const tableData = (0, _react.useMemo)(()=>{
+        return (0, _datatransform.tableRecursionJson)(data.profile.stackTrace, searchValue);
+    }, [
+        data,
+        searchValue
+    ]);
+    const columns = (0, _react.useMemo)(()=>{
+        const unit = data.metadata?.units || '';
+        const columnSettings = [
+            {
+                accessorKey: 'name',
+                header: 'Name',
+                headerDescription: 'Function name',
+                align: 'left',
+                enableSorting: true,
+                width: 0.5 * availableWidth,
+                cell: (ctx)=>{
+                    const cellValue = ctx.getValue();
+                    return /*#__PURE__*/ (0, _jsxruntime.jsx)(_material.Link, {
+                        href: "#",
+                        underline: "hover",
+                        onClick: (e)=>{
+                            e.preventDefault();
+                            const currentSample = ctx.row.original;
+                            onSelectedIdChange(currentSample.id); // focus on this item in the flame graph
+                            onSearchValueChange(currentSample.name);
+                        },
+                        children: cellValue
+                    });
+                },
+                cellDescription: ()=>''
+            },
+            {
+                accessorKey: 'self',
+                header: 'Self',
+                headerDescription: 'Function self samples',
+                align: 'right',
+                enableSorting: true,
+                width: 0.25 * availableWidth - SCROLL_BAR_WIDTH,
+                cell: (ctx)=>{
+                    const cellValue = ctx.getValue();
+                    return (0, _format.formatItemValue)(unit, cellValue);
+                }
+            },
+            {
+                accessorKey: 'total',
+                header: 'Total',
+                headerDescription: 'Function total samples',
+                align: 'right',
+                enableSorting: true,
+                width: 0.25 * availableWidth,
+                cell: (ctx)=>{
+                    const cellValue = ctx.getValue();
+                    return (0, _format.formatItemValue)(unit, cellValue);
+                }
+            }
+        ];
+        return columnSettings;
+    }, [
+        data.metadata?.units,
+        availableWidth,
+        onSearchValueChange,
+        onSelectedIdChange
+    ]);
+    const [sorting, setSorting] = (0, _react.useState)([
+        {
+            id: 'total',
+            desc: true
+        }
+    ]);
+    return /*#__PURE__*/ (0, _jsxruntime.jsxs)(_material.Stack, {
+        width: availableWidth,
+        height: availableHeight,
+        gap: 1,
+        sx: {
+            '& .MuiTable-root': {
+                borderCollapse: 'collapse'
+            },
+            '& .MuiTableCell-root': {
+                borderBottom: `1px solid ${theme.palette.divider}`,
+                borderRight: `1px solid ${theme.palette.divider}`,
+                '&:last-child': {
+                    borderRight: 'none'
+                }
+            }
+        },
+        children: [
+            /*#__PURE__*/ (0, _jsxruntime.jsx)(_SearchBar.SearchBar, {
+                searchValue: searchValue,
+                onSearchValueChange: onSearchValueChange
+            }),
+            /*#__PURE__*/ (0, _jsxruntime.jsx)(_components.Table, {
+                data: tableData,
+                columns: columns,
+                height: availableHeight - PADDING_TOP - SEARCH_BAR_HEIGHT,
+                width: availableWidth,
+                density: availableHeight < LARGE_PANEL_TRESHOLD ? 'compact' : 'standard',
+                defaultColumnWidth: "auto",
+                defaultColumnHeight: "auto",
+                sorting: sorting,
+                onSortingChange: setSorting
+            })
+        ]
+    });
+}

package/lib/cjs/components/index.js

@@ -0,0 +1,39 @@
+// 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
+});
+_export_star(require("./CustomBreadcrumb"), exports);
+_export_star(require("./FlameChart"), exports);
+_export_star(require("./FlameChartOptionsEditorSettings"), exports);
+_export_star(require("./FlameChartPanel"), exports);
+_export_star(require("./PaletteSelector"), exports);
+_export_star(require("./SearchBar"), exports);
+_export_star(require("./SeriesChart"), exports);
+_export_star(require("./Settings"), exports);
+_export_star(require("./SwitchSelector"), exports);
+_export_star(require("./TableChart"), exports);
+function _export_star(from, to) {
+    Object.keys(from).forEach(function(k) {
+        if (k !== "default" && !Object.prototype.hasOwnProperty.call(to, k)) {
+            Object.defineProperty(to, k, {
+                enumerable: true,
+                get: function() {
+                    return from[k];
+                }
+            });
+        }
+    });
+    return from;
+}

package/lib/cjs/env.d.js

@@ -0,0 +1,14 @@
+// Copyright 2024 The Perses Authors
+// Licensed under the Apache License, Version 2.0 (the "License");
+// you may not use this file except in compliance with the License.
+// 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.
+/// <reference types="@rsbuild/core/types" />
+"use strict";

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

@@ -0,0 +1,31 @@
+// 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, "createInitialFlameChartOptions", {
+    enumerable: true,
+    get: function() {
+        return createInitialFlameChartOptions;
+    }
+});
+function createInitialFlameChartOptions() {
+    return {
+        palette: 'package-name',
+        showSettings: true,
+        showSeries: false,
+        showTable: true,
+        showFlameGraph: true
+    };
+}

package/lib/cjs/getPluginModule.js

@@ -0,0 +1,39 @@
+// 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, "getPluginModule", {
+    enumerable: true,
+    get: function() {
+        return getPluginModule;
+    }
+});
+const _packagejson = /*#__PURE__*/ _interop_require_default(require("../package.json"));
+function _interop_require_default(obj) {
+    return obj && obj.__esModule ? obj : {
+        default: obj
+    };
+}
+function getPluginModule() {
+    const { name, version, perses } = _packagejson.default;
+    return {
+        kind: 'PluginModule',
+        metadata: {
+            name,
+            version
+        },
+        spec: perses
+    };
+}

package/lib/cjs/index-federation.js

@@ -0,0 +1,55 @@
+// Copyright 2025 The Perses Authors
+// Licensed under the Apache License, Version 2.0 (the "License");
+// you may not use this file except in compliance with the License.
+// You may obtain a copy of the License at
+//
+// http://www.apache.org/licenses/LICENSE-2.0
+//
+// Unless required by applicable law or agreed to in writing, software
+// distributed under the License is distributed on an "AS IS" BASIS,
+// WITHOUT WARRANTIES OR CONDITIONS OF ANY KIND, either express or implied.
+// See the License for the specific language governing permissions and
+// limitations under the License.
+"use strict";
+function _getRequireWildcardCache(nodeInterop) {
+    if (typeof WeakMap !== "function") return null;
+    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;
+}
+Promise.resolve().then(()=>/*#__PURE__*/ _interop_require_wildcard(require("./bootstrap")));

package/lib/cjs/index.js

@@ -0,0 +1,37 @@
+// 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, "getPluginModule", {
+    enumerable: true,
+    get: function() {
+        return _getPluginModule.getPluginModule;
+    }
+});
+_export_star(require("./components"), exports);
+const _getPluginModule = require("./getPluginModule");
+function _export_star(from, to) {
+    Object.keys(from).forEach(function(k) {
+        if (k !== "default" && !Object.prototype.hasOwnProperty.call(to, k)) {
+            Object.defineProperty(to, k, {
+                enumerable: true,
+                get: function() {
+                    return from[k];
+                }
+            });
+        }
+    });
+    return from;
+}

package/lib/cjs/setup-tests.js

@@ -0,0 +1,19 @@
+// 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.
+"use strict";
+Object.defineProperty(exports, "__esModule", {
+    value: true
+});
+require("@testing-library/jest-dom");
+// Always mock e-charts during tests since we don't have a proper canvas in jsdom
+jest.mock('echarts/core');

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

@@ -0,0 +1,18 @@
+// 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.
+/**
+ * FlameChart datamodel
+ */ "use strict";
+Object.defineProperty(exports, "__esModule", {
+    value: true
+});

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

@@ -0,0 +1,152 @@
+// 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, {
+    filterJson: function() {
+        return filterJson;
+    },
+    findTotalSampleByName: function() {
+        return findTotalSampleByName;
+    },
+    recursionJson: function() {
+        return recursionJson;
+    },
+    tableRecursionJson: function() {
+        return tableRecursionJson;
+    }
+});
+const _palettegen = require("./palette-gen");
+const _format = require("./format");
+function filterJson(json, id) {
+    if (id === null) {
+        return json;
+    }
+    const recur = (item, id)=>{
+        if (item.id === id) {
+            return item;
+        }
+        for (const child of item.children || []){
+            const temp = recur(child, id);
+            if (temp) {
+                item.children = [
+                    temp
+                ];
+                // change the parents' values
+                item.start = temp.start;
+                item.end = temp.end;
+                // item.self = temp.self;
+                // item.total = temp.total;
+                return item;
+            }
+        }
+    };
+    return recur(json, id) || json;
+}
+// build the name of the corresponding flamechart item
+function formatName(item, rootVal, unit) {
+    return item.total / rootVal * 100 < 1 ? '' : item.name + ` (${(0, _format.formatItemValue)(unit, item.total)})`;
+}
+/**
+ * Search the total value of an item corresponding to a given ID
+ */ function getCurrentTotalValue(json, id) {
+    if (id === undefined) return 0;
+    const recur = (item)=>{
+        if (item.id === id) {
+            return item.total;
+        }
+        for (const child of item.children || []){
+            const total = recur(child);
+            if (total !== undefined) {
+                return total;
+            }
+        }
+        return 0; // If not found, return 0
+    };
+    return recur(json);
+}
+function recursionJson(palette, metadata, jsonObj, searchValue, id) {
+    const data = [];
+    const filteredJson = filterJson(structuredClone(jsonObj), 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)=>{
+        const temp = {
+            name: item.id,
+            value: [
+                item.level,
+                item.start,
+                item.end,
+                formatName(item, currentVal ? currentVal : rootVal, metadata?.units),
+                item.total / rootVal * 100,
+                item.self / rootVal * 100,
+                item.name,
+                item.self,
+                item.total
+            ],
+            itemStyle: {
+                color: !isItemNameMatchesSearchFilters(item.name, searchValue) ? '#dee2e6' : (0, _palettegen.getSpanColor)(palette, item.name, item.total / (currentVal ? currentVal : rootVal) * 100)
+            }
+        };
+        data.push(temp);
+        for (const child of item.children || []){
+            recur(child);
+        }
+    };
+    // check is filteredJson is not empty before call recur
+    if (filteredJson.id) recur(filteredJson);
+    return data;
+}
+function tableRecursionJson(jsonObj, searchValue) {
+    const data = [];
+    const structuredJson = structuredClone(jsonObj);
+    const recur = (item)=>{
+        const temp = {
+            id: item.id,
+            name: item.name,
+            self: item.self,
+            total: item.total
+        };
+        if (isItemNameMatchesSearchFilters(temp.name, searchValue)) data.push(temp);
+        for (const child of item.children || []){
+            recur(child);
+        }
+    };
+    // check is structuredJson is not empty before call recur
+    if (structuredJson.id) recur(structuredJson);
+    return data;
+}
+// Checks if an item name matches all parts of a search value.
+function isItemNameMatchesSearchFilters(itemName, searchValue) {
+    if (searchValue === '') return true;
+    const filters = searchValue.trim().toLocaleLowerCase().split(/[^a-zA-Z0-9']+/).filter((s)=>s !== '');
+    if (filters.length === 0) {
+        return false;
+    } else {
+        return filters.every((filter)=>itemName.toLowerCase().includes(filter.trim()));
+    }
+}
+function findTotalSampleByName(seriesData, name) {
+    if (name === undefined || name === 0) return undefined;
+    const item = seriesData.find((item)=>item.name === name);
+    const totalSample = item?.value[8];
+    return Number(totalSample);
+}

package/lib/cjs/utils/format.js

@@ -0,0 +1,87 @@
+// 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, {
+    formatItemValue: function() {
+        return formatItemValue;
+    },
+    formatNanoDuration: function() {
+        return formatNanoDuration;
+    }
+});
+const _core = require("@perses-dev/core");
+function formatNanoDuration(value) {
+    // The value to format is in nanoseconds
+    if (value < 1_000) {
+        return (0, _core.formatValue)(value, {
+            unit: 'decimal',
+            decimalPlaces: 2,
+            shortValues: true
+        }) + 'ns';
+    } else if (value < 1_000_000) {
+        return (0, _core.formatValue)(value / 1_000, {
+            unit: 'decimal',
+            decimalPlaces: 2,
+            shortValues: true
+        }) + 'μs';
+    } else {
+        return (0, _core.formatDuration)((0, _core.msToPrometheusDuration)(value / 1_000_000));
+    }
+}
+function formatItemValue(unit, value) {
+    let valueWithUnit = '';
+    switch(unit){
+        case 'count':
+            valueWithUnit = (0, _core.formatValue)(value, {
+                unit: 'decimal',
+                decimalPlaces: 2,
+                shortValues: true
+            });
+            break;
+        case 'samples':
+            valueWithUnit = (0, _core.formatValue)(value, {
+                unit: 'decimal',
+                decimalPlaces: 2,
+                shortValues: true
+            });
+            break;
+        case 'objects':
+            valueWithUnit = (0, _core.formatValue)(value, {
+                unit: 'decimal',
+                decimalPlaces: 2,
+                shortValues: true
+            });
+            break;
+        case 'bytes':
+            valueWithUnit = (0, _core.formatValue)(value, {
+                unit: 'bytes'
+            });
+            break;
+        case 'nanoseconds':
+            valueWithUnit = formatNanoDuration(value);
+            break;
+        default:
+            valueWithUnit = `${value} ${unit}`;
+            break;
+    }
+    return valueWithUnit;
+}