@perses-dev/dashboards 0.11.0 → 0.13.0

package/dist/cjs/context/DashboardProvider/panel-group-slice.js

@@ -14,195 +14,85 @@
 Object.defineProperty(exports, "__esModule", {
     value: true
 });
-Object.defineProperty(exports, "createPanelGroupSlice", {
-    enumerable: true,
-    get: ()=>createPanelGroupSlice
+function _export(target, all) {
+    for(var name in all)Object.defineProperty(target, name, {
+        enumerable: true,
+        get: all[name]
+    });
+}
+_export(exports, {
+    createPanelGroupSlice: ()=>createPanelGroupSlice,
+    convertLayoutsToPanelGroups: ()=>convertLayoutsToPanelGroups
 });
 const _core = require("@perses-dev/core");
+const _common = require("./common");
 function createPanelGroupSlice(layouts) {
-    // Helper function for generating unique IDs for a PanelGroup
-    let id = -1;
-    function createPanelGroupId() {
-        id++;
-        return id;
-    }
-    // Convert the initial layouts from the JSON to panel groups and keep track of the order
-    const panelGroups = {};
-    const panelGroupIdOrder = [];
-    for (const layout of layouts){
-        var ref, ref1, ref2;
-        const id1 = createPanelGroupId();
-        panelGroups[id1] = {
-            id: id1,
-            items: layout.spec.items,
-            isCollapsed: ((ref = layout.spec.display) === null || ref === void 0 ? void 0 : (ref1 = ref.collapse) === null || ref1 === void 0 ? void 0 : ref1.open) === false,
-            title: (ref2 = layout.spec.display) === null || ref2 === void 0 ? void 0 : ref2.title
-        };
-        panelGroupIdOrder.push(id1);
-    }
+    const { panelGroups , panelGroupOrder  } = convertLayoutsToPanelGroups(layouts);
     // Return the state creator function for Zustand
-    return (set, get)=>{
-        return {
+    return (set)=>({
             panelGroups,
-            panelGroupIdOrder,
-            previousPanelGroupStates: {
-                panelGroups,
-                panelGroupIdOrder
-            },
-            // TODO: Reorder init logic so this isn't exposed
-            createPanelGroupId,
-            savePanelGroups () {
-                set((state)=>{
-                    state.previousPanelGroupStates = {
-                        panelGroups: state.panelGroups,
-                        panelGroupIdOrder: state.panelGroupIdOrder
-                    };
-                });
-            },
-            resetPanelGroups () {
-                set((state)=>{
-                    state.panelGroups = state.previousPanelGroupStates.panelGroups;
-                    state.panelGroupIdOrder = state.previousPanelGroupStates.panelGroupIdOrder;
-                });
-            },
-            getPanelKey ({ panelGroupId , itemIndex  }) {
-                const { panelGroups  } = get();
-                const group = findGroup(panelGroups, panelGroupId);
-                const item = findItem(group, itemIndex);
-                return (0, _core.getPanelKeyFromRef)(item.content);
-            },
-            addPanelToGroup (panelKey, panelGroupId) {
-                const { panelGroups  } = get();
-                const group = findGroup(panelGroups, panelGroupId);
-                const gridItem = {
-                    x: 0,
-                    y: getYForNewRow(group),
-                    width: 12,
-                    height: 6,
-                    content: (0, _core.createPanelRef)(panelKey)
-                };
-                set((state)=>{
-                    var ref;
-                    (ref = state.panelGroups[panelGroupId]) === null || ref === void 0 ? void 0 : ref.items.push(gridItem);
-                });
-            },
-            movePanelToGroup ({ panelGroupId , itemIndex  }, newPanelGroupId) {
-                const { panelGroups  } = get();
-                // Find the existing item to make sure it exists
-                const group = findGroup(panelGroups, panelGroupId);
-                const item = findItem(group, itemIndex);
-                // Find the new group and figure out where a new row should go
-                const newGroup = findGroup(panelGroups, newPanelGroupId);
-                const newGroupY = getYForNewRow(newGroup);
-                set((state)=>{
-                    var // Remove the item from its current group
-                    ref, // Add a new item to the new group
-                    ref1;
-                    (ref = state.panelGroups[panelGroupId]) === null || ref === void 0 ? void 0 : ref.items.splice(itemIndex, 1);
-                    (ref1 = state.panelGroups[newPanelGroupId]) === null || ref1 === void 0 ? void 0 : ref1.items.push({
-                        x: 0,
-                        y: newGroupY,
-                        width: item.width,
-                        height: item.height,
-                        content: item.content
-                    });
-                });
-            },
+            panelGroupOrder,
             swapPanelGroups (x, y) {
                 set((state)=>{
-                    if (x < 0 || x >= state.panelGroupIdOrder.length || y < 0 || y >= state.panelGroupIdOrder.length) {
+                    if (x < 0 || x >= state.panelGroupOrder.length || y < 0 || y >= state.panelGroupOrder.length) {
                         throw new Error('index out of bound');
                     }
-                    const xPanelGroup = state.panelGroupIdOrder[x];
-                    const yPanelGroup = state.panelGroupIdOrder[y];
+                    const xPanelGroup = state.panelGroupOrder[x];
+                    const yPanelGroup = state.panelGroupOrder[y];
                     if (xPanelGroup === undefined || yPanelGroup === undefined) {
                         throw new Error('panel group is undefined');
                     }
                     // assign yPanelGroup to layouts[x] and assign xGroup to layouts[y], swapping two panel groups
-                    [state.panelGroupIdOrder[x], state.panelGroupIdOrder[y]] = [
+                    [state.panelGroupOrder[x], state.panelGroupOrder[y]] = [
                         yPanelGroup,
                         xPanelGroup
                     ];
                 });
             },
-            deletePanelInPanelGroup ({ panelGroupId , itemIndex  }) {
+            updatePanelGroupLayouts (panelGroupId, itemLayouts) {
                 set((state)=>{
                     const group = state.panelGroups[panelGroupId];
                     if (group === undefined) {
-                        throw new Error(`No panel group found: ${panelGroupId}`);
+                        throw new Error(`Cannot find panel group ${panelGroupId}`);
                     }
-                    // remove panel from panel group
-                    group.items.splice(itemIndex, 1);
-                });
-            },
-            deletePanelGroup (panelGroupId) {
-                const { panelGroups , panelGroupIdOrder: panelGroupOrder , deletePanels  } = get();
-                const group = findGroup(panelGroups, panelGroupId);
-                const orderIdx = panelGroupOrder.findIndex((id)=>id === panelGroupId);
-                if (orderIdx === -1) {
-                    throw new Error(`Could not find panel group Id ${panelGroupId} in order array`);
-                }
-                // remove panels from group first
-                const panelsToBeDeleted = [];
-                for(let i = 0; i < group.items.length; i++){
-                    panelsToBeDeleted.push({
-                        panelGroupId,
-                        itemIndex: i
-                    });
-                }
-                deletePanels(panelsToBeDeleted);
-                // remove group from both panelGroups and panelGroupOrder
-                set((state)=>{
-                    state.panelGroupIdOrder.splice(orderIdx, 1);
-                    delete state.panelGroups[panelGroupId];
+                    group.itemLayouts = itemLayouts;
                 });
-            },
-            // Return an object that maps each panel to the groups it belongs
-            mapPanelToPanelGroups () {
-                const map = {}; // { panel key: [group ids] }
-                Object.values(get().panelGroups).forEach((group)=>{
-                    // for each panel in a group, add the group id to map[panelKey]
-                    group.items.forEach((panel)=>{
-                        const panelKey = (0, _core.getPanelKeyFromRef)(panel.content);
-                        if (map[panelKey]) {
-                            var ref;
-                            (ref = map[panelKey]) === null || ref === void 0 ? void 0 : ref.push(group.id);
-                        } else {
-                            map[panelKey] = [
-                                group.id
-                            ];
-                        }
-                    });
-                });
-                return map;
             }
-        };
-    };
-}
-// Helper to find a group and throw if not found
-function findGroup(panelGroups, groupId) {
-    const group = panelGroups[groupId];
-    if (group === undefined) {
-        throw new Error(`No panel group found for Id ${groupId}`);
-    }
-    return group;
-}
-// Helper to get an item in a group and throw if not found
-function findItem(group, itemIndex) {
-    const item = group.items[itemIndex];
-    if (item === undefined) {
-        throw new Error(`No grid item found at position ${itemIndex}`);
-    }
-    return item;
+        });
 }
-// Given a Grid, will find the Y coordinate for adding a new row to the grid, taking into account the items present
-function getYForNewRow(group) {
-    let newRowY = 0;
-    for (const item of group.items){
-        const itemMaxY = item.y + item.height;
-        if (itemMaxY > newRowY) {
-            newRowY = itemMaxY;
+function convertLayoutsToPanelGroups(layouts) {
+    // Convert the initial layouts from the JSON
+    const panelGroups = {};
+    const panelGroupIdOrder = [];
+    for (const layout of layouts){
+        var ref, ref1, ref2;
+        const itemLayouts = [];
+        const itemPanelKeys = {};
+        // Split layout information from panel keys to make it easier to update just layouts on move/resize of panels
+        for (const item of layout.spec.items){
+            const panelGroupLayoutId = (0, _common.generateId)().toString();
+            itemLayouts.push({
+                i: panelGroupLayoutId,
+                w: item.width,
+                h: item.height,
+                x: item.x,
+                y: item.y
+            });
+            itemPanelKeys[panelGroupLayoutId] = (0, _core.getPanelKeyFromRef)(item.content);
         }
+        // Create the panel group and keep track of the ID order
+        const panelGroupId = (0, _common.generateId)();
+        panelGroups[panelGroupId] = {
+            id: panelGroupId,
+            isCollapsed: ((ref = layout.spec.display) === null || ref === void 0 ? void 0 : (ref1 = ref.collapse) === null || ref1 === void 0 ? void 0 : ref1.open) === false,
+            title: (ref2 = layout.spec.display) === null || ref2 === void 0 ? void 0 : ref2.title,
+            itemLayouts,
+            itemPanelKeys
+        };
+        panelGroupIdOrder.push(panelGroupId);
     }
-    return newRowY;
+    return {
+        panelGroups,
+        panelGroupOrder: panelGroupIdOrder
+    };
 }

package/dist/cjs/context/DashboardProvider/panel-slice.js

@@ -0,0 +1,25 @@
+// Copyright 2022 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, "createPanelSlice", {
+    enumerable: true,
+    get: ()=>createPanelSlice
+});
+function createPanelSlice(panels) {
+    return ()=>({
+            panels
+        });
+}

package/dist/cjs/context/{TemplateVariableProvider.js → TemplateVariableProvider/TemplateVariableProvider.js}

@@ -34,6 +34,7 @@ const _zustand = require("zustand");
 const _immer = require("zustand/middleware/immer");
 const _middleware = require("zustand/middleware");
 const _pluginSystem = require("@perses-dev/plugin-system");
+const _queryParams = require("./query-params");
 const TemplateVariableStoreContext = /*#__PURE__*/ (0, _react.createContext)(undefined);
 function useTemplateVariableStoreCtx() {
     const context = (0, _react.useContext)(TemplateVariableStoreContext);
@@ -119,14 +120,15 @@ function PluginProvider({ children  }) {
         children: children
     });
 }
-function createTemplateVariableSrvStore({ initialVariableDefinitions =[]  }) {
+function createTemplateVariableSrvStore({ initialVariableDefinitions =[] , queryParams  }) {
+    const initialParams = (0, _queryParams.getInitalValuesFromQueryParameters)(queryParams ? queryParams[0] : {});
     const store = (0, _zustand.createStore)()((0, _middleware.devtools)((0, _immer.immer)((set)=>({
-            variableState: hydrateTemplateVariableStates(initialVariableDefinitions),
+            variableState: hydrateTemplateVariableStates(initialVariableDefinitions, initialParams),
             variableDefinitions: initialVariableDefinitions,
             setVariableDefinitions (definitions) {
                 set((state)=>{
                     state.variableDefinitions = definitions;
-                    state.variableState = hydrateTemplateVariableStates(definitions);
+                    state.variableState = hydrateTemplateVariableStates(definitions, initialParams);
                 });
             },
             setVariableOptions (name, options) {
@@ -161,14 +163,22 @@ function createTemplateVariableSrvStore({ initialVariableDefinitions =[]  }) {
                             val = val.filter((v)=>v !== _pluginSystem.DEFAULT_ALL_VALUE);
                         }
                     }
+                    if (queryParams) {
+                        const setQueryParams = queryParams[1];
+                        setQueryParams({
+                            [(0, _queryParams.getURLQueryParamName)(name)]: val
+                        });
+                    }
                     varState.value = val;
                 })
         }))));
     return store;
 }
 function TemplateVariableProvider({ children , initialVariableDefinitions =[]  }) {
+    const queryParams = (0, _queryParams.useVariableQueryParams)(initialVariableDefinitions);
     const [store] = (0, _react.useState)(createTemplateVariableSrvStore({
-        initialVariableDefinitions
+        initialVariableDefinitions,
+        queryParams
     }));
     return /*#__PURE__*/ (0, _jsxRuntime.jsx)(TemplateVariableStoreContext.Provider, {
         value: store,
@@ -177,23 +187,23 @@ function TemplateVariableProvider({ children , initialVariableDefinitions =[]  }
         })
     });
 }
-/** Helpers */ function hydrateTemplateVariableState(definition) {
+/** Helpers */ function hydrateTemplateVariableState(definition, initialValue) {
     const v = definition;
-    var _default_value;
+    var ref;
     const varState = {
-        value: (_default_value = v.spec.default_value) !== null && _default_value !== void 0 ? _default_value : null,
+        value: (ref = initialValue !== null && initialValue !== void 0 ? initialValue : v.spec.default_value) !== null && ref !== void 0 ? ref : null,
         loading: false
     };
     switch(v.kind){
         case 'TextVariable':
-            varState.value = v.spec.value;
+            varState.value = initialValue !== null && initialValue !== void 0 ? initialValue : v.spec.value;
             break;
         case 'ListVariable':
             varState.options = [];
             if (varState.options.length > 0 && !varState.value) {
-                var ref;
                 var ref1;
-                const firstOptionValue = (ref1 = (ref = varState.options[0]) === null || ref === void 0 ? void 0 : ref.value) !== null && ref1 !== void 0 ? ref1 : null;
+                var ref2;
+                const firstOptionValue = (ref2 = (ref1 = varState.options[0]) === null || ref1 === void 0 ? void 0 : ref1.value) !== null && ref2 !== void 0 ? ref2 : null;
                 if (firstOptionValue !== null) {
                     varState.value = v.spec.allow_multiple ? [
                         firstOptionValue
@@ -206,10 +216,13 @@ function TemplateVariableProvider({ children , initialVariableDefinitions =[]  }
     }
     return varState;
 }
-function hydrateTemplateVariableStates(definitions) {
+function hydrateTemplateVariableStates(definitions, initialValues) {
     const state = {};
     definitions.forEach((v)=>{
-        state[v.spec.name] = hydrateTemplateVariableState(v);
+        const name = v.spec.name;
+        const param = initialValues[name];
+        const initialValue = param ? param : null;
+        state[name] = hydrateTemplateVariableState(v, initialValue);
     });
     return state;
 }

package/dist/cjs/context/TemplateVariableProvider/index.js

@@ -0,0 +1,28 @@
+// Copyright 2022 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
+});
+_exportStar(require("./TemplateVariableProvider"), exports);
+function _exportStar(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/dist/cjs/context/TemplateVariableProvider/query-params.js

@@ -0,0 +1,79 @@
+// Copyright 2022 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, {
+    getURLQueryParamName: ()=>getURLQueryParamName,
+    encodeVariableValue: ()=>encodeVariableValue,
+    decodeVariableValue: ()=>decodeVariableValue,
+    useVariableQueryParams: ()=>useVariableQueryParams,
+    getInitalValuesFromQueryParameters: ()=>getInitalValuesFromQueryParameters
+});
+const _useQueryParams = require("use-query-params");
+const variableQueryParameterPrefix = 'var-';
+function getURLQueryParamName(name) {
+    return `${variableQueryParameterPrefix}${name}`;
+}
+function encodeVariableValue(value) {
+    if (Array.isArray(value)) {
+        return value.join(',');
+    }
+    return value;
+}
+function decodeVariableValue(value) {
+    if (!value) {
+        return null;
+    }
+    const values = value.split(',');
+    if (values.length === 1) {
+        return values[0];
+    }
+    return values;
+}
+const VariableValueParam = {
+    encode: encodeVariableValue,
+    decode: (v)=>{
+        if (typeof v === 'string') {
+            return decodeVariableValue(v);
+        }
+        return '';
+    }
+};
+function useVariableQueryParams(defs) {
+    const config = {};
+    defs.forEach((def)=>{
+        const name = getURLQueryParamName(def.spec.name);
+        config[name] = VariableValueParam;
+    });
+    return (0, _useQueryParams.useQueryParams)(config);
+}
+function getInitalValuesFromQueryParameters(queryParamValues) {
+    const values = {};
+    Object.keys(queryParamValues).forEach((key)=>{
+        const value = queryParamValues[key];
+        if (!value) {
+            return;
+        }
+        const name = key.replace(variableQueryParameterPrefix, '');
+        values[name] = value;
+    });
+    return values;
+}

package/dist/cjs/context/TemplateVariableProvider/query-params.test.js

@@ -0,0 +1,82 @@
+// Copyright 2022 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
+});
+const _queryParams = require("./query-params");
+describe('getInitalValuesFromQueryParameters', ()=>{
+    test('base case', ()=>{
+        expect((0, _queryParams.getInitalValuesFromQueryParameters)({
+            'var-foo': 'bar',
+            'var-baz': [
+                'qux',
+                'quux'
+            ]
+        })).toEqual({
+            foo: 'bar',
+            baz: [
+                'qux',
+                'quux'
+            ]
+        });
+    });
+});
+describe('encodeVariableValue', ()=>{
+    const testCases = [
+        {
+            input: 'foo',
+            expected: 'foo'
+        },
+        {
+            input: [
+                'foo',
+                'bar'
+            ],
+            expected: 'foo,bar'
+        },
+        {
+            input: '$__all',
+            expected: '$__all'
+        }
+    ];
+    testCases.forEach(({ input , expected  })=>{
+        test(`encodes ${input} as ${expected}`, ()=>{
+            expect((0, _queryParams.encodeVariableValue)(input)).toEqual(expected);
+        });
+    });
+});
+describe('decodeVariableValue', ()=>{
+    const testCases = [
+        {
+            input: 'foo',
+            expected: 'foo'
+        },
+        {
+            input: 'foo,bar',
+            expected: [
+                'foo',
+                'bar'
+            ]
+        },
+        {
+            input: '$__all',
+            expected: '$__all'
+        }
+    ];
+    testCases.forEach(({ input , expected  })=>{
+        test(`encodes ${input} as ${expected}`, ()=>{
+            expect((0, _queryParams.decodeVariableValue)(input)).toEqual(expected);
+        });
+    });
+});

package/dist/cjs/context/index.js

@@ -18,7 +18,7 @@ _exportStar(require("./DashboardProvider"), exports);
 _exportStar(require("./DatasourceStoreProvider"), exports);
 _exportStar(require("./TemplateVariableProvider"), exports);
 _exportStar(require("./TimeRangeProvider"), exports);
-_exportStar(require("./useDashboardSpec"), exports);
+_exportStar(require("./useDashboard"), exports);
 function _exportStar(from, to) {
     Object.keys(from).forEach(function(k) {
         if (k !== "default" && !Object.prototype.hasOwnProperty.call(to, k)) Object.defineProperty(to, k, {

package/dist/cjs/context/useDashboard.js

@@ -0,0 +1,94 @@
+// Copyright 2022 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, "useDashboard", {
+    enumerable: true,
+    get: ()=>useDashboard
+});
+const _core = require("@perses-dev/core");
+const _dashboardProvider = require("./DashboardProvider");
+const _templateVariableProvider = require("./TemplateVariableProvider");
+function useDashboard() {
+    const { panels , panelGroups , panelGroupOrder , defaultTimeRange , metadata , setDashboard: setDashboardResource ,  } = (0, _dashboardProvider.useDashboardStore)(({ panels , panelGroups , panelGroupOrder , defaultTimeRange , setDashboard , metadata  })=>({
+            panels,
+            panelGroups,
+            panelGroupOrder,
+            defaultTimeRange,
+            setDashboard,
+            metadata
+        }));
+    const { setVariableDefinitions  } = (0, _templateVariableProvider.useTemplateVariableActions)();
+    const variables = (0, _templateVariableProvider.useTemplateVariableDefinitions)();
+    const layouts = convertPanelGroupsToLayouts(panelGroups, panelGroupOrder);
+    const dashboard = {
+        kind: 'Dashboard',
+        metadata,
+        spec: {
+            panels,
+            layouts,
+            variables,
+            duration: defaultTimeRange.pastDuration
+        }
+    };
+    const setDashboard = (dashboardResource)=>{
+        setVariableDefinitions(dashboardResource.spec.variables);
+        setDashboardResource(dashboardResource);
+    };
+    return {
+        dashboard,
+        setDashboard
+    };
+}
+function convertPanelGroupsToLayouts(panelGroups, panelGroupOrder) {
+    const layouts = [];
+    panelGroupOrder.map((groupOrderId)=>{
+        const group = panelGroups[groupOrderId];
+        if (group === undefined) {
+            throw new Error('panel group not found');
+        }
+        const { title , isCollapsed , itemLayouts , itemPanelKeys  } = group;
+        let display = undefined;
+        if (title) {
+            display = {
+                title,
+                collapse: {
+                    open: !isCollapsed
+                }
+            };
+        }
+        const layout = {
+            kind: 'Grid',
+            spec: {
+                display,
+                items: itemLayouts.map((layout)=>{
+                    const panelKey = itemPanelKeys[layout.i];
+                    if (panelKey === undefined) {
+                        throw new Error(`Missing panel key of layout ${layout.i}`);
+                    }
+                    return {
+                        x: layout.x,
+                        y: layout.y,
+                        width: layout.w,
+                        height: layout.h,
+                        content: (0, _core.createPanelRef)(panelKey)
+                    };
+                })
+            }
+        };
+        layouts.push(layout);
+    });
+    return layouts;
+}