@perses-dev/plugin-system 0.0.0-snapshot-time-zone-selector-946f408 → 0.0.0-snapshot-timeseries-panel-actions-e28c1fe

package/dist/cjs/components/HTTPSettingsEditor/HTTPSettingsEditor.js

@@ -79,7 +79,7 @@ function HTTPSettingsEditor(props) {
     const strDirect = 'Direct access';
     const strProxy = 'Proxy';
     // Initialize Proxy mode by default, if neither direct nor proxy mode is selected.
-    if (!value.directUrl && !value.proxy) {
+    if (value.directUrl === undefined && value.proxy === undefined) {
         Object.assign(value, initialSpecProxy);
     }
     // utilitary function used for headers when renaming a property
@@ -100,32 +100,6 @@ function HTTPSettingsEditor(props) {
         };
     };
     const tabs = [
-        {
-            label: strDirect,
-            content: /*#__PURE__*/ (0, _jsxruntime.jsx)(_reacthookform.Controller, {
-                name: "URL",
-                render: ({ field, fieldState })=>/*#__PURE__*/ (0, _jsxruntime.jsx)(_material.TextField, {
-                        ...field,
-                        fullWidth: true,
-                        label: "URL",
-                        value: value.directUrl || '',
-                        error: !!fieldState.error,
-                        helperText: fieldState.error?.message,
-                        InputProps: {
-                            readOnly: isReadonly
-                        },
-                        InputLabelProps: {
-                            shrink: isReadonly ? true : undefined
-                        },
-                        onChange: (e)=>{
-                            field.onChange(e);
-                            onChange((0, _immer.produce)(value, (draft)=>{
-                                draft.directUrl = e.target.value;
-                            }));
-                        }
-                    })
-            })
-        },
         {
             label: strProxy,
             content: /*#__PURE__*/ (0, _jsxruntime.jsxs)(_jsxruntime.Fragment, {
@@ -485,6 +459,32 @@ function HTTPSettingsEditor(props) {
                     })
                 ]
             })
+        },
+        {
+            label: strDirect,
+            content: /*#__PURE__*/ (0, _jsxruntime.jsx)(_reacthookform.Controller, {
+                name: "URL",
+                render: ({ field, fieldState })=>/*#__PURE__*/ (0, _jsxruntime.jsx)(_material.TextField, {
+                        ...field,
+                        fullWidth: true,
+                        label: "URL",
+                        value: value.directUrl || '',
+                        error: !!fieldState.error,
+                        helperText: fieldState.error?.message,
+                        InputProps: {
+                            readOnly: isReadonly
+                        },
+                        InputLabelProps: {
+                            shrink: isReadonly ? true : undefined
+                        },
+                        onChange: (e)=>{
+                            field.onChange(e);
+                            onChange((0, _immer.produce)(value, (draft)=>{
+                                draft.directUrl = e.target.value;
+                            }));
+                        }
+                    })
+            })
         }
     ];
     // Use of findIndex instead of providing hardcoded values to avoid desynchronisatio or

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

@@ -22,10 +22,16 @@ Object.defineProperty(exports, "PluginEditor", {
 });
 const _jsxruntime = require("react/jsx-runtime");
 const _material = require("@mui/material");
+const _Reload = /*#__PURE__*/ _interop_require_default(require("mdi-material-ui/Reload"));
 const _components = require("@perses-dev/components");
 const _PluginKindSelect = require("../PluginKindSelect");
 const _PluginSpecEditor = require("../PluginSpecEditor");
 const _plugineditorapi = require("./plugin-editor-api");
+function _interop_require_default(obj) {
+    return obj && obj.__esModule ? obj : {
+        default: obj
+    };
+}
 function PluginEditor(props) {
     // eslint-disable-next-line @typescript-eslint/no-unused-vars
     const { value, pluginTypes, pluginKindLabel, onChange: _, isReadonly, ...others } = props;
@@ -33,23 +39,43 @@ function PluginEditor(props) {
     return /*#__PURE__*/ (0, _jsxruntime.jsxs)(_material.Box, {
         ...others,
         children: [
-            /*#__PURE__*/ (0, _jsxruntime.jsx)(_PluginKindSelect.PluginKindSelect, {
-                fullWidth: false,
+            /*#__PURE__*/ (0, _jsxruntime.jsxs)(_material.Box, {
                 sx: {
-                    mb: 2,
-                    minWidth: 120
-                },
-                margin: "dense",
-                label: pluginKindLabel,
-                pluginTypes: pluginTypes,
-                disabled: isLoading,
-                value: pendingSelection ? pendingSelection : value.selection,
-                InputProps: {
-                    readOnly: isReadonly
+                    display: 'flex',
+                    flexDirection: 'row'
                 },
-                error: !!error,
-                helperText: error?.message,
-                onChange: onSelectionChange
+                children: [
+                    /*#__PURE__*/ (0, _jsxruntime.jsx)(_PluginKindSelect.PluginKindSelect, {
+                        fullWidth: false,
+                        sx: {
+                            mb: 2,
+                            minWidth: 120
+                        },
+                        margin: "dense",
+                        label: pluginKindLabel,
+                        pluginTypes: pluginTypes,
+                        disabled: isLoading,
+                        value: pendingSelection ? pendingSelection : value.selection,
+                        InputProps: {
+                            readOnly: isReadonly
+                        },
+                        error: !!error,
+                        helperText: error?.message,
+                        onChange: onSelectionChange
+                    }),
+                    /*#__PURE__*/ (0, _jsxruntime.jsx)(_material.Button, {
+                        variant: "contained",
+                        sx: {
+                            marginTop: 1.5,
+                            marginBottom: 1.5,
+                            paddingTop: 0.5,
+                            marginLeft: 'auto'
+                        },
+                        startIcon: /*#__PURE__*/ (0, _jsxruntime.jsx)(_Reload.default, {}),
+                        onClick: ()=>onSpecChange(value.spec),
+                        children: "Run Query"
+                    })
+                ]
             }),
             /*#__PURE__*/ (0, _jsxruntime.jsx)(_components.ErrorBoundary, {
                 FallbackComponent: _components.ErrorAlert,

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

@@ -84,7 +84,6 @@ const DEFAULT_REFRESH_INTERVAL_OPTIONS = [
 const DEFAULT_HEIGHT = '34px';
 function TimeRangeControls({ heightPx, showTimeRangeSelector = true, showRefreshButton = true, showRefreshInterval = true, showCustomTimeRange, showZoomButtons = true, timePresets }) {
     const { timeRange, setTimeRange, refresh, refreshInterval, setRefreshInterval } = (0, _runtime.useTimeRange)();
-    const { timeZone } = (0, _runtime.useTimeZone)();
     const showCustomTimeRangeValue = (0, _runtime.useShowCustomTimeRangeSetting)(showCustomTimeRange);
     const showZoomInOutButtons = (0, _runtime.useShowZoomRangeSetting)(showZoomButtons);
     const timePresetsValue = (0, _runtime.useTimeRangeOptionsSetting)(timePresets);
@@ -173,8 +172,7 @@ function TimeRangeControls({ heightPx, showTimeRangeSelector = true, showRefresh
                 value: timeRange,
                 onChange: setTimeRange,
                 height: height,
-                showCustomTimeRange: showCustomTimeRangeValue,
-                timeZone: timeZone
+                showCustomTimeRange: showCustomTimeRangeValue
             }),
             showZoomInOutButtons && /*#__PURE__*/ (0, _jsxruntime.jsx)(_components.InfoTooltip, {
                 description: _constants.TOOLTIP_TEXT.zoomOut,

package/dist/cjs/constants/user-interface-text.js

@@ -27,7 +27,6 @@ const TOOLTIP_TEXT = {
     // Time range controls buttons
     refresh: 'Refresh',
     refreshInterval: 'Auto refresh interval',
-    timezone: 'Timezone',
     zoomIn: 'Zoom in',
     zoomOut: 'Zoom out'
 };

package/dist/cjs/model/index.js

@@ -22,6 +22,7 @@ _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("./profile-queries"), exports);
 _export_star(require("./variables"), exports);
 function _export_star(from, to) {
     Object.keys(from).forEach(function(k) {

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

@@ -0,0 +1,16 @@
+// Copyright 2025 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/remote/PluginRuntime.js

@@ -135,36 +135,44 @@ const getPluginRuntime = ()=>{
                         requiredVersion: '^5.5.0'
                     }
                 },
+                '@perses-dev/core': {
+                    version: '0.51.0-rc.1',
+                    lib: ()=>require('@perses-dev/core'),
+                    shareConfig: {
+                        singleton: true,
+                        requiredVersion: '^0.51.0-rc.1'
+                    }
+                },
                 '@perses-dev/components': {
-                    version: '0.51.0-beta.0',
+                    version: '0.51.0-rc.1',
                     lib: ()=>require('@perses-dev/components'),
                     shareConfig: {
                         singleton: true,
-                        requiredVersion: '^0.51.0-rc.0'
+                        requiredVersion: '^0.51.0-rc.1'
                     }
                 },
                 '@perses-dev/plugin-system': {
-                    version: '0.51.0-beta.0',
+                    version: '0.51.0-rc.1',
                     lib: ()=>require('@perses-dev/plugin-system'),
                     shareConfig: {
                         singleton: true,
-                        requiredVersion: '^0.51.0-rc.0'
+                        requiredVersion: '^0.51.0-rc.1'
                     }
                 },
                 '@perses-dev/explore': {
-                    version: '0.51.0-beta.0',
+                    version: '0.51.0-rc.1',
                     lib: ()=>require('@perses-dev/explore'),
                     shareConfig: {
                         singleton: true,
-                        requiredVersion: '^0.51.0-rc.0'
+                        requiredVersion: '^0.51.0-rc.1'
                     }
                 },
                 '@perses-dev/dashboards': {
-                    version: '0.51.0-beta.0',
+                    version: '0.51.0-rc.1',
                     lib: ()=>require('@perses-dev/dashboards'),
                     shareConfig: {
                         singleton: true,
-                        requiredVersion: '^0.51.0-rc.0'
+                        requiredVersion: '^0.51.0-rc.1'
                     }
                 },
                 // Below are the shared modules that are used by the plugins, this can be part of the SDK

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

@@ -38,6 +38,7 @@ const _jsxruntime = require("react/jsx-runtime");
 const _react = require("react");
 const _timeseriesqueries = require("../time-series-queries");
 const _tracequeries = require("../trace-queries");
+const _profilequeries = require("../profile-queries");
 const _UsageMetricsProvider = require("../UsageMetricsProvider");
 const _model = require("./model");
 const DataQueriesContext = /*#__PURE__*/ (0, _react.createContext)(undefined);
@@ -83,17 +84,22 @@ function DataQueriesProvider(props) {
     const timeSeriesResults = (0, _timeseriesqueries.useTimeSeriesQueries)(timeSeriesQueries, options, queryOptions);
     const traceQueries = queryDefinitions.filter((definition)=>definition.kind === 'TraceQuery');
     const traceResults = (0, _tracequeries.useTraceQueries)(traceQueries);
+    const profileQueries = queryDefinitions.filter((definition)=>definition.kind === 'ProfileQuery');
+    const profileResults = (0, _profilequeries.useProfileQueries)(profileQueries);
     const refetchAll = (0, _react.useCallback)(()=>{
         timeSeriesResults.forEach((result)=>result.refetch());
         traceResults.forEach((result)=>result.refetch());
+        profileResults.forEach((result)=>result.refetch());
     }, [
         timeSeriesResults,
-        traceResults
+        traceResults,
+        profileResults
     ]);
     const ctx = (0, _react.useMemo)(()=>{
         const mergedQueryResults = [
             ...(0, _model.transformQueryResults)(timeSeriesResults, timeSeriesQueries),
-            ...(0, _model.transformQueryResults)(traceResults, traceQueries)
+            ...(0, _model.transformQueryResults)(traceResults, traceQueries),
+            ...(0, _model.transformQueryResults)(profileResults, profileQueries)
         ];
         if (queryOptions?.enabled) {
             for (const result of mergedQueryResults){
@@ -118,6 +124,8 @@ function DataQueriesProvider(props) {
         timeSeriesResults,
         traceQueries,
         traceResults,
+        profileQueries,
+        profileResults,
         refetchAll,
         queryOptions?.enabled,
         usageMetrics

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

@@ -49,11 +49,15 @@ function useQueryType() {
     const { data: traceQueryPlugins, isLoading: isTraceQueryPluginLoading } = (0, _pluginregistry.useListPluginMetadata)([
         'TraceQuery'
     ]);
+    const { data: profileQueryPlugins, isLoading: isProfileQueryPluginLoading } = (0, _pluginregistry.useListPluginMetadata)([
+        'ProfileQuery'
+    ]);
     // For example, `map: {"TimeSeriesQuery":["PrometheusTimeSeriesQuery"],"TraceQuery":["TempoTraceQuery"]}`
     const queryTypeMap = (0, _react.useMemo)(()=>{
         const map = {
             TimeSeriesQuery: [],
-            TraceQuery: []
+            TraceQuery: [],
+            ProfileQuery: []
         };
         if (timeSeriesQueryPlugins) {
             timeSeriesQueryPlugins.forEach((plugin)=>{
@@ -65,10 +69,16 @@ function useQueryType() {
                 map[plugin.kind]?.push(plugin.spec.name);
             });
         }
+        if (profileQueryPlugins) {
+            profileQueryPlugins.forEach((plugin)=>{
+                map[plugin.kind]?.push(plugin.spec.name);
+            });
+        }
         return map;
     }, [
         timeSeriesQueryPlugins,
-        traceQueryPlugins
+        traceQueryPlugins,
+        profileQueryPlugins
     ]);
     const getQueryType = (0, _react.useCallback)((pluginKind)=>{
         const isLoading = (pluginKind)=>{
@@ -77,8 +87,10 @@ function useQueryType() {
                     return isTimeSeriesQueryLoading;
                 case 'TempoTraceQuery':
                     return isTraceQueryPluginLoading;
+                case 'PyroscopeProfileQuery':
+                    return isProfileQueryPluginLoading;
             }
-            return isTraceQueryPluginLoading || isTimeSeriesQueryLoading;
+            return isTraceQueryPluginLoading || isTimeSeriesQueryLoading || isProfileQueryPluginLoading;
         };
         if (isLoading(pluginKind)) {
             return undefined;
@@ -92,7 +104,8 @@ function useQueryType() {
     }, [
         queryTypeMap,
         isTimeSeriesQueryLoading,
-        isTraceQueryPluginLoading
+        isTraceQueryPluginLoading,
+        isProfileQueryPluginLoading
     ]);
     return getQueryType;
 }

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

@@ -35,15 +35,11 @@ _export(exports, {
     },
     useTimeRangeContext: function() {
         return useTimeRangeContext;
-    },
-    useTimeZone: function() {
-        return useTimeZone;
     }
 });
 const _jsxruntime = require("react/jsx-runtime");
 const _react = /*#__PURE__*/ _interop_require_wildcard(require("react"));
 const _core = require("@perses-dev/core");
-const _components = require("@perses-dev/components");
 const _refreshinterval = require("./refresh-interval");
 function _getRequireWildcardCache(nodeInterop) {
     if (typeof WeakMap !== "function") return null;
@@ -97,29 +93,15 @@ function useTimeRangeContext() {
 function useTimeRange() {
     return useTimeRangeContext();
 }
-function useTimeZone() {
-    const { timeZone, setTimeZone } = useTimeRangeContext();
-    return {
-        timeZone,
-        setTimeZone,
-        formatWithUserTimeZone: (date, formatString)=>{
-            return (0, _components.formatWithTimeZone)(date, formatString, timeZone);
-        },
-        dateFormatOptionsWithUserTimeZone: (dateFormatOptions)=>{
-            return (0, _components.dateFormatOptionsWithTimeZone)(dateFormatOptions, timeZone);
-        }
-    };
-}
 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, timeZone = _core.DEFAULT_DASHBOARD_TIMEZONE, setTimeZone } = props;
+    const { timeRange, refreshInterval, children, setTimeRange, setRefreshInterval } = props;
     const [localTimeRange, setLocalTimeRange] = (0, _react.useState)(timeRange);
     const [localRefreshInterval, setLocalRefreshInterval] = (0, _react.useState)(refreshInterval);
-    const [localTimeZone, setLocalTimeZone] = (0, _react.useState)(timeZone);
     const [refreshCounter, setRefreshCounter] = (0, _react.useState)(0);
     (0, _react.useEffect)(()=>{
         setLocalTimeRange(timeRange);
@@ -132,11 +114,6 @@ function TimeRangeProvider(props) {
     }, [
         refreshInterval
     ]);
-    (0, _react.useEffect)(()=>{
-        setLocalTimeZone(timeZone);
-    }, [
-        timeZone
-    ]);
     const refresh = (0, _react.useCallback)(()=>{
         setRefreshCounter((counter)=>counter + 1);
     }, [
@@ -158,26 +135,22 @@ function TimeRangeProvider(props) {
         const absoluteTimeRange = (0, _core.isRelativeTimeRange)(localTimeRange) ? (0, _core.toAbsoluteTimeRange)(localTimeRange) : localTimeRange;
         return {
             timeRange: localTimeRange,
-            timeZone: localTimeZone,
             setTimeRange: setTimeRange ?? setLocalTimeRange,
             absoluteTimeRange,
             refresh,
             refreshKey: `${absoluteTimeRange.start}:${absoluteTimeRange.end}:${localRefreshInterval}:${refreshCounter}`,
             refreshInterval: localRefreshInterval,
             refreshIntervalInMs: refreshIntervalInMs,
-            setRefreshInterval: setRefreshInterval ?? setLocalRefreshInterval,
-            setTimeZone: setTimeZone ?? setLocalTimeZone
+            setRefreshInterval: setRefreshInterval ?? setLocalRefreshInterval
         };
     }, [
         localTimeRange,
-        localTimeZone,
         setTimeRange,
         refresh,
         localRefreshInterval,
         refreshCounter,
         refreshIntervalInMs,
-        setRefreshInterval,
-        setTimeZone
+        setRefreshInterval
     ]);
     return /*#__PURE__*/ (0, _jsxruntime.jsx)(TimeRangeContext.Provider, {
         value: ctx,

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

@@ -21,7 +21,6 @@ Object.defineProperty(exports, "TimeRangeProviderWithQueryParams", {
     }
 });
 const _jsxruntime = require("react/jsx-runtime");
-const _core = require("@perses-dev/core");
 const _react = /*#__PURE__*/ _interop_require_default(require("react"));
 const _TimeRangeProvider = require("./TimeRangeProvider");
 const _queryparams = require("./query-params");
@@ -31,17 +30,14 @@ function _interop_require_default(obj) {
     };
 }
 function TimeRangeProviderWithQueryParams(props) {
-    const { initialTimeRange, initialRefreshInterval, children, initialTimeZone = _core.DEFAULT_DASHBOARD_TIMEZONE } = props;
+    const { initialTimeRange, initialRefreshInterval, children } = props;
     const { timeRange, setTimeRange } = (0, _queryparams.useTimeRangeParams)(initialTimeRange);
     const { refreshInterval, setRefreshInterval } = (0, _queryparams.useSetRefreshIntervalParams)(initialRefreshInterval);
-    const { timeZone, setTimeZone } = (0, _queryparams.useSetTimeZoneParams)(initialTimeZone);
     return /*#__PURE__*/ (0, _jsxruntime.jsx)(_TimeRangeProvider.TimeRangeProvider, {
         timeRange: timeRange,
         refreshInterval: refreshInterval,
         setTimeRange: setTimeRange,
         setRefreshInterval: setRefreshInterval,
-        timeZone: timeZone,
-        setTimeZone: setTimeZone,
         children: children
     });
 }

package/dist/cjs/runtime/TimeRangeProvider/query-params.js

@@ -45,9 +45,6 @@ _export(exports, {
     useSetRefreshIntervalParams: function() {
         return useSetRefreshIntervalParams;
     },
-    useSetTimeZoneParams: function() {
-        return useSetTimeZoneParams;
-    },
     useTimeRangeParams: function() {
         return useTimeRangeParams;
     }
@@ -224,31 +221,3 @@ function useSetRefreshIntervalParams(initialRefreshInterval) {
         setRefreshInterval: setRefreshInterval
     };
 }
-function useSetTimeZoneParams(initialTimeZone) {
-    const [query, setQuery] = (0, _usequeryparams.useQueryParams)({
-        timeZone: _usequeryparams.StringParam
-    }, {
-        updateType: 'replaceIn'
-    });
-    const { timeZone } = query;
-    (0, _react.useEffect)(()=>{
-        if (!timeZone) {
-            setQuery({
-                timeZone: initialTimeZone
-            });
-        }
-    }, [
-        setQuery,
-        timeZone,
-        initialTimeZone
-    ]);
-    const setTimeZone = (0, _react.useCallback)((timeZone)=>setQuery({
-            timeZone
-        }), [
-        setQuery
-    ]);
-    return {
-        timeZone: timeZone ? timeZone : initialTimeZone,
-        setTimeZone: setTimeZone
-    };
-}

package/dist/cjs/runtime/index.js

@@ -21,6 +21,7 @@ _export_star(require("./variables"), exports);
 _export_star(require("./TimeRangeProvider"), exports);
 _export_star(require("./time-series-queries"), exports);
 _export_star(require("./trace-queries"), exports);
+_export_star(require("./profile-queries"), exports);
 _export_star(require("./DataQueriesProvider"), exports);
 _export_star(require("./QueryCountProvider"), exports);
 _export_star(require("./UsageMetricsProvider"), exports);

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

@@ -0,0 +1,65 @@
+// Copyright 2025 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, {
+    PROFILE_QUERY_KEY: function() {
+        return PROFILE_QUERY_KEY;
+    },
+    useProfileQueries: function() {
+        return useProfileQueries;
+    }
+});
+const _reactquery = require("@tanstack/react-query");
+const _datasources = require("./datasources");
+const _pluginregistry = require("./plugin-registry");
+const _TimeRangeProvider = require("./TimeRangeProvider");
+const PROFILE_QUERY_KEY = 'ProfileQuery';
+function useProfileQueries(definitions) {
+    const { getPlugin } = (0, _pluginregistry.usePluginRegistry)();
+    const datasourceStore = (0, _datasources.useDatasourceStore)();
+    const { absoluteTimeRange } = (0, _TimeRangeProvider.useTimeRange)();
+    const context = {
+        datasourceStore,
+        absoluteTimeRange
+    };
+    // useQueries() handles data fetching from query plugins (e.g. traceQL queries, promQL queries)
+    // https://tanstack.com/query/v4/docs/react/reference/useQuery
+    return (0, _reactquery.useQueries)({
+        queries: definitions.map((definition)=>{
+            const queryKey = [
+                definition,
+                datasourceStore,
+                absoluteTimeRange
+            ]; // `queryKey` watches and reruns `queryFn` if keys in the array change
+            const profileQueryKind = definition?.spec?.plugin?.kind;
+            return {
+                queryKey: queryKey,
+                queryFn: async ()=>{
+                    const plugin = await getPlugin(PROFILE_QUERY_KEY, profileQueryKind);
+                    const data = await plugin.getProfileData(definition.spec.plugin.spec, context);
+                    return data;
+                },
+                structuralSharing: false
+            };
+        })
+    });
+}

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

@@ -21,6 +21,9 @@ function _export(target, all) {
     });
 }
 _export(exports, {
+    MOCK_PROFILE_DATA: function() {
+        return MOCK_PROFILE_DATA;
+    },
     MOCK_TIME_SERIES_DATA: function() {
         return MOCK_TIME_SERIES_DATA;
     },
@@ -99,3 +102,23 @@ const MOCK_TRACE_DATA = {
         executedQueryString: '{ duration > 1000ms }'
     }
 };
+const MOCK_PROFILE_DATA = {
+    profile: {
+        stackTrace: {
+            id: 0,
+            name: 'root',
+            level: 0,
+            start: 1699916103945861,
+            end: 1699916105065861,
+            total: 1000,
+            self: 500,
+            children: []
+        }
+    },
+    metadata: {
+        spyName: '',
+        sampleRate: 1000000000,
+        units: 'samples',
+        name: 'cpu'
+    }
+};