@perses-dev/dashboards 0.0.0-snapshot-time-range-height-80d08fc

package/dist/components/GridLayout/GridTitle.js

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

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

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

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

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

package/dist/components/GridLayout/index.js

@@ -0,0 +1,16 @@
+// 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/Panel.d.ts

@@ -0,0 +1,13 @@
+/// <reference types="react" />
+import { PanelDefinition } from '@perses-dev/core';
+import { CardProps } from '@mui/material';
+import { PanelHeaderProps } from './PanelHeader';
+export interface PanelProps extends CardProps<'section'> {
+    definition: PanelDefinition;
+    editHandlers?: PanelHeaderProps['editHandlers'];
+}
+/**
+ * Renders a PanelDefinition's content inside of a Card.
+ */
+export declare function Panel(props: PanelProps): JSX.Element;
+//# sourceMappingURL=Panel.d.ts.map

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

@@ -0,0 +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,wBAAgB,KAAK,CAAC,KAAK,EAAE,UAAU,eA2FtC"}

package/dist/components/Panel/Panel.js

@@ -0,0 +1,114 @@
+// 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, combineSx, useId } from '@perses-dev/components';
+import { Card, CardContent } from '@mui/material';
+import { PanelHeader } from './PanelHeader';
+import { PanelContent } from './PanelContent';
+/**
+ * Renders a PanelDefinition's content inside of a Card.
+ */ export function Panel(props) {
+    const { definition , editHandlers , onMouseEnter , onMouseLeave , sx , ...others } = props;
+    // Make sure we have an ID we can use for aria attributes
+    const generatedPanelId = useId('Panel');
+    const headerId = `${generatedPanelId}-header`;
+    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 handleMouseEnter = (e)=>{
+        setIsHovered(true);
+        onMouseEnter === null || onMouseEnter === void 0 ? void 0 : onMouseEnter(e);
+    };
+    const handleMouseLeave = (e)=>{
+        setIsHovered(false);
+        onMouseLeave === null || onMouseLeave === void 0 ? void 0 : onMouseLeave(e);
+    };
+    return /*#__PURE__*/ _jsxs(Card, {
+        ref: ref,
+        component: "section",
+        sx: combineSx({
+            width: '100%',
+            height: '100%',
+            display: 'flex',
+            flexFlow: 'column nowrap'
+        }, sx),
+        variant: "outlined",
+        onMouseEnter: handleMouseEnter,
+        onMouseLeave: handleMouseLeave,
+        "aria-labelledby": headerId,
+        "aria-describedby": headerId,
+        ...others,
+        children: [
+            /*#__PURE__*/ _jsx(PanelHeader, {
+                id: headerId,
+                title: definition.spec.display.name,
+                description: definition.spec.display.description,
+                editHandlers: editHandlers,
+                isHovered: isHovered,
+                sx: {
+                    paddingX: (theme)=>theme.spacing(panelPadding)
+                }
+            }),
+            /*#__PURE__*/ _jsx(CardContent, {
+                component: "figure",
+                sx: {
+                    position: 'relative',
+                    overflow: 'hidden',
+                    flexGrow: 1,
+                    margin: 0,
+                    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,
+                    resetKeys: [
+                        definition.spec.plugin.spec
+                    ],
+                    children: inView === true && /*#__PURE__*/ _jsx(PanelContent, {
+                        panelPluginKind: definition.spec.plugin.kind,
+                        spec: definition.spec.plugin.spec,
+                        contentDimensions: contentDimensions
+                    })
+                })
+            })
+        ]
+    });
+}
+
+//# 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, combineSx, useId } 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 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  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 handleMouseEnter: CardProps['onMouseEnter'] = (e) => {\n    setIsHovered(true);\n    onMouseEnter?.(e);\n  };\n\n  const handleMouseLeave: CardProps['onMouseLeave'] = (e) => {\n    setIsHovered(false);\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      {...others}\n    >\n      <PanelHeader\n        id={headerId}\n        title={definition.spec.display.name}\n        description={definition.spec.display.description}\n        editHandlers={editHandlers}\n        isHovered={isHovered}\n        sx={{ paddingX: (theme) => theme.spacing(panelPadding) }}\n      />\n      <CardContent\n        component=\"figure\"\n        sx={{\n          position: 'relative',\n          overflow: 'hidden',\n          flexGrow: 1,\n          margin: 0,\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} 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","useResizeObserver","useInView","ErrorBoundary","ErrorAlert","combineSx","useId","Card","CardContent","PanelHeader","PanelContent","Panel","props","definition","editHandlers","onMouseEnter","onMouseLeave","sx","others","generatedPanelId","headerId","contentElement","setContentElement","isHovered","setIsHovered","width","height","ref","contentDimensions","undefined","inView","threshold","initialInView","triggerOnce","panelPadding","handleMouseEnter","e","handleMouseLeave","component","display","flexFlow","variant","aria-labelledby","aria-describedby","id","title","spec","name","description","paddingX","theme","spacing","position","overflow","flexGrow","margin","padding","FallbackComponent","resetKeys","plugin","panelPluginKind","kind"],"mappings":"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"}

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

@@ -0,0 +1,2 @@
+export {};
+//# sourceMappingURL=Panel.test.d.ts.map

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

@@ -0,0 +1 @@
+{"version":3,"file":"Panel.test.d.ts","sourceRoot":"","sources":["../../../src/components/Panel/Panel.test.tsx"],"names":[],"mappings":""}

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

@@ -0,0 +1,122 @@
+// 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 } from "react/jsx-runtime";
+import { screen, waitFor } from '@testing-library/react';
+import userEvent from '@testing-library/user-event';
+import { renderWithContext } from '../../test';
+import { Panel } from './Panel';
+describe('Panel', ()=>{
+    const createTestPanel = ()=>({
+            kind: 'Panel',
+            spec: {
+                display: {
+                    name: 'Fake Panel Title',
+                    description: 'This is a fake panel'
+                },
+                plugin: {
+                    kind: 'TimeSeriesChart',
+                    spec: {}
+                }
+            }
+        });
+    // Helper to render the panel with some context set
+    const renderPanel = (definition, editHandlers)=>{
+        definition !== null && definition !== void 0 ? definition : definition = createTestPanel();
+        renderWithContext(/*#__PURE__*/ _jsx(Panel, {
+            definition: definition,
+            editHandlers: editHandlers
+        }));
+    };
+    // Helper to get the panel once rendered
+    const getPanel = ()=>screen.getByRole('region', {
+            name: 'Fake Panel Title'
+        });
+    it('should render panel', async ()=>{
+        renderPanel();
+        const panel = getPanel();
+        expect(panel).toBeInTheDocument();
+        // Should diplay header with panel's title
+        const header = screen.getByRole('banner');
+        expect(header).toHaveTextContent('Fake Panel Title');
+        // Should display chart's content from the fake panel plugin
+        const content = screen.getByRole('figure');
+        await waitFor(()=>{
+            expect(content).toHaveTextContent('TimeSeriesChart panel');
+        });
+        expect(content);
+    });
+    it('shows panel description', async ()=>{
+        renderPanel();
+        const panel = getPanel();
+        // Description button should not be visible until hover on panel
+        const missingButton = screen.queryByRole('button', {
+            name: /description/i
+        });
+        expect(missingButton).not.toBeInTheDocument();
+        userEvent.hover(panel);
+        const descriptionButton = screen.getByRole('button', {
+            name: /description/i
+        });
+        expect(descriptionButton).toBeInTheDocument();
+        // Can hover to see panel description in tooltip
+        userEvent.hover(descriptionButton);
+        const tooltip = await screen.findByRole('tooltip');
+        expect(tooltip).toHaveTextContent('This is a fake panel');
+    });
+    it('does not show description when panel does not have one', ()=>{
+        // Render a panel without a description set
+        const withoutDescription = createTestPanel();
+        withoutDescription.spec.display.description = undefined;
+        renderPanel(withoutDescription);
+        const panel = getPanel();
+        userEvent.hover(panel);
+        const descriptionButton = screen.queryByRole('button', {
+            name: /description/i
+        });
+        expect(descriptionButton).not.toBeInTheDocument();
+    });
+    it('does not show description in edit mode', ()=>{
+        renderPanel(undefined, {
+            onEditPanelClick: jest.fn(),
+            onDeletePanelClick: jest.fn()
+        });
+        const panel = getPanel();
+        userEvent.hover(panel);
+        const descriptionButton = screen.queryByRole('button', {
+            name: /description/i
+        });
+        expect(descriptionButton).not.toBeInTheDocument();
+    });
+    it('can trigger panel actions in edit mode', ()=>{
+        const onEditPanelClick = jest.fn();
+        const onDeletePanelClick = jest.fn();
+        renderPanel(undefined, {
+            onEditPanelClick,
+            onDeletePanelClick
+        });
+        const panel = getPanel();
+        userEvent.hover(panel);
+        const editButton = screen.getByRole('button', {
+            name: /edit/i
+        });
+        userEvent.click(editButton);
+        const deleteButton = screen.getByRole('button', {
+            name: /delete/i
+        });
+        userEvent.click(deleteButton);
+        expect(onEditPanelClick).toHaveBeenCalledTimes(1);
+        expect(onDeletePanelClick).toHaveBeenCalledTimes(1);
+    });
+});
+
+//# sourceMappingURL=Panel.test.js.map

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

@@ -0,0 +1 @@
+{"version":3,"sources":["../../../src/components/Panel/Panel.test.tsx"],"sourcesContent":["// Copyright 2022 The Perses Authors\n// Licensed under the Apache License, Version 2.0 (the \"License\");\n// you may not use this file except in compliance with the License.\n// You may obtain a copy of the License at\n//\n// http://www.apache.org/licenses/LICENSE-2.0\n//\n// Unless required by applicable law or agreed to in writing, software\n// distributed under the License is distributed on an \"AS IS\" BASIS,\n// WITHOUT WARRANTIES OR CONDITIONS OF ANY KIND, either express or implied.\n// See the License for the specific language governing permissions and\n// limitations under the License.\n\nimport { screen, waitFor } from '@testing-library/react';\nimport userEvent from '@testing-library/user-event';\nimport { PanelDefinition } from '@perses-dev/core';\nimport { renderWithContext } from '../../test';\nimport { Panel, PanelProps } from './Panel';\n\ndescribe('Panel', () => {\n  const createTestPanel = (): PanelDefinition => ({\n    kind: 'Panel',\n    spec: {\n      display: {\n        name: 'Fake Panel Title',\n        description: 'This is a fake panel',\n      },\n      plugin: {\n        kind: 'TimeSeriesChart',\n        spec: {},\n      },\n    },\n  });\n\n  // Helper to render the panel with some context set\n  const renderPanel = (definition?: PanelDefinition, editHandlers?: PanelProps['editHandlers']) => {\n    definition ??= createTestPanel();\n\n    renderWithContext(<Panel definition={definition} editHandlers={editHandlers} />);\n  };\n\n  // Helper to get the panel once rendered\n  const getPanel = () => screen.getByRole('region', { name: 'Fake Panel Title' });\n\n  it('should render panel', async () => {\n    renderPanel();\n\n    const panel = getPanel();\n    expect(panel).toBeInTheDocument();\n\n    // Should diplay header with panel's title\n    const header = screen.getByRole('banner');\n    expect(header).toHaveTextContent('Fake Panel Title');\n\n    // Should display chart's content from the fake panel plugin\n    const content = screen.getByRole('figure');\n    await waitFor(() => {\n      expect(content).toHaveTextContent('TimeSeriesChart panel');\n    });\n    expect(content);\n  });\n\n  it('shows panel description', async () => {\n    renderPanel();\n\n    const panel = getPanel();\n\n    // Description button should not be visible until hover on panel\n    const missingButton = screen.queryByRole('button', { name: /description/i });\n    expect(missingButton).not.toBeInTheDocument();\n    userEvent.hover(panel);\n    const descriptionButton = screen.getByRole('button', { name: /description/i });\n    expect(descriptionButton).toBeInTheDocument();\n\n    // Can hover to see panel description in tooltip\n    userEvent.hover(descriptionButton);\n    const tooltip = await screen.findByRole('tooltip');\n    expect(tooltip).toHaveTextContent('This is a fake panel');\n  });\n\n  it('does not show description when panel does not have one', () => {\n    // Render a panel without a description set\n    const withoutDescription = createTestPanel();\n    withoutDescription.spec.display.description = undefined;\n    renderPanel(withoutDescription);\n\n    const panel = getPanel();\n    userEvent.hover(panel);\n    const descriptionButton = screen.queryByRole('button', { name: /description/i });\n    expect(descriptionButton).not.toBeInTheDocument();\n  });\n\n  it('does not show description in edit mode', () => {\n    renderPanel(undefined, { onEditPanelClick: jest.fn(), onDeletePanelClick: jest.fn() });\n\n    const panel = getPanel();\n    userEvent.hover(panel);\n    const descriptionButton = screen.queryByRole('button', { name: /description/i });\n    expect(descriptionButton).not.toBeInTheDocument();\n  });\n\n  it('can trigger panel actions in edit mode', () => {\n    const onEditPanelClick = jest.fn();\n    const onDeletePanelClick = jest.fn();\n    renderPanel(undefined, { onEditPanelClick, onDeletePanelClick });\n\n    const panel = getPanel();\n    userEvent.hover(panel);\n\n    const editButton = screen.getByRole('button', { name: /edit/i });\n    userEvent.click(editButton);\n\n    const deleteButton = screen.getByRole('button', { name: /delete/i });\n    userEvent.click(deleteButton);\n\n    expect(onEditPanelClick).toHaveBeenCalledTimes(1);\n    expect(onDeletePanelClick).toHaveBeenCalledTimes(1);\n  });\n});\n"],"names":["screen","waitFor","userEvent","renderWithContext","Panel","describe","createTestPanel","kind","spec","display","name","description","plugin","renderPanel","definition","editHandlers","getPanel","getByRole","it","panel","expect","toBeInTheDocument","header","toHaveTextContent","content","missingButton","queryByRole","not","hover","descriptionButton","tooltip","findByRole","withoutDescription","undefined","onEditPanelClick","jest","fn","onDeletePanelClick","editButton","click","deleteButton","toHaveBeenCalledTimes"],"mappings":"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"}

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

@@ -0,0 +1,12 @@
+/// <reference types="react" />
+import { PanelProps } from '@perses-dev/plugin-system';
+import { UnknownSpec } from '@perses-dev/core';
+export interface PanelContentProps extends PanelProps<UnknownSpec> {
+    panelPluginKind: string;
+}
+/**
+ * A small wrapper component that renders the appropriate PanelComponent from a Panel plugin based on the panel
+ * definition's kind. Used so that an ErrorBoundary can be wrapped around this.
+ */
+export declare function PanelContent(props: PanelContentProps): JSX.Element;
+//# sourceMappingURL=PanelContent.d.ts.map

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

@@ -0,0 +1 @@
+{"version":3,"file":"PanelContent.d.ts","sourceRoot":"","sources":["../../../src/components/Panel/PanelContent.tsx"],"names":[],"mappings":";AAaA,OAAO,EAAa,UAAU,EAAE,MAAM,2BAA2B,CAAC;AAElE,OAAO,EAAE,WAAW,EAAE,MAAM,kBAAkB,CAAC;AAE/C,MAAM,WAAW,iBAAkB,SAAQ,UAAU,CAAC,WAAW,CAAC;IAChE,eAAe,EAAE,MAAM,CAAC;CACzB;AAED;;;GAGG;AACH,wBAAgB,YAAY,CAAC,KAAK,EAAE,iBAAiB,eAcpD"}

package/dist/components/Panel/PanelContent.js

@@ -0,0 +1,41 @@
+// 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 } from "react/jsx-runtime";
+import { usePlugin } from '@perses-dev/plugin-system';
+import { Skeleton } from '@mui/material';
+/**
+ * A small wrapper component that renders the appropriate PanelComponent from a Panel plugin based on the panel
+ * definition's kind. Used so that an ErrorBoundary can be wrapped around this.
+ */ export function PanelContent(props) {
+    const { panelPluginKind , contentDimensions , ...others } = props;
+    const { data: plugin , isLoading  } = usePlugin('Panel', panelPluginKind, {
+        useErrorBoundary: true
+    });
+    const PanelComponent = plugin === null || plugin === void 0 ? void 0 : plugin.PanelComponent;
+    if (isLoading) {
+        return /*#__PURE__*/ _jsx(Skeleton, {
+            variant: "rectangular",
+            width: contentDimensions === null || contentDimensions === void 0 ? void 0 : contentDimensions.width,
+            height: contentDimensions === null || contentDimensions === void 0 ? void 0 : contentDimensions.height
+        });
+    }
+    if (PanelComponent === undefined) {
+        throw new Error(`Missing PanelComponent from panel plugin for kind '${panelPluginKind}'`);
+    }
+    return /*#__PURE__*/ _jsx(PanelComponent, {
+        ...others,
+        contentDimensions: contentDimensions
+    });
+}
+
+//# sourceMappingURL=PanelContent.js.map

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

@@ -0,0 +1 @@
+{"version":3,"sources":["../../../src/components/Panel/PanelContent.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 { 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 <Skeleton variant=\"rectangular\" width={contentDimensions?.width} height={contentDimensions?.height} />;\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","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,qBAAO,KAACR,QAAQ;YAACW,OAAO,EAAC,aAAa;YAACC,KAAK,EAAER,iBAAiB,aAAjBA,iBAAiB,WAAO,GAAxBA,KAAAA,CAAwB,GAAxBA,iBAAiB,CAAEQ,KAAK;YAAEC,MAAM,EAAET,iBAAiB,aAAjBA,iBAAiB,WAAQ,GAAzBA,KAAAA,CAAyB,GAAzBA,iBAAiB,CAAES,MAAM;UAAI,CAAC;IAChH,CAAC;IAED,IAAIH,cAAc,KAAKI,SAAS,EAAE;QAChC,MAAM,IAAIC,KAAK,CAAC,CAAC,mDAAmD,EAAEZ,eAAe,CAAC,CAAC,CAAC,CAAC,CAAC;IAC5F,CAAC;IAED,qBAAO,KAACO,cAAc;QAAE,GAAGL,MAAM;QAAED,iBAAiB,EAAEA,iBAAiB;MAAI,CAAC;AAC9E,CAAC"}

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

@@ -0,0 +1,16 @@
+/// <reference types="react" />
+import { CardHeaderProps } from '@mui/material';
+declare type OmittedProps = 'children' | 'action' | 'title' | 'disableTypography';
+export interface PanelHeaderProps extends Omit<CardHeaderProps, OmittedProps> {
+    id: string;
+    title: string;
+    description?: string;
+    editHandlers?: {
+        onEditPanelClick: () => void;
+        onDeletePanelClick: () => void;
+    };
+    isHovered: boolean;
+}
+export declare function PanelHeader({ id, title, description, editHandlers, isHovered, sx, ...rest }: PanelHeaderProps): JSX.Element;
+export {};
+//# sourceMappingURL=PanelHeader.d.ts.map

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

@@ -0,0 +1 @@
+{"version":3,"file":"PanelHeader.d.ts","sourceRoot":"","sources":["../../../src/components/Panel/PanelHeader.tsx"],"names":[],"mappings":";AAaA,OAAO,EAA6C,eAAe,EAAU,MAAM,eAAe,CAAC;AAOnG,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,kBAAkB,EAAE,MAAM,IAAI,CAAC;KAChC,CAAC;IACF,SAAS,EAAE,OAAO,CAAC;CACpB;AAED,wBAAgB,WAAW,CAAC,EAAE,EAAE,EAAE,KAAK,EAAE,WAAW,EAAE,YAAY,EAAE,SAAS,EAAE,EAAE,EAAE,GAAG,IAAI,EAAE,EAAE,gBAAgB,eAyE7G"}