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

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 } = props;
     const { defaultInitialQueryDefinition, isLoading } = useDefaultQueryDefinition(queryTypes, filteredQueryPlugins);
     // State for which queries are collapsed
     const [queriesCollapsed, setQueriesCollapsed] = (0, _react.useState)(queries.map(()=>false));
@@ -132,11 +132,12 @@ 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,
-                        onCollapseExpand: handleQueryCollapseExpand,
-                        filteredQueryPlugins: filteredQueryPlugins
+                        onCollapseExpand: handleQueryCollapseExpand
                     }, i))
             }),
             /*#__PURE__*/ (0, _jsxruntime.jsx)(_material.Button, {

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

@@ -27,54 +27,100 @@ 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, 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,
+                queryResult: queryResult,
+                filteredQueryPlugins: filteredQueryPlugins,
                 onChange: (next)=>onChange(index, next)
             })
         ]
@@ -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 { value, onChange, queryTypes, queryResult, filteredQueryPlugins, ...others } = props;
     const handlePluginChange = (next)=>{
         onChange((0, _immer.produce)(value, (draft)=>{
             draft.kind = next.selection.type;
@@ -100,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,
@@ -112,8 +156,9 @@ QueryEditorContainer.displayName = 'QueryEditorContainer';
                 },
                 spec: value.spec.plugin.spec
             },
-            onChange: handlePluginChange,
-            filteredQueryPlugins: filteredQueryPlugins
+            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, filteredQueryPlugins, ...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 ? {

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

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/time-series-queries.js

@@ -45,20 +45,20 @@ const _utils = require("./utils");
 const _variables = require("./variables");
 const TIME_SERIES_QUERY_KEY = 'TimeSeriesQuery';
 function getQueryOptions({ plugin, definition, context }) {
-    const { timeRange, datasourceStore, suggestedStepMs, mode, variableState, refreshKey } = context;
+    const { timeRange, suggestedStepMs, mode, variableState } = context;
     const dependencies = plugin?.dependsOn ? plugin.dependsOn(definition.spec.plugin.spec, context) : {};
     const variableDependencies = dependencies?.variables;
     // Determine queryKey
     const filteredVariabledState = (0, _utils.filterVariableStateMap)(variableState, variableDependencies);
     const variablesValueKey = (0, _utils.getVariableValuesKey)(filteredVariabledState);
     const queryKey = [
+        'query',
+        TIME_SERIES_QUERY_KEY,
         definition,
         timeRange,
-        datasourceStore,
-        suggestedStepMs,
-        mode,
         variablesValueKey,
-        refreshKey
+        suggestedStepMs,
+        mode
     ];
     // Determine queryEnabled
     let waitToLoad = false;
@@ -100,8 +100,8 @@ function useTimeSeriesQueries(definitions, options, queryOptions) {
     const { getPlugin } = (0, _pluginregistry.usePluginRegistry)();
     const context = {
         ...useTimeSeriesQueryContext(),
-        // We need mode to be part query key because this drives the type of query done (instant VS range query)
-        mode: options?.mode
+        mode: options?.mode,
+        suggestedStepMs: options?.suggestedStepMs
     };
     const pluginLoaderResponse = (0, _pluginregistry.usePlugins)(TIME_SERIES_QUERY_KEY, definitions.map((d)=>({
             kind: d.spec.plugin.kind
@@ -119,13 +119,8 @@ function useTimeSeriesQueries(definitions, options, queryOptions) {
                 enabled: (queryOptions?.enabled ?? true) && queryEnabled,
                 queryKey: queryKey,
                 queryFn: async ({ signal })=>{
-                    const ctx = {
-                        ...context,
-                        // Keep suggested step changes out of the query key, so we don´t have to run again query when it changes
-                        suggestedStepMs: options?.suggestedStepMs
-                    };
                     const plugin = await getPlugin(TIME_SERIES_QUERY_KEY, definition.spec.plugin.kind);
-                    const data = await plugin.getTimeSeriesData(definition.spec.plugin.spec, ctx, signal);
+                    const data = await plugin.getTimeSeriesData(definition.spec.plugin.spec, context, signal);
                     return data;
                 }
             };
@@ -135,14 +130,13 @@ function useTimeSeriesQueries(definitions, options, queryOptions) {
 /**
  * Build the time series query context object from data available at runtime
  */ function useTimeSeriesQueryContext() {
-    const { absoluteTimeRange, refreshKey } = (0, _TimeRangeProvider.useTimeRange)();
+    const { absoluteTimeRange } = (0, _TimeRangeProvider.useTimeRange)();
     const variableState = (0, _variables.useAllVariableValues)();
     const datasourceStore = (0, _datasources.useDatasourceStore)();
     return {
         timeRange: absoluteTimeRange,
         variableState,
-        datasourceStore,
-        refreshKey
+        datasourceStore
     };
 }
 function useActiveTimeSeriesQueries() {

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

@@ -65,14 +65,15 @@ function useTraceQueries(definitions) {
     });
 }
 function getQueryOptions({ plugin, definition, context }) {
-    const { datasourceStore, variableState, absoluteTimeRange } = context;
+    const { variableState, absoluteTimeRange } = context;
     const dependencies = plugin?.dependsOn ? plugin.dependsOn(definition.spec.plugin.spec, context) : {};
     const variableDependencies = dependencies?.variables;
     const filteredVariabledState = (0, _utils.filterVariableStateMap)(variableState, variableDependencies);
     const variablesValueKey = (0, _utils.getVariableValuesKey)(filteredVariabledState);
     const queryKey = [
+        'query',
+        TRACE_QUERY_KEY,
         definition,
-        datasourceStore,
         absoluteTimeRange,
         variablesValueKey
     ];

package/dist/cjs/test/utils.js

@@ -41,10 +41,10 @@ function getTestContextWrapper(contextOptions) {
         end: new Date()
     };
     return function Wrapper({ children }) {
-        return /*#__PURE__*/ (0, _jsxruntime.jsx)(_runtime.TimeRangeProvider, {
-            timeRange: timeRange,
-            children: /*#__PURE__*/ (0, _jsxruntime.jsx)(_reactquery.QueryClientProvider, {
-                client: queryClient,
+        return /*#__PURE__*/ (0, _jsxruntime.jsx)(_reactquery.QueryClientProvider, {
+            client: queryClient,
+            children: /*#__PURE__*/ (0, _jsxruntime.jsx)(_runtime.TimeRangeProviderBasic, {
+                initialTimeRange: timeRange,
                 children: /*#__PURE__*/ (0, _jsxruntime.jsx)(_components.PluginRegistry, {
                     pluginLoader: _testplugins.testPluginLoader,
                     defaultPluginKinds: contextOptions?.defaultPluginKinds ?? {

package/dist/components/MultiQueryEditor/MultiQueryEditor.d.ts

@@ -1,10 +1,12 @@
 /// <reference types="react" />
 import { QueryDefinition, QueryPluginType } from '@perses-dev/core';
+import { QueryData } from '../../runtime';
 import { PluginEditorRef } from '../PluginEditor';
 export interface MultiQueryEditorProps {
     queryTypes: QueryPluginType[];
     filteredQueryPlugins?: string[];
     queries?: QueryDefinition[];
+    queryResults?: QueryData[];
     onChange: (queries: QueryDefinition[]) => void;
 }
 /**