@perses-dev/dashboards 0.15.0 → 0.16.0

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

@@ -20,6 +20,7 @@ Object.defineProperty(exports, "createPanelEditorSlice", {
 });
 const _functions = require("../../utils/functions");
 const _common = require("./common");
+const _panelGroupSlice = require("./panel-group-slice");
 function createPanelEditorSlice() {
     // Return the state creator function for Zustand that uses the panels provided as intitial state
     return (set, get)=>{
@@ -51,14 +52,14 @@ function createPanelEditorSlice() {
                     },
                     applyChanges: (next)=>{
                         const panelDefinititon = createPanelDefinitionFromEditorValues(next);
-                        set((draft)=>{
-                            draft.panels[panelKey] = panelDefinititon;
+                        set((state)=>{
+                            state.panels[panelKey] = panelDefinititon;
                             // If the panel didn't change groups, nothing else to do
                             if (next.groupId === panelGroupId) {
                                 return;
                             }
                             // Move panel to the new group
-                            const existingGroup = draft.panelGroups[panelGroupId];
+                            const existingGroup = state.panelGroups[panelGroupId];
                             if (existingGroup === undefined) {
                                 throw new Error(`Missing panel group ${panelGroupId}`);
                             }
@@ -72,7 +73,7 @@ function createPanelEditorSlice() {
                             existingGroup.itemLayouts.splice(existingLayoutIdx, 1);
                             delete existingGroup.itemPanelKeys[panelGroupLayoutId];
                             // Add item to the end of the new group
-                            const newGroup = draft.panelGroups[next.groupId];
+                            const newGroup = state.panelGroups[next.groupId];
                             if (newGroup === undefined) {
                                 throw new Error(`Could not find new group ${next.groupId}`);
                             }
@@ -98,13 +99,13 @@ function createPanelEditorSlice() {
                 });
             },
             openAddPanel (panelGroupId) {
-                // If a panel group isn't supplied, add to the first group
+                // If a panel group isn't supplied, add to the first group or create a group if there aren't any
+                let newGroup = undefined;
+                panelGroupId !== null && panelGroupId !== void 0 ? panelGroupId : panelGroupId = get().panelGroupOrder[0];
                 if (panelGroupId === undefined) {
-                    const firstGroupId = get().panelGroupOrder[0];
-                    if (firstGroupId === undefined) {
-                        throw new Error('No panel groups to add a panel to');
-                    }
-                    panelGroupId = firstGroupId;
+                    newGroup = (0, _panelGroupSlice.createEmptyPanelGroup)();
+                    newGroup.title = 'Panel Group';
+                    panelGroupId = newGroup.id;
                 }
                 const editorState = {
                     mode: 'Add',
@@ -119,12 +120,17 @@ function createPanelEditorSlice() {
                     },
                     applyChanges: (next)=>{
                         const panelDef = createPanelDefinitionFromEditorValues(next);
-                        const panelKey = (0, _functions.removeWhiteSpacesAndSpecialCharacters)(next.name);
-                        set((draft)=>{
+                        const uniquePanelKeys = getUniquePanelKeys(get().panels);
+                        let panelKey = (0, _functions.removeWhiteSpacesAndSpecialCharacters)(next.name);
+                        // append count if panel key already exists
+                        if (uniquePanelKeys[panelKey]) {
+                            panelKey += `-${uniquePanelKeys[panelKey]}`;
+                        }
+                        set((state)=>{
                             // Add a panel
-                            draft.panels[panelKey] = panelDef;
+                            state.panels[panelKey] = panelDef;
                             // Also add a panel group item referencing the panel
-                            const group = draft.panelGroups[next.groupId];
+                            const group = state.panelGroups[next.groupId];
                             if (group === undefined) {
                                 throw new Error(`Missing panel group ${next.groupId}`);
                             }
@@ -145,8 +151,12 @@ function createPanelEditorSlice() {
                         });
                     }
                 };
-                // Open the editor with the new state
                 set((state)=>{
+                    // Add the new panel group if one was created for the panel
+                    if (newGroup !== undefined) {
+                        (0, _panelGroupSlice.addPanelGroup)(state, newGroup);
+                    }
+                    // Open the editor with the new state
                     state.panelEditor = editorState;
                 });
             }
@@ -180,3 +190,18 @@ function getYForNewRow(group) {
     }
     return newRowY;
 }
+// Find all the unique panel keys
+// ex: cpu, cpu-1, cpu-2 count as the same panel key since these panels have the same name
+function getUniquePanelKeys(panels) {
+    const uniquePanelKeys = {};
+    Object.keys(panels).forEach((panelKey)=>{
+        const key = panelKey.replace(/-([0-9]+)/, '');
+        const count = uniquePanelKeys[key];
+        if (count) {
+            uniquePanelKeys[key] = count + 1;
+        } else {
+            uniquePanelKeys[key] = 1;
+        }
+    });
+    return uniquePanelKeys;
+}

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

@@ -18,7 +18,7 @@ Object.defineProperty(exports, "createPanelGroupEditorSlice", {
     enumerable: true,
     get: ()=>createPanelGroupEditorSlice
 });
-const _common = require("./common");
+const _panelGroupSlice = require("./panel-group-slice");
 const createPanelGroupEditorSlice = (set, get)=>({
         panelGroupEditor: undefined,
         openAddPanelGroup: ()=>{
@@ -30,15 +30,11 @@ const createPanelGroupEditorSlice = (set, get)=>({
                     isCollapsed: false
                 },
                 applyChanges (next) {
-                    const newGroup = {
-                        id: (0, _common.generateId)(),
-                        itemLayouts: [],
-                        itemPanelKeys: {},
-                        ...next
-                    };
+                    const newGroup = (0, _panelGroupSlice.createEmptyPanelGroup)();
+                    newGroup.title = next.title;
+                    newGroup.isCollapsed = next.isCollapsed;
                     set((draft)=>{
-                        draft.panelGroups[newGroup.id] = newGroup;
-                        draft.panelGroupOrder.unshift(newGroup.id);
+                        (0, _panelGroupSlice.addPanelGroup)(draft, newGroup);
                     });
                 },
                 close () {

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

@@ -22,7 +22,9 @@ function _export(target, all) {
 }
 _export(exports, {
     createPanelGroupSlice: ()=>createPanelGroupSlice,
-    convertLayoutsToPanelGroups: ()=>convertLayoutsToPanelGroups
+    convertLayoutsToPanelGroups: ()=>convertLayoutsToPanelGroups,
+    createEmptyPanelGroup: ()=>createEmptyPanelGroup,
+    addPanelGroup: ()=>addPanelGroup
 });
 const _core = require("@perses-dev/core");
 const _common = require("./common");
@@ -96,3 +98,16 @@ function convertLayoutsToPanelGroups(layouts) {
         panelGroupOrder: panelGroupIdOrder
     };
 }
+function createEmptyPanelGroup() {
+    return {
+        id: (0, _common.generateId)(),
+        title: undefined,
+        isCollapsed: false,
+        itemLayouts: [],
+        itemPanelKeys: {}
+    };
+}
+function addPanelGroup(draft, newGroup) {
+    draft.panelGroups[newGroup.id] = newGroup;
+    draft.panelGroupOrder.unshift(newGroup.id);
+}

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

@@ -46,45 +46,40 @@ describe('Panel Groups', ()=>{
     };
     it('should delete panel', ()=>{
         renderDashboard();
-        const panel = _react.screen.getByText('CPU');
-        _userEvent.default.hover(panel);
-        const deletePanelButton = _react.screen.getByLabelText('delete panel');
+        const panelTitle = 'CPU';
+        const deletePanelButton = _react.screen.getByLabelText(`delete panel ${panelTitle}`);
         _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');
+        const deletedPanel = _react.screen.queryByText(panelTitle);
         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');
+        const panelTitle = 'Disk I/O Utilization';
+        const panels = _react.screen.getAllByText(panelTitle);
         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');
+        const deletePanelButton = _react.screen.getAllByLabelText(`delete panel ${panelTitle}`)[0];
+        if (deletePanelButton === undefined) throw new Error('Missing delete button');
         _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');
+        const deletedPanel = _react.screen.queryByText(panelTitle);
         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');
+        const groupTitle1 = 'CPU Stats';
+        const moveGroupDownBtn = _react.screen.getByLabelText(`move group ${groupTitle1} 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');
+        const groupTitle2 = 'Disk Stats';
+        const moveGroupUpBtn = _react.screen.getByLabelText(`move group ${groupTitle2} up`);
         _userEvent.default.click(moveGroupUpBtn);
     /* TODO: Figure out how to test this visually without coupling to the store
     const layouts = storeApi.getState().layouts;
@@ -94,15 +89,14 @@ describe('Panel Groups', ()=>{
     */ });
     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');
+        const groupTitle = 'CPU Stats';
+        const deleteGroupIcon = _react.screen.getByLabelText(`delete group ${groupTitle}`);
         _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');
+        const deletedGroup = _react.screen.queryByText(groupTitle);
         expect(deletedGroup).not.toBeInTheDocument();
         // CPU panel should be completely gone since it wasn't in any other group
         let panel = _react.screen.queryByText('CPU');

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

@@ -1 +1 @@
-{"version":3,"file":"DashboardToolbar.d.ts","sourceRoot":"","sources":["../../../src/components/DashboardToolbar/DashboardToolbar.tsx"],"names":[],"mappings":";AAsBA,MAAM,WAAW,qBAAqB;IACpC,aAAa,EAAE,MAAM,CAAC;IACtB,uBAAuB,CAAC,EAAE,GAAG,CAAC,OAAO,CAAC;IACtC,uBAAuB,CAAC,EAAE,OAAO,CAAC;IAClC,iBAAiB,EAAE,MAAM,IAAI,CAAC;IAC9B,mBAAmB,EAAE,MAAM,IAAI,CAAC;CACjC;AAED,eAAO,MAAM,gBAAgB,UAAW,qBAAqB,gBAmF5D,CAAC"}
+{"version":3,"file":"DashboardToolbar.d.ts","sourceRoot":"","sources":["../../../src/components/DashboardToolbar/DashboardToolbar.tsx"],"names":[],"mappings":";AAuBA,MAAM,WAAW,qBAAqB;IACpC,aAAa,EAAE,MAAM,CAAC;IACtB,uBAAuB,CAAC,EAAE,GAAG,CAAC,OAAO,CAAC;IACtC,uBAAuB,CAAC,EAAE,OAAO,CAAC;IAClC,iBAAiB,EAAE,MAAM,IAAI,CAAC;IAC9B,mBAAmB,EAAE,MAAM,IAAI,CAAC;CACjC;AAED,eAAO,MAAM,gBAAgB,UAAW,qBAAqB,gBAoF5D,CAAC"}

package/dist/components/DashboardToolbar/DashboardToolbar.js

@@ -19,6 +19,7 @@ import { ErrorBoundary, ErrorAlert } from '@perses-dev/components';
 import { useDashboardActions, useEditMode } from '../../context';
 import { TemplateVariableList } from '../Variables';
 import { TimeRangeControls } from '../TimeRangeControls';
+import { DownloadButton } from '../DownloadButton';
 export const DashboardToolbar = (props)=>{
     const { dashboardName , dashboardTitleComponent , initialVariableIsSticky , onEditButtonClick , onCancelButtonClick  } = props;
     const { isEditMode , setEditMode  } = useEditMode();
@@ -122,6 +123,7 @@ export const DashboardToolbar = (props)=>{
                             },
                             children: [
                                 /*#__PURE__*/ _jsx(TimeRangeControls, {}),
+                                /*#__PURE__*/ _jsx(DownloadButton, {}),
                                 isLaptopSize && /*#__PURE__*/ _jsx(Button, {
                                     variant: "outlined",
                                     startIcon: /*#__PURE__*/ _jsx(PencilIcon, {}),

package/dist/components/DashboardToolbar/DashboardToolbar.js.map

@@ -1 +1 @@
-{"version":3,"sources":["../../../src/components/DashboardToolbar/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 } from '../Variables';\nimport { TimeRangeControls } from '../TimeRangeControls';\n\nexport interface DashboardToolbarProps {\n  dashboardName: string;\n  dashboardTitleComponent?: JSX.Element;\n  initialVariableIsSticky?: boolean;\n  onEditButtonClick: () => void;\n  onCancelButtonClick: () => void;\n}\n\nexport const DashboardToolbar = (props: DashboardToolbarProps) => {\n  const { dashboardName, dashboardTitleComponent, initialVariableIsSticky, onEditButtonClick, onCancelButtonClick } =\n    props;\n\n  const { isEditMode, setEditMode } = useEditMode();\n  const { openAddPanelGroup, openAddPanel } = useDashboardActions();\n  const isLaptopSize = useMediaQuery(useTheme().breakpoints.up('sm'));\n  const dashboardTitle = dashboardTitleComponent ? (\n    dashboardTitleComponent\n  ) : (\n    <Typography variant=\"h2\">{dashboardName}</Typography>\n  );\n\n  const onSave = () => {\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              {dashboardTitle}\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 initialVariableIsSticky={initialVariableIsSticky} />\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            {dashboardTitle}\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 initialVariableIsSticky={initialVariableIsSticky} />\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","dashboardTitleComponent","initialVariableIsSticky","onEditButtonClick","onCancelButtonClick","isEditMode","setEditMode","openAddPanelGroup","openAddPanel","isLaptopSize","breakpoints","up","dashboardTitle","variant","onSave","spacing","sx","backgroundColor","theme","palette","primary","light","padding","display","direction","marginLeft","onClick","width","alignItems","FallbackComponent","startIcon","paddingY"],"mappings":"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"}
+{"version":3,"sources":["../../../src/components/DashboardToolbar/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 } from '../Variables';\nimport { TimeRangeControls } from '../TimeRangeControls';\nimport { DownloadButton } from '../DownloadButton';\n\nexport interface DashboardToolbarProps {\n  dashboardName: string;\n  dashboardTitleComponent?: JSX.Element;\n  initialVariableIsSticky?: boolean;\n  onEditButtonClick: () => void;\n  onCancelButtonClick: () => void;\n}\n\nexport const DashboardToolbar = (props: DashboardToolbarProps) => {\n  const { dashboardName, dashboardTitleComponent, initialVariableIsSticky, onEditButtonClick, onCancelButtonClick } =\n    props;\n\n  const { isEditMode, setEditMode } = useEditMode();\n  const { openAddPanelGroup, openAddPanel } = useDashboardActions();\n  const isLaptopSize = useMediaQuery(useTheme().breakpoints.up('sm'));\n  const dashboardTitle = dashboardTitleComponent ? (\n    dashboardTitleComponent\n  ) : (\n    <Typography variant=\"h2\">{dashboardName}</Typography>\n  );\n\n  const onSave = () => {\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              {dashboardTitle}\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 initialVariableIsSticky={initialVariableIsSticky} />\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            {dashboardTitle}\n            <Stack direction=\"row\" spacing={2} sx={{ marginLeft: 'auto' }}>\n              <TimeRangeControls />\n              <DownloadButton />\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 initialVariableIsSticky={initialVariableIsSticky} />\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","DownloadButton","DashboardToolbar","props","dashboardName","dashboardTitleComponent","initialVariableIsSticky","onEditButtonClick","onCancelButtonClick","isEditMode","setEditMode","openAddPanelGroup","openAddPanel","isLaptopSize","breakpoints","up","dashboardTitle","variant","onSave","spacing","sx","backgroundColor","theme","palette","primary","light","padding","display","direction","marginLeft","onClick","width","alignItems","FallbackComponent","startIcon","paddingY"],"mappings":"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"}

package/dist/components/DownloadButton/DownloadButton.d.ts

@@ -0,0 +1,3 @@
+/// <reference types="react" />
+export declare function DownloadButton(): JSX.Element;
+//# sourceMappingURL=DownloadButton.d.ts.map

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

@@ -0,0 +1 @@
+{"version":3,"file":"DownloadButton.d.ts","sourceRoot":"","sources":["../../../src/components/DownloadButton/DownloadButton.tsx"],"names":[],"mappings":";AAmBA,wBAAgB,cAAc,gBA8B7B"}

package/dist/components/DownloadButton/DownloadButton.js

@@ -0,0 +1,60 @@
+// 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.
+import { jsx as _jsx, jsxs as _jsxs, Fragment as _Fragment } from "react/jsx-runtime";
+import React, { useRef } from 'react';
+import DownloadIcon from 'mdi-material-ui/DownloadOutline';
+import { IconButton, styled } from '@mui/material';
+import { useDashboard } from '../../context';
+// Button to download the dashboard as a JSON file.
+export function DownloadButton() {
+    const { dashboard  } = useDashboard();
+    const hiddenLinkRef = useRef(null);
+    const onDownloadButtonClick = ()=>{
+        if (!hiddenLinkRef || !hiddenLinkRef.current) return;
+        // Create blob URL
+        const hiddenLinkUrl = URL.createObjectURL(new Blob([
+            JSON.stringify(dashboard)
+        ], {
+            type: 'application/json'
+        }));
+        // Simulate click
+        hiddenLinkRef.current.href = hiddenLinkUrl;
+        hiddenLinkRef.current.click();
+        // Remove blob URL (for memory management)
+        URL.revokeObjectURL(hiddenLinkUrl);
+    };
+    return /*#__PURE__*/ _jsxs(_Fragment, {
+        children: [
+            /*#__PURE__*/ _jsx(DownloadIconButton, {
+                title: "Download JSON",
+                onClick: onDownloadButtonClick,
+                children: /*#__PURE__*/ _jsx(DownloadIcon, {})
+            }),
+            /*#__PURE__*/ _jsx("a", {
+                ref: hiddenLinkRef,
+                style: {
+                    display: 'none'
+                },
+                download: `${dashboard.metadata.name}.json`
+            })
+        ]
+    });
+}
+const DownloadIconButton = styled(IconButton)(({ theme  })=>({
+        border: `1px solid ${theme.palette.grey[300]}`,
+        borderRadius: theme.shape.borderRadius,
+        padding: '4px',
+        color: theme.palette.grey[900]
+    }));
+
+//# sourceMappingURL=DownloadButton.js.map

package/dist/components/DownloadButton/DownloadButton.js.map

@@ -0,0 +1 @@
+{"version":3,"sources":["../../../src/components/DownloadButton/DownloadButton.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 React, { useRef } from 'react';\nimport DownloadIcon from 'mdi-material-ui/DownloadOutline';\nimport { IconButton, styled } from '@mui/material';\nimport { useDashboard } from '../../context';\n\n// Button to download the dashboard as a JSON file.\nexport function DownloadButton() {\n  const { dashboard } = useDashboard();\n  const hiddenLinkRef = useRef<HTMLAnchorElement>(null);\n\n  const onDownloadButtonClick = () => {\n    if (!hiddenLinkRef || !hiddenLinkRef.current) return;\n    // Create blob URL\n    const hiddenLinkUrl = URL.createObjectURL(\n      new Blob([JSON.stringify(dashboard)], {\n        type: 'application/json',\n      })\n    );\n    // Simulate click\n    hiddenLinkRef.current.href = hiddenLinkUrl;\n    hiddenLinkRef.current.click();\n    // Remove blob URL (for memory management)\n    URL.revokeObjectURL(hiddenLinkUrl);\n  };\n\n  return (\n    <>\n      <DownloadIconButton title=\"Download JSON\" onClick={onDownloadButtonClick}>\n        <DownloadIcon />\n      </DownloadIconButton>\n      {/* Hidden link to download the dashboard as a JSON file */}\n      {/* eslint-disable jsx-a11y/anchor-has-content */}\n      {/* eslint-disable jsx-a11y/anchor-is-valid  */}\n      <a ref={hiddenLinkRef} style={{ display: 'none' }} download={`${dashboard.metadata.name}.json`} />\n    </>\n  );\n}\n\nconst DownloadIconButton = styled(IconButton)(({ theme }) => ({\n  border: `1px solid ${theme.palette.grey[300]}`,\n  borderRadius: theme.shape.borderRadius,\n  padding: '4px',\n  color: theme.palette.grey[900],\n}));\n"],"names":["React","useRef","DownloadIcon","IconButton","styled","useDashboard","DownloadButton","dashboard","hiddenLinkRef","onDownloadButtonClick","current","hiddenLinkUrl","URL","createObjectURL","Blob","JSON","stringify","type","href","click","revokeObjectURL","DownloadIconButton","title","onClick","a","ref","style","display","download","metadata","name","theme","border","palette","grey","borderRadius","shape","padding","color"],"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,OAAOA,KAAK,IAAIC,MAAM,QAAQ,OAAO,CAAC;AACtC,OAAOC,YAAY,MAAM,iCAAiC,CAAC;AAC3D,SAASC,UAAU,EAAEC,MAAM,QAAQ,eAAe,CAAC;AACnD,SAASC,YAAY,QAAQ,eAAe,CAAC;AAE7C,mDAAmD;AACnD,OAAO,SAASC,cAAc,GAAG;IAC/B,MAAM,EAAEC,SAAS,CAAA,EAAE,GAAGF,YAAY,EAAE,AAAC;IACrC,MAAMG,aAAa,GAAGP,MAAM,CAAoB,IAAI,CAAC,AAAC;IAEtD,MAAMQ,qBAAqB,GAAG,IAAM;QAClC,IAAI,CAACD,aAAa,IAAI,CAACA,aAAa,CAACE,OAAO,EAAE,OAAO;QACrD,kBAAkB;QAClB,MAAMC,aAAa,GAAGC,GAAG,CAACC,eAAe,CACvC,IAAIC,IAAI,CAAC;YAACC,IAAI,CAACC,SAAS,CAACT,SAAS,CAAC;SAAC,EAAE;YACpCU,IAAI,EAAE,kBAAkB;SACzB,CAAC,CACH,AAAC;QACF,iBAAiB;QACjBT,aAAa,CAACE,OAAO,CAACQ,IAAI,GAAGP,aAAa,CAAC;QAC3CH,aAAa,CAACE,OAAO,CAACS,KAAK,EAAE,CAAC;QAC9B,0CAA0C;QAC1CP,GAAG,CAACQ,eAAe,CAACT,aAAa,CAAC,CAAC;IACrC,CAAC,AAAC;IAEF,qBACE;;0BACE,KAACU,kBAAkB;gBAACC,KAAK,EAAC,eAAe;gBAACC,OAAO,EAAEd,qBAAqB;0BACtE,cAAA,KAACP,YAAY,KAAG;cACG;0BAIrB,KAACsB,GAAC;gBAACC,GAAG,EAAEjB,aAAa;gBAAEkB,KAAK,EAAE;oBAAEC,OAAO,EAAE,MAAM;iBAAE;gBAAEC,QAAQ,EAAE,CAAC,EAAErB,SAAS,CAACsB,QAAQ,CAACC,IAAI,CAAC,KAAK,CAAC;cAAI;;MACjG,CACH;AACJ,CAAC;AAED,MAAMT,kBAAkB,GAAGjB,MAAM,CAACD,UAAU,CAAC,CAAC,CAAC,EAAE4B,KAAK,CAAA,EAAE,GAAM,CAAA;QAC5DC,MAAM,EAAE,CAAC,UAAU,EAAED,KAAK,CAACE,OAAO,CAACC,IAAI,CAAC,GAAG,CAAC,CAAC,CAAC;QAC9CC,YAAY,EAAEJ,KAAK,CAACK,KAAK,CAACD,YAAY;QACtCE,OAAO,EAAE,KAAK;QACdC,KAAK,EAAEP,KAAK,CAACE,OAAO,CAACC,IAAI,CAAC,GAAG,CAAC;KAC/B,CAAA,AAAC,CAAC,AAAC"}

package/dist/components/DownloadButton/index.d.ts

@@ -0,0 +1,2 @@
+export * from './DownloadButton';
+//# sourceMappingURL=index.d.ts.map

package/dist/components/DownloadButton/index.d.ts.map

@@ -0,0 +1 @@
+{"version":3,"file":"index.d.ts","sourceRoot":"","sources":["../../../src/components/DownloadButton/index.ts"],"names":[],"mappings":"AAaA,cAAc,kBAAkB,CAAC"}

package/dist/{utils/component-ids.js → components/DownloadButton/index.js}

@@ -10,18 +10,6 @@
 // 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 { useRef } from 'react';
-/**
- * Generates a unique (stable) ID for a component. Should be replaced with React.useId once we support only React 18.
- */ export function useId(prefix) {
-    if (globalThis.useIdValue === undefined) {
-        globalThis.useIdValue = 0;
-    }
-    const id = useRef(undefined);
-    if (id.current === undefined) {
-        id.current = `${prefix}-${globalThis.useIdValue++}`;
-    }
-    return id.current;
-}
+export * from './DownloadButton';
 
-//# sourceMappingURL=component-ids.js.map
+//# sourceMappingURL=index.js.map

package/dist/components/DownloadButton/index.js.map

@@ -0,0 +1 @@
+{"version":3,"sources":["../../../src/components/DownloadButton/index.ts"],"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\nexport * from './DownloadButton';\n"],"names":[],"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,cAAc,kBAAkB,CAAC"}

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

@@ -1 +1 @@
-{"version":3,"file":"GridTitle.d.ts","sourceRoot":"","sources":["../../../src/components/GridLayout/GridTitle.tsx"],"names":[],"mappings":";AAsBA,OAAO,EAAqC,YAAY,EAA6B,MAAM,eAAe,CAAC;AAE3G,MAAM,WAAW,cAAc;IAC7B,YAAY,EAAE,YAAY,CAAC;IAC3B,KAAK,EAAE,MAAM,CAAC;IACd,QAAQ,CAAC,EAAE;QACT,MAAM,EAAE,OAAO,CAAC;QAChB,YAAY,EAAE,MAAM,IAAI,CAAC;KAC1B,CAAC;CACH;AAED;;;GAGG;AACH,wBAAgB,SAAS,CAAC,KAAK,EAAE,cAAc,eA0D9C"}
+{"version":3,"file":"GridTitle.d.ts","sourceRoot":"","sources":["../../../src/components/GridLayout/GridTitle.tsx"],"names":[],"mappings":";AAqBA,OAAO,EAAqC,YAAY,EAA6B,MAAM,eAAe,CAAC;AAE3G,MAAM,WAAW,cAAc;IAC7B,YAAY,EAAE,YAAY,CAAC;IAC3B,KAAK,EAAE,MAAM,CAAC;IACd,QAAQ,CAAC,EAAE;QACT,MAAM,EAAE,OAAO,CAAC;QAChB,YAAY,EAAE,MAAM,IAAI,CAAC;KAC1B,CAAC;CACH;AAED;;;GAGG;AACH,wBAAgB,SAAS,CAAC,KAAK,EAAE,cAAc,eAuD9C"}

package/dist/components/GridLayout/GridTitle.js

@@ -11,11 +11,10 @@
 // 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 { useState } from 'react';
 import { Box, IconButton, Stack, Typography } from '@mui/material';
 import ExpandedIcon from 'mdi-material-ui/ChevronUp';
 import CollapsedIcon from 'mdi-material-ui/ChevronDown';
-import AddIcon from 'mdi-material-ui/Plus';
+import AddPanelIcon from 'mdi-material-ui/ChartBoxPlusOutline';
 import PencilIcon from 'mdi-material-ui/PencilOutline';
 import ArrowUpIcon from 'mdi-material-ui/ArrowUp';
 import ArrowDownIcon from 'mdi-material-ui/ArrowDown';
@@ -26,7 +25,6 @@ import { usePanelGroupActions, useEditMode, useDeletePanelGroupDialog } from '..
  * and collapsing
  */ export function GridTitle(props) {
     const { panelGroupId , title , collapse  } = props;
-    const [isHovered, setIsHovered] = useState(false);
     const { openAddPanel , openEditPanelGroup , moveUp , moveDown  } = usePanelGroupActions(panelGroupId);
     const { openDeletePanelGroupDialog  } = useDeletePanelGroupDialog();
     const { isEditMode  } = useEditMode();
@@ -45,8 +43,6 @@ import { usePanelGroupActions, useEditMode, useDeletePanelGroupDialog } from '..
             padding: (theme)=>theme.spacing(1),
             backgroundColor: (theme)=>theme.palette.background.default
         },
-        onMouseEnter: ()=>setIsHovered(true),
-        onMouseLeave: ()=>setIsHovered(false),
         children: collapse ? /*#__PURE__*/ _jsxs(_Fragment, {
             children: [
                 /*#__PURE__*/ _jsx(IconButton, {
@@ -54,35 +50,35 @@ import { usePanelGroupActions, useEditMode, useDeletePanelGroupDialog } from '..
                     children: collapse.isOpen ? /*#__PURE__*/ _jsx(ExpandedIcon, {}) : /*#__PURE__*/ _jsx(CollapsedIcon, {})
                 }),
                 text,
-                isEditMode && isHovered && /*#__PURE__*/ _jsxs(Stack, {
+                isEditMode && /*#__PURE__*/ _jsxs(Stack, {
                     direction: "row",
                     sx: {
                         marginLeft: 'auto'
                     },
                     children: [
                         /*#__PURE__*/ _jsx(IconButton, {
-                            "aria-label": "add panel to group",
+                            "aria-label": `add panel to group ${title}`,
                             onClick: openAddPanel,
-                            children: /*#__PURE__*/ _jsx(AddIcon, {})
+                            children: /*#__PURE__*/ _jsx(AddPanelIcon, {})
                         }),
                         /*#__PURE__*/ _jsx(IconButton, {
-                            "aria-label": "edit group",
+                            "aria-label": `edit group ${title}`,
                             onClick: openEditPanelGroup,
                             children: /*#__PURE__*/ _jsx(PencilIcon, {})
                         }),
                         /*#__PURE__*/ _jsx(IconButton, {
-                            "aria-label": "delete group",
+                            "aria-label": `delete group ${title}`,
                             onClick: ()=>openDeletePanelGroupDialog(panelGroupId),
                             children: /*#__PURE__*/ _jsx(DeleteIcon, {})
                         }),
                         /*#__PURE__*/ _jsx(IconButton, {
-                            "aria-label": "move group down",
+                            "aria-label": `move group ${title} down`,
                             disabled: moveDown === undefined,
                             onClick: moveDown,
                             children: /*#__PURE__*/ _jsx(ArrowDownIcon, {})
                         }),
                         /*#__PURE__*/ _jsx(IconButton, {
-                            "aria-label": "move group up",
+                            "aria-label": `move group ${title} up`,
                             disabled: moveUp === undefined,
                             onClick: moveUp,
                             children: /*#__PURE__*/ _jsx(ArrowUpIcon, {})

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

@@ -1 +1 @@
-{"version":3,"sources":["../../../src/components/GridLayout/GridTitle.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 { useState } from 'react';\nimport { Box, IconButton, Stack, Typography } from '@mui/material';\nimport ExpandedIcon from 'mdi-material-ui/ChevronUp';\nimport CollapsedIcon from 'mdi-material-ui/ChevronDown';\nimport AddIcon from 'mdi-material-ui/Plus';\nimport PencilIcon from 'mdi-material-ui/PencilOutline';\nimport ArrowUpIcon from 'mdi-material-ui/ArrowUp';\nimport ArrowDownIcon from 'mdi-material-ui/ArrowDown';\nimport DeleteIcon from 'mdi-material-ui/DeleteOutline';\nimport { usePanelGroupActions, useEditMode, PanelGroupId, useDeletePanelGroupDialog } from '../../context';\n\nexport interface GridTitleProps {\n  panelGroupId: PanelGroupId;\n  title: string;\n  collapse?: {\n    isOpen: boolean;\n    onToggleOpen: () => void;\n  };\n}\n\n/**\n * Renders the title for a Grid section, optionally also supporting expanding\n * and collapsing\n */\nexport function GridTitle(props: GridTitleProps) {\n  const { panelGroupId, title, collapse } = props;\n\n  const [isHovered, setIsHovered] = useState(false);\n  const { openAddPanel, openEditPanelGroup, moveUp, moveDown } = usePanelGroupActions(panelGroupId);\n  const { openDeletePanelGroupDialog } = useDeletePanelGroupDialog();\n  const { isEditMode } = useEditMode();\n\n  const text = (\n    <Typography variant=\"h2\" sx={{ marginLeft: collapse !== undefined ? 1 : undefined }}>\n      {title}\n    </Typography>\n  );\n\n  return (\n    <Box\n      sx={{\n        display: 'flex',\n        justifyContent: 'start',\n        alignItems: 'center',\n        padding: (theme) => theme.spacing(1),\n        backgroundColor: (theme) => theme.palette.background.default,\n      }}\n      onMouseEnter={() => setIsHovered(true)}\n      onMouseLeave={() => setIsHovered(false)}\n    >\n      {collapse ? (\n        <>\n          <IconButton onClick={collapse.onToggleOpen}>\n            {collapse.isOpen ? <ExpandedIcon /> : <CollapsedIcon />}\n          </IconButton>\n          {text}\n          {isEditMode && isHovered && (\n            <Stack direction=\"row\" sx={{ marginLeft: 'auto' }}>\n              <IconButton aria-label=\"add panel to group\" onClick={openAddPanel}>\n                <AddIcon />\n              </IconButton>\n              <IconButton aria-label=\"edit group\" onClick={openEditPanelGroup}>\n                <PencilIcon />\n              </IconButton>\n              <IconButton aria-label=\"delete group\" onClick={() => openDeletePanelGroupDialog(panelGroupId)}>\n                <DeleteIcon />\n              </IconButton>\n              <IconButton aria-label=\"move group down\" disabled={moveDown === undefined} onClick={moveDown}>\n                <ArrowDownIcon />\n              </IconButton>\n              <IconButton aria-label=\"move group up\" disabled={moveUp === undefined} onClick={moveUp}>\n                <ArrowUpIcon />\n              </IconButton>\n            </Stack>\n          )}\n        </>\n      ) : (\n        // If we don't need expand/collapse, just render the title text\n        text\n      )}\n    </Box>\n  );\n}\n"],"names":["useState","Box","IconButton","Stack","Typography","ExpandedIcon","CollapsedIcon","AddIcon","PencilIcon","ArrowUpIcon","ArrowDownIcon","DeleteIcon","usePanelGroupActions","useEditMode","useDeletePanelGroupDialog","GridTitle","props","panelGroupId","title","collapse","isHovered","setIsHovered","openAddPanel","openEditPanelGroup","moveUp","moveDown","openDeletePanelGroupDialog","isEditMode","text","variant","sx","marginLeft","undefined","display","justifyContent","alignItems","padding","theme","spacing","backgroundColor","palette","background","default","onMouseEnter","onMouseLeave","onClick","onToggleOpen","isOpen","direction","aria-label","disabled"],"mappings":"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"}
+{"version":3,"sources":["../../../src/components/GridLayout/GridTitle.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, IconButton, Stack, Typography } from '@mui/material';\nimport ExpandedIcon from 'mdi-material-ui/ChevronUp';\nimport CollapsedIcon from 'mdi-material-ui/ChevronDown';\nimport AddPanelIcon from 'mdi-material-ui/ChartBoxPlusOutline';\nimport PencilIcon from 'mdi-material-ui/PencilOutline';\nimport ArrowUpIcon from 'mdi-material-ui/ArrowUp';\nimport ArrowDownIcon from 'mdi-material-ui/ArrowDown';\nimport DeleteIcon from 'mdi-material-ui/DeleteOutline';\nimport { usePanelGroupActions, useEditMode, PanelGroupId, useDeletePanelGroupDialog } from '../../context';\n\nexport interface GridTitleProps {\n  panelGroupId: PanelGroupId;\n  title: string;\n  collapse?: {\n    isOpen: boolean;\n    onToggleOpen: () => void;\n  };\n}\n\n/**\n * Renders the title for a Grid section, optionally also supporting expanding\n * and collapsing\n */\nexport function GridTitle(props: GridTitleProps) {\n  const { panelGroupId, title, collapse } = props;\n\n  const { openAddPanel, openEditPanelGroup, moveUp, moveDown } = usePanelGroupActions(panelGroupId);\n  const { openDeletePanelGroupDialog } = useDeletePanelGroupDialog();\n  const { isEditMode } = useEditMode();\n\n  const text = (\n    <Typography variant=\"h2\" sx={{ marginLeft: collapse !== undefined ? 1 : undefined }}>\n      {title}\n    </Typography>\n  );\n\n  return (\n    <Box\n      sx={{\n        display: 'flex',\n        justifyContent: 'start',\n        alignItems: 'center',\n        padding: (theme) => theme.spacing(1),\n        backgroundColor: (theme) => theme.palette.background.default,\n      }}\n    >\n      {collapse ? (\n        <>\n          <IconButton onClick={collapse.onToggleOpen}>\n            {collapse.isOpen ? <ExpandedIcon /> : <CollapsedIcon />}\n          </IconButton>\n          {text}\n          {isEditMode && (\n            <Stack direction=\"row\" sx={{ marginLeft: 'auto' }}>\n              <IconButton aria-label={`add panel to group ${title}`} onClick={openAddPanel}>\n                <AddPanelIcon />\n              </IconButton>\n              <IconButton aria-label={`edit group ${title}`} onClick={openEditPanelGroup}>\n                <PencilIcon />\n              </IconButton>\n              <IconButton aria-label={`delete group ${title}`} onClick={() => openDeletePanelGroupDialog(panelGroupId)}>\n                <DeleteIcon />\n              </IconButton>\n              <IconButton aria-label={`move group ${title} down`} disabled={moveDown === undefined} onClick={moveDown}>\n                <ArrowDownIcon />\n              </IconButton>\n              <IconButton aria-label={`move group ${title} up`} disabled={moveUp === undefined} onClick={moveUp}>\n                <ArrowUpIcon />\n              </IconButton>\n            </Stack>\n          )}\n        </>\n      ) : (\n        // If we don't need expand/collapse, just render the title text\n        text\n      )}\n    </Box>\n  );\n}\n"],"names":["Box","IconButton","Stack","Typography","ExpandedIcon","CollapsedIcon","AddPanelIcon","PencilIcon","ArrowUpIcon","ArrowDownIcon","DeleteIcon","usePanelGroupActions","useEditMode","useDeletePanelGroupDialog","GridTitle","props","panelGroupId","title","collapse","openAddPanel","openEditPanelGroup","moveUp","moveDown","openDeletePanelGroupDialog","isEditMode","text","variant","sx","marginLeft","undefined","display","justifyContent","alignItems","padding","theme","spacing","backgroundColor","palette","background","default","onClick","onToggleOpen","isOpen","direction","aria-label","disabled"],"mappings":"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"}

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

@@ -1 +1 @@
-{"version":3,"file":"Panel.d.ts","sourceRoot":"","sources":["../../../src/components/Panel/Panel.tsx"],"names":[],"mappings":";AAiBA,OAAO,EAAE,eAAe,EAAE,MAAM,kBAAkB,CAAC;AACnD,OAAO,EAAQ,SAAS,EAAe,MAAM,eAAe,CAAC;AAE7D,OAAO,EAAe,gBAAgB,EAAE,MAAM,eAAe,CAAC;AAG9D,MAAM,WAAW,UAAW,SAAQ,SAAS,CAAC,SAAS,CAAC;IACtD,UAAU,EAAE,eAAe,CAAC;IAC5B,YAAY,CAAC,EAAE,gBAAgB,CAAC,cAAc,CAAC,CAAC;CACjD;AAED;;GAEG;AACH,wBAAgB,KAAK,CAAC,KAAK,EAAE,UAAU,eA2FtC"}
+{"version":3,"file":"Panel.d.ts","sourceRoot":"","sources":["../../../src/components/Panel/Panel.tsx"],"names":[],"mappings":";AAiBA,OAAO,EAAE,eAAe,EAAE,MAAM,kBAAkB,CAAC;AACnD,OAAO,EAAQ,SAAS,EAAe,MAAM,eAAe,CAAC;AAC7D,OAAO,EAAe,gBAAgB,EAAE,MAAM,eAAe,CAAC;AAG9D,MAAM,WAAW,UAAW,SAAQ,SAAS,CAAC,SAAS,CAAC;IACtD,UAAU,EAAE,eAAe,CAAC;IAC5B,YAAY,CAAC,EAAE,gBAAgB,CAAC,cAAc,CAAC,CAAC;CACjD;AAED;;GAEG;AACH,wBAAgB,KAAK,CAAC,KAAK,EAAE,UAAU,eA2FtC"}

package/dist/components/Panel/Panel.js

@@ -14,9 +14,8 @@ import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
 import { useState, useMemo } from 'react';
 import useResizeObserver from 'use-resize-observer';
 import { useInView } from 'react-intersection-observer';
-import { ErrorBoundary, ErrorAlert, combineSx } from '@perses-dev/components';
+import { ErrorBoundary, ErrorAlert, combineSx, useId } from '@perses-dev/components';
 import { Card, CardContent } from '@mui/material';
-import { useId } from '../../utils/component-ids';
 import { PanelHeader } from './PanelHeader';
 import { PanelContent } from './PanelContent';
 /**
@@ -98,6 +97,9 @@ import { PanelContent } from './PanelContent';
                 ref: setContentElement,
                 children: /*#__PURE__*/ _jsx(ErrorBoundary, {
                     FallbackComponent: ErrorAlert,
+                    resetKeys: [
+                        definition.spec.plugin.spec
+                    ],
                     children: inView === true && /*#__PURE__*/ _jsx(PanelContent, {
                         panelPluginKind: definition.spec.plugin.kind,
                         spec: definition.spec.plugin.spec,