@perses-dev/dashboards 0.52.0-beta.5 → 0.52.0-rc.1

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

@@ -14,67 +14,34 @@
 Object.defineProperty(exports, "__esModule", {
     value: true
 });
-Object.defineProperty(exports, "GridLayout", {
-    enumerable: true,
-    get: function() {
+function _export(target, all) {
+    for(var name in all)Object.defineProperty(target, name, {
+        enumerable: true,
+        get: all[name]
+    });
+}
+_export(exports, {
+    GridLayout: function() {
         return GridLayout;
+    },
+    RepeatGridLayout: function() {
+        return RepeatGridLayout;
     }
 });
 const _jsxruntime = require("react/jsx-runtime");
 const _react = require("react");
-const _reactgridlayout = require("react-grid-layout");
-const _material = require("@mui/material");
-const _components = require("@perses-dev/components");
+const _pluginsystem = require("@perses-dev/plugin-system");
 const _context = require("../../context");
 const _constants = require("../../constants");
-const _GridTitle = require("./GridTitle");
-const _GridItemContent = require("./GridItemContent");
-const _GridContainer = require("./GridContainer");
-const DEFAULT_MARGIN = 10;
-const ROW_HEIGHT = 30;
+const _Row = require("./Row");
 function GridLayout(props) {
     const { panelGroupId, panelOptions, panelFullHeight } = props;
-    const theme = (0, _material.useTheme)();
     const groupDefinition = (0, _context.usePanelGroup)(panelGroupId);
     const { updatePanelGroupLayouts } = (0, _context.usePanelGroupActions)(panelGroupId);
-    const [isOpen, setIsOpen] = (0, _react.useState)(!groupDefinition.isCollapsed);
+    const viewPanelItemId = (0, _context.useViewPanelGroup)();
     const { isEditMode } = (0, _context.useEditMode)();
     const [gridColWidth, setGridColWidth] = (0, _react.useState)(0);
-    const viewPanelItemId = (0, _context.useViewPanelGroup)();
     const hasViewPanel = viewPanelItemId?.panelGroupId === panelGroupId; // current panelGroup contains the panel extended?
-    const itemLayoutViewed = viewPanelItemId?.panelGroupItemLayoutId;
-    (0, _react.useEffect)(()=>{
-        if (hasViewPanel) {
-            setIsOpen(true);
-        }
-    }, [
-        hasViewPanel
-    ]);
-    // If there is a panel in view mode, we should hide the grid if the panel is not in the current group.
-    const isGridDisplayed = viewPanelItemId === undefined || hasViewPanel;
-    // Item layout is override if there is a panel in view mode
-    const itemLayouts = (0, _react.useMemo)(()=>{
-        if (itemLayoutViewed) {
-            return groupDefinition.itemLayouts.map((itemLayout)=>{
-                if (itemLayout.i === itemLayoutViewed) {
-                    const rowTitleHeight = 40 + 8; // 40 is the height of the row title and 8 is the margin height
-                    return {
-                        h: Math.round(((panelFullHeight ?? window.innerHeight) - rowTitleHeight) / (ROW_HEIGHT + DEFAULT_MARGIN)),
-                        i: itemLayoutViewed,
-                        w: 48,
-                        x: 0,
-                        y: 0
-                    };
-                }
-                return itemLayout;
-            });
-        }
-        return groupDefinition.itemLayouts;
-    }, [
-        groupDefinition.itemLayouts,
-        itemLayoutViewed,
-        panelFullHeight
-    ]);
     const handleLayoutChange = (currentLayout, allLayouts)=>{
         // Using the value from `allLayouts` instead of `currentLayout` because of
         // a bug in react-layout-grid where `currentLayout` does not adjust properly
@@ -95,85 +62,70 @@ function GridLayout(props) {
         // exclude margin and padding from total width
         setGridColWidth((containerWidth - marginWidth - containerPaddingWidth) / cols);
     };
-    // https://github.com/react-grid-layout/react-grid-layout?tab=readme-ov-file#react-hooks-performance
-    const ResponsiveGridLayout = (0, _react.useMemo)(()=>(0, _reactgridlayout.WidthProvider)(_reactgridlayout.Responsive), []);
-    return /*#__PURE__*/ (0, _jsxruntime.jsxs)(_GridContainer.GridContainer, {
-        sx: {
-            display: isGridDisplayed ? 'block' : 'none',
-            height: itemLayoutViewed ? `${panelFullHeight}px` : 'unset',
-            overflow: itemLayoutViewed ? 'hidden' : 'unset'
-        },
-        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,
-                appear: false,
-                "data-testid": "panel-group-content",
-                children: /*#__PURE__*/ (0, _jsxruntime.jsx)(ResponsiveGridLayout, {
-                    className: "layout",
-                    breakpoints: {
-                        sm: theme.breakpoints.values.sm,
-                        xxs: 0
-                    },
-                    cols: _constants.GRID_LAYOUT_COLS,
-                    rowHeight: ROW_HEIGHT,
-                    draggableHandle: ".drag-handle",
-                    resizeHandles: [
-                        'se'
-                    ],
-                    isDraggable: isEditMode && !hasViewPanel,
-                    isResizable: isEditMode && !hasViewPanel,
-                    margin: [
-                        DEFAULT_MARGIN,
-                        DEFAULT_MARGIN
-                    ],
-                    containerPadding: [
-                        0,
-                        10
-                    ],
-                    layouts: {
-                        [_constants.GRID_LAYOUT_SMALL_BREAKPOINT]: itemLayouts
-                    },
-                    onLayoutChange: handleLayoutChange,
-                    onWidthChange: handleWidthChange,
-                    allowOverlap: hasViewPanel,
-                    children: itemLayouts.map(({ i, w })=>/*#__PURE__*/ (0, _jsxruntime.jsx)("div", {
-                            style: {
-                                display: itemLayoutViewed !== undefined ? itemLayoutViewed === i ? 'unset' : 'none' : 'unset'
-                            },
-                            children: /*#__PURE__*/ (0, _jsxruntime.jsx)(_components.ErrorBoundary, {
-                                FallbackComponent: _components.ErrorAlert,
-                                children: /*#__PURE__*/ (0, _jsxruntime.jsx)(_GridItemContent.GridItemContent, {
-                                    panelOptions: panelOptions,
-                                    panelGroupItemId: {
-                                        panelGroupId,
-                                        panelGroupItemLayoutId: i
-                                    },
-                                    width: calculateGridItemWidth(w, gridColWidth)
-                                })
-                            })
-                        }, i))
+    return /*#__PURE__*/ (0, _jsxruntime.jsx)(_jsxruntime.Fragment, {
+        children: !groupDefinition.repeatVariable ? /*#__PURE__*/ (0, _jsxruntime.jsx)(_Row.Row, {
+            panelGroupId: panelGroupId,
+            groupDefinition: groupDefinition,
+            gridColWidth: gridColWidth,
+            panelFullHeight: panelFullHeight,
+            panelOptions: panelOptions,
+            isEditMode: isEditMode,
+            onLayoutChange: handleLayoutChange,
+            onWidthChange: handleWidthChange
+        }) : /*#__PURE__*/ (0, _jsxruntime.jsx)(RepeatGridLayout, {
+            repeatVariableName: groupDefinition.repeatVariable,
+            panelGroupId: panelGroupId,
+            groupDefinition: groupDefinition,
+            gridColWidth: gridColWidth,
+            panelFullHeight: panelFullHeight,
+            panelOptions: panelOptions,
+            isEditMode: isEditMode,
+            onLayoutChange: handleLayoutChange,
+            onWidthChange: handleWidthChange
+        })
+    });
+}
+function RepeatGridLayout({ repeatVariableName, panelGroupId, groupDefinition, gridColWidth, panelFullHeight, panelOptions, isEditMode = false, onLayoutChange, onWidthChange }) {
+    const variables = (0, _pluginsystem.useVariableValues)();
+    const variable = variables[repeatVariableName];
+    // If the variable is not defined, or if it is defined but has no values, render a standard row without repeating
+    if (variable === undefined || !Array.isArray(variable.value) || variable.value.length === 0) {
+        return /*#__PURE__*/ (0, _jsxruntime.jsx)(_Row.Row, {
+            panelGroupId: panelGroupId,
+            groupDefinition: groupDefinition,
+            gridColWidth: gridColWidth,
+            panelFullHeight: panelFullHeight,
+            panelOptions: panelOptions,
+            isEditMode: isEditMode,
+            onLayoutChange: onLayoutChange,
+            onWidthChange: onWidthChange
+        });
+    }
+    return /*#__PURE__*/ (0, _jsxruntime.jsx)(_jsxruntime.Fragment, {
+        children: variable.value.map((value)=>/*#__PURE__*/ (0, _jsxruntime.jsx)(_pluginsystem.VariableContext.Provider, {
+                value: {
+                    state: {
+                        ...variables,
+                        [repeatVariableName]: {
+                            value,
+                            loading: false
+                        }
+                    }
+                },
+                children: /*#__PURE__*/ (0, _jsxruntime.jsx)(_Row.Row, {
+                    panelGroupId: panelGroupId,
+                    groupDefinition: groupDefinition,
+                    gridColWidth: gridColWidth,
+                    panelFullHeight: panelFullHeight,
+                    panelOptions: panelOptions,
+                    isEditMode: isEditMode,
+                    onLayoutChange: onLayoutChange,
+                    onWidthChange: onWidthChange,
+                    repeatVariable: [
+                        repeatVariableName,
+                        value
+                    ]
                 })
-            })
-        ]
+            }, `${repeatVariableName}-${value}`))
     });
 }
-/**
- * Calculates grid item width
- * @param w number of columns the grid item spans
- * @param colWidth the width of each column in px
- * @returns grid item's width in px
- * https://github.com/react-grid-layout/react-grid-layout/blob/master/lib/calculateUtils.js#L14-L35
- */ const calculateGridItemWidth = (w, colWidth)=>{
-    // 0 * Infinity === NaN, which causes problems with resize contraints
-    if (!Number.isFinite(w)) return w;
-    return Math.round(colWidth * w + Math.max(0, w - 1) * DEFAULT_MARGIN);
-};

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

@@ -0,0 +1,150 @@
+// Copyright 2025 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, "Row", {
+    enumerable: true,
+    get: function() {
+        return Row;
+    }
+});
+const _jsxruntime = require("react/jsx-runtime");
+const _material = require("@mui/material");
+const _dashboards = require("@perses-dev/dashboards");
+const _react = require("react");
+const _reactgridlayout = require("react-grid-layout");
+const _components = require("@perses-dev/components");
+const _constants = require("../../constants");
+const _GridContainer = require("./GridContainer");
+const _GridItemContent = require("./GridItemContent");
+const _GridTitle = require("./GridTitle");
+const DEFAULT_MARGIN = 10;
+const ROW_HEIGHT = 30;
+function Row({ panelGroupId, groupDefinition, gridColWidth, panelFullHeight, panelOptions, isEditMode = false, onLayoutChange, onWidthChange, repeatVariable }) {
+    const ResponsiveGridLayout = (0, _react.useMemo)(()=>(0, _reactgridlayout.WidthProvider)(_reactgridlayout.Responsive), []);
+    const theme = (0, _material.useTheme)();
+    const viewPanelItemId = (0, _dashboards.useViewPanelGroup)();
+    const [isOpen, setIsOpen] = (0, _react.useState)(!groupDefinition.isCollapsed);
+    const hasViewPanel = viewPanelItemId?.panelGroupId === panelGroupId && // Check for repeatVariable panels
+    viewPanelItemId.repeatVariable?.[0] === repeatVariable?.[0] && viewPanelItemId.repeatVariable?.[1] === repeatVariable?.[1];
+    const itemLayoutViewed = viewPanelItemId?.panelGroupItemLayoutId;
+    // If there is a panel in view mode, we should hide the grid if the panel is not in the current group.
+    const isGridDisplayed = !viewPanelItemId || hasViewPanel;
+    // TODO: handle it without useEffect
+    (0, _react.useEffect)(()=>{
+        if (hasViewPanel) {
+            setIsOpen(true);
+        }
+    }, [
+        hasViewPanel
+    ]);
+    // Item layout is override if there is a panel in view mode
+    const itemLayouts = (0, _react.useMemo)(()=>{
+        if (itemLayoutViewed) {
+            return groupDefinition.itemLayouts.map((itemLayout)=>{
+                if (itemLayout.i === itemLayoutViewed) {
+                    const rowTitleHeight = 40 + 8; // 40 is the height of the row title and 8 is the margin height
+                    return {
+                        h: Math.round(((panelFullHeight ?? window.innerHeight) - rowTitleHeight) / (ROW_HEIGHT + DEFAULT_MARGIN)),
+                        i: itemLayoutViewed,
+                        w: 48,
+                        x: 0,
+                        y: 0
+                    };
+                }
+                return itemLayout;
+            });
+        }
+        return groupDefinition.itemLayouts;
+    }, [
+        groupDefinition.itemLayouts,
+        itemLayoutViewed,
+        panelFullHeight
+    ]);
+    return /*#__PURE__*/ (0, _jsxruntime.jsxs)(_GridContainer.GridContainer, {
+        sx: {
+            display: isGridDisplayed ? 'block' : 'none',
+            height: itemLayoutViewed ? `${panelFullHeight}px` : 'unset',
+            overflow: itemLayoutViewed ? 'hidden' : 'unset'
+        },
+        children: [
+            groupDefinition.title && /*#__PURE__*/ (0, _jsxruntime.jsx)(_GridTitle.GridTitle, {
+                panelGroupId: panelGroupId,
+                title: groupDefinition.title,
+                collapse: groupDefinition.isCollapsed === undefined ? undefined : {
+                    isOpen: isOpen,
+                    onToggleOpen: ()=>setIsOpen((current)=>!current)
+                }
+            }),
+            /*#__PURE__*/ (0, _jsxruntime.jsx)(_material.Collapse, {
+                in: isOpen,
+                unmountOnExit: true,
+                appear: false,
+                "data-testid": "panel-group-content",
+                children: /*#__PURE__*/ (0, _jsxruntime.jsx)(ResponsiveGridLayout, {
+                    className: "layout",
+                    breakpoints: {
+                        [_constants.GRID_LAYOUT_SMALL_BREAKPOINT]: theme.breakpoints.values.sm,
+                        xxs: 0
+                    },
+                    cols: _constants.GRID_LAYOUT_COLS,
+                    rowHeight: ROW_HEIGHT,
+                    draggableHandle: ".drag-handle",
+                    resizeHandles: [
+                        'se'
+                    ],
+                    isDraggable: isEditMode && !hasViewPanel,
+                    isResizable: isEditMode && !hasViewPanel,
+                    margin: [
+                        DEFAULT_MARGIN,
+                        DEFAULT_MARGIN
+                    ],
+                    containerPadding: [
+                        0,
+                        10
+                    ],
+                    layouts: {
+                        sm: itemLayouts
+                    },
+                    onLayoutChange: onLayoutChange,
+                    onWidthChange: onWidthChange,
+                    allowOverlap: hasViewPanel,
+                    children: itemLayouts.map(({ i, w })=>/*#__PURE__*/ (0, _jsxruntime.jsx)("div", {
+                            style: {
+                                display: itemLayoutViewed ? itemLayoutViewed === i ? 'unset' : 'none' : 'unset'
+                            },
+                            children: /*#__PURE__*/ (0, _jsxruntime.jsx)(_components.ErrorBoundary, {
+                                FallbackComponent: _components.ErrorAlert,
+                                children: /*#__PURE__*/ (0, _jsxruntime.jsx)(_GridItemContent.GridItemContent, {
+                                    panelOptions: panelOptions,
+                                    panelGroupItemId: {
+                                        panelGroupId,
+                                        panelGroupItemLayoutId: i,
+                                        repeatVariable
+                                    },
+                                    width: calculateGridItemWidth(w, gridColWidth)
+                                })
+                            })
+                        }, i))
+                })
+            })
+        ]
+    });
+}
+const calculateGridItemWidth = (w, colWidth)=>{
+    // 0 * Infinity === NaN, which causes problems with resize contraints
+    if (!Number.isFinite(w)) return w;
+    return Math.round(colWidth * w + Math.max(0, w - 1) * DEFAULT_MARGIN);
+};

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

@@ -18,6 +18,7 @@ _export_star(require("./GridContainer"), exports);
 _export_star(require("./GridItemContent"), exports);
 _export_star(require("./GridLayout"), exports);
 _export_star(require("./GridTitle"), exports);
+_export_star(require("./Row"), exports);
 function _export_star(from, to) {
     Object.keys(from).forEach(function(k) {
         if (k !== "default" && !Object.prototype.hasOwnProperty.call(to, k)) {

package/dist/cjs/components/LeaveDialog/LeaveDialog.js

@@ -0,0 +1,72 @@
+// Copyright 2025 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
+});
+function _export(target, all) {
+    for(var name in all)Object.defineProperty(target, name, {
+        enumerable: true,
+        get: all[name]
+    });
+}
+_export(exports, {
+    LeaveDialog: function() {
+        return LeaveDialog;
+    },
+    Prompt: function() {
+        return Prompt;
+    }
+});
+const _jsxruntime = require("react/jsx-runtime");
+const _react = require("react");
+const _reactrouterdom = require("react-router-dom");
+const _components = require("@perses-dev/components");
+const handleRouteChange = (event)=>{
+    event.preventDefault();
+    event.returnValue = ''; // Required for Chrome
+    return ''; // Required for other browsers
+};
+function Prompt({ isBlocked, message }) {
+    const blocker = (0, _reactrouterdom.useBlocker)(isBlocked);
+    const isBlockedState = blocker.state === 'blocked';
+    const isProceedingState = blocker.state === 'proceeding';
+    (0, _react.useEffect)(()=>{
+        if (isBlocked) {
+            window.addEventListener('beforeunload', handleRouteChange);
+        } else {
+            window.removeEventListener('beforeunload', handleRouteChange);
+        }
+        return ()=>{
+            window.removeEventListener('beforeunload', handleRouteChange);
+        };
+    }, [
+        blocker,
+        isBlocked,
+        isBlockedState
+    ]);
+    const handleDiscardChanges = ()=>blocker.proceed?.();
+    const handleCancel = ()=>blocker.reset?.();
+    return /*#__PURE__*/ (0, _jsxruntime.jsx)(_components.DiscardChangesConfirmationDialog, {
+        description: message,
+        isOpen: isBlockedState || isProceedingState,
+        onDiscardChanges: handleDiscardChanges,
+        onCancel: handleCancel
+    });
+}
+function LeaveDialog({ original, current }) {
+    return /*#__PURE__*/ (0, _jsxruntime.jsx)(Prompt, {
+        isBlocked: JSON.stringify(original) !== JSON.stringify(current),
+        message: "You have unsaved changes, are you sure you want to leave?"
+    });
+}

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

@@ -0,0 +1,30 @@
+// Copyright 2025 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
+});
+_export_star(require("./LeaveDialog"), 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];
+                }
+            });
+        }
+    });
+    return from;
+}

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

@@ -142,6 +142,8 @@ const Panel = /*#__PURE__*/ (0, _react.memo)(function Panel(props) {
     const handleMouseLeave = (e)=>{
         onMouseLeave?.(e);
     };
+    // default value for showIcons: if the dashboard is in editing mode or the panel is in fullscreen mode: 'always', otherwise 'hover'
+    const showIcons = panelOptions?.showIcons ?? (editHandlers || readHandlers?.isPanelViewed ? 'always' : 'hover');
     return /*#__PURE__*/ (0, _jsxruntime.jsxs)(_material.Card, {
         component: "section",
         sx: (0, _components.combineSx)({
@@ -175,9 +177,11 @@ const Panel = /*#__PURE__*/ (0, _react.memo)(function Panel(props) {
                 viewQueriesHandler: viewQueriesHandler,
                 links: definition.spec.links,
                 pluginActions: pluginActions,
+                showIcons: showIcons,
                 sx: {
                     paddingX: `${chartsTheme.container.padding.default}px`
-                }
+                },
+                dimension: contentDimensions
             }),
             /*#__PURE__*/ (0, _jsxruntime.jsx)(_material.CardContent, {
                 component: "figure",

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

@@ -48,7 +48,7 @@ const ConditionalBox = (0, _material.styled)(_material.Box)({
     flexGrow: 1,
     justifyContent: 'flex-end'
 });
-const PanelActions = ({ editHandlers, readHandlers, viewQueriesHandler, extra, title, description, descriptionTooltipId, links, queryResults, pluginActions = [] })=>{
+const PanelActions = ({ editHandlers, readHandlers, viewQueriesHandler, extra, title, description, descriptionTooltipId, links, queryResults, pluginActions = [], showIcons })=>{
     const descriptionAction = (0, _react.useMemo)(()=>{
         if (description && description.trim().length > 0) {
             return /*#__PURE__*/ (0, _jsxruntime.jsx)(_components.InfoTooltip, {
@@ -221,8 +221,8 @@ const PanelActions = ({ editHandlers, readHandlers, viewQueriesHandler, extra, t
             flexGrow: 1
         }
     });
-    // if the panel is in non-editing, non-fullscreen mode, show certain icons only on hover
-    const OnHover = ({ children })=>editHandlers === undefined && !readHandlers?.isPanelViewed ? /*#__PURE__*/ (0, _jsxruntime.jsx)(_material.Box, {
+    // By default, the panel header shows certain icons only on hover if the panel is in non-editing, non-fullscreen mode
+    const OnHover = ({ children })=>showIcons === 'hover' ? /*#__PURE__*/ (0, _jsxruntime.jsx)(_material.Box, {
             sx: {
                 display: 'var(--panel-hover, none)'
             },
@@ -344,7 +344,7 @@ const OverflowMenu = ({ children, title })=>{
     // do not show overflow menu if there is no content (for example, edit actions are hidden)
     const hasContent = /*#__PURE__*/ (0, _react.isValidElement)(children) || Array.isArray(children) && children.some(_react.isValidElement);
     if (!hasContent) {
-        return undefined;
+        return null;
     }
     const handleClick = (event)=>{
         setAnchorPosition(event.currentTarget.getBoundingClientRect());

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

@@ -24,13 +24,24 @@ const _jsxruntime = require("react/jsx-runtime");
 const _material = require("@mui/material");
 const _components = require("@perses-dev/components");
 const _pluginsystem = require("@perses-dev/plugin-system");
+const _react = require("react");
 const _constants = require("../../constants");
 const _PanelActions = require("./PanelActions");
-function PanelHeader({ id, title: rawTitle, description: rawDescription, links, queryResults, readHandlers, editHandlers, sx, extra, pluginActions, viewQueriesHandler, ...rest }) {
+function PanelHeader({ id, title: rawTitle, description: rawDescription, links, queryResults, readHandlers, editHandlers, sx, extra, pluginActions, showIcons, viewQueriesHandler, dimension, ...rest }) {
     const titleElementId = `${id}-title`;
     const descriptionTooltipId = `${id}-description`;
     const title = (0, _pluginsystem.useReplaceVariablesInString)(rawTitle);
     const description = (0, _pluginsystem.useReplaceVariablesInString)(rawDescription);
+    const textRef = (0, _react.useRef)(null);
+    const [isEllipsisActive, setIsEllipsisActive] = (0, _react.useState)(false);
+    (0, _react.useEffect)(()=>{
+        if (textRef.current && dimension?.width) {
+            setIsEllipsisActive(textRef.current.scrollWidth > textRef.current.clientWidth);
+        }
+    }, [
+        title,
+        dimension?.width
+    ]);
     return /*#__PURE__*/ (0, _jsxruntime.jsx)(_material.CardHeader, {
         id: id,
         component: "header",
@@ -42,19 +53,24 @@ function PanelHeader({ id, title: rawTitle, description: rawDescription, links,
             alignItems: "center",
             height: "var(--panel-header-height, 30px)",
             children: [
-                /*#__PURE__*/ (0, _jsxruntime.jsx)(_material.Typography, {
-                    id: titleElementId,
-                    variant: "subtitle1",
-                    sx: {
-                        // `minHeight` guarantees that the header has the correct height
-                        // when there is no title (i.e. in the preview)
-                        lineHeight: '24px',
-                        minHeight: '26px',
-                        whiteSpace: 'nowrap',
-                        overflow: 'hidden',
-                        textOverflow: 'ellipsis'
-                    },
-                    children: title
+                /*#__PURE__*/ (0, _jsxruntime.jsx)(_material.Tooltip, {
+                    title: title,
+                    disableHoverListener: !isEllipsisActive,
+                    children: /*#__PURE__*/ (0, _jsxruntime.jsx)(_material.Typography, {
+                        id: titleElementId,
+                        variant: "subtitle1",
+                        ref: textRef,
+                        sx: {
+                            // `minHeight` guarantees that the header has the correct height
+                            // when there is no title (i.e. in the preview)
+                            lineHeight: '24px',
+                            minHeight: '26px',
+                            whiteSpace: 'nowrap',
+                            overflow: 'hidden',
+                            textOverflow: 'ellipsis'
+                        },
+                        children: title
+                    })
                 }),
                 /*#__PURE__*/ (0, _jsxruntime.jsx)(_PanelActions.PanelActions, {
                     title: title,
@@ -66,7 +82,8 @@ function PanelHeader({ id, title: rawTitle, description: rawDescription, links,
                     viewQueriesHandler: viewQueriesHandler,
                     extra: extra,
                     queryResults: queryResults,
-                    pluginActions: pluginActions
+                    pluginActions: pluginActions,
+                    showIcons: showIcons
                 })
             ]
         }),