@perses-dev/dashboards 0.0.0-snapshot-ts-panel-actions-90e9ef0 → 0.0.0-snapshot-reverse-proxy-75afbd7

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

@@ -63,8 +63,6 @@ function DashboardStickyToolbar(props) {
                         display: "flex",
                         flexWrap: !isSticky && isBiggerThanMd ? 'wrap' : 'nowrap',
                         maxWidth: isSticky || !isBiggerThanMd ? '100vw' : '100%',
-                        maxHeight: "150px" // Limit the vertical space used to ~3 rows of variables
-                        ,
                         pt: 1,
                         pl: isSticky ? 1 : 0,
                         mt: isSticky && isBiggerThanMd ? 0.5 : 0,

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

@@ -21,14 +21,9 @@ Object.defineProperty(exports, "DeletePanelGroupDialog", {
     }
 });
 const _jsxruntime = require("react/jsx-runtime");
+const _components = require("@perses-dev/components");
 const _material = require("@mui/material");
-const _Close = /*#__PURE__*/ _interop_require_default(require("mdi-material-ui/Close"));
 const _context = require("../../context");
-function _interop_require_default(obj) {
-    return obj && obj.__esModule ? obj : {
-        default: obj
-    };
-}
 const DeletePanelGroupDialog = ()=>{
     const { deletePanelGroupDialog, closeDeletePanelGroupDialog, deletePanelGroup } = (0, _context.useDeletePanelGroupDialog)();
     const { setViewPanel } = (0, _context.useViewPanel)();
@@ -42,26 +37,16 @@ const DeletePanelGroupDialog = ()=>{
         closeDeletePanelGroupDialog();
         setViewPanel(undefined);
     };
-    return /*#__PURE__*/ (0, _jsxruntime.jsxs)(_material.Dialog, {
+    return /*#__PURE__*/ (0, _jsxruntime.jsxs)(_components.Dialog, {
         open: deletePanelGroupDialog !== undefined,
         children: [
-            /*#__PURE__*/ (0, _jsxruntime.jsx)(_material.DialogTitle, {
+            /*#__PURE__*/ (0, _jsxruntime.jsx)(_components.Dialog.Header, {
                 children: "Delete Panel Group"
             }),
-            /*#__PURE__*/ (0, _jsxruntime.jsx)(_material.IconButton, {
-                "aria-label": "Close",
-                onClick: ()=>closeDeletePanelGroupDialog(),
-                sx: (theme)=>({
-                        position: 'absolute',
-                        top: theme.spacing(0.5),
-                        right: theme.spacing(0.5)
-                    }),
-                children: /*#__PURE__*/ (0, _jsxruntime.jsx)(_Close.default, {})
-            }),
             /*#__PURE__*/ (0, _jsxruntime.jsxs)("form", {
                 onSubmit: handleDelete,
                 children: [
-                    /*#__PURE__*/ (0, _jsxruntime.jsxs)(_material.DialogContent, {
+                    /*#__PURE__*/ (0, _jsxruntime.jsxs)(_components.Dialog.Content, {
                         dividers: true,
                         sx: {
                             width: '500px'
@@ -72,7 +57,7 @@ const DeletePanelGroupDialog = ()=>{
                             "? This will delete all the panels within the group."
                         ]
                     }),
-                    /*#__PURE__*/ (0, _jsxruntime.jsxs)(_material.DialogActions, {
+                    /*#__PURE__*/ (0, _jsxruntime.jsxs)(_components.Dialog.Actions, {
                         children: [
                             /*#__PURE__*/ (0, _jsxruntime.jsx)(_material.Button, {
                                 variant: "contained",

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

@@ -24,9 +24,52 @@ const _jsxruntime = require("react/jsx-runtime");
 const _material = require("@mui/material");
 const _reactintersectionobserver = require("react-intersection-observer");
 const _pluginsystem = require("@perses-dev/plugin-system");
+const _react = /*#__PURE__*/ _interop_require_wildcard(require("react"));
 const _context = require("../../context");
 const _Panel = require("../Panel");
 const _panelgroupslice = require("../../context/DashboardProvider/panel-group-slice");
+const _QueryViewerDialog = require("../QueryViewerDialog");
+function _getRequireWildcardCache(nodeInterop) {
+    if (typeof WeakMap !== "function") return null;
+    var cacheBabelInterop = new WeakMap();
+    var cacheNodeInterop = new WeakMap();
+    return (_getRequireWildcardCache = function(nodeInterop) {
+        return nodeInterop ? cacheNodeInterop : cacheBabelInterop;
+    })(nodeInterop);
+}
+function _interop_require_wildcard(obj, nodeInterop) {
+    if (!nodeInterop && obj && obj.__esModule) {
+        return obj;
+    }
+    if (obj === null || typeof obj !== "object" && typeof obj !== "function") {
+        return {
+            default: obj
+        };
+    }
+    var cache = _getRequireWildcardCache(nodeInterop);
+    if (cache && cache.has(obj)) {
+        return cache.get(obj);
+    }
+    var newObj = {
+        __proto__: null
+    };
+    var hasPropertyDescriptor = Object.defineProperty && Object.getOwnPropertyDescriptor;
+    for(var key in obj){
+        if (key !== "default" && Object.prototype.hasOwnProperty.call(obj, key)) {
+            var desc = hasPropertyDescriptor ? Object.getOwnPropertyDescriptor(obj, key) : null;
+            if (desc && (desc.get || desc.set)) {
+                Object.defineProperty(newObj, key, desc);
+            } else {
+                newObj[key] = obj[key];
+            }
+        }
+    }
+    newObj.default = obj;
+    if (cache) {
+        cache.set(obj, newObj);
+    }
+    return newObj;
+}
 function GridItemContent(props) {
     const { panelGroupItemId, width } = props;
     const panelDefinition = (0, _context.usePanel)(panelGroupItemId);
@@ -39,6 +82,17 @@ function GridItemContent(props) {
         initialInView: false,
         triggerOnce: true
     });
+    const [openQueryViewer, setOpenQueryViewer] = (0, _react.useState)(false);
+    const viewQueriesHandler = (0, _react.useMemo)(()=>{
+        return isEditMode || !queries?.length ? undefined : {
+            onClick: ()=>{
+                setOpenQueryViewer(true);
+            }
+        };
+    }, [
+        isEditMode,
+        queries
+    ]);
     const readHandlers = {
         isPanelViewed: (0, _panelgroupslice.isPanelGroupItemIdEqual)(viewPanelGroupItemId, panelGroupItemId),
         onViewPanelClick: function() {
@@ -69,28 +123,36 @@ function GridItemContent(props) {
         };
     });
     const pluginQueryOptions = typeof plugin?.queryOptions === 'function' ? plugin?.queryOptions(panelDefinition.spec.plugin.spec) : plugin?.queryOptions;
-    return /*#__PURE__*/ (0, _jsxruntime.jsx)(_material.Box, {
+    return /*#__PURE__*/ (0, _jsxruntime.jsxs)(_material.Box, {
         ref: ref,
         sx: {
             width: '100%',
             height: '100%'
         },
-        children: /*#__PURE__*/ (0, _jsxruntime.jsx)(_pluginsystem.DataQueriesProvider, {
-            definitions: definitions,
-            options: {
-                suggestedStepMs,
-                ...pluginQueryOptions
-            },
-            queryOptions: {
-                enabled: inView
-            },
-            children: inView && /*#__PURE__*/ (0, _jsxruntime.jsx)(_Panel.Panel, {
-                definition: panelDefinition,
-                readHandlers: readHandlers,
-                editHandlers: editHandlers,
-                panelOptions: props.panelOptions,
-                panelGroupItemId: panelGroupItemId
+        children: [
+            /*#__PURE__*/ (0, _jsxruntime.jsx)(_pluginsystem.DataQueriesProvider, {
+                definitions: definitions,
+                options: {
+                    suggestedStepMs,
+                    ...pluginQueryOptions
+                },
+                queryOptions: {
+                    enabled: inView
+                },
+                children: inView && /*#__PURE__*/ (0, _jsxruntime.jsx)(_Panel.Panel, {
+                    definition: panelDefinition,
+                    readHandlers: readHandlers,
+                    editHandlers: editHandlers,
+                    viewQueriesHandler: viewQueriesHandler,
+                    panelOptions: props.panelOptions,
+                    panelGroupItemId: panelGroupItemId
+                })
+            }),
+            /*#__PURE__*/ (0, _jsxruntime.jsx)(_QueryViewerDialog.QueryViewerDialog, {
+                open: openQueryViewer,
+                queryDefinitions: queryDefinitions,
+                onClose: ()=>setOpenQueryViewer(false)
             })
-        })
+        ]
     });
 }

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

@@ -14,67 +14,34 @@
 Object.defineProperty(exports, "__esModule", {
     value: true
 });
-Object.defineProperty(exports, "GridLayout", {
-    enumerable: true,
-    get: function() {
+function _export(target, all) {
+    for(var name in all)Object.defineProperty(target, name, {
+        enumerable: true,
+        get: all[name]
+    });
+}
+_export(exports, {
+    GridLayout: function() {
         return GridLayout;
+    },
+    RepeatGridLayout: function() {
+        return RepeatGridLayout;
     }
 });
 const _jsxruntime = require("react/jsx-runtime");
 const _react = require("react");
-const _reactgridlayout = require("react-grid-layout");
-const _material = require("@mui/material");
-const _components = require("@perses-dev/components");
+const _pluginsystem = require("@perses-dev/plugin-system");
 const _context = require("../../context");
 const _constants = require("../../constants");
-const _GridTitle = require("./GridTitle");
-const _GridItemContent = require("./GridItemContent");
-const _GridContainer = require("./GridContainer");
-const DEFAULT_MARGIN = 10;
-const ROW_HEIGHT = 30;
+const _Row = require("./Row");
 function GridLayout(props) {
     const { panelGroupId, panelOptions, panelFullHeight } = props;
-    const theme = (0, _material.useTheme)();
     const groupDefinition = (0, _context.usePanelGroup)(panelGroupId);
     const { updatePanelGroupLayouts } = (0, _context.usePanelGroupActions)(panelGroupId);
-    const [isOpen, setIsOpen] = (0, _react.useState)(!groupDefinition.isCollapsed);
+    const viewPanelItemId = (0, _context.useViewPanelGroup)();
     const { isEditMode } = (0, _context.useEditMode)();
     const [gridColWidth, setGridColWidth] = (0, _react.useState)(0);
-    const viewPanelItemId = (0, _context.useViewPanelGroup)();
     const hasViewPanel = viewPanelItemId?.panelGroupId === panelGroupId; // current panelGroup contains the panel extended?
-    const itemLayoutViewed = viewPanelItemId?.panelGroupItemLayoutId;
-    (0, _react.useEffect)(()=>{
-        if (hasViewPanel) {
-            setIsOpen(true);
-        }
-    }, [
-        hasViewPanel
-    ]);
-    // If there is a panel in view mode, we should hide the grid if the panel is not in the current group.
-    const isGridDisplayed = viewPanelItemId === undefined || hasViewPanel;
-    // Item layout is override if there is a panel in view mode
-    const itemLayouts = (0, _react.useMemo)(()=>{
-        if (itemLayoutViewed) {
-            return groupDefinition.itemLayouts.map((itemLayout)=>{
-                if (itemLayout.i === itemLayoutViewed) {
-                    const rowTitleHeight = 40 + 8; // 40 is the height of the row title and 8 is the margin height
-                    return {
-                        h: Math.round(((panelFullHeight ?? window.innerHeight) - rowTitleHeight) / (ROW_HEIGHT + DEFAULT_MARGIN)),
-                        i: itemLayoutViewed,
-                        w: 48,
-                        x: 0,
-                        y: 0
-                    };
-                }
-                return itemLayout;
-            });
-        }
-        return groupDefinition.itemLayouts;
-    }, [
-        groupDefinition.itemLayouts,
-        itemLayoutViewed,
-        panelFullHeight
-    ]);
     const handleLayoutChange = (currentLayout, allLayouts)=>{
         // Using the value from `allLayouts` instead of `currentLayout` because of
         // a bug in react-layout-grid where `currentLayout` does not adjust properly
@@ -95,85 +62,70 @@ function GridLayout(props) {
         // exclude margin and padding from total width
         setGridColWidth((containerWidth - marginWidth - containerPaddingWidth) / cols);
     };
-    // https://github.com/react-grid-layout/react-grid-layout?tab=readme-ov-file#react-hooks-performance
-    const ResponsiveGridLayout = (0, _react.useMemo)(()=>(0, _reactgridlayout.WidthProvider)(_reactgridlayout.Responsive), []);
-    return /*#__PURE__*/ (0, _jsxruntime.jsxs)(_GridContainer.GridContainer, {
-        sx: {
-            display: isGridDisplayed ? 'block' : 'none',
-            height: itemLayoutViewed ? `${panelFullHeight}px` : 'unset',
-            overflow: itemLayoutViewed ? 'hidden' : 'unset'
-        },
-        children: [
-            groupDefinition.title !== undefined && /*#__PURE__*/ (0, _jsxruntime.jsx)(_GridTitle.GridTitle, {
-                panelGroupId: panelGroupId,
-                title: groupDefinition.title,
-                collapse: groupDefinition.isCollapsed === undefined ? undefined : {
-                    isOpen,
-                    onToggleOpen: ()=>setIsOpen((current)=>!current)
-                }
-            }),
-            /*#__PURE__*/ (0, _jsxruntime.jsx)(_material.Collapse, {
-                in: isOpen,
-                unmountOnExit: true,
-                appear: false,
-                "data-testid": "panel-group-content",
-                children: /*#__PURE__*/ (0, _jsxruntime.jsx)(ResponsiveGridLayout, {
-                    className: "layout",
-                    breakpoints: {
-                        sm: theme.breakpoints.values.sm,
-                        xxs: 0
-                    },
-                    cols: _constants.GRID_LAYOUT_COLS,
-                    rowHeight: ROW_HEIGHT,
-                    draggableHandle: ".drag-handle",
-                    resizeHandles: [
-                        'se'
-                    ],
-                    isDraggable: isEditMode && !hasViewPanel,
-                    isResizable: isEditMode && !hasViewPanel,
-                    margin: [
-                        DEFAULT_MARGIN,
-                        DEFAULT_MARGIN
-                    ],
-                    containerPadding: [
-                        0,
-                        10
-                    ],
-                    layouts: {
-                        [_constants.GRID_LAYOUT_SMALL_BREAKPOINT]: itemLayouts
-                    },
-                    onLayoutChange: handleLayoutChange,
-                    onWidthChange: handleWidthChange,
-                    allowOverlap: hasViewPanel,
-                    children: itemLayouts.map(({ i, w })=>/*#__PURE__*/ (0, _jsxruntime.jsx)("div", {
-                            style: {
-                                display: itemLayoutViewed !== undefined ? itemLayoutViewed === i ? 'unset' : 'none' : 'unset'
-                            },
-                            children: /*#__PURE__*/ (0, _jsxruntime.jsx)(_components.ErrorBoundary, {
-                                FallbackComponent: _components.ErrorAlert,
-                                children: /*#__PURE__*/ (0, _jsxruntime.jsx)(_GridItemContent.GridItemContent, {
-                                    panelOptions: panelOptions,
-                                    panelGroupItemId: {
-                                        panelGroupId,
-                                        panelGroupItemLayoutId: i
-                                    },
-                                    width: calculateGridItemWidth(w, gridColWidth)
-                                })
-                            })
-                        }, i))
+    return /*#__PURE__*/ (0, _jsxruntime.jsx)(_jsxruntime.Fragment, {
+        children: !groupDefinition.repeatVariable ? /*#__PURE__*/ (0, _jsxruntime.jsx)(_Row.Row, {
+            panelGroupId: panelGroupId,
+            groupDefinition: groupDefinition,
+            gridColWidth: gridColWidth,
+            panelFullHeight: panelFullHeight,
+            panelOptions: panelOptions,
+            isEditMode: isEditMode,
+            onLayoutChange: handleLayoutChange,
+            onWidthChange: handleWidthChange
+        }) : /*#__PURE__*/ (0, _jsxruntime.jsx)(RepeatGridLayout, {
+            repeatVariableName: groupDefinition.repeatVariable,
+            panelGroupId: panelGroupId,
+            groupDefinition: groupDefinition,
+            gridColWidth: gridColWidth,
+            panelFullHeight: panelFullHeight,
+            panelOptions: panelOptions,
+            isEditMode: isEditMode,
+            onLayoutChange: handleLayoutChange,
+            onWidthChange: handleWidthChange
+        })
+    });
+}
+function RepeatGridLayout({ repeatVariableName, panelGroupId, groupDefinition, gridColWidth, panelFullHeight, panelOptions, isEditMode = false, onLayoutChange, onWidthChange }) {
+    const variables = (0, _pluginsystem.useVariableValues)();
+    const variable = variables[repeatVariableName];
+    // If the variable is not defined, or if it is defined but has no values, render a standard row without repeating
+    if (variable === undefined || !Array.isArray(variable.value) || variable.value.length === 0) {
+        return /*#__PURE__*/ (0, _jsxruntime.jsx)(_Row.Row, {
+            panelGroupId: panelGroupId,
+            groupDefinition: groupDefinition,
+            gridColWidth: gridColWidth,
+            panelFullHeight: panelFullHeight,
+            panelOptions: panelOptions,
+            isEditMode: isEditMode,
+            onLayoutChange: onLayoutChange,
+            onWidthChange: onWidthChange
+        });
+    }
+    return /*#__PURE__*/ (0, _jsxruntime.jsx)(_jsxruntime.Fragment, {
+        children: variable.value.map((value)=>/*#__PURE__*/ (0, _jsxruntime.jsx)(_pluginsystem.VariableContext.Provider, {
+                value: {
+                    state: {
+                        ...variables,
+                        [repeatVariableName]: {
+                            value,
+                            loading: false
+                        }
+                    }
+                },
+                children: /*#__PURE__*/ (0, _jsxruntime.jsx)(_Row.Row, {
+                    panelGroupId: panelGroupId,
+                    groupDefinition: groupDefinition,
+                    gridColWidth: gridColWidth,
+                    panelFullHeight: panelFullHeight,
+                    panelOptions: panelOptions,
+                    isEditMode: isEditMode,
+                    onLayoutChange: onLayoutChange,
+                    onWidthChange: onWidthChange,
+                    repeatVariable: [
+                        repeatVariableName,
+                        value
+                    ]
                 })
-            })
-        ]
+            }, `${repeatVariableName}-${value}`))
     });
 }
-/**
- * Calculates grid item width
- * @param w number of columns the grid item spans
- * @param colWidth the width of each column in px
- * @returns grid item's width in px
- * https://github.com/react-grid-layout/react-grid-layout/blob/master/lib/calculateUtils.js#L14-L35
- */ const calculateGridItemWidth = (w, colWidth)=>{
-    // 0 * Infinity === NaN, which causes problems with resize contraints
-    if (!Number.isFinite(w)) return w;
-    return Math.round(colWidth * w + Math.max(0, w - 1) * DEFAULT_MARGIN);
-};

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

@@ -0,0 +1,150 @@
+// Copyright 2025 The Perses Authors
+// Licensed under the Apache License, Version 2.0 (the "License");
+// you may not use this file except in compliance with the License.
+// You may obtain a copy of the License at
+//
+// http://www.apache.org/licenses/LICENSE-2.0
+//
+// Unless required by applicable law or agreed to in writing, software
+// distributed under the License is distributed on an "AS IS" BASIS,
+// WITHOUT WARRANTIES OR CONDITIONS OF ANY KIND, either express or implied.
+// See the License for the specific language governing permissions and
+// limitations under the License.
+"use strict";
+Object.defineProperty(exports, "__esModule", {
+    value: true
+});
+Object.defineProperty(exports, "Row", {
+    enumerable: true,
+    get: function() {
+        return Row;
+    }
+});
+const _jsxruntime = require("react/jsx-runtime");
+const _material = require("@mui/material");
+const _dashboards = require("@perses-dev/dashboards");
+const _react = require("react");
+const _reactgridlayout = require("react-grid-layout");
+const _components = require("@perses-dev/components");
+const _constants = require("../../constants");
+const _GridContainer = require("./GridContainer");
+const _GridItemContent = require("./GridItemContent");
+const _GridTitle = require("./GridTitle");
+const DEFAULT_MARGIN = 10;
+const ROW_HEIGHT = 30;
+function Row({ panelGroupId, groupDefinition, gridColWidth, panelFullHeight, panelOptions, isEditMode = false, onLayoutChange, onWidthChange, repeatVariable }) {
+    const ResponsiveGridLayout = (0, _react.useMemo)(()=>(0, _reactgridlayout.WidthProvider)(_reactgridlayout.Responsive), []);
+    const theme = (0, _material.useTheme)();
+    const viewPanelItemId = (0, _dashboards.useViewPanelGroup)();
+    const [isOpen, setIsOpen] = (0, _react.useState)(!groupDefinition.isCollapsed);
+    const hasViewPanel = viewPanelItemId?.panelGroupId === panelGroupId && // Check for repeatVariable panels
+    viewPanelItemId.repeatVariable?.[0] === repeatVariable?.[0] && viewPanelItemId.repeatVariable?.[1] === repeatVariable?.[1];
+    const itemLayoutViewed = viewPanelItemId?.panelGroupItemLayoutId;
+    // If there is a panel in view mode, we should hide the grid if the panel is not in the current group.
+    const isGridDisplayed = !viewPanelItemId || hasViewPanel;
+    // TODO: handle it without useEffect
+    (0, _react.useEffect)(()=>{
+        if (hasViewPanel) {
+            setIsOpen(true);
+        }
+    }, [
+        hasViewPanel
+    ]);
+    // Item layout is override if there is a panel in view mode
+    const itemLayouts = (0, _react.useMemo)(()=>{
+        if (itemLayoutViewed) {
+            return groupDefinition.itemLayouts.map((itemLayout)=>{
+                if (itemLayout.i === itemLayoutViewed) {
+                    const rowTitleHeight = 40 + 8; // 40 is the height of the row title and 8 is the margin height
+                    return {
+                        h: Math.round(((panelFullHeight ?? window.innerHeight) - rowTitleHeight) / (ROW_HEIGHT + DEFAULT_MARGIN)),
+                        i: itemLayoutViewed,
+                        w: 48,
+                        x: 0,
+                        y: 0
+                    };
+                }
+                return itemLayout;
+            });
+        }
+        return groupDefinition.itemLayouts;
+    }, [
+        groupDefinition.itemLayouts,
+        itemLayoutViewed,
+        panelFullHeight
+    ]);
+    return /*#__PURE__*/ (0, _jsxruntime.jsxs)(_GridContainer.GridContainer, {
+        sx: {
+            display: isGridDisplayed ? 'block' : 'none',
+            height: itemLayoutViewed ? `${panelFullHeight}px` : 'unset',
+            overflow: itemLayoutViewed ? 'hidden' : 'unset'
+        },
+        children: [
+            groupDefinition.title && /*#__PURE__*/ (0, _jsxruntime.jsx)(_GridTitle.GridTitle, {
+                panelGroupId: panelGroupId,
+                title: groupDefinition.title,
+                collapse: groupDefinition.isCollapsed === undefined ? undefined : {
+                    isOpen: isOpen,
+                    onToggleOpen: ()=>setIsOpen((current)=>!current)
+                }
+            }),
+            /*#__PURE__*/ (0, _jsxruntime.jsx)(_material.Collapse, {
+                in: isOpen,
+                unmountOnExit: true,
+                appear: false,
+                "data-testid": "panel-group-content",
+                children: /*#__PURE__*/ (0, _jsxruntime.jsx)(ResponsiveGridLayout, {
+                    className: "layout",
+                    breakpoints: {
+                        [_constants.GRID_LAYOUT_SMALL_BREAKPOINT]: theme.breakpoints.values.sm,
+                        xxs: 0
+                    },
+                    cols: _constants.GRID_LAYOUT_COLS,
+                    rowHeight: ROW_HEIGHT,
+                    draggableHandle: ".drag-handle",
+                    resizeHandles: [
+                        'se'
+                    ],
+                    isDraggable: isEditMode && !hasViewPanel,
+                    isResizable: isEditMode && !hasViewPanel,
+                    margin: [
+                        DEFAULT_MARGIN,
+                        DEFAULT_MARGIN
+                    ],
+                    containerPadding: [
+                        0,
+                        10
+                    ],
+                    layouts: {
+                        sm: itemLayouts
+                    },
+                    onLayoutChange: onLayoutChange,
+                    onWidthChange: onWidthChange,
+                    allowOverlap: hasViewPanel,
+                    children: itemLayouts.map(({ i, w })=>/*#__PURE__*/ (0, _jsxruntime.jsx)("div", {
+                            style: {
+                                display: itemLayoutViewed ? itemLayoutViewed === i ? 'unset' : 'none' : 'unset'
+                            },
+                            children: /*#__PURE__*/ (0, _jsxruntime.jsx)(_components.ErrorBoundary, {
+                                FallbackComponent: _components.ErrorAlert,
+                                children: /*#__PURE__*/ (0, _jsxruntime.jsx)(_GridItemContent.GridItemContent, {
+                                    panelOptions: panelOptions,
+                                    panelGroupItemId: {
+                                        panelGroupId,
+                                        panelGroupItemLayoutId: i,
+                                        repeatVariable
+                                    },
+                                    width: calculateGridItemWidth(w, gridColWidth)
+                                })
+                            })
+                        }, i))
+                })
+            })
+        ]
+    });
+}
+const calculateGridItemWidth = (w, colWidth)=>{
+    // 0 * Infinity === NaN, which causes problems with resize contraints
+    if (!Number.isFinite(w)) return w;
+    return Math.round(colWidth * w + Math.max(0, w - 1) * DEFAULT_MARGIN);
+};

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

@@ -18,6 +18,7 @@ _export_star(require("./GridContainer"), exports);
 _export_star(require("./GridItemContent"), exports);
 _export_star(require("./GridLayout"), exports);
 _export_star(require("./GridTitle"), exports);
+_export_star(require("./Row"), exports);
 function _export_star(from, to) {
     Object.keys(from).forEach(function(k) {
         if (k !== "default" && !Object.prototype.hasOwnProperty.call(to, k)) {

package/dist/cjs/components/LeaveDialog/LeaveDialog.js

@@ -0,0 +1,81 @@
+// Copyright 2025 The Perses Authors
+// Licensed under the Apache License, Version 2.0 (the "License");
+// you may not use this file except in compliance with the License.
+// You may obtain a copy of the License at
+//
+// http://www.apache.org/licenses/LICENSE-2.0
+//
+// Unless required by applicable law or agreed to in writing, software
+// distributed under the License is distributed on an "AS IS" BASIS,
+// WITHOUT WARRANTIES OR CONDITIONS OF ANY KIND, either express or implied.
+// See the License for the specific language governing permissions and
+// limitations under the License.
+"use strict";
+Object.defineProperty(exports, "__esModule", {
+    value: true
+});
+function _export(target, all) {
+    for(var name in all)Object.defineProperty(target, name, {
+        enumerable: true,
+        get: all[name]
+    });
+}
+_export(exports, {
+    LeaveDialog: function() {
+        return LeaveDialog;
+    },
+    Prompt: function() {
+        return Prompt;
+    }
+});
+const _jsxruntime = require("react/jsx-runtime");
+const _react = require("react");
+const _reactrouterdom = require("react-router-dom");
+const _components = require("@perses-dev/components");
+const handleRouteChange = (event)=>{
+    event.preventDefault();
+    event.returnValue = ''; // Required for Chrome
+    return ''; // Required for other browsers
+};
+function Prompt({ isBlocked, message }) {
+    const blocker = (0, _reactrouterdom.useBlocker)(isBlocked);
+    const isBlockedState = blocker.state === 'blocked';
+    const isProceedingState = blocker.state === 'proceeding';
+    (0, _react.useEffect)(()=>{
+        if (isBlocked) {
+            window.addEventListener('beforeunload', handleRouteChange);
+        } else {
+            window.removeEventListener('beforeunload', handleRouteChange);
+        }
+        return ()=>{
+            window.removeEventListener('beforeunload', handleRouteChange);
+        };
+    }, [
+        blocker,
+        isBlocked,
+        isBlockedState
+    ]);
+    const handleDiscardChanges = ()=>blocker.proceed?.();
+    const handleCancel = ()=>blocker.reset?.();
+    return /*#__PURE__*/ (0, _jsxruntime.jsx)(_components.DiscardChangesConfirmationDialog, {
+        description: message,
+        isOpen: isBlockedState || isProceedingState,
+        onDiscardChanges: handleDiscardChanges,
+        onCancel: handleCancel
+    });
+}
+function LeaveDialog({ original, current }) {
+    const handleIsBlocked = (ctx)=>{
+        if (JSON.stringify(original) !== JSON.stringify(current)) {
+            // Only block navigation if the pathname is changing (=> ignore search params changes)
+            if (ctx.currentLocation.pathname !== ctx.nextLocation.pathname) {
+                return true;
+            }
+        }
+        return false;
+    };
+    return /*#__PURE__*/ (0, _jsxruntime.jsx)(Prompt, {
+        isBlocked: handleIsBlocked,
+        message: "You have unsaved changes, are you sure you want to leave?"
+    });
+}