@perses-dev/dashboards 0.10.0 → 0.12.0

package/dist/cjs/components/Variables/VariableEditor.js

@@ -24,6 +24,8 @@ const _material = require("@mui/material");
 const _useImmer = require("use-immer");
 const _pencil = /*#__PURE__*/ _interopRequireDefault(require("mdi-material-ui/Pencil"));
 const _trashCan = /*#__PURE__*/ _interopRequireDefault(require("mdi-material-ui/TrashCan"));
+const _arrowUp = /*#__PURE__*/ _interopRequireDefault(require("mdi-material-ui/ArrowUp"));
+const _arrowDown = /*#__PURE__*/ _interopRequireDefault(require("mdi-material-ui/ArrowDown"));
 const _variableEditorForm = require("./VariableEditorForm");
 function _interopRequireDefault(obj) {
     return obj && obj.__esModule ? obj : {
@@ -64,6 +66,27 @@ function VariableEditor(props) {
             v.spec.display.hidden = visible === false;
         });
     };
+    const changeVariableOrder = (index, direction)=>{
+        setVariableDefinitions((draft)=>{
+            if (direction === 'up') {
+                const prevElement = draft[index - 1];
+                const currentElement = draft[index];
+                if (index === 0 || !prevElement || !currentElement) {
+                    return;
+                }
+                draft[index - 1] = currentElement;
+                draft[index] = prevElement;
+            } else {
+                const nextElement = draft[index + 1];
+                const currentElement1 = draft[index];
+                if (index === draft.length - 1 || !nextElement || !currentElement1) {
+                    return;
+                }
+                draft[index + 1] = currentElement1;
+                draft[index] = nextElement;
+            }
+        });
+    };
     return /*#__PURE__*/ (0, _jsxRuntime.jsxs)(_material.Box, {
         p: 4,
         children: [
@@ -94,18 +117,19 @@ function VariableEditor(props) {
                         justifyContent: "end",
                         children: [
                             /*#__PURE__*/ (0, _jsxRuntime.jsx)(_material.Button, {
+                                disabled: props.variableDefinitions === variableDefinitions,
+                                variant: "contained",
                                 onClick: ()=>{
-                                    props.onCancel();
+                                    props.onChange(variableDefinitions);
                                 },
-                                children: "Cancel"
+                                children: "Apply"
                             }),
                             /*#__PURE__*/ (0, _jsxRuntime.jsx)(_material.Button, {
-                                disabled: props.variableDefinitions === variableDefinitions,
-                                variant: "contained",
+                                variant: "outlined",
                                 onClick: ()=>{
-                                    props.onChange(variableDefinitions);
+                                    props.onCancel();
                                 },
-                                children: "Apply Changes"
+                                children: "Cancel"
                             })
                         ]
                     }),
@@ -173,6 +197,16 @@ function VariableEditor(props) {
                                                         /*#__PURE__*/ (0, _jsxRuntime.jsxs)(_material.TableCell, {
                                                             align: "right",
                                                             children: [
+                                                                /*#__PURE__*/ (0, _jsxRuntime.jsx)(_material.IconButton, {
+                                                                    onClick: ()=>changeVariableOrder(idx, 'up'),
+                                                                    disabled: idx === 0,
+                                                                    children: /*#__PURE__*/ (0, _jsxRuntime.jsx)(_arrowUp.default, {})
+                                                                }),
+                                                                /*#__PURE__*/ (0, _jsxRuntime.jsx)(_material.IconButton, {
+                                                                    onClick: ()=>changeVariableOrder(idx, 'down'),
+                                                                    disabled: idx === variableDefinitions.length - 1,
+                                                                    children: /*#__PURE__*/ (0, _jsxRuntime.jsx)(_arrowDown.default, {})
+                                                                }),
                                                                 /*#__PURE__*/ (0, _jsxRuntime.jsx)(_material.IconButton, {
                                                                     onClick: ()=>setVariableEditIdx(idx),
                                                                     children: /*#__PURE__*/ (0, _jsxRuntime.jsx)(_pencil.default, {})

package/dist/cjs/components/Variables/VariableEditorForm/VariableEditorForm.js

@@ -54,6 +54,7 @@ function VariableEditForm({ initialVariableDefinition , onChange , onCancel  })
                         item: true,
                         xs: 6,
                         children: /*#__PURE__*/ (0, _jsxRuntime.jsx)(_material.TextField, {
+                            fullWidth: true,
                             label: "Name",
                             value: state.name,
                             onChange: (v)=>{
@@ -95,6 +96,7 @@ function VariableEditForm({ initialVariableDefinition , onChange , onCancel  })
                         item: true,
                         xs: 6,
                         children: /*#__PURE__*/ (0, _jsxRuntime.jsx)(_material.TextField, {
+                            fullWidth: true,
                             label: "Label",
                             value: state.label,
                             onChange: (v)=>{
@@ -108,6 +110,7 @@ function VariableEditForm({ initialVariableDefinition , onChange , onCancel  })
                         item: true,
                         xs: 12,
                         children: /*#__PURE__*/ (0, _jsxRuntime.jsx)(_material.TextField, {
+                            fullWidth: true,
                             label: "Description",
                             value: state.description,
                             onChange: (v)=>{
@@ -217,17 +220,18 @@ function VariableEditForm({ initialVariableDefinition , onChange , onCancel  })
                 justifyContent: "end",
                 children: [
                     /*#__PURE__*/ (0, _jsxRuntime.jsx)(_material.Button, {
+                        variant: "contained",
                         onClick: ()=>{
-                            onCancel();
+                            onChange((0, _variableEditorFormModel.getVariableDefinitionFromState)(state));
                         },
-                        children: "Cancel"
+                        children: "Update"
                     }),
                     /*#__PURE__*/ (0, _jsxRuntime.jsx)(_material.Button, {
-                        variant: "contained",
+                        variant: "outlined",
                         onClick: ()=>{
-                            onChange((0, _variableEditorFormModel.getVariableDefinitionFromState)(state));
+                            onCancel();
                         },
-                        children: "Update Variable"
+                        children: "Cancel"
                     })
                 ]
             })

package/dist/cjs/components/Variables/VariableList.js

@@ -39,7 +39,6 @@ function TemplateVariableList() {
     const showVariables = isEditMode ? showVariablesInEditMode : true;
     const { setVariableDefinitions  } = (0, _context.useTemplateVariableActions)();
     return /*#__PURE__*/ (0, _jsxRuntime.jsxs)(_material.Box, {
-        m: 2,
         children: [
             /*#__PURE__*/ (0, _jsxRuntime.jsx)(_material.Drawer, {
                 anchor: 'right',

package/dist/cjs/components/index.js

@@ -18,6 +18,7 @@ _exportStar(require("./Dashboard"), exports);
 _exportStar(require("./GridLayout"), exports);
 _exportStar(require("./Panel"), exports);
 _exportStar(require("./PanelDrawer"), exports);
+_exportStar(require("./PanelGroupDialog"), exports);
 _exportStar(require("./TimeRangeControls"), exports);
 _exportStar(require("./Variables"), exports);
 function _exportStar(from, to) {

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

@@ -31,9 +31,12 @@ const _middleware = require("zustand/middleware");
 const _immer = require("zustand/middleware/immer");
 const _shallow = /*#__PURE__*/ _interopRequireDefault(require("zustand/shallow"));
 const _react = require("react");
+const _panelGroupEditorSlice = require("./panel-group-editor-slice");
 const _panelGroupSlice = require("./panel-group-slice");
-const _layoutSlice = require("./layout-slice");
-const _panelEditingSlice = require("./panel-editing-slice");
+const _panelEditorSlice = require("./panel-editor-slice");
+const _panelSlice = require("./panel-slice");
+const _deletePanelGroupSlice = require("./delete-panel-group-slice");
+const _deletePanelSlice = require("./delete-panel-slice");
 function _interopRequireDefault(obj) {
     return obj && obj.__esModule ? obj : {
         default: obj
@@ -51,16 +54,31 @@ 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] = args;
+        const [set, get] = args;
         return {
-            ...(0, _panelGroupSlice.createPanelGroupSlice)(...args),
-            ...(0, _layoutSlice.createLayoutSlice)(layouts)(...args),
-            ...(0, _panelEditingSlice.createPanelEditorSlice)(panels)(...args),
-            defaultTimeRange: dashboardSpec.duration,
+            ...(0, _panelGroupSlice.createPanelGroupSlice)(layouts)(...args),
+            ...(0, _panelSlice.createPanelSlice)(panels)(...args),
+            ...(0, _panelGroupEditorSlice.createPanelGroupEditorSlice)(...args),
+            ...(0, _deletePanelGroupSlice.createDeletePanelGroupSlice)(...args),
+            ...(0, _panelEditorSlice.createPanelEditorSlice)()(...args),
+            ...(0, _deletePanelSlice.createDeletePanelSlice)()(...args),
+            defaultTimeRange: {
+                pastDuration: dashboardSpec.duration
+            },
             isEditMode: !!isEditMode,
             setEditMode: (isEditMode)=>set({
                     isEditMode
-                })
+                }),
+            reset: ()=>{
+                const { resetPanels , resetPanelGroups  } = get();
+                resetPanels();
+                resetPanelGroups();
+            },
+            save: ()=>{
+                const { savePanels , savePanelGroups  } = get();
+                savePanels();
+                savePanelGroups();
+            }
         };
     })));
     return /*#__PURE__*/ (0, _jsxRuntime.jsx)(DashboardContext.Provider, {

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

@@ -16,3 +16,13 @@
 Object.defineProperty(exports, "__esModule", {
     value: true
 });
+Object.defineProperty(exports, "generateId", {
+    enumerable: true,
+    get: ()=>generateId
+});
+function generateId() {
+    if (globalThis.dashboardStoreId === undefined) {
+        globalThis.dashboardStoreId = -1;
+    }
+    return globalThis.dashboardStoreId++;
+}

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

@@ -22,11 +22,20 @@ function _export(target, all) {
 }
 _export(exports, {
     useEditMode: ()=>useEditMode,
-    useLayouts: ()=>useLayouts,
-    usePanelGroupDialog: ()=>usePanelGroupDialog,
-    usePanels: ()=>usePanels,
+    useDashboardActions: ()=>useDashboardActions,
+    usePanelGroupIds: ()=>usePanelGroupIds,
+    useListPanelGroups: ()=>useListPanelGroups,
+    usePanelGroup: ()=>usePanelGroup,
+    usePanelGroupActions: ()=>usePanelGroupActions,
+    usePanelGroupEditor: ()=>usePanelGroupEditor,
+    useDeletePanelGroupDialog: ()=>useDeletePanelGroupDialog,
+    usePanel: ()=>usePanel,
+    usePanelActions: ()=>usePanelActions,
+    usePanelEditor: ()=>usePanelEditor,
+    useDeletePanelDialog: ()=>useDeletePanelDialog,
     useDefaultTimeRange: ()=>useDefaultTimeRange
 });
+const _react = require("react");
 const _dashboardProvider = require("./DashboardProvider");
 function useEditMode() {
     return (0, _dashboardProvider.useDashboardStore)(({ isEditMode , setEditMode  })=>({
@@ -34,37 +43,121 @@ function useEditMode() {
             setEditMode
         }));
 }
-function useLayouts() {
-    return (0, _dashboardProvider.useDashboardStore)(({ layouts , addPanelToGroup , movePanelToGroup , updatePanelGroup , swapPanelGroups , deletePanelGroup  })=>({
-            layouts,
-            addPanelToGroup,
-            movePanelToGroup,
-            updatePanelGroup,
-            swapPanelGroups,
-            deletePanelGroup
-        }));
+function useDashboardActions() {
+    const save = (0, _dashboardProvider.useDashboardStore)((store)=>store.save);
+    const reset = (0, _dashboardProvider.useDashboardStore)((store)=>store.reset);
+    const openAddPanelGroup = (0, _dashboardProvider.useDashboardStore)((store)=>store.openAddPanelGroup);
+    const openAddPanel = (0, _dashboardProvider.useDashboardStore)((store)=>store.openAddPanel);
+    return {
+        save,
+        reset,
+        openAddPanelGroup,
+        openAddPanel: ()=>openAddPanel(undefined)
+    };
+}
+function usePanelGroupIds() {
+    return (0, _dashboardProvider.useDashboardStore)((store)=>store.panelGroupOrder);
+}
+function useListPanelGroups() {
+    const panelGroupIds = usePanelGroupIds();
+    const panelGroups = (0, _dashboardProvider.useDashboardStore)((store)=>store.panelGroups);
+    return (0, _react.useMemo)(()=>{
+        return panelGroupIds.map((id)=>{
+            const group = panelGroups[id];
+            if (group === undefined) {
+                throw new Error(`Invalid panel group Id found ${id}`);
+            }
+            return group;
+        });
+    }, [
+        panelGroupIds,
+        panelGroups
+    ]);
+}
+function usePanelGroup(panelGroupId) {
+    const panelGroup = (0, _dashboardProvider.useDashboardStore)((store)=>store.panelGroups[panelGroupId]);
+    if (panelGroup === undefined) {
+        throw new Error(`Panel group with Id ${panelGroupId} was not found`);
+    }
+    return panelGroup;
+}
+function usePanelGroupActions(panelGroupId) {
+    const { moveUp , moveDown  } = useMovePanelGroup(panelGroupId);
+    const openEditPanelGroup = (0, _dashboardProvider.useDashboardStore)((store)=>store.openEditPanelGroup);
+    const deletePanelGroup = (0, _dashboardProvider.useDashboardStore)((store)=>store.openDeletePanelGroupDialog);
+    const openAddPanel = (0, _dashboardProvider.useDashboardStore)((store)=>store.openAddPanel);
+    const updatePanelGroupLayouts = (0, _dashboardProvider.useDashboardStore)((store)=>store.updatePanelGroupLayouts);
+    return {
+        openEditPanelGroup: ()=>openEditPanelGroup(panelGroupId),
+        deletePanelGroup: ()=>deletePanelGroup(panelGroupId),
+        openAddPanel: ()=>openAddPanel(panelGroupId),
+        moveUp,
+        moveDown,
+        updatePanelGroupLayouts: (itemLayouts)=>updatePanelGroupLayouts(panelGroupId, itemLayouts)
+    };
+}
+/**
+ * Returns functions for moving a panel group up or down. A function will be undefined if the panel group can't be
+ * moved in that direction.
+ */ function useMovePanelGroup(panelGroupId) {
+    const currentIndex = (0, _dashboardProvider.useDashboardStore)((store)=>store.panelGroupOrder.findIndex((id)=>id === panelGroupId));
+    const panelGroupsLength = (0, _dashboardProvider.useDashboardStore)((store)=>store.panelGroupOrder.length);
+    const swapPanelGroups = (0, _dashboardProvider.useDashboardStore)((store)=>store.swapPanelGroups);
+    if (currentIndex < 0) {
+        throw new Error(`Could not find panel group with Id ${panelGroupId} in order array`);
+    }
+    const moveUp = ()=>swapPanelGroups(currentIndex, currentIndex - 1);
+    const moveDown = ()=>swapPanelGroups(currentIndex, currentIndex + 1);
+    return {
+        moveUp: currentIndex > 0 ? moveUp : undefined,
+        moveDown: currentIndex < panelGroupsLength - 1 ? moveDown : undefined
+    };
 }
-function usePanelGroupDialog() {
-    return (0, _dashboardProvider.useDashboardStore)(({ panelGroupDialog , openPanelGroupDialog , closePanelGroupDialog , deletePanelGroupDialog , openDeletePanelGroupDialog , closeDeletePanelGroupDialog ,  })=>({
-            panelGroupDialog,
-            openPanelGroupDialog,
-            closePanelGroupDialog,
+function usePanelGroupEditor() {
+    return (0, _dashboardProvider.useDashboardStore)((store)=>store.panelGroupEditor);
+}
+function useDeletePanelGroupDialog() {
+    return (0, _dashboardProvider.useDashboardStore)(({ deletePanelGroupDialog , openDeletePanelGroupDialog , closeDeletePanelGroupDialog , deletePanelGroup  })=>({
             deletePanelGroupDialog,
             openDeletePanelGroupDialog,
-            closeDeletePanelGroupDialog
+            closeDeletePanelGroupDialog,
+            deletePanelGroup
         }));
 }
-function usePanels() {
-    return (0, _dashboardProvider.useDashboardStore)(({ panels , panelEditor , addPanel , editPanel , deletePanelDialog , deletePanels , openDeletePanelDialog , closeDeletePanelDialog ,  })=>({
-            panels,
-            panelEditor,
-            addPanel,
-            editPanel,
-            deletePanels,
-            deletePanelDialog,
-            openDeletePanelDialog,
-            closeDeletePanelDialog
-        }));
+function usePanel(panelGroupItemId) {
+    const { panelGroupId , panelGroupItemLayoutId: panelGroupLayoutId  } = panelGroupItemId;
+    const panel = (0, _dashboardProvider.useDashboardStore)((store)=>{
+        var ref;
+        const panelKey = (ref = store.panelGroups[panelGroupId]) === null || ref === void 0 ? void 0 : ref.itemPanelKeys[panelGroupLayoutId];
+        if (panelKey === undefined) return;
+        return store.panels[panelKey];
+    });
+    if (panel === undefined) {
+        throw new Error(`Could not find panel for Id ${panelGroupItemId}`);
+    }
+    return panel;
+}
+function usePanelActions(panelGroupItemId) {
+    const openEditPanel = (0, _dashboardProvider.useDashboardStore)((store)=>store.openEditPanel);
+    const openDeletePanelDialog = (0, _dashboardProvider.useDashboardStore)((store)=>store.openDeletePanelDialog);
+    return {
+        openEditPanel: ()=>openEditPanel(panelGroupItemId),
+        openDeletePanelDialog: ()=>openDeletePanelDialog(panelGroupItemId)
+    };
+}
+function usePanelEditor() {
+    return (0, _dashboardProvider.useDashboardStore)((store)=>store.panelEditor);
+}
+function useDeletePanelDialog() {
+    const deletePanelDialog = (0, _dashboardProvider.useDashboardStore)((store)=>store.deletePanelDialog);
+    // TODO: Refactor similar to other dialogs/editors so these are on the editor state itself
+    const deletePanel = (0, _dashboardProvider.useDashboardStore)((store)=>store.deletePanel);
+    const closeDeletePanelDialog = (0, _dashboardProvider.useDashboardStore)((store)=>store.closeDeletePanelDialog);
+    return {
+        deletePanelDialog,
+        deletePanel,
+        closeDeletePanelDialog
+    };
 }
 function useDefaultTimeRange() {
     return (0, _dashboardProvider.useDashboardStore)((state)=>state.defaultTimeRange);

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

@@ -0,0 +1,70 @@
+// 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, "createDeletePanelGroupSlice", {
+    enumerable: true,
+    get: ()=>createDeletePanelGroupSlice
+});
+const createDeletePanelGroupSlice = (set, get)=>({
+        deletePanelGroup (panelGroupId) {
+            const { panelGroups , panelGroupOrder  } = get();
+            const group = panelGroups[panelGroupId];
+            const idIndex = panelGroupOrder.findIndex((id)=>id === panelGroupId);
+            if (group === undefined || idIndex === -1) {
+                throw new Error(`Panel group ${panelGroupId} not found`);
+            }
+            // Get the panel keys for all the panel items in the group we're going to delete
+            const panelKeys = Object.values(group.itemPanelKeys);
+            set((draft)=>{
+                // Delete the panel group which also deletes all its items
+                delete draft.panelGroups[panelGroupId];
+                draft.panelGroupOrder.splice(idIndex, 1);
+                // Get all remaining panel keys in use
+                const usedPanelKeys = getUsedPanelKeys(draft.panelGroups);
+                // For the panel keys of the items that were just deleted, see if they're still used and if not, also delete the
+                // panel definition
+                for (const panelKey of panelKeys){
+                    if (usedPanelKeys.has(panelKey)) continue;
+                    delete draft.panels[panelKey];
+                }
+            });
+        },
+        openDeletePanelGroupDialog: (panelGroupId)=>{
+            const panelGroup = get().panelGroups[panelGroupId];
+            if (panelGroup === undefined) {
+                throw new Error(`Panel group with Id ${panelGroupId} not found`);
+            }
+            set((state)=>{
+                state.deletePanelGroupDialog = {
+                    panelGroupId,
+                    panelGroupName: panelGroup.title
+                };
+            });
+        },
+        closeDeletePanelGroupDialog: ()=>set((state)=>{
+                state.deletePanelGroupDialog = undefined;
+            })
+    });
+// Helper to get the panel keys of all groups, returning a set to eliminate duplicates
+function getUsedPanelKeys(panelGroups) {
+    const usedPanelKeys = new Set();
+    for (const group of Object.values(panelGroups)){
+        for (const panelKey of Object.values(group.itemPanelKeys)){
+            usedPanelKeys.add(panelKey);
+        }
+    }
+    return usedPanelKeys;
+}

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

@@ -0,0 +1,85 @@
+// 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, "createDeletePanelSlice", {
+    enumerable: true,
+    get: ()=>createDeletePanelSlice
+});
+function createDeletePanelSlice() {
+    // Return the state creator function for Zustand that uses the panels provided as intitial state
+    return (set, get)=>({
+            deletePanel (panelGroupItemId) {
+                set((draft)=>{
+                    const { panelGroupId , panelGroupItemLayoutId: panelGroupLayoutId  } = panelGroupItemId;
+                    const existingGroup = draft.panelGroups[panelGroupId];
+                    if (existingGroup === undefined) {
+                        throw new Error(`Missing panel group ${panelGroupId}`);
+                    }
+                    const existingLayoutIdx = existingGroup.itemLayouts.findIndex((layout)=>layout.i === panelGroupLayoutId);
+                    const existingPanelKey = existingGroup.itemPanelKeys[panelGroupLayoutId];
+                    if (existingLayoutIdx === -1 || existingPanelKey === undefined) {
+                        throw new Error(`Missing panel group item ${panelGroupLayoutId}`);
+                    }
+                    // remove panel from panel group
+                    existingGroup.itemLayouts.splice(existingLayoutIdx, 1);
+                    delete existingGroup.itemPanelKeys[panelGroupLayoutId];
+                    // See if panel key is still used and if not, delete it
+                    if (isPanelKeyStillUsed(draft.panelGroups, existingPanelKey) === false) {
+                        delete draft.panels[existingPanelKey];
+                    }
+                });
+            },
+            openDeletePanelDialog (panelGroupItemId) {
+                const { panelGroupId , panelGroupItemLayoutId: panelGroupLayoutId  } = panelGroupItemId;
+                const { panels , panelGroups  } = get();
+                const panelGroup = panelGroups[panelGroupId];
+                if (panelGroup === undefined) {
+                    throw new Error(`Panel group not found ${panelGroupId}`);
+                }
+                const panelKey = panelGroup.itemPanelKeys[panelGroupLayoutId];
+                if (panelKey === undefined) {
+                    throw new Error(`Could not find Panel Group item ${panelGroupLayoutId}`);
+                }
+                const panel = panels[panelKey];
+                if (panel === undefined) {
+                    throw new Error(`Could not find panel ${panelKey}`);
+                }
+                set((state)=>{
+                    var _title;
+                    state.deletePanelDialog = {
+                        panelGroupItemId: panelGroupItemId,
+                        panelName: panel.spec.display.name,
+                        panelGroupName: (_title = panelGroup.title) !== null && _title !== void 0 ? _title : ''
+                    };
+                });
+            },
+            closeDeletePanelDialog () {
+                set((state)=>{
+                    state.deletePanelDialog = undefined;
+                });
+            }
+        });
+}
+// Helper function to determine if a panel key is still being used somewhere in Panel Groups
+function isPanelKeyStillUsed(panelGroups, panelKey) {
+    for (const group of Object.values(panelGroups)){
+        const found = Object.values(group.itemPanelKeys).find((key)=>key === panelKey);
+        if (found !== undefined) {
+            return true;
+        }
+    }
+    return false;
+}