@perses-dev/dashboards 0.9.0 → 0.11.0

package/dist/cjs/views/ViewDashboard/DashboardApp.js

@@ -22,9 +22,8 @@ const _jsxRuntime = require("react/jsx-runtime");
 const _material = require("@mui/material");
 const _components = require("@perses-dev/components");
 const _components1 = require("../../components");
-const _panelGroupDialog = /*#__PURE__*/ _interopRequireDefault(require("../../components/PanelGroupDialog/PanelGroupDialog"));
 const _dashboardToolbar = require("../../components/DashboardToolbar");
-const _context = require("../../context");
+const _deletePanelDialog = /*#__PURE__*/ _interopRequireDefault(require("../../components/Panel/DeletePanelDialog"));
 function _interopRequireDefault(obj) {
     return obj && obj.__esModule ? obj : {
         default: obj
@@ -32,8 +31,6 @@ function _interopRequireDefault(obj) {
 }
 const DashboardApp = (props)=>{
     const { dashboardResource  } = props;
-    const { dashboard  } = (0, _context.useDashboard)();
-    const { panelGroupDialog  } = (0, _context.useDashboardApp)();
     return /*#__PURE__*/ (0, _jsxRuntime.jsxs)(_material.Box, {
         sx: {
             padding: (theme)=>theme.spacing(1, 0),
@@ -54,12 +51,12 @@ const DashboardApp = (props)=>{
                 children: [
                     /*#__PURE__*/ (0, _jsxRuntime.jsx)(_components.ErrorBoundary, {
                         FallbackComponent: _components.ErrorAlert,
-                        children: /*#__PURE__*/ (0, _jsxRuntime.jsx)(_components1.Dashboard, {
-                            spec: dashboard
-                        })
+                        children: /*#__PURE__*/ (0, _jsxRuntime.jsx)(_components1.Dashboard, {})
                     }),
                     /*#__PURE__*/ (0, _jsxRuntime.jsx)(_components1.PanelDrawer, {}),
-                    panelGroupDialog && /*#__PURE__*/ (0, _jsxRuntime.jsx)(_panelGroupDialog.default, {})
+                    /*#__PURE__*/ (0, _jsxRuntime.jsx)(_components1.PanelGroupDialog, {}),
+                    /*#__PURE__*/ (0, _jsxRuntime.jsx)(_components1.DeletePanelGroupDialog, {}),
+                    /*#__PURE__*/ (0, _jsxRuntime.jsx)(_deletePanelDialog.default, {})
                 ]
             })
         ]

package/dist/cjs/views/ViewDashboard/ViewDashboard.js

@@ -19,36 +19,18 @@ Object.defineProperty(exports, "ViewDashboard", {
     get: ()=>ViewDashboard
 });
 const _jsxRuntime = require("react/jsx-runtime");
-const _react = require("react");
 const _material = require("@mui/material");
-const _core = require("@perses-dev/core");
-const _pluginSystem = require("@perses-dev/plugin-system");
 const _components = require("@perses-dev/components");
 const _context = require("../../context");
+const _utils = require("../../utils");
 const _dashboardApp = require("./DashboardApp");
 function ViewDashboard(props) {
     const { dashboardResource , datasourceApi , sx , ...others } = props;
     const { spec  } = dashboardResource;
-    const { queryString , setQueryString  } = (0, _pluginSystem.useQueryString)();
     var _duration;
     const dashboardDuration = (_duration = spec.duration) !== null && _duration !== void 0 ? _duration : '1h';
-    const defaultTimeRange = (0, _core.getDefaultTimeRange)(dashboardDuration, queryString);
-    // TODO: add reusable sync query string or no-op util
-    (0, _react.useEffect)(()=>{
-        const currentParams = Object.fromEntries([
-            ...queryString
-        ]);
-        // if app does not provide query string implementation, setTimeRange is used instead
-        if (!currentParams.start && setQueryString) {
-            // default to duration in dashboard definition if start param is not already set
-            queryString.set('start', dashboardDuration);
-            setQueryString(queryString);
-        }
-    }, [
-        dashboardDuration,
-        queryString,
-        setQueryString
-    ]);
+    const initialTimeRange = (0, _utils.useInitialTimeRange)(dashboardDuration);
+    const { timeRange , setTimeRange  } = (0, _utils.useSetTimeRangeParams)(initialTimeRange, true);
     return /*#__PURE__*/ (0, _jsxRuntime.jsx)(_context.DatasourceStoreProvider, {
         dashboardResource: dashboardResource,
         datasourceApi: datasourceApi,
@@ -57,7 +39,8 @@ function ViewDashboard(props) {
                 dashboardSpec: spec
             },
             children: /*#__PURE__*/ (0, _jsxRuntime.jsx)(_context.TimeRangeProvider, {
-                initialTimeRange: defaultTimeRange,
+                timeRange: timeRange,
+                setTimeRange: setTimeRange,
                 children: /*#__PURE__*/ (0, _jsxRuntime.jsx)(_context.TemplateVariableProvider, {
                     initialVariableDefinitions: spec.variables,
                     children: /*#__PURE__*/ (0, _jsxRuntime.jsx)(_material.Box, {

package/dist/cjs/views/ViewDashboard/tests/panelGroups.test.js

@@ -0,0 +1,114 @@
+// Copyright 2022 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
+});
+const _jsxRuntime = require("react/jsx-runtime");
+const _react = require("@testing-library/react");
+const _userEvent = /*#__PURE__*/ _interopRequireDefault(require("@testing-library/user-event"));
+const _context = require("../../../context");
+const _test = require("../../../test");
+const _dashboardApp = require("../DashboardApp");
+function _interopRequireDefault(obj) {
+    return obj && obj.__esModule ? obj : {
+        default: obj
+    };
+}
+describe('Panel Groups', ()=>{
+    const renderDashboard = ()=>{
+        (0, _test.renderWithContext)(/*#__PURE__*/ (0, _jsxRuntime.jsx)(_context.TimeRangeProvider, {
+            timeRange: {
+                pastDuration: '30m'
+            },
+            children: /*#__PURE__*/ (0, _jsxRuntime.jsx)(_context.TemplateVariableProvider, {
+                children: /*#__PURE__*/ (0, _jsxRuntime.jsx)(_context.DashboardProvider, {
+                    initialState: {
+                        dashboardSpec: (0, _test.getTestDashboard)().spec,
+                        isEditMode: true
+                    },
+                    children: /*#__PURE__*/ (0, _jsxRuntime.jsx)(_dashboardApp.DashboardApp, {
+                        dashboardResource: (0, _test.getTestDashboard)()
+                    })
+                })
+            })
+        }));
+    };
+    it('should delete panel', ()=>{
+        renderDashboard();
+        const panel = _react.screen.getByText('CPU');
+        _userEvent.default.hover(panel);
+        const deletePanelButton = _react.screen.getByLabelText('delete panel');
+        _userEvent.default.click(deletePanelButton);
+        _react.screen.getByText('Delete Panel');
+        const deleteButton = _react.screen.getByText('Delete');
+        _userEvent.default.click(deleteButton);
+        // The panel should disappear
+        const deletedPanel = _react.screen.queryByText('CPU');
+        expect(deletedPanel).not.toBeInTheDocument();
+    });
+    it('should only delete panel from panel group if panel is not referenced more than once', ()=>{
+        renderDashboard();
+        const panels = _react.screen.getAllByText('Disk I/O Utilization');
+        expect(panels).toHaveLength(2);
+        const panel = panels[0];
+        if (panel === undefined) throw new Error('Missing panel');
+        _userEvent.default.hover(panel);
+        const deletePanelButton = _react.screen.getByLabelText('delete panel');
+        _userEvent.default.click(deletePanelButton);
+        _react.screen.getByText('Delete Panel');
+        const deleteButton = _react.screen.getByText('Delete');
+        _userEvent.default.click(deleteButton);
+        // The deleted panel should still be on screen in the other group
+        const deletedPanel = _react.screen.queryByText('Disk I/O Utilization');
+        expect(deletedPanel).toBeInTheDocument();
+    });
+    it('should swap panels', ()=>{
+        renderDashboard();
+        // should move panel down
+        const group1 = _react.screen.getByText('CPU Stats');
+        _userEvent.default.hover(group1);
+        const moveGroupDownBtn = _react.screen.getByLabelText('move group down');
+        _userEvent.default.click(moveGroupDownBtn);
+        _userEvent.default.unhover(moveGroupDownBtn);
+        // should move panel up
+        const group2 = _react.screen.getByText('Disk Stats');
+        _userEvent.default.hover(group2);
+        const moveGroupUpBtn = _react.screen.getByLabelText('move group up');
+        _userEvent.default.click(moveGroupUpBtn);
+    /* TODO: Figure out how to test this visually without coupling to the store
+    const layouts = storeApi.getState().layouts;
+    expect(layouts[0]?.title).toBe(undefined);
+    expect(layouts[1]?.title).toBe('Disk Stats');
+    expect(layouts[2]?.title).toBe('CPU Stats');
+    */ });
+    it('should delete a panel group', ()=>{
+        renderDashboard();
+        const group = _react.screen.getByText('CPU Stats');
+        _userEvent.default.hover(group);
+        const deleteGroupIcon = _react.screen.getByLabelText('delete group');
+        _userEvent.default.click(deleteGroupIcon);
+        _react.screen.getByText('Delete Panel Group');
+        const deleteButton = _react.screen.getByText('Delete');
+        _userEvent.default.click(deleteButton);
+        // should remove group
+        const deletedGroup = _react.screen.queryByText('CPU Stats');
+        expect(deletedGroup).not.toBeInTheDocument();
+        // CPU panel should be completely gone since it wasn't in any other group
+        let panel = _react.screen.queryByText('CPU');
+        expect(panel).not.toBeInTheDocument();
+        // A DiskIO panel should still be present in the other group that wasn't deleted
+        panel = _react.screen.queryByText('Disk I/O Utilization');
+        expect(panel).toBeInTheDocument();
+    });
+});

package/dist/components/Dashboard.d.ts

@@ -1,9 +1,6 @@
 /// <reference types="react" />
 import { BoxProps } from '@mui/material';
-import { DashboardSpec } from '@perses-dev/core';
-export interface DashboardProps extends BoxProps {
-    spec: DashboardSpec;
-}
+export declare type DashboardProps = BoxProps;
 /**
  * Renders a Dashboard for the provided Dashboard spec.
  */

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

@@ -1 +1 @@
-{"version":3,"file":"Dashboard.d.ts","sourceRoot":"","sources":["../../src/components/Dashboard.tsx"],"names":[],"mappings":";AAaA,OAAO,EAAO,QAAQ,EAAE,MAAM,eAAe,CAAC;AAE9C,OAAO,EAAE,aAAa,EAAE,MAAM,kBAAkB,CAAC;AAGjD,MAAM,WAAW,cAAe,SAAQ,QAAQ;IAC9C,IAAI,EAAE,aAAa,CAAC;CACrB;AAED;;GAEG;AACH,wBAAgB,SAAS,CAAC,KAAK,EAAE,cAAc,eAmB9C"}
+{"version":3,"file":"Dashboard.d.ts","sourceRoot":"","sources":["../../src/components/Dashboard.tsx"],"names":[],"mappings":";AAaA,OAAO,EAAO,QAAQ,EAAE,MAAM,eAAe,CAAC;AAK9C,oBAAY,cAAc,GAAG,QAAQ,CAAC;AAEtC;;GAEG;AACH,wBAAgB,SAAS,CAAC,KAAK,EAAE,cAAc,eAW9C"}

package/dist/components/Dashboard.js

@@ -13,24 +13,19 @@
 import { jsx as _jsx } from "react/jsx-runtime";
 import { Box } from '@mui/material';
 import { ErrorBoundary, ErrorAlert } from '@perses-dev/components';
-import { GridLayout, GridItemContent } from './GridLayout';
+import { usePanelGroupIds } from '../context';
+import { GridLayout } from './GridLayout';
 /**
  * Renders a Dashboard for the provided Dashboard spec.
  */ export function Dashboard(props) {
-    const { spec , ...others } = props;
+    const panelGroupIds = usePanelGroupIds();
     return /*#__PURE__*/ _jsx(Box, {
-        ...others,
+        ...props,
         children: /*#__PURE__*/ _jsx(ErrorBoundary, {
             FallbackComponent: ErrorAlert,
-            children: spec.layouts.map((layout, idx)=>/*#__PURE__*/ _jsx(GridLayout, {
-                    groupIndex: idx,
-                    definition: layout,
-                    renderGridItemContent: (definition, groupIndex)=>/*#__PURE__*/ _jsx(GridItemContent, {
-                            content: definition.content,
-                            spec: spec,
-                            groupIndex: groupIndex
-                        })
-                }, `${JSON.stringify(spec.layouts)} ${idx}`))
+            children: panelGroupIds.map((panelGroupId)=>/*#__PURE__*/ _jsx(GridLayout, {
+                    panelGroupId: panelGroupId
+                }, panelGroupId))
         })
     });
 }

package/dist/components/Dashboard.js.map

@@ -1 +1 @@
-{"version":3,"sources":["../../src/components/Dashboard.tsx"],"sourcesContent":["// Copyright 2022 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, BoxProps } from '@mui/material';\nimport { ErrorBoundary, ErrorAlert } from '@perses-dev/components';\nimport { DashboardSpec } from '@perses-dev/core';\nimport { GridLayout, GridItemContent } from './GridLayout';\n\nexport interface DashboardProps extends BoxProps {\n  spec: DashboardSpec;\n}\n\n/**\n * Renders a Dashboard for the provided Dashboard spec.\n */\nexport function Dashboard(props: DashboardProps) {\n  const { spec, ...others } = props;\n\n  return (\n    <Box {...others}>\n      <ErrorBoundary FallbackComponent={ErrorAlert}>\n        {spec.layouts.map((layout, idx) => (\n          <GridLayout\n            key={`${JSON.stringify(spec.layouts)} ${idx}`} // reset grid layout states when spec.layout changes\n            groupIndex={idx}\n            definition={layout}\n            renderGridItemContent={(definition, groupIndex) => (\n              <GridItemContent content={definition.content} spec={spec} groupIndex={groupIndex} />\n            )}\n          />\n        ))}\n      </ErrorBoundary>\n    </Box>\n  );\n}\n"],"names":["Box","ErrorBoundary","ErrorAlert","GridLayout","GridItemContent","Dashboard","props","spec","others","FallbackComponent","layouts","map","layout","idx","groupIndex","definition","renderGridItemContent","content","JSON","stringify"],"mappings":"AAAA,oCAAoC;AACpC,kEAAkE;AAClE,mEAAmE;AACnE,0CAA0C;AAC1C,EAAE;AACF,6CAA6C;AAC7C,EAAE;AACF,sEAAsE;AACtE,oEAAoE;AACpE,2EAA2E;AAC3E,sEAAsE;AACtE,iCAAiC;AAEjC;AAAA,SAASA,GAAG,QAAkB,eAAe,CAAC;AAC9C,SAASC,aAAa,EAAEC,UAAU,QAAQ,wBAAwB,CAAC;AAEnE,SAASC,UAAU,EAAEC,eAAe,QAAQ,cAAc,CAAC;AAM3D;;CAEC,GACD,OAAO,SAASC,SAAS,CAACC,KAAqB,EAAE;IAC/C,MAAM,EAAEC,IAAI,CAAA,EAAE,GAAGC,MAAM,EAAE,GAAGF,KAAK,AAAC;IAElC,qBACE,KAACN,GAAG;QAAE,GAAGQ,MAAM;kBACb,cAAA,KAACP,aAAa;YAACQ,iBAAiB,EAAEP,UAAU;sBACzCK,IAAI,CAACG,OAAO,CAACC,GAAG,CAAC,CAACC,MAAM,EAAEC,GAAG,iBAC5B,KAACV,UAAU;oBAETW,UAAU,EAAED,GAAG;oBACfE,UAAU,EAAEH,MAAM;oBAClBI,qBAAqB,EAAE,CAACD,UAAU,EAAED,UAAU,iBAC5C,KAACV,eAAe;4BAACa,OAAO,EAAEF,UAAU,CAACE,OAAO;4BAAEV,IAAI,EAAEA,IAAI;4BAAEO,UAAU,EAAEA,UAAU;0BAAI,AACrF;mBALI,CAAC,EAAEI,IAAI,CAACC,SAAS,CAACZ,IAAI,CAACG,OAAO,CAAC,CAAC,CAAC,EAAEG,GAAG,CAAC,CAAC,CAM7C,AACH,CAAC;UACY;MACZ,CACN;AACJ,CAAC"}
+{"version":3,"sources":["../../src/components/Dashboard.tsx"],"sourcesContent":["// Copyright 2022 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, BoxProps } from '@mui/material';\nimport { ErrorBoundary, ErrorAlert } from '@perses-dev/components';\nimport { usePanelGroupIds } from '../context';\nimport { GridLayout } from './GridLayout';\n\nexport type DashboardProps = BoxProps;\n\n/**\n * Renders a Dashboard for the provided Dashboard spec.\n */\nexport function Dashboard(props: DashboardProps) {\n  const panelGroupIds = usePanelGroupIds();\n  return (\n    <Box {...props}>\n      <ErrorBoundary FallbackComponent={ErrorAlert}>\n        {panelGroupIds.map((panelGroupId) => (\n          <GridLayout key={panelGroupId} panelGroupId={panelGroupId} />\n        ))}\n      </ErrorBoundary>\n    </Box>\n  );\n}\n"],"names":["Box","ErrorBoundary","ErrorAlert","usePanelGroupIds","GridLayout","Dashboard","props","panelGroupIds","FallbackComponent","map","panelGroupId"],"mappings":"AAAA,oCAAoC;AACpC,kEAAkE;AAClE,mEAAmE;AACnE,0CAA0C;AAC1C,EAAE;AACF,6CAA6C;AAC7C,EAAE;AACF,sEAAsE;AACtE,oEAAoE;AACpE,2EAA2E;AAC3E,sEAAsE;AACtE,iCAAiC;AAEjC;AAAA,SAASA,GAAG,QAAkB,eAAe,CAAC;AAC9C,SAASC,aAAa,EAAEC,UAAU,QAAQ,wBAAwB,CAAC;AACnE,SAASC,gBAAgB,QAAQ,YAAY,CAAC;AAC9C,SAASC,UAAU,QAAQ,cAAc,CAAC;AAI1C;;CAEC,GACD,OAAO,SAASC,SAAS,CAACC,KAAqB,EAAE;IAC/C,MAAMC,aAAa,GAAGJ,gBAAgB,EAAE,AAAC;IACzC,qBACE,KAACH,GAAG;QAAE,GAAGM,KAAK;kBACZ,cAAA,KAACL,aAAa;YAACO,iBAAiB,EAAEN,UAAU;sBACzCK,aAAa,CAACE,GAAG,CAAC,CAACC,YAAY,iBAC9B,KAACN,UAAU;oBAAoBM,YAAY,EAAEA,YAAY;mBAAxCA,YAAY,CAAgC,AAC9D,CAAC;UACY;MACZ,CACN;AACJ,CAAC"}

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

@@ -1 +1 @@
-{"version":3,"file":"DashboardToolbar.d.ts","sourceRoot":"","sources":["../../src/components/DashboardToolbar.tsx"],"names":[],"mappings":";AAqBA,MAAM,WAAW,qBAAqB;IACpC,aAAa,EAAE,MAAM,CAAC;CACvB;AAED,eAAO,MAAM,gBAAgB,UAAW,qBAAqB,gBA2E5D,CAAC"}
+{"version":3,"file":"DashboardToolbar.d.ts","sourceRoot":"","sources":["../../src/components/DashboardToolbar.tsx"],"names":[],"mappings":";AAqBA,MAAM,WAAW,qBAAqB;IACpC,aAAa,EAAE,MAAM,CAAC;CACvB;AAED,eAAO,MAAM,gBAAgB,UAAW,qBAAqB,gBAuF5D,CAAC"}

package/dist/components/DashboardToolbar.js

@@ -11,21 +11,27 @@
 // See the License for the specific language governing permissions and
 // limitations under the License.
 import { jsx as _jsx, jsxs as _jsxs, Fragment as _Fragment } from "react/jsx-runtime";
-import { Typography, Stack, Button, Box } from '@mui/material';
+import { Typography, Stack, Button, Box, useTheme, useMediaQuery } from '@mui/material';
 import PencilIcon from 'mdi-material-ui/PencilOutline';
 import AddPanelGroupIcon from 'mdi-material-ui/PlusBoxOutline';
 import AddPanelIcon from 'mdi-material-ui/ChartBoxPlusOutline';
 import { ErrorBoundary, ErrorAlert } from '@perses-dev/components';
-import { useDashboardApp, useEditMode } from '../context';
+import { useDashboardActions, useEditMode } from '../context';
 import { TemplateVariableList, TimeRangeControls } from '../components';
 export const DashboardToolbar = (props)=>{
     const { dashboardName  } = props;
     const { isEditMode , setEditMode  } = useEditMode();
-    const { openPanelDrawer , openPanelGroupDialog  } = useDashboardApp();
+    const { openAddPanelGroup , openAddPanel , reset , save  } = useDashboardActions();
+    const isLaptopSize = useMediaQuery(useTheme().breakpoints.up('sm'));
     const onEditButtonClick = ()=>{
         setEditMode(true);
     };
     const onCancelButtonClick = ()=>{
+        reset();
+        setEditMode(false);
+    };
+    const onSave = ()=>{
+        save();
         setEditMode(false);
     };
     return /*#__PURE__*/ _jsx(_Fragment, {
@@ -56,6 +62,7 @@ export const DashboardToolbar = (props)=>{
                                 children: [
                                     /*#__PURE__*/ _jsx(Button, {
                                         variant: "contained",
+                                        onClick: onSave,
                                         children: "Save"
                                     }),
                                     /*#__PURE__*/ _jsx(Button, {
@@ -72,6 +79,7 @@ export const DashboardToolbar = (props)=>{
                     sx: {
                         display: 'flex',
                         width: '100%',
+                        alignItems: 'flex-start',
                         padding: (theme)=>theme.spacing(2)
                     },
                     children: [
@@ -88,14 +96,12 @@ export const DashboardToolbar = (props)=>{
                             children: [
                                 /*#__PURE__*/ _jsx(Button, {
                                     startIcon: /*#__PURE__*/ _jsx(AddPanelGroupIcon, {}),
-                                    onClick: ()=>openPanelGroupDialog(),
+                                    onClick: openAddPanelGroup,
                                     children: "Add Panel Group"
                                 }),
                                 /*#__PURE__*/ _jsx(Button, {
                                     startIcon: /*#__PURE__*/ _jsx(AddPanelIcon, {}),
-                                    onClick: ()=>openPanelDrawer({
-                                            groupIndex: 0
-                                        }),
+                                    onClick: openAddPanel,
                                     children: "Add Panel"
                                 }),
                                 /*#__PURE__*/ _jsx(TimeRangeControls, {})
@@ -126,7 +132,7 @@ export const DashboardToolbar = (props)=>{
                             },
                             children: [
                                 /*#__PURE__*/ _jsx(TimeRangeControls, {}),
-                                /*#__PURE__*/ _jsx(Button, {
+                                isLaptopSize && /*#__PURE__*/ _jsx(Button, {
                                     variant: "outlined",
                                     startIcon: /*#__PURE__*/ _jsx(PencilIcon, {}),
                                     onClick: onEditButtonClick,

package/dist/components/DashboardToolbar.js.map

@@ -1 +1 @@
-{"version":3,"sources":["../../src/components/DashboardToolbar.tsx"],"sourcesContent":["// Copyright 2022 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 { Typography, Stack, Button, Box } from '@mui/material';\nimport PencilIcon from 'mdi-material-ui/PencilOutline';\nimport AddPanelGroupIcon from 'mdi-material-ui/PlusBoxOutline';\nimport AddPanelIcon from 'mdi-material-ui/ChartBoxPlusOutline';\nimport { ErrorBoundary, ErrorAlert } from '@perses-dev/components';\nimport { useDashboardApp, useEditMode } from '../context';\nimport { TemplateVariableList, TimeRangeControls } from '../components';\n\nexport interface DashboardToolbarProps {\n  dashboardName: string;\n}\n\nexport const DashboardToolbar = (props: DashboardToolbarProps) => {\n  const { dashboardName } = props;\n\n  const { isEditMode, setEditMode } = useEditMode();\n  const { openPanelDrawer, openPanelGroupDialog } = useDashboardApp();\n\n  const onEditButtonClick = () => {\n    setEditMode(true);\n  };\n\n  const onCancelButtonClick = () => {\n    setEditMode(false);\n  };\n\n  return (\n    <>\n      {isEditMode ? (\n        <Stack spacing={2}>\n          <Box sx={{ backgroundColor: (theme) => theme.palette.primary.light + '20' }}>\n            <Box padding={2} display=\"flex\">\n              <Typography variant=\"h2\">Edit {dashboardName}</Typography>\n              <Stack direction=\"row\" spacing={1} sx={{ marginLeft: 'auto' }}>\n                <Button variant=\"contained\">Save</Button>\n                <Button variant=\"outlined\" onClick={onCancelButtonClick}>\n                  Cancel\n                </Button>\n              </Stack>\n            </Box>\n          </Box>\n          <Box\n            sx={{\n              display: 'flex',\n              width: '100%',\n              padding: (theme) => theme.spacing(2),\n            }}\n          >\n            <ErrorBoundary FallbackComponent={ErrorAlert}>\n              <TemplateVariableList />\n            </ErrorBoundary>\n            <Stack direction={'row'} spacing={1} sx={{ marginLeft: 'auto' }}>\n              <Button startIcon={<AddPanelGroupIcon />} onClick={() => openPanelGroupDialog()}>\n                Add Panel Group\n              </Button>\n              <Button startIcon={<AddPanelIcon />} onClick={() => openPanelDrawer({ groupIndex: 0 })}>\n                Add Panel\n              </Button>\n              <TimeRangeControls />\n            </Stack>\n          </Box>\n        </Stack>\n      ) : (\n        <Stack spacing={2} padding={2}>\n          <Box sx={{ display: 'flex', width: '100%' }}>\n            <Typography variant=\"h2\">{dashboardName}</Typography>\n            <Stack direction=\"row\" spacing={2} sx={{ marginLeft: 'auto' }}>\n              <TimeRangeControls />\n              <Button\n                variant=\"outlined\"\n                startIcon={<PencilIcon />}\n                onClick={onEditButtonClick}\n                sx={{ marginLeft: 'auto' }}\n              >\n                Edit\n              </Button>\n            </Stack>\n          </Box>\n          <Box paddingY={2}>\n            <ErrorBoundary FallbackComponent={ErrorAlert}>\n              <TemplateVariableList />\n            </ErrorBoundary>\n          </Box>\n        </Stack>\n      )}\n    </>\n  );\n};\n"],"names":["Typography","Stack","Button","Box","PencilIcon","AddPanelGroupIcon","AddPanelIcon","ErrorBoundary","ErrorAlert","useDashboardApp","useEditMode","TemplateVariableList","TimeRangeControls","DashboardToolbar","props","dashboardName","isEditMode","setEditMode","openPanelDrawer","openPanelGroupDialog","onEditButtonClick","onCancelButtonClick","spacing","sx","backgroundColor","theme","palette","primary","light","padding","display","variant","direction","marginLeft","onClick","width","FallbackComponent","startIcon","groupIndex","paddingY"],"mappings":"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"}
+{"version":3,"sources":["../../src/components/DashboardToolbar.tsx"],"sourcesContent":["// Copyright 2022 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 { Typography, Stack, Button, Box, useTheme, useMediaQuery } from '@mui/material';\nimport PencilIcon from 'mdi-material-ui/PencilOutline';\nimport AddPanelGroupIcon from 'mdi-material-ui/PlusBoxOutline';\nimport AddPanelIcon from 'mdi-material-ui/ChartBoxPlusOutline';\nimport { ErrorBoundary, ErrorAlert } from '@perses-dev/components';\nimport { useDashboardActions, useEditMode } from '../context';\nimport { TemplateVariableList, TimeRangeControls } from '../components';\n\nexport interface DashboardToolbarProps {\n  dashboardName: string;\n}\n\nexport const DashboardToolbar = (props: DashboardToolbarProps) => {\n  const { dashboardName } = props;\n\n  const { isEditMode, setEditMode } = useEditMode();\n  const { openAddPanelGroup, openAddPanel, reset, save } = useDashboardActions();\n  const isLaptopSize = useMediaQuery(useTheme().breakpoints.up('sm'));\n\n  const onEditButtonClick = () => {\n    setEditMode(true);\n  };\n\n  const onCancelButtonClick = () => {\n    reset();\n    setEditMode(false);\n  };\n\n  const onSave = () => {\n    save();\n    setEditMode(false);\n  };\n\n  return (\n    <>\n      {isEditMode ? (\n        <Stack spacing={2}>\n          <Box sx={{ backgroundColor: (theme) => theme.palette.primary.light + '20' }}>\n            <Box padding={2} display=\"flex\">\n              <Typography variant=\"h2\">Edit {dashboardName}</Typography>\n              <Stack direction=\"row\" spacing={1} sx={{ marginLeft: 'auto' }}>\n                <Button variant=\"contained\" onClick={onSave}>\n                  Save\n                </Button>\n                <Button variant=\"outlined\" onClick={onCancelButtonClick}>\n                  Cancel\n                </Button>\n              </Stack>\n            </Box>\n          </Box>\n          <Box\n            sx={{\n              display: 'flex',\n              width: '100%',\n              alignItems: 'flex-start',\n              padding: (theme) => theme.spacing(2),\n            }}\n          >\n            <ErrorBoundary FallbackComponent={ErrorAlert}>\n              <TemplateVariableList />\n            </ErrorBoundary>\n            <Stack direction={'row'} spacing={1} sx={{ marginLeft: 'auto' }}>\n              <Button startIcon={<AddPanelGroupIcon />} onClick={openAddPanelGroup}>\n                Add Panel Group\n              </Button>\n              <Button startIcon={<AddPanelIcon />} onClick={openAddPanel}>\n                Add Panel\n              </Button>\n              <TimeRangeControls />\n            </Stack>\n          </Box>\n        </Stack>\n      ) : (\n        <Stack spacing={2} padding={2}>\n          <Box sx={{ display: 'flex', width: '100%' }}>\n            <Typography variant=\"h2\">{dashboardName}</Typography>\n            <Stack direction=\"row\" spacing={2} sx={{ marginLeft: 'auto' }}>\n              <TimeRangeControls />\n              {isLaptopSize && (\n                <Button\n                  variant=\"outlined\"\n                  startIcon={<PencilIcon />}\n                  onClick={onEditButtonClick}\n                  sx={{ marginLeft: 'auto' }}\n                >\n                  Edit\n                </Button>\n              )}\n            </Stack>\n          </Box>\n          <Box paddingY={2}>\n            <ErrorBoundary FallbackComponent={ErrorAlert}>\n              <TemplateVariableList />\n            </ErrorBoundary>\n          </Box>\n        </Stack>\n      )}\n    </>\n  );\n};\n"],"names":["Typography","Stack","Button","Box","useTheme","useMediaQuery","PencilIcon","AddPanelGroupIcon","AddPanelIcon","ErrorBoundary","ErrorAlert","useDashboardActions","useEditMode","TemplateVariableList","TimeRangeControls","DashboardToolbar","props","dashboardName","isEditMode","setEditMode","openAddPanelGroup","openAddPanel","reset","save","isLaptopSize","breakpoints","up","onEditButtonClick","onCancelButtonClick","onSave","spacing","sx","backgroundColor","theme","palette","primary","light","padding","display","variant","direction","marginLeft","onClick","width","alignItems","FallbackComponent","startIcon","paddingY"],"mappings":"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"}

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

@@ -1,9 +1,7 @@
 /// <reference types="react" />
-import { DashboardSpec, GridItemDefinition } from '@perses-dev/core';
+import { LayoutItem } from '../../context';
 export interface GridItemContentProps {
-    spec: DashboardSpec;
-    content: GridItemDefinition['content'];
-    groupIndex: number;
+    panelGroupItemId: LayoutItem;
 }
 /**
  * Resolves the reference to panel content in a GridItemDefinition and renders the panel.

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":";AAcA,OAAO,EAAE,aAAa,EAAE,kBAAkB,EAAmB,MAAM,kBAAkB,CAAC;AAGtF,MAAM,WAAW,oBAAoB;IACnC,IAAI,EAAE,aAAa,CAAC;IACpB,OAAO,EAAE,kBAAkB,CAAC,SAAS,CAAC,CAAC;IACvC,UAAU,EAAE,MAAM,CAAC;CACpB;AAED;;GAEG;AACH,wBAAgB,eAAe,CAAC,KAAK,EAAE,oBAAoB,eAQ1D"}
+{"version":3,"file":"GridItemContent.d.ts","sourceRoot":"","sources":["../../../src/components/GridLayout/GridItemContent.tsx"],"names":[],"mappings":";AAaA,OAAO,EAAE,UAAU,EAAY,MAAM,eAAe,CAAC;AAGrD,MAAM,WAAW,oBAAoB;IACnC,gBAAgB,EAAE,UAAU,CAAC;CAC9B;AAED;;GAEG;AACH,wBAAgB,eAAe,CAAC,KAAK,EAAE,oBAAoB,eAI1D"}

package/dist/components/GridLayout/GridItemContent.js

@@ -11,25 +11,17 @@
 // See the License for the specific language governing permissions and
 // limitations under the License.
 import { jsx as _jsx } from "react/jsx-runtime";
-import { ErrorAlert } from '@perses-dev/components';
-import { resolvePanelRef } from '@perses-dev/core';
+import { usePanel } from '../../context';
 import { Panel } from '../Panel/Panel';
 /**
  * Resolves the reference to panel content in a GridItemDefinition and renders the panel.
  */ export function GridItemContent(props) {
-    const { content , spec , groupIndex  } = props;
-    try {
-        const { panelDefinition , panelsKey  } = resolvePanelRef(spec, content);
-        return /*#__PURE__*/ _jsx(Panel, {
-            definition: panelDefinition,
-            groupIndex: groupIndex,
-            panelKey: panelsKey
-        });
-    } catch (err) {
-        return /*#__PURE__*/ _jsx(ErrorAlert, {
-            error: err
-        });
-    }
+    const { panelGroupItemId  } = props;
+    const panelDefinition = usePanel(panelGroupItemId);
+    return /*#__PURE__*/ _jsx(Panel, {
+        definition: panelDefinition,
+        panelGroupItemId: panelGroupItemId
+    });
 }
 
 //# sourceMappingURL=GridItemContent.js.map

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

@@ -1 +1 @@
-{"version":3,"sources":["../../../src/components/GridLayout/GridItemContent.tsx"],"sourcesContent":["// Copyright 2022 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 { ErrorAlert } from '@perses-dev/components';\nimport { DashboardSpec, GridItemDefinition, resolvePanelRef } from '@perses-dev/core';\nimport { Panel } from '../Panel/Panel';\n\nexport interface GridItemContentProps {\n  spec: DashboardSpec;\n  content: GridItemDefinition['content'];\n  groupIndex: number;\n}\n\n/**\n * Resolves the reference to panel content in a GridItemDefinition and renders the panel.\n */\nexport function GridItemContent(props: GridItemContentProps) {\n  const { content, spec, groupIndex } = props;\n  try {\n    const { panelDefinition, panelsKey } = resolvePanelRef(spec, content);\n    return <Panel definition={panelDefinition} groupIndex={groupIndex} panelKey={panelsKey} />;\n  } catch (err) {\n    return <ErrorAlert error={err as Error} />;\n  }\n}\n"],"names":["ErrorAlert","resolvePanelRef","Panel","GridItemContent","props","content","spec","groupIndex","panelDefinition","panelsKey","definition","panelKey","err","error"],"mappings":"AAAA,oCAAoC;AACpC,kEAAkE;AAClE,mEAAmE;AACnE,0CAA0C;AAC1C,EAAE;AACF,6CAA6C;AAC7C,EAAE;AACF,sEAAsE;AACtE,oEAAoE;AACpE,2EAA2E;AAC3E,sEAAsE;AACtE,iCAAiC;AAEjC;AAAA,SAASA,UAAU,QAAQ,wBAAwB,CAAC;AACpD,SAA4CC,eAAe,QAAQ,kBAAkB,CAAC;AACtF,SAASC,KAAK,QAAQ,gBAAgB,CAAC;AAQvC;;CAEC,GACD,OAAO,SAASC,eAAe,CAACC,KAA2B,EAAE;IAC3D,MAAM,EAAEC,OAAO,CAAA,EAAEC,IAAI,CAAA,EAAEC,UAAU,CAAA,EAAE,GAAGH,KAAK,AAAC;IAC5C,IAAI;QACF,MAAM,EAAEI,eAAe,CAAA,EAAEC,SAAS,CAAA,EAAE,GAAGR,eAAe,CAACK,IAAI,EAAED,OAAO,CAAC,AAAC;QACtE,qBAAO,KAACH,KAAK;YAACQ,UAAU,EAAEF,eAAe;YAAED,UAAU,EAAEA,UAAU;YAAEI,QAAQ,EAAEF,SAAS;UAAI,CAAC;IAC7F,EAAE,OAAOG,GAAG,EAAE;QACZ,qBAAO,KAACZ,UAAU;YAACa,KAAK,EAAED,GAAG;UAAa,CAAC;IAC7C,CAAC;AACH,CAAC"}
+{"version":3,"sources":["../../../src/components/GridLayout/GridItemContent.tsx"],"sourcesContent":["// Copyright 2022 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 { LayoutItem, usePanel } from '../../context';\nimport { Panel } from '../Panel/Panel';\n\nexport interface GridItemContentProps {\n  panelGroupItemId: LayoutItem;\n}\n\n/**\n * Resolves the reference to panel content in a GridItemDefinition and renders the panel.\n */\nexport function GridItemContent(props: GridItemContentProps) {\n  const { panelGroupItemId } = props;\n  const panelDefinition = usePanel(panelGroupItemId);\n  return <Panel definition={panelDefinition} panelGroupItemId={panelGroupItemId} />;\n}\n"],"names":["usePanel","Panel","GridItemContent","props","panelGroupItemId","panelDefinition","definition"],"mappings":"AAAA,oCAAoC;AACpC,kEAAkE;AAClE,mEAAmE;AACnE,0CAA0C;AAC1C,EAAE;AACF,6CAA6C;AAC7C,EAAE;AACF,sEAAsE;AACtE,oEAAoE;AACpE,2EAA2E;AAC3E,sEAAsE;AACtE,iCAAiC;AAEjC;AAAA,SAAqBA,QAAQ,QAAQ,eAAe,CAAC;AACrD,SAASC,KAAK,QAAQ,gBAAgB,CAAC;AAMvC;;CAEC,GACD,OAAO,SAASC,eAAe,CAACC,KAA2B,EAAE;IAC3D,MAAM,EAAEC,gBAAgB,CAAA,EAAE,GAAGD,KAAK,AAAC;IACnC,MAAME,eAAe,GAAGL,QAAQ,CAACI,gBAAgB,CAAC,AAAC;IACnD,qBAAO,KAACH,KAAK;QAACK,UAAU,EAAED,eAAe;QAAED,gBAAgB,EAAEA,gBAAgB;MAAI,CAAC;AACpF,CAAC"}

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

@@ -1,10 +1,8 @@
 /// <reference types="react" />
 import { BoxProps } from '@mui/material';
-import { GridDefinition, GridItemDefinition } from '@perses-dev/core';
+import { PanelGroupId } from '../../context';
 export interface GridLayoutProps extends BoxProps {
-    groupIndex: number;
-    definition: GridDefinition;
-    renderGridItemContent: (definition: GridItemDefinition, groupIndex: number) => React.ReactNode;
+    panelGroupId: PanelGroupId;
 }
 /**
  * Layout component that arranges children in a Grid based on the definition.

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":";AAcA,OAAO,EAAO,QAAQ,EAA0B,MAAM,eAAe,CAAC;AACtE,OAAO,EAAE,cAAc,EAAE,kBAAkB,EAAE,MAAM,kBAAkB,CAAC;AAOtE,MAAM,WAAW,eAAgB,SAAQ,QAAQ;IAC/C,UAAU,EAAE,MAAM,CAAC;IACnB,UAAU,EAAE,cAAc,CAAC;IAC3B,qBAAqB,EAAE,CAAC,UAAU,EAAE,kBAAkB,EAAE,UAAU,EAAE,MAAM,KAAK,KAAK,CAAC,SAAS,CAAC;CAChG;AAED;;GAEG;AACH,wBAAgB,UAAU,CAAC,KAAK,EAAE,eAAe,eAwDhD"}
+{"version":3,"file":"GridLayout.d.ts","sourceRoot":"","sources":["../../../src/components/GridLayout/GridLayout.tsx"],"names":[],"mappings":";AAcA,OAAO,EAAO,QAAQ,EAA0B,MAAM,eAAe,CAAC;AAGtE,OAAO,EAA8B,YAAY,EAAE,MAAM,eAAe,CAAC;AAMzE,MAAM,WAAW,eAAgB,SAAQ,QAAQ;IAC/C,YAAY,EAAE,YAAY,CAAC;CAC5B;AAED;;GAEG;AACH,wBAAgB,UAAU,CAAC,KAAK,EAAE,eAAe,eA6ChD"}

package/dist/components/GridLayout/GridLayout.js

@@ -14,31 +14,20 @@ import { jsx as _jsx, jsxs as _jsxs, Fragment as _Fragment } from "react/jsx-run
 import { useState } from 'react';
 import { Responsive, WidthProvider } from 'react-grid-layout';
 import { Box, Collapse, GlobalStyles } from '@mui/material';
+import { ErrorAlert, ErrorBoundary } from '@perses-dev/components';
 import { styles } from '../../css/styles';
-import { useEditMode } from '../../context';
+import { useEditMode, usePanelGroup } from '../../context';
 import { GridTitle } from './GridTitle';
+import { GridItemContent } from './GridItemContent';
 const ResponsiveGridLayout = WidthProvider(Responsive);
 /**
  * Layout component that arranges children in a Grid based on the definition.
  */ export function GridLayout(props) {
-    var ref, ref1;
-    const { groupIndex , definition: { spec  } , renderGridItemContent , ...others } = props;
-    var ref2;
-    const [isOpen, setIsOpen] = useState((ref2 = (ref = spec.display) === null || ref === void 0 ? void 0 : (ref1 = ref.collapse) === null || ref1 === void 0 ? void 0 : ref1.open) !== null && ref2 !== void 0 ? ref2 : true);
+    const { panelGroupId , ...others } = props;
+    const groupDefinition = usePanelGroup(panelGroupId);
+    var ref;
+    const [isOpen, setIsOpen] = useState((ref = !groupDefinition.isCollapsed) !== null && ref !== void 0 ? ref : true);
     const { isEditMode  } = useEditMode();
-    const gridItems = [];
-    spec.items.forEach((item, idx)=>{
-        const { x , y , width: w , height: h  } = item;
-        gridItems.push(/*#__PURE__*/ _jsx("div", {
-            "data-grid": {
-                x,
-                y,
-                w,
-                h
-            },
-            children: renderGridItemContent(item, groupIndex)
-        }, idx));
-    });
     return /*#__PURE__*/ _jsxs(_Fragment, {
         children: [
             /*#__PURE__*/ _jsx(GlobalStyles, {
@@ -53,10 +42,10 @@ const ResponsiveGridLayout = WidthProvider(Responsive);
                     }
                 },
                 children: [
-                    spec.display !== undefined && /*#__PURE__*/ _jsx(GridTitle, {
-                        groupIndex: groupIndex,
-                        title: spec.display.title,
-                        collapse: spec.display.collapse === undefined ? undefined : {
+                    groupDefinition.title !== undefined && /*#__PURE__*/ _jsx(GridTitle, {
+                        panelGroupId: panelGroupId,
+                        title: groupDefinition.title,
+                        collapse: groupDefinition.isCollapsed === undefined ? undefined : {
                             isOpen,
                             onToggleOpen: ()=>setIsOpen((current)=>!current)
                         }
@@ -87,7 +76,23 @@ const ResponsiveGridLayout = WidthProvider(Responsive);
                             ],
                             isDraggable: isEditMode,
                             isResizable: isEditMode,
-                            children: gridItems
+                            children: groupDefinition.items.map(({ x , y , width , height  }, itemIndex)=>/*#__PURE__*/ _jsx("div", {
+                                    "data-grid": {
+                                        x,
+                                        y,
+                                        w: width,
+                                        h: height
+                                    },
+                                    children: /*#__PURE__*/ _jsx(ErrorBoundary, {
+                                        FallbackComponent: ErrorAlert,
+                                        children: /*#__PURE__*/ _jsx(GridItemContent, {
+                                            panelGroupItemId: {
+                                                panelGroupId,
+                                                itemIndex
+                                            }
+                                        })
+                                    })
+                                }, itemIndex))
                         })
                     })
                 ]

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

@@ -1 +1 @@
-{"version":3,"sources":["../../../src/components/GridLayout/GridLayout.tsx"],"sourcesContent":["// Copyright 2022 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 { useState } from 'react';\nimport { Responsive, WidthProvider } from 'react-grid-layout';\nimport { Box, BoxProps, Collapse, GlobalStyles } from '@mui/material';\nimport { GridDefinition, GridItemDefinition } from '@perses-dev/core';\nimport { styles } from '../../css/styles';\nimport { useEditMode } from '../../context';\nimport { GridTitle } from './GridTitle';\n\nconst ResponsiveGridLayout = WidthProvider(Responsive);\n\nexport interface GridLayoutProps extends BoxProps {\n  groupIndex: number;\n  definition: GridDefinition;\n  renderGridItemContent: (definition: GridItemDefinition, groupIndex: number) => React.ReactNode;\n}\n\n/**\n * Layout component that arranges children in a Grid based on the definition.\n */\nexport function GridLayout(props: GridLayoutProps) {\n  const {\n    groupIndex,\n    definition: { spec },\n    renderGridItemContent,\n    ...others\n  } = props;\n\n  const [isOpen, setIsOpen] = useState(spec.display?.collapse?.open ?? true);\n\n  const { isEditMode } = useEditMode();\n\n  const gridItems: React.ReactNode[] = [];\n\n  spec.items.forEach((item, idx) => {\n    const { x, y, width: w, height: h } = item;\n\n    gridItems.push(\n      <div key={idx} data-grid={{ x, y, w, h }}>\n        {renderGridItemContent(item, groupIndex)}\n      </div>\n    );\n  });\n\n  return (\n    <>\n      <GlobalStyles styles={styles} />\n      <Box {...others} component=\"section\" sx={{ '& + &': { marginTop: (theme) => theme.spacing(1) } }}>\n        {spec.display !== undefined && (\n          <GridTitle\n            groupIndex={groupIndex}\n            title={spec.display.title}\n            collapse={\n              spec.display.collapse === undefined\n                ? undefined\n                : { isOpen, onToggleOpen: () => setIsOpen((current) => !current) }\n            }\n          />\n        )}\n        <Collapse in={isOpen} unmountOnExit>\n          <ResponsiveGridLayout\n            className=\"layout\"\n            breakpoints={{ lg: 1200, md: 996, sm: 768, xs: 480, xxs: 0 }}\n            cols={{ lg: 24, md: 24, sm: 24, xs: 24, xxs: 2 }}\n            rowHeight={30}\n            draggableHandle={'.drag-handle'}\n            resizeHandles={['se']}\n            isDraggable={isEditMode}\n            isResizable={isEditMode}\n          >\n            {gridItems}\n          </ResponsiveGridLayout>\n        </Collapse>\n      </Box>\n    </>\n  );\n}\n"],"names":["useState","Responsive","WidthProvider","Box","Collapse","GlobalStyles","styles","useEditMode","GridTitle","ResponsiveGridLayout","GridLayout","props","spec","groupIndex","definition","renderGridItemContent","others","isOpen","setIsOpen","display","collapse","open","isEditMode","gridItems","items","forEach","item","idx","x","y","width","w","height","h","push","div","data-grid","component","sx","marginTop","theme","spacing","undefined","title","onToggleOpen","current","in","unmountOnExit","className","breakpoints","lg","md","sm","xs","xxs","cols","rowHeight","draggableHandle","resizeHandles","isDraggable","isResizable"],"mappings":"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"}
+{"version":3,"sources":["../../../src/components/GridLayout/GridLayout.tsx"],"sourcesContent":["// Copyright 2022 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 { useState } from 'react';\nimport { Responsive, WidthProvider } from 'react-grid-layout';\nimport { Box, BoxProps, Collapse, GlobalStyles } from '@mui/material';\nimport { ErrorAlert, ErrorBoundary } from '@perses-dev/components';\nimport { styles } from '../../css/styles';\nimport { useEditMode, usePanelGroup, PanelGroupId } from '../../context';\nimport { GridTitle } from './GridTitle';\nimport { GridItemContent } from './GridItemContent';\n\nconst ResponsiveGridLayout = WidthProvider(Responsive);\n\nexport interface GridLayoutProps extends BoxProps {\n  panelGroupId: PanelGroupId;\n}\n\n/**\n * Layout component that arranges children in a Grid based on the definition.\n */\nexport function GridLayout(props: GridLayoutProps) {\n  const { panelGroupId, ...others } = props;\n  const groupDefinition = usePanelGroup(panelGroupId);\n\n  const [isOpen, setIsOpen] = useState(!groupDefinition.isCollapsed ?? true);\n  const { isEditMode } = useEditMode();\n\n  return (\n    <>\n      <GlobalStyles styles={styles} />\n      <Box {...others} component=\"section\" sx={{ '& + &': { marginTop: (theme) => theme.spacing(1) } }}>\n        {groupDefinition.title !== undefined && (\n          <GridTitle\n            panelGroupId={panelGroupId}\n            title={groupDefinition.title}\n            collapse={\n              groupDefinition.isCollapsed === undefined\n                ? undefined\n                : { isOpen, onToggleOpen: () => setIsOpen((current) => !current) }\n            }\n          />\n        )}\n        <Collapse in={isOpen} unmountOnExit>\n          <ResponsiveGridLayout\n            className=\"layout\"\n            breakpoints={{ lg: 1200, md: 996, sm: 768, xs: 480, xxs: 0 }}\n            cols={{ lg: 24, md: 24, sm: 24, xs: 24, xxs: 2 }}\n            rowHeight={30}\n            draggableHandle={'.drag-handle'}\n            resizeHandles={['se']}\n            isDraggable={isEditMode}\n            isResizable={isEditMode}\n          >\n            {groupDefinition.items.map(({ x, y, width, height }, itemIndex) => (\n              <div key={itemIndex} data-grid={{ x, y, w: width, h: height }}>\n                <ErrorBoundary FallbackComponent={ErrorAlert}>\n                  <GridItemContent panelGroupItemId={{ panelGroupId, itemIndex }} />\n                </ErrorBoundary>\n              </div>\n            ))}\n          </ResponsiveGridLayout>\n        </Collapse>\n      </Box>\n    </>\n  );\n}\n"],"names":["useState","Responsive","WidthProvider","Box","Collapse","GlobalStyles","ErrorAlert","ErrorBoundary","styles","useEditMode","usePanelGroup","GridTitle","GridItemContent","ResponsiveGridLayout","GridLayout","props","panelGroupId","others","groupDefinition","isOpen","setIsOpen","isCollapsed","isEditMode","component","sx","marginTop","theme","spacing","title","undefined","collapse","onToggleOpen","current","in","unmountOnExit","className","breakpoints","lg","md","sm","xs","xxs","cols","rowHeight","draggableHandle","resizeHandles","isDraggable","isResizable","items","map","x","y","width","height","itemIndex","div","data-grid","w","h","FallbackComponent","panelGroupItemId"],"mappings":"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"}

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

@@ -1,6 +1,7 @@
 /// <reference types="react" />
+import { PanelGroupId } from '../../context';
 export interface GridTitleProps {
-    groupIndex: number;
+    panelGroupId: PanelGroupId;
     title: string;
     collapse?: {
         isOpen: boolean;