@perses-dev/dashboards 0.0.0-snapshot-color-palette-gen-test-bc1b508 → 0.0.0-snapshot-tooltip-highlight-c995fc8

package/dist/components/GridLayout/GridItemContent.js

@@ -11,13 +11,16 @@
 // See the License for the specific language governing permissions and
 // limitations under the License.
 import { jsx as _jsx } from "react/jsx-runtime";
+import { DataQueriesProvider } from '@perses-dev/plugin-system';
 import { useEditMode, usePanel, usePanelActions } from '../../context';
+import { useSuggestedStepMs } from '../../utils';
 import { Panel } from '../Panel/Panel';
 /**
  * Resolves the reference to panel content in a GridItemDefinition and renders the panel.
  */ export function GridItemContent(props) {
-    const { panelGroupItemId  } = props;
+    const { panelGroupItemId , width  } = props;
     const panelDefinition = usePanel(panelGroupItemId);
+    const { spec: { queries  } ,  } = panelDefinition;
     const { isEditMode  } = useEditMode();
     const { openEditPanel , openDeletePanelDialog , duplicatePanel  } = usePanelActions(panelGroupItemId);
     // Provide actions to the panel when in edit mode
@@ -29,9 +32,24 @@ import { Panel } from '../Panel/Panel';
             onDeletePanelClick: openDeletePanelDialog
         };
     }
-    return /*#__PURE__*/ _jsx(Panel, {
-        definition: panelDefinition,
-        editHandlers: editHandlers
+    // map TimeSeriesQueryDefinition to Definition<UnknownSpec>
+    const suggestedStepMs = 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__*/ _jsx(DataQueriesProvider, {
+        definitions: definitions,
+        options: {
+            suggestedStepMs
+        },
+        children: /*#__PURE__*/ _jsx(Panel, {
+            definition: panelDefinition,
+            editHandlers: editHandlers
+        })
     });
 }
 

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

@@ -1 +1 @@
-{"version":3,"sources":["../../../src/components/GridLayout/GridItemContent.tsx"],"sourcesContent":["// Copyright 2023 The Perses Authors\n// Licensed under the Apache License, Version 2.0 (the \"License\");\n// you may not use this file except in compliance with the License.\n// You may obtain a copy of the License at\n//\n// http://www.apache.org/licenses/LICENSE-2.0\n//\n// Unless required by applicable law or agreed to in writing, software\n// distributed under the License is distributed on an \"AS IS\" BASIS,\n// WITHOUT WARRANTIES OR CONDITIONS OF ANY KIND, either express or implied.\n// See the License for the specific language governing permissions and\n// limitations under the License.\n\nimport { PanelGroupItemId, useEditMode, usePanel, usePanelActions } from '../../context';\nimport { Panel, PanelProps } from '../Panel/Panel';\n\nexport interface GridItemContentProps {\n  panelGroupItemId: PanelGroupItemId;\n}\n\n/**\n * Resolves the reference to panel content in a GridItemDefinition and renders the panel.\n */\nexport function GridItemContent(props: GridItemContentProps) {\n  const { panelGroupItemId } = props;\n  const panelDefinition = usePanel(panelGroupItemId);\n  const { isEditMode } = useEditMode();\n  const { openEditPanel, openDeletePanelDialog, duplicatePanel } = usePanelActions(panelGroupItemId);\n\n  // Provide actions to the panel when in edit mode\n  let editHandlers: PanelProps['editHandlers'] = undefined;\n  if (isEditMode) {\n    editHandlers = {\n      onEditPanelClick: openEditPanel,\n      onDuplicatePanelClick: duplicatePanel,\n      onDeletePanelClick: openDeletePanelDialog,\n    };\n  }\n\n  return <Panel definition={panelDefinition} editHandlers={editHandlers} />;\n}\n"],"names":["useEditMode","usePanel","usePanelActions","Panel","GridItemContent","props","panelGroupItemId","panelDefinition","isEditMode","openEditPanel","openDeletePanelDialog","duplicatePanel","editHandlers","undefined","onEditPanelClick","onDuplicatePanelClick","onDeletePanelClick","definition"],"mappings":"AAAA,oCAAoC;AACpC,kEAAkE;AAClE,mEAAmE;AACnE,0CAA0C;AAC1C,EAAE;AACF,6CAA6C;AAC7C,EAAE;AACF,sEAAsE;AACtE,oEAAoE;AACpE,2EAA2E;AAC3E,sEAAsE;AACtE,iCAAiC;AAEjC;AAAA,SAA2BA,WAAW,EAAEC,QAAQ,EAAEC,eAAe,QAAQ,eAAe,CAAC;AACzF,SAASC,KAAK,QAAoB,gBAAgB,CAAC;AAMnD;;CAEC,GACD,OAAO,SAASC,eAAe,CAACC,KAA2B,EAAE;IAC3D,MAAM,EAAEC,gBAAgB,CAAA,EAAE,GAAGD,KAAK,AAAC;IACnC,MAAME,eAAe,GAAGN,QAAQ,CAACK,gBAAgB,CAAC,AAAC;IACnD,MAAM,EAAEE,UAAU,CAAA,EAAE,GAAGR,WAAW,EAAE,AAAC;IACrC,MAAM,EAAES,aAAa,CAAA,EAAEC,qBAAqB,CAAA,EAAEC,cAAc,CAAA,EAAE,GAAGT,eAAe,CAACI,gBAAgB,CAAC,AAAC;IAEnG,iDAAiD;IACjD,IAAIM,YAAY,GAA+BC,SAAS,AAAC;IACzD,IAAIL,UAAU,EAAE;QACdI,YAAY,GAAG;YACbE,gBAAgB,EAAEL,aAAa;YAC/BM,qBAAqB,EAAEJ,cAAc;YACrCK,kBAAkB,EAAEN,qBAAqB;SAC1C,CAAC;IACJ,CAAC;IAED,qBAAO,KAACP,KAAK;QAACc,UAAU,EAAEV,eAAe;QAAEK,YAAY,EAAEA,YAAY;MAAI,CAAC;AAC5E,CAAC"}
+{"version":3,"sources":["../../../src/components/GridLayout/GridItemContent.tsx"],"sourcesContent":["// Copyright 2023 The Perses Authors\n// Licensed under the Apache License, Version 2.0 (the \"License\");\n// you may not use this file except in compliance with the License.\n// You may obtain a copy of the License at\n//\n// http://www.apache.org/licenses/LICENSE-2.0\n//\n// Unless required by applicable law or agreed to in writing, software\n// distributed under the License is distributed on an \"AS IS\" BASIS,\n// WITHOUT WARRANTIES OR CONDITIONS OF ANY KIND, either express or implied.\n// See the License for the specific language governing permissions and\n// limitations under the License.\n\nimport { QueryDefinition } from '@perses-dev/core';\nimport { DataQueriesProvider } from '@perses-dev/plugin-system';\nimport { PanelGroupItemId, useEditMode, usePanel, usePanelActions } from '../../context';\nimport { useSuggestedStepMs } from '../../utils';\nimport { Panel, PanelProps } from '../Panel/Panel';\n\nexport interface GridItemContentProps {\n  panelGroupItemId: PanelGroupItemId;\n  width: number; // necessary for determining the suggested step ms\n}\n\n/**\n * Resolves the reference to panel content in a GridItemDefinition and renders the panel.\n */\nexport function GridItemContent(props: GridItemContentProps) {\n  const { panelGroupItemId, width } = props;\n  const panelDefinition = usePanel(panelGroupItemId);\n  const {\n    spec: { queries },\n  } = panelDefinition;\n  const { isEditMode } = useEditMode();\n  const { openEditPanel, openDeletePanelDialog, duplicatePanel } = usePanelActions(panelGroupItemId);\n\n  // Provide actions to the panel when in edit mode\n  let editHandlers: PanelProps['editHandlers'] = undefined;\n  if (isEditMode) {\n    editHandlers = {\n      onEditPanelClick: openEditPanel,\n      onDuplicatePanelClick: duplicatePanel,\n      onDeletePanelClick: openDeletePanelDialog,\n    };\n  }\n\n  // map TimeSeriesQueryDefinition to Definition<UnknownSpec>\n  const suggestedStepMs = useSuggestedStepMs(width);\n  const queryDefinitions = queries ?? [];\n  const definitions = queryDefinitions.map((query: QueryDefinition) => {\n    return {\n      kind: query.spec.plugin.kind,\n      spec: query.spec.plugin.spec,\n    };\n  });\n\n  return (\n    <DataQueriesProvider definitions={definitions} options={{ suggestedStepMs }}>\n      <Panel definition={panelDefinition} editHandlers={editHandlers} />\n    </DataQueriesProvider>\n  );\n}\n"],"names":["DataQueriesProvider","useEditMode","usePanel","usePanelActions","useSuggestedStepMs","Panel","GridItemContent","props","panelGroupItemId","width","panelDefinition","spec","queries","isEditMode","openEditPanel","openDeletePanelDialog","duplicatePanel","editHandlers","undefined","onEditPanelClick","onDuplicatePanelClick","onDeletePanelClick","suggestedStepMs","queryDefinitions","definitions","map","query","kind","plugin","options","definition"],"mappings":"AAAA,oCAAoC;AACpC,kEAAkE;AAClE,mEAAmE;AACnE,0CAA0C;AAC1C,EAAE;AACF,6CAA6C;AAC7C,EAAE;AACF,sEAAsE;AACtE,oEAAoE;AACpE,2EAA2E;AAC3E,sEAAsE;AACtE,iCAAiC;AAEjC;AACA,SAASA,mBAAmB,QAAQ,2BAA2B,CAAC;AAChE,SAA2BC,WAAW,EAAEC,QAAQ,EAAEC,eAAe,QAAQ,eAAe,CAAC;AACzF,SAASC,kBAAkB,QAAQ,aAAa,CAAC;AACjD,SAASC,KAAK,QAAoB,gBAAgB,CAAC;AAOnD;;CAEC,GACD,OAAO,SAASC,eAAe,CAACC,KAA2B,EAAE;IAC3D,MAAM,EAAEC,gBAAgB,CAAA,EAAEC,KAAK,CAAA,EAAE,GAAGF,KAAK,AAAC;IAC1C,MAAMG,eAAe,GAAGR,QAAQ,CAACM,gBAAgB,CAAC,AAAC;IACnD,MAAM,EACJG,IAAI,EAAE,EAAEC,OAAO,CAAA,EAAE,CAAA,IAClB,GAAGF,eAAe,AAAC;IACpB,MAAM,EAAEG,UAAU,CAAA,EAAE,GAAGZ,WAAW,EAAE,AAAC;IACrC,MAAM,EAAEa,aAAa,CAAA,EAAEC,qBAAqB,CAAA,EAAEC,cAAc,CAAA,EAAE,GAAGb,eAAe,CAACK,gBAAgB,CAAC,AAAC;IAEnG,iDAAiD;IACjD,IAAIS,YAAY,GAA+BC,SAAS,AAAC;IACzD,IAAIL,UAAU,EAAE;QACdI,YAAY,GAAG;YACbE,gBAAgB,EAAEL,aAAa;YAC/BM,qBAAqB,EAAEJ,cAAc;YACrCK,kBAAkB,EAAEN,qBAAqB;SAC1C,CAAC;IACJ,CAAC;IAED,2DAA2D;IAC3D,MAAMO,eAAe,GAAGlB,kBAAkB,CAACK,KAAK,CAAC,AAAC;IAClD,MAAMc,gBAAgB,GAAGX,OAAO,aAAPA,OAAO,cAAPA,OAAO,GAAI,EAAE,AAAC;IACvC,MAAMY,WAAW,GAAGD,gBAAgB,CAACE,GAAG,CAAC,CAACC,KAAsB,GAAK;QACnE,OAAO;YACLC,IAAI,EAAED,KAAK,CAACf,IAAI,CAACiB,MAAM,CAACD,IAAI;YAC5BhB,IAAI,EAAEe,KAAK,CAACf,IAAI,CAACiB,MAAM,CAACjB,IAAI;SAC7B,CAAC;IACJ,CAAC,CAAC,AAAC;IAEH,qBACE,KAACX,mBAAmB;QAACwB,WAAW,EAAEA,WAAW;QAAEK,OAAO,EAAE;YAAEP,eAAe;SAAE;kBACzE,cAAA,KAACjB,KAAK;YAACyB,UAAU,EAAEpB,eAAe;YAAEO,YAAY,EAAEA,YAAY;UAAI;MAC9C,CACtB;AACJ,CAAC"}

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

@@ -1 +1 @@
-{"version":3,"file":"GridLayout.d.ts","sourceRoot":"","sources":["../../../src/components/GridLayout/GridLayout.tsx"],"names":[],"mappings":";AAgBA,OAAO,EAAoD,YAAY,EAAE,MAAM,eAAe,CAAC;AAQ/F,MAAM,WAAW,eAAe;IAC9B,YAAY,EAAE,YAAY,CAAC;CAC5B;AAED;;GAEG;AACH,wBAAgB,UAAU,CAAC,KAAK,EAAE,eAAe,eA0DhD"}
+{"version":3,"file":"GridLayout.d.ts","sourceRoot":"","sources":["../../../src/components/GridLayout/GridLayout.tsx"],"names":[],"mappings":";AAgBA,OAAO,EAAoD,YAAY,EAAE,MAAM,eAAe,CAAC;AAS/F,MAAM,WAAW,eAAe;IAC9B,YAAY,EAAE,YAAY,CAAC;CAC5B;AAED;;GAEG;AACH,wBAAgB,UAAU,CAAC,KAAK,EAAE,eAAe,eAkFhD"}

package/dist/components/GridLayout/GridLayout.js

@@ -20,6 +20,7 @@ import { GRID_LAYOUT_COLS, GRID_LAYOUT_SMALL_BREAKPOINT } from '../../constants'
 import { GridTitle } from './GridTitle';
 import { GridItemContent } from './GridItemContent';
 import { GridContainer } from './GridContainer';
+const DEFAULT_MARGIN = 10;
 const ResponsiveGridLayout = WidthProvider(Responsive);
 /**
  * Layout component that arranges children in a Grid based on the definition.
@@ -31,6 +32,7 @@ const ResponsiveGridLayout = WidthProvider(Responsive);
     var ref;
     const [isOpen, setIsOpen] = useState((ref = !groupDefinition.isCollapsed) !== null && ref !== void 0 ? ref : true);
     const { isEditMode  } = useEditMode();
+    const [gridColWidth, setGridColWidth] = 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
@@ -41,6 +43,16 @@ const ResponsiveGridLayout = WidthProvider(Responsive);
             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__*/ _jsxs(GridContainer, {
         children: [
             groupDefinition.title !== undefined && /*#__PURE__*/ _jsx(GridTitle, {
@@ -70,6 +82,10 @@ const ResponsiveGridLayout = WidthProvider(Responsive);
                     ],
                     isDraggable: isEditMode,
                     isResizable: isEditMode,
+                    margin: [
+                        DEFAULT_MARGIN,
+                        DEFAULT_MARGIN
+                    ],
                     containerPadding: [
                         0,
                         10
@@ -78,14 +94,16 @@ const ResponsiveGridLayout = WidthProvider(Responsive);
                         [GRID_LAYOUT_SMALL_BREAKPOINT]: groupDefinition.itemLayouts
                     },
                     onLayoutChange: handleLayoutChange,
-                    children: groupDefinition.itemLayouts.map(({ i  })=>/*#__PURE__*/ _jsx("div", {
+                    onWidthChange: handleWidthChange,
+                    children: groupDefinition.itemLayouts.map(({ i , w  })=>/*#__PURE__*/ _jsx("div", {
                             children: /*#__PURE__*/ _jsx(ErrorBoundary, {
                                 FallbackComponent: ErrorAlert,
                                 children: /*#__PURE__*/ _jsx(GridItemContent, {
                                     panelGroupItemId: {
                                         panelGroupId,
                                         panelGroupItemLayoutId: i
-                                    }
+                                    },
+                                    width: calculateGridItemWidth(w, gridColWidth)
                                 })
                             })
                         }, i))
@@ -94,5 +112,16 @@ const ResponsiveGridLayout = WidthProvider(Responsive);
         ]
     });
 }
+/**
+ * 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);
+};
 
 //# sourceMappingURL=GridLayout.js.map

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

@@ -1 +1 @@
-{"version":3,"sources":["../../../src/components/GridLayout/GridLayout.tsx"],"sourcesContent":["// Copyright 2023 The Perses Authors\n// Licensed under the Apache License, Version 2.0 (the \"License\");\n// you may not use this file except in compliance with the License.\n// You may obtain a copy of the License at\n//\n// http://www.apache.org/licenses/LICENSE-2.0\n//\n// Unless required by applicable law or agreed to in writing, software\n// distributed under the License is distributed on an \"AS IS\" BASIS,\n// WITHOUT WARRANTIES OR CONDITIONS OF ANY KIND, either express or implied.\n// See the License for the specific language governing permissions and\n// limitations under the License.\nimport { useState } from 'react';\nimport { Responsive, WidthProvider, Layouts, Layout } from 'react-grid-layout';\nimport { Collapse, useTheme } from '@mui/material';\nimport { ErrorAlert, ErrorBoundary } from '@perses-dev/components';\nimport { useEditMode, usePanelGroup, usePanelGroupActions, PanelGroupId } from '../../context';\nimport { GRID_LAYOUT_COLS, GRID_LAYOUT_SMALL_BREAKPOINT } from '../../constants';\nimport { GridTitle } from './GridTitle';\nimport { GridItemContent } from './GridItemContent';\nimport { GridContainer } from './GridContainer';\n\nconst ResponsiveGridLayout = WidthProvider(Responsive);\n\nexport interface GridLayoutProps {\n  panelGroupId: PanelGroupId;\n}\n\n/**\n * Layout component that arranges children in a Grid based on the definition.\n */\nexport function GridLayout(props: GridLayoutProps) {\n  const { panelGroupId /*...others */ } = props;\n  const theme = useTheme();\n  const groupDefinition = usePanelGroup(panelGroupId);\n  const { updatePanelGroupLayouts } = usePanelGroupActions(panelGroupId);\n\n  const [isOpen, setIsOpen] = useState(!groupDefinition.isCollapsed ?? true);\n  const { isEditMode } = useEditMode();\n\n  const handleLayoutChange = (currentLayout: Layout[], allLayouts: Layouts) => {\n    // Using the value from `allLayouts` instead of `currentLayout` because of\n    // a bug in react-layout-grid where `currentLayout` does not adjust properly\n    // when going to a smaller breakpoint and then back to a larger breakpoint.\n    // https://github.com/react-grid-layout/react-grid-layout/issues/1663\n    const smallLayout = allLayouts[GRID_LAYOUT_SMALL_BREAKPOINT];\n    if (smallLayout) {\n      updatePanelGroupLayouts(smallLayout);\n    }\n  };\n\n  return (\n    <GridContainer>\n      {groupDefinition.title !== undefined && (\n        <GridTitle\n          panelGroupId={panelGroupId}\n          title={groupDefinition.title}\n          collapse={\n            groupDefinition.isCollapsed === undefined\n              ? undefined\n              : { isOpen, onToggleOpen: () => setIsOpen((current) => !current) }\n          }\n        />\n      )}\n      <Collapse in={isOpen} unmountOnExit appear={false} data-testid=\"panel-group-content\">\n        <ResponsiveGridLayout\n          className=\"layout\"\n          breakpoints={{ sm: theme.breakpoints.values.sm, xxs: 0 }}\n          cols={GRID_LAYOUT_COLS}\n          rowHeight={30}\n          draggableHandle={'.drag-handle'}\n          resizeHandles={['se']}\n          isDraggable={isEditMode}\n          isResizable={isEditMode}\n          containerPadding={[0, 10]}\n          layouts={{ [GRID_LAYOUT_SMALL_BREAKPOINT]: groupDefinition.itemLayouts }}\n          onLayoutChange={handleLayoutChange}\n        >\n          {groupDefinition.itemLayouts.map(({ i }) => (\n            <div key={i}>\n              <ErrorBoundary FallbackComponent={ErrorAlert}>\n                <GridItemContent panelGroupItemId={{ panelGroupId, panelGroupItemLayoutId: i }} />\n              </ErrorBoundary>\n            </div>\n          ))}\n        </ResponsiveGridLayout>\n      </Collapse>\n    </GridContainer>\n  );\n}\n"],"names":["useState","Responsive","WidthProvider","Collapse","useTheme","ErrorAlert","ErrorBoundary","useEditMode","usePanelGroup","usePanelGroupActions","GRID_LAYOUT_COLS","GRID_LAYOUT_SMALL_BREAKPOINT","GridTitle","GridItemContent","GridContainer","ResponsiveGridLayout","GridLayout","props","panelGroupId","theme","groupDefinition","updatePanelGroupLayouts","isOpen","setIsOpen","isCollapsed","isEditMode","handleLayoutChange","currentLayout","allLayouts","smallLayout","title","undefined","collapse","onToggleOpen","current","in","unmountOnExit","appear","data-testid","className","breakpoints","sm","values","xxs","cols","rowHeight","draggableHandle","resizeHandles","isDraggable","isResizable","containerPadding","layouts","itemLayouts","onLayoutChange","map","i","div","FallbackComponent","panelGroupItemId","panelGroupItemLayoutId"],"mappings":"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"}
+{"version":3,"sources":["../../../src/components/GridLayout/GridLayout.tsx"],"sourcesContent":["// Copyright 2023 The Perses Authors\n// Licensed under the Apache License, Version 2.0 (the \"License\");\n// you may not use this file except in compliance with the License.\n// You may obtain a copy of the License at\n//\n// http://www.apache.org/licenses/LICENSE-2.0\n//\n// Unless required by applicable law or agreed to in writing, software\n// distributed under the License is distributed on an \"AS IS\" BASIS,\n// WITHOUT WARRANTIES OR CONDITIONS OF ANY KIND, either express or implied.\n// See the License for the specific language governing permissions and\n// limitations under the License.\nimport { useState } from 'react';\nimport { Responsive, WidthProvider, Layouts, Layout } from 'react-grid-layout';\nimport { Collapse, useTheme } from '@mui/material';\nimport { ErrorAlert, ErrorBoundary } from '@perses-dev/components';\nimport { useEditMode, usePanelGroup, usePanelGroupActions, PanelGroupId } from '../../context';\nimport { GRID_LAYOUT_COLS, GRID_LAYOUT_SMALL_BREAKPOINT } from '../../constants';\nimport { GridTitle } from './GridTitle';\nimport { GridItemContent } from './GridItemContent';\nimport { GridContainer } from './GridContainer';\n\nconst DEFAULT_MARGIN = 10;\nconst ResponsiveGridLayout = WidthProvider(Responsive);\n\nexport interface GridLayoutProps {\n  panelGroupId: PanelGroupId;\n}\n\n/**\n * Layout component that arranges children in a Grid based on the definition.\n */\nexport function GridLayout(props: GridLayoutProps) {\n  const { panelGroupId /*...others */ } = props;\n  const theme = useTheme();\n  const groupDefinition = usePanelGroup(panelGroupId);\n  const { updatePanelGroupLayouts } = usePanelGroupActions(panelGroupId);\n\n  const [isOpen, setIsOpen] = useState(!groupDefinition.isCollapsed ?? true);\n  const { isEditMode } = useEditMode();\n\n  const [gridColWidth, setGridColWidth] = useState(0);\n\n  const handleLayoutChange = (currentLayout: Layout[], allLayouts: Layouts) => {\n    // Using the value from `allLayouts` instead of `currentLayout` because of\n    // a bug in react-layout-grid where `currentLayout` does not adjust properly\n    // when going to a smaller breakpoint and then back to a larger breakpoint.\n    // https://github.com/react-grid-layout/react-grid-layout/issues/1663\n    const smallLayout = allLayouts[GRID_LAYOUT_SMALL_BREAKPOINT];\n    if (smallLayout) {\n      updatePanelGroupLayouts(smallLayout);\n    }\n  };\n\n  /**\n   * Calculate the column width so we can determine the width of each panel for suggested step ms\n   * https://github.com/react-grid-layout/react-grid-layout/blob/master/lib/calculateUtils.js#L14-L35\n   */\n  const handleWidthChange = (\n    containerWidth: number,\n    margin: [number, number],\n    cols: number,\n    containerPadding: [number, number]\n  ) => {\n    const marginX = margin[0];\n    const marginWidth = marginX * (cols - 1);\n    const containerPaddingWidth = containerPadding[0] * 2;\n    // exclude margin and padding from total width\n    setGridColWidth((containerWidth - marginWidth - containerPaddingWidth) / cols);\n  };\n\n  return (\n    <GridContainer>\n      {groupDefinition.title !== undefined && (\n        <GridTitle\n          panelGroupId={panelGroupId}\n          title={groupDefinition.title}\n          collapse={\n            groupDefinition.isCollapsed === undefined\n              ? undefined\n              : { isOpen, onToggleOpen: () => setIsOpen((current) => !current) }\n          }\n        />\n      )}\n      <Collapse in={isOpen} unmountOnExit appear={false} data-testid=\"panel-group-content\">\n        <ResponsiveGridLayout\n          className=\"layout\"\n          breakpoints={{ sm: theme.breakpoints.values.sm, xxs: 0 }}\n          cols={GRID_LAYOUT_COLS}\n          rowHeight={30}\n          draggableHandle={'.drag-handle'}\n          resizeHandles={['se']}\n          isDraggable={isEditMode}\n          isResizable={isEditMode}\n          margin={[DEFAULT_MARGIN, DEFAULT_MARGIN]}\n          containerPadding={[0, 10]}\n          layouts={{ [GRID_LAYOUT_SMALL_BREAKPOINT]: groupDefinition.itemLayouts }}\n          onLayoutChange={handleLayoutChange}\n          onWidthChange={handleWidthChange}\n        >\n          {groupDefinition.itemLayouts.map(({ i, w }) => (\n            <div key={i}>\n              <ErrorBoundary FallbackComponent={ErrorAlert}>\n                <GridItemContent\n                  panelGroupItemId={{ panelGroupId, panelGroupItemLayoutId: i }}\n                  width={calculateGridItemWidth(w, gridColWidth)}\n                />\n              </ErrorBoundary>\n            </div>\n          ))}\n        </ResponsiveGridLayout>\n      </Collapse>\n    </GridContainer>\n  );\n}\n\n/**\n * Calculates grid item width\n * @param w number of columns the grid item spans\n * @param colWidth the width of each column in px\n * @returns grid item's width in px\n * https://github.com/react-grid-layout/react-grid-layout/blob/master/lib/calculateUtils.js#L14-L35\n */\nconst calculateGridItemWidth = (w: number, colWidth: number) => {\n  // 0 * Infinity === NaN, which causes problems with resize contraints\n  if (!Number.isFinite(w)) return w;\n  return Math.round(colWidth * w + Math.max(0, w - 1) * DEFAULT_MARGIN);\n};\n"],"names":["useState","Responsive","WidthProvider","Collapse","useTheme","ErrorAlert","ErrorBoundary","useEditMode","usePanelGroup","usePanelGroupActions","GRID_LAYOUT_COLS","GRID_LAYOUT_SMALL_BREAKPOINT","GridTitle","GridItemContent","GridContainer","DEFAULT_MARGIN","ResponsiveGridLayout","GridLayout","props","panelGroupId","theme","groupDefinition","updatePanelGroupLayouts","isOpen","setIsOpen","isCollapsed","isEditMode","gridColWidth","setGridColWidth","handleLayoutChange","currentLayout","allLayouts","smallLayout","handleWidthChange","containerWidth","margin","cols","containerPadding","marginX","marginWidth","containerPaddingWidth","title","undefined","collapse","onToggleOpen","current","in","unmountOnExit","appear","data-testid","className","breakpoints","sm","values","xxs","rowHeight","draggableHandle","resizeHandles","isDraggable","isResizable","layouts","itemLayouts","onLayoutChange","onWidthChange","map","i","w","div","FallbackComponent","panelGroupItemId","panelGroupItemLayoutId","width","calculateGridItemWidth","colWidth","Number","isFinite","Math","round","max"],"mappings":"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"}

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

@@ -9,5 +9,5 @@ export interface PanelProps extends CardProps<'section'> {
 /**
  * Renders a PanelDefinition's content inside of a Card.
  */
-export declare function Panel(props: PanelProps): JSX.Element;
+export declare const Panel: import("react").NamedExoticComponent<PanelProps>;
 //# sourceMappingURL=Panel.d.ts.map

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

@@ -1 +1 @@
-{"version":3,"file":"Panel.d.ts","sourceRoot":"","sources":["../../../src/components/Panel/Panel.tsx"],"names":[],"mappings":";AAiBA,OAAO,EAAE,eAAe,EAAE,MAAM,kBAAkB,CAAC;AACnD,OAAO,EAAQ,SAAS,EAAe,MAAM,eAAe,CAAC;AAC7D,OAAO,EAAe,gBAAgB,EAAE,MAAM,eAAe,CAAC;AAG9D,MAAM,WAAW,UAAW,SAAQ,SAAS,CAAC,SAAS,CAAC;IACtD,UAAU,EAAE,eAAe,CAAC;IAC5B,YAAY,CAAC,EAAE,gBAAgB,CAAC,cAAc,CAAC,CAAC;CACjD;AAED;;GAEG;AACH,wBAAgB,KAAK,CAAC,KAAK,EAAE,UAAU,eAuFtC"}
+{"version":3,"file":"Panel.d.ts","sourceRoot":"","sources":["../../../src/components/Panel/Panel.tsx"],"names":[],"mappings":";AAiBA,OAAO,EAAE,eAAe,EAAE,MAAM,kBAAkB,CAAC;AACnD,OAAO,EAAQ,SAAS,EAAe,MAAM,eAAe,CAAC;AAC7D,OAAO,EAAe,gBAAgB,EAAE,MAAM,eAAe,CAAC;AAG9D,MAAM,WAAW,UAAW,SAAQ,SAAS,CAAC,SAAS,CAAC;IACtD,UAAU,EAAE,eAAe,CAAC;IAC5B,YAAY,CAAC,EAAE,gBAAgB,CAAC,cAAc,CAAC,CAAC;CACjD;AAED;;GAEG;AACH,eAAO,MAAM,KAAK,kDAuFhB,CAAC"}

package/dist/components/Panel/Panel.js

@@ -11,7 +11,7 @@
 // See the License for the specific language governing permissions and
 // limitations under the License.
 import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
-import { useState, useMemo } from 'react';
+import { useState, useMemo, memo } from 'react';
 import useResizeObserver from 'use-resize-observer';
 import { useInView } from 'react-intersection-observer';
 import { ErrorBoundary, ErrorAlert, combineSx, useId, useChartsTheme } from '@perses-dev/components';
@@ -20,7 +20,7 @@ import { PanelHeader } from './PanelHeader';
 import { PanelContent } from './PanelContent';
 /**
  * Renders a PanelDefinition's content inside of a Card.
- */ export function Panel(props) {
+ */ export const Panel = /*#__PURE__*/ 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 = useId('Panel');
@@ -105,6 +105,6 @@ import { PanelContent } from './PanelContent';
             })
         ]
     });
-}
+});
 
 //# sourceMappingURL=Panel.js.map

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

@@ -1 +1 @@
-{"version":3,"sources":["../../../src/components/Panel/Panel.tsx"],"sourcesContent":["// Copyright 2023 The Perses Authors\n// Licensed under the Apache License, Version 2.0 (the \"License\");\n// you may not use this file except in compliance with the License.\n// You may obtain a copy of the License at\n//\n// http://www.apache.org/licenses/LICENSE-2.0\n//\n// Unless required by applicable law or agreed to in writing, software\n// distributed under the License is distributed on an \"AS IS\" BASIS,\n// WITHOUT WARRANTIES OR CONDITIONS OF ANY KIND, either express or implied.\n// See the License for the specific language governing permissions and\n// limitations under the License.\n\nimport { useState, useMemo } from 'react';\nimport useResizeObserver from 'use-resize-observer';\nimport { useInView } from 'react-intersection-observer';\nimport { ErrorBoundary, ErrorAlert, combineSx, useId, useChartsTheme } from '@perses-dev/components';\nimport { PanelDefinition } from '@perses-dev/core';\nimport { Card, CardProps, CardContent } from '@mui/material';\nimport { PanelHeader, PanelHeaderProps } from './PanelHeader';\nimport { PanelContent } from './PanelContent';\n\nexport interface PanelProps extends CardProps<'section'> {\n  definition: PanelDefinition;\n  editHandlers?: PanelHeaderProps['editHandlers'];\n}\n\n/**\n * Renders a PanelDefinition's content inside of a Card.\n */\nexport function Panel(props: PanelProps) {\n  const { definition, editHandlers, onMouseEnter, onMouseLeave, sx, ...others } = props;\n\n  // Make sure we have an ID we can use for aria attributes\n  const generatedPanelId = useId('Panel');\n  const headerId = `${generatedPanelId}-header`;\n\n  const [contentElement, setContentElement] = useState<HTMLElement | null>(null);\n\n  const { width, height } = useResizeObserver({ ref: contentElement });\n\n  const contentDimensions = useMemo(() => {\n    if (width === undefined || height === undefined) return undefined;\n    return { width, height };\n  }, [width, height]);\n\n  const { ref, inView } = useInView({\n    threshold: 0.3,\n    initialInView: false,\n    triggerOnce: true,\n  });\n\n  const chartsTheme = useChartsTheme();\n\n  const handleMouseEnter: CardProps['onMouseEnter'] = (e) => {\n    onMouseEnter?.(e);\n  };\n\n  const handleMouseLeave: CardProps['onMouseLeave'] = (e) => {\n    onMouseLeave?.(e);\n  };\n\n  return (\n    <Card\n      ref={ref}\n      component=\"section\"\n      sx={combineSx(\n        {\n          width: '100%',\n          height: '100%',\n          display: 'flex',\n          flexFlow: 'column nowrap',\n        },\n        sx\n      )}\n      variant=\"outlined\"\n      onMouseEnter={handleMouseEnter}\n      onMouseLeave={handleMouseLeave}\n      aria-labelledby={headerId}\n      aria-describedby={headerId}\n      data-testid=\"panel\"\n      {...others}\n    >\n      <PanelHeader\n        id={headerId}\n        title={definition.spec.display.name}\n        description={definition.spec.display.description}\n        editHandlers={editHandlers}\n        sx={{ paddingX: `${chartsTheme.container.padding.default}px` }}\n      />\n      <CardContent\n        component=\"figure\"\n        sx={{\n          position: 'relative',\n          overflow: 'hidden',\n          flexGrow: 1,\n          margin: 0,\n          padding: 0,\n          // Override MUI default style for last-child\n          ':last-child': {\n            padding: 0,\n          },\n        }}\n        ref={setContentElement}\n      >\n        <ErrorBoundary FallbackComponent={ErrorAlert} resetKeys={[definition.spec.plugin.spec]}>\n          {inView === true && (\n            <PanelContent\n              panelPluginKind={definition.spec.plugin.kind}\n              spec={definition.spec.plugin.spec}\n              contentDimensions={contentDimensions}\n            />\n          )}\n        </ErrorBoundary>\n      </CardContent>\n    </Card>\n  );\n}\n"],"names":["useState","useMemo","useResizeObserver","useInView","ErrorBoundary","ErrorAlert","combineSx","useId","useChartsTheme","Card","CardContent","PanelHeader","PanelContent","Panel","props","definition","editHandlers","onMouseEnter","onMouseLeave","sx","others","generatedPanelId","headerId","contentElement","setContentElement","width","height","ref","contentDimensions","undefined","inView","threshold","initialInView","triggerOnce","chartsTheme","handleMouseEnter","e","handleMouseLeave","component","display","flexFlow","variant","aria-labelledby","aria-describedby","data-testid","id","title","spec","name","description","paddingX","container","padding","default","position","overflow","flexGrow","margin","FallbackComponent","resetKeys","plugin","panelPluginKind","kind"],"mappings":"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"}
+{"version":3,"sources":["../../../src/components/Panel/Panel.tsx"],"sourcesContent":["// Copyright 2023 The Perses Authors\n// Licensed under the Apache License, Version 2.0 (the \"License\");\n// you may not use this file except in compliance with the License.\n// You may obtain a copy of the License at\n//\n// http://www.apache.org/licenses/LICENSE-2.0\n//\n// Unless required by applicable law or agreed to in writing, software\n// distributed under the License is distributed on an \"AS IS\" BASIS,\n// WITHOUT WARRANTIES OR CONDITIONS OF ANY KIND, either express or implied.\n// See the License for the specific language governing permissions and\n// limitations under the License.\n\nimport { useState, useMemo, memo } from 'react';\nimport useResizeObserver from 'use-resize-observer';\nimport { useInView } from 'react-intersection-observer';\nimport { ErrorBoundary, ErrorAlert, combineSx, useId, useChartsTheme } from '@perses-dev/components';\nimport { PanelDefinition } from '@perses-dev/core';\nimport { Card, CardProps, CardContent } from '@mui/material';\nimport { PanelHeader, PanelHeaderProps } from './PanelHeader';\nimport { PanelContent } from './PanelContent';\n\nexport interface PanelProps extends CardProps<'section'> {\n  definition: PanelDefinition;\n  editHandlers?: PanelHeaderProps['editHandlers'];\n}\n\n/**\n * Renders a PanelDefinition's content inside of a Card.\n */\nexport const Panel = memo(function Panel(props: PanelProps) {\n  const { definition, editHandlers, onMouseEnter, onMouseLeave, sx, ...others } = props;\n\n  // Make sure we have an ID we can use for aria attributes\n  const generatedPanelId = useId('Panel');\n  const headerId = `${generatedPanelId}-header`;\n\n  const [contentElement, setContentElement] = useState<HTMLElement | null>(null);\n\n  const { width, height } = useResizeObserver({ ref: contentElement });\n\n  const contentDimensions = useMemo(() => {\n    if (width === undefined || height === undefined) return undefined;\n    return { width, height };\n  }, [width, height]);\n\n  const { ref, inView } = useInView({\n    threshold: 0.3,\n    initialInView: false,\n    triggerOnce: true,\n  });\n\n  const chartsTheme = useChartsTheme();\n\n  const handleMouseEnter: CardProps['onMouseEnter'] = (e) => {\n    onMouseEnter?.(e);\n  };\n\n  const handleMouseLeave: CardProps['onMouseLeave'] = (e) => {\n    onMouseLeave?.(e);\n  };\n\n  return (\n    <Card\n      ref={ref}\n      component=\"section\"\n      sx={combineSx(\n        {\n          width: '100%',\n          height: '100%',\n          display: 'flex',\n          flexFlow: 'column nowrap',\n        },\n        sx\n      )}\n      variant=\"outlined\"\n      onMouseEnter={handleMouseEnter}\n      onMouseLeave={handleMouseLeave}\n      aria-labelledby={headerId}\n      aria-describedby={headerId}\n      data-testid=\"panel\"\n      {...others}\n    >\n      <PanelHeader\n        id={headerId}\n        title={definition.spec.display.name}\n        description={definition.spec.display.description}\n        editHandlers={editHandlers}\n        sx={{ paddingX: `${chartsTheme.container.padding.default}px` }}\n      />\n      <CardContent\n        component=\"figure\"\n        sx={{\n          position: 'relative',\n          overflow: 'hidden',\n          flexGrow: 1,\n          margin: 0,\n          padding: 0,\n          // Override MUI default style for last-child\n          ':last-child': {\n            padding: 0,\n          },\n        }}\n        ref={setContentElement}\n      >\n        <ErrorBoundary FallbackComponent={ErrorAlert} resetKeys={[definition.spec.plugin.spec]}>\n          {inView === true && (\n            <PanelContent\n              panelPluginKind={definition.spec.plugin.kind}\n              spec={definition.spec.plugin.spec}\n              contentDimensions={contentDimensions}\n            />\n          )}\n        </ErrorBoundary>\n      </CardContent>\n    </Card>\n  );\n});\n"],"names":["useState","useMemo","memo","useResizeObserver","useInView","ErrorBoundary","ErrorAlert","combineSx","useId","useChartsTheme","Card","CardContent","PanelHeader","PanelContent","Panel","props","definition","editHandlers","onMouseEnter","onMouseLeave","sx","others","generatedPanelId","headerId","contentElement","setContentElement","width","height","ref","contentDimensions","undefined","inView","threshold","initialInView","triggerOnce","chartsTheme","handleMouseEnter","e","handleMouseLeave","component","display","flexFlow","variant","aria-labelledby","aria-describedby","data-testid","id","title","spec","name","description","paddingX","container","padding","default","position","overflow","flexGrow","margin","FallbackComponent","resetKeys","plugin","panelPluginKind","kind"],"mappings":"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"}

package/dist/components/PanelDrawer/PanelEditorForm.d.ts.map

@@ -1 +1 @@
-{"version":3,"file":"PanelEditorForm.d.ts","sourceRoot":"","sources":["../../../src/components/PanelDrawer/PanelEditorForm.tsx"],"names":[],"mappings":";AA6BA,OAAO,EAAE,iBAAiB,EAAE,MAAM,oDAAoD,CAAC;AAGvF,MAAM,WAAW,oBAAoB;IACnC,aAAa,EAAE,iBAAiB,CAAC;IACjC,QAAQ,EAAE,CAAC,MAAM,EAAE,iBAAiB,KAAK,IAAI,CAAC;CAC/C;AAED,wBAAgB,eAAe,CAAC,KAAK,EAAE,oBAAoB,eAwG1D;AAED;;GAEG;AACH,eAAO,MAAM,iBAAiB,sBAAsB,CAAC"}
+{"version":3,"file":"PanelEditorForm.d.ts","sourceRoot":"","sources":["../../../src/components/PanelDrawer/PanelEditorForm.tsx"],"names":[],"mappings":";AA8BA,OAAO,EAAE,iBAAiB,EAAE,MAAM,oDAAoD,CAAC;AAIvF,MAAM,WAAW,oBAAoB;IACnC,aAAa,EAAE,iBAAiB,CAAC;IACjC,QAAQ,EAAE,CAAC,MAAM,EAAE,iBAAiB,KAAK,IAAI,CAAC;CAC/C;AAED,wBAAgB,eAAe,CAAC,KAAK,EAAE,oBAAoB,eAqI1D;AAED;;GAEG;AACH,eAAO,MAAM,iBAAiB,sBAAsB,CAAC"}

package/dist/components/PanelDrawer/PanelEditorForm.js

@@ -14,28 +14,29 @@ import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
 import { useEffect, useState } from 'react';
 import { Box, FormControl, FormHelperText, Grid, InputLabel, MenuItem, Select, TextField, Typography } from '@mui/material';
 import { ErrorAlert, ErrorBoundary } from '@perses-dev/components';
-import { PluginKindSelect, PluginSpecEditor, usePluginEditor } from '@perses-dev/plugin-system';
+import { PluginKindSelect, usePluginEditor, PanelSpecEditor } from '@perses-dev/plugin-system';
 import { useListPanelGroups } from '../../context';
 import { PanelPreview } from './PanelPreview';
+import { usePanelEditor } from './usePanelEditor';
 export function PanelEditorForm(props) {
     var ref;
-    const { initialValues , onChange  } = props;
+    const { initialValues: { panelDefinition: initialPanelDef , groupId: initialGroupId  } , onChange ,  } = props;
     const panelGroups = useListPanelGroups();
-    const [name, setName] = useState(initialValues.name);
-    const [description, setDescription] = useState(initialValues.description);
-    const [groupId, setGroupId] = useState(initialValues.groupId);
-    const [kind, setKind] = useState(initialValues.kind);
-    const [spec, setSpec] = useState(initialValues.spec);
+    const [groupId, setGroupId] = useState(initialGroupId);
+    const { panelDefinition , setName , setDescription , setQueries , setPlugin , setPanelDefinition  } = usePanelEditor(initialPanelDef);
+    const { plugin  } = panelDefinition.spec;
     // Use common plugin editor logic even though we've split the inputs up in this form
     const pluginEditor = 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
@@ -46,24 +47,26 @@ export 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);
+    };
     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__*/ _jsx(Box, {
         component: "form",
@@ -84,9 +87,11 @@ export 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__*/ _jsx(Grid, {
@@ -119,9 +124,11 @@ export function PanelEditorForm(props) {
                     children: /*#__PURE__*/ _jsx(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__*/ _jsxs(Grid, {
@@ -142,7 +149,7 @@ export 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
                                 })
                             ]
@@ -164,11 +171,7 @@ export function PanelEditorForm(props) {
                         /*#__PURE__*/ _jsx(ErrorBoundary, {
                             FallbackComponent: ErrorAlert,
                             children: /*#__PURE__*/ _jsx(PanelPreview, {
-                                kind: kind,
-                                name: name,
-                                description: description,
-                                spec: spec,
-                                groupId: groupId
+                                panelDefinition: panelDefinition
                             })
                         })
                     ]
@@ -178,11 +181,15 @@ export function PanelEditorForm(props) {
                     xs: 12,
                     children: /*#__PURE__*/ _jsx(ErrorBoundary, {
                         FallbackComponent: ErrorAlert,
-                        children: /*#__PURE__*/ _jsx(PluginSpecEditor, {
-                            pluginType: "Panel",
-                            pluginKind: kind,
-                            value: spec,
-                            onChange: pluginEditor.onSpecChange
+                        children: /*#__PURE__*/ _jsx(PanelSpecEditor, {
+                            panelDefinition: panelDefinition,
+                            onJSONChange: handlePanelDefinitionChange,
+                            onQueriesChange: (queries)=>{
+                                setQueries(queries);
+                            },
+                            onPluginSpecChange: (spec)=>{
+                                pluginEditor.onSpecChange(spec);
+                            }
                         })
                     })
                 })

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

@@ -1 +1 @@
-{"version":3,"sources":["../../../src/components/PanelDrawer/PanelEditorForm.tsx"],"sourcesContent":["// Copyright 2023 The Perses Authors\n// Licensed under the Apache License, Version 2.0 (the \"License\");\n// you may not use this file except in compliance with the License.\n// You may obtain a copy of the License at\n//\n// http://www.apache.org/licenses/LICENSE-2.0\n//\n// Unless required by applicable law or agreed to in writing, software\n// distributed under the License is distributed on an \"AS IS\" BASIS,\n// WITHOUT WARRANTIES OR CONDITIONS OF ANY KIND, either express or implied.\n// See the License for the specific language governing permissions and\n// limitations under the License.\n\nimport { useEffect, useState } from 'react';\nimport {\n  Box,\n  FormControl,\n  FormHelperText,\n  Grid,\n  InputLabel,\n  MenuItem,\n  Select,\n  SelectProps,\n  TextField,\n  Typography,\n} from '@mui/material';\nimport { ErrorAlert, ErrorBoundary } from '@perses-dev/components';\nimport { PluginKindSelect, PluginSpecEditor, usePluginEditor } from '@perses-dev/plugin-system';\nimport { useListPanelGroups } from '../../context';\nimport { PanelEditorValues } from '../../context/DashboardProvider/panel-editor-slice';\nimport { PanelPreview } from './PanelPreview';\n\nexport interface PanelEditorFormProps {\n  initialValues: PanelEditorValues;\n  onChange: (values: PanelEditorValues) => void;\n}\n\nexport function PanelEditorForm(props: PanelEditorFormProps) {\n  const { initialValues, onChange } = props;\n\n  const panelGroups = useListPanelGroups();\n\n  const [name, setName] = useState(initialValues.name);\n  const [description, setDescription] = useState(initialValues.description);\n  const [groupId, setGroupId] = useState(initialValues.groupId);\n  const [kind, setKind] = useState(initialValues.kind);\n  const [spec, setSpec] = useState(initialValues.spec);\n\n  // Use common plugin editor logic even though we've split the inputs up in this form\n  const pluginEditor = usePluginEditor({\n    pluginType: 'Panel',\n    value: { kind, spec },\n    onChange: (plugin) => {\n      setKind(plugin.kind);\n      setSpec(plugin.spec);\n    },\n  });\n\n  // Ignore string values (which would be an \"empty\" value from the Select) since we don't allow them to unset it\n  const handleGroupChange: SelectProps<number>['onChange'] = (e) => {\n    const { value } = e.target;\n    if (typeof value === 'string') {\n      return;\n    }\n    setGroupId(value);\n  };\n\n  useEffect(() => {\n    const values: PanelEditorValues = { name, description, groupId, kind, spec };\n    onChange(values);\n  }, [name, description, groupId, kind, spec, onChange]);\n\n  return (\n    // Grid maxHeight allows user to scroll inside Drawer to see all content\n    <Box\n      component=\"form\"\n      id={panelEditorFormId}\n      sx={{ flex: 1, overflowY: 'scroll', padding: (theme) => theme.spacing(2) }}\n    >\n      <Grid container spacing={2}>\n        <Grid item xs={8}>\n          <TextField\n            required\n            fullWidth\n            label=\"Name\"\n            value={name}\n            variant=\"outlined\"\n            onChange={(e) => setName(e.target.value)}\n          />\n        </Grid>\n        <Grid item xs={4}>\n          <FormControl fullWidth>\n            <InputLabel id=\"select-group\">Group</InputLabel>\n            <Select required labelId=\"select-group\" label=\"Group\" value={groupId} onChange={handleGroupChange}>\n              {panelGroups.map((panelGroup, index) => (\n                <MenuItem key={panelGroup.id} value={panelGroup.id}>\n                  {panelGroup.title ?? `Group ${index + 1}`}\n                </MenuItem>\n              ))}\n            </Select>\n          </FormControl>\n        </Grid>\n        <Grid item xs={8}>\n          <TextField\n            fullWidth\n            label=\"Description\"\n            value={description}\n            variant=\"outlined\"\n            onChange={(e) => setDescription(e.target.value)}\n          />\n        </Grid>\n        <Grid item xs={4}>\n          <FormControl fullWidth disabled={pluginEditor.isLoading} error={pluginEditor.error !== null}>\n            <InputLabel id=\"panel-type-label\">Type</InputLabel>\n            <PluginKindSelect\n              pluginType=\"Panel\"\n              required\n              labelId=\"panel-type-label\"\n              label=\"Type\"\n              value={pluginEditor.pendingKind ? pluginEditor.pendingKind : kind}\n              onChange={pluginEditor.onKindChange}\n            />\n          </FormControl>\n          <FormHelperText>{pluginEditor.error?.message ?? ''}</FormHelperText>\n        </Grid>\n        <Grid item xs={12}>\n          <Typography variant=\"h4\" marginBottom={1}>\n            Preview\n          </Typography>\n          <ErrorBoundary FallbackComponent={ErrorAlert}>\n            <PanelPreview kind={kind} name={name} description={description} spec={spec} groupId={groupId} />\n          </ErrorBoundary>\n        </Grid>\n        <Grid item xs={12}>\n          <ErrorBoundary FallbackComponent={ErrorAlert}>\n            <PluginSpecEditor pluginType=\"Panel\" pluginKind={kind} value={spec} onChange={pluginEditor.onSpecChange} />\n          </ErrorBoundary>\n        </Grid>\n      </Grid>\n    </Box>\n  );\n}\n\n/**\n * The `id` attribute added to the `PanelEditorForm` component, allowing submit buttons to live outside the form.\n */\nexport const panelEditorFormId = 'panel-editor-form';\n"],"names":["useEffect","useState","Box","FormControl","FormHelperText","Grid","InputLabel","MenuItem","Select","TextField","Typography","ErrorAlert","ErrorBoundary","PluginKindSelect","PluginSpecEditor","usePluginEditor","useListPanelGroups","PanelPreview","PanelEditorForm","props","pluginEditor","initialValues","onChange","panelGroups","name","setName","description","setDescription","groupId","setGroupId","kind","setKind","spec","setSpec","pluginType","value","plugin","handleGroupChange","e","target","values","panelGroup","component","id","panelEditorFormId","sx","flex","overflowY","padding","theme","spacing","container","item","xs","required","fullWidth","label","variant","labelId","map","index","title","disabled","isLoading","error","pendingKind","onKindChange","message","marginBottom","FallbackComponent","pluginKind","onSpecChange"],"mappings":"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"}
+{"version":3,"sources":["../../../src/components/PanelDrawer/PanelEditorForm.tsx"],"sourcesContent":["// Copyright 2023 The Perses Authors\n// Licensed under the Apache License, Version 2.0 (the \"License\");\n// you may not use this file except in compliance with the License.\n// You may obtain a copy of the License at\n//\n// http://www.apache.org/licenses/LICENSE-2.0\n//\n// Unless required by applicable law or agreed to in writing, software\n// distributed under the License is distributed on an \"AS IS\" BASIS,\n// WITHOUT WARRANTIES OR CONDITIONS OF ANY KIND, either express or implied.\n// See the License for the specific language governing permissions and\n// limitations under the License.\n\nimport { useEffect, useState } from 'react';\nimport {\n  Box,\n  FormControl,\n  FormHelperText,\n  Grid,\n  InputLabel,\n  MenuItem,\n  Select,\n  SelectProps,\n  TextField,\n  Typography,\n} from '@mui/material';\nimport { PanelDefinition } from '@perses-dev/core';\nimport { ErrorAlert, ErrorBoundary } from '@perses-dev/components';\nimport { PluginKindSelect, usePluginEditor, PanelSpecEditor } from '@perses-dev/plugin-system';\nimport { useListPanelGroups } from '../../context';\nimport { PanelEditorValues } from '../../context/DashboardProvider/panel-editor-slice';\nimport { PanelPreview } from './PanelPreview';\nimport { usePanelEditor } from './usePanelEditor';\n\nexport interface PanelEditorFormProps {\n  initialValues: PanelEditorValues;\n  onChange: (values: PanelEditorValues) => void;\n}\n\nexport function PanelEditorForm(props: PanelEditorFormProps) {\n  const {\n    initialValues: { panelDefinition: initialPanelDef, groupId: initialGroupId },\n    onChange,\n  } = props;\n\n  const panelGroups = useListPanelGroups();\n  const [groupId, setGroupId] = useState(initialGroupId);\n  const { panelDefinition, setName, setDescription, setQueries, setPlugin, setPanelDefinition } =\n    usePanelEditor(initialPanelDef);\n  const { plugin } = panelDefinition.spec;\n\n  // Use common plugin editor logic even though we've split the inputs up in this form\n  const pluginEditor = usePluginEditor({\n    pluginType: 'Panel',\n    value: { kind: plugin.kind, spec: plugin.spec },\n    onChange: (plugin) => {\n      setPlugin(plugin);\n    },\n    onHideQueryEditorChange: (isHidden) => {\n      setQueries(undefined, isHidden);\n    },\n  });\n\n  // Ignore string values (which would be an \"empty\" value from the Select) since we don't allow them to unset it\n  const handleGroupChange: SelectProps<number>['onChange'] = (e) => {\n    const { value } = e.target;\n    if (typeof value === 'string') {\n      return;\n    }\n    setGroupId(value);\n  };\n\n  const handlePanelDefinitionChange = (nextPanelDef: PanelDefinition) => {\n    const { kind: pluginKind, spec: pluginSpec } = nextPanelDef.spec.plugin;\n    // if panel plugin kind and spec are modified, then need to save current spec\n    if (\n      panelDefinition.spec.plugin.kind !== pluginKind &&\n      JSON.stringify(panelDefinition.spec.plugin.spec) !== JSON.stringify(pluginSpec)\n    ) {\n      pluginEditor.rememberCurrentSpecState();\n    }\n\n    setPanelDefinition(nextPanelDef);\n  };\n\n  useEffect(() => {\n    const values: PanelEditorValues = { groupId, panelDefinition };\n    onChange(values);\n  }, [groupId, panelDefinition, onChange]);\n\n  return (\n    // Grid maxHeight allows user to scroll inside Drawer to see all content\n    <Box\n      component=\"form\"\n      id={panelEditorFormId}\n      sx={{ flex: 1, overflowY: 'scroll', padding: (theme) => theme.spacing(2) }}\n    >\n      <Grid container spacing={2}>\n        <Grid item xs={8}>\n          <TextField\n            required\n            fullWidth\n            label=\"Name\"\n            value={panelDefinition.spec.display.name ?? ''}\n            variant=\"outlined\"\n            onChange={(e) => {\n              setName(e.target.value);\n            }}\n          />\n        </Grid>\n        <Grid item xs={4}>\n          <FormControl fullWidth>\n            <InputLabel id=\"select-group\">Group</InputLabel>\n            <Select required labelId=\"select-group\" label=\"Group\" value={groupId} onChange={handleGroupChange}>\n              {panelGroups.map((panelGroup, index) => (\n                <MenuItem key={panelGroup.id} value={panelGroup.id}>\n                  {panelGroup.title ?? `Group ${index + 1}`}\n                </MenuItem>\n              ))}\n            </Select>\n          </FormControl>\n        </Grid>\n        <Grid item xs={8}>\n          <TextField\n            fullWidth\n            label=\"Description\"\n            value={panelDefinition.spec.display.description ?? ''}\n            variant=\"outlined\"\n            onChange={(e) => {\n              setDescription(e.target.value);\n            }}\n          />\n        </Grid>\n        <Grid item xs={4}>\n          <FormControl fullWidth disabled={pluginEditor.isLoading} error={pluginEditor.error !== null}>\n            <InputLabel id=\"panel-type-label\">Type</InputLabel>\n            <PluginKindSelect\n              pluginType=\"Panel\"\n              required\n              labelId=\"panel-type-label\"\n              label=\"Type\"\n              value={pluginEditor.pendingKind ? pluginEditor.pendingKind : plugin.kind}\n              onChange={pluginEditor.onKindChange}\n            />\n          </FormControl>\n          <FormHelperText>{pluginEditor.error?.message ?? ''}</FormHelperText>\n        </Grid>\n        <Grid item xs={12}>\n          <Typography variant=\"h4\" marginBottom={1}>\n            Preview\n          </Typography>\n          <ErrorBoundary FallbackComponent={ErrorAlert}>\n            <PanelPreview panelDefinition={panelDefinition} />\n          </ErrorBoundary>\n        </Grid>\n        <Grid item xs={12}>\n          <ErrorBoundary FallbackComponent={ErrorAlert}>\n            <PanelSpecEditor\n              panelDefinition={panelDefinition}\n              onJSONChange={handlePanelDefinitionChange}\n              onQueriesChange={(queries) => {\n                setQueries(queries);\n              }}\n              onPluginSpecChange={(spec) => {\n                pluginEditor.onSpecChange(spec);\n              }}\n            />\n          </ErrorBoundary>\n        </Grid>\n      </Grid>\n    </Box>\n  );\n}\n\n/**\n * The `id` attribute added to the `PanelEditorForm` component, allowing submit buttons to live outside the form.\n */\nexport const panelEditorFormId = 'panel-editor-form';\n"],"names":["useEffect","useState","Box","FormControl","FormHelperText","Grid","InputLabel","MenuItem","Select","TextField","Typography","ErrorAlert","ErrorBoundary","PluginKindSelect","usePluginEditor","PanelSpecEditor","useListPanelGroups","PanelPreview","usePanelEditor","PanelEditorForm","props","pluginEditor","initialValues","panelDefinition","initialPanelDef","groupId","initialGroupId","onChange","panelGroups","setGroupId","setName","setDescription","setQueries","setPlugin","setPanelDefinition","plugin","spec","pluginType","value","kind","onHideQueryEditorChange","isHidden","undefined","handleGroupChange","e","target","handlePanelDefinitionChange","nextPanelDef","pluginKind","pluginSpec","JSON","stringify","rememberCurrentSpecState","values","panelGroup","component","id","panelEditorFormId","sx","flex","overflowY","padding","theme","spacing","container","item","xs","required","fullWidth","label","display","name","variant","labelId","map","index","title","description","disabled","isLoading","error","pendingKind","onKindChange","message","marginBottom","FallbackComponent","onJSONChange","onQueriesChange","queries","onPluginSpecChange","onSpecChange"],"mappings":"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"}

package/dist/components/PanelDrawer/PanelPreview.d.ts

@@ -1,4 +1,4 @@
 /// <reference types="react" />
 import { PanelEditorValues } from '../../context';
-export declare function PanelPreview({ name, description, kind, spec }: PanelEditorValues): JSX.Element | null;
+export declare function PanelPreview({ panelDefinition }: Pick<PanelEditorValues, 'panelDefinition'>): JSX.Element | null;
 //# sourceMappingURL=PanelPreview.d.ts.map

package/dist/components/PanelDrawer/PanelPreview.d.ts.map

@@ -1 +1 @@
-{"version":3,"file":"PanelPreview.d.ts","sourceRoot":"","sources":["../../../src/components/PanelDrawer/PanelPreview.tsx"],"names":[],"mappings":";AAcA,OAAO,EAAE,iBAAiB,EAAE,MAAM,eAAe,CAAC;AAGlD,wBAAgB,YAAY,CAAC,EAAE,IAAI,EAAE,WAAW,EAAE,IAAI,EAAE,IAAI,EAAE,EAAE,iBAAiB,sBAwBhF"}
+{"version":3,"file":"PanelPreview.d.ts","sourceRoot":"","sources":["../../../src/components/PanelDrawer/PanelPreview.tsx"],"names":[],"mappings":";AAiBA,OAAO,EAAE,iBAAiB,EAAE,MAAM,eAAe,CAAC;AAOlD,wBAAgB,YAAY,CAAC,EAAE,eAAe,EAAE,EAAE,IAAI,CAAC,iBAAiB,EAAE,iBAAiB,CAAC,sBA+B3F"}

package/dist/components/PanelDrawer/PanelPreview.js

@@ -11,29 +11,43 @@
 // See the License for the specific language governing permissions and
 // limitations under the License.
 import { jsx as _jsx } from "react/jsx-runtime";
+import { useRef } from 'react';
 import { Box } from '@mui/material';
+import { DataQueriesProvider } from '@perses-dev/plugin-system';
 import { Panel } from '../Panel';
-export function PanelPreview({ name , description , kind , spec  }) {
-    const definition = {
-        kind: 'Panel',
-        spec: {
-            display: {
-                name,
-                description: description === '' ? undefined : description
-            },
-            plugin: {
-                kind,
-                spec
-            }
-        }
-    };
-    if (kind === '') {
+import { useSuggestedStepMs } from '../../utils';
+const PANEL_PREVIEW_HEIGHT = 300;
+const PANEL_PREVIEW_DEFAULT_WIDTH = 840;
+export function PanelPreview({ panelDefinition  }) {
+    const boxRef = useRef(null);
+    let width = PANEL_PREVIEW_DEFAULT_WIDTH;
+    if (boxRef.current !== null) {
+        width = boxRef.current.getBoundingClientRect().width;
+    }
+    const suggestedStepMs = 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__*/ _jsx(Box, {
-        height: 300,
-        children: /*#__PURE__*/ _jsx(Panel, {
-            definition: definition
+        ref: boxRef,
+        height: PANEL_PREVIEW_HEIGHT,
+        children: /*#__PURE__*/ _jsx(DataQueriesProvider, {
+            definitions: definitions,
+            options: {
+                suggestedStepMs
+            },
+            children: /*#__PURE__*/ _jsx(Panel, {
+                definition: panelDefinition
+            })
         })
     });
 }

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

@@ -1 +1 @@
-{"version":3,"sources":["../../../src/components/PanelDrawer/PanelPreview.tsx"],"sourcesContent":["// Copyright 2023 The Perses Authors\n// Licensed under the Apache License, Version 2.0 (the \"License\");\n// you may not use this file except in compliance with the License.\n// You may obtain a copy of the License at\n//\n// http://www.apache.org/licenses/LICENSE-2.0\n//\n// Unless required by applicable law or agreed to in writing, software\n// distributed under the License is distributed on an \"AS IS\" BASIS,\n// WITHOUT WARRANTIES OR CONDITIONS OF ANY KIND, either express or implied.\n// See the License for the specific language governing permissions and\n// limitations under the License.\n\nimport { Box } from '@mui/material';\nimport { PanelEditorValues } from '../../context';\nimport { Panel, PanelProps } from '../Panel';\n\nexport function PanelPreview({ name, description, kind, spec }: PanelEditorValues) {\n  const definition: PanelProps['definition'] = {\n    kind: 'Panel',\n    spec: {\n      display: {\n        name,\n        description: description === '' ? undefined : description,\n      },\n      plugin: {\n        kind,\n        spec,\n      },\n    },\n  };\n\n  if (kind === '') {\n    return null;\n  }\n\n  return (\n    <Box height={300}>\n      <Panel definition={definition} />\n    </Box>\n  );\n}\n"],"names":["Box","Panel","PanelPreview","name","description","kind","spec","definition","display","undefined","plugin","height"],"mappings":"AAAA,oCAAoC;AACpC,kEAAkE;AAClE,mEAAmE;AACnE,0CAA0C;AAC1C,EAAE;AACF,6CAA6C;AAC7C,EAAE;AACF,sEAAsE;AACtE,oEAAoE;AACpE,2EAA2E;AAC3E,sEAAsE;AACtE,iCAAiC;AAEjC;AAAA,SAASA,GAAG,QAAQ,eAAe,CAAC;AAEpC,SAASC,KAAK,QAAoB,UAAU,CAAC;AAE7C,OAAO,SAASC,YAAY,CAAC,EAAEC,IAAI,CAAA,EAAEC,WAAW,CAAA,EAAEC,IAAI,CAAA,EAAEC,IAAI,CAAA,EAAqB,EAAE;IACjF,MAAMC,UAAU,GAA6B;QAC3CF,IAAI,EAAE,OAAO;QACbC,IAAI,EAAE;YACJE,OAAO,EAAE;gBACPL,IAAI;gBACJC,WAAW,EAAEA,WAAW,KAAK,EAAE,GAAGK,SAAS,GAAGL,WAAW;aAC1D;YACDM,MAAM,EAAE;gBACNL,IAAI;gBACJC,IAAI;aACL;SACF;KACF,AAAC;IAEF,IAAID,IAAI,KAAK,EAAE,EAAE;QACf,OAAO,IAAI,CAAC;IACd,CAAC;IAED,qBACE,KAACL,GAAG;QAACW,MAAM,EAAE,GAAG;kBACd,cAAA,KAACV,KAAK;YAACM,UAAU,EAAEA,UAAU;UAAI;MAC7B,CACN;AACJ,CAAC"}
+{"version":3,"sources":["../../../src/components/PanelDrawer/PanelPreview.tsx"],"sourcesContent":["// Copyright 2023 The Perses Authors\n// Licensed under the Apache License, Version 2.0 (the \"License\");\n// you may not use this file except in compliance with the License.\n// You may obtain a copy of the License at\n//\n// http://www.apache.org/licenses/LICENSE-2.0\n//\n// Unless required by applicable law or agreed to in writing, software\n// distributed under the License is distributed on an \"AS IS\" BASIS,\n// WITHOUT WARRANTIES OR CONDITIONS OF ANY KIND, either express or implied.\n// See the License for the specific language governing permissions and\n// limitations under the License.\n\nimport { useRef } from 'react';\nimport { Box } from '@mui/material';\nimport { QueryDefinition } from '@perses-dev/core';\nimport { DataQueriesProvider } from '@perses-dev/plugin-system';\nimport { PanelEditorValues } from '../../context';\nimport { Panel } from '../Panel';\nimport { useSuggestedStepMs } from '../../utils';\n\nconst PANEL_PREVIEW_HEIGHT = 300;\nconst PANEL_PREVIEW_DEFAULT_WIDTH = 840;\n\nexport function PanelPreview({ panelDefinition }: Pick<PanelEditorValues, 'panelDefinition'>) {\n  const boxRef = useRef<HTMLDivElement>(null);\n  let width = PANEL_PREVIEW_DEFAULT_WIDTH;\n  if (boxRef.current !== null) {\n    width = boxRef.current.getBoundingClientRect().width;\n  }\n  const suggestedStepMs = useSuggestedStepMs(width);\n\n  if (panelDefinition.spec.plugin.kind === '') {\n    return null;\n  }\n\n  const queries = panelDefinition.spec.queries ?? [];\n\n  // map TimeSeriesQueryDefinition to Definition<UnknownSpec>\n  const definitions = queries.length\n    ? queries.map((query: QueryDefinition) => {\n        return {\n          kind: query.spec.plugin.kind,\n          spec: query.spec.plugin.spec,\n        };\n      })\n    : [];\n\n  return (\n    <Box ref={boxRef} height={PANEL_PREVIEW_HEIGHT}>\n      <DataQueriesProvider definitions={definitions} options={{ suggestedStepMs }}>\n        <Panel definition={panelDefinition} />\n      </DataQueriesProvider>\n    </Box>\n  );\n}\n"],"names":["useRef","Box","DataQueriesProvider","Panel","useSuggestedStepMs","PANEL_PREVIEW_HEIGHT","PANEL_PREVIEW_DEFAULT_WIDTH","PanelPreview","panelDefinition","boxRef","width","current","getBoundingClientRect","suggestedStepMs","spec","plugin","kind","queries","definitions","length","map","query","ref","height","options","definition"],"mappings":"AAAA,oCAAoC;AACpC,kEAAkE;AAClE,mEAAmE;AACnE,0CAA0C;AAC1C,EAAE;AACF,6CAA6C;AAC7C,EAAE;AACF,sEAAsE;AACtE,oEAAoE;AACpE,2EAA2E;AAC3E,sEAAsE;AACtE,iCAAiC;AAEjC;AAAA,SAASA,MAAM,QAAQ,OAAO,CAAC;AAC/B,SAASC,GAAG,QAAQ,eAAe,CAAC;AAEpC,SAASC,mBAAmB,QAAQ,2BAA2B,CAAC;AAEhE,SAASC,KAAK,QAAQ,UAAU,CAAC;AACjC,SAASC,kBAAkB,QAAQ,aAAa,CAAC;AAEjD,MAAMC,oBAAoB,GAAG,GAAG,AAAC;AACjC,MAAMC,2BAA2B,GAAG,GAAG,AAAC;AAExC,OAAO,SAASC,YAAY,CAAC,EAAEC,eAAe,CAAA,EAA8C,EAAE;IAC5F,MAAMC,MAAM,GAAGT,MAAM,CAAiB,IAAI,CAAC,AAAC;IAC5C,IAAIU,KAAK,GAAGJ,2BAA2B,AAAC;IACxC,IAAIG,MAAM,CAACE,OAAO,KAAK,IAAI,EAAE;QAC3BD,KAAK,GAAGD,MAAM,CAACE,OAAO,CAACC,qBAAqB,EAAE,CAACF,KAAK,CAAC;IACvD,CAAC;IACD,MAAMG,eAAe,GAAGT,kBAAkB,CAACM,KAAK,CAAC,AAAC;IAElD,IAAIF,eAAe,CAACM,IAAI,CAACC,MAAM,CAACC,IAAI,KAAK,EAAE,EAAE;QAC3C,OAAO,IAAI,CAAC;IACd,CAAC;QAEeR,QAA4B;IAA5C,MAAMS,OAAO,GAAGT,CAAAA,QAA4B,GAA5BA,eAAe,CAACM,IAAI,CAACG,OAAO,cAA5BT,QAA4B,cAA5BA,QAA4B,GAAI,EAAE,AAAC;IAEnD,2DAA2D;IAC3D,MAAMU,WAAW,GAAGD,OAAO,CAACE,MAAM,GAC9BF,OAAO,CAACG,GAAG,CAAC,CAACC,KAAsB,GAAK;QACtC,OAAO;YACLL,IAAI,EAAEK,KAAK,CAACP,IAAI,CAACC,MAAM,CAACC,IAAI;YAC5BF,IAAI,EAAEO,KAAK,CAACP,IAAI,CAACC,MAAM,CAACD,IAAI;SAC7B,CAAC;IACJ,CAAC,CAAC,GACF,EAAE,AAAC;IAEP,qBACE,KAACb,GAAG;QAACqB,GAAG,EAAEb,MAAM;QAAEc,MAAM,EAAElB,oBAAoB;kBAC5C,cAAA,KAACH,mBAAmB;YAACgB,WAAW,EAAEA,WAAW;YAAEM,OAAO,EAAE;gBAAEX,eAAe;aAAE;sBACzE,cAAA,KAACV,KAAK;gBAACsB,UAAU,EAAEjB,eAAe;cAAI;UAClB;MAClB,CACN;AACJ,CAAC"}