@perses-dev/dashboards 0.0.0-snapshot-panel-extra-content-3-17f9c42 → 0.0.0-snapshot-scatterplot-fix-imports-95e1b59

package/dist/components/Variables/TemplateVariable.js

@@ -10,16 +10,28 @@
 // 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.
-import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
+import { jsx as _jsx, jsxs as _jsxs, Fragment as _Fragment } from "react/jsx-runtime";
 import { useEffect, useMemo, useState } from 'react';
-import { Select, FormControl, InputLabel, MenuItem, Box, LinearProgress, TextField } from '@mui/material';
+import { LinearProgress, TextField, Autocomplete, Popper } from '@mui/material';
 import { DEFAULT_ALL_VALUE } from '@perses-dev/core';
 import { useListVariablePluginValues } from '@perses-dev/plugin-system';
 import { useTemplateVariable, useTemplateVariableActions } from '../../context';
-export function TemplateVariable({ name , source  }) {
-    var ref;
+import { MAX_TEMPLATE_VARIABLE_WIDTH, MIN_TEMPLATE_VARIABLE_WIDTH } from '../../constants';
+function variableOptionToVariableValue(options) {
+    if (options === null) {
+        return null;
+    }
+    if (Array.isArray(options)) {
+        return options.map((v)=>{
+            return v.value;
+        });
+    }
+    return options.value;
+}
+export function TemplateVariable({ name, source }) {
+    var _ctx_definition;
     const ctx = useTemplateVariable(name, source);
-    const kind = (ref = ctx.definition) === null || ref === void 0 ? void 0 : ref.kind;
+    const kind = (_ctx_definition = ctx.definition) === null || _ctx_definition === void 0 ? void 0 : _ctx_definition.kind;
     switch(kind){
         case 'TextVariable':
             return /*#__PURE__*/ _jsx(TextVariable, {
@@ -39,41 +51,57 @@ export function TemplateVariable({ name , source  }) {
         ]
     });
 }
-function ListVariable({ name , source  }) {
-    var ref, ref1, ref2, ref3;
-    const ctx = useTemplateVariable(name, source);
-    const definition = ctx.definition;
-    const variablesOptionsQuery = useListVariablePluginValues(definition);
-    const { setVariableValue , setVariableLoading , setVariableOptions  } = 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;
-    useEffect(()=>{
-        setVariableLoading(name, variablesOptionsQuery.isFetching, source);
-        if (variablesOptionsQuery.data) {
-            setVariableOptions(name, variablesOptionsQuery.data, source);
-        }
+export 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 = useMemo(()=>{
+        var _variablesOptionsQuery_isFetching;
+        return (_variablesOptionsQuery_isFetching = variablesOptionsQuery.isFetching) !== null && _variablesOptionsQuery_isFetching !== void 0 ? _variablesOptionsQuery_isFetching : false;
     }, [
-        variablesOptionsQuery,
-        name,
-        setVariableLoading,
-        setVariableOptions,
-        source
+        variablesOptionsQuery.isFetching
+    ]);
+    const options = useMemo(()=>{
+        var _variablesOptionsQuery_data;
+        return (_variablesOptionsQuery_data = variablesOptionsQuery.data) !== null && _variablesOptionsQuery_data !== void 0 ? _variablesOptionsQuery_data : [];
+    }, [
+        variablesOptionsQuery.data
     ]);
-    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;
+    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 = useMemo(()=>{
-        let computedOptions = options ? [
+    // Sort the provided list of options according to the method defined
+    const sortedOptions = 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 = useMemo(()=>{
+        let computedOptions = sortedOptions;
         // Add the all value if it's allowed
         if (allowAllValue) {
             computedOptions = [
@@ -86,106 +114,222 @@ function ListVariable({ name , source  }) {
         }
         return computedOptions;
     }, [
-        options,
-        allowAllValue
+        allowAllValue,
+        sortedOptions
     ]);
-    const valueIsInOptions = useMemo(()=>Boolean(finalOptions.find((v)=>{
+    const valueIsInOptions = 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 = 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 = 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__*/ _jsx(Popper, {
+        placeholder: undefined,
+        ...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 < MIN_TEMPLATE_VARIABLE_WIDTH) {
+        return MIN_TEMPLATE_VARIABLE_WIDTH;
+    } else if (width > MAX_TEMPLATE_VARIABLE_WIDTH) {
+        return MAX_TEMPLATE_VARIABLE_WIDTH;
+    } else {
+        return width;
     }
+};
+function ListVariable({ name, source }) {
+    var _definition_spec_display;
+    const ctx = useTemplateVariable(name, source);
+    const definition = ctx.definition;
+    const variablesOptionsQuery = useListVariablePluginValues(definition);
+    const { setVariableValue, setVariableLoading, setVariableOptions } = useTemplateVariableActions();
+    const { selectedOptions, value, loading, options, viewOptions } = useListVariableState(definition === null || definition === void 0 ? void 0 : definition.spec, ctx.state, variablesOptionsQuery);
+    const [inputValue, setInputValue] = useState('');
+    const [inputWidth, setInputWidth] = useState(MIN_TEMPLATE_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;
+    // Update value when changed
     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, source);
+        if (value) {
+            setVariableValue(name, value, source);
         }
     }, [
-        finalOptions,
         setVariableValue,
+        name,
         value,
+        source
+    ]);
+    // Update loading when changed
+    useEffect(()=>{
+        setVariableLoading(name, loading, source);
+    }, [
+        setVariableLoading,
         name,
-        allowMultiple,
+        loading,
         source
     ]);
-    return /*#__PURE__*/ _jsx(Box, {
-        display: 'flex',
-        children: /*#__PURE__*/ _jsxs(FormControl, {
-            fullWidth: true,
-            children: [
-                /*#__PURE__*/ _jsx(InputLabel, {
-                    id: name,
-                    children: title
-                }),
-                /*#__PURE__*/ _jsxs(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, DEFAULT_ALL_VALUE, source);
-                            }
-                            return;
+    // Update options when changed
+    useEffect(()=>{
+        if (options) {
+            setVariableOptions(name, options, source);
+        }
+    }, [
+        setVariableOptions,
+        name,
+        options,
+        source
+    ]);
+    return /*#__PURE__*/ _jsxs(_Fragment, {
+        children: [
+            /*#__PURE__*/ _jsx(Autocomplete, {
+                disablePortal: true,
+                disableCloseOnSelect: allowMultiple,
+                multiple: allowMultiple,
+                fullWidth: true,
+                limitTags: 3,
+                size: "small",
+                disableClearable: true,
+                PopperComponent: StyledPopper,
+                renderInput: (params)=>{
+                    return allowMultiple ? /*#__PURE__*/ _jsx(TextField, {
+                        ...params,
+                        label: title
+                    }) : /*#__PURE__*/ _jsx(TextField, {
+                        ...params,
+                        label: title,
+                        style: {
+                            width: `${inputWidth}px`
                         }
-                        setVariableValue(name, e.target.value, source);
+                    });
+                },
+                sx: {
+                    '& .MuiInputBase-root': {
+                        minHeight: '38px'
                     },
-                    multiple: allowMultiple,
-                    children: [
-                        loading && /*#__PURE__*/ _jsx(MenuItem, {
-                            value: "loading",
-                            disabled: true,
-                            children: "Loading"
-                        }),
-                        finalOptions.length === 0 && /*#__PURE__*/ _jsx(MenuItem, {
-                            value: "empty",
-                            disabled: true,
-                            children: "No options"
-                        }),
-                        finalOptions.map((option)=>/*#__PURE__*/ _jsx(MenuItem, {
-                                value: option.value,
-                                children: option.label
-                            }, option.value))
-                    ]
-                }),
-                loading && /*#__PURE__*/ _jsx(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, 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__*/ _jsx(LinearProgress, {})
+        ]
     });
 }
-function TextVariable({ name , source  }) {
-    var ref;
-    const { state , definition  } = useTemplateVariable(name, source);
-    var ref1;
-    const [tempValue, setTempValue] = useState((ref1 = state === null || state === void 0 ? void 0 : state.value) !== null && ref1 !== void 0 ? ref1 : '');
-    const { setVariableValue  } = useTemplateVariableActions();
+function TextVariable({ name, source }) {
+    var _definition_spec_display;
+    const ctx = useTemplateVariable(name, source);
+    const state = ctx.state;
+    const definition = ctx.definition;
+    var _state_value;
+    const [tempValue, setTempValue] = useState((_state_value = state === null || state === void 0 ? void 0 : state.value) !== null && _state_value !== void 0 ? _state_value : '');
+    const [inputWidth, setInputWidth] = useState(getWidthPx(tempValue, 'text'));
+    const { setVariableValue } = useTemplateVariableActions();
     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;
+    var _definition_spec_display_name, _definition_spec_constant;
     return /*#__PURE__*/ _jsx(TextField, {
+        title: tempValue,
         value: tempValue,
-        onChange: (e)=>setTempValue(e.target.value),
+        //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 === 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
+        },
+        sx: {
+            width: `${inputWidth}px`,
+            '& .MuiInputBase-root': {
+                minHeight: '38px'
+            },
+            '& .MuiInputBase-input': {
+                textOverflow: 'ellipsis'
+            }
+        }
     });
 }
 

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

@@ -1 +1 @@
-{"version":3,"sources":["../../../src/components/Variables/TemplateVariable.tsx"],"sourcesContent":["// Copyright 2023 The Perses Authors\n// Licensed under the Apache License, Version 2.0 (the \"License\");\n// you may not use this file except in compliance with the License.\n// You may obtain a copy of the License at\n//\n// http://www.apache.org/licenses/LICENSE-2.0\n//\n// Unless required by applicable law or agreed to in writing, software\n// distributed under the License is distributed on an \"AS IS\" BASIS,\n// WITHOUT WARRANTIES OR CONDITIONS OF ANY KIND, either express or implied.\n// See the License for the specific language governing permissions and\n// limitations under the License.\n\nimport { useEffect, useMemo, useState } from 'react';\nimport { Select, FormControl, InputLabel, MenuItem, Box, LinearProgress, TextField } from '@mui/material';\nimport { DEFAULT_ALL_VALUE, ListVariableDefinition, VariableName, VariableValue } from '@perses-dev/core';\nimport { useListVariablePluginValues } from '@perses-dev/plugin-system';\nimport { useTemplateVariable, useTemplateVariableActions } from '../../context';\n\ntype TemplateVariableProps = {\n  name: VariableName;\n  source?: string;\n};\n\nexport function TemplateVariable({ name, source }: TemplateVariableProps) {\n  const ctx = useTemplateVariable(name, source);\n  const kind = ctx.definition?.kind;\n  switch (kind) {\n    case 'TextVariable':\n      return <TextVariable name={name} source={source} />;\n    case 'ListVariable':\n      return <ListVariable name={name} source={source} />;\n  }\n\n  return <div>Unsupported Variable Kind: ${kind}</div>;\n}\n\nfunction ListVariable({ name, source }: TemplateVariableProps) {\n  const ctx = useTemplateVariable(name, source);\n  const definition = ctx.definition as ListVariableDefinition;\n  const variablesOptionsQuery = useListVariablePluginValues(definition);\n  const { setVariableValue, setVariableLoading, setVariableOptions } = useTemplateVariableActions();\n\n  const allowMultiple = definition?.spec.allow_multiple === true;\n  const allowAllValue = definition?.spec.allow_all_value === true;\n  const title = definition?.spec.display?.name ?? name;\n\n  useEffect(() => {\n    setVariableLoading(name, variablesOptionsQuery.isFetching, source);\n    if (variablesOptionsQuery.data) {\n      setVariableOptions(name, variablesOptionsQuery.data, source);\n    }\n  }, [variablesOptionsQuery, name, setVariableLoading, setVariableOptions, source]);\n\n  let value = ctx.state?.value;\n  const options = ctx.state?.options;\n  const loading = ctx.state?.loading;\n\n  // Make sure value is an array if allowMultiple is true\n  if (allowMultiple && !Array.isArray(value)) {\n    value = typeof value === 'string' ? [value] : [];\n  }\n\n  const finalOptions = useMemo(() => {\n    let computedOptions = options ? [...options] : [];\n\n    // Add the all value if it's allowed\n    if (allowAllValue) {\n      computedOptions = [{ value: DEFAULT_ALL_VALUE, label: 'All' }, ...computedOptions];\n    }\n    return computedOptions;\n  }, [options, allowAllValue]);\n\n  const valueIsInOptions = useMemo(\n    () =>\n      Boolean(\n        finalOptions.find((v) => {\n          if (allowMultiple) {\n            return (value as string[]).includes(v.value);\n          }\n          return value === v.value;\n        })\n      ),\n    [finalOptions, value, allowMultiple]\n  );\n\n  let selectValue = value;\n  if (!valueIsInOptions) {\n    selectValue = allowMultiple ? [] : '';\n  }\n\n  useEffect(() => {\n    const firstOption = finalOptions?.[0];\n\n    // If there is no value but there are options, set the value to the first option.\n    if (!value && firstOption) {\n      setVariableValue(name, firstOption.value, source);\n    }\n  }, [finalOptions, setVariableValue, value, name, allowMultiple, source]);\n\n  return (\n    <Box display={'flex'}>\n      <FormControl fullWidth>\n        <InputLabel id={name}>{title}</InputLabel>\n        <Select\n          sx={{ minWidth: 100, maxWidth: 250 }}\n          id={name}\n          label={title}\n          value={selectValue}\n          onChange={(e) => {\n            // Must be selected\n            if (e.target.value === null || e.target.value.length === 0) {\n              if (allowAllValue) {\n                setVariableValue(name, DEFAULT_ALL_VALUE, source);\n              }\n              return;\n            }\n            setVariableValue(name, e.target.value as VariableValue, source);\n          }}\n          multiple={allowMultiple}\n        >\n          {loading && (\n            <MenuItem value=\"loading\" disabled>\n              Loading\n            </MenuItem>\n          )}\n\n          {finalOptions.length === 0 && (\n            <MenuItem value=\"empty\" disabled>\n              No options\n            </MenuItem>\n          )}\n          {finalOptions.map((option) => (\n            <MenuItem key={option.value} value={option.value}>\n              {option.label}\n            </MenuItem>\n          ))}\n        </Select>\n        {loading && <LinearProgress />}\n      </FormControl>\n    </Box>\n  );\n}\n\nfunction TextVariable({ name, source }: TemplateVariableProps) {\n  const { state, definition } = useTemplateVariable(name, source);\n  const [tempValue, setTempValue] = useState(state?.value ?? '');\n  const { setVariableValue } = useTemplateVariableActions();\n\n  useEffect(() => {\n    setTempValue(state?.value ?? '');\n  }, [state?.value]);\n\n  return (\n    <TextField\n      value={tempValue}\n      onChange={(e) => setTempValue(e.target.value)}\n      onBlur={() => setVariableValue(name, tempValue, source)}\n      placeholder={name}\n      label={definition?.spec.display?.name ?? name}\n    />\n  );\n}\n"],"names":["useEffect","useMemo","useState","Select","FormControl","InputLabel","MenuItem","Box","LinearProgress","TextField","DEFAULT_ALL_VALUE","useListVariablePluginValues","useTemplateVariable","useTemplateVariableActions","TemplateVariable","name","source","ctx","kind","definition","TextVariable","ListVariable","div","variablesOptionsQuery","setVariableValue","setVariableLoading","setVariableOptions","allowMultiple","spec","allow_multiple","allowAllValue","allow_all_value","title","display","isFetching","data","value","state","options","loading","Array","isArray","finalOptions","computedOptions","label","valueIsInOptions","Boolean","find","v","includes","selectValue","firstOption","fullWidth","id","sx","minWidth","maxWidth","onChange","e","target","length","multiple","disabled","map","option","tempValue","setTempValue","onBlur","placeholder"],"mappings":"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"}
+{"version":3,"sources":["../../../src/components/Variables/TemplateVariable.tsx"],"sourcesContent":["// Copyright 2023 The Perses Authors\n// Licensed under the Apache License, Version 2.0 (the \"License\");\n// you may not use this file except in compliance with the License.\n// You may obtain a copy of the License at\n//\n// http://www.apache.org/licenses/LICENSE-2.0\n//\n// Unless required by applicable law or agreed to in writing, software\n// distributed under the License is distributed on an \"AS IS\" BASIS,\n// WITHOUT WARRANTIES OR CONDITIONS OF ANY KIND, either express or implied.\n// See the License for the specific language governing permissions and\n// limitations under the License.\n\nimport { useEffect, useMemo, useState } from 'react';\nimport { LinearProgress, TextField, Autocomplete, Popper, PopperProps } from '@mui/material';\nimport {\n  DEFAULT_ALL_VALUE,\n  ListVariableDefinition,\n  ListVariableSpec,\n  TextVariableDefinition,\n  UnknownSpec,\n  VariableName,\n  VariableValue,\n} from '@perses-dev/core';\nimport { useListVariablePluginValues, VariableOption, VariableState } from '@perses-dev/plugin-system';\nimport { UseQueryResult } from '@tanstack/react-query';\nimport { useTemplateVariable, useTemplateVariableActions } from '../../context';\nimport { MAX_TEMPLATE_VARIABLE_WIDTH, MIN_TEMPLATE_VARIABLE_WIDTH } from '../../constants';\n\ntype TemplateVariableProps = {\n  name: VariableName;\n  source?: string;\n};\n\nfunction variableOptionToVariableValue(options: VariableOption | VariableOption[] | null): VariableValue {\n  if (options === null) {\n    return null;\n  }\n  if (Array.isArray(options)) {\n    return options.map((v) => {\n      return v.value;\n    });\n  }\n  return options.value;\n}\n\nexport function TemplateVariable({ name, source }: TemplateVariableProps) {\n  const ctx = useTemplateVariable(name, source);\n  const kind = ctx.definition?.kind;\n  switch (kind) {\n    case 'TextVariable':\n      return <TextVariable name={name} source={source} />;\n    case 'ListVariable':\n      return <ListVariable name={name} source={source} />;\n  }\n\n  return <div>Unsupported Variable Kind: ${kind}</div>;\n}\n\nexport function useListVariableState(\n  spec: ListVariableSpec<UnknownSpec> | undefined,\n  state: VariableState | undefined,\n  variablesOptionsQuery: Partial<UseQueryResult<VariableOption[]>>\n): {\n  // Value, Loading, Options are modified only when we want to save the changes made\n  value: VariableValue | undefined;\n  loading: boolean;\n  options: VariableOption[] | undefined;\n  // selectedOptions is/are the option(s) selected in the view\n  selectedOptions: VariableOption | VariableOption[];\n  // viewOptions are the options used in the view only (= options + All if allowed)\n  viewOptions: VariableOption[];\n} {\n  const allowMultiple = spec?.allowMultiple === true;\n  const allowAllValue = spec?.allowAllValue === true;\n  const sort = spec?.sort;\n  const loading = useMemo(() => variablesOptionsQuery.isFetching ?? false, [variablesOptionsQuery.isFetching]);\n  const options = useMemo(() => variablesOptionsQuery.data ?? [], [variablesOptionsQuery.data]);\n\n  let value = state?.value;\n\n  // Make sure value is an array if allowMultiple is true\n  if (allowMultiple && !Array.isArray(value)) {\n    value = typeof value === 'string' ? [value] : [];\n  }\n\n  // Sort the provided list of options according to the method defined\n  const sortedOptions = useMemo((): VariableOption[] => {\n    const opts = options ? [...options] : [];\n\n    if (!sort || sort === 'none') return opts;\n\n    switch (sort) {\n      case 'alphabetical-asc':\n        return opts.sort((a, b) => (a.label > b.label ? 1 : -1));\n      case 'alphabetical-desc':\n        return opts.sort((a, b) => (a.label > b.label ? -1 : 1));\n      case 'numerical-asc':\n        return opts.sort((a, b) => (parseInt(a.label) > parseInt(b.label) ? 1 : -1));\n      case 'numerical-desc':\n        return opts.sort((a, b) => (parseInt(a.label) < parseInt(b.label) ? 1 : -1));\n      case 'alphabetical-ci-asc':\n        return opts.sort((a, b) => (a.label.toLowerCase() > b.label.toLowerCase() ? 1 : -1));\n      case 'alphabetical-ci-desc':\n        return opts.sort((a, b) => (a.label.toLowerCase() > b.label.toLowerCase() ? -1 : 1));\n      default:\n        return opts;\n    }\n  }, [options, sort]);\n\n  const viewOptions = useMemo(() => {\n    let computedOptions = sortedOptions;\n\n    // Add the all value if it's allowed\n    if (allowAllValue) {\n      computedOptions = [{ value: DEFAULT_ALL_VALUE, label: 'All' }, ...computedOptions];\n    }\n    return computedOptions;\n  }, [allowAllValue, sortedOptions]);\n\n  const valueIsInOptions = useMemo(\n    () =>\n      Boolean(\n        viewOptions.find((v) => {\n          if (allowMultiple) {\n            return (value as string[]).includes(v.value);\n          }\n          return value === v.value;\n        })\n      ),\n    [viewOptions, value, allowMultiple]\n  );\n\n  value = useMemo(() => {\n    const firstOptionValue = viewOptions?.[allowAllValue ? 1 : 0]?.value;\n\n    // If there is no value but there are options, or the value is not in options, we set the value to the first option.\n    if (firstOptionValue) {\n      if (!valueIsInOptions || !value || value.length === 0) {\n        return allowMultiple ? [firstOptionValue] : firstOptionValue;\n      }\n    }\n\n    return value;\n  }, [viewOptions, value, valueIsInOptions, allowMultiple, allowAllValue]);\n\n  const selectedOptions = useMemo(() => {\n    // In the case Autocomplete.multiple equals false, Autocomplete.value expects a single object, not\n    // an array, hence this conditional\n    if (Array.isArray(value)) {\n      return viewOptions.filter((o) => {\n        return value?.includes(o.value);\n      });\n    } else {\n      return (\n        viewOptions.find((o) => {\n          return value === o.value;\n        }) ?? { value: '', label: '' }\n      );\n    }\n  }, [value, viewOptions]);\n\n  return { value, loading, options, selectedOptions, viewOptions };\n}\n\nconst StyledPopper = (props: PopperProps) => (\n  <Popper placeholder={undefined} {...props} sx={{ minWidth: 'fit-content' }} placement=\"bottom-start\" />\n);\n\nconst LETTER_HSIZE = 8; // approximation\nconst ARROW_OFFSET = 40; // right offset for list variables (= take into account the dropdown toggle size)\nconst getWidthPx = (inputValue: string, kind: 'list' | 'text'): number => {\n  const width = (inputValue.length + 1) * LETTER_HSIZE + (kind == 'list' ? ARROW_OFFSET : 0);\n  if (width < MIN_TEMPLATE_VARIABLE_WIDTH) {\n    return MIN_TEMPLATE_VARIABLE_WIDTH;\n  } else if (width > MAX_TEMPLATE_VARIABLE_WIDTH) {\n    return MAX_TEMPLATE_VARIABLE_WIDTH;\n  } else {\n    return width;\n  }\n};\n\nfunction ListVariable({ name, source }: TemplateVariableProps) {\n  const ctx = useTemplateVariable(name, source);\n  const definition = ctx.definition as ListVariableDefinition;\n  const variablesOptionsQuery = useListVariablePluginValues(definition);\n  const { setVariableValue, setVariableLoading, setVariableOptions } = useTemplateVariableActions();\n  const { selectedOptions, value, loading, options, viewOptions } = useListVariableState(\n    definition?.spec,\n    ctx.state,\n    variablesOptionsQuery\n  );\n  const [inputValue, setInputValue] = useState<string>('');\n  const [inputWidth, setInputWidth] = useState(MIN_TEMPLATE_VARIABLE_WIDTH);\n\n  const title = definition?.spec.display?.name ?? name;\n  const allowMultiple = definition?.spec.allowMultiple === true;\n  const allowAllValue = definition?.spec.allowAllValue === true;\n\n  // Update value when changed\n  useEffect(() => {\n    if (value) {\n      setVariableValue(name, value, source);\n    }\n  }, [setVariableValue, name, value, source]);\n\n  // Update loading when changed\n  useEffect(() => {\n    setVariableLoading(name, loading, source);\n  }, [setVariableLoading, name, loading, source]);\n\n  // Update options when changed\n  useEffect(() => {\n    if (options) {\n      setVariableOptions(name, options, source);\n    }\n  }, [setVariableOptions, name, options, source]);\n\n  return (\n    <>\n      <Autocomplete\n        disablePortal\n        disableCloseOnSelect={allowMultiple}\n        multiple={allowMultiple}\n        fullWidth\n        limitTags={3}\n        size=\"small\"\n        disableClearable\n        PopperComponent={StyledPopper}\n        renderInput={(params) => {\n          return allowMultiple ? (\n            <TextField {...params} label={title} />\n          ) : (\n            <TextField {...params} label={title} style={{ width: `${inputWidth}px` }} />\n          );\n        }}\n        sx={{\n          '& .MuiInputBase-root': {\n            minHeight: '38px',\n          },\n          '& .MuiInputBase-root.MuiOutlinedInput-root.MuiInputBase-sizeSmall': {\n            paddingY: '5px',\n            paddingLeft: '5px',\n          },\n        }}\n        value={selectedOptions}\n        onChange={(_, value) => {\n          if ((value === null || (Array.isArray(value) && value.length === 0)) && allowAllValue) {\n            setVariableValue(name, DEFAULT_ALL_VALUE, source);\n          } else {\n            setVariableValue(name, variableOptionToVariableValue(value), source);\n          }\n        }}\n        inputValue={inputValue}\n        onInputChange={(_, newInputValue) => {\n          setInputValue(newInputValue);\n          if (!allowMultiple) {\n            setInputWidth(getWidthPx(newInputValue, 'list'));\n          }\n        }}\n        options={viewOptions}\n      />\n      {loading && <LinearProgress />}\n    </>\n  );\n}\n\nfunction TextVariable({ name, source }: TemplateVariableProps) {\n  const ctx = useTemplateVariable(name, source);\n  const state = ctx.state;\n  const definition = ctx.definition as TextVariableDefinition;\n  const [tempValue, setTempValue] = useState(state?.value ?? '');\n  const [inputWidth, setInputWidth] = useState(getWidthPx(tempValue as string, 'text'));\n  const { setVariableValue } = useTemplateVariableActions();\n\n  useEffect(() => {\n    setTempValue(state?.value ?? '');\n  }, [state?.value]);\n\n  return (\n    <TextField\n      title={tempValue as string}\n      value={tempValue}\n      //onChange={(e) => setTempValue(e.target.value)}\n      onChange={(e) => {\n        setTempValue(e.target.value);\n        setInputWidth(getWidthPx(e.target.value, 'text'));\n      }}\n      onBlur={() => setVariableValue(name, tempValue, source)}\n      placeholder={name}\n      label={definition?.spec.display?.name ?? name}\n      InputProps={{\n        readOnly: definition?.spec.constant ?? false,\n      }}\n      sx={{\n        width: `${inputWidth}px`,\n        '& .MuiInputBase-root': {\n          minHeight: '38px',\n        },\n        '& .MuiInputBase-input': {\n          textOverflow: 'ellipsis',\n        },\n      }}\n    />\n  );\n}\n"],"names":["useEffect","useMemo","useState","LinearProgress","TextField","Autocomplete","Popper","DEFAULT_ALL_VALUE","useListVariablePluginValues","useTemplateVariable","useTemplateVariableActions","MAX_TEMPLATE_VARIABLE_WIDTH","MIN_TEMPLATE_VARIABLE_WIDTH","variableOptionToVariableValue","options","Array","isArray","map","v","value","TemplateVariable","name","source","ctx","kind","definition","TextVariable","ListVariable","div","useListVariableState","spec","state","variablesOptionsQuery","allowMultiple","allowAllValue","sort","loading","isFetching","data","sortedOptions","opts","a","b","label","parseInt","toLowerCase","viewOptions","computedOptions","valueIsInOptions","Boolean","find","includes","firstOptionValue","length","selectedOptions","filter","o","StyledPopper","props","placeholder","undefined","sx","minWidth","placement","LETTER_HSIZE","ARROW_OFFSET","getWidthPx","inputValue","width","setVariableValue","setVariableLoading","setVariableOptions","setInputValue","inputWidth","setInputWidth","title","display","disablePortal","disableCloseOnSelect","multiple","fullWidth","limitTags","size","disableClearable","PopperComponent","renderInput","params","style","minHeight","paddingY","paddingLeft","onChange","_","onInputChange","newInputValue","tempValue","setTempValue","e","target","onBlur","InputProps","readOnly","constant","textOverflow"],"mappings":"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"}

package/dist/components/Variables/VariableEditor.d.ts

@@ -1,15 +1,15 @@
-/// <reference types="react" />
-import { VariableDefinition } from '@perses-dev/core';
+import { BuiltinVariableDefinition, VariableDefinition } from '@perses-dev/core';
 import { VariableState } from '@perses-dev/plugin-system';
 import { ExternalVariableDefinition } from '../../context';
 export declare function VariableEditor(props: {
     variableDefinitions: VariableDefinition[];
     externalVariableDefinitions: ExternalVariableDefinition[];
+    builtinVariableDefinitions: BuiltinVariableDefinition[];
     onChange: (variableDefinitions: VariableDefinition[]) => void;
     onCancel: () => void;
-}): JSX.Element;
+}): import("react/jsx-runtime").JSX.Element;
 export declare function VariableName(props: {
     name: string;
     state: VariableState | undefined;
-}): JSX.Element;
+}): import("react/jsx-runtime").JSX.Element;
 //# sourceMappingURL=VariableEditor.d.ts.map

package/dist/components/Variables/VariableEditor.d.ts.map

@@ -1 +1 @@
-{"version":3,"file":"VariableEditor.d.ts","sourceRoot":"","sources":["../../../src/components/Variables/VariableEditor.tsx"],"names":[],"mappings":";AAiCA,OAAO,EAAE,kBAAkB,EAAE,MAAM,kBAAkB,CAAC;AAOtD,OAAO,EAA4B,aAAa,EAAkB,MAAM,2BAA2B,CAAC;AACpG,OAAO,EAAE,0BAA0B,EAAuC,MAAM,eAAe,CAAC;AAsBhG,wBAAgB,cAAc,CAAC,KAAK,EAAE;IACpC,mBAAmB,EAAE,kBAAkB,EAAE,CAAC;IAC1C,2BAA2B,EAAE,0BAA0B,EAAE,CAAC;IAC1D,QAAQ,EAAE,CAAC,mBAAmB,EAAE,kBAAkB,EAAE,KAAK,IAAI,CAAC;IAC9D,QAAQ,EAAE,MAAM,IAAI,CAAC;CACtB,eA8QA;AAMD,wBAAgB,YAAY,CAAC,KAAK,EAAE;IAAE,IAAI,EAAE,MAAM,CAAC;IAAC,KAAK,EAAE,aAAa,GAAG,SAAS,CAAA;CAAE,eAoBrF"}
+{"version":3,"file":"VariableEditor.d.ts","sourceRoot":"","sources":["../../../src/components/Variables/VariableEditor.tsx"],"names":[],"mappings":"AAoCA,OAAO,EAAU,yBAAyB,EAAE,kBAAkB,EAAE,MAAM,kBAAkB,CAAC;AAUzF,OAAO,EAAsB,aAAa,EAAkB,MAAM,2BAA2B,CAAC;AAE9F,OAAO,EAAE,0BAA0B,EAAuC,MAAM,eAAe,CAAC;AAuBhG,wBAAgB,cAAc,CAAC,KAAK,EAAE;IACpC,mBAAmB,EAAE,kBAAkB,EAAE,CAAC;IAC1C,2BAA2B,EAAE,0BAA0B,EAAE,CAAC;IAC1D,0BAA0B,EAAE,yBAAyB,EAAE,CAAC;IACxD,QAAQ,EAAE,CAAC,mBAAmB,EAAE,kBAAkB,EAAE,KAAK,IAAI,CAAC;IAC9D,QAAQ,EAAE,MAAM,IAAI,CAAC;CACtB,2CAmUA;AAMD,wBAAgB,YAAY,CAAC,KAAK,EAAE;IAAE,IAAI,EAAE,MAAM,CAAC;IAAC,KAAK,EAAE,aAAa,GAAG,SAAS,CAAA;CAAE,2CAoBrF"}