@grafana/scenes 4.25.0 → 4.26.0

package/dist/index.js

@@ -13,6 +13,7 @@ var schema = require('@grafana/schema');
 var ui = require('@grafana/ui');
 var css = require('@emotion/css');
 var e2eSelectors = require('@grafana/e2e-selectors');
+var uFuzzy = require('@leeoniya/ufuzzy');
 var reactUse = require('react-use');
 var operators = require('rxjs/operators');
 var ReactGridLayout = require('react-grid-layout');
@@ -36,6 +37,7 @@ var XYChartPanelCfg_types_gen = require('@grafana/schema/dist/esm/raw/composable
 function _interopDefaultLegacy (e) { return e && typeof e === 'object' && 'default' in e ? e : { 'default': e }; }
 
 var React__default = /*#__PURE__*/_interopDefaultLegacy(React);
+var uFuzzy__default = /*#__PURE__*/_interopDefaultLegacy(uFuzzy);
 var ReactGridLayout__default = /*#__PURE__*/_interopDefaultLegacy(ReactGridLayout);
 var AutoSizer__default = /*#__PURE__*/_interopDefaultLegacy(AutoSizer);
 
@@ -1532,6 +1534,27 @@ function findObjectInternal(scene, check, alreadySearchedChild, shouldSearchUp)
   }
   return null;
 }
+function findByKey(sceneObject, key) {
+  const found = findObject(sceneObject, (sceneToCheck) => {
+    return sceneToCheck.state.key === key;
+  });
+  if (!found) {
+    throw new Error("Unable to find scene with key " + key);
+  }
+  return found;
+}
+function findByKeyAndType(sceneObject, key, targetType) {
+  const found = findObject(sceneObject, (sceneToCheck) => {
+    return sceneToCheck.state.key === key;
+  });
+  if (!found) {
+    throw new Error("Unable to find scene with key " + key);
+  }
+  if (!(found instanceof targetType)) {
+    throw new Error(`Found scene object with key ${key} does not match type ${targetType.name}`);
+  }
+  return found;
+}
 function findObject(scene, check) {
   return findObjectInternal(scene, check, void 0, true);
 }
@@ -2026,6 +2049,8 @@ const sceneGraph = {
   interpolate,
   lookupVariable,
   hasVariableDependencyInLoadingState,
+  findByKey,
+  findByKeyAndType,
   findObject,
   findAllObjects,
   getAncestor,
@@ -2920,6 +2945,51 @@ class CustomAllValue {
   }
 }
 
+function getOptionSearcher(options, includeAll, value, text) {
+  const ufuzzy = new uFuzzy__default["default"]();
+  let allOptions = options;
+  const haystack = [];
+  const limit = 1e4;
+  if (includeAll) {
+    allOptions = [{ value: ALL_VARIABLE_VALUE, label: ALL_VARIABLE_TEXT }, ...allOptions];
+  }
+  if (!Array.isArray(value)) {
+    const current = options.find((x) => x.value === value);
+    if (!current) {
+      allOptions = [{ value, label: String(text) }, ...allOptions];
+    }
+  }
+  return (search) => {
+    if (search === "") {
+      if (allOptions.length > limit) {
+        return allOptions.slice(0, limit);
+      } else {
+        return allOptions;
+      }
+    }
+    if (haystack.length === 0) {
+      for (let i = 0; i < allOptions.length; i++) {
+        haystack.push(allOptions[i].label);
+      }
+    }
+    const idxs = ufuzzy.filter(haystack, search);
+    const filteredOptions = [];
+    if (idxs) {
+      for (let i = 0; i < idxs.length; i++) {
+        filteredOptions.push(allOptions[idxs[i]]);
+        if (filteredOptions.length > limit) {
+          return filteredOptions;
+        }
+      }
+      return filteredOptions;
+    }
+    if (allOptions.length > limit) {
+      return allOptions.slice(0, limit);
+    }
+    return allOptions;
+  };
+}
+
 var __defProp$z = Object.defineProperty;
 var __defProps$n = Object.defineProperties;
 var __getOwnPropDescs$n = Object.getOwnPropertyDescriptors;
@@ -2951,35 +3021,66 @@ var __objRest$3 = (source, exclude) => {
     }
   return target;
 };
+const filterNoOp$1 = () => true;
 function VariableValueSelect({ model }) {
-  const { value, key } = model.useState();
-  const onInputChange = model.onSearchChange ? (value2, meta) => {
-    if (meta.action === "input-change") {
-      model.onSearchChange(value2);
+  const { value, text, key, options, includeAll } = model.useState();
+  const [inputValue, setInputValue] = React.useState("");
+  const [hasCustomValue, setHasCustomValue] = React.useState(false);
+  const optionSearcher = React.useMemo(
+    () => getOptionSearcher(options, includeAll, value, text),
+    [options, includeAll, value, text]
+  );
+  const onInputChange = (value2, { action }) => {
+    if (action === "input-change") {
+      setInputValue(value2);
+      if (model.onSearchChange) {
+        model.onSearchChange(value2);
+      }
+      return value2;
+    }
+    return value2;
+  };
+  const filteredOptions = optionSearcher(inputValue);
+  const onOpenMenu = () => {
+    if (hasCustomValue) {
+      setInputValue(String(text));
     }
-  } : void 0;
+  };
+  const onCloseMenu = () => {
+    setInputValue("");
+  };
   return /* @__PURE__ */ React__default["default"].createElement(ui.Select, {
     id: key,
     placeholder: "Select value",
     width: "auto",
     value,
+    inputValue,
     allowCustomValue: true,
     virtualized: true,
+    filterOption: filterNoOp$1,
     tabSelectsValue: false,
     onInputChange,
-    options: model.getOptionsForSelect(),
+    onOpenMenu,
+    onCloseMenu,
+    options: filteredOptions,
     "data-testid": e2eSelectors.selectors.pages.Dashboard.SubMenu.submenuItemValueDropDownValueLinkTexts(`${value}`),
     onChange: (newValue) => {
       model.changeValueTo(newValue.value, newValue.label);
+      if (hasCustomValue !== newValue.__isNew__) {
+        setHasCustomValue(newValue.__isNew__);
+      }
     }
   });
 }
 function VariableValueSelectMulti({ model }) {
-  const { value, key, maxVisibleValues, noValueOnClear } = model.useState();
+  const { value, text, options, key, maxVisibleValues, noValueOnClear, includeAll } = model.useState();
   const arrayValue = React.useMemo(() => lodash.isArray(value) ? value : [value], [value]);
-  const options = model.getOptionsForSelect();
   const [uncommittedValue, setUncommittedValue] = React.useState(arrayValue);
   const [inputValue, setInputValue] = React.useState("");
+  const optionSearcher = React.useMemo(
+    () => getOptionSearcher(options, includeAll, value, text),
+    [options, includeAll, value, text]
+  );
   React.useEffect(() => {
     setUncommittedValue(arrayValue);
   }, [arrayValue]);
@@ -2998,6 +3099,7 @@ function VariableValueSelectMulti({ model }) {
     return inputValue;
   };
   const placeholder = options.length > 0 ? "Select value" : "";
+  const filteredOptions = optionSearcher(inputValue);
   return /* @__PURE__ */ React__default["default"].createElement(ui.MultiSelect, {
     id: key,
     placeholder,
@@ -3009,7 +3111,7 @@ function VariableValueSelectMulti({ model }) {
     tabSelectsValue: false,
     virtualized: true,
     allowCustomValue: true,
-    options: model.getOptionsForSelect(),
+    options: filteredOptions,
     closeMenuOnSelect: false,
     components: { Option: OptionWithCheckbox },
     isClearable: true,
@@ -3018,6 +3120,7 @@ function VariableValueSelectMulti({ model }) {
     onBlur: () => {
       model.changeValueTo(uncommittedValue);
     },
+    filterOption: filterNoOp$1,
     "data-testid": e2eSelectors.selectors.pages.Dashboard.SubMenu.submenuItemValueDropDownValueLinkTexts(`${uncommittedValue}`),
     onChange: (newValue, action) => {
       if (action.action === "clear" && noValueOnClear) {
@@ -3256,7 +3359,7 @@ class GroupByVariable extends MultiValueVariable {
 }
 GroupByVariable.Component = GroupByVariableRenderer;
 function GroupByVariableRenderer({ model }) {
-  const { value, text, key, maxVisibleValues, noValueOnClear } = model.useState();
+  const { value, text, key, maxVisibleValues, noValueOnClear, options, includeAll } = model.useState();
   const values = React.useMemo(() => {
     const arrayValue = lodash.isArray(value) ? value : [value];
     const arrayText = lodash.isArray(text) ? text : [text];
@@ -3272,6 +3375,10 @@ function GroupByVariableRenderer({ model }) {
   const [isOptionsOpen, setIsOptionsOpen] = React.useState(false);
   const [inputValue, setInputValue] = React.useState("");
   const [uncommittedValue, setUncommittedValue] = React.useState(values);
+  const optionSearcher = React.useMemo(
+    () => getOptionSearcher(options, includeAll, value, text),
+    [options, includeAll, value, text]
+  );
   React.useEffect(() => {
     setUncommittedValue(values);
   }, [values]);
@@ -3289,11 +3396,11 @@ function GroupByVariableRenderer({ model }) {
     }
     return inputValue;
   };
-  const placeholder = "Select value";
+  const filteredOptions = optionSearcher(inputValue);
   return /* @__PURE__ */ React__default["default"].createElement(ui.MultiSelect, {
     "data-testid": `GroupBySelect-${key}`,
     id: key,
-    placeholder,
+    placeholder: "Select value",
     width: "auto",
     inputValue,
     value: uncommittedValue,
@@ -3301,7 +3408,8 @@ function GroupByVariableRenderer({ model }) {
     maxVisibleValues: maxVisibleValues != null ? maxVisibleValues : 5,
     tabSelectsValue: false,
     virtualized: true,
-    options: model.getOptionsForSelect(),
+    options: filteredOptions,
+    filterOption: filterNoOp,
     closeMenuOnSelect: false,
     isOpen: isOptionsOpen,
     isClearable: true,
@@ -3332,6 +3440,7 @@ function GroupByVariableRenderer({ model }) {
     }
   });
 }
+const filterNoOp = () => true;
 
 function LoadingIndicator(props) {
   return /* @__PURE__ */ React__default["default"].createElement(ui.Tooltip, {