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

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

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

@@ -32,7 +32,7 @@ function _interop_require_default(obj) {
         default: obj
     };
 }
-function useDefaultQueryDefinition(queryTypes) {
+function useDefaultQueryDefinition(queryTypes, filteredQueryPlugins) {
     // Build the default query plugin
     // This will be used only if the queries are empty, to open a starting query
     // Firs the default query type
@@ -41,7 +41,12 @@ function useDefaultQueryDefinition(queryTypes) {
     // Use as default the plugin kind explicitly set as default or the first in the list
     const { data: queryPlugins, isLoading } = (0, _runtime.useListPluginMetadata)(queryTypes);
     const { defaultPluginKinds } = (0, _runtime.usePluginRegistry)();
-    const defaultQueryKind = defaultPluginKinds?.[defaultQueryType] ?? queryPlugins?.[0]?.spec.name ?? '';
+    let defaultQueryKind = '';
+    if (filteredQueryPlugins?.length) {
+        defaultQueryKind = queryPlugins?.find((i)=>filteredQueryPlugins.includes(i.spec.name)).spec.name ?? '';
+    } else {
+        defaultQueryKind = defaultPluginKinds?.[defaultQueryType] ?? queryPlugins?.[0]?.spec.name ?? '';
+    }
     const { data: defaultQueryPlugin } = (0, _runtime.usePlugin)(defaultQueryType, defaultQueryKind, {
         useErrorBoundary: true,
         enabled: true
@@ -61,8 +66,8 @@ function useDefaultQueryDefinition(queryTypes) {
     };
 }
 const MultiQueryEditor = /*#__PURE__*/ (0, _react.forwardRef)((props, ref)=>{
-    const { queryTypes, queries = [], onChange } = props;
-    const { defaultInitialQueryDefinition, isLoading } = useDefaultQueryDefinition(queryTypes);
+    const { queryTypes, queries = [], filteredQueryPlugins, onChange } = props;
+    const { defaultInitialQueryDefinition, isLoading } = useDefaultQueryDefinition(queryTypes, filteredQueryPlugins);
     // State for which queries are collapsed
     const [queriesCollapsed, setQueriesCollapsed] = (0, _react.useState)(queries.map(()=>false));
     // Query handlers
@@ -130,7 +135,8 @@ const MultiQueryEditor = /*#__PURE__*/ (0, _react.forwardRef)((props, ref)=>{
                         isCollapsed: !!queriesCollapsed[i],
                         onChange: handleQueryChange,
                         onDelete: queries.length > 1 ? handleQueryDelete : undefined,
-                        onCollapseExpand: handleQueryCollapseExpand
+                        onCollapseExpand: handleQueryCollapseExpand,
+                        filteredQueryPlugins: filteredQueryPlugins
                     }, i))
             }),
             /*#__PURE__*/ (0, _jsxruntime.jsx)(_material.Button, {

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

@@ -35,7 +35,7 @@ function _interop_require_default(obj) {
     };
 }
 const QueryEditorContainer = /*#__PURE__*/ (0, _react.forwardRef)((props, ref)=>{
-    const { queryTypes, index, query, isCollapsed, onDelete, onChange, onCollapseExpand } = props;
+    const { queryTypes, filteredQueryPlugins, index, query, isCollapsed, onDelete, onChange, onCollapseExpand } = props;
     return /*#__PURE__*/ (0, _jsxruntime.jsxs)(_material.Stack, {
         spacing: 1,
         children: [
@@ -71,6 +71,7 @@ const QueryEditorContainer = /*#__PURE__*/ (0, _react.forwardRef)((props, ref)=>
                 ]
             }),
             !isCollapsed && /*#__PURE__*/ (0, _jsxruntime.jsx)(QueryEditor, {
+                filteredQueryPlugins: filteredQueryPlugins,
                 ref: ref,
                 queryTypes: queryTypes,
                 value: query,
@@ -87,7 +88,7 @@ QueryEditorContainer.displayName = 'QueryEditorContainer';
  * @param props
  * @constructor
  */ const QueryEditor = /*#__PURE__*/ (0, _react.forwardRef)((props, ref)=>{
-    const { value, onChange, queryTypes, ...others } = props;
+    const { value, onChange, queryTypes, filteredQueryPlugins, ...others } = props;
     const { refresh } = (0, _runtime.useTimeRange)();
     const handlePluginChange = (next)=>{
         onChange((0, _immer.produce)(value, (draft)=>{
@@ -111,7 +112,8 @@ QueryEditorContainer.displayName = 'QueryEditorContainer';
                 },
                 spec: value.spec.plugin.spec
             },
-            onChange: handlePluginChange
+            onChange: handlePluginChange,
+            filteredQueryPlugins: filteredQueryPlugins
         })
     });
 });

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

@@ -34,7 +34,7 @@ function _interop_require_default(obj) {
     };
 }
 const PluginEditor = /*#__PURE__*/ (0, _react.forwardRef)((props, ref)=>{
-    const { value, withRunQueryButton = true, pluginTypes, pluginKindLabel, onChange: _, isReadonly, postExecuteRunQuery: refresh, ...others } = props;
+    const { value, withRunQueryButton = true, pluginTypes, pluginKindLabel, onChange: _, isReadonly, postExecuteRunQuery: refresh, filteredQueryPlugins, ...others } = props;
     const { pendingSelection, isLoading, error, onSelectionChange, onSpecChange } = (0, _plugineditorapi.usePluginEditor)(props);
     /* 
      We could technically merge the watchedQuery, watchedOtherSpecs into a single watched-object,
@@ -104,7 +104,8 @@ const PluginEditor = /*#__PURE__*/ (0, _react.forwardRef)((props, ref)=>{
                         },
                         error: !!error,
                         helperText: error?.message,
-                        onChange: onSelectionChange
+                        onChange: onSelectionChange,
+                        filteredQueryPlugins: filteredQueryPlugins
                     }),
                     withRunQueryButton && !isLoading && /*#__PURE__*/ (0, _jsxruntime.jsx)(_material.Button, {
                         "data-testid": "run_query_button",

package/dist/cjs/components/PluginEditor/plugin-editor-api.js

@@ -20,23 +20,23 @@ Object.defineProperty(exports, "usePluginEditor", {
         return usePluginEditor;
     }
 });
-const _core = require("@perses-dev/core");
 const _react = require("react");
 const _immer = require("immer");
 const _runtime = require("../../runtime");
+const _utils = require("../../utils");
 function usePluginEditor(props) {
     // eslint-disable-next-line @typescript-eslint/no-empty-function
     const { pluginTypes, value, onHideQueryEditorChange = ()=>{} } = props; // setting onHideQueryEditorChange to empty function here because useEvent requires a function
     // Keep a stable reference, so we don't run the effect below when we don't need to
-    const onChange = (0, _core.useEvent)(props.onChange);
-    const onHideQuery = (0, _core.useEvent)(onHideQueryEditorChange);
+    const onChange = (0, _utils.useEvent)(props.onChange);
+    const onHideQuery = (0, _utils.useEvent)(onHideQueryEditorChange);
     // The previous spec state for PluginType and kind and a helper function for remembering current values
     const prevSpecState = (0, _react.useRef)({
         [value.selection.type]: {
             [value.selection.kind]: value.spec
         }
     });
-    const rememberCurrentSpecState = (0, _core.useEvent)(()=>{
+    const rememberCurrentSpecState = (0, _utils.useEvent)(()=>{
         let byPluginType = prevSpecState.current[value.selection.type];
         if (byPluginType === undefined) {
             byPluginType = {};

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

@@ -25,10 +25,16 @@ const _material = require("@mui/material");
 const _react = require("react");
 const _runtime = require("../../runtime");
 const PluginKindSelect = /*#__PURE__*/ (0, _react.forwardRef)((props, ref)=>{
-    const { pluginTypes, value: propValue, onChange, ...others } = props;
+    const { pluginTypes, value: propValue, onChange, filteredQueryPlugins, ...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
+    const sortedData = (0, _react.useMemo)(()=>{
+        if (filteredQueryPlugins?.length) {
+            return data?.filter((i)=>filteredQueryPlugins.includes(i.spec.name))?.sort((a, b)=>a.spec.display.name.localeCompare(b.spec.display.name));
+        }
+        return data?.sort((a, b)=>a.spec.display.name.localeCompare(b.spec.display.name));
+    }, [
+        data,
+        filteredQueryPlugins
     ]);
     // 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);

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

@@ -21,9 +21,9 @@ Object.defineProperty(exports, "PluginRegistry", {
     }
 });
 const _jsxruntime = require("react/jsx-runtime");
-const _core = require("@perses-dev/core");
 const _react = require("react");
 const _runtime = require("../../runtime");
+const _utils = require("../../utils");
 const _pluginindexes = require("./plugin-indexes");
 function PluginRegistry(props) {
     const { pluginLoader: { getInstalledPlugins, importPluginModule }, children, defaultPluginKinds } = props;
@@ -32,7 +32,7 @@ function PluginRegistry(props) {
     const importCache = (0, _react.useRef)(new Map());
     // Do useEvent here since this accesses the importPluginModule prop and we want a stable reference to it for the
     // callback below
-    const loadPluginModule = (0, _core.useEvent)((resource)=>{
+    const loadPluginModule = (0, _utils.useEvent)((resource)=>{
         let request = importCache.current.get(resource);
         if (request === undefined) {
             request = importPluginModule(resource);

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

@@ -28,12 +28,12 @@ _export(exports, {
         return usePluginIndexes;
     }
 });
-const _core = require("@perses-dev/core");
 const _react = require("react");
+const _utils = require("../../utils");
 function usePluginIndexes(getInstalledPlugins) {
     // Creates indexes from the installed plugins data (does useEvent because this accesses the getInstalledPlugins prop
     // and we want a stable reference for the callback below)
-    const createPluginIndexes = (0, _core.useEvent)(async ()=>{
+    const createPluginIndexes = (0, _utils.useEvent)(async ()=>{
         const installedPlugins = await getInstalledPlugins();
         // Create the two indexes from the installed plugins
         const pluginResourcesByNameAndKind = new Map();

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

@@ -211,7 +211,11 @@ function TimeRangeControls({ heightPx, showTimeRangeSelector = true, showRefresh
                 description: _constants.TOOLTIP_TEXT.refreshInterval,
                 children: /*#__PURE__*/ (0, _jsxruntime.jsx)(_components.RefreshIntervalPicker, {
                     timeOptions: DEFAULT_REFRESH_INTERVAL_OPTIONS,
-                    value: refreshInterval,
+                    value: /* TODO: There is a bug here which should be fixed in a proper way. (This is only a quick remedy)
+                 display: 1m has the pastDuration of 60s. Initially (if the persisted value is 1m) when the page is loaded, instead of 60s, 1m is passed down.              
+                 This only happens for 1m, because for other items the display and the pastDuration are the same.  Example 30s-30s
+                 HERE The value MUST always be pastDuration, otherwise the component would not work as expected. 
+              */ DEFAULT_REFRESH_INTERVAL_OPTIONS.some((i)=>i.value.pastDuration === refreshInterval) ? refreshInterval : DEFAULT_REFRESH_INTERVAL_OPTIONS.find((i)=>i.display === refreshInterval)?.value.pastDuration,
                     onChange: handleRefreshIntervalChange,
                     height: height
                 })

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) {

package/dist/cjs/remote/remotePluginLoader.js

@@ -27,10 +27,25 @@ const isPluginMetadata = (plugin)=>{
 const isPluginModuleResource = (pluginModule)=>{
     return typeof pluginModule === 'object' && pluginModule !== null && 'metadata' in pluginModule && 'spec' in pluginModule && typeof pluginModule.spec === 'object' && pluginModule.spec !== null && 'plugins' in pluginModule.spec && Array.isArray(pluginModule.spec.plugins) && pluginModule.spec.plugins.every(isPluginMetadata);
 };
-const remotePluginLoader = (baseURL)=>{
+const DEFAULT_PLUGINS_API_PATH = '/api/v1/plugins';
+const DEFAULT_PLUGINS_ASSETS_PATH = '/plugins';
+const paramToOptions = (options)=>{
+    if (options === undefined) {
+        return {
+            pluginsApiPath: DEFAULT_PLUGINS_API_PATH,
+            pluginsAssetsPath: DEFAULT_PLUGINS_ASSETS_PATH
+        };
+    }
+    return {
+        pluginsApiPath: `${options?.apiPrefix ?? ''}${DEFAULT_PLUGINS_API_PATH}`,
+        pluginsAssetsPath: `${options?.baseURL ?? ''}${DEFAULT_PLUGINS_ASSETS_PATH}`
+    };
+};
+function remotePluginLoader(options) {
+    const { pluginsApiPath, pluginsAssetsPath } = paramToOptions(options);
     return {
         getInstalledPlugins: async ()=>{
-            const pluginsResponse = await fetch(`${baseURL ? baseURL : ''}/api/v1/plugins`);
+            const pluginsResponse = await fetch(pluginsApiPath);
             const plugins = await pluginsResponse.json();
             let pluginModules = [];
             if (Array.isArray(plugins)) {
@@ -47,7 +62,7 @@ const remotePluginLoader = (baseURL)=>{
             const pluginModuleName = resource.metadata.name;
             const pluginModule = {};
             for (const plugin of resource.spec.plugins){
-                const remotePluginModule = await (0, _PluginRuntime.loadPlugin)(pluginModuleName, plugin.spec.name);
+                const remotePluginModule = await (0, _PluginRuntime.loadPlugin)(pluginModuleName, plugin.spec.name, pluginsAssetsPath);
                 const remotePlugin = remotePluginModule?.[plugin.spec.name];
                 if (remotePlugin) {
                     pluginModule[plugin.spec.name] = remotePlugin;
@@ -58,4 +73,4 @@ const remotePluginLoader = (baseURL)=>{
             return pluginModule;
         }
     };
-};
+}

package/dist/cjs/runtime/UsageMetricsProvider.js

@@ -70,7 +70,7 @@ const useUsageMetrics = ()=>{
     };
 };
 const submitMetrics = async (stats)=>{
-    await (0, _core.fetch)('/api/v1/view', {
+    await (0, _core.fetch)(`${stats.apiPrefix ?? ''}/api/v1/view`, {
         method: 'POST',
         headers: {
             'Content-Type': 'application/json'
@@ -83,14 +83,15 @@ const submitMetrics = async (stats)=>{
         })
     });
 };
-const UsageMetricsProvider = ({ project, dashboard, children })=>{
+const UsageMetricsProvider = ({ apiPrefix, project, dashboard, children })=>{
     const ctx = {
         project: project,
         dashboard: dashboard,
         renderErrorCount: 0,
         startRenderTime: Date.now(),
         renderDurationMs: 0,
-        pendingQueries: new Map()
+        pendingQueries: new Map(),
+        apiPrefix
     };
     return /*#__PURE__*/ (0, _jsxruntime.jsx)(UsageMetricsContext.Provider, {
         value: ctx,