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

package/dist/cjs/remote/PluginRuntime.js

@@ -0,0 +1,267 @@
+/* eslint-disable @typescript-eslint/no-require-imports */ // 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
+//
+// http://www.apache.org/licenses/LICENSE-2.0
+//
+// Unless required by applicable law or agreed to in writing, software
+// distributed under the License is distributed on an "AS IS" BASIS,
+// WITHOUT WARRANTIES OR CONDITIONS OF ANY KIND, either express or implied.
+// See the License for the specific language governing permissions and
+// limitations under the License.
+"use strict";
+Object.defineProperty(exports, "__esModule", {
+    value: true
+});
+function _export(target, all) {
+    for(var name in all)Object.defineProperty(target, name, {
+        enumerable: true,
+        get: all[name]
+    });
+}
+_export(exports, {
+    loadPlugin: function() {
+        return loadPlugin;
+    },
+    pluginRuntime: function() {
+        return pluginRuntime;
+    },
+    usePluginRuntime: function() {
+        return usePluginRuntime;
+    }
+});
+const _runtime = require("@module-federation/enhanced/runtime");
+const _reactquery = /*#__PURE__*/ _interop_require_wildcard(require("@tanstack/react-query"));
+const _react = /*#__PURE__*/ _interop_require_default(require("react"));
+const _reactdom = /*#__PURE__*/ _interop_require_default(require("react-dom"));
+const _reactrouterdom = /*#__PURE__*/ _interop_require_wildcard(require("react-router-dom"));
+const _reacthookform = /*#__PURE__*/ _interop_require_wildcard(require("react-hook-form"));
+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 = {
+        __proto__: null
+    };
+    var hasPropertyDescriptor = Object.defineProperty && Object.getOwnPropertyDescriptor;
+    for(var key in obj){
+        if (key !== "default" && Object.prototype.hasOwnProperty.call(obj, key)) {
+            var desc = hasPropertyDescriptor ? Object.getOwnPropertyDescriptor(obj, key) : null;
+            if (desc && (desc.get || desc.set)) {
+                Object.defineProperty(newObj, key, desc);
+            } else {
+                newObj[key] = obj[key];
+            }
+        }
+    }
+    newObj.default = obj;
+    if (cache) {
+        cache.set(obj, newObj);
+    }
+    return newObj;
+}
+const pluginRuntime = (0, _runtime.init)({
+    name: '@perses/perses-ui-host',
+    remotes: [],
+    shared: {
+        react: {
+            version: _react.default.version,
+            lib: ()=>_react.default,
+            shareConfig: {
+                singleton: true,
+                requiredVersion: `^${_react.default.version}`
+            }
+        },
+        'react-dom': {
+            version: '18.3.1',
+            lib: ()=>_reactdom.default,
+            shareConfig: {
+                singleton: true,
+                requiredVersion: `^18.3.1`
+            }
+        },
+        'react-router-dom': {
+            version: '6.26.0',
+            lib: ()=>_reactrouterdom,
+            shareConfig: {
+                singleton: true,
+                requiredVersion: '^6.26.0'
+            }
+        },
+        '@tanstack/react-query': {
+            version: '4.36.1',
+            lib: ()=>_reactquery,
+            shareConfig: {
+                singleton: true,
+                requiredVersion: '^4.36.1'
+            }
+        },
+        'react-hook-form': {
+            version: '7.52.2',
+            lib: ()=>_reacthookform,
+            shareConfig: {
+                singleton: true,
+                requiredVersion: '^7.52.2'
+            }
+        },
+        echarts: {
+            version: '5.5.0',
+            lib: ()=>require('echarts'),
+            shareConfig: {
+                singleton: true,
+                requiredVersion: '^5.5.0'
+            }
+        },
+        '@perses-dev/components': {
+            version: '0.50.0',
+            lib: ()=>require('@perses-dev/components'),
+            shareConfig: {
+                singleton: true,
+                requiredVersion: '^0.50.0'
+            }
+        },
+        '@perses-dev/plugin-system': {
+            version: '0.50.0',
+            lib: ()=>require('@perses-dev/plugin-system'),
+            shareConfig: {
+                singleton: true,
+                requiredVersion: '^0.50.0'
+            }
+        },
+        '@perses-dev/explore': {
+            version: '0.50.0',
+            lib: ()=>require('@perses-dev/explore'),
+            shareConfig: {
+                singleton: true,
+                requiredVersion: '^0.50.0'
+            }
+        },
+        '@perses-dev/dashboards': {
+            version: '0.50.0',
+            lib: ()=>require('@perses-dev/dashboards'),
+            shareConfig: {
+                singleton: true,
+                requiredVersion: '^0.50.0'
+            }
+        },
+        // Below are the shared modules that are used by the plugins, this can be part of the SDK
+        'date-fns': {
+            version: '2.29.3',
+            lib: ()=>require('date-fns'),
+            shareConfig: {
+                singleton: true,
+                requiredVersion: '^2.29.3'
+            }
+        },
+        'date-fns-tz': {
+            version: '1.3.8',
+            lib: ()=>require('date-fns-tz'),
+            shareConfig: {
+                singleton: true,
+                requiredVersion: '^1.3.8'
+            }
+        },
+        lodash: {
+            version: '4.17.21',
+            lib: ()=>require('lodash'),
+            shareConfig: {
+                singleton: true,
+                requiredVersion: '^4.17.21'
+            }
+        },
+        '@emotion/react': {
+            version: '11.11.3',
+            lib: ()=>require('@emotion/react'),
+            shareConfig: {
+                singleton: true,
+                requiredVersion: '^11.11.3'
+            }
+        },
+        '@emotion/styled': {
+            version: '11.11.0',
+            lib: ()=>require('@emotion/styled'),
+            shareConfig: {
+                singleton: true,
+                requiredVersion: '^11.11.0'
+            }
+        },
+        '@hookform/resolvers/zod': {
+            version: '3.3.4',
+            lib: ()=>require('@hookform/resolvers/zod'),
+            shareConfig: {
+                singleton: true,
+                requiredVersion: '^3.3.4'
+            }
+        },
+        'use-resize-observer': {
+            version: '9.1.0',
+            lib: ()=>require('use-resize-observer'),
+            shareConfig: {
+                singleton: true,
+                requiredVersion: '^9.1.0'
+            }
+        },
+        'mdi-material-ui': {
+            version: '7.4.0',
+            lib: ()=>require('mdi-material-ui'),
+            shareConfig: {
+                singleton: true,
+                requiredVersion: '^7.4.0'
+            }
+        },
+        immer: {
+            version: '9.0.15',
+            lib: ()=>require('immer'),
+            shareConfig: {
+                singleton: true,
+                requiredVersion: '^9.0.15'
+            }
+        }
+    }
+});
+const registerRemote = (name, baseURL)=>{
+    const existingRemote = pluginRuntime.options.remotes.find((remote)=>remote.name === name);
+    if (!existingRemote) {
+        const remoteEntryURL = baseURL ? `${baseURL}/${name}/mf-manifest.json` : `/plugins/${name}/mf-manifest.json`;
+        pluginRuntime.registerRemotes([
+            {
+                name,
+                entry: remoteEntryURL,
+                alias: name
+            }
+        ]);
+    }
+};
+const loadPlugin = async (moduleName, pluginName, baseURL)=>{
+    registerRemote(moduleName, baseURL);
+    return (0, _runtime.loadRemote)(`${moduleName}/${pluginName}`);
+};
+function usePluginRuntime({ plugin }) {
+    return {
+        pluginRuntime,
+        loadPlugin: ()=>loadPlugin(plugin.moduleName, plugin.name, plugin.baseURL)
+    };
+}

package/dist/cjs/{validation → remote}/index.js

@@ -14,10 +14,8 @@
 Object.defineProperty(exports, "__esModule", {
     value: true
 });
-_export_star(require("./datasource"), exports);
-_export_star(require("./resource"), exports);
-_export_star(require("./secret"), exports);
-_export_star(require("./variable"), exports);
+_export_star(require("./PluginLoaderComponent"), exports);
+_export_star(require("./remotePluginLoader"), exports);
 function _export_star(from, to) {
     Object.keys(from).forEach(function(k) {
         if (k !== "default" && !Object.prototype.hasOwnProperty.call(to, k)) {

package/dist/cjs/remote/remotePluginLoader.js

@@ -0,0 +1,61 @@
+// 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
+//
+// http://www.apache.org/licenses/LICENSE-2.0
+//
+// Unless required by applicable law or agreed to in writing, software
+// distributed under the License is distributed on an "AS IS" BASIS,
+// WITHOUT WARRANTIES OR CONDITIONS OF ANY KIND, either express or implied.
+// See the License for the specific language governing permissions and
+// limitations under the License.
+"use strict";
+Object.defineProperty(exports, "__esModule", {
+    value: true
+});
+Object.defineProperty(exports, "remotePluginLoader", {
+    enumerable: true,
+    get: function() {
+        return remotePluginLoader;
+    }
+});
+const _PluginRuntime = require("./PluginRuntime");
+const isPluginMetadata = (plugin)=>{
+    return typeof plugin === 'object' && plugin !== null && 'kind' in plugin && 'spec' in plugin && typeof plugin.spec === 'object' && plugin.spec !== null && 'name' in plugin.spec;
+};
+const isPluginModuleResource = (pluginModule)=>{
+    return typeof pluginModule === 'object' && pluginModule !== null && 'metadata' in pluginModule && 'spec' in pluginModule && typeof pluginModule.spec === 'object' && pluginModule.spec !== null && 'plugins' in pluginModule.spec && Array.isArray(pluginModule.spec.plugins) && pluginModule.spec.plugins.every(isPluginMetadata);
+};
+const remotePluginLoader = (baseURL)=>{
+    return {
+        getInstalledPlugins: async ()=>{
+            const pluginsResponse = await fetch(`${baseURL ? baseURL : ''}/api/v1/plugins`);
+            const plugins = await pluginsResponse.json();
+            let pluginModules = [];
+            if (Array.isArray(plugins)) {
+                pluginModules = plugins.filter(isPluginModuleResource);
+            } else {
+                console.error('RemotePluginLoader: Error loading plugins, response is not an array');
+            }
+            if (!pluginModules.length) {
+                console.error('RemotePluginLoader: No valid plugins found');
+            }
+            return pluginModules;
+        },
+        importPluginModule: async (resource)=>{
+            const pluginModuleName = resource.metadata.name;
+            const pluginModule = {};
+            for (const plugin of resource.spec.plugins){
+                const remotePluginModule = await (0, _PluginRuntime.loadPlugin)(pluginModuleName, plugin.spec.name);
+                const remotePlugin = remotePluginModule?.[plugin.spec.name];
+                if (remotePlugin) {
+                    pluginModule[plugin.spec.name] = remotePlugin;
+                } else {
+                    console.error(`RemotePluginLoader: Error loading plugin ${plugin.spec.name}`);
+                }
+            }
+            return pluginModule;
+        }
+    };
+};

package/dist/cjs/runtime/DataQueriesProvider/DataQueriesProvider.js

@@ -24,20 +24,21 @@ _export(exports, {
     DataQueriesContext: function() {
         return DataQueriesContext;
     },
-    useDataQueriesContext: function() {
-        return useDataQueriesContext;
+    DataQueriesProvider: function() {
+        return DataQueriesProvider;
     },
     useDataQueries: function() {
         return useDataQueries;
     },
-    DataQueriesProvider: function() {
-        return DataQueriesProvider;
+    useDataQueriesContext: function() {
+        return useDataQueriesContext;
     }
 });
 const _jsxruntime = require("react/jsx-runtime");
 const _react = require("react");
 const _timeseriesqueries = require("../time-series-queries");
 const _tracequeries = require("../trace-queries");
+const _UsageMetricsProvider = require("../UsageMetricsProvider");
 const _model = require("./model");
 const DataQueriesContext = /*#__PURE__*/ (0, _react.createContext)(undefined);
 function useDataQueriesContext() {
@@ -50,15 +51,9 @@ function useDataQueriesContext() {
 function useDataQueries(queryType) {
     const ctx = useDataQueriesContext();
     // Filter the query results based on the specified query type
-    const filteredQueryResults = ctx.queryResults.filter((queryResult)=>{
-        var _queryResult_definition;
-        return (queryResult === null || queryResult === void 0 ? void 0 : (_queryResult_definition = queryResult.definition) === null || _queryResult_definition === void 0 ? void 0 : _queryResult_definition.kind) === queryType;
-    });
+    const filteredQueryResults = ctx.queryResults.filter((queryResult)=>queryResult?.definition?.kind === queryType);
     // Filter the errors based on the specified query type
-    const filteredErrors = ctx.errors.filter((errors, index)=>{
-        var _ctx_queryResults_index, _ctx_queryResults_index_definition;
-        return ((_ctx_queryResults_index = ctx.queryResults[index]) === null || _ctx_queryResults_index === void 0 ? void 0 : (_ctx_queryResults_index_definition = _ctx_queryResults_index.definition) === null || _ctx_queryResults_index_definition === void 0 ? void 0 : _ctx_queryResults_index_definition.kind) === queryType;
-    });
+    const filteredErrors = ctx.errors.filter((errors, index)=>ctx.queryResults[index]?.definition?.kind === queryType);
     // Create a new context object with the filtered results and errors
     const filteredCtx = {
         queryResults: filteredQueryResults,
@@ -70,7 +65,7 @@ function useDataQueries(queryType) {
     return filteredCtx;
 }
 function DataQueriesProvider(props) {
-    const { definitions , options , children , queryOptions  } = props;
+    const { definitions, options, children, queryOptions } = props;
     // Returns a query kind, for example "TimeSeriesQuery" = getQueryType("PrometheusTimeSeriesQuery")
     const getQueryType = (0, _model.useQueryType)();
     const queryDefinitions = definitions.map((definition)=>{
@@ -82,6 +77,7 @@ function DataQueriesProvider(props) {
             }
         };
     });
+    const usageMetrics = (0, _UsageMetricsProvider.useUsageMetrics)();
     // Filter definitions for time series query and other future query plugins
     const timeSeriesQueries = queryDefinitions.filter((definition)=>definition.kind === 'TimeSeriesQuery');
     const timeSeriesResults = (0, _timeseriesqueries.useTimeSeriesQueries)(timeSeriesQueries, options, queryOptions);
@@ -99,6 +95,17 @@ function DataQueriesProvider(props) {
             ...(0, _model.transformQueryResults)(timeSeriesResults, timeSeriesQueries),
             ...(0, _model.transformQueryResults)(traceResults, traceQueries)
         ];
+        if (queryOptions?.enabled) {
+            for (const result of mergedQueryResults){
+                if (!result.isLoading && !result.isFetching && !result.error) {
+                    usageMetrics.markQuery(result.definition, 'success');
+                } else if (result.error) {
+                    usageMetrics.markQuery(result.definition, 'error');
+                } else {
+                    usageMetrics.markQuery(result.definition, 'pending');
+                }
+            }
+        }
         return {
             queryResults: mergedQueryResults,
             isFetching: mergedQueryResults.some((result)=>result.isFetching),
@@ -111,7 +118,9 @@ function DataQueriesProvider(props) {
         timeSeriesResults,
         traceQueries,
         traceResults,
-        refetchAll
+        refetchAll,
+        queryOptions?.enabled,
+        usageMetrics
     ]);
     return /*#__PURE__*/ (0, _jsxruntime.jsx)(DataQueriesContext.Provider, {
         value: ctx,

package/dist/cjs/runtime/DataQueriesProvider/model.js

@@ -31,7 +31,7 @@ _export(exports, {
 const _react = require("react");
 const _pluginregistry = require("../plugin-registry");
 function transformQueryResults(results, definitions) {
-    return results.map(({ data , isFetching , isLoading , refetch , error  }, i)=>{
+    return results.map(({ data, isFetching, isLoading, refetch, error }, i)=>{
         return {
             definition: definitions[i],
             data,
@@ -43,8 +43,12 @@ function transformQueryResults(results, definitions) {
     });
 }
 function useQueryType() {
-    const { data: timeSeriesQueryPlugins , isLoading: isTimeSeriesQueryLoading  } = (0, _pluginregistry.useListPluginMetadata)('TimeSeriesQuery');
-    const { data: traceQueryPlugins , isLoading: isTraceQueryPluginLoading  } = (0, _pluginregistry.useListPluginMetadata)('TraceQuery');
+    const { data: timeSeriesQueryPlugins, isLoading: isTimeSeriesQueryLoading } = (0, _pluginregistry.useListPluginMetadata)([
+        'TimeSeriesQuery'
+    ]);
+    const { data: traceQueryPlugins, isLoading: isTraceQueryPluginLoading } = (0, _pluginregistry.useListPluginMetadata)([
+        'TraceQuery'
+    ]);
     // For example, `map: {"TimeSeriesQuery":["PrometheusTimeSeriesQuery"],"TraceQuery":["TempoTraceQuery"]}`
     const queryTypeMap = (0, _react.useMemo)(()=>{
         const map = {
@@ -53,14 +57,12 @@ function useQueryType() {
         };
         if (timeSeriesQueryPlugins) {
             timeSeriesQueryPlugins.forEach((plugin)=>{
-                var _map_plugin_pluginType;
-                (_map_plugin_pluginType = map[plugin.pluginType]) === null || _map_plugin_pluginType === void 0 ? void 0 : _map_plugin_pluginType.push(plugin.kind);
+                map[plugin.kind]?.push(plugin.spec.name);
             });
         }
         if (traceQueryPlugins) {
             traceQueryPlugins.forEach((plugin)=>{
-                var _map_plugin_pluginType;
-                (_map_plugin_pluginType = map[plugin.pluginType]) === null || _map_plugin_pluginType === void 0 ? void 0 : _map_plugin_pluginType.push(plugin.kind);
+                map[plugin.kind]?.push(plugin.spec.name);
             });
         }
         return map;
@@ -82,8 +84,7 @@ function useQueryType() {
             return undefined;
         }
         for(const queryType in queryTypeMap){
-            var _queryTypeMap_queryType;
-            if ((_queryTypeMap_queryType = queryTypeMap[queryType]) === null || _queryTypeMap_queryType === void 0 ? void 0 : _queryTypeMap_queryType.includes(pluginKind)) {
+            if (queryTypeMap[queryType]?.includes(pluginKind)) {
                 return queryType;
             }
         }

package/dist/cjs/runtime/QueryCountProvider.js

@@ -0,0 +1,83 @@
+// 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
+//
+// http://www.apache.org/licenses/LICENSE-2.0
+//
+// Unless required by applicable law or agreed to in writing, software
+// distributed under the License is distributed on an "AS IS" BASIS,
+// WITHOUT WARRANTIES OR CONDITIONS OF ANY KIND, either express or implied.
+// See the License for the specific language governing permissions and
+// limitations under the License.
+"use strict";
+Object.defineProperty(exports, "__esModule", {
+    value: true
+});
+function _export(target, all) {
+    for(var name in all)Object.defineProperty(target, name, {
+        enumerable: true,
+        get: all[name]
+    });
+}
+_export(exports, {
+    QueryCountProvider: function() {
+        return QueryCountProvider;
+    },
+    useQueryCountContext: function() {
+        return useQueryCountContext;
+    }
+});
+const _jsxruntime = require("react/jsx-runtime");
+const _react = /*#__PURE__*/ _interop_require_wildcard(require("react"));
+function _getRequireWildcardCache(nodeInterop) {
+    if (typeof WeakMap !== "function") return null;
+    var cacheBabelInterop = new WeakMap();
+    var cacheNodeInterop = new WeakMap();
+    return (_getRequireWildcardCache = function(nodeInterop) {
+        return nodeInterop ? cacheNodeInterop : cacheBabelInterop;
+    })(nodeInterop);
+}
+function _interop_require_wildcard(obj, nodeInterop) {
+    if (!nodeInterop && obj && obj.__esModule) {
+        return obj;
+    }
+    if (obj === null || typeof obj !== "object" && typeof obj !== "function") {
+        return {
+            default: obj
+        };
+    }
+    var cache = _getRequireWildcardCache(nodeInterop);
+    if (cache && cache.has(obj)) {
+        return cache.get(obj);
+    }
+    var newObj = {
+        __proto__: null
+    };
+    var hasPropertyDescriptor = Object.defineProperty && Object.getOwnPropertyDescriptor;
+    for(var key in obj){
+        if (key !== "default" && Object.prototype.hasOwnProperty.call(obj, key)) {
+            var desc = hasPropertyDescriptor ? Object.getOwnPropertyDescriptor(obj, key) : null;
+            if (desc && (desc.get || desc.set)) {
+                Object.defineProperty(newObj, key, desc);
+            } else {
+                newObj[key] = obj[key];
+            }
+        }
+    }
+    newObj.default = obj;
+    if (cache) {
+        cache.set(obj, newObj);
+    }
+    return newObj;
+}
+const QueryCountContext = /*#__PURE__*/ (0, _react.createContext)(0);
+const QueryCountProvider = ({ queryCount, children })=>{
+    return /*#__PURE__*/ (0, _jsxruntime.jsx)(QueryCountContext.Provider, {
+        value: queryCount,
+        children: children
+    });
+};
+const useQueryCountContext = ()=>{
+    return (0, _react.useContext)(QueryCountContext);
+};

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

@@ -24,14 +24,17 @@ _export(exports, {
     TimeRangeContext: function() {
         return TimeRangeContext;
     },
-    useTimeRangeContext: function() {
-        return useTimeRangeContext;
+    TimeRangeProvider: function() {
+        return TimeRangeProvider;
+    },
+    useSuggestedStepMs: function() {
+        return useSuggestedStepMs;
     },
     useTimeRange: function() {
         return useTimeRange;
     },
-    TimeRangeProvider: function() {
-        return TimeRangeProvider;
+    useTimeRangeContext: function() {
+        return useTimeRangeContext;
     }
 });
 const _jsxruntime = require("react/jsx-runtime");
@@ -59,7 +62,9 @@ function _interop_require_wildcard(obj, nodeInterop) {
     if (cache && cache.has(obj)) {
         return cache.get(obj);
     }
-    var newObj = {};
+    var newObj = {
+        __proto__: null
+    };
     var hasPropertyDescriptor = Object.defineProperty && Object.getOwnPropertyDescriptor;
     for(var key in obj){
         if (key !== "default" && Object.prototype.hasOwnProperty.call(obj, key)) {
@@ -88,18 +93,24 @@ function useTimeRangeContext() {
 function useTimeRange() {
     return useTimeRangeContext();
 }
+function useSuggestedStepMs(width) {
+    const { absoluteTimeRange } = useTimeRange();
+    if (width === undefined) return 0;
+    return (0, _core.getSuggestedStepMs)(absoluteTimeRange, width);
+}
 function TimeRangeProvider(props) {
-    const { timeRange , refreshInterval , children , setTimeRange , setRefreshInterval  } = props;
+    const { timeRange, refreshInterval, children, setTimeRange, setRefreshInterval } = props;
     const [localTimeRange, setLocalTimeRange] = (0, _react.useState)(timeRange);
-    const [localRefreshInterval, setLocalefreshInterval] = (0, _react.useState)(refreshInterval);
+    const [localRefreshInterval, setLocalRefreshInterval] = (0, _react.useState)(refreshInterval);
     const [refreshCounter, setRefreshCounter] = (0, _react.useState)(0);
     (0, _react.useEffect)(()=>{
         setLocalTimeRange(timeRange);
     }, [
-        timeRange
+        timeRange,
+        refreshCounter
     ]);
     (0, _react.useEffect)(()=>{
-        setLocalefreshInterval(refreshInterval);
+        setLocalRefreshInterval(refreshInterval);
     }, [
         refreshInterval
     ]);
@@ -108,24 +119,37 @@ function TimeRangeProvider(props) {
     }, [
         setRefreshCounter
     ]);
+    const refreshIntervalInMs = (0, _refreshinterval.getRefreshIntervalInMs)(localRefreshInterval);
+    (0, _react.useEffect)(()=>{
+        if (refreshIntervalInMs > 0) {
+            const interval = setInterval(()=>{
+                refresh();
+            }, refreshIntervalInMs);
+            return ()=>clearInterval(interval);
+        }
+    }, [
+        refresh,
+        refreshIntervalInMs
+    ]);
     const ctx = (0, _react.useMemo)(()=>{
         const absoluteTimeRange = (0, _core.isRelativeTimeRange)(localTimeRange) ? (0, _core.toAbsoluteTimeRange)(localTimeRange) : localTimeRange;
         return {
             timeRange: localTimeRange,
-            setTimeRange: setTimeRange !== null && setTimeRange !== void 0 ? setTimeRange : setLocalTimeRange,
+            setTimeRange: setTimeRange ?? setLocalTimeRange,
             absoluteTimeRange,
             refresh,
             refreshKey: `${absoluteTimeRange.start}:${absoluteTimeRange.end}:${localRefreshInterval}:${refreshCounter}`,
             refreshInterval: localRefreshInterval,
-            refreshIntervalInMs: (0, _refreshinterval.getRefreshIntervalInMs)(localRefreshInterval),
-            setRefreshInterval: setRefreshInterval !== null && setRefreshInterval !== void 0 ? setRefreshInterval : setLocalefreshInterval
+            refreshIntervalInMs: refreshIntervalInMs,
+            setRefreshInterval: setRefreshInterval ?? setLocalRefreshInterval
         };
     }, [
         localTimeRange,
         setTimeRange,
         refresh,
-        refreshCounter,
         localRefreshInterval,
+        refreshCounter,
+        refreshIntervalInMs,
         setRefreshInterval
     ]);
     return /*#__PURE__*/ (0, _jsxruntime.jsx)(TimeRangeContext.Provider, {

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

@@ -30,9 +30,9 @@ function _interop_require_default(obj) {
     };
 }
 function TimeRangeProviderWithQueryParams(props) {
-    const { initialTimeRange , initialRefreshInterval , children  } = props;
-    const { timeRange , setTimeRange  } = (0, _queryparams.useTimeRangeParams)(initialTimeRange);
-    const { refreshInterval , setRefreshInterval  } = (0, _queryparams.useSetRefreshIntervalParams)(initialRefreshInterval);
+    const { initialTimeRange, initialRefreshInterval, children } = props;
+    const { timeRange, setTimeRange } = (0, _queryparams.useTimeRangeParams)(initialTimeRange);
+    const { refreshInterval, setRefreshInterval } = (0, _queryparams.useSetRefreshIntervalParams)(initialRefreshInterval);
     return /*#__PURE__*/ (0, _jsxruntime.jsx)(_TimeRangeProvider.TimeRangeProvider, {
         timeRange: timeRange,
         refreshInterval: refreshInterval,