@perses-dev/dashboards 0.0.0-snapshot-panel-extra-content-3-17f9c42 → 0.0.0-snapshot-scatterplot-fix-imports-95e1b59

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

@@ -16,22 +16,23 @@ Object.defineProperty(exports, "__esModule", {
 });
 Object.defineProperty(exports, "DownloadButton", {
     enumerable: true,
-    get: ()=>DownloadButton
+    get: function() {
+        return DownloadButton;
+    }
 });
-const _jsxRuntime = require("react/jsx-runtime");
+const _jsxruntime = require("react/jsx-runtime");
 const _react = require("react");
-const _downloadOutline = /*#__PURE__*/ _interopRequireDefault(require("mdi-material-ui/DownloadOutline"));
+const _DownloadOutline = /*#__PURE__*/ _interop_require_default(require("mdi-material-ui/DownloadOutline"));
 const _components = require("@perses-dev/components");
 const _constants = require("../../constants");
 const _context = require("../../context");
-const _toolbarIconButton = require("../ToolbarIconButton");
-function _interopRequireDefault(obj) {
+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 = ()=>{
@@ -48,20 +49,20 @@ function DownloadButton({ heightPx  }) {
         // Remove blob URL (for memory management)
         URL.revokeObjectURL(hiddenLinkUrl);
     };
-    return /*#__PURE__*/ (0, _jsxRuntime.jsxs)(_jsxRuntime.Fragment, {
+    return /*#__PURE__*/ (0, _jsxruntime.jsxs)(_jsxruntime.Fragment, {
         children: [
-            /*#__PURE__*/ (0, _jsxRuntime.jsx)(_components.InfoTooltip, {
+            /*#__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: {
                         height
                     },
-                    children: /*#__PURE__*/ (0, _jsxRuntime.jsx)(_downloadOutline.default, {})
+                    children: /*#__PURE__*/ (0, _jsxruntime.jsx)(_DownloadOutline.default, {})
                 })
             }),
-            /*#__PURE__*/ (0, _jsxRuntime.jsx)("a", {
+            /*#__PURE__*/ (0, _jsxruntime.jsx)("a", {
                 ref: hiddenLinkRef,
                 style: {
                     display: 'none'

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

@@ -14,15 +14,17 @@
 Object.defineProperty(exports, "__esModule", {
     value: true
 });
-_exportStar(require("./DownloadButton"), exports);
-function _exportStar(from, to) {
+_export_star(require("./DownloadButton"), exports);
+function _export_star(from, to) {
     Object.keys(from).forEach(function(k) {
-        if (k !== "default" && !Object.prototype.hasOwnProperty.call(to, k)) Object.defineProperty(to, k, {
-            enumerable: true,
-            get: function() {
-                return from[k];
-            }
-        });
+        if (k !== "default" && !Object.prototype.hasOwnProperty.call(to, k)) {
+            Object.defineProperty(to, k, {
+                enumerable: true,
+                get: function() {
+                    return from[k];
+                }
+            });
+        }
     });
     return from;
 }

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

@@ -16,20 +16,22 @@ Object.defineProperty(exports, "__esModule", {
 });
 Object.defineProperty(exports, "EditButton", {
     enumerable: true,
-    get: ()=>EditButton
+    get: function() {
+        return EditButton;
+    }
 });
-const _jsxRuntime = require("react/jsx-runtime");
+const _jsxruntime = require("react/jsx-runtime");
 const _material = require("@mui/material");
-const _pencilOutline = /*#__PURE__*/ _interopRequireDefault(require("mdi-material-ui/PencilOutline"));
-function _interopRequireDefault(obj) {
+const _PencilOutline = /*#__PURE__*/ _interop_require_default(require("mdi-material-ui/PencilOutline"));
+function _interop_require_default(obj) {
     return obj && obj.__esModule ? obj : {
         default: obj
     };
 }
-const EditButton = ({ label ='Edit' , onClick  })=>{
-    return /*#__PURE__*/ (0, _jsxRuntime.jsx)(_material.Button, {
+const EditButton = ({ label = 'Edit', onClick })=>{
+    return /*#__PURE__*/ (0, _jsxruntime.jsx)(_material.Button, {
         onClick: onClick,
-        startIcon: /*#__PURE__*/ (0, _jsxRuntime.jsx)(_pencilOutline.default, {}),
+        startIcon: /*#__PURE__*/ (0, _jsxruntime.jsx)(_PencilOutline.default, {}),
         variant: "outlined",
         color: "secondary",
         sx: {

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

@@ -14,15 +14,17 @@
 Object.defineProperty(exports, "__esModule", {
     value: true
 });
-_exportStar(require("./EditButton"), exports);
-function _exportStar(from, to) {
+_export_star(require("./EditButton"), exports);
+function _export_star(from, to) {
     Object.keys(from).forEach(function(k) {
-        if (k !== "default" && !Object.prototype.hasOwnProperty.call(to, k)) Object.defineProperty(to, k, {
-            enumerable: true,
-            get: function() {
-                return from[k];
-            }
-        });
+        if (k !== "default" && !Object.prototype.hasOwnProperty.call(to, k)) {
+            Object.defineProperty(to, k, {
+                enumerable: true,
+                get: function() {
+                    return from[k];
+                }
+            });
+        }
     });
     return from;
 }

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

@@ -16,28 +16,31 @@ Object.defineProperty(exports, "__esModule", {
 });
 Object.defineProperty(exports, "EditJsonButton", {
     enumerable: true,
-    get: ()=>EditJsonButton
+    get: function() {
+        return EditJsonButton;
+    }
 });
-const _jsxRuntime = require("react/jsx-runtime");
-const _codeBraces = /*#__PURE__*/ _interopRequireDefault(require("mdi-material-ui/CodeBraces"));
+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 _interopRequireDefault(obj) {
+function _interop_require_default(obj) {
     return obj && obj.__esModule ? obj : {
         default: obj
     };
 }
-const EditJsonButton = ()=>{
-    const { openEditJsonDialog  } = (0, _context.useEditJsonDialog)();
-    return /*#__PURE__*/ (0, _jsxRuntime.jsx)(_components.InfoTooltip, {
-        description: _constants.TOOLTIP_TEXT.editJson,
-        children: /*#__PURE__*/ (0, _jsxRuntime.jsx)(_toolbarIconButton.ToolbarIconButton, {
-            "aria-label": _constants.TOOLTIP_TEXT.editJson,
+const EditJsonButton = (props)=>{
+    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)(_components.ToolbarIconButton, {
+            "aria-label": info,
             variant: "outlined",
             onClick: ()=>openEditJsonDialog(),
-            children: /*#__PURE__*/ (0, _jsxRuntime.jsx)(_codeBraces.default, {})
+            children: /*#__PURE__*/ (0, _jsxruntime.jsx)(_CodeBraces.default, {})
         })
     });
 };

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

@@ -14,15 +14,17 @@
 Object.defineProperty(exports, "__esModule", {
     value: true
 });
-_exportStar(require("./EditJsonButton"), exports);
-function _exportStar(from, to) {
+_export_star(require("./EditJsonButton"), exports);
+function _export_star(from, to) {
     Object.keys(from).forEach(function(k) {
-        if (k !== "default" && !Object.prototype.hasOwnProperty.call(to, k)) Object.defineProperty(to, k, {
-            enumerable: true,
-            get: function() {
-                return from[k];
-            }
-        });
+        if (k !== "default" && !Object.prototype.hasOwnProperty.call(to, k)) {
+            Object.defineProperty(to, k, {
+                enumerable: true,
+                get: function() {
+                    return from[k];
+                }
+            });
+        }
     });
     return from;
 }

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

@@ -16,35 +16,46 @@ Object.defineProperty(exports, "__esModule", {
 });
 Object.defineProperty(exports, "EditJsonDialog", {
     enumerable: true,
-    get: ()=>EditJsonDialog
+    get: function() {
+        return EditJsonDialog;
+    }
 });
-const _jsxRuntime = require("react/jsx-runtime");
+const _jsxruntime = require("react/jsx-runtime");
 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 _pluginsystem = require("@perses-dev/plugin-system");
+const _DashboardProvider = require("../../context/DashboardProvider");
 const _useDashboard = require("../../context/useDashboard");
-const EditJsonDialog = ()=>{
-    const { editJsonDialog , closeEditJsonDialog  } = (0, _dashboardProvider.useEditJsonDialog)();
-    return /*#__PURE__*/ (0, _jsxRuntime.jsxs)(_components.Dialog, {
+const EditJsonDialog = (props)=>{
+    const { isReadonly, disableMetadataEdition } = props;
+    const { editJsonDialog, closeEditJsonDialog } = (0, _DashboardProvider.useEditJsonDialog)();
+    return /*#__PURE__*/ (0, _jsxruntime.jsxs)(_components.Dialog, {
         open: !!(editJsonDialog === null || editJsonDialog === void 0 ? void 0 : editJsonDialog.isOpen),
         scroll: "paper",
         fullWidth: true,
         maxWidth: "lg",
         children: [
-            /*#__PURE__*/ (0, _jsxRuntime.jsx)(_components.Dialog.Header, {
+            /*#__PURE__*/ (0, _jsxruntime.jsxs)(_components.Dialog.Header, {
                 onClose: ()=>closeEditJsonDialog(),
-                children: "Edit Dashboard"
+                children: [
+                    !isReadonly && 'Edit ',
+                    " Dashboard JSON"
+                ]
             }),
-            (editJsonDialog === null || editJsonDialog === void 0 ? void 0 : editJsonDialog.isOpen) && /*#__PURE__*/ (0, _jsxRuntime.jsx)(EditJsonDialogForm, {})
+            (editJsonDialog === null || editJsonDialog === void 0 ? void 0 : editJsonDialog.isOpen) && /*#__PURE__*/ (0, _jsxruntime.jsx)(EditJsonDialogForm, {
+                isReadonly: isReadonly,
+                disableMetadataEdition: disableMetadataEdition
+            })
         ]
     });
 };
-const EditJsonDialogForm = ()=>{
-    const { closeEditJsonDialog  } = (0, _dashboardProvider.useEditJsonDialog)();
-    const { setTimeRange , setRefreshInterval  } = (0, _pluginSystem.useTimeRange)();
-    const { dashboard , setDashboard  } = (0, _useDashboard.useDashboard)();
+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 [draftDashboard, setDraftDashboard] = (0, _react.useState)(dashboard);
     const handleApply = (e)=>{
         e.preventDefault();
@@ -52,38 +63,56 @@ const EditJsonDialogForm = ()=>{
         setTimeRange({
             pastDuration: draftDashboard.spec.duration
         });
-        var _refreshInterval;
-        setRefreshInterval((_refreshInterval = draftDashboard.spec.refreshInterval) !== null && _refreshInterval !== void 0 ? _refreshInterval : '0s');
+        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 : {});
         closeEditJsonDialog();
     };
-    return /*#__PURE__*/ (0, _jsxRuntime.jsxs)(_components.Dialog.Form, {
+    const completeDraftDashboard = (dashboard)=>{
+        try {
+            const json = JSON.parse(dashboard !== null && dashboard !== void 0 ? dashboard : '{}');
+            setDraftDashboard(json);
+        } catch (e) {
+        // do nothing
+        }
+    };
+    return /*#__PURE__*/ (0, _jsxruntime.jsxs)(_components.Dialog.Form, {
         onSubmit: handleApply,
         children: [
-            /*#__PURE__*/ (0, _jsxRuntime.jsxs)(_components.Dialog.Content, {
+            /*#__PURE__*/ (0, _jsxruntime.jsxs)(_components.Dialog.Content, {
                 sx: {
                     width: '100%'
                 },
                 children: [
-                    /*#__PURE__*/ (0, _jsxRuntime.jsx)(_material.Alert, {
+                    disableMetadataEdition && !isReadonly && /*#__PURE__*/ (0, _jsxruntime.jsx)(_material.Alert, {
                         sx: {
                             marginBottom: (theme)=>theme.spacing(1)
                         },
                         severity: "warning",
                         children: "Metadata cannot be modified or saved."
                     }),
-                    /*#__PURE__*/ (0, _jsxRuntime.jsx)(_material.FormControl, {
+                    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, {
+                        children: /*#__PURE__*/ (0, _jsxruntime.jsx)(_components.JSONEditor, {
                             minHeight: "300px",
-                            maxHeight: "700px",
+                            maxHeight: "70vh",
                             value: draftDashboard,
-                            onChange: (value)=>setDraftDashboard(value)
+                            onChange: (value)=>completeDraftDashboard(value),
+                            readOnly: isReadonly
                         })
                     })
                 ]
             }),
-            /*#__PURE__*/ (0, _jsxRuntime.jsx)(_components.Dialog.Actions, {
-                children: /*#__PURE__*/ (0, _jsxRuntime.jsx)(_components.Dialog.PrimaryButton, {
+            !isReadonly && /*#__PURE__*/ (0, _jsxruntime.jsx)(_components.Dialog.Actions, {
+                children: /*#__PURE__*/ (0, _jsxruntime.jsx)(_components.Dialog.PrimaryButton, {
                     onClick: handleApply,
                     children: "Apply"
                 })

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

@@ -14,15 +14,17 @@
 Object.defineProperty(exports, "__esModule", {
     value: true
 });
-_exportStar(require("./EditJsonDialog"), exports);
-function _exportStar(from, to) {
+_export_star(require("./EditJsonDialog"), exports);
+function _export_star(from, to) {
     Object.keys(from).forEach(function(k) {
-        if (k !== "default" && !Object.prototype.hasOwnProperty.call(to, k)) Object.defineProperty(to, k, {
-            enumerable: true,
-            get: function() {
-                return from[k];
-            }
-        });
+        if (k !== "default" && !Object.prototype.hasOwnProperty.call(to, k)) {
+            Object.defineProperty(to, k, {
+                enumerable: true,
+                get: function() {
+                    return from[k];
+                }
+            });
+        }
     });
     return from;
 }

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

@@ -16,14 +16,16 @@ Object.defineProperty(exports, "__esModule", {
 });
 Object.defineProperty(exports, "EmptyDashboard", {
     enumerable: true,
-    get: ()=>EmptyDashboard
+    get: function() {
+        return EmptyDashboard;
+    }
 });
-const _jsxRuntime = require("react/jsx-runtime");
+const _jsxruntime = require("react/jsx-runtime");
 const _material = require("@mui/material");
 const _context = require("../../context");
-const _addPanelButton = require("../AddPanelButton");
-const _variables = require("../Variables");
-const _editButton = require("../EditButton");
+const _AddPanelButton = require("../AddPanelButton");
+const _Variables = require("../Variables");
+const _EditButton = require("../EditButton");
 const DEFAULT_TITLE = "Let's get started";
 const DEFAULT_DESCRIPTION = {
     edit: 'We currently support time series charts, gauge charts, stat charts and more!',
@@ -36,7 +38,7 @@ 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;
@@ -47,15 +49,15 @@ const EmptyDashboardActions = ({ actions , isEditMode , onEditButtonClick  })=>{
     }
     if (isEditMode) {
         // Default edit mode actions
-        return /*#__PURE__*/ (0, _jsxRuntime.jsxs)(_jsxRuntime.Fragment, {
+        return /*#__PURE__*/ (0, _jsxruntime.jsxs)(_jsxruntime.Fragment, {
             children: [
-                /*#__PURE__*/ (0, _jsxRuntime.jsx)(_addPanelButton.AddPanelButton, {
+                /*#__PURE__*/ (0, _jsxruntime.jsx)(_AddPanelButton.AddPanelButton, {
                     variant: "outlined",
                     color: "secondary",
                     label: "Add Panel",
                     fullWidth: true
                 }),
-                /*#__PURE__*/ (0, _jsxRuntime.jsx)(_variables.EditVariablesButton, {
+                /*#__PURE__*/ (0, _jsxruntime.jsx)(_Variables.EditVariablesButton, {
                     variant: "outlined",
                     color: "secondary",
                     label: "Add Variables",
@@ -66,7 +68,7 @@ const EmptyDashboardActions = ({ actions , isEditMode , onEditButtonClick  })=>{
     }
     if (onEditButtonClick) {
         // Default view mode actions
-        return /*#__PURE__*/ (0, _jsxRuntime.jsx)(_editButton.EditButton, {
+        return /*#__PURE__*/ (0, _jsxruntime.jsx)(_EditButton.EditButton, {
             ...COMMON_BUTTON_PROPS,
             label: "Edit Dashboard",
             onClick: onEditButtonClick
@@ -74,38 +76,38 @@ 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, {
+    const actionsContent = /*#__PURE__*/ (0, _jsxruntime.jsx)(EmptyDashboardActions, {
         actions: actions,
         onEditButtonClick: onEditButtonClick,
         isEditMode: isEditMode
     });
-    return /*#__PURE__*/ (0, _jsxRuntime.jsxs)(_material.Box, {
+    return /*#__PURE__*/ (0, _jsxruntime.jsxs)(_material.Box, {
         sx: {
             width: CONTAINER_WIDTH,
             textAlign: 'center',
             margin: '0 auto'
         },
         children: [
-            /*#__PURE__*/ (0, _jsxRuntime.jsxs)(_material.Box, {
+            /*#__PURE__*/ (0, _jsxruntime.jsxs)(_material.Box, {
                 sx: {
                     width: PRIMARY_CONTENT_WIDTH,
                     margin: '0 auto'
                 },
                 children: [
                     !!image && image,
-                    /*#__PURE__*/ (0, _jsxRuntime.jsx)(_material.Typography, {
+                    /*#__PURE__*/ (0, _jsxruntime.jsx)(_material.Typography, {
                         variant: "h2",
                         gutterBottom: true,
                         children: title
                     }),
-                    /*#__PURE__*/ (0, _jsxRuntime.jsx)(_material.Typography, {
+                    /*#__PURE__*/ (0, _jsxruntime.jsx)(_material.Typography, {
                         variant: "body1",
                         children: description !== null && description !== void 0 ? description : defaultDescription
                     }),
-                    actionsContent && /*#__PURE__*/ (0, _jsxRuntime.jsx)(_material.Box, {
+                    actionsContent && /*#__PURE__*/ (0, _jsxruntime.jsx)(_material.Box, {
                         sx: {
                             display: 'flex',
                             gap: 2,
@@ -116,7 +118,7 @@ const EmptyDashboard = ({ title =DEFAULT_TITLE , image , description , additiona
                     })
                 ]
             }),
-            additionalText && /*#__PURE__*/ (0, _jsxRuntime.jsx)(_material.Typography, {
+            additionalText && /*#__PURE__*/ (0, _jsxruntime.jsx)(_material.Typography, {
                 variant: "subtitle1",
                 sx: {
                     marginTop: 12

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

@@ -14,15 +14,17 @@
 Object.defineProperty(exports, "__esModule", {
     value: true
 });
-_exportStar(require("./EmptyDashboard"), exports);
-function _exportStar(from, to) {
+_export_star(require("./EmptyDashboard"), exports);
+function _export_star(from, to) {
     Object.keys(from).forEach(function(k) {
-        if (k !== "default" && !Object.prototype.hasOwnProperty.call(to, k)) Object.defineProperty(to, k, {
-            enumerable: true,
-            get: function() {
-                return from[k];
-            }
-        });
+        if (k !== "default" && !Object.prototype.hasOwnProperty.call(to, k)) {
+            Object.defineProperty(to, k, {
+                enumerable: true,
+                get: function() {
+                    return from[k];
+                }
+            });
+        }
     });
     return from;
 }

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

@@ -16,9 +16,11 @@ Object.defineProperty(exports, "__esModule", {
 });
 Object.defineProperty(exports, "GridContainer", {
     enumerable: true,
-    get: ()=>GridContainer
+    get: function() {
+        return GridContainer;
+    }
 });
-const _jsxRuntime = require("react/jsx-runtime");
+const _jsxruntime = require("react/jsx-runtime");
 const _react = require("react");
 const _material = require("@mui/material");
 function GridContainer(props) {
@@ -30,7 +32,7 @@ function GridContainer(props) {
     }, [
         isFirstRender
     ]);
-    return /*#__PURE__*/ (0, _jsxRuntime.jsx)(ReactGridLayoutContainer, {
+    return /*#__PURE__*/ (0, _jsxruntime.jsx)(ReactGridLayoutContainer, {
         sx: {
             // This adds spcing between grids (rows) in the overall dashboard
             '& + &': {
@@ -48,7 +50,7 @@ function GridContainer(props) {
 }
 /**
  * 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

@@ -16,19 +16,27 @@ Object.defineProperty(exports, "__esModule", {
 });
 Object.defineProperty(exports, "GridItemContent", {
     enumerable: true,
-    get: ()=>GridItemContent
+    get: function() {
+        return GridItemContent;
+    }
 });
-const _jsxRuntime = require("react/jsx-runtime");
-const _pluginSystem = require("@perses-dev/plugin-system");
+const _jsxruntime = require("react/jsx-runtime");
+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/Panel");
 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 { spec: { queries } } = panelDefinition;
+    const { isEditMode } = (0, _context.useEditMode)();
+    const { openEditPanel, openDeletePanelDialog, duplicatePanel } = (0, _context.usePanelActions)(panelGroupItemId);
+    const { ref, inView } = (0, _reactintersectionobserver.useInView)({
+        threshold: 0.2,
+        initialInView: false,
+        triggerOnce: true
+    });
     // Provide actions to the panel when in edit mode
     let editHandlers = undefined;
     if (isEditMode) {
@@ -39,7 +47,7 @@ function GridItemContent(props) {
         };
     }
     // map TimeSeriesQueryDefinition to Definition<UnknownSpec>
-    const suggestedStepMs = (0, _utils.useSuggestedStepMs)(width);
+    const suggestedStepMs = (0, _pluginsystem.useSuggestedStepMs)(width);
     const queryDefinitions = queries !== null && queries !== void 0 ? queries : [];
     const definitions = queryDefinitions.map((query)=>{
         return {
@@ -47,16 +55,26 @@ function GridItemContent(props) {
             spec: query.spec.plugin.spec
         };
     });
-    return /*#__PURE__*/ (0, _jsxRuntime.jsx)(_pluginSystem.DataQueriesProvider, {
-        definitions: definitions,
-        options: {
-            suggestedStepMs
+    return /*#__PURE__*/ (0, _jsxruntime.jsx)(_material.Box, {
+        ref: ref,
+        sx: {
+            width: '100%',
+            height: '100%'
         },
-        children: /*#__PURE__*/ (0, _jsxRuntime.jsx)(_panel.Panel, {
-            definition: panelDefinition,
-            editHandlers: editHandlers,
-            panelOptions: props.panelOptions,
-            panelGroupItemId: panelGroupItemId
+        children: /*#__PURE__*/ (0, _jsxruntime.jsx)(_pluginsystem.DataQueriesProvider, {
+            definitions: definitions,
+            options: {
+                suggestedStepMs
+            },
+            queryOptions: {
+                enabled: inView
+            },
+            children: inView && /*#__PURE__*/ (0, _jsxruntime.jsx)(_Panel.Panel, {
+                definition: panelDefinition,
+                editHandlers: editHandlers,
+                panelOptions: props.panelOptions,
+                panelGroupItemId: panelGroupItemId
+            })
         })
     });
 }