@perses-dev/dashboards 0.52.0-beta.4 → 0.52.0-beta.5

package/dist/cjs/components/GridLayout/GridItemContent.js

@@ -24,9 +24,51 @@ const _jsxruntime = require("react/jsx-runtime");
 const _material = require("@mui/material");
 const _reactintersectionobserver = require("react-intersection-observer");
 const _pluginsystem = require("@perses-dev/plugin-system");
+const _react = /*#__PURE__*/ _interop_require_wildcard(require("react"));
 const _context = require("../../context");
 const _Panel = require("../Panel");
 const _panelgroupslice = require("../../context/DashboardProvider/panel-group-slice");
+function _getRequireWildcardCache(nodeInterop) {
+    if (typeof WeakMap !== "function") return null;
+    var cacheBabelInterop = new WeakMap();
+    var cacheNodeInterop = new WeakMap();
+    return (_getRequireWildcardCache = function(nodeInterop) {
+        return nodeInterop ? cacheNodeInterop : cacheBabelInterop;
+    })(nodeInterop);
+}
+function _interop_require_wildcard(obj, nodeInterop) {
+    if (!nodeInterop && obj && obj.__esModule) {
+        return obj;
+    }
+    if (obj === null || typeof obj !== "object" && typeof obj !== "function") {
+        return {
+            default: obj
+        };
+    }
+    var cache = _getRequireWildcardCache(nodeInterop);
+    if (cache && cache.has(obj)) {
+        return cache.get(obj);
+    }
+    var newObj = {
+        __proto__: null
+    };
+    var hasPropertyDescriptor = Object.defineProperty && Object.getOwnPropertyDescriptor;
+    for(var key in obj){
+        if (key !== "default" && Object.prototype.hasOwnProperty.call(obj, key)) {
+            var desc = hasPropertyDescriptor ? Object.getOwnPropertyDescriptor(obj, key) : null;
+            if (desc && (desc.get || desc.set)) {
+                Object.defineProperty(newObj, key, desc);
+            } else {
+                newObj[key] = obj[key];
+            }
+        }
+    }
+    newObj.default = obj;
+    if (cache) {
+        cache.set(obj, newObj);
+    }
+    return newObj;
+}
 function GridItemContent(props) {
     const { panelGroupItemId, width } = props;
     const panelDefinition = (0, _context.usePanel)(panelGroupItemId);
@@ -39,6 +81,17 @@ function GridItemContent(props) {
         initialInView: false,
         triggerOnce: true
     });
+    const [openQueryViewer, setOpenQueryViewer] = (0, _react.useState)(false);
+    const viewQueriesHandler = (0, _react.useMemo)(()=>{
+        return isEditMode || !queries?.length ? undefined : {
+            onClick: ()=>{
+                setOpenQueryViewer(true);
+            }
+        };
+    }, [
+        isEditMode,
+        queries
+    ]);
     const readHandlers = {
         isPanelViewed: (0, _panelgroupslice.isPanelGroupItemIdEqual)(viewPanelGroupItemId, panelGroupItemId),
         onViewPanelClick: function() {
@@ -69,28 +122,95 @@ function GridItemContent(props) {
         };
     });
     const pluginQueryOptions = typeof plugin?.queryOptions === 'function' ? plugin?.queryOptions(panelDefinition.spec.plugin.spec) : plugin?.queryOptions;
-    return /*#__PURE__*/ (0, _jsxruntime.jsx)(_material.Box, {
+    const queryRows = (0, _react.useMemo)(()=>{
+        if (!queries?.length) return null;
+        const queryItems = [];
+        queries.forEach((query, index)=>{
+            if (query?.spec?.plugin?.kind && query?.kind) {
+                queryItems.push(/*#__PURE__*/ (0, _jsxruntime.jsxs)(_react.default.Fragment, {
+                    children: [
+                        /*#__PURE__*/ (0, _jsxruntime.jsx)(_pluginsystem.PluginSpecEditor, {
+                            value: query.spec.plugin.spec,
+                            pluginSelection: {
+                                kind: query.spec.plugin.kind,
+                                type: query.kind
+                            },
+                            onChange: ()=>{},
+                            isReadonly: true
+                        }),
+                        index < queries.length - 1 && /*#__PURE__*/ (0, _jsxruntime.jsx)(_material.Divider, {
+                            sx: {
+                                my: 2
+                            }
+                        })
+                    ]
+                }, `query-${index}`));
+            }
+        });
+        return queryItems;
+    }, [
+        queries
+    ]);
+    const onCloseHandler = ()=>{
+        setOpenQueryViewer(false);
+    };
+    return /*#__PURE__*/ (0, _jsxruntime.jsxs)(_material.Box, {
         ref: ref,
         sx: {
             width: '100%',
             height: '100%'
         },
-        children: /*#__PURE__*/ (0, _jsxruntime.jsx)(_pluginsystem.DataQueriesProvider, {
-            definitions: definitions,
-            options: {
-                suggestedStepMs,
-                ...pluginQueryOptions
-            },
-            queryOptions: {
-                enabled: inView
-            },
-            children: inView && /*#__PURE__*/ (0, _jsxruntime.jsx)(_Panel.Panel, {
-                definition: panelDefinition,
-                readHandlers: readHandlers,
-                editHandlers: editHandlers,
-                panelOptions: props.panelOptions,
-                panelGroupItemId: panelGroupItemId
+        children: [
+            /*#__PURE__*/ (0, _jsxruntime.jsxs)(_material.Dialog, {
+                fullWidth: true,
+                PaperProps: {
+                    sx: {
+                        margin: '10px',
+                        width: 'calc(100% - 20px)'
+                    }
+                },
+                maxWidth: "lg",
+                open: openQueryViewer,
+                children: [
+                    /*#__PURE__*/ (0, _jsxruntime.jsx)(_material.DialogTitle, {
+                        children: "Query Viewer"
+                    }),
+                    /*#__PURE__*/ (0, _jsxruntime.jsx)(_material.DialogContent, {
+                        children: /*#__PURE__*/ (0, _jsxruntime.jsx)(_material.Box, {
+                            sx: {
+                                padding: '5px'
+                            },
+                            children: queryRows
+                        })
+                    }),
+                    /*#__PURE__*/ (0, _jsxruntime.jsx)(_material.DialogActions, {
+                        children: /*#__PURE__*/ (0, _jsxruntime.jsx)(_material.Button, {
+                            variant: "outlined",
+                            onClick: onCloseHandler,
+                            color: "primary",
+                            children: "Close"
+                        })
+                    })
+                ]
+            }),
+            /*#__PURE__*/ (0, _jsxruntime.jsx)(_pluginsystem.DataQueriesProvider, {
+                definitions: definitions,
+                options: {
+                    suggestedStepMs,
+                    ...pluginQueryOptions
+                },
+                queryOptions: {
+                    enabled: inView
+                },
+                children: inView && /*#__PURE__*/ (0, _jsxruntime.jsx)(_Panel.Panel, {
+                    definition: panelDefinition,
+                    readHandlers: readHandlers,
+                    editHandlers: editHandlers,
+                    viewQueriesHandler: viewQueriesHandler,
+                    panelOptions: props.panelOptions,
+                    panelGroupItemId: panelGroupItemId
+                })
             })
-        })
+        ]
     });
 }

package/dist/cjs/components/Panel/Panel.js

@@ -34,7 +34,7 @@ function _interop_require_default(obj) {
     };
 }
 const Panel = /*#__PURE__*/ (0, _react.memo)(function Panel(props) {
-    const { definition, readHandlers, editHandlers, onMouseEnter, onMouseLeave, sx, panelOptions, panelGroupItemId, ...others } = props;
+    const { definition, readHandlers, editHandlers, onMouseEnter, onMouseLeave, sx, panelOptions, panelGroupItemId, viewQueriesHandler, ...others } = props;
     // Make sure we have an ID we can use for aria attributes
     const generatedPanelId = (0, _components.useId)('Panel');
     const headerId = `${generatedPanelId}-header`;
@@ -172,6 +172,7 @@ const Panel = /*#__PURE__*/ (0, _react.memo)(function Panel(props) {
                 queryResults: queryResults,
                 readHandlers: readHandlers,
                 editHandlers: editHandlers,
+                viewQueriesHandler: viewQueriesHandler,
                 links: definition.spec.links,
                 pluginActions: pluginActions,
                 sx: {

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

@@ -24,6 +24,7 @@ const _jsxruntime = require("react/jsx-runtime");
 const _material = require("@mui/material");
 const _react = require("react");
 const _components = require("@perses-dev/components");
+const _DatabaseSearch = /*#__PURE__*/ _interop_require_default(require("mdi-material-ui/DatabaseSearch"));
 const _ArrowCollapse = /*#__PURE__*/ _interop_require_default(require("mdi-material-ui/ArrowCollapse"));
 const _ArrowExpand = /*#__PURE__*/ _interop_require_default(require("mdi-material-ui/ArrowExpand"));
 const _PencilOutline = /*#__PURE__*/ _interop_require_default(require("mdi-material-ui/PencilOutline"));
@@ -47,7 +48,7 @@ const ConditionalBox = (0, _material.styled)(_material.Box)({
     flexGrow: 1,
     justifyContent: 'flex-end'
 });
-const PanelActions = ({ editHandlers, readHandlers, extra, title, description, descriptionTooltipId, links, queryResults, pluginActions = [] })=>{
+const PanelActions = ({ editHandlers, readHandlers, viewQueriesHandler, extra, title, description, descriptionTooltipId, links, queryResults, pluginActions = [] })=>{
     const descriptionAction = (0, _react.useMemo)(()=>{
         if (description && description.trim().length > 0) {
             return /*#__PURE__*/ (0, _jsxruntime.jsx)(_components.InfoTooltip, {
@@ -124,6 +125,23 @@ const PanelActions = ({ editHandlers, readHandlers, extra, title, description, d
         readHandlers,
         title
     ]);
+    const viewQueryAction = (0, _react.useMemo)(()=>{
+        if (!viewQueriesHandler?.onClick) return null;
+        return /*#__PURE__*/ (0, _jsxruntime.jsx)(_components.InfoTooltip, {
+            description: _constants.TOOLTIP_TEXT.queryView,
+            children: /*#__PURE__*/ (0, _jsxruntime.jsx)(_HeaderIconButton.HeaderIconButton, {
+                "aria-label": _constants.ARIA_LABEL_TEXT.openQueryView(title),
+                size: "small",
+                onClick: viewQueriesHandler.onClick,
+                children: /*#__PURE__*/ (0, _jsxruntime.jsx)(_DatabaseSearch.default, {
+                    fontSize: "inherit"
+                })
+            })
+        });
+    }, [
+        viewQueriesHandler,
+        title
+    ]);
     const editActions = (0, _react.useMemo)(()=>{
         if (editHandlers !== undefined) {
             // If there are edit handlers, always just show the edit buttons
@@ -235,6 +253,7 @@ const PanelActions = ({ editHandlers, readHandlers, extra, title, description, d
                                     " ",
                                     extraActions,
                                     " ",
+                                    viewQueryAction,
                                     readActions,
                                     " ",
                                     pluginActions,
@@ -266,13 +285,14 @@ const PanelActions = ({ editHandlers, readHandlers, extra, title, description, d
                     /*#__PURE__*/ (0, _jsxruntime.jsxs)(OnHover, {
                         children: [
                             extraActions,
-                            " ",
                             readActions,
                             /*#__PURE__*/ (0, _jsxruntime.jsxs)(OverflowMenu, {
                                 title: title,
                                 children: [
                                     editActions,
                                     " ",
+                                    viewQueryAction,
+                                    " ",
                                     pluginActions
                                 ]
                             }),
@@ -303,7 +323,7 @@ const PanelActions = ({ editHandlers, readHandlers, extra, title, description, d
                     /*#__PURE__*/ (0, _jsxruntime.jsxs)(OnHover, {
                         children: [
                             extraActions,
-                            " ",
+                            viewQueryAction,
                             readActions,
                             " ",
                             editActions,

package/dist/cjs/components/Panel/PanelHeader.js

@@ -26,7 +26,7 @@ const _components = require("@perses-dev/components");
 const _pluginsystem = require("@perses-dev/plugin-system");
 const _constants = require("../../constants");
 const _PanelActions = require("./PanelActions");
-function PanelHeader({ id, title: rawTitle, description: rawDescription, links, queryResults, readHandlers, editHandlers, sx, extra, pluginActions, ...rest }) {
+function PanelHeader({ id, title: rawTitle, description: rawDescription, links, queryResults, readHandlers, editHandlers, sx, extra, pluginActions, viewQueriesHandler, ...rest }) {
     const titleElementId = `${id}-title`;
     const descriptionTooltipId = `${id}-description`;
     const title = (0, _pluginsystem.useReplaceVariablesInString)(rawTitle);
@@ -63,6 +63,7 @@ function PanelHeader({ id, title: rawTitle, description: rawDescription, links,
                     links: links,
                     readHandlers: readHandlers,
                     editHandlers: editHandlers,
+                    viewQueriesHandler: viewQueriesHandler,
                     extra: extra,
                     queryResults: queryResults,
                     pluginActions: pluginActions

package/dist/cjs/constants/user-interface-text.js

@@ -50,7 +50,8 @@ const TOOLTIP_TEXT = {
     movePanel: 'Move',
     // Variable editor buttons
     refreshVariableValues: 'Refresh values',
-    copyVariableValues: 'Copy values to clipboard'
+    copyVariableValues: 'Copy values to clipboard',
+    queryView: 'Open query view'
 };
 const ARIA_LABEL_TEXT = {
     // Group buttons
@@ -65,5 +66,6 @@ const ARIA_LABEL_TEXT = {
     duplicatePanel: (panelName)=>`duplicate panel ${panelName}`,
     deletePanel: (panelName)=>`delete panel ${panelName}`,
     showPanelActions: (panelName)=>`show panel actions for ${panelName}`,
-    movePanel: (panelName)=>`move panel ${panelName}`
+    movePanel: (panelName)=>`move panel ${panelName}`,
+    openQueryView: (panelName)=>`open query view for panel ${panelName}`
 };

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

@@ -1 +1 @@
-{"version":3,"file":"GridItemContent.d.ts","sourceRoot":"","sources":["../../../src/components/GridLayout/GridItemContent.tsx"],"names":[],"mappings":"AAgBA,OAAO,EAAE,YAAY,EAAE,MAAM,OAAO,CAAC;AACrC,OAAO,EAAE,gBAAgB,EAA6D,MAAM,eAAe,CAAC;AAC5G,OAAO,EAAqB,YAAY,EAAE,MAAM,UAAU,CAAC;AAG3D,MAAM,WAAW,oBAAoB;IACnC,gBAAgB,EAAE,gBAAgB,CAAC;IACnC,KAAK,EAAE,MAAM,CAAC;IACd,YAAY,CAAC,EAAE,YAAY,CAAC;CAC7B;AAED;;GAEG;AACH,wBAAgB,eAAe,CAAC,KAAK,EAAE,oBAAoB,GAAG,YAAY,CA8EzE"}
+{"version":3,"file":"GridItemContent.d.ts","sourceRoot":"","sources":["../../../src/components/GridLayout/GridItemContent.tsx"],"names":[],"mappings":"AAgBA,OAAc,EAAE,YAAY,EAAqB,MAAM,OAAO,CAAC;AAC/D,OAAO,EAAE,gBAAgB,EAA6D,MAAM,eAAe,CAAC;AAC5G,OAAO,EAAqB,YAAY,EAAE,MAAM,UAAU,CAAC;AAG3D,MAAM,WAAW,oBAAoB;IACnC,gBAAgB,EAAE,gBAAgB,CAAC;IACnC,KAAK,EAAE,MAAM,CAAC;IACd,YAAY,CAAC,EAAE,YAAY,CAAC;CAC7B;AAED;;GAEG;AACH,wBAAgB,eAAe,CAAC,KAAK,EAAE,oBAAoB,GAAG,YAAY,CA8IzE"}

package/dist/components/GridLayout/GridItemContent.js

@@ -10,10 +10,11 @@
 // WITHOUT WARRANTIES OR CONDITIONS OF ANY KIND, either express or implied.
 // See the License for the specific language governing permissions and
 // limitations under the License.
-import { jsx as _jsx } from "react/jsx-runtime";
-import { Box } from '@mui/material';
+import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
+import { Box, Button, Dialog, DialogActions, DialogContent, DialogTitle, Divider } from '@mui/material';
 import { useInView } from 'react-intersection-observer';
-import { DataQueriesProvider, usePlugin, useSuggestedStepMs } from '@perses-dev/plugin-system';
+import { DataQueriesProvider, PluginSpecEditor, usePlugin, useSuggestedStepMs } from '@perses-dev/plugin-system';
+import React, { useMemo, useState } from 'react';
 import { useEditMode, usePanel, usePanelActions, useViewPanelGroup } from '../../context';
 import { Panel } from '../Panel';
 import { isPanelGroupItemIdEqual } from '../../context/DashboardProvider/panel-group-slice';
@@ -31,6 +32,17 @@ import { isPanelGroupItemIdEqual } from '../../context/DashboardProvider/panel-g
         initialInView: false,
         triggerOnce: true
     });
+    const [openQueryViewer, setOpenQueryViewer] = useState(false);
+    const viewQueriesHandler = useMemo(()=>{
+        return isEditMode || !queries?.length ? undefined : {
+            onClick: ()=>{
+                setOpenQueryViewer(true);
+            }
+        };
+    }, [
+        isEditMode,
+        queries
+    ]);
     const readHandlers = {
         isPanelViewed: isPanelGroupItemIdEqual(viewPanelGroupItemId, panelGroupItemId),
         onViewPanelClick: function() {
@@ -61,29 +73,96 @@ import { isPanelGroupItemIdEqual } from '../../context/DashboardProvider/panel-g
         };
     });
     const pluginQueryOptions = typeof plugin?.queryOptions === 'function' ? plugin?.queryOptions(panelDefinition.spec.plugin.spec) : plugin?.queryOptions;
-    return /*#__PURE__*/ _jsx(Box, {
+    const queryRows = useMemo(()=>{
+        if (!queries?.length) return null;
+        const queryItems = [];
+        queries.forEach((query, index)=>{
+            if (query?.spec?.plugin?.kind && query?.kind) {
+                queryItems.push(/*#__PURE__*/ _jsxs(React.Fragment, {
+                    children: [
+                        /*#__PURE__*/ _jsx(PluginSpecEditor, {
+                            value: query.spec.plugin.spec,
+                            pluginSelection: {
+                                kind: query.spec.plugin.kind,
+                                type: query.kind
+                            },
+                            onChange: ()=>{},
+                            isReadonly: true
+                        }),
+                        index < queries.length - 1 && /*#__PURE__*/ _jsx(Divider, {
+                            sx: {
+                                my: 2
+                            }
+                        })
+                    ]
+                }, `query-${index}`));
+            }
+        });
+        return queryItems;
+    }, [
+        queries
+    ]);
+    const onCloseHandler = ()=>{
+        setOpenQueryViewer(false);
+    };
+    return /*#__PURE__*/ _jsxs(Box, {
         ref: ref,
         sx: {
             width: '100%',
             height: '100%'
         },
-        children: /*#__PURE__*/ _jsx(DataQueriesProvider, {
-            definitions: definitions,
-            options: {
-                suggestedStepMs,
-                ...pluginQueryOptions
-            },
-            queryOptions: {
-                enabled: inView
-            },
-            children: inView && /*#__PURE__*/ _jsx(Panel, {
-                definition: panelDefinition,
-                readHandlers: readHandlers,
-                editHandlers: editHandlers,
-                panelOptions: props.panelOptions,
-                panelGroupItemId: panelGroupItemId
+        children: [
+            /*#__PURE__*/ _jsxs(Dialog, {
+                fullWidth: true,
+                PaperProps: {
+                    sx: {
+                        margin: '10px',
+                        width: 'calc(100% - 20px)'
+                    }
+                },
+                maxWidth: "lg",
+                open: openQueryViewer,
+                children: [
+                    /*#__PURE__*/ _jsx(DialogTitle, {
+                        children: "Query Viewer"
+                    }),
+                    /*#__PURE__*/ _jsx(DialogContent, {
+                        children: /*#__PURE__*/ _jsx(Box, {
+                            sx: {
+                                padding: '5px'
+                            },
+                            children: queryRows
+                        })
+                    }),
+                    /*#__PURE__*/ _jsx(DialogActions, {
+                        children: /*#__PURE__*/ _jsx(Button, {
+                            variant: "outlined",
+                            onClick: onCloseHandler,
+                            color: "primary",
+                            children: "Close"
+                        })
+                    })
+                ]
+            }),
+            /*#__PURE__*/ _jsx(DataQueriesProvider, {
+                definitions: definitions,
+                options: {
+                    suggestedStepMs,
+                    ...pluginQueryOptions
+                },
+                queryOptions: {
+                    enabled: inView
+                },
+                children: inView && /*#__PURE__*/ _jsx(Panel, {
+                    definition: panelDefinition,
+                    readHandlers: readHandlers,
+                    editHandlers: editHandlers,
+                    viewQueriesHandler: viewQueriesHandler,
+                    panelOptions: props.panelOptions,
+                    panelGroupItemId: panelGroupItemId
+                })
             })
-        })
+        ]
     });
 }
 

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

@@ -1 +1 @@
-{"version":3,"sources":["../../../src/components/GridLayout/GridItemContent.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 { Box } from '@mui/material';\nimport { useInView } from 'react-intersection-observer';\nimport { DataQueriesProvider, usePlugin, useSuggestedStepMs } from '@perses-dev/plugin-system';\nimport { ReactElement } from 'react';\nimport { PanelGroupItemId, useEditMode, usePanel, usePanelActions, useViewPanelGroup } from '../../context';\nimport { Panel, PanelProps, PanelOptions } from '../Panel';\nimport { isPanelGroupItemIdEqual } from '../../context/DashboardProvider/panel-group-slice';\n\nexport interface GridItemContentProps {\n  panelGroupItemId: PanelGroupItemId;\n  width: number; // necessary for determining the suggested step ms\n  panelOptions?: PanelOptions;\n}\n\n/**\n * Resolves the reference to panel content in a GridItemDefinition and renders the panel.\n */\nexport function GridItemContent(props: GridItemContentProps): ReactElement {\n  const { panelGroupItemId, width } = props;\n  const panelDefinition = usePanel(panelGroupItemId);\n  const {\n    spec: { queries },\n  } = panelDefinition;\n  const { isEditMode } = useEditMode();\n  const { openEditPanel, openDeletePanelDialog, duplicatePanel, viewPanel } = usePanelActions(panelGroupItemId);\n  const viewPanelGroupItemId = useViewPanelGroup();\n  const { ref, inView } = useInView({\n    threshold: 0.2, // we have the flexibility to adjust this threshold to trigger queries slightly earlier or later based on performance\n    initialInView: false,\n    triggerOnce: true,\n  });\n\n  const readHandlers = {\n    isPanelViewed: isPanelGroupItemIdEqual(viewPanelGroupItemId, panelGroupItemId),\n    onViewPanelClick: function (): void {\n      if (viewPanelGroupItemId === undefined) {\n        viewPanel(panelGroupItemId);\n      } else {\n        viewPanel(undefined);\n      }\n    },\n  };\n\n  // Provide actions to the panel when in edit mode\n  let editHandlers: PanelProps['editHandlers'] = undefined;\n  if (isEditMode) {\n    editHandlers = {\n      onEditPanelClick: openEditPanel,\n      onDuplicatePanelClick: duplicatePanel,\n      onDeletePanelClick: openDeletePanelDialog,\n    };\n  }\n\n  // map TimeSeriesQueryDefinition to Definition<UnknownSpec>\n  const suggestedStepMs = useSuggestedStepMs(width);\n\n  const { data: plugin } = usePlugin('Panel', panelDefinition.spec.plugin.kind);\n\n  const queryDefinitions = queries ?? [];\n  const definitions = queryDefinitions.map((query) => {\n    return {\n      kind: query.spec.plugin.kind,\n      spec: query.spec.plugin.spec,\n    };\n  });\n  const pluginQueryOptions =\n    typeof plugin?.queryOptions === 'function'\n      ? plugin?.queryOptions(panelDefinition.spec.plugin.spec)\n      : plugin?.queryOptions;\n\n  return (\n    <Box\n      ref={ref}\n      sx={{\n        width: '100%',\n        height: '100%',\n      }}\n    >\n      <DataQueriesProvider\n        definitions={definitions}\n        options={{ suggestedStepMs, ...pluginQueryOptions }}\n        queryOptions={{ enabled: inView }}\n      >\n        {inView && (\n          <Panel\n            definition={panelDefinition}\n            readHandlers={readHandlers}\n            editHandlers={editHandlers}\n            panelOptions={props.panelOptions}\n            panelGroupItemId={panelGroupItemId}\n          />\n        )}\n      </DataQueriesProvider>\n    </Box>\n  );\n}\n"],"names":["Box","useInView","DataQueriesProvider","usePlugin","useSuggestedStepMs","useEditMode","usePanel","usePanelActions","useViewPanelGroup","Panel","isPanelGroupItemIdEqual","GridItemContent","props","panelGroupItemId","width","panelDefinition","spec","queries","isEditMode","openEditPanel","openDeletePanelDialog","duplicatePanel","viewPanel","viewPanelGroupItemId","ref","inView","threshold","initialInView","triggerOnce","readHandlers","isPanelViewed","onViewPanelClick","undefined","editHandlers","onEditPanelClick","onDuplicatePanelClick","onDeletePanelClick","suggestedStepMs","data","plugin","kind","queryDefinitions","definitions","map","query","pluginQueryOptions","queryOptions","sx","height","options","enabled","definition","panelOptions"],"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,GAAG,QAAQ,gBAAgB;AACpC,SAASC,SAAS,QAAQ,8BAA8B;AACxD,SAASC,mBAAmB,EAAEC,SAAS,EAAEC,kBAAkB,QAAQ,4BAA4B;AAE/F,SAA2BC,WAAW,EAAEC,QAAQ,EAAEC,eAAe,EAAEC,iBAAiB,QAAQ,gBAAgB;AAC5G,SAASC,KAAK,QAAkC,WAAW;AAC3D,SAASC,uBAAuB,QAAQ,oDAAoD;AAQ5F;;CAEC,GACD,OAAO,SAASC,gBAAgBC,KAA2B;IACzD,MAAM,EAAEC,gBAAgB,EAAEC,KAAK,EAAE,GAAGF;IACpC,MAAMG,kBAAkBT,SAASO;IACjC,MAAM,EACJG,MAAM,EAAEC,OAAO,EAAE,EAClB,GAAGF;IACJ,MAAM,EAAEG,UAAU,EAAE,GAAGb;IACvB,MAAM,EAAEc,aAAa,EAAEC,qBAAqB,EAAEC,cAAc,EAAEC,SAAS,EAAE,GAAGf,gBAAgBM;IAC5F,MAAMU,uBAAuBf;IAC7B,MAAM,EAAEgB,GAAG,EAAEC,MAAM,EAAE,GAAGxB,UAAU;QAChCyB,WAAW;QACXC,eAAe;QACfC,aAAa;IACf;IAEA,MAAMC,eAAe;QACnBC,eAAepB,wBAAwBa,sBAAsBV;QAC7DkB,kBAAkB;YAChB,IAAIR,yBAAyBS,WAAW;gBACtCV,UAAUT;YACZ,OAAO;gBACLS,UAAUU;YACZ;QACF;IACF;IAEA,iDAAiD;IACjD,IAAIC,eAA2CD;IAC/C,IAAId,YAAY;QACde,eAAe;YACbC,kBAAkBf;YAClBgB,uBAAuBd;YACvBe,oBAAoBhB;QACtB;IACF;IAEA,2DAA2D;IAC3D,MAAMiB,kBAAkBjC,mBAAmBU;IAE3C,MAAM,EAAEwB,MAAMC,MAAM,EAAE,GAAGpC,UAAU,SAASY,gBAAgBC,IAAI,CAACuB,MAAM,CAACC,IAAI;IAE5E,MAAMC,mBAAmBxB,WAAW,EAAE;IACtC,MAAMyB,cAAcD,iBAAiBE,GAAG,CAAC,CAACC;QACxC,OAAO;YACLJ,MAAMI,MAAM5B,IAAI,CAACuB,MAAM,CAACC,IAAI;YAC5BxB,MAAM4B,MAAM5B,IAAI,CAACuB,MAAM,CAACvB,IAAI;QAC9B;IACF;IACA,MAAM6B,qBACJ,OAAON,QAAQO,iBAAiB,aAC5BP,QAAQO,aAAa/B,gBAAgBC,IAAI,CAACuB,MAAM,CAACvB,IAAI,IACrDuB,QAAQO;IAEd,qBACE,KAAC9C;QACCwB,KAAKA;QACLuB,IAAI;YACFjC,OAAO;YACPkC,QAAQ;QACV;kBAEA,cAAA,KAAC9C;YACCwC,aAAaA;YACbO,SAAS;gBAAEZ;gBAAiB,GAAGQ,kBAAkB;YAAC;YAClDC,cAAc;gBAAEI,SAASzB;YAAO;sBAE/BA,wBACC,KAAChB;gBACC0C,YAAYpC;gBACZc,cAAcA;gBACdI,cAAcA;gBACdmB,cAAcxC,MAAMwC,YAAY;gBAChCvC,kBAAkBA;;;;AAM9B"}
+{"version":3,"sources":["../../../src/components/GridLayout/GridItemContent.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 { Box, Button, Dialog, DialogActions, DialogContent, DialogTitle, Divider } from '@mui/material';\nimport { useInView } from 'react-intersection-observer';\nimport { DataQueriesProvider, PluginSpecEditor, usePlugin, useSuggestedStepMs } from '@perses-dev/plugin-system';\nimport React, { ReactElement, useMemo, useState } from 'react';\nimport { PanelGroupItemId, useEditMode, usePanel, usePanelActions, useViewPanelGroup } from '../../context';\nimport { Panel, PanelProps, PanelOptions } from '../Panel';\nimport { isPanelGroupItemIdEqual } from '../../context/DashboardProvider/panel-group-slice';\n\nexport interface GridItemContentProps {\n  panelGroupItemId: PanelGroupItemId;\n  width: number; // necessary for determining the suggested step ms\n  panelOptions?: PanelOptions;\n}\n\n/**\n * Resolves the reference to panel content in a GridItemDefinition and renders the panel.\n */\nexport function GridItemContent(props: GridItemContentProps): ReactElement {\n  const { panelGroupItemId, width } = props;\n  const panelDefinition = usePanel(panelGroupItemId);\n\n  const {\n    spec: { queries },\n  } = panelDefinition;\n\n  const { isEditMode } = useEditMode();\n  const { openEditPanel, openDeletePanelDialog, duplicatePanel, viewPanel } = usePanelActions(panelGroupItemId);\n  const viewPanelGroupItemId = useViewPanelGroup();\n  const { ref, inView } = useInView({\n    threshold: 0.2, // we have the flexibility to adjust this threshold to trigger queries slightly earlier or later based on performance\n    initialInView: false,\n    triggerOnce: true,\n  });\n\n  const [openQueryViewer, setOpenQueryViewer] = useState(false);\n\n  const viewQueriesHandler = useMemo(() => {\n    return isEditMode || !queries?.length\n      ? undefined\n      : {\n          onClick: (): void => {\n            setOpenQueryViewer(true);\n          },\n        };\n  }, [isEditMode, queries]);\n\n  const readHandlers = {\n    isPanelViewed: isPanelGroupItemIdEqual(viewPanelGroupItemId, panelGroupItemId),\n    onViewPanelClick: function (): void {\n      if (viewPanelGroupItemId === undefined) {\n        viewPanel(panelGroupItemId);\n      } else {\n        viewPanel(undefined);\n      }\n    },\n  };\n\n  // Provide actions to the panel when in edit mode\n  let editHandlers: PanelProps['editHandlers'] = undefined;\n  if (isEditMode) {\n    editHandlers = {\n      onEditPanelClick: openEditPanel,\n      onDuplicatePanelClick: duplicatePanel,\n      onDeletePanelClick: openDeletePanelDialog,\n    };\n  }\n\n  // map TimeSeriesQueryDefinition to Definition<UnknownSpec>\n  const suggestedStepMs = useSuggestedStepMs(width);\n\n  const { data: plugin } = usePlugin('Panel', panelDefinition.spec.plugin.kind);\n\n  const queryDefinitions = queries ?? [];\n  const definitions = queryDefinitions.map((query) => {\n    return {\n      kind: query.spec.plugin.kind,\n      spec: query.spec.plugin.spec,\n    };\n  });\n\n  const pluginQueryOptions =\n    typeof plugin?.queryOptions === 'function'\n      ? plugin?.queryOptions(panelDefinition.spec.plugin.spec)\n      : plugin?.queryOptions;\n\n  const queryRows = useMemo(() => {\n    if (!queries?.length) return null;\n\n    const queryItems: ReactElement[] = [];\n    queries.forEach((query, index) => {\n      if (query?.spec?.plugin?.kind && query?.kind) {\n        queryItems.push(\n          <React.Fragment key={`query-${index}`}>\n            <PluginSpecEditor\n              value={query.spec.plugin.spec}\n              pluginSelection={{ kind: query.spec.plugin.kind, type: query.kind }}\n              onChange={(): void => {}}\n              isReadonly\n            />\n            {index < queries.length - 1 && <Divider sx={{ my: 2 }} />}\n          </React.Fragment>\n        );\n      }\n    });\n\n    return queryItems;\n  }, [queries]);\n\n  const onCloseHandler = (): void => {\n    setOpenQueryViewer(false);\n  };\n\n  return (\n    <Box\n      ref={ref}\n      sx={{\n        width: '100%',\n        height: '100%',\n      }}\n    >\n      <Dialog\n        fullWidth\n        PaperProps={{\n          sx: {\n            margin: '10px',\n            width: 'calc(100% - 20px)',\n          },\n        }}\n        maxWidth=\"lg\"\n        open={openQueryViewer}\n      >\n        <DialogTitle>Query Viewer</DialogTitle>\n        <DialogContent>\n          <Box sx={{ padding: '5px' }}>{queryRows}</Box>\n        </DialogContent>\n        <DialogActions>\n          <Button variant=\"outlined\" onClick={onCloseHandler} color=\"primary\">\n            Close\n          </Button>\n        </DialogActions>\n      </Dialog>\n      <DataQueriesProvider\n        definitions={definitions}\n        options={{ suggestedStepMs, ...pluginQueryOptions }}\n        queryOptions={{ enabled: inView }}\n      >\n        {inView && (\n          <Panel\n            definition={panelDefinition}\n            readHandlers={readHandlers}\n            editHandlers={editHandlers}\n            viewQueriesHandler={viewQueriesHandler}\n            panelOptions={props.panelOptions}\n            panelGroupItemId={panelGroupItemId}\n          />\n        )}\n      </DataQueriesProvider>\n    </Box>\n  );\n}\n"],"names":["Box","Button","Dialog","DialogActions","DialogContent","DialogTitle","Divider","useInView","DataQueriesProvider","PluginSpecEditor","usePlugin","useSuggestedStepMs","React","useMemo","useState","useEditMode","usePanel","usePanelActions","useViewPanelGroup","Panel","isPanelGroupItemIdEqual","GridItemContent","props","panelGroupItemId","width","panelDefinition","spec","queries","isEditMode","openEditPanel","openDeletePanelDialog","duplicatePanel","viewPanel","viewPanelGroupItemId","ref","inView","threshold","initialInView","triggerOnce","openQueryViewer","setOpenQueryViewer","viewQueriesHandler","length","undefined","onClick","readHandlers","isPanelViewed","onViewPanelClick","editHandlers","onEditPanelClick","onDuplicatePanelClick","onDeletePanelClick","suggestedStepMs","data","plugin","kind","queryDefinitions","definitions","map","query","pluginQueryOptions","queryOptions","queryRows","queryItems","forEach","index","push","Fragment","value","pluginSelection","type","onChange","isReadonly","sx","my","onCloseHandler","height","fullWidth","PaperProps","margin","maxWidth","open","padding","variant","color","options","enabled","definition","panelOptions"],"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,GAAG,EAAEC,MAAM,EAAEC,MAAM,EAAEC,aAAa,EAAEC,aAAa,EAAEC,WAAW,EAAEC,OAAO,QAAQ,gBAAgB;AACxG,SAASC,SAAS,QAAQ,8BAA8B;AACxD,SAASC,mBAAmB,EAAEC,gBAAgB,EAAEC,SAAS,EAAEC,kBAAkB,QAAQ,4BAA4B;AACjH,OAAOC,SAAuBC,OAAO,EAAEC,QAAQ,QAAQ,QAAQ;AAC/D,SAA2BC,WAAW,EAAEC,QAAQ,EAAEC,eAAe,EAAEC,iBAAiB,QAAQ,gBAAgB;AAC5G,SAASC,KAAK,QAAkC,WAAW;AAC3D,SAASC,uBAAuB,QAAQ,oDAAoD;AAQ5F;;CAEC,GACD,OAAO,SAASC,gBAAgBC,KAA2B;IACzD,MAAM,EAAEC,gBAAgB,EAAEC,KAAK,EAAE,GAAGF;IACpC,MAAMG,kBAAkBT,SAASO;IAEjC,MAAM,EACJG,MAAM,EAAEC,OAAO,EAAE,EAClB,GAAGF;IAEJ,MAAM,EAAEG,UAAU,EAAE,GAAGb;IACvB,MAAM,EAAEc,aAAa,EAAEC,qBAAqB,EAAEC,cAAc,EAAEC,SAAS,EAAE,GAAGf,gBAAgBM;IAC5F,MAAMU,uBAAuBf;IAC7B,MAAM,EAAEgB,GAAG,EAAEC,MAAM,EAAE,GAAG5B,UAAU;QAChC6B,WAAW;QACXC,eAAe;QACfC,aAAa;IACf;IAEA,MAAM,CAACC,iBAAiBC,mBAAmB,GAAG1B,SAAS;IAEvD,MAAM2B,qBAAqB5B,QAAQ;QACjC,OAAOe,cAAc,CAACD,SAASe,SAC3BC,YACA;YACEC,SAAS;gBACPJ,mBAAmB;YACrB;QACF;IACN,GAAG;QAACZ;QAAYD;KAAQ;IAExB,MAAMkB,eAAe;QACnBC,eAAe1B,wBAAwBa,sBAAsBV;QAC7DwB,kBAAkB;YAChB,IAAId,yBAAyBU,WAAW;gBACtCX,UAAUT;YACZ,OAAO;gBACLS,UAAUW;YACZ;QACF;IACF;IAEA,iDAAiD;IACjD,IAAIK,eAA2CL;IAC/C,IAAIf,YAAY;QACdoB,eAAe;YACbC,kBAAkBpB;YAClBqB,uBAAuBnB;YACvBoB,oBAAoBrB;QACtB;IACF;IAEA,2DAA2D;IAC3D,MAAMsB,kBAAkBzC,mBAAmBa;IAE3C,MAAM,EAAE6B,MAAMC,MAAM,EAAE,GAAG5C,UAAU,SAASe,gBAAgBC,IAAI,CAAC4B,MAAM,CAACC,IAAI;IAE5E,MAAMC,mBAAmB7B,WAAW,EAAE;IACtC,MAAM8B,cAAcD,iBAAiBE,GAAG,CAAC,CAACC;QACxC,OAAO;YACLJ,MAAMI,MAAMjC,IAAI,CAAC4B,MAAM,CAACC,IAAI;YAC5B7B,MAAMiC,MAAMjC,IAAI,CAAC4B,MAAM,CAAC5B,IAAI;QAC9B;IACF;IAEA,MAAMkC,qBACJ,OAAON,QAAQO,iBAAiB,aAC5BP,QAAQO,aAAapC,gBAAgBC,IAAI,CAAC4B,MAAM,CAAC5B,IAAI,IACrD4B,QAAQO;IAEd,MAAMC,YAAYjD,QAAQ;QACxB,IAAI,CAACc,SAASe,QAAQ,OAAO;QAE7B,MAAMqB,aAA6B,EAAE;QACrCpC,QAAQqC,OAAO,CAAC,CAACL,OAAOM;YACtB,IAAIN,OAAOjC,MAAM4B,QAAQC,QAAQI,OAAOJ,MAAM;gBAC5CQ,WAAWG,IAAI,eACb,MAACtD,MAAMuD,QAAQ;;sCACb,KAAC1D;4BACC2D,OAAOT,MAAMjC,IAAI,CAAC4B,MAAM,CAAC5B,IAAI;4BAC7B2C,iBAAiB;gCAAEd,MAAMI,MAAMjC,IAAI,CAAC4B,MAAM,CAACC,IAAI;gCAAEe,MAAMX,MAAMJ,IAAI;4BAAC;4BAClEgB,UAAU,KAAa;4BACvBC,UAAU;;wBAEXP,QAAQtC,QAAQe,MAAM,GAAG,mBAAK,KAACpC;4BAAQmE,IAAI;gCAAEC,IAAI;4BAAE;;;mBAPjC,CAAC,MAAM,EAAET,OAAO;YAUzC;QACF;QAEA,OAAOF;IACT,GAAG;QAACpC;KAAQ;IAEZ,MAAMgD,iBAAiB;QACrBnC,mBAAmB;IACrB;IAEA,qBACE,MAACxC;QACCkC,KAAKA;QACLuC,IAAI;YACFjD,OAAO;YACPoD,QAAQ;QACV;;0BAEA,MAAC1E;gBACC2E,SAAS;gBACTC,YAAY;oBACVL,IAAI;wBACFM,QAAQ;wBACRvD,OAAO;oBACT;gBACF;gBACAwD,UAAS;gBACTC,MAAM1C;;kCAEN,KAAClC;kCAAY;;kCACb,KAACD;kCACC,cAAA,KAACJ;4BAAIyE,IAAI;gCAAES,SAAS;4BAAM;sCAAIpB;;;kCAEhC,KAAC3D;kCACC,cAAA,KAACF;4BAAOkF,SAAQ;4BAAWvC,SAAS+B;4BAAgBS,OAAM;sCAAU;;;;;0BAKxE,KAAC5E;gBACCiD,aAAaA;gBACb4B,SAAS;oBAAEjC;oBAAiB,GAAGQ,kBAAkB;gBAAC;gBAClDC,cAAc;oBAAEyB,SAASnD;gBAAO;0BAE/BA,wBACC,KAAChB;oBACCoE,YAAY9D;oBACZoB,cAAcA;oBACdG,cAAcA;oBACdP,oBAAoBA;oBACpB+C,cAAclE,MAAMkE,YAAY;oBAChCjE,kBAAkBA;;;;;AAM9B"}

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

@@ -9,6 +9,7 @@ export interface PanelProps extends CardProps<'section'> {
     editHandlers?: PanelHeaderProps['editHandlers'];
     panelOptions?: PanelOptions;
     panelGroupItemId?: PanelGroupItemId;
+    viewQueriesHandler?: PanelHeaderProps['viewQueriesHandler'];
 }
 export type PanelOptions = {
     /**

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

@@ -1 +1 @@
-{"version":3,"file":"Panel.d.ts","sourceRoot":"","sources":["../../../src/components/Panel/Panel.tsx"],"names":[],"mappings":"AAaA,OAAO,EAAqB,SAAS,EAAE,MAAM,eAAe,CAAC;AAE7D,OAAO,EAAE,eAAe,EAAE,MAAM,kBAAkB,CAAC;AAEnD,OAAO,EAAE,SAAS,EAAsC,MAAM,OAAO,CAAC;AAEtE,OAAO,EAAE,gBAAgB,EAAE,MAAM,eAAe,CAAC;AAEjD,OAAO,EAAe,gBAAgB,EAAE,MAAM,eAAe,CAAC;AAE9D,MAAM,WAAW,UAAW,SAAQ,SAAS,CAAC,SAAS,CAAC;IACtD,UAAU,EAAE,eAAe,CAAC;IAC5B,YAAY,CAAC,EAAE,gBAAgB,CAAC,cAAc,CAAC,CAAC;IAChD,YAAY,CAAC,EAAE,gBAAgB,CAAC,cAAc,CAAC,CAAC;IAChD,YAAY,CAAC,EAAE,YAAY,CAAC;IAC5B,gBAAgB,CAAC,EAAE,gBAAgB,CAAC;CACrC;AAED,MAAM,MAAM,YAAY,GAAG;IACzB;;;OAGG;IACH,UAAU,CAAC,EAAE,OAAO,CAAC;IACrB;;;OAGG;IACH,KAAK,CAAC,EAAE,CAAC,KAAK,EAAE,eAAe,KAAK,SAAS,CAAC;CAC/C,CAAC;AAEF,MAAM,MAAM,eAAe,GAAG;IAC5B;;OAEG;IACH,eAAe,CAAC,EAAE,eAAe,CAAC;IAClC;;OAEG;IACH,gBAAgB,CAAC,EAAE,gBAAgB,CAAC;CACrC,CAAC;AAEF;;;;;;;GAOG;AACH,eAAO,MAAM,KAAK,kDAkMhB,CAAC"}
+{"version":3,"file":"Panel.d.ts","sourceRoot":"","sources":["../../../src/components/Panel/Panel.tsx"],"names":[],"mappings":"AAaA,OAAO,EAAqB,SAAS,EAAE,MAAM,eAAe,CAAC;AAE7D,OAAO,EAAE,eAAe,EAAE,MAAM,kBAAkB,CAAC;AAEnD,OAAO,EAAE,SAAS,EAAsC,MAAM,OAAO,CAAC;AAEtE,OAAO,EAAE,gBAAgB,EAAE,MAAM,eAAe,CAAC;AAEjD,OAAO,EAAe,gBAAgB,EAAE,MAAM,eAAe,CAAC;AAE9D,MAAM,WAAW,UAAW,SAAQ,SAAS,CAAC,SAAS,CAAC;IACtD,UAAU,EAAE,eAAe,CAAC;IAC5B,YAAY,CAAC,EAAE,gBAAgB,CAAC,cAAc,CAAC,CAAC;IAChD,YAAY,CAAC,EAAE,gBAAgB,CAAC,cAAc,CAAC,CAAC;IAChD,YAAY,CAAC,EAAE,YAAY,CAAC;IAC5B,gBAAgB,CAAC,EAAE,gBAAgB,CAAC;IACpC,kBAAkB,CAAC,EAAE,gBAAgB,CAAC,oBAAoB,CAAC,CAAC;CAC7D;AAED,MAAM,MAAM,YAAY,GAAG;IACzB;;;OAGG;IACH,UAAU,CAAC,EAAE,OAAO,CAAC;IACrB;;;OAGG;IACH,KAAK,CAAC,EAAE,CAAC,KAAK,EAAE,eAAe,KAAK,SAAS,CAAC;CAC/C,CAAC;AAEF,MAAM,MAAM,eAAe,GAAG;IAC5B;;OAEG;IACH,eAAe,CAAC,EAAE,eAAe,CAAC;IAClC;;OAEG;IACH,gBAAgB,CAAC,EAAE,gBAAgB,CAAC;CACrC,CAAC;AAEF;;;;;;;GAOG;AACH,eAAO,MAAM,KAAK,kDAoMhB,CAAC"}

package/dist/components/Panel/Panel.js

@@ -26,7 +26,7 @@ import { PanelHeader } from './PanelHeader';
  *   <PanelContent>         // renders loading, error or panel based on the queries' status
  *     <PanelPluginLoader>  // loads a panel plugin from the plugin registry and renders the PanelComponent with data from props.queryResults
  */ export const Panel = /*#__PURE__*/ memo(function Panel(props) {
-    const { definition, readHandlers, editHandlers, onMouseEnter, onMouseLeave, sx, panelOptions, panelGroupItemId, ...others } = props;
+    const { definition, readHandlers, editHandlers, onMouseEnter, onMouseLeave, sx, panelOptions, panelGroupItemId, viewQueriesHandler, ...others } = props;
     // Make sure we have an ID we can use for aria attributes
     const generatedPanelId = useId('Panel');
     const headerId = `${generatedPanelId}-header`;
@@ -164,6 +164,7 @@ import { PanelHeader } from './PanelHeader';
                 queryResults: queryResults,
                 readHandlers: readHandlers,
                 editHandlers: editHandlers,
+                viewQueriesHandler: viewQueriesHandler,
                 links: definition.spec.links,
                 pluginActions: pluginActions,
                 sx: {

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

@@ -1 +1 @@
-{"version":3,"sources":["../../../src/components/Panel/Panel.tsx"],"sourcesContent":["// Copyright 2023 The Perses Authors\n// Licensed under the Apache License, Version 2.0 (the \"License\");\n// you may not use this file except in compliance with the License.\n// You may obtain a copy of the License at\n//\n// http://www.apache.org/licenses/LICENSE-2.0\n//\n// Unless required by applicable law or agreed to in writing, software\n// distributed under the License is distributed on an \"AS IS\" BASIS,\n// WITHOUT WARRANTIES OR CONDITIONS OF ANY KIND, either express or implied.\n// See the License for the specific language governing permissions and\n// limitations under the License.\n\nimport { Card, CardContent, CardProps } from '@mui/material';\nimport { ErrorAlert, ErrorBoundary, combineSx, useChartsTheme, useId } from '@perses-dev/components';\nimport { PanelDefinition } from '@perses-dev/core';\nimport { useDataQueriesContext, usePluginRegistry } from '@perses-dev/plugin-system';\nimport { ReactNode, memo, useMemo, useState, useEffect } from 'react';\nimport useResizeObserver from 'use-resize-observer';\nimport { PanelGroupItemId } from '../../context';\nimport { PanelContent } from './PanelContent';\nimport { PanelHeader, PanelHeaderProps } from './PanelHeader';\n\nexport interface PanelProps extends CardProps<'section'> {\n  definition: PanelDefinition;\n  readHandlers?: PanelHeaderProps['readHandlers'];\n  editHandlers?: PanelHeaderProps['editHandlers'];\n  panelOptions?: PanelOptions;\n  panelGroupItemId?: PanelGroupItemId;\n}\n\nexport type PanelOptions = {\n  /**\n   * Allow you to hide the panel header if desired.\n   * This can be useful in embedded mode for example.\n   */\n  hideHeader?: boolean;\n  /**\n   * Content to render in right of the panel header. (top right of the panel)\n   * It will only be rendered when the panel is in edit mode.\n   */\n  extra?: (props: PanelExtraProps) => ReactNode;\n};\n\nexport type PanelExtraProps = {\n  /**\n   * The PanelDefinition for the panel.\n   */\n  panelDefinition?: PanelDefinition;\n  /**\n   * The PanelGroupItemId for the panel.\n   */\n  panelGroupItemId?: PanelGroupItemId;\n};\n\n/**\n * Renders a PanelDefinition's content inside of a Card.\n *\n * Internal structure:\n * <Panel>                  // renders an entire panel, incl. header and action buttons\n *   <PanelContent>         // renders loading, error or panel based on the queries' status\n *     <PanelPluginLoader>  // loads a panel plugin from the plugin registry and renders the PanelComponent with data from props.queryResults\n */\nexport const Panel = memo(function Panel(props: PanelProps) {\n  const {\n    definition,\n    readHandlers,\n    editHandlers,\n    onMouseEnter,\n    onMouseLeave,\n    sx,\n    panelOptions,\n    panelGroupItemId,\n    ...others\n  } = props;\n\n  // Make sure we have an ID we can use for aria attributes\n  const generatedPanelId = useId('Panel');\n  const headerId = `${generatedPanelId}-header`;\n\n  const [contentElement, setContentElement] = useState<HTMLElement | null>(null);\n\n  const { width, height } = useResizeObserver({ ref: contentElement });\n\n  const contentDimensions = useMemo(() => {\n    if (width === undefined || height === undefined) return undefined;\n    return { width, height };\n  }, [width, height]);\n\n  const chartsTheme = useChartsTheme();\n\n  const { queryResults } = useDataQueriesContext();\n  const { getPlugin } = usePluginRegistry();\n\n  const panelPropsForActions = useMemo(() => {\n    return {\n      spec: definition.spec.plugin.spec,\n      queryResults: queryResults.map((query) => ({\n        definition: query.definition,\n        data: query.data,\n      })),\n      contentDimensions,\n      definition,\n    };\n  }, [definition, contentDimensions, queryResults]);\n\n  // Load plugin actions from the plugin\n  const [pluginActions, setPluginActions] = useState<ReactNode[]>([]);\n\n  useEffect(() => {\n    let cancelled = false;\n\n    const loadPluginActions = async (): Promise<void> => {\n      const panelPluginKind = definition.spec.plugin.kind;\n      const panelProps = panelPropsForActions;\n\n      if (!panelPluginKind || !panelProps) {\n        if (!cancelled) {\n          setPluginActions([]);\n        }\n        return;\n      }\n\n      try {\n        // Add defensive check for getPlugin availability\n        if (!getPlugin || typeof getPlugin !== 'function') {\n          if (!cancelled) {\n            setPluginActions([]);\n          }\n          return;\n        }\n\n        const plugin = await getPlugin('Panel', panelPluginKind);\n\n        if (cancelled) return;\n\n        // More defensive checking for plugin and actions\n        if (\n          !plugin ||\n          typeof plugin !== 'object' ||\n          !plugin.actions ||\n          !Array.isArray(plugin.actions) ||\n          plugin.actions.length === 0\n        ) {\n          if (!cancelled) {\n            setPluginActions([]);\n          }\n          return;\n        }\n\n        // Render plugin actions in header location\n        const headerActions = plugin.actions\n          .filter((action) => !action.location || action.location === 'header')\n          .map((action, index): ReactNode | null => {\n            const ActionComponent = action.component;\n            try {\n              // eslint-disable-next-line @typescript-eslint/no-explicit-any\n              return <ActionComponent key={`plugin-action-${index}`} {...(panelProps as any)} />;\n            } catch (error) {\n              console.warn(`Failed to render plugin action ${index}:`, error);\n              return null;\n            }\n          })\n          .filter((item): item is ReactNode => Boolean(item));\n\n        if (!cancelled) {\n          setPluginActions(headerActions);\n        }\n      } catch (error) {\n        if (!cancelled) {\n          console.warn('Failed to load plugin actions:', error);\n          setPluginActions([]);\n        }\n      }\n    };\n\n    // Use setTimeout to defer the async operation to the next tick\n    const timeoutId = setTimeout(() => {\n      loadPluginActions();\n    }, 0);\n\n    return (): void => {\n      cancelled = true;\n      clearTimeout(timeoutId);\n    };\n  }, [definition.spec.plugin.kind, panelPropsForActions, getPlugin]);\n\n  const handleMouseEnter: CardProps['onMouseEnter'] = (e) => {\n    onMouseEnter?.(e);\n  };\n\n  const handleMouseLeave: CardProps['onMouseLeave'] = (e) => {\n    onMouseLeave?.(e);\n  };\n\n  return (\n    <Card\n      component=\"section\"\n      sx={combineSx(\n        {\n          width: '100%',\n          height: '100%',\n          display: 'flex',\n          flexFlow: 'column nowrap',\n          ':hover': { '--panel-hover': 'block' },\n        },\n        sx\n      )}\n      variant=\"outlined\"\n      onMouseEnter={handleMouseEnter}\n      onMouseLeave={handleMouseLeave}\n      aria-labelledby={headerId}\n      aria-describedby={headerId}\n      data-testid=\"panel\"\n      {...others}\n    >\n      {!panelOptions?.hideHeader && (\n        <PanelHeader\n          extra={panelOptions?.extra?.({ panelDefinition: definition, panelGroupItemId })}\n          id={headerId}\n          title={definition.spec.display.name}\n          description={definition.spec.display.description}\n          queryResults={queryResults}\n          readHandlers={readHandlers}\n          editHandlers={editHandlers}\n          links={definition.spec.links}\n          pluginActions={pluginActions}\n          sx={{ paddingX: `${chartsTheme.container.padding.default}px` }}\n        />\n      )}\n      <CardContent\n        component=\"figure\"\n        sx={{\n          position: 'relative',\n          overflow: 'hidden',\n          flexGrow: 1,\n          margin: 0,\n          padding: 0,\n          // Override MUI default style for last-child\n          ':last-child': {\n            padding: 0,\n          },\n        }}\n        ref={setContentElement}\n      >\n        <ErrorBoundary FallbackComponent={ErrorAlert} resetKeys={[definition.spec, queryResults]}>\n          <PanelContent\n            definition={definition}\n            panelPluginKind={definition.spec.plugin.kind}\n            spec={definition.spec.plugin.spec}\n            contentDimensions={contentDimensions}\n            queryResults={queryResults}\n          />\n        </ErrorBoundary>\n      </CardContent>\n    </Card>\n  );\n});\n"],"names":["Card","CardContent","ErrorAlert","ErrorBoundary","combineSx","useChartsTheme","useId","useDataQueriesContext","usePluginRegistry","memo","useMemo","useState","useEffect","useResizeObserver","PanelContent","PanelHeader","Panel","props","definition","readHandlers","editHandlers","onMouseEnter","onMouseLeave","sx","panelOptions","panelGroupItemId","others","generatedPanelId","headerId","contentElement","setContentElement","width","height","ref","contentDimensions","undefined","chartsTheme","queryResults","getPlugin","panelPropsForActions","spec","plugin","map","query","data","pluginActions","setPluginActions","cancelled","loadPluginActions","panelPluginKind","kind","panelProps","actions","Array","isArray","length","headerActions","filter","action","location","index","ActionComponent","component","error","console","warn","item","Boolean","timeoutId","setTimeout","clearTimeout","handleMouseEnter","e","handleMouseLeave","display","flexFlow","variant","aria-labelledby","aria-describedby","data-testid","hideHeader","extra","panelDefinition","id","title","name","description","links","paddingX","container","padding","default","position","overflow","flexGrow","margin","FallbackComponent","resetKeys"],"mappings":"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"}
+{"version":3,"sources":["../../../src/components/Panel/Panel.tsx"],"sourcesContent":["// Copyright 2023 The Perses Authors\n// Licensed under the Apache License, Version 2.0 (the \"License\");\n// you may not use this file except in compliance with the License.\n// You may obtain a copy of the License at\n//\n// http://www.apache.org/licenses/LICENSE-2.0\n//\n// Unless required by applicable law or agreed to in writing, software\n// distributed under the License is distributed on an \"AS IS\" BASIS,\n// WITHOUT WARRANTIES OR CONDITIONS OF ANY KIND, either express or implied.\n// See the License for the specific language governing permissions and\n// limitations under the License.\n\nimport { Card, CardContent, CardProps } from '@mui/material';\nimport { ErrorAlert, ErrorBoundary, combineSx, useChartsTheme, useId } from '@perses-dev/components';\nimport { PanelDefinition } from '@perses-dev/core';\nimport { useDataQueriesContext, usePluginRegistry } from '@perses-dev/plugin-system';\nimport { ReactNode, memo, useMemo, useState, useEffect } from 'react';\nimport useResizeObserver from 'use-resize-observer';\nimport { PanelGroupItemId } from '../../context';\nimport { PanelContent } from './PanelContent';\nimport { PanelHeader, PanelHeaderProps } from './PanelHeader';\n\nexport interface PanelProps extends CardProps<'section'> {\n  definition: PanelDefinition;\n  readHandlers?: PanelHeaderProps['readHandlers'];\n  editHandlers?: PanelHeaderProps['editHandlers'];\n  panelOptions?: PanelOptions;\n  panelGroupItemId?: PanelGroupItemId;\n  viewQueriesHandler?: PanelHeaderProps['viewQueriesHandler'];\n}\n\nexport type PanelOptions = {\n  /**\n   * Allow you to hide the panel header if desired.\n   * This can be useful in embedded mode for example.\n   */\n  hideHeader?: boolean;\n  /**\n   * Content to render in right of the panel header. (top right of the panel)\n   * It will only be rendered when the panel is in edit mode.\n   */\n  extra?: (props: PanelExtraProps) => ReactNode;\n};\n\nexport type PanelExtraProps = {\n  /**\n   * The PanelDefinition for the panel.\n   */\n  panelDefinition?: PanelDefinition;\n  /**\n   * The PanelGroupItemId for the panel.\n   */\n  panelGroupItemId?: PanelGroupItemId;\n};\n\n/**\n * Renders a PanelDefinition's content inside of a Card.\n *\n * Internal structure:\n * <Panel>                  // renders an entire panel, incl. header and action buttons\n *   <PanelContent>         // renders loading, error or panel based on the queries' status\n *     <PanelPluginLoader>  // loads a panel plugin from the plugin registry and renders the PanelComponent with data from props.queryResults\n */\nexport const Panel = memo(function Panel(props: PanelProps) {\n  const {\n    definition,\n    readHandlers,\n    editHandlers,\n    onMouseEnter,\n    onMouseLeave,\n    sx,\n    panelOptions,\n    panelGroupItemId,\n    viewQueriesHandler,\n    ...others\n  } = props;\n\n  // Make sure we have an ID we can use for aria attributes\n  const generatedPanelId = useId('Panel');\n  const headerId = `${generatedPanelId}-header`;\n\n  const [contentElement, setContentElement] = useState<HTMLElement | null>(null);\n\n  const { width, height } = useResizeObserver({ ref: contentElement });\n\n  const contentDimensions = useMemo(() => {\n    if (width === undefined || height === undefined) return undefined;\n    return { width, height };\n  }, [width, height]);\n\n  const chartsTheme = useChartsTheme();\n\n  const { queryResults } = useDataQueriesContext();\n  const { getPlugin } = usePluginRegistry();\n\n  const panelPropsForActions = useMemo(() => {\n    return {\n      spec: definition.spec.plugin.spec,\n      queryResults: queryResults.map((query) => ({\n        definition: query.definition,\n        data: query.data,\n      })),\n      contentDimensions,\n      definition,\n    };\n  }, [definition, contentDimensions, queryResults]);\n\n  // Load plugin actions from the plugin\n  const [pluginActions, setPluginActions] = useState<ReactNode[]>([]);\n\n  useEffect(() => {\n    let cancelled = false;\n\n    const loadPluginActions = async (): Promise<void> => {\n      const panelPluginKind = definition.spec.plugin.kind;\n      const panelProps = panelPropsForActions;\n\n      if (!panelPluginKind || !panelProps) {\n        if (!cancelled) {\n          setPluginActions([]);\n        }\n        return;\n      }\n\n      try {\n        // Add defensive check for getPlugin availability\n        if (!getPlugin || typeof getPlugin !== 'function') {\n          if (!cancelled) {\n            setPluginActions([]);\n          }\n          return;\n        }\n\n        const plugin = await getPlugin('Panel', panelPluginKind);\n\n        if (cancelled) return;\n\n        // More defensive checking for plugin and actions\n        if (\n          !plugin ||\n          typeof plugin !== 'object' ||\n          !plugin.actions ||\n          !Array.isArray(plugin.actions) ||\n          plugin.actions.length === 0\n        ) {\n          if (!cancelled) {\n            setPluginActions([]);\n          }\n          return;\n        }\n\n        // Render plugin actions in header location\n        const headerActions = plugin.actions\n          .filter((action) => !action.location || action.location === 'header')\n          .map((action, index): ReactNode | null => {\n            const ActionComponent = action.component;\n            try {\n              // eslint-disable-next-line @typescript-eslint/no-explicit-any\n              return <ActionComponent key={`plugin-action-${index}`} {...(panelProps as any)} />;\n            } catch (error) {\n              console.warn(`Failed to render plugin action ${index}:`, error);\n              return null;\n            }\n          })\n          .filter((item): item is ReactNode => Boolean(item));\n\n        if (!cancelled) {\n          setPluginActions(headerActions);\n        }\n      } catch (error) {\n        if (!cancelled) {\n          console.warn('Failed to load plugin actions:', error);\n          setPluginActions([]);\n        }\n      }\n    };\n\n    // Use setTimeout to defer the async operation to the next tick\n    const timeoutId = setTimeout(() => {\n      loadPluginActions();\n    }, 0);\n\n    return (): void => {\n      cancelled = true;\n      clearTimeout(timeoutId);\n    };\n  }, [definition.spec.plugin.kind, panelPropsForActions, getPlugin]);\n\n  const handleMouseEnter: CardProps['onMouseEnter'] = (e) => {\n    onMouseEnter?.(e);\n  };\n\n  const handleMouseLeave: CardProps['onMouseLeave'] = (e) => {\n    onMouseLeave?.(e);\n  };\n\n  return (\n    <Card\n      component=\"section\"\n      sx={combineSx(\n        {\n          width: '100%',\n          height: '100%',\n          display: 'flex',\n          flexFlow: 'column nowrap',\n          ':hover': { '--panel-hover': 'block' },\n        },\n        sx\n      )}\n      variant=\"outlined\"\n      onMouseEnter={handleMouseEnter}\n      onMouseLeave={handleMouseLeave}\n      aria-labelledby={headerId}\n      aria-describedby={headerId}\n      data-testid=\"panel\"\n      {...others}\n    >\n      {!panelOptions?.hideHeader && (\n        <PanelHeader\n          extra={panelOptions?.extra?.({ panelDefinition: definition, panelGroupItemId })}\n          id={headerId}\n          title={definition.spec.display.name}\n          description={definition.spec.display.description}\n          queryResults={queryResults}\n          readHandlers={readHandlers}\n          editHandlers={editHandlers}\n          viewQueriesHandler={viewQueriesHandler}\n          links={definition.spec.links}\n          pluginActions={pluginActions}\n          sx={{ paddingX: `${chartsTheme.container.padding.default}px` }}\n        />\n      )}\n      <CardContent\n        component=\"figure\"\n        sx={{\n          position: 'relative',\n          overflow: 'hidden',\n          flexGrow: 1,\n          margin: 0,\n          padding: 0,\n          // Override MUI default style for last-child\n          ':last-child': {\n            padding: 0,\n          },\n        }}\n        ref={setContentElement}\n      >\n        <ErrorBoundary FallbackComponent={ErrorAlert} resetKeys={[definition.spec, queryResults]}>\n          <PanelContent\n            definition={definition}\n            panelPluginKind={definition.spec.plugin.kind}\n            spec={definition.spec.plugin.spec}\n            contentDimensions={contentDimensions}\n            queryResults={queryResults}\n          />\n        </ErrorBoundary>\n      </CardContent>\n    </Card>\n  );\n});\n"],"names":["Card","CardContent","ErrorAlert","ErrorBoundary","combineSx","useChartsTheme","useId","useDataQueriesContext","usePluginRegistry","memo","useMemo","useState","useEffect","useResizeObserver","PanelContent","PanelHeader","Panel","props","definition","readHandlers","editHandlers","onMouseEnter","onMouseLeave","sx","panelOptions","panelGroupItemId","viewQueriesHandler","others","generatedPanelId","headerId","contentElement","setContentElement","width","height","ref","contentDimensions","undefined","chartsTheme","queryResults","getPlugin","panelPropsForActions","spec","plugin","map","query","data","pluginActions","setPluginActions","cancelled","loadPluginActions","panelPluginKind","kind","panelProps","actions","Array","isArray","length","headerActions","filter","action","location","index","ActionComponent","component","error","console","warn","item","Boolean","timeoutId","setTimeout","clearTimeout","handleMouseEnter","e","handleMouseLeave","display","flexFlow","variant","aria-labelledby","aria-describedby","data-testid","hideHeader","extra","panelDefinition","id","title","name","description","links","paddingX","container","padding","default","position","overflow","flexGrow","margin","FallbackComponent","resetKeys"],"mappings":"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"}

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

@@ -16,6 +16,9 @@ export interface PanelActionsProps {
         isPanelViewed?: boolean;
         onViewPanelClick: () => void;
     };
+    viewQueriesHandler?: {
+        onClick: () => void;
+    };
     queryResults: QueryData[];
     pluginActions?: ReactNode[];
 }

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

@@ -1 +1 @@
-{"version":3,"file":"PanelActions.d.ts","sourceRoot":"","sources":["../../../src/components/Panel/PanelActions.tsx"],"names":[],"mappings":"AAcA,OAAO,EAAqC,SAAS,EAAqB,MAAM,OAAO,CAAC;AAExF,OAAO,EAAE,SAAS,EAAE,MAAM,2BAA2B,CAAC;AAUtD,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;IAC1B,aAAa,CAAC,EAAE,SAAS,EAAE,CAAC;CAC7B;AASD,eAAO,MAAM,YAAY,EAAE,KAAK,CAAC,EAAE,CAAC,iBAAiB,CA4MpD,CAAC"}
+{"version":3,"file":"PanelActions.d.ts","sourceRoot":"","sources":["../../../src/components/Panel/PanelActions.tsx"],"names":[],"mappings":"AAcA,OAAO,EAAqC,SAAS,EAAqB,MAAM,OAAO,CAAC;AAExF,OAAO,EAAE,SAAS,EAAE,MAAM,2BAA2B,CAAC;AAWtD,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,kBAAkB,CAAC,EAAE;QACnB,OAAO,EAAE,MAAM,IAAI,CAAC;KACrB,CAAC;IACF,YAAY,EAAE,SAAS,EAAE,CAAC;IAC1B,aAAa,CAAC,EAAE,SAAS,EAAE,CAAC;CAC7B;AASD,eAAO,MAAM,YAAY,EAAE,KAAK,CAAC,EAAE,CAAC,iBAAiB,CAgOpD,CAAC"}

package/dist/components/Panel/PanelActions.js

@@ -14,6 +14,7 @@ import { jsx as _jsx, jsxs as _jsxs, Fragment as _Fragment } from "react/jsx-run
 import { Stack, Box, Popover, CircularProgress, styled } from '@mui/material';
 import { isValidElement, useMemo, useState } from 'react';
 import { InfoTooltip } from '@perses-dev/components';
+import DatabaseSearch from 'mdi-material-ui/DatabaseSearch';
 import ArrowCollapseIcon from 'mdi-material-ui/ArrowCollapse';
 import ArrowExpandIcon from 'mdi-material-ui/ArrowExpand';
 import PencilIcon from 'mdi-material-ui/PencilOutline';
@@ -32,7 +33,7 @@ const ConditionalBox = styled(Box)({
     flexGrow: 1,
     justifyContent: 'flex-end'
 });
-export const PanelActions = ({ editHandlers, readHandlers, extra, title, description, descriptionTooltipId, links, queryResults, pluginActions = [] })=>{
+export const PanelActions = ({ editHandlers, readHandlers, viewQueriesHandler, extra, title, description, descriptionTooltipId, links, queryResults, pluginActions = [] })=>{
     const descriptionAction = useMemo(()=>{
         if (description && description.trim().length > 0) {
             return /*#__PURE__*/ _jsx(InfoTooltip, {
@@ -109,6 +110,23 @@ export const PanelActions = ({ editHandlers, readHandlers, extra, title, descrip
         readHandlers,
         title
     ]);
+    const viewQueryAction = useMemo(()=>{
+        if (!viewQueriesHandler?.onClick) return null;
+        return /*#__PURE__*/ _jsx(InfoTooltip, {
+            description: TOOLTIP_TEXT.queryView,
+            children: /*#__PURE__*/ _jsx(HeaderIconButton, {
+                "aria-label": ARIA_LABEL_TEXT.openQueryView(title),
+                size: "small",
+                onClick: viewQueriesHandler.onClick,
+                children: /*#__PURE__*/ _jsx(DatabaseSearch, {
+                    fontSize: "inherit"
+                })
+            })
+        });
+    }, [
+        viewQueriesHandler,
+        title
+    ]);
     const editActions = useMemo(()=>{
         if (editHandlers !== undefined) {
             // If there are edit handlers, always just show the edit buttons
@@ -220,6 +238,7 @@ export const PanelActions = ({ editHandlers, readHandlers, extra, title, descrip
                                     " ",
                                     extraActions,
                                     " ",
+                                    viewQueryAction,
                                     readActions,
                                     " ",
                                     pluginActions,
@@ -251,13 +270,14 @@ export const PanelActions = ({ editHandlers, readHandlers, extra, title, descrip
                     /*#__PURE__*/ _jsxs(OnHover, {
                         children: [
                             extraActions,
-                            " ",
                             readActions,
                             /*#__PURE__*/ _jsxs(OverflowMenu, {
                                 title: title,
                                 children: [
                                     editActions,
                                     " ",
+                                    viewQueryAction,
+                                    " ",
                                     pluginActions
                                 ]
                             }),
@@ -288,7 +308,7 @@ export const PanelActions = ({ editHandlers, readHandlers, extra, title, descrip
                     /*#__PURE__*/ _jsxs(OnHover, {
                         children: [
                             extraActions,
-                            " ",
+                            viewQueryAction,
                             readActions,
                             " ",
                             editActions,

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

@@ -1 +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 { QueryData } from '@perses-dev/plugin-system';\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 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  pluginActions?: ReactNode[];\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  pluginActions = [],\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: 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((): 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 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  // 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} {pluginActions}\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        <OnHover>\n          {extraActions} {readActions}\n          <OverflowMenu title={title}>\n            {editActions} {pluginActions}\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        <OnHover>\n          {extraActions} {readActions} {editActions}\n          {/* Show plugin actions inside a menu if it gets crowded */}\n          {pluginActions.length <= 1 ? pluginActions : <OverflowMenu title={title}>{pluginActions}</OverflowMenu>}\n          {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>): 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        <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","pluginActions","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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"}
+{"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 { 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 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  viewQueriesHandler?: {\n    onClick: () => void;\n  };\n  queryResults: QueryData[];\n  pluginActions?: ReactNode[];\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}) => {\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: 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((): 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  // 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} {viewQueryAction}\n            {readActions} {pluginActions}\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        <OnHover>\n          {extraActions}\n          {readActions}\n          <OverflowMenu title={title}>\n            {editActions} {viewQueryAction} {pluginActions}\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        <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          {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>): 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        <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","DatabaseSearch","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","viewQueriesHandler","extra","title","description","descriptionTooltipId","links","queryResults","pluginActions","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","viewQueryAction","queryView","openQueryView","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/PanelHeader.d.ts

@@ -11,10 +11,11 @@ export interface PanelHeaderProps extends Omit<CardHeaderProps, OmittedProps> {
     links?: Link[];
     extra?: ReactNode;
     queryResults: QueryData[];
+    viewQueriesHandler?: PanelActionsProps['viewQueriesHandler'];
     readHandlers?: PanelActionsProps['readHandlers'];
     editHandlers?: PanelActionsProps['editHandlers'];
     pluginActions?: ReactNode[];
 }
-export declare function PanelHeader({ id, title: rawTitle, description: rawDescription, links, queryResults, readHandlers, editHandlers, sx, extra, pluginActions, ...rest }: PanelHeaderProps): ReactElement;
+export declare function PanelHeader({ id, title: rawTitle, description: rawDescription, links, queryResults, readHandlers, editHandlers, sx, extra, pluginActions, viewQueriesHandler, ...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,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;IACjD,aAAa,CAAC,EAAE,SAAS,EAAE,CAAC;CAC7B;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,aAAa,EACb,GAAG,IAAI,EACR,EAAE,gBAAgB,GAAG,YAAY,CA2DjC"}
+{"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,kBAAkB,CAAC,EAAE,iBAAiB,CAAC,oBAAoB,CAAC,CAAC;IAC7D,YAAY,CAAC,EAAE,iBAAiB,CAAC,cAAc,CAAC,CAAC;IACjD,YAAY,CAAC,EAAE,iBAAiB,CAAC,cAAc,CAAC,CAAC;IACjD,aAAa,CAAC,EAAE,SAAS,EAAE,CAAC;CAC7B;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,aAAa,EACb,kBAAkB,EAClB,GAAG,IAAI,EACR,EAAE,gBAAgB,GAAG,YAAY,CA4DjC"}

package/dist/components/Panel/PanelHeader.js

@@ -16,7 +16,7 @@ import { combineSx } from '@perses-dev/components';
 import { useReplaceVariablesInString } from '@perses-dev/plugin-system';
 import { HEADER_ACTIONS_CONTAINER_NAME } from '../../constants';
 import { PanelActions } from './PanelActions';
-export function PanelHeader({ id, title: rawTitle, description: rawDescription, links, queryResults, readHandlers, editHandlers, sx, extra, pluginActions, ...rest }) {
+export function PanelHeader({ id, title: rawTitle, description: rawDescription, links, queryResults, readHandlers, editHandlers, sx, extra, pluginActions, viewQueriesHandler, ...rest }) {
     const titleElementId = `${id}-title`;
     const descriptionTooltipId = `${id}-description`;
     const title = useReplaceVariablesInString(rawTitle);
@@ -53,6 +53,7 @@ export function PanelHeader({ id, title: rawTitle, description: rawDescription,
                     links: links,
                     readHandlers: readHandlers,
                     editHandlers: editHandlers,
+                    viewQueriesHandler: viewQueriesHandler,
                     extra: extra,
                     queryResults: queryResults,
                     pluginActions: pluginActions

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

@@ -1 +1 @@
-{"version":3,"sources":["../../../src/components/Panel/PanelHeader.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 { CardHeader, CardHeaderProps, Stack, Typography } from '@mui/material';\nimport { combineSx } from '@perses-dev/components';\nimport { Link } from '@perses-dev/core';\nimport { QueryData, useReplaceVariablesInString } from '@perses-dev/plugin-system';\nimport { ReactElement, ReactNode } from 'react';\nimport { HEADER_ACTIONS_CONTAINER_NAME } from '../../constants';\nimport { PanelActions, PanelActionsProps } from './PanelActions';\n\ntype OmittedProps = 'children' | 'action' | 'title' | 'disableTypography';\n\nexport interface PanelHeaderProps extends Omit<CardHeaderProps, OmittedProps> {\n  id: string;\n  title: string;\n  description?: string;\n  links?: Link[];\n  extra?: ReactNode;\n  queryResults: QueryData[];\n  readHandlers?: PanelActionsProps['readHandlers'];\n  editHandlers?: PanelActionsProps['editHandlers'];\n  pluginActions?: ReactNode[]; // Add pluginActions prop\n}\n\nexport function PanelHeader({\n  id,\n  title: rawTitle,\n  description: rawDescription,\n  links,\n  queryResults,\n  readHandlers,\n  editHandlers,\n  sx,\n  extra,\n  pluginActions,\n  ...rest\n}: PanelHeaderProps): ReactElement {\n  const titleElementId = `${id}-title`;\n  const descriptionTooltipId = `${id}-description`;\n\n  const title = useReplaceVariablesInString(rawTitle) as string;\n  const description = useReplaceVariablesInString(rawDescription);\n\n  return (\n    <CardHeader\n      id={id}\n      component=\"header\"\n      aria-labelledby={titleElementId}\n      aria-describedby={descriptionTooltipId}\n      disableTypography\n      title={\n        <Stack direction=\"row\" alignItems=\"center\" height=\"var(--panel-header-height, 30px)\">\n          <Typography\n            id={titleElementId}\n            variant=\"subtitle1\"\n            sx={{\n              // `minHeight` guarantees that the header has the correct height\n              // when there is no title (i.e. in the preview)\n              lineHeight: '24px',\n              minHeight: '26px',\n              whiteSpace: 'nowrap',\n              overflow: 'hidden',\n              textOverflow: 'ellipsis',\n            }}\n          >\n            {title}\n          </Typography>\n          <PanelActions\n            title={title}\n            description={description}\n            descriptionTooltipId={descriptionTooltipId}\n            links={links}\n            readHandlers={readHandlers}\n            editHandlers={editHandlers}\n            extra={extra}\n            queryResults={queryResults}\n            pluginActions={pluginActions}\n          />\n        </Stack>\n      }\n      sx={combineSx(\n        (theme) => ({\n          containerType: 'inline-size',\n          containerName: HEADER_ACTIONS_CONTAINER_NAME,\n          padding: theme.spacing(1),\n          borderBottom: `solid 1px ${theme.palette.divider}`,\n          '.MuiCardHeader-content': {\n            overflow: 'hidden',\n          },\n        }),\n        sx\n      )}\n      {...rest}\n    />\n  );\n}\n"],"names":["CardHeader","Stack","Typography","combineSx","useReplaceVariablesInString","HEADER_ACTIONS_CONTAINER_NAME","PanelActions","PanelHeader","id","title","rawTitle","description","rawDescription","links","queryResults","readHandlers","editHandlers","sx","extra","pluginActions","rest","titleElementId","descriptionTooltipId","component","aria-labelledby","aria-describedby","disableTypography","direction","alignItems","height","variant","lineHeight","minHeight","whiteSpace","overflow","textOverflow","theme","containerType","containerName","padding","spacing","borderBottom","palette","divider"],"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,UAAU,EAAmBC,KAAK,EAAEC,UAAU,QAAQ,gBAAgB;AAC/E,SAASC,SAAS,QAAQ,yBAAyB;AAEnD,SAAoBC,2BAA2B,QAAQ,4BAA4B;AAEnF,SAASC,6BAA6B,QAAQ,kBAAkB;AAChE,SAASC,YAAY,QAA2B,iBAAiB;AAgBjE,OAAO,SAASC,YAAY,EAC1BC,EAAE,EACFC,OAAOC,QAAQ,EACfC,aAAaC,cAAc,EAC3BC,KAAK,EACLC,YAAY,EACZC,YAAY,EACZC,YAAY,EACZC,EAAE,EACFC,KAAK,EACLC,aAAa,EACb,GAAGC,MACc;IACjB,MAAMC,iBAAiB,GAAGb,GAAG,MAAM,CAAC;IACpC,MAAMc,uBAAuB,GAAGd,GAAG,YAAY,CAAC;IAEhD,MAAMC,QAAQL,4BAA4BM;IAC1C,MAAMC,cAAcP,4BAA4BQ;IAEhD,qBACE,KAACZ;QACCQ,IAAIA;QACJe,WAAU;QACVC,mBAAiBH;QACjBI,oBAAkBH;QAClBI,iBAAiB;QACjBjB,qBACE,MAACR;YAAM0B,WAAU;YAAMC,YAAW;YAASC,QAAO;;8BAChD,KAAC3B;oBACCM,IAAIa;oBACJS,SAAQ;oBACRb,IAAI;wBACF,gEAAgE;wBAChE,+CAA+C;wBAC/Cc,YAAY;wBACZC,WAAW;wBACXC,YAAY;wBACZC,UAAU;wBACVC,cAAc;oBAChB;8BAEC1B;;8BAEH,KAACH;oBACCG,OAAOA;oBACPE,aAAaA;oBACbW,sBAAsBA;oBACtBT,OAAOA;oBACPE,cAAcA;oBACdC,cAAcA;oBACdE,OAAOA;oBACPJ,cAAcA;oBACdK,eAAeA;;;;QAIrBF,IAAId,UACF,CAACiC,QAAW,CAAA;gBACVC,eAAe;gBACfC,eAAejC;gBACfkC,SAASH,MAAMI,OAAO,CAAC;gBACvBC,cAAc,CAAC,UAAU,EAAEL,MAAMM,OAAO,CAACC,OAAO,EAAE;gBAClD,0BAA0B;oBACxBT,UAAU;gBACZ;YACF,CAAA,GACAjB;QAED,GAAGG,IAAI;;AAGd"}
+{"version":3,"sources":["../../../src/components/Panel/PanelHeader.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 { CardHeader, CardHeaderProps, Stack, Typography } from '@mui/material';\nimport { combineSx } from '@perses-dev/components';\nimport { Link } from '@perses-dev/core';\nimport { QueryData, useReplaceVariablesInString } from '@perses-dev/plugin-system';\nimport { ReactElement, ReactNode } from 'react';\nimport { HEADER_ACTIONS_CONTAINER_NAME } from '../../constants';\nimport { PanelActions, PanelActionsProps } from './PanelActions';\n\ntype OmittedProps = 'children' | 'action' | 'title' | 'disableTypography';\n\nexport interface PanelHeaderProps extends Omit<CardHeaderProps, OmittedProps> {\n  id: string;\n  title: string;\n  description?: string;\n  links?: Link[];\n  extra?: ReactNode;\n  queryResults: QueryData[];\n  viewQueriesHandler?: PanelActionsProps['viewQueriesHandler'];\n  readHandlers?: PanelActionsProps['readHandlers'];\n  editHandlers?: PanelActionsProps['editHandlers'];\n  pluginActions?: ReactNode[]; // Add pluginActions prop\n}\n\nexport function PanelHeader({\n  id,\n  title: rawTitle,\n  description: rawDescription,\n  links,\n  queryResults,\n  readHandlers,\n  editHandlers,\n  sx,\n  extra,\n  pluginActions,\n  viewQueriesHandler,\n  ...rest\n}: PanelHeaderProps): ReactElement {\n  const titleElementId = `${id}-title`;\n  const descriptionTooltipId = `${id}-description`;\n\n  const title = useReplaceVariablesInString(rawTitle) as string;\n  const description = useReplaceVariablesInString(rawDescription);\n\n  return (\n    <CardHeader\n      id={id}\n      component=\"header\"\n      aria-labelledby={titleElementId}\n      aria-describedby={descriptionTooltipId}\n      disableTypography\n      title={\n        <Stack direction=\"row\" alignItems=\"center\" height=\"var(--panel-header-height, 30px)\">\n          <Typography\n            id={titleElementId}\n            variant=\"subtitle1\"\n            sx={{\n              // `minHeight` guarantees that the header has the correct height\n              // when there is no title (i.e. in the preview)\n              lineHeight: '24px',\n              minHeight: '26px',\n              whiteSpace: 'nowrap',\n              overflow: 'hidden',\n              textOverflow: 'ellipsis',\n            }}\n          >\n            {title}\n          </Typography>\n          <PanelActions\n            title={title}\n            description={description}\n            descriptionTooltipId={descriptionTooltipId}\n            links={links}\n            readHandlers={readHandlers}\n            editHandlers={editHandlers}\n            viewQueriesHandler={viewQueriesHandler}\n            extra={extra}\n            queryResults={queryResults}\n            pluginActions={pluginActions}\n          />\n        </Stack>\n      }\n      sx={combineSx(\n        (theme) => ({\n          containerType: 'inline-size',\n          containerName: HEADER_ACTIONS_CONTAINER_NAME,\n          padding: theme.spacing(1),\n          borderBottom: `solid 1px ${theme.palette.divider}`,\n          '.MuiCardHeader-content': {\n            overflow: 'hidden',\n          },\n        }),\n        sx\n      )}\n      {...rest}\n    />\n  );\n}\n"],"names":["CardHeader","Stack","Typography","combineSx","useReplaceVariablesInString","HEADER_ACTIONS_CONTAINER_NAME","PanelActions","PanelHeader","id","title","rawTitle","description","rawDescription","links","queryResults","readHandlers","editHandlers","sx","extra","pluginActions","viewQueriesHandler","rest","titleElementId","descriptionTooltipId","component","aria-labelledby","aria-describedby","disableTypography","direction","alignItems","height","variant","lineHeight","minHeight","whiteSpace","overflow","textOverflow","theme","containerType","containerName","padding","spacing","borderBottom","palette","divider"],"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,UAAU,EAAmBC,KAAK,EAAEC,UAAU,QAAQ,gBAAgB;AAC/E,SAASC,SAAS,QAAQ,yBAAyB;AAEnD,SAAoBC,2BAA2B,QAAQ,4BAA4B;AAEnF,SAASC,6BAA6B,QAAQ,kBAAkB;AAChE,SAASC,YAAY,QAA2B,iBAAiB;AAiBjE,OAAO,SAASC,YAAY,EAC1BC,EAAE,EACFC,OAAOC,QAAQ,EACfC,aAAaC,cAAc,EAC3BC,KAAK,EACLC,YAAY,EACZC,YAAY,EACZC,YAAY,EACZC,EAAE,EACFC,KAAK,EACLC,aAAa,EACbC,kBAAkB,EAClB,GAAGC,MACc;IACjB,MAAMC,iBAAiB,GAAGd,GAAG,MAAM,CAAC;IACpC,MAAMe,uBAAuB,GAAGf,GAAG,YAAY,CAAC;IAEhD,MAAMC,QAAQL,4BAA4BM;IAC1C,MAAMC,cAAcP,4BAA4BQ;IAEhD,qBACE,KAACZ;QACCQ,IAAIA;QACJgB,WAAU;QACVC,mBAAiBH;QACjBI,oBAAkBH;QAClBI,iBAAiB;QACjBlB,qBACE,MAACR;YAAM2B,WAAU;YAAMC,YAAW;YAASC,QAAO;;8BAChD,KAAC5B;oBACCM,IAAIc;oBACJS,SAAQ;oBACRd,IAAI;wBACF,gEAAgE;wBAChE,+CAA+C;wBAC/Ce,YAAY;wBACZC,WAAW;wBACXC,YAAY;wBACZC,UAAU;wBACVC,cAAc;oBAChB;8BAEC3B;;8BAEH,KAACH;oBACCG,OAAOA;oBACPE,aAAaA;oBACbY,sBAAsBA;oBACtBV,OAAOA;oBACPE,cAAcA;oBACdC,cAAcA;oBACdI,oBAAoBA;oBACpBF,OAAOA;oBACPJ,cAAcA;oBACdK,eAAeA;;;;QAIrBF,IAAId,UACF,CAACkC,QAAW,CAAA;gBACVC,eAAe;gBACfC,eAAelC;gBACfmC,SAASH,MAAMI,OAAO,CAAC;gBACvBC,cAAc,CAAC,UAAU,EAAEL,MAAMM,OAAO,CAACC,OAAO,EAAE;gBAClD,0BAA0B;oBACxBT,UAAU;gBACZ;YACF,CAAA,GACAlB;QAED,GAAGI,IAAI;;AAGd"}

package/dist/constants/user-interface-text.d.ts

@@ -17,6 +17,7 @@ export declare const TOOLTIP_TEXT: {
     movePanel: string;
     refreshVariableValues: string;
     copyVariableValues: string;
+    queryView: string;
 };
 export declare const ARIA_LABEL_TEXT: {
     addPanelToGroup: (groupName: string) => string;
@@ -30,5 +31,6 @@ export declare const ARIA_LABEL_TEXT: {
     deletePanel: (panelName: string) => string;
     showPanelActions: (panelName: string) => string;
     movePanel: (panelName: string) => string;
+    openQueryView: (panelName: string) => string;
 };
 //# sourceMappingURL=user-interface-text.d.ts.map

package/dist/constants/user-interface-text.d.ts.map

@@ -1 +1 @@
-{"version":3,"file":"user-interface-text.d.ts","sourceRoot":"","sources":["../../src/constants/user-interface-text.ts"],"names":[],"mappings":"AAaA,eAAO,MAAM,YAAY;;;;;;;;;;;;;;;;;;;CAuBxB,CAAC;AAEF,eAAO,MAAM,eAAe;iCAEG,MAAM,KAAG,MAAM;6BACnB,MAAM,KAAG,MAAM;2BACjB,MAAM,KAAG,MAAM;+BACX,MAAM,KAAG,MAAM;6BACjB,MAAM,KAAG,MAAM;2BAEjB,MAAM,KAAG,MAAM;2BACf,MAAM,KAAG,MAAM;gCACV,MAAM,KAAG,MAAM;6BAClB,MAAM,KAAG,MAAM;kCACV,MAAM,KAAG,MAAM;2BACtB,MAAM,KAAG,MAAM;CACvC,CAAC"}
+{"version":3,"file":"user-interface-text.d.ts","sourceRoot":"","sources":["../../src/constants/user-interface-text.ts"],"names":[],"mappings":"AAaA,eAAO,MAAM,YAAY;;;;;;;;;;;;;;;;;;;;CAwBxB,CAAC;AAEF,eAAO,MAAM,eAAe;iCAEG,MAAM,KAAG,MAAM;6BACnB,MAAM,KAAG,MAAM;2BACjB,MAAM,KAAG,MAAM;+BACX,MAAM,KAAG,MAAM;6BACjB,MAAM,KAAG,MAAM;2BAEjB,MAAM,KAAG,MAAM;2BACf,MAAM,KAAG,MAAM;gCACV,MAAM,KAAG,MAAM;6BAClB,MAAM,KAAG,MAAM;kCACV,MAAM,KAAG,MAAM;2BACtB,MAAM,KAAG,MAAM;+BACX,MAAM,KAAG,MAAM;CAC3C,CAAC"}

package/dist/constants/user-interface-text.js

@@ -32,7 +32,8 @@ export const TOOLTIP_TEXT = {
     movePanel: 'Move',
     // Variable editor buttons
     refreshVariableValues: 'Refresh values',
-    copyVariableValues: 'Copy values to clipboard'
+    copyVariableValues: 'Copy values to clipboard',
+    queryView: 'Open query view'
 };
 export const ARIA_LABEL_TEXT = {
     // Group buttons
@@ -47,7 +48,8 @@ export const ARIA_LABEL_TEXT = {
     duplicatePanel: (panelName)=>`duplicate panel ${panelName}`,
     deletePanel: (panelName)=>`delete panel ${panelName}`,
     showPanelActions: (panelName)=>`show panel actions for ${panelName}`,
-    movePanel: (panelName)=>`move panel ${panelName}`
+    movePanel: (panelName)=>`move panel ${panelName}`,
+    openQueryView: (panelName)=>`open query view for panel ${panelName}`
 };
 
 //# sourceMappingURL=user-interface-text.js.map

package/dist/constants/user-interface-text.js.map

@@ -1 +1 @@
-{"version":3,"sources":["../../src/constants/user-interface-text.ts"],"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\nexport const TOOLTIP_TEXT = {\n  // Toolbar buttons\n  addPanel: 'Add panel',\n  addGroup: 'Add panel group',\n  editDatasources: 'Edit datasources',\n  editJson: 'Edit JSON',\n  editVariables: 'Edit variables',\n  viewJson: 'View JSON',\n  // Group buttons\n  addPanelToGroup: 'Add panel to group',\n  deleteGroup: 'Delete group',\n  editGroup: 'Edit group',\n  moveGroupDown: 'Move group down',\n  moveGroupUp: 'Move group up',\n  // Panel buttons\n  viewPanel: 'Toggle View Mode',\n  editPanel: 'Edit',\n  duplicatePanel: 'Duplicate',\n  deletePanel: 'Delete',\n  movePanel: 'Move',\n  // Variable editor buttons\n  refreshVariableValues: 'Refresh values',\n  copyVariableValues: 'Copy values to clipboard',\n};\n\nexport const ARIA_LABEL_TEXT = {\n  // Group buttons\n  addPanelToGroup: (groupName: string): string => `add panel to group ${groupName}`,\n  deleteGroup: (groupName: string): string => `delete group ${groupName}`,\n  editGroup: (groupName: string): string => `edit group ${groupName}`,\n  moveGroupDown: (groupName: string): string => `move group ${groupName} down`,\n  moveGroupUp: (groupName: string): string => `move group ${groupName} up`,\n  // Panel buttons\n  viewPanel: (panelName: string): string => `toggle panel ${panelName} view mode`,\n  editPanel: (panelName: string): string => `edit panel ${panelName}`,\n  duplicatePanel: (panelName: string): string => `duplicate panel ${panelName}`,\n  deletePanel: (panelName: string): string => `delete panel ${panelName}`,\n  showPanelActions: (panelName: string): string => `show panel actions for ${panelName}`,\n  movePanel: (panelName: string): string => `move panel ${panelName}`,\n};\n"],"names":["TOOLTIP_TEXT","addPanel","addGroup","editDatasources","editJson","editVariables","viewJson","addPanelToGroup","deleteGroup","editGroup","moveGroupDown","moveGroupUp","viewPanel","editPanel","duplicatePanel","deletePanel","movePanel","refreshVariableValues","copyVariableValues","ARIA_LABEL_TEXT","groupName","panelName","showPanelActions"],"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,OAAO,MAAMA,eAAe;IAC1B,kBAAkB;IAClBC,UAAU;IACVC,UAAU;IACVC,iBAAiB;IACjBC,UAAU;IACVC,eAAe;IACfC,UAAU;IACV,gBAAgB;IAChBC,iBAAiB;IACjBC,aAAa;IACbC,WAAW;IACXC,eAAe;IACfC,aAAa;IACb,gBAAgB;IAChBC,WAAW;IACXC,WAAW;IACXC,gBAAgB;IAChBC,aAAa;IACbC,WAAW;IACX,0BAA0B;IAC1BC,uBAAuB;IACvBC,oBAAoB;AACtB,EAAE;AAEF,OAAO,MAAMC,kBAAkB;IAC7B,gBAAgB;IAChBZ,iBAAiB,CAACa,YAA8B,CAAC,mBAAmB,EAAEA,WAAW;IACjFZ,aAAa,CAACY,YAA8B,CAAC,aAAa,EAAEA,WAAW;IACvEX,WAAW,CAACW,YAA8B,CAAC,WAAW,EAAEA,WAAW;IACnEV,eAAe,CAACU,YAA8B,CAAC,WAAW,EAAEA,UAAU,KAAK,CAAC;IAC5ET,aAAa,CAACS,YAA8B,CAAC,WAAW,EAAEA,UAAU,GAAG,CAAC;IACxE,gBAAgB;IAChBR,WAAW,CAACS,YAA8B,CAAC,aAAa,EAAEA,UAAU,UAAU,CAAC;IAC/ER,WAAW,CAACQ,YAA8B,CAAC,WAAW,EAAEA,WAAW;IACnEP,gBAAgB,CAACO,YAA8B,CAAC,gBAAgB,EAAEA,WAAW;IAC7EN,aAAa,CAACM,YAA8B,CAAC,aAAa,EAAEA,WAAW;IACvEC,kBAAkB,CAACD,YAA8B,CAAC,uBAAuB,EAAEA,WAAW;IACtFL,WAAW,CAACK,YAA8B,CAAC,WAAW,EAAEA,WAAW;AACrE,EAAE"}
+{"version":3,"sources":["../../src/constants/user-interface-text.ts"],"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\nexport const TOOLTIP_TEXT = {\n  // Toolbar buttons\n  addPanel: 'Add panel',\n  addGroup: 'Add panel group',\n  editDatasources: 'Edit datasources',\n  editJson: 'Edit JSON',\n  editVariables: 'Edit variables',\n  viewJson: 'View JSON',\n  // Group buttons\n  addPanelToGroup: 'Add panel to group',\n  deleteGroup: 'Delete group',\n  editGroup: 'Edit group',\n  moveGroupDown: 'Move group down',\n  moveGroupUp: 'Move group up',\n  // Panel buttons\n  viewPanel: 'Toggle View Mode',\n  editPanel: 'Edit',\n  duplicatePanel: 'Duplicate',\n  deletePanel: 'Delete',\n  movePanel: 'Move',\n  // Variable editor buttons\n  refreshVariableValues: 'Refresh values',\n  copyVariableValues: 'Copy values to clipboard',\n  queryView: 'Open query view',\n};\n\nexport const ARIA_LABEL_TEXT = {\n  // Group buttons\n  addPanelToGroup: (groupName: string): string => `add panel to group ${groupName}`,\n  deleteGroup: (groupName: string): string => `delete group ${groupName}`,\n  editGroup: (groupName: string): string => `edit group ${groupName}`,\n  moveGroupDown: (groupName: string): string => `move group ${groupName} down`,\n  moveGroupUp: (groupName: string): string => `move group ${groupName} up`,\n  // Panel buttons\n  viewPanel: (panelName: string): string => `toggle panel ${panelName} view mode`,\n  editPanel: (panelName: string): string => `edit panel ${panelName}`,\n  duplicatePanel: (panelName: string): string => `duplicate panel ${panelName}`,\n  deletePanel: (panelName: string): string => `delete panel ${panelName}`,\n  showPanelActions: (panelName: string): string => `show panel actions for ${panelName}`,\n  movePanel: (panelName: string): string => `move panel ${panelName}`,\n  openQueryView: (panelName: string): string => `open query view for panel ${panelName}`,\n};\n"],"names":["TOOLTIP_TEXT","addPanel","addGroup","editDatasources","editJson","editVariables","viewJson","addPanelToGroup","deleteGroup","editGroup","moveGroupDown","moveGroupUp","viewPanel","editPanel","duplicatePanel","deletePanel","movePanel","refreshVariableValues","copyVariableValues","queryView","ARIA_LABEL_TEXT","groupName","panelName","showPanelActions","openQueryView"],"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,OAAO,MAAMA,eAAe;IAC1B,kBAAkB;IAClBC,UAAU;IACVC,UAAU;IACVC,iBAAiB;IACjBC,UAAU;IACVC,eAAe;IACfC,UAAU;IACV,gBAAgB;IAChBC,iBAAiB;IACjBC,aAAa;IACbC,WAAW;IACXC,eAAe;IACfC,aAAa;IACb,gBAAgB;IAChBC,WAAW;IACXC,WAAW;IACXC,gBAAgB;IAChBC,aAAa;IACbC,WAAW;IACX,0BAA0B;IAC1BC,uBAAuB;IACvBC,oBAAoB;IACpBC,WAAW;AACb,EAAE;AAEF,OAAO,MAAMC,kBAAkB;IAC7B,gBAAgB;IAChBb,iBAAiB,CAACc,YAA8B,CAAC,mBAAmB,EAAEA,WAAW;IACjFb,aAAa,CAACa,YAA8B,CAAC,aAAa,EAAEA,WAAW;IACvEZ,WAAW,CAACY,YAA8B,CAAC,WAAW,EAAEA,WAAW;IACnEX,eAAe,CAACW,YAA8B,CAAC,WAAW,EAAEA,UAAU,KAAK,CAAC;IAC5EV,aAAa,CAACU,YAA8B,CAAC,WAAW,EAAEA,UAAU,GAAG,CAAC;IACxE,gBAAgB;IAChBT,WAAW,CAACU,YAA8B,CAAC,aAAa,EAAEA,UAAU,UAAU,CAAC;IAC/ET,WAAW,CAACS,YAA8B,CAAC,WAAW,EAAEA,WAAW;IACnER,gBAAgB,CAACQ,YAA8B,CAAC,gBAAgB,EAAEA,WAAW;IAC7EP,aAAa,CAACO,YAA8B,CAAC,aAAa,EAAEA,WAAW;IACvEC,kBAAkB,CAACD,YAA8B,CAAC,uBAAuB,EAAEA,WAAW;IACtFN,WAAW,CAACM,YAA8B,CAAC,WAAW,EAAEA,WAAW;IACnEE,eAAe,CAACF,YAA8B,CAAC,0BAA0B,EAAEA,WAAW;AACxF,EAAE"}

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@perses-dev/dashboards",
-  "version": "0.52.0-beta.4",
+  "version": "0.52.0-beta.5",
   "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.52.0-beta.4",
-    "@perses-dev/core": "0.52.0-beta.4",
-    "@perses-dev/plugin-system": "0.52.0-beta.4",
+    "@perses-dev/components": "0.52.0-beta.5",
+    "@perses-dev/core": "0.52.0-beta.5",
+    "@perses-dev/plugin-system": "0.52.0-beta.5",
     "@types/react-grid-layout": "^1.3.2",
     "date-fns": "^4.1.0",
     "immer": "^10.1.1",
@@ -46,7 +46,7 @@
     "zustand": "^4.3.3"
   },
   "devDependencies": {
-    "@perses-dev/internal-utils": "0.52.0-beta.4",
+    "@perses-dev/internal-utils": "0.52.0-beta.5",
     "history": "^5.3.0",
     "intersection-observer": "^0.12.2"
   },