@perses-dev/plugin-system 0.0.0-snapshot-ts-panel-actions-76080ec → 0.0.0-snapshot-reverse-proxy-75afbd7

package/dist/cjs/components/DatasourceEditorForm/DatasourceEditorForm.js

@@ -238,6 +238,7 @@ function DatasourceEditorForm(props) {
                                     'Datasource'
                                 ],
                                 pluginKindLabel: "Source",
+                                withRunQueryButton: false,
                                 value: {
                                     selection: {
                                         type: 'Datasource',

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

@@ -24,6 +24,7 @@ const _jsxruntime = require("react/jsx-runtime");
 const _material = require("@mui/material");
 const _core = require("@perses-dev/core");
 const _components = require("@perses-dev/components");
+const _react = require("react");
 const _model = require("../../model");
 const POSITION_OPTIONS = Object.entries(_model.LEGEND_POSITIONS_CONFIG).map(([id, config])=>{
     return {
@@ -31,25 +32,13 @@ 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,
         ...config
     };
 });
-const VALUE_OPTIONS = Object.entries(_model.LEGEND_VALUE_CONFIG).map(([id, config])=>{
-    return {
-        id: id,
-        ...config
-    };
-});
-function LegendOptionsEditor({ value, onChange, showValuesEditor = true }) {
+function LegendOptionsEditor({ value, onChange, showValuesEditor = true, calculation = 'aggregation' }) {
     const handleLegendShowChange = (_, checked)=>{
         // legend is hidden when legend obj is undefined
         const legendValue = checked === true ? {
@@ -63,13 +52,6 @@ function LegendOptionsEditor({ value, onChange, showValuesEditor = true }) {
             position: newValue.id
         });
     };
-    const handleLegendModeChange = (_, newValue)=>{
-        onChange({
-            ...value,
-            position: currentPosition,
-            mode: newValue.id
-        });
-    };
     const handleLegendSizeChange = (_, newValue)=>{
         onChange({
             ...value,
@@ -90,20 +72,51 @@ function LegendOptionsEditor({ value, onChange, showValuesEditor = true }) {
     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 currentValues = value?.values || [];
-    const legendValuesConfig = currentValues.reduce((result, item)=>{
-        const config = _model.LEGEND_VALUE_CONFIG[item];
-        if (config) {
-            result.push({
-                ...config,
-                id: item
+    const legendValuesConfig = (0, _react.useMemo)(()=>{
+        const currentValues = value?.values;
+        if (!currentValues?.length) return [];
+        if (calculation === 'aggregation') {
+            return currentValues.reduce((result, item)=>{
+                const config = _model.LEGEND_VALUE_CONFIG[item];
+                if (config) {
+                    result.push({
+                        ...config,
+                        id: item
+                    });
+                }
+                return result;
+            }, []);
+        }
+        return currentValues.map((id)=>{
+            const { label, description } = _model.comparisonLegends[id];
+            return {
+                id,
+                label,
+                description
+            };
+        });
+    }, [
+        calculation,
+        value?.values
+    ]);
+    const valueOptions = (0, _react.useMemo)(()=>{
+        if (calculation === 'aggregation') {
+            return Object.entries(_model.LEGEND_VALUE_CONFIG || {}).map(([id, config])=>{
+                return {
+                    id: id,
+                    ...config
+                };
             });
         }
-        return result;
-    }, []);
+        return Object.entries(_model.comparisonLegends).map(([id, config])=>({
+                id: id,
+                ...config
+            }));
+    }, [
+        calculation
+    ]);
     return /*#__PURE__*/ (0, _jsxruntime.jsxs)(_components.OptionsEditorGroup, {
         title: "Legend",
         children: [
@@ -116,69 +129,83 @@ function LegendOptionsEditor({ value, onChange, showValuesEditor = true }) {
             /*#__PURE__*/ (0, _jsxruntime.jsx)(_components.OptionsEditorControl, {
                 label: "Show",
                 control: /*#__PURE__*/ (0, _jsxruntime.jsx)(_material.Switch, {
-                    checked: value !== undefined,
+                    checked: !!value,
                     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 === undefined,
-                    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 === undefined || 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: VALUE_OPTIONS,
-                    onChange: handleLegendValueChange,
-                    disabled: value === undefined || 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,9 @@ 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",
             value: {
@@ -105,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

@@ -24,6 +24,7 @@ const _jsxruntime = require("react/jsx-runtime");
 const _material = require("@mui/material");
 const _Reload = /*#__PURE__*/ _interop_require_default(require("mdi-material-ui/Reload"));
 const _components = require("@perses-dev/components");
+const _react = require("react");
 const _PluginKindSelect = require("../PluginKindSelect");
 const _PluginSpecEditor = require("../PluginSpecEditor");
 const _plugineditorapi = require("./plugin-editor-api");
@@ -32,23 +33,63 @@ function _interop_require_default(obj) {
         default: obj
     };
 }
-function PluginEditor(props) {
-    // eslint-disable-next-line @typescript-eslint/no-unused-vars
-    const { value, 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']);
+    const [watchedOtherSpecs, setWatchOtherSpecs] = (0, _react.useState)(value.spec);
+    const runQueryHandler = (0, _react.useCallback)(()=>{
+        onSpecChange({
+            ...value.spec,
+            ...watchedOtherSpecs,
+            query: watchedQuery
+        });
+        refresh?.();
+    }, [
+        value.spec,
+        onSpecChange,
+        watchedQuery,
+        watchedOtherSpecs,
+        refresh
+    ]);
+    const queryHandlerSettings = (0, _react.useMemo)(()=>{
+        return withRunQueryButton ? {
+            runWithOnBlur: false,
+            watchQueryChanges: (query)=>{
+                setWatchQuery(query);
+            },
+            setWatchOtherSpecs: (otherSpecs)=>{
+                setWatchOtherSpecs(otherSpecs);
+            }
+        } : undefined;
+    }, [
+        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",
@@ -56,23 +97,20 @@ function PluginEditor(props) {
                         pluginTypes: pluginTypes,
                         disabled: isLoading,
                         value: pendingSelection ? pendingSelection : value.selection,
-                        InputProps: {
-                            readOnly: isReadonly
+                        slotProps: {
+                            input: {
+                                readOnly: isReadonly
+                            }
                         },
                         error: !!error,
                         helperText: error?.message,
                         onChange: onSelectionChange
                     }),
-                    /*#__PURE__*/ (0, _jsxruntime.jsx)(_material.Button, {
+                    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: ()=>onSpecChange(value.spec),
+                        onClick: runQueryHandler,
                         children: "Run Query"
                     })
                 ]
@@ -83,9 +121,11 @@ function PluginEditor(props) {
                     pluginSelection: value.selection,
                     value: value.spec,
                     onChange: onSpecChange,
-                    isReadonly: isReadonly
+                    isReadonly: isReadonly,
+                    queryHandlerSettings: queryHandlerSettings
                 })
             })
         ]
     });
-}
+});
+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/PluginSpecEditor/PluginSpecEditor.js

@@ -22,6 +22,7 @@ Object.defineProperty(exports, "PluginSpecEditor", {
 });
 const _jsxruntime = require("react/jsx-runtime");
 const _components = require("@perses-dev/components");
+const _material = require("@mui/material");
 const _runtime = require("../../runtime");
 function PluginSpecEditor(props) {
     const { pluginSelection: { type: pluginType, kind: pluginKind }, ...others } = props;
@@ -31,21 +32,24 @@ function PluginSpecEditor(props) {
             error: error
         });
     }
-    // TODO: Proper loading indicator
     if (isLoading) {
-        return null;
+        return /*#__PURE__*/ (0, _jsxruntime.jsx)(_material.Stack, {
+            width: "100%",
+            sx: {
+                alignItems: 'center',
+                justifyContent: 'center'
+            },
+            children: /*#__PURE__*/ (0, _jsxruntime.jsx)(_material.CircularProgress, {})
+        });
     }
-    if (plugin === undefined) {
+    if (!plugin) {
         throw new Error(`Missing implementation for ${pluginType} plugin with kind '${pluginKind}'`);
     }
     if (pluginType === 'Panel') {
         throw new Error('This editor should not be used for panel type. Please use Panel Spec Editor instead.');
     }
     const { OptionsEditorComponent } = plugin;
-    if (OptionsEditorComponent !== undefined) {
-        return /*#__PURE__*/ (0, _jsxruntime.jsx)(OptionsEditorComponent, {
-            ...others
-        });
-    }
-    return null;
+    return OptionsEditorComponent ? /*#__PURE__*/ (0, _jsxruntime.jsx)(OptionsEditorComponent, {
+        ...others
+    }) : null;
 }