@perses-dev/dashboards 0.0.0-snapshot-color-palette-gen-test-0ebddd6 → 0.0.0-snapshot-saving-defaults-refinements-1b25cec

package/dist/cjs/components/DashboardStickyToolbar/DashboardStickyToolbar.js

@@ -0,0 +1,79 @@
+// Copyright 2023 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, "DashboardStickyToolbar", {
+    enumerable: true,
+    get: ()=>DashboardStickyToolbar
+});
+const _jsxRuntime = require("react/jsx-runtime");
+const _react = require("react");
+const _material = require("@mui/material");
+const _pinOutline = /*#__PURE__*/ _interopRequireDefault(require("mdi-material-ui/PinOutline"));
+const _pinOffOutline = /*#__PURE__*/ _interopRequireDefault(require("mdi-material-ui/PinOffOutline"));
+const _variables = require("../Variables");
+const _timeRangeControls = require("../TimeRangeControls");
+function _interopRequireDefault(obj) {
+    return obj && obj.__esModule ? obj : {
+        default: obj
+    };
+}
+function DashboardStickyToolbar(props) {
+    const [isPin, setIsPin] = (0, _react.useState)(props.initialVariableIsSticky);
+    const scrollTrigger = (0, _material.useScrollTrigger)({
+        disableHysteresis: true
+    });
+    const isSticky = scrollTrigger && props.initialVariableIsSticky && isPin;
+    return(// marginBottom={-1} counteracts the marginBottom={1} on every variable input.
+    // The margin on the inputs is for spacing between inputs, but is not meant to add space to bottom of the container.
+    /*#__PURE__*/ (0, _jsxRuntime.jsx)(_material.Box, {
+        marginBottom: -1,
+        "data-testid": "variable-list",
+        children: /*#__PURE__*/ (0, _jsxRuntime.jsx)(_material.AppBar, {
+            color: "inherit",
+            position: isSticky ? 'fixed' : 'static',
+            elevation: isSticky ? 4 : 0,
+            sx: {
+                backgroundColor: 'inherit',
+                ...props.sx
+            },
+            children: /*#__PURE__*/ (0, _jsxRuntime.jsxs)(_material.Box, {
+                display: "flex",
+                justifyContent: "space-between",
+                children: [
+                    /*#__PURE__*/ (0, _jsxRuntime.jsxs)(_material.Box, {
+                        display: "flex",
+                        flexWrap: "wrap",
+                        alignItems: "start",
+                        my: isSticky ? 2 : 0,
+                        ml: isSticky ? 2 : 0,
+                        children: [
+                            /*#__PURE__*/ (0, _jsxRuntime.jsx)(_variables.TemplateVariableList, {}),
+                            props.initialVariableIsSticky && /*#__PURE__*/ (0, _jsxRuntime.jsx)(_material.IconButton, {
+                                onClick: ()=>setIsPin(!isPin),
+                                children: isPin ? /*#__PURE__*/ (0, _jsxRuntime.jsx)(_pinOutline.default, {}) : /*#__PURE__*/ (0, _jsxRuntime.jsx)(_pinOffOutline.default, {})
+                            })
+                        ]
+                    }),
+                    isSticky && /*#__PURE__*/ (0, _jsxRuntime.jsx)(_material.Box, {
+                        my: 2,
+                        mr: 2,
+                        children: /*#__PURE__*/ (0, _jsxRuntime.jsx)(_timeRangeControls.TimeRangeControls, {})
+                    })
+                ]
+            })
+        })
+    }));
+}

package/dist/cjs/{stories/decorators/WithQueryParams.js → components/DashboardStickyToolbar/index.js}

@@ -14,16 +14,15 @@
 Object.defineProperty(exports, "__esModule", {
     value: true
 });
-Object.defineProperty(exports, "WithQueryParams", {
-    enumerable: true,
-    get: ()=>WithQueryParams
-});
-const _jsxRuntime = require("react/jsx-runtime");
-const _window = require("use-query-params/adapters/window");
-const _useQueryParams = require("use-query-params");
-const WithQueryParams = (Story)=>{
-    return /*#__PURE__*/ (0, _jsxRuntime.jsx)(_useQueryParams.QueryParamProvider, {
-        adapter: _window.WindowHistoryAdapter,
-        children: /*#__PURE__*/ (0, _jsxRuntime.jsx)(Story, {})
+_exportStar(require("./DashboardStickyToolbar"), exports);
+function _exportStar(from, to) {
+    Object.keys(from).forEach(function(k) {
+        if (k !== "default" && !Object.prototype.hasOwnProperty.call(to, k)) Object.defineProperty(to, k, {
+            enumerable: true,
+            get: function() {
+                return from[k];
+            }
+        });
     });
-};
+    return from;
+}

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

@@ -19,7 +19,6 @@ Object.defineProperty(exports, "DashboardToolbar", {
     get: ()=>DashboardToolbar
 });
 const _jsxRuntime = require("react/jsx-runtime");
-const _react = require("react");
 const _material = require("@mui/material");
 const _components = require("@perses-dev/components");
 const _context = require("../../context");
@@ -30,30 +29,17 @@ const _timeRangeControls = require("../TimeRangeControls");
 const _variables = require("../Variables");
 const _editButton = require("../EditButton");
 const _editJsonButton = require("../EditJsonButton");
+const _saveDashboardButton = require("../SaveDashboardButton");
+const _dashboardStickyToolbar = require("../DashboardStickyToolbar");
 const DashboardToolbar = (props)=>{
     const { dashboardName , dashboardTitleComponent , initialVariableIsSticky , isReadonly , onEditButtonClick , onCancelButtonClick , onSave ,  } = props;
-    const dashboard = (0, _context.useDashboard)();
-    const { isEditMode , setEditMode  } = (0, _context.useEditMode)();
+    const { isEditMode  } = (0, _context.useEditMode)();
     const isBiggerThanMd = (0, _material.useMediaQuery)((0, _material.useTheme)().breakpoints.up('md'));
     const isBiggerThanSm = (0, _material.useMediaQuery)((0, _material.useTheme)().breakpoints.up('sm'));
-    const [isSavingDashboard, setSavingDashboard] = (0, _react.useState)(false);
     const dashboardTitle = dashboardTitleComponent ? dashboardTitleComponent : /*#__PURE__*/ (0, _jsxRuntime.jsx)(_material.Typography, {
         variant: "h2",
         children: dashboardName
     });
-    const onSaveButtonClick = ()=>{
-        if (onSave !== undefined) {
-            setSavingDashboard(true);
-            onSave(dashboard.dashboard).then(()=>{
-                setSavingDashboard(false);
-                setEditMode(false);
-            }).catch(()=>{
-                setSavingDashboard(false);
-            });
-        } else {
-            setEditMode(false);
-        }
-    };
     const testId = 'dashboard-toolbar';
     return /*#__PURE__*/ (0, _jsxRuntime.jsx)(_jsxRuntime.Fragment, {
         children: isEditMode ? /*#__PURE__*/ (0, _jsxRuntime.jsxs)(_material.Stack, {
@@ -81,11 +67,9 @@ const DashboardToolbar = (props)=>{
                                     },
                                     children: "Dashboard managed via code only. Download JSON and commit changes to save."
                                 }),
-                                /*#__PURE__*/ (0, _jsxRuntime.jsx)(_material.Button, {
-                                    variant: "contained",
-                                    onClick: onSaveButtonClick,
-                                    disabled: isReadonly || isSavingDashboard,
-                                    children: "Save"
+                                /*#__PURE__*/ (0, _jsxRuntime.jsx)(_saveDashboardButton.SaveDashboardButton, {
+                                    onSave: onSave,
+                                    isDisabled: isReadonly
                                 }),
                                 /*#__PURE__*/ (0, _jsxRuntime.jsx)(_material.Button, {
                                     variant: "outlined",
@@ -106,7 +90,7 @@ const DashboardToolbar = (props)=>{
                     children: [
                         /*#__PURE__*/ (0, _jsxRuntime.jsx)(_components.ErrorBoundary, {
                             FallbackComponent: _components.ErrorAlert,
-                            children: /*#__PURE__*/ (0, _jsxRuntime.jsx)(_variables.TemplateVariableList, {
+                            children: /*#__PURE__*/ (0, _jsxRuntime.jsx)(_dashboardStickyToolbar.DashboardStickyToolbar, {
                                 initialVariableIsSticky: initialVariableIsSticky,
                                 sx: {
                                     backgroundColor: ({ palette  })=>palette.mode === 'dark' ? palette.background.default : palette.background.paper
@@ -194,7 +178,7 @@ const DashboardToolbar = (props)=>{
                     paddingY: 2,
                     children: /*#__PURE__*/ (0, _jsxRuntime.jsx)(_components.ErrorBoundary, {
                         FallbackComponent: _components.ErrorAlert,
-                        children: /*#__PURE__*/ (0, _jsxRuntime.jsx)(_variables.TemplateVariableList, {
+                        children: /*#__PURE__*/ (0, _jsxRuntime.jsx)(_dashboardStickyToolbar.DashboardStickyToolbar, {
                             initialVariableIsSticky: initialVariableIsSticky,
                             sx: {
                                 backgroundColor: ({ palette  })=>palette.mode === 'dark' ? palette.background.default : palette.background.paper

package/dist/cjs/components/EditJsonButton/EditJsonButton.js

@@ -34,6 +34,7 @@ const EditJsonButton = ()=>{
     return /*#__PURE__*/ (0, _jsxRuntime.jsx)(_components.InfoTooltip, {
         description: _constants.TOOLTIP_TEXT.editJson,
         children: /*#__PURE__*/ (0, _jsxRuntime.jsx)(_toolbarIconButton.ToolbarIconButton, {
+            "aria-label": _constants.TOOLTIP_TEXT.editJson,
             variant: "outlined",
             onClick: ()=>openEditJsonDialog(),
             children: /*#__PURE__*/ (0, _jsxRuntime.jsx)(_codeBraces.default, {})

package/dist/cjs/components/EditJsonDialog/EditJsonDialog.js

@@ -22,6 +22,7 @@ const _jsxRuntime = require("react/jsx-runtime");
 const _react = require("react");
 const _material = require("@mui/material");
 const _components = require("@perses-dev/components");
+const _pluginSystem = require("@perses-dev/plugin-system");
 const _dashboardProvider = require("../../context/DashboardProvider");
 const _useDashboard = require("../../context/useDashboard");
 const EditJsonDialog = ()=>{
@@ -42,11 +43,15 @@ const EditJsonDialog = ()=>{
 };
 const EditJsonDialogForm = ()=>{
     const { closeEditJsonDialog  } = (0, _dashboardProvider.useEditJsonDialog)();
+    const { setTimeRange  } = (0, _pluginSystem.useTimeRange)();
     const { dashboard , setDashboard  } = (0, _useDashboard.useDashboard)();
     const [draftDashboard, setDraftDashboard] = (0, _react.useState)(dashboard);
     const handleApply = (e)=>{
         e.preventDefault();
         setDashboard(draftDashboard);
+        setTimeRange({
+            pastDuration: draftDashboard.spec.duration
+        });
         closeEditJsonDialog();
     };
     return /*#__PURE__*/ (0, _jsxRuntime.jsxs)(_components.Dialog.Form, {

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

@@ -19,11 +19,14 @@ Object.defineProperty(exports, "GridItemContent", {
     get: ()=>GridItemContent
 });
 const _jsxRuntime = require("react/jsx-runtime");
+const _pluginSystem = require("@perses-dev/plugin-system");
 const _context = require("../../context");
+const _utils = require("../../utils");
 const _panel = require("../Panel/Panel");
 function GridItemContent(props) {
-    const { panelGroupItemId  } = props;
+    const { panelGroupItemId , width  } = props;
     const panelDefinition = (0, _context.usePanel)(panelGroupItemId);
+    const { spec: { queries  } ,  } = panelDefinition;
     const { isEditMode  } = (0, _context.useEditMode)();
     const { openEditPanel , openDeletePanelDialog , duplicatePanel  } = (0, _context.usePanelActions)(panelGroupItemId);
     // Provide actions to the panel when in edit mode
@@ -35,8 +38,23 @@ function GridItemContent(props) {
             onDeletePanelClick: openDeletePanelDialog
         };
     }
-    return /*#__PURE__*/ (0, _jsxRuntime.jsx)(_panel.Panel, {
-        definition: panelDefinition,
-        editHandlers: editHandlers
+    // map TimeSeriesQueryDefinition to Definition<UnknownSpec>
+    const suggestedStepMs = (0, _utils.useSuggestedStepMs)(width);
+    const queryDefinitions = queries !== null && queries !== void 0 ? queries : [];
+    const definitions = queryDefinitions.map((query)=>{
+        return {
+            kind: query.spec.plugin.kind,
+            spec: query.spec.plugin.spec
+        };
+    });
+    return /*#__PURE__*/ (0, _jsxRuntime.jsx)(_pluginSystem.DataQueriesProvider, {
+        definitions: definitions,
+        options: {
+            suggestedStepMs
+        },
+        children: /*#__PURE__*/ (0, _jsxRuntime.jsx)(_panel.Panel, {
+            definition: panelDefinition,
+            editHandlers: editHandlers
+        })
     });
 }

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

@@ -28,6 +28,7 @@ const _constants = require("../../constants");
 const _gridTitle = require("./GridTitle");
 const _gridItemContent = require("./GridItemContent");
 const _gridContainer = require("./GridContainer");
+const DEFAULT_MARGIN = 10;
 const ResponsiveGridLayout = (0, _reactGridLayout.WidthProvider)(_reactGridLayout.Responsive);
 function GridLayout(props) {
     const { panelGroupId /*...others */  } = props;
@@ -37,6 +38,7 @@ function GridLayout(props) {
     var ref;
     const [isOpen, setIsOpen] = (0, _react.useState)((ref = !groupDefinition.isCollapsed) !== null && ref !== void 0 ? ref : true);
     const { isEditMode  } = (0, _context.useEditMode)();
+    const [gridColWidth, setGridColWidth] = (0, _react.useState)(0);
     const handleLayoutChange = (currentLayout, allLayouts)=>{
         // Using the value from `allLayouts` instead of `currentLayout` because of
         // a bug in react-layout-grid where `currentLayout` does not adjust properly
@@ -47,6 +49,16 @@ function GridLayout(props) {
             updatePanelGroupLayouts(smallLayout);
         }
     };
+    /**
+   * Calculate the column width so we can determine the width of each panel for suggested step ms
+   * https://github.com/react-grid-layout/react-grid-layout/blob/master/lib/calculateUtils.js#L14-L35
+   */ const handleWidthChange = (containerWidth, margin, cols, containerPadding)=>{
+        const marginX = margin[0];
+        const marginWidth = marginX * (cols - 1);
+        const containerPaddingWidth = containerPadding[0] * 2;
+        // exclude margin and padding from total width
+        setGridColWidth((containerWidth - marginWidth - containerPaddingWidth) / cols);
+    };
     return /*#__PURE__*/ (0, _jsxRuntime.jsxs)(_gridContainer.GridContainer, {
         children: [
             groupDefinition.title !== undefined && /*#__PURE__*/ (0, _jsxRuntime.jsx)(_gridTitle.GridTitle, {
@@ -76,6 +88,10 @@ function GridLayout(props) {
                     ],
                     isDraggable: isEditMode,
                     isResizable: isEditMode,
+                    margin: [
+                        DEFAULT_MARGIN,
+                        DEFAULT_MARGIN
+                    ],
                     containerPadding: [
                         0,
                         10
@@ -84,14 +100,16 @@ function GridLayout(props) {
                         [_constants.GRID_LAYOUT_SMALL_BREAKPOINT]: groupDefinition.itemLayouts
                     },
                     onLayoutChange: handleLayoutChange,
-                    children: groupDefinition.itemLayouts.map(({ i  })=>/*#__PURE__*/ (0, _jsxRuntime.jsx)("div", {
+                    onWidthChange: handleWidthChange,
+                    children: groupDefinition.itemLayouts.map(({ i , w  })=>/*#__PURE__*/ (0, _jsxRuntime.jsx)("div", {
                             children: /*#__PURE__*/ (0, _jsxRuntime.jsx)(_components.ErrorBoundary, {
                                 FallbackComponent: _components.ErrorAlert,
                                 children: /*#__PURE__*/ (0, _jsxRuntime.jsx)(_gridItemContent.GridItemContent, {
                                     panelGroupItemId: {
                                         panelGroupId,
                                         panelGroupItemLayoutId: i
-                                    }
+                                    },
+                                    width: calculateGridItemWidth(w, gridColWidth)
                                 })
                             })
                         }, i))
@@ -100,3 +118,14 @@ function GridLayout(props) {
         ]
     });
 }
+/**
+ * Calculates grid item width
+ * @param w number of columns the grid item spans
+ * @param colWidth the width of each column in px
+ * @returns grid item's width in px
+ * https://github.com/react-grid-layout/react-grid-layout/blob/master/lib/calculateUtils.js#L14-L35
+ */ const calculateGridItemWidth = (w, colWidth)=>{
+    // 0 * Infinity === NaN, which causes problems with resize contraints
+    if (!Number.isFinite(w)) return w;
+    return Math.round(colWidth * w + Math.max(0, w - 1) * DEFAULT_MARGIN);
+};

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

@@ -42,24 +42,25 @@ function GridTitle(props) {
     const { isEditMode  } = (0, _context.useEditMode)();
     const text = /*#__PURE__*/ (0, _jsxRuntime.jsx)(_material.Typography, {
         variant: "h2",
-        sx: {
-            marginLeft: collapse !== undefined ? 1 : undefined
-        },
         children: title
     });
     return /*#__PURE__*/ (0, _jsxRuntime.jsx)(_material.Box, {
+        onClick: collapse === null || collapse === void 0 ? void 0 : collapse.onToggleOpen,
         sx: {
             display: 'flex',
             justifyContent: 'start',
             alignItems: 'center',
             padding: (theme)=>theme.spacing(1),
+            cursor: collapse ? 'pointer' : 'auto',
             backgroundColor: ({ palette  })=>palette.mode === 'dark' ? palette.background.paper : palette.background.default
         },
         "data-testid": "panel-group-header",
         children: collapse ? /*#__PURE__*/ (0, _jsxRuntime.jsxs)(_jsxRuntime.Fragment, {
             children: [
                 /*#__PURE__*/ (0, _jsxRuntime.jsx)(_material.IconButton, {
-                    onClick: collapse.onToggleOpen,
+                    sx: {
+                        marginRight: 1
+                    },
                     "aria-label": `${collapse.isOpen ? 'collapse' : 'expand'} group ${title}`,
                     children: collapse.isOpen ? /*#__PURE__*/ (0, _jsxRuntime.jsx)(_chevronDown.default, {}) : /*#__PURE__*/ (0, _jsxRuntime.jsx)(_chevronRight.default, {})
                 }),
@@ -72,7 +73,11 @@ function GridTitle(props) {
                             description: _constants.TOOLTIP_TEXT.addPanelToGroup,
                             children: /*#__PURE__*/ (0, _jsxRuntime.jsx)(_material.IconButton, {
                                 "aria-label": _constants.ARIA_LABEL_TEXT.addPanelToGroup(title),
-                                onClick: openAddPanel,
+                                onClick: (e)=>{
+                                    // Don't trigger expand/collapse
+                                    e.stopPropagation();
+                                    openAddPanel();
+                                },
                                 children: /*#__PURE__*/ (0, _jsxRuntime.jsx)(_chartBoxPlusOutline.default, {})
                             })
                         }),
@@ -80,7 +85,11 @@ function GridTitle(props) {
                             description: _constants.TOOLTIP_TEXT.editGroup,
                             children: /*#__PURE__*/ (0, _jsxRuntime.jsx)(_material.IconButton, {
                                 "aria-label": _constants.ARIA_LABEL_TEXT.editGroup(title),
-                                onClick: openEditPanelGroup,
+                                onClick: (e)=>{
+                                    // Don't trigger expand/collapse
+                                    e.stopPropagation();
+                                    openEditPanelGroup();
+                                },
                                 children: /*#__PURE__*/ (0, _jsxRuntime.jsx)(_pencilOutline.default, {})
                             })
                         }),
@@ -88,7 +97,11 @@ function GridTitle(props) {
                             description: _constants.TOOLTIP_TEXT.deleteGroup,
                             children: /*#__PURE__*/ (0, _jsxRuntime.jsx)(_material.IconButton, {
                                 "aria-label": _constants.ARIA_LABEL_TEXT.deleteGroup(title),
-                                onClick: ()=>openDeletePanelGroupDialog(panelGroupId),
+                                onClick: (e)=>{
+                                    // Don't trigger expand/collapse
+                                    e.stopPropagation();
+                                    openDeletePanelGroupDialog(panelGroupId);
+                                },
                                 children: /*#__PURE__*/ (0, _jsxRuntime.jsx)(_deleteOutline.default, {})
                             })
                         }),
@@ -97,7 +110,11 @@ function GridTitle(props) {
                             children: /*#__PURE__*/ (0, _jsxRuntime.jsx)(_material.IconButton, {
                                 "aria-label": _constants.ARIA_LABEL_TEXT.moveGroupDown(title),
                                 disabled: moveDown === undefined,
-                                onClick: moveDown,
+                                onClick: (e)=>{
+                                    // Don't trigger expand/collapse
+                                    e.stopPropagation();
+                                    moveDown && moveDown();
+                                },
                                 children: /*#__PURE__*/ (0, _jsxRuntime.jsx)(_arrowDown.default, {})
                             })
                         }),
@@ -106,7 +123,11 @@ function GridTitle(props) {
                             children: /*#__PURE__*/ (0, _jsxRuntime.jsx)(_material.IconButton, {
                                 "aria-label": _constants.ARIA_LABEL_TEXT.moveGroupUp(title),
                                 disabled: moveUp === undefined,
-                                onClick: moveUp,
+                                onClick: (e)=>{
+                                    // Don't trigger expand/collapse
+                                    e.stopPropagation();
+                                    moveUp && moveUp();
+                                },
                                 children: /*#__PURE__*/ (0, _jsxRuntime.jsx)(_arrowUp.default, {})
                             })
                         })

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

@@ -31,7 +31,7 @@ function _interopRequireDefault(obj) {
         default: obj
     };
 }
-function Panel(props) {
+const Panel = /*#__PURE__*/ (0, _react.memo)(function Panel(props) {
     const { definition , editHandlers , onMouseEnter , onMouseLeave , sx , ...others } = props;
     // Make sure we have an ID we can use for aria attributes
     const generatedPanelId = (0, _components.useId)('Panel');
@@ -116,4 +116,4 @@ function Panel(props) {
             })
         ]
     });
-}
+});

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

@@ -31,25 +31,26 @@ const _components = require("@perses-dev/components");
 const _pluginSystem = require("@perses-dev/plugin-system");
 const _context = require("../../context");
 const _panelPreview = require("./PanelPreview");
+const _usePanelEditor = require("./usePanelEditor");
 function PanelEditorForm(props) {
     var ref;
-    const { initialValues , onChange  } = props;
+    const { initialValues: { panelDefinition: initialPanelDef , groupId: initialGroupId  } , onChange ,  } = props;
     const panelGroups = (0, _context.useListPanelGroups)();
-    const [name, setName] = (0, _react.useState)(initialValues.name);
-    const [description, setDescription] = (0, _react.useState)(initialValues.description);
-    const [groupId, setGroupId] = (0, _react.useState)(initialValues.groupId);
-    const [kind, setKind] = (0, _react.useState)(initialValues.kind);
-    const [spec, setSpec] = (0, _react.useState)(initialValues.spec);
+    const [groupId, setGroupId] = (0, _react.useState)(initialGroupId);
+    const { panelDefinition , setName , setDescription , setQueries , setPlugin , setPanelDefinition  } = (0, _usePanelEditor.usePanelEditor)(initialPanelDef);
+    const { plugin  } = panelDefinition.spec;
     // Use common plugin editor logic even though we've split the inputs up in this form
     const pluginEditor = (0, _pluginSystem.usePluginEditor)({
         pluginType: 'Panel',
         value: {
-            kind,
-            spec
+            kind: plugin.kind,
+            spec: plugin.spec
         },
         onChange: (plugin)=>{
-            setKind(plugin.kind);
-            setSpec(plugin.spec);
+            setPlugin(plugin);
+        },
+        onHideQueryEditorChange: (isHidden)=>{
+            setQueries(undefined, isHidden);
         }
     });
     // Ignore string values (which would be an "empty" value from the Select) since we don't allow them to unset it
@@ -60,24 +61,26 @@ function PanelEditorForm(props) {
         }
         setGroupId(value);
     };
+    const handlePanelDefinitionChange = (nextPanelDef)=>{
+        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);
+    };
     (0, _react.useEffect)(()=>{
         const values = {
-            name,
-            description,
             groupId,
-            kind,
-            spec
+            panelDefinition
         };
         onChange(values);
     }, [
-        name,
-        description,
         groupId,
-        kind,
-        spec,
+        panelDefinition,
         onChange
     ]);
-    var _title, ref1;
+    var _name, _title, _description, ref1;
     return(// Grid maxHeight allows user to scroll inside Drawer to see all content
     /*#__PURE__*/ (0, _jsxRuntime.jsx)(_material.Box, {
         component: "form",
@@ -98,9 +101,11 @@ function PanelEditorForm(props) {
                         required: true,
                         fullWidth: true,
                         label: "Name",
-                        value: name,
+                        value: (_name = panelDefinition.spec.display.name) !== null && _name !== void 0 ? _name : '',
                         variant: "outlined",
-                        onChange: (e)=>setName(e.target.value)
+                        onChange: (e)=>{
+                            setName(e.target.value);
+                        }
                     })
                 }),
                 /*#__PURE__*/ (0, _jsxRuntime.jsx)(_material.Grid, {
@@ -133,9 +138,11 @@ function PanelEditorForm(props) {
                     children: /*#__PURE__*/ (0, _jsxRuntime.jsx)(_material.TextField, {
                         fullWidth: true,
                         label: "Description",
-                        value: description,
+                        value: (_description = panelDefinition.spec.display.description) !== null && _description !== void 0 ? _description : '',
                         variant: "outlined",
-                        onChange: (e)=>setDescription(e.target.value)
+                        onChange: (e)=>{
+                            setDescription(e.target.value);
+                        }
                     })
                 }),
                 /*#__PURE__*/ (0, _jsxRuntime.jsxs)(_material.Grid, {
@@ -156,7 +163,7 @@ function PanelEditorForm(props) {
                                     required: true,
                                     labelId: "panel-type-label",
                                     label: "Type",
-                                    value: pluginEditor.pendingKind ? pluginEditor.pendingKind : kind,
+                                    value: pluginEditor.pendingKind ? pluginEditor.pendingKind : plugin.kind,
                                     onChange: pluginEditor.onKindChange
                                 })
                             ]
@@ -178,11 +185,7 @@ function PanelEditorForm(props) {
                         /*#__PURE__*/ (0, _jsxRuntime.jsx)(_components.ErrorBoundary, {
                             FallbackComponent: _components.ErrorAlert,
                             children: /*#__PURE__*/ (0, _jsxRuntime.jsx)(_panelPreview.PanelPreview, {
-                                kind: kind,
-                                name: name,
-                                description: description,
-                                spec: spec,
-                                groupId: groupId
+                                panelDefinition: panelDefinition
                             })
                         })
                     ]
@@ -192,11 +195,15 @@ function PanelEditorForm(props) {
                     xs: 12,
                     children: /*#__PURE__*/ (0, _jsxRuntime.jsx)(_components.ErrorBoundary, {
                         FallbackComponent: _components.ErrorAlert,
-                        children: /*#__PURE__*/ (0, _jsxRuntime.jsx)(_pluginSystem.PluginSpecEditor, {
-                            pluginType: "Panel",
-                            pluginKind: kind,
-                            value: spec,
-                            onChange: pluginEditor.onSpecChange
+                        children: /*#__PURE__*/ (0, _jsxRuntime.jsx)(_pluginSystem.PanelSpecEditor, {
+                            panelDefinition: panelDefinition,
+                            onJSONChange: handlePanelDefinitionChange,
+                            onQueriesChange: (queries)=>{
+                                setQueries(queries);
+                            },
+                            onPluginSpecChange: (spec)=>{
+                                pluginEditor.onSpecChange(spec);
+                            }
                         })
                     })
                 })

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

@@ -19,29 +19,43 @@ Object.defineProperty(exports, "PanelPreview", {
     get: ()=>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");
-function PanelPreview({ name , description , kind , spec  }) {
-    const definition = {
-        kind: 'Panel',
-        spec: {
-            display: {
-                name,
-                description: description === '' ? undefined : description
-            },
-            plugin: {
-                kind,
-                spec
-            }
-        }
-    };
-    if (kind === '') {
+const _utils = require("../../utils");
+const PANEL_PREVIEW_HEIGHT = 300;
+const PANEL_PREVIEW_DEFAULT_WIDTH = 840;
+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);
+    if (panelDefinition.spec.plugin.kind === '') {
         return null;
     }
+    var _queries;
+    const queries = (_queries = panelDefinition.spec.queries) !== null && _queries !== void 0 ? _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, {
-        height: 300,
-        children: /*#__PURE__*/ (0, _jsxRuntime.jsx)(_panel.Panel, {
-            definition: definition
+        ref: boxRef,
+        height: PANEL_PREVIEW_HEIGHT,
+        children: /*#__PURE__*/ (0, _jsxRuntime.jsx)(_pluginSystem.DataQueriesProvider, {
+            definitions: definitions,
+            options: {
+                suggestedStepMs
+            },
+            children: /*#__PURE__*/ (0, _jsxRuntime.jsx)(_panel.Panel, {
+                definition: panelDefinition
+            })
         })
     });
 }