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

package/dist/cjs/components/{DatasourceSelect.js → DatasourceSelect/DatasourceSelect.js}

@@ -47,8 +47,8 @@ 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 _runtime = require("../runtime");
-const _utils = require("../utils");
+const _runtime = require("../../runtime");
+const _utils = require("../../utils");
 function _interop_require_default(obj) {
     return obj && obj.__esModule ? obj : {
         default: obj
@@ -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/DatasourceSelect/index.js

@@ -0,0 +1,30 @@
+// Copyright 2023 The Perses Authors
+// Licensed under the Apache License, Version 2.0 (the "License");
+// you may not use this file except in compliance with the License.
+// You may obtain a copy of the License at
+//
+// http://www.apache.org/licenses/LICENSE-2.0
+//
+// Unless required by applicable law or agreed to in writing, software
+// distributed under the License is distributed on an "AS IS" BASIS,
+// WITHOUT WARRANTIES OR CONDITIONS OF ANY KIND, either express or implied.
+// See the License for the specific language governing permissions and
+// limitations under the License.
+"use strict";
+Object.defineProperty(exports, "__esModule", {
+    value: true
+});
+_export_star(require("./DatasourceSelect"), exports);
+function _export_star(from, to) {
+    Object.keys(from).forEach(function(k) {
+        if (k !== "default" && !Object.prototype.hasOwnProperty.call(to, k)) {
+            Object.defineProperty(to, k, {
+                enumerable: true,
+                get: function() {
+                    return from[k];
+                }
+            });
+        }
+    });
+    return from;
+}

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/PluginEditor/PluginEditor.js

@@ -80,13 +80,16 @@ const PluginEditor = /*#__PURE__*/ (0, _react.forwardRef)((props, ref)=>{
             /*#__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",
@@ -94,8 +97,10 @@ const PluginEditor = /*#__PURE__*/ (0, _react.forwardRef)((props, ref)=>{
                         pluginTypes: pluginTypes,
                         disabled: isLoading,
                         value: pendingSelection ? pendingSelection : value.selection,
-                        InputProps: {
-                            readOnly: isReadonly
+                        slotProps: {
+                            input: {
+                                readOnly: isReadonly
+                            }
                         },
                         error: !!error,
                         helperText: error?.message,
@@ -104,12 +109,6 @@ const PluginEditor = /*#__PURE__*/ (0, _react.forwardRef)((props, ref)=>{
                     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"

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

@@ -32,6 +32,7 @@ const _context = require("../../../context");
 const _variablemodel = require("../variable-model");
 const _runtime = require("../../../runtime");
 const _VariablePreview = require("./VariablePreview");
+const _variableeditorformmodel = require("./variable-editor-form-model");
 function FallbackPreview() {
     return /*#__PURE__*/ (0, _jsxruntime.jsx)("div", {
         children: "Error previewing values"
@@ -117,6 +118,10 @@ function ListVariableEditorForm({ action, control }) {
         control: control,
         name: 'spec.allowAllValue'
     });
+    const sortMethod = (0, _reacthookform.useWatch)({
+        control: control,
+        name: 'spec.sort'
+    });
     // When variable kind is selected we need to provide default values
     // TODO: check if react-hook-form has a better way to do this
     const values = form.getValues();
@@ -126,6 +131,15 @@ function ListVariableEditorForm({ action, control }) {
     if (values.spec.allowMultiple === undefined) {
         form.setValue('spec.allowMultiple', false);
     }
+    if (!values.spec.plugin) {
+        form.setValue('spec.plugin', {
+            kind: 'StaticListVariable',
+            spec: {}
+        });
+    }
+    if (!values.spec.sort) {
+        form.setValue('spec.sort', 'none');
+    }
     const { refresh } = (0, _runtime.useTimeRange)();
     return /*#__PURE__*/ (0, _jsxruntime.jsxs)(_jsxruntime.Fragment, {
         children: [
@@ -138,18 +152,17 @@ function ListVariableEditorForm({ action, control }) {
                 spacing: 2,
                 mb: 2,
                 children: [
-                    kind ? /*#__PURE__*/ (0, _jsxruntime.jsx)(_material.Box, {
+                    /*#__PURE__*/ (0, _jsxruntime.jsx)(_material.Box, {
                         children: /*#__PURE__*/ (0, _jsxruntime.jsx)(_components.ErrorBoundary, {
                             FallbackComponent: FallbackPreview,
                             resetKeys: [
                                 previewSpec
                             ],
                             children: /*#__PURE__*/ (0, _jsxruntime.jsx)(_VariablePreview.VariableListPreview, {
+                                sortMethod: sortMethod,
                                 definition: previewSpec
                             })
                         })
-                    }) : /*#__PURE__*/ (0, _jsxruntime.jsx)(_VariablePreview.VariablePreview, {
-                        isLoading: true
                     }),
                     /*#__PURE__*/ (0, _jsxruntime.jsx)(_material.Stack, {
                         children: /*#__PURE__*/ (0, _jsxruntime.jsx)(_components.ErrorBoundary, {
@@ -215,7 +228,7 @@ function ListVariableEditorForm({ action, control }) {
                         children: /*#__PURE__*/ (0, _jsxruntime.jsx)(_reacthookform.Controller, {
                             control: control,
                             name: "spec.sort",
-                            render: ({ field, fieldState })=>/*#__PURE__*/ (0, _jsxruntime.jsxs)(_material.TextField, {
+                            render: ({ field, fieldState })=>/*#__PURE__*/ (0, _jsxruntime.jsx)(_material.TextField, {
                                     select: true,
                                     ...field,
                                     fullWidth: true,
@@ -232,36 +245,14 @@ function ListVariableEditorForm({ action, control }) {
                                     onChange: (event)=>{
                                         field.onChange(event);
                                     },
-                                    children: [
-                                        /*#__PURE__*/ (0, _jsxruntime.jsx)(_material.MenuItem, {
-                                            value: "none",
-                                            children: "None"
-                                        }),
-                                        /*#__PURE__*/ (0, _jsxruntime.jsx)(_material.MenuItem, {
-                                            value: "alphabetical-asc",
-                                            children: "Alphabetical, asc"
-                                        }),
-                                        /*#__PURE__*/ (0, _jsxruntime.jsx)(_material.MenuItem, {
-                                            value: "alphabetical-desc",
-                                            children: "Alphabetical, desc"
-                                        }),
-                                        /*#__PURE__*/ (0, _jsxruntime.jsx)(_material.MenuItem, {
-                                            value: "numerical-asc",
-                                            children: "Numerical, asc"
-                                        }),
-                                        /*#__PURE__*/ (0, _jsxruntime.jsx)(_material.MenuItem, {
-                                            value: "numerical-desc",
-                                            children: "Numerical, desc"
-                                        }),
-                                        /*#__PURE__*/ (0, _jsxruntime.jsx)(_material.MenuItem, {
-                                            value: "alphabetical-ci-asc",
-                                            children: "Alphabetical, case-insensitive, asc"
-                                        }),
-                                        /*#__PURE__*/ (0, _jsxruntime.jsx)(_material.MenuItem, {
-                                            value: "alphabetical-ci-desc",
-                                            children: "Alphabetical, case-insensitive, desc"
-                                        })
-                                    ]
+                                    children: Object.keys(_variableeditorformmodel.SORT_METHODS).map((key)=>{
+                                        if (!_variableeditorformmodel.SORT_METHODS[key]) return null;
+                                        const { label } = _variableeditorformmodel.SORT_METHODS[key];
+                                        return /*#__PURE__*/ (0, _jsxruntime.jsx)(_material.MenuItem, {
+                                            value: key,
+                                            children: label
+                                        }, key);
+                                    })
                                 })
                         })
                     })

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

@@ -35,6 +35,7 @@ const _components = require("@perses-dev/components");
 const _ClipboardOutline = /*#__PURE__*/ _interop_require_default(require("mdi-material-ui/ClipboardOutline"));
 const _constants = require("../../../constants");
 const _variablemodel = require("../variable-model");
+const _variableeditorformmodel = require("./variable-editor-form-model");
 function _interop_require_default(obj) {
     return obj && obj.__esModule ? obj : {
         default: obj
@@ -93,6 +94,33 @@ function VariablePreview(props) {
     if (values && values?.length > 0 && maxValues) {
         notShown = values.length - maxValues;
     }
+    const variablePreviewState = (0, _react.useMemo)(()=>{
+        if (isLoading) {
+            return /*#__PURE__*/ (0, _jsxruntime.jsx)(_material.Stack, {
+                width: "100%",
+                sx: {
+                    alignItems: 'center',
+                    justifyContent: 'center'
+                },
+                children: /*#__PURE__*/ (0, _jsxruntime.jsx)(_material.CircularProgress, {})
+            });
+        } else if (error) {
+            return /*#__PURE__*/ (0, _jsxruntime.jsx)(_material.Alert, {
+                severity: "error",
+                children: error
+            });
+        } else if (!values?.length) {
+            return /*#__PURE__*/ (0, _jsxruntime.jsx)(_material.Alert, {
+                severity: "info",
+                children: "No results"
+            });
+        }
+        return null;
+    }, [
+        error,
+        isLoading,
+        values
+    ]);
     return /*#__PURE__*/ (0, _jsxruntime.jsxs)(_material.Box, {
         children: [
             /*#__PURE__*/ (0, _jsxruntime.jsxs)(_material.Stack, {
@@ -130,22 +158,7 @@ function VariablePreview(props) {
                         m: 2
                     },
                     children: [
-                        error && /*#__PURE__*/ (0, _jsxruntime.jsx)(_material.Alert, {
-                            severity: "error",
-                            children: error
-                        }),
-                        values?.length === 0 && /*#__PURE__*/ (0, _jsxruntime.jsx)(_material.Alert, {
-                            severity: "info",
-                            children: "No results"
-                        }),
-                        isLoading && /*#__PURE__*/ (0, _jsxruntime.jsx)(_material.Stack, {
-                            width: "100%",
-                            sx: {
-                                alignItems: 'center',
-                                justifyContent: 'center'
-                            },
-                            children: /*#__PURE__*/ (0, _jsxruntime.jsx)(_material.CircularProgress, {})
-                        }),
+                        variablePreviewState,
                         values?.slice(0, maxValues).map((val, index)=>/*#__PURE__*/ (0, _jsxruntime.jsx)(_material.Chip, {
                                 size: "small",
                                 label: val
@@ -163,17 +176,18 @@ function VariablePreview(props) {
     });
 }
 function VariableListPreview(props) {
-    const { definition } = props;
+    const { definition, sortMethod } = props;
     const { data, isFetching, error } = (0, _variablemodel.useListVariablePluginValues)(definition);
     const errorMessage = error?.message;
+    const result = !sortMethod || sortMethod === 'none' || !data ? data : _variableeditorformmodel.SORT_METHODS[sortMethod].sort(data);
     const variablePreview = (0, _react.useMemo)(()=>/*#__PURE__*/ (0, _jsxruntime.jsx)(VariablePreview, {
-            values: data?.map((val)=>val.value) || [],
+            values: result?.map((val)=>val.label || val.value),
             isLoading: isFetching,
             error: errorMessage
         }), [
         errorMessage,
         isFetching,
-        data
+        result
     ]);
     return variablePreview;
 }

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

@@ -16,6 +16,7 @@ Object.defineProperty(exports, "__esModule", {
 });
 _export_star(require("./VariableEditorForm"), exports);
 _export_star(require("./VariablePreview"), exports);
+_export_star(require("./variable-editor-form-model"), 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/Variables/VariableEditorForm/variable-editor-form-model.js

@@ -21,6 +21,9 @@ function _export(target, all) {
     });
 }
 _export(exports, {
+    SORT_METHODS: function() {
+        return SORT_METHODS;
+    },
     getInitialState: function() {
         return getInitialState;
     },
@@ -28,6 +31,50 @@ _export(exports, {
         return getVariableDefinitionFromState;
     }
 });
+const SORT_METHODS = {
+    none: {
+        label: 'None',
+        sort: (input)=>{
+            return input.slice();
+        }
+    },
+    'alphabetical-asc': {
+        label: 'Alphabetical, asc',
+        sort: (input)=>{
+            return input.slice().sort((a, b)=>a.label > b.label ? 1 : -1);
+        }
+    },
+    'alphabetical-desc': {
+        label: 'Alphabetical, desc',
+        sort: (input)=>{
+            return input.slice().sort((a, b)=>a.label > b.label ? -1 : 1);
+        }
+    },
+    'numerical-asc': {
+        label: 'Numerical, asc',
+        sort: (input)=>{
+            return input.slice().sort((a, b)=>parseInt(a.label) > parseInt(b.label) ? 1 : -1);
+        }
+    },
+    'numerical-desc': {
+        label: 'Numerical, desc',
+        sort: (input)=>{
+            return input.slice().sort((a, b)=>parseInt(a.label) < parseInt(b.label) ? 1 : -1);
+        }
+    },
+    'alphabetical-ci-asc': {
+        label: 'Alphabetical, case-insensitive, asc',
+        sort: (input)=>{
+            return input.slice().sort((a, b)=>a.label.toLowerCase() > b.label.toLowerCase() ? 1 : -1);
+        }
+    },
+    'alphabetical-ci-desc': {
+        label: 'Alphabetical, case-insensitive, desc',
+        sort: (input)=>{
+            return input.slice().sort((a, b)=>a.label.toLowerCase() > b.label.toLowerCase() ? -1 : 1);
+        }
+    }
+};
 function getInitialState(initialVariableDefinition) {
     const textVariableFields = {
         value: initialVariableDefinition.spec.value ?? '',

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

@@ -93,13 +93,13 @@ function useListVariablePluginValues(definition) {
             timeRange,
             refreshKey
         ],
-        queryFn: async ()=>{
+        queryFn: async ({ signal })=>{
             const resp = await variablePlugin?.getVariableOptions(spec, {
                 datasourceStore,
                 variables,
                 timeRange
-            });
-            if (resp === undefined) {
+            }, signal);
+            if (!resp?.data?.length) {
                 return [];
             }
             if (!capturingRegexp) {

package/dist/cjs/components/index.js

@@ -29,7 +29,6 @@ _export_star(require("./PluginRegistry"), exports);
 _export_star(require("./PluginSpecEditor"), exports);
 _export_star(require("./TimeRangeControls"), exports);
 _export_star(require("./Variables"), exports);
-_export_star(require("./ProjectSelect"), exports);
 _export_star(require("./MetricLabelInput"), exports);
 function _export_star(from, to) {
     Object.keys(from).forEach(function(k) {

package/dist/cjs/context/index.js

@@ -14,7 +14,6 @@
 Object.defineProperty(exports, "__esModule", {
     value: true
 });
-_export_star(require("./ProjectStoreProvider"), exports);
 _export_star(require("./ValidationProvider"), exports);
 function _export_star(from, to) {
     Object.keys(from).forEach(function(k) {