@perses-dev/dashboards 0.50.3 → 0.51.0-beta.1

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

@@ -0,0 +1,22 @@
+/// <reference types="react" />
+import { QueryData } from '@perses-dev/plugin-system';
+import { Link } from '@perses-dev/core';
+export interface PanelActionsProps {
+    title: string;
+    description?: string;
+    descriptionTooltipId: string;
+    links?: Link[];
+    extra?: React.ReactNode;
+    editHandlers?: {
+        onEditPanelClick: () => void;
+        onDuplicatePanelClick: () => void;
+        onDeletePanelClick: () => void;
+    };
+    readHandlers?: {
+        isPanelViewed?: boolean;
+        onViewPanelClick: () => void;
+    };
+    queryResults: QueryData[];
+}
+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":";AAuBA,OAAO,EAAE,SAAS,EAAE,MAAM,2BAA2B,CAAC;AAGtD,OAAO,EAAE,IAAI,EAAE,MAAM,kBAAkB,CAAC;AAWxC,MAAM,WAAW,iBAAiB;IAChC,KAAK,EAAE,MAAM,CAAC;IACd,WAAW,CAAC,EAAE,MAAM,CAAC;IACrB,oBAAoB,EAAE,MAAM,CAAC;IAC7B,KAAK,CAAC,EAAE,IAAI,EAAE,CAAC;IACf,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;IACF,YAAY,CAAC,EAAE;QACb,aAAa,CAAC,EAAE,OAAO,CAAC;QACxB,gBAAgB,EAAE,MAAM,IAAI,CAAC;KAC9B,CAAC;IACF,YAAY,EAAE,SAAS,EAAE,CAAC;CAC3B;AASD,eAAO,MAAM,YAAY,EAAE,KAAK,CAAC,EAAE,CAAC,iBAAiB,CAqMpD,CAAC"}

package/dist/components/Panel/PanelActions.js

@@ -0,0 +1,352 @@
+// 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, Box, Popover, CircularProgress, styled } from '@mui/material';
+import { isValidElement, useMemo, useState } from 'react';
+import { InfoTooltip } 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 AlertIcon from 'mdi-material-ui/Alert';
+import InformationOutlineIcon from 'mdi-material-ui/InformationOutline';
+import { ARIA_LABEL_TEXT, HEADER_ACTIONS_CONTAINER_NAME, HEADER_MEDIUM_WIDTH, HEADER_SMALL_WIDTH, TOOLTIP_TEXT } from '../../constants';
+import { HeaderIconButton } from './HeaderIconButton';
+import { PanelLinks } from './PanelLinks';
+const ConditionalBox = styled(Box)({
+    display: 'none',
+    alignItems: 'center',
+    flexGrow: 1,
+    justifyContent: 'flex-end'
+});
+export const PanelActions = ({ editHandlers, readHandlers, extra, title, description, descriptionTooltipId, links, queryResults })=>{
+    const descriptionAction = useMemo(()=>{
+        if (description && description.trim().length > 0) {
+            return /*#__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
+                        }
+                    })
+                })
+            });
+        }
+        return undefined;
+    }, [
+        descriptionTooltipId,
+        description
+    ]);
+    const linksAction = links && links.length > 0 && /*#__PURE__*/ _jsx(PanelLinks, {
+        links: links
+    });
+    const extraActions = editHandlers === undefined && extra;
+    const queryStateIndicator = useMemo(()=>{
+        const hasData = queryResults.some((q)=>q.data);
+        const isFetching = queryResults.some((q)=>q.isFetching);
+        const queryErrors = queryResults.filter((q)=>q.error);
+        if (isFetching && hasData) {
+            // If the panel has no data, the panel content will show the loading overlay.
+            // Therefore, show the circular loading indicator only in case the panel doesn't display the loading overlay already.
+            return /*#__PURE__*/ _jsx(CircularProgress, {
+                "aria-label": "loading",
+                size: "1.125rem"
+            });
+        } else if (queryErrors.length > 0) {
+            const errorTexts = queryErrors.map((q)=>q.error).map((e)=>e?.message ?? e?.toString() ?? 'Unknown error') // eslint-disable-line @typescript-eslint/no-explicit-any
+            .join('\n');
+            return /*#__PURE__*/ _jsx(InfoTooltip, {
+                description: errorTexts,
+                children: /*#__PURE__*/ _jsx(HeaderIconButton, {
+                    "aria-label": "panel errors",
+                    size: "small",
+                    children: /*#__PURE__*/ _jsx(AlertIcon, {
+                        fontSize: "inherit"
+                    })
+                })
+            });
+        }
+    }, [
+        queryResults
+    ]);
+    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
+    ]);
+    const moveAction = useMemo(()=>{
+        if (editActions && !readHandlers?.isPanelViewed) {
+            return /*#__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 undefined;
+    }, [
+        editActions,
+        readHandlers,
+        title
+    ]);
+    const divider = /*#__PURE__*/ _jsx(Box, {
+        sx: {
+            flexGrow: 1
+        }
+    });
+    // if the panel is in non-editing, non-fullscreen mode, show certain icons only on hover
+    const OnHover = ({ children })=>editHandlers === undefined && !readHandlers?.isPanelViewed ? /*#__PURE__*/ _jsx(Box, {
+            sx: {
+                display: 'var(--panel-hover, none)'
+            },
+            children: children
+        }) : /*#__PURE__*/ _jsx(_Fragment, {
+            children: children
+        });
+    return /*#__PURE__*/ _jsxs(_Fragment, {
+        children: [
+            /*#__PURE__*/ _jsxs(ConditionalBox, {
+                sx: (theme)=>({
+                        [theme.containerQueries(HEADER_ACTIONS_CONTAINER_NAME).between(0, HEADER_SMALL_WIDTH)]: {
+                            display: 'flex'
+                        }
+                    }),
+                children: [
+                    divider,
+                    /*#__PURE__*/ _jsxs(OnHover, {
+                        children: [
+                            /*#__PURE__*/ _jsxs(OverflowMenu, {
+                                title: title,
+                                children: [
+                                    descriptionAction,
+                                    " ",
+                                    linksAction,
+                                    " ",
+                                    queryStateIndicator,
+                                    " ",
+                                    extraActions,
+                                    " ",
+                                    readActions,
+                                    " ",
+                                    editActions
+                                ]
+                            }),
+                            moveAction
+                        ]
+                    })
+                ]
+            }),
+            /*#__PURE__*/ _jsxs(ConditionalBox, {
+                sx: (theme)=>({
+                        [theme.containerQueries(HEADER_ACTIONS_CONTAINER_NAME).between(HEADER_SMALL_WIDTH, HEADER_MEDIUM_WIDTH)]: {
+                            display: 'flex'
+                        }
+                    }),
+                children: [
+                    /*#__PURE__*/ _jsxs(OnHover, {
+                        children: [
+                            descriptionAction,
+                            " ",
+                            linksAction
+                        ]
+                    }),
+                    divider,
+                    " ",
+                    queryStateIndicator,
+                    /*#__PURE__*/ _jsxs(OnHover, {
+                        children: [
+                            extraActions,
+                            " ",
+                            readActions,
+                            /*#__PURE__*/ _jsx(OverflowMenu, {
+                                title: title,
+                                children: editActions
+                            }),
+                            moveAction
+                        ]
+                    })
+                ]
+            }),
+            /*#__PURE__*/ _jsxs(ConditionalBox, {
+                sx: (theme)=>({
+                        // flip the logic here; if the browser (or jsdom) does not support container queries, always show all icons
+                        display: 'flex',
+                        [theme.containerQueries(HEADER_ACTIONS_CONTAINER_NAME).down(HEADER_MEDIUM_WIDTH)]: {
+                            display: 'none'
+                        }
+                    }),
+                children: [
+                    /*#__PURE__*/ _jsxs(OnHover, {
+                        children: [
+                            descriptionAction,
+                            " ",
+                            linksAction
+                        ]
+                    }),
+                    divider,
+                    " ",
+                    queryStateIndicator,
+                    /*#__PURE__*/ _jsxs(OnHover, {
+                        children: [
+                            extraActions,
+                            " ",
+                            readActions,
+                            " ",
+                            editActions,
+                            " ",
+                            moveAction
+                        ]
+                    })
+                ]
+            })
+        ]
+    });
+};
+const OverflowMenu = ({ children, title })=>{
+    const [anchorPosition, setAnchorPosition] = useState();
+    // do not show overflow menu if there is no content (for example, edit actions are hidden)
+    const hasContent = /*#__PURE__*/ isValidElement(children) || Array.isArray(children) && children.some(isValidElement);
+    if (!hasContent) {
+        return undefined;
+    }
+    const handleClick = (event)=>{
+        setAnchorPosition(event.currentTarget.getBoundingClientRect());
+    };
+    const handleClose = ()=>{
+        setAnchorPosition(undefined);
+    };
+    const open = Boolean(anchorPosition);
+    const id = open ? 'actions-menu' : 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,
+                anchorReference: "anchorPosition",
+                anchorPosition: anchorPosition,
+                onClose: handleClose,
+                anchorOrigin: {
+                    vertical: 'bottom',
+                    horizontal: 'left'
+                },
+                children: /*#__PURE__*/ _jsx(Stack, {
+                    direction: "row",
+                    alignItems: "center",
+                    sx: {
+                        padding: 1
+                    },
+                    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, Box, Popover, CircularProgress, styled, PopoverPosition } from '@mui/material';\nimport { isValidElement, PropsWithChildren, ReactNode, useMemo, useState } from 'react';\nimport { InfoTooltip } 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 { QueryData } from '@perses-dev/plugin-system';\nimport AlertIcon from 'mdi-material-ui/Alert';\nimport InformationOutlineIcon from 'mdi-material-ui/InformationOutline';\nimport { Link } from '@perses-dev/core';\nimport {\n  ARIA_LABEL_TEXT,\n  HEADER_ACTIONS_CONTAINER_NAME,\n  HEADER_MEDIUM_WIDTH,\n  HEADER_SMALL_WIDTH,\n  TOOLTIP_TEXT,\n} from '../../constants';\nimport { HeaderIconButton } from './HeaderIconButton';\nimport { PanelLinks } from './PanelLinks';\n\nexport interface PanelActionsProps {\n  title: string;\n  description?: string;\n  descriptionTooltipId: string;\n  links?: Link[];\n  extra?: React.ReactNode;\n  editHandlers?: {\n    onEditPanelClick: () => void;\n    onDuplicatePanelClick: () => void;\n    onDeletePanelClick: () => void;\n  };\n  readHandlers?: {\n    isPanelViewed?: boolean;\n    onViewPanelClick: () => void;\n  };\n  queryResults: QueryData[];\n}\n\nconst ConditionalBox = styled(Box)({\n  display: 'none',\n  alignItems: 'center',\n  flexGrow: 1,\n  justifyContent: 'flex-end',\n});\n\nexport const PanelActions: React.FC<PanelActionsProps> = ({\n  editHandlers,\n  readHandlers,\n  extra,\n  title,\n  description,\n  descriptionTooltipId,\n  links,\n  queryResults,\n}) => {\n  const descriptionAction = useMemo(() => {\n    if (description && description.trim().length > 0) {\n      return (\n        <InfoTooltip id={descriptionTooltipId} description={description} enterDelay={100}>\n          <HeaderIconButton aria-label=\"panel description\" size=\"small\">\n            <InformationOutlineIcon\n              aria-describedby=\"info-tooltip\"\n              aria-hidden={false}\n              fontSize=\"inherit\"\n              sx={{ color: (theme) => theme.palette.text.secondary }}\n            />\n          </HeaderIconButton>\n        </InfoTooltip>\n      );\n    }\n    return undefined;\n  }, [descriptionTooltipId, description]);\n  const linksAction = links && links.length > 0 && <PanelLinks links={links} />;\n  const extraActions = editHandlers === undefined && extra;\n\n  const queryStateIndicator = useMemo(() => {\n    const hasData = queryResults.some((q) => q.data);\n    const isFetching = queryResults.some((q) => q.isFetching);\n    const queryErrors = queryResults.filter((q) => q.error);\n    if (isFetching && hasData) {\n      // If the panel has no data, the panel content will show the loading overlay.\n      // Therefore, show the circular loading indicator only in case the panel doesn't display the loading overlay already.\n      return <CircularProgress aria-label=\"loading\" size=\"1.125rem\" />;\n    } else if (queryErrors.length > 0) {\n      const errorTexts = queryErrors\n        .map((q) => q.error)\n        .map((e: any) => e?.message ?? e?.toString() ?? 'Unknown error') // eslint-disable-line @typescript-eslint/no-explicit-any\n        .join('\\n');\n\n      return (\n        <InfoTooltip description={errorTexts}>\n          <HeaderIconButton aria-label=\"panel errors\" size=\"small\">\n            <AlertIcon fontSize=\"inherit\" />\n          </HeaderIconButton>\n        </InfoTooltip>\n      );\n    }\n  }, [queryResults]);\n\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  const moveAction = useMemo(() => {\n    if (editActions && !readHandlers?.isPanelViewed) {\n      return (\n        <InfoTooltip description={TOOLTIP_TEXT.movePanel}>\n          <HeaderIconButton aria-label={ARIA_LABEL_TEXT.movePanel(title)} size=\"small\">\n            <DragIcon className=\"drag-handle\" sx={{ cursor: 'grab' }} fontSize=\"inherit\" />\n          </HeaderIconButton>\n        </InfoTooltip>\n      );\n    }\n    return undefined;\n  }, [editActions, readHandlers, title]);\n\n  const divider = <Box sx={{ flexGrow: 1 }}></Box>;\n\n  // if the panel is in non-editing, non-fullscreen mode, show certain icons only on hover\n  const OnHover = ({ children }: PropsWithChildren): ReactNode =>\n    editHandlers === undefined && !readHandlers?.isPanelViewed ? (\n      <Box sx={{ display: 'var(--panel-hover, none)' }}>{children}</Box>\n    ) : (\n      <>{children}</>\n    );\n\n  return (\n    <>\n      {/* small panel width: move all icons except move/grab to overflow menu */}\n      <ConditionalBox\n        sx={(theme) => ({\n          [theme.containerQueries(HEADER_ACTIONS_CONTAINER_NAME).between(0, HEADER_SMALL_WIDTH)]: { display: 'flex' },\n        })}\n      >\n        {divider}\n        <OnHover>\n          <OverflowMenu title={title}>\n            {descriptionAction} {linksAction} {queryStateIndicator} {extraActions} {readActions} {editActions}\n          </OverflowMenu>\n          {moveAction}\n        </OnHover>\n      </ConditionalBox>\n\n      {/* medium panel width: move edit icons to overflow menu */}\n      <ConditionalBox\n        sx={(theme) => ({\n          [theme.containerQueries(HEADER_ACTIONS_CONTAINER_NAME).between(HEADER_SMALL_WIDTH, HEADER_MEDIUM_WIDTH)]: {\n            display: 'flex',\n          },\n        })}\n      >\n        <OnHover>\n          {descriptionAction} {linksAction}\n        </OnHover>\n        {divider} {queryStateIndicator}\n        <OnHover>\n          {extraActions} {readActions}\n          <OverflowMenu title={title}>{editActions}</OverflowMenu>\n          {moveAction}\n        </OnHover>\n      </ConditionalBox>\n\n      {/* large panel width: show all icons in panel header */}\n      <ConditionalBox\n        sx={(theme) => ({\n          // flip the logic here; if the browser (or jsdom) does not support container queries, always show all icons\n          display: 'flex',\n          [theme.containerQueries(HEADER_ACTIONS_CONTAINER_NAME).down(HEADER_MEDIUM_WIDTH)]: { display: 'none' },\n        })}\n      >\n        <OnHover>\n          {descriptionAction} {linksAction}\n        </OnHover>\n        {divider} {queryStateIndicator}\n        <OnHover>\n          {extraActions} {readActions} {editActions} {moveAction}\n        </OnHover>\n      </ConditionalBox>\n    </>\n  );\n};\n\nconst OverflowMenu: React.FC<PropsWithChildren<{ title: string }>> = ({ children, title }) => {\n  const [anchorPosition, setAnchorPosition] = useState<PopoverPosition>();\n\n  // do not show overflow menu if there is no content (for example, edit actions are hidden)\n  const hasContent = isValidElement(children) || (Array.isArray(children) && children.some(isValidElement));\n  if (!hasContent) {\n    return undefined;\n  }\n\n  const handleClick = (event: React.MouseEvent<HTMLElement>): undefined => {\n    setAnchorPosition(event.currentTarget.getBoundingClientRect());\n  };\n\n  const handleClose = (): undefined => {\n    setAnchorPosition(undefined);\n  };\n\n  const open = Boolean(anchorPosition);\n  const id = open ? 'actions-menu' : 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        anchorReference=\"anchorPosition\"\n        anchorPosition={anchorPosition}\n        onClose={handleClose}\n        anchorOrigin={{\n          vertical: 'bottom',\n          horizontal: 'left',\n        }}\n      >\n        <Stack direction=\"row\" alignItems=\"center\" sx={{ padding: 1 }} onClick={handleClose}>\n          {children}\n        </Stack>\n      </Popover>\n    </>\n  );\n};\n"],"names":["Stack","Box","Popover","CircularProgress","styled","isValidElement","useMemo","useState","InfoTooltip","ArrowCollapseIcon","ArrowExpandIcon","PencilIcon","DeleteIcon","DragIcon","ContentCopyIcon","MenuIcon","AlertIcon","InformationOutlineIcon","ARIA_LABEL_TEXT","HEADER_ACTIONS_CONTAINER_NAME","HEADER_MEDIUM_WIDTH","HEADER_SMALL_WIDTH","TOOLTIP_TEXT","HeaderIconButton","PanelLinks","ConditionalBox","display","alignItems","flexGrow","justifyContent","PanelActions","editHandlers","readHandlers","extra","title","description","descriptionTooltipId","links","queryResults","descriptionAction","trim","length","id","enterDelay","aria-label","size","aria-describedby","aria-hidden","fontSize","sx","color","theme","palette","text","secondary","undefined","linksAction","extraActions","queryStateIndicator","hasData","some","q","data","isFetching","queryErrors","filter","error","errorTexts","map","e","message","toString","join","readActions","viewPanel","onClick","onViewPanelClick","isPanelViewed","editActions","editPanel","onEditPanelClick","duplicatePanel","onDuplicatePanelClick","transform","deletePanel","onDeletePanelClick","moveAction","movePanel","className","cursor","divider","OnHover","children","containerQueries","between","OverflowMenu","down","anchorPosition","setAnchorPosition","hasContent","Array","isArray","handleClick","event","currentTarget","getBoundingClientRect","handleClose","open","Boolean","showPanelActions","anchorReference","onClose","anchorOrigin","vertical","horizontal","direction","padding"],"mappings":"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"}

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

@@ -1,13 +1,14 @@
-import { PanelProps } from '@perses-dev/plugin-system';
+import { PanelProps, QueryData } from '@perses-dev/plugin-system';
 import { UnknownSpec, PanelDefinition } from '@perses-dev/core';
 import { ReactElement } from 'react';
-export interface PanelContentProps extends PanelProps<UnknownSpec> {
+export interface PanelContentProps extends Omit<PanelProps<UnknownSpec>, 'queryResults'> {
     panelPluginKind: string;
     definition?: PanelDefinition<UnknownSpec>;
+    queryResults: QueryData[];
 }
 /**
- * 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.
+ * Based on the status of the queries (loading, error or data available), this component renders a
+ * loading overlay, throws an error, or renders the panel content.
  */
 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;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"}
+{"version":3,"file":"PanelContent.d.ts","sourceRoot":"","sources":["../../../src/components/Panel/PanelContent.tsx"],"names":[],"mappings":"AAaA,OAAO,EAAa,UAAU,EAAE,SAAS,EAAe,MAAM,2BAA2B,CAAC;AAC1F,OAAO,EAAE,WAAW,EAAE,eAAe,EAAiB,MAAM,kBAAkB,CAAC;AAC/E,OAAO,EAAE,YAAY,EAAE,MAAM,OAAO,CAAC;AAKrC,MAAM,WAAW,iBAAkB,SAAQ,IAAI,CAAC,UAAU,CAAC,WAAW,CAAC,EAAE,cAAc,CAAC;IACtF,eAAe,EAAE,MAAM,CAAC;IACxB,UAAU,CAAC,EAAE,eAAe,CAAC,WAAW,CAAC,CAAC;IAC1C,YAAY,EAAE,SAAS,EAAE,CAAC;CAC3B;AAED;;;GAGG;AACH,wBAAgB,YAAY,CAAC,KAAK,EAAE,iBAAiB,GAAG,YAAY,CAiDnE"}

package/dist/components/Panel/PanelContent.js

@@ -12,32 +12,78 @@
 // limitations under the License.
 import { jsx as _jsx } from "react/jsx-runtime";
 import { usePlugin } from '@perses-dev/plugin-system';
+import { LoadingOverlay } from '@perses-dev/components';
 import { Skeleton } from '@mui/material';
+import { PanelPluginLoader } from './PanelPluginLoader';
 /**
- * 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.
+ * Based on the status of the queries (loading, error or data available), this component renders a
+ * loading overlay, throws an error, or renders the panel content.
  */ export function PanelContent(props) {
-    const { panelPluginKind, contentDimensions, definition, ...others } = props;
-    const { data: plugin, isLoading } = usePlugin('Panel', panelPluginKind, {
-        useErrorBoundary: true
+    const { panelPluginKind, definition, queryResults, spec, contentDimensions } = props;
+    const { data: plugin, isLoading: isPanelLoading } = usePlugin('Panel', panelPluginKind, {
+        throwOnError: true
     });
-    const PanelComponent = plugin === null || plugin === void 0 ? void 0 : plugin.PanelComponent;
-    if (isLoading) {
+    // Show fullsize skeleton if the panel plugin is loading.
+    if (isPanelLoading) {
         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..."
         });
     }
-    if (PanelComponent === undefined) {
-        throw new Error(`Missing PanelComponent from panel plugin for kind '${panelPluginKind}'`);
+    // Render the panel if any query has data, or the panel doesn't have a query attached (for example MarkdownPanel).
+    // Loading indicator or errors of other queries are shown in the panel header.
+    const queryResultsWithData = queryResults.flatMap((q)=>q.data ? [
+            {
+                data: q.data,
+                definition: q.definition
+            }
+        ] : []);
+    if (queryResultsWithData.length > 0 || queryResults.length === 0) {
+        return /*#__PURE__*/ _jsx(PanelPluginLoader, {
+            kind: panelPluginKind,
+            spec: spec,
+            contentDimensions: contentDimensions,
+            definition: definition,
+            queryResults: queryResultsWithData
+        });
+    }
+    // No query has data, show loading overlay if any query is fetching data.
+    if (queryResults.some((q)=>q.isFetching)) {
+        return /*#__PURE__*/ _jsx(PanelLoading, {
+            plugin: plugin,
+            spec: spec,
+            definition: definition,
+            contentDimensions: contentDimensions
+        });
+    }
+    // No query has data or is loading, show the error if any query has an error.
+    // The error will be catched in <ErrorBoundary> of <Panel>.
+    const queryError = queryResults.find((q)=>q.error);
+    if (queryError) {
+        throw queryError.error;
     }
-    return /*#__PURE__*/ _jsx(PanelComponent, {
-        ...others,
-        contentDimensions: contentDimensions,
-        definition: definition
+    // At this point, one or more queries are defined, but no query has data, is loading, or has an error.
+    // This can happen if all queries are disabled (e.g. dependent dashboard variables are loading, or they are not in the viewport of the browser).
+    // Most likely, some query will be enabled later. Render the panel loading skeleton.
+    return /*#__PURE__*/ _jsx(PanelLoading, {
+        plugin: plugin,
+        spec: spec,
+        definition: definition,
+        contentDimensions: contentDimensions
     });
 }
+function PanelLoading({ plugin, spec, definition, contentDimensions }) {
+    if (plugin?.LoadingComponent) {
+        return /*#__PURE__*/ _jsx(plugin.LoadingComponent, {
+            spec: spec,
+            contentDimensions: contentDimensions,
+            definition: definition,
+            queryResults: []
+        });
+    }
+    return /*#__PURE__*/ _jsx(LoadingOverlay, {});
+}
 
 //# sourceMappingURL=PanelContent.js.map

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';\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, { 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;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,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, QueryData, PanelPlugin } from '@perses-dev/plugin-system';\nimport { UnknownSpec, PanelDefinition, QueryDataType } from '@perses-dev/core';\nimport { ReactElement } from 'react';\nimport { LoadingOverlay } from '@perses-dev/components';\nimport { Skeleton } from '@mui/material';\nimport { PanelPluginLoader } from './PanelPluginLoader';\n\nexport interface PanelContentProps extends Omit<PanelProps<UnknownSpec>, 'queryResults'> {\n  panelPluginKind: string;\n  definition?: PanelDefinition<UnknownSpec>;\n  queryResults: QueryData[];\n}\n\n/**\n * Based on the status of the queries (loading, error or data available), this component renders a\n * loading overlay, throws an error, or renders the panel content.\n */\nexport function PanelContent(props: PanelContentProps): ReactElement {\n  const { panelPluginKind, definition, queryResults, spec, contentDimensions } = props;\n  const { data: plugin, isLoading: isPanelLoading } = usePlugin('Panel', panelPluginKind, { throwOnError: true });\n\n  // Show fullsize skeleton if the panel plugin is loading.\n  if (isPanelLoading) {\n    return (\n      <Skeleton\n        variant=\"rectangular\"\n        width={contentDimensions?.width}\n        height={contentDimensions?.height}\n        aria-label=\"Loading...\"\n      />\n    );\n  }\n\n  // Render the panel if any query has data, or the panel doesn't have a query attached (for example MarkdownPanel).\n  // Loading indicator or errors of other queries are shown in the panel header.\n  const queryResultsWithData = queryResults.flatMap((q) =>\n    q.data ? [{ data: q.data, definition: q.definition }] : []\n  );\n  if (queryResultsWithData.length > 0 || queryResults.length === 0) {\n    return (\n      <PanelPluginLoader\n        kind={panelPluginKind}\n        spec={spec}\n        contentDimensions={contentDimensions}\n        definition={definition}\n        queryResults={queryResultsWithData}\n      />\n    );\n  }\n\n  // No query has data, show loading overlay if any query is fetching data.\n  if (queryResults.some((q) => q.isFetching)) {\n    return <PanelLoading plugin={plugin} spec={spec} definition={definition} contentDimensions={contentDimensions} />;\n  }\n\n  // No query has data or is loading, show the error if any query has an error.\n  // The error will be catched in <ErrorBoundary> of <Panel>.\n  const queryError = queryResults.find((q) => q.error);\n  if (queryError) {\n    throw queryError.error;\n  }\n\n  // At this point, one or more queries are defined, but no query has data, is loading, or has an error.\n  // This can happen if all queries are disabled (e.g. dependent dashboard variables are loading, or they are not in the viewport of the browser).\n  // Most likely, some query will be enabled later. Render the panel loading skeleton.\n  return <PanelLoading plugin={plugin} spec={spec} definition={definition} contentDimensions={contentDimensions} />;\n}\n\ninterface PanelLoadingProps extends Pick<PanelContentProps, 'spec' | 'definition' | 'contentDimensions'> {\n  plugin?: PanelPlugin<UnknownSpec, PanelProps<UnknownSpec, QueryDataType>>;\n}\n\nfunction PanelLoading({ plugin, spec, definition, contentDimensions }: PanelLoadingProps): ReactElement {\n  if (plugin?.LoadingComponent) {\n    return (\n      <plugin.LoadingComponent\n        spec={spec}\n        contentDimensions={contentDimensions}\n        definition={definition}\n        queryResults={[]}\n      />\n    );\n  }\n  return <LoadingOverlay />;\n}\n"],"names":["usePlugin","LoadingOverlay","Skeleton","PanelPluginLoader","PanelContent","props","panelPluginKind","definition","queryResults","spec","contentDimensions","data","plugin","isLoading","isPanelLoading","throwOnError","variant","width","height","aria-label","queryResultsWithData","flatMap","q","length","kind","some","isFetching","PanelLoading","queryError","find","error","LoadingComponent"],"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,QAA4C,4BAA4B;AAG1F,SAASC,cAAc,QAAQ,yBAAyB;AACxD,SAASC,QAAQ,QAAQ,gBAAgB;AACzC,SAASC,iBAAiB,QAAQ,sBAAsB;AAQxD;;;CAGC,GACD,OAAO,SAASC,aAAaC,KAAwB;IACnD,MAAM,EAAEC,eAAe,EAAEC,UAAU,EAAEC,YAAY,EAAEC,IAAI,EAAEC,iBAAiB,EAAE,GAAGL;IAC/E,MAAM,EAAEM,MAAMC,MAAM,EAAEC,WAAWC,cAAc,EAAE,GAAGd,UAAU,SAASM,iBAAiB;QAAES,cAAc;IAAK;IAE7G,yDAAyD;IACzD,IAAID,gBAAgB;QAClB,qBACE,KAACZ;YACCc,SAAQ;YACRC,OAAOP,mBAAmBO;YAC1BC,QAAQR,mBAAmBQ;YAC3BC,cAAW;;IAGjB;IAEA,kHAAkH;IAClH,8EAA8E;IAC9E,MAAMC,uBAAuBZ,aAAaa,OAAO,CAAC,CAACC,IACjDA,EAAEX,IAAI,GAAG;YAAC;gBAAEA,MAAMW,EAAEX,IAAI;gBAAEJ,YAAYe,EAAEf,UAAU;YAAC;SAAE,GAAG,EAAE;IAE5D,IAAIa,qBAAqBG,MAAM,GAAG,KAAKf,aAAae,MAAM,KAAK,GAAG;QAChE,qBACE,KAACpB;YACCqB,MAAMlB;YACNG,MAAMA;YACNC,mBAAmBA;YACnBH,YAAYA;YACZC,cAAcY;;IAGpB;IAEA,yEAAyE;IACzE,IAAIZ,aAAaiB,IAAI,CAAC,CAACH,IAAMA,EAAEI,UAAU,GAAG;QAC1C,qBAAO,KAACC;YAAaf,QAAQA;YAAQH,MAAMA;YAAMF,YAAYA;YAAYG,mBAAmBA;;IAC9F;IAEA,6EAA6E;IAC7E,2DAA2D;IAC3D,MAAMkB,aAAapB,aAAaqB,IAAI,CAAC,CAACP,IAAMA,EAAEQ,KAAK;IACnD,IAAIF,YAAY;QACd,MAAMA,WAAWE,KAAK;IACxB;IAEA,sGAAsG;IACtG,gJAAgJ;IAChJ,oFAAoF;IACpF,qBAAO,KAACH;QAAaf,QAAQA;QAAQH,MAAMA;QAAMF,YAAYA;QAAYG,mBAAmBA;;AAC9F;AAMA,SAASiB,aAAa,EAAEf,MAAM,EAAEH,IAAI,EAAEF,UAAU,EAAEG,iBAAiB,EAAqB;IACtF,IAAIE,QAAQmB,kBAAkB;QAC5B,qBACE,KAACnB,OAAOmB,gBAAgB;YACtBtB,MAAMA;YACNC,mBAAmBA;YACnBH,YAAYA;YACZC,cAAc,EAAE;;IAGtB;IACA,qBAAO,KAACP;AACV"}

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

@@ -1,6 +1,8 @@
 import { CardHeaderProps } from '@mui/material';
-import { ReactElement, ReactNode } from 'react';
 import { Link } from '@perses-dev/core';
+import { QueryData } from '@perses-dev/plugin-system';
+import { ReactElement, ReactNode } from 'react';
+import { PanelActionsProps } from './PanelActions';
 type OmittedProps = 'children' | 'action' | 'title' | 'disableTypography';
 export interface PanelHeaderProps extends Omit<CardHeaderProps, OmittedProps> {
     id: string;
@@ -8,16 +10,10 @@ export interface PanelHeaderProps extends Omit<CardHeaderProps, OmittedProps> {
     description?: string;
     links?: Link[];
     extra?: ReactNode;
-    readHandlers?: {
-        isPanelViewed?: boolean;
-        onViewPanelClick: () => void;
-    };
-    editHandlers?: {
-        onEditPanelClick: () => void;
-        onDuplicatePanelClick: () => void;
-        onDeletePanelClick: () => void;
-    };
+    queryResults: QueryData[];
+    readHandlers?: PanelActionsProps['readHandlers'];
+    editHandlers?: PanelActionsProps['editHandlers'];
 }
-export declare function PanelHeader({ id, title: rawTitle, description: rawDescription, links, readHandlers, editHandlers, sx, extra, ...rest }: PanelHeaderProps): ReactElement;
+export declare function PanelHeader({ id, title: rawTitle, description: rawDescription, links, queryResults, 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,EAAiC,eAAe,EAAsB,MAAM,eAAe,CAAC;AAUnG,OAAO,EAAE,YAAY,EAAE,SAAS,EAAE,MAAM,OAAO,CAAC;AAChD,OAAO,EAAE,IAAI,EAAE,MAAM,kBAAkB,CAAC;AAGxC,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;QACb,aAAa,CAAC,EAAE,OAAO,CAAC;QACxB,gBAAgB,EAAE,MAAM,IAAI,CAAC;KAC9B,CAAC;IACF,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,KAAK,EACL,YAAY,EACZ,YAAY,EACZ,EAAE,EACF,KAAK,EACL,GAAG,IAAI,EACR,EAAE,gBAAgB,GAAG,YAAY,CA0IjC"}
+{"version":3,"file":"PanelHeader.d.ts","sourceRoot":"","sources":["../../../src/components/Panel/PanelHeader.tsx"],"names":[],"mappings":"AAaA,OAAO,EAAc,eAAe,EAAqB,MAAM,eAAe,CAAC;AAE/E,OAAO,EAAE,IAAI,EAAE,MAAM,kBAAkB,CAAC;AACxC,OAAO,EAAE,SAAS,EAA+B,MAAM,2BAA2B,CAAC;AACnF,OAAO,EAAE,YAAY,EAAE,SAAS,EAAE,MAAM,OAAO,CAAC;AAEhD,OAAO,EAAgB,iBAAiB,EAAE,MAAM,gBAAgB,CAAC;AAEjE,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,EAAE,SAAS,EAAE,CAAC;IAC1B,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,YAAY,EACZ,EAAE,EACF,KAAK,EACL,GAAG,IAAI,EACR,EAAE,gBAAgB,GAAG,YAAY,CA0DjC"}