@perses-dev/dashboards 0.0.0-snapshot-scatter-chart-embed-8efdfab → 0.0.0-snapshot-explorer-plugin-c4a7621

package/dist/cjs/components/AddGroupButton/AddGroupButton.js

@@ -32,7 +32,7 @@ function _interop_require_default(obj) {
     };
 }
 const AddGroupButton = ()=>{
-    const { openAddPanelGroup  } = (0, _context.useDashboardActions)();
+    const { openAddPanelGroup } = (0, _context.useDashboardActions)();
     return /*#__PURE__*/ (0, _jsxruntime.jsx)(_components.InfoTooltip, {
         description: _constants.TOOLTIP_TEXT.addGroup,
         children: /*#__PURE__*/ (0, _jsxruntime.jsx)(_material.Button, {

package/dist/cjs/components/AddPanelButton/AddPanelButton.js

@@ -31,8 +31,8 @@ function _interop_require_default(obj) {
         default: obj
     };
 }
-const AddPanelButton = ({ variant ='text' , color ='primary' , label ='Panel' , fullWidth  })=>{
-    const { openAddPanel  } = (0, _context.useDashboardActions)();
+const AddPanelButton = ({ variant = 'text', color = 'primary', label = 'Panel', fullWidth })=>{
+    const { openAddPanel } = (0, _context.useDashboardActions)();
     return /*#__PURE__*/ (0, _jsxruntime.jsx)(_components.InfoTooltip, {
         description: _constants.TOOLTIP_TEXT.addPanel,
         children: /*#__PURE__*/ (0, _jsxruntime.jsx)(_material.Button, {

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");
-function Dashboard({ emptyDashboardProps , panelOptions , ...boxProps }) {
+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
@@ -25,8 +25,8 @@ const _react = require("react");
 const _material = require("@mui/material");
 const _PinOutline = /*#__PURE__*/ _interop_require_default(require("mdi-material-ui/PinOutline"));
 const _PinOffOutline = /*#__PURE__*/ _interop_require_default(require("mdi-material-ui/PinOffOutline"));
+const _pluginsystem = require("@perses-dev/plugin-system");
 const _Variables = require("../Variables");
-const _TimeRangeControls = require("../TimeRangeControls");
 function _interop_require_default(obj) {
     return obj && obj.__esModule ? obj : {
         default: obj
@@ -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',
@@ -101,7 +101,7 @@ function DashboardStickyToolbar(props) {
                         ml: isBiggerThanMd ? 1.5 : 'auto',
                         direction: "row",
                         justifyContent: "end",
-                        children: /*#__PURE__*/ (0, _jsxruntime.jsx)(_TimeRangeControls.TimeRangeControls, {})
+                        children: /*#__PURE__*/ (0, _jsxruntime.jsx)(_pluginsystem.TimeRangeControls, {})
                     })
                 ]
             })

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

@@ -23,11 +23,11 @@ Object.defineProperty(exports, "DashboardToolbar", {
 const _jsxruntime = require("react/jsx-runtime");
 const _material = require("@mui/material");
 const _components = require("@perses-dev/components");
+const _pluginsystem = require("@perses-dev/plugin-system");
 const _context = require("../../context");
 const _AddPanelButton = require("../AddPanelButton");
 const _AddGroupButton = require("../AddGroupButton");
 const _DownloadButton = require("../DownloadButton");
-const _TimeRangeControls = require("../TimeRangeControls");
 const _Variables = require("../Variables");
 const _Datasources = require("../Datasources");
 const _EditButton = require("../EditButton");
@@ -35,8 +35,8 @@ 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 { isEditMode  } = (0, _context.useEditMode)();
+    const { dashboardName, dashboardTitleComponent, initialVariableIsSticky, isReadonly, 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'));
     const dashboardTitle = dashboardTitleComponent ? dashboardTitleComponent : /*#__PURE__*/ (0, _jsxruntime.jsx)(_material.Typography, {
@@ -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
@@ -122,7 +122,7 @@ const DashboardToolbar = (props)=>{
                                 children: /*#__PURE__*/ (0, _jsxruntime.jsx)(_DashboardStickyToolbar.DashboardStickyToolbar, {
                                     initialVariableIsSticky: initialVariableIsSticky,
                                     sx: {
-                                        backgroundColor: ({ palette  })=>palette.background.default
+                                        backgroundColor: ({ palette })=>palette.background.default
                                     }
                                 })
                             })
@@ -138,7 +138,7 @@ const DashboardToolbar = (props)=>{
                                 mt: 1,
                                 ml: 1,
                                 children: [
-                                    /*#__PURE__*/ (0, _jsxruntime.jsx)(_TimeRangeControls.TimeRangeControls, {}),
+                                    /*#__PURE__*/ (0, _jsxruntime.jsx)(_pluginsystem.TimeRangeControls, {}),
                                     /*#__PURE__*/ (0, _jsxruntime.jsx)(_DownloadButton.DownloadButton, {}),
                                     /*#__PURE__*/ (0, _jsxruntime.jsx)(_EditJsonButton.EditJsonButton, {
                                         isReadonly: !isEditMode

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

@@ -46,7 +46,7 @@ function DatasourceEditor(props) {
             spec: {}
         }
     };
-    const { openDiscardChangesConfirmationDialog , closeDiscardChangesConfirmationDialog  } = (0, _context.useDiscardChangesConfirmationDialog)();
+    const { openDiscardChangesConfirmationDialog, closeDiscardChangesConfirmationDialog } = (0, _context.useDiscardChangesConfirmationDialog)();
     const handleCancel = ()=>{
         if (JSON.stringify(props.datasources) !== JSON.stringify(datasources)) {
             openDiscardChangesConfirmationDialog({
@@ -77,28 +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, {
-            initialName: datasourceEdit.name,
-            initialSpec: datasourceEdit.spec,
-            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, {
@@ -174,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, {
@@ -190,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

@@ -36,10 +36,10 @@ function _interop_require_default(obj) {
 }
 function EditDatasourcesButton() {
     const [isDatasourceEditorOpen, setIsDatasourceEditorOpen] = (0, _react.useState)(false);
-    const { getLocalDatasources , setLocalDatasources , getSavedDatasources , setSavedDatasources  } = (0, _pluginsystem.useDatasourceStore)();
+    const { getLocalDatasources, setLocalDatasources, getSavedDatasources, setSavedDatasources } = (0, _pluginsystem.useDatasourceStore)();
     const localDatasources = getLocalDatasources();
     const savedDatasources = getSavedDatasources();
-    const { dashboard , setDashboard  } = (0, _context.useDashboard)();
+    const { dashboard, setDashboard } = (0, _context.useDashboard)();
     const openDatasourceEditor = ()=>{
         setIsDatasourceEditorOpen(true);
     };
@@ -49,19 +49,22 @@ 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, _datasources_key_plugin, _savedDatasources_key, _savedDatasources_key_plugin, _datasources_key1, _datasources_key_plugin1, _datasources_key_plugin_spec, _savedDatasources_key1, _savedDatasources_key_plugin1, _savedDatasources_key_plugin_spec;
-            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];
             return obj;
         }, {});
-        setDashboard({
+        setDashboard(dashboard.kind === 'Dashboard' ? {
+            ...dashboard,
+            spec: {
+                ...dashboard.spec,
+                datasources: datasources
+            }
+        } : {
             ...dashboard,
             spec: {
                 ...dashboard.spec,

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

@@ -24,7 +24,7 @@ const _jsxruntime = require("react/jsx-runtime");
 const _components = require("@perses-dev/components");
 const _context = require("../../context");
 const DeletePanelDialog = ()=>{
-    const { deletePanelDialog , closeDeletePanelDialog  } = (0, _context.useDeletePanelDialog)();
+    const { deletePanelDialog, closeDeletePanelDialog } = (0, _context.useDeletePanelDialog)();
     return /*#__PURE__*/ (0, _jsxruntime.jsxs)(_components.Dialog, {
         open: deletePanelDialog !== undefined,
         children: [
@@ -38,11 +38,11 @@ const DeletePanelDialog = ()=>{
         ]
     });
 };
-const DeletePanelForm = ({ deletePanelDialog  })=>{
-    const { deletePanel , closeDeletePanelDialog  } = (0, _context.useDeletePanelDialog)();
+const DeletePanelForm = ({ deletePanelDialog })=>{
+    const { deletePanel, closeDeletePanelDialog } = (0, _context.useDeletePanelDialog)();
     const handleDelete = (e)=>{
         e.preventDefault();
-        const { panelGroupItemId  } = deletePanelDialog;
+        const { panelGroupItemId } = deletePanelDialog;
         deletePanel(panelGroupItemId);
         closeDeletePanelDialog();
     };

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

@@ -30,17 +30,16 @@ 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 { deletePanelGroupDialog, closeDeletePanelGroupDialog, deletePanelGroup } = (0, _context.useDeletePanelGroupDialog)();
+    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/DiscardChangesConfirmationDialog/DiscardChangesConfirmationDialog.js

@@ -24,7 +24,7 @@ const _jsxruntime = require("react/jsx-runtime");
 const _components = require("@perses-dev/components");
 const _context = require("../../context");
 const DashboardDiscardChangesConfirmationDialog = ()=>{
-    const { discardChangesConfirmationDialog: dialog  } = (0, _context.useDiscardChangesConfirmationDialog)();
+    const { discardChangesConfirmationDialog: dialog } = (0, _context.useDiscardChangesConfirmationDialog)();
     if (dialog === undefined) {
         return null;
     }

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

@@ -26,14 +26,13 @@ const _DownloadOutline = /*#__PURE__*/ _interop_require_default(require("mdi-mat
 const _components = require("@perses-dev/components");
 const _constants = require("../../constants");
 const _context = require("../../context");
-const _ToolbarIconButton = require("../ToolbarIconButton");
 function _interop_require_default(obj) {
     return obj && obj.__esModule ? obj : {
         default: obj
     };
 }
-function DownloadButton({ heightPx  }) {
-    const { dashboard  } = (0, _context.useDashboard)();
+function DownloadButton({ heightPx }) {
+    const { dashboard } = (0, _context.useDashboard)();
     const hiddenLinkRef = (0, _react.useRef)(null);
     const height = heightPx === undefined ? undefined : `${heightPx}px`;
     const onDownloadButtonClick = ()=>{
@@ -54,7 +53,7 @@ function DownloadButton({ heightPx  }) {
         children: [
             /*#__PURE__*/ (0, _jsxruntime.jsx)(_components.InfoTooltip, {
                 description: _constants.TOOLTIP_TEXT.downloadDashboard,
-                children: /*#__PURE__*/ (0, _jsxruntime.jsx)(_ToolbarIconButton.ToolbarIconButton, {
+                children: /*#__PURE__*/ (0, _jsxruntime.jsx)(_components.ToolbarIconButton, {
                     "aria-label": _constants.TOOLTIP_TEXT.downloadDashboard,
                     onClick: onDownloadButtonClick,
                     sx: {

package/dist/cjs/components/EditButton/EditButton.js

@@ -28,7 +28,7 @@ function _interop_require_default(obj) {
         default: obj
     };
 }
-const EditButton = ({ label ='Edit' , onClick  })=>{
+const EditButton = ({ label = 'Edit', onClick })=>{
     return /*#__PURE__*/ (0, _jsxruntime.jsx)(_material.Button, {
         onClick: onClick,
         startIcon: /*#__PURE__*/ (0, _jsxruntime.jsx)(_PencilOutline.default, {}),

package/dist/cjs/components/EditJsonButton/EditJsonButton.js

@@ -24,7 +24,6 @@ const _jsxruntime = require("react/jsx-runtime");
 const _CodeBraces = /*#__PURE__*/ _interop_require_default(require("mdi-material-ui/CodeBraces"));
 const _components = require("@perses-dev/components");
 const _constants = require("../../constants");
-const _ToolbarIconButton = require("../ToolbarIconButton");
 const _context = require("../../context");
 function _interop_require_default(obj) {
     return obj && obj.__esModule ? obj : {
@@ -32,12 +31,12 @@ function _interop_require_default(obj) {
     };
 }
 const EditJsonButton = (props)=>{
-    const { isReadonly  } = props;
-    const { openEditJsonDialog  } = (0, _context.useEditJsonDialog)();
+    const { isReadonly } = props;
+    const { openEditJsonDialog } = (0, _context.useEditJsonDialog)();
     const info = isReadonly ? _constants.TOOLTIP_TEXT.viewJson : _constants.TOOLTIP_TEXT.editJson;
     return /*#__PURE__*/ (0, _jsxruntime.jsx)(_components.InfoTooltip, {
         description: info,
-        children: /*#__PURE__*/ (0, _jsxruntime.jsx)(_ToolbarIconButton.ToolbarIconButton, {
+        children: /*#__PURE__*/ (0, _jsxruntime.jsx)(_components.ToolbarIconButton, {
             "aria-label": info,
             variant: "outlined",
             onClick: ()=>openEditJsonDialog(),

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 { isReadonly, disableMetadataEdition } = props;
+    const { editJsonDialog, closeEditJsonDialog } = (0, _context.useEditJsonDialog)();
     return /*#__PURE__*/ (0, _jsxruntime.jsxs)(_components.Dialog, {
-        open: !!(editJsonDialog === null || editJsonDialog === void 0 ? void 0 : editJsonDialog.isOpen),
+        open: !!editJsonDialog?.isOpen,
         scroll: "paper",
         fullWidth: true,
         maxWidth: "lg",
@@ -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
             })
@@ -51,11 +50,11 @@ const EditJsonDialog = (props)=>{
     });
 };
 const EditJsonDialogForm = (props)=>{
-    const { isReadonly , disableMetadataEdition  } = props;
-    const { closeEditJsonDialog  } = (0, _DashboardProvider.useEditJsonDialog)();
-    const { setTimeRange , setRefreshInterval  } = (0, _pluginsystem.useTimeRange)();
-    const { dashboard , setDashboard  } = (0, _useDashboard.useDashboard)();
-    const { setLocalDatasources  } = (0, _pluginsystem.useDatasourceStore)();
+    const { isReadonly, disableMetadataEdition } = props;
+    const { closeEditJsonDialog } = (0, _context.useEditJsonDialog)();
+    const { setTimeRange, setRefreshInterval } = (0, _pluginsystem.useTimeRange)();
+    const { dashboard, setDashboard } = (0, _context.useDashboard)();
+    const { setLocalDatasources } = (0, _pluginsystem.useDatasourceStore)();
     const [draftDashboard, setDraftDashboard] = (0, _react.useState)(dashboard);
     const handleApply = (e)=>{
         e.preventDefault();
@@ -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
         }
     };
@@ -92,6 +89,13 @@ const EditJsonDialogForm = (props)=>{
                         severity: "warning",
                         children: "Metadata cannot be modified or saved."
                     }),
+                    draftDashboard.kind === 'EphemeralDashboard' && /*#__PURE__*/ (0, _jsxruntime.jsx)(_material.Alert, {
+                        sx: {
+                            marginBottom: 1
+                        },
+                        severity: "warning",
+                        children: "Time-to-live cannot be modified or saved from here. Go to the project view to modify it."
+                    }),
                     /*#__PURE__*/ (0, _jsxruntime.jsx)(_material.FormControl, {
                         fullWidth: true,
                         children: /*#__PURE__*/ (0, _jsxruntime.jsx)(_components.JSONEditor, {

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

@@ -32,13 +32,13 @@ 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',
     color: 'secondary'
 };
-const EmptyDashboardActions = ({ actions , isEditMode , onEditButtonClick  })=>{
+const EmptyDashboardActions = ({ actions, isEditMode, onEditButtonClick })=>{
     if (actions && typeof actions !== 'boolean') {
         // Custom actions
         return actions;
@@ -76,8 +76,8 @@ const EmptyDashboardActions = ({ actions , isEditMode , onEditButtonClick  })=>{
     }
     return null;
 };
-const EmptyDashboard = ({ title =DEFAULT_TITLE , image , description , additionalText , actions , onEditButtonClick  })=>{
-    const { isEditMode  } = (0, _context.useEditMode)();
+const EmptyDashboard = ({ title = DEFAULT_TITLE, image, description, additionalText, actions, onEditButtonClick })=>{
+    const { isEditMode } = (0, _context.useEditMode)();
     const defaultDescription = isEditMode ? DEFAULT_DESCRIPTION.edit : DEFAULT_DESCRIPTION.view;
     const actionsContent = /*#__PURE__*/ (0, _jsxruntime.jsx)(EmptyDashboardActions, {
         actions: actions,
@@ -105,7 +105,7 @@ const EmptyDashboard = ({ title =DEFAULT_TITLE , image , description , additiona
                     }),
                     /*#__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,24 +33,29 @@ 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
     });
 }
 /**
  * These are the classes needed by react-grid-layout from their CSS stylesheet.
- */ const ReactGridLayoutContainer = (0, _material.styled)('section')(({ theme  })=>({
+ */ const ReactGridLayoutContainer = (0, _material.styled)('section')(({ theme })=>({
         '& .react-grid-layout': {
             position: 'relative',
             transition: 'height 200ms ease'

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

@@ -25,19 +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 _utils = require("../../utils");
-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 { 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 { ref , inView  } = (0, _reactintersectionobserver.useInView)({
+    const { spec: { queries } } = panelDefinition;
+    const { isEditMode } = (0, _context.useEditMode)();
+    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,8 +59,9 @@ function GridItemContent(props) {
         };
     }
     // map TimeSeriesQueryDefinition to Definition<UnknownSpec>
-    const suggestedStepMs = (0, _utils.useSuggestedStepMs)(width);
-    const queryDefinitions = queries !== null && queries !== void 0 ? queries : [];
+    const suggestedStepMs = (0, _pluginsystem.useSuggestedStepMs)(width);
+    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,
@@ -65,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