@perses-dev/dashboards 0.0.0-snapshot-scatter-chart-embed-8efdfab → 0.0.0-snapshot-explorer-plugin-c4a7621

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

@@ -22,9 +22,10 @@ Object.defineProperty(exports, "usePanelEditor", {
 });
 const _react = require("react");
 const usePanelEditor = (panelDefinition)=>{
-    const { display , plugin: pluginDefinition , queries: initialQueries  } = panelDefinition.spec;
+    const { display, plugin: pluginDefinition, queries: initialQueries, links: initialLinks } = panelDefinition.spec;
     const [name, setName] = (0, _react.useState)(display.name);
     const [description, setDescription] = (0, _react.useState)(display.description);
+    const [links, setLinks] = (0, _react.useState)(initialLinks);
     const [plugin, setPlugin] = (0, _react.useState)(pluginDefinition);
     // need to keep track of prevQueries if switching from a panel with no queries (ex: markdown) to one with queries
     const [prevQueries, setPrevQueries] = (0, _react.useState)(initialQueries);
@@ -47,14 +48,16 @@ const usePanelEditor = (panelDefinition)=>{
     ]);
     // reset panel definition
     const setPanelDefinition = (0, _react.useCallback)((panelDefinition)=>{
-        const { display , plugin , queries  } = panelDefinition.spec;
+        const { display, plugin, queries, links } = panelDefinition.spec;
         setName(display.name);
         setDescription(display.description);
+        setLinks(links);
         setPlugin(plugin);
         setQueries(queries);
     }, [
         setName,
         setDescription,
+        setLinks,
         setPlugin,
         setQueries
     ]);
@@ -67,23 +70,23 @@ const usePanelEditor = (panelDefinition)=>{
                         description
                     },
                     plugin,
-                    queries: currentQueries
+                    queries: currentQueries,
+                    links
                 }
             },
             setName,
             setDescription,
+            setLinks,
             setQueries,
             setPlugin,
             setPanelDefinition
         }), [
         name,
         description,
+        links,
         plugin,
         currentQueries,
-        setName,
-        setDescription,
         setQueries,
-        setPlugin,
         setPanelDefinition
     ]);
 };

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/PanelGroupDialog/PanelGroupEditorForm.js

@@ -32,7 +32,7 @@ const _jsxruntime = require("react/jsx-runtime");
 const _react = require("react");
 const _material = require("@mui/material");
 function PanelGroupEditorForm(props) {
-    const { initialValues , onSubmit  } = props;
+    const { initialValues, onSubmit } = props;
     const [title, setTitle] = (0, _react.useState)(initialValues.title);
     const [isCollapsed, setIsCollapsed] = (0, _react.useState)(initialValues.isCollapsed);
     const handleCollapsedChange = (e)=>{

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

@@ -26,15 +26,15 @@ const _reactquery = require("@tanstack/react-query");
 const _pluginsystem = require("@perses-dev/plugin-system");
 const TABLE_MAX_WIDTH = 1000;
 function QuerySummaryTable(props) {
-    const { showTotalQueries =true  } = props;
+    const { showTotalQueries = true } = props;
     const datasourceClient = (0, _pluginsystem.useDatasourceClient)({
         kind: 'PrometheusDatasource'
     });
-    const { absoluteTimeRange  } = (0, _pluginsystem.useTimeRange)();
+    const { absoluteTimeRange } = (0, _pluginsystem.useTimeRange)();
     // 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

@@ -1,4 +1,4 @@
-// Copyright 2023 The Perses Authors
+// Copyright 2024 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
@@ -28,17 +28,15 @@ const _core = require("@perses-dev/core");
 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 { saveChangesConfirmationDialog: dialog } = (0, _context.useSaveChangesConfirmationDialog)();
+    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.useTemplateVariableActions)();
-    const { modifiedVariableNames  } = getSavedVariablesStatus();
+    const { getSavedVariablesStatus } = (0, _context.useVariableDefinitionActions)();
+    const { modifiedVariableNames } = getSavedVariablesStatus();
     const isOpen = dialog !== undefined;
-    const { timeRange  } = (0, _pluginsystem.useTimeRange)();
+    const { timeRange } = (0, _pluginsystem.useTimeRange)();
     const currentTimeRangeText = (0, _core.isRelativeTimeRange)(timeRange) ? `(Last ${timeRange.pastDuration})` : '(Absolute time ranges can not be saved)';
     const saveTimeRangeText = `Save current time range as new default ${currentTimeRangeText}`;
     const saveVariablesText = `Save current variable values as new default (${modifiedVariableNames.length > 0 ? modifiedVariableNames.join(', ') : 'No modified variables'})`;

package/dist/cjs/components/SaveDashboardButton/SaveDashboardButton.js

@@ -1,4 +1,4 @@
-// Copyright 2023 The Perses Authors
+// Copyright 2024 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
@@ -26,14 +26,14 @@ const _material = require("@mui/material");
 const _core = require("@perses-dev/core");
 const _pluginsystem = require("@perses-dev/plugin-system");
 const _context = require("../../context");
-const SaveDashboardButton = ({ onSave , isDisabled , variant ='contained'  })=>{
+const SaveDashboardButton = ({ onSave, isDisabled, variant = 'contained' })=>{
     const [isSavingDashboard, setSavingDashboard] = (0, _react.useState)(false);
-    const { dashboard , setDashboard  } = (0, _context.useDashboard)();
-    const { getSavedVariablesStatus , setVariableDefaultValues  } = (0, _context.useTemplateVariableActions)();
-    const { isSavedVariableModified  } = getSavedVariablesStatus();
-    const { timeRange  } = (0, _pluginsystem.useTimeRange)();
-    const { setEditMode  } = (0, _context.useEditMode)();
-    const { openSaveChangesConfirmationDialog , closeSaveChangesConfirmationDialog  } = (0, _context.useSaveChangesConfirmationDialog)();
+    const { dashboard, setDashboard } = (0, _context.useDashboard)();
+    const { getSavedVariablesStatus, setVariableDefaultValues } = (0, _context.useVariableDefinitionActions)();
+    const { isSavedVariableModified } = getSavedVariablesStatus();
+    const { timeRange } = (0, _pluginsystem.useTimeRange)();
+    const { setEditMode } = (0, _context.useEditMode)();
+    const { openSaveChangesConfirmationDialog, closeSaveChangesConfirmationDialog } = (0, _context.useSaveChangesConfirmationDialog)();
     const onSaveButtonClick = ()=>{
         const isSavedDurationModified = (0, _core.isRelativeTimeRange)(timeRange) && dashboard.spec.duration !== timeRange.pastDuration;
         // Save dashboard

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

@@ -30,7 +30,7 @@ function _interop_require_default(obj) {
         default: obj
     };
 }
-function BuiltinVariableAccordions({ builtinVariableDefinitions  }) {
+function BuiltinVariableAccordions({ builtinVariableDefinitions }) {
     const builtinVariablesBySource = (0, _react.useMemo)(()=>{
         const result = {};
         for (const definition of builtinVariableDefinitions){
@@ -58,10 +58,8 @@ function BuiltinVariableAccordions({ builtinVariableDefinitions  }) {
     }, [
         builtinVariablesBySource
     ]);
-    var _builtinVariablesBySource_source, _v_spec_display_description;
     return /*#__PURE__*/ (0, _jsxruntime.jsx)(_jsxruntime.Fragment, {
-        children: sources.map((source)=>{
-            /*#__PURE__*/ return (0, _jsxruntime.jsxs)(_material.Accordion, {
+        children: sources.map((source)=>/*#__PURE__*/ (0, _jsxruntime.jsxs)(_material.Accordion, {
                 sx: (theme)=>({
                         '.MuiAccordionSummary-root': {
                             backgroundColor: theme.palette.background.lighter
@@ -78,12 +76,12 @@ function BuiltinVariableAccordions({ builtinVariableDefinitions  }) {
                         children: /*#__PURE__*/ (0, _jsxruntime.jsx)(_material.Typography, {
                             variant: "h2",
                             children: /*#__PURE__*/ (0, _jsxruntime.jsx)(_components.InfoTooltip, {
-                                title: `${source} Builtin Variables`,
+                                title: `${source} Built-in Variables`,
                                 description: "Variables computed during dashboard rendering.",
                                 children: /*#__PURE__*/ (0, _jsxruntime.jsxs)("span", {
                                     children: [
                                         source,
-                                        " Builtin Variables"
+                                        " Built-in Variables"
                                     ]
                                 })
                             })
@@ -110,9 +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;
-                                            /*#__PURE__*/ return (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",
@@ -123,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/EditVariablesButton.js

@@ -1,4 +1,4 @@
-// Copyright 2023 The Perses Authors
+// Copyright 2024 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
@@ -34,12 +34,12 @@ function _interop_require_default(obj) {
         default: obj
     };
 }
-function EditVariablesButton({ variant ='text' , label ='Variables' , color ='primary' , fullWidth  }) {
+function EditVariablesButton({ variant = 'text', label = 'Variables', color = 'primary', fullWidth }) {
     const [isVariableEditorOpen, setIsVariableEditorOpen] = (0, _react.useState)(false);
-    const variableDefinitions = (0, _context.useTemplateVariableDefinitions)();
-    const externalVariableDefinitions = (0, _context.useTemplateExternalVariableDefinitions)();
+    const variableDefinitions = (0, _context.useVariableDefinitions)();
+    const externalVariableDefinitions = (0, _context.useExternalVariableDefinitions)();
     const builtinVariableDefinitions = (0, _pluginsystem.useBuiltinVariableDefinitions)();
-    const { setVariableDefinitions  } = (0, _context.useTemplateVariableActions)();
+    const { setVariableDefinitions } = (0, _context.useVariableDefinitionActions)();
     const openVariableEditor = ()=>{
         setIsVariableEditorOpen(true);
     };

package/dist/cjs/components/Variables/{TemplateVariable.js → Variable.js}

@@ -1,4 +1,4 @@
-// Copyright 2023 The Perses Authors
+// Copyright 2024 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
@@ -21,8 +21,8 @@ function _export(target, all) {
     });
 }
 _export(exports, {
-    TemplateVariable: function() {
-        return TemplateVariable;
+    Variable: function() {
+        return Variable;
     },
     useListVariableState: function() {
         return useListVariableState;
@@ -46,10 +46,9 @@ function variableOptionToVariableValue(options) {
     }
     return options.value;
 }
-function TemplateVariable({ name , source  }) {
-    var _ctx_definition;
-    const ctx = (0, _context.useTemplateVariable)(name, source);
-    const kind = (_ctx_definition = ctx.definition) === null || _ctx_definition === void 0 ? void 0 : _ctx_definition.kind;
+function Variable({ name, source }) {
+    const ctx = (0, _context.useVariableDefinitionAndState)(name, source);
+    const kind = ctx.definition?.kind;
     switch(kind){
         case 'TextVariable':
             return /*#__PURE__*/ (0, _jsxruntime.jsx)(TextVariable, {
@@ -70,14 +69,16 @@ function TemplateVariable({ 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)(()=>variablesOptionsQuery.isFetching || false, [
-        variablesOptionsQuery
+    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 = variablesOptionsQuery.data;
-    let value = state === null || state === void 0 ? void 0 : state.value;
+    const options = (0, _react.useMemo)(()=>variablesOptionsQuery.data ?? [], [
+        variablesOptionsQuery.data
+    ]);
+    let value = state?.value;
     // Make sure value is an array if allowMultiple is true
     if (allowMultiple && !Array.isArray(value)) {
         value = typeof value === 'string' ? [
@@ -138,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) {
@@ -161,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: ''
             };
@@ -194,28 +193,25 @@ const StyledPopper = (props)=>/*#__PURE__*/ (0, _jsxruntime.jsx)(_material.Poppe
 const LETTER_HSIZE = 8; // approximation
 const ARROW_OFFSET = 40; // right offset for list variables (= take into account the dropdown toggle size)
 const getWidthPx = (inputValue, kind)=>{
-    const width = (inputValue.length + 1) * LETTER_HSIZE + (kind == 'list' ? ARROW_OFFSET : 0);
-    if (width < _constants.MIN_TEMPLATE_VARIABLE_WIDTH) {
-        return _constants.MIN_TEMPLATE_VARIABLE_WIDTH;
-    } else if (width > _constants.MAX_TEMPLATE_VARIABLE_WIDTH) {
-        return _constants.MAX_TEMPLATE_VARIABLE_WIDTH;
+    const width = (inputValue.length + 1) * LETTER_HSIZE + (kind === 'list' ? ARROW_OFFSET : 0);
+    if (width < _constants.MIN_VARIABLE_WIDTH) {
+        return _constants.MIN_VARIABLE_WIDTH;
+    } else if (width > _constants.MAX_VARIABLE_WIDTH) {
+        return _constants.MAX_VARIABLE_WIDTH;
     } else {
         return width;
     }
 };
-function ListVariable({ name , source  }) {
-    var _definition_spec_display;
-    const ctx = (0, _context.useTemplateVariable)(name, source);
+function ListVariable({ name, source }) {
+    const ctx = (0, _context.useVariableDefinitionAndState)(name, source);
     const definition = ctx.definition;
     const variablesOptionsQuery = (0, _pluginsystem.useListVariablePluginValues)(definition);
-    const { setVariableValue , setVariableLoading , setVariableOptions  } = (0, _context.useTemplateVariableActions)();
-    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 [inputWidth, setInputWidth] = (0, _react.useState)(_constants.MIN_TEMPLATE_VARIABLE_WIDTH);
-    var _definition_spec_display_name;
-    const title = (_definition_spec_display_name = (_definition_spec_display = definition === null || definition === void 0 ? void 0 : 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;
+    const { setVariableValue, setVariableLoading, setVariableOptions } = (0, _context.useVariableDefinitionActions)();
+    const { selectedOptions, value, loading, options, viewOptions } = useListVariableState(definition?.spec, ctx.state, variablesOptionsQuery);
+    const [inputWidth, setInputWidth] = (0, _react.useState)(_constants.MIN_VARIABLE_WIDTH);
+    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) {
@@ -257,7 +253,9 @@ 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,
@@ -274,9 +272,8 @@ function ListVariable({ name , source  }) {
                     '& .MuiInputBase-root': {
                         minHeight: '38px'
                     },
-                    '& .MuiInputBase-root.MuiOutlinedInput-root.MuiInputBase-sizeSmall': {
-                        paddingY: '5px',
-                        paddingLeft: '5px'
+                    '& .MuiAutocomplete-tag': {
+                        margin: '1px 2px'
                     }
                 },
                 value: selectedOptions,
@@ -287,9 +284,7 @@ function ListVariable({ name , source  }) {
                         setVariableValue(name, variableOptionToVariableValue(value), source);
                     }
                 },
-                inputValue: inputValue,
                 onInputChange: (_, newInputValue)=>{
-                    setInputValue(newInputValue);
                     if (!allowMultiple) {
                         setInputWidth(getWidthPx(newInputValue, 'list'));
                     }
@@ -300,35 +295,32 @@ function ListVariable({ name , source  }) {
         ]
     });
 }
-function TextVariable({ name , source  }) {
-    var _definition_spec_display;
-    const ctx = (0, _context.useTemplateVariable)(name, source);
+function TextVariable({ name, source }) {
+    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.useTemplateVariableActions)();
+    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,
-        //onChange={(e) => setTempValue(e.target.value)}
         onChange: (e)=>{
             setTempValue(e.target.value);
             setInputWidth(getWidthPx(e.target.value, 'text'));
         },
         onBlur: ()=>setVariableValue(name, tempValue, source),
         placeholder: name,
-        label: (_definition_spec_display_name = (_definition_spec_display = definition === null || definition === void 0 ? void 0 : 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`,