@perses-dev/dashboards 0.0.0-snapshot-color-palette-gen-test-0ebddd6 → 0.0.0-snapshot-saving-defaults-refinements-1b25cec

package/dist/components/DashboardToolbar/DashboardToolbar.js

@@ -11,41 +11,27 @@
 // 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 { useState } from 'react';
 import { Typography, Stack, Button, Box, useTheme, useMediaQuery, Alert } from '@mui/material';
 import { ErrorBoundary, ErrorAlert } from '@perses-dev/components';
-import { useDashboard, useEditMode } from '../../context';
+import { useEditMode } from '../../context';
 import { AddPanelButton } from '../AddPanelButton';
 import { AddGroupButton } from '../AddGroupButton';
 import { DownloadButton } from '../DownloadButton';
 import { TimeRangeControls } from '../TimeRangeControls';
-import { TemplateVariableList, EditVariablesButton } from '../Variables';
+import { EditVariablesButton } from '../Variables';
 import { EditButton } from '../EditButton';
 import { EditJsonButton } from '../EditJsonButton';
+import { SaveDashboardButton } from '../SaveDashboardButton';
+import { DashboardStickyToolbar } from '../DashboardStickyToolbar';
 export const DashboardToolbar = (props)=>{
     const { dashboardName , dashboardTitleComponent , initialVariableIsSticky , isReadonly , onEditButtonClick , onCancelButtonClick , onSave ,  } = props;
-    const dashboard = useDashboard();
-    const { isEditMode , setEditMode  } = useEditMode();
+    const { isEditMode  } = useEditMode();
     const isBiggerThanMd = useMediaQuery(useTheme().breakpoints.up('md'));
     const isBiggerThanSm = useMediaQuery(useTheme().breakpoints.up('sm'));
-    const [isSavingDashboard, setSavingDashboard] = useState(false);
     const dashboardTitle = dashboardTitleComponent ? dashboardTitleComponent : /*#__PURE__*/ _jsx(Typography, {
         variant: "h2",
         children: dashboardName
     });
-    const onSaveButtonClick = ()=>{
-        if (onSave !== undefined) {
-            setSavingDashboard(true);
-            onSave(dashboard.dashboard).then(()=>{
-                setSavingDashboard(false);
-                setEditMode(false);
-            }).catch(()=>{
-                setSavingDashboard(false);
-            });
-        } else {
-            setEditMode(false);
-        }
-    };
     const testId = 'dashboard-toolbar';
     return /*#__PURE__*/ _jsx(_Fragment, {
         children: isEditMode ? /*#__PURE__*/ _jsxs(Stack, {
@@ -73,11 +59,9 @@ export const DashboardToolbar = (props)=>{
                                     },
                                     children: "Dashboard managed via code only. Download JSON and commit changes to save."
                                 }),
-                                /*#__PURE__*/ _jsx(Button, {
-                                    variant: "contained",
-                                    onClick: onSaveButtonClick,
-                                    disabled: isReadonly || isSavingDashboard,
-                                    children: "Save"
+                                /*#__PURE__*/ _jsx(SaveDashboardButton, {
+                                    onSave: onSave,
+                                    isDisabled: isReadonly
                                 }),
                                 /*#__PURE__*/ _jsx(Button, {
                                     variant: "outlined",
@@ -98,7 +82,7 @@ export const DashboardToolbar = (props)=>{
                     children: [
                         /*#__PURE__*/ _jsx(ErrorBoundary, {
                             FallbackComponent: ErrorAlert,
-                            children: /*#__PURE__*/ _jsx(TemplateVariableList, {
+                            children: /*#__PURE__*/ _jsx(DashboardStickyToolbar, {
                                 initialVariableIsSticky: initialVariableIsSticky,
                                 sx: {
                                     backgroundColor: ({ palette  })=>palette.mode === 'dark' ? palette.background.default : palette.background.paper
@@ -186,7 +170,7 @@ export const DashboardToolbar = (props)=>{
                     paddingY: 2,
                     children: /*#__PURE__*/ _jsx(ErrorBoundary, {
                         FallbackComponent: ErrorAlert,
-                        children: /*#__PURE__*/ _jsx(TemplateVariableList, {
+                        children: /*#__PURE__*/ _jsx(DashboardStickyToolbar, {
                             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 2023 The Perses Authors\n// Licensed under the Apache License, Version 2.0 (the \"License\");\n// you may not use this file except in compliance with the License.\n// You may obtain a copy of the License at\n//\n// http://www.apache.org/licenses/LICENSE-2.0\n//\n// Unless required by applicable law or agreed to in writing, software\n// distributed under the License is distributed on an \"AS IS\" BASIS,\n// WITHOUT WARRANTIES OR CONDITIONS OF ANY KIND, either express or implied.\n// See the License for the specific language governing permissions and\n// limitations under the License.\n\nimport { useState } from 'react';\nimport { Typography, Stack, Button, Box, useTheme, useMediaQuery, Alert } from '@mui/material';\nimport { ErrorBoundary, ErrorAlert } from '@perses-dev/components';\nimport { DashboardResource } from '@perses-dev/core';\nimport { useDashboard, useEditMode } from '../../context';\nimport { AddPanelButton } from '../AddPanelButton';\nimport { AddGroupButton } from '../AddGroupButton';\nimport { DownloadButton } from '../DownloadButton';\nimport { TimeRangeControls } from '../TimeRangeControls';\nimport { TemplateVariableList, EditVariablesButton } from '../Variables';\nimport { EditButton } from '../EditButton';\nimport { EditJsonButton } from '../EditJsonButton';\n\nexport interface DashboardToolbarProps {\n  dashboardName: string;\n  dashboardTitleComponent?: JSX.Element;\n  initialVariableIsSticky?: boolean;\n  isReadonly: boolean;\n  onEditButtonClick: () => void;\n  onCancelButtonClick: () => void;\n  onSave?: (entity: DashboardResource) => Promise<DashboardResource>;\n}\n\nexport const DashboardToolbar = (props: DashboardToolbarProps) => {\n  const {\n    dashboardName,\n    dashboardTitleComponent,\n    initialVariableIsSticky,\n    isReadonly,\n    onEditButtonClick,\n    onCancelButtonClick,\n    onSave,\n  } = props;\n\n  const dashboard = useDashboard();\n  const { isEditMode, setEditMode } = useEditMode();\n\n  const isBiggerThanMd = useMediaQuery(useTheme().breakpoints.up('md'));\n  const isBiggerThanSm = useMediaQuery(useTheme().breakpoints.up('sm'));\n\n  const [isSavingDashboard, setSavingDashboard] = useState<boolean>(false);\n\n  const dashboardTitle = dashboardTitleComponent ? (\n    dashboardTitleComponent\n  ) : (\n    <Typography variant=\"h2\">{dashboardName}</Typography>\n  );\n\n  const onSaveButtonClick = () => {\n    if (onSave !== undefined) {\n      setSavingDashboard(true);\n      onSave(dashboard.dashboard)\n        .then(() => {\n          setSavingDashboard(false);\n          setEditMode(false);\n        })\n        .catch(() => {\n          setSavingDashboard(false);\n        });\n    } else {\n      setEditMode(false);\n    }\n  };\n\n  const testId = 'dashboard-toolbar';\n\n  return (\n    <>\n      {isEditMode ? (\n        <Stack spacing={1} data-testid={testId}>\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={onSaveButtonClick} disabled={isReadonly || isSavingDashboard}>\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: 'start',\n              padding: (theme) => theme.spacing(1, 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            {isBiggerThanMd ? (\n              // On bigger screens, make it one row\n              <Stack direction=\"row\" spacing={1} marginLeft=\"auto\" sx={{ whiteSpace: 'nowrap' }}>\n                <EditVariablesButton />\n                <AddPanelButton />\n                <AddGroupButton />\n                <TimeRangeControls />\n                <DownloadButton />\n                <EditJsonButton />\n              </Stack>\n            ) : (\n              // On smaller screens, make it two rows\n              <Stack spacing={1}>\n                <Stack direction=\"row\" spacing={1} marginLeft=\"auto\" sx={{ whiteSpace: 'nowrap' }}>\n                  <TimeRangeControls />\n                  <DownloadButton />\n                  <EditJsonButton />\n                </Stack>\n                <Stack direction=\"row\" spacing={1} marginLeft=\"auto\" sx={{ whiteSpace: 'nowrap' }}>\n                  <EditVariablesButton />\n                  <AddPanelButton />\n                  <AddGroupButton />\n                </Stack>\n              </Stack>\n            )}\n          </Box>\n        </Stack>\n      ) : (\n        <Stack spacing={1} padding={2} data-testid={testId}>\n          <Box sx={{ display: 'flex', width: '100%' }}>\n            {dashboardTitle}\n            <Stack direction=\"row\" spacing={1} marginLeft=\"auto\">\n              <TimeRangeControls />\n              <DownloadButton />\n              {isBiggerThanSm && <EditButton onClick={onEditButtonClick} />}\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":["useState","Typography","Stack","Button","Box","useTheme","useMediaQuery","Alert","ErrorBoundary","ErrorAlert","useDashboard","useEditMode","AddPanelButton","AddGroupButton","DownloadButton","TimeRangeControls","TemplateVariableList","EditVariablesButton","EditButton","EditJsonButton","DashboardToolbar","props","dashboardName","dashboardTitleComponent","initialVariableIsSticky","isReadonly","onEditButtonClick","onCancelButtonClick","onSave","dashboard","isEditMode","setEditMode","isBiggerThanMd","breakpoints","up","isBiggerThanSm","isSavingDashboard","setSavingDashboard","dashboardTitle","variant","onSaveButtonClick","undefined","then","catch","testId","spacing","data-testid","p","display","sx","backgroundColor","theme","palette","primary","main","direction","marginLeft","severity","padding","onClick","disabled","width","alignItems","FallbackComponent","mode","background","default","paper","whiteSpace","paddingY"],"mappings":"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"}
+{"version":3,"sources":["../../../src/components/DashboardToolbar/DashboardToolbar.tsx"],"sourcesContent":["// Copyright 2023 The Perses Authors\n// Licensed under the Apache License, Version 2.0 (the \"License\");\n// you may not use this file except in compliance with the License.\n// You may obtain a copy of the License at\n//\n// http://www.apache.org/licenses/LICENSE-2.0\n//\n// Unless required by applicable law or agreed to in writing, software\n// distributed under the License is distributed on an \"AS IS\" BASIS,\n// WITHOUT WARRANTIES OR CONDITIONS OF ANY KIND, either express or implied.\n// See the License for the specific language governing permissions and\n// limitations under the License.\n\nimport { Typography, Stack, Button, Box, useTheme, useMediaQuery, Alert } from '@mui/material';\nimport { ErrorBoundary, ErrorAlert } from '@perses-dev/components';\nimport { OnSaveDashboard, useEditMode } from '../../context';\nimport { AddPanelButton } from '../AddPanelButton';\nimport { AddGroupButton } from '../AddGroupButton';\nimport { DownloadButton } from '../DownloadButton';\nimport { TimeRangeControls } from '../TimeRangeControls';\nimport { EditVariablesButton } from '../Variables';\nimport { EditButton } from '../EditButton';\nimport { EditJsonButton } from '../EditJsonButton';\nimport { SaveDashboardButton } from '../SaveDashboardButton';\nimport { DashboardStickyToolbar } from '../DashboardStickyToolbar';\n\nexport interface DashboardToolbarProps {\n  dashboardName: string;\n  dashboardTitleComponent?: JSX.Element;\n  initialVariableIsSticky?: boolean;\n  isReadonly: boolean;\n  onEditButtonClick: () => void;\n  onCancelButtonClick: () => void;\n  onSave?: OnSaveDashboard;\n}\n\nexport const DashboardToolbar = (props: DashboardToolbarProps) => {\n  const {\n    dashboardName,\n    dashboardTitleComponent,\n    initialVariableIsSticky,\n    isReadonly,\n    onEditButtonClick,\n    onCancelButtonClick,\n    onSave,\n  } = props;\n\n  const { isEditMode } = useEditMode();\n\n  const isBiggerThanMd = useMediaQuery(useTheme().breakpoints.up('md'));\n  const isBiggerThanSm = useMediaQuery(useTheme().breakpoints.up('sm'));\n\n  const dashboardTitle = dashboardTitleComponent ? (\n    dashboardTitleComponent\n  ) : (\n    <Typography variant=\"h2\">{dashboardName}</Typography>\n  );\n\n  const testId = 'dashboard-toolbar';\n\n  return (\n    <>\n      {isEditMode ? (\n        <Stack spacing={1} data-testid={testId}>\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              <SaveDashboardButton onSave={onSave} isDisabled={isReadonly} />\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: 'start',\n              padding: (theme) => theme.spacing(1, 2, 2, 2),\n            }}\n          >\n            <ErrorBoundary FallbackComponent={ErrorAlert}>\n              <DashboardStickyToolbar\n                initialVariableIsSticky={initialVariableIsSticky}\n                sx={{\n                  backgroundColor: ({ palette }) =>\n                    palette.mode === 'dark' ? palette.background.default : palette.background.paper,\n                }}\n              />\n            </ErrorBoundary>\n            {isBiggerThanMd ? (\n              // On bigger screens, make it one row\n              <Stack direction=\"row\" spacing={1} marginLeft=\"auto\" sx={{ whiteSpace: 'nowrap' }}>\n                <EditVariablesButton />\n                <AddPanelButton />\n                <AddGroupButton />\n                <TimeRangeControls />\n                <DownloadButton />\n                <EditJsonButton />\n              </Stack>\n            ) : (\n              // On smaller screens, make it two rows\n              <Stack spacing={1}>\n                <Stack direction=\"row\" spacing={1} marginLeft=\"auto\" sx={{ whiteSpace: 'nowrap' }}>\n                  <TimeRangeControls />\n                  <DownloadButton />\n                  <EditJsonButton />\n                </Stack>\n                <Stack direction=\"row\" spacing={1} marginLeft=\"auto\" sx={{ whiteSpace: 'nowrap' }}>\n                  <EditVariablesButton />\n                  <AddPanelButton />\n                  <AddGroupButton />\n                </Stack>\n              </Stack>\n            )}\n          </Box>\n        </Stack>\n      ) : (\n        <Stack spacing={1} padding={2} data-testid={testId}>\n          <Box sx={{ display: 'flex', width: '100%' }}>\n            {dashboardTitle}\n            <Stack direction=\"row\" spacing={1} marginLeft=\"auto\">\n              <TimeRangeControls />\n              <DownloadButton />\n              {isBiggerThanSm && <EditButton onClick={onEditButtonClick} />}\n            </Stack>\n          </Box>\n          <Box paddingY={2}>\n            <ErrorBoundary FallbackComponent={ErrorAlert}>\n              <DashboardStickyToolbar\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","ErrorBoundary","ErrorAlert","useEditMode","AddPanelButton","AddGroupButton","DownloadButton","TimeRangeControls","EditVariablesButton","EditButton","EditJsonButton","SaveDashboardButton","DashboardStickyToolbar","DashboardToolbar","props","dashboardName","dashboardTitleComponent","initialVariableIsSticky","isReadonly","onEditButtonClick","onCancelButtonClick","onSave","isEditMode","isBiggerThanMd","breakpoints","up","isBiggerThanSm","dashboardTitle","variant","testId","spacing","data-testid","p","display","sx","backgroundColor","theme","palette","primary","main","direction","marginLeft","severity","padding","isDisabled","onClick","width","alignItems","FallbackComponent","mode","background","default","paper","whiteSpace","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,EAAEC,KAAK,QAAQ,eAAe,CAAC;AAC/F,SAASC,aAAa,EAAEC,UAAU,QAAQ,wBAAwB,CAAC;AACnE,SAA0BC,WAAW,QAAQ,eAAe,CAAC;AAC7D,SAASC,cAAc,QAAQ,mBAAmB,CAAC;AACnD,SAASC,cAAc,QAAQ,mBAAmB,CAAC;AACnD,SAASC,cAAc,QAAQ,mBAAmB,CAAC;AACnD,SAASC,iBAAiB,QAAQ,sBAAsB,CAAC;AACzD,SAASC,mBAAmB,QAAQ,cAAc,CAAC;AACnD,SAASC,UAAU,QAAQ,eAAe,CAAC;AAC3C,SAASC,cAAc,QAAQ,mBAAmB,CAAC;AACnD,SAASC,mBAAmB,QAAQ,wBAAwB,CAAC;AAC7D,SAASC,sBAAsB,QAAQ,2BAA2B,CAAC;AAYnE,OAAO,MAAMC,gBAAgB,GAAG,CAACC,KAA4B,GAAK;IAChE,MAAM,EACJC,aAAa,CAAA,EACbC,uBAAuB,CAAA,EACvBC,uBAAuB,CAAA,EACvBC,UAAU,CAAA,EACVC,iBAAiB,CAAA,EACjBC,mBAAmB,CAAA,EACnBC,MAAM,CAAA,IACP,GAAGP,KAAK,AAAC;IAEV,MAAM,EAAEQ,UAAU,CAAA,EAAE,GAAGnB,WAAW,EAAE,AAAC;IAErC,MAAMoB,cAAc,GAAGxB,aAAa,CAACD,QAAQ,EAAE,CAAC0B,WAAW,CAACC,EAAE,CAAC,IAAI,CAAC,CAAC,AAAC;IACtE,MAAMC,cAAc,GAAG3B,aAAa,CAACD,QAAQ,EAAE,CAAC0B,WAAW,CAACC,EAAE,CAAC,IAAI,CAAC,CAAC,AAAC;IAEtE,MAAME,cAAc,GAAGX,uBAAuB,GAC5CA,uBAAuB,iBAEvB,KAACtB,UAAU;QAACkC,OAAO,EAAC,IAAI;kBAAEb,aAAa;MAAc,AACtD,AAAC;IAEF,MAAMc,MAAM,GAAG,mBAAmB,AAAC;IAEnC,qBACE;kBACGP,UAAU,iBACT,MAAC3B,KAAK;YAACmC,OAAO,EAAE,CAAC;YAAEC,aAAW,EAAEF,MAAM;;8BACpC,MAAChC,GAAG;oBAACmC,CAAC,EAAE,CAAC;oBAAEC,OAAO,EAAC,MAAM;oBAACC,EAAE,EAAE;wBAAEC,eAAe,EAAE,CAACC,KAAK,GAAKA,KAAK,CAACC,OAAO,CAACC,OAAO,CAACC,IAAI,GAAG,IAAI;qBAAE;;wBAC5FZ,cAAc;sCACf,MAAChC,KAAK;4BAAC6C,SAAS,EAAC,KAAK;4BAACV,OAAO,EAAE,CAAC;4BAAEW,UAAU,EAAC,MAAM;;gCACjDvB,UAAU,kBACT,KAAClB,KAAK;oCAAC0C,QAAQ,EAAE,SAAS;oCAAER,EAAE,EAAE;wCAAEC,eAAe,EAAE,aAAa;wCAAEQ,OAAO,EAAE,CAAC;qCAAE;8CAAE,4EAEhF;kCAAQ,AACT;8CACD,KAAChC,mBAAmB;oCAACU,MAAM,EAAEA,MAAM;oCAAEuB,UAAU,EAAE1B,UAAU;kCAAI;8CAC/D,KAACtB,MAAM;oCAACgC,OAAO,EAAC,UAAU;oCAACiB,OAAO,EAAEzB,mBAAmB;8CAAE,QAEzD;kCAAS;;0BACH;;kBACJ;8BACN,MAACvB,GAAG;oBACFqC,EAAE,EAAE;wBACFD,OAAO,EAAE,MAAM;wBACfa,KAAK,EAAE,MAAM;wBACbC,UAAU,EAAE,OAAO;wBACnBJ,OAAO,EAAE,CAACP,KAAK,GAAKA,KAAK,CAACN,OAAO,CAAC,CAAC,EAAE,CAAC,EAAE,CAAC,EAAE,CAAC,CAAC;qBAC9C;;sCAED,KAAC7B,aAAa;4BAAC+C,iBAAiB,EAAE9C,UAAU;sCAC1C,cAAA,KAACU,sBAAsB;gCACrBK,uBAAuB,EAAEA,uBAAuB;gCAChDiB,EAAE,EAAE;oCACFC,eAAe,EAAE,CAAC,EAAEE,OAAO,CAAA,EAAE,GAC3BA,OAAO,CAACY,IAAI,KAAK,MAAM,GAAGZ,OAAO,CAACa,UAAU,CAACC,OAAO,GAAGd,OAAO,CAACa,UAAU,CAACE,KAAK;iCAClF;8BACD;0BACY;wBACf7B,cAAc,GACb,qCAAqC;sCACrC,MAAC5B,KAAK;4BAAC6C,SAAS,EAAC,KAAK;4BAACV,OAAO,EAAE,CAAC;4BAAEW,UAAU,EAAC,MAAM;4BAACP,EAAE,EAAE;gCAAEmB,UAAU,EAAE,QAAQ;6BAAE;;8CAC/E,KAAC7C,mBAAmB,KAAG;8CACvB,KAACJ,cAAc,KAAG;8CAClB,KAACC,cAAc,KAAG;8CAClB,KAACE,iBAAiB,KAAG;8CACrB,KAACD,cAAc,KAAG;8CAClB,KAACI,cAAc,KAAG;;0BACZ,GAER,uCAAuC;sCACvC,MAACf,KAAK;4BAACmC,OAAO,EAAE,CAAC;;8CACf,MAACnC,KAAK;oCAAC6C,SAAS,EAAC,KAAK;oCAACV,OAAO,EAAE,CAAC;oCAAEW,UAAU,EAAC,MAAM;oCAACP,EAAE,EAAE;wCAAEmB,UAAU,EAAE,QAAQ;qCAAE;;sDAC/E,KAAC9C,iBAAiB,KAAG;sDACrB,KAACD,cAAc,KAAG;sDAClB,KAACI,cAAc,KAAG;;kCACZ;8CACR,MAACf,KAAK;oCAAC6C,SAAS,EAAC,KAAK;oCAACV,OAAO,EAAE,CAAC;oCAAEW,UAAU,EAAC,MAAM;oCAACP,EAAE,EAAE;wCAAEmB,UAAU,EAAE,QAAQ;qCAAE;;sDAC/E,KAAC7C,mBAAmB,KAAG;sDACvB,KAACJ,cAAc,KAAG;sDAClB,KAACC,cAAc,KAAG;;kCACZ;;0BACF,AACT;;kBACG;;UACA,iBAER,MAACV,KAAK;YAACmC,OAAO,EAAE,CAAC;YAAEa,OAAO,EAAE,CAAC;YAAEZ,aAAW,EAAEF,MAAM;;8BAChD,MAAChC,GAAG;oBAACqC,EAAE,EAAE;wBAAED,OAAO,EAAE,MAAM;wBAAEa,KAAK,EAAE,MAAM;qBAAE;;wBACxCnB,cAAc;sCACf,MAAChC,KAAK;4BAAC6C,SAAS,EAAC,KAAK;4BAACV,OAAO,EAAE,CAAC;4BAAEW,UAAU,EAAC,MAAM;;8CAClD,KAAClC,iBAAiB,KAAG;8CACrB,KAACD,cAAc,KAAG;gCACjBoB,cAAc,kBAAI,KAACjB,UAAU;oCAACoC,OAAO,EAAE1B,iBAAiB;kCAAI;;0BACvD;;kBACJ;8BACN,KAACtB,GAAG;oBAACyD,QAAQ,EAAE,CAAC;8BACd,cAAA,KAACrD,aAAa;wBAAC+C,iBAAiB,EAAE9C,UAAU;kCAC1C,cAAA,KAACU,sBAAsB;4BACrBK,uBAAuB,EAAEA,uBAAuB;4BAChDiB,EAAE,EAAE;gCACFC,eAAe,EAAE,CAAC,EAAEE,OAAO,CAAA,EAAE,GAC3BA,OAAO,CAACY,IAAI,KAAK,MAAM,GAAGZ,OAAO,CAACa,UAAU,CAACC,OAAO,GAAGd,OAAO,CAACa,UAAU,CAACE,KAAK;6BAClF;0BACD;sBACY;kBACZ;;UACA,AACT;MACA,CACH;AACJ,CAAC,CAAC"}

package/dist/components/EditJsonButton/EditJsonButton.js

@@ -21,6 +21,7 @@ export const EditJsonButton = ()=>{
     return /*#__PURE__*/ _jsx(InfoTooltip, {
         description: TOOLTIP_TEXT.editJson,
         children: /*#__PURE__*/ _jsx(ToolbarIconButton, {
+            "aria-label": TOOLTIP_TEXT.editJson,
             variant: "outlined",
             onClick: ()=>openEditJsonDialog(),
             children: /*#__PURE__*/ _jsx(CodeIcon, {})

package/dist/components/EditJsonButton/EditJsonButton.js.map

@@ -1 +1 @@
-{"version":3,"sources":["../../../src/components/EditJsonButton/EditJsonButton.tsx"],"sourcesContent":["// Copyright 2023 The Perses Authors\n// Licensed under the Apache License, Version 2.0 (the \"License\");\n// you may not use this file except in compliance with the License.\n// You may obtain a copy of the License at\n//\n// http://www.apache.org/licenses/LICENSE-2.0\n//\n// Unless required by applicable law or agreed to in writing, software\n// distributed under the License is distributed on an \"AS IS\" BASIS,\n// WITHOUT WARRANTIES OR CONDITIONS OF ANY KIND, either express or implied.\n// See the License for the specific language governing permissions and\n// limitations under the License.\n\nimport CodeIcon from 'mdi-material-ui/CodeBraces';\nimport { InfoTooltip } from '@perses-dev/components';\nimport { TOOLTIP_TEXT } from '../../constants';\nimport { ToolbarIconButton } from '../ToolbarIconButton';\nimport { useEditJsonDialog } from '../../context';\n\nexport const EditJsonButton = () => {\n  const { openEditJsonDialog } = useEditJsonDialog();\n  return (\n    <InfoTooltip description={TOOLTIP_TEXT.editJson}>\n      <ToolbarIconButton variant=\"outlined\" onClick={() => openEditJsonDialog()}>\n        <CodeIcon />\n      </ToolbarIconButton>\n    </InfoTooltip>\n  );\n};\n"],"names":["CodeIcon","InfoTooltip","TOOLTIP_TEXT","ToolbarIconButton","useEditJsonDialog","EditJsonButton","openEditJsonDialog","description","editJson","variant","onClick"],"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,QAAQ,MAAM,4BAA4B,CAAC;AAClD,SAASC,WAAW,QAAQ,wBAAwB,CAAC;AACrD,SAASC,YAAY,QAAQ,iBAAiB,CAAC;AAC/C,SAASC,iBAAiB,QAAQ,sBAAsB,CAAC;AACzD,SAASC,iBAAiB,QAAQ,eAAe,CAAC;AAElD,OAAO,MAAMC,cAAc,GAAG,IAAM;IAClC,MAAM,EAAEC,kBAAkB,CAAA,EAAE,GAAGF,iBAAiB,EAAE,AAAC;IACnD,qBACE,KAACH,WAAW;QAACM,WAAW,EAAEL,YAAY,CAACM,QAAQ;kBAC7C,cAAA,KAACL,iBAAiB;YAACM,OAAO,EAAC,UAAU;YAACC,OAAO,EAAE,IAAMJ,kBAAkB,EAAE;sBACvE,cAAA,KAACN,QAAQ,KAAG;UACM;MACR,CACd;AACJ,CAAC,CAAC"}
+{"version":3,"sources":["../../../src/components/EditJsonButton/EditJsonButton.tsx"],"sourcesContent":["// Copyright 2023 The Perses Authors\n// Licensed under the Apache License, Version 2.0 (the \"License\");\n// you may not use this file except in compliance with the License.\n// You may obtain a copy of the License at\n//\n// http://www.apache.org/licenses/LICENSE-2.0\n//\n// Unless required by applicable law or agreed to in writing, software\n// distributed under the License is distributed on an \"AS IS\" BASIS,\n// WITHOUT WARRANTIES OR CONDITIONS OF ANY KIND, either express or implied.\n// See the License for the specific language governing permissions and\n// limitations under the License.\n\nimport CodeIcon from 'mdi-material-ui/CodeBraces';\nimport { InfoTooltip } from '@perses-dev/components';\nimport { TOOLTIP_TEXT } from '../../constants';\nimport { ToolbarIconButton } from '../ToolbarIconButton';\nimport { useEditJsonDialog } from '../../context';\n\nexport const EditJsonButton = () => {\n  const { openEditJsonDialog } = useEditJsonDialog();\n  return (\n    <InfoTooltip description={TOOLTIP_TEXT.editJson}>\n      <ToolbarIconButton aria-label={TOOLTIP_TEXT.editJson} variant=\"outlined\" onClick={() => openEditJsonDialog()}>\n        <CodeIcon />\n      </ToolbarIconButton>\n    </InfoTooltip>\n  );\n};\n"],"names":["CodeIcon","InfoTooltip","TOOLTIP_TEXT","ToolbarIconButton","useEditJsonDialog","EditJsonButton","openEditJsonDialog","description","editJson","aria-label","variant","onClick"],"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,QAAQ,MAAM,4BAA4B,CAAC;AAClD,SAASC,WAAW,QAAQ,wBAAwB,CAAC;AACrD,SAASC,YAAY,QAAQ,iBAAiB,CAAC;AAC/C,SAASC,iBAAiB,QAAQ,sBAAsB,CAAC;AACzD,SAASC,iBAAiB,QAAQ,eAAe,CAAC;AAElD,OAAO,MAAMC,cAAc,GAAG,IAAM;IAClC,MAAM,EAAEC,kBAAkB,CAAA,EAAE,GAAGF,iBAAiB,EAAE,AAAC;IACnD,qBACE,KAACH,WAAW;QAACM,WAAW,EAAEL,YAAY,CAACM,QAAQ;kBAC7C,cAAA,KAACL,iBAAiB;YAACM,YAAU,EAAEP,YAAY,CAACM,QAAQ;YAAEE,OAAO,EAAC,UAAU;YAACC,OAAO,EAAE,IAAML,kBAAkB,EAAE;sBAC1G,cAAA,KAACN,QAAQ,KAAG;UACM;MACR,CACd;AACJ,CAAC,CAAC"}

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

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

package/dist/components/EditJsonDialog/EditJsonDialog.js

@@ -14,6 +14,7 @@ import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
 import { useState } from 'react';
 import { Alert, FormControl } from '@mui/material';
 import { Dialog, JSONEditor } from '@perses-dev/components';
+import { useTimeRange } from '@perses-dev/plugin-system';
 import { useEditJsonDialog } from '../../context/DashboardProvider';
 import { useDashboard } from '../../context/useDashboard';
 export const EditJsonDialog = ()=>{
@@ -34,11 +35,15 @@ export const EditJsonDialog = ()=>{
 };
 const EditJsonDialogForm = ()=>{
     const { closeEditJsonDialog  } = useEditJsonDialog();
+    const { setTimeRange  } = useTimeRange();
     const { dashboard , setDashboard  } = useDashboard();
     const [draftDashboard, setDraftDashboard] = useState(dashboard);
     const handleApply = (e)=>{
         e.preventDefault();
         setDashboard(draftDashboard);
+        setTimeRange({
+            pastDuration: draftDashboard.spec.duration
+        });
         closeEditJsonDialog();
     };
     return /*#__PURE__*/ _jsxs(Dialog.Form, {

package/dist/components/EditJsonDialog/EditJsonDialog.js.map

@@ -1 +1 @@
-{"version":3,"sources":["../../../src/components/EditJsonDialog/EditJsonDialog.tsx"],"sourcesContent":["// Copyright 2023 The Perses Authors\n// Licensed under the Apache License, Version 2.0 (the \"License\");\n// you may not use this file except in compliance with the License.\n// You may obtain a copy of the License at\n//\n// http://www.apache.org/licenses/LICENSE-2.0\n//\n// Unless required by applicable law or agreed to in writing, software\n// distributed under the License is distributed on an \"AS IS\" BASIS,\n// WITHOUT WARRANTIES OR CONDITIONS OF ANY KIND, either express or implied.\n// See the License for the specific language governing permissions and\n// limitations under the License.\n\nimport { FormEvent, useState } from 'react';\nimport { Alert, FormControl } from '@mui/material';\nimport { Dialog, JSONEditor } from '@perses-dev/components';\nimport { useEditJsonDialog } from '../../context/DashboardProvider';\nimport { useDashboard } from '../../context/useDashboard';\n\nexport const EditJsonDialog = () => {\n  const { editJsonDialog, closeEditJsonDialog } = useEditJsonDialog();\n\n  return (\n    <Dialog open={!!editJsonDialog?.isOpen} scroll=\"paper\" fullWidth maxWidth=\"lg\">\n      <Dialog.Header onClose={() => closeEditJsonDialog()}>Edit Dashboard</Dialog.Header>\n      {editJsonDialog?.isOpen && <EditJsonDialogForm />}\n    </Dialog>\n  );\n};\n\nconst EditJsonDialogForm = () => {\n  const { closeEditJsonDialog } = useEditJsonDialog();\n  const { dashboard, setDashboard } = useDashboard();\n  const [draftDashboard, setDraftDashboard] = useState(dashboard);\n\n  const handleApply = (e: FormEvent) => {\n    e.preventDefault();\n    setDashboard(draftDashboard);\n    closeEditJsonDialog();\n  };\n\n  return (\n    <Dialog.Form onSubmit={handleApply}>\n      <Dialog.Content sx={{ width: '100%' }}>\n        <Alert sx={{ marginBottom: (theme) => theme.spacing(1) }} severity=\"warning\">\n          Metadata cannot be modified or saved.\n        </Alert>\n        <FormControl fullWidth>\n          <JSONEditor\n            minHeight=\"300px\"\n            maxHeight=\"700px\"\n            value={draftDashboard}\n            onChange={(value) => setDraftDashboard(value)}\n          />\n        </FormControl>\n      </Dialog.Content>\n      <Dialog.Actions>\n        <Dialog.PrimaryButton onClick={handleApply}>Apply</Dialog.PrimaryButton>\n      </Dialog.Actions>\n    </Dialog.Form>\n  );\n};\n"],"names":["useState","Alert","FormControl","Dialog","JSONEditor","useEditJsonDialog","useDashboard","EditJsonDialog","editJsonDialog","closeEditJsonDialog","open","isOpen","scroll","fullWidth","maxWidth","Header","onClose","EditJsonDialogForm","dashboard","setDashboard","draftDashboard","setDraftDashboard","handleApply","e","preventDefault","Form","onSubmit","Content","sx","width","marginBottom","theme","spacing","severity","minHeight","maxHeight","value","onChange","Actions","PrimaryButton","onClick"],"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,SAAoBA,QAAQ,QAAQ,OAAO,CAAC;AAC5C,SAASC,KAAK,EAAEC,WAAW,QAAQ,eAAe,CAAC;AACnD,SAASC,MAAM,EAAEC,UAAU,QAAQ,wBAAwB,CAAC;AAC5D,SAASC,iBAAiB,QAAQ,iCAAiC,CAAC;AACpE,SAASC,YAAY,QAAQ,4BAA4B,CAAC;AAE1D,OAAO,MAAMC,cAAc,GAAG,IAAM;IAClC,MAAM,EAAEC,cAAc,CAAA,EAAEC,mBAAmB,CAAA,EAAE,GAAGJ,iBAAiB,EAAE,AAAC;IAEpE,qBACE,MAACF,MAAM;QAACO,IAAI,EAAE,CAAC,CAACF,CAAAA,cAAc,aAAdA,cAAc,WAAQ,GAAtBA,KAAAA,CAAsB,GAAtBA,cAAc,CAAEG,MAAM,CAAA;QAAEC,MAAM,EAAC,OAAO;QAACC,SAAS;QAACC,QAAQ,EAAC,IAAI;;0BAC5E,KAACX,MAAM,CAACY,MAAM;gBAACC,OAAO,EAAE,IAAMP,mBAAmB,EAAE;0BAAE,gBAAc;cAAgB;YAClFD,CAAAA,cAAc,aAAdA,cAAc,WAAQ,GAAtBA,KAAAA,CAAsB,GAAtBA,cAAc,CAAEG,MAAM,CAAA,kBAAI,KAACM,kBAAkB,KAAG;;MAC1C,CACT;AACJ,CAAC,CAAC;AAEF,MAAMA,kBAAkB,GAAG,IAAM;IAC/B,MAAM,EAAER,mBAAmB,CAAA,EAAE,GAAGJ,iBAAiB,EAAE,AAAC;IACpD,MAAM,EAAEa,SAAS,CAAA,EAAEC,YAAY,CAAA,EAAE,GAAGb,YAAY,EAAE,AAAC;IACnD,MAAM,CAACc,cAAc,EAAEC,iBAAiB,CAAC,GAAGrB,QAAQ,CAACkB,SAAS,CAAC,AAAC;IAEhE,MAAMI,WAAW,GAAG,CAACC,CAAY,GAAK;QACpCA,CAAC,CAACC,cAAc,EAAE,CAAC;QACnBL,YAAY,CAACC,cAAc,CAAC,CAAC;QAC7BX,mBAAmB,EAAE,CAAC;IACxB,CAAC,AAAC;IAEF,qBACE,MAACN,MAAM,CAACsB,IAAI;QAACC,QAAQ,EAAEJ,WAAW;;0BAChC,MAACnB,MAAM,CAACwB,OAAO;gBAACC,EAAE,EAAE;oBAAEC,KAAK,EAAE,MAAM;iBAAE;;kCACnC,KAAC5B,KAAK;wBAAC2B,EAAE,EAAE;4BAAEE,YAAY,EAAE,CAACC,KAAK,GAAKA,KAAK,CAACC,OAAO,CAAC,CAAC,CAAC;yBAAE;wBAAEC,QAAQ,EAAC,SAAS;kCAAC,uCAE7E;sBAAQ;kCACR,KAAC/B,WAAW;wBAACW,SAAS;kCACpB,cAAA,KAACT,UAAU;4BACT8B,SAAS,EAAC,OAAO;4BACjBC,SAAS,EAAC,OAAO;4BACjBC,KAAK,EAAEhB,cAAc;4BACrBiB,QAAQ,EAAE,CAACD,KAAK,GAAKf,iBAAiB,CAACe,KAAK,CAAC;0BAC7C;sBACU;;cACC;0BACjB,KAACjC,MAAM,CAACmC,OAAO;0BACb,cAAA,KAACnC,MAAM,CAACoC,aAAa;oBAACC,OAAO,EAAElB,WAAW;8BAAE,OAAK;kBAAuB;cACzD;;MACL,CACd;AACJ,CAAC,AAAC"}
+{"version":3,"sources":["../../../src/components/EditJsonDialog/EditJsonDialog.tsx"],"sourcesContent":["// Copyright 2023 The Perses Authors\n// Licensed under the Apache License, Version 2.0 (the \"License\");\n// you may not use this file except in compliance with the License.\n// You may obtain a copy of the License at\n//\n// http://www.apache.org/licenses/LICENSE-2.0\n//\n// Unless required by applicable law or agreed to in writing, software\n// distributed under the License is distributed on an \"AS IS\" BASIS,\n// WITHOUT WARRANTIES OR CONDITIONS OF ANY KIND, either express or implied.\n// See the License for the specific language governing permissions and\n// limitations under the License.\n\nimport { FormEvent, useState } from 'react';\nimport { Alert, FormControl } from '@mui/material';\nimport { Dialog, JSONEditor } from '@perses-dev/components';\nimport { useTimeRange } from '@perses-dev/plugin-system';\nimport { useEditJsonDialog } from '../../context/DashboardProvider';\nimport { useDashboard } from '../../context/useDashboard';\n\nexport const EditJsonDialog = () => {\n  const { editJsonDialog, closeEditJsonDialog } = useEditJsonDialog();\n\n  return (\n    <Dialog open={!!editJsonDialog?.isOpen} scroll=\"paper\" fullWidth maxWidth=\"lg\">\n      <Dialog.Header onClose={() => closeEditJsonDialog()}>Edit Dashboard</Dialog.Header>\n      {editJsonDialog?.isOpen && <EditJsonDialogForm />}\n    </Dialog>\n  );\n};\n\nconst EditJsonDialogForm = () => {\n  const { closeEditJsonDialog } = useEditJsonDialog();\n  const { setTimeRange } = useTimeRange();\n  const { dashboard, setDashboard } = useDashboard();\n  const [draftDashboard, setDraftDashboard] = useState(dashboard);\n\n  const handleApply = (e: FormEvent) => {\n    e.preventDefault();\n    setDashboard(draftDashboard);\n    setTimeRange({ pastDuration: draftDashboard.spec.duration });\n    closeEditJsonDialog();\n  };\n\n  return (\n    <Dialog.Form onSubmit={handleApply}>\n      <Dialog.Content sx={{ width: '100%' }}>\n        <Alert sx={{ marginBottom: (theme) => theme.spacing(1) }} severity=\"warning\">\n          Metadata cannot be modified or saved.\n        </Alert>\n        <FormControl fullWidth>\n          <JSONEditor\n            minHeight=\"300px\"\n            maxHeight=\"700px\"\n            value={draftDashboard}\n            onChange={(value) => setDraftDashboard(value)}\n          />\n        </FormControl>\n      </Dialog.Content>\n      <Dialog.Actions>\n        <Dialog.PrimaryButton onClick={handleApply}>Apply</Dialog.PrimaryButton>\n      </Dialog.Actions>\n    </Dialog.Form>\n  );\n};\n"],"names":["useState","Alert","FormControl","Dialog","JSONEditor","useTimeRange","useEditJsonDialog","useDashboard","EditJsonDialog","editJsonDialog","closeEditJsonDialog","open","isOpen","scroll","fullWidth","maxWidth","Header","onClose","EditJsonDialogForm","setTimeRange","dashboard","setDashboard","draftDashboard","setDraftDashboard","handleApply","e","preventDefault","pastDuration","spec","duration","Form","onSubmit","Content","sx","width","marginBottom","theme","spacing","severity","minHeight","maxHeight","value","onChange","Actions","PrimaryButton","onClick"],"mappings":"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"}

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

@@ -2,6 +2,7 @@
 import { PanelGroupItemId } from '../../context';
 export interface GridItemContentProps {
     panelGroupItemId: PanelGroupItemId;
+    width: number;
 }
 /**
  * Resolves the reference to panel content in a GridItemDefinition and renders the panel.

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

@@ -1 +1 @@
-{"version":3,"file":"GridItemContent.d.ts","sourceRoot":"","sources":["../../../src/components/GridLayout/GridItemContent.tsx"],"names":[],"mappings":";AAaA,OAAO,EAAE,gBAAgB,EAA0C,MAAM,eAAe,CAAC;AAGzF,MAAM,WAAW,oBAAoB;IACnC,gBAAgB,EAAE,gBAAgB,CAAC;CACpC;AAED;;GAEG;AACH,wBAAgB,eAAe,CAAC,KAAK,EAAE,oBAAoB,eAiB1D"}
+{"version":3,"file":"GridItemContent.d.ts","sourceRoot":"","sources":["../../../src/components/GridLayout/GridItemContent.tsx"],"names":[],"mappings":";AAeA,OAAO,EAAE,gBAAgB,EAA0C,MAAM,eAAe,CAAC;AAIzF,MAAM,WAAW,oBAAoB;IACnC,gBAAgB,EAAE,gBAAgB,CAAC;IACnC,KAAK,EAAE,MAAM,CAAC;CACf;AAED;;GAEG;AACH,wBAAgB,eAAe,CAAC,KAAK,EAAE,oBAAoB,eAkC1D"}

package/dist/components/GridLayout/GridItemContent.js

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

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

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

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

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

package/dist/components/GridLayout/GridLayout.js

@@ -20,6 +20,7 @@ import { GRID_LAYOUT_COLS, GRID_LAYOUT_SMALL_BREAKPOINT } from '../../constants'
 import { GridTitle } from './GridTitle';
 import { GridItemContent } from './GridItemContent';
 import { GridContainer } from './GridContainer';
+const DEFAULT_MARGIN = 10;
 const ResponsiveGridLayout = WidthProvider(Responsive);
 /**
  * Layout component that arranges children in a Grid based on the definition.
@@ -31,6 +32,7 @@ const ResponsiveGridLayout = WidthProvider(Responsive);
     var ref;
     const [isOpen, setIsOpen] = useState((ref = !groupDefinition.isCollapsed) !== null && ref !== void 0 ? ref : true);
     const { isEditMode  } = useEditMode();
+    const [gridColWidth, setGridColWidth] = useState(0);
     const handleLayoutChange = (currentLayout, allLayouts)=>{
         // Using the value from `allLayouts` instead of `currentLayout` because of
         // a bug in react-layout-grid where `currentLayout` does not adjust properly
@@ -41,6 +43,16 @@ const ResponsiveGridLayout = WidthProvider(Responsive);
             updatePanelGroupLayouts(smallLayout);
         }
     };
+    /**
+   * Calculate the column width so we can determine the width of each panel for suggested step ms
+   * https://github.com/react-grid-layout/react-grid-layout/blob/master/lib/calculateUtils.js#L14-L35
+   */ const handleWidthChange = (containerWidth, margin, cols, containerPadding)=>{
+        const marginX = margin[0];
+        const marginWidth = marginX * (cols - 1);
+        const containerPaddingWidth = containerPadding[0] * 2;
+        // exclude margin and padding from total width
+        setGridColWidth((containerWidth - marginWidth - containerPaddingWidth) / cols);
+    };
     return /*#__PURE__*/ _jsxs(GridContainer, {
         children: [
             groupDefinition.title !== undefined && /*#__PURE__*/ _jsx(GridTitle, {
@@ -70,6 +82,10 @@ const ResponsiveGridLayout = WidthProvider(Responsive);
                     ],
                     isDraggable: isEditMode,
                     isResizable: isEditMode,
+                    margin: [
+                        DEFAULT_MARGIN,
+                        DEFAULT_MARGIN
+                    ],
                     containerPadding: [
                         0,
                         10
@@ -78,14 +94,16 @@ const ResponsiveGridLayout = WidthProvider(Responsive);
                         [GRID_LAYOUT_SMALL_BREAKPOINT]: groupDefinition.itemLayouts
                     },
                     onLayoutChange: handleLayoutChange,
-                    children: groupDefinition.itemLayouts.map(({ i  })=>/*#__PURE__*/ _jsx("div", {
+                    onWidthChange: handleWidthChange,
+                    children: groupDefinition.itemLayouts.map(({ i , w  })=>/*#__PURE__*/ _jsx("div", {
                             children: /*#__PURE__*/ _jsx(ErrorBoundary, {
                                 FallbackComponent: ErrorAlert,
                                 children: /*#__PURE__*/ _jsx(GridItemContent, {
                                     panelGroupItemId: {
                                         panelGroupId,
                                         panelGroupItemLayoutId: i
-                                    }
+                                    },
+                                    width: calculateGridItemWidth(w, gridColWidth)
                                 })
                             })
                         }, i))
@@ -94,5 +112,16 @@ const ResponsiveGridLayout = WidthProvider(Responsive);
         ]
     });
 }
+/**
+ * Calculates grid item width
+ * @param w number of columns the grid item spans
+ * @param colWidth the width of each column in px
+ * @returns grid item's width in px
+ * https://github.com/react-grid-layout/react-grid-layout/blob/master/lib/calculateUtils.js#L14-L35
+ */ const calculateGridItemWidth = (w, colWidth)=>{
+    // 0 * Infinity === NaN, which causes problems with resize contraints
+    if (!Number.isFinite(w)) return w;
+    return Math.round(colWidth * w + Math.max(0, w - 1) * DEFAULT_MARGIN);
+};
 
 //# sourceMappingURL=GridLayout.js.map

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

@@ -1 +1 @@
-{"version":3,"sources":["../../../src/components/GridLayout/GridLayout.tsx"],"sourcesContent":["// Copyright 2023 The Perses Authors\n// Licensed under the Apache License, Version 2.0 (the \"License\");\n// you may not use this file except in compliance with the License.\n// You may obtain a copy of the License at\n//\n// http://www.apache.org/licenses/LICENSE-2.0\n//\n// Unless required by applicable law or agreed to in writing, software\n// distributed under the License is distributed on an \"AS IS\" BASIS,\n// WITHOUT WARRANTIES OR CONDITIONS OF ANY KIND, either express or implied.\n// See the License for the specific language governing permissions and\n// limitations under the License.\nimport { useState } from 'react';\nimport { Responsive, WidthProvider, Layouts, Layout } from 'react-grid-layout';\nimport { Collapse, useTheme } from '@mui/material';\nimport { ErrorAlert, ErrorBoundary } from '@perses-dev/components';\nimport { useEditMode, usePanelGroup, usePanelGroupActions, PanelGroupId } from '../../context';\nimport { GRID_LAYOUT_COLS, GRID_LAYOUT_SMALL_BREAKPOINT } from '../../constants';\nimport { GridTitle } from './GridTitle';\nimport { GridItemContent } from './GridItemContent';\nimport { GridContainer } from './GridContainer';\n\nconst ResponsiveGridLayout = WidthProvider(Responsive);\n\nexport interface GridLayoutProps {\n  panelGroupId: PanelGroupId;\n}\n\n/**\n * Layout component that arranges children in a Grid based on the definition.\n */\nexport function GridLayout(props: GridLayoutProps) {\n  const { panelGroupId /*...others */ } = props;\n  const theme = useTheme();\n  const groupDefinition = usePanelGroup(panelGroupId);\n  const { updatePanelGroupLayouts } = usePanelGroupActions(panelGroupId);\n\n  const [isOpen, setIsOpen] = useState(!groupDefinition.isCollapsed ?? true);\n  const { isEditMode } = useEditMode();\n\n  const handleLayoutChange = (currentLayout: Layout[], allLayouts: Layouts) => {\n    // Using the value from `allLayouts` instead of `currentLayout` because of\n    // a bug in react-layout-grid where `currentLayout` does not adjust properly\n    // when going to a smaller breakpoint and then back to a larger breakpoint.\n    // https://github.com/react-grid-layout/react-grid-layout/issues/1663\n    const smallLayout = allLayouts[GRID_LAYOUT_SMALL_BREAKPOINT];\n    if (smallLayout) {\n      updatePanelGroupLayouts(smallLayout);\n    }\n  };\n\n  return (\n    <GridContainer>\n      {groupDefinition.title !== undefined && (\n        <GridTitle\n          panelGroupId={panelGroupId}\n          title={groupDefinition.title}\n          collapse={\n            groupDefinition.isCollapsed === undefined\n              ? undefined\n              : { isOpen, onToggleOpen: () => setIsOpen((current) => !current) }\n          }\n        />\n      )}\n      <Collapse in={isOpen} unmountOnExit appear={false} data-testid=\"panel-group-content\">\n        <ResponsiveGridLayout\n          className=\"layout\"\n          breakpoints={{ sm: theme.breakpoints.values.sm, xxs: 0 }}\n          cols={GRID_LAYOUT_COLS}\n          rowHeight={30}\n          draggableHandle={'.drag-handle'}\n          resizeHandles={['se']}\n          isDraggable={isEditMode}\n          isResizable={isEditMode}\n          containerPadding={[0, 10]}\n          layouts={{ [GRID_LAYOUT_SMALL_BREAKPOINT]: groupDefinition.itemLayouts }}\n          onLayoutChange={handleLayoutChange}\n        >\n          {groupDefinition.itemLayouts.map(({ i }) => (\n            <div key={i}>\n              <ErrorBoundary FallbackComponent={ErrorAlert}>\n                <GridItemContent panelGroupItemId={{ panelGroupId, panelGroupItemLayoutId: i }} />\n              </ErrorBoundary>\n            </div>\n          ))}\n        </ResponsiveGridLayout>\n      </Collapse>\n    </GridContainer>\n  );\n}\n"],"names":["useState","Responsive","WidthProvider","Collapse","useTheme","ErrorAlert","ErrorBoundary","useEditMode","usePanelGroup","usePanelGroupActions","GRID_LAYOUT_COLS","GRID_LAYOUT_SMALL_BREAKPOINT","GridTitle","GridItemContent","GridContainer","ResponsiveGridLayout","GridLayout","props","panelGroupId","theme","groupDefinition","updatePanelGroupLayouts","isOpen","setIsOpen","isCollapsed","isEditMode","handleLayoutChange","currentLayout","allLayouts","smallLayout","title","undefined","collapse","onToggleOpen","current","in","unmountOnExit","appear","data-testid","className","breakpoints","sm","values","xxs","cols","rowHeight","draggableHandle","resizeHandles","isDraggable","isResizable","containerPadding","layouts","itemLayouts","onLayoutChange","map","i","div","FallbackComponent","panelGroupItemId","panelGroupItemLayoutId"],"mappings":"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"}
+{"version":3,"sources":["../../../src/components/GridLayout/GridLayout.tsx"],"sourcesContent":["// Copyright 2023 The Perses Authors\n// Licensed under the Apache License, Version 2.0 (the \"License\");\n// you may not use this file except in compliance with the License.\n// You may obtain a copy of the License at\n//\n// http://www.apache.org/licenses/LICENSE-2.0\n//\n// Unless required by applicable law or agreed to in writing, software\n// distributed under the License is distributed on an \"AS IS\" BASIS,\n// WITHOUT WARRANTIES OR CONDITIONS OF ANY KIND, either express or implied.\n// See the License for the specific language governing permissions and\n// limitations under the License.\nimport { useState } from 'react';\nimport { Responsive, WidthProvider, Layouts, Layout } from 'react-grid-layout';\nimport { Collapse, useTheme } from '@mui/material';\nimport { ErrorAlert, ErrorBoundary } from '@perses-dev/components';\nimport { useEditMode, usePanelGroup, usePanelGroupActions, PanelGroupId } from '../../context';\nimport { GRID_LAYOUT_COLS, GRID_LAYOUT_SMALL_BREAKPOINT } from '../../constants';\nimport { GridTitle } from './GridTitle';\nimport { GridItemContent } from './GridItemContent';\nimport { GridContainer } from './GridContainer';\n\nconst DEFAULT_MARGIN = 10;\nconst ResponsiveGridLayout = WidthProvider(Responsive);\n\nexport interface GridLayoutProps {\n  panelGroupId: PanelGroupId;\n}\n\n/**\n * Layout component that arranges children in a Grid based on the definition.\n */\nexport function GridLayout(props: GridLayoutProps) {\n  const { panelGroupId /*...others */ } = props;\n  const theme = useTheme();\n  const groupDefinition = usePanelGroup(panelGroupId);\n  const { updatePanelGroupLayouts } = usePanelGroupActions(panelGroupId);\n\n  const [isOpen, setIsOpen] = useState(!groupDefinition.isCollapsed ?? true);\n  const { isEditMode } = useEditMode();\n\n  const [gridColWidth, setGridColWidth] = useState(0);\n\n  const handleLayoutChange = (currentLayout: Layout[], allLayouts: Layouts) => {\n    // Using the value from `allLayouts` instead of `currentLayout` because of\n    // a bug in react-layout-grid where `currentLayout` does not adjust properly\n    // when going to a smaller breakpoint and then back to a larger breakpoint.\n    // https://github.com/react-grid-layout/react-grid-layout/issues/1663\n    const smallLayout = allLayouts[GRID_LAYOUT_SMALL_BREAKPOINT];\n    if (smallLayout) {\n      updatePanelGroupLayouts(smallLayout);\n    }\n  };\n\n  /**\n   * Calculate the column width so we can determine the width of each panel for suggested step ms\n   * https://github.com/react-grid-layout/react-grid-layout/blob/master/lib/calculateUtils.js#L14-L35\n   */\n  const handleWidthChange = (\n    containerWidth: number,\n    margin: [number, number],\n    cols: number,\n    containerPadding: [number, number]\n  ) => {\n    const marginX = margin[0];\n    const marginWidth = marginX * (cols - 1);\n    const containerPaddingWidth = containerPadding[0] * 2;\n    // exclude margin and padding from total width\n    setGridColWidth((containerWidth - marginWidth - containerPaddingWidth) / cols);\n  };\n\n  return (\n    <GridContainer>\n      {groupDefinition.title !== undefined && (\n        <GridTitle\n          panelGroupId={panelGroupId}\n          title={groupDefinition.title}\n          collapse={\n            groupDefinition.isCollapsed === undefined\n              ? undefined\n              : { isOpen, onToggleOpen: () => setIsOpen((current) => !current) }\n          }\n        />\n      )}\n      <Collapse in={isOpen} unmountOnExit appear={false} data-testid=\"panel-group-content\">\n        <ResponsiveGridLayout\n          className=\"layout\"\n          breakpoints={{ sm: theme.breakpoints.values.sm, xxs: 0 }}\n          cols={GRID_LAYOUT_COLS}\n          rowHeight={30}\n          draggableHandle={'.drag-handle'}\n          resizeHandles={['se']}\n          isDraggable={isEditMode}\n          isResizable={isEditMode}\n          margin={[DEFAULT_MARGIN, DEFAULT_MARGIN]}\n          containerPadding={[0, 10]}\n          layouts={{ [GRID_LAYOUT_SMALL_BREAKPOINT]: groupDefinition.itemLayouts }}\n          onLayoutChange={handleLayoutChange}\n          onWidthChange={handleWidthChange}\n        >\n          {groupDefinition.itemLayouts.map(({ i, w }) => (\n            <div key={i}>\n              <ErrorBoundary FallbackComponent={ErrorAlert}>\n                <GridItemContent\n                  panelGroupItemId={{ panelGroupId, panelGroupItemLayoutId: i }}\n                  width={calculateGridItemWidth(w, gridColWidth)}\n                />\n              </ErrorBoundary>\n            </div>\n          ))}\n        </ResponsiveGridLayout>\n      </Collapse>\n    </GridContainer>\n  );\n}\n\n/**\n * Calculates grid item width\n * @param w number of columns the grid item spans\n * @param colWidth the width of each column in px\n * @returns grid item's width in px\n * https://github.com/react-grid-layout/react-grid-layout/blob/master/lib/calculateUtils.js#L14-L35\n */\nconst calculateGridItemWidth = (w: number, colWidth: number) => {\n  // 0 * Infinity === NaN, which causes problems with resize contraints\n  if (!Number.isFinite(w)) return w;\n  return Math.round(colWidth * w + Math.max(0, w - 1) * DEFAULT_MARGIN);\n};\n"],"names":["useState","Responsive","WidthProvider","Collapse","useTheme","ErrorAlert","ErrorBoundary","useEditMode","usePanelGroup","usePanelGroupActions","GRID_LAYOUT_COLS","GRID_LAYOUT_SMALL_BREAKPOINT","GridTitle","GridItemContent","GridContainer","DEFAULT_MARGIN","ResponsiveGridLayout","GridLayout","props","panelGroupId","theme","groupDefinition","updatePanelGroupLayouts","isOpen","setIsOpen","isCollapsed","isEditMode","gridColWidth","setGridColWidth","handleLayoutChange","currentLayout","allLayouts","smallLayout","handleWidthChange","containerWidth","margin","cols","containerPadding","marginX","marginWidth","containerPaddingWidth","title","undefined","collapse","onToggleOpen","current","in","unmountOnExit","appear","data-testid","className","breakpoints","sm","values","xxs","rowHeight","draggableHandle","resizeHandles","isDraggable","isResizable","layouts","itemLayouts","onLayoutChange","onWidthChange","map","i","w","div","FallbackComponent","panelGroupItemId","panelGroupItemLayoutId","width","calculateGridItemWidth","colWidth","Number","isFinite","Math","round","max"],"mappings":"AAAA,oCAAoC;AACpC,kEAAkE;AAClE,mEAAmE;AACnE,0CAA0C;AAC1C,EAAE;AACF,6CAA6C;AAC7C,EAAE;AACF,sEAAsE;AACtE,oEAAoE;AACpE,2EAA2E;AAC3E,sEAAsE;AACtE,iCAAiC;AACjC;AAAA,SAASA,QAAQ,QAAQ,OAAO,CAAC;AACjC,SAASC,UAAU,EAAEC,aAAa,QAAyB,mBAAmB,CAAC;AAC/E,SAASC,QAAQ,EAAEC,QAAQ,QAAQ,eAAe,CAAC;AACnD,SAASC,UAAU,EAAEC,aAAa,QAAQ,wBAAwB,CAAC;AACnE,SAASC,WAAW,EAAEC,aAAa,EAAEC,oBAAoB,QAAsB,eAAe,CAAC;AAC/F,SAASC,gBAAgB,EAAEC,4BAA4B,QAAQ,iBAAiB,CAAC;AACjF,SAASC,SAAS,QAAQ,aAAa,CAAC;AACxC,SAASC,eAAe,QAAQ,mBAAmB,CAAC;AACpD,SAASC,aAAa,QAAQ,iBAAiB,CAAC;AAEhD,MAAMC,cAAc,GAAG,EAAE,AAAC;AAC1B,MAAMC,oBAAoB,GAAGd,aAAa,CAACD,UAAU,CAAC,AAAC;AAMvD;;CAEC,GACD,OAAO,SAASgB,UAAU,CAACC,KAAsB,EAAE;IACjD,MAAM,EAAEC,YAAY,CAAA,AAAC,YAAY,KAAI,GAAGD,KAAK,AAAC;IAC9C,MAAME,KAAK,GAAGhB,QAAQ,EAAE,AAAC;IACzB,MAAMiB,eAAe,GAAGb,aAAa,CAACW,YAAY,CAAC,AAAC;IACpD,MAAM,EAAEG,uBAAuB,CAAA,EAAE,GAAGb,oBAAoB,CAACU,YAAY,CAAC,AAAC;QAElC,GAA4B;IAAjE,MAAM,CAACI,MAAM,EAAEC,SAAS,CAAC,GAAGxB,QAAQ,CAAC,CAAA,GAA4B,GAA5B,CAACqB,eAAe,CAACI,WAAW,cAA5B,GAA4B,cAA5B,GAA4B,GAAI,IAAI,CAAC,AAAC;IAC3E,MAAM,EAAEC,UAAU,CAAA,EAAE,GAAGnB,WAAW,EAAE,AAAC;IAErC,MAAM,CAACoB,YAAY,EAAEC,eAAe,CAAC,GAAG5B,QAAQ,CAAC,CAAC,CAAC,AAAC;IAEpD,MAAM6B,kBAAkB,GAAG,CAACC,aAAuB,EAAEC,UAAmB,GAAK;QAC3E,0EAA0E;QAC1E,4EAA4E;QAC5E,2EAA2E;QAC3E,qEAAqE;QACrE,MAAMC,WAAW,GAAGD,UAAU,CAACpB,4BAA4B,CAAC,AAAC;QAC7D,IAAIqB,WAAW,EAAE;YACfV,uBAAuB,CAACU,WAAW,CAAC,CAAC;QACvC,CAAC;IACH,CAAC,AAAC;IAEF;;;GAGC,GACD,MAAMC,iBAAiB,GAAG,CACxBC,cAAsB,EACtBC,MAAwB,EACxBC,IAAY,EACZC,gBAAkC,GAC/B;QACH,MAAMC,OAAO,GAAGH,MAAM,CAAC,CAAC,CAAC,AAAC;QAC1B,MAAMI,WAAW,GAAGD,OAAO,GAAIF,CAAAA,IAAI,GAAG,CAAC,CAAA,AAAC,AAAC;QACzC,MAAMI,qBAAqB,GAAGH,gBAAgB,CAAC,CAAC,CAAC,GAAG,CAAC,AAAC;QACtD,8CAA8C;QAC9CT,eAAe,CAAC,AAACM,CAAAA,cAAc,GAAGK,WAAW,GAAGC,qBAAqB,CAAA,GAAIJ,IAAI,CAAC,CAAC;IACjF,CAAC,AAAC;IAEF,qBACE,MAACtB,aAAa;;YACXO,eAAe,CAACoB,KAAK,KAAKC,SAAS,kBAClC,KAAC9B,SAAS;gBACRO,YAAY,EAAEA,YAAY;gBAC1BsB,KAAK,EAAEpB,eAAe,CAACoB,KAAK;gBAC5BE,QAAQ,EACNtB,eAAe,CAACI,WAAW,KAAKiB,SAAS,GACrCA,SAAS,GACT;oBAAEnB,MAAM;oBAAEqB,YAAY,EAAE,IAAMpB,SAAS,CAAC,CAACqB,OAAO,GAAK,CAACA,OAAO,CAAC;iBAAE;cAEtE,AACH;0BACD,KAAC1C,QAAQ;gBAAC2C,EAAE,EAAEvB,MAAM;gBAAEwB,aAAa;gBAACC,MAAM,EAAE,KAAK;gBAAEC,aAAW,EAAC,qBAAqB;0BAClF,cAAA,KAACjC,oBAAoB;oBACnBkC,SAAS,EAAC,QAAQ;oBAClBC,WAAW,EAAE;wBAAEC,EAAE,EAAEhC,KAAK,CAAC+B,WAAW,CAACE,MAAM,CAACD,EAAE;wBAAEE,GAAG,EAAE,CAAC;qBAAE;oBACxDlB,IAAI,EAAE1B,gBAAgB;oBACtB6C,SAAS,EAAE,EAAE;oBACbC,eAAe,EAAE,cAAc;oBAC/BC,aAAa,EAAE;wBAAC,IAAI;qBAAC;oBACrBC,WAAW,EAAEhC,UAAU;oBACvBiC,WAAW,EAAEjC,UAAU;oBACvBS,MAAM,EAAE;wBAACpB,cAAc;wBAAEA,cAAc;qBAAC;oBACxCsB,gBAAgB,EAAE;AAAC,yBAAC;AAAE,0BAAE;qBAAC;oBACzBuB,OAAO,EAAE;wBAAE,CAACjD,4BAA4B,CAAC,EAAEU,eAAe,CAACwC,WAAW;qBAAE;oBACxEC,cAAc,EAAEjC,kBAAkB;oBAClCkC,aAAa,EAAE9B,iBAAiB;8BAE/BZ,eAAe,CAACwC,WAAW,CAACG,GAAG,CAAC,CAAC,EAAEC,CAAC,CAAA,EAAEC,CAAC,CAAA,EAAE,iBACxC,KAACC,KAAG;sCACF,cAAA,KAAC7D,aAAa;gCAAC8D,iBAAiB,EAAE/D,UAAU;0CAC1C,cAAA,KAACQ,eAAe;oCACdwD,gBAAgB,EAAE;wCAAElD,YAAY;wCAAEmD,sBAAsB,EAAEL,CAAC;qCAAE;oCAC7DM,KAAK,EAAEC,sBAAsB,CAACN,CAAC,EAAEvC,YAAY,CAAC;kCAC9C;8BACY;2BANRsC,CAAC,CAOL,AACP,CAAC;kBACmB;cACd;;MACG,CAChB;AACJ,CAAC;AAED;;;;;;CAMC,GACD,MAAMO,sBAAsB,GAAG,CAACN,CAAS,EAAEO,QAAgB,GAAK;IAC9D,qEAAqE;IACrE,IAAI,CAACC,MAAM,CAACC,QAAQ,CAACT,CAAC,CAAC,EAAE,OAAOA,CAAC,CAAC;IAClC,OAAOU,IAAI,CAACC,KAAK,CAACJ,QAAQ,GAAGP,CAAC,GAAGU,IAAI,CAACE,GAAG,CAAC,CAAC,EAAEZ,CAAC,GAAG,CAAC,CAAC,GAAGnD,cAAc,CAAC,CAAC;AACxE,CAAC,AAAC"}

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":";AAuBA,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,eAiF9C"}
+{"version":3,"file":"GridTitle.d.ts","sourceRoot":"","sources":["../../../src/components/GridLayout/GridTitle.tsx"],"names":[],"mappings":";AAuBA,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,eAsG9C"}

package/dist/components/GridLayout/GridTitle.js

@@ -32,24 +32,25 @@ import { usePanelGroupActions, useEditMode, useDeletePanelGroupDialog } from '..
     const { isEditMode  } = useEditMode();
     const text = /*#__PURE__*/ _jsx(Typography, {
         variant: "h2",
-        sx: {
-            marginLeft: collapse !== undefined ? 1 : undefined
-        },
         children: title
     });
     return /*#__PURE__*/ _jsx(Box, {
+        onClick: collapse === null || collapse === void 0 ? void 0 : collapse.onToggleOpen,
         sx: {
             display: 'flex',
             justifyContent: 'start',
             alignItems: 'center',
             padding: (theme)=>theme.spacing(1),
+            cursor: collapse ? 'pointer' : 'auto',
             backgroundColor: ({ palette  })=>palette.mode === 'dark' ? palette.background.paper : palette.background.default
         },
         "data-testid": "panel-group-header",
         children: collapse ? /*#__PURE__*/ _jsxs(_Fragment, {
             children: [
                 /*#__PURE__*/ _jsx(IconButton, {
-                    onClick: collapse.onToggleOpen,
+                    sx: {
+                        marginRight: 1
+                    },
                     "aria-label": `${collapse.isOpen ? 'collapse' : 'expand'} group ${title}`,
                     children: collapse.isOpen ? /*#__PURE__*/ _jsx(ExpandedIcon, {}) : /*#__PURE__*/ _jsx(CollapsedIcon, {})
                 }),
@@ -62,7 +63,11 @@ import { usePanelGroupActions, useEditMode, useDeletePanelGroupDialog } from '..
                             description: TOOLTIP_TEXT.addPanelToGroup,
                             children: /*#__PURE__*/ _jsx(IconButton, {
                                 "aria-label": ARIA_LABEL_TEXT.addPanelToGroup(title),
-                                onClick: openAddPanel,
+                                onClick: (e)=>{
+                                    // Don't trigger expand/collapse
+                                    e.stopPropagation();
+                                    openAddPanel();
+                                },
                                 children: /*#__PURE__*/ _jsx(AddPanelIcon, {})
                             })
                         }),
@@ -70,7 +75,11 @@ import { usePanelGroupActions, useEditMode, useDeletePanelGroupDialog } from '..
                             description: TOOLTIP_TEXT.editGroup,
                             children: /*#__PURE__*/ _jsx(IconButton, {
                                 "aria-label": ARIA_LABEL_TEXT.editGroup(title),
-                                onClick: openEditPanelGroup,
+                                onClick: (e)=>{
+                                    // Don't trigger expand/collapse
+                                    e.stopPropagation();
+                                    openEditPanelGroup();
+                                },
                                 children: /*#__PURE__*/ _jsx(PencilIcon, {})
                             })
                         }),
@@ -78,7 +87,11 @@ import { usePanelGroupActions, useEditMode, useDeletePanelGroupDialog } from '..
                             description: TOOLTIP_TEXT.deleteGroup,
                             children: /*#__PURE__*/ _jsx(IconButton, {
                                 "aria-label": ARIA_LABEL_TEXT.deleteGroup(title),
-                                onClick: ()=>openDeletePanelGroupDialog(panelGroupId),
+                                onClick: (e)=>{
+                                    // Don't trigger expand/collapse
+                                    e.stopPropagation();
+                                    openDeletePanelGroupDialog(panelGroupId);
+                                },
                                 children: /*#__PURE__*/ _jsx(DeleteIcon, {})
                             })
                         }),
@@ -87,7 +100,11 @@ import { usePanelGroupActions, useEditMode, useDeletePanelGroupDialog } from '..
                             children: /*#__PURE__*/ _jsx(IconButton, {
                                 "aria-label": ARIA_LABEL_TEXT.moveGroupDown(title),
                                 disabled: moveDown === undefined,
-                                onClick: moveDown,
+                                onClick: (e)=>{
+                                    // Don't trigger expand/collapse
+                                    e.stopPropagation();
+                                    moveDown && moveDown();
+                                },
                                 children: /*#__PURE__*/ _jsx(ArrowDownIcon, {})
                             })
                         }),
@@ -96,7 +113,11 @@ import { usePanelGroupActions, useEditMode, useDeletePanelGroupDialog } from '..
                             children: /*#__PURE__*/ _jsx(IconButton, {
                                 "aria-label": ARIA_LABEL_TEXT.moveGroupUp(title),
                                 disabled: moveUp === undefined,
-                                onClick: moveUp,
+                                onClick: (e)=>{
+                                    // Don't trigger expand/collapse
+                                    e.stopPropagation();
+                                    moveUp && moveUp();
+                                },
                                 children: /*#__PURE__*/ _jsx(ArrowUpIcon, {})
                             })
                         })

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

@@ -1 +1 @@
-{"version":3,"sources":["../../../src/components/GridLayout/GridTitle.tsx"],"sourcesContent":["// Copyright 2023 The Perses Authors\n// Licensed under the Apache License, Version 2.0 (the \"License\");\n// you may not use this file except in compliance with the License.\n// You may obtain a copy of the License at\n//\n// http://www.apache.org/licenses/LICENSE-2.0\n//\n// Unless required by applicable law or agreed to in writing, software\n// distributed under the License is distributed on an \"AS IS\" BASIS,\n// WITHOUT WARRANTIES OR CONDITIONS OF ANY KIND, either express or implied.\n// See the License for the specific language governing permissions and\n// limitations under the License.\n\nimport { Box, 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 { InfoTooltip } from '@perses-dev/components';\nimport { ARIA_LABEL_TEXT, TOOLTIP_TEXT } from '../../constants';\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      data-testid=\"panel-group-header\"\n    >\n      {collapse ? (\n        <>\n          <IconButton\n            onClick={collapse.onToggleOpen}\n            aria-label={`${collapse.isOpen ? 'collapse' : 'expand'} group ${title}`}\n          >\n            {collapse.isOpen ? <ExpandedIcon /> : <CollapsedIcon />}\n          </IconButton>\n          {text}\n          {isEditMode && (\n            <Stack direction=\"row\" marginLeft=\"auto\">\n              <InfoTooltip description={TOOLTIP_TEXT.addPanelToGroup}>\n                <IconButton aria-label={ARIA_LABEL_TEXT.addPanelToGroup(title)} onClick={openAddPanel}>\n                  <AddPanelIcon />\n                </IconButton>\n              </InfoTooltip>\n              <InfoTooltip description={TOOLTIP_TEXT.editGroup}>\n                <IconButton aria-label={ARIA_LABEL_TEXT.editGroup(title)} onClick={openEditPanelGroup}>\n                  <PencilIcon />\n                </IconButton>\n              </InfoTooltip>\n              <InfoTooltip description={TOOLTIP_TEXT.deleteGroup}>\n                <IconButton\n                  aria-label={ARIA_LABEL_TEXT.deleteGroup(title)}\n                  onClick={() => openDeletePanelGroupDialog(panelGroupId)}\n                >\n                  <DeleteIcon />\n                </IconButton>\n              </InfoTooltip>\n              <InfoTooltip description={TOOLTIP_TEXT.moveGroupDown}>\n                <IconButton\n                  aria-label={ARIA_LABEL_TEXT.moveGroupDown(title)}\n                  disabled={moveDown === undefined}\n                  onClick={moveDown}\n                >\n                  <ArrowDownIcon />\n                </IconButton>\n              </InfoTooltip>\n              <InfoTooltip description={TOOLTIP_TEXT.moveGroupUp}>\n                <IconButton\n                  aria-label={ARIA_LABEL_TEXT.moveGroupUp(title)}\n                  disabled={moveUp === undefined}\n                  onClick={moveUp}\n                >\n                  <ArrowUpIcon />\n                </IconButton>\n              </InfoTooltip>\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","InfoTooltip","ARIA_LABEL_TEXT","TOOLTIP_TEXT","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","data-testid","onClick","onToggleOpen","aria-label","isOpen","direction","description","addPanelToGroup","editGroup","deleteGroup","moveGroupDown","disabled","moveGroupUp"],"mappings":"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"}
+{"version":3,"sources":["../../../src/components/GridLayout/GridTitle.tsx"],"sourcesContent":["// Copyright 2023 The Perses Authors\n// Licensed under the Apache License, Version 2.0 (the \"License\");\n// you may not use this file except in compliance with the License.\n// You may obtain a copy of the License at\n//\n// http://www.apache.org/licenses/LICENSE-2.0\n//\n// Unless required by applicable law or agreed to in writing, software\n// distributed under the License is distributed on an \"AS IS\" BASIS,\n// WITHOUT WARRANTIES OR CONDITIONS OF ANY KIND, either express or implied.\n// See the License for the specific language governing permissions and\n// limitations under the License.\n\nimport { Box, 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 { InfoTooltip } from '@perses-dev/components';\nimport { ARIA_LABEL_TEXT, TOOLTIP_TEXT } from '../../constants';\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 = <Typography variant=\"h2\">{title}</Typography>;\n\n  return (\n    <Box\n      onClick={collapse?.onToggleOpen}\n      sx={{\n        display: 'flex',\n        justifyContent: 'start',\n        alignItems: 'center',\n        padding: (theme) => theme.spacing(1),\n        cursor: collapse ? 'pointer' : 'auto',\n        backgroundColor: ({ palette }) =>\n          palette.mode === 'dark' ? palette.background.paper : palette.background.default,\n      }}\n      data-testid=\"panel-group-header\"\n    >\n      {collapse ? (\n        <>\n          <IconButton sx={{ marginRight: 1 }} aria-label={`${collapse.isOpen ? 'collapse' : 'expand'} group ${title}`}>\n            {collapse.isOpen ? <ExpandedIcon /> : <CollapsedIcon />}\n          </IconButton>\n          {text}\n          {isEditMode && (\n            <Stack direction=\"row\" marginLeft=\"auto\">\n              <InfoTooltip description={TOOLTIP_TEXT.addPanelToGroup}>\n                <IconButton\n                  aria-label={ARIA_LABEL_TEXT.addPanelToGroup(title)}\n                  onClick={(e) => {\n                    // Don't trigger expand/collapse\n                    e.stopPropagation();\n                    openAddPanel();\n                  }}\n                >\n                  <AddPanelIcon />\n                </IconButton>\n              </InfoTooltip>\n              <InfoTooltip description={TOOLTIP_TEXT.editGroup}>\n                <IconButton\n                  aria-label={ARIA_LABEL_TEXT.editGroup(title)}\n                  onClick={(e) => {\n                    // Don't trigger expand/collapse\n                    e.stopPropagation();\n                    openEditPanelGroup();\n                  }}\n                >\n                  <PencilIcon />\n                </IconButton>\n              </InfoTooltip>\n              <InfoTooltip description={TOOLTIP_TEXT.deleteGroup}>\n                <IconButton\n                  aria-label={ARIA_LABEL_TEXT.deleteGroup(title)}\n                  onClick={(e) => {\n                    // Don't trigger expand/collapse\n                    e.stopPropagation();\n                    openDeletePanelGroupDialog(panelGroupId);\n                  }}\n                >\n                  <DeleteIcon />\n                </IconButton>\n              </InfoTooltip>\n              <InfoTooltip description={TOOLTIP_TEXT.moveGroupDown}>\n                <IconButton\n                  aria-label={ARIA_LABEL_TEXT.moveGroupDown(title)}\n                  disabled={moveDown === undefined}\n                  onClick={(e) => {\n                    // Don't trigger expand/collapse\n                    e.stopPropagation();\n                    moveDown && moveDown();\n                  }}\n                >\n                  <ArrowDownIcon />\n                </IconButton>\n              </InfoTooltip>\n              <InfoTooltip description={TOOLTIP_TEXT.moveGroupUp}>\n                <IconButton\n                  aria-label={ARIA_LABEL_TEXT.moveGroupUp(title)}\n                  disabled={moveUp === undefined}\n                  onClick={(e) => {\n                    // Don't trigger expand/collapse\n                    e.stopPropagation();\n                    moveUp && moveUp();\n                  }}\n                >\n                  <ArrowUpIcon />\n                </IconButton>\n              </InfoTooltip>\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","InfoTooltip","ARIA_LABEL_TEXT","TOOLTIP_TEXT","usePanelGroupActions","useEditMode","useDeletePanelGroupDialog","GridTitle","props","panelGroupId","title","collapse","openAddPanel","openEditPanelGroup","moveUp","moveDown","openDeletePanelGroupDialog","isEditMode","text","variant","onClick","onToggleOpen","sx","display","justifyContent","alignItems","padding","theme","spacing","cursor","backgroundColor","palette","mode","background","paper","default","data-testid","marginRight","aria-label","isOpen","direction","marginLeft","description","addPanelToGroup","e","stopPropagation","editGroup","deleteGroup","moveGroupDown","disabled","undefined","moveGroupUp"],"mappings":"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"}