@perses-dev/dashboards 0.53.0-beta.0 → 0.53.0-beta.1

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

@@ -1,4 +1,4 @@
-// Copyright 2023 The Perses Authors
+// 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
@@ -25,9 +25,9 @@ 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 _core = require("@perses-dev/core");
 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;
@@ -94,7 +94,7 @@ function GridItemContent(props) {
         queries
     ]);
     const readHandlers = {
-        isPanelViewed: (0, _panelgroupslice.isPanelGroupItemIdEqual)(viewPanelGroupItemId, panelGroupItemId),
+        isPanelViewed: (0, _core.isPanelGroupItemIdEqual)(viewPanelGroupItemId, panelGroupItemId),
         onViewPanelClick: function() {
             if (viewPanelGroupItemId === undefined) {
                 viewPanel(panelGroupItemId);

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

@@ -1,4 +1,4 @@
-// Copyright 2023 The Perses Authors
+// 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

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

@@ -1,4 +1,4 @@
-// Copyright 2023 The Perses Authors
+// 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
@@ -52,7 +52,6 @@ const Panel = /*#__PURE__*/ (0, _react.memo)(function Panel(props) {
         width,
         height
     ]);
-    const chartsTheme = (0, _components.useChartsTheme)();
     const { queryResults } = (0, _pluginsystem.useDataQueriesContext)();
     const { getPlugin } = (0, _pluginsystem.usePluginRegistry)();
     const panelPropsForActions = (0, _react.useMemo)(()=>{
@@ -179,7 +178,9 @@ const Panel = /*#__PURE__*/ (0, _react.memo)(function Panel(props) {
                 pluginActions: pluginActions,
                 showIcons: showIcons,
                 sx: {
-                    paddingX: `${chartsTheme.container.padding.default}px`
+                    py: '2px',
+                    pl: '8px',
+                    pr: '2px'
                 },
                 dimension: contentDimensions
             }),

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

@@ -33,15 +33,7 @@ function PanelHeader({ id, title: rawTitle, description: rawDescription, links,
     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
-    ]);
+    const isEllipsisActive = textRef.current && dimension?.width ? textRef.current.scrollWidth > textRef.current.clientWidth : false;
     return /*#__PURE__*/ (0, _jsxruntime.jsx)(_material.CardHeader, {
         id: id,
         component: "header",

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

@@ -32,15 +32,19 @@ const SaveChangesConfirmationDialog = ()=>{
     const { saveChangesConfirmationDialog: dialog } = (0, _context.useSaveChangesConfirmationDialog)();
     const isSavedDurationModified = dialog?.isSavedDurationModified ?? true;
     const isSavedVariableModified = dialog?.isSavedVariableModified ?? true;
+    const isSavedRefreshIntervalModified = dialog?.isSavedRefreshIntervalModified ?? true;
     const [saveDefaultTimeRange, setSaveDefaultTimeRange] = (0, _react.useState)(isSavedDurationModified);
     const [saveDefaultVariables, setSaveDefaultVariables] = (0, _react.useState)(isSavedVariableModified);
+    const [saveDefaultRefreshInterval, setDefaultRefreshInterval] = (0, _react.useState)(isSavedRefreshIntervalModified);
     const { getSavedVariablesStatus } = (0, _context.useVariableDefinitionActions)();
     const { modifiedVariableNames } = getSavedVariablesStatus();
     const isOpen = dialog !== undefined;
-    const { timeRange } = (0, _pluginsystem.useTimeRange)();
+    const { timeRange, refreshInterval } = (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'})`;
+    const saveTimeRangeMessage = `Save current time range as new default ${currentTimeRangeText}`;
+    const saveVariableMessage = `Save current variable values as new default (${modifiedVariableNames.length > 0 ? modifiedVariableNames.join(', ') : 'No modified variables'})`;
+    const refreshIntervalDisplay = _pluginsystem.DEFAULT_REFRESH_INTERVAL_OPTIONS.some((i)=>i.display === refreshInterval) ? refreshInterval : _pluginsystem.DEFAULT_REFRESH_INTERVAL_OPTIONS.find((i)=>i.value.pastDuration === refreshInterval)?.display;
+    const saveRefreshIntervalMessage = `Save current refresh interval as new default ${refreshIntervalDisplay ? `(${refreshIntervalDisplay})` : 'refresh interval not modified'}`;
     return /*#__PURE__*/ (0, _jsxruntime.jsx)(_components.Dialog, {
         open: isOpen,
         children: dialog !== undefined && /*#__PURE__*/ (0, _jsxruntime.jsxs)(_jsxruntime.Fragment, {
@@ -63,7 +67,15 @@ const SaveChangesConfirmationDialog = ()=>{
                                         checked: saveDefaultTimeRange && isSavedDurationModified && (0, _core.isRelativeTimeRange)(timeRange),
                                         onChange: (e)=>setSaveDefaultTimeRange(e.target.checked)
                                     }),
-                                    label: saveTimeRangeText
+                                    label: saveTimeRangeMessage
+                                }),
+                                /*#__PURE__*/ (0, _jsxruntime.jsx)(_material.FormControlLabel, {
+                                    control: /*#__PURE__*/ (0, _jsxruntime.jsx)(_material.Checkbox, {
+                                        disabled: !isSavedRefreshIntervalModified,
+                                        checked: saveDefaultRefreshInterval && isSavedRefreshIntervalModified,
+                                        onChange: (e)=>setDefaultRefreshInterval(e.target.checked)
+                                    }),
+                                    label: saveRefreshIntervalMessage
                                 }),
                                 /*#__PURE__*/ (0, _jsxruntime.jsx)(_material.FormControlLabel, {
                                     control: /*#__PURE__*/ (0, _jsxruntime.jsx)(_material.Checkbox, {
@@ -71,7 +83,7 @@ const SaveChangesConfirmationDialog = ()=>{
                                         checked: saveDefaultVariables && isSavedVariableModified,
                                         onChange: (e)=>setSaveDefaultVariables(e.target.checked)
                                     }),
-                                    label: saveVariablesText
+                                    label: saveVariableMessage
                                 })
                             ]
                         })
@@ -81,7 +93,7 @@ const SaveChangesConfirmationDialog = ()=>{
                     children: [
                         /*#__PURE__*/ (0, _jsxruntime.jsx)(_components.Dialog.PrimaryButton, {
                             onClick: ()=>{
-                                return dialog.onSaveChanges(saveDefaultTimeRange, saveDefaultVariables);
+                                return dialog.onSaveChanges(saveDefaultTimeRange, saveDefaultRefreshInterval, saveDefaultVariables);
                             },
                             children: "Save Changes"
                         }),

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

@@ -31,24 +31,28 @@ const SaveDashboardButton = ({ onSave, isDisabled, variant = 'contained' })=>{
     const { dashboard, setDashboard } = (0, _context.useDashboard)();
     const { getSavedVariablesStatus, setVariableDefaultValues } = (0, _context.useVariableDefinitionActions)();
     const { isSavedVariableModified } = getSavedVariablesStatus();
-    const { timeRange } = (0, _pluginsystem.useTimeRange)();
+    const { timeRange, refreshInterval } = (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;
+        const isSavedRefreshIntervalModified = dashboard.spec.refreshInterval !== refreshInterval;
         // Save dashboard
         // - if active timeRange from plugin-system is relative and different from currently saved
         // - or if the saved variables are different from currently saved
-        if (isSavedDurationModified || isSavedVariableModified) {
+        if (isSavedDurationModified || isSavedVariableModified || isSavedRefreshIntervalModified) {
             openSaveChangesConfirmationDialog({
-                onSaveChanges: (saveDefaultTimeRange, saveDefaultVariables)=>{
-                    if ((0, _core.isRelativeTimeRange)(timeRange) && saveDefaultTimeRange === true) {
+                onSaveChanges: (saveDefaultTimeRange, saveDefaultRefreshInterval, saveDefaultVariables)=>{
+                    if ((0, _core.isRelativeTimeRange)(timeRange) && saveDefaultTimeRange) {
                         dashboard.spec.duration = timeRange.pastDuration;
                     }
-                    if (saveDefaultVariables === true) {
+                    if (saveDefaultVariables) {
                         const variables = setVariableDefaultValues();
                         dashboard.spec.variables = variables;
                     }
+                    if (saveDefaultRefreshInterval && isSavedRefreshIntervalModified) {
+                        dashboard.spec.refreshInterval = refreshInterval;
+                    }
                     setDashboard(dashboard);
                     saveDashboard();
                 },
@@ -56,7 +60,8 @@ const SaveDashboardButton = ({ onSave, isDisabled, variant = 'contained' })=>{
                     closeSaveChangesConfirmationDialog();
                 },
                 isSavedDurationModified,
-                isSavedVariableModified
+                isSavedVariableModified,
+                isSavedRefreshIntervalModified
             });
         } else {
             saveDashboard();

package/dist/cjs/components/Variables/Variable.js

@@ -338,6 +338,40 @@ function ListVariable({ name, source }) {
                         option.label
                     ]
                 }, key);
+            },
+            renderTags: (value, getTagProps, ownerState)=>{
+                // When focused, if there are too much value selected, it will use all screen place. Putting limit to 200px (~6 lines of chips)
+                if (ownerState.focused) {
+                    return /*#__PURE__*/ (0, _jsxruntime.jsx)(_material.Box, {
+                        sx: {
+                            maxHeight: 200,
+                            overflowY: 'auto'
+                        },
+                        children: value.map((option, index)=>/*#__PURE__*/ (0, _react.createElement)(_material.Chip, {
+                                ...getTagProps({
+                                    index
+                                }),
+                                key: index,
+                                label: option.label,
+                                size: "small"
+                            }))
+                    });
+                }
+                const limitTags = ownerState.limitTags;
+                const numTags = value.length;
+                return /*#__PURE__*/ (0, _jsxruntime.jsxs)(_jsxruntime.Fragment, {
+                    children: [
+                        value.slice(0, limitTags).map((option, index)=>/*#__PURE__*/ (0, _react.createElement)(_material.Chip, {
+                                ...getTagProps({
+                                    index
+                                }),
+                                key: index,
+                                label: option.label,
+                                size: "small"
+                            })),
+                        limitTags && numTags > limitTags && ` +${numTags - limitTags}`
+                    ]
+                });
             }
         });
     }, [

package/dist/cjs/components/Variables/VariableList.js

@@ -63,6 +63,6 @@ function VariableListItem({ spec, source }) {
         children: /*#__PURE__*/ (0, _jsxruntime.jsx)(_Variable.Variable, {
             name: spec.name,
             source: source
-        }, (spec.name + source) ?? '')
-    }, (spec.name + source) ?? '');
+        }, spec.name + (source ?? ''))
+    }, spec.name + (source ?? ''));
 }

package/dist/cjs/context/DashboardProvider/dashboard-provider-api.js

@@ -1,4 +1,4 @@
-// Copyright 2023 The Perses Authors
+// 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

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

@@ -1,4 +1,4 @@
-// Copyright 2023 The Perses Authors
+// 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

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

@@ -1,4 +1,4 @@
-// Copyright 2023 The Perses Authors
+// 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

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

@@ -1,4 +1,4 @@
-// Copyright 2023 The Perses Authors
+// 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

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

@@ -1,4 +1,4 @@
-// Copyright 2023 The Perses Authors
+// 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

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

@@ -1,4 +1,4 @@
-// Copyright 2023 The Perses Authors
+// 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
@@ -32,16 +32,10 @@ _export(exports, {
     },
     createPanelGroupSlice: function() {
         return createPanelGroupSlice;
-    },
-    isPanelGroupItemIdEqual: function() {
-        return isPanelGroupItemIdEqual;
     }
 });
 const _core = require("@perses-dev/core");
 const _common = require("./common");
-function isPanelGroupItemIdEqual(a, b) {
-    return a?.panelGroupId === b?.panelGroupId && a?.panelGroupItemLayoutId === b?.panelGroupItemLayoutId;
-}
 function createPanelGroupSlice(layouts) {
     const { panelGroups, panelGroupOrder } = convertLayoutsToPanelGroups(layouts);
     // Return the state creator function for Zustand

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

@@ -1,4 +1,4 @@
-// Copyright 2023 The Perses Authors
+// 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

package/dist/cjs/context/DatasourceStoreProvider.js

@@ -1,4 +1,4 @@
-// Copyright 2023 The Perses Authors
+// 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
@@ -22,7 +22,6 @@ Object.defineProperty(exports, "DatasourceStoreProvider", {
 });
 const _jsxruntime = require("react/jsx-runtime");
 const _react = require("react");
-const _core = require("@perses-dev/core");
 const _pluginsystem = require("@perses-dev/plugin-system");
 function DatasourceStoreProvider(props) {
     const { projectName, datasourceApi, onCreate, children } = props;
@@ -30,7 +29,7 @@ function DatasourceStoreProvider(props) {
     const [savedDatasources, setSavedDatasources] = (0, _react.useState)(props.savedDatasources ?? {});
     const project = projectName ?? dashboardResource?.metadata.project;
     const { getPlugin, listPluginMetadata } = (0, _pluginsystem.usePluginRegistry)();
-    const findDatasource = (0, _core.useEvent)(async (selector)=>{
+    const findDatasource = (0, _pluginsystem.useEvent)(async (selector)=>{
         // Try to find it in dashboard spec
         if (dashboardResource) {
             const { datasources } = dashboardResource.spec;
@@ -98,7 +97,7 @@ function DatasourceStoreProvider(props) {
         getPlugin,
         onCreate
     ]);
-    const listDatasourceSelectItems = (0, _core.useEvent)(async (datasourcePluginName)=>{
+    const listDatasourceSelectItems = (0, _pluginsystem.useEvent)(async (datasourcePluginName)=>{
         const [pluginMetadata, datasources, globalDatasources] = await Promise.all([
             listPluginMetadata([
                 'Datasource'

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

@@ -1,4 +1,4 @@
-// Copyright 2024 The Perses Authors
+// 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

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

@@ -1,4 +1,4 @@
-// Copyright 2024 The Perses Authors
+// 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

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

@@ -1,4 +1,4 @@
-// Copyright 2024 The Perses Authors
+// 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

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

@@ -1,4 +1,4 @@
-// Copyright 2024 The Perses Authors
+// 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

package/dist/cjs/context/useDashboard.js

@@ -1,4 +1,4 @@
-// Copyright 2024 The Perses Authors
+// 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

package/dist/cjs/utils/panelUtils.js

@@ -1,4 +1,4 @@
-// Copyright 2023 The Perses Authors
+// 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

package/dist/components/GridLayout/GridItemContent.d.ts

@@ -1,5 +1,5 @@
 import { ReactElement } from 'react';
-import { PanelGroupItemId } from '../../context';
+import { PanelGroupItemId } from '@perses-dev/core';
 import { PanelOptions } from '../Panel';
 export interface GridItemContentProps {
     panelGroupItemId: PanelGroupItemId;

package/dist/components/GridLayout/GridItemContent.d.ts.map

@@ -1 +1 @@
-{"version":3,"file":"GridItemContent.d.ts","sourceRoot":"","sources":["../../../src/components/GridLayout/GridItemContent.tsx"],"names":[],"mappings":"AAgBA,OAAc,EAAE,YAAY,EAAqB,MAAM,OAAO,CAAC;AAC/D,OAAO,EAAE,gBAAgB,EAA6D,MAAM,eAAe,CAAC;AAC5G,OAAO,EAAqB,YAAY,EAAE,MAAM,UAAU,CAAC;AAI3D,MAAM,WAAW,oBAAoB;IACnC,gBAAgB,EAAE,gBAAgB,CAAC;IACnC,KAAK,EAAE,MAAM,CAAC;IACd,YAAY,CAAC,EAAE,YAAY,CAAC;CAC7B;AAED;;GAEG;AACH,wBAAgB,eAAe,CAAC,KAAK,EAAE,oBAAoB,GAAG,YAAY,CAmGzE"}
+{"version":3,"file":"GridItemContent.d.ts","sourceRoot":"","sources":["../../../src/components/GridLayout/GridItemContent.tsx"],"names":[],"mappings":"AAgBA,OAAc,EAAE,YAAY,EAAqB,MAAM,OAAO,CAAC;AAC/D,OAAO,EAA2B,gBAAgB,EAAE,MAAM,kBAAkB,CAAC;AAE7E,OAAO,EAAqB,YAAY,EAAE,MAAM,UAAU,CAAC;AAG3D,MAAM,WAAW,oBAAoB;IACnC,gBAAgB,EAAE,gBAAgB,CAAC;IACnC,KAAK,EAAE,MAAM,CAAC;IACd,YAAY,CAAC,EAAE,YAAY,CAAC;CAC7B;AAED;;GAEG;AACH,wBAAgB,eAAe,CAAC,KAAK,EAAE,oBAAoB,GAAG,YAAY,CAmGzE"}

package/dist/components/GridLayout/GridItemContent.js

@@ -1,4 +1,4 @@
-// Copyright 2023 The Perses Authors
+// 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
@@ -15,9 +15,9 @@ import { Box } from '@mui/material';
 import { useInView } from 'react-intersection-observer';
 import { DataQueriesProvider, usePlugin, useSuggestedStepMs } from '@perses-dev/plugin-system';
 import React, { useMemo, useState } from 'react';
+import { isPanelGroupItemIdEqual } from '@perses-dev/core';
 import { useEditMode, usePanel, usePanelActions, useViewPanelGroup } from '../../context';
 import { Panel } from '../Panel';
-import { isPanelGroupItemIdEqual } from '../../context/DashboardProvider/panel-group-slice';
 import { QueryViewerDialog } from '../QueryViewerDialog';
 /**
  * Resolves the reference to panel content in a GridItemDefinition and renders the panel.

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

@@ -1 +1 @@
-{"version":3,"sources":["../../../src/components/GridLayout/GridItemContent.tsx"],"sourcesContent":["// Copyright 2023 The Perses Authors\n// Licensed under the Apache License, Version 2.0 (the \"License\");\n// you may not use this file except in compliance with the License.\n// You may obtain a copy of the License at\n//\n// http://www.apache.org/licenses/LICENSE-2.0\n//\n// Unless required by applicable law or agreed to in writing, software\n// distributed under the License is distributed on an \"AS IS\" BASIS,\n// WITHOUT WARRANTIES OR CONDITIONS OF ANY KIND, either express or implied.\n// See the License for the specific language governing permissions and\n// limitations under the License.\n\nimport { Box } from '@mui/material';\nimport { useInView } from 'react-intersection-observer';\nimport { DataQueriesProvider, usePlugin, useSuggestedStepMs } from '@perses-dev/plugin-system';\nimport React, { ReactElement, useMemo, useState } from 'react';\nimport { PanelGroupItemId, useEditMode, usePanel, usePanelActions, useViewPanelGroup } from '../../context';\nimport { Panel, PanelProps, PanelOptions } from '../Panel';\nimport { isPanelGroupItemIdEqual } from '../../context/DashboardProvider/panel-group-slice';\nimport { QueryViewerDialog } from '../QueryViewerDialog';\n\nexport interface GridItemContentProps {\n  panelGroupItemId: PanelGroupItemId;\n  width: number; // necessary for determining the suggested step ms\n  panelOptions?: PanelOptions;\n}\n\n/**\n * Resolves the reference to panel content in a GridItemDefinition and renders the panel.\n */\nexport function GridItemContent(props: GridItemContentProps): ReactElement {\n  const { panelGroupItemId, width } = props;\n  const panelDefinition = usePanel(panelGroupItemId);\n\n  const {\n    spec: { queries },\n  } = panelDefinition;\n\n  const { isEditMode } = useEditMode();\n  const { openEditPanel, openDeletePanelDialog, duplicatePanel, viewPanel } = usePanelActions(panelGroupItemId);\n  const viewPanelGroupItemId = useViewPanelGroup();\n  const { ref, inView } = useInView({\n    threshold: 0.2, // we have the flexibility to adjust this threshold to trigger queries slightly earlier or later based on performance\n    initialInView: false,\n    triggerOnce: true,\n  });\n\n  const [openQueryViewer, setOpenQueryViewer] = useState(false);\n\n  const viewQueriesHandler = useMemo(() => {\n    return isEditMode || !queries?.length\n      ? undefined\n      : {\n          onClick: (): void => {\n            setOpenQueryViewer(true);\n          },\n        };\n  }, [isEditMode, queries]);\n\n  const readHandlers = {\n    isPanelViewed: isPanelGroupItemIdEqual(viewPanelGroupItemId, panelGroupItemId),\n    onViewPanelClick: function (): void {\n      if (viewPanelGroupItemId === undefined) {\n        viewPanel(panelGroupItemId);\n      } else {\n        viewPanel(undefined);\n      }\n    },\n  };\n\n  // Provide actions to the panel when in edit mode\n  let editHandlers: PanelProps['editHandlers'] = undefined;\n  if (isEditMode) {\n    editHandlers = {\n      onEditPanelClick: openEditPanel,\n      onDuplicatePanelClick: duplicatePanel,\n      onDeletePanelClick: openDeletePanelDialog,\n    };\n  }\n\n  // map TimeSeriesQueryDefinition to Definition<UnknownSpec>\n  const suggestedStepMs = useSuggestedStepMs(width);\n\n  const { data: plugin } = usePlugin('Panel', panelDefinition.spec.plugin.kind);\n\n  const queryDefinitions = queries ?? [];\n  const definitions = queryDefinitions.map((query) => {\n    return {\n      kind: query.spec.plugin.kind,\n      spec: query.spec.plugin.spec,\n    };\n  });\n\n  const pluginQueryOptions =\n    typeof plugin?.queryOptions === 'function'\n      ? plugin?.queryOptions(panelDefinition.spec.plugin.spec)\n      : plugin?.queryOptions;\n\n  return (\n    <Box\n      ref={ref}\n      sx={{\n        width: '100%',\n        height: '100%',\n      }}\n    >\n      <DataQueriesProvider\n        definitions={definitions}\n        options={{ suggestedStepMs, ...pluginQueryOptions }}\n        queryOptions={{ enabled: inView }}\n      >\n        {inView && (\n          <Panel\n            definition={panelDefinition}\n            readHandlers={readHandlers}\n            editHandlers={editHandlers}\n            viewQueriesHandler={viewQueriesHandler}\n            panelOptions={props.panelOptions}\n            panelGroupItemId={panelGroupItemId}\n          />\n        )}\n      </DataQueriesProvider>\n      <QueryViewerDialog\n        open={openQueryViewer}\n        queryDefinitions={queryDefinitions}\n        onClose={() => setOpenQueryViewer(false)}\n      />\n    </Box>\n  );\n}\n"],"names":["Box","useInView","DataQueriesProvider","usePlugin","useSuggestedStepMs","React","useMemo","useState","useEditMode","usePanel","usePanelActions","useViewPanelGroup","Panel","isPanelGroupItemIdEqual","QueryViewerDialog","GridItemContent","props","panelGroupItemId","width","panelDefinition","spec","queries","isEditMode","openEditPanel","openDeletePanelDialog","duplicatePanel","viewPanel","viewPanelGroupItemId","ref","inView","threshold","initialInView","triggerOnce","openQueryViewer","setOpenQueryViewer","viewQueriesHandler","length","undefined","onClick","readHandlers","isPanelViewed","onViewPanelClick","editHandlers","onEditPanelClick","onDuplicatePanelClick","onDeletePanelClick","suggestedStepMs","data","plugin","kind","queryDefinitions","definitions","map","query","pluginQueryOptions","queryOptions","sx","height","options","enabled","definition","panelOptions","open","onClose"],"mappings":"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"}
+{"version":3,"sources":["../../../src/components/GridLayout/GridItemContent.tsx"],"sourcesContent":["// Copyright 2025 The Perses Authors\n// Licensed under the Apache License, Version 2.0 (the \"License\");\n// you may not use this file except in compliance with the License.\n// You may obtain a copy of the License at\n//\n// http://www.apache.org/licenses/LICENSE-2.0\n//\n// Unless required by applicable law or agreed to in writing, software\n// distributed under the License is distributed on an \"AS IS\" BASIS,\n// WITHOUT WARRANTIES OR CONDITIONS OF ANY KIND, either express or implied.\n// See the License for the specific language governing permissions and\n// limitations under the License.\n\nimport { Box } from '@mui/material';\nimport { useInView } from 'react-intersection-observer';\nimport { DataQueriesProvider, usePlugin, useSuggestedStepMs } from '@perses-dev/plugin-system';\nimport React, { ReactElement, useMemo, useState } from 'react';\nimport { isPanelGroupItemIdEqual, PanelGroupItemId } from '@perses-dev/core';\nimport { useEditMode, usePanel, usePanelActions, useViewPanelGroup } from '../../context';\nimport { Panel, PanelProps, PanelOptions } from '../Panel';\nimport { QueryViewerDialog } from '../QueryViewerDialog';\n\nexport interface GridItemContentProps {\n  panelGroupItemId: PanelGroupItemId;\n  width: number; // necessary for determining the suggested step ms\n  panelOptions?: PanelOptions;\n}\n\n/**\n * Resolves the reference to panel content in a GridItemDefinition and renders the panel.\n */\nexport function GridItemContent(props: GridItemContentProps): ReactElement {\n  const { panelGroupItemId, width } = props;\n  const panelDefinition = usePanel(panelGroupItemId);\n\n  const {\n    spec: { queries },\n  } = panelDefinition;\n\n  const { isEditMode } = useEditMode();\n  const { openEditPanel, openDeletePanelDialog, duplicatePanel, viewPanel } = usePanelActions(panelGroupItemId);\n  const viewPanelGroupItemId = useViewPanelGroup();\n  const { ref, inView } = useInView({\n    threshold: 0.2, // we have the flexibility to adjust this threshold to trigger queries slightly earlier or later based on performance\n    initialInView: false,\n    triggerOnce: true,\n  });\n\n  const [openQueryViewer, setOpenQueryViewer] = useState(false);\n\n  const viewQueriesHandler = useMemo(() => {\n    return isEditMode || !queries?.length\n      ? undefined\n      : {\n          onClick: (): void => {\n            setOpenQueryViewer(true);\n          },\n        };\n  }, [isEditMode, queries]);\n\n  const readHandlers = {\n    isPanelViewed: isPanelGroupItemIdEqual(viewPanelGroupItemId, panelGroupItemId),\n    onViewPanelClick: function (): void {\n      if (viewPanelGroupItemId === undefined) {\n        viewPanel(panelGroupItemId);\n      } else {\n        viewPanel(undefined);\n      }\n    },\n  };\n\n  // Provide actions to the panel when in edit mode\n  let editHandlers: PanelProps['editHandlers'] = undefined;\n  if (isEditMode) {\n    editHandlers = {\n      onEditPanelClick: openEditPanel,\n      onDuplicatePanelClick: duplicatePanel,\n      onDeletePanelClick: openDeletePanelDialog,\n    };\n  }\n\n  // map TimeSeriesQueryDefinition to Definition<UnknownSpec>\n  const suggestedStepMs = useSuggestedStepMs(width);\n\n  const { data: plugin } = usePlugin('Panel', panelDefinition.spec.plugin.kind);\n\n  const queryDefinitions = queries ?? [];\n  const definitions = queryDefinitions.map((query) => {\n    return {\n      kind: query.spec.plugin.kind,\n      spec: query.spec.plugin.spec,\n    };\n  });\n\n  const pluginQueryOptions =\n    typeof plugin?.queryOptions === 'function'\n      ? plugin?.queryOptions(panelDefinition.spec.plugin.spec)\n      : plugin?.queryOptions;\n\n  return (\n    <Box\n      ref={ref}\n      sx={{\n        width: '100%',\n        height: '100%',\n      }}\n    >\n      <DataQueriesProvider\n        definitions={definitions}\n        options={{ suggestedStepMs, ...pluginQueryOptions }}\n        queryOptions={{ enabled: inView }}\n      >\n        {inView && (\n          <Panel\n            definition={panelDefinition}\n            readHandlers={readHandlers}\n            editHandlers={editHandlers}\n            viewQueriesHandler={viewQueriesHandler}\n            panelOptions={props.panelOptions}\n            panelGroupItemId={panelGroupItemId}\n          />\n        )}\n      </DataQueriesProvider>\n      <QueryViewerDialog\n        open={openQueryViewer}\n        queryDefinitions={queryDefinitions}\n        onClose={() => setOpenQueryViewer(false)}\n      />\n    </Box>\n  );\n}\n"],"names":["Box","useInView","DataQueriesProvider","usePlugin","useSuggestedStepMs","React","useMemo","useState","isPanelGroupItemIdEqual","useEditMode","usePanel","usePanelActions","useViewPanelGroup","Panel","QueryViewerDialog","GridItemContent","props","panelGroupItemId","width","panelDefinition","spec","queries","isEditMode","openEditPanel","openDeletePanelDialog","duplicatePanel","viewPanel","viewPanelGroupItemId","ref","inView","threshold","initialInView","triggerOnce","openQueryViewer","setOpenQueryViewer","viewQueriesHandler","length","undefined","onClick","readHandlers","isPanelViewed","onViewPanelClick","editHandlers","onEditPanelClick","onDuplicatePanelClick","onDeletePanelClick","suggestedStepMs","data","plugin","kind","queryDefinitions","definitions","map","query","pluginQueryOptions","queryOptions","sx","height","options","enabled","definition","panelOptions","open","onClose"],"mappings":"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"}

package/dist/components/GridLayout/GridLayout.d.ts.map

@@ -1 +1 @@
-{"version":3,"file":"GridLayout.d.ts","sourceRoot":"","sources":["../../../src/components/GridLayout/GridLayout.tsx"],"names":[],"mappings":"AAYA,OAAO,EAAE,YAAY,EAAY,MAAM,OAAO,CAAC;AAE/C,OAAO,EAAE,YAAY,EAAE,MAAM,kBAAkB,CAAC;AAUhD,OAAO,EAAE,YAAY,EAAE,MAAM,UAAU,CAAC;AACxC,OAAO,EAAO,QAAQ,EAAE,MAAM,OAAO,CAAC;AAEtC,MAAM,WAAW,eAAe;IAC9B,YAAY,EAAE,YAAY,CAAC;IAC3B,YAAY,CAAC,EAAE,YAAY,CAAC;IAC5B,eAAe,CAAC,EAAE,MAAM,CAAC;CAC1B;AAED;;GAEG;AACH,wBAAgB,UAAU,CAAC,KAAK,EAAE,eAAe,GAAG,YAAY,CAmE/D;AAED,MAAM,WAAW,qBAAsB,SAAQ,QAAQ;IACrD,kBAAkB,EAAE,MAAM,CAAC;CAC5B;AAED;;GAEG;AACH,wBAAgB,gBAAgB,CAAC,EAC/B,kBAAkB,EAClB,YAAY,EACZ,eAAe,EACf,YAAY,EACZ,eAAe,EACf,YAAY,EACZ,UAAkB,EAClB,cAAc,EACd,aAAa,GACd,EAAE,qBAAqB,GAAG,YAAY,GAAG,IAAI,CA0C7C"}
+{"version":3,"file":"GridLayout.d.ts","sourceRoot":"","sources":["../../../src/components/GridLayout/GridLayout.tsx"],"names":[],"mappings":"AAYA,OAAO,EAAE,YAAY,EAAY,MAAM,OAAO,CAAC;AAE/C,OAAO,EAAE,YAAY,EAAwB,MAAM,kBAAkB,CAAC;AAItE,OAAO,EAAE,YAAY,EAAE,MAAM,UAAU,CAAC;AACxC,OAAO,EAAO,QAAQ,EAAE,MAAM,OAAO,CAAC;AAEtC,MAAM,WAAW,eAAe;IAC9B,YAAY,EAAE,YAAY,CAAC;IAC3B,YAAY,CAAC,EAAE,YAAY,CAAC;IAC5B,eAAe,CAAC,EAAE,MAAM,CAAC;CAC1B;AAED;;GAEG;AACH,wBAAgB,UAAU,CAAC,KAAK,EAAE,eAAe,GAAG,YAAY,CAmE/D;AAED,MAAM,WAAW,qBAAsB,SAAQ,QAAQ;IACrD,kBAAkB,EAAE,MAAM,CAAC;CAC5B;AAED;;GAEG;AACH,wBAAgB,gBAAgB,CAAC,EAC/B,kBAAkB,EAClB,YAAY,EACZ,eAAe,EACf,YAAY,EACZ,eAAe,EACf,YAAY,EACZ,UAAkB,EAClB,cAAc,EACd,aAAa,GACd,EAAE,qBAAqB,GAAG,YAAY,GAAG,IAAI,CA0C7C"}

package/dist/components/GridLayout/GridLayout.js

@@ -1,4 +1,4 @@
-// Copyright 2023 The Perses Authors
+// 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

package/dist/components/GridLayout/GridLayout.js.map

@@ -1 +1 @@
-{"version":3,"sources":["../../../src/components/GridLayout/GridLayout.tsx"],"sourcesContent":["// Copyright 2023 The Perses Authors\n// Licensed under the Apache License, Version 2.0 (the \"License\");\n// you may not use this file except in compliance with the License.\n// You may obtain a copy of the License at\n//\n// http://www.apache.org/licenses/LICENSE-2.0\n//\n// Unless required by applicable law or agreed to in writing, software\n// distributed under the License is distributed on an \"AS IS\" BASIS,\n// WITHOUT WARRANTIES OR CONDITIONS OF ANY KIND, either express or implied.\n// See the License for the specific language governing permissions and\n// limitations under the License.\nimport { ReactElement, useState } from 'react';\nimport { Layouts, Layout } from 'react-grid-layout';\nimport { PanelGroupId } from '@perses-dev/core';\nimport { useVariableValues, VariableContext } from '@perses-dev/plugin-system';\nimport {\n  useEditMode,\n  usePanelGroup,\n  usePanelGroupActions,\n  useViewPanelGroup,\n  PanelGroupDefinition,\n} from '../../context';\nimport { GRID_LAYOUT_SMALL_BREAKPOINT } from '../../constants';\nimport { PanelOptions } from '../Panel';\nimport { Row, RowProps } from './Row';\n\nexport interface GridLayoutProps {\n  panelGroupId: PanelGroupId;\n  panelOptions?: PanelOptions;\n  panelFullHeight?: number;\n}\n\n/**\n * Layout component that arranges children in a Grid based on the definition.\n */\nexport function GridLayout(props: GridLayoutProps): ReactElement {\n  const { panelGroupId, panelOptions, panelFullHeight } = props;\n  const groupDefinition: PanelGroupDefinition = usePanelGroup(panelGroupId);\n  const { updatePanelGroupLayouts } = usePanelGroupActions(panelGroupId);\n  const viewPanelItemId = useViewPanelGroup();\n  const { isEditMode } = useEditMode();\n\n  const [gridColWidth, setGridColWidth] = useState(0);\n\n  const hasViewPanel = viewPanelItemId?.panelGroupId === panelGroupId; // current panelGroup contains the panel extended?\n\n  const handleLayoutChange = (currentLayout: Layout[], allLayouts: Layouts): void => {\n    // Using the value from `allLayouts` instead of `currentLayout` because of\n    // a bug in react-layout-grid where `currentLayout` does not adjust properly\n    // when going to a smaller breakpoint and then back to a larger breakpoint.\n    // https://github.com/react-grid-layout/react-grid-layout/issues/1663\n    const smallLayout = allLayouts[GRID_LAYOUT_SMALL_BREAKPOINT];\n    if (smallLayout && !hasViewPanel) {\n      updatePanelGroupLayouts(smallLayout);\n    }\n  };\n\n  /**\n   * Calculate the column width so we can determine the width of each panel for suggested step ms\n   * https://github.com/react-grid-layout/react-grid-layout/blob/master/lib/calculateUtils.js#L14-L35\n   */\n  const handleWidthChange = (\n    containerWidth: number,\n    margin: [number, number],\n    cols: number,\n    containerPadding: [number, number]\n  ): void => {\n    const marginX = margin[0];\n    const marginWidth = marginX * (cols - 1);\n    const containerPaddingWidth = containerPadding[0] * 2;\n    // exclude margin and padding from total width\n    setGridColWidth((containerWidth - marginWidth - containerPaddingWidth) / cols);\n  };\n\n  return (\n    <>\n      {!groupDefinition.repeatVariable ? (\n        <Row\n          panelGroupId={panelGroupId}\n          groupDefinition={groupDefinition}\n          gridColWidth={gridColWidth}\n          panelFullHeight={panelFullHeight}\n          panelOptions={panelOptions}\n          isEditMode={isEditMode}\n          onLayoutChange={handleLayoutChange}\n          onWidthChange={handleWidthChange}\n        />\n      ) : (\n        <RepeatGridLayout\n          repeatVariableName={groupDefinition.repeatVariable}\n          panelGroupId={panelGroupId}\n          groupDefinition={groupDefinition}\n          gridColWidth={gridColWidth}\n          panelFullHeight={panelFullHeight}\n          panelOptions={panelOptions}\n          isEditMode={isEditMode}\n          onLayoutChange={handleLayoutChange}\n          onWidthChange={handleWidthChange}\n        />\n      )}\n    </>\n  );\n}\n\nexport interface RepeatGridLayoutProps extends RowProps {\n  repeatVariableName: string;\n}\n\n/**\n * Renders a grid layout for a repeated variable, where each value of the variable will create a new row.\n */\nexport function RepeatGridLayout({\n  repeatVariableName,\n  panelGroupId,\n  groupDefinition,\n  gridColWidth,\n  panelFullHeight,\n  panelOptions,\n  isEditMode = false,\n  onLayoutChange,\n  onWidthChange,\n}: RepeatGridLayoutProps): ReactElement | null {\n  const variables = useVariableValues();\n  const variable = variables[repeatVariableName];\n\n  // If the variable is not defined, or if it is defined but has no values, render a standard row without repeating\n  if (variable === undefined || !Array.isArray(variable.value) || variable.value.length === 0) {\n    return (\n      <Row\n        panelGroupId={panelGroupId}\n        groupDefinition={groupDefinition}\n        gridColWidth={gridColWidth}\n        panelFullHeight={panelFullHeight}\n        panelOptions={panelOptions}\n        isEditMode={isEditMode}\n        onLayoutChange={onLayoutChange}\n        onWidthChange={onWidthChange}\n      />\n    );\n  }\n\n  return (\n    <>\n      {variable.value.map((value) => (\n        <VariableContext.Provider\n          key={`${repeatVariableName}-${value}`}\n          value={{ state: { ...variables, [repeatVariableName]: { value, loading: false } } }}\n        >\n          <Row\n            panelGroupId={panelGroupId}\n            groupDefinition={groupDefinition}\n            gridColWidth={gridColWidth}\n            panelFullHeight={panelFullHeight}\n            panelOptions={panelOptions}\n            isEditMode={isEditMode}\n            onLayoutChange={onLayoutChange}\n            onWidthChange={onWidthChange}\n            repeatVariable={[repeatVariableName, value]}\n          />\n        </VariableContext.Provider>\n      ))}\n    </>\n  );\n}\n"],"names":["useState","useVariableValues","VariableContext","useEditMode","usePanelGroup","usePanelGroupActions","useViewPanelGroup","GRID_LAYOUT_SMALL_BREAKPOINT","Row","GridLayout","props","panelGroupId","panelOptions","panelFullHeight","groupDefinition","updatePanelGroupLayouts","viewPanelItemId","isEditMode","gridColWidth","setGridColWidth","hasViewPanel","handleLayoutChange","currentLayout","allLayouts","smallLayout","handleWidthChange","containerWidth","margin","cols","containerPadding","marginX","marginWidth","containerPaddingWidth","repeatVariable","onLayoutChange","onWidthChange","RepeatGridLayout","repeatVariableName","variables","variable","undefined","Array","isArray","value","length","map","Provider","state","loading"],"mappings":"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"}
+{"version":3,"sources":["../../../src/components/GridLayout/GridLayout.tsx"],"sourcesContent":["// Copyright 2025 The Perses Authors\n// Licensed under the Apache License, Version 2.0 (the \"License\");\n// you may not use this file except in compliance with the License.\n// You may obtain a copy of the License at\n//\n// http://www.apache.org/licenses/LICENSE-2.0\n//\n// Unless required by applicable law or agreed to in writing, software\n// distributed under the License is distributed on an \"AS IS\" BASIS,\n// WITHOUT WARRANTIES OR CONDITIONS OF ANY KIND, either express or implied.\n// See the License for the specific language governing permissions and\n// limitations under the License.\nimport { ReactElement, useState } from 'react';\nimport { Layouts, Layout } from 'react-grid-layout';\nimport { PanelGroupId, PanelGroupDefinition } from '@perses-dev/core';\nimport { useVariableValues, VariableContext } from '@perses-dev/plugin-system';\nimport { useEditMode, usePanelGroup, usePanelGroupActions, useViewPanelGroup } from '../../context';\nimport { GRID_LAYOUT_SMALL_BREAKPOINT } from '../../constants';\nimport { PanelOptions } from '../Panel';\nimport { Row, RowProps } from './Row';\n\nexport interface GridLayoutProps {\n  panelGroupId: PanelGroupId;\n  panelOptions?: PanelOptions;\n  panelFullHeight?: number;\n}\n\n/**\n * Layout component that arranges children in a Grid based on the definition.\n */\nexport function GridLayout(props: GridLayoutProps): ReactElement {\n  const { panelGroupId, panelOptions, panelFullHeight } = props;\n  const groupDefinition: PanelGroupDefinition = usePanelGroup(panelGroupId);\n  const { updatePanelGroupLayouts } = usePanelGroupActions(panelGroupId);\n  const viewPanelItemId = useViewPanelGroup();\n  const { isEditMode } = useEditMode();\n\n  const [gridColWidth, setGridColWidth] = useState(0);\n\n  const hasViewPanel = viewPanelItemId?.panelGroupId === panelGroupId; // current panelGroup contains the panel extended?\n\n  const handleLayoutChange = (currentLayout: Layout[], allLayouts: Layouts): void => {\n    // Using the value from `allLayouts` instead of `currentLayout` because of\n    // a bug in react-layout-grid where `currentLayout` does not adjust properly\n    // when going to a smaller breakpoint and then back to a larger breakpoint.\n    // https://github.com/react-grid-layout/react-grid-layout/issues/1663\n    const smallLayout = allLayouts[GRID_LAYOUT_SMALL_BREAKPOINT];\n    if (smallLayout && !hasViewPanel) {\n      updatePanelGroupLayouts(smallLayout);\n    }\n  };\n\n  /**\n   * Calculate the column width so we can determine the width of each panel for suggested step ms\n   * https://github.com/react-grid-layout/react-grid-layout/blob/master/lib/calculateUtils.js#L14-L35\n   */\n  const handleWidthChange = (\n    containerWidth: number,\n    margin: [number, number],\n    cols: number,\n    containerPadding: [number, number]\n  ): void => {\n    const marginX = margin[0];\n    const marginWidth = marginX * (cols - 1);\n    const containerPaddingWidth = containerPadding[0] * 2;\n    // exclude margin and padding from total width\n    setGridColWidth((containerWidth - marginWidth - containerPaddingWidth) / cols);\n  };\n\n  return (\n    <>\n      {!groupDefinition.repeatVariable ? (\n        <Row\n          panelGroupId={panelGroupId}\n          groupDefinition={groupDefinition}\n          gridColWidth={gridColWidth}\n          panelFullHeight={panelFullHeight}\n          panelOptions={panelOptions}\n          isEditMode={isEditMode}\n          onLayoutChange={handleLayoutChange}\n          onWidthChange={handleWidthChange}\n        />\n      ) : (\n        <RepeatGridLayout\n          repeatVariableName={groupDefinition.repeatVariable}\n          panelGroupId={panelGroupId}\n          groupDefinition={groupDefinition}\n          gridColWidth={gridColWidth}\n          panelFullHeight={panelFullHeight}\n          panelOptions={panelOptions}\n          isEditMode={isEditMode}\n          onLayoutChange={handleLayoutChange}\n          onWidthChange={handleWidthChange}\n        />\n      )}\n    </>\n  );\n}\n\nexport interface RepeatGridLayoutProps extends RowProps {\n  repeatVariableName: string;\n}\n\n/**\n * Renders a grid layout for a repeated variable, where each value of the variable will create a new row.\n */\nexport function RepeatGridLayout({\n  repeatVariableName,\n  panelGroupId,\n  groupDefinition,\n  gridColWidth,\n  panelFullHeight,\n  panelOptions,\n  isEditMode = false,\n  onLayoutChange,\n  onWidthChange,\n}: RepeatGridLayoutProps): ReactElement | null {\n  const variables = useVariableValues();\n  const variable = variables[repeatVariableName];\n\n  // If the variable is not defined, or if it is defined but has no values, render a standard row without repeating\n  if (variable === undefined || !Array.isArray(variable.value) || variable.value.length === 0) {\n    return (\n      <Row\n        panelGroupId={panelGroupId}\n        groupDefinition={groupDefinition}\n        gridColWidth={gridColWidth}\n        panelFullHeight={panelFullHeight}\n        panelOptions={panelOptions}\n        isEditMode={isEditMode}\n        onLayoutChange={onLayoutChange}\n        onWidthChange={onWidthChange}\n      />\n    );\n  }\n\n  return (\n    <>\n      {variable.value.map((value) => (\n        <VariableContext.Provider\n          key={`${repeatVariableName}-${value}`}\n          value={{ state: { ...variables, [repeatVariableName]: { value, loading: false } } }}\n        >\n          <Row\n            panelGroupId={panelGroupId}\n            groupDefinition={groupDefinition}\n            gridColWidth={gridColWidth}\n            panelFullHeight={panelFullHeight}\n            panelOptions={panelOptions}\n            isEditMode={isEditMode}\n            onLayoutChange={onLayoutChange}\n            onWidthChange={onWidthChange}\n            repeatVariable={[repeatVariableName, value]}\n          />\n        </VariableContext.Provider>\n      ))}\n    </>\n  );\n}\n"],"names":["useState","useVariableValues","VariableContext","useEditMode","usePanelGroup","usePanelGroupActions","useViewPanelGroup","GRID_LAYOUT_SMALL_BREAKPOINT","Row","GridLayout","props","panelGroupId","panelOptions","panelFullHeight","groupDefinition","updatePanelGroupLayouts","viewPanelItemId","isEditMode","gridColWidth","setGridColWidth","hasViewPanel","handleLayoutChange","currentLayout","allLayouts","smallLayout","handleWidthChange","containerWidth","margin","cols","containerPadding","marginX","marginWidth","containerPaddingWidth","repeatVariable","onLayoutChange","onWidthChange","RepeatGridLayout","repeatVariableName","variables","variable","undefined","Array","isArray","value","length","map","Provider","state","loading"],"mappings":"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"}

package/dist/components/GridLayout/Row.d.ts

@@ -1,5 +1,5 @@
-import { PanelGroupId } from '@perses-dev/core';
-import { PanelGroupDefinition, PanelOptions } from '@perses-dev/dashboards';
+import { PanelGroupId, PanelGroupDefinition } from '@perses-dev/core';
+import { PanelOptions } from '@perses-dev/dashboards';
 import { ReactElement } from 'react';
 import { Layout, Layouts } from 'react-grid-layout';
 export interface RowProps {

package/dist/components/GridLayout/Row.d.ts.map

@@ -1 +1 @@
-{"version":3,"file":"Row.d.ts","sourceRoot":"","sources":["../../../src/components/GridLayout/Row.tsx"],"names":[],"mappings":"AAcA,OAAO,EAAE,YAAY,EAAE,MAAM,kBAAkB,CAAC;AAChD,OAAO,EAAE,oBAAoB,EAAwB,YAAY,EAAqB,MAAM,wBAAwB,CAAC;AACrH,OAAO,EAAE,YAAY,EAAgC,MAAM,OAAO,CAAC;AACnE,OAAO,EAAE,MAAM,EAAE,OAAO,EAA6B,MAAM,mBAAmB,CAAC;AAU/E,MAAM,WAAW,QAAQ;IACvB,YAAY,EAAE,YAAY,CAAC;IAC3B,eAAe,EAAE,oBAAoB,CAAC;IACtC,YAAY,EAAE,MAAM,CAAC;IACrB,eAAe,CAAC,EAAE,MAAM,CAAC;IACzB,YAAY,CAAC,EAAE,YAAY,CAAC;IAC5B,UAAU,CAAC,EAAE,OAAO,CAAC;IACrB,cAAc,CAAC,EAAE,CAAC,aAAa,EAAE,MAAM,EAAE,EAAE,UAAU,EAAE,OAAO,KAAK,IAAI,CAAC;IACxE,aAAa,CAAC,EAAE,CACd,cAAc,EAAE,MAAM,EACtB,MAAM,EAAE,CAAC,MAAM,EAAE,MAAM,CAAC,EACxB,IAAI,EAAE,MAAM,EACZ,gBAAgB,EAAE,CAAC,MAAM,EAAE,MAAM,CAAC,KAC/B,IAAI,CAAC;IACV,cAAc,CAAC,EAAE,CAAC,MAAM,EAAE,MAAM,CAAC,CAAC;CACnC;AAED,wBAAgB,GAAG,CAAC,EAClB,YAAY,EACZ,eAAe,EACf,YAAY,EACZ,eAAe,EACf,YAAY,EACZ,UAAkB,EAClB,cAAc,EACd,aAAa,EACb,cAAc,GACf,EAAE,QAAQ,GAAG,YAAY,CAoGzB"}
+{"version":3,"file":"Row.d.ts","sourceRoot":"","sources":["../../../src/components/GridLayout/Row.tsx"],"names":[],"mappings":"AAcA,OAAO,EAAE,YAAY,EAAE,oBAAoB,EAAwB,MAAM,kBAAkB,CAAC;AAC5F,OAAO,EAAE,YAAY,EAAqB,MAAM,wBAAwB,CAAC;AACzE,OAAO,EAAE,YAAY,EAAgC,MAAM,OAAO,CAAC;AACnE,OAAO,EAAE,MAAM,EAAE,OAAO,EAA6B,MAAM,mBAAmB,CAAC;AAU/E,MAAM,WAAW,QAAQ;IACvB,YAAY,EAAE,YAAY,CAAC;IAC3B,eAAe,EAAE,oBAAoB,CAAC;IACtC,YAAY,EAAE,MAAM,CAAC;IACrB,eAAe,CAAC,EAAE,MAAM,CAAC;IACzB,YAAY,CAAC,EAAE,YAAY,CAAC;IAC5B,UAAU,CAAC,EAAE,OAAO,CAAC;IACrB,cAAc,CAAC,EAAE,CAAC,aAAa,EAAE,MAAM,EAAE,EAAE,UAAU,EAAE,OAAO,KAAK,IAAI,CAAC;IACxE,aAAa,CAAC,EAAE,CACd,cAAc,EAAE,MAAM,EACtB,MAAM,EAAE,CAAC,MAAM,EAAE,MAAM,CAAC,EACxB,IAAI,EAAE,MAAM,EACZ,gBAAgB,EAAE,CAAC,MAAM,EAAE,MAAM,CAAC,KAC/B,IAAI,CAAC;IACV,cAAc,CAAC,EAAE,CAAC,MAAM,EAAE,MAAM,CAAC,CAAC;CACnC;AAED,wBAAgB,GAAG,CAAC,EAClB,YAAY,EACZ,eAAe,EACf,YAAY,EACZ,eAAe,EACf,YAAY,EACZ,UAAkB,EAClB,cAAc,EACd,aAAa,EACb,cAAc,GACf,EAAE,QAAQ,GAAG,YAAY,CAoGzB"}

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

@@ -1 +1 @@
-{"version":3,"sources":["../../../src/components/GridLayout/Row.tsx"],"sourcesContent":["// Copyright 2025 The Perses Authors\n// Licensed under the Apache License, Version 2.0 (the \"License\");\n// you may not use this file except in compliance with the License.\n// You may obtain a copy of the License at\n//\n// http://www.apache.org/licenses/LICENSE-2.0\n//\n// Unless required by applicable law or agreed to in writing, software\n// distributed under the License is distributed on an \"AS IS\" BASIS,\n// WITHOUT WARRANTIES OR CONDITIONS OF ANY KIND, either express or implied.\n// See the License for the specific language governing permissions and\n// limitations under the License.\n\nimport { Collapse, useTheme } from '@mui/material';\nimport { PanelGroupId } from '@perses-dev/core';\nimport { PanelGroupDefinition, PanelGroupItemLayout, PanelOptions, useViewPanelGroup } from '@perses-dev/dashboards';\nimport { ReactElement, useEffect, useMemo, useState } from 'react';\nimport { Layout, Layouts, Responsive, WidthProvider } from 'react-grid-layout';\nimport { ErrorAlert, ErrorBoundary } from '@perses-dev/components';\nimport { GRID_LAYOUT_COLS, GRID_LAYOUT_SMALL_BREAKPOINT } from '../../constants';\nimport { GridContainer } from './GridContainer';\nimport { GridItemContent } from './GridItemContent';\nimport { GridTitle } from './GridTitle';\n\nconst DEFAULT_MARGIN = 10;\nconst ROW_HEIGHT = 30;\n\nexport interface RowProps {\n  panelGroupId: PanelGroupId;\n  groupDefinition: PanelGroupDefinition;\n  gridColWidth: number;\n  panelFullHeight?: number;\n  panelOptions?: PanelOptions;\n  isEditMode?: boolean;\n  onLayoutChange?: (currentLayout: Layout[], allLayouts: Layouts) => void;\n  onWidthChange?: (\n    containerWidth: number,\n    margin: [number, number],\n    cols: number,\n    containerPadding: [number, number]\n  ) => void;\n  repeatVariable?: [string, string];\n}\n\nexport function Row({\n  panelGroupId,\n  groupDefinition,\n  gridColWidth,\n  panelFullHeight,\n  panelOptions,\n  isEditMode = false,\n  onLayoutChange,\n  onWidthChange,\n  repeatVariable,\n}: RowProps): ReactElement {\n  const ResponsiveGridLayout = useMemo(() => WidthProvider(Responsive), []);\n  const theme = useTheme();\n  const viewPanelItemId = useViewPanelGroup();\n\n  const [isOpen, setIsOpen] = useState(!groupDefinition.isCollapsed);\n\n  const hasViewPanel =\n    viewPanelItemId?.panelGroupId === panelGroupId &&\n    // Check for repeatVariable panels\n    viewPanelItemId.repeatVariable?.[0] === repeatVariable?.[0] &&\n    viewPanelItemId.repeatVariable?.[1] === repeatVariable?.[1];\n  const itemLayoutViewed = viewPanelItemId?.panelGroupItemLayoutId;\n\n  // If there is a panel in view mode, we should hide the grid if the panel is not in the current group.\n  const isGridDisplayed = !viewPanelItemId || hasViewPanel;\n\n  // TODO: handle it without useEffect\n  useEffect(() => {\n    if (hasViewPanel) {\n      setIsOpen(true);\n    }\n  }, [hasViewPanel]);\n\n  // Item layout is override if there is a panel in view mode\n  const itemLayouts: PanelGroupItemLayout[] = useMemo(() => {\n    if (itemLayoutViewed) {\n      return groupDefinition.itemLayouts.map((itemLayout) => {\n        if (itemLayout.i === itemLayoutViewed) {\n          const rowTitleHeight = 40 + 8; // 40 is the height of the row title and 8 is the margin height\n          return {\n            h: Math.round(((panelFullHeight ?? window.innerHeight) - rowTitleHeight) / (ROW_HEIGHT + DEFAULT_MARGIN)), // Viewed panel should take the full height remaining\n            i: itemLayoutViewed,\n            w: 48,\n            x: 0,\n            y: 0,\n          } as PanelGroupItemLayout;\n        }\n        return itemLayout;\n      });\n    }\n    return groupDefinition.itemLayouts;\n  }, [groupDefinition.itemLayouts, itemLayoutViewed, panelFullHeight]);\n\n  return (\n    <GridContainer\n      sx={{\n        display: isGridDisplayed ? 'block' : 'none',\n        height: itemLayoutViewed ? `${panelFullHeight}px` : 'unset',\n        overflow: itemLayoutViewed ? 'hidden' : 'unset',\n      }}\n    >\n      {groupDefinition.title && (\n        <GridTitle\n          panelGroupId={panelGroupId}\n          title={groupDefinition.title}\n          collapse={\n            groupDefinition.isCollapsed === undefined\n              ? undefined\n              : { isOpen: isOpen, onToggleOpen: () => setIsOpen((current) => !current) }\n          }\n        />\n      )}\n      <Collapse in={isOpen} unmountOnExit appear={false} data-testid=\"panel-group-content\">\n        <ResponsiveGridLayout\n          className=\"layout\"\n          breakpoints={{ [GRID_LAYOUT_SMALL_BREAKPOINT]: theme.breakpoints.values.sm, xxs: 0 }}\n          cols={GRID_LAYOUT_COLS}\n          rowHeight={ROW_HEIGHT}\n          draggableHandle=\".drag-handle\"\n          resizeHandles={['se']}\n          isDraggable={isEditMode && !hasViewPanel}\n          isResizable={isEditMode && !hasViewPanel}\n          margin={[DEFAULT_MARGIN, DEFAULT_MARGIN]}\n          containerPadding={[0, 10]}\n          layouts={{ sm: itemLayouts }}\n          onLayoutChange={onLayoutChange}\n          onWidthChange={onWidthChange}\n          allowOverlap={hasViewPanel} // Enabling overlap when viewing a specific panel because panel in front of the viewed panel will add empty spaces (empty row height)\n        >\n          {itemLayouts.map(({ i, w }) => (\n            <div\n              key={i}\n              style={{\n                display: itemLayoutViewed ? (itemLayoutViewed === i ? 'unset' : 'none') : 'unset',\n              }}\n            >\n              <ErrorBoundary FallbackComponent={ErrorAlert}>\n                <GridItemContent\n                  panelOptions={panelOptions}\n                  panelGroupItemId={{ panelGroupId, panelGroupItemLayoutId: i, repeatVariable }}\n                  width={calculateGridItemWidth(w, gridColWidth)}\n                />\n              </ErrorBoundary>\n            </div>\n          ))}\n        </ResponsiveGridLayout>\n      </Collapse>\n    </GridContainer>\n  );\n}\n\nconst calculateGridItemWidth = (w: number, colWidth: number): number => {\n  // 0 * Infinity === NaN, which causes problems with resize contraints\n  if (!Number.isFinite(w)) return w;\n  return Math.round(colWidth * w + Math.max(0, w - 1) * DEFAULT_MARGIN);\n};\n"],"names":["Collapse","useTheme","useViewPanelGroup","useEffect","useMemo","useState","Responsive","WidthProvider","ErrorAlert","ErrorBoundary","GRID_LAYOUT_COLS","GRID_LAYOUT_SMALL_BREAKPOINT","GridContainer","GridItemContent","GridTitle","DEFAULT_MARGIN","ROW_HEIGHT","Row","panelGroupId","groupDefinition","gridColWidth","panelFullHeight","panelOptions","isEditMode","onLayoutChange","onWidthChange","repeatVariable","ResponsiveGridLayout","theme","viewPanelItemId","isOpen","setIsOpen","isCollapsed","hasViewPanel","itemLayoutViewed","panelGroupItemLayoutId","isGridDisplayed","itemLayouts","map","itemLayout","i","rowTitleHeight","h","Math","round","window","innerHeight","w","x","y","sx","display","height","overflow","title","collapse","undefined","onToggleOpen","current","in","unmountOnExit","appear","data-testid","className","breakpoints","values","sm","xxs","cols","rowHeight","draggableHandle","resizeHandles","isDraggable","isResizable","margin","containerPadding","layouts","allowOverlap","div","style","FallbackComponent","panelGroupItemId","width","calculateGridItemWidth","colWidth","Number","isFinite","max"],"mappings":"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"}
+{"version":3,"sources":["../../../src/components/GridLayout/Row.tsx"],"sourcesContent":["// Copyright 2025 The Perses Authors\n// Licensed under the Apache License, Version 2.0 (the \"License\");\n// you may not use this file except in compliance with the License.\n// You may obtain a copy of the License at\n//\n// http://www.apache.org/licenses/LICENSE-2.0\n//\n// Unless required by applicable law or agreed to in writing, software\n// distributed under the License is distributed on an \"AS IS\" BASIS,\n// WITHOUT WARRANTIES OR CONDITIONS OF ANY KIND, either express or implied.\n// See the License for the specific language governing permissions and\n// limitations under the License.\n\nimport { Collapse, useTheme } from '@mui/material';\nimport { PanelGroupId, PanelGroupDefinition, PanelGroupItemLayout } from '@perses-dev/core';\nimport { PanelOptions, useViewPanelGroup } from '@perses-dev/dashboards';\nimport { ReactElement, useEffect, useMemo, useState } from 'react';\nimport { Layout, Layouts, Responsive, WidthProvider } from 'react-grid-layout';\nimport { ErrorAlert, ErrorBoundary } from '@perses-dev/components';\nimport { GRID_LAYOUT_COLS, GRID_LAYOUT_SMALL_BREAKPOINT } from '../../constants';\nimport { GridContainer } from './GridContainer';\nimport { GridItemContent } from './GridItemContent';\nimport { GridTitle } from './GridTitle';\n\nconst DEFAULT_MARGIN = 10;\nconst ROW_HEIGHT = 30;\n\nexport interface RowProps {\n  panelGroupId: PanelGroupId;\n  groupDefinition: PanelGroupDefinition;\n  gridColWidth: number;\n  panelFullHeight?: number;\n  panelOptions?: PanelOptions;\n  isEditMode?: boolean;\n  onLayoutChange?: (currentLayout: Layout[], allLayouts: Layouts) => void;\n  onWidthChange?: (\n    containerWidth: number,\n    margin: [number, number],\n    cols: number,\n    containerPadding: [number, number]\n  ) => void;\n  repeatVariable?: [string, string];\n}\n\nexport function Row({\n  panelGroupId,\n  groupDefinition,\n  gridColWidth,\n  panelFullHeight,\n  panelOptions,\n  isEditMode = false,\n  onLayoutChange,\n  onWidthChange,\n  repeatVariable,\n}: RowProps): ReactElement {\n  const ResponsiveGridLayout = useMemo(() => WidthProvider(Responsive), []);\n  const theme = useTheme();\n  const viewPanelItemId = useViewPanelGroup();\n\n  const [isOpen, setIsOpen] = useState(!groupDefinition.isCollapsed);\n\n  const hasViewPanel =\n    viewPanelItemId?.panelGroupId === panelGroupId &&\n    // Check for repeatVariable panels\n    viewPanelItemId.repeatVariable?.[0] === repeatVariable?.[0] &&\n    viewPanelItemId.repeatVariable?.[1] === repeatVariable?.[1];\n  const itemLayoutViewed = viewPanelItemId?.panelGroupItemLayoutId;\n\n  // If there is a panel in view mode, we should hide the grid if the panel is not in the current group.\n  const isGridDisplayed = !viewPanelItemId || hasViewPanel;\n\n  // TODO: handle it without useEffect\n  useEffect(() => {\n    if (hasViewPanel) {\n      setIsOpen(true);\n    }\n  }, [hasViewPanel]);\n\n  // Item layout is override if there is a panel in view mode\n  const itemLayouts: PanelGroupItemLayout[] = useMemo(() => {\n    if (itemLayoutViewed) {\n      return groupDefinition.itemLayouts.map((itemLayout) => {\n        if (itemLayout.i === itemLayoutViewed) {\n          const rowTitleHeight = 40 + 8; // 40 is the height of the row title and 8 is the margin height\n          return {\n            h: Math.round(((panelFullHeight ?? window.innerHeight) - rowTitleHeight) / (ROW_HEIGHT + DEFAULT_MARGIN)), // Viewed panel should take the full height remaining\n            i: itemLayoutViewed,\n            w: 48,\n            x: 0,\n            y: 0,\n          } as PanelGroupItemLayout;\n        }\n        return itemLayout;\n      });\n    }\n    return groupDefinition.itemLayouts;\n  }, [groupDefinition.itemLayouts, itemLayoutViewed, panelFullHeight]);\n\n  return (\n    <GridContainer\n      sx={{\n        display: isGridDisplayed ? 'block' : 'none',\n        height: itemLayoutViewed ? `${panelFullHeight}px` : 'unset',\n        overflow: itemLayoutViewed ? 'hidden' : 'unset',\n      }}\n    >\n      {groupDefinition.title && (\n        <GridTitle\n          panelGroupId={panelGroupId}\n          title={groupDefinition.title}\n          collapse={\n            groupDefinition.isCollapsed === undefined\n              ? undefined\n              : { isOpen: isOpen, onToggleOpen: () => setIsOpen((current) => !current) }\n          }\n        />\n      )}\n      <Collapse in={isOpen} unmountOnExit appear={false} data-testid=\"panel-group-content\">\n        <ResponsiveGridLayout\n          className=\"layout\"\n          breakpoints={{ [GRID_LAYOUT_SMALL_BREAKPOINT]: theme.breakpoints.values.sm, xxs: 0 }}\n          cols={GRID_LAYOUT_COLS}\n          rowHeight={ROW_HEIGHT}\n          draggableHandle=\".drag-handle\"\n          resizeHandles={['se']}\n          isDraggable={isEditMode && !hasViewPanel}\n          isResizable={isEditMode && !hasViewPanel}\n          margin={[DEFAULT_MARGIN, DEFAULT_MARGIN]}\n          containerPadding={[0, 10]}\n          layouts={{ sm: itemLayouts }}\n          onLayoutChange={onLayoutChange}\n          onWidthChange={onWidthChange}\n          allowOverlap={hasViewPanel} // Enabling overlap when viewing a specific panel because panel in front of the viewed panel will add empty spaces (empty row height)\n        >\n          {itemLayouts.map(({ i, w }) => (\n            <div\n              key={i}\n              style={{\n                display: itemLayoutViewed ? (itemLayoutViewed === i ? 'unset' : 'none') : 'unset',\n              }}\n            >\n              <ErrorBoundary FallbackComponent={ErrorAlert}>\n                <GridItemContent\n                  panelOptions={panelOptions}\n                  panelGroupItemId={{ panelGroupId, panelGroupItemLayoutId: i, repeatVariable }}\n                  width={calculateGridItemWidth(w, gridColWidth)}\n                />\n              </ErrorBoundary>\n            </div>\n          ))}\n        </ResponsiveGridLayout>\n      </Collapse>\n    </GridContainer>\n  );\n}\n\nconst calculateGridItemWidth = (w: number, colWidth: number): number => {\n  // 0 * Infinity === NaN, which causes problems with resize contraints\n  if (!Number.isFinite(w)) return w;\n  return Math.round(colWidth * w + Math.max(0, w - 1) * DEFAULT_MARGIN);\n};\n"],"names":["Collapse","useTheme","useViewPanelGroup","useEffect","useMemo","useState","Responsive","WidthProvider","ErrorAlert","ErrorBoundary","GRID_LAYOUT_COLS","GRID_LAYOUT_SMALL_BREAKPOINT","GridContainer","GridItemContent","GridTitle","DEFAULT_MARGIN","ROW_HEIGHT","Row","panelGroupId","groupDefinition","gridColWidth","panelFullHeight","panelOptions","isEditMode","onLayoutChange","onWidthChange","repeatVariable","ResponsiveGridLayout","theme","viewPanelItemId","isOpen","setIsOpen","isCollapsed","hasViewPanel","itemLayoutViewed","panelGroupItemLayoutId","isGridDisplayed","itemLayouts","map","itemLayout","i","rowTitleHeight","h","Math","round","window","innerHeight","w","x","y","sx","display","height","overflow","title","collapse","undefined","onToggleOpen","current","in","unmountOnExit","appear","data-testid","className","breakpoints","values","sm","xxs","cols","rowHeight","draggableHandle","resizeHandles","isDraggable","isResizable","margin","containerPadding","layouts","allowOverlap","div","style","FallbackComponent","panelGroupItemId","width","calculateGridItemWidth","colWidth","Number","isFinite","max"],"mappings":"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"}

package/dist/components/Panel/Panel.d.ts

@@ -1,7 +1,6 @@
 import { CardProps } from '@mui/material';
-import { PanelDefinition } from '@perses-dev/core';
+import { PanelDefinition, PanelGroupItemId } from '@perses-dev/core';
 import { ReactNode } from 'react';
-import { PanelGroupItemId } from '../../context';
 import { PanelHeaderProps } from './PanelHeader';
 export interface PanelProps extends CardProps<'section'> {
     definition: PanelDefinition;