@perses-dev/dashboards 0.38.0 → 0.40.0

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

@@ -1 +1 @@
-{"version":3,"sources":["../../../src/components/GridLayout/GridLayout.tsx"],"sourcesContent":["// Copyright 2023 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, Layouts, Layout } from 'react-grid-layout';\nimport { Collapse, useTheme } from '@mui/material';\nimport { ErrorAlert, ErrorBoundary } from '@perses-dev/components';\nimport { useEditMode, usePanelGroup, usePanelGroupActions, PanelGroupId } from '../../context';\nimport { GRID_LAYOUT_COLS, GRID_LAYOUT_SMALL_BREAKPOINT } from '../../constants';\nimport { GridTitle } from './GridTitle';\nimport { GridItemContent } from './GridItemContent';\nimport { GridContainer } from './GridContainer';\n\nconst DEFAULT_MARGIN = 10;\nconst ResponsiveGridLayout = WidthProvider(Responsive);\n\nexport interface GridLayoutProps {\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  const [gridColWidth, setGridColWidth] = useState(0);\n\n  const handleLayoutChange = (currentLayout: Layout[], allLayouts: Layouts) => {\n    // Using the value from `allLayouts` instead of `currentLayout` because of\n    // a bug in react-layout-grid where `currentLayout` does not adjust properly\n    // when going to a smaller breakpoint and then back to a larger breakpoint.\n    // https://github.com/react-grid-layout/react-grid-layout/issues/1663\n    const smallLayout = allLayouts[GRID_LAYOUT_SMALL_BREAKPOINT];\n    if (smallLayout) {\n      updatePanelGroupLayouts(smallLayout);\n    }\n  };\n\n  /**\n   * Calculate the column width so we can determine the width of each panel for suggested step ms\n   * https://github.com/react-grid-layout/react-grid-layout/blob/master/lib/calculateUtils.js#L14-L35\n   */\n  const handleWidthChange = (\n    containerWidth: number,\n    margin: [number, number],\n    cols: number,\n    containerPadding: [number, number]\n  ) => {\n    const marginX = margin[0];\n    const marginWidth = marginX * (cols - 1);\n    const containerPaddingWidth = containerPadding[0] * 2;\n    // exclude margin and padding from total width\n    setGridColWidth((containerWidth - marginWidth - containerPaddingWidth) / cols);\n  };\n\n  return (\n    <GridContainer>\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 appear={false} data-testid=\"panel-group-content\">\n        <ResponsiveGridLayout\n          className=\"layout\"\n          breakpoints={{ sm: theme.breakpoints.values.sm, xxs: 0 }}\n          cols={GRID_LAYOUT_COLS}\n          rowHeight={30}\n          draggableHandle={'.drag-handle'}\n          resizeHandles={['se']}\n          isDraggable={isEditMode}\n          isResizable={isEditMode}\n          margin={[DEFAULT_MARGIN, DEFAULT_MARGIN]}\n          containerPadding={[0, 10]}\n          layouts={{ [GRID_LAYOUT_SMALL_BREAKPOINT]: groupDefinition.itemLayouts }}\n          onLayoutChange={handleLayoutChange}\n          onWidthChange={handleWidthChange}\n        >\n          {groupDefinition.itemLayouts.map(({ i, w }) => (\n            <div key={i}>\n              <ErrorBoundary FallbackComponent={ErrorAlert}>\n                <GridItemContent\n                  panelGroupItemId={{ panelGroupId, panelGroupItemLayoutId: i }}\n                  width={calculateGridItemWidth(w, gridColWidth)}\n                />\n              </ErrorBoundary>\n            </div>\n          ))}\n        </ResponsiveGridLayout>\n      </Collapse>\n    </GridContainer>\n  );\n}\n\n/**\n * Calculates grid item width\n * @param w number of columns the grid item spans\n * @param colWidth the width of each column in px\n * @returns grid item's width in px\n * https://github.com/react-grid-layout/react-grid-layout/blob/master/lib/calculateUtils.js#L14-L35\n */\nconst calculateGridItemWidth = (w: number, colWidth: number) => {\n  // 0 * Infinity === NaN, which causes problems with resize contraints\n  if (!Number.isFinite(w)) return w;\n  return Math.round(colWidth * w + Math.max(0, w - 1) * DEFAULT_MARGIN);\n};\n"],"names":["useState","Responsive","WidthProvider","Collapse","useTheme","ErrorAlert","ErrorBoundary","useEditMode","usePanelGroup","usePanelGroupActions","GRID_LAYOUT_COLS","GRID_LAYOUT_SMALL_BREAKPOINT","GridTitle","GridItemContent","GridContainer","DEFAULT_MARGIN","ResponsiveGridLayout","GridLayout","props","panelGroupId","theme","groupDefinition","updatePanelGroupLayouts","isOpen","setIsOpen","isCollapsed","isEditMode","gridColWidth","setGridColWidth","handleLayoutChange","currentLayout","allLayouts","smallLayout","handleWidthChange","containerWidth","margin","cols","containerPadding","marginX","marginWidth","containerPaddingWidth","title","undefined","collapse","onToggleOpen","current","in","unmountOnExit","appear","data-testid","className","breakpoints","sm","values","xxs","rowHeight","draggableHandle","resizeHandles","isDraggable","isResizable","layouts","itemLayouts","onLayoutChange","onWidthChange","map","i","w","div","FallbackComponent","panelGroupItemId","panelGroupItemLayoutId","width","calculateGridItemWidth","colWidth","Number","isFinite","Math","round","max"],"mappings":"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"}
+{"version":3,"sources":["../../../src/components/GridLayout/GridLayout.tsx"],"sourcesContent":["// Copyright 2023 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, Layouts, Layout } from 'react-grid-layout';\nimport { Collapse, useTheme } from '@mui/material';\nimport { ErrorAlert, ErrorBoundary } from '@perses-dev/components';\nimport { useEditMode, usePanelGroup, usePanelGroupActions, PanelGroupId } from '../../context';\nimport { GRID_LAYOUT_COLS, GRID_LAYOUT_SMALL_BREAKPOINT } from '../../constants';\nimport { PanelOptions } from '../Panel';\nimport { GridTitle } from './GridTitle';\nimport { GridItemContent } from './GridItemContent';\nimport { GridContainer } from './GridContainer';\nconst DEFAULT_MARGIN = 10;\nconst ResponsiveGridLayout = WidthProvider(Responsive);\n\nexport interface GridLayoutProps {\n  panelGroupId: PanelGroupId;\n  panelOptions?: PanelOptions;\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  const [gridColWidth, setGridColWidth] = useState(0);\n\n  const handleLayoutChange = (currentLayout: Layout[], allLayouts: Layouts) => {\n    // Using the value from `allLayouts` instead of `currentLayout` because of\n    // a bug in react-layout-grid where `currentLayout` does not adjust properly\n    // when going to a smaller breakpoint and then back to a larger breakpoint.\n    // https://github.com/react-grid-layout/react-grid-layout/issues/1663\n    const smallLayout = allLayouts[GRID_LAYOUT_SMALL_BREAKPOINT];\n    if (smallLayout) {\n      updatePanelGroupLayouts(smallLayout);\n    }\n  };\n\n  /**\n   * Calculate the column width so we can determine the width of each panel for suggested step ms\n   * https://github.com/react-grid-layout/react-grid-layout/blob/master/lib/calculateUtils.js#L14-L35\n   */\n  const handleWidthChange = (\n    containerWidth: number,\n    margin: [number, number],\n    cols: number,\n    containerPadding: [number, number]\n  ) => {\n    const marginX = margin[0];\n    const marginWidth = marginX * (cols - 1);\n    const containerPaddingWidth = containerPadding[0] * 2;\n    // exclude margin and padding from total width\n    setGridColWidth((containerWidth - marginWidth - containerPaddingWidth) / cols);\n  };\n\n  return (\n    <GridContainer>\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 appear={false} data-testid=\"panel-group-content\">\n        <ResponsiveGridLayout\n          className=\"layout\"\n          breakpoints={{ sm: theme.breakpoints.values.sm, xxs: 0 }}\n          cols={GRID_LAYOUT_COLS}\n          rowHeight={30}\n          draggableHandle={'.drag-handle'}\n          resizeHandles={['se']}\n          isDraggable={isEditMode}\n          isResizable={isEditMode}\n          margin={[DEFAULT_MARGIN, DEFAULT_MARGIN]}\n          containerPadding={[0, 10]}\n          layouts={{ [GRID_LAYOUT_SMALL_BREAKPOINT]: groupDefinition.itemLayouts }}\n          onLayoutChange={handleLayoutChange}\n          onWidthChange={handleWidthChange}\n        >\n          {groupDefinition.itemLayouts.map(({ i, w }) => (\n            <div key={i}>\n              <ErrorBoundary FallbackComponent={ErrorAlert}>\n                <GridItemContent\n                  panelOptions={props.panelOptions}\n                  panelGroupItemId={{ panelGroupId, panelGroupItemLayoutId: i }}\n                  width={calculateGridItemWidth(w, gridColWidth)}\n                />\n              </ErrorBoundary>\n            </div>\n          ))}\n        </ResponsiveGridLayout>\n      </Collapse>\n    </GridContainer>\n  );\n}\n\n/**\n * Calculates grid item width\n * @param w number of columns the grid item spans\n * @param colWidth the width of each column in px\n * @returns grid item's width in px\n * https://github.com/react-grid-layout/react-grid-layout/blob/master/lib/calculateUtils.js#L14-L35\n */\nconst calculateGridItemWidth = (w: number, colWidth: number) => {\n  // 0 * Infinity === NaN, which causes problems with resize contraints\n  if (!Number.isFinite(w)) return w;\n  return Math.round(colWidth * w + Math.max(0, w - 1) * DEFAULT_MARGIN);\n};\n"],"names":["useState","Responsive","WidthProvider","Collapse","useTheme","ErrorAlert","ErrorBoundary","useEditMode","usePanelGroup","usePanelGroupActions","GRID_LAYOUT_COLS","GRID_LAYOUT_SMALL_BREAKPOINT","GridTitle","GridItemContent","GridContainer","DEFAULT_MARGIN","ResponsiveGridLayout","GridLayout","props","panelGroupId","theme","groupDefinition","updatePanelGroupLayouts","isOpen","setIsOpen","isCollapsed","isEditMode","gridColWidth","setGridColWidth","handleLayoutChange","currentLayout","allLayouts","smallLayout","handleWidthChange","containerWidth","margin","cols","containerPadding","marginX","marginWidth","containerPaddingWidth","title","undefined","collapse","onToggleOpen","current","in","unmountOnExit","appear","data-testid","className","breakpoints","sm","values","xxs","rowHeight","draggableHandle","resizeHandles","isDraggable","isResizable","layouts","itemLayouts","onLayoutChange","onWidthChange","map","i","w","div","FallbackComponent","panelOptions","panelGroupItemId","panelGroupItemLayoutId","width","calculateGridItemWidth","colWidth","Number","isFinite","Math","round","max"],"mappings":"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"}

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

@@ -1 +1 @@
-{"version":3,"sources":["../../../src/components/GridLayout/GridTitle.tsx"],"sourcesContent":["// Copyright 2023 The Perses Authors\n// Licensed under the Apache License, Version 2.0 (the \"License\");\n// you may not use this file except in compliance with the License.\n// You may obtain a copy of the License at\n//\n// http://www.apache.org/licenses/LICENSE-2.0\n//\n// Unless required by applicable law or agreed to in writing, software\n// distributed under the License is distributed on an \"AS IS\" BASIS,\n// WITHOUT WARRANTIES OR CONDITIONS OF ANY KIND, either express or implied.\n// See the License for the specific language governing permissions and\n// limitations under the License.\n\nimport { Box, IconButton, Stack, Typography } from '@mui/material';\nimport ExpandedIcon from 'mdi-material-ui/ChevronDown';\nimport CollapsedIcon from 'mdi-material-ui/ChevronRight';\nimport AddPanelIcon from 'mdi-material-ui/ChartBoxPlusOutline';\nimport PencilIcon from 'mdi-material-ui/PencilOutline';\nimport ArrowUpIcon from 'mdi-material-ui/ArrowUp';\nimport ArrowDownIcon from 'mdi-material-ui/ArrowDown';\nimport DeleteIcon from 'mdi-material-ui/DeleteOutline';\nimport { InfoTooltip } from '@perses-dev/components';\nimport { useReplaceVariablesInString } from '@perses-dev/plugin-system';\nimport { ARIA_LABEL_TEXT, TOOLTIP_TEXT } from '../../constants';\nimport { usePanelGroupActions, useEditMode, PanelGroupId, useDeletePanelGroupDialog } from '../../context';\n\nexport interface GridTitleProps {\n  panelGroupId: PanelGroupId;\n  title: string;\n  collapse?: {\n    isOpen: boolean;\n    onToggleOpen: () => void;\n  };\n}\n\n/**\n * Renders the title for a Grid section, optionally also supporting expanding\n * and collapsing\n */\nexport function GridTitle(props: GridTitleProps) {\n  const { panelGroupId, title: rawTitle, collapse } = props;\n\n  const title = useReplaceVariablesInString(rawTitle) as string;\n\n  const { openAddPanel, openEditPanelGroup, moveUp, moveDown } = usePanelGroupActions(panelGroupId);\n  const { openDeletePanelGroupDialog } = useDeletePanelGroupDialog();\n  const { isEditMode } = useEditMode();\n\n  const text = <Typography variant=\"h2\">{title}</Typography>;\n\n  return (\n    <Box\n      onClick={collapse?.onToggleOpen}\n      sx={{\n        display: 'flex',\n        justifyContent: 'start',\n        alignItems: 'center',\n        padding: (theme) => theme.spacing(1),\n        cursor: collapse ? 'pointer' : 'auto',\n        backgroundColor: ({ palette }) => palette.background.paper,\n      }}\n      data-testid=\"panel-group-header\"\n    >\n      {collapse ? (\n        <>\n          <IconButton sx={{ marginRight: 1 }} aria-label={`${collapse.isOpen ? 'collapse' : 'expand'} group ${title}`}>\n            {collapse.isOpen ? <ExpandedIcon /> : <CollapsedIcon />}\n          </IconButton>\n          {text}\n          {isEditMode && (\n            <Stack direction=\"row\" marginLeft=\"auto\">\n              <InfoTooltip description={TOOLTIP_TEXT.addPanelToGroup}>\n                <IconButton\n                  aria-label={ARIA_LABEL_TEXT.addPanelToGroup(title)}\n                  onClick={(e) => {\n                    // Don't trigger expand/collapse\n                    e.stopPropagation();\n                    openAddPanel();\n                  }}\n                >\n                  <AddPanelIcon />\n                </IconButton>\n              </InfoTooltip>\n              <InfoTooltip description={TOOLTIP_TEXT.editGroup}>\n                <IconButton\n                  aria-label={ARIA_LABEL_TEXT.editGroup(title)}\n                  onClick={(e) => {\n                    // Don't trigger expand/collapse\n                    e.stopPropagation();\n                    openEditPanelGroup();\n                  }}\n                >\n                  <PencilIcon />\n                </IconButton>\n              </InfoTooltip>\n              <InfoTooltip description={TOOLTIP_TEXT.deleteGroup}>\n                <IconButton\n                  aria-label={ARIA_LABEL_TEXT.deleteGroup(title)}\n                  onClick={(e) => {\n                    // Don't trigger expand/collapse\n                    e.stopPropagation();\n                    openDeletePanelGroupDialog(panelGroupId);\n                  }}\n                >\n                  <DeleteIcon />\n                </IconButton>\n              </InfoTooltip>\n              <InfoTooltip description={TOOLTIP_TEXT.moveGroupDown}>\n                <IconButton\n                  aria-label={ARIA_LABEL_TEXT.moveGroupDown(title)}\n                  disabled={moveDown === undefined}\n                  onClick={(e) => {\n                    // Don't trigger expand/collapse\n                    e.stopPropagation();\n                    moveDown && moveDown();\n                  }}\n                >\n                  <ArrowDownIcon />\n                </IconButton>\n              </InfoTooltip>\n              <InfoTooltip description={TOOLTIP_TEXT.moveGroupUp}>\n                <IconButton\n                  aria-label={ARIA_LABEL_TEXT.moveGroupUp(title)}\n                  disabled={moveUp === undefined}\n                  onClick={(e) => {\n                    // Don't trigger expand/collapse\n                    e.stopPropagation();\n                    moveUp && moveUp();\n                  }}\n                >\n                  <ArrowUpIcon />\n                </IconButton>\n              </InfoTooltip>\n            </Stack>\n          )}\n        </>\n      ) : (\n        // If we don't need expand/collapse, just render the title text\n        text\n      )}\n    </Box>\n  );\n}\n"],"names":["Box","IconButton","Stack","Typography","ExpandedIcon","CollapsedIcon","AddPanelIcon","PencilIcon","ArrowUpIcon","ArrowDownIcon","DeleteIcon","InfoTooltip","useReplaceVariablesInString","ARIA_LABEL_TEXT","TOOLTIP_TEXT","usePanelGroupActions","useEditMode","useDeletePanelGroupDialog","GridTitle","props","panelGroupId","title","rawTitle","collapse","openAddPanel","openEditPanelGroup","moveUp","moveDown","openDeletePanelGroupDialog","isEditMode","text","variant","onClick","onToggleOpen","sx","display","justifyContent","alignItems","padding","theme","spacing","cursor","backgroundColor","palette","background","paper","data-testid","marginRight","aria-label","isOpen","direction","marginLeft","description","addPanelToGroup","e","stopPropagation","editGroup","deleteGroup","moveGroupDown","disabled","undefined","moveGroupUp"],"mappings":"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"}
+{"version":3,"sources":["../../../src/components/GridLayout/GridTitle.tsx"],"sourcesContent":["// Copyright 2023 The Perses Authors\n// Licensed under the Apache License, Version 2.0 (the \"License\");\n// you may not use this file except in compliance with the License.\n// You may obtain a copy of the License at\n//\n// http://www.apache.org/licenses/LICENSE-2.0\n//\n// Unless required by applicable law or agreed to in writing, software\n// distributed under the License is distributed on an \"AS IS\" BASIS,\n// WITHOUT WARRANTIES OR CONDITIONS OF ANY KIND, either express or implied.\n// See the License for the specific language governing permissions and\n// limitations under the License.\n\nimport { Box, IconButton, Stack, Typography } from '@mui/material';\nimport ExpandedIcon from 'mdi-material-ui/ChevronDown';\nimport CollapsedIcon from 'mdi-material-ui/ChevronRight';\nimport AddPanelIcon from 'mdi-material-ui/ChartBoxPlusOutline';\nimport PencilIcon from 'mdi-material-ui/PencilOutline';\nimport ArrowUpIcon from 'mdi-material-ui/ArrowUp';\nimport ArrowDownIcon from 'mdi-material-ui/ArrowDown';\nimport DeleteIcon from 'mdi-material-ui/DeleteOutline';\nimport { InfoTooltip } from '@perses-dev/components';\nimport { useReplaceVariablesInString } from '@perses-dev/plugin-system';\nimport { ARIA_LABEL_TEXT, TOOLTIP_TEXT } from '../../constants';\nimport { usePanelGroupActions, useEditMode, PanelGroupId, useDeletePanelGroupDialog } from '../../context';\n\nexport interface GridTitleProps {\n  panelGroupId: PanelGroupId;\n  title: string;\n  collapse?: {\n    isOpen: boolean;\n    onToggleOpen: () => void;\n  };\n}\n\n/**\n * Renders the title for a Grid section, optionally also supporting expanding\n * and collapsing\n */\nexport function GridTitle(props: GridTitleProps) {\n  const { panelGroupId, title: rawTitle, collapse } = props;\n\n  const title = useReplaceVariablesInString(rawTitle) as string;\n\n  const { openAddPanel, openEditPanelGroup, moveUp, moveDown } = usePanelGroupActions(panelGroupId);\n  const { openDeletePanelGroupDialog } = useDeletePanelGroupDialog();\n  const { isEditMode } = useEditMode();\n\n  const text = <Typography variant=\"h2\">{title}</Typography>;\n\n  return (\n    <Box\n      onClick={collapse?.onToggleOpen}\n      sx={{\n        display: 'flex',\n        justifyContent: 'start',\n        alignItems: 'center',\n        padding: (theme) => theme.spacing(1),\n        cursor: collapse ? 'pointer' : 'auto',\n        backgroundColor: ({ palette }) => palette.background.paper,\n      }}\n      data-testid=\"panel-group-header\"\n    >\n      {collapse ? (\n        <>\n          <IconButton sx={{ marginRight: 1 }} aria-label={`${collapse.isOpen ? 'collapse' : 'expand'} group ${title}`}>\n            {collapse.isOpen ? <ExpandedIcon /> : <CollapsedIcon />}\n          </IconButton>\n          {text}\n          {isEditMode && (\n            <Stack direction=\"row\" marginLeft=\"auto\">\n              <InfoTooltip description={TOOLTIP_TEXT.addPanelToGroup}>\n                <IconButton\n                  aria-label={ARIA_LABEL_TEXT.addPanelToGroup(title)}\n                  onClick={(e) => {\n                    // Don't trigger expand/collapse\n                    e.stopPropagation();\n                    openAddPanel();\n                  }}\n                >\n                  <AddPanelIcon />\n                </IconButton>\n              </InfoTooltip>\n              <InfoTooltip description={TOOLTIP_TEXT.editGroup}>\n                <IconButton\n                  aria-label={ARIA_LABEL_TEXT.editGroup(title)}\n                  onClick={(e) => {\n                    // Don't trigger expand/collapse\n                    e.stopPropagation();\n                    openEditPanelGroup();\n                  }}\n                >\n                  <PencilIcon />\n                </IconButton>\n              </InfoTooltip>\n              <InfoTooltip description={TOOLTIP_TEXT.deleteGroup}>\n                <IconButton\n                  aria-label={ARIA_LABEL_TEXT.deleteGroup(title)}\n                  onClick={(e) => {\n                    // Don't trigger expand/collapse\n                    e.stopPropagation();\n                    openDeletePanelGroupDialog(panelGroupId);\n                  }}\n                >\n                  <DeleteIcon />\n                </IconButton>\n              </InfoTooltip>\n              <InfoTooltip description={TOOLTIP_TEXT.moveGroupDown}>\n                <IconButton\n                  aria-label={ARIA_LABEL_TEXT.moveGroupDown(title)}\n                  disabled={moveDown === undefined}\n                  onClick={(e) => {\n                    // Don't trigger expand/collapse\n                    e.stopPropagation();\n                    moveDown && moveDown();\n                  }}\n                >\n                  <ArrowDownIcon />\n                </IconButton>\n              </InfoTooltip>\n              <InfoTooltip description={TOOLTIP_TEXT.moveGroupUp}>\n                <IconButton\n                  aria-label={ARIA_LABEL_TEXT.moveGroupUp(title)}\n                  disabled={moveUp === undefined}\n                  onClick={(e) => {\n                    // Don't trigger expand/collapse\n                    e.stopPropagation();\n                    moveUp && moveUp();\n                  }}\n                >\n                  <ArrowUpIcon />\n                </IconButton>\n              </InfoTooltip>\n            </Stack>\n          )}\n        </>\n      ) : (\n        // If we don't need expand/collapse, just render the title text\n        text\n      )}\n    </Box>\n  );\n}\n"],"names":["Box","IconButton","Stack","Typography","ExpandedIcon","CollapsedIcon","AddPanelIcon","PencilIcon","ArrowUpIcon","ArrowDownIcon","DeleteIcon","InfoTooltip","useReplaceVariablesInString","ARIA_LABEL_TEXT","TOOLTIP_TEXT","usePanelGroupActions","useEditMode","useDeletePanelGroupDialog","GridTitle","props","panelGroupId","title","rawTitle","collapse","openAddPanel","openEditPanelGroup","moveUp","moveDown","openDeletePanelGroupDialog","isEditMode","text","variant","onClick","onToggleOpen","sx","display","justifyContent","alignItems","padding","theme","spacing","cursor","backgroundColor","palette","background","paper","data-testid","marginRight","aria-label","isOpen","direction","marginLeft","description","addPanelToGroup","e","stopPropagation","editGroup","deleteGroup","moveGroupDown","disabled","undefined","moveGroupUp"],"mappings":"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"}

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

@@ -1 +1 @@
-{"version":3,"sources":["../../../src/components/GridLayout/index.ts"],"sourcesContent":["// Copyright 2023 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 './GridContainer';\nexport * from './GridItemContent';\nexport * from './GridLayout';\nexport * from './GridTitle';\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,iBAAiB,CAAC;AAChC,cAAc,mBAAmB,CAAC;AAClC,cAAc,cAAc,CAAC;AAC7B,cAAc,aAAa,CAAC"}
+{"version":3,"sources":["../../../src/components/GridLayout/index.ts"],"sourcesContent":["// Copyright 2023 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 './GridContainer';\nexport * from './GridItemContent';\nexport * from './GridLayout';\nexport * from './GridTitle';\n"],"names":[],"mappings":"AAAA,oCAAoC;AACpC,kEAAkE;AAClE,mEAAmE;AACnE,0CAA0C;AAC1C,EAAE;AACF,6CAA6C;AAC7C,EAAE;AACF,sEAAsE;AACtE,oEAAoE;AACpE,2EAA2E;AAC3E,sEAAsE;AACtE,iCAAiC;AAEjC,cAAc,kBAAkB;AAChC,cAAc,oBAAoB;AAClC,cAAc,eAAe;AAC7B,cAAc,cAAc"}

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

@@ -1,11 +1,31 @@
 /// <reference types="react" />
 import { PanelDefinition } from '@perses-dev/core';
 import { CardProps } from '@mui/material';
+import { PanelGroupItemId } from '../../context';
 import { PanelHeaderProps } from './PanelHeader';
 export interface PanelProps extends CardProps<'section'> {
     definition: PanelDefinition;
     editHandlers?: PanelHeaderProps['editHandlers'];
+    panelOptions?: PanelOptions;
+    panelGroupItemId?: PanelGroupItemId;
 }
+export declare type PanelOptions = {
+    /**
+     * Content to render in the top-right corner of the panel. It will only be
+     * rendered when the panel is in edit mode.
+     */
+    extra?: (props: PanelExtraProps) => React.ReactNode;
+};
+export declare type PanelExtraProps = {
+    /**
+     * The PanelDefinition for the panel.
+     */
+    panelDefinition?: PanelDefinition;
+    /**
+     * The PanelGroupItemId for the panel.
+     */
+    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,EAAQ,SAAS,EAAe,MAAM,eAAe,CAAC;AAC7D,OAAO,EAAe,gBAAgB,EAAE,MAAM,eAAe,CAAC;AAG9D,MAAM,WAAW,UAAW,SAAQ,SAAS,CAAC,SAAS,CAAC;IACtD,UAAU,EAAE,eAAe,CAAC;IAC5B,YAAY,CAAC,EAAE,gBAAgB,CAAC,cAAc,CAAC,CAAC;CACjD;AAED;;GAEG;AACH,eAAO,MAAM,KAAK,kDAuFhB,CAAC"}
+{"version":3,"file":"Panel.d.ts","sourceRoot":"","sources":["../../../src/components/Panel/Panel.tsx"],"names":[],"mappings":";AAgBA,OAAO,EAAE,eAAe,EAAE,MAAM,kBAAkB,CAAC;AACnD,OAAO,EAAQ,SAAS,EAAe,MAAM,eAAe,CAAC;AAC7D,OAAO,EAAE,gBAAgB,EAAE,MAAM,eAAe,CAAC;AACjD,OAAO,EAAe,gBAAgB,EAAE,MAAM,eAAe,CAAC;AAG9D,MAAM,WAAW,UAAW,SAAQ,SAAS,CAAC,SAAS,CAAC;IACtD,UAAU,EAAE,eAAe,CAAC;IAC5B,YAAY,CAAC,EAAE,gBAAgB,CAAC,cAAc,CAAC,CAAC;IAChD,YAAY,CAAC,EAAE,YAAY,CAAC;IAC5B,gBAAgB,CAAC,EAAE,gBAAgB,CAAC;CACrC;AAED,oBAAY,YAAY,GAAG;IACzB;;;OAGG;IACH,KAAK,CAAC,EAAE,CAAC,KAAK,EAAE,eAAe,KAAK,KAAK,CAAC,SAAS,CAAC;CACrD,CAAC;AAEF,oBAAY,eAAe,GAAG;IAC5B;;OAEG;IACH,eAAe,CAAC,EAAE,eAAe,CAAC;IAClC;;OAEG;IACH,gBAAgB,CAAC,EAAE,gBAAgB,CAAC;CACrC,CAAC;AAEF;;GAEG;AACH,eAAO,MAAM,KAAK,kDA+EhB,CAAC"}

package/dist/components/Panel/Panel.js

@@ -13,7 +13,6 @@
 import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
 import { useState, useMemo, memo } from 'react';
 import useResizeObserver from 'use-resize-observer';
-import { useInView } from 'react-intersection-observer';
 import { ErrorBoundary, ErrorAlert, combineSx, useId, useChartsTheme } from '@perses-dev/components';
 import { Card, CardContent } from '@mui/material';
 import { PanelHeader } from './PanelHeader';
@@ -21,7 +20,8 @@ import { PanelContent } from './PanelContent';
 /**
  * Renders a PanelDefinition's content inside of a Card.
  */ export const Panel = /*#__PURE__*/ memo(function Panel(props) {
-    const { definition , editHandlers , onMouseEnter , onMouseLeave , sx , ...others } = props;
+    var _panelOptions_extra;
+    const { definition , editHandlers , onMouseEnter , onMouseLeave , sx , panelOptions , panelGroupItemId , ...others } = props;
     // Make sure we have an ID we can use for aria attributes
     const generatedPanelId = useId('Panel');
     const headerId = `${generatedPanelId}-header`;
@@ -39,11 +39,6 @@ import { PanelContent } from './PanelContent';
         width,
         height
     ]);
-    const { ref , inView  } = useInView({
-        threshold: 0.3,
-        initialInView: false,
-        triggerOnce: true
-    });
     const chartsTheme = useChartsTheme();
     const handleMouseEnter = (e)=>{
         onMouseEnter === null || onMouseEnter === void 0 ? void 0 : onMouseEnter(e);
@@ -52,7 +47,6 @@ import { PanelContent } from './PanelContent';
         onMouseLeave === null || onMouseLeave === void 0 ? void 0 : onMouseLeave(e);
     };
     return /*#__PURE__*/ _jsxs(Card, {
-        ref: ref,
         component: "section",
         sx: combineSx({
             width: '100%',
@@ -69,6 +63,10 @@ import { PanelContent } from './PanelContent';
         ...others,
         children: [
             /*#__PURE__*/ _jsx(PanelHeader, {
+                extra: panelOptions === null || panelOptions === void 0 ? void 0 : (_panelOptions_extra = panelOptions.extra) === null || _panelOptions_extra === void 0 ? void 0 : _panelOptions_extra.call(panelOptions, {
+                    panelDefinition: definition,
+                    panelGroupItemId
+                }),
                 id: headerId,
                 title: definition.spec.display.name,
                 description: definition.spec.display.description,
@@ -94,9 +92,9 @@ import { PanelContent } from './PanelContent';
                 children: /*#__PURE__*/ _jsx(ErrorBoundary, {
                     FallbackComponent: ErrorAlert,
                     resetKeys: [
-                        definition.spec.plugin.spec
+                        definition.spec
                     ],
-                    children: inView === true && /*#__PURE__*/ _jsx(PanelContent, {
+                    children: /*#__PURE__*/ _jsx(PanelContent, {
                         panelPluginKind: definition.spec.plugin.kind,
                         spec: definition.spec.plugin.spec,
                         contentDimensions: contentDimensions

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

@@ -1 +1 @@
-{"version":3,"sources":["../../../src/components/Panel/Panel.tsx"],"sourcesContent":["// Copyright 2023 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, memo } from 'react';\nimport useResizeObserver from 'use-resize-observer';\nimport { useInView } from 'react-intersection-observer';\nimport { ErrorBoundary, ErrorAlert, combineSx, useId, useChartsTheme } from '@perses-dev/components';\nimport { PanelDefinition } from '@perses-dev/core';\nimport { Card, CardProps, CardContent } from '@mui/material';\nimport { PanelHeader, PanelHeaderProps } from './PanelHeader';\nimport { PanelContent } from './PanelContent';\n\nexport interface PanelProps extends CardProps<'section'> {\n  definition: PanelDefinition;\n  editHandlers?: PanelHeaderProps['editHandlers'];\n}\n\n/**\n * Renders a PanelDefinition's content inside of a Card.\n */\nexport const Panel = memo(function Panel(props: PanelProps) {\n  const { definition, editHandlers, onMouseEnter, onMouseLeave, sx, ...others } = props;\n\n  // Make sure we have an ID we can use for aria attributes\n  const generatedPanelId = useId('Panel');\n  const headerId = `${generatedPanelId}-header`;\n\n  const [contentElement, setContentElement] = useState<HTMLElement | null>(null);\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  const chartsTheme = useChartsTheme();\n\n  const handleMouseEnter: CardProps['onMouseEnter'] = (e) => {\n    onMouseEnter?.(e);\n  };\n\n  const handleMouseLeave: CardProps['onMouseLeave'] = (e) => {\n    onMouseLeave?.(e);\n  };\n\n  return (\n    <Card\n      ref={ref}\n      component=\"section\"\n      sx={combineSx(\n        {\n          width: '100%',\n          height: '100%',\n          display: 'flex',\n          flexFlow: 'column nowrap',\n        },\n        sx\n      )}\n      variant=\"outlined\"\n      onMouseEnter={handleMouseEnter}\n      onMouseLeave={handleMouseLeave}\n      aria-labelledby={headerId}\n      aria-describedby={headerId}\n      data-testid=\"panel\"\n      {...others}\n    >\n      <PanelHeader\n        id={headerId}\n        title={definition.spec.display.name}\n        description={definition.spec.display.description}\n        editHandlers={editHandlers}\n        sx={{ paddingX: `${chartsTheme.container.padding.default}px` }}\n      />\n      <CardContent\n        component=\"figure\"\n        sx={{\n          position: 'relative',\n          overflow: 'hidden',\n          flexGrow: 1,\n          margin: 0,\n          padding: 0,\n          // Override MUI default style for last-child\n          ':last-child': {\n            padding: 0,\n          },\n        }}\n        ref={setContentElement}\n      >\n        <ErrorBoundary FallbackComponent={ErrorAlert} resetKeys={[definition.spec.plugin.spec]}>\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"],"names":["useState","useMemo","memo","useResizeObserver","useInView","ErrorBoundary","ErrorAlert","combineSx","useId","useChartsTheme","Card","CardContent","PanelHeader","PanelContent","Panel","props","definition","editHandlers","onMouseEnter","onMouseLeave","sx","others","generatedPanelId","headerId","contentElement","setContentElement","width","height","ref","contentDimensions","undefined","inView","threshold","initialInView","triggerOnce","chartsTheme","handleMouseEnter","e","handleMouseLeave","component","display","flexFlow","variant","aria-labelledby","aria-describedby","data-testid","id","title","spec","name","description","paddingX","container","padding","default","position","overflow","flexGrow","margin","FallbackComponent","resetKeys","plugin","panelPluginKind","kind"],"mappings":"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"}
+{"version":3,"sources":["../../../src/components/Panel/Panel.tsx"],"sourcesContent":["// Copyright 2023 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, memo } from 'react';\nimport useResizeObserver from 'use-resize-observer';\nimport { ErrorBoundary, ErrorAlert, combineSx, useId, useChartsTheme } from '@perses-dev/components';\nimport { PanelDefinition } from '@perses-dev/core';\nimport { Card, CardProps, CardContent } from '@mui/material';\nimport { PanelGroupItemId } from '../../context';\nimport { PanelHeader, PanelHeaderProps } from './PanelHeader';\nimport { PanelContent } from './PanelContent';\n\nexport interface PanelProps extends CardProps<'section'> {\n  definition: PanelDefinition;\n  editHandlers?: PanelHeaderProps['editHandlers'];\n  panelOptions?: PanelOptions;\n  panelGroupItemId?: PanelGroupItemId;\n}\n\nexport type PanelOptions = {\n  /**\n   * Content to render in the top-right corner of the panel. It will only be\n   * rendered when the panel is in edit mode.\n   */\n  extra?: (props: PanelExtraProps) => React.ReactNode;\n};\n\nexport type PanelExtraProps = {\n  /**\n   * The PanelDefinition for the panel.\n   */\n  panelDefinition?: PanelDefinition;\n  /**\n   * The PanelGroupItemId for the panel.\n   */\n  panelGroupItemId?: PanelGroupItemId;\n};\n\n/**\n * Renders a PanelDefinition's content inside of a Card.\n */\nexport const Panel = memo(function Panel(props: PanelProps) {\n  const { definition, editHandlers, onMouseEnter, onMouseLeave, sx, panelOptions, panelGroupItemId, ...others } = props;\n\n  // Make sure we have an ID we can use for aria attributes\n  const generatedPanelId = useId('Panel');\n  const headerId = `${generatedPanelId}-header`;\n\n  const [contentElement, setContentElement] = useState<HTMLElement | null>(null);\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 chartsTheme = useChartsTheme();\n\n  const handleMouseEnter: CardProps['onMouseEnter'] = (e) => {\n    onMouseEnter?.(e);\n  };\n\n  const handleMouseLeave: CardProps['onMouseLeave'] = (e) => {\n    onMouseLeave?.(e);\n  };\n\n  return (\n    <Card\n      component=\"section\"\n      sx={combineSx(\n        {\n          width: '100%',\n          height: '100%',\n          display: 'flex',\n          flexFlow: 'column nowrap',\n        },\n        sx\n      )}\n      variant=\"outlined\"\n      onMouseEnter={handleMouseEnter}\n      onMouseLeave={handleMouseLeave}\n      aria-labelledby={headerId}\n      aria-describedby={headerId}\n      data-testid=\"panel\"\n      {...others}\n    >\n      <PanelHeader\n        extra={panelOptions?.extra?.({ panelDefinition: definition, panelGroupItemId })}\n        id={headerId}\n        title={definition.spec.display.name}\n        description={definition.spec.display.description}\n        editHandlers={editHandlers}\n        sx={{ paddingX: `${chartsTheme.container.padding.default}px` }}\n      />\n      <CardContent\n        component=\"figure\"\n        sx={{\n          position: 'relative',\n          overflow: 'hidden',\n          flexGrow: 1,\n          margin: 0,\n          padding: 0,\n          // Override MUI default style for last-child\n          ':last-child': {\n            padding: 0,\n          },\n        }}\n        ref={setContentElement}\n      >\n        <ErrorBoundary FallbackComponent={ErrorAlert} resetKeys={[definition.spec]}>\n          <PanelContent\n            panelPluginKind={definition.spec.plugin.kind}\n            spec={definition.spec.plugin.spec}\n            contentDimensions={contentDimensions}\n          />\n        </ErrorBoundary>\n      </CardContent>\n    </Card>\n  );\n});\n"],"names":["useState","useMemo","memo","useResizeObserver","ErrorBoundary","ErrorAlert","combineSx","useId","useChartsTheme","Card","CardContent","PanelHeader","PanelContent","Panel","props","panelOptions","definition","editHandlers","onMouseEnter","onMouseLeave","sx","panelGroupItemId","others","generatedPanelId","headerId","contentElement","setContentElement","width","height","ref","contentDimensions","undefined","chartsTheme","handleMouseEnter","e","handleMouseLeave","component","display","flexFlow","variant","aria-labelledby","aria-describedby","data-testid","extra","panelDefinition","id","title","spec","name","description","paddingX","container","padding","default","position","overflow","flexGrow","margin","FallbackComponent","resetKeys","panelPluginKind","plugin","kind"],"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,SAASA,QAAQ,EAAEC,OAAO,EAAEC,IAAI,QAAQ,QAAQ;AAChD,OAAOC,uBAAuB,sBAAsB;AACpD,SAASC,aAAa,EAAEC,UAAU,EAAEC,SAAS,EAAEC,KAAK,EAAEC,cAAc,QAAQ,yBAAyB;AAErG,SAASC,IAAI,EAAaC,WAAW,QAAQ,gBAAgB;AAE7D,SAASC,WAAW,QAA0B,gBAAgB;AAC9D,SAASC,YAAY,QAAQ,iBAAiB;AA4B9C;;CAEC,GACD,OAAO,MAAMC,sBAAQX,KAAK,SAASW,MAAMC,KAAiB;QA+C3CC;IA9Cb,MAAM,EAAEC,WAAU,EAAEC,aAAY,EAAEC,aAAY,EAAEC,aAAY,EAAEC,GAAE,EAAEL,aAAY,EAAEM,iBAAgB,EAAE,GAAGC,QAAQ,GAAGR;IAEhH,yDAAyD;IACzD,MAAMS,mBAAmBhB,MAAM;IAC/B,MAAMiB,WAAW,CAAC,EAAED,iBAAiB,OAAO,CAAC;IAE7C,MAAM,CAACE,gBAAgBC,kBAAkB,GAAG1B,SAA6B;IAEzE,MAAM,EAAE2B,MAAK,EAAEC,OAAM,EAAE,GAAGzB,kBAAkB;QAAE0B,KAAKJ;IAAe;IAElE,MAAMK,oBAAoB7B,QAAQ;QAChC,IAAI0B,UAAUI,aAAaH,WAAWG,WAAW,OAAOA;QACxD,OAAO;YAAEJ;YAAOC;QAAO;IACzB,GAAG;QAACD;QAAOC;KAAO;IAElB,MAAMI,cAAcxB;IAEpB,MAAMyB,mBAA8C,CAACC;QACnDhB,yBAAAA,0BAAAA,KAAAA,IAAAA,aAAegB;IACjB;IAEA,MAAMC,mBAA8C,CAACD;QACnDf,yBAAAA,0BAAAA,KAAAA,IAAAA,aAAee;IACjB;IAEA,qBACE,MAACzB;QACC2B,WAAU;QACVhB,IAAId,UACF;YACEqB,OAAO;YACPC,QAAQ;YACRS,SAAS;YACTC,UAAU;QACZ,GACAlB;QAEFmB,SAAQ;QACRrB,cAAce;QACdd,cAAcgB;QACdK,mBAAiBhB;QACjBiB,oBAAkBjB;QAClBkB,eAAY;QACX,GAAGpB,MAAM;;0BAEV,KAACX;gBACCgC,KAAK,EAAE5B,yBAAAA,0BAAAA,KAAAA,IAAAA,CAAAA,sBAAAA,aAAc4B,mBAAd5B,iCAAAA,KAAAA,IAAAA,oBAAAA,KAAAA,cAAsB;oBAAE6B,iBAAiB5B;oBAAYK;gBAAiB;gBAC7EwB,IAAIrB;gBACJsB,OAAO9B,WAAW+B,KAAKV,QAAQW;gBAC/BC,aAAajC,WAAW+B,KAAKV,QAAQY;gBACrChC,cAAcA;gBACdG,IAAI;oBAAE8B,UAAU,CAAC,EAAElB,YAAYmB,UAAUC,QAAQC,QAAQ,EAAE,CAAC;gBAAC;;0BAE/D,KAAC3C;gBACC0B,WAAU;gBACVhB,IAAI;oBACFkC,UAAU;oBACVC,UAAU;oBACVC,UAAU;oBACVC,QAAQ;oBACRL,SAAS;oBACT,4CAA4C;oBAC5C,eAAe;wBACbA,SAAS;oBACX;gBACF;gBACAvB,KAAKH;0BAEL,cAAA,KAACtB;oBAAcsD,mBAAmBrD;oBAAYsD,WAAW;wBAAC3C,WAAW+B;qBAAK;8BACxE,cAAA,KAACnC;wBACCgD,iBAAiB5C,WAAW+B,KAAKc,OAAOC;wBACxCf,MAAM/B,WAAW+B,KAAKc,OAAOd;wBAC7BjB,mBAAmBA;;;;;;AAM/B,GAAG"}

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

@@ -1 +1 @@
-{"version":3,"sources":["../../../src/components/Panel/PanelContent.tsx"],"sourcesContent":["// Copyright 2023 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 { usePlugin, PanelProps } from '@perses-dev/plugin-system';\nimport { Skeleton } from '@mui/material';\nimport { UnknownSpec } from '@perses-dev/core';\n\nexport interface PanelContentProps extends PanelProps<UnknownSpec> {\n  panelPluginKind: string;\n}\n\n/**\n * A small wrapper component that renders the appropriate PanelComponent from a Panel plugin based on the panel\n * definition's kind. Used so that an ErrorBoundary can be wrapped around this.\n */\nexport function PanelContent(props: PanelContentProps) {\n  const { panelPluginKind, contentDimensions, ...others } = props;\n  const { data: plugin, isLoading } = usePlugin('Panel', panelPluginKind, { useErrorBoundary: true });\n  const PanelComponent = plugin?.PanelComponent;\n\n  if (isLoading) {\n    return (\n      <Skeleton\n        variant=\"rectangular\"\n        width={contentDimensions?.width}\n        height={contentDimensions?.height}\n        aria-label=\"Loading...\"\n      />\n    );\n  }\n\n  if (PanelComponent === undefined) {\n    throw new Error(`Missing PanelComponent from panel plugin for kind '${panelPluginKind}'`);\n  }\n\n  return <PanelComponent {...others} contentDimensions={contentDimensions} />;\n}\n"],"names":["usePlugin","Skeleton","PanelContent","props","panelPluginKind","contentDimensions","others","data","plugin","isLoading","useErrorBoundary","PanelComponent","variant","width","height","aria-label","undefined","Error"],"mappings":"AAAA,oCAAoC;AACpC,kEAAkE;AAClE,mEAAmE;AACnE,0CAA0C;AAC1C,EAAE;AACF,6CAA6C;AAC7C,EAAE;AACF,sEAAsE;AACtE,oEAAoE;AACpE,2EAA2E;AAC3E,sEAAsE;AACtE,iCAAiC;AAEjC;AAAA,SAASA,SAAS,QAAoB,2BAA2B,CAAC;AAClE,SAASC,QAAQ,QAAQ,eAAe,CAAC;AAOzC;;;CAGC,GACD,OAAO,SAASC,YAAY,CAACC,KAAwB,EAAE;IACrD,MAAM,EAAEC,eAAe,CAAA,EAAEC,iBAAiB,CAAA,EAAE,GAAGC,MAAM,EAAE,GAAGH,KAAK,AAAC;IAChE,MAAM,EAAEI,IAAI,EAAEC,MAAM,CAAA,EAAEC,SAAS,CAAA,EAAE,GAAGT,SAAS,CAAC,OAAO,EAAEI,eAAe,EAAE;QAAEM,gBAAgB,EAAE,IAAI;KAAE,CAAC,AAAC;IACpG,MAAMC,cAAc,GAAGH,MAAM,aAANA,MAAM,WAAgB,GAAtBA,KAAAA,CAAsB,GAAtBA,MAAM,CAAEG,cAAc,AAAC;IAE9C,IAAIF,SAAS,EAAE;QACb,qBACE,KAACR,QAAQ;YACPW,OAAO,EAAC,aAAa;YACrBC,KAAK,EAAER,iBAAiB,aAAjBA,iBAAiB,WAAO,GAAxBA,KAAAA,CAAwB,GAAxBA,iBAAiB,CAAEQ,KAAK;YAC/BC,MAAM,EAAET,iBAAiB,aAAjBA,iBAAiB,WAAQ,GAAzBA,KAAAA,CAAyB,GAAzBA,iBAAiB,CAAES,MAAM;YACjCC,YAAU,EAAC,YAAY;UACvB,CACF;IACJ,CAAC;IAED,IAAIJ,cAAc,KAAKK,SAAS,EAAE;QAChC,MAAM,IAAIC,KAAK,CAAC,CAAC,mDAAmD,EAAEb,eAAe,CAAC,CAAC,CAAC,CAAC,CAAC;IAC5F,CAAC;IAED,qBAAO,KAACO,cAAc;QAAE,GAAGL,MAAM;QAAED,iBAAiB,EAAEA,iBAAiB;MAAI,CAAC;AAC9E,CAAC"}
+{"version":3,"sources":["../../../src/components/Panel/PanelContent.tsx"],"sourcesContent":["// Copyright 2023 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 { usePlugin, PanelProps } from '@perses-dev/plugin-system';\nimport { Skeleton } from '@mui/material';\nimport { UnknownSpec } from '@perses-dev/core';\n\nexport interface PanelContentProps extends PanelProps<UnknownSpec> {\n  panelPluginKind: string;\n}\n\n/**\n * A small wrapper component that renders the appropriate PanelComponent from a Panel plugin based on the panel\n * definition's kind. Used so that an ErrorBoundary can be wrapped around this.\n */\nexport function PanelContent(props: PanelContentProps) {\n  const { panelPluginKind, contentDimensions, ...others } = props;\n  const { data: plugin, isLoading } = usePlugin('Panel', panelPluginKind, { useErrorBoundary: true });\n  const PanelComponent = plugin?.PanelComponent;\n\n  if (isLoading) {\n    return (\n      <Skeleton\n        variant=\"rectangular\"\n        width={contentDimensions?.width}\n        height={contentDimensions?.height}\n        aria-label=\"Loading...\"\n      />\n    );\n  }\n\n  if (PanelComponent === undefined) {\n    throw new Error(`Missing PanelComponent from panel plugin for kind '${panelPluginKind}'`);\n  }\n\n  return <PanelComponent {...others} contentDimensions={contentDimensions} />;\n}\n"],"names":["usePlugin","Skeleton","PanelContent","props","panelPluginKind","contentDimensions","others","data","plugin","isLoading","useErrorBoundary","PanelComponent","variant","width","height","aria-label","undefined","Error"],"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,SAASA,SAAS,QAAoB,4BAA4B;AAClE,SAASC,QAAQ,QAAQ,gBAAgB;AAOzC;;;CAGC,GACD,OAAO,SAASC,aAAaC,KAAwB;IACnD,MAAM,EAAEC,gBAAe,EAAEC,kBAAiB,EAAE,GAAGC,QAAQ,GAAGH;IAC1D,MAAM,EAAEI,MAAMC,OAAM,EAAEC,UAAS,EAAE,GAAGT,UAAU,SAASI,iBAAiB;QAAEM,kBAAkB;IAAK;IACjG,MAAMC,iBAAiBH,mBAAAA,oBAAAA,KAAAA,IAAAA,OAAQG;IAE/B,IAAIF,WAAW;QACb,qBACE,KAACR;YACCW,SAAQ;YACRC,OAAOR,8BAAAA,+BAAAA,KAAAA,IAAAA,kBAAmBQ;YAC1BC,QAAQT,8BAAAA,+BAAAA,KAAAA,IAAAA,kBAAmBS;YAC3BC,cAAW;;IAGjB;IAEA,IAAIJ,mBAAmBK,WAAW;QAChC,MAAM,IAAIC,MAAM,CAAC,mDAAmD,EAAEb,gBAAgB,CAAC,CAAC;IAC1F;IAEA,qBAAO,KAACO;QAAgB,GAAGL,MAAM;QAAED,mBAAmBA;;AACxD"}

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

@@ -5,12 +5,13 @@ export interface PanelHeaderProps extends Omit<CardHeaderProps, OmittedProps> {
     id: string;
     title: string;
     description?: string;
+    extra?: React.ReactNode;
     editHandlers?: {
         onEditPanelClick: () => void;
         onDuplicatePanelClick: () => void;
         onDeletePanelClick: () => void;
     };
 }
-export declare function PanelHeader({ id, title: rawTitle, description: rawDescription, editHandlers, sx, ...rest }: PanelHeaderProps): JSX.Element;
+export declare function PanelHeader({ id, title: rawTitle, description: rawDescription, editHandlers, sx, extra, ...rest }: PanelHeaderProps): JSX.Element;
 export {};
 //# sourceMappingURL=PanelHeader.d.ts.map

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

@@ -1 +1 @@
-{"version":3,"file":"PanelHeader.d.ts","sourceRoot":"","sources":["../../../src/components/Panel/PanelHeader.tsx"],"names":[],"mappings":";AAaA,OAAO,EAA6C,eAAe,EAAU,MAAM,eAAe,CAAC;AASnG,aAAK,YAAY,GAAG,UAAU,GAAG,QAAQ,GAAG,OAAO,GAAG,mBAAmB,CAAC;AAE1E,MAAM,WAAW,gBAAiB,SAAQ,IAAI,CAAC,eAAe,EAAE,YAAY,CAAC;IAC3E,EAAE,EAAE,MAAM,CAAC;IACX,KAAK,EAAE,MAAM,CAAC;IACd,WAAW,CAAC,EAAE,MAAM,CAAC;IACrB,YAAY,CAAC,EAAE;QACb,gBAAgB,EAAE,MAAM,IAAI,CAAC;QAC7B,qBAAqB,EAAE,MAAM,IAAI,CAAC;QAClC,kBAAkB,EAAE,MAAM,IAAI,CAAC;KAChC,CAAC;CACH;AAED,wBAAgB,WAAW,CAAC,EAC1B,EAAE,EACF,KAAK,EAAE,QAAQ,EACf,WAAW,EAAE,cAAc,EAC3B,YAAY,EACZ,EAAE,EACF,GAAG,IAAI,EACR,EAAE,gBAAgB,eAuHlB"}
+{"version":3,"file":"PanelHeader.d.ts","sourceRoot":"","sources":["../../../src/components/Panel/PanelHeader.tsx"],"names":[],"mappings":";AAaA,OAAO,EAA6C,eAAe,EAAU,MAAM,eAAe,CAAC;AASnG,aAAK,YAAY,GAAG,UAAU,GAAG,QAAQ,GAAG,OAAO,GAAG,mBAAmB,CAAC;AAE1E,MAAM,WAAW,gBAAiB,SAAQ,IAAI,CAAC,eAAe,EAAE,YAAY,CAAC;IAC3E,EAAE,EAAE,MAAM,CAAC;IACX,KAAK,EAAE,MAAM,CAAC;IACd,WAAW,CAAC,EAAE,MAAM,CAAC;IACrB,KAAK,CAAC,EAAE,KAAK,CAAC,SAAS,CAAC;IACxB,YAAY,CAAC,EAAE;QACb,gBAAgB,EAAE,MAAM,IAAI,CAAC;QAC7B,qBAAqB,EAAE,MAAM,IAAI,CAAC;QAClC,kBAAkB,EAAE,MAAM,IAAI,CAAC;KAChC,CAAC;CACH;AAED,wBAAgB,WAAW,CAAC,EAC1B,EAAE,EACF,KAAK,EAAE,QAAQ,EACf,WAAW,EAAE,cAAc,EAC3B,YAAY,EACZ,EAAE,EACF,KAAK,EACL,GAAG,IAAI,EACR,EAAE,gBAAgB,eAuHlB"}

package/dist/components/Panel/PanelHeader.js

@@ -20,7 +20,7 @@ import DragIcon from 'mdi-material-ui/DragVertical';
 import ContentCopy from 'mdi-material-ui/ContentCopy';
 import { useReplaceVariablesInString } from '@perses-dev/plugin-system';
 import { ARIA_LABEL_TEXT, TOOLTIP_TEXT } from '../../constants';
-export function PanelHeader({ id , title: rawTitle , description: rawDescription , editHandlers , sx , ...rest }) {
+export function PanelHeader({ id , title: rawTitle , description: rawDescription , editHandlers , sx , extra , ...rest }) {
     const titleElementId = `${id}-title`;
     const descriptionTooltipId = `${id}-description`;
     const title = useReplaceVariablesInString(rawTitle);
@@ -127,11 +127,15 @@ export function PanelHeader({ id , title: rawTitle , description: rawDescription
                 })
             ]
         }),
-        action: /*#__PURE__*/ _jsx(HeaderActionWrapper, {
+        action: /*#__PURE__*/ _jsxs(HeaderActionWrapper, {
             direction: "row",
             spacing: 0.25,
             alignItems: "center",
-            children: actions
+            children: [
+                editHandlers === undefined && extra,
+                " ",
+                actions
+            ]
         }),
         sx: combineSx((theme)=>({
                 padding: theme.spacing(1),

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

@@ -1 +1 @@
-{"version":3,"sources":["../../../src/components/Panel/PanelHeader.tsx"],"sourcesContent":["// Copyright 2023 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 { CardHeader, Typography, Stack, IconButton, CardHeaderProps, styled } from '@mui/material';\nimport { InfoTooltip, combineSx } from '@perses-dev/components';\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 ContentCopy from 'mdi-material-ui/ContentCopy';\nimport { useReplaceVariablesInString } from '@perses-dev/plugin-system';\nimport { ARIA_LABEL_TEXT, TOOLTIP_TEXT } from '../../constants';\ntype OmittedProps = 'children' | 'action' | 'title' | 'disableTypography';\n\nexport interface PanelHeaderProps extends Omit<CardHeaderProps, OmittedProps> {\n  id: string;\n  title: string;\n  description?: string;\n  editHandlers?: {\n    onEditPanelClick: () => void;\n    onDuplicatePanelClick: () => void;\n    onDeletePanelClick: () => void;\n  };\n}\n\nexport function PanelHeader({\n  id,\n  title: rawTitle,\n  description: rawDescription,\n  editHandlers,\n  sx,\n  ...rest\n}: PanelHeaderProps) {\n  const titleElementId = `${id}-title`;\n  const descriptionTooltipId = `${id}-description`;\n\n  const title = useReplaceVariablesInString(rawTitle) as string;\n  const description = useReplaceVariablesInString(rawDescription);\n\n  let actions: CardHeaderProps['action'] = undefined;\n  if (editHandlers !== undefined) {\n    // If there are edit handlers, always just show the edit buttons\n    actions = (\n      <>\n        <InfoTooltip description={TOOLTIP_TEXT.editPanel}>\n          <HeaderIconButton\n            aria-label={ARIA_LABEL_TEXT.editPanel(title)}\n            size=\"small\"\n            onClick={editHandlers.onEditPanelClick}\n          >\n            <PencilIcon fontSize=\"inherit\" />\n          </HeaderIconButton>\n        </InfoTooltip>\n        <InfoTooltip description={TOOLTIP_TEXT.duplicatePanel}>\n          <HeaderIconButton\n            aria-label={ARIA_LABEL_TEXT.duplicatePanel(title)}\n            size=\"small\"\n            onClick={editHandlers.onDuplicatePanelClick}\n          >\n            <ContentCopy\n              fontSize=\"inherit\"\n              sx={{\n                // Shrink this icon a little bit to look more consistent\n                // with the other icons in the header.\n                transform: 'scale(0.925)',\n              }}\n            />\n          </HeaderIconButton>\n        </InfoTooltip>\n        <InfoTooltip description={TOOLTIP_TEXT.deletePanel}>\n          <HeaderIconButton\n            aria-label={ARIA_LABEL_TEXT.deletePanel(title)}\n            size=\"small\"\n            onClick={editHandlers.onDeletePanelClick}\n          >\n            <DeleteIcon fontSize=\"inherit\" />\n          </HeaderIconButton>\n        </InfoTooltip>\n        <InfoTooltip description={TOOLTIP_TEXT.movePanel}>\n          <HeaderIconButton aria-label={ARIA_LABEL_TEXT.movePanel(title)} size=\"small\">\n            <DragIcon className=\"drag-handle\" sx={{ cursor: 'grab' }} fontSize=\"inherit\" />\n          </HeaderIconButton>\n        </InfoTooltip>\n      </>\n    );\n  }\n\n  return (\n    <CardHeader\n      id={id}\n      component=\"header\"\n      aria-labelledby={titleElementId}\n      aria-describedby={descriptionTooltipId}\n      disableTypography\n      title={\n        <Stack direction=\"row\">\n          <Typography\n            id={titleElementId}\n            variant=\"subtitle1\"\n            sx={{\n              // `minHeight` guarantees that the header has the correct height\n              // when there is no title (i.e. in the preview)\n              lineHeight: '24px',\n              minHeight: '24px',\n              whiteSpace: 'nowrap',\n              overflow: 'hidden',\n              textOverflow: 'ellipsis',\n            }}\n          >\n            {title}\n          </Typography>\n          {/* Show the info tooltip when description is defined and is not all whitespace */}\n          {description !== undefined && description.trim().length > 0 && (\n            <InfoTooltip id={descriptionTooltipId} description={description} enterDelay={100}>\n              <HeaderIconButton aria-label=\"panel description\" size=\"small\">\n                <InformationOutlineIcon\n                  aria-describedby=\"info-tooltip\"\n                  aria-hidden={false}\n                  fontSize=\"inherit\"\n                  sx={{ color: (theme) => theme.palette.text.secondary }}\n                />\n              </HeaderIconButton>\n            </InfoTooltip>\n          )}\n        </Stack>\n      }\n      action={\n        <HeaderActionWrapper direction=\"row\" spacing={0.25} alignItems=\"center\">\n          {actions}\n        </HeaderActionWrapper>\n      }\n      sx={combineSx(\n        (theme) => ({\n          padding: theme.spacing(1),\n          borderBottom: `solid 1px ${theme.palette.divider}`,\n          '.MuiCardHeader-content': {\n            overflow: 'hidden',\n          },\n          '.MuiCardHeader-action': {\n            // Overriding the negative margins from MUI's defaults, so we\n            // can vertically center the icons. Moving these values to a wrapper\n            // inside the action in `HeaderActionWrapper` below.\n            // https://github.com/mui/material-ui/blob/master/packages/mui-material/src/CardHeader/CardHeader.js#L56-L58\n            margin: 'auto',\n          },\n        }),\n        sx\n      )}\n      {...rest}\n    />\n  );\n}\n\nconst HeaderIconButton = styled(IconButton)(({ theme }) => ({\n  borderRadius: theme.shape.borderRadius,\n  padding: '4px',\n}));\n\nconst HeaderActionWrapper = styled(Stack)(() => ({\n  // Adding back the negative margins from MUI's defaults for actions, so we\n  // avoid increasing the header size when actions are present while also being\n  // able to vertically center the actions.\n  // https://github.com/mui/material-ui/blob/master/packages/mui-material/src/CardHeader/CardHeader.js#L56-L58\n  marginTop: -4,\n  marginBottom: -4,\n}));\n"],"names":["CardHeader","Typography","Stack","IconButton","styled","InfoTooltip","combineSx","InformationOutlineIcon","PencilIcon","DeleteIcon","DragIcon","ContentCopy","useReplaceVariablesInString","ARIA_LABEL_TEXT","TOOLTIP_TEXT","PanelHeader","id","title","rawTitle","description","rawDescription","editHandlers","sx","rest","titleElementId","descriptionTooltipId","actions","undefined","editPanel","HeaderIconButton","aria-label","size","onClick","onEditPanelClick","fontSize","duplicatePanel","onDuplicatePanelClick","transform","deletePanel","onDeletePanelClick","movePanel","className","cursor","component","aria-labelledby","aria-describedby","disableTypography","direction","variant","lineHeight","minHeight","whiteSpace","overflow","textOverflow","trim","length","enterDelay","aria-hidden","color","theme","palette","text","secondary","action","HeaderActionWrapper","spacing","alignItems","padding","borderBottom","divider","margin","borderRadius","shape","marginTop","marginBottom"],"mappings":"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"}
+{"version":3,"sources":["../../../src/components/Panel/PanelHeader.tsx"],"sourcesContent":["// Copyright 2023 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 { CardHeader, Typography, Stack, IconButton, CardHeaderProps, styled } from '@mui/material';\nimport { InfoTooltip, combineSx } from '@perses-dev/components';\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 ContentCopy from 'mdi-material-ui/ContentCopy';\nimport { useReplaceVariablesInString } from '@perses-dev/plugin-system';\nimport { ARIA_LABEL_TEXT, TOOLTIP_TEXT } from '../../constants';\ntype OmittedProps = 'children' | 'action' | 'title' | 'disableTypography';\n\nexport interface PanelHeaderProps extends Omit<CardHeaderProps, OmittedProps> {\n  id: string;\n  title: string;\n  description?: string;\n  extra?: React.ReactNode;\n  editHandlers?: {\n    onEditPanelClick: () => void;\n    onDuplicatePanelClick: () => void;\n    onDeletePanelClick: () => void;\n  };\n}\n\nexport function PanelHeader({\n  id,\n  title: rawTitle,\n  description: rawDescription,\n  editHandlers,\n  sx,\n  extra,\n  ...rest\n}: PanelHeaderProps) {\n  const titleElementId = `${id}-title`;\n  const descriptionTooltipId = `${id}-description`;\n\n  const title = useReplaceVariablesInString(rawTitle) as string;\n  const description = useReplaceVariablesInString(rawDescription);\n\n  let actions: CardHeaderProps['action'] = undefined;\n  if (editHandlers !== undefined) {\n    // If there are edit handlers, always just show the edit buttons\n    actions = (\n      <>\n        <InfoTooltip description={TOOLTIP_TEXT.editPanel}>\n          <HeaderIconButton\n            aria-label={ARIA_LABEL_TEXT.editPanel(title)}\n            size=\"small\"\n            onClick={editHandlers.onEditPanelClick}\n          >\n            <PencilIcon fontSize=\"inherit\" />\n          </HeaderIconButton>\n        </InfoTooltip>\n        <InfoTooltip description={TOOLTIP_TEXT.duplicatePanel}>\n          <HeaderIconButton\n            aria-label={ARIA_LABEL_TEXT.duplicatePanel(title)}\n            size=\"small\"\n            onClick={editHandlers.onDuplicatePanelClick}\n          >\n            <ContentCopy\n              fontSize=\"inherit\"\n              sx={{\n                // Shrink this icon a little bit to look more consistent\n                // with the other icons in the header.\n                transform: 'scale(0.925)',\n              }}\n            />\n          </HeaderIconButton>\n        </InfoTooltip>\n        <InfoTooltip description={TOOLTIP_TEXT.deletePanel}>\n          <HeaderIconButton\n            aria-label={ARIA_LABEL_TEXT.deletePanel(title)}\n            size=\"small\"\n            onClick={editHandlers.onDeletePanelClick}\n          >\n            <DeleteIcon fontSize=\"inherit\" />\n          </HeaderIconButton>\n        </InfoTooltip>\n        <InfoTooltip description={TOOLTIP_TEXT.movePanel}>\n          <HeaderIconButton aria-label={ARIA_LABEL_TEXT.movePanel(title)} size=\"small\">\n            <DragIcon className=\"drag-handle\" sx={{ cursor: 'grab' }} fontSize=\"inherit\" />\n          </HeaderIconButton>\n        </InfoTooltip>\n      </>\n    );\n  }\n\n  return (\n    <CardHeader\n      id={id}\n      component=\"header\"\n      aria-labelledby={titleElementId}\n      aria-describedby={descriptionTooltipId}\n      disableTypography\n      title={\n        <Stack direction=\"row\">\n          <Typography\n            id={titleElementId}\n            variant=\"subtitle1\"\n            sx={{\n              // `minHeight` guarantees that the header has the correct height\n              // when there is no title (i.e. in the preview)\n              lineHeight: '24px',\n              minHeight: '24px',\n              whiteSpace: 'nowrap',\n              overflow: 'hidden',\n              textOverflow: 'ellipsis',\n            }}\n          >\n            {title}\n          </Typography>\n          {/* Show the info tooltip when description is defined and is not all whitespace */}\n          {description !== undefined && description.trim().length > 0 && (\n            <InfoTooltip id={descriptionTooltipId} description={description} enterDelay={100}>\n              <HeaderIconButton aria-label=\"panel description\" size=\"small\">\n                <InformationOutlineIcon\n                  aria-describedby=\"info-tooltip\"\n                  aria-hidden={false}\n                  fontSize=\"inherit\"\n                  sx={{ color: (theme) => theme.palette.text.secondary }}\n                />\n              </HeaderIconButton>\n            </InfoTooltip>\n          )}\n        </Stack>\n      }\n      action={\n        <HeaderActionWrapper direction=\"row\" spacing={0.25} alignItems=\"center\">\n          {editHandlers === undefined && extra} {actions}\n        </HeaderActionWrapper>\n      }\n      sx={combineSx(\n        (theme) => ({\n          padding: theme.spacing(1),\n          borderBottom: `solid 1px ${theme.palette.divider}`,\n          '.MuiCardHeader-content': {\n            overflow: 'hidden',\n          },\n          '.MuiCardHeader-action': {\n            // Overriding the negative margins from MUI's defaults, so we\n            // can vertically center the icons. Moving these values to a wrapper\n            // inside the action in `HeaderActionWrapper` below.\n            // https://github.com/mui/material-ui/blob/master/packages/mui-material/src/CardHeader/CardHeader.js#L56-L58\n            margin: 'auto',\n          },\n        }),\n        sx\n      )}\n      {...rest}\n    />\n  );\n}\n\nconst HeaderIconButton = styled(IconButton)(({ theme }) => ({\n  borderRadius: theme.shape.borderRadius,\n  padding: '4px',\n}));\n\nconst HeaderActionWrapper = styled(Stack)(() => ({\n  // Adding back the negative margins from MUI's defaults for actions, so we\n  // avoid increasing the header size when actions are present while also being\n  // able to vertically center the actions.\n  // https://github.com/mui/material-ui/blob/master/packages/mui-material/src/CardHeader/CardHeader.js#L56-L58\n  marginTop: -4,\n  marginBottom: -4,\n}));\n"],"names":["CardHeader","Typography","Stack","IconButton","styled","InfoTooltip","combineSx","InformationOutlineIcon","PencilIcon","DeleteIcon","DragIcon","ContentCopy","useReplaceVariablesInString","ARIA_LABEL_TEXT","TOOLTIP_TEXT","PanelHeader","id","title","rawTitle","description","rawDescription","editHandlers","sx","extra","rest","titleElementId","descriptionTooltipId","actions","undefined","editPanel","HeaderIconButton","aria-label","size","onClick","onEditPanelClick","fontSize","duplicatePanel","onDuplicatePanelClick","transform","deletePanel","onDeletePanelClick","movePanel","className","cursor","component","aria-labelledby","aria-describedby","disableTypography","direction","variant","lineHeight","minHeight","whiteSpace","overflow","textOverflow","trim","length","enterDelay","aria-hidden","color","theme","palette","text","secondary","action","HeaderActionWrapper","spacing","alignItems","padding","borderBottom","divider","margin","borderRadius","shape","marginTop","marginBottom"],"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,SAASA,UAAU,EAAEC,UAAU,EAAEC,KAAK,EAAEC,UAAU,EAAmBC,MAAM,QAAQ,gBAAgB;AACnG,SAASC,WAAW,EAAEC,SAAS,QAAQ,yBAAyB;AAChE,OAAOC,4BAA4B,qCAAqC;AACxE,OAAOC,gBAAgB,gCAAgC;AACvD,OAAOC,gBAAgB,gCAAgC;AACvD,OAAOC,cAAc,+BAA+B;AACpD,OAAOC,iBAAiB,8BAA8B;AACtD,SAASC,2BAA2B,QAAQ,4BAA4B;AACxE,SAASC,eAAe,EAAEC,YAAY,QAAQ,kBAAkB;AAehE,OAAO,SAASC,YAAY,EAC1BC,GAAE,EACFC,OAAOC,SAAQ,EACfC,aAAaC,eAAc,EAC3BC,aAAY,EACZC,GAAE,EACFC,MAAK,EACL,GAAGC,MACc;IACjB,MAAMC,iBAAiB,CAAC,EAAET,GAAG,MAAM,CAAC;IACpC,MAAMU,uBAAuB,CAAC,EAAEV,GAAG,YAAY,CAAC;IAEhD,MAAMC,QAAQL,4BAA4BM;IAC1C,MAAMC,cAAcP,4BAA4BQ;IAEhD,IAAIO,UAAqCC;IACzC,IAAIP,iBAAiBO,WAAW;QAC9B,gEAAgE;QAChED,wBACE;;8BACE,KAACtB;oBAAYc,aAAaL,aAAae;8BACrC,cAAA,KAACC;wBACCC,cAAYlB,gBAAgBgB,UAAUZ;wBACtCe,MAAK;wBACLC,SAASZ,aAAaa;kCAEtB,cAAA,KAAC1B;4BAAW2B,UAAS;;;;8BAGzB,KAAC9B;oBAAYc,aAAaL,aAAasB;8BACrC,cAAA,KAACN;wBACCC,cAAYlB,gBAAgBuB,eAAenB;wBAC3Ce,MAAK;wBACLC,SAASZ,aAAagB;kCAEtB,cAAA,KAAC1B;4BACCwB,UAAS;4BACTb,IAAI;gCACF,wDAAwD;gCACxD,sCAAsC;gCACtCgB,WAAW;4BACb;;;;8BAIN,KAACjC;oBAAYc,aAAaL,aAAayB;8BACrC,cAAA,KAACT;wBACCC,cAAYlB,gBAAgB0B,YAAYtB;wBACxCe,MAAK;wBACLC,SAASZ,aAAamB;kCAEtB,cAAA,KAAC/B;4BAAW0B,UAAS;;;;8BAGzB,KAAC9B;oBAAYc,aAAaL,aAAa2B;8BACrC,cAAA,KAACX;wBAAiBC,cAAYlB,gBAAgB4B,UAAUxB;wBAAQe,MAAK;kCACnE,cAAA,KAACtB;4BAASgC,WAAU;4BAAcpB,IAAI;gCAAEqB,QAAQ;4BAAO;4BAAGR,UAAS;;;;;;IAK7E;IAEA,qBACE,KAACnC;QACCgB,IAAIA;QACJ4B,WAAU;QACVC,mBAAiBpB;QACjBqB,oBAAkBpB;QAClBqB,iBAAiB;QACjB9B,qBACE,MAACf;YAAM8C,WAAU;;8BACf,KAAC/C;oBACCe,IAAIS;oBACJwB,SAAQ;oBACR3B,IAAI;wBACF,gEAAgE;wBAChE,+CAA+C;wBAC/C4B,YAAY;wBACZC,WAAW;wBACXC,YAAY;wBACZC,UAAU;wBACVC,cAAc;oBAChB;8BAECrC;;gBAGFE,gBAAgBS,aAAaT,YAAYoC,OAAOC,SAAS,mBACxD,KAACnD;oBAAYW,IAAIU;oBAAsBP,aAAaA;oBAAasC,YAAY;8BAC3E,cAAA,KAAC3B;wBAAiBC,cAAW;wBAAoBC,MAAK;kCACpD,cAAA,KAACzB;4BACCuC,oBAAiB;4BACjBY,eAAa;4BACbvB,UAAS;4BACTb,IAAI;gCAAEqC,OAAO,CAACC,QAAUA,MAAMC,QAAQC,KAAKC;4BAAU;;;;;;QAOjEC,sBACE,MAACC;YAAoBjB,WAAU;YAAMkB,SAAS;YAAMC,YAAW;;gBAC5D9C,iBAAiBO,aAAaL;gBAAM;gBAAEI;;;QAG3CL,IAAIhB,UACF,CAACsD,QAAW,CAAA;gBACVQ,SAASR,MAAMM,QAAQ;gBACvBG,cAAc,CAAC,UAAU,EAAET,MAAMC,QAAQS,QAAQ,CAAC;gBAClD,0BAA0B;oBACxBjB,UAAU;gBACZ;gBACA,yBAAyB;oBACvB,6DAA6D;oBAC7D,oEAAoE;oBACpE,oDAAoD;oBACpD,4GAA4G;oBAC5GkB,QAAQ;gBACV;YACF,CAAA,GACAjD;QAED,GAAGE,IAAI;;AAGd;AAEA,MAAMM,mBAAmB1B,OAAOD,YAAY,CAAC,EAAEyD,MAAK,EAAE,GAAM,CAAA;QAC1DY,cAAcZ,MAAMa,MAAMD;QAC1BJ,SAAS;IACX,CAAA;AAEA,MAAMH,sBAAsB7D,OAAOF,OAAO,IAAO,CAAA;QAC/C,0EAA0E;QAC1E,6EAA6E;QAC7E,yCAAyC;QACzC,4GAA4G;QAC5GwE,WAAW,CAAC;QACZC,cAAc,CAAC;IACjB,CAAA"}

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

@@ -1 +1 @@
-{"version":3,"sources":["../../../src/components/Panel/index.ts"],"sourcesContent":["// Copyright 2023 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 2023 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,UAAU"}

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

@@ -1 +1 @@
-{"version":3,"file":"PanelDrawer.d.ts","sourceRoot":"","sources":["../../../src/components/PanelDrawer/PanelDrawer.tsx"],"names":[],"mappings":";AAoBA;;GAEG;AACH,eAAO,MAAM,WAAW,mBA+EvB,CAAC"}
+{"version":3,"file":"PanelDrawer.d.ts","sourceRoot":"","sources":["../../../src/components/PanelDrawer/PanelDrawer.tsx"],"names":[],"mappings":";AAmBA;;GAEG;AACH,eAAO,MAAM,WAAW,mBA+CvB,CAAC"}

package/dist/components/PanelDrawer/PanelDrawer.js

@@ -10,105 +10,51 @@
 // WITHOUT WARRANTIES OR CONDITIONS OF ANY KIND, either express or implied.
 // See the License for the specific language governing permissions and
 // limitations under the License.
-import { jsx as _jsx, jsxs as _jsxs, Fragment as _Fragment } from "react/jsx-runtime";
-import { useCallback, useState } from 'react';
-import { Stack, Box, Button, Typography } from '@mui/material';
+import { jsx as _jsx } from "react/jsx-runtime";
+import { useState } from 'react';
 import { Drawer } from '@perses-dev/components';
-import { useDiscardChangesConfirmationDialog, usePanelEditor } from '../../context';
+import { usePanelEditor } from '../../context';
 import { PanelEditorForm } from './PanelEditorForm';
 /**
  * The Add/Edit panel drawer for editing a panel's options.
  */ export const PanelDrawer = ()=>{
     const panelEditor = usePanelEditor();
-    const { openDiscardChangesConfirmationDialog , closeDiscardChangesConfirmationDialog  } = useDiscardChangesConfirmationDialog();
-    const [values, setValues] = useState(undefined);
     // When the user clicks close, start closing but don't call the store yet to keep values stable during animtation
     const [isClosing, setIsClosing] = useState(false);
-    const handleClose = ()=>{
-        const isModified = JSON.stringify(panelEditor === null || panelEditor === void 0 ? void 0 : panelEditor.initialValues) !== JSON.stringify(values);
-        if (isModified) {
-            openDiscardChangesConfirmationDialog({
-                onDiscardChanges: ()=>{
-                    closeDiscardChangesConfirmationDialog();
-                    setIsClosing(true);
-                },
-                onCancel: ()=>{
-                    closeDiscardChangesConfirmationDialog();
-                },
-                description: 'You have unapplied changes in this panel. Are you sure you want to discard these changes? Changes cannot be recovered.'
-            });
-        } else {
-            setIsClosing(true);
-        }
-    };
-    // Don't call closeDrawer on the store until the Drawer has completely transitioned out
-    const handleExited = ()=>{
-        panelEditor === null || panelEditor === void 0 ? void 0 : panelEditor.close();
-        setIsClosing(false);
-    };
     // Drawer is open if we have a model and we're not transitioning out
     const isOpen = panelEditor !== undefined && isClosing === false;
-    const handleSubmit = ()=>{
+    function handleSave(values) {
         // This shouldn't happen since we don't render the submit button until we have a model, but check to make TS happy
         if (panelEditor === undefined || values === undefined) {
             throw new Error('Cannot apply changes');
         }
         panelEditor.applyChanges(values);
         setIsClosing(true);
+    }
+    const handleClose = ()=>{
+        setIsClosing(true);
+    };
+    // Don't call closeDrawer on the store until the Drawer has completely transitioned out and reset close state
+    const handleExited = ()=>{
+        panelEditor === null || panelEditor === void 0 ? void 0 : panelEditor.close();
+        setIsClosing(false);
     };
-    const handleChange = useCallback((values)=>{
-        setValues(values);
-    }, []);
+    // Disables closing on click out. This is a quick-win solution to avoid losing draft changes.
+    // -> TODO find a way to enable closing by clicking-out in edit view, with a discard confirmation modal popping up
+    const handleClickOut = ()=>{
+    /* do nothing */ };
     return /*#__PURE__*/ _jsx(Drawer, {
         isOpen: isOpen,
-        onClose: handleClose,
+        onClose: handleClickOut,
         SlideProps: {
             onExited: handleExited
         },
         "data-testid": "panel-editor",
-        children: panelEditor !== undefined && /*#__PURE__*/ _jsxs(_Fragment, {
-            children: [
-                /*#__PURE__*/ _jsxs(Box, {
-                    sx: {
-                        display: 'flex',
-                        alignItems: 'center',
-                        padding: (theme)=>theme.spacing(1, 2),
-                        borderBottom: (theme)=>`1px solid ${theme.palette.divider}`
-                    },
-                    children: [
-                        /*#__PURE__*/ _jsxs(Typography, {
-                            variant: "h2",
-                            children: [
-                                panelEditor.mode,
-                                " Panel"
-                            ]
-                        }),
-                        /*#__PURE__*/ _jsxs(Stack, {
-                            direction: "row",
-                            spacing: 1,
-                            marginLeft: "auto",
-                            children: [
-                                /*#__PURE__*/ _jsx(Button, {
-                                    type: "submit",
-                                    variant: "contained",
-                                    onClick: handleSubmit,
-                                    children: panelEditor.mode === 'Add' ? 'Add' : 'Apply'
-                                }),
-                                /*#__PURE__*/ _jsx(Button, {
-                                    color: "secondary",
-                                    variant: "outlined",
-                                    onClick: handleClose,
-                                    children: "Cancel"
-                                })
-                            ]
-                        })
-                    ]
-                }),
-                /*#__PURE__*/ _jsx(PanelEditorForm, {
-                    initialValues: panelEditor.initialValues,
-                    onChange: handleChange
-                })
-            ]
+        children: panelEditor && /*#__PURE__*/ _jsx(PanelEditorForm, {
+            initialAction: panelEditor.mode,
+            initialValues: panelEditor.initialValues,
+            onSave: handleSave,
+            onClose: handleClose
         })
     });
 };

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

@@ -1 +1 @@
-{"version":3,"sources":["../../../src/components/PanelDrawer/PanelDrawer.tsx"],"sourcesContent":["/* eslint-disable @typescript-eslint/no-empty-function */\n// Copyright 2023 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 { useCallback, useState } from 'react';\nimport { Stack, Box, Button, Typography } from '@mui/material';\nimport { Drawer } from '@perses-dev/components';\nimport { PanelEditorValues, useDiscardChangesConfirmationDialog, usePanelEditor } from '../../context';\nimport { PanelEditorForm, PanelEditorFormProps } from './PanelEditorForm';\n\n/**\n * The Add/Edit panel drawer for editing a panel's options.\n */\nexport const PanelDrawer = () => {\n  const panelEditor = usePanelEditor();\n  const { openDiscardChangesConfirmationDialog, closeDiscardChangesConfirmationDialog } =\n    useDiscardChangesConfirmationDialog();\n\n  const [values, setValues] = useState<PanelEditorValues | undefined>(undefined);\n\n  // When the user clicks close, start closing but don't call the store yet to keep values stable during animtation\n  const [isClosing, setIsClosing] = useState(false);\n  const handleClose = () => {\n    const isModified = JSON.stringify(panelEditor?.initialValues) !== JSON.stringify(values);\n    if (isModified) {\n      openDiscardChangesConfirmationDialog({\n        onDiscardChanges: () => {\n          closeDiscardChangesConfirmationDialog();\n          setIsClosing(true);\n        },\n        onCancel: () => {\n          closeDiscardChangesConfirmationDialog();\n        },\n        description:\n          'You have unapplied changes in this panel. Are you sure you want to discard these changes? Changes cannot be recovered.',\n      });\n    } else {\n      setIsClosing(true);\n    }\n  };\n\n  // Don't call closeDrawer on the store until the Drawer has completely transitioned out\n  const handleExited = () => {\n    panelEditor?.close();\n    setIsClosing(false);\n  };\n\n  // Drawer is open if we have a model and we're not transitioning out\n  const isOpen = panelEditor !== undefined && isClosing === false;\n\n  const handleSubmit = () => {\n    // This shouldn't happen since we don't render the submit button until we have a model, but check to make TS happy\n    if (panelEditor === undefined || values === undefined) {\n      throw new Error('Cannot apply changes');\n    }\n    panelEditor.applyChanges(values);\n    setIsClosing(true);\n  };\n\n  const handleChange: PanelEditorFormProps['onChange'] = useCallback((values) => {\n    setValues(values);\n  }, []);\n\n  return (\n    <Drawer isOpen={isOpen} onClose={handleClose} SlideProps={{ onExited: handleExited }} data-testid=\"panel-editor\">\n      {/* When the drawer is opened, we should have panel editor state (this also ensures the form state gets reset between opens) */}\n      {panelEditor !== undefined && (\n        <>\n          <Box\n            sx={{\n              display: 'flex',\n              alignItems: 'center',\n              padding: (theme) => theme.spacing(1, 2),\n              borderBottom: (theme) => `1px solid ${theme.palette.divider}`,\n            }}\n          >\n            <Typography variant=\"h2\">{panelEditor.mode} Panel</Typography>\n            <Stack direction=\"row\" spacing={1} marginLeft=\"auto\">\n              {/* Using the 'form' attribute lets us have a submit button like this outside the form element */}\n              <Button type=\"submit\" variant=\"contained\" onClick={handleSubmit}>\n                {panelEditor.mode === 'Add' ? 'Add' : 'Apply'}\n              </Button>\n              <Button color=\"secondary\" variant=\"outlined\" onClick={handleClose}>\n                Cancel\n              </Button>\n            </Stack>\n          </Box>\n          <PanelEditorForm initialValues={panelEditor.initialValues} onChange={handleChange} />\n        </>\n      )}\n    </Drawer>\n  );\n};\n"],"names":["useCallback","useState","Stack","Box","Button","Typography","Drawer","useDiscardChangesConfirmationDialog","usePanelEditor","PanelEditorForm","PanelDrawer","panelEditor","openDiscardChangesConfirmationDialog","closeDiscardChangesConfirmationDialog","values","setValues","undefined","isClosing","setIsClosing","handleClose","isModified","JSON","stringify","initialValues","onDiscardChanges","onCancel","description","handleExited","close","isOpen","handleSubmit","Error","applyChanges","handleChange","onClose","SlideProps","onExited","data-testid","sx","display","alignItems","padding","theme","spacing","borderBottom","palette","divider","variant","mode","direction","marginLeft","type","onClick","color","onChange"],"mappings":"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"}
+{"version":3,"sources":["../../../src/components/PanelDrawer/PanelDrawer.tsx"],"sourcesContent":["/* eslint-disable @typescript-eslint/no-empty-function */\n// Copyright 2023 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 { Drawer } from '@perses-dev/components';\nimport { PanelEditorValues, usePanelEditor } from '../../context';\nimport { PanelEditorForm } from './PanelEditorForm';\n\n/**\n * The Add/Edit panel drawer for editing a panel's options.\n */\nexport const PanelDrawer = () => {\n  const panelEditor = usePanelEditor();\n\n  // When the user clicks close, start closing but don't call the store yet to keep values stable during animtation\n  const [isClosing, setIsClosing] = useState(false);\n\n  // Drawer is open if we have a model and we're not transitioning out\n  const isOpen = panelEditor !== undefined && isClosing === false;\n\n  function handleSave(values: PanelEditorValues) {\n    // This shouldn't happen since we don't render the submit button until we have a model, but check to make TS happy\n    if (panelEditor === undefined || values === undefined) {\n      throw new Error('Cannot apply changes');\n    }\n    panelEditor.applyChanges(values);\n    setIsClosing(true);\n  }\n\n  const handleClose = () => {\n    setIsClosing(true);\n  };\n\n  // Don't call closeDrawer on the store until the Drawer has completely transitioned out and reset close state\n  const handleExited = () => {\n    panelEditor?.close();\n    setIsClosing(false);\n  };\n\n  // Disables closing on click out. This is a quick-win solution to avoid losing draft changes.\n  // -> TODO find a way to enable closing by clicking-out in edit view, with a discard confirmation modal popping up\n  const handleClickOut = () => {\n    /* do nothing */\n  };\n\n  return (\n    <Drawer isOpen={isOpen} onClose={handleClickOut} SlideProps={{ onExited: handleExited }} data-testid=\"panel-editor\">\n      {/* When the drawer is opened, we should have panel editor state (this also ensures the form state gets reset between opens) */}\n      {panelEditor && (\n        <PanelEditorForm\n          initialAction={panelEditor.mode}\n          initialValues={panelEditor.initialValues}\n          onSave={handleSave}\n          onClose={handleClose}\n        />\n      )}\n    </Drawer>\n  );\n};\n"],"names":["useState","Drawer","usePanelEditor","PanelEditorForm","PanelDrawer","panelEditor","isClosing","setIsClosing","isOpen","undefined","handleSave","values","Error","applyChanges","handleClose","handleExited","close","handleClickOut","onClose","SlideProps","onExited","data-testid","initialAction","mode","initialValues","onSave"],"mappings":"AAAA,uDAAuD,GACvD,oCAAoC;AACpC,kEAAkE;AAClE,mEAAmE;AACnE,0CAA0C;AAC1C,EAAE;AACF,6CAA6C;AAC7C,EAAE;AACF,sEAAsE;AACtE,oEAAoE;AACpE,2EAA2E;AAC3E,sEAAsE;AACtE,iCAAiC;;AAEjC,SAASA,QAAQ,QAAQ,QAAQ;AACjC,SAASC,MAAM,QAAQ,yBAAyB;AAChD,SAA4BC,cAAc,QAAQ,gBAAgB;AAClE,SAASC,eAAe,QAAQ,oBAAoB;AAEpD;;CAEC,GACD,OAAO,MAAMC,cAAc;IACzB,MAAMC,cAAcH;IAEpB,iHAAiH;IACjH,MAAM,CAACI,WAAWC,aAAa,GAAGP,SAAS;IAE3C,oEAAoE;IACpE,MAAMQ,SAASH,gBAAgBI,aAAaH,cAAc;IAE1D,SAASI,WAAWC,MAAyB;QAC3C,kHAAkH;QAClH,IAAIN,gBAAgBI,aAAaE,WAAWF,WAAW;YACrD,MAAM,IAAIG,MAAM;QAClB;QACAP,YAAYQ,aAAaF;QACzBJ,aAAa;IACf;IAEA,MAAMO,cAAc;QAClBP,aAAa;IACf;IAEA,6GAA6G;IAC7G,MAAMQ,eAAe;QACnBV,wBAAAA,yBAAAA,KAAAA,IAAAA,YAAaW;QACbT,aAAa;IACf;IAEA,6FAA6F;IAC7F,kHAAkH;IAClH,MAAMU,iBAAiB;IACrB,cAAc,GAChB;IAEA,qBACE,KAAChB;QAAOO,QAAQA;QAAQU,SAASD;QAAgBE,YAAY;YAAEC,UAAUL;QAAa;QAAGM,eAAY;kBAElGhB,6BACC,KAACF;YACCmB,eAAejB,YAAYkB;YAC3BC,eAAenB,YAAYmB;YAC3BC,QAAQf;YACRQ,SAASJ;;;AAKnB,EAAE"}