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

package/dist/cjs/context/DashboardProvider/DashboardProviderWithQueryParams.js

@@ -1,4 +1,4 @@
-// Copyright 2024 The Perses Authors
+// Copyright 2025 The Perses Authors
 // Licensed under the Apache License, Version 2.0 (the "License");
 // you may not use this file except in compliance with the License.
 // You may obtain a copy of the License at
@@ -21,37 +21,15 @@ Object.defineProperty(exports, "DashboardProviderWithQueryParams", {
     }
 });
 const _jsxruntime = require("react/jsx-runtime");
-const _zod = require("zod");
-const _react = require("react");
-const _nuqs = require("nuqs");
+const _usequeryparams = require("use-query-params");
 const _DashboardProvider = require("./DashboardProvider");
 function DashboardProviderWithQueryParams({ children, initialState }) {
-    const [viewPanelRef, setViewPanelRef] = (0, _nuqs.useQueryState)('viewPanelRef', (0, _nuqs.parseAsJson)(_zod.z.object({
-        ref: _zod.z.string(),
-        repeatVariable: _zod.z.tuple([
-            _zod.z.string(),
-            _zod.z.string()
-        ]).optional()
-    }).optional()));
-    // nuqs returns null when the query param is not present, but our state expects undefined when not present
-    const viewPanelRefNotNull = (0, _react.useMemo)(()=>{
-        return viewPanelRef ?? undefined;
-    }, [
-        viewPanelRef
-    ]);
-    const handleSetViewPanelRef = (0, _react.useCallback)((panelRef)=>{
-        if (panelRef) {
-            return setViewPanelRef(panelRef);
-        }
-        return setViewPanelRef(null);
-    }, [
-        setViewPanelRef
-    ]);
+    const [viewPanelRef, setViewPanelRef] = (0, _usequeryparams.useQueryParam)('viewPanelRef', _usequeryparams.JsonParam);
     return /*#__PURE__*/ (0, _jsxruntime.jsx)(_DashboardProvider.DashboardProvider, {
         initialState: {
             ...initialState,
-            viewPanelRef: viewPanelRefNotNull,
-            setViewPanelRef: handleSetViewPanelRef
+            viewPanelRef: viewPanelRef ?? undefined,
+            setViewPanelRef: setViewPanelRef
         },
         children: children
     });

package/dist/cjs/context/DashboardProvider/duplicate-panel-slice.js

@@ -49,7 +49,7 @@ function createDuplicatePanelSlice() {
                     if (matchingLayout === undefined) {
                         throw new Error(`Cannot find layout for Panel with key '${panelKey}'`);
                     }
-                    const dupePanelKey = (0, _panelUtils.getValidPanelKey)(panelKey, panels);
+                    const dupePanelKey = crypto.randomUUID().replaceAll('-', '');
                     state.panels[dupePanelKey] = panelToDupe;
                     const duplicateLayout = {
                         i: (0, _common.generateId)().toString(),

package/dist/cjs/context/DashboardProvider/panel-editor-slice.js

@@ -110,8 +110,7 @@ function createPanelEditorSlice() {
                         panelDefinition: get().initialValues?.panelDefinition ?? (0, _common.createPanelDefinition)()
                     },
                     applyChanges: (next)=>{
-                        const name = next.panelDefinition.spec.display.name;
-                        const panelKey = (0, _utils.getValidPanelKey)(name, get().panels);
+                        const panelKey = crypto.randomUUID().replaceAll('-', '');
                         set((state)=>{
                             // Add a panel
                             state.panels[panelKey] = next.panelDefinition;

package/dist/cjs/context/PanelEditorProvider/PanelEditorProvider.js

@@ -0,0 +1,49 @@
+// 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.
+"use strict";
+Object.defineProperty(exports, "__esModule", {
+    value: true
+});
+function _export(target, all) {
+    for(var name in all)Object.defineProperty(target, name, {
+        enumerable: true,
+        get: all[name]
+    });
+}
+_export(exports, {
+    PanelEditorContext: function() {
+        return PanelEditorContext;
+    },
+    PanelEditorProvider: function() {
+        return PanelEditorProvider;
+    }
+});
+const _jsxruntime = require("react/jsx-runtime");
+const _react = require("react");
+const PanelEditorContext = /*#__PURE__*/ (0, _react.createContext)(undefined);
+const PanelEditorProvider = ({ children })=>{
+    const [previewPanelWidth, setPreviewPanelWidth] = (0, _react.useState)(undefined);
+    const ctx = (0, _react.useMemo)(()=>({
+            preview: {
+                previewPanelWidth,
+                setPreviewPanelWidth
+            }
+        }), [
+        previewPanelWidth,
+        setPreviewPanelWidth
+    ]);
+    return /*#__PURE__*/ (0, _jsxruntime.jsx)(PanelEditorContext.Provider, {
+        value: ctx,
+        children: children
+    });
+};

package/dist/cjs/context/PanelEditorProvider/index.js

@@ -0,0 +1,23 @@
+// 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.
+"use strict";
+Object.defineProperty(exports, "__esModule", {
+    value: true
+});
+Object.defineProperty(exports, "PanelEditorContext", {
+    enumerable: true,
+    get: function() {
+        return _PanelEditorProvider.PanelEditorContext;
+    }
+});
+const _PanelEditorProvider = require("./PanelEditorProvider");

package/dist/cjs/context/VariableProvider/query-params.js

@@ -33,14 +33,11 @@ _export(exports, {
     getURLQueryParamName: function() {
         return getURLQueryParamName;
     },
-    parseAsVariableValue: function() {
-        return parseAsVariableValue;
-    },
     useVariableQueryParams: function() {
         return useVariableQueryParams;
     }
 });
-const _nuqs = require("nuqs");
+const _usequeryparams = require("use-query-params");
 const variableQueryParameterPrefix = 'var-';
 function getURLQueryParamName(name) {
     return `${variableQueryParameterPrefix}${name}`;
@@ -49,7 +46,7 @@ function encodeVariableValue(value) {
     if (Array.isArray(value)) {
         return value.join(',');
     }
-    return value ?? '';
+    return value;
 }
 function decodeVariableValue(value) {
     if (!value) {
@@ -61,18 +58,23 @@ function decodeVariableValue(value) {
     }
     return values;
 }
-const parseAsVariableValue = (0, _nuqs.createParser)({
-    parse: decodeVariableValue,
-    serialize: encodeVariableValue
-});
+const VariableValueParam = {
+    encode: encodeVariableValue,
+    decode: (v)=>{
+        if (typeof v === 'string') {
+            return decodeVariableValue(v);
+        }
+        return '';
+    }
+};
 function useVariableQueryParams(defs) {
     const config = {};
     defs.forEach((def)=>{
         const name = getURLQueryParamName(def.spec.name);
-        config[name] = parseAsVariableValue;
+        config[name] = VariableValueParam;
     });
-    return (0, _nuqs.useQueryStates)(config, {
-        history: 'replace'
+    return (0, _usequeryparams.useQueryParams)(config, {
+        updateType: 'replaceIn'
     });
 }
 function getInitalValuesFromQueryParameters(queryParamValues) {

package/dist/cjs/context/index.js

@@ -18,6 +18,7 @@ _export_star(require("./DashboardProvider"), exports);
 _export_star(require("./DatasourceStoreProvider"), exports);
 _export_star(require("./VariableProvider"), exports);
 _export_star(require("./useDashboard"), exports);
+_export_star(require("./PanelEditorProvider"), exports);
 function _export_star(from, to) {
     Object.keys(from).forEach(function(k) {
         if (k !== "default" && !Object.prototype.hasOwnProperty.call(to, k)) {

package/dist/cjs/test/render.js

@@ -28,7 +28,8 @@ const _react = require("@testing-library/react");
 const _history = require("history");
 const _react1 = require("react");
 const _reactrouterdom = require("react-router-dom");
-const _v6 = require("nuqs/adapters/react-router/v6");
+const _usequeryparams = require("use-query-params");
+const _reactrouter6 = require("use-query-params/adapters/react-router-6");
 const _context = require("../context");
 const _test = require("../test");
 const _pluginregistry = require("./plugin-registry");
@@ -62,11 +63,12 @@ function renderWithContext(ui, options, history) {
     });
     const customHistory = history ?? (0, _history.createMemoryHistory)();
     const mockRegistry = (0, _pluginsystem.mockPluginRegistry)(..._pluginregistry.MOCK_PLUGINS);
-    const BaseRender = ()=>/*#__PURE__*/ (0, _jsxruntime.jsx)(_v6.NuqsAdapter, {
-            children: /*#__PURE__*/ (0, _jsxruntime.jsx)(CustomRouter, {
-                history: customHistory,
-                children: /*#__PURE__*/ (0, _jsxruntime.jsx)(_reactquery.QueryClientProvider, {
-                    client: queryClient,
+    const BaseRender = ()=>/*#__PURE__*/ (0, _jsxruntime.jsx)(CustomRouter, {
+            history: customHistory,
+            children: /*#__PURE__*/ (0, _jsxruntime.jsx)(_reactquery.QueryClientProvider, {
+                client: queryClient,
+                children: /*#__PURE__*/ (0, _jsxruntime.jsx)(_usequeryparams.QueryParamProvider, {
+                    adapter: _reactrouter6.ReactRouter6Adapter,
                     children: /*#__PURE__*/ (0, _jsxruntime.jsx)(_components.SnackbarProvider, {
                         anchorOrigin: {
                             vertical: 'bottom',

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

@@ -1 +1 @@
-{"version":3,"file":"DashboardStickyToolbar.d.ts","sourceRoot":"","sources":["../../../src/components/DashboardStickyToolbar/DashboardStickyToolbar.tsx"],"names":[],"mappings":"AAaA,OAAO,EAAE,YAAY,EAAY,MAAM,OAAO,CAAC;AAC/C,OAAO,EAKL,OAAO,EACP,KAAK,EAIN,MAAM,eAAe,CAAC;AAMvB,UAAU,2BAA2B;IACnC,uBAAuB,CAAC,EAAE,OAAO,CAAC;IAClC,EAAE,CAAC,EAAE,OAAO,CAAC,KAAK,CAAC,CAAC;CACrB;AAED,wBAAgB,sBAAsB,CAAC,KAAK,EAAE,2BAA2B,GAAG,YAAY,CAuEvF"}
+{"version":3,"file":"DashboardStickyToolbar.d.ts","sourceRoot":"","sources":["../../../src/components/DashboardStickyToolbar/DashboardStickyToolbar.tsx"],"names":[],"mappings":"AAaA,OAAO,EAAE,YAAY,EAAY,MAAM,OAAO,CAAC;AAC/C,OAAO,EAKL,OAAO,EACP,KAAK,EAIN,MAAM,eAAe,CAAC;AAMvB,UAAU,2BAA2B;IACnC,uBAAuB,CAAC,EAAE,OAAO,CAAC;IAClC,EAAE,CAAC,EAAE,OAAO,CAAC,KAAK,CAAC,CAAC;CACrB;AAED,wBAAgB,sBAAsB,CAAC,KAAK,EAAE,2BAA2B,GAAG,YAAY,CAsEvF"}

package/dist/components/DashboardStickyToolbar/DashboardStickyToolbar.js

@@ -48,8 +48,6 @@ export function DashboardStickyToolbar(props) {
                         display: "flex",
                         flexWrap: !isSticky && isBiggerThanMd ? 'wrap' : 'nowrap',
                         maxWidth: isSticky || !isBiggerThanMd ? '100vw' : '100%',
-                        maxHeight: "150px" // Limit the vertical space used to ~3 rows of variables
-                        ,
                         pt: 1,
                         pl: isSticky ? 1 : 0,
                         mt: isSticky && isBiggerThanMd ? 0.5 : 0,

package/dist/components/DashboardStickyToolbar/DashboardStickyToolbar.js.map

@@ -1 +1 @@
-{"version":3,"sources":["../../../src/components/DashboardStickyToolbar/DashboardStickyToolbar.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 {\n  AppBar,\n  Box,\n  IconButton,\n  Stack,\n  SxProps,\n  Theme,\n  useMediaQuery,\n  useScrollTrigger,\n  useTheme,\n} from '@mui/material';\nimport PinOutline from 'mdi-material-ui/PinOutline';\nimport PinOffOutline from 'mdi-material-ui/PinOffOutline';\nimport { TimeRangeControls } from '@perses-dev/plugin-system';\nimport { VariableList } from '../Variables';\n\ninterface DashboardStickyToolbarProps {\n  initialVariableIsSticky?: boolean;\n  sx?: SxProps<Theme>;\n}\n\nexport function DashboardStickyToolbar(props: DashboardStickyToolbarProps): ReactElement {\n  const [isPin, setIsPin] = useState(props.initialVariableIsSticky);\n\n  const scrollTrigger = useScrollTrigger({ disableHysteresis: true });\n  const isSticky = scrollTrigger && props.initialVariableIsSticky && isPin;\n\n  const isBiggerThanMd = useMediaQuery(useTheme().breakpoints.up('md'));\n\n  return (\n    // marginBottom={-1} counteracts the marginBottom={1} on every variable input.\n    // The margin on the inputs is for spacing between inputs, but is not meant to add space to bottom of the container.\n    <Box marginBottom={-1} data-testid=\"variable-list\">\n      <AppBar\n        color=\"inherit\"\n        position={isSticky ? 'fixed' : 'static'}\n        elevation={isSticky ? 4 : 0}\n        sx={{ backgroundColor: 'inherit', ...props.sx }}\n      >\n        <Box\n          display=\"flex\"\n          justifyContent=\"space-between\"\n          sx={{\n            flexDirection: isBiggerThanMd ? 'row' : 'column',\n          }}\n        >\n          <Box\n            display=\"flex\"\n            flexWrap={!isSticky && isBiggerThanMd ? 'wrap' : 'nowrap'}\n            maxWidth={isSticky || !isBiggerThanMd ? '100vw' : '100%'}\n            maxHeight=\"150px\" // Limit the vertical space used to ~3 rows of variables\n            pt={1}\n            pl={isSticky ? 1 : 0}\n            mt={isSticky && isBiggerThanMd ? 0.5 : 0}\n            ml={isSticky && isBiggerThanMd ? 0.5 : 0}\n            sx={{\n              overflowX: !isSticky && isBiggerThanMd ? 'hidden' : 'auto',\n              // Firefox:\n              scrollbarWidth: 'thin',\n              // Safari and Chrome:\n              '&::-webkit-scrollbar': {\n                height: '8px',\n                backgroundColor: (theme) => theme.palette.grey['300'],\n              },\n              '&::-webkit-scrollbar-thumb': {\n                background: (theme) => theme.palette.grey['600'],\n              },\n            }}\n            gap={1}\n          >\n            <VariableList />\n            {props.initialVariableIsSticky && (\n              <IconButton style={{ width: 'fit-content', height: 'fit-content' }} onClick={() => setIsPin(!isPin)}>\n                {isPin ? <PinOutline /> : <PinOffOutline />}\n              </IconButton>\n            )}\n          </Box>\n          {isSticky && (\n            <Stack\n              m={isBiggerThanMd ? 1.5 : 1}\n              mt={isBiggerThanMd ? 1.5 : 0}\n              ml={isBiggerThanMd ? 1.5 : 'auto'}\n              direction=\"row\"\n              justifyContent=\"end\"\n            >\n              <TimeRangeControls />\n            </Stack>\n          )}\n        </Box>\n      </AppBar>\n    </Box>\n  );\n}\n"],"names":["useState","AppBar","Box","IconButton","Stack","useMediaQuery","useScrollTrigger","useTheme","PinOutline","PinOffOutline","TimeRangeControls","VariableList","DashboardStickyToolbar","props","isPin","setIsPin","initialVariableIsSticky","scrollTrigger","disableHysteresis","isSticky","isBiggerThanMd","breakpoints","up","marginBottom","data-testid","color","position","elevation","sx","backgroundColor","display","justifyContent","flexDirection","flexWrap","maxWidth","maxHeight","pt","pl","mt","ml","overflowX","scrollbarWidth","height","theme","palette","grey","background","gap","style","width","onClick","m","direction"],"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,SACEC,MAAM,EACNC,GAAG,EACHC,UAAU,EACVC,KAAK,EAGLC,aAAa,EACbC,gBAAgB,EAChBC,QAAQ,QACH,gBAAgB;AACvB,OAAOC,gBAAgB,6BAA6B;AACpD,OAAOC,mBAAmB,gCAAgC;AAC1D,SAASC,iBAAiB,QAAQ,4BAA4B;AAC9D,SAASC,YAAY,QAAQ,eAAe;AAO5C,OAAO,SAASC,uBAAuBC,KAAkC;IACvE,MAAM,CAACC,OAAOC,SAAS,GAAGf,SAASa,MAAMG,uBAAuB;IAEhE,MAAMC,gBAAgBX,iBAAiB;QAAEY,mBAAmB;IAAK;IACjE,MAAMC,WAAWF,iBAAiBJ,MAAMG,uBAAuB,IAAIF;IAEnE,MAAMM,iBAAiBf,cAAcE,WAAWc,WAAW,CAACC,EAAE,CAAC;IAE/D,OACE,8EAA8E;IAC9E,oHAAoH;kBACpH,KAACpB;QAAIqB,cAAc,CAAC;QAAGC,eAAY;kBACjC,cAAA,KAACvB;YACCwB,OAAM;YACNC,UAAUP,WAAW,UAAU;YAC/BQ,WAAWR,WAAW,IAAI;YAC1BS,IAAI;gBAAEC,iBAAiB;gBAAW,GAAGhB,MAAMe,EAAE;YAAC;sBAE9C,cAAA,MAAC1B;gBACC4B,SAAQ;gBACRC,gBAAe;gBACfH,IAAI;oBACFI,eAAeZ,iBAAiB,QAAQ;gBAC1C;;kCAEA,MAAClB;wBACC4B,SAAQ;wBACRG,UAAU,CAACd,YAAYC,iBAAiB,SAAS;wBACjDc,UAAUf,YAAY,CAACC,iBAAiB,UAAU;wBAClDe,WAAU,QAAQ,wDAAwD;;wBAC1EC,IAAI;wBACJC,IAAIlB,WAAW,IAAI;wBACnBmB,IAAInB,YAAYC,iBAAiB,MAAM;wBACvCmB,IAAIpB,YAAYC,iBAAiB,MAAM;wBACvCQ,IAAI;4BACFY,WAAW,CAACrB,YAAYC,iBAAiB,WAAW;4BACpD,WAAW;4BACXqB,gBAAgB;4BAChB,qBAAqB;4BACrB,wBAAwB;gCACtBC,QAAQ;gCACRb,iBAAiB,CAACc,QAAUA,MAAMC,OAAO,CAACC,IAAI,CAAC,MAAM;4BACvD;4BACA,8BAA8B;gCAC5BC,YAAY,CAACH,QAAUA,MAAMC,OAAO,CAACC,IAAI,CAAC,MAAM;4BAClD;wBACF;wBACAE,KAAK;;0CAEL,KAACpC;4BACAE,MAAMG,uBAAuB,kBAC5B,KAACb;gCAAW6C,OAAO;oCAAEC,OAAO;oCAAeP,QAAQ;gCAAc;gCAAGQ,SAAS,IAAMnC,SAAS,CAACD;0CAC1FA,sBAAQ,KAACN,gCAAgB,KAACC;;;;oBAIhCU,0BACC,KAACf;wBACC+C,GAAG/B,iBAAiB,MAAM;wBAC1BkB,IAAIlB,iBAAiB,MAAM;wBAC3BmB,IAAInB,iBAAiB,MAAM;wBAC3BgC,WAAU;wBACVrB,gBAAe;kCAEf,cAAA,KAACrB;;;;;;AAOf"}
+{"version":3,"sources":["../../../src/components/DashboardStickyToolbar/DashboardStickyToolbar.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 {\n  AppBar,\n  Box,\n  IconButton,\n  Stack,\n  SxProps,\n  Theme,\n  useMediaQuery,\n  useScrollTrigger,\n  useTheme,\n} from '@mui/material';\nimport PinOutline from 'mdi-material-ui/PinOutline';\nimport PinOffOutline from 'mdi-material-ui/PinOffOutline';\nimport { TimeRangeControls } from '@perses-dev/plugin-system';\nimport { VariableList } from '../Variables';\n\ninterface DashboardStickyToolbarProps {\n  initialVariableIsSticky?: boolean;\n  sx?: SxProps<Theme>;\n}\n\nexport function DashboardStickyToolbar(props: DashboardStickyToolbarProps): ReactElement {\n  const [isPin, setIsPin] = useState(props.initialVariableIsSticky);\n\n  const scrollTrigger = useScrollTrigger({ disableHysteresis: true });\n  const isSticky = scrollTrigger && props.initialVariableIsSticky && isPin;\n\n  const isBiggerThanMd = useMediaQuery(useTheme().breakpoints.up('md'));\n\n  return (\n    // marginBottom={-1} counteracts the marginBottom={1} on every variable input.\n    // The margin on the inputs is for spacing between inputs, but is not meant to add space to bottom of the container.\n    <Box marginBottom={-1} data-testid=\"variable-list\">\n      <AppBar\n        color=\"inherit\"\n        position={isSticky ? 'fixed' : 'static'}\n        elevation={isSticky ? 4 : 0}\n        sx={{ backgroundColor: 'inherit', ...props.sx }}\n      >\n        <Box\n          display=\"flex\"\n          justifyContent=\"space-between\"\n          sx={{\n            flexDirection: isBiggerThanMd ? 'row' : 'column',\n          }}\n        >\n          <Box\n            display=\"flex\"\n            flexWrap={!isSticky && isBiggerThanMd ? 'wrap' : 'nowrap'}\n            maxWidth={isSticky || !isBiggerThanMd ? '100vw' : '100%'}\n            pt={1}\n            pl={isSticky ? 1 : 0}\n            mt={isSticky && isBiggerThanMd ? 0.5 : 0}\n            ml={isSticky && isBiggerThanMd ? 0.5 : 0}\n            sx={{\n              overflowX: !isSticky && isBiggerThanMd ? 'hidden' : 'auto',\n              // Firefox:\n              scrollbarWidth: 'thin',\n              // Safari and Chrome:\n              '&::-webkit-scrollbar': {\n                height: '8px',\n                backgroundColor: (theme) => theme.palette.grey['300'],\n              },\n              '&::-webkit-scrollbar-thumb': {\n                background: (theme) => theme.palette.grey['600'],\n              },\n            }}\n            gap={1}\n          >\n            <VariableList />\n            {props.initialVariableIsSticky && (\n              <IconButton style={{ width: 'fit-content', height: 'fit-content' }} onClick={() => setIsPin(!isPin)}>\n                {isPin ? <PinOutline /> : <PinOffOutline />}\n              </IconButton>\n            )}\n          </Box>\n          {isSticky && (\n            <Stack\n              m={isBiggerThanMd ? 1.5 : 1}\n              mt={isBiggerThanMd ? 1.5 : 0}\n              ml={isBiggerThanMd ? 1.5 : 'auto'}\n              direction=\"row\"\n              justifyContent=\"end\"\n            >\n              <TimeRangeControls />\n            </Stack>\n          )}\n        </Box>\n      </AppBar>\n    </Box>\n  );\n}\n"],"names":["useState","AppBar","Box","IconButton","Stack","useMediaQuery","useScrollTrigger","useTheme","PinOutline","PinOffOutline","TimeRangeControls","VariableList","DashboardStickyToolbar","props","isPin","setIsPin","initialVariableIsSticky","scrollTrigger","disableHysteresis","isSticky","isBiggerThanMd","breakpoints","up","marginBottom","data-testid","color","position","elevation","sx","backgroundColor","display","justifyContent","flexDirection","flexWrap","maxWidth","pt","pl","mt","ml","overflowX","scrollbarWidth","height","theme","palette","grey","background","gap","style","width","onClick","m","direction"],"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,SACEC,MAAM,EACNC,GAAG,EACHC,UAAU,EACVC,KAAK,EAGLC,aAAa,EACbC,gBAAgB,EAChBC,QAAQ,QACH,gBAAgB;AACvB,OAAOC,gBAAgB,6BAA6B;AACpD,OAAOC,mBAAmB,gCAAgC;AAC1D,SAASC,iBAAiB,QAAQ,4BAA4B;AAC9D,SAASC,YAAY,QAAQ,eAAe;AAO5C,OAAO,SAASC,uBAAuBC,KAAkC;IACvE,MAAM,CAACC,OAAOC,SAAS,GAAGf,SAASa,MAAMG,uBAAuB;IAEhE,MAAMC,gBAAgBX,iBAAiB;QAAEY,mBAAmB;IAAK;IACjE,MAAMC,WAAWF,iBAAiBJ,MAAMG,uBAAuB,IAAIF;IAEnE,MAAMM,iBAAiBf,cAAcE,WAAWc,WAAW,CAACC,EAAE,CAAC;IAE/D,OACE,8EAA8E;IAC9E,oHAAoH;kBACpH,KAACpB;QAAIqB,cAAc,CAAC;QAAGC,eAAY;kBACjC,cAAA,KAACvB;YACCwB,OAAM;YACNC,UAAUP,WAAW,UAAU;YAC/BQ,WAAWR,WAAW,IAAI;YAC1BS,IAAI;gBAAEC,iBAAiB;gBAAW,GAAGhB,MAAMe,EAAE;YAAC;sBAE9C,cAAA,MAAC1B;gBACC4B,SAAQ;gBACRC,gBAAe;gBACfH,IAAI;oBACFI,eAAeZ,iBAAiB,QAAQ;gBAC1C;;kCAEA,MAAClB;wBACC4B,SAAQ;wBACRG,UAAU,CAACd,YAAYC,iBAAiB,SAAS;wBACjDc,UAAUf,YAAY,CAACC,iBAAiB,UAAU;wBAClDe,IAAI;wBACJC,IAAIjB,WAAW,IAAI;wBACnBkB,IAAIlB,YAAYC,iBAAiB,MAAM;wBACvCkB,IAAInB,YAAYC,iBAAiB,MAAM;wBACvCQ,IAAI;4BACFW,WAAW,CAACpB,YAAYC,iBAAiB,WAAW;4BACpD,WAAW;4BACXoB,gBAAgB;4BAChB,qBAAqB;4BACrB,wBAAwB;gCACtBC,QAAQ;gCACRZ,iBAAiB,CAACa,QAAUA,MAAMC,OAAO,CAACC,IAAI,CAAC,MAAM;4BACvD;4BACA,8BAA8B;gCAC5BC,YAAY,CAACH,QAAUA,MAAMC,OAAO,CAACC,IAAI,CAAC,MAAM;4BAClD;wBACF;wBACAE,KAAK;;0CAEL,KAACnC;4BACAE,MAAMG,uBAAuB,kBAC5B,KAACb;gCAAW4C,OAAO;oCAAEC,OAAO;oCAAeP,QAAQ;gCAAc;gCAAGQ,SAAS,IAAMlC,SAAS,CAACD;0CAC1FA,sBAAQ,KAACN,gCAAgB,KAACC;;;;oBAIhCU,0BACC,KAACf;wBACC8C,GAAG9B,iBAAiB,MAAM;wBAC1BiB,IAAIjB,iBAAiB,MAAM;wBAC3BkB,IAAIlB,iBAAiB,MAAM;wBAC3B+B,WAAU;wBACVpB,gBAAe;kCAEf,cAAA,KAACrB;;;;;;AAOf"}

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

@@ -1 +1 @@
-{"version":3,"file":"DeletePanelGroupDialog.d.ts","sourceRoot":"","sources":["../../../src/components/DeletePanelGroupDialog/DeletePanelGroupDialog.tsx"],"names":[],"mappings":"AAaA,OAAO,EAAa,YAAY,EAAE,MAAM,OAAO,CAAC;AAKhD,eAAO,MAAM,sBAAsB,QAAO,YA6CzC,CAAC"}
+{"version":3,"file":"DeletePanelGroupDialog.d.ts","sourceRoot":"","sources":["../../../src/components/DeletePanelGroupDialog/DeletePanelGroupDialog.tsx"],"names":[],"mappings":"AAaA,OAAO,EAAa,YAAY,EAAE,MAAM,OAAO,CAAC;AAKhD,eAAO,MAAM,sBAAsB,QAAO,YAmCzC,CAAC"}

package/dist/components/DeletePanelGroupDialog/DeletePanelGroupDialog.js

@@ -11,8 +11,8 @@
 // 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 { IconButton, Dialog, DialogTitle, DialogContent, DialogActions, Button } from '@mui/material';
-import CloseIcon from 'mdi-material-ui/Close';
+import { Dialog } from '@perses-dev/components';
+import { Button } from '@mui/material';
 import { useDeletePanelGroupDialog, useViewPanel } from '../../context';
 export const DeletePanelGroupDialog = ()=>{
     const { deletePanelGroupDialog, closeDeletePanelGroupDialog, deletePanelGroup } = useDeletePanelGroupDialog();
@@ -30,23 +30,13 @@ export const DeletePanelGroupDialog = ()=>{
     return /*#__PURE__*/ _jsxs(Dialog, {
         open: deletePanelGroupDialog !== undefined,
         children: [
-            /*#__PURE__*/ _jsx(DialogTitle, {
+            /*#__PURE__*/ _jsx(Dialog.Header, {
                 children: "Delete Panel Group"
             }),
-            /*#__PURE__*/ _jsx(IconButton, {
-                "aria-label": "Close",
-                onClick: ()=>closeDeletePanelGroupDialog(),
-                sx: (theme)=>({
-                        position: 'absolute',
-                        top: theme.spacing(0.5),
-                        right: theme.spacing(0.5)
-                    }),
-                children: /*#__PURE__*/ _jsx(CloseIcon, {})
-            }),
             /*#__PURE__*/ _jsxs("form", {
                 onSubmit: handleDelete,
                 children: [
-                    /*#__PURE__*/ _jsxs(DialogContent, {
+                    /*#__PURE__*/ _jsxs(Dialog.Content, {
                         dividers: true,
                         sx: {
                             width: '500px'
@@ -57,7 +47,7 @@ export const DeletePanelGroupDialog = ()=>{
                             "? This will delete all the panels within the group."
                         ]
                     }),
-                    /*#__PURE__*/ _jsxs(DialogActions, {
+                    /*#__PURE__*/ _jsxs(Dialog.Actions, {
                         children: [
                             /*#__PURE__*/ _jsx(Button, {
                                 variant: "contained",

package/dist/components/DeletePanelGroupDialog/DeletePanelGroupDialog.js.map

@@ -1 +1 @@
-{"version":3,"sources":["../../../src/components/DeletePanelGroupDialog/DeletePanelGroupDialog.tsx"],"sourcesContent":["// Copyright 2023 The Perses Authors\n// Licensed under the Apache License, Version 2.0 (the \"License\");\n// you may not use this file except in compliance with the License.\n// You may obtain a copy of the License at\n//\n// http://www.apache.org/licenses/LICENSE-2.0\n//\n// Unless required by applicable law or agreed to in writing, software\n// distributed under the License is distributed on an \"AS IS\" BASIS,\n// WITHOUT WARRANTIES OR CONDITIONS OF ANY KIND, either express or implied.\n// See the License for the specific language governing permissions and\n// limitations under the License.\n\nimport { FormEvent, ReactElement } from 'react';\nimport { IconButton, Dialog, DialogTitle, DialogContent, DialogActions, Button } from '@mui/material';\nimport CloseIcon from 'mdi-material-ui/Close';\nimport { useDeletePanelGroupDialog, useViewPanel } from '../../context';\n\nexport const DeletePanelGroupDialog = (): ReactElement => {\n  const { deletePanelGroupDialog, closeDeletePanelGroupDialog, deletePanelGroup } = useDeletePanelGroupDialog();\n  const { setViewPanel } = useViewPanel();\n  const panelGroupId = deletePanelGroupDialog?.panelGroupId;\n\n  const handleDelete = (e: FormEvent): void => {\n    e.preventDefault();\n    if (panelGroupId === undefined) {\n      throw new Error('group index is undefined');\n    }\n    deletePanelGroup(panelGroupId);\n    closeDeletePanelGroupDialog();\n    setViewPanel(undefined);\n  };\n\n  return (\n    <Dialog open={deletePanelGroupDialog !== undefined}>\n      <DialogTitle>Delete Panel Group</DialogTitle>\n      <IconButton\n        aria-label=\"Close\"\n        onClick={() => closeDeletePanelGroupDialog()}\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      <form onSubmit={handleDelete}>\n        <DialogContent dividers sx={{ width: '500px' }}>\n          Are you sure you want to delete {deletePanelGroupDialog?.panelGroupName ?? 'panel group'}? This will delete\n          all the panels within the group.\n        </DialogContent>\n        <DialogActions>\n          <Button variant=\"contained\" type=\"submit\">\n            Delete\n          </Button>\n          <Button variant=\"outlined\" color=\"secondary\" onClick={() => closeDeletePanelGroupDialog()}>\n            Cancel\n          </Button>\n        </DialogActions>\n      </form>\n    </Dialog>\n  );\n};\n"],"names":["IconButton","Dialog","DialogTitle","DialogContent","DialogActions","Button","CloseIcon","useDeletePanelGroupDialog","useViewPanel","DeletePanelGroupDialog","deletePanelGroupDialog","closeDeletePanelGroupDialog","deletePanelGroup","setViewPanel","panelGroupId","handleDelete","e","preventDefault","undefined","Error","open","aria-label","onClick","sx","theme","position","top","spacing","right","form","onSubmit","dividers","width","panelGroupName","variant","type","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;;AAGjC,SAASA,UAAU,EAAEC,MAAM,EAAEC,WAAW,EAAEC,aAAa,EAAEC,aAAa,EAAEC,MAAM,QAAQ,gBAAgB;AACtG,OAAOC,eAAe,wBAAwB;AAC9C,SAASC,yBAAyB,EAAEC,YAAY,QAAQ,gBAAgB;AAExE,OAAO,MAAMC,yBAAyB;IACpC,MAAM,EAAEC,sBAAsB,EAAEC,2BAA2B,EAAEC,gBAAgB,EAAE,GAAGL;IAClF,MAAM,EAAEM,YAAY,EAAE,GAAGL;IACzB,MAAMM,eAAeJ,wBAAwBI;IAE7C,MAAMC,eAAe,CAACC;QACpBA,EAAEC,cAAc;QAChB,IAAIH,iBAAiBI,WAAW;YAC9B,MAAM,IAAIC,MAAM;QAClB;QACAP,iBAAiBE;QACjBH;QACAE,aAAaK;IACf;IAEA,qBACE,MAACjB;QAAOmB,MAAMV,2BAA2BQ;;0BACvC,KAAChB;0BAAY;;0BACb,KAACF;gBACCqB,cAAW;gBACXC,SAAS,IAAMX;gBACfY,IAAI,CAACC,QAAW,CAAA;wBACdC,UAAU;wBACVC,KAAKF,MAAMG,OAAO,CAAC;wBACnBC,OAAOJ,MAAMG,OAAO,CAAC;oBACvB,CAAA;0BAEA,cAAA,KAACrB;;0BAEH,MAACuB;gBAAKC,UAAUf;;kCACd,MAACZ;wBAAc4B,QAAQ;wBAACR,IAAI;4BAAES,OAAO;wBAAQ;;4BAAG;4BACbtB,wBAAwBuB,kBAAkB;4BAAc;;;kCAG3F,MAAC7B;;0CACC,KAACC;gCAAO6B,SAAQ;gCAAYC,MAAK;0CAAS;;0CAG1C,KAAC9B;gCAAO6B,SAAQ;gCAAWE,OAAM;gCAAYd,SAAS,IAAMX;0CAA+B;;;;;;;;AAOrG,EAAE"}
+{"version":3,"sources":["../../../src/components/DeletePanelGroupDialog/DeletePanelGroupDialog.tsx"],"sourcesContent":["// Copyright 2023 The Perses Authors\n// Licensed under the Apache License, Version 2.0 (the \"License\");\n// you may not use this file except in compliance with the License.\n// You may obtain a copy of the License at\n//\n// http://www.apache.org/licenses/LICENSE-2.0\n//\n// Unless required by applicable law or agreed to in writing, software\n// distributed under the License is distributed on an \"AS IS\" BASIS,\n// WITHOUT WARRANTIES OR CONDITIONS OF ANY KIND, either express or implied.\n// See the License for the specific language governing permissions and\n// limitations under the License.\n\nimport { FormEvent, ReactElement } from 'react';\nimport { Dialog } from '@perses-dev/components';\nimport { Button } from '@mui/material';\nimport { useDeletePanelGroupDialog, useViewPanel } from '../../context';\n\nexport const DeletePanelGroupDialog = (): ReactElement => {\n  const { deletePanelGroupDialog, closeDeletePanelGroupDialog, deletePanelGroup } = useDeletePanelGroupDialog();\n  const { setViewPanel } = useViewPanel();\n  const panelGroupId = deletePanelGroupDialog?.panelGroupId;\n\n  const handleDelete = (e: FormEvent): void => {\n    e.preventDefault();\n    if (panelGroupId === undefined) {\n      throw new Error('group index is undefined');\n    }\n    deletePanelGroup(panelGroupId);\n    closeDeletePanelGroupDialog();\n    setViewPanel(undefined);\n  };\n\n  return (\n    <Dialog open={deletePanelGroupDialog !== undefined}>\n      <Dialog.Header>Delete Panel Group</Dialog.Header>\n\n      <form onSubmit={handleDelete}>\n        <Dialog.Content dividers sx={{ width: '500px' }}>\n          Are you sure you want to delete {deletePanelGroupDialog?.panelGroupName ?? 'panel group'}? This will delete\n          all the panels within the group.\n        </Dialog.Content>\n        <Dialog.Actions>\n          <Button variant=\"contained\" type=\"submit\">\n            Delete\n          </Button>\n          <Button variant=\"outlined\" color=\"secondary\" onClick={() => closeDeletePanelGroupDialog()}>\n            Cancel\n          </Button>\n        </Dialog.Actions>\n      </form>\n    </Dialog>\n  );\n};\n"],"names":["Dialog","Button","useDeletePanelGroupDialog","useViewPanel","DeletePanelGroupDialog","deletePanelGroupDialog","closeDeletePanelGroupDialog","deletePanelGroup","setViewPanel","panelGroupId","handleDelete","e","preventDefault","undefined","Error","open","Header","form","onSubmit","Content","dividers","sx","width","panelGroupName","Actions","variant","type","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;;AAGjC,SAASA,MAAM,QAAQ,yBAAyB;AAChD,SAASC,MAAM,QAAQ,gBAAgB;AACvC,SAASC,yBAAyB,EAAEC,YAAY,QAAQ,gBAAgB;AAExE,OAAO,MAAMC,yBAAyB;IACpC,MAAM,EAAEC,sBAAsB,EAAEC,2BAA2B,EAAEC,gBAAgB,EAAE,GAAGL;IAClF,MAAM,EAAEM,YAAY,EAAE,GAAGL;IACzB,MAAMM,eAAeJ,wBAAwBI;IAE7C,MAAMC,eAAe,CAACC;QACpBA,EAAEC,cAAc;QAChB,IAAIH,iBAAiBI,WAAW;YAC9B,MAAM,IAAIC,MAAM;QAClB;QACAP,iBAAiBE;QACjBH;QACAE,aAAaK;IACf;IAEA,qBACE,MAACb;QAAOe,MAAMV,2BAA2BQ;;0BACvC,KAACb,OAAOgB,MAAM;0BAAC;;0BAEf,MAACC;gBAAKC,UAAUR;;kCACd,MAACV,OAAOmB,OAAO;wBAACC,QAAQ;wBAACC,IAAI;4BAAEC,OAAO;wBAAQ;;4BAAG;4BACdjB,wBAAwBkB,kBAAkB;4BAAc;;;kCAG3F,MAACvB,OAAOwB,OAAO;;0CACb,KAACvB;gCAAOwB,SAAQ;gCAAYC,MAAK;0CAAS;;0CAG1C,KAACzB;gCAAOwB,SAAQ;gCAAWE,OAAM;gCAAYC,SAAS,IAAMtB;0CAA+B;;;;;;;;AAOrG,EAAE"}

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,EAAE,gBAAgB,EAA6D,MAAM,eAAe,CAAC;AAC5G,OAAO,EAAqB,YAAY,EAAE,MAAM,UAAU,CAAC;AAG3D,MAAM,WAAW,oBAAoB;IACnC,gBAAgB,EAAE,gBAAgB,CAAC;IACnC,KAAK,EAAE,MAAM,CAAC;IACd,YAAY,CAAC,EAAE,YAAY,CAAC;CAC7B;AAED;;GAEG;AACH,wBAAgB,eAAe,CAAC,KAAK,EAAE,oBAAoB,GAAG,YAAY,CA8IzE"}
+{"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,EAAE,gBAAgB,EAA6D,MAAM,eAAe,CAAC;AAC5G,OAAO,EAAqB,YAAY,EAAE,MAAM,UAAU,CAAC;AAI3D,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"}

package/dist/components/GridLayout/GridItemContent.js

@@ -11,13 +11,14 @@
 // 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, Button, Dialog, DialogActions, DialogContent, DialogTitle, Divider } from '@mui/material';
+import { Box } from '@mui/material';
 import { useInView } from 'react-intersection-observer';
-import { DataQueriesProvider, PluginSpecEditor, usePlugin, useSuggestedStepMs } from '@perses-dev/plugin-system';
+import { DataQueriesProvider, usePlugin, useSuggestedStepMs } from '@perses-dev/plugin-system';
 import React, { useMemo, useState } from 'react';
 import { useEditMode, usePanel, usePanelActions, useViewPanelGroup } from '../../context';
 import { Panel } from '../Panel';
 import { isPanelGroupItemIdEqual } from '../../context/DashboardProvider/panel-group-slice';
+import { QueryViewerDialog } from '../QueryViewerDialog';
 /**
  * Resolves the reference to panel content in a GridItemDefinition and renders the panel.
  */ export function GridItemContent(props) {
@@ -73,38 +74,6 @@ import { isPanelGroupItemIdEqual } from '../../context/DashboardProvider/panel-g
         };
     });
     const pluginQueryOptions = typeof plugin?.queryOptions === 'function' ? plugin?.queryOptions(panelDefinition.spec.plugin.spec) : plugin?.queryOptions;
-    const queryRows = useMemo(()=>{
-        if (!queries?.length) return null;
-        const queryItems = [];
-        queries.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 < queries.length - 1 && /*#__PURE__*/ _jsx(Divider, {
-                            sx: {
-                                my: 2
-                            }
-                        })
-                    ]
-                }, `query-${index}`));
-            }
-        });
-        return queryItems;
-    }, [
-        queries
-    ]);
-    const onCloseHandler = ()=>{
-        setOpenQueryViewer(false);
-    };
     return /*#__PURE__*/ _jsxs(Box, {
         ref: ref,
         sx: {
@@ -112,38 +81,6 @@ import { isPanelGroupItemIdEqual } from '../../context/DashboardProvider/panel-g
             height: '100%'
         },
         children: [
-            /*#__PURE__*/ _jsxs(Dialog, {
-                fullWidth: true,
-                PaperProps: {
-                    sx: {
-                        margin: '10px',
-                        width: 'calc(100% - 20px)'
-                    }
-                },
-                maxWidth: "lg",
-                open: openQueryViewer,
-                children: [
-                    /*#__PURE__*/ _jsx(DialogTitle, {
-                        children: "Query Viewer"
-                    }),
-                    /*#__PURE__*/ _jsx(DialogContent, {
-                        children: /*#__PURE__*/ _jsx(Box, {
-                            sx: {
-                                padding: '5px'
-                            },
-                            children: queryRows
-                        })
-                    }),
-                    /*#__PURE__*/ _jsx(DialogActions, {
-                        children: /*#__PURE__*/ _jsx(Button, {
-                            variant: "outlined",
-                            onClick: onCloseHandler,
-                            color: "primary",
-                            children: "Close"
-                        })
-                    })
-                ]
-            }),
             /*#__PURE__*/ _jsx(DataQueriesProvider, {
                 definitions: definitions,
                 options: {
@@ -161,6 +98,11 @@ import { isPanelGroupItemIdEqual } from '../../context/DashboardProvider/panel-g
                     panelOptions: props.panelOptions,
                     panelGroupItemId: panelGroupItemId
                 })
+            }),
+            /*#__PURE__*/ _jsx(QueryViewerDialog, {
+                open: openQueryViewer,
+                queryDefinitions: queryDefinitions,
+                onClose: ()=>setOpenQueryViewer(false)
             })
         ]
     });

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

@@ -1 +1 @@
-{"version":3,"sources":["../../../src/components/GridLayout/GridItemContent.tsx"],"sourcesContent":["// Copyright 2023 The Perses Authors\n// Licensed under the Apache License, Version 2.0 (the \"License\");\n// you may not use this file except in compliance with the License.\n// You may obtain a copy of the License at\n//\n// http://www.apache.org/licenses/LICENSE-2.0\n//\n// Unless required by applicable law or agreed to in writing, software\n// distributed under the License is distributed on an \"AS IS\" BASIS,\n// WITHOUT WARRANTIES OR CONDITIONS OF ANY KIND, either express or implied.\n// See the License for the specific language governing permissions and\n// limitations under the License.\n\nimport { Box, Button, Dialog, DialogActions, DialogContent, DialogTitle, Divider } from '@mui/material';\nimport { useInView } from 'react-intersection-observer';\nimport { DataQueriesProvider, PluginSpecEditor, usePlugin, useSuggestedStepMs } from '@perses-dev/plugin-system';\nimport React, { ReactElement, useMemo, useState } from 'react';\nimport { PanelGroupItemId, useEditMode, usePanel, usePanelActions, useViewPanelGroup } from '../../context';\nimport { Panel, PanelProps, PanelOptions } from '../Panel';\nimport { isPanelGroupItemIdEqual } from '../../context/DashboardProvider/panel-group-slice';\n\nexport interface GridItemContentProps {\n  panelGroupItemId: PanelGroupItemId;\n  width: number; // necessary for determining the suggested step ms\n  panelOptions?: PanelOptions;\n}\n\n/**\n * Resolves the reference to panel content in a GridItemDefinition and renders the panel.\n */\nexport function GridItemContent(props: GridItemContentProps): ReactElement {\n  const { panelGroupItemId, width } = props;\n  const panelDefinition = usePanel(panelGroupItemId);\n\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  const queryRows = useMemo(() => {\n    if (!queries?.length) return null;\n\n    const queryItems: ReactElement[] = [];\n    queries.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 < queries.length - 1 && <Divider sx={{ my: 2 }} />}\n          </React.Fragment>\n        );\n      }\n    });\n\n    return queryItems;\n  }, [queries]);\n\n  const onCloseHandler = (): void => {\n    setOpenQueryViewer(false);\n  };\n\n  return (\n    <Box\n      ref={ref}\n      sx={{\n        width: '100%',\n        height: '100%',\n      }}\n    >\n      <Dialog\n        fullWidth\n        PaperProps={{\n          sx: {\n            margin: '10px',\n            width: 'calc(100% - 20px)',\n          },\n        }}\n        maxWidth=\"lg\"\n        open={openQueryViewer}\n      >\n        <DialogTitle>Query Viewer</DialogTitle>\n        <DialogContent>\n          <Box sx={{ padding: '5px' }}>{queryRows}</Box>\n        </DialogContent>\n        <DialogActions>\n          <Button variant=\"outlined\" onClick={onCloseHandler} color=\"primary\">\n            Close\n          </Button>\n        </DialogActions>\n      </Dialog>\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    </Box>\n  );\n}\n"],"names":["Box","Button","Dialog","DialogActions","DialogContent","DialogTitle","Divider","useInView","DataQueriesProvider","PluginSpecEditor","usePlugin","useSuggestedStepMs","React","useMemo","useState","useEditMode","usePanel","usePanelActions","useViewPanelGroup","Panel","isPanelGroupItemIdEqual","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","queryRows","queryItems","forEach","index","push","Fragment","value","pluginSelection","type","onChange","isReadonly","sx","my","onCloseHandler","height","fullWidth","PaperProps","margin","maxWidth","open","padding","variant","color","options","enabled","definition","panelOptions"],"mappings":"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"}
+{"version":3,"sources":["../../../src/components/GridLayout/GridItemContent.tsx"],"sourcesContent":["// Copyright 2023 The Perses Authors\n// Licensed under the Apache License, Version 2.0 (the \"License\");\n// you may not use this file except in compliance with the License.\n// You may obtain a copy of the License at\n//\n// http://www.apache.org/licenses/LICENSE-2.0\n//\n// Unless required by applicable law or agreed to in writing, software\n// distributed under the License is distributed on an \"AS IS\" BASIS,\n// WITHOUT WARRANTIES OR CONDITIONS OF ANY KIND, either express or implied.\n// See the License for the specific language governing permissions and\n// limitations under the License.\n\nimport { Box } from '@mui/material';\nimport { useInView } from 'react-intersection-observer';\nimport { DataQueriesProvider, usePlugin, useSuggestedStepMs } from '@perses-dev/plugin-system';\nimport React, { ReactElement, useMemo, useState } from 'react';\nimport { PanelGroupItemId, useEditMode, usePanel, usePanelActions, useViewPanelGroup } from '../../context';\nimport { Panel, PanelProps, PanelOptions } from '../Panel';\nimport { isPanelGroupItemIdEqual } from '../../context/DashboardProvider/panel-group-slice';\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","useEditMode","usePanel","usePanelActions","useViewPanelGroup","Panel","isPanelGroupItemIdEqual","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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"}

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

@@ -1,7 +1,8 @@
 import { DashboardResource, EphemeralDashboardResource } from '@perses-dev/core';
 import { ReactElement, ReactNode } from 'react';
+import type { BlockerFunction } from '@remix-run/router';
 export interface LeaveDialogProps {
-    isBlocked: boolean;
+    isBlocked: BlockerFunction | boolean;
     message: string;
 }
 export declare function Prompt({ isBlocked, message }: LeaveDialogProps): ReactElement;

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;AAU3D,MAAM,WAAW,gBAAgB;IAC/B,SAAS,EAAE,OAAO,CAAC;IACnB,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,CAOZ"}
+{"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"}

package/dist/components/LeaveDialog/LeaveDialog.js

@@ -52,8 +52,17 @@ const handleRouteChange = (event)=>{
 /*
  * LeaveDialog prompts the user with a confirmation dialog when they attempt to leave the page with unsaved changes.
  */ export function LeaveDialog({ original, current }) {
+    const handleIsBlocked = (ctx)=>{
+        if (JSON.stringify(original) !== JSON.stringify(current)) {
+            // Only block navigation if the pathname is changing (=> ignore search params changes)
+            if (ctx.currentLocation.pathname !== ctx.nextLocation.pathname) {
+                return true;
+            }
+        }
+        return false;
+    };
     return /*#__PURE__*/ _jsx(Prompt, {
-        isBlocked: JSON.stringify(original) !== JSON.stringify(current),
+        isBlocked: handleIsBlocked,
         message: "You have unsaved changes, are you sure you want to leave?"
     });
 }

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

@@ -1 +1 @@
-{"version":3,"sources":["../../../src/components/LeaveDialog/LeaveDialog.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 { DashboardResource, EphemeralDashboardResource } from '@perses-dev/core';\nimport { ReactElement, ReactNode, useEffect } from 'react';\nimport { useBlocker } from 'react-router-dom';\nimport { DiscardChangesConfirmationDialog } from '@perses-dev/components';\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: 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  return (\n    <Prompt\n      isBlocked={JSON.stringify(original) !== JSON.stringify(current)}\n      message=\"You have unsaved changes, are you sure you want to leave?\"\n    />\n  );\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","JSON","stringify"],"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;;AAGjC,SAAkCA,SAAS,QAAQ,QAAQ;AAC3D,SAASC,UAAU,QAAQ,mBAAmB;AAC9C,SAASC,gCAAgC,QAAQ,yBAAyB;AAE1E,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,qBACE,KAACpB;QACCC,WAAWoB,KAAKC,SAAS,CAACH,cAAcE,KAAKC,SAAS,CAACF;QACvDlB,SAAQ;;AAGd"}
+{"version":3,"sources":["../../../src/components/LeaveDialog/LeaveDialog.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 { 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,oCAAoC;AACpC,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"}

package/dist/components/PanelDrawer/PanelEditorForm.d.ts.map

@@ -1 +1 @@
-{"version":3,"file":"PanelEditorForm.d.ts","sourceRoot":"","sources":["../../../src/components/PanelDrawer/PanelEditorForm.tsx"],"names":[],"mappings":"AAaA,OAAO,EAAE,YAAY,EAA4C,MAAM,OAAO,CAAC;AAE/E,OAAO,EAAE,MAAM,EAA+C,iBAAiB,EAAE,MAAM,kBAAkB,CAAC;AAoB1G,MAAM,WAAW,oBAAoB;IACnC,aAAa,EAAE,iBAAiB,CAAC;IACjC,aAAa,EAAE,MAAM,CAAC;IACtB,MAAM,EAAE,CAAC,MAAM,EAAE,iBAAiB,KAAK,IAAI,CAAC;IAC5C,OAAO,EAAE,MAAM,IAAI,CAAC;CACrB;AAED,wBAAgB,eAAe,CAAC,KAAK,EAAE,oBAAoB,GAAG,YAAY,CA+OzE;AAED;;GAEG;AACH,eAAO,MAAM,iBAAiB,sBAAsB,CAAC"}
+{"version":3,"file":"PanelEditorForm.d.ts","sourceRoot":"","sources":["../../../src/components/PanelDrawer/PanelEditorForm.tsx"],"names":[],"mappings":"AAaA,OAAO,EAAE,YAAY,EAA4C,MAAM,OAAO,CAAC;AAE/E,OAAO,EAAE,MAAM,EAA+C,iBAAiB,EAAE,MAAM,kBAAkB,CAAC;AAqB1G,MAAM,WAAW,oBAAoB;IACnC,aAAa,EAAE,iBAAiB,CAAC;IACjC,aAAa,EAAE,MAAM,CAAC;IACtB,MAAM,EAAE,CAAC,MAAM,EAAE,iBAAiB,KAAK,IAAI,CAAC;IAC5C,OAAO,EAAE,MAAM,IAAI,CAAC;CACrB;AAED,wBAAgB,eAAe,CAAC,KAAK,EAAE,oBAAoB,GAAG,YAAY,CAkPzE;AAED;;GAEG;AACH,eAAO,MAAM,iBAAiB,sBAAsB,CAAC"}