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

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

@@ -14,71 +14,104 @@
 Object.defineProperty(exports, "__esModule", {
     value: true
 });
-Object.defineProperty(exports, "TemplateVariable", {
-    enumerable: true,
-    get: ()=>TemplateVariable
+function _export(target, all) {
+    for(var name in all)Object.defineProperty(target, name, {
+        enumerable: true,
+        get: all[name]
+    });
+}
+_export(exports, {
+    TemplateVariable: function() {
+        return TemplateVariable;
+    },
+    useListVariableState: function() {
+        return useListVariableState;
+    }
 });
-const _jsxRuntime = require("react/jsx-runtime");
+const _jsxruntime = require("react/jsx-runtime");
 const _react = require("react");
 const _material = require("@mui/material");
 const _core = require("@perses-dev/core");
-const _pluginSystem = require("@perses-dev/plugin-system");
+const _pluginsystem = require("@perses-dev/plugin-system");
 const _context = require("../../context");
-function TemplateVariable({ name  }) {
-    var ref;
-    const ctx = (0, _context.useTemplateVariable)(name);
-    const kind = (ref = ctx.definition) === null || ref === void 0 ? void 0 : ref.kind;
+const _constants = require("../../constants");
+function variableOptionToVariableValue(options) {
+    if (options === null) {
+        return null;
+    }
+    if (Array.isArray(options)) {
+        return options.map((v)=>{
+            return v.value;
+        });
+    }
+    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;
     switch(kind){
         case 'TextVariable':
-            return /*#__PURE__*/ (0, _jsxRuntime.jsx)(TextVariable, {
-                name: name
+            return /*#__PURE__*/ (0, _jsxruntime.jsx)(TextVariable, {
+                name: name,
+                source: source
             });
         case 'ListVariable':
-            return /*#__PURE__*/ (0, _jsxRuntime.jsx)(ListVariable, {
-                name: name
+            return /*#__PURE__*/ (0, _jsxruntime.jsx)(ListVariable, {
+                name: name,
+                source: source
             });
     }
-    return /*#__PURE__*/ (0, _jsxRuntime.jsxs)("div", {
+    return /*#__PURE__*/ (0, _jsxruntime.jsxs)("div", {
         children: [
             "Unsupported Variable Kind: $",
             kind
         ]
     });
 }
-function ListVariable({ name  }) {
-    var ref, ref1, ref2, ref3;
-    const ctx = (0, _context.useTemplateVariable)(name);
-    const definition = ctx.definition;
-    const variablesOptionsQuery = (0, _pluginSystem.useListVariablePluginValues)(definition);
-    const { setVariableValue , setVariableLoading , setVariableOptions  } = (0, _context.useTemplateVariableActions)();
-    const allowMultiple = (definition === null || definition === void 0 ? void 0 : definition.spec.allow_multiple) === true;
-    const allowAllValue = (definition === null || definition === void 0 ? void 0 : definition.spec.allow_all_value) === true;
-    var ref4;
-    const title = (ref4 = (ref = definition === null || definition === void 0 ? void 0 : definition.spec.display) === null || ref === void 0 ? void 0 : ref.name) !== null && ref4 !== void 0 ? ref4 : name;
-    (0, _react.useEffect)(()=>{
-        setVariableLoading(name, variablesOptionsQuery.isFetching);
-        if (variablesOptionsQuery.data) {
-            setVariableOptions(name, variablesOptionsQuery.data);
-        }
-    }, [
-        variablesOptionsQuery,
-        name,
-        setVariableLoading,
-        setVariableOptions
+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
     ]);
-    let value = (ref1 = ctx.state) === null || ref1 === void 0 ? void 0 : ref1.value;
-    const options = (ref2 = ctx.state) === null || ref2 === void 0 ? void 0 : ref2.options;
-    const loading = (ref3 = ctx.state) === null || ref3 === void 0 ? void 0 : ref3.loading;
+    const options = variablesOptionsQuery.data;
+    let value = state === null || state === void 0 ? void 0 : state.value;
     // Make sure value is an array if allowMultiple is true
     if (allowMultiple && !Array.isArray(value)) {
         value = typeof value === 'string' ? [
             value
         ] : [];
     }
-    const finalOptions = (0, _react.useMemo)(()=>{
-        let computedOptions = options ? [
+    // Sort the provided list of options according to the method defined
+    const sortedOptions = (0, _react.useMemo)(()=>{
+        const opts = options ? [
             ...options
         ] : [];
+        if (!sort || sort === 'none') return opts;
+        switch(sort){
+            case 'alphabetical-asc':
+                return opts.sort((a, b)=>a.label > b.label ? 1 : -1);
+            case 'alphabetical-desc':
+                return opts.sort((a, b)=>a.label > b.label ? -1 : 1);
+            case 'numerical-asc':
+                return opts.sort((a, b)=>parseInt(a.label) > parseInt(b.label) ? 1 : -1);
+            case 'numerical-desc':
+                return opts.sort((a, b)=>parseInt(a.label) < parseInt(b.label) ? 1 : -1);
+            case 'alphabetical-ci-asc':
+                return opts.sort((a, b)=>a.label.toLowerCase() > b.label.toLowerCase() ? 1 : -1);
+            case 'alphabetical-ci-desc':
+                return opts.sort((a, b)=>a.label.toLowerCase() > b.label.toLowerCase() ? -1 : 1);
+            default:
+                return opts;
+        }
+    }, [
+        options,
+        sort
+    ]);
+    const viewOptions = (0, _react.useMemo)(()=>{
+        let computedOptions = sortedOptions;
         // Add the all value if it's allowed
         if (allowAllValue) {
             computedOptions = [
@@ -91,104 +124,220 @@ function ListVariable({ name  }) {
         }
         return computedOptions;
     }, [
-        options,
-        allowAllValue
+        allowAllValue,
+        sortedOptions
     ]);
-    const valueIsInOptions = (0, _react.useMemo)(()=>Boolean(finalOptions.find((v)=>{
+    const valueIsInOptions = (0, _react.useMemo)(()=>Boolean(viewOptions.find((v)=>{
             if (allowMultiple) {
                 return value.includes(v.value);
             }
             return value === v.value;
         })), [
-        finalOptions,
+        viewOptions,
         value,
         allowMultiple
     ]);
-    let selectValue = value;
-    if (!valueIsInOptions) {
-        selectValue = 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;
+        // 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) {
+                return allowMultiple ? [
+                    firstOptionValue
+                ] : firstOptionValue;
+            }
+        }
+        return value;
+    }, [
+        viewOptions,
+        value,
+        valueIsInOptions,
+        allowMultiple,
+        allowAllValue
+    ]);
+    const selectedOptions = (0, _react.useMemo)(()=>{
+        // In the case Autocomplete.multiple equals false, Autocomplete.value expects a single object, not
+        // 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);
+            });
+        } else {
+            var _viewOptions_find;
+            return (_viewOptions_find = viewOptions.find((o)=>{
+                return value === o.value;
+            })) !== null && _viewOptions_find !== void 0 ? _viewOptions_find : {
+                value: '',
+                label: ''
+            };
+        }
+    }, [
+        value,
+        viewOptions
+    ]);
+    return {
+        value,
+        loading,
+        options,
+        selectedOptions,
+        viewOptions
+    };
+}
+const StyledPopper = (props)=>/*#__PURE__*/ (0, _jsxruntime.jsx)(_material.Popper, {
+        ...props,
+        sx: {
+            minWidth: 'fit-content'
+        },
+        placement: "bottom-start"
+    });
+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;
+    } else {
+        return width;
     }
+};
+function ListVariable({ name , source  }) {
+    var _definition_spec_display;
+    const ctx = (0, _context.useTemplateVariable)(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;
+    // Update value when changed
     (0, _react.useEffect)(()=>{
-        const firstOption = finalOptions === null || finalOptions === void 0 ? void 0 : finalOptions[0];
-        // If there is no value but there are options, set the value to the first option.
-        if (!value && firstOption) {
-            setVariableValue(name, firstOption.value);
+        if (value) {
+            setVariableValue(name, value, source);
         }
     }, [
-        finalOptions,
         setVariableValue,
+        name,
         value,
+        source
+    ]);
+    // Update loading when changed
+    (0, _react.useEffect)(()=>{
+        setVariableLoading(name, loading, source);
+    }, [
+        setVariableLoading,
         name,
-        allowMultiple
+        loading,
+        source
     ]);
-    return /*#__PURE__*/ (0, _jsxRuntime.jsx)(_material.Box, {
-        display: 'flex',
-        children: /*#__PURE__*/ (0, _jsxRuntime.jsxs)(_material.FormControl, {
-            fullWidth: true,
-            children: [
-                /*#__PURE__*/ (0, _jsxRuntime.jsx)(_material.InputLabel, {
-                    id: name,
-                    children: title
-                }),
-                /*#__PURE__*/ (0, _jsxRuntime.jsxs)(_material.Select, {
-                    sx: {
-                        minWidth: 100,
-                        maxWidth: 250
-                    },
-                    id: name,
-                    label: title,
-                    value: selectValue,
-                    onChange: (e)=>{
-                        // Must be selected
-                        if (e.target.value === null || e.target.value.length === 0) {
-                            if (allowAllValue) {
-                                setVariableValue(name, _core.DEFAULT_ALL_VALUE);
-                            }
-                            return;
+    // Update options when changed
+    (0, _react.useEffect)(()=>{
+        if (options) {
+            setVariableOptions(name, options, source);
+        }
+    }, [
+        setVariableOptions,
+        name,
+        options,
+        source
+    ]);
+    return /*#__PURE__*/ (0, _jsxruntime.jsxs)(_jsxruntime.Fragment, {
+        children: [
+            /*#__PURE__*/ (0, _jsxruntime.jsx)(_material.Autocomplete, {
+                disablePortal: true,
+                disableCloseOnSelect: allowMultiple,
+                multiple: allowMultiple,
+                fullWidth: true,
+                limitTags: 3,
+                size: "small",
+                disableClearable: true,
+                PopperComponent: StyledPopper,
+                renderInput: (params)=>{
+                    return allowMultiple ? /*#__PURE__*/ (0, _jsxruntime.jsx)(_material.TextField, {
+                        ...params,
+                        label: title
+                    }) : /*#__PURE__*/ (0, _jsxruntime.jsx)(_material.TextField, {
+                        ...params,
+                        label: title,
+                        style: {
+                            width: `${inputWidth}px`
                         }
-                        setVariableValue(name, e.target.value);
+                    });
+                },
+                sx: {
+                    '& .MuiInputBase-root': {
+                        minHeight: '38px'
                     },
-                    multiple: allowMultiple,
-                    children: [
-                        loading && /*#__PURE__*/ (0, _jsxRuntime.jsx)(_material.MenuItem, {
-                            value: "loading",
-                            disabled: true,
-                            children: "Loading"
-                        }),
-                        finalOptions.length === 0 && /*#__PURE__*/ (0, _jsxRuntime.jsx)(_material.MenuItem, {
-                            value: "empty",
-                            disabled: true,
-                            children: "No options"
-                        }),
-                        finalOptions.map((option)=>/*#__PURE__*/ (0, _jsxRuntime.jsx)(_material.MenuItem, {
-                                value: option.value,
-                                children: option.label
-                            }, option.value))
-                    ]
-                }),
-                loading && /*#__PURE__*/ (0, _jsxRuntime.jsx)(_material.LinearProgress, {})
-            ]
-        })
+                    '& .MuiInputBase-root.MuiOutlinedInput-root.MuiInputBase-sizeSmall': {
+                        paddingY: '5px',
+                        paddingLeft: '5px'
+                    }
+                },
+                value: selectedOptions,
+                onChange: (_, value)=>{
+                    if ((value === null || Array.isArray(value) && value.length === 0) && allowAllValue) {
+                        setVariableValue(name, _core.DEFAULT_ALL_VALUE, source);
+                    } else {
+                        setVariableValue(name, variableOptionToVariableValue(value), source);
+                    }
+                },
+                inputValue: inputValue,
+                onInputChange: (_, newInputValue)=>{
+                    setInputValue(newInputValue);
+                    if (!allowMultiple) {
+                        setInputWidth(getWidthPx(newInputValue, 'list'));
+                    }
+                },
+                options: viewOptions
+            }),
+            loading && /*#__PURE__*/ (0, _jsxruntime.jsx)(_material.LinearProgress, {})
+        ]
     });
 }
-function TextVariable({ name  }) {
-    var ref;
-    const { state , definition  } = (0, _context.useTemplateVariable)(name);
-    var ref1;
-    const [tempValue, setTempValue] = (0, _react.useState)((ref1 = state === null || state === void 0 ? void 0 : state.value) !== null && ref1 !== void 0 ? ref1 : '');
+function TextVariable({ name , source  }) {
+    var _definition_spec_display;
+    const ctx = (0, _context.useTemplateVariable)(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 [inputWidth, setInputWidth] = (0, _react.useState)(getWidthPx(tempValue, 'text'));
     const { setVariableValue  } = (0, _context.useTemplateVariableActions)();
     (0, _react.useEffect)(()=>{
-        var ref;
-        setTempValue((ref = state === null || state === void 0 ? void 0 : state.value) !== null && ref !== void 0 ? ref : '');
+        var _state_value;
+        setTempValue((_state_value = state === null || state === void 0 ? void 0 : state.value) !== null && _state_value !== void 0 ? _state_value : '');
     }, [
         state === null || state === void 0 ? void 0 : state.value
     ]);
-    var ref2;
-    return /*#__PURE__*/ (0, _jsxRuntime.jsx)(_material.TextField, {
+    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),
-        onBlur: ()=>setVariableValue(name, 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: (ref2 = (ref = definition === null || definition === void 0 ? void 0 : definition.spec.display) === null || ref === void 0 ? void 0 : ref.name) !== null && ref2 !== void 0 ? ref2 : 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
+        },
+        sx: {
+            width: `${inputWidth}px`,
+            '& .MuiInputBase-root': {
+                minHeight: '38px'
+            },
+            '& .MuiInputBase-input': {
+                textOverflow: 'ellipsis'
+            }
+        }
     });
 }