@perses-dev/dashboards 0.52.0-beta.4 → 0.52.0-rc.0

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

@@ -34,7 +34,7 @@ function _interop_require_default(obj) {
     };
 }
 const Panel = /*#__PURE__*/ (0, _react.memo)(function Panel(props) {
-    const { definition, readHandlers, editHandlers, onMouseEnter, onMouseLeave, sx, panelOptions, panelGroupItemId, ...others } = props;
+    const { definition, readHandlers, editHandlers, onMouseEnter, onMouseLeave, sx, panelOptions, panelGroupItemId, viewQueriesHandler, ...others } = props;
     // Make sure we have an ID we can use for aria attributes
     const generatedPanelId = (0, _components.useId)('Panel');
     const headerId = `${generatedPanelId}-header`;
@@ -142,6 +142,8 @@ const Panel = /*#__PURE__*/ (0, _react.memo)(function Panel(props) {
     const handleMouseLeave = (e)=>{
         onMouseLeave?.(e);
     };
+    // default value for showIcons: if the dashboard is in editing mode or the panel is in fullscreen mode: 'always', otherwise 'hover'
+    const showIcons = panelOptions?.showIcons ?? (editHandlers || readHandlers?.isPanelViewed ? 'always' : 'hover');
     return /*#__PURE__*/ (0, _jsxruntime.jsxs)(_material.Card, {
         component: "section",
         sx: (0, _components.combineSx)({
@@ -172,11 +174,14 @@ const Panel = /*#__PURE__*/ (0, _react.memo)(function Panel(props) {
                 queryResults: queryResults,
                 readHandlers: readHandlers,
                 editHandlers: editHandlers,
+                viewQueriesHandler: viewQueriesHandler,
                 links: definition.spec.links,
                 pluginActions: pluginActions,
+                showIcons: showIcons,
                 sx: {
                     paddingX: `${chartsTheme.container.padding.default}px`
-                }
+                },
+                dimension: contentDimensions
             }),
             /*#__PURE__*/ (0, _jsxruntime.jsx)(_material.CardContent, {
                 component: "figure",

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

@@ -24,6 +24,7 @@ const _jsxruntime = require("react/jsx-runtime");
 const _material = require("@mui/material");
 const _react = require("react");
 const _components = require("@perses-dev/components");
+const _DatabaseSearch = /*#__PURE__*/ _interop_require_default(require("mdi-material-ui/DatabaseSearch"));
 const _ArrowCollapse = /*#__PURE__*/ _interop_require_default(require("mdi-material-ui/ArrowCollapse"));
 const _ArrowExpand = /*#__PURE__*/ _interop_require_default(require("mdi-material-ui/ArrowExpand"));
 const _PencilOutline = /*#__PURE__*/ _interop_require_default(require("mdi-material-ui/PencilOutline"));
@@ -47,7 +48,7 @@ const ConditionalBox = (0, _material.styled)(_material.Box)({
     flexGrow: 1,
     justifyContent: 'flex-end'
 });
-const PanelActions = ({ editHandlers, readHandlers, extra, title, description, descriptionTooltipId, links, queryResults, pluginActions = [] })=>{
+const PanelActions = ({ editHandlers, readHandlers, viewQueriesHandler, extra, title, description, descriptionTooltipId, links, queryResults, pluginActions = [], showIcons })=>{
     const descriptionAction = (0, _react.useMemo)(()=>{
         if (description && description.trim().length > 0) {
             return /*#__PURE__*/ (0, _jsxruntime.jsx)(_components.InfoTooltip, {
@@ -124,6 +125,23 @@ const PanelActions = ({ editHandlers, readHandlers, extra, title, description, d
         readHandlers,
         title
     ]);
+    const viewQueryAction = (0, _react.useMemo)(()=>{
+        if (!viewQueriesHandler?.onClick) return null;
+        return /*#__PURE__*/ (0, _jsxruntime.jsx)(_components.InfoTooltip, {
+            description: _constants.TOOLTIP_TEXT.queryView,
+            children: /*#__PURE__*/ (0, _jsxruntime.jsx)(_HeaderIconButton.HeaderIconButton, {
+                "aria-label": _constants.ARIA_LABEL_TEXT.openQueryView(title),
+                size: "small",
+                onClick: viewQueriesHandler.onClick,
+                children: /*#__PURE__*/ (0, _jsxruntime.jsx)(_DatabaseSearch.default, {
+                    fontSize: "inherit"
+                })
+            })
+        });
+    }, [
+        viewQueriesHandler,
+        title
+    ]);
     const editActions = (0, _react.useMemo)(()=>{
         if (editHandlers !== undefined) {
             // If there are edit handlers, always just show the edit buttons
@@ -203,8 +221,8 @@ const PanelActions = ({ editHandlers, readHandlers, extra, title, description, d
             flexGrow: 1
         }
     });
-    // if the panel is in non-editing, non-fullscreen mode, show certain icons only on hover
-    const OnHover = ({ children })=>editHandlers === undefined && !readHandlers?.isPanelViewed ? /*#__PURE__*/ (0, _jsxruntime.jsx)(_material.Box, {
+    // By default, the panel header shows certain icons only on hover if the panel is in non-editing, non-fullscreen mode
+    const OnHover = ({ children })=>showIcons === 'hover' ? /*#__PURE__*/ (0, _jsxruntime.jsx)(_material.Box, {
             sx: {
                 display: 'var(--panel-hover, none)'
             },
@@ -235,6 +253,7 @@ const PanelActions = ({ editHandlers, readHandlers, extra, title, description, d
                                     " ",
                                     extraActions,
                                     " ",
+                                    viewQueryAction,
                                     readActions,
                                     " ",
                                     pluginActions,
@@ -266,13 +285,14 @@ const PanelActions = ({ editHandlers, readHandlers, extra, title, description, d
                     /*#__PURE__*/ (0, _jsxruntime.jsxs)(OnHover, {
                         children: [
                             extraActions,
-                            " ",
                             readActions,
                             /*#__PURE__*/ (0, _jsxruntime.jsxs)(OverflowMenu, {
                                 title: title,
                                 children: [
                                     editActions,
                                     " ",
+                                    viewQueryAction,
+                                    " ",
                                     pluginActions
                                 ]
                             }),
@@ -303,7 +323,7 @@ const PanelActions = ({ editHandlers, readHandlers, extra, title, description, d
                     /*#__PURE__*/ (0, _jsxruntime.jsxs)(OnHover, {
                         children: [
                             extraActions,
-                            " ",
+                            viewQueryAction,
                             readActions,
                             " ",
                             editActions,

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

@@ -24,13 +24,24 @@ 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 _react = require("react");
 const _constants = require("../../constants");
 const _PanelActions = require("./PanelActions");
-function PanelHeader({ id, title: rawTitle, description: rawDescription, links, queryResults, readHandlers, editHandlers, sx, extra, pluginActions, ...rest }) {
+function PanelHeader({ id, title: rawTitle, description: rawDescription, links, queryResults, readHandlers, editHandlers, sx, extra, pluginActions, showIcons, viewQueriesHandler, dimension, ...rest }) {
     const titleElementId = `${id}-title`;
     const descriptionTooltipId = `${id}-description`;
     const title = (0, _pluginsystem.useReplaceVariablesInString)(rawTitle);
     const description = (0, _pluginsystem.useReplaceVariablesInString)(rawDescription);
+    const textRef = (0, _react.useRef)(null);
+    const [isEllipsisActive, setIsEllipsisActive] = (0, _react.useState)(false);
+    (0, _react.useEffect)(()=>{
+        if (textRef.current && dimension?.width) {
+            setIsEllipsisActive(textRef.current.scrollWidth > textRef.current.clientWidth);
+        }
+    }, [
+        title,
+        dimension?.width
+    ]);
     return /*#__PURE__*/ (0, _jsxruntime.jsx)(_material.CardHeader, {
         id: id,
         component: "header",
@@ -42,19 +53,24 @@ function PanelHeader({ id, title: rawTitle, description: rawDescription, links,
             alignItems: "center",
             height: "var(--panel-header-height, 30px)",
             children: [
-                /*#__PURE__*/ (0, _jsxruntime.jsx)(_material.Typography, {
-                    id: titleElementId,
-                    variant: "subtitle1",
-                    sx: {
-                        // `minHeight` guarantees that the header has the correct height
-                        // when there is no title (i.e. in the preview)
-                        lineHeight: '24px',
-                        minHeight: '26px',
-                        whiteSpace: 'nowrap',
-                        overflow: 'hidden',
-                        textOverflow: 'ellipsis'
-                    },
-                    children: title
+                /*#__PURE__*/ (0, _jsxruntime.jsx)(_material.Tooltip, {
+                    title: title,
+                    disableHoverListener: !isEllipsisActive,
+                    children: /*#__PURE__*/ (0, _jsxruntime.jsx)(_material.Typography, {
+                        id: titleElementId,
+                        variant: "subtitle1",
+                        ref: textRef,
+                        sx: {
+                            // `minHeight` guarantees that the header has the correct height
+                            // when there is no title (i.e. in the preview)
+                            lineHeight: '24px',
+                            minHeight: '26px',
+                            whiteSpace: 'nowrap',
+                            overflow: 'hidden',
+                            textOverflow: 'ellipsis'
+                        },
+                        children: title
+                    })
                 }),
                 /*#__PURE__*/ (0, _jsxruntime.jsx)(_PanelActions.PanelActions, {
                     title: title,
@@ -63,9 +79,11 @@ function PanelHeader({ id, title: rawTitle, description: rawDescription, links,
                     links: links,
                     readHandlers: readHandlers,
                     editHandlers: editHandlers,
+                    viewQueriesHandler: viewQueriesHandler,
                     extra: extra,
                     queryResults: queryResults,
-                    pluginActions: pluginActions
+                    pluginActions: pluginActions,
+                    showIcons: showIcons
                 })
             ]
         }),

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

@@ -23,6 +23,7 @@ Object.defineProperty(exports, "PanelDrawer", {
 const _jsxruntime = require("react/jsx-runtime");
 const _react = require("react");
 const _components = require("@perses-dev/components");
+const _pluginsystem = require("@perses-dev/plugin-system");
 const _context = require("../../context");
 const _PanelEditorForm = require("./PanelEditorForm");
 const PanelDrawer = ()=>{
@@ -30,42 +31,78 @@ const PanelDrawer = ()=>{
     // When the user clicks close, start closing but don't call the store yet to keep values stable during animtation
     const [isClosing, setIsClosing] = (0, _react.useState)(false);
     // Drawer is open if we have a model and we're not transitioning out
-    const isOpen = panelEditor !== undefined && isClosing === false;
-    function handleSave(values) {
+    const isOpen = panelEditor !== undefined && !isClosing;
+    const handleSave = (0, _react.useCallback)((values)=>{
         // This shouldn't happen since we don't render the submit button until we have a model, but check to make TS happy
         if (panelEditor === undefined || values === undefined) {
             throw new Error('Cannot apply changes');
         }
         panelEditor.applyChanges(values);
         setIsClosing(true);
-    }
+    }, [
+        panelEditor
+    ]);
     const handleClose = ()=>{
         setIsClosing(true);
     };
     // Don't call closeDrawer on the store until the Drawer has completely transitioned out and reset close state
-    const handleExited = ()=>{
+    const handleExited = (0, _react.useCallback)(()=>{
         panelEditor?.close();
         setIsClosing(false);
-    };
+    }, [
+        panelEditor
+    ]);
     // Disables closing on click out. This is a quick-win solution to avoid losing draft changes.
     // -> TODO find a way to enable closing by clicking-out in edit view, with a discard confirmation modal popping up
     const handleClickOut = ()=>{
     /* do nothing */ };
-    return /*#__PURE__*/ (0, _jsxruntime.jsx)(_components.Drawer, {
-        isOpen: isOpen,
-        onClose: handleClickOut,
-        SlideProps: {
-            onExited: handleExited
-        },
-        "data-testid": "panel-editor",
-        children: panelEditor && /*#__PURE__*/ (0, _jsxruntime.jsx)(_components.ErrorBoundary, {
-            FallbackComponent: _components.ErrorAlert,
-            children: /*#__PURE__*/ (0, _jsxruntime.jsx)(_PanelEditorForm.PanelEditorForm, {
-                initialAction: panelEditor.mode,
-                initialValues: panelEditor.initialValues,
-                onSave: handleSave,
-                onClose: handleClose
+    const drawer = (0, _react.useMemo)(()=>{
+        return /*#__PURE__*/ (0, _jsxruntime.jsx)(_components.Drawer, {
+            isOpen: isOpen,
+            onClose: handleClickOut,
+            SlideProps: {
+                onExited: handleExited
+            },
+            "data-testid": "panel-editor",
+            children: panelEditor && /*#__PURE__*/ (0, _jsxruntime.jsx)(_components.ErrorBoundary, {
+                FallbackComponent: _components.ErrorAlert,
+                children: /*#__PURE__*/ (0, _jsxruntime.jsx)(_PanelEditorForm.PanelEditorForm, {
+                    initialAction: panelEditor.mode,
+                    initialValues: panelEditor.initialValues,
+                    onSave: handleSave,
+                    onClose: handleClose
+                })
             })
-        })
-    });
+        });
+    }, [
+        handleExited,
+        handleSave,
+        isOpen,
+        panelEditor
+    ]);
+    // If the panel editor is using a repeat variable, we need to wrap the drawer in a VariableContext.Provider
+    if (panelEditor?.panelGroupItemId?.repeatVariable) {
+        return /*#__PURE__*/ (0, _jsxruntime.jsx)(RepeatVariableWrapper, {
+            repeatVariable: panelEditor.panelGroupItemId.repeatVariable,
+            children: drawer
+        });
+    }
+    return drawer;
 };
+// Wraps the drawer in a VariableContext.Provider to provide the repeat variable value
+// This is necessary for previewing panels that use repeat variables and query editor
+function RepeatVariableWrapper({ repeatVariable, children }) {
+    const variables = (0, _pluginsystem.useVariableValues)();
+    return /*#__PURE__*/ (0, _jsxruntime.jsx)(_pluginsystem.VariableContext.Provider, {
+        value: {
+            state: {
+                ...variables,
+                [repeatVariable[0]]: {
+                    value: repeatVariable[1],
+                    loading: false
+                }
+            }
+        },
+        children: children
+    });
+}

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

@@ -24,6 +24,7 @@ const _jsxruntime = require("react/jsx-runtime");
 const _material = require("@mui/material");
 const _Close = /*#__PURE__*/ _interop_require_default(require("mdi-material-ui/Close"));
 const _react = require("react");
+const _pluginsystem = require("@perses-dev/plugin-system");
 const _context = require("../../context");
 const _PanelGroupEditorForm = require("./PanelGroupEditorForm");
 function _interop_require_default(obj) {
@@ -33,6 +34,7 @@ function _interop_require_default(obj) {
 }
 function PanelGroupDialog() {
     const panelGroupEditor = (0, _context.usePanelGroupEditor)();
+    const variables = (0, _pluginsystem.useVariableValues)();
     // When the user clicks close, start closing but don't call the store yet to keep values stable during animtation
     const [isClosing, setIsClosing] = (0, _react.useState)(false);
     const handleClose = ()=>setIsClosing(true);
@@ -81,6 +83,7 @@ function PanelGroupDialog() {
                     },
                     children: /*#__PURE__*/ (0, _jsxruntime.jsx)(_PanelGroupEditorForm.PanelGroupEditorForm, {
                         initialValues: panelGroupEditor.initialValues,
+                        variables: Object.keys(variables),
                         onSubmit: handleSubmit
                     })
                 }),

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

@@ -32,18 +32,16 @@ const _jsxruntime = require("react/jsx-runtime");
 const _react = require("react");
 const _material = require("@mui/material");
 function PanelGroupEditorForm(props) {
-    const { initialValues, onSubmit } = props;
+    const { initialValues, variables, onSubmit } = props;
     const [title, setTitle] = (0, _react.useState)(initialValues.title);
     const [isCollapsed, setIsCollapsed] = (0, _react.useState)(initialValues.isCollapsed);
-    const handleCollapsedChange = (e)=>{
-        const next = e.target.value;
-        setIsCollapsed(next === 'Closed');
-    };
+    const [repeatVariable, setRepeatVariable] = (0, _react.useState)(initialValues.repeatVariable);
     const handleSubmit = (e)=>{
         e.preventDefault();
         onSubmit({
             title,
-            isCollapsed
+            isCollapsed,
+            repeatVariable
         });
     };
     return /*#__PURE__*/ (0, _jsxruntime.jsxs)("form", {
@@ -58,25 +56,21 @@ function PanelGroupEditorForm(props) {
                     label: "Name",
                     variant: "outlined",
                     value: title,
-                    onChange: (e)=>setTitle(e.target.value)
+                    onChange: (e)=>setTitle(e.target.value),
+                    "data-testid": "panel-group-editor-name"
                 })
             }),
             /*#__PURE__*/ (0, _jsxruntime.jsxs)(_material.FormControl, {
                 fullWidth: true,
                 margin: "normal",
                 children: [
-                    /*#__PURE__*/ (0, _jsxruntime.jsx)(_material.InputLabel, {
-                        id: "select-collapse-state",
-                        children: "Collapse State"
-                    }),
-                    /*#__PURE__*/ (0, _jsxruntime.jsxs)(_material.Select, {
+                    /*#__PURE__*/ (0, _jsxruntime.jsxs)(_material.TextField, {
+                        select: true,
                         required: true,
-                        displayEmpty: true,
-                        labelId: "select-collapse-state",
                         label: "Collapse State",
                         size: "small",
                         value: isCollapsed ? 'Closed' : 'Open',
-                        onChange: handleCollapsedChange,
+                        onChange: (e)=>setIsCollapsed(e.target.value === 'Closed'),
                         children: [
                             /*#__PURE__*/ (0, _jsxruntime.jsx)(_material.MenuItem, {
                                 value: "Open",
@@ -87,6 +81,32 @@ function PanelGroupEditorForm(props) {
                                 children: "Closed"
                             })
                         ]
+                    }),
+                    /*#__PURE__*/ (0, _jsxruntime.jsx)(_material.FormControl, {
+                        fullWidth: true,
+                        margin: "normal",
+                        children: /*#__PURE__*/ (0, _jsxruntime.jsxs)(_material.TextField, {
+                            select: true,
+                            label: "Repeat Variable",
+                            variant: "outlined",
+                            value: repeatVariable ?? '',
+                            onChange: (e)=>setRepeatVariable(e.target.value === '' ? undefined : e.target.value),
+                            children: [
+                                /*#__PURE__*/ (0, _jsxruntime.jsx)(_material.MenuItem, {
+                                    value: "",
+                                    children: /*#__PURE__*/ (0, _jsxruntime.jsx)(_material.Typography, {
+                                        sx: {
+                                            fontStyle: 'italic'
+                                        },
+                                        children: "None"
+                                    })
+                                }),
+                                variables?.sort((a, b)=>a.localeCompare(b)).map((variable)=>/*#__PURE__*/ (0, _jsxruntime.jsx)(_material.MenuItem, {
+                                        value: variable,
+                                        children: variable
+                                    }, variable))
+                            ]
+                        })
                     })
                 ]
             })

package/dist/cjs/components/index.js

@@ -28,6 +28,7 @@ _export_star(require("./EditJsonButton"), exports);
 _export_star(require("./EditJsonDialog"), exports);
 _export_star(require("./EmptyDashboard"), exports);
 _export_star(require("./GridLayout"), exports);
+_export_star(require("./LeaveDialog"), exports);
 _export_star(require("./Panel"), exports);
 _export_star(require("./PanelDrawer"), exports);
 _export_star(require("./PanelGroupDialog"), exports);

package/dist/cjs/constants/user-interface-text.js

@@ -50,7 +50,8 @@ const TOOLTIP_TEXT = {
     movePanel: 'Move',
     // Variable editor buttons
     refreshVariableValues: 'Refresh values',
-    copyVariableValues: 'Copy values to clipboard'
+    copyVariableValues: 'Copy values to clipboard',
+    queryView: 'Open query view'
 };
 const ARIA_LABEL_TEXT = {
     // Group buttons
@@ -65,5 +66,6 @@ const ARIA_LABEL_TEXT = {
     duplicatePanel: (panelName)=>`duplicate panel ${panelName}`,
     deletePanel: (panelName)=>`delete panel ${panelName}`,
     showPanelActions: (panelName)=>`show panel actions for ${panelName}`,
-    movePanel: (panelName)=>`move panel ${panelName}`
+    movePanel: (panelName)=>`move panel ${panelName}`,
+    openQueryView: (panelName)=>`open query view for panel ${panelName}`
 };

package/dist/cjs/context/DashboardProvider/DashboardProvider.js

@@ -61,14 +61,15 @@ function useDashboardStore(selector) {
     return (0, _traditional.useStoreWithEqualityFn)(store, selector, _shallow.shallow);
 }
 function DashboardProvider(props) {
+    // Prevent calling createDashboardStore every time it rerenders
     const createDashboardStore = (0, _react.useCallback)(initStore, [
         props
     ]);
+    const [store] = (0, _react.useState)(createDashboardStore(props));
     // load plugin to retrieve initial spec if default panel kind is defined
     const { defaultPluginKinds } = (0, _pluginsystem.usePluginRegistry)();
     const defaultPanelKind = defaultPluginKinds?.['Panel'] ?? '';
     const { data: plugin } = (0, _pluginsystem.usePlugin)('Panel', defaultPanelKind);
-    const [store] = (0, _react.useState)(createDashboardStore(props)); // prevent calling createDashboardStore every time it rerenders
     (0, _react.useEffect)(()=>{
         if (plugin === undefined) return;
         const defaultPanelSpec = plugin.createInitialOptions ? plugin.createInitialOptions() : {};
@@ -90,12 +91,8 @@ function DashboardProvider(props) {
 }
 function initStore(props) {
     const { initialState: { dashboardResource, isEditMode, viewPanelRef, setViewPanelRef } } = props;
-    const { kind, metadata, spec: { display, duration, refreshInterval = _core.DEFAULT_REFRESH_INTERVAL, datasources } } = dashboardResource;
+    const { kind, metadata, spec: { display, duration, refreshInterval = _core.DEFAULT_REFRESH_INTERVAL, datasources, layouts = [], panels = {} } } = dashboardResource;
     const ttl = 'ttl' in dashboardResource.spec ? dashboardResource.spec.ttl : undefined;
-    let { spec: { layouts, panels } } = dashboardResource;
-    // Set fallbacks in case the frontend is used with a non-Perses backend
-    layouts = layouts ?? [];
-    panels = panels ?? {};
     const store = (0, _zustand.createStore)()((0, _immer.immer)((0, _middleware.devtools)((...args)=>{
         const [set] = args;
         return {
@@ -118,9 +115,11 @@ function initStore(props) {
             datasources,
             ttl,
             isEditMode: !!isEditMode,
-            setEditMode: (isEditMode)=>set({
+            setEditMode: (isEditMode)=>{
+                set({
                     isEditMode
-                }),
+                });
+            },
             setDashboard: ({ kind, metadata, spec: { display, panels = {}, layouts = [], duration, refreshInterval, datasources = {} } })=>{
                 set((state)=>{
                     state.kind = kind;

package/dist/cjs/context/DashboardProvider/DashboardProviderWithQueryParams.js

@@ -24,12 +24,12 @@ const _jsxruntime = require("react/jsx-runtime");
 const _usequeryparams = require("use-query-params");
 const _DashboardProvider = require("./DashboardProvider");
 function DashboardProviderWithQueryParams({ children, initialState }) {
-    const [viewPanelRef, setViewPanelRef] = (0, _usequeryparams.useQueryParam)('viewPanelRef', _usequeryparams.StringParam);
+    const [viewPanelRef, setViewPanelRef] = (0, _usequeryparams.useQueryParam)('viewPanelRef', _usequeryparams.JsonParam);
     return /*#__PURE__*/ (0, _jsxruntime.jsx)(_DashboardProvider.DashboardProvider, {
         initialState: {
+            ...initialState,
             viewPanelRef: viewPanelRef ?? undefined,
-            setViewPanelRef: setViewPanelRef,
-            ...initialState
+            setViewPanelRef: setViewPanelRef
         },
         children: children
     });

package/dist/cjs/context/DashboardProvider/panel-editor-slice.js

@@ -42,6 +42,7 @@ function createPanelEditorSlice() {
                 }
                 const editorState = {
                     mode: 'update',
+                    panelGroupItemId: panelGroupItemId,
                     initialValues: {
                         groupId: panelGroupItemId.panelGroupId,
                         panelDefinition: panelToEdit

package/dist/cjs/context/DashboardProvider/panel-group-editor-slice.js

@@ -29,12 +29,14 @@ const createPanelGroupEditorSlice = (set, get)=>({
                 mode: 'Add',
                 initialValues: {
                     title: '',
-                    isCollapsed: false
+                    isCollapsed: false,
+                    repeatVariable: ''
                 },
                 applyChanges (next) {
                     const newGroup = (0, _panelgroupslice.createEmptyPanelGroup)();
                     newGroup.title = next.title;
                     newGroup.isCollapsed = next.isCollapsed;
+                    newGroup.repeatVariable = next.repeatVariable;
                     set((draft)=>{
                         (0, _panelgroupslice.addPanelGroup)(draft, newGroup);
                     });
@@ -60,7 +62,8 @@ const createPanelGroupEditorSlice = (set, get)=>({
                 mode: 'Edit',
                 initialValues: {
                     title: existingGroup.title ?? '',
-                    isCollapsed: existingGroup.isCollapsed
+                    isCollapsed: existingGroup.isCollapsed,
+                    repeatVariable: existingGroup.repeatVariable ?? ''
                 },
                 applyChanges (next) {
                     set((draft)=>{
@@ -70,6 +73,7 @@ const createPanelGroupEditorSlice = (set, get)=>({
                         }
                         group.title = next.title;
                         group.isCollapsed = next.isCollapsed;
+                        group.repeatVariable = next.repeatVariable;
                     });
                 },
                 close () {

package/dist/cjs/context/DashboardProvider/panel-group-slice.js

@@ -100,6 +100,7 @@ function convertLayoutsToPanelGroups(layouts) {
         panelGroups[panelGroupId] = {
             id: panelGroupId,
             isCollapsed: layout.spec.display?.collapse?.open === false,
+            repeatVariable: layout.spec.repeatVariable,
             title: layout.spec.display?.title,
             itemLayouts,
             itemPanelKeys

package/dist/cjs/context/DashboardProvider/view-panel-slice.js

@@ -55,12 +55,13 @@ function getViewPanelGroupId(panelGroups, panelGroupItemId, panelRef) {
 // Find the PanelGroupItemId of a Panel from a PanelRef
 function findPanelGroupItemIdOfPanelRef(panelGroups, panelRef) {
     for (const panelGroup of Object.values(panelGroups)){
-        const itemPanel = Object.entries(panelGroup.itemPanelKeys ?? []).find(([_, value])=>value === panelRef);
+        const itemPanel = Object.entries(panelGroup.itemPanelKeys ?? []).find(([_, value])=>value === panelRef.ref);
         if (itemPanel) {
             const [key] = itemPanel;
             return {
                 panelGroupId: panelGroup.id,
-                panelGroupItemLayoutId: key
+                panelGroupItemLayoutId: key,
+                repeatVariable: panelRef.repeatVariable
             };
         }
     }
@@ -73,7 +74,13 @@ function findPanelRefOfPanelGroupItemId(panelGroups, panelGroupItemId) {
     }
     const panelGroup = panelGroups[panelGroupItemId.panelGroupId];
     if (panelGroup) {
-        return panelGroup.itemPanelKeys[panelGroupItemId.panelGroupItemLayoutId];
+        const panelRef = panelGroup.itemPanelKeys[panelGroupItemId.panelGroupItemLayoutId];
+        if (panelRef) {
+            return {
+                ref: panelRef,
+                repeatVariable: panelGroupItemId.repeatVariable
+            };
+        }
     }
     return undefined;
 }

package/dist/cjs/context/VariableProvider/VariableProvider.js

@@ -362,7 +362,7 @@ function createVariableDefinitionStore({ initialVariableDefinitions = [], extern
                 return (0, _utils.checkSavedDefaultVariableStatus)(get().variableDefinitions, get().variableState);
             }
         }))));
-    return store; // TODO: @Gladorme check if we can avoid this cast
+    return store;
 }
 function VariableProvider({ children, initialVariableDefinitions = [], externalVariableDefinitions = [], builtinVariableDefinitions = [] }) {
     const [store] = (0, _react.useState)(()=>createVariableDefinitionStore({

package/dist/cjs/context/useDashboard.js

@@ -82,11 +82,11 @@ function convertPanelGroupsToLayouts(panelGroups, panelGroupOrder) {
         if (group === undefined) {
             throw new Error('panel group not found');
         }
-        const { title, isCollapsed, itemLayouts, itemPanelKeys } = group;
+        const { title, isCollapsed, repeatVariable, itemLayouts, itemPanelKeys } = group;
         let display = undefined;
-        if (title) {
+        if (title || isCollapsed !== undefined) {
             display = {
-                title,
+                title: title ?? '',
                 collapse: {
                     open: !isCollapsed
                 }
@@ -108,7 +108,8 @@ function convertPanelGroupsToLayouts(panelGroups, panelGroupOrder) {
                         height: layout.h,
                         content: (0, _core.createPanelRef)(panelKey)
                     };
-                })
+                }),
+                repeatVariable: repeatVariable
             }
         };
         layouts.push(layout);