@perses-dev/dashboards 0.43.0-rc2 → 0.44.0-rc0

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/DashboardToolbar/DashboardToolbar.js

@@ -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
                                     }
                                 })
                             })

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({

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.

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

@@ -32,8 +32,8 @@ function _interop_require_default(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 = ()=>{

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

@@ -32,8 +32,8 @@ 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,

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();

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

@@ -28,12 +28,12 @@ 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

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
@@ -56,7 +56,7 @@ function GridTitle(props) {
             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)(()=>{
@@ -108,6 +108,7 @@ const Panel = /*#__PURE__*/ (0, _react.memo)(function Panel(props) {
                         definition.spec
                     ],
                     children: /*#__PURE__*/ (0, _jsxruntime.jsx)(_PanelContent.PanelContent, {
+                        definition: definition,
                         panelPluginKind: definition.spec.plugin.kind,
                         spec: definition.spec.plugin.spec,
                         contentDimensions: contentDimensions

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 , ...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;
@@ -42,6 +42,7 @@ function PanelContent(props) {
     }
     return /*#__PURE__*/ (0, _jsxruntime.jsx)(PanelComponent, {
         ...others,
-        contentDimensions: contentDimensions
+        contentDimensions: contentDimensions,
+        definition: definition
     });
 }

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

@@ -28,7 +28,7 @@ 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) {

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();

package/dist/cjs/components/SaveChangesConfirmationDialog/SaveChangesConfirmationDialog.js

@@ -28,17 +28,17 @@ const _core = require("@perses-dev/core");
 const _components = require("@perses-dev/components");
 const _context = require("../../context");
 const SaveChangesConfirmationDialog = ()=>{
-    const { saveChangesConfirmationDialog: dialog  } = (0, _context.useSaveChangesConfirmationDialog)();
+    const { saveChangesConfirmationDialog: dialog } = (0, _context.useSaveChangesConfirmationDialog)();
     var _dialog_isSavedDurationModified;
     const isSavedDurationModified = (_dialog_isSavedDurationModified = dialog === null || dialog === void 0 ? void 0 : dialog.isSavedDurationModified) !== null && _dialog_isSavedDurationModified !== void 0 ? _dialog_isSavedDurationModified : true;
     var _dialog_isSavedVariableModified;
     const isSavedVariableModified = (_dialog_isSavedVariableModified = dialog === null || dialog === void 0 ? void 0 : dialog.isSavedVariableModified) !== null && _dialog_isSavedVariableModified !== void 0 ? _dialog_isSavedVariableModified : true;
     const [saveDefaultTimeRange, setSaveDefaultTimeRange] = (0, _react.useState)(isSavedDurationModified);
     const [saveDefaultVariables, setSaveDefaultVariables] = (0, _react.useState)(isSavedVariableModified);
-    const { getSavedVariablesStatus  } = (0, _context.useTemplateVariableActions)();
-    const { modifiedVariableNames  } = getSavedVariablesStatus();
+    const { getSavedVariablesStatus } = (0, _context.useTemplateVariableActions)();
+    const { modifiedVariableNames } = getSavedVariablesStatus();
     const isOpen = dialog !== undefined;
-    const { timeRange  } = (0, _pluginsystem.useTimeRange)();
+    const { timeRange } = (0, _pluginsystem.useTimeRange)();
     const currentTimeRangeText = (0, _core.isRelativeTimeRange)(timeRange) ? `(Last ${timeRange.pastDuration})` : '(Absolute time ranges can not be saved)';
     const saveTimeRangeText = `Save current time range as new default ${currentTimeRangeText}`;
     const saveVariablesText = `Save current variable values as new default (${modifiedVariableNames.length > 0 ? modifiedVariableNames.join(', ') : 'No modified variables'})`;

package/dist/cjs/components/SaveDashboardButton/SaveDashboardButton.js

@@ -26,14 +26,14 @@ const _material = require("@mui/material");
 const _core = require("@perses-dev/core");
 const _pluginsystem = require("@perses-dev/plugin-system");
 const _context = require("../../context");
-const SaveDashboardButton = ({ onSave , isDisabled , variant ='contained'  })=>{
+const SaveDashboardButton = ({ onSave, isDisabled, variant = 'contained' })=>{
     const [isSavingDashboard, setSavingDashboard] = (0, _react.useState)(false);
-    const { dashboard , setDashboard  } = (0, _context.useDashboard)();
-    const { getSavedVariablesStatus , setVariableDefaultValues  } = (0, _context.useTemplateVariableActions)();
-    const { isSavedVariableModified  } = getSavedVariablesStatus();
-    const { timeRange  } = (0, _pluginsystem.useTimeRange)();
-    const { setEditMode  } = (0, _context.useEditMode)();
-    const { openSaveChangesConfirmationDialog , closeSaveChangesConfirmationDialog  } = (0, _context.useSaveChangesConfirmationDialog)();
+    const { dashboard, setDashboard } = (0, _context.useDashboard)();
+    const { getSavedVariablesStatus, setVariableDefaultValues } = (0, _context.useTemplateVariableActions)();
+    const { isSavedVariableModified } = getSavedVariablesStatus();
+    const { timeRange } = (0, _pluginsystem.useTimeRange)();
+    const { setEditMode } = (0, _context.useEditMode)();
+    const { openSaveChangesConfirmationDialog, closeSaveChangesConfirmationDialog } = (0, _context.useSaveChangesConfirmationDialog)();
     const onSaveButtonClick = ()=>{
         const isSavedDurationModified = (0, _core.isRelativeTimeRange)(timeRange) && dashboard.spec.duration !== timeRange.pastDuration;
         // Save dashboard

package/dist/cjs/components/TimeRangeControls/TimeRangeControls.js

@@ -21,12 +21,12 @@ function _export(target, all) {
     });
 }
 _export(exports, {
-    DEFAULT_TIME_RANGE_OPTIONS: function() {
-        return DEFAULT_TIME_RANGE_OPTIONS;
-    },
     DEFAULT_REFRESH_INTERVAL_OPTIONS: function() {
         return DEFAULT_REFRESH_INTERVAL_OPTIONS;
     },
+    DEFAULT_TIME_RANGE_OPTIONS: function() {
+        return DEFAULT_TIME_RANGE_OPTIONS;
+    },
     TimeRangeControls: function() {
         return TimeRangeControls;
     }
@@ -142,11 +142,11 @@ const DEFAULT_REFRESH_INTERVAL_OPTIONS = [
     }
 ];
 const DEFAULT_HEIGHT = '34px';
-function TimeRangeControls({ heightPx , showTimeRangeSelector =true , showRefreshButton =true , showRefreshInterval =true , timePresets =DEFAULT_TIME_RANGE_OPTIONS  }) {
-    const { timeRange , setTimeRange , refresh , refreshInterval , setRefreshInterval  } = (0, _pluginsystem.useTimeRange)();
+function TimeRangeControls({ heightPx, showTimeRangeSelector = true, showRefreshButton = true, showRefreshInterval = true, timePresets = DEFAULT_TIME_RANGE_OPTIONS }) {
+    const { timeRange, setTimeRange, refresh, refreshInterval, setRefreshInterval } = (0, _pluginsystem.useTimeRange)();
     // TODO: Remove this since it couples to the dashboard context
     const dashboardDuration = (0, _context.useDashboardDuration)();
-    const { dashboard , setDashboard  } = (0, _useDashboard.useDashboard)();
+    const { dashboard, setDashboard } = (0, _useDashboard.useDashboard)();
     // Convert height to a string, then use the string for styling
     const height = heightPx === undefined ? DEFAULT_HEIGHT : `${heightPx}px`;
     // add time shortcut if one does not match duration from dashboard JSON

package/dist/cjs/components/ToolbarIconButton/ToolbarIconButton.js

@@ -31,7 +31,7 @@ function IconButton(props, ref) {
         ...props
     });
 }
-const StyledIconButton = (0, _material.styled)(_material.Button)(({ theme  })=>({
+const StyledIconButton = (0, _material.styled)(_material.Button)(({ theme })=>({
         // Using a button with some adjusted styles because it is easier to inherit
         // styling and variants from themes than with an IconButton.
         padding: theme.spacing(0.5),