@perses-dev/dashboards 0.10.0 → 0.11.0

package/dist/components/Dashboard.js.map

@@ -1 +1 @@
-{"version":3,"sources":["../../src/components/Dashboard.tsx"],"sourcesContent":["// Copyright 2022 The Perses Authors\n// Licensed under the Apache License, Version 2.0 (the \"License\");\n// you may not use this file except in compliance with the License.\n// You may obtain a copy of the License at\n//\n// http://www.apache.org/licenses/LICENSE-2.0\n//\n// Unless required by applicable law or agreed to in writing, software\n// distributed under the License is distributed on an \"AS IS\" BASIS,\n// WITHOUT WARRANTIES OR CONDITIONS OF ANY KIND, either express or implied.\n// See the License for the specific language governing permissions and\n// limitations under the License.\n\nimport { Box, BoxProps } from '@mui/material';\nimport { ErrorBoundary, ErrorAlert } from '@perses-dev/components';\nimport { useLayouts } from '../context';\nimport { GridLayout } from './GridLayout';\n\nexport type DashboardProps = BoxProps;\n\n/**\n * Renders a Dashboard for the provided Dashboard spec.\n */\nexport function Dashboard(props: DashboardProps) {\n  const { layouts } = useLayouts();\n  return (\n    <Box {...props}>\n      <ErrorBoundary FallbackComponent={ErrorAlert}>\n        {layouts.map((layout, groupIndex) => (\n          <GridLayout key={layout.id} groupIndex={groupIndex} groupDefinition={layout} />\n        ))}\n      </ErrorBoundary>\n    </Box>\n  );\n}\n"],"names":["Box","ErrorBoundary","ErrorAlert","useLayouts","GridLayout","Dashboard","props","layouts","FallbackComponent","map","layout","groupIndex","groupDefinition","id"],"mappings":"AAAA,oCAAoC;AACpC,kEAAkE;AAClE,mEAAmE;AACnE,0CAA0C;AAC1C,EAAE;AACF,6CAA6C;AAC7C,EAAE;AACF,sEAAsE;AACtE,oEAAoE;AACpE,2EAA2E;AAC3E,sEAAsE;AACtE,iCAAiC;AAEjC;AAAA,SAASA,GAAG,QAAkB,eAAe,CAAC;AAC9C,SAASC,aAAa,EAAEC,UAAU,QAAQ,wBAAwB,CAAC;AACnE,SAASC,UAAU,QAAQ,YAAY,CAAC;AACxC,SAASC,UAAU,QAAQ,cAAc,CAAC;AAI1C;;CAEC,GACD,OAAO,SAASC,SAAS,CAACC,KAAqB,EAAE;IAC/C,MAAM,EAAEC,OAAO,CAAA,EAAE,GAAGJ,UAAU,EAAE,AAAC;IACjC,qBACE,KAACH,GAAG;QAAE,GAAGM,KAAK;kBACZ,cAAA,KAACL,aAAa;YAACO,iBAAiB,EAAEN,UAAU;sBACzCK,OAAO,CAACE,GAAG,CAAC,CAACC,MAAM,EAAEC,UAAU,iBAC9B,KAACP,UAAU;oBAAiBO,UAAU,EAAEA,UAAU;oBAAEC,eAAe,EAAEF,MAAM;mBAA1DA,MAAM,CAACG,EAAE,CAAqD,AAChF,CAAC;UACY;MACZ,CACN;AACJ,CAAC"}
+{"version":3,"sources":["../../src/components/Dashboard.tsx"],"sourcesContent":["// Copyright 2022 The Perses Authors\n// Licensed under the Apache License, Version 2.0 (the \"License\");\n// you may not use this file except in compliance with the License.\n// You may obtain a copy of the License at\n//\n// http://www.apache.org/licenses/LICENSE-2.0\n//\n// Unless required by applicable law or agreed to in writing, software\n// distributed under the License is distributed on an \"AS IS\" BASIS,\n// WITHOUT WARRANTIES OR CONDITIONS OF ANY KIND, either express or implied.\n// See the License for the specific language governing permissions and\n// limitations under the License.\n\nimport { Box, BoxProps } from '@mui/material';\nimport { ErrorBoundary, ErrorAlert } from '@perses-dev/components';\nimport { usePanelGroupIds } from '../context';\nimport { GridLayout } from './GridLayout';\n\nexport type DashboardProps = BoxProps;\n\n/**\n * Renders a Dashboard for the provided Dashboard spec.\n */\nexport function Dashboard(props: DashboardProps) {\n  const panelGroupIds = usePanelGroupIds();\n  return (\n    <Box {...props}>\n      <ErrorBoundary FallbackComponent={ErrorAlert}>\n        {panelGroupIds.map((panelGroupId) => (\n          <GridLayout key={panelGroupId} panelGroupId={panelGroupId} />\n        ))}\n      </ErrorBoundary>\n    </Box>\n  );\n}\n"],"names":["Box","ErrorBoundary","ErrorAlert","usePanelGroupIds","GridLayout","Dashboard","props","panelGroupIds","FallbackComponent","map","panelGroupId"],"mappings":"AAAA,oCAAoC;AACpC,kEAAkE;AAClE,mEAAmE;AACnE,0CAA0C;AAC1C,EAAE;AACF,6CAA6C;AAC7C,EAAE;AACF,sEAAsE;AACtE,oEAAoE;AACpE,2EAA2E;AAC3E,sEAAsE;AACtE,iCAAiC;AAEjC;AAAA,SAASA,GAAG,QAAkB,eAAe,CAAC;AAC9C,SAASC,aAAa,EAAEC,UAAU,QAAQ,wBAAwB,CAAC;AACnE,SAASC,gBAAgB,QAAQ,YAAY,CAAC;AAC9C,SAASC,UAAU,QAAQ,cAAc,CAAC;AAI1C;;CAEC,GACD,OAAO,SAASC,SAAS,CAACC,KAAqB,EAAE;IAC/C,MAAMC,aAAa,GAAGJ,gBAAgB,EAAE,AAAC;IACzC,qBACE,KAACH,GAAG;QAAE,GAAGM,KAAK;kBACZ,cAAA,KAACL,aAAa;YAACO,iBAAiB,EAAEN,UAAU;sBACzCK,aAAa,CAACE,GAAG,CAAC,CAACC,YAAY,iBAC9B,KAACN,UAAU;oBAAoBM,YAAY,EAAEA,YAAY;mBAAxCA,YAAY,CAAgC,AAC9D,CAAC;UACY;MACZ,CACN;AACJ,CAAC"}

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

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

package/dist/components/DashboardToolbar.js

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

package/dist/components/DashboardToolbar.js.map

@@ -1 +1 @@
-{"version":3,"sources":["../../src/components/DashboardToolbar.tsx"],"sourcesContent":["// Copyright 2022 The Perses Authors\n// Licensed under the Apache License, Version 2.0 (the \"License\");\n// you may not use this file except in compliance with the License.\n// You may obtain a copy of the License at\n//\n// http://www.apache.org/licenses/LICENSE-2.0\n//\n// Unless required by applicable law or agreed to in writing, software\n// distributed under the License is distributed on an \"AS IS\" BASIS,\n// WITHOUT WARRANTIES OR CONDITIONS OF ANY KIND, either express or implied.\n// See the License for the specific language governing permissions and\n// limitations under the License.\n\nimport { Typography, Stack, Button, Box } from '@mui/material';\nimport PencilIcon from 'mdi-material-ui/PencilOutline';\nimport AddPanelGroupIcon from 'mdi-material-ui/PlusBoxOutline';\nimport AddPanelIcon from 'mdi-material-ui/ChartBoxPlusOutline';\nimport { ErrorBoundary, ErrorAlert } from '@perses-dev/components';\nimport { usePanelGroupDialog, useEditMode, usePanels } from '../context';\nimport { TemplateVariableList, TimeRangeControls } from '../components';\n\nexport interface DashboardToolbarProps {\n  dashboardName: string;\n}\n\nexport const DashboardToolbar = (props: DashboardToolbarProps) => {\n  const { dashboardName } = props;\n\n  const { isEditMode, setEditMode } = useEditMode();\n  const { openPanelGroupDialog } = usePanelGroupDialog();\n  const { addPanel } = usePanels();\n\n  const onEditButtonClick = () => {\n    setEditMode(true);\n  };\n\n  const onCancelButtonClick = () => {\n    setEditMode(false);\n  };\n\n  return (\n    <>\n      {isEditMode ? (\n        <Stack spacing={2}>\n          <Box sx={{ backgroundColor: (theme) => theme.palette.primary.light + '20' }}>\n            <Box padding={2} display=\"flex\">\n              <Typography variant=\"h2\">Edit {dashboardName}</Typography>\n              <Stack direction=\"row\" spacing={1} sx={{ marginLeft: 'auto' }}>\n                <Button variant=\"contained\">Save</Button>\n                <Button variant=\"outlined\" onClick={onCancelButtonClick}>\n                  Cancel\n                </Button>\n              </Stack>\n            </Box>\n          </Box>\n          <Box\n            sx={{\n              display: 'flex',\n              width: '100%',\n              alignItems: 'flex-start',\n              padding: (theme) => theme.spacing(2),\n            }}\n          >\n            <ErrorBoundary FallbackComponent={ErrorAlert}>\n              <TemplateVariableList />\n            </ErrorBoundary>\n            <Stack direction={'row'} spacing={1} sx={{ marginLeft: 'auto' }}>\n              <Button startIcon={<AddPanelGroupIcon />} onClick={() => openPanelGroupDialog()}>\n                Add Panel Group\n              </Button>\n              <Button startIcon={<AddPanelIcon />} onClick={() => addPanel(0)}>\n                Add Panel\n              </Button>\n              <TimeRangeControls />\n            </Stack>\n          </Box>\n        </Stack>\n      ) : (\n        <Stack spacing={2} padding={2}>\n          <Box sx={{ display: 'flex', width: '100%' }}>\n            <Typography variant=\"h2\">{dashboardName}</Typography>\n            <Stack direction=\"row\" spacing={2} sx={{ marginLeft: 'auto' }}>\n              <TimeRangeControls />\n              <Button\n                variant=\"outlined\"\n                startIcon={<PencilIcon />}\n                onClick={onEditButtonClick}\n                sx={{ marginLeft: 'auto' }}\n              >\n                Edit\n              </Button>\n            </Stack>\n          </Box>\n          <Box paddingY={2}>\n            <ErrorBoundary FallbackComponent={ErrorAlert}>\n              <TemplateVariableList />\n            </ErrorBoundary>\n          </Box>\n        </Stack>\n      )}\n    </>\n  );\n};\n"],"names":["Typography","Stack","Button","Box","PencilIcon","AddPanelGroupIcon","AddPanelIcon","ErrorBoundary","ErrorAlert","usePanelGroupDialog","useEditMode","usePanels","TemplateVariableList","TimeRangeControls","DashboardToolbar","props","dashboardName","isEditMode","setEditMode","openPanelGroupDialog","addPanel","onEditButtonClick","onCancelButtonClick","spacing","sx","backgroundColor","theme","palette","primary","light","padding","display","variant","direction","marginLeft","onClick","width","alignItems","FallbackComponent","startIcon","paddingY"],"mappings":"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"}
+{"version":3,"sources":["../../src/components/DashboardToolbar.tsx"],"sourcesContent":["// Copyright 2022 The Perses Authors\n// Licensed under the Apache License, Version 2.0 (the \"License\");\n// you may not use this file except in compliance with the License.\n// You may obtain a copy of the License at\n//\n// http://www.apache.org/licenses/LICENSE-2.0\n//\n// Unless required by applicable law or agreed to in writing, software\n// distributed under the License is distributed on an \"AS IS\" BASIS,\n// WITHOUT WARRANTIES OR CONDITIONS OF ANY KIND, either express or implied.\n// See the License for the specific language governing permissions and\n// limitations under the License.\n\nimport { Typography, Stack, Button, Box, useTheme, useMediaQuery } from '@mui/material';\nimport PencilIcon from 'mdi-material-ui/PencilOutline';\nimport AddPanelGroupIcon from 'mdi-material-ui/PlusBoxOutline';\nimport AddPanelIcon from 'mdi-material-ui/ChartBoxPlusOutline';\nimport { ErrorBoundary, ErrorAlert } from '@perses-dev/components';\nimport { useDashboardActions, useEditMode } from '../context';\nimport { TemplateVariableList, TimeRangeControls } from '../components';\n\nexport interface DashboardToolbarProps {\n  dashboardName: string;\n}\n\nexport const DashboardToolbar = (props: DashboardToolbarProps) => {\n  const { dashboardName } = props;\n\n  const { isEditMode, setEditMode } = useEditMode();\n  const { openAddPanelGroup, openAddPanel, reset, save } = useDashboardActions();\n  const isLaptopSize = useMediaQuery(useTheme().breakpoints.up('sm'));\n\n  const onEditButtonClick = () => {\n    setEditMode(true);\n  };\n\n  const onCancelButtonClick = () => {\n    reset();\n    setEditMode(false);\n  };\n\n  const onSave = () => {\n    save();\n    setEditMode(false);\n  };\n\n  return (\n    <>\n      {isEditMode ? (\n        <Stack spacing={2}>\n          <Box sx={{ backgroundColor: (theme) => theme.palette.primary.light + '20' }}>\n            <Box padding={2} display=\"flex\">\n              <Typography variant=\"h2\">Edit {dashboardName}</Typography>\n              <Stack direction=\"row\" spacing={1} sx={{ marginLeft: 'auto' }}>\n                <Button variant=\"contained\" onClick={onSave}>\n                  Save\n                </Button>\n                <Button variant=\"outlined\" onClick={onCancelButtonClick}>\n                  Cancel\n                </Button>\n              </Stack>\n            </Box>\n          </Box>\n          <Box\n            sx={{\n              display: 'flex',\n              width: '100%',\n              alignItems: 'flex-start',\n              padding: (theme) => theme.spacing(2),\n            }}\n          >\n            <ErrorBoundary FallbackComponent={ErrorAlert}>\n              <TemplateVariableList />\n            </ErrorBoundary>\n            <Stack direction={'row'} spacing={1} sx={{ marginLeft: 'auto' }}>\n              <Button startIcon={<AddPanelGroupIcon />} onClick={openAddPanelGroup}>\n                Add Panel Group\n              </Button>\n              <Button startIcon={<AddPanelIcon />} onClick={openAddPanel}>\n                Add Panel\n              </Button>\n              <TimeRangeControls />\n            </Stack>\n          </Box>\n        </Stack>\n      ) : (\n        <Stack spacing={2} padding={2}>\n          <Box sx={{ display: 'flex', width: '100%' }}>\n            <Typography variant=\"h2\">{dashboardName}</Typography>\n            <Stack direction=\"row\" spacing={2} sx={{ marginLeft: 'auto' }}>\n              <TimeRangeControls />\n              {isLaptopSize && (\n                <Button\n                  variant=\"outlined\"\n                  startIcon={<PencilIcon />}\n                  onClick={onEditButtonClick}\n                  sx={{ marginLeft: 'auto' }}\n                >\n                  Edit\n                </Button>\n              )}\n            </Stack>\n          </Box>\n          <Box paddingY={2}>\n            <ErrorBoundary FallbackComponent={ErrorAlert}>\n              <TemplateVariableList />\n            </ErrorBoundary>\n          </Box>\n        </Stack>\n      )}\n    </>\n  );\n};\n"],"names":["Typography","Stack","Button","Box","useTheme","useMediaQuery","PencilIcon","AddPanelGroupIcon","AddPanelIcon","ErrorBoundary","ErrorAlert","useDashboardActions","useEditMode","TemplateVariableList","TimeRangeControls","DashboardToolbar","props","dashboardName","isEditMode","setEditMode","openAddPanelGroup","openAddPanel","reset","save","isLaptopSize","breakpoints","up","onEditButtonClick","onCancelButtonClick","onSave","spacing","sx","backgroundColor","theme","palette","primary","light","padding","display","variant","direction","marginLeft","onClick","width","alignItems","FallbackComponent","startIcon","paddingY"],"mappings":"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"}

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

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

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

@@ -1 +1 @@
-{"version":3,"file":"GridItemContent.d.ts","sourceRoot":"","sources":["../../../src/components/GridLayout/GridItemContent.tsx"],"names":[],"mappings":";AAaA,OAAO,EAAsB,kBAAkB,EAAE,MAAM,kBAAkB,CAAC;AAI1E,MAAM,WAAW,oBAAoB;IACnC,UAAU,EAAE,MAAM,CAAC;IACnB,SAAS,EAAE,MAAM,CAAC;IAClB,OAAO,EAAE,kBAAkB,CAAC,SAAS,CAAC,CAAC;CACxC;AAED;;GAEG;AACH,wBAAgB,eAAe,CAAC,KAAK,EAAE,oBAAoB,eAW1D"}
+{"version":3,"file":"GridItemContent.d.ts","sourceRoot":"","sources":["../../../src/components/GridLayout/GridItemContent.tsx"],"names":[],"mappings":";AAaA,OAAO,EAAE,UAAU,EAAY,MAAM,eAAe,CAAC;AAGrD,MAAM,WAAW,oBAAoB;IACnC,gBAAgB,EAAE,UAAU,CAAC;CAC9B;AAED;;GAEG;AACH,wBAAgB,eAAe,CAAC,KAAK,EAAE,oBAAoB,eAI1D"}

package/dist/components/GridLayout/GridItemContent.js

@@ -11,24 +11,16 @@
 // See the License for the specific language governing permissions and
 // limitations under the License.
 import { jsx as _jsx } from "react/jsx-runtime";
-import { getPanelKeyFromRef } from '@perses-dev/core';
-import { usePanels } from '../../context';
+import { usePanel } from '../../context';
 import { Panel } from '../Panel/Panel';
 /**
  * Resolves the reference to panel content in a GridItemDefinition and renders the panel.
  */ export function GridItemContent(props) {
-    const { content , groupIndex , itemIndex  } = props;
-    // Find the panel referenced in content in the store
-    const { panels  } = usePanels();
-    const panelKey = getPanelKeyFromRef(content);
-    const panelDefinition = panels[panelKey];
-    if (panelDefinition === undefined) {
-        throw new Error(`Panel with key '${panelKey}' was not found`);
-    }
+    const { panelGroupItemId  } = props;
+    const panelDefinition = usePanel(panelGroupItemId);
     return /*#__PURE__*/ _jsx(Panel, {
         definition: panelDefinition,
-        groupIndex: groupIndex,
-        itemIndex: itemIndex
+        panelGroupItemId: panelGroupItemId
     });
 }
 

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

@@ -1 +1 @@
-{"version":3,"sources":["../../../src/components/GridLayout/GridItemContent.tsx"],"sourcesContent":["// Copyright 2022 The Perses Authors\n// Licensed under the Apache License, Version 2.0 (the \"License\");\n// you may not use this file except in compliance with the License.\n// You may obtain a copy of the License at\n//\n// http://www.apache.org/licenses/LICENSE-2.0\n//\n// Unless required by applicable law or agreed to in writing, software\n// distributed under the License is distributed on an \"AS IS\" BASIS,\n// WITHOUT WARRANTIES OR CONDITIONS OF ANY KIND, either express or implied.\n// See the License for the specific language governing permissions and\n// limitations under the License.\n\nimport { getPanelKeyFromRef, GridItemDefinition } from '@perses-dev/core';\nimport { usePanels } from '../../context';\nimport { Panel } from '../Panel/Panel';\n\nexport interface GridItemContentProps {\n  groupIndex: number;\n  itemIndex: number;\n  content: GridItemDefinition['content'];\n}\n\n/**\n * Resolves the reference to panel content in a GridItemDefinition and renders the panel.\n */\nexport function GridItemContent(props: GridItemContentProps) {\n  const { content, groupIndex, itemIndex } = props;\n\n  // Find the panel referenced in content in the store\n  const { panels } = usePanels();\n  const panelKey = getPanelKeyFromRef(content);\n  const panelDefinition = panels[panelKey];\n  if (panelDefinition === undefined) {\n    throw new Error(`Panel with key '${panelKey}' was not found`);\n  }\n  return <Panel definition={panelDefinition} groupIndex={groupIndex} itemIndex={itemIndex} />;\n}\n"],"names":["getPanelKeyFromRef","usePanels","Panel","GridItemContent","props","content","groupIndex","itemIndex","panels","panelKey","panelDefinition","undefined","Error","definition"],"mappings":"AAAA,oCAAoC;AACpC,kEAAkE;AAClE,mEAAmE;AACnE,0CAA0C;AAC1C,EAAE;AACF,6CAA6C;AAC7C,EAAE;AACF,sEAAsE;AACtE,oEAAoE;AACpE,2EAA2E;AAC3E,sEAAsE;AACtE,iCAAiC;AAEjC;AAAA,SAASA,kBAAkB,QAA4B,kBAAkB,CAAC;AAC1E,SAASC,SAAS,QAAQ,eAAe,CAAC;AAC1C,SAASC,KAAK,QAAQ,gBAAgB,CAAC;AAQvC;;CAEC,GACD,OAAO,SAASC,eAAe,CAACC,KAA2B,EAAE;IAC3D,MAAM,EAAEC,OAAO,CAAA,EAAEC,UAAU,CAAA,EAAEC,SAAS,CAAA,EAAE,GAAGH,KAAK,AAAC;IAEjD,oDAAoD;IACpD,MAAM,EAAEI,MAAM,CAAA,EAAE,GAAGP,SAAS,EAAE,AAAC;IAC/B,MAAMQ,QAAQ,GAAGT,kBAAkB,CAACK,OAAO,CAAC,AAAC;IAC7C,MAAMK,eAAe,GAAGF,MAAM,CAACC,QAAQ,CAAC,AAAC;IACzC,IAAIC,eAAe,KAAKC,SAAS,EAAE;QACjC,MAAM,IAAIC,KAAK,CAAC,CAAC,gBAAgB,EAAEH,QAAQ,CAAC,eAAe,CAAC,CAAC,CAAC;IAChE,CAAC;IACD,qBAAO,KAACP,KAAK;QAACW,UAAU,EAAEH,eAAe;QAAEJ,UAAU,EAAEA,UAAU;QAAEC,SAAS,EAAEA,SAAS;MAAI,CAAC;AAC9F,CAAC"}
+{"version":3,"sources":["../../../src/components/GridLayout/GridItemContent.tsx"],"sourcesContent":["// Copyright 2022 The Perses Authors\n// Licensed under the Apache License, Version 2.0 (the \"License\");\n// you may not use this file except in compliance with the License.\n// You may obtain a copy of the License at\n//\n// http://www.apache.org/licenses/LICENSE-2.0\n//\n// Unless required by applicable law or agreed to in writing, software\n// distributed under the License is distributed on an \"AS IS\" BASIS,\n// WITHOUT WARRANTIES OR CONDITIONS OF ANY KIND, either express or implied.\n// See the License for the specific language governing permissions and\n// limitations under the License.\n\nimport { LayoutItem, usePanel } from '../../context';\nimport { Panel } from '../Panel/Panel';\n\nexport interface GridItemContentProps {\n  panelGroupItemId: LayoutItem;\n}\n\n/**\n * Resolves the reference to panel content in a GridItemDefinition and renders the panel.\n */\nexport function GridItemContent(props: GridItemContentProps) {\n  const { panelGroupItemId } = props;\n  const panelDefinition = usePanel(panelGroupItemId);\n  return <Panel definition={panelDefinition} panelGroupItemId={panelGroupItemId} />;\n}\n"],"names":["usePanel","Panel","GridItemContent","props","panelGroupItemId","panelDefinition","definition"],"mappings":"AAAA,oCAAoC;AACpC,kEAAkE;AAClE,mEAAmE;AACnE,0CAA0C;AAC1C,EAAE;AACF,6CAA6C;AAC7C,EAAE;AACF,sEAAsE;AACtE,oEAAoE;AACpE,2EAA2E;AAC3E,sEAAsE;AACtE,iCAAiC;AAEjC;AAAA,SAAqBA,QAAQ,QAAQ,eAAe,CAAC;AACrD,SAASC,KAAK,QAAQ,gBAAgB,CAAC;AAMvC;;CAEC,GACD,OAAO,SAASC,eAAe,CAACC,KAA2B,EAAE;IAC3D,MAAM,EAAEC,gBAAgB,CAAA,EAAE,GAAGD,KAAK,AAAC;IACnC,MAAME,eAAe,GAAGL,QAAQ,CAACI,gBAAgB,CAAC,AAAC;IACnD,qBAAO,KAACH,KAAK;QAACK,UAAU,EAAED,eAAe;QAAED,gBAAgB,EAAEA,gBAAgB;MAAI,CAAC;AACpF,CAAC"}

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

@@ -1,9 +1,8 @@
 /// <reference types="react" />
 import { BoxProps } from '@mui/material';
-import { PanelGroupDefinition } from '../../context/DashboardProvider/layout-slice';
+import { PanelGroupId } from '../../context';
 export interface GridLayoutProps extends BoxProps {
-    groupIndex: number;
-    groupDefinition: PanelGroupDefinition;
+    panelGroupId: PanelGroupId;
 }
 /**
  * Layout component that arranges children in a Grid based on the definition.

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

@@ -1 +1 @@
-{"version":3,"file":"GridLayout.d.ts","sourceRoot":"","sources":["../../../src/components/GridLayout/GridLayout.tsx"],"names":[],"mappings":";AAcA,OAAO,EAAO,QAAQ,EAA0B,MAAM,eAAe,CAAC;AAItE,OAAO,EAAE,oBAAoB,EAAE,MAAM,8CAA8C,CAAC;AAMpF,MAAM,WAAW,eAAgB,SAAQ,QAAQ;IAC/C,UAAU,EAAE,MAAM,CAAC;IACnB,eAAe,EAAE,oBAAoB,CAAC;CACvC;AAED;;GAEG;AACH,wBAAgB,UAAU,CAAC,KAAK,EAAE,eAAe,eA4ChD"}
+{"version":3,"file":"GridLayout.d.ts","sourceRoot":"","sources":["../../../src/components/GridLayout/GridLayout.tsx"],"names":[],"mappings":";AAcA,OAAO,EAAO,QAAQ,EAA0B,MAAM,eAAe,CAAC;AAGtE,OAAO,EAA8B,YAAY,EAAE,MAAM,eAAe,CAAC;AAMzE,MAAM,WAAW,eAAgB,SAAQ,QAAQ;IAC/C,YAAY,EAAE,YAAY,CAAC;CAC5B;AAED;;GAEG;AACH,wBAAgB,UAAU,CAAC,KAAK,EAAE,eAAe,eA6ChD"}

package/dist/components/GridLayout/GridLayout.js

@@ -16,14 +16,15 @@ import { Responsive, WidthProvider } from 'react-grid-layout';
 import { Box, Collapse, GlobalStyles } from '@mui/material';
 import { ErrorAlert, ErrorBoundary } from '@perses-dev/components';
 import { styles } from '../../css/styles';
-import { useEditMode } from '../../context';
+import { useEditMode, usePanelGroup } from '../../context';
 import { GridTitle } from './GridTitle';
 import { GridItemContent } from './GridItemContent';
 const ResponsiveGridLayout = WidthProvider(Responsive);
 /**
  * Layout component that arranges children in a Grid based on the definition.
  */ export function GridLayout(props) {
-    const { groupIndex , groupDefinition , ...others } = props;
+    const { panelGroupId , ...others } = props;
+    const groupDefinition = usePanelGroup(panelGroupId);
     var ref;
     const [isOpen, setIsOpen] = useState((ref = !groupDefinition.isCollapsed) !== null && ref !== void 0 ? ref : true);
     const { isEditMode  } = useEditMode();
@@ -42,7 +43,7 @@ const ResponsiveGridLayout = WidthProvider(Responsive);
                 },
                 children: [
                     groupDefinition.title !== undefined && /*#__PURE__*/ _jsx(GridTitle, {
-                        groupIndex: groupIndex,
+                        panelGroupId: panelGroupId,
                         title: groupDefinition.title,
                         collapse: groupDefinition.isCollapsed === undefined ? undefined : {
                             isOpen,
@@ -75,7 +76,7 @@ const ResponsiveGridLayout = WidthProvider(Responsive);
                             ],
                             isDraggable: isEditMode,
                             isResizable: isEditMode,
-                            children: groupDefinition.items.map(({ x , y , width , height , content  }, itemIndex)=>/*#__PURE__*/ _jsx("div", {
+                            children: groupDefinition.items.map(({ x , y , width , height  }, itemIndex)=>/*#__PURE__*/ _jsx("div", {
                                     "data-grid": {
                                         x,
                                         y,
@@ -85,9 +86,10 @@ const ResponsiveGridLayout = WidthProvider(Responsive);
                                     children: /*#__PURE__*/ _jsx(ErrorBoundary, {
                                         FallbackComponent: ErrorAlert,
                                         children: /*#__PURE__*/ _jsx(GridItemContent, {
-                                            groupIndex: groupIndex,
-                                            itemIndex: itemIndex,
-                                            content: content
+                                            panelGroupItemId: {
+                                                panelGroupId,
+                                                itemIndex
+                                            }
                                         })
                                     })
                                 }, itemIndex))

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

@@ -1 +1 @@
-{"version":3,"sources":["../../../src/components/GridLayout/GridLayout.tsx"],"sourcesContent":["// Copyright 2022 The Perses Authors\n// Licensed under the Apache License, Version 2.0 (the \"License\");\n// you may not use this file except in compliance with the License.\n// You may obtain a copy of the License at\n//\n// http://www.apache.org/licenses/LICENSE-2.0\n//\n// Unless required by applicable law or agreed to in writing, software\n// distributed under the License is distributed on an \"AS IS\" BASIS,\n// WITHOUT WARRANTIES OR CONDITIONS OF ANY KIND, either express or implied.\n// See the License for the specific language governing permissions and\n// limitations under the License.\nimport { useState } from 'react';\nimport { Responsive, WidthProvider } from 'react-grid-layout';\nimport { Box, BoxProps, Collapse, GlobalStyles } from '@mui/material';\nimport { ErrorAlert, ErrorBoundary } from '@perses-dev/components';\nimport { styles } from '../../css/styles';\nimport { useEditMode } from '../../context';\nimport { PanelGroupDefinition } from '../../context/DashboardProvider/layout-slice';\nimport { GridTitle } from './GridTitle';\nimport { GridItemContent } from './GridItemContent';\n\nconst ResponsiveGridLayout = WidthProvider(Responsive);\n\nexport interface GridLayoutProps extends BoxProps {\n  groupIndex: number;\n  groupDefinition: PanelGroupDefinition;\n}\n\n/**\n * Layout component that arranges children in a Grid based on the definition.\n */\nexport function GridLayout(props: GridLayoutProps) {\n  const { groupIndex, groupDefinition, ...others } = props;\n\n  const [isOpen, setIsOpen] = useState(!groupDefinition.isCollapsed ?? true);\n  const { isEditMode } = useEditMode();\n\n  return (\n    <>\n      <GlobalStyles styles={styles} />\n      <Box {...others} component=\"section\" sx={{ '& + &': { marginTop: (theme) => theme.spacing(1) } }}>\n        {groupDefinition.title !== undefined && (\n          <GridTitle\n            groupIndex={groupIndex}\n            title={groupDefinition.title}\n            collapse={\n              groupDefinition.isCollapsed === undefined\n                ? undefined\n                : { isOpen, onToggleOpen: () => setIsOpen((current) => !current) }\n            }\n          />\n        )}\n        <Collapse in={isOpen} unmountOnExit>\n          <ResponsiveGridLayout\n            className=\"layout\"\n            breakpoints={{ lg: 1200, md: 996, sm: 768, xs: 480, xxs: 0 }}\n            cols={{ lg: 24, md: 24, sm: 24, xs: 24, xxs: 2 }}\n            rowHeight={30}\n            draggableHandle={'.drag-handle'}\n            resizeHandles={['se']}\n            isDraggable={isEditMode}\n            isResizable={isEditMode}\n          >\n            {groupDefinition.items.map(({ x, y, width, height, content }, itemIndex) => (\n              <div key={itemIndex} data-grid={{ x, y, w: width, h: height }}>\n                <ErrorBoundary FallbackComponent={ErrorAlert}>\n                  <GridItemContent groupIndex={groupIndex} itemIndex={itemIndex} content={content} />\n                </ErrorBoundary>\n              </div>\n            ))}\n          </ResponsiveGridLayout>\n        </Collapse>\n      </Box>\n    </>\n  );\n}\n"],"names":["useState","Responsive","WidthProvider","Box","Collapse","GlobalStyles","ErrorAlert","ErrorBoundary","styles","useEditMode","GridTitle","GridItemContent","ResponsiveGridLayout","GridLayout","props","groupIndex","groupDefinition","others","isOpen","setIsOpen","isCollapsed","isEditMode","component","sx","marginTop","theme","spacing","title","undefined","collapse","onToggleOpen","current","in","unmountOnExit","className","breakpoints","lg","md","sm","xs","xxs","cols","rowHeight","draggableHandle","resizeHandles","isDraggable","isResizable","items","map","x","y","width","height","content","itemIndex","div","data-grid","w","h","FallbackComponent"],"mappings":"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"}
+{"version":3,"sources":["../../../src/components/GridLayout/GridLayout.tsx"],"sourcesContent":["// Copyright 2022 The Perses Authors\n// Licensed under the Apache License, Version 2.0 (the \"License\");\n// you may not use this file except in compliance with the License.\n// You may obtain a copy of the License at\n//\n// http://www.apache.org/licenses/LICENSE-2.0\n//\n// Unless required by applicable law or agreed to in writing, software\n// distributed under the License is distributed on an \"AS IS\" BASIS,\n// WITHOUT WARRANTIES OR CONDITIONS OF ANY KIND, either express or implied.\n// See the License for the specific language governing permissions and\n// limitations under the License.\nimport { useState } from 'react';\nimport { Responsive, WidthProvider } from 'react-grid-layout';\nimport { Box, BoxProps, Collapse, GlobalStyles } from '@mui/material';\nimport { ErrorAlert, ErrorBoundary } from '@perses-dev/components';\nimport { styles } from '../../css/styles';\nimport { useEditMode, usePanelGroup, PanelGroupId } from '../../context';\nimport { GridTitle } from './GridTitle';\nimport { GridItemContent } from './GridItemContent';\n\nconst ResponsiveGridLayout = WidthProvider(Responsive);\n\nexport interface GridLayoutProps extends BoxProps {\n  panelGroupId: PanelGroupId;\n}\n\n/**\n * Layout component that arranges children in a Grid based on the definition.\n */\nexport function GridLayout(props: GridLayoutProps) {\n  const { panelGroupId, ...others } = props;\n  const groupDefinition = usePanelGroup(panelGroupId);\n\n  const [isOpen, setIsOpen] = useState(!groupDefinition.isCollapsed ?? true);\n  const { isEditMode } = useEditMode();\n\n  return (\n    <>\n      <GlobalStyles styles={styles} />\n      <Box {...others} component=\"section\" sx={{ '& + &': { marginTop: (theme) => theme.spacing(1) } }}>\n        {groupDefinition.title !== undefined && (\n          <GridTitle\n            panelGroupId={panelGroupId}\n            title={groupDefinition.title}\n            collapse={\n              groupDefinition.isCollapsed === undefined\n                ? undefined\n                : { isOpen, onToggleOpen: () => setIsOpen((current) => !current) }\n            }\n          />\n        )}\n        <Collapse in={isOpen} unmountOnExit>\n          <ResponsiveGridLayout\n            className=\"layout\"\n            breakpoints={{ lg: 1200, md: 996, sm: 768, xs: 480, xxs: 0 }}\n            cols={{ lg: 24, md: 24, sm: 24, xs: 24, xxs: 2 }}\n            rowHeight={30}\n            draggableHandle={'.drag-handle'}\n            resizeHandles={['se']}\n            isDraggable={isEditMode}\n            isResizable={isEditMode}\n          >\n            {groupDefinition.items.map(({ x, y, width, height }, itemIndex) => (\n              <div key={itemIndex} data-grid={{ x, y, w: width, h: height }}>\n                <ErrorBoundary FallbackComponent={ErrorAlert}>\n                  <GridItemContent panelGroupItemId={{ panelGroupId, itemIndex }} />\n                </ErrorBoundary>\n              </div>\n            ))}\n          </ResponsiveGridLayout>\n        </Collapse>\n      </Box>\n    </>\n  );\n}\n"],"names":["useState","Responsive","WidthProvider","Box","Collapse","GlobalStyles","ErrorAlert","ErrorBoundary","styles","useEditMode","usePanelGroup","GridTitle","GridItemContent","ResponsiveGridLayout","GridLayout","props","panelGroupId","others","groupDefinition","isOpen","setIsOpen","isCollapsed","isEditMode","component","sx","marginTop","theme","spacing","title","undefined","collapse","onToggleOpen","current","in","unmountOnExit","className","breakpoints","lg","md","sm","xs","xxs","cols","rowHeight","draggableHandle","resizeHandles","isDraggable","isResizable","items","map","x","y","width","height","itemIndex","div","data-grid","w","h","FallbackComponent","panelGroupItemId"],"mappings":"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"}

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

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

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":";AAyBA,MAAM,WAAW,cAAc;IAC7B,UAAU,EAAE,MAAM,CAAC;IACnB,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,eAmE9C"}
+{"version":3,"file":"GridTitle.d.ts","sourceRoot":"","sources":["../../../src/components/GridLayout/GridTitle.tsx"],"names":[],"mappings":";AAsBA,OAAO,EAAqC,YAAY,EAAE,MAAM,eAAe,CAAC;AAEhF,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,eAyD9C"}

package/dist/components/GridLayout/GridTitle.js

@@ -20,17 +20,15 @@ import PencilIcon from 'mdi-material-ui/PencilOutline';
 import ArrowUpIcon from 'mdi-material-ui/ArrowUp';
 import ArrowDownIcon from 'mdi-material-ui/ArrowDown';
 import DeleteIcon from 'mdi-material-ui/DeleteOutline';
-import { usePanelGroupDialog, useEditMode, useLayouts, usePanels } from '../../context';
+import { usePanelGroupActions, useEditMode } from '../../context';
 /**
  * Renders the title for a Grid section, optionally also supporting expanding
  * and collapsing
  */ export function GridTitle(props) {
-    const { groupIndex , title , collapse  } = props;
+    const { panelGroupId , title , collapse  } = props;
     const [isHovered, setIsHovered] = useState(false);
-    const { openPanelGroupDialog , openDeletePanelGroupDialog  } = usePanelGroupDialog();
-    const { addPanel  } = usePanels();
+    const { openAddPanel , openEditPanelGroup , deletePanelGroup , moveUp , moveDown  } = usePanelGroupActions(panelGroupId);
     const { isEditMode  } = useEditMode();
-    const { layouts , swapPanelGroups  } = useLayouts();
     const text = /*#__PURE__*/ _jsx(Typography, {
         variant: "h2",
         sx: {
@@ -63,29 +61,29 @@ import { usePanelGroupDialog, useEditMode, useLayouts, usePanels } from '../../c
                     children: [
                         /*#__PURE__*/ _jsx(IconButton, {
                             "aria-label": "add panel to group",
-                            onClick: ()=>addPanel(groupIndex),
+                            onClick: openAddPanel,
                             children: /*#__PURE__*/ _jsx(AddIcon, {})
                         }),
                         /*#__PURE__*/ _jsx(IconButton, {
                             "aria-label": "edit group",
-                            onClick: ()=>openPanelGroupDialog(groupIndex),
+                            onClick: openEditPanelGroup,
                             children: /*#__PURE__*/ _jsx(PencilIcon, {})
                         }),
                         /*#__PURE__*/ _jsx(IconButton, {
                             "aria-label": "delete group",
-                            onClick: ()=>openDeletePanelGroupDialog(groupIndex),
+                            onClick: deletePanelGroup,
                             children: /*#__PURE__*/ _jsx(DeleteIcon, {})
                         }),
                         /*#__PURE__*/ _jsx(IconButton, {
                             "aria-label": "move group down",
-                            disabled: groupIndex === layouts.length - 1,
-                            onClick: ()=>swapPanelGroups(groupIndex, groupIndex + 1),
+                            disabled: moveDown === undefined,
+                            onClick: moveDown,
                             children: /*#__PURE__*/ _jsx(ArrowDownIcon, {})
                         }),
                         /*#__PURE__*/ _jsx(IconButton, {
                             "aria-label": "move group up",
-                            disabled: groupIndex === 0,
-                            onClick: ()=>swapPanelGroups(groupIndex, groupIndex - 1),
+                            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';\n\nimport { usePanelGroupDialog, useEditMode, useLayouts, usePanels } from '../../context';\n\nexport interface GridTitleProps {\n  groupIndex: number;\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 { groupIndex, title, collapse } = props;\n\n  const [isHovered, setIsHovered] = useState(false);\n  const { openPanelGroupDialog, openDeletePanelGroupDialog } = usePanelGroupDialog();\n  const { addPanel } = usePanels();\n  const { isEditMode } = useEditMode();\n  const { layouts, swapPanelGroups } = useLayouts();\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={() => addPanel(groupIndex)}>\n                <AddIcon />\n              </IconButton>\n              <IconButton aria-label=\"edit group\" onClick={() => openPanelGroupDialog(groupIndex)}>\n                <PencilIcon />\n              </IconButton>\n              <IconButton aria-label=\"delete group\" onClick={() => openDeletePanelGroupDialog(groupIndex)}>\n                <DeleteIcon />\n              </IconButton>\n              <IconButton\n                aria-label=\"move group down\"\n                disabled={groupIndex === layouts.length - 1}\n                onClick={() => swapPanelGroups(groupIndex, groupIndex + 1)}\n              >\n                <ArrowDownIcon />\n              </IconButton>\n              <IconButton\n                aria-label=\"move group up\"\n                disabled={groupIndex === 0}\n                onClick={() => swapPanelGroups(groupIndex, groupIndex - 1)}\n              >\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","usePanelGroupDialog","useEditMode","useLayouts","usePanels","GridTitle","props","groupIndex","title","collapse","isHovered","setIsHovered","openPanelGroupDialog","openDeletePanelGroupDialog","addPanel","isEditMode","layouts","swapPanelGroups","text","variant","sx","marginLeft","undefined","display","justifyContent","alignItems","padding","theme","spacing","backgroundColor","palette","background","default","onMouseEnter","onMouseLeave","onClick","onToggleOpen","isOpen","direction","aria-label","disabled","length"],"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 { 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 } 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, deletePanelGroup, moveUp, moveDown } = usePanelGroupActions(panelGroupId);\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={deletePanelGroup}>\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","GridTitle","props","panelGroupId","title","collapse","isHovered","setIsHovered","openAddPanel","openEditPanelGroup","deletePanelGroup","moveUp","moveDown","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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"}

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

@@ -1,5 +1,5 @@
 /// <reference types="react" />
-import { DeletePanelDialog } from '../../context/DashboardProvider/panel-editing-slice';
+import { DeletePanelDialog } from '../../context/DashboardProvider/panel-editor-slice';
 declare const DeletePanelDialog: () => JSX.Element;
 export default DeletePanelDialog;
 //# sourceMappingURL=DeletePanelDialog.d.ts.map

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

@@ -1 +1 @@
-{"version":3,"file":"DeletePanelDialog.d.ts","sourceRoot":"","sources":["../../../src/components/Panel/DeletePanelDialog.tsx"],"names":[],"mappings":";AAiBA,OAAO,EAAE,iBAAiB,EAAE,MAAM,qDAAqD,CAAC;AAExF,QAAA,MAAM,iBAAiB,mBAoBtB,CAAC;AA+BF,eAAe,iBAAiB,CAAC"}
+{"version":3,"file":"DeletePanelDialog.d.ts","sourceRoot":"","sources":["../../../src/components/Panel/DeletePanelDialog.tsx"],"names":[],"mappings":";AAiBA,OAAO,EAAE,iBAAiB,EAAE,MAAM,oDAAoD,CAAC;AAEvF,QAAA,MAAM,iBAAiB,mBAoBtB,CAAC;AA+BF,eAAe,iBAAiB,CAAC"}

package/dist/components/Panel/DeletePanelDialog.js

@@ -13,9 +13,9 @@
 import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
 import { IconButton, Dialog, DialogTitle, DialogContent, DialogActions, Button } from '@mui/material';
 import CloseIcon from 'mdi-material-ui/Close';
-import { usePanels, useLayouts } from '../../context';
+import { useDeletePanelDialog } from '../../context';
 const DeletePanelDialog = ()=>{
-    const { deletePanelDialog , closeDeletePanelDialog  } = usePanels();
+    const { deletePanelDialog , closeDeletePanelDialog  } = useDeletePanelDialog();
     return /*#__PURE__*/ _jsxs(Dialog, {
         open: deletePanelDialog !== undefined,
         children: [
@@ -39,25 +39,29 @@ const DeletePanelDialog = ()=>{
     });
 };
 const DeletePanelForm = ({ deletePanelDialog  })=>{
-    var ref;
-    const { layouts  } = useLayouts();
-    const { deletePanels , closeDeletePanelDialog  } = usePanels();
+    const { deletePanels , closeDeletePanelDialog  } = useDeletePanelDialog();
     const handleDelete = (e)=>{
         e.preventDefault();
-        const { layoutItem  } = deletePanelDialog;
+        const { panelGroupItemId  } = deletePanelDialog;
         deletePanels([
-            layoutItem
+            panelGroupItemId
         ]);
         closeDeletePanelDialog();
     };
     return /*#__PURE__*/ _jsxs("form", {
         onSubmit: handleDelete,
         children: [
-            /*#__PURE__*/ _jsx(DialogContent, {
+            /*#__PURE__*/ _jsxs(DialogContent, {
                 sx: {
                     width: '500px'
                 },
-                children: `Are you sure you want to delete ${deletePanelDialog.panelName} from ${(ref = layouts[deletePanelDialog.layoutItem.groupIndex]) === null || ref === void 0 ? void 0 : ref.title}? This action cannot be undone.`
+                children: [
+                    "Are you sure you want to delete ",
+                    deletePanelDialog.panelName,
+                    " from ",
+                    deletePanelDialog.panelGroupName,
+                    "? This action cannot be undone."
+                ]
             }),
             /*#__PURE__*/ _jsxs(DialogActions, {
                 children: [

package/dist/components/Panel/DeletePanelDialog.js.map

@@ -1 +1 @@
-{"version":3,"sources":["../../../src/components/Panel/DeletePanelDialog.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 { FormEvent } from 'react';\nimport { IconButton, Dialog, DialogTitle, DialogContent, DialogActions, Button } from '@mui/material';\nimport CloseIcon from 'mdi-material-ui/Close';\nimport { usePanels, useLayouts } from '../../context';\nimport { DeletePanelDialog } from '../../context/DashboardProvider/panel-editing-slice';\n\nconst DeletePanelDialog = () => {\n  const { deletePanelDialog, closeDeletePanelDialog } = usePanels();\n\n  return (\n    <Dialog open={deletePanelDialog !== undefined}>\n      <DialogTitle>Delete Panel</DialogTitle>\n      <IconButton\n        aria-label=\"Close\"\n        onClick={() => closeDeletePanelDialog()}\n        sx={(theme) => ({\n          position: 'absolute',\n          top: theme.spacing(0.5),\n          right: theme.spacing(0.5),\n        })}\n      >\n        <CloseIcon />\n      </IconButton>\n      {deletePanelDialog && <DeletePanelForm deletePanelDialog={deletePanelDialog} />}\n    </Dialog>\n  );\n};\n\ninterface DeletePanelFormProps {\n  deletePanelDialog: DeletePanelDialog;\n}\n\nconst DeletePanelForm = ({ deletePanelDialog }: DeletePanelFormProps) => {\n  const { layouts } = useLayouts();\n  const { deletePanels, closeDeletePanelDialog } = usePanels();\n\n  const handleDelete = (e: FormEvent) => {\n    e.preventDefault();\n    const { layoutItem } = deletePanelDialog;\n    deletePanels([layoutItem]);\n    closeDeletePanelDialog();\n  };\n  return (\n    <form onSubmit={handleDelete}>\n      <DialogContent sx={{ width: '500px' }}>{`Are you sure you want to delete ${deletePanelDialog.panelName} from ${\n        layouts[deletePanelDialog.layoutItem.groupIndex]?.title\n      }? This action cannot be undone.`}</DialogContent>\n      <DialogActions>\n        <Button variant=\"contained\" type=\"submit\">\n          Delete\n        </Button>\n        <Button onClick={() => closeDeletePanelDialog()}>Cancel</Button>\n      </DialogActions>\n    </form>\n  );\n};\n\nexport default DeletePanelDialog;\n"],"names":["IconButton","Dialog","DialogTitle","DialogContent","DialogActions","Button","CloseIcon","usePanels","useLayouts","DeletePanelDialog","deletePanelDialog","closeDeletePanelDialog","open","undefined","aria-label","onClick","sx","theme","position","top","spacing","right","DeletePanelForm","layouts","deletePanels","handleDelete","e","preventDefault","layoutItem","form","onSubmit","width","panelName","groupIndex","title","variant","type"],"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;AACA,SAASA,UAAU,EAAEC,MAAM,EAAEC,WAAW,EAAEC,aAAa,EAAEC,aAAa,EAAEC,MAAM,QAAQ,eAAe,CAAC;AACtG,OAAOC,SAAS,MAAM,uBAAuB,CAAC;AAC9C,SAASC,SAAS,EAAEC,UAAU,QAAQ,eAAe,CAAC;AAGtD,MAAMC,iBAAiB,GAAG,IAAM;IAC9B,MAAM,EAAEC,iBAAiB,CAAA,EAAEC,sBAAsB,CAAA,EAAE,GAAGJ,SAAS,EAAE,AAAC;IAElE,qBACE,MAACN,MAAM;QAACW,IAAI,EAAEF,iBAAiB,KAAKG,SAAS;;0BAC3C,KAACX,WAAW;0BAAC,cAAY;cAAc;0BACvC,KAACF,UAAU;gBACTc,YAAU,EAAC,OAAO;gBAClBC,OAAO,EAAE,IAAMJ,sBAAsB,EAAE;gBACvCK,EAAE,EAAE,CAACC,KAAK,GAAM,CAAA;wBACdC,QAAQ,EAAE,UAAU;wBACpBC,GAAG,EAAEF,KAAK,CAACG,OAAO,CAAC,GAAG,CAAC;wBACvBC,KAAK,EAAEJ,KAAK,CAACG,OAAO,CAAC,GAAG,CAAC;qBAC1B,CAAA,AAAC;0BAEF,cAAA,KAACd,SAAS,KAAG;cACF;YACZI,iBAAiB,kBAAI,KAACY,eAAe;gBAACZ,iBAAiB,EAAEA,iBAAiB;cAAI;;MACxE,CACT;AACJ,CAAC,AAAC;AAMF,MAAMY,eAAe,GAAG,CAAC,EAAEZ,iBAAiB,CAAA,EAAwB,GAAK;QAajEa,GAAgD;IAZtD,MAAM,EAAEA,OAAO,CAAA,EAAE,GAAGf,UAAU,EAAE,AAAC;IACjC,MAAM,EAAEgB,YAAY,CAAA,EAAEb,sBAAsB,CAAA,EAAE,GAAGJ,SAAS,EAAE,AAAC;IAE7D,MAAMkB,YAAY,GAAG,CAACC,CAAY,GAAK;QACrCA,CAAC,CAACC,cAAc,EAAE,CAAC;QACnB,MAAM,EAAEC,UAAU,CAAA,EAAE,GAAGlB,iBAAiB,AAAC;QACzCc,YAAY,CAAC;YAACI,UAAU;SAAC,CAAC,CAAC;QAC3BjB,sBAAsB,EAAE,CAAC;IAC3B,CAAC,AAAC;IACF,qBACE,MAACkB,MAAI;QAACC,QAAQ,EAAEL,YAAY;;0BAC1B,KAACtB,aAAa;gBAACa,EAAE,EAAE;oBAAEe,KAAK,EAAE,OAAO;iBAAE;0BAAG,CAAC,gCAAgC,EAAErB,iBAAiB,CAACsB,SAAS,CAAC,MAAM,EAC3GT,CAAAA,GAAgD,GAAhDA,OAAO,CAACb,iBAAiB,CAACkB,UAAU,CAACK,UAAU,CAAC,cAAhDV,GAAgD,WAAO,GAAvDA,KAAAA,CAAuD,GAAvDA,GAAgD,CAAEW,KAAK,CACxD,+BAA+B,CAAC;cAAiB;0BAClD,MAAC9B,aAAa;;kCACZ,KAACC,MAAM;wBAAC8B,OAAO,EAAC,WAAW;wBAACC,IAAI,EAAC,QAAQ;kCAAC,QAE1C;sBAAS;kCACT,KAAC/B,MAAM;wBAACU,OAAO,EAAE,IAAMJ,sBAAsB,EAAE;kCAAE,QAAM;sBAAS;;cAClD;;MACX,CACP;AACJ,CAAC,AAAC;AAEF,eAAeF,iBAAiB,CAAC"}
+{"version":3,"sources":["../../../src/components/Panel/DeletePanelDialog.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 { FormEvent } from 'react';\nimport { IconButton, Dialog, DialogTitle, DialogContent, DialogActions, Button } from '@mui/material';\nimport CloseIcon from 'mdi-material-ui/Close';\nimport { useDeletePanelDialog } from '../../context';\nimport { DeletePanelDialog } from '../../context/DashboardProvider/panel-editor-slice';\n\nconst DeletePanelDialog = () => {\n  const { deletePanelDialog, closeDeletePanelDialog } = useDeletePanelDialog();\n\n  return (\n    <Dialog open={deletePanelDialog !== undefined}>\n      <DialogTitle>Delete Panel</DialogTitle>\n      <IconButton\n        aria-label=\"Close\"\n        onClick={() => closeDeletePanelDialog()}\n        sx={(theme) => ({\n          position: 'absolute',\n          top: theme.spacing(0.5),\n          right: theme.spacing(0.5),\n        })}\n      >\n        <CloseIcon />\n      </IconButton>\n      {deletePanelDialog && <DeletePanelForm deletePanelDialog={deletePanelDialog} />}\n    </Dialog>\n  );\n};\n\ninterface DeletePanelFormProps {\n  deletePanelDialog: DeletePanelDialog;\n}\n\nconst DeletePanelForm = ({ deletePanelDialog }: DeletePanelFormProps) => {\n  const { deletePanels, closeDeletePanelDialog } = useDeletePanelDialog();\n\n  const handleDelete = (e: FormEvent) => {\n    e.preventDefault();\n    const { panelGroupItemId } = deletePanelDialog;\n    deletePanels([panelGroupItemId]);\n    closeDeletePanelDialog();\n  };\n  return (\n    <form onSubmit={handleDelete}>\n      <DialogContent sx={{ width: '500px' }}>\n        Are you sure you want to delete {deletePanelDialog.panelName} from {deletePanelDialog.panelGroupName}? This\n        action cannot be undone.\n      </DialogContent>\n      <DialogActions>\n        <Button variant=\"contained\" type=\"submit\">\n          Delete\n        </Button>\n        <Button onClick={() => closeDeletePanelDialog()}>Cancel</Button>\n      </DialogActions>\n    </form>\n  );\n};\n\nexport default DeletePanelDialog;\n"],"names":["IconButton","Dialog","DialogTitle","DialogContent","DialogActions","Button","CloseIcon","useDeletePanelDialog","DeletePanelDialog","deletePanelDialog","closeDeletePanelDialog","open","undefined","aria-label","onClick","sx","theme","position","top","spacing","right","DeletePanelForm","deletePanels","handleDelete","e","preventDefault","panelGroupItemId","form","onSubmit","width","panelName","panelGroupName","variant","type"],"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;AACA,SAASA,UAAU,EAAEC,MAAM,EAAEC,WAAW,EAAEC,aAAa,EAAEC,aAAa,EAAEC,MAAM,QAAQ,eAAe,CAAC;AACtG,OAAOC,SAAS,MAAM,uBAAuB,CAAC;AAC9C,SAASC,oBAAoB,QAAQ,eAAe,CAAC;AAGrD,MAAMC,iBAAiB,GAAG,IAAM;IAC9B,MAAM,EAAEC,iBAAiB,CAAA,EAAEC,sBAAsB,CAAA,EAAE,GAAGH,oBAAoB,EAAE,AAAC;IAE7E,qBACE,MAACN,MAAM;QAACU,IAAI,EAAEF,iBAAiB,KAAKG,SAAS;;0BAC3C,KAACV,WAAW;0BAAC,cAAY;cAAc;0BACvC,KAACF,UAAU;gBACTa,YAAU,EAAC,OAAO;gBAClBC,OAAO,EAAE,IAAMJ,sBAAsB,EAAE;gBACvCK,EAAE,EAAE,CAACC,KAAK,GAAM,CAAA;wBACdC,QAAQ,EAAE,UAAU;wBACpBC,GAAG,EAAEF,KAAK,CAACG,OAAO,CAAC,GAAG,CAAC;wBACvBC,KAAK,EAAEJ,KAAK,CAACG,OAAO,CAAC,GAAG,CAAC;qBAC1B,CAAA,AAAC;0BAEF,cAAA,KAACb,SAAS,KAAG;cACF;YACZG,iBAAiB,kBAAI,KAACY,eAAe;gBAACZ,iBAAiB,EAAEA,iBAAiB;cAAI;;MACxE,CACT;AACJ,CAAC,AAAC;AAMF,MAAMY,eAAe,GAAG,CAAC,EAAEZ,iBAAiB,CAAA,EAAwB,GAAK;IACvE,MAAM,EAAEa,YAAY,CAAA,EAAEZ,sBAAsB,CAAA,EAAE,GAAGH,oBAAoB,EAAE,AAAC;IAExE,MAAMgB,YAAY,GAAG,CAACC,CAAY,GAAK;QACrCA,CAAC,CAACC,cAAc,EAAE,CAAC;QACnB,MAAM,EAAEC,gBAAgB,CAAA,EAAE,GAAGjB,iBAAiB,AAAC;QAC/Ca,YAAY,CAAC;YAACI,gBAAgB;SAAC,CAAC,CAAC;QACjChB,sBAAsB,EAAE,CAAC;IAC3B,CAAC,AAAC;IACF,qBACE,MAACiB,MAAI;QAACC,QAAQ,EAAEL,YAAY;;0BAC1B,MAACpB,aAAa;gBAACY,EAAE,EAAE;oBAAEc,KAAK,EAAE,OAAO;iBAAE;;oBAAE,kCACL;oBAACpB,iBAAiB,CAACqB,SAAS;oBAAC,QAAM;oBAACrB,iBAAiB,CAACsB,cAAc;oBAAC,iCAEvG;;cAAgB;0BAChB,MAAC3B,aAAa;;kCACZ,KAACC,MAAM;wBAAC2B,OAAO,EAAC,WAAW;wBAACC,IAAI,EAAC,QAAQ;kCAAC,QAE1C;sBAAS;kCACT,KAAC5B,MAAM;wBAACS,OAAO,EAAE,IAAMJ,sBAAsB,EAAE;kCAAE,QAAM;sBAAS;;cAClD;;MACX,CACP;AACJ,CAAC,AAAC;AAEF,eAAeF,iBAAiB,CAAC"}

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

@@ -1,10 +1,10 @@
 /// <reference types="react" />
 import { PanelDefinition } from '@perses-dev/core';
 import { CardProps } from '@mui/material';
+import { LayoutItem } from '../../context';
 export interface PanelProps extends CardProps {
     definition: PanelDefinition;
-    groupIndex: number;
-    itemIndex: number;
+    panelGroupItemId: LayoutItem;
 }
 /**
  * Renders a PanelDefinition's content inside of a Card.

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,EAGL,SAAS,EAOV,MAAM,eAAe,CAAC;AAQvB,MAAM,WAAW,UAAW,SAAQ,SAAS;IAC3C,UAAU,EAAE,eAAe,CAAC;IAC5B,UAAU,EAAE,MAAM,CAAC;IACnB,SAAS,EAAE,MAAM,CAAC;CACnB;AAED;;GAEG;AACH,wBAAgB,KAAK,CAAC,KAAK,EAAE,UAAU,eAwItC"}
+{"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,EAGL,SAAS,EAOV,MAAM,eAAe,CAAC;AAKvB,OAAO,EAAe,UAAU,EAAmB,MAAM,eAAe,CAAC;AAGzE,MAAM,WAAW,UAAW,SAAQ,SAAS;IAC3C,UAAU,EAAE,eAAe,CAAC;IAC5B,gBAAgB,EAAE,UAAU,CAAC;CAC9B;AAED;;GAEG;AACH,wBAAgB,KAAK,CAAC,KAAK,EAAE,UAAU,eAgItC"}

package/dist/components/Panel/Panel.js

@@ -20,12 +20,12 @@ import InformationOutlineIcon from 'mdi-material-ui/InformationOutline';
 import PencilIcon from 'mdi-material-ui/Pencil';
 import DeleteIcon from 'mdi-material-ui/DeleteOutline';
 import DragIcon from 'mdi-material-ui/DragVertical';
-import { usePanels, useEditMode } from '../../context';
+import { useEditMode, usePanelActions } from '../../context';
 import { PanelContent } from './PanelContent';
 /**
  * Renders a PanelDefinition's content inside of a Card.
  */ export function Panel(props) {
-    const { definition , groupIndex , itemIndex , ...others } = props;
+    const { definition , panelGroupItemId , ...others } = props;
     const [contentElement, setContentElement] = useState(null);
     const [isHovered, setIsHovered] = useState(false);
     const { width , height  } = useResizeObserver({
@@ -49,13 +49,7 @@ import { PanelContent } from './PanelContent';
     // TODO: adjust padding for small panels, consistent way to determine isLargePanel here and in StatChart
     const panelPadding = 1.5;
     const { isEditMode  } = useEditMode();
-    const { editPanel , openDeletePanelDialog  } = usePanels();
-    const handleEditButtonClick = ()=>{
-        editPanel({
-            groupIndex,
-            itemIndex
-        });
-    };
+    const { openEditPanel , openDeletePanelDialog  } = usePanelActions(panelGroupItemId);
     return /*#__PURE__*/ _jsxs(Card, {
         ref: ref,
         sx: {
@@ -115,16 +109,13 @@ import { PanelContent } from './PanelContent';
                                         /*#__PURE__*/ _jsx(IconButton, {
                                             "aria-label": "edit panel",
                                             size: "small",
-                                            onClick: handleEditButtonClick,
+                                            onClick: openEditPanel,
                                             children: /*#__PURE__*/ _jsx(PencilIcon, {})
                                         }),
                                         /*#__PURE__*/ _jsx(IconButton, {
                                             "aria-label": "delete panel",
                                             size: "small",
-                                            onClick: ()=>openDeletePanelDialog({
-                                                    groupIndex,
-                                                    itemIndex
-                                                }),
+                                            onClick: openDeletePanelDialog,
                                             children: /*#__PURE__*/ _jsx(DeleteIcon, {})
                                         }),
                                         /*#__PURE__*/ _jsx(IconButton, {