@perses-dev/dashboards 0.53.0-beta.0 → 0.53.0-beta.2

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

@@ -1,4 +1,4 @@
-// Copyright 2023 The Perses Authors
+// Copyright 2025 The Perses Authors
 // Licensed under the Apache License, Version 2.0 (the "License");
 // you may not use this file except in compliance with the License.
 // You may obtain a copy of the License at
@@ -25,9 +25,9 @@ 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 _core = require("@perses-dev/core");
 const _context = require("../../context");
 const _Panel = require("../Panel");
-const _panelgroupslice = require("../../context/DashboardProvider/panel-group-slice");
 const _QueryViewerDialog = require("../QueryViewerDialog");
 function _getRequireWildcardCache(nodeInterop) {
     if (typeof WeakMap !== "function") return null;
@@ -94,7 +94,7 @@ function GridItemContent(props) {
         queries
     ]);
     const readHandlers = {
-        isPanelViewed: (0, _panelgroupslice.isPanelGroupItemIdEqual)(viewPanelGroupItemId, panelGroupItemId),
+        isPanelViewed: (0, _core.isPanelGroupItemIdEqual)(viewPanelGroupItemId, panelGroupItemId),
         onViewPanelClick: function() {
             if (viewPanelGroupItemId === undefined) {
                 viewPanel(panelGroupItemId);

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

@@ -1,4 +1,4 @@
-// Copyright 2023 The Perses Authors
+// Copyright 2025 The Perses Authors
 // Licensed under the Apache License, Version 2.0 (the "License");
 // you may not use this file except in compliance with the License.
 // You may obtain a copy of the License at

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

@@ -1,4 +1,4 @@
-// Copyright 2023 The Perses Authors
+// Copyright 2025 The Perses Authors
 // Licensed under the Apache License, Version 2.0 (the "License");
 // you may not use this file except in compliance with the License.
 // You may obtain a copy of the License at
@@ -52,7 +52,6 @@ const Panel = /*#__PURE__*/ (0, _react.memo)(function Panel(props) {
         width,
         height
     ]);
-    const chartsTheme = (0, _components.useChartsTheme)();
     const { queryResults } = (0, _pluginsystem.useDataQueriesContext)();
     const { getPlugin } = (0, _pluginsystem.usePluginRegistry)();
     const panelPropsForActions = (0, _react.useMemo)(()=>{
@@ -179,7 +178,9 @@ const Panel = /*#__PURE__*/ (0, _react.memo)(function Panel(props) {
                 pluginActions: pluginActions,
                 showIcons: showIcons,
                 sx: {
-                    paddingX: `${chartsTheme.container.padding.default}px`
+                    py: '2px',
+                    pl: '8px',
+                    pr: '2px'
                 },
                 dimension: contentDimensions
             }),

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

@@ -88,15 +88,17 @@ const PanelActions = ({ editHandlers, readHandlers, viewQueriesHandler, extra, t
                 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 errorTexts = queryErrors.map((q)=>q.error).map((e)=>e.message).join('\n');
             return /*#__PURE__*/ (0, _jsxruntime.jsx)(_components.InfoTooltip, {
                 description: errorTexts,
                 children: /*#__PURE__*/ (0, _jsxruntime.jsx)(_HeaderIconButton.HeaderIconButton, {
                     "aria-label": "panel errors",
                     size: "small",
                     children: /*#__PURE__*/ (0, _jsxruntime.jsx)(_Alert.default, {
-                        fontSize: "inherit"
+                        fontSize: "inherit",
+                        sx: {
+                            color: (theme)=>theme.palette.error.main
+                        }
                     })
                 })
             });

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

@@ -33,15 +33,7 @@ function PanelHeader({ id, title: rawTitle, description: rawDescription, links,
     const title = (0, _pluginsystem.useReplaceVariablesInString)(rawTitle);
     const description = (0, _pluginsystem.useReplaceVariablesInString)(rawDescription);
     const textRef = (0, _react.useRef)(null);
-    const [isEllipsisActive, setIsEllipsisActive] = (0, _react.useState)(false);
-    (0, _react.useEffect)(()=>{
-        if (textRef.current && dimension?.width) {
-            setIsEllipsisActive(textRef.current.scrollWidth > textRef.current.clientWidth);
-        }
-    }, [
-        title,
-        dimension?.width
-    ]);
+    const isEllipsisActive = textRef.current && dimension?.width ? textRef.current.scrollWidth > textRef.current.clientWidth : false;
     return /*#__PURE__*/ (0, _jsxruntime.jsx)(_material.CardHeader, {
         id: id,
         component: "header",

package/dist/cjs/components/PanelDrawer/PanelEditorForm.js

@@ -31,15 +31,14 @@ _export(exports, {
 const _jsxruntime = require("react/jsx-runtime");
 const _react = require("react");
 const _material = require("@mui/material");
-const _core = require("@perses-dev/core");
 const _components = require("@perses-dev/components");
 const _pluginsystem = require("@perses-dev/plugin-system");
 const _reacthookform = require("react-hook-form");
 const _zod = require("@hookform/resolvers/zod");
 const _context = require("../../context");
 const _PanelEditorProvider = require("../../context/PanelEditorProvider/PanelEditorProvider");
-const _PanelPreview = require("./PanelPreview");
 const _usePanelEditor = require("./usePanelEditor");
+const _PanelQueriesSharedControls = require("./PanelQueriesSharedControls");
 function PanelEditorForm(props) {
     const { initialValues, initialAction, onSave, onClose } = props;
     const pluginEditorRef = (0, _react.useRef)(null);
@@ -53,9 +52,6 @@ function PanelEditorForm(props) {
         mode: 'onBlur',
         defaultValues: initialValues
     });
-    const { dashboard } = (0, _context.useDashboard)();
-    const dashboardDuration = dashboard?.kind === 'Dashboard' ? dashboard.spec.duration : _core.DEFAULT_DASHBOARD_DURATION;
-    const initialTimeRange = (0, _pluginsystem.useInitialTimeRange)(dashboardDuration);
     // Use common plugin editor logic even though we've split the inputs up in this form
     const pluginEditor = (0, _pluginsystem.usePluginEditor)({
         pluginTypes: [
@@ -131,7 +127,6 @@ function PanelEditorForm(props) {
         control: form.control,
         name: 'panelDefinition.spec.plugin.kind'
     });
-    const { timeRange } = (0, _pluginsystem.useTimeRangeParams)(initialTimeRange);
     const handleSubmit = (0, _react.useCallback)(()=>{
         pluginEditorRef.current?.flushChanges?.();
         form.handleSubmit(processForm)();
@@ -139,204 +134,178 @@ function PanelEditorForm(props) {
         form,
         processForm
     ]);
-    return /*#__PURE__*/ (0, _jsxruntime.jsx)(_pluginsystem.TimeRangeProvider, {
-        timeRange: timeRange,
-        children: /*#__PURE__*/ (0, _jsxruntime.jsx)(_reacthookform.FormProvider, {
-            ...form,
-            children: /*#__PURE__*/ (0, _jsxruntime.jsxs)(_PanelEditorProvider.PanelEditorProvider, {
-                children: [
-                    /*#__PURE__*/ (0, _jsxruntime.jsxs)(_material.Box, {
-                        sx: {
-                            display: 'flex',
-                            alignItems: 'center',
-                            padding: (theme)=>theme.spacing(1, 2),
-                            borderBottom: (theme)=>`1px solid ${theme.palette.divider}`
-                        },
-                        children: [
-                            /*#__PURE__*/ (0, _jsxruntime.jsxs)(_material.Typography, {
-                                variant: "h2",
-                                children: [
-                                    titleAction,
-                                    " Panel"
-                                ]
-                            }),
-                            /*#__PURE__*/ (0, _jsxruntime.jsxs)(_material.Stack, {
-                                direction: "row",
-                                spacing: 1,
-                                marginLeft: "auto",
-                                children: [
-                                    /*#__PURE__*/ (0, _jsxruntime.jsx)(_material.Button, {
-                                        variant: "contained",
-                                        disabled: !form.formState.isValid,
-                                        onClick: handleSubmit,
-                                        children: submitText
-                                    }),
-                                    /*#__PURE__*/ (0, _jsxruntime.jsx)(_material.Button, {
-                                        color: "secondary",
-                                        variant: "outlined",
-                                        onClick: handleCancel,
-                                        children: "Cancel"
-                                    })
-                                ]
-                            })
-                        ]
-                    }),
-                    /*#__PURE__*/ (0, _jsxruntime.jsx)(_material.Box, {
-                        id: panelEditorFormId,
-                        sx: {
-                            flex: 1,
-                            overflowY: 'scroll',
-                            padding: (theme)=>theme.spacing(2)
-                        },
-                        children: /*#__PURE__*/ (0, _jsxruntime.jsxs)(_material.Grid, {
-                            container: true,
-                            spacing: 2,
+    return /*#__PURE__*/ (0, _jsxruntime.jsx)(_reacthookform.FormProvider, {
+        ...form,
+        children: /*#__PURE__*/ (0, _jsxruntime.jsxs)(_PanelEditorProvider.PanelEditorProvider, {
+            children: [
+                /*#__PURE__*/ (0, _jsxruntime.jsxs)(_material.Box, {
+                    sx: {
+                        display: 'flex',
+                        alignItems: 'center',
+                        padding: (theme)=>theme.spacing(1, 2),
+                        borderBottom: (theme)=>`1px solid ${theme.palette.divider}`
+                    },
+                    children: [
+                        /*#__PURE__*/ (0, _jsxruntime.jsxs)(_material.Typography, {
+                            variant: "h2",
                             children: [
-                                /*#__PURE__*/ (0, _jsxruntime.jsx)(_material.Grid, {
-                                    item: true,
-                                    xs: 8,
-                                    children: /*#__PURE__*/ (0, _jsxruntime.jsx)(_reacthookform.Controller, {
-                                        control: form.control,
-                                        name: "panelDefinition.spec.display.name",
-                                        render: ({ field, fieldState })=>/*#__PURE__*/ (0, _jsxruntime.jsx)(_material.TextField, {
-                                                ...field,
-                                                required: true,
-                                                fullWidth: true,
-                                                label: "Name",
-                                                error: !!fieldState.error,
-                                                helperText: fieldState.error?.message,
-                                                value: watchedName ?? '',
-                                                onChange: (event)=>{
-                                                    field.onChange(event);
-                                                    setName(event.target.value);
-                                                }
-                                            })
-                                    })
-                                }),
-                                /*#__PURE__*/ (0, _jsxruntime.jsx)(_material.Grid, {
-                                    item: true,
-                                    xs: 4,
-                                    children: /*#__PURE__*/ (0, _jsxruntime.jsx)(_reacthookform.Controller, {
-                                        control: form.control,
-                                        name: "groupId",
-                                        render: ({ field, fieldState })=>/*#__PURE__*/ (0, _jsxruntime.jsx)(_material.TextField, {
-                                                select: true,
-                                                ...field,
-                                                required: true,
-                                                fullWidth: true,
-                                                label: "Group",
-                                                error: !!fieldState.error,
-                                                helperText: fieldState.error?.message,
-                                                onChange: (event)=>{
-                                                    field.onChange(event);
-                                                },
-                                                children: panelGroups.map((panelGroup, index)=>/*#__PURE__*/ (0, _jsxruntime.jsx)(_material.MenuItem, {
-                                                        value: panelGroup.id,
-                                                        children: panelGroup.title ?? `Group ${index + 1}`
-                                                    }, panelGroup.id))
-                                            })
-                                    })
-                                }),
-                                /*#__PURE__*/ (0, _jsxruntime.jsx)(_material.Grid, {
-                                    item: true,
-                                    xs: 8,
-                                    children: /*#__PURE__*/ (0, _jsxruntime.jsx)(_reacthookform.Controller, {
-                                        control: form.control,
-                                        name: "panelDefinition.spec.display.description",
-                                        render: ({ field, fieldState })=>/*#__PURE__*/ (0, _jsxruntime.jsx)(_material.TextField, {
-                                                ...field,
-                                                fullWidth: true,
-                                                label: "Description",
-                                                error: !!fieldState.error,
-                                                helperText: fieldState.error?.message,
-                                                value: watchedDescription ?? '',
-                                                onChange: (event)=>{
-                                                    field.onChange(event);
-                                                    setDescription(event.target.value);
-                                                }
-                                            })
-                                    })
-                                }),
-                                /*#__PURE__*/ (0, _jsxruntime.jsx)(_material.Grid, {
-                                    item: true,
-                                    xs: 4,
-                                    children: /*#__PURE__*/ (0, _jsxruntime.jsx)(_reacthookform.Controller, {
-                                        control: form.control,
-                                        name: "panelDefinition.spec.plugin.kind",
-                                        render: ({ field, fieldState })=>/*#__PURE__*/ (0, _jsxruntime.jsx)(_pluginsystem.PluginKindSelect, {
-                                                ...field,
-                                                pluginTypes: [
-                                                    'Panel'
-                                                ],
-                                                required: true,
-                                                fullWidth: true,
-                                                label: "Type",
-                                                disabled: pluginEditor.isLoading,
-                                                error: !!pluginEditor.error || !!fieldState.error,
-                                                helperText: pluginEditor.error?.message ?? fieldState.error?.message,
-                                                value: {
-                                                    type: 'Panel',
-                                                    kind: watchedPluginKind
-                                                },
-                                                onChange: (event)=>{
-                                                    field.onChange(event.kind);
-                                                    pluginEditor.onSelectionChange(event);
-                                                }
-                                            })
-                                    })
+                                titleAction,
+                                " Panel"
+                            ]
+                        }),
+                        /*#__PURE__*/ (0, _jsxruntime.jsxs)(_material.Stack, {
+                            direction: "row",
+                            spacing: 1,
+                            marginLeft: "auto",
+                            children: [
+                                /*#__PURE__*/ (0, _jsxruntime.jsx)(_material.Button, {
+                                    variant: "contained",
+                                    disabled: !form.formState.isValid,
+                                    onClick: handleSubmit,
+                                    children: submitText
                                 }),
-                                /*#__PURE__*/ (0, _jsxruntime.jsxs)(_material.Grid, {
-                                    item: true,
-                                    xs: 12,
-                                    children: [
-                                        /*#__PURE__*/ (0, _jsxruntime.jsx)(_material.Typography, {
-                                            variant: "h4",
-                                            marginBottom: 1,
-                                            children: "Preview"
-                                        }),
-                                        /*#__PURE__*/ (0, _jsxruntime.jsx)(_components.ErrorBoundary, {
-                                            FallbackComponent: _components.ErrorAlert,
-                                            children: /*#__PURE__*/ (0, _jsxruntime.jsx)(_PanelPreview.PanelPreview, {
-                                                panelDefinition: panelDefinition
-                                            })
+                                /*#__PURE__*/ (0, _jsxruntime.jsx)(_material.Button, {
+                                    color: "secondary",
+                                    variant: "outlined",
+                                    onClick: handleCancel,
+                                    children: "Cancel"
+                                })
+                            ]
+                        })
+                    ]
+                }),
+                /*#__PURE__*/ (0, _jsxruntime.jsx)(_material.Box, {
+                    id: panelEditorFormId,
+                    sx: {
+                        flex: 1,
+                        overflowY: 'scroll',
+                        padding: (theme)=>theme.spacing(2)
+                    },
+                    children: /*#__PURE__*/ (0, _jsxruntime.jsxs)(_material.Grid, {
+                        container: true,
+                        spacing: 2,
+                        children: [
+                            /*#__PURE__*/ (0, _jsxruntime.jsx)(_material.Grid, {
+                                item: true,
+                                xs: 8,
+                                children: /*#__PURE__*/ (0, _jsxruntime.jsx)(_reacthookform.Controller, {
+                                    control: form.control,
+                                    name: "panelDefinition.spec.display.name",
+                                    render: ({ field, fieldState })=>/*#__PURE__*/ (0, _jsxruntime.jsx)(_material.TextField, {
+                                            ...field,
+                                            required: true,
+                                            fullWidth: true,
+                                            label: "Name",
+                                            error: !!fieldState.error,
+                                            helperText: fieldState.error?.message,
+                                            value: watchedName ?? '',
+                                            onChange: (event)=>{
+                                                field.onChange(event);
+                                                setName(event.target.value);
+                                            }
                                         })
-                                    ]
-                                }),
-                                /*#__PURE__*/ (0, _jsxruntime.jsx)(_material.Grid, {
-                                    item: true,
-                                    xs: 12,
-                                    children: /*#__PURE__*/ (0, _jsxruntime.jsx)(_components.ErrorBoundary, {
-                                        FallbackComponent: _components.ErrorAlert,
-                                        children: /*#__PURE__*/ (0, _jsxruntime.jsx)(_pluginsystem.PanelSpecEditor, {
-                                            ref: pluginEditorRef,
-                                            control: form.control,
-                                            panelDefinition: panelDefinition,
-                                            onJSONChange: handlePanelDefinitionChange,
-                                            onQueriesChange: (queries)=>{
-                                                setQueries(queries);
+                                })
+                            }),
+                            /*#__PURE__*/ (0, _jsxruntime.jsx)(_material.Grid, {
+                                item: true,
+                                xs: 4,
+                                children: /*#__PURE__*/ (0, _jsxruntime.jsx)(_reacthookform.Controller, {
+                                    control: form.control,
+                                    name: "groupId",
+                                    render: ({ field, fieldState })=>/*#__PURE__*/ (0, _jsxruntime.jsx)(_material.TextField, {
+                                            select: true,
+                                            ...field,
+                                            required: true,
+                                            fullWidth: true,
+                                            label: "Group",
+                                            error: !!fieldState.error,
+                                            helperText: fieldState.error?.message,
+                                            onChange: (event)=>{
+                                                field.onChange(event);
                                             },
-                                            onPluginSpecChange: (spec)=>{
-                                                pluginEditor.onSpecChange(spec);
+                                            children: panelGroups.map((panelGroup, index)=>/*#__PURE__*/ (0, _jsxruntime.jsx)(_material.MenuItem, {
+                                                    value: panelGroup.id,
+                                                    children: panelGroup.title ?? `Group ${index + 1}`
+                                                }, panelGroup.id))
+                                        })
+                                })
+                            }),
+                            /*#__PURE__*/ (0, _jsxruntime.jsx)(_material.Grid, {
+                                item: true,
+                                xs: 8,
+                                children: /*#__PURE__*/ (0, _jsxruntime.jsx)(_reacthookform.Controller, {
+                                    control: form.control,
+                                    name: "panelDefinition.spec.display.description",
+                                    render: ({ field, fieldState })=>/*#__PURE__*/ (0, _jsxruntime.jsx)(_material.TextField, {
+                                            ...field,
+                                            fullWidth: true,
+                                            label: "Description",
+                                            error: !!fieldState.error,
+                                            helperText: fieldState.error?.message,
+                                            value: watchedDescription ?? '',
+                                            onChange: (event)=>{
+                                                field.onChange(event);
+                                                setDescription(event.target.value);
                                             }
                                         })
-                                    })
                                 })
-                            ]
-                        })
-                    }),
-                    /*#__PURE__*/ (0, _jsxruntime.jsx)(_components.DiscardChangesConfirmationDialog, {
-                        description: "You have unapplied changes in this panel. Are you sure you want to discard these changes? Changes cannot be recovered.",
-                        isOpen: isDiscardDialogOpened,
-                        onCancel: ()=>{
-                            setDiscardDialogOpened(false);
-                        },
-                        onDiscardChanges: ()=>{
-                            setDiscardDialogOpened(false);
-                            onClose();
-                        }
+                            }),
+                            /*#__PURE__*/ (0, _jsxruntime.jsx)(_material.Grid, {
+                                item: true,
+                                xs: 4,
+                                children: /*#__PURE__*/ (0, _jsxruntime.jsx)(_reacthookform.Controller, {
+                                    control: form.control,
+                                    name: "panelDefinition.spec.plugin.kind",
+                                    render: ({ field, fieldState })=>/*#__PURE__*/ (0, _jsxruntime.jsx)(_pluginsystem.PluginKindSelect, {
+                                            ...field,
+                                            pluginTypes: [
+                                                'Panel'
+                                            ],
+                                            required: true,
+                                            fullWidth: true,
+                                            label: "Type",
+                                            disabled: pluginEditor.isLoading,
+                                            error: !!pluginEditor.error || !!fieldState.error,
+                                            helperText: pluginEditor.error?.message ?? fieldState.error?.message,
+                                            value: {
+                                                type: 'Panel',
+                                                kind: watchedPluginKind
+                                            },
+                                            onChange: (event)=>{
+                                                field.onChange(event.kind);
+                                                pluginEditor.onSelectionChange(event);
+                                            }
+                                        })
+                                })
+                            }),
+                            /*#__PURE__*/ (0, _jsxruntime.jsx)(_components.ErrorBoundary, {
+                                FallbackComponent: _components.ErrorAlert,
+                                children: /*#__PURE__*/ (0, _jsxruntime.jsx)(_PanelQueriesSharedControls.PanelQueriesSharedControls, {
+                                    control: form.control,
+                                    plugin: plugin,
+                                    panelDefinition: panelDefinition,
+                                    onQueriesChange: (q)=>setQueries(q),
+                                    onPluginSpecChange: (spec)=>{
+                                        pluginEditor.onSpecChange(spec);
+                                    },
+                                    onJSONChange: handlePanelDefinitionChange
+                                })
+                            })
+                        ]
                     })
-                ]
-            })
+                }),
+                /*#__PURE__*/ (0, _jsxruntime.jsx)(_components.DiscardChangesConfirmationDialog, {
+                    description: "You have unapplied changes in this panel. Are you sure you want to discard these changes? Changes cannot be recovered.",
+                    isOpen: isDiscardDialogOpened,
+                    onCancel: ()=>{
+                        setDiscardDialogOpened(false);
+                    },
+                    onDiscardChanges: ()=>{
+                        setDiscardDialogOpened(false);
+                        onClose();
+                    }
+                })
+            ]
         })
     });
 }

package/dist/cjs/components/PanelDrawer/PanelPreview.js

@@ -23,7 +23,6 @@ Object.defineProperty(exports, "PanelPreview", {
 const _jsxruntime = require("react/jsx-runtime");
 const _react = require("react");
 const _material = require("@mui/material");
-const _pluginsystem = require("@perses-dev/plugin-system");
 const _Panel = require("../Panel");
 const _context = require("../../context");
 const PANEL_PREVIEW_HEIGHT = 300;
@@ -36,34 +35,14 @@ function PanelPreview({ panelDefinition }) {
         width = boxRef.current.getBoundingClientRect().width;
         panelEditorContext?.preview?.setPreviewPanelWidth?.(width);
     }
-    const suggestedStepMs = (0, _pluginsystem.useSuggestedStepMs)(width);
-    const { data: plugin, isLoading } = (0, _pluginsystem.usePlugin)('Panel', panelDefinition.spec.plugin.kind);
-    if (isLoading) {
-        return null;
-    }
     if (panelDefinition.spec.plugin.kind === '') {
         return null;
     }
-    const queries = panelDefinition.spec.queries ?? [];
-    // map TimeSeriesQueryDefinition to Definition<UnknownSpec>
-    const definitions = queries.length ? queries.map((query)=>{
-        return {
-            kind: query.spec.plugin.kind,
-            spec: query.spec.plugin.spec
-        };
-    }) : [];
     return /*#__PURE__*/ (0, _jsxruntime.jsx)(_material.Box, {
         ref: boxRef,
         height: PANEL_PREVIEW_HEIGHT,
-        children: /*#__PURE__*/ (0, _jsxruntime.jsx)(_pluginsystem.DataQueriesProvider, {
-            definitions: definitions,
-            options: {
-                suggestedStepMs,
-                ...plugin?.queryOptions
-            },
-            children: /*#__PURE__*/ (0, _jsxruntime.jsx)(_Panel.Panel, {
-                definition: panelDefinition
-            })
+        children: /*#__PURE__*/ (0, _jsxruntime.jsx)(_Panel.Panel, {
+            definition: panelDefinition
         })
     });
 }

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

@@ -0,0 +1,80 @@
+// Copyright 2025 The Perses Authors
+// Licensed under the Apache License, Version 2.0 (the "License");
+// you may not use this file except in compliance with the License.
+// You may obtain a copy of the License at
+//
+// http://www.apache.org/licenses/LICENSE-2.0
+//
+// Unless required by applicable law or agreed to in writing, software
+// distributed under the License is distributed on an "AS IS" BASIS,
+// WITHOUT WARRANTIES OR CONDITIONS OF ANY KIND, either express or implied.
+// See the License for the specific language governing permissions and
+// limitations under the License.
+"use strict";
+Object.defineProperty(exports, "__esModule", {
+    value: true
+});
+Object.defineProperty(exports, "PanelQueriesSharedControls", {
+    enumerable: true,
+    get: function() {
+        return PanelQueriesSharedControls;
+    }
+});
+const _jsxruntime = require("react/jsx-runtime");
+const _material = require("@mui/material");
+const _components = require("@perses-dev/components");
+const _dashboards = require("@perses-dev/dashboards");
+const _pluginsystem = require("@perses-dev/plugin-system");
+const _react = require("react");
+function PanelQueriesSharedControls({ plugin, control, panelDefinition, onQueriesChange, onPluginSpecChange, onJSONChange }) {
+    const { data: pluginPreview } = (0, _pluginsystem.usePlugin)('Panel', plugin.kind);
+    const panelEditorContext = (0, _react.useContext)(_dashboards.PanelEditorContext);
+    const pluginQueryOptions = typeof pluginPreview?.queryOptions === 'function' ? pluginPreview?.queryOptions(panelDefinition.spec.plugin.spec) : pluginPreview?.queryOptions;
+    const suggestedStepMs = (0, _pluginsystem.useSuggestedStepMs)(panelEditorContext?.preview.previewPanelWidth);
+    const definitions = panelDefinition.spec.queries?.map((query)=>{
+        return {
+            kind: query.spec.plugin.kind,
+            spec: query.spec.plugin.spec
+        };
+    }) ?? [];
+    return /*#__PURE__*/ (0, _jsxruntime.jsxs)(_pluginsystem.DataQueriesProvider, {
+        definitions: definitions,
+        options: {
+            suggestedStepMs,
+            ...pluginQueryOptions
+        },
+        children: [
+            /*#__PURE__*/ (0, _jsxruntime.jsxs)(_material.Grid, {
+                item: true,
+                xs: 12,
+                children: [
+                    /*#__PURE__*/ (0, _jsxruntime.jsx)(_material.Typography, {
+                        variant: "h4",
+                        marginBottom: 1,
+                        children: "Preview"
+                    }),
+                    /*#__PURE__*/ (0, _jsxruntime.jsx)(_components.ErrorBoundary, {
+                        FallbackComponent: _components.ErrorAlert,
+                        children: /*#__PURE__*/ (0, _jsxruntime.jsx)(_dashboards.PanelPreview, {
+                            panelDefinition: panelDefinition
+                        })
+                    })
+                ]
+            }),
+            /*#__PURE__*/ (0, _jsxruntime.jsx)(_material.Grid, {
+                item: true,
+                xs: 12,
+                children: /*#__PURE__*/ (0, _jsxruntime.jsx)(_components.ErrorBoundary, {
+                    FallbackComponent: _components.ErrorAlert,
+                    children: /*#__PURE__*/ (0, _jsxruntime.jsx)(_pluginsystem.PanelSpecEditor, {
+                        control: control,
+                        panelDefinition: panelDefinition,
+                        onJSONChange: onJSONChange,
+                        onQueriesChange: onQueriesChange,
+                        onPluginSpecChange: onPluginSpecChange
+                    })
+                })
+            })
+        ]
+    });
+}