@perses-dev/dashboards 0.0.0-snapshot-panel-extra-content-3-17f9c42 → 0.0.0-snapshot-scatterplot-fix-imports-95e1b59

package/dist/cjs/test/testDashboard.js

@@ -16,15 +16,17 @@ Object.defineProperty(exports, "__esModule", {
 });
 Object.defineProperty(exports, "default", {
     enumerable: true,
-    get: ()=>_default
+    get: function() {
+        return _default;
+    }
 });
 const testDashboard = {
     kind: 'Dashboard',
     metadata: {
         name: 'Node Stats',
         project: 'perses',
-        created_at: '2021-11-09',
-        updated_at: '2021-11-09',
+        createdAt: '2021-11-09',
+        updatedAt: '2021-11-09',
         version: 0
     },
     spec: {
@@ -63,8 +65,8 @@ const testDashboard = {
                     plugin: {
                         kind: 'TimeSeriesChart',
                         spec: {
-                            unit: {
-                                kind: '%'
+                            format: {
+                                unit: '%'
                             }
                         }
                     },
@@ -92,8 +94,8 @@ const testDashboard = {
                     plugin: {
                         kind: 'TimeSeriesChart',
                         spec: {
-                            unit: {
-                                kind: 'Bytes'
+                            format: {
+                                unit: 'bytes'
                             }
                         }
                     },
@@ -155,8 +157,8 @@ const testDashboard = {
                     plugin: {
                         kind: 'TimeSeriesChart',
                         spec: {
-                            unit: {
-                                kind: 'Percent'
+                            format: {
+                                unit: 'percent'
                             }
                         }
                     },
@@ -184,8 +186,8 @@ const testDashboard = {
                     plugin: {
                         kind: 'TimeSeriesChart',
                         spec: {
-                            unit: {
-                                kind: 'Percent'
+                            format: {
+                                unit: 'percent'
                             }
                         }
                     },

package/dist/cjs/utils/index.js

@@ -14,16 +14,17 @@
 Object.defineProperty(exports, "__esModule", {
     value: true
 });
-_exportStar(require("./panelUtils"), exports);
-_exportStar(require("./time"), exports);
-function _exportStar(from, to) {
+_export_star(require("./panelUtils"), exports);
+function _export_star(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];
-            }
-        });
+        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/utils/panelUtils.js

@@ -21,9 +21,15 @@ function _export(target, all) {
     });
 }
 _export(exports, {
-    getYForNewRow: ()=>getYForNewRow,
-    insertPanelInLayout: ()=>insertPanelInLayout,
-    getValidPanelKey: ()=>getValidPanelKey
+    getValidPanelKey: function() {
+        return getValidPanelKey;
+    },
+    getYForNewRow: function() {
+        return getYForNewRow;
+    },
+    insertPanelInLayout: function() {
+        return insertPanelInLayout;
+    }
 });
 const _constants = require("../constants");
 function getYForNewRow(group) {
@@ -36,7 +42,7 @@ function getYForNewRow(group) {
     }
     return newRowY;
 }
-function getPanelBounds({ x , y , w , h  }) {
+function getPanelBounds({ x, y, w, h }) {
     return {
         x1: x,
         x2: x + w,
@@ -153,7 +159,7 @@ const removeWhiteSpaces = (str)=>{
 function getUniquePanelKeys(panels) {
     const uniquePanelKeys = {};
     Object.keys(panels).forEach((panelKey)=>{
-        const { name , number  } = getPanelKeyParts(panelKey);
+        const { name, number } = getPanelKeyParts(panelKey);
         if (uniquePanelKeys[name] === undefined) {
             uniquePanelKeys[name] = 0;
         }

package/dist/cjs/{components/TimeRangeControls → validation}/index.js

@@ -14,15 +14,17 @@
 Object.defineProperty(exports, "__esModule", {
     value: true
 });
-_exportStar(require("./TimeRangeControls"), exports);
-function _exportStar(from, to) {
+_export_star(require("./panel"), exports);
+function _export_star(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];
-            }
-        });
+        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/{utils/time.js → validation/panel.js}

@@ -14,14 +14,16 @@
 Object.defineProperty(exports, "__esModule", {
     value: true
 });
-Object.defineProperty(exports, "useSuggestedStepMs", {
+Object.defineProperty(exports, "panelEditorValidationSchema", {
     enumerable: true,
-    get: ()=>useSuggestedStepMs
+    get: function() {
+        return panelEditorValidationSchema;
+    }
+});
+const _zod = require("zod");
+const panelEditorValidationSchema = _zod.z.object({
+    name: _zod.z.string().nonempty('Required'),
+    groupId: _zod.z.number(),
+    description: _zod.z.string().optional(),
+    type: _zod.z.string().nonempty('Required')
 });
-const _core = require("@perses-dev/core");
-const _pluginSystem = require("@perses-dev/plugin-system");
-function useSuggestedStepMs(width) {
-    const { absoluteTimeRange  } = (0, _pluginSystem.useTimeRange)();
-    if (width === undefined) return 0;
-    return (0, _core.getSuggestedStepMs)(absoluteTimeRange, width);
-}

package/dist/cjs/views/ViewDashboard/DashboardApp.js

@@ -16,20 +16,25 @@ Object.defineProperty(exports, "__esModule", {
 });
 Object.defineProperty(exports, "DashboardApp", {
     enumerable: true,
-    get: ()=>DashboardApp
+    get: function() {
+        return DashboardApp;
+    }
 });
-const _jsxRuntime = require("react/jsx-runtime");
+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 _components1 = require("../../components");
 const _context = require("../../context");
 const DashboardApp = (props)=>{
-    const { dashboardResource , dashboardTitleComponent , emptyDashboardProps , onSave , onDiscard , initialVariableIsSticky , isReadonly ,  } = props;
-    const { setEditMode  } = (0, _context.useEditMode)();
-    const { dashboard , setDashboard  } = (0, _context.useDashboard)();
+    const { dashboardResource, dashboardTitleComponent, emptyDashboardProps, onSave, onDiscard, initialVariableIsSticky, isReadonly, isCreating } = props;
+    const chartsTheme = (0, _components.useChartsTheme)();
+    const { isEditMode, setEditMode } = (0, _context.useEditMode)();
+    const { dashboard, setDashboard } = (0, _context.useDashboard)();
     const [originalDashboard, setOriginalDashboard] = (0, _react.useState)(undefined);
-    const { openDiscardChangesConfirmationDialog , closeDiscardChangesConfirmationDialog  } = (0, _context.useDiscardChangesConfirmationDialog)();
+    const { setSavedDatasources } = (0, _pluginsystem.useDatasourceStore)();
+    const { openDiscardChangesConfirmationDialog, closeDiscardChangesConfirmationDialog } = (0, _context.useDiscardChangesConfirmationDialog)();
     const handleDiscardChanges = ()=>{
         // Reset to the original spec and exit edit mode
         if (originalDashboard) {
@@ -44,6 +49,8 @@ const DashboardApp = (props)=>{
     const onEditButtonClick = ()=>{
         setEditMode(true);
         setOriginalDashboard(dashboard);
+        var _dashboard_spec_datasources;
+        setSavedDatasources((_dashboard_spec_datasources = dashboard.spec.datasources) !== null && _dashboard_spec_datasources !== void 0 ? _dashboard_spec_datasources : {});
     };
     const onCancelButtonClick = ()=>{
         // check if dashboard has been modified
@@ -60,7 +67,7 @@ const DashboardApp = (props)=>{
             });
         }
     };
-    return /*#__PURE__*/ (0, _jsxRuntime.jsxs)(_material.Box, {
+    return /*#__PURE__*/ (0, _jsxruntime.jsxs)(_material.Box, {
         sx: {
             flexGrow: 1,
             overflowX: 'hidden',
@@ -69,7 +76,7 @@ const DashboardApp = (props)=>{
             flexDirection: 'column'
         },
         children: [
-            /*#__PURE__*/ (0, _jsxRuntime.jsx)(_components1.DashboardToolbar, {
+            /*#__PURE__*/ (0, _jsxruntime.jsx)(_components1.DashboardToolbar, {
                 dashboardName: dashboardResource.metadata.name,
                 dashboardTitleComponent: dashboardTitleComponent,
                 initialVariableIsSticky: initialVariableIsSticky,
@@ -78,28 +85,35 @@ const DashboardApp = (props)=>{
                 onEditButtonClick: onEditButtonClick,
                 onCancelButtonClick: onCancelButtonClick
             }),
-            /*#__PURE__*/ (0, _jsxRuntime.jsxs)(_material.Box, {
+            /*#__PURE__*/ (0, _jsxruntime.jsxs)(_material.Box, {
                 sx: {
                     padding: (theme)=>theme.spacing(2),
                     height: '100%'
                 },
                 children: [
-                    /*#__PURE__*/ (0, _jsxRuntime.jsx)(_components.ErrorBoundary, {
+                    /*#__PURE__*/ (0, _jsxruntime.jsx)(_components.ErrorBoundary, {
                         FallbackComponent: _components.ErrorAlert,
-                        children: /*#__PURE__*/ (0, _jsxRuntime.jsx)(_components1.Dashboard, {
+                        children: /*#__PURE__*/ (0, _jsxruntime.jsx)(_components1.Dashboard, {
                             emptyDashboardProps: {
                                 onEditButtonClick,
                                 ...emptyDashboardProps
                             }
                         })
                     }),
-                    /*#__PURE__*/ (0, _jsxRuntime.jsx)(_components1.PanelDrawer, {}),
-                    /*#__PURE__*/ (0, _jsxRuntime.jsx)(_components1.PanelGroupDialog, {}),
-                    /*#__PURE__*/ (0, _jsxRuntime.jsx)(_components1.DeletePanelGroupDialog, {}),
-                    /*#__PURE__*/ (0, _jsxRuntime.jsx)(_components1.DeletePanelDialog, {}),
-                    /*#__PURE__*/ (0, _jsxRuntime.jsx)(_components1.DashboardDiscardChangesConfirmationDialog, {}),
-                    /*#__PURE__*/ (0, _jsxRuntime.jsx)(_components1.EditJsonDialog, {}),
-                    /*#__PURE__*/ (0, _jsxRuntime.jsx)(_components1.SaveChangesConfirmationDialog, {})
+                    /*#__PURE__*/ (0, _jsxruntime.jsx)(_components.ChartsProvider, {
+                        chartsTheme: chartsTheme,
+                        enablePinning: false,
+                        children: /*#__PURE__*/ (0, _jsxruntime.jsx)(_components1.PanelDrawer, {})
+                    }),
+                    /*#__PURE__*/ (0, _jsxruntime.jsx)(_components1.PanelGroupDialog, {}),
+                    /*#__PURE__*/ (0, _jsxruntime.jsx)(_components1.DeletePanelGroupDialog, {}),
+                    /*#__PURE__*/ (0, _jsxruntime.jsx)(_components1.DeletePanelDialog, {}),
+                    /*#__PURE__*/ (0, _jsxruntime.jsx)(_components1.DashboardDiscardChangesConfirmationDialog, {}),
+                    /*#__PURE__*/ (0, _jsxruntime.jsx)(_components1.EditJsonDialog, {
+                        isReadonly: !isEditMode,
+                        disableMetadataEdition: !isCreating
+                    }),
+                    /*#__PURE__*/ (0, _jsxruntime.jsx)(_components1.SaveChangesConfirmationDialog, {})
                 ]
             })
         ]

package/dist/cjs/views/ViewDashboard/ViewDashboard.js

@@ -16,40 +16,82 @@ Object.defineProperty(exports, "__esModule", {
 });
 Object.defineProperty(exports, "ViewDashboard", {
     enumerable: true,
-    get: ()=>ViewDashboard
+    get: function() {
+        return ViewDashboard;
+    }
 });
-const _jsxRuntime = require("react/jsx-runtime");
+const _jsxruntime = require("react/jsx-runtime");
 const _material = require("@mui/material");
 const _core = require("@perses-dev/core");
 const _components = require("@perses-dev/components");
-const _pluginSystem = require("@perses-dev/plugin-system");
+const _pluginsystem = require("@perses-dev/plugin-system");
+const _react = require("react");
 const _context = require("../../context");
-const _dashboardApp = require("./DashboardApp");
+const _DashboardApp = require("./DashboardApp");
 function ViewDashboard(props) {
-    const { dashboardResource , datasourceApi , externalVariableDefinitions , dashboardTitleComponent , emptyDashboardProps , onSave , onDiscard , initialVariableIsSticky , isReadonly , isEditing , sx , ...others } = props;
-    const { spec  } = dashboardResource;
-    var _duration;
-    const dashboardDuration = (_duration = spec.duration) !== null && _duration !== void 0 ? _duration : _core.DEFAULT_DASHBOARD_DURATION;
-    var _refreshInterval;
-    const dashboardRefreshInterval = (_refreshInterval = spec.refreshInterval) !== null && _refreshInterval !== void 0 ? _refreshInterval : _core.DEFAULT_REFRESH_INTERVAL;
-    const initialTimeRange = (0, _pluginSystem.useInitialTimeRange)(dashboardDuration);
-    const initialRefreshInterval = (0, _pluginSystem.useInitialRefreshInterval)(dashboardRefreshInterval);
-    return /*#__PURE__*/ (0, _jsxRuntime.jsx)(_context.DatasourceStoreProvider, {
+    const { dashboardResource, datasourceApi, externalVariableDefinitions, dashboardTitleComponent, emptyDashboardProps, onSave, onDiscard, initialVariableIsSticky, isReadonly, isEditing, isCreating, sx, ...others } = props;
+    const { spec } = dashboardResource;
+    var _spec_duration;
+    const dashboardDuration = (_spec_duration = spec.duration) !== null && _spec_duration !== void 0 ? _spec_duration : _core.DEFAULT_DASHBOARD_DURATION;
+    var _spec_refreshInterval;
+    const dashboardRefreshInterval = (_spec_refreshInterval = spec.refreshInterval) !== null && _spec_refreshInterval !== void 0 ? _spec_refreshInterval : _core.DEFAULT_REFRESH_INTERVAL;
+    const initialTimeRange = (0, _pluginsystem.useInitialTimeRange)(dashboardDuration);
+    const initialRefreshInterval = (0, _pluginsystem.useInitialRefreshInterval)(dashboardRefreshInterval);
+    const { data } = (0, _pluginsystem.usePluginBuiltinVariableDefinitions)();
+    const builtinVariables = (0, _react.useMemo)(()=>{
+        const result = [
+            {
+                kind: 'BuiltinVariable',
+                spec: {
+                    name: '__dashboard',
+                    value: ()=>dashboardResource.metadata.name,
+                    source: 'Dashboard',
+                    display: {
+                        name: '__dashboard',
+                        description: 'The name of the current dashboard',
+                        hidden: true
+                    }
+                }
+            },
+            {
+                kind: 'BuiltinVariable',
+                spec: {
+                    name: '__project',
+                    value: ()=>dashboardResource.metadata.project,
+                    source: 'Dashboard',
+                    display: {
+                        name: '__project',
+                        description: 'The name of the current dashboard project',
+                        hidden: true
+                    }
+                }
+            }
+        ];
+        if (data) {
+            data.forEach((def)=>result.push(def));
+        }
+        return result;
+    }, [
+        dashboardResource.metadata.name,
+        dashboardResource.metadata.project,
+        data
+    ]);
+    return /*#__PURE__*/ (0, _jsxruntime.jsx)(_context.DatasourceStoreProvider, {
         dashboardResource: dashboardResource,
         datasourceApi: datasourceApi,
-        children: /*#__PURE__*/ (0, _jsxRuntime.jsx)(_context.DashboardProvider, {
+        children: /*#__PURE__*/ (0, _jsxruntime.jsx)(_context.DashboardProvider, {
             initialState: {
                 dashboardResource,
                 isEditMode: !!isEditing
             },
-            children: /*#__PURE__*/ (0, _jsxRuntime.jsx)(_pluginSystem.TimeRangeProvider, {
+            children: /*#__PURE__*/ (0, _jsxruntime.jsx)(_pluginsystem.TimeRangeProviderWithQueryParams, {
                 initialTimeRange: initialTimeRange,
                 initialRefreshInterval: initialRefreshInterval,
-                enabledURLParams: true,
-                children: /*#__PURE__*/ (0, _jsxRuntime.jsx)(_context.TemplateVariableProvider, {
+                children: /*#__PURE__*/ (0, _jsxruntime.jsx)(_context.TemplateVariableProviderWithQueryParams, {
                     initialVariableDefinitions: spec.variables,
                     externalVariableDefinitions: externalVariableDefinitions,
-                    children: /*#__PURE__*/ (0, _jsxRuntime.jsx)(_material.Box, {
+                    builtinVariables: builtinVariables,
+                    children: /*#__PURE__*/ (0, _jsxruntime.jsx)(_material.Box, {
                         sx: (0, _components.combineSx)({
                             display: 'flex',
                             width: '100%',
@@ -58,16 +100,17 @@ function ViewDashboard(props) {
                             overflow: 'hidden'
                         }, sx),
                         ...others,
-                        children: /*#__PURE__*/ (0, _jsxRuntime.jsx)(_components.ErrorBoundary, {
+                        children: /*#__PURE__*/ (0, _jsxruntime.jsx)(_components.ErrorBoundary, {
                             FallbackComponent: _components.ErrorAlert,
-                            children: /*#__PURE__*/ (0, _jsxRuntime.jsx)(_dashboardApp.DashboardApp, {
+                            children: /*#__PURE__*/ (0, _jsxruntime.jsx)(_DashboardApp.DashboardApp, {
                                 dashboardResource: dashboardResource,
                                 dashboardTitleComponent: dashboardTitleComponent,
                                 emptyDashboardProps: emptyDashboardProps,
                                 onSave: onSave,
                                 onDiscard: onDiscard,
                                 initialVariableIsSticky: initialVariableIsSticky,
-                                isReadonly: isReadonly
+                                isReadonly: isReadonly,
+                                isCreating: isCreating
                             })
                         })
                     })

package/dist/cjs/views/ViewDashboard/index.js

@@ -14,15 +14,17 @@
 Object.defineProperty(exports, "__esModule", {
     value: true
 });
-_exportStar(require("./ViewDashboard"), exports);
-function _exportStar(from, to) {
+_export_star(require("./ViewDashboard"), exports);
+function _export_star(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];
-            }
-        });
+        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/views/index.js

@@ -14,15 +14,17 @@
 Object.defineProperty(exports, "__esModule", {
     value: true
 });
-_exportStar(require("./ViewDashboard"), exports);
-function _exportStar(from, to) {
+_export_star(require("./ViewDashboard"), exports);
+function _export_star(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];
-            }
-        });
+        if (k !== "default" && !Object.prototype.hasOwnProperty.call(to, k)) {
+            Object.defineProperty(to, k, {
+                enumerable: true,
+                get: function() {
+                    return from[k];
+                }
+            });
+        }
     });
     return from;
 }

package/dist/components/AddGroupButton/AddGroupButton.d.ts

@@ -1,3 +1,2 @@
-/// <reference types="react" />
-export declare const AddGroupButton: () => JSX.Element;
+export declare const AddGroupButton: () => import("react/jsx-runtime").JSX.Element;
 //# sourceMappingURL=AddGroupButton.d.ts.map

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

@@ -1 +1 @@
-{"version":3,"file":"AddGroupButton.d.ts","sourceRoot":"","sources":["../../../src/components/AddGroupButton/AddGroupButton.tsx"],"names":[],"mappings":";AAmBA,eAAO,MAAM,cAAc,mBAU1B,CAAC"}
+{"version":3,"file":"AddGroupButton.d.ts","sourceRoot":"","sources":["../../../src/components/AddGroupButton/AddGroupButton.tsx"],"names":[],"mappings":"AAmBA,eAAO,MAAM,cAAc,+CAe1B,CAAC"}

package/dist/components/AddGroupButton/AddGroupButton.js

@@ -14,16 +14,17 @@ import { jsx as _jsx } from "react/jsx-runtime";
 import { Button } from '@mui/material';
 import AddGroupIcon from 'mdi-material-ui/PlusBoxOutline';
 import { InfoTooltip } from '@perses-dev/components';
-import { TOOLTIP_TEXT } from '../../constants';
+import { TOOLTIP_TEXT, editButtonStyle } from '../../constants';
 import { useDashboardActions } from '../../context';
 export const AddGroupButton = ()=>{
-    const { openAddPanelGroup  } = useDashboardActions();
+    const { openAddPanelGroup } = useDashboardActions();
     return /*#__PURE__*/ _jsx(InfoTooltip, {
         description: TOOLTIP_TEXT.addGroup,
         children: /*#__PURE__*/ _jsx(Button, {
             startIcon: /*#__PURE__*/ _jsx(AddGroupIcon, {}),
             onClick: openAddPanelGroup,
             "aria-label": TOOLTIP_TEXT.addGroup,
+            sx: editButtonStyle,
             children: "Panel Group"
         })
     });

package/dist/components/AddGroupButton/AddGroupButton.js.map

@@ -1 +1 @@
-{"version":3,"sources":["../../../src/components/AddGroupButton/AddGroupButton.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 { Button } from '@mui/material';\nimport AddGroupIcon from 'mdi-material-ui/PlusBoxOutline';\nimport { InfoTooltip } from '@perses-dev/components';\nimport { TOOLTIP_TEXT } from '../../constants';\nimport { useDashboardActions } from '../../context';\n\nexport const AddGroupButton = () => {\n  const { openAddPanelGroup } = useDashboardActions();\n\n  return (\n    <InfoTooltip description={TOOLTIP_TEXT.addGroup}>\n      <Button startIcon={<AddGroupIcon />} onClick={openAddPanelGroup} aria-label={TOOLTIP_TEXT.addGroup}>\n        Panel Group\n      </Button>\n    </InfoTooltip>\n  );\n};\n"],"names":["Button","AddGroupIcon","InfoTooltip","TOOLTIP_TEXT","useDashboardActions","AddGroupButton","openAddPanelGroup","description","addGroup","startIcon","onClick","aria-label"],"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,eAAe,CAAC;AACvC,OAAOC,YAAY,MAAM,gCAAgC,CAAC;AAC1D,SAASC,WAAW,QAAQ,wBAAwB,CAAC;AACrD,SAASC,YAAY,QAAQ,iBAAiB,CAAC;AAC/C,SAASC,mBAAmB,QAAQ,eAAe,CAAC;AAEpD,OAAO,MAAMC,cAAc,GAAG,IAAM;IAClC,MAAM,EAAEC,iBAAiB,CAAA,EAAE,GAAGF,mBAAmB,EAAE,AAAC;IAEpD,qBACE,KAACF,WAAW;QAACK,WAAW,EAAEJ,YAAY,CAACK,QAAQ;kBAC7C,cAAA,KAACR,MAAM;YAACS,SAAS,gBAAE,KAACR,YAAY,KAAG;YAAES,OAAO,EAAEJ,iBAAiB;YAAEK,YAAU,EAAER,YAAY,CAACK,QAAQ;sBAAE,aAEpG;UAAS;MACG,CACd;AACJ,CAAC,CAAC"}
+{"version":3,"sources":["../../../src/components/AddGroupButton/AddGroupButton.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 { Button } from '@mui/material';\nimport AddGroupIcon from 'mdi-material-ui/PlusBoxOutline';\nimport { InfoTooltip } from '@perses-dev/components';\nimport { TOOLTIP_TEXT, editButtonStyle } from '../../constants';\nimport { useDashboardActions } from '../../context';\n\nexport const AddGroupButton = () => {\n  const { openAddPanelGroup } = useDashboardActions();\n\n  return (\n    <InfoTooltip description={TOOLTIP_TEXT.addGroup}>\n      <Button\n        startIcon={<AddGroupIcon />}\n        onClick={openAddPanelGroup}\n        aria-label={TOOLTIP_TEXT.addGroup}\n        sx={editButtonStyle}\n      >\n        Panel Group\n      </Button>\n    </InfoTooltip>\n  );\n};\n"],"names":["Button","AddGroupIcon","InfoTooltip","TOOLTIP_TEXT","editButtonStyle","useDashboardActions","AddGroupButton","openAddPanelGroup","description","addGroup","startIcon","onClick","aria-label","sx"],"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,SAASA,MAAM,QAAQ,gBAAgB;AACvC,OAAOC,kBAAkB,iCAAiC;AAC1D,SAASC,WAAW,QAAQ,yBAAyB;AACrD,SAASC,YAAY,EAAEC,eAAe,QAAQ,kBAAkB;AAChE,SAASC,mBAAmB,QAAQ,gBAAgB;AAEpD,OAAO,MAAMC,iBAAiB;IAC5B,MAAM,EAAEC,iBAAiB,EAAE,GAAGF;IAE9B,qBACE,KAACH;QAAYM,aAAaL,aAAaM,QAAQ;kBAC7C,cAAA,KAACT;YACCU,yBAAW,KAACT;YACZU,SAASJ;YACTK,cAAYT,aAAaM,QAAQ;YACjCI,IAAIT;sBACL;;;AAKP,EAAE"}

package/dist/components/AddGroupButton/index.js.map

@@ -1 +1 @@
-{"version":3,"sources":["../../../src/components/AddGroupButton/index.ts"],"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\nexport * from './AddGroupButton';\n"],"names":[],"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,cAAc,kBAAkB,CAAC"}
+{"version":3,"sources":["../../../src/components/AddGroupButton/index.ts"],"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\nexport * from './AddGroupButton';\n"],"names":[],"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,cAAc,mBAAmB"}

package/dist/components/AddPanelButton/AddPanelButton.d.ts

@@ -1,4 +1,3 @@
-/// <reference types="react" />
 import { ButtonProps } from '@mui/material';
 export interface AddPanelButtonProps extends Pick<ButtonProps, 'fullWidth'> {
     /**
@@ -14,5 +13,5 @@ export interface AddPanelButtonProps extends Pick<ButtonProps, 'fullWidth'> {
      */
     label?: string;
 }
-export declare const AddPanelButton: ({ variant, color, label, fullWidth, }: AddPanelButtonProps) => JSX.Element;
+export declare const AddPanelButton: ({ variant, color, label, fullWidth, }: AddPanelButtonProps) => import("react/jsx-runtime").JSX.Element;
 //# sourceMappingURL=AddPanelButton.d.ts.map

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

@@ -1 +1 @@
-{"version":3,"file":"AddPanelButton.d.ts","sourceRoot":"","sources":["../../../src/components/AddPanelButton/AddPanelButton.tsx"],"names":[],"mappings":";AAaA,OAAO,EAAU,WAAW,EAAE,MAAM,eAAe,CAAC;AAMpD,MAAM,WAAW,mBAAoB,SAAQ,IAAI,CAAC,WAAW,EAAE,WAAW,CAAC;IACzE;;OAEG;IACH,OAAO,CAAC,EAAE,MAAM,GAAG,UAAU,CAAC;IAE9B;;OAEG;IACH,KAAK,CAAC,EAAE,SAAS,GAAG,WAAW,CAAC;IAEhC;;OAEG;IACH,KAAK,CAAC,EAAE,MAAM,CAAC;CAChB;AAED,eAAO,MAAM,cAAc,0CAKxB,mBAAmB,gBAkBrB,CAAC"}
+{"version":3,"file":"AddPanelButton.d.ts","sourceRoot":"","sources":["../../../src/components/AddPanelButton/AddPanelButton.tsx"],"names":[],"mappings":"AAaA,OAAO,EAAU,WAAW,EAAE,MAAM,eAAe,CAAC;AAMpD,MAAM,WAAW,mBAAoB,SAAQ,IAAI,CAAC,WAAW,EAAE,WAAW,CAAC;IACzE;;OAEG;IACH,OAAO,CAAC,EAAE,MAAM,GAAG,UAAU,CAAC;IAE9B;;OAEG;IACH,KAAK,CAAC,EAAE,SAAS,GAAG,WAAW,CAAC;IAEhC;;OAEG;IACH,KAAK,CAAC,EAAE,MAAM,CAAC;CAChB;AAED,eAAO,MAAM,cAAc,0CAKxB,mBAAmB,4CAkBrB,CAAC"}

package/dist/components/AddPanelButton/AddPanelButton.js

@@ -14,10 +14,10 @@ import { jsx as _jsx } from "react/jsx-runtime";
 import { Button } from '@mui/material';
 import AddPanelIcon from 'mdi-material-ui/ChartBoxPlusOutline';
 import { InfoTooltip } from '@perses-dev/components';
-import { TOOLTIP_TEXT } from '../../constants';
+import { TOOLTIP_TEXT, editButtonStyle } from '../../constants';
 import { useDashboardActions } from '../../context';
-export const AddPanelButton = ({ variant ='text' , color ='primary' , label ='Panel' , fullWidth  })=>{
-    const { openAddPanel  } = useDashboardActions();
+export const AddPanelButton = ({ variant = 'text', color = 'primary', label = 'Panel', fullWidth })=>{
+    const { openAddPanel } = useDashboardActions();
     return /*#__PURE__*/ _jsx(InfoTooltip, {
         description: TOOLTIP_TEXT.addPanel,
         children: /*#__PURE__*/ _jsx(Button, {
@@ -27,10 +27,7 @@ export const AddPanelButton = ({ variant ='text' , color ='primary' , label ='Pa
             variant: variant,
             color: color,
             fullWidth: fullWidth,
-            sx: {
-                whiteSpace: 'nowrap',
-                minWidth: 'auto'
-            },
+            sx: editButtonStyle,
             children: label
         })
     });

package/dist/components/AddPanelButton/AddPanelButton.js.map

@@ -1 +1 @@
-{"version":3,"sources":["../../../src/components/AddPanelButton/AddPanelButton.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 { Button, ButtonProps } from '@mui/material';\nimport AddPanelIcon from 'mdi-material-ui/ChartBoxPlusOutline';\nimport { InfoTooltip } from '@perses-dev/components';\nimport { TOOLTIP_TEXT } from '../../constants';\nimport { useDashboardActions } from '../../context';\n\nexport interface AddPanelButtonProps extends Pick<ButtonProps, 'fullWidth'> {\n  /**\n   * The variant to use to display the button.\n   */\n  variant?: 'text' | 'outlined';\n\n  /**\n   * The color to use to display the button.\n   */\n  color?: 'primary' | 'secondary';\n\n  /**\n   * The label used inside the button.\n   */\n  label?: string;\n}\n\nexport const AddPanelButton = ({\n  variant = 'text',\n  color = 'primary',\n  label = 'Panel',\n  fullWidth,\n}: AddPanelButtonProps) => {\n  const { openAddPanel } = useDashboardActions();\n\n  return (\n    <InfoTooltip description={TOOLTIP_TEXT.addPanel}>\n      <Button\n        startIcon={<AddPanelIcon />}\n        onClick={openAddPanel}\n        aria-label={TOOLTIP_TEXT.addPanel}\n        variant={variant}\n        color={color}\n        fullWidth={fullWidth}\n        sx={{ whiteSpace: 'nowrap', minWidth: 'auto' }}\n      >\n        {label}\n      </Button>\n    </InfoTooltip>\n  );\n};\n"],"names":["Button","AddPanelIcon","InfoTooltip","TOOLTIP_TEXT","useDashboardActions","AddPanelButton","variant","color","label","fullWidth","openAddPanel","description","addPanel","startIcon","onClick","aria-label","sx","whiteSpace","minWidth"],"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,QAAqB,eAAe,CAAC;AACpD,OAAOC,YAAY,MAAM,qCAAqC,CAAC;AAC/D,SAASC,WAAW,QAAQ,wBAAwB,CAAC;AACrD,SAASC,YAAY,QAAQ,iBAAiB,CAAC;AAC/C,SAASC,mBAAmB,QAAQ,eAAe,CAAC;AAmBpD,OAAO,MAAMC,cAAc,GAAG,CAAC,EAC7BC,OAAO,EAAG,MAAM,CAAA,EAChBC,KAAK,EAAG,SAAS,CAAA,EACjBC,KAAK,EAAG,OAAO,CAAA,EACfC,SAAS,CAAA,EACW,GAAK;IACzB,MAAM,EAAEC,YAAY,CAAA,EAAE,GAAGN,mBAAmB,EAAE,AAAC;IAE/C,qBACE,KAACF,WAAW;QAACS,WAAW,EAAER,YAAY,CAACS,QAAQ;kBAC7C,cAAA,KAACZ,MAAM;YACLa,SAAS,gBAAE,KAACZ,YAAY,KAAG;YAC3Ba,OAAO,EAAEJ,YAAY;YACrBK,YAAU,EAAEZ,YAAY,CAACS,QAAQ;YACjCN,OAAO,EAAEA,OAAO;YAChBC,KAAK,EAAEA,KAAK;YACZE,SAAS,EAAEA,SAAS;YACpBO,EAAE,EAAE;gBAAEC,UAAU,EAAE,QAAQ;gBAAEC,QAAQ,EAAE,MAAM;aAAE;sBAE7CV,KAAK;UACC;MACG,CACd;AACJ,CAAC,CAAC"}
+{"version":3,"sources":["../../../src/components/AddPanelButton/AddPanelButton.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 { Button, ButtonProps } from '@mui/material';\nimport AddPanelIcon from 'mdi-material-ui/ChartBoxPlusOutline';\nimport { InfoTooltip } from '@perses-dev/components';\nimport { TOOLTIP_TEXT, editButtonStyle } from '../../constants';\nimport { useDashboardActions } from '../../context';\n\nexport interface AddPanelButtonProps extends Pick<ButtonProps, 'fullWidth'> {\n  /**\n   * The variant to use to display the button.\n   */\n  variant?: 'text' | 'outlined';\n\n  /**\n   * The color to use to display the button.\n   */\n  color?: 'primary' | 'secondary';\n\n  /**\n   * The label used inside the button.\n   */\n  label?: string;\n}\n\nexport const AddPanelButton = ({\n  variant = 'text',\n  color = 'primary',\n  label = 'Panel',\n  fullWidth,\n}: AddPanelButtonProps) => {\n  const { openAddPanel } = useDashboardActions();\n\n  return (\n    <InfoTooltip description={TOOLTIP_TEXT.addPanel}>\n      <Button\n        startIcon={<AddPanelIcon />}\n        onClick={openAddPanel}\n        aria-label={TOOLTIP_TEXT.addPanel}\n        variant={variant}\n        color={color}\n        fullWidth={fullWidth}\n        sx={editButtonStyle}\n      >\n        {label}\n      </Button>\n    </InfoTooltip>\n  );\n};\n"],"names":["Button","AddPanelIcon","InfoTooltip","TOOLTIP_TEXT","editButtonStyle","useDashboardActions","AddPanelButton","variant","color","label","fullWidth","openAddPanel","description","addPanel","startIcon","onClick","aria-label","sx"],"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,SAASA,MAAM,QAAqB,gBAAgB;AACpD,OAAOC,kBAAkB,sCAAsC;AAC/D,SAASC,WAAW,QAAQ,yBAAyB;AACrD,SAASC,YAAY,EAAEC,eAAe,QAAQ,kBAAkB;AAChE,SAASC,mBAAmB,QAAQ,gBAAgB;AAmBpD,OAAO,MAAMC,iBAAiB,CAAC,EAC7BC,UAAU,MAAM,EAChBC,QAAQ,SAAS,EACjBC,QAAQ,OAAO,EACfC,SAAS,EACW;IACpB,MAAM,EAAEC,YAAY,EAAE,GAAGN;IAEzB,qBACE,KAACH;QAAYU,aAAaT,aAAaU,QAAQ;kBAC7C,cAAA,KAACb;YACCc,yBAAW,KAACb;YACZc,SAASJ;YACTK,cAAYb,aAAaU,QAAQ;YACjCN,SAASA;YACTC,OAAOA;YACPE,WAAWA;YACXO,IAAIb;sBAEHK;;;AAIT,EAAE"}

package/dist/components/AddPanelButton/index.js.map

@@ -1 +1 @@
-{"version":3,"sources":["../../../src/components/AddPanelButton/index.ts"],"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\nexport * from './AddPanelButton';\n"],"names":[],"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,cAAc,kBAAkB,CAAC"}
+{"version":3,"sources":["../../../src/components/AddPanelButton/index.ts"],"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\nexport * from './AddPanelButton';\n"],"names":[],"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,cAAc,mBAAmB"}

package/dist/components/Dashboard/Dashboard.d.ts

@@ -1,8 +1,7 @@
-/// <reference types="react" />
 import { BoxProps } from '@mui/material';
 import { EmptyDashboardProps } from '../EmptyDashboard';
 import { PanelOptions } from '../Panel';
-export declare type DashboardProps = BoxProps & {
+export type DashboardProps = BoxProps & {
     /**
      * Props for `EmptyDashboard` component that will be rendered when the dashboard
      * is empty (i.e. has no panel groups). If not specified, the defaults will
@@ -14,5 +13,5 @@ export declare type DashboardProps = BoxProps & {
 /**
  * Renders a Dashboard for the provided Dashboard spec.
  */
-export declare function Dashboard({ emptyDashboardProps, panelOptions, ...boxProps }: DashboardProps): JSX.Element;
+export declare function Dashboard({ emptyDashboardProps, panelOptions, ...boxProps }: DashboardProps): import("react/jsx-runtime").JSX.Element;
 //# sourceMappingURL=Dashboard.d.ts.map

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

@@ -1 +1 @@
-{"version":3,"file":"Dashboard.d.ts","sourceRoot":"","sources":["../../../src/components/Dashboard/Dashboard.tsx"],"names":[],"mappings":";AAaA,OAAO,EAAO,QAAQ,EAAE,MAAM,eAAe,CAAC;AAI9C,OAAO,EAAkB,mBAAmB,EAAE,MAAM,mBAAmB,CAAC;AACxE,OAAO,EAAE,YAAY,EAAE,MAAM,UAAU,CAAC;AACxC,oBAAY,cAAc,GAAG,QAAQ,GAAG;IACtC;;;;OAIG;IACH,mBAAmB,CAAC,EAAE,mBAAmB,CAAC;IAC1C,YAAY,CAAC,EAAE,YAAY,CAAC;CAC7B,CAAC;AAEF;;GAEG;AACH,wBAAgB,SAAS,CAAC,EAAE,mBAAmB,EAAE,YAAY,EAAE,GAAG,QAAQ,EAAE,EAAE,cAAc,eAmB3F"}
+{"version":3,"file":"Dashboard.d.ts","sourceRoot":"","sources":["../../../src/components/Dashboard/Dashboard.tsx"],"names":[],"mappings":"AAaA,OAAO,EAAO,QAAQ,EAAE,MAAM,eAAe,CAAC;AAI9C,OAAO,EAAkB,mBAAmB,EAAE,MAAM,mBAAmB,CAAC;AACxE,OAAO,EAAE,YAAY,EAAE,MAAM,UAAU,CAAC;AACxC,MAAM,MAAM,cAAc,GAAG,QAAQ,GAAG;IACtC;;;;OAIG;IACH,mBAAmB,CAAC,EAAE,mBAAmB,CAAC;IAC1C,YAAY,CAAC,EAAE,YAAY,CAAC;CAC7B,CAAC;AAEF;;GAEG;AACH,wBAAgB,SAAS,CAAC,EAAE,mBAAmB,EAAE,YAAY,EAAE,GAAG,QAAQ,EAAE,EAAE,cAAc,2CAmB3F"}

package/dist/components/Dashboard/Dashboard.js

@@ -18,7 +18,7 @@ import { GridLayout } from '../GridLayout';
 import { EmptyDashboard } from '../EmptyDashboard';
 /**
  * Renders a Dashboard for the provided Dashboard spec.
- */ export function Dashboard({ emptyDashboardProps , panelOptions , ...boxProps }) {
+ */ export function Dashboard({ emptyDashboardProps, panelOptions, ...boxProps }) {
     const panelGroupIds = usePanelGroupIds();
     const isEmpty = !panelGroupIds.length;
     return /*#__PURE__*/ _jsx(Box, {