@perses-dev/dashboards 0.14.0 → 0.16.0

package/dist/cjs/components/DashboardToolbar/DashboardToolbar.js

@@ -27,13 +27,14 @@ const _components = require("@perses-dev/components");
 const _context = require("../../context");
 const _variables = require("../Variables");
 const _timeRangeControls = require("../TimeRangeControls");
+const _downloadButton = require("../DownloadButton");
 function _interopRequireDefault(obj) {
     return obj && obj.__esModule ? obj : {
         default: obj
     };
 }
 const DashboardToolbar = (props)=>{
-    const { dashboardName , dashboardTitleComponent , onEditButtonClick , onCancelButtonClick  } = props;
+    const { dashboardName , dashboardTitleComponent , initialVariableIsSticky , onEditButtonClick , onCancelButtonClick  } = props;
     const { isEditMode , setEditMode  } = (0, _context.useEditMode)();
     const { openAddPanelGroup , openAddPanel  } = (0, _context.useDashboardActions)();
     const isLaptopSize = (0, _material.useMediaQuery)((0, _material.useTheme)().breakpoints.up('sm'));
@@ -89,7 +90,9 @@ const DashboardToolbar = (props)=>{
                     children: [
                         /*#__PURE__*/ (0, _jsxRuntime.jsx)(_components.ErrorBoundary, {
                             FallbackComponent: _components.ErrorAlert,
-                            children: /*#__PURE__*/ (0, _jsxRuntime.jsx)(_variables.TemplateVariableList, {})
+                            children: /*#__PURE__*/ (0, _jsxRuntime.jsx)(_variables.TemplateVariableList, {
+                                initialVariableIsSticky: initialVariableIsSticky
+                            })
                         }),
                         /*#__PURE__*/ (0, _jsxRuntime.jsxs)(_material.Stack, {
                             direction: 'row',
@@ -133,6 +136,7 @@ const DashboardToolbar = (props)=>{
                             },
                             children: [
                                 /*#__PURE__*/ (0, _jsxRuntime.jsx)(_timeRangeControls.TimeRangeControls, {}),
+                                /*#__PURE__*/ (0, _jsxRuntime.jsx)(_downloadButton.DownloadButton, {}),
                                 isLaptopSize && /*#__PURE__*/ (0, _jsxRuntime.jsx)(_material.Button, {
                                     variant: "outlined",
                                     startIcon: /*#__PURE__*/ (0, _jsxRuntime.jsx)(_pencilOutline.default, {}),
@@ -150,7 +154,9 @@ const DashboardToolbar = (props)=>{
                     paddingY: 2,
                     children: /*#__PURE__*/ (0, _jsxRuntime.jsx)(_components.ErrorBoundary, {
                         FallbackComponent: _components.ErrorAlert,
-                        children: /*#__PURE__*/ (0, _jsxRuntime.jsx)(_variables.TemplateVariableList, {})
+                        children: /*#__PURE__*/ (0, _jsxRuntime.jsx)(_variables.TemplateVariableList, {
+                            initialVariableIsSticky: initialVariableIsSticky
+                        })
                     })
                 })
             ]

package/dist/cjs/components/DownloadButton/DownloadButton.js

@@ -0,0 +1,109 @@
+// 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, "DownloadButton", {
+    enumerable: true,
+    get: ()=>DownloadButton
+});
+const _jsxRuntime = require("react/jsx-runtime");
+const _react = /*#__PURE__*/ _interopRequireWildcard(require("react"));
+const _downloadOutline = /*#__PURE__*/ _interopRequireDefault(require("mdi-material-ui/DownloadOutline"));
+const _material = require("@mui/material");
+const _context = require("../../context");
+function _interopRequireDefault(obj) {
+    return obj && obj.__esModule ? obj : {
+        default: obj
+    };
+}
+function _getRequireWildcardCache(nodeInterop) {
+    if (typeof WeakMap !== "function") return null;
+    var cacheBabelInterop = new WeakMap();
+    var cacheNodeInterop = new WeakMap();
+    return (_getRequireWildcardCache = function(nodeInterop) {
+        return nodeInterop ? cacheNodeInterop : cacheBabelInterop;
+    })(nodeInterop);
+}
+function _interopRequireWildcard(obj, nodeInterop) {
+    if (!nodeInterop && obj && obj.__esModule) {
+        return obj;
+    }
+    if (obj === null || typeof obj !== "object" && typeof obj !== "function") {
+        return {
+            default: obj
+        };
+    }
+    var cache = _getRequireWildcardCache(nodeInterop);
+    if (cache && cache.has(obj)) {
+        return cache.get(obj);
+    }
+    var newObj = {};
+    var hasPropertyDescriptor = Object.defineProperty && Object.getOwnPropertyDescriptor;
+    for(var key in obj){
+        if (key !== "default" && Object.prototype.hasOwnProperty.call(obj, key)) {
+            var desc = hasPropertyDescriptor ? Object.getOwnPropertyDescriptor(obj, key) : null;
+            if (desc && (desc.get || desc.set)) {
+                Object.defineProperty(newObj, key, desc);
+            } else {
+                newObj[key] = obj[key];
+            }
+        }
+    }
+    newObj.default = obj;
+    if (cache) {
+        cache.set(obj, newObj);
+    }
+    return newObj;
+}
+function DownloadButton() {
+    const { dashboard  } = (0, _context.useDashboard)();
+    const hiddenLinkRef = (0, _react.useRef)(null);
+    const onDownloadButtonClick = ()=>{
+        if (!hiddenLinkRef || !hiddenLinkRef.current) return;
+        // Create blob URL
+        const hiddenLinkUrl = URL.createObjectURL(new Blob([
+            JSON.stringify(dashboard)
+        ], {
+            type: 'application/json'
+        }));
+        // Simulate click
+        hiddenLinkRef.current.href = hiddenLinkUrl;
+        hiddenLinkRef.current.click();
+        // Remove blob URL (for memory management)
+        URL.revokeObjectURL(hiddenLinkUrl);
+    };
+    return /*#__PURE__*/ (0, _jsxRuntime.jsxs)(_jsxRuntime.Fragment, {
+        children: [
+            /*#__PURE__*/ (0, _jsxRuntime.jsx)(DownloadIconButton, {
+                title: "Download JSON",
+                onClick: onDownloadButtonClick,
+                children: /*#__PURE__*/ (0, _jsxRuntime.jsx)(_downloadOutline.default, {})
+            }),
+            /*#__PURE__*/ (0, _jsxRuntime.jsx)("a", {
+                ref: hiddenLinkRef,
+                style: {
+                    display: 'none'
+                },
+                download: `${dashboard.metadata.name}.json`
+            })
+        ]
+    });
+}
+const DownloadIconButton = (0, _material.styled)(_material.IconButton)(({ theme  })=>({
+        border: `1px solid ${theme.palette.grey[300]}`,
+        borderRadius: theme.shape.borderRadius,
+        padding: '4px',
+        color: theme.palette.grey[900]
+    }));

package/dist/cjs/{utils → components/DownloadButton}/index.js

@@ -14,7 +14,7 @@
 Object.defineProperty(exports, "__esModule", {
     value: true
 });
-_exportStar(require("./time-range-params"), exports);
+_exportStar(require("./DownloadButton"), 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/{css/styles.js → components/GridLayout/GridContainer.js}

@@ -14,40 +14,68 @@
 Object.defineProperty(exports, "__esModule", {
     value: true
 });
-Object.defineProperty(exports, "styles", {
+Object.defineProperty(exports, "GridContainer", {
     enumerable: true,
-    get: ()=>styles
+    get: ()=>GridContainer
 });
-const styles = (theme)=>{
-    return {
-        '&.react-grid-layout': {
+const _jsxRuntime = require("react/jsx-runtime");
+const _react = require("react");
+const _material = require("@mui/material");
+function GridContainer(props) {
+    const [isFirstRender, setIsFirstRender] = (0, _react.useState)(true);
+    (0, _react.useEffect)(()=>{
+        if (isFirstRender) {
+            setIsFirstRender(false);
+        }
+    }, [
+        isFirstRender
+    ]);
+    return /*#__PURE__*/ (0, _jsxRuntime.jsx)(ReactGridLayoutContainer, {
+        sx: {
+            // This adds spcing between grids (rows) in the overall dashboard
+            '& + &': {
+                marginTop: (theme)=>theme.spacing(1)
+            },
+            // This disables the animation of grid items when a grid is first rendered
+            // (see https://github.com/react-grid-layout/react-grid-layout/issues/103)
+            '& .react-grid-item.cssTransforms': {
+                transitionProperty: isFirstRender ? 'none' : 'transform'
+            }
+        },
+        children: props.children
+    });
+}
+/**
+ * These are the classes needed by react-grid-layout from their CSS stylesheet.
+ */ const ReactGridLayoutContainer = (0, _material.styled)('section')(({ theme  })=>({
+        '& .react-grid-layout': {
             position: 'relative',
             transition: 'height 200ms ease'
         },
-        '&.react-grid-item': {
+        '& .react-grid-item': {
             transition: 'all 200ms ease',
             transitionProperty: 'left, top'
         },
-        '&.react-grid-item img': {
+        '& .react-grid-item img': {
             pointerEvents: 'none',
             userSelect: 'none'
         },
-        '&.react-grid-item.cssTransforms': {
+        '& .react-grid-item.cssTransforms': {
             transitionProperty: 'transform'
         },
-        '&.react-grid-item.resizing': {
+        '& .react-grid-item.resizing': {
             zIndex: 1,
             willChange: 'width, height'
         },
-        '&.react-grid-item.react-draggable-dragging': {
+        '& .react-grid-item.react-draggable-dragging': {
             transition: 'none',
             zIndex: 3,
             willChange: 'transform'
         },
-        '&.react-grid-item.dropping': {
+        '& .react-grid-item.dropping': {
             visibility: 'hidden'
         },
-        '&.react-grid-item.react-grid-placeholder': {
+        '& .react-grid-item.react-grid-placeholder': {
             background: theme.palette.primary.main,
             opacity: 0.2,
             transitionDuration: '100ms',
@@ -58,12 +86,12 @@ const styles = (theme)=>{
             msUserSelect: 'none',
             OUserSelect: 'none'
         },
-        '&.react-grid-item > .react-resizable-handle': {
+        '& .react-grid-item > .react-resizable-handle': {
             position: 'absolute',
             width: '20px',
             height: '20px'
         },
-        '&.react-grid-item > .react-resizable-handle::after': {
+        '& .react-grid-item > .react-resizable-handle::after': {
             content: '""',
             position: 'absolute',
             right: '3px',
@@ -73,62 +101,62 @@ const styles = (theme)=>{
             borderRight: '2px solid rgba(0, 0, 0, 0.4)',
             borderBottom: '2px solid rgba(0, 0, 0, 0.4)'
         },
-        '&.react-resizable-hide > .react-resizable-handle': {
+        '& .react-resizable-hide > .react-resizable-handle': {
             display: 'none'
         },
-        '&.react-grid-item > .react-resizable-handle.react-resizable-handle-sw': {
+        '& .react-grid-item > .react-resizable-handle.react-resizable-handle-sw': {
             bottom: '0',
             left: '0',
             cursor: 'sw-resize',
             transform: 'rotate(90deg)'
         },
-        '&.react-grid-item > .react-resizable-handle.react-resizable-handle-se': {
+        '& .react-grid-item > .react-resizable-handle.react-resizable-handle-se': {
             bottom: '0',
             right: '0',
             cursor: 'se-resize'
         },
-        '&.react-grid-item > .react-resizable-handle.react-resizable-handle-nw': {
+        '& .react-grid-item > .react-resizable-handle.react-resizable-handle-nw': {
             top: '0',
             left: '0',
             cursor: 'nw-resize',
             transform: 'rotate(180deg)'
         },
-        '&.react-grid-item > .react-resizable-handle.react-resizable-handle-ne': {
+        '& .react-grid-item > .react-resizable-handle.react-resizable-handle-ne': {
             top: '0',
             right: '0',
             cursor: 'ne-resize',
             transform: 'rotate(270deg)'
         },
-        '&.react-grid-item > .react-resizable-handle.react-resizable-handle-w, &.react-grid-item > .react-resizable-handle.react-resizable-handle-e': {
+        '& .react-grid-item > .react-resizable-handle.react-resizable-handle-w, &.react-grid-item > .react-resizable-handle.react-resizable-handle-e': {
             top: '50%',
             marginTop: '-10px',
             cursor: 'ew-resize'
         },
-        '&.react-grid-item > .react-resizable-handle.react-resizable-handle-w': {
+        '& .react-grid-item > .react-resizable-handle.react-resizable-handle-w': {
             left: '0',
             transform: 'rotate(135deg)'
         },
-        '&.react-grid-item > .react-resizable-handle.react-resizable-handle-e': {
+        '& .react-grid-item > .react-resizable-handle.react-resizable-handle-e': {
             right: '0',
             transform: 'rotate(315deg)'
         },
-        '&.react-grid-item > .react-resizable-handle.react-resizable-handle-n, &.react-grid-item > .react-resizable-handle.react-resizable-handle-s': {
+        '& .react-grid-item > .react-resizable-handle.react-resizable-handle-n, &.react-grid-item > .react-resizable-handle.react-resizable-handle-s': {
             left: '50%',
             marginLeft: '-10px',
             cursor: 'ns-resize'
         },
-        '&.react-grid-item > .react-resizable-handle.react-resizable-handle-n': {
+        '& .react-grid-item > .react-resizable-handle.react-resizable-handle-n': {
             top: '0',
             transform: 'rotate(225deg)'
         },
-        '&.react-grid-item > .react-resizable-handle.react-resizable-handle-s': {
+        '& .react-grid-item > .react-resizable-handle.react-resizable-handle-s': {
             bottom: '0',
             transform: 'rotate(45deg)'
         },
-        '&.react-resizable': {
+        '& .react-resizable': {
             position: 'relative'
         },
-        '&.react-resizable-handle': {
+        '& .react-resizable-handle': {
             position: 'absolute',
             width: '20px',
             height: '20px',
@@ -139,54 +167,53 @@ const styles = (theme)=>{
             backgroundPosition: 'bottom right',
             padding: '0 3px 3px 0'
         },
-        '&.react-resizable-handle-sw': {
+        '& .react-resizable-handle-sw': {
             bottom: '0',
             left: '0',
             cursor: 'sw-resize',
             transform: 'rotate(90deg)'
         },
-        '&.react-resizable-handle-se': {
+        '& .react-resizable-handle-se': {
             bottom: '0',
             right: '0',
             cursor: 'se-resize'
         },
-        '&.react-resizable-handle-nw': {
+        '& .react-resizable-handle-nw': {
             top: '0',
             left: '0',
             cursor: 'nw-resize',
             transform: 'rotate(180deg)'
         },
-        '&.react-resizable-handle-ne': {
+        '& .react-resizable-handle-ne': {
             top: '0',
             right: '0',
             cursor: 'ne-resize',
             transform: 'rotate(270deg)'
         },
-        '&.react-resizable-handle-w, .react-resizable-handle-e': {
+        '& .react-resizable-handle-w, .react-resizable-handle-e': {
             top: '50%',
             marginTop: '-10px',
             cursor: 'ew-resize'
         },
-        '&.react-resizable-handle-w': {
+        '& .react-resizable-handle-w': {
             left: '0',
             transform: 'rotate(135deg)'
         },
-        '&.react-resizable-handle-e': {
+        '& .react-resizable-handle-e': {
             right: '0',
             transform: 'rotate(315deg)'
         },
-        '&.react-resizable-handle-n, .react-resizable-handle-s': {
+        '& .react-resizable-handle-n, .react-resizable-handle-s': {
             left: '50%',
             marginLeft: '-10px',
             cursor: 'ns-resize'
         },
-        '&.react-resizable-handle-n': {
+        '& .react-resizable-handle-n': {
             top: '0',
             transform: 'rotate(225deg)'
         },
-        '&.react-resizable-handle-s': {
+        '& .react-resizable-handle-s': {
             bottom: '0',
             transform: 'rotate(45deg)'
         }
-    };
-};
+    }));

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

@@ -23,83 +23,70 @@ const _react = require("react");
 const _reactGridLayout = require("react-grid-layout");
 const _material = require("@mui/material");
 const _components = require("@perses-dev/components");
-const _styles = require("../../css/styles");
 const _context = require("../../context");
 const _gridTitle = require("./GridTitle");
 const _gridItemContent = require("./GridItemContent");
+const _gridContainer = require("./GridContainer");
 const ResponsiveGridLayout = (0, _reactGridLayout.WidthProvider)(_reactGridLayout.Responsive);
 function GridLayout(props) {
-    const { panelGroupId , ...others } = 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)();
-    return /*#__PURE__*/ (0, _jsxRuntime.jsxs)(_jsxRuntime.Fragment, {
+    return /*#__PURE__*/ (0, _jsxRuntime.jsxs)(_gridContainer.GridContainer, {
         children: [
-            /*#__PURE__*/ (0, _jsxRuntime.jsx)(_material.GlobalStyles, {
-                styles: _styles.styles
+            groupDefinition.title !== undefined && /*#__PURE__*/ (0, _jsxRuntime.jsx)(_gridTitle.GridTitle, {
+                panelGroupId: panelGroupId,
+                title: groupDefinition.title,
+                collapse: groupDefinition.isCollapsed === undefined ? undefined : {
+                    isOpen,
+                    onToggleOpen: ()=>setIsOpen((current)=>!current)
+                }
             }),
-            /*#__PURE__*/ (0, _jsxRuntime.jsxs)(_material.Box, {
-                ...others,
-                component: "section",
-                sx: {
-                    '& + &': {
-                        marginTop: (theme)=>theme.spacing(1)
-                    }
-                },
-                children: [
-                    groupDefinition.title !== undefined && /*#__PURE__*/ (0, _jsxRuntime.jsx)(_gridTitle.GridTitle, {
-                        panelGroupId: panelGroupId,
-                        title: groupDefinition.title,
-                        collapse: groupDefinition.isCollapsed === undefined ? undefined : {
-                            isOpen,
-                            onToggleOpen: ()=>setIsOpen((current)=>!current)
-                        }
-                    }),
-                    /*#__PURE__*/ (0, _jsxRuntime.jsx)(_material.Collapse, {
-                        in: isOpen,
-                        unmountOnExit: true,
-                        children: /*#__PURE__*/ (0, _jsxRuntime.jsx)(ResponsiveGridLayout, {
-                            className: "layout",
-                            breakpoints: {
-                                sm: theme.breakpoints.values.sm,
-                                xxs: 0
-                            },
-                            cols: {
-                                sm: 24,
-                                xxs: 2
-                            },
-                            rowHeight: 30,
-                            draggableHandle: '.drag-handle',
-                            resizeHandles: [
-                                'se'
-                            ],
-                            isDraggable: isEditMode,
-                            isResizable: isEditMode,
-                            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,
-                                                panelGroupItemLayoutId: i
-                                            }
-                                        })
-                                    })
-                                }, i))
-                        })
-                    })
-                ]
+            /*#__PURE__*/ (0, _jsxRuntime.jsx)(_material.Collapse, {
+                in: isOpen,
+                unmountOnExit: true,
+                appear: false,
+                children: /*#__PURE__*/ (0, _jsxRuntime.jsx)(ResponsiveGridLayout, {
+                    className: "layout",
+                    breakpoints: {
+                        sm: theme.breakpoints.values.sm,
+                        xxs: 0
+                    },
+                    cols: {
+                        sm: 24,
+                        xxs: 2
+                    },
+                    rowHeight: 30,
+                    draggableHandle: '.drag-handle',
+                    resizeHandles: [
+                        'se'
+                    ],
+                    isDraggable: isEditMode,
+                    isResizable: isEditMode,
+                    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,
+                                        panelGroupItemLayoutId: i
+                                    }
+                                })
+                            })
+                        }, i))
+                })
             })
         ]
     });

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

@@ -19,11 +19,10 @@ Object.defineProperty(exports, "GridTitle", {
     get: ()=>GridTitle
 });
 const _jsxRuntime = require("react/jsx-runtime");
-const _react = require("react");
 const _material = require("@mui/material");
 const _chevronUp = /*#__PURE__*/ _interopRequireDefault(require("mdi-material-ui/ChevronUp"));
 const _chevronDown = /*#__PURE__*/ _interopRequireDefault(require("mdi-material-ui/ChevronDown"));
-const _plus = /*#__PURE__*/ _interopRequireDefault(require("mdi-material-ui/Plus"));
+const _chartBoxPlusOutline = /*#__PURE__*/ _interopRequireDefault(require("mdi-material-ui/ChartBoxPlusOutline"));
 const _pencilOutline = /*#__PURE__*/ _interopRequireDefault(require("mdi-material-ui/PencilOutline"));
 const _arrowUp = /*#__PURE__*/ _interopRequireDefault(require("mdi-material-ui/ArrowUp"));
 const _arrowDown = /*#__PURE__*/ _interopRequireDefault(require("mdi-material-ui/ArrowDown"));
@@ -36,8 +35,8 @@ function _interopRequireDefault(obj) {
 }
 function GridTitle(props) {
     const { panelGroupId , title , collapse  } = props;
-    const [isHovered, setIsHovered] = (0, _react.useState)(false);
-    const { openAddPanel , openEditPanelGroup , deletePanelGroup , moveUp , moveDown  } = (0, _context.usePanelGroupActions)(panelGroupId);
+    const { openAddPanel , openEditPanelGroup , moveUp , moveDown  } = (0, _context.usePanelGroupActions)(panelGroupId);
+    const { openDeletePanelGroupDialog  } = (0, _context.useDeletePanelGroupDialog)();
     const { isEditMode  } = (0, _context.useEditMode)();
     const text = /*#__PURE__*/ (0, _jsxRuntime.jsx)(_material.Typography, {
         variant: "h2",
@@ -54,8 +53,6 @@ function GridTitle(props) {
             padding: (theme)=>theme.spacing(1),
             backgroundColor: (theme)=>theme.palette.background.default
         },
-        onMouseEnter: ()=>setIsHovered(true),
-        onMouseLeave: ()=>setIsHovered(false),
         children: collapse ? /*#__PURE__*/ (0, _jsxRuntime.jsxs)(_jsxRuntime.Fragment, {
             children: [
                 /*#__PURE__*/ (0, _jsxRuntime.jsx)(_material.IconButton, {
@@ -63,35 +60,35 @@ function GridTitle(props) {
                     children: collapse.isOpen ? /*#__PURE__*/ (0, _jsxRuntime.jsx)(_chevronUp.default, {}) : /*#__PURE__*/ (0, _jsxRuntime.jsx)(_chevronDown.default, {})
                 }),
                 text,
-                isEditMode && isHovered && /*#__PURE__*/ (0, _jsxRuntime.jsxs)(_material.Stack, {
+                isEditMode && /*#__PURE__*/ (0, _jsxRuntime.jsxs)(_material.Stack, {
                     direction: "row",
                     sx: {
                         marginLeft: 'auto'
                     },
                     children: [
                         /*#__PURE__*/ (0, _jsxRuntime.jsx)(_material.IconButton, {
-                            "aria-label": "add panel to group",
+                            "aria-label": `add panel to group ${title}`,
                             onClick: openAddPanel,
-                            children: /*#__PURE__*/ (0, _jsxRuntime.jsx)(_plus.default, {})
+                            children: /*#__PURE__*/ (0, _jsxRuntime.jsx)(_chartBoxPlusOutline.default, {})
                         }),
                         /*#__PURE__*/ (0, _jsxRuntime.jsx)(_material.IconButton, {
-                            "aria-label": "edit group",
+                            "aria-label": `edit group ${title}`,
                             onClick: openEditPanelGroup,
                             children: /*#__PURE__*/ (0, _jsxRuntime.jsx)(_pencilOutline.default, {})
                         }),
                         /*#__PURE__*/ (0, _jsxRuntime.jsx)(_material.IconButton, {
-                            "aria-label": "delete group",
-                            onClick: deletePanelGroup,
+                            "aria-label": `delete group ${title}`,
+                            onClick: ()=>openDeletePanelGroupDialog(panelGroupId),
                             children: /*#__PURE__*/ (0, _jsxRuntime.jsx)(_deleteOutline.default, {})
                         }),
                         /*#__PURE__*/ (0, _jsxRuntime.jsx)(_material.IconButton, {
-                            "aria-label": "move group down",
+                            "aria-label": `move group ${title} down`,
                             disabled: moveDown === undefined,
                             onClick: moveDown,
                             children: /*#__PURE__*/ (0, _jsxRuntime.jsx)(_arrowDown.default, {})
                         }),
                         /*#__PURE__*/ (0, _jsxRuntime.jsx)(_material.IconButton, {
-                            "aria-label": "move group up",
+                            "aria-label": `move group ${title} up`,
                             disabled: moveUp === undefined,
                             onClick: moveUp,
                             children: /*#__PURE__*/ (0, _jsxRuntime.jsx)(_arrowUp.default, {})

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

@@ -24,7 +24,6 @@ const _useResizeObserver = /*#__PURE__*/ _interopRequireDefault(require("use-res
 const _reactIntersectionObserver = require("react-intersection-observer");
 const _components = require("@perses-dev/components");
 const _material = require("@mui/material");
-const _componentIds = require("../../utils/component-ids");
 const _panelHeader = require("./PanelHeader");
 const _panelContent = require("./PanelContent");
 function _interopRequireDefault(obj) {
@@ -35,7 +34,7 @@ function _interopRequireDefault(obj) {
 function Panel(props) {
     const { definition , editHandlers , onMouseEnter , onMouseLeave , sx , ...others } = props;
     // Make sure we have an ID we can use for aria attributes
-    const generatedPanelId = (0, _componentIds.useId)('Panel');
+    const generatedPanelId = (0, _components.useId)('Panel');
     const headerId = `${generatedPanelId}-header`;
     const [contentElement, setContentElement] = (0, _react.useState)(null);
     const [isHovered, setIsHovered] = (0, _react.useState)(false);
@@ -109,6 +108,9 @@ function Panel(props) {
                 ref: setContentElement,
                 children: /*#__PURE__*/ (0, _jsxRuntime.jsx)(_components.ErrorBoundary, {
                     FallbackComponent: _components.ErrorAlert,
+                    resetKeys: [
+                        definition.spec.plugin.spec
+                    ],
                     children: inView === true && /*#__PURE__*/ (0, _jsxRuntime.jsx)(_panelContent.PanelContent, {
                         panelPluginKind: definition.spec.plugin.kind,
                         spec: definition.spec.plugin.spec,