@perses-dev/dashboards 0.11.0 → 0.12.0

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, 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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"}
+{"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 { useState } from 'react';\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 { DashboardSpec } from '@perses-dev/core';\nimport { useDashboardActions, useDashboardSpec, 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, save } = useDashboardActions();\n  const isLaptopSize = useMediaQuery(useTheme().breakpoints.up('sm'));\n  const [originalSpec, setOriginalSpec] = useState<DashboardSpec | undefined>(undefined);\n  const { spec, resetSpec } = useDashboardSpec();\n\n  const onEditButtonClick = () => {\n    setOriginalSpec(spec);\n    setEditMode(true);\n  };\n\n  const onCancelButtonClick = () => {\n    // Reset to the original spec and exit edit mode\n    if (originalSpec) {\n      resetSpec(originalSpec);\n    }\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":["useState","Typography","Stack","Button","Box","useTheme","useMediaQuery","PencilIcon","AddPanelGroupIcon","AddPanelIcon","ErrorBoundary","ErrorAlert","useDashboardActions","useDashboardSpec","useEditMode","TemplateVariableList","TimeRangeControls","DashboardToolbar","props","dashboardName","isEditMode","setEditMode","openAddPanelGroup","openAddPanel","save","isLaptopSize","breakpoints","up","originalSpec","setOriginalSpec","undefined","spec","resetSpec","onEditButtonClick","onCancelButtonClick","onSave","spacing","sx","backgroundColor","theme","palette","primary","light","padding","display","variant","direction","marginLeft","onClick","width","alignItems","FallbackComponent","startIcon","paddingY"],"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,QAAQ,QAAQ,OAAO,CAAC;AACjC,SAASC,UAAU,EAAEC,KAAK,EAAEC,MAAM,EAAEC,GAAG,EAAEC,QAAQ,EAAEC,aAAa,QAAQ,eAAe,CAAC;AACxF,OAAOC,UAAU,MAAM,+BAA+B,CAAC;AACvD,OAAOC,iBAAiB,MAAM,gCAAgC,CAAC;AAC/D,OAAOC,YAAY,MAAM,qCAAqC,CAAC;AAC/D,SAASC,aAAa,EAAEC,UAAU,QAAQ,wBAAwB,CAAC;AAEnE,SAASC,mBAAmB,EAAEC,gBAAgB,EAAEC,WAAW,QAAQ,YAAY,CAAC;AAChF,SAASC,oBAAoB,EAAEC,iBAAiB,QAAQ,eAAe,CAAC;AAMxE,OAAO,MAAMC,gBAAgB,GAAG,CAACC,KAA4B,GAAK;IAChE,MAAM,EAAEC,aAAa,CAAA,EAAE,GAAGD,KAAK,AAAC;IAEhC,MAAM,EAAEE,UAAU,CAAA,EAAEC,WAAW,CAAA,EAAE,GAAGP,WAAW,EAAE,AAAC;IAClD,MAAM,EAAEQ,iBAAiB,CAAA,EAAEC,YAAY,CAAA,EAAEC,IAAI,CAAA,EAAE,GAAGZ,mBAAmB,EAAE,AAAC;IACxE,MAAMa,YAAY,GAAGnB,aAAa,CAACD,QAAQ,EAAE,CAACqB,WAAW,CAACC,EAAE,CAAC,IAAI,CAAC,CAAC,AAAC;IACpE,MAAM,CAACC,YAAY,EAAEC,eAAe,CAAC,GAAG7B,QAAQ,CAA4B8B,SAAS,CAAC,AAAC;IACvF,MAAM,EAAEC,IAAI,CAAA,EAAEC,SAAS,CAAA,EAAE,GAAGnB,gBAAgB,EAAE,AAAC;IAE/C,MAAMoB,iBAAiB,GAAG,IAAM;QAC9BJ,eAAe,CAACE,IAAI,CAAC,CAAC;QACtBV,WAAW,CAAC,IAAI,CAAC,CAAC;IACpB,CAAC,AAAC;IAEF,MAAMa,mBAAmB,GAAG,IAAM;QAChC,gDAAgD;QAChD,IAAIN,YAAY,EAAE;YAChBI,SAAS,CAACJ,YAAY,CAAC,CAAC;QAC1B,CAAC;QACDP,WAAW,CAAC,KAAK,CAAC,CAAC;IACrB,CAAC,AAAC;IAEF,MAAMc,MAAM,GAAG,IAAM;QACnBX,IAAI,EAAE,CAAC;QACPH,WAAW,CAAC,KAAK,CAAC,CAAC;IACrB,CAAC,AAAC;IAEF,qBACE;kBACGD,UAAU,iBACT,MAAClB,KAAK;YAACkC,OAAO,EAAE,CAAC;;8BACf,KAAChC,GAAG;oBAACiC,EAAE,EAAE;wBAAEC,eAAe,EAAE,CAACC,KAAK,GAAKA,KAAK,CAACC,OAAO,CAACC,OAAO,CAACC,KAAK,GAAG,IAAI;qBAAE;8BACzE,cAAA,MAACtC,GAAG;wBAACuC,OAAO,EAAE,CAAC;wBAAEC,OAAO,EAAC,MAAM;;0CAC7B,MAAC3C,UAAU;gCAAC4C,OAAO,EAAC,IAAI;;oCAAC,OAAK;oCAAC1B,aAAa;;8BAAc;0CAC1D,MAACjB,KAAK;gCAAC4C,SAAS,EAAC,KAAK;gCAACV,OAAO,EAAE,CAAC;gCAAEC,EAAE,EAAE;oCAAEU,UAAU,EAAE,MAAM;iCAAE;;kDAC3D,KAAC5C,MAAM;wCAAC0C,OAAO,EAAC,WAAW;wCAACG,OAAO,EAAEb,MAAM;kDAAE,MAE7C;sCAAS;kDACT,KAAChC,MAAM;wCAAC0C,OAAO,EAAC,UAAU;wCAACG,OAAO,EAAEd,mBAAmB;kDAAE,QAEzD;sCAAS;;8BACH;;sBACJ;kBACF;8BACN,MAAC9B,GAAG;oBACFiC,EAAE,EAAE;wBACFO,OAAO,EAAE,MAAM;wBACfK,KAAK,EAAE,MAAM;wBACbC,UAAU,EAAE,YAAY;wBACxBP,OAAO,EAAE,CAACJ,KAAK,GAAKA,KAAK,CAACH,OAAO,CAAC,CAAC,CAAC;qBACrC;;sCAED,KAAC1B,aAAa;4BAACyC,iBAAiB,EAAExC,UAAU;sCAC1C,cAAA,KAACI,oBAAoB,KAAG;0BACV;sCAChB,MAACb,KAAK;4BAAC4C,SAAS,EAAE,KAAK;4BAAEV,OAAO,EAAE,CAAC;4BAAEC,EAAE,EAAE;gCAAEU,UAAU,EAAE,MAAM;6BAAE;;8CAC7D,KAAC5C,MAAM;oCAACiD,SAAS,gBAAE,KAAC5C,iBAAiB,KAAG;oCAAEwC,OAAO,EAAE1B,iBAAiB;8CAAE,iBAEtE;kCAAS;8CACT,KAACnB,MAAM;oCAACiD,SAAS,gBAAE,KAAC3C,YAAY,KAAG;oCAAEuC,OAAO,EAAEzB,YAAY;8CAAE,WAE5D;kCAAS;8CACT,KAACP,iBAAiB,KAAG;;0BACf;;kBACJ;;UACA,iBAER,MAACd,KAAK;YAACkC,OAAO,EAAE,CAAC;YAAEO,OAAO,EAAE,CAAC;;8BAC3B,MAACvC,GAAG;oBAACiC,EAAE,EAAE;wBAAEO,OAAO,EAAE,MAAM;wBAAEK,KAAK,EAAE,MAAM;qBAAE;;sCACzC,KAAChD,UAAU;4BAAC4C,OAAO,EAAC,IAAI;sCAAE1B,aAAa;0BAAc;sCACrD,MAACjB,KAAK;4BAAC4C,SAAS,EAAC,KAAK;4BAACV,OAAO,EAAE,CAAC;4BAAEC,EAAE,EAAE;gCAAEU,UAAU,EAAE,MAAM;6BAAE;;8CAC3D,KAAC/B,iBAAiB,KAAG;gCACpBS,YAAY,kBACX,KAACtB,MAAM;oCACL0C,OAAO,EAAC,UAAU;oCAClBO,SAAS,gBAAE,KAAC7C,UAAU,KAAG;oCACzByC,OAAO,EAAEf,iBAAiB;oCAC1BI,EAAE,EAAE;wCAAEU,UAAU,EAAE,MAAM;qCAAE;8CAC3B,MAED;kCAAS,AACV;;0BACK;;kBACJ;8BACN,KAAC3C,GAAG;oBAACiD,QAAQ,EAAE,CAAC;8BACd,cAAA,KAAC3C,aAAa;wBAACyC,iBAAiB,EAAExC,UAAU;kCAC1C,cAAA,KAACI,oBAAoB,KAAG;sBACV;kBACZ;;UACA,AACT;MACA,CACH;AACJ,CAAC,CAAC"}

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

@@ -1,7 +1,7 @@
 /// <reference types="react" />
-import { LayoutItem } from '../../context';
+import { PanelGroupItemId } from '../../context';
 export interface GridItemContentProps {
-    panelGroupItemId: LayoutItem;
+    panelGroupItemId: PanelGroupItemId;
 }
 /**
  * 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,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"}
+{"version":3,"file":"GridItemContent.d.ts","sourceRoot":"","sources":["../../../src/components/GridLayout/GridItemContent.tsx"],"names":[],"mappings":";AAaA,OAAO,EAAE,gBAAgB,EAAY,MAAM,eAAe,CAAC;AAG3D,MAAM,WAAW,oBAAoB;IACnC,gBAAgB,EAAE,gBAAgB,CAAC;CACpC;AAED;;GAEG;AACH,wBAAgB,eAAe,CAAC,KAAK,EAAE,oBAAoB,eAI1D"}

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 { 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"}
+{"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 { PanelGroupItemId, usePanel } from '../../context';\nimport { Panel } from '../Panel/Panel';\n\nexport interface GridItemContentProps {\n  panelGroupItemId: PanelGroupItemId;\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,SAA2BA,QAAQ,QAAQ,eAAe,CAAC;AAC3D,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.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;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"}
+{"version":3,"file":"GridLayout.d.ts","sourceRoot":"","sources":["../../../src/components/GridLayout/GridLayout.tsx"],"names":[],"mappings":";AAcA,OAAO,EAAO,QAAQ,EAAoC,MAAM,eAAe,CAAC;AAGhF,OAAO,EAAoD,YAAY,EAAE,MAAM,eAAe,CAAC;AAM/F,MAAM,WAAW,eAAgB,SAAQ,QAAQ;IAC/C,YAAY,EAAE,YAAY,CAAC;CAC5B;AAED;;GAEG;AACH,wBAAgB,UAAU,CAAC,KAAK,EAAE,eAAe,eAkDhD"}

package/dist/components/GridLayout/GridLayout.js

@@ -13,10 +13,10 @@
 import { jsx as _jsx, jsxs as _jsxs, Fragment as _Fragment } from "react/jsx-runtime";
 import { useState } from 'react';
 import { Responsive, WidthProvider } from 'react-grid-layout';
-import { Box, Collapse, GlobalStyles } from '@mui/material';
+import { Box, Collapse, GlobalStyles, useTheme } from '@mui/material';
 import { ErrorAlert, ErrorBoundary } from '@perses-dev/components';
 import { styles } from '../../css/styles';
-import { useEditMode, usePanelGroup } from '../../context';
+import { useEditMode, usePanelGroup, usePanelGroupActions } from '../../context';
 import { GridTitle } from './GridTitle';
 import { GridItemContent } from './GridItemContent';
 const ResponsiveGridLayout = WidthProvider(Responsive);
@@ -24,7 +24,9 @@ const ResponsiveGridLayout = WidthProvider(Responsive);
  * Layout component that arranges children in a Grid based on the definition.
  */ export function GridLayout(props) {
     const { panelGroupId , ...others } = props;
+    const theme = useTheme();
     const groupDefinition = usePanelGroup(panelGroupId);
+    const { updatePanelGroupLayouts  } = usePanelGroupActions(panelGroupId);
     var ref;
     const [isOpen, setIsOpen] = useState((ref = !groupDefinition.isCollapsed) !== null && ref !== void 0 ? ref : true);
     const { isEditMode  } = useEditMode();
@@ -56,17 +58,11 @@ const ResponsiveGridLayout = WidthProvider(Responsive);
                         children: /*#__PURE__*/ _jsx(ResponsiveGridLayout, {
                             className: "layout",
                             breakpoints: {
-                                lg: 1200,
-                                md: 996,
-                                sm: 768,
-                                xs: 480,
+                                sm: theme.breakpoints.values.sm,
                                 xxs: 0
                             },
                             cols: {
-                                lg: 24,
-                                md: 24,
                                 sm: 24,
-                                xs: 24,
                                 xxs: 2
                             },
                             rowHeight: 30,
@@ -76,23 +72,25 @@ const ResponsiveGridLayout = WidthProvider(Responsive);
                             ],
                             isDraggable: isEditMode,
                             isResizable: isEditMode,
-                            children: groupDefinition.items.map(({ x , y , width , height  }, itemIndex)=>/*#__PURE__*/ _jsx("div", {
-                                    "data-grid": {
-                                        x,
-                                        y,
-                                        w: width,
-                                        h: height
-                                    },
+                            containerPadding: [
+                                0,
+                                10
+                            ],
+                            layouts: {
+                                sm: groupDefinition.itemLayouts
+                            },
+                            onLayoutChange: updatePanelGroupLayouts,
+                            children: groupDefinition.itemLayouts.map(({ i  })=>/*#__PURE__*/ _jsx("div", {
                                     children: /*#__PURE__*/ _jsx(ErrorBoundary, {
                                         FallbackComponent: ErrorAlert,
                                         children: /*#__PURE__*/ _jsx(GridItemContent, {
                                             panelGroupItemId: {
                                                 panelGroupId,
-                                                itemIndex
+                                                panelGroupItemLayoutId: i
                                             }
                                         })
                                     })
-                                }, itemIndex))
+                                }, i))
                         })
                     })
                 ]

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, 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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"}
+{"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, useTheme } from '@mui/material';\nimport { ErrorAlert, ErrorBoundary } from '@perses-dev/components';\nimport { styles } from '../../css/styles';\nimport { useEditMode, usePanelGroup, usePanelGroupActions, 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 theme = useTheme();\n  const groupDefinition = usePanelGroup(panelGroupId);\n  const { updatePanelGroupLayouts } = usePanelGroupActions(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={{ sm: theme.breakpoints.values.sm, xxs: 0 }}\n            cols={{ sm: 24, xxs: 2 }}\n            rowHeight={30}\n            draggableHandle={'.drag-handle'}\n            resizeHandles={['se']}\n            isDraggable={isEditMode}\n            isResizable={isEditMode}\n            containerPadding={[0, 10]}\n            layouts={{ sm: groupDefinition.itemLayouts }}\n            onLayoutChange={updatePanelGroupLayouts}\n          >\n            {groupDefinition.itemLayouts.map(({ i }) => (\n              <div key={i}>\n                <ErrorBoundary FallbackComponent={ErrorAlert}>\n                  <GridItemContent panelGroupItemId={{ panelGroupId, panelGroupItemLayoutId: i }} />\n                </ErrorBoundary>\n              </div>\n            ))}\n          </ResponsiveGridLayout>\n        </Collapse>\n      </Box>\n    </>\n  );\n}\n"],"names":["useState","Responsive","WidthProvider","Box","Collapse","GlobalStyles","useTheme","ErrorAlert","ErrorBoundary","styles","useEditMode","usePanelGroup","usePanelGroupActions","GridTitle","GridItemContent","ResponsiveGridLayout","GridLayout","props","panelGroupId","others","theme","groupDefinition","updatePanelGroupLayouts","isOpen","setIsOpen","isCollapsed","isEditMode","component","sx","marginTop","spacing","title","undefined","collapse","onToggleOpen","current","in","unmountOnExit","className","breakpoints","sm","values","xxs","cols","rowHeight","draggableHandle","resizeHandles","isDraggable","isResizable","containerPadding","layouts","itemLayouts","onLayoutChange","map","i","div","FallbackComponent","panelGroupItemId","panelGroupItemLayoutId"],"mappings":"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"}

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

@@ -1,5 +1,4 @@
 /// <reference types="react" />
-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,oDAAoD,CAAC;AAEvF,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":";AAkBA,QAAA,MAAM,iBAAiB,mBAoBtB,CAAC;AA+BF,eAAe,iBAAiB,CAAC"}

package/dist/components/Panel/DeletePanelDialog.js

@@ -39,13 +39,11 @@ const DeletePanelDialog = ()=>{
     });
 };
 const DeletePanelForm = ({ deletePanelDialog  })=>{
-    const { deletePanels , closeDeletePanelDialog  } = useDeletePanelDialog();
+    const { deletePanel , closeDeletePanelDialog  } = useDeletePanelDialog();
     const handleDelete = (e)=>{
         e.preventDefault();
         const { panelGroupItemId  } = deletePanelDialog;
-        deletePanels([
-            panelGroupItemId
-        ]);
+        deletePanel(panelGroupItemId);
         closeDeletePanelDialog();
     };
     return /*#__PURE__*/ _jsxs("form", {

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 { 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"}
+{"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, DeletePanelDialogState } from '../../context';\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: DeletePanelDialogState;\n}\n\nconst DeletePanelForm = ({ deletePanelDialog }: DeletePanelFormProps) => {\n  const { deletePanel, closeDeletePanelDialog } = useDeletePanelDialog();\n\n  const handleDelete = (e: FormEvent) => {\n    e.preventDefault();\n    const { panelGroupItemId } = deletePanelDialog;\n    deletePanel(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","deletePanel","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,QAAgC,eAAe,CAAC;AAE7E,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,WAAW,CAAA,EAAEZ,sBAAsB,CAAA,EAAE,GAAGH,oBAAoB,EAAE,AAAC;IAEvE,MAAMgB,YAAY,GAAG,CAACC,CAAY,GAAK;QACrCA,CAAC,CAACC,cAAc,EAAE,CAAC;QACnB,MAAM,EAAEC,gBAAgB,CAAA,EAAE,GAAGjB,iBAAiB,AAAC;QAC/Ca,WAAW,CAACI,gBAAgB,CAAC,CAAC;QAC9BhB,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';
+import { PanelGroupItemId } from '../../context';
 export interface PanelProps extends CardProps {
     definition: PanelDefinition;
-    panelGroupItemId: LayoutItem;
+    panelGroupItemId: PanelGroupItemId;
 }
 /**
  * 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;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"}
+{"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,gBAAgB,EAAmB,MAAM,eAAe,CAAC;AAG/E,MAAM,WAAW,UAAW,SAAQ,SAAS;IAC3C,UAAU,EAAE,eAAe,CAAC;IAC5B,gBAAgB,EAAE,gBAAgB,CAAC;CACpC;AAED;;GAEG;AACH,wBAAgB,KAAK,CAAC,KAAK,EAAE,UAAU,eAyHtC"}

package/dist/components/Panel/Panel.js

@@ -17,7 +17,7 @@ import { useInView } from 'react-intersection-observer';
 import { ErrorBoundary, ErrorAlert, InfoTooltip, TooltipPlacement } from '@perses-dev/components';
 import { Box, Card, CardHeader, CardContent, Typography, IconButton as MuiIconButton, Stack, styled } from '@mui/material';
 import InformationOutlineIcon from 'mdi-material-ui/InformationOutline';
-import PencilIcon from 'mdi-material-ui/Pencil';
+import PencilIcon from 'mdi-material-ui/PencilOutline';
 import DeleteIcon from 'mdi-material-ui/DeleteOutline';
 import DragIcon from 'mdi-material-ui/DragVertical';
 import { useEditMode, usePanelActions } from '../../context';
@@ -69,13 +69,11 @@ import { PanelContent } from './PanelContent';
                     sx: {
                         display: 'flex',
                         alignItems: 'center',
-                        minHeight: '24px'
+                        minHeight: '32px'
                     },
                     children: [
                         /*#__PURE__*/ _jsx(Typography, {
-                            component: "h2",
-                            variant: "body2",
-                            fontWeight: (theme)=>theme.typography.fontWeightMedium,
+                            variant: "subtitle1",
                             whiteSpace: "nowrap",
                             overflow: "hidden",
                             textOverflow: "ellipsis",
@@ -95,9 +93,9 @@ import { PanelContent } from './PanelContent';
                                     children: /*#__PURE__*/ _jsx(InformationOutlineIcon, {
                                         "aria-describedby": "info-tooltip",
                                         "aria-hidden": false,
-                                        fontSize: "small",
                                         sx: {
-                                            cursor: 'pointer'
+                                            cursor: 'pointer',
+                                            color: (theme)=>theme.palette.grey[700]
                                         }
                                     })
                                 }),
@@ -136,7 +134,8 @@ import { PanelContent } from './PanelContent';
                 }),
                 sx: {
                     display: 'block',
-                    padding: (theme)=>theme.spacing(1, panelPadding),
+                    paddingX: (theme)=>theme.spacing(panelPadding),
+                    paddingY: '4px',
                     borderBottom: (theme)=>`solid 1px ${theme.palette.divider}`
                 }
             }),

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

@@ -1 +1 @@
-{"version":3,"sources":["../../../src/components/Panel/Panel.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, useMemo } from 'react';\nimport useResizeObserver from 'use-resize-observer';\nimport { useInView } from 'react-intersection-observer';\nimport { ErrorBoundary, ErrorAlert, InfoTooltip, TooltipPlacement } from '@perses-dev/components';\nimport { PanelDefinition } from '@perses-dev/core';\nimport {\n  Box,\n  Card,\n  CardProps,\n  CardHeader,\n  CardContent,\n  Typography,\n  IconButton as MuiIconButton,\n  Stack,\n  styled,\n} from '@mui/material';\nimport InformationOutlineIcon from 'mdi-material-ui/InformationOutline';\nimport PencilIcon from 'mdi-material-ui/Pencil';\nimport DeleteIcon from 'mdi-material-ui/DeleteOutline';\nimport DragIcon from 'mdi-material-ui/DragVertical';\nimport { useEditMode, LayoutItem, usePanelActions } from '../../context';\nimport { PanelContent } from './PanelContent';\n\nexport interface PanelProps extends CardProps {\n  definition: PanelDefinition;\n  panelGroupItemId: LayoutItem;\n}\n\n/**\n * Renders a PanelDefinition's content inside of a Card.\n */\nexport function Panel(props: PanelProps) {\n  const { definition, panelGroupItemId, ...others } = props;\n\n  const [contentElement, setContentElement] = useState<HTMLDivElement | null>(null);\n  const [isHovered, setIsHovered] = useState(false);\n\n  const { width, height } = useResizeObserver({ ref: contentElement });\n\n  const contentDimensions = useMemo(() => {\n    if (width === undefined || height === undefined) return undefined;\n    return { width, height };\n  }, [width, height]);\n\n  const { ref, inView } = useInView({\n    threshold: 0.3,\n    initialInView: false,\n    triggerOnce: true,\n  });\n\n  // TODO: adjust padding for small panels, consistent way to determine isLargePanel here and in StatChart\n  const panelPadding = 1.5;\n\n  const { isEditMode } = useEditMode();\n\n  const { openEditPanel, openDeletePanelDialog } = usePanelActions(panelGroupItemId);\n\n  return (\n    <Card\n      ref={ref}\n      sx={{\n        ...others.sx,\n        width: '100%',\n        height: '100%',\n        display: 'flex',\n        flexFlow: 'column nowrap',\n      }}\n      variant=\"outlined\"\n      {...others}\n      onMouseEnter={() => setIsHovered(true)}\n      onMouseLeave={() => setIsHovered(false)}\n    >\n      <CardHeader\n        title={\n          <Box\n            sx={{\n              display: 'flex',\n              alignItems: 'center',\n              minHeight: '24px',\n            }}\n          >\n            <Typography\n              component=\"h2\"\n              variant=\"body2\"\n              fontWeight={(theme) => theme.typography.fontWeightMedium}\n              whiteSpace=\"nowrap\"\n              overflow=\"hidden\"\n              textOverflow=\"ellipsis\"\n            >\n              {definition.spec.display.name}\n            </Typography>\n            <Box\n              sx={{\n                display: 'flex',\n                alignItems: 'center',\n                marginLeft: 'auto',\n              }}\n            >\n              {!isEditMode && isHovered && definition.spec.display.description && (\n                <InfoTooltip\n                  id=\"info-tooltip\"\n                  description={definition.spec.display.description}\n                  placement={TooltipPlacement.Bottom}\n                >\n                  <InformationOutlineIcon\n                    aria-describedby=\"info-tooltip\"\n                    aria-hidden={false}\n                    fontSize=\"small\"\n                    sx={{ cursor: 'pointer' }}\n                  />\n                </InfoTooltip>\n              )}\n              {isEditMode && isHovered && (\n                <Stack direction=\"row\" alignItems=\"center\" spacing={0.5}>\n                  <IconButton aria-label=\"edit panel\" size=\"small\" onClick={openEditPanel}>\n                    <PencilIcon />\n                  </IconButton>\n                  <IconButton aria-label=\"delete panel\" size=\"small\" onClick={openDeletePanelDialog}>\n                    <DeleteIcon />\n                  </IconButton>\n                  <IconButton aria-label=\"drag handle\" size=\"small\">\n                    <DragIcon className=\"drag-handle\" sx={{ cursor: 'grab' }} />\n                  </IconButton>\n                </Stack>\n              )}\n            </Box>\n          </Box>\n        }\n        sx={{\n          display: 'block',\n          padding: (theme) => theme.spacing(1, panelPadding),\n          borderBottom: (theme) => `solid 1px ${theme.palette.divider}`,\n        }}\n      />\n      <CardContent\n        sx={{\n          position: 'relative',\n          overflow: 'hidden',\n          flexGrow: 1,\n          padding: (theme) => theme.spacing(panelPadding),\n          // Override MUI default style for last-child\n          ':last-child': {\n            padding: (theme) => theme.spacing(panelPadding),\n          },\n        }}\n        ref={setContentElement}\n      >\n        <ErrorBoundary FallbackComponent={ErrorAlert}>\n          {inView === true && (\n            <PanelContent\n              panelPluginKind={definition.spec.plugin.kind}\n              spec={definition.spec.plugin.spec}\n              contentDimensions={contentDimensions}\n            />\n          )}\n        </ErrorBoundary>\n      </CardContent>\n    </Card>\n  );\n}\n\nconst IconButton = styled(MuiIconButton)(({ theme }) => ({\n  borderRadius: theme.shape.borderRadius,\n  padding: '4px',\n}));\n"],"names":["useState","useMemo","useResizeObserver","useInView","ErrorBoundary","ErrorAlert","InfoTooltip","TooltipPlacement","Box","Card","CardHeader","CardContent","Typography","IconButton","MuiIconButton","Stack","styled","InformationOutlineIcon","PencilIcon","DeleteIcon","DragIcon","useEditMode","usePanelActions","PanelContent","Panel","props","definition","panelGroupItemId","others","contentElement","setContentElement","isHovered","setIsHovered","width","height","ref","contentDimensions","undefined","inView","threshold","initialInView","triggerOnce","panelPadding","isEditMode","openEditPanel","openDeletePanelDialog","sx","display","flexFlow","variant","onMouseEnter","onMouseLeave","title","alignItems","minHeight","component","fontWeight","theme","typography","fontWeightMedium","whiteSpace","overflow","textOverflow","spec","name","marginLeft","description","id","placement","Bottom","aria-describedby","aria-hidden","fontSize","cursor","direction","spacing","aria-label","size","onClick","className","padding","borderBottom","palette","divider","position","flexGrow","FallbackComponent","panelPluginKind","plugin","kind","borderRadius","shape"],"mappings":"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"}
+{"version":3,"sources":["../../../src/components/Panel/Panel.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, useMemo } from 'react';\nimport useResizeObserver from 'use-resize-observer';\nimport { useInView } from 'react-intersection-observer';\nimport { ErrorBoundary, ErrorAlert, InfoTooltip, TooltipPlacement } from '@perses-dev/components';\nimport { PanelDefinition } from '@perses-dev/core';\nimport {\n  Box,\n  Card,\n  CardProps,\n  CardHeader,\n  CardContent,\n  Typography,\n  IconButton as MuiIconButton,\n  Stack,\n  styled,\n} from '@mui/material';\nimport InformationOutlineIcon from 'mdi-material-ui/InformationOutline';\nimport PencilIcon from 'mdi-material-ui/PencilOutline';\nimport DeleteIcon from 'mdi-material-ui/DeleteOutline';\nimport DragIcon from 'mdi-material-ui/DragVertical';\nimport { useEditMode, PanelGroupItemId, usePanelActions } from '../../context';\nimport { PanelContent } from './PanelContent';\n\nexport interface PanelProps extends CardProps {\n  definition: PanelDefinition;\n  panelGroupItemId: PanelGroupItemId;\n}\n\n/**\n * Renders a PanelDefinition's content inside of a Card.\n */\nexport function Panel(props: PanelProps) {\n  const { definition, panelGroupItemId, ...others } = props;\n\n  const [contentElement, setContentElement] = useState<HTMLDivElement | null>(null);\n  const [isHovered, setIsHovered] = useState(false);\n\n  const { width, height } = useResizeObserver({ ref: contentElement });\n\n  const contentDimensions = useMemo(() => {\n    if (width === undefined || height === undefined) return undefined;\n    return { width, height };\n  }, [width, height]);\n\n  const { ref, inView } = useInView({\n    threshold: 0.3,\n    initialInView: false,\n    triggerOnce: true,\n  });\n\n  // TODO: adjust padding for small panels, consistent way to determine isLargePanel here and in StatChart\n  const panelPadding = 1.5;\n\n  const { isEditMode } = useEditMode();\n\n  const { openEditPanel, openDeletePanelDialog } = usePanelActions(panelGroupItemId);\n\n  return (\n    <Card\n      ref={ref}\n      sx={{\n        ...others.sx,\n        width: '100%',\n        height: '100%',\n        display: 'flex',\n        flexFlow: 'column nowrap',\n      }}\n      variant=\"outlined\"\n      {...others}\n      onMouseEnter={() => setIsHovered(true)}\n      onMouseLeave={() => setIsHovered(false)}\n    >\n      <CardHeader\n        title={\n          <Box\n            sx={{\n              display: 'flex',\n              alignItems: 'center',\n              minHeight: '32px',\n            }}\n          >\n            <Typography variant=\"subtitle1\" whiteSpace=\"nowrap\" overflow=\"hidden\" textOverflow=\"ellipsis\">\n              {definition.spec.display.name}\n            </Typography>\n            <Box\n              sx={{\n                display: 'flex',\n                alignItems: 'center',\n                marginLeft: 'auto',\n              }}\n            >\n              {!isEditMode && isHovered && definition.spec.display.description && (\n                <InfoTooltip\n                  id=\"info-tooltip\"\n                  description={definition.spec.display.description}\n                  placement={TooltipPlacement.Bottom}\n                >\n                  <InformationOutlineIcon\n                    aria-describedby=\"info-tooltip\"\n                    aria-hidden={false}\n                    sx={{ cursor: 'pointer', color: (theme) => theme.palette.grey[700] }}\n                  />\n                </InfoTooltip>\n              )}\n              {isEditMode && isHovered && (\n                <Stack direction=\"row\" alignItems=\"center\" spacing={0.5}>\n                  <IconButton aria-label=\"edit panel\" size=\"small\" onClick={openEditPanel}>\n                    <PencilIcon />\n                  </IconButton>\n                  <IconButton aria-label=\"delete panel\" size=\"small\" onClick={openDeletePanelDialog}>\n                    <DeleteIcon />\n                  </IconButton>\n                  <IconButton aria-label=\"drag handle\" size=\"small\">\n                    <DragIcon className=\"drag-handle\" sx={{ cursor: 'grab' }} />\n                  </IconButton>\n                </Stack>\n              )}\n            </Box>\n          </Box>\n        }\n        sx={{\n          display: 'block',\n          paddingX: (theme) => theme.spacing(panelPadding),\n          paddingY: '4px',\n          borderBottom: (theme) => `solid 1px ${theme.palette.divider}`,\n        }}\n      />\n      <CardContent\n        sx={{\n          position: 'relative',\n          overflow: 'hidden',\n          flexGrow: 1,\n          padding: (theme) => theme.spacing(panelPadding),\n          // Override MUI default style for last-child\n          ':last-child': {\n            padding: (theme) => theme.spacing(panelPadding),\n          },\n        }}\n        ref={setContentElement}\n      >\n        <ErrorBoundary FallbackComponent={ErrorAlert}>\n          {inView === true && (\n            <PanelContent\n              panelPluginKind={definition.spec.plugin.kind}\n              spec={definition.spec.plugin.spec}\n              contentDimensions={contentDimensions}\n            />\n          )}\n        </ErrorBoundary>\n      </CardContent>\n    </Card>\n  );\n}\n\nconst IconButton = styled(MuiIconButton)(({ theme }) => ({\n  borderRadius: theme.shape.borderRadius,\n  padding: '4px',\n}));\n"],"names":["useState","useMemo","useResizeObserver","useInView","ErrorBoundary","ErrorAlert","InfoTooltip","TooltipPlacement","Box","Card","CardHeader","CardContent","Typography","IconButton","MuiIconButton","Stack","styled","InformationOutlineIcon","PencilIcon","DeleteIcon","DragIcon","useEditMode","usePanelActions","PanelContent","Panel","props","definition","panelGroupItemId","others","contentElement","setContentElement","isHovered","setIsHovered","width","height","ref","contentDimensions","undefined","inView","threshold","initialInView","triggerOnce","panelPadding","isEditMode","openEditPanel","openDeletePanelDialog","sx","display","flexFlow","variant","onMouseEnter","onMouseLeave","title","alignItems","minHeight","whiteSpace","overflow","textOverflow","spec","name","marginLeft","description","id","placement","Bottom","aria-describedby","aria-hidden","cursor","color","theme","palette","grey","direction","spacing","aria-label","size","onClick","className","paddingX","paddingY","borderBottom","divider","position","flexGrow","padding","FallbackComponent","panelPluginKind","plugin","kind","borderRadius","shape"],"mappings":"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"}

package/dist/components/Panel/Panel.test.js

@@ -34,9 +34,10 @@ describe('Panel', ()=>{
                     }
                 }
             },
+            // TODO: This is coupled to ID generation which is not good and the tests will probably fail
             panelGroupItemId: {
                 panelGroupId: 0,
-                itemIndex: 0
+                panelGroupItemLayoutId: ''
             }
         };
     };

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

@@ -1 +1 @@
-{"version":3,"sources":["../../../src/components/Panel/Panel.test.tsx"],"sourcesContent":["// Copyright 2022 The Perses Authors\n// Licensed under the Apache License, Version 2.0 (the \"License\");\n// you may not use this file except in compliance with the License.\n// You may obtain a copy of the License at\n//\n// http://www.apache.org/licenses/LICENSE-2.0\n//\n// Unless required by applicable law or agreed to in writing, software\n// distributed under the License is distributed on an \"AS IS\" BASIS,\n// WITHOUT WARRANTIES OR CONDITIONS OF ANY KIND, either express or implied.\n// See the License for the specific language governing permissions and\n// limitations under the License.\n\nimport { PluginRegistry } from '@perses-dev/plugin-system';\nimport { screen } from '@testing-library/react';\nimport userEvent from '@testing-library/user-event';\nimport { renderWithContext, mockPluginRegistryProps, FAKE_PANEL_PLUGIN, getTestDashboard } from '../../test';\nimport { DashboardProvider } from '../../context';\nimport { Panel, PanelProps } from './Panel';\n\ndescribe('Panel', () => {\n  // Helper to create panel props for rendering tests\n  const createPanelProps = (): PanelProps => {\n    return {\n      definition: {\n        kind: 'Panel',\n        spec: {\n          display: {\n            name: 'Fake Panel',\n            description: 'This is a fake panel',\n          },\n          plugin: {\n            kind: 'FakePanel',\n            spec: {},\n          },\n        },\n      },\n      panelGroupItemId: { panelGroupId: 0, itemIndex: 0 },\n    };\n  };\n\n  // Helper to render the panel with some context set\n  const renderPanel = (isEditMode = false) => {\n    const { addMockPlugin, pluginRegistryProps } = mockPluginRegistryProps();\n    addMockPlugin('Panel', 'FakePanel', FAKE_PANEL_PLUGIN);\n\n    renderWithContext(\n      <PluginRegistry {...pluginRegistryProps}>\n        <DashboardProvider initialState={{ dashboardSpec: getTestDashboard().spec, isEditMode }}>\n          <Panel {...createPanelProps()} />\n        </DashboardProvider>\n      </PluginRegistry>\n    );\n  };\n\n  it('should render name and info icon', async () => {\n    renderPanel();\n    await screen.findByText('Fake Panel');\n    screen.queryByLabelText('info-tooltip');\n  });\n\n  it('should render edit icons when in edit mode', () => {\n    renderPanel(true);\n    const panelTitle = screen.getByText('Fake Panel');\n    userEvent.hover(panelTitle);\n    screen.getByLabelText('drag handle');\n    screen.getByLabelText('edit panel');\n    screen.getByLabelText('delete panel');\n  });\n});\n"],"names":["PluginRegistry","screen","userEvent","renderWithContext","mockPluginRegistryProps","FAKE_PANEL_PLUGIN","getTestDashboard","DashboardProvider","Panel","describe","createPanelProps","definition","kind","spec","display","name","description","plugin","panelGroupItemId","panelGroupId","itemIndex","renderPanel","isEditMode","addMockPlugin","pluginRegistryProps","initialState","dashboardSpec","it","findByText","queryByLabelText","panelTitle","getByText","hover","getByLabelText"],"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,cAAc,QAAQ,2BAA2B,CAAC;AAC3D,SAASC,MAAM,QAAQ,wBAAwB,CAAC;AAChD,OAAOC,SAAS,MAAM,6BAA6B,CAAC;AACpD,SAASC,iBAAiB,EAAEC,uBAAuB,EAAEC,iBAAiB,EAAEC,gBAAgB,QAAQ,YAAY,CAAC;AAC7G,SAASC,iBAAiB,QAAQ,eAAe,CAAC;AAClD,SAASC,KAAK,QAAoB,SAAS,CAAC;AAE5CC,QAAQ,CAAC,OAAO,EAAE,IAAM;IACtB,mDAAmD;IACnD,MAAMC,gBAAgB,GAAG,IAAkB;QACzC,OAAO;YACLC,UAAU,EAAE;gBACVC,IAAI,EAAE,OAAO;gBACbC,IAAI,EAAE;oBACJC,OAAO,EAAE;wBACPC,IAAI,EAAE,YAAY;wBAClBC,WAAW,EAAE,sBAAsB;qBACpC;oBACDC,MAAM,EAAE;wBACNL,IAAI,EAAE,WAAW;wBACjBC,IAAI,EAAE,EAAE;qBACT;iBACF;aACF;YACDK,gBAAgB,EAAE;gBAAEC,YAAY,EAAE,CAAC;gBAAEC,SAAS,EAAE,CAAC;aAAE;SACpD,CAAC;IACJ,CAAC,AAAC;IAEF,mDAAmD;IACnD,MAAMC,WAAW,GAAG,CAACC,UAAU,GAAG,KAAK,GAAK;QAC1C,MAAM,EAAEC,aAAa,CAAA,EAAEC,mBAAmB,CAAA,EAAE,GAAGpB,uBAAuB,EAAE,AAAC;QACzEmB,aAAa,CAAC,OAAO,EAAE,WAAW,EAAElB,iBAAiB,CAAC,CAAC;QAEvDF,iBAAiB,eACf,KAACH,cAAc;YAAE,GAAGwB,mBAAmB;sBACrC,cAAA,KAACjB,iBAAiB;gBAACkB,YAAY,EAAE;oBAAEC,aAAa,EAAEpB,gBAAgB,EAAE,CAACO,IAAI;oBAAES,UAAU;iBAAE;0BACrF,cAAA,KAACd,KAAK;oBAAE,GAAGE,gBAAgB,EAAE;kBAAI;cACf;UACL,CAClB,CAAC;IACJ,CAAC,AAAC;IAEFiB,EAAE,CAAC,kCAAkC,EAAE,UAAY;QACjDN,WAAW,EAAE,CAAC;QACd,MAAMpB,MAAM,CAAC2B,UAAU,CAAC,YAAY,CAAC,CAAC;QACtC3B,MAAM,CAAC4B,gBAAgB,CAAC,cAAc,CAAC,CAAC;IAC1C,CAAC,CAAC,CAAC;IAEHF,EAAE,CAAC,4CAA4C,EAAE,IAAM;QACrDN,WAAW,CAAC,IAAI,CAAC,CAAC;QAClB,MAAMS,UAAU,GAAG7B,MAAM,CAAC8B,SAAS,CAAC,YAAY,CAAC,AAAC;QAClD7B,SAAS,CAAC8B,KAAK,CAACF,UAAU,CAAC,CAAC;QAC5B7B,MAAM,CAACgC,cAAc,CAAC,aAAa,CAAC,CAAC;QACrChC,MAAM,CAACgC,cAAc,CAAC,YAAY,CAAC,CAAC;QACpChC,MAAM,CAACgC,cAAc,CAAC,cAAc,CAAC,CAAC;IACxC,CAAC,CAAC,CAAC;AACL,CAAC,CAAC,CAAC"}
+{"version":3,"sources":["../../../src/components/Panel/Panel.test.tsx"],"sourcesContent":["// Copyright 2022 The Perses Authors\n// Licensed under the Apache License, Version 2.0 (the \"License\");\n// you may not use this file except in compliance with the License.\n// You may obtain a copy of the License at\n//\n// http://www.apache.org/licenses/LICENSE-2.0\n//\n// Unless required by applicable law or agreed to in writing, software\n// distributed under the License is distributed on an \"AS IS\" BASIS,\n// WITHOUT WARRANTIES OR CONDITIONS OF ANY KIND, either express or implied.\n// See the License for the specific language governing permissions and\n// limitations under the License.\n\nimport { PluginRegistry } from '@perses-dev/plugin-system';\nimport { screen } from '@testing-library/react';\nimport userEvent from '@testing-library/user-event';\nimport { renderWithContext, mockPluginRegistryProps, FAKE_PANEL_PLUGIN, getTestDashboard } from '../../test';\nimport { DashboardProvider } from '../../context';\nimport { Panel, PanelProps } from './Panel';\n\ndescribe('Panel', () => {\n  // Helper to create panel props for rendering tests\n  const createPanelProps = (): PanelProps => {\n    return {\n      definition: {\n        kind: 'Panel',\n        spec: {\n          display: {\n            name: 'Fake Panel',\n            description: 'This is a fake panel',\n          },\n          plugin: {\n            kind: 'FakePanel',\n            spec: {},\n          },\n        },\n      },\n      // TODO: This is coupled to ID generation which is not good and the tests will probably fail\n      panelGroupItemId: { panelGroupId: 0, panelGroupItemLayoutId: '' },\n    };\n  };\n\n  // Helper to render the panel with some context set\n  const renderPanel = (isEditMode = false) => {\n    const { addMockPlugin, pluginRegistryProps } = mockPluginRegistryProps();\n    addMockPlugin('Panel', 'FakePanel', FAKE_PANEL_PLUGIN);\n\n    renderWithContext(\n      <PluginRegistry {...pluginRegistryProps}>\n        <DashboardProvider initialState={{ dashboardSpec: getTestDashboard().spec, isEditMode }}>\n          <Panel {...createPanelProps()} />\n        </DashboardProvider>\n      </PluginRegistry>\n    );\n  };\n\n  it('should render name and info icon', async () => {\n    renderPanel();\n    await screen.findByText('Fake Panel');\n    screen.queryByLabelText('info-tooltip');\n  });\n\n  it('should render edit icons when in edit mode', () => {\n    renderPanel(true);\n    const panelTitle = screen.getByText('Fake Panel');\n    userEvent.hover(panelTitle);\n    screen.getByLabelText('drag handle');\n    screen.getByLabelText('edit panel');\n    screen.getByLabelText('delete panel');\n  });\n});\n"],"names":["PluginRegistry","screen","userEvent","renderWithContext","mockPluginRegistryProps","FAKE_PANEL_PLUGIN","getTestDashboard","DashboardProvider","Panel","describe","createPanelProps","definition","kind","spec","display","name","description","plugin","panelGroupItemId","panelGroupId","panelGroupItemLayoutId","renderPanel","isEditMode","addMockPlugin","pluginRegistryProps","initialState","dashboardSpec","it","findByText","queryByLabelText","panelTitle","getByText","hover","getByLabelText"],"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,cAAc,QAAQ,2BAA2B,CAAC;AAC3D,SAASC,MAAM,QAAQ,wBAAwB,CAAC;AAChD,OAAOC,SAAS,MAAM,6BAA6B,CAAC;AACpD,SAASC,iBAAiB,EAAEC,uBAAuB,EAAEC,iBAAiB,EAAEC,gBAAgB,QAAQ,YAAY,CAAC;AAC7G,SAASC,iBAAiB,QAAQ,eAAe,CAAC;AAClD,SAASC,KAAK,QAAoB,SAAS,CAAC;AAE5CC,QAAQ,CAAC,OAAO,EAAE,IAAM;IACtB,mDAAmD;IACnD,MAAMC,gBAAgB,GAAG,IAAkB;QACzC,OAAO;YACLC,UAAU,EAAE;gBACVC,IAAI,EAAE,OAAO;gBACbC,IAAI,EAAE;oBACJC,OAAO,EAAE;wBACPC,IAAI,EAAE,YAAY;wBAClBC,WAAW,EAAE,sBAAsB;qBACpC;oBACDC,MAAM,EAAE;wBACNL,IAAI,EAAE,WAAW;wBACjBC,IAAI,EAAE,EAAE;qBACT;iBACF;aACF;YACD,4FAA4F;YAC5FK,gBAAgB,EAAE;gBAAEC,YAAY,EAAE,CAAC;gBAAEC,sBAAsB,EAAE,EAAE;aAAE;SAClE,CAAC;IACJ,CAAC,AAAC;IAEF,mDAAmD;IACnD,MAAMC,WAAW,GAAG,CAACC,UAAU,GAAG,KAAK,GAAK;QAC1C,MAAM,EAAEC,aAAa,CAAA,EAAEC,mBAAmB,CAAA,EAAE,GAAGpB,uBAAuB,EAAE,AAAC;QACzEmB,aAAa,CAAC,OAAO,EAAE,WAAW,EAAElB,iBAAiB,CAAC,CAAC;QAEvDF,iBAAiB,eACf,KAACH,cAAc;YAAE,GAAGwB,mBAAmB;sBACrC,cAAA,KAACjB,iBAAiB;gBAACkB,YAAY,EAAE;oBAAEC,aAAa,EAAEpB,gBAAgB,EAAE,CAACO,IAAI;oBAAES,UAAU;iBAAE;0BACrF,cAAA,KAACd,KAAK;oBAAE,GAAGE,gBAAgB,EAAE;kBAAI;cACf;UACL,CAClB,CAAC;IACJ,CAAC,AAAC;IAEFiB,EAAE,CAAC,kCAAkC,EAAE,UAAY;QACjDN,WAAW,EAAE,CAAC;QACd,MAAMpB,MAAM,CAAC2B,UAAU,CAAC,YAAY,CAAC,CAAC;QACtC3B,MAAM,CAAC4B,gBAAgB,CAAC,cAAc,CAAC,CAAC;IAC1C,CAAC,CAAC,CAAC;IAEHF,EAAE,CAAC,4CAA4C,EAAE,IAAM;QACrDN,WAAW,CAAC,IAAI,CAAC,CAAC;QAClB,MAAMS,UAAU,GAAG7B,MAAM,CAAC8B,SAAS,CAAC,YAAY,CAAC,AAAC;QAClD7B,SAAS,CAAC8B,KAAK,CAACF,UAAU,CAAC,CAAC;QAC5B7B,MAAM,CAACgC,cAAc,CAAC,aAAa,CAAC,CAAC;QACrChC,MAAM,CAACgC,cAAc,CAAC,YAAY,CAAC,CAAC;QACpChC,MAAM,CAACgC,cAAc,CAAC,cAAc,CAAC,CAAC;IACxC,CAAC,CAAC,CAAC;AACL,CAAC,CAAC,CAAC"}

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

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

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

@@ -1 +1 @@
-{"version":3,"file":"index.d.ts","sourceRoot":"","sources":["../../../src/components/Panel/index.ts"],"names":[],"mappings":"AAaA,cAAc,SAAS,CAAC"}
+{"version":3,"file":"index.d.ts","sourceRoot":"","sources":["../../../src/components/Panel/index.ts"],"names":[],"mappings":"AAaA,cAAc,SAAS,CAAC;AACxB,cAAc,qBAAqB,CAAC"}

package/dist/components/Panel/index.js

@@ -11,5 +11,6 @@
 // See the License for the specific language governing permissions and
 // limitations under the License.
 export * from './Panel';
+export * from './DeletePanelDialog';
 
 //# sourceMappingURL=index.js.map

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

@@ -1 +1 @@
-{"version":3,"sources":["../../../src/components/Panel/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 './Panel';\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,SAAS,CAAC"}
+{"version":3,"sources":["../../../src/components/Panel/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 './Panel';\nexport * from './DeletePanelDialog';\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,SAAS,CAAC;AACxB,cAAc,qBAAqB,CAAC"}

package/dist/components/PanelDrawer/PanelDrawer.test.js

@@ -44,8 +44,8 @@ describe('Panel Drawer', ()=>{
     };
     it('should add new panel', async ()=>{
         const storeApi = renderPanelDrawer();
-        // Open the drawer for a new panel (i.e. no panel key)
-        act(()=>storeApi.getState().openAddPanel(0));
+        // Open the drawer for a new panel
+        act(()=>storeApi.getState().openAddPanel());
         const nameInput = await screen.findByLabelText(/Name/);
         userEvent.type(nameInput, 'New Panel');
         userEvent.click(screen.getByText('Add'));
@@ -70,9 +70,17 @@ describe('Panel Drawer', ()=>{
     it('should edit an existing panel', async ()=>{
         const storeApi = renderPanelDrawer();
         // Open the drawer for an existing panel
+        const group = Object.values(storeApi.getState().panelGroups).find((group)=>group.title === 'CPU Stats');
+        if (group === undefined) {
+            throw new Error('Test group not found');
+        }
+        const layout = Object.entries(group.itemPanelKeys).find(([, panelKey])=>panelKey === 'cpu');
+        if (layout === undefined) {
+            throw new Error('Test panel not found');
+        }
         act(()=>storeApi.getState().openEditPanel({
-                panelGroupId: 0,
-                itemIndex: 0
+                panelGroupId: group.id,
+                panelGroupItemLayoutId: layout[0]
             }));
         const nameInput = await screen.findByLabelText(/Name/);
         userEvent.clear(nameInput);

package/dist/components/PanelDrawer/PanelDrawer.test.js.map

@@ -1 +1 @@
-{"version":3,"sources":["../../../src/components/PanelDrawer/PanelDrawer.test.tsx"],"sourcesContent":["// Copyright 2022 The Perses Authors\n// Licensed under the Apache License, Version 2.0 (the \"License\");\n// you may not use this file except in compliance with the License.\n// You may obtain a copy of the License at\n//\n// http://www.apache.org/licenses/LICENSE-2.0\n//\n// Unless required by applicable law or agreed to in writing, software\n// distributed under the License is distributed on an \"AS IS\" BASIS,\n// WITHOUT WARRANTIES OR CONDITIONS OF ANY KIND, either express or implied.\n// See the License for the specific language governing permissions and\n// limitations under the License.\n\nimport { PluginRegistry } from '@perses-dev/plugin-system';\nimport { screen } from '@testing-library/react';\nimport userEvent from '@testing-library/user-event';\nimport { act } from 'react-dom/test-utils';\nimport {\n  createDashboardProviderSpy,\n  FAKE_PANEL_PLUGIN,\n  getTestDashboard,\n  mockPluginRegistryProps,\n  renderWithContext,\n} from '../../test';\nimport { DashboardProvider } from '../../context/DashboardProvider';\nimport { PanelDrawer } from './PanelDrawer';\n\ndescribe('Panel Drawer', () => {\n  const renderPanelDrawer = () => {\n    const { addMockPlugin, pluginRegistryProps } = mockPluginRegistryProps();\n    addMockPlugin('Panel', 'TimeSeriesChart', FAKE_PANEL_PLUGIN);\n\n    const { store, DashboardProviderSpy } = createDashboardProviderSpy();\n\n    renderWithContext(\n      <PluginRegistry {...pluginRegistryProps}>\n        <DashboardProvider initialState={{ dashboardSpec: getTestDashboard().spec, isEditMode: true }}>\n          <DashboardProviderSpy />\n          <PanelDrawer />\n        </DashboardProvider>\n      </PluginRegistry>\n    );\n\n    const { value: storeApi } = store;\n    if (storeApi === undefined) {\n      throw new Error('Expected dashboard store to be set after initial render');\n    }\n\n    return storeApi;\n  };\n\n  it('should add new panel', async () => {\n    const storeApi = renderPanelDrawer();\n\n    // Open the drawer for a new panel (i.e. no panel key)\n    act(() => storeApi.getState().openAddPanel(0));\n\n    const nameInput = await screen.findByLabelText(/Name/);\n    userEvent.type(nameInput, 'New Panel');\n    userEvent.click(screen.getByText('Add'));\n\n    // TODO: Assert drawer is closed?\n    const panels = storeApi.getState().panels;\n    expect(panels).toMatchObject({\n      // Should have the new panel in the store\n      NewPanel: {\n        kind: 'Panel',\n        spec: {\n          display: { name: 'New Panel' },\n          plugin: {\n            kind: '',\n            spec: {},\n          },\n        },\n      },\n    });\n  });\n\n  it('should edit an existing panel', async () => {\n    const storeApi = renderPanelDrawer();\n\n    // Open the drawer for an existing panel\n    act(() => storeApi.getState().openEditPanel({ panelGroupId: 0, itemIndex: 0 }));\n\n    const nameInput = await screen.findByLabelText(/Name/);\n    userEvent.clear(nameInput);\n    userEvent.type(nameInput, 'cpu usage');\n    userEvent.click(screen.getByText('Apply'));\n\n    const panels = storeApi.getState().panels;\n    expect(panels).toMatchObject({\n      cpu: {\n        kind: 'Panel',\n        spec: {\n          display: { name: 'cpu usage' },\n          plugin: {\n            kind: 'TimeSeriesChart',\n            spec: {},\n          },\n        },\n      },\n    });\n  });\n});\n"],"names":["PluginRegistry","screen","userEvent","act","createDashboardProviderSpy","FAKE_PANEL_PLUGIN","getTestDashboard","mockPluginRegistryProps","renderWithContext","DashboardProvider","PanelDrawer","describe","renderPanelDrawer","addMockPlugin","pluginRegistryProps","store","DashboardProviderSpy","initialState","dashboardSpec","spec","isEditMode","value","storeApi","undefined","Error","it","getState","openAddPanel","nameInput","findByLabelText","type","click","getByText","panels","expect","toMatchObject","NewPanel","kind","display","name","plugin","openEditPanel","panelGroupId","itemIndex","clear","cpu"],"mappings":"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"}
+{"version":3,"sources":["../../../src/components/PanelDrawer/PanelDrawer.test.tsx"],"sourcesContent":["// Copyright 2022 The Perses Authors\n// Licensed under the Apache License, Version 2.0 (the \"License\");\n// you may not use this file except in compliance with the License.\n// You may obtain a copy of the License at\n//\n// http://www.apache.org/licenses/LICENSE-2.0\n//\n// Unless required by applicable law or agreed to in writing, software\n// distributed under the License is distributed on an \"AS IS\" BASIS,\n// WITHOUT WARRANTIES OR CONDITIONS OF ANY KIND, either express or implied.\n// See the License for the specific language governing permissions and\n// limitations under the License.\n\nimport { PluginRegistry } from '@perses-dev/plugin-system';\nimport { screen } from '@testing-library/react';\nimport userEvent from '@testing-library/user-event';\nimport { act } from 'react-dom/test-utils';\nimport {\n  createDashboardProviderSpy,\n  FAKE_PANEL_PLUGIN,\n  getTestDashboard,\n  mockPluginRegistryProps,\n  renderWithContext,\n} from '../../test';\nimport { DashboardProvider } from '../../context/DashboardProvider';\nimport { PanelDrawer } from './PanelDrawer';\n\ndescribe('Panel Drawer', () => {\n  const renderPanelDrawer = () => {\n    const { addMockPlugin, pluginRegistryProps } = mockPluginRegistryProps();\n    addMockPlugin('Panel', 'TimeSeriesChart', FAKE_PANEL_PLUGIN);\n\n    const { store, DashboardProviderSpy } = createDashboardProviderSpy();\n\n    renderWithContext(\n      <PluginRegistry {...pluginRegistryProps}>\n        <DashboardProvider initialState={{ dashboardSpec: getTestDashboard().spec, isEditMode: true }}>\n          <DashboardProviderSpy />\n          <PanelDrawer />\n        </DashboardProvider>\n      </PluginRegistry>\n    );\n\n    const { value: storeApi } = store;\n    if (storeApi === undefined) {\n      throw new Error('Expected dashboard store to be set after initial render');\n    }\n\n    return storeApi;\n  };\n\n  it('should add new panel', async () => {\n    const storeApi = renderPanelDrawer();\n\n    // Open the drawer for a new panel\n    act(() => storeApi.getState().openAddPanel());\n\n    const nameInput = await screen.findByLabelText(/Name/);\n    userEvent.type(nameInput, 'New Panel');\n    userEvent.click(screen.getByText('Add'));\n\n    // TODO: Assert drawer is closed?\n    const panels = storeApi.getState().panels;\n    expect(panels).toMatchObject({\n      // Should have the new panel in the store\n      NewPanel: {\n        kind: 'Panel',\n        spec: {\n          display: { name: 'New Panel' },\n          plugin: {\n            kind: '',\n            spec: {},\n          },\n        },\n      },\n    });\n  });\n\n  it('should edit an existing panel', async () => {\n    const storeApi = renderPanelDrawer();\n\n    // Open the drawer for an existing panel\n    const group = Object.values(storeApi.getState().panelGroups).find((group) => group.title === 'CPU Stats');\n    if (group === undefined) {\n      throw new Error('Test group not found');\n    }\n    const layout = Object.entries(group.itemPanelKeys).find(([, panelKey]) => panelKey === 'cpu');\n    if (layout === undefined) {\n      throw new Error('Test panel not found');\n    }\n    act(() => storeApi.getState().openEditPanel({ panelGroupId: group.id, panelGroupItemLayoutId: layout[0] }));\n\n    const nameInput = await screen.findByLabelText(/Name/);\n    userEvent.clear(nameInput);\n    userEvent.type(nameInput, 'cpu usage');\n    userEvent.click(screen.getByText('Apply'));\n\n    const panels = storeApi.getState().panels;\n    expect(panels).toMatchObject({\n      cpu: {\n        kind: 'Panel',\n        spec: {\n          display: { name: 'cpu usage' },\n          plugin: {\n            kind: 'TimeSeriesChart',\n            spec: {},\n          },\n        },\n      },\n    });\n  });\n});\n"],"names":["PluginRegistry","screen","userEvent","act","createDashboardProviderSpy","FAKE_PANEL_PLUGIN","getTestDashboard","mockPluginRegistryProps","renderWithContext","DashboardProvider","PanelDrawer","describe","renderPanelDrawer","addMockPlugin","pluginRegistryProps","store","DashboardProviderSpy","initialState","dashboardSpec","spec","isEditMode","value","storeApi","undefined","Error","it","getState","openAddPanel","nameInput","findByLabelText","type","click","getByText","panels","expect","toMatchObject","NewPanel","kind","display","name","plugin","group","Object","values","panelGroups","find","title","layout","entries","itemPanelKeys","panelKey","openEditPanel","panelGroupId","id","panelGroupItemLayoutId","clear","cpu"],"mappings":"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"}

package/dist/components/PanelDrawer/PanelPreview.js

@@ -28,10 +28,10 @@ export function PanelPreview({ name , description , kind , spec , groupId  }) {
                 }
             }
         },
-        // TODO: what should itemIndex be?
+        // TODO: this shouldn't be necessary for preview
         panelGroupItemId: {
             panelGroupId: groupId,
-            itemIndex: 0
+            panelGroupItemLayoutId: ''
         }
     };
     if (!kind) {

package/dist/components/PanelDrawer/PanelPreview.js.map

@@ -1 +1 @@
-{"version":3,"sources":["../../../src/components/PanelDrawer/PanelPreview.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 } from '@mui/material';\nimport { PanelEditorValues } from '../../context/DashboardProvider/panel-editor-slice';\nimport { Panel, PanelProps } from '../Panel';\n\nexport function PanelPreview({ name, description, kind, spec, groupId }: PanelEditorValues) {\n  const previewValues: PanelProps = {\n    definition: {\n      kind: 'Panel',\n      spec: {\n        display: {\n          name,\n          description,\n        },\n        plugin: {\n          kind,\n          spec,\n        },\n      },\n    },\n    // TODO: what should itemIndex be?\n    panelGroupItemId: { panelGroupId: groupId, itemIndex: 0 },\n  };\n\n  if (!kind) {\n    return null;\n  }\n\n  return (\n    <Box height={300}>\n      <Panel {...previewValues} />\n    </Box>\n  );\n}\n"],"names":["Box","Panel","PanelPreview","name","description","kind","spec","groupId","previewValues","definition","display","plugin","panelGroupItemId","panelGroupId","itemIndex","height"],"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,QAAQ,eAAe,CAAC;AAEpC,SAASC,KAAK,QAAoB,UAAU,CAAC;AAE7C,OAAO,SAASC,YAAY,CAAC,EAAEC,IAAI,CAAA,EAAEC,WAAW,CAAA,EAAEC,IAAI,CAAA,EAAEC,IAAI,CAAA,EAAEC,OAAO,CAAA,EAAqB,EAAE;IAC1F,MAAMC,aAAa,GAAe;QAChCC,UAAU,EAAE;YACVJ,IAAI,EAAE,OAAO;YACbC,IAAI,EAAE;gBACJI,OAAO,EAAE;oBACPP,IAAI;oBACJC,WAAW;iBACZ;gBACDO,MAAM,EAAE;oBACNN,IAAI;oBACJC,IAAI;iBACL;aACF;SACF;QACD,kCAAkC;QAClCM,gBAAgB,EAAE;YAAEC,YAAY,EAAEN,OAAO;YAAEO,SAAS,EAAE,CAAC;SAAE;KAC1D,AAAC;IAEF,IAAI,CAACT,IAAI,EAAE;QACT,OAAO,IAAI,CAAC;IACd,CAAC;IAED,qBACE,KAACL,GAAG;QAACe,MAAM,EAAE,GAAG;kBACd,cAAA,KAACd,KAAK;YAAE,GAAGO,aAAa;UAAI;MACxB,CACN;AACJ,CAAC"}
+{"version":3,"sources":["../../../src/components/PanelDrawer/PanelPreview.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 } from '@mui/material';\nimport { PanelEditorValues } from '../../context/DashboardProvider/panel-editor-slice';\nimport { Panel, PanelProps } from '../Panel';\n\nexport function PanelPreview({ name, description, kind, spec, groupId }: PanelEditorValues) {\n  const previewValues: PanelProps = {\n    definition: {\n      kind: 'Panel',\n      spec: {\n        display: {\n          name,\n          description,\n        },\n        plugin: {\n          kind,\n          spec,\n        },\n      },\n    },\n    // TODO: this shouldn't be necessary for preview\n    panelGroupItemId: { panelGroupId: groupId, panelGroupItemLayoutId: '' },\n  };\n\n  if (!kind) {\n    return null;\n  }\n\n  return (\n    <Box height={300}>\n      <Panel {...previewValues} />\n    </Box>\n  );\n}\n"],"names":["Box","Panel","PanelPreview","name","description","kind","spec","groupId","previewValues","definition","display","plugin","panelGroupItemId","panelGroupId","panelGroupItemLayoutId","height"],"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,QAAQ,eAAe,CAAC;AAEpC,SAASC,KAAK,QAAoB,UAAU,CAAC;AAE7C,OAAO,SAASC,YAAY,CAAC,EAAEC,IAAI,CAAA,EAAEC,WAAW,CAAA,EAAEC,IAAI,CAAA,EAAEC,IAAI,CAAA,EAAEC,OAAO,CAAA,EAAqB,EAAE;IAC1F,MAAMC,aAAa,GAAe;QAChCC,UAAU,EAAE;YACVJ,IAAI,EAAE,OAAO;YACbC,IAAI,EAAE;gBACJI,OAAO,EAAE;oBACPP,IAAI;oBACJC,WAAW;iBACZ;gBACDO,MAAM,EAAE;oBACNN,IAAI;oBACJC,IAAI;iBACL;aACF;SACF;QACD,gDAAgD;QAChDM,gBAAgB,EAAE;YAAEC,YAAY,EAAEN,OAAO;YAAEO,sBAAsB,EAAE,EAAE;SAAE;KACxE,AAAC;IAEF,IAAI,CAACT,IAAI,EAAE;QACT,OAAO,IAAI,CAAC;IACd,CAAC;IAED,qBACE,KAACL,GAAG;QAACe,MAAM,EAAE,GAAG;kBACd,cAAA,KAACd,KAAK;YAAE,GAAGO,aAAa;UAAI;MACxB,CACN;AACJ,CAAC"}