@perses-dev/dashboards 0.14.0 → 0.16.0

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

@@ -22,15 +22,13 @@ const _jsxRuntime = require("react/jsx-runtime");
 const _material = require("@mui/material");
 const _components = require("@perses-dev/components");
 const _context = require("../../context");
-const _utils = require("../../utils");
 const _dashboardApp = require("./DashboardApp");
 function ViewDashboard(props) {
-    const { dashboardResource , datasourceApi , dashboardTitleComponent , sx , ...others } = props;
+    const { dashboardResource , datasourceApi , dashboardTitleComponent , initialVariableIsSticky , sx , ...others } = props;
     const { spec  } = dashboardResource;
     var _duration;
     const dashboardDuration = (_duration = spec.duration) !== null && _duration !== void 0 ? _duration : '1h';
-    const initialTimeRange = (0, _utils.useInitialTimeRange)(dashboardDuration);
-    const { timeRange , setTimeRange  } = (0, _utils.useSetTimeRangeParams)(initialTimeRange, true);
+    const initialTimeRange = (0, _context.useInitialTimeRange)(dashboardDuration);
     return /*#__PURE__*/ (0, _jsxRuntime.jsx)(_context.DatasourceStoreProvider, {
         dashboardResource: dashboardResource,
         datasourceApi: datasourceApi,
@@ -39,8 +37,8 @@ function ViewDashboard(props) {
                 dashboardResource
             },
             children: /*#__PURE__*/ (0, _jsxRuntime.jsx)(_context.TimeRangeProvider, {
-                timeRange: timeRange,
-                setTimeRange: setTimeRange,
+                initialTimeRange: initialTimeRange,
+                enabledURLParams: true,
                 children: /*#__PURE__*/ (0, _jsxRuntime.jsx)(_context.TemplateVariableProvider, {
                     initialVariableDefinitions: spec.variables,
                     children: /*#__PURE__*/ (0, _jsxRuntime.jsx)(_material.Box, {
@@ -56,7 +54,8 @@ function ViewDashboard(props) {
                             FallbackComponent: _components.ErrorAlert,
                             children: /*#__PURE__*/ (0, _jsxRuntime.jsx)(_dashboardApp.DashboardApp, {
                                 dashboardResource: dashboardResource,
-                                dashboardTitleComponent: dashboardTitleComponent
+                                dashboardTitleComponent: dashboardTitleComponent,
+                                initialVariableIsSticky: initialVariableIsSticky
                             })
                         })
                     })

package/dist/cjs/views/ViewDashboard/tests/panelGroups.test.js

@@ -28,7 +28,7 @@ function _interopRequireDefault(obj) {
 describe('Panel Groups', ()=>{
     const renderDashboard = ()=>{
         (0, _test.renderWithContext)(/*#__PURE__*/ (0, _jsxRuntime.jsx)(_context.TimeRangeProvider, {
-            timeRange: {
+            initialTimeRange: {
                 pastDuration: '30m'
             },
             children: /*#__PURE__*/ (0, _jsxRuntime.jsx)(_context.TemplateVariableProvider, {
@@ -46,45 +46,40 @@ describe('Panel Groups', ()=>{
     };
     it('should delete panel', ()=>{
         renderDashboard();
-        const panel = _react.screen.getByText('CPU');
-        _userEvent.default.hover(panel);
-        const deletePanelButton = _react.screen.getByLabelText('delete panel');
+        const panelTitle = 'CPU';
+        const deletePanelButton = _react.screen.getByLabelText(`delete panel ${panelTitle}`);
         _userEvent.default.click(deletePanelButton);
         _react.screen.getByText('Delete Panel');
         const deleteButton = _react.screen.getByText('Delete');
         _userEvent.default.click(deleteButton);
         // The panel should disappear
-        const deletedPanel = _react.screen.queryByText('CPU');
+        const deletedPanel = _react.screen.queryByText(panelTitle);
         expect(deletedPanel).not.toBeInTheDocument();
     });
     it('should only delete panel from panel group if panel is not referenced more than once', ()=>{
         renderDashboard();
-        const panels = _react.screen.getAllByText('Disk I/O Utilization');
+        const panelTitle = 'Disk I/O Utilization';
+        const panels = _react.screen.getAllByText(panelTitle);
         expect(panels).toHaveLength(2);
-        const panel = panels[0];
-        if (panel === undefined) throw new Error('Missing panel');
-        _userEvent.default.hover(panel);
-        const deletePanelButton = _react.screen.getByLabelText('delete panel');
+        const deletePanelButton = _react.screen.getAllByLabelText(`delete panel ${panelTitle}`)[0];
+        if (deletePanelButton === undefined) throw new Error('Missing delete button');
         _userEvent.default.click(deletePanelButton);
         _react.screen.getByText('Delete Panel');
         const deleteButton = _react.screen.getByText('Delete');
         _userEvent.default.click(deleteButton);
         // The deleted panel should still be on screen in the other group
-        const deletedPanel = _react.screen.queryByText('Disk I/O Utilization');
+        const deletedPanel = _react.screen.queryByText(panelTitle);
         expect(deletedPanel).toBeInTheDocument();
     });
     it('should swap panels', ()=>{
         renderDashboard();
         // should move panel down
-        const group1 = _react.screen.getByText('CPU Stats');
-        _userEvent.default.hover(group1);
-        const moveGroupDownBtn = _react.screen.getByLabelText('move group down');
+        const groupTitle1 = 'CPU Stats';
+        const moveGroupDownBtn = _react.screen.getByLabelText(`move group ${groupTitle1} down`);
         _userEvent.default.click(moveGroupDownBtn);
-        _userEvent.default.unhover(moveGroupDownBtn);
         // should move panel up
-        const group2 = _react.screen.getByText('Disk Stats');
-        _userEvent.default.hover(group2);
-        const moveGroupUpBtn = _react.screen.getByLabelText('move group up');
+        const groupTitle2 = 'Disk Stats';
+        const moveGroupUpBtn = _react.screen.getByLabelText(`move group ${groupTitle2} up`);
         _userEvent.default.click(moveGroupUpBtn);
     /* TODO: Figure out how to test this visually without coupling to the store
     const layouts = storeApi.getState().layouts;
@@ -94,15 +89,14 @@ describe('Panel Groups', ()=>{
     */ });
     it('should delete a panel group', ()=>{
         renderDashboard();
-        const group = _react.screen.getByText('CPU Stats');
-        _userEvent.default.hover(group);
-        const deleteGroupIcon = _react.screen.getByLabelText('delete group');
+        const groupTitle = 'CPU Stats';
+        const deleteGroupIcon = _react.screen.getByLabelText(`delete group ${groupTitle}`);
         _userEvent.default.click(deleteGroupIcon);
         _react.screen.getByText('Delete Panel Group');
         const deleteButton = _react.screen.getByText('Delete');
         _userEvent.default.click(deleteButton);
         // should remove group
-        const deletedGroup = _react.screen.queryByText('CPU Stats');
+        const deletedGroup = _react.screen.queryByText(groupTitle);
         expect(deletedGroup).not.toBeInTheDocument();
         // CPU panel should be completely gone since it wasn't in any other group
         let panel = _react.screen.queryByText('CPU');

package/dist/components/DashboardToolbar/DashboardToolbar.d.ts

@@ -2,6 +2,7 @@
 export interface DashboardToolbarProps {
     dashboardName: string;
     dashboardTitleComponent?: JSX.Element;
+    initialVariableIsSticky?: boolean;
     onEditButtonClick: () => void;
     onCancelButtonClick: () => void;
 }

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

@@ -1 +1 @@
-{"version":3,"file":"DashboardToolbar.d.ts","sourceRoot":"","sources":["../../../src/components/DashboardToolbar/DashboardToolbar.tsx"],"names":[],"mappings":";AAsBA,MAAM,WAAW,qBAAqB;IACpC,aAAa,EAAE,MAAM,CAAC;IACtB,uBAAuB,CAAC,EAAE,GAAG,CAAC,OAAO,CAAC;IACtC,iBAAiB,EAAE,MAAM,IAAI,CAAC;IAC9B,mBAAmB,EAAE,MAAM,IAAI,CAAC;CACjC;AAED,eAAO,MAAM,gBAAgB,UAAW,qBAAqB,gBAkF5D,CAAC"}
+{"version":3,"file":"DashboardToolbar.d.ts","sourceRoot":"","sources":["../../../src/components/DashboardToolbar/DashboardToolbar.tsx"],"names":[],"mappings":";AAuBA,MAAM,WAAW,qBAAqB;IACpC,aAAa,EAAE,MAAM,CAAC;IACtB,uBAAuB,CAAC,EAAE,GAAG,CAAC,OAAO,CAAC;IACtC,uBAAuB,CAAC,EAAE,OAAO,CAAC;IAClC,iBAAiB,EAAE,MAAM,IAAI,CAAC;IAC9B,mBAAmB,EAAE,MAAM,IAAI,CAAC;CACjC;AAED,eAAO,MAAM,gBAAgB,UAAW,qBAAqB,gBAoF5D,CAAC"}

package/dist/components/DashboardToolbar/DashboardToolbar.js

@@ -19,8 +19,9 @@ import { ErrorBoundary, ErrorAlert } from '@perses-dev/components';
 import { useDashboardActions, useEditMode } from '../../context';
 import { TemplateVariableList } from '../Variables';
 import { TimeRangeControls } from '../TimeRangeControls';
+import { DownloadButton } from '../DownloadButton';
 export const DashboardToolbar = (props)=>{
-    const { dashboardName , dashboardTitleComponent , onEditButtonClick , onCancelButtonClick  } = props;
+    const { dashboardName , dashboardTitleComponent , initialVariableIsSticky , onEditButtonClick , onCancelButtonClick  } = props;
     const { isEditMode , setEditMode  } = useEditMode();
     const { openAddPanelGroup , openAddPanel  } = useDashboardActions();
     const isLaptopSize = useMediaQuery(useTheme().breakpoints.up('sm'));
@@ -76,7 +77,9 @@ export const DashboardToolbar = (props)=>{
                     children: [
                         /*#__PURE__*/ _jsx(ErrorBoundary, {
                             FallbackComponent: ErrorAlert,
-                            children: /*#__PURE__*/ _jsx(TemplateVariableList, {})
+                            children: /*#__PURE__*/ _jsx(TemplateVariableList, {
+                                initialVariableIsSticky: initialVariableIsSticky
+                            })
                         }),
                         /*#__PURE__*/ _jsxs(Stack, {
                             direction: 'row',
@@ -120,6 +123,7 @@ export const DashboardToolbar = (props)=>{
                             },
                             children: [
                                 /*#__PURE__*/ _jsx(TimeRangeControls, {}),
+                                /*#__PURE__*/ _jsx(DownloadButton, {}),
                                 isLaptopSize && /*#__PURE__*/ _jsx(Button, {
                                     variant: "outlined",
                                     startIcon: /*#__PURE__*/ _jsx(PencilIcon, {}),
@@ -137,7 +141,9 @@ export const DashboardToolbar = (props)=>{
                     paddingY: 2,
                     children: /*#__PURE__*/ _jsx(ErrorBoundary, {
                         FallbackComponent: ErrorAlert,
-                        children: /*#__PURE__*/ _jsx(TemplateVariableList, {})
+                        children: /*#__PURE__*/ _jsx(TemplateVariableList, {
+                            initialVariableIsSticky: initialVariableIsSticky
+                        })
                     })
                 })
             ]

package/dist/components/DashboardToolbar/DashboardToolbar.js.map

@@ -1 +1 @@
-{"version":3,"sources":["../../../src/components/DashboardToolbar/DashboardToolbar.tsx"],"sourcesContent":["// Copyright 2022 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 { Typography, Stack, Button, Box, useTheme, useMediaQuery } from '@mui/material';\nimport PencilIcon from 'mdi-material-ui/PencilOutline';\nimport AddPanelGroupIcon from 'mdi-material-ui/PlusBoxOutline';\nimport AddPanelIcon from 'mdi-material-ui/ChartBoxPlusOutline';\nimport { ErrorBoundary, ErrorAlert } from '@perses-dev/components';\nimport { useDashboardActions, useEditMode } from '../../context';\nimport { TemplateVariableList } from '../Variables';\nimport { TimeRangeControls } from '../TimeRangeControls';\n\nexport interface DashboardToolbarProps {\n  dashboardName: string;\n  dashboardTitleComponent?: JSX.Element;\n  onEditButtonClick: () => void;\n  onCancelButtonClick: () => void;\n}\n\nexport const DashboardToolbar = (props: DashboardToolbarProps) => {\n  const { dashboardName, dashboardTitleComponent, onEditButtonClick, onCancelButtonClick } = props;\n\n  const { isEditMode, setEditMode } = useEditMode();\n  const { openAddPanelGroup, openAddPanel } = useDashboardActions();\n  const isLaptopSize = useMediaQuery(useTheme().breakpoints.up('sm'));\n  const dashboardTitle = dashboardTitleComponent ? (\n    dashboardTitleComponent\n  ) : (\n    <Typography variant=\"h2\">{dashboardName}</Typography>\n  );\n\n  const onSave = () => {\n    setEditMode(false);\n  };\n\n  return (\n    <>\n      {isEditMode ? (\n        <Stack spacing={2}>\n          <Box sx={{ backgroundColor: (theme) => theme.palette.primary.light + '20' }}>\n            <Box padding={2} display=\"flex\">\n              {dashboardTitle}\n              <Stack direction=\"row\" spacing={1} sx={{ marginLeft: 'auto' }}>\n                <Button variant=\"contained\" onClick={onSave}>\n                  Save\n                </Button>\n                <Button variant=\"outlined\" onClick={onCancelButtonClick}>\n                  Cancel\n                </Button>\n              </Stack>\n            </Box>\n          </Box>\n          <Box\n            sx={{\n              display: 'flex',\n              width: '100%',\n              alignItems: 'flex-start',\n              padding: (theme) => theme.spacing(2),\n            }}\n          >\n            <ErrorBoundary FallbackComponent={ErrorAlert}>\n              <TemplateVariableList />\n            </ErrorBoundary>\n            <Stack direction={'row'} spacing={1} sx={{ marginLeft: 'auto' }}>\n              <Button startIcon={<AddPanelGroupIcon />} onClick={openAddPanelGroup}>\n                Add Panel Group\n              </Button>\n              <Button startIcon={<AddPanelIcon />} onClick={openAddPanel}>\n                Add Panel\n              </Button>\n              <TimeRangeControls />\n            </Stack>\n          </Box>\n        </Stack>\n      ) : (\n        <Stack spacing={2} padding={2}>\n          <Box sx={{ display: 'flex', width: '100%' }}>\n            {dashboardTitle}\n            <Stack direction=\"row\" spacing={2} sx={{ marginLeft: 'auto' }}>\n              <TimeRangeControls />\n              {isLaptopSize && (\n                <Button\n                  variant=\"outlined\"\n                  startIcon={<PencilIcon />}\n                  onClick={onEditButtonClick}\n                  sx={{ marginLeft: 'auto' }}\n                >\n                  Edit\n                </Button>\n              )}\n            </Stack>\n          </Box>\n          <Box paddingY={2}>\n            <ErrorBoundary FallbackComponent={ErrorAlert}>\n              <TemplateVariableList />\n            </ErrorBoundary>\n          </Box>\n        </Stack>\n      )}\n    </>\n  );\n};\n"],"names":["Typography","Stack","Button","Box","useTheme","useMediaQuery","PencilIcon","AddPanelGroupIcon","AddPanelIcon","ErrorBoundary","ErrorAlert","useDashboardActions","useEditMode","TemplateVariableList","TimeRangeControls","DashboardToolbar","props","dashboardName","dashboardTitleComponent","onEditButtonClick","onCancelButtonClick","isEditMode","setEditMode","openAddPanelGroup","openAddPanel","isLaptopSize","breakpoints","up","dashboardTitle","variant","onSave","spacing","sx","backgroundColor","theme","palette","primary","light","padding","display","direction","marginLeft","onClick","width","alignItems","FallbackComponent","startIcon","paddingY"],"mappings":"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"}
+{"version":3,"sources":["../../../src/components/DashboardToolbar/DashboardToolbar.tsx"],"sourcesContent":["// Copyright 2022 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 { Typography, Stack, Button, Box, useTheme, useMediaQuery } from '@mui/material';\nimport PencilIcon from 'mdi-material-ui/PencilOutline';\nimport AddPanelGroupIcon from 'mdi-material-ui/PlusBoxOutline';\nimport AddPanelIcon from 'mdi-material-ui/ChartBoxPlusOutline';\nimport { ErrorBoundary, ErrorAlert } from '@perses-dev/components';\nimport { useDashboardActions, useEditMode } from '../../context';\nimport { TemplateVariableList } from '../Variables';\nimport { TimeRangeControls } from '../TimeRangeControls';\nimport { DownloadButton } from '../DownloadButton';\n\nexport interface DashboardToolbarProps {\n  dashboardName: string;\n  dashboardTitleComponent?: JSX.Element;\n  initialVariableIsSticky?: boolean;\n  onEditButtonClick: () => void;\n  onCancelButtonClick: () => void;\n}\n\nexport const DashboardToolbar = (props: DashboardToolbarProps) => {\n  const { dashboardName, dashboardTitleComponent, initialVariableIsSticky, onEditButtonClick, onCancelButtonClick } =\n    props;\n\n  const { isEditMode, setEditMode } = useEditMode();\n  const { openAddPanelGroup, openAddPanel } = useDashboardActions();\n  const isLaptopSize = useMediaQuery(useTheme().breakpoints.up('sm'));\n  const dashboardTitle = dashboardTitleComponent ? (\n    dashboardTitleComponent\n  ) : (\n    <Typography variant=\"h2\">{dashboardName}</Typography>\n  );\n\n  const onSave = () => {\n    setEditMode(false);\n  };\n\n  return (\n    <>\n      {isEditMode ? (\n        <Stack spacing={2}>\n          <Box sx={{ backgroundColor: (theme) => theme.palette.primary.light + '20' }}>\n            <Box padding={2} display=\"flex\">\n              {dashboardTitle}\n              <Stack direction=\"row\" spacing={1} sx={{ marginLeft: 'auto' }}>\n                <Button variant=\"contained\" onClick={onSave}>\n                  Save\n                </Button>\n                <Button variant=\"outlined\" onClick={onCancelButtonClick}>\n                  Cancel\n                </Button>\n              </Stack>\n            </Box>\n          </Box>\n          <Box\n            sx={{\n              display: 'flex',\n              width: '100%',\n              alignItems: 'flex-start',\n              padding: (theme) => theme.spacing(2),\n            }}\n          >\n            <ErrorBoundary FallbackComponent={ErrorAlert}>\n              <TemplateVariableList initialVariableIsSticky={initialVariableIsSticky} />\n            </ErrorBoundary>\n            <Stack direction={'row'} spacing={1} sx={{ marginLeft: 'auto' }}>\n              <Button startIcon={<AddPanelGroupIcon />} onClick={openAddPanelGroup}>\n                Add Panel Group\n              </Button>\n              <Button startIcon={<AddPanelIcon />} onClick={openAddPanel}>\n                Add Panel\n              </Button>\n              <TimeRangeControls />\n            </Stack>\n          </Box>\n        </Stack>\n      ) : (\n        <Stack spacing={2} padding={2}>\n          <Box sx={{ display: 'flex', width: '100%' }}>\n            {dashboardTitle}\n            <Stack direction=\"row\" spacing={2} sx={{ marginLeft: 'auto' }}>\n              <TimeRangeControls />\n              <DownloadButton />\n              {isLaptopSize && (\n                <Button\n                  variant=\"outlined\"\n                  startIcon={<PencilIcon />}\n                  onClick={onEditButtonClick}\n                  sx={{ marginLeft: 'auto' }}\n                >\n                  Edit\n                </Button>\n              )}\n            </Stack>\n          </Box>\n          <Box paddingY={2}>\n            <ErrorBoundary FallbackComponent={ErrorAlert}>\n              <TemplateVariableList initialVariableIsSticky={initialVariableIsSticky} />\n            </ErrorBoundary>\n          </Box>\n        </Stack>\n      )}\n    </>\n  );\n};\n"],"names":["Typography","Stack","Button","Box","useTheme","useMediaQuery","PencilIcon","AddPanelGroupIcon","AddPanelIcon","ErrorBoundary","ErrorAlert","useDashboardActions","useEditMode","TemplateVariableList","TimeRangeControls","DownloadButton","DashboardToolbar","props","dashboardName","dashboardTitleComponent","initialVariableIsSticky","onEditButtonClick","onCancelButtonClick","isEditMode","setEditMode","openAddPanelGroup","openAddPanel","isLaptopSize","breakpoints","up","dashboardTitle","variant","onSave","spacing","sx","backgroundColor","theme","palette","primary","light","padding","display","direction","marginLeft","onClick","width","alignItems","FallbackComponent","startIcon","paddingY"],"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,UAAU,EAAEC,KAAK,EAAEC,MAAM,EAAEC,GAAG,EAAEC,QAAQ,EAAEC,aAAa,QAAQ,eAAe,CAAC;AACxF,OAAOC,UAAU,MAAM,+BAA+B,CAAC;AACvD,OAAOC,iBAAiB,MAAM,gCAAgC,CAAC;AAC/D,OAAOC,YAAY,MAAM,qCAAqC,CAAC;AAC/D,SAASC,aAAa,EAAEC,UAAU,QAAQ,wBAAwB,CAAC;AACnE,SAASC,mBAAmB,EAAEC,WAAW,QAAQ,eAAe,CAAC;AACjE,SAASC,oBAAoB,QAAQ,cAAc,CAAC;AACpD,SAASC,iBAAiB,QAAQ,sBAAsB,CAAC;AACzD,SAASC,cAAc,QAAQ,mBAAmB,CAAC;AAUnD,OAAO,MAAMC,gBAAgB,GAAG,CAACC,KAA4B,GAAK;IAChE,MAAM,EAAEC,aAAa,CAAA,EAAEC,uBAAuB,CAAA,EAAEC,uBAAuB,CAAA,EAAEC,iBAAiB,CAAA,EAAEC,mBAAmB,CAAA,EAAE,GAC/GL,KAAK,AAAC;IAER,MAAM,EAAEM,UAAU,CAAA,EAAEC,WAAW,CAAA,EAAE,GAAGZ,WAAW,EAAE,AAAC;IAClD,MAAM,EAAEa,iBAAiB,CAAA,EAAEC,YAAY,CAAA,EAAE,GAAGf,mBAAmB,EAAE,AAAC;IAClE,MAAMgB,YAAY,GAAGtB,aAAa,CAACD,QAAQ,EAAE,CAACwB,WAAW,CAACC,EAAE,CAAC,IAAI,CAAC,CAAC,AAAC;IACpE,MAAMC,cAAc,GAAGX,uBAAuB,GAC5CA,uBAAuB,iBAEvB,KAACnB,UAAU;QAAC+B,OAAO,EAAC,IAAI;kBAAEb,aAAa;MAAc,AACtD,AAAC;IAEF,MAAMc,MAAM,GAAG,IAAM;QACnBR,WAAW,CAAC,KAAK,CAAC,CAAC;IACrB,CAAC,AAAC;IAEF,qBACE;kBACGD,UAAU,iBACT,MAACtB,KAAK;YAACgC,OAAO,EAAE,CAAC;;8BACf,KAAC9B,GAAG;oBAAC+B,EAAE,EAAE;wBAAEC,eAAe,EAAE,CAACC,KAAK,GAAKA,KAAK,CAACC,OAAO,CAACC,OAAO,CAACC,KAAK,GAAG,IAAI;qBAAE;8BACzE,cAAA,MAACpC,GAAG;wBAACqC,OAAO,EAAE,CAAC;wBAAEC,OAAO,EAAC,MAAM;;4BAC5BX,cAAc;0CACf,MAAC7B,KAAK;gCAACyC,SAAS,EAAC,KAAK;gCAACT,OAAO,EAAE,CAAC;gCAAEC,EAAE,EAAE;oCAAES,UAAU,EAAE,MAAM;iCAAE;;kDAC3D,KAACzC,MAAM;wCAAC6B,OAAO,EAAC,WAAW;wCAACa,OAAO,EAAEZ,MAAM;kDAAE,MAE7C;sCAAS;kDACT,KAAC9B,MAAM;wCAAC6B,OAAO,EAAC,UAAU;wCAACa,OAAO,EAAEtB,mBAAmB;kDAAE,QAEzD;sCAAS;;8BACH;;sBACJ;kBACF;8BACN,MAACnB,GAAG;oBACF+B,EAAE,EAAE;wBACFO,OAAO,EAAE,MAAM;wBACfI,KAAK,EAAE,MAAM;wBACbC,UAAU,EAAE,YAAY;wBACxBN,OAAO,EAAE,CAACJ,KAAK,GAAKA,KAAK,CAACH,OAAO,CAAC,CAAC,CAAC;qBACrC;;sCAED,KAACxB,aAAa;4BAACsC,iBAAiB,EAAErC,UAAU;sCAC1C,cAAA,KAACG,oBAAoB;gCAACO,uBAAuB,EAAEA,uBAAuB;8BAAI;0BAC5D;sCAChB,MAACnB,KAAK;4BAACyC,SAAS,EAAE,KAAK;4BAAET,OAAO,EAAE,CAAC;4BAAEC,EAAE,EAAE;gCAAES,UAAU,EAAE,MAAM;6BAAE;;8CAC7D,KAACzC,MAAM;oCAAC8C,SAAS,gBAAE,KAACzC,iBAAiB,KAAG;oCAAEqC,OAAO,EAAEnB,iBAAiB;8CAAE,iBAEtE;kCAAS;8CACT,KAACvB,MAAM;oCAAC8C,SAAS,gBAAE,KAACxC,YAAY,KAAG;oCAAEoC,OAAO,EAAElB,YAAY;8CAAE,WAE5D;kCAAS;8CACT,KAACZ,iBAAiB,KAAG;;0BACf;;kBACJ;;UACA,iBAER,MAACb,KAAK;YAACgC,OAAO,EAAE,CAAC;YAAEO,OAAO,EAAE,CAAC;;8BAC3B,MAACrC,GAAG;oBAAC+B,EAAE,EAAE;wBAAEO,OAAO,EAAE,MAAM;wBAAEI,KAAK,EAAE,MAAM;qBAAE;;wBACxCf,cAAc;sCACf,MAAC7B,KAAK;4BAACyC,SAAS,EAAC,KAAK;4BAACT,OAAO,EAAE,CAAC;4BAAEC,EAAE,EAAE;gCAAES,UAAU,EAAE,MAAM;6BAAE;;8CAC3D,KAAC7B,iBAAiB,KAAG;8CACrB,KAACC,cAAc,KAAG;gCACjBY,YAAY,kBACX,KAACzB,MAAM;oCACL6B,OAAO,EAAC,UAAU;oCAClBiB,SAAS,gBAAE,KAAC1C,UAAU,KAAG;oCACzBsC,OAAO,EAAEvB,iBAAiB;oCAC1Ba,EAAE,EAAE;wCAAES,UAAU,EAAE,MAAM;qCAAE;8CAC3B,MAED;kCAAS,AACV;;0BACK;;kBACJ;8BACN,KAACxC,GAAG;oBAAC8C,QAAQ,EAAE,CAAC;8BACd,cAAA,KAACxC,aAAa;wBAACsC,iBAAiB,EAAErC,UAAU;kCAC1C,cAAA,KAACG,oBAAoB;4BAACO,uBAAuB,EAAEA,uBAAuB;0BAAI;sBAC5D;kBACZ;;UACA,AACT;MACA,CACH;AACJ,CAAC,CAAC"}

package/dist/components/DownloadButton/DownloadButton.d.ts

@@ -0,0 +1,3 @@
+/// <reference types="react" />
+export declare function DownloadButton(): JSX.Element;
+//# sourceMappingURL=DownloadButton.d.ts.map

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

@@ -0,0 +1 @@
+{"version":3,"file":"DownloadButton.d.ts","sourceRoot":"","sources":["../../../src/components/DownloadButton/DownloadButton.tsx"],"names":[],"mappings":";AAmBA,wBAAgB,cAAc,gBA8B7B"}

package/dist/components/DownloadButton/DownloadButton.js

@@ -0,0 +1,60 @@
+// Copyright 2022 The Perses Authors
+// Licensed under the Apache License, Version 2.0 (the "License");
+// you may not use this file except in compliance with the License.
+// You may obtain a copy of the License at
+//
+// http://www.apache.org/licenses/LICENSE-2.0
+//
+// Unless required by applicable law or agreed to in writing, software
+// distributed under the License is distributed on an "AS IS" BASIS,
+// WITHOUT WARRANTIES OR CONDITIONS OF ANY KIND, either express or implied.
+// See the License for the specific language governing permissions and
+// limitations under the License.
+import { jsx as _jsx, jsxs as _jsxs, Fragment as _Fragment } from "react/jsx-runtime";
+import React, { useRef } from 'react';
+import DownloadIcon from 'mdi-material-ui/DownloadOutline';
+import { IconButton, styled } from '@mui/material';
+import { useDashboard } from '../../context';
+// Button to download the dashboard as a JSON file.
+export function DownloadButton() {
+    const { dashboard  } = useDashboard();
+    const hiddenLinkRef = useRef(null);
+    const onDownloadButtonClick = ()=>{
+        if (!hiddenLinkRef || !hiddenLinkRef.current) return;
+        // Create blob URL
+        const hiddenLinkUrl = URL.createObjectURL(new Blob([
+            JSON.stringify(dashboard)
+        ], {
+            type: 'application/json'
+        }));
+        // Simulate click
+        hiddenLinkRef.current.href = hiddenLinkUrl;
+        hiddenLinkRef.current.click();
+        // Remove blob URL (for memory management)
+        URL.revokeObjectURL(hiddenLinkUrl);
+    };
+    return /*#__PURE__*/ _jsxs(_Fragment, {
+        children: [
+            /*#__PURE__*/ _jsx(DownloadIconButton, {
+                title: "Download JSON",
+                onClick: onDownloadButtonClick,
+                children: /*#__PURE__*/ _jsx(DownloadIcon, {})
+            }),
+            /*#__PURE__*/ _jsx("a", {
+                ref: hiddenLinkRef,
+                style: {
+                    display: 'none'
+                },
+                download: `${dashboard.metadata.name}.json`
+            })
+        ]
+    });
+}
+const DownloadIconButton = styled(IconButton)(({ theme  })=>({
+        border: `1px solid ${theme.palette.grey[300]}`,
+        borderRadius: theme.shape.borderRadius,
+        padding: '4px',
+        color: theme.palette.grey[900]
+    }));
+
+//# sourceMappingURL=DownloadButton.js.map

package/dist/components/DownloadButton/DownloadButton.js.map

@@ -0,0 +1 @@
+{"version":3,"sources":["../../../src/components/DownloadButton/DownloadButton.tsx"],"sourcesContent":["// Copyright 2022 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 React, { useRef } from 'react';\nimport DownloadIcon from 'mdi-material-ui/DownloadOutline';\nimport { IconButton, styled } from '@mui/material';\nimport { useDashboard } from '../../context';\n\n// Button to download the dashboard as a JSON file.\nexport function DownloadButton() {\n  const { dashboard } = useDashboard();\n  const hiddenLinkRef = useRef<HTMLAnchorElement>(null);\n\n  const onDownloadButtonClick = () => {\n    if (!hiddenLinkRef || !hiddenLinkRef.current) return;\n    // Create blob URL\n    const hiddenLinkUrl = URL.createObjectURL(\n      new Blob([JSON.stringify(dashboard)], {\n        type: 'application/json',\n      })\n    );\n    // Simulate click\n    hiddenLinkRef.current.href = hiddenLinkUrl;\n    hiddenLinkRef.current.click();\n    // Remove blob URL (for memory management)\n    URL.revokeObjectURL(hiddenLinkUrl);\n  };\n\n  return (\n    <>\n      <DownloadIconButton title=\"Download JSON\" onClick={onDownloadButtonClick}>\n        <DownloadIcon />\n      </DownloadIconButton>\n      {/* Hidden link to download the dashboard as a JSON file */}\n      {/* eslint-disable jsx-a11y/anchor-has-content */}\n      {/* eslint-disable jsx-a11y/anchor-is-valid  */}\n      <a ref={hiddenLinkRef} style={{ display: 'none' }} download={`${dashboard.metadata.name}.json`} />\n    </>\n  );\n}\n\nconst DownloadIconButton = styled(IconButton)(({ theme }) => ({\n  border: `1px solid ${theme.palette.grey[300]}`,\n  borderRadius: theme.shape.borderRadius,\n  padding: '4px',\n  color: theme.palette.grey[900],\n}));\n"],"names":["React","useRef","DownloadIcon","IconButton","styled","useDashboard","DownloadButton","dashboard","hiddenLinkRef","onDownloadButtonClick","current","hiddenLinkUrl","URL","createObjectURL","Blob","JSON","stringify","type","href","click","revokeObjectURL","DownloadIconButton","title","onClick","a","ref","style","display","download","metadata","name","theme","border","palette","grey","borderRadius","shape","padding","color"],"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,OAAOA,KAAK,IAAIC,MAAM,QAAQ,OAAO,CAAC;AACtC,OAAOC,YAAY,MAAM,iCAAiC,CAAC;AAC3D,SAASC,UAAU,EAAEC,MAAM,QAAQ,eAAe,CAAC;AACnD,SAASC,YAAY,QAAQ,eAAe,CAAC;AAE7C,mDAAmD;AACnD,OAAO,SAASC,cAAc,GAAG;IAC/B,MAAM,EAAEC,SAAS,CAAA,EAAE,GAAGF,YAAY,EAAE,AAAC;IACrC,MAAMG,aAAa,GAAGP,MAAM,CAAoB,IAAI,CAAC,AAAC;IAEtD,MAAMQ,qBAAqB,GAAG,IAAM;QAClC,IAAI,CAACD,aAAa,IAAI,CAACA,aAAa,CAACE,OAAO,EAAE,OAAO;QACrD,kBAAkB;QAClB,MAAMC,aAAa,GAAGC,GAAG,CAACC,eAAe,CACvC,IAAIC,IAAI,CAAC;YAACC,IAAI,CAACC,SAAS,CAACT,SAAS,CAAC;SAAC,EAAE;YACpCU,IAAI,EAAE,kBAAkB;SACzB,CAAC,CACH,AAAC;QACF,iBAAiB;QACjBT,aAAa,CAACE,OAAO,CAACQ,IAAI,GAAGP,aAAa,CAAC;QAC3CH,aAAa,CAACE,OAAO,CAACS,KAAK,EAAE,CAAC;QAC9B,0CAA0C;QAC1CP,GAAG,CAACQ,eAAe,CAACT,aAAa,CAAC,CAAC;IACrC,CAAC,AAAC;IAEF,qBACE;;0BACE,KAACU,kBAAkB;gBAACC,KAAK,EAAC,eAAe;gBAACC,OAAO,EAAEd,qBAAqB;0BACtE,cAAA,KAACP,YAAY,KAAG;cACG;0BAIrB,KAACsB,GAAC;gBAACC,GAAG,EAAEjB,aAAa;gBAAEkB,KAAK,EAAE;oBAAEC,OAAO,EAAE,MAAM;iBAAE;gBAAEC,QAAQ,EAAE,CAAC,EAAErB,SAAS,CAACsB,QAAQ,CAACC,IAAI,CAAC,KAAK,CAAC;cAAI;;MACjG,CACH;AACJ,CAAC;AAED,MAAMT,kBAAkB,GAAGjB,MAAM,CAACD,UAAU,CAAC,CAAC,CAAC,EAAE4B,KAAK,CAAA,EAAE,GAAM,CAAA;QAC5DC,MAAM,EAAE,CAAC,UAAU,EAAED,KAAK,CAACE,OAAO,CAACC,IAAI,CAAC,GAAG,CAAC,CAAC,CAAC;QAC9CC,YAAY,EAAEJ,KAAK,CAACK,KAAK,CAACD,YAAY;QACtCE,OAAO,EAAE,KAAK;QACdC,KAAK,EAAEP,KAAK,CAACE,OAAO,CAACC,IAAI,CAAC,GAAG,CAAC;KAC/B,CAAA,AAAC,CAAC,AAAC"}

package/dist/components/DownloadButton/index.d.ts

@@ -0,0 +1,2 @@
+export * from './DownloadButton';
+//# sourceMappingURL=index.d.ts.map

package/dist/components/DownloadButton/index.d.ts.map

@@ -0,0 +1 @@
+{"version":3,"file":"index.d.ts","sourceRoot":"","sources":["../../../src/components/DownloadButton/index.ts"],"names":[],"mappings":"AAaA,cAAc,kBAAkB,CAAC"}

package/dist/{utils → components/DownloadButton}/index.js

@@ -10,6 +10,6 @@
 // WITHOUT WARRANTIES OR CONDITIONS OF ANY KIND, either express or implied.
 // See the License for the specific language governing permissions and
 // limitations under the License.
-export * from './time-range-params';
+export * from './DownloadButton';
 
 //# sourceMappingURL=index.js.map

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

@@ -0,0 +1 @@
+{"version":3,"sources":["../../../src/components/DownloadButton/index.ts"],"sourcesContent":["// Copyright 2022 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 './DownloadButton';\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"}

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

@@ -0,0 +1,6 @@
+/// <reference types="react" />
+export interface GridContainerProps {
+    children: React.ReactNode;
+}
+export declare function GridContainer(props: GridContainerProps): JSX.Element;
+//# sourceMappingURL=GridContainer.d.ts.map

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

@@ -0,0 +1 @@
+{"version":3,"file":"GridContainer.d.ts","sourceRoot":"","sources":["../../../src/components/GridLayout/GridContainer.tsx"],"names":[],"mappings":";AAgBA,MAAM,WAAW,kBAAkB;IACjC,QAAQ,EAAE,KAAK,CAAC,SAAS,CAAC;CAC3B;AAED,wBAAgB,aAAa,CAAC,KAAK,EAAE,kBAAkB,eAqBtD"}

package/dist/{css/styles.js → components/GridLayout/GridContainer.js}

@@ -10,36 +10,64 @@
 // WITHOUT WARRANTIES OR CONDITIONS OF ANY KIND, either express or implied.
 // See the License for the specific language governing permissions and
 // limitations under the License.
-export const styles = (theme)=>{
-    return {
-        '&.react-grid-layout': {
+import { jsx as _jsx } from "react/jsx-runtime";
+import { useEffect, useState } from 'react';
+import { styled } from '@mui/material';
+export function GridContainer(props) {
+    const [isFirstRender, setIsFirstRender] = useState(true);
+    useEffect(()=>{
+        if (isFirstRender) {
+            setIsFirstRender(false);
+        }
+    }, [
+        isFirstRender
+    ]);
+    return /*#__PURE__*/ _jsx(ReactGridLayoutContainer, {
+        sx: {
+            // This adds spcing between grids (rows) in the overall dashboard
+            '& + &': {
+                marginTop: (theme)=>theme.spacing(1)
+            },
+            // This disables the animation of grid items when a grid is first rendered
+            // (see https://github.com/react-grid-layout/react-grid-layout/issues/103)
+            '& .react-grid-item.cssTransforms': {
+                transitionProperty: isFirstRender ? 'none' : 'transform'
+            }
+        },
+        children: props.children
+    });
+}
+/**
+ * These are the classes needed by react-grid-layout from their CSS stylesheet.
+ */ const ReactGridLayoutContainer = styled('section')(({ theme  })=>({
+        '& .react-grid-layout': {
             position: 'relative',
             transition: 'height 200ms ease'
         },
-        '&.react-grid-item': {
+        '& .react-grid-item': {
             transition: 'all 200ms ease',
             transitionProperty: 'left, top'
         },
-        '&.react-grid-item img': {
+        '& .react-grid-item img': {
             pointerEvents: 'none',
             userSelect: 'none'
         },
-        '&.react-grid-item.cssTransforms': {
+        '& .react-grid-item.cssTransforms': {
             transitionProperty: 'transform'
         },
-        '&.react-grid-item.resizing': {
+        '& .react-grid-item.resizing': {
             zIndex: 1,
             willChange: 'width, height'
         },
-        '&.react-grid-item.react-draggable-dragging': {
+        '& .react-grid-item.react-draggable-dragging': {
             transition: 'none',
             zIndex: 3,
             willChange: 'transform'
         },
-        '&.react-grid-item.dropping': {
+        '& .react-grid-item.dropping': {
             visibility: 'hidden'
         },
-        '&.react-grid-item.react-grid-placeholder': {
+        '& .react-grid-item.react-grid-placeholder': {
             background: theme.palette.primary.main,
             opacity: 0.2,
             transitionDuration: '100ms',
@@ -50,12 +78,12 @@ export const styles = (theme)=>{
             msUserSelect: 'none',
             OUserSelect: 'none'
         },
-        '&.react-grid-item > .react-resizable-handle': {
+        '& .react-grid-item > .react-resizable-handle': {
             position: 'absolute',
             width: '20px',
             height: '20px'
         },
-        '&.react-grid-item > .react-resizable-handle::after': {
+        '& .react-grid-item > .react-resizable-handle::after': {
             content: '""',
             position: 'absolute',
             right: '3px',
@@ -65,62 +93,62 @@ export const styles = (theme)=>{
             borderRight: '2px solid rgba(0, 0, 0, 0.4)',
             borderBottom: '2px solid rgba(0, 0, 0, 0.4)'
         },
-        '&.react-resizable-hide > .react-resizable-handle': {
+        '& .react-resizable-hide > .react-resizable-handle': {
             display: 'none'
         },
-        '&.react-grid-item > .react-resizable-handle.react-resizable-handle-sw': {
+        '& .react-grid-item > .react-resizable-handle.react-resizable-handle-sw': {
             bottom: '0',
             left: '0',
             cursor: 'sw-resize',
             transform: 'rotate(90deg)'
         },
-        '&.react-grid-item > .react-resizable-handle.react-resizable-handle-se': {
+        '& .react-grid-item > .react-resizable-handle.react-resizable-handle-se': {
             bottom: '0',
             right: '0',
             cursor: 'se-resize'
         },
-        '&.react-grid-item > .react-resizable-handle.react-resizable-handle-nw': {
+        '& .react-grid-item > .react-resizable-handle.react-resizable-handle-nw': {
             top: '0',
             left: '0',
             cursor: 'nw-resize',
             transform: 'rotate(180deg)'
         },
-        '&.react-grid-item > .react-resizable-handle.react-resizable-handle-ne': {
+        '& .react-grid-item > .react-resizable-handle.react-resizable-handle-ne': {
             top: '0',
             right: '0',
             cursor: 'ne-resize',
             transform: 'rotate(270deg)'
         },
-        '&.react-grid-item > .react-resizable-handle.react-resizable-handle-w, &.react-grid-item > .react-resizable-handle.react-resizable-handle-e': {
+        '& .react-grid-item > .react-resizable-handle.react-resizable-handle-w, &.react-grid-item > .react-resizable-handle.react-resizable-handle-e': {
             top: '50%',
             marginTop: '-10px',
             cursor: 'ew-resize'
         },
-        '&.react-grid-item > .react-resizable-handle.react-resizable-handle-w': {
+        '& .react-grid-item > .react-resizable-handle.react-resizable-handle-w': {
             left: '0',
             transform: 'rotate(135deg)'
         },
-        '&.react-grid-item > .react-resizable-handle.react-resizable-handle-e': {
+        '& .react-grid-item > .react-resizable-handle.react-resizable-handle-e': {
             right: '0',
             transform: 'rotate(315deg)'
         },
-        '&.react-grid-item > .react-resizable-handle.react-resizable-handle-n, &.react-grid-item > .react-resizable-handle.react-resizable-handle-s': {
+        '& .react-grid-item > .react-resizable-handle.react-resizable-handle-n, &.react-grid-item > .react-resizable-handle.react-resizable-handle-s': {
             left: '50%',
             marginLeft: '-10px',
             cursor: 'ns-resize'
         },
-        '&.react-grid-item > .react-resizable-handle.react-resizable-handle-n': {
+        '& .react-grid-item > .react-resizable-handle.react-resizable-handle-n': {
             top: '0',
             transform: 'rotate(225deg)'
         },
-        '&.react-grid-item > .react-resizable-handle.react-resizable-handle-s': {
+        '& .react-grid-item > .react-resizable-handle.react-resizable-handle-s': {
             bottom: '0',
             transform: 'rotate(45deg)'
         },
-        '&.react-resizable': {
+        '& .react-resizable': {
             position: 'relative'
         },
-        '&.react-resizable-handle': {
+        '& .react-resizable-handle': {
             position: 'absolute',
             width: '20px',
             height: '20px',
@@ -131,56 +159,55 @@ export const styles = (theme)=>{
             backgroundPosition: 'bottom right',
             padding: '0 3px 3px 0'
         },
-        '&.react-resizable-handle-sw': {
+        '& .react-resizable-handle-sw': {
             bottom: '0',
             left: '0',
             cursor: 'sw-resize',
             transform: 'rotate(90deg)'
         },
-        '&.react-resizable-handle-se': {
+        '& .react-resizable-handle-se': {
             bottom: '0',
             right: '0',
             cursor: 'se-resize'
         },
-        '&.react-resizable-handle-nw': {
+        '& .react-resizable-handle-nw': {
             top: '0',
             left: '0',
             cursor: 'nw-resize',
             transform: 'rotate(180deg)'
         },
-        '&.react-resizable-handle-ne': {
+        '& .react-resizable-handle-ne': {
             top: '0',
             right: '0',
             cursor: 'ne-resize',
             transform: 'rotate(270deg)'
         },
-        '&.react-resizable-handle-w, .react-resizable-handle-e': {
+        '& .react-resizable-handle-w, .react-resizable-handle-e': {
             top: '50%',
             marginTop: '-10px',
             cursor: 'ew-resize'
         },
-        '&.react-resizable-handle-w': {
+        '& .react-resizable-handle-w': {
             left: '0',
             transform: 'rotate(135deg)'
         },
-        '&.react-resizable-handle-e': {
+        '& .react-resizable-handle-e': {
             right: '0',
             transform: 'rotate(315deg)'
         },
-        '&.react-resizable-handle-n, .react-resizable-handle-s': {
+        '& .react-resizable-handle-n, .react-resizable-handle-s': {
             left: '50%',
             marginLeft: '-10px',
             cursor: 'ns-resize'
         },
-        '&.react-resizable-handle-n': {
+        '& .react-resizable-handle-n': {
             top: '0',
             transform: 'rotate(225deg)'
         },
-        '&.react-resizable-handle-s': {
+        '& .react-resizable-handle-s': {
             bottom: '0',
             transform: 'rotate(45deg)'
         }
-    };
-};
+    }));
 
-//# sourceMappingURL=styles.js.map
+//# sourceMappingURL=GridContainer.js.map

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

@@ -0,0 +1 @@
+{"version":3,"sources":["../../../src/components/GridLayout/GridContainer.tsx"],"sourcesContent":["// Copyright 2022 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 { styled } from '@mui/material';\n\nexport interface GridContainerProps {\n  children: React.ReactNode;\n}\n\nexport function GridContainer(props: GridContainerProps) {\n  const [isFirstRender, setIsFirstRender] = useState(true);\n  useEffect(() => {\n    if (isFirstRender) {\n      setIsFirstRender(false);\n    }\n  }, [isFirstRender]);\n\n  return (\n    <ReactGridLayoutContainer\n      sx={{\n        // This adds spcing between grids (rows) in the overall dashboard\n        '& + &': { marginTop: (theme) => theme.spacing(1) },\n        // This disables the animation of grid items when a grid is first rendered\n        // (see https://github.com/react-grid-layout/react-grid-layout/issues/103)\n        '& .react-grid-item.cssTransforms': { transitionProperty: isFirstRender ? 'none' : 'transform' },\n      }}\n    >\n      {props.children}\n    </ReactGridLayoutContainer>\n  );\n}\n\n/**\n * These are the classes needed by react-grid-layout from their CSS stylesheet.\n */\nconst ReactGridLayoutContainer = styled('section')(({ theme }) => ({\n  '& .react-grid-layout': {\n    position: 'relative',\n    transition: 'height 200ms ease',\n  },\n  '& .react-grid-item': {\n    transition: 'all 200ms ease',\n    transitionProperty: 'left, top',\n  },\n  '& .react-grid-item img': {\n    pointerEvents: 'none',\n    userSelect: 'none',\n  },\n  '& .react-grid-item.cssTransforms': {\n    transitionProperty: 'transform',\n  },\n  '& .react-grid-item.resizing': {\n    zIndex: 1,\n    willChange: 'width, height',\n  },\n  '& .react-grid-item.react-draggable-dragging': {\n    transition: 'none',\n    zIndex: 3,\n    willChange: 'transform',\n  },\n  '& .react-grid-item.dropping': {\n    visibility: 'hidden',\n  },\n  '& .react-grid-item.react-grid-placeholder': {\n    background: theme.palette.primary.main,\n    opacity: 0.2,\n    transitionDuration: '100ms',\n    zIndex: 2,\n    userSelect: 'none',\n    WebkitUserSelect: 'none',\n    MozUserSelect: 'none',\n    msUserSelect: 'none',\n    OUserSelect: 'none',\n  },\n\n  '& .react-grid-item > .react-resizable-handle': {\n    position: 'absolute',\n    width: '20px',\n    height: '20px',\n  },\n  '& .react-grid-item > .react-resizable-handle::after': {\n    content: '\"\"',\n    position: 'absolute',\n    right: '3px',\n    bottom: '3px',\n    width: '5px',\n    height: '5px',\n    borderRight: '2px solid rgba(0, 0, 0, 0.4)',\n    borderBottom: '2px solid rgba(0, 0, 0, 0.4)',\n  },\n\n  '& .react-resizable-hide > .react-resizable-handle': {\n    display: 'none',\n  },\n\n  '& .react-grid-item > .react-resizable-handle.react-resizable-handle-sw': {\n    bottom: '0',\n    left: '0',\n    cursor: 'sw-resize',\n    transform: 'rotate(90deg)',\n  },\n  '& .react-grid-item > .react-resizable-handle.react-resizable-handle-se': {\n    bottom: '0',\n    right: '0',\n    cursor: 'se-resize',\n  },\n  '& .react-grid-item > .react-resizable-handle.react-resizable-handle-nw': {\n    top: '0',\n    left: '0',\n    cursor: 'nw-resize',\n    transform: 'rotate(180deg)',\n  },\n  '& .react-grid-item > .react-resizable-handle.react-resizable-handle-ne': {\n    top: '0',\n    right: '0',\n    cursor: 'ne-resize',\n    transform: 'rotate(270deg)',\n  },\n  '& .react-grid-item > .react-resizable-handle.react-resizable-handle-w, &.react-grid-item > .react-resizable-handle.react-resizable-handle-e':\n    {\n      top: '50%',\n      marginTop: '-10px',\n      cursor: 'ew-resize',\n    },\n  '& .react-grid-item > .react-resizable-handle.react-resizable-handle-w': {\n    left: '0',\n    transform: 'rotate(135deg)',\n  },\n  '& .react-grid-item > .react-resizable-handle.react-resizable-handle-e': {\n    right: '0',\n    transform: 'rotate(315deg)',\n  },\n  '& .react-grid-item > .react-resizable-handle.react-resizable-handle-n, &.react-grid-item > .react-resizable-handle.react-resizable-handle-s':\n    {\n      left: '50%',\n      marginLeft: '-10px',\n      cursor: 'ns-resize',\n    },\n  '& .react-grid-item > .react-resizable-handle.react-resizable-handle-n': {\n    top: '0',\n    transform: 'rotate(225deg)',\n  },\n  '& .react-grid-item > .react-resizable-handle.react-resizable-handle-s': {\n    bottom: '0',\n    transform: 'rotate(45deg)',\n  },\n  '& .react-resizable': {\n    position: 'relative',\n  },\n  '& .react-resizable-handle': {\n    position: 'absolute',\n    width: '20px',\n    height: '20px',\n    backgroundRepeat: 'no-repeat',\n    backgroundOrigin: 'content-box',\n    boxSizing: 'border-box',\n    backgroundImage: `url('data:image/svg+xml;base64,PHN2ZyB4bWxucz0iaHR0cDovL3d3dy53My5vcmcvMjAwMC9zdmciIHZpZXdCb3g9IjAgMCA2IDYiIHN0eWxlPSJiYWNrZ3JvdW5kLWNvbG9yOiNmZmZmZmYwMCIgeD0iMHB4IiB5PSIwcHgiIHdpZHRoPSI2cHgiIGhlaWdodD0iNnB4Ij48ZyBvcGFjaXR5PSIwLjMwMiI+PHBhdGggZD0iTSA2IDYgTCAwIDYgTCAwIDQuMiBMIDQgNC4yIEwgNC4yIDQuMiBMIDQuMiAwIEwgNiAwIEwgNiA2IEwgNiA2IFoiIGZpbGw9IiMwMDAwMDAiLz48L2c+PC9zdmc+')`,\n    backgroundPosition: 'bottom right',\n    padding: '0 3px 3px 0',\n  },\n  '& .react-resizable-handle-sw': {\n    bottom: '0',\n    left: '0',\n    cursor: 'sw-resize',\n    transform: 'rotate(90deg)',\n  },\n  '& .react-resizable-handle-se': {\n    bottom: '0',\n    right: '0',\n    cursor: 'se-resize',\n  },\n  '& .react-resizable-handle-nw': {\n    top: '0',\n    left: '0',\n    cursor: 'nw-resize',\n    transform: 'rotate(180deg)',\n  },\n  '& .react-resizable-handle-ne': {\n    top: '0',\n    right: '0',\n    cursor: 'ne-resize',\n    transform: 'rotate(270deg)',\n  },\n  '& .react-resizable-handle-w, .react-resizable-handle-e': {\n    top: '50%',\n    marginTop: '-10px',\n    cursor: 'ew-resize',\n  },\n  '& .react-resizable-handle-w': {\n    left: '0',\n    transform: 'rotate(135deg)',\n  },\n  '& .react-resizable-handle-e': {\n    right: '0',\n    transform: 'rotate(315deg)',\n  },\n  '& .react-resizable-handle-n, .react-resizable-handle-s': {\n    left: '50%',\n    marginLeft: '-10px',\n    cursor: 'ns-resize',\n  },\n  '& .react-resizable-handle-n': {\n    top: '0',\n    transform: 'rotate(225deg)',\n  },\n  '& .react-resizable-handle-s': {\n    bottom: '0',\n    transform: 'rotate(45deg)',\n  },\n}));\n"],"names":["useEffect","useState","styled","GridContainer","props","isFirstRender","setIsFirstRender","ReactGridLayoutContainer","sx","marginTop","theme","spacing","transitionProperty","children","position","transition","pointerEvents","userSelect","zIndex","willChange","visibility","background","palette","primary","main","opacity","transitionDuration","WebkitUserSelect","MozUserSelect","msUserSelect","OUserSelect","width","height","content","right","bottom","borderRight","borderBottom","display","left","cursor","transform","top","marginLeft","backgroundRepeat","backgroundOrigin","boxSizing","backgroundImage","backgroundPosition","padding"],"mappings":"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"}

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

@@ -1,7 +1,6 @@
 /// <reference types="react" />
-import { BoxProps } from '@mui/material';
 import { PanelGroupId } from '../../context';
-export interface GridLayoutProps extends BoxProps {
+export interface GridLayoutProps {
     panelGroupId: PanelGroupId;
 }
 /**