npm - @perses-dev/dashboards - Versions diffs - 0.53.0-rc.3 → 0.53.1 - Mend

@perses-dev/dashboards 0.53.0-rc.3 → 0.53.1

This diff represents the content of publicly available package versions that have been released to one of the supported registries. The information contained in this diff is provided for informational purposes only and reflects changes between package versions as they appear in their respective public registries.

Files changed (9) hide show

package/dist/cjs/components/Panel/PanelActions.js CHANGED Viewed

@@ -230,17 +230,22 @@ const PanelActions = ({ editHandlers, readHandlers, viewQueriesHandler, extra, t
     ]);
     const moveAction = (0, _react.useMemo)(()=>{
         if (editActions && !readHandlers?.isPanelViewed) {
-            return /*#__PURE__*/ (0, _jsxruntime.jsx)(_components.InfoTooltip, {
-                description: _constants.TOOLTIP_TEXT.movePanel,
-                children: /*#__PURE__*/ (0, _jsxruntime.jsx)(_HeaderIconButton.HeaderIconButton, {
-                    "aria-label": _constants.ARIA_LABEL_TEXT.movePanel(title),
-                    size: "small",
-                    children: /*#__PURE__*/ (0, _jsxruntime.jsx)(_DragVertical.default, {
-                        className: "drag-handle",
-                        sx: {
-                            cursor: 'grab'
-                        },
-                        fontSize: "inherit"
+            return /*#__PURE__*/ (0, _jsxruntime.jsx)(_material.Box, {
+                sx: {
+                    background: (theme)=>theme.palette.background.default
+                },
+                children: /*#__PURE__*/ (0, _jsxruntime.jsx)(_components.InfoTooltip, {
+                    description: _constants.TOOLTIP_TEXT.movePanel,
+                    children: /*#__PURE__*/ (0, _jsxruntime.jsx)(_HeaderIconButton.HeaderIconButton, {
+                        "aria-label": _constants.ARIA_LABEL_TEXT.movePanel(title),
+                        size: "small",
+                        children: /*#__PURE__*/ (0, _jsxruntime.jsx)(_DragVertical.default, {
+                            className: "drag-handle",
+                            sx: {
+                                cursor: 'grab'
+                            },
+                            fontSize: "inherit"
+                        })
                     })
                 })
             });
@@ -408,7 +413,10 @@ const OverflowMenu = ({ children, title, icon, direction = 'row' })=>{
     };
     const open = Boolean(anchorPosition);
     const id = open ? 'actions-menu' : undefined;
-    return /*#__PURE__*/ (0, _jsxruntime.jsxs)(_jsxruntime.Fragment, {
+    return /*#__PURE__*/ (0, _jsxruntime.jsxs)(_material.Box, {
+        sx: {
+            background: (theme)=>theme.palette.background.default
+        },
         children: [
             /*#__PURE__*/ (0, _jsxruntime.jsx)(_HeaderIconButton.HeaderIconButton, {
                 className: "show-actions",

package/dist/cjs/components/PanelDrawer/PanelQueriesSharedControls.js CHANGED Viewed

@@ -40,6 +40,21 @@ function PanelQueriesSharedControls({ plugin, control, panelDefinition, onQuerie
                 spec: query.spec.plugin.spec
             };
         }) ?? []);
+    const handleOnQueriesChange = (0, _react.useCallback)((queries)=>{
+        onQueriesChange(queries);
+        // If the number of queries has changed, force preview definition update to remove results of deleted queries.
+        if (queries.length !== previewDefinition.length) {
+            setPreviewDefinition(queries.map((query)=>{
+                return {
+                    kind: query.spec.plugin.kind,
+                    spec: query.spec.plugin.spec
+                };
+            }));
+        }
+    }, [
+        onQueriesChange,
+        previewDefinition.length
+    ]);
     const handleRunQuery = (0, _react.useCallback)((index, newDef)=>{
         setPreviewDefinition((prev)=>{
             const newDefinitions = [
@@ -85,7 +100,7 @@ function PanelQueriesSharedControls({ plugin, control, panelDefinition, onQuerie
                         control: control,
                         panelDefinition: panelDefinition,
                         onJSONChange: onJSONChange,
-                        onQueriesChange: onQueriesChange,
+                        onQueriesChange: handleOnQueriesChange,
                         onQueryRun: handleRunQuery,
                         onPluginSpecChange: onPluginSpecChange
                     })

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

	@@ -1 +1 @@
1	- {"version":3,"file":"PanelActions.d.ts","sourceRoot":"","sources":["../../../src/components/Panel/PanelActions.tsx"],"names":[],"mappings":"AAcA,OAAO,EAAmD,SAAS,EAAqB,MAAM,OAAO,CAAC;AAEtG,OAAO,EAAE,SAAS,EAAE,MAAM,2BAA2B,CAAC;AAatD,OAAO,EAAE,IAAI,EAAU,MAAM,kBAAkB,CAAC;AAUhD,OAAO,EAAE,YAAY,EAAE,MAAM,SAAS,CAAC;AAQvC,MAAM,WAAW,iBAAiB;IAChC,KAAK,CAAC,EAAE,MAAM,CAAC;IACf,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,kBAAkB,CAAC,EAAE;QACnB,OAAO,EAAE,MAAM,IAAI,CAAC;KACrB,CAAC;IACF,YAAY,EAAE,SAAS,EAAE,CAAC;IAC1B,aAAa,CAAC,EAAE,SAAS,EAAE,CAAC;IAC5B,WAAW,CAAC,EAAE,SAAS,EAAE,CAAC;IAC1B,sBAAsB,CAAC,EAAE,OAAO,CAAC;IACjC,SAAS,EAAE,YAAY,CAAC,WAAW,CAAC,CAAC;CACtC;AASD,eAAO,MAAM,YAAY,EAAE,KAAK,CAAC,EAAE,CAAC,iBAAiB,~~CAgQpD~~,CAAC"}
1	+ {"version":3,"file":"PanelActions.d.ts","sourceRoot":"","sources":["../../../src/components/Panel/PanelActions.tsx"],"names":[],"mappings":"AAcA,OAAO,EAAmD,SAAS,EAAqB,MAAM,OAAO,CAAC;AAEtG,OAAO,EAAE,SAAS,EAAE,MAAM,2BAA2B,CAAC;AAatD,OAAO,EAAE,IAAI,EAAU,MAAM,kBAAkB,CAAC;AAUhD,OAAO,EAAE,YAAY,EAAE,MAAM,SAAS,CAAC;AAQvC,MAAM,WAAW,iBAAiB;IAChC,KAAK,CAAC,EAAE,MAAM,CAAC;IACf,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,kBAAkB,CAAC,EAAE;QACnB,OAAO,EAAE,MAAM,IAAI,CAAC;KACrB,CAAC;IACF,YAAY,EAAE,SAAS,EAAE,CAAC;IAC1B,aAAa,CAAC,EAAE,SAAS,EAAE,CAAC;IAC5B,WAAW,CAAC,EAAE,SAAS,EAAE,CAAC;IAC1B,sBAAsB,CAAC,EAAE,OAAO,CAAC;IACjC,SAAS,EAAE,YAAY,CAAC,WAAW,CAAC,CAAC;CACtC;AASD,eAAO,MAAM,YAAY,EAAE,KAAK,CAAC,EAAE,CAAC,iBAAiB,CAkQpD,CAAC"}

package/dist/components/Panel/PanelActions.js CHANGED Viewed

@@ -215,17 +215,22 @@ export const PanelActions = ({ editHandlers, readHandlers, viewQueriesHandler, e
     ]);
     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 /*#__PURE__*/ _jsx(Box, {
+                sx: {
+                    background: (theme)=>theme.palette.background.default
+                },
+                children: /*#__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"
+                        })
                     })
                 })
             });
@@ -393,7 +398,10 @@ const OverflowMenu = ({ children, title, icon, direction = 'row' })=>{
     };
     const open = Boolean(anchorPosition);
     const id = open ? 'actions-menu' : undefined;
-    return /*#__PURE__*/ _jsxs(_Fragment, {
+    return /*#__PURE__*/ _jsxs(Box, {
+        sx: {
+            background: (theme)=>theme.palette.background.default
+        },
         children: [
             /*#__PURE__*/ _jsx(HeaderIconButton, {
                 className: "show-actions",

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

	@@ -1 +1 @@
1	- {"version":3,"sources":["../../../src/components/Panel/PanelActions.tsx"],"sourcesContent":["// Copyright 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, ReactElement, ReactNode, useMemo, useState } from 'react';\nimport { InfoTooltip } from '@perses-dev/components';\nimport { QueryData } from '@perses-dev/plugin-system';\nimport DatabaseSearch from 'mdi-material-ui/DatabaseSearch';\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 AlertIcon from 'mdi-material-ui/Alert';\nimport AlertCircleIcon from 'mdi-material-ui/AlertCircle';\nimport InformationOutlineIcon from 'mdi-material-ui/InformationOutline';\nimport LightningBoltIcon from 'mdi-material-ui/LightningBolt';\nimport { Link, Notice } 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';\nimport { PanelOptions } from './Panel';\n\nconst noticeTypeToIcon: Record<Notice['type'], ReactNode> = {\n error: <AlertCircleIcon color=\"error\" />,\n warning: <AlertIcon fontSize=\"inherit\" color=\"warning\" />,\n info: <InformationOutlineIcon fontSize=\"inherit\" color=\"info\" />,\n};\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 viewQueriesHandler?: {\n onClick: () => void;\n };\n queryResults: QueryData[];\n pluginActions?: ReactNode[];\n itemActions?: ReactNode[];\n areItemActionsDisabled?: boolean;\n showIcons: PanelOptions['showIcons'];\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 viewQueriesHandler,\n extra,\n title,\n description,\n descriptionTooltipId,\n links,\n queryResults,\n pluginActions = [],\n itemActions = [],\n showIcons,\n}) => {\n const descriptionAction = useMemo((): ReactNode \| undefined => {\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\n const linksAction = links && links.length > 0 && <PanelLinks links={links} />;\n const extraActions = editHandlers === undefined && extra;\n\n const queryStateIndicator = useMemo((): ReactNode \| undefined => {\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\n if (isFetching && hasData) {\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) => e.message)\n .join('\\n');\n\n return (\n <InfoTooltip description={errorTexts}>\n <HeaderIconButton aria-label=\"panel errors\" size=\"small\">\n <AlertIcon\n fontSize=\"inherit\"\n sx={{\n color: (theme) => theme.palette.error.main,\n }}\n />\n </HeaderIconButton>\n </InfoTooltip>\n );\n }\n }, [queryResults]);\n\n const noticesIndicator = useMemo(() => {\n const notices = queryResults.flatMap((q) => {\n return q.data?.metadata?.notices ?? [];\n });\n\n if (notices.length > 0) {\n const lastNotice = notices[notices.length - 1]!;\n\n return (\n <InfoTooltip description={lastNotice.message}>\n <HeaderIconButton aria-label=\"panel notices\" size=\"small\">\n {noticeTypeToIcon[lastNotice.type]}\n </HeaderIconButton>\n </InfoTooltip>\n );\n }\n }, [queryResults]);\n\n const readActions = useMemo((): ReactNode \| undefined => {\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 viewQueryAction = useMemo(() => {\n if (!viewQueriesHandler?.onClick) return null;\n return (\n <InfoTooltip description={TOOLTIP_TEXT.queryView}>\n <HeaderIconButton\n aria-label={ARIA_LABEL_TEXT.openQueryView(title)}\n size=\"small\"\n onClick={viewQueriesHandler.onClick}\n >\n <DatabaseSearch fontSize=\"inherit\" />\n </HeaderIconButton>\n </InfoTooltip>\n );\n }, [viewQueriesHandler, title]);\n\n const editActions = useMemo((): ReactNode \| undefined => {\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((): ReactNode \| undefined => {\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 // By default, the panel header shows certain icons only on hover if the panel is in non-editing, non-fullscreen mode\n const OnHover = ({ children }: PropsWithChildren): ReactNode =>\n showIcons === 'hover' ? <Box sx={{ display: 'var(--panel-hover, none)' }}>{children}</Box> : <>{children}</>;\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} {noticesIndicator} {extraActions} {viewQueryAction}\n {readActions} {pluginActions} {itemActions}\n {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 {noticesIndicator}\n <OnHover>\n {extraActions}\n {readActions}\n <OverflowMenu title={title}>\n {editActions} {viewQueryAction} {pluginActions} {itemActions}\n </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 {noticesIndicator}\n <OnHover>\n {extraActions}\n {viewQueryAction}\n {readActions} {editActions}\n {/ Show plugin actions inside a menu if it gets crowded */}\n {pluginActions.length <= 1 ? pluginActions : <OverflowMenu title={title}>{pluginActions}</OverflowMenu>}\n {itemActions.length <= 1 ? (\n itemActions\n ) : (\n <InfoTooltip description={`${itemActions.length} actions`}>\n <OverflowMenu icon={<LightningBoltIcon fontSize=\"inherit\" />} direction=\"column\" title={title}>\n {itemActions}\n </OverflowMenu>\n </InfoTooltip>\n )}\n {moveAction}\n </OnHover>\n </ConditionalBox>\n </>\n );\n};\n\nconst OverflowMenu: React.FC<\n PropsWithChildren<{ title?: string; icon?: ReactElement; direction?: 'row' \| 'column' }>\n> = ({ children, title, icon, direction = 'row' }) => {\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 null;\n }\n\n const handleClick = (event: React.MouseEvent<HTMLElement>): void => {\n setAnchorPosition(event.currentTarget.getBoundingClientRect());\n };\n\n const handleClose = (): void => {\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 {icon ?? <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={direction} 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","DatabaseSearch","ArrowCollapseIcon","ArrowExpandIcon","PencilIcon","DeleteIcon","DragIcon","ContentCopyIcon","MenuIcon","AlertIcon","AlertCircleIcon","InformationOutlineIcon","LightningBoltIcon","ARIA_LABEL_TEXT","HEADER_ACTIONS_CONTAINER_NAME","HEADER_MEDIUM_WIDTH","HEADER_SMALL_WIDTH","TOOLTIP_TEXT","HeaderIconButton","PanelLinks","noticeTypeToIcon","error","color","warning","fontSize","info","ConditionalBox","display","alignItems","flexGrow","justifyContent","PanelActions","editHandlers","readHandlers","viewQueriesHandler","extra","title","description","descriptionTooltipId","links","queryResults","pluginActions","itemActions","showIcons","descriptionAction","trim","length","id","enterDelay","aria-label","size","aria-describedby","aria-hidden","sx","theme","palette","text","secondary","undefined","linksAction","extraActions","queryStateIndicator","hasData","some","q","data","isFetching","queryErrors","filter","errorTexts","map","e","message","join","main","noticesIndicator","notices","flatMap","metadata","lastNotice","type","readActions","viewPanel","onClick","onViewPanelClick","isPanelViewed","viewQueryAction","queryView","openQueryView","editActions","editPanel","onEditPanelClick","duplicatePanel","onDuplicatePanelClick","transform","deletePanel","onDeletePanelClick","moveAction","movePanel","className","cursor","divider","OnHover","children","containerQueries","between","OverflowMenu","down","icon","direction","anchorPosition","setAnchorPosition","hasContent","Array","isArray","handleClick","event","currentTarget","getBoundingClientRect","handleClose","open","Boolean","showPanelActions","anchorReference","onClose","anchorOrigin","vertical","horizontal","padding"],"mappings":"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"}
1	+ {"version":3,"sources":["../../../src/components/Panel/PanelActions.tsx"],"sourcesContent":["// Copyright 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, ReactElement, ReactNode, useMemo, useState } from 'react';\nimport { InfoTooltip } from '@perses-dev/components';\nimport { QueryData } from '@perses-dev/plugin-system';\nimport DatabaseSearch from 'mdi-material-ui/DatabaseSearch';\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 AlertIcon from 'mdi-material-ui/Alert';\nimport AlertCircleIcon from 'mdi-material-ui/AlertCircle';\nimport InformationOutlineIcon from 'mdi-material-ui/InformationOutline';\nimport LightningBoltIcon from 'mdi-material-ui/LightningBolt';\nimport { Link, Notice } 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';\nimport { PanelOptions } from './Panel';\n\nconst noticeTypeToIcon: Record<Notice['type'], ReactNode> = {\n error: <AlertCircleIcon color=\"error\" />,\n warning: <AlertIcon fontSize=\"inherit\" color=\"warning\" />,\n info: <InformationOutlineIcon fontSize=\"inherit\" color=\"info\" />,\n};\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 viewQueriesHandler?: {\n onClick: () => void;\n };\n queryResults: QueryData[];\n pluginActions?: ReactNode[];\n itemActions?: ReactNode[];\n areItemActionsDisabled?: boolean;\n showIcons: PanelOptions['showIcons'];\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 viewQueriesHandler,\n extra,\n title,\n description,\n descriptionTooltipId,\n links,\n queryResults,\n pluginActions = [],\n itemActions = [],\n showIcons,\n}) => {\n const descriptionAction = useMemo((): ReactNode \| undefined => {\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\n const linksAction = links && links.length > 0 && <PanelLinks links={links} />;\n const extraActions = editHandlers === undefined && extra;\n\n const queryStateIndicator = useMemo((): ReactNode \| undefined => {\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\n if (isFetching && hasData) {\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) => e.message)\n .join('\\n');\n\n return (\n <InfoTooltip description={errorTexts}>\n <HeaderIconButton aria-label=\"panel errors\" size=\"small\">\n <AlertIcon\n fontSize=\"inherit\"\n sx={{\n color: (theme) => theme.palette.error.main,\n }}\n />\n </HeaderIconButton>\n </InfoTooltip>\n );\n }\n }, [queryResults]);\n\n const noticesIndicator = useMemo(() => {\n const notices = queryResults.flatMap((q) => {\n return q.data?.metadata?.notices ?? [];\n });\n\n if (notices.length > 0) {\n const lastNotice = notices[notices.length - 1]!;\n\n return (\n <InfoTooltip description={lastNotice.message}>\n <HeaderIconButton aria-label=\"panel notices\" size=\"small\">\n {noticeTypeToIcon[lastNotice.type]}\n </HeaderIconButton>\n </InfoTooltip>\n );\n }\n }, [queryResults]);\n\n const readActions = useMemo((): ReactNode \| undefined => {\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 viewQueryAction = useMemo(() => {\n if (!viewQueriesHandler?.onClick) return null;\n return (\n <InfoTooltip description={TOOLTIP_TEXT.queryView}>\n <HeaderIconButton\n aria-label={ARIA_LABEL_TEXT.openQueryView(title)}\n size=\"small\"\n onClick={viewQueriesHandler.onClick}\n >\n <DatabaseSearch fontSize=\"inherit\" />\n </HeaderIconButton>\n </InfoTooltip>\n );\n }, [viewQueriesHandler, title]);\n\n const editActions = useMemo((): ReactNode \| undefined => {\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((): ReactNode \| undefined => {\n if (editActions && !readHandlers?.isPanelViewed) {\n return (\n <Box sx={{ background: (theme) => theme.palette.background.default }}>\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 </Box>\n );\n }\n return undefined;\n }, [editActions, readHandlers, title]);\n\n const divider = <Box sx={{ flexGrow: 1 }}></Box>;\n\n // By default, the panel header shows certain icons only on hover if the panel is in non-editing, non-fullscreen mode\n const OnHover = ({ children }: PropsWithChildren): ReactNode =>\n showIcons === 'hover' ? <Box sx={{ display: 'var(--panel-hover, none)' }}>{children}</Box> : <>{children}</>;\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} {noticesIndicator} {extraActions} {viewQueryAction}\n {readActions} {pluginActions} {itemActions}\n {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 {noticesIndicator}\n <OnHover>\n {extraActions}\n {readActions}\n <OverflowMenu title={title}>\n {editActions} {viewQueryAction} {pluginActions} {itemActions}\n </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 {noticesIndicator}\n <OnHover>\n {extraActions}\n {viewQueryAction}\n {readActions} {editActions}\n {/ Show plugin actions inside a menu if it gets crowded */}\n {pluginActions.length <= 1 ? pluginActions : <OverflowMenu title={title}>{pluginActions}</OverflowMenu>}\n {itemActions.length <= 1 ? (\n itemActions\n ) : (\n <InfoTooltip description={`${itemActions.length} actions`}>\n <OverflowMenu icon={<LightningBoltIcon fontSize=\"inherit\" />} direction=\"column\" title={title}>\n {itemActions}\n </OverflowMenu>\n </InfoTooltip>\n )}\n {moveAction}\n </OnHover>\n </ConditionalBox>\n </>\n );\n};\n\nconst OverflowMenu: React.FC<\n PropsWithChildren<{ title?: string; icon?: ReactElement; direction?: 'row' \| 'column' }>\n> = ({ children, title, icon, direction = 'row' }) => {\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 null;\n }\n\n const handleClick = (event: React.MouseEvent<HTMLElement>): void => {\n setAnchorPosition(event.currentTarget.getBoundingClientRect());\n };\n\n const handleClose = (): void => {\n setAnchorPosition(undefined);\n };\n\n const open = Boolean(anchorPosition);\n const id = open ? 'actions-menu' : undefined;\n\n return (\n <Box sx={{ background: (theme) => theme.palette.background.default }}>\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 {icon ?? <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={direction} alignItems=\"center\" sx={{ padding: 1 }} onClick={handleClose}>\n {children}\n </Stack>\n </Popover>\n </Box>\n );\n};\n"],"names":["Stack","Box","Popover","CircularProgress","styled","isValidElement","useMemo","useState","InfoTooltip","DatabaseSearch","ArrowCollapseIcon","ArrowExpandIcon","PencilIcon","DeleteIcon","DragIcon","ContentCopyIcon","MenuIcon","AlertIcon","AlertCircleIcon","InformationOutlineIcon","LightningBoltIcon","ARIA_LABEL_TEXT","HEADER_ACTIONS_CONTAINER_NAME","HEADER_MEDIUM_WIDTH","HEADER_SMALL_WIDTH","TOOLTIP_TEXT","HeaderIconButton","PanelLinks","noticeTypeToIcon","error","color","warning","fontSize","info","ConditionalBox","display","alignItems","flexGrow","justifyContent","PanelActions","editHandlers","readHandlers","viewQueriesHandler","extra","title","description","descriptionTooltipId","links","queryResults","pluginActions","itemActions","showIcons","descriptionAction","trim","length","id","enterDelay","aria-label","size","aria-describedby","aria-hidden","sx","theme","palette","text","secondary","undefined","linksAction","extraActions","queryStateIndicator","hasData","some","q","data","isFetching","queryErrors","filter","errorTexts","map","e","message","join","main","noticesIndicator","notices","flatMap","metadata","lastNotice","type","readActions","viewPanel","onClick","onViewPanelClick","isPanelViewed","viewQueryAction","queryView","openQueryView","editActions","editPanel","onEditPanelClick","duplicatePanel","onDuplicatePanelClick","transform","deletePanel","onDeletePanelClick","moveAction","background","default","movePanel","className","cursor","divider","OnHover","children","containerQueries","between","OverflowMenu","down","icon","direction","anchorPosition","setAnchorPosition","hasContent","Array","isArray","handleClick","event","currentTarget","getBoundingClientRect","handleClose","open","Boolean","showPanelActions","anchorReference","onClose","anchorOrigin","vertical","horizontal","padding"],"mappings":"AAAA,+BAA+B;AAC/B,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,GAAG,EAAEC,OAAO,EAAEC,gBAAgB,EAAEC,MAAM,QAAyB,gBAAgB;AAC/F,SAASC,cAAc,EAA8CC,OAAO,EAAEC,QAAQ,QAAQ,QAAQ;AACtG,SAASC,WAAW,QAAQ,yBAAyB;AAErD,OAAOC,oBAAoB,iCAAiC;AAC5D,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,OAAOC,eAAe,wBAAwB;AAC9C,OAAOC,qBAAqB,8BAA8B;AAC1D,OAAOC,4BAA4B,qCAAqC;AACxE,OAAOC,uBAAuB,gCAAgC;AAE9D,SACEC,eAAe,EACfC,6BAA6B,EAC7BC,mBAAmB,EACnBC,kBAAkB,EAClBC,YAAY,QACP,kBAAkB;AACzB,SAASC,gBAAgB,QAAQ,qBAAqB;AACtD,SAASC,UAAU,QAAQ,eAAe;AAG1C,MAAMC,mBAAsD;IAC1DC,qBAAO,KAACX;QAAgBY,OAAM;;IAC9BC,uBAAS,KAACd;QAAUe,UAAS;QAAUF,OAAM;;IAC7CG,oBAAM,KAACd;QAAuBa,UAAS;QAAUF,OAAM;;AACzD;AA2BA,MAAMI,iBAAiB9B,OAAOH,KAAK;IACjCkC,SAAS;IACTC,YAAY;IACZC,UAAU;IACVC,gBAAgB;AAClB;AAEA,OAAO,MAAMC,eAA4C,CAAC,EACxDC,YAAY,EACZC,YAAY,EACZC,kBAAkB,EAClBC,KAAK,EACLC,KAAK,EACLC,WAAW,EACXC,oBAAoB,EACpBC,KAAK,EACLC,YAAY,EACZC,gBAAgB,EAAE,EAClBC,cAAc,EAAE,EAChBC,SAAS,EACV;IACC,MAAMC,oBAAoB9C,QAAQ;QAChC,IAAIuC,eAAeA,YAAYQ,IAAI,GAAGC,MAAM,GAAG,GAAG;YAChD,qBACE,KAAC9C;gBAAY+C,IAAIT;gBAAsBD,aAAaA;gBAAaW,YAAY;0BAC3E,cAAA,KAAC9B;oBAAiB+B,cAAW;oBAAoBC,MAAK;8BACpD,cAAA,KAACvC;wBACCwC,oBAAiB;wBACjBC,eAAa;wBACb5B,UAAS;wBACT6B,IAAI;4BAAE/B,OAAO,CAACgC,QAAUA,MAAMC,OAAO,CAACC,IAAI,CAACC,SAAS;wBAAC;;;;QAK/D;QACA,OAAOC;IACT,GAAG;QAACpB;QAAsBD;KAAY;IAEtC,MAAMsB,cAAcpB,SAASA,MAAMO,MAAM,GAAG,mBAAK,KAAC3B;QAAWoB,OAAOA;;IACpE,MAAMqB,eAAe5B,iBAAiB0B,aAAavB;IAEnD,MAAM0B,sBAAsB/D,QAAQ;QAClC,MAAMgE,UAAUtB,aAAauB,IAAI,CAAC,CAACC,IAAMA,EAAEC,IAAI;QAC/C,MAAMC,aAAa1B,aAAauB,IAAI,CAAC,CAACC,IAAMA,EAAEE,UAAU;QACxD,MAAMC,cAAc3B,aAAa4B,MAAM,CAAC,CAACJ,IAAMA,EAAE3C,KAAK;QAEtD,IAAI6C,cAAcJ,SAAS;YACzB,qBAAO,KAACnE;gBAAiBsD,cAAW;gBAAUC,MAAK;;QACrD,OAAO,IAAIiB,YAAYrB,MAAM,GAAG,GAAG;YACjC,MAAMuB,aAAaF,YAChBG,GAAG,CAAC,CAACN,IAAMA,EAAE3C,KAAK,EAClBiD,GAAG,CAAC,CAACC,IAAMA,EAAEC,OAAO,EACpBC,IAAI,CAAC;YAER,qBACE,KAACzE;gBAAYqC,aAAagC;0BACxB,cAAA,KAACnD;oBAAiB+B,cAAW;oBAAeC,MAAK;8BAC/C,cAAA,KAACzC;wBACCe,UAAS;wBACT6B,IAAI;4BACF/B,OAAO,CAACgC,QAAUA,MAAMC,OAAO,CAAClC,KAAK,CAACqD,IAAI;wBAC5C;;;;QAKV;IACF,GAAG;QAAClC;KAAa;IAEjB,MAAMmC,mBAAmB7E,QAAQ;QAC/B,MAAM8E,UAAUpC,aAAaqC,OAAO,CAAC,CAACb;YACpC,OAAOA,EAAEC,IAAI,EAAEa,UAAUF,WAAW,EAAE;QACxC;QAEA,IAAIA,QAAQ9B,MAAM,GAAG,GAAG;YACtB,MAAMiC,aAAaH,OAAO,CAACA,QAAQ9B,MAAM,GAAG,EAAE;YAE9C,qBACE,KAAC9C;gBAAYqC,aAAa0C,WAAWP,OAAO;0BAC1C,cAAA,KAACtD;oBAAiB+B,cAAW;oBAAgBC,MAAK;8BAC/C9B,gBAAgB,CAAC2D,WAAWC,IAAI,CAAC;;;QAI1C;IACF,GAAG;QAACxC;KAAa;IAEjB,MAAMyC,cAAcnF,QAAQ;QAC1B,IAAImC,iBAAiByB,WAAW;YAC9B,qBACE,KAAC1D;gBAAYqC,aAAapB,aAAaiE,SAAS;0BAC9C,cAAA,KAAChE;oBACC+B,cAAYpC,gBAAgBqE,SAAS,CAAC9C;oBACtCc,MAAK;oBACLiC,SAASlD,aAAamD,gBAAgB;8BAErCnD,aAAaoD,aAAa,iBACzB,KAACnF;wBAAkBsB,UAAS;uCAE5B,KAACrB;wBAAgBqB,UAAS;;;;QAKpC;QACA,OAAOkC;IACT,GAAG;QAACzB;QAAcG;KAAM;IAExB,MAAMkD,kBAAkBxF,QAAQ;QAC9B,IAAI,CAACoC,oBAAoBiD,SAAS,OAAO;QACzC,qBACE,KAACnF;YAAYqC,aAAapB,aAAasE,SAAS;sBAC9C,cAAA,KAACrE;gBACC+B,cAAYpC,gBAAgB2E,aAAa,CAACpD;gBAC1Cc,MAAK;gBACLiC,SAASjD,mBAAmBiD,OAAO;0BAEnC,cAAA,KAAClF;oBAAeuB,UAAS;;;;IAIjC,GAAG;QAACU;QAAoBE;KAAM;IAE9B,MAAMqD,cAAc3F,QAAQ;QAC1B,IAAIkC,iBAAiB0B,WAAW;YAC9B,gEAAgE;YAChE,qBACE;;kCACE,KAAC1D;wBAAYqC,aAAapB,aAAayE,SAAS;kCAC9C,cAAA,KAACxE;4BACC+B,cAAYpC,gBAAgB6E,SAAS,CAACtD;4BACtCc,MAAK;4BACLiC,SAASnD,aAAa2D,gBAAgB;sCAEtC,cAAA,KAACvF;gCAAWoB,UAAS;;;;kCAGzB,KAACxB;wBAAYqC,aAAapB,aAAa2E,cAAc;kCACnD,cAAA,KAAC1E;4BACC+B,cAAYpC,gBAAgB+E,cAAc,CAACxD;4BAC3Cc,MAAK;4BACLiC,SAASnD,aAAa6D,qBAAqB;sCAE3C,cAAA,KAACtF;gCACCiB,UAAS;gCACT6B,IAAI;oCACF,wDAAwD;oCACxD,sCAAsC;oCACtCyC,WAAW;gCACb;;;;kCAIN,KAAC9F;wBAAYqC,aAAapB,aAAa8E,WAAW;kCAChD,cAAA,KAAC7E;4BACC+B,cAAYpC,gBAAgBkF,WAAW,CAAC3D;4BACxCc,MAAK;4BACLiC,SAASnD,aAAagE,kBAAkB;sCAExC,cAAA,KAAC3F;gCAAWmB,UAAS;;;;;;QAK/B;QACA,OAAOkC;IACT,GAAG;QAAC1B;QAAcI;KAAM;IAExB,MAAM6D,aAAanG,QAAQ;QACzB,IAAI2F,eAAe,CAACxD,cAAcoD,eAAe;YAC/C,qBACE,KAAC5F;gBAAI4D,IAAI;oBAAE6C,YAAY,CAAC5C,QAAUA,MAAMC,OAAO,CAAC2C,UAAU,CAACC,OAAO;gBAAC;0BACjE,cAAA,KAACnG;oBAAYqC,aAAapB,aAAamF,SAAS;8BAC9C,cAAA,KAAClF;wBAAiB+B,cAAYpC,gBAAgBuF,SAAS,CAAChE;wBAAQc,MAAK;kCACnE,cAAA,KAAC5C;4BAAS+F,WAAU;4BAAchD,IAAI;gCAAEiD,QAAQ;4BAAO;4BAAG9E,UAAS;;;;;QAK7E;QACA,OAAOkC;IACT,GAAG;QAAC+B;QAAaxD;QAAcG;KAAM;IAErC,MAAMmE,wBAAU,KAAC9G;QAAI4D,IAAI;YAAExB,UAAU;QAAE;;IAEvC,qHAAqH;IACrH,MAAM2E,UAAU,CAAC,EAAEC,QAAQ,EAAqB,GAC9C9D,cAAc,wBAAU,KAAClD;YAAI4D,IAAI;gBAAE1B,SAAS;YAA2B;sBAAI8E;2BAAkB;sBAAGA;;IAElG,qBACE;;0BAEE,MAAC/E;gBACC2B,IAAI,CAACC,QAAW,CAAA;wBACd,CAACA,MAAMoD,gBAAgB,CAAC5F,+BAA+B6F,OAAO,CAAC,GAAG3F,oBAAoB,EAAE;4BAAEW,SAAS;wBAAO;oBAC5G,CAAA;;oBAEC4E;kCACD,MAACC;;0CACC,MAACI;gCAAaxE,OAAOA;;oCAClBQ;oCAAkB;oCAAEe;oCAAY;oCAAEE;oCAAoB;oCAAEc;oCAAiB;oCAAEf;oCAAa;oCAAE0B;oCAC1FL;oCAAY;oCAAExC;oCAAc;oCAAEC;oCAC9B+C;;;4BAEFQ;;;;;0BAKL,MAACvE;gBACC2B,IAAI,CAACC,QAAW,CAAA;wBACd,CAACA,MAAMoD,gBAAgB,CAAC5F,+BAA+B6F,OAAO,CAAC3F,oBAAoBD,qBAAqB,EAAE;4BACxGY,SAAS;wBACX;oBACF,CAAA;;kCAEA,MAAC6E;;4BACE5D;4BAAkB;4BAAEe;;;oBAEtB4C;oBAAQ;oBAAE1C;oBACVc;kCACD,MAAC6B;;4BACE5C;4BACAqB;0CACD,MAAC2B;gCAAaxE,OAAOA;;oCAClBqD;oCAAY;oCAAEH;oCAAgB;oCAAE7C;oCAAc;oCAAEC;;;4BAElDuD;;;;;0BAKL,MAACvE;gBACC2B,IAAI,CAACC,QAAW,CAAA;wBACd,2GAA2G;wBAC3G3B,SAAS;wBACT,CAAC2B,MAAMoD,gBAAgB,CAAC5F,+BAA+B+F,IAAI,CAAC9F,qBAAqB,EAAE;4BAAEY,SAAS;wBAAO;oBACvG,CAAA;;kCAEA,MAAC6E;;4BACE5D;4BAAkB;4BAAEe;;;oBAEtB4C;oBAAQ;oBAAE1C;oBACVc;kCACD,MAAC6B;;4BACE5C;4BACA0B;4BACAL;4BAAY;4BAAEQ;4BAEdhD,cAAcK,MAAM,IAAI,IAAIL,8BAAgB,KAACmE;gCAAaxE,OAAOA;0CAAQK;;4BACzEC,YAAYI,MAAM,IAAI,IACrBJ,4BAEA,KAAC1C;gCAAYqC,aAAa,GAAGK,YAAYI,MAAM,CAAC,QAAQ,CAAC;0CACvD,cAAA,KAAC8D;oCAAaE,oBAAM,KAAClG;wCAAkBY,UAAS;;oCAAcuF,WAAU;oCAAS3E,OAAOA;8CACrFM;;;4BAINuD;;;;;;;AAKX,EAAE;AAEF,MAAMW,eAEF,CAAC,EAAEH,QAAQ,EAAErE,KAAK,EAAE0E,IAAI,EAAEC,YAAY,KAAK,EAAE;IAC/C,MAAM,CAACC,gBAAgBC,kBAAkB,GAAGlH;IAE5C,0FAA0F;IAC1F,MAAMmH,2BAAarH,eAAe4G,aAAcU,MAAMC,OAAO,CAACX,aAAaA,SAAS1C,IAAI,CAAClE;IACzF,IAAI,CAACqH,YAAY;QACf,OAAO;IACT;IAEA,MAAMG,cAAc,CAACC;QACnBL,kBAAkBK,MAAMC,aAAa,CAACC,qBAAqB;IAC7D;IAEA,MAAMC,cAAc;QAClBR,kBAAkBvD;IACpB;IAEA,MAAMgE,OAAOC,QAAQX;IACrB,MAAMjE,KAAK2E,OAAO,iBAAiBhE;IAEnC,qBACE,MAACjE;QAAI4D,IAAI;YAAE6C,YAAY,CAAC5C,QAAUA,MAAMC,OAAO,CAAC2C,UAAU,CAACC,OAAO;QAAC;;0BACjE,KAACjF;gBACCmF,WAAU;gBACVlD,oBAAkBJ;gBAClBoC,SAASkC;gBACTpE,cAAYpC,gBAAgB+G,gBAAgB,CAACxF;gBAC7Cc,MAAK;0BAEJ4D,sBAAQ,KAACtG;oBAASgB,UAAS;;;0BAE9B,KAAC9B;gBACCqD,IAAIA;gBACJ2E,MAAMA;gBACNG,iBAAgB;gBAChBb,gBAAgBA;gBAChBc,SAASL;gBACTM,cAAc;oBACZC,UAAU;oBACVC,YAAY;gBACd;0BAEA,cAAA,KAACzI;oBAAMuH,WAAWA;oBAAWnF,YAAW;oBAASyB,IAAI;wBAAE6E,SAAS;oBAAE;oBAAG/C,SAASsC;8BAC3EhB;;;;;AAKX"}

package/dist/components/PanelDrawer/PanelQueriesSharedControls.d.ts.map CHANGED Viewed

	@@ -1 +1 @@
1	- {"version":3,"file":"PanelQueriesSharedControls.d.ts","sourceRoot":"","sources":["../../../src/components/PanelDrawer/PanelQueriesSharedControls.tsx"],"names":[],"mappings":"AAiBA,OAAO,EAAE,UAAU,EAAE,eAAe,EAAE,iBAAiB,EAAE,eAAe,EAAE,WAAW,EAAE,MAAM,kBAAkB,CAAC;AAChH,OAAO,EAAE,OAAO,EAAE,MAAM,iBAAiB,CAAC;AAC1C,OAAO,EAAE,YAAY,EAA8C,MAAM,OAAO,CAAC;AAEjF,MAAM,WAAW,+BAA+B;IAC9C,OAAO,EAAE,OAAO,CAAC,iBAAiB,CAAC,CAAC;IACpC,MAAM,EAAE,UAAU,CAAC,WAAW,CAAC,CAAC;IAChC,eAAe,EAAE,eAAe,CAAC;IACjC,eAAe,EAAE,CAAC,OAAO,EAAE,eAAe,EAAE,KAAK,IAAI,CAAC;IACtD,kBAAkB,EAAE,CAAC,IAAI,EAAE,WAAW,KAAK,IAAI,CAAC;IAChD,YAAY,EAAE,CAAC,kBAAkB,EAAE,MAAM,KAAK,IAAI,CAAC;CACpD;AAID,wBAAgB,0BAA0B,CAAC,EACzC,MAAM,EACN,OAAO,EACP,eAAe,EACf,eAAe,EACf,kBAAkB,EAClB,YAAY,GACb,EAAE,+BAA+B,GAAG,YAAY,~~CA2DhD~~"}
1	+ {"version":3,"file":"PanelQueriesSharedControls.d.ts","sourceRoot":"","sources":["../../../src/components/PanelDrawer/PanelQueriesSharedControls.tsx"],"names":[],"mappings":"AAiBA,OAAO,EAAE,UAAU,EAAE,eAAe,EAAE,iBAAiB,EAAE,eAAe,EAAE,WAAW,EAAE,MAAM,kBAAkB,CAAC;AAChH,OAAO,EAAE,OAAO,EAAE,MAAM,iBAAiB,CAAC;AAC1C,OAAO,EAAE,YAAY,EAA8C,MAAM,OAAO,CAAC;AAEjF,MAAM,WAAW,+BAA+B;IAC9C,OAAO,EAAE,OAAO,CAAC,iBAAiB,CAAC,CAAC;IACpC,MAAM,EAAE,UAAU,CAAC,WAAW,CAAC,CAAC;IAChC,eAAe,EAAE,eAAe,CAAC;IACjC,eAAe,EAAE,CAAC,OAAO,EAAE,eAAe,EAAE,KAAK,IAAI,CAAC;IACtD,kBAAkB,EAAE,CAAC,IAAI,EAAE,WAAW,KAAK,IAAI,CAAC;IAChD,YAAY,EAAE,CAAC,kBAAkB,EAAE,MAAM,KAAK,IAAI,CAAC;CACpD;AAID,wBAAgB,0BAA0B,CAAC,EACzC,MAAM,EACN,OAAO,EACP,eAAe,EACf,eAAe,EACf,kBAAkB,EAClB,YAAY,GACb,EAAE,+BAA+B,GAAG,YAAY,CA8EhD"}

package/dist/components/PanelDrawer/PanelQueriesSharedControls.js CHANGED Viewed

@@ -32,6 +32,21 @@ export function PanelQueriesSharedControls({ plugin, control, panelDefinition, o
                 spec: query.spec.plugin.spec
             };
         }) ?? []);
+    const handleOnQueriesChange = useCallback((queries)=>{
+        onQueriesChange(queries);
+        // If the number of queries has changed, force preview definition update to remove results of deleted queries.
+        if (queries.length !== previewDefinition.length) {
+            setPreviewDefinition(queries.map((query)=>{
+                return {
+                    kind: query.spec.plugin.kind,
+                    spec: query.spec.plugin.spec
+                };
+            }));
+        }
+    }, [
+        onQueriesChange,
+        previewDefinition.length
+    ]);
     const handleRunQuery = useCallback((index, newDef)=>{
         setPreviewDefinition((prev)=>{
             const newDefinitions = [
@@ -77,7 +92,7 @@ export function PanelQueriesSharedControls({ plugin, control, panelDefinition, o
                         control: control,
                         panelDefinition: panelDefinition,
                         onJSONChange: onJSONChange,
-                        onQueriesChange: onQueriesChange,
+                        onQueriesChange: handleOnQueriesChange,
                         onQueryRun: handleRunQuery,
                         onPluginSpecChange: onPluginSpecChange
                     })

package/dist/components/PanelDrawer/PanelQueriesSharedControls.js.map CHANGED Viewed

	@@ -1 +1 @@
1	- {"version":3,"sources":["../../../src/components/PanelDrawer/PanelQueriesSharedControls.tsx"],"sourcesContent":["// Copyright 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 { Grid, Typography } from '@mui/material';\nimport { ErrorAlert, ErrorBoundary } from '@perses-dev/components';\nimport { PanelEditorContext, PanelPreview } from '@perses-dev/dashboards';\nimport { DataQueriesProvider, PanelSpecEditor, usePlugin, useSuggestedStepMs } from '@perses-dev/plugin-system';\nimport { Definition, PanelDefinition, PanelEditorValues, QueryDefinition, UnknownSpec } from '@perses-dev/core';\nimport { Control } from 'react-hook-form';\nimport { ReactElement, useCallback, useContext, useMemo, useState } from 'react';\n\nexport interface PanelQueriesSharedControlsProps {\n control: Control<PanelEditorValues>;\n plugin: Definition<UnknownSpec>;\n panelDefinition: PanelDefinition;\n onQueriesChange: (queries: QueryDefinition[]) => void;\n onPluginSpecChange: (spec: UnknownSpec) => void;\n onJSONChange: (panelDefinitionStr: string) => void;\n}\n\n// Component of PanelEditor, it will share queries results to its children with DataQueriesProvider.\n// TODO: consider merging PanelEditorProvider, QueryCountProvider and DataQueriesProvider into a single provider to avoid multiple nested providers.\nexport function PanelQueriesSharedControls({\n plugin,\n control,\n panelDefinition,\n onQueriesChange,\n onPluginSpecChange,\n onJSONChange,\n}: PanelQueriesSharedControlsProps): ReactElement {\n const { data: pluginPreview } = usePlugin('Panel', plugin.kind);\n const panelEditorContext = useContext(PanelEditorContext);\n\n const suggestedStepMs = useSuggestedStepMs(panelEditorContext?.preview.previewPanelWidth);\n\n const pluginQueryOptions = useMemo(\n () =>\n typeof pluginPreview?.queryOptions === 'function'\n ? pluginPreview?.queryOptions(panelDefinition.spec.plugin.spec)\n : pluginPreview?.queryOptions,\n [panelDefinition.spec.plugin.spec, pluginPreview]\n );\n\n const [previewDefinition, setPreviewDefinition] = useState(\n () =>\n panelDefinition.spec.queries?.map((query) => {\n return {\n kind: query.spec.plugin.kind,\n spec: query.spec.plugin.spec,\n };\n }) ?? []\n );\n\n const handleRunQuery = useCallback((index: number, newDef: QueryDefinition) => {\n setPreviewDefinition((prev) => {\n const newDefinitions = [...prev];\n newDefinitions[index] = {\n kind: newDef.spec.plugin.kind,\n spec: newDef.spec.plugin.spec,\n };\n return newDefinitions;\n });\n }, []);\n\n return (\n <DataQueriesProvider definitions={previewDefinition} options={{ suggestedStepMs, ...pluginQueryOptions }}>\n <Grid item xs={12}>\n <Typography variant=\"h4\" marginBottom={1}>\n Preview\n </Typography>\n <ErrorBoundary FallbackComponent={ErrorAlert}>\n <PanelPreview panelDefinition={panelDefinition} />\n </ErrorBoundary>\n </Grid>\n <Grid item xs={12}>\n <ErrorBoundary FallbackComponent={ErrorAlert}>\n <PanelSpecEditor\n control={control}\n panelDefinition={panelDefinition}\n onJSONChange={onJSONChange}\n onQueriesChange={~~onQueriesChange~~}\n onQueryRun={handleRunQuery}\n onPluginSpecChange={onPluginSpecChange}\n />\n </ErrorBoundary>\n </Grid>\n </DataQueriesProvider>\n );\n}\n"],"names":["Grid","Typography","ErrorAlert","ErrorBoundary","PanelEditorContext","PanelPreview","DataQueriesProvider","PanelSpecEditor","usePlugin","useSuggestedStepMs","useCallback","useContext","useMemo","useState","PanelQueriesSharedControls","plugin","control","panelDefinition","onQueriesChange","onPluginSpecChange","onJSONChange","data","pluginPreview","kind","panelEditorContext","suggestedStepMs","preview","previewPanelWidth","pluginQueryOptions","queryOptions","spec","previewDefinition","setPreviewDefinition","queries","map","query","handleRunQuery","index","newDef","prev","newDefinitions","definitions","options","item","xs","variant","marginBottom","FallbackComponent","onQueryRun"],"mappings":"AAAA,+BAA+B;AAC/B,kEAAkE;AAClE,mEAAmE;AACnE,0CAA0C;AAC1C,EAAE;AACF,6CAA6C;AAC7C,EAAE;AACF,sEAAsE;AACtE,oEAAoE;AACpE,2EAA2E;AAC3E,sEAAsE;AACtE,iCAAiC;;AAEjC,SAASA,IAAI,EAAEC,UAAU,QAAQ,gBAAgB;AACjD,SAASC,UAAU,EAAEC,aAAa,QAAQ,yBAAyB;AACnE,SAASC,kBAAkB,EAAEC,YAAY,QAAQ,yBAAyB;AAC1E,SAASC,mBAAmB,EAAEC,eAAe,EAAEC,SAAS,EAAEC,kBAAkB,QAAQ,4BAA4B;AAGhH,SAAuBC,WAAW,EAAEC,UAAU,EAAEC,OAAO,EAAEC,QAAQ,QAAQ,QAAQ;AAWjF,oGAAoG;AACpG,oJAAoJ;AACpJ,OAAO,SAASC,2BAA2B,EACzCC,MAAM,EACNC,OAAO,EACPC,eAAe,EACfC,eAAe,EACfC,kBAAkB,EAClBC,YAAY,EACoB;IAChC,MAAM,EAAEC,MAAMC,aAAa,EAAE,GAAGd,UAAU,SAASO,OAAOQ,IAAI;IAC9D,MAAMC,qBAAqBb,WAAWP;IAEtC,MAAMqB,kBAAkBhB,mBAAmBe,oBAAoBE,QAAQC;IAEvE,MAAMC,qBAAqBhB,QACzB,IACE,OAAOU,eAAeO,iBAAiB,aACnCP,eAAeO,aAAaZ,gBAAgBa,IAAI,CAACf,MAAM,CAACe,IAAI,IAC5DR,eAAeO,cACrB;QAACZ,gBAAgBa,IAAI,CAACf,MAAM,CAACe,IAAI;QAAER;KAAc;IAGnD,MAAM,CAACS,mBAAmBC,qBAAqB,GAAGnB,SAChD,IACEI,gBAAgBa,IAAI,CAACG,OAAO,EAAEC,IAAI,CAACC;YACjC,OAAO;gBACLZ,MAAMY,MAAML,IAAI,CAACf,MAAM,CAACQ,IAAI;gBAC5BO,MAAMK,MAAML,IAAI,CAACf,MAAM,CAACe,IAAI;YAC9B;QACF,MAAM,EAAE;IAGZ,MAAMM,~~iBAAiB1B~~,YAAY,~~CAAC2B~~,OAAeC;~~QACjDN~~,qBAAqB,~~CAACO~~;YACpB,MAAMC,iBAAiB;mBAAID;aAAK;YAChCC,cAAc,CAACH,MAAM,GAAG;~~gBACtBd~~,~~MAAMe~~,~~OAAOR~~,IAAI,CAACf,MAAM,CAACQ,IAAI;gBAC7BO,~~MAAMQ~~,~~OAAOR~~,IAAI,CAACf,MAAM,CAACe,IAAI;YAC/B;YACA,~~OAAOU~~;QACT;IACF,GAAG,EAAE;IAEL,qBACE,~~MAAClC~~;~~QAAoBmC~~,~~aAAaV~~;~~QAAmBW~~,SAAS;~~YAAEjB~~;YAAiB,GAAGG,kBAAkB;QAAC;;0BACrG,MAAC5B;~~gBAAK2C~~,IAAI;gBAACC,IAAI;;kCACb,~~KAAC3C~~;~~wBAAW4C~~,SAAQ;wBAAKC,cAAc;kCAAG;;kCAG1C,~~KAAC3C~~;~~wBAAc4C~~,~~mBAAmB7C~~;kCAChC,cAAA,KAACG;4BAAaY,iBAAiBA;;;;;0BAGnC,KAACjB;~~gBAAK2C~~,IAAI;gBAACC,IAAI;0BACb,cAAA,~~KAACzC~~;~~oBAAc4C~~,~~mBAAmB7C~~;8BAChC,cAAA,KAACK;wBACCS,SAASA;wBACTC,iBAAiBA;wBACjBG,cAAcA;wBACdF,~~iBAAiBA~~;~~wBACjB8B~~,YAAYZ;~~wBACZjB~~,oBAAoBA;;;;;;AAMhC"}
1	+ {"version":3,"sources":["../../../src/components/PanelDrawer/PanelQueriesSharedControls.tsx"],"sourcesContent":["// Copyright 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 { Grid, Typography } from '@mui/material';\nimport { ErrorAlert, ErrorBoundary } from '@perses-dev/components';\nimport { PanelEditorContext, PanelPreview } from '@perses-dev/dashboards';\nimport { DataQueriesProvider, PanelSpecEditor, usePlugin, useSuggestedStepMs } from '@perses-dev/plugin-system';\nimport { Definition, PanelDefinition, PanelEditorValues, QueryDefinition, UnknownSpec } from '@perses-dev/core';\nimport { Control } from 'react-hook-form';\nimport { ReactElement, useCallback, useContext, useMemo, useState } from 'react';\n\nexport interface PanelQueriesSharedControlsProps {\n control: Control<PanelEditorValues>;\n plugin: Definition<UnknownSpec>;\n panelDefinition: PanelDefinition;\n onQueriesChange: (queries: QueryDefinition[]) => void;\n onPluginSpecChange: (spec: UnknownSpec) => void;\n onJSONChange: (panelDefinitionStr: string) => void;\n}\n\n// Component of PanelEditor, it will share queries results to its children with DataQueriesProvider.\n// TODO: consider merging PanelEditorProvider, QueryCountProvider and DataQueriesProvider into a single provider to avoid multiple nested providers.\nexport function PanelQueriesSharedControls({\n plugin,\n control,\n panelDefinition,\n onQueriesChange,\n onPluginSpecChange,\n onJSONChange,\n}: PanelQueriesSharedControlsProps): ReactElement {\n const { data: pluginPreview } = usePlugin('Panel', plugin.kind);\n const panelEditorContext = useContext(PanelEditorContext);\n\n const suggestedStepMs = useSuggestedStepMs(panelEditorContext?.preview.previewPanelWidth);\n\n const pluginQueryOptions = useMemo(\n () =>\n typeof pluginPreview?.queryOptions === 'function'\n ? pluginPreview?.queryOptions(panelDefinition.spec.plugin.spec)\n : pluginPreview?.queryOptions,\n [panelDefinition.spec.plugin.spec, pluginPreview]\n );\n\n const [previewDefinition, setPreviewDefinition] = useState(\n () =>\n panelDefinition.spec.queries?.map((query) => {\n return {\n kind: query.spec.plugin.kind,\n spec: query.spec.plugin.spec,\n };\n }) ?? []\n );\n\n const handleOnQueriesChange = useCallback(\n (queries: QueryDefinition[]) => {\n onQueriesChange(queries);\n\n // If the number of queries has changed, force preview definition update to remove results of deleted queries.\n if (queries.length !== previewDefinition.length) {\n setPreviewDefinition(\n queries.map((query) => {\n return {\n kind: query.spec.plugin.kind,\n spec: query.spec.plugin.spec,\n };\n })\n );\n }\n },\n [onQueriesChange, previewDefinition.length]\n );\n\n const handleRunQuery = useCallback((index: number, newDef: QueryDefinition) => {\n setPreviewDefinition((prev) => {\n const newDefinitions = [...prev];\n newDefinitions[index] = {\n kind: newDef.spec.plugin.kind,\n spec: newDef.spec.plugin.spec,\n };\n return newDefinitions;\n });\n }, []);\n\n return (\n <DataQueriesProvider definitions={previewDefinition} options={{ suggestedStepMs, ...pluginQueryOptions }}>\n <Grid item xs={12}>\n <Typography variant=\"h4\" marginBottom={1}>\n Preview\n </Typography>\n <ErrorBoundary FallbackComponent={ErrorAlert}>\n <PanelPreview panelDefinition={panelDefinition} />\n </ErrorBoundary>\n </Grid>\n <Grid item xs={12}>\n <ErrorBoundary FallbackComponent={ErrorAlert}>\n <PanelSpecEditor\n control={control}\n panelDefinition={panelDefinition}\n onJSONChange={onJSONChange}\n onQueriesChange={handleOnQueriesChange}\n onQueryRun={handleRunQuery}\n onPluginSpecChange={onPluginSpecChange}\n />\n </ErrorBoundary>\n </Grid>\n </DataQueriesProvider>\n );\n}\n"],"names":["Grid","Typography","ErrorAlert","ErrorBoundary","PanelEditorContext","PanelPreview","DataQueriesProvider","PanelSpecEditor","usePlugin","useSuggestedStepMs","useCallback","useContext","useMemo","useState","PanelQueriesSharedControls","plugin","control","panelDefinition","onQueriesChange","onPluginSpecChange","onJSONChange","data","pluginPreview","kind","panelEditorContext","suggestedStepMs","preview","previewPanelWidth","pluginQueryOptions","queryOptions","spec","previewDefinition","setPreviewDefinition","queries","map","query","handleOnQueriesChange","length","handleRunQuery","index","newDef","prev","newDefinitions","definitions","options","item","xs","variant","marginBottom","FallbackComponent","onQueryRun"],"mappings":"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"}

package/package.json CHANGED Viewed

@@ -1,6 +1,6 @@
 {
   "name": "@perses-dev/dashboards",
-  "version": "0.53.0-rc.3",
+  "version": "0.53.1",
   "description": "The dashboards feature in Perses",
   "license": "Apache-2.0",
   "homepage": "https://github.com/perses/perses/blob/main/README.md",
@@ -29,9 +29,9 @@
     "lint:fix": "eslint --fix src --ext .ts,.tsx"
   },
   "dependencies": {
-    "@perses-dev/components": "0.53.0-rc.3",
-    "@perses-dev/core": "0.53.0-rc.1",
-    "@perses-dev/plugin-system": "0.53.0-rc.3",
+    "@perses-dev/components": "0.53.1",
+    "@perses-dev/core": "0.53.0",
+    "@perses-dev/plugin-system": "0.53.1",
     "@types/react-grid-layout": "^1.3.2",
     "date-fns": "^4.1.0",
     "immer": "^10.1.1",