@perses-dev/dashboards 0.0.0-snapshot-scatterplot-fix-imports-95e1b59 → 0.0.0-snapshot-explorer-plugin-c4a7621

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

@@ -23,17 +23,23 @@ Object.defineProperty(exports, "Dashboard", {
 const _jsxruntime = require("react/jsx-runtime");
 const _material = require("@mui/material");
 const _components = require("@perses-dev/components");
+const _react = require("react");
 const _context = require("../../context");
 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 }) {
     const panelGroupIds = (0, _context.usePanelGroupIds)();
+    const boxRef = (0, _react.useRef)(null);
     const isEmpty = !panelGroupIds.length;
+    const dashboardTopPosition = boxRef.current?.getBoundingClientRect().top ?? HEADER_HEIGHT;
+    const panelFullHeight = window.innerHeight - dashboardTopPosition - window.scrollY;
     return /*#__PURE__*/ (0, _jsxruntime.jsx)(_material.Box, {
         ...boxProps,
         sx: {
             height: '100%'
         },
+        ref: boxRef,
         children: /*#__PURE__*/ (0, _jsxruntime.jsxs)(_components.ErrorBoundary, {
             FallbackComponent: _components.ErrorAlert,
             children: [
@@ -49,7 +55,8 @@ function Dashboard({ emptyDashboardProps, panelOptions, ...boxProps }) {
                 }),
                 !isEmpty && panelGroupIds.map((panelGroupId)=>/*#__PURE__*/ (0, _jsxruntime.jsx)(_GridLayout.GridLayout, {
                         panelGroupId: panelGroupId,
-                        panelOptions: panelOptions
+                        panelOptions: panelOptions,
+                        panelFullHeight: panelFullHeight
                     }, panelGroupId))
             ]
         })

package/dist/cjs/components/DashboardStickyToolbar/DashboardStickyToolbar.js

@@ -1,4 +1,4 @@
-// Copyright 2023 The Perses Authors
+// Copyright 2024 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
@@ -84,7 +84,7 @@ function DashboardStickyToolbar(props) {
                         },
                         gap: 1,
                         children: [
-                            /*#__PURE__*/ (0, _jsxruntime.jsx)(_Variables.TemplateVariableList, {}),
+                            /*#__PURE__*/ (0, _jsxruntime.jsx)(_Variables.VariableList, {}),
                             props.initialVariableIsSticky && /*#__PURE__*/ (0, _jsxruntime.jsx)(_material.IconButton, {
                                 style: {
                                     width: 'fit-content',

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

@@ -63,7 +63,7 @@ const DashboardToolbar = (props)=>{
                             ml: "auto",
                             children: [
                                 isReadonly && /*#__PURE__*/ (0, _jsxruntime.jsx)(_material.Alert, {
-                                    severity: 'warning',
+                                    severity: "warning",
                                     sx: {
                                         backgroundColor: 'transparent',
                                         padding: 0

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

@@ -77,27 +77,29 @@ 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, {
-        children: datasourceEdit ? /*#__PURE__*/ (0, _jsxruntime.jsx)(_pluginsystem.DatasourceEditorForm, {
-            initialDatasourceDefinition: datasourceEdit,
-            initialAction: datasourceFormAction,
-            isDraft: true,
-            onSave: (name, spec)=>{
-                setDatasources((draft)=>{
-                    delete draft[datasourceEdit.name]; // to tackle the case where datasource name has been changed
-                    draft[name] = spec;
+        children: datasourceEdit ? /*#__PURE__*/ (0, _jsxruntime.jsx)(_pluginsystem.ValidationProvider, {
+            children: /*#__PURE__*/ (0, _jsxruntime.jsx)(_pluginsystem.DatasourceEditorForm, {
+                initialDatasourceDefinition: datasourceEdit,
+                action: datasourceFormAction,
+                isDraft: true,
+                onActionChange: setDatasourceFormAction,
+                onSave: (def)=>{
+                    setDatasources((draft)=>{
+                        delete draft[datasourceEdit.name]; // to tackle the case where datasource name has been changed
+                        draft[def.name] = def.spec;
+                        setDatasourceEdit(null);
+                    });
+                },
+                onClose: ()=>{
                     setDatasourceEdit(null);
-                });
-            },
-            onClose: ()=>{
-                setDatasourceEdit(null);
-            }
+                }
+            })
         }) : /*#__PURE__*/ (0, _jsxruntime.jsxs)(_jsxruntime.Fragment, {
             children: [
                 /*#__PURE__*/ (0, _jsxruntime.jsxs)(_material.Box, {
@@ -173,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, {
@@ -189,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/DeletePanelGroupDialog/DeletePanelGroupDialog.js

@@ -31,16 +31,15 @@ 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 panelGroupId = deletePanelGroupDialog?.panelGroupId;
     const handleDelete = (e)=>{
         e.preventDefault();
-        if (panelGroupId == undefined) {
+        if (panelGroupId === undefined) {
             throw new Error('group index is undefined');
         }
         deletePanelGroup(panelGroupId);
         closeDeletePanelGroupDialog();
     };
-    var _deletePanelGroupDialog_panelGroupName;
     return /*#__PURE__*/ (0, _jsxruntime.jsxs)(_material.Dialog, {
         open: deletePanelGroupDialog !== undefined,
         children: [
@@ -67,7 +66,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/EditJsonDialog/EditJsonDialog.js

@@ -25,13 +25,12 @@ const _react = require("react");
 const _material = require("@mui/material");
 const _components = require("@perses-dev/components");
 const _pluginsystem = require("@perses-dev/plugin-system");
-const _DashboardProvider = require("../../context/DashboardProvider");
-const _useDashboard = require("../../context/useDashboard");
+const _context = require("../../context");
 const EditJsonDialog = (props)=>{
     const { isReadonly, disableMetadataEdition } = props;
-    const { editJsonDialog, closeEditJsonDialog } = (0, _DashboardProvider.useEditJsonDialog)();
+    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",
@@ -43,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
             })
@@ -52,9 +51,9 @@ const EditJsonDialog = (props)=>{
 };
 const EditJsonDialogForm = (props)=>{
     const { isReadonly, disableMetadataEdition } = props;
-    const { closeEditJsonDialog } = (0, _DashboardProvider.useEditJsonDialog)();
+    const { closeEditJsonDialog } = (0, _context.useEditJsonDialog)();
     const { setTimeRange, setRefreshInterval } = (0, _pluginsystem.useTimeRange)();
-    const { dashboard, setDashboard } = (0, _useDashboard.useDashboard)();
+    const { dashboard, setDashboard } = (0, _context.useDashboard)();
     const { setLocalDatasources } = (0, _pluginsystem.useDatasourceStore)();
     const [draftDashboard, setDraftDashboard] = (0, _react.useState)(dashboard);
     const handleApply = (e)=>{
@@ -63,17 +62,15 @@ 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 (e) {
+        } catch (_) {
         // do nothing
         }
     };

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

@@ -32,7 +32,7 @@ const DEFAULT_DESCRIPTION = {
     view: 'This dashboard is currently empty. Get started by clicking the edit button.'
 };
 // Constants from specifics in designs to make the default messaging look good.
-const CONTAINER_WIDTH = '450px';
+const CONTAINER_WIDTH = '500px';
 const PRIMARY_CONTENT_WIDTH = '289px';
 const COMMON_BUTTON_PROPS = {
     variant: 'outlined',
@@ -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/GridContainer.js

@@ -33,17 +33,22 @@ function GridContainer(props) {
         isFirstRender
     ]);
     return /*#__PURE__*/ (0, _jsxruntime.jsx)(ReactGridLayoutContainer, {
-        sx: {
-            // This adds spcing between grids (rows) in the overall dashboard
-            '& + &': {
-                marginTop: (theme)=>theme.spacing(1)
+        sx: [
+            {
+                // This adds spacing between grids (rows) in the overall dashboard
+                '& + &': {
+                    marginTop: 1
+                },
+                // This disables the animation of grid items when a grid is first rendered
+                // (see https://github.com/react-grid-layout/react-grid-layout/issues/103)
+                '& .react-grid-item.cssTransforms': {
+                    transitionProperty: isFirstRender ? 'none' : 'transform'
+                }
             },
-            // This disables the animation of grid items when a grid is first rendered
-            // (see https://github.com/react-grid-layout/react-grid-layout/issues/103)
-            '& .react-grid-item.cssTransforms': {
-                transitionProperty: isFirstRender ? 'none' : 'transform'
-            }
-        },
+            ...Array.isArray(props.sx) ? props.sx : [
+                props.sx
+            ]
+        ],
         "data-testid": "panel-group",
         children: props.children
     });

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

@@ -25,18 +25,30 @@ const _material = require("@mui/material");
 const _reactintersectionobserver = require("react-intersection-observer");
 const _pluginsystem = require("@perses-dev/plugin-system");
 const _context = require("../../context");
-const _Panel = require("../Panel/Panel");
+const _Panel = require("../Panel");
+const _panelgroupslice = require("../../context/DashboardProvider/panel-group-slice");
 function GridItemContent(props) {
     const { panelGroupItemId, width } = props;
     const panelDefinition = (0, _context.usePanel)(panelGroupItemId);
     const { spec: { queries } } = panelDefinition;
     const { isEditMode } = (0, _context.useEditMode)();
-    const { openEditPanel, openDeletePanelDialog, duplicatePanel } = (0, _context.usePanelActions)(panelGroupItemId);
+    const { openEditPanel, openDeletePanelDialog, duplicatePanel, viewPanel } = (0, _context.usePanelActions)(panelGroupItemId);
+    const viewPanelGroupItemId = (0, _context.useViewPanel)();
     const { ref, inView } = (0, _reactintersectionobserver.useInView)({
         threshold: 0.2,
         initialInView: false,
         triggerOnce: true
     });
+    const readHandlers = {
+        isPanelViewed: (0, _panelgroupslice.isPanelGroupItemIdEqual)(viewPanelGroupItemId, panelGroupItemId),
+        onViewPanelClick: function() {
+            if (viewPanelGroupItemId === undefined) {
+                viewPanel(panelGroupItemId);
+            } else {
+                viewPanel(undefined);
+            }
+        }
+    };
     // Provide actions to the panel when in edit mode
     let editHandlers = undefined;
     if (isEditMode) {
@@ -48,7 +60,8 @@ function GridItemContent(props) {
     }
     // map TimeSeriesQueryDefinition to Definition<UnknownSpec>
     const suggestedStepMs = (0, _pluginsystem.useSuggestedStepMs)(width);
-    const queryDefinitions = queries !== null && queries !== void 0 ? queries : [];
+    const { data: plugin } = (0, _pluginsystem.usePlugin)('Panel', panelDefinition.spec.plugin.kind);
+    const queryDefinitions = queries ?? [];
     const definitions = queryDefinitions.map((query)=>{
         return {
             kind: query.spec.plugin.kind,
@@ -64,13 +77,15 @@ function GridItemContent(props) {
         children: /*#__PURE__*/ (0, _jsxruntime.jsx)(_pluginsystem.DataQueriesProvider, {
             definitions: definitions,
             options: {
-                suggestedStepMs
+                suggestedStepMs,
+                ...plugin?.queryOptions
             },
             queryOptions: {
                 enabled: inView
             },
             children: inView && /*#__PURE__*/ (0, _jsxruntime.jsx)(_Panel.Panel, {
                 definition: panelDefinition,
+                readHandlers: readHandlers,
                 editHandlers: editHandlers,
                 panelOptions: props.panelOptions,
                 panelGroupItemId: panelGroupItemId

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

@@ -31,23 +31,61 @@ const _GridTitle = require("./GridTitle");
 const _GridItemContent = require("./GridItemContent");
 const _GridContainer = require("./GridContainer");
 const DEFAULT_MARGIN = 10;
-const ResponsiveGridLayout = (0, _reactgridlayout.WidthProvider)(_reactgridlayout.Responsive);
+const ROW_HEIGHT = 30;
 function GridLayout(props) {
-    const { panelGroupId/*...others */  } = props;
+    const { panelGroupId, panelOptions, panelFullHeight } = 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 ?? true);
     const { isEditMode } = (0, _context.useEditMode)();
     const [gridColWidth, setGridColWidth] = (0, _react.useState)(0);
+    const viewPanelItemId = (0, _context.useViewPanel)();
+    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) {
+            return true;
+        }
+        if (hasViewPanel) {
+            setIsOpen(true);
+        }
+        return hasViewPanel;
+    }, [
+        hasViewPanel,
+        viewPanelItemId
+    ]);
+    // 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
         // when going to a smaller breakpoint and then back to a larger breakpoint.
         // https://github.com/react-grid-layout/react-grid-layout/issues/1663
         const smallLayout = allLayouts[_constants.GRID_LAYOUT_SMALL_BREAKPOINT];
-        if (smallLayout) {
+        if (smallLayout && !hasViewPanel) {
             updatePanelGroupLayouts(smallLayout);
         }
     };
@@ -61,7 +99,14 @@ 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,
@@ -83,13 +128,13 @@ function GridLayout(props) {
                         xxs: 0
                     },
                     cols: _constants.GRID_LAYOUT_COLS,
-                    rowHeight: 30,
-                    draggableHandle: '.drag-handle',
+                    rowHeight: ROW_HEIGHT,
+                    draggableHandle: ".drag-handle",
                     resizeHandles: [
                         'se'
                     ],
-                    isDraggable: isEditMode,
-                    isResizable: isEditMode,
+                    isDraggable: isEditMode && !hasViewPanel,
+                    isResizable: isEditMode && !hasViewPanel,
                     margin: [
                         DEFAULT_MARGIN,
                         DEFAULT_MARGIN
@@ -99,15 +144,19 @@ function GridLayout(props) {
                         10
                     ],
                     layouts: {
-                        [_constants.GRID_LAYOUT_SMALL_BREAKPOINT]: groupDefinition.itemLayouts
+                        [_constants.GRID_LAYOUT_SMALL_BREAKPOINT]: itemLayouts
                     },
                     onLayoutChange: handleLayoutChange,
                     onWidthChange: handleWidthChange,
-                    children: groupDefinition.itemLayouts.map(({ i, w })=>/*#__PURE__*/ (0, _jsxruntime.jsx)("div", {
+                    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: props.panelOptions,
+                                    panelOptions: panelOptions,
                                     panelGroupItemId: {
                                         panelGroupId,
                                         panelGroupItemLayoutId: i

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 && 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 && moveUp();
+                                    moveUp?.();
                                 },
                                 children: /*#__PURE__*/ (0, _jsxruntime.jsx)(_ArrowUp.default, {})
                             })

package/dist/cjs/{validation/panel.js → components/Panel/HeaderIconButton.js}

@@ -1,4 +1,4 @@
-// Copyright 2023 The Perses Authors
+// 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
@@ -14,16 +14,14 @@
 Object.defineProperty(exports, "__esModule", {
     value: true
 });
-Object.defineProperty(exports, "panelEditorValidationSchema", {
+Object.defineProperty(exports, "HeaderIconButton", {
     enumerable: true,
     get: function() {
-        return panelEditorValidationSchema;
+        return HeaderIconButton;
     }
 });
-const _zod = require("zod");
-const panelEditorValidationSchema = _zod.z.object({
-    name: _zod.z.string().nonempty('Required'),
-    groupId: _zod.z.number(),
-    description: _zod.z.string().optional(),
-    type: _zod.z.string().nonempty('Required')
-});
+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,20 +21,19 @@ Object.defineProperty(exports, "Panel", {
     }
 });
 const _jsxruntime = require("react/jsx-runtime");
+const _material = require("@mui/material");
+const _components = require("@perses-dev/components");
 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, editHandlers, onMouseEnter, onMouseLeave, sx, panelOptions, panelGroupItemId, ...others } = props;
+    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');
     const headerId = `${generatedPanelId}-header`;
@@ -54,10 +53,10 @@ const Panel = /*#__PURE__*/ (0, _react.memo)(function Panel(props) {
     ]);
     const chartsTheme = (0, _components.useChartsTheme)();
     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 +64,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': 'true'
+            }
         }, sx),
         variant: "outlined",
         onMouseEnter: handleMouseEnter,
@@ -75,15 +77,17 @@ const Panel = /*#__PURE__*/ (0, _react.memo)(function Panel(props) {
         "data-testid": "panel",
         ...others,
         children: [
-            /*#__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,
+                readHandlers: readHandlers,
                 editHandlers: editHandlers,
+                links: definition.spec.links,
                 sx: {
                     paddingX: `${chartsTheme.container.padding.default}px`
                 }