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

package/dist/components/Datasources/EditDatasourcesButton.js.map

@@ -1 +1 @@
-{"version":3,"sources":["../../../src/components/Datasources/EditDatasourcesButton.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, useState } from 'react';\nimport { Button } from '@mui/material';\nimport PencilIcon from 'mdi-material-ui/PencilOutline';\nimport { Drawer, InfoTooltip } from '@perses-dev/components';\nimport { DashboardResource, DatasourceSpec, EphemeralDashboardResource } from '@perses-dev/core';\nimport { useDatasourceStore } from '@perses-dev/plugin-system';\nimport { TOOLTIP_TEXT, editButtonStyle } from '../../constants';\nimport { useDashboard } from '../../context';\nimport { DatasourceEditor } from './DatasourceEditor';\n\nexport function EditDatasourcesButton(): ReactElement {\n  const [isDatasourceEditorOpen, setIsDatasourceEditorOpen] = useState(false);\n  const { getLocalDatasources, setLocalDatasources, getSavedDatasources, setSavedDatasources } = useDatasourceStore();\n  const localDatasources: Record<string, DatasourceSpec> = getLocalDatasources();\n  const savedDatasources: Record<string, DatasourceSpec> = getSavedDatasources();\n  const { dashboard, setDashboard } = useDashboard();\n\n  const openDatasourceEditor = (): void => {\n    setIsDatasourceEditorOpen(true);\n  };\n\n  const closeDatasourceEditor = (): void => {\n    setIsDatasourceEditorOpen(false);\n  };\n\n  const handleChangeDatasources = (datasources: Record<string, DatasourceSpec>): void => {\n    // Calculates the new list of datasources that are allowed to be used.\n    const newSavedDatasources: Record<string, DatasourceSpec> = Object.keys(datasources)\n      .filter((key) => {\n        // Datasources are allowed to be used if a) they are direct, or b) they are proxied, and their\n        // proxy is the same as what we have saved.\n        const isDirect = 'directUrl' in (datasources[key]?.plugin?.spec ?? {});\n        const isSavedProxy =\n          !isDirect &&\n          !('directUrl' in (savedDatasources[key]?.plugin?.spec ?? {})) &&\n          datasources[key]?.plugin?.spec?.proxy === savedDatasources[key]?.plugin?.spec?.proxy;\n\n        return isDirect || isSavedProxy;\n      })\n      .reduce(\n        (obj, key) => {\n          obj[key] = datasources[key] as DatasourceSpec;\n\n          return obj;\n        },\n        {} as Record<string, DatasourceSpec>\n      );\n\n    setDashboard(\n      dashboard.kind === 'Dashboard'\n        ? ({\n            ...dashboard,\n            spec: {\n              ...dashboard.spec,\n              datasources: datasources,\n            },\n          } as DashboardResource)\n        : ({\n            ...dashboard,\n            spec: {\n              ...dashboard.spec,\n              datasources: datasources,\n            },\n          } as EphemeralDashboardResource)\n    );\n    setSavedDatasources(newSavedDatasources);\n    setLocalDatasources(datasources);\n    setIsDatasourceEditorOpen(false);\n  };\n\n  return (\n    <>\n      <InfoTooltip description={TOOLTIP_TEXT.editDatasources}>\n        <Button\n          startIcon={<PencilIcon />}\n          onClick={openDatasourceEditor}\n          aria-label={TOOLTIP_TEXT.editDatasources}\n          variant=\"text\"\n          color=\"primary\"\n          sx={editButtonStyle}\n        >\n          Datasources\n        </Button>\n      </InfoTooltip>\n      <Drawer\n        isOpen={isDatasourceEditorOpen}\n        onClose={closeDatasourceEditor}\n        PaperProps={{ sx: { width: '50%' } }}\n        data-testid=\"datasource-editor\"\n      >\n        <DatasourceEditor\n          datasources={localDatasources}\n          onCancel={closeDatasourceEditor}\n          onChange={handleChangeDatasources}\n        />\n      </Drawer>\n    </>\n  );\n}\n"],"names":["useState","Button","PencilIcon","Drawer","InfoTooltip","useDatasourceStore","TOOLTIP_TEXT","editButtonStyle","useDashboard","DatasourceEditor","EditDatasourcesButton","isDatasourceEditorOpen","setIsDatasourceEditorOpen","getLocalDatasources","setLocalDatasources","getSavedDatasources","setSavedDatasources","localDatasources","savedDatasources","dashboard","setDashboard","openDatasourceEditor","closeDatasourceEditor","handleChangeDatasources","datasources","newSavedDatasources","Object","keys","filter","key","isDirect","plugin","spec","isSavedProxy","proxy","reduce","obj","kind","description","editDatasources","startIcon","onClick","aria-label","variant","color","sx","isOpen","onClose","PaperProps","width","data-testid","onCancel","onChange"],"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,SAAuBA,QAAQ,QAAQ,QAAQ;AAC/C,SAASC,MAAM,QAAQ,gBAAgB;AACvC,OAAOC,gBAAgB,gCAAgC;AACvD,SAASC,MAAM,EAAEC,WAAW,QAAQ,yBAAyB;AAE7D,SAASC,kBAAkB,QAAQ,4BAA4B;AAC/D,SAASC,YAAY,EAAEC,eAAe,QAAQ,kBAAkB;AAChE,SAASC,YAAY,QAAQ,gBAAgB;AAC7C,SAASC,gBAAgB,QAAQ,qBAAqB;AAEtD,OAAO,SAASC;IACd,MAAM,CAACC,wBAAwBC,0BAA0B,GAAGZ,SAAS;IACrE,MAAM,EAAEa,mBAAmB,EAAEC,mBAAmB,EAAEC,mBAAmB,EAAEC,mBAAmB,EAAE,GAAGX;IAC/F,MAAMY,mBAAmDJ;IACzD,MAAMK,mBAAmDH;IACzD,MAAM,EAAEI,SAAS,EAAEC,YAAY,EAAE,GAAGZ;IAEpC,MAAMa,uBAAuB;QAC3BT,0BAA0B;IAC5B;IAEA,MAAMU,wBAAwB;QAC5BV,0BAA0B;IAC5B;IAEA,MAAMW,0BAA0B,CAACC;QAC/B,sEAAsE;QACtE,MAAMC,sBAAsDC,OAAOC,IAAI,CAACH,aACrEI,MAAM,CAAC,CAACC;YACP,8FAA8F;YAC9F,2CAA2C;YAC3C,MAAMC,WAAW,eAAgBN,CAAAA,WAAW,CAACK,IAAI,EAAEE,QAAQC,QAAQ,CAAC,CAAA;YACpE,MAAMC,eACJ,CAACH,YACD,CAAE,CAAA,eAAgBZ,CAAAA,gBAAgB,CAACW,IAAI,EAAEE,QAAQC,QAAQ,CAAC,CAAA,CAAC,KAC3DR,WAAW,CAACK,IAAI,EAAEE,QAAQC,MAAME,UAAUhB,gBAAgB,CAACW,IAAI,EAAEE,QAAQC,MAAME;YAEjF,OAAOJ,YAAYG;QACrB,GACCE,MAAM,CACL,CAACC,KAAKP;YACJO,GAAG,CAACP,IAAI,GAAGL,WAAW,CAACK,IAAI;YAE3B,OAAOO;QACT,GACA,CAAC;QAGLhB,aACED,UAAUkB,IAAI,KAAK,cACd;YACC,GAAGlB,SAAS;YACZa,MAAM;gBACJ,GAAGb,UAAUa,IAAI;gBACjBR,aAAaA;YACf;QACF,IACC;YACC,GAAGL,SAAS;YACZa,MAAM;gBACJ,GAAGb,UAAUa,IAAI;gBACjBR,aAAaA;YACf;QACF;QAENR,oBAAoBS;QACpBX,oBAAoBU;QACpBZ,0BAA0B;IAC5B;IAEA,qBACE;;0BACE,KAACR;gBAAYkC,aAAahC,aAAaiC,eAAe;0BACpD,cAAA,KAACtC;oBACCuC,yBAAW,KAACtC;oBACZuC,SAASpB;oBACTqB,cAAYpC,aAAaiC,eAAe;oBACxCI,SAAQ;oBACRC,OAAM;oBACNC,IAAItC;8BACL;;;0BAIH,KAACJ;gBACC2C,QAAQnC;gBACRoC,SAASzB;gBACT0B,YAAY;oBAAEH,IAAI;wBAAEI,OAAO;oBAAM;gBAAE;gBACnCC,eAAY;0BAEZ,cAAA,KAACzC;oBACCe,aAAaP;oBACbkC,UAAU7B;oBACV8B,UAAU7B;;;;;AAKpB"}
+{"version":3,"sources":["../../../src/components/Datasources/EditDatasourcesButton.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, useState } from 'react';\nimport { Button } from '@mui/material';\nimport PencilIcon from 'mdi-material-ui/PencilOutline';\nimport { Drawer, InfoTooltip } from '@perses-dev/components';\nimport { DatasourceSpec } from '@perses-dev/spec';\nimport { useDatasourceStore } from '@perses-dev/plugin-system';\nimport { TOOLTIP_TEXT, editButtonStyle } from '../../constants';\nimport { useDashboard } from '../../context';\nimport { DatasourceEditor } from './DatasourceEditor';\n\nexport function EditDatasourcesButton(): ReactElement {\n  const [isDatasourceEditorOpen, setIsDatasourceEditorOpen] = useState(false);\n  const { getLocalDatasources, setLocalDatasources, getSavedDatasources, setSavedDatasources } = useDatasourceStore();\n  const localDatasources: Record<string, DatasourceSpec> = getLocalDatasources();\n  const savedDatasources: Record<string, DatasourceSpec> = getSavedDatasources();\n  const { dashboard, setDashboard } = useDashboard();\n\n  const openDatasourceEditor = (): void => {\n    setIsDatasourceEditorOpen(true);\n  };\n\n  const closeDatasourceEditor = (): void => {\n    setIsDatasourceEditorOpen(false);\n  };\n\n  const handleChangeDatasources = (datasources: Record<string, DatasourceSpec>): void => {\n    // Calculates the new list of datasources that are allowed to be used.\n    const newSavedDatasources: Record<string, DatasourceSpec> = Object.keys(datasources)\n      .filter((key) => {\n        // Datasources are allowed to be used if a) they are direct, or b) they are proxied, and their\n        // proxy is the same as what we have saved.\n        const isDirect = 'directUrl' in (datasources[key]?.plugin?.spec ?? {});\n        const isSavedProxy =\n          !isDirect &&\n          !('directUrl' in (savedDatasources[key]?.plugin?.spec ?? {})) &&\n          datasources[key]?.plugin?.spec?.proxy === savedDatasources[key]?.plugin?.spec?.proxy;\n\n        return isDirect || isSavedProxy;\n      })\n      .reduce(\n        (obj, key) => {\n          obj[key] = datasources[key] as DatasourceSpec;\n\n          return obj;\n        },\n        {} as Record<string, DatasourceSpec>\n      );\n\n    setDashboard({\n      ...dashboard,\n      spec: {\n        ...dashboard.spec,\n        datasources: datasources,\n      },\n    });\n    setSavedDatasources(newSavedDatasources);\n    setLocalDatasources(datasources);\n    setIsDatasourceEditorOpen(false);\n  };\n\n  return (\n    <>\n      <InfoTooltip description={TOOLTIP_TEXT.editDatasources}>\n        <Button\n          startIcon={<PencilIcon />}\n          onClick={openDatasourceEditor}\n          aria-label={TOOLTIP_TEXT.editDatasources}\n          variant=\"text\"\n          color=\"primary\"\n          sx={editButtonStyle}\n        >\n          Datasources\n        </Button>\n      </InfoTooltip>\n      <Drawer\n        isOpen={isDatasourceEditorOpen}\n        onClose={closeDatasourceEditor}\n        PaperProps={{ sx: { width: '50%' } }}\n        data-testid=\"datasource-editor\"\n      >\n        <DatasourceEditor\n          datasources={localDatasources}\n          onCancel={closeDatasourceEditor}\n          onChange={handleChangeDatasources}\n        />\n      </Drawer>\n    </>\n  );\n}\n"],"names":["useState","Button","PencilIcon","Drawer","InfoTooltip","useDatasourceStore","TOOLTIP_TEXT","editButtonStyle","useDashboard","DatasourceEditor","EditDatasourcesButton","isDatasourceEditorOpen","setIsDatasourceEditorOpen","getLocalDatasources","setLocalDatasources","getSavedDatasources","setSavedDatasources","localDatasources","savedDatasources","dashboard","setDashboard","openDatasourceEditor","closeDatasourceEditor","handleChangeDatasources","datasources","newSavedDatasources","Object","keys","filter","key","isDirect","plugin","spec","isSavedProxy","proxy","reduce","obj","description","editDatasources","startIcon","onClick","aria-label","variant","color","sx","isOpen","onClose","PaperProps","width","data-testid","onCancel","onChange"],"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,SAAuBA,QAAQ,QAAQ,QAAQ;AAC/C,SAASC,MAAM,QAAQ,gBAAgB;AACvC,OAAOC,gBAAgB,gCAAgC;AACvD,SAASC,MAAM,EAAEC,WAAW,QAAQ,yBAAyB;AAE7D,SAASC,kBAAkB,QAAQ,4BAA4B;AAC/D,SAASC,YAAY,EAAEC,eAAe,QAAQ,kBAAkB;AAChE,SAASC,YAAY,QAAQ,gBAAgB;AAC7C,SAASC,gBAAgB,QAAQ,qBAAqB;AAEtD,OAAO,SAASC;IACd,MAAM,CAACC,wBAAwBC,0BAA0B,GAAGZ,SAAS;IACrE,MAAM,EAAEa,mBAAmB,EAAEC,mBAAmB,EAAEC,mBAAmB,EAAEC,mBAAmB,EAAE,GAAGX;IAC/F,MAAMY,mBAAmDJ;IACzD,MAAMK,mBAAmDH;IACzD,MAAM,EAAEI,SAAS,EAAEC,YAAY,EAAE,GAAGZ;IAEpC,MAAMa,uBAAuB;QAC3BT,0BAA0B;IAC5B;IAEA,MAAMU,wBAAwB;QAC5BV,0BAA0B;IAC5B;IAEA,MAAMW,0BAA0B,CAACC;QAC/B,sEAAsE;QACtE,MAAMC,sBAAsDC,OAAOC,IAAI,CAACH,aACrEI,MAAM,CAAC,CAACC;YACP,8FAA8F;YAC9F,2CAA2C;YAC3C,MAAMC,WAAW,eAAgBN,CAAAA,WAAW,CAACK,IAAI,EAAEE,QAAQC,QAAQ,CAAC,CAAA;YACpE,MAAMC,eACJ,CAACH,YACD,CAAE,CAAA,eAAgBZ,CAAAA,gBAAgB,CAACW,IAAI,EAAEE,QAAQC,QAAQ,CAAC,CAAA,CAAC,KAC3DR,WAAW,CAACK,IAAI,EAAEE,QAAQC,MAAME,UAAUhB,gBAAgB,CAACW,IAAI,EAAEE,QAAQC,MAAME;YAEjF,OAAOJ,YAAYG;QACrB,GACCE,MAAM,CACL,CAACC,KAAKP;YACJO,GAAG,CAACP,IAAI,GAAGL,WAAW,CAACK,IAAI;YAE3B,OAAOO;QACT,GACA,CAAC;QAGLhB,aAAa;YACX,GAAGD,SAAS;YACZa,MAAM;gBACJ,GAAGb,UAAUa,IAAI;gBACjBR,aAAaA;YACf;QACF;QACAR,oBAAoBS;QACpBX,oBAAoBU;QACpBZ,0BAA0B;IAC5B;IAEA,qBACE;;0BACE,KAACR;gBAAYiC,aAAa/B,aAAagC,eAAe;0BACpD,cAAA,KAACrC;oBACCsC,yBAAW,KAACrC;oBACZsC,SAASnB;oBACToB,cAAYnC,aAAagC,eAAe;oBACxCI,SAAQ;oBACRC,OAAM;oBACNC,IAAIrC;8BACL;;;0BAIH,KAACJ;gBACC0C,QAAQlC;gBACRmC,SAASxB;gBACTyB,YAAY;oBAAEH,IAAI;wBAAEI,OAAO;oBAAM;gBAAE;gBACnCC,eAAY;0BAEZ,cAAA,KAACxC;oBACCe,aAAaP;oBACbiC,UAAU5B;oBACV6B,UAAU5B;;;;;AAKpB"}

package/dist/components/DownloadButton/serializeDashboard.d.ts

@@ -1,8 +1,8 @@
-import { DashboardResource, EphemeralDashboardResource } from '@perses-dev/core';
+import { DashboardResource } from '../../model/DashboardResource';
 type SerializedDashboard = {
     contentType: string;
     content: string;
 };
-export declare function serializeDashboard(dashboard: DashboardResource | EphemeralDashboardResource, format: 'json' | 'yaml', shape?: 'cr-v1alpha1' | 'cr-v1alpha2'): SerializedDashboard;
+export declare function serializeDashboard(dashboard: DashboardResource, format: 'json' | 'yaml', shape?: 'cr-v1alpha1' | 'cr-v1alpha2'): SerializedDashboard;
 export {};
 //# sourceMappingURL=serializeDashboard.d.ts.map

package/dist/components/DownloadButton/serializeDashboard.d.ts.map

@@ -1 +1 @@
-{"version":3,"file":"serializeDashboard.d.ts","sourceRoot":"","sources":["../../../src/components/DownloadButton/serializeDashboard.ts"],"names":[],"mappings":"AAaA,OAAO,EAAE,iBAAiB,EAAE,0BAA0B,EAAE,MAAM,kBAAkB,CAAC;AAGjF,KAAK,mBAAmB,GAAG;IACzB,WAAW,EAAE,MAAM,CAAC;IACpB,OAAO,EAAE,MAAM,CAAC;CACjB,CAAC;AAuDF,wBAAgB,kBAAkB,CAChC,SAAS,EAAE,iBAAiB,GAAG,0BAA0B,EACzD,MAAM,EAAE,MAAM,GAAG,MAAM,EACvB,KAAK,CAAC,EAAE,aAAa,GAAG,aAAa,GACpC,mBAAmB,CAOrB"}
+{"version":3,"file":"serializeDashboard.d.ts","sourceRoot":"","sources":["../../../src/components/DownloadButton/serializeDashboard.ts"],"names":[],"mappings":"AAcA,OAAO,EAAE,iBAAiB,EAAE,MAAM,+BAA+B,CAAC;AAKlE,KAAK,mBAAmB,GAAG;IACzB,WAAW,EAAE,MAAM,CAAC;IACpB,OAAO,EAAE,MAAM,CAAC;CACjB,CAAC;AAoDF,wBAAgB,kBAAkB,CAChC,SAAS,EAAE,iBAAiB,EAC5B,MAAM,EAAE,MAAM,GAAG,MAAM,EACvB,KAAK,CAAC,EAAE,aAAa,GAAG,aAAa,GACpC,mBAAmB,CAOrB"}

package/dist/components/DownloadButton/serializeDashboard.js.map

@@ -1 +1 @@
-{"version":3,"sources":["../../../src/components/DownloadButton/serializeDashboard.ts"],"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 { DashboardResource, EphemeralDashboardResource } from '@perses-dev/core';\nimport { stringify } from 'yaml';\n\ntype SerializedDashboard = {\n  contentType: string;\n  content: string;\n};\n\nfunction serializeYaml(\n  dashboard: DashboardResource | EphemeralDashboardResource,\n  shape?: 'cr-v1alpha1' | 'cr-v1alpha2'\n): SerializedDashboard {\n  let content: string;\n\n  if (shape === 'cr-v1alpha1') {\n    const name = dashboard.metadata.name.toLowerCase().replace(/[^a-z0-9-]/g, '-');\n    content = stringify(\n      {\n        apiVersion: 'perses.dev/v1alpha1',\n        kind: 'PersesDashboard',\n        metadata: {\n          labels: {\n            'app.kubernetes.io/name': 'perses-dashboard',\n            'app.kubernetes.io/instance': name,\n            'app.kubernetes.io/part-of': 'perses-operator',\n          },\n          name,\n          namespace: dashboard.metadata.project,\n        },\n        spec: dashboard.spec,\n      },\n      { schema: 'yaml-1.1' }\n    );\n  } else if (shape === 'cr-v1alpha2') {\n    const name = dashboard.metadata.name.toLowerCase().replace(/[^a-z0-9-]/g, '-');\n    content = stringify(\n      {\n        apiVersion: 'perses.dev/v1alpha2',\n        kind: 'PersesDashboard',\n        metadata: {\n          labels: {\n            'app.kubernetes.io/name': 'perses-dashboard',\n            'app.kubernetes.io/instance': name,\n            'app.kubernetes.io/part-of': 'perses-operator',\n          },\n          name,\n          namespace: dashboard.metadata.project,\n        },\n        spec: {\n          config: dashboard.spec,\n        },\n      },\n      { schema: 'yaml-1.1' }\n    );\n  } else {\n    content = stringify(dashboard, { schema: 'yaml-1.1' });\n  }\n\n  return { contentType: 'application/yaml', content };\n}\n\nexport function serializeDashboard(\n  dashboard: DashboardResource | EphemeralDashboardResource,\n  format: 'json' | 'yaml',\n  shape?: 'cr-v1alpha1' | 'cr-v1alpha2'\n): SerializedDashboard {\n  switch (format) {\n    case 'json':\n      return { contentType: 'application/json', content: JSON.stringify(dashboard, null, 2) };\n    case 'yaml':\n      return serializeYaml(dashboard, shape);\n  }\n}\n"],"names":["stringify","serializeYaml","dashboard","shape","content","name","metadata","toLowerCase","replace","apiVersion","kind","labels","namespace","project","spec","schema","config","contentType","serializeDashboard","format","JSON"],"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;AAGjC,SAASA,SAAS,QAAQ,OAAO;AAOjC,SAASC,cACPC,SAAyD,EACzDC,KAAqC;IAErC,IAAIC;IAEJ,IAAID,UAAU,eAAe;QAC3B,MAAME,OAAOH,UAAUI,QAAQ,CAACD,IAAI,CAACE,WAAW,GAAGC,OAAO,CAAC,eAAe;QAC1EJ,UAAUJ,UACR;YACES,YAAY;YACZC,MAAM;YACNJ,UAAU;gBACRK,QAAQ;oBACN,0BAA0B;oBAC1B,8BAA8BN;oBAC9B,6BAA6B;gBAC/B;gBACAA;gBACAO,WAAWV,UAAUI,QAAQ,CAACO,OAAO;YACvC;YACAC,MAAMZ,UAAUY,IAAI;QACtB,GACA;YAAEC,QAAQ;QAAW;IAEzB,OAAO,IAAIZ,UAAU,eAAe;QAClC,MAAME,OAAOH,UAAUI,QAAQ,CAACD,IAAI,CAACE,WAAW,GAAGC,OAAO,CAAC,eAAe;QAC1EJ,UAAUJ,UACR;YACES,YAAY;YACZC,MAAM;YACNJ,UAAU;gBACRK,QAAQ;oBACN,0BAA0B;oBAC1B,8BAA8BN;oBAC9B,6BAA6B;gBAC/B;gBACAA;gBACAO,WAAWV,UAAUI,QAAQ,CAACO,OAAO;YACvC;YACAC,MAAM;gBACJE,QAAQd,UAAUY,IAAI;YACxB;QACF,GACA;YAAEC,QAAQ;QAAW;IAEzB,OAAO;QACLX,UAAUJ,UAAUE,WAAW;YAAEa,QAAQ;QAAW;IACtD;IAEA,OAAO;QAAEE,aAAa;QAAoBb;IAAQ;AACpD;AAEA,OAAO,SAASc,mBACdhB,SAAyD,EACzDiB,MAAuB,EACvBhB,KAAqC;IAErC,OAAQgB;QACN,KAAK;YACH,OAAO;gBAAEF,aAAa;gBAAoBb,SAASgB,KAAKpB,SAAS,CAACE,WAAW,MAAM;YAAG;QACxF,KAAK;YACH,OAAOD,cAAcC,WAAWC;IACpC;AACF"}
+{"version":3,"sources":["../../../src/components/DownloadButton/serializeDashboard.ts"],"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 { stringify } from 'yaml';\nimport { DashboardResource } from '../../model/DashboardResource';\n\n//TODO: Although the previous comment suggests the metadata not should not be used, I keep them. Need to be discussed.\n// Check git history to find prev comment\n\ntype SerializedDashboard = {\n  contentType: string;\n  content: string;\n};\n\nfunction serializeYaml(dashboard: DashboardResource, shape?: 'cr-v1alpha1' | 'cr-v1alpha2'): SerializedDashboard {\n  let content: string;\n\n  if (shape === 'cr-v1alpha1') {\n    const name = dashboard.metadata.name.toLowerCase().replace(/[^a-z0-9-]/g, '-');\n    content = stringify(\n      {\n        apiVersion: 'perses.dev/v1alpha1',\n        kind: 'PersesDashboard',\n        metadata: {\n          labels: {\n            'app.kubernetes.io/name': 'perses-dashboard',\n            'app.kubernetes.io/instance': name,\n            'app.kubernetes.io/part-of': 'perses-operator',\n          },\n          name,\n          namespace: dashboard.metadata.project,\n        },\n        spec: dashboard.spec,\n      },\n      { schema: 'yaml-1.1' }\n    );\n  } else if (shape === 'cr-v1alpha2') {\n    const name = dashboard.metadata.name.toLowerCase().replace(/[^a-z0-9-]/g, '-');\n    content = stringify(\n      {\n        apiVersion: 'perses.dev/v1alpha2',\n        kind: 'PersesDashboard',\n        metadata: {\n          labels: {\n            'app.kubernetes.io/name': 'perses-dashboard',\n            'app.kubernetes.io/instance': name,\n            'app.kubernetes.io/part-of': 'perses-operator',\n          },\n          name,\n          namespace: dashboard.metadata.project,\n        },\n        spec: {\n          config: dashboard.spec,\n        },\n      },\n      { schema: 'yaml-1.1' }\n    );\n  } else {\n    content = stringify(dashboard, { schema: 'yaml-1.1' });\n  }\n\n  return { contentType: 'application/yaml', content };\n}\n\nexport function serializeDashboard(\n  dashboard: DashboardResource,\n  format: 'json' | 'yaml',\n  shape?: 'cr-v1alpha1' | 'cr-v1alpha2'\n): SerializedDashboard {\n  switch (format) {\n    case 'json':\n      return { contentType: 'application/json', content: JSON.stringify(dashboard, null, 2) };\n    case 'yaml':\n      return serializeYaml(dashboard, shape);\n  }\n}\n"],"names":["stringify","serializeYaml","dashboard","shape","content","name","metadata","toLowerCase","replace","apiVersion","kind","labels","namespace","project","spec","schema","config","contentType","serializeDashboard","format","JSON"],"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,SAAS,QAAQ,OAAO;AAWjC,SAASC,cAAcC,SAA4B,EAAEC,KAAqC;IACxF,IAAIC;IAEJ,IAAID,UAAU,eAAe;QAC3B,MAAME,OAAOH,UAAUI,QAAQ,CAACD,IAAI,CAACE,WAAW,GAAGC,OAAO,CAAC,eAAe;QAC1EJ,UAAUJ,UACR;YACES,YAAY;YACZC,MAAM;YACNJ,UAAU;gBACRK,QAAQ;oBACN,0BAA0B;oBAC1B,8BAA8BN;oBAC9B,6BAA6B;gBAC/B;gBACAA;gBACAO,WAAWV,UAAUI,QAAQ,CAACO,OAAO;YACvC;YACAC,MAAMZ,UAAUY,IAAI;QACtB,GACA;YAAEC,QAAQ;QAAW;IAEzB,OAAO,IAAIZ,UAAU,eAAe;QAClC,MAAME,OAAOH,UAAUI,QAAQ,CAACD,IAAI,CAACE,WAAW,GAAGC,OAAO,CAAC,eAAe;QAC1EJ,UAAUJ,UACR;YACES,YAAY;YACZC,MAAM;YACNJ,UAAU;gBACRK,QAAQ;oBACN,0BAA0B;oBAC1B,8BAA8BN;oBAC9B,6BAA6B;gBAC/B;gBACAA;gBACAO,WAAWV,UAAUI,QAAQ,CAACO,OAAO;YACvC;YACAC,MAAM;gBACJE,QAAQd,UAAUY,IAAI;YACxB;QACF,GACA;YAAEC,QAAQ;QAAW;IAEzB,OAAO;QACLX,UAAUJ,UAAUE,WAAW;YAAEa,QAAQ;QAAW;IACtD;IAEA,OAAO;QAAEE,aAAa;QAAoBb;IAAQ;AACpD;AAEA,OAAO,SAASc,mBACdhB,SAA4B,EAC5BiB,MAAuB,EACvBhB,KAAqC;IAErC,OAAQgB;QACN,KAAK;YACH,OAAO;gBAAEF,aAAa;gBAAoBb,SAASgB,KAAKpB,SAAS,CAACE,WAAW,MAAM;YAAG;QACxF,KAAK;YACH,OAAOD,cAAcC,WAAWC;IACpC;AACF"}

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;AAE7E,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,CAmGzE"}
+{"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"}

package/dist/components/GridLayout/GridItemContent.js

@@ -11,12 +11,13 @@
 // 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 } from '@mui/material';
+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';
+import { isPanelGroupItemIdEqual } from '@perses-dev/core'; // TODO
 import { useEditMode, usePanel, usePanelActions, useViewPanelGroup } from '../../context';
+import { usePanelFocusHandlers } from '../../keyboard-shortcuts';
 import { Panel } from '../Panel';
 import { QueryViewerDialog } from '../QueryViewerDialog';
 /**
@@ -28,11 +29,19 @@ import { QueryViewerDialog } from '../QueryViewerDialog';
     const { isEditMode } = useEditMode();
     const { openEditPanel, openDeletePanelDialog, duplicatePanel, viewPanel } = usePanelActions(panelGroupItemId);
     const viewPanelGroupItemId = useViewPanelGroup();
-    const { ref, inView } = useInView({
-        threshold: 0.2,
+    // Panel focus tracking for keyboard shortcuts
+    const { onMouseEnter, onMouseLeave } = usePanelFocusHandlers(`${panelGroupItemId.panelGroupId}-${panelGroupItemId.panelGroupItemLayoutId}`);
+    const { ref: queryRef, inView: shouldQuery } = useInView({
+        threshold: 0,
         initialInView: false,
         triggerOnce: true
     });
+    const { ref: renderRef, inView: shouldRender } = useInView({
+        threshold: 0.2,
+        initialInView: false,
+        triggerOnce: false
+    });
+    const mergedRef = useForkRef(renderRef, queryRef);
     const [openQueryViewer, setOpenQueryViewer] = useState(false);
     const viewQueriesHandler = useMemo(()=>{
         return isEditMode || !queries?.length ? undefined : {
@@ -75,10 +84,14 @@ import { QueryViewerDialog } from '../QueryViewerDialog';
     });
     const pluginQueryOptions = typeof plugin?.queryOptions === 'function' ? plugin?.queryOptions(panelDefinition.spec.plugin.spec) : plugin?.queryOptions;
     return /*#__PURE__*/ _jsxs(Box, {
-        ref: ref,
+        ref: mergedRef,
+        tabIndex: -1,
+        onMouseEnter: onMouseEnter,
+        onMouseLeave: onMouseLeave,
         sx: {
             width: '100%',
-            height: '100%'
+            height: '100%',
+            outline: 'none'
         },
         children: [
             /*#__PURE__*/ _jsx(DataQueriesProvider, {
@@ -88,9 +101,9 @@ import { QueryViewerDialog } from '../QueryViewerDialog';
                     ...pluginQueryOptions
                 },
                 queryOptions: {
-                    enabled: inView
+                    enabled: shouldQuery
                 },
-                children: inView && /*#__PURE__*/ _jsx(Panel, {
+                children: shouldRender && /*#__PURE__*/ _jsx(Panel, {
                     definition: panelDefinition,
                     readHandlers: readHandlers,
                     editHandlers: editHandlers,

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 } 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';\nimport { useEditMode, usePanel, usePanelActions, useViewPanelGroup } from '../../context';\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  const { ref, inView } = useInView({\n    threshold: 0.2, // we have the flexibility to adjust this threshold to trigger queries slightly earlier or later based on performance\n    initialInView: false,\n    triggerOnce: true,\n  });\n\n  const [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={ref}\n      sx={{\n        width: '100%',\n        height: '100%',\n      }}\n    >\n      <DataQueriesProvider\n        definitions={definitions}\n        options={{ suggestedStepMs, ...pluginQueryOptions }}\n        queryOptions={{ enabled: inView }}\n      >\n        {inView && (\n          <Panel\n            definition={panelDefinition}\n            readHandlers={readHandlers}\n            editHandlers={editHandlers}\n            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","useInView","DataQueriesProvider","usePlugin","useSuggestedStepMs","React","useMemo","useState","isPanelGroupItemIdEqual","useEditMode","usePanel","usePanelActions","useViewPanelGroup","Panel","QueryViewerDialog","GridItemContent","props","panelGroupItemId","width","panelDefinition","spec","queries","isEditMode","openEditPanel","openDeletePanelDialog","duplicatePanel","viewPanel","viewPanelGroupItemId","ref","inView","threshold","initialInView","triggerOnce","openQueryViewer","setOpenQueryViewer","viewQueriesHandler","length","undefined","onClick","readHandlers","isPanelViewed","onViewPanelClick","editHandlers","onEditPanelClick","onDuplicatePanelClick","onDeletePanelClick","suggestedStepMs","data","plugin","kind","queryDefinitions","definitions","map","query","pluginQueryOptions","queryOptions","sx","height","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 '@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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"}

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

@@ -1,5 +1,5 @@
 import { ReactElement } from 'react';
-import { PanelGroupId } from '@perses-dev/core';
+import { PanelGroupId } from '@perses-dev/spec';
 import { PanelOptions } from '../Panel';
 import { RowProps } from './Row';
 export interface GridLayoutProps {

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;AAE/C,OAAO,EAAE,YAAY,EAAwB,MAAM,kBAAkB,CAAC;AAItE,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;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"}

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 { PanelGroupId, PanelGroupDefinition } from '@perses-dev/core';\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';\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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"}

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

@@ -1,4 +1,4 @@
-import { PanelGroupId } from '@perses-dev/core';
+import { PanelGroupId } from '@perses-dev/spec';
 import { ReactElement } from 'react';
 export interface GridTitleProps {
     panelGroupId: PanelGroupId;

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/core';\nimport { ReactElement } from 'react';\nimport { ARIA_LABEL_TEXT, TOOLTIP_TEXT } from '../../constants';\nimport { usePanelGroupActions, useEditMode, useDeletePanelGroupDialog } from '../../context';\n\nexport interface GridTitleProps {\n  panelGroupId: PanelGroupId;\n  title: string;\n  collapse?: {\n    isOpen: boolean;\n    onToggleOpen: () => void;\n  };\n}\n\n/**\n * Renders the title for a Grid section, optionally also supporting expanding\n * and collapsing\n */\nexport function GridTitle(props: GridTitleProps): ReactElement {\n  const { panelGroupId, title: rawTitle, collapse } = props;\n\n  const title = useReplaceVariablesInString(rawTitle) as string;\n\n  const { openAddPanel, openEditPanelGroup, moveUp, moveDown } = usePanelGroupActions(panelGroupId);\n  const { openDeletePanelGroupDialog } = useDeletePanelGroupDialog();\n  const { isEditMode } = useEditMode();\n\n  const text = <Typography variant=\"h2\">{title}</Typography>;\n\n  return (\n    <Box\n      onClick={collapse?.onToggleOpen}\n      sx={{\n        display: 'flex',\n        justifyContent: 'start',\n        alignItems: 'center',\n        cursor: collapse ? 'pointer' : 'auto',\n        backgroundColor: ({ palette }) => palette.background.paper,\n      }}\n      data-testid=\"panel-group-header\"\n    >\n      {collapse ? (\n        <>\n          <IconButton sx={{ marginRight: 1 }} aria-label={`${collapse.isOpen ? 'collapse' : 'expand'} group ${title}`}>\n            {collapse.isOpen ? <ExpandedIcon /> : <CollapsedIcon />}\n          </IconButton>\n          {text}\n          {isEditMode && (\n            <Stack direction=\"row\" marginLeft=\"auto\">\n              <InfoTooltip description={TOOLTIP_TEXT.addPanelToGroup}>\n                <IconButton\n                  aria-label={ARIA_LABEL_TEXT.addPanelToGroup(title)}\n                  onClick={(e) => {\n                    // Don't trigger expand/collapse\n                    e.stopPropagation();\n                    openAddPanel();\n                  }}\n                >\n                  <AddPanelIcon />\n                </IconButton>\n              </InfoTooltip>\n              <InfoTooltip description={TOOLTIP_TEXT.editGroup}>\n                <IconButton\n                  aria-label={ARIA_LABEL_TEXT.editGroup(title)}\n                  onClick={(e) => {\n                    // Don't trigger expand/collapse\n                    e.stopPropagation();\n                    openEditPanelGroup();\n                  }}\n                >\n                  <PencilIcon />\n                </IconButton>\n              </InfoTooltip>\n              <InfoTooltip description={TOOLTIP_TEXT.deleteGroup}>\n                <IconButton\n                  aria-label={ARIA_LABEL_TEXT.deleteGroup(title)}\n                  onClick={(e) => {\n                    // Don't trigger expand/collapse\n                    e.stopPropagation();\n                    openDeletePanelGroupDialog(panelGroupId);\n                  }}\n                >\n                  <DeleteIcon />\n                </IconButton>\n              </InfoTooltip>\n              <InfoTooltip description={TOOLTIP_TEXT.moveGroupDown}>\n                <IconButton\n                  aria-label={ARIA_LABEL_TEXT.moveGroupDown(title)}\n                  disabled={moveDown === undefined}\n                  onClick={(e) => {\n                    // Don't trigger expand/collapse\n                    e.stopPropagation();\n                    moveDown?.();\n                  }}\n                >\n                  <ArrowDownIcon />\n                </IconButton>\n              </InfoTooltip>\n              <InfoTooltip description={TOOLTIP_TEXT.moveGroupUp}>\n                <IconButton\n                  aria-label={ARIA_LABEL_TEXT.moveGroupUp(title)}\n                  disabled={moveUp === undefined}\n                  onClick={(e) => {\n                    // Don't trigger expand/collapse\n                    e.stopPropagation();\n                    moveUp?.();\n                  }}\n                >\n                  <ArrowUpIcon />\n                </IconButton>\n              </InfoTooltip>\n            </Stack>\n          )}\n        </>\n      ) : (\n        // If we don't need expand/collapse, just render the title text\n        text\n      )}\n    </Box>\n  );\n}\n"],"names":["Box","IconButton","Stack","Typography","ExpandedIcon","CollapsedIcon","AddPanelIcon","PencilIcon","ArrowUpIcon","ArrowDownIcon","DeleteIcon","InfoTooltip","useReplaceVariablesInString","ARIA_LABEL_TEXT","TOOLTIP_TEXT","usePanelGroupActions","useEditMode","useDeletePanelGroupDialog","GridTitle","props","panelGroupId","title","rawTitle","collapse","openAddPanel","openEditPanelGroup","moveUp","moveDown","openDeletePanelGroupDialog","isEditMode","text","variant","onClick","onToggleOpen","sx","display","justifyContent","alignItems","cursor","backgroundColor","palette","background","paper","data-testid","marginRight","aria-label","isOpen","direction","marginLeft","description","addPanelToGroup","e","stopPropagation","editGroup","deleteGroup","moveGroupDown","disabled","undefined","moveGroupUp"],"mappings":"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"}
+{"version":3,"sources":["../../../src/components/GridLayout/GridTitle.tsx"],"sourcesContent":["// Copyright 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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"}

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

@@ -1,4 +1,5 @@
-import { PanelGroupId, PanelGroupDefinition } from '@perses-dev/core';
+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';

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,YAAY,EAAE,oBAAoB,EAAwB,MAAM,kBAAkB,CAAC;AAC5F,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,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"}

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 { PanelGroupId, PanelGroupDefinition, PanelGroupItemLayout } from '@perses-dev/core';\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 { 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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"}

package/dist/components/LeaveDialog/LeaveDialog.d.ts

@@ -1,13 +1,13 @@
-import { DashboardResource, EphemeralDashboardResource } from '@perses-dev/core';
 import { ReactElement, ReactNode } from 'react';
 import type { BlockerFunction } from '@remix-run/router';
+import { DashboardResource } from '../../model';
 export interface LeaveDialogProps {
     isBlocked: BlockerFunction | boolean;
     message: string;
 }
 export declare function Prompt({ isBlocked, message }: LeaveDialogProps): ReactElement;
 export declare function LeaveDialog({ original, current, }: {
-    original: DashboardResource | EphemeralDashboardResource | undefined;
-    current: DashboardResource | EphemeralDashboardResource;
+    original: DashboardResource | undefined;
+    current: DashboardResource;
 }): ReactNode;
 //# sourceMappingURL=LeaveDialog.d.ts.map

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

@@ -1 +1 @@
-{"version":3,"file":"LeaveDialog.d.ts","sourceRoot":"","sources":["../../../src/components/LeaveDialog/LeaveDialog.tsx"],"names":[],"mappings":"AAaA,OAAO,EAAE,iBAAiB,EAAE,0BAA0B,EAAE,MAAM,kBAAkB,CAAC;AACjF,OAAO,EAAE,YAAY,EAAE,SAAS,EAAa,MAAM,OAAO,CAAC;AAG3D,OAAO,KAAK,EAAE,eAAe,EAAE,MAAM,mBAAmB,CAAC;AAQzD,MAAM,WAAW,gBAAgB;IAC/B,SAAS,EAAE,eAAe,GAAG,OAAO,CAAC;IACrC,OAAO,EAAE,MAAM,CAAC;CACjB;AAMD,wBAAgB,MAAM,CAAC,EAAE,SAAS,EAAE,OAAO,EAAE,EAAE,gBAAgB,GAAG,YAAY,CA4B7E;AAKD,wBAAgB,WAAW,CAAC,EAC1B,QAAQ,EACR,OAAO,GACR,EAAE;IACD,QAAQ,EAAE,iBAAiB,GAAG,0BAA0B,GAAG,SAAS,CAAC;IACrE,OAAO,EAAE,iBAAiB,GAAG,0BAA0B,CAAC;CACzD,GAAG,SAAS,CAYZ"}
+{"version":3,"file":"LeaveDialog.d.ts","sourceRoot":"","sources":["../../../src/components/LeaveDialog/LeaveDialog.tsx"],"names":[],"mappings":"AAaA,OAAO,EAAE,YAAY,EAAE,SAAS,EAAa,MAAM,OAAO,CAAC;AAG3D,OAAO,KAAK,EAAE,eAAe,EAAE,MAAM,mBAAmB,CAAC;AACzD,OAAO,EAAE,iBAAiB,EAAE,MAAM,aAAa,CAAC;AAQhD,MAAM,WAAW,gBAAgB;IAC/B,SAAS,EAAE,eAAe,GAAG,OAAO,CAAC;IACrC,OAAO,EAAE,MAAM,CAAC;CACjB;AAMD,wBAAgB,MAAM,CAAC,EAAE,SAAS,EAAE,OAAO,EAAE,EAAE,gBAAgB,GAAG,YAAY,CA4B7E;AAKD,wBAAgB,WAAW,CAAC,EAC1B,QAAQ,EACR,OAAO,GACR,EAAE;IACD,QAAQ,EAAE,iBAAiB,GAAG,SAAS,CAAC;IACxC,OAAO,EAAE,iBAAiB,CAAC;CAC5B,GAAG,SAAS,CAYZ"}

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 { DashboardResource, EphemeralDashboardResource } from '@perses-dev/core';\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';\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 | EphemeralDashboardResource | undefined;\n  current: DashboardResource | EphemeralDashboardResource;\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;;AAGjC,SAAkCA,SAAS,QAAQ,QAAQ;AAC3D,SAASC,UAAU,QAAQ,mBAAmB;AAC9C,SAASC,gCAAgC,QAAQ,yBAAyB;AAG1E,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.d.ts

@@ -0,0 +1,10 @@
+import { Link } from '@perses-dev/spec';
+import { ReactElement } from 'react';
+type LinksVariant = 'dashboard' | 'panel';
+interface LinksProps {
+    links: Link[];
+    variant: LinksVariant;
+}
+export declare function LinksDisplay({ links, variant }: LinksProps): ReactElement | null;
+export {};
+//# sourceMappingURL=LinksDisplay.d.ts.map

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

@@ -0,0 +1 @@
+{"version":3,"file":"LinksDisplay.d.ts","sourceRoot":"","sources":["../../../src/components/LinksDisplay/LinksDisplay.tsx"],"names":[],"mappings":"AAeA,OAAO,EAAE,IAAI,EAAE,MAAM,kBAAkB,CAAC;AACxC,OAAO,EAAc,YAAY,EAAY,MAAM,OAAO,CAAC;AAI3D,KAAK,YAAY,GAAG,WAAW,GAAG,OAAO,CAAC;AAE1C,UAAU,UAAU;IAClB,KAAK,EAAE,IAAI,EAAE,CAAC;IACd,OAAO,EAAE,YAAY,CAAC;CACvB;AAED,wBAAgB,YAAY,CAAC,EAAE,KAAK,EAAE,OAAO,EAAE,EAAE,UAAU,GAAG,YAAY,GAAG,IAAI,CAiFhF"}

package/dist/components/{Panel/PanelLinks.js → LinksDisplay/LinksDisplay.js}

@@ -11,12 +11,12 @@
 // 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 } from '@mui/material';
+import { IconButton, Link as LinkComponent, Menu, MenuItem, Chip, capitalize, Stack } from '@mui/material';
 import LaunchIcon from 'mdi-material-ui/Launch';
 import { useState } from 'react';
 import { InfoTooltip } from '@perses-dev/components';
 import { useReplaceVariablesInString } from '@perses-dev/plugin-system';
-export function PanelLinks({ links }) {
+export function LinksDisplay({ links, variant }) {
     const [anchorEl, setAnchorEl] = useState(null);
     const isMenuOpened = Boolean(anchorEl);
     const handleOpenMenu = (event)=>{
@@ -25,21 +25,48 @@ export function PanelLinks({ links }) {
     const handleClose = ()=>{
         setAnchorEl(null);
     };
-    // If there is only one link, show it directly
-    if (links.length === 1 && links[0]) {
-        const link = links[0];
+    if (links.length === 0) {
+        return null;
+    }
+    // Panel variant: single link shows as icon button
+    if (variant === 'panel' && links.length === 1 && links[0]) {
         return /*#__PURE__*/ _jsx(LinkButton, {
-            link: link
+            link: links[0]
+        });
+    }
+    // Dashboard variant: 1-3 links show as chips
+    // Max character limit for the name and url to prevent overflow
+    // in the dashboard title area, but if either the name or url is too long,
+    // we will fall back to showing the links in a dropdown menu
+    if (variant === 'dashboard' && links.length <= 3) {
+        const canRenderAsChips = links.every((link)=>{
+            if (link.name) {
+                return link.name.length < 30;
+            }
+            if (link.url) {
+                return link.url.length < 70;
+            }
+            return false;
         });
+        if (canRenderAsChips) {
+            return /*#__PURE__*/ _jsx(Stack, {
+                direction: "row",
+                spacing: 1,
+                children: links.map((link)=>/*#__PURE__*/ _jsx(LinkChip, {
+                        link: link
+                    }, link.url))
+            });
+        }
     }
-    // Else we show a menu with a list of all links
+    // Default: show dropdown menu for multiple links
     return /*#__PURE__*/ _jsxs(_Fragment, {
         children: [
             /*#__PURE__*/ _jsx(InfoTooltip, {
                 description: `${links.length} links`,
                 enterDelay: 100,
                 children: /*#__PURE__*/ _jsx(IconButton, {
-                    "aria-label": "Panel links",
+                    "aria-label": `${capitalize(variant)}-links`,
+                    id: `${variant}-links-button`,
                     size: "small",
                     onClick: handleOpenMenu,
                     sx: (theme)=>({
@@ -60,7 +87,7 @@ export function PanelLinks({ links }) {
                 open: isMenuOpened,
                 onClose: handleClose,
                 MenuListProps: {
-                    'aria-labelledby': 'panel-links'
+                    'aria-labelledby': `${variant}-links-button`
                 },
                 children: links.map((link)=>/*#__PURE__*/ _jsx(LinkMenuItem, {
                         link: link
@@ -69,6 +96,28 @@ export function PanelLinks({ links }) {
         ]
     });
 }
+function LinkChip({ link }) {
+    const { url, name, tooltip, targetBlank } = useLink(link);
+    return /*#__PURE__*/ _jsx(InfoTooltip, {
+        description: tooltip ?? url,
+        enterDelay: 100,
+        children: /*#__PURE__*/ _jsx(Chip, {
+            label: name ?? url,
+            component: "a",
+            href: url,
+            target: targetBlank ? '_blank' : '_self',
+            clickable: true,
+            size: "medium",
+            icon: /*#__PURE__*/ _jsx(LaunchIcon, {
+                color: "inherit",
+                fontSize: "small"
+            }),
+            sx: (theme)=>({
+                    height: theme.spacing(3)
+                })
+        })
+    });
+}
 function LinkButton({ link }) {
     const { url, name, tooltip, targetBlank } = useLink(link);
     return /*#__PURE__*/ _jsx(InfoTooltip, {
@@ -120,4 +169,4 @@ function useLink(link) {
     };
 }
 
-//# sourceMappingURL=PanelLinks.js.map
+//# sourceMappingURL=LinksDisplay.js.map