@perses-dev/dashboards 0.8.1 → 0.10.0

package/dist/components/GridLayout/GridLayout.js

@@ -1 +1,102 @@
-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{styles}from"../../css/styles";import{useEditMode}from"../../context";import{GridTitle}from"./GridTitle";const ResponsiveGridLayout=WidthProvider(Responsive);export function GridLayout(e){var s,i,o;const{groupIndex:t,definition:{spec:r},renderGridItemContent:l,...d}=e,[a,n]=useState(null===(o=null===(i=null===(s=r.display)||void 0===s?void 0:s.collapse)||void 0===i?void 0:i.open)||void 0===o||o),{isEditMode:p}=useEditMode(),m=[];return r.items.forEach(((e,s)=>{const{x:i,y:o,width:r,height:d}=e;m.push(_jsx("div",{"data-grid":{x:i,y:o,w:r,h:d},children:l(e,t)},s))})),_jsxs(_Fragment,{children:[_jsx(GlobalStyles,{styles}),_jsxs(Box,{...d,component:"section",sx:{"& + &":{marginTop:e=>e.spacing(1)}},children:[void 0!==r.display&&_jsx(GridTitle,{groupIndex:t,title:r.display.title,collapse:void 0===r.display.collapse?void 0:{isOpen:a,onToggleOpen:()=>n((e=>!e))}}),_jsx(Collapse,{in:a,unmountOnExit:!0,children:_jsx(ResponsiveGridLayout,{className:"layout",breakpoints:{lg:1200,md:996,sm:768,xs:480,xxs:0},cols:{lg:24,md:24,sm:24,xs:24,xxs:2},rowHeight:30,draggableHandle:".drag-handle",resizeHandles:["se"],isDraggable:p,isResizable:p,children:m})})]})]})}
+// Copyright 2022 The Perses Authors
+// Licensed under the Apache License, Version 2.0 (the "License");
+// you may not use this file except in compliance with the License.
+// You may obtain a copy of the License at
+//
+// http://www.apache.org/licenses/LICENSE-2.0
+//
+// Unless required by applicable law or agreed to in writing, software
+// distributed under the License is distributed on an "AS IS" BASIS,
+// WITHOUT WARRANTIES OR CONDITIONS OF ANY KIND, either express or implied.
+// See the License for the specific language governing permissions and
+// limitations under the License.
+import { jsx as _jsx, jsxs as _jsxs, Fragment as _Fragment } from "react/jsx-runtime";
+import { useState } from 'react';
+import { Responsive, WidthProvider } from 'react-grid-layout';
+import { Box, Collapse, GlobalStyles } from '@mui/material';
+import { ErrorAlert, ErrorBoundary } from '@perses-dev/components';
+import { styles } from '../../css/styles';
+import { useEditMode } from '../../context';
+import { GridTitle } from './GridTitle';
+import { GridItemContent } from './GridItemContent';
+const ResponsiveGridLayout = WidthProvider(Responsive);
+/**
+ * Layout component that arranges children in a Grid based on the definition.
+ */ export function GridLayout(props) {
+    const { groupIndex , groupDefinition , ...others } = props;
+    var ref;
+    const [isOpen, setIsOpen] = useState((ref = !groupDefinition.isCollapsed) !== null && ref !== void 0 ? ref : true);
+    const { isEditMode  } = useEditMode();
+    return /*#__PURE__*/ _jsxs(_Fragment, {
+        children: [
+            /*#__PURE__*/ _jsx(GlobalStyles, {
+                styles: styles
+            }),
+            /*#__PURE__*/ _jsxs(Box, {
+                ...others,
+                component: "section",
+                sx: {
+                    '& + &': {
+                        marginTop: (theme)=>theme.spacing(1)
+                    }
+                },
+                children: [
+                    groupDefinition.title !== undefined && /*#__PURE__*/ _jsx(GridTitle, {
+                        groupIndex: groupIndex,
+                        title: groupDefinition.title,
+                        collapse: groupDefinition.isCollapsed === undefined ? undefined : {
+                            isOpen,
+                            onToggleOpen: ()=>setIsOpen((current)=>!current)
+                        }
+                    }),
+                    /*#__PURE__*/ _jsx(Collapse, {
+                        in: isOpen,
+                        unmountOnExit: true,
+                        children: /*#__PURE__*/ _jsx(ResponsiveGridLayout, {
+                            className: "layout",
+                            breakpoints: {
+                                lg: 1200,
+                                md: 996,
+                                sm: 768,
+                                xs: 480,
+                                xxs: 0
+                            },
+                            cols: {
+                                lg: 24,
+                                md: 24,
+                                sm: 24,
+                                xs: 24,
+                                xxs: 2
+                            },
+                            rowHeight: 30,
+                            draggableHandle: '.drag-handle',
+                            resizeHandles: [
+                                'se'
+                            ],
+                            isDraggable: isEditMode,
+                            isResizable: isEditMode,
+                            children: groupDefinition.items.map(({ x , y , width , height , content  }, itemIndex)=>/*#__PURE__*/ _jsx("div", {
+                                    "data-grid": {
+                                        x,
+                                        y,
+                                        w: width,
+                                        h: height
+                                    },
+                                    children: /*#__PURE__*/ _jsx(ErrorBoundary, {
+                                        FallbackComponent: ErrorAlert,
+                                        children: /*#__PURE__*/ _jsx(GridItemContent, {
+                                            groupIndex: groupIndex,
+                                            itemIndex: itemIndex,
+                                            content: content
+                                        })
+                                    })
+                                }, itemIndex))
+                        })
+                    })
+                ]
+            })
+        ]
+    });
+}
+
+//# sourceMappingURL=GridLayout.js.map

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

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

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

@@ -1 +1 @@
-{"version":3,"file":"GridTitle.d.ts","sourceRoot":"","sources":["../../../src/components/GridLayout/GridTitle.tsx"],"names":[],"mappings":";AAqBA,MAAM,WAAW,cAAc;IAC7B,UAAU,EAAE,MAAM,CAAC;IACnB,KAAK,EAAE,MAAM,CAAC;IACd,QAAQ,CAAC,EAAE;QACT,MAAM,EAAE,OAAO,CAAC;QAChB,YAAY,EAAE,MAAM,IAAI,CAAC;KAC1B,CAAC;CACH;AAED;;;GAGG;AACH,wBAAgB,SAAS,CAAC,KAAK,EAAE,cAAc,eAgD9C"}
+{"version":3,"file":"GridTitle.d.ts","sourceRoot":"","sources":["../../../src/components/GridLayout/GridTitle.tsx"],"names":[],"mappings":";AAyBA,MAAM,WAAW,cAAc;IAC7B,UAAU,EAAE,MAAM,CAAC;IACnB,KAAK,EAAE,MAAM,CAAC;IACd,QAAQ,CAAC,EAAE;QACT,MAAM,EAAE,OAAO,CAAC;QAChB,YAAY,EAAE,MAAM,IAAI,CAAC;KAC1B,CAAC;CACH;AAED;;;GAGG;AACH,wBAAgB,SAAS,CAAC,KAAK,EAAE,cAAc,eAmE9C"}

package/dist/components/GridLayout/GridTitle.js

@@ -1 +1,99 @@
-import{jsx as _jsx,jsxs as _jsxs,Fragment as _Fragment}from"react/jsx-runtime";import{Box,IconButton,Stack,Typography}from"@mui/material";import ExpandedIcon from"mdi-material-ui/ChevronUp";import CollapsedIcon from"mdi-material-ui/ChevronDown";import AddIcon from"mdi-material-ui/Plus";import PencilIcon from"mdi-material-ui/PencilOutline";import{useState}from"react";import{useDashboardApp,useEditMode}from"../../context";export function GridTitle(o){const{groupIndex:e,title:n,collapse:t}=o,[r,i]=useState(!1),{openPanelDrawer:a,openPanelGroupDialog:s}=useDashboardApp(),{isEditMode:d}=useEditMode(),c=_jsx(Typography,{variant:"h2",sx:{marginLeft:void 0!==t?1:void 0},children:n});return _jsx(Box,{sx:{display:"flex",justifyContent:"start",alignItems:"center",padding:o=>o.spacing(1),backgroundColor:o=>o.palette.background.default},onMouseEnter:()=>i(!0),onMouseLeave:()=>i(!1),children:t?_jsxs(_Fragment,{children:[_jsx(IconButton,{onClick:t.onToggleOpen,children:t.isOpen?_jsx(ExpandedIcon,{}):_jsx(CollapsedIcon,{})}),c,d&&r&&_jsxs(Stack,{direction:"row",sx:{marginLeft:"auto"},children:[_jsx(IconButton,{onClick:()=>a({groupIndex:e}),children:_jsx(AddIcon,{})}),_jsx(IconButton,{onClick:()=>s(e),children:_jsx(PencilIcon,{})})]})]}):c})}
+// Copyright 2022 The Perses Authors
+// Licensed under the Apache License, Version 2.0 (the "License");
+// you may not use this file except in compliance with the License.
+// You may obtain a copy of the License at
+//
+// http://www.apache.org/licenses/LICENSE-2.0
+//
+// Unless required by applicable law or agreed to in writing, software
+// distributed under the License is distributed on an "AS IS" BASIS,
+// WITHOUT WARRANTIES OR CONDITIONS OF ANY KIND, either express or implied.
+// See the License for the specific language governing permissions and
+// limitations under the License.
+import { jsx as _jsx, jsxs as _jsxs, Fragment as _Fragment } from "react/jsx-runtime";
+import { useState } from 'react';
+import { Box, IconButton, Stack, Typography } from '@mui/material';
+import ExpandedIcon from 'mdi-material-ui/ChevronUp';
+import CollapsedIcon from 'mdi-material-ui/ChevronDown';
+import AddIcon from 'mdi-material-ui/Plus';
+import PencilIcon from 'mdi-material-ui/PencilOutline';
+import ArrowUpIcon from 'mdi-material-ui/ArrowUp';
+import ArrowDownIcon from 'mdi-material-ui/ArrowDown';
+import DeleteIcon from 'mdi-material-ui/DeleteOutline';
+import { usePanelGroupDialog, useEditMode, useLayouts, usePanels } from '../../context';
+/**
+ * Renders the title for a Grid section, optionally also supporting expanding
+ * and collapsing
+ */ export function GridTitle(props) {
+    const { groupIndex , title , collapse  } = props;
+    const [isHovered, setIsHovered] = useState(false);
+    const { openPanelGroupDialog , openDeletePanelGroupDialog  } = usePanelGroupDialog();
+    const { addPanel  } = usePanels();
+    const { isEditMode  } = useEditMode();
+    const { layouts , swapPanelGroups  } = useLayouts();
+    const text = /*#__PURE__*/ _jsx(Typography, {
+        variant: "h2",
+        sx: {
+            marginLeft: collapse !== undefined ? 1 : undefined
+        },
+        children: title
+    });
+    return /*#__PURE__*/ _jsx(Box, {
+        sx: {
+            display: 'flex',
+            justifyContent: 'start',
+            alignItems: 'center',
+            padding: (theme)=>theme.spacing(1),
+            backgroundColor: (theme)=>theme.palette.background.default
+        },
+        onMouseEnter: ()=>setIsHovered(true),
+        onMouseLeave: ()=>setIsHovered(false),
+        children: collapse ? /*#__PURE__*/ _jsxs(_Fragment, {
+            children: [
+                /*#__PURE__*/ _jsx(IconButton, {
+                    onClick: collapse.onToggleOpen,
+                    children: collapse.isOpen ? /*#__PURE__*/ _jsx(ExpandedIcon, {}) : /*#__PURE__*/ _jsx(CollapsedIcon, {})
+                }),
+                text,
+                isEditMode && isHovered && /*#__PURE__*/ _jsxs(Stack, {
+                    direction: "row",
+                    sx: {
+                        marginLeft: 'auto'
+                    },
+                    children: [
+                        /*#__PURE__*/ _jsx(IconButton, {
+                            "aria-label": "add panel to group",
+                            onClick: ()=>addPanel(groupIndex),
+                            children: /*#__PURE__*/ _jsx(AddIcon, {})
+                        }),
+                        /*#__PURE__*/ _jsx(IconButton, {
+                            "aria-label": "edit group",
+                            onClick: ()=>openPanelGroupDialog(groupIndex),
+                            children: /*#__PURE__*/ _jsx(PencilIcon, {})
+                        }),
+                        /*#__PURE__*/ _jsx(IconButton, {
+                            "aria-label": "delete group",
+                            onClick: ()=>openDeletePanelGroupDialog(groupIndex),
+                            children: /*#__PURE__*/ _jsx(DeleteIcon, {})
+                        }),
+                        /*#__PURE__*/ _jsx(IconButton, {
+                            "aria-label": "move group down",
+                            disabled: groupIndex === layouts.length - 1,
+                            onClick: ()=>swapPanelGroups(groupIndex, groupIndex + 1),
+                            children: /*#__PURE__*/ _jsx(ArrowDownIcon, {})
+                        }),
+                        /*#__PURE__*/ _jsx(IconButton, {
+                            "aria-label": "move group up",
+                            disabled: groupIndex === 0,
+                            onClick: ()=>swapPanelGroups(groupIndex, groupIndex - 1),
+                            children: /*#__PURE__*/ _jsx(ArrowUpIcon, {})
+                        })
+                    ]
+                })
+            ]
+        }) : // If we don't need expand/collapse, just render the title text
+        text
+    });
+}
+
+//# sourceMappingURL=GridTitle.js.map

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

@@ -0,0 +1 @@
+{"version":3,"sources":["../../../src/components/GridLayout/GridTitle.tsx"],"sourcesContent":["// Copyright 2022 The Perses Authors\n// Licensed under the Apache License, Version 2.0 (the \"License\");\n// you may not use this file except in compliance with the License.\n// You may obtain a copy of the License at\n//\n// http://www.apache.org/licenses/LICENSE-2.0\n//\n// Unless required by applicable law or agreed to in writing, software\n// distributed under the License is distributed on an \"AS IS\" BASIS,\n// WITHOUT WARRANTIES OR CONDITIONS OF ANY KIND, either express or implied.\n// See the License for the specific language governing permissions and\n// limitations under the License.\n\nimport { useState } from 'react';\nimport { Box, IconButton, Stack, Typography } from '@mui/material';\nimport ExpandedIcon from 'mdi-material-ui/ChevronUp';\nimport CollapsedIcon from 'mdi-material-ui/ChevronDown';\nimport AddIcon from 'mdi-material-ui/Plus';\nimport PencilIcon from 'mdi-material-ui/PencilOutline';\nimport ArrowUpIcon from 'mdi-material-ui/ArrowUp';\nimport ArrowDownIcon from 'mdi-material-ui/ArrowDown';\nimport DeleteIcon from 'mdi-material-ui/DeleteOutline';\n\nimport { usePanelGroupDialog, useEditMode, useLayouts, usePanels } from '../../context';\n\nexport interface GridTitleProps {\n  groupIndex: number;\n  title: string;\n  collapse?: {\n    isOpen: boolean;\n    onToggleOpen: () => void;\n  };\n}\n\n/**\n * Renders the title for a Grid section, optionally also supporting expanding\n * and collapsing\n */\nexport function GridTitle(props: GridTitleProps) {\n  const { groupIndex, title, collapse } = props;\n\n  const [isHovered, setIsHovered] = useState(false);\n  const { openPanelGroupDialog, openDeletePanelGroupDialog } = usePanelGroupDialog();\n  const { addPanel } = usePanels();\n  const { isEditMode } = useEditMode();\n  const { layouts, swapPanelGroups } = useLayouts();\n\n  const text = (\n    <Typography variant=\"h2\" sx={{ marginLeft: collapse !== undefined ? 1 : undefined }}>\n      {title}\n    </Typography>\n  );\n\n  return (\n    <Box\n      sx={{\n        display: 'flex',\n        justifyContent: 'start',\n        alignItems: 'center',\n        padding: (theme) => theme.spacing(1),\n        backgroundColor: (theme) => theme.palette.background.default,\n      }}\n      onMouseEnter={() => setIsHovered(true)}\n      onMouseLeave={() => setIsHovered(false)}\n    >\n      {collapse ? (\n        <>\n          <IconButton onClick={collapse.onToggleOpen}>\n            {collapse.isOpen ? <ExpandedIcon /> : <CollapsedIcon />}\n          </IconButton>\n          {text}\n          {isEditMode && isHovered && (\n            <Stack direction=\"row\" sx={{ marginLeft: 'auto' }}>\n              <IconButton aria-label=\"add panel to group\" onClick={() => addPanel(groupIndex)}>\n                <AddIcon />\n              </IconButton>\n              <IconButton aria-label=\"edit group\" onClick={() => openPanelGroupDialog(groupIndex)}>\n                <PencilIcon />\n              </IconButton>\n              <IconButton aria-label=\"delete group\" onClick={() => openDeletePanelGroupDialog(groupIndex)}>\n                <DeleteIcon />\n              </IconButton>\n              <IconButton\n                aria-label=\"move group down\"\n                disabled={groupIndex === layouts.length - 1}\n                onClick={() => swapPanelGroups(groupIndex, groupIndex + 1)}\n              >\n                <ArrowDownIcon />\n              </IconButton>\n              <IconButton\n                aria-label=\"move group up\"\n                disabled={groupIndex === 0}\n                onClick={() => swapPanelGroups(groupIndex, groupIndex - 1)}\n              >\n                <ArrowUpIcon />\n              </IconButton>\n            </Stack>\n          )}\n        </>\n      ) : (\n        // If we don't need expand/collapse, just render the title text\n        text\n      )}\n    </Box>\n  );\n}\n"],"names":["useState","Box","IconButton","Stack","Typography","ExpandedIcon","CollapsedIcon","AddIcon","PencilIcon","ArrowUpIcon","ArrowDownIcon","DeleteIcon","usePanelGroupDialog","useEditMode","useLayouts","usePanels","GridTitle","props","groupIndex","title","collapse","isHovered","setIsHovered","openPanelGroupDialog","openDeletePanelGroupDialog","addPanel","isEditMode","layouts","swapPanelGroups","text","variant","sx","marginLeft","undefined","display","justifyContent","alignItems","padding","theme","spacing","backgroundColor","palette","background","default","onMouseEnter","onMouseLeave","onClick","onToggleOpen","isOpen","direction","aria-label","disabled","length"],"mappings":"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"}

package/dist/components/GridLayout/index.js

@@ -1 +1,16 @@
-export*from"./GridLayout";export*from"./GridItemContent";
+// Copyright 2022 The Perses Authors
+// Licensed under the Apache License, Version 2.0 (the "License");
+// you may not use this file except in compliance with the License.
+// You may obtain a copy of the License at
+//
+// http://www.apache.org/licenses/LICENSE-2.0
+//
+// Unless required by applicable law or agreed to in writing, software
+// distributed under the License is distributed on an "AS IS" BASIS,
+// WITHOUT WARRANTIES OR CONDITIONS OF ANY KIND, either express or implied.
+// See the License for the specific language governing permissions and
+// limitations under the License.
+export * from './GridLayout';
+export * from './GridItemContent';
+
+//# sourceMappingURL=index.js.map

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

@@ -0,0 +1 @@
+{"version":3,"sources":["../../../src/components/GridLayout/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 './GridLayout';\nexport * from './GridItemContent';\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,cAAc,CAAC;AAC7B,cAAc,mBAAmB,CAAC"}

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

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

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

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

package/dist/components/Panel/DeletePanelDialog.js

@@ -0,0 +1,80 @@
+// Copyright 2022 The Perses Authors
+// Licensed under the Apache License, Version 2.0 (the "License");
+// you may not use this file except in compliance with the License.
+// You may obtain a copy of the License at
+//
+// http://www.apache.org/licenses/LICENSE-2.0
+//
+// Unless required by applicable law or agreed to in writing, software
+// distributed under the License is distributed on an "AS IS" BASIS,
+// WITHOUT WARRANTIES OR CONDITIONS OF ANY KIND, either express or implied.
+// See the License for the specific language governing permissions and
+// limitations under the License.
+import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
+import { IconButton, Dialog, DialogTitle, DialogContent, DialogActions, Button } from '@mui/material';
+import CloseIcon from 'mdi-material-ui/Close';
+import { usePanels, useLayouts } from '../../context';
+const DeletePanelDialog = ()=>{
+    const { deletePanelDialog , closeDeletePanelDialog  } = usePanels();
+    return /*#__PURE__*/ _jsxs(Dialog, {
+        open: deletePanelDialog !== undefined,
+        children: [
+            /*#__PURE__*/ _jsx(DialogTitle, {
+                children: "Delete Panel"
+            }),
+            /*#__PURE__*/ _jsx(IconButton, {
+                "aria-label": "Close",
+                onClick: ()=>closeDeletePanelDialog(),
+                sx: (theme)=>({
+                        position: 'absolute',
+                        top: theme.spacing(0.5),
+                        right: theme.spacing(0.5)
+                    }),
+                children: /*#__PURE__*/ _jsx(CloseIcon, {})
+            }),
+            deletePanelDialog && /*#__PURE__*/ _jsx(DeletePanelForm, {
+                deletePanelDialog: deletePanelDialog
+            })
+        ]
+    });
+};
+const DeletePanelForm = ({ deletePanelDialog  })=>{
+    var ref;
+    const { layouts  } = useLayouts();
+    const { deletePanels , closeDeletePanelDialog  } = usePanels();
+    const handleDelete = (e)=>{
+        e.preventDefault();
+        const { layoutItem  } = deletePanelDialog;
+        deletePanels([
+            layoutItem
+        ]);
+        closeDeletePanelDialog();
+    };
+    return /*#__PURE__*/ _jsxs("form", {
+        onSubmit: handleDelete,
+        children: [
+            /*#__PURE__*/ _jsx(DialogContent, {
+                sx: {
+                    width: '500px'
+                },
+                children: `Are you sure you want to delete ${deletePanelDialog.panelName} from ${(ref = layouts[deletePanelDialog.layoutItem.groupIndex]) === null || ref === void 0 ? void 0 : ref.title}? This action cannot be undone.`
+            }),
+            /*#__PURE__*/ _jsxs(DialogActions, {
+                children: [
+                    /*#__PURE__*/ _jsx(Button, {
+                        variant: "contained",
+                        type: "submit",
+                        children: "Delete"
+                    }),
+                    /*#__PURE__*/ _jsx(Button, {
+                        onClick: ()=>closeDeletePanelDialog(),
+                        children: "Cancel"
+                    })
+                ]
+            })
+        ]
+    });
+};
+export default DeletePanelDialog;
+
+//# sourceMappingURL=DeletePanelDialog.js.map

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

@@ -0,0 +1 @@
+{"version":3,"sources":["../../../src/components/Panel/DeletePanelDialog.tsx"],"sourcesContent":["// Copyright 2022 The Perses Authors\n// Licensed under the Apache License, Version 2.0 (the \"License\");\n// you may not use this file except in compliance with the License.\n// You may obtain a copy of the License at\n//\n// http://www.apache.org/licenses/LICENSE-2.0\n//\n// Unless required by applicable law or agreed to in writing, software\n// distributed under the License is distributed on an \"AS IS\" BASIS,\n// WITHOUT WARRANTIES OR CONDITIONS OF ANY KIND, either express or implied.\n// See the License for the specific language governing permissions and\n// limitations under the License.\n\nimport { FormEvent } from 'react';\nimport { IconButton, Dialog, DialogTitle, DialogContent, DialogActions, Button } from '@mui/material';\nimport CloseIcon from 'mdi-material-ui/Close';\nimport { usePanels, useLayouts } from '../../context';\nimport { DeletePanelDialog } from '../../context/DashboardProvider/panel-editing-slice';\n\nconst DeletePanelDialog = () => {\n  const { deletePanelDialog, closeDeletePanelDialog } = usePanels();\n\n  return (\n    <Dialog open={deletePanelDialog !== undefined}>\n      <DialogTitle>Delete Panel</DialogTitle>\n      <IconButton\n        aria-label=\"Close\"\n        onClick={() => closeDeletePanelDialog()}\n        sx={(theme) => ({\n          position: 'absolute',\n          top: theme.spacing(0.5),\n          right: theme.spacing(0.5),\n        })}\n      >\n        <CloseIcon />\n      </IconButton>\n      {deletePanelDialog && <DeletePanelForm deletePanelDialog={deletePanelDialog} />}\n    </Dialog>\n  );\n};\n\ninterface DeletePanelFormProps {\n  deletePanelDialog: DeletePanelDialog;\n}\n\nconst DeletePanelForm = ({ deletePanelDialog }: DeletePanelFormProps) => {\n  const { layouts } = useLayouts();\n  const { deletePanels, closeDeletePanelDialog } = usePanels();\n\n  const handleDelete = (e: FormEvent) => {\n    e.preventDefault();\n    const { layoutItem } = deletePanelDialog;\n    deletePanels([layoutItem]);\n    closeDeletePanelDialog();\n  };\n  return (\n    <form onSubmit={handleDelete}>\n      <DialogContent sx={{ width: '500px' }}>{`Are you sure you want to delete ${deletePanelDialog.panelName} from ${\n        layouts[deletePanelDialog.layoutItem.groupIndex]?.title\n      }? This action cannot be undone.`}</DialogContent>\n      <DialogActions>\n        <Button variant=\"contained\" type=\"submit\">\n          Delete\n        </Button>\n        <Button onClick={() => closeDeletePanelDialog()}>Cancel</Button>\n      </DialogActions>\n    </form>\n  );\n};\n\nexport default DeletePanelDialog;\n"],"names":["IconButton","Dialog","DialogTitle","DialogContent","DialogActions","Button","CloseIcon","usePanels","useLayouts","DeletePanelDialog","deletePanelDialog","closeDeletePanelDialog","open","undefined","aria-label","onClick","sx","theme","position","top","spacing","right","DeletePanelForm","layouts","deletePanels","handleDelete","e","preventDefault","layoutItem","form","onSubmit","width","panelName","groupIndex","title","variant","type"],"mappings":"AAAA,oCAAoC;AACpC,kEAAkE;AAClE,mEAAmE;AACnE,0CAA0C;AAC1C,EAAE;AACF,6CAA6C;AAC7C,EAAE;AACF,sEAAsE;AACtE,oEAAoE;AACpE,2EAA2E;AAC3E,sEAAsE;AACtE,iCAAiC;AAEjC;AACA,SAASA,UAAU,EAAEC,MAAM,EAAEC,WAAW,EAAEC,aAAa,EAAEC,aAAa,EAAEC,MAAM,QAAQ,eAAe,CAAC;AACtG,OAAOC,SAAS,MAAM,uBAAuB,CAAC;AAC9C,SAASC,SAAS,EAAEC,UAAU,QAAQ,eAAe,CAAC;AAGtD,MAAMC,iBAAiB,GAAG,IAAM;IAC9B,MAAM,EAAEC,iBAAiB,CAAA,EAAEC,sBAAsB,CAAA,EAAE,GAAGJ,SAAS,EAAE,AAAC;IAElE,qBACE,MAACN,MAAM;QAACW,IAAI,EAAEF,iBAAiB,KAAKG,SAAS;;0BAC3C,KAACX,WAAW;0BAAC,cAAY;cAAc;0BACvC,KAACF,UAAU;gBACTc,YAAU,EAAC,OAAO;gBAClBC,OAAO,EAAE,IAAMJ,sBAAsB,EAAE;gBACvCK,EAAE,EAAE,CAACC,KAAK,GAAM,CAAA;wBACdC,QAAQ,EAAE,UAAU;wBACpBC,GAAG,EAAEF,KAAK,CAACG,OAAO,CAAC,GAAG,CAAC;wBACvBC,KAAK,EAAEJ,KAAK,CAACG,OAAO,CAAC,GAAG,CAAC;qBAC1B,CAAA,AAAC;0BAEF,cAAA,KAACd,SAAS,KAAG;cACF;YACZI,iBAAiB,kBAAI,KAACY,eAAe;gBAACZ,iBAAiB,EAAEA,iBAAiB;cAAI;;MACxE,CACT;AACJ,CAAC,AAAC;AAMF,MAAMY,eAAe,GAAG,CAAC,EAAEZ,iBAAiB,CAAA,EAAwB,GAAK;QAajEa,GAAgD;IAZtD,MAAM,EAAEA,OAAO,CAAA,EAAE,GAAGf,UAAU,EAAE,AAAC;IACjC,MAAM,EAAEgB,YAAY,CAAA,EAAEb,sBAAsB,CAAA,EAAE,GAAGJ,SAAS,EAAE,AAAC;IAE7D,MAAMkB,YAAY,GAAG,CAACC,CAAY,GAAK;QACrCA,CAAC,CAACC,cAAc,EAAE,CAAC;QACnB,MAAM,EAAEC,UAAU,CAAA,EAAE,GAAGlB,iBAAiB,AAAC;QACzCc,YAAY,CAAC;YAACI,UAAU;SAAC,CAAC,CAAC;QAC3BjB,sBAAsB,EAAE,CAAC;IAC3B,CAAC,AAAC;IACF,qBACE,MAACkB,MAAI;QAACC,QAAQ,EAAEL,YAAY;;0BAC1B,KAACtB,aAAa;gBAACa,EAAE,EAAE;oBAAEe,KAAK,EAAE,OAAO;iBAAE;0BAAG,CAAC,gCAAgC,EAAErB,iBAAiB,CAACsB,SAAS,CAAC,MAAM,EAC3GT,CAAAA,GAAgD,GAAhDA,OAAO,CAACb,iBAAiB,CAACkB,UAAU,CAACK,UAAU,CAAC,cAAhDV,GAAgD,WAAO,GAAvDA,KAAAA,CAAuD,GAAvDA,GAAgD,CAAEW,KAAK,CACxD,+BAA+B,CAAC;cAAiB;0BAClD,MAAC9B,aAAa;;kCACZ,KAACC,MAAM;wBAAC8B,OAAO,EAAC,WAAW;wBAACC,IAAI,EAAC,QAAQ;kCAAC,QAE1C;sBAAS;kCACT,KAAC/B,MAAM;wBAACU,OAAO,EAAE,IAAMJ,sBAAsB,EAAE;kCAAE,QAAM;sBAAS;;cAClD;;MACX,CACP;AACJ,CAAC,AAAC;AAEF,eAAeF,iBAAiB,CAAC"}

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

@@ -4,7 +4,7 @@ import { CardProps } from '@mui/material';
 export interface PanelProps extends CardProps {
     definition: PanelDefinition;
     groupIndex: number;
-    panelKey: string;
+    itemIndex: number;
 }
 /**
  * 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":";AAkBA,OAAO,EAAE,eAAe,EAAE,MAAM,kBAAkB,CAAC;AACnD,OAAO,EAGL,SAAS,EAOV,MAAM,eAAe,CAAC;AAOvB,MAAM,WAAW,UAAW,SAAQ,SAAS;IAC3C,UAAU,EAAE,eAAe,CAAC;IAC5B,UAAU,EAAE,MAAM,CAAC;IACnB,QAAQ,EAAE,MAAM,CAAC;CAClB;AAED;;GAEG;AACH,wBAAgB,KAAK,CAAC,KAAK,EAAE,UAAU,eA2HtC"}
+{"version":3,"file":"Panel.d.ts","sourceRoot":"","sources":["../../../src/components/Panel/Panel.tsx"],"names":[],"mappings":";AAiBA,OAAO,EAAE,eAAe,EAAE,MAAM,kBAAkB,CAAC;AACnD,OAAO,EAGL,SAAS,EAOV,MAAM,eAAe,CAAC;AAQvB,MAAM,WAAW,UAAW,SAAQ,SAAS;IAC3C,UAAU,EAAE,eAAe,CAAC;IAC5B,UAAU,EAAE,MAAM,CAAC;IACnB,SAAS,EAAE,MAAM,CAAC;CACnB;AAED;;GAEG;AACH,wBAAgB,KAAK,CAAC,KAAK,EAAE,UAAU,eAwItC"}

package/dist/components/Panel/Panel.js

@@ -1 +1,181 @@
-import{jsx as _jsx,jsxs as _jsxs}from"react/jsx-runtime";import{useState,useMemo}from"react";import useResizeObserver from"use-resize-observer";import{useInView}from"react-intersection-observer";import{PluginBoundary}from"@perses-dev/plugin-system";import{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 DragIcon from"mdi-material-ui/DragVertical";import{useDashboardApp,useEditMode}from"../../context";import{PanelContent}from"./PanelContent";export function Panel(e){const{definition:i,groupIndex:o,panelKey:n,...r}=e,[t,a]=useState(null),[s,l]=useState(!1),{width:d,height:p}=useResizeObserver({ref:t}),c=useMemo((()=>{if(void 0!==d&&void 0!==p)return{width:d,height:p}}),[d,p]),{ref:m,inView:u}=useInView({threshold:.3,initialInView:!1,triggerOnce:!0}),{isEditMode:x}=useEditMode(),{openPanelDrawer:f}=useDashboardApp();return _jsxs(Card,{ref:m,sx:{...r.sx,width:"100%",height:"100%",display:"flex",flexFlow:"column nowrap"},variant:"outlined",...r,onMouseEnter:()=>l(!0),onMouseLeave:()=>l(!1),children:[_jsx(CardHeader,{title:_jsxs(Box,{sx:{display:"flex",alignItems:"center",minHeight:"24px"},children:[_jsx(Typography,{component:"h2",variant:"body2",fontWeight:e=>e.typography.fontWeightMedium,whiteSpace:"nowrap",overflow:"hidden",textOverflow:"ellipsis",children:i.display.name}),_jsxs(Box,{sx:{display:"flex",alignItems:"center",marginLeft:"auto"},children:[!x&&s&&i.display.description&&_jsx(InfoTooltip,{id:"info-tooltip",description:i.display.description,placement:TooltipPlacement.Bottom,children:_jsx(InformationOutlineIcon,{"aria-describedby":"info-tooltip","aria-hidden":!1,fontSize:"small",sx:{cursor:"pointer"}})}),x&&s&&_jsxs(Stack,{direction:"row",alignItems:"center",spacing:.5,children:[_jsx(IconButton,{"aria-label":"edit panel",size:"small",onClick:()=>{f({groupIndex:o,panelKey:n})},children:_jsx(PencilIcon,{})}),_jsx(IconButton,{"aria-label":"drag handle",size:"small",children:_jsx(DragIcon,{className:"drag-handle",sx:{cursor:"grab"}})})]})]})]}),sx:{display:"block",padding:e=>e.spacing(1,1.5),borderBottom:e=>`solid 1px ${e.palette.divider}`}}),_jsx(CardContent,{sx:{position:"relative",overflow:"hidden",flexGrow:1,padding:e=>e.spacing(1.5),":last-child":{padding:e=>e.spacing(1.5)}},ref:a,children:_jsx(PluginBoundary,{loadingFallback:"Loading...",ErrorFallbackComponent:ErrorAlert,children:!0===u&&_jsx(PanelContent,{definition:i,contentDimensions:c})})})]})}const IconButton=styled(MuiIconButton)((({theme:e})=>({borderRadius:e.shape.borderRadius,padding:"4px"})));
+// Copyright 2022 The Perses Authors
+// Licensed under the Apache License, Version 2.0 (the "License");
+// you may not use this file except in compliance with the License.
+// You may obtain a copy of the License at
+//
+// http://www.apache.org/licenses/LICENSE-2.0
+//
+// Unless required by applicable law or agreed to in writing, software
+// distributed under the License is distributed on an "AS IS" BASIS,
+// WITHOUT WARRANTIES OR CONDITIONS OF ANY KIND, either express or implied.
+// See the License for the specific language governing permissions and
+// limitations under the License.
+import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
+import { useState, useMemo } from 'react';
+import useResizeObserver from 'use-resize-observer';
+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 DeleteIcon from 'mdi-material-ui/DeleteOutline';
+import DragIcon from 'mdi-material-ui/DragVertical';
+import { usePanels, useEditMode } from '../../context';
+import { PanelContent } from './PanelContent';
+/**
+ * Renders a PanelDefinition's content inside of a Card.
+ */ export function Panel(props) {
+    const { definition , groupIndex , itemIndex , ...others } = props;
+    const [contentElement, setContentElement] = useState(null);
+    const [isHovered, setIsHovered] = useState(false);
+    const { width , height  } = useResizeObserver({
+        ref: contentElement
+    });
+    const contentDimensions = useMemo(()=>{
+        if (width === undefined || height === undefined) return undefined;
+        return {
+            width,
+            height
+        };
+    }, [
+        width,
+        height
+    ]);
+    const { ref , inView  } = useInView({
+        threshold: 0.3,
+        initialInView: false,
+        triggerOnce: true
+    });
+    // TODO: adjust padding for small panels, consistent way to determine isLargePanel here and in StatChart
+    const panelPadding = 1.5;
+    const { isEditMode  } = useEditMode();
+    const { editPanel , openDeletePanelDialog  } = usePanels();
+    const handleEditButtonClick = ()=>{
+        editPanel({
+            groupIndex,
+            itemIndex
+        });
+    };
+    return /*#__PURE__*/ _jsxs(Card, {
+        ref: ref,
+        sx: {
+            ...others.sx,
+            width: '100%',
+            height: '100%',
+            display: 'flex',
+            flexFlow: 'column nowrap'
+        },
+        variant: "outlined",
+        ...others,
+        onMouseEnter: ()=>setIsHovered(true),
+        onMouseLeave: ()=>setIsHovered(false),
+        children: [
+            /*#__PURE__*/ _jsx(CardHeader, {
+                title: /*#__PURE__*/ _jsxs(Box, {
+                    sx: {
+                        display: 'flex',
+                        alignItems: 'center',
+                        minHeight: '24px'
+                    },
+                    children: [
+                        /*#__PURE__*/ _jsx(Typography, {
+                            component: "h2",
+                            variant: "body2",
+                            fontWeight: (theme)=>theme.typography.fontWeightMedium,
+                            whiteSpace: "nowrap",
+                            overflow: "hidden",
+                            textOverflow: "ellipsis",
+                            children: definition.spec.display.name
+                        }),
+                        /*#__PURE__*/ _jsxs(Box, {
+                            sx: {
+                                display: 'flex',
+                                alignItems: 'center',
+                                marginLeft: 'auto'
+                            },
+                            children: [
+                                !isEditMode && isHovered && definition.spec.display.description && /*#__PURE__*/ _jsx(InfoTooltip, {
+                                    id: "info-tooltip",
+                                    description: definition.spec.display.description,
+                                    placement: TooltipPlacement.Bottom,
+                                    children: /*#__PURE__*/ _jsx(InformationOutlineIcon, {
+                                        "aria-describedby": "info-tooltip",
+                                        "aria-hidden": false,
+                                        fontSize: "small",
+                                        sx: {
+                                            cursor: 'pointer'
+                                        }
+                                    })
+                                }),
+                                isEditMode && isHovered && /*#__PURE__*/ _jsxs(Stack, {
+                                    direction: "row",
+                                    alignItems: "center",
+                                    spacing: 0.5,
+                                    children: [
+                                        /*#__PURE__*/ _jsx(IconButton, {
+                                            "aria-label": "edit panel",
+                                            size: "small",
+                                            onClick: handleEditButtonClick,
+                                            children: /*#__PURE__*/ _jsx(PencilIcon, {})
+                                        }),
+                                        /*#__PURE__*/ _jsx(IconButton, {
+                                            "aria-label": "delete panel",
+                                            size: "small",
+                                            onClick: ()=>openDeletePanelDialog({
+                                                    groupIndex,
+                                                    itemIndex
+                                                }),
+                                            children: /*#__PURE__*/ _jsx(DeleteIcon, {})
+                                        }),
+                                        /*#__PURE__*/ _jsx(IconButton, {
+                                            "aria-label": "drag handle",
+                                            size: "small",
+                                            children: /*#__PURE__*/ _jsx(DragIcon, {
+                                                className: "drag-handle",
+                                                sx: {
+                                                    cursor: 'grab'
+                                                }
+                                            })
+                                        })
+                                    ]
+                                })
+                            ]
+                        })
+                    ]
+                }),
+                sx: {
+                    display: 'block',
+                    padding: (theme)=>theme.spacing(1, panelPadding),
+                    borderBottom: (theme)=>`solid 1px ${theme.palette.divider}`
+                }
+            }),
+            /*#__PURE__*/ _jsx(CardContent, {
+                sx: {
+                    position: 'relative',
+                    overflow: 'hidden',
+                    flexGrow: 1,
+                    padding: (theme)=>theme.spacing(panelPadding),
+                    // Override MUI default style for last-child
+                    ':last-child': {
+                        padding: (theme)=>theme.spacing(panelPadding)
+                    }
+                },
+                ref: setContentElement,
+                children: /*#__PURE__*/ _jsx(ErrorBoundary, {
+                    FallbackComponent: ErrorAlert,
+                    children: inView === true && /*#__PURE__*/ _jsx(PanelContent, {
+                        panelPluginKind: definition.spec.plugin.kind,
+                        spec: definition.spec.plugin.spec,
+                        contentDimensions: contentDimensions
+                    })
+                })
+            })
+        ]
+    });
+}
+const IconButton = styled(MuiIconButton)(({ theme  })=>({
+        borderRadius: theme.shape.borderRadius,
+        padding: '4px'
+    }));
+
+//# sourceMappingURL=Panel.js.map

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

@@ -0,0 +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 { usePanels, useEditMode } from '../../context';\nimport { PanelContent } from './PanelContent';\n\nexport interface PanelProps extends CardProps {\n  definition: PanelDefinition;\n  groupIndex: number;\n  itemIndex: number;\n}\n\n/**\n * Renders a PanelDefinition's content inside of a Card.\n */\nexport function Panel(props: PanelProps) {\n  const { definition, groupIndex, itemIndex, ...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 { editPanel, openDeletePanelDialog } = usePanels();\n\n  const handleEditButtonClick = () => {\n    editPanel({ groupIndex, itemIndex });\n  };\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={handleEditButtonClick}>\n                    <PencilIcon />\n                  </IconButton>\n                  <IconButton\n                    aria-label=\"delete panel\"\n                    size=\"small\"\n                    onClick={() => openDeletePanelDialog({ groupIndex, itemIndex })}\n                  >\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","usePanels","useEditMode","PanelContent","Panel","props","definition","groupIndex","itemIndex","others","contentElement","setContentElement","isHovered","setIsHovered","width","height","ref","contentDimensions","undefined","inView","threshold","initialInView","triggerOnce","panelPadding","isEditMode","editPanel","openDeletePanelDialog","handleEditButtonClick","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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"}