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

package/dist/cjs/context/useDashboard.js

@@ -1,4 +1,4 @@
-// Copyright 2023 The Perses Authors
+// Copyright 2024 The Perses Authors
 // Licensed under the Apache License, Version 2.0 (the "License");
 // you may not use this file except in compliance with the License.
 // You may obtain a copy of the License at
@@ -22,24 +22,26 @@ Object.defineProperty(exports, "useDashboard", {
 });
 const _core = require("@perses-dev/core");
 const _DashboardProvider = require("./DashboardProvider");
-const _TemplateVariableProvider = require("./TemplateVariableProvider");
+const _VariableProvider = require("./VariableProvider");
 function useDashboard() {
-    const { panels , panelGroups , panelGroupOrder , setDashboard: setDashboardResource , metadata , display , duration , refreshInterval , datasources  } = (0, _DashboardProvider.useDashboardStore)(({ panels , panelGroups , panelGroupOrder , setDashboard , metadata , display , duration , refreshInterval , datasources  })=>({
+    const { panels, panelGroups, panelGroupOrder, setDashboard: setDashboardResource, kind, metadata, display, duration, refreshInterval, datasources, ttl } = (0, _DashboardProvider.useDashboardStore)(({ panels, panelGroups, panelGroupOrder, setDashboard, kind, metadata, display, duration, refreshInterval, datasources, ttl })=>({
             panels,
             panelGroups,
             panelGroupOrder,
             setDashboard,
+            kind,
             metadata,
             display,
             duration,
             refreshInterval,
-            datasources
+            datasources,
+            ttl
         }));
-    const { setVariableDefinitions  } = (0, _TemplateVariableProvider.useTemplateVariableActions)();
-    const variables = (0, _TemplateVariableProvider.useTemplateVariableDefinitions)();
+    const { setVariableDefinitions } = (0, _VariableProvider.useVariableDefinitionActions)();
+    const variables = (0, _VariableProvider.useVariableDefinitions)();
     const layouts = convertPanelGroupsToLayouts(panelGroups, panelGroupOrder);
-    const dashboard = {
-        kind: 'Dashboard',
+    const dashboard = kind === 'Dashboard' ? {
+        kind,
         metadata,
         spec: {
             display,
@@ -50,6 +52,19 @@ function useDashboard() {
             refreshInterval,
             datasources
         }
+    } : {
+        kind,
+        metadata,
+        spec: {
+            display,
+            panels,
+            layouts,
+            variables,
+            duration,
+            refreshInterval,
+            datasources,
+            ttl
+        }
     };
     const setDashboard = (dashboardResource)=>{
         setVariableDefinitions(dashboardResource.spec.variables);
@@ -67,7 +82,7 @@ function convertPanelGroupsToLayouts(panelGroups, panelGroupOrder) {
         if (group === undefined) {
             throw new Error('panel group not found');
         }
-        const { title , isCollapsed , itemLayouts , itemPanelKeys  } = group;
+        const { title, isCollapsed, itemLayouts, itemPanelKeys } = group;
         let display = undefined;
         if (title) {
             display = {

package/dist/cjs/stories/decorators/WithDashboard.js

@@ -30,7 +30,7 @@ function isWithDashboardParameter(parameter) {
 const WithDashboard = (Story, context)=>{
     const initParameter = context.parameters.withDashboard;
     const parameter = isWithDashboardParameter(initParameter) ? initParameter : undefined;
-    const props = parameter === null || parameter === void 0 ? void 0 : parameter.props;
+    const props = parameter?.props;
     return /*#__PURE__*/ (0, _jsxruntime.jsx)(_dashboards.DashboardProvider, {
         initialState: {
             dashboardResource: _constants.EMPTY_DASHBOARD_RESOURCE

package/dist/cjs/stories/decorators/WithDatasourceStore.js

@@ -30,7 +30,7 @@ function isWithDatasourceStoreParameter(parameter) {
 const WithDatasourceStore = (Story, context)=>{
     const initParameter = context.parameters.withDatasourceStore;
     const parameter = isWithDatasourceStoreParameter(initParameter) ? initParameter : undefined;
-    const props = parameter === null || parameter === void 0 ? void 0 : parameter.props;
+    const props = parameter?.props;
     return /*#__PURE__*/ (0, _jsxruntime.jsx)(_dashboards.DatasourceStoreProvider, {
         ..._test.defaultDatasourceProps,
         ...props,

package/dist/cjs/stories/decorators/{WithTemplateVariables.js → WithVariables.js}

@@ -1,4 +1,4 @@
-// Copyright 2023 The Perses Authors
+// Copyright 2024 The Perses Authors
 // Licensed under the Apache License, Version 2.0 (the "License");
 // you may not use this file except in compliance with the License.
 // You may obtain a copy of the License at
@@ -14,23 +14,23 @@
 Object.defineProperty(exports, "__esModule", {
     value: true
 });
-Object.defineProperty(exports, "WithTemplateVariables", {
+Object.defineProperty(exports, "WithVariables", {
     enumerable: true,
     get: function() {
-        return WithTemplateVariables;
+        return WithVariables;
     }
 });
 const _jsxruntime = require("react/jsx-runtime");
 const _dashboards = require("@perses-dev/dashboards");
 // Type guard because storybook types parameters as `any`
-function isWithTemplateVariableParameter(parameter) {
+function isWithVariableParameter(parameter) {
     return !!parameter && typeof parameter === 'object' && 'props' in parameter;
 }
-const WithTemplateVariables = (Story, context)=>{
-    const initParameter = context.parameters.withTemplateVariables;
-    const parameter = isWithTemplateVariableParameter(initParameter) ? initParameter : undefined;
-    const props = parameter === null || parameter === void 0 ? void 0 : parameter.props;
-    return /*#__PURE__*/ (0, _jsxruntime.jsx)(_dashboards.TemplateVariableProvider, {
+const WithVariables = (Story, context)=>{
+    const initParameter = context.parameters.withVariables;
+    const parameter = isWithVariableParameter(initParameter) ? initParameter : undefined;
+    const props = parameter?.props;
+    return /*#__PURE__*/ (0, _jsxruntime.jsx)(_dashboards.VariableProvider, {
         ...props,
         children: /*#__PURE__*/ (0, _jsxruntime.jsx)(Story, {})
     });

package/dist/cjs/stories/decorators/index.js

@@ -1,4 +1,4 @@
-// Copyright 2023 The Perses Authors
+// Copyright 2024 The Perses Authors
 // Licensed under the Apache License, Version 2.0 (the "License");
 // you may not use this file except in compliance with the License.
 // You may obtain a copy of the License at
@@ -17,7 +17,7 @@ Object.defineProperty(exports, "__esModule", {
 _export_star(require("./constants"), exports);
 _export_star(require("./WithDashboard"), exports);
 _export_star(require("./WithDatasourceStore"), exports);
-_export_star(require("./WithTemplateVariables"), exports);
+_export_star(require("./WithVariables"), exports);
 function _export_star(from, to) {
     Object.keys(from).forEach(function(k) {
         if (k !== "default" && !Object.prototype.hasOwnProperty.call(to, k)) {

package/dist/cjs/test/dashboard-provider.js

@@ -21,11 +21,11 @@ function _export(target, all) {
     });
 }
 _export(exports, {
-    getTestDashboard: function() {
-        return getTestDashboard;
-    },
     createDashboardProviderSpy: function() {
         return createDashboardProviderSpy;
+    },
+    getTestDashboard: function() {
+        return getTestDashboard;
     }
 });
 const _react = require("react");

package/dist/cjs/test/datasource-provider.js

@@ -21,14 +21,14 @@ function _export(target, all) {
     });
 }
 _export(exports, {
-    prometheusDemoUrl: function() {
-        return prometheusDemoUrl;
+    defaultDatasourceProps: function() {
+        return defaultDatasourceProps;
     },
     prometheusDemo: function() {
         return prometheusDemo;
     },
-    defaultDatasourceProps: function() {
-        return defaultDatasourceProps;
+    prometheusDemoUrl: function() {
+        return prometheusDemoUrl;
     }
 });
 const _dashboardprovider = require("./dashboard-provider");

package/dist/cjs/test/plugin-registry.js

@@ -41,8 +41,10 @@ const FakeTimeSeriesPlugin = {
     createInitialOptions: ()=>({})
 };
 const MOCK_TIME_SERIES_PANEL = {
-    pluginType: 'Panel',
-    kind: 'TimeSeriesChart',
+    kind: 'Panel',
+    spec: {
+        name: 'TimeSeriesChart'
+    },
     plugin: FakeTimeSeriesPlugin
 };
 const MOCK_PLUGINS = [

package/dist/cjs/test/render.js

@@ -21,27 +21,27 @@ Object.defineProperty(exports, "renderWithContext", {
     }
 });
 const _jsxruntime = require("react/jsx-runtime");
-const _react = require("react");
-const _react1 = require("@testing-library/react");
-const _reactrouterdom = require("react-router-dom");
+const _components = require("@perses-dev/components");
+const _pluginsystem = require("@perses-dev/plugin-system");
+const _reactquery = require("@tanstack/react-query");
+const _react = require("@testing-library/react");
 const _history = require("history");
+const _react1 = require("react");
+const _reactrouterdom = require("react-router-dom");
 const _usequeryparams = require("use-query-params");
 const _reactrouter6 = require("use-query-params/adapters/react-router-6");
-const _reactquery = require("@tanstack/react-query");
-const _components = require("@perses-dev/components");
-const _pluginsystem = require("@perses-dev/plugin-system");
 const _context = require("../context");
 const _test = require("../test");
 const _pluginregistry = require("./plugin-registry");
 /*
  * Workaround for React router upgrade type errors.
  * More details: https://stackoverflow.com/a/69948457/17575201
- */ const CustomRouter = ({ history , children  })=>{
-    const [state, setState] = (0, _react.useState)({
+ */ const CustomRouter = ({ history, children })=>{
+    const [state, setState] = (0, _react1.useState)({
         action: history.action,
         location: history.location
     });
-    (0, _react.useLayoutEffect)(()=>history.listen(setState), [
+    (0, _react1.useLayoutEffect)(()=>history.listen(setState), [
         history
     ]);
     return /*#__PURE__*/ (0, _jsxruntime.jsx)(_reactrouterdom.Router, {
@@ -61,7 +61,8 @@ function renderWithContext(ui, options, history) {
             }
         }
     });
-    const customHistory = history !== null && history !== void 0 ? history : (0, _history.createMemoryHistory)();
+    const customHistory = history ?? (0, _history.createMemoryHistory)();
+    const mockRegistry = (0, _pluginsystem.mockPluginRegistry)(..._pluginregistry.MOCK_PLUGINS);
     const BaseRender = ()=>/*#__PURE__*/ (0, _jsxruntime.jsx)(CustomRouter, {
             history: customHistory,
             children: /*#__PURE__*/ (0, _jsxruntime.jsx)(_reactquery.QueryClientProvider, {
@@ -76,7 +77,8 @@ function renderWithContext(ui, options, history) {
                         children: /*#__PURE__*/ (0, _jsxruntime.jsx)(_components.ChartsProvider, {
                             chartsTheme: _components.testChartsTheme,
                             children: /*#__PURE__*/ (0, _jsxruntime.jsx)(_pluginsystem.PluginRegistry, {
-                                ...(0, _pluginsystem.mockPluginRegistry)(..._pluginregistry.MOCK_PLUGINS),
+                                pluginLoader: mockRegistry.pluginLoader,
+                                defaultPluginKinds: mockRegistry.defaultPluginKinds,
                                 children: /*#__PURE__*/ (0, _jsxruntime.jsx)(_context.DatasourceStoreProvider, {
                                     ..._test.defaultDatasourceProps,
                                     children: ui
@@ -87,5 +89,5 @@ function renderWithContext(ui, options, history) {
                 })
             })
         });
-    return (0, _react1.render)(/*#__PURE__*/ (0, _jsxruntime.jsx)(BaseRender, {}), options);
+    return (0, _react.render)(/*#__PURE__*/ (0, _jsxruntime.jsx)(BaseRender, {}), options);
 }

package/dist/cjs/utils/index.js

@@ -15,7 +15,6 @@ Object.defineProperty(exports, "__esModule", {
     value: true
 });
 _export_star(require("./panelUtils"), exports);
-_export_star(require("./time"), exports);
 function _export_star(from, to) {
     Object.keys(from).forEach(function(k) {
         if (k !== "default" && !Object.prototype.hasOwnProperty.call(to, k)) {

package/dist/cjs/utils/panelUtils.js

@@ -21,14 +21,14 @@ function _export(target, all) {
     });
 }
 _export(exports, {
+    getValidPanelKey: function() {
+        return getValidPanelKey;
+    },
     getYForNewRow: function() {
         return getYForNewRow;
     },
     insertPanelInLayout: function() {
         return insertPanelInLayout;
-    },
-    getValidPanelKey: function() {
-        return getValidPanelKey;
     }
 });
 const _constants = require("../constants");
@@ -42,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,
@@ -159,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/views/ViewDashboard/DashboardApp.js

@@ -28,13 +28,13 @@ 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 , isCreating  } = props;
+    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 { isEditMode, setEditMode } = (0, _context.useEditMode)();
+    const { dashboard, setDashboard } = (0, _context.useDashboard)();
     const [originalDashboard, setOriginalDashboard] = (0, _react.useState)(undefined);
-    const { setSavedDatasources  } = (0, _pluginsystem.useDatasourceStore)();
-    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) {
@@ -49,8 +49,7 @@ 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 : {});
+        setSavedDatasources(dashboard.spec.datasources ?? {});
     };
     const onCancelButtonClick = ()=>{
         // check if dashboard has been modified
@@ -87,7 +86,8 @@ const DashboardApp = (props)=>{
             }),
             /*#__PURE__*/ (0, _jsxruntime.jsxs)(_material.Box, {
                 sx: {
-                    padding: (theme)=>theme.spacing(2),
+                    paddingTop: 2,
+                    paddingX: 2,
                     height: '100%'
                 },
                 children: [

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

@@ -1,4 +1,4 @@
-// Copyright 2023 The Perses Authors
+// Copyright 2024 The Perses Authors
 // Licensed under the Apache License, Version 2.0 (the "License");
 // you may not use this file except in compliance with the License.
 // You may obtain a copy of the License at
@@ -27,17 +27,16 @@ const _components = require("@perses-dev/components");
 const _pluginsystem = require("@perses-dev/plugin-system");
 const _react = require("react");
 const _context = require("../../context");
+const _DashboardProviderWithQueryParams = require("../../context/DashboardProvider/DashboardProviderWithQueryParams");
 const _DashboardApp = require("./DashboardApp");
 function ViewDashboard(props) {
-    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 { dashboardResource, datasourceApi, externalVariableDefinitions, dashboardTitleComponent, emptyDashboardProps, onSave, onDiscard, initialVariableIsSticky, isReadonly, isEditing, isCreating, sx, ...others } = props;
+    const { spec } = dashboardResource;
+    const dashboardDuration = spec.duration ?? _core.DEFAULT_DASHBOARD_DURATION;
+    const dashboardRefreshInterval = spec.refreshInterval ?? _core.DEFAULT_REFRESH_INTERVAL;
     const initialTimeRange = (0, _pluginsystem.useInitialTimeRange)(dashboardDuration);
     const initialRefreshInterval = (0, _pluginsystem.useInitialRefreshInterval)(dashboardRefreshInterval);
-    const { data  } = (0, _pluginsystem.usePluginBuiltinVariableDefinitions)();
+    const { data } = (0, _pluginsystem.usePluginBuiltinVariableDefinitions)();
     const builtinVariables = (0, _react.useMemo)(()=>{
         const result = [
             {
@@ -79,7 +78,7 @@ function ViewDashboard(props) {
     return /*#__PURE__*/ (0, _jsxruntime.jsx)(_context.DatasourceStoreProvider, {
         dashboardResource: dashboardResource,
         datasourceApi: datasourceApi,
-        children: /*#__PURE__*/ (0, _jsxruntime.jsx)(_context.DashboardProvider, {
+        children: /*#__PURE__*/ (0, _jsxruntime.jsx)(_DashboardProviderWithQueryParams.DashboardProviderWithQueryParams, {
             initialState: {
                 dashboardResource,
                 isEditMode: !!isEditing
@@ -87,10 +86,10 @@ function ViewDashboard(props) {
             children: /*#__PURE__*/ (0, _jsxruntime.jsx)(_pluginsystem.TimeRangeProviderWithQueryParams, {
                 initialTimeRange: initialTimeRange,
                 initialRefreshInterval: initialRefreshInterval,
-                children: /*#__PURE__*/ (0, _jsxruntime.jsx)(_context.TemplateVariableProviderWithQueryParams, {
+                children: /*#__PURE__*/ (0, _jsxruntime.jsx)(_context.VariableProviderWithQueryParams, {
                     initialVariableDefinitions: spec.variables,
                     externalVariableDefinitions: externalVariableDefinitions,
-                    builtinVariables: builtinVariables,
+                    builtinVariableDefinitions: builtinVariables,
                     children: /*#__PURE__*/ (0, _jsxruntime.jsx)(_material.Box, {
                         sx: (0, _components.combineSx)({
                             display: 'flex',

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

@@ -1,3 +1,3 @@
-/// <reference types="react" />
-export declare const AddGroupButton: () => JSX.Element;
+import { ReactElement } from 'react';
+export declare const AddGroupButton: () => ReactElement;
 //# 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,mBAe1B,CAAC"}
+{"version":3,"file":"AddGroupButton.d.ts","sourceRoot":"","sources":["../../../src/components/AddGroupButton/AddGroupButton.tsx"],"names":[],"mappings":"AAgBA,OAAO,EAAE,YAAY,EAAE,MAAM,OAAO,CAAC;AAIrC,eAAO,MAAM,cAAc,QAAO,YAejC,CAAC"}

package/dist/components/AddGroupButton/AddGroupButton.js

@@ -17,7 +17,7 @@ import { InfoTooltip } from '@perses-dev/components';
 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, {

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, 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,kBAAiB,EAAE,GAAGF;IAE9B,qBACE,KAACH;QAAYM,aAAaL,aAAaM;kBACrC,cAAA,KAACT;YACCU,yBAAW,KAACT;YACZU,SAASJ;YACTK,cAAYT,aAAaM;YACzBI,IAAIT;sBACL;;;AAKP,EAAE"}
+{"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 { ReactElement } from 'react';\nimport { TOOLTIP_TEXT, editButtonStyle } from '../../constants';\nimport { useDashboardActions } from '../../context';\n\nexport const AddGroupButton = (): ReactElement => {\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;AAErD,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/AddPanelButton/AddPanelButton.d.ts

@@ -1,5 +1,5 @@
-/// <reference types="react" />
 import { ButtonProps } from '@mui/material';
+import { ReactElement } from 'react';
 export interface AddPanelButtonProps extends Pick<ButtonProps, 'fullWidth'> {
     /**
      * The variant to use to display the button.
@@ -14,5 +14,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) => ReactElement;
 //# 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;AAGpD,OAAO,EAAE,YAAY,EAAE,MAAM,OAAO,CAAC;AAIrC,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,KAAG,YAkBxB,CAAC"}

package/dist/components/AddPanelButton/AddPanelButton.js

@@ -16,8 +16,8 @@ import AddPanelIcon from 'mdi-material-ui/ChartBoxPlusOutline';
 import { InfoTooltip } from '@perses-dev/components';
 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, {

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, 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,SAAU,OAAM,EAChBC,OAAQ,UAAS,EACjBC,OAAQ,QAAO,EACfC,UAAS,EACW;IACpB,MAAM,EAAEC,aAAY,EAAE,GAAGN;IAEzB,qBACE,KAACH;QAAYU,aAAaT,aAAaU;kBACrC,cAAA,KAACb;YACCc,yBAAW,KAACb;YACZc,SAASJ;YACTK,cAAYb,aAAaU;YACzBN,SAASA;YACTC,OAAOA;YACPE,WAAWA;YACXO,IAAIb;sBAEHK;;;AAIT,EAAE"}
+{"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 { ReactElement } from 'react';\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): ReactElement => {\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;AAErD,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/Dashboard/Dashboard.d.ts

@@ -1,8 +1,8 @@
-/// <reference types="react" />
 import { BoxProps } from '@mui/material';
+import { ReactElement } from 'react';
 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 +14,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): ReactElement;
 //# 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;AAE9C,OAAO,EAAE,YAAY,EAAU,MAAM,OAAO,CAAC;AAG7C,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;AAGF;;GAEG;AACH,wBAAgB,SAAS,CAAC,EAAE,mBAAmB,EAAE,YAAY,EAAE,GAAG,QAAQ,EAAE,EAAE,cAAc,GAAG,YAAY,CA2B1G"}

package/dist/components/Dashboard/Dashboard.js

@@ -13,19 +13,25 @@
 import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
 import { Box } from '@mui/material';
 import { ErrorBoundary, ErrorAlert } from '@perses-dev/components';
+import { useRef } from 'react';
 import { usePanelGroupIds } from '../../context';
 import { GridLayout } from '../GridLayout';
 import { EmptyDashboard } from '../EmptyDashboard';
+const HEADER_HEIGHT = 165; // Approximate height of the header in dashboard view (including the navbar and variables toolbar)
 /**
  * Renders a Dashboard for the provided Dashboard spec.
- */ export function Dashboard({ emptyDashboardProps , panelOptions , ...boxProps }) {
+ */ export function Dashboard({ emptyDashboardProps, panelOptions, ...boxProps }) {
     const panelGroupIds = usePanelGroupIds();
+    const boxRef = useRef(null);
     const isEmpty = !panelGroupIds.length;
+    const dashboardTopPosition = boxRef.current?.getBoundingClientRect().top ?? HEADER_HEIGHT;
+    const panelFullHeight = window.innerHeight - dashboardTopPosition - window.scrollY;
     return /*#__PURE__*/ _jsx(Box, {
         ...boxProps,
         sx: {
             height: '100%'
         },
+        ref: boxRef,
         children: /*#__PURE__*/ _jsxs(ErrorBoundary, {
             FallbackComponent: ErrorAlert,
             children: [
@@ -41,7 +47,8 @@ import { EmptyDashboard } from '../EmptyDashboard';
                 }),
                 !isEmpty && panelGroupIds.map((panelGroupId)=>/*#__PURE__*/ _jsx(GridLayout, {
                         panelGroupId: panelGroupId,
-                        panelOptions: panelOptions
+                        panelOptions: panelOptions,
+                        panelFullHeight: panelFullHeight
                     }, panelGroupId))
             ]
         })

package/dist/components/Dashboard/Dashboard.js.map

@@ -1 +1 @@
-{"version":3,"sources":["../../../src/components/Dashboard/Dashboard.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, BoxProps } from '@mui/material';\nimport { ErrorBoundary, ErrorAlert } from '@perses-dev/components';\nimport { usePanelGroupIds } from '../../context';\nimport { GridLayout } from '../GridLayout';\nimport { EmptyDashboard, EmptyDashboardProps } from '../EmptyDashboard';\nimport { PanelOptions } from '../Panel';\nexport type DashboardProps = BoxProps & {\n  /**\n   * Props for `EmptyDashboard` component that will be rendered when the dashboard\n   * is empty (i.e. has no panel groups). If not specified, the defaults will\n   * be used.\n   */\n  emptyDashboardProps?: EmptyDashboardProps;\n  panelOptions?: PanelOptions;\n};\n\n/**\n * Renders a Dashboard for the provided Dashboard spec.\n */\nexport function Dashboard({ emptyDashboardProps, panelOptions, ...boxProps }: DashboardProps) {\n  const panelGroupIds = usePanelGroupIds();\n  const isEmpty = !panelGroupIds.length;\n\n  return (\n    <Box {...boxProps} sx={{ height: '100%' }}>\n      <ErrorBoundary FallbackComponent={ErrorAlert}>\n        {isEmpty && (\n          <Box sx={{ height: '100%', display: 'flex', alignItems: 'center' }}>\n            <EmptyDashboard {...emptyDashboardProps} />\n          </Box>\n        )}\n        {!isEmpty &&\n          panelGroupIds.map((panelGroupId) => (\n            <GridLayout key={panelGroupId} panelGroupId={panelGroupId} panelOptions={panelOptions} />\n          ))}\n      </ErrorBoundary>\n    </Box>\n  );\n}\n"],"names":["Box","ErrorBoundary","ErrorAlert","usePanelGroupIds","GridLayout","EmptyDashboard","Dashboard","emptyDashboardProps","panelOptions","boxProps","panelGroupIds","isEmpty","length","sx","height","FallbackComponent","display","alignItems","map","panelGroupId"],"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,GAAG,QAAkB,gBAAgB;AAC9C,SAASC,aAAa,EAAEC,UAAU,QAAQ,yBAAyB;AACnE,SAASC,gBAAgB,QAAQ,gBAAgB;AACjD,SAASC,UAAU,QAAQ,gBAAgB;AAC3C,SAASC,cAAc,QAA6B,oBAAoB;AAYxE;;CAEC,GACD,OAAO,SAASC,UAAU,EAAEC,oBAAmB,EAAEC,aAAY,EAAE,GAAGC,UAA0B;IAC1F,MAAMC,gBAAgBP;IACtB,MAAMQ,UAAU,CAACD,cAAcE;IAE/B,qBACE,KAACZ;QAAK,GAAGS,QAAQ;QAAEI,IAAI;YAAEC,QAAQ;QAAO;kBACtC,cAAA,MAACb;YAAcc,mBAAmBb;;gBAC/BS,yBACC,KAACX;oBAAIa,IAAI;wBAAEC,QAAQ;wBAAQE,SAAS;wBAAQC,YAAY;oBAAS;8BAC/D,cAAA,KAACZ;wBAAgB,GAAGE,mBAAmB;;;gBAG1C,CAACI,WACAD,cAAcQ,IAAI,CAACC,6BACjB,KAACf;wBAA8Be,cAAcA;wBAAcX,cAAcA;uBAAxDW;;;;AAK7B"}
+{"version":3,"sources":["../../../src/components/Dashboard/Dashboard.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, BoxProps } from '@mui/material';\nimport { ErrorBoundary, ErrorAlert } from '@perses-dev/components';\nimport { ReactElement, useRef } from 'react';\nimport { usePanelGroupIds } from '../../context';\nimport { GridLayout } from '../GridLayout';\nimport { EmptyDashboard, EmptyDashboardProps } from '../EmptyDashboard';\nimport { PanelOptions } from '../Panel';\nexport type DashboardProps = BoxProps & {\n  /**\n   * Props for `EmptyDashboard` component that will be rendered when the dashboard\n   * is empty (i.e. has no panel groups). If not specified, the defaults will\n   * be used.\n   */\n  emptyDashboardProps?: EmptyDashboardProps;\n  panelOptions?: PanelOptions;\n};\nconst HEADER_HEIGHT = 165; // Approximate height of the header in dashboard view (including the navbar and variables toolbar)\n\n/**\n * Renders a Dashboard for the provided Dashboard spec.\n */\nexport function Dashboard({ emptyDashboardProps, panelOptions, ...boxProps }: DashboardProps): ReactElement {\n  const panelGroupIds = usePanelGroupIds();\n  const boxRef = useRef<HTMLDivElement>(null);\n  const isEmpty = !panelGroupIds.length;\n  const dashboardTopPosition = boxRef.current?.getBoundingClientRect().top ?? HEADER_HEIGHT;\n  const panelFullHeight = window.innerHeight - dashboardTopPosition - window.scrollY;\n\n  return (\n    <Box {...boxProps} sx={{ height: '100%' }} ref={boxRef}>\n      <ErrorBoundary FallbackComponent={ErrorAlert}>\n        {isEmpty && (\n          <Box sx={{ height: '100%', display: 'flex', alignItems: 'center' }}>\n            <EmptyDashboard {...emptyDashboardProps} />\n          </Box>\n        )}\n        {!isEmpty &&\n          panelGroupIds.map((panelGroupId) => (\n            <GridLayout\n              key={panelGroupId}\n              panelGroupId={panelGroupId}\n              panelOptions={panelOptions}\n              panelFullHeight={panelFullHeight}\n            />\n          ))}\n      </ErrorBoundary>\n    </Box>\n  );\n}\n"],"names":["Box","ErrorBoundary","ErrorAlert","useRef","usePanelGroupIds","GridLayout","EmptyDashboard","HEADER_HEIGHT","Dashboard","emptyDashboardProps","panelOptions","boxProps","panelGroupIds","boxRef","isEmpty","length","dashboardTopPosition","current","getBoundingClientRect","top","panelFullHeight","window","innerHeight","scrollY","sx","height","ref","FallbackComponent","display","alignItems","map","panelGroupId"],"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,GAAG,QAAkB,gBAAgB;AAC9C,SAASC,aAAa,EAAEC,UAAU,QAAQ,yBAAyB;AACnE,SAAuBC,MAAM,QAAQ,QAAQ;AAC7C,SAASC,gBAAgB,QAAQ,gBAAgB;AACjD,SAASC,UAAU,QAAQ,gBAAgB;AAC3C,SAASC,cAAc,QAA6B,oBAAoB;AAWxE,MAAMC,gBAAgB,KAAK,kGAAkG;AAE7H;;CAEC,GACD,OAAO,SAASC,UAAU,EAAEC,mBAAmB,EAAEC,YAAY,EAAE,GAAGC,UAA0B;IAC1F,MAAMC,gBAAgBR;IACtB,MAAMS,SAASV,OAAuB;IACtC,MAAMW,UAAU,CAACF,cAAcG,MAAM;IACrC,MAAMC,uBAAuBH,OAAOI,OAAO,EAAEC,wBAAwBC,OAAOZ;IAC5E,MAAMa,kBAAkBC,OAAOC,WAAW,GAAGN,uBAAuBK,OAAOE,OAAO;IAElF,qBACE,KAACvB;QAAK,GAAGW,QAAQ;QAAEa,IAAI;YAAEC,QAAQ;QAAO;QAAGC,KAAKb;kBAC9C,cAAA,MAACZ;YAAc0B,mBAAmBzB;;gBAC/BY,yBACC,KAACd;oBAAIwB,IAAI;wBAAEC,QAAQ;wBAAQG,SAAS;wBAAQC,YAAY;oBAAS;8BAC/D,cAAA,KAACvB;wBAAgB,GAAGG,mBAAmB;;;gBAG1C,CAACK,WACAF,cAAckB,GAAG,CAAC,CAACC,6BACjB,KAAC1B;wBAEC0B,cAAcA;wBACdrB,cAAcA;wBACdU,iBAAiBA;uBAHZW;;;;AASnB"}

package/dist/components/DashboardStickyToolbar/DashboardStickyToolbar.d.ts

@@ -1,9 +1,9 @@
-/// <reference types="react" />
+import { ReactElement } from 'react';
 import { SxProps, Theme } from '@mui/material';
 interface DashboardStickyToolbarProps {
     initialVariableIsSticky?: boolean;
     sx?: SxProps<Theme>;
 }
-export declare function DashboardStickyToolbar(props: DashboardStickyToolbarProps): JSX.Element;
+export declare function DashboardStickyToolbar(props: DashboardStickyToolbarProps): ReactElement;
 export {};
 //# sourceMappingURL=DashboardStickyToolbar.d.ts.map

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

@@ -1 +1 @@
-{"version":3,"file":"DashboardStickyToolbar.d.ts","sourceRoot":"","sources":["../../../src/components/DashboardStickyToolbar/DashboardStickyToolbar.tsx"],"names":[],"mappings":";AAcA,OAAO,EAKL,OAAO,EACP,KAAK,EAIN,MAAM,eAAe,CAAC;AAMvB,UAAU,2BAA2B;IACnC,uBAAuB,CAAC,EAAE,OAAO,CAAC;IAClC,EAAE,CAAC,EAAE,OAAO,CAAC,KAAK,CAAC,CAAC;CACrB;AAED,wBAAgB,sBAAsB,CAAC,KAAK,EAAE,2BAA2B,eAuExE"}
+{"version":3,"file":"DashboardStickyToolbar.d.ts","sourceRoot":"","sources":["../../../src/components/DashboardStickyToolbar/DashboardStickyToolbar.tsx"],"names":[],"mappings":"AAaA,OAAO,EAAE,YAAY,EAAY,MAAM,OAAO,CAAC;AAC/C,OAAO,EAKL,OAAO,EACP,KAAK,EAIN,MAAM,eAAe,CAAC;AAMvB,UAAU,2BAA2B;IACnC,uBAAuB,CAAC,EAAE,OAAO,CAAC;IAClC,EAAE,CAAC,EAAE,OAAO,CAAC,KAAK,CAAC,CAAC;CACrB;AAED,wBAAgB,sBAAsB,CAAC,KAAK,EAAE,2BAA2B,GAAG,YAAY,CAuEvF"}

package/dist/components/DashboardStickyToolbar/DashboardStickyToolbar.js

@@ -1,4 +1,4 @@
-// Copyright 2023 The Perses Authors
+// Copyright 2024 The Perses Authors
 // Licensed under the Apache License, Version 2.0 (the "License");
 // you may not use this file except in compliance with the License.
 // You may obtain a copy of the License at
@@ -15,8 +15,8 @@ import { useState } from 'react';
 import { AppBar, Box, IconButton, Stack, useMediaQuery, useScrollTrigger, useTheme } from '@mui/material';
 import PinOutline from 'mdi-material-ui/PinOutline';
 import PinOffOutline from 'mdi-material-ui/PinOffOutline';
-import { TemplateVariableList } from '../Variables';
-import { TimeRangeControls } from '../TimeRangeControls';
+import { TimeRangeControls } from '@perses-dev/plugin-system';
+import { VariableList } from '../Variables';
 export function DashboardStickyToolbar(props) {
     const [isPin, setIsPin] = useState(props.initialVariableIsSticky);
     const scrollTrigger = useScrollTrigger({
@@ -69,7 +69,7 @@ export function DashboardStickyToolbar(props) {
                         },
                         gap: 1,
                         children: [
-                            /*#__PURE__*/ _jsx(TemplateVariableList, {}),
+                            /*#__PURE__*/ _jsx(VariableList, {}),
                             props.initialVariableIsSticky && /*#__PURE__*/ _jsx(IconButton, {
                                 style: {
                                     width: 'fit-content',