@perses-dev/plugin-system 0.51.0-beta.1 → 0.51.0-rc.1

package/dist/cjs/components/DatasourceSelect.js

@@ -26,23 +26,48 @@ _export(exports, {
     },
     DatasourceSelect: function() {
         return DatasourceSelect;
+    },
+    datasourceSelectValueToSelector: function() {
+        return datasourceSelectValueToSelector;
+    },
+    isVariableDatasource: function() {
+        return isVariableDatasource;
+    },
+    optionValueToSelector: function() {
+        return optionValueToSelector;
+    },
+    selectorToOptionValue: function() {
+        return selectorToOptionValue;
+    },
+    useDatasourceSelectValueToSelector: function() {
+        return useDatasourceSelectValueToSelector;
     }
 });
 const _jsxruntime = require("react/jsx-runtime");
+const _react = require("react");
 const _OpenInNew = /*#__PURE__*/ _interop_require_default(require("mdi-material-ui/OpenInNew"));
 const _material = require("@mui/material");
-const _react = require("react");
 const _runtime = require("../runtime");
+const _utils = require("../utils");
 function _interop_require_default(obj) {
     return obj && obj.__esModule ? obj : {
         default: obj
     };
 }
+const DATASOURCE_VARIABLE_VALUE_PREFIX = '__DATASOURCE_VARIABLE_VALUE__';
+const VARIABLE_IDENTIFIER = '$';
+const emptyDatasourceOption = {
+    name: '',
+    value: ''
+};
 function DatasourceSelect(props) {
     const { datasourcePluginKind, value, project, onChange, ...others } = props;
     const { data, isLoading } = (0, _runtime.useListDatasourceSelectItems)(datasourcePluginKind, project);
-    // Rebuild the group of the value if not provided
+    const variables = (0, _runtime.useVariableValues)();
     const defaultValue = (0, _react.useMemo)(()=>{
+        if (isVariableDatasource(value)) {
+            return value;
+        }
         const group = (data ?? []).flatMap((itemGroup)=>itemGroup.items).find((item)=>{
             return value.kind === item.selector.kind && value.name === item.selector.name && !item.overridden;
         })?.selector.group;
@@ -54,87 +79,112 @@ function DatasourceSelect(props) {
         value,
         data
     ]);
-    // Convert the datasource list into menu items with name/group?/value strings that the Select input can work with
-    const menuItems = (0, _react.useMemo)(()=>{
-        return (data ?? []).map((itemGroup)=>({
-                group: itemGroup.group,
-                editLink: itemGroup.editLink,
-                items: itemGroup.items.map((item)=>({
-                        name: item.name,
-                        overriding: item.overriding,
-                        overridden: item.overridden,
-                        saved: item.saved ?? true,
-                        group: item.selector.group,
-                        value: selectorToOptionValue(item.selector)
-                    }))
-            }));
+    const options = (0, _react.useMemo)(()=>{
+        const datasourceOptions = (data || []).flatMap((itemGroup)=>itemGroup.items.map((item)=>({
+                    groupLabel: itemGroup.group,
+                    groupEditLink: itemGroup.editLink,
+                    name: item.name,
+                    overriding: item.overriding,
+                    overridden: item.overridden,
+                    saved: item.saved ?? true,
+                    group: item.selector.group,
+                    value: selectorToOptionValue(item.selector)
+                })));
+        const datasourceOptionsMap = new Map(datasourceOptions.map((option)=>[
+                option.name,
+                option
+            ]));
+        const variableOptions = Object.entries(variables).flatMap(([name, variable])=>{
+            if (Array.isArray(variable.value)) return [];
+            const associatedDatasource = datasourceOptionsMap.get(variable.value ?? '');
+            if (!associatedDatasource) return [];
+            return {
+                groupLabel: 'Variables',
+                name: `${VARIABLE_IDENTIFIER}${name}`,
+                saved: true,
+                value: `${DATASOURCE_VARIABLE_VALUE_PREFIX}${VARIABLE_IDENTIFIER}${name}`
+            };
+        });
+        return [
+            ...datasourceOptions,
+            ...variableOptions
+        ];
     }, [
-        data
+        data,
+        variables
     ]);
-    // While loading available values, just use an empty string so MUI select doesn't warn about values out of range
-    const optionValue = isLoading ? '' : selectorToOptionValue(defaultValue);
+    // While loading available values, just use an empty datasource option so MUI select doesn't warn about values out of range
+    const optionValue = isLoading ? emptyDatasourceOption : options.find((option)=>option.value === selectorToOptionValue(defaultValue));
     // When the user makes a selection, convert the string option value back to a DatasourceSelector
-    const handleChange = (e)=>{
-        const next = optionValueToSelector(e.target.value);
-        onChange(next);
+    const handleChange = (selectedOption)=>{
+        if (selectedOption) {
+            const next = optionValueToSelector(selectedOption?.value || '');
+            onChange(next);
+        } else {
+            onChange({
+                kind: datasourcePluginKind
+            });
+        }
     };
     // We use a fake action event when we click on the action of the chip (hijack the "delete" feature).
     // This is because the href link action is on the `deleteIcon` property already, but the `onDelete` property
     // controls its visibility.
     // eslint-disable-next-line @typescript-eslint/no-empty-function
     const fakeActionEvent = ()=>{};
-    // TODO:
-    //  - Does this need a loading indicator of some kind?
-    //  - The group's edit link is not clickable once selected.
-    //  - The group's edit link is disabled if datasource is overridden.
-    //    Ref: https://github.com/mui/material-ui/issues/36572
-    return /*#__PURE__*/ (0, _jsxruntime.jsx)(_material.Select, {
-        ...others,
+    return /*#__PURE__*/ (0, _jsxruntime.jsx)(_material.Autocomplete, {
+        options: options,
+        renderInput: (params)=>/*#__PURE__*/ (0, _jsxruntime.jsx)(_material.TextField, {
+                ...params,
+                label: others.label,
+                placeholder: ""
+            }),
+        groupBy: (option)=>option.groupLabel || 'No group',
+        getOptionLabel: (option)=>{
+            return option.name;
+        },
+        onChange: (_, v)=>handleChange(v),
         value: optionValue,
-        onChange: handleChange,
-        children: menuItems.map((menuItemGroup)=>[
-                /*#__PURE__*/ (0, _jsxruntime.jsx)(_material.Divider, {}, `${menuItemGroup.group}-divider`),
-                ...menuItemGroup.items.map((menuItem)=>/*#__PURE__*/ (0, _jsxruntime.jsx)(_material.MenuItem, {
-                        value: menuItem.value,
-                        disabled: menuItem.overridden || !menuItem.saved,
-                        children: /*#__PURE__*/ (0, _jsxruntime.jsxs)(_material.Stack, {
-                            direction: "row",
-                            alignItems: "center",
-                            justifyContent: "space-between",
-                            width: "100%",
-                            children: [
-                                /*#__PURE__*/ (0, _jsxruntime.jsx)(_material.ListItemText, {
-                                    children: /*#__PURE__*/ (0, _jsxruntime.jsx)(DatasourceName, {
-                                        name: menuItem.name,
-                                        overridden: menuItem.overridden,
-                                        overriding: menuItem.overriding
-                                    })
-                                }),
-                                !menuItem.saved && /*#__PURE__*/ (0, _jsxruntime.jsx)(_material.ListItemText, {
-                                    children: "Save the dashboard to enable this datasource"
-                                }),
-                                /*#__PURE__*/ (0, _jsxruntime.jsx)(_material.ListItemText, {
-                                    style: {
-                                        textAlign: 'right'
-                                    },
-                                    children: menuItemGroup.group && menuItemGroup.group.length > 0 && /*#__PURE__*/ (0, _jsxruntime.jsx)(_material.Chip, {
-                                        disabled: false,
-                                        label: menuItemGroup.group,
-                                        size: "small",
-                                        onDelete: menuItemGroup.editLink ? fakeActionEvent : undefined,
-                                        deleteIcon: menuItemGroup.editLink ? /*#__PURE__*/ (0, _jsxruntime.jsx)(_material.IconButton, {
-                                            href: menuItemGroup.editLink,
-                                            target: "_blank",
-                                            children: /*#__PURE__*/ (0, _jsxruntime.jsx)(_OpenInNew.default, {
-                                                fontSize: "small"
-                                            })
-                                        }) : undefined
-                                    })
+        renderOption: (props, option)=>{
+            return /*#__PURE__*/ (0, _react.createElement)("li", {
+                ...props,
+                key: option.value
+            }, /*#__PURE__*/ (0, _jsxruntime.jsxs)(_material.Stack, {
+                direction: "row",
+                alignItems: "center",
+                justifyContent: "space-between",
+                width: "100%",
+                children: [
+                    /*#__PURE__*/ (0, _jsxruntime.jsx)(_material.ListItemText, {
+                        children: /*#__PURE__*/ (0, _jsxruntime.jsx)(DatasourceName, {
+                            name: option.name,
+                            overridden: option.overridden,
+                            overriding: option.overriding
+                        })
+                    }),
+                    !option.saved && /*#__PURE__*/ (0, _jsxruntime.jsx)(_material.ListItemText, {
+                        children: "Save the dashboard to enable this datasource"
+                    }),
+                    /*#__PURE__*/ (0, _jsxruntime.jsx)(_material.ListItemText, {
+                        style: {
+                            textAlign: 'right'
+                        },
+                        children: option.groupLabel && option.groupLabel.length > 0 && /*#__PURE__*/ (0, _jsxruntime.jsx)(_material.Chip, {
+                            disabled: false,
+                            label: option.groupLabel,
+                            size: "small",
+                            onDelete: option.groupEditLink ? fakeActionEvent : undefined,
+                            deleteIcon: option.groupEditLink ? /*#__PURE__*/ (0, _jsxruntime.jsx)(_material.IconButton, {
+                                href: option.groupEditLink,
+                                target: "_blank",
+                                children: /*#__PURE__*/ (0, _jsxruntime.jsx)(_OpenInNew.default, {
+                                    fontSize: "small"
                                 })
-                            ]
+                            }) : undefined
                         })
-                    }, menuItem.value))
-            ])
+                    })
+                ]
+            }));
+        }
     });
 }
 function DatasourceName(props) {
@@ -154,22 +204,20 @@ function DatasourceName(props) {
 }
 // Delimiter used to stringify/parse option values
 const OPTION_VALUE_DELIMITER = '_____';
-/**
- * Given a DatasourceSelectItemSelector,
- * returns a string value like `{kind}_____{group}_____{name}` that can be used as a Select input value.
- * @param selector
- */ function selectorToOptionValue(selector) {
+function selectorToOptionValue(selector) {
+    if (isVariableDatasource(selector)) {
+        return `${DATASOURCE_VARIABLE_VALUE_PREFIX}${selector}`;
+    }
     return [
         selector.kind,
         selector.group ?? '',
         selector.name ?? ''
     ].join(OPTION_VALUE_DELIMITER);
 }
-/**
- * Given an option value name like `{kind}_____{group}_____{name}`,
- * returns a DatasourceSelector to be used by the query data model.
- * @param optionValue
- */ function optionValueToSelector(optionValue) {
+function optionValueToSelector(optionValue) {
+    if (optionValue.startsWith(DATASOURCE_VARIABLE_VALUE_PREFIX)) {
+        return optionValue.split(DATASOURCE_VARIABLE_VALUE_PREFIX)[1];
+    }
     const words = optionValue.split(OPTION_VALUE_DELIMITER);
     const kind = words[0];
     const name = words[2];
@@ -181,3 +229,37 @@ const OPTION_VALUE_DELIMITER = '_____';
         name: name === '' ? undefined : name
     };
 }
+function isVariableDatasource(value) {
+    return typeof value === 'string' && value.startsWith(VARIABLE_IDENTIFIER);
+}
+const datasourceSelectValueToSelector = (value, variables, datasourceSelectItemGroups)=>{
+    if (!isVariableDatasource(value)) {
+        return value;
+    }
+    const [variableName] = (0, _utils.parseVariables)(value);
+    const variable = variables[variableName ?? ''];
+    // If the variable is not defined or if its value is an array, we cannot determine a selector and return undefined
+    if (!variable || Array.isArray(variable.value)) {
+        return undefined;
+    }
+    const associatedDatasource = (datasourceSelectItemGroups || []).flatMap((itemGroup)=>itemGroup.items).find((datasource)=>datasource.name === variable.value);
+    // If the variable value is not a datasource, we cannot determine a selector and return undefined
+    if (associatedDatasource === undefined) {
+        return undefined;
+    }
+    const datasourceSelector = {
+        kind: associatedDatasource.selector.kind,
+        name: associatedDatasource.selector.name
+    };
+    return datasourceSelector;
+};
+const useDatasourceSelectValueToSelector = (value, datasourcePluginKind)=>{
+    const { data } = (0, _runtime.useListDatasourceSelectItems)(datasourcePluginKind);
+    const variables = (0, _runtime.useVariableValues)();
+    if (!isVariableDatasource(value)) {
+        return value;
+    }
+    return datasourceSelectValueToSelector(value, variables, data) ?? {
+        kind: datasourcePluginKind
+    };
+};

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

@@ -78,6 +78,10 @@ function HTTPSettingsEditor(props) {
     const { value, onChange, isReadonly, initialSpecDirect, initialSpecProxy } = 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) {
+        Object.assign(value, initialSpecProxy);
+    }
     // utilitary function used for headers when renaming a property
     // -> TODO it would be cleaner to manipulate headers as an intermediary list instead, to avoid doing this.
     const buildNewHeaders = (oldHeaders, oldName, newName)=>{
@@ -487,8 +491,7 @@ function HTTPSettingsEditor(props) {
     // bug in case the tabs get eventually swapped in the future.
     const directModeId = tabs.findIndex((tab)=>tab.label === strDirect);
     const proxyModeId = tabs.findIndex((tab)=>tab.label === strProxy);
-    // In "update datasource" case, set defaultTab to the mode that this datasource is currently relying on.
-    // Otherwise (create datasource), set defaultTab to Direct access.
+    // Set defaultTab to the mode that this datasource is currently relying on.
     const defaultTab = value.proxy ? proxyModeId : directModeId;
     // For better user experience, save previous states in mind for both mode.
     // This avoids losing everything when the user changes their mind back.

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

@@ -30,8 +30,11 @@ _export(exports, {
 });
 const _jsxruntime = require("react/jsx-runtime");
 const _Refresh = /*#__PURE__*/ _interop_require_default(require("mdi-material-ui/Refresh"));
+const _PlusCircleOutline = /*#__PURE__*/ _interop_require_default(require("mdi-material-ui/PlusCircleOutline"));
+const _MinusCircleOutline = /*#__PURE__*/ _interop_require_default(require("mdi-material-ui/MinusCircleOutline"));
 const _material = require("@mui/material");
 const _components = require("@perses-dev/components");
+const _core = require("@perses-dev/core");
 const _react = require("react");
 const _constants = require("../../constants");
 const _runtime = require("../../runtime");
@@ -79,9 +82,10 @@ const DEFAULT_REFRESH_INTERVAL_OPTIONS = [
     }
 ];
 const DEFAULT_HEIGHT = '34px';
-function TimeRangeControls({ heightPx, showTimeRangeSelector = true, showRefreshButton = true, showRefreshInterval = true, showCustomTimeRange, timePresets }) {
+function TimeRangeControls({ heightPx, showTimeRangeSelector = true, showRefreshButton = true, showRefreshInterval = true, showCustomTimeRange, showZoomButtons = true, timePresets }) {
     const { timeRange, setTimeRange, refresh, refreshInterval, setRefreshInterval } = (0, _runtime.useTimeRange)();
     const showCustomTimeRangeValue = (0, _runtime.useShowCustomTimeRangeSetting)(showCustomTimeRange);
+    const showZoomInOutButtons = (0, _runtime.useShowZoomRangeSetting)(showZoomButtons);
     const timePresetsValue = (0, _runtime.useTimeRangeOptionsSetting)(timePresets);
     // Convert height to a string, then use the string for styling
     const height = heightPx === undefined ? DEFAULT_HEIGHT : `${heightPx}px`;
@@ -95,6 +99,70 @@ function TimeRangeControls({ heightPx, showTimeRangeSelector = true, showRefresh
     }, [
         setRefreshInterval
     ]);
+    const fromDurationToMillis = (strDuration)=>{
+        const duration = (0, _core.parseDurationString)(strDuration);
+        const millis = // eslint-disable-next-line prettier/prettier
+        ((duration.seconds ?? 0) + (duration.minutes ?? 0) * 60 + (duration.hours ?? 0) * 3600 + (duration.days ?? 0) * 86400 + (duration.weeks ?? 0) * 7 * 86400 + (duration.months ?? 0) * 30.436875 * 86400 + // avg month duration is ok for zoom purposes
+        (duration.years ?? 0) * 365.2425 * 86400) * // avg year duration is ok for zoom purposes
+        // eslint-disable-next-line prettier/prettier
+        1000; // to milliseconds
+        return millis;
+    };
+    // Function to double current time range, adding 50% before current start and 50% after current end
+    const doubleTimeRange = ()=>{
+        let newStart, newEnd, extendEndsBy;
+        const now = new Date();
+        if (Object.hasOwn(timeRange, 'start')) {
+            // current range is absolute
+            const absVal = timeRange;
+            extendEndsBy = (absVal.end.getTime() - absVal.start.getTime()) / 2; // half it to add 50% before current start and after current end
+            newStart = new Date(absVal.start.getTime() - extendEndsBy);
+            newEnd = new Date(absVal.end.getTime() + extendEndsBy);
+        } else {
+            // current range is relative
+            const relVal = timeRange;
+            extendEndsBy = fromDurationToMillis(relVal.pastDuration) / 2;
+            newEnd = typeof relVal.end === 'undefined' ? now : new Date(relVal.end.getTime() + extendEndsBy);
+            newStart = new Date(newEnd.getTime() - extendEndsBy * 4);
+        }
+        if (newEnd.getTime() > now.getTime()) {
+            // if the new computed end is in the future
+            newEnd = now;
+            newStart.setTime(now.getTime() - extendEndsBy * 4);
+        }
+        if (newStart.getTime() < 1) {
+            newStart.setTime(1);
+        }
+        return {
+            start: newStart,
+            end: newEnd
+        };
+    };
+    // Function to half current time range, cutting 25% before current start and 25% after current end
+    const halfTimeRange = ()=>{
+        let newStart, newEnd;
+        if (Object.hasOwn(timeRange, 'start')) {
+            const absVal = timeRange;
+            const shrinkEndsBy = (absVal.end.getTime() - absVal.start.getTime()) / 4;
+            newStart = new Date(absVal.start.getTime() + shrinkEndsBy);
+            newEnd = new Date(absVal.end.getTime() - shrinkEndsBy);
+        } else {
+            const relVal = timeRange;
+            const shrinkEndsBy = fromDurationToMillis(relVal.pastDuration) / 4; // 25% of it to cut after current start and before current end
+            const endIsAbsolute = typeof relVal.end !== 'undefined';
+            newEnd = endIsAbsolute ? new Date(relVal.end.getTime() - shrinkEndsBy) : new Date();
+            newStart = new Date(newEnd.getTime() - shrinkEndsBy * 2);
+        }
+        if (newStart.getTime() >= newEnd.getTime() - 1000) {
+            newStart.setTime(newEnd.getTime() - 1000);
+        }
+        return {
+            start: newStart,
+            end: newEnd
+        };
+    };
+    const setHalfTimeRange = ()=>setTimeRange(halfTimeRange());
+    const setDoubleTimeRange = ()=>setTimeRange(doubleTimeRange());
     return /*#__PURE__*/ (0, _jsxruntime.jsxs)(_material.Stack, {
         direction: "row",
         spacing: 1,
@@ -106,6 +174,28 @@ function TimeRangeControls({ heightPx, showTimeRangeSelector = true, showRefresh
                 height: height,
                 showCustomTimeRange: showCustomTimeRangeValue
             }),
+            showZoomInOutButtons && /*#__PURE__*/ (0, _jsxruntime.jsx)(_components.InfoTooltip, {
+                description: _constants.TOOLTIP_TEXT.zoomOut,
+                children: /*#__PURE__*/ (0, _jsxruntime.jsx)(_components.ToolbarIconButton, {
+                    "aria-label": _constants.TOOLTIP_TEXT.zoomOut,
+                    onClick: setDoubleTimeRange,
+                    sx: {
+                        height
+                    },
+                    children: /*#__PURE__*/ (0, _jsxruntime.jsx)(_MinusCircleOutline.default, {})
+                })
+            }),
+            showZoomInOutButtons && /*#__PURE__*/ (0, _jsxruntime.jsx)(_components.InfoTooltip, {
+                description: _constants.TOOLTIP_TEXT.zoomIn,
+                children: /*#__PURE__*/ (0, _jsxruntime.jsx)(_components.ToolbarIconButton, {
+                    "aria-label": _constants.TOOLTIP_TEXT.zoomIn,
+                    onClick: setHalfTimeRange,
+                    sx: {
+                        height
+                    },
+                    children: /*#__PURE__*/ (0, _jsxruntime.jsx)(_PlusCircleOutline.default, {})
+                })
+            }),
             showRefreshButton && /*#__PURE__*/ (0, _jsxruntime.jsx)(_components.InfoTooltip, {
                 description: _constants.TOOLTIP_TEXT.refresh,
                 children: /*#__PURE__*/ (0, _jsxruntime.jsx)(_components.ToolbarIconButton, {

package/dist/cjs/components/Variables/VariableEditorForm/VariableEditorForm.js

@@ -150,10 +150,12 @@ function ListVariableEditorForm({ action, control }) {
     const refreshPreview = ()=>{
         setPreviewSpec(form.getValues());
     };
-    const kind = (0, _reacthookform.useWatch)({
-        control: control,
-        name: 'spec.plugin.kind'
+    const plugin = (0, _reacthookform.useWatch)({
+        control,
+        name: 'spec.plugin'
     });
+    const kind = plugin?.kind;
+    const pluginSpec = plugin?.spec;
     const _allowAllValue = (0, _reacthookform.useWatch)({
         control: control,
         name: 'spec.allowAllValue'
@@ -203,7 +205,8 @@ function ListVariableEditorForm({ action, control }) {
                                 children: /*#__PURE__*/ (0, _jsxruntime.jsx)(_reacthookform.Controller, {
                                     control: control,
                                     name: "spec.plugin",
-                                    render: ({ field })=>/*#__PURE__*/ (0, _jsxruntime.jsx)(_PluginEditor.PluginEditor, {
+                                    render: ({ field })=>{
+                                        return /*#__PURE__*/ (0, _jsxruntime.jsx)(_PluginEditor.PluginEditor, {
                                             width: "100%",
                                             pluginTypes: [
                                                 'Variable'
@@ -212,9 +215,9 @@ function ListVariableEditorForm({ action, control }) {
                                             value: {
                                                 selection: {
                                                     type: 'Variable',
-                                                    kind: field.value?.kind ?? 'StaticListVariable'
+                                                    kind: kind ?? 'StaticListVariable'
                                                 },
-                                                spec: field.value?.spec ?? {
+                                                spec: pluginSpec ?? {
                                                     values: []
                                                 }
                                             },
@@ -225,7 +228,8 @@ function ListVariableEditorForm({ action, control }) {
                                                     spec: v.spec
                                                 });
                                             }
-                                        })
+                                        });
+                                    }
                                 })
                             })
                         ]

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

@@ -26,5 +26,7 @@ const TOOLTIP_TEXT = {
     copyVariableValues: 'Copy values to clipboard',
     // Time range controls buttons
     refresh: 'Refresh',
-    refreshInterval: 'Auto refresh interval'
+    refreshInterval: 'Auto refresh interval',
+    zoomIn: 'Zoom in',
+    zoomOut: 'Zoom out'
 };