@perses-dev/dashboards 0.11.0 → 0.12.0

package/dist/cjs/components/DashboardToolbar.js

@@ -19,6 +19,7 @@ Object.defineProperty(exports, "DashboardToolbar", {
     get: ()=>DashboardToolbar
 });
 const _jsxRuntime = require("react/jsx-runtime");
+const _react = require("react");
 const _material = require("@mui/material");
 const _pencilOutline = /*#__PURE__*/ _interopRequireDefault(require("mdi-material-ui/PencilOutline"));
 const _plusBoxOutline = /*#__PURE__*/ _interopRequireDefault(require("mdi-material-ui/PlusBoxOutline"));
@@ -34,13 +35,19 @@ function _interopRequireDefault(obj) {
 const DashboardToolbar = (props)=>{
     const { dashboardName  } = props;
     const { isEditMode , setEditMode  } = (0, _context.useEditMode)();
-    const { openAddPanelGroup , openAddPanel , reset , save  } = (0, _context.useDashboardActions)();
+    const { openAddPanelGroup , openAddPanel , save  } = (0, _context.useDashboardActions)();
     const isLaptopSize = (0, _material.useMediaQuery)((0, _material.useTheme)().breakpoints.up('sm'));
+    const [originalSpec, setOriginalSpec] = (0, _react.useState)(undefined);
+    const { spec , resetSpec  } = (0, _context.useDashboardSpec)();
     const onEditButtonClick = ()=>{
+        setOriginalSpec(spec);
         setEditMode(true);
     };
     const onCancelButtonClick = ()=>{
-        reset();
+        // Reset to the original spec and exit edit mode
+        if (originalSpec) {
+            resetSpec(originalSpec);
+        }
         setEditMode(false);
     };
     const onSave = ()=>{

package/dist/cjs/components/GridLayout/GridLayout.js

@@ -30,7 +30,9 @@ const _gridItemContent = require("./GridItemContent");
 const ResponsiveGridLayout = (0, _reactGridLayout.WidthProvider)(_reactGridLayout.Responsive);
 function GridLayout(props) {
     const { panelGroupId , ...others } = props;
+    const theme = (0, _material.useTheme)();
     const groupDefinition = (0, _context.usePanelGroup)(panelGroupId);
+    const { updatePanelGroupLayouts  } = (0, _context.usePanelGroupActions)(panelGroupId);
     var ref;
     const [isOpen, setIsOpen] = (0, _react.useState)((ref = !groupDefinition.isCollapsed) !== null && ref !== void 0 ? ref : true);
     const { isEditMode  } = (0, _context.useEditMode)();
@@ -62,17 +64,11 @@ function GridLayout(props) {
                         children: /*#__PURE__*/ (0, _jsxRuntime.jsx)(ResponsiveGridLayout, {
                             className: "layout",
                             breakpoints: {
-                                lg: 1200,
-                                md: 996,
-                                sm: 768,
-                                xs: 480,
+                                sm: theme.breakpoints.values.sm,
                                 xxs: 0
                             },
                             cols: {
-                                lg: 24,
-                                md: 24,
                                 sm: 24,
-                                xs: 24,
                                 xxs: 2
                             },
                             rowHeight: 30,
@@ -82,23 +78,25 @@ function GridLayout(props) {
                             ],
                             isDraggable: isEditMode,
                             isResizable: isEditMode,
-                            children: groupDefinition.items.map(({ x , y , width , height  }, itemIndex)=>/*#__PURE__*/ (0, _jsxRuntime.jsx)("div", {
-                                    "data-grid": {
-                                        x,
-                                        y,
-                                        w: width,
-                                        h: height
-                                    },
+                            containerPadding: [
+                                0,
+                                10
+                            ],
+                            layouts: {
+                                sm: groupDefinition.itemLayouts
+                            },
+                            onLayoutChange: updatePanelGroupLayouts,
+                            children: groupDefinition.itemLayouts.map(({ i  })=>/*#__PURE__*/ (0, _jsxRuntime.jsx)("div", {
                                     children: /*#__PURE__*/ (0, _jsxRuntime.jsx)(_components.ErrorBoundary, {
                                         FallbackComponent: _components.ErrorAlert,
                                         children: /*#__PURE__*/ (0, _jsxRuntime.jsx)(_gridItemContent.GridItemContent, {
                                             panelGroupItemId: {
                                                 panelGroupId,
-                                                itemIndex
+                                                panelGroupItemLayoutId: i
                                             }
                                         })
                                     })
-                                }, itemIndex))
+                                }, i))
                         })
                     })
                 ]

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

@@ -52,13 +52,11 @@ const DeletePanelDialog = ()=>{
     });
 };
 const DeletePanelForm = ({ deletePanelDialog  })=>{
-    const { deletePanels , closeDeletePanelDialog  } = (0, _context.useDeletePanelDialog)();
+    const { deletePanel , closeDeletePanelDialog  } = (0, _context.useDeletePanelDialog)();
     const handleDelete = (e)=>{
         e.preventDefault();
         const { panelGroupItemId  } = deletePanelDialog;
-        deletePanels([
-            panelGroupItemId
-        ]);
+        deletePanel(panelGroupItemId);
         closeDeletePanelDialog();
     };
     return /*#__PURE__*/ (0, _jsxRuntime.jsxs)("form", {

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

@@ -25,7 +25,7 @@ const _reactIntersectionObserver = require("react-intersection-observer");
 const _components = require("@perses-dev/components");
 const _material = require("@mui/material");
 const _informationOutline = /*#__PURE__*/ _interopRequireDefault(require("mdi-material-ui/InformationOutline"));
-const _pencil = /*#__PURE__*/ _interopRequireDefault(require("mdi-material-ui/Pencil"));
+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"));
 const _context = require("../../context");
@@ -80,13 +80,11 @@ function Panel(props) {
                     sx: {
                         display: 'flex',
                         alignItems: 'center',
-                        minHeight: '24px'
+                        minHeight: '32px'
                     },
                     children: [
                         /*#__PURE__*/ (0, _jsxRuntime.jsx)(_material.Typography, {
-                            component: "h2",
-                            variant: "body2",
-                            fontWeight: (theme)=>theme.typography.fontWeightMedium,
+                            variant: "subtitle1",
                             whiteSpace: "nowrap",
                             overflow: "hidden",
                             textOverflow: "ellipsis",
@@ -106,9 +104,9 @@ function Panel(props) {
                                     children: /*#__PURE__*/ (0, _jsxRuntime.jsx)(_informationOutline.default, {
                                         "aria-describedby": "info-tooltip",
                                         "aria-hidden": false,
-                                        fontSize: "small",
                                         sx: {
-                                            cursor: 'pointer'
+                                            cursor: 'pointer',
+                                            color: (theme)=>theme.palette.grey[700]
                                         }
                                     })
                                 }),
@@ -121,7 +119,7 @@ function Panel(props) {
                                             "aria-label": "edit panel",
                                             size: "small",
                                             onClick: openEditPanel,
-                                            children: /*#__PURE__*/ (0, _jsxRuntime.jsx)(_pencil.default, {})
+                                            children: /*#__PURE__*/ (0, _jsxRuntime.jsx)(_pencilOutline.default, {})
                                         }),
                                         /*#__PURE__*/ (0, _jsxRuntime.jsx)(IconButton, {
                                             "aria-label": "delete panel",
@@ -147,7 +145,8 @@ function Panel(props) {
                 }),
                 sx: {
                     display: 'block',
-                    padding: (theme)=>theme.spacing(1, panelPadding),
+                    paddingX: (theme)=>theme.spacing(panelPadding),
+                    paddingY: '4px',
                     borderBottom: (theme)=>`solid 1px ${theme.palette.divider}`
                 }
             }),

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

@@ -43,9 +43,10 @@ describe('Panel', ()=>{
                     }
                 }
             },
+            // TODO: This is coupled to ID generation which is not good and the tests will probably fail
             panelGroupItemId: {
                 panelGroupId: 0,
-                itemIndex: 0
+                panelGroupItemLayoutId: ''
             }
         };
     };

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

@@ -15,6 +15,7 @@ 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.test.js

@@ -53,8 +53,8 @@ describe('Panel Drawer', ()=>{
     };
     it('should add new panel', async ()=>{
         const storeApi = renderPanelDrawer();
-        // Open the drawer for a new panel (i.e. no panel key)
-        (0, _testUtils.act)(()=>storeApi.getState().openAddPanel(0));
+        // Open the drawer for a new panel
+        (0, _testUtils.act)(()=>storeApi.getState().openAddPanel());
         const nameInput = await _react.screen.findByLabelText(/Name/);
         _userEvent.default.type(nameInput, 'New Panel');
         _userEvent.default.click(_react.screen.getByText('Add'));
@@ -79,9 +79,17 @@ describe('Panel Drawer', ()=>{
     it('should edit an existing panel', async ()=>{
         const storeApi = renderPanelDrawer();
         // Open the drawer for an existing panel
+        const group = Object.values(storeApi.getState().panelGroups).find((group)=>group.title === 'CPU Stats');
+        if (group === undefined) {
+            throw new Error('Test group not found');
+        }
+        const layout = Object.entries(group.itemPanelKeys).find(([, panelKey])=>panelKey === 'cpu');
+        if (layout === undefined) {
+            throw new Error('Test panel not found');
+        }
         (0, _testUtils.act)(()=>storeApi.getState().openEditPanel({
-                panelGroupId: 0,
-                itemIndex: 0
+                panelGroupId: group.id,
+                panelGroupItemLayoutId: layout[0]
             }));
         const nameInput = await _react.screen.findByLabelText(/Name/);
         _userEvent.default.clear(nameInput);

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

@@ -36,10 +36,10 @@ function PanelPreview({ name , description , kind , spec , groupId  }) {
                 }
             }
         },
-        // TODO: what should itemIndex be?
+        // TODO: this shouldn't be necessary for preview
         panelGroupItemId: {
             panelGroupId: groupId,
-            itemIndex: 0
+            panelGroupItemLayoutId: ''
         }
     };
     if (!kind) {

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

@@ -20,7 +20,6 @@ const _userEvent = /*#__PURE__*/ _interopRequireDefault(require("@testing-librar
 const _testUtils = require("react-dom/test-utils");
 const _context = require("../../context");
 const _test = require("../../test");
-const _testDashboard = /*#__PURE__*/ _interopRequireDefault(require("../../test/testDashboard"));
 const _panelGroupDialog = require("./PanelGroupDialog");
 function _interopRequireDefault(obj) {
     return obj && obj.__esModule ? obj : {
@@ -54,21 +53,23 @@ describe('Add Panel Group', ()=>{
         _userEvent.default.type(nameInput, 'New Panel Group');
         _userEvent.default.click(_react.screen.getByText('Add'));
         // TODO: Figure out how to test this without coupling to the store state
-        const panelGroups = storeApi.getState().panelGroups;
-        expect(panelGroups).toMatchObject({
-            '3': {
-                id: 3,
-                title: 'New Panel Group',
-                isCollapsed: false,
-                items: []
-            }
+        const panelGroups = Object.values(storeApi.getState().panelGroups);
+        expect(panelGroups).toContainEqual({
+            id: expect.any(Number),
+            title: 'New Panel Group',
+            isCollapsed: false,
+            itemLayouts: expect.any(Array),
+            itemPanelKeys: expect.any(Object)
         });
     });
     it('should edit existing panel group', async ()=>{
-        var ref;
         const storeApi = renderDialog();
         // Open the dialog for an existing panel group
-        (0, _testUtils.act)(()=>storeApi.getState().openEditPanelGroup(0));
+        const group = Object.values(storeApi.getState().panelGroups).find((group)=>group.title === 'CPU Stats');
+        if (group === undefined) {
+            throw new Error('Missing test group');
+        }
+        (0, _testUtils.act)(()=>storeApi.getState().openEditPanelGroup(group.id));
         const nameInput = await _react.screen.findByLabelText(/Name/);
         _userEvent.default.clear(nameInput);
         _userEvent.default.type(nameInput, 'New Name');
@@ -76,11 +77,10 @@ describe('Add Panel Group', ()=>{
         // TODO: Figure out how to test this without coupling to the store state
         const panelGroups = storeApi.getState().panelGroups;
         expect(panelGroups).toMatchObject({
-            '0': {
-                id: 0,
+            [group.id]: {
+                id: group.id,
                 title: 'New Name',
-                isCollapsed: false,
-                items: (ref = _testDashboard.default.spec.layouts[0]) === null || ref === void 0 ? void 0 : ref.spec.items
+                isCollapsed: false
             }
         });
     });

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

@@ -117,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"
                             })
                         ]
                     }),

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/context/DashboardProvider/DashboardProvider.js

@@ -34,6 +34,9 @@ const _react = require("react");
 const _panelGroupEditorSlice = require("./panel-group-editor-slice");
 const _panelGroupSlice = require("./panel-group-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
@@ -53,9 +56,12 @@ function DashboardProvider(props) {
     const dashboardStore = (0, _zustand.createStore)()((0, _immer.immer)((0, _middleware.devtools)((...args)=>{
         const [set, get] = args;
         return {
-            ...(0, _panelGroupEditorSlice.createPanelGroupEditorSlice)(...args),
             ...(0, _panelGroupSlice.createPanelGroupSlice)(layouts)(...args),
-            ...(0, _panelEditorSlice.createPanelEditorSlice)(panels)(...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
             },

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

@@ -35,7 +35,6 @@ _export(exports, {
     useDeletePanelDialog: ()=>useDeletePanelDialog,
     useDefaultTimeRange: ()=>useDefaultTimeRange
 });
-const _core = require("@perses-dev/core");
 const _react = require("react");
 const _dashboardProvider = require("./DashboardProvider");
 function useEditMode() {
@@ -57,7 +56,7 @@ function useDashboardActions() {
     };
 }
 function usePanelGroupIds() {
-    return (0, _dashboardProvider.useDashboardStore)((store)=>store.panelGroupIdOrder);
+    return (0, _dashboardProvider.useDashboardStore)((store)=>store.panelGroupOrder);
 }
 function useListPanelGroups() {
     const panelGroupIds = usePanelGroupIds();
@@ -87,20 +86,22 @@ function usePanelGroupActions(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
+        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.panelGroupIdOrder.findIndex((id)=>id === panelGroupId));
-    const panelGroupsLength = (0, _dashboardProvider.useDashboardStore)((store)=>store.panelGroupIdOrder.length);
+    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`);
@@ -124,12 +125,11 @@ function useDeletePanelGroupDialog() {
         }));
 }
 function usePanel(panelGroupItemId) {
-    const { panelGroupId , itemIndex  } = panelGroupItemId;
+    const { panelGroupId , panelGroupItemLayoutId: panelGroupLayoutId  } = panelGroupItemId;
     const panel = (0, _dashboardProvider.useDashboardStore)((store)=>{
-        var ref, ref1;
-        const panelRef = (ref1 = (ref = store.panelGroups[panelGroupId]) === null || ref === void 0 ? void 0 : ref.items[itemIndex]) === null || ref1 === void 0 ? void 0 : ref1.content;
-        if (panelRef === undefined) return;
-        const panelKey = (0, _core.getPanelKeyFromRef)(panelRef);
+        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) {
@@ -151,11 +151,11 @@ function usePanelEditor() {
 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 deletePanels = (0, _dashboardProvider.useDashboardStore)((store)=>store.deletePanels);
+    const deletePanel = (0, _dashboardProvider.useDashboardStore)((store)=>store.deletePanel);
     const closeDeletePanelDialog = (0, _dashboardProvider.useDashboardStore)((store)=>store.closeDeletePanelDialog);
     return {
         deletePanelDialog,
-        deletePanels,
+        deletePanel,
         closeDeletePanelDialog
     };
 }

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;
+}