@perses-dev/dashboards 0.54.0-beta.0 → 0.54.0-beta.2

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

@@ -1 +1 @@
-{"version":3,"sources":["../../../src/components/EditJsonDialog/EditJsonDialog.tsx"],"sourcesContent":["// Copyright 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, ReactElement, useState } from 'react';\nimport { Alert, FormControl } from '@mui/material';\nimport { Dialog, JSONEditor } from '@perses-dev/components';\nimport { useDatasourceStore, useTimeRange } from '@perses-dev/plugin-system';\nimport { useEditJsonDialog, useDashboard } from '../../context';\n\nexport interface EditJsonDialogProps {\n  isReadonly: boolean;\n  disableMetadataEdition?: boolean;\n}\n\nexport const EditJsonDialog = (props: EditJsonDialogProps): ReactElement => {\n  const { isReadonly, 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()}>{!isReadonly && 'Edit '} Dashboard JSON</Dialog.Header>\n      {editJsonDialog?.isOpen && (\n        <EditJsonDialogForm isReadonly={isReadonly} disableMetadataEdition={disableMetadataEdition} />\n      )}\n    </Dialog>\n  );\n};\n\nconst EditJsonDialogForm = (props: EditJsonDialogProps): ReactElement => {\n  const { isReadonly, disableMetadataEdition } = props;\n  const { closeEditJsonDialog } = useEditJsonDialog();\n  const { setTimeRange, setRefreshInterval } = useTimeRange();\n  const { dashboard, setDashboard } = useDashboard();\n  const { setLocalDatasources } = useDatasourceStore();\n  const [draftDashboard, setDraftDashboard] = useState(dashboard);\n\n  const handleApply = (e: FormEvent): void => {\n    e.preventDefault();\n    setDashboard(draftDashboard);\n    setTimeRange({ pastDuration: draftDashboard.spec.duration });\n    setRefreshInterval(draftDashboard.spec.refreshInterval ?? '0s');\n    setLocalDatasources(draftDashboard.spec.datasources ?? {});\n    closeEditJsonDialog();\n  };\n\n  const completeDraftDashboard = (dashboard: string | undefined): void => {\n    try {\n      const json = JSON.parse(dashboard ?? '{}');\n      setDraftDashboard(json);\n    } catch (_) {\n      // do nothing\n    }\n  };\n\n  return (\n    <Dialog.Form onSubmit={handleApply}>\n      <Dialog.Content sx={{ width: '100%' }}>\n        {disableMetadataEdition && !isReadonly && (\n          <Alert sx={{ marginBottom: (theme) => theme.spacing(1) }} severity=\"warning\">\n            Metadata cannot be modified or saved.\n          </Alert>\n        )}\n        {draftDashboard.kind === 'EphemeralDashboard' && (\n          <Alert sx={{ marginBottom: 1 }} severity=\"warning\">\n            Time-to-live cannot be modified or saved from here. Go to the project view to modify it.\n          </Alert>\n        )}\n        <FormControl fullWidth>\n          <JSONEditor\n            minHeight=\"300px\"\n            maxHeight=\"70vh\"\n            value={draftDashboard}\n            onChange={(value: string) => completeDraftDashboard(value)}\n            readOnly={isReadonly}\n          />\n        </FormControl>\n      </Dialog.Content>\n      {!isReadonly && (\n        <Dialog.Actions>\n          <Dialog.PrimaryButton onClick={handleApply}>Apply</Dialog.PrimaryButton>\n        </Dialog.Actions>\n      )}\n    </Dialog.Form>\n  );\n};\n"],"names":["useState","Alert","FormControl","Dialog","JSONEditor","useDatasourceStore","useTimeRange","useEditJsonDialog","useDashboard","EditJsonDialog","props","isReadonly","disableMetadataEdition","editJsonDialog","closeEditJsonDialog","open","isOpen","scroll","fullWidth","maxWidth","Header","onClose","EditJsonDialogForm","setTimeRange","setRefreshInterval","dashboard","setDashboard","setLocalDatasources","draftDashboard","setDraftDashboard","handleApply","e","preventDefault","pastDuration","spec","duration","refreshInterval","datasources","completeDraftDashboard","json","JSON","parse","_","Form","onSubmit","Content","sx","width","marginBottom","theme","spacing","severity","kind","minHeight","maxHeight","value","onChange","readOnly","Actions","PrimaryButton","onClick"],"mappings":"AAAA,+BAA+B;AAC/B,kEAAkE;AAClE,mEAAmE;AACnE,0CAA0C;AAC1C,EAAE;AACF,6CAA6C;AAC7C,EAAE;AACF,sEAAsE;AACtE,oEAAoE;AACpE,2EAA2E;AAC3E,sEAAsE;AACtE,iCAAiC;;AAEjC,SAAkCA,QAAQ,QAAQ,QAAQ;AAC1D,SAASC,KAAK,EAAEC,WAAW,QAAQ,gBAAgB;AACnD,SAASC,MAAM,EAAEC,UAAU,QAAQ,yBAAyB;AAC5D,SAASC,kBAAkB,EAAEC,YAAY,QAAQ,4BAA4B;AAC7E,SAASC,iBAAiB,EAAEC,YAAY,QAAQ,gBAAgB;AAOhE,OAAO,MAAMC,iBAAiB,CAACC;IAC7B,MAAM,EAAEC,UAAU,EAAEC,sBAAsB,EAAE,GAAGF;IAC/C,MAAM,EAAEG,cAAc,EAAEC,mBAAmB,EAAE,GAAGP;IAEhD,qBACE,MAACJ;QAAOY,MAAM,CAAC,CAACF,gBAAgBG;QAAQC,QAAO;QAAQC,SAAS;QAACC,UAAS;;0BACxE,MAAChB,OAAOiB,MAAM;gBAACC,SAAS,IAAMP;;oBAAwB,CAACH,cAAc;oBAAQ;;;YAC5EE,gBAAgBG,wBACf,KAACM;gBAAmBX,YAAYA;gBAAYC,wBAAwBA;;;;AAI5E,EAAE;AAEF,MAAMU,qBAAqB,CAACZ;IAC1B,MAAM,EAAEC,UAAU,EAAEC,sBAAsB,EAAE,GAAGF;IAC/C,MAAM,EAAEI,mBAAmB,EAAE,GAAGP;IAChC,MAAM,EAAEgB,YAAY,EAAEC,kBAAkB,EAAE,GAAGlB;IAC7C,MAAM,EAAEmB,SAAS,EAAEC,YAAY,EAAE,GAAGlB;IACpC,MAAM,EAAEmB,mBAAmB,EAAE,GAAGtB;IAChC,MAAM,CAACuB,gBAAgBC,kBAAkB,GAAG7B,SAASyB;IAErD,MAAMK,cAAc,CAACC;QACnBA,EAAEC,cAAc;QAChBN,aAAaE;QACbL,aAAa;YAAEU,cAAcL,eAAeM,IAAI,CAACC,QAAQ;QAAC;QAC1DX,mBAAmBI,eAAeM,IAAI,CAACE,eAAe,IAAI;QAC1DT,oBAAoBC,eAAeM,IAAI,CAACG,WAAW,IAAI,CAAC;QACxDvB;IACF;IAEA,MAAMwB,yBAAyB,CAACb;QAC9B,IAAI;YACF,MAAMc,OAAOC,KAAKC,KAAK,CAAChB,aAAa;YACrCI,kBAAkBU;QACpB,EAAE,OAAOG,GAAG;QACV,aAAa;QACf;IACF;IAEA,qBACE,MAACvC,OAAOwC,IAAI;QAACC,UAAUd;;0BACrB,MAAC3B,OAAO0C,OAAO;gBAACC,IAAI;oBAAEC,OAAO;gBAAO;;oBACjCnC,0BAA0B,CAACD,4BAC1B,KAACV;wBAAM6C,IAAI;4BAAEE,cAAc,CAACC,QAAUA,MAAMC,OAAO,CAAC;wBAAG;wBAAGC,UAAS;kCAAU;;oBAI9EvB,eAAewB,IAAI,KAAK,sCACvB,KAACnD;wBAAM6C,IAAI;4BAAEE,cAAc;wBAAE;wBAAGG,UAAS;kCAAU;;kCAIrD,KAACjD;wBAAYgB,SAAS;kCACpB,cAAA,KAACd;4BACCiD,WAAU;4BACVC,WAAU;4BACVC,OAAO3B;4BACP4B,UAAU,CAACD,QAAkBjB,uBAAuBiB;4BACpDE,UAAU9C;;;;;YAIf,CAACA,4BACA,KAACR,OAAOuD,OAAO;0BACb,cAAA,KAACvD,OAAOwD,aAAa;oBAACC,SAAS9B;8BAAa;;;;;AAKtD"}
+{"version":3,"sources":["../../../src/components/EditJsonDialog/EditJsonDialog.tsx"],"sourcesContent":["// Copyright 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, ReactElement, useState } from 'react';\nimport { Alert, FormControl } from '@mui/material';\nimport { Dialog, JSONEditor } from '@perses-dev/components';\nimport { useDatasourceStore, useTimeRange } from '@perses-dev/plugin-system';\nimport { useEditJsonDialog, useDashboard } from '../../context';\n\nexport interface EditJsonDialogProps {\n  isReadonly: boolean;\n  disableMetadataEdition?: boolean;\n}\n\nexport const EditJsonDialog = (props: EditJsonDialogProps): ReactElement => {\n  const { isReadonly, 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()}>{!isReadonly && 'Edit '} Dashboard JSON</Dialog.Header>\n      {editJsonDialog?.isOpen && (\n        <EditJsonDialogForm isReadonly={isReadonly} disableMetadataEdition={disableMetadataEdition} />\n      )}\n    </Dialog>\n  );\n};\n\nconst EditJsonDialogForm = (props: EditJsonDialogProps): ReactElement => {\n  const { isReadonly, disableMetadataEdition } = props;\n  const { closeEditJsonDialog } = useEditJsonDialog();\n  const { setTimeRange, setRefreshInterval } = useTimeRange();\n  const { dashboard, setDashboard } = useDashboard();\n  const { setLocalDatasources } = useDatasourceStore();\n  const [draftDashboard, setDraftDashboard] = useState(dashboard);\n\n  const handleApply = (e: FormEvent): void => {\n    e.preventDefault();\n    setDashboard(draftDashboard);\n    setTimeRange({ pastDuration: draftDashboard.spec.duration });\n    setRefreshInterval(draftDashboard.spec.refreshInterval ?? '0s');\n    setLocalDatasources(draftDashboard.spec.datasources ?? {});\n    closeEditJsonDialog();\n  };\n\n  const completeDraftDashboard = (dashboard: string | undefined): void => {\n    try {\n      const json = JSON.parse(dashboard ?? '{}');\n      setDraftDashboard(json);\n    } catch (_) {\n      // do nothing\n    }\n  };\n\n  return (\n    <Dialog.Form onSubmit={handleApply}>\n      <Dialog.Content sx={{ width: '100%' }}>\n        {disableMetadataEdition && !isReadonly && (\n          <Alert sx={{ marginBottom: (theme) => theme.spacing(1) }} severity=\"warning\">\n            Metadata cannot be modified or saved.\n          </Alert>\n        )}\n        {draftDashboard.kind === 'EphemeralDashboard' && (\n          <Alert sx={{ marginBottom: 1 }} severity=\"warning\">\n            Time-to-live cannot be modified or saved from here. Go to the project view to modify it.\n          </Alert>\n        )}\n        <FormControl fullWidth>\n          <JSONEditor\n            minHeight=\"300px\"\n            maxHeight=\"70vh\"\n            value={draftDashboard}\n            onChange={(value: string) => completeDraftDashboard(value)}\n            readOnly={isReadonly}\n          />\n        </FormControl>\n      </Dialog.Content>\n      {!isReadonly && (\n        <Dialog.Actions>\n          <Dialog.PrimaryButton onClick={handleApply}>Apply</Dialog.PrimaryButton>\n        </Dialog.Actions>\n      )}\n    </Dialog.Form>\n  );\n};\n"],"names":["useState","Alert","FormControl","Dialog","JSONEditor","useDatasourceStore","useTimeRange","useEditJsonDialog","useDashboard","EditJsonDialog","props","isReadonly","disableMetadataEdition","editJsonDialog","closeEditJsonDialog","open","isOpen","scroll","fullWidth","maxWidth","Header","onClose","EditJsonDialogForm","setTimeRange","setRefreshInterval","dashboard","setDashboard","setLocalDatasources","draftDashboard","setDraftDashboard","handleApply","e","preventDefault","pastDuration","spec","duration","refreshInterval","datasources","completeDraftDashboard","json","JSON","parse","_","Form","onSubmit","Content","sx","width","marginBottom","theme","spacing","severity","kind","minHeight","maxHeight","value","onChange","readOnly","Actions","PrimaryButton","onClick"],"mappings":";AAAA,+BAA+B;AAC/B,kEAAkE;AAClE,mEAAmE;AACnE,0CAA0C;AAC1C,EAAE;AACF,6CAA6C;AAC7C,EAAE;AACF,sEAAsE;AACtE,oEAAoE;AACpE,2EAA2E;AAC3E,sEAAsE;AACtE,iCAAiC;AAEjC,SAAkCA,QAAQ,QAAQ,QAAQ;AAC1D,SAASC,KAAK,EAAEC,WAAW,QAAQ,gBAAgB;AACnD,SAASC,MAAM,EAAEC,UAAU,QAAQ,yBAAyB;AAC5D,SAASC,kBAAkB,EAAEC,YAAY,QAAQ,4BAA4B;AAC7E,SAASC,iBAAiB,EAAEC,YAAY,QAAQ,gBAAgB;AAOhE,OAAO,MAAMC,iBAAiB,CAACC;IAC7B,MAAM,EAAEC,UAAU,EAAEC,sBAAsB,EAAE,GAAGF;IAC/C,MAAM,EAAEG,cAAc,EAAEC,mBAAmB,EAAE,GAAGP;IAEhD,qBACE,MAACJ;QAAOY,MAAM,CAAC,CAACF,gBAAgBG;QAAQC,QAAO;QAAQC,SAAS;QAACC,UAAS;;0BACxE,MAAChB,OAAOiB,MAAM;gBAACC,SAAS,IAAMP;;oBAAwB,CAACH,cAAc;oBAAQ;;;YAC5EE,gBAAgBG,wBACf,KAACM;gBAAmBX,YAAYA;gBAAYC,wBAAwBA;;;;AAI5E,EAAE;AAEF,MAAMU,qBAAqB,CAACZ;IAC1B,MAAM,EAAEC,UAAU,EAAEC,sBAAsB,EAAE,GAAGF;IAC/C,MAAM,EAAEI,mBAAmB,EAAE,GAAGP;IAChC,MAAM,EAAEgB,YAAY,EAAEC,kBAAkB,EAAE,GAAGlB;IAC7C,MAAM,EAAEmB,SAAS,EAAEC,YAAY,EAAE,GAAGlB;IACpC,MAAM,EAAEmB,mBAAmB,EAAE,GAAGtB;IAChC,MAAM,CAACuB,gBAAgBC,kBAAkB,GAAG7B,SAASyB;IAErD,MAAMK,cAAc,CAACC;QACnBA,EAAEC,cAAc;QAChBN,aAAaE;QACbL,aAAa;YAAEU,cAAcL,eAAeM,IAAI,CAACC,QAAQ;QAAC;QAC1DX,mBAAmBI,eAAeM,IAAI,CAACE,eAAe,IAAI;QAC1DT,oBAAoBC,eAAeM,IAAI,CAACG,WAAW,IAAI,CAAC;QACxDvB;IACF;IAEA,MAAMwB,yBAAyB,CAACb;QAC9B,IAAI;YACF,MAAMc,OAAOC,KAAKC,KAAK,CAAChB,aAAa;YACrCI,kBAAkBU;QACpB,EAAE,OAAOG,GAAG;QACV,aAAa;QACf;IACF;IAEA,qBACE,MAACvC,OAAOwC,IAAI;QAACC,UAAUd;;0BACrB,MAAC3B,OAAO0C,OAAO;gBAACC,IAAI;oBAAEC,OAAO;gBAAO;;oBACjCnC,0BAA0B,CAACD,4BAC1B,KAACV;wBAAM6C,IAAI;4BAAEE,cAAc,CAACC,QAAUA,MAAMC,OAAO,CAAC;wBAAG;wBAAGC,UAAS;kCAAU;;oBAI9EvB,eAAewB,IAAI,KAAK,sCACvB,KAACnD;wBAAM6C,IAAI;4BAAEE,cAAc;wBAAE;wBAAGG,UAAS;kCAAU;;kCAIrD,KAACjD;wBAAYgB,SAAS;kCACpB,cAAA,KAACd;4BACCiD,WAAU;4BACVC,WAAU;4BACVC,OAAO3B;4BACP4B,UAAU,CAACD,QAAkBjB,uBAAuBiB;4BACpDE,UAAU9C;;;;;YAIf,CAACA,4BACA,KAACR,OAAOuD,OAAO;0BACb,cAAA,KAACvD,OAAOwD,aAAa;oBAACC,SAAS9B;8BAAa;;;;;AAKtD"}

package/dist/components/EmptyDashboard/EmptyDashboard.js

@@ -1,3 +1,4 @@
+import { jsx as _jsx, jsxs as _jsxs, Fragment as _Fragment } from "react/jsx-runtime";
 // Copyright The Perses Authors
 // Licensed under the Apache License, Version 2.0 (the "License");
 // you may not use this file except in compliance with the License.
@@ -10,7 +11,6 @@
 // WITHOUT WARRANTIES OR CONDITIONS OF ANY KIND, either express or implied.
 // See the License for the specific language governing permissions and
 // limitations under the License.
-import { jsx as _jsx, jsxs as _jsxs, Fragment as _Fragment } from "react/jsx-runtime";
 import { Typography, Box } from '@mui/material';
 import { useEditMode } from '../../context';
 import { AddPanelButton } from '../AddPanelButton';

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

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

package/dist/components/GridLayout/GridContainer.js

@@ -1,3 +1,4 @@
+import { jsx as _jsx } from "react/jsx-runtime";
 // Copyright The Perses Authors
 // Licensed under the Apache License, Version 2.0 (the "License");
 // you may not use this file except in compliance with the License.
@@ -10,7 +11,6 @@
 // WITHOUT WARRANTIES OR CONDITIONS OF ANY KIND, either express or implied.
 // See the License for the specific language governing permissions and
 // limitations under the License.
-import { jsx as _jsx } from "react/jsx-runtime";
 import { useEffect, useState } from 'react';
 import { styled } from '@mui/material';
 export function GridContainer(props) {

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

@@ -1 +1 @@
-{"version":3,"sources":["../../../src/components/GridLayout/GridContainer.tsx"],"sourcesContent":["// Copyright The Perses Authors\n// Licensed under the Apache License, Version 2.0 (the \"License\");\n// you may not use this file except in compliance with the License.\n// You may obtain a copy of the License at\n//\n// http://www.apache.org/licenses/LICENSE-2.0\n//\n// Unless required by applicable law or agreed to in writing, software\n// distributed under the License is distributed on an \"AS IS\" BASIS,\n// WITHOUT WARRANTIES OR CONDITIONS OF ANY KIND, either express or implied.\n// See the License for the specific language governing permissions and\n// limitations under the License.\n\nimport { ReactElement, ReactNode, useEffect, useState } from 'react';\nimport { styled, SxProps, Theme } from '@mui/material';\n\nexport interface GridContainerProps {\n  children: ReactNode;\n  sx?: SxProps<Theme>;\n}\n\nexport function GridContainer(props: GridContainerProps): ReactElement {\n  const [isFirstRender, setIsFirstRender] = useState(true);\n  useEffect(() => {\n    if (isFirstRender) {\n      setIsFirstRender(false);\n    }\n  }, [isFirstRender]);\n\n  return (\n    <ReactGridLayoutContainer\n      sx={[\n        {\n          // This adds spacing between grids (rows) in the overall dashboard\n          '& + &': { marginTop: 1 },\n          // This disables the animation of grid items when a grid is first rendered\n          // (see https://github.com/react-grid-layout/react-grid-layout/issues/103)\n          '& .react-grid-item.cssTransforms': { transitionProperty: isFirstRender ? 'none' : 'transform' },\n        },\n        ...(Array.isArray(props.sx) ? props.sx : [props.sx]),\n      ]}\n      data-testid=\"panel-group\"\n    >\n      {props.children}\n    </ReactGridLayoutContainer>\n  );\n}\n\n/**\n * These are the classes needed by react-grid-layout from their CSS stylesheet.\n */\nconst ReactGridLayoutContainer = styled('section')(({ theme }) => ({\n  '& .react-grid-layout': {\n    position: 'relative',\n    transition: 'height 200ms ease',\n  },\n  '& .react-grid-item': {\n    transition: 'all 200ms ease',\n    transitionProperty: 'left, top',\n  },\n  '& .react-grid-item img': {\n    pointerEvents: 'none',\n    userSelect: 'none',\n  },\n  '& .react-grid-item.cssTransforms': {\n    transitionProperty: 'transform',\n  },\n  '& .react-grid-item.resizing': {\n    zIndex: 1,\n    willChange: 'width, height',\n  },\n  '& .react-grid-item.react-draggable-dragging': {\n    transition: 'none',\n    zIndex: 3,\n    willChange: 'transform',\n  },\n  '& .react-grid-item.dropping': {\n    visibility: 'hidden',\n  },\n  '& .react-grid-item.react-grid-placeholder': {\n    background: theme.palette.primary.main,\n    opacity: 0.2,\n    transitionDuration: '100ms',\n    zIndex: 2,\n    userSelect: 'none',\n    WebkitUserSelect: 'none',\n    MozUserSelect: 'none',\n    msUserSelect: 'none',\n    OUserSelect: 'none',\n  },\n\n  '& .react-grid-item > .react-resizable-handle': {\n    position: 'absolute',\n    width: '20px',\n    height: '20px',\n  },\n  '& .react-grid-item > .react-resizable-handle::after': {\n    content: '\"\"',\n    position: 'absolute',\n    right: '3px',\n    bottom: '3px',\n    width: '5px',\n    height: '5px',\n    borderRight: `2px solid ${theme.palette.text.secondary}`,\n    borderBottom: `2px solid ${theme.palette.text.secondary}`,\n  },\n\n  '& .react-resizable-hide > .react-resizable-handle': {\n    display: 'none',\n  },\n\n  '& .react-grid-item > .react-resizable-handle.react-resizable-handle-sw': {\n    bottom: '0',\n    left: '0',\n    cursor: 'sw-resize',\n    transform: 'rotate(90deg)',\n  },\n  '& .react-grid-item > .react-resizable-handle.react-resizable-handle-se': {\n    bottom: '0',\n    right: '0',\n    cursor: 'se-resize',\n  },\n  '& .react-grid-item > .react-resizable-handle.react-resizable-handle-nw': {\n    top: '0',\n    left: '0',\n    cursor: 'nw-resize',\n    transform: 'rotate(180deg)',\n  },\n  '& .react-grid-item > .react-resizable-handle.react-resizable-handle-ne': {\n    top: '0',\n    right: '0',\n    cursor: 'ne-resize',\n    transform: 'rotate(270deg)',\n  },\n  '& .react-grid-item > .react-resizable-handle.react-resizable-handle-w, &.react-grid-item > .react-resizable-handle.react-resizable-handle-e':\n    {\n      top: '50%',\n      marginTop: '-10px',\n      cursor: 'ew-resize',\n    },\n  '& .react-grid-item > .react-resizable-handle.react-resizable-handle-w': {\n    left: '0',\n    transform: 'rotate(135deg)',\n  },\n  '& .react-grid-item > .react-resizable-handle.react-resizable-handle-e': {\n    right: '0',\n    transform: 'rotate(315deg)',\n  },\n  '& .react-grid-item > .react-resizable-handle.react-resizable-handle-n, &.react-grid-item > .react-resizable-handle.react-resizable-handle-s':\n    {\n      left: '50%',\n      marginLeft: '-10px',\n      cursor: 'ns-resize',\n    },\n  '& .react-grid-item > .react-resizable-handle.react-resizable-handle-n': {\n    top: '0',\n    transform: 'rotate(225deg)',\n  },\n  '& .react-grid-item > .react-resizable-handle.react-resizable-handle-s': {\n    bottom: '0',\n    transform: 'rotate(45deg)',\n  },\n  '& .react-resizable': {\n    position: 'relative',\n  },\n  '& .react-resizable-handle': {\n    position: 'absolute',\n    width: '20px',\n    height: '20px',\n    backgroundRepeat: 'no-repeat',\n    backgroundOrigin: 'content-box',\n    boxSizing: 'border-box',\n    backgroundImage: `url('data:image/svg+xml;base64,PHN2ZyB4bWxucz0iaHR0cDovL3d3dy53My5vcmcvMjAwMC9zdmciIHZpZXdCb3g9IjAgMCA2IDYiIHN0eWxlPSJiYWNrZ3JvdW5kLWNvbG9yOiNmZmZmZmYwMCIgeD0iMHB4IiB5PSIwcHgiIHdpZHRoPSI2cHgiIGhlaWdodD0iNnB4Ij48ZyBvcGFjaXR5PSIwLjMwMiI+PHBhdGggZD0iTSA2IDYgTCAwIDYgTCAwIDQuMiBMIDQgNC4yIEwgNC4yIDQuMiBMIDQuMiAwIEwgNiAwIEwgNiA2IEwgNiA2IFoiIGZpbGw9IiMwMDAwMDAiLz48L2c+PC9zdmc+')`,\n    backgroundPosition: 'bottom right',\n    padding: '0 3px 3px 0',\n  },\n  '& .react-resizable-handle-sw': {\n    bottom: '0',\n    left: '0',\n    cursor: 'sw-resize',\n    transform: 'rotate(90deg)',\n  },\n  '& .react-resizable-handle-se': {\n    bottom: '0',\n    right: '0',\n    cursor: 'se-resize',\n  },\n  '& .react-resizable-handle-nw': {\n    top: '0',\n    left: '0',\n    cursor: 'nw-resize',\n    transform: 'rotate(180deg)',\n  },\n  '& .react-resizable-handle-ne': {\n    top: '0',\n    right: '0',\n    cursor: 'ne-resize',\n    transform: 'rotate(270deg)',\n  },\n  '& .react-resizable-handle-w, .react-resizable-handle-e': {\n    top: '50%',\n    marginTop: '-10px',\n    cursor: 'ew-resize',\n  },\n  '& .react-resizable-handle-w': {\n    left: '0',\n    transform: 'rotate(135deg)',\n  },\n  '& .react-resizable-handle-e': {\n    right: '0',\n    transform: 'rotate(315deg)',\n  },\n  '& .react-resizable-handle-n, .react-resizable-handle-s': {\n    left: '50%',\n    marginLeft: '-10px',\n    cursor: 'ns-resize',\n  },\n  '& .react-resizable-handle-n': {\n    top: '0',\n    transform: 'rotate(225deg)',\n  },\n  '& .react-resizable-handle-s': {\n    bottom: '0',\n    transform: 'rotate(45deg)',\n  },\n}));\n"],"names":["useEffect","useState","styled","GridContainer","props","isFirstRender","setIsFirstRender","ReactGridLayoutContainer","sx","marginTop","transitionProperty","Array","isArray","data-testid","children","theme","position","transition","pointerEvents","userSelect","zIndex","willChange","visibility","background","palette","primary","main","opacity","transitionDuration","WebkitUserSelect","MozUserSelect","msUserSelect","OUserSelect","width","height","content","right","bottom","borderRight","text","secondary","borderBottom","display","left","cursor","transform","top","marginLeft","backgroundRepeat","backgroundOrigin","boxSizing","backgroundImage","backgroundPosition","padding"],"mappings":"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"}
+{"version":3,"sources":["../../../src/components/GridLayout/GridContainer.tsx"],"sourcesContent":["// Copyright The Perses Authors\n// Licensed under the Apache License, Version 2.0 (the \"License\");\n// you may not use this file except in compliance with the License.\n// You may obtain a copy of the License at\n//\n// http://www.apache.org/licenses/LICENSE-2.0\n//\n// Unless required by applicable law or agreed to in writing, software\n// distributed under the License is distributed on an \"AS IS\" BASIS,\n// WITHOUT WARRANTIES OR CONDITIONS OF ANY KIND, either express or implied.\n// See the License for the specific language governing permissions and\n// limitations under the License.\n\nimport { ReactElement, ReactNode, useEffect, useState } from 'react';\nimport { styled, SxProps, Theme } from '@mui/material';\n\nexport interface GridContainerProps {\n  children: ReactNode;\n  sx?: SxProps<Theme>;\n}\n\nexport function GridContainer(props: GridContainerProps): ReactElement {\n  const [isFirstRender, setIsFirstRender] = useState(true);\n  useEffect(() => {\n    if (isFirstRender) {\n      setIsFirstRender(false);\n    }\n  }, [isFirstRender]);\n\n  return (\n    <ReactGridLayoutContainer\n      sx={[\n        {\n          // This adds spacing between grids (rows) in the overall dashboard\n          '& + &': { marginTop: 1 },\n          // This disables the animation of grid items when a grid is first rendered\n          // (see https://github.com/react-grid-layout/react-grid-layout/issues/103)\n          '& .react-grid-item.cssTransforms': { transitionProperty: isFirstRender ? 'none' : 'transform' },\n        },\n        ...(Array.isArray(props.sx) ? props.sx : [props.sx]),\n      ]}\n      data-testid=\"panel-group\"\n    >\n      {props.children}\n    </ReactGridLayoutContainer>\n  );\n}\n\n/**\n * These are the classes needed by react-grid-layout from their CSS stylesheet.\n */\nconst ReactGridLayoutContainer = styled('section')(({ theme }) => ({\n  '& .react-grid-layout': {\n    position: 'relative',\n    transition: 'height 200ms ease',\n  },\n  '& .react-grid-item': {\n    transition: 'all 200ms ease',\n    transitionProperty: 'left, top',\n  },\n  '& .react-grid-item img': {\n    pointerEvents: 'none',\n    userSelect: 'none',\n  },\n  '& .react-grid-item.cssTransforms': {\n    transitionProperty: 'transform',\n  },\n  '& .react-grid-item.resizing': {\n    zIndex: 1,\n    willChange: 'width, height',\n  },\n  '& .react-grid-item.react-draggable-dragging': {\n    transition: 'none',\n    zIndex: 3,\n    willChange: 'transform',\n  },\n  '& .react-grid-item.dropping': {\n    visibility: 'hidden',\n  },\n  '& .react-grid-item.react-grid-placeholder': {\n    background: theme.palette.primary.main,\n    opacity: 0.2,\n    transitionDuration: '100ms',\n    zIndex: 2,\n    userSelect: 'none',\n    WebkitUserSelect: 'none',\n    MozUserSelect: 'none',\n    msUserSelect: 'none',\n    OUserSelect: 'none',\n  },\n\n  '& .react-grid-item > .react-resizable-handle': {\n    position: 'absolute',\n    width: '20px',\n    height: '20px',\n  },\n  '& .react-grid-item > .react-resizable-handle::after': {\n    content: '\"\"',\n    position: 'absolute',\n    right: '3px',\n    bottom: '3px',\n    width: '5px',\n    height: '5px',\n    borderRight: `2px solid ${theme.palette.text.secondary}`,\n    borderBottom: `2px solid ${theme.palette.text.secondary}`,\n  },\n\n  '& .react-resizable-hide > .react-resizable-handle': {\n    display: 'none',\n  },\n\n  '& .react-grid-item > .react-resizable-handle.react-resizable-handle-sw': {\n    bottom: '0',\n    left: '0',\n    cursor: 'sw-resize',\n    transform: 'rotate(90deg)',\n  },\n  '& .react-grid-item > .react-resizable-handle.react-resizable-handle-se': {\n    bottom: '0',\n    right: '0',\n    cursor: 'se-resize',\n  },\n  '& .react-grid-item > .react-resizable-handle.react-resizable-handle-nw': {\n    top: '0',\n    left: '0',\n    cursor: 'nw-resize',\n    transform: 'rotate(180deg)',\n  },\n  '& .react-grid-item > .react-resizable-handle.react-resizable-handle-ne': {\n    top: '0',\n    right: '0',\n    cursor: 'ne-resize',\n    transform: 'rotate(270deg)',\n  },\n  '& .react-grid-item > .react-resizable-handle.react-resizable-handle-w, &.react-grid-item > .react-resizable-handle.react-resizable-handle-e':\n    {\n      top: '50%',\n      marginTop: '-10px',\n      cursor: 'ew-resize',\n    },\n  '& .react-grid-item > .react-resizable-handle.react-resizable-handle-w': {\n    left: '0',\n    transform: 'rotate(135deg)',\n  },\n  '& .react-grid-item > .react-resizable-handle.react-resizable-handle-e': {\n    right: '0',\n    transform: 'rotate(315deg)',\n  },\n  '& .react-grid-item > .react-resizable-handle.react-resizable-handle-n, &.react-grid-item > .react-resizable-handle.react-resizable-handle-s':\n    {\n      left: '50%',\n      marginLeft: '-10px',\n      cursor: 'ns-resize',\n    },\n  '& .react-grid-item > .react-resizable-handle.react-resizable-handle-n': {\n    top: '0',\n    transform: 'rotate(225deg)',\n  },\n  '& .react-grid-item > .react-resizable-handle.react-resizable-handle-s': {\n    bottom: '0',\n    transform: 'rotate(45deg)',\n  },\n  '& .react-resizable': {\n    position: 'relative',\n  },\n  '& .react-resizable-handle': {\n    position: 'absolute',\n    width: '20px',\n    height: '20px',\n    backgroundRepeat: 'no-repeat',\n    backgroundOrigin: 'content-box',\n    boxSizing: 'border-box',\n    backgroundImage: `url('data:image/svg+xml;base64,PHN2ZyB4bWxucz0iaHR0cDovL3d3dy53My5vcmcvMjAwMC9zdmciIHZpZXdCb3g9IjAgMCA2IDYiIHN0eWxlPSJiYWNrZ3JvdW5kLWNvbG9yOiNmZmZmZmYwMCIgeD0iMHB4IiB5PSIwcHgiIHdpZHRoPSI2cHgiIGhlaWdodD0iNnB4Ij48ZyBvcGFjaXR5PSIwLjMwMiI+PHBhdGggZD0iTSA2IDYgTCAwIDYgTCAwIDQuMiBMIDQgNC4yIEwgNC4yIDQuMiBMIDQuMiAwIEwgNiAwIEwgNiA2IEwgNiA2IFoiIGZpbGw9IiMwMDAwMDAiLz48L2c+PC9zdmc+')`,\n    backgroundPosition: 'bottom right',\n    padding: '0 3px 3px 0',\n  },\n  '& .react-resizable-handle-sw': {\n    bottom: '0',\n    left: '0',\n    cursor: 'sw-resize',\n    transform: 'rotate(90deg)',\n  },\n  '& .react-resizable-handle-se': {\n    bottom: '0',\n    right: '0',\n    cursor: 'se-resize',\n  },\n  '& .react-resizable-handle-nw': {\n    top: '0',\n    left: '0',\n    cursor: 'nw-resize',\n    transform: 'rotate(180deg)',\n  },\n  '& .react-resizable-handle-ne': {\n    top: '0',\n    right: '0',\n    cursor: 'ne-resize',\n    transform: 'rotate(270deg)',\n  },\n  '& .react-resizable-handle-w, .react-resizable-handle-e': {\n    top: '50%',\n    marginTop: '-10px',\n    cursor: 'ew-resize',\n  },\n  '& .react-resizable-handle-w': {\n    left: '0',\n    transform: 'rotate(135deg)',\n  },\n  '& .react-resizable-handle-e': {\n    right: '0',\n    transform: 'rotate(315deg)',\n  },\n  '& .react-resizable-handle-n, .react-resizable-handle-s': {\n    left: '50%',\n    marginLeft: '-10px',\n    cursor: 'ns-resize',\n  },\n  '& .react-resizable-handle-n': {\n    top: '0',\n    transform: 'rotate(225deg)',\n  },\n  '& .react-resizable-handle-s': {\n    bottom: '0',\n    transform: 'rotate(45deg)',\n  },\n}));\n"],"names":["useEffect","useState","styled","GridContainer","props","isFirstRender","setIsFirstRender","ReactGridLayoutContainer","sx","marginTop","transitionProperty","Array","isArray","data-testid","children","theme","position","transition","pointerEvents","userSelect","zIndex","willChange","visibility","background","palette","primary","main","opacity","transitionDuration","WebkitUserSelect","MozUserSelect","msUserSelect","OUserSelect","width","height","content","right","bottom","borderRight","text","secondary","borderBottom","display","left","cursor","transform","top","marginLeft","backgroundRepeat","backgroundOrigin","boxSizing","backgroundImage","backgroundPosition","padding"],"mappings":"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"}

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

@@ -1,5 +1,5 @@
 import { ReactElement } from 'react';
-import { PanelGroupItemId } from '@perses-dev/core';
+import { PanelGroupItemId } from '../../model';
 import { PanelOptions } from '../Panel';
 export interface GridItemContentProps {
     panelGroupItemId: PanelGroupItemId;

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

@@ -1 +1 @@
-{"version":3,"file":"GridItemContent.d.ts","sourceRoot":"","sources":["../../../src/components/GridLayout/GridItemContent.tsx"],"names":[],"mappings":"AAgBA,OAAc,EAAE,YAAY,EAAqB,MAAM,OAAO,CAAC;AAC/D,OAAO,EAA2B,gBAAgB,EAAE,MAAM,kBAAkB,CAAC;AAG7E,OAAO,EAAqB,YAAY,EAAE,MAAM,UAAU,CAAC;AAG3D,MAAM,WAAW,oBAAoB;IACnC,gBAAgB,EAAE,gBAAgB,CAAC;IACnC,KAAK,EAAE,MAAM,CAAC;IACd,YAAY,CAAC,EAAE,YAAY,CAAC;CAC7B;AAED;;GAEG;AACH,wBAAgB,eAAe,CAAC,KAAK,EAAE,oBAAoB,GAAG,YAAY,CAqHzE"}
+{"version":3,"file":"GridItemContent.d.ts","sourceRoot":"","sources":["../../../src/components/GridLayout/GridItemContent.tsx"],"names":[],"mappings":"AAgBA,OAAc,EAAE,YAAY,EAAqB,MAAM,OAAO,CAAC;AAC/D,OAAO,EAA2B,gBAAgB,EAAE,MAAM,aAAa,CAAC;AAGxE,OAAO,EAAqB,YAAY,EAAE,MAAM,UAAU,CAAC;AAG3D,MAAM,WAAW,oBAAoB;IACnC,gBAAgB,EAAE,gBAAgB,CAAC;IACnC,KAAK,EAAE,MAAM,CAAC;IACd,YAAY,CAAC,EAAE,YAAY,CAAC;CAC7B;AAED;;GAEG;AACH,wBAAgB,eAAe,CAAC,KAAK,EAAE,oBAAoB,GAAG,YAAY,CAqHzE"}

package/dist/components/GridLayout/GridItemContent.js

@@ -1,3 +1,4 @@
+import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
 // Copyright The Perses Authors
 // Licensed under the Apache License, Version 2.0 (the "License");
 // you may not use this file except in compliance with the License.
@@ -10,12 +11,11 @@
 // WITHOUT WARRANTIES OR CONDITIONS OF ANY KIND, either express or implied.
 // See the License for the specific language governing permissions and
 // limitations under the License.
-import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
 import { Box, useForkRef } from '@mui/material';
 import { useInView } from 'react-intersection-observer';
 import { DataQueriesProvider, usePlugin, useSuggestedStepMs } from '@perses-dev/plugin-system';
 import React, { useMemo, useState } from 'react';
-import { isPanelGroupItemIdEqual } from '@perses-dev/core'; // TODO
+import { isPanelGroupItemIdEqual } from '../../model'; // TODO
 import { useEditMode, usePanel, usePanelActions, useViewPanelGroup } from '../../context';
 import { usePanelFocusHandlers } from '../../keyboard-shortcuts';
 import { Panel } from '../Panel';

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

@@ -1 +1 @@
-{"version":3,"sources":["../../../src/components/GridLayout/GridItemContent.tsx"],"sourcesContent":["// Copyright 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, useForkRef } from '@mui/material';\nimport { useInView } from 'react-intersection-observer';\nimport { DataQueriesProvider, usePlugin, useSuggestedStepMs } from '@perses-dev/plugin-system';\nimport React, { ReactElement, useMemo, useState } from 'react';\nimport { isPanelGroupItemIdEqual, PanelGroupItemId } from '@perses-dev/core'; // TODO\nimport { useEditMode, usePanel, usePanelActions, useViewPanelGroup } from '../../context';\nimport { usePanelFocusHandlers } from '../../keyboard-shortcuts';\nimport { Panel, PanelProps, PanelOptions } from '../Panel';\nimport { QueryViewerDialog } from '../QueryViewerDialog';\n\nexport interface GridItemContentProps {\n  panelGroupItemId: PanelGroupItemId;\n  width: number; // necessary for determining the suggested step ms\n  panelOptions?: PanelOptions;\n}\n\n/**\n * Resolves the reference to panel content in a GridItemDefinition and renders the panel.\n */\nexport function GridItemContent(props: GridItemContentProps): ReactElement {\n  const { panelGroupItemId, width } = props;\n  const panelDefinition = usePanel(panelGroupItemId);\n\n  const {\n    spec: { queries },\n  } = panelDefinition;\n\n  const { isEditMode } = useEditMode();\n  const { openEditPanel, openDeletePanelDialog, duplicatePanel, viewPanel } = usePanelActions(panelGroupItemId);\n  const viewPanelGroupItemId = useViewPanelGroup();\n\n  // Panel focus tracking for keyboard shortcuts\n  const { onMouseEnter, onMouseLeave } = usePanelFocusHandlers(\n    `${panelGroupItemId.panelGroupId}-${panelGroupItemId.panelGroupItemLayoutId}`\n  );\n\n  const { ref: queryRef, inView: shouldQuery } = useInView({\n    threshold: 0,\n    initialInView: false,\n    triggerOnce: true,\n  });\n\n  const { ref: renderRef, inView: shouldRender } = useInView({\n    threshold: 0.2,\n    initialInView: false,\n    triggerOnce: false,\n  });\n\n  const mergedRef = useForkRef(renderRef, queryRef);\n\n  const [openQueryViewer, setOpenQueryViewer] = useState(false);\n\n  const viewQueriesHandler = useMemo(() => {\n    return isEditMode || !queries?.length\n      ? undefined\n      : {\n          onClick: (): void => {\n            setOpenQueryViewer(true);\n          },\n        };\n  }, [isEditMode, queries]);\n\n  const readHandlers = {\n    isPanelViewed: isPanelGroupItemIdEqual(viewPanelGroupItemId, panelGroupItemId),\n    onViewPanelClick: function (): void {\n      if (viewPanelGroupItemId === undefined) {\n        viewPanel(panelGroupItemId);\n      } else {\n        viewPanel(undefined);\n      }\n    },\n  };\n\n  // Provide actions to the panel when in edit mode\n  let editHandlers: PanelProps['editHandlers'] = undefined;\n  if (isEditMode) {\n    editHandlers = {\n      onEditPanelClick: openEditPanel,\n      onDuplicatePanelClick: duplicatePanel,\n      onDeletePanelClick: openDeletePanelDialog,\n    };\n  }\n\n  // map TimeSeriesQueryDefinition to Definition<UnknownSpec>\n  const suggestedStepMs = useSuggestedStepMs(width);\n\n  const { data: plugin } = usePlugin('Panel', panelDefinition.spec.plugin.kind);\n\n  const queryDefinitions = queries ?? [];\n  const definitions = queryDefinitions.map((query) => {\n    return {\n      kind: query.spec.plugin.kind,\n      spec: query.spec.plugin.spec,\n    };\n  });\n\n  const pluginQueryOptions =\n    typeof plugin?.queryOptions === 'function'\n      ? plugin?.queryOptions(panelDefinition.spec.plugin.spec)\n      : plugin?.queryOptions;\n\n  return (\n    <Box\n      ref={mergedRef}\n      tabIndex={-1}\n      onMouseEnter={onMouseEnter}\n      onMouseLeave={onMouseLeave}\n      sx={{\n        width: '100%',\n        height: '100%',\n        outline: 'none',\n      }}\n    >\n      <DataQueriesProvider\n        definitions={definitions}\n        options={{ suggestedStepMs, ...pluginQueryOptions }}\n        queryOptions={{ enabled: shouldQuery }}\n      >\n        {shouldRender && (\n          <Panel\n            definition={panelDefinition}\n            readHandlers={readHandlers}\n            editHandlers={editHandlers}\n            viewQueriesHandler={viewQueriesHandler}\n            panelOptions={props.panelOptions}\n            panelGroupItemId={panelGroupItemId}\n          />\n        )}\n      </DataQueriesProvider>\n      <QueryViewerDialog\n        open={openQueryViewer}\n        queryDefinitions={queryDefinitions}\n        onClose={() => setOpenQueryViewer(false)}\n      />\n    </Box>\n  );\n}\n"],"names":["Box","useForkRef","useInView","DataQueriesProvider","usePlugin","useSuggestedStepMs","React","useMemo","useState","isPanelGroupItemIdEqual","useEditMode","usePanel","usePanelActions","useViewPanelGroup","usePanelFocusHandlers","Panel","QueryViewerDialog","GridItemContent","props","panelGroupItemId","width","panelDefinition","spec","queries","isEditMode","openEditPanel","openDeletePanelDialog","duplicatePanel","viewPanel","viewPanelGroupItemId","onMouseEnter","onMouseLeave","panelGroupId","panelGroupItemLayoutId","ref","queryRef","inView","shouldQuery","threshold","initialInView","triggerOnce","renderRef","shouldRender","mergedRef","openQueryViewer","setOpenQueryViewer","viewQueriesHandler","length","undefined","onClick","readHandlers","isPanelViewed","onViewPanelClick","editHandlers","onEditPanelClick","onDuplicatePanelClick","onDeletePanelClick","suggestedStepMs","data","plugin","kind","queryDefinitions","definitions","map","query","pluginQueryOptions","queryOptions","tabIndex","sx","height","outline","options","enabled","definition","panelOptions","open","onClose"],"mappings":"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"}
+{"version":3,"sources":["../../../src/components/GridLayout/GridItemContent.tsx"],"sourcesContent":["// Copyright 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, useForkRef } from '@mui/material';\nimport { useInView } from 'react-intersection-observer';\nimport { DataQueriesProvider, usePlugin, useSuggestedStepMs } from '@perses-dev/plugin-system';\nimport React, { ReactElement, useMemo, useState } from 'react';\nimport { isPanelGroupItemIdEqual, PanelGroupItemId } from '../../model'; // TODO\nimport { useEditMode, usePanel, usePanelActions, useViewPanelGroup } from '../../context';\nimport { usePanelFocusHandlers } from '../../keyboard-shortcuts';\nimport { Panel, PanelProps, PanelOptions } from '../Panel';\nimport { QueryViewerDialog } from '../QueryViewerDialog';\n\nexport interface GridItemContentProps {\n  panelGroupItemId: PanelGroupItemId;\n  width: number; // necessary for determining the suggested step ms\n  panelOptions?: PanelOptions;\n}\n\n/**\n * Resolves the reference to panel content in a GridItemDefinition and renders the panel.\n */\nexport function GridItemContent(props: GridItemContentProps): ReactElement {\n  const { panelGroupItemId, width } = props;\n  const panelDefinition = usePanel(panelGroupItemId);\n\n  const {\n    spec: { queries },\n  } = panelDefinition;\n\n  const { isEditMode } = useEditMode();\n  const { openEditPanel, openDeletePanelDialog, duplicatePanel, viewPanel } = usePanelActions(panelGroupItemId);\n  const viewPanelGroupItemId = useViewPanelGroup();\n\n  // Panel focus tracking for keyboard shortcuts\n  const { onMouseEnter, onMouseLeave } = usePanelFocusHandlers(\n    `${panelGroupItemId.panelGroupId}-${panelGroupItemId.panelGroupItemLayoutId}`\n  );\n\n  const { ref: queryRef, inView: shouldQuery } = useInView({\n    threshold: 0,\n    initialInView: false,\n    triggerOnce: true,\n  });\n\n  const { ref: renderRef, inView: shouldRender } = useInView({\n    threshold: 0.2,\n    initialInView: false,\n    triggerOnce: false,\n  });\n\n  const mergedRef = useForkRef(renderRef, queryRef);\n\n  const [openQueryViewer, setOpenQueryViewer] = useState(false);\n\n  const viewQueriesHandler = useMemo(() => {\n    return isEditMode || !queries?.length\n      ? undefined\n      : {\n          onClick: (): void => {\n            setOpenQueryViewer(true);\n          },\n        };\n  }, [isEditMode, queries]);\n\n  const readHandlers = {\n    isPanelViewed: isPanelGroupItemIdEqual(viewPanelGroupItemId, panelGroupItemId),\n    onViewPanelClick: function (): void {\n      if (viewPanelGroupItemId === undefined) {\n        viewPanel(panelGroupItemId);\n      } else {\n        viewPanel(undefined);\n      }\n    },\n  };\n\n  // Provide actions to the panel when in edit mode\n  let editHandlers: PanelProps['editHandlers'] = undefined;\n  if (isEditMode) {\n    editHandlers = {\n      onEditPanelClick: openEditPanel,\n      onDuplicatePanelClick: duplicatePanel,\n      onDeletePanelClick: openDeletePanelDialog,\n    };\n  }\n\n  // map TimeSeriesQueryDefinition to Definition<UnknownSpec>\n  const suggestedStepMs = useSuggestedStepMs(width);\n\n  const { data: plugin } = usePlugin('Panel', panelDefinition.spec.plugin.kind);\n\n  const queryDefinitions = queries ?? [];\n  const definitions = queryDefinitions.map((query) => {\n    return {\n      kind: query.spec.plugin.kind,\n      spec: query.spec.plugin.spec,\n    };\n  });\n\n  const pluginQueryOptions =\n    typeof plugin?.queryOptions === 'function'\n      ? plugin?.queryOptions(panelDefinition.spec.plugin.spec)\n      : plugin?.queryOptions;\n\n  return (\n    <Box\n      ref={mergedRef}\n      tabIndex={-1}\n      onMouseEnter={onMouseEnter}\n      onMouseLeave={onMouseLeave}\n      sx={{\n        width: '100%',\n        height: '100%',\n        outline: 'none',\n      }}\n    >\n      <DataQueriesProvider\n        definitions={definitions}\n        options={{ suggestedStepMs, ...pluginQueryOptions }}\n        queryOptions={{ enabled: shouldQuery }}\n      >\n        {shouldRender && (\n          <Panel\n            definition={panelDefinition}\n            readHandlers={readHandlers}\n            editHandlers={editHandlers}\n            viewQueriesHandler={viewQueriesHandler}\n            panelOptions={props.panelOptions}\n            panelGroupItemId={panelGroupItemId}\n          />\n        )}\n      </DataQueriesProvider>\n      <QueryViewerDialog\n        open={openQueryViewer}\n        queryDefinitions={queryDefinitions}\n        onClose={() => setOpenQueryViewer(false)}\n      />\n    </Box>\n  );\n}\n"],"names":["Box","useForkRef","useInView","DataQueriesProvider","usePlugin","useSuggestedStepMs","React","useMemo","useState","isPanelGroupItemIdEqual","useEditMode","usePanel","usePanelActions","useViewPanelGroup","usePanelFocusHandlers","Panel","QueryViewerDialog","GridItemContent","props","panelGroupItemId","width","panelDefinition","spec","queries","isEditMode","openEditPanel","openDeletePanelDialog","duplicatePanel","viewPanel","viewPanelGroupItemId","onMouseEnter","onMouseLeave","panelGroupId","panelGroupItemLayoutId","ref","queryRef","inView","shouldQuery","threshold","initialInView","triggerOnce","renderRef","shouldRender","mergedRef","openQueryViewer","setOpenQueryViewer","viewQueriesHandler","length","undefined","onClick","readHandlers","isPanelViewed","onViewPanelClick","editHandlers","onEditPanelClick","onDuplicatePanelClick","onDeletePanelClick","suggestedStepMs","data","plugin","kind","queryDefinitions","definitions","map","query","pluginQueryOptions","queryOptions","tabIndex","sx","height","outline","options","enabled","definition","panelOptions","open","onClose"],"mappings":"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"}

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

@@ -1 +1 @@
-{"version":3,"file":"GridLayout.d.ts","sourceRoot":"","sources":["../../../src/components/GridLayout/GridLayout.tsx"],"names":[],"mappings":"AAYA,OAAO,EAAE,YAAY,EAAY,MAAM,OAAO,CAAC;AAG/C,OAAO,EAAE,YAAY,EAAE,MAAM,kBAAkB,CAAC;AAIhD,OAAO,EAAE,YAAY,EAAE,MAAM,UAAU,CAAC;AACxC,OAAO,EAAO,QAAQ,EAAE,MAAM,OAAO,CAAC;AAEtC,MAAM,WAAW,eAAe;IAC9B,YAAY,EAAE,YAAY,CAAC;IAC3B,YAAY,CAAC,EAAE,YAAY,CAAC;IAC5B,eAAe,CAAC,EAAE,MAAM,CAAC;CAC1B;AAED;;GAEG;AACH,wBAAgB,UAAU,CAAC,KAAK,EAAE,eAAe,GAAG,YAAY,CAmE/D;AAED,MAAM,WAAW,qBAAsB,SAAQ,QAAQ;IACrD,kBAAkB,EAAE,MAAM,CAAC;CAC5B;AAED;;GAEG;AACH,wBAAgB,gBAAgB,CAAC,EAC/B,kBAAkB,EAClB,YAAY,EACZ,eAAe,EACf,YAAY,EACZ,eAAe,EACf,YAAY,EACZ,UAAkB,EAClB,cAAc,EACd,aAAa,GACd,EAAE,qBAAqB,GAAG,YAAY,GAAG,IAAI,CA0C7C"}
+{"version":3,"file":"GridLayout.d.ts","sourceRoot":"","sources":["../../../src/components/GridLayout/GridLayout.tsx"],"names":[],"mappings":"AAYA,OAAO,EAAE,YAAY,EAAY,MAAM,OAAO,CAAC;AAG/C,OAAO,EAAE,YAAY,EAAE,MAAM,kBAAkB,CAAC;AAIhD,OAAO,EAAE,YAAY,EAAE,MAAM,UAAU,CAAC;AAExC,OAAO,EAAO,QAAQ,EAAE,MAAM,OAAO,CAAC;AAEtC,MAAM,WAAW,eAAe;IAC9B,YAAY,EAAE,YAAY,CAAC;IAC3B,YAAY,CAAC,EAAE,YAAY,CAAC;IAC5B,eAAe,CAAC,EAAE,MAAM,CAAC;CAC1B;AAED;;GAEG;AACH,wBAAgB,UAAU,CAAC,KAAK,EAAE,eAAe,GAAG,YAAY,CAmE/D;AAED,MAAM,WAAW,qBAAsB,SAAQ,QAAQ;IACrD,kBAAkB,EAAE,MAAM,CAAC;CAC5B;AAED;;GAEG;AACH,wBAAgB,gBAAgB,CAAC,EAC/B,kBAAkB,EAClB,YAAY,EACZ,eAAe,EACf,YAAY,EACZ,eAAe,EACf,YAAY,EACZ,UAAkB,EAClB,cAAc,EACd,aAAa,GACd,EAAE,qBAAqB,GAAG,YAAY,GAAG,IAAI,CA0C7C"}

package/dist/components/GridLayout/GridLayout.js

@@ -1,3 +1,4 @@
+import { jsx as _jsx, Fragment as _Fragment } from "react/jsx-runtime";
 // Copyright The Perses Authors
 // Licensed under the Apache License, Version 2.0 (the "License");
 // you may not use this file except in compliance with the License.
@@ -10,7 +11,6 @@
 // WITHOUT WARRANTIES OR CONDITIONS OF ANY KIND, either express or implied.
 // See the License for the specific language governing permissions and
 // limitations under the License.
-import { jsx as _jsx, Fragment as _Fragment } from "react/jsx-runtime";
 import { useState } from 'react';
 import { useVariableValues, VariableContext } from '@perses-dev/plugin-system';
 import { useEditMode, usePanelGroup, usePanelGroupActions, useViewPanelGroup } from '../../context';

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

@@ -1 +1 @@
-{"version":3,"sources":["../../../src/components/GridLayout/GridLayout.tsx"],"sourcesContent":["// Copyright The Perses Authors\n// Licensed under the Apache License, Version 2.0 (the \"License\");\n// you may not use this file except in compliance with the License.\n// You may obtain a copy of the License at\n//\n// http://www.apache.org/licenses/LICENSE-2.0\n//\n// Unless required by applicable law or agreed to in writing, software\n// distributed under the License is distributed on an \"AS IS\" BASIS,\n// WITHOUT WARRANTIES OR CONDITIONS OF ANY KIND, either express or implied.\n// See the License for the specific language governing permissions and\n// limitations under the License.\nimport { ReactElement, useState } from 'react';\nimport { Layouts, Layout } from 'react-grid-layout';\nimport { PanelGroupDefinition } from '@perses-dev/core'; // TODO what should we do about the PanelGroupDefinition ?\nimport { PanelGroupId } from '@perses-dev/spec';\nimport { useVariableValues, VariableContext } from '@perses-dev/plugin-system';\nimport { useEditMode, usePanelGroup, usePanelGroupActions, useViewPanelGroup } from '../../context';\nimport { GRID_LAYOUT_SMALL_BREAKPOINT } from '../../constants';\nimport { PanelOptions } from '../Panel';\nimport { Row, RowProps } from './Row';\n\nexport interface GridLayoutProps {\n  panelGroupId: PanelGroupId;\n  panelOptions?: PanelOptions;\n  panelFullHeight?: number;\n}\n\n/**\n * Layout component that arranges children in a Grid based on the definition.\n */\nexport function GridLayout(props: GridLayoutProps): ReactElement {\n  const { panelGroupId, panelOptions, panelFullHeight } = props;\n  const groupDefinition: PanelGroupDefinition = usePanelGroup(panelGroupId);\n  const { updatePanelGroupLayouts } = usePanelGroupActions(panelGroupId);\n  const viewPanelItemId = useViewPanelGroup();\n  const { isEditMode } = useEditMode();\n\n  const [gridColWidth, setGridColWidth] = useState(0);\n\n  const hasViewPanel = viewPanelItemId?.panelGroupId === panelGroupId; // current panelGroup contains the panel extended?\n\n  const handleLayoutChange = (currentLayout: Layout[], allLayouts: Layouts): void => {\n    // Using the value from `allLayouts` instead of `currentLayout` because of\n    // a bug in react-layout-grid where `currentLayout` does not adjust properly\n    // when going to a smaller breakpoint and then back to a larger breakpoint.\n    // https://github.com/react-grid-layout/react-grid-layout/issues/1663\n    const smallLayout = allLayouts[GRID_LAYOUT_SMALL_BREAKPOINT];\n    if (smallLayout && !hasViewPanel) {\n      updatePanelGroupLayouts(smallLayout);\n    }\n  };\n\n  /**\n   * Calculate the column width so we can determine the width of each panel for suggested step ms\n   * https://github.com/react-grid-layout/react-grid-layout/blob/master/lib/calculateUtils.js#L14-L35\n   */\n  const handleWidthChange = (\n    containerWidth: number,\n    margin: [number, number],\n    cols: number,\n    containerPadding: [number, number]\n  ): void => {\n    const marginX = margin[0];\n    const marginWidth = marginX * (cols - 1);\n    const containerPaddingWidth = containerPadding[0] * 2;\n    // exclude margin and padding from total width\n    setGridColWidth((containerWidth - marginWidth - containerPaddingWidth) / cols);\n  };\n\n  return (\n    <>\n      {!groupDefinition.repeatVariable ? (\n        <Row\n          panelGroupId={panelGroupId}\n          groupDefinition={groupDefinition}\n          gridColWidth={gridColWidth}\n          panelFullHeight={panelFullHeight}\n          panelOptions={panelOptions}\n          isEditMode={isEditMode}\n          onLayoutChange={handleLayoutChange}\n          onWidthChange={handleWidthChange}\n        />\n      ) : (\n        <RepeatGridLayout\n          repeatVariableName={groupDefinition.repeatVariable}\n          panelGroupId={panelGroupId}\n          groupDefinition={groupDefinition}\n          gridColWidth={gridColWidth}\n          panelFullHeight={panelFullHeight}\n          panelOptions={panelOptions}\n          isEditMode={isEditMode}\n          onLayoutChange={handleLayoutChange}\n          onWidthChange={handleWidthChange}\n        />\n      )}\n    </>\n  );\n}\n\nexport interface RepeatGridLayoutProps extends RowProps {\n  repeatVariableName: string;\n}\n\n/**\n * Renders a grid layout for a repeated variable, where each value of the variable will create a new row.\n */\nexport function RepeatGridLayout({\n  repeatVariableName,\n  panelGroupId,\n  groupDefinition,\n  gridColWidth,\n  panelFullHeight,\n  panelOptions,\n  isEditMode = false,\n  onLayoutChange,\n  onWidthChange,\n}: RepeatGridLayoutProps): ReactElement | null {\n  const variables = useVariableValues();\n  const variable = variables[repeatVariableName];\n\n  // If the variable is not defined, or if it is defined but has no values, render a standard row without repeating\n  if (variable === undefined || !Array.isArray(variable.value) || variable.value.length === 0) {\n    return (\n      <Row\n        panelGroupId={panelGroupId}\n        groupDefinition={groupDefinition}\n        gridColWidth={gridColWidth}\n        panelFullHeight={panelFullHeight}\n        panelOptions={panelOptions}\n        isEditMode={isEditMode}\n        onLayoutChange={onLayoutChange}\n        onWidthChange={onWidthChange}\n      />\n    );\n  }\n\n  return (\n    <>\n      {variable.value.map((value) => (\n        <VariableContext.Provider\n          key={`${repeatVariableName}-${value}`}\n          value={{ state: { ...variables, [repeatVariableName]: { value, loading: false } } }}\n        >\n          <Row\n            panelGroupId={panelGroupId}\n            groupDefinition={groupDefinition}\n            gridColWidth={gridColWidth}\n            panelFullHeight={panelFullHeight}\n            panelOptions={panelOptions}\n            isEditMode={isEditMode}\n            onLayoutChange={onLayoutChange}\n            onWidthChange={onWidthChange}\n            repeatVariable={[repeatVariableName, value]}\n          />\n        </VariableContext.Provider>\n      ))}\n    </>\n  );\n}\n"],"names":["useState","useVariableValues","VariableContext","useEditMode","usePanelGroup","usePanelGroupActions","useViewPanelGroup","GRID_LAYOUT_SMALL_BREAKPOINT","Row","GridLayout","props","panelGroupId","panelOptions","panelFullHeight","groupDefinition","updatePanelGroupLayouts","viewPanelItemId","isEditMode","gridColWidth","setGridColWidth","hasViewPanel","handleLayoutChange","currentLayout","allLayouts","smallLayout","handleWidthChange","containerWidth","margin","cols","containerPadding","marginX","marginWidth","containerPaddingWidth","repeatVariable","onLayoutChange","onWidthChange","RepeatGridLayout","repeatVariableName","variables","variable","undefined","Array","isArray","value","length","map","Provider","state","loading"],"mappings":"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"}
+{"version":3,"sources":["../../../src/components/GridLayout/GridLayout.tsx"],"sourcesContent":["// Copyright The Perses Authors\n// Licensed under the Apache License, Version 2.0 (the \"License\");\n// you may not use this file except in compliance with the License.\n// You may obtain a copy of the License at\n//\n// http://www.apache.org/licenses/LICENSE-2.0\n//\n// Unless required by applicable law or agreed to in writing, software\n// distributed under the License is distributed on an \"AS IS\" BASIS,\n// WITHOUT WARRANTIES OR CONDITIONS OF ANY KIND, either express or implied.\n// See the License for the specific language governing permissions and\n// limitations under the License.\nimport { ReactElement, useState } from 'react';\nimport { Layouts, Layout } from 'react-grid-layout';\n\nimport { PanelGroupId } from '@perses-dev/spec';\nimport { useVariableValues, VariableContext } from '@perses-dev/plugin-system';\nimport { useEditMode, usePanelGroup, usePanelGroupActions, useViewPanelGroup } from '../../context';\nimport { GRID_LAYOUT_SMALL_BREAKPOINT } from '../../constants';\nimport { PanelOptions } from '../Panel';\nimport { PanelGroupDefinition } from '../../model';\nimport { Row, RowProps } from './Row';\n\nexport interface GridLayoutProps {\n  panelGroupId: PanelGroupId;\n  panelOptions?: PanelOptions;\n  panelFullHeight?: number;\n}\n\n/**\n * Layout component that arranges children in a Grid based on the definition.\n */\nexport function GridLayout(props: GridLayoutProps): ReactElement {\n  const { panelGroupId, panelOptions, panelFullHeight } = props;\n  const groupDefinition: PanelGroupDefinition = usePanelGroup(panelGroupId);\n  const { updatePanelGroupLayouts } = usePanelGroupActions(panelGroupId);\n  const viewPanelItemId = useViewPanelGroup();\n  const { isEditMode } = useEditMode();\n\n  const [gridColWidth, setGridColWidth] = useState(0);\n\n  const hasViewPanel = viewPanelItemId?.panelGroupId === panelGroupId; // current panelGroup contains the panel extended?\n\n  const handleLayoutChange = (currentLayout: Layout[], allLayouts: Layouts): void => {\n    // Using the value from `allLayouts` instead of `currentLayout` because of\n    // a bug in react-layout-grid where `currentLayout` does not adjust properly\n    // when going to a smaller breakpoint and then back to a larger breakpoint.\n    // https://github.com/react-grid-layout/react-grid-layout/issues/1663\n    const smallLayout = allLayouts[GRID_LAYOUT_SMALL_BREAKPOINT];\n    if (smallLayout && !hasViewPanel) {\n      updatePanelGroupLayouts(smallLayout);\n    }\n  };\n\n  /**\n   * Calculate the column width so we can determine the width of each panel for suggested step ms\n   * https://github.com/react-grid-layout/react-grid-layout/blob/master/lib/calculateUtils.js#L14-L35\n   */\n  const handleWidthChange = (\n    containerWidth: number,\n    margin: [number, number],\n    cols: number,\n    containerPadding: [number, number]\n  ): void => {\n    const marginX = margin[0];\n    const marginWidth = marginX * (cols - 1);\n    const containerPaddingWidth = containerPadding[0] * 2;\n    // exclude margin and padding from total width\n    setGridColWidth((containerWidth - marginWidth - containerPaddingWidth) / cols);\n  };\n\n  return (\n    <>\n      {!groupDefinition.repeatVariable ? (\n        <Row\n          panelGroupId={panelGroupId}\n          groupDefinition={groupDefinition}\n          gridColWidth={gridColWidth}\n          panelFullHeight={panelFullHeight}\n          panelOptions={panelOptions}\n          isEditMode={isEditMode}\n          onLayoutChange={handleLayoutChange}\n          onWidthChange={handleWidthChange}\n        />\n      ) : (\n        <RepeatGridLayout\n          repeatVariableName={groupDefinition.repeatVariable}\n          panelGroupId={panelGroupId}\n          groupDefinition={groupDefinition}\n          gridColWidth={gridColWidth}\n          panelFullHeight={panelFullHeight}\n          panelOptions={panelOptions}\n          isEditMode={isEditMode}\n          onLayoutChange={handleLayoutChange}\n          onWidthChange={handleWidthChange}\n        />\n      )}\n    </>\n  );\n}\n\nexport interface RepeatGridLayoutProps extends RowProps {\n  repeatVariableName: string;\n}\n\n/**\n * Renders a grid layout for a repeated variable, where each value of the variable will create a new row.\n */\nexport function RepeatGridLayout({\n  repeatVariableName,\n  panelGroupId,\n  groupDefinition,\n  gridColWidth,\n  panelFullHeight,\n  panelOptions,\n  isEditMode = false,\n  onLayoutChange,\n  onWidthChange,\n}: RepeatGridLayoutProps): ReactElement | null {\n  const variables = useVariableValues();\n  const variable = variables[repeatVariableName];\n\n  // If the variable is not defined, or if it is defined but has no values, render a standard row without repeating\n  if (variable === undefined || !Array.isArray(variable.value) || variable.value.length === 0) {\n    return (\n      <Row\n        panelGroupId={panelGroupId}\n        groupDefinition={groupDefinition}\n        gridColWidth={gridColWidth}\n        panelFullHeight={panelFullHeight}\n        panelOptions={panelOptions}\n        isEditMode={isEditMode}\n        onLayoutChange={onLayoutChange}\n        onWidthChange={onWidthChange}\n      />\n    );\n  }\n\n  return (\n    <>\n      {variable.value.map((value) => (\n        <VariableContext.Provider\n          key={`${repeatVariableName}-${value}`}\n          value={{ state: { ...variables, [repeatVariableName]: { value, loading: false } } }}\n        >\n          <Row\n            panelGroupId={panelGroupId}\n            groupDefinition={groupDefinition}\n            gridColWidth={gridColWidth}\n            panelFullHeight={panelFullHeight}\n            panelOptions={panelOptions}\n            isEditMode={isEditMode}\n            onLayoutChange={onLayoutChange}\n            onWidthChange={onWidthChange}\n            repeatVariable={[repeatVariableName, value]}\n          />\n        </VariableContext.Provider>\n      ))}\n    </>\n  );\n}\n"],"names":["useState","useVariableValues","VariableContext","useEditMode","usePanelGroup","usePanelGroupActions","useViewPanelGroup","GRID_LAYOUT_SMALL_BREAKPOINT","Row","GridLayout","props","panelGroupId","panelOptions","panelFullHeight","groupDefinition","updatePanelGroupLayouts","viewPanelItemId","isEditMode","gridColWidth","setGridColWidth","hasViewPanel","handleLayoutChange","currentLayout","allLayouts","smallLayout","handleWidthChange","containerWidth","margin","cols","containerPadding","marginX","marginWidth","containerPaddingWidth","repeatVariable","onLayoutChange","onWidthChange","RepeatGridLayout","repeatVariableName","variables","variable","undefined","Array","isArray","value","length","map","Provider","state","loading"],"mappings":"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"}

package/dist/components/GridLayout/GridTitle.js

@@ -1,3 +1,4 @@
+import { jsx as _jsx, jsxs as _jsxs, Fragment as _Fragment } from "react/jsx-runtime";
 // Copyright The Perses Authors
 // Licensed under the Apache License, Version 2.0 (the "License");
 // you may not use this file except in compliance with the License.
@@ -10,7 +11,6 @@
 // WITHOUT WARRANTIES OR CONDITIONS OF ANY KIND, either express or implied.
 // See the License for the specific language governing permissions and
 // limitations under the License.
-import { jsx as _jsx, jsxs as _jsxs, Fragment as _Fragment } from "react/jsx-runtime";
 import { Box, IconButton, Stack, Typography } from '@mui/material';
 import ExpandedIcon from 'mdi-material-ui/ChevronDown';
 import CollapsedIcon from 'mdi-material-ui/ChevronRight';

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

@@ -1 +1 @@
-{"version":3,"sources":["../../../src/components/GridLayout/GridTitle.tsx"],"sourcesContent":["// Copyright The Perses Authors\n// Licensed under the Apache License, Version 2.0 (the \"License\");\n// you may not use this file except in compliance with the License.\n// You may obtain a copy of the License at\n//\n// http://www.apache.org/licenses/LICENSE-2.0\n//\n// Unless required by applicable law or agreed to in writing, software\n// distributed under the License is distributed on an \"AS IS\" BASIS,\n// WITHOUT WARRANTIES OR CONDITIONS OF ANY KIND, either express or implied.\n// See the License for the specific language governing permissions and\n// limitations under the License.\n\nimport { Box, IconButton, Stack, Typography } from '@mui/material';\nimport ExpandedIcon from 'mdi-material-ui/ChevronDown';\nimport CollapsedIcon from 'mdi-material-ui/ChevronRight';\nimport AddPanelIcon from 'mdi-material-ui/ChartBoxPlusOutline';\nimport PencilIcon from 'mdi-material-ui/PencilOutline';\nimport ArrowUpIcon from 'mdi-material-ui/ArrowUp';\nimport ArrowDownIcon from 'mdi-material-ui/ArrowDown';\nimport DeleteIcon from 'mdi-material-ui/DeleteOutline';\nimport { InfoTooltip } from '@perses-dev/components';\nimport { useReplaceVariablesInString } from '@perses-dev/plugin-system';\nimport { PanelGroupId } from '@perses-dev/spec';\nimport { ReactElement } from 'react';\nimport { ARIA_LABEL_TEXT, TOOLTIP_TEXT } from '../../constants';\nimport { usePanelGroupActions, useEditMode, useDeletePanelGroupDialog } from '../../context';\n\nexport interface GridTitleProps {\n  panelGroupId: PanelGroupId;\n  title: string;\n  collapse?: {\n    isOpen: boolean;\n    onToggleOpen: () => void;\n  };\n}\n\n/**\n * Renders the title for a Grid section, optionally also supporting expanding\n * and collapsing\n */\nexport function GridTitle(props: GridTitleProps): ReactElement {\n  const { panelGroupId, title: rawTitle, collapse } = props;\n\n  const title = useReplaceVariablesInString(rawTitle) as string;\n\n  const { openAddPanel, openEditPanelGroup, moveUp, moveDown } = usePanelGroupActions(panelGroupId);\n  const { openDeletePanelGroupDialog } = useDeletePanelGroupDialog();\n  const { isEditMode } = useEditMode();\n\n  const text = <Typography variant=\"h2\">{title}</Typography>;\n\n  return (\n    <Box\n      onClick={collapse?.onToggleOpen}\n      sx={{\n        display: 'flex',\n        justifyContent: 'start',\n        alignItems: 'center',\n        cursor: collapse ? 'pointer' : 'auto',\n        backgroundColor: ({ palette }) => palette.background.paper,\n      }}\n      data-testid=\"panel-group-header\"\n    >\n      {collapse ? (\n        <>\n          <IconButton sx={{ marginRight: 1 }} aria-label={`${collapse.isOpen ? 'collapse' : 'expand'} group ${title}`}>\n            {collapse.isOpen ? <ExpandedIcon /> : <CollapsedIcon />}\n          </IconButton>\n          {text}\n          {isEditMode && (\n            <Stack direction=\"row\" marginLeft=\"auto\">\n              <InfoTooltip description={TOOLTIP_TEXT.addPanelToGroup}>\n                <IconButton\n                  aria-label={ARIA_LABEL_TEXT.addPanelToGroup(title)}\n                  onClick={(e) => {\n                    // Don't trigger expand/collapse\n                    e.stopPropagation();\n                    openAddPanel();\n                  }}\n                >\n                  <AddPanelIcon />\n                </IconButton>\n              </InfoTooltip>\n              <InfoTooltip description={TOOLTIP_TEXT.editGroup}>\n                <IconButton\n                  aria-label={ARIA_LABEL_TEXT.editGroup(title)}\n                  onClick={(e) => {\n                    // Don't trigger expand/collapse\n                    e.stopPropagation();\n                    openEditPanelGroup();\n                  }}\n                >\n                  <PencilIcon />\n                </IconButton>\n              </InfoTooltip>\n              <InfoTooltip description={TOOLTIP_TEXT.deleteGroup}>\n                <IconButton\n                  aria-label={ARIA_LABEL_TEXT.deleteGroup(title)}\n                  onClick={(e) => {\n                    // Don't trigger expand/collapse\n                    e.stopPropagation();\n                    openDeletePanelGroupDialog(panelGroupId);\n                  }}\n                >\n                  <DeleteIcon />\n                </IconButton>\n              </InfoTooltip>\n              <InfoTooltip description={TOOLTIP_TEXT.moveGroupDown}>\n                <IconButton\n                  aria-label={ARIA_LABEL_TEXT.moveGroupDown(title)}\n                  disabled={moveDown === undefined}\n                  onClick={(e) => {\n                    // Don't trigger expand/collapse\n                    e.stopPropagation();\n                    moveDown?.();\n                  }}\n                >\n                  <ArrowDownIcon />\n                </IconButton>\n              </InfoTooltip>\n              <InfoTooltip description={TOOLTIP_TEXT.moveGroupUp}>\n                <IconButton\n                  aria-label={ARIA_LABEL_TEXT.moveGroupUp(title)}\n                  disabled={moveUp === undefined}\n                  onClick={(e) => {\n                    // Don't trigger expand/collapse\n                    e.stopPropagation();\n                    moveUp?.();\n                  }}\n                >\n                  <ArrowUpIcon />\n                </IconButton>\n              </InfoTooltip>\n            </Stack>\n          )}\n        </>\n      ) : (\n        // If we don't need expand/collapse, just render the title text\n        text\n      )}\n    </Box>\n  );\n}\n"],"names":["Box","IconButton","Stack","Typography","ExpandedIcon","CollapsedIcon","AddPanelIcon","PencilIcon","ArrowUpIcon","ArrowDownIcon","DeleteIcon","InfoTooltip","useReplaceVariablesInString","ARIA_LABEL_TEXT","TOOLTIP_TEXT","usePanelGroupActions","useEditMode","useDeletePanelGroupDialog","GridTitle","props","panelGroupId","title","rawTitle","collapse","openAddPanel","openEditPanelGroup","moveUp","moveDown","openDeletePanelGroupDialog","isEditMode","text","variant","onClick","onToggleOpen","sx","display","justifyContent","alignItems","cursor","backgroundColor","palette","background","paper","data-testid","marginRight","aria-label","isOpen","direction","marginLeft","description","addPanelToGroup","e","stopPropagation","editGroup","deleteGroup","moveGroupDown","disabled","undefined","moveGroupUp"],"mappings":"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"}
+{"version":3,"sources":["../../../src/components/GridLayout/GridTitle.tsx"],"sourcesContent":["// Copyright The Perses Authors\n// Licensed under the Apache License, Version 2.0 (the \"License\");\n// you may not use this file except in compliance with the License.\n// You may obtain a copy of the License at\n//\n// http://www.apache.org/licenses/LICENSE-2.0\n//\n// Unless required by applicable law or agreed to in writing, software\n// distributed under the License is distributed on an \"AS IS\" BASIS,\n// WITHOUT WARRANTIES OR CONDITIONS OF ANY KIND, either express or implied.\n// See the License for the specific language governing permissions and\n// limitations under the License.\n\nimport { Box, IconButton, Stack, Typography } from '@mui/material';\nimport ExpandedIcon from 'mdi-material-ui/ChevronDown';\nimport CollapsedIcon from 'mdi-material-ui/ChevronRight';\nimport AddPanelIcon from 'mdi-material-ui/ChartBoxPlusOutline';\nimport PencilIcon from 'mdi-material-ui/PencilOutline';\nimport ArrowUpIcon from 'mdi-material-ui/ArrowUp';\nimport ArrowDownIcon from 'mdi-material-ui/ArrowDown';\nimport DeleteIcon from 'mdi-material-ui/DeleteOutline';\nimport { InfoTooltip } from '@perses-dev/components';\nimport { useReplaceVariablesInString } from '@perses-dev/plugin-system';\nimport { PanelGroupId } from '@perses-dev/spec';\nimport { ReactElement } from 'react';\nimport { ARIA_LABEL_TEXT, TOOLTIP_TEXT } from '../../constants';\nimport { usePanelGroupActions, useEditMode, useDeletePanelGroupDialog } from '../../context';\n\nexport interface GridTitleProps {\n  panelGroupId: PanelGroupId;\n  title: string;\n  collapse?: {\n    isOpen: boolean;\n    onToggleOpen: () => void;\n  };\n}\n\n/**\n * Renders the title for a Grid section, optionally also supporting expanding\n * and collapsing\n */\nexport function GridTitle(props: GridTitleProps): ReactElement {\n  const { panelGroupId, title: rawTitle, collapse } = props;\n\n  const title = useReplaceVariablesInString(rawTitle) as string;\n\n  const { openAddPanel, openEditPanelGroup, moveUp, moveDown } = usePanelGroupActions(panelGroupId);\n  const { openDeletePanelGroupDialog } = useDeletePanelGroupDialog();\n  const { isEditMode } = useEditMode();\n\n  const text = <Typography variant=\"h2\">{title}</Typography>;\n\n  return (\n    <Box\n      onClick={collapse?.onToggleOpen}\n      sx={{\n        display: 'flex',\n        justifyContent: 'start',\n        alignItems: 'center',\n        cursor: collapse ? 'pointer' : 'auto',\n        backgroundColor: ({ palette }) => palette.background.paper,\n      }}\n      data-testid=\"panel-group-header\"\n    >\n      {collapse ? (\n        <>\n          <IconButton sx={{ marginRight: 1 }} aria-label={`${collapse.isOpen ? 'collapse' : 'expand'} group ${title}`}>\n            {collapse.isOpen ? <ExpandedIcon /> : <CollapsedIcon />}\n          </IconButton>\n          {text}\n          {isEditMode && (\n            <Stack direction=\"row\" marginLeft=\"auto\">\n              <InfoTooltip description={TOOLTIP_TEXT.addPanelToGroup}>\n                <IconButton\n                  aria-label={ARIA_LABEL_TEXT.addPanelToGroup(title)}\n                  onClick={(e) => {\n                    // Don't trigger expand/collapse\n                    e.stopPropagation();\n                    openAddPanel();\n                  }}\n                >\n                  <AddPanelIcon />\n                </IconButton>\n              </InfoTooltip>\n              <InfoTooltip description={TOOLTIP_TEXT.editGroup}>\n                <IconButton\n                  aria-label={ARIA_LABEL_TEXT.editGroup(title)}\n                  onClick={(e) => {\n                    // Don't trigger expand/collapse\n                    e.stopPropagation();\n                    openEditPanelGroup();\n                  }}\n                >\n                  <PencilIcon />\n                </IconButton>\n              </InfoTooltip>\n              <InfoTooltip description={TOOLTIP_TEXT.deleteGroup}>\n                <IconButton\n                  aria-label={ARIA_LABEL_TEXT.deleteGroup(title)}\n                  onClick={(e) => {\n                    // Don't trigger expand/collapse\n                    e.stopPropagation();\n                    openDeletePanelGroupDialog(panelGroupId);\n                  }}\n                >\n                  <DeleteIcon />\n                </IconButton>\n              </InfoTooltip>\n              <InfoTooltip description={TOOLTIP_TEXT.moveGroupDown}>\n                <IconButton\n                  aria-label={ARIA_LABEL_TEXT.moveGroupDown(title)}\n                  disabled={moveDown === undefined}\n                  onClick={(e) => {\n                    // Don't trigger expand/collapse\n                    e.stopPropagation();\n                    moveDown?.();\n                  }}\n                >\n                  <ArrowDownIcon />\n                </IconButton>\n              </InfoTooltip>\n              <InfoTooltip description={TOOLTIP_TEXT.moveGroupUp}>\n                <IconButton\n                  aria-label={ARIA_LABEL_TEXT.moveGroupUp(title)}\n                  disabled={moveUp === undefined}\n                  onClick={(e) => {\n                    // Don't trigger expand/collapse\n                    e.stopPropagation();\n                    moveUp?.();\n                  }}\n                >\n                  <ArrowUpIcon />\n                </IconButton>\n              </InfoTooltip>\n            </Stack>\n          )}\n        </>\n      ) : (\n        // If we don't need expand/collapse, just render the title text\n        text\n      )}\n    </Box>\n  );\n}\n"],"names":["Box","IconButton","Stack","Typography","ExpandedIcon","CollapsedIcon","AddPanelIcon","PencilIcon","ArrowUpIcon","ArrowDownIcon","DeleteIcon","InfoTooltip","useReplaceVariablesInString","ARIA_LABEL_TEXT","TOOLTIP_TEXT","usePanelGroupActions","useEditMode","useDeletePanelGroupDialog","GridTitle","props","panelGroupId","title","rawTitle","collapse","openAddPanel","openEditPanelGroup","moveUp","moveDown","openDeletePanelGroupDialog","isEditMode","text","variant","onClick","onToggleOpen","sx","display","justifyContent","alignItems","cursor","backgroundColor","palette","background","paper","data-testid","marginRight","aria-label","isOpen","direction","marginLeft","description","addPanelToGroup","e","stopPropagation","editGroup","deleteGroup","moveGroupDown","disabled","undefined","moveGroupUp"],"mappings":";AAAA,+BAA+B;AAC/B,kEAAkE;AAClE,mEAAmE;AACnE,0CAA0C;AAC1C,EAAE;AACF,6CAA6C;AAC7C,EAAE;AACF,sEAAsE;AACtE,oEAAoE;AACpE,2EAA2E;AAC3E,sEAAsE;AACtE,iCAAiC;AAEjC,SAASA,GAAG,EAAEC,UAAU,EAAEC,KAAK,EAAEC,UAAU,QAAQ,gBAAgB;AACnE,OAAOC,kBAAkB,8BAA8B;AACvD,OAAOC,mBAAmB,+BAA+B;AACzD,OAAOC,kBAAkB,sCAAsC;AAC/D,OAAOC,gBAAgB,gCAAgC;AACvD,OAAOC,iBAAiB,0BAA0B;AAClD,OAAOC,mBAAmB,4BAA4B;AACtD,OAAOC,gBAAgB,gCAAgC;AACvD,SAASC,WAAW,QAAQ,yBAAyB;AACrD,SAASC,2BAA2B,QAAQ,4BAA4B;AAGxE,SAASC,eAAe,EAAEC,YAAY,QAAQ,kBAAkB;AAChE,SAASC,oBAAoB,EAAEC,WAAW,EAAEC,yBAAyB,QAAQ,gBAAgB;AAW7F;;;CAGC,GACD,OAAO,SAASC,UAAUC,KAAqB;IAC7C,MAAM,EAAEC,YAAY,EAAEC,OAAOC,QAAQ,EAAEC,QAAQ,EAAE,GAAGJ;IAEpD,MAAME,QAAQT,4BAA4BU;IAE1C,MAAM,EAAEE,YAAY,EAAEC,kBAAkB,EAAEC,MAAM,EAAEC,QAAQ,EAAE,GAAGZ,qBAAqBK;IACpF,MAAM,EAAEQ,0BAA0B,EAAE,GAAGX;IACvC,MAAM,EAAEY,UAAU,EAAE,GAAGb;IAEvB,MAAMc,qBAAO,KAAC3B;QAAW4B,SAAQ;kBAAMV;;IAEvC,qBACE,KAACrB;QACCgC,SAAST,UAAUU;QACnBC,IAAI;YACFC,SAAS;YACTC,gBAAgB;YAChBC,YAAY;YACZC,QAAQf,WAAW,YAAY;YAC/BgB,iBAAiB,CAAC,EAAEC,OAAO,EAAE,GAAKA,QAAQC,UAAU,CAACC,KAAK;QAC5D;QACAC,eAAY;kBAEXpB,yBACC;;8BACE,KAACtB;oBAAWiC,IAAI;wBAAEU,aAAa;oBAAE;oBAAGC,cAAY,GAAGtB,SAASuB,MAAM,GAAG,aAAa,SAAS,OAAO,EAAEzB,OAAO;8BACxGE,SAASuB,MAAM,iBAAG,KAAC1C,kCAAkB,KAACC;;gBAExCyB;gBACAD,4BACC,MAAC3B;oBAAM6C,WAAU;oBAAMC,YAAW;;sCAChC,KAACrC;4BAAYsC,aAAanC,aAAaoC,eAAe;sCACpD,cAAA,KAACjD;gCACC4C,cAAYhC,gBAAgBqC,eAAe,CAAC7B;gCAC5CW,SAAS,CAACmB;oCACR,gCAAgC;oCAChCA,EAAEC,eAAe;oCACjB5B;gCACF;0CAEA,cAAA,KAAClB;;;sCAGL,KAACK;4BAAYsC,aAAanC,aAAauC,SAAS;sCAC9C,cAAA,KAACpD;gCACC4C,cAAYhC,gBAAgBwC,SAAS,CAAChC;gCACtCW,SAAS,CAACmB;oCACR,gCAAgC;oCAChCA,EAAEC,eAAe;oCACjB3B;gCACF;0CAEA,cAAA,KAAClB;;;sCAGL,KAACI;4BAAYsC,aAAanC,aAAawC,WAAW;sCAChD,cAAA,KAACrD;gCACC4C,cAAYhC,gBAAgByC,WAAW,CAACjC;gCACxCW,SAAS,CAACmB;oCACR,gCAAgC;oCAChCA,EAAEC,eAAe;oCACjBxB,2BAA2BR;gCAC7B;0CAEA,cAAA,KAACV;;;sCAGL,KAACC;4BAAYsC,aAAanC,aAAayC,aAAa;sCAClD,cAAA,KAACtD;gCACC4C,cAAYhC,gBAAgB0C,aAAa,CAAClC;gCAC1CmC,UAAU7B,aAAa8B;gCACvBzB,SAAS,CAACmB;oCACR,gCAAgC;oCAChCA,EAAEC,eAAe;oCACjBzB;gCACF;0CAEA,cAAA,KAAClB;;;sCAGL,KAACE;4BAAYsC,aAAanC,aAAa4C,WAAW;sCAChD,cAAA,KAACzD;gCACC4C,cAAYhC,gBAAgB6C,WAAW,CAACrC;gCACxCmC,UAAU9B,WAAW+B;gCACrBzB,SAAS,CAACmB;oCACR,gCAAgC;oCAChCA,EAAEC,eAAe;oCACjB1B;gCACF;0CAEA,cAAA,KAAClB;;;;;;aAOX,+DAA+D;QAC/DsB;;AAIR"}

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

@@ -1,8 +1,8 @@
-import { PanelGroupDefinition } from '@perses-dev/core';
 import { PanelGroupId } from '@perses-dev/spec';
 import { PanelOptions } from '@perses-dev/dashboards';
 import { ReactElement } from 'react';
 import { Layout, Layouts } from 'react-grid-layout';
+import { PanelGroupDefinition } from '../../model';
 export interface RowProps {
     panelGroupId: PanelGroupId;
     groupDefinition: PanelGroupDefinition;

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

@@ -1 +1 @@
-{"version":3,"file":"Row.d.ts","sourceRoot":"","sources":["../../../src/components/GridLayout/Row.tsx"],"names":[],"mappings":"AAcA,OAAO,EAAE,oBAAoB,EAAwB,MAAM,kBAAkB,CAAC;AAC9E,OAAO,EAAE,YAAY,EAAE,MAAM,kBAAkB,CAAC;AAChD,OAAO,EAAE,YAAY,EAAqB,MAAM,wBAAwB,CAAC;AACzE,OAAO,EAAE,YAAY,EAAgC,MAAM,OAAO,CAAC;AACnE,OAAO,EAAE,MAAM,EAAE,OAAO,EAA6B,MAAM,mBAAmB,CAAC;AAU/E,MAAM,WAAW,QAAQ;IACvB,YAAY,EAAE,YAAY,CAAC;IAC3B,eAAe,EAAE,oBAAoB,CAAC;IACtC,YAAY,EAAE,MAAM,CAAC;IACrB,eAAe,CAAC,EAAE,MAAM,CAAC;IACzB,YAAY,CAAC,EAAE,YAAY,CAAC;IAC5B,UAAU,CAAC,EAAE,OAAO,CAAC;IACrB,cAAc,CAAC,EAAE,CAAC,aAAa,EAAE,MAAM,EAAE,EAAE,UAAU,EAAE,OAAO,KAAK,IAAI,CAAC;IACxE,aAAa,CAAC,EAAE,CACd,cAAc,EAAE,MAAM,EACtB,MAAM,EAAE,CAAC,MAAM,EAAE,MAAM,CAAC,EACxB,IAAI,EAAE,MAAM,EACZ,gBAAgB,EAAE,CAAC,MAAM,EAAE,MAAM,CAAC,KAC/B,IAAI,CAAC;IACV,cAAc,CAAC,EAAE,CAAC,MAAM,EAAE,MAAM,CAAC,CAAC;CACnC;AAED,wBAAgB,GAAG,CAAC,EAClB,YAAY,EACZ,eAAe,EACf,YAAY,EACZ,eAAe,EACf,YAAY,EACZ,UAAkB,EAClB,cAAc,EACd,aAAa,EACb,cAAc,GACf,EAAE,QAAQ,GAAG,YAAY,CAoGzB"}
+{"version":3,"file":"Row.d.ts","sourceRoot":"","sources":["../../../src/components/GridLayout/Row.tsx"],"names":[],"mappings":"AAcA,OAAO,EAAE,YAAY,EAAE,MAAM,kBAAkB,CAAC;AAChD,OAAO,EAAE,YAAY,EAAqB,MAAM,wBAAwB,CAAC;AACzE,OAAO,EAAE,YAAY,EAAgC,MAAM,OAAO,CAAC;AACnE,OAAO,EAAE,MAAM,EAAE,OAAO,EAA6B,MAAM,mBAAmB,CAAC;AAG/E,OAAO,EAAE,oBAAoB,EAAwB,MAAM,aAAa,CAAC;AAQzE,MAAM,WAAW,QAAQ;IACvB,YAAY,EAAE,YAAY,CAAC;IAC3B,eAAe,EAAE,oBAAoB,CAAC;IACtC,YAAY,EAAE,MAAM,CAAC;IACrB,eAAe,CAAC,EAAE,MAAM,CAAC;IACzB,YAAY,CAAC,EAAE,YAAY,CAAC;IAC5B,UAAU,CAAC,EAAE,OAAO,CAAC;IACrB,cAAc,CAAC,EAAE,CAAC,aAAa,EAAE,MAAM,EAAE,EAAE,UAAU,EAAE,OAAO,KAAK,IAAI,CAAC;IACxE,aAAa,CAAC,EAAE,CACd,cAAc,EAAE,MAAM,EACtB,MAAM,EAAE,CAAC,MAAM,EAAE,MAAM,CAAC,EACxB,IAAI,EAAE,MAAM,EACZ,gBAAgB,EAAE,CAAC,MAAM,EAAE,MAAM,CAAC,KAC/B,IAAI,CAAC;IACV,cAAc,CAAC,EAAE,CAAC,MAAM,EAAE,MAAM,CAAC,CAAC;CACnC;AAED,wBAAgB,GAAG,CAAC,EAClB,YAAY,EACZ,eAAe,EACf,YAAY,EACZ,eAAe,EACf,YAAY,EACZ,UAAkB,EAClB,cAAc,EACd,aAAa,EACb,cAAc,GACf,EAAE,QAAQ,GAAG,YAAY,CAoGzB"}

package/dist/components/GridLayout/Row.js

@@ -1,3 +1,4 @@
+import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
 // Copyright The Perses Authors
 // Licensed under the Apache License, Version 2.0 (the "License");
 // you may not use this file except in compliance with the License.
@@ -10,7 +11,6 @@
 // WITHOUT WARRANTIES OR CONDITIONS OF ANY KIND, either express or implied.
 // See the License for the specific language governing permissions and
 // limitations under the License.
-import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
 import { Collapse, useTheme } from '@mui/material';
 import { useViewPanelGroup } from '@perses-dev/dashboards';
 import { useEffect, useMemo, useState } from 'react';

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

@@ -1 +1 @@
-{"version":3,"sources":["../../../src/components/GridLayout/Row.tsx"],"sourcesContent":["// Copyright 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 { Collapse, useTheme } from '@mui/material';\nimport { PanelGroupDefinition, PanelGroupItemLayout } from '@perses-dev/core'; // TODO should go somewhere else\nimport { PanelGroupId } from '@perses-dev/spec';\nimport { PanelOptions, useViewPanelGroup } from '@perses-dev/dashboards';\nimport { ReactElement, useEffect, useMemo, useState } from 'react';\nimport { Layout, Layouts, Responsive, WidthProvider } from 'react-grid-layout';\nimport { ErrorAlert, ErrorBoundary } from '@perses-dev/components';\nimport { GRID_LAYOUT_COLS, GRID_LAYOUT_SMALL_BREAKPOINT } from '../../constants';\nimport { GridContainer } from './GridContainer';\nimport { GridItemContent } from './GridItemContent';\nimport { GridTitle } from './GridTitle';\n\nconst DEFAULT_MARGIN = 10;\nconst ROW_HEIGHT = 30;\n\nexport interface RowProps {\n  panelGroupId: PanelGroupId;\n  groupDefinition: PanelGroupDefinition;\n  gridColWidth: number;\n  panelFullHeight?: number;\n  panelOptions?: PanelOptions;\n  isEditMode?: boolean;\n  onLayoutChange?: (currentLayout: Layout[], allLayouts: Layouts) => void;\n  onWidthChange?: (\n    containerWidth: number,\n    margin: [number, number],\n    cols: number,\n    containerPadding: [number, number]\n  ) => void;\n  repeatVariable?: [string, string];\n}\n\nexport function Row({\n  panelGroupId,\n  groupDefinition,\n  gridColWidth,\n  panelFullHeight,\n  panelOptions,\n  isEditMode = false,\n  onLayoutChange,\n  onWidthChange,\n  repeatVariable,\n}: RowProps): ReactElement {\n  const ResponsiveGridLayout = useMemo(() => WidthProvider(Responsive), []);\n  const theme = useTheme();\n  const viewPanelItemId = useViewPanelGroup();\n\n  const [isOpen, setIsOpen] = useState(!groupDefinition.isCollapsed);\n\n  const hasViewPanel =\n    viewPanelItemId?.panelGroupId === panelGroupId &&\n    // Check for repeatVariable panels\n    viewPanelItemId.repeatVariable?.[0] === repeatVariable?.[0] &&\n    viewPanelItemId.repeatVariable?.[1] === repeatVariable?.[1];\n  const itemLayoutViewed = viewPanelItemId?.panelGroupItemLayoutId;\n\n  // If there is a panel in view mode, we should hide the grid if the panel is not in the current group.\n  const isGridDisplayed = !viewPanelItemId || hasViewPanel;\n\n  // TODO: handle it without useEffect\n  useEffect(() => {\n    if (hasViewPanel) {\n      setIsOpen(true);\n    }\n  }, [hasViewPanel]);\n\n  // Item layout is override if there is a panel in view mode\n  const itemLayouts: PanelGroupItemLayout[] = useMemo(() => {\n    if (itemLayoutViewed) {\n      return groupDefinition.itemLayouts.map((itemLayout) => {\n        if (itemLayout.i === itemLayoutViewed) {\n          const rowTitleHeight = 40 + 8; // 40 is the height of the row title and 8 is the margin height\n          return {\n            h: Math.round(((panelFullHeight ?? window.innerHeight) - rowTitleHeight) / (ROW_HEIGHT + DEFAULT_MARGIN)), // Viewed panel should take the full height remaining\n            i: itemLayoutViewed,\n            w: 48,\n            x: 0,\n            y: 0,\n          } as PanelGroupItemLayout;\n        }\n        return itemLayout;\n      });\n    }\n    return groupDefinition.itemLayouts;\n  }, [groupDefinition.itemLayouts, itemLayoutViewed, panelFullHeight]);\n\n  return (\n    <GridContainer\n      sx={{\n        display: isGridDisplayed ? 'block' : 'none',\n        height: itemLayoutViewed ? `${panelFullHeight}px` : 'unset',\n        overflow: itemLayoutViewed ? 'hidden' : 'unset',\n      }}\n    >\n      {groupDefinition.title && (\n        <GridTitle\n          panelGroupId={panelGroupId}\n          title={groupDefinition.title}\n          collapse={\n            groupDefinition.isCollapsed === undefined\n              ? undefined\n              : { isOpen: 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={{ [GRID_LAYOUT_SMALL_BREAKPOINT]: theme.breakpoints.values.sm, xxs: 0 }}\n          cols={GRID_LAYOUT_COLS}\n          rowHeight={ROW_HEIGHT}\n          draggableHandle=\".drag-handle\"\n          resizeHandles={['se']}\n          isDraggable={isEditMode && !hasViewPanel}\n          isResizable={isEditMode && !hasViewPanel}\n          margin={[DEFAULT_MARGIN, DEFAULT_MARGIN]}\n          containerPadding={[0, 10]}\n          layouts={{ sm: itemLayouts }}\n          onLayoutChange={onLayoutChange}\n          onWidthChange={onWidthChange}\n          allowOverlap={hasViewPanel} // Enabling overlap when viewing a specific panel because panel in front of the viewed panel will add empty spaces (empty row height)\n        >\n          {itemLayouts.map(({ i, w }) => (\n            <div\n              key={i}\n              style={{\n                display: itemLayoutViewed ? (itemLayoutViewed === i ? 'unset' : 'none') : 'unset',\n              }}\n            >\n              <ErrorBoundary FallbackComponent={ErrorAlert}>\n                <GridItemContent\n                  panelOptions={panelOptions}\n                  panelGroupItemId={{ panelGroupId, panelGroupItemLayoutId: i, repeatVariable }}\n                  width={calculateGridItemWidth(w, gridColWidth)}\n                />\n              </ErrorBoundary>\n            </div>\n          ))}\n        </ResponsiveGridLayout>\n      </Collapse>\n    </GridContainer>\n  );\n}\n\nconst calculateGridItemWidth = (w: number, colWidth: number): number => {\n  // 0 * Infinity === NaN, which causes problems with resize contraints\n  if (!Number.isFinite(w)) return w;\n  return Math.round(colWidth * w + Math.max(0, w - 1) * DEFAULT_MARGIN);\n};\n"],"names":["Collapse","useTheme","useViewPanelGroup","useEffect","useMemo","useState","Responsive","WidthProvider","ErrorAlert","ErrorBoundary","GRID_LAYOUT_COLS","GRID_LAYOUT_SMALL_BREAKPOINT","GridContainer","GridItemContent","GridTitle","DEFAULT_MARGIN","ROW_HEIGHT","Row","panelGroupId","groupDefinition","gridColWidth","panelFullHeight","panelOptions","isEditMode","onLayoutChange","onWidthChange","repeatVariable","ResponsiveGridLayout","theme","viewPanelItemId","isOpen","setIsOpen","isCollapsed","hasViewPanel","itemLayoutViewed","panelGroupItemLayoutId","isGridDisplayed","itemLayouts","map","itemLayout","i","rowTitleHeight","h","Math","round","window","innerHeight","w","x","y","sx","display","height","overflow","title","collapse","undefined","onToggleOpen","current","in","unmountOnExit","appear","data-testid","className","breakpoints","values","sm","xxs","cols","rowHeight","draggableHandle","resizeHandles","isDraggable","isResizable","margin","containerPadding","layouts","allowOverlap","div","style","FallbackComponent","panelGroupItemId","width","calculateGridItemWidth","colWidth","Number","isFinite","max"],"mappings":"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"}
+{"version":3,"sources":["../../../src/components/GridLayout/Row.tsx"],"sourcesContent":["// Copyright 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 { Collapse, useTheme } from '@mui/material';\nimport { PanelGroupId } from '@perses-dev/spec';\nimport { PanelOptions, useViewPanelGroup } from '@perses-dev/dashboards';\nimport { ReactElement, useEffect, useMemo, useState } from 'react';\nimport { Layout, Layouts, Responsive, WidthProvider } from 'react-grid-layout';\nimport { ErrorAlert, ErrorBoundary } from '@perses-dev/components';\nimport { GRID_LAYOUT_COLS, GRID_LAYOUT_SMALL_BREAKPOINT } from '../../constants';\nimport { PanelGroupDefinition, PanelGroupItemLayout } from '../../model';\nimport { GridContainer } from './GridContainer';\nimport { GridItemContent } from './GridItemContent';\nimport { GridTitle } from './GridTitle';\n\nconst DEFAULT_MARGIN = 10;\nconst ROW_HEIGHT = 30;\n\nexport interface RowProps {\n  panelGroupId: PanelGroupId;\n  groupDefinition: PanelGroupDefinition;\n  gridColWidth: number;\n  panelFullHeight?: number;\n  panelOptions?: PanelOptions;\n  isEditMode?: boolean;\n  onLayoutChange?: (currentLayout: Layout[], allLayouts: Layouts) => void;\n  onWidthChange?: (\n    containerWidth: number,\n    margin: [number, number],\n    cols: number,\n    containerPadding: [number, number]\n  ) => void;\n  repeatVariable?: [string, string];\n}\n\nexport function Row({\n  panelGroupId,\n  groupDefinition,\n  gridColWidth,\n  panelFullHeight,\n  panelOptions,\n  isEditMode = false,\n  onLayoutChange,\n  onWidthChange,\n  repeatVariable,\n}: RowProps): ReactElement {\n  const ResponsiveGridLayout = useMemo(() => WidthProvider(Responsive), []);\n  const theme = useTheme();\n  const viewPanelItemId = useViewPanelGroup();\n\n  const [isOpen, setIsOpen] = useState(!groupDefinition.isCollapsed);\n\n  const hasViewPanel =\n    viewPanelItemId?.panelGroupId === panelGroupId &&\n    // Check for repeatVariable panels\n    viewPanelItemId.repeatVariable?.[0] === repeatVariable?.[0] &&\n    viewPanelItemId.repeatVariable?.[1] === repeatVariable?.[1];\n  const itemLayoutViewed = viewPanelItemId?.panelGroupItemLayoutId;\n\n  // If there is a panel in view mode, we should hide the grid if the panel is not in the current group.\n  const isGridDisplayed = !viewPanelItemId || hasViewPanel;\n\n  // TODO: handle it without useEffect\n  useEffect(() => {\n    if (hasViewPanel) {\n      setIsOpen(true);\n    }\n  }, [hasViewPanel]);\n\n  // Item layout is override if there is a panel in view mode\n  const itemLayouts: PanelGroupItemLayout[] = useMemo(() => {\n    if (itemLayoutViewed) {\n      return groupDefinition.itemLayouts.map((itemLayout) => {\n        if (itemLayout.i === itemLayoutViewed) {\n          const rowTitleHeight = 40 + 8; // 40 is the height of the row title and 8 is the margin height\n          return {\n            h: Math.round(((panelFullHeight ?? window.innerHeight) - rowTitleHeight) / (ROW_HEIGHT + DEFAULT_MARGIN)), // Viewed panel should take the full height remaining\n            i: itemLayoutViewed,\n            w: 48,\n            x: 0,\n            y: 0,\n          } as PanelGroupItemLayout;\n        }\n        return itemLayout;\n      });\n    }\n    return groupDefinition.itemLayouts;\n  }, [groupDefinition.itemLayouts, itemLayoutViewed, panelFullHeight]);\n\n  return (\n    <GridContainer\n      sx={{\n        display: isGridDisplayed ? 'block' : 'none',\n        height: itemLayoutViewed ? `${panelFullHeight}px` : 'unset',\n        overflow: itemLayoutViewed ? 'hidden' : 'unset',\n      }}\n    >\n      {groupDefinition.title && (\n        <GridTitle\n          panelGroupId={panelGroupId}\n          title={groupDefinition.title}\n          collapse={\n            groupDefinition.isCollapsed === undefined\n              ? undefined\n              : { isOpen: 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={{ [GRID_LAYOUT_SMALL_BREAKPOINT]: theme.breakpoints.values.sm, xxs: 0 }}\n          cols={GRID_LAYOUT_COLS}\n          rowHeight={ROW_HEIGHT}\n          draggableHandle=\".drag-handle\"\n          resizeHandles={['se']}\n          isDraggable={isEditMode && !hasViewPanel}\n          isResizable={isEditMode && !hasViewPanel}\n          margin={[DEFAULT_MARGIN, DEFAULT_MARGIN]}\n          containerPadding={[0, 10]}\n          layouts={{ sm: itemLayouts }}\n          onLayoutChange={onLayoutChange}\n          onWidthChange={onWidthChange}\n          allowOverlap={hasViewPanel} // Enabling overlap when viewing a specific panel because panel in front of the viewed panel will add empty spaces (empty row height)\n        >\n          {itemLayouts.map(({ i, w }) => (\n            <div\n              key={i}\n              style={{\n                display: itemLayoutViewed ? (itemLayoutViewed === i ? 'unset' : 'none') : 'unset',\n              }}\n            >\n              <ErrorBoundary FallbackComponent={ErrorAlert}>\n                <GridItemContent\n                  panelOptions={panelOptions}\n                  panelGroupItemId={{ panelGroupId, panelGroupItemLayoutId: i, repeatVariable }}\n                  width={calculateGridItemWidth(w, gridColWidth)}\n                />\n              </ErrorBoundary>\n            </div>\n          ))}\n        </ResponsiveGridLayout>\n      </Collapse>\n    </GridContainer>\n  );\n}\n\nconst calculateGridItemWidth = (w: number, colWidth: number): number => {\n  // 0 * Infinity === NaN, which causes problems with resize contraints\n  if (!Number.isFinite(w)) return w;\n  return Math.round(colWidth * w + Math.max(0, w - 1) * DEFAULT_MARGIN);\n};\n"],"names":["Collapse","useTheme","useViewPanelGroup","useEffect","useMemo","useState","Responsive","WidthProvider","ErrorAlert","ErrorBoundary","GRID_LAYOUT_COLS","GRID_LAYOUT_SMALL_BREAKPOINT","GridContainer","GridItemContent","GridTitle","DEFAULT_MARGIN","ROW_HEIGHT","Row","panelGroupId","groupDefinition","gridColWidth","panelFullHeight","panelOptions","isEditMode","onLayoutChange","onWidthChange","repeatVariable","ResponsiveGridLayout","theme","viewPanelItemId","isOpen","setIsOpen","isCollapsed","hasViewPanel","itemLayoutViewed","panelGroupItemLayoutId","isGridDisplayed","itemLayouts","map","itemLayout","i","rowTitleHeight","h","Math","round","window","innerHeight","w","x","y","sx","display","height","overflow","title","collapse","undefined","onToggleOpen","current","in","unmountOnExit","appear","data-testid","className","breakpoints","values","sm","xxs","cols","rowHeight","draggableHandle","resizeHandles","isDraggable","isResizable","margin","containerPadding","layouts","allowOverlap","div","style","FallbackComponent","panelGroupItemId","width","calculateGridItemWidth","colWidth","Number","isFinite","max"],"mappings":"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"}

package/dist/components/LeaveDialog/LeaveDialog.js

@@ -1,3 +1,4 @@
+import { jsx as _jsx } from "react/jsx-runtime";
 // Copyright The Perses Authors
 // Licensed under the Apache License, Version 2.0 (the "License");
 // you may not use this file except in compliance with the License.
@@ -10,7 +11,6 @@
 // WITHOUT WARRANTIES OR CONDITIONS OF ANY KIND, either express or implied.
 // See the License for the specific language governing permissions and
 // limitations under the License.
-import { jsx as _jsx } from "react/jsx-runtime";
 import { useEffect } from 'react';
 import { useBlocker } from 'react-router-dom';
 import { DiscardChangesConfirmationDialog } from '@perses-dev/components';

package/dist/components/LeaveDialog/LeaveDialog.js.map

@@ -1 +1 @@
-{"version":3,"sources":["../../../src/components/LeaveDialog/LeaveDialog.tsx"],"sourcesContent":["// Copyright The Perses Authors\n// Licensed under the Apache License, Version 2.0 (the \"License\");\n// you may not use this file except in compliance with the License.\n// You may obtain a copy of the License at\n//\n// http://www.apache.org/licenses/LICENSE-2.0\n//\n// Unless required by applicable law or agreed to in writing, software\n// distributed under the License is distributed on an \"AS IS\" BASIS,\n// WITHOUT WARRANTIES OR CONDITIONS OF ANY KIND, either express or implied.\n// See the License for the specific language governing permissions and\n// limitations under the License.\n\nimport { ReactElement, ReactNode, useEffect } from 'react';\nimport { useBlocker } from 'react-router-dom';\nimport { DiscardChangesConfirmationDialog } from '@perses-dev/components';\nimport type { BlockerFunction } from '@remix-run/router';\nimport { DashboardResource } from '../../model';\n\nconst handleRouteChange = (event: BeforeUnloadEvent): string => {\n  event.preventDefault();\n  event.returnValue = ''; // Required for Chrome\n  return ''; // Required for other browsers\n};\n\nexport interface LeaveDialogProps {\n  isBlocked: BlockerFunction | boolean;\n  message: string;\n}\n\n/*\n * Prompt component uses the useBlocker hook to block react-router navigation when there are unsaved changes.\n * It also listens to the beforeunload event to show a browser confirmation dialog when the user tries to close the tab, refresh the page or change url manually.\n */\nexport function Prompt({ isBlocked, message }: LeaveDialogProps): ReactElement {\n  const blocker = useBlocker(isBlocked);\n  const isBlockedState = blocker.state === 'blocked';\n  const isProceedingState = blocker.state === 'proceeding';\n\n  useEffect(() => {\n    if (isBlocked) {\n      window.addEventListener('beforeunload', handleRouteChange);\n    } else {\n      window.removeEventListener('beforeunload', handleRouteChange);\n    }\n\n    return (): void => {\n      window.removeEventListener('beforeunload', handleRouteChange);\n    };\n  }, [blocker, isBlocked, isBlockedState]);\n\n  const handleDiscardChanges = (): void => blocker.proceed?.();\n  const handleCancel = (): void => blocker.reset?.();\n\n  return (\n    <DiscardChangesConfirmationDialog\n      description={message}\n      isOpen={isBlockedState || isProceedingState}\n      onDiscardChanges={handleDiscardChanges}\n      onCancel={handleCancel}\n    />\n  );\n}\n\n/*\n * LeaveDialog prompts the user with a confirmation dialog when they attempt to leave the page with unsaved changes.\n */\nexport function LeaveDialog({\n  original,\n  current,\n}: {\n  original: DashboardResource | undefined;\n  current: DashboardResource;\n}): ReactNode {\n  const handleIsBlocked: BlockerFunction = (ctx) => {\n    if (JSON.stringify(original) !== JSON.stringify(current)) {\n      // Only block navigation if the pathname is changing (=> ignore search params changes)\n      if (ctx.currentLocation.pathname !== ctx.nextLocation.pathname) {\n        return true;\n      }\n    }\n    return false;\n  };\n\n  return <Prompt isBlocked={handleIsBlocked} message=\"You have unsaved changes, are you sure you want to leave?\" />;\n}\n"],"names":["useEffect","useBlocker","DiscardChangesConfirmationDialog","handleRouteChange","event","preventDefault","returnValue","Prompt","isBlocked","message","blocker","isBlockedState","state","isProceedingState","window","addEventListener","removeEventListener","handleDiscardChanges","proceed","handleCancel","reset","description","isOpen","onDiscardChanges","onCancel","LeaveDialog","original","current","handleIsBlocked","ctx","JSON","stringify","currentLocation","pathname","nextLocation"],"mappings":"AAAA,+BAA+B;AAC/B,kEAAkE;AAClE,mEAAmE;AACnE,0CAA0C;AAC1C,EAAE;AACF,6CAA6C;AAC7C,EAAE;AACF,sEAAsE;AACtE,oEAAoE;AACpE,2EAA2E;AAC3E,sEAAsE;AACtE,iCAAiC;;AAEjC,SAAkCA,SAAS,QAAQ,QAAQ;AAC3D,SAASC,UAAU,QAAQ,mBAAmB;AAC9C,SAASC,gCAAgC,QAAQ,yBAAyB;AAI1E,MAAMC,oBAAoB,CAACC;IACzBA,MAAMC,cAAc;IACpBD,MAAME,WAAW,GAAG,IAAI,sBAAsB;IAC9C,OAAO,IAAI,8BAA8B;AAC3C;AAOA;;;CAGC,GACD,OAAO,SAASC,OAAO,EAAEC,SAAS,EAAEC,OAAO,EAAoB;IAC7D,MAAMC,UAAUT,WAAWO;IAC3B,MAAMG,iBAAiBD,QAAQE,KAAK,KAAK;IACzC,MAAMC,oBAAoBH,QAAQE,KAAK,KAAK;IAE5CZ,UAAU;QACR,IAAIQ,WAAW;YACbM,OAAOC,gBAAgB,CAAC,gBAAgBZ;QAC1C,OAAO;YACLW,OAAOE,mBAAmB,CAAC,gBAAgBb;QAC7C;QAEA,OAAO;YACLW,OAAOE,mBAAmB,CAAC,gBAAgBb;QAC7C;IACF,GAAG;QAACO;QAASF;QAAWG;KAAe;IAEvC,MAAMM,uBAAuB,IAAYP,QAAQQ,OAAO;IACxD,MAAMC,eAAe,IAAYT,QAAQU,KAAK;IAE9C,qBACE,KAAClB;QACCmB,aAAaZ;QACba,QAAQX,kBAAkBE;QAC1BU,kBAAkBN;QAClBO,UAAUL;;AAGhB;AAEA;;CAEC,GACD,OAAO,SAASM,YAAY,EAC1BC,QAAQ,EACRC,OAAO,EAIR;IACC,MAAMC,kBAAmC,CAACC;QACxC,IAAIC,KAAKC,SAAS,CAACL,cAAcI,KAAKC,SAAS,CAACJ,UAAU;YACxD,sFAAsF;YACtF,IAAIE,IAAIG,eAAe,CAACC,QAAQ,KAAKJ,IAAIK,YAAY,CAACD,QAAQ,EAAE;gBAC9D,OAAO;YACT;QACF;QACA,OAAO;IACT;IAEA,qBAAO,KAAC1B;QAAOC,WAAWoB;QAAiBnB,SAAQ;;AACrD"}
+{"version":3,"sources":["../../../src/components/LeaveDialog/LeaveDialog.tsx"],"sourcesContent":["// Copyright The Perses Authors\n// Licensed under the Apache License, Version 2.0 (the \"License\");\n// you may not use this file except in compliance with the License.\n// You may obtain a copy of the License at\n//\n// http://www.apache.org/licenses/LICENSE-2.0\n//\n// Unless required by applicable law or agreed to in writing, software\n// distributed under the License is distributed on an \"AS IS\" BASIS,\n// WITHOUT WARRANTIES OR CONDITIONS OF ANY KIND, either express or implied.\n// See the License for the specific language governing permissions and\n// limitations under the License.\n\nimport { ReactElement, ReactNode, useEffect } from 'react';\nimport { useBlocker } from 'react-router-dom';\nimport { DiscardChangesConfirmationDialog } from '@perses-dev/components';\nimport type { BlockerFunction } from '@remix-run/router';\nimport { DashboardResource } from '../../model';\n\nconst handleRouteChange = (event: BeforeUnloadEvent): string => {\n  event.preventDefault();\n  event.returnValue = ''; // Required for Chrome\n  return ''; // Required for other browsers\n};\n\nexport interface LeaveDialogProps {\n  isBlocked: BlockerFunction | boolean;\n  message: string;\n}\n\n/*\n * Prompt component uses the useBlocker hook to block react-router navigation when there are unsaved changes.\n * It also listens to the beforeunload event to show a browser confirmation dialog when the user tries to close the tab, refresh the page or change url manually.\n */\nexport function Prompt({ isBlocked, message }: LeaveDialogProps): ReactElement {\n  const blocker = useBlocker(isBlocked);\n  const isBlockedState = blocker.state === 'blocked';\n  const isProceedingState = blocker.state === 'proceeding';\n\n  useEffect(() => {\n    if (isBlocked) {\n      window.addEventListener('beforeunload', handleRouteChange);\n    } else {\n      window.removeEventListener('beforeunload', handleRouteChange);\n    }\n\n    return (): void => {\n      window.removeEventListener('beforeunload', handleRouteChange);\n    };\n  }, [blocker, isBlocked, isBlockedState]);\n\n  const handleDiscardChanges = (): void => blocker.proceed?.();\n  const handleCancel = (): void => blocker.reset?.();\n\n  return (\n    <DiscardChangesConfirmationDialog\n      description={message}\n      isOpen={isBlockedState || isProceedingState}\n      onDiscardChanges={handleDiscardChanges}\n      onCancel={handleCancel}\n    />\n  );\n}\n\n/*\n * LeaveDialog prompts the user with a confirmation dialog when they attempt to leave the page with unsaved changes.\n */\nexport function LeaveDialog({\n  original,\n  current,\n}: {\n  original: DashboardResource | undefined;\n  current: DashboardResource;\n}): ReactNode {\n  const handleIsBlocked: BlockerFunction = (ctx) => {\n    if (JSON.stringify(original) !== JSON.stringify(current)) {\n      // Only block navigation if the pathname is changing (=> ignore search params changes)\n      if (ctx.currentLocation.pathname !== ctx.nextLocation.pathname) {\n        return true;\n      }\n    }\n    return false;\n  };\n\n  return <Prompt isBlocked={handleIsBlocked} message=\"You have unsaved changes, are you sure you want to leave?\" />;\n}\n"],"names":["useEffect","useBlocker","DiscardChangesConfirmationDialog","handleRouteChange","event","preventDefault","returnValue","Prompt","isBlocked","message","blocker","isBlockedState","state","isProceedingState","window","addEventListener","removeEventListener","handleDiscardChanges","proceed","handleCancel","reset","description","isOpen","onDiscardChanges","onCancel","LeaveDialog","original","current","handleIsBlocked","ctx","JSON","stringify","currentLocation","pathname","nextLocation"],"mappings":";AAAA,+BAA+B;AAC/B,kEAAkE;AAClE,mEAAmE;AACnE,0CAA0C;AAC1C,EAAE;AACF,6CAA6C;AAC7C,EAAE;AACF,sEAAsE;AACtE,oEAAoE;AACpE,2EAA2E;AAC3E,sEAAsE;AACtE,iCAAiC;AAEjC,SAAkCA,SAAS,QAAQ,QAAQ;AAC3D,SAASC,UAAU,QAAQ,mBAAmB;AAC9C,SAASC,gCAAgC,QAAQ,yBAAyB;AAI1E,MAAMC,oBAAoB,CAACC;IACzBA,MAAMC,cAAc;IACpBD,MAAME,WAAW,GAAG,IAAI,sBAAsB;IAC9C,OAAO,IAAI,8BAA8B;AAC3C;AAOA;;;CAGC,GACD,OAAO,SAASC,OAAO,EAAEC,SAAS,EAAEC,OAAO,EAAoB;IAC7D,MAAMC,UAAUT,WAAWO;IAC3B,MAAMG,iBAAiBD,QAAQE,KAAK,KAAK;IACzC,MAAMC,oBAAoBH,QAAQE,KAAK,KAAK;IAE5CZ,UAAU;QACR,IAAIQ,WAAW;YACbM,OAAOC,gBAAgB,CAAC,gBAAgBZ;QAC1C,OAAO;YACLW,OAAOE,mBAAmB,CAAC,gBAAgBb;QAC7C;QAEA,OAAO;YACLW,OAAOE,mBAAmB,CAAC,gBAAgBb;QAC7C;IACF,GAAG;QAACO;QAASF;QAAWG;KAAe;IAEvC,MAAMM,uBAAuB,IAAYP,QAAQQ,OAAO;IACxD,MAAMC,eAAe,IAAYT,QAAQU,KAAK;IAE9C,qBACE,KAAClB;QACCmB,aAAaZ;QACba,QAAQX,kBAAkBE;QAC1BU,kBAAkBN;QAClBO,UAAUL;;AAGhB;AAEA;;CAEC,GACD,OAAO,SAASM,YAAY,EAC1BC,QAAQ,EACRC,OAAO,EAIR;IACC,MAAMC,kBAAmC,CAACC;QACxC,IAAIC,KAAKC,SAAS,CAACL,cAAcI,KAAKC,SAAS,CAACJ,UAAU;YACxD,sFAAsF;YACtF,IAAIE,IAAIG,eAAe,CAACC,QAAQ,KAAKJ,IAAIK,YAAY,CAACD,QAAQ,EAAE;gBAC9D,OAAO;YACT;QACF;QACA,OAAO;IACT;IAEA,qBAAO,KAAC1B;QAAOC,WAAWoB;QAAiBnB,SAAQ;;AACrD"}

package/dist/components/LinksDisplay/LinksDisplay.js

@@ -1,3 +1,4 @@
+import { jsx as _jsx, jsxs as _jsxs, Fragment as _Fragment } from "react/jsx-runtime";
 // Copyright The Perses Authors
 // Licensed under the Apache License, Version 2.0 (the "License");
 // you may not use this file except in compliance with the License.
@@ -10,7 +11,6 @@
 // WITHOUT WARRANTIES OR CONDITIONS OF ANY KIND, either express or implied.
 // See the License for the specific language governing permissions and
 // limitations under the License.
-import { jsx as _jsx, jsxs as _jsxs, Fragment as _Fragment } from "react/jsx-runtime";
 import { IconButton, Link as LinkComponent, Menu, MenuItem, Chip, capitalize, Stack } from '@mui/material';
 import LaunchIcon from 'mdi-material-ui/Launch';
 import { useState } from 'react';