@perses-dev/plugin-system 0.0.0-snapshot-profile-89b306f → 0.0.0-snapshot-time-zone-selector-946f408

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

@@ -43,7 +43,7 @@ function useDefaultQueryDefinition(queryTypes) {
     const { defaultPluginKinds } = (0, _runtime.usePluginRegistry)();
     const defaultQueryKind = defaultPluginKinds?.[defaultQueryType] ?? queryPlugins?.[0]?.spec.name ?? '';
     const { data: defaultQueryPlugin } = (0, _runtime.usePlugin)(defaultQueryType, defaultQueryKind, {
-        throwOnError: true,
+        useErrorBoundary: true,
         enabled: true
     });
     // This default query definition is used if no query is provided initially or when we add a new query

package/dist/cjs/components/PanelSpecEditor/PanelSpecEditor.js

@@ -29,14 +29,14 @@ const _MultiQueryEditor = require("../MultiQueryEditor");
 function PanelSpecEditor(props) {
     const { control, panelDefinition, onJSONChange, onQueriesChange, onPluginSpecChange } = props;
     const { kind } = panelDefinition.spec.plugin;
-    const { data: plugin, isPending, error } = (0, _runtime.usePlugin)('Panel', kind);
+    const { data: plugin, isLoading, error } = (0, _runtime.usePlugin)('Panel', kind);
     if (error) {
         return /*#__PURE__*/ (0, _jsxruntime.jsx)(_components.ErrorAlert, {
             error: error
         });
     }
     // TODO: Proper loading indicator
-    if (isPending) {
+    if (isLoading) {
         return null;
     }
     if (plugin === undefined) {

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

@@ -84,6 +84,7 @@ 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);
@@ -172,7 +173,8 @@ function TimeRangeControls({ heightPx, showTimeRangeSelector = true, showRefresh
                 value: timeRange,
                 onChange: setTimeRange,
                 height: height,
-                showCustomTimeRange: showCustomTimeRangeValue
+                showCustomTimeRange: showCustomTimeRangeValue,
+                timeZone: timeZone
             }),
             showZoomInOutButtons && /*#__PURE__*/ (0, _jsxruntime.jsx)(_components.InfoTooltip, {
                 description: _constants.TOOLTIP_TEXT.zoomOut,

package/dist/cjs/components/Variables/variable-model.js

@@ -73,11 +73,13 @@ function useListVariablePluginValues(definition) {
     };
     const spec = definition.spec.plugin.spec;
     const capturingRegexp = definition.spec.capturingRegexp !== undefined ? new RegExp(definition.spec.capturingRegexp, 'g') : undefined;
-    let dependsOnVariables;
+    let dependsOnVariables = Object.keys(allVariables); // Default to all variables
     if (variablePlugin?.dependsOn) {
         const dependencies = variablePlugin.dependsOn(spec, variablePluginCtx);
-        dependsOnVariables = dependencies.variables;
+        dependsOnVariables = dependencies.variables ? dependencies.variables : dependsOnVariables;
     }
+    // Exclude self variable to avoid circular dependency
+    dependsOnVariables = dependsOnVariables.filter((v)=>v !== definition.spec.name);
     const variables = (0, _runtime.useAllVariableValues)(dependsOnVariables);
     let waitToLoad = false;
     if (dependsOnVariables) {

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

@@ -27,6 +27,7 @@ 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,7 +22,6 @@ _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/remote/PluginRuntime.js

@@ -112,11 +112,11 @@ const getPluginRuntime = ()=>{
                     }
                 },
                 '@tanstack/react-query': {
-                    version: '5.64.2',
+                    version: '4.39.1',
                     lib: ()=>_reactquery,
                     shareConfig: {
                         singleton: true,
-                        requiredVersion: '^5.64.2'
+                        requiredVersion: '^4.39.1'
                     }
                 },
                 'react-hook-form': {
@@ -140,7 +140,7 @@ const getPluginRuntime = ()=>{
                     lib: ()=>require('@perses-dev/components'),
                     shareConfig: {
                         singleton: true,
-                        requiredVersion: '^0.51.0-beta.0'
+                        requiredVersion: '^0.51.0-rc.0'
                     }
                 },
                 '@perses-dev/plugin-system': {
@@ -148,7 +148,7 @@ const getPluginRuntime = ()=>{
                     lib: ()=>require('@perses-dev/plugin-system'),
                     shareConfig: {
                         singleton: true,
-                        requiredVersion: '^0.51.0-beta.0'
+                        requiredVersion: '^0.51.0-rc.0'
                     }
                 },
                 '@perses-dev/explore': {
@@ -156,7 +156,7 @@ const getPluginRuntime = ()=>{
                     lib: ()=>require('@perses-dev/explore'),
                     shareConfig: {
                         singleton: true,
-                        requiredVersion: '^0.51.0-beta.0'
+                        requiredVersion: '^0.51.0-rc.0'
                     }
                 },
                 '@perses-dev/dashboards': {
@@ -164,7 +164,7 @@ const getPluginRuntime = ()=>{
                     lib: ()=>require('@perses-dev/dashboards'),
                     shareConfig: {
                         singleton: true,
-                        requiredVersion: '^0.51.0-beta.0'
+                        requiredVersion: '^0.51.0-rc.0'
                     }
                 },
                 // 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,7 +38,6 @@ 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);
@@ -84,22 +83,17 @@ 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,
-        profileResults
+        traceResults
     ]);
     const ctx = (0, _react.useMemo)(()=>{
         const mergedQueryResults = [
             ...(0, _model.transformQueryResults)(timeSeriesResults, timeSeriesQueries),
-            ...(0, _model.transformQueryResults)(traceResults, traceQueries),
-            ...(0, _model.transformQueryResults)(profileResults, profileQueries)
+            ...(0, _model.transformQueryResults)(traceResults, traceQueries)
         ];
         if (queryOptions?.enabled) {
             for (const result of mergedQueryResults){
@@ -124,8 +118,6 @@ function DataQueriesProvider(props) {
         timeSeriesResults,
         traceQueries,
         traceResults,
-        profileQueries,
-        profileResults,
         refetchAll,
         queryOptions?.enabled,
         usageMetrics

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

@@ -49,15 +49,11 @@ 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: [],
-            ProfileQuery: []
+            TraceQuery: []
         };
         if (timeSeriesQueryPlugins) {
             timeSeriesQueryPlugins.forEach((plugin)=>{
@@ -69,16 +65,10 @@ 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,
-        profileQueryPlugins
+        traceQueryPlugins
     ]);
     const getQueryType = (0, _react.useCallback)((pluginKind)=>{
         const isLoading = (pluginKind)=>{
@@ -87,10 +77,8 @@ function useQueryType() {
                     return isTimeSeriesQueryLoading;
                 case 'TempoTraceQuery':
                     return isTraceQueryPluginLoading;
-                case 'PyroscopeProfileQuery':
-                    return isProfileQueryPluginLoading;
             }
-            return isTraceQueryPluginLoading || isTimeSeriesQueryLoading || isProfileQueryPluginLoading;
+            return isTraceQueryPluginLoading || isTimeSeriesQueryLoading;
         };
         if (isLoading(pluginKind)) {
             return undefined;
@@ -104,8 +92,7 @@ function useQueryType() {
     }, [
         queryTypeMap,
         isTimeSeriesQueryLoading,
-        isTraceQueryPluginLoading,
-        isProfileQueryPluginLoading
+        isTraceQueryPluginLoading
     ]);
     return getQueryType;
 }

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

@@ -35,11 +35,15 @@ _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;
@@ -93,15 +97,29 @@ 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 } = props;
+    const { timeRange, refreshInterval, children, setTimeRange, setRefreshInterval, timeZone = _core.DEFAULT_DASHBOARD_TIMEZONE, setTimeZone } = 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);
@@ -114,6 +132,11 @@ function TimeRangeProvider(props) {
     }, [
         refreshInterval
     ]);
+    (0, _react.useEffect)(()=>{
+        setLocalTimeZone(timeZone);
+    }, [
+        timeZone
+    ]);
     const refresh = (0, _react.useCallback)(()=>{
         setRefreshCounter((counter)=>counter + 1);
     }, [
@@ -135,22 +158,26 @@ 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
+            setRefreshInterval: setRefreshInterval ?? setLocalRefreshInterval,
+            setTimeZone: setTimeZone ?? setLocalTimeZone
         };
     }, [
         localTimeRange,
+        localTimeZone,
         setTimeRange,
         refresh,
         localRefreshInterval,
         refreshCounter,
         refreshIntervalInMs,
-        setRefreshInterval
+        setRefreshInterval,
+        setTimeZone
     ]);
     return /*#__PURE__*/ (0, _jsxruntime.jsx)(TimeRangeContext.Provider, {
         value: ctx,

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

@@ -21,6 +21,7 @@ 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");
@@ -30,14 +31,17 @@ function _interop_require_default(obj) {
     };
 }
 function TimeRangeProviderWithQueryParams(props) {
-    const { initialTimeRange, initialRefreshInterval, children } = props;
+    const { initialTimeRange, initialRefreshInterval, children, initialTimeZone = _core.DEFAULT_DASHBOARD_TIMEZONE } = 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,6 +45,9 @@ _export(exports, {
     useSetRefreshIntervalParams: function() {
         return useSetRefreshIntervalParams;
     },
+    useSetTimeZoneParams: function() {
+        return useSetTimeZoneParams;
+    },
     useTimeRangeParams: function() {
         return useTimeRangeParams;
     }
@@ -221,3 +224,31 @@ 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,7 +21,6 @@ _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/time-series-queries.js

@@ -38,11 +38,11 @@ _export(exports, {
     }
 });
 const _reactquery = require("@tanstack/react-query");
-const _variables = require("./variables");
 const _TimeRangeProvider = require("./TimeRangeProvider");
 const _datasources = require("./datasources");
 const _pluginregistry = require("./plugin-registry");
 const _utils = require("./utils");
+const _variables = require("./variables");
 const TIME_SERIES_QUERY_KEY = 'TimeSeriesQuery';
 function getQueryOptions({ plugin, definition, context }) {
     const { timeRange, datasourceStore, suggestedStepMs, mode, variableState, refreshKey } = context;

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

@@ -21,9 +21,6 @@ function _export(target, all) {
     });
 }
 _export(exports, {
-    MOCK_PROFILE_DATA: function() {
-        return MOCK_PROFILE_DATA;
-    },
     MOCK_TIME_SERIES_DATA: function() {
         return MOCK_TIME_SERIES_DATA;
     },
@@ -102,23 +99,3 @@ 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'
-    }
-};

package/dist/cjs/{model/profile-queries.js → test/render-hook.js}

@@ -1,4 +1,4 @@
-// Copyright 2025 The Perses Authors
+// 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
@@ -14,3 +14,18 @@
 Object.defineProperty(exports, "__esModule", {
     value: true
 });
+Object.defineProperty(exports, "renderHookWithContext", {
+    enumerable: true,
+    get: function() {
+        return renderHookWithContext;
+    }
+});
+const _react = require("@testing-library/react");
+const _utils = require("./utils");
+function renderHookWithContext(callback, contextOptions, renderHookOptions) {
+    const wrapper = (0, _utils.getTestContextWrapper)(contextOptions);
+    return (0, _react.renderHook)(callback, {
+        wrapper,
+        ...renderHookOptions
+    });
+}

package/dist/cjs/test/render.js

@@ -22,27 +22,10 @@ Object.defineProperty(exports, "renderWithContext", {
 });
 const _jsxruntime = require("react/jsx-runtime");
 const _react = require("@testing-library/react");
-const _reactquery = require("@tanstack/react-query");
-const _PluginRegistry = require("../components/PluginRegistry");
-const _testplugins = require("./test-plugins");
+const _utils = require("./utils");
 function renderWithContext(ui, renderOptions, contextOptions) {
-    // Create a new QueryClient for each test to avoid caching issues
-    const queryClient = new _reactquery.QueryClient({
-        defaultOptions: {
-            queries: {
-                refetchOnWindowFocus: false,
-                retry: false
-            }
-        }
-    });
-    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 ?? {
-                TimeSeriesQuery: 'PrometheusTimeSeriesQuery'
-            },
-            children: ui
-        })
+    const Wrapper = (0, _utils.getTestContextWrapper)(contextOptions);
+    return (0, _react.render)(/*#__PURE__*/ (0, _jsxruntime.jsx)(Wrapper, {
+        children: ui
     }), renderOptions);
 }

package/dist/cjs/test/utils.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, "getTestContextWrapper", {
+    enumerable: true,
+    get: function() {
+        return getTestContextWrapper;
+    }
+});
+const _jsxruntime = require("react/jsx-runtime");
+const _reactquery = require("@tanstack/react-query");
+const _components = require("../components");
+const _testplugins = require("./test-plugins");
+function getTestContextWrapper(contextOptions) {
+    // Create a new QueryClient for each test to avoid caching issues
+    const queryClient = new _reactquery.QueryClient({
+        defaultOptions: {
+            queries: {
+                refetchOnWindowFocus: false,
+                retry: false
+            }
+        }
+    });
+    return function Wrapper({ children }) {
+        return /*#__PURE__*/ (0, _jsxruntime.jsx)(_reactquery.QueryClientProvider, {
+            client: queryClient,
+            children: /*#__PURE__*/ (0, _jsxruntime.jsx)(_components.PluginRegistry, {
+                pluginLoader: _testplugins.testPluginLoader,
+                defaultPluginKinds: contextOptions?.defaultPluginKinds ?? {
+                    TimeSeriesQuery: 'PrometheusTimeSeriesQuery'
+                },
+                children: children
+            })
+        });
+    };
+}

package/dist/components/MultiQueryEditor/MultiQueryEditor.js

@@ -28,7 +28,7 @@ function useDefaultQueryDefinition(queryTypes) {
     const { defaultPluginKinds } = usePluginRegistry();
     const defaultQueryKind = defaultPluginKinds?.[defaultQueryType] ?? queryPlugins?.[0]?.spec.name ?? '';
     const { data: defaultQueryPlugin } = usePlugin(defaultQueryType, defaultQueryKind, {
-        throwOnError: true,
+        useErrorBoundary: true,
         enabled: true
     });
     // This default query definition is used if no query is provided initially or when we add a new query

package/dist/components/MultiQueryEditor/MultiQueryEditor.js.map

@@ -1 +1 @@
-{"version":3,"sources":["../../../src/components/MultiQueryEditor/MultiQueryEditor.tsx"],"sourcesContent":["// Copyright 2024 The Perses Authors\n// Licensed under the Apache License, Version 2.0 (the \"License\");\n// you may not use this file except in compliance with the License.\n// You may obtain a copy of the License at\n//\n// http://www.apache.org/licenses/LICENSE-2.0\n//\n// Unless required by applicable law or agreed to in writing, software\n// distributed under the License is distributed on an \"AS IS\" BASIS,\n// WITHOUT WARRANTIES OR CONDITIONS OF ANY KIND, either express or implied.\n// See the License for the specific language governing permissions and\n// limitations under the License.\n\nimport { ReactElement, useState } from 'react';\nimport { produce } from 'immer';\nimport { Button, Stack } from '@mui/material';\nimport AddIcon from 'mdi-material-ui/Plus';\nimport { QueryDefinition, QueryPluginType } from '@perses-dev/core';\nimport { useListPluginMetadata, usePlugin, usePluginRegistry } from '../../runtime';\nimport { QueryEditorContainer } from './QueryEditorContainer';\n\nexport interface MultiQueryEditorProps {\n  queryTypes: QueryPluginType[];\n  queries?: QueryDefinition[];\n  onChange: (queries: QueryDefinition[]) => void;\n}\n\nfunction useDefaultQueryDefinition(queryTypes: QueryPluginType[]): {\n  defaultInitialQueryDefinition: QueryDefinition;\n  isLoading: boolean;\n} {\n  // Build the default query plugin\n  // This will be used only if the queries are empty, to open a starting query\n\n  // Firs the default query type\n  const defaultQueryType = queryTypes[0]!;\n\n  // Then the default plugin kind\n  // Use as default the plugin kind explicitly set as default or the first in the list\n  const { data: queryPlugins, isLoading } = useListPluginMetadata(queryTypes);\n  const { defaultPluginKinds } = usePluginRegistry();\n  const defaultQueryKind = defaultPluginKinds?.[defaultQueryType] ?? queryPlugins?.[0]?.spec.name ?? '';\n\n  const { data: defaultQueryPlugin } = usePlugin(defaultQueryType, defaultQueryKind, {\n    throwOnError: true,\n    enabled: true,\n  });\n\n  // This default query definition is used if no query is provided initially or when we add a new query\n  return {\n    defaultInitialQueryDefinition: {\n      kind: defaultQueryType,\n      spec: {\n        plugin: { kind: defaultQueryKind, spec: defaultQueryPlugin?.createInitialOptions() || {} },\n      },\n    },\n    isLoading,\n  };\n}\n\n/**\n * A component render a list of {@link QueryEditorContainer} for the given query definitions.\n * It allows adding, removing and editing queries.\n * @param queryTypes The list of query types that the underlying editor will propose\n * @param queries The list of query definitions to render\n * @param onChange The callback to call when the queries are modified\n * @constructor\n */\nexport function MultiQueryEditor({ queryTypes, queries = [], onChange }: MultiQueryEditorProps): ReactElement {\n  const { defaultInitialQueryDefinition, isLoading } = useDefaultQueryDefinition(queryTypes);\n\n  // State for which queries are collapsed\n  const [queriesCollapsed, setQueriesCollapsed] = useState(queries.map(() => false));\n\n  // Query handlers\n  const handleQueryChange = (index: number, queryDef: QueryDefinition): void => {\n    onChange(\n      produce(queries, (draft) => {\n        if (draft) {\n          draft[index] = queryDef;\n        } else {\n          draft = [queryDef];\n        }\n      })\n    );\n  };\n\n  const handleQueryAdd = (): void => {\n    onChange(\n      produce(queries, (draft) => {\n        if (draft) {\n          draft.push(defaultInitialQueryDefinition);\n        } else {\n          draft = [...queries, defaultInitialQueryDefinition];\n        }\n      })\n    );\n    setQueriesCollapsed((queriesCollapsed) => {\n      queriesCollapsed.push(false);\n      return [...queriesCollapsed];\n    });\n  };\n\n  const handleQueryDelete = (index: number): void => {\n    onChange(\n      produce(queries, (draft) => {\n        draft.splice(index, 1);\n      })\n    );\n    setQueriesCollapsed((queriesCollapsed) => {\n      queriesCollapsed.splice(index, 1);\n      return [...queriesCollapsed];\n    });\n  };\n\n  const handleQueryCollapseExpand = (index: number): void => {\n    setQueriesCollapsed((queriesCollapsed) => {\n      queriesCollapsed[index] = !queriesCollapsed[index];\n      return [...queriesCollapsed];\n    });\n  };\n\n  // show one query input if queries is empty\n  const queryDefinitions: QueryDefinition[] = queries.length\n    ? queries\n    : !isLoading\n      ? [defaultInitialQueryDefinition]\n      : [];\n\n  return (\n    <>\n      <Stack spacing={1}>\n        {queryDefinitions.map((query: QueryDefinition, i: number) => (\n          <QueryEditorContainer\n            queryTypes={queryTypes}\n            key={i}\n            index={i}\n            query={query}\n            isCollapsed={!!queriesCollapsed[i]}\n            onChange={handleQueryChange}\n            onDelete={queries.length > 1 ? handleQueryDelete : undefined}\n            onCollapseExpand={handleQueryCollapseExpand}\n          />\n        ))}\n      </Stack>\n      <Button variant=\"contained\" startIcon={<AddIcon />} sx={{ marginTop: 1 }} onClick={handleQueryAdd}>\n        Add Query\n      </Button>\n    </>\n  );\n}\n"],"names":["useState","produce","Button","Stack","AddIcon","useListPluginMetadata","usePlugin","usePluginRegistry","QueryEditorContainer","useDefaultQueryDefinition","queryTypes","defaultQueryType","data","queryPlugins","isLoading","defaultPluginKinds","defaultQueryKind","spec","name","defaultQueryPlugin","throwOnError","enabled","defaultInitialQueryDefinition","kind","plugin","createInitialOptions","MultiQueryEditor","queries","onChange","queriesCollapsed","setQueriesCollapsed","map","handleQueryChange","index","queryDef","draft","handleQueryAdd","push","handleQueryDelete","splice","handleQueryCollapseExpand","queryDefinitions","length","spacing","query","i","isCollapsed","onDelete","undefined","onCollapseExpand","variant","startIcon","sx","marginTop","onClick"],"mappings":"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"}
+{"version":3,"sources":["../../../src/components/MultiQueryEditor/MultiQueryEditor.tsx"],"sourcesContent":["// Copyright 2024 The Perses Authors\n// Licensed under the Apache License, Version 2.0 (the \"License\");\n// you may not use this file except in compliance with the License.\n// You may obtain a copy of the License at\n//\n// http://www.apache.org/licenses/LICENSE-2.0\n//\n// Unless required by applicable law or agreed to in writing, software\n// distributed under the License is distributed on an \"AS IS\" BASIS,\n// WITHOUT WARRANTIES OR CONDITIONS OF ANY KIND, either express or implied.\n// See the License for the specific language governing permissions and\n// limitations under the License.\n\nimport { ReactElement, useState } from 'react';\nimport { produce } from 'immer';\nimport { Button, Stack } from '@mui/material';\nimport AddIcon from 'mdi-material-ui/Plus';\nimport { QueryDefinition, QueryPluginType } from '@perses-dev/core';\nimport { useListPluginMetadata, usePlugin, usePluginRegistry } from '../../runtime';\nimport { QueryEditorContainer } from './QueryEditorContainer';\n\nexport interface MultiQueryEditorProps {\n  queryTypes: QueryPluginType[];\n  queries?: QueryDefinition[];\n  onChange: (queries: QueryDefinition[]) => void;\n}\n\nfunction useDefaultQueryDefinition(queryTypes: QueryPluginType[]): {\n  defaultInitialQueryDefinition: QueryDefinition;\n  isLoading: boolean;\n} {\n  // Build the default query plugin\n  // This will be used only if the queries are empty, to open a starting query\n\n  // Firs the default query type\n  const defaultQueryType = queryTypes[0]!;\n\n  // Then the default plugin kind\n  // Use as default the plugin kind explicitly set as default or the first in the list\n  const { data: queryPlugins, isLoading } = useListPluginMetadata(queryTypes);\n  const { defaultPluginKinds } = usePluginRegistry();\n  const defaultQueryKind = defaultPluginKinds?.[defaultQueryType] ?? queryPlugins?.[0]?.spec.name ?? '';\n\n  const { data: defaultQueryPlugin } = usePlugin(defaultQueryType, defaultQueryKind, {\n    useErrorBoundary: true,\n    enabled: true,\n  });\n\n  // This default query definition is used if no query is provided initially or when we add a new query\n  return {\n    defaultInitialQueryDefinition: {\n      kind: defaultQueryType,\n      spec: {\n        plugin: { kind: defaultQueryKind, spec: defaultQueryPlugin?.createInitialOptions() || {} },\n      },\n    },\n    isLoading,\n  };\n}\n\n/**\n * A component render a list of {@link QueryEditorContainer} for the given query definitions.\n * It allows adding, removing and editing queries.\n * @param queryTypes The list of query types that the underlying editor will propose\n * @param queries The list of query definitions to render\n * @param onChange The callback to call when the queries are modified\n * @constructor\n */\nexport function MultiQueryEditor({ queryTypes, queries = [], onChange }: MultiQueryEditorProps): ReactElement {\n  const { defaultInitialQueryDefinition, isLoading } = useDefaultQueryDefinition(queryTypes);\n\n  // State for which queries are collapsed\n  const [queriesCollapsed, setQueriesCollapsed] = useState(queries.map(() => false));\n\n  // Query handlers\n  const handleQueryChange = (index: number, queryDef: QueryDefinition): void => {\n    onChange(\n      produce(queries, (draft) => {\n        if (draft) {\n          draft[index] = queryDef;\n        } else {\n          draft = [queryDef];\n        }\n      })\n    );\n  };\n\n  const handleQueryAdd = (): void => {\n    onChange(\n      produce(queries, (draft) => {\n        if (draft) {\n          draft.push(defaultInitialQueryDefinition);\n        } else {\n          draft = [...queries, defaultInitialQueryDefinition];\n        }\n      })\n    );\n    setQueriesCollapsed((queriesCollapsed) => {\n      queriesCollapsed.push(false);\n      return [...queriesCollapsed];\n    });\n  };\n\n  const handleQueryDelete = (index: number): void => {\n    onChange(\n      produce(queries, (draft) => {\n        draft.splice(index, 1);\n      })\n    );\n    setQueriesCollapsed((queriesCollapsed) => {\n      queriesCollapsed.splice(index, 1);\n      return [...queriesCollapsed];\n    });\n  };\n\n  const handleQueryCollapseExpand = (index: number): void => {\n    setQueriesCollapsed((queriesCollapsed) => {\n      queriesCollapsed[index] = !queriesCollapsed[index];\n      return [...queriesCollapsed];\n    });\n  };\n\n  // show one query input if queries is empty\n  const queryDefinitions: QueryDefinition[] = queries.length\n    ? queries\n    : !isLoading\n      ? [defaultInitialQueryDefinition]\n      : [];\n\n  return (\n    <>\n      <Stack spacing={1}>\n        {queryDefinitions.map((query: QueryDefinition, i: number) => (\n          <QueryEditorContainer\n            queryTypes={queryTypes}\n            key={i}\n            index={i}\n            query={query}\n            isCollapsed={!!queriesCollapsed[i]}\n            onChange={handleQueryChange}\n            onDelete={queries.length > 1 ? handleQueryDelete : undefined}\n            onCollapseExpand={handleQueryCollapseExpand}\n          />\n        ))}\n      </Stack>\n      <Button variant=\"contained\" startIcon={<AddIcon />} sx={{ marginTop: 1 }} onClick={handleQueryAdd}>\n        Add Query\n      </Button>\n    </>\n  );\n}\n"],"names":["useState","produce","Button","Stack","AddIcon","useListPluginMetadata","usePlugin","usePluginRegistry","QueryEditorContainer","useDefaultQueryDefinition","queryTypes","defaultQueryType","data","queryPlugins","isLoading","defaultPluginKinds","defaultQueryKind","spec","name","defaultQueryPlugin","useErrorBoundary","enabled","defaultInitialQueryDefinition","kind","plugin","createInitialOptions","MultiQueryEditor","queries","onChange","queriesCollapsed","setQueriesCollapsed","map","handleQueryChange","index","queryDef","draft","handleQueryAdd","push","handleQueryDelete","splice","handleQueryCollapseExpand","queryDefinitions","length","spacing","query","i","isCollapsed","onDelete","undefined","onCollapseExpand","variant","startIcon","sx","marginTop","onClick"],"mappings":"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"}

package/dist/components/PanelSpecEditor/PanelSpecEditor.js

@@ -19,14 +19,14 @@ import { MultiQueryEditor } from '../MultiQueryEditor';
 export function PanelSpecEditor(props) {
     const { control, panelDefinition, onJSONChange, onQueriesChange, onPluginSpecChange } = props;
     const { kind } = panelDefinition.spec.plugin;
-    const { data: plugin, isPending, error } = usePlugin('Panel', kind);
+    const { data: plugin, isLoading, error } = usePlugin('Panel', kind);
     if (error) {
         return /*#__PURE__*/ _jsx(ErrorAlert, {
             error: error
         });
     }
     // TODO: Proper loading indicator
-    if (isPending) {
+    if (isLoading) {
         return null;
     }
     if (plugin === undefined) {