@perses-dev/dashboards 0.0.0-snapshot-scatterplot-fix-imports-95e1b59 → 0.0.0-snapshot-explorer-plugin-c4a7621

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

@@ -1 +1 @@
-{"version":3,"sources":["../../../src/components/Panel/Panel.tsx"],"sourcesContent":["// Copyright 2023 The Perses Authors\n// Licensed under the Apache License, Version 2.0 (the \"License\");\n// you may not use this file except in compliance with the License.\n// You may obtain a copy of the License at\n//\n// http://www.apache.org/licenses/LICENSE-2.0\n//\n// Unless required by applicable law or agreed to in writing, software\n// distributed under the License is distributed on an \"AS IS\" BASIS,\n// WITHOUT WARRANTIES OR CONDITIONS OF ANY KIND, either express or implied.\n// See the License for the specific language governing permissions and\n// limitations under the License.\n\nimport { useState, useMemo, memo } from 'react';\nimport useResizeObserver from 'use-resize-observer';\nimport { ErrorBoundary, ErrorAlert, combineSx, useId, useChartsTheme } from '@perses-dev/components';\nimport { PanelDefinition } from '@perses-dev/core';\nimport { Card, CardProps, CardContent } from '@mui/material';\nimport { PanelGroupItemId } from '../../context';\nimport { PanelHeader, PanelHeaderProps } from './PanelHeader';\nimport { PanelContent } from './PanelContent';\n\nexport interface PanelProps extends CardProps<'section'> {\n  definition: PanelDefinition;\n  editHandlers?: PanelHeaderProps['editHandlers'];\n  panelOptions?: PanelOptions;\n  panelGroupItemId?: PanelGroupItemId;\n}\n\nexport type PanelOptions = {\n  /**\n   * Content to render in the top-right corner of the panel. It will only be\n   * rendered when the panel is in edit mode.\n   */\n  extra?: (props: PanelExtraProps) => React.ReactNode;\n};\n\nexport type PanelExtraProps = {\n  /**\n   * The PanelDefinition for the panel.\n   */\n  panelDefinition?: PanelDefinition;\n  /**\n   * The PanelGroupItemId for the panel.\n   */\n  panelGroupItemId?: PanelGroupItemId;\n};\n\n/**\n * Renders a PanelDefinition's content inside of a Card.\n */\nexport const Panel = memo(function Panel(props: PanelProps) {\n  const { definition, editHandlers, onMouseEnter, onMouseLeave, sx, panelOptions, panelGroupItemId, ...others } = props;\n\n  // Make sure we have an ID we can use for aria attributes\n  const generatedPanelId = useId('Panel');\n  const headerId = `${generatedPanelId}-header`;\n\n  const [contentElement, setContentElement] = useState<HTMLElement | null>(null);\n\n  const { width, height } = useResizeObserver({ ref: contentElement });\n\n  const contentDimensions = useMemo(() => {\n    if (width === undefined || height === undefined) return undefined;\n    return { width, height };\n  }, [width, height]);\n\n  const chartsTheme = useChartsTheme();\n\n  const handleMouseEnter: CardProps['onMouseEnter'] = (e) => {\n    onMouseEnter?.(e);\n  };\n\n  const handleMouseLeave: CardProps['onMouseLeave'] = (e) => {\n    onMouseLeave?.(e);\n  };\n\n  return (\n    <Card\n      component=\"section\"\n      sx={combineSx(\n        {\n          width: '100%',\n          height: '100%',\n          display: 'flex',\n          flexFlow: 'column nowrap',\n        },\n        sx\n      )}\n      variant=\"outlined\"\n      onMouseEnter={handleMouseEnter}\n      onMouseLeave={handleMouseLeave}\n      aria-labelledby={headerId}\n      aria-describedby={headerId}\n      data-testid=\"panel\"\n      {...others}\n    >\n      <PanelHeader\n        extra={panelOptions?.extra?.({ panelDefinition: definition, panelGroupItemId })}\n        id={headerId}\n        title={definition.spec.display.name}\n        description={definition.spec.display.description}\n        editHandlers={editHandlers}\n        sx={{ paddingX: `${chartsTheme.container.padding.default}px` }}\n      />\n      <CardContent\n        component=\"figure\"\n        sx={{\n          position: 'relative',\n          overflow: 'hidden',\n          flexGrow: 1,\n          margin: 0,\n          padding: 0,\n          // Override MUI default style for last-child\n          ':last-child': {\n            padding: 0,\n          },\n        }}\n        ref={setContentElement}\n      >\n        <ErrorBoundary FallbackComponent={ErrorAlert} resetKeys={[definition.spec]}>\n          <PanelContent\n            definition={definition}\n            panelPluginKind={definition.spec.plugin.kind}\n            spec={definition.spec.plugin.spec}\n            contentDimensions={contentDimensions}\n          />\n        </ErrorBoundary>\n      </CardContent>\n    </Card>\n  );\n});\n"],"names":["useState","useMemo","memo","useResizeObserver","ErrorBoundary","ErrorAlert","combineSx","useId","useChartsTheme","Card","CardContent","PanelHeader","PanelContent","Panel","props","panelOptions","definition","editHandlers","onMouseEnter","onMouseLeave","sx","panelGroupItemId","others","generatedPanelId","headerId","contentElement","setContentElement","width","height","ref","contentDimensions","undefined","chartsTheme","handleMouseEnter","e","handleMouseLeave","component","display","flexFlow","variant","aria-labelledby","aria-describedby","data-testid","extra","panelDefinition","id","title","spec","name","description","paddingX","container","padding","default","position","overflow","flexGrow","margin","FallbackComponent","resetKeys","panelPluginKind","plugin","kind"],"mappings":"AAAA,oCAAoC;AACpC,kEAAkE;AAClE,mEAAmE;AACnE,0CAA0C;AAC1C,EAAE;AACF,6CAA6C;AAC7C,EAAE;AACF,sEAAsE;AACtE,oEAAoE;AACpE,2EAA2E;AAC3E,sEAAsE;AACtE,iCAAiC;;AAEjC,SAASA,QAAQ,EAAEC,OAAO,EAAEC,IAAI,QAAQ,QAAQ;AAChD,OAAOC,uBAAuB,sBAAsB;AACpD,SAASC,aAAa,EAAEC,UAAU,EAAEC,SAAS,EAAEC,KAAK,EAAEC,cAAc,QAAQ,yBAAyB;AAErG,SAASC,IAAI,EAAaC,WAAW,QAAQ,gBAAgB;AAE7D,SAASC,WAAW,QAA0B,gBAAgB;AAC9D,SAASC,YAAY,QAAQ,iBAAiB;AA4B9C;;CAEC,GACD,OAAO,MAAMC,sBAAQX,KAAK,SAASW,MAAMC,KAAiB;QA+C3CC;IA9Cb,MAAM,EAAEC,UAAU,EAAEC,YAAY,EAAEC,YAAY,EAAEC,YAAY,EAAEC,EAAE,EAAEL,YAAY,EAAEM,gBAAgB,EAAE,GAAGC,QAAQ,GAAGR;IAEhH,yDAAyD;IACzD,MAAMS,mBAAmBhB,MAAM;IAC/B,MAAMiB,WAAW,CAAC,EAAED,iBAAiB,OAAO,CAAC;IAE7C,MAAM,CAACE,gBAAgBC,kBAAkB,GAAG1B,SAA6B;IAEzE,MAAM,EAAE2B,KAAK,EAAEC,MAAM,EAAE,GAAGzB,kBAAkB;QAAE0B,KAAKJ;IAAe;IAElE,MAAMK,oBAAoB7B,QAAQ;QAChC,IAAI0B,UAAUI,aAAaH,WAAWG,WAAW,OAAOA;QACxD,OAAO;YAAEJ;YAAOC;QAAO;IACzB,GAAG;QAACD;QAAOC;KAAO;IAElB,MAAMI,cAAcxB;IAEpB,MAAMyB,mBAA8C,CAACC;QACnDhB,yBAAAA,mCAAAA,aAAegB;IACjB;IAEA,MAAMC,mBAA8C,CAACD;QACnDf,yBAAAA,mCAAAA,aAAee;IACjB;IAEA,qBACE,MAACzB;QACC2B,WAAU;QACVhB,IAAId,UACF;YACEqB,OAAO;YACPC,QAAQ;YACRS,SAAS;YACTC,UAAU;QACZ,GACAlB;QAEFmB,SAAQ;QACRrB,cAAce;QACdd,cAAcgB;QACdK,mBAAiBhB;QACjBiB,oBAAkBjB;QAClBkB,eAAY;QACX,GAAGpB,MAAM;;0BAEV,KAACX;gBACCgC,KAAK,EAAE5B,yBAAAA,oCAAAA,sBAAAA,aAAc4B,KAAK,cAAnB5B,0CAAAA,yBAAAA,cAAsB;oBAAE6B,iBAAiB5B;oBAAYK;gBAAiB;gBAC7EwB,IAAIrB;gBACJsB,OAAO9B,WAAW+B,IAAI,CAACV,OAAO,CAACW,IAAI;gBACnCC,aAAajC,WAAW+B,IAAI,CAACV,OAAO,CAACY,WAAW;gBAChDhC,cAAcA;gBACdG,IAAI;oBAAE8B,UAAU,CAAC,EAAElB,YAAYmB,SAAS,CAACC,OAAO,CAACC,OAAO,CAAC,EAAE,CAAC;gBAAC;;0BAE/D,KAAC3C;gBACC0B,WAAU;gBACVhB,IAAI;oBACFkC,UAAU;oBACVC,UAAU;oBACVC,UAAU;oBACVC,QAAQ;oBACRL,SAAS;oBACT,4CAA4C;oBAC5C,eAAe;wBACbA,SAAS;oBACX;gBACF;gBACAvB,KAAKH;0BAEL,cAAA,KAACtB;oBAAcsD,mBAAmBrD;oBAAYsD,WAAW;wBAAC3C,WAAW+B,IAAI;qBAAC;8BACxE,cAAA,KAACnC;wBACCI,YAAYA;wBACZ4C,iBAAiB5C,WAAW+B,IAAI,CAACc,MAAM,CAACC,IAAI;wBAC5Cf,MAAM/B,WAAW+B,IAAI,CAACc,MAAM,CAACd,IAAI;wBACjCjB,mBAAmBA;;;;;;AAM/B,GAAG"}
+{"version":3,"sources":["../../../src/components/Panel/Panel.tsx"],"sourcesContent":["// Copyright 2023 The Perses Authors\n// Licensed under the Apache License, Version 2.0 (the \"License\");\n// you may not use this file except in compliance with the License.\n// You may obtain a copy of the License at\n//\n// http://www.apache.org/licenses/LICENSE-2.0\n//\n// Unless required by applicable law or agreed to in writing, software\n// distributed under the License is distributed on an \"AS IS\" BASIS,\n// WITHOUT WARRANTIES OR CONDITIONS OF ANY KIND, either express or implied.\n// See the License for the specific language governing permissions and\n// limitations under the License.\n\nimport { Card, CardContent, CardProps } from '@mui/material';\nimport { ErrorAlert, ErrorBoundary, combineSx, useChartsTheme, useId } from '@perses-dev/components';\nimport { PanelDefinition } from '@perses-dev/core';\nimport { ReactNode, memo, useMemo, useState } from 'react';\nimport useResizeObserver from 'use-resize-observer';\nimport { PanelGroupItemId } from '../../context';\nimport { PanelContent } from './PanelContent';\nimport { PanelHeader, PanelHeaderProps } from './PanelHeader';\n\nexport interface PanelProps extends CardProps<'section'> {\n  definition: PanelDefinition;\n  readHandlers?: PanelHeaderProps['readHandlers'];\n  editHandlers?: PanelHeaderProps['editHandlers'];\n  panelOptions?: PanelOptions;\n  panelGroupItemId?: PanelGroupItemId;\n}\n\nexport type PanelOptions = {\n  /**\n   * Allow you to hide the panel header if desired.\n   * This can be useful in embedded mode for example.\n   */\n  hideHeader?: boolean;\n  /**\n   * Content to render in right of the panel header. (top right of the panel)\n   * It will only be rendered when the panel is in edit mode.\n   */\n  extra?: (props: PanelExtraProps) => ReactNode;\n};\n\nexport type PanelExtraProps = {\n  /**\n   * The PanelDefinition for the panel.\n   */\n  panelDefinition?: PanelDefinition;\n  /**\n   * The PanelGroupItemId for the panel.\n   */\n  panelGroupItemId?: PanelGroupItemId;\n};\n\n/**\n * Renders a PanelDefinition's content inside of a Card.\n */\nexport const Panel = memo(function Panel(props: PanelProps) {\n  const {\n    definition,\n    readHandlers,\n    editHandlers,\n    onMouseEnter,\n    onMouseLeave,\n    sx,\n    panelOptions,\n    panelGroupItemId,\n    ...others\n  } = props;\n\n  // Make sure we have an ID we can use for aria attributes\n  const generatedPanelId = useId('Panel');\n  const headerId = `${generatedPanelId}-header`;\n\n  const [contentElement, setContentElement] = useState<HTMLElement | null>(null);\n\n  const { width, height } = useResizeObserver({ ref: contentElement });\n\n  const contentDimensions = useMemo(() => {\n    if (width === undefined || height === undefined) return undefined;\n    return { width, height };\n  }, [width, height]);\n\n  const chartsTheme = useChartsTheme();\n\n  const handleMouseEnter: CardProps['onMouseEnter'] = (e) => {\n    onMouseEnter?.(e);\n  };\n\n  const handleMouseLeave: CardProps['onMouseLeave'] = (e) => {\n    onMouseLeave?.(e);\n  };\n\n  return (\n    <Card\n      component=\"section\"\n      sx={combineSx(\n        {\n          width: '100%',\n          height: '100%',\n          display: 'flex',\n          flexFlow: 'column nowrap',\n          ':hover': { '--panel-hover': 'true' },\n        },\n        sx\n      )}\n      variant=\"outlined\"\n      onMouseEnter={handleMouseEnter}\n      onMouseLeave={handleMouseLeave}\n      aria-labelledby={headerId}\n      aria-describedby={headerId}\n      data-testid=\"panel\"\n      {...others}\n    >\n      {!panelOptions?.hideHeader && (\n        <PanelHeader\n          extra={panelOptions?.extra?.({ panelDefinition: definition, panelGroupItemId })}\n          id={headerId}\n          title={definition.spec.display.name}\n          description={definition.spec.display.description}\n          readHandlers={readHandlers}\n          editHandlers={editHandlers}\n          links={definition.spec.links}\n          sx={{ paddingX: `${chartsTheme.container.padding.default}px` }}\n        />\n      )}\n      <CardContent\n        component=\"figure\"\n        sx={{\n          position: 'relative',\n          overflow: 'hidden',\n          flexGrow: 1,\n          margin: 0,\n          padding: 0,\n          // Override MUI default style for last-child\n          ':last-child': {\n            padding: 0,\n          },\n        }}\n        ref={setContentElement}\n      >\n        <ErrorBoundary FallbackComponent={ErrorAlert} resetKeys={[definition.spec]}>\n          <PanelContent\n            definition={definition}\n            panelPluginKind={definition.spec.plugin.kind}\n            spec={definition.spec.plugin.spec}\n            contentDimensions={contentDimensions}\n          />\n        </ErrorBoundary>\n      </CardContent>\n    </Card>\n  );\n});\n"],"names":["Card","CardContent","ErrorAlert","ErrorBoundary","combineSx","useChartsTheme","useId","memo","useMemo","useState","useResizeObserver","PanelContent","PanelHeader","Panel","props","definition","readHandlers","editHandlers","onMouseEnter","onMouseLeave","sx","panelOptions","panelGroupItemId","others","generatedPanelId","headerId","contentElement","setContentElement","width","height","ref","contentDimensions","undefined","chartsTheme","handleMouseEnter","e","handleMouseLeave","component","display","flexFlow","variant","aria-labelledby","aria-describedby","data-testid","hideHeader","extra","panelDefinition","id","title","spec","name","description","links","paddingX","container","padding","default","position","overflow","flexGrow","margin","FallbackComponent","resetKeys","panelPluginKind","plugin","kind"],"mappings":"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"}

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

@@ -0,0 +1,16 @@
+/// <reference types="react" />
+export interface PanelActionsProps {
+    editHandlers?: {
+        onEditPanelClick: () => void;
+        onDuplicatePanelClick: () => void;
+        onDeletePanelClick: () => void;
+    };
+    readHandlers?: {
+        isPanelViewed?: boolean;
+        onViewPanelClick: () => void;
+    };
+    extra?: React.ReactNode;
+    title: string;
+}
+export declare const PanelActions: React.FC<PanelActionsProps>;
+//# sourceMappingURL=PanelActions.d.ts.map

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

@@ -0,0 +1 @@
+{"version":3,"file":"PanelActions.d.ts","sourceRoot":"","sources":["../../../src/components/Panel/PanelActions.tsx"],"names":[],"mappings":";AA+BA,MAAM,WAAW,iBAAiB;IAChC,YAAY,CAAC,EAAE;QACb,gBAAgB,EAAE,MAAM,IAAI,CAAC;QAC7B,qBAAqB,EAAE,MAAM,IAAI,CAAC;QAClC,kBAAkB,EAAE,MAAM,IAAI,CAAC;KAChC,CAAC;IACF,YAAY,CAAC,EAAE;QACb,aAAa,CAAC,EAAE,OAAO,CAAC;QACxB,gBAAgB,EAAE,MAAM,IAAI,CAAC;KAC9B,CAAC;IACF,KAAK,CAAC,EAAE,KAAK,CAAC,SAAS,CAAC;IACxB,KAAK,EAAE,MAAM,CAAC;CACf;AAED,eAAO,MAAM,YAAY,EAAE,KAAK,CAAC,EAAE,CAAC,iBAAiB,CA0GpD,CAAC"}

package/dist/components/Panel/PanelActions.js

@@ -0,0 +1,203 @@
+// Copyright 2025 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 { Stack, styled, Box, Popover } from '@mui/material';
+import { useMemo, useState } from 'react';
+import { InfoTooltip, combineSx } from '@perses-dev/components';
+import ArrowCollapseIcon from 'mdi-material-ui/ArrowCollapse';
+import ArrowExpandIcon from 'mdi-material-ui/ArrowExpand';
+import PencilIcon from 'mdi-material-ui/PencilOutline';
+import DeleteIcon from 'mdi-material-ui/DeleteOutline';
+import DragIcon from 'mdi-material-ui/DragVertical';
+import ContentCopyIcon from 'mdi-material-ui/ContentCopy';
+import MenuIcon from 'mdi-material-ui/Menu';
+import { ARIA_LABEL_TEXT, HEADER_ACTIONS_MIN_WIDTH, HEADER_ACTIONS_CONTAINER_NAME, TOOLTIP_TEXT } from '../../constants';
+import { HeaderIconButton } from './HeaderIconButton';
+export const PanelActions = ({ editHandlers, readHandlers, extra, title })=>{
+    const readActions = useMemo(()=>{
+        if (readHandlers !== undefined) {
+            return /*#__PURE__*/ _jsx(InfoTooltip, {
+                description: TOOLTIP_TEXT.viewPanel,
+                children: /*#__PURE__*/ _jsx(HeaderIconButton, {
+                    "aria-label": ARIA_LABEL_TEXT.viewPanel(title),
+                    size: "small",
+                    onClick: readHandlers.onViewPanelClick,
+                    children: readHandlers.isPanelViewed ? /*#__PURE__*/ _jsx(ArrowCollapseIcon, {
+                        fontSize: "inherit"
+                    }) : /*#__PURE__*/ _jsx(ArrowExpandIcon, {
+                        fontSize: "inherit"
+                    })
+                })
+            });
+        }
+        return undefined;
+    }, [
+        readHandlers,
+        title
+    ]);
+    const editActions = useMemo(()=>{
+        if (editHandlers !== undefined) {
+            // If there are edit handlers, always just show the edit buttons
+            return /*#__PURE__*/ _jsxs(_Fragment, {
+                children: [
+                    /*#__PURE__*/ _jsx(InfoTooltip, {
+                        description: TOOLTIP_TEXT.editPanel,
+                        children: /*#__PURE__*/ _jsx(HeaderIconButton, {
+                            "aria-label": ARIA_LABEL_TEXT.editPanel(title),
+                            size: "small",
+                            onClick: editHandlers.onEditPanelClick,
+                            children: /*#__PURE__*/ _jsx(PencilIcon, {
+                                fontSize: "inherit"
+                            })
+                        })
+                    }),
+                    /*#__PURE__*/ _jsx(InfoTooltip, {
+                        description: TOOLTIP_TEXT.duplicatePanel,
+                        children: /*#__PURE__*/ _jsx(HeaderIconButton, {
+                            "aria-label": ARIA_LABEL_TEXT.duplicatePanel(title),
+                            size: "small",
+                            onClick: editHandlers.onDuplicatePanelClick,
+                            children: /*#__PURE__*/ _jsx(ContentCopyIcon, {
+                                fontSize: "inherit",
+                                sx: {
+                                    // Shrink this icon a little bit to look more consistent
+                                    // with the other icons in the header.
+                                    transform: 'scale(0.925)'
+                                }
+                            })
+                        })
+                    }),
+                    /*#__PURE__*/ _jsx(InfoTooltip, {
+                        description: TOOLTIP_TEXT.deletePanel,
+                        children: /*#__PURE__*/ _jsx(HeaderIconButton, {
+                            "aria-label": ARIA_LABEL_TEXT.deletePanel(title),
+                            size: "small",
+                            onClick: editHandlers.onDeletePanelClick,
+                            children: /*#__PURE__*/ _jsx(DeleteIcon, {
+                                fontSize: "inherit"
+                            })
+                        })
+                    })
+                ]
+            });
+        }
+        return undefined;
+    }, [
+        editHandlers,
+        title
+    ]);
+    return /*#__PURE__*/ _jsxs(HeaderActionWrapper, {
+        direction: "row",
+        spacing: 0.25,
+        alignItems: "center",
+        sx: {
+            display: editHandlers !== undefined || readHandlers?.isPanelViewed ? 'flex' : 'var(--panel-hover, none)'
+        },
+        children: [
+            editHandlers === undefined && extra,
+            " ",
+            readActions,
+            editActions && /*#__PURE__*/ _jsxs(_Fragment, {
+                children: [
+                    /*#__PURE__*/ _jsx(Box, {
+                        sx: combineSx((theme)=>({
+                                display: 'block',
+                                [theme.containerQueries(HEADER_ACTIONS_CONTAINER_NAME).down(HEADER_ACTIONS_MIN_WIDTH)]: {
+                                    display: 'none'
+                                }
+                            })),
+                        children: editActions
+                    }),
+                    /*#__PURE__*/ _jsx(Box, {
+                        sx: combineSx((theme)=>({
+                                display: 'block',
+                                [theme.containerQueries(HEADER_ACTIONS_CONTAINER_NAME).up(HEADER_ACTIONS_MIN_WIDTH)]: {
+                                    display: 'none'
+                                }
+                            })),
+                        children: /*#__PURE__*/ _jsx(ShowAction, {
+                            title: title,
+                            children: editActions
+                        })
+                    })
+                ]
+            }),
+            editActions && /*#__PURE__*/ _jsx(InfoTooltip, {
+                description: TOOLTIP_TEXT.movePanel,
+                children: /*#__PURE__*/ _jsx(HeaderIconButton, {
+                    "aria-label": ARIA_LABEL_TEXT.movePanel(title),
+                    size: "small",
+                    children: /*#__PURE__*/ _jsx(DragIcon, {
+                        className: "drag-handle",
+                        sx: {
+                            cursor: 'grab'
+                        },
+                        fontSize: "inherit"
+                    })
+                })
+            })
+        ]
+    });
+};
+const HeaderActionWrapper = styled(Stack)(()=>({
+        // Adding back the negative margins from MUI's defaults for actions, so we
+        // avoid increasing the header size when actions are present while also being
+        // able to vertically center the actions.
+        // https://github.com/mui/material-ui/blob/master/packages/mui-material/src/CardHeader/CardHeader.js#L56-L58
+        marginTop: -4,
+        marginBottom: -4
+    }));
+const ShowAction = ({ children, title })=>{
+    const [anchorEl, setAnchorEl] = useState(null);
+    const handleClick = (event)=>{
+        setAnchorEl(event.currentTarget);
+    };
+    const handleClose = ()=>{
+        setAnchorEl(null);
+    };
+    const open = Boolean(anchorEl);
+    const id = open ? 'actions-popover' : undefined;
+    return /*#__PURE__*/ _jsxs(_Fragment, {
+        children: [
+            /*#__PURE__*/ _jsx(HeaderIconButton, {
+                className: "show-actions",
+                "aria-describedby": id,
+                onClick: handleClick,
+                "aria-label": ARIA_LABEL_TEXT.showPanelActions(title),
+                size: "small",
+                children: /*#__PURE__*/ _jsx(MenuIcon, {
+                    fontSize: "inherit"
+                })
+            }),
+            /*#__PURE__*/ _jsx(Popover, {
+                id: id,
+                open: open,
+                anchorEl: anchorEl,
+                onClose: handleClose,
+                anchorOrigin: {
+                    vertical: 'bottom',
+                    horizontal: 'left'
+                },
+                children: /*#__PURE__*/ _jsx(Box, {
+                    sx: {
+                        padding: '8px'
+                    },
+                    onClick: handleClose,
+                    children: children
+                })
+            })
+        ]
+    });
+};
+
+//# sourceMappingURL=PanelActions.js.map

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

@@ -0,0 +1 @@
+{"version":3,"sources":["../../../src/components/Panel/PanelActions.tsx"],"sourcesContent":["// Copyright 2025 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 { Stack, styled, Box, Popover } from '@mui/material';\nimport { PropsWithChildren, useMemo, useState } from 'react';\nimport { InfoTooltip, combineSx } from '@perses-dev/components';\nimport ArrowCollapseIcon from 'mdi-material-ui/ArrowCollapse';\nimport ArrowExpandIcon from 'mdi-material-ui/ArrowExpand';\nimport PencilIcon from 'mdi-material-ui/PencilOutline';\nimport DeleteIcon from 'mdi-material-ui/DeleteOutline';\nimport DragIcon from 'mdi-material-ui/DragVertical';\nimport ContentCopyIcon from 'mdi-material-ui/ContentCopy';\nimport MenuIcon from 'mdi-material-ui/Menu';\nimport {\n  ARIA_LABEL_TEXT,\n  HEADER_ACTIONS_MIN_WIDTH,\n  HEADER_ACTIONS_CONTAINER_NAME,\n  TOOLTIP_TEXT,\n} from '../../constants';\nimport { HeaderIconButton } from './HeaderIconButton';\n\nexport interface PanelActionsProps {\n  editHandlers?: {\n    onEditPanelClick: () => void;\n    onDuplicatePanelClick: () => void;\n    onDeletePanelClick: () => void;\n  };\n  readHandlers?: {\n    isPanelViewed?: boolean;\n    onViewPanelClick: () => void;\n  };\n  extra?: React.ReactNode;\n  title: string;\n}\n\nexport const PanelActions: React.FC<PanelActionsProps> = ({ editHandlers, readHandlers, extra, title }) => {\n  const readActions = useMemo(() => {\n    if (readHandlers !== undefined) {\n      return (\n        <InfoTooltip description={TOOLTIP_TEXT.viewPanel}>\n          <HeaderIconButton\n            aria-label={ARIA_LABEL_TEXT.viewPanel(title)}\n            size=\"small\"\n            onClick={readHandlers.onViewPanelClick}\n          >\n            {readHandlers.isPanelViewed ? (\n              <ArrowCollapseIcon fontSize=\"inherit\" />\n            ) : (\n              <ArrowExpandIcon fontSize=\"inherit\" />\n            )}\n          </HeaderIconButton>\n        </InfoTooltip>\n      );\n    }\n    return undefined;\n  }, [readHandlers, title]);\n\n  const editActions = useMemo(() => {\n    if (editHandlers !== undefined) {\n      // If there are edit handlers, always just show the edit buttons\n      return (\n        <>\n          <InfoTooltip description={TOOLTIP_TEXT.editPanel}>\n            <HeaderIconButton\n              aria-label={ARIA_LABEL_TEXT.editPanel(title)}\n              size=\"small\"\n              onClick={editHandlers.onEditPanelClick}\n            >\n              <PencilIcon fontSize=\"inherit\" />\n            </HeaderIconButton>\n          </InfoTooltip>\n          <InfoTooltip description={TOOLTIP_TEXT.duplicatePanel}>\n            <HeaderIconButton\n              aria-label={ARIA_LABEL_TEXT.duplicatePanel(title)}\n              size=\"small\"\n              onClick={editHandlers.onDuplicatePanelClick}\n            >\n              <ContentCopyIcon\n                fontSize=\"inherit\"\n                sx={{\n                  // Shrink this icon a little bit to look more consistent\n                  // with the other icons in the header.\n                  transform: 'scale(0.925)',\n                }}\n              />\n            </HeaderIconButton>\n          </InfoTooltip>\n          <InfoTooltip description={TOOLTIP_TEXT.deletePanel}>\n            <HeaderIconButton\n              aria-label={ARIA_LABEL_TEXT.deletePanel(title)}\n              size=\"small\"\n              onClick={editHandlers.onDeletePanelClick}\n            >\n              <DeleteIcon fontSize=\"inherit\" />\n            </HeaderIconButton>\n          </InfoTooltip>\n        </>\n      );\n    }\n    return undefined;\n  }, [editHandlers, title]);\n\n  return (\n    <HeaderActionWrapper\n      direction=\"row\"\n      spacing={0.25}\n      alignItems=\"center\"\n      sx={{ display: editHandlers !== undefined || readHandlers?.isPanelViewed ? 'flex' : 'var(--panel-hover, none)' }}\n    >\n      {editHandlers === undefined && extra} {readActions}\n      {editActions && (\n        <>\n          <Box\n            sx={combineSx((theme) => ({\n              display: 'block',\n              [theme.containerQueries(HEADER_ACTIONS_CONTAINER_NAME).down(HEADER_ACTIONS_MIN_WIDTH)]: {\n                display: 'none',\n              },\n            }))}\n          >\n            {editActions}\n          </Box>\n          <Box\n            sx={combineSx((theme) => ({\n              display: 'block',\n              [theme.containerQueries(HEADER_ACTIONS_CONTAINER_NAME).up(HEADER_ACTIONS_MIN_WIDTH)]: { display: 'none' },\n            }))}\n          >\n            <ShowAction title={title}>{editActions}</ShowAction>\n          </Box>\n        </>\n      )}\n      {editActions && (\n        <InfoTooltip description={TOOLTIP_TEXT.movePanel}>\n          <HeaderIconButton aria-label={ARIA_LABEL_TEXT.movePanel(title)} size=\"small\">\n            <DragIcon className=\"drag-handle\" sx={{ cursor: 'grab' }} fontSize=\"inherit\" />\n          </HeaderIconButton>\n        </InfoTooltip>\n      )}\n    </HeaderActionWrapper>\n  );\n};\n\nconst HeaderActionWrapper = styled(Stack)(() => ({\n  // Adding back the negative margins from MUI's defaults for actions, so we\n  // avoid increasing the header size when actions are present while also being\n  // able to vertically center the actions.\n  // https://github.com/mui/material-ui/blob/master/packages/mui-material/src/CardHeader/CardHeader.js#L56-L58\n  marginTop: -4,\n  marginBottom: -4,\n}));\n\nconst ShowAction: React.FC<PropsWithChildren<{ title: string }>> = ({ children, title }) => {\n  const [anchorEl, setAnchorEl] = useState<null | HTMLElement>(null);\n\n  const handleClick = (event: React.MouseEvent<HTMLElement>): undefined => {\n    setAnchorEl(event.currentTarget);\n  };\n\n  const handleClose = (): undefined => {\n    setAnchorEl(null);\n  };\n\n  const open = Boolean(anchorEl);\n  const id = open ? 'actions-popover' : undefined;\n\n  return (\n    <>\n      <HeaderIconButton\n        className=\"show-actions\"\n        aria-describedby={id}\n        onClick={handleClick}\n        aria-label={ARIA_LABEL_TEXT.showPanelActions(title)}\n        size=\"small\"\n      >\n        <MenuIcon fontSize=\"inherit\" />\n      </HeaderIconButton>\n      <Popover\n        id={id}\n        open={open}\n        anchorEl={anchorEl}\n        onClose={handleClose}\n        anchorOrigin={{\n          vertical: 'bottom',\n          horizontal: 'left',\n        }}\n      >\n        <Box sx={{ padding: '8px' }} onClick={handleClose}>\n          {children}\n        </Box>\n      </Popover>\n    </>\n  );\n};\n"],"names":["Stack","styled","Box","Popover","useMemo","useState","InfoTooltip","combineSx","ArrowCollapseIcon","ArrowExpandIcon","PencilIcon","DeleteIcon","DragIcon","ContentCopyIcon","MenuIcon","ARIA_LABEL_TEXT","HEADER_ACTIONS_MIN_WIDTH","HEADER_ACTIONS_CONTAINER_NAME","TOOLTIP_TEXT","HeaderIconButton","PanelActions","editHandlers","readHandlers","extra","title","readActions","undefined","description","viewPanel","aria-label","size","onClick","onViewPanelClick","isPanelViewed","fontSize","editActions","editPanel","onEditPanelClick","duplicatePanel","onDuplicatePanelClick","sx","transform","deletePanel","onDeletePanelClick","HeaderActionWrapper","direction","spacing","alignItems","display","theme","containerQueries","down","up","ShowAction","movePanel","className","cursor","marginTop","marginBottom","children","anchorEl","setAnchorEl","handleClick","event","currentTarget","handleClose","open","Boolean","id","aria-describedby","showPanelActions","onClose","anchorOrigin","vertical","horizontal","padding"],"mappings":"AAAA,oCAAoC;AACpC,kEAAkE;AAClE,mEAAmE;AACnE,0CAA0C;AAC1C,EAAE;AACF,6CAA6C;AAC7C,EAAE;AACF,sEAAsE;AACtE,oEAAoE;AACpE,2EAA2E;AAC3E,sEAAsE;AACtE,iCAAiC;;AAEjC,SAASA,KAAK,EAAEC,MAAM,EAAEC,GAAG,EAAEC,OAAO,QAAQ,gBAAgB;AAC5D,SAA4BC,OAAO,EAAEC,QAAQ,QAAQ,QAAQ;AAC7D,SAASC,WAAW,EAAEC,SAAS,QAAQ,yBAAyB;AAChE,OAAOC,uBAAuB,gCAAgC;AAC9D,OAAOC,qBAAqB,8BAA8B;AAC1D,OAAOC,gBAAgB,gCAAgC;AACvD,OAAOC,gBAAgB,gCAAgC;AACvD,OAAOC,cAAc,+BAA+B;AACpD,OAAOC,qBAAqB,8BAA8B;AAC1D,OAAOC,cAAc,uBAAuB;AAC5C,SACEC,eAAe,EACfC,wBAAwB,EACxBC,6BAA6B,EAC7BC,YAAY,QACP,kBAAkB;AACzB,SAASC,gBAAgB,QAAQ,qBAAqB;AAgBtD,OAAO,MAAMC,eAA4C,CAAC,EAAEC,YAAY,EAAEC,YAAY,EAAEC,KAAK,EAAEC,KAAK,EAAE;IACpG,MAAMC,cAAcrB,QAAQ;QAC1B,IAAIkB,iBAAiBI,WAAW;YAC9B,qBACE,KAACpB;gBAAYqB,aAAaT,aAAaU,SAAS;0BAC9C,cAAA,KAACT;oBACCU,cAAYd,gBAAgBa,SAAS,CAACJ;oBACtCM,MAAK;oBACLC,SAAST,aAAaU,gBAAgB;8BAErCV,aAAaW,aAAa,iBACzB,KAACzB;wBAAkB0B,UAAS;uCAE5B,KAACzB;wBAAgByB,UAAS;;;;QAKpC;QACA,OAAOR;IACT,GAAG;QAACJ;QAAcE;KAAM;IAExB,MAAMW,cAAc/B,QAAQ;QAC1B,IAAIiB,iBAAiBK,WAAW;YAC9B,gEAAgE;YAChE,qBACE;;kCACE,KAACpB;wBAAYqB,aAAaT,aAAakB,SAAS;kCAC9C,cAAA,KAACjB;4BACCU,cAAYd,gBAAgBqB,SAAS,CAACZ;4BACtCM,MAAK;4BACLC,SAASV,aAAagB,gBAAgB;sCAEtC,cAAA,KAAC3B;gCAAWwB,UAAS;;;;kCAGzB,KAAC5B;wBAAYqB,aAAaT,aAAaoB,cAAc;kCACnD,cAAA,KAACnB;4BACCU,cAAYd,gBAAgBuB,cAAc,CAACd;4BAC3CM,MAAK;4BACLC,SAASV,aAAakB,qBAAqB;sCAE3C,cAAA,KAAC1B;gCACCqB,UAAS;gCACTM,IAAI;oCACF,wDAAwD;oCACxD,sCAAsC;oCACtCC,WAAW;gCACb;;;;kCAIN,KAACnC;wBAAYqB,aAAaT,aAAawB,WAAW;kCAChD,cAAA,KAACvB;4BACCU,cAAYd,gBAAgB2B,WAAW,CAAClB;4BACxCM,MAAK;4BACLC,SAASV,aAAasB,kBAAkB;sCAExC,cAAA,KAAChC;gCAAWuB,UAAS;;;;;;QAK/B;QACA,OAAOR;IACT,GAAG;QAACL;QAAcG;KAAM;IAExB,qBACE,MAACoB;QACCC,WAAU;QACVC,SAAS;QACTC,YAAW;QACXP,IAAI;YAAEQ,SAAS3B,iBAAiBK,aAAaJ,cAAcW,gBAAgB,SAAS;QAA2B;;YAE9GZ,iBAAiBK,aAAaH;YAAM;YAAEE;YACtCU,6BACC;;kCACE,KAACjC;wBACCsC,IAAIjC,UAAU,CAAC0C,QAAW,CAAA;gCACxBD,SAAS;gCACT,CAACC,MAAMC,gBAAgB,CAACjC,+BAA+BkC,IAAI,CAACnC,0BAA0B,EAAE;oCACtFgC,SAAS;gCACX;4BACF,CAAA;kCAECb;;kCAEH,KAACjC;wBACCsC,IAAIjC,UAAU,CAAC0C,QAAW,CAAA;gCACxBD,SAAS;gCACT,CAACC,MAAMC,gBAAgB,CAACjC,+BAA+BmC,EAAE,CAACpC,0BAA0B,EAAE;oCAAEgC,SAAS;gCAAO;4BAC1G,CAAA;kCAEA,cAAA,KAACK;4BAAW7B,OAAOA;sCAAQW;;;;;YAIhCA,6BACC,KAAC7B;gBAAYqB,aAAaT,aAAaoC,SAAS;0BAC9C,cAAA,KAACnC;oBAAiBU,cAAYd,gBAAgBuC,SAAS,CAAC9B;oBAAQM,MAAK;8BACnE,cAAA,KAAClB;wBAAS2C,WAAU;wBAAcf,IAAI;4BAAEgB,QAAQ;wBAAO;wBAAGtB,UAAS;;;;;;AAM/E,EAAE;AAEF,MAAMU,sBAAsB3C,OAAOD,OAAO,IAAO,CAAA;QAC/C,0EAA0E;QAC1E,6EAA6E;QAC7E,yCAAyC;QACzC,4GAA4G;QAC5GyD,WAAW,CAAC;QACZC,cAAc,CAAC;IACjB,CAAA;AAEA,MAAML,aAA6D,CAAC,EAAEM,QAAQ,EAAEnC,KAAK,EAAE;IACrF,MAAM,CAACoC,UAAUC,YAAY,GAAGxD,SAA6B;IAE7D,MAAMyD,cAAc,CAACC;QACnBF,YAAYE,MAAMC,aAAa;IACjC;IAEA,MAAMC,cAAc;QAClBJ,YAAY;IACd;IAEA,MAAMK,OAAOC,QAAQP;IACrB,MAAMQ,KAAKF,OAAO,oBAAoBxC;IAEtC,qBACE;;0BACE,KAACP;gBACCoC,WAAU;gBACVc,oBAAkBD;gBAClBrC,SAAS+B;gBACTjC,cAAYd,gBAAgBuD,gBAAgB,CAAC9C;gBAC7CM,MAAK;0BAEL,cAAA,KAAChB;oBAASoB,UAAS;;;0BAErB,KAAC/B;gBACCiE,IAAIA;gBACJF,MAAMA;gBACNN,UAAUA;gBACVW,SAASN;gBACTO,cAAc;oBACZC,UAAU;oBACVC,YAAY;gBACd;0BAEA,cAAA,KAACxE;oBAAIsC,IAAI;wBAAEmC,SAAS;oBAAM;oBAAG5C,SAASkC;8BACnCN;;;;;AAKX"}

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

@@ -1,5 +1,6 @@
 import { PanelProps } from '@perses-dev/plugin-system';
 import { UnknownSpec, PanelDefinition } from '@perses-dev/core';
+import { ReactElement } from 'react';
 export interface PanelContentProps extends PanelProps<UnknownSpec> {
     panelPluginKind: string;
     definition?: PanelDefinition<UnknownSpec>;
@@ -8,5 +9,5 @@ export interface PanelContentProps extends PanelProps<UnknownSpec> {
  * 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): import("react/jsx-runtime").JSX.Element;
+export declare function PanelContent(props: PanelContentProps): ReactElement;
 //# sourceMappingURL=PanelContent.d.ts.map

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

@@ -1 +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,eAAe,EAAE,MAAM,kBAAkB,CAAC;AAEhE,MAAM,WAAW,iBAAkB,SAAQ,UAAU,CAAC,WAAW,CAAC;IAChE,eAAe,EAAE,MAAM,CAAC;IACxB,UAAU,CAAC,EAAE,eAAe,CAAC,WAAW,CAAC,CAAC;CAC3C;AAED;;;GAGG;AACH,wBAAgB,YAAY,CAAC,KAAK,EAAE,iBAAiB,2CAqBpD"}
+{"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,eAAe,EAAE,MAAM,kBAAkB,CAAC;AAChE,OAAO,EAAE,YAAY,EAAE,MAAM,OAAO,CAAC;AAErC,MAAM,WAAW,iBAAkB,SAAQ,UAAU,CAAC,WAAW,CAAC;IAChE,eAAe,EAAE,MAAM,CAAC;IACxB,UAAU,CAAC,EAAE,eAAe,CAAC,WAAW,CAAC,CAAC;CAC3C;AAED;;;GAGG;AACH,wBAAgB,YAAY,CAAC,KAAK,EAAE,iBAAiB,GAAG,YAAY,CAqBnE"}

package/dist/components/Panel/PanelContent.js

@@ -19,14 +19,14 @@ import { Skeleton } from '@mui/material';
  */ export function PanelContent(props) {
     const { panelPluginKind, contentDimensions, definition, ...others } = props;
     const { data: plugin, isLoading } = usePlugin('Panel', panelPluginKind, {
-        useErrorBoundary: true
+        throwOnError: true
     });
-    const PanelComponent = plugin === null || plugin === void 0 ? void 0 : plugin.PanelComponent;
+    const PanelComponent = 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,
+            width: contentDimensions?.width,
+            height: contentDimensions?.height,
             "aria-label": "Loading..."
         });
     }

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

@@ -1 +1 @@
-{"version":3,"sources":["../../../src/components/Panel/PanelContent.tsx"],"sourcesContent":["// Copyright 2023 The Perses Authors\n// Licensed under the Apache License, Version 2.0 (the \"License\");\n// you may not use this file except in compliance with the License.\n// You may obtain a copy of the License at\n//\n// http://www.apache.org/licenses/LICENSE-2.0\n//\n// Unless required by applicable law or agreed to in writing, software\n// distributed under the License is distributed on an \"AS IS\" BASIS,\n// WITHOUT WARRANTIES OR CONDITIONS OF ANY KIND, either express or implied.\n// See the License for the specific language governing permissions and\n// limitations under the License.\n\nimport { usePlugin, PanelProps } from '@perses-dev/plugin-system';\nimport { Skeleton } from '@mui/material';\nimport { UnknownSpec, PanelDefinition } from '@perses-dev/core';\n\nexport interface PanelContentProps extends PanelProps<UnknownSpec> {\n  panelPluginKind: string;\n  definition?: PanelDefinition<UnknownSpec>;\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, definition, ...others } = props;\n  const { data: plugin, isLoading } = usePlugin('Panel', panelPluginKind, { useErrorBoundary: true });\n  const PanelComponent = plugin?.PanelComponent;\n\n  if (isLoading) {\n    return (\n      <Skeleton\n        variant=\"rectangular\"\n        width={contentDimensions?.width}\n        height={contentDimensions?.height}\n        aria-label=\"Loading...\"\n      />\n    );\n  }\n\n  if (PanelComponent === undefined) {\n    throw new Error(`Missing PanelComponent from panel plugin for kind '${panelPluginKind}'`);\n  }\n\n  return <PanelComponent {...others} contentDimensions={contentDimensions} definition={definition} />;\n}\n"],"names":["usePlugin","Skeleton","PanelContent","props","panelPluginKind","contentDimensions","definition","others","data","plugin","isLoading","useErrorBoundary","PanelComponent","variant","width","height","aria-label","undefined","Error"],"mappings":"AAAA,oCAAoC;AACpC,kEAAkE;AAClE,mEAAmE;AACnE,0CAA0C;AAC1C,EAAE;AACF,6CAA6C;AAC7C,EAAE;AACF,sEAAsE;AACtE,oEAAoE;AACpE,2EAA2E;AAC3E,sEAAsE;AACtE,iCAAiC;;AAEjC,SAASA,SAAS,QAAoB,4BAA4B;AAClE,SAASC,QAAQ,QAAQ,gBAAgB;AAQzC;;;CAGC,GACD,OAAO,SAASC,aAAaC,KAAwB;IACnD,MAAM,EAAEC,eAAe,EAAEC,iBAAiB,EAAEC,UAAU,EAAE,GAAGC,QAAQ,GAAGJ;IACtE,MAAM,EAAEK,MAAMC,MAAM,EAAEC,SAAS,EAAE,GAAGV,UAAU,SAASI,iBAAiB;QAAEO,kBAAkB;IAAK;IACjG,MAAMC,iBAAiBH,mBAAAA,6BAAAA,OAAQG,cAAc;IAE7C,IAAIF,WAAW;QACb,qBACE,KAACT;YACCY,SAAQ;YACRC,KAAK,EAAET,8BAAAA,wCAAAA,kBAAmBS,KAAK;YAC/BC,MAAM,EAAEV,8BAAAA,wCAAAA,kBAAmBU,MAAM;YACjCC,cAAW;;IAGjB;IAEA,IAAIJ,mBAAmBK,WAAW;QAChC,MAAM,IAAIC,MAAM,CAAC,mDAAmD,EAAEd,gBAAgB,CAAC,CAAC;IAC1F;IAEA,qBAAO,KAACQ;QAAgB,GAAGL,MAAM;QAAEF,mBAAmBA;QAAmBC,YAAYA;;AACvF"}
+{"version":3,"sources":["../../../src/components/Panel/PanelContent.tsx"],"sourcesContent":["// Copyright 2023 The Perses Authors\n// Licensed under the Apache License, Version 2.0 (the \"License\");\n// you may not use this file except in compliance with the License.\n// You may obtain a copy of the License at\n//\n// http://www.apache.org/licenses/LICENSE-2.0\n//\n// Unless required by applicable law or agreed to in writing, software\n// distributed under the License is distributed on an \"AS IS\" BASIS,\n// WITHOUT WARRANTIES OR CONDITIONS OF ANY KIND, either express or implied.\n// See the License for the specific language governing permissions and\n// limitations under the License.\n\nimport { usePlugin, PanelProps } from '@perses-dev/plugin-system';\nimport { Skeleton } from '@mui/material';\nimport { UnknownSpec, PanelDefinition } from '@perses-dev/core';\nimport { ReactElement } from 'react';\n\nexport interface PanelContentProps extends PanelProps<UnknownSpec> {\n  panelPluginKind: string;\n  definition?: PanelDefinition<UnknownSpec>;\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): ReactElement {\n  const { panelPluginKind, contentDimensions, definition, ...others } = props;\n  const { data: plugin, isLoading } = usePlugin('Panel', panelPluginKind, { throwOnError: true });\n  const PanelComponent = plugin?.PanelComponent;\n\n  if (isLoading) {\n    return (\n      <Skeleton\n        variant=\"rectangular\"\n        width={contentDimensions?.width}\n        height={contentDimensions?.height}\n        aria-label=\"Loading...\"\n      />\n    );\n  }\n\n  if (PanelComponent === undefined) {\n    throw new Error(`Missing PanelComponent from panel plugin for kind '${panelPluginKind}'`);\n  }\n\n  return <PanelComponent {...others} contentDimensions={contentDimensions} definition={definition} />;\n}\n"],"names":["usePlugin","Skeleton","PanelContent","props","panelPluginKind","contentDimensions","definition","others","data","plugin","isLoading","throwOnError","PanelComponent","variant","width","height","aria-label","undefined","Error"],"mappings":"AAAA,oCAAoC;AACpC,kEAAkE;AAClE,mEAAmE;AACnE,0CAA0C;AAC1C,EAAE;AACF,6CAA6C;AAC7C,EAAE;AACF,sEAAsE;AACtE,oEAAoE;AACpE,2EAA2E;AAC3E,sEAAsE;AACtE,iCAAiC;;AAEjC,SAASA,SAAS,QAAoB,4BAA4B;AAClE,SAASC,QAAQ,QAAQ,gBAAgB;AASzC;;;CAGC,GACD,OAAO,SAASC,aAAaC,KAAwB;IACnD,MAAM,EAAEC,eAAe,EAAEC,iBAAiB,EAAEC,UAAU,EAAE,GAAGC,QAAQ,GAAGJ;IACtE,MAAM,EAAEK,MAAMC,MAAM,EAAEC,SAAS,EAAE,GAAGV,UAAU,SAASI,iBAAiB;QAAEO,cAAc;IAAK;IAC7F,MAAMC,iBAAiBH,QAAQG;IAE/B,IAAIF,WAAW;QACb,qBACE,KAACT;YACCY,SAAQ;YACRC,OAAOT,mBAAmBS;YAC1BC,QAAQV,mBAAmBU;YAC3BC,cAAW;;IAGjB;IAEA,IAAIJ,mBAAmBK,WAAW;QAChC,MAAM,IAAIC,MAAM,CAAC,mDAAmD,EAAEd,gBAAgB,CAAC,CAAC;IAC1F;IAEA,qBAAO,KAACQ;QAAgB,GAAGL,MAAM;QAAEF,mBAAmBA;QAAmBC,YAAYA;;AACvF"}

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

@@ -1,17 +1,17 @@
-/// <reference types="react" />
 import { CardHeaderProps } from '@mui/material';
+import { Link } from '@perses-dev/core';
+import { ReactElement, ReactNode } from 'react';
+import { PanelActionsProps } from './PanelActions';
 type OmittedProps = 'children' | 'action' | 'title' | 'disableTypography';
 export interface PanelHeaderProps extends Omit<CardHeaderProps, OmittedProps> {
     id: string;
     title: string;
     description?: string;
-    extra?: React.ReactNode;
-    editHandlers?: {
-        onEditPanelClick: () => void;
-        onDuplicatePanelClick: () => void;
-        onDeletePanelClick: () => void;
-    };
+    links?: Link[];
+    extra?: ReactNode;
+    readHandlers?: PanelActionsProps['readHandlers'];
+    editHandlers?: PanelActionsProps['editHandlers'];
 }
-export declare function PanelHeader({ id, title: rawTitle, description: rawDescription, editHandlers, sx, extra, ...rest }: PanelHeaderProps): import("react/jsx-runtime").JSX.Element;
+export declare function PanelHeader({ id, title: rawTitle, description: rawDescription, links, readHandlers, editHandlers, sx, extra, ...rest }: PanelHeaderProps): ReactElement;
 export {};
 //# sourceMappingURL=PanelHeader.d.ts.map

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

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

package/dist/components/Panel/PanelHeader.js

@@ -1,4 +1,4 @@
-// Copyright 2023 The Perses Authors
+// Copyright 2025 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
@@ -10,81 +10,20 @@
 // 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 { CardHeader, Typography, Stack, IconButton, styled } from '@mui/material';
+import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
+import { Box, CardHeader, Stack, Typography } from '@mui/material';
 import { InfoTooltip, combineSx } from '@perses-dev/components';
-import InformationOutlineIcon from 'mdi-material-ui/InformationOutline';
-import PencilIcon from 'mdi-material-ui/PencilOutline';
-import DeleteIcon from 'mdi-material-ui/DeleteOutline';
-import DragIcon from 'mdi-material-ui/DragVertical';
-import ContentCopy from 'mdi-material-ui/ContentCopy';
 import { useReplaceVariablesInString } from '@perses-dev/plugin-system';
-import { ARIA_LABEL_TEXT, TOOLTIP_TEXT } from '../../constants';
-export function PanelHeader({ id, title: rawTitle, description: rawDescription, editHandlers, sx, extra, ...rest }) {
+import InformationOutlineIcon from 'mdi-material-ui/InformationOutline';
+import { HEADER_ACTIONS_CONTAINER_NAME } from '../../constants';
+import { PanelActions } from './PanelActions';
+import { PanelLinks } from './PanelLinks';
+import { HeaderIconButton } from './HeaderIconButton';
+export function PanelHeader({ id, title: rawTitle, description: rawDescription, links, readHandlers, editHandlers, sx, extra, ...rest }) {
     const titleElementId = `${id}-title`;
     const descriptionTooltipId = `${id}-description`;
     const title = useReplaceVariablesInString(rawTitle);
     const description = useReplaceVariablesInString(rawDescription);
-    let actions = undefined;
-    if (editHandlers !== undefined) {
-        // If there are edit handlers, always just show the edit buttons
-        actions = /*#__PURE__*/ _jsxs(_Fragment, {
-            children: [
-                /*#__PURE__*/ _jsx(InfoTooltip, {
-                    description: TOOLTIP_TEXT.editPanel,
-                    children: /*#__PURE__*/ _jsx(HeaderIconButton, {
-                        "aria-label": ARIA_LABEL_TEXT.editPanel(title),
-                        size: "small",
-                        onClick: editHandlers.onEditPanelClick,
-                        children: /*#__PURE__*/ _jsx(PencilIcon, {
-                            fontSize: "inherit"
-                        })
-                    })
-                }),
-                /*#__PURE__*/ _jsx(InfoTooltip, {
-                    description: TOOLTIP_TEXT.duplicatePanel,
-                    children: /*#__PURE__*/ _jsx(HeaderIconButton, {
-                        "aria-label": ARIA_LABEL_TEXT.duplicatePanel(title),
-                        size: "small",
-                        onClick: editHandlers.onDuplicatePanelClick,
-                        children: /*#__PURE__*/ _jsx(ContentCopy, {
-                            fontSize: "inherit",
-                            sx: {
-                                // Shrink this icon a little bit to look more consistent
-                                // with the other icons in the header.
-                                transform: 'scale(0.925)'
-                            }
-                        })
-                    })
-                }),
-                /*#__PURE__*/ _jsx(InfoTooltip, {
-                    description: TOOLTIP_TEXT.deletePanel,
-                    children: /*#__PURE__*/ _jsx(HeaderIconButton, {
-                        "aria-label": ARIA_LABEL_TEXT.deletePanel(title),
-                        size: "small",
-                        onClick: editHandlers.onDeletePanelClick,
-                        children: /*#__PURE__*/ _jsx(DeleteIcon, {
-                            fontSize: "inherit"
-                        })
-                    })
-                }),
-                /*#__PURE__*/ _jsx(InfoTooltip, {
-                    description: TOOLTIP_TEXT.movePanel,
-                    children: /*#__PURE__*/ _jsx(HeaderIconButton, {
-                        "aria-label": ARIA_LABEL_TEXT.movePanel(title),
-                        size: "small",
-                        children: /*#__PURE__*/ _jsx(DragIcon, {
-                            className: "drag-handle",
-                            sx: {
-                                cursor: 'grab'
-                            },
-                            fontSize: "inherit"
-                        })
-                    })
-                })
-            ]
-        });
-    }
     return /*#__PURE__*/ _jsx(CardHeader, {
         id: id,
         component: "header",
@@ -101,43 +40,49 @@ export function PanelHeader({ id, title: rawTitle, description: rawDescription,
                         // `minHeight` guarantees that the header has the correct height
                         // when there is no title (i.e. in the preview)
                         lineHeight: '24px',
-                        minHeight: '24px',
+                        minHeight: '26px',
                         whiteSpace: 'nowrap',
                         overflow: 'hidden',
                         textOverflow: 'ellipsis'
                     },
                     children: title
                 }),
-                description !== undefined && description.trim().length > 0 && /*#__PURE__*/ _jsx(InfoTooltip, {
-                    id: descriptionTooltipId,
-                    description: description,
-                    enterDelay: 100,
-                    children: /*#__PURE__*/ _jsx(HeaderIconButton, {
-                        "aria-label": "panel description",
-                        size: "small",
-                        children: /*#__PURE__*/ _jsx(InformationOutlineIcon, {
-                            "aria-describedby": "info-tooltip",
-                            "aria-hidden": false,
-                            fontSize: "inherit",
-                            sx: {
-                                color: (theme)=>theme.palette.text.secondary
-                            }
+                description !== undefined && description.trim().length > 0 && /*#__PURE__*/ _jsx(Box, {
+                    sx: {
+                        display: editHandlers === undefined ? 'var(--panel-hover, none)' : 'flex'
+                    },
+                    children: /*#__PURE__*/ _jsx(InfoTooltip, {
+                        id: descriptionTooltipId,
+                        description: description,
+                        enterDelay: 100,
+                        children: /*#__PURE__*/ _jsx(HeaderIconButton, {
+                            "aria-label": "panel description",
+                            size: "small",
+                            children: /*#__PURE__*/ _jsx(InformationOutlineIcon, {
+                                "aria-describedby": "info-tooltip",
+                                "aria-hidden": false,
+                                fontSize: "inherit",
+                                sx: {
+                                    color: (theme)=>theme.palette.text.secondary
+                                }
+                            })
                         })
                     })
+                }),
+                links !== undefined && links.length > 0 && /*#__PURE__*/ _jsx(PanelLinks, {
+                    links: links
                 })
             ]
         }),
-        action: /*#__PURE__*/ _jsxs(HeaderActionWrapper, {
-            direction: "row",
-            spacing: 0.25,
-            alignItems: "center",
-            children: [
-                editHandlers === undefined && extra,
-                " ",
-                actions
-            ]
+        action: /*#__PURE__*/ _jsx(PanelActions, {
+            title: title,
+            readHandlers: readHandlers,
+            editHandlers: editHandlers,
+            extra: extra
         }),
         sx: combineSx((theme)=>({
+                containerType: 'inline-size',
+                containerName: HEADER_ACTIONS_CONTAINER_NAME,
                 padding: theme.spacing(1),
                 borderBottom: `solid 1px ${theme.palette.divider}`,
                 '.MuiCardHeader-content': {
@@ -154,17 +99,5 @@ export function PanelHeader({ id, title: rawTitle, description: rawDescription,
         ...rest
     });
 }
-const HeaderIconButton = styled(IconButton)(({ theme })=>({
-        borderRadius: theme.shape.borderRadius,
-        padding: '4px'
-    }));
-const HeaderActionWrapper = styled(Stack)(()=>({
-        // Adding back the negative margins from MUI's defaults for actions, so we
-        // avoid increasing the header size when actions are present while also being
-        // able to vertically center the actions.
-        // https://github.com/mui/material-ui/blob/master/packages/mui-material/src/CardHeader/CardHeader.js#L56-L58
-        marginTop: -4,
-        marginBottom: -4
-    }));
 
 //# sourceMappingURL=PanelHeader.js.map