@perses-dev/pyroscope-plugin 0.2.0

package/lib/cjs/model/pyroscope-client.js

@@ -0,0 +1,94 @@
+// 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, {
+    executeRequest: function() {
+        return executeRequest;
+    },
+    searchLabelNames: function() {
+        return searchLabelNames;
+    },
+    searchLabelValues: function() {
+        return searchLabelValues;
+    },
+    searchProfileTypes: function() {
+        return searchProfileTypes;
+    },
+    searchProfiles: function() {
+        return searchProfiles;
+    },
+    searchServices: function() {
+        return searchServices;
+    }
+});
+const _core = require("@perses-dev/core");
+const executeRequest = async (...args)=>{
+    const response = await (0, _core.fetch)(...args);
+    try {
+        return await response.json();
+    } catch (e) {
+        console.error('Invalid response from server', e);
+        throw new Error('Invalid response from server');
+    }
+};
+function fetchWithGet(apiURI, params, queryOptions) {
+    const { datasourceUrl, headers = {} } = queryOptions;
+    let url = `${datasourceUrl}${apiURI}`;
+    if (params) {
+        url += '?' + new URLSearchParams(params);
+    }
+    const init = {
+        method: 'GET',
+        headers
+    };
+    return executeRequest(url, init);
+}
+function fetchWithPost(apiURI, params, queryOptions, body) {
+    const { datasourceUrl, headers = {} } = queryOptions;
+    let url = `${datasourceUrl}${apiURI}`;
+    if (params) {
+        url += '?' + new URLSearchParams(params);
+    }
+    const init = {
+        method: 'POST',
+        headers,
+        body: JSON.stringify(body)
+    };
+    return executeRequest(url, init);
+}
+function searchProfiles(params, queryOptions) {
+    return fetchWithGet('/pyroscope/render', params, queryOptions);
+}
+function searchProfileTypes(params, queryOptions, body) {
+    return fetchWithPost('/querier.v1.QuerierService/ProfileTypes', params, queryOptions, body);
+}
+function searchLabelNames(params, queryOptions, body) {
+    return fetchWithPost('/querier.v1.QuerierService/LabelNames', params, queryOptions, body);
+}
+function searchLabelValues(params, queryOptions, body) {
+    return fetchWithPost('/querier.v1.QuerierService/LabelValues', params, queryOptions, body);
+}
+function searchServices(params, queryOptions) {
+    return fetchWithPost('/querier.v1.QuerierService/LabelValues', params, queryOptions, {
+        name: 'service_name'
+    });
+}

package/lib/cjs/model/pyroscope-selectors.js

@@ -0,0 +1,46 @@
+// 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, {
+    DEFAULT_PYROSCOPE: function() {
+        return DEFAULT_PYROSCOPE;
+    },
+    PYROSCOPE_DATASOURCE_KIND: function() {
+        return PYROSCOPE_DATASOURCE_KIND;
+    },
+    isDefaultPyroscopeSelector: function() {
+        return isDefaultPyroscopeSelector;
+    },
+    isPyroscopeDatasourceSelector: function() {
+        return isPyroscopeDatasourceSelector;
+    }
+});
+const PYROSCOPE_DATASOURCE_KIND = 'PyroscopeDatasource';
+const DEFAULT_PYROSCOPE = {
+    kind: PYROSCOPE_DATASOURCE_KIND
+};
+function isDefaultPyroscopeSelector(selector) {
+    return selector.name === undefined;
+}
+function isPyroscopeDatasourceSelector(selector) {
+    return selector.kind === PYROSCOPE_DATASOURCE_KIND;
+}

package/lib/cjs/plugins/PyroscopeDatasourceEditor.js

@@ -0,0 +1,70 @@
+// 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, "PyroscopeDatasourceEditor", {
+    enumerable: true,
+    get: function() {
+        return PyroscopeDatasourceEditor;
+    }
+});
+const _jsxruntime = require("react/jsx-runtime");
+const _pluginsystem = require("@perses-dev/plugin-system");
+const _react = /*#__PURE__*/ _interop_require_default(require("react"));
+function _interop_require_default(obj) {
+    return obj && obj.__esModule ? obj : {
+        default: obj
+    };
+}
+function PyroscopeDatasourceEditor(props) {
+    const { value, onChange, isReadonly } = props;
+    const initialSpecDirect = {
+        directUrl: ''
+    };
+    const initialSpecProxy = {
+        proxy: {
+            kind: 'HTTPProxy',
+            spec: {
+                allowedEndpoints: [
+                    // list of standard endpoints suggested by default
+                    {
+                        endpointPattern: '/pyroscope/render',
+                        method: 'GET'
+                    },
+                    {
+                        endpointPattern: '/querier.v1.QuerierService/ProfileTypes',
+                        method: 'POST'
+                    },
+                    {
+                        endpointPattern: '/querier.v1.QuerierService/LabelNames',
+                        method: 'POST'
+                    },
+                    {
+                        endpointPattern: '/querier.v1.QuerierService/LabelValues',
+                        method: 'POST'
+                    }
+                ],
+                url: ''
+            }
+        }
+    };
+    return /*#__PURE__*/ (0, _jsxruntime.jsx)(_pluginsystem.HTTPSettingsEditor, {
+        value: value,
+        onChange: onChange,
+        isReadonly: isReadonly,
+        initialSpecDirect: initialSpecDirect,
+        initialSpecProxy: initialSpecProxy
+    });
+}

package/lib/cjs/plugins/index.js

@@ -0,0 +1,33 @@
+// 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("./pyroscope-profile-query"), exports);
+_export_star(require("./pyroscope-datasource-types"), exports);
+_export_star(require("./pyroscope-datasource"), exports);
+_export_star(require("./PyroscopeDatasourceEditor"), 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/plugins/pyroscope-datasource-types.js

@@ -0,0 +1,16 @@
+// 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
+});

package/lib/cjs/plugins/pyroscope-datasource.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
+});
+Object.defineProperty(exports, "PyroscopeDatasource", {
+    enumerable: true,
+    get: function() {
+        return PyroscopeDatasource;
+    }
+});
+const _pyroscopeclient = require("../model/pyroscope-client");
+const _PyroscopeDatasourceEditor = require("./PyroscopeDatasourceEditor");
+/**
+ * Creates a PyroscopeClient for a specific datasource spec.
+ */ const createClient = (spec, options)=>{
+    const { directUrl, proxy } = spec;
+    const { proxyUrl } = options;
+    // Use the direct URL if specified, but fallback to the proxyUrl by default if not specified
+    const datasourceUrl = directUrl ?? proxyUrl;
+    if (datasourceUrl === undefined) {
+        throw new Error('No URL specified for Pyroscope client. You can use directUrl in the spec to configure it.');
+    }
+    const specHeaders = proxy?.spec.headers;
+    return {
+        options: {
+            datasourceUrl
+        },
+        searchProfiles: (params, headers)=>(0, _pyroscopeclient.searchProfiles)(params, {
+                datasourceUrl,
+                headers: headers ?? specHeaders
+            }),
+        searchProfileTypes: (params, headers, body)=>(0, _pyroscopeclient.searchProfileTypes)(params, {
+                datasourceUrl,
+                headers: headers ?? specHeaders
+            }, body),
+        searchLabelNames: (params, headers, body)=>(0, _pyroscopeclient.searchLabelNames)(params, {
+                datasourceUrl,
+                headers: headers ?? specHeaders
+            }, body),
+        searchLabelValues: (params, headers, body)=>(0, _pyroscopeclient.searchLabelValues)(params, {
+                datasourceUrl,
+                headers: headers ?? specHeaders
+            }, body),
+        searchServices: (params, headers)=>(0, _pyroscopeclient.searchServices)(params, {
+                datasourceUrl,
+                headers: headers ?? specHeaders
+            })
+    };
+};
+const PyroscopeDatasource = {
+    createClient,
+    OptionsEditorComponent: _PyroscopeDatasourceEditor.PyroscopeDatasourceEditor,
+    createInitialOptions: ()=>({
+            directUrl: ''
+        })
+};

package/lib/cjs/plugins/pyroscope-profile-query/PyroscopeProfileQuery.js

@@ -0,0 +1,41 @@
+// 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, "PyroscopeProfileQuery", {
+    enumerable: true,
+    get: function() {
+        return PyroscopeProfileQuery;
+    }
+});
+const _getprofiledata = require("./get-profile-data");
+const _PyroscopeProfileQueryEditor = require("./PyroscopeProfileQueryEditor");
+const PyroscopeProfileQuery = {
+    getProfileData: _getprofiledata.getProfileData,
+    OptionsEditorComponent: _PyroscopeProfileQueryEditor.PyroscopeProfileQueryEditor,
+    createInitialOptions: ()=>({
+            maxNodes: 0,
+            datasource: undefined,
+            service: '',
+            profileType: '',
+            filters: [
+                {
+                    labelName: '',
+                    labelValue: '',
+                    operator: '='
+                }
+            ]
+        })
+};

package/lib/cjs/plugins/pyroscope-profile-query/PyroscopeProfileQueryEditor.js

@@ -0,0 +1,114 @@
+// 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, "PyroscopeProfileQueryEditor", {
+    enumerable: true,
+    get: function() {
+        return PyroscopeProfileQueryEditor;
+    }
+});
+const _jsxruntime = require("react/jsx-runtime");
+const _pluginsystem = require("@perses-dev/plugin-system");
+const _components = require("@perses-dev/components");
+const _immer = require("immer");
+const _material = require("@mui/material");
+const _pyroscopeselectors = require("../../model/pyroscope-selectors");
+const _components1 = require("../../components");
+const _queryeditormodel = require("./query-editor-model");
+function PyroscopeProfileQueryEditor(props) {
+    const { onChange, value } = props;
+    const { datasource } = value;
+    const selectedDatasource = datasource ?? _pyroscopeselectors.DEFAULT_PYROSCOPE;
+    const datasourceSelectLabelID = (0, _components.useId)('pyroscope-datasource-label');
+    const { maxNodes, handleMaxNodesChange, maxNodesHasError } = (0, _queryeditormodel.useMaxNodesState)(props);
+    const { profileType, handleProfileTypeChange } = (0, _queryeditormodel.useProfileTypeState)(props);
+    const { service, handleServiceChange } = (0, _queryeditormodel.useServiceState)(props);
+    const { filters, handleFiltersChange } = (0, _queryeditormodel.useFiltersState)(props);
+    const handleDatasourceChange = (next)=>{
+        // Check if the next value is a DatasourceSelector
+        if (typeof next === 'object' && 'kind' in next && 'name' in next) {
+            if ((0, _pyroscopeselectors.isPyroscopeDatasourceSelector)(next)) {
+                onChange((0, _immer.produce)(value, (draft)=>{
+                    // If they're using the default, just omit the datasource prop (i.e. set to undefined)
+                    const nextDatasource = (0, _pyroscopeselectors.isDefaultPyroscopeSelector)(next) ? undefined : next;
+                    draft.datasource = nextDatasource;
+                }));
+                return;
+            }
+        }
+        throw new Error('Got unexpected non-Pyroscope datasource selector');
+    };
+    return /*#__PURE__*/ (0, _jsxruntime.jsxs)(_material.Stack, {
+        spacing: 2,
+        children: [
+            /*#__PURE__*/ (0, _jsxruntime.jsxs)(_material.FormControl, {
+                margin: "dense",
+                fullWidth: false,
+                children: [
+                    /*#__PURE__*/ (0, _jsxruntime.jsx)(_material.InputLabel, {
+                        id: datasourceSelectLabelID,
+                        shrink: true,
+                        children: "Pyroscope Datasource"
+                    }),
+                    /*#__PURE__*/ (0, _jsxruntime.jsx)(_pluginsystem.DatasourceSelect, {
+                        datasourcePluginKind: _pyroscopeselectors.PYROSCOPE_DATASOURCE_KIND,
+                        value: selectedDatasource,
+                        onChange: handleDatasourceChange,
+                        labelId: datasourceSelectLabelID,
+                        label: "Pyroscope Datasource",
+                        notched: true
+                    })
+                ]
+            }),
+            /*#__PURE__*/ (0, _jsxruntime.jsxs)(_material.Stack, {
+                direction: "row",
+                spacing: 0,
+                sx: {
+                    flexWrap: 'wrap',
+                    rowGap: 1,
+                    gap: 2
+                },
+                children: [
+                    /*#__PURE__*/ (0, _jsxruntime.jsx)(_components1.Service, {
+                        datasource: selectedDatasource,
+                        value: service,
+                        onChange: handleServiceChange
+                    }),
+                    /*#__PURE__*/ (0, _jsxruntime.jsx)(_components1.ProfileTypeSelector, {
+                        datasource: selectedDatasource,
+                        value: profileType,
+                        onChange: handleProfileTypeChange
+                    }),
+                    /*#__PURE__*/ (0, _jsxruntime.jsx)(_material.TextField, {
+                        size: "small",
+                        label: "Max Nodes",
+                        value: maxNodes,
+                        error: maxNodesHasError,
+                        onChange: (e)=>handleMaxNodesChange(e.target.value),
+                        sx: {
+                            width: '110px'
+                        }
+                    })
+                ]
+            }),
+            /*#__PURE__*/ (0, _jsxruntime.jsx)(_components1.Filters, {
+                datasource: selectedDatasource,
+                value: filters,
+                onChange: handleFiltersChange
+            })
+        ]
+    });
+}

package/lib/cjs/plugins/pyroscope-profile-query/get-profile-data.js

@@ -0,0 +1,201 @@
+// 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, {
+    getProfileData: function() {
+        return getProfileData;
+    },
+    getUnixTimeRange: function() {
+        return getUnixTimeRange;
+    }
+});
+const _datefns = require("date-fns");
+const _model = require("../../model");
+const _types = require("../../utils/types");
+function getUnixTimeRange(timeRange) {
+    const { start, end } = timeRange;
+    return {
+        start: Math.ceil((0, _datefns.getUnixTime)(start)),
+        end: Math.ceil((0, _datefns.getUnixTime)(end))
+    };
+}
+const getProfileData = async (spec, context)=>{
+    const defaultPyroscopeDatasource = {
+        kind: _model.PYROSCOPE_DATASOURCE_KIND
+    };
+    const client = await context.datasourceStore.getDatasourceClient(spec.datasource ?? defaultPyroscopeDatasource);
+    const buildQueryString = ()=>{
+        let query = '';
+        if (spec.service) {
+            query = `service_name="${spec.service}"`;
+        }
+        if (spec.filters && spec.filters.length > 0) {
+            const filterExpr = (0, _types.computeFilterExpr)(spec.filters);
+            if (query === '') {
+                query = filterExpr;
+            } else {
+                query += ',' + filterExpr;
+            }
+        }
+        query = spec.profileType + (query === '' ? '' : '{' + query + '}');
+        return query;
+    };
+    const getParams = ()=>{
+        const params = {
+            // example of query
+            // query: `process_cpu:cpu:nanoseconds:cpu:nanoseconds{service_name="pyroscope"}`,
+            query: buildQueryString(),
+            // the default value is now-1h
+            from: 'now-1h'
+        };
+        // handle time range selection from UI drop down (e.g. last 5 minutes, last 1 hour )
+        if (context.absoluteTimeRange) {
+            const { start, end } = getUnixTimeRange(context.absoluteTimeRange);
+            params.from = start;
+            params.until = end;
+        }
+        if (spec.maxNodes) {
+            params.maxNodes = spec.maxNodes;
+        }
+        return params;
+    };
+    const response = await client.searchProfiles(getParams());
+    // return a profile data
+    return transformProfileResponse(response);
+};
+/**
+ * This function transform the Pyroscope response into the Perses profile format
+ */ function transformProfileResponse(response) {
+    const newResponse = {
+        profile: {
+            stackTrace: {}
+        },
+        numTicks: 0,
+        maxSelf: 0,
+        metadata: {
+            spyName: '',
+            sampleRate: 0,
+            units: '',
+            name: ''
+        },
+        timeline: {
+            startTime: 0,
+            samples: [],
+            durationDelta: 0
+        }
+    };
+    if (!response) {
+        return newResponse;
+    }
+    const stackTraces = [];
+    // stackTraces id from 1
+    let id = 1;
+    // Set the profile stackTrace property
+    for(let i = 0; i < response.flamebearer.levels.length; i++){
+        let current = 0;
+        const row = [];
+        const level = response.flamebearer.levels[i];
+        if (!level) {
+            continue;
+        }
+        for(let j = 0; j < level.length; j += 4){
+            const temp = {};
+            temp.id = id;
+            id += 1;
+            const indexInNamesArray = level[j + 3]; // index in names array
+            if (indexInNamesArray !== undefined) {
+                const name = response.flamebearer.names[indexInNamesArray];
+                if (name) {
+                    temp.name = name;
+                }
+            }
+            temp.level = i;
+            const total = level[j + 1];
+            if (total !== undefined) {
+                temp.total = total;
+            }
+            const self = level[j + 2];
+            if (self !== undefined) {
+                temp.self = self;
+            }
+            // start and end
+            const offset = level[j];
+            if (offset !== undefined) {
+                current += offset; // current += offset
+            }
+            temp.start = current;
+            if (total !== undefined) {
+                current += total; // current += total
+            }
+            temp.end = current;
+            temp.children = [];
+            row.push(temp);
+        }
+        stackTraces.push(row);
+    }
+    addChildren(stackTraces); // adding children to nodes
+    if (stackTraces[0]?.[0]) {
+        newResponse.profile.stackTrace = stackTraces[0][0];
+    }
+    // Set other properties
+    newResponse.numTicks = response.flamebearer.numTicks;
+    newResponse.maxSelf = response.flamebearer.maxSelf;
+    newResponse.metadata = {
+        spyName: response.metadata.spyName,
+        sampleRate: response.metadata.sampleRate,
+        units: response.metadata.units,
+        name: response.metadata.name
+    };
+    newResponse.timeline = {
+        startTime: response.timeline.startTime,
+        samples: response.timeline.samples,
+        durationDelta: response.timeline.durationDelta
+    };
+    return newResponse;
+}
+// todo: optimize this method as soon as possible
+function addChildren(stackTraces) {
+    // for (let i = stackTraces.length - 1; i > 0; i--) {
+    for(let i = 1; i < stackTraces.length; i++){
+        const currentLevel = stackTraces[i];
+        const parentLevel = stackTraces[i - 1];
+        if (!currentLevel || !parentLevel) {
+            continue;
+        }
+        for(let j = 0; j < currentLevel.length; j++){
+            const currentStack = currentLevel[j];
+            if (!currentStack) {
+                continue;
+            }
+            for(let k = 0; k < parentLevel.length; k++){
+                const parentStack = parentLevel[k];
+                if (!parentStack) {
+                    continue;
+                }
+                if (currentStack.start >= parentStack.start && currentStack.end <= parentStack.end) {
+                    parentStack.children.push(currentStack);
+                    break;
+                }
+            }
+        }
+    }
+}