@perses-dev/dashboards 0.12.0 → 0.14.0

package/dist/cjs/components/Panel/PanelHeader.js

@@ -0,0 +1,116 @@
+// 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, "PanelHeader", {
+    enumerable: true,
+    get: ()=>PanelHeader
+});
+const _jsxRuntime = require("react/jsx-runtime");
+const _material = require("@mui/material");
+const _components = require("@perses-dev/components");
+const _informationOutline = /*#__PURE__*/ _interopRequireDefault(require("mdi-material-ui/InformationOutline"));
+const _pencilOutline = /*#__PURE__*/ _interopRequireDefault(require("mdi-material-ui/PencilOutline"));
+const _deleteOutline = /*#__PURE__*/ _interopRequireDefault(require("mdi-material-ui/DeleteOutline"));
+const _dragVertical = /*#__PURE__*/ _interopRequireDefault(require("mdi-material-ui/DragVertical"));
+function _interopRequireDefault(obj) {
+    return obj && obj.__esModule ? obj : {
+        default: obj
+    };
+}
+function PanelHeader({ id , title , description , editHandlers , isHovered , sx , ...rest }) {
+    const titleElementId = `${id}-title`;
+    const descriptionTooltipId = `${id}-description`;
+    // Don't show any actions unless panel is hovered
+    let action = undefined;
+    if (isHovered) {
+        if (editHandlers !== undefined) {
+            // If there are edit handlers, always just show the edit buttons
+            action = /*#__PURE__*/ (0, _jsxRuntime.jsxs)(_material.Stack, {
+                direction: "row",
+                alignItems: "center",
+                spacing: 0.5,
+                children: [
+                    /*#__PURE__*/ (0, _jsxRuntime.jsx)(HeaderIconButton, {
+                        "aria-label": "edit panel",
+                        size: "small",
+                        onClick: editHandlers.onEditPanelClick,
+                        children: /*#__PURE__*/ (0, _jsxRuntime.jsx)(_pencilOutline.default, {})
+                    }),
+                    /*#__PURE__*/ (0, _jsxRuntime.jsx)(HeaderIconButton, {
+                        "aria-label": "delete panel",
+                        size: "small",
+                        onClick: editHandlers.onDeletePanelClick,
+                        children: /*#__PURE__*/ (0, _jsxRuntime.jsx)(_deleteOutline.default, {})
+                    }),
+                    /*#__PURE__*/ (0, _jsxRuntime.jsx)(HeaderIconButton, {
+                        "aria-label": "drag handle",
+                        size: "small",
+                        children: /*#__PURE__*/ (0, _jsxRuntime.jsx)(_dragVertical.default, {
+                            className: "drag-handle",
+                            sx: {
+                                cursor: 'grab'
+                            }
+                        })
+                    })
+                ]
+            });
+        } else if (description !== undefined) {
+            // If there aren't edit handlers and we have a description, show a button with a tooltip for the panel description
+            action = /*#__PURE__*/ (0, _jsxRuntime.jsx)(_components.InfoTooltip, {
+                id: descriptionTooltipId,
+                description: description,
+                placement: _components.TooltipPlacement.Bottom,
+                children: /*#__PURE__*/ (0, _jsxRuntime.jsx)(HeaderIconButton, {
+                    "aria-label": "Panel Description",
+                    children: /*#__PURE__*/ (0, _jsxRuntime.jsx)(_informationOutline.default, {
+                        "aria-describedby": "info-tooltip",
+                        "aria-hidden": false,
+                        sx: {
+                            color: (theme)=>theme.palette.grey[700]
+                        }
+                    })
+                })
+            });
+        }
+    }
+    return /*#__PURE__*/ (0, _jsxRuntime.jsx)(_material.CardHeader, {
+        id: id,
+        component: "header",
+        "aria-labelledby": titleElementId,
+        "aria-describedby": descriptionTooltipId,
+        disableTypography: true,
+        title: /*#__PURE__*/ (0, _jsxRuntime.jsx)(_material.Typography, {
+            id: titleElementId,
+            variant: "subtitle1",
+            sx: {
+                whiteSpace: 'nowrap',
+                overflow: 'hidden',
+                textOverflow: 'ellipsis'
+            },
+            children: title
+        }),
+        action: action,
+        sx: (0, _components.combineSx)((theme)=>({
+                padding: theme.spacing(1),
+                borderBottom: `solid 1px ${theme.palette.divider}`
+            }), sx),
+        ...rest
+    });
+}
+const HeaderIconButton = (0, _material.styled)(_material.IconButton)(({ theme  })=>({
+        borderRadius: theme.shape.borderRadius,
+        padding: '4px'
+    }));

package/dist/cjs/components/Panel/index.js

@@ -15,7 +15,6 @@ Object.defineProperty(exports, "__esModule", {
     value: true
 });
 _exportStar(require("./Panel"), exports);
-_exportStar(require("./DeletePanelDialog"), 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/components/PanelDrawer/PanelDrawer.js

@@ -56,8 +56,7 @@ const PanelDrawer = ()=>{
                     sx: {
                         display: 'flex',
                         alignItems: 'center',
-                        marginBottom: (theme)=>theme.spacing(2),
-                        paddingBottom: (theme)=>theme.spacing(2),
+                        padding: (theme)=>theme.spacing(1, 2),
                         borderBottom: (theme)=>`1px solid ${theme.palette.grey[100]}`
                     },
                     children: [

package/dist/cjs/components/PanelDrawer/PanelDrawer.test.js

@@ -15,7 +15,6 @@ Object.defineProperty(exports, "__esModule", {
     value: true
 });
 const _jsxRuntime = require("react/jsx-runtime");
-const _pluginSystem = require("@perses-dev/plugin-system");
 const _react = require("@testing-library/react");
 const _userEvent = /*#__PURE__*/ _interopRequireDefault(require("@testing-library/user-event"));
 const _testUtils = require("react-dom/test-utils");
@@ -29,21 +28,16 @@ function _interopRequireDefault(obj) {
 }
 describe('Panel Drawer', ()=>{
     const renderPanelDrawer = ()=>{
-        const { addMockPlugin , pluginRegistryProps  } = (0, _test.mockPluginRegistryProps)();
-        addMockPlugin('Panel', 'TimeSeriesChart', _test.FAKE_PANEL_PLUGIN);
         const { store , DashboardProviderSpy  } = (0, _test.createDashboardProviderSpy)();
-        (0, _test.renderWithContext)(/*#__PURE__*/ (0, _jsxRuntime.jsx)(_pluginSystem.PluginRegistry, {
-            ...pluginRegistryProps,
-            children: /*#__PURE__*/ (0, _jsxRuntime.jsxs)(_dashboardProvider.DashboardProvider, {
-                initialState: {
-                    dashboardSpec: (0, _test.getTestDashboard)().spec,
-                    isEditMode: true
-                },
-                children: [
-                    /*#__PURE__*/ (0, _jsxRuntime.jsx)(DashboardProviderSpy, {}),
-                    /*#__PURE__*/ (0, _jsxRuntime.jsx)(_panelDrawer.PanelDrawer, {})
-                ]
-            })
+        (0, _test.renderWithContext)(/*#__PURE__*/ (0, _jsxRuntime.jsxs)(_dashboardProvider.DashboardProvider, {
+            initialState: {
+                dashboardResource: (0, _test.getTestDashboard)(),
+                isEditMode: true
+            },
+            children: [
+                /*#__PURE__*/ (0, _jsxRuntime.jsx)(DashboardProviderSpy, {}),
+                /*#__PURE__*/ (0, _jsxRuntime.jsx)(_panelDrawer.PanelDrawer, {})
+            ]
         }));
         const { value: storeApi  } = store;
         if (storeApi === undefined) {

package/dist/cjs/components/PanelDrawer/PanelEditorForm.js

@@ -73,16 +73,18 @@ function PanelEditorForm(props) {
     };
     var _title, ref1;
     return(// Grid maxHeight allows user to scroll inside Drawer to see all content
-    /*#__PURE__*/ (0, _jsxRuntime.jsx)("form", {
+    /*#__PURE__*/ (0, _jsxRuntime.jsx)(_material.Box, {
+        component: "form",
         id: panelEditorFormId,
         onSubmit: handleSubmit,
+        sx: {
+            flex: 1,
+            overflowY: 'scroll',
+            padding: (theme)=>theme.spacing(2)
+        },
         children: /*#__PURE__*/ (0, _jsxRuntime.jsxs)(_material.Grid, {
             container: true,
             spacing: 2,
-            sx: {
-                overflowY: 'scroll',
-                maxHeight: '90vh'
-            },
             children: [
                 /*#__PURE__*/ (0, _jsxRuntime.jsx)(_material.Grid, {
                     item: true,

package/dist/cjs/components/PanelDrawer/PanelPreview.js

@@ -21,34 +21,27 @@ Object.defineProperty(exports, "PanelPreview", {
 const _jsxRuntime = require("react/jsx-runtime");
 const _material = require("@mui/material");
 const _panel = require("../Panel");
-function PanelPreview({ name , description , kind , spec , groupId  }) {
-    const previewValues = {
-        definition: {
-            kind: 'Panel',
-            spec: {
-                display: {
-                    name,
-                    description
-                },
-                plugin: {
-                    kind,
-                    spec
-                }
+function PanelPreview({ name , description , kind , spec  }) {
+    const definition = {
+        kind: 'Panel',
+        spec: {
+            display: {
+                name,
+                description: description === '' ? undefined : description
+            },
+            plugin: {
+                kind,
+                spec
             }
-        },
-        // TODO: this shouldn't be necessary for preview
-        panelGroupItemId: {
-            panelGroupId: groupId,
-            panelGroupItemLayoutId: ''
         }
     };
-    if (!kind) {
+    if (kind === '') {
         return null;
     }
     return /*#__PURE__*/ (0, _jsxRuntime.jsx)(_material.Box, {
         height: 300,
         children: /*#__PURE__*/ (0, _jsxRuntime.jsx)(_panel.Panel, {
-            ...previewValues
+            definition: definition
         })
     });
 }

package/dist/cjs/components/PanelGroupDialog/PanelGroupDialog.test.js

@@ -31,7 +31,7 @@ describe('Add Panel Group', ()=>{
         const { store , DashboardProviderSpy  } = (0, _test.createDashboardProviderSpy)();
         (0, _test.renderWithContext)(/*#__PURE__*/ (0, _jsxRuntime.jsxs)(_context.DashboardProvider, {
             initialState: {
-                dashboardSpec: (0, _test.getTestDashboard)().spec,
+                dashboardResource: (0, _test.getTestDashboard)(),
                 isEditMode: true
             },
             children: [

package/dist/cjs/components/PanelGroupDialog/index.js

@@ -15,7 +15,6 @@ Object.defineProperty(exports, "__esModule", {
     value: true
 });
 _exportStar(require("./PanelGroupDialog"), exports);
-_exportStar(require("./DeletePanelGroupDialog"), 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/components/TimeRangeControls/TimeRangeControls.test.js

@@ -42,7 +42,7 @@ describe('TimeRangeControls', ()=>{
     };
     beforeEach(()=>{
         initialState = {
-            dashboardSpec: _testDashboard.default.spec
+            dashboardResource: _testDashboard.default
         };
     });
     const renderTimeRangeControls = ()=>{

package/dist/cjs/components/UnsavedChangesConfirmationDialog/UnsavedChangesConfirmationDialog.js

@@ -0,0 +1,67 @@
+// 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, "UnsavedChangesConfirmationDialog", {
+    enumerable: true,
+    get: ()=>UnsavedChangesConfirmationDialog
+});
+const _jsxRuntime = require("react/jsx-runtime");
+const _material = require("@mui/material");
+const _close = /*#__PURE__*/ _interopRequireDefault(require("mdi-material-ui/Close"));
+function _interopRequireDefault(obj) {
+    return obj && obj.__esModule ? obj : {
+        default: obj
+    };
+}
+const UnsavedChangesConfirmationDialog = ({ isOpen , onSave , onClose  })=>{
+    return /*#__PURE__*/ (0, _jsxRuntime.jsxs)(_material.Dialog, {
+        open: isOpen,
+        children: [
+            /*#__PURE__*/ (0, _jsxRuntime.jsx)(_material.DialogTitle, {
+                children: "Unsaved Changes"
+            }),
+            /*#__PURE__*/ (0, _jsxRuntime.jsx)(_material.IconButton, {
+                "aria-label": "Close",
+                onClick: onClose,
+                sx: (theme)=>({
+                        position: 'absolute',
+                        top: theme.spacing(0.5),
+                        right: theme.spacing(0.5)
+                    }),
+                children: /*#__PURE__*/ (0, _jsxRuntime.jsx)(_close.default, {})
+            }),
+            /*#__PURE__*/ (0, _jsxRuntime.jsx)(_material.DialogContent, {
+                sx: {
+                    width: '500px'
+                },
+                children: "You have unsaved changes in this dashboard. Would you like to save these changes?"
+            }),
+            /*#__PURE__*/ (0, _jsxRuntime.jsxs)(_material.DialogActions, {
+                children: [
+                    /*#__PURE__*/ (0, _jsxRuntime.jsx)(_material.Button, {
+                        variant: "contained",
+                        onClick: onSave,
+                        children: "Save"
+                    }),
+                    /*#__PURE__*/ (0, _jsxRuntime.jsx)(_material.Button, {
+                        onClick: onClose,
+                        children: "Cancel"
+                    })
+                ]
+            })
+        ]
+    });
+};

package/dist/cjs/components/UnsavedChangesConfirmationDialog/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("./UnsavedChangesConfirmationDialog"), 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/components/Variables/Variable.js

@@ -75,14 +75,17 @@ function ListVariable({ name  }) {
         });
     }
     const variablesValueKey = getVariableValuesKey(variables);
+    const { timeRange  } = (0, _pluginSystem.useTimeRange)();
     const variablesOptionsQuery = (0, _reactQuery.useQuery)([
         name,
         definition,
-        variablesValueKey
+        variablesValueKey,
+        timeRange
     ], async ()=>{
         const resp = await (variablePlugin === null || variablePlugin === void 0 ? void 0 : variablePlugin.getVariableOptions(spec, {
             datasourceStore,
-            variables
+            variables,
+            timeRange
         }));
         var ref;
         return (ref = resp === null || resp === void 0 ? void 0 : resp.data) !== null && ref !== void 0 ? ref : [];
@@ -128,22 +131,26 @@ function ListVariable({ name  }) {
         options,
         allowAllValue
     ]);
-    (0, _react.useEffect)(()=>{
-        const firstOption = finalOptions === null || finalOptions === void 0 ? void 0 : finalOptions[0];
-        const valueIsInOptions = Boolean(finalOptions.find((v)=>{
+    const valueIsInOptions = (0, _react.useMemo)(()=>Boolean(finalOptions.find((v)=>{
             if (allowMultiple) {
                 return value.includes(v.value);
             }
             return value === v.value;
-        }));
+        })), [
+        finalOptions,
+        value,
+        allowMultiple
+    ]);
+    let selectValue = value;
+    if (!valueIsInOptions) {
+        selectValue = allowMultiple ? [] : '';
+    }
+    (0, _react.useEffect)(()=>{
+        const firstOption = finalOptions === null || finalOptions === void 0 ? void 0 : finalOptions[0];
         // If there is no value but there are options, set the value to the first option.
         if (!value && firstOption) {
             setVariableValue(name, firstOption.value);
         }
-        // If there is a value but it's not in the options, select the first value or set to null
-        if (value && !valueIsInOptions && !definition.spec.default_value) {
-            setVariableValue(name, (firstOption === null || firstOption === void 0 ? void 0 : firstOption.value) || null);
-        }
     }, [
         finalOptions,
         setVariableValue,
@@ -167,7 +174,7 @@ function ListVariable({ name  }) {
                     },
                     id: name,
                     label: name,
-                    value: value !== null && value !== void 0 ? value : '',
+                    value: selectValue,
                     onChange: (e)=>{
                         // Must be selected
                         if (e.target.value === null || e.target.value.length === 0) {

package/dist/cjs/components/index.js

@@ -15,11 +15,15 @@ Object.defineProperty(exports, "__esModule", {
     value: true
 });
 _exportStar(require("./Dashboard"), exports);
+_exportStar(require("./DashboardToolbar"), exports);
+_exportStar(require("./DeletePanelDialog"), exports);
+_exportStar(require("./DeletePanelGroupDialog"), exports);
 _exportStar(require("./GridLayout"), exports);
 _exportStar(require("./Panel"), exports);
 _exportStar(require("./PanelDrawer"), exports);
 _exportStar(require("./PanelGroupDialog"), exports);
 _exportStar(require("./TimeRangeControls"), exports);
+_exportStar(require("./UnsavedChangesConfirmationDialog"), exports);
 _exportStar(require("./Variables"), exports);
 function _exportStar(from, to) {
     Object.keys(from).forEach(function(k) {

package/dist/cjs/context/DashboardProvider/DashboardProvider.js

@@ -51,10 +51,20 @@ function useDashboardStore(selector) {
     return (0, _zustand.useStore)(store, selector, _shallow.default);
 }
 function DashboardProvider(props) {
-    const { children , initialState: { dashboardSpec , isEditMode  } ,  } = props;
-    const { layouts , panels  } = dashboardSpec;
-    const dashboardStore = (0, _zustand.createStore)()((0, _immer.immer)((0, _middleware.devtools)((...args)=>{
-        const [set, get] = args;
+    const createDashboardStore = (0, _react.useCallback)(initStore, [
+        props
+    ]);
+    const [store] = (0, _react.useState)(createDashboardStore(props)); // prevent calling createDashboardStore every time it rerenders
+    return /*#__PURE__*/ (0, _jsxRuntime.jsx)(DashboardContext.Provider, {
+        value: store,
+        children: props.children
+    });
+}
+function initStore(props) {
+    const { initialState: { dashboardResource , isEditMode  } ,  } = props;
+    const { spec: { layouts , panels , duration  } , metadata ,  } = dashboardResource;
+    const store = (0, _zustand.createStore)()((0, _immer.immer)((0, _middleware.devtools)((...args)=>{
+        const [set] = args;
         return {
             ...(0, _panelGroupSlice.createPanelGroupSlice)(layouts)(...args),
             ...(0, _panelSlice.createPanelSlice)(panels)(...args),
@@ -62,27 +72,23 @@ function DashboardProvider(props) {
             ...(0, _deletePanelGroupSlice.createDeletePanelGroupSlice)(...args),
             ...(0, _panelEditorSlice.createPanelEditorSlice)()(...args),
             ...(0, _deletePanelSlice.createDeletePanelSlice)()(...args),
+            metadata,
             defaultTimeRange: {
-                pastDuration: dashboardSpec.duration
+                pastDuration: duration
             },
             isEditMode: !!isEditMode,
             setEditMode: (isEditMode)=>set({
                     isEditMode
                 }),
-            reset: ()=>{
-                const { resetPanels , resetPanelGroups  } = get();
-                resetPanels();
-                resetPanelGroups();
-            },
-            save: ()=>{
-                const { savePanels , savePanelGroups  } = get();
-                savePanels();
-                savePanelGroups();
+            setDashboard: ({ spec: { panels , layouts  }  })=>{
+                set((state)=>{
+                    const { panelGroups , panelGroupOrder  } = (0, _panelGroupSlice.convertLayoutsToPanelGroups)(layouts);
+                    state.panels = panels;
+                    state.panelGroups = panelGroups;
+                    state.panelGroupOrder = panelGroupOrder;
+                });
             }
         };
     })));
-    return /*#__PURE__*/ (0, _jsxRuntime.jsx)(DashboardContext.Provider, {
-        value: dashboardStore,
-        children: children
-    });
+    return store;
 }

package/dist/cjs/context/DashboardProvider/common.js

@@ -22,7 +22,7 @@ Object.defineProperty(exports, "generateId", {
 });
 function generateId() {
     if (globalThis.dashboardStoreId === undefined) {
-        globalThis.dashboardStoreId = -1;
+        globalThis.dashboardStoreId = 0;
     }
     return globalThis.dashboardStoreId++;
 }

package/dist/cjs/context/DashboardProvider/dashboard-provider-api.js

@@ -44,13 +44,11 @@ function useEditMode() {
         }));
 }
 function useDashboardActions() {
-    const save = (0, _dashboardProvider.useDashboardStore)((store)=>store.save);
-    const reset = (0, _dashboardProvider.useDashboardStore)((store)=>store.reset);
+    const setDashboard = (0, _dashboardProvider.useDashboardStore)((store)=>store.setDashboard);
     const openAddPanelGroup = (0, _dashboardProvider.useDashboardStore)((store)=>store.openAddPanelGroup);
     const openAddPanel = (0, _dashboardProvider.useDashboardStore)((store)=>store.openAddPanel);
     return {
-        save,
-        reset,
+        setDashboard,
         openAddPanelGroup,
         openAddPanel: ()=>openAddPanel(undefined)
     };

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

@@ -14,65 +14,24 @@
 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) {
-    // 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);
-    }
+    const { panelGroups , panelGroupOrder  } = convertLayoutsToPanelGroups(layouts);
     // Return the state creator function for Zustand
     return (set)=>({
             panelGroups,
-            panelGroupOrder: panelGroupIdOrder,
-            previousPanelGroupState: {
-                panelGroups,
-                panelGroupIdOrder
-            },
-            savePanelGroups () {
-                set((state)=>{
-                    state.previousPanelGroupState = {
-                        panelGroups: state.panelGroups,
-                        panelGroupIdOrder: state.panelGroupOrder
-                    };
-                });
-            },
-            resetPanelGroups () {
-                set((state)=>{
-                    state.panelGroups = state.previousPanelGroupState.panelGroups;
-                    state.panelGroupOrder = state.previousPanelGroupState.panelGroupIdOrder;
-                });
-            },
+            panelGroupOrder,
             swapPanelGroups (x, y) {
                 set((state)=>{
                     if (x < 0 || x >= state.panelGroupOrder.length || y < 0 || y >= state.panelGroupOrder.length) {
@@ -101,3 +60,39 @@ function createPanelGroupSlice(layouts) {
             }
         });
 }
+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 {
+        panelGroups,
+        panelGroupOrder: panelGroupIdOrder
+    };
+}