@perses-dev/dashboards 0.0.0-snapshot-scatter-chart-embed-8efdfab → 0.0.0-snapshot-explorer-plugin-c4a7621

package/dist/cjs/components/Panel/PanelHeader.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
@@ -23,83 +23,22 @@ Object.defineProperty(exports, "PanelHeader", {
 const _jsxruntime = require("react/jsx-runtime");
 const _material = require("@mui/material");
 const _components = require("@perses-dev/components");
-const _InformationOutline = /*#__PURE__*/ _interop_require_default(require("mdi-material-ui/InformationOutline"));
-const _PencilOutline = /*#__PURE__*/ _interop_require_default(require("mdi-material-ui/PencilOutline"));
-const _DeleteOutline = /*#__PURE__*/ _interop_require_default(require("mdi-material-ui/DeleteOutline"));
-const _DragVertical = /*#__PURE__*/ _interop_require_default(require("mdi-material-ui/DragVertical"));
-const _ContentCopy = /*#__PURE__*/ _interop_require_default(require("mdi-material-ui/ContentCopy"));
 const _pluginsystem = require("@perses-dev/plugin-system");
+const _InformationOutline = /*#__PURE__*/ _interop_require_default(require("mdi-material-ui/InformationOutline"));
 const _constants = require("../../constants");
+const _PanelActions = require("./PanelActions");
+const _PanelLinks = require("./PanelLinks");
+const _HeaderIconButton = require("./HeaderIconButton");
 function _interop_require_default(obj) {
     return obj && obj.__esModule ? obj : {
         default: obj
     };
 }
-function PanelHeader({ id , title: rawTitle , description: rawDescription , editHandlers , sx , extra , ...rest }) {
+function PanelHeader({ id, title: rawTitle, description: rawDescription, links, readHandlers, editHandlers, sx, extra, ...rest }) {
     const titleElementId = `${id}-title`;
     const descriptionTooltipId = `${id}-description`;
     const title = (0, _pluginsystem.useReplaceVariablesInString)(rawTitle);
     const description = (0, _pluginsystem.useReplaceVariablesInString)(rawDescription);
-    let actions = undefined;
-    if (editHandlers !== undefined) {
-        // If there are edit handlers, always just show the edit buttons
-        actions = /*#__PURE__*/ (0, _jsxruntime.jsxs)(_jsxruntime.Fragment, {
-            children: [
-                /*#__PURE__*/ (0, _jsxruntime.jsx)(_components.InfoTooltip, {
-                    description: _constants.TOOLTIP_TEXT.editPanel,
-                    children: /*#__PURE__*/ (0, _jsxruntime.jsx)(HeaderIconButton, {
-                        "aria-label": _constants.ARIA_LABEL_TEXT.editPanel(title),
-                        size: "small",
-                        onClick: editHandlers.onEditPanelClick,
-                        children: /*#__PURE__*/ (0, _jsxruntime.jsx)(_PencilOutline.default, {
-                            fontSize: "inherit"
-                        })
-                    })
-                }),
-                /*#__PURE__*/ (0, _jsxruntime.jsx)(_components.InfoTooltip, {
-                    description: _constants.TOOLTIP_TEXT.duplicatePanel,
-                    children: /*#__PURE__*/ (0, _jsxruntime.jsx)(HeaderIconButton, {
-                        "aria-label": _constants.ARIA_LABEL_TEXT.duplicatePanel(title),
-                        size: "small",
-                        onClick: editHandlers.onDuplicatePanelClick,
-                        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)'
-                            }
-                        })
-                    })
-                }),
-                /*#__PURE__*/ (0, _jsxruntime.jsx)(_components.InfoTooltip, {
-                    description: _constants.TOOLTIP_TEXT.deletePanel,
-                    children: /*#__PURE__*/ (0, _jsxruntime.jsx)(HeaderIconButton, {
-                        "aria-label": _constants.ARIA_LABEL_TEXT.deletePanel(title),
-                        size: "small",
-                        onClick: editHandlers.onDeletePanelClick,
-                        children: /*#__PURE__*/ (0, _jsxruntime.jsx)(_DeleteOutline.default, {
-                            fontSize: "inherit"
-                        })
-                    })
-                }),
-                /*#__PURE__*/ (0, _jsxruntime.jsx)(_components.InfoTooltip, {
-                    description: _constants.TOOLTIP_TEXT.movePanel,
-                    children: /*#__PURE__*/ (0, _jsxruntime.jsx)(HeaderIconButton, {
-                        "aria-label": _constants.ARIA_LABEL_TEXT.movePanel(title),
-                        size: "small",
-                        children: /*#__PURE__*/ (0, _jsxruntime.jsx)(_DragVertical.default, {
-                            className: "drag-handle",
-                            sx: {
-                                cursor: 'grab'
-                            },
-                            fontSize: "inherit"
-                        })
-                    })
-                })
-            ]
-        });
-    }
     return /*#__PURE__*/ (0, _jsxruntime.jsx)(_material.CardHeader, {
         id: id,
         component: "header",
@@ -116,43 +55,49 @@ function PanelHeader({ id , title: rawTitle , description: rawDescription , edit
                         // `minHeight` guarantees that the header has the correct height
                         // when there is no title (i.e. in the preview)
                         lineHeight: '24px',
-                        minHeight: '24px',
+                        minHeight: '26px',
                         whiteSpace: 'nowrap',
                         overflow: 'hidden',
                         textOverflow: 'ellipsis'
                     },
                     children: title
                 }),
-                description !== undefined && description.trim().length > 0 && /*#__PURE__*/ (0, _jsxruntime.jsx)(_components.InfoTooltip, {
-                    id: descriptionTooltipId,
-                    description: description,
-                    enterDelay: 100,
-                    children: /*#__PURE__*/ (0, _jsxruntime.jsx)(HeaderIconButton, {
-                        "aria-label": "panel description",
-                        size: "small",
-                        children: /*#__PURE__*/ (0, _jsxruntime.jsx)(_InformationOutline.default, {
-                            "aria-describedby": "info-tooltip",
-                            "aria-hidden": false,
-                            fontSize: "inherit",
-                            sx: {
-                                color: (theme)=>theme.palette.text.secondary
-                            }
+                description !== undefined && description.trim().length > 0 && /*#__PURE__*/ (0, _jsxruntime.jsx)(_material.Box, {
+                    sx: {
+                        display: editHandlers === undefined ? 'var(--panel-hover, none)' : 'flex'
+                    },
+                    children: /*#__PURE__*/ (0, _jsxruntime.jsx)(_components.InfoTooltip, {
+                        id: descriptionTooltipId,
+                        description: description,
+                        enterDelay: 100,
+                        children: /*#__PURE__*/ (0, _jsxruntime.jsx)(_HeaderIconButton.HeaderIconButton, {
+                            "aria-label": "panel description",
+                            size: "small",
+                            children: /*#__PURE__*/ (0, _jsxruntime.jsx)(_InformationOutline.default, {
+                                "aria-describedby": "info-tooltip",
+                                "aria-hidden": false,
+                                fontSize: "inherit",
+                                sx: {
+                                    color: (theme)=>theme.palette.text.secondary
+                                }
+                            })
                         })
                     })
+                }),
+                links !== undefined && links.length > 0 && /*#__PURE__*/ (0, _jsxruntime.jsx)(_PanelLinks.PanelLinks, {
+                    links: links
                 })
             ]
         }),
-        action: /*#__PURE__*/ (0, _jsxruntime.jsxs)(HeaderActionWrapper, {
-            direction: "row",
-            spacing: 0.25,
-            alignItems: "center",
-            children: [
-                editHandlers === undefined && extra,
-                " ",
-                actions
-            ]
+        action: /*#__PURE__*/ (0, _jsxruntime.jsx)(_PanelActions.PanelActions, {
+            title: title,
+            readHandlers: readHandlers,
+            editHandlers: editHandlers,
+            extra: extra
         }),
         sx: (0, _components.combineSx)((theme)=>({
+                containerType: 'inline-size',
+                containerName: _constants.HEADER_ACTIONS_CONTAINER_NAME,
                 padding: theme.spacing(1),
                 borderBottom: `solid 1px ${theme.palette.divider}`,
                 '.MuiCardHeader-content': {
@@ -169,15 +114,3 @@ function PanelHeader({ id , title: rawTitle , description: rawDescription , edit
         ...rest
     });
 }
-const HeaderIconButton = (0, _material.styled)(_material.IconButton)(({ theme  })=>({
-        borderRadius: theme.shape.borderRadius,
-        padding: '4px'
-    }));
-const HeaderActionWrapper = (0, _material.styled)(_material.Stack)(()=>({
-        // Adding back the negative margins from MUI's defaults for actions, so we
-        // avoid increasing the header size when actions are present while also being
-        // able to vertically center the actions.
-        // https://github.com/mui/material-ui/blob/master/packages/mui-material/src/CardHeader/CardHeader.js#L56-L58
-        marginTop: -4,
-        marginBottom: -4
-    }));

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

@@ -0,0 +1,136 @@
+// Copyright 2024 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, "PanelLinks", {
+    enumerable: true,
+    get: function() {
+        return PanelLinks;
+    }
+});
+const _jsxruntime = require("react/jsx-runtime");
+const _material = require("@mui/material");
+const _Launch = /*#__PURE__*/ _interop_require_default(require("mdi-material-ui/Launch"));
+const _react = require("react");
+const _components = require("@perses-dev/components");
+const _pluginsystem = require("@perses-dev/plugin-system");
+function _interop_require_default(obj) {
+    return obj && obj.__esModule ? obj : {
+        default: obj
+    };
+}
+function PanelLinks({ links }) {
+    const [anchorEl, setAnchorEl] = (0, _react.useState)(null);
+    const isMenuOpened = Boolean(anchorEl);
+    const handleOpenMenu = (event)=>{
+        setAnchorEl(event.currentTarget);
+    };
+    const handleClose = ()=>{
+        setAnchorEl(null);
+    };
+    // If there is only one link, show it directly
+    if (links.length === 1 && links[0]) {
+        const link = links[0];
+        return /*#__PURE__*/ (0, _jsxruntime.jsx)(LinkButton, {
+            link: link
+        });
+    }
+    // Else we show a menu with a list of all links
+    return /*#__PURE__*/ (0, _jsxruntime.jsxs)(_jsxruntime.Fragment, {
+        children: [
+            /*#__PURE__*/ (0, _jsxruntime.jsx)(_components.InfoTooltip, {
+                description: `${links.length} links`,
+                enterDelay: 100,
+                children: /*#__PURE__*/ (0, _jsxruntime.jsx)(_material.IconButton, {
+                    "aria-label": "Panel links",
+                    size: "small",
+                    onClick: handleOpenMenu,
+                    sx: (theme)=>({
+                            borderRadius: theme.shape.borderRadius,
+                            padding: '4px'
+                        }),
+                    children: /*#__PURE__*/ (0, _jsxruntime.jsx)(_Launch.default, {
+                        "aria-describedby": "links-icon",
+                        fontSize: "inherit",
+                        sx: {
+                            color: (theme)=>theme.palette.text.secondary
+                        }
+                    })
+                })
+            }),
+            /*#__PURE__*/ (0, _jsxruntime.jsx)(_material.Menu, {
+                anchorEl: anchorEl,
+                open: isMenuOpened,
+                onClose: handleClose,
+                MenuListProps: {
+                    'aria-labelledby': 'panel-links'
+                },
+                children: links.map((link)=>/*#__PURE__*/ (0, _jsxruntime.jsx)(LinkMenuItem, {
+                        link: link
+                    }, link.url))
+            })
+        ]
+    });
+}
+function LinkButton({ link }) {
+    const { url, name, tooltip, targetBlank } = useLink(link);
+    return /*#__PURE__*/ (0, _jsxruntime.jsx)(_components.InfoTooltip, {
+        description: tooltip ?? url,
+        enterDelay: 100,
+        children: /*#__PURE__*/ (0, _jsxruntime.jsx)(_material.IconButton, {
+            "aria-label": name ?? url,
+            size: "small",
+            href: url,
+            target: targetBlank ? '_blank' : '_self',
+            sx: (theme)=>({
+                    borderRadius: theme.shape.borderRadius,
+                    padding: '4px'
+                }),
+            children: /*#__PURE__*/ (0, _jsxruntime.jsx)(_Launch.default, {
+                fontSize: "inherit",
+                sx: {
+                    color: (theme)=>theme.palette.text.secondary
+                }
+            })
+        })
+    });
+}
+function LinkMenuItem({ link }) {
+    const { url, name, tooltip, targetBlank } = useLink(link);
+    return /*#__PURE__*/ (0, _jsxruntime.jsx)(_components.InfoTooltip, {
+        description: tooltip ?? url,
+        enterDelay: 100,
+        children: /*#__PURE__*/ (0, _jsxruntime.jsx)(_material.MenuItem, {
+            component: _material.Link,
+            href: url,
+            target: targetBlank ? '_blank' : '_self',
+            children: name ?? url
+        })
+    });
+}
+function useLink(link) {
+    const url = (0, _pluginsystem.useReplaceVariablesInString)(link.url) ?? link.url;
+    const name = (0, _pluginsystem.useReplaceVariablesInString)(link.name);
+    const tooltip = (0, _pluginsystem.useReplaceVariablesInString)(link.tooltip);
+    if (link.renderVariables === false) {
+        return link;
+    }
+    return {
+        ...link,
+        url,
+        name,
+        tooltip
+    };
+}

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

@@ -44,7 +44,7 @@ const PanelDrawer = ()=>{
     };
     // Don't call closeDrawer on the store until the Drawer has completely transitioned out and reset close state
     const handleExited = ()=>{
-        panelEditor === null || panelEditor === void 0 ? void 0 : panelEditor.close();
+        panelEditor?.close();
         setIsClosing(false);
     };
     // Disables closing on click out. This is a quick-win solution to avoid losing draft changes.
@@ -58,11 +58,14 @@ const PanelDrawer = ()=>{
             onExited: handleExited
         },
         "data-testid": "panel-editor",
-        children: panelEditor && /*#__PURE__*/ (0, _jsxruntime.jsx)(_PanelEditorForm.PanelEditorForm, {
-            initialAction: panelEditor.mode,
-            initialValues: panelEditor.initialValues,
-            onSave: handleSave,
-            onClose: handleClose
+        children: panelEditor && /*#__PURE__*/ (0, _jsxruntime.jsx)(_components.ErrorBoundary, {
+            FallbackComponent: _components.ErrorAlert,
+            children: /*#__PURE__*/ (0, _jsxruntime.jsx)(_PanelEditorForm.PanelEditorForm, {
+                initialAction: panelEditor.mode,
+                initialValues: panelEditor.initialValues,
+                onSave: handleSave,
+                onClose: handleClose
+            })
         })
     });
 };

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

@@ -36,25 +36,35 @@ const _pluginsystem = require("@perses-dev/plugin-system");
 const _reacthookform = require("react-hook-form");
 const _zod = require("@hookform/resolvers/zod");
 const _context = require("../../context");
-const _validation = require("../../validation");
 const _PanelPreview = require("./PanelPreview");
 const _usePanelEditor = require("./usePanelEditor");
 function PanelEditorForm(props) {
-    const { initialValues: { panelDefinition: initialPanelDef , groupId: initialGroupId  } , initialAction , onSave , onClose  } = props;
+    const { initialValues, initialAction, onSave, onClose } = props;
     const panelGroups = (0, _context.useListPanelGroups)();
-    const [groupId, setGroupId] = (0, _react.useState)(initialGroupId);
-    const { panelDefinition , setName , setDescription , setQueries , setPlugin , setPanelDefinition  } = (0, _usePanelEditor.usePanelEditor)(initialPanelDef);
-    const { plugin  } = panelDefinition.spec;
+    const { panelDefinition, setName, setDescription, setLinks, setQueries, setPlugin, setPanelDefinition } = (0, _usePanelEditor.usePanelEditor)(initialValues.panelDefinition);
+    const { plugin } = panelDefinition.spec;
     const [isDiscardDialogOpened, setDiscardDialogOpened] = (0, _react.useState)(false);
     // Use common plugin editor logic even though we've split the inputs up in this form
     const pluginEditor = (0, _pluginsystem.usePluginEditor)({
-        pluginType: 'Panel',
+        pluginTypes: [
+            'Panel'
+        ],
         value: {
-            kind: plugin.kind,
+            selection: {
+                kind: plugin.kind,
+                type: 'Panel'
+            },
             spec: plugin.spec
         },
         onChange: (plugin)=>{
-            setPlugin(plugin);
+            form.setValue('panelDefinition.spec.plugin', {
+                kind: plugin.selection.kind,
+                spec: plugin.spec
+            });
+            setPlugin({
+                kind: plugin.selection.kind,
+                spec: plugin.spec
+            });
         },
         onHideQueryEditorChange: (isHidden)=>{
             setQueries(undefined, isHidden);
@@ -62,35 +72,31 @@ function PanelEditorForm(props) {
     });
     const titleAction = (0, _pluginsystem.getTitleAction)(initialAction, true);
     const submitText = (0, _pluginsystem.getSubmitText)(initialAction, true);
+    const { panelEditorSchema } = (0, _pluginsystem.useValidationSchemas)();
     const form = (0, _reacthookform.useForm)({
-        resolver: (0, _zod.zodResolver)(_validation.panelEditorValidationSchema),
+        resolver: (0, _zod.zodResolver)(panelEditorSchema),
         mode: 'onBlur',
-        defaultValues: {
-            name: initialPanelDef.spec.display.name,
-            groupId: initialGroupId,
-            description: initialPanelDef.spec.display.description,
-            type: pluginEditor.pendingKind ? pluginEditor.pendingKind : plugin.kind
-        }
+        defaultValues: initialValues
+    });
+    const links = (0, _reacthookform.useWatch)({
+        control: form.control,
+        name: 'panelDefinition.spec.links'
     });
-    const processForm = ()=>{
-        const values = {
-            groupId,
-            panelDefinition
-        };
-        onSave(values);
+    (0, _react.useEffect)(()=>{
+        setLinks(links);
+    }, [
+        setLinks,
+        links
+    ]);
+    const processForm = (data)=>{
+        onSave(data);
     };
     // When user click on cancel, several possibilities:
     // - create action: ask for discard approval
     // - update action: ask for discard approval if changed
     // - read action: don´t ask for discard approval
     function handleCancel() {
-        if (JSON.stringify({
-            groupId: initialGroupId,
-            panelDefinition: initialPanelDef
-        }) !== JSON.stringify({
-            groupId,
-            panelDefinition
-        })) {
+        if (JSON.stringify(initialValues) !== JSON.stringify(form.getValues())) {
             setDiscardDialogOpened(true);
         } else {
             onClose();
@@ -98,14 +104,13 @@ function PanelEditorForm(props) {
     }
     const handlePanelDefinitionChange = (nextPanelDefStr)=>{
         const nextPanelDef = JSON.parse(nextPanelDefStr);
-        const { kind: pluginKind , spec: pluginSpec  } = nextPanelDef.spec.plugin;
+        const { kind: pluginKind, spec: pluginSpec } = nextPanelDef.spec.plugin;
         // if panel plugin kind and spec are modified, then need to save current spec
         if (panelDefinition.spec.plugin.kind !== pluginKind && JSON.stringify(panelDefinition.spec.plugin.spec) !== JSON.stringify(pluginSpec)) {
             pluginEditor.rememberCurrentSpecState();
         }
         setPanelDefinition(nextPanelDef);
     };
-    var _panelGroup_title, _pluginEditor_error_message;
     return /*#__PURE__*/ (0, _jsxruntime.jsxs)(_reacthookform.FormProvider, {
         ...form,
         children: [
@@ -160,94 +165,93 @@ function PanelEditorForm(props) {
                             item: true,
                             xs: 8,
                             children: /*#__PURE__*/ (0, _jsxruntime.jsx)(_reacthookform.Controller, {
-                                name: "name",
-                                render: ({ field , fieldState  })=>{
-                                    var _fieldState_error;
-                                    /*#__PURE__*/ return (0, _jsxruntime.jsx)(_material.TextField, {
+                                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 = fieldState.error) === null || _fieldState_error === void 0 ? void 0 : _fieldState_error.message,
+                                        helperText: fieldState.error?.message,
+                                        value: field.value ?? '',
                                         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  })=>{
-                                    var _fieldState_error;
-                                    /*#__PURE__*/ return (0, _jsxruntime.jsx)(_material.TextField, {
+                                render: ({ field, fieldState })=>/*#__PURE__*/ (0, _jsxruntime.jsx)(_material.TextField, {
                                         select: true,
                                         ...field,
                                         required: true,
                                         fullWidth: true,
                                         label: "Group",
                                         error: !!fieldState.error,
-                                        helperText: (_fieldState_error = fieldState.error) === null || _fieldState_error === void 0 ? void 0 : _fieldState_error.message,
+                                        helperText: fieldState.error?.message,
                                         onChange: (event)=>{
                                             field.onChange(event);
-                                            setGroupId(+event.target.value);
                                         },
                                         children: panelGroups.map((panelGroup, index)=>/*#__PURE__*/ (0, _jsxruntime.jsx)(_material.MenuItem, {
                                                 value: panelGroup.id,
-                                                children: (_panelGroup_title = panelGroup.title) !== null && _panelGroup_title !== void 0 ? _panelGroup_title : `Group ${index + 1}`
+                                                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, {
-                                name: "description",
-                                render: ({ field , fieldState  })=>{
-                                    var _fieldState_error;
-                                    /*#__PURE__*/ return (0, _jsxruntime.jsx)(_material.TextField, {
+                                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 = fieldState.error) === null || _fieldState_error === void 0 ? void 0 : _fieldState_error.message,
+                                        helperText: fieldState.error?.message,
+                                        value: field.value ?? '',
                                         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, {
-                                name: "type",
-                                render: ({ field , fieldState  })=>{
-                                    var _pluginEditor_error, _fieldState_error;
-                                    /*#__PURE__*/ return (0, _jsxruntime.jsx)(_pluginsystem.PluginKindSelect, {
+                                control: form.control,
+                                name: "panelDefinition.spec.plugin.kind",
+                                render: ({ field, fieldState })=>/*#__PURE__*/ (0, _jsxruntime.jsx)(_pluginsystem.PluginKindSelect, {
                                         ...field,
-                                        pluginType: "Panel",
+                                        pluginTypes: [
+                                            'Panel'
+                                        ],
                                         required: true,
                                         fullWidth: true,
                                         label: "Type",
                                         disabled: pluginEditor.isLoading,
                                         error: !!pluginEditor.error || !!fieldState.error,
-                                        helperText: (_pluginEditor_error_message = (_pluginEditor_error = pluginEditor.error) === null || _pluginEditor_error === void 0 ? void 0 : _pluginEditor_error.message) !== null && _pluginEditor_error_message !== void 0 ? _pluginEditor_error_message : (_fieldState_error = fieldState.error) === null || _fieldState_error === void 0 ? void 0 : _fieldState_error.message,
+                                        helperText: pluginEditor.error?.message ?? fieldState.error?.message,
+                                        value: {
+                                            type: 'Panel',
+                                            kind: field.value
+                                        },
                                         onChange: (event)=>{
-                                            field.onChange(event);
-                                            pluginEditor.onKindChange(event);
+                                            field.onChange(event.kind);
+                                            pluginEditor.onSelectionChange(event);
                                         }
-                                    });
-                                }
+                                    })
                             })
                         }),
                         /*#__PURE__*/ (0, _jsxruntime.jsxs)(_material.Grid, {
@@ -273,6 +277,7 @@ function PanelEditorForm(props) {
                             children: /*#__PURE__*/ (0, _jsxruntime.jsx)(_components.ErrorBoundary, {
                                 FallbackComponent: _components.ErrorAlert,
                                 children: /*#__PURE__*/ (0, _jsxruntime.jsx)(_pluginsystem.PanelSpecEditor, {
+                                    control: form.control,
                                     panelDefinition: panelDefinition,
                                     onJSONChange: handlePanelDefinitionChange,
                                     onQueriesChange: (queries)=>{

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

@@ -25,21 +25,23 @@ const _react = require("react");
 const _material = require("@mui/material");
 const _pluginsystem = require("@perses-dev/plugin-system");
 const _Panel = require("../Panel");
-const _utils = require("../../utils");
 const PANEL_PREVIEW_HEIGHT = 300;
 const PANEL_PREVIEW_DEFAULT_WIDTH = 840;
-function PanelPreview({ panelDefinition  }) {
+function PanelPreview({ panelDefinition }) {
     const boxRef = (0, _react.useRef)(null);
     let width = PANEL_PREVIEW_DEFAULT_WIDTH;
     if (boxRef.current !== null) {
         width = boxRef.current.getBoundingClientRect().width;
     }
-    const suggestedStepMs = (0, _utils.useSuggestedStepMs)(width);
+    const suggestedStepMs = (0, _pluginsystem.useSuggestedStepMs)(width);
+    const { data: plugin, isPending } = (0, _pluginsystem.usePlugin)('Panel', panelDefinition.spec.plugin.kind);
+    if (isPending) {
+        return null;
+    }
     if (panelDefinition.spec.plugin.kind === '') {
         return null;
     }
-    var _panelDefinition_spec_queries;
-    const queries = (_panelDefinition_spec_queries = panelDefinition.spec.queries) !== null && _panelDefinition_spec_queries !== void 0 ? _panelDefinition_spec_queries : [];
+    const queries = panelDefinition.spec.queries ?? [];
     // map TimeSeriesQueryDefinition to Definition<UnknownSpec>
     const definitions = queries.length ? queries.map((query)=>{
         return {
@@ -53,7 +55,8 @@ function PanelPreview({ panelDefinition  }) {
         children: /*#__PURE__*/ (0, _jsxruntime.jsx)(_pluginsystem.DataQueriesProvider, {
             definitions: definitions,
             options: {
-                suggestedStepMs
+                suggestedStepMs,
+                ...plugin?.queryOptions
             },
             children: /*#__PURE__*/ (0, _jsxruntime.jsx)(_Panel.Panel, {
                 definition: panelDefinition