@perses-dev/plugin-system 0.52.0-rc.0 → 0.52.0

package/dist/cjs/components/DatasourceSelect.js

@@ -61,7 +61,7 @@ const emptyDatasourceOption = {
     value: ''
 };
 function DatasourceSelect(props) {
-    const { datasourcePluginKind, value, project, onChange, ...others } = props;
+    const { datasourcePluginKind, value, project, readOnly, onChange, ...others } = props;
     const { data, isLoading } = (0, _runtime.useListDatasourceSelectItems)(datasourcePluginKind, project);
     const variables = (0, _runtime.useVariableValues)();
     const defaultValue = (0, _react.useMemo)(()=>{
@@ -132,6 +132,7 @@ function DatasourceSelect(props) {
     // eslint-disable-next-line @typescript-eslint/no-empty-function
     const fakeActionEvent = ()=>{};
     return /*#__PURE__*/ (0, _jsxruntime.jsx)(_material.Autocomplete, {
+        readOnly: readOnly,
         options: options,
         renderInput: (params)=>/*#__PURE__*/ (0, _jsxruntime.jsx)(_material.TextField, {
                 ...params,

package/dist/cjs/components/LegendOptionsEditor/LegendOptionsEditor.js

@@ -32,12 +32,6 @@ const POSITION_OPTIONS = Object.entries(_model.LEGEND_POSITIONS_CONFIG).map(([id
         ...config
     };
 });
-const MODE_OPTIONS = Object.entries(_model.LEGEND_MODE_CONFIG).map(([id, config])=>{
-    return {
-        id: id,
-        ...config
-    };
-});
 const SIZE_OPTIONS = Object.entries(_model.LEGEND_SIZE_CONFIG).map(([id, config])=>{
     return {
         id: id,
@@ -58,13 +52,6 @@ function LegendOptionsEditor({ value, onChange, showValuesEditor = true, calcula
             position: newValue.id
         });
     };
-    const handleLegendModeChange = (_, newValue)=>{
-        onChange({
-            ...value,
-            position: currentPosition,
-            mode: newValue.id
-        });
-    };
     const handleLegendSizeChange = (_, newValue)=>{
         onChange({
             ...value,
@@ -85,7 +72,6 @@ function LegendOptionsEditor({ value, onChange, showValuesEditor = true, calcula
     const currentPosition = (0, _core.getLegendPosition)(value?.position);
     const legendPositionConfig = _model.LEGEND_POSITIONS_CONFIG[currentPosition];
     const currentMode = (0, _core.getLegendMode)(value?.mode);
-    const legendModeConfig = _model.LEGEND_MODE_CONFIG[currentMode];
     const currentSize = (0, _core.getLegendSize)(value?.size);
     const legendSizeConfig = _model.LEGEND_SIZE_CONFIG[currentSize];
     const legendValuesConfig = (0, _react.useMemo)(()=>{
@@ -147,65 +133,79 @@ function LegendOptionsEditor({ value, onChange, showValuesEditor = true, calcula
                     onChange: handleLegendShowChange
                 })
             }),
-            /*#__PURE__*/ (0, _jsxruntime.jsx)(_components.OptionsEditorControl, {
-                label: "Position",
-                control: /*#__PURE__*/ (0, _jsxruntime.jsx)(_components.SettingsAutocomplete, {
-                    value: {
-                        ...legendPositionConfig,
-                        id: currentPosition
-                    },
-                    options: POSITION_OPTIONS,
-                    onChange: handleLegendPositionChange,
-                    disabled: value === undefined,
-                    disableClearable: true
-                })
-            }),
-            /*#__PURE__*/ (0, _jsxruntime.jsx)(_components.OptionsEditorControl, {
-                label: "Mode",
-                control: /*#__PURE__*/ (0, _jsxruntime.jsx)(_components.SettingsAutocomplete, {
-                    value: {
-                        ...legendModeConfig,
-                        id: currentMode
-                    },
-                    options: MODE_OPTIONS,
-                    onChange: handleLegendModeChange,
-                    disabled: !value,
-                    disableClearable: true
-                })
-            }),
-            /*#__PURE__*/ (0, _jsxruntime.jsx)(_components.OptionsEditorControl, {
-                label: "Size",
-                control: /*#__PURE__*/ (0, _jsxruntime.jsx)(_components.SettingsAutocomplete, {
-                    value: {
-                        ...legendSizeConfig,
-                        id: currentSize
-                    },
-                    options: SIZE_OPTIONS,
-                    onChange: handleLegendSizeChange,
-                    // TODO: enable sizes for list mode when we normalize the layout of
-                    // lists to more closely match tables.
-                    disabled: !value || currentMode !== 'table',
-                    disableClearable: true
-                })
-            }),
-            showValuesEditor && /*#__PURE__*/ (0, _jsxruntime.jsx)(_components.OptionsEditorControl, {
-                label: "Values",
-                control: // For some reason, the inferred option type doesn't always seem to work
-                // quite right when `multiple` is true. Explicitly setting the generics
-                // to work around this.
-                /*#__PURE__*/ (0, _jsxruntime.jsx)(_components.SettingsAutocomplete, {
-                    multiple: true,
-                    disableCloseOnSelect: true,
-                    disableClearable: true,
-                    value: legendValuesConfig,
-                    options: valueOptions,
-                    onChange: handleLegendValueChange,
-                    disabled: !value || currentMode !== 'table',
-                    limitTags: 1,
-                    ChipProps: {
-                        size: 'small'
-                    }
-                })
+            value && /*#__PURE__*/ (0, _jsxruntime.jsxs)(_jsxruntime.Fragment, {
+                children: [
+                    /*#__PURE__*/ (0, _jsxruntime.jsx)(_components.OptionsEditorControl, {
+                        label: "Position",
+                        control: /*#__PURE__*/ (0, _jsxruntime.jsx)(_components.SettingsAutocomplete, {
+                            value: {
+                                ...legendPositionConfig,
+                                id: currentPosition
+                            },
+                            options: POSITION_OPTIONS,
+                            onChange: handleLegendPositionChange,
+                            disableClearable: true
+                        })
+                    }),
+                    /*#__PURE__*/ (0, _jsxruntime.jsx)(_components.OptionsEditorControl, {
+                        label: "Mode",
+                        control: /*#__PURE__*/ (0, _jsxruntime.jsx)(_material.ToggleButtonGroup, {
+                            color: "primary",
+                            exclusive: true,
+                            value: currentMode,
+                            "aria-label": "Mode",
+                            onChange: (__, newValue)=>{
+                                onChange({
+                                    ...value,
+                                    position: currentPosition,
+                                    mode: newValue
+                                });
+                            },
+                            children: Object.entries(_model.LEGEND_MODE_CONFIG).map(([modeId, config])=>/*#__PURE__*/ (0, _jsxruntime.jsx)(_material.ToggleButton, {
+                                    value: modeId,
+                                    selected: currentMode === modeId,
+                                    "aria-label": `display ${modeId} mode`,
+                                    children: config.label
+                                }, modeId))
+                        })
+                    }),
+                    currentMode === 'table' && /*#__PURE__*/ (0, _jsxruntime.jsxs)(_jsxruntime.Fragment, {
+                        children: [
+                            /*#__PURE__*/ (0, _jsxruntime.jsx)(_components.OptionsEditorControl, {
+                                label: "Size",
+                                control: /*#__PURE__*/ (0, _jsxruntime.jsx)(_components.SettingsAutocomplete, {
+                                    value: {
+                                        ...legendSizeConfig,
+                                        id: currentSize
+                                    },
+                                    options: SIZE_OPTIONS,
+                                    onChange: handleLegendSizeChange,
+                                    // TODO: enable sizes for list mode when we normalize the layout of
+                                    // lists to more closely match tables.
+                                    disableClearable: true
+                                })
+                            }),
+                            showValuesEditor && /*#__PURE__*/ (0, _jsxruntime.jsx)(_components.OptionsEditorControl, {
+                                label: "Values",
+                                control: // For some reason, the inferred option type doesn't always seem to work
+                                // quite right when `multiple` is true. Explicitly setting the generics
+                                // to work around this.
+                                /*#__PURE__*/ (0, _jsxruntime.jsx)(_components.SettingsAutocomplete, {
+                                    multiple: true,
+                                    disableCloseOnSelect: true,
+                                    disableClearable: true,
+                                    value: legendValuesConfig,
+                                    options: valueOptions,
+                                    onChange: handleLegendValueChange,
+                                    limitTags: 1,
+                                    ChipProps: {
+                                        size: 'small'
+                                    }
+                                })
+                            })
+                        ]
+                    })
+                ]
             })
         ]
     });

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

@@ -60,7 +60,8 @@ function useDefaultQueryDefinition(queryTypes) {
         isLoading
     };
 }
-function MultiQueryEditor({ queryTypes, queries = [], onChange }) {
+const MultiQueryEditor = /*#__PURE__*/ (0, _react.forwardRef)((props, ref)=>{
+    const { queryTypes, queries = [], onChange } = props;
     const { defaultInitialQueryDefinition, isLoading } = useDefaultQueryDefinition(queryTypes);
     // State for which queries are collapsed
     const [queriesCollapsed, setQueriesCollapsed] = (0, _react.useState)(queries.map(()=>false));
@@ -122,6 +123,7 @@ function MultiQueryEditor({ queryTypes, queries = [], onChange }) {
             /*#__PURE__*/ (0, _jsxruntime.jsx)(_material.Stack, {
                 spacing: 1,
                 children: queryDefinitions.map((query, i)=>/*#__PURE__*/ (0, _jsxruntime.jsx)(_QueryEditorContainer.QueryEditorContainer, {
+                        ref: ref,
                         queryTypes: queryTypes,
                         index: i,
                         query: query,
@@ -142,4 +144,5 @@ function MultiQueryEditor({ queryTypes, queries = [], onChange }) {
             })
         ]
     });
-}
+});
+MultiQueryEditor.displayName = 'MultiQueryEditor';

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

@@ -26,13 +26,16 @@ const _material = require("@mui/material");
 const _DeleteOutline = /*#__PURE__*/ _interop_require_default(require("mdi-material-ui/DeleteOutline"));
 const _ChevronDown = /*#__PURE__*/ _interop_require_default(require("mdi-material-ui/ChevronDown"));
 const _ChevronRight = /*#__PURE__*/ _interop_require_default(require("mdi-material-ui/ChevronRight"));
+const _react = require("react");
 const _PluginEditor = require("../PluginEditor");
+const _runtime = require("../../runtime");
 function _interop_require_default(obj) {
     return obj && obj.__esModule ? obj : {
         default: obj
     };
 }
-const QueryEditorContainer = ({ queryTypes, index, query, isCollapsed, onDelete, onChange, onCollapseExpand })=>{
+const QueryEditorContainer = /*#__PURE__*/ (0, _react.forwardRef)((props, ref)=>{
+    const { queryTypes, index, query, isCollapsed, onDelete, onChange, onCollapseExpand } = props;
     return /*#__PURE__*/ (0, _jsxruntime.jsxs)(_material.Stack, {
         spacing: 1,
         children: [
@@ -68,21 +71,24 @@ const QueryEditorContainer = ({ queryTypes, index, query, isCollapsed, onDelete,
                 ]
             }),
             !isCollapsed && /*#__PURE__*/ (0, _jsxruntime.jsx)(QueryEditor, {
+                ref: ref,
                 queryTypes: queryTypes,
                 value: query,
                 onChange: (next)=>onChange(index, next)
             })
         ]
     }, index);
-};
+});
+QueryEditorContainer.displayName = 'QueryEditorContainer';
 /**
  * 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
  * spec for this plugin.
  * @param props
  * @constructor
- */ function QueryEditor(props) {
+ */ const QueryEditor = /*#__PURE__*/ (0, _react.forwardRef)((props, ref)=>{
     const { value, onChange, queryTypes, ...others } = props;
+    const { refresh } = (0, _runtime.useTimeRange)();
     const handlePluginChange = (next)=>{
         onChange((0, _immer.produce)(value, (draft)=>{
             draft.kind = next.selection.type;
@@ -93,6 +99,8 @@ const QueryEditorContainer = ({ queryTypes, index, query, isCollapsed, onDelete,
     return /*#__PURE__*/ (0, _jsxruntime.jsx)(_material.Box, {
         ...others,
         children: /*#__PURE__*/ (0, _jsxruntime.jsx)(_PluginEditor.PluginEditor, {
+            postExecuteRunQuery: refresh,
+            ref: ref,
             withRunQueryButton: true,
             pluginTypes: queryTypes,
             pluginKindLabel: "Query Type",
@@ -106,4 +114,5 @@ const QueryEditorContainer = ({ queryTypes, index, query, isCollapsed, onDelete,
             onChange: handlePluginChange
         })
     });
-}
+});
+QueryEditor.displayName = 'QueryEditor';

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

@@ -23,10 +23,11 @@ Object.defineProperty(exports, "PanelSpecEditor", {
 const _jsxruntime = require("react/jsx-runtime");
 const _components = require("@perses-dev/components");
 const _reacthookform = require("react-hook-form");
+const _react = require("react");
 const _runtime = require("../../runtime");
 const _OptionsEditorTabs = require("../OptionsEditorTabs");
 const _MultiQueryEditor = require("../MultiQueryEditor");
-function PanelSpecEditor(props) {
+const PanelSpecEditor = /*#__PURE__*/ (0, _react.forwardRef)((props, ref)=>{
     const { control, panelDefinition, onJSONChange, onQueriesChange, onPluginSpecChange } = props;
     const { kind } = panelDefinition.spec.plugin;
     const { data: plugin, isLoading, error } = (0, _runtime.usePlugin)('Panel', kind);
@@ -35,11 +36,10 @@ function PanelSpecEditor(props) {
             error: error
         });
     }
-    // TODO: Proper loading indicator
     if (isLoading) {
         return null;
     }
-    if (plugin === undefined) {
+    if (!plugin) {
         throw new Error(`Missing implementation for panel plugin with kind '${kind}'`);
     }
     const { panelOptionsEditorComponents, hideQueryEditor } = plugin;
@@ -51,6 +51,7 @@ function PanelSpecEditor(props) {
                 control: control,
                 name: "panelDefinition.spec.queries",
                 render: ({ field })=>/*#__PURE__*/ (0, _jsxruntime.jsx)(_MultiQueryEditor.MultiQueryEditor, {
+                        ref: ref,
                         queryTypes: plugin.supportedQueryTypes ?? [],
                         queries: panelDefinition.spec.queries ?? [],
                         onChange: (queries)=>{
@@ -61,7 +62,7 @@ function PanelSpecEditor(props) {
             })
         });
     }
-    if (panelOptionsEditorComponents !== undefined) {
+    if (panelOptionsEditorComponents) {
         tabs = tabs.concat(panelOptionsEditorComponents.map(({ label, content: OptionsEditorComponent })=>({
                 label,
                 content: /*#__PURE__*/ (0, _jsxruntime.jsx)(_reacthookform.Controller, {
@@ -105,4 +106,5 @@ function PanelSpecEditor(props) {
             tabs: tabs
         }, tabs.length)
     });
-}
+});
+PanelSpecEditor.displayName = 'PanelSpecEditor';

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

@@ -33,17 +33,16 @@ function _interop_require_default(obj) {
         default: obj
     };
 }
-function PluginEditor(props) {
-    // eslint-disable-next-line @typescript-eslint/no-unused-vars
-    const { value, withRunQueryButton = true, pluginTypes, pluginKindLabel, onChange: _, isReadonly, ...others } = props;
+const PluginEditor = /*#__PURE__*/ (0, _react.forwardRef)((props, ref)=>{
+    const { value, withRunQueryButton = true, pluginTypes, pluginKindLabel, onChange: _, isReadonly, postExecuteRunQuery: refresh, ...others } = props;
     const { pendingSelection, isLoading, error, onSelectionChange, onSpecChange } = (0, _plugineditorapi.usePluginEditor)(props);
     /* 
-    We could technically merge the watchedQuery, watchedOtherSpecs into a single watched-object,
-    because at the end of the day, they are all specs.
-    However, let's have them separated to keep the code simple and readable.
-    Reason: Only Query string field is common between all of them. Other specs may be different
-    Example: Legend, and MinSteps
-   */ const [watchedQuery, setWatchQuery] = (0, _react.useState)(value.spec['query']);
+     We could technically merge the watchedQuery, watchedOtherSpecs into a single watched-object,
+     because at the end of the day, they are all specs.
+     However, let's have them separated to keep the code simple and readable.
+     Reason: Only Query string field is common between all of them. Other specs may be different
+     Example: Legend, and MinSteps
+    */ const [watchedQuery, setWatchQuery] = (0, _react.useState)(value.spec['query']);
     const [watchedOtherSpecs, setWatchOtherSpecs] = (0, _react.useState)(value.spec);
     const runQueryHandler = (0, _react.useCallback)(()=>{
         onSpecChange({
@@ -51,11 +50,13 @@ function PluginEditor(props) {
             ...watchedOtherSpecs,
             query: watchedQuery
         });
+        refresh?.();
     }, [
         value.spec,
         onSpecChange,
         watchedQuery,
-        watchedOtherSpecs
+        watchedOtherSpecs,
+        refresh
     ]);
     const queryHandlerSettings = (0, _react.useMemo)(()=>{
         return withRunQueryButton ? {
@@ -70,19 +71,25 @@ function PluginEditor(props) {
     }, [
         withRunQueryButton
     ]);
+    (0, _react.useImperativeHandle)(ref, ()=>({
+            flushChanges: runQueryHandler
+        }));
     return /*#__PURE__*/ (0, _jsxruntime.jsxs)(_material.Box, {
         ...others,
         children: [
             /*#__PURE__*/ (0, _jsxruntime.jsxs)(_material.Box, {
                 sx: {
                     display: 'flex',
-                    flexDirection: 'row'
+                    flexDirection: 'row',
+                    alignItems: 'center',
+                    justifyContent: 'space-between',
+                    gap: 1,
+                    mb: 1
                 },
                 children: [
                     /*#__PURE__*/ (0, _jsxruntime.jsx)(_PluginKindSelect.PluginKindSelect, {
                         fullWidth: false,
                         sx: {
-                            mb: 2,
                             minWidth: 120
                         },
                         margin: "dense",
@@ -90,8 +97,10 @@ function PluginEditor(props) {
                         pluginTypes: pluginTypes,
                         disabled: isLoading,
                         value: pendingSelection ? pendingSelection : value.selection,
-                        InputProps: {
-                            readOnly: isReadonly
+                        slotProps: {
+                            input: {
+                                readOnly: isReadonly
+                            }
                         },
                         error: !!error,
                         helperText: error?.message,
@@ -100,12 +109,6 @@ function PluginEditor(props) {
                     withRunQueryButton && !isLoading && /*#__PURE__*/ (0, _jsxruntime.jsx)(_material.Button, {
                         "data-testid": "run_query_button",
                         variant: "contained",
-                        sx: {
-                            marginTop: 1.5,
-                            marginBottom: 1.5,
-                            paddingTop: 0.5,
-                            marginLeft: 'auto'
-                        },
                         startIcon: /*#__PURE__*/ (0, _jsxruntime.jsx)(_Reload.default, {}),
                         onClick: runQueryHandler,
                         children: "Run Query"
@@ -124,4 +127,5 @@ function PluginEditor(props) {
             })
         ]
     });
-}
+});
+PluginEditor.displayName = 'PluginEditor';

package/dist/cjs/components/PluginKindSelect/PluginKindSelect.js

@@ -27,6 +27,9 @@ const _runtime = require("../../runtime");
 const PluginKindSelect = /*#__PURE__*/ (0, _react.forwardRef)((props, ref)=>{
     const { pluginTypes, value: propValue, onChange, ...others } = props;
     const { data, isLoading } = (0, _runtime.useListPluginMetadata)(pluginTypes);
+    const sortedData = (0, _react.useMemo)(()=>data?.sort((a, b)=>a.spec.display.name.localeCompare(b.spec.display.name)), [
+        data
+    ]);
     // Pass an empty value while options are still loading so MUI doesn't complain about us using an "out of range" value
     const value = !propValue || isLoading ? '' : selectionToOptionValue(propValue);
     const handleChange = (event)=>{
@@ -37,9 +40,9 @@ const PluginKindSelect = /*#__PURE__*/ (0, _react.forwardRef)((props, ref)=>{
             return '';
         }
         const selectedValue = optionValueToSelection(selected);
-        return data?.find((v)=>v.kind === selectedValue.type && v.spec.name === selectedValue.kind)?.spec.display.name;
+        return sortedData?.find((v)=>v.kind === selectedValue.type && v.spec.name === selectedValue.kind)?.spec.display.name;
     }, [
-        data
+        sortedData
     ]);
     // TODO: Does this need a loading indicator of some kind?
     return /*#__PURE__*/ (0, _jsxruntime.jsxs)(_material.TextField, {
@@ -58,7 +61,7 @@ const PluginKindSelect = /*#__PURE__*/ (0, _react.forwardRef)((props, ref)=>{
                 value: "",
                 children: "Loading..."
             }),
-            data?.map((metadata)=>/*#__PURE__*/ (0, _jsxruntime.jsx)(_material.MenuItem, {
+            sortedData?.map((metadata)=>/*#__PURE__*/ (0, _jsxruntime.jsx)(_material.MenuItem, {
                     "data-testid": "option",
                     value: selectionToOptionValue({
                         type: metadata.kind,

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

@@ -106,12 +106,7 @@ function ListVariableEditorForm({ action, control }) {
     /** We use `previewSpec` to know when to explicitly update the
    * spec that will be used for preview. The reason why we do this is to avoid
    * having to re-fetch the values when the user is still editing the spec.
-   */ const [previewSpec, setPreviewSpec] = (0, _react.useState)(form.getValues());
-    const { refresh } = (0, _runtime.useTimeRange)();
-    const refreshPreview = ()=>{
-        refresh();
-        setPreviewSpec(form.getValues());
-    };
+   */ const previewSpec = form.getValues();
     const plugin = (0, _reacthookform.useWatch)({
         control,
         name: 'spec.plugin'
@@ -131,6 +126,7 @@ function ListVariableEditorForm({ action, control }) {
     if (values.spec.allowMultiple === undefined) {
         form.setValue('spec.allowMultiple', false);
     }
+    const { refresh } = (0, _runtime.useTimeRange)();
     return /*#__PURE__*/ (0, _jsxruntime.jsxs)(_jsxruntime.Fragment, {
         children: [
             /*#__PURE__*/ (0, _jsxruntime.jsx)(_material.Typography, {
@@ -149,8 +145,7 @@ function ListVariableEditorForm({ action, control }) {
                                 previewSpec
                             ],
                             children: /*#__PURE__*/ (0, _jsxruntime.jsx)(_VariablePreview.VariableListPreview, {
-                                definition: previewSpec,
-                                onRefresh: refreshPreview
+                                definition: previewSpec
                             })
                         })
                     }) : /*#__PURE__*/ (0, _jsxruntime.jsx)(_VariablePreview.VariablePreview, {
@@ -164,6 +159,7 @@ function ListVariableEditorForm({ action, control }) {
                                 name: "spec.plugin",
                                 render: ({ field })=>{
                                     return /*#__PURE__*/ (0, _jsxruntime.jsx)(_PluginEditor.PluginEditor, {
+                                        postExecuteRunQuery: refresh,
                                         withRunQueryButton: true,
                                         width: "100%",
                                         pluginTypes: [
@@ -175,9 +171,7 @@ function ListVariableEditorForm({ action, control }) {
                                                 type: 'Variable',
                                                 kind: kind ?? 'StaticListVariable'
                                             },
-                                            spec: pluginSpec ?? {
-                                                values: []
-                                            }
+                                            spec: pluginSpec ?? {}
                                         },
                                         isReadonly: action === 'read',
                                         onChange: (v)=>{

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

@@ -32,7 +32,6 @@ const _jsxruntime = require("react/jsx-runtime");
 const _react = /*#__PURE__*/ _interop_require_wildcard(require("react"));
 const _material = require("@mui/material");
 const _components = require("@perses-dev/components");
-const _Refresh = /*#__PURE__*/ _interop_require_default(require("mdi-material-ui/Refresh"));
 const _ClipboardOutline = /*#__PURE__*/ _interop_require_default(require("mdi-material-ui/ClipboardOutline"));
 const _constants = require("../../../constants");
 const _variablemodel = require("../variable-model");
@@ -84,7 +83,7 @@ function _interop_require_wildcard(obj, nodeInterop) {
 }
 const DEFAULT_MAX_PREVIEW_VALUES = 50;
 function VariablePreview(props) {
-    const { values, onRefresh, isLoading, error } = props;
+    const { values, isLoading, error } = props;
     const [maxValues, setMaxValues] = (0, _react.useState)(DEFAULT_MAX_PREVIEW_VALUES);
     const { infoSnackbar } = (0, _components.useSnackbar)();
     const showAll = ()=>{
@@ -106,14 +105,6 @@ function VariablePreview(props) {
                         variant: "h4",
                         children: "Preview Values"
                     }),
-                    onRefresh && /*#__PURE__*/ (0, _jsxruntime.jsx)(_components.InfoTooltip, {
-                        description: _constants.TOOLTIP_TEXT.refreshVariableValues,
-                        children: /*#__PURE__*/ (0, _jsxruntime.jsx)(_material.IconButton, {
-                            onClick: onRefresh,
-                            size: "small",
-                            children: /*#__PURE__*/ (0, _jsxruntime.jsx)(_Refresh.default, {})
-                        })
-                    }),
                     /*#__PURE__*/ (0, _jsxruntime.jsx)(_components.InfoTooltip, {
                         description: _constants.TOOLTIP_TEXT.copyVariableValues,
                         children: /*#__PURE__*/ (0, _jsxruntime.jsx)(_material.IconButton, {
@@ -172,18 +163,16 @@ function VariablePreview(props) {
     });
 }
 function VariableListPreview(props) {
-    const { onRefresh, definition } = props;
+    const { definition } = props;
     const { data, isFetching, error } = (0, _variablemodel.useListVariablePluginValues)(definition);
     const errorMessage = error?.message;
     const variablePreview = (0, _react.useMemo)(()=>/*#__PURE__*/ (0, _jsxruntime.jsx)(VariablePreview, {
             values: data?.map((val)=>val.value) || [],
-            onRefresh: onRefresh,
             isLoading: isFetching,
             error: errorMessage
         }), [
         errorMessage,
         isFetching,
-        onRefresh,
         data
     ]);
     return variablePreview;

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

@@ -1,4 +1,4 @@
-// Copyright 2023 The Perses Authors
+// Copyright 2025 The Perses Authors
 // Licensed under the Apache License, Version 2.0 (the "License");
 // you may not use this file except in compliance with the License.
 // You may obtain a copy of the License at

package/dist/cjs/test/utils.js

@@ -22,7 +22,9 @@ Object.defineProperty(exports, "getTestContextWrapper", {
 });
 const _jsxruntime = require("react/jsx-runtime");
 const _reactquery = require("@tanstack/react-query");
+const _core = require("@perses-dev/core");
 const _components = require("../components");
+const _runtime = require("../runtime");
 const _testplugins = require("./test-plugins");
 function getTestContextWrapper(contextOptions) {
     // Create a new QueryClient for each test to avoid caching issues
@@ -34,15 +36,22 @@ function getTestContextWrapper(contextOptions) {
             }
         }
     });
+    const timeRange = {
+        start: new Date(Date.now() - Number(_core.DEFAULT_DASHBOARD_DURATION)),
+        end: new Date()
+    };
     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
+        return /*#__PURE__*/ (0, _jsxruntime.jsx)(_runtime.TimeRangeProvider, {
+            timeRange: timeRange,
+            children: /*#__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/DatasourceSelect.d.ts.map

@@ -1 +1 @@
-{"version":3,"file":"DatasourceSelect.d.ts","sourceRoot":"","sources":["../../src/components/DatasourceSelect.tsx"],"names":[],"mappings":"AAcA,OAAO,EAML,mBAAmB,EACnB,eAAe,EAGhB,MAAM,eAAe,CAAC;AACvB,OAAO,EAAE,kBAAkB,EAAE,YAAY,EAAE,MAAM,kBAAkB,CAAC;AACpE,OAAO,EAAE,YAAY,EAAW,MAAM,OAAO,CAAC;AAC9C,OAAO,EAEL,yBAAyB,EACzB,4BAA4B,EAG5B,gBAAgB,EACjB,MAAM,YAAY,CAAC;AAOpB,KAAK,eAAe,GAAG,UAAU,GAAG,OAAO,GAAG,UAAU,CAAC;AAWzD,MAAM,MAAM,qBAAqB,CAAC,CAAC,GAAG,kBAAkB,IAAI,CAAC,GAAG,YAAY,CAAC;AAE7E,MAAM,WAAW,qBAAsB,SAAQ,IAAI,CAAC,mBAAmB,GAAG,eAAe,CAAC,MAAM,CAAC,EAAE,eAAe,CAAC;IACjH,KAAK,EAAE,qBAAqB,CAAC;IAC7B,QAAQ,EAAE,CAAC,IAAI,EAAE,qBAAqB,KAAK,IAAI,CAAC;IAChD,oBAAoB,EAAE,MAAM,CAAC;IAC7B,OAAO,CAAC,EAAE,MAAM,CAAC;CAClB;AAED;;;GAGG;AACH,wBAAgB,gBAAgB,CAAC,KAAK,EAAE,qBAAqB,GAAG,YAAY,CAiH3E;AAED,wBAAgB,cAAc,CAAC,KAAK,EAAE;IAAE,IAAI,EAAE,MAAM,CAAC;IAAC,UAAU,CAAC,EAAE,OAAO,CAAC;IAAC,UAAU,CAAC,EAAE,OAAO,CAAA;CAAE,GAAG,YAAY,CAahH;AAKD;;;;GAIG;AACH,wBAAgB,qBAAqB,CAAC,QAAQ,EAAE,4BAA4B,GAAG,YAAY,GAAG,MAAM,CAKnG;AAED;;;;GAIG;AACH,wBAAgB,qBAAqB,CAAC,WAAW,EAAE,MAAM,GAAG,qBAAqB,CAehF;AAED,wBAAgB,oBAAoB,CAAC,KAAK,EAAE,qBAAqB,GAAG,SAAS,GAAG,KAAK,IAAI,YAAY,CAEpG;AAED,eAAO,MAAM,+BAA+B,UACnC,qBAAqB,GAAG,SAAS,aAC7B,gBAAgB,8BACC,yBAAyB,EAAE,GAAG,SAAS,KAClE,kBAAkB,GAAG,SA4BvB,CAAC;AAEF,eAAO,MAAM,kCAAkC,UACtC,qBAAqB,wBACN,MAAM,KAC3B,kBAQF,CAAC"}
+{"version":3,"file":"DatasourceSelect.d.ts","sourceRoot":"","sources":["../../src/components/DatasourceSelect.tsx"],"names":[],"mappings":"AAcA,OAAO,EAML,mBAAmB,EACnB,eAAe,EAGhB,MAAM,eAAe,CAAC;AACvB,OAAO,EAAE,kBAAkB,EAAE,YAAY,EAAE,MAAM,kBAAkB,CAAC;AACpE,OAAO,EAAE,YAAY,EAAW,MAAM,OAAO,CAAC;AAC9C,OAAO,EAEL,yBAAyB,EACzB,4BAA4B,EAG5B,gBAAgB,EACjB,MAAM,YAAY,CAAC;AAOpB,KAAK,eAAe,GAAG,UAAU,GAAG,OAAO,GAAG,UAAU,CAAC;AAWzD,MAAM,MAAM,qBAAqB,CAAC,CAAC,GAAG,kBAAkB,IAAI,CAAC,GAAG,YAAY,CAAC;AAE7E,MAAM,WAAW,qBAAsB,SAAQ,IAAI,CAAC,mBAAmB,GAAG,eAAe,CAAC,MAAM,CAAC,EAAE,eAAe,CAAC;IACjH,KAAK,EAAE,qBAAqB,CAAC;IAC7B,QAAQ,EAAE,CAAC,IAAI,EAAE,qBAAqB,KAAK,IAAI,CAAC;IAChD,oBAAoB,EAAE,MAAM,CAAC;IAC7B,OAAO,CAAC,EAAE,MAAM,CAAC;CAClB;AAED;;;GAGG;AACH,wBAAgB,gBAAgB,CAAC,KAAK,EAAE,qBAAqB,GAAG,YAAY,CAkH3E;AAED,wBAAgB,cAAc,CAAC,KAAK,EAAE;IAAE,IAAI,EAAE,MAAM,CAAC;IAAC,UAAU,CAAC,EAAE,OAAO,CAAC;IAAC,UAAU,CAAC,EAAE,OAAO,CAAA;CAAE,GAAG,YAAY,CAahH;AAKD;;;;GAIG;AACH,wBAAgB,qBAAqB,CAAC,QAAQ,EAAE,4BAA4B,GAAG,YAAY,GAAG,MAAM,CAKnG;AAED;;;;GAIG;AACH,wBAAgB,qBAAqB,CAAC,WAAW,EAAE,MAAM,GAAG,qBAAqB,CAehF;AAED,wBAAgB,oBAAoB,CAAC,KAAK,EAAE,qBAAqB,GAAG,SAAS,GAAG,KAAK,IAAI,YAAY,CAEpG;AAED,eAAO,MAAM,+BAA+B,UACnC,qBAAqB,GAAG,SAAS,aAC7B,gBAAgB,8BACC,yBAAyB,EAAE,GAAG,SAAS,KAClE,kBAAkB,GAAG,SA4BvB,CAAC;AAEF,eAAO,MAAM,kCAAkC,UACtC,qBAAqB,wBACN,MAAM,KAC3B,kBAQF,CAAC"}

package/dist/components/DatasourceSelect.js

@@ -27,7 +27,7 @@ const emptyDatasourceOption = {
  * Displays a MUI input for selecting a Datasource of a particular kind. Note: The 'value' and `onChange` handler for
  * the input deal with a `DatasourceSelector`.
  */ export function DatasourceSelect(props) {
-    const { datasourcePluginKind, value, project, onChange, ...others } = props;
+    const { datasourcePluginKind, value, project, readOnly, onChange, ...others } = props;
     const { data, isLoading } = useListDatasourceSelectItems(datasourcePluginKind, project);
     const variables = useVariableValues();
     const defaultValue = useMemo(()=>{
@@ -98,6 +98,7 @@ const emptyDatasourceOption = {
     // eslint-disable-next-line @typescript-eslint/no-empty-function
     const fakeActionEvent = ()=>{};
     return /*#__PURE__*/ _jsx(Autocomplete, {
+        readOnly: readOnly,
         options: options,
         renderInput: (params)=>/*#__PURE__*/ _jsx(TextField, {
                 ...params,