@perses-dev/plugin-system 0.54.0-beta.1 → 0.54.0-beta.10

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

@@ -29,7 +29,11 @@ const _ChevronRight = /*#__PURE__*/ _interop_require_default(require("mdi-materi
 const _react = require("react");
 const _Alert = /*#__PURE__*/ _interop_require_default(require("mdi-material-ui/Alert"));
 const _components = require("@perses-dev/components");
+const _Pencil = /*#__PURE__*/ _interop_require_default(require("mdi-material-ui/Pencil"));
+const _Check = /*#__PURE__*/ _interop_require_default(require("mdi-material-ui/Check"));
+const _Close = /*#__PURE__*/ _interop_require_default(require("mdi-material-ui/Close"));
 const _PluginEditor = require("../PluginEditor");
+const _utils = require("./utils");
 function _interop_require_default(obj) {
     return obj && obj.__esModule ? obj : {
         default: obj
@@ -37,6 +41,16 @@ function _interop_require_default(obj) {
 }
 const QueryEditorContainer = /*#__PURE__*/ (0, _react.forwardRef)((props, ref)=>{
     const { queryTypes, index, query, queryResult, filteredQueryPlugins, isCollapsed, onDelete, onChange, onQueryRun, onCollapseExpand } = props;
+    // The displayed name is always derived from props so it stays in sync with the
+    // current query/index, even when queries are added, removed or reordered.
+    const displayedName = query.spec.name ?? (0, _utils.defaultQueryName)(index);
+    const [isEditingName, setIsEditingName] = (0, _react.useState)(false);
+    function handleNameSave(name) {
+        setIsEditingName(false);
+        onChange(index, (0, _immer.produce)(query, (draft)=>{
+            draft.spec.name = name;
+        }));
+    }
     return /*#__PURE__*/ (0, _jsxruntime.jsxs)(_material.Stack, {
         spacing: 1,
         children: [
@@ -49,19 +63,40 @@ const QueryEditorContainer = /*#__PURE__*/ (0, _react.forwardRef)((props, ref)=>
                 children: [
                     /*#__PURE__*/ (0, _jsxruntime.jsxs)(_material.Stack, {
                         direction: "row",
+                        gap: 1,
+                        sx: {
+                            width: '100%'
+                        },
                         children: [
                             /*#__PURE__*/ (0, _jsxruntime.jsx)(_material.IconButton, {
                                 size: "small",
+                                sx: {
+                                    width: 'fit-content',
+                                    height: 'fit-content'
+                                },
                                 onClick: ()=>onCollapseExpand(index),
                                 children: isCollapsed ? /*#__PURE__*/ (0, _jsxruntime.jsx)(_ChevronRight.default, {}) : /*#__PURE__*/ (0, _jsxruntime.jsx)(_ChevronDown.default, {})
                             }),
-                            /*#__PURE__*/ (0, _jsxruntime.jsxs)(_material.Typography, {
-                                variant: "overline",
-                                component: "h4",
-                                children: [
-                                    "Query #",
-                                    index + 1
-                                ]
+                            /*#__PURE__*/ (0, _jsxruntime.jsx)(_material.Stack, {
+                                direction: "row",
+                                gap: 1,
+                                alignItems: "center",
+                                alignContent: "center",
+                                sx: {
+                                    width: '100%',
+                                    '&:hover button': {
+                                        visibility: 'visible'
+                                    }
+                                },
+                                children: isEditingName ? /*#__PURE__*/ (0, _jsxruntime.jsx)(QueryNameInput, {
+                                    initialName: displayedName,
+                                    onSave: handleNameSave,
+                                    onCancel: ()=>setIsEditingName(false)
+                                }, displayedName) : /*#__PURE__*/ (0, _jsxruntime.jsx)(_material.Typography, {
+                                    variant: "overline",
+                                    component: "h4",
+                                    children: displayedName
+                                })
                             })
                         ]
                     }),
@@ -105,11 +140,24 @@ const QueryEditorContainer = /*#__PURE__*/ (0, _react.forwardRef)((props, ref)=>
                                     ]
                                 })
                             }),
-                            onDelete && /*#__PURE__*/ (0, _jsxruntime.jsx)(_material.IconButton, {
-                                "aria-label": "delete query",
-                                size: "small",
-                                onClick: ()=>onDelete && onDelete(index),
-                                children: /*#__PURE__*/ (0, _jsxruntime.jsx)(_DeleteOutline.default, {})
+                            /*#__PURE__*/ (0, _jsxruntime.jsxs)(_material.Stack, {
+                                direction: "row",
+                                children: [
+                                    !isEditingName && /*#__PURE__*/ (0, _jsxruntime.jsx)(_material.IconButton, {
+                                        "aria-label": "edit query name",
+                                        size: "small",
+                                        onClick: ()=>setIsEditingName(true),
+                                        children: /*#__PURE__*/ (0, _jsxruntime.jsx)(_Pencil.default, {
+                                            fontSize: "small"
+                                        })
+                                    }),
+                                    onDelete && /*#__PURE__*/ (0, _jsxruntime.jsx)(_material.IconButton, {
+                                        "aria-label": "delete query",
+                                        size: "small",
+                                        onClick: ()=>onDelete && onDelete(index),
+                                        children: /*#__PURE__*/ (0, _jsxruntime.jsx)(_DeleteOutline.default, {})
+                                    })
+                                ]
                             })
                         ]
                     })
@@ -127,6 +175,43 @@ const QueryEditorContainer = /*#__PURE__*/ (0, _react.forwardRef)((props, ref)=>
     }, index);
 });
 QueryEditorContainer.displayName = 'QueryEditorContainer';
+/**
+ * Self-contained input to edit a query name. The draft value is local state seeded from
+ * `initialName`; callers reset it by changing the `key` (remounting) rather than syncing
+ * with an useEffect.
+ */ function QueryNameInput({ initialName, onSave, onCancel }) {
+    const [draftName, setDraftName] = (0, _react.useState)(initialName);
+    return /*#__PURE__*/ (0, _jsxruntime.jsx)(_material.TextField, {
+        size: "small",
+        variant: "outlined",
+        label: "Query name",
+        "aria-label": "query name",
+        value: draftName,
+        onChange: (e)=>setDraftName(e.target.value),
+        fullWidth: true,
+        InputProps: {
+            endAdornment: /*#__PURE__*/ (0, _jsxruntime.jsxs)(_material.InputAdornment, {
+                position: "end",
+                children: [
+                    /*#__PURE__*/ (0, _jsxruntime.jsx)(_material.IconButton, {
+                        size: "small",
+                        "aria-label": "cancel edit",
+                        onClick: onCancel,
+                        edge: "end",
+                        children: /*#__PURE__*/ (0, _jsxruntime.jsx)(_Close.default, {})
+                    }),
+                    /*#__PURE__*/ (0, _jsxruntime.jsx)(_material.IconButton, {
+                        size: "small",
+                        "aria-label": "save query name",
+                        onClick: ()=>onSave(draftName),
+                        edge: "end",
+                        children: /*#__PURE__*/ (0, _jsxruntime.jsx)(_Check.default, {})
+                    })
+                ]
+            })
+        }
+    });
+}
 /**
  * Editor for a query definition. This component is responsible for rendering the plugin editor for the given query.
  * This will allow user to select a plugin extending from the given supported query types, and then edit the plugin

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

@@ -15,6 +15,7 @@ Object.defineProperty(exports, "__esModule", {
     value: true
 });
 _export_star(require("./MultiQueryEditor"), exports);
+_export_star(require("./utils"), exports);
 function _export_star(from, to) {
     Object.keys(from).forEach(function(k) {
         if (k !== "default" && !Object.prototype.hasOwnProperty.call(to, k)) {

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

@@ -0,0 +1,36 @@
+// Copyright 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: Object.getOwnPropertyDescriptor(all, name).get
+    });
+}
+_export(exports, {
+    get defaultQueryName () {
+        return defaultQueryName;
+    },
+    get generateQueryNames () {
+        return generateQueryNames;
+    }
+});
+function defaultQueryName(index) {
+    return `Query #${index + 1}`;
+}
+function generateQueryNames(definitions) {
+    return definitions.map((queryDef, index)=>queryDef.spec.name ?? defaultQueryName(index));
+}

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

@@ -109,11 +109,8 @@ const PanelSpecEditor = /*#__PURE__*/ (0, _react.forwardRef)((props, ref)=>{
                 })
         })
     });
-    return /*#__PURE__*/ (0, _jsxruntime.jsx)(_runtime.QueryCountProvider, {
-        queryCount: (panelDefinition.spec.queries ?? []).length,
-        children: /*#__PURE__*/ (0, _jsxruntime.jsx)(_OptionsEditorTabs.OptionsEditorTabs, {
-            tabs: tabs
-        }, tabs.length)
-    });
+    return /*#__PURE__*/ (0, _jsxruntime.jsx)(_OptionsEditorTabs.OptionsEditorTabs, {
+        tabs: tabs
+    }, tabs.length);
 });
 PanelSpecEditor.displayName = 'PanelSpecEditor';

package/dist/cjs/components/PluginRegistry/PluginRegistry.js

@@ -25,6 +25,7 @@ const _react = require("react");
 const _runtime = require("../../runtime");
 const _utils = require("../../utils");
 const _pluginindexes = require("./plugin-indexes");
+const _getPluginSearchHelper = require("./getPluginSearchHelper");
 function PluginRegistry(props) {
     const { pluginLoader: { getInstalledPlugins, importPluginModule }, children, defaultPluginKinds } = props;
     const getPluginIndexes = (0, _pluginindexes.usePluginIndexes)(getInstalledPlugins);
@@ -42,23 +43,18 @@ function PluginRegistry(props) {
         }
         return request;
     });
-    const getPlugin = (0, _react.useCallback)(async (kind, name)=>{
-        // Get the indexes of the installed plugins
+    const getPlugin = (0, _react.useCallback)(async (compoundKeyObj)=>{
         const pluginIndexes = await getPluginIndexes();
-        // Figure out what module the plugin is in by looking in the index
-        const typeAndKindKey = (0, _pluginindexes.getTypeAndKindKey)(kind, name);
-        const resource = pluginIndexes.pluginResourcesByNameAndKind.get(typeAndKindKey);
-        if (resource === undefined) {
-            throw new Error(`A ${name} plugin for kind '${kind}' is not installed`);
+        const { kind, name } = compoundKeyObj;
+        const candidateKeys = (0, _getPluginSearchHelper.resolvePluginKeys)(pluginIndexes.pluginResourcesByNameKindRegistryVersion.keys(), compoundKeyObj);
+        for (const resourceKey of candidateKeys){
+            const resource = pluginIndexes.pluginResourcesByNameKindRegistryVersion.get(resourceKey);
+            if (!resource) continue;
+            const pluginModule = await loadPluginModule(resource);
+            const plugin = pluginModule?.[resourceKey];
+            if (plugin) return plugin;
         }
-        // Treat the plugin module as a bunch of named exports that have plugins
-        const pluginModule = await loadPluginModule(resource);
-        // We currently assume that plugin modules will have named exports that match the kinds they handle
-        const plugin = pluginModule[name];
-        if (plugin === undefined) {
-            throw new Error(`The ${name} plugin for kind '${kind}' is missing from the ${resource.metadata.name} plugin module`);
-        }
-        return plugin;
+        throw new Error(`A ${name} plugin for kind '${kind}' is not installed`);
     }, [
         getPluginIndexes,
         loadPluginModule

package/dist/cjs/components/PluginRegistry/getPluginSearchHelper.js

@@ -0,0 +1,92 @@
+// Copyright 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, "resolvePluginKeys", {
+    enumerable: true,
+    get: function() {
+        return resolvePluginKeys;
+    }
+});
+const _semver = require("semver");
+const _model = require("../../model");
+const PLUGIN_LOOKUP_PRECEDENCE_LOGIC = {
+    registryOverVersion: false
+};
+const resolvePluginKeys = (allKeys, query, precedenceLogic = PLUGIN_LOOKUP_PRECEDENCE_LOGIC)=>{
+    const { kind, name, version, registry } = query;
+    const candidates = [];
+    // Exact match first when version or registry is specified
+    if (version || registry) {
+        candidates.push((0, _model.getPluginModuleCompoundKey)({
+            kind,
+            name,
+            registry,
+            version
+        }));
+    }
+    const latestWithRegistry = {
+        key: '',
+        version: ''
+    };
+    const latestWithoutRegistry = {
+        key: '',
+        version: ''
+    };
+    const prefix = `${kind}:${name}:`;
+    for (const key of allKeys){
+        if (!key.startsWith(prefix)) continue;
+        const split = key.split(':');
+        if (split.length !== 4) {
+            console.warn(`An invalid Plugin Resource key detected during default plugin lookup: ${key}`);
+            continue;
+        }
+        const [, , reg, ver] = split;
+        if (!ver) {
+            console.warn(`An invalid Plugin Resource key detected during default plugin lookup: ${key}`);
+            continue;
+        }
+        if (reg) {
+            if (!latestWithRegistry.key || (0, _semver.gt)(ver, latestWithRegistry.version)) {
+                latestWithRegistry.key = key;
+                latestWithRegistry.version = ver;
+            }
+        } else {
+            if (!latestWithoutRegistry.key || (0, _semver.gt)(ver, latestWithoutRegistry.version)) {
+                latestWithoutRegistry.key = key;
+                latestWithoutRegistry.version = ver;
+            }
+        }
+    }
+    // Determine the best fallback key from the two buckets
+    let fallbackKey;
+    if (latestWithRegistry.key && latestWithoutRegistry.key) {
+        const { registryOverVersion } = precedenceLogic;
+        if ((0, _semver.gt)(latestWithRegistry.version, latestWithoutRegistry.version)) {
+            fallbackKey = latestWithRegistry.key;
+        } else if ((0, _semver.gt)(latestWithoutRegistry.version, latestWithRegistry.version)) {
+            fallbackKey = latestWithoutRegistry.key;
+        } else {
+            // Versions are equal — use the tie-breaker
+            fallbackKey = registryOverVersion ? latestWithRegistry.key : latestWithoutRegistry.key;
+        }
+    } else {
+        fallbackKey = latestWithRegistry.key || latestWithoutRegistry.key || undefined;
+    }
+    if (fallbackKey && !candidates.includes(fallbackKey)) {
+        candidates.push(fallbackKey);
+    }
+    return candidates;
+};

package/dist/cjs/components/PluginRegistry/plugin-indexes.js

@@ -21,14 +21,15 @@ function _export(target, all) {
     });
 }
 _export(exports, {
-    get getTypeAndKindKey () {
-        return getTypeAndKindKey;
+    get getPluginModuleCompoundKey () {
+        return _model.getPluginModuleCompoundKey;
     },
     get usePluginIndexes () {
         return usePluginIndexes;
     }
 });
 const _react = require("react");
+const _model = require("../../model");
 const _utils = require("../../utils");
 function usePluginIndexes(getInstalledPlugins) {
     // Creates indexes from the installed plugins data (does useEvent because this accesses the getInstalledPlugins prop
@@ -36,17 +37,22 @@ function usePluginIndexes(getInstalledPlugins) {
     const createPluginIndexes = (0, _utils.useEvent)(async ()=>{
         const installedPlugins = await getInstalledPlugins();
         // Create the two indexes from the installed plugins
-        const pluginResourcesByNameAndKind = new Map();
+        const pluginResourcesByNameKindRegistryVersion = new Map();
         const pluginMetadataByKind = new Map();
         for (const resource of installedPlugins){
+            const { metadata: { version, registry } } = resource;
             for (const pluginMetadata of resource.spec.plugins){
                 const { kind, spec: { name } } = pluginMetadata;
-                // Index the plugin by type and kind to point at the module that contains it
-                const key = getTypeAndKindKey(kind, name);
-                if (pluginResourcesByNameAndKind.has(key)) {
-                    console.warn(`Got more than one ${kind} plugin for kind ${name}`);
+                const key = (0, _model.getPluginModuleCompoundKey)({
+                    kind,
+                    name,
+                    registry,
+                    version
+                });
+                if (pluginResourcesByNameKindRegistryVersion.has(key)) {
+                    console.warn(`Got more than one ${kind} plugin for kind ${name}, registry '${registry || 'undefined'}', and version '${version || 'undefined'}'`);
                 }
-                pluginResourcesByNameAndKind.set(key, resource);
+                pluginResourcesByNameKindRegistryVersion.set(key, resource);
                 // Index the metadata by plugin type
                 let list = pluginMetadataByKind.get(kind);
                 if (list === undefined) {
@@ -60,7 +66,7 @@ function usePluginIndexes(getInstalledPlugins) {
             }
         }
         return {
-            pluginResourcesByNameAndKind,
+            pluginResourcesByNameKindRegistryVersion,
             pluginMetadataByKind
         };
     });
@@ -72,7 +78,7 @@ function usePluginIndexes(getInstalledPlugins) {
             request = createPluginIndexes();
             pluginIndexesCache.current = request;
             // Remove failed requests from the cache so they can potentially be retried
-            request.catch(()=>pluginIndexesCache.current === undefined);
+            request.catch(()=>pluginIndexesCache.current = undefined);
         }
         return request;
     }, [
@@ -80,6 +86,3 @@ function usePluginIndexes(getInstalledPlugins) {
     ]);
     return getPluginIndexes;
 }
-function getTypeAndKindKey(kind, name) {
-    return `${kind}:${name}`;
-}

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

@@ -32,9 +32,13 @@ _export(exports, {
     },
     get useListVariablePluginValues () {
         return useListVariablePluginValues;
+    },
+    get useResolveListVariableValues () {
+        return useResolveListVariableValues;
     }
 });
 const _reactquery = require("@tanstack/react-query");
+const _react = require("react");
 const _runtime = require("../../runtime");
 function filterVariableList(data, capturedRegexp) {
     const result = [];
@@ -61,54 +65,136 @@ function filterVariableList(data, capturedRegexp) {
     }
     return result;
 }
-function useListVariablePluginValues(definition) {
-    const { data: variablePlugin } = (0, _runtime.usePlugin)('Variable', definition.spec.plugin.kind);
+function useVariablePluginContext() {
     const datasourceStore = (0, _runtime.useDatasourceStore)();
     const allVariables = (0, _runtime.useAllVariableValues)();
     const { absoluteTimeRange: timeRange } = (0, _runtime.useTimeRange)();
-    const variablePluginCtx = {
+    return {
         timeRange,
         datasourceStore,
         variables: allVariables
     };
-    const spec = definition.spec.plugin.spec;
+}
+const getVariableQueryConfig = (definition, variablePluginCtx, variablePlugin, enabled, onFetched)=>{
     const capturingRegexp = definition.spec.capturingRegexp !== undefined ? new RegExp(definition.spec.capturingRegexp, 'g') : undefined;
-    let dependsOnVariables = Object.keys(allVariables); // Default to all variables
-    if (variablePlugin?.dependsOn) {
-        const dependencies = variablePlugin.dependsOn(spec, variablePluginCtx);
-        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) {
-        waitToLoad = dependsOnVariables.some((v)=>variables[v]?.loading);
-    }
-    const variablesValueKey = getVariableValuesKey(variables);
-    return (0, _reactquery.useQuery)({
+    const variablesValueKey = getVariableValuesKey(variablePluginCtx.variables);
+    return {
         queryKey: [
             'variable',
             definition,
-            timeRange,
+            variablePluginCtx.timeRange,
             variablesValueKey
         ],
         queryFn: async ({ signal })=>{
-            const resp = await variablePlugin?.getVariableOptions(spec, {
-                datasourceStore,
-                variables,
-                timeRange
-            }, signal);
+            const resp = await variablePlugin?.getVariableOptions(definition.spec.plugin.spec, variablePluginCtx, signal);
             if (!resp?.data?.length) {
+                onFetched?.(definition.spec.name, [], definition);
                 return [];
             }
-            if (!capturingRegexp) {
-                return resp.data;
-            }
-            return filterVariableList(resp.data, capturingRegexp);
+            const options = capturingRegexp ? filterVariableList(resp.data, capturingRegexp) : resp.data;
+            onFetched?.(definition.spec.name, options, definition);
+            return options;
         },
-        enabled: !!variablePlugin || waitToLoad
+        enabled
+    };
+};
+function resolveDependsOnVariables(variablePlugin, variablePluginCtx, definition) {
+    if (variablePlugin?.dependsOn) {
+        const dependencies = variablePlugin.dependsOn(definition.spec.plugin.spec, variablePluginCtx);
+        return dependencies.variables ? dependencies.variables.filter((v)=>v !== definition.spec.name) : []; // Exclude self variable to avoid circular dependency and default to empty array to avoid deadlock
+    }
+    return [];
+}
+function useListVariablePluginValues(definition) {
+    const { data: variablePlugin } = (0, _runtime.usePlugin)('Variable', definition.spec.plugin.kind);
+    const variablePluginCtx = useVariablePluginContext();
+    const dependsOnVariables = resolveDependsOnVariables(variablePlugin, variablePluginCtx, definition);
+    const dependentVariables = (0, _runtime.useAllVariableValues)(dependsOnVariables);
+    const waitToLoad = dependsOnVariables.some((v)=>dependentVariables[v]?.loading);
+    const ctx = {
+        ...variablePluginCtx,
+        variables: dependentVariables
+    };
+    return (0, _reactquery.useQuery)(getVariableQueryConfig(definition, ctx, variablePlugin, !!variablePlugin && !waitToLoad));
+}
+function resolveDefaultValue(definition, options) {
+    const { defaultValue, allowMultiple } = definition.spec;
+    if (defaultValue !== undefined && defaultValue !== null) {
+        return defaultValue;
+    }
+    if (options[0]?.value) {
+        const first = options[0].value;
+        return allowMultiple ? [
+            first
+        ] : first;
+    }
+    return allowMultiple ? [] : '';
+}
+function useResolveListVariableValues(variableDefinitions) {
+    const { timeRange, datasourceStore, variables: outerVariableValues } = useVariablePluginContext();
+    const listVariables = (0, _react.useMemo)(()=>variableDefinitions.filter((v)=>v.kind === 'ListVariable'), [
+        variableDefinitions
+    ]);
+    const pluginResults = (0, _runtime.usePlugins)('Variable', listVariables.map((d)=>({
+            kind: d.spec.plugin.kind
+        })));
+    // Resolved variable state. Updated by onFetched when queries resolve.
+    // Needed because of dependencies between variables that require multiple rounds of fetching.
+    const [resolvedVariables, setResolvedVariables] = (0, _react.useState)({});
+    const allVariables = (0, _react.useMemo)(()=>{
+        return {
+            ...outerVariableValues,
+            ...resolvedVariables
+        };
+    }, [
+        outerVariableValues,
+        resolvedVariables
+    ]);
+    const onFetched = (0, _react.useCallback)((name, options, definition)=>{
+        setResolvedVariables((prev)=>({
+                ...prev,
+                [name]: {
+                    value: resolveDefaultValue(definition, options),
+                    loading: false,
+                    options
+                }
+            }));
+    }, []);
+    const queryResults = (0, _reactquery.useQueries)({
+        queries: listVariables.map((definition, index)=>{
+            const plugin = pluginResults[index]?.data;
+            const isPluginLoading = pluginResults[index]?.isLoading ?? true;
+            const dependsOn = resolveDependsOnVariables(plugin, {
+                timeRange,
+                datasourceStore,
+                variables: allVariables
+            }, definition);
+            const hasPendingDeps = dependsOn.some((v)=>resolvedVariables[v] === undefined && listVariables.some((lv)=>lv.spec.name === v) || allVariables[v]?.loading);
+            const dependentVariables = {};
+            for (const v of dependsOn){
+                const state = allVariables[v];
+                if (state) {
+                    dependentVariables[v] = state;
+                }
+            }
+            const ctx = {
+                timeRange,
+                datasourceStore,
+                variables: dependentVariables
+            };
+            return getVariableQueryConfig(definition, ctx, plugin, !hasPendingDeps && !isPluginLoading, onFetched);
+        })
     });
+    const initialVariableValues = (0, _react.useMemo)(()=>Object.fromEntries(Object.entries(allVariables).filter(([, state])=>state?.value !== undefined).map(([name, state])=>[
+                name,
+                state.value
+            ])), [
+        allVariables
+    ]);
+    return {
+        initialVariableValues,
+        isLoading: queryResults.some((r)=>r.isLoading)
+    };
 }
 function getVariableValuesKey(v) {
     return Object.values(v).map((v)=>JSON.stringify(v.value)).join(',');

package/dist/cjs/components/index.js

@@ -14,6 +14,7 @@
 Object.defineProperty(exports, "__esModule", {
     value: true
 });
+_export_star(require("./Annotations"), exports);
 _export_star(require("./CalculationSelector"), exports);
 _export_star(require("./DatasourceEditorForm"), exports);
 _export_star(require("./DatasourceSelect"), exports);

package/dist/cjs/context/ValidationProvider.js

@@ -34,7 +34,7 @@ _export(exports, {
 const _jsxruntime = require("react/jsx-runtime");
 const _react = require("react");
 const _spec = require("@perses-dev/spec");
-const _core = require("@perses-dev/core");
+const _client = require("@perses-dev/client");
 const ValidationSchemasContext = /*#__PURE__*/ (0, _react.createContext)(undefined);
 function useValidationSchemas() {
     const ctx = (0, _react.useContext)(ValidationSchemasContext);
@@ -44,11 +44,12 @@ function useValidationSchemas() {
     return ctx;
 }
 function ValidationProvider({ children }) {
-    const [datasourceEditorSchema, setDatasourceEditorSchema] = (0, _react.useState)(_core.datasourceDefinitionSchema);
+    const [datasourceEditorSchema, setDatasourceEditorSchema] = (0, _react.useState)(_client.datasourceDefinitionSchema);
     const [panelEditorSchema, setPanelEditorSchema] = (0, _react.useState)(_spec.panelEditorSchema); // TODO I don't get why this does not compile
     const [variableEditorSchema, setVariableEditorSchema] = (0, _react.useState)(_spec.variableDefinitionSchema);
+    const [annotationEditorSchema, setAnnotationEditorSchema] = (0, _react.useState)(_spec.annotationSpecSchema);
     function setDatasourceEditorSchemaPlugin(pluginSchema) {
-        setDatasourceEditorSchema((0, _core.buildDatasourceDefinitionSchema)(pluginSchema));
+        setDatasourceEditorSchema((0, _client.buildDatasourceDefinitionSchema)(pluginSchema));
     }
     function setPanelEditorSchemaPlugin(pluginSchema) {
         setPanelEditorSchema((0, _spec.buildPanelEditorSchema)(pluginSchema));
@@ -56,14 +57,19 @@ function ValidationProvider({ children }) {
     function setVariableEditorSchemaPlugin(pluginSchema) {
         setVariableEditorSchema((0, _spec.buildVariableDefinitionSchema)(pluginSchema));
     }
+    function setAnnotationEditorSchemaPlugin(pluginSchema) {
+        setAnnotationEditorSchema((0, _spec.buildAnnotationSpecSchema)(pluginSchema));
+    }
     return /*#__PURE__*/ (0, _jsxruntime.jsx)(ValidationSchemasContext.Provider, {
         value: {
             datasourceEditorSchema,
             panelEditorSchema,
             variableEditorSchema,
+            annotationEditorSchema,
             setDatasourceEditorSchemaPlugin,
             setPanelEditorSchemaPlugin,
-            setVariableEditorSchemaPlugin
+            setVariableEditorSchemaPlugin,
+            setAnnotationEditorSchemaPlugin
         },
         children: children
     });