@perses-dev/dashboards 0.10.0 → 0.11.0

package/dist/views/ViewDashboard/ViewDashboard.d.ts.map

@@ -1 +1 @@
-{"version":3,"file":"ViewDashboard.d.ts","sourceRoot":"","sources":["../../../src/views/ViewDashboard/ViewDashboard.tsx"],"names":[],"mappings":";AAcA,OAAO,EAAO,QAAQ,EAAE,MAAM,eAAe,CAAC;AAC9C,OAAO,EAAE,iBAAiB,EAAuB,MAAM,kBAAkB,CAAC;AAG1E,OAAO,EAIL,4BAA4B,EAE7B,MAAM,eAAe,CAAC;AAGvB,MAAM,WAAW,kBAAmB,SAAQ,IAAI,CAAC,QAAQ,EAAE,UAAU,CAAC;IACpE,iBAAiB,EAAE,iBAAiB,CAAC;IACrC,aAAa,EAAE,4BAA4B,CAAC,eAAe,CAAC,CAAC;CAC9D;AAED;;GAEG;AACH,wBAAgB,aAAa,CAAC,KAAK,EAAE,kBAAkB,eA8CtD"}
+{"version":3,"file":"ViewDashboard.d.ts","sourceRoot":"","sources":["../../../src/views/ViewDashboard/ViewDashboard.tsx"],"names":[],"mappings":";AAaA,OAAO,EAAO,QAAQ,EAAE,MAAM,eAAe,CAAC;AAC9C,OAAO,EAAE,iBAAiB,EAAE,MAAM,kBAAkB,CAAC;AAErD,OAAO,EAIL,4BAA4B,EAE7B,MAAM,eAAe,CAAC;AAIvB,MAAM,WAAW,kBAAmB,SAAQ,IAAI,CAAC,QAAQ,EAAE,UAAU,CAAC;IACpE,iBAAiB,EAAE,iBAAiB,CAAC;IACrC,aAAa,EAAE,4BAA4B,CAAC,eAAe,CAAC,CAAC;CAC9D;AAED;;GAEG;AACH,wBAAgB,aAAa,CAAC,KAAK,EAAE,kBAAkB,eAkCtD"}

package/dist/views/ViewDashboard/ViewDashboard.js

@@ -11,38 +11,20 @@
 // See the License for the specific language governing permissions and
 // limitations under the License.
 import { jsx as _jsx } from "react/jsx-runtime";
-import { useEffect } from 'react';
 import { Box } from '@mui/material';
-import { getDefaultTimeRange } from '@perses-dev/core';
-import { useQueryString } from '@perses-dev/plugin-system';
 import { ErrorBoundary, ErrorAlert, combineSx } from '@perses-dev/components';
 import { TimeRangeProvider, TemplateVariableProvider, DashboardProvider, DatasourceStoreProvider } from '../../context';
+import { useInitialTimeRange, useSetTimeRangeParams } from '../../utils';
 import { DashboardApp } from './DashboardApp';
 /**
  * The View for displaying a Dashboard, along with the UI for selecting variable values.
  */ export function ViewDashboard(props) {
     const { dashboardResource , datasourceApi , sx , ...others } = props;
     const { spec  } = dashboardResource;
-    const { queryString , setQueryString  } = useQueryString();
     var _duration;
     const dashboardDuration = (_duration = spec.duration) !== null && _duration !== void 0 ? _duration : '1h';
-    const defaultTimeRange = getDefaultTimeRange(dashboardDuration, queryString);
-    // TODO: add reusable sync query string or no-op util
-    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 = useInitialTimeRange(dashboardDuration);
+    const { timeRange , setTimeRange  } = useSetTimeRangeParams(initialTimeRange, true);
     return /*#__PURE__*/ _jsx(DatasourceStoreProvider, {
         dashboardResource: dashboardResource,
         datasourceApi: datasourceApi,
@@ -51,7 +33,8 @@ import { DashboardApp } from './DashboardApp';
                 dashboardSpec: spec
             },
             children: /*#__PURE__*/ _jsx(TimeRangeProvider, {
-                initialTimeRange: defaultTimeRange,
+                timeRange: timeRange,
+                setTimeRange: setTimeRange,
                 children: /*#__PURE__*/ _jsx(TemplateVariableProvider, {
                     initialVariableDefinitions: spec.variables,
                     children: /*#__PURE__*/ _jsx(Box, {

package/dist/views/ViewDashboard/ViewDashboard.js.map

@@ -1 +1 @@
-{"version":3,"sources":["../../../src/views/ViewDashboard/ViewDashboard.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 { useEffect } from 'react';\nimport { Box, BoxProps } from '@mui/material';\nimport { DashboardResource, getDefaultTimeRange } from '@perses-dev/core';\nimport { useQueryString } from '@perses-dev/plugin-system';\nimport { ErrorBoundary, ErrorAlert, combineSx } from '@perses-dev/components';\nimport {\n  TimeRangeProvider,\n  TemplateVariableProvider,\n  DashboardProvider,\n  DatasourceStoreProviderProps,\n  DatasourceStoreProvider,\n} from '../../context';\nimport { DashboardApp } from './DashboardApp';\n\nexport interface ViewDashboardProps extends Omit<BoxProps, 'children'> {\n  dashboardResource: DashboardResource;\n  datasourceApi: DatasourceStoreProviderProps['datasourceApi'];\n}\n\n/**\n * The View for displaying a Dashboard, along with the UI for selecting variable values.\n */\nexport function ViewDashboard(props: ViewDashboardProps) {\n  const { dashboardResource, datasourceApi, sx, ...others } = props;\n  const { spec } = dashboardResource;\n\n  const { queryString, setQueryString } = useQueryString();\n  const dashboardDuration = spec.duration ?? '1h';\n  const defaultTimeRange = getDefaultTimeRange(dashboardDuration, queryString);\n\n  // TODO: add reusable sync query string or no-op util\n  useEffect(() => {\n    const currentParams = Object.fromEntries([...queryString]);\n    // if app does not provide query string implementation, setTimeRange is used instead\n    if (!currentParams.start && setQueryString) {\n      // default to duration in dashboard definition if start param is not already set\n      queryString.set('start', dashboardDuration);\n      setQueryString(queryString);\n    }\n  }, [dashboardDuration, queryString, setQueryString]);\n\n  return (\n    <DatasourceStoreProvider dashboardResource={dashboardResource} datasourceApi={datasourceApi}>\n      <DashboardProvider initialState={{ dashboardSpec: spec }}>\n        <TimeRangeProvider initialTimeRange={defaultTimeRange}>\n          <TemplateVariableProvider initialVariableDefinitions={spec.variables}>\n            <Box\n              sx={combineSx(\n                {\n                  display: 'flex',\n                  width: '100%',\n                  height: '100%',\n                  position: 'relative',\n                  overflow: 'hidden',\n                },\n                sx\n              )}\n              {...others}\n            >\n              <ErrorBoundary FallbackComponent={ErrorAlert}>\n                <DashboardApp dashboardResource={dashboardResource} />\n              </ErrorBoundary>\n            </Box>\n          </TemplateVariableProvider>\n        </TimeRangeProvider>\n      </DashboardProvider>\n    </DatasourceStoreProvider>\n  );\n}\n"],"names":["useEffect","Box","getDefaultTimeRange","useQueryString","ErrorBoundary","ErrorAlert","combineSx","TimeRangeProvider","TemplateVariableProvider","DashboardProvider","DatasourceStoreProvider","DashboardApp","ViewDashboard","props","dashboardResource","datasourceApi","sx","others","spec","queryString","setQueryString","dashboardDuration","duration","defaultTimeRange","currentParams","Object","fromEntries","start","set","initialState","dashboardSpec","initialTimeRange","initialVariableDefinitions","variables","display","width","height","position","overflow","FallbackComponent"],"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,SAAS,QAAQ,OAAO,CAAC;AAClC,SAASC,GAAG,QAAkB,eAAe,CAAC;AAC9C,SAA4BC,mBAAmB,QAAQ,kBAAkB,CAAC;AAC1E,SAASC,cAAc,QAAQ,2BAA2B,CAAC;AAC3D,SAASC,aAAa,EAAEC,UAAU,EAAEC,SAAS,QAAQ,wBAAwB,CAAC;AAC9E,SACEC,iBAAiB,EACjBC,wBAAwB,EACxBC,iBAAiB,EAEjBC,uBAAuB,QAClB,eAAe,CAAC;AACvB,SAASC,YAAY,QAAQ,gBAAgB,CAAC;AAO9C;;CAEC,GACD,OAAO,SAASC,aAAa,CAACC,KAAyB,EAAE;IACvD,MAAM,EAAEC,iBAAiB,CAAA,EAAEC,aAAa,CAAA,EAAEC,EAAE,CAAA,EAAE,GAAGC,MAAM,EAAE,GAAGJ,KAAK,AAAC;IAClE,MAAM,EAAEK,IAAI,CAAA,EAAE,GAAGJ,iBAAiB,AAAC;IAEnC,MAAM,EAAEK,WAAW,CAAA,EAAEC,cAAc,CAAA,EAAE,GAAGjB,cAAc,EAAE,AAAC;QAC/Be,SAAa;IAAvC,MAAMG,iBAAiB,GAAGH,CAAAA,SAAa,GAAbA,IAAI,CAACI,QAAQ,cAAbJ,SAAa,cAAbA,SAAa,GAAI,IAAI,AAAC;IAChD,MAAMK,gBAAgB,GAAGrB,mBAAmB,CAACmB,iBAAiB,EAAEF,WAAW,CAAC,AAAC;IAE7E,qDAAqD;IACrDnB,SAAS,CAAC,IAAM;QACd,MAAMwB,aAAa,GAAGC,MAAM,CAACC,WAAW,CAAC;eAAIP,WAAW;SAAC,CAAC,AAAC;QAC3D,oFAAoF;QACpF,IAAI,CAACK,aAAa,CAACG,KAAK,IAAIP,cAAc,EAAE;YAC1C,gFAAgF;YAChFD,WAAW,CAACS,GAAG,CAAC,OAAO,EAAEP,iBAAiB,CAAC,CAAC;YAC5CD,cAAc,CAACD,WAAW,CAAC,CAAC;QAC9B,CAAC;IACH,CAAC,EAAE;QAACE,iBAAiB;QAAEF,WAAW;QAAEC,cAAc;KAAC,CAAC,CAAC;IAErD,qBACE,KAACV,uBAAuB;QAACI,iBAAiB,EAAEA,iBAAiB;QAAEC,aAAa,EAAEA,aAAa;kBACzF,cAAA,KAACN,iBAAiB;YAACoB,YAAY,EAAE;gBAAEC,aAAa,EAAEZ,IAAI;aAAE;sBACtD,cAAA,KAACX,iBAAiB;gBAACwB,gBAAgB,EAAER,gBAAgB;0BACnD,cAAA,KAACf,wBAAwB;oBAACwB,0BAA0B,EAAEd,IAAI,CAACe,SAAS;8BAClE,cAAA,KAAChC,GAAG;wBACFe,EAAE,EAAEV,SAAS,CACX;4BACE4B,OAAO,EAAE,MAAM;4BACfC,KAAK,EAAE,MAAM;4BACbC,MAAM,EAAE,MAAM;4BACdC,QAAQ,EAAE,UAAU;4BACpBC,QAAQ,EAAE,QAAQ;yBACnB,EACDtB,EAAE,CACH;wBACA,GAAGC,MAAM;kCAEV,cAAA,KAACb,aAAa;4BAACmC,iBAAiB,EAAElC,UAAU;sCAC1C,cAAA,KAACM,YAAY;gCAACG,iBAAiB,EAAEA,iBAAiB;8BAAI;0BACxC;sBACZ;kBACmB;cACT;UACF;MACI,CAC1B;AACJ,CAAC"}
+{"version":3,"sources":["../../../src/views/ViewDashboard/ViewDashboard.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 { DashboardResource } from '@perses-dev/core';\nimport { ErrorBoundary, ErrorAlert, combineSx } from '@perses-dev/components';\nimport {\n  TimeRangeProvider,\n  TemplateVariableProvider,\n  DashboardProvider,\n  DatasourceStoreProviderProps,\n  DatasourceStoreProvider,\n} from '../../context';\nimport { useInitialTimeRange, useSetTimeRangeParams } from '../../utils';\nimport { DashboardApp } from './DashboardApp';\n\nexport interface ViewDashboardProps extends Omit<BoxProps, 'children'> {\n  dashboardResource: DashboardResource;\n  datasourceApi: DatasourceStoreProviderProps['datasourceApi'];\n}\n\n/**\n * The View for displaying a Dashboard, along with the UI for selecting variable values.\n */\nexport function ViewDashboard(props: ViewDashboardProps) {\n  const { dashboardResource, datasourceApi, sx, ...others } = props;\n  const { spec } = dashboardResource;\n  const dashboardDuration = spec.duration ?? '1h';\n  const initialTimeRange = useInitialTimeRange(dashboardDuration);\n  const { timeRange, setTimeRange } = useSetTimeRangeParams(initialTimeRange, true);\n\n  return (\n    <DatasourceStoreProvider dashboardResource={dashboardResource} datasourceApi={datasourceApi}>\n      <DashboardProvider initialState={{ dashboardSpec: spec }}>\n        <TimeRangeProvider timeRange={timeRange} setTimeRange={setTimeRange}>\n          <TemplateVariableProvider initialVariableDefinitions={spec.variables}>\n            <Box\n              sx={combineSx(\n                {\n                  display: 'flex',\n                  width: '100%',\n                  height: '100%',\n                  position: 'relative',\n                  overflow: 'hidden',\n                },\n                sx\n              )}\n              {...others}\n            >\n              <ErrorBoundary FallbackComponent={ErrorAlert}>\n                <DashboardApp dashboardResource={dashboardResource} />\n              </ErrorBoundary>\n            </Box>\n          </TemplateVariableProvider>\n        </TimeRangeProvider>\n      </DashboardProvider>\n    </DatasourceStoreProvider>\n  );\n}\n"],"names":["Box","ErrorBoundary","ErrorAlert","combineSx","TimeRangeProvider","TemplateVariableProvider","DashboardProvider","DatasourceStoreProvider","useInitialTimeRange","useSetTimeRangeParams","DashboardApp","ViewDashboard","props","dashboardResource","datasourceApi","sx","others","spec","dashboardDuration","duration","initialTimeRange","timeRange","setTimeRange","initialState","dashboardSpec","initialVariableDefinitions","variables","display","width","height","position","overflow","FallbackComponent"],"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;AAE9C,SAASC,aAAa,EAAEC,UAAU,EAAEC,SAAS,QAAQ,wBAAwB,CAAC;AAC9E,SACEC,iBAAiB,EACjBC,wBAAwB,EACxBC,iBAAiB,EAEjBC,uBAAuB,QAClB,eAAe,CAAC;AACvB,SAASC,mBAAmB,EAAEC,qBAAqB,QAAQ,aAAa,CAAC;AACzE,SAASC,YAAY,QAAQ,gBAAgB,CAAC;AAO9C;;CAEC,GACD,OAAO,SAASC,aAAa,CAACC,KAAyB,EAAE;IACvD,MAAM,EAAEC,iBAAiB,CAAA,EAAEC,aAAa,CAAA,EAAEC,EAAE,CAAA,EAAE,GAAGC,MAAM,EAAE,GAAGJ,KAAK,AAAC;IAClE,MAAM,EAAEK,IAAI,CAAA,EAAE,GAAGJ,iBAAiB,AAAC;QACTI,SAAa;IAAvC,MAAMC,iBAAiB,GAAGD,CAAAA,SAAa,GAAbA,IAAI,CAACE,QAAQ,cAAbF,SAAa,cAAbA,SAAa,GAAI,IAAI,AAAC;IAChD,MAAMG,gBAAgB,GAAGZ,mBAAmB,CAACU,iBAAiB,CAAC,AAAC;IAChE,MAAM,EAAEG,SAAS,CAAA,EAAEC,YAAY,CAAA,EAAE,GAAGb,qBAAqB,CAACW,gBAAgB,EAAE,IAAI,CAAC,AAAC;IAElF,qBACE,KAACb,uBAAuB;QAACM,iBAAiB,EAAEA,iBAAiB;QAAEC,aAAa,EAAEA,aAAa;kBACzF,cAAA,KAACR,iBAAiB;YAACiB,YAAY,EAAE;gBAAEC,aAAa,EAAEP,IAAI;aAAE;sBACtD,cAAA,KAACb,iBAAiB;gBAACiB,SAAS,EAAEA,SAAS;gBAAEC,YAAY,EAAEA,YAAY;0BACjE,cAAA,KAACjB,wBAAwB;oBAACoB,0BAA0B,EAAER,IAAI,CAACS,SAAS;8BAClE,cAAA,KAAC1B,GAAG;wBACFe,EAAE,EAAEZ,SAAS,CACX;4BACEwB,OAAO,EAAE,MAAM;4BACfC,KAAK,EAAE,MAAM;4BACbC,MAAM,EAAE,MAAM;4BACdC,QAAQ,EAAE,UAAU;4BACpBC,QAAQ,EAAE,QAAQ;yBACnB,EACDhB,EAAE,CACH;wBACA,GAAGC,MAAM;kCAEV,cAAA,KAACf,aAAa;4BAAC+B,iBAAiB,EAAE9B,UAAU;sCAC1C,cAAA,KAACQ,YAAY;gCAACG,iBAAiB,EAAEA,iBAAiB;8BAAI;0BACxC;sBACZ;kBACmB;cACT;UACF;MACI,CAC1B;AACJ,CAAC"}

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

@@ -10,56 +10,33 @@
 // 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.
-import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
+import { jsx as _jsx } from "react/jsx-runtime";
 import { screen } from '@testing-library/react';
 import userEvent from '@testing-library/user-event';
-import { DashboardProvider, QueryStringProvider, TemplateVariableProvider, TimeRangeProvider } from '../../../context';
-import { createDashboardProviderSpy, getTestDashboard, renderWithContext } from '../../../test';
-import testDashboard from '../../../test/testDashboard';
+import { DashboardProvider, TemplateVariableProvider, TimeRangeProvider } from '../../../context';
+import { getTestDashboard, renderWithContext } from '../../../test';
 import { DashboardApp } from '../DashboardApp';
 describe('Panel Groups', ()=>{
     const renderDashboard = ()=>{
-        const { store , DashboardProviderSpy  } = createDashboardProviderSpy();
-        renderWithContext(/*#__PURE__*/ _jsx(QueryStringProvider, {
-            queryString: new URLSearchParams('https://localhost:3000/'),
-            children: /*#__PURE__*/ _jsx(TimeRangeProvider, {
-                initialTimeRange: {
-                    pastDuration: '30m'
-                },
-                children: /*#__PURE__*/ _jsx(TemplateVariableProvider, {
-                    children: /*#__PURE__*/ _jsxs(DashboardProvider, {
-                        initialState: {
-                            dashboardSpec: getTestDashboard().spec,
-                            isEditMode: true
-                        },
-                        children: [
-                            /*#__PURE__*/ _jsx(DashboardProviderSpy, {}),
-                            /*#__PURE__*/ _jsx(DashboardApp, {
-                                dashboardResource: getTestDashboard()
-                            })
-                        ]
+        renderWithContext(/*#__PURE__*/ _jsx(TimeRangeProvider, {
+            timeRange: {
+                pastDuration: '30m'
+            },
+            children: /*#__PURE__*/ _jsx(TemplateVariableProvider, {
+                children: /*#__PURE__*/ _jsx(DashboardProvider, {
+                    initialState: {
+                        dashboardSpec: getTestDashboard().spec,
+                        isEditMode: true
+                    },
+                    children: /*#__PURE__*/ _jsx(DashboardApp, {
+                        dashboardResource: getTestDashboard()
                     })
                 })
             })
         }));
-        const { value: storeApi  } = store;
-        if (storeApi === undefined) {
-            throw new Error('Expected dashboard store to be set after initial render');
-        }
-        return storeApi;
     };
-    beforeEach(()=>{
-        const mockIntersectionObserver = jest.fn();
-        mockIntersectionObserver.mockReturnValue({
-            observe: ()=>null,
-            unobserve: ()=>null,
-            disconnect: ()=>null
-        });
-        window.IntersectionObserver = mockIntersectionObserver;
-    });
     it('should delete panel', ()=>{
-        var ref;
-        const storeApi = renderDashboard();
+        renderDashboard();
         const panel = screen.getByText('CPU');
         userEvent.hover(panel);
         const deletePanelButton = screen.getByLabelText('delete panel');
@@ -67,37 +44,28 @@ describe('Panel Groups', ()=>{
         screen.getByText('Delete Panel');
         const deleteButton = screen.getByText('Delete');
         userEvent.click(deleteButton);
-        const layouts = storeApi.getState().layouts;
-        const deletedPanel = testDashboard.spec.panels['cpu'];
-        expect((ref = layouts[0]) === null || ref === void 0 ? void 0 : ref.items).toEqual(expect.not.objectContaining(deletedPanel));
-        const panels = storeApi.getState().panels;
-        // should remove cpu from state.panels since it's not used anymore
-        expect(panels).toEqual(expect.not.objectContaining({
-            cpu: testDashboard.spec.panels['cpu']
-        }));
+        // The panel should disappear
+        const deletedPanel = screen.queryByText('CPU');
+        expect(deletedPanel).not.toBeInTheDocument();
     });
-    it('should only delete panel from panel group if panel is referenced more than once', ()=>{
-        var ref;
-        const storeApi = renderDashboard();
-        const panel = screen.getByText('Disk I/O Utilization');
+    it('should only delete panel from panel group if panel is not referenced more than once', ()=>{
+        renderDashboard();
+        const panels = screen.getAllByText('Disk I/O Utilization');
+        expect(panels).toHaveLength(2);
+        const panel = panels[0];
+        if (panel === undefined) throw new Error('Missing panel');
         userEvent.hover(panel);
         const deletePanelButton = screen.getByLabelText('delete panel');
         userEvent.click(deletePanelButton);
         screen.getByText('Delete Panel');
         const deleteButton = screen.getByText('Delete');
         userEvent.click(deleteButton);
-        const layouts = storeApi.getState().layouts;
-        const deletedPanel = testDashboard.spec.panels['diskIO'];
-        expect((ref = layouts[0]) === null || ref === void 0 ? void 0 : ref.items).toEqual(expect.not.objectContaining(deletedPanel));
-        const panels = storeApi.getState().panels;
-        // should NOT remove diskIO from state.panels since it's used in another panel group
-        expect(panels).toEqual(expect.objectContaining({
-            diskIO: testDashboard.spec.panels['diskIO']
-        }));
+        // The deleted panel should still be on screen in the other group
+        const deletedPanel = screen.queryByText('Disk I/O Utilization');
+        expect(deletedPanel).toBeInTheDocument();
     });
     it('should swap panels', ()=>{
-        var ref, ref1, ref2;
-        const storeApi = renderDashboard();
+        renderDashboard();
         // should move panel down
         const group1 = screen.getByText('CPU Stats');
         userEvent.hover(group1);
@@ -109,13 +77,14 @@ describe('Panel Groups', ()=>{
         userEvent.hover(group2);
         const moveGroupUpBtn = screen.getByLabelText('move group up');
         userEvent.click(moveGroupUpBtn);
-        const layouts = storeApi.getState().layouts;
-        expect((ref = layouts[0]) === null || ref === void 0 ? void 0 : ref.title).toBe(undefined);
-        expect((ref1 = layouts[1]) === null || ref1 === void 0 ? void 0 : ref1.title).toBe('Disk Stats');
-        expect((ref2 = layouts[2]) === null || ref2 === void 0 ? void 0 : ref2.title).toBe('CPU Stats');
-    });
+    /* 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', ()=>{
-        const storeApi = renderDashboard();
+        renderDashboard();
         const group = screen.getByText('CPU Stats');
         userEvent.hover(group);
         const deleteGroupIcon = screen.getByLabelText('delete group');
@@ -123,35 +92,15 @@ describe('Panel Groups', ()=>{
         screen.getByText('Delete Panel Group');
         const deleteButton = screen.getByText('Delete');
         userEvent.click(deleteButton);
-        // should remove group from state.layouts
-        const layouts = storeApi.getState().layouts;
-        expect(layouts).toHaveLength(2);
-        const deletedLayout = {
-            id: 0,
-            title: 'CPU Stats',
-            isCollapsed: false,
-            items: [
-                {
-                    x: 0,
-                    y: 0,
-                    width: 12,
-                    height: 4,
-                    content: {
-                        $ref: '#/spec/panels/cpu'
-                    }
-                }
-            ]
-        };
-        expect(layouts).toEqual(expect.not.objectContaining(deletedLayout));
-        const panels = storeApi.getState().panels;
-        // should remove cpu from state.panels since it's not used anymore
-        expect(panels).toEqual(expect.not.objectContaining({
-            cpu: testDashboard.spec.panels['cpu']
-        }));
-        // should not remove diskIO from state.panels since it's still used in another group
-        expect(panels).toEqual(expect.objectContaining({
-            diskIO: testDashboard.spec.panels['diskIO']
-        }));
+        // should remove group
+        const deletedGroup = screen.queryByText('CPU Stats');
+        expect(deletedGroup).not.toBeInTheDocument();
+        // CPU panel should be completely gone since it wasn't in any other group
+        let panel = screen.queryByText('CPU');
+        expect(panel).not.toBeInTheDocument();
+        // A DiskIO panel should still be present in the other group that wasn't deleted
+        panel = screen.queryByText('Disk I/O Utilization');
+        expect(panel).toBeInTheDocument();
     });
 });
 

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

@@ -1 +1 @@
-{"version":3,"sources":["../../../../src/views/ViewDashboard/tests/panelGroups.test.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 { screen } from '@testing-library/react';\nimport userEvent from '@testing-library/user-event';\nimport { DashboardProvider, QueryStringProvider, TemplateVariableProvider, TimeRangeProvider } from '../../../context';\nimport { PanelGroupDefinition } from '../../../context/DashboardProvider/layout-slice';\nimport { createDashboardProviderSpy, getTestDashboard, renderWithContext } from '../../../test';\nimport testDashboard from '../../../test/testDashboard';\nimport { DashboardApp } from '../DashboardApp';\n\ndescribe('Panel Groups', () => {\n  const renderDashboard = () => {\n    const { store, DashboardProviderSpy } = createDashboardProviderSpy();\n    renderWithContext(\n      <QueryStringProvider queryString={new URLSearchParams('https://localhost:3000/')}>\n        <TimeRangeProvider initialTimeRange={{ pastDuration: '30m' }}>\n          <TemplateVariableProvider>\n            <DashboardProvider initialState={{ dashboardSpec: getTestDashboard().spec, isEditMode: true }}>\n              <DashboardProviderSpy />\n              <DashboardApp dashboardResource={getTestDashboard()} />\n            </DashboardProvider>\n          </TemplateVariableProvider>\n        </TimeRangeProvider>\n      </QueryStringProvider>\n    );\n\n    const { value: storeApi } = store;\n    if (storeApi === undefined) {\n      throw new Error('Expected dashboard store to be set after initial render');\n    }\n\n    return storeApi;\n  };\n\n  beforeEach(() => {\n    const mockIntersectionObserver = jest.fn();\n    mockIntersectionObserver.mockReturnValue({\n      observe: () => null,\n      unobserve: () => null,\n      disconnect: () => null,\n    });\n    window.IntersectionObserver = mockIntersectionObserver;\n  });\n\n  it('should delete panel', () => {\n    const storeApi = renderDashboard();\n    const panel = screen.getByText('CPU');\n    userEvent.hover(panel);\n    const deletePanelButton = screen.getByLabelText('delete panel');\n    userEvent.click(deletePanelButton);\n    screen.getByText('Delete Panel');\n    const deleteButton = screen.getByText('Delete');\n    userEvent.click(deleteButton);\n\n    const layouts = storeApi.getState().layouts;\n    const deletedPanel = testDashboard.spec.panels['cpu'];\n    expect(layouts[0]?.items).toEqual(expect.not.objectContaining(deletedPanel));\n\n    const panels = storeApi.getState().panels;\n    // should remove cpu from state.panels since it's not used anymore\n    expect(panels).toEqual(expect.not.objectContaining({ cpu: testDashboard.spec.panels['cpu'] }));\n  });\n\n  it('should only delete panel from panel group if panel is referenced more than once', () => {\n    const storeApi = renderDashboard();\n    const panel = screen.getByText('Disk I/O Utilization');\n    userEvent.hover(panel);\n    const deletePanelButton = screen.getByLabelText('delete panel');\n    userEvent.click(deletePanelButton);\n    screen.getByText('Delete Panel');\n    const deleteButton = screen.getByText('Delete');\n    userEvent.click(deleteButton);\n    const layouts = storeApi.getState().layouts;\n    const deletedPanel = testDashboard.spec.panels['diskIO'];\n    expect(layouts[0]?.items).toEqual(expect.not.objectContaining(deletedPanel));\n\n    const panels = storeApi.getState().panels;\n    // should NOT remove diskIO from state.panels since it's used in another panel group\n    expect(panels).toEqual(expect.objectContaining({ diskIO: testDashboard.spec.panels['diskIO'] }));\n  });\n\n  it('should swap panels', () => {\n    const storeApi = renderDashboard();\n    // should move panel down\n    const group1 = screen.getByText('CPU Stats');\n    userEvent.hover(group1);\n    const moveGroupDownBtn = screen.getByLabelText('move group down');\n    userEvent.click(moveGroupDownBtn);\n    userEvent.unhover(moveGroupDownBtn);\n    // should move panel up\n    const group2 = screen.getByText('Disk Stats');\n    userEvent.hover(group2);\n    const moveGroupUpBtn = screen.getByLabelText('move group up');\n    userEvent.click(moveGroupUpBtn);\n\n    const layouts = storeApi.getState().layouts;\n    expect(layouts[0]?.title).toBe(undefined);\n    expect(layouts[1]?.title).toBe('Disk Stats');\n    expect(layouts[2]?.title).toBe('CPU Stats');\n  });\n\n  it('should delete a panel group', () => {\n    const storeApi = renderDashboard();\n    const group = screen.getByText('CPU Stats');\n    userEvent.hover(group);\n    const deleteGroupIcon = screen.getByLabelText('delete group');\n    userEvent.click(deleteGroupIcon);\n    screen.getByText('Delete Panel Group');\n    const deleteButton = screen.getByText('Delete');\n    userEvent.click(deleteButton);\n\n    // should remove group from state.layouts\n    const layouts = storeApi.getState().layouts;\n    expect(layouts).toHaveLength(2);\n    const deletedLayout: PanelGroupDefinition = {\n      id: 0,\n      title: 'CPU Stats',\n      isCollapsed: false,\n      items: [\n        {\n          x: 0,\n          y: 0,\n          width: 12,\n          height: 4,\n          content: { $ref: '#/spec/panels/cpu' },\n        },\n      ],\n    };\n    expect(layouts).toEqual(expect.not.objectContaining(deletedLayout));\n\n    const panels = storeApi.getState().panels;\n    // should remove cpu from state.panels since it's not used anymore\n    expect(panels).toEqual(expect.not.objectContaining({ cpu: testDashboard.spec.panels['cpu'] }));\n    // should not remove diskIO from state.panels since it's still used in another group\n    expect(panels).toEqual(expect.objectContaining({ diskIO: testDashboard.spec.panels['diskIO'] }));\n  });\n});\n"],"names":["screen","userEvent","DashboardProvider","QueryStringProvider","TemplateVariableProvider","TimeRangeProvider","createDashboardProviderSpy","getTestDashboard","renderWithContext","testDashboard","DashboardApp","describe","renderDashboard","store","DashboardProviderSpy","queryString","URLSearchParams","initialTimeRange","pastDuration","initialState","dashboardSpec","spec","isEditMode","dashboardResource","value","storeApi","undefined","Error","beforeEach","mockIntersectionObserver","jest","fn","mockReturnValue","observe","unobserve","disconnect","window","IntersectionObserver","it","layouts","panel","getByText","hover","deletePanelButton","getByLabelText","click","deleteButton","getState","deletedPanel","panels","expect","items","toEqual","not","objectContaining","cpu","diskIO","group1","moveGroupDownBtn","unhover","group2","moveGroupUpBtn","title","toBe","group","deleteGroupIcon","toHaveLength","deletedLayout","id","isCollapsed","x","y","width","height","content","$ref"],"mappings":"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"}
+{"version":3,"sources":["../../../../src/views/ViewDashboard/tests/panelGroups.test.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 { screen } from '@testing-library/react';\nimport userEvent from '@testing-library/user-event';\nimport { DashboardProvider, TemplateVariableProvider, TimeRangeProvider } from '../../../context';\nimport { getTestDashboard, renderWithContext } from '../../../test';\nimport { DashboardApp } from '../DashboardApp';\n\ndescribe('Panel Groups', () => {\n  const renderDashboard = () => {\n    renderWithContext(\n      <TimeRangeProvider timeRange={{ pastDuration: '30m' }}>\n        <TemplateVariableProvider>\n          <DashboardProvider initialState={{ dashboardSpec: getTestDashboard().spec, isEditMode: true }}>\n            <DashboardApp dashboardResource={getTestDashboard()} />\n          </DashboardProvider>\n        </TemplateVariableProvider>\n      </TimeRangeProvider>\n    );\n  };\n  it('should delete panel', () => {\n    renderDashboard();\n    const panel = screen.getByText('CPU');\n    userEvent.hover(panel);\n    const deletePanelButton = screen.getByLabelText('delete panel');\n    userEvent.click(deletePanelButton);\n    screen.getByText('Delete Panel');\n    const deleteButton = screen.getByText('Delete');\n    userEvent.click(deleteButton);\n\n    // The panel should disappear\n    const deletedPanel = screen.queryByText('CPU');\n    expect(deletedPanel).not.toBeInTheDocument();\n  });\n\n  it('should only delete panel from panel group if panel is not referenced more than once', () => {\n    renderDashboard();\n\n    const panels = screen.getAllByText('Disk I/O Utilization');\n    expect(panels).toHaveLength(2);\n\n    const panel = panels[0];\n    if (panel === undefined) throw new Error('Missing panel');\n\n    userEvent.hover(panel);\n    const deletePanelButton = screen.getByLabelText('delete panel');\n    userEvent.click(deletePanelButton);\n    screen.getByText('Delete Panel');\n    const deleteButton = screen.getByText('Delete');\n    userEvent.click(deleteButton);\n\n    // The deleted panel should still be on screen in the other group\n    const deletedPanel = screen.queryByText('Disk I/O Utilization');\n    expect(deletedPanel).toBeInTheDocument();\n  });\n\n  it('should swap panels', () => {\n    renderDashboard();\n\n    // should move panel down\n    const group1 = screen.getByText('CPU Stats');\n    userEvent.hover(group1);\n    const moveGroupDownBtn = screen.getByLabelText('move group down');\n    userEvent.click(moveGroupDownBtn);\n    userEvent.unhover(moveGroupDownBtn);\n\n    // should move panel up\n    const group2 = screen.getByText('Disk Stats');\n    userEvent.hover(group2);\n    const moveGroupUpBtn = screen.getByLabelText('move group up');\n    userEvent.click(moveGroupUpBtn);\n\n    /* TODO: Figure out how to test this visually without coupling to the store\n    const layouts = storeApi.getState().layouts;\n    expect(layouts[0]?.title).toBe(undefined);\n    expect(layouts[1]?.title).toBe('Disk Stats');\n    expect(layouts[2]?.title).toBe('CPU Stats');\n    */\n  });\n\n  it('should delete a panel group', () => {\n    renderDashboard();\n    const group = screen.getByText('CPU Stats');\n    userEvent.hover(group);\n    const deleteGroupIcon = screen.getByLabelText('delete group');\n    userEvent.click(deleteGroupIcon);\n    screen.getByText('Delete Panel Group');\n    const deleteButton = screen.getByText('Delete');\n    userEvent.click(deleteButton);\n\n    // should remove group\n    const deletedGroup = screen.queryByText('CPU Stats');\n    expect(deletedGroup).not.toBeInTheDocument();\n\n    // CPU panel should be completely gone since it wasn't in any other group\n    let panel = screen.queryByText('CPU');\n    expect(panel).not.toBeInTheDocument();\n\n    // A DiskIO panel should still be present in the other group that wasn't deleted\n    panel = screen.queryByText('Disk I/O Utilization');\n    expect(panel).toBeInTheDocument();\n  });\n});\n"],"names":["screen","userEvent","DashboardProvider","TemplateVariableProvider","TimeRangeProvider","getTestDashboard","renderWithContext","DashboardApp","describe","renderDashboard","timeRange","pastDuration","initialState","dashboardSpec","spec","isEditMode","dashboardResource","it","panel","getByText","hover","deletePanelButton","getByLabelText","click","deleteButton","deletedPanel","queryByText","expect","not","toBeInTheDocument","panels","getAllByText","toHaveLength","undefined","Error","group1","moveGroupDownBtn","unhover","group2","moveGroupUpBtn","group","deleteGroupIcon","deletedGroup"],"mappings":"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"}

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@perses-dev/dashboards",
-  "version": "0.10.0",
+  "version": "0.11.0",
   "description": "The dashboards feature in Perses",
   "license": "Apache-2.0",
   "homepage": "https://github.com/perses/perses/blob/main/README.md",
@@ -27,9 +27,9 @@
     "lint:fix": "eslint --fix src --ext .ts,.tsx"
   },
   "dependencies": {
-    "@perses-dev/components": "^0.10.0",
-    "@perses-dev/core": "^0.10.0",
-    "@perses-dev/plugin-system": "^0.10.0",
+    "@perses-dev/components": "^0.11.0",
+    "@perses-dev/core": "^0.11.0",
+    "@perses-dev/plugin-system": "^0.11.0",
     "@types/react-grid-layout": "^1.3.2",
     "date-fns": "^2.28.0",
     "immer": "^9.0.15",
@@ -37,6 +37,7 @@
     "react-grid-layout": "^1.3.4",
     "react-intersection-observer": "^9.4.0",
     "use-immer": "^0.7.0",
+    "use-query-params": "^2.1.1",
     "use-resize-observer": "^9.0.0",
     "zustand": "^4.1.1"
   },

package/dist/cjs/context/DashboardProvider/layout-slice.js

@@ -1,200 +0,0 @@
-// 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
-});
-Object.defineProperty(exports, "createLayoutSlice", {
-    enumerable: true,
-    get: ()=>createLayoutSlice
-});
-const _core = require("@perses-dev/core");
-function createLayoutSlice(layouts) {
-    // Return the state creator function for Zustand that uses the layouts provided as initial state
-    let id = -1;
-    function createPanelGroupId() {
-        id++;
-        return id;
-    }
-    var ref;
-    return (set, get)=>{
-        return {
-            layouts: layouts.map((layout)=>{
-                var ref1, ref2, ref3;
-                return {
-                    ...layout,
-                    id: createPanelGroupId(),
-                    title: (ref1 = layout.spec.display) === null || ref1 === void 0 ? void 0 : ref1.title,
-                    isCollapsed: (ref = !((ref2 = layout.spec.display) === null || ref2 === void 0 ? void 0 : (ref3 = ref2.collapse) === null || ref3 === void 0 ? void 0 : ref3.open)) !== null && ref !== void 0 ? ref : false,
-                    items: layout.spec.items
-                };
-            }),
-            getPanelKey ({ groupIndex , itemIndex  }) {
-                const { layouts  } = get();
-                const group = findGroup(layouts, groupIndex);
-                const item = findItem(group, itemIndex);
-                return (0, _core.getPanelKeyFromRef)(item.content);
-            },
-            addPanelToGroup (panelKey, groupIndex) {
-                const { layouts  } = get();
-                const group = findGroup(layouts, groupIndex);
-                const gridItem = {
-                    x: 0,
-                    y: getYForNewRow(group),
-                    width: 12,
-                    height: 6,
-                    content: (0, _core.createPanelRef)(panelKey)
-                };
-                set((state)=>{
-                    var ref;
-                    (ref = state.layouts[groupIndex]) === null || ref === void 0 ? void 0 : ref.items.push(gridItem);
-                });
-            },
-            movePanelToGroup ({ groupIndex , itemIndex  }, newGroupIndex) {
-                const { layouts  } = get();
-                // Find the existing item to make sure it exists
-                const group = findGroup(layouts, groupIndex);
-                const item = findItem(group, itemIndex);
-                // Find the new group and figure out where a new row should go
-                const newGroup = findGroup(layouts, newGroupIndex);
-                const newGroupY = getYForNewRow(newGroup);
-                set((state)=>{
-                    var // Remove the item from its current group
-                    ref, // Add a new item to the new group
-                    ref1;
-                    (ref = state.layouts[groupIndex]) === null || ref === void 0 ? void 0 : ref.items.splice(itemIndex, 1);
-                    (ref1 = state.layouts[newGroupIndex]) === null || ref1 === void 0 ? void 0 : ref1.items.push({
-                        x: 0,
-                        y: newGroupY,
-                        width: item.width,
-                        height: item.height,
-                        content: item.content
-                    });
-                });
-            },
-            // TODO: Maybe combine this into some kind of groupEditor state
-            updatePanelGroup (next, groupIndex) {
-                set((state)=>{
-                    if (groupIndex === undefined) {
-                        state.layouts.unshift({
-                            ...next,
-                            id: createPanelGroupId()
-                        });
-                    } else {
-                        const layout = state.layouts[groupIndex];
-                        if (layout === undefined) {
-                            throw new Error(`No layout at index ${groupIndex}`);
-                        }
-                        state.layouts[groupIndex] = {
-                            ...next,
-                            id: layout.id
-                        };
-                    }
-                });
-            },
-            swapPanelGroups (x, y) {
-                set((state)=>{
-                    if (x < 0 || x >= state.layouts.length || y < 0 || y >= state.layouts.length) {
-                        throw new Error('index out of bound');
-                    }
-                    const xPanelGroup = state.layouts[x];
-                    const yPanelGroup = state.layouts[y];
-                    if (xPanelGroup === undefined || yPanelGroup === undefined) {
-                        throw new Error('panel group is undefined');
-                    }
-                    // assign yPanelGroup to layouts[x] and assign xGroup to layouts[y], swapping two panel groups
-                    [state.layouts[x], state.layouts[y]] = [
-                        yPanelGroup,
-                        xPanelGroup
-                    ];
-                });
-            },
-            deletePanelInPanelGroup ({ groupIndex , itemIndex  }) {
-                set((state)=>{
-                    const group = state.layouts[groupIndex];
-                    if (group === undefined) {
-                        throw new Error(`No panel group found: ${groupIndex}`);
-                    }
-                    // remove panel from panel group
-                    group.items.splice(itemIndex, 1);
-                });
-            },
-            deletePanelGroup (groupIndex) {
-                const { layouts , deletePanels  } = get();
-                const group = layouts[groupIndex];
-                if (group === undefined) {
-                    throw new Error(`No panel group found: ${groupIndex}`);
-                }
-                // remove panels from group first
-                const panelsToBeDeleted = [];
-                for(let i = 0; i < group.items.length; i++){
-                    panelsToBeDeleted.push({
-                        groupIndex,
-                        itemIndex: i
-                    });
-                }
-                deletePanels(panelsToBeDeleted);
-                // remove group from state.layouts
-                set((state)=>{
-                    state.layouts.splice(groupIndex, 1);
-                });
-            },
-            // Return an object that maps each panel to the groups it belongs
-            mapPanelToPanelGroups () {
-                const map = {}; // { panel key: [group ids] }
-                get().layouts.forEach((group)=>{
-                    // for each panel in a group, add the group id to map[panelKey]
-                    group.items.forEach((panel)=>{
-                        const panelKey = (0, _core.getPanelKeyFromRef)(panel.content);
-                        if (map[panelKey]) {
-                            var ref;
-                            (ref = map[panelKey]) === null || ref === void 0 ? void 0 : ref.push(group.id);
-                        } else {
-                            map[panelKey] = [
-                                group.id
-                            ];
-                        }
-                    });
-                });
-                return map;
-            }
-        };
-    };
-}
-// Helper to find a group and throw if not found
-function findGroup(layouts, groupIndex) {
-    const group = layouts[groupIndex];
-    if (group === undefined) {
-        throw new Error(`No layout at index ${groupIndex}`);
-    }
-    return group;
-}
-// Helper to get an item in a group and throw if not found
-function findItem(group, itemIndex) {
-    const item = group.items[itemIndex];
-    if (item === undefined) {
-        throw new Error(`No grid item found at position ${itemIndex}`);
-    }
-    return item;
-}
-// Given a Grid, will find the Y coordinate for adding a new row to the grid, taking into account the items present
-function getYForNewRow(group) {
-    let newRowY = 0;
-    for (const item of group.items){
-        const itemMaxY = item.y + item.height;
-        if (itemMaxY > newRowY) {
-            newRowY = itemMaxY;
-        }
-    }
-    return newRowY;
-}