@perses-dev/dashboards 0.0.0-snapshot-scatterplot-fix-imports-95e1b59 → 0.0.0-snapshot-histogram-types-78c5104

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

@@ -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'));
@@ -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
@@ -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,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/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,16 +31,17 @@ 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) {
+        if (panelGroupId === undefined) {
             throw new Error('group index is undefined');
         }
         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

@@ -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.useViewPanelGroup)();
     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,13 +60,15 @@ 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,
             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: {
@@ -64,13 +78,15 @@ function GridItemContent(props) {
         children: /*#__PURE__*/ (0, _jsxruntime.jsx)(_pluginsystem.DataQueriesProvider, {
             definitions: definitions,
             options: {
-                suggestedStepMs
+                suggestedStepMs,
+                ...pluginQueryOptions
             },
             queryOptions: {
                 enabled: inView
             },
             children: inView && /*#__PURE__*/ (0, _jsxruntime.jsx)(_Panel.Panel, {
                 definition: panelDefinition,
+                readHandlers: readHandlers,
                 editHandlers: editHandlers,
                 panelOptions: props.panelOptions,
                 panelGroupItemId: panelGroupItemId