@perses-dev/dashboards 0.45.0 → 0.46.0-rc0

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

@@ -23,17 +23,25 @@ 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 }) {
+    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 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 +57,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/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,6 +60,7 @@ 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 definitions = queryDefinitions.map((query)=>{
         return {
@@ -64,13 +77,15 @@ function GridItemContent(props) {
         children: /*#__PURE__*/ (0, _jsxruntime.jsx)(_pluginsystem.DataQueriesProvider, {
             definitions: definitions,
             options: {
-                suggestedStepMs
+                suggestedStepMs,
+                ...plugin === null || plugin === void 0 ? void 0 : 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,9 +31,10 @@ const _GridTitle = require("./GridTitle");
 const _GridItemContent = require("./GridItemContent");
 const _GridContainer = require("./GridContainer");
 const DEFAULT_MARGIN = 10;
+const ROW_HEIGHT = 30;
 const ResponsiveGridLayout = (0, _reactgridlayout.WidthProvider)(_reactgridlayout.Responsive);
 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);
@@ -41,13 +42,49 @@ function GridLayout(props) {
     const [isOpen, setIsOpen] = (0, _react.useState)((_ref = !groupDefinition.isCollapsed) !== null && _ref !== void 0 ? _ref : true);
     const { isEditMode } = (0, _context.useEditMode)();
     const [gridColWidth, setGridColWidth] = (0, _react.useState)(0);
+    const 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;
+    // 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;
+        }
+        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 !== null && panelFullHeight !== void 0 ? 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);
         }
     };
@@ -62,6 +99,9 @@ function GridLayout(props) {
         setGridColWidth((containerWidth - marginWidth - containerPaddingWidth) / cols);
     };
     return /*#__PURE__*/ (0, _jsxruntime.jsxs)(_GridContainer.GridContainer, {
+        sx: {
+            display: isGridDisplayed ? 'block' : 'none'
+        },
         children: [
             groupDefinition.title !== undefined && /*#__PURE__*/ (0, _jsxruntime.jsx)(_GridTitle.GridTitle, {
                 panelGroupId: panelGroupId,
@@ -83,13 +123,13 @@ function GridLayout(props) {
                         xxs: 0
                     },
                     cols: _constants.GRID_LAYOUT_COLS,
-                    rowHeight: 30,
+                    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 +139,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/Panel/Panel.js

@@ -34,7 +34,7 @@ function _interop_require_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`;
@@ -75,7 +75,7 @@ const Panel = /*#__PURE__*/ (0, _react.memo)(function Panel(props) {
         "data-testid": "panel",
         ...others,
         children: [
-            /*#__PURE__*/ (0, _jsxruntime.jsx)(_PanelHeader.PanelHeader, {
+            !(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, {
                     panelDefinition: definition,
                     panelGroupItemId
@@ -83,6 +83,7 @@ const Panel = /*#__PURE__*/ (0, _react.memo)(function Panel(props) {
                 id: headerId,
                 title: definition.spec.display.name,
                 description: definition.spec.display.description,
+                readHandlers: readHandlers,
                 editHandlers: editHandlers,
                 links: definition.spec.links,
                 sx: {

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

@@ -27,6 +27,8 @@ const _InformationOutline = /*#__PURE__*/ _interop_require_default(require("mdi-
 const _PencilOutline = /*#__PURE__*/ _interop_require_default(require("mdi-material-ui/PencilOutline"));
 const _DeleteOutline = /*#__PURE__*/ _interop_require_default(require("mdi-material-ui/DeleteOutline"));
 const _DragVertical = /*#__PURE__*/ _interop_require_default(require("mdi-material-ui/DragVertical"));
+const _ArrowExpand = /*#__PURE__*/ _interop_require_default(require("mdi-material-ui/ArrowExpand"));
+const _ArrowCollapse = /*#__PURE__*/ _interop_require_default(require("mdi-material-ui/ArrowCollapse"));
 const _ContentCopy = /*#__PURE__*/ _interop_require_default(require("mdi-material-ui/ContentCopy"));
 const _pluginsystem = require("@perses-dev/plugin-system");
 const _constants = require("../../constants");
@@ -36,15 +38,31 @@ function _interop_require_default(obj) {
         default: obj
     };
 }
-function PanelHeader({ id, title: rawTitle, description: rawDescription, links, editHandlers, sx, extra, ...rest }) {
+function PanelHeader({ id, title: rawTitle, description: rawDescription, links, readHandlers, editHandlers, sx, extra, ...rest }) {
     const titleElementId = `${id}-title`;
     const descriptionTooltipId = `${id}-description`;
     const title = (0, _pluginsystem.useReplaceVariablesInString)(rawTitle);
     const description = (0, _pluginsystem.useReplaceVariablesInString)(rawDescription);
-    let actions = undefined;
+    let readActions = undefined;
+    if (readHandlers !== undefined) {
+        readActions = /*#__PURE__*/ (0, _jsxruntime.jsx)(_components.InfoTooltip, {
+            description: _constants.TOOLTIP_TEXT.viewPanel,
+            children: /*#__PURE__*/ (0, _jsxruntime.jsx)(HeaderIconButton, {
+                "aria-label": _constants.ARIA_LABEL_TEXT.viewPanel(title),
+                size: "small",
+                onClick: readHandlers.onViewPanelClick,
+                children: readHandlers.isPanelViewed ? /*#__PURE__*/ (0, _jsxruntime.jsx)(_ArrowCollapse.default, {
+                    fontSize: "inherit"
+                }) : /*#__PURE__*/ (0, _jsxruntime.jsx)(_ArrowExpand.default, {
+                    fontSize: "inherit"
+                })
+            })
+        });
+    }
+    let editActions = undefined;
     if (editHandlers !== undefined) {
         // If there are edit handlers, always just show the edit buttons
-        actions = /*#__PURE__*/ (0, _jsxruntime.jsxs)(_jsxruntime.Fragment, {
+        editActions = /*#__PURE__*/ (0, _jsxruntime.jsxs)(_jsxruntime.Fragment, {
             children: [
                 /*#__PURE__*/ (0, _jsxruntime.jsx)(_components.InfoTooltip, {
                     description: _constants.TOOLTIP_TEXT.editPanel,
@@ -153,7 +171,9 @@ function PanelHeader({ id, title: rawTitle, description: rawDescription, links,
             children: [
                 editHandlers === undefined && extra,
                 " ",
-                actions
+                readActions,
+                " ",
+                editActions
             ]
         }),
         sx: (0, _components.combineSx)((theme)=>({

package/dist/cjs/components/PanelDrawer/PanelPreview.js

@@ -34,6 +34,10 @@ function PanelPreview({ panelDefinition }) {
         width = boxRef.current.getBoundingClientRect().width;
     }
     const suggestedStepMs = (0, _pluginsystem.useSuggestedStepMs)(width);
+    const { data: plugin, isLoading } = (0, _pluginsystem.usePlugin)('Panel', panelDefinition.spec.plugin.kind);
+    if (isLoading) {
+        return null;
+    }
     if (panelDefinition.spec.plugin.kind === '') {
         return null;
     }
@@ -52,7 +56,8 @@ function PanelPreview({ panelDefinition }) {
         children: /*#__PURE__*/ (0, _jsxruntime.jsx)(_pluginsystem.DataQueriesProvider, {
             definitions: definitions,
             options: {
-                suggestedStepMs
+                suggestedStepMs,
+                ...plugin === null || plugin === void 0 ? void 0 : plugin.queryOptions
             },
             children: /*#__PURE__*/ (0, _jsxruntime.jsx)(_Panel.Panel, {
                 definition: panelDefinition

package/dist/cjs/components/Variables/VariableList.js

@@ -52,9 +52,12 @@ function TemplateVariableList() {
 function TemplateVariableListItem({ spec, source }) {
     var _ctx_state, _spec_display;
     const ctx = (0, _context.useTemplateVariable)(spec.name, source);
+    if ((_ctx_state = ctx.state) === null || _ctx_state === void 0 ? void 0 : _ctx_state.overridden) {
+        return null;
+    }
     var _ref, _ref1;
     return /*#__PURE__*/ (0, _jsxruntime.jsx)(_material.Box, {
-        display: ((_ctx_state = ctx.state) === null || _ctx_state === void 0 ? void 0 : _ctx_state.overridden) || ((_spec_display = spec.display) === null || _spec_display === void 0 ? void 0 : _spec_display.hidden) ? 'none' : undefined,
+        display: ((_spec_display = spec.display) === null || _spec_display === void 0 ? void 0 : _spec_display.hidden) ? 'none' : undefined,
         minWidth: `${_constants.MIN_TEMPLATE_VARIABLE_WIDTH}px`,
         maxWidth: `${_constants.MAX_TEMPLATE_VARIABLE_WIDTH}px`,
         flexShrink: 0,

package/dist/cjs/constants/user-interface-text.js

@@ -44,6 +44,7 @@ const TOOLTIP_TEXT = {
     moveGroupDown: 'Move group down',
     moveGroupUp: 'Move group up',
     // Panel buttons
+    viewPanel: 'Toggle View Mode',
     editPanel: 'Edit',
     duplicatePanel: 'Duplicate',
     deletePanel: 'Delete',
@@ -60,6 +61,7 @@ const ARIA_LABEL_TEXT = {
     moveGroupDown: (groupName)=>`move group ${groupName} down`,
     moveGroupUp: (groupName)=>`move group ${groupName} up`,
     // Panel buttons
+    viewPanel: (panelName)=>`toggle panel ${panelName} view mode`,
     editPanel: (panelName)=>`edit panel ${panelName}`,
     duplicatePanel: (panelName)=>`duplicate panel ${panelName}`,
     deletePanel: (panelName)=>`delete panel ${panelName}`,

package/dist/cjs/context/DashboardProvider/DashboardProvider.js

@@ -50,6 +50,7 @@ const _savechangesdialogslice = require("./save-changes-dialog-slice");
 const _duplicatepanelslice = require("./duplicate-panel-slice");
 const _editjsondialogslice = require("./edit-json-dialog-slice");
 const _common = require("./common");
+const _viewpanelslice = require("./view-panel-slice");
 const DashboardContext = /*#__PURE__*/ (0, _react.createContext)(undefined);
 function useDashboardStore(selector) {
     const store = (0, _react.useContext)(DashboardContext);
@@ -88,7 +89,7 @@ function DashboardProvider(props) {
     });
 }
 function initStore(props) {
-    const { initialState: { dashboardResource, isEditMode } } = props;
+    const { initialState: { dashboardResource, isEditMode, viewPanelRef, setViewPanelRef } } = props;
     const { kind, metadata, spec: { display, duration, refreshInterval = _core.DEFAULT_REFRESH_INTERVAL, datasources } } = dashboardResource;
     const ttl = 'ttl' in dashboardResource.spec ? dashboardResource.spec.ttl : undefined;
     let { spec: { layouts, panels } } = dashboardResource;
@@ -105,6 +106,7 @@ function initStore(props) {
             ...(0, _paneleditorslice.createPanelEditorSlice)()(...args),
             ...(0, _deletepanelslice.createDeletePanelSlice)()(...args),
             ...(0, _duplicatepanelslice.createDuplicatePanelSlice)()(...args),
+            ...(0, _viewpanelslice.createViewPanelSlice)(viewPanelRef, setViewPanelRef)(...args),
             /* General */ ...(0, _discardchangesdialogslice.createDiscardChangesDialogSlice)(...args),
             ...(0, _editjsondialogslice.createEditJsonDialogSlice)(...args),
             ...(0, _savechangesdialogslice.createSaveChangesDialogSlice)(...args),

package/dist/cjs/context/DashboardProvider/DashboardProviderWithQueryParams.js

@@ -0,0 +1,36 @@
+// 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
+//
+// 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, "DashboardProviderWithQueryParams", {
+    enumerable: true,
+    get: function() {
+        return DashboardProviderWithQueryParams;
+    }
+});
+const _jsxruntime = require("react/jsx-runtime");
+const _usequeryparams = require("use-query-params");
+const _DashboardProvider = require("./DashboardProvider");
+function DashboardProviderWithQueryParams({ children, initialState }) {
+    const [viewPanelRef, setViewPanelRef] = (0, _usequeryparams.useQueryParam)('viewPanelRef', _usequeryparams.StringParam);
+    return /*#__PURE__*/ (0, _jsxruntime.jsx)(_DashboardProvider.DashboardProvider, {
+        initialState: {
+            viewPanelRef: viewPanelRef !== null && viewPanelRef !== void 0 ? viewPanelRef : undefined,
+            setViewPanelRef: setViewPanelRef,
+            ...initialState
+        },
+        children: children
+    });
+}

package/dist/cjs/context/DashboardProvider/dashboard-provider-api.js

@@ -68,6 +68,9 @@ _export(exports, {
     },
     useSaveChangesConfirmationDialog: function() {
         return useSaveChangesConfirmationDialog;
+    },
+    useViewPanel: function() {
+        return useViewPanel;
     }
 });
 const _react = require("react");
@@ -196,17 +199,19 @@ function usePanel(panelGroupItemId) {
     }
     return panel;
 }
-const selectPanelActions = ({ openEditPanel, openDeletePanelDialog, duplicatePanel })=>({
+const selectPanelActions = ({ openEditPanel, openDeletePanelDialog, duplicatePanel, setViewPanel })=>({
         openEditPanel,
         openDeletePanelDialog,
-        duplicatePanel
+        duplicatePanel,
+        setViewPanel
     });
 function usePanelActions(panelGroupItemId) {
-    const { openEditPanel, openDeletePanelDialog, duplicatePanel } = (0, _DashboardProvider.useDashboardStore)(selectPanelActions);
+    const { openEditPanel, openDeletePanelDialog, duplicatePanel, setViewPanel } = (0, _DashboardProvider.useDashboardStore)(selectPanelActions);
     return {
         openEditPanel: ()=>openEditPanel(panelGroupItemId),
         openDeletePanelDialog: ()=>openDeletePanelDialog(panelGroupItemId),
-        duplicatePanel: ()=>duplicatePanel(panelGroupItemId)
+        duplicatePanel: ()=>duplicatePanel(panelGroupItemId),
+        viewPanel: (panelGroupItemId)=>setViewPanel(panelGroupItemId)
     };
 }
 const selectPanelEditor = (state)=>state.panelEditor;
@@ -226,6 +231,10 @@ const selectDashboardDuration = (state)=>state.duration;
 function useDashboardDuration() {
     return (0, _DashboardProvider.useDashboardStore)(selectDashboardDuration);
 }
+const selectViewPanel = (state)=>state.getViewPanel();
+function useViewPanel() {
+    return (0, _DashboardProvider.useDashboardStore)(selectViewPanel);
+}
 const selectSaveChangesConfirmationDialog = ({ saveChangesConfirmationDialog, openSaveChangesConfirmationDialog, closeSaveChangesConfirmationDialog })=>({
         saveChangesConfirmationDialog,
         openSaveChangesConfirmationDialog,

package/dist/cjs/context/DashboardProvider/panel-group-slice.js

@@ -32,10 +32,16 @@ _export(exports, {
     },
     createPanelGroupSlice: function() {
         return createPanelGroupSlice;
+    },
+    isPanelGroupItemIdEqual: function() {
+        return isPanelGroupItemIdEqual;
     }
 });
 const _core = require("@perses-dev/core");
 const _common = require("./common");
+function isPanelGroupItemIdEqual(a, b) {
+    return (a === null || a === void 0 ? void 0 : a.panelGroupId) === (b === null || b === void 0 ? void 0 : b.panelGroupId) && (a === null || a === void 0 ? void 0 : a.panelGroupItemLayoutId) === (b === null || b === void 0 ? void 0 : b.panelGroupItemLayoutId);
+}
 function createPanelGroupSlice(layouts) {
     const { panelGroups, panelGroupOrder } = convertLayoutsToPanelGroups(layouts);
     // Return the state creator function for Zustand

package/dist/cjs/context/DashboardProvider/view-panel-slice.js

@@ -0,0 +1,80 @@
+// Copyright 2023 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, "createViewPanelSlice", {
+    enumerable: true,
+    get: function() {
+        return createViewPanelSlice;
+    }
+});
+function createViewPanelSlice(viewPanelRef, setViewPanelRef) {
+    return (set, get)=>({
+            viewPanel: {
+                panelGroupItemId: undefined,
+                panelRef: viewPanelRef
+            },
+            getViewPanel () {
+                return getViewPanelGroupId(get().panelGroups, get().viewPanel.panelGroupItemId, get().viewPanel.panelRef);
+            },
+            setViewPanel (panelGroupItemId) {
+                set((state)=>{
+                    state.viewPanel = {
+                        panelRef: undefined,
+                        panelGroupItemId: panelGroupItemId
+                    };
+                    const panelRef = findPanelRefOfPanelGroupItemId(get().panelGroups, panelGroupItemId);
+                    if (setViewPanelRef) {
+                        setViewPanelRef(panelRef);
+                    }
+                });
+            }
+        });
+}
+function getViewPanelGroupId(panelGroups, panelGroupItemId, panelRef) {
+    if (panelGroupItemId) {
+        return panelGroupItemId;
+    }
+    if (panelRef) {
+        return findPanelGroupItemIdOfPanelRef(panelGroups, panelRef);
+    }
+    return undefined;
+}
+// Find the PanelGroupItemId of a Panel from a PanelRef
+function findPanelGroupItemIdOfPanelRef(panelGroups, panelRef) {
+    for (const panelGroup of Object.values(panelGroups)){
+        var _panelGroup_itemPanelKeys;
+        const itemPanel = Object.entries((_panelGroup_itemPanelKeys = panelGroup.itemPanelKeys) !== null && _panelGroup_itemPanelKeys !== void 0 ? _panelGroup_itemPanelKeys : []).find(([_, value])=>value === panelRef);
+        if (itemPanel) {
+            const [key] = itemPanel;
+            return {
+                panelGroupId: panelGroup.id,
+                panelGroupItemLayoutId: key
+            };
+        }
+    }
+    return undefined;
+}
+// Find the PanelRef from a PanelGroupItemId
+function findPanelRefOfPanelGroupItemId(panelGroups, panelGroupItemId) {
+    if (!panelGroupItemId) {
+        return undefined;
+    }
+    const panelGroup = panelGroups[panelGroupItemId.panelGroupId];
+    if (panelGroup) {
+        return panelGroup.itemPanelKeys[panelGroupItemId.panelGroupItemLayoutId];
+    }
+    return undefined;
+}

package/dist/cjs/views/ViewDashboard/ViewDashboard.js

@@ -27,6 +27,7 @@ const _components = require("@perses-dev/components");
 const _pluginsystem = require("@perses-dev/plugin-system");
 const _react = require("react");
 const _context = require("../../context");
+const _DashboardProviderWithQueryParams = require("../../context/DashboardProvider/DashboardProviderWithQueryParams");
 const _DashboardApp = require("./DashboardApp");
 function ViewDashboard(props) {
     const { dashboardResource, datasourceApi, externalVariableDefinitions, dashboardTitleComponent, emptyDashboardProps, onSave, onDiscard, initialVariableIsSticky, isReadonly, isEditing, isCreating, sx, ...others } = props;
@@ -79,7 +80,7 @@ function ViewDashboard(props) {
     return /*#__PURE__*/ (0, _jsxruntime.jsx)(_context.DatasourceStoreProvider, {
         dashboardResource: dashboardResource,
         datasourceApi: datasourceApi,
-        children: /*#__PURE__*/ (0, _jsxruntime.jsx)(_context.DashboardProvider, {
+        children: /*#__PURE__*/ (0, _jsxruntime.jsx)(_DashboardProviderWithQueryParams.DashboardProviderWithQueryParams, {
             initialState: {
                 dashboardResource,
                 isEditMode: !!isEditing

package/dist/components/Dashboard/Dashboard.d.ts.map

@@ -1 +1 @@
-{"version":3,"file":"Dashboard.d.ts","sourceRoot":"","sources":["../../../src/components/Dashboard/Dashboard.tsx"],"names":[],"mappings":"AAaA,OAAO,EAAO,QAAQ,EAAE,MAAM,eAAe,CAAC;AAI9C,OAAO,EAAkB,mBAAmB,EAAE,MAAM,mBAAmB,CAAC;AACxE,OAAO,EAAE,YAAY,EAAE,MAAM,UAAU,CAAC;AACxC,MAAM,MAAM,cAAc,GAAG,QAAQ,GAAG;IACtC;;;;OAIG;IACH,mBAAmB,CAAC,EAAE,mBAAmB,CAAC;IAC1C,YAAY,CAAC,EAAE,YAAY,CAAC;CAC7B,CAAC;AAEF;;GAEG;AACH,wBAAgB,SAAS,CAAC,EAAE,mBAAmB,EAAE,YAAY,EAAE,GAAG,QAAQ,EAAE,EAAE,cAAc,2CAmB3F"}
+{"version":3,"file":"Dashboard.d.ts","sourceRoot":"","sources":["../../../src/components/Dashboard/Dashboard.tsx"],"names":[],"mappings":"AAaA,OAAO,EAAO,QAAQ,EAAE,MAAM,eAAe,CAAC;AAK9C,OAAO,EAAkB,mBAAmB,EAAE,MAAM,mBAAmB,CAAC;AACxE,OAAO,EAAE,YAAY,EAAE,MAAM,UAAU,CAAC;AACxC,MAAM,MAAM,cAAc,GAAG,QAAQ,GAAG;IACtC;;;;OAIG;IACH,mBAAmB,CAAC,EAAE,mBAAmB,CAAC;IAC1C,YAAY,CAAC,EAAE,YAAY,CAAC;CAC7B,CAAC;AAGF;;GAEG;AACH,wBAAgB,SAAS,CAAC,EAAE,mBAAmB,EAAE,YAAY,EAAE,GAAG,QAAQ,EAAE,EAAE,cAAc,2CA2B3F"}

package/dist/components/Dashboard/Dashboard.js

@@ -13,19 +13,27 @@
 import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
 import { Box } from '@mui/material';
 import { ErrorBoundary, ErrorAlert } from '@perses-dev/components';
+import { useRef } from 'react';
 import { usePanelGroupIds } from '../../context';
 import { GridLayout } from '../GridLayout';
 import { EmptyDashboard } from '../EmptyDashboard';
+const HEADER_HEIGHT = 165; // Approximate height of the header in dashboard view (including the navbar and variables toolbar)
 /**
  * Renders a Dashboard for the provided Dashboard spec.
  */ export function Dashboard({ emptyDashboardProps, panelOptions, ...boxProps }) {
+    var _boxRef_current;
     const panelGroupIds = usePanelGroupIds();
+    const boxRef = 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 panelFullHeight = window.innerHeight - dashboardTopPosition - window.scrollY;
     return /*#__PURE__*/ _jsx(Box, {
         ...boxProps,
         sx: {
             height: '100%'
         },
+        ref: boxRef,
         children: /*#__PURE__*/ _jsxs(ErrorBoundary, {
             FallbackComponent: ErrorAlert,
             children: [
@@ -41,7 +49,8 @@ import { EmptyDashboard } from '../EmptyDashboard';
                 }),
                 !isEmpty && panelGroupIds.map((panelGroupId)=>/*#__PURE__*/ _jsx(GridLayout, {
                         panelGroupId: panelGroupId,
-                        panelOptions: panelOptions
+                        panelOptions: panelOptions,
+                        panelFullHeight: panelFullHeight
                     }, panelGroupId))
             ]
         })