@perses-dev/dashboards 0.39.0 → 0.40.1

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

@@ -1 +1 @@
-{"version":3,"sources":["../../../src/components/EditJsonDialog/EditJsonDialog.tsx"],"sourcesContent":["// Copyright 2023 The Perses Authors\n// Licensed under the Apache License, Version 2.0 (the \"License\");\n// you may not use this file except in compliance with the License.\n// You may obtain a copy of the License at\n//\n// http://www.apache.org/licenses/LICENSE-2.0\n//\n// Unless required by applicable law or agreed to in writing, software\n// distributed under the License is distributed on an \"AS IS\" BASIS,\n// WITHOUT WARRANTIES OR CONDITIONS OF ANY KIND, either express or implied.\n// See the License for the specific language governing permissions and\n// limitations under the License.\n\nimport { FormEvent, useState } from 'react';\nimport { Alert, FormControl } from '@mui/material';\nimport { Dialog, JSONEditor } from '@perses-dev/components';\nimport { useTimeRange } from '@perses-dev/plugin-system';\nimport { useEditJsonDialog } from '../../context/DashboardProvider';\nimport { useDashboard } from '../../context/useDashboard';\n\nexport const EditJsonDialog = () => {\n  const { editJsonDialog, closeEditJsonDialog } = useEditJsonDialog();\n\n  return (\n    <Dialog open={!!editJsonDialog?.isOpen} scroll=\"paper\" fullWidth maxWidth=\"lg\">\n      <Dialog.Header onClose={() => closeEditJsonDialog()}>Edit Dashboard</Dialog.Header>\n      {editJsonDialog?.isOpen && <EditJsonDialogForm />}\n    </Dialog>\n  );\n};\n\nconst EditJsonDialogForm = () => {\n  const { closeEditJsonDialog } = useEditJsonDialog();\n  const { setTimeRange, setRefreshInterval } = useTimeRange();\n  const { dashboard, setDashboard } = useDashboard();\n  const [draftDashboard, setDraftDashboard] = useState(dashboard);\n\n  const handleApply = (e: FormEvent) => {\n    e.preventDefault();\n    setDashboard(draftDashboard);\n    setTimeRange({ pastDuration: draftDashboard.spec.duration });\n    setRefreshInterval(draftDashboard.spec.refreshInterval ?? '0s');\n    closeEditJsonDialog();\n  };\n\n  return (\n    <Dialog.Form onSubmit={handleApply}>\n      <Dialog.Content sx={{ width: '100%' }}>\n        <Alert sx={{ marginBottom: (theme) => theme.spacing(1) }} severity=\"warning\">\n          Metadata cannot be modified or saved.\n        </Alert>\n        <FormControl fullWidth>\n          <JSONEditor\n            minHeight=\"300px\"\n            maxHeight=\"700px\"\n            value={draftDashboard}\n            onChange={(value) => setDraftDashboard(value)}\n          />\n        </FormControl>\n      </Dialog.Content>\n      <Dialog.Actions>\n        <Dialog.PrimaryButton onClick={handleApply}>Apply</Dialog.PrimaryButton>\n      </Dialog.Actions>\n    </Dialog.Form>\n  );\n};\n"],"names":["useState","Alert","FormControl","Dialog","JSONEditor","useTimeRange","useEditJsonDialog","useDashboard","EditJsonDialog","editJsonDialog","closeEditJsonDialog","open","isOpen","scroll","fullWidth","maxWidth","Header","onClose","EditJsonDialogForm","setTimeRange","setRefreshInterval","dashboard","setDashboard","draftDashboard","setDraftDashboard","handleApply","e","preventDefault","pastDuration","spec","duration","refreshInterval","Form","onSubmit","Content","sx","width","marginBottom","theme","spacing","severity","minHeight","maxHeight","value","onChange","Actions","PrimaryButton","onClick"],"mappings":"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"}
+{"version":3,"sources":["../../../src/components/EditJsonDialog/EditJsonDialog.tsx"],"sourcesContent":["// Copyright 2023 The Perses Authors\n// Licensed under the Apache License, Version 2.0 (the \"License\");\n// you may not use this file except in compliance with the License.\n// You may obtain a copy of the License at\n//\n// http://www.apache.org/licenses/LICENSE-2.0\n//\n// Unless required by applicable law or agreed to in writing, software\n// distributed under the License is distributed on an \"AS IS\" BASIS,\n// WITHOUT WARRANTIES OR CONDITIONS OF ANY KIND, either express or implied.\n// See the License for the specific language governing permissions and\n// limitations under the License.\n\nimport { FormEvent, useState } from 'react';\nimport { Alert, FormControl } from '@mui/material';\nimport { Dialog, JSONEditor } from '@perses-dev/components';\nimport { useTimeRange } from '@perses-dev/plugin-system';\nimport { useEditJsonDialog } from '../../context/DashboardProvider';\nimport { useDashboard } from '../../context/useDashboard';\n\nexport interface EditJsonDialogProps {\n  disableMetadataEdition?: boolean;\n}\n\nexport const EditJsonDialog = (props: EditJsonDialogProps) => {\n  const { disableMetadataEdition } = props;\n  const { editJsonDialog, closeEditJsonDialog } = useEditJsonDialog();\n\n  return (\n    <Dialog open={!!editJsonDialog?.isOpen} scroll=\"paper\" fullWidth maxWidth=\"lg\">\n      <Dialog.Header onClose={() => closeEditJsonDialog()}>Edit Dashboard JSON</Dialog.Header>\n      {editJsonDialog?.isOpen && <EditJsonDialogForm disableMetadataEdition={disableMetadataEdition} />}\n    </Dialog>\n  );\n};\n\nconst EditJsonDialogForm = (props: EditJsonDialogProps) => {\n  const { disableMetadataEdition } = props;\n  const { closeEditJsonDialog } = useEditJsonDialog();\n  const { setTimeRange, setRefreshInterval } = useTimeRange();\n  const { dashboard, setDashboard } = useDashboard();\n  const [draftDashboard, setDraftDashboard] = useState(dashboard);\n\n  const handleApply = (e: FormEvent) => {\n    e.preventDefault();\n    setDashboard(draftDashboard);\n    setTimeRange({ pastDuration: draftDashboard.spec.duration });\n    setRefreshInterval(draftDashboard.spec.refreshInterval ?? '0s');\n    closeEditJsonDialog();\n  };\n\n  return (\n    <Dialog.Form onSubmit={handleApply}>\n      <Dialog.Content sx={{ width: '100%' }}>\n        {disableMetadataEdition && (\n          <Alert sx={{ marginBottom: (theme) => theme.spacing(1) }} severity=\"warning\">\n            Metadata cannot be modified or saved.\n          </Alert>\n        )}\n        <FormControl fullWidth>\n          <JSONEditor\n            minHeight=\"300px\"\n            maxHeight=\"70vh\"\n            value={draftDashboard}\n            onChange={(value) => setDraftDashboard(value)}\n          />\n        </FormControl>\n      </Dialog.Content>\n      <Dialog.Actions>\n        <Dialog.PrimaryButton onClick={handleApply}>Apply</Dialog.PrimaryButton>\n      </Dialog.Actions>\n    </Dialog.Form>\n  );\n};\n"],"names":["useState","Alert","FormControl","Dialog","JSONEditor","useTimeRange","useEditJsonDialog","useDashboard","EditJsonDialog","props","disableMetadataEdition","editJsonDialog","closeEditJsonDialog","open","isOpen","scroll","fullWidth","maxWidth","Header","onClose","EditJsonDialogForm","setTimeRange","setRefreshInterval","dashboard","setDashboard","draftDashboard","setDraftDashboard","handleApply","e","preventDefault","pastDuration","spec","duration","refreshInterval","Form","onSubmit","Content","sx","width","marginBottom","theme","spacing","severity","minHeight","maxHeight","value","onChange","Actions","PrimaryButton","onClick"],"mappings":"AAAA,oCAAoC;AACpC,kEAAkE;AAClE,mEAAmE;AACnE,0CAA0C;AAC1C,EAAE;AACF,6CAA6C;AAC7C,EAAE;AACF,sEAAsE;AACtE,oEAAoE;AACpE,2EAA2E;AAC3E,sEAAsE;AACtE,iCAAiC;;AAEjC,SAAoBA,QAAQ,QAAQ,QAAQ;AAC5C,SAASC,KAAK,EAAEC,WAAW,QAAQ,gBAAgB;AACnD,SAASC,MAAM,EAAEC,UAAU,QAAQ,yBAAyB;AAC5D,SAASC,YAAY,QAAQ,4BAA4B;AACzD,SAASC,iBAAiB,QAAQ,kCAAkC;AACpE,SAASC,YAAY,QAAQ,6BAA6B;AAM1D,OAAO,MAAMC,iBAAiB,CAACC;IAC7B,MAAM,EAAEC,uBAAsB,EAAE,GAAGD;IACnC,MAAM,EAAEE,eAAc,EAAEC,oBAAmB,EAAE,GAAGN;IAEhD,qBACE,MAACH;QAAOU,MAAM,CAAC,CAACF,CAAAA,2BAAAA,4BAAAA,KAAAA,IAAAA,eAAgBG,MAAK;QAAGC,QAAO;QAAQC,SAAS;QAACC,UAAS;;0BACxE,KAACd,OAAOe;gBAAOC,SAAS,IAAMP;0BAAuB;;YACpDD,CAAAA,2BAAAA,4BAAAA,KAAAA,IAAAA,eAAgBG,MAAK,mBAAK,KAACM;gBAAmBV,wBAAwBA;;;;AAG7E,EAAE;AAEF,MAAMU,qBAAqB,CAACX;IAC1B,MAAM,EAAEC,uBAAsB,EAAE,GAAGD;IACnC,MAAM,EAAEG,oBAAmB,EAAE,GAAGN;IAChC,MAAM,EAAEe,aAAY,EAAEC,mBAAkB,EAAE,GAAGjB;IAC7C,MAAM,EAAEkB,UAAS,EAAEC,aAAY,EAAE,GAAGjB;IACpC,MAAM,CAACkB,gBAAgBC,kBAAkB,GAAG1B,SAASuB;IAErD,MAAMI,cAAc,CAACC;QACnBA,EAAEC;QACFL,aAAaC;QACbJ,aAAa;YAAES,cAAcL,eAAeM,KAAKC;QAAS;YACvCP;QAAnBH,mBAAmBG,CAAAA,uCAAAA,eAAeM,KAAKE,6BAApBR,kDAAAA,uCAAuC;QAC1Db;IACF;IAEA,qBACE,MAACT,OAAO+B;QAAKC,UAAUR;;0BACrB,MAACxB,OAAOiC;gBAAQC,IAAI;oBAAEC,OAAO;gBAAO;;oBACjC5B,wCACC,KAACT;wBAAMoC,IAAI;4BAAEE,cAAc,CAACC,QAAUA,MAAMC,QAAQ;wBAAG;wBAAGC,UAAS;kCAAU;;kCAI/E,KAACxC;wBAAYc,SAAS;kCACpB,cAAA,KAACZ;4BACCuC,WAAU;4BACVC,WAAU;4BACVC,OAAOpB;4BACPqB,UAAU,CAACD,QAAUnB,kBAAkBmB;;;;;0BAI7C,KAAC1C,OAAO4C;0BACN,cAAA,KAAC5C,OAAO6C;oBAAcC,SAAStB;8BAAa;;;;;AAIpD"}

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

@@ -1 +1 @@
-{"version":3,"sources":["../../../src/components/EditJsonDialog/index.ts"],"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\nexport * from './EditJsonDialog';\n"],"names":[],"mappings":"AAAA,oCAAoC;AACpC,kEAAkE;AAClE,mEAAmE;AACnE,0CAA0C;AAC1C,EAAE;AACF,6CAA6C;AAC7C,EAAE;AACF,sEAAsE;AACtE,oEAAoE;AACpE,2EAA2E;AAC3E,sEAAsE;AACtE,iCAAiC;AAEjC,cAAc,kBAAkB,CAAC"}
+{"version":3,"sources":["../../../src/components/EditJsonDialog/index.ts"],"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\nexport * from './EditJsonDialog';\n"],"names":[],"mappings":"AAAA,oCAAoC;AACpC,kEAAkE;AAClE,mEAAmE;AACnE,0CAA0C;AAC1C,EAAE;AACF,6CAA6C;AAC7C,EAAE;AACF,sEAAsE;AACtE,oEAAoE;AACpE,2EAA2E;AAC3E,sEAAsE;AACtE,iCAAiC;AAEjC,cAAc,mBAAmB"}

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 { 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?: React.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 = '450px';\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 = ({ actions, isEditMode, onEditButtonClick }: EmptyDashboardActionsProps) => {\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) => {\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":"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"}
+{"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 { 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?: React.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 = '450px';\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 = ({ actions, isEditMode, onEditButtonClick }: EmptyDashboardActionsProps) => {\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) => {\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;AAChD,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,EAAEC,QAAO,EAAEC,WAAU,EAAEC,kBAAiB,EAA8B;IACnG,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,OAAQjB,cAAa,EACrBkB,MAAK,EACLC,YAAW,EACXC,eAAc,EACdV,QAAO,EACPE,kBAAiB,EACG;IACpB,MAAM,EAAED,WAAU,EAAE,GAAGf;IAEvB,MAAMyB,qBAAqBV,aAAaV,oBAAoBC,OAAOD,oBAAoBE;IACvF,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"}

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

@@ -1 +1 @@
-{"version":3,"sources":["../../../src/components/EmptyDashboard/index.ts"],"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\nexport * from './EmptyDashboard';\n"],"names":[],"mappings":"AAAA,oCAAoC;AACpC,kEAAkE;AAClE,mEAAmE;AACnE,0CAA0C;AAC1C,EAAE;AACF,6CAA6C;AAC7C,EAAE;AACF,sEAAsE;AACtE,oEAAoE;AACpE,2EAA2E;AAC3E,sEAAsE;AACtE,iCAAiC;AAEjC,cAAc,kBAAkB,CAAC"}
+{"version":3,"sources":["../../../src/components/EmptyDashboard/index.ts"],"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\nexport * from './EmptyDashboard';\n"],"names":[],"mappings":"AAAA,oCAAoC;AACpC,kEAAkE;AAClE,mEAAmE;AACnE,0CAA0C;AAC1C,EAAE;AACF,6CAA6C;AAC7C,EAAE;AACF,sEAAsE;AACtE,oEAAoE;AACpE,2EAA2E;AAC3E,sEAAsE;AACtE,iCAAiC;AAEjC,cAAc,mBAAmB"}

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 { useEffect, useState } from 'react';\nimport { styled } from '@mui/material';\n\nexport interface GridContainerProps {\n  children: React.ReactNode;\n}\n\nexport function GridContainer(props: GridContainerProps) {\n  const [isFirstRender, setIsFirstRender] = useState(true);\n  useEffect(() => {\n    if (isFirstRender) {\n      setIsFirstRender(false);\n    }\n  }, [isFirstRender]);\n\n  return (\n    <ReactGridLayoutContainer\n      sx={{\n        // This adds spcing between grids (rows) in the overall dashboard\n        '& + &': { marginTop: (theme) => theme.spacing(1) },\n        // This disables the animation of grid items when a grid is first rendered\n        // (see https://github.com/react-grid-layout/react-grid-layout/issues/103)\n        '& .react-grid-item.cssTransforms': { transitionProperty: isFirstRender ? 'none' : 'transform' },\n      }}\n      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","theme","spacing","transitionProperty","data-testid","children","position","transition","pointerEvents","userSelect","zIndex","willChange","visibility","background","palette","primary","main","opacity","transitionDuration","WebkitUserSelect","MozUserSelect","msUserSelect","OUserSelect","width","height","content","right","bottom","borderRight","text","secondary","borderBottom","display","left","cursor","transform","top","marginLeft","backgroundRepeat","backgroundOrigin","boxSizing","backgroundImage","backgroundPosition","padding"],"mappings":"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"}
+{"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 { useEffect, useState } from 'react';\nimport { styled } from '@mui/material';\n\nexport interface GridContainerProps {\n  children: React.ReactNode;\n}\n\nexport function GridContainer(props: GridContainerProps) {\n  const [isFirstRender, setIsFirstRender] = useState(true);\n  useEffect(() => {\n    if (isFirstRender) {\n      setIsFirstRender(false);\n    }\n  }, [isFirstRender]);\n\n  return (\n    <ReactGridLayoutContainer\n      sx={{\n        // This adds spcing between grids (rows) in the overall dashboard\n        '& + &': { marginTop: (theme) => theme.spacing(1) },\n        // This disables the animation of grid items when a grid is first rendered\n        // (see https://github.com/react-grid-layout/react-grid-layout/issues/103)\n        '& .react-grid-item.cssTransforms': { transitionProperty: isFirstRender ? 'none' : 'transform' },\n      }}\n      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","theme","spacing","transitionProperty","data-testid","children","position","transition","pointerEvents","userSelect","zIndex","willChange","visibility","background","palette","primary","main","opacity","transitionDuration","WebkitUserSelect","MozUserSelect","msUserSelect","OUserSelect","width","height","content","right","bottom","borderRight","text","secondary","borderBottom","display","left","cursor","transform","top","marginLeft","backgroundRepeat","backgroundOrigin","boxSizing","backgroundImage","backgroundPosition","padding"],"mappings":"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"}

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

@@ -1 +1 @@
-{"version":3,"file":"GridItemContent.d.ts","sourceRoot":"","sources":["../../../src/components/GridLayout/GridItemContent.tsx"],"names":[],"mappings":";AAcA,OAAO,EAAE,gBAAgB,EAA0C,MAAM,eAAe,CAAC;AAGzF,OAAO,EAAE,YAAY,EAAE,MAAM,UAAU,CAAC;AAExC,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,eAuC1D"}
+{"version":3,"file":"GridItemContent.d.ts","sourceRoot":"","sources":["../../../src/components/GridLayout/GridItemContent.tsx"],"names":[],"mappings":";AAgBA,OAAO,EAAE,gBAAgB,EAA0C,MAAM,eAAe,CAAC;AAGzF,OAAO,EAAE,YAAY,EAAE,MAAM,UAAU,CAAC;AAExC,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,eAuD1D"}

package/dist/components/GridLayout/GridItemContent.js

@@ -11,6 +11,8 @@
 // See the License for the specific language governing permissions and
 // limitations under the License.
 import { jsx as _jsx } from "react/jsx-runtime";
+import { Box } from '@mui/material';
+import { useInView } from 'react-intersection-observer';
 import { DataQueriesProvider } from '@perses-dev/plugin-system';
 import { useEditMode, usePanel, usePanelActions } from '../../context';
 import { useSuggestedStepMs } from '../../utils';
@@ -20,9 +22,14 @@ import { Panel } from '../Panel/Panel';
  */ export function GridItemContent(props) {
     const { panelGroupItemId , width  } = props;
     const panelDefinition = usePanel(panelGroupItemId);
-    const { spec: { queries  } ,  } = panelDefinition;
+    const { spec: { queries  }  } = panelDefinition;
     const { isEditMode  } = useEditMode();
     const { openEditPanel , openDeletePanelDialog , duplicatePanel  } = usePanelActions(panelGroupItemId);
+    const { ref , inView  } = useInView({
+        threshold: 0.2,
+        initialInView: false,
+        triggerOnce: true
+    });
     // Provide actions to the panel when in edit mode
     let editHandlers = undefined;
     if (isEditMode) {
@@ -41,16 +48,26 @@ import { Panel } from '../Panel/Panel';
             spec: query.spec.plugin.spec
         };
     });
-    return /*#__PURE__*/ _jsx(DataQueriesProvider, {
-        definitions: definitions,
-        options: {
-            suggestedStepMs
+    return /*#__PURE__*/ _jsx(Box, {
+        ref: ref,
+        sx: {
+            width: '100%',
+            height: '100%'
         },
-        children: /*#__PURE__*/ _jsx(Panel, {
-            definition: panelDefinition,
-            editHandlers: editHandlers,
-            panelOptions: props.panelOptions,
-            panelGroupItemId: panelGroupItemId
+        children: /*#__PURE__*/ _jsx(DataQueriesProvider, {
+            definitions: definitions,
+            options: {
+                suggestedStepMs
+            },
+            queryOptions: {
+                enabled: inView
+            },
+            children: inView && /*#__PURE__*/ _jsx(Panel, {
+                definition: panelDefinition,
+                editHandlers: editHandlers,
+                panelOptions: props.panelOptions,
+                panelGroupItemId: panelGroupItemId
+            })
         })
     });
 }

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 { DataQueriesProvider } from '@perses-dev/plugin-system';\nimport { PanelGroupItemId, useEditMode, usePanel, usePanelActions } from '../../context';\nimport { useSuggestedStepMs } from '../../utils';\nimport { Panel, PanelProps } from '../Panel/Panel';\nimport { PanelOptions } from '../Panel';\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) {\n  const { panelGroupItemId, width } = props;\n  const panelDefinition = usePanel(panelGroupItemId);\n  const {\n    spec: { queries },\n  } = panelDefinition;\n  const { isEditMode } = useEditMode();\n  const { openEditPanel, openDeletePanelDialog, duplicatePanel } = usePanelActions(panelGroupItemId);\n\n  // Provide actions to the panel when in edit mode\n  let editHandlers: PanelProps['editHandlers'] = undefined;\n  if (isEditMode) {\n    editHandlers = {\n      onEditPanelClick: openEditPanel,\n      onDuplicatePanelClick: duplicatePanel,\n      onDeletePanelClick: openDeletePanelDialog,\n    };\n  }\n\n  // map TimeSeriesQueryDefinition to Definition<UnknownSpec>\n  const suggestedStepMs = useSuggestedStepMs(width);\n  const queryDefinitions = queries ?? [];\n  const definitions = queryDefinitions.map((query) => {\n    return {\n      kind: query.spec.plugin.kind,\n      spec: query.spec.plugin.spec,\n    };\n  });\n\n  return (\n    <DataQueriesProvider definitions={definitions} options={{ suggestedStepMs }}>\n      <Panel\n        definition={panelDefinition}\n        editHandlers={editHandlers}\n        panelOptions={props.panelOptions}\n        panelGroupItemId={panelGroupItemId}\n      />\n    </DataQueriesProvider>\n  );\n}\n"],"names":["DataQueriesProvider","useEditMode","usePanel","usePanelActions","useSuggestedStepMs","Panel","GridItemContent","props","panelGroupItemId","width","panelDefinition","spec","queries","isEditMode","openEditPanel","openDeletePanelDialog","duplicatePanel","editHandlers","undefined","onEditPanelClick","onDuplicatePanelClick","onDeletePanelClick","suggestedStepMs","queryDefinitions","definitions","map","query","kind","plugin","options","definition","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;AAAA,SAASA,mBAAmB,QAAQ,2BAA2B,CAAC;AAChE,SAA2BC,WAAW,EAAEC,QAAQ,EAAEC,eAAe,QAAQ,eAAe,CAAC;AACzF,SAASC,kBAAkB,QAAQ,aAAa,CAAC;AACjD,SAASC,KAAK,QAAoB,gBAAgB,CAAC;AASnD;;CAEC,GACD,OAAO,SAASC,eAAe,CAACC,KAA2B,EAAE;IAC3D,MAAM,EAAEC,gBAAgB,CAAA,EAAEC,KAAK,CAAA,EAAE,GAAGF,KAAK,AAAC;IAC1C,MAAMG,eAAe,GAAGR,QAAQ,CAACM,gBAAgB,CAAC,AAAC;IACnD,MAAM,EACJG,IAAI,EAAE,EAAEC,OAAO,CAAA,EAAE,CAAA,IAClB,GAAGF,eAAe,AAAC;IACpB,MAAM,EAAEG,UAAU,CAAA,EAAE,GAAGZ,WAAW,EAAE,AAAC;IACrC,MAAM,EAAEa,aAAa,CAAA,EAAEC,qBAAqB,CAAA,EAAEC,cAAc,CAAA,EAAE,GAAGb,eAAe,CAACK,gBAAgB,CAAC,AAAC;IAEnG,iDAAiD;IACjD,IAAIS,YAAY,GAA+BC,SAAS,AAAC;IACzD,IAAIL,UAAU,EAAE;QACdI,YAAY,GAAG;YACbE,gBAAgB,EAAEL,aAAa;YAC/BM,qBAAqB,EAAEJ,cAAc;YACrCK,kBAAkB,EAAEN,qBAAqB;SAC1C,CAAC;IACJ,CAAC;IAED,2DAA2D;IAC3D,MAAMO,eAAe,GAAGlB,kBAAkB,CAACK,KAAK,CAAC,AAAC;IAClD,MAAMc,gBAAgB,GAAGX,OAAO,aAAPA,OAAO,cAAPA,OAAO,GAAI,EAAE,AAAC;IACvC,MAAMY,WAAW,GAAGD,gBAAgB,CAACE,GAAG,CAAC,CAACC,KAAK,GAAK;QAClD,OAAO;YACLC,IAAI,EAAED,KAAK,CAACf,IAAI,CAACiB,MAAM,CAACD,IAAI;YAC5BhB,IAAI,EAAEe,KAAK,CAACf,IAAI,CAACiB,MAAM,CAACjB,IAAI;SAC7B,CAAC;IACJ,CAAC,CAAC,AAAC;IAEH,qBACE,KAACX,mBAAmB;QAACwB,WAAW,EAAEA,WAAW;QAAEK,OAAO,EAAE;YAAEP,eAAe;SAAE;kBACzE,cAAA,KAACjB,KAAK;YACJyB,UAAU,EAAEpB,eAAe;YAC3BO,YAAY,EAAEA,YAAY;YAC1Bc,YAAY,EAAExB,KAAK,CAACwB,YAAY;YAChCvB,gBAAgB,EAAEA,gBAAgB;UAClC;MACkB,CACtB;AACJ,CAAC"}
+{"version":3,"sources":["../../../src/components/GridLayout/GridItemContent.tsx"],"sourcesContent":["// Copyright 2023 The Perses Authors\n// Licensed under the Apache License, Version 2.0 (the \"License\");\n// you may not use this file except in compliance with the License.\n// You may obtain a copy of the License at\n//\n// http://www.apache.org/licenses/LICENSE-2.0\n//\n// Unless required by applicable law or agreed to in writing, software\n// distributed under the License is distributed on an \"AS IS\" BASIS,\n// WITHOUT WARRANTIES OR CONDITIONS OF ANY KIND, either express or implied.\n// See the License for the specific language governing permissions and\n// limitations under the License.\n\nimport { Box } from '@mui/material';\nimport { useInView } from 'react-intersection-observer';\nimport { DataQueriesProvider } from '@perses-dev/plugin-system';\nimport { PanelGroupItemId, useEditMode, usePanel, usePanelActions } from '../../context';\nimport { useSuggestedStepMs } from '../../utils';\nimport { Panel, PanelProps } from '../Panel/Panel';\nimport { PanelOptions } from '../Panel';\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) {\n  const { panelGroupItemId, width } = props;\n  const panelDefinition = usePanel(panelGroupItemId);\n  const {\n    spec: { queries },\n  } = panelDefinition;\n  const { isEditMode } = useEditMode();\n  const { openEditPanel, openDeletePanelDialog, duplicatePanel } = usePanelActions(panelGroupItemId);\n\n  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  // Provide actions to the panel when in edit mode\n  let editHandlers: PanelProps['editHandlers'] = undefined;\n  if (isEditMode) {\n    editHandlers = {\n      onEditPanelClick: openEditPanel,\n      onDuplicatePanelClick: duplicatePanel,\n      onDeletePanelClick: openDeletePanelDialog,\n    };\n  }\n\n  // map TimeSeriesQueryDefinition to Definition<UnknownSpec>\n  const suggestedStepMs = useSuggestedStepMs(width);\n  const queryDefinitions = queries ?? [];\n  const definitions = queryDefinitions.map((query) => {\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 definitions={definitions} options={{ suggestedStepMs }} queryOptions={{ enabled: inView }}>\n        {inView && (\n          <Panel\n            definition={panelDefinition}\n            editHandlers={editHandlers}\n            panelOptions={props.panelOptions}\n            panelGroupItemId={panelGroupItemId}\n          />\n        )}\n      </DataQueriesProvider>\n    </Box>\n  );\n}\n"],"names":["Box","useInView","DataQueriesProvider","useEditMode","usePanel","usePanelActions","useSuggestedStepMs","Panel","GridItemContent","props","panelGroupItemId","width","panelDefinition","spec","queries","isEditMode","openEditPanel","openDeletePanelDialog","duplicatePanel","ref","inView","threshold","initialInView","triggerOnce","editHandlers","undefined","onEditPanelClick","onDuplicatePanelClick","onDeletePanelClick","suggestedStepMs","queryDefinitions","definitions","map","query","kind","plugin","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,QAAQ,4BAA4B;AAChE,SAA2BC,WAAW,EAAEC,QAAQ,EAAEC,eAAe,QAAQ,gBAAgB;AACzF,SAASC,kBAAkB,QAAQ,cAAc;AACjD,SAASC,KAAK,QAAoB,iBAAiB;AASnD;;CAEC,GACD,OAAO,SAASC,gBAAgBC,KAA2B;IACzD,MAAM,EAAEC,iBAAgB,EAAEC,MAAK,EAAE,GAAGF;IACpC,MAAMG,kBAAkBR,SAASM;IACjC,MAAM,EACJG,MAAM,EAAEC,QAAO,EAAE,CAAA,EAClB,GAAGF;IACJ,MAAM,EAAEG,WAAU,EAAE,GAAGZ;IACvB,MAAM,EAAEa,cAAa,EAAEC,sBAAqB,EAAEC,eAAc,EAAE,GAAGb,gBAAgBK;IAEjF,MAAM,EAAES,IAAG,EAAEC,OAAM,EAAE,GAAGnB,UAAU;QAChCoB,WAAW;QACXC,eAAe;QACfC,aAAa;IACf;IAEA,iDAAiD;IACjD,IAAIC,eAA2CC;IAC/C,IAAIV,YAAY;QACdS,eAAe;YACbE,kBAAkBV;YAClBW,uBAAuBT;YACvBU,oBAAoBX;QACtB;IACF;IAEA,2DAA2D;IAC3D,MAAMY,kBAAkBvB,mBAAmBK;IAC3C,MAAMmB,mBAAmBhB,oBAAAA,qBAAAA,UAAW,EAAE;IACtC,MAAMiB,cAAcD,iBAAiBE,IAAI,CAACC;QACxC,OAAO;YACLC,MAAMD,MAAMpB,KAAKsB,OAAOD;YACxBrB,MAAMoB,MAAMpB,KAAKsB,OAAOtB;QAC1B;IACF;IAEA,qBACE,KAACb;QACCmB,KAAKA;QACLiB,IAAI;YACFzB,OAAO;YACP0B,QAAQ;QACV;kBAEA,cAAA,KAACnC;YAAoB6B,aAAaA;YAAaO,SAAS;gBAAET;YAAgB;YAAGU,cAAc;gBAAEC,SAASpB;YAAO;sBAC1GA,wBACC,KAACb;gBACCkC,YAAY7B;gBACZY,cAAcA;gBACdkB,cAAcjC,MAAMiC;gBACpBhC,kBAAkBA;;;;AAM9B"}

package/dist/components/GridLayout/GridLayout.js

@@ -29,8 +29,8 @@ const ResponsiveGridLayout = WidthProvider(Responsive);
     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);
+    var _ref;
+    const [isOpen, setIsOpen] = useState((_ref = !groupDefinition.isCollapsed) !== null && _ref !== void 0 ? _ref : true);
     const { isEditMode  } = useEditMode();
     const [gridColWidth, setGridColWidth] = useState(0);
     const handleLayoutChange = (currentLayout, allLayouts)=>{

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

@@ -1 +1 @@
-{"version":3,"sources":["../../../src/components/GridLayout/GridLayout.tsx"],"sourcesContent":["// Copyright 2023 The Perses Authors\n// Licensed under the Apache License, Version 2.0 (the \"License\");\n// you may not use this file except in compliance with the License.\n// You may obtain a copy of the License at\n//\n// http://www.apache.org/licenses/LICENSE-2.0\n//\n// Unless required by applicable law or agreed to in writing, software\n// distributed under the License is distributed on an \"AS IS\" BASIS,\n// WITHOUT WARRANTIES OR CONDITIONS OF ANY KIND, either express or implied.\n// See the License for the specific language governing permissions and\n// limitations under the License.\nimport { useState } from 'react';\nimport { Responsive, WidthProvider, Layouts, Layout } from 'react-grid-layout';\nimport { Collapse, useTheme } from '@mui/material';\nimport { ErrorAlert, ErrorBoundary } from '@perses-dev/components';\nimport { useEditMode, usePanelGroup, usePanelGroupActions, PanelGroupId } from '../../context';\nimport { GRID_LAYOUT_COLS, GRID_LAYOUT_SMALL_BREAKPOINT } from '../../constants';\nimport { PanelOptions } from '../Panel';\nimport { GridTitle } from './GridTitle';\nimport { GridItemContent } from './GridItemContent';\nimport { GridContainer } from './GridContainer';\nconst DEFAULT_MARGIN = 10;\nconst ResponsiveGridLayout = WidthProvider(Responsive);\n\nexport interface GridLayoutProps {\n  panelGroupId: PanelGroupId;\n  panelOptions?: PanelOptions;\n}\n\n/**\n * Layout component that arranges children in a Grid based on the definition.\n */\nexport function GridLayout(props: GridLayoutProps) {\n  const { panelGroupId /*...others */ } = props;\n  const theme = useTheme();\n  const groupDefinition = usePanelGroup(panelGroupId);\n  const { updatePanelGroupLayouts } = usePanelGroupActions(panelGroupId);\n\n  const [isOpen, setIsOpen] = useState(!groupDefinition.isCollapsed ?? true);\n  const { isEditMode } = useEditMode();\n\n  const [gridColWidth, setGridColWidth] = useState(0);\n\n  const handleLayoutChange = (currentLayout: Layout[], allLayouts: Layouts) => {\n    // Using the value from `allLayouts` instead of `currentLayout` because of\n    // a bug in react-layout-grid where `currentLayout` does not adjust properly\n    // when going to a smaller breakpoint and then back to a larger breakpoint.\n    // https://github.com/react-grid-layout/react-grid-layout/issues/1663\n    const smallLayout = allLayouts[GRID_LAYOUT_SMALL_BREAKPOINT];\n    if (smallLayout) {\n      updatePanelGroupLayouts(smallLayout);\n    }\n  };\n\n  /**\n   * Calculate the column width so we can determine the width of each panel for suggested step ms\n   * https://github.com/react-grid-layout/react-grid-layout/blob/master/lib/calculateUtils.js#L14-L35\n   */\n  const handleWidthChange = (\n    containerWidth: number,\n    margin: [number, number],\n    cols: number,\n    containerPadding: [number, number]\n  ) => {\n    const marginX = margin[0];\n    const marginWidth = marginX * (cols - 1);\n    const containerPaddingWidth = containerPadding[0] * 2;\n    // exclude margin and padding from total width\n    setGridColWidth((containerWidth - marginWidth - containerPaddingWidth) / cols);\n  };\n\n  return (\n    <GridContainer>\n      {groupDefinition.title !== undefined && (\n        <GridTitle\n          panelGroupId={panelGroupId}\n          title={groupDefinition.title}\n          collapse={\n            groupDefinition.isCollapsed === undefined\n              ? undefined\n              : { isOpen, onToggleOpen: () => setIsOpen((current) => !current) }\n          }\n        />\n      )}\n      <Collapse in={isOpen} unmountOnExit appear={false} data-testid=\"panel-group-content\">\n        <ResponsiveGridLayout\n          className=\"layout\"\n          breakpoints={{ sm: theme.breakpoints.values.sm, xxs: 0 }}\n          cols={GRID_LAYOUT_COLS}\n          rowHeight={30}\n          draggableHandle={'.drag-handle'}\n          resizeHandles={['se']}\n          isDraggable={isEditMode}\n          isResizable={isEditMode}\n          margin={[DEFAULT_MARGIN, DEFAULT_MARGIN]}\n          containerPadding={[0, 10]}\n          layouts={{ [GRID_LAYOUT_SMALL_BREAKPOINT]: groupDefinition.itemLayouts }}\n          onLayoutChange={handleLayoutChange}\n          onWidthChange={handleWidthChange}\n        >\n          {groupDefinition.itemLayouts.map(({ i, w }) => (\n            <div key={i}>\n              <ErrorBoundary FallbackComponent={ErrorAlert}>\n                <GridItemContent\n                  panelOptions={props.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) => {\n  // 0 * Infinity === NaN, which causes problems with resize contraints\n  if (!Number.isFinite(w)) return w;\n  return Math.round(colWidth * w + Math.max(0, w - 1) * DEFAULT_MARGIN);\n};\n"],"names":["useState","Responsive","WidthProvider","Collapse","useTheme","ErrorAlert","ErrorBoundary","useEditMode","usePanelGroup","usePanelGroupActions","GRID_LAYOUT_COLS","GRID_LAYOUT_SMALL_BREAKPOINT","GridTitle","GridItemContent","GridContainer","DEFAULT_MARGIN","ResponsiveGridLayout","GridLayout","props","panelGroupId","theme","groupDefinition","updatePanelGroupLayouts","isOpen","setIsOpen","isCollapsed","isEditMode","gridColWidth","setGridColWidth","handleLayoutChange","currentLayout","allLayouts","smallLayout","handleWidthChange","containerWidth","margin","cols","containerPadding","marginX","marginWidth","containerPaddingWidth","title","undefined","collapse","onToggleOpen","current","in","unmountOnExit","appear","data-testid","className","breakpoints","sm","values","xxs","rowHeight","draggableHandle","resizeHandles","isDraggable","isResizable","layouts","itemLayouts","onLayoutChange","onWidthChange","map","i","w","div","FallbackComponent","panelOptions","panelGroupItemId","panelGroupItemLayoutId","width","calculateGridItemWidth","colWidth","Number","isFinite","Math","round","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 { useState } from 'react';\nimport { Responsive, WidthProvider, Layouts, Layout } from 'react-grid-layout';\nimport { Collapse, useTheme } from '@mui/material';\nimport { ErrorAlert, ErrorBoundary } from '@perses-dev/components';\nimport { useEditMode, usePanelGroup, usePanelGroupActions, PanelGroupId } from '../../context';\nimport { GRID_LAYOUT_COLS, GRID_LAYOUT_SMALL_BREAKPOINT } from '../../constants';\nimport { PanelOptions } from '../Panel';\nimport { GridTitle } from './GridTitle';\nimport { GridItemContent } from './GridItemContent';\nimport { GridContainer } from './GridContainer';\nconst DEFAULT_MARGIN = 10;\nconst ResponsiveGridLayout = WidthProvider(Responsive);\n\nexport interface GridLayoutProps {\n  panelGroupId: PanelGroupId;\n  panelOptions?: PanelOptions;\n}\n\n/**\n * Layout component that arranges children in a Grid based on the definition.\n */\nexport function GridLayout(props: GridLayoutProps) {\n  const { panelGroupId /*...others */ } = props;\n  const theme = useTheme();\n  const groupDefinition = usePanelGroup(panelGroupId);\n  const { updatePanelGroupLayouts } = usePanelGroupActions(panelGroupId);\n\n  const [isOpen, setIsOpen] = useState(!groupDefinition.isCollapsed ?? true);\n  const { isEditMode } = useEditMode();\n\n  const [gridColWidth, setGridColWidth] = useState(0);\n\n  const handleLayoutChange = (currentLayout: Layout[], allLayouts: Layouts) => {\n    // Using the value from `allLayouts` instead of `currentLayout` because of\n    // a bug in react-layout-grid where `currentLayout` does not adjust properly\n    // when going to a smaller breakpoint and then back to a larger breakpoint.\n    // https://github.com/react-grid-layout/react-grid-layout/issues/1663\n    const smallLayout = allLayouts[GRID_LAYOUT_SMALL_BREAKPOINT];\n    if (smallLayout) {\n      updatePanelGroupLayouts(smallLayout);\n    }\n  };\n\n  /**\n   * Calculate the column width so we can determine the width of each panel for suggested step ms\n   * https://github.com/react-grid-layout/react-grid-layout/blob/master/lib/calculateUtils.js#L14-L35\n   */\n  const handleWidthChange = (\n    containerWidth: number,\n    margin: [number, number],\n    cols: number,\n    containerPadding: [number, number]\n  ) => {\n    const marginX = margin[0];\n    const marginWidth = marginX * (cols - 1);\n    const containerPaddingWidth = containerPadding[0] * 2;\n    // exclude margin and padding from total width\n    setGridColWidth((containerWidth - marginWidth - containerPaddingWidth) / cols);\n  };\n\n  return (\n    <GridContainer>\n      {groupDefinition.title !== undefined && (\n        <GridTitle\n          panelGroupId={panelGroupId}\n          title={groupDefinition.title}\n          collapse={\n            groupDefinition.isCollapsed === undefined\n              ? undefined\n              : { isOpen, onToggleOpen: () => setIsOpen((current) => !current) }\n          }\n        />\n      )}\n      <Collapse in={isOpen} unmountOnExit appear={false} data-testid=\"panel-group-content\">\n        <ResponsiveGridLayout\n          className=\"layout\"\n          breakpoints={{ sm: theme.breakpoints.values.sm, xxs: 0 }}\n          cols={GRID_LAYOUT_COLS}\n          rowHeight={30}\n          draggableHandle={'.drag-handle'}\n          resizeHandles={['se']}\n          isDraggable={isEditMode}\n          isResizable={isEditMode}\n          margin={[DEFAULT_MARGIN, DEFAULT_MARGIN]}\n          containerPadding={[0, 10]}\n          layouts={{ [GRID_LAYOUT_SMALL_BREAKPOINT]: groupDefinition.itemLayouts }}\n          onLayoutChange={handleLayoutChange}\n          onWidthChange={handleWidthChange}\n        >\n          {groupDefinition.itemLayouts.map(({ i, w }) => (\n            <div key={i}>\n              <ErrorBoundary FallbackComponent={ErrorAlert}>\n                <GridItemContent\n                  panelOptions={props.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) => {\n  // 0 * Infinity === NaN, which causes problems with resize contraints\n  if (!Number.isFinite(w)) return w;\n  return Math.round(colWidth * w + Math.max(0, w - 1) * DEFAULT_MARGIN);\n};\n"],"names":["useState","Responsive","WidthProvider","Collapse","useTheme","ErrorAlert","ErrorBoundary","useEditMode","usePanelGroup","usePanelGroupActions","GRID_LAYOUT_COLS","GRID_LAYOUT_SMALL_BREAKPOINT","GridTitle","GridItemContent","GridContainer","DEFAULT_MARGIN","ResponsiveGridLayout","GridLayout","props","panelGroupId","theme","groupDefinition","updatePanelGroupLayouts","isOpen","setIsOpen","isCollapsed","isEditMode","gridColWidth","setGridColWidth","handleLayoutChange","currentLayout","allLayouts","smallLayout","handleWidthChange","containerWidth","margin","cols","containerPadding","marginX","marginWidth","containerPaddingWidth","title","undefined","collapse","onToggleOpen","current","in","unmountOnExit","appear","data-testid","className","breakpoints","sm","values","xxs","rowHeight","draggableHandle","resizeHandles","isDraggable","isResizable","layouts","itemLayouts","onLayoutChange","onWidthChange","map","i","w","div","FallbackComponent","panelOptions","panelGroupItemId","panelGroupItemLayoutId","width","calculateGridItemWidth","colWidth","Number","isFinite","Math","round","max"],"mappings":"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"}

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 { ARIA_LABEL_TEXT, TOOLTIP_TEXT } from '../../constants';\nimport { usePanelGroupActions, useEditMode, PanelGroupId, useDeletePanelGroupDialog } from '../../context';\n\nexport interface GridTitleProps {\n  panelGroupId: PanelGroupId;\n  title: string;\n  collapse?: {\n    isOpen: boolean;\n    onToggleOpen: () => void;\n  };\n}\n\n/**\n * Renders the title for a Grid section, optionally also supporting expanding\n * and collapsing\n */\nexport function GridTitle(props: GridTitleProps) {\n  const { panelGroupId, title: 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        padding: (theme) => theme.spacing(1),\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 && moveDown();\n                  }}\n                >\n                  <ArrowDownIcon />\n                </IconButton>\n              </InfoTooltip>\n              <InfoTooltip description={TOOLTIP_TEXT.moveGroupUp}>\n                <IconButton\n                  aria-label={ARIA_LABEL_TEXT.moveGroupUp(title)}\n                  disabled={moveUp === undefined}\n                  onClick={(e) => {\n                    // Don't trigger expand/collapse\n                    e.stopPropagation();\n                    moveUp && moveUp();\n                  }}\n                >\n                  <ArrowUpIcon />\n                </IconButton>\n              </InfoTooltip>\n            </Stack>\n          )}\n        </>\n      ) : (\n        // If we don't need expand/collapse, just render the title text\n        text\n      )}\n    </Box>\n  );\n}\n"],"names":["Box","IconButton","Stack","Typography","ExpandedIcon","CollapsedIcon","AddPanelIcon","PencilIcon","ArrowUpIcon","ArrowDownIcon","DeleteIcon","InfoTooltip","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","padding","theme","spacing","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 { ARIA_LABEL_TEXT, TOOLTIP_TEXT } from '../../constants';\nimport { usePanelGroupActions, useEditMode, PanelGroupId, useDeletePanelGroupDialog } from '../../context';\n\nexport interface GridTitleProps {\n  panelGroupId: PanelGroupId;\n  title: string;\n  collapse?: {\n    isOpen: boolean;\n    onToggleOpen: () => void;\n  };\n}\n\n/**\n * Renders the title for a Grid section, optionally also supporting expanding\n * and collapsing\n */\nexport function GridTitle(props: GridTitleProps) {\n  const { panelGroupId, title: 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        padding: (theme) => theme.spacing(1),\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 && moveDown();\n                  }}\n                >\n                  <ArrowDownIcon />\n                </IconButton>\n              </InfoTooltip>\n              <InfoTooltip description={TOOLTIP_TEXT.moveGroupUp}>\n                <IconButton\n                  aria-label={ARIA_LABEL_TEXT.moveGroupUp(title)}\n                  disabled={moveUp === undefined}\n                  onClick={(e) => {\n                    // Don't trigger expand/collapse\n                    e.stopPropagation();\n                    moveUp && moveUp();\n                  }}\n                >\n                  <ArrowUpIcon />\n                </IconButton>\n              </InfoTooltip>\n            </Stack>\n          )}\n        </>\n      ) : (\n        // If we don't need expand/collapse, just render the title text\n        text\n      )}\n    </Box>\n  );\n}\n"],"names":["Box","IconButton","Stack","Typography","ExpandedIcon","CollapsedIcon","AddPanelIcon","PencilIcon","ArrowUpIcon","ArrowDownIcon","DeleteIcon","InfoTooltip","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","padding","theme","spacing","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/GridLayout/index.js.map

@@ -1 +1 @@
-{"version":3,"sources":["../../../src/components/GridLayout/index.ts"],"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\nexport * from './GridContainer';\nexport * from './GridItemContent';\nexport * from './GridLayout';\nexport * from './GridTitle';\n"],"names":[],"mappings":"AAAA,oCAAoC;AACpC,kEAAkE;AAClE,mEAAmE;AACnE,0CAA0C;AAC1C,EAAE;AACF,6CAA6C;AAC7C,EAAE;AACF,sEAAsE;AACtE,oEAAoE;AACpE,2EAA2E;AAC3E,sEAAsE;AACtE,iCAAiC;AAEjC,cAAc,iBAAiB,CAAC;AAChC,cAAc,mBAAmB,CAAC;AAClC,cAAc,cAAc,CAAC;AAC7B,cAAc,aAAa,CAAC"}
+{"version":3,"sources":["../../../src/components/GridLayout/index.ts"],"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\nexport * from './GridContainer';\nexport * from './GridItemContent';\nexport * from './GridLayout';\nexport * from './GridTitle';\n"],"names":[],"mappings":"AAAA,oCAAoC;AACpC,kEAAkE;AAClE,mEAAmE;AACnE,0CAA0C;AAC1C,EAAE;AACF,6CAA6C;AAC7C,EAAE;AACF,sEAAsE;AACtE,oEAAoE;AACpE,2EAA2E;AAC3E,sEAAsE;AACtE,iCAAiC;AAEjC,cAAc,kBAAkB;AAChC,cAAc,oBAAoB;AAClC,cAAc,eAAe;AAC7B,cAAc,cAAc"}

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":";AAiBA,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,YAAY,CAAC;IAC5B,gBAAgB,CAAC,EAAE,gBAAgB,CAAC;CACrC;AAED,oBAAY,YAAY,GAAG;IACzB;;;OAGG;IACH,KAAK,CAAC,EAAE,CAAC,KAAK,EAAE,eAAe,KAAK,KAAK,CAAC,SAAS,CAAC;CACrD,CAAC;AAEF,oBAAY,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,kDAwFhB,CAAC"}
+{"version":3,"file":"Panel.d.ts","sourceRoot":"","sources":["../../../src/components/Panel/Panel.tsx"],"names":[],"mappings":";AAgBA,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,YAAY,CAAC;IAC5B,gBAAgB,CAAC,EAAE,gBAAgB,CAAC;CACrC;AAED,oBAAY,YAAY,GAAG;IACzB;;;OAGG;IACH,KAAK,CAAC,EAAE,CAAC,KAAK,EAAE,eAAe,KAAK,KAAK,CAAC,SAAS,CAAC;CACrD,CAAC;AAEF,oBAAY,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,kDA+EhB,CAAC"}

package/dist/components/Panel/Panel.js

@@ -13,7 +13,6 @@
 import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
 import { useState, useMemo, memo } from 'react';
 import useResizeObserver from 'use-resize-observer';
-import { useInView } from 'react-intersection-observer';
 import { ErrorBoundary, ErrorAlert, combineSx, useId, useChartsTheme } from '@perses-dev/components';
 import { Card, CardContent } from '@mui/material';
 import { PanelHeader } from './PanelHeader';
@@ -21,7 +20,7 @@ import { PanelContent } from './PanelContent';
 /**
  * Renders a PanelDefinition's content inside of a Card.
  */ export const Panel = /*#__PURE__*/ memo(function Panel(props) {
-    var ref;
+    var _panelOptions_extra;
     const { definition , 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 +39,6 @@ import { PanelContent } from './PanelContent';
         width,
         height
     ]);
-    const { ref: ref1 , inView  } = useInView({
-        threshold: 0.3,
-        initialInView: false,
-        triggerOnce: true
-    });
     const chartsTheme = useChartsTheme();
     const handleMouseEnter = (e)=>{
         onMouseEnter === null || onMouseEnter === void 0 ? void 0 : onMouseEnter(e);
@@ -53,7 +47,6 @@ import { PanelContent } from './PanelContent';
         onMouseLeave === null || onMouseLeave === void 0 ? void 0 : onMouseLeave(e);
     };
     return /*#__PURE__*/ _jsxs(Card, {
-        ref: ref1,
         component: "section",
         sx: combineSx({
             width: '100%',
@@ -70,7 +63,7 @@ import { PanelContent } from './PanelContent';
         ...others,
         children: [
             /*#__PURE__*/ _jsx(PanelHeader, {
-                extra: panelOptions === null || panelOptions === void 0 ? void 0 : (ref = panelOptions.extra) === null || ref === void 0 ? void 0 : ref.call(panelOptions, {
+                extra: panelOptions === null || panelOptions === void 0 ? void 0 : (_panelOptions_extra = panelOptions.extra) === null || _panelOptions_extra === void 0 ? void 0 : _panelOptions_extra.call(panelOptions, {
                     panelDefinition: definition,
                     panelGroupItemId
                 }),
@@ -99,9 +92,9 @@ import { PanelContent } from './PanelContent';
                 children: /*#__PURE__*/ _jsx(ErrorBoundary, {
                     FallbackComponent: ErrorAlert,
                     resetKeys: [
-                        definition.spec.plugin.spec
+                        definition.spec
                     ],
-                    children: inView === true && /*#__PURE__*/ _jsx(PanelContent, {
+                    children: /*#__PURE__*/ _jsx(PanelContent, {
                         panelPluginKind: definition.spec.plugin.kind,
                         spec: definition.spec.plugin.spec,
                         contentDimensions: contentDimensions

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 } from 'react';\nimport useResizeObserver from 'use-resize-observer';\nimport { useInView } from 'react-intersection-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  editHandlers?: PanelHeaderProps['editHandlers'];\n  panelOptions?: PanelOptions;\n  panelGroupItemId?: PanelGroupItemId;\n}\n\nexport type PanelOptions = {\n  /**\n   * Content to render in the top-right corner of the panel. It will only be\n   * rendered when the panel is in edit mode.\n   */\n  extra?: (props: PanelExtraProps) => React.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 { definition, editHandlers, onMouseEnter, onMouseLeave, sx, panelOptions, panelGroupItemId, ...others } = 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 { ref, inView } = useInView({\n    threshold: 0.3,\n    initialInView: false,\n    triggerOnce: true,\n  });\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      ref={ref}\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      <PanelHeader\n        extra={panelOptions?.extra?.({ panelDefinition: definition, panelGroupItemId })}\n        id={headerId}\n        title={definition.spec.display.name}\n        description={definition.spec.display.description}\n        editHandlers={editHandlers}\n        sx={{ paddingX: `${chartsTheme.container.padding.default}px` }}\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.plugin.spec]}>\n          {inView === true && (\n            <PanelContent\n              panelPluginKind={definition.spec.plugin.kind}\n              spec={definition.spec.plugin.spec}\n              contentDimensions={contentDimensions}\n            />\n          )}\n        </ErrorBoundary>\n      </CardContent>\n    </Card>\n  );\n});\n"],"names":["useState","useMemo","memo","useResizeObserver","useInView","ErrorBoundary","ErrorAlert","combineSx","useId","useChartsTheme","Card","CardContent","PanelHeader","PanelContent","Panel","props","panelOptions","definition","editHandlers","onMouseEnter","onMouseLeave","sx","panelGroupItemId","others","generatedPanelId","headerId","contentElement","setContentElement","width","height","ref","contentDimensions","undefined","inView","threshold","initialInView","triggerOnce","chartsTheme","handleMouseEnter","e","handleMouseLeave","component","display","flexFlow","variant","aria-labelledby","aria-describedby","data-testid","extra","panelDefinition","id","title","spec","name","description","paddingX","container","padding","default","position","overflow","flexGrow","margin","FallbackComponent","resetKeys","plugin","panelPluginKind","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 { useState, useMemo, memo } 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  editHandlers?: PanelHeaderProps['editHandlers'];\n  panelOptions?: PanelOptions;\n  panelGroupItemId?: PanelGroupItemId;\n}\n\nexport type PanelOptions = {\n  /**\n   * Content to render in the top-right corner of the panel. It will only be\n   * rendered when the panel is in edit mode.\n   */\n  extra?: (props: PanelExtraProps) => React.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 { definition, editHandlers, onMouseEnter, onMouseLeave, sx, panelOptions, panelGroupItemId, ...others } = 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      <PanelHeader\n        extra={panelOptions?.extra?.({ panelDefinition: definition, panelGroupItemId })}\n        id={headerId}\n        title={definition.spec.display.name}\n        description={definition.spec.display.description}\n        editHandlers={editHandlers}\n        sx={{ paddingX: `${chartsTheme.container.padding.default}px` }}\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            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","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","extra","panelDefinition","id","title","spec","name","description","paddingX","container","padding","default","position","overflow","flexGrow","margin","FallbackComponent","resetKeys","panelPluginKind","plugin","kind"],"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,QAAQ,EAAEC,OAAO,EAAEC,IAAI,QAAQ,QAAQ;AAChD,OAAOC,uBAAuB,sBAAsB;AACpD,SAASC,aAAa,EAAEC,UAAU,EAAEC,SAAS,EAAEC,KAAK,EAAEC,cAAc,QAAQ,yBAAyB;AAErG,SAASC,IAAI,EAAaC,WAAW,QAAQ,gBAAgB;AAE7D,SAASC,WAAW,QAA0B,gBAAgB;AAC9D,SAASC,YAAY,QAAQ,iBAAiB;AA4B9C;;CAEC,GACD,OAAO,MAAMC,sBAAQX,KAAK,SAASW,MAAMC,KAAiB;QA+C3CC;IA9Cb,MAAM,EAAEC,WAAU,EAAEC,aAAY,EAAEC,aAAY,EAAEC,aAAY,EAAEC,GAAE,EAAEL,aAAY,EAAEM,iBAAgB,EAAE,GAAGC,QAAQ,GAAGR;IAEhH,yDAAyD;IACzD,MAAMS,mBAAmBhB,MAAM;IAC/B,MAAMiB,WAAW,CAAC,EAAED,iBAAiB,OAAO,CAAC;IAE7C,MAAM,CAACE,gBAAgBC,kBAAkB,GAAG1B,SAA6B;IAEzE,MAAM,EAAE2B,MAAK,EAAEC,OAAM,EAAE,GAAGzB,kBAAkB;QAAE0B,KAAKJ;IAAe;IAElE,MAAMK,oBAAoB7B,QAAQ;QAChC,IAAI0B,UAAUI,aAAaH,WAAWG,WAAW,OAAOA;QACxD,OAAO;YAAEJ;YAAOC;QAAO;IACzB,GAAG;QAACD;QAAOC;KAAO;IAElB,MAAMI,cAAcxB;IAEpB,MAAMyB,mBAA8C,CAACC;QACnDhB,yBAAAA,0BAAAA,KAAAA,IAAAA,aAAegB;IACjB;IAEA,MAAMC,mBAA8C,CAACD;QACnDf,yBAAAA,0BAAAA,KAAAA,IAAAA,aAAee;IACjB;IAEA,qBACE,MAACzB;QACC2B,WAAU;QACVhB,IAAId,UACF;YACEqB,OAAO;YACPC,QAAQ;YACRS,SAAS;YACTC,UAAU;QACZ,GACAlB;QAEFmB,SAAQ;QACRrB,cAAce;QACdd,cAAcgB;QACdK,mBAAiBhB;QACjBiB,oBAAkBjB;QAClBkB,eAAY;QACX,GAAGpB,MAAM;;0BAEV,KAACX;gBACCgC,KAAK,EAAE5B,yBAAAA,0BAAAA,KAAAA,IAAAA,CAAAA,sBAAAA,aAAc4B,mBAAd5B,iCAAAA,KAAAA,IAAAA,oBAAAA,KAAAA,cAAsB;oBAAE6B,iBAAiB5B;oBAAYK;gBAAiB;gBAC7EwB,IAAIrB;gBACJsB,OAAO9B,WAAW+B,KAAKV,QAAQW;gBAC/BC,aAAajC,WAAW+B,KAAKV,QAAQY;gBACrChC,cAAcA;gBACdG,IAAI;oBAAE8B,UAAU,CAAC,EAAElB,YAAYmB,UAAUC,QAAQC,QAAQ,EAAE,CAAC;gBAAC;;0BAE/D,KAAC3C;gBACC0B,WAAU;gBACVhB,IAAI;oBACFkC,UAAU;oBACVC,UAAU;oBACVC,UAAU;oBACVC,QAAQ;oBACRL,SAAS;oBACT,4CAA4C;oBAC5C,eAAe;wBACbA,SAAS;oBACX;gBACF;gBACAvB,KAAKH;0BAEL,cAAA,KAACtB;oBAAcsD,mBAAmBrD;oBAAYsD,WAAW;wBAAC3C,WAAW+B;qBAAK;8BACxE,cAAA,KAACnC;wBACCgD,iBAAiB5C,WAAW+B,KAAKc,OAAOC;wBACxCf,MAAM/B,WAAW+B,KAAKc,OAAOd;wBAC7BjB,mBAAmBA;;;;;;AAM/B,GAAG"}

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

@@ -1 +1 @@
-{"version":3,"sources":["../../../src/components/Panel/PanelContent.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 { usePlugin, PanelProps } from '@perses-dev/plugin-system';\nimport { Skeleton } from '@mui/material';\nimport { UnknownSpec } from '@perses-dev/core';\n\nexport interface PanelContentProps extends PanelProps<UnknownSpec> {\n  panelPluginKind: string;\n}\n\n/**\n * A small wrapper component that renders the appropriate PanelComponent from a Panel plugin based on the panel\n * definition's kind. Used so that an ErrorBoundary can be wrapped around this.\n */\nexport function PanelContent(props: PanelContentProps) {\n  const { panelPluginKind, contentDimensions, ...others } = props;\n  const { data: plugin, isLoading } = usePlugin('Panel', panelPluginKind, { useErrorBoundary: true });\n  const PanelComponent = plugin?.PanelComponent;\n\n  if (isLoading) {\n    return (\n      <Skeleton\n        variant=\"rectangular\"\n        width={contentDimensions?.width}\n        height={contentDimensions?.height}\n        aria-label=\"Loading...\"\n      />\n    );\n  }\n\n  if (PanelComponent === undefined) {\n    throw new Error(`Missing PanelComponent from panel plugin for kind '${panelPluginKind}'`);\n  }\n\n  return <PanelComponent {...others} contentDimensions={contentDimensions} />;\n}\n"],"names":["usePlugin","Skeleton","PanelContent","props","panelPluginKind","contentDimensions","others","data","plugin","isLoading","useErrorBoundary","PanelComponent","variant","width","height","aria-label","undefined","Error"],"mappings":"AAAA,oCAAoC;AACpC,kEAAkE;AAClE,mEAAmE;AACnE,0CAA0C;AAC1C,EAAE;AACF,6CAA6C;AAC7C,EAAE;AACF,sEAAsE;AACtE,oEAAoE;AACpE,2EAA2E;AAC3E,sEAAsE;AACtE,iCAAiC;AAEjC;AAAA,SAASA,SAAS,QAAoB,2BAA2B,CAAC;AAClE,SAASC,QAAQ,QAAQ,eAAe,CAAC;AAOzC;;;CAGC,GACD,OAAO,SAASC,YAAY,CAACC,KAAwB,EAAE;IACrD,MAAM,EAAEC,eAAe,CAAA,EAAEC,iBAAiB,CAAA,EAAE,GAAGC,MAAM,EAAE,GAAGH,KAAK,AAAC;IAChE,MAAM,EAAEI,IAAI,EAAEC,MAAM,CAAA,EAAEC,SAAS,CAAA,EAAE,GAAGT,SAAS,CAAC,OAAO,EAAEI,eAAe,EAAE;QAAEM,gBAAgB,EAAE,IAAI;KAAE,CAAC,AAAC;IACpG,MAAMC,cAAc,GAAGH,MAAM,aAANA,MAAM,WAAgB,GAAtBA,KAAAA,CAAsB,GAAtBA,MAAM,CAAEG,cAAc,AAAC;IAE9C,IAAIF,SAAS,EAAE;QACb,qBACE,KAACR,QAAQ;YACPW,OAAO,EAAC,aAAa;YACrBC,KAAK,EAAER,iBAAiB,aAAjBA,iBAAiB,WAAO,GAAxBA,KAAAA,CAAwB,GAAxBA,iBAAiB,CAAEQ,KAAK;YAC/BC,MAAM,EAAET,iBAAiB,aAAjBA,iBAAiB,WAAQ,GAAzBA,KAAAA,CAAyB,GAAzBA,iBAAiB,CAAES,MAAM;YACjCC,YAAU,EAAC,YAAY;UACvB,CACF;IACJ,CAAC;IAED,IAAIJ,cAAc,KAAKK,SAAS,EAAE;QAChC,MAAM,IAAIC,KAAK,CAAC,CAAC,mDAAmD,EAAEb,eAAe,CAAC,CAAC,CAAC,CAAC,CAAC;IAC5F,CAAC;IAED,qBAAO,KAACO,cAAc;QAAE,GAAGL,MAAM;QAAED,iBAAiB,EAAEA,iBAAiB;MAAI,CAAC;AAC9E,CAAC"}
+{"version":3,"sources":["../../../src/components/Panel/PanelContent.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 { usePlugin, PanelProps } from '@perses-dev/plugin-system';\nimport { Skeleton } from '@mui/material';\nimport { UnknownSpec } from '@perses-dev/core';\n\nexport interface PanelContentProps extends PanelProps<UnknownSpec> {\n  panelPluginKind: string;\n}\n\n/**\n * A small wrapper component that renders the appropriate PanelComponent from a Panel plugin based on the panel\n * definition's kind. Used so that an ErrorBoundary can be wrapped around this.\n */\nexport function PanelContent(props: PanelContentProps) {\n  const { panelPluginKind, contentDimensions, ...others } = props;\n  const { data: plugin, isLoading } = usePlugin('Panel', panelPluginKind, { useErrorBoundary: true });\n  const PanelComponent = plugin?.PanelComponent;\n\n  if (isLoading) {\n    return (\n      <Skeleton\n        variant=\"rectangular\"\n        width={contentDimensions?.width}\n        height={contentDimensions?.height}\n        aria-label=\"Loading...\"\n      />\n    );\n  }\n\n  if (PanelComponent === undefined) {\n    throw new Error(`Missing PanelComponent from panel plugin for kind '${panelPluginKind}'`);\n  }\n\n  return <PanelComponent {...others} contentDimensions={contentDimensions} />;\n}\n"],"names":["usePlugin","Skeleton","PanelContent","props","panelPluginKind","contentDimensions","others","data","plugin","isLoading","useErrorBoundary","PanelComponent","variant","width","height","aria-label","undefined","Error"],"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,SAAS,QAAoB,4BAA4B;AAClE,SAASC,QAAQ,QAAQ,gBAAgB;AAOzC;;;CAGC,GACD,OAAO,SAASC,aAAaC,KAAwB;IACnD,MAAM,EAAEC,gBAAe,EAAEC,kBAAiB,EAAE,GAAGC,QAAQ,GAAGH;IAC1D,MAAM,EAAEI,MAAMC,OAAM,EAAEC,UAAS,EAAE,GAAGT,UAAU,SAASI,iBAAiB;QAAEM,kBAAkB;IAAK;IACjG,MAAMC,iBAAiBH,mBAAAA,oBAAAA,KAAAA,IAAAA,OAAQG;IAE/B,IAAIF,WAAW;QACb,qBACE,KAACR;YACCW,SAAQ;YACRC,OAAOR,8BAAAA,+BAAAA,KAAAA,IAAAA,kBAAmBQ;YAC1BC,QAAQT,8BAAAA,+BAAAA,KAAAA,IAAAA,kBAAmBS;YAC3BC,cAAW;;IAGjB;IAEA,IAAIJ,mBAAmBK,WAAW;QAChC,MAAM,IAAIC,MAAM,CAAC,mDAAmD,EAAEb,gBAAgB,CAAC,CAAC;IAC1F;IAEA,qBAAO,KAACO;QAAgB,GAAGL,MAAM;QAAED,mBAAmBA;;AACxD"}