@perses-dev/dashboards 0.50.0 → 0.51.0-beta.0

package/dist/cjs/components/Panel/PanelLinks.js

@@ -87,10 +87,10 @@ function PanelLinks({ links }) {
 function LinkButton({ link }) {
     const { url, name, tooltip, targetBlank } = useLink(link);
     return /*#__PURE__*/ (0, _jsxruntime.jsx)(_components.InfoTooltip, {
-        description: tooltip !== null && tooltip !== void 0 ? tooltip : url,
+        description: tooltip ?? url,
         enterDelay: 100,
         children: /*#__PURE__*/ (0, _jsxruntime.jsx)(_material.IconButton, {
-            "aria-label": name !== null && name !== void 0 ? name : url,
+            "aria-label": name ?? url,
             size: "small",
             href: url,
             target: targetBlank ? '_blank' : '_self',
@@ -110,19 +110,18 @@ function LinkButton({ link }) {
 function LinkMenuItem({ link }) {
     const { url, name, tooltip, targetBlank } = useLink(link);
     return /*#__PURE__*/ (0, _jsxruntime.jsx)(_components.InfoTooltip, {
-        description: tooltip !== null && tooltip !== void 0 ? tooltip : url,
+        description: tooltip ?? url,
         enterDelay: 100,
         children: /*#__PURE__*/ (0, _jsxruntime.jsx)(_material.MenuItem, {
             component: _material.Link,
             href: url,
             target: targetBlank ? '_blank' : '_self',
-            children: name !== null && name !== void 0 ? name : url
+            children: name ?? url
         })
     });
 }
 function useLink(link) {
-    var _useReplaceVariablesInString;
-    const url = (_useReplaceVariablesInString = (0, _pluginsystem.useReplaceVariablesInString)(link.url)) !== null && _useReplaceVariablesInString !== void 0 ? _useReplaceVariablesInString : link.url;
+    const url = (0, _pluginsystem.useReplaceVariablesInString)(link.url) ?? link.url;
     const name = (0, _pluginsystem.useReplaceVariablesInString)(link.name);
     const tooltip = (0, _pluginsystem.useReplaceVariablesInString)(link.tooltip);
     if (link.renderVariables === false) {

package/dist/cjs/components/Panel/PanelPluginLoader.js

@@ -0,0 +1,56 @@
+// Copyright 2025 The Perses Authors
+// Licensed under the Apache License, Version 2.0 (the "License");
+// you may not use this file except in compliance with the License.
+// You may obtain a copy of the License at
+//
+// 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, "PanelPluginLoader", {
+    enumerable: true,
+    get: function() {
+        return PanelPluginLoader;
+    }
+});
+const _jsxruntime = require("react/jsx-runtime");
+const _pluginsystem = require("@perses-dev/plugin-system");
+const _material = require("@mui/material");
+function PanelPluginLoader(props) {
+    const { kind, spec, contentDimensions, definition, queryResults } = props;
+    const { data: plugin, isLoading: isPanelLoading } = (0, _pluginsystem.usePlugin)('Panel', kind, {
+        throwOnError: true
+    });
+    const PanelComponent = plugin?.PanelComponent;
+    const supportedQueryTypes = plugin?.supportedQueryTypes || [];
+    // Show fullsize skeleton if the panel plugin is loading.
+    if (isPanelLoading) {
+        return /*#__PURE__*/ (0, _jsxruntime.jsx)(_material.Skeleton, {
+            variant: "rectangular",
+            width: contentDimensions?.width,
+            height: contentDimensions?.height,
+            "aria-label": "Loading..."
+        });
+    }
+    if (PanelComponent === undefined) {
+        throw new Error(`Missing PanelComponent from panel plugin for kind '${kind}'`);
+    }
+    for (const queryResult of queryResults){
+        if (!supportedQueryTypes.includes(queryResult.definition.kind)) {
+            throw new Error(`This panel does not support queries of type '${queryResult.definition.kind}'. Supported query types: ${supportedQueryTypes.join(', ')}.`);
+        }
+    }
+    return /*#__PURE__*/ (0, _jsxruntime.jsx)(PanelComponent, {
+        spec: spec,
+        contentDimensions: contentDimensions,
+        definition: definition,
+        queryResults: queryResults
+    });
+}

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

@@ -15,6 +15,7 @@ Object.defineProperty(exports, "__esModule", {
     value: true
 });
 _export_star(require("./Panel"), exports);
+_export_star(require("./PanelPluginLoader"), 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/PanelDrawer/PanelDrawer.js

@@ -44,7 +44,7 @@ const PanelDrawer = ()=>{
     };
     // Don't call closeDrawer on the store until the Drawer has completely transitioned out and reset close state
     const handleExited = ()=>{
-        panelEditor === null || panelEditor === void 0 ? void 0 : panelEditor.close();
+        panelEditor?.close();
         setIsClosing(false);
     };
     // Disables closing on click out. This is a quick-win solution to avoid losing draft changes.
@@ -58,11 +58,14 @@ const PanelDrawer = ()=>{
             onExited: handleExited
         },
         "data-testid": "panel-editor",
-        children: panelEditor && /*#__PURE__*/ (0, _jsxruntime.jsx)(_PanelEditorForm.PanelEditorForm, {
-            initialAction: panelEditor.mode,
-            initialValues: panelEditor.initialValues,
-            onSave: handleSave,
-            onClose: handleClose
+        children: panelEditor && /*#__PURE__*/ (0, _jsxruntime.jsx)(_components.ErrorBoundary, {
+            FallbackComponent: _components.ErrorAlert,
+            children: /*#__PURE__*/ (0, _jsxruntime.jsx)(_PanelEditorForm.PanelEditorForm, {
+                initialAction: panelEditor.mode,
+                initialValues: panelEditor.initialValues,
+                onSave: handleSave,
+                onClose: handleClose
+            })
         })
     });
 };

package/dist/cjs/components/PanelDrawer/PanelEditorForm.js

@@ -167,23 +167,19 @@ function PanelEditorForm(props) {
                             children: /*#__PURE__*/ (0, _jsxruntime.jsx)(_reacthookform.Controller, {
                                 control: form.control,
                                 name: "panelDefinition.spec.display.name",
-                                render: ({ field, fieldState })=>{
-                                    var _fieldState_error;
-                                    var _field_value;
-                                    return /*#__PURE__*/ (0, _jsxruntime.jsx)(_material.TextField, {
+                                render: ({ field, fieldState })=>/*#__PURE__*/ (0, _jsxruntime.jsx)(_material.TextField, {
                                         ...field,
                                         required: true,
                                         fullWidth: true,
                                         label: "Name",
                                         error: !!fieldState.error,
-                                        helperText: (_fieldState_error = fieldState.error) === null || _fieldState_error === void 0 ? void 0 : _fieldState_error.message,
-                                        value: (_field_value = field.value) !== null && _field_value !== void 0 ? _field_value : '',
+                                        helperText: fieldState.error?.message,
+                                        value: field.value ?? '',
                                         onChange: (event)=>{
                                             field.onChange(event);
                                             setName(event.target.value);
                                         }
-                                    });
-                                }
+                                    })
                             })
                         }),
                         /*#__PURE__*/ (0, _jsxruntime.jsx)(_material.Grid, {
@@ -192,28 +188,22 @@ function PanelEditorForm(props) {
                             children: /*#__PURE__*/ (0, _jsxruntime.jsx)(_reacthookform.Controller, {
                                 control: form.control,
                                 name: "groupId",
-                                render: ({ field, fieldState })=>{
-                                    var _fieldState_error;
-                                    return /*#__PURE__*/ (0, _jsxruntime.jsx)(_material.TextField, {
+                                render: ({ field, fieldState })=>/*#__PURE__*/ (0, _jsxruntime.jsx)(_material.TextField, {
                                         select: true,
                                         ...field,
                                         required: true,
                                         fullWidth: true,
                                         label: "Group",
                                         error: !!fieldState.error,
-                                        helperText: (_fieldState_error = fieldState.error) === null || _fieldState_error === void 0 ? void 0 : _fieldState_error.message,
+                                        helperText: fieldState.error?.message,
                                         onChange: (event)=>{
                                             field.onChange(event);
                                         },
-                                        children: panelGroups.map((panelGroup, index)=>{
-                                            var _panelGroup_title;
-                                            return /*#__PURE__*/ (0, _jsxruntime.jsx)(_material.MenuItem, {
+                                        children: panelGroups.map((panelGroup, index)=>/*#__PURE__*/ (0, _jsxruntime.jsx)(_material.MenuItem, {
                                                 value: panelGroup.id,
-                                                children: (_panelGroup_title = panelGroup.title) !== null && _panelGroup_title !== void 0 ? _panelGroup_title : `Group ${index + 1}`
-                                            }, panelGroup.id);
-                                        })
-                                    });
-                                }
+                                                children: panelGroup.title ?? `Group ${index + 1}`
+                                            }, panelGroup.id))
+                                    })
                             })
                         }),
                         /*#__PURE__*/ (0, _jsxruntime.jsx)(_material.Grid, {
@@ -222,22 +212,18 @@ function PanelEditorForm(props) {
                             children: /*#__PURE__*/ (0, _jsxruntime.jsx)(_reacthookform.Controller, {
                                 control: form.control,
                                 name: "panelDefinition.spec.display.description",
-                                render: ({ field, fieldState })=>{
-                                    var _fieldState_error;
-                                    var _field_value;
-                                    return /*#__PURE__*/ (0, _jsxruntime.jsx)(_material.TextField, {
+                                render: ({ field, fieldState })=>/*#__PURE__*/ (0, _jsxruntime.jsx)(_material.TextField, {
                                         ...field,
                                         fullWidth: true,
                                         label: "Description",
                                         error: !!fieldState.error,
-                                        helperText: (_fieldState_error = fieldState.error) === null || _fieldState_error === void 0 ? void 0 : _fieldState_error.message,
-                                        value: (_field_value = field.value) !== null && _field_value !== void 0 ? _field_value : '',
+                                        helperText: fieldState.error?.message,
+                                        value: field.value ?? '',
                                         onChange: (event)=>{
                                             field.onChange(event);
                                             setDescription(event.target.value);
                                         }
-                                    });
-                                }
+                                    })
                             })
                         }),
                         /*#__PURE__*/ (0, _jsxruntime.jsx)(_material.Grid, {
@@ -246,10 +232,7 @@ function PanelEditorForm(props) {
                             children: /*#__PURE__*/ (0, _jsxruntime.jsx)(_reacthookform.Controller, {
                                 control: form.control,
                                 name: "panelDefinition.spec.plugin.kind",
-                                render: ({ field, fieldState })=>{
-                                    var _pluginEditor_error, _fieldState_error;
-                                    var _pluginEditor_error_message;
-                                    return /*#__PURE__*/ (0, _jsxruntime.jsx)(_pluginsystem.PluginKindSelect, {
+                                render: ({ field, fieldState })=>/*#__PURE__*/ (0, _jsxruntime.jsx)(_pluginsystem.PluginKindSelect, {
                                         ...field,
                                         pluginTypes: [
                                             'Panel'
@@ -259,7 +242,7 @@ function PanelEditorForm(props) {
                                         label: "Type",
                                         disabled: pluginEditor.isLoading,
                                         error: !!pluginEditor.error || !!fieldState.error,
-                                        helperText: (_pluginEditor_error_message = (_pluginEditor_error = pluginEditor.error) === null || _pluginEditor_error === void 0 ? void 0 : _pluginEditor_error.message) !== null && _pluginEditor_error_message !== void 0 ? _pluginEditor_error_message : (_fieldState_error = fieldState.error) === null || _fieldState_error === void 0 ? void 0 : _fieldState_error.message,
+                                        helperText: pluginEditor.error?.message ?? fieldState.error?.message,
                                         value: {
                                             type: 'Panel',
                                             kind: field.value
@@ -268,8 +251,7 @@ function PanelEditorForm(props) {
                                             field.onChange(event.kind);
                                             pluginEditor.onSelectionChange(event);
                                         }
-                                    });
-                                }
+                                    })
                             })
                         }),
                         /*#__PURE__*/ (0, _jsxruntime.jsxs)(_material.Grid, {

package/dist/cjs/components/PanelDrawer/PanelPreview.js

@@ -34,15 +34,14 @@ function PanelPreview({ panelDefinition }) {
         width = boxRef.current.getBoundingClientRect().width;
     }
     const suggestedStepMs = (0, _pluginsystem.useSuggestedStepMs)(width);
-    const { data: plugin, isLoading } = (0, _pluginsystem.usePlugin)('Panel', panelDefinition.spec.plugin.kind);
-    if (isLoading) {
+    const { data: plugin, isPending } = (0, _pluginsystem.usePlugin)('Panel', panelDefinition.spec.plugin.kind);
+    if (isPending) {
         return null;
     }
     if (panelDefinition.spec.plugin.kind === '') {
         return null;
     }
-    var _panelDefinition_spec_queries;
-    const queries = (_panelDefinition_spec_queries = panelDefinition.spec.queries) !== null && _panelDefinition_spec_queries !== void 0 ? _panelDefinition_spec_queries : [];
+    const queries = panelDefinition.spec.queries ?? [];
     // map TimeSeriesQueryDefinition to Definition<UnknownSpec>
     const definitions = queries.length ? queries.map((query)=>{
         return {
@@ -57,7 +56,7 @@ function PanelPreview({ panelDefinition }) {
             definitions: definitions,
             options: {
                 suggestedStepMs,
-                ...plugin === null || plugin === void 0 ? void 0 : plugin.queryOptions
+                ...plugin?.queryOptions
             },
             children: /*#__PURE__*/ (0, _jsxruntime.jsx)(_Panel.Panel, {
                 definition: panelDefinition

package/dist/cjs/components/PanelGroupDialog/PanelGroupDialog.js

@@ -38,7 +38,7 @@ function PanelGroupDialog() {
     const handleClose = ()=>setIsClosing(true);
     // Don't call close on the store until the Dialog has completely transitioned out
     const handleExited = ()=>{
-        panelGroupEditor === null || panelGroupEditor === void 0 ? void 0 : panelGroupEditor.close();
+        panelGroupEditor?.close();
         setIsClosing(false);
     };
     // Dialog is open if we have a model and we're not transitioning out

package/dist/cjs/components/QuerySummaryTable/QuerySummaryTable.js

@@ -34,7 +34,7 @@ function QuerySummaryTable(props) {
     // for displaying a summary of recent query results
     const queryClient = (0, _reactquery.useQueryClient)();
     const queries = queryClient.getQueryCache().findAll();
-    const activeQueries = queries.filter((query)=>query.state.status === 'loading');
+    const activeQueries = queries.filter((query)=>query.state.status === 'pending');
     const completedQueries = queries.filter((query)=>query.state.status === 'success');
     const querySummary = (0, _pluginsystem.useActiveTimeSeriesQueries)();
     if (datasourceClient.isLoading === true) {
@@ -42,12 +42,10 @@ function QuerySummaryTable(props) {
     }
     const warnings = [];
     querySummary.forEach((query)=>{
-        var _queryData_metadata;
         const queryData = query.state.data;
-        if (queryData && ((_queryData_metadata = queryData.metadata) === null || _queryData_metadata === void 0 ? void 0 : _queryData_metadata.notices)) {
-            var _queryData_metadata_notices_;
+        if (queryData && queryData.metadata?.notices) {
             const queryKey = query.queryKey;
-            const warningMessage = (_queryData_metadata_notices_ = queryData.metadata.notices[0]) === null || _queryData_metadata_notices_ === void 0 ? void 0 : _queryData_metadata_notices_.message;
+            const warningMessage = queryData.metadata.notices[0]?.message;
             if (warningMessage) {
                 warnings.push({
                     query: String(queryKey[0].spec.plugin.spec.query),

package/dist/cjs/components/SaveChangesConfirmationDialog/SaveChangesConfirmationDialog.js

@@ -29,10 +29,8 @@ const _components = require("@perses-dev/components");
 const _context = require("../../context");
 const SaveChangesConfirmationDialog = ()=>{
     const { saveChangesConfirmationDialog: dialog } = (0, _context.useSaveChangesConfirmationDialog)();
-    var _dialog_isSavedDurationModified;
-    const isSavedDurationModified = (_dialog_isSavedDurationModified = dialog === null || dialog === void 0 ? void 0 : dialog.isSavedDurationModified) !== null && _dialog_isSavedDurationModified !== void 0 ? _dialog_isSavedDurationModified : true;
-    var _dialog_isSavedVariableModified;
-    const isSavedVariableModified = (_dialog_isSavedVariableModified = dialog === null || dialog === void 0 ? void 0 : dialog.isSavedVariableModified) !== null && _dialog_isSavedVariableModified !== void 0 ? _dialog_isSavedVariableModified : true;
+    const isSavedDurationModified = dialog?.isSavedDurationModified ?? true;
+    const isSavedVariableModified = dialog?.isSavedVariableModified ?? true;
     const [saveDefaultTimeRange, setSaveDefaultTimeRange] = (0, _react.useState)(isSavedDurationModified);
     const [saveDefaultVariables, setSaveDefaultVariables] = (0, _react.useState)(isSavedVariableModified);
     const { getSavedVariablesStatus } = (0, _context.useVariableDefinitionActions)();

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

@@ -59,9 +59,7 @@ function BuiltinVariableAccordions({ builtinVariableDefinitions }) {
         builtinVariablesBySource
     ]);
     return /*#__PURE__*/ (0, _jsxruntime.jsx)(_jsxruntime.Fragment, {
-        children: sources.map((source)=>{
-            var _builtinVariablesBySource_source;
-            return /*#__PURE__*/ (0, _jsxruntime.jsxs)(_material.Accordion, {
+        children: sources.map((source)=>/*#__PURE__*/ (0, _jsxruntime.jsxs)(_material.Accordion, {
                 sx: (theme)=>({
                         '.MuiAccordionSummary-root': {
                             backgroundColor: theme.palette.background.lighter
@@ -110,10 +108,7 @@ function BuiltinVariableAccordions({ builtinVariableDefinitions }) {
                                         })
                                     }),
                                     /*#__PURE__*/ (0, _jsxruntime.jsx)(_material.TableBody, {
-                                        children: ((_builtinVariablesBySource_source = builtinVariablesBySource[source]) !== null && _builtinVariablesBySource_source !== void 0 ? _builtinVariablesBySource_source : []).map((v)=>{
-                                            var _v_spec_display;
-                                            var _v_spec_display_description;
-                                            return /*#__PURE__*/ (0, _jsxruntime.jsxs)(_material.TableRow, {
+                                        children: (builtinVariablesBySource[source] ?? []).map((v)=>/*#__PURE__*/ (0, _jsxruntime.jsxs)(_material.TableRow, {
                                                 children: [
                                                     /*#__PURE__*/ (0, _jsxruntime.jsx)(_material.TableCell, {
                                                         component: "th",
@@ -124,18 +119,16 @@ function BuiltinVariableAccordions({ builtinVariableDefinitions }) {
                                                         children: v.spec.name
                                                     }),
                                                     /*#__PURE__*/ (0, _jsxruntime.jsx)(_material.TableCell, {
-                                                        children: (_v_spec_display_description = (_v_spec_display = v.spec.display) === null || _v_spec_display === void 0 ? void 0 : _v_spec_display.description) !== null && _v_spec_display_description !== void 0 ? _v_spec_display_description : ''
+                                                        children: v.spec.display?.description ?? ''
                                                     })
                                                 ]
-                                            }, source + '-' + v.spec.name);
-                                        })
+                                            }, source + '-' + v.spec.name))
                                     })
                                 ]
                             })
                         })
                     })
                 ]
-            }, source);
-        })
+            }, source))
     });
 }

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

@@ -47,9 +47,8 @@ function variableOptionToVariableValue(options) {
     return options.value;
 }
 function Variable({ name, source }) {
-    var _ctx_definition;
     const ctx = (0, _context.useVariableDefinitionAndState)(name, source);
-    const kind = (_ctx_definition = ctx.definition) === null || _ctx_definition === void 0 ? void 0 : _ctx_definition.kind;
+    const kind = ctx.definition?.kind;
     switch(kind){
         case 'TextVariable':
             return /*#__PURE__*/ (0, _jsxruntime.jsx)(TextVariable, {
@@ -70,22 +69,16 @@ function Variable({ name, source }) {
     });
 }
 function useListVariableState(spec, state, variablesOptionsQuery) {
-    const allowMultiple = (spec === null || spec === void 0 ? void 0 : spec.allowMultiple) === true;
-    const allowAllValue = (spec === null || spec === void 0 ? void 0 : spec.allowAllValue) === true;
-    const sort = spec === null || spec === void 0 ? void 0 : spec.sort;
-    const loading = (0, _react.useMemo)(()=>{
-        var _variablesOptionsQuery_isFetching;
-        return (_variablesOptionsQuery_isFetching = variablesOptionsQuery.isFetching) !== null && _variablesOptionsQuery_isFetching !== void 0 ? _variablesOptionsQuery_isFetching : false;
-    }, [
+    const allowMultiple = spec?.allowMultiple === true;
+    const allowAllValue = spec?.allowAllValue === true;
+    const sort = spec?.sort;
+    const loading = (0, _react.useMemo)(()=>variablesOptionsQuery.isFetching ?? false, [
         variablesOptionsQuery.isFetching
     ]);
-    const options = (0, _react.useMemo)(()=>{
-        var _variablesOptionsQuery_data;
-        return (_variablesOptionsQuery_data = variablesOptionsQuery.data) !== null && _variablesOptionsQuery_data !== void 0 ? _variablesOptionsQuery_data : [];
-    }, [
+    const options = (0, _react.useMemo)(()=>variablesOptionsQuery.data ?? [], [
         variablesOptionsQuery.data
     ]);
-    let value = state === null || state === void 0 ? void 0 : state.value;
+    let value = state?.value;
     // Make sure value is an array if allowMultiple is true
     if (allowMultiple && !Array.isArray(value)) {
         value = typeof value === 'string' ? [
@@ -146,8 +139,7 @@ function useListVariableState(spec, state, variablesOptionsQuery) {
         allowMultiple
     ]);
     value = (0, _react.useMemo)(()=>{
-        var _viewOptions_;
-        const firstOptionValue = viewOptions === null || viewOptions === void 0 ? void 0 : (_viewOptions_ = viewOptions[allowAllValue ? 1 : 0]) === null || _viewOptions_ === void 0 ? void 0 : _viewOptions_.value;
+        const firstOptionValue = viewOptions?.[allowAllValue ? 1 : 0]?.value;
         // If there is no value but there are options, or the value is not in options, we set the value to the first option.
         if (firstOptionValue) {
             if (!valueIsInOptions || !value || value.length === 0) {
@@ -169,13 +161,12 @@ function useListVariableState(spec, state, variablesOptionsQuery) {
         // an array, hence this conditional
         if (Array.isArray(value)) {
             return viewOptions.filter((o)=>{
-                return value === null || value === void 0 ? void 0 : value.includes(o.value);
+                return value?.includes(o.value);
             });
         } else {
-            var _viewOptions_find;
-            return (_viewOptions_find = viewOptions.find((o)=>{
+            return viewOptions.find((o)=>{
                 return value === o.value;
-            })) !== null && _viewOptions_find !== void 0 ? _viewOptions_find : {
+            }) ?? {
                 value: '',
                 label: ''
             };
@@ -212,18 +203,17 @@ const getWidthPx = (inputValue, kind)=>{
     }
 };
 function ListVariable({ name, source }) {
-    var _definition_spec_display;
     const ctx = (0, _context.useVariableDefinitionAndState)(name, source);
     const definition = ctx.definition;
     const variablesOptionsQuery = (0, _pluginsystem.useListVariablePluginValues)(definition);
     const { setVariableValue, setVariableLoading, setVariableOptions } = (0, _context.useVariableDefinitionActions)();
-    const { selectedOptions, value, loading, options, viewOptions } = useListVariableState(definition === null || definition === void 0 ? void 0 : definition.spec, ctx.state, variablesOptionsQuery);
-    const [inputValue, setInputValue] = (0, _react.useState)('');
+    const { selectedOptions, value, loading, options, viewOptions } = useListVariableState(definition?.spec, ctx.state, variablesOptionsQuery);
     const [inputWidth, setInputWidth] = (0, _react.useState)(_constants.MIN_VARIABLE_WIDTH);
-    var _definition_spec_display_name;
-    const title = (_definition_spec_display_name = definition === null || definition === void 0 ? void 0 : (_definition_spec_display = definition.spec.display) === null || _definition_spec_display === void 0 ? void 0 : _definition_spec_display.name) !== null && _definition_spec_display_name !== void 0 ? _definition_spec_display_name : name;
-    const allowMultiple = (definition === null || definition === void 0 ? void 0 : definition.spec.allowMultiple) === true;
-    const allowAllValue = (definition === null || definition === void 0 ? void 0 : definition.spec.allowAllValue) === true;
+    // Used for multiple value variables, it will not clear variable input when selecting an option
+    const [inputValue, setInputValue] = (0, _react.useState)('');
+    const title = definition?.spec.display?.name ?? name;
+    const allowMultiple = definition?.spec.allowMultiple === true;
+    const allowAllValue = definition?.spec.allowAllValue === true;
     // Update value when changed
     (0, _react.useEffect)(()=>{
         if (value) {
@@ -265,11 +255,14 @@ function ListVariable({ name, source }) {
                 limitTags: 3,
                 size: "small",
                 disableClearable: true,
-                PopperComponent: StyledPopper,
+                slots: {
+                    popper: StyledPopper
+                },
                 renderInput: (params)=>{
                     return allowMultiple ? /*#__PURE__*/ (0, _jsxruntime.jsx)(_material.TextField, {
                         ...params,
-                        label: title
+                        label: title,
+                        onChange: (e)=>setInputValue(e.target.value)
                     }) : /*#__PURE__*/ (0, _jsxruntime.jsx)(_material.TextField, {
                         ...params,
                         label: title,
@@ -294,13 +287,17 @@ function ListVariable({ name, source }) {
                         setVariableValue(name, variableOptionToVariableValue(value), source);
                     }
                 },
-                inputValue: inputValue,
+                inputValue: allowMultiple ? inputValue : undefined,
                 onInputChange: (_, newInputValue)=>{
-                    setInputValue(newInputValue);
                     if (!allowMultiple) {
                         setInputWidth(getWidthPx(newInputValue, 'list'));
                     }
                 },
+                onBlur: ()=>{
+                    if (allowMultiple) {
+                        setInputValue('');
+                    }
+                },
                 options: viewOptions
             }),
             loading && /*#__PURE__*/ (0, _jsxruntime.jsx)(_material.LinearProgress, {})
@@ -308,21 +305,17 @@ function ListVariable({ name, source }) {
     });
 }
 function TextVariable({ name, source }) {
-    var _definition_spec_display;
     const ctx = (0, _context.useVariableDefinitionAndState)(name, source);
     const state = ctx.state;
     const definition = ctx.definition;
-    var _state_value;
-    const [tempValue, setTempValue] = (0, _react.useState)((_state_value = state === null || state === void 0 ? void 0 : state.value) !== null && _state_value !== void 0 ? _state_value : '');
+    const [tempValue, setTempValue] = (0, _react.useState)(state?.value ?? '');
     const [inputWidth, setInputWidth] = (0, _react.useState)(getWidthPx(tempValue, 'text'));
     const { setVariableValue } = (0, _context.useVariableDefinitionActions)();
     (0, _react.useEffect)(()=>{
-        var _state_value;
-        setTempValue((_state_value = state === null || state === void 0 ? void 0 : state.value) !== null && _state_value !== void 0 ? _state_value : '');
+        setTempValue(state?.value ?? '');
     }, [
-        state === null || state === void 0 ? void 0 : state.value
+        state?.value
     ]);
-    var _definition_spec_display_name, _definition_spec_constant;
     return /*#__PURE__*/ (0, _jsxruntime.jsx)(_material.TextField, {
         title: tempValue,
         value: tempValue,
@@ -332,9 +325,11 @@ function TextVariable({ name, source }) {
         },
         onBlur: ()=>setVariableValue(name, tempValue, source),
         placeholder: name,
-        label: (_definition_spec_display_name = definition === null || definition === void 0 ? void 0 : (_definition_spec_display = definition.spec.display) === null || _definition_spec_display === void 0 ? void 0 : _definition_spec_display.name) !== null && _definition_spec_display_name !== void 0 ? _definition_spec_display_name : name,
-        InputProps: {
-            readOnly: (_definition_spec_constant = definition === null || definition === void 0 ? void 0 : definition.spec.constant) !== null && _definition_spec_constant !== void 0 ? _definition_spec_constant : false
+        label: definition?.spec.display?.name ?? name,
+        slotProps: {
+            input: {
+                readOnly: definition?.spec.constant ?? false
+            }
         },
         sx: {
             width: `${inputWidth}px`,