@perses-dev/dashboards 0.38.0 → 0.40.0

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

@@ -16,19 +16,28 @@ Object.defineProperty(exports, "__esModule", {
 });
 Object.defineProperty(exports, "GridItemContent", {
     enumerable: true,
-    get: ()=>GridItemContent
+    get: function() {
+        return GridItemContent;
+    }
 });
-const _jsxRuntime = require("react/jsx-runtime");
-const _pluginSystem = require("@perses-dev/plugin-system");
+const _jsxruntime = require("react/jsx-runtime");
+const _material = require("@mui/material");
+const _reactintersectionobserver = require("react-intersection-observer");
+const _pluginsystem = require("@perses-dev/plugin-system");
 const _context = require("../../context");
 const _utils = require("../../utils");
-const _panel = require("../Panel/Panel");
+const _Panel = require("../Panel/Panel");
 function GridItemContent(props) {
     const { panelGroupItemId , width  } = props;
     const panelDefinition = (0, _context.usePanel)(panelGroupItemId);
-    const { spec: { queries  } ,  } = panelDefinition;
+    const { spec: { queries  }  } = panelDefinition;
     const { isEditMode  } = (0, _context.useEditMode)();
     const { openEditPanel , openDeletePanelDialog , duplicatePanel  } = (0, _context.usePanelActions)(panelGroupItemId);
+    const { ref , inView  } = (0, _reactintersectionobserver.useInView)({
+        threshold: 0.2,
+        initialInView: false,
+        triggerOnce: true
+    });
     // Provide actions to the panel when in edit mode
     let editHandlers = undefined;
     if (isEditMode) {
@@ -47,14 +56,26 @@ function GridItemContent(props) {
             spec: query.spec.plugin.spec
         };
     });
-    return /*#__PURE__*/ (0, _jsxRuntime.jsx)(_pluginSystem.DataQueriesProvider, {
-        definitions: definitions,
-        options: {
-            suggestedStepMs
+    return /*#__PURE__*/ (0, _jsxruntime.jsx)(_material.Box, {
+        ref: ref,
+        sx: {
+            width: '100%',
+            height: '100%'
         },
-        children: /*#__PURE__*/ (0, _jsxRuntime.jsx)(_panel.Panel, {
-            definition: panelDefinition,
-            editHandlers: editHandlers
+        children: /*#__PURE__*/ (0, _jsxruntime.jsx)(_pluginsystem.DataQueriesProvider, {
+            definitions: definitions,
+            options: {
+                suggestedStepMs
+            },
+            queryOptions: {
+                enabled: inView
+            },
+            children: inView && /*#__PURE__*/ (0, _jsxruntime.jsx)(_Panel.Panel, {
+                definition: panelDefinition,
+                editHandlers: editHandlers,
+                panelOptions: props.panelOptions,
+                panelGroupItemId: panelGroupItemId
+            })
         })
     });
 }

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

@@ -16,27 +16,29 @@ Object.defineProperty(exports, "__esModule", {
 });
 Object.defineProperty(exports, "GridLayout", {
     enumerable: true,
-    get: ()=>GridLayout
+    get: function() {
+        return GridLayout;
+    }
 });
-const _jsxRuntime = require("react/jsx-runtime");
+const _jsxruntime = require("react/jsx-runtime");
 const _react = require("react");
-const _reactGridLayout = require("react-grid-layout");
+const _reactgridlayout = require("react-grid-layout");
 const _material = require("@mui/material");
 const _components = require("@perses-dev/components");
 const _context = require("../../context");
 const _constants = require("../../constants");
-const _gridTitle = require("./GridTitle");
-const _gridItemContent = require("./GridItemContent");
-const _gridContainer = require("./GridContainer");
+const _GridTitle = require("./GridTitle");
+const _GridItemContent = require("./GridItemContent");
+const _GridContainer = require("./GridContainer");
 const DEFAULT_MARGIN = 10;
-const ResponsiveGridLayout = (0, _reactGridLayout.WidthProvider)(_reactGridLayout.Responsive);
+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);
+    var _ref;
+    const [isOpen, setIsOpen] = (0, _react.useState)((_ref = !groupDefinition.isCollapsed) !== null && _ref !== void 0 ? _ref : true);
     const { isEditMode  } = (0, _context.useEditMode)();
     const [gridColWidth, setGridColWidth] = (0, _react.useState)(0);
     const handleLayoutChange = (currentLayout, allLayouts)=>{
@@ -59,9 +61,9 @@ function GridLayout(props) {
         // exclude margin and padding from total width
         setGridColWidth((containerWidth - marginWidth - containerPaddingWidth) / cols);
     };
-    return /*#__PURE__*/ (0, _jsxRuntime.jsxs)(_gridContainer.GridContainer, {
+    return /*#__PURE__*/ (0, _jsxruntime.jsxs)(_GridContainer.GridContainer, {
         children: [
-            groupDefinition.title !== undefined && /*#__PURE__*/ (0, _jsxRuntime.jsx)(_gridTitle.GridTitle, {
+            groupDefinition.title !== undefined && /*#__PURE__*/ (0, _jsxruntime.jsx)(_GridTitle.GridTitle, {
                 panelGroupId: panelGroupId,
                 title: groupDefinition.title,
                 collapse: groupDefinition.isCollapsed === undefined ? undefined : {
@@ -69,12 +71,12 @@ function GridLayout(props) {
                     onToggleOpen: ()=>setIsOpen((current)=>!current)
                 }
             }),
-            /*#__PURE__*/ (0, _jsxRuntime.jsx)(_material.Collapse, {
+            /*#__PURE__*/ (0, _jsxruntime.jsx)(_material.Collapse, {
                 in: isOpen,
                 unmountOnExit: true,
                 appear: false,
                 "data-testid": "panel-group-content",
-                children: /*#__PURE__*/ (0, _jsxRuntime.jsx)(ResponsiveGridLayout, {
+                children: /*#__PURE__*/ (0, _jsxruntime.jsx)(ResponsiveGridLayout, {
                     className: "layout",
                     breakpoints: {
                         sm: theme.breakpoints.values.sm,
@@ -101,10 +103,11 @@ function GridLayout(props) {
                     },
                     onLayoutChange: handleLayoutChange,
                     onWidthChange: handleWidthChange,
-                    children: groupDefinition.itemLayouts.map(({ i , w  })=>/*#__PURE__*/ (0, _jsxRuntime.jsx)("div", {
-                            children: /*#__PURE__*/ (0, _jsxRuntime.jsx)(_components.ErrorBoundary, {
+                    children: groupDefinition.itemLayouts.map(({ i , w  })=>/*#__PURE__*/ (0, _jsxruntime.jsx)("div", {
+                            children: /*#__PURE__*/ (0, _jsxruntime.jsx)(_components.ErrorBoundary, {
                                 FallbackComponent: _components.ErrorAlert,
-                                children: /*#__PURE__*/ (0, _jsxRuntime.jsx)(_gridItemContent.GridItemContent, {
+                                children: /*#__PURE__*/ (0, _jsxruntime.jsx)(_GridItemContent.GridItemContent, {
+                                    panelOptions: props.panelOptions,
                                     panelGroupItemId: {
                                         panelGroupId,
                                         panelGroupItemLayoutId: i

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

@@ -16,37 +16,39 @@ Object.defineProperty(exports, "__esModule", {
 });
 Object.defineProperty(exports, "GridTitle", {
     enumerable: true,
-    get: ()=>GridTitle
+    get: function() {
+        return GridTitle;
+    }
 });
-const _jsxRuntime = require("react/jsx-runtime");
+const _jsxruntime = require("react/jsx-runtime");
 const _material = require("@mui/material");
-const _chevronDown = /*#__PURE__*/ _interopRequireDefault(require("mdi-material-ui/ChevronDown"));
-const _chevronRight = /*#__PURE__*/ _interopRequireDefault(require("mdi-material-ui/ChevronRight"));
-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"));
-const _deleteOutline = /*#__PURE__*/ _interopRequireDefault(require("mdi-material-ui/DeleteOutline"));
+const _ChevronDown = /*#__PURE__*/ _interop_require_default(require("mdi-material-ui/ChevronDown"));
+const _ChevronRight = /*#__PURE__*/ _interop_require_default(require("mdi-material-ui/ChevronRight"));
+const _ChartBoxPlusOutline = /*#__PURE__*/ _interop_require_default(require("mdi-material-ui/ChartBoxPlusOutline"));
+const _PencilOutline = /*#__PURE__*/ _interop_require_default(require("mdi-material-ui/PencilOutline"));
+const _ArrowUp = /*#__PURE__*/ _interop_require_default(require("mdi-material-ui/ArrowUp"));
+const _ArrowDown = /*#__PURE__*/ _interop_require_default(require("mdi-material-ui/ArrowDown"));
+const _DeleteOutline = /*#__PURE__*/ _interop_require_default(require("mdi-material-ui/DeleteOutline"));
 const _components = require("@perses-dev/components");
-const _pluginSystem = require("@perses-dev/plugin-system");
+const _pluginsystem = require("@perses-dev/plugin-system");
 const _constants = require("../../constants");
 const _context = require("../../context");
-function _interopRequireDefault(obj) {
+function _interop_require_default(obj) {
     return obj && obj.__esModule ? obj : {
         default: obj
     };
 }
 function GridTitle(props) {
     const { panelGroupId , title: rawTitle , collapse  } = props;
-    const title = (0, _pluginSystem.useReplaceVariablesInString)(rawTitle);
+    const title = (0, _pluginsystem.useReplaceVariablesInString)(rawTitle);
     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, {
+    const text = /*#__PURE__*/ (0, _jsxruntime.jsx)(_material.Typography, {
         variant: "h2",
         children: title
     });
-    return /*#__PURE__*/ (0, _jsxRuntime.jsx)(_material.Box, {
+    return /*#__PURE__*/ (0, _jsxruntime.jsx)(_material.Box, {
         onClick: collapse === null || collapse === void 0 ? void 0 : collapse.onToggleOpen,
         sx: {
             display: 'flex',
@@ -57,59 +59,59 @@ function GridTitle(props) {
             backgroundColor: ({ palette  })=>palette.background.paper
         },
         "data-testid": "panel-group-header",
-        children: collapse ? /*#__PURE__*/ (0, _jsxRuntime.jsxs)(_jsxRuntime.Fragment, {
+        children: collapse ? /*#__PURE__*/ (0, _jsxruntime.jsxs)(_jsxruntime.Fragment, {
             children: [
-                /*#__PURE__*/ (0, _jsxRuntime.jsx)(_material.IconButton, {
+                /*#__PURE__*/ (0, _jsxruntime.jsx)(_material.IconButton, {
                     sx: {
                         marginRight: 1
                     },
                     "aria-label": `${collapse.isOpen ? 'collapse' : 'expand'} group ${title}`,
-                    children: collapse.isOpen ? /*#__PURE__*/ (0, _jsxRuntime.jsx)(_chevronDown.default, {}) : /*#__PURE__*/ (0, _jsxRuntime.jsx)(_chevronRight.default, {})
+                    children: collapse.isOpen ? /*#__PURE__*/ (0, _jsxruntime.jsx)(_ChevronDown.default, {}) : /*#__PURE__*/ (0, _jsxruntime.jsx)(_ChevronRight.default, {})
                 }),
                 text,
-                isEditMode && /*#__PURE__*/ (0, _jsxRuntime.jsxs)(_material.Stack, {
+                isEditMode && /*#__PURE__*/ (0, _jsxruntime.jsxs)(_material.Stack, {
                     direction: "row",
                     marginLeft: "auto",
                     children: [
-                        /*#__PURE__*/ (0, _jsxRuntime.jsx)(_components.InfoTooltip, {
+                        /*#__PURE__*/ (0, _jsxruntime.jsx)(_components.InfoTooltip, {
                             description: _constants.TOOLTIP_TEXT.addPanelToGroup,
-                            children: /*#__PURE__*/ (0, _jsxRuntime.jsx)(_material.IconButton, {
+                            children: /*#__PURE__*/ (0, _jsxruntime.jsx)(_material.IconButton, {
                                 "aria-label": _constants.ARIA_LABEL_TEXT.addPanelToGroup(title),
                                 onClick: (e)=>{
                                     // Don't trigger expand/collapse
                                     e.stopPropagation();
                                     openAddPanel();
                                 },
-                                children: /*#__PURE__*/ (0, _jsxRuntime.jsx)(_chartBoxPlusOutline.default, {})
+                                children: /*#__PURE__*/ (0, _jsxruntime.jsx)(_ChartBoxPlusOutline.default, {})
                             })
                         }),
-                        /*#__PURE__*/ (0, _jsxRuntime.jsx)(_components.InfoTooltip, {
+                        /*#__PURE__*/ (0, _jsxruntime.jsx)(_components.InfoTooltip, {
                             description: _constants.TOOLTIP_TEXT.editGroup,
-                            children: /*#__PURE__*/ (0, _jsxRuntime.jsx)(_material.IconButton, {
+                            children: /*#__PURE__*/ (0, _jsxruntime.jsx)(_material.IconButton, {
                                 "aria-label": _constants.ARIA_LABEL_TEXT.editGroup(title),
                                 onClick: (e)=>{
                                     // Don't trigger expand/collapse
                                     e.stopPropagation();
                                     openEditPanelGroup();
                                 },
-                                children: /*#__PURE__*/ (0, _jsxRuntime.jsx)(_pencilOutline.default, {})
+                                children: /*#__PURE__*/ (0, _jsxruntime.jsx)(_PencilOutline.default, {})
                             })
                         }),
-                        /*#__PURE__*/ (0, _jsxRuntime.jsx)(_components.InfoTooltip, {
+                        /*#__PURE__*/ (0, _jsxruntime.jsx)(_components.InfoTooltip, {
                             description: _constants.TOOLTIP_TEXT.deleteGroup,
-                            children: /*#__PURE__*/ (0, _jsxRuntime.jsx)(_material.IconButton, {
+                            children: /*#__PURE__*/ (0, _jsxruntime.jsx)(_material.IconButton, {
                                 "aria-label": _constants.ARIA_LABEL_TEXT.deleteGroup(title),
                                 onClick: (e)=>{
                                     // Don't trigger expand/collapse
                                     e.stopPropagation();
                                     openDeletePanelGroupDialog(panelGroupId);
                                 },
-                                children: /*#__PURE__*/ (0, _jsxRuntime.jsx)(_deleteOutline.default, {})
+                                children: /*#__PURE__*/ (0, _jsxruntime.jsx)(_DeleteOutline.default, {})
                             })
                         }),
-                        /*#__PURE__*/ (0, _jsxRuntime.jsx)(_components.InfoTooltip, {
+                        /*#__PURE__*/ (0, _jsxruntime.jsx)(_components.InfoTooltip, {
                             description: _constants.TOOLTIP_TEXT.moveGroupDown,
-                            children: /*#__PURE__*/ (0, _jsxRuntime.jsx)(_material.IconButton, {
+                            children: /*#__PURE__*/ (0, _jsxruntime.jsx)(_material.IconButton, {
                                 "aria-label": _constants.ARIA_LABEL_TEXT.moveGroupDown(title),
                                 disabled: moveDown === undefined,
                                 onClick: (e)=>{
@@ -117,12 +119,12 @@ function GridTitle(props) {
                                     e.stopPropagation();
                                     moveDown && moveDown();
                                 },
-                                children: /*#__PURE__*/ (0, _jsxRuntime.jsx)(_arrowDown.default, {})
+                                children: /*#__PURE__*/ (0, _jsxruntime.jsx)(_ArrowDown.default, {})
                             })
                         }),
-                        /*#__PURE__*/ (0, _jsxRuntime.jsx)(_components.InfoTooltip, {
+                        /*#__PURE__*/ (0, _jsxruntime.jsx)(_components.InfoTooltip, {
                             description: _constants.TOOLTIP_TEXT.moveGroupUp,
-                            children: /*#__PURE__*/ (0, _jsxRuntime.jsx)(_material.IconButton, {
+                            children: /*#__PURE__*/ (0, _jsxruntime.jsx)(_material.IconButton, {
                                 "aria-label": _constants.ARIA_LABEL_TEXT.moveGroupUp(title),
                                 disabled: moveUp === undefined,
                                 onClick: (e)=>{
@@ -130,7 +132,7 @@ function GridTitle(props) {
                                     e.stopPropagation();
                                     moveUp && moveUp();
                                 },
-                                children: /*#__PURE__*/ (0, _jsxRuntime.jsx)(_arrowUp.default, {})
+                                children: /*#__PURE__*/ (0, _jsxruntime.jsx)(_ArrowUp.default, {})
                             })
                         })
                     ]

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

@@ -14,18 +14,20 @@
 Object.defineProperty(exports, "__esModule", {
     value: true
 });
-_exportStar(require("./GridContainer"), exports);
-_exportStar(require("./GridItemContent"), exports);
-_exportStar(require("./GridLayout"), exports);
-_exportStar(require("./GridTitle"), exports);
-function _exportStar(from, to) {
+_export_star(require("./GridContainer"), exports);
+_export_star(require("./GridItemContent"), exports);
+_export_star(require("./GridLayout"), exports);
+_export_star(require("./GridTitle"), exports);
+function _export_star(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];
-            }
-        });
+        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/Panel/Panel.js

@@ -16,28 +16,30 @@ Object.defineProperty(exports, "__esModule", {
 });
 Object.defineProperty(exports, "Panel", {
     enumerable: true,
-    get: ()=>Panel
+    get: function() {
+        return Panel;
+    }
 });
-const _jsxRuntime = require("react/jsx-runtime");
+const _jsxruntime = require("react/jsx-runtime");
 const _react = require("react");
-const _useResizeObserver = /*#__PURE__*/ _interopRequireDefault(require("use-resize-observer"));
-const _reactIntersectionObserver = require("react-intersection-observer");
+const _useresizeobserver = /*#__PURE__*/ _interop_require_default(require("use-resize-observer"));
 const _components = require("@perses-dev/components");
 const _material = require("@mui/material");
-const _panelHeader = require("./PanelHeader");
-const _panelContent = require("./PanelContent");
-function _interopRequireDefault(obj) {
+const _PanelHeader = require("./PanelHeader");
+const _PanelContent = require("./PanelContent");
+function _interop_require_default(obj) {
     return obj && obj.__esModule ? obj : {
         default: obj
     };
 }
 const Panel = /*#__PURE__*/ (0, _react.memo)(function Panel(props) {
-    const { definition , editHandlers , onMouseEnter , onMouseLeave , sx , ...others } = props;
+    var _panelOptions_extra;
+    const { definition , editHandlers , onMouseEnter , onMouseLeave , sx , panelOptions , panelGroupItemId , ...others } = props;
     // Make sure we have an ID we can use for aria attributes
     const generatedPanelId = (0, _components.useId)('Panel');
     const headerId = `${generatedPanelId}-header`;
     const [contentElement, setContentElement] = (0, _react.useState)(null);
-    const { width , height  } = (0, _useResizeObserver.default)({
+    const { width , height  } = (0, _useresizeobserver.default)({
         ref: contentElement
     });
     const contentDimensions = (0, _react.useMemo)(()=>{
@@ -50,11 +52,6 @@ const Panel = /*#__PURE__*/ (0, _react.memo)(function Panel(props) {
         width,
         height
     ]);
-    const { ref , inView  } = (0, _reactIntersectionObserver.useInView)({
-        threshold: 0.3,
-        initialInView: false,
-        triggerOnce: true
-    });
     const chartsTheme = (0, _components.useChartsTheme)();
     const handleMouseEnter = (e)=>{
         onMouseEnter === null || onMouseEnter === void 0 ? void 0 : onMouseEnter(e);
@@ -62,8 +59,7 @@ const Panel = /*#__PURE__*/ (0, _react.memo)(function Panel(props) {
     const handleMouseLeave = (e)=>{
         onMouseLeave === null || onMouseLeave === void 0 ? void 0 : onMouseLeave(e);
     };
-    return /*#__PURE__*/ (0, _jsxRuntime.jsxs)(_material.Card, {
-        ref: ref,
+    return /*#__PURE__*/ (0, _jsxruntime.jsxs)(_material.Card, {
         component: "section",
         sx: (0, _components.combineSx)({
             width: '100%',
@@ -79,7 +75,11 @@ const Panel = /*#__PURE__*/ (0, _react.memo)(function Panel(props) {
         "data-testid": "panel",
         ...others,
         children: [
-            /*#__PURE__*/ (0, _jsxRuntime.jsx)(_panelHeader.PanelHeader, {
+            /*#__PURE__*/ (0, _jsxruntime.jsx)(_PanelHeader.PanelHeader, {
+                extra: panelOptions === null || panelOptions === void 0 ? void 0 : (_panelOptions_extra = panelOptions.extra) === null || _panelOptions_extra === void 0 ? void 0 : _panelOptions_extra.call(panelOptions, {
+                    panelDefinition: definition,
+                    panelGroupItemId
+                }),
                 id: headerId,
                 title: definition.spec.display.name,
                 description: definition.spec.display.description,
@@ -88,7 +88,7 @@ const Panel = /*#__PURE__*/ (0, _react.memo)(function Panel(props) {
                     paddingX: `${chartsTheme.container.padding.default}px`
                 }
             }),
-            /*#__PURE__*/ (0, _jsxRuntime.jsx)(_material.CardContent, {
+            /*#__PURE__*/ (0, _jsxruntime.jsx)(_material.CardContent, {
                 component: "figure",
                 sx: {
                     position: 'relative',
@@ -102,12 +102,12 @@ const Panel = /*#__PURE__*/ (0, _react.memo)(function Panel(props) {
                     }
                 },
                 ref: setContentElement,
-                children: /*#__PURE__*/ (0, _jsxRuntime.jsx)(_components.ErrorBoundary, {
+                children: /*#__PURE__*/ (0, _jsxruntime.jsx)(_components.ErrorBoundary, {
                     FallbackComponent: _components.ErrorAlert,
                     resetKeys: [
-                        definition.spec.plugin.spec
+                        definition.spec
                     ],
-                    children: inView === true && /*#__PURE__*/ (0, _jsxRuntime.jsx)(_panelContent.PanelContent, {
+                    children: /*#__PURE__*/ (0, _jsxruntime.jsx)(_PanelContent.PanelContent, {
                         panelPluginKind: definition.spec.plugin.kind,
                         spec: definition.spec.plugin.spec,
                         contentDimensions: contentDimensions

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

@@ -16,19 +16,21 @@ Object.defineProperty(exports, "__esModule", {
 });
 Object.defineProperty(exports, "PanelContent", {
     enumerable: true,
-    get: ()=>PanelContent
+    get: function() {
+        return PanelContent;
+    }
 });
-const _jsxRuntime = require("react/jsx-runtime");
-const _pluginSystem = require("@perses-dev/plugin-system");
+const _jsxruntime = require("react/jsx-runtime");
+const _pluginsystem = require("@perses-dev/plugin-system");
 const _material = require("@mui/material");
 function PanelContent(props) {
     const { panelPluginKind , contentDimensions , ...others } = props;
-    const { data: plugin , isLoading  } = (0, _pluginSystem.usePlugin)('Panel', panelPluginKind, {
+    const { data: plugin , isLoading  } = (0, _pluginsystem.usePlugin)('Panel', panelPluginKind, {
         useErrorBoundary: true
     });
     const PanelComponent = plugin === null || plugin === void 0 ? void 0 : plugin.PanelComponent;
     if (isLoading) {
-        return /*#__PURE__*/ (0, _jsxRuntime.jsx)(_material.Skeleton, {
+        return /*#__PURE__*/ (0, _jsxruntime.jsx)(_material.Skeleton, {
             variant: "rectangular",
             width: contentDimensions === null || contentDimensions === void 0 ? void 0 : contentDimensions.width,
             height: contentDimensions === null || contentDimensions === void 0 ? void 0 : contentDimensions.height,
@@ -38,7 +40,7 @@ function PanelContent(props) {
     if (PanelComponent === undefined) {
         throw new Error(`Missing PanelComponent from panel plugin for kind '${panelPluginKind}'`);
     }
-    return /*#__PURE__*/ (0, _jsxRuntime.jsx)(PanelComponent, {
+    return /*#__PURE__*/ (0, _jsxruntime.jsx)(PanelComponent, {
         ...others,
         contentDimensions: contentDimensions
     });

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

@@ -16,51 +16,53 @@ Object.defineProperty(exports, "__esModule", {
 });
 Object.defineProperty(exports, "PanelHeader", {
     enumerable: true,
-    get: ()=>PanelHeader
+    get: function() {
+        return PanelHeader;
+    }
 });
-const _jsxRuntime = require("react/jsx-runtime");
+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"));
-const _contentCopy = /*#__PURE__*/ _interopRequireDefault(require("mdi-material-ui/ContentCopy"));
-const _pluginSystem = require("@perses-dev/plugin-system");
+const _InformationOutline = /*#__PURE__*/ _interop_require_default(require("mdi-material-ui/InformationOutline"));
+const _PencilOutline = /*#__PURE__*/ _interop_require_default(require("mdi-material-ui/PencilOutline"));
+const _DeleteOutline = /*#__PURE__*/ _interop_require_default(require("mdi-material-ui/DeleteOutline"));
+const _DragVertical = /*#__PURE__*/ _interop_require_default(require("mdi-material-ui/DragVertical"));
+const _ContentCopy = /*#__PURE__*/ _interop_require_default(require("mdi-material-ui/ContentCopy"));
+const _pluginsystem = require("@perses-dev/plugin-system");
 const _constants = require("../../constants");
-function _interopRequireDefault(obj) {
+function _interop_require_default(obj) {
     return obj && obj.__esModule ? obj : {
         default: obj
     };
 }
-function PanelHeader({ id , title: rawTitle , description: rawDescription , editHandlers , sx , ...rest }) {
+function PanelHeader({ id , title: rawTitle , description: rawDescription , editHandlers , sx , extra , ...rest }) {
     const titleElementId = `${id}-title`;
     const descriptionTooltipId = `${id}-description`;
-    const title = (0, _pluginSystem.useReplaceVariablesInString)(rawTitle);
-    const description = (0, _pluginSystem.useReplaceVariablesInString)(rawDescription);
+    const title = (0, _pluginsystem.useReplaceVariablesInString)(rawTitle);
+    const description = (0, _pluginsystem.useReplaceVariablesInString)(rawDescription);
     let actions = undefined;
     if (editHandlers !== undefined) {
         // If there are edit handlers, always just show the edit buttons
-        actions = /*#__PURE__*/ (0, _jsxRuntime.jsxs)(_jsxRuntime.Fragment, {
+        actions = /*#__PURE__*/ (0, _jsxruntime.jsxs)(_jsxruntime.Fragment, {
             children: [
-                /*#__PURE__*/ (0, _jsxRuntime.jsx)(_components.InfoTooltip, {
+                /*#__PURE__*/ (0, _jsxruntime.jsx)(_components.InfoTooltip, {
                     description: _constants.TOOLTIP_TEXT.editPanel,
-                    children: /*#__PURE__*/ (0, _jsxRuntime.jsx)(HeaderIconButton, {
+                    children: /*#__PURE__*/ (0, _jsxruntime.jsx)(HeaderIconButton, {
                         "aria-label": _constants.ARIA_LABEL_TEXT.editPanel(title),
                         size: "small",
                         onClick: editHandlers.onEditPanelClick,
-                        children: /*#__PURE__*/ (0, _jsxRuntime.jsx)(_pencilOutline.default, {
+                        children: /*#__PURE__*/ (0, _jsxruntime.jsx)(_PencilOutline.default, {
                             fontSize: "inherit"
                         })
                     })
                 }),
-                /*#__PURE__*/ (0, _jsxRuntime.jsx)(_components.InfoTooltip, {
+                /*#__PURE__*/ (0, _jsxruntime.jsx)(_components.InfoTooltip, {
                     description: _constants.TOOLTIP_TEXT.duplicatePanel,
-                    children: /*#__PURE__*/ (0, _jsxRuntime.jsx)(HeaderIconButton, {
+                    children: /*#__PURE__*/ (0, _jsxruntime.jsx)(HeaderIconButton, {
                         "aria-label": _constants.ARIA_LABEL_TEXT.duplicatePanel(title),
                         size: "small",
                         onClick: editHandlers.onDuplicatePanelClick,
-                        children: /*#__PURE__*/ (0, _jsxRuntime.jsx)(_contentCopy.default, {
+                        children: /*#__PURE__*/ (0, _jsxruntime.jsx)(_ContentCopy.default, {
                             fontSize: "inherit",
                             sx: {
                                 // Shrink this icon a little bit to look more consistent
@@ -70,23 +72,23 @@ function PanelHeader({ id , title: rawTitle , description: rawDescription , edit
                         })
                     })
                 }),
-                /*#__PURE__*/ (0, _jsxRuntime.jsx)(_components.InfoTooltip, {
+                /*#__PURE__*/ (0, _jsxruntime.jsx)(_components.InfoTooltip, {
                     description: _constants.TOOLTIP_TEXT.deletePanel,
-                    children: /*#__PURE__*/ (0, _jsxRuntime.jsx)(HeaderIconButton, {
+                    children: /*#__PURE__*/ (0, _jsxruntime.jsx)(HeaderIconButton, {
                         "aria-label": _constants.ARIA_LABEL_TEXT.deletePanel(title),
                         size: "small",
                         onClick: editHandlers.onDeletePanelClick,
-                        children: /*#__PURE__*/ (0, _jsxRuntime.jsx)(_deleteOutline.default, {
+                        children: /*#__PURE__*/ (0, _jsxruntime.jsx)(_DeleteOutline.default, {
                             fontSize: "inherit"
                         })
                     })
                 }),
-                /*#__PURE__*/ (0, _jsxRuntime.jsx)(_components.InfoTooltip, {
+                /*#__PURE__*/ (0, _jsxruntime.jsx)(_components.InfoTooltip, {
                     description: _constants.TOOLTIP_TEXT.movePanel,
-                    children: /*#__PURE__*/ (0, _jsxRuntime.jsx)(HeaderIconButton, {
+                    children: /*#__PURE__*/ (0, _jsxruntime.jsx)(HeaderIconButton, {
                         "aria-label": _constants.ARIA_LABEL_TEXT.movePanel(title),
                         size: "small",
-                        children: /*#__PURE__*/ (0, _jsxRuntime.jsx)(_dragVertical.default, {
+                        children: /*#__PURE__*/ (0, _jsxruntime.jsx)(_DragVertical.default, {
                             className: "drag-handle",
                             sx: {
                                 cursor: 'grab'
@@ -98,16 +100,16 @@ function PanelHeader({ id , title: rawTitle , description: rawDescription , edit
             ]
         });
     }
-    return /*#__PURE__*/ (0, _jsxRuntime.jsx)(_material.CardHeader, {
+    return /*#__PURE__*/ (0, _jsxruntime.jsx)(_material.CardHeader, {
         id: id,
         component: "header",
         "aria-labelledby": titleElementId,
         "aria-describedby": descriptionTooltipId,
         disableTypography: true,
-        title: /*#__PURE__*/ (0, _jsxRuntime.jsxs)(_material.Stack, {
+        title: /*#__PURE__*/ (0, _jsxruntime.jsxs)(_material.Stack, {
             direction: "row",
             children: [
-                /*#__PURE__*/ (0, _jsxRuntime.jsx)(_material.Typography, {
+                /*#__PURE__*/ (0, _jsxruntime.jsx)(_material.Typography, {
                     id: titleElementId,
                     variant: "subtitle1",
                     sx: {
@@ -121,14 +123,14 @@ function PanelHeader({ id , title: rawTitle , description: rawDescription , edit
                     },
                     children: title
                 }),
-                description !== undefined && description.trim().length > 0 && /*#__PURE__*/ (0, _jsxRuntime.jsx)(_components.InfoTooltip, {
+                description !== undefined && description.trim().length > 0 && /*#__PURE__*/ (0, _jsxruntime.jsx)(_components.InfoTooltip, {
                     id: descriptionTooltipId,
                     description: description,
                     enterDelay: 100,
-                    children: /*#__PURE__*/ (0, _jsxRuntime.jsx)(HeaderIconButton, {
+                    children: /*#__PURE__*/ (0, _jsxruntime.jsx)(HeaderIconButton, {
                         "aria-label": "panel description",
                         size: "small",
-                        children: /*#__PURE__*/ (0, _jsxRuntime.jsx)(_informationOutline.default, {
+                        children: /*#__PURE__*/ (0, _jsxruntime.jsx)(_InformationOutline.default, {
                             "aria-describedby": "info-tooltip",
                             "aria-hidden": false,
                             fontSize: "inherit",
@@ -140,11 +142,15 @@ function PanelHeader({ id , title: rawTitle , description: rawDescription , edit
                 })
             ]
         }),
-        action: /*#__PURE__*/ (0, _jsxRuntime.jsx)(HeaderActionWrapper, {
+        action: /*#__PURE__*/ (0, _jsxruntime.jsxs)(HeaderActionWrapper, {
             direction: "row",
             spacing: 0.25,
             alignItems: "center",
-            children: actions
+            children: [
+                editHandlers === undefined && extra,
+                " ",
+                actions
+            ]
         }),
         sx: (0, _components.combineSx)((theme)=>({
                 padding: theme.spacing(1),