@perses-dev/dashboards 0.0.0-snapshot-time-zone-selector-946f408 → 0.0.0-snapshot-panel-actions-520389b

package/dist/cjs/components/DashboardToolbar/DashboardToolbar.js

@@ -24,7 +24,6 @@ const _jsxruntime = require("react/jsx-runtime");
 const _material = require("@mui/material");
 const _components = require("@perses-dev/components");
 const _pluginsystem = require("@perses-dev/plugin-system");
-const _react = require("react");
 const _context = require("../../context");
 const _AddPanelButton = require("../AddPanelButton");
 const _AddGroupButton = require("../AddGroupButton");
@@ -40,126 +39,116 @@ const DashboardToolbar = (props)=>{
     const { isEditMode } = (0, _context.useEditMode)();
     const isBiggerThanSm = (0, _material.useMediaQuery)((0, _material.useTheme)().breakpoints.up('sm'));
     const isBiggerThanMd = (0, _material.useMediaQuery)((0, _material.useTheme)().breakpoints.up('md'));
-    const { timeZone, setTimeZone } = (0, _pluginsystem.useTimeZone)();
-    const timeZoneOptions = (0, _components.getTimeZoneOptions)();
     const dashboardTitle = dashboardTitleComponent ? dashboardTitleComponent : /*#__PURE__*/ (0, _jsxruntime.jsx)(_material.Typography, {
         variant: "h2",
         children: dashboardName
     });
     const testId = 'dashboard-toolbar';
-    const handleTimeZoneChange = (0, _react.useCallback)((timeZoneOption)=>{
-        setTimeZone(timeZoneOption.value);
-    }, [
-        setTimeZone
-    ]);
-    return /*#__PURE__*/ (0, _jsxruntime.jsxs)(_material.Stack, {
-        "data-testid": testId,
-        children: [
-            /*#__PURE__*/ (0, _jsxruntime.jsxs)(_material.Box, {
-                px: 2,
-                py: 1.5,
-                display: "flex",
-                sx: {
-                    backgroundColor: (theme)=>theme.palette.primary.main + (isEditMode ? '30' : '0')
-                },
-                children: [
-                    dashboardTitle,
-                    isEditMode ? /*#__PURE__*/ (0, _jsxruntime.jsxs)(_material.Stack, {
-                        direction: "row",
-                        gap: 1,
-                        ml: "auto",
-                        children: [
-                            isReadonly && /*#__PURE__*/ (0, _jsxruntime.jsx)(_material.Alert, {
-                                severity: "warning",
-                                sx: {
-                                    backgroundColor: 'transparent',
-                                    padding: 0
-                                },
-                                children: "Dashboard managed via code only. Download JSON and commit changes to save."
-                            }),
-                            /*#__PURE__*/ (0, _jsxruntime.jsxs)(_material.Stack, {
-                                direction: "row",
-                                spacing: 0.5,
-                                ml: 1,
-                                whiteSpace: "nowrap",
-                                children: [
-                                    isVariableEnabled && /*#__PURE__*/ (0, _jsxruntime.jsx)(_Variables.EditVariablesButton, {}),
-                                    isDatasourceEnabled && /*#__PURE__*/ (0, _jsxruntime.jsx)(_Datasources.EditDatasourcesButton, {}),
-                                    /*#__PURE__*/ (0, _jsxruntime.jsx)(_AddPanelButton.AddPanelButton, {}),
-                                    /*#__PURE__*/ (0, _jsxruntime.jsx)(_AddGroupButton.AddGroupButton, {})
-                                ]
-                            }),
-                            /*#__PURE__*/ (0, _jsxruntime.jsx)(_SaveDashboardButton.SaveDashboardButton, {
-                                onSave: onSave,
-                                isDisabled: isReadonly
-                            }),
-                            /*#__PURE__*/ (0, _jsxruntime.jsx)(_material.Button, {
-                                variant: "outlined",
-                                onClick: onCancelButtonClick,
-                                children: "Cancel"
-                            })
-                        ]
-                    }) : /*#__PURE__*/ (0, _jsxruntime.jsx)(_jsxruntime.Fragment, {
-                        children: isBiggerThanSm && /*#__PURE__*/ (0, _jsxruntime.jsx)(_material.Stack, {
+    return /*#__PURE__*/ (0, _jsxruntime.jsx)(_jsxruntime.Fragment, {
+        children: /*#__PURE__*/ (0, _jsxruntime.jsxs)(_material.Stack, {
+            "data-testid": testId,
+            children: [
+                /*#__PURE__*/ (0, _jsxruntime.jsxs)(_material.Box, {
+                    px: 2,
+                    py: 1.5,
+                    display: "flex",
+                    sx: {
+                        backgroundColor: (theme)=>theme.palette.primary.main + (isEditMode ? '30' : '0')
+                    },
+                    children: [
+                        dashboardTitle,
+                        isEditMode ? /*#__PURE__*/ (0, _jsxruntime.jsxs)(_material.Stack, {
                             direction: "row",
                             gap: 1,
                             ml: "auto",
-                            children: /*#__PURE__*/ (0, _jsxruntime.jsx)(_EditButton.EditButton, {
-                                onClick: onEditButtonClick
-                            })
-                        })
-                    })
-                ]
-            }),
-            /*#__PURE__*/ (0, _jsxruntime.jsxs)(_material.Box, {
-                sx: {
-                    display: 'flex',
-                    width: '100%',
-                    alignItems: 'start',
-                    padding: (theme)=>theme.spacing(1, 2, 0, 2),
-                    flexDirection: isBiggerThanMd ? 'row' : 'column',
-                    flexWrap: 'nowrap',
-                    gap: 1
-                },
-                children: [
-                    /*#__PURE__*/ (0, _jsxruntime.jsx)(_material.Box, {
-                        width: "100%",
-                        children: /*#__PURE__*/ (0, _jsxruntime.jsx)(_components.ErrorBoundary, {
-                            FallbackComponent: _components.ErrorAlert,
-                            children: /*#__PURE__*/ (0, _jsxruntime.jsx)(_DashboardStickyToolbar.DashboardStickyToolbar, {
-                                initialVariableIsSticky: initialVariableIsSticky,
-                                sx: {
-                                    backgroundColor: ({ palette })=>palette.background.default
-                                }
-                            })
-                        })
-                    }),
-                    /*#__PURE__*/ (0, _jsxruntime.jsx)(_material.Stack, {
-                        direction: "row",
-                        ml: "auto",
-                        flexWrap: "wrap",
-                        justifyContent: "end",
-                        children: /*#__PURE__*/ (0, _jsxruntime.jsxs)(_material.Stack, {
-                            direction: "row",
-                            spacing: 1,
-                            mt: 1,
-                            ml: 1,
                             children: [
-                                /*#__PURE__*/ (0, _jsxruntime.jsx)(_pluginsystem.TimeRangeControls, {}),
-                                /*#__PURE__*/ (0, _jsxruntime.jsx)(_components.TimeZoneSelector, {
-                                    timeZoneOptions: timeZoneOptions,
-                                    value: timeZone,
-                                    onChange: handleTimeZoneChange
+                                isReadonly && /*#__PURE__*/ (0, _jsxruntime.jsx)(_material.Alert, {
+                                    severity: "warning",
+                                    sx: {
+                                        backgroundColor: 'transparent',
+                                        padding: 0
+                                    },
+                                    children: "Dashboard managed via code only. Download JSON and commit changes to save."
                                 }),
-                                /*#__PURE__*/ (0, _jsxruntime.jsx)(_DownloadButton.DownloadButton, {}),
-                                /*#__PURE__*/ (0, _jsxruntime.jsx)(_EditJsonButton.EditJsonButton, {
-                                    isReadonly: !isEditMode
+                                /*#__PURE__*/ (0, _jsxruntime.jsxs)(_material.Stack, {
+                                    direction: "row",
+                                    spacing: 0.5,
+                                    ml: 1,
+                                    whiteSpace: "nowrap",
+                                    children: [
+                                        isVariableEnabled && /*#__PURE__*/ (0, _jsxruntime.jsx)(_Variables.EditVariablesButton, {}),
+                                        isDatasourceEnabled && /*#__PURE__*/ (0, _jsxruntime.jsx)(_Datasources.EditDatasourcesButton, {}),
+                                        /*#__PURE__*/ (0, _jsxruntime.jsx)(_AddPanelButton.AddPanelButton, {}),
+                                        /*#__PURE__*/ (0, _jsxruntime.jsx)(_AddGroupButton.AddGroupButton, {})
+                                    ]
+                                }),
+                                /*#__PURE__*/ (0, _jsxruntime.jsx)(_SaveDashboardButton.SaveDashboardButton, {
+                                    onSave: onSave,
+                                    isDisabled: isReadonly
+                                }),
+                                /*#__PURE__*/ (0, _jsxruntime.jsx)(_material.Button, {
+                                    variant: "outlined",
+                                    onClick: onCancelButtonClick,
+                                    children: "Cancel"
                                 })
                             ]
+                        }) : /*#__PURE__*/ (0, _jsxruntime.jsx)(_jsxruntime.Fragment, {
+                            children: isBiggerThanSm && /*#__PURE__*/ (0, _jsxruntime.jsx)(_material.Stack, {
+                                direction: "row",
+                                gap: 1,
+                                ml: "auto",
+                                children: /*#__PURE__*/ (0, _jsxruntime.jsx)(_EditButton.EditButton, {
+                                    onClick: onEditButtonClick
+                                })
+                            })
+                        })
+                    ]
+                }),
+                /*#__PURE__*/ (0, _jsxruntime.jsxs)(_material.Box, {
+                    sx: {
+                        display: 'flex',
+                        width: '100%',
+                        alignItems: 'start',
+                        padding: (theme)=>theme.spacing(1, 2, 0, 2),
+                        flexDirection: isBiggerThanMd ? 'row' : 'column',
+                        flexWrap: 'nowrap',
+                        gap: 1
+                    },
+                    children: [
+                        /*#__PURE__*/ (0, _jsxruntime.jsx)(_material.Box, {
+                            width: "100%",
+                            children: /*#__PURE__*/ (0, _jsxruntime.jsx)(_components.ErrorBoundary, {
+                                FallbackComponent: _components.ErrorAlert,
+                                children: /*#__PURE__*/ (0, _jsxruntime.jsx)(_DashboardStickyToolbar.DashboardStickyToolbar, {
+                                    initialVariableIsSticky: initialVariableIsSticky,
+                                    sx: {
+                                        backgroundColor: ({ palette })=>palette.background.default
+                                    }
+                                })
+                            })
+                        }),
+                        /*#__PURE__*/ (0, _jsxruntime.jsx)(_material.Stack, {
+                            direction: "row",
+                            ml: "auto",
+                            flexWrap: "wrap",
+                            justifyContent: "end",
+                            children: /*#__PURE__*/ (0, _jsxruntime.jsxs)(_material.Stack, {
+                                direction: "row",
+                                spacing: 1,
+                                mt: 1,
+                                ml: 1,
+                                children: [
+                                    /*#__PURE__*/ (0, _jsxruntime.jsx)(_pluginsystem.TimeRangeControls, {}),
+                                    /*#__PURE__*/ (0, _jsxruntime.jsx)(_DownloadButton.DownloadButton, {}),
+                                    /*#__PURE__*/ (0, _jsxruntime.jsx)(_EditJsonButton.EditJsonButton, {
+                                        isReadonly: !isEditMode
+                                    })
+                                ]
+                            })
                         })
-                    })
-                ]
-            })
-        ]
+                    ]
+                })
+            ]
+        })
     });
 };

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

@@ -33,8 +33,41 @@ function _interop_require_default(obj) {
         default: obj
     };
 }
+// Function to extract project name from URL (kept as fallback)
+const extractProjectNameFromUrl = ()=>{
+    try {
+        if (process.env.NODE_ENV === 'test') {
+            return 'test-project';
+        }
+        if (typeof window !== 'undefined' && (window.location.hostname === 'localhost' || window.location.hostname === '127.0.0.1')) {
+            const urlPath = window.location.pathname;
+            if (urlPath === '/' || urlPath === '') {
+                return 'dev-project';
+            }
+        }
+        const urlPath = window.location.pathname;
+        // Split the path and look for the project name after "/projects/"
+        const pathSegments = urlPath.split('/').filter((segment)=>segment.length > 0);
+        const projectsIndex = pathSegments.findIndex((segment)=>segment === 'projects');
+        if (projectsIndex !== -1 && projectsIndex + 1 < pathSegments.length) {
+            const projectName = pathSegments[projectsIndex + 1];
+            if (projectName && projectName.trim().length > 0) {
+                return projectName;
+            }
+        }
+        // Fallback: try to extract from URL parameters
+        const urlParams = new URLSearchParams(window.location.search);
+        const projectParam = urlParams.get('project');
+        if (projectParam && projectParam.trim().length > 0) {
+            return projectParam;
+        }
+        return 'unknown-project';
+    } catch  {
+        return 'unknown-project';
+    }
+};
 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, projectName: providedProjectName, ...others } = props;
     // Make sure we have an ID we can use for aria attributes
     const generatedPanelId = (0, _components.useId)('Panel');
     const headerId = `${generatedPanelId}-header`;
@@ -54,6 +87,29 @@ const Panel = /*#__PURE__*/ (0, _react.memo)(function Panel(props) {
     ]);
     const chartsTheme = (0, _components.useChartsTheme)();
     const { queryResults } = (0, _pluginsystem.useDataQueriesContext)();
+    // Use provided project name or extract from URL as fallback
+    const projectName = (0, _react.useMemo)(()=>{
+        return providedProjectName || extractProjectNameFromUrl();
+    }, [
+        providedProjectName
+    ]);
+    const panelPropsForActions = (0, _react.useMemo)(()=>{
+        return {
+            spec: definition.spec.plugin.spec,
+            queryResults: queryResults.map((query)=>({
+                    definition: query.definition,
+                    data: query.data
+                })),
+            contentDimensions,
+            definition,
+            projectName
+        };
+    }, [
+        definition,
+        contentDimensions,
+        queryResults,
+        projectName
+    ]);
     const handleMouseEnter = (e)=>{
         onMouseEnter?.(e);
     };
@@ -88,9 +144,12 @@ const Panel = /*#__PURE__*/ (0, _react.memo)(function Panel(props) {
                 title: definition.spec.display.name,
                 description: definition.spec.display.description,
                 queryResults: queryResults,
+                panelPluginKind: definition.spec.plugin.kind,
                 readHandlers: readHandlers,
                 editHandlers: editHandlers,
                 links: definition.spec.links,
+                projectName: projectName,
+                panelProps: panelPropsForActions,
                 sx: {
                     paddingX: `${chartsTheme.container.padding.default}px`
                 }

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 _pluginsystem = require("@perses-dev/plugin-system");
 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,72 @@ const ConditionalBox = (0, _material.styled)(_material.Box)({
     flexGrow: 1,
     justifyContent: 'flex-end'
 });
-const PanelActions = ({ editHandlers, readHandlers, extra, title, description, descriptionTooltipId, links, queryResults })=>{
+const PanelActions = ({ editHandlers, readHandlers, extra, title, description, descriptionTooltipId, links, queryResults, panelPluginKind, projectName: _propsProjectName, panelProps })=>{
+    const { isFetching, errors } = (0, _pluginsystem.useDataQueriesContext)();
+    const { getPlugin } = (0, _pluginsystem.usePluginRegistry)();
+    const [pluginActions, setPluginActions] = (0, _react.useState)([]);
+    (0, _react.useEffect)(()=>{
+        let cancelled = false;
+        const loadPluginActions = async ()=>{
+            if (!panelPluginKind || !panelProps) {
+                if (!cancelled) {
+                    setPluginActions([]);
+                }
+                return;
+            }
+            try {
+                // Add defensive check for getPlugin availability
+                if (!getPlugin || typeof getPlugin !== 'function') {
+                    if (!cancelled) {
+                        setPluginActions([]);
+                    }
+                    return;
+                }
+                const plugin = await getPlugin('Panel', panelPluginKind);
+                if (cancelled) return;
+                // More defensive checking for plugin and actions
+                if (!plugin || typeof plugin !== 'object' || !plugin.actions || !Array.isArray(plugin.actions) || plugin.actions.length === 0) {
+                    if (!cancelled) {
+                        setPluginActions([]);
+                    }
+                    return;
+                }
+                // Render plugin actions in header location
+                const headerActions = plugin.actions.filter((action)=>!action.location || action.location === 'header').map((action, index)=>{
+                    const ActionComponent = action.component;
+                    try {
+                        // eslint-disable-next-line @typescript-eslint/no-explicit-any
+                        return /*#__PURE__*/ (0, _jsxruntime.jsx)(ActionComponent, {
+                            ...panelProps
+                        }, `plugin-action-${index}`);
+                    } catch (error) {
+                        console.warn(`Failed to render plugin action ${index}:`, error);
+                        return null;
+                    }
+                }).filter((item)=>Boolean(item));
+                if (!cancelled) {
+                    setPluginActions(headerActions);
+                }
+            } catch (error) {
+                if (!cancelled) {
+                    console.warn('Failed to load plugin actions:', error);
+                    setPluginActions([]);
+                }
+            }
+        };
+        // Use setTimeout to defer the async operation to the next tick
+        const timeoutId = setTimeout(()=>{
+            loadPluginActions();
+        }, 0);
+        return ()=>{
+            cancelled = true;
+            clearTimeout(timeoutId);
+        };
+    }, [
+        panelPluginKind,
+        panelProps,
+        getPlugin
+    ]);
     const descriptionAction = (0, _react.useMemo)(()=>{
         if (description && description.trim().length > 0) {
             return /*#__PURE__*/ (0, _jsxruntime.jsx)(_components.InfoTooltip, {
@@ -78,19 +144,23 @@ const PanelActions = ({ editHandlers, readHandlers, extra, title, description, d
     });
     const extraActions = editHandlers === undefined && extra;
     const queryStateIndicator = (0, _react.useMemo)(()=>{
-        const hasData = queryResults.some((q)=>q.data);
-        const isFetching = queryResults.some((q)=>q.isFetching);
-        const queryErrors = queryResults.filter((q)=>q.error);
+        const hasData = queryResults && queryResults.series && queryResults.series.length > 0;
         if (isFetching && hasData) {
-            // If the panel has no data, the panel content will show the loading overlay.
-            // Therefore, show the circular loading indicator only in case the panel doesn't display the loading overlay already.
             return /*#__PURE__*/ (0, _jsxruntime.jsx)(_material.CircularProgress, {
                 "aria-label": "loading",
                 size: "1.125rem"
             });
-        } else if (queryErrors.length > 0) {
-            const errorTexts = queryErrors.map((q)=>q.error).map((e)=>e?.message ?? e?.toString() ?? 'Unknown error') // eslint-disable-line @typescript-eslint/no-explicit-any
-            .join('\n');
+        }
+        const validErrors = (errors || []).filter((error)=>error !== null);
+        if (validErrors.length > 0) {
+            const errorTexts = validErrors.map((e)=>{
+                if (typeof e === 'string') return e;
+                if (e && typeof e === 'object') {
+                    const errorObj = e;
+                    return errorObj.message ?? errorObj.toString?.() ?? 'Unknown error';
+                }
+                return 'Unknown error';
+            }).join('\n');
             return /*#__PURE__*/ (0, _jsxruntime.jsx)(_components.InfoTooltip, {
                 description: errorTexts,
                 children: /*#__PURE__*/ (0, _jsxruntime.jsx)(_HeaderIconButton.HeaderIconButton, {
@@ -103,7 +173,9 @@ const PanelActions = ({ editHandlers, readHandlers, extra, title, description, d
             });
         }
     }, [
-        queryResults
+        queryResults,
+        isFetching,
+        errors
     ]);
     const readActions = (0, _react.useMemo)(()=>{
         if (readHandlers !== undefined) {
@@ -128,7 +200,6 @@ const PanelActions = ({ editHandlers, readHandlers, extra, title, description, d
     ]);
     const editActions = (0, _react.useMemo)(()=>{
         if (editHandlers !== undefined) {
-            // If there are edit handlers, always just show the edit buttons
             return /*#__PURE__*/ (0, _jsxruntime.jsxs)(_jsxruntime.Fragment, {
                 children: [
                     /*#__PURE__*/ (0, _jsxruntime.jsx)(_components.InfoTooltip, {
@@ -151,8 +222,6 @@ const PanelActions = ({ editHandlers, readHandlers, extra, title, description, d
                             children: /*#__PURE__*/ (0, _jsxruntime.jsx)(_ContentCopy.default, {
                                 fontSize: "inherit",
                                 sx: {
-                                    // Shrink this icon a little bit to look more consistent
-                                    // with the other icons in the header.
                                     transform: 'scale(0.925)'
                                 }
                             })
@@ -242,6 +311,7 @@ const PanelActions = ({ editHandlers, readHandlers, extra, title, description, d
                                     editActions
                                 ]
                             }),
+                            pluginActions,
                             moveAction
                         ]
                     })
@@ -269,6 +339,7 @@ const PanelActions = ({ editHandlers, readHandlers, extra, title, description, d
                             extraActions,
                             " ",
                             readActions,
+                            pluginActions,
                             /*#__PURE__*/ (0, _jsxruntime.jsx)(OverflowMenu, {
                                 title: title,
                                 children: editActions
@@ -280,7 +351,6 @@ const PanelActions = ({ editHandlers, readHandlers, extra, title, description, d
             }),
             /*#__PURE__*/ (0, _jsxruntime.jsxs)(ConditionalBox, {
                 sx: (theme)=>({
-                        // flip the logic here; if the browser (or jsdom) does not support container queries, always show all icons
                         display: 'flex',
                         [theme.containerQueries(_constants.HEADER_ACTIONS_CONTAINER_NAME).down(_constants.HEADER_MEDIUM_WIDTH)]: {
                             display: 'none'
@@ -302,7 +372,7 @@ const PanelActions = ({ editHandlers, readHandlers, extra, title, description, d
                             extraActions,
                             " ",
                             readActions,
-                            " ",
+                            pluginActions,
                             editActions,
                             " ",
                             moveAction
@@ -315,7 +385,7 @@ const PanelActions = ({ editHandlers, readHandlers, extra, title, description, d
 };
 const OverflowMenu = ({ children, title })=>{
     const [anchorPosition, setAnchorPosition] = (0, _react.useState)();
-    // do not show overflow menu if there is no content (for example, edit actions are hidden)
+    // do not show overflow menu if there is no content
     const hasContent = /*#__PURE__*/ (0, _react.isValidElement)(children) || Array.isArray(children) && children.some(_react.isValidElement);
     if (!hasContent) {
         return undefined;

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

@@ -24,13 +24,53 @@ const _jsxruntime = require("react/jsx-runtime");
 const _material = require("@mui/material");
 const _components = require("@perses-dev/components");
 const _pluginsystem = require("@perses-dev/plugin-system");
+const _react = require("react");
 const _constants = require("../../constants");
 const _PanelActions = require("./PanelActions");
-function PanelHeader({ id, title: rawTitle, description: rawDescription, links, queryResults, readHandlers, editHandlers, sx, extra, ...rest }) {
+function PanelHeader({ id, title: rawTitle, description: rawDescription, links, queryResults, readHandlers, editHandlers, sx, extra, panelPluginKind, projectName, panelProps, ...rest }) {
     const titleElementId = `${id}-title`;
     const descriptionTooltipId = `${id}-description`;
     const title = (0, _pluginsystem.useReplaceVariablesInString)(rawTitle);
     const description = (0, _pluginsystem.useReplaceVariablesInString)(rawDescription);
+    const timeSeriesDataForExport = (0, _react.useMemo)(()=>{
+        // Collect all series from all queries
+        const allSeries = [];
+        let timeRange = undefined;
+        let stepMs = undefined;
+        let metadata = undefined;
+        queryResults.forEach((query)=>{
+            if (query.data && 'series' in query.data) {
+                const timeSeriesData = query.data;
+                // Collect series from this query
+                if (timeSeriesData.series && timeSeriesData.series.length > 0) {
+                    allSeries.push(...timeSeriesData.series);
+                    // Use the first query's metadata/timeRange/stepMs as the base
+                    if (!timeRange && timeSeriesData.timeRange) {
+                        timeRange = timeSeriesData.timeRange;
+                    }
+                    if (!stepMs && timeSeriesData.stepMs) {
+                        stepMs = timeSeriesData.stepMs;
+                    }
+                    if (!metadata && timeSeriesData.metadata) {
+                        metadata = timeSeriesData.metadata;
+                    }
+                }
+            }
+        });
+        // If we found series, create a combined TimeSeriesData object
+        if (allSeries.length > 0) {
+            const combinedData = {
+                series: allSeries,
+                timeRange,
+                stepMs,
+                metadata
+            };
+            return combinedData;
+        }
+        return undefined;
+    }, [
+        queryResults
+    ]);
     return /*#__PURE__*/ (0, _jsxruntime.jsx)(_material.CardHeader, {
         id: id,
         component: "header",
@@ -59,10 +99,14 @@ function PanelHeader({ id, title: rawTitle, description: rawDescription, links,
                     description: description,
                     descriptionTooltipId: descriptionTooltipId,
                     links: links,
-                    queryResults: queryResults,
+                    queryResults: timeSeriesDataForExport,
+                    panelPluginKind: panelPluginKind,
                     readHandlers: readHandlers,
                     editHandlers: editHandlers,
-                    extra: extra
+                    extra: extra,
+                    projectName: projectName,
+                    // ========== ADDED: Pass panel props for actions ==========
+                    panelProps: panelProps
                 })
             ]
         }),

package/dist/cjs/components/SaveChangesConfirmationDialog/SaveChangesConfirmationDialog.js

@@ -31,11 +31,8 @@ const SaveChangesConfirmationDialog = ()=>{
     const { saveChangesConfirmationDialog: dialog } = (0, _context.useSaveChangesConfirmationDialog)();
     const isSavedDurationModified = dialog?.isSavedDurationModified ?? true;
     const isSavedVariableModified = dialog?.isSavedVariableModified ?? true;
-    const isSavedTimeZoneModified = dialog?.isSavedTimeZoneModified ?? true;
     const [saveDefaultTimeRange, setSaveDefaultTimeRange] = (0, _react.useState)(isSavedDurationModified);
     const [saveDefaultVariables, setSaveDefaultVariables] = (0, _react.useState)(isSavedVariableModified);
-    const [saveDefaultTimeZone, setSaveDefaultTimeZone] = (0, _react.useState)(isSavedTimeZoneModified);
-    const { timeZone } = (0, _pluginsystem.useTimeZone)();
     const { getSavedVariablesStatus } = (0, _context.useVariableDefinitionActions)();
     const { modifiedVariableNames } = getSavedVariablesStatus();
     const isOpen = dialog !== undefined;
@@ -43,7 +40,6 @@ const SaveChangesConfirmationDialog = ()=>{
     const currentTimeRangeText = (0, _core.isRelativeTimeRange)(timeRange) ? `(Last ${timeRange.pastDuration})` : '(Absolute time ranges can not be saved)';
     const saveTimeRangeText = `Save current time range as new default ${currentTimeRangeText}`;
     const saveVariablesText = `Save current variable values as new default (${modifiedVariableNames.length > 0 ? modifiedVariableNames.join(', ') : 'No modified variables'})`;
-    const saveTimeZoneText = `Save time zone as "${timeZone}" time`;
     return /*#__PURE__*/ (0, _jsxruntime.jsx)(_components.Dialog, {
         open: isOpen,
         children: dialog !== undefined && /*#__PURE__*/ (0, _jsxruntime.jsxs)(_jsxruntime.Fragment, {
@@ -75,14 +71,6 @@ const SaveChangesConfirmationDialog = ()=>{
                                         onChange: (e)=>setSaveDefaultVariables(e.target.checked)
                                     }),
                                     label: saveVariablesText
-                                }),
-                                /*#__PURE__*/ (0, _jsxruntime.jsx)(_material.FormControlLabel, {
-                                    control: /*#__PURE__*/ (0, _jsxruntime.jsx)(_material.Checkbox, {
-                                        disabled: !isSavedTimeZoneModified,
-                                        checked: saveDefaultTimeZone && isSavedTimeZoneModified,
-                                        onChange: (e)=>setSaveDefaultTimeZone(e.target.checked)
-                                    }),
-                                    label: saveTimeZoneText
                                 })
                             ]
                         })
@@ -92,7 +80,7 @@ const SaveChangesConfirmationDialog = ()=>{
                     children: [
                         /*#__PURE__*/ (0, _jsxruntime.jsx)(_components.Dialog.PrimaryButton, {
                             onClick: ()=>{
-                                return dialog.onSaveChanges(saveDefaultTimeRange, saveDefaultVariables, saveDefaultTimeZone);
+                                return dialog.onSaveChanges(saveDefaultTimeRange, saveDefaultVariables);
                             },
                             children: "Save Changes"
                         }),

package/dist/cjs/components/SaveDashboardButton/SaveDashboardButton.js

@@ -34,17 +34,14 @@ const SaveDashboardButton = ({ onSave, isDisabled, variant = 'contained' })=>{
     const { timeRange } = (0, _pluginsystem.useTimeRange)();
     const { setEditMode } = (0, _context.useEditMode)();
     const { openSaveChangesConfirmationDialog, closeSaveChangesConfirmationDialog } = (0, _context.useSaveChangesConfirmationDialog)();
-    const { timeZone: currentTimeZone } = (0, _pluginsystem.useTimeZone)();
     const onSaveButtonClick = ()=>{
         const isSavedDurationModified = (0, _core.isRelativeTimeRange)(timeRange) && dashboard.spec.duration !== timeRange.pastDuration;
-        const isSavedTimeZoneModified = dashboard.spec.timeZone !== currentTimeZone;
         // Save dashboard
         // - if active timeRange from plugin-system is relative and different from currently saved
         // - or if the saved variables are different from currently saved
-        // - or if the saved timeZone are different from currently saved
-        if (isSavedDurationModified || isSavedVariableModified || isSavedTimeZoneModified) {
+        if (isSavedDurationModified || isSavedVariableModified) {
             openSaveChangesConfirmationDialog({
-                onSaveChanges: (saveDefaultTimeRange, saveDefaultVariables, isSavedTimeZone)=>{
+                onSaveChanges: (saveDefaultTimeRange, saveDefaultVariables)=>{
                     if ((0, _core.isRelativeTimeRange)(timeRange) && saveDefaultTimeRange === true) {
                         dashboard.spec.duration = timeRange.pastDuration;
                     }
@@ -52,9 +49,6 @@ const SaveDashboardButton = ({ onSave, isDisabled, variant = 'contained' })=>{
                         const variables = setVariableDefaultValues();
                         dashboard.spec.variables = variables;
                     }
-                    if (isSavedTimeZone) {
-                        dashboard.spec.timeZone = currentTimeZone;
-                    }
                     setDashboard(dashboard);
                     saveDashboard();
                 },
@@ -62,8 +56,7 @@ const SaveDashboardButton = ({ onSave, isDisabled, variant = 'contained' })=>{
                     closeSaveChangesConfirmationDialog();
                 },
                 isSavedDurationModified,
-                isSavedVariableModified,
-                isSavedTimeZoneModified
+                isSavedVariableModified
             });
         } else {
             saveDashboard();