@perses-dev/plugin-system 0.0.0-snapshot-scatter-chart-embed-8efdfab → 0.0.0-snapshot-explorer-plugin-c4a7621

package/dist/cjs/runtime/time-series-queries.js

@@ -1,4 +1,4 @@
-// Copyright 2023 The Perses Authors
+// Copyright 2024 The Perses Authors
 // Licensed under the Apache License, Version 2.0 (the "License");
 // you may not use this file except in compliance with the License.
 // You may obtain a copy of the License at
@@ -24,21 +24,21 @@ _export(exports, {
     TIME_SERIES_QUERY_KEY: function() {
         return TIME_SERIES_QUERY_KEY;
     },
-    useTimeSeriesQuery: function() {
-        return useTimeSeriesQuery;
-    },
-    useTimeSeriesQueries: function() {
-        return useTimeSeriesQueries;
+    getActiveTimeSeriesQueries: function() {
+        return getActiveTimeSeriesQueries;
     },
     useActiveTimeSeriesQueries: function() {
         return useActiveTimeSeriesQueries;
     },
-    getActiveTimeSeriesQueries: function() {
-        return getActiveTimeSeriesQueries;
+    useTimeSeriesQueries: function() {
+        return useTimeSeriesQueries;
+    },
+    useTimeSeriesQuery: function() {
+        return useTimeSeriesQuery;
     }
 });
 const _reactquery = require("@tanstack/react-query");
-const _templatevariables = require("./template-variables");
+const _variables = require("./variables");
 const _TimeRangeProvider = require("./TimeRangeProvider");
 const _datasources = require("./datasources");
 const _pluginregistry = require("./plugin-registry");
@@ -54,10 +54,10 @@ function filterVariableStateMap(v, names) {
     }
     return Object.fromEntries(Object.entries(v).filter(([name])=>names.includes(name)));
 }
-function getQueryOptions({ plugin , definition , context  }) {
-    const { timeRange , datasourceStore , suggestedStepMs , variableState , refreshKey  } = context;
-    const dependencies = (plugin === null || plugin === void 0 ? void 0 : plugin.dependsOn) ? plugin.dependsOn(definition.spec.plugin.spec, context) : {};
-    const variableDependencies = dependencies === null || dependencies === void 0 ? void 0 : dependencies.variables;
+function getQueryOptions({ plugin, definition, context }) {
+    const { timeRange, datasourceStore, suggestedStepMs, mode, variableState, refreshKey } = context;
+    const dependencies = plugin?.dependsOn ? plugin.dependsOn(definition.spec.plugin.spec, context) : {};
+    const variableDependencies = dependencies?.variables;
     // Determine queryKey
     const filteredVariabledState = filterVariableStateMap(variableState, variableDependencies);
     const variablesValueKey = getVariableValuesKey(filteredVariabledState);
@@ -66,16 +66,14 @@ function getQueryOptions({ plugin , definition , context  }) {
         timeRange,
         datasourceStore,
         suggestedStepMs,
+        mode,
         variablesValueKey,
         refreshKey
     ];
     // Determine queryEnabled
     let waitToLoad = false;
     if (variableDependencies) {
-        waitToLoad = variableDependencies.some((v)=>{
-            var _variableState_v;
-            return (_variableState_v = variableState[v]) === null || _variableState_v === void 0 ? void 0 : _variableState_v.loading;
-        });
+        waitToLoad = variableDependencies.some((v)=>variableState[v]?.loading);
     }
     const queryEnabled = plugin !== undefined && !waitToLoad;
     return {
@@ -84,18 +82,16 @@ function getQueryOptions({ plugin , definition , context  }) {
     };
 }
 const useTimeSeriesQuery = (definition, options, queryOptions)=>{
-    const { data: plugin  } = (0, _pluginregistry.usePlugin)(TIME_SERIES_QUERY_KEY, definition.spec.plugin.kind);
+    const { data: plugin } = (0, _pluginregistry.usePlugin)(TIME_SERIES_QUERY_KEY, definition.spec.plugin.kind);
     const context = useTimeSeriesQueryContext();
-    const { queryEnabled , queryKey  } = getQueryOptions({
+    const { queryEnabled, queryKey } = getQueryOptions({
         plugin,
         definition,
         context
     });
-    var _queryOptions_enabled;
     return (0, _reactquery.useQuery)({
-        enabled: ((_queryOptions_enabled = queryOptions === null || queryOptions === void 0 ? void 0 : queryOptions.enabled) !== null && _queryOptions_enabled !== void 0 ? _queryOptions_enabled : true) || queryEnabled,
+        enabled: (queryOptions?.enabled ?? true) || queryEnabled,
         queryKey: queryKey,
-        refetchInterval: context.refreshIntervalInMs > 0 ? context.refreshIntervalInMs : false,
         queryFn: ()=>{
             // The 'enabled' option should prevent this from happening, but make TypeScript happy by checking
             if (plugin === undefined) {
@@ -104,37 +100,38 @@ const useTimeSeriesQuery = (definition, options, queryOptions)=>{
             // Keep options out of query key so we don't re-run queries because suggested step changes
             const ctx = {
                 ...context,
-                suggestedStepMs: options === null || options === void 0 ? void 0 : options.suggestedStepMs
+                suggestedStepMs: options?.suggestedStepMs
             };
             return plugin.getTimeSeriesData(definition.spec.plugin.spec, ctx);
         }
     });
 };
 function useTimeSeriesQueries(definitions, options, queryOptions) {
-    const { getPlugin  } = (0, _pluginregistry.usePluginRegistry)();
-    const context = useTimeSeriesQueryContext();
+    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
+    };
     const pluginLoaderResponse = (0, _pluginregistry.usePlugins)(TIME_SERIES_QUERY_KEY, definitions.map((d)=>({
             kind: d.spec.plugin.kind
         })));
     return (0, _reactquery.useQueries)({
         queries: definitions.map((definition, idx)=>{
-            var _pluginLoaderResponse_idx;
-            const plugin = (_pluginLoaderResponse_idx = pluginLoaderResponse[idx]) === null || _pluginLoaderResponse_idx === void 0 ? void 0 : _pluginLoaderResponse_idx.data;
-            const { queryEnabled , queryKey  } = getQueryOptions({
+            const plugin = pluginLoaderResponse[idx]?.data;
+            const { queryEnabled, queryKey } = getQueryOptions({
                 plugin,
                 definition,
                 context
             });
-            var _queryOptions_enabled;
             return {
-                enabled: ((_queryOptions_enabled = queryOptions === null || queryOptions === void 0 ? void 0 : queryOptions.enabled) !== null && _queryOptions_enabled !== void 0 ? _queryOptions_enabled : true) && queryEnabled,
+                enabled: (queryOptions?.enabled ?? true) && queryEnabled,
                 queryKey: queryKey,
-                refetchInterval: context.refreshIntervalInMs > 0 ? context.refreshIntervalInMs : undefined,
                 queryFn: async ()=>{
-                    // Keep options out of query key so we don't re-run queries because suggested step changes
                     const ctx = {
                         ...context,
-                        suggestedStepMs: options === null || options === void 0 ? void 0 : options.suggestedStepMs
+                        // 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);
@@ -147,15 +144,14 @@ function useTimeSeriesQueries(definitions, options, queryOptions) {
 /**
  * Build the time series query context object from data available at runtime
  */ function useTimeSeriesQueryContext() {
-    const { absoluteTimeRange , refreshKey , refreshIntervalInMs  } = (0, _TimeRangeProvider.useTimeRange)();
-    const variableState = (0, _templatevariables.useVariableValues)();
+    const { absoluteTimeRange, refreshKey } = (0, _TimeRangeProvider.useTimeRange)();
+    const variableState = (0, _variables.useAllVariableValues)();
     const datasourceStore = (0, _datasources.useDatasourceStore)();
     return {
         timeRange: absoluteTimeRange,
         variableState,
         datasourceStore,
-        refreshKey,
-        refreshIntervalInMs: refreshIntervalInMs
+        refreshKey
     };
 }
 function useActiveTimeSeriesQueries() {
@@ -168,9 +164,8 @@ function getActiveTimeSeriesQueries(cache) {
     for (const query of cache.findAll({
         type: 'active'
     })){
-        var _query_queryKey;
-        const firstPart = (_query_queryKey = query.queryKey) === null || _query_queryKey === void 0 ? void 0 : _query_queryKey[0];
-        if ((firstPart === null || firstPart === void 0 ? void 0 : firstPart.kind) && firstPart.kind.startsWith(TIME_SERIES_QUERY_KEY)) {
+        const firstPart = query.queryKey?.[0];
+        if (firstPart?.kind && firstPart.kind.startsWith(TIME_SERIES_QUERY_KEY)) {
             queries.push(query);
         }
     }

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

@@ -38,16 +38,16 @@ const _pluginregistry = require("./plugin-registry");
 const _TimeRangeProvider = require("./TimeRangeProvider");
 const TRACE_QUERY_KEY = 'TraceQuery';
 function getUnixTimeRange(timeRange) {
-    const { start , end  } = timeRange;
+    const { start, end } = timeRange;
     return {
         start: Math.ceil((0, _datefns.getUnixTime)(start)),
         end: Math.ceil((0, _datefns.getUnixTime)(end))
     };
 }
 function useTraceQueries(definitions) {
-    const { getPlugin  } = (0, _pluginregistry.usePluginRegistry)();
+    const { getPlugin } = (0, _pluginregistry.usePluginRegistry)();
     const datasourceStore = (0, _datasources.useDatasourceStore)();
-    const { absoluteTimeRange  } = (0, _TimeRangeProvider.useTimeRange)();
+    const { absoluteTimeRange } = (0, _TimeRangeProvider.useTimeRange)();
     const context = {
         datasourceStore,
         absoluteTimeRange
@@ -56,20 +56,23 @@ function useTraceQueries(definitions) {
     // https://tanstack.com/query/v4/docs/react/reference/useQuery
     return (0, _reactquery.useQueries)({
         queries: definitions.map((definition)=>{
-            var _definition_spec, _definition_spec_plugin;
             const queryKey = [
                 definition,
                 datasourceStore,
                 absoluteTimeRange
             ]; // `queryKey` watches and reruns `queryFn` if keys in the array change
-            const traceQueryKind = definition === null || definition === void 0 ? void 0 : (_definition_spec = definition.spec) === null || _definition_spec === void 0 ? void 0 : (_definition_spec_plugin = _definition_spec.plugin) === null || _definition_spec_plugin === void 0 ? void 0 : _definition_spec_plugin.kind;
+            const traceQueryKind = definition?.spec?.plugin?.kind;
             return {
                 queryKey: queryKey,
                 queryFn: async ()=>{
                     const plugin = await getPlugin(TRACE_QUERY_KEY, traceQueryKind);
                     const data = await plugin.getTraceData(definition.spec.plugin.spec, context);
                     return data;
-                }
+                },
+                // The data returned by getTraceData() contains circular dependencies (a span has a reference to the parent span, and the parent span has an array of child spans)
+                // Therefore structuralSharing must be turned off, otherwise the query is stuck in the 'fetching' state on re-fetch.
+                // Ref: https://github.com/TanStack/query/issues/6954#issuecomment-1962321426
+                structuralSharing: false
             };
         })
     });

package/dist/cjs/runtime/{template-variables.js → variables.js}

@@ -1,4 +1,4 @@
-// Copyright 2023 The Perses Authors
+// Copyright 2024 The Perses Authors
 // Licensed under the Apache License, Version 2.0 (the "License");
 // you may not use this file except in compliance with the License.
 // You may obtain a copy of the License at
@@ -21,42 +21,34 @@ function _export(target, all) {
     });
 }
 _export(exports, {
+    VariableContext: function() {
+        return VariableContext;
+    },
     VariableStoreStateMap: function() {
         return VariableStoreStateMap;
     },
-    TemplateVariableContext: function() {
-        return TemplateVariableContext;
+    useAllVariableValues: function() {
+        return useAllVariableValues;
     },
-    useTemplateVariableValues: function() {
-        return useTemplateVariableValues;
+    useReplaceVariablesInString: function() {
+        return useReplaceVariablesInString;
     },
     useVariableValues: function() {
         return useVariableValues;
-    },
-    useReplaceVariablesInString: function() {
-        return useReplaceVariablesInString;
     }
 });
 const _react = require("react");
 const _immer = require("immer");
 const _utils = require("../utils");
 const _builtinvariables = require("./builtin-variables");
-function _define_property(obj, key, value) {
-    if (key in obj) {
-        Object.defineProperty(obj, key, {
-            value: value,
-            enumerable: true,
-            configurable: true,
-            writable: true
-        });
-    } else {
-        obj[key] = value;
-    }
-    return obj;
-}
-let _immerable = _immer.immerable;
 class VariableStoreStateMap {
     /**
+   * "Immerable" is mandatory to be able to use this class in an immer context.
+   * Ref: https://docs.pmnd.rs/zustand/integrations/immer-middleware#gotchas
+   */ [_immer.immerable] = true;
+    DEFAULT_LOCAL_SOURCE_NAME = '';
+    _state = {};
+    /**
    * Get variable state by key.
    * @param key
    */ get(key) {
@@ -84,7 +76,6 @@ class VariableStoreStateMap {
    * Delete variable state by key.
    * @param key
    */ delete(key) {
-        var _Object_keys;
         const result = this.has(key);
         const sourceName = this._sourceName(key.source);
         const sourceStates = this._state[sourceName];
@@ -93,40 +84,31 @@ class VariableStoreStateMap {
             delete sourceStates[key.name];
         }
         // Delete source state from state if empty
-        if (((_Object_keys = Object.keys(sourceStates !== null && sourceStates !== void 0 ? sourceStates : {})) === null || _Object_keys === void 0 ? void 0 : _Object_keys.length) === 0) {
+        if (Object.keys(sourceStates ?? {})?.length === 0) {
             delete this._state[sourceName];
         }
         return result;
     }
     _sourceName(source) {
-        return source !== null && source !== void 0 ? source : this.DEFAULT_LOCAL_SOURCE_NAME;
+        return source ?? this.DEFAULT_LOCAL_SOURCE_NAME;
     }
     _sourceStatesOrEmpty(source) {
-        var _this__state_this__sourceName;
-        return (_this__state_this__sourceName = this._state[this._sourceName(source)]) !== null && _this__state_this__sourceName !== void 0 ? _this__state_this__sourceName : {};
-    }
-    constructor(){
-        /**
-   * "Immerable" is mandatory to be able to use this class in an immer context.
-   * Ref: https://docs.pmnd.rs/zustand/integrations/immer-middleware#gotchas
-   */ _define_property(this, _immerable, true);
-        _define_property(this, "DEFAULT_LOCAL_SOURCE_NAME", '');
-        _define_property(this, "_state", {});
+        return this._state[this._sourceName(source)] ?? {};
     }
 }
-const TemplateVariableContext = (0, _react.createContext)(undefined);
-function useTemplateVariableContext() {
-    const ctx = (0, _react.useContext)(TemplateVariableContext);
+const VariableContext = (0, _react.createContext)(undefined);
+function useVariableContext() {
+    const ctx = (0, _react.useContext)(VariableContext);
     if (ctx === undefined) {
-        throw new Error('No TemplateVariableContext found. Did you forget a Provider?');
+        throw new Error('No VariableContext found. Did you forget a Provider?');
     }
     return ctx;
 }
-function useTemplateVariableValues(names) {
-    const { state  } = useTemplateVariableContext();
+function useVariableValues(names) {
+    const { state } = useVariableContext();
     const values = (0, _react.useMemo)(()=>{
         const values = {};
-        names === null || names === void 0 ? void 0 : names.forEach((name)=>{
+        names?.forEach((name)=>{
             const s = state[name];
             if (s) {
                 values[name] = s;
@@ -142,14 +124,22 @@ function useTemplateVariableValues(names) {
     }
     return values;
 }
-function useVariableValues(names) {
-    const templateVariableValues = useTemplateVariableValues(names);
+function useAllVariableValues(names) {
+    const variableValues = useVariableValues(names);
     const builtinVariableValues = (0, _builtinvariables.useBuiltinVariableValues)(names);
-    return Object.assign(templateVariableValues, builtinVariableValues);
+    return (0, _react.useMemo)(()=>{
+        return {
+            ...variableValues,
+            ...builtinVariableValues
+        };
+    }, [
+        variableValues,
+        builtinVariableValues
+    ]);
 }
 function useReplaceVariablesInString(str) {
-    const variablesInString = str ? (0, _utils.parseTemplateVariables)(str) : [];
-    const variableValues = useVariableValues(variablesInString);
+    const variablesInString = str ? (0, _utils.parseVariables)(str) : [];
+    const variableValues = useAllVariableValues(variablesInString);
     if (!str) return undefined;
-    return (0, _utils.replaceTemplateVariables)(str, variableValues);
+    return (0, _utils.replaceVariables)(str, variableValues);
 }

package/dist/cjs/stories/shared-utils/decorators/WithDataQueries.js

@@ -33,7 +33,7 @@ const WithDataQueries = (Story, context)=>{
             definitions: []
         }
     };
-    const props = parameter === null || parameter === void 0 ? void 0 : parameter.props;
+    const props = parameter?.props;
     return /*#__PURE__*/ (0, _jsxruntime.jsx)(_pluginsystem.DataQueriesProvider, {
         ...props,
         children: /*#__PURE__*/ (0, _jsxruntime.jsx)(Story, {})

package/dist/cjs/stories/shared-utils/decorators/WithPluginRegistry.js

@@ -22,73 +22,9 @@ Object.defineProperty(exports, "WithPluginRegistry", {
 });
 const _jsxruntime = require("react/jsx-runtime");
 const _pluginsystem = require("@perses-dev/plugin-system");
-const _pluginjson = /*#__PURE__*/ _interop_require_default(require("@perses-dev/prometheus-plugin/plugin.json"));
-const _pluginjson1 = /*#__PURE__*/ _interop_require_default(require("@perses-dev/panels-plugin/plugin.json"));
-function _interop_require_default(obj) {
-    return obj && obj.__esModule ? obj : {
-        default: obj
-    };
-}
-function _getRequireWildcardCache(nodeInterop) {
-    if (typeof WeakMap !== "function") return null;
-    var cacheBabelInterop = new WeakMap();
-    var cacheNodeInterop = new WeakMap();
-    return (_getRequireWildcardCache = function(nodeInterop) {
-        return nodeInterop ? cacheNodeInterop : cacheBabelInterop;
-    })(nodeInterop);
-}
-function _interop_require_wildcard(obj, nodeInterop) {
-    if (!nodeInterop && obj && obj.__esModule) {
-        return obj;
-    }
-    if (obj === null || typeof obj !== "object" && typeof obj !== "function") {
-        return {
-            default: obj
-        };
-    }
-    var cache = _getRequireWildcardCache(nodeInterop);
-    if (cache && cache.has(obj)) {
-        return cache.get(obj);
-    }
-    var newObj = {};
-    var hasPropertyDescriptor = Object.defineProperty && Object.getOwnPropertyDescriptor;
-    for(var key in obj){
-        if (key !== "default" && Object.prototype.hasOwnProperty.call(obj, key)) {
-            var desc = hasPropertyDescriptor ? Object.getOwnPropertyDescriptor(obj, key) : null;
-            if (desc && (desc.get || desc.set)) {
-                Object.defineProperty(newObj, key, desc);
-            } else {
-                newObj[key] = obj[key];
-            }
-        }
-    }
-    newObj.default = obj;
-    if (cache) {
-        cache.set(obj, newObj);
-    }
-    return newObj;
-}
-const bundledPluginLoader = (0, _pluginsystem.dynamicImportPluginLoader)([
-    {
-        resource: _pluginjson.default,
-        // This throws an error in CI (but not locally for some reason), likely because
-        // this package isn't a dependency for dashboards. We probably do not want to
-        // make it one solely for type-checking in storybook.
-        // eslint-disable-next-line @typescript-eslint/ban-ts-comment
-        // @ts-ignore
-        importPlugin: ()=>Promise.resolve().then(()=>/*#__PURE__*/ _interop_require_wildcard(require("@perses-dev/prometheus-plugin")))
-    },
-    {
-        resource: _pluginjson1.default,
-        // Same comment as above.
-        // eslint-disable-next-line @typescript-eslint/ban-ts-comment
-        // @ts-ignore
-        importPlugin: ()=>Promise.resolve().then(()=>/*#__PURE__*/ _interop_require_wildcard(require("@perses-dev/panels-plugin")))
-    }
-]);
 const WithPluginRegistry = (Story)=>{
     return /*#__PURE__*/ (0, _jsxruntime.jsx)(_pluginsystem.PluginRegistry, {
-        pluginLoader: bundledPluginLoader,
+        pluginLoader: (0, _pluginsystem.remotePluginLoader)(),
         defaultPluginKinds: {
             TimeSeriesQuery: 'PrometheusTimeSeriesQuery',
             TraceQuery: 'TempoTraceQuery'

package/dist/cjs/stories/shared-utils/decorators/WithPluginSystemBuiltinVariables.js

@@ -34,7 +34,7 @@ const WithPluginSystemBuiltinVariables = (Story, context)=>{
     const parameter = isWithBuiltinVariableParameter(initParameter) ? initParameter : {
         props: defaultValue
     };
-    const props = parameter === null || parameter === void 0 ? void 0 : parameter.props;
+    const props = parameter?.props;
     return /*#__PURE__*/ (0, _jsxruntime.jsx)(_runtime.BuiltinVariableContext.Provider, {
         value: props,
         children: /*#__PURE__*/ (0, _jsxruntime.jsx)(Story, {})

package/dist/cjs/stories/shared-utils/decorators/WithPluginSystemDatasourceStore.js

@@ -28,7 +28,7 @@ function isWithDatastoreStoreParameter(parameter) {
     return !!parameter && typeof parameter === 'object' && 'props' in parameter;
 }
 const WithPluginSystemDatasourceStore = (Story, context)=>{
-    const { getPlugin  } = (0, _pluginsystem.usePluginRegistry)();
+    const { getPlugin } = (0, _pluginsystem.usePluginRegistry)();
     const initParameter = context.parameters.withPluginSystemDatasourceStore;
     // This currently provides a very simplified default to enable use in some
     // basic stories. It likely will need expanding in the future.
@@ -60,8 +60,8 @@ const WithPluginSystemDatasourceStore = (Story, context)=>{
             }
             throw new Error(`WithDatasourceStore is not configured to support kind: ${selector.kind}`);
         },
-        listDatasourceSelectItems: async (datasourcePluginKind)=>{
-            if (datasourcePluginKind === 'PrometheusDatasource') {
+        listDatasourceSelectItems: async (datasourcePluginName)=>{
+            if (datasourcePluginName === 'PrometheusDatasource') {
                 return Promise.resolve([
                     {
                         items: [
@@ -75,7 +75,7 @@ const WithPluginSystemDatasourceStore = (Story, context)=>{
                     }
                 ]);
             }
-            throw new Error(`WithDatasourceStore is not configured to support kind: ${datasourcePluginKind}`);
+            throw new Error(`WithDatasourceStore is not configured to support kind: ${datasourcePluginName}`);
         },
         getSavedDatasources: ()=>{
             return {};
@@ -93,7 +93,7 @@ const WithPluginSystemDatasourceStore = (Story, context)=>{
     const parameter = isWithDatastoreStoreParameter(initParameter) ? initParameter : {
         props: defaultValue
     };
-    const props = parameter === null || parameter === void 0 ? void 0 : parameter.props;
+    const props = parameter?.props;
     return /*#__PURE__*/ (0, _jsxruntime.jsx)(_pluginsystem.DatasourceStoreContext.Provider, {
         value: props,
         children: /*#__PURE__*/ (0, _jsxruntime.jsx)(Story, {})

package/dist/cjs/stories/shared-utils/decorators/{WithPluginSystemTemplateVariables.js → WithPluginSystemVariables.js}

@@ -1,4 +1,4 @@
-// Copyright 2023 The Perses Authors
+// Copyright 2024 The Perses Authors
 // Licensed under the Apache License, Version 2.0 (the "License");
 // you may not use this file except in compliance with the License.
 // You may obtain a copy of the License at
@@ -14,28 +14,28 @@
 Object.defineProperty(exports, "__esModule", {
     value: true
 });
-Object.defineProperty(exports, "WithPluginSystemTemplateVariables", {
+Object.defineProperty(exports, "WithPluginSystemVariables", {
     enumerable: true,
     get: function() {
-        return WithPluginSystemTemplateVariables;
+        return WithPluginSystemVariables;
     }
 });
 const _jsxruntime = require("react/jsx-runtime");
 const _runtime = require("../../../runtime");
 // Type guard because storybook types parameters as `any`
-function isWithTemplateVariableParameter(parameter) {
+function isWithVariableParameter(parameter) {
     return !!parameter && typeof parameter === 'object' && 'props' in parameter;
 }
-const WithPluginSystemTemplateVariables = (Story, context)=>{
-    const initParameter = context.parameters.withPluginSystemTemplateVariables;
+const WithPluginSystemVariables = (Story, context)=>{
+    const initParameter = context.parameters.withPluginSystemVariables;
     const defaultValue = {
         state: {}
     };
-    const parameter = isWithTemplateVariableParameter(initParameter) ? initParameter : {
+    const parameter = isWithVariableParameter(initParameter) ? initParameter : {
         props: defaultValue
     };
-    const props = parameter === null || parameter === void 0 ? void 0 : parameter.props;
-    return /*#__PURE__*/ (0, _jsxruntime.jsx)(_runtime.TemplateVariableContext.Provider, {
+    const props = parameter?.props;
+    return /*#__PURE__*/ (0, _jsxruntime.jsx)(_runtime.VariableContext.Provider, {
         value: props,
         children: /*#__PURE__*/ (0, _jsxruntime.jsx)(Story, {})
     });

package/dist/cjs/stories/shared-utils/decorators/WithTimeRange.js

@@ -29,7 +29,7 @@ function isWithTimeRangeParameter(parameter) {
 const WithTimeRange = (Story, context)=>{
     const initParameter = context.parameters.withTimeRange;
     const parameter = isWithTimeRangeParameter(initParameter) ? initParameter : undefined;
-    const props = parameter === null || parameter === void 0 ? void 0 : parameter.props;
+    const props = parameter?.props;
     return /*#__PURE__*/ (0, _jsxruntime.jsx)(_pluginsystem.TimeRangeProvider, {
         refreshInterval: "0s",
         timeRange: {

package/dist/cjs/stories/shared-utils/decorators/index.js

@@ -1,4 +1,4 @@
-// Copyright 2023 The Perses Authors
+// Copyright 2024 The Perses Authors
 // Licensed under the Apache License, Version 2.0 (the "License");
 // you may not use this file except in compliance with the License.
 // You may obtain a copy of the License at
@@ -18,7 +18,7 @@ _export_star(require("./WithDataQueries"), exports);
 _export_star(require("./WithPluginRegistry"), exports);
 _export_star(require("./WithPluginSystemBuiltinVariables"), exports);
 _export_star(require("./WithPluginSystemDatasourceStore"), exports);
-_export_star(require("./WithPluginSystemTemplateVariables"), exports);
+_export_star(require("./WithPluginSystemVariables"), exports);
 _export_star(require("./WithTimeRange"), exports);
 function _export_star(from, to) {
     Object.keys(from).forEach(function(k) {

package/dist/cjs/test/mock-data.js

@@ -64,14 +64,35 @@ const MOCK_TIME_SERIES_DATA = {
     ]
 };
 const MOCK_TRACE_DATA = {
-    traces: [
+    searchResult: [
         {
             durationMs: 1120,
-            errorCount: 0,
-            spanCount: 10,
+            serviceStats: {
+                'shop-backend': {
+                    spanCount: 4,
+                    errorCount: 0
+                },
+                'cart-service': {
+                    spanCount: 2,
+                    errorCount: 0
+                },
+                'article-service': {
+                    spanCount: 2,
+                    errorCount: 0
+                },
+                'auth-service': {
+                    spanCount: 1,
+                    errorCount: 0
+                },
+                postgres: {
+                    spanCount: 1,
+                    errorCount: 0
+                }
+            },
             startTimeUnixMs: 1699916103945861,
             traceId: '95ba9202315c29c801b5aa41452aa775',
-            name: 'rootServiceName="shop-backend", rootTraceName="shop-backend"'
+            rootServiceName: 'shop-backend',
+            rootTraceName: 'article-to-cart'
         }
     ],
     metadata: {

package/dist/cjs/test/render.js

@@ -25,13 +25,6 @@ const _react = require("@testing-library/react");
 const _reactquery = require("@tanstack/react-query");
 const _PluginRegistry = require("../components/PluginRegistry");
 const _testplugins = require("./test-plugins");
-const testLogger = {
-    log: console.log,
-    warn: console.warn,
-    error: ()=>{
-    // Don't log network errors in tests to the console
-    }
-};
 function renderWithContext(ui, renderOptions, contextOptions) {
     // Create a new QueryClient for each test to avoid caching issues
     const queryClient = new _reactquery.QueryClient({
@@ -40,15 +33,13 @@ function renderWithContext(ui, renderOptions, contextOptions) {
                 refetchOnWindowFocus: false,
                 retry: false
             }
-        },
-        logger: testLogger
+        }
     });
-    var _contextOptions_defaultPluginKinds;
     return (0, _react.render)(/*#__PURE__*/ (0, _jsxruntime.jsx)(_reactquery.QueryClientProvider, {
         client: queryClient,
         children: /*#__PURE__*/ (0, _jsxruntime.jsx)(_PluginRegistry.PluginRegistry, {
             pluginLoader: _testplugins.testPluginLoader,
-            defaultPluginKinds: (_contextOptions_defaultPluginKinds = contextOptions === null || contextOptions === void 0 ? void 0 : contextOptions.defaultPluginKinds) !== null && _contextOptions_defaultPluginKinds !== void 0 ? _contextOptions_defaultPluginKinds : {
+            defaultPluginKinds: contextOptions?.defaultPluginKinds ?? {
                 TimeSeriesQuery: 'PrometheusTimeSeriesQuery'
             },
             children: ui