@perses-dev/plugin-system 0.0.0-snapshot-panel-extra-content-3-17f9c42 → 0.0.0-snapshot-scatterplot-fix-imports-95e1b59

package/dist/cjs/context/query-params.js

@@ -0,0 +1,49 @@
+// Copyright 2023 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, "useSetProjectParams", {
+    enumerable: true,
+    get: function() {
+        return useSetProjectParams;
+    }
+});
+const _react = require("react");
+const _usequeryparams = require("use-query-params");
+function useSetProjectParams(enabledURLParams = true) {
+    const [query, setQuery] = (0, _usequeryparams.useQueryParams)({
+        project: ''
+    }, {
+        updateType: 'replaceIn'
+    });
+    const [projectState, setProjectState] = (0, _react.useState)('none');
+    const setProject = (0, _react.useCallback)((project)=>{
+        return setQuery({
+            project
+        });
+    }, [
+        setQuery
+    ]);
+    if (enabledURLParams) {
+        return {
+            project: query.project || 'none',
+            setProject
+        };
+    }
+    return {
+        project: projectState,
+        setProject: setProjectState
+    };
+}

package/dist/cjs/index.js

@@ -14,20 +14,24 @@
 Object.defineProperty(exports, "__esModule", {
     value: true
 });
-_exportStar(require("./components"), exports);
-_exportStar(require("./constants"), exports);
-_exportStar(require("./model"), exports);
-_exportStar(require("./runtime"), exports);
-_exportStar(require("./test-utils"), exports);
-_exportStar(require("./utils"), exports);
-function _exportStar(from, to) {
+_export_star(require("./components"), exports);
+_export_star(require("./constants"), exports);
+_export_star(require("./model"), exports);
+_export_star(require("./runtime"), exports);
+_export_star(require("./test-utils"), exports);
+_export_star(require("./utils"), exports);
+_export_star(require("./validation"), exports);
+_export_star(require("./context"), exports);
+function _export_star(from, to) {
     Object.keys(from).forEach(function(k) {
-        if (k !== "default" && !Object.prototype.hasOwnProperty.call(to, k)) Object.defineProperty(to, k, {
-            enumerable: true,
-            get: function() {
-                return from[k];
-            }
-        });
+        if (k !== "default" && !Object.prototype.hasOwnProperty.call(to, k)) {
+            Object.defineProperty(to, k, {
+                enumerable: true,
+                get: function() {
+                    return from[k];
+                }
+            });
+        }
     });
     return from;
 }

package/dist/cjs/model/index.js

@@ -14,22 +14,25 @@
 Object.defineProperty(exports, "__esModule", {
     value: true
 });
-_exportStar(require("./datasource"), exports);
-_exportStar(require("./legend"), exports);
-_exportStar(require("./panels"), exports);
-_exportStar(require("./plugins"), exports);
-_exportStar(require("./plugin-base"), exports);
-_exportStar(require("./plugin-loading"), exports);
-_exportStar(require("./time-series-queries"), exports);
-_exportStar(require("./variables"), exports);
-function _exportStar(from, to) {
+_export_star(require("./datasource"), exports);
+_export_star(require("./legend"), exports);
+_export_star(require("./panels"), exports);
+_export_star(require("./plugins"), exports);
+_export_star(require("./plugin-base"), exports);
+_export_star(require("./plugin-loading"), exports);
+_export_star(require("./time-series-queries"), exports);
+_export_star(require("./trace-queries"), exports);
+_export_star(require("./variables"), exports);
+function _export_star(from, to) {
     Object.keys(from).forEach(function(k) {
-        if (k !== "default" && !Object.prototype.hasOwnProperty.call(to, k)) Object.defineProperty(to, k, {
-            enumerable: true,
-            get: function() {
-                return from[k];
-            }
-        });
+        if (k !== "default" && !Object.prototype.hasOwnProperty.call(to, k)) {
+            Object.defineProperty(to, k, {
+                enumerable: true,
+                get: function() {
+                    return from[k];
+                }
+            });
+        }
     });
     return from;
 }

package/dist/cjs/model/legend.js

@@ -21,45 +21,57 @@ function _export(target, all) {
     });
 }
 _export(exports, {
-    legendValues: ()=>legendValues,
-    LEGEND_POSITIONS_CONFIG: ()=>LEGEND_POSITIONS_CONFIG,
-    LEGEND_MODE_CONFIG: ()=>LEGEND_MODE_CONFIG,
-    LEGEND_SIZE_CONFIG: ()=>LEGEND_SIZE_CONFIG,
-    LEGEND_VALUE_CONFIG: ()=>LEGEND_VALUE_CONFIG,
-    validateLegendSpec: ()=>validateLegendSpec
+    LEGEND_MODE_CONFIG: function() {
+        return LEGEND_MODE_CONFIG;
+    },
+    LEGEND_POSITIONS_CONFIG: function() {
+        return LEGEND_POSITIONS_CONFIG;
+    },
+    LEGEND_SIZE_CONFIG: function() {
+        return LEGEND_SIZE_CONFIG;
+    },
+    LEGEND_VALUE_CONFIG: function() {
+        return LEGEND_VALUE_CONFIG;
+    },
+    legendValues: function() {
+        return legendValues;
+    },
+    validateLegendSpec: function() {
+        return validateLegendSpec;
+    }
 });
 const _core = require("@perses-dev/core");
 const legendValues = [
-    'Mean',
-    'First',
-    'FirstNumber',
-    'Last',
-    'LastNumber',
-    'Min',
-    'Max',
-    'Sum'
+    'mean',
+    'first',
+    'first-number',
+    'last',
+    'last-number',
+    'min',
+    'max',
+    'sum'
 ];
 const LEGEND_POSITIONS_CONFIG = {
-    Bottom: {
+    bottom: {
         label: 'Bottom'
     },
-    Right: {
+    right: {
         label: 'Right'
     }
 };
 const LEGEND_MODE_CONFIG = {
-    List: {
+    list: {
         label: 'List'
     },
-    Table: {
+    table: {
         label: 'Table'
     }
 };
 const LEGEND_SIZE_CONFIG = {
-    Small: {
+    small: {
         label: 'Small'
     },
-    Medium: {
+    medium: {
         label: 'Medium'
     }
 };

package/dist/cjs/model/panels.js

@@ -14,8 +14,8 @@
 Object.defineProperty(exports, "__esModule", {
     value: true
 });
-const _react = /*#__PURE__*/ _interopRequireDefault(require("react"));
-function _interopRequireDefault(obj) {
+const _react = /*#__PURE__*/ _interop_require_default(require("react"));
+function _interop_require_default(obj) {
     return obj && obj.__esModule ? obj : {
         default: obj
     };

package/dist/cjs/model/plugin-base.js

@@ -14,8 +14,8 @@
 Object.defineProperty(exports, "__esModule", {
     value: true
 });
-const _react = /*#__PURE__*/ _interopRequireDefault(require("react"));
-function _interopRequireDefault(obj) {
+const _react = /*#__PURE__*/ _interop_require_default(require("react"));
+function _interop_require_default(obj) {
     return obj && obj.__esModule ? obj : {
         default: obj
     };

package/dist/cjs/model/plugin-loading.js

@@ -16,7 +16,9 @@ Object.defineProperty(exports, "__esModule", {
 });
 Object.defineProperty(exports, "dynamicImportPluginLoader", {
     enumerable: true,
-    get: ()=>dynamicImportPluginLoader
+    get: function() {
+        return dynamicImportPluginLoader;
+    }
 });
 function dynamicImportPluginLoader(plugins) {
     const importMap = new Map(plugins.map((plugin)=>[

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

@@ -0,0 +1,16 @@
+// Copyright 2023 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
+});

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

@@ -21,18 +21,24 @@ function _export(target, all) {
     });
 }
 _export(exports, {
-    useDataQueries: ()=>useDataQueries,
-    DataQueriesContext: ()=>DataQueriesContext,
-    useDataQueriesContext: ()=>useDataQueriesContext,
-    DataQueriesProvider: ()=>DataQueriesProvider
+    DataQueriesContext: function() {
+        return DataQueriesContext;
+    },
+    DataQueriesProvider: function() {
+        return DataQueriesProvider;
+    },
+    useDataQueries: function() {
+        return useDataQueries;
+    },
+    useDataQueriesContext: function() {
+        return useDataQueriesContext;
+    }
 });
-const _jsxRuntime = require("react/jsx-runtime");
+const _jsxruntime = require("react/jsx-runtime");
 const _react = require("react");
-const _timeSeriesQueries = require("../time-series-queries");
-function useDataQueries() {
-    const ctx = useDataQueriesContext();
-    return ctx;
-}
+const _timeseriesqueries = require("../time-series-queries");
+const _tracequeries = require("../trace-queries");
+const _model = require("./model");
 const DataQueriesContext = /*#__PURE__*/ (0, _react.createContext)(undefined);
 function useDataQueriesContext() {
     const ctx = (0, _react.useContext)(DataQueriesContext);
@@ -41,47 +47,73 @@ function useDataQueriesContext() {
     }
     return ctx;
 }
+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;
+    });
+    // Filter the errors based on the specified query type
+    const filteredErrors = ctx.errors.filter((errors, index)=>{
+        var _ctx_queryResults_index_definition, _ctx_queryResults_index;
+        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;
+    });
+    // Create a new context object with the filtered results and errors
+    const filteredCtx = {
+        queryResults: filteredQueryResults,
+        isFetching: filteredQueryResults.some((result)=>result.isFetching),
+        isLoading: filteredQueryResults.some((result)=>result.isLoading),
+        refetchAll: ctx.refetchAll,
+        errors: filteredErrors
+    };
+    return filteredCtx;
+}
 function DataQueriesProvider(props) {
-    const { definitions , options , children  } = props;
-    // For now we will map each query plugin definition to TimeSeriesQueryDefinition
-    // Later on when we add support for other query types,
-    // we will have to map each query maps to the correct QueryDefinition
-    const timeSeriesQueries = definitions.map((definition)=>({
-            kind: 'TimeSeriesQuery',
+    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)=>{
+        const type = getQueryType(definition.kind);
+        return {
+            kind: type,
             spec: {
                 plugin: definition
             }
-        }));
-    const results = (0, _timeSeriesQueries.useTimeSeriesQueries)(timeSeriesQueries, options);
-    const data = results.map(({ data , isFetching , isLoading , refetch , error  }, i)=>{
-        return {
-            definition: definitions[i],
-            data,
-            isFetching,
-            isLoading,
-            refetch,
-            error
         };
     });
+    // 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);
+    const traceQueries = queryDefinitions.filter((definition)=>definition.kind === 'TraceQuery');
+    const traceResults = (0, _tracequeries.useTraceQueries)(traceQueries);
     const refetchAll = (0, _react.useCallback)(()=>{
-        results.forEach((result)=>result.refetch());
+        timeSeriesResults.forEach((result)=>result.refetch());
+        traceResults.forEach((result)=>result.refetch());
     }, [
-        results
+        timeSeriesResults,
+        traceResults
     ]);
     const ctx = (0, _react.useMemo)(()=>{
+        const mergedQueryResults = [
+            ...(0, _model.transformQueryResults)(timeSeriesResults, timeSeriesQueries),
+            ...(0, _model.transformQueryResults)(traceResults, traceQueries)
+        ];
         return {
-            queryResults: data,
-            isFetching: results.some((result)=>result.isFetching),
-            isLoading: results.some((result)=>result.isLoading),
+            queryResults: mergedQueryResults,
+            isFetching: mergedQueryResults.some((result)=>result.isFetching),
+            isLoading: mergedQueryResults.some((result)=>result.isLoading),
             refetchAll,
-            errors: results.map((result)=>result.error)
+            errors: mergedQueryResults.map((result)=>result.error)
         };
     }, [
-        data,
-        results,
+        timeSeriesQueries,
+        timeSeriesResults,
+        traceQueries,
+        traceResults,
         refetchAll
     ]);
-    return /*#__PURE__*/ (0, _jsxRuntime.jsx)(DataQueriesContext.Provider, {
+    return /*#__PURE__*/ (0, _jsxruntime.jsx)(DataQueriesContext.Provider, {
         value: ctx,
         children: children
     });

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

@@ -14,16 +14,18 @@
 Object.defineProperty(exports, "__esModule", {
     value: true
 });
-_exportStar(require("./DataQueriesProvider"), exports);
-_exportStar(require("./model"), exports);
-function _exportStar(from, to) {
+_export_star(require("./DataQueriesProvider"), exports);
+_export_star(require("./model"), exports);
+function _export_star(from, to) {
     Object.keys(from).forEach(function(k) {
-        if (k !== "default" && !Object.prototype.hasOwnProperty.call(to, k)) Object.defineProperty(to, k, {
-            enumerable: true,
-            get: function() {
-                return from[k];
-            }
-        });
+        if (k !== "default" && !Object.prototype.hasOwnProperty.call(to, k)) {
+            Object.defineProperty(to, k, {
+                enumerable: true,
+                get: function() {
+                    return from[k];
+                }
+            });
+        }
     });
     return from;
 }

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

@@ -14,3 +14,84 @@
 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, {
+    transformQueryResults: function() {
+        return transformQueryResults;
+    },
+    useQueryType: function() {
+        return useQueryType;
+    }
+});
+const _react = require("react");
+const _pluginregistry = require("../plugin-registry");
+function transformQueryResults(results, definitions) {
+    return results.map(({ data, isFetching, isLoading, refetch, error }, i)=>{
+        return {
+            definition: definitions[i],
+            data,
+            isFetching,
+            isLoading,
+            refetch,
+            error
+        };
+    });
+}
+function useQueryType() {
+    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 = {
+            TimeSeriesQuery: [],
+            TraceQuery: []
+        };
+        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);
+            });
+        }
+        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);
+            });
+        }
+        return map;
+    }, [
+        timeSeriesQueryPlugins,
+        traceQueryPlugins
+    ]);
+    const getQueryType = (0, _react.useCallback)((pluginKind)=>{
+        const isLoading = (pluginKind)=>{
+            switch(pluginKind){
+                case 'PrometheusTimeSeriesQuery':
+                    return isTimeSeriesQueryLoading;
+                case 'TempoTraceQuery':
+                    return isTraceQueryPluginLoading;
+            }
+            throw new Error(`Unable to determine the query type: ${pluginKind}`);
+        };
+        if (isLoading(pluginKind)) {
+            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)) {
+                return queryType;
+            }
+        }
+        throw new Error(`Unable to determine the query type: ${pluginKind}`);
+    }, [
+        queryTypeMap,
+        isTimeSeriesQueryLoading,
+        isTraceQueryPluginLoading
+    ]);
+    return getQueryType;
+}

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

@@ -21,15 +21,26 @@ function _export(target, all) {
     });
 }
 _export(exports, {
-    TimeRangeContext: ()=>TimeRangeContext,
-    useTimeRangeContext: ()=>useTimeRangeContext,
-    useTimeRange: ()=>useTimeRange,
-    TimeRangeProvider: ()=>TimeRangeProvider
+    TimeRangeContext: function() {
+        return TimeRangeContext;
+    },
+    TimeRangeProvider: function() {
+        return TimeRangeProvider;
+    },
+    useSuggestedStepMs: function() {
+        return useSuggestedStepMs;
+    },
+    useTimeRange: function() {
+        return useTimeRange;
+    },
+    useTimeRangeContext: function() {
+        return useTimeRangeContext;
+    }
 });
-const _jsxRuntime = require("react/jsx-runtime");
-const _react = /*#__PURE__*/ _interopRequireWildcard(require("react"));
+const _jsxruntime = require("react/jsx-runtime");
+const _react = /*#__PURE__*/ _interop_require_wildcard(require("react"));
 const _core = require("@perses-dev/core");
-const _queryParams = require("./query-params");
+const _refreshinterval = require("./refresh-interval");
 function _getRequireWildcardCache(nodeInterop) {
     if (typeof WeakMap !== "function") return null;
     var cacheBabelInterop = new WeakMap();
@@ -38,7 +49,7 @@ function _getRequireWildcardCache(nodeInterop) {
         return nodeInterop ? cacheNodeInterop : cacheBabelInterop;
     })(nodeInterop);
 }
-function _interopRequireWildcard(obj, nodeInterop) {
+function _interop_require_wildcard(obj, nodeInterop) {
     if (!nodeInterop && obj && obj.__esModule) {
         return obj;
     }
@@ -51,7 +62,9 @@ function _interopRequireWildcard(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)) {
@@ -80,38 +93,53 @@ 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 { initialTimeRange , initialRefreshInterval , enabledURLParams , children  } = props;
-    const { timeRange , setTimeRange  } = (0, _queryParams.useSetTimeRangeParams)(initialTimeRange, enabledURLParams);
-    const { refreshInterval , setRefreshInterval , refreshIntervalInMs  } = (0, _queryParams.useSetRefreshIntervalParams)(initialRefreshInterval, enabledURLParams);
-    const [refreshKey, setRefreshKey] = (0, _react.useState)(0);
+    const { timeRange, refreshInterval, children, setTimeRange, setRefreshInterval } = props;
+    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);
+    }, [
+        timeRange,
+        refreshCounter
+    ]);
+    (0, _react.useEffect)(()=>{
+        setLocalRefreshInterval(refreshInterval);
+    }, [
+        refreshInterval
+    ]);
     const refresh = (0, _react.useCallback)(()=>{
-        setRefreshKey(refreshKey + 1);
+        setRefreshCounter((counter)=>counter + 1);
     }, [
-        refreshKey
+        setRefreshCounter
     ]);
     const ctx = (0, _react.useMemo)(()=>{
-        const absoluteTimeRange = (0, _core.isRelativeTimeRange)(timeRange) ? (0, _core.toAbsoluteTimeRange)(timeRange) : timeRange;
+        const absoluteTimeRange = (0, _core.isRelativeTimeRange)(localTimeRange) ? (0, _core.toAbsoluteTimeRange)(localTimeRange) : localTimeRange;
         return {
-            timeRange,
-            setTimeRange,
+            timeRange: localTimeRange,
+            setTimeRange: setTimeRange !== null && setTimeRange !== void 0 ? setTimeRange : setLocalTimeRange,
             absoluteTimeRange,
             refresh,
-            refreshKey: `${absoluteTimeRange.start}:${absoluteTimeRange.end}:${refreshInterval}:${refreshKey}`,
-            refreshInterval,
-            refreshIntervalInMs,
-            setRefreshInterval
+            refreshKey: `${absoluteTimeRange.start}:${absoluteTimeRange.end}:${localRefreshInterval}:${refreshCounter}`,
+            refreshInterval: localRefreshInterval,
+            refreshIntervalInMs: (0, _refreshinterval.getRefreshIntervalInMs)(localRefreshInterval),
+            setRefreshInterval: setRefreshInterval !== null && setRefreshInterval !== void 0 ? setRefreshInterval : setLocalRefreshInterval
         };
     }, [
-        timeRange,
+        localTimeRange,
         setTimeRange,
         refresh,
-        refreshKey,
-        refreshInterval,
-        refreshIntervalInMs,
+        refreshCounter,
+        localRefreshInterval,
         setRefreshInterval
     ]);
-    return /*#__PURE__*/ (0, _jsxRuntime.jsx)(TimeRangeContext.Provider, {
+    return /*#__PURE__*/ (0, _jsxruntime.jsx)(TimeRangeContext.Provider, {
         value: ctx,
         children: children
     });