@perses-dev/dashboards 0.50.0 → 0.51.0-beta.0

package/dist/cjs/components/Dashboard/Dashboard.js

@@ -29,12 +29,10 @@ const _GridLayout = require("../GridLayout");
 const _EmptyDashboard = require("../EmptyDashboard");
 const HEADER_HEIGHT = 165; // Approximate height of the header in dashboard view (including the navbar and variables toolbar)
 function Dashboard({ emptyDashboardProps, panelOptions, ...boxProps }) {
-    var _boxRef_current;
     const panelGroupIds = (0, _context.usePanelGroupIds)();
     const boxRef = (0, _react.useRef)(null);
     const isEmpty = !panelGroupIds.length;
-    var _boxRef_current_getBoundingClientRect_top;
-    const dashboardTopPosition = (_boxRef_current_getBoundingClientRect_top = (_boxRef_current = boxRef.current) === null || _boxRef_current === void 0 ? void 0 : _boxRef_current.getBoundingClientRect().top) !== null && _boxRef_current_getBoundingClientRect_top !== void 0 ? _boxRef_current_getBoundingClientRect_top : HEADER_HEIGHT;
+    const dashboardTopPosition = boxRef.current?.getBoundingClientRect().top ?? HEADER_HEIGHT;
     const panelFullHeight = window.innerHeight - dashboardTopPosition - window.scrollY;
     return /*#__PURE__*/ (0, _jsxruntime.jsx)(_material.Box, {
         ...boxProps,

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

@@ -35,7 +35,7 @@ const _EditJsonButton = require("../EditJsonButton");
 const _SaveDashboardButton = require("../SaveDashboardButton");
 const _DashboardStickyToolbar = require("../DashboardStickyToolbar");
 const DashboardToolbar = (props)=>{
-    const { dashboardName, dashboardTitleComponent, initialVariableIsSticky, isReadonly, onEditButtonClick, onCancelButtonClick, onSave } = props;
+    const { dashboardName, dashboardTitleComponent, initialVariableIsSticky, isReadonly, isVariableEnabled, isDatasourceEnabled, onEditButtonClick, onCancelButtonClick, onSave } = props;
     const { isEditMode } = (0, _context.useEditMode)();
     const isBiggerThanSm = (0, _material.useMediaQuery)((0, _material.useTheme)().breakpoints.up('sm'));
     const isBiggerThanMd = (0, _material.useMediaQuery)((0, _material.useTheme)().breakpoints.up('md'));
@@ -76,8 +76,8 @@ const DashboardToolbar = (props)=>{
                                     ml: 1,
                                     whiteSpace: "nowrap",
                                     children: [
-                                        /*#__PURE__*/ (0, _jsxruntime.jsx)(_Variables.EditVariablesButton, {}),
-                                        /*#__PURE__*/ (0, _jsxruntime.jsx)(_Datasources.EditDatasourcesButton, {}),
+                                        isVariableEnabled && /*#__PURE__*/ (0, _jsxruntime.jsx)(_Variables.EditVariablesButton, {}),
+                                        isDatasourceEnabled && /*#__PURE__*/ (0, _jsxruntime.jsx)(_Datasources.EditDatasourcesButton, {}),
                                         /*#__PURE__*/ (0, _jsxruntime.jsx)(_AddPanelButton.AddPanelButton, {}),
                                         /*#__PURE__*/ (0, _jsxruntime.jsx)(_AddGroupButton.AddGroupButton, {})
                                     ]

package/dist/cjs/components/Datasources/DatasourceEditor.js

@@ -77,10 +77,9 @@ function DatasourceEditor(props) {
     };
     const editDatasource = (name)=>{
         setDatasourceFormAction('update');
-        var _datasources_name;
         setDatasourceEdit({
             name: name,
-            spec: (_datasources_name = datasources[name]) !== null && _datasources_name !== void 0 ? _datasources_name : defaultSpec
+            spec: datasources[name] ?? defaultSpec
         });
     };
     return /*#__PURE__*/ (0, _jsxruntime.jsx)(_jsxruntime.Fragment, {
@@ -176,8 +175,6 @@ function DatasourceEditor(props) {
                                             }),
                                             /*#__PURE__*/ (0, _jsxruntime.jsx)(_material.TableBody, {
                                                 children: Object.entries(datasources).map(([name, spec])=>{
-                                                    var _spec_display;
-                                                    var _spec_display_description;
                                                     return /*#__PURE__*/ (0, _jsxruntime.jsxs)(_material.TableRow, {
                                                         children: [
                                                             /*#__PURE__*/ (0, _jsxruntime.jsx)(_material.TableCell, {
@@ -192,7 +189,7 @@ function DatasourceEditor(props) {
                                                                 children: spec.plugin.kind
                                                             }),
                                                             /*#__PURE__*/ (0, _jsxruntime.jsx)(_material.TableCell, {
-                                                                children: (_spec_display_description = (_spec_display = spec.display) === null || _spec_display === void 0 ? void 0 : _spec_display.description) !== null && _spec_display_description !== void 0 ? _spec_display_description : ''
+                                                                children: spec.display?.description ?? ''
                                                             }),
                                                             /*#__PURE__*/ (0, _jsxruntime.jsxs)(_material.TableCell, {
                                                                 align: "right",

package/dist/cjs/components/Datasources/EditDatasourcesButton.js

@@ -49,13 +49,10 @@ function EditDatasourcesButton() {
     const handleChangeDatasources = (datasources)=>{
         // Calculates the new list of datasources that are allowed to be used.
         const newSavedDatasources = Object.keys(datasources).filter((key)=>{
-            var _datasources_key_plugin, _datasources_key, _savedDatasources_key_plugin, _savedDatasources_key, _datasources_key_plugin_spec, _datasources_key_plugin1, _datasources_key1, _savedDatasources_key_plugin_spec, _savedDatasources_key_plugin1, _savedDatasources_key1;
-            var _datasources_key_plugin_spec1;
             // Datasources are allowed to be used if a) they are direct, or b) they are proxied, and their
             // proxy is the same as what we have saved.
-            const isDirect = 'directUrl' in ((_datasources_key_plugin_spec1 = (_datasources_key = datasources[key]) === null || _datasources_key === void 0 ? void 0 : (_datasources_key_plugin = _datasources_key.plugin) === null || _datasources_key_plugin === void 0 ? void 0 : _datasources_key_plugin.spec) !== null && _datasources_key_plugin_spec1 !== void 0 ? _datasources_key_plugin_spec1 : {});
-            var _savedDatasources_key_plugin_spec1;
-            const isSavedProxy = !isDirect && !('directUrl' in ((_savedDatasources_key_plugin_spec1 = (_savedDatasources_key = savedDatasources[key]) === null || _savedDatasources_key === void 0 ? void 0 : (_savedDatasources_key_plugin = _savedDatasources_key.plugin) === null || _savedDatasources_key_plugin === void 0 ? void 0 : _savedDatasources_key_plugin.spec) !== null && _savedDatasources_key_plugin_spec1 !== void 0 ? _savedDatasources_key_plugin_spec1 : {})) && ((_datasources_key1 = datasources[key]) === null || _datasources_key1 === void 0 ? void 0 : (_datasources_key_plugin1 = _datasources_key1.plugin) === null || _datasources_key_plugin1 === void 0 ? void 0 : (_datasources_key_plugin_spec = _datasources_key_plugin1.spec) === null || _datasources_key_plugin_spec === void 0 ? void 0 : _datasources_key_plugin_spec.proxy) === ((_savedDatasources_key1 = savedDatasources[key]) === null || _savedDatasources_key1 === void 0 ? void 0 : (_savedDatasources_key_plugin1 = _savedDatasources_key1.plugin) === null || _savedDatasources_key_plugin1 === void 0 ? void 0 : (_savedDatasources_key_plugin_spec = _savedDatasources_key_plugin1.spec) === null || _savedDatasources_key_plugin_spec === void 0 ? void 0 : _savedDatasources_key_plugin_spec.proxy);
+            const isDirect = 'directUrl' in (datasources[key]?.plugin?.spec ?? {});
+            const isSavedProxy = !isDirect && !('directUrl' in (savedDatasources[key]?.plugin?.spec ?? {})) && datasources[key]?.plugin?.spec?.proxy === savedDatasources[key]?.plugin?.spec?.proxy;
             return isDirect || isSavedProxy;
         }).reduce((obj, key)=>{
             obj[key] = datasources[key];

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

@@ -40,11 +40,13 @@ const DeletePanelDialog = ()=>{
 };
 const DeletePanelForm = ({ deletePanelDialog })=>{
     const { deletePanel, closeDeletePanelDialog } = (0, _context.useDeletePanelDialog)();
+    const { setViewPanel } = (0, _context.useViewPanel)();
     const handleDelete = (e)=>{
         e.preventDefault();
         const { panelGroupItemId } = deletePanelDialog;
         deletePanel(panelGroupItemId);
         closeDeletePanelDialog();
+        setViewPanel(undefined);
     };
     return /*#__PURE__*/ (0, _jsxruntime.jsxs)("form", {
         onSubmit: handleDelete,

package/dist/cjs/components/DeletePanelGroupDialog/DeletePanelGroupDialog.js

@@ -31,7 +31,8 @@ function _interop_require_default(obj) {
 }
 const DeletePanelGroupDialog = ()=>{
     const { deletePanelGroupDialog, closeDeletePanelGroupDialog, deletePanelGroup } = (0, _context.useDeletePanelGroupDialog)();
-    const panelGroupId = deletePanelGroupDialog === null || deletePanelGroupDialog === void 0 ? void 0 : deletePanelGroupDialog.panelGroupId;
+    const { setViewPanel } = (0, _context.useViewPanel)();
+    const panelGroupId = deletePanelGroupDialog?.panelGroupId;
     const handleDelete = (e)=>{
         e.preventDefault();
         if (panelGroupId === undefined) {
@@ -39,8 +40,8 @@ const DeletePanelGroupDialog = ()=>{
         }
         deletePanelGroup(panelGroupId);
         closeDeletePanelGroupDialog();
+        setViewPanel(undefined);
     };
-    var _deletePanelGroupDialog_panelGroupName;
     return /*#__PURE__*/ (0, _jsxruntime.jsxs)(_material.Dialog, {
         open: deletePanelGroupDialog !== undefined,
         children: [
@@ -67,7 +68,7 @@ const DeletePanelGroupDialog = ()=>{
                         },
                         children: [
                             "Are you sure you want to delete ",
-                            (_deletePanelGroupDialog_panelGroupName = deletePanelGroupDialog === null || deletePanelGroupDialog === void 0 ? void 0 : deletePanelGroupDialog.panelGroupName) !== null && _deletePanelGroupDialog_panelGroupName !== void 0 ? _deletePanelGroupDialog_panelGroupName : 'panel group',
+                            deletePanelGroupDialog?.panelGroupName ?? 'panel group',
                             "? This will delete all the panels within the group."
                         ]
                     }),

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

@@ -21,53 +21,159 @@ Object.defineProperty(exports, "DownloadButton", {
     }
 });
 const _jsxruntime = require("react/jsx-runtime");
-const _react = require("react");
-const _DownloadOutline = /*#__PURE__*/ _interop_require_default(require("mdi-material-ui/DownloadOutline"));
+const _material = require("@mui/material");
 const _components = require("@perses-dev/components");
-const _constants = require("../../constants");
+const _DownloadOutline = /*#__PURE__*/ _interop_require_default(require("mdi-material-ui/DownloadOutline"));
+const _react = /*#__PURE__*/ _interop_require_wildcard(require("react"));
+const _yaml = require("yaml");
 const _context = require("../../context");
 function _interop_require_default(obj) {
     return obj && obj.__esModule ? obj : {
         default: obj
     };
 }
-function DownloadButton({ heightPx }) {
+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 _interop_require_wildcard(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 = {
+        __proto__: null
+    };
+    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 height = heightPx === undefined ? undefined : `${heightPx}px`;
-    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);
+    const [anchorEl, setAnchorEl] = _react.default.useState(null);
+    const open = Boolean(anchorEl);
+    const handleClick = (event)=>{
+        setAnchorEl(event.currentTarget);
     };
+    const handleItemClick = (format, shape)=>()=>{
+            setAnchorEl(null);
+            let type, content = '';
+            switch(format){
+                case 'json':
+                    type = 'application/json';
+                    content = JSON.stringify(dashboard, null, 2);
+                    break;
+                case 'yaml':
+                    {
+                        type = 'application/yaml';
+                        if (shape === 'cr') {
+                            const name = dashboard.metadata.name.toLowerCase().replace(/[^a-z0-9-]/g, '-');
+                            content = (0, _yaml.stringify)({
+                                apiVersion: 'perses.dev/v1alpha1',
+                                kind: 'PersesDashboard',
+                                metadata: {
+                                    labels: {
+                                        'app.kubernetes.io/name': 'perses-dashboard',
+                                        'app.kubernetes.io/instance': name,
+                                        'app.kubernetes.io/part-of': 'perses-operator'
+                                    },
+                                    name
+                                },
+                                namespace: dashboard.metadata.project,
+                                spec: dashboard.spec
+                            });
+                        } else {
+                            content = (0, _yaml.stringify)(dashboard);
+                        }
+                    }
+                    break;
+            }
+            if (!hiddenLinkRef || !hiddenLinkRef.current) return;
+            // Create blob URL
+            const hiddenLinkUrl = URL.createObjectURL(new Blob([
+                content
+            ], {
+                type
+            }));
+            // Simulate click
+            hiddenLinkRef.current.download = `${dashboard.metadata.name}${shape === 'cr' ? '-cr' : ''}.${format}`;
+            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)(_components.InfoTooltip, {
-                description: _constants.TOOLTIP_TEXT.downloadDashboard,
-                children: /*#__PURE__*/ (0, _jsxruntime.jsx)(_components.ToolbarIconButton, {
-                    "aria-label": _constants.TOOLTIP_TEXT.downloadDashboard,
-                    onClick: onDownloadButtonClick,
-                    sx: {
-                        height
-                    },
-                    children: /*#__PURE__*/ (0, _jsxruntime.jsx)(_DownloadOutline.default, {})
+            /*#__PURE__*/ (0, _jsxruntime.jsx)(_components.ToolbarIconButton, {
+                id: "download-dashboard-button",
+                "aria-controls": open ? 'basic-menu' : undefined,
+                "aria-haspopup": "true",
+                "aria-expanded": open ? 'true' : undefined,
+                onClick: handleClick,
+                children: /*#__PURE__*/ (0, _jsxruntime.jsx)(_DownloadOutline.default, {})
+            }),
+            /*#__PURE__*/ (0, _jsxruntime.jsx)(_material.Menu, {
+                id: "download-dashboard-formats",
+                anchorEl: anchorEl,
+                open: open,
+                hideBackdrop: true,
+                onClose: ()=>setAnchorEl(null),
+                MenuListProps: {
+                    'aria-labelledby': 'download-dashboard-button'
+                },
+                children: /*#__PURE__*/ (0, _jsxruntime.jsx)("div", {
+                    children: /*#__PURE__*/ (0, _jsxruntime.jsx)(_material.ClickAwayListener, {
+                        onClickAway: ()=>setAnchorEl(null),
+                        children: /*#__PURE__*/ (0, _jsxruntime.jsxs)(_material.MenuList, {
+                            children: [
+                                /*#__PURE__*/ (0, _jsxruntime.jsx)(_material.MenuItem, {
+                                    onClick: handleItemClick('json'),
+                                    children: "JSON"
+                                }),
+                                /*#__PURE__*/ (0, _jsxruntime.jsx)(_material.MenuItem, {
+                                    onClick: handleItemClick('yaml'),
+                                    children: "YAML"
+                                }),
+                                /*#__PURE__*/ (0, _jsxruntime.jsx)(_material.MenuItem, {
+                                    onClick: handleItemClick('yaml', 'cr'),
+                                    children: "YAML (CR)"
+                                })
+                            ]
+                        })
+                    })
                 })
             }),
             /*#__PURE__*/ (0, _jsxruntime.jsx)("a", {
                 ref: hiddenLinkRef,
                 style: {
                     display: 'none'
-                },
-                download: `${dashboard.metadata.name}.json`
+                }
             })
         ]
     });

package/dist/cjs/components/EditJsonDialog/EditJsonDialog.js

@@ -30,7 +30,7 @@ const EditJsonDialog = (props)=>{
     const { isReadonly, disableMetadataEdition } = props;
     const { editJsonDialog, closeEditJsonDialog } = (0, _context.useEditJsonDialog)();
     return /*#__PURE__*/ (0, _jsxruntime.jsxs)(_components.Dialog, {
-        open: !!(editJsonDialog === null || editJsonDialog === void 0 ? void 0 : editJsonDialog.isOpen),
+        open: !!editJsonDialog?.isOpen,
         scroll: "paper",
         fullWidth: true,
         maxWidth: "lg",
@@ -42,7 +42,7 @@ const EditJsonDialog = (props)=>{
                     " Dashboard JSON"
                 ]
             }),
-            (editJsonDialog === null || editJsonDialog === void 0 ? void 0 : editJsonDialog.isOpen) && /*#__PURE__*/ (0, _jsxruntime.jsx)(EditJsonDialogForm, {
+            editJsonDialog?.isOpen && /*#__PURE__*/ (0, _jsxruntime.jsx)(EditJsonDialogForm, {
                 isReadonly: isReadonly,
                 disableMetadataEdition: disableMetadataEdition
             })
@@ -62,15 +62,13 @@ const EditJsonDialogForm = (props)=>{
         setTimeRange({
             pastDuration: draftDashboard.spec.duration
         });
-        var _draftDashboard_spec_refreshInterval;
-        setRefreshInterval((_draftDashboard_spec_refreshInterval = draftDashboard.spec.refreshInterval) !== null && _draftDashboard_spec_refreshInterval !== void 0 ? _draftDashboard_spec_refreshInterval : '0s');
-        var _draftDashboard_spec_datasources;
-        setLocalDatasources((_draftDashboard_spec_datasources = draftDashboard.spec.datasources) !== null && _draftDashboard_spec_datasources !== void 0 ? _draftDashboard_spec_datasources : {});
+        setRefreshInterval(draftDashboard.spec.refreshInterval ?? '0s');
+        setLocalDatasources(draftDashboard.spec.datasources ?? {});
         closeEditJsonDialog();
     };
     const completeDraftDashboard = (dashboard)=>{
         try {
-            const json = JSON.parse(dashboard !== null && dashboard !== void 0 ? dashboard : '{}');
+            const json = JSON.parse(dashboard ?? '{}');
             setDraftDashboard(json);
         } catch (_) {
         // do nothing

package/dist/cjs/components/EmptyDashboard/EmptyDashboard.js

@@ -105,7 +105,7 @@ const EmptyDashboard = ({ title = DEFAULT_TITLE, image, description, additionalT
                     }),
                     /*#__PURE__*/ (0, _jsxruntime.jsx)(_material.Typography, {
                         variant: "body1",
-                        children: description !== null && description !== void 0 ? description : defaultDescription
+                        children: description ?? defaultDescription
                     }),
                     actionsContent && /*#__PURE__*/ (0, _jsxruntime.jsx)(_material.Box, {
                         sx: {

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

@@ -33,7 +33,7 @@ function GridItemContent(props) {
     const { spec: { queries } } = panelDefinition;
     const { isEditMode } = (0, _context.useEditMode)();
     const { openEditPanel, openDeletePanelDialog, duplicatePanel, viewPanel } = (0, _context.usePanelActions)(panelGroupItemId);
-    const viewPanelGroupItemId = (0, _context.useViewPanel)();
+    const viewPanelGroupItemId = (0, _context.useViewPanelGroup)();
     const { ref, inView } = (0, _reactintersectionobserver.useInView)({
         threshold: 0.2,
         initialInView: false,
@@ -61,13 +61,14 @@ function GridItemContent(props) {
     // map TimeSeriesQueryDefinition to Definition<UnknownSpec>
     const suggestedStepMs = (0, _pluginsystem.useSuggestedStepMs)(width);
     const { data: plugin } = (0, _pluginsystem.usePlugin)('Panel', panelDefinition.spec.plugin.kind);
-    const queryDefinitions = queries !== null && queries !== void 0 ? queries : [];
+    const queryDefinitions = queries ?? [];
     const definitions = queryDefinitions.map((query)=>{
         return {
             kind: query.spec.plugin.kind,
             spec: query.spec.plugin.spec
         };
     });
+    const pluginQueryOptions = typeof plugin?.queryOptions === 'function' ? plugin?.queryOptions(panelDefinition.spec.plugin.spec) : plugin?.queryOptions;
     return /*#__PURE__*/ (0, _jsxruntime.jsx)(_material.Box, {
         ref: ref,
         sx: {
@@ -78,7 +79,7 @@ function GridItemContent(props) {
             definitions: definitions,
             options: {
                 suggestedStepMs,
-                ...plugin === null || plugin === void 0 ? void 0 : plugin.queryOptions
+                ...pluginQueryOptions
             },
             queryOptions: {
                 enabled: inView

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

@@ -37,13 +37,12 @@ function GridLayout(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 [isOpen, setIsOpen] = (0, _react.useState)(!groupDefinition.isCollapsed);
     const { isEditMode } = (0, _context.useEditMode)();
     const [gridColWidth, setGridColWidth] = (0, _react.useState)(0);
-    const viewPanelItemId = (0, _context.useViewPanel)();
-    const hasViewPanel = (viewPanelItemId === null || viewPanelItemId === void 0 ? void 0 : viewPanelItemId.panelGroupId) === panelGroupId; // current panelGroup contains the panel extended?
-    const itemLayoutViewed = viewPanelItemId === null || viewPanelItemId === void 0 ? void 0 : viewPanelItemId.panelGroupItemLayoutId;
+    const viewPanelItemId = (0, _context.useViewPanelGroup)();
+    const hasViewPanel = viewPanelItemId?.panelGroupId === panelGroupId; // current panelGroup contains the panel extended?
+    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 = (0, _react.useMemo)(()=>{
         if (viewPanelItemId === undefined) {
@@ -64,7 +63,7 @@ function GridLayout(props) {
                 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 !== null && panelFullHeight !== void 0 ? panelFullHeight : window.innerHeight) - rowTitleHeight) / (ROW_HEIGHT + DEFAULT_MARGIN)),
+                        h: Math.round(((panelFullHeight ?? window.innerHeight) - rowTitleHeight) / (ROW_HEIGHT + DEFAULT_MARGIN)),
                         i: itemLayoutViewed,
                         w: 48,
                         x: 0,

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

@@ -49,7 +49,7 @@ function GridTitle(props) {
         children: title
     });
     return /*#__PURE__*/ (0, _jsxruntime.jsx)(_material.Box, {
-        onClick: collapse === null || collapse === void 0 ? void 0 : collapse.onToggleOpen,
+        onClick: collapse?.onToggleOpen,
         sx: {
             display: 'flex',
             justifyContent: 'start',
@@ -116,7 +116,7 @@ function GridTitle(props) {
                                 onClick: (e)=>{
                                     // Don't trigger expand/collapse
                                     e.stopPropagation();
-                                    moveDown === null || moveDown === void 0 ? void 0 : moveDown();
+                                    moveDown?.();
                                 },
                                 children: /*#__PURE__*/ (0, _jsxruntime.jsx)(_ArrowDown.default, {})
                             })
@@ -129,7 +129,7 @@ function GridTitle(props) {
                                 onClick: (e)=>{
                                     // Don't trigger expand/collapse
                                     e.stopPropagation();
-                                    moveUp === null || moveUp === void 0 ? void 0 : moveUp();
+                                    moveUp?.();
                                 },
                                 children: /*#__PURE__*/ (0, _jsxruntime.jsx)(_ArrowUp.default, {})
                             })

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

@@ -0,0 +1,27 @@
+// 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, "HeaderIconButton", {
+    enumerable: true,
+    get: function() {
+        return HeaderIconButton;
+    }
+});
+const _material = require("@mui/material");
+const HeaderIconButton = (0, _material.styled)(_material.IconButton)(({ theme })=>({
+        borderRadius: theme.shape.borderRadius,
+        padding: '4px'
+    }));

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

@@ -21,19 +21,19 @@ Object.defineProperty(exports, "Panel", {
     }
 });
 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 _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");
+const _PanelHeader = require("./PanelHeader");
 function _interop_require_default(obj) {
     return obj && obj.__esModule ? obj : {
         default: obj
     };
 }
 const Panel = /*#__PURE__*/ (0, _react.memo)(function Panel(props) {
-    var _panelOptions_extra;
     const { definition, readHandlers, 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');
@@ -53,11 +53,12 @@ const Panel = /*#__PURE__*/ (0, _react.memo)(function Panel(props) {
         height
     ]);
     const chartsTheme = (0, _components.useChartsTheme)();
+    const { queryResults } = (0, _pluginsystem.useDataQueriesContext)();
     const handleMouseEnter = (e)=>{
-        onMouseEnter === null || onMouseEnter === void 0 ? void 0 : onMouseEnter(e);
+        onMouseEnter?.(e);
     };
     const handleMouseLeave = (e)=>{
-        onMouseLeave === null || onMouseLeave === void 0 ? void 0 : onMouseLeave(e);
+        onMouseLeave?.(e);
     };
     return /*#__PURE__*/ (0, _jsxruntime.jsxs)(_material.Card, {
         component: "section",
@@ -65,7 +66,10 @@ const Panel = /*#__PURE__*/ (0, _react.memo)(function Panel(props) {
             width: '100%',
             height: '100%',
             display: 'flex',
-            flexFlow: 'column nowrap'
+            flexFlow: 'column nowrap',
+            ':hover': {
+                '--panel-hover': 'block'
+            }
         }, sx),
         variant: "outlined",
         onMouseEnter: handleMouseEnter,
@@ -75,14 +79,15 @@ const Panel = /*#__PURE__*/ (0, _react.memo)(function Panel(props) {
         "data-testid": "panel",
         ...others,
         children: [
-            !(panelOptions === null || panelOptions === void 0 ? void 0 : panelOptions.hideHeader) && /*#__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, {
+            !panelOptions?.hideHeader && /*#__PURE__*/ (0, _jsxruntime.jsx)(_PanelHeader.PanelHeader, {
+                extra: panelOptions?.extra?.({
                     panelDefinition: definition,
                     panelGroupItemId
                 }),
                 id: headerId,
                 title: definition.spec.display.name,
                 description: definition.spec.display.description,
+                queryResults: queryResults,
                 readHandlers: readHandlers,
                 editHandlers: editHandlers,
                 links: definition.spec.links,
@@ -113,7 +118,8 @@ const Panel = /*#__PURE__*/ (0, _react.memo)(function Panel(props) {
                         definition: definition,
                         panelPluginKind: definition.spec.plugin.kind,
                         spec: definition.spec.plugin.spec,
-                        contentDimensions: contentDimensions
+                        contentDimensions: contentDimensions,
+                        queryResults: queryResults
                     })
                 })
             })