@perses-dev/plugin-system 0.0.0-snapshot-panel-extra-content-2-2767e21 → 0.0.0-snapshot-scatter-chart-embed-8efdfab

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

@@ -16,9 +16,11 @@ Object.defineProperty(exports, "__esModule", {
 });
 Object.defineProperty(exports, "LegendOptionsEditor", {
     enumerable: true,
-    get: ()=>LegendOptionsEditor
+    get: function() {
+        return LegendOptionsEditor;
+    }
 });
-const _jsxRuntime = require("react/jsx-runtime");
+const _jsxruntime = require("react/jsx-runtime");
 const _material = require("@mui/material");
 const _core = require("@perses-dev/core");
 const _components = require("@perses-dev/components");
@@ -102,24 +104,24 @@ function LegendOptionsEditor({ value , onChange  }) {
         }
         return result;
     }, []);
-    return /*#__PURE__*/ (0, _jsxRuntime.jsxs)(_jsxRuntime.Fragment, {
+    return /*#__PURE__*/ (0, _jsxruntime.jsxs)(_jsxruntime.Fragment, {
         children: [
-            !isValidLegend && /*#__PURE__*/ (0, _jsxRuntime.jsx)(_components.ErrorAlert, {
+            !isValidLegend && /*#__PURE__*/ (0, _jsxruntime.jsx)(_components.ErrorAlert, {
                 error: {
                     name: 'invalid-legend',
                     message: 'Invalid legend spec'
                 }
             }),
-            /*#__PURE__*/ (0, _jsxRuntime.jsx)(_components.OptionsEditorControl, {
+            /*#__PURE__*/ (0, _jsxruntime.jsx)(_components.OptionsEditorControl, {
                 label: "Show",
-                control: /*#__PURE__*/ (0, _jsxRuntime.jsx)(_material.Switch, {
+                control: /*#__PURE__*/ (0, _jsxruntime.jsx)(_material.Switch, {
                     checked: value !== undefined,
                     onChange: handleLegendShowChange
                 })
             }),
-            /*#__PURE__*/ (0, _jsxRuntime.jsx)(_components.OptionsEditorControl, {
+            /*#__PURE__*/ (0, _jsxruntime.jsx)(_components.OptionsEditorControl, {
                 label: "Position",
-                control: /*#__PURE__*/ (0, _jsxRuntime.jsx)(_components.SettingsAutocomplete, {
+                control: /*#__PURE__*/ (0, _jsxruntime.jsx)(_components.SettingsAutocomplete, {
                     value: {
                         ...legendPositionConfig,
                         id: currentPosition
@@ -130,9 +132,9 @@ function LegendOptionsEditor({ value , onChange  }) {
                     disableClearable: true
                 })
             }),
-            /*#__PURE__*/ (0, _jsxRuntime.jsx)(_components.OptionsEditorControl, {
+            /*#__PURE__*/ (0, _jsxruntime.jsx)(_components.OptionsEditorControl, {
                 label: "Mode",
-                control: /*#__PURE__*/ (0, _jsxRuntime.jsx)(_components.SettingsAutocomplete, {
+                control: /*#__PURE__*/ (0, _jsxruntime.jsx)(_components.SettingsAutocomplete, {
                     value: {
                         ...legendModeConfig,
                         id: currentMode
@@ -143,9 +145,9 @@ function LegendOptionsEditor({ value , onChange  }) {
                     disableClearable: true
                 })
             }),
-            /*#__PURE__*/ (0, _jsxRuntime.jsx)(_components.OptionsEditorControl, {
+            /*#__PURE__*/ (0, _jsxruntime.jsx)(_components.OptionsEditorControl, {
                 label: "Size",
-                control: /*#__PURE__*/ (0, _jsxRuntime.jsx)(_components.SettingsAutocomplete, {
+                control: /*#__PURE__*/ (0, _jsxruntime.jsx)(_components.SettingsAutocomplete, {
                     value: {
                         ...legendSizeConfig,
                         id: currentSize
@@ -154,23 +156,23 @@ function LegendOptionsEditor({ value , onChange  }) {
                     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',
+                    disabled: value === undefined || currentMode !== 'table',
                     disableClearable: true
                 })
             }),
-            /*#__PURE__*/ (0, _jsxRuntime.jsx)(_components.OptionsEditorControl, {
+            /*#__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, {
+                /*#__PURE__*/ (0, _jsxruntime.jsx)(_components.SettingsAutocomplete, {
                     multiple: true,
                     disableCloseOnSelect: true,
                     disableClearable: true,
                     value: legendValuesConfig,
                     options: VALUE_OPTIONS,
                     onChange: handleLegendValueChange,
-                    disabled: value === undefined || currentMode !== 'Table',
+                    disabled: value === undefined || currentMode !== 'table',
                     limitTags: 1,
                     ChipProps: {
                         size: 'small'

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

@@ -14,15 +14,17 @@
 Object.defineProperty(exports, "__esModule", {
     value: true
 });
-_exportStar(require("./LegendOptionsEditor"), exports);
-function _exportStar(from, to) {
+_export_star(require("./LegendOptionsEditor"), 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];
-            }
-        });
+        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/OptionsEditorRadios/OptionsEditorRadios.js

@@ -0,0 +1,69 @@
+// 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
+});
+Object.defineProperty(exports, "OptionsEditorRadios", {
+    enumerable: true,
+    get: function() {
+        return OptionsEditorRadios;
+    }
+});
+const _jsxruntime = require("react/jsx-runtime");
+const _material = require("@mui/material");
+const _react = require("react");
+const _OptionsEditorTabPanel = require("../OptionsEditorTabPanel");
+const OptionsEditorRadios = (props)=>{
+    const { tabs , defaultTab , onModeChange , isReadonly  } = props;
+    const [activeTab, setActiveTab] = (0, _react.useState)(defaultTab);
+    const handleChange = (_, value)=>{
+        const v = parseInt(value);
+        setActiveTab(v);
+        onModeChange(v);
+    };
+    return /*#__PURE__*/ (0, _jsxruntime.jsxs)(_jsxruntime.Fragment, {
+        children: [
+            /*#__PURE__*/ (0, _jsxruntime.jsx)(_material.Box, {
+                sx: {
+                    borderBottom: 1,
+                    borderColor: (theme)=>theme.palette.divider
+                },
+                children: /*#__PURE__*/ (0, _jsxruntime.jsx)(_material.FormControl, {
+                    children: /*#__PURE__*/ (0, _jsxruntime.jsx)(_material.RadioGroup, {
+                        row: true,
+                        defaultValue: defaultTab,
+                        value: activeTab,
+                        onChange: handleChange,
+                        "aria-labelledby": "Configuration radio",
+                        children: tabs.map(({ label  }, i)=>{
+                            return /*#__PURE__*/ (0, _jsxruntime.jsx)(_material.FormControlLabel, {
+                                disabled: isReadonly,
+                                value: i,
+                                control: /*#__PURE__*/ (0, _jsxruntime.jsx)(_material.Radio, {}),
+                                label: label
+                            }, label);
+                        })
+                    })
+                })
+            }),
+            tabs.map(({ label , content  }, i)=>{
+                return /*#__PURE__*/ (0, _jsxruntime.jsx)(_OptionsEditorTabPanel.OptionsEditorTabPanel, {
+                    value: activeTab,
+                    index: i,
+                    children: content
+                }, label);
+            })
+        ]
+    });
+};

package/dist/cjs/components/OptionsEditorRadios/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("./OptionsEditorRadios"), 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/{OptionsEditorTabs/TabPanel.js → OptionsEditorTabPanel/OptionsEditorTabPanel.js}

@@ -14,22 +14,24 @@
 Object.defineProperty(exports, "__esModule", {
     value: true
 });
-Object.defineProperty(exports, "TabPanel", {
+Object.defineProperty(exports, "OptionsEditorTabPanel", {
     enumerable: true,
-    get: ()=>TabPanel
+    get: function() {
+        return OptionsEditorTabPanel;
+    }
 });
-const _jsxRuntime = require("react/jsx-runtime");
+const _jsxruntime = require("react/jsx-runtime");
 const _material = require("@mui/material");
-function TabPanel(props) {
+function OptionsEditorTabPanel(props) {
     const { children , value , index , ...other } = props;
     const isActive = value === index;
-    return /*#__PURE__*/ (0, _jsxRuntime.jsx)("div", {
+    return /*#__PURE__*/ (0, _jsxruntime.jsx)("div", {
         role: "tabpanel",
         hidden: !isActive,
         id: `options-editor-tabpanel-${index}`,
         "aria-labelledby": `options-editor-tab-${index}`,
         ...other,
-        children: isActive && /*#__PURE__*/ (0, _jsxRuntime.jsx)(_material.Box, {
+        children: isActive && /*#__PURE__*/ (0, _jsxruntime.jsx)(_material.Box, {
             mt: 2,
             children: children
         })

package/dist/cjs/components/OptionsEditorTabPanel/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("./OptionsEditorTabPanel"), 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/OptionsEditorTabs/OptionsEditorTabs.js

@@ -16,30 +16,32 @@ Object.defineProperty(exports, "__esModule", {
 });
 Object.defineProperty(exports, "OptionsEditorTabs", {
     enumerable: true,
-    get: ()=>OptionsEditorTabs
+    get: function() {
+        return OptionsEditorTabs;
+    }
 });
-const _jsxRuntime = require("react/jsx-runtime");
+const _jsxruntime = require("react/jsx-runtime");
 const _material = require("@mui/material");
 const _react = require("react");
-const _tabPanel = require("./TabPanel");
+const _OptionsEditorTabPanel = require("../OptionsEditorTabPanel");
 const OptionsEditorTabs = ({ tabs  })=>{
     const [activeTab, setActiveTab] = (0, _react.useState)(0);
     const handleChange = (_, newValue)=>{
         setActiveTab(newValue);
     };
-    return /*#__PURE__*/ (0, _jsxRuntime.jsxs)(_jsxRuntime.Fragment, {
+    return /*#__PURE__*/ (0, _jsxruntime.jsxs)(_jsxruntime.Fragment, {
         children: [
-            /*#__PURE__*/ (0, _jsxRuntime.jsx)(_material.Box, {
+            /*#__PURE__*/ (0, _jsxruntime.jsx)(_material.Box, {
                 sx: {
                     borderBottom: 1,
                     borderColor: (theme)=>theme.palette.divider
                 },
-                children: /*#__PURE__*/ (0, _jsxRuntime.jsx)(_material.Tabs, {
+                children: /*#__PURE__*/ (0, _jsxruntime.jsx)(_material.Tabs, {
                     value: activeTab,
                     onChange: handleChange,
                     "aria-label": "Panel configuration tabs",
                     children: tabs.map(({ label  }, i)=>{
-                        return /*#__PURE__*/ (0, _jsxRuntime.jsx)(_material.Tab, {
+                        return /*#__PURE__*/ (0, _jsxruntime.jsx)(_material.Tab, {
                             label: label,
                             id: `options-editor-tab-${i}`,
                             "aria-controls": `options-editor-tabpanel-${i}`
@@ -48,7 +50,7 @@ const OptionsEditorTabs = ({ tabs  })=>{
                 })
             }),
             tabs.map(({ label , content  }, i)=>{
-                return /*#__PURE__*/ (0, _jsxRuntime.jsx)(_tabPanel.TabPanel, {
+                return /*#__PURE__*/ (0, _jsxruntime.jsx)(_OptionsEditorTabPanel.OptionsEditorTabPanel, {
                     value: activeTab,
                     index: i,
                     children: content

package/dist/cjs/components/OptionsEditorTabs/index.js

@@ -14,15 +14,17 @@
 Object.defineProperty(exports, "__esModule", {
     value: true
 });
-_exportStar(require("./OptionsEditorTabs"), exports);
-function _exportStar(from, to) {
+_export_star(require("./OptionsEditorTabs"), 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];
-            }
-        });
+        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/PanelSpecEditor/PanelSpecEditor.js

@@ -16,19 +16,22 @@ Object.defineProperty(exports, "__esModule", {
 });
 Object.defineProperty(exports, "PanelSpecEditor", {
     enumerable: true,
-    get: ()=>PanelSpecEditor
+    get: function() {
+        return PanelSpecEditor;
+    }
 });
-const _jsxRuntime = require("react/jsx-runtime");
+const _jsxruntime = require("react/jsx-runtime");
 const _components = require("@perses-dev/components");
 const _runtime = require("../../runtime");
-const _optionsEditorTabs = require("../OptionsEditorTabs");
-const _timeSeriesQueryEditor = require("../TimeSeriesQueryEditor");
+const _OptionsEditorTabs = require("../OptionsEditorTabs");
+const _TimeSeriesQueryEditor = require("../TimeSeriesQueryEditor");
+const _TraceQueryEditor = require("../TraceQueryEditor");
 function PanelSpecEditor(props) {
     const { panelDefinition , onJSONChange , onQueriesChange , onPluginSpecChange  } = props;
     const { kind  } = panelDefinition.spec.plugin;
     const { data: plugin , isLoading , error  } = (0, _runtime.usePlugin)('Panel', kind);
     if (error) {
-        return /*#__PURE__*/ (0, _jsxRuntime.jsx)(_components.ErrorAlert, {
+        return /*#__PURE__*/ (0, _jsxruntime.jsx)(_components.ErrorAlert, {
             error: error
         });
     }
@@ -39,23 +42,60 @@ function PanelSpecEditor(props) {
     if (plugin === undefined) {
         throw new Error(`Missing implementation for panel plugin with kind '${kind}'`);
     }
+    const getQueryType = ()=>{
+        var _panelDefinition_spec, _queriesList_;
+        const queriesList = panelDefinition === null || panelDefinition === void 0 ? void 0 : (_panelDefinition_spec = panelDefinition.spec) === null || _panelDefinition_spec === void 0 ? void 0 : _panelDefinition_spec.queries;
+        if (queriesList === undefined) {
+            return '';
+        }
+        const queryType = (_queriesList_ = queriesList[0]) === null || _queriesList_ === void 0 ? void 0 : _queriesList_.kind;
+        return queryType;
+    };
+    // Get the corresponding queryEditor depending on the queryType
+    const getQueryEditorComponent = ()=>{
+        const queryType = getQueryType();
+        // default case handles cause where there is no queryType yet (e.g. UI > 'editing' mode > 'Add Panel')
+        switch(queryType){
+            case 'TimeSeriesQuery':
+                var _panelDefinition_spec_queries;
+                return /*#__PURE__*/ (0, _jsxruntime.jsx)(_TimeSeriesQueryEditor.TimeSeriesQueryEditor, {
+                    queries: (_panelDefinition_spec_queries = panelDefinition.spec.queries) !== null && _panelDefinition_spec_queries !== void 0 ? _panelDefinition_spec_queries : [],
+                    onChange: onQueriesChange
+                });
+            case 'TraceQuery':
+                var _panelDefinition_spec_queries1;
+                return /*#__PURE__*/ (0, _jsxruntime.jsx)(_TraceQueryEditor.TraceQueryEditor, {
+                    queries: (_panelDefinition_spec_queries1 = panelDefinition.spec.queries) !== null && _panelDefinition_spec_queries1 !== void 0 ? _panelDefinition_spec_queries1 : [],
+                    onChange: onQueriesChange
+                });
+            default:
+                // ScatterChart only handles trace queries for now
+                if (kind === 'ScatterChart') {
+                    var _panelDefinition_spec_queries2;
+                    return /*#__PURE__*/ (0, _jsxruntime.jsx)(_TraceQueryEditor.TraceQueryEditor, {
+                        queries: (_panelDefinition_spec_queries2 = panelDefinition.spec.queries) !== null && _panelDefinition_spec_queries2 !== void 0 ? _panelDefinition_spec_queries2 : [],
+                        onChange: onQueriesChange
+                    });
+                }
+                var _panelDefinition_spec_queries3;
+                return /*#__PURE__*/ (0, _jsxruntime.jsx)(_TimeSeriesQueryEditor.TimeSeriesQueryEditor, {
+                    queries: (_panelDefinition_spec_queries3 = panelDefinition.spec.queries) !== null && _panelDefinition_spec_queries3 !== void 0 ? _panelDefinition_spec_queries3 : [],
+                    onChange: onQueriesChange
+                });
+        }
+    };
     const { panelOptionsEditorComponents , hideQueryEditor  } = plugin;
     let tabs = [];
     if (!hideQueryEditor) {
-        var _queries;
-        // Since we only support TimeSeriesQuery for now, we will always show a TimeSeriesQueryEditor
         tabs.push({
             label: 'Query',
-            content: /*#__PURE__*/ (0, _jsxRuntime.jsx)(_timeSeriesQueryEditor.TimeSeriesQueryEditor, {
-                queries: (_queries = panelDefinition.spec.queries) !== null && _queries !== void 0 ? _queries : [],
-                onChange: onQueriesChange
-            })
+            content: getQueryEditorComponent()
         });
     }
     if (panelOptionsEditorComponents !== undefined) {
         tabs = tabs.concat(panelOptionsEditorComponents.map(({ label , content: OptionsEditorComponent  })=>({
                 label,
-                content: /*#__PURE__*/ (0, _jsxRuntime.jsx)(OptionsEditorComponent, {
+                content: /*#__PURE__*/ (0, _jsxruntime.jsx)(OptionsEditorComponent, {
                     value: panelDefinition.spec.plugin.spec,
                     onChange: onPluginSpecChange
                 })
@@ -64,12 +104,13 @@ function PanelSpecEditor(props) {
     // always show json editor by default
     tabs.push({
         label: 'JSON',
-        content: /*#__PURE__*/ (0, _jsxRuntime.jsx)(_components.JSONEditor, {
+        content: /*#__PURE__*/ (0, _jsxruntime.jsx)(_components.JSONEditor, {
+            maxHeight: "80vh",
             value: panelDefinition,
             onChange: onJSONChange
         })
     });
-    return /*#__PURE__*/ (0, _jsxRuntime.jsx)(_optionsEditorTabs.OptionsEditorTabs, {
+    return /*#__PURE__*/ (0, _jsxruntime.jsx)(_OptionsEditorTabs.OptionsEditorTabs, {
         tabs: tabs
     }, tabs.length);
 }

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

@@ -14,15 +14,17 @@
 Object.defineProperty(exports, "__esModule", {
     value: true
 });
-_exportStar(require("./PanelSpecEditor"), exports);
-function _exportStar(from, to) {
+_export_star(require("./PanelSpecEditor"), 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];
-            }
-        });
+        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/PluginEditor/PluginEditor.js

@@ -16,48 +16,41 @@ Object.defineProperty(exports, "__esModule", {
 });
 Object.defineProperty(exports, "PluginEditor", {
     enumerable: true,
-    get: ()=>PluginEditor
+    get: function() {
+        return PluginEditor;
+    }
 });
-const _jsxRuntime = require("react/jsx-runtime");
+const _jsxruntime = require("react/jsx-runtime");
 const _material = require("@mui/material");
-const _pluginKindSelect = require("../PluginKindSelect");
-const _pluginSpecEditor = require("../PluginSpecEditor");
-const _pluginEditorApi = require("./plugin-editor-api");
+const _PluginKindSelect = require("../PluginKindSelect");
+const _PluginSpecEditor = require("../PluginSpecEditor");
+const _plugineditorapi = require("./plugin-editor-api");
 function PluginEditor(props) {
     // eslint-disable-next-line @typescript-eslint/no-unused-vars
     const { value , pluginType , pluginKindLabel , onChange: _ , isReadonly , ...others } = props;
-    const { pendingKind , isLoading , error , onKindChange , onSpecChange  } = (0, _pluginEditorApi.usePluginEditor)(props);
-    var ref;
-    return /*#__PURE__*/ (0, _jsxRuntime.jsxs)(_material.Box, {
+    const { pendingKind , isLoading , error , onKindChange , onSpecChange  } = (0, _plugineditorapi.usePluginEditor)(props);
+    return /*#__PURE__*/ (0, _jsxruntime.jsxs)(_material.Box, {
         ...others,
         children: [
-            /*#__PURE__*/ (0, _jsxRuntime.jsxs)(_material.FormControl, {
-                margin: "dense",
+            /*#__PURE__*/ (0, _jsxruntime.jsx)(_PluginKindSelect.PluginKindSelect, {
                 fullWidth: false,
-                disabled: isLoading,
-                error: error !== null,
                 sx: {
-                    mb: 1
+                    mb: 1,
+                    minWidth: 120
+                },
+                margin: "dense",
+                label: pluginKindLabel,
+                pluginType: pluginType,
+                disabled: isLoading,
+                value: pendingKind !== '' ? pendingKind : value.kind,
+                InputProps: {
+                    readOnly: isReadonly
                 },
-                children: [
-                    /*#__PURE__*/ (0, _jsxRuntime.jsx)(_material.InputLabel, {
-                        id: "plugin-kind-label",
-                        children: pluginKindLabel
-                    }),
-                    /*#__PURE__*/ (0, _jsxRuntime.jsx)(_pluginKindSelect.PluginKindSelect, {
-                        labelId: "plugin-kind-label",
-                        label: pluginKindLabel,
-                        pluginType: pluginType,
-                        value: pendingKind !== '' ? pendingKind : value.kind,
-                        readOnly: isReadonly,
-                        onChange: onKindChange
-                    }),
-                    /*#__PURE__*/ (0, _jsxRuntime.jsx)(_material.FormHelperText, {
-                        children: (ref = error === null || error === void 0 ? void 0 : error.message) !== null && ref !== void 0 ? ref : ''
-                    })
-                ]
+                error: !!error,
+                helperText: error === null || error === void 0 ? void 0 : error.message,
+                onChange: onKindChange
             }),
-            /*#__PURE__*/ (0, _jsxRuntime.jsx)(_pluginSpecEditor.PluginSpecEditor, {
+            /*#__PURE__*/ (0, _jsxruntime.jsx)(_PluginSpecEditor.PluginSpecEditor, {
                 pluginType: pluginType,
                 pluginKind: value.kind,
                 value: value.spec,

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

@@ -14,16 +14,18 @@
 Object.defineProperty(exports, "__esModule", {
     value: true
 });
-_exportStar(require("./PluginEditor"), exports);
-_exportStar(require("./plugin-editor-api"), exports);
-function _exportStar(from, to) {
+_export_star(require("./PluginEditor"), exports);
+_export_star(require("./plugin-editor-api"), 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];
-            }
-        });
+        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/PluginEditor/plugin-editor-api.js

@@ -16,7 +16,9 @@ Object.defineProperty(exports, "__esModule", {
 });
 Object.defineProperty(exports, "usePluginEditor", {
     enumerable: true,
-    get: ()=>usePluginEditor
+    get: function() {
+        return usePluginEditor;
+    }
 });
 const _core = require("@perses-dev/core");
 const _react = require("react");
@@ -86,10 +88,10 @@ function usePluginEditor(props) {
    * When the user tries to change the plugin kind, make sure we have the correct spec for that plugin kind before we
    * make the switch.
    */ const onKindChange = (e)=>{
-        var ref;
+        var _prevSpecState_current_pluginType;
         const nextKind = e.target.value;
         // If we already have state for this plugin type/kind from a previous selection, just use it
-        const previousState = (ref = prevSpecState.current[pluginType]) === null || ref === void 0 ? void 0 : ref[nextKind];
+        const previousState = (_prevSpecState_current_pluginType = prevSpecState.current[pluginType]) === null || _prevSpecState_current_pluginType === void 0 ? void 0 : _prevSpecState_current_pluginType[nextKind];
         if (previousState !== undefined) {
             rememberCurrentSpecState();
             onChange({