@perses-dev/dashboards 0.0.0-snapshot-scatter-chart-embed-8efdfab → 0.0.0-snapshot-scatterplot-fix-imports-95e1b59

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

@@ -26,7 +26,7 @@ const _components = require("@perses-dev/components");
 const _context = require("../../context");
 const _GridLayout = require("../GridLayout");
 const _EmptyDashboard = require("../EmptyDashboard");
-function Dashboard({ emptyDashboardProps , panelOptions , ...boxProps }) {
+function Dashboard({ emptyDashboardProps, panelOptions, ...boxProps }) {
     const panelGroupIds = (0, _context.usePanelGroupIds)();
     const isEmpty = !panelGroupIds.length;
     return /*#__PURE__*/ (0, _jsxruntime.jsx)(_material.Box, {

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

@@ -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
@@ -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, {
@@ -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({
@@ -85,8 +85,7 @@ function DatasourceEditor(props) {
     };
     return /*#__PURE__*/ (0, _jsxruntime.jsx)(_jsxruntime.Fragment, {
         children: datasourceEdit ? /*#__PURE__*/ (0, _jsxruntime.jsx)(_pluginsystem.DatasourceEditorForm, {
-            initialName: datasourceEdit.name,
-            initialSpec: datasourceEdit.spec,
+            initialDatasourceDefinition: datasourceEdit,
             initialAction: datasourceFormAction,
             isDraft: true,
             onSave: (name, spec)=>{

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,7 +49,7 @@ 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, _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.
@@ -61,7 +61,13 @@ function EditDatasourcesButton() {
             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,7 +30,7 @@ function _interop_require_default(obj) {
     };
 }
 const DeletePanelGroupDialog = ()=>{
-    const { deletePanelGroupDialog , closeDeletePanelGroupDialog , deletePanelGroup  } = (0, _context.useDeletePanelGroupDialog)();
+    const { deletePanelGroupDialog, closeDeletePanelGroupDialog, deletePanelGroup } = (0, _context.useDeletePanelGroupDialog)();
     const panelGroupId = deletePanelGroupDialog === null || deletePanelGroupDialog === void 0 ? void 0 : deletePanelGroupDialog.panelGroupId;
     const handleDelete = (e)=>{
         e.preventDefault();

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

@@ -28,8 +28,8 @@ const _pluginsystem = require("@perses-dev/plugin-system");
 const _DashboardProvider = require("../../context/DashboardProvider");
 const _useDashboard = require("../../context/useDashboard");
 const EditJsonDialog = (props)=>{
-    const { isReadonly , disableMetadataEdition  } = props;
-    const { editJsonDialog , closeEditJsonDialog  } = (0, _DashboardProvider.useEditJsonDialog)();
+    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",
@@ -51,11 +51,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, _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();
@@ -92,6 +92,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

@@ -38,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;
@@ -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,

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

@@ -50,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

@@ -25,15 +25,14 @@ 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");
 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 } = (0, _context.usePanelActions)(panelGroupItemId);
+    const { ref, inView } = (0, _reactintersectionobserver.useInView)({
         threshold: 0.2,
         initialInView: false,
         triggerOnce: true
@@ -48,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 {

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

@@ -33,13 +33,13 @@ const _GridContainer = require("./GridContainer");
 const DEFAULT_MARGIN = 10;
 const ResponsiveGridLayout = (0, _reactgridlayout.WidthProvider)(_reactgridlayout.Responsive);
 function GridLayout(props) {
-    const { panelGroupId /*...others */  } = props;
+    const { panelGroupId/*...others */  } = props;
     const theme = (0, _material.useTheme)();
     const groupDefinition = (0, _context.usePanelGroup)(panelGroupId);
-    const { updatePanelGroupLayouts  } = (0, _context.usePanelGroupActions)(panelGroupId);
+    const { updatePanelGroupLayouts } = (0, _context.usePanelGroupActions)(panelGroupId);
     var _ref;
     const [isOpen, setIsOpen] = (0, _react.useState)((_ref = !groupDefinition.isCollapsed) !== null && _ref !== void 0 ? _ref : true);
-    const { isEditMode  } = (0, _context.useEditMode)();
+    const { isEditMode } = (0, _context.useEditMode)();
     const [gridColWidth, setGridColWidth] = (0, _react.useState)(0);
     const handleLayoutChange = (currentLayout, allLayouts)=>{
         // Using the value from `allLayouts` instead of `currentLayout` because of
@@ -103,7 +103,7 @@ function GridLayout(props) {
                     },
                     onLayoutChange: handleLayoutChange,
                     onWidthChange: handleWidthChange,
-                    children: groupDefinition.itemLayouts.map(({ i , w  })=>/*#__PURE__*/ (0, _jsxruntime.jsx)("div", {
+                    children: groupDefinition.itemLayouts.map(({ i, w })=>/*#__PURE__*/ (0, _jsxruntime.jsx)("div", {
                             children: /*#__PURE__*/ (0, _jsxruntime.jsx)(_components.ErrorBoundary, {
                                 FallbackComponent: _components.ErrorAlert,
                                 children: /*#__PURE__*/ (0, _jsxruntime.jsx)(_GridItemContent.GridItemContent, {

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

@@ -39,11 +39,11 @@ function _interop_require_default(obj) {
     };
 }
 function GridTitle(props) {
-    const { panelGroupId , title: rawTitle , collapse  } = props;
+    const { panelGroupId, title: rawTitle, collapse } = props;
     const title = (0, _pluginsystem.useReplaceVariablesInString)(rawTitle);
-    const { openAddPanel , openEditPanelGroup , moveUp , moveDown  } = (0, _context.usePanelGroupActions)(panelGroupId);
-    const { openDeletePanelGroupDialog  } = (0, _context.useDeletePanelGroupDialog)();
-    const { isEditMode  } = (0, _context.useEditMode)();
+    const { openAddPanel, openEditPanelGroup, moveUp, moveDown } = (0, _context.usePanelGroupActions)(panelGroupId);
+    const { openDeletePanelGroupDialog } = (0, _context.useDeletePanelGroupDialog)();
+    const { isEditMode } = (0, _context.useEditMode)();
     const text = /*#__PURE__*/ (0, _jsxruntime.jsx)(_material.Typography, {
         variant: "h2",
         children: title
@@ -54,9 +54,8 @@ function GridTitle(props) {
             display: 'flex',
             justifyContent: 'start',
             alignItems: 'center',
-            padding: (theme)=>theme.spacing(1),
             cursor: collapse ? 'pointer' : 'auto',
-            backgroundColor: ({ palette  })=>palette.background.paper
+            backgroundColor: ({ palette })=>palette.background.paper
         },
         "data-testid": "panel-group-header",
         children: collapse ? /*#__PURE__*/ (0, _jsxruntime.jsxs)(_jsxruntime.Fragment, {

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

@@ -34,12 +34,12 @@ function _interop_require_default(obj) {
 }
 const Panel = /*#__PURE__*/ (0, _react.memo)(function Panel(props) {
     var _panelOptions_extra;
-    const { definition , editHandlers , onMouseEnter , onMouseLeave , sx , panelOptions , panelGroupItemId , ...others } = props;
+    const { definition, editHandlers, onMouseEnter, onMouseLeave, sx, panelOptions, panelGroupItemId, ...others } = props;
     // Make sure we have an ID we can use for aria attributes
     const generatedPanelId = (0, _components.useId)('Panel');
     const headerId = `${generatedPanelId}-header`;
     const [contentElement, setContentElement] = (0, _react.useState)(null);
-    const { width , height  } = (0, _useresizeobserver.default)({
+    const { width, height } = (0, _useresizeobserver.default)({
         ref: contentElement
     });
     const contentDimensions = (0, _react.useMemo)(()=>{

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

@@ -24,8 +24,8 @@ const _jsxruntime = require("react/jsx-runtime");
 const _pluginsystem = require("@perses-dev/plugin-system");
 const _material = require("@mui/material");
 function PanelContent(props) {
-    const { panelPluginKind , contentDimensions , definition , ...others } = props;
-    const { data: plugin , isLoading  } = (0, _pluginsystem.usePlugin)('Panel', panelPluginKind, {
+    const { panelPluginKind, contentDimensions, definition, ...others } = props;
+    const { data: plugin, isLoading } = (0, _pluginsystem.usePlugin)('Panel', panelPluginKind, {
         useErrorBoundary: true
     });
     const PanelComponent = plugin === null || plugin === void 0 ? void 0 : plugin.PanelComponent;

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

@@ -35,7 +35,7 @@ function _interop_require_default(obj) {
         default: obj
     };
 }
-function PanelHeader({ id , title: rawTitle , description: rawDescription , editHandlers , sx , extra , ...rest }) {
+function PanelHeader({ id, title: rawTitle, description: rawDescription, editHandlers, sx, extra, ...rest }) {
     const titleElementId = `${id}-title`;
     const descriptionTooltipId = `${id}-description`;
     const title = (0, _pluginsystem.useReplaceVariablesInString)(rawTitle);
@@ -169,7 +169,7 @@ function PanelHeader({ id , title: rawTitle , description: rawDescription , edit
         ...rest
     });
 }
-const HeaderIconButton = (0, _material.styled)(_material.IconButton)(({ theme  })=>({
+const HeaderIconButton = (0, _material.styled)(_material.IconButton)(({ theme })=>({
         borderRadius: theme.shape.borderRadius,
         padding: '4px'
     }));

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

@@ -40,11 +40,11 @@ const _validation = require("../../validation");
 const _PanelPreview = require("./PanelPreview");
 const _usePanelEditor = require("./usePanelEditor");
 function PanelEditorForm(props) {
-    const { initialValues: { panelDefinition: initialPanelDef , groupId: initialGroupId  } , initialAction , onSave , onClose  } = props;
+    const { initialValues: { panelDefinition: initialPanelDef, groupId: initialGroupId }, initialAction, onSave, onClose } = props;
     const panelGroups = (0, _context.useListPanelGroups)();
     const [groupId, setGroupId] = (0, _react.useState)(initialGroupId);
-    const { panelDefinition , setName , setDescription , setQueries , setPlugin , setPanelDefinition  } = (0, _usePanelEditor.usePanelEditor)(initialPanelDef);
-    const { plugin  } = panelDefinition.spec;
+    const { panelDefinition, setName, setDescription, setQueries, setPlugin, setPanelDefinition } = (0, _usePanelEditor.usePanelEditor)(initialPanelDef);
+    const { plugin } = panelDefinition.spec;
     const [isDiscardDialogOpened, setDiscardDialogOpened] = (0, _react.useState)(false);
     // Use common plugin editor logic even though we've split the inputs up in this form
     const pluginEditor = (0, _pluginsystem.usePluginEditor)({
@@ -98,14 +98,13 @@ function PanelEditorForm(props) {
     }
     const handlePanelDefinitionChange = (nextPanelDefStr)=>{
         const nextPanelDef = JSON.parse(nextPanelDefStr);
-        const { kind: pluginKind , spec: pluginSpec  } = nextPanelDef.spec.plugin;
+        const { kind: pluginKind, spec: pluginSpec } = nextPanelDef.spec.plugin;
         // if panel plugin kind and spec are modified, then need to save current spec
         if (panelDefinition.spec.plugin.kind !== pluginKind && JSON.stringify(panelDefinition.spec.plugin.spec) !== JSON.stringify(pluginSpec)) {
             pluginEditor.rememberCurrentSpecState();
         }
         setPanelDefinition(nextPanelDef);
     };
-    var _panelGroup_title, _pluginEditor_error_message;
     return /*#__PURE__*/ (0, _jsxruntime.jsxs)(_reacthookform.FormProvider, {
         ...form,
         children: [
@@ -161,9 +160,9 @@ function PanelEditorForm(props) {
                             xs: 8,
                             children: /*#__PURE__*/ (0, _jsxruntime.jsx)(_reacthookform.Controller, {
                                 name: "name",
-                                render: ({ field , fieldState  })=>{
+                                render: ({ field, fieldState })=>{
                                     var _fieldState_error;
-                                    /*#__PURE__*/ return (0, _jsxruntime.jsx)(_material.TextField, {
+                                    return /*#__PURE__*/ (0, _jsxruntime.jsx)(_material.TextField, {
                                         ...field,
                                         required: true,
                                         fullWidth: true,
@@ -183,9 +182,9 @@ function PanelEditorForm(props) {
                             xs: 4,
                             children: /*#__PURE__*/ (0, _jsxruntime.jsx)(_reacthookform.Controller, {
                                 name: "groupId",
-                                render: ({ field , fieldState  })=>{
+                                render: ({ field, fieldState })=>{
                                     var _fieldState_error;
-                                    /*#__PURE__*/ return (0, _jsxruntime.jsx)(_material.TextField, {
+                                    return /*#__PURE__*/ (0, _jsxruntime.jsx)(_material.TextField, {
                                         select: true,
                                         ...field,
                                         required: true,
@@ -197,10 +196,13 @@ function PanelEditorForm(props) {
                                             field.onChange(event);
                                             setGroupId(+event.target.value);
                                         },
-                                        children: panelGroups.map((panelGroup, index)=>/*#__PURE__*/ (0, _jsxruntime.jsx)(_material.MenuItem, {
+                                        children: panelGroups.map((panelGroup, index)=>/*#__PURE__*/ {
+                                            var _panelGroup_title;
+                                            return (0, _jsxruntime.jsx)(_material.MenuItem, {
                                                 value: panelGroup.id,
                                                 children: (_panelGroup_title = panelGroup.title) !== null && _panelGroup_title !== void 0 ? _panelGroup_title : `Group ${index + 1}`
-                                            }, panelGroup.id))
+                                            }, panelGroup.id);
+                                        })
                                     });
                                 }
                             })
@@ -210,9 +212,9 @@ function PanelEditorForm(props) {
                             xs: 8,
                             children: /*#__PURE__*/ (0, _jsxruntime.jsx)(_reacthookform.Controller, {
                                 name: "description",
-                                render: ({ field , fieldState  })=>{
+                                render: ({ field, fieldState })=>{
                                     var _fieldState_error;
-                                    /*#__PURE__*/ return (0, _jsxruntime.jsx)(_material.TextField, {
+                                    return /*#__PURE__*/ (0, _jsxruntime.jsx)(_material.TextField, {
                                         ...field,
                                         fullWidth: true,
                                         label: "Description",
@@ -231,9 +233,10 @@ function PanelEditorForm(props) {
                             xs: 4,
                             children: /*#__PURE__*/ (0, _jsxruntime.jsx)(_reacthookform.Controller, {
                                 name: "type",
-                                render: ({ field , fieldState  })=>{
+                                render: ({ field, fieldState })=>/*#__PURE__*/ {
                                     var _pluginEditor_error, _fieldState_error;
-                                    /*#__PURE__*/ return (0, _jsxruntime.jsx)(_pluginsystem.PluginKindSelect, {
+                                    var _pluginEditor_error_message;
+                                    return (0, _jsxruntime.jsx)(_pluginsystem.PluginKindSelect, {
                                         ...field,
                                         pluginType: "Panel",
                                         required: true,

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

@@ -25,16 +25,15 @@ const _react = require("react");
 const _material = require("@mui/material");
 const _pluginsystem = require("@perses-dev/plugin-system");
 const _Panel = require("../Panel");
-const _utils = require("../../utils");
 const PANEL_PREVIEW_HEIGHT = 300;
 const PANEL_PREVIEW_DEFAULT_WIDTH = 840;
-function PanelPreview({ panelDefinition  }) {
+function PanelPreview({ panelDefinition }) {
     const boxRef = (0, _react.useRef)(null);
     let width = PANEL_PREVIEW_DEFAULT_WIDTH;
     if (boxRef.current !== null) {
         width = boxRef.current.getBoundingClientRect().width;
     }
-    const suggestedStepMs = (0, _utils.useSuggestedStepMs)(width);
+    const suggestedStepMs = (0, _pluginsystem.useSuggestedStepMs)(width);
     if (panelDefinition.spec.plugin.kind === '') {
         return null;
     }

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

@@ -22,7 +22,7 @@ Object.defineProperty(exports, "usePanelEditor", {
 });
 const _react = require("react");
 const usePanelEditor = (panelDefinition)=>{
-    const { display , plugin: pluginDefinition , queries: initialQueries  } = panelDefinition.spec;
+    const { display, plugin: pluginDefinition, queries: initialQueries } = panelDefinition.spec;
     const [name, setName] = (0, _react.useState)(display.name);
     const [description, setDescription] = (0, _react.useState)(display.description);
     const [plugin, setPlugin] = (0, _react.useState)(pluginDefinition);
@@ -47,7 +47,7 @@ const usePanelEditor = (panelDefinition)=>{
     ]);
     // reset panel definition
     const setPanelDefinition = (0, _react.useCallback)((panelDefinition)=>{
-        const { display , plugin , queries  } = panelDefinition.spec;
+        const { display, plugin, queries } = panelDefinition.spec;
         setName(display.name);
         setDescription(display.description);
         setPlugin(plugin);

package/dist/cjs/components/PanelGroupDialog/PanelGroupEditorForm.js

@@ -32,7 +32,7 @@ const _jsxruntime = require("react/jsx-runtime");
 const _react = require("react");
 const _material = require("@mui/material");
 function PanelGroupEditorForm(props) {
-    const { initialValues , onSubmit  } = props;
+    const { initialValues, onSubmit } = props;
     const [title, setTitle] = (0, _react.useState)(initialValues.title);
     const [isCollapsed, setIsCollapsed] = (0, _react.useState)(initialValues.isCollapsed);
     const handleCollapsedChange = (e)=>{

package/dist/cjs/components/QuerySummaryTable/QuerySummaryTable.js

@@ -26,11 +26,11 @@ const _reactquery = require("@tanstack/react-query");
 const _pluginsystem = require("@perses-dev/plugin-system");
 const TABLE_MAX_WIDTH = 1000;
 function QuerySummaryTable(props) {
-    const { showTotalQueries =true  } = props;
+    const { showTotalQueries = true } = props;
     const datasourceClient = (0, _pluginsystem.useDatasourceClient)({
         kind: 'PrometheusDatasource'
     });
-    const { absoluteTimeRange  } = (0, _pluginsystem.useTimeRange)();
+    const { absoluteTimeRange } = (0, _pluginsystem.useTimeRange)();
     // for displaying a summary of recent query results
     const queryClient = (0, _reactquery.useQueryClient)();
     const queries = queryClient.getQueryCache().findAll();