@perses-dev/plugin-system 0.53.0-beta.1 → 0.53.0-beta.3

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

@@ -66,7 +66,7 @@ function useDefaultQueryDefinition(queryTypes, filteredQueryPlugins) {
     };
 }
 const MultiQueryEditor = /*#__PURE__*/ (0, _react.forwardRef)((props, ref)=>{
-    const { queryTypes, queries = [], filteredQueryPlugins, onChange } = props;
+    const { queryTypes, queries = [], queryResults, filteredQueryPlugins, onChange, onQueryRun } = props;
     const { defaultInitialQueryDefinition, isLoading } = useDefaultQueryDefinition(queryTypes, filteredQueryPlugins);
     // State for which queries are collapsed
     const [queriesCollapsed, setQueriesCollapsed] = (0, _react.useState)(queries.map(()=>false));
@@ -82,6 +82,9 @@ const MultiQueryEditor = /*#__PURE__*/ (0, _react.forwardRef)((props, ref)=>{
             }
         }));
     };
+    const handleQueryRun = (index, queryDef)=>{
+        onQueryRun(index, queryDef);
+    };
     const handleQueryAdd = ()=>{
         onChange((0, _immer.produce)(queries, (draft)=>{
             if (draft) {
@@ -132,11 +135,13 @@ const MultiQueryEditor = /*#__PURE__*/ (0, _react.forwardRef)((props, ref)=>{
                         queryTypes: queryTypes,
                         index: i,
                         query: query,
+                        queryResult: queryResults?.[i],
+                        filteredQueryPlugins: filteredQueryPlugins,
                         isCollapsed: !!queriesCollapsed[i],
                         onChange: handleQueryChange,
+                        onQueryRun: handleQueryRun,
                         onDelete: queries.length > 1 ? handleQueryDelete : undefined,
-                        onCollapseExpand: handleQueryCollapseExpand,
-                        filteredQueryPlugins: filteredQueryPlugins
+                        onCollapseExpand: handleQueryCollapseExpand
                     }, i))
             }),
             /*#__PURE__*/ (0, _jsxruntime.jsx)(_material.Button, {

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

@@ -27,55 +27,101 @@ const _DeleteOutline = /*#__PURE__*/ _interop_require_default(require("mdi-mater
 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 _Alert = /*#__PURE__*/ _interop_require_default(require("mdi-material-ui/Alert"));
+const _components = require("@perses-dev/components");
 const _PluginEditor = require("../PluginEditor");
-const _runtime = require("../../runtime");
 function _interop_require_default(obj) {
     return obj && obj.__esModule ? obj : {
         default: obj
     };
 }
 const QueryEditorContainer = /*#__PURE__*/ (0, _react.forwardRef)((props, ref)=>{
-    const { queryTypes, filteredQueryPlugins, index, query, isCollapsed, onDelete, onChange, onCollapseExpand } = props;
+    const { queryTypes, index, query, queryResult, filteredQueryPlugins, isCollapsed, onDelete, onChange, onQueryRun, onCollapseExpand } = props;
     return /*#__PURE__*/ (0, _jsxruntime.jsxs)(_material.Stack, {
         spacing: 1,
         children: [
             /*#__PURE__*/ (0, _jsxruntime.jsxs)(_material.Stack, {
                 direction: "row",
                 alignItems: "center",
+                justifyContent: "space-between",
                 borderBottom: 1,
                 borderColor: (theme)=>theme.palette.divider,
                 children: [
-                    /*#__PURE__*/ (0, _jsxruntime.jsx)(_material.IconButton, {
-                        size: "small",
-                        onClick: ()=>onCollapseExpand(index),
-                        children: isCollapsed ? /*#__PURE__*/ (0, _jsxruntime.jsx)(_ChevronRight.default, {}) : /*#__PURE__*/ (0, _jsxruntime.jsx)(_ChevronDown.default, {})
-                    }),
-                    /*#__PURE__*/ (0, _jsxruntime.jsxs)(_material.Typography, {
-                        variant: "overline",
-                        component: "h4",
+                    /*#__PURE__*/ (0, _jsxruntime.jsxs)(_material.Stack, {
+                        direction: "row",
                         children: [
-                            "Query #",
-                            index + 1
+                            /*#__PURE__*/ (0, _jsxruntime.jsx)(_material.IconButton, {
+                                size: "small",
+                                onClick: ()=>onCollapseExpand(index),
+                                children: isCollapsed ? /*#__PURE__*/ (0, _jsxruntime.jsx)(_ChevronRight.default, {}) : /*#__PURE__*/ (0, _jsxruntime.jsx)(_ChevronDown.default, {})
+                            }),
+                            /*#__PURE__*/ (0, _jsxruntime.jsxs)(_material.Typography, {
+                                variant: "overline",
+                                component: "h4",
+                                children: [
+                                    "Query #",
+                                    index + 1
+                                ]
+                            })
                         ]
                     }),
-                    /*#__PURE__*/ (0, _jsxruntime.jsx)(_material.IconButton, {
-                        size: "small",
-                        // Use `visibility` to ensure that the row has the same height when delete button is visible or not visible
-                        sx: {
-                            marginLeft: 'auto',
-                            visibility: `${onDelete ? 'visible' : 'hidden'}`
-                        },
-                        onClick: ()=>onDelete && onDelete(index),
-                        children: /*#__PURE__*/ (0, _jsxruntime.jsx)(_DeleteOutline.default, {})
+                    /*#__PURE__*/ (0, _jsxruntime.jsxs)(_material.Stack, {
+                        direction: "row",
+                        alignItems: "center",
+                        children: [
+                            queryResult?.isFetching && /*#__PURE__*/ (0, _jsxruntime.jsx)(_material.CircularProgress, {
+                                "aria-label": "loading",
+                                size: "1.125rem"
+                            }),
+                            queryResult?.error && /*#__PURE__*/ (0, _jsxruntime.jsx)(_components.InfoTooltip, {
+                                description: queryResult.error.message,
+                                children: /*#__PURE__*/ (0, _jsxruntime.jsxs)(_material.Stack, {
+                                    direction: "row",
+                                    alignItems: "center",
+                                    sx: {
+                                        color: (theme)=>theme.palette.error.main
+                                    },
+                                    children: [
+                                        /*#__PURE__*/ (0, _jsxruntime.jsx)(_material.IconButton, {
+                                            "aria-label": "query error",
+                                            size: "small",
+                                            sx: {
+                                                color: (theme)=>theme.palette.error.main
+                                            },
+                                            children: /*#__PURE__*/ (0, _jsxruntime.jsx)(_Alert.default, {})
+                                        }),
+                                        /*#__PURE__*/ (0, _jsxruntime.jsx)(_material.Typography, {
+                                            sx: {
+                                                maxWidth: 300,
+                                                whiteSpace: 'nowrap',
+                                                overflow: 'hidden',
+                                                textOverflow: 'ellipsis',
+                                                '&:hover ::after': {
+                                                    content: '"Click to copy"'
+                                                }
+                                            },
+                                            children: queryResult.error.message
+                                        })
+                                    ]
+                                })
+                            }),
+                            onDelete && /*#__PURE__*/ (0, _jsxruntime.jsx)(_material.IconButton, {
+                                "aria-label": "delete query",
+                                size: "small",
+                                onClick: ()=>onDelete && onDelete(index),
+                                children: /*#__PURE__*/ (0, _jsxruntime.jsx)(_DeleteOutline.default, {})
+                            })
+                        ]
                     })
                 ]
             }),
             !isCollapsed && /*#__PURE__*/ (0, _jsxruntime.jsx)(QueryEditor, {
-                filteredQueryPlugins: filteredQueryPlugins,
                 ref: ref,
                 queryTypes: queryTypes,
                 value: query,
-                onChange: (next)=>onChange(index, next)
+                filteredQueryPlugins: filteredQueryPlugins,
+                onChange: (next)=>onChange(index, next),
+                onQueryRun: ()=>onQueryRun(index, query)
             })
         ]
     }, index);
@@ -88,8 +134,7 @@ QueryEditorContainer.displayName = 'QueryEditorContainer';
  * @param props
  * @constructor
  */ const QueryEditor = /*#__PURE__*/ (0, _react.forwardRef)((props, ref)=>{
-    const { value, onChange, queryTypes, filteredQueryPlugins, ...others } = props;
-    const { refresh } = (0, _runtime.useTimeRange)();
+    const { queryTypes, value, filteredQueryPlugins, onChange, onQueryRun, ...others } = props;
     const handlePluginChange = (next)=>{
         onChange((0, _immer.produce)(value, (draft)=>{
             draft.kind = next.selection.type;
@@ -100,9 +145,7 @@ QueryEditorContainer.displayName = 'QueryEditorContainer';
     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",
             value: {
@@ -112,8 +155,10 @@ QueryEditorContainer.displayName = 'QueryEditorContainer';
                 },
                 spec: value.spec.plugin.spec
             },
-            onChange: handlePluginChange,
-            filteredQueryPlugins: filteredQueryPlugins
+            filteredQueryPlugins: filteredQueryPlugins,
+            withRunQueryButton: true,
+            onRunQuery: onQueryRun,
+            onChange: handlePluginChange
         })
     });
 });

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

@@ -28,9 +28,10 @@ const _runtime = require("../../runtime");
 const _OptionsEditorTabs = require("../OptionsEditorTabs");
 const _MultiQueryEditor = require("../MultiQueryEditor");
 const PanelSpecEditor = /*#__PURE__*/ (0, _react.forwardRef)((props, ref)=>{
-    const { control, panelDefinition, onJSONChange, onQueriesChange, onPluginSpecChange } = props;
+    const { control, panelDefinition, onQueriesChange, onQueryRun, onPluginSpecChange, onJSONChange } = props;
     const { kind } = panelDefinition.spec.plugin;
     const { data: plugin, isLoading, error } = (0, _runtime.usePlugin)('Panel', kind);
+    const { queryResults } = (0, _runtime.useDataQueriesContext)();
     if (error) {
         return /*#__PURE__*/ (0, _jsxruntime.jsx)(_components.ErrorAlert, {
             error: error
@@ -54,9 +55,17 @@ const PanelSpecEditor = /*#__PURE__*/ (0, _react.forwardRef)((props, ref)=>{
                         ref: ref,
                         queryTypes: plugin.supportedQueryTypes ?? [],
                         queries: panelDefinition.spec.queries ?? [],
+                        queryResults: queryResults,
                         onChange: (queries)=>{
                             field.onChange(queries);
                             onQueriesChange(queries);
+                        },
+                        onQueryRun: (index, query)=>{
+                            onQueryRun(index, query);
+                            // If spec has not changed, refetch to update the data
+                            if (JSON.stringify(panelDefinition.spec.queries?.[index]) === JSON.stringify(query)) {
+                                queryResults[index]?.refetch?.();
+                            }
                         }
                     })
             })

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

@@ -33,47 +33,14 @@ function _interop_require_default(obj) {
         default: obj
     };
 }
-const PluginEditor = /*#__PURE__*/ (0, _react.forwardRef)((props, ref)=>{
-    const { value, withRunQueryButton = true, pluginTypes, pluginKindLabel, onChange: _, isReadonly, postExecuteRunQuery: refresh, filteredQueryPlugins, ...others } = props;
+function PluginEditor(props) {
+    const { value, withRunQueryButton = true, pluginTypes, pluginKindLabel, onChange: _, isReadonly, onRunQuery, filteredQueryPlugins, ...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']);
-    const [watchedOtherSpecs, setWatchOtherSpecs] = (0, _react.useState)(value.spec);
-    const runQueryHandler = (0, _react.useCallback)(()=>{
-        onSpecChange({
-            ...value.spec,
-            ...watchedOtherSpecs,
-            query: watchedQuery
-        });
-        refresh?.();
+    const handleSpecChange = (0, _react.useCallback)((nextSpec)=>{
+        onSpecChange(nextSpec);
     }, [
-        value.spec,
-        onSpecChange,
-        watchedQuery,
-        watchedOtherSpecs,
-        refresh
+        onSpecChange
     ]);
-    const queryHandlerSettings = (0, _react.useMemo)(()=>{
-        return withRunQueryButton ? {
-            runWithOnBlur: false,
-            watchQueryChanges: (query)=>{
-                setWatchQuery(query);
-            },
-            setWatchOtherSpecs: (otherSpecs)=>{
-                setWatchOtherSpecs(otherSpecs);
-            }
-        } : undefined;
-    }, [
-        withRunQueryButton
-    ]);
-    (0, _react.useImperativeHandle)(ref, ()=>({
-            flushChanges: runQueryHandler
-        }));
     return /*#__PURE__*/ (0, _jsxruntime.jsxs)(_material.Box, {
         ...others,
         children: [
@@ -107,11 +74,12 @@ const PluginEditor = /*#__PURE__*/ (0, _react.forwardRef)((props, ref)=>{
                         onChange: onSelectionChange,
                         filteredQueryPlugins: filteredQueryPlugins
                     }),
-                    withRunQueryButton && !isLoading && /*#__PURE__*/ (0, _jsxruntime.jsx)(_material.Button, {
+                    withRunQueryButton && /*#__PURE__*/ (0, _jsxruntime.jsx)(_material.Button, {
                         "data-testid": "run_query_button",
                         variant: "contained",
                         startIcon: /*#__PURE__*/ (0, _jsxruntime.jsx)(_Reload.default, {}),
-                        onClick: runQueryHandler,
+                        onClick: onRunQuery,
+                        disabled: isLoading,
                         children: "Run Query"
                     })
                 ]
@@ -121,12 +89,10 @@ const PluginEditor = /*#__PURE__*/ (0, _react.forwardRef)((props, ref)=>{
                 children: /*#__PURE__*/ (0, _jsxruntime.jsx)(_PluginSpecEditor.PluginSpecEditor, {
                     pluginSelection: value.selection,
                     value: value.spec,
-                    onChange: onSpecChange,
-                    isReadonly: isReadonly,
-                    queryHandlerSettings: queryHandlerSettings
+                    onChange: handleSpecChange,
+                    isReadonly: isReadonly
                 })
             })
         ]
     });
-});
-PluginEditor.displayName = 'PluginEditor';
+}

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

@@ -26,11 +26,11 @@ const _material = require("@mui/material");
 const _components = require("@perses-dev/components");
 const _reacthookform = require("react-hook-form");
 const _zod = require("@hookform/resolvers/zod");
+const _reactquery = require("@tanstack/react-query");
 const _utils = require("../../../utils");
 const _PluginEditor = require("../../PluginEditor");
 const _context = require("../../../context");
 const _variablemodel = require("../variable-model");
-const _runtime = require("../../../runtime");
 const _VariablePreview = require("./VariablePreview");
 const _variableeditorformmodel = require("./variable-editor-form-model");
 function FallbackPreview() {
@@ -104,10 +104,29 @@ function TextVariableEditorForm({ action, control }) {
 }
 function ListVariableEditorForm({ action, control }) {
     const form = (0, _reacthookform.useFormContext)();
-    /** 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
+    const queryClient = (0, _reactquery.useQueryClient)();
+    const values = form.getValues();
+    /* We use `previewDefinition` to explicitly update the spec
+   * that will be used for preview when running query. 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 = form.getValues();
+   * Using structuredClone to not have reference issues with nested objects.
+   */ const [previewDefinition, setPreviewDefinition] = (0, _react.useState)(structuredClone(values));
+    const handleRunQuery = (0, _react.useCallback)(async ()=>{
+        if (JSON.stringify(previewDefinition) === JSON.stringify(values)) {
+            await queryClient.invalidateQueries({
+                queryKey: [
+                    'variable',
+                    previewDefinition
+                ]
+            });
+        } else {
+            setPreviewDefinition(structuredClone(values));
+        }
+    }, [
+        previewDefinition,
+        queryClient,
+        values
+    ]);
     const plugin = (0, _reacthookform.useWatch)({
         control,
         name: 'spec.plugin'
@@ -124,7 +143,6 @@ function ListVariableEditorForm({ action, control }) {
     });
     // When variable kind is selected we need to provide default values
     // TODO: check if react-hook-form has a better way to do this
-    const values = form.getValues();
     if (values.spec.allowAllValue === undefined) {
         form.setValue('spec.allowAllValue', false);
     }
@@ -140,7 +158,6 @@ function ListVariableEditorForm({ action, control }) {
     if (!values.spec.sort) {
         form.setValue('spec.sort', 'none');
     }
-    const { refresh } = (0, _runtime.useTimeRange)();
     return /*#__PURE__*/ (0, _jsxruntime.jsxs)(_jsxruntime.Fragment, {
         children: [
             /*#__PURE__*/ (0, _jsxruntime.jsx)(_material.Typography, {
@@ -156,11 +173,11 @@ function ListVariableEditorForm({ action, control }) {
                         children: /*#__PURE__*/ (0, _jsxruntime.jsx)(_components.ErrorBoundary, {
                             FallbackComponent: FallbackPreview,
                             resetKeys: [
-                                previewSpec
+                                previewDefinition
                             ],
                             children: /*#__PURE__*/ (0, _jsxruntime.jsx)(_VariablePreview.VariableListPreview, {
                                 sortMethod: sortMethod,
-                                definition: previewSpec
+                                definition: previewDefinition
                             })
                         })
                     }),
@@ -172,7 +189,6 @@ function ListVariableEditorForm({ action, control }) {
                                 name: "spec.plugin",
                                 render: ({ field })=>{
                                     return /*#__PURE__*/ (0, _jsxruntime.jsx)(_PluginEditor.PluginEditor, {
-                                        postExecuteRunQuery: refresh,
                                         withRunQueryButton: true,
                                         width: "100%",
                                         pluginTypes: [
@@ -192,7 +208,8 @@ function ListVariableEditorForm({ action, control }) {
                                                 kind: v.selection.kind,
                                                 spec: v.spec
                                             });
-                                        }
+                                        },
+                                        onRunQuery: handleRunQuery
                                     });
                                 }
                             })

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

@@ -159,7 +159,7 @@ function VariablePreview(props) {
                     },
                     children: [
                         variablePreviewState,
-                        values?.slice(0, maxValues).map((val, index)=>/*#__PURE__*/ (0, _jsxruntime.jsx)(_material.Chip, {
+                        values?.slice(0, maxValues).filter((val)=>val).map((val, index)=>/*#__PURE__*/ (0, _jsxruntime.jsx)(_material.Chip, {
                                 size: "small",
                                 label: val
                             }, index)),

package/dist/cjs/components/Variables/variable-model.js

@@ -65,7 +65,7 @@ function useListVariablePluginValues(definition) {
     const { data: variablePlugin } = (0, _runtime.usePlugin)('Variable', definition.spec.plugin.kind);
     const datasourceStore = (0, _runtime.useDatasourceStore)();
     const allVariables = (0, _runtime.useAllVariableValues)();
-    const { absoluteTimeRange: timeRange, refreshKey } = (0, _runtime.useTimeRange)();
+    const { absoluteTimeRange: timeRange } = (0, _runtime.useTimeRange)();
     const variablePluginCtx = {
         timeRange,
         datasourceStore,
@@ -88,10 +88,10 @@ function useListVariablePluginValues(definition) {
     const variablesValueKey = getVariableValuesKey(variables);
     return (0, _reactquery.useQuery)({
         queryKey: [
+            'variable',
             definition,
-            variablesValueKey,
             timeRange,
-            refreshKey
+            variablesValueKey
         ],
         queryFn: async ({ signal })=>{
             const resp = await variablePlugin?.getVariableOptions(spec, {

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

@@ -40,6 +40,7 @@ _export(exports, {
 const _jsxruntime = require("react/jsx-runtime");
 const _react = /*#__PURE__*/ _interop_require_wildcard(require("react"));
 const _core = require("@perses-dev/core");
+const _reactquery = require("@tanstack/react-query");
 const _refreshinterval = require("./refresh-interval");
 function _getRequireWildcardCache(nodeInterop) {
     if (typeof WeakMap !== "function") return null;
@@ -100,62 +101,98 @@ function useSuggestedStepMs(width) {
 }
 function TimeRangeProvider(props) {
     const { timeRange, refreshInterval, children, setTimeRange, setRefreshInterval } = props;
-    /**
-   * 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)(()=>{
-        setLocalTimeRange(timeRange);
+    const queryClient = (0, _reactquery.useQueryClient)();
+    const [absoluteTimeRange, setAbsoluteTimeRange] = (0, _react.useState)((0, _core.isRelativeTimeRange)(timeRange) ? (0, _core.toAbsoluteTimeRange)(timeRange) : timeRange);
+    const handleSetTimeRange = (0, _react.useCallback)((value)=>{
+        setTimeRange(value);
+        setAbsoluteTimeRange((0, _core.isRelativeTimeRange)(value) ? (0, _core.toAbsoluteTimeRange)(value) : value);
     }, [
-        timeRange,
-        refreshCounter
+        setTimeRange
     ]);
-    (0, _react.useEffect)(()=>{
-        setLocalRefreshInterval(refreshInterval);
+    // Refresh is called when clicking on the refresh button, it refreshes all queries including variables
+    const refresh = (0, _react.useCallback)(()=>{
+        setAbsoluteTimeRange((0, _core.isRelativeTimeRange)(timeRange) ? (0, _core.toAbsoluteTimeRange)(timeRange) : timeRange);
+        queryClient.invalidateQueries({
+            queryKey: [
+                'query'
+            ]
+        }).finally(()=>queryClient.removeQueries({
+                queryKey: [
+                    'query'
+                ],
+                type: 'inactive'
+            }));
+        queryClient.invalidateQueries({
+            queryKey: [
+                'variable'
+            ]
+        }).finally(()=>queryClient.removeQueries({
+                queryKey: [
+                    'variable'
+                ],
+                type: 'inactive'
+            }));
     }, [
-        refreshInterval
+        queryClient,
+        timeRange
     ]);
-    const refresh = (0, _react.useCallback)(()=>{
-        setRefreshCounter((counter)=>counter + 1);
+    // Auto refresh is only refreshing queries of panels
+    const autoRefresh = (0, _react.useCallback)(()=>{
+        setAbsoluteTimeRange((0, _core.isRelativeTimeRange)(timeRange) ? (0, _core.toAbsoluteTimeRange)(timeRange) : timeRange);
+        queryClient.invalidateQueries({
+            queryKey: [
+                'query'
+            ]
+        }).finally(()=>{
+            queryClient.removeQueries({
+                queryKey: [
+                    'query'
+                ],
+                type: 'inactive'
+            });
+            queryClient.removeQueries({
+                queryKey: [
+                    'variable'
+                ],
+                type: 'inactive'
+            }); // Timerange is in queryKey, can lead to memory leak when using relative timerange
+        });
     }, [
-        setRefreshCounter
+        queryClient,
+        timeRange
+    ]);
+    const refreshIntervalInMs = (0, _react.useMemo)(()=>(0, _refreshinterval.getRefreshIntervalInMs)(refreshInterval), [
+        refreshInterval
     ]);
-    const refreshIntervalInMs = (0, _refreshinterval.getRefreshIntervalInMs)(localRefreshInterval);
     (0, _react.useEffect)(()=>{
         if (refreshIntervalInMs > 0) {
             const interval = setInterval(()=>{
-                refresh();
+                autoRefresh();
             }, refreshIntervalInMs);
             return ()=>clearInterval(interval);
         }
     }, [
-        refresh,
+        autoRefresh,
         refreshIntervalInMs
     ]);
     const ctx = (0, _react.useMemo)(()=>{
-        const absoluteTimeRange = (0, _core.isRelativeTimeRange)(localTimeRange) ? (0, _core.toAbsoluteTimeRange)(localTimeRange) : localTimeRange;
         return {
-            timeRange: localTimeRange,
-            setTimeRange: setTimeRange ?? setLocalTimeRange,
-            absoluteTimeRange,
+            timeRange: timeRange,
+            setTimeRange: handleSetTimeRange,
+            absoluteTimeRange: absoluteTimeRange,
             refresh,
-            refreshKey: `${absoluteTimeRange.start}:${absoluteTimeRange.end}:${localRefreshInterval}:${refreshCounter}`,
-            refreshInterval: localRefreshInterval,
+            refreshInterval: refreshInterval,
             refreshIntervalInMs: refreshIntervalInMs,
-            setRefreshInterval: setRefreshInterval ?? setLocalRefreshInterval
+            setRefreshInterval: setRefreshInterval
         };
     }, [
-        localTimeRange,
-        setTimeRange,
+        absoluteTimeRange,
+        handleSetTimeRange,
         refresh,
-        localRefreshInterval,
-        refreshCounter,
+        refreshInterval,
         refreshIntervalInMs,
-        setRefreshInterval
+        setRefreshInterval,
+        timeRange
     ]);
     return /*#__PURE__*/ (0, _jsxruntime.jsx)(TimeRangeContext.Provider, {
         value: ctx,

package/dist/cjs/runtime/TimeRangeProvider/{TimeRangeProviderWithQueryParams.js → TimeRangeProviders.js}

@@ -14,9 +14,17 @@
 Object.defineProperty(exports, "__esModule", {
     value: true
 });
-Object.defineProperty(exports, "TimeRangeProviderWithQueryParams", {
-    enumerable: true,
-    get: function() {
+function _export(target, all) {
+    for(var name in all)Object.defineProperty(target, name, {
+        enumerable: true,
+        get: all[name]
+    });
+}
+_export(exports, {
+    TimeRangeProviderBasic: function() {
+        return TimeRangeProviderBasic;
+    },
+    TimeRangeProviderWithQueryParams: function() {
         return TimeRangeProviderWithQueryParams;
     }
 });
@@ -29,8 +37,7 @@ function _interop_require_default(obj) {
         default: obj
     };
 }
-function TimeRangeProviderWithQueryParams(props) {
-    const { initialTimeRange, initialRefreshInterval, children } = props;
+function TimeRangeProviderWithQueryParams({ initialTimeRange, initialRefreshInterval, children }) {
     const { timeRange, setTimeRange } = (0, _queryparams.useTimeRangeParams)(initialTimeRange);
     const { refreshInterval, setRefreshInterval } = (0, _queryparams.useSetRefreshIntervalParams)(initialRefreshInterval);
     return /*#__PURE__*/ (0, _jsxruntime.jsx)(_TimeRangeProvider.TimeRangeProvider, {
@@ -41,3 +48,14 @@ function TimeRangeProviderWithQueryParams(props) {
         children: children
     });
 }
+function TimeRangeProviderBasic({ initialTimeRange, initialRefreshInterval, children }) {
+    const [timeRange, setTimeRange] = _react.default.useState(initialTimeRange);
+    const [refreshInterval, setRefreshInterval] = _react.default.useState(initialRefreshInterval);
+    return /*#__PURE__*/ (0, _jsxruntime.jsx)(_TimeRangeProvider.TimeRangeProvider, {
+        timeRange: timeRange,
+        refreshInterval: refreshInterval,
+        setTimeRange: setTimeRange,
+        setRefreshInterval: setRefreshInterval,
+        children: children
+    });
+}

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

@@ -15,7 +15,7 @@ Object.defineProperty(exports, "__esModule", {
     value: true
 });
 _export_star(require("./TimeRangeProvider"), exports);
-_export_star(require("./TimeRangeProviderWithQueryParams"), exports);
+_export_star(require("./TimeRangeProviders"), exports);
 _export_star(require("./TimeRangeSettingsProvider"), exports);
 _export_star(require("./query-params"), exports);
 function _export_star(from, to) {

package/dist/cjs/runtime/log-queries.js

@@ -48,8 +48,9 @@ function useLogQueries(definitions) {
     return (0, _reactquery.useQueries)({
         queries: definitions.map((definition)=>{
             const queryKey = [
+                'query',
+                LOG_QUERY_KEY,
                 definition,
-                datasourceStore,
                 absoluteTimeRange,
                 variableValues
             ];

package/dist/cjs/runtime/profile-queries.js

@@ -46,8 +46,9 @@ function useProfileQueries(definitions) {
     return (0, _reactquery.useQueries)({
         queries: definitions.map((definition)=>{
             const queryKey = [
+                'query',
+                PROFILE_QUERY_KEY,
                 definition,
-                datasourceStore,
                 absoluteTimeRange
             ]; // `queryKey` watches and reruns `queryFn` if keys in the array change
             const profileQueryKind = definition?.spec?.plugin?.kind;