@perses-dev/plugin-system 0.53.0-beta.0 → 0.53.0-beta.2

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

@@ -32,7 +32,7 @@ function _interop_require_default(obj) {
         default: obj
     };
 }
-function useDefaultQueryDefinition(queryTypes) {
+function useDefaultQueryDefinition(queryTypes, filteredQueryPlugins) {
     // Build the default query plugin
     // This will be used only if the queries are empty, to open a starting query
     // Firs the default query type
@@ -41,7 +41,12 @@ function useDefaultQueryDefinition(queryTypes) {
     // Use as default the plugin kind explicitly set as default or the first in the list
     const { data: queryPlugins, isLoading } = (0, _runtime.useListPluginMetadata)(queryTypes);
     const { defaultPluginKinds } = (0, _runtime.usePluginRegistry)();
-    const defaultQueryKind = defaultPluginKinds?.[defaultQueryType] ?? queryPlugins?.[0]?.spec.name ?? '';
+    let defaultQueryKind = '';
+    if (filteredQueryPlugins?.length) {
+        defaultQueryKind = queryPlugins?.find((i)=>filteredQueryPlugins.includes(i.spec.name)).spec.name ?? '';
+    } else {
+        defaultQueryKind = defaultPluginKinds?.[defaultQueryType] ?? queryPlugins?.[0]?.spec.name ?? '';
+    }
     const { data: defaultQueryPlugin } = (0, _runtime.usePlugin)(defaultQueryType, defaultQueryKind, {
         useErrorBoundary: true,
         enabled: true
@@ -61,8 +66,8 @@ function useDefaultQueryDefinition(queryTypes) {
     };
 }
 const MultiQueryEditor = /*#__PURE__*/ (0, _react.forwardRef)((props, ref)=>{
-    const { queryTypes, queries = [], onChange } = props;
-    const { defaultInitialQueryDefinition, isLoading } = useDefaultQueryDefinition(queryTypes);
+    const { queryTypes, queries = [], queryResults, filteredQueryPlugins, onChange } = props;
+    const { defaultInitialQueryDefinition, isLoading } = useDefaultQueryDefinition(queryTypes, filteredQueryPlugins);
     // State for which queries are collapsed
     const [queriesCollapsed, setQueriesCollapsed] = (0, _react.useState)(queries.map(()=>false));
     // Query handlers
@@ -127,6 +132,8 @@ const MultiQueryEditor = /*#__PURE__*/ (0, _react.forwardRef)((props, ref)=>{
                         queryTypes: queryTypes,
                         index: i,
                         query: query,
+                        queryResult: queryResults?.[i],
+                        filteredQueryPlugins: filteredQueryPlugins,
                         isCollapsed: !!queriesCollapsed[i],
                         onChange: handleQueryChange,
                         onDelete: queries.length > 1 ? handleQueryDelete : undefined,

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

@@ -27,46 +27,91 @@ 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, index, query, isCollapsed, onDelete, onChange, onCollapseExpand } = props;
+    const { queryTypes, index, query, queryResult, filteredQueryPlugins, isCollapsed, onDelete, onChange, 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, {})
+                            })
+                        ]
                     })
                 ]
             }),
@@ -74,6 +119,8 @@ const QueryEditorContainer = /*#__PURE__*/ (0, _react.forwardRef)((props, ref)=>
                 ref: ref,
                 queryTypes: queryTypes,
                 value: query,
+                queryResult: queryResult,
+                filteredQueryPlugins: filteredQueryPlugins,
                 onChange: (next)=>onChange(index, next)
             })
         ]
@@ -87,8 +134,7 @@ QueryEditorContainer.displayName = 'QueryEditorContainer';
  * @param props
  * @constructor
  */ const QueryEditor = /*#__PURE__*/ (0, _react.forwardRef)((props, ref)=>{
-    const { value, onChange, queryTypes, ...others } = props;
-    const { refresh } = (0, _runtime.useTimeRange)();
+    const { value, onChange, queryTypes, queryResult, filteredQueryPlugins, ...others } = props;
     const handlePluginChange = (next)=>{
         onChange((0, _immer.produce)(value, (draft)=>{
             draft.kind = next.selection.type;
@@ -99,7 +145,6 @@ 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,
@@ -111,6 +156,8 @@ QueryEditorContainer.displayName = 'QueryEditorContainer';
                 },
                 spec: value.spec.plugin.spec
             },
+            filteredQueryPlugins: filteredQueryPlugins,
+            onQueryRefresh: queryResult?.refetch,
             onChange: handlePluginChange
         })
     });

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

@@ -31,6 +31,7 @@ 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);
+    const { queryResults } = (0, _runtime.useDataQueriesContext)();
     if (error) {
         return /*#__PURE__*/ (0, _jsxruntime.jsx)(_components.ErrorAlert, {
             error: error
@@ -54,6 +55,7 @@ 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);

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

@@ -34,9 +34,9 @@ function _interop_require_default(obj) {
     };
 }
 const PluginEditor = /*#__PURE__*/ (0, _react.forwardRef)((props, ref)=>{
-    const { value, withRunQueryButton = true, pluginTypes, pluginKindLabel, onChange: _, isReadonly, postExecuteRunQuery: refresh, ...others } = props;
+    const { value, withRunQueryButton = true, pluginTypes, pluginKindLabel, onChange: _, isReadonly, onQueryRefresh, 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.
@@ -50,13 +50,13 @@ const PluginEditor = /*#__PURE__*/ (0, _react.forwardRef)((props, ref)=>{
             ...watchedOtherSpecs,
             query: watchedQuery
         });
-        refresh?.();
+        onQueryRefresh?.();
     }, [
-        value.spec,
+        onQueryRefresh,
         onSpecChange,
-        watchedQuery,
+        value.spec,
         watchedOtherSpecs,
-        refresh
+        watchedQuery
     ]);
     const queryHandlerSettings = (0, _react.useMemo)(()=>{
         return withRunQueryButton ? {
@@ -104,7 +104,8 @@ const PluginEditor = /*#__PURE__*/ (0, _react.forwardRef)((props, ref)=>{
                         },
                         error: !!error,
                         helperText: error?.message,
-                        onChange: onSelectionChange
+                        onChange: onSelectionChange,
+                        filteredQueryPlugins: filteredQueryPlugins
                     }),
                     withRunQueryButton && !isLoading && /*#__PURE__*/ (0, _jsxruntime.jsx)(_material.Button, {
                         "data-testid": "run_query_button",

package/dist/cjs/components/PluginEditor/plugin-editor-api.js

@@ -20,23 +20,23 @@ Object.defineProperty(exports, "usePluginEditor", {
         return usePluginEditor;
     }
 });
-const _core = require("@perses-dev/core");
 const _react = require("react");
 const _immer = require("immer");
 const _runtime = require("../../runtime");
+const _utils = require("../../utils");
 function usePluginEditor(props) {
     // eslint-disable-next-line @typescript-eslint/no-empty-function
     const { pluginTypes, value, onHideQueryEditorChange = ()=>{} } = props; // setting onHideQueryEditorChange to empty function here because useEvent requires a function
     // Keep a stable reference, so we don't run the effect below when we don't need to
-    const onChange = (0, _core.useEvent)(props.onChange);
-    const onHideQuery = (0, _core.useEvent)(onHideQueryEditorChange);
+    const onChange = (0, _utils.useEvent)(props.onChange);
+    const onHideQuery = (0, _utils.useEvent)(onHideQueryEditorChange);
     // The previous spec state for PluginType and kind and a helper function for remembering current values
     const prevSpecState = (0, _react.useRef)({
         [value.selection.type]: {
             [value.selection.kind]: value.spec
         }
     });
-    const rememberCurrentSpecState = (0, _core.useEvent)(()=>{
+    const rememberCurrentSpecState = (0, _utils.useEvent)(()=>{
         let byPluginType = prevSpecState.current[value.selection.type];
         if (byPluginType === undefined) {
             byPluginType = {};

package/dist/cjs/components/PluginKindSelect/PluginKindSelect.js

@@ -25,10 +25,16 @@ const _material = require("@mui/material");
 const _react = require("react");
 const _runtime = require("../../runtime");
 const PluginKindSelect = /*#__PURE__*/ (0, _react.forwardRef)((props, ref)=>{
-    const { pluginTypes, value: propValue, onChange, ...others } = props;
+    const { pluginTypes, value: propValue, onChange, filteredQueryPlugins, ...others } = props;
     const { data, isLoading } = (0, _runtime.useListPluginMetadata)(pluginTypes);
-    const sortedData = (0, _react.useMemo)(()=>data?.sort((a, b)=>a.spec.display.name.localeCompare(b.spec.display.name)), [
-        data
+    const sortedData = (0, _react.useMemo)(()=>{
+        if (filteredQueryPlugins?.length) {
+            return data?.filter((i)=>filteredQueryPlugins.includes(i.spec.name))?.sort((a, b)=>a.spec.display.name.localeCompare(b.spec.display.name));
+        }
+        return data?.sort((a, b)=>a.spec.display.name.localeCompare(b.spec.display.name));
+    }, [
+        data,
+        filteredQueryPlugins
     ]);
     // Pass an empty value while options are still loading so MUI doesn't complain about us using an "out of range" value
     const value = !propValue || isLoading ? '' : selectionToOptionValue(propValue);

package/dist/cjs/components/PluginRegistry/PluginRegistry.js

@@ -21,9 +21,9 @@ Object.defineProperty(exports, "PluginRegistry", {
     }
 });
 const _jsxruntime = require("react/jsx-runtime");
-const _core = require("@perses-dev/core");
 const _react = require("react");
 const _runtime = require("../../runtime");
+const _utils = require("../../utils");
 const _pluginindexes = require("./plugin-indexes");
 function PluginRegistry(props) {
     const { pluginLoader: { getInstalledPlugins, importPluginModule }, children, defaultPluginKinds } = props;
@@ -32,7 +32,7 @@ function PluginRegistry(props) {
     const importCache = (0, _react.useRef)(new Map());
     // Do useEvent here since this accesses the importPluginModule prop and we want a stable reference to it for the
     // callback below
-    const loadPluginModule = (0, _core.useEvent)((resource)=>{
+    const loadPluginModule = (0, _utils.useEvent)((resource)=>{
         let request = importCache.current.get(resource);
         if (request === undefined) {
             request = importPluginModule(resource);

package/dist/cjs/components/PluginRegistry/plugin-indexes.js

@@ -28,12 +28,12 @@ _export(exports, {
         return usePluginIndexes;
     }
 });
-const _core = require("@perses-dev/core");
 const _react = require("react");
+const _utils = require("../../utils");
 function usePluginIndexes(getInstalledPlugins) {
     // Creates indexes from the installed plugins data (does useEvent because this accesses the getInstalledPlugins prop
     // and we want a stable reference for the callback below)
-    const createPluginIndexes = (0, _core.useEvent)(async ()=>{
+    const createPluginIndexes = (0, _utils.useEvent)(async ()=>{
         const installedPlugins = await getInstalledPlugins();
         // Create the two indexes from the installed plugins
         const pluginResourcesByNameAndKind = new Map();

package/dist/cjs/components/TimeRangeControls/TimeRangeControls.js

@@ -211,7 +211,11 @@ function TimeRangeControls({ heightPx, showTimeRangeSelector = true, showRefresh
                 description: _constants.TOOLTIP_TEXT.refreshInterval,
                 children: /*#__PURE__*/ (0, _jsxruntime.jsx)(_components.RefreshIntervalPicker, {
                     timeOptions: DEFAULT_REFRESH_INTERVAL_OPTIONS,
-                    value: refreshInterval,
+                    value: /* TODO: There is a bug here which should be fixed in a proper way. (This is only a quick remedy)
+                 display: 1m has the pastDuration of 60s. Initially (if the persisted value is 1m) when the page is loaded, instead of 60s, 1m is passed down.              
+                 This only happens for 1m, because for other items the display and the pastDuration are the same.  Example 30s-30s
+                 HERE The value MUST always be pastDuration, otherwise the component would not work as expected. 
+              */ DEFAULT_REFRESH_INTERVAL_OPTIONS.some((i)=>i.value.pastDuration === refreshInterval) ? refreshInterval : DEFAULT_REFRESH_INTERVAL_OPTIONS.find((i)=>i.display === refreshInterval)?.value.pastDuration,
                     onChange: handleRefreshIntervalChange,
                     height: height
                 })

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,6 +104,7 @@ function TextVariableEditorForm({ action, control }) {
 }
 function ListVariableEditorForm({ action, control }) {
     const form = (0, _reacthookform.useFormContext)();
+    const queryClient = (0, _reactquery.useQueryClient)();
     /** 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.
@@ -122,6 +123,17 @@ function ListVariableEditorForm({ action, control }) {
         control: control,
         name: 'spec.sort'
     });
+    const handleRefresh = (0, _react.useCallback)(async ()=>{
+        await queryClient.invalidateQueries({
+            queryKey: [
+                'variable',
+                previewSpec
+            ]
+        });
+    }, [
+        previewSpec,
+        queryClient
+    ]);
     // 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();
@@ -140,7 +152,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, {
@@ -172,7 +183,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 +202,8 @@ function ListVariableEditorForm({ action, control }) {
                                                 kind: v.selection.kind,
                                                 spec: v.spec
                                             });
-                                        }
+                                        },
+                                        onQueryRefresh: handleRefresh
                                     });
                                 }
                             })

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) {