@perses-dev/dashboards 0.10.0 → 0.11.0

package/dist/cjs/context/index.js

@@ -16,9 +16,9 @@ Object.defineProperty(exports, "__esModule", {
 });
 _exportStar(require("./DashboardProvider"), exports);
 _exportStar(require("./DatasourceStoreProvider"), exports);
-_exportStar(require("./QueryStringProvider"), exports);
 _exportStar(require("./TemplateVariableProvider"), exports);
 _exportStar(require("./TimeRangeProvider"), exports);
+_exportStar(require("./useDashboardSpec"), exports);
 function _exportStar(from, to) {
     Object.keys(from).forEach(function(k) {
         if (k !== "default" && !Object.prototype.hasOwnProperty.call(to, k)) Object.defineProperty(to, k, {

package/dist/cjs/context/useDashboardSpec.js

@@ -0,0 +1,61 @@
+// 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, "useDashboardSpec", {
+    enumerable: true,
+    get: ()=>useDashboardSpec
+});
+const _dashboardProvider = require("./DashboardProvider");
+const _templateVariableProvider = require("./TemplateVariableProvider");
+function useDashboardSpec() {
+    const { panels , panelGroups , defaultTimeRange  } = (0, _dashboardProvider.useDashboardStore)(({ panels , panelGroups , defaultTimeRange  })=>({
+            panels,
+            panelGroups,
+            defaultTimeRange
+        }));
+    const variables = (0, _templateVariableProvider.useTemplateVariableDefinitions)();
+    const layouts = convertPanelGroupsToLayouts(panelGroups);
+    return {
+        panels,
+        layouts,
+        variables,
+        duration: defaultTimeRange.pastDuration
+    };
+}
+function convertPanelGroupsToLayouts(panelGroups) {
+    const layouts = [];
+    Object.values(panelGroups).forEach((group)=>{
+        const { title , isCollapsed , items  } = group;
+        let display = undefined;
+        if (title) {
+            display = {
+                title,
+                collapse: {
+                    open: !isCollapsed
+                }
+            };
+        }
+        const layout = {
+            kind: 'Grid',
+            spec: {
+                display,
+                items
+            }
+        };
+        layouts.push(layout);
+    });
+    return layouts;
+}

package/dist/cjs/index.js

@@ -16,6 +16,7 @@ Object.defineProperty(exports, "__esModule", {
 });
 _exportStar(require("./components"), exports);
 _exportStar(require("./context"), exports);
+_exportStar(require("./utils"), exports);
 _exportStar(require("./views"), exports);
 function _exportStar(from, to) {
     Object.keys(from).forEach(function(k) {

package/dist/cjs/test/render.js

@@ -20,8 +20,13 @@ Object.defineProperty(exports, "renderWithContext", {
 });
 const _jsxRuntime = require("react/jsx-runtime");
 const _react = require("@testing-library/react");
+const _reactRouterDom = require("react-router-dom");
+const _history = require("history");
+const _useQueryParams = require("use-query-params");
+const _reactRouter6 = require("use-query-params/adapters/react-router-6");
 const _reactQuery = require("@tanstack/react-query");
-function renderWithContext(ui, options) {
+const _components = require("@perses-dev/components");
+function renderWithContext(ui, options, history) {
     // Create a new QueryClient for each test to avoid caching issues
     const queryClient = new _reactQuery.QueryClient({
         defaultOptions: {
@@ -31,8 +36,23 @@ function renderWithContext(ui, options) {
             }
         }
     });
-    return (0, _react.render)(/*#__PURE__*/ (0, _jsxRuntime.jsx)(_reactQuery.QueryClientProvider, {
-        client: queryClient,
-        children: ui
-    }), options);
+    const BaseRender = ()=>{
+        const HistoryRouter = _reactRouterDom.unstable_HistoryRouter;
+        history = history !== null && history !== void 0 ? history : (0, _history.createMemoryHistory)();
+        return /*#__PURE__*/ (0, _jsxRuntime.jsx)(HistoryRouter, {
+            history: history,
+            children: /*#__PURE__*/ (0, _jsxRuntime.jsx)(_reactQuery.QueryClientProvider, {
+                client: queryClient,
+                children: /*#__PURE__*/ (0, _jsxRuntime.jsx)(_useQueryParams.QueryParamProvider, {
+                    adapter: _reactRouter6.ReactRouter6Adapter,
+                    children: /*#__PURE__*/ (0, _jsxRuntime.jsx)(_components.ChartsThemeProvider, {
+                        themeName: "perses",
+                        chartsTheme: _components.testChartsTheme,
+                        children: ui
+                    })
+                })
+            })
+        });
+    };
+    return (0, _react.render)(/*#__PURE__*/ (0, _jsxRuntime.jsx)(BaseRender, {}), options);
 }

package/dist/cjs/test/setup-tests.js

@@ -10,11 +10,14 @@
 // 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.
-// Add testing library assertions
 "use strict";
 Object.defineProperty(exports, "__esModule", {
     value: true
 });
+const _reactIntersectionObserver = require("react-intersection-observer");
 require("@testing-library/jest-dom/extend-expect");
 // Always mock e-charts during tests since we don't have a proper canvas in jsdom
 jest.mock('echarts/core');
+// Tell react-intersection-observer that everything should be considered in-view for tests (see package documentation
+// for other options)
+(0, _reactIntersectionObserver.defaultFallbackInView)(true);

package/dist/cjs/test/testDashboard.js

@@ -28,7 +28,7 @@ const testDashboard = {
         version: 0
     },
     spec: {
-        duration: '24h',
+        duration: '5m',
         variables: [
             {
                 kind: 'TextVariable',
@@ -144,6 +144,7 @@ const testDashboard = {
                     }
                 }
             },
+            // This panel is referenced in more than one layout below
             diskIO: {
                 kind: 'Panel',
                 spec: {
@@ -242,6 +243,15 @@ const testDashboard = {
                 kind: 'Grid',
                 spec: {
                     items: [
+                        {
+                            x: 0,
+                            y: 0,
+                            width: 6,
+                            height: 2,
+                            content: {
+                                $ref: '#/spec/panels/diskIO'
+                            }
+                        },
                         {
                             x: 8,
                             y: 0,
@@ -265,15 +275,6 @@ const testDashboard = {
                         }
                     },
                     items: [
-                        {
-                            x: 0,
-                            y: 0,
-                            width: 6,
-                            height: 2,
-                            content: {
-                                $ref: '#/spec/panels/diskIO'
-                            }
-                        },
                         {
                             x: 18,
                             y: 0,

package/dist/cjs/utils/index.js

@@ -0,0 +1,28 @@
+// 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
+});
+_exportStar(require("./time-range-params"), exports);
+function _exportStar(from, to) {
+    Object.keys(from).forEach(function(k) {
+        if (k !== "default" && !Object.prototype.hasOwnProperty.call(to, k)) Object.defineProperty(to, k, {
+            enumerable: true,
+            get: function() {
+                return from[k];
+            }
+        });
+    });
+    return from;
+}

package/dist/cjs/utils/time-range-params.js

@@ -0,0 +1,145 @@
+// 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
+});
+function _export(target, all) {
+    for(var name in all)Object.defineProperty(target, name, {
+        enumerable: true,
+        get: all[name]
+    });
+}
+_export(exports, {
+    encodeTimeRangeValue: ()=>encodeTimeRangeValue,
+    decodeTimeRangeValue: ()=>decodeTimeRangeValue,
+    TimeRangeParam: ()=>TimeRangeParam,
+    timeRangeQueryConfig: ()=>timeRangeQueryConfig,
+    useInitialTimeRange: ()=>useInitialTimeRange,
+    useSetTimeRangeParams: ()=>useSetTimeRangeParams
+});
+const _react = require("react");
+const _useQueryParams = require("use-query-params");
+const _dateFns = require("date-fns");
+const _core = require("@perses-dev/core");
+/* Interprets an encoded string and returns either the string or null/undefined if not available */ function getEncodedValue(input, allowEmptyString) {
+    if (input == null) {
+        return input;
+    }
+    // '' or []
+    if (input.length === 0 && (!allowEmptyString || allowEmptyString && input !== '')) {
+        return null;
+    }
+    const str = input instanceof Array ? input[0] : input;
+    if (str == null) {
+        return str;
+    }
+    if (!allowEmptyString && str === '') {
+        return null;
+    }
+    return str;
+}
+function encodeTimeRangeValue(timeOptionValue) {
+    if (!timeOptionValue) {
+        return timeOptionValue;
+    }
+    if (typeof timeOptionValue === 'string') {
+        if ((0, _core.isDurationString)(timeOptionValue)) {
+            return timeOptionValue;
+        }
+    }
+    return ((0, _dateFns.getUnixTime)(timeOptionValue) * 1000).toString();
+}
+function decodeTimeRangeValue(input) {
+    const paramString = getEncodedValue(input);
+    if (paramString == null) return paramString;
+    return (0, _core.isDurationString)(paramString) ? paramString : new Date(Number(paramString));
+}
+const TimeRangeParam = {
+    encode: encodeTimeRangeValue,
+    decode: decodeTimeRangeValue,
+    equals: (valueA, valueB)=>{
+        if (valueA === valueB) return true;
+        if (valueA == null || valueB == null) return valueA === valueB;
+        return valueA.valueOf() === valueB.valueOf();
+    }
+};
+const timeRangeQueryConfig = {
+    start: TimeRangeParam,
+    end: TimeRangeParam
+};
+function useInitialTimeRange(dashboardDuration) {
+    const [query] = (0, _useQueryParams.useQueryParams)(timeRangeQueryConfig);
+    const { start , end  } = query;
+    return (0, _react.useMemo)(()=>{
+        let initialTimeRange = {
+            pastDuration: dashboardDuration
+        };
+        if (!start) {
+            return initialTimeRange;
+        }
+        const startStr = start.toString();
+        if ((0, _core.isDurationString)(startStr)) {
+            initialTimeRange = {
+                pastDuration: startStr
+            };
+        } else if ((0, _dateFns.isDate)(start) && (0, _dateFns.isDate)(end)) {
+            initialTimeRange = {
+                start: start,
+                end: end
+            };
+        }
+        return initialTimeRange;
+    }, [
+        start,
+        end,
+        dashboardDuration
+    ]);
+}
+function useSetTimeRangeParams(initialTimeRange, paramsEnabled = true) {
+    const [query, setQuery] = (0, _useQueryParams.useQueryParams)(timeRangeQueryConfig);
+    // fallback when app does not want query string as source of truth
+    const [timeRangeState, setTimeRangeState] = (0, _react.useState)(initialTimeRange);
+    const { start  } = query;
+    // set start param on page load if empty
+    if (paramsEnabled && !start) {
+        if ((0, _core.isRelativeTimeRange)(initialTimeRange)) {
+            setQuery({
+                start: initialTimeRange.pastDuration,
+                end: undefined
+            });
+        }
+    }
+    const setTimeRange = (0, _react.useCallback)((value)=>{
+        if ((0, _core.isRelativeTimeRange)(value)) {
+            setQuery({
+                start: value.pastDuration,
+                end: undefined
+            });
+        } else {
+            setQuery(value);
+        }
+    }, [
+        setQuery
+    ]);
+    if (!paramsEnabled) {
+        return {
+            timeRange: timeRangeState,
+            setTimeRange: setTimeRangeState
+        };
+    }
+    return {
+        timeRange: initialTimeRange,
+        setTimeRange: setTimeRange
+    };
+}

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

@@ -22,9 +22,7 @@ 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 _deletePanelGroupDialog = /*#__PURE__*/ _interopRequireDefault(require("../../components/PanelGroupDialog/DeletePanelGroupDialog"));
 const _deletePanelDialog = /*#__PURE__*/ _interopRequireDefault(require("../../components/Panel/DeletePanelDialog"));
 function _interopRequireDefault(obj) {
     return obj && obj.__esModule ? obj : {
@@ -56,8 +54,8 @@ const DashboardApp = (props)=>{
                         children: /*#__PURE__*/ (0, _jsxRuntime.jsx)(_components1.Dashboard, {})
                     }),
                     /*#__PURE__*/ (0, _jsxRuntime.jsx)(_components1.PanelDrawer, {}),
-                    /*#__PURE__*/ (0, _jsxRuntime.jsx)(_panelGroupDialog.default, {}),
-                    /*#__PURE__*/ (0, _jsxRuntime.jsx)(_deletePanelGroupDialog.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

@@ -19,7 +19,6 @@ const _react = require("@testing-library/react");
 const _userEvent = /*#__PURE__*/ _interopRequireDefault(require("@testing-library/user-event"));
 const _context = require("../../../context");
 const _test = require("../../../test");
-const _testDashboard = /*#__PURE__*/ _interopRequireDefault(require("../../../test/testDashboard"));
 const _dashboardApp = require("../DashboardApp");
 function _interopRequireDefault(obj) {
     return obj && obj.__esModule ? obj : {
@@ -28,47 +27,25 @@ function _interopRequireDefault(obj) {
 }
 describe('Panel Groups', ()=>{
     const renderDashboard = ()=>{
-        const { store , DashboardProviderSpy  } = (0, _test.createDashboardProviderSpy)();
-        (0, _test.renderWithContext)(/*#__PURE__*/ (0, _jsxRuntime.jsx)(_context.QueryStringProvider, {
-            queryString: new URLSearchParams('https://localhost:3000/'),
-            children: /*#__PURE__*/ (0, _jsxRuntime.jsx)(_context.TimeRangeProvider, {
-                initialTimeRange: {
-                    pastDuration: '30m'
-                },
-                children: /*#__PURE__*/ (0, _jsxRuntime.jsx)(_context.TemplateVariableProvider, {
-                    children: /*#__PURE__*/ (0, _jsxRuntime.jsxs)(_context.DashboardProvider, {
-                        initialState: {
-                            dashboardSpec: (0, _test.getTestDashboard)().spec,
-                            isEditMode: true
-                        },
-                        children: [
-                            /*#__PURE__*/ (0, _jsxRuntime.jsx)(DashboardProviderSpy, {}),
-                            /*#__PURE__*/ (0, _jsxRuntime.jsx)(_dashboardApp.DashboardApp, {
-                                dashboardResource: (0, _test.getTestDashboard)()
-                            })
-                        ]
+        (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)()
                     })
                 })
             })
         }));
-        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 = _react.screen.getByText('CPU');
         _userEvent.default.hover(panel);
         const deletePanelButton = _react.screen.getByLabelText('delete panel');
@@ -76,37 +53,28 @@ describe('Panel Groups', ()=>{
         _react.screen.getByText('Delete Panel');
         const deleteButton = _react.screen.getByText('Delete');
         _userEvent.default.click(deleteButton);
-        const layouts = storeApi.getState().layouts;
-        const deletedPanel = _testDashboard.default.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.default.spec.panels['cpu']
-        }));
+        // 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 referenced more than once', ()=>{
-        var ref;
-        const storeApi = renderDashboard();
-        const panel = _react.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 = _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);
-        const layouts = storeApi.getState().layouts;
-        const deletedPanel = _testDashboard.default.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.default.spec.panels['diskIO']
-        }));
+        // 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', ()=>{
-        var ref, ref1, ref2;
-        const storeApi = renderDashboard();
+        renderDashboard();
         // should move panel down
         const group1 = _react.screen.getByText('CPU Stats');
         _userEvent.default.hover(group1);
@@ -118,13 +86,14 @@ describe('Panel Groups', ()=>{
         _userEvent.default.hover(group2);
         const moveGroupUpBtn = _react.screen.getByLabelText('move group up');
         _userEvent.default.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 = _react.screen.getByText('CPU Stats');
         _userEvent.default.hover(group);
         const deleteGroupIcon = _react.screen.getByLabelText('delete group');
@@ -132,34 +101,14 @@ describe('Panel Groups', ()=>{
         _react.screen.getByText('Delete Panel Group');
         const deleteButton = _react.screen.getByText('Delete');
         _userEvent.default.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.default.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.default.spec.panels['diskIO']
-        }));
+        // 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.js

@@ -13,20 +13,19 @@
 import { jsx as _jsx } from "react/jsx-runtime";
 import { Box } from '@mui/material';
 import { ErrorBoundary, ErrorAlert } from '@perses-dev/components';
-import { useLayouts } from '../context';
+import { usePanelGroupIds } from '../context';
 import { GridLayout } from './GridLayout';
 /**
  * Renders a Dashboard for the provided Dashboard spec.
  */ export function Dashboard(props) {
-    const { layouts  } = useLayouts();
+    const panelGroupIds = usePanelGroupIds();
     return /*#__PURE__*/ _jsx(Box, {
         ...props,
         children: /*#__PURE__*/ _jsx(ErrorBoundary, {
             FallbackComponent: ErrorAlert,
-            children: layouts.map((layout, groupIndex)=>/*#__PURE__*/ _jsx(GridLayout, {
-                    groupIndex: groupIndex,
-                    groupDefinition: layout
-                }, layout.id))
+            children: panelGroupIds.map((panelGroupId)=>/*#__PURE__*/ _jsx(GridLayout, {
+                    panelGroupId: panelGroupId
+                }, panelGroupId))
         })
     });
 }