@perses-dev/plugin-system 0.52.0-beta.5 → 0.52.0-rc.1

package/dist/cjs/components/MultiQueryEditor/MultiQueryEditor.js

@@ -60,7 +60,8 @@ function useDefaultQueryDefinition(queryTypes) {
         isLoading
     };
 }
-function MultiQueryEditor({ queryTypes, queries = [], onChange }) {
+const MultiQueryEditor = /*#__PURE__*/ (0, _react.forwardRef)((props, ref)=>{
+    const { queryTypes, queries = [], onChange } = props;
     const { defaultInitialQueryDefinition, isLoading } = useDefaultQueryDefinition(queryTypes);
     // State for which queries are collapsed
     const [queriesCollapsed, setQueriesCollapsed] = (0, _react.useState)(queries.map(()=>false));
@@ -122,6 +123,7 @@ function MultiQueryEditor({ queryTypes, queries = [], onChange }) {
             /*#__PURE__*/ (0, _jsxruntime.jsx)(_material.Stack, {
                 spacing: 1,
                 children: queryDefinitions.map((query, i)=>/*#__PURE__*/ (0, _jsxruntime.jsx)(_QueryEditorContainer.QueryEditorContainer, {
+                        ref: ref,
                         queryTypes: queryTypes,
                         index: i,
                         query: query,
@@ -142,4 +144,5 @@ function MultiQueryEditor({ queryTypes, queries = [], onChange }) {
             })
         ]
     });
-}
+});
+MultiQueryEditor.displayName = 'MultiQueryEditor';

package/dist/cjs/components/MultiQueryEditor/QueryEditorContainer.js

@@ -26,13 +26,16 @@ const _material = require("@mui/material");
 const _DeleteOutline = /*#__PURE__*/ _interop_require_default(require("mdi-material-ui/DeleteOutline"));
 const _ChevronDown = /*#__PURE__*/ _interop_require_default(require("mdi-material-ui/ChevronDown"));
 const _ChevronRight = /*#__PURE__*/ _interop_require_default(require("mdi-material-ui/ChevronRight"));
+const _react = require("react");
 const _PluginEditor = require("../PluginEditor");
+const _runtime = require("../../runtime");
 function _interop_require_default(obj) {
     return obj && obj.__esModule ? obj : {
         default: obj
     };
 }
-const QueryEditorContainer = ({ queryTypes, index, query, isCollapsed, onDelete, onChange, onCollapseExpand })=>{
+const QueryEditorContainer = /*#__PURE__*/ (0, _react.forwardRef)((props, ref)=>{
+    const { queryTypes, index, query, isCollapsed, onDelete, onChange, onCollapseExpand } = props;
     return /*#__PURE__*/ (0, _jsxruntime.jsxs)(_material.Stack, {
         spacing: 1,
         children: [
@@ -68,21 +71,24 @@ const QueryEditorContainer = ({ queryTypes, index, query, isCollapsed, onDelete,
                 ]
             }),
             !isCollapsed && /*#__PURE__*/ (0, _jsxruntime.jsx)(QueryEditor, {
+                ref: ref,
                 queryTypes: queryTypes,
                 value: query,
                 onChange: (next)=>onChange(index, next)
             })
         ]
     }, index);
-};
+});
+QueryEditorContainer.displayName = 'QueryEditorContainer';
 /**
  * Editor for a query definition. This component is responsible for rendering the plugin editor for the given query.
  * This will allow user to select a plugin extending from the given supported query types, and then edit the plugin
  * spec for this plugin.
  * @param props
  * @constructor
- */ function QueryEditor(props) {
+ */ const QueryEditor = /*#__PURE__*/ (0, _react.forwardRef)((props, ref)=>{
     const { value, onChange, queryTypes, ...others } = props;
+    const { refresh } = (0, _runtime.useTimeRange)();
     const handlePluginChange = (next)=>{
         onChange((0, _immer.produce)(value, (draft)=>{
             draft.kind = next.selection.type;
@@ -93,6 +99,8 @@ const QueryEditorContainer = ({ queryTypes, index, query, isCollapsed, onDelete,
     return /*#__PURE__*/ (0, _jsxruntime.jsx)(_material.Box, {
         ...others,
         children: /*#__PURE__*/ (0, _jsxruntime.jsx)(_PluginEditor.PluginEditor, {
+            postExecuteRunQuery: refresh,
+            ref: ref,
             withRunQueryButton: true,
             pluginTypes: queryTypes,
             pluginKindLabel: "Query Type",
@@ -106,4 +114,5 @@ const QueryEditorContainer = ({ queryTypes, index, query, isCollapsed, onDelete,
             onChange: handlePluginChange
         })
     });
-}
+});
+QueryEditor.displayName = 'QueryEditor';

package/dist/cjs/components/PanelSpecEditor/PanelSpecEditor.js

@@ -23,10 +23,11 @@ Object.defineProperty(exports, "PanelSpecEditor", {
 const _jsxruntime = require("react/jsx-runtime");
 const _components = require("@perses-dev/components");
 const _reacthookform = require("react-hook-form");
+const _react = require("react");
 const _runtime = require("../../runtime");
 const _OptionsEditorTabs = require("../OptionsEditorTabs");
 const _MultiQueryEditor = require("../MultiQueryEditor");
-function PanelSpecEditor(props) {
+const PanelSpecEditor = /*#__PURE__*/ (0, _react.forwardRef)((props, ref)=>{
     const { control, panelDefinition, onJSONChange, onQueriesChange, onPluginSpecChange } = props;
     const { kind } = panelDefinition.spec.plugin;
     const { data: plugin, isLoading, error } = (0, _runtime.usePlugin)('Panel', kind);
@@ -35,11 +36,10 @@ function PanelSpecEditor(props) {
             error: error
         });
     }
-    // TODO: Proper loading indicator
     if (isLoading) {
         return null;
     }
-    if (plugin === undefined) {
+    if (!plugin) {
         throw new Error(`Missing implementation for panel plugin with kind '${kind}'`);
     }
     const { panelOptionsEditorComponents, hideQueryEditor } = plugin;
@@ -51,6 +51,7 @@ function PanelSpecEditor(props) {
                 control: control,
                 name: "panelDefinition.spec.queries",
                 render: ({ field })=>/*#__PURE__*/ (0, _jsxruntime.jsx)(_MultiQueryEditor.MultiQueryEditor, {
+                        ref: ref,
                         queryTypes: plugin.supportedQueryTypes ?? [],
                         queries: panelDefinition.spec.queries ?? [],
                         onChange: (queries)=>{
@@ -61,7 +62,7 @@ function PanelSpecEditor(props) {
             })
         });
     }
-    if (panelOptionsEditorComponents !== undefined) {
+    if (panelOptionsEditorComponents) {
         tabs = tabs.concat(panelOptionsEditorComponents.map(({ label, content: OptionsEditorComponent })=>({
                 label,
                 content: /*#__PURE__*/ (0, _jsxruntime.jsx)(_reacthookform.Controller, {
@@ -105,4 +106,5 @@ function PanelSpecEditor(props) {
             tabs: tabs
         }, tabs.length)
     });
-}
+});
+PanelSpecEditor.displayName = 'PanelSpecEditor';

package/dist/cjs/components/PluginEditor/PluginEditor.js

@@ -33,17 +33,16 @@ function _interop_require_default(obj) {
         default: obj
     };
 }
-function PluginEditor(props) {
-    // eslint-disable-next-line @typescript-eslint/no-unused-vars
-    const { value, withRunQueryButton = true, pluginTypes, pluginKindLabel, onChange: _, isReadonly, ...others } = props;
+const PluginEditor = /*#__PURE__*/ (0, _react.forwardRef)((props, ref)=>{
+    const { value, withRunQueryButton = true, pluginTypes, pluginKindLabel, onChange: _, isReadonly, postExecuteRunQuery: refresh, ...others } = props;
     const { pendingSelection, isLoading, error, onSelectionChange, onSpecChange } = (0, _plugineditorapi.usePluginEditor)(props);
     /* 
-    We could technically merge the watchedQuery, watchedOtherSpecs into a single watched-object,
-    because at the end of the day, they are all specs.
-    However, let's have them separated to keep the code simple and readable.
-    Reason: Only Query string field is common between all of them. Other specs may be different
-    Example: Legend, and MinSteps
-   */ const [watchedQuery, setWatchQuery] = (0, _react.useState)(value.spec['query']);
+     We could technically merge the watchedQuery, watchedOtherSpecs into a single watched-object,
+     because at the end of the day, they are all specs.
+     However, let's have them separated to keep the code simple and readable.
+     Reason: Only Query string field is common between all of them. Other specs may be different
+     Example: Legend, and MinSteps
+    */ const [watchedQuery, setWatchQuery] = (0, _react.useState)(value.spec['query']);
     const [watchedOtherSpecs, setWatchOtherSpecs] = (0, _react.useState)(value.spec);
     const runQueryHandler = (0, _react.useCallback)(()=>{
         onSpecChange({
@@ -51,11 +50,13 @@ function PluginEditor(props) {
             ...watchedOtherSpecs,
             query: watchedQuery
         });
+        refresh?.();
     }, [
         value.spec,
         onSpecChange,
         watchedQuery,
-        watchedOtherSpecs
+        watchedOtherSpecs,
+        refresh
     ]);
     const queryHandlerSettings = (0, _react.useMemo)(()=>{
         return withRunQueryButton ? {
@@ -70,6 +71,9 @@ function PluginEditor(props) {
     }, [
         withRunQueryButton
     ]);
+    (0, _react.useImperativeHandle)(ref, ()=>({
+            flushChanges: runQueryHandler
+        }));
     return /*#__PURE__*/ (0, _jsxruntime.jsxs)(_material.Box, {
         ...others,
         children: [
@@ -124,4 +128,5 @@ function PluginEditor(props) {
             })
         ]
     });
-}
+});
+PluginEditor.displayName = 'PluginEditor';

package/dist/cjs/components/Variables/VariableEditorForm/VariableEditorForm.js

@@ -21,57 +21,17 @@ Object.defineProperty(exports, "VariableEditorForm", {
     }
 });
 const _jsxruntime = require("react/jsx-runtime");
-const _react = /*#__PURE__*/ _interop_require_wildcard(require("react"));
+const _react = require("react");
 const _material = require("@mui/material");
 const _components = require("@perses-dev/components");
 const _reacthookform = require("react-hook-form");
 const _zod = require("@hookform/resolvers/zod");
 const _utils = require("../../../utils");
-const _variablemodel = require("../variable-model");
 const _PluginEditor = require("../../PluginEditor");
 const _context = require("../../../context");
+const _variablemodel = require("../variable-model");
+const _runtime = require("../../../runtime");
 const _VariablePreview = require("./VariablePreview");
-function _getRequireWildcardCache(nodeInterop) {
-    if (typeof WeakMap !== "function") return null;
-    var cacheBabelInterop = new WeakMap();
-    var cacheNodeInterop = new WeakMap();
-    return (_getRequireWildcardCache = function(nodeInterop) {
-        return nodeInterop ? cacheNodeInterop : cacheBabelInterop;
-    })(nodeInterop);
-}
-function _interop_require_wildcard(obj, nodeInterop) {
-    if (!nodeInterop && obj && obj.__esModule) {
-        return obj;
-    }
-    if (obj === null || typeof obj !== "object" && typeof obj !== "function") {
-        return {
-            default: obj
-        };
-    }
-    var cache = _getRequireWildcardCache(nodeInterop);
-    if (cache && cache.has(obj)) {
-        return cache.get(obj);
-    }
-    var newObj = {
-        __proto__: null
-    };
-    var hasPropertyDescriptor = Object.defineProperty && Object.getOwnPropertyDescriptor;
-    for(var key in obj){
-        if (key !== "default" && Object.prototype.hasOwnProperty.call(obj, key)) {
-            var desc = hasPropertyDescriptor ? Object.getOwnPropertyDescriptor(obj, key) : null;
-            if (desc && (desc.get || desc.set)) {
-                Object.defineProperty(newObj, key, desc);
-            } else {
-                newObj[key] = obj[key];
-            }
-        }
-    }
-    newObj.default = obj;
-    if (cache) {
-        cache.set(obj, newObj);
-    }
-    return newObj;
-}
 function FallbackPreview() {
     return /*#__PURE__*/ (0, _jsxruntime.jsx)("div", {
         children: "Error previewing values"
@@ -146,10 +106,7 @@ function ListVariableEditorForm({ action, control }) {
     /** We use `previewSpec` to know when to explicitly update the
    * spec that will be used for preview. The reason why we do this is to avoid
    * having to re-fetch the values when the user is still editing the spec.
-   */ const [previewSpec, setPreviewSpec] = (0, _react.useState)(form.getValues());
-    const refreshPreview = ()=>{
-        setPreviewSpec(form.getValues());
-    };
+   */ const previewSpec = form.getValues();
     const plugin = (0, _reacthookform.useWatch)({
         control,
         name: 'spec.plugin'
@@ -169,6 +126,7 @@ function ListVariableEditorForm({ action, control }) {
     if (values.spec.allowMultiple === undefined) {
         form.setValue('spec.allowMultiple', false);
     }
+    const { refresh } = (0, _runtime.useTimeRange)();
     return /*#__PURE__*/ (0, _jsxruntime.jsxs)(_jsxruntime.Fragment, {
         children: [
             /*#__PURE__*/ (0, _jsxruntime.jsx)(_material.Typography, {
@@ -187,53 +145,45 @@ function ListVariableEditorForm({ action, control }) {
                                 previewSpec
                             ],
                             children: /*#__PURE__*/ (0, _jsxruntime.jsx)(_VariablePreview.VariableListPreview, {
-                                definition: previewSpec,
-                                onRefresh: refreshPreview
+                                definition: previewSpec
                             })
                         })
                     }) : /*#__PURE__*/ (0, _jsxruntime.jsx)(_VariablePreview.VariablePreview, {
                         isLoading: true
                     }),
-                    /*#__PURE__*/ (0, _jsxruntime.jsxs)(_material.Stack, {
-                        children: [
-                            /*#__PURE__*/ (0, _jsxruntime.jsx)(_material.ClickAwayListener, {
-                                onClickAway: ()=>refreshPreview(),
-                                children: /*#__PURE__*/ (0, _jsxruntime.jsx)(_material.Box, {})
-                            }),
-                            /*#__PURE__*/ (0, _jsxruntime.jsx)(_components.ErrorBoundary, {
-                                FallbackComponent: _components.ErrorAlert,
-                                children: /*#__PURE__*/ (0, _jsxruntime.jsx)(_reacthookform.Controller, {
-                                    control: control,
-                                    name: "spec.plugin",
-                                    render: ({ field })=>{
-                                        return /*#__PURE__*/ (0, _jsxruntime.jsx)(_PluginEditor.PluginEditor, {
-                                            withRunQueryButton: true,
-                                            width: "100%",
-                                            pluginTypes: [
-                                                'Variable'
-                                            ],
-                                            pluginKindLabel: "Source",
-                                            value: {
-                                                selection: {
-                                                    type: 'Variable',
-                                                    kind: kind ?? 'StaticListVariable'
-                                                },
-                                                spec: pluginSpec ?? {
-                                                    values: []
-                                                }
+                    /*#__PURE__*/ (0, _jsxruntime.jsx)(_material.Stack, {
+                        children: /*#__PURE__*/ (0, _jsxruntime.jsx)(_components.ErrorBoundary, {
+                            FallbackComponent: _components.ErrorAlert,
+                            children: /*#__PURE__*/ (0, _jsxruntime.jsx)(_reacthookform.Controller, {
+                                control: control,
+                                name: "spec.plugin",
+                                render: ({ field })=>{
+                                    return /*#__PURE__*/ (0, _jsxruntime.jsx)(_PluginEditor.PluginEditor, {
+                                        postExecuteRunQuery: refresh,
+                                        withRunQueryButton: true,
+                                        width: "100%",
+                                        pluginTypes: [
+                                            'Variable'
+                                        ],
+                                        pluginKindLabel: "Source",
+                                        value: {
+                                            selection: {
+                                                type: 'Variable',
+                                                kind: kind ?? 'StaticListVariable'
                                             },
-                                            isReadonly: action === 'read',
-                                            onChange: (v)=>{
-                                                field.onChange({
-                                                    kind: v.selection.kind,
-                                                    spec: v.spec
-                                                });
-                                            }
-                                        });
-                                    }
-                                })
+                                            spec: pluginSpec ?? {}
+                                        },
+                                        isReadonly: action === 'read',
+                                        onChange: (v)=>{
+                                            field.onChange({
+                                                kind: v.selection.kind,
+                                                spec: v.spec
+                                            });
+                                        }
+                                    });
+                                }
                             })
-                        ]
+                        })
                     }),
                     /*#__PURE__*/ (0, _jsxruntime.jsx)(_material.Stack, {
                         children: /*#__PURE__*/ (0, _jsxruntime.jsx)(_reacthookform.Controller, {

package/dist/cjs/components/Variables/VariableEditorForm/VariablePreview.js

@@ -32,7 +32,6 @@ const _jsxruntime = require("react/jsx-runtime");
 const _react = /*#__PURE__*/ _interop_require_wildcard(require("react"));
 const _material = require("@mui/material");
 const _components = require("@perses-dev/components");
-const _Refresh = /*#__PURE__*/ _interop_require_default(require("mdi-material-ui/Refresh"));
 const _ClipboardOutline = /*#__PURE__*/ _interop_require_default(require("mdi-material-ui/ClipboardOutline"));
 const _constants = require("../../../constants");
 const _variablemodel = require("../variable-model");
@@ -84,7 +83,7 @@ function _interop_require_wildcard(obj, nodeInterop) {
 }
 const DEFAULT_MAX_PREVIEW_VALUES = 50;
 function VariablePreview(props) {
-    const { values, onRefresh, isLoading, error } = props;
+    const { values, isLoading, error } = props;
     const [maxValues, setMaxValues] = (0, _react.useState)(DEFAULT_MAX_PREVIEW_VALUES);
     const { infoSnackbar } = (0, _components.useSnackbar)();
     const showAll = ()=>{
@@ -106,14 +105,6 @@ function VariablePreview(props) {
                         variant: "h4",
                         children: "Preview Values"
                     }),
-                    onRefresh && /*#__PURE__*/ (0, _jsxruntime.jsx)(_components.InfoTooltip, {
-                        description: _constants.TOOLTIP_TEXT.refreshVariableValues,
-                        children: /*#__PURE__*/ (0, _jsxruntime.jsx)(_material.IconButton, {
-                            onClick: onRefresh,
-                            size: "small",
-                            children: /*#__PURE__*/ (0, _jsxruntime.jsx)(_Refresh.default, {})
-                        })
-                    }),
                     /*#__PURE__*/ (0, _jsxruntime.jsx)(_components.InfoTooltip, {
                         description: _constants.TOOLTIP_TEXT.copyVariableValues,
                         children: /*#__PURE__*/ (0, _jsxruntime.jsx)(_material.IconButton, {
@@ -172,13 +163,17 @@ function VariablePreview(props) {
     });
 }
 function VariableListPreview(props) {
-    const { definition, onRefresh } = props;
+    const { definition } = props;
     const { data, isFetching, error } = (0, _variablemodel.useListVariablePluginValues)(definition);
     const errorMessage = error?.message;
-    return /*#__PURE__*/ (0, _jsxruntime.jsx)(VariablePreview, {
-        values: data?.map((val)=>val.value) || [],
-        onRefresh: onRefresh,
-        isLoading: isFetching,
-        error: errorMessage
-    });
+    const variablePreview = (0, _react.useMemo)(()=>/*#__PURE__*/ (0, _jsxruntime.jsx)(VariablePreview, {
+            values: data?.map((val)=>val.value) || [],
+            isLoading: isFetching,
+            error: errorMessage
+        }), [
+        errorMessage,
+        isFetching,
+        data
+    ]);
+    return variablePreview;
 }

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

@@ -21,12 +21,12 @@ Object.defineProperty(exports, "useSetProjectParams", {
     }
 });
 const _react = require("react");
-const _usequeryparams = require("use-query-params");
+const _nuqs = require("nuqs");
 function useSetProjectParams(enabledURLParams = true) {
-    const [query, setQuery] = (0, _usequeryparams.useQueryParams)({
-        project: ''
+    const [query, setQuery] = (0, _nuqs.useQueryStates)({
+        project: _nuqs.parseAsString
     }, {
-        updateType: 'replaceIn'
+        history: 'replace'
     });
     const [projectState, setProjectState] = (0, _react.useState)('none');
     const setProject = (0, _react.useCallback)((project)=>{

package/dist/cjs/runtime/TimeRangeProvider/TimeRangeProvider.js

@@ -100,7 +100,12 @@ function useSuggestedStepMs(width) {
 }
 function TimeRangeProvider(props) {
     const { timeRange, refreshInterval, children, setTimeRange, setRefreshInterval } = props;
-    const [localTimeRange, setLocalTimeRange] = (0, _react.useState)(timeRange);
+    /**
+   * TODO: The hook needs refactor. There is a bug here with refreshKey. If the refreshInterval is not set,
+   * refreshKey string includes an undefined xx:yy:zz:undefined:0
+   * I think exposing refresh functionality also is very risky. A careless usage of refresh may cause
+   * infinite rendering loop.
+   */ const [localTimeRange, setLocalTimeRange] = (0, _react.useState)(timeRange);
     const [localRefreshInterval, setLocalRefreshInterval] = (0, _react.useState)(refreshInterval);
     const [refreshCounter, setRefreshCounter] = (0, _react.useState)(0);
     (0, _react.useEffect)(()=>{

package/dist/cjs/runtime/TimeRangeProvider/query-params.js

@@ -21,20 +21,20 @@ function _export(target, all) {
     });
 }
 _export(exports, {
-    TimeRangeParam: function() {
-        return TimeRangeParam;
-    },
     decodeTimeRangeValue: function() {
         return decodeTimeRangeValue;
     },
     encodeTimeRangeValue: function() {
         return encodeTimeRangeValue;
     },
-    refreshIntervalQueryConfig: function() {
-        return refreshIntervalQueryConfig;
+    parseAsRefreshInterval: function() {
+        return parseAsRefreshInterval;
+    },
+    parseAsTimeRange: function() {
+        return parseAsTimeRange;
     },
-    timeRangeQueryConfig: function() {
-        return timeRangeQueryConfig;
+    parseAsTimeRangeValue: function() {
+        return parseAsTimeRangeValue;
     },
     useInitialRefreshInterval: function() {
         return useInitialRefreshInterval;
@@ -50,9 +50,9 @@ _export(exports, {
     }
 });
 const _react = require("react");
-const _usequeryparams = require("use-query-params");
 const _datefns = require("date-fns");
 const _core = require("@perses-dev/core");
+const _nuqs = require("nuqs");
 /* Interprets an encoded string and returns either the string or null/undefined if not available */ function getEncodedValue(input, allowEmptyString) {
     // '' or []
     if (!input || input.length === 0 && (!allowEmptyString || allowEmptyString && input !== '')) {
@@ -69,7 +69,7 @@ const _core = require("@perses-dev/core");
 }
 function encodeTimeRangeValue(timeOptionValue) {
     if (!timeOptionValue) {
-        return timeOptionValue;
+        return '';
     }
     if (typeof timeOptionValue === 'string') {
         if ((0, _core.isDurationString)(timeOptionValue)) {
@@ -83,25 +83,25 @@ function decodeTimeRangeValue(input) {
     if (!paramString) return null;
     return (0, _core.isDurationString)(paramString) ? paramString : new Date(Number(paramString));
 }
-const TimeRangeParam = {
-    encode: encodeTimeRangeValue,
-    decode: decodeTimeRangeValue,
-    equals: (valueA, valueB)=>{
+const parseAsTimeRangeValue = (0, _nuqs.createParser)({
+    parse: decodeTimeRangeValue,
+    serialize: encodeTimeRangeValue,
+    eq: (valueA, valueB)=>{
         if (valueA === valueB) return true;
         if (!valueA || !valueB) return valueA === valueB;
         return valueA.valueOf() === valueB.valueOf();
     }
+});
+const parseAsTimeRange = {
+    start: parseAsTimeRangeValue,
+    end: parseAsTimeRangeValue
 };
-const timeRangeQueryConfig = {
-    start: TimeRangeParam,
-    end: TimeRangeParam
-};
-const refreshIntervalQueryConfig = {
-    refresh: TimeRangeParam
+const parseAsRefreshInterval = {
+    refresh: parseAsTimeRangeValue
 };
 function useInitialTimeRange(dashboardDuration) {
-    const [query] = (0, _usequeryparams.useQueryParams)(timeRangeQueryConfig, {
-        updateType: 'replaceIn'
+    const [query] = (0, _nuqs.useQueryStates)(parseAsTimeRange, {
+        history: 'replace'
     });
     const { start, end } = query;
     return (0, _react.useMemo)(()=>{
@@ -130,8 +130,8 @@ function useInitialTimeRange(dashboardDuration) {
     ]);
 }
 function useTimeRangeParams(initialTimeRange) {
-    const [query, setQuery] = (0, _usequeryparams.useQueryParams)(timeRangeQueryConfig, {
-        updateType: 'replaceIn'
+    const [query, setQuery] = (0, _nuqs.useQueryStates)(parseAsTimeRange, {
+        history: 'replace'
     });
     // determine whether initial param had previously been populated to fix back btn
     const [paramsLoaded, setParamsLoaded] = (0, _react.useState)(false);
@@ -171,8 +171,8 @@ function useTimeRangeParams(initialTimeRange) {
     };
 }
 function useInitialRefreshInterval(dashboardDuration) {
-    const [query] = (0, _usequeryparams.useQueryParams)(refreshIntervalQueryConfig, {
-        updateType: 'replaceIn'
+    const [query] = (0, _nuqs.useQueryStates)(parseAsRefreshInterval, {
+        history: 'replace'
     });
     const { refresh } = query;
     return (0, _react.useMemo)(()=>{
@@ -191,8 +191,8 @@ function useInitialRefreshInterval(dashboardDuration) {
     ]);
 }
 function useSetRefreshIntervalParams(initialRefreshInterval) {
-    const [query, setQuery] = (0, _usequeryparams.useQueryParams)(refreshIntervalQueryConfig, {
-        updateType: 'replaceIn'
+    const [query, setQuery] = (0, _nuqs.useQueryStates)(parseAsRefreshInterval, {
+        history: 'replace'
     });
     // determine whether initial param had previously been populated to fix back btn
     const [paramsLoaded, setParamsLoaded] = (0, _react.useState)(false);

package/dist/cjs/test/utils.js

@@ -22,7 +22,9 @@ Object.defineProperty(exports, "getTestContextWrapper", {
 });
 const _jsxruntime = require("react/jsx-runtime");
 const _reactquery = require("@tanstack/react-query");
+const _core = require("@perses-dev/core");
 const _components = require("../components");
+const _runtime = require("../runtime");
 const _testplugins = require("./test-plugins");
 function getTestContextWrapper(contextOptions) {
     // Create a new QueryClient for each test to avoid caching issues
@@ -34,15 +36,22 @@ function getTestContextWrapper(contextOptions) {
             }
         }
     });
+    const timeRange = {
+        start: new Date(Date.now() - Number(_core.DEFAULT_DASHBOARD_DURATION)),
+        end: new Date()
+    };
     return function Wrapper({ children }) {
-        return /*#__PURE__*/ (0, _jsxruntime.jsx)(_reactquery.QueryClientProvider, {
-            client: queryClient,
-            children: /*#__PURE__*/ (0, _jsxruntime.jsx)(_components.PluginRegistry, {
-                pluginLoader: _testplugins.testPluginLoader,
-                defaultPluginKinds: contextOptions?.defaultPluginKinds ?? {
-                    TimeSeriesQuery: 'PrometheusTimeSeriesQuery'
-                },
-                children: children
+        return /*#__PURE__*/ (0, _jsxruntime.jsx)(_runtime.TimeRangeProvider, {
+            timeRange: timeRange,
+            children: /*#__PURE__*/ (0, _jsxruntime.jsx)(_reactquery.QueryClientProvider, {
+                client: queryClient,
+                children: /*#__PURE__*/ (0, _jsxruntime.jsx)(_components.PluginRegistry, {
+                    pluginLoader: _testplugins.testPluginLoader,
+                    defaultPluginKinds: contextOptions?.defaultPluginKinds ?? {
+                        TimeSeriesQuery: 'PrometheusTimeSeriesQuery'
+                    },
+                    children: children
+                })
             })
         });
     };