@perses-dev/dashboards 0.52.0 → 0.53.0-beta.1

package/dist/components/PanelGroupDialog/PanelGroupDialog.js

@@ -11,10 +11,10 @@
 // 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, Dialog, DialogTitle, DialogContent, DialogActions, Button } from '@mui/material';
-import CloseIcon from 'mdi-material-ui/Close';
 import { useState } from 'react';
 import { useVariableValues } from '@perses-dev/plugin-system';
+import { Dialog } from '@perses-dev/components';
+import { Button } from '@mui/material';
 import { usePanelGroupEditor } from '../../context';
 import { PanelGroupEditorForm, panelGroupEditorFormId } from './PanelGroupEditorForm';
 /**
@@ -47,23 +47,13 @@ import { PanelGroupEditorForm, panelGroupEditorFormId } from './PanelGroupEditor
         },
         children: panelGroupEditor !== undefined && /*#__PURE__*/ _jsxs(_Fragment, {
             children: [
-                /*#__PURE__*/ _jsxs(DialogTitle, {
+                /*#__PURE__*/ _jsxs(Dialog.Header, {
                     children: [
                         panelGroupEditor.mode,
                         " Panel Group"
                     ]
                 }),
-                /*#__PURE__*/ _jsx(IconButton, {
-                    "aria-label": "Close",
-                    onClick: panelGroupEditor.close,
-                    sx: (theme)=>({
-                            position: 'absolute',
-                            top: theme.spacing(0.5),
-                            right: theme.spacing(0.5)
-                        }),
-                    children: /*#__PURE__*/ _jsx(CloseIcon, {})
-                }),
-                /*#__PURE__*/ _jsx(DialogContent, {
+                /*#__PURE__*/ _jsx(Dialog.Content, {
                     dividers: true,
                     sx: {
                         width: '500px'
@@ -74,7 +64,7 @@ import { PanelGroupEditorForm, panelGroupEditorFormId } from './PanelGroupEditor
                         onSubmit: handleSubmit
                     })
                 }),
-                /*#__PURE__*/ _jsxs(DialogActions, {
+                /*#__PURE__*/ _jsxs(Dialog.Actions, {
                     children: [
                         /*#__PURE__*/ _jsx(Button, {
                             variant: "contained",

package/dist/components/PanelGroupDialog/PanelGroupDialog.js.map

@@ -1 +1 @@
-{"version":3,"sources":["../../../src/components/PanelGroupDialog/PanelGroupDialog.tsx"],"sourcesContent":["// Copyright 2023 The Perses Authors\n// Licensed under the Apache License, Version 2.0 (the \"License\");\n// you may not use this file except in compliance with the License.\n// You may obtain a copy of the License at\n//\n// http://www.apache.org/licenses/LICENSE-2.0\n//\n// Unless required by applicable law or agreed to in writing, software\n// distributed under the License is distributed on an \"AS IS\" BASIS,\n// WITHOUT WARRANTIES OR CONDITIONS OF ANY KIND, either express or implied.\n// See the License for the specific language governing permissions and\n// limitations under the License.\n\nimport { IconButton, Dialog, DialogTitle, DialogContent, DialogActions, Button } from '@mui/material';\nimport CloseIcon from 'mdi-material-ui/Close';\nimport { ReactElement, useState } from 'react';\nimport { useVariableValues } from '@perses-dev/plugin-system';\nimport { usePanelGroupEditor } from '../../context';\nimport { PanelGroupEditorForm, panelGroupEditorFormId, PanelGroupEditorFormProps } from './PanelGroupEditorForm';\n\n/**\n * A dialog for adding or editing a Panel Group. Open and initial state is controlled by the DashboardStore.\n */\nexport function PanelGroupDialog(): ReactElement {\n  const panelGroupEditor = usePanelGroupEditor();\n  const variables = useVariableValues();\n\n  // When the user clicks close, start closing but don't call the store yet to keep values stable during animtation\n  const [isClosing, setIsClosing] = useState(false);\n  const handleClose = (): void => setIsClosing(true);\n\n  // Don't call close on the store until the Dialog has completely transitioned out\n  const handleExited = (): void => {\n    panelGroupEditor?.close();\n    setIsClosing(false);\n  };\n\n  // Dialog is open if we have a model and we're not transitioning out\n  const isOpen = panelGroupEditor !== undefined && isClosing === false;\n\n  const handleSubmit: PanelGroupEditorFormProps['onSubmit'] = (values) => {\n    // This shouldn't happen since we don't render the submit button until we have a model, but check to make TS happy\n    if (panelGroupEditor === undefined) {\n      throw new Error('Cannot apply changes');\n    }\n    panelGroupEditor.applyChanges(values);\n    handleClose();\n  };\n\n  return (\n    <Dialog open={isOpen} TransitionProps={{ onExited: handleExited }}>\n      {panelGroupEditor !== undefined && (\n        <>\n          <DialogTitle>{panelGroupEditor.mode} Panel Group</DialogTitle>\n          <IconButton\n            aria-label=\"Close\"\n            onClick={panelGroupEditor.close}\n            sx={(theme) => ({\n              position: 'absolute',\n              top: theme.spacing(0.5),\n              right: theme.spacing(0.5),\n            })}\n          >\n            <CloseIcon />\n          </IconButton>\n          <DialogContent dividers sx={{ width: '500px' }}>\n            <PanelGroupEditorForm\n              initialValues={panelGroupEditor.initialValues}\n              variables={Object.keys(variables)}\n              onSubmit={handleSubmit}\n            />\n          </DialogContent>\n          <DialogActions>\n            <Button variant=\"contained\" type=\"submit\" form={panelGroupEditorFormId}>\n              {panelGroupEditor.mode === 'Edit' ? 'Apply' : 'Add'}\n            </Button>\n            <Button variant=\"outlined\" color=\"secondary\" onClick={panelGroupEditor.close}>\n              Cancel\n            </Button>\n          </DialogActions>\n        </>\n      )}\n    </Dialog>\n  );\n}\n"],"names":["IconButton","Dialog","DialogTitle","DialogContent","DialogActions","Button","CloseIcon","useState","useVariableValues","usePanelGroupEditor","PanelGroupEditorForm","panelGroupEditorFormId","PanelGroupDialog","panelGroupEditor","variables","isClosing","setIsClosing","handleClose","handleExited","close","isOpen","undefined","handleSubmit","values","Error","applyChanges","open","TransitionProps","onExited","mode","aria-label","onClick","sx","theme","position","top","spacing","right","dividers","width","initialValues","Object","keys","onSubmit","variant","type","form","color"],"mappings":"AAAA,oCAAoC;AACpC,kEAAkE;AAClE,mEAAmE;AACnE,0CAA0C;AAC1C,EAAE;AACF,6CAA6C;AAC7C,EAAE;AACF,sEAAsE;AACtE,oEAAoE;AACpE,2EAA2E;AAC3E,sEAAsE;AACtE,iCAAiC;;AAEjC,SAASA,UAAU,EAAEC,MAAM,EAAEC,WAAW,EAAEC,aAAa,EAAEC,aAAa,EAAEC,MAAM,QAAQ,gBAAgB;AACtG,OAAOC,eAAe,wBAAwB;AAC9C,SAAuBC,QAAQ,QAAQ,QAAQ;AAC/C,SAASC,iBAAiB,QAAQ,4BAA4B;AAC9D,SAASC,mBAAmB,QAAQ,gBAAgB;AACpD,SAASC,oBAAoB,EAAEC,sBAAsB,QAAmC,yBAAyB;AAEjH;;CAEC,GACD,OAAO,SAASC;IACd,MAAMC,mBAAmBJ;IACzB,MAAMK,YAAYN;IAElB,iHAAiH;IACjH,MAAM,CAACO,WAAWC,aAAa,GAAGT,SAAS;IAC3C,MAAMU,cAAc,IAAYD,aAAa;IAE7C,iFAAiF;IACjF,MAAME,eAAe;QACnBL,kBAAkBM;QAClBH,aAAa;IACf;IAEA,oEAAoE;IACpE,MAAMI,SAASP,qBAAqBQ,aAAaN,cAAc;IAE/D,MAAMO,eAAsD,CAACC;QAC3D,kHAAkH;QAClH,IAAIV,qBAAqBQ,WAAW;YAClC,MAAM,IAAIG,MAAM;QAClB;QACAX,iBAAiBY,YAAY,CAACF;QAC9BN;IACF;IAEA,qBACE,KAAChB;QAAOyB,MAAMN;QAAQO,iBAAiB;YAAEC,UAAUV;QAAa;kBAC7DL,qBAAqBQ,2BACpB;;8BACE,MAACnB;;wBAAaW,iBAAiBgB,IAAI;wBAAC;;;8BACpC,KAAC7B;oBACC8B,cAAW;oBACXC,SAASlB,iBAAiBM,KAAK;oBAC/Ba,IAAI,CAACC,QAAW,CAAA;4BACdC,UAAU;4BACVC,KAAKF,MAAMG,OAAO,CAAC;4BACnBC,OAAOJ,MAAMG,OAAO,CAAC;wBACvB,CAAA;8BAEA,cAAA,KAAC9B;;8BAEH,KAACH;oBAAcmC,QAAQ;oBAACN,IAAI;wBAAEO,OAAO;oBAAQ;8BAC3C,cAAA,KAAC7B;wBACC8B,eAAe3B,iBAAiB2B,aAAa;wBAC7C1B,WAAW2B,OAAOC,IAAI,CAAC5B;wBACvB6B,UAAUrB;;;8BAGd,MAAClB;;sCACC,KAACC;4BAAOuC,SAAQ;4BAAYC,MAAK;4BAASC,MAAMnC;sCAC7CE,iBAAiBgB,IAAI,KAAK,SAAS,UAAU;;sCAEhD,KAACxB;4BAAOuC,SAAQ;4BAAWG,OAAM;4BAAYhB,SAASlB,iBAAiBM,KAAK;sCAAE;;;;;;;AAQ1F"}
+{"version":3,"sources":["../../../src/components/PanelGroupDialog/PanelGroupDialog.tsx"],"sourcesContent":["// Copyright 2023 The Perses Authors\n// Licensed under the Apache License, Version 2.0 (the \"License\");\n// you may not use this file except in compliance with the License.\n// You may obtain a copy of the License at\n//\n// http://www.apache.org/licenses/LICENSE-2.0\n//\n// Unless required by applicable law or agreed to in writing, software\n// distributed under the License is distributed on an \"AS IS\" BASIS,\n// WITHOUT WARRANTIES OR CONDITIONS OF ANY KIND, either express or implied.\n// See the License for the specific language governing permissions and\n// limitations under the License.\n\nimport { ReactElement, useState } from 'react';\nimport { useVariableValues } from '@perses-dev/plugin-system';\nimport { Dialog } from '@perses-dev/components';\nimport { Button } from '@mui/material';\nimport { usePanelGroupEditor } from '../../context';\nimport { PanelGroupEditorForm, panelGroupEditorFormId, PanelGroupEditorFormProps } from './PanelGroupEditorForm';\n\n/**\n * A dialog for adding or editing a Panel Group. Open and initial state is controlled by the DashboardStore.\n */\nexport function PanelGroupDialog(): ReactElement {\n  const panelGroupEditor = usePanelGroupEditor();\n  const variables = useVariableValues();\n\n  // When the user clicks close, start closing but don't call the store yet to keep values stable during animtation\n  const [isClosing, setIsClosing] = useState(false);\n  const handleClose = (): void => setIsClosing(true);\n\n  // Don't call close on the store until the Dialog has completely transitioned out\n  const handleExited = (): void => {\n    panelGroupEditor?.close();\n    setIsClosing(false);\n  };\n\n  // Dialog is open if we have a model and we're not transitioning out\n  const isOpen = panelGroupEditor !== undefined && isClosing === false;\n\n  const handleSubmit: PanelGroupEditorFormProps['onSubmit'] = (values) => {\n    // This shouldn't happen since we don't render the submit button until we have a model, but check to make TS happy\n    if (panelGroupEditor === undefined) {\n      throw new Error('Cannot apply changes');\n    }\n    panelGroupEditor.applyChanges(values);\n    handleClose();\n  };\n\n  return (\n    <Dialog open={isOpen} TransitionProps={{ onExited: handleExited }}>\n      {panelGroupEditor !== undefined && (\n        <>\n          <Dialog.Header>{panelGroupEditor.mode} Panel Group</Dialog.Header>\n          <Dialog.Content dividers sx={{ width: '500px' }}>\n            <PanelGroupEditorForm\n              initialValues={panelGroupEditor.initialValues}\n              variables={Object.keys(variables)}\n              onSubmit={handleSubmit}\n            />\n          </Dialog.Content>\n          <Dialog.Actions>\n            <Button variant=\"contained\" type=\"submit\" form={panelGroupEditorFormId}>\n              {panelGroupEditor.mode === 'Edit' ? 'Apply' : 'Add'}\n            </Button>\n            <Button variant=\"outlined\" color=\"secondary\" onClick={panelGroupEditor.close}>\n              Cancel\n            </Button>\n          </Dialog.Actions>\n        </>\n      )}\n    </Dialog>\n  );\n}\n"],"names":["useState","useVariableValues","Dialog","Button","usePanelGroupEditor","PanelGroupEditorForm","panelGroupEditorFormId","PanelGroupDialog","panelGroupEditor","variables","isClosing","setIsClosing","handleClose","handleExited","close","isOpen","undefined","handleSubmit","values","Error","applyChanges","open","TransitionProps","onExited","Header","mode","Content","dividers","sx","width","initialValues","Object","keys","onSubmit","Actions","variant","type","form","color","onClick"],"mappings":"AAAA,oCAAoC;AACpC,kEAAkE;AAClE,mEAAmE;AACnE,0CAA0C;AAC1C,EAAE;AACF,6CAA6C;AAC7C,EAAE;AACF,sEAAsE;AACtE,oEAAoE;AACpE,2EAA2E;AAC3E,sEAAsE;AACtE,iCAAiC;;AAEjC,SAAuBA,QAAQ,QAAQ,QAAQ;AAC/C,SAASC,iBAAiB,QAAQ,4BAA4B;AAC9D,SAASC,MAAM,QAAQ,yBAAyB;AAChD,SAASC,MAAM,QAAQ,gBAAgB;AACvC,SAASC,mBAAmB,QAAQ,gBAAgB;AACpD,SAASC,oBAAoB,EAAEC,sBAAsB,QAAmC,yBAAyB;AAEjH;;CAEC,GACD,OAAO,SAASC;IACd,MAAMC,mBAAmBJ;IACzB,MAAMK,YAAYR;IAElB,iHAAiH;IACjH,MAAM,CAACS,WAAWC,aAAa,GAAGX,SAAS;IAC3C,MAAMY,cAAc,IAAYD,aAAa;IAE7C,iFAAiF;IACjF,MAAME,eAAe;QACnBL,kBAAkBM;QAClBH,aAAa;IACf;IAEA,oEAAoE;IACpE,MAAMI,SAASP,qBAAqBQ,aAAaN,cAAc;IAE/D,MAAMO,eAAsD,CAACC;QAC3D,kHAAkH;QAClH,IAAIV,qBAAqBQ,WAAW;YAClC,MAAM,IAAIG,MAAM;QAClB;QACAX,iBAAiBY,YAAY,CAACF;QAC9BN;IACF;IAEA,qBACE,KAACV;QAAOmB,MAAMN;QAAQO,iBAAiB;YAAEC,UAAUV;QAAa;kBAC7DL,qBAAqBQ,2BACpB;;8BACE,MAACd,OAAOsB,MAAM;;wBAAEhB,iBAAiBiB,IAAI;wBAAC;;;8BACtC,KAACvB,OAAOwB,OAAO;oBAACC,QAAQ;oBAACC,IAAI;wBAAEC,OAAO;oBAAQ;8BAC5C,cAAA,KAACxB;wBACCyB,eAAetB,iBAAiBsB,aAAa;wBAC7CrB,WAAWsB,OAAOC,IAAI,CAACvB;wBACvBwB,UAAUhB;;;8BAGd,MAACf,OAAOgC,OAAO;;sCACb,KAAC/B;4BAAOgC,SAAQ;4BAAYC,MAAK;4BAASC,MAAM/B;sCAC7CE,iBAAiBiB,IAAI,KAAK,SAAS,UAAU;;sCAEhD,KAACtB;4BAAOgC,SAAQ;4BAAWG,OAAM;4BAAYC,SAAS/B,iBAAiBM,KAAK;sCAAE;;;;;;;AAQ1F"}

package/dist/components/QueryViewerDialog/QueryViewerDialog.d.ts

@@ -0,0 +1,9 @@
+import { ReactElement } from 'react';
+import { QueryDefinition } from '@perses-dev/core';
+export interface QueryViewerDialogProps {
+    open: boolean;
+    queryDefinitions: QueryDefinition[];
+    onClose: () => void;
+}
+export declare function QueryViewerDialog({ open, queryDefinitions, onClose }: QueryViewerDialogProps): ReactElement;
+//# sourceMappingURL=QueryViewerDialog.d.ts.map

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

@@ -0,0 +1 @@
+{"version":3,"file":"QueryViewerDialog.d.ts","sourceRoot":"","sources":["../../../src/components/QueryViewerDialog/QueryViewerDialog.tsx"],"names":[],"mappings":"AAaA,OAAc,EAAE,YAAY,EAAW,MAAM,OAAO,CAAC;AAIrD,OAAO,EAAE,eAAe,EAAE,MAAM,kBAAkB,CAAC;AAEnD,MAAM,WAAW,sBAAsB;IACrC,IAAI,EAAE,OAAO,CAAC;IACd,gBAAgB,EAAE,eAAe,EAAE,CAAC;IACpC,OAAO,EAAE,MAAM,IAAI,CAAC;CACrB;AAED,wBAAgB,iBAAiB,CAAC,EAAE,IAAI,EAAE,gBAAgB,EAAE,OAAO,EAAE,EAAE,sBAAsB,GAAG,YAAY,CAmC3G"}

package/dist/components/QueryViewerDialog/QueryViewerDialog.js

@@ -0,0 +1,72 @@
+// Copyright 2025 The Perses Authors
+// Licensed under the Apache License, Version 2.0 (the "License");
+// you may not use this file except in compliance with the License.
+// You may obtain a copy of the License at
+//
+// http://www.apache.org/licenses/LICENSE-2.0
+//
+// Unless required by applicable law or agreed to in writing, software
+// distributed under the License is distributed on an "AS IS" BASIS,
+// WITHOUT WARRANTIES OR CONDITIONS OF ANY KIND, either express or implied.
+// See the License for the specific language governing permissions and
+// limitations under the License.
+import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
+import React, { useMemo } from 'react';
+import { Dialog } from '@perses-dev/components';
+import { Button, Divider } from '@mui/material';
+import { PluginSpecEditor } from '@perses-dev/plugin-system';
+export function QueryViewerDialog({ open, queryDefinitions, onClose }) {
+    const queryRows = useMemo(()=>{
+        if (!queryDefinitions?.length) return null;
+        const queryItems = [];
+        queryDefinitions.forEach((query, index)=>{
+            if (query?.spec?.plugin?.kind && query?.kind) {
+                queryItems.push(/*#__PURE__*/ _jsxs(React.Fragment, {
+                    children: [
+                        /*#__PURE__*/ _jsx(PluginSpecEditor, {
+                            value: query.spec.plugin.spec,
+                            pluginSelection: {
+                                kind: query.spec.plugin.kind,
+                                type: query.kind
+                            },
+                            onChange: ()=>{},
+                            isReadonly: true
+                        }),
+                        index < queryDefinitions.length - 1 && /*#__PURE__*/ _jsx(Divider, {
+                            sx: {
+                                my: 2
+                            }
+                        })
+                    ]
+                }, `query-${index}`));
+            }
+        });
+        return queryItems;
+    }, [
+        queryDefinitions
+    ]);
+    return /*#__PURE__*/ _jsxs(Dialog, {
+        open: open,
+        onClose: onClose,
+        maxWidth: "lg",
+        fullWidth: true,
+        children: [
+            /*#__PURE__*/ _jsx(Dialog.Header, {
+                children: "Query Viewer"
+            }),
+            /*#__PURE__*/ _jsx(Dialog.Content, {
+                children: queryRows
+            }),
+            /*#__PURE__*/ _jsx(Dialog.Actions, {
+                children: /*#__PURE__*/ _jsx(Button, {
+                    variant: "outlined",
+                    color: "secondary",
+                    onClick: onClose,
+                    children: "Close"
+                })
+            })
+        ]
+    });
+}
+
+//# sourceMappingURL=QueryViewerDialog.js.map

package/dist/components/QueryViewerDialog/QueryViewerDialog.js.map

@@ -0,0 +1 @@
+{"version":3,"sources":["../../../src/components/QueryViewerDialog/QueryViewerDialog.tsx"],"sourcesContent":["// Copyright 2025 The Perses Authors\n// Licensed under the Apache License, Version 2.0 (the \"License\");\n// you may not use this file except in compliance with the License.\n// You may obtain a copy of the License at\n//\n// http://www.apache.org/licenses/LICENSE-2.0\n//\n// Unless required by applicable law or agreed to in writing, software\n// distributed under the License is distributed on an \"AS IS\" BASIS,\n// WITHOUT WARRANTIES OR CONDITIONS OF ANY KIND, either express or implied.\n// See the License for the specific language governing permissions and\n// limitations under the License.\n\nimport React, { ReactElement, useMemo } from 'react';\nimport { Dialog } from '@perses-dev/components';\nimport { Button, Divider } from '@mui/material';\nimport { PluginSpecEditor } from '@perses-dev/plugin-system';\nimport { QueryDefinition } from '@perses-dev/core';\n\nexport interface QueryViewerDialogProps {\n  open: boolean;\n  queryDefinitions: QueryDefinition[];\n  onClose: () => void;\n}\n\nexport function QueryViewerDialog({ open, queryDefinitions, onClose }: QueryViewerDialogProps): ReactElement {\n  const queryRows = useMemo(() => {\n    if (!queryDefinitions?.length) return null;\n\n    const queryItems: ReactElement[] = [];\n    queryDefinitions.forEach((query, index) => {\n      if (query?.spec?.plugin?.kind && query?.kind) {\n        queryItems.push(\n          <React.Fragment key={`query-${index}`}>\n            <PluginSpecEditor\n              value={query.spec.plugin.spec}\n              pluginSelection={{ kind: query.spec.plugin.kind, type: query.kind }}\n              onChange={(): void => {}}\n              isReadonly\n            />\n            {index < queryDefinitions.length - 1 && <Divider sx={{ my: 2 }} />}\n          </React.Fragment>\n        );\n      }\n    });\n\n    return queryItems;\n  }, [queryDefinitions]);\n\n  return (\n    <Dialog open={open} onClose={onClose} maxWidth=\"lg\" fullWidth={true}>\n      <Dialog.Header>Query Viewer</Dialog.Header>\n      <Dialog.Content>{queryRows}</Dialog.Content>\n      <Dialog.Actions>\n        <Button variant=\"outlined\" color=\"secondary\" onClick={onClose}>\n          Close\n        </Button>\n      </Dialog.Actions>\n    </Dialog>\n  );\n}\n"],"names":["React","useMemo","Dialog","Button","Divider","PluginSpecEditor","QueryViewerDialog","open","queryDefinitions","onClose","queryRows","length","queryItems","forEach","query","index","spec","plugin","kind","push","Fragment","value","pluginSelection","type","onChange","isReadonly","sx","my","maxWidth","fullWidth","Header","Content","Actions","variant","color","onClick"],"mappings":"AAAA,oCAAoC;AACpC,kEAAkE;AAClE,mEAAmE;AACnE,0CAA0C;AAC1C,EAAE;AACF,6CAA6C;AAC7C,EAAE;AACF,sEAAsE;AACtE,oEAAoE;AACpE,2EAA2E;AAC3E,sEAAsE;AACtE,iCAAiC;;AAEjC,OAAOA,SAAuBC,OAAO,QAAQ,QAAQ;AACrD,SAASC,MAAM,QAAQ,yBAAyB;AAChD,SAASC,MAAM,EAAEC,OAAO,QAAQ,gBAAgB;AAChD,SAASC,gBAAgB,QAAQ,4BAA4B;AAS7D,OAAO,SAASC,kBAAkB,EAAEC,IAAI,EAAEC,gBAAgB,EAAEC,OAAO,EAA0B;IAC3F,MAAMC,YAAYT,QAAQ;QACxB,IAAI,CAACO,kBAAkBG,QAAQ,OAAO;QAEtC,MAAMC,aAA6B,EAAE;QACrCJ,iBAAiBK,OAAO,CAAC,CAACC,OAAOC;YAC/B,IAAID,OAAOE,MAAMC,QAAQC,QAAQJ,OAAOI,MAAM;gBAC5CN,WAAWO,IAAI,eACb,MAACnB,MAAMoB,QAAQ;;sCACb,KAACf;4BACCgB,OAAOP,MAAME,IAAI,CAACC,MAAM,CAACD,IAAI;4BAC7BM,iBAAiB;gCAAEJ,MAAMJ,MAAME,IAAI,CAACC,MAAM,CAACC,IAAI;gCAAEK,MAAMT,MAAMI,IAAI;4BAAC;4BAClEM,UAAU,KAAa;4BACvBC,UAAU;;wBAEXV,QAAQP,iBAAiBG,MAAM,GAAG,mBAAK,KAACP;4BAAQsB,IAAI;gCAAEC,IAAI;4BAAE;;;mBAP1C,CAAC,MAAM,EAAEZ,OAAO;YAUzC;QACF;QAEA,OAAOH;IACT,GAAG;QAACJ;KAAiB;IAErB,qBACE,MAACN;QAAOK,MAAMA;QAAME,SAASA;QAASmB,UAAS;QAAKC,WAAW;;0BAC7D,KAAC3B,OAAO4B,MAAM;0BAAC;;0BACf,KAAC5B,OAAO6B,OAAO;0BAAErB;;0BACjB,KAACR,OAAO8B,OAAO;0BACb,cAAA,KAAC7B;oBAAO8B,SAAQ;oBAAWC,OAAM;oBAAYC,SAAS1B;8BAAS;;;;;AAMvE"}

package/dist/components/QueryViewerDialog/index.d.ts

@@ -0,0 +1,2 @@
+export * from './QueryViewerDialog';
+//# sourceMappingURL=index.d.ts.map

package/dist/components/QueryViewerDialog/index.d.ts.map

@@ -0,0 +1 @@
+{"version":3,"file":"index.d.ts","sourceRoot":"","sources":["../../../src/components/QueryViewerDialog/index.ts"],"names":[],"mappings":"AAaA,cAAc,qBAAqB,CAAC"}

package/dist/components/QueryViewerDialog/index.js

@@ -0,0 +1,15 @@
+// Copyright 2025 The Perses Authors
+// Licensed under the Apache License, Version 2.0 (the "License");
+// you may not use this file except in compliance with the License.
+// You may obtain a copy of the License at
+//
+// http://www.apache.org/licenses/LICENSE-2.0
+//
+// Unless required by applicable law or agreed to in writing, software
+// distributed under the License is distributed on an "AS IS" BASIS,
+// WITHOUT WARRANTIES OR CONDITIONS OF ANY KIND, either express or implied.
+// See the License for the specific language governing permissions and
+// limitations under the License.
+export * from './QueryViewerDialog';
+
+//# sourceMappingURL=index.js.map

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

@@ -0,0 +1 @@
+{"version":3,"sources":["../../../src/components/QueryViewerDialog/index.ts"],"sourcesContent":["// Copyright 2025 The Perses Authors\n// Licensed under the Apache License, Version 2.0 (the \"License\");\n// you may not use this file except in compliance with the License.\n// You may obtain a copy of the License at\n//\n// http://www.apache.org/licenses/LICENSE-2.0\n//\n// Unless required by applicable law or agreed to in writing, software\n// distributed under the License is distributed on an \"AS IS\" BASIS,\n// WITHOUT WARRANTIES OR CONDITIONS OF ANY KIND, either express or implied.\n// See the License for the specific language governing permissions and\n// limitations under the License.\n\nexport * from './QueryViewerDialog';\n"],"names":[],"mappings":"AAAA,oCAAoC;AACpC,kEAAkE;AAClE,mEAAmE;AACnE,0CAA0C;AAC1C,EAAE;AACF,6CAA6C;AAC7C,EAAE;AACF,sEAAsE;AACtE,oEAAoE;AACpE,2EAA2E;AAC3E,sEAAsE;AACtE,iCAAiC;AAEjC,cAAc,sBAAsB"}

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

@@ -1 +1 @@
-{"version":3,"file":"SaveChangesConfirmationDialog.d.ts","sourceRoot":"","sources":["../../../src/components/SaveChangesConfirmationDialog/SaveChangesConfirmationDialog.tsx"],"names":[],"mappings":"AAaA,OAAO,EAAE,YAAY,EAAY,MAAM,OAAO,CAAC;AAU/C,eAAO,MAAM,6BAA6B,QAAO,YAqEhD,CAAC"}
+{"version":3,"file":"SaveChangesConfirmationDialog.d.ts","sourceRoot":"","sources":["../../../src/components/SaveChangesConfirmationDialog/SaveChangesConfirmationDialog.tsx"],"names":[],"mappings":"AAaA,OAAO,EAAE,YAAY,EAAY,MAAM,OAAO,CAAC;AAU/C,eAAO,MAAM,6BAA6B,QAAO,YAyFhD,CAAC"}

package/dist/components/SaveChangesConfirmationDialog/SaveChangesConfirmationDialog.js

@@ -13,7 +13,7 @@
 import { jsx as _jsx, jsxs as _jsxs, Fragment as _Fragment } from "react/jsx-runtime";
 import { useState } from 'react';
 import { Checkbox, FormGroup, FormControlLabel, Typography } from '@mui/material';
-import { useTimeRange } from '@perses-dev/plugin-system';
+import { DEFAULT_REFRESH_INTERVAL_OPTIONS, useTimeRange } from '@perses-dev/plugin-system';
 import { isRelativeTimeRange } from '@perses-dev/core';
 import { Dialog } from '@perses-dev/components';
 import { useSaveChangesConfirmationDialog, useVariableDefinitionActions } from '../../context';
@@ -22,15 +22,19 @@ export const SaveChangesConfirmationDialog = ()=>{
     const { saveChangesConfirmationDialog: dialog } = useSaveChangesConfirmationDialog();
     const isSavedDurationModified = dialog?.isSavedDurationModified ?? true;
     const isSavedVariableModified = dialog?.isSavedVariableModified ?? true;
+    const isSavedRefreshIntervalModified = dialog?.isSavedRefreshIntervalModified ?? true;
     const [saveDefaultTimeRange, setSaveDefaultTimeRange] = useState(isSavedDurationModified);
     const [saveDefaultVariables, setSaveDefaultVariables] = useState(isSavedVariableModified);
+    const [saveDefaultRefreshInterval, setDefaultRefreshInterval] = useState(isSavedRefreshIntervalModified);
     const { getSavedVariablesStatus } = useVariableDefinitionActions();
     const { modifiedVariableNames } = getSavedVariablesStatus();
     const isOpen = dialog !== undefined;
-    const { timeRange } = useTimeRange();
+    const { timeRange, refreshInterval } = useTimeRange();
     const currentTimeRangeText = isRelativeTimeRange(timeRange) ? `(Last ${timeRange.pastDuration})` : '(Absolute time ranges can not be saved)';
-    const saveTimeRangeText = `Save current time range as new default ${currentTimeRangeText}`;
-    const saveVariablesText = `Save current variable values as new default (${modifiedVariableNames.length > 0 ? modifiedVariableNames.join(', ') : 'No modified variables'})`;
+    const saveTimeRangeMessage = `Save current time range as new default ${currentTimeRangeText}`;
+    const saveVariableMessage = `Save current variable values as new default (${modifiedVariableNames.length > 0 ? modifiedVariableNames.join(', ') : 'No modified variables'})`;
+    const refreshIntervalDisplay = DEFAULT_REFRESH_INTERVAL_OPTIONS.some((i)=>i.display === refreshInterval) ? refreshInterval : DEFAULT_REFRESH_INTERVAL_OPTIONS.find((i)=>i.value.pastDuration === refreshInterval)?.display;
+    const saveRefreshIntervalMessage = `Save current refresh interval as new default ${refreshIntervalDisplay ? `(${refreshIntervalDisplay})` : 'refresh interval not modified'}`;
     return /*#__PURE__*/ _jsx(Dialog, {
         open: isOpen,
         children: dialog !== undefined && /*#__PURE__*/ _jsxs(_Fragment, {
@@ -53,7 +57,15 @@ export const SaveChangesConfirmationDialog = ()=>{
                                         checked: saveDefaultTimeRange && isSavedDurationModified && isRelativeTimeRange(timeRange),
                                         onChange: (e)=>setSaveDefaultTimeRange(e.target.checked)
                                     }),
-                                    label: saveTimeRangeText
+                                    label: saveTimeRangeMessage
+                                }),
+                                /*#__PURE__*/ _jsx(FormControlLabel, {
+                                    control: /*#__PURE__*/ _jsx(Checkbox, {
+                                        disabled: !isSavedRefreshIntervalModified,
+                                        checked: saveDefaultRefreshInterval && isSavedRefreshIntervalModified,
+                                        onChange: (e)=>setDefaultRefreshInterval(e.target.checked)
+                                    }),
+                                    label: saveRefreshIntervalMessage
                                 }),
                                 /*#__PURE__*/ _jsx(FormControlLabel, {
                                     control: /*#__PURE__*/ _jsx(Checkbox, {
@@ -61,7 +73,7 @@ export const SaveChangesConfirmationDialog = ()=>{
                                         checked: saveDefaultVariables && isSavedVariableModified,
                                         onChange: (e)=>setSaveDefaultVariables(e.target.checked)
                                     }),
-                                    label: saveVariablesText
+                                    label: saveVariableMessage
                                 })
                             ]
                         })
@@ -71,7 +83,7 @@ export const SaveChangesConfirmationDialog = ()=>{
                     children: [
                         /*#__PURE__*/ _jsx(Dialog.PrimaryButton, {
                             onClick: ()=>{
-                                return dialog.onSaveChanges(saveDefaultTimeRange, saveDefaultVariables);
+                                return dialog.onSaveChanges(saveDefaultTimeRange, saveDefaultRefreshInterval, saveDefaultVariables);
                             },
                             children: "Save Changes"
                         }),

package/dist/components/SaveChangesConfirmationDialog/SaveChangesConfirmationDialog.js.map

@@ -1 +1 @@
-{"version":3,"sources":["../../../src/components/SaveChangesConfirmationDialog/SaveChangesConfirmationDialog.tsx"],"sourcesContent":["// Copyright 2024 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 { Checkbox, FormGroup, FormControlLabel, Typography } from '@mui/material';\nimport { useTimeRange } from '@perses-dev/plugin-system';\nimport { isRelativeTimeRange } from '@perses-dev/core';\nimport { Dialog } from '@perses-dev/components';\nimport { useSaveChangesConfirmationDialog, useVariableDefinitionActions } from '../../context';\n\nconst SAVE_DEFAULTS_DIALOG_TEXT =\n  'You have made changes to the time range or the variables values. Would you like to save these as defaults?';\n\nexport const SaveChangesConfirmationDialog = (): ReactElement => {\n  const { saveChangesConfirmationDialog: dialog } = useSaveChangesConfirmationDialog();\n  const isSavedDurationModified = dialog?.isSavedDurationModified ?? true;\n  const isSavedVariableModified = dialog?.isSavedVariableModified ?? true;\n  const [saveDefaultTimeRange, setSaveDefaultTimeRange] = useState(isSavedDurationModified);\n  const [saveDefaultVariables, setSaveDefaultVariables] = useState(isSavedVariableModified);\n\n  const { getSavedVariablesStatus } = useVariableDefinitionActions();\n  const { modifiedVariableNames } = getSavedVariablesStatus();\n\n  const isOpen = dialog !== undefined;\n\n  const { timeRange } = useTimeRange();\n  const currentTimeRangeText = isRelativeTimeRange(timeRange)\n    ? `(Last ${timeRange.pastDuration})`\n    : '(Absolute time ranges can not be saved)';\n\n  const saveTimeRangeText = `Save current time range as new default ${currentTimeRangeText}`;\n\n  const saveVariablesText = `Save current variable values as new default (${\n    modifiedVariableNames.length > 0 ? modifiedVariableNames.join(', ') : 'No modified variables'\n  })`;\n\n  return (\n    <Dialog open={isOpen}>\n      {dialog !== undefined && (\n        <>\n          <Dialog.Header onClose={() => dialog.onCancel()}>Save Dashboard</Dialog.Header>\n\n          <Dialog.Content>\n            <Typography marginBottom={2}>{dialog.description || SAVE_DEFAULTS_DIALOG_TEXT}</Typography>\n            <FormGroup>\n              <FormControlLabel\n                control={\n                  <Checkbox\n                    disabled={!isSavedDurationModified || !isRelativeTimeRange(timeRange)}\n                    checked={saveDefaultTimeRange && isSavedDurationModified && isRelativeTimeRange(timeRange)}\n                    onChange={(e: React.ChangeEvent<HTMLInputElement>) => setSaveDefaultTimeRange(e.target.checked)}\n                  />\n                }\n                label={saveTimeRangeText}\n              />\n              <FormControlLabel\n                control={\n                  <Checkbox\n                    disabled={!isSavedVariableModified}\n                    checked={saveDefaultVariables && isSavedVariableModified}\n                    onChange={(e: React.ChangeEvent<HTMLInputElement>) => setSaveDefaultVariables(e.target.checked)}\n                  />\n                }\n                label={saveVariablesText}\n              />\n            </FormGroup>\n          </Dialog.Content>\n\n          <Dialog.Actions>\n            <Dialog.PrimaryButton\n              onClick={() => {\n                return dialog.onSaveChanges(saveDefaultTimeRange, saveDefaultVariables);\n              }}\n            >\n              Save Changes\n            </Dialog.PrimaryButton>\n            <Dialog.SecondaryButton onClick={() => dialog.onCancel()}>Cancel</Dialog.SecondaryButton>\n          </Dialog.Actions>\n        </>\n      )}\n    </Dialog>\n  );\n};\n"],"names":["useState","Checkbox","FormGroup","FormControlLabel","Typography","useTimeRange","isRelativeTimeRange","Dialog","useSaveChangesConfirmationDialog","useVariableDefinitionActions","SAVE_DEFAULTS_DIALOG_TEXT","SaveChangesConfirmationDialog","saveChangesConfirmationDialog","dialog","isSavedDurationModified","isSavedVariableModified","saveDefaultTimeRange","setSaveDefaultTimeRange","saveDefaultVariables","setSaveDefaultVariables","getSavedVariablesStatus","modifiedVariableNames","isOpen","undefined","timeRange","currentTimeRangeText","pastDuration","saveTimeRangeText","saveVariablesText","length","join","open","Header","onClose","onCancel","Content","marginBottom","description","control","disabled","checked","onChange","e","target","label","Actions","PrimaryButton","onClick","onSaveChanges","SecondaryButton"],"mappings":"AAAA,oCAAoC;AACpC,kEAAkE;AAClE,mEAAmE;AACnE,0CAA0C;AAC1C,EAAE;AACF,6CAA6C;AAC7C,EAAE;AACF,sEAAsE;AACtE,oEAAoE;AACpE,2EAA2E;AAC3E,sEAAsE;AACtE,iCAAiC;;AAEjC,SAAuBA,QAAQ,QAAQ,QAAQ;AAC/C,SAASC,QAAQ,EAAEC,SAAS,EAAEC,gBAAgB,EAAEC,UAAU,QAAQ,gBAAgB;AAClF,SAASC,YAAY,QAAQ,4BAA4B;AACzD,SAASC,mBAAmB,QAAQ,mBAAmB;AACvD,SAASC,MAAM,QAAQ,yBAAyB;AAChD,SAASC,gCAAgC,EAAEC,4BAA4B,QAAQ,gBAAgB;AAE/F,MAAMC,4BACJ;AAEF,OAAO,MAAMC,gCAAgC;IAC3C,MAAM,EAAEC,+BAA+BC,MAAM,EAAE,GAAGL;IAClD,MAAMM,0BAA0BD,QAAQC,2BAA2B;IACnE,MAAMC,0BAA0BF,QAAQE,2BAA2B;IACnE,MAAM,CAACC,sBAAsBC,wBAAwB,GAAGjB,SAASc;IACjE,MAAM,CAACI,sBAAsBC,wBAAwB,GAAGnB,SAASe;IAEjE,MAAM,EAAEK,uBAAuB,EAAE,GAAGX;IACpC,MAAM,EAAEY,qBAAqB,EAAE,GAAGD;IAElC,MAAME,SAAST,WAAWU;IAE1B,MAAM,EAAEC,SAAS,EAAE,GAAGnB;IACtB,MAAMoB,uBAAuBnB,oBAAoBkB,aAC7C,CAAC,MAAM,EAAEA,UAAUE,YAAY,CAAC,CAAC,CAAC,GAClC;IAEJ,MAAMC,oBAAoB,CAAC,uCAAuC,EAAEF,sBAAsB;IAE1F,MAAMG,oBAAoB,CAAC,6CAA6C,EACtEP,sBAAsBQ,MAAM,GAAG,IAAIR,sBAAsBS,IAAI,CAAC,QAAQ,wBACvE,CAAC,CAAC;IAEH,qBACE,KAACvB;QAAOwB,MAAMT;kBACXT,WAAWU,2BACV;;8BACE,KAAChB,OAAOyB,MAAM;oBAACC,SAAS,IAAMpB,OAAOqB,QAAQ;8BAAI;;8BAEjD,MAAC3B,OAAO4B,OAAO;;sCACb,KAAC/B;4BAAWgC,cAAc;sCAAIvB,OAAOwB,WAAW,IAAI3B;;sCACpD,MAACR;;8CACC,KAACC;oCACCmC,uBACE,KAACrC;wCACCsC,UAAU,CAACzB,2BAA2B,CAACR,oBAAoBkB;wCAC3DgB,SAASxB,wBAAwBF,2BAA2BR,oBAAoBkB;wCAChFiB,UAAU,CAACC,IAA2CzB,wBAAwByB,EAAEC,MAAM,CAACH,OAAO;;oCAGlGI,OAAOjB;;8CAET,KAACxB;oCACCmC,uBACE,KAACrC;wCACCsC,UAAU,CAACxB;wCACXyB,SAAStB,wBAAwBH;wCACjC0B,UAAU,CAACC,IAA2CvB,wBAAwBuB,EAAEC,MAAM,CAACH,OAAO;;oCAGlGI,OAAOhB;;;;;;8BAKb,MAACrB,OAAOsC,OAAO;;sCACb,KAACtC,OAAOuC,aAAa;4BACnBC,SAAS;gCACP,OAAOlC,OAAOmC,aAAa,CAAChC,sBAAsBE;4BACpD;sCACD;;sCAGD,KAACX,OAAO0C,eAAe;4BAACF,SAAS,IAAMlC,OAAOqB,QAAQ;sCAAI;;;;;;;AAMtE,EAAE"}
+{"version":3,"sources":["../../../src/components/SaveChangesConfirmationDialog/SaveChangesConfirmationDialog.tsx"],"sourcesContent":["// Copyright 2024 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 { Checkbox, FormGroup, FormControlLabel, Typography } from '@mui/material';\nimport { DEFAULT_REFRESH_INTERVAL_OPTIONS, useTimeRange } from '@perses-dev/plugin-system';\nimport { isRelativeTimeRange } from '@perses-dev/core';\nimport { Dialog } from '@perses-dev/components';\nimport { useSaveChangesConfirmationDialog, useVariableDefinitionActions } from '../../context';\n\nconst SAVE_DEFAULTS_DIALOG_TEXT =\n  'You have made changes to the time range or the variables values. Would you like to save these as defaults?';\n\nexport const SaveChangesConfirmationDialog = (): ReactElement => {\n  const { saveChangesConfirmationDialog: dialog } = useSaveChangesConfirmationDialog();\n  const isSavedDurationModified = dialog?.isSavedDurationModified ?? true;\n  const isSavedVariableModified = dialog?.isSavedVariableModified ?? true;\n  const isSavedRefreshIntervalModified = dialog?.isSavedRefreshIntervalModified ?? true;\n\n  const [saveDefaultTimeRange, setSaveDefaultTimeRange] = useState(isSavedDurationModified);\n  const [saveDefaultVariables, setSaveDefaultVariables] = useState(isSavedVariableModified);\n  const [saveDefaultRefreshInterval, setDefaultRefreshInterval] = useState(isSavedRefreshIntervalModified);\n\n  const { getSavedVariablesStatus } = useVariableDefinitionActions();\n  const { modifiedVariableNames } = getSavedVariablesStatus();\n\n  const isOpen = dialog !== undefined;\n\n  const { timeRange, refreshInterval } = useTimeRange();\n\n  const currentTimeRangeText = isRelativeTimeRange(timeRange)\n    ? `(Last ${timeRange.pastDuration})`\n    : '(Absolute time ranges can not be saved)';\n\n  const saveTimeRangeMessage = `Save current time range as new default ${currentTimeRangeText}`;\n\n  const saveVariableMessage = `Save current variable values as new default (${\n    modifiedVariableNames.length > 0 ? modifiedVariableNames.join(', ') : 'No modified variables'\n  })`;\n\n  const refreshIntervalDisplay = DEFAULT_REFRESH_INTERVAL_OPTIONS.some((i) => i.display === refreshInterval)\n    ? refreshInterval\n    : DEFAULT_REFRESH_INTERVAL_OPTIONS.find((i) => i.value.pastDuration === refreshInterval)?.display;\n\n  const saveRefreshIntervalMessage = `Save current refresh interval as new default ${refreshIntervalDisplay ? `(${refreshIntervalDisplay})` : 'refresh interval not modified'}`;\n\n  return (\n    <Dialog open={isOpen}>\n      {dialog !== undefined && (\n        <>\n          <Dialog.Header onClose={() => dialog.onCancel()}>Save Dashboard</Dialog.Header>\n\n          <Dialog.Content>\n            <Typography marginBottom={2}>{dialog.description || SAVE_DEFAULTS_DIALOG_TEXT}</Typography>\n            <FormGroup>\n              <FormControlLabel\n                control={\n                  <Checkbox\n                    disabled={!isSavedDurationModified || !isRelativeTimeRange(timeRange)}\n                    checked={saveDefaultTimeRange && isSavedDurationModified && isRelativeTimeRange(timeRange)}\n                    onChange={(e: React.ChangeEvent<HTMLInputElement>) => setSaveDefaultTimeRange(e.target.checked)}\n                  />\n                }\n                label={saveTimeRangeMessage}\n              />\n              <FormControlLabel\n                control={\n                  <Checkbox\n                    disabled={!isSavedRefreshIntervalModified}\n                    checked={saveDefaultRefreshInterval && isSavedRefreshIntervalModified}\n                    onChange={(e: React.ChangeEvent<HTMLInputElement>) => setDefaultRefreshInterval(e.target.checked)}\n                  />\n                }\n                label={saveRefreshIntervalMessage}\n              />\n              <FormControlLabel\n                control={\n                  <Checkbox\n                    disabled={!isSavedVariableModified}\n                    checked={saveDefaultVariables && isSavedVariableModified}\n                    onChange={(e: React.ChangeEvent<HTMLInputElement>) => setSaveDefaultVariables(e.target.checked)}\n                  />\n                }\n                label={saveVariableMessage}\n              />\n            </FormGroup>\n          </Dialog.Content>\n\n          <Dialog.Actions>\n            <Dialog.PrimaryButton\n              onClick={() => {\n                return dialog.onSaveChanges(saveDefaultTimeRange, saveDefaultRefreshInterval, saveDefaultVariables);\n              }}\n            >\n              Save Changes\n            </Dialog.PrimaryButton>\n            <Dialog.SecondaryButton onClick={() => dialog.onCancel()}>Cancel</Dialog.SecondaryButton>\n          </Dialog.Actions>\n        </>\n      )}\n    </Dialog>\n  );\n};\n"],"names":["useState","Checkbox","FormGroup","FormControlLabel","Typography","DEFAULT_REFRESH_INTERVAL_OPTIONS","useTimeRange","isRelativeTimeRange","Dialog","useSaveChangesConfirmationDialog","useVariableDefinitionActions","SAVE_DEFAULTS_DIALOG_TEXT","SaveChangesConfirmationDialog","saveChangesConfirmationDialog","dialog","isSavedDurationModified","isSavedVariableModified","isSavedRefreshIntervalModified","saveDefaultTimeRange","setSaveDefaultTimeRange","saveDefaultVariables","setSaveDefaultVariables","saveDefaultRefreshInterval","setDefaultRefreshInterval","getSavedVariablesStatus","modifiedVariableNames","isOpen","undefined","timeRange","refreshInterval","currentTimeRangeText","pastDuration","saveTimeRangeMessage","saveVariableMessage","length","join","refreshIntervalDisplay","some","i","display","find","value","saveRefreshIntervalMessage","open","Header","onClose","onCancel","Content","marginBottom","description","control","disabled","checked","onChange","e","target","label","Actions","PrimaryButton","onClick","onSaveChanges","SecondaryButton"],"mappings":"AAAA,oCAAoC;AACpC,kEAAkE;AAClE,mEAAmE;AACnE,0CAA0C;AAC1C,EAAE;AACF,6CAA6C;AAC7C,EAAE;AACF,sEAAsE;AACtE,oEAAoE;AACpE,2EAA2E;AAC3E,sEAAsE;AACtE,iCAAiC;;AAEjC,SAAuBA,QAAQ,QAAQ,QAAQ;AAC/C,SAASC,QAAQ,EAAEC,SAAS,EAAEC,gBAAgB,EAAEC,UAAU,QAAQ,gBAAgB;AAClF,SAASC,gCAAgC,EAAEC,YAAY,QAAQ,4BAA4B;AAC3F,SAASC,mBAAmB,QAAQ,mBAAmB;AACvD,SAASC,MAAM,QAAQ,yBAAyB;AAChD,SAASC,gCAAgC,EAAEC,4BAA4B,QAAQ,gBAAgB;AAE/F,MAAMC,4BACJ;AAEF,OAAO,MAAMC,gCAAgC;IAC3C,MAAM,EAAEC,+BAA+BC,MAAM,EAAE,GAAGL;IAClD,MAAMM,0BAA0BD,QAAQC,2BAA2B;IACnE,MAAMC,0BAA0BF,QAAQE,2BAA2B;IACnE,MAAMC,iCAAiCH,QAAQG,kCAAkC;IAEjF,MAAM,CAACC,sBAAsBC,wBAAwB,GAAGnB,SAASe;IACjE,MAAM,CAACK,sBAAsBC,wBAAwB,GAAGrB,SAASgB;IACjE,MAAM,CAACM,4BAA4BC,0BAA0B,GAAGvB,SAASiB;IAEzE,MAAM,EAAEO,uBAAuB,EAAE,GAAGd;IACpC,MAAM,EAAEe,qBAAqB,EAAE,GAAGD;IAElC,MAAME,SAASZ,WAAWa;IAE1B,MAAM,EAAEC,SAAS,EAAEC,eAAe,EAAE,GAAGvB;IAEvC,MAAMwB,uBAAuBvB,oBAAoBqB,aAC7C,CAAC,MAAM,EAAEA,UAAUG,YAAY,CAAC,CAAC,CAAC,GAClC;IAEJ,MAAMC,uBAAuB,CAAC,uCAAuC,EAAEF,sBAAsB;IAE7F,MAAMG,sBAAsB,CAAC,6CAA6C,EACxER,sBAAsBS,MAAM,GAAG,IAAIT,sBAAsBU,IAAI,CAAC,QAAQ,wBACvE,CAAC,CAAC;IAEH,MAAMC,yBAAyB/B,iCAAiCgC,IAAI,CAAC,CAACC,IAAMA,EAAEC,OAAO,KAAKV,mBACtFA,kBACAxB,iCAAiCmC,IAAI,CAAC,CAACF,IAAMA,EAAEG,KAAK,CAACV,YAAY,KAAKF,kBAAkBU;IAE5F,MAAMG,6BAA6B,CAAC,6CAA6C,EAAEN,yBAAyB,CAAC,CAAC,EAAEA,uBAAuB,CAAC,CAAC,GAAG,iCAAiC;IAE7K,qBACE,KAAC5B;QAAOmC,MAAMjB;kBACXZ,WAAWa,2BACV;;8BACE,KAACnB,OAAOoC,MAAM;oBAACC,SAAS,IAAM/B,OAAOgC,QAAQ;8BAAI;;8BAEjD,MAACtC,OAAOuC,OAAO;;sCACb,KAAC3C;4BAAW4C,cAAc;sCAAIlC,OAAOmC,WAAW,IAAItC;;sCACpD,MAACT;;8CACC,KAACC;oCACC+C,uBACE,KAACjD;wCACCkD,UAAU,CAACpC,2BAA2B,CAACR,oBAAoBqB;wCAC3DwB,SAASlC,wBAAwBH,2BAA2BR,oBAAoBqB;wCAChFyB,UAAU,CAACC,IAA2CnC,wBAAwBmC,EAAEC,MAAM,CAACH,OAAO;;oCAGlGI,OAAOxB;;8CAET,KAAC7B;oCACC+C,uBACE,KAACjD;wCACCkD,UAAU,CAAClC;wCACXmC,SAAS9B,8BAA8BL;wCACvCoC,UAAU,CAACC,IAA2C/B,0BAA0B+B,EAAEC,MAAM,CAACH,OAAO;;oCAGpGI,OAAOd;;8CAET,KAACvC;oCACC+C,uBACE,KAACjD;wCACCkD,UAAU,CAACnC;wCACXoC,SAAShC,wBAAwBJ;wCACjCqC,UAAU,CAACC,IAA2CjC,wBAAwBiC,EAAEC,MAAM,CAACH,OAAO;;oCAGlGI,OAAOvB;;;;;;8BAKb,MAACzB,OAAOiD,OAAO;;sCACb,KAACjD,OAAOkD,aAAa;4BACnBC,SAAS;gCACP,OAAO7C,OAAO8C,aAAa,CAAC1C,sBAAsBI,4BAA4BF;4BAChF;sCACD;;sCAGD,KAACZ,OAAOqD,eAAe;4BAACF,SAAS,IAAM7C,OAAOgC,QAAQ;sCAAI;;;;;;;AAMtE,EAAE"}

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

@@ -1 +1 @@
-{"version":3,"file":"SaveDashboardButton.d.ts","sourceRoot":"","sources":["../../../src/components/SaveDashboardButton/SaveDashboardButton.tsx"],"names":[],"mappings":"AAaA,OAAO,EAAE,YAAY,EAAY,MAAM,OAAO,CAAC;AAC/C,OAAO,EAAU,WAAW,EAAE,MAAM,eAAe,CAAC;AAGpD,OAAO,EACL,eAAe,EAKhB,MAAM,eAAe,CAAC;AAEvB,MAAM,WAAW,wBAAyB,SAAQ,IAAI,CAAC,WAAW,EAAE,WAAW,CAAC;IAC9E,MAAM,CAAC,EAAE,eAAe,CAAC;IACzB,UAAU,EAAE,OAAO,CAAC;IACpB,OAAO,CAAC,EAAE,WAAW,GAAG,MAAM,GAAG,UAAU,CAAC;CAC7C;AAED,eAAO,MAAM,mBAAmB,qCAI7B,wBAAwB,KAAG,YA8D7B,CAAC"}
+{"version":3,"file":"SaveDashboardButton.d.ts","sourceRoot":"","sources":["../../../src/components/SaveDashboardButton/SaveDashboardButton.tsx"],"names":[],"mappings":"AAaA,OAAO,EAAE,YAAY,EAAY,MAAM,OAAO,CAAC;AAC/C,OAAO,EAAU,WAAW,EAAE,MAAM,eAAe,CAAC;AAGpD,OAAO,EACL,eAAe,EAKhB,MAAM,eAAe,CAAC;AAEvB,MAAM,WAAW,wBAAyB,SAAQ,IAAI,CAAC,WAAW,EAAE,WAAW,CAAC;IAC9E,MAAM,CAAC,EAAE,eAAe,CAAC;IACzB,UAAU,EAAE,OAAO,CAAC;IACpB,OAAO,CAAC,EAAE,WAAW,GAAG,MAAM,GAAG,UAAU,CAAC;CAC7C;AAED,eAAO,MAAM,mBAAmB,qCAI7B,wBAAwB,KAAG,YAoE7B,CAAC"}

package/dist/components/SaveDashboardButton/SaveDashboardButton.js

@@ -21,24 +21,28 @@ export const SaveDashboardButton = ({ onSave, isDisabled, variant = 'contained'
     const { dashboard, setDashboard } = useDashboard();
     const { getSavedVariablesStatus, setVariableDefaultValues } = useVariableDefinitionActions();
     const { isSavedVariableModified } = getSavedVariablesStatus();
-    const { timeRange } = useTimeRange();
+    const { timeRange, refreshInterval } = useTimeRange();
     const { setEditMode } = useEditMode();
     const { openSaveChangesConfirmationDialog, closeSaveChangesConfirmationDialog } = useSaveChangesConfirmationDialog();
     const onSaveButtonClick = ()=>{
         const isSavedDurationModified = isRelativeTimeRange(timeRange) && dashboard.spec.duration !== timeRange.pastDuration;
+        const isSavedRefreshIntervalModified = dashboard.spec.refreshInterval !== refreshInterval;
         // Save dashboard
         // - if active timeRange from plugin-system is relative and different from currently saved
         // - or if the saved variables are different from currently saved
-        if (isSavedDurationModified || isSavedVariableModified) {
+        if (isSavedDurationModified || isSavedVariableModified || isSavedRefreshIntervalModified) {
             openSaveChangesConfirmationDialog({
-                onSaveChanges: (saveDefaultTimeRange, saveDefaultVariables)=>{
-                    if (isRelativeTimeRange(timeRange) && saveDefaultTimeRange === true) {
+                onSaveChanges: (saveDefaultTimeRange, saveDefaultRefreshInterval, saveDefaultVariables)=>{
+                    if (isRelativeTimeRange(timeRange) && saveDefaultTimeRange) {
                         dashboard.spec.duration = timeRange.pastDuration;
                     }
-                    if (saveDefaultVariables === true) {
+                    if (saveDefaultVariables) {
                         const variables = setVariableDefaultValues();
                         dashboard.spec.variables = variables;
                     }
+                    if (saveDefaultRefreshInterval && isSavedRefreshIntervalModified) {
+                        dashboard.spec.refreshInterval = refreshInterval;
+                    }
                     setDashboard(dashboard);
                     saveDashboard();
                 },
@@ -46,7 +50,8 @@ export const SaveDashboardButton = ({ onSave, isDisabled, variant = 'contained'
                     closeSaveChangesConfirmationDialog();
                 },
                 isSavedDurationModified,
-                isSavedVariableModified
+                isSavedVariableModified,
+                isSavedRefreshIntervalModified
             });
         } else {
             saveDashboard();

package/dist/components/SaveDashboardButton/SaveDashboardButton.js.map

@@ -1 +1 @@
-{"version":3,"sources":["../../../src/components/SaveDashboardButton/SaveDashboardButton.tsx"],"sourcesContent":["// Copyright 2024 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, ButtonProps } from '@mui/material';\nimport { isRelativeTimeRange } from '@perses-dev/core';\nimport { useTimeRange } from '@perses-dev/plugin-system';\nimport {\n  OnSaveDashboard,\n  useDashboard,\n  useEditMode,\n  useSaveChangesConfirmationDialog,\n  useVariableDefinitionActions,\n} from '../../context';\n\nexport interface SaveDashboardButtonProps extends Pick<ButtonProps, 'fullWidth'> {\n  onSave?: OnSaveDashboard;\n  isDisabled: boolean;\n  variant?: 'contained' | 'text' | 'outlined';\n}\n\nexport const SaveDashboardButton = ({\n  onSave,\n  isDisabled,\n  variant = 'contained',\n}: SaveDashboardButtonProps): ReactElement => {\n  const [isSavingDashboard, setSavingDashboard] = useState<boolean>(false);\n  const { dashboard, setDashboard } = useDashboard();\n  const { getSavedVariablesStatus, setVariableDefaultValues } = useVariableDefinitionActions();\n  const { isSavedVariableModified } = getSavedVariablesStatus();\n  const { timeRange } = useTimeRange();\n  const { setEditMode } = useEditMode();\n  const { openSaveChangesConfirmationDialog, closeSaveChangesConfirmationDialog } = useSaveChangesConfirmationDialog();\n\n  const onSaveButtonClick = (): void => {\n    const isSavedDurationModified =\n      isRelativeTimeRange(timeRange) && dashboard.spec.duration !== timeRange.pastDuration;\n\n    // Save dashboard\n    // - if active timeRange from plugin-system is relative and different from currently saved\n    // - or if the saved variables are different from currently saved\n    if (isSavedDurationModified || isSavedVariableModified) {\n      openSaveChangesConfirmationDialog({\n        onSaveChanges: (saveDefaultTimeRange, saveDefaultVariables) => {\n          if (isRelativeTimeRange(timeRange) && saveDefaultTimeRange === true) {\n            dashboard.spec.duration = timeRange.pastDuration;\n          }\n          if (saveDefaultVariables === true) {\n            const variables = setVariableDefaultValues();\n            dashboard.spec.variables = variables;\n          }\n          setDashboard(dashboard);\n          saveDashboard();\n        },\n        onCancel: () => {\n          closeSaveChangesConfirmationDialog();\n        },\n        isSavedDurationModified,\n        isSavedVariableModified,\n      });\n    } else {\n      saveDashboard();\n    }\n  };\n\n  const saveDashboard = async (): Promise<void> => {\n    if (onSave) {\n      try {\n        setSavingDashboard(true);\n        await onSave(dashboard);\n        closeSaveChangesConfirmationDialog();\n        setEditMode(false);\n      } catch (error) {\n        throw new Error(`An error occurred while saving the dashboard. ${error}`);\n      } finally {\n        setSavingDashboard(false);\n      }\n    } else {\n      setEditMode(false);\n    }\n  };\n\n  return (\n    <Button variant={variant} onClick={onSaveButtonClick} disabled={isDisabled || isSavingDashboard}>\n      Save\n    </Button>\n  );\n};\n"],"names":["useState","Button","isRelativeTimeRange","useTimeRange","useDashboard","useEditMode","useSaveChangesConfirmationDialog","useVariableDefinitionActions","SaveDashboardButton","onSave","isDisabled","variant","isSavingDashboard","setSavingDashboard","dashboard","setDashboard","getSavedVariablesStatus","setVariableDefaultValues","isSavedVariableModified","timeRange","setEditMode","openSaveChangesConfirmationDialog","closeSaveChangesConfirmationDialog","onSaveButtonClick","isSavedDurationModified","spec","duration","pastDuration","onSaveChanges","saveDefaultTimeRange","saveDefaultVariables","variables","saveDashboard","onCancel","error","Error","onClick","disabled"],"mappings":"AAAA,oCAAoC;AACpC,kEAAkE;AAClE,mEAAmE;AACnE,0CAA0C;AAC1C,EAAE;AACF,6CAA6C;AAC7C,EAAE;AACF,sEAAsE;AACtE,oEAAoE;AACpE,2EAA2E;AAC3E,sEAAsE;AACtE,iCAAiC;;AAEjC,SAAuBA,QAAQ,QAAQ,QAAQ;AAC/C,SAASC,MAAM,QAAqB,gBAAgB;AACpD,SAASC,mBAAmB,QAAQ,mBAAmB;AACvD,SAASC,YAAY,QAAQ,4BAA4B;AACzD,SAEEC,YAAY,EACZC,WAAW,EACXC,gCAAgC,EAChCC,4BAA4B,QACvB,gBAAgB;AAQvB,OAAO,MAAMC,sBAAsB,CAAC,EAClCC,MAAM,EACNC,UAAU,EACVC,UAAU,WAAW,EACI;IACzB,MAAM,CAACC,mBAAmBC,mBAAmB,GAAGb,SAAkB;IAClE,MAAM,EAAEc,SAAS,EAAEC,YAAY,EAAE,GAAGX;IACpC,MAAM,EAAEY,uBAAuB,EAAEC,wBAAwB,EAAE,GAAGV;IAC9D,MAAM,EAAEW,uBAAuB,EAAE,GAAGF;IACpC,MAAM,EAAEG,SAAS,EAAE,GAAGhB;IACtB,MAAM,EAAEiB,WAAW,EAAE,GAAGf;IACxB,MAAM,EAAEgB,iCAAiC,EAAEC,kCAAkC,EAAE,GAAGhB;IAElF,MAAMiB,oBAAoB;QACxB,MAAMC,0BACJtB,oBAAoBiB,cAAcL,UAAUW,IAAI,CAACC,QAAQ,KAAKP,UAAUQ,YAAY;QAEtF,iBAAiB;QACjB,0FAA0F;QAC1F,iEAAiE;QACjE,IAAIH,2BAA2BN,yBAAyB;YACtDG,kCAAkC;gBAChCO,eAAe,CAACC,sBAAsBC;oBACpC,IAAI5B,oBAAoBiB,cAAcU,yBAAyB,MAAM;wBACnEf,UAAUW,IAAI,CAACC,QAAQ,GAAGP,UAAUQ,YAAY;oBAClD;oBACA,IAAIG,yBAAyB,MAAM;wBACjC,MAAMC,YAAYd;wBAClBH,UAAUW,IAAI,CAACM,SAAS,GAAGA;oBAC7B;oBACAhB,aAAaD;oBACbkB;gBACF;gBACAC,UAAU;oBACRX;gBACF;gBACAE;gBACAN;YACF;QACF,OAAO;YACLc;QACF;IACF;IAEA,MAAMA,gBAAgB;QACpB,IAAIvB,QAAQ;YACV,IAAI;gBACFI,mBAAmB;gBACnB,MAAMJ,OAAOK;gBACbQ;gBACAF,YAAY;YACd,EAAE,OAAOc,OAAO;gBACd,MAAM,IAAIC,MAAM,CAAC,8CAA8C,EAAED,OAAO;YAC1E,SAAU;gBACRrB,mBAAmB;YACrB;QACF,OAAO;YACLO,YAAY;QACd;IACF;IAEA,qBACE,KAACnB;QAAOU,SAASA;QAASyB,SAASb;QAAmBc,UAAU3B,cAAcE;kBAAmB;;AAIrG,EAAE"}
+{"version":3,"sources":["../../../src/components/SaveDashboardButton/SaveDashboardButton.tsx"],"sourcesContent":["// Copyright 2024 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, ButtonProps } from '@mui/material';\nimport { isRelativeTimeRange } from '@perses-dev/core';\nimport { useTimeRange } from '@perses-dev/plugin-system';\nimport {\n  OnSaveDashboard,\n  useDashboard,\n  useEditMode,\n  useSaveChangesConfirmationDialog,\n  useVariableDefinitionActions,\n} from '../../context';\n\nexport interface SaveDashboardButtonProps extends Pick<ButtonProps, 'fullWidth'> {\n  onSave?: OnSaveDashboard;\n  isDisabled: boolean;\n  variant?: 'contained' | 'text' | 'outlined';\n}\n\nexport const SaveDashboardButton = ({\n  onSave,\n  isDisabled,\n  variant = 'contained',\n}: SaveDashboardButtonProps): ReactElement => {\n  const [isSavingDashboard, setSavingDashboard] = useState<boolean>(false);\n  const { dashboard, setDashboard } = useDashboard();\n  const { getSavedVariablesStatus, setVariableDefaultValues } = useVariableDefinitionActions();\n  const { isSavedVariableModified } = getSavedVariablesStatus();\n  const { timeRange, refreshInterval } = useTimeRange();\n  const { setEditMode } = useEditMode();\n  const { openSaveChangesConfirmationDialog, closeSaveChangesConfirmationDialog } = useSaveChangesConfirmationDialog();\n\n  const onSaveButtonClick = (): void => {\n    const isSavedDurationModified =\n      isRelativeTimeRange(timeRange) && dashboard.spec.duration !== timeRange.pastDuration;\n\n    const isSavedRefreshIntervalModified = dashboard.spec.refreshInterval !== refreshInterval;\n\n    // Save dashboard\n    // - if active timeRange from plugin-system is relative and different from currently saved\n    // - or if the saved variables are different from currently saved\n    if (isSavedDurationModified || isSavedVariableModified || isSavedRefreshIntervalModified) {\n      openSaveChangesConfirmationDialog({\n        onSaveChanges: (saveDefaultTimeRange, saveDefaultRefreshInterval, saveDefaultVariables) => {\n          if (isRelativeTimeRange(timeRange) && saveDefaultTimeRange) {\n            dashboard.spec.duration = timeRange.pastDuration;\n          }\n          if (saveDefaultVariables) {\n            const variables = setVariableDefaultValues();\n            dashboard.spec.variables = variables;\n          }\n          if (saveDefaultRefreshInterval && isSavedRefreshIntervalModified) {\n            dashboard.spec.refreshInterval = refreshInterval;\n          }\n          setDashboard(dashboard);\n          saveDashboard();\n        },\n        onCancel: () => {\n          closeSaveChangesConfirmationDialog();\n        },\n        isSavedDurationModified,\n        isSavedVariableModified,\n        isSavedRefreshIntervalModified,\n      });\n    } else {\n      saveDashboard();\n    }\n  };\n\n  const saveDashboard = async (): Promise<void> => {\n    if (onSave) {\n      try {\n        setSavingDashboard(true);\n        await onSave(dashboard);\n        closeSaveChangesConfirmationDialog();\n        setEditMode(false);\n      } catch (error) {\n        throw new Error(`An error occurred while saving the dashboard. ${error}`);\n      } finally {\n        setSavingDashboard(false);\n      }\n    } else {\n      setEditMode(false);\n    }\n  };\n\n  return (\n    <Button variant={variant} onClick={onSaveButtonClick} disabled={isDisabled || isSavingDashboard}>\n      Save\n    </Button>\n  );\n};\n"],"names":["useState","Button","isRelativeTimeRange","useTimeRange","useDashboard","useEditMode","useSaveChangesConfirmationDialog","useVariableDefinitionActions","SaveDashboardButton","onSave","isDisabled","variant","isSavingDashboard","setSavingDashboard","dashboard","setDashboard","getSavedVariablesStatus","setVariableDefaultValues","isSavedVariableModified","timeRange","refreshInterval","setEditMode","openSaveChangesConfirmationDialog","closeSaveChangesConfirmationDialog","onSaveButtonClick","isSavedDurationModified","spec","duration","pastDuration","isSavedRefreshIntervalModified","onSaveChanges","saveDefaultTimeRange","saveDefaultRefreshInterval","saveDefaultVariables","variables","saveDashboard","onCancel","error","Error","onClick","disabled"],"mappings":"AAAA,oCAAoC;AACpC,kEAAkE;AAClE,mEAAmE;AACnE,0CAA0C;AAC1C,EAAE;AACF,6CAA6C;AAC7C,EAAE;AACF,sEAAsE;AACtE,oEAAoE;AACpE,2EAA2E;AAC3E,sEAAsE;AACtE,iCAAiC;;AAEjC,SAAuBA,QAAQ,QAAQ,QAAQ;AAC/C,SAASC,MAAM,QAAqB,gBAAgB;AACpD,SAASC,mBAAmB,QAAQ,mBAAmB;AACvD,SAASC,YAAY,QAAQ,4BAA4B;AACzD,SAEEC,YAAY,EACZC,WAAW,EACXC,gCAAgC,EAChCC,4BAA4B,QACvB,gBAAgB;AAQvB,OAAO,MAAMC,sBAAsB,CAAC,EAClCC,MAAM,EACNC,UAAU,EACVC,UAAU,WAAW,EACI;IACzB,MAAM,CAACC,mBAAmBC,mBAAmB,GAAGb,SAAkB;IAClE,MAAM,EAAEc,SAAS,EAAEC,YAAY,EAAE,GAAGX;IACpC,MAAM,EAAEY,uBAAuB,EAAEC,wBAAwB,EAAE,GAAGV;IAC9D,MAAM,EAAEW,uBAAuB,EAAE,GAAGF;IACpC,MAAM,EAAEG,SAAS,EAAEC,eAAe,EAAE,GAAGjB;IACvC,MAAM,EAAEkB,WAAW,EAAE,GAAGhB;IACxB,MAAM,EAAEiB,iCAAiC,EAAEC,kCAAkC,EAAE,GAAGjB;IAElF,MAAMkB,oBAAoB;QACxB,MAAMC,0BACJvB,oBAAoBiB,cAAcL,UAAUY,IAAI,CAACC,QAAQ,KAAKR,UAAUS,YAAY;QAEtF,MAAMC,iCAAiCf,UAAUY,IAAI,CAACN,eAAe,KAAKA;QAE1E,iBAAiB;QACjB,0FAA0F;QAC1F,iEAAiE;QACjE,IAAIK,2BAA2BP,2BAA2BW,gCAAgC;YACxFP,kCAAkC;gBAChCQ,eAAe,CAACC,sBAAsBC,4BAA4BC;oBAChE,IAAI/B,oBAAoBiB,cAAcY,sBAAsB;wBAC1DjB,UAAUY,IAAI,CAACC,QAAQ,GAAGR,UAAUS,YAAY;oBAClD;oBACA,IAAIK,sBAAsB;wBACxB,MAAMC,YAAYjB;wBAClBH,UAAUY,IAAI,CAACQ,SAAS,GAAGA;oBAC7B;oBACA,IAAIF,8BAA8BH,gCAAgC;wBAChEf,UAAUY,IAAI,CAACN,eAAe,GAAGA;oBACnC;oBACAL,aAAaD;oBACbqB;gBACF;gBACAC,UAAU;oBACRb;gBACF;gBACAE;gBACAP;gBACAW;YACF;QACF,OAAO;YACLM;QACF;IACF;IAEA,MAAMA,gBAAgB;QACpB,IAAI1B,QAAQ;YACV,IAAI;gBACFI,mBAAmB;gBACnB,MAAMJ,OAAOK;gBACbS;gBACAF,YAAY;YACd,EAAE,OAAOgB,OAAO;gBACd,MAAM,IAAIC,MAAM,CAAC,8CAA8C,EAAED,OAAO;YAC1E,SAAU;gBACRxB,mBAAmB;YACrB;QACF,OAAO;YACLQ,YAAY;QACd;IACF;IAEA,qBACE,KAACpB;QAAOU,SAASA;QAAS4B,SAASf;QAAmBgB,UAAU9B,cAAcE;kBAAmB;;AAIrG,EAAE"}

package/dist/components/Variables/EditVariablesButton.d.ts.map

@@ -1 +1 @@
-{"version":3,"file":"EditVariablesButton.d.ts","sourceRoot":"","sources":["../../../src/components/Variables/EditVariablesButton.tsx"],"names":[],"mappings":"AAaA,OAAO,EAAE,YAAY,EAAY,MAAM,OAAO,CAAC;AAC/C,OAAO,EAAU,WAAW,EAAE,MAAM,eAAe,CAAC;AAcpD,MAAM,WAAW,wBAAyB,SAAQ,IAAI,CAAC,WAAW,EAAE,WAAW,CAAC;IAC9E;;OAEG;IACH,OAAO,CAAC,EAAE,MAAM,GAAG,UAAU,CAAC;IAE9B;;OAEG;IACH,KAAK,CAAC,EAAE,SAAS,GAAG,WAAW,CAAC;IAEhC;;OAEG;IACH,KAAK,CAAC,EAAE,MAAM,CAAC;CAChB;AAED,wBAAgB,mBAAmB,CAAC,EAClC,OAAgB,EAChB,KAAmB,EACnB,KAAiB,EACjB,SAAS,GACV,EAAE,wBAAwB,GAAG,YAAY,CAiDzC"}
+{"version":3,"file":"EditVariablesButton.d.ts","sourceRoot":"","sources":["../../../src/components/Variables/EditVariablesButton.tsx"],"names":[],"mappings":"AAaA,OAAO,EAAE,YAAY,EAAY,MAAM,OAAO,CAAC;AAC/C,OAAO,EAAU,WAAW,EAAE,MAAM,eAAe,CAAC;AASpD,MAAM,WAAW,wBAAyB,SAAQ,IAAI,CAAC,WAAW,EAAE,WAAW,CAAC;IAC9E;;OAEG;IACH,OAAO,CAAC,EAAE,MAAM,GAAG,UAAU,CAAC;IAE9B;;OAEG;IACH,KAAK,CAAC,EAAE,SAAS,GAAG,WAAW,CAAC;IAEhC;;OAEG;IACH,KAAK,CAAC,EAAE,MAAM,CAAC;CAChB;AAED,wBAAgB,mBAAmB,CAAC,EAClC,OAAgB,EAChB,KAAmB,EACnB,KAAiB,EACjB,SAAS,GACV,EAAE,wBAAwB,GAAG,YAAY,CAiDzC"}

package/dist/components/Variables/EditVariablesButton.js.map

@@ -1 +1 @@
-{"version":3,"sources":["../../../src/components/Variables/EditVariablesButton.tsx"],"sourcesContent":["// Copyright 2024 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, ButtonProps } from '@mui/material';\nimport PencilIcon from 'mdi-material-ui/PencilOutline';\nimport { Drawer, InfoTooltip } from '@perses-dev/components';\nimport { BuiltinVariableDefinition, VariableDefinition } from '@perses-dev/core';\nimport { useBuiltinVariableDefinitions } from '@perses-dev/plugin-system';\nimport { TOOLTIP_TEXT, editButtonStyle } from '../../constants';\nimport {\n  ExternalVariableDefinition,\n  useExternalVariableDefinitions,\n  useVariableDefinitionActions,\n  useVariableDefinitions,\n} from '../../context';\nimport { VariableEditor } from './VariableEditor';\n\nexport interface EditVariablesButtonProps extends Pick<ButtonProps, 'fullWidth'> {\n  /**\n   * The variant to use to display the button.\n   */\n  variant?: 'text' | 'outlined';\n\n  /**\n   * The color to use to display the button.\n   */\n  color?: 'primary' | 'secondary';\n\n  /**\n   * The label used inside the button.\n   */\n  label?: string;\n}\n\nexport function EditVariablesButton({\n  variant = 'text',\n  label = 'Variables',\n  color = 'primary',\n  fullWidth,\n}: EditVariablesButtonProps): ReactElement {\n  const [isVariableEditorOpen, setIsVariableEditorOpen] = useState(false);\n  const variableDefinitions: VariableDefinition[] = useVariableDefinitions();\n  const externalVariableDefinitions: ExternalVariableDefinition[] = useExternalVariableDefinitions();\n  const builtinVariableDefinitions: BuiltinVariableDefinition[] = useBuiltinVariableDefinitions();\n  const { setVariableDefinitions } = useVariableDefinitionActions();\n\n  const openVariableEditor = (): void => {\n    setIsVariableEditorOpen(true);\n  };\n\n  const closeVariableEditor = (): void => {\n    setIsVariableEditorOpen(false);\n  };\n\n  return (\n    <>\n      <InfoTooltip description={TOOLTIP_TEXT.editVariables}>\n        <Button\n          startIcon={<PencilIcon />}\n          onClick={openVariableEditor}\n          aria-label={TOOLTIP_TEXT.editVariables}\n          variant={variant}\n          color={color}\n          fullWidth={fullWidth}\n          sx={editButtonStyle}\n        >\n          {label}\n        </Button>\n      </InfoTooltip>\n      <Drawer\n        isOpen={isVariableEditorOpen}\n        onClose={closeVariableEditor}\n        PaperProps={{ sx: { width: '50%' } }}\n        data-testid=\"variable-editor\"\n      >\n        <VariableEditor\n          variableDefinitions={variableDefinitions}\n          externalVariableDefinitions={externalVariableDefinitions}\n          builtinVariableDefinitions={builtinVariableDefinitions}\n          onCancel={closeVariableEditor}\n          onChange={(variables: VariableDefinition[]) => {\n            setVariableDefinitions(variables);\n            setIsVariableEditorOpen(false);\n          }}\n        />\n      </Drawer>\n    </>\n  );\n}\n"],"names":["useState","Button","PencilIcon","Drawer","InfoTooltip","useBuiltinVariableDefinitions","TOOLTIP_TEXT","editButtonStyle","useExternalVariableDefinitions","useVariableDefinitionActions","useVariableDefinitions","VariableEditor","EditVariablesButton","variant","label","color","fullWidth","isVariableEditorOpen","setIsVariableEditorOpen","variableDefinitions","externalVariableDefinitions","builtinVariableDefinitions","setVariableDefinitions","openVariableEditor","closeVariableEditor","description","editVariables","startIcon","onClick","aria-label","sx","isOpen","onClose","PaperProps","width","data-testid","onCancel","onChange","variables"],"mappings":"AAAA,oCAAoC;AACpC,kEAAkE;AAClE,mEAAmE;AACnE,0CAA0C;AAC1C,EAAE;AACF,6CAA6C;AAC7C,EAAE;AACF,sEAAsE;AACtE,oEAAoE;AACpE,2EAA2E;AAC3E,sEAAsE;AACtE,iCAAiC;;AAEjC,SAAuBA,QAAQ,QAAQ,QAAQ;AAC/C,SAASC,MAAM,QAAqB,gBAAgB;AACpD,OAAOC,gBAAgB,gCAAgC;AACvD,SAASC,MAAM,EAAEC,WAAW,QAAQ,yBAAyB;AAE7D,SAASC,6BAA6B,QAAQ,4BAA4B;AAC1E,SAASC,YAAY,EAAEC,eAAe,QAAQ,kBAAkB;AAChE,SAEEC,8BAA8B,EAC9BC,4BAA4B,EAC5BC,sBAAsB,QACjB,gBAAgB;AACvB,SAASC,cAAc,QAAQ,mBAAmB;AAmBlD,OAAO,SAASC,oBAAoB,EAClCC,UAAU,MAAM,EAChBC,QAAQ,WAAW,EACnBC,QAAQ,SAAS,EACjBC,SAAS,EACgB;IACzB,MAAM,CAACC,sBAAsBC,wBAAwB,GAAGlB,SAAS;IACjE,MAAMmB,sBAA4CT;IAClD,MAAMU,8BAA4DZ;IAClE,MAAMa,6BAA0DhB;IAChE,MAAM,EAAEiB,sBAAsB,EAAE,GAAGb;IAEnC,MAAMc,qBAAqB;QACzBL,wBAAwB;IAC1B;IAEA,MAAMM,sBAAsB;QAC1BN,wBAAwB;IAC1B;IAEA,qBACE;;0BACE,KAACd;gBAAYqB,aAAanB,aAAaoB,aAAa;0BAClD,cAAA,KAACzB;oBACC0B,yBAAW,KAACzB;oBACZ0B,SAASL;oBACTM,cAAYvB,aAAaoB,aAAa;oBACtCb,SAASA;oBACTE,OAAOA;oBACPC,WAAWA;oBACXc,IAAIvB;8BAEHO;;;0BAGL,KAACX;gBACC4B,QAAQd;gBACRe,SAASR;gBACTS,YAAY;oBAAEH,IAAI;wBAAEI,OAAO;oBAAM;gBAAE;gBACnCC,eAAY;0BAEZ,cAAA,KAACxB;oBACCQ,qBAAqBA;oBACrBC,6BAA6BA;oBAC7BC,4BAA4BA;oBAC5Be,UAAUZ;oBACVa,UAAU,CAACC;wBACThB,uBAAuBgB;wBACvBpB,wBAAwB;oBAC1B;;;;;AAKV"}
+{"version":3,"sources":["../../../src/components/Variables/EditVariablesButton.tsx"],"sourcesContent":["// Copyright 2024 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, ButtonProps } from '@mui/material';\nimport PencilIcon from 'mdi-material-ui/PencilOutline';\nimport { Drawer, InfoTooltip } from '@perses-dev/components';\nimport { BuiltinVariableDefinition, VariableDefinition, ExternalVariableDefinition } from '@perses-dev/core';\nimport { useBuiltinVariableDefinitions } from '@perses-dev/plugin-system';\nimport { TOOLTIP_TEXT, editButtonStyle } from '../../constants';\nimport { useExternalVariableDefinitions, useVariableDefinitionActions, useVariableDefinitions } from '../../context';\nimport { VariableEditor } from './VariableEditor';\n\nexport interface EditVariablesButtonProps extends Pick<ButtonProps, 'fullWidth'> {\n  /**\n   * The variant to use to display the button.\n   */\n  variant?: 'text' | 'outlined';\n\n  /**\n   * The color to use to display the button.\n   */\n  color?: 'primary' | 'secondary';\n\n  /**\n   * The label used inside the button.\n   */\n  label?: string;\n}\n\nexport function EditVariablesButton({\n  variant = 'text',\n  label = 'Variables',\n  color = 'primary',\n  fullWidth,\n}: EditVariablesButtonProps): ReactElement {\n  const [isVariableEditorOpen, setIsVariableEditorOpen] = useState(false);\n  const variableDefinitions: VariableDefinition[] = useVariableDefinitions();\n  const externalVariableDefinitions: ExternalVariableDefinition[] = useExternalVariableDefinitions();\n  const builtinVariableDefinitions: BuiltinVariableDefinition[] = useBuiltinVariableDefinitions();\n  const { setVariableDefinitions } = useVariableDefinitionActions();\n\n  const openVariableEditor = (): void => {\n    setIsVariableEditorOpen(true);\n  };\n\n  const closeVariableEditor = (): void => {\n    setIsVariableEditorOpen(false);\n  };\n\n  return (\n    <>\n      <InfoTooltip description={TOOLTIP_TEXT.editVariables}>\n        <Button\n          startIcon={<PencilIcon />}\n          onClick={openVariableEditor}\n          aria-label={TOOLTIP_TEXT.editVariables}\n          variant={variant}\n          color={color}\n          fullWidth={fullWidth}\n          sx={editButtonStyle}\n        >\n          {label}\n        </Button>\n      </InfoTooltip>\n      <Drawer\n        isOpen={isVariableEditorOpen}\n        onClose={closeVariableEditor}\n        PaperProps={{ sx: { width: '50%' } }}\n        data-testid=\"variable-editor\"\n      >\n        <VariableEditor\n          variableDefinitions={variableDefinitions}\n          externalVariableDefinitions={externalVariableDefinitions}\n          builtinVariableDefinitions={builtinVariableDefinitions}\n          onCancel={closeVariableEditor}\n          onChange={(variables: VariableDefinition[]) => {\n            setVariableDefinitions(variables);\n            setIsVariableEditorOpen(false);\n          }}\n        />\n      </Drawer>\n    </>\n  );\n}\n"],"names":["useState","Button","PencilIcon","Drawer","InfoTooltip","useBuiltinVariableDefinitions","TOOLTIP_TEXT","editButtonStyle","useExternalVariableDefinitions","useVariableDefinitionActions","useVariableDefinitions","VariableEditor","EditVariablesButton","variant","label","color","fullWidth","isVariableEditorOpen","setIsVariableEditorOpen","variableDefinitions","externalVariableDefinitions","builtinVariableDefinitions","setVariableDefinitions","openVariableEditor","closeVariableEditor","description","editVariables","startIcon","onClick","aria-label","sx","isOpen","onClose","PaperProps","width","data-testid","onCancel","onChange","variables"],"mappings":"AAAA,oCAAoC;AACpC,kEAAkE;AAClE,mEAAmE;AACnE,0CAA0C;AAC1C,EAAE;AACF,6CAA6C;AAC7C,EAAE;AACF,sEAAsE;AACtE,oEAAoE;AACpE,2EAA2E;AAC3E,sEAAsE;AACtE,iCAAiC;;AAEjC,SAAuBA,QAAQ,QAAQ,QAAQ;AAC/C,SAASC,MAAM,QAAqB,gBAAgB;AACpD,OAAOC,gBAAgB,gCAAgC;AACvD,SAASC,MAAM,EAAEC,WAAW,QAAQ,yBAAyB;AAE7D,SAASC,6BAA6B,QAAQ,4BAA4B;AAC1E,SAASC,YAAY,EAAEC,eAAe,QAAQ,kBAAkB;AAChE,SAASC,8BAA8B,EAAEC,4BAA4B,EAAEC,sBAAsB,QAAQ,gBAAgB;AACrH,SAASC,cAAc,QAAQ,mBAAmB;AAmBlD,OAAO,SAASC,oBAAoB,EAClCC,UAAU,MAAM,EAChBC,QAAQ,WAAW,EACnBC,QAAQ,SAAS,EACjBC,SAAS,EACgB;IACzB,MAAM,CAACC,sBAAsBC,wBAAwB,GAAGlB,SAAS;IACjE,MAAMmB,sBAA4CT;IAClD,MAAMU,8BAA4DZ;IAClE,MAAMa,6BAA0DhB;IAChE,MAAM,EAAEiB,sBAAsB,EAAE,GAAGb;IAEnC,MAAMc,qBAAqB;QACzBL,wBAAwB;IAC1B;IAEA,MAAMM,sBAAsB;QAC1BN,wBAAwB;IAC1B;IAEA,qBACE;;0BACE,KAACd;gBAAYqB,aAAanB,aAAaoB,aAAa;0BAClD,cAAA,KAACzB;oBACC0B,yBAAW,KAACzB;oBACZ0B,SAASL;oBACTM,cAAYvB,aAAaoB,aAAa;oBACtCb,SAASA;oBACTE,OAAOA;oBACPC,WAAWA;oBACXc,IAAIvB;8BAEHO;;;0BAGL,KAACX;gBACC4B,QAAQd;gBACRe,SAASR;gBACTS,YAAY;oBAAEH,IAAI;wBAAEI,OAAO;oBAAM;gBAAE;gBACnCC,eAAY;0BAEZ,cAAA,KAACxB;oBACCQ,qBAAqBA;oBACrBC,6BAA6BA;oBAC7BC,4BAA4BA;oBAC5Be,UAAUZ;oBACVa,UAAU,CAACC;wBACThB,uBAAuBgB;wBACvBpB,wBAAwB;oBAC1B;;;;;AAKV"}

package/dist/components/Variables/ListVariableListBox.d.ts

@@ -0,0 +1,16 @@
+import React, { ReactNode } from 'react';
+import { VariableOption } from '@perses-dev/plugin-system';
+export interface ListVariableListBoxContextValue {
+    options: VariableOption[];
+    selectedOptions: VariableOption[];
+    filteredOptions: VariableOption[];
+    allowAllValue: boolean;
+    onChange: (selectedOptions: VariableOption[]) => void;
+}
+export declare function useListVariableListBoxContext(): ListVariableListBoxContextValue;
+export declare function ListVariableListBoxProvider({ value, children, }: {
+    value: ListVariableListBoxContextValue;
+    children: ReactNode;
+}): React.ReactElement;
+export declare const ListVariableListBox: React.ForwardRefExoticComponent<React.HTMLAttributes<HTMLUListElement> & React.RefAttributes<HTMLUListElement>>;
+//# sourceMappingURL=ListVariableListBox.d.ts.map

package/dist/components/Variables/ListVariableListBox.d.ts.map

@@ -0,0 +1 @@
+{"version":3,"file":"ListVariableListBox.d.ts","sourceRoot":"","sources":["../../../src/components/Variables/ListVariableListBox.tsx"],"names":[],"mappings":"AAaA,OAAO,KAAK,EAAE,EAAgC,SAAS,EAAmC,MAAM,OAAO,CAAC;AAExG,OAAO,EAAE,cAAc,EAAE,MAAM,2BAA2B,CAAC;AAG3D,MAAM,WAAW,+BAA+B;IAC9C,OAAO,EAAE,cAAc,EAAE,CAAC;IAC1B,eAAe,EAAE,cAAc,EAAE,CAAC;IAClC,eAAe,EAAE,cAAc,EAAE,CAAC;IAClC,aAAa,EAAE,OAAO,CAAC;IACvB,QAAQ,EAAE,CAAC,eAAe,EAAE,cAAc,EAAE,KAAK,IAAI,CAAC;CACvD;AAID,wBAAgB,6BAA6B,IAAI,+BAA+B,CAI/E;AAmED,wBAAgB,2BAA2B,CAAC,EAC1C,KAAK,EACL,QAAQ,GACT,EAAE;IACD,KAAK,EAAE,+BAA+B,CAAC;IACvC,QAAQ,EAAE,SAAS,CAAC;CACrB,GAAG,KAAK,CAAC,YAAY,CAErB;AAED,eAAO,MAAM,mBAAmB,iHA0C9B,CAAC"}