@perses-dev/dashboards 0.17.0 → 0.18.0

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

@@ -17,6 +17,7 @@ Object.defineProperty(exports, "__esModule", {
 const _jsxRuntime = require("react/jsx-runtime");
 const _react = require("@testing-library/react");
 const _userEvent = /*#__PURE__*/ _interopRequireDefault(require("@testing-library/user-event"));
+const _pluginSystem = require("@perses-dev/plugin-system");
 const _context = require("../../../context");
 const _test = require("../../../test");
 const _dashboardApp = require("../DashboardApp");
@@ -27,7 +28,7 @@ function _interopRequireDefault(obj) {
 }
 describe('Panel Groups', ()=>{
     const renderDashboard = ()=>{
-        (0, _test.renderWithContext)(/*#__PURE__*/ (0, _jsxRuntime.jsx)(_context.TimeRangeProvider, {
+        (0, _test.renderWithContext)(/*#__PURE__*/ (0, _jsxRuntime.jsx)(_pluginSystem.TimeRangeProvider, {
             initialTimeRange: {
                 pastDuration: '30m'
             },
@@ -38,7 +39,8 @@ describe('Panel Groups', ()=>{
                         isEditMode: true
                     },
                     children: /*#__PURE__*/ (0, _jsxRuntime.jsx)(_dashboardApp.DashboardApp, {
-                        dashboardResource: (0, _test.getTestDashboard)()
+                        dashboardResource: (0, _test.getTestDashboard)(),
+                        isReadonly: false
                     })
                 })
             })

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

@@ -3,6 +3,7 @@ export interface DashboardToolbarProps {
     dashboardName: string;
     dashboardTitleComponent?: JSX.Element;
     initialVariableIsSticky?: boolean;
+    isReadonly: 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":";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"}
+{"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,UAAU,EAAE,OAAO,CAAC;IACpB,iBAAiB,EAAE,MAAM,IAAI,CAAC;IAC9B,mBAAmB,EAAE,MAAM,IAAI,CAAC;CACjC;AAED,eAAO,MAAM,gBAAgB,UAAW,qBAAqB,gBA0G5D,CAAC"}

package/dist/components/DashboardToolbar/DashboardToolbar.js

@@ -11,7 +11,7 @@
 // See the License for the specific language governing permissions and
 // limitations under the License.
 import { jsx as _jsx, jsxs as _jsxs, Fragment as _Fragment } from "react/jsx-runtime";
-import { Typography, Stack, Button, Box, useTheme, useMediaQuery } from '@mui/material';
+import { Typography, Stack, Button, Box, useTheme, useMediaQuery, Alert } from '@mui/material';
 import PencilIcon from 'mdi-material-ui/PencilOutline';
 import AddPanelGroupIcon from 'mdi-material-ui/PlusBoxOutline';
 import AddPanelIcon from 'mdi-material-ui/ChartBoxPlusOutline';
@@ -21,7 +21,7 @@ import { TemplateVariableList } from '../Variables';
 import { TimeRangeControls } from '../TimeRangeControls';
 import { DownloadButton } from '../DownloadButton';
 export const DashboardToolbar = (props)=>{
-    const { dashboardName , dashboardTitleComponent , initialVariableIsSticky , onEditButtonClick , onCancelButtonClick  } = props;
+    const { dashboardName , dashboardTitleComponent , initialVariableIsSticky , isReadonly , onEditButtonClick , onCancelButtonClick ,  } = props;
     const { isEditMode , setEditMode  } = useEditMode();
     const { openAddPanelGroup , openAddPanel  } = useDashboardActions();
     const isLaptopSize = useMediaQuery(useTheme().breakpoints.up('sm'));
@@ -34,55 +34,68 @@ export const DashboardToolbar = (props)=>{
     };
     return /*#__PURE__*/ _jsx(_Fragment, {
         children: isEditMode ? /*#__PURE__*/ _jsxs(Stack, {
-            spacing: 2,
+            spacing: 1,
             children: [
-                /*#__PURE__*/ _jsx(Box, {
+                /*#__PURE__*/ _jsxs(Box, {
+                    p: 2,
+                    display: "flex",
                     sx: {
-                        backgroundColor: (theme)=>theme.palette.primary.light + '20'
+                        backgroundColor: (theme)=>theme.palette.primary.main + '30'
                     },
-                    children: /*#__PURE__*/ _jsxs(Box, {
-                        padding: 2,
-                        display: "flex",
-                        children: [
-                            dashboardTitle,
-                            /*#__PURE__*/ _jsxs(Stack, {
-                                direction: "row",
-                                spacing: 1,
-                                marginLeft: "auto",
-                                children: [
-                                    /*#__PURE__*/ _jsx(Button, {
-                                        variant: "contained",
-                                        onClick: onSave,
-                                        children: "Save"
-                                    }),
-                                    /*#__PURE__*/ _jsx(Button, {
-                                        variant: "outlined",
-                                        onClick: onCancelButtonClick,
-                                        children: "Cancel"
-                                    })
-                                ]
-                            })
-                        ]
-                    })
+                    children: [
+                        dashboardTitle,
+                        /*#__PURE__*/ _jsxs(Stack, {
+                            direction: "row",
+                            spacing: 1,
+                            marginLeft: "auto",
+                            children: [
+                                isReadonly && /*#__PURE__*/ _jsx(Alert, {
+                                    severity: 'warning',
+                                    sx: {
+                                        backgroundColor: 'transparent',
+                                        padding: 0
+                                    },
+                                    children: "Dashboard managed via code only. Download JSON and commit changes to save."
+                                }),
+                                /*#__PURE__*/ _jsx(Button, {
+                                    variant: "contained",
+                                    onClick: onSave,
+                                    disabled: isReadonly,
+                                    children: "Save"
+                                }),
+                                /*#__PURE__*/ _jsx(Button, {
+                                    variant: "outlined",
+                                    onClick: onCancelButtonClick,
+                                    children: "Cancel"
+                                })
+                            ]
+                        })
+                    ]
                 }),
                 /*#__PURE__*/ _jsxs(Box, {
                     sx: {
                         display: 'flex',
                         width: '100%',
                         alignItems: 'flex-start',
-                        padding: (theme)=>theme.spacing(2)
+                        padding: (theme)=>theme.spacing(0, 2, 2, 2)
                     },
                     children: [
                         /*#__PURE__*/ _jsx(ErrorBoundary, {
                             FallbackComponent: ErrorAlert,
                             children: /*#__PURE__*/ _jsx(TemplateVariableList, {
-                                initialVariableIsSticky: initialVariableIsSticky
+                                initialVariableIsSticky: initialVariableIsSticky,
+                                sx: {
+                                    backgroundColor: ({ palette  })=>palette.mode === 'dark' ? palette.background.default : palette.background.paper
+                                }
                             })
                         }),
                         /*#__PURE__*/ _jsxs(Stack, {
                             direction: "row",
                             spacing: 1,
                             marginLeft: "auto",
+                            sx: {
+                                whiteSpace: 'nowrap'
+                            },
                             children: [
                                 /*#__PURE__*/ _jsx(Button, {
                                     startIcon: /*#__PURE__*/ _jsx(AddPanelGroupIcon, {}),
@@ -94,7 +107,8 @@ export const DashboardToolbar = (props)=>{
                                     onClick: openAddPanel,
                                     children: "Add Panel"
                                 }),
-                                /*#__PURE__*/ _jsx(TimeRangeControls, {})
+                                /*#__PURE__*/ _jsx(TimeRangeControls, {}),
+                                /*#__PURE__*/ _jsx(DownloadButton, {})
                             ]
                         })
                     ]
@@ -136,7 +150,10 @@ export const DashboardToolbar = (props)=>{
                     children: /*#__PURE__*/ _jsx(ErrorBoundary, {
                         FallbackComponent: ErrorAlert,
                         children: /*#__PURE__*/ _jsx(TemplateVariableList, {
-                            initialVariableIsSticky: initialVariableIsSticky
+                            initialVariableIsSticky: initialVariableIsSticky,
+                            sx: {
+                                backgroundColor: ({ palette  })=>palette.mode === 'dark' ? palette.background.default : palette.background.paper
+                            }
                         })
                     })
                 })

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';\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} 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} 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={1} padding={2}>\n          <Box sx={{ display: 'flex', width: '100%' }}>\n            {dashboardTitle}\n            <Stack direction=\"row\" spacing={1} 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":"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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, Alert } 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  isReadonly: boolean;\n  onEditButtonClick: () => void;\n  onCancelButtonClick: () => void;\n}\n\nexport const DashboardToolbar = (props: DashboardToolbarProps) => {\n  const {\n    dashboardName,\n    dashboardTitleComponent,\n    initialVariableIsSticky,\n    isReadonly,\n    onEditButtonClick,\n    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={1}>\n          <Box p={2} display=\"flex\" sx={{ backgroundColor: (theme) => theme.palette.primary.main + '30' }}>\n            {dashboardTitle}\n            <Stack direction=\"row\" spacing={1} marginLeft=\"auto\">\n              {isReadonly && (\n                <Alert severity={'warning'} sx={{ backgroundColor: 'transparent', padding: 0 }}>\n                  Dashboard managed via code only. Download JSON and commit changes to save.\n                </Alert>\n              )}\n              <Button variant=\"contained\" onClick={onSave} disabled={isReadonly}>\n                Save\n              </Button>\n              <Button variant=\"outlined\" onClick={onCancelButtonClick}>\n                Cancel\n              </Button>\n            </Stack>\n          </Box>\n          <Box\n            sx={{\n              display: 'flex',\n              width: '100%',\n              alignItems: 'flex-start',\n              padding: (theme) => theme.spacing(0, 2, 2, 2),\n            }}\n          >\n            <ErrorBoundary FallbackComponent={ErrorAlert}>\n              <TemplateVariableList\n                initialVariableIsSticky={initialVariableIsSticky}\n                sx={{\n                  backgroundColor: ({ palette }) =>\n                    palette.mode === 'dark' ? palette.background.default : palette.background.paper,\n                }}\n              />\n            </ErrorBoundary>\n            <Stack direction=\"row\" spacing={1} marginLeft=\"auto\" sx={{ whiteSpace: 'nowrap' }}>\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              <DownloadButton />\n            </Stack>\n          </Box>\n        </Stack>\n      ) : (\n        <Stack spacing={1} padding={2}>\n          <Box sx={{ display: 'flex', width: '100%' }}>\n            {dashboardTitle}\n            <Stack direction=\"row\" spacing={1} 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\n                initialVariableIsSticky={initialVariableIsSticky}\n                sx={{\n                  backgroundColor: ({ palette }) =>\n                    palette.mode === 'dark' ? palette.background.default : palette.background.paper,\n                }}\n              />\n            </ErrorBoundary>\n          </Box>\n        </Stack>\n      )}\n    </>\n  );\n};\n"],"names":["Typography","Stack","Button","Box","useTheme","useMediaQuery","Alert","PencilIcon","AddPanelGroupIcon","AddPanelIcon","ErrorBoundary","ErrorAlert","useDashboardActions","useEditMode","TemplateVariableList","TimeRangeControls","DownloadButton","DashboardToolbar","props","dashboardName","dashboardTitleComponent","initialVariableIsSticky","isReadonly","onEditButtonClick","onCancelButtonClick","isEditMode","setEditMode","openAddPanelGroup","openAddPanel","isLaptopSize","breakpoints","up","dashboardTitle","variant","onSave","spacing","p","display","sx","backgroundColor","theme","palette","primary","main","direction","marginLeft","severity","padding","onClick","disabled","width","alignItems","FallbackComponent","mode","background","default","paper","whiteSpace","startIcon","paddingY"],"mappings":"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"}

package/dist/components/GridLayout/GridContainer.js

@@ -90,8 +90,8 @@ export function GridContainer(props) {
             bottom: '3px',
             width: '5px',
             height: '5px',
-            borderRight: '2px solid rgba(0, 0, 0, 0.4)',
-            borderBottom: '2px solid rgba(0, 0, 0, 0.4)'
+            borderRight: `2px solid ${theme.palette.text.secondary}`,
+            borderBottom: `2px solid ${theme.palette.text.secondary}`
         },
         '& .react-resizable-hide > .react-resizable-handle': {
             display: 'none'

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

@@ -1 +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":"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,SAAS,EAAEC,QAAQ,QAAQ,OAAO,CAAC;AAC5C,SAASC,MAAM,QAAQ,eAAe,CAAC;AAMvC,OAAO,SAASC,aAAa,CAACC,KAAyB,EAAE;IACvD,MAAM,CAACC,aAAa,EAAEC,gBAAgB,CAAC,GAAGL,QAAQ,CAAC,IAAI,CAAC,AAAC;IACzDD,SAAS,CAAC,IAAM;QACd,IAAIK,aAAa,EAAE;YACjBC,gBAAgB,CAAC,KAAK,CAAC,CAAC;QAC1B,CAAC;IACH,CAAC,EAAE;QAACD,aAAa;KAAC,CAAC,CAAC;IAEpB,qBACE,KAACE,wBAAwB;QACvBC,EAAE,EAAE;YACF,iEAAiE;YACjE,OAAO,EAAE;gBAAEC,SAAS,EAAE,CAACC,KAAK,GAAKA,KAAK,CAACC,OAAO,CAAC,CAAC,CAAC;aAAE;YACnD,0EAA0E;YAC1E,0EAA0E;YAC1E,kCAAkC,EAAE;gBAAEC,kBAAkB,EAAEP,aAAa,GAAG,MAAM,GAAG,WAAW;aAAE;SACjG;kBAEAD,KAAK,CAACS,QAAQ;MACU,CAC3B;AACJ,CAAC;AAED;;CAEC,GACD,MAAMN,wBAAwB,GAAGL,MAAM,CAAC,SAAS,CAAC,CAAC,CAAC,EAAEQ,KAAK,CAAA,EAAE,GAAM,CAAA;QACjE,sBAAsB,EAAE;YACtBI,QAAQ,EAAE,UAAU;YACpBC,UAAU,EAAE,mBAAmB;SAChC;QACD,oBAAoB,EAAE;YACpBA,UAAU,EAAE,gBAAgB;YAC5BH,kBAAkB,EAAE,WAAW;SAChC;QACD,wBAAwB,EAAE;YACxBI,aAAa,EAAE,MAAM;YACrBC,UAAU,EAAE,MAAM;SACnB;QACD,kCAAkC,EAAE;YAClCL,kBAAkB,EAAE,WAAW;SAChC;QACD,6BAA6B,EAAE;YAC7BM,MAAM,EAAE,CAAC;YACTC,UAAU,EAAE,eAAe;SAC5B;QACD,6CAA6C,EAAE;YAC7CJ,UAAU,EAAE,MAAM;YAClBG,MAAM,EAAE,CAAC;YACTC,UAAU,EAAE,WAAW;SACxB;QACD,6BAA6B,EAAE;YAC7BC,UAAU,EAAE,QAAQ;SACrB;QACD,2CAA2C,EAAE;YAC3CC,UAAU,EAAEX,KAAK,CAACY,OAAO,CAACC,OAAO,CAACC,IAAI;YACtCC,OAAO,EAAE,GAAG;YACZC,kBAAkB,EAAE,OAAO;YAC3BR,MAAM,EAAE,CAAC;YACTD,UAAU,EAAE,MAAM;YAClBU,gBAAgB,EAAE,MAAM;YACxBC,aAAa,EAAE,MAAM;YACrBC,YAAY,EAAE,MAAM;YACpBC,WAAW,EAAE,MAAM;SACpB;QAED,8CAA8C,EAAE;YAC9ChB,QAAQ,EAAE,UAAU;YACpBiB,KAAK,EAAE,MAAM;YACbC,MAAM,EAAE,MAAM;SACf;QACD,qDAAqD,EAAE;YACrDC,OAAO,EAAE,IAAI;YACbnB,QAAQ,EAAE,UAAU;YACpBoB,KAAK,EAAE,KAAK;YACZC,MAAM,EAAE,KAAK;YACbJ,KAAK,EAAE,KAAK;YACZC,MAAM,EAAE,KAAK;YACbI,WAAW,EAAE,8BAA8B;YAC3CC,YAAY,EAAE,8BAA8B;SAC7C;QAED,mDAAmD,EAAE;YACnDC,OAAO,EAAE,MAAM;SAChB;QAED,wEAAwE,EAAE;YACxEH,MAAM,EAAE,GAAG;YACXI,IAAI,EAAE,GAAG;YACTC,MAAM,EAAE,WAAW;YACnBC,SAAS,EAAE,eAAe;SAC3B;QACD,wEAAwE,EAAE;YACxEN,MAAM,EAAE,GAAG;YACXD,KAAK,EAAE,GAAG;YACVM,MAAM,EAAE,WAAW;SACpB;QACD,wEAAwE,EAAE;YACxEE,GAAG,EAAE,GAAG;YACRH,IAAI,EAAE,GAAG;YACTC,MAAM,EAAE,WAAW;YACnBC,SAAS,EAAE,gBAAgB;SAC5B;QACD,wEAAwE,EAAE;YACxEC,GAAG,EAAE,GAAG;YACRR,KAAK,EAAE,GAAG;YACVM,MAAM,EAAE,WAAW;YACnBC,SAAS,EAAE,gBAAgB;SAC5B;QACD,6IAA6I,EAC3I;YACEC,GAAG,EAAE,KAAK;YACVjC,SAAS,EAAE,OAAO;YAClB+B,MAAM,EAAE,WAAW;SACpB;QACH,uEAAuE,EAAE;YACvED,IAAI,EAAE,GAAG;YACTE,SAAS,EAAE,gBAAgB;SAC5B;QACD,uEAAuE,EAAE;YACvEP,KAAK,EAAE,GAAG;YACVO,SAAS,EAAE,gBAAgB;SAC5B;QACD,6IAA6I,EAC3I;YACEF,IAAI,EAAE,KAAK;YACXI,UAAU,EAAE,OAAO;YACnBH,MAAM,EAAE,WAAW;SACpB;QACH,uEAAuE,EAAE;YACvEE,GAAG,EAAE,GAAG;YACRD,SAAS,EAAE,gBAAgB;SAC5B;QACD,uEAAuE,EAAE;YACvEN,MAAM,EAAE,GAAG;YACXM,SAAS,EAAE,eAAe;SAC3B;QACD,oBAAoB,EAAE;YACpB3B,QAAQ,EAAE,UAAU;SACrB;QACD,2BAA2B,EAAE;YAC3BA,QAAQ,EAAE,UAAU;YACpBiB,KAAK,EAAE,MAAM;YACbC,MAAM,EAAE,MAAM;YACdY,gBAAgB,EAAE,WAAW;YAC7BC,gBAAgB,EAAE,aAAa;YAC/BC,SAAS,EAAE,YAAY;YACvBC,eAAe,EAAE,CAAC,qXAAqX,CAAC;YACxYC,kBAAkB,EAAE,cAAc;YAClCC,OAAO,EAAE,aAAa;SACvB;QACD,8BAA8B,EAAE;YAC9Bd,MAAM,EAAE,GAAG;YACXI,IAAI,EAAE,GAAG;YACTC,MAAM,EAAE,WAAW;YACnBC,SAAS,EAAE,eAAe;SAC3B;QACD,8BAA8B,EAAE;YAC9BN,MAAM,EAAE,GAAG;YACXD,KAAK,EAAE,GAAG;YACVM,MAAM,EAAE,WAAW;SACpB;QACD,8BAA8B,EAAE;YAC9BE,GAAG,EAAE,GAAG;YACRH,IAAI,EAAE,GAAG;YACTC,MAAM,EAAE,WAAW;YACnBC,SAAS,EAAE,gBAAgB;SAC5B;QACD,8BAA8B,EAAE;YAC9BC,GAAG,EAAE,GAAG;YACRR,KAAK,EAAE,GAAG;YACVM,MAAM,EAAE,WAAW;YACnBC,SAAS,EAAE,gBAAgB;SAC5B;QACD,wDAAwD,EAAE;YACxDC,GAAG,EAAE,KAAK;YACVjC,SAAS,EAAE,OAAO;YAClB+B,MAAM,EAAE,WAAW;SACpB;QACD,6BAA6B,EAAE;YAC7BD,IAAI,EAAE,GAAG;YACTE,SAAS,EAAE,gBAAgB;SAC5B;QACD,6BAA6B,EAAE;YAC7BP,KAAK,EAAE,GAAG;YACVO,SAAS,EAAE,gBAAgB;SAC5B;QACD,wDAAwD,EAAE;YACxDF,IAAI,EAAE,KAAK;YACXI,UAAU,EAAE,OAAO;YACnBH,MAAM,EAAE,WAAW;SACpB;QACD,6BAA6B,EAAE;YAC7BE,GAAG,EAAE,GAAG;YACRD,SAAS,EAAE,gBAAgB;SAC5B;QACD,6BAA6B,EAAE;YAC7BN,MAAM,EAAE,GAAG;YACXM,SAAS,EAAE,eAAe;SAC3B;KACF,CAAA,AAAC,CAAC,AAAC"}
+{"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 ${theme.palette.text.secondary}`,\n    borderBottom: `2px solid ${theme.palette.text.secondary}`,\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","text","secondary","borderBottom","display","left","cursor","transform","top","marginLeft","backgroundRepeat","backgroundOrigin","boxSizing","backgroundImage","backgroundPosition","padding"],"mappings":"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"}

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

@@ -1 +1 @@
-{"version":3,"file":"GridTitle.d.ts","sourceRoot":"","sources":["../../../src/components/GridLayout/GridTitle.tsx"],"names":[],"mappings":";AAqBA,OAAO,EAAqC,YAAY,EAA6B,MAAM,eAAe,CAAC;AAE3G,MAAM,WAAW,cAAc;IAC7B,YAAY,EAAE,YAAY,CAAC;IAC3B,KAAK,EAAE,MAAM,CAAC;IACd,QAAQ,CAAC,EAAE;QACT,MAAM,EAAE,OAAO,CAAC;QAChB,YAAY,EAAE,MAAM,IAAI,CAAC;KAC1B,CAAC;CACH;AAED;;;GAGG;AACH,wBAAgB,SAAS,CAAC,KAAK,EAAE,cAAc,eAuD9C"}
+{"version":3,"file":"GridTitle.d.ts","sourceRoot":"","sources":["../../../src/components/GridLayout/GridTitle.tsx"],"names":[],"mappings":";AAqBA,OAAO,EAAqC,YAAY,EAA6B,MAAM,eAAe,CAAC;AAE3G,MAAM,WAAW,cAAc;IAC7B,YAAY,EAAE,YAAY,CAAC;IAC3B,KAAK,EAAE,MAAM,CAAC;IACd,QAAQ,CAAC,EAAE;QACT,MAAM,EAAE,OAAO,CAAC;QAChB,YAAY,EAAE,MAAM,IAAI,CAAC;KAC1B,CAAC;CACH;AAED;;;GAGG;AACH,wBAAgB,SAAS,CAAC,KAAK,EAAE,cAAc,eAwD9C"}

package/dist/components/GridLayout/GridTitle.js

@@ -41,7 +41,7 @@ import { usePanelGroupActions, useEditMode, useDeletePanelGroupDialog } from '..
             justifyContent: 'start',
             alignItems: 'center',
             padding: (theme)=>theme.spacing(1),
-            backgroundColor: (theme)=>theme.palette.background.default
+            backgroundColor: ({ palette  })=>palette.mode === 'dark' ? palette.background.paper : palette.background.default
         },
         children: collapse ? /*#__PURE__*/ _jsxs(_Fragment, {
             children: [

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

@@ -1 +1 @@
-{"version":3,"sources":["../../../src/components/GridLayout/GridTitle.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 { Box, IconButton, Stack, Typography } from '@mui/material';\nimport ExpandedIcon from 'mdi-material-ui/ChevronDown';\nimport CollapsedIcon from 'mdi-material-ui/ChevronRight';\nimport AddPanelIcon from 'mdi-material-ui/ChartBoxPlusOutline';\nimport PencilIcon from 'mdi-material-ui/PencilOutline';\nimport ArrowUpIcon from 'mdi-material-ui/ArrowUp';\nimport ArrowDownIcon from 'mdi-material-ui/ArrowDown';\nimport DeleteIcon from 'mdi-material-ui/DeleteOutline';\nimport { usePanelGroupActions, useEditMode, PanelGroupId, useDeletePanelGroupDialog } from '../../context';\n\nexport interface GridTitleProps {\n  panelGroupId: PanelGroupId;\n  title: string;\n  collapse?: {\n    isOpen: boolean;\n    onToggleOpen: () => void;\n  };\n}\n\n/**\n * Renders the title for a Grid section, optionally also supporting expanding\n * and collapsing\n */\nexport function GridTitle(props: GridTitleProps) {\n  const { panelGroupId, title, collapse } = props;\n\n  const { openAddPanel, openEditPanelGroup, moveUp, moveDown } = usePanelGroupActions(panelGroupId);\n  const { openDeletePanelGroupDialog } = useDeletePanelGroupDialog();\n  const { isEditMode } = useEditMode();\n\n  const text = (\n    <Typography variant=\"h2\" sx={{ marginLeft: collapse !== undefined ? 1 : undefined }}>\n      {title}\n    </Typography>\n  );\n\n  return (\n    <Box\n      sx={{\n        display: 'flex',\n        justifyContent: 'start',\n        alignItems: 'center',\n        padding: (theme) => theme.spacing(1),\n        backgroundColor: (theme) => theme.palette.background.default,\n      }}\n    >\n      {collapse ? (\n        <>\n          <IconButton onClick={collapse.onToggleOpen}>\n            {collapse.isOpen ? <ExpandedIcon /> : <CollapsedIcon />}\n          </IconButton>\n          {text}\n          {isEditMode && (\n            <Stack direction=\"row\" marginLeft=\"auto\">\n              <IconButton aria-label={`add panel to group ${title}`} onClick={openAddPanel}>\n                <AddPanelIcon />\n              </IconButton>\n              <IconButton aria-label={`edit group ${title}`} onClick={openEditPanelGroup}>\n                <PencilIcon />\n              </IconButton>\n              <IconButton aria-label={`delete group ${title}`} onClick={() => openDeletePanelGroupDialog(panelGroupId)}>\n                <DeleteIcon />\n              </IconButton>\n              <IconButton aria-label={`move group ${title} down`} disabled={moveDown === undefined} onClick={moveDown}>\n                <ArrowDownIcon />\n              </IconButton>\n              <IconButton aria-label={`move group ${title} up`} disabled={moveUp === undefined} onClick={moveUp}>\n                <ArrowUpIcon />\n              </IconButton>\n            </Stack>\n          )}\n        </>\n      ) : (\n        // If we don't need expand/collapse, just render the title text\n        text\n      )}\n    </Box>\n  );\n}\n"],"names":["Box","IconButton","Stack","Typography","ExpandedIcon","CollapsedIcon","AddPanelIcon","PencilIcon","ArrowUpIcon","ArrowDownIcon","DeleteIcon","usePanelGroupActions","useEditMode","useDeletePanelGroupDialog","GridTitle","props","panelGroupId","title","collapse","openAddPanel","openEditPanelGroup","moveUp","moveDown","openDeletePanelGroupDialog","isEditMode","text","variant","sx","marginLeft","undefined","display","justifyContent","alignItems","padding","theme","spacing","backgroundColor","palette","background","default","onClick","onToggleOpen","isOpen","direction","aria-label","disabled"],"mappings":"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"}
+{"version":3,"sources":["../../../src/components/GridLayout/GridTitle.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 { Box, IconButton, Stack, Typography } from '@mui/material';\nimport ExpandedIcon from 'mdi-material-ui/ChevronDown';\nimport CollapsedIcon from 'mdi-material-ui/ChevronRight';\nimport AddPanelIcon from 'mdi-material-ui/ChartBoxPlusOutline';\nimport PencilIcon from 'mdi-material-ui/PencilOutline';\nimport ArrowUpIcon from 'mdi-material-ui/ArrowUp';\nimport ArrowDownIcon from 'mdi-material-ui/ArrowDown';\nimport DeleteIcon from 'mdi-material-ui/DeleteOutline';\nimport { usePanelGroupActions, useEditMode, PanelGroupId, useDeletePanelGroupDialog } from '../../context';\n\nexport interface GridTitleProps {\n  panelGroupId: PanelGroupId;\n  title: string;\n  collapse?: {\n    isOpen: boolean;\n    onToggleOpen: () => void;\n  };\n}\n\n/**\n * Renders the title for a Grid section, optionally also supporting expanding\n * and collapsing\n */\nexport function GridTitle(props: GridTitleProps) {\n  const { panelGroupId, title, collapse } = props;\n\n  const { openAddPanel, openEditPanelGroup, moveUp, moveDown } = usePanelGroupActions(panelGroupId);\n  const { openDeletePanelGroupDialog } = useDeletePanelGroupDialog();\n  const { isEditMode } = useEditMode();\n\n  const text = (\n    <Typography variant=\"h2\" sx={{ marginLeft: collapse !== undefined ? 1 : undefined }}>\n      {title}\n    </Typography>\n  );\n\n  return (\n    <Box\n      sx={{\n        display: 'flex',\n        justifyContent: 'start',\n        alignItems: 'center',\n        padding: (theme) => theme.spacing(1),\n        backgroundColor: ({ palette }) =>\n          palette.mode === 'dark' ? palette.background.paper : palette.background.default,\n      }}\n    >\n      {collapse ? (\n        <>\n          <IconButton onClick={collapse.onToggleOpen}>\n            {collapse.isOpen ? <ExpandedIcon /> : <CollapsedIcon />}\n          </IconButton>\n          {text}\n          {isEditMode && (\n            <Stack direction=\"row\" marginLeft=\"auto\">\n              <IconButton aria-label={`add panel to group ${title}`} onClick={openAddPanel}>\n                <AddPanelIcon />\n              </IconButton>\n              <IconButton aria-label={`edit group ${title}`} onClick={openEditPanelGroup}>\n                <PencilIcon />\n              </IconButton>\n              <IconButton aria-label={`delete group ${title}`} onClick={() => openDeletePanelGroupDialog(panelGroupId)}>\n                <DeleteIcon />\n              </IconButton>\n              <IconButton aria-label={`move group ${title} down`} disabled={moveDown === undefined} onClick={moveDown}>\n                <ArrowDownIcon />\n              </IconButton>\n              <IconButton aria-label={`move group ${title} up`} disabled={moveUp === undefined} onClick={moveUp}>\n                <ArrowUpIcon />\n              </IconButton>\n            </Stack>\n          )}\n        </>\n      ) : (\n        // If we don't need expand/collapse, just render the title text\n        text\n      )}\n    </Box>\n  );\n}\n"],"names":["Box","IconButton","Stack","Typography","ExpandedIcon","CollapsedIcon","AddPanelIcon","PencilIcon","ArrowUpIcon","ArrowDownIcon","DeleteIcon","usePanelGroupActions","useEditMode","useDeletePanelGroupDialog","GridTitle","props","panelGroupId","title","collapse","openAddPanel","openEditPanelGroup","moveUp","moveDown","openDeletePanelGroupDialog","isEditMode","text","variant","sx","marginLeft","undefined","display","justifyContent","alignItems","padding","theme","spacing","backgroundColor","palette","mode","background","paper","default","onClick","onToggleOpen","isOpen","direction","aria-label","disabled"],"mappings":"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"}

package/dist/components/PanelDrawer/PanelDrawer.js

@@ -51,7 +51,7 @@ import { PanelEditorForm, panelEditorFormId } from './PanelEditorForm';
                         display: 'flex',
                         alignItems: 'center',
                         padding: (theme)=>theme.spacing(1, 2),
-                        borderBottom: (theme)=>`1px solid ${theme.palette.grey[100]}`
+                        borderBottom: (theme)=>`1px solid ${theme.palette.divider}`
                     },
                     children: [
                         /*#__PURE__*/ _jsxs(Typography, {
@@ -73,6 +73,7 @@ import { PanelEditorForm, panelEditorFormId } from './PanelEditorForm';
                                     children: panelEditor.mode === 'Add' ? 'Add' : 'Apply'
                                 }),
                                 /*#__PURE__*/ _jsx(Button, {
+                                    color: "secondary",
                                     variant: "outlined",
                                     onClick: handleClose,
                                     children: "Cancel"

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

@@ -1 +1 @@
-{"version":3,"sources":["../../../src/components/PanelDrawer/PanelDrawer.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 { useState } from 'react';\nimport { Stack, Box, Button, Typography } from '@mui/material';\nimport { Drawer } from '@perses-dev/components';\nimport { usePanelEditor } from '../../context';\nimport { PanelEditorForm, panelEditorFormId, PanelEditorFormProps } from './PanelEditorForm';\n\n/**\n * The Add/Edit panel drawer for editing a panel's options.\n */\nexport const PanelDrawer = () => {\n  const panelEditor = usePanelEditor();\n\n  // When the user clicks close, start closing but don't call the store yet to keep values stable during animtation\n  const [isClosing, setIsClosing] = useState(false);\n  const handleClose = () => setIsClosing(true);\n\n  // Don't call closeDrawer on the store until the Drawer has completely transitioned out\n  const handleExited = () => {\n    panelEditor?.close();\n    setIsClosing(false);\n  };\n\n  // Drawer is open if we have a model and we're not transitioning out\n  const isOpen = panelEditor !== undefined && isClosing === false;\n\n  const handleSubmit: PanelEditorFormProps['onSubmit'] = (values) => {\n    // This shouldn't happen since we don't render the submit button until we have a model, but check to make TS happy\n    if (panelEditor === undefined) {\n      throw new Error('Cannot apply changes');\n    }\n    panelEditor.applyChanges(values);\n    handleClose();\n  };\n\n  return (\n    <Drawer isOpen={isOpen} onClose={handleClose} SlideProps={{ onExited: handleExited }}>\n      {/* When the drawer is opened, we should have panel editor state (this also ensures the form state gets reset between opens) */}\n      {panelEditor !== undefined && (\n        <>\n          <Box\n            sx={{\n              display: 'flex',\n              alignItems: 'center',\n              padding: (theme) => theme.spacing(1, 2),\n              borderBottom: (theme) => `1px solid ${theme.palette.grey[100]}`,\n            }}\n          >\n            <Typography variant=\"h2\">{panelEditor.mode} Panel</Typography>\n            <Stack direction=\"row\" spacing={1} marginLeft=\"auto\">\n              {/* Using the 'form' attribute lets us have a submit button like this outside the form element */}\n              <Button type=\"submit\" variant=\"contained\" form={panelEditorFormId}>\n                {panelEditor.mode === 'Add' ? 'Add' : 'Apply'}\n              </Button>\n              <Button variant=\"outlined\" onClick={handleClose}>\n                Cancel\n              </Button>\n            </Stack>\n          </Box>\n          <PanelEditorForm onSubmit={handleSubmit} initialValues={panelEditor.initialValues} />\n        </>\n      )}\n    </Drawer>\n  );\n};\n"],"names":["useState","Stack","Box","Button","Typography","Drawer","usePanelEditor","PanelEditorForm","panelEditorFormId","PanelDrawer","panelEditor","isClosing","setIsClosing","handleClose","handleExited","close","isOpen","undefined","handleSubmit","values","Error","applyChanges","onClose","SlideProps","onExited","sx","display","alignItems","padding","theme","spacing","borderBottom","palette","grey","variant","mode","direction","marginLeft","type","form","onClick","onSubmit","initialValues"],"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,QAAQ,QAAQ,OAAO,CAAC;AACjC,SAASC,KAAK,EAAEC,GAAG,EAAEC,MAAM,EAAEC,UAAU,QAAQ,eAAe,CAAC;AAC/D,SAASC,MAAM,QAAQ,wBAAwB,CAAC;AAChD,SAASC,cAAc,QAAQ,eAAe,CAAC;AAC/C,SAASC,eAAe,EAAEC,iBAAiB,QAA8B,mBAAmB,CAAC;AAE7F;;CAEC,GACD,OAAO,MAAMC,WAAW,GAAG,IAAM;IAC/B,MAAMC,WAAW,GAAGJ,cAAc,EAAE,AAAC;IAErC,iHAAiH;IACjH,MAAM,CAACK,SAAS,EAAEC,YAAY,CAAC,GAAGZ,QAAQ,CAAC,KAAK,CAAC,AAAC;IAClD,MAAMa,WAAW,GAAG,IAAMD,YAAY,CAAC,IAAI,CAAC,AAAC;IAE7C,uFAAuF;IACvF,MAAME,YAAY,GAAG,IAAM;QACzBJ,WAAW,aAAXA,WAAW,WAAO,GAAlBA,KAAAA,CAAkB,GAAlBA,WAAW,CAAEK,KAAK,EAAE,CAAC;QACrBH,YAAY,CAAC,KAAK,CAAC,CAAC;IACtB,CAAC,AAAC;IAEF,oEAAoE;IACpE,MAAMI,MAAM,GAAGN,WAAW,KAAKO,SAAS,IAAIN,SAAS,KAAK,KAAK,AAAC;IAEhE,MAAMO,YAAY,GAAqC,CAACC,MAAM,GAAK;QACjE,kHAAkH;QAClH,IAAIT,WAAW,KAAKO,SAAS,EAAE;YAC7B,MAAM,IAAIG,KAAK,CAAC,sBAAsB,CAAC,CAAC;QAC1C,CAAC;QACDV,WAAW,CAACW,YAAY,CAACF,MAAM,CAAC,CAAC;QACjCN,WAAW,EAAE,CAAC;IAChB,CAAC,AAAC;IAEF,qBACE,KAACR,MAAM;QAACW,MAAM,EAAEA,MAAM;QAAEM,OAAO,EAAET,WAAW;QAAEU,UAAU,EAAE;YAAEC,QAAQ,EAAEV,YAAY;SAAE;kBAEjFJ,WAAW,KAAKO,SAAS,kBACxB;;8BACE,MAACf,GAAG;oBACFuB,EAAE,EAAE;wBACFC,OAAO,EAAE,MAAM;wBACfC,UAAU,EAAE,QAAQ;wBACpBC,OAAO,EAAE,CAACC,KAAK,GAAKA,KAAK,CAACC,OAAO,CAAC,CAAC,EAAE,CAAC,CAAC;wBACvCC,YAAY,EAAE,CAACF,KAAK,GAAK,CAAC,UAAU,EAAEA,KAAK,CAACG,OAAO,CAACC,IAAI,CAAC,GAAG,CAAC,CAAC,CAAC;qBAChE;;sCAED,MAAC7B,UAAU;4BAAC8B,OAAO,EAAC,IAAI;;gCAAExB,WAAW,CAACyB,IAAI;gCAAC,QAAM;;0BAAa;sCAC9D,MAAClC,KAAK;4BAACmC,SAAS,EAAC,KAAK;4BAACN,OAAO,EAAE,CAAC;4BAAEO,UAAU,EAAC,MAAM;;8CAElD,KAAClC,MAAM;oCAACmC,IAAI,EAAC,QAAQ;oCAACJ,OAAO,EAAC,WAAW;oCAACK,IAAI,EAAE/B,iBAAiB;8CAC9DE,WAAW,CAACyB,IAAI,KAAK,KAAK,GAAG,KAAK,GAAG,OAAO;kCACtC;8CACT,KAAChC,MAAM;oCAAC+B,OAAO,EAAC,UAAU;oCAACM,OAAO,EAAE3B,WAAW;8CAAE,QAEjD;kCAAS;;0BACH;;kBACJ;8BACN,KAACN,eAAe;oBAACkC,QAAQ,EAAEvB,YAAY;oBAAEwB,aAAa,EAAEhC,WAAW,CAACgC,aAAa;kBAAI;;UACpF,AACJ;MACM,CACT;AACJ,CAAC,CAAC"}
+{"version":3,"sources":["../../../src/components/PanelDrawer/PanelDrawer.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 { useState } from 'react';\nimport { Stack, Box, Button, Typography } from '@mui/material';\nimport { Drawer } from '@perses-dev/components';\nimport { usePanelEditor } from '../../context';\nimport { PanelEditorForm, panelEditorFormId, PanelEditorFormProps } from './PanelEditorForm';\n\n/**\n * The Add/Edit panel drawer for editing a panel's options.\n */\nexport const PanelDrawer = () => {\n  const panelEditor = usePanelEditor();\n\n  // When the user clicks close, start closing but don't call the store yet to keep values stable during animtation\n  const [isClosing, setIsClosing] = useState(false);\n  const handleClose = () => setIsClosing(true);\n\n  // Don't call closeDrawer on the store until the Drawer has completely transitioned out\n  const handleExited = () => {\n    panelEditor?.close();\n    setIsClosing(false);\n  };\n\n  // Drawer is open if we have a model and we're not transitioning out\n  const isOpen = panelEditor !== undefined && isClosing === false;\n\n  const handleSubmit: PanelEditorFormProps['onSubmit'] = (values) => {\n    // This shouldn't happen since we don't render the submit button until we have a model, but check to make TS happy\n    if (panelEditor === undefined) {\n      throw new Error('Cannot apply changes');\n    }\n    panelEditor.applyChanges(values);\n    handleClose();\n  };\n\n  return (\n    <Drawer isOpen={isOpen} onClose={handleClose} SlideProps={{ onExited: handleExited }}>\n      {/* When the drawer is opened, we should have panel editor state (this also ensures the form state gets reset between opens) */}\n      {panelEditor !== undefined && (\n        <>\n          <Box\n            sx={{\n              display: 'flex',\n              alignItems: 'center',\n              padding: (theme) => theme.spacing(1, 2),\n              borderBottom: (theme) => `1px solid ${theme.palette.divider}`,\n            }}\n          >\n            <Typography variant=\"h2\">{panelEditor.mode} Panel</Typography>\n            <Stack direction=\"row\" spacing={1} marginLeft=\"auto\">\n              {/* Using the 'form' attribute lets us have a submit button like this outside the form element */}\n              <Button type=\"submit\" variant=\"contained\" form={panelEditorFormId}>\n                {panelEditor.mode === 'Add' ? 'Add' : 'Apply'}\n              </Button>\n              <Button color=\"secondary\" variant=\"outlined\" onClick={handleClose}>\n                Cancel\n              </Button>\n            </Stack>\n          </Box>\n          <PanelEditorForm onSubmit={handleSubmit} initialValues={panelEditor.initialValues} />\n        </>\n      )}\n    </Drawer>\n  );\n};\n"],"names":["useState","Stack","Box","Button","Typography","Drawer","usePanelEditor","PanelEditorForm","panelEditorFormId","PanelDrawer","panelEditor","isClosing","setIsClosing","handleClose","handleExited","close","isOpen","undefined","handleSubmit","values","Error","applyChanges","onClose","SlideProps","onExited","sx","display","alignItems","padding","theme","spacing","borderBottom","palette","divider","variant","mode","direction","marginLeft","type","form","color","onClick","onSubmit","initialValues"],"mappings":"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"}

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

@@ -1 +1 @@
-{"version":3,"file":"TimeRangeControls.d.ts","sourceRoot":"","sources":["../../../src/components/TimeRangeControls/TimeRangeControls.tsx"],"names":[],"mappings":";AAaA,OAAO,EAAuB,UAAU,EAAE,MAAM,wBAAwB,CAAC;AAKzE,eAAO,MAAM,YAAY,EAAE,UAAU,EAUpC,CAAC;AAEF,wBAAgB,iBAAiB,gBAchC"}
+{"version":3,"file":"TimeRangeControls.d.ts","sourceRoot":"","sources":["../../../src/components/TimeRangeControls/TimeRangeControls.tsx"],"names":[],"mappings":";AAeA,OAAO,EAAuB,UAAU,EAAE,MAAM,wBAAwB,CAAC;AAKzE,eAAO,MAAM,YAAY,EAAE,UAAU,EAUpC,CAAC;AAEF,wBAAgB,iBAAiB,gBAsBhC"}

package/dist/components/TimeRangeControls/TimeRangeControls.js

@@ -10,10 +10,12 @@
 // 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 } from "react/jsx-runtime";
+import { jsx as _jsx, jsxs as _jsxs, Fragment as _Fragment } from "react/jsx-runtime";
+import RefreshIcon from 'mdi-material-ui/Refresh';
+import { IconButton, styled } from '@mui/material';
 import { DateTimeRangePicker } from '@perses-dev/components';
+import { useTimeRange } from '@perses-dev/plugin-system';
 import { isDurationString } from '@perses-dev/core';
-import { useDashboardTimeRange } from '../../context';
 import { useDefaultTimeRange } from '../../context';
 export const TIME_OPTIONS = [
     {
@@ -72,7 +74,7 @@ export const TIME_OPTIONS = [
     }
 ];
 export function TimeRangeControls() {
-    const { timeRange , setTimeRange  } = useDashboardTimeRange();
+    const { timeRange , setTimeRange , refresh  } = useTimeRange();
     const defaultTimeRange = useDefaultTimeRange();
     // add time shortcut if one does not match duration from dashboard JSON
     if (!TIME_OPTIONS.some((option)=>option.value.pastDuration === defaultTimeRange.pastDuration)) {
@@ -85,11 +87,26 @@ export function TimeRangeControls() {
             });
         }
     }
-    return /*#__PURE__*/ _jsx(DateTimeRangePicker, {
-        timeOptions: TIME_OPTIONS,
-        value: timeRange,
-        onChange: setTimeRange
+    return /*#__PURE__*/ _jsxs(_Fragment, {
+        children: [
+            /*#__PURE__*/ _jsx(DateTimeRangePicker, {
+                timeOptions: TIME_OPTIONS,
+                value: timeRange,
+                onChange: setTimeRange
+            }),
+            /*#__PURE__*/ _jsx(RefreshIconButton, {
+                "aria-label": "Refresh Dashboard",
+                onClick: refresh,
+                children: /*#__PURE__*/ _jsx(RefreshIcon, {})
+            })
+        ]
     });
 }
+const RefreshIconButton = styled(IconButton)(({ theme  })=>({
+        border: `1px solid ${theme.palette.grey[300]}`,
+        borderRadius: theme.shape.borderRadius,
+        padding: theme.spacing(0.5),
+        color: theme.palette.grey[900]
+    }));
 
 //# sourceMappingURL=TimeRangeControls.js.map

package/dist/components/TimeRangeControls/TimeRangeControls.js.map

@@ -1 +1 @@
-{"version":3,"sources":["../../../src/components/TimeRangeControls/TimeRangeControls.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 { DateTimeRangePicker, TimeOption } from '@perses-dev/components';\nimport { isDurationString } from '@perses-dev/core';\nimport { useDashboardTimeRange } from '../../context';\nimport { useDefaultTimeRange } from '../../context';\n\nexport const TIME_OPTIONS: TimeOption[] = [\n  { value: { pastDuration: '5m' }, display: 'Last 5 minutes' },\n  { value: { pastDuration: '15m' }, display: 'Last 15 minutes' },\n  { value: { pastDuration: '30m' }, display: 'Last 30 minutes' },\n  { value: { pastDuration: '1h' }, display: 'Last 1 hour' },\n  { value: { pastDuration: '6h' }, display: 'Last 6 hours' },\n  { value: { pastDuration: '12h' }, display: 'Last 12 hours' },\n  { value: { pastDuration: '24h' }, display: 'Last 1 day' },\n  { value: { pastDuration: '7d' }, display: 'Last 7 days' },\n  { value: { pastDuration: '14d' }, display: 'Last 14 days' },\n];\n\nexport function TimeRangeControls() {\n  const { timeRange, setTimeRange } = useDashboardTimeRange();\n  const defaultTimeRange = useDefaultTimeRange();\n\n  // add time shortcut if one does not match duration from dashboard JSON\n  if (!TIME_OPTIONS.some((option) => option.value.pastDuration === defaultTimeRange.pastDuration)) {\n    if (isDurationString(defaultTimeRange.pastDuration)) {\n      TIME_OPTIONS.push({\n        value: { pastDuration: defaultTimeRange.pastDuration },\n        display: `Last ${defaultTimeRange.pastDuration}`,\n      });\n    }\n  }\n  return <DateTimeRangePicker timeOptions={TIME_OPTIONS} value={timeRange} onChange={setTimeRange} />;\n}\n"],"names":["DateTimeRangePicker","isDurationString","useDashboardTimeRange","useDefaultTimeRange","TIME_OPTIONS","value","pastDuration","display","TimeRangeControls","timeRange","setTimeRange","defaultTimeRange","some","option","push","timeOptions","onChange"],"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,mBAAmB,QAAoB,wBAAwB,CAAC;AACzE,SAASC,gBAAgB,QAAQ,kBAAkB,CAAC;AACpD,SAASC,qBAAqB,QAAQ,eAAe,CAAC;AACtD,SAASC,mBAAmB,QAAQ,eAAe,CAAC;AAEpD,OAAO,MAAMC,YAAY,GAAiB;IACxC;QAAEC,KAAK,EAAE;YAAEC,YAAY,EAAE,IAAI;SAAE;QAAEC,OAAO,EAAE,gBAAgB;KAAE;IAC5D;QAAEF,KAAK,EAAE;YAAEC,YAAY,EAAE,KAAK;SAAE;QAAEC,OAAO,EAAE,iBAAiB;KAAE;IAC9D;QAAEF,KAAK,EAAE;YAAEC,YAAY,EAAE,KAAK;SAAE;QAAEC,OAAO,EAAE,iBAAiB;KAAE;IAC9D;QAAEF,KAAK,EAAE;YAAEC,YAAY,EAAE,IAAI;SAAE;QAAEC,OAAO,EAAE,aAAa;KAAE;IACzD;QAAEF,KAAK,EAAE;YAAEC,YAAY,EAAE,IAAI;SAAE;QAAEC,OAAO,EAAE,cAAc;KAAE;IAC1D;QAAEF,KAAK,EAAE;YAAEC,YAAY,EAAE,KAAK;SAAE;QAAEC,OAAO,EAAE,eAAe;KAAE;IAC5D;QAAEF,KAAK,EAAE;YAAEC,YAAY,EAAE,KAAK;SAAE;QAAEC,OAAO,EAAE,YAAY;KAAE;IACzD;QAAEF,KAAK,EAAE;YAAEC,YAAY,EAAE,IAAI;SAAE;QAAEC,OAAO,EAAE,aAAa;KAAE;IACzD;QAAEF,KAAK,EAAE;YAAEC,YAAY,EAAE,KAAK;SAAE;QAAEC,OAAO,EAAE,cAAc;KAAE;CAC5D,CAAC;AAEF,OAAO,SAASC,iBAAiB,GAAG;IAClC,MAAM,EAAEC,SAAS,CAAA,EAAEC,YAAY,CAAA,EAAE,GAAGR,qBAAqB,EAAE,AAAC;IAC5D,MAAMS,gBAAgB,GAAGR,mBAAmB,EAAE,AAAC;IAE/C,uEAAuE;IACvE,IAAI,CAACC,YAAY,CAACQ,IAAI,CAAC,CAACC,MAAM,GAAKA,MAAM,CAACR,KAAK,CAACC,YAAY,KAAKK,gBAAgB,CAACL,YAAY,CAAC,EAAE;QAC/F,IAAIL,gBAAgB,CAACU,gBAAgB,CAACL,YAAY,CAAC,EAAE;YACnDF,YAAY,CAACU,IAAI,CAAC;gBAChBT,KAAK,EAAE;oBAAEC,YAAY,EAAEK,gBAAgB,CAACL,YAAY;iBAAE;gBACtDC,OAAO,EAAE,CAAC,KAAK,EAAEI,gBAAgB,CAACL,YAAY,CAAC,CAAC;aACjD,CAAC,CAAC;QACL,CAAC;IACH,CAAC;IACD,qBAAO,KAACN,mBAAmB;QAACe,WAAW,EAAEX,YAAY;QAAEC,KAAK,EAAEI,SAAS;QAAEO,QAAQ,EAAEN,YAAY;MAAI,CAAC;AACtG,CAAC"}
+{"version":3,"sources":["../../../src/components/TimeRangeControls/TimeRangeControls.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 RefreshIcon from 'mdi-material-ui/Refresh';\nimport { IconButton, styled } from '@mui/material';\nimport { DateTimeRangePicker, TimeOption } from '@perses-dev/components';\nimport { useTimeRange } from '@perses-dev/plugin-system';\nimport { isDurationString } from '@perses-dev/core';\nimport { useDefaultTimeRange } from '../../context';\n\nexport const TIME_OPTIONS: TimeOption[] = [\n  { value: { pastDuration: '5m' }, display: 'Last 5 minutes' },\n  { value: { pastDuration: '15m' }, display: 'Last 15 minutes' },\n  { value: { pastDuration: '30m' }, display: 'Last 30 minutes' },\n  { value: { pastDuration: '1h' }, display: 'Last 1 hour' },\n  { value: { pastDuration: '6h' }, display: 'Last 6 hours' },\n  { value: { pastDuration: '12h' }, display: 'Last 12 hours' },\n  { value: { pastDuration: '24h' }, display: 'Last 1 day' },\n  { value: { pastDuration: '7d' }, display: 'Last 7 days' },\n  { value: { pastDuration: '14d' }, display: 'Last 14 days' },\n];\n\nexport function TimeRangeControls() {\n  const { timeRange, setTimeRange, refresh } = useTimeRange();\n  const defaultTimeRange = useDefaultTimeRange();\n\n  // add time shortcut if one does not match duration from dashboard JSON\n  if (!TIME_OPTIONS.some((option) => option.value.pastDuration === defaultTimeRange.pastDuration)) {\n    if (isDurationString(defaultTimeRange.pastDuration)) {\n      TIME_OPTIONS.push({\n        value: { pastDuration: defaultTimeRange.pastDuration },\n        display: `Last ${defaultTimeRange.pastDuration}`,\n      });\n    }\n  }\n\n  return (\n    <>\n      <DateTimeRangePicker timeOptions={TIME_OPTIONS} value={timeRange} onChange={setTimeRange} />\n      <RefreshIconButton aria-label=\"Refresh Dashboard\" onClick={refresh}>\n        <RefreshIcon />\n      </RefreshIconButton>\n    </>\n  );\n}\n\nconst RefreshIconButton = styled(IconButton)(({ theme }) => ({\n  border: `1px solid ${theme.palette.grey[300]}`,\n  borderRadius: theme.shape.borderRadius,\n  padding: theme.spacing(0.5),\n  color: theme.palette.grey[900],\n}));\n"],"names":["RefreshIcon","IconButton","styled","DateTimeRangePicker","useTimeRange","isDurationString","useDefaultTimeRange","TIME_OPTIONS","value","pastDuration","display","TimeRangeControls","timeRange","setTimeRange","refresh","defaultTimeRange","some","option","push","timeOptions","onChange","RefreshIconButton","aria-label","onClick","theme","border","palette","grey","borderRadius","shape","padding","spacing","color"],"mappings":"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"}

package/dist/components/TimeRangeControls/TimeRangeControls.test.js

@@ -15,12 +15,14 @@ import { generatePath } from 'react-router';
 import { createMemoryHistory } from 'history';
 import userEvent from '@testing-library/user-event';
 import { screen, act } from '@testing-library/react';
+import { TimeRangeProvider } from '@perses-dev/plugin-system';
 import { renderWithContext } from '../../test';
 import testDashboard from '../../test/testDashboard';
-import { DashboardProvider, TimeRangeProvider } from '../../context';
+import { DashboardProvider } from '../../context';
 import { TimeRangeControls } from './TimeRangeControls';
 const history = createMemoryHistory({
     initialEntries: [
+        generatePath('/home'),
         generatePath('/dashboards/:id', {
             id: 'test'
         })
@@ -49,7 +51,9 @@ describe('TimeRangeControls', ()=>{
     it('should default to dashboard duration and update selected time option when clicked', async ()=>{
         renderTimeRangeControls(false);
         expect(screen.getByText('Last 30 minutes')).toBeInTheDocument();
-        const dateButton = screen.getByRole('button');
+        const dateButton = screen.getByRole('button', {
+            name: /last/i
+        });
         userEvent.click(dateButton);
         const firstSelected = screen.getByRole('option', {
             name: 'Last 5 minutes'
@@ -59,7 +63,9 @@ describe('TimeRangeControls', ()=>{
     });
     it('should update URL params with correct time range values', ()=>{
         renderTimeRangeControls(true);
-        const dateButton = screen.getByRole('button');
+        const dateButton = screen.getByRole('button', {
+            name: /last/i
+        });
         userEvent.click(dateButton);
         const firstSelected = screen.getByRole('option', {
             name: 'Last 5 minutes'
@@ -70,11 +76,11 @@ describe('TimeRangeControls', ()=>{
         const secondSelected = screen.getByText('Last 12 hours');
         userEvent.click(secondSelected);
         expect(history.location.search).toEqual('?start=12h');
-        // back button should return to first option selected
+        // back button should return to previous page selected
         act(()=>{
             history.back();
         });
-        expect(history.location.search).toEqual('?start=5m');
+        expect(history.location.pathname).toEqual('/home');
     });
 // TODO: add additional tests for absolute time selection, other inputs, form validation, etc.
 });