@perses-dev/dashboards 0.50.3 → 0.51.0-beta.1

package/dist/components/EmptyDashboard/EmptyDashboard.js.map

@@ -1 +1 @@
-{"version":3,"sources":["../../../src/components/EmptyDashboard/EmptyDashboard.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, Box } from '@mui/material';\nimport { ReactElement, ReactNode } from 'react';\nimport { useEditMode } from '../../context';\nimport { AddPanelButton } from '../AddPanelButton';\nimport { EditVariablesButton } from '../Variables';\nimport { EditButton } from '../EditButton';\n\nexport interface EmptyDashboardProps {\n  /**\n   * The title, which should be relatively short text.\n   */\n  title?: string;\n\n  /**\n   * Imagery to display above the title.\n   */\n  image?: ReactNode;\n\n  /**\n   * Descriptive text, which can be a bit longer.\n   */\n  description?: string;\n\n  /**\n   * Additional text that will be displayed at the bottom of the empty state.\n   * If not specified, no additional text is shown.\n   */\n  additionalText?: string;\n\n  /**\n   * Components that are placed below the title and description that include\n   * actions for the user to take (e.g. buttons or links). If not specified,\n   * the default buttons will be displayed. Set to `false` to disable the default\n   * buttons.\n   */\n  actions?: JSX.Element | boolean;\n\n  /**\n   * Handler for clicking the edit button when the dashboard is in \"view\" mode.\n   * Required when using the default empty state.\n   */\n  onEditButtonClick?: () => void;\n}\n\nconst DEFAULT_TITLE = \"Let's get started\";\n\nconst DEFAULT_DESCRIPTION = {\n  edit: 'We currently support time series charts, gauge charts, stat charts and more!',\n  view: 'This dashboard is currently empty. Get started by clicking the edit button.',\n};\n\n// Constants from specifics in designs to make the default messaging look good.\nconst CONTAINER_WIDTH = '500px';\nconst PRIMARY_CONTENT_WIDTH = '289px';\n\nconst COMMON_BUTTON_PROPS = {\n  variant: 'outlined',\n  color: 'secondary',\n} as const;\n\ntype EmptyDashboardActionsProps = Pick<EmptyDashboardProps, 'actions' | 'onEditButtonClick'> & {\n  isEditMode: boolean;\n};\n\nconst EmptyDashboardActions = ({\n  actions,\n  isEditMode,\n  onEditButtonClick,\n}: EmptyDashboardActionsProps): ReactElement | null => {\n  if (actions && typeof actions !== 'boolean') {\n    // Custom actions\n    return actions;\n  }\n\n  if (actions === false) {\n    // Disable default actions\n    return null;\n  }\n\n  if (isEditMode) {\n    // Default edit mode actions\n    return (\n      <>\n        <AddPanelButton variant=\"outlined\" color=\"secondary\" label=\"Add Panel\" fullWidth />\n        <EditVariablesButton variant=\"outlined\" color=\"secondary\" label=\"Add Variables\" fullWidth />\n      </>\n    );\n  }\n\n  if (onEditButtonClick) {\n    // Default view mode actions\n    return <EditButton {...COMMON_BUTTON_PROPS} label=\"Edit Dashboard\" onClick={onEditButtonClick} />;\n  }\n\n  return null;\n};\n\n/**\n * Communicate that a dashboard is empty and prompt the user to get started.\n */\nexport const EmptyDashboard = ({\n  title = DEFAULT_TITLE,\n  image,\n  description,\n  additionalText,\n  actions,\n  onEditButtonClick,\n}: EmptyDashboardProps): ReactElement => {\n  const { isEditMode } = useEditMode();\n\n  const defaultDescription = isEditMode ? DEFAULT_DESCRIPTION.edit : DEFAULT_DESCRIPTION.view;\n  const actionsContent = (\n    <EmptyDashboardActions actions={actions} onEditButtonClick={onEditButtonClick} isEditMode={isEditMode} />\n  );\n\n  return (\n    <Box sx={{ width: CONTAINER_WIDTH, textAlign: 'center', margin: '0 auto' }}>\n      <Box sx={{ width: PRIMARY_CONTENT_WIDTH, margin: '0 auto' }}>\n        {!!image && image}\n        <Typography variant=\"h2\" gutterBottom>\n          {title}\n        </Typography>\n        <Typography variant=\"body1\">{description ?? defaultDescription}</Typography>\n        {actionsContent && (\n          <Box sx={{ display: 'flex', gap: 2, marginTop: 1, justifyContent: 'center' }}>{actionsContent}</Box>\n        )}\n      </Box>\n      {additionalText && (\n        <Typography variant=\"subtitle1\" sx={{ marginTop: 12 }}>\n          {additionalText}\n        </Typography>\n      )}\n    </Box>\n  );\n};\n"],"names":["Typography","Box","useEditMode","AddPanelButton","EditVariablesButton","EditButton","DEFAULT_TITLE","DEFAULT_DESCRIPTION","edit","view","CONTAINER_WIDTH","PRIMARY_CONTENT_WIDTH","COMMON_BUTTON_PROPS","variant","color","EmptyDashboardActions","actions","isEditMode","onEditButtonClick","label","fullWidth","onClick","EmptyDashboard","title","image","description","additionalText","defaultDescription","actionsContent","sx","width","textAlign","margin","gutterBottom","display","gap","marginTop","justifyContent"],"mappings":"AAAA,oCAAoC;AACpC,kEAAkE;AAClE,mEAAmE;AACnE,0CAA0C;AAC1C,EAAE;AACF,6CAA6C;AAC7C,EAAE;AACF,sEAAsE;AACtE,oEAAoE;AACpE,2EAA2E;AAC3E,sEAAsE;AACtE,iCAAiC;;AAEjC,SAASA,UAAU,EAAEC,GAAG,QAAQ,gBAAgB;AAEhD,SAASC,WAAW,QAAQ,gBAAgB;AAC5C,SAASC,cAAc,QAAQ,oBAAoB;AACnD,SAASC,mBAAmB,QAAQ,eAAe;AACnD,SAASC,UAAU,QAAQ,gBAAgB;AAuC3C,MAAMC,gBAAgB;AAEtB,MAAMC,sBAAsB;IAC1BC,MAAM;IACNC,MAAM;AACR;AAEA,+EAA+E;AAC/E,MAAMC,kBAAkB;AACxB,MAAMC,wBAAwB;AAE9B,MAAMC,sBAAsB;IAC1BC,SAAS;IACTC,OAAO;AACT;AAMA,MAAMC,wBAAwB,CAAC,EAC7BC,OAAO,EACPC,UAAU,EACVC,iBAAiB,EACU;IAC3B,IAAIF,WAAW,OAAOA,YAAY,WAAW;QAC3C,iBAAiB;QACjB,OAAOA;IACT;IAEA,IAAIA,YAAY,OAAO;QACrB,0BAA0B;QAC1B,OAAO;IACT;IAEA,IAAIC,YAAY;QACd,4BAA4B;QAC5B,qBACE;;8BACE,KAACd;oBAAeU,SAAQ;oBAAWC,OAAM;oBAAYK,OAAM;oBAAYC,SAAS;;8BAChF,KAAChB;oBAAoBS,SAAQ;oBAAWC,OAAM;oBAAYK,OAAM;oBAAgBC,SAAS;;;;IAG/F;IAEA,IAAIF,mBAAmB;QACrB,4BAA4B;QAC5B,qBAAO,KAACb;YAAY,GAAGO,mBAAmB;YAAEO,OAAM;YAAiBE,SAASH;;IAC9E;IAEA,OAAO;AACT;AAEA;;CAEC,GACD,OAAO,MAAMI,iBAAiB,CAAC,EAC7BC,QAAQjB,aAAa,EACrBkB,KAAK,EACLC,WAAW,EACXC,cAAc,EACdV,OAAO,EACPE,iBAAiB,EACG;IACpB,MAAM,EAAED,UAAU,EAAE,GAAGf;IAEvB,MAAMyB,qBAAqBV,aAAaV,oBAAoBC,IAAI,GAAGD,oBAAoBE,IAAI;IAC3F,MAAMmB,+BACJ,KAACb;QAAsBC,SAASA;QAASE,mBAAmBA;QAAmBD,YAAYA;;IAG7F,qBACE,MAAChB;QAAI4B,IAAI;YAAEC,OAAOpB;YAAiBqB,WAAW;YAAUC,QAAQ;QAAS;;0BACvE,MAAC/B;gBAAI4B,IAAI;oBAAEC,OAAOnB;oBAAuBqB,QAAQ;gBAAS;;oBACvD,CAAC,CAACR,SAASA;kCACZ,KAACxB;wBAAWa,SAAQ;wBAAKoB,YAAY;kCAClCV;;kCAEH,KAACvB;wBAAWa,SAAQ;kCAASY,wBAAAA,yBAAAA,cAAeE;;oBAC3CC,gCACC,KAAC3B;wBAAI4B,IAAI;4BAAEK,SAAS;4BAAQC,KAAK;4BAAGC,WAAW;4BAAGC,gBAAgB;wBAAS;kCAAIT;;;;YAGlFF,gCACC,KAAC1B;gBAAWa,SAAQ;gBAAYgB,IAAI;oBAAEO,WAAW;gBAAG;0BACjDV;;;;AAKX,EAAE"}
+{"version":3,"sources":["../../../src/components/EmptyDashboard/EmptyDashboard.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, Box } from '@mui/material';\nimport { ReactElement, ReactNode } from 'react';\nimport { useEditMode } from '../../context';\nimport { AddPanelButton } from '../AddPanelButton';\nimport { EditVariablesButton } from '../Variables';\nimport { EditButton } from '../EditButton';\n\nexport interface EmptyDashboardProps {\n  /**\n   * The title, which should be relatively short text.\n   */\n  title?: string;\n\n  /**\n   * Imagery to display above the title.\n   */\n  image?: ReactNode;\n\n  /**\n   * Descriptive text, which can be a bit longer.\n   */\n  description?: string;\n\n  /**\n   * Additional text that will be displayed at the bottom of the empty state.\n   * If not specified, no additional text is shown.\n   */\n  additionalText?: string;\n\n  /**\n   * Components that are placed below the title and description that include\n   * actions for the user to take (e.g. buttons or links). If not specified,\n   * the default buttons will be displayed. Set to `false` to disable the default\n   * buttons.\n   */\n  actions?: JSX.Element | boolean;\n\n  /**\n   * Handler for clicking the edit button when the dashboard is in \"view\" mode.\n   * Required when using the default empty state.\n   */\n  onEditButtonClick?: () => void;\n}\n\nconst DEFAULT_TITLE = \"Let's get started\";\n\nconst DEFAULT_DESCRIPTION = {\n  edit: 'We currently support time series charts, gauge charts, stat charts and more!',\n  view: 'This dashboard is currently empty. Get started by clicking the edit button.',\n};\n\n// Constants from specifics in designs to make the default messaging look good.\nconst CONTAINER_WIDTH = '500px';\nconst PRIMARY_CONTENT_WIDTH = '289px';\n\nconst COMMON_BUTTON_PROPS = {\n  variant: 'outlined',\n  color: 'secondary',\n} as const;\n\ntype EmptyDashboardActionsProps = Pick<EmptyDashboardProps, 'actions' | 'onEditButtonClick'> & {\n  isEditMode: boolean;\n};\n\nconst EmptyDashboardActions = ({\n  actions,\n  isEditMode,\n  onEditButtonClick,\n}: EmptyDashboardActionsProps): ReactElement | null => {\n  if (actions && typeof actions !== 'boolean') {\n    // Custom actions\n    return actions;\n  }\n\n  if (actions === false) {\n    // Disable default actions\n    return null;\n  }\n\n  if (isEditMode) {\n    // Default edit mode actions\n    return (\n      <>\n        <AddPanelButton variant=\"outlined\" color=\"secondary\" label=\"Add Panel\" fullWidth />\n        <EditVariablesButton variant=\"outlined\" color=\"secondary\" label=\"Add Variables\" fullWidth />\n      </>\n    );\n  }\n\n  if (onEditButtonClick) {\n    // Default view mode actions\n    return <EditButton {...COMMON_BUTTON_PROPS} label=\"Edit Dashboard\" onClick={onEditButtonClick} />;\n  }\n\n  return null;\n};\n\n/**\n * Communicate that a dashboard is empty and prompt the user to get started.\n */\nexport const EmptyDashboard = ({\n  title = DEFAULT_TITLE,\n  image,\n  description,\n  additionalText,\n  actions,\n  onEditButtonClick,\n}: EmptyDashboardProps): ReactElement => {\n  const { isEditMode } = useEditMode();\n\n  const defaultDescription = isEditMode ? DEFAULT_DESCRIPTION.edit : DEFAULT_DESCRIPTION.view;\n  const actionsContent = (\n    <EmptyDashboardActions actions={actions} onEditButtonClick={onEditButtonClick} isEditMode={isEditMode} />\n  );\n\n  return (\n    <Box sx={{ width: CONTAINER_WIDTH, textAlign: 'center', margin: '0 auto' }}>\n      <Box sx={{ width: PRIMARY_CONTENT_WIDTH, margin: '0 auto' }}>\n        {!!image && image}\n        <Typography variant=\"h2\" gutterBottom>\n          {title}\n        </Typography>\n        <Typography variant=\"body1\">{description ?? defaultDescription}</Typography>\n        {actionsContent && (\n          <Box sx={{ display: 'flex', gap: 2, marginTop: 1, justifyContent: 'center' }}>{actionsContent}</Box>\n        )}\n      </Box>\n      {additionalText && (\n        <Typography variant=\"subtitle1\" sx={{ marginTop: 12 }}>\n          {additionalText}\n        </Typography>\n      )}\n    </Box>\n  );\n};\n"],"names":["Typography","Box","useEditMode","AddPanelButton","EditVariablesButton","EditButton","DEFAULT_TITLE","DEFAULT_DESCRIPTION","edit","view","CONTAINER_WIDTH","PRIMARY_CONTENT_WIDTH","COMMON_BUTTON_PROPS","variant","color","EmptyDashboardActions","actions","isEditMode","onEditButtonClick","label","fullWidth","onClick","EmptyDashboard","title","image","description","additionalText","defaultDescription","actionsContent","sx","width","textAlign","margin","gutterBottom","display","gap","marginTop","justifyContent"],"mappings":"AAAA,oCAAoC;AACpC,kEAAkE;AAClE,mEAAmE;AACnE,0CAA0C;AAC1C,EAAE;AACF,6CAA6C;AAC7C,EAAE;AACF,sEAAsE;AACtE,oEAAoE;AACpE,2EAA2E;AAC3E,sEAAsE;AACtE,iCAAiC;;AAEjC,SAASA,UAAU,EAAEC,GAAG,QAAQ,gBAAgB;AAEhD,SAASC,WAAW,QAAQ,gBAAgB;AAC5C,SAASC,cAAc,QAAQ,oBAAoB;AACnD,SAASC,mBAAmB,QAAQ,eAAe;AACnD,SAASC,UAAU,QAAQ,gBAAgB;AAuC3C,MAAMC,gBAAgB;AAEtB,MAAMC,sBAAsB;IAC1BC,MAAM;IACNC,MAAM;AACR;AAEA,+EAA+E;AAC/E,MAAMC,kBAAkB;AACxB,MAAMC,wBAAwB;AAE9B,MAAMC,sBAAsB;IAC1BC,SAAS;IACTC,OAAO;AACT;AAMA,MAAMC,wBAAwB,CAAC,EAC7BC,OAAO,EACPC,UAAU,EACVC,iBAAiB,EACU;IAC3B,IAAIF,WAAW,OAAOA,YAAY,WAAW;QAC3C,iBAAiB;QACjB,OAAOA;IACT;IAEA,IAAIA,YAAY,OAAO;QACrB,0BAA0B;QAC1B,OAAO;IACT;IAEA,IAAIC,YAAY;QACd,4BAA4B;QAC5B,qBACE;;8BACE,KAACd;oBAAeU,SAAQ;oBAAWC,OAAM;oBAAYK,OAAM;oBAAYC,SAAS;;8BAChF,KAAChB;oBAAoBS,SAAQ;oBAAWC,OAAM;oBAAYK,OAAM;oBAAgBC,SAAS;;;;IAG/F;IAEA,IAAIF,mBAAmB;QACrB,4BAA4B;QAC5B,qBAAO,KAACb;YAAY,GAAGO,mBAAmB;YAAEO,OAAM;YAAiBE,SAASH;;IAC9E;IAEA,OAAO;AACT;AAEA;;CAEC,GACD,OAAO,MAAMI,iBAAiB,CAAC,EAC7BC,QAAQjB,aAAa,EACrBkB,KAAK,EACLC,WAAW,EACXC,cAAc,EACdV,OAAO,EACPE,iBAAiB,EACG;IACpB,MAAM,EAAED,UAAU,EAAE,GAAGf;IAEvB,MAAMyB,qBAAqBV,aAAaV,oBAAoBC,IAAI,GAAGD,oBAAoBE,IAAI;IAC3F,MAAMmB,+BACJ,KAACb;QAAsBC,SAASA;QAASE,mBAAmBA;QAAmBD,YAAYA;;IAG7F,qBACE,MAAChB;QAAI4B,IAAI;YAAEC,OAAOpB;YAAiBqB,WAAW;YAAUC,QAAQ;QAAS;;0BACvE,MAAC/B;gBAAI4B,IAAI;oBAAEC,OAAOnB;oBAAuBqB,QAAQ;gBAAS;;oBACvD,CAAC,CAACR,SAASA;kCACZ,KAACxB;wBAAWa,SAAQ;wBAAKoB,YAAY;kCAClCV;;kCAEH,KAACvB;wBAAWa,SAAQ;kCAASY,eAAeE;;oBAC3CC,gCACC,KAAC3B;wBAAI4B,IAAI;4BAAEK,SAAS;4BAAQC,KAAK;4BAAGC,WAAW;4BAAGC,gBAAgB;wBAAS;kCAAIT;;;;YAGlFF,gCACC,KAAC1B;gBAAWa,SAAQ;gBAAYgB,IAAI;oBAAEO,WAAW;gBAAG;0BACjDV;;;;AAKX,EAAE"}

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

@@ -1 +1 @@
-{"version":3,"sources":["../../../src/components/GridLayout/GridContainer.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 { ReactElement, ReactNode, useEffect, useState } from 'react';\nimport { styled, SxProps, Theme } from '@mui/material';\n\nexport interface GridContainerProps {\n  children: ReactNode;\n  sx?: SxProps<Theme>;\n}\n\nexport function GridContainer(props: GridContainerProps): ReactElement {\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        {\n          // This adds spacing between grids (rows) in the overall dashboard\n          '& + &': { marginTop: 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        ...(Array.isArray(props.sx) ? props.sx : [props.sx]),\n      ]}\n      data-testid=\"panel-group\"\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","transitionProperty","Array","isArray","data-testid","children","theme","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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"}
+{"version":3,"sources":["../../../src/components/GridLayout/GridContainer.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 { ReactElement, ReactNode, useEffect, useState } from 'react';\nimport { styled, SxProps, Theme } from '@mui/material';\n\nexport interface GridContainerProps {\n  children: ReactNode;\n  sx?: SxProps<Theme>;\n}\n\nexport function GridContainer(props: GridContainerProps): ReactElement {\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        {\n          // This adds spacing between grids (rows) in the overall dashboard\n          '& + &': { marginTop: 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        ...(Array.isArray(props.sx) ? props.sx : [props.sx]),\n      ]}\n      data-testid=\"panel-group\"\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","transitionProperty","Array","isArray","data-testid","children","theme","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/GridItemContent.d.ts.map

@@ -1 +1 @@
-{"version":3,"file":"GridItemContent.d.ts","sourceRoot":"","sources":["../../../src/components/GridLayout/GridItemContent.tsx"],"names":[],"mappings":"AAgBA,OAAO,EAAE,YAAY,EAAE,MAAM,OAAO,CAAC;AACrC,OAAO,EAAE,gBAAgB,EAAwD,MAAM,eAAe,CAAC;AACvG,OAAO,EAAqB,YAAY,EAAE,MAAM,UAAU,CAAC;AAG3D,MAAM,WAAW,oBAAoB;IACnC,gBAAgB,EAAE,gBAAgB,CAAC;IACnC,KAAK,EAAE,MAAM,CAAC;IACd,YAAY,CAAC,EAAE,YAAY,CAAC;CAC7B;AAED;;GAEG;AACH,wBAAgB,eAAe,CAAC,KAAK,EAAE,oBAAoB,GAAG,YAAY,CA0EzE"}
+{"version":3,"file":"GridItemContent.d.ts","sourceRoot":"","sources":["../../../src/components/GridLayout/GridItemContent.tsx"],"names":[],"mappings":"AAgBA,OAAO,EAAE,YAAY,EAAE,MAAM,OAAO,CAAC;AACrC,OAAO,EAAE,gBAAgB,EAA6D,MAAM,eAAe,CAAC;AAC5G,OAAO,EAAqB,YAAY,EAAE,MAAM,UAAU,CAAC;AAG3D,MAAM,WAAW,oBAAoB;IACnC,gBAAgB,EAAE,gBAAgB,CAAC;IACnC,KAAK,EAAE,MAAM,CAAC;IACd,YAAY,CAAC,EAAE,YAAY,CAAC;CAC7B;AAED;;GAEG;AACH,wBAAgB,eAAe,CAAC,KAAK,EAAE,oBAAoB,GAAG,YAAY,CA8EzE"}

package/dist/components/GridLayout/GridItemContent.js

@@ -14,7 +14,7 @@ import { jsx as _jsx } from "react/jsx-runtime";
 import { Box } from '@mui/material';
 import { useInView } from 'react-intersection-observer';
 import { DataQueriesProvider, usePlugin, useSuggestedStepMs } from '@perses-dev/plugin-system';
-import { useEditMode, usePanel, usePanelActions, useViewPanel } from '../../context';
+import { useEditMode, usePanel, usePanelActions, useViewPanelGroup } from '../../context';
 import { Panel } from '../Panel';
 import { isPanelGroupItemIdEqual } from '../../context/DashboardProvider/panel-group-slice';
 /**
@@ -25,7 +25,7 @@ import { isPanelGroupItemIdEqual } from '../../context/DashboardProvider/panel-g
     const { spec: { queries } } = panelDefinition;
     const { isEditMode } = useEditMode();
     const { openEditPanel, openDeletePanelDialog, duplicatePanel, viewPanel } = usePanelActions(panelGroupItemId);
-    const viewPanelGroupItemId = useViewPanel();
+    const viewPanelGroupItemId = useViewPanelGroup();
     const { ref, inView } = useInView({
         threshold: 0.2,
         initialInView: false,
@@ -53,13 +53,14 @@ import { isPanelGroupItemIdEqual } from '../../context/DashboardProvider/panel-g
     // map TimeSeriesQueryDefinition to Definition<UnknownSpec>
     const suggestedStepMs = useSuggestedStepMs(width);
     const { data: plugin } = usePlugin('Panel', panelDefinition.spec.plugin.kind);
-    const queryDefinitions = queries !== null && queries !== void 0 ? queries : [];
+    const queryDefinitions = queries ?? [];
     const definitions = queryDefinitions.map((query)=>{
         return {
             kind: query.spec.plugin.kind,
             spec: query.spec.plugin.spec
         };
     });
+    const pluginQueryOptions = typeof plugin?.queryOptions === 'function' ? plugin?.queryOptions(panelDefinition.spec.plugin.spec) : plugin?.queryOptions;
     return /*#__PURE__*/ _jsx(Box, {
         ref: ref,
         sx: {
@@ -70,7 +71,7 @@ import { isPanelGroupItemIdEqual } from '../../context/DashboardProvider/panel-g
             definitions: definitions,
             options: {
                 suggestedStepMs,
-                ...plugin === null || plugin === void 0 ? void 0 : plugin.queryOptions
+                ...pluginQueryOptions
             },
             queryOptions: {
                 enabled: inView

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 { Box } from '@mui/material';\nimport { useInView } from 'react-intersection-observer';\nimport { DataQueriesProvider, usePlugin, useSuggestedStepMs } from '@perses-dev/plugin-system';\nimport { ReactElement } from 'react';\nimport { PanelGroupItemId, useEditMode, usePanel, usePanelActions, useViewPanel } from '../../context';\nimport { Panel, PanelProps, PanelOptions } from '../Panel';\nimport { isPanelGroupItemIdEqual } from '../../context/DashboardProvider/panel-group-slice';\n\nexport interface GridItemContentProps {\n  panelGroupItemId: PanelGroupItemId;\n  width: number; // necessary for determining the suggested step ms\n  panelOptions?: PanelOptions;\n}\n\n/**\n * Resolves the reference to panel content in a GridItemDefinition and renders the panel.\n */\nexport function GridItemContent(props: GridItemContentProps): ReactElement {\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, viewPanel } = usePanelActions(panelGroupItemId);\n  const viewPanelGroupItemId = useViewPanel();\n  const { ref, inView } = useInView({\n    threshold: 0.2, // we have the flexibility to adjust this threshold to trigger queries slightly earlier or later based on performance\n    initialInView: false,\n    triggerOnce: true,\n  });\n\n  const readHandlers = {\n    isPanelViewed: isPanelGroupItemIdEqual(viewPanelGroupItemId, panelGroupItemId),\n    onViewPanelClick: function (): void {\n      if (viewPanelGroupItemId === undefined) {\n        viewPanel(panelGroupItemId);\n      } else {\n        viewPanel(undefined);\n      }\n    },\n  };\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\n  const { data: plugin } = usePlugin('Panel', panelDefinition.spec.plugin.kind);\n\n  const queryDefinitions = queries ?? [];\n  const definitions = queryDefinitions.map((query) => {\n    return {\n      kind: query.spec.plugin.kind,\n      spec: query.spec.plugin.spec,\n    };\n  });\n\n  return (\n    <Box\n      ref={ref}\n      sx={{\n        width: '100%',\n        height: '100%',\n      }}\n    >\n      <DataQueriesProvider\n        definitions={definitions}\n        options={{ suggestedStepMs, ...plugin?.queryOptions }}\n        queryOptions={{ enabled: inView }}\n      >\n        {inView && (\n          <Panel\n            definition={panelDefinition}\n            readHandlers={readHandlers}\n            editHandlers={editHandlers}\n            panelOptions={props.panelOptions}\n            panelGroupItemId={panelGroupItemId}\n          />\n        )}\n      </DataQueriesProvider>\n    </Box>\n  );\n}\n"],"names":["Box","useInView","DataQueriesProvider","usePlugin","useSuggestedStepMs","useEditMode","usePanel","usePanelActions","useViewPanel","Panel","isPanelGroupItemIdEqual","GridItemContent","props","panelGroupItemId","width","panelDefinition","spec","queries","isEditMode","openEditPanel","openDeletePanelDialog","duplicatePanel","viewPanel","viewPanelGroupItemId","ref","inView","threshold","initialInView","triggerOnce","readHandlers","isPanelViewed","onViewPanelClick","undefined","editHandlers","onEditPanelClick","onDuplicatePanelClick","onDeletePanelClick","suggestedStepMs","data","plugin","kind","queryDefinitions","definitions","map","query","sx","height","options","queryOptions","enabled","definition","panelOptions"],"mappings":"AAAA,oCAAoC;AACpC,kEAAkE;AAClE,mEAAmE;AACnE,0CAA0C;AAC1C,EAAE;AACF,6CAA6C;AAC7C,EAAE;AACF,sEAAsE;AACtE,oEAAoE;AACpE,2EAA2E;AAC3E,sEAAsE;AACtE,iCAAiC;;AAEjC,SAASA,GAAG,QAAQ,gBAAgB;AACpC,SAASC,SAAS,QAAQ,8BAA8B;AACxD,SAASC,mBAAmB,EAAEC,SAAS,EAAEC,kBAAkB,QAAQ,4BAA4B;AAE/F,SAA2BC,WAAW,EAAEC,QAAQ,EAAEC,eAAe,EAAEC,YAAY,QAAQ,gBAAgB;AACvG,SAASC,KAAK,QAAkC,WAAW;AAC3D,SAASC,uBAAuB,QAAQ,oDAAoD;AAQ5F;;CAEC,GACD,OAAO,SAASC,gBAAgBC,KAA2B;IACzD,MAAM,EAAEC,gBAAgB,EAAEC,KAAK,EAAE,GAAGF;IACpC,MAAMG,kBAAkBT,SAASO;IACjC,MAAM,EACJG,MAAM,EAAEC,OAAO,EAAE,EAClB,GAAGF;IACJ,MAAM,EAAEG,UAAU,EAAE,GAAGb;IACvB,MAAM,EAAEc,aAAa,EAAEC,qBAAqB,EAAEC,cAAc,EAAEC,SAAS,EAAE,GAAGf,gBAAgBM;IAC5F,MAAMU,uBAAuBf;IAC7B,MAAM,EAAEgB,GAAG,EAAEC,MAAM,EAAE,GAAGxB,UAAU;QAChCyB,WAAW;QACXC,eAAe;QACfC,aAAa;IACf;IAEA,MAAMC,eAAe;QACnBC,eAAepB,wBAAwBa,sBAAsBV;QAC7DkB,kBAAkB;YAChB,IAAIR,yBAAyBS,WAAW;gBACtCV,UAAUT;YACZ,OAAO;gBACLS,UAAUU;YACZ;QACF;IACF;IAEA,iDAAiD;IACjD,IAAIC,eAA2CD;IAC/C,IAAId,YAAY;QACde,eAAe;YACbC,kBAAkBf;YAClBgB,uBAAuBd;YACvBe,oBAAoBhB;QACtB;IACF;IAEA,2DAA2D;IAC3D,MAAMiB,kBAAkBjC,mBAAmBU;IAE3C,MAAM,EAAEwB,MAAMC,MAAM,EAAE,GAAGpC,UAAU,SAASY,gBAAgBC,IAAI,CAACuB,MAAM,CAACC,IAAI;IAE5E,MAAMC,mBAAmBxB,oBAAAA,qBAAAA,UAAW,EAAE;IACtC,MAAMyB,cAAcD,iBAAiBE,GAAG,CAAC,CAACC;QACxC,OAAO;YACLJ,MAAMI,MAAM5B,IAAI,CAACuB,MAAM,CAACC,IAAI;YAC5BxB,MAAM4B,MAAM5B,IAAI,CAACuB,MAAM,CAACvB,IAAI;QAC9B;IACF;IAEA,qBACE,KAAChB;QACCwB,KAAKA;QACLqB,IAAI;YACF/B,OAAO;YACPgC,QAAQ;QACV;kBAEA,cAAA,KAAC5C;YACCwC,aAAaA;YACbK,SAAS;gBAAEV;mBAAoBE,mBAAAA,6BAAAA,OAAQS,YAAY,AAAvB;YAAwB;YACpDA,cAAc;gBAAEC,SAASxB;YAAO;sBAE/BA,wBACC,KAAChB;gBACCyC,YAAYnC;gBACZc,cAAcA;gBACdI,cAAcA;gBACdkB,cAAcvC,MAAMuC,YAAY;gBAChCtC,kBAAkBA;;;;AAM9B"}
+{"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 { Box } from '@mui/material';\nimport { useInView } from 'react-intersection-observer';\nimport { DataQueriesProvider, usePlugin, useSuggestedStepMs } from '@perses-dev/plugin-system';\nimport { ReactElement } from 'react';\nimport { PanelGroupItemId, useEditMode, usePanel, usePanelActions, useViewPanelGroup } from '../../context';\nimport { Panel, PanelProps, PanelOptions } from '../Panel';\nimport { isPanelGroupItemIdEqual } from '../../context/DashboardProvider/panel-group-slice';\n\nexport interface GridItemContentProps {\n  panelGroupItemId: PanelGroupItemId;\n  width: number; // necessary for determining the suggested step ms\n  panelOptions?: PanelOptions;\n}\n\n/**\n * Resolves the reference to panel content in a GridItemDefinition and renders the panel.\n */\nexport function GridItemContent(props: GridItemContentProps): ReactElement {\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, viewPanel } = usePanelActions(panelGroupItemId);\n  const viewPanelGroupItemId = useViewPanelGroup();\n  const { ref, inView } = useInView({\n    threshold: 0.2, // we have the flexibility to adjust this threshold to trigger queries slightly earlier or later based on performance\n    initialInView: false,\n    triggerOnce: true,\n  });\n\n  const readHandlers = {\n    isPanelViewed: isPanelGroupItemIdEqual(viewPanelGroupItemId, panelGroupItemId),\n    onViewPanelClick: function (): void {\n      if (viewPanelGroupItemId === undefined) {\n        viewPanel(panelGroupItemId);\n      } else {\n        viewPanel(undefined);\n      }\n    },\n  };\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\n  const { data: plugin } = usePlugin('Panel', panelDefinition.spec.plugin.kind);\n\n  const queryDefinitions = queries ?? [];\n  const definitions = queryDefinitions.map((query) => {\n    return {\n      kind: query.spec.plugin.kind,\n      spec: query.spec.plugin.spec,\n    };\n  });\n  const pluginQueryOptions =\n    typeof plugin?.queryOptions === 'function'\n      ? plugin?.queryOptions(panelDefinition.spec.plugin.spec)\n      : plugin?.queryOptions;\n\n  return (\n    <Box\n      ref={ref}\n      sx={{\n        width: '100%',\n        height: '100%',\n      }}\n    >\n      <DataQueriesProvider\n        definitions={definitions}\n        options={{ suggestedStepMs, ...pluginQueryOptions }}\n        queryOptions={{ enabled: inView }}\n      >\n        {inView && (\n          <Panel\n            definition={panelDefinition}\n            readHandlers={readHandlers}\n            editHandlers={editHandlers}\n            panelOptions={props.panelOptions}\n            panelGroupItemId={panelGroupItemId}\n          />\n        )}\n      </DataQueriesProvider>\n    </Box>\n  );\n}\n"],"names":["Box","useInView","DataQueriesProvider","usePlugin","useSuggestedStepMs","useEditMode","usePanel","usePanelActions","useViewPanelGroup","Panel","isPanelGroupItemIdEqual","GridItemContent","props","panelGroupItemId","width","panelDefinition","spec","queries","isEditMode","openEditPanel","openDeletePanelDialog","duplicatePanel","viewPanel","viewPanelGroupItemId","ref","inView","threshold","initialInView","triggerOnce","readHandlers","isPanelViewed","onViewPanelClick","undefined","editHandlers","onEditPanelClick","onDuplicatePanelClick","onDeletePanelClick","suggestedStepMs","data","plugin","kind","queryDefinitions","definitions","map","query","pluginQueryOptions","queryOptions","sx","height","options","enabled","definition","panelOptions"],"mappings":"AAAA,oCAAoC;AACpC,kEAAkE;AAClE,mEAAmE;AACnE,0CAA0C;AAC1C,EAAE;AACF,6CAA6C;AAC7C,EAAE;AACF,sEAAsE;AACtE,oEAAoE;AACpE,2EAA2E;AAC3E,sEAAsE;AACtE,iCAAiC;;AAEjC,SAASA,GAAG,QAAQ,gBAAgB;AACpC,SAASC,SAAS,QAAQ,8BAA8B;AACxD,SAASC,mBAAmB,EAAEC,SAAS,EAAEC,kBAAkB,QAAQ,4BAA4B;AAE/F,SAA2BC,WAAW,EAAEC,QAAQ,EAAEC,eAAe,EAAEC,iBAAiB,QAAQ,gBAAgB;AAC5G,SAASC,KAAK,QAAkC,WAAW;AAC3D,SAASC,uBAAuB,QAAQ,oDAAoD;AAQ5F;;CAEC,GACD,OAAO,SAASC,gBAAgBC,KAA2B;IACzD,MAAM,EAAEC,gBAAgB,EAAEC,KAAK,EAAE,GAAGF;IACpC,MAAMG,kBAAkBT,SAASO;IACjC,MAAM,EACJG,MAAM,EAAEC,OAAO,EAAE,EAClB,GAAGF;IACJ,MAAM,EAAEG,UAAU,EAAE,GAAGb;IACvB,MAAM,EAAEc,aAAa,EAAEC,qBAAqB,EAAEC,cAAc,EAAEC,SAAS,EAAE,GAAGf,gBAAgBM;IAC5F,MAAMU,uBAAuBf;IAC7B,MAAM,EAAEgB,GAAG,EAAEC,MAAM,EAAE,GAAGxB,UAAU;QAChCyB,WAAW;QACXC,eAAe;QACfC,aAAa;IACf;IAEA,MAAMC,eAAe;QACnBC,eAAepB,wBAAwBa,sBAAsBV;QAC7DkB,kBAAkB;YAChB,IAAIR,yBAAyBS,WAAW;gBACtCV,UAAUT;YACZ,OAAO;gBACLS,UAAUU;YACZ;QACF;IACF;IAEA,iDAAiD;IACjD,IAAIC,eAA2CD;IAC/C,IAAId,YAAY;QACde,eAAe;YACbC,kBAAkBf;YAClBgB,uBAAuBd;YACvBe,oBAAoBhB;QACtB;IACF;IAEA,2DAA2D;IAC3D,MAAMiB,kBAAkBjC,mBAAmBU;IAE3C,MAAM,EAAEwB,MAAMC,MAAM,EAAE,GAAGpC,UAAU,SAASY,gBAAgBC,IAAI,CAACuB,MAAM,CAACC,IAAI;IAE5E,MAAMC,mBAAmBxB,WAAW,EAAE;IACtC,MAAMyB,cAAcD,iBAAiBE,GAAG,CAAC,CAACC;QACxC,OAAO;YACLJ,MAAMI,MAAM5B,IAAI,CAACuB,MAAM,CAACC,IAAI;YAC5BxB,MAAM4B,MAAM5B,IAAI,CAACuB,MAAM,CAACvB,IAAI;QAC9B;IACF;IACA,MAAM6B,qBACJ,OAAON,QAAQO,iBAAiB,aAC5BP,QAAQO,aAAa/B,gBAAgBC,IAAI,CAACuB,MAAM,CAACvB,IAAI,IACrDuB,QAAQO;IAEd,qBACE,KAAC9C;QACCwB,KAAKA;QACLuB,IAAI;YACFjC,OAAO;YACPkC,QAAQ;QACV;kBAEA,cAAA,KAAC9C;YACCwC,aAAaA;YACbO,SAAS;gBAAEZ;gBAAiB,GAAGQ,kBAAkB;YAAC;YAClDC,cAAc;gBAAEI,SAASzB;YAAO;sBAE/BA,wBACC,KAAChB;gBACC0C,YAAYpC;gBACZc,cAAcA;gBACdI,cAAcA;gBACdmB,cAAcxC,MAAMwC,YAAY;gBAChCvC,kBAAkBA;;;;AAM9B"}

package/dist/components/GridLayout/GridLayout.js

@@ -15,7 +15,7 @@ import { useMemo, useState } from 'react';
 import { Responsive, WidthProvider } from 'react-grid-layout';
 import { Collapse, useTheme } from '@mui/material';
 import { ErrorAlert, ErrorBoundary } from '@perses-dev/components';
-import { useEditMode, usePanelGroup, usePanelGroupActions, useViewPanel } from '../../context';
+import { useEditMode, usePanelGroup, usePanelGroupActions, useViewPanelGroup } from '../../context';
 import { GRID_LAYOUT_COLS, GRID_LAYOUT_SMALL_BREAKPOINT } from '../../constants';
 import { GridTitle } from './GridTitle';
 import { GridItemContent } from './GridItemContent';
@@ -29,13 +29,12 @@ const ROW_HEIGHT = 30;
     const theme = useTheme();
     const groupDefinition = usePanelGroup(panelGroupId);
     const { updatePanelGroupLayouts } = usePanelGroupActions(panelGroupId);
-    var _ref;
-    const [isOpen, setIsOpen] = useState((_ref = !groupDefinition.isCollapsed) !== null && _ref !== void 0 ? _ref : true);
+    const [isOpen, setIsOpen] = useState(!groupDefinition.isCollapsed);
     const { isEditMode } = useEditMode();
     const [gridColWidth, setGridColWidth] = useState(0);
-    const viewPanelItemId = useViewPanel();
-    const hasViewPanel = (viewPanelItemId === null || viewPanelItemId === void 0 ? void 0 : viewPanelItemId.panelGroupId) === panelGroupId; // current panelGroup contains the panel extended?
-    const itemLayoutViewed = viewPanelItemId === null || viewPanelItemId === void 0 ? void 0 : viewPanelItemId.panelGroupItemLayoutId;
+    const viewPanelItemId = useViewPanelGroup();
+    const hasViewPanel = viewPanelItemId?.panelGroupId === panelGroupId; // current panelGroup contains the panel extended?
+    const itemLayoutViewed = viewPanelItemId?.panelGroupItemLayoutId;
     // If there is a panel in view mode, we should hide the grid if the panel is not in the current group.
     const isGridDisplayed = useMemo(()=>{
         if (viewPanelItemId === undefined) {
@@ -56,7 +55,7 @@ const ROW_HEIGHT = 30;
                 if (itemLayout.i === itemLayoutViewed) {
                     const rowTitleHeight = 40 + 8; // 40 is the height of the row title and 8 is the margin height
                     return {
-                        h: Math.round(((panelFullHeight !== null && panelFullHeight !== void 0 ? panelFullHeight : window.innerHeight) - rowTitleHeight) / (ROW_HEIGHT + DEFAULT_MARGIN)),
+                        h: Math.round(((panelFullHeight ?? window.innerHeight) - rowTitleHeight) / (ROW_HEIGHT + DEFAULT_MARGIN)),
                         i: itemLayoutViewed,
                         w: 48,
                         x: 0,

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 { ReactElement, useMemo, 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 { PanelGroupId } from '@perses-dev/core';\nimport {\n  useEditMode,\n  usePanelGroup,\n  usePanelGroupActions,\n  PanelGroupItemLayout,\n  useViewPanel,\n  PanelGroupDefinition,\n} from '../../context';\nimport { GRID_LAYOUT_COLS, GRID_LAYOUT_SMALL_BREAKPOINT } from '../../constants';\nimport { PanelOptions } from '../Panel';\nimport { GridTitle } from './GridTitle';\nimport { GridItemContent } from './GridItemContent';\nimport { GridContainer } from './GridContainer';\nconst DEFAULT_MARGIN = 10;\nconst ROW_HEIGHT = 30;\n\nexport interface GridLayoutProps {\n  panelGroupId: PanelGroupId;\n  panelOptions?: PanelOptions;\n  panelFullHeight?: number;\n}\n\n/**\n * Layout component that arranges children in a Grid based on the definition.\n */\nexport function GridLayout(props: GridLayoutProps): ReactElement {\n  const { panelGroupId, panelOptions, panelFullHeight } = props;\n  const theme = useTheme();\n  const groupDefinition: PanelGroupDefinition = 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 viewPanelItemId = useViewPanel();\n  const hasViewPanel = viewPanelItemId?.panelGroupId === panelGroupId; // current panelGroup contains the panel extended?\n  const itemLayoutViewed = viewPanelItemId?.panelGroupItemLayoutId;\n\n  // If there is a panel in view mode, we should hide the grid if the panel is not in the current group.\n  const isGridDisplayed = useMemo(() => {\n    if (viewPanelItemId === undefined) {\n      return true;\n    }\n    if (hasViewPanel) {\n      setIsOpen(true);\n    }\n    return hasViewPanel;\n  }, [hasViewPanel, viewPanelItemId]);\n\n  // Item layout is override if there is a panel in view mode\n  const itemLayouts: PanelGroupItemLayout[] = useMemo(() => {\n    if (itemLayoutViewed) {\n      return groupDefinition.itemLayouts.map((itemLayout) => {\n        if (itemLayout.i === itemLayoutViewed) {\n          const rowTitleHeight = 40 + 8; // 40 is the height of the row title and 8 is the margin height\n          return {\n            h: Math.round(((panelFullHeight ?? window.innerHeight) - rowTitleHeight) / (ROW_HEIGHT + DEFAULT_MARGIN)), // Viewed panel should take the full height remaining\n            i: itemLayoutViewed,\n            w: 48,\n            x: 0,\n            y: 0,\n          } as PanelGroupItemLayout;\n        }\n        return itemLayout;\n      });\n    }\n    return groupDefinition.itemLayouts;\n  }, [groupDefinition.itemLayouts, itemLayoutViewed, panelFullHeight]);\n\n  const handleLayoutChange = (currentLayout: Layout[], allLayouts: Layouts): void => {\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 && !hasViewPanel) {\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  ): void => {\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  // https://github.com/react-grid-layout/react-grid-layout?tab=readme-ov-file#react-hooks-performance\n  const ResponsiveGridLayout = useMemo(() => WidthProvider(Responsive), []);\n\n  return (\n    <GridContainer\n      sx={{\n        display: isGridDisplayed ? 'block' : 'none',\n        height: itemLayoutViewed ? `${panelFullHeight}px` : 'unset',\n        overflow: itemLayoutViewed ? 'hidden' : 'unset',\n      }}\n    >\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={ROW_HEIGHT}\n          draggableHandle=\".drag-handle\"\n          resizeHandles={['se']}\n          isDraggable={isEditMode && !hasViewPanel}\n          isResizable={isEditMode && !hasViewPanel}\n          margin={[DEFAULT_MARGIN, DEFAULT_MARGIN]}\n          containerPadding={[0, 10]}\n          layouts={{ [GRID_LAYOUT_SMALL_BREAKPOINT]: itemLayouts }}\n          onLayoutChange={handleLayoutChange}\n          onWidthChange={handleWidthChange}\n          allowOverlap={hasViewPanel} // Enabling overlap when viewing a specific panel because panel in front of the viewed panel will add empty spaces (empty row height)\n        >\n          {itemLayouts.map(({ i, w }) => (\n            <div\n              key={i}\n              style={{\n                display: itemLayoutViewed !== undefined ? (itemLayoutViewed === i ? 'unset' : 'none') : 'unset',\n              }}\n            >\n              <ErrorBoundary FallbackComponent={ErrorAlert}>\n                <GridItemContent\n                  panelOptions={panelOptions}\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): 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":["useMemo","useState","Responsive","WidthProvider","Collapse","useTheme","ErrorAlert","ErrorBoundary","useEditMode","usePanelGroup","usePanelGroupActions","useViewPanel","GRID_LAYOUT_COLS","GRID_LAYOUT_SMALL_BREAKPOINT","GridTitle","GridItemContent","GridContainer","DEFAULT_MARGIN","ROW_HEIGHT","GridLayout","props","panelGroupId","panelOptions","panelFullHeight","theme","groupDefinition","updatePanelGroupLayouts","isOpen","setIsOpen","isCollapsed","isEditMode","gridColWidth","setGridColWidth","viewPanelItemId","hasViewPanel","itemLayoutViewed","panelGroupItemLayoutId","isGridDisplayed","undefined","itemLayouts","map","itemLayout","i","rowTitleHeight","h","Math","round","window","innerHeight","w","x","y","handleLayoutChange","currentLayout","allLayouts","smallLayout","handleWidthChange","containerWidth","margin","cols","containerPadding","marginX","marginWidth","containerPaddingWidth","ResponsiveGridLayout","sx","display","height","overflow","title","collapse","onToggleOpen","current","in","unmountOnExit","appear","data-testid","className","breakpoints","sm","values","xxs","rowHeight","draggableHandle","resizeHandles","isDraggable","isResizable","layouts","onLayoutChange","onWidthChange","allowOverlap","div","style","FallbackComponent","panelGroupItemId","width","calculateGridItemWidth","colWidth","Number","isFinite","max"],"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 { ReactElement, useMemo, 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 { PanelGroupId } from '@perses-dev/core';\nimport {\n  useEditMode,\n  usePanelGroup,\n  usePanelGroupActions,\n  PanelGroupItemLayout,\n  useViewPanelGroup,\n  PanelGroupDefinition,\n} from '../../context';\nimport { GRID_LAYOUT_COLS, GRID_LAYOUT_SMALL_BREAKPOINT } from '../../constants';\nimport { PanelOptions } from '../Panel';\nimport { GridTitle } from './GridTitle';\nimport { GridItemContent } from './GridItemContent';\nimport { GridContainer } from './GridContainer';\nconst DEFAULT_MARGIN = 10;\nconst ROW_HEIGHT = 30;\n\nexport interface GridLayoutProps {\n  panelGroupId: PanelGroupId;\n  panelOptions?: PanelOptions;\n  panelFullHeight?: number;\n}\n\n/**\n * Layout component that arranges children in a Grid based on the definition.\n */\nexport function GridLayout(props: GridLayoutProps): ReactElement {\n  const { panelGroupId, panelOptions, panelFullHeight } = props;\n  const theme = useTheme();\n  const groupDefinition: PanelGroupDefinition = usePanelGroup(panelGroupId);\n  const { updatePanelGroupLayouts } = usePanelGroupActions(panelGroupId);\n\n  const [isOpen, setIsOpen] = useState(!groupDefinition.isCollapsed);\n  const { isEditMode } = useEditMode();\n\n  const [gridColWidth, setGridColWidth] = useState(0);\n\n  const viewPanelItemId = useViewPanelGroup();\n  const hasViewPanel = viewPanelItemId?.panelGroupId === panelGroupId; // current panelGroup contains the panel extended?\n  const itemLayoutViewed = viewPanelItemId?.panelGroupItemLayoutId;\n\n  // If there is a panel in view mode, we should hide the grid if the panel is not in the current group.\n  const isGridDisplayed = useMemo(() => {\n    if (viewPanelItemId === undefined) {\n      return true;\n    }\n    if (hasViewPanel) {\n      setIsOpen(true);\n    }\n    return hasViewPanel;\n  }, [hasViewPanel, viewPanelItemId]);\n\n  // Item layout is override if there is a panel in view mode\n  const itemLayouts: PanelGroupItemLayout[] = useMemo(() => {\n    if (itemLayoutViewed) {\n      return groupDefinition.itemLayouts.map((itemLayout) => {\n        if (itemLayout.i === itemLayoutViewed) {\n          const rowTitleHeight = 40 + 8; // 40 is the height of the row title and 8 is the margin height\n          return {\n            h: Math.round(((panelFullHeight ?? window.innerHeight) - rowTitleHeight) / (ROW_HEIGHT + DEFAULT_MARGIN)), // Viewed panel should take the full height remaining\n            i: itemLayoutViewed,\n            w: 48,\n            x: 0,\n            y: 0,\n          } as PanelGroupItemLayout;\n        }\n        return itemLayout;\n      });\n    }\n    return groupDefinition.itemLayouts;\n  }, [groupDefinition.itemLayouts, itemLayoutViewed, panelFullHeight]);\n\n  const handleLayoutChange = (currentLayout: Layout[], allLayouts: Layouts): void => {\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 && !hasViewPanel) {\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  ): void => {\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  // https://github.com/react-grid-layout/react-grid-layout?tab=readme-ov-file#react-hooks-performance\n  const ResponsiveGridLayout = useMemo(() => WidthProvider(Responsive), []);\n\n  return (\n    <GridContainer\n      sx={{\n        display: isGridDisplayed ? 'block' : 'none',\n        height: itemLayoutViewed ? `${panelFullHeight}px` : 'unset',\n        overflow: itemLayoutViewed ? 'hidden' : 'unset',\n      }}\n    >\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={ROW_HEIGHT}\n          draggableHandle=\".drag-handle\"\n          resizeHandles={['se']}\n          isDraggable={isEditMode && !hasViewPanel}\n          isResizable={isEditMode && !hasViewPanel}\n          margin={[DEFAULT_MARGIN, DEFAULT_MARGIN]}\n          containerPadding={[0, 10]}\n          layouts={{ [GRID_LAYOUT_SMALL_BREAKPOINT]: itemLayouts }}\n          onLayoutChange={handleLayoutChange}\n          onWidthChange={handleWidthChange}\n          allowOverlap={hasViewPanel} // Enabling overlap when viewing a specific panel because panel in front of the viewed panel will add empty spaces (empty row height)\n        >\n          {itemLayouts.map(({ i, w }) => (\n            <div\n              key={i}\n              style={{\n                display: itemLayoutViewed !== undefined ? (itemLayoutViewed === i ? 'unset' : 'none') : 'unset',\n              }}\n            >\n              <ErrorBoundary FallbackComponent={ErrorAlert}>\n                <GridItemContent\n                  panelOptions={panelOptions}\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): 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":["useMemo","useState","Responsive","WidthProvider","Collapse","useTheme","ErrorAlert","ErrorBoundary","useEditMode","usePanelGroup","usePanelGroupActions","useViewPanelGroup","GRID_LAYOUT_COLS","GRID_LAYOUT_SMALL_BREAKPOINT","GridTitle","GridItemContent","GridContainer","DEFAULT_MARGIN","ROW_HEIGHT","GridLayout","props","panelGroupId","panelOptions","panelFullHeight","theme","groupDefinition","updatePanelGroupLayouts","isOpen","setIsOpen","isCollapsed","isEditMode","gridColWidth","setGridColWidth","viewPanelItemId","hasViewPanel","itemLayoutViewed","panelGroupItemLayoutId","isGridDisplayed","undefined","itemLayouts","map","itemLayout","i","rowTitleHeight","h","Math","round","window","innerHeight","w","x","y","handleLayoutChange","currentLayout","allLayouts","smallLayout","handleWidthChange","containerWidth","margin","cols","containerPadding","marginX","marginWidth","containerPaddingWidth","ResponsiveGridLayout","sx","display","height","overflow","title","collapse","onToggleOpen","current","in","unmountOnExit","appear","data-testid","className","breakpoints","sm","values","xxs","rowHeight","draggableHandle","resizeHandles","isDraggable","isResizable","layouts","onLayoutChange","onWidthChange","allowOverlap","div","style","FallbackComponent","panelGroupItemId","width","calculateGridItemWidth","colWidth","Number","isFinite","max"],"mappings":"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"}

package/dist/components/GridLayout/GridTitle.js

@@ -37,7 +37,7 @@ import { usePanelGroupActions, useEditMode, useDeletePanelGroupDialog } from '..
         children: title
     });
     return /*#__PURE__*/ _jsx(Box, {
-        onClick: collapse === null || collapse === void 0 ? void 0 : collapse.onToggleOpen,
+        onClick: collapse?.onToggleOpen,
         sx: {
             display: 'flex',
             justifyContent: 'start',
@@ -104,7 +104,7 @@ import { usePanelGroupActions, useEditMode, useDeletePanelGroupDialog } from '..
                                 onClick: (e)=>{
                                     // Don't trigger expand/collapse
                                     e.stopPropagation();
-                                    moveDown === null || moveDown === void 0 ? void 0 : moveDown();
+                                    moveDown?.();
                                 },
                                 children: /*#__PURE__*/ _jsx(ArrowDownIcon, {})
                             })
@@ -117,7 +117,7 @@ import { usePanelGroupActions, useEditMode, useDeletePanelGroupDialog } from '..
                                 onClick: (e)=>{
                                     // Don't trigger expand/collapse
                                     e.stopPropagation();
-                                    moveUp === null || moveUp === void 0 ? void 0 : 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 { useReplaceVariablesInString } from '@perses-dev/plugin-system';\nimport { PanelGroupId } from '@perses-dev/core';\nimport { ReactElement } from 'react';\nimport { ARIA_LABEL_TEXT, TOOLTIP_TEXT } from '../../constants';\nimport { usePanelGroupActions, useEditMode, 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): ReactElement {\n  const { panelGroupId, title: rawTitle, collapse } = props;\n\n  const title = useReplaceVariablesInString(rawTitle) as string;\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        cursor: collapse ? 'pointer' : 'auto',\n        backgroundColor: ({ palette }) => palette.background.paper,\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?.();\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?.();\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","useReplaceVariablesInString","ARIA_LABEL_TEXT","TOOLTIP_TEXT","usePanelGroupActions","useEditMode","useDeletePanelGroupDialog","GridTitle","props","panelGroupId","title","rawTitle","collapse","openAddPanel","openEditPanelGroup","moveUp","moveDown","openDeletePanelGroupDialog","isEditMode","text","variant","onClick","onToggleOpen","sx","display","justifyContent","alignItems","cursor","backgroundColor","palette","background","paper","data-testid","marginRight","aria-label","isOpen","direction","marginLeft","description","addPanelToGroup","e","stopPropagation","editGroup","deleteGroup","moveGroupDown","disabled","undefined","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 { useReplaceVariablesInString } from '@perses-dev/plugin-system';\nimport { PanelGroupId } from '@perses-dev/core';\nimport { ReactElement } from 'react';\nimport { ARIA_LABEL_TEXT, TOOLTIP_TEXT } from '../../constants';\nimport { usePanelGroupActions, useEditMode, 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): ReactElement {\n  const { panelGroupId, title: rawTitle, collapse } = props;\n\n  const title = useReplaceVariablesInString(rawTitle) as string;\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        cursor: collapse ? 'pointer' : 'auto',\n        backgroundColor: ({ palette }) => palette.background.paper,\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?.();\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?.();\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","useReplaceVariablesInString","ARIA_LABEL_TEXT","TOOLTIP_TEXT","usePanelGroupActions","useEditMode","useDeletePanelGroupDialog","GridTitle","props","panelGroupId","title","rawTitle","collapse","openAddPanel","openEditPanelGroup","moveUp","moveDown","openDeletePanelGroupDialog","isEditMode","text","variant","onClick","onToggleOpen","sx","display","justifyContent","alignItems","cursor","backgroundColor","palette","background","paper","data-testid","marginRight","aria-label","isOpen","direction","marginLeft","description","addPanelToGroup","e","stopPropagation","editGroup","deleteGroup","moveGroupDown","disabled","undefined","moveGroupUp"],"mappings":"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"}

package/dist/components/Panel/HeaderIconButton.d.ts

@@ -0,0 +1,5 @@
+/// <reference types="react" />
+export declare const HeaderIconButton: import("@emotion/styled").StyledComponent<import("@mui/material").IconButtonOwnProps & Omit<import("@mui/material").ButtonBaseOwnProps, "classes"> & import("@mui/material/OverridableComponent").CommonProps & Omit<Omit<import("react").DetailedHTMLProps<import("react").ButtonHTMLAttributes<HTMLButtonElement>, HTMLButtonElement>, "ref"> & {
+    ref?: ((instance: HTMLButtonElement | null) => void) | import("react").RefObject<HTMLButtonElement> | null | undefined;
+}, "className" | "style" | "tabIndex" | "color" | "children" | "classes" | "action" | "centerRipple" | "disabled" | "disableRipple" | "disableTouchRipple" | "focusRipple" | "focusVisibleClassName" | "LinkComponent" | "onFocusVisible" | "sx" | "TouchRippleProps" | "touchRippleRef" | "disableFocusRipple" | "loading" | "loadingIndicator" | "size" | "edge"> & import("@mui/system").MUIStyledCommonProps<import("@mui/material").Theme>, {}, {}>;
+//# sourceMappingURL=HeaderIconButton.d.ts.map

package/dist/components/Panel/HeaderIconButton.d.ts.map

@@ -0,0 +1 @@
+{"version":3,"file":"HeaderIconButton.d.ts","sourceRoot":"","sources":["../../../src/components/Panel/HeaderIconButton.tsx"],"names":[],"mappings":";AAeA,eAAO,MAAM,gBAAgB;;wbAG1B,CAAC"}

package/dist/{stories/decorators/index.js → components/Panel/HeaderIconButton.js}

@@ -1,4 +1,4 @@
-// Copyright 2024 The Perses Authors
+// Copyright 2025 The Perses Authors
 // Licensed under the Apache License, Version 2.0 (the "License");
 // you may not use this file except in compliance with the License.
 // You may obtain a copy of the License at
@@ -10,9 +10,10 @@
 // WITHOUT WARRANTIES OR CONDITIONS OF ANY KIND, either express or implied.
 // See the License for the specific language governing permissions and
 // limitations under the License.
-export * from './constants';
-export * from './WithDashboard';
-export * from './WithDatasourceStore';
-export * from './WithVariables';
+import { IconButton, styled } from '@mui/material';
+export const HeaderIconButton = styled(IconButton)(({ theme })=>({
+        borderRadius: theme.shape.borderRadius,
+        padding: '4px'
+    }));
 
-//# sourceMappingURL=index.js.map
+//# sourceMappingURL=HeaderIconButton.js.map

package/dist/components/Panel/HeaderIconButton.js.map

@@ -0,0 +1 @@
+{"version":3,"sources":["../../../src/components/Panel/HeaderIconButton.tsx"],"sourcesContent":["// Copyright 2025 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 { IconButton, styled } from '@mui/material';\n\nexport const HeaderIconButton = styled(IconButton)(({ theme }) => ({\n  borderRadius: theme.shape.borderRadius,\n  padding: '4px',\n}));\n"],"names":["IconButton","styled","HeaderIconButton","theme","borderRadius","shape","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,SAASA,UAAU,EAAEC,MAAM,QAAQ,gBAAgB;AAEnD,OAAO,MAAMC,mBAAmBD,OAAOD,YAAY,CAAC,EAAEG,KAAK,EAAE,GAAM,CAAA;QACjEC,cAAcD,MAAME,KAAK,CAACD,YAAY;QACtCE,SAAS;IACX,CAAA,GAAI"}

package/dist/components/Panel/Panel.d.ts

@@ -1,6 +1,6 @@
-import { ReactNode } from 'react';
-import { PanelDefinition } from '@perses-dev/core';
 import { CardProps } from '@mui/material';
+import { PanelDefinition } from '@perses-dev/core';
+import { ReactNode } from 'react';
 import { PanelGroupItemId } from '../../context';
 import { PanelHeaderProps } from './PanelHeader';
 export interface PanelProps extends CardProps<'section'> {
@@ -34,6 +34,11 @@ export type PanelExtraProps = {
 };
 /**
  * Renders a PanelDefinition's content inside of a Card.
+ *
+ * Internal structure:
+ * <Panel>                  // renders an entire panel, incl. header and action buttons
+ *   <PanelContent>         // renders loading, error or panel based on the queries' status
+ *     <PanelPluginLoader>  // loads a panel plugin from the plugin registry and renders the PanelComponent with data from props.queryResults
  */
 export declare const Panel: import("react").NamedExoticComponent<PanelProps>;
 //# sourceMappingURL=Panel.d.ts.map

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

@@ -1 +1 @@
-{"version":3,"file":"Panel.d.ts","sourceRoot":"","sources":["../../../src/components/Panel/Panel.tsx"],"names":[],"mappings":"AAaA,OAAO,EAA2B,SAAS,EAAE,MAAM,OAAO,CAAC;AAG3D,OAAO,EAAE,eAAe,EAAE,MAAM,kBAAkB,CAAC;AACnD,OAAO,EAAQ,SAAS,EAAe,MAAM,eAAe,CAAC;AAC7D,OAAO,EAAE,gBAAgB,EAAE,MAAM,eAAe,CAAC;AACjD,OAAO,EAAe,gBAAgB,EAAE,MAAM,eAAe,CAAC;AAG9D,MAAM,WAAW,UAAW,SAAQ,SAAS,CAAC,SAAS,CAAC;IACtD,UAAU,EAAE,eAAe,CAAC;IAC5B,YAAY,CAAC,EAAE,gBAAgB,CAAC,cAAc,CAAC,CAAC;IAChD,YAAY,CAAC,EAAE,gBAAgB,CAAC,cAAc,CAAC,CAAC;IAChD,YAAY,CAAC,EAAE,YAAY,CAAC;IAC5B,gBAAgB,CAAC,EAAE,gBAAgB,CAAC;CACrC;AAED,MAAM,MAAM,YAAY,GAAG;IACzB;;;OAGG;IACH,UAAU,CAAC,EAAE,OAAO,CAAC;IACrB;;;OAGG;IACH,KAAK,CAAC,EAAE,CAAC,KAAK,EAAE,eAAe,KAAK,SAAS,CAAC;CAC/C,CAAC;AAEF,MAAM,MAAM,eAAe,GAAG;IAC5B;;OAEG;IACH,eAAe,CAAC,EAAE,eAAe,CAAC;IAClC;;OAEG;IACH,gBAAgB,CAAC,EAAE,gBAAgB,CAAC;CACrC,CAAC;AAEF;;GAEG;AACH,eAAO,MAAM,KAAK,kDA8FhB,CAAC"}
+{"version":3,"file":"Panel.d.ts","sourceRoot":"","sources":["../../../src/components/Panel/Panel.tsx"],"names":[],"mappings":"AAaA,OAAO,EAAqB,SAAS,EAAE,MAAM,eAAe,CAAC;AAE7D,OAAO,EAAE,eAAe,EAAE,MAAM,kBAAkB,CAAC;AAEnD,OAAO,EAAE,SAAS,EAA2B,MAAM,OAAO,CAAC;AAE3D,OAAO,EAAE,gBAAgB,EAAE,MAAM,eAAe,CAAC;AAEjD,OAAO,EAAe,gBAAgB,EAAE,MAAM,eAAe,CAAC;AAE9D,MAAM,WAAW,UAAW,SAAQ,SAAS,CAAC,SAAS,CAAC;IACtD,UAAU,EAAE,eAAe,CAAC;IAC5B,YAAY,CAAC,EAAE,gBAAgB,CAAC,cAAc,CAAC,CAAC;IAChD,YAAY,CAAC,EAAE,gBAAgB,CAAC,cAAc,CAAC,CAAC;IAChD,YAAY,CAAC,EAAE,YAAY,CAAC;IAC5B,gBAAgB,CAAC,EAAE,gBAAgB,CAAC;CACrC;AAED,MAAM,MAAM,YAAY,GAAG;IACzB;;;OAGG;IACH,UAAU,CAAC,EAAE,OAAO,CAAC;IACrB;;;OAGG;IACH,KAAK,CAAC,EAAE,CAAC,KAAK,EAAE,eAAe,KAAK,SAAS,CAAC;CAC/C,CAAC;AAEF,MAAM,MAAM,eAAe,GAAG;IAC5B;;OAEG;IACH,eAAe,CAAC,EAAE,eAAe,CAAC;IAClC;;OAEG;IACH,gBAAgB,CAAC,EAAE,gBAAgB,CAAC;CACrC,CAAC;AAEF;;;;;;;GAOG;AACH,eAAO,MAAM,KAAK,kDAmGhB,CAAC"}

package/dist/components/Panel/Panel.js

@@ -11,16 +11,21 @@
 // See the License for the specific language governing permissions and
 // limitations under the License.
 import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
-import { useState, useMemo, memo } from 'react';
-import useResizeObserver from 'use-resize-observer';
-import { ErrorBoundary, ErrorAlert, combineSx, useId, useChartsTheme } from '@perses-dev/components';
 import { Card, CardContent } from '@mui/material';
-import { PanelHeader } from './PanelHeader';
+import { ErrorAlert, ErrorBoundary, combineSx, useChartsTheme, useId } from '@perses-dev/components';
+import { useDataQueriesContext } from '@perses-dev/plugin-system';
+import { memo, useMemo, useState } from 'react';
+import useResizeObserver from 'use-resize-observer';
 import { PanelContent } from './PanelContent';
+import { PanelHeader } from './PanelHeader';
 /**
  * Renders a PanelDefinition's content inside of a Card.
+ *
+ * Internal structure:
+ * <Panel>                  // renders an entire panel, incl. header and action buttons
+ *   <PanelContent>         // renders loading, error or panel based on the queries' status
+ *     <PanelPluginLoader>  // loads a panel plugin from the plugin registry and renders the PanelComponent with data from props.queryResults
  */ export const Panel = /*#__PURE__*/ memo(function Panel(props) {
-    var _panelOptions_extra;
     const { definition, readHandlers, editHandlers, onMouseEnter, onMouseLeave, sx, panelOptions, panelGroupItemId, ...others } = props;
     // Make sure we have an ID we can use for aria attributes
     const generatedPanelId = useId('Panel');
@@ -40,11 +45,12 @@ import { PanelContent } from './PanelContent';
         height
     ]);
     const chartsTheme = useChartsTheme();
+    const { queryResults } = useDataQueriesContext();
     const handleMouseEnter = (e)=>{
-        onMouseEnter === null || onMouseEnter === void 0 ? void 0 : onMouseEnter(e);
+        onMouseEnter?.(e);
     };
     const handleMouseLeave = (e)=>{
-        onMouseLeave === null || onMouseLeave === void 0 ? void 0 : onMouseLeave(e);
+        onMouseLeave?.(e);
     };
     return /*#__PURE__*/ _jsxs(Card, {
         component: "section",
@@ -52,7 +58,10 @@ import { PanelContent } from './PanelContent';
             width: '100%',
             height: '100%',
             display: 'flex',
-            flexFlow: 'column nowrap'
+            flexFlow: 'column nowrap',
+            ':hover': {
+                '--panel-hover': 'block'
+            }
         }, sx),
         variant: "outlined",
         onMouseEnter: handleMouseEnter,
@@ -62,14 +71,15 @@ import { PanelContent } from './PanelContent';
         "data-testid": "panel",
         ...others,
         children: [
-            !(panelOptions === null || panelOptions === void 0 ? void 0 : panelOptions.hideHeader) && /*#__PURE__*/ _jsx(PanelHeader, {
-                extra: panelOptions === null || panelOptions === void 0 ? void 0 : (_panelOptions_extra = panelOptions.extra) === null || _panelOptions_extra === void 0 ? void 0 : _panelOptions_extra.call(panelOptions, {
+            !panelOptions?.hideHeader && /*#__PURE__*/ _jsx(PanelHeader, {
+                extra: panelOptions?.extra?.({
                     panelDefinition: definition,
                     panelGroupItemId
                 }),
                 id: headerId,
                 title: definition.spec.display.name,
                 description: definition.spec.display.description,
+                queryResults: queryResults,
                 readHandlers: readHandlers,
                 editHandlers: editHandlers,
                 links: definition.spec.links,
@@ -100,7 +110,8 @@ import { PanelContent } from './PanelContent';
                         definition: definition,
                         panelPluginKind: definition.spec.plugin.kind,
                         spec: definition.spec.plugin.spec,
-                        contentDimensions: contentDimensions
+                        contentDimensions: contentDimensions,
+                        queryResults: queryResults
                     })
                 })
             })

package/dist/components/Panel/Panel.js.map

@@ -1 +1 @@
-{"version":3,"sources":["../../../src/components/Panel/Panel.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, useMemo, memo, ReactNode } from 'react';\nimport useResizeObserver from 'use-resize-observer';\nimport { ErrorBoundary, ErrorAlert, combineSx, useId, useChartsTheme } from '@perses-dev/components';\nimport { PanelDefinition } from '@perses-dev/core';\nimport { Card, CardProps, CardContent } from '@mui/material';\nimport { PanelGroupItemId } from '../../context';\nimport { PanelHeader, PanelHeaderProps } from './PanelHeader';\nimport { PanelContent } from './PanelContent';\n\nexport interface PanelProps extends CardProps<'section'> {\n  definition: PanelDefinition;\n  readHandlers?: PanelHeaderProps['readHandlers'];\n  editHandlers?: PanelHeaderProps['editHandlers'];\n  panelOptions?: PanelOptions;\n  panelGroupItemId?: PanelGroupItemId;\n}\n\nexport type PanelOptions = {\n  /**\n   * Allow you to hide the panel header if desired.\n   * This can be useful in embedded mode for example.\n   */\n  hideHeader?: boolean;\n  /**\n   * Content to render in right of the panel header. (top right of the panel)\n   * It will only be rendered when the panel is in edit mode.\n   */\n  extra?: (props: PanelExtraProps) => ReactNode;\n};\n\nexport type PanelExtraProps = {\n  /**\n   * The PanelDefinition for the panel.\n   */\n  panelDefinition?: PanelDefinition;\n  /**\n   * The PanelGroupItemId for the panel.\n   */\n  panelGroupItemId?: PanelGroupItemId;\n};\n\n/**\n * Renders a PanelDefinition's content inside of a Card.\n */\nexport const Panel = memo(function Panel(props: PanelProps) {\n  const {\n    definition,\n    readHandlers,\n    editHandlers,\n    onMouseEnter,\n    onMouseLeave,\n    sx,\n    panelOptions,\n    panelGroupItemId,\n    ...others\n  } = props;\n\n  // Make sure we have an ID we can use for aria attributes\n  const generatedPanelId = useId('Panel');\n  const headerId = `${generatedPanelId}-header`;\n\n  const [contentElement, setContentElement] = useState<HTMLElement | null>(null);\n\n  const { width, height } = useResizeObserver({ ref: contentElement });\n\n  const contentDimensions = useMemo(() => {\n    if (width === undefined || height === undefined) return undefined;\n    return { width, height };\n  }, [width, height]);\n\n  const chartsTheme = useChartsTheme();\n\n  const handleMouseEnter: CardProps['onMouseEnter'] = (e) => {\n    onMouseEnter?.(e);\n  };\n\n  const handleMouseLeave: CardProps['onMouseLeave'] = (e) => {\n    onMouseLeave?.(e);\n  };\n\n  return (\n    <Card\n      component=\"section\"\n      sx={combineSx(\n        {\n          width: '100%',\n          height: '100%',\n          display: 'flex',\n          flexFlow: 'column nowrap',\n        },\n        sx\n      )}\n      variant=\"outlined\"\n      onMouseEnter={handleMouseEnter}\n      onMouseLeave={handleMouseLeave}\n      aria-labelledby={headerId}\n      aria-describedby={headerId}\n      data-testid=\"panel\"\n      {...others}\n    >\n      {!panelOptions?.hideHeader && (\n        <PanelHeader\n          extra={panelOptions?.extra?.({ panelDefinition: definition, panelGroupItemId })}\n          id={headerId}\n          title={definition.spec.display.name}\n          description={definition.spec.display.description}\n          readHandlers={readHandlers}\n          editHandlers={editHandlers}\n          links={definition.spec.links}\n          sx={{ paddingX: `${chartsTheme.container.padding.default}px` }}\n        />\n      )}\n      <CardContent\n        component=\"figure\"\n        sx={{\n          position: 'relative',\n          overflow: 'hidden',\n          flexGrow: 1,\n          margin: 0,\n          padding: 0,\n          // Override MUI default style for last-child\n          ':last-child': {\n            padding: 0,\n          },\n        }}\n        ref={setContentElement}\n      >\n        <ErrorBoundary FallbackComponent={ErrorAlert} resetKeys={[definition.spec]}>\n          <PanelContent\n            definition={definition}\n            panelPluginKind={definition.spec.plugin.kind}\n            spec={definition.spec.plugin.spec}\n            contentDimensions={contentDimensions}\n          />\n        </ErrorBoundary>\n      </CardContent>\n    </Card>\n  );\n});\n"],"names":["useState","useMemo","memo","useResizeObserver","ErrorBoundary","ErrorAlert","combineSx","useId","useChartsTheme","Card","CardContent","PanelHeader","PanelContent","Panel","props","panelOptions","definition","readHandlers","editHandlers","onMouseEnter","onMouseLeave","sx","panelGroupItemId","others","generatedPanelId","headerId","contentElement","setContentElement","width","height","ref","contentDimensions","undefined","chartsTheme","handleMouseEnter","e","handleMouseLeave","component","display","flexFlow","variant","aria-labelledby","aria-describedby","data-testid","hideHeader","extra","panelDefinition","id","title","spec","name","description","links","paddingX","container","padding","default","position","overflow","flexGrow","margin","FallbackComponent","resetKeys","panelPluginKind","plugin","kind"],"mappings":"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"}
+{"version":3,"sources":["../../../src/components/Panel/Panel.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 { Card, CardContent, CardProps } from '@mui/material';\nimport { ErrorAlert, ErrorBoundary, combineSx, useChartsTheme, useId } from '@perses-dev/components';\nimport { PanelDefinition } from '@perses-dev/core';\nimport { useDataQueriesContext } from '@perses-dev/plugin-system';\nimport { ReactNode, memo, useMemo, useState } from 'react';\nimport useResizeObserver from 'use-resize-observer';\nimport { PanelGroupItemId } from '../../context';\nimport { PanelContent } from './PanelContent';\nimport { PanelHeader, PanelHeaderProps } from './PanelHeader';\n\nexport interface PanelProps extends CardProps<'section'> {\n  definition: PanelDefinition;\n  readHandlers?: PanelHeaderProps['readHandlers'];\n  editHandlers?: PanelHeaderProps['editHandlers'];\n  panelOptions?: PanelOptions;\n  panelGroupItemId?: PanelGroupItemId;\n}\n\nexport type PanelOptions = {\n  /**\n   * Allow you to hide the panel header if desired.\n   * This can be useful in embedded mode for example.\n   */\n  hideHeader?: boolean;\n  /**\n   * Content to render in right of the panel header. (top right of the panel)\n   * It will only be rendered when the panel is in edit mode.\n   */\n  extra?: (props: PanelExtraProps) => ReactNode;\n};\n\nexport type PanelExtraProps = {\n  /**\n   * The PanelDefinition for the panel.\n   */\n  panelDefinition?: PanelDefinition;\n  /**\n   * The PanelGroupItemId for the panel.\n   */\n  panelGroupItemId?: PanelGroupItemId;\n};\n\n/**\n * Renders a PanelDefinition's content inside of a Card.\n *\n * Internal structure:\n * <Panel>                  // renders an entire panel, incl. header and action buttons\n *   <PanelContent>         // renders loading, error or panel based on the queries' status\n *     <PanelPluginLoader>  // loads a panel plugin from the plugin registry and renders the PanelComponent with data from props.queryResults\n */\nexport const Panel = memo(function Panel(props: PanelProps) {\n  const {\n    definition,\n    readHandlers,\n    editHandlers,\n    onMouseEnter,\n    onMouseLeave,\n    sx,\n    panelOptions,\n    panelGroupItemId,\n    ...others\n  } = props;\n\n  // Make sure we have an ID we can use for aria attributes\n  const generatedPanelId = useId('Panel');\n  const headerId = `${generatedPanelId}-header`;\n\n  const [contentElement, setContentElement] = useState<HTMLElement | null>(null);\n\n  const { width, height } = useResizeObserver({ ref: contentElement });\n\n  const contentDimensions = useMemo(() => {\n    if (width === undefined || height === undefined) return undefined;\n    return { width, height };\n  }, [width, height]);\n\n  const chartsTheme = useChartsTheme();\n\n  const { queryResults } = useDataQueriesContext();\n\n  const handleMouseEnter: CardProps['onMouseEnter'] = (e) => {\n    onMouseEnter?.(e);\n  };\n\n  const handleMouseLeave: CardProps['onMouseLeave'] = (e) => {\n    onMouseLeave?.(e);\n  };\n\n  return (\n    <Card\n      component=\"section\"\n      sx={combineSx(\n        {\n          width: '100%',\n          height: '100%',\n          display: 'flex',\n          flexFlow: 'column nowrap',\n          ':hover': { '--panel-hover': 'block' },\n        },\n        sx\n      )}\n      variant=\"outlined\"\n      onMouseEnter={handleMouseEnter}\n      onMouseLeave={handleMouseLeave}\n      aria-labelledby={headerId}\n      aria-describedby={headerId}\n      data-testid=\"panel\"\n      {...others}\n    >\n      {!panelOptions?.hideHeader && (\n        <PanelHeader\n          extra={panelOptions?.extra?.({ panelDefinition: definition, panelGroupItemId })}\n          id={headerId}\n          title={definition.spec.display.name}\n          description={definition.spec.display.description}\n          queryResults={queryResults}\n          readHandlers={readHandlers}\n          editHandlers={editHandlers}\n          links={definition.spec.links}\n          sx={{ paddingX: `${chartsTheme.container.padding.default}px` }}\n        />\n      )}\n      <CardContent\n        component=\"figure\"\n        sx={{\n          position: 'relative',\n          overflow: 'hidden',\n          flexGrow: 1,\n          margin: 0,\n          padding: 0,\n          // Override MUI default style for last-child\n          ':last-child': {\n            padding: 0,\n          },\n        }}\n        ref={setContentElement}\n      >\n        <ErrorBoundary FallbackComponent={ErrorAlert} resetKeys={[definition.spec]}>\n          <PanelContent\n            definition={definition}\n            panelPluginKind={definition.spec.plugin.kind}\n            spec={definition.spec.plugin.spec}\n            contentDimensions={contentDimensions}\n            queryResults={queryResults}\n          />\n        </ErrorBoundary>\n      </CardContent>\n    </Card>\n  );\n});\n"],"names":["Card","CardContent","ErrorAlert","ErrorBoundary","combineSx","useChartsTheme","useId","useDataQueriesContext","memo","useMemo","useState","useResizeObserver","PanelContent","PanelHeader","Panel","props","definition","readHandlers","editHandlers","onMouseEnter","onMouseLeave","sx","panelOptions","panelGroupItemId","others","generatedPanelId","headerId","contentElement","setContentElement","width","height","ref","contentDimensions","undefined","chartsTheme","queryResults","handleMouseEnter","e","handleMouseLeave","component","display","flexFlow","variant","aria-labelledby","aria-describedby","data-testid","hideHeader","extra","panelDefinition","id","title","spec","name","description","links","paddingX","container","padding","default","position","overflow","flexGrow","margin","FallbackComponent","resetKeys","panelPluginKind","plugin","kind"],"mappings":"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"}