@grafana/scenes 5.4.0--canary.813.9776503756.0 → 5.4.0

package/dist/index.js

@@ -2854,7 +2854,7 @@ var __objRest$3 = (source, exclude) => {
   return target;
 };
 const filterNoOp$2 = () => true;
-function toSelectableValue$1(value, label) {
+function toSelectableValue$2(value, label) {
   return {
     value,
     label: label != null ? label : String(value)
@@ -2864,7 +2864,7 @@ function VariableValueSelect({ model }) {
   const { value, text, key, options, includeAll, isReadOnly } = model.useState();
   const [inputValue, setInputValue] = React.useState("");
   const [hasCustomValue, setHasCustomValue] = React.useState(false);
-  const selectValue = toSelectableValue$1(value, String(text));
+  const selectValue = toSelectableValue$2(value, String(text));
   const optionSearcher = React.useMemo(() => getOptionSearcher(options, includeAll), [options, includeAll]);
   const onInputChange = (value2, { action }) => {
     if (action === "input-change") {
@@ -3178,7 +3178,8 @@ class GroupByVariable extends MultiValueVariable {
       return rxjs.of(
         this.state.defaultOptions.map((o) => ({
           label: o.text,
-          value: String(o.value)
+          value: String(o.value),
+          group: o.group
         }))
       );
     }
@@ -3201,7 +3202,8 @@ class GroupByVariable extends MultiValueVariable {
             const a = data.map((i) => {
               return {
                 label: i.text,
-                value: i.value ? String(i.value) : i.text
+                value: i.value ? String(i.value) : i.text,
+                group: i.group
               };
             });
             return rxjs.of(a);
@@ -3250,7 +3252,10 @@ function GroupByVariableRenderer({ model }) {
     }
     return inputValue;
   };
-  const filteredOptions = optionSearcher(inputValue);
+  const filteredOptions = React.useMemo(
+    () => handleOptionGroups(optionSearcher(inputValue).map(toSelectableValue$1)),
+    [optionSearcher, inputValue]
+  );
   return /* @__PURE__ */ React__default["default"].createElement(ui.MultiSelect, {
     "data-testid": `GroupBySelect-${key}`,
     id: key,
@@ -3295,6 +3300,17 @@ function GroupByVariableRenderer({ model }) {
   });
 }
 const filterNoOp$1 = () => true;
+function toSelectableValue$1(input) {
+  const { label, value, group } = input;
+  const result = {
+    label,
+    value
+  };
+  if (group) {
+    result.group = group;
+  }
+  return result;
+}
 
 function LoadingIndicator(props) {
   return /* @__PURE__ */ React__default["default"].createElement(ui.Tooltip, {
@@ -3311,7 +3327,7 @@ function LoadingIndicator(props) {
 }
 
 function ControlsLabel(props) {
-  const styles = ui.useStyles2(getStyles$9);
+  const styles = ui.useStyles2(getStyles$a);
   const theme = ui.useTheme2();
   const isVertical = props.layout === "vertical";
   const loadingIndicator = Boolean(props.isLoading) ? /* @__PURE__ */ React__default["default"].createElement("div", {
@@ -3374,7 +3390,7 @@ function ControlsLabel(props) {
   }
   return labelElement;
 }
-const getStyles$9 = (theme) => ({
+const getStyles$a = (theme) => ({
   horizontalLabel: css.css({
     background: theme.isDark ? theme.colors.background.primary : theme.colors.background.secondary,
     display: `flex`,
@@ -3409,13 +3425,42 @@ const getStyles$9 = (theme) => ({
   })
 });
 
-function selectableValueToVariableValueOption(value) {
-  var _a;
-  return {
-    label: (_a = value.label) != null ? _a : String(value.value),
-    value: value.value
+function getAdhocOptionSearcher(options) {
+  const ufuzzy = new uFuzzy__default["default"]();
+  const haystack = [];
+  const limit = 1e4;
+  return (search) => {
+    var _a;
+    if (search === "") {
+      if (options.length > limit) {
+        return options.slice(0, limit);
+      } else {
+        return options;
+      }
+    }
+    if (haystack.length === 0) {
+      for (let i = 0; i < options.length; i++) {
+        haystack.push((_a = options[i].label) != null ? _a : String(options[i].value));
+      }
+    }
+    const idxs = ufuzzy.filter(haystack, search);
+    const filteredOptions = [];
+    if (idxs) {
+      for (let i = 0; i < idxs.length; i++) {
+        filteredOptions.push(options[idxs[i]]);
+        if (filteredOptions.length > limit) {
+          return filteredOptions;
+        }
+      }
+      return filteredOptions;
+    }
+    if (options.length > limit) {
+      return options.slice(0, limit);
+    }
+    return options;
   };
 }
+
 function keyLabelToOption(key, label) {
   return key !== "" ? {
     value: key,
@@ -3425,7 +3470,7 @@ function keyLabelToOption(key, label) {
 const filterNoOp = () => true;
 function AdHocFilterRenderer({ filter, model }) {
   var _a, _b;
-  const styles = ui.useStyles2(getStyles$8);
+  const styles = ui.useStyles2(getStyles$9);
   const [keys, setKeys] = React.useState([]);
   const [values, setValues] = React.useState([]);
   const [isKeysLoading, setIsKeysLoading] = React.useState(false);
@@ -3437,7 +3482,7 @@ function AdHocFilterRenderer({ filter, model }) {
   const keyValue = keyLabelToOption(filter.key, filter.keyLabel);
   const valueValue = keyLabelToOption(filter.value, filter.valueLabel);
   const optionSearcher = React.useMemo(
-    () => getOptionSearcher(values.map(selectableValueToVariableValueOption), void 0),
+    () => getAdhocOptionSearcher(values),
     [values]
   );
   const onValueInputChange = (value, { action }) => {
@@ -3446,7 +3491,10 @@ function AdHocFilterRenderer({ filter, model }) {
     }
     return value;
   };
-  const filteredValueOptions = optionSearcher(valueInputValue);
+  const filteredValueOptions = React.useMemo(
+    () => handleOptionGroups(optionSearcher(valueInputValue)),
+    [optionSearcher, valueInputValue]
+  );
   const valueSelect = /* @__PURE__ */ React__default["default"].createElement(ui.Select, {
     virtualized: true,
     allowCustomValue: true,
@@ -3495,7 +3543,7 @@ function AdHocFilterRenderer({ filter, model }) {
     width: "auto",
     value: keyValue,
     placeholder: "Select label",
-    options: keys,
+    options: handleOptionGroups(keys),
     onChange: (v) => model._updateFilter(filter, "key", v),
     autoFocus: filter.key === "",
     isOpen: isKeysOpen && !isKeysLoading,
@@ -3566,7 +3614,7 @@ function AdHocFilterRenderer({ filter, model }) {
     onClick: () => model._removeFilter(filter)
   }));
 }
-const getStyles$8 = (theme) => ({
+const getStyles$9 = (theme) => ({
   field: css.css({
     marginBottom: 0
   }),
@@ -3823,7 +3871,7 @@ class AdHocFiltersVariable extends SceneObjectBase {
     var _a, _b, _c;
     const override = await ((_b = (_a = this.state).getTagValuesProvider) == null ? void 0 : _b.call(_a, this, filter));
     if (override && override.replace) {
-      return handleOptionGroups(dataFromResponse(override.values));
+      return dataFromResponse(override.values).map(toSelectableValue);
     }
     const ds = await this._dataSourceSrv.get(this.state.datasource, this._scopedVars);
     if (!ds || !ds.getTagValues) {
@@ -3845,7 +3893,7 @@ class AdHocFiltersVariable extends SceneObjectBase {
     if (override) {
       values = values.concat(dataFromResponse(override.values));
     }
-    return handleOptionGroups(values);
+    return values.map(toSelectableValue);
   }
   _addWip() {
     this.setState({
@@ -3865,7 +3913,7 @@ function renderExpression(builder, filters) {
 }
 function AdHocFiltersVariableRenderer({ model }) {
   const { filters, readOnly, addFilterButtonText } = model.useState();
-  const styles = ui.useStyles2(getStyles$7);
+  const styles = ui.useStyles2(getStyles$8);
   return /* @__PURE__ */ React__default["default"].createElement("div", {
     className: styles.wrapper
   }, filters.map((filter, index) => /* @__PURE__ */ React__default["default"].createElement(React__default["default"].Fragment, {
@@ -3879,7 +3927,7 @@ function AdHocFiltersVariableRenderer({ model }) {
     addFilterButtonText
   }));
 }
-const getStyles$7 = (theme) => ({
+const getStyles$8 = (theme) => ({
   wrapper: css.css({
     display: "flex",
     flexWrap: "wrap",
@@ -3892,34 +3940,20 @@ const getStyles$7 = (theme) => ({
     paddingRight: theme.spacing(0.5)
   })
 });
-function toSelectableValue({ text, value }) {
-  return {
+function toSelectableValue(input) {
+  const { text, value } = input;
+  const result = {
     label: text,
     value: String(value != null ? value : text)
   };
+  if ("group" in input) {
+    result.group = input.group;
+  }
+  return result;
 }
 function isFilterComplete(filter) {
   return filter.key !== "" && filter.operator !== "" && filter.value !== "";
 }
-function handleOptionGroups(values) {
-  const result = [];
-  const groupedResults = /* @__PURE__ */ new Map();
-  for (const value of values) {
-    const groupLabel = value.group;
-    if (groupLabel) {
-      let group = groupedResults.get(groupLabel);
-      if (!group) {
-        group = [];
-        groupedResults.set(groupLabel, group);
-        result.push({ label: groupLabel, options: group });
-      }
-      group.push(toSelectableValue(value));
-    } else {
-      result.push(toSelectableValue(value));
-    }
-  }
-  return result;
-}
 
 class DataLayersMerger {
   constructor() {
@@ -4509,6 +4543,25 @@ function dataFromResponse(response) {
 function responseHasError(response) {
   return !Array.isArray(response) && Boolean(response.error);
 }
+function handleOptionGroups(values) {
+  const result = [];
+  const groupedResults = /* @__PURE__ */ new Map();
+  for (const value of values) {
+    const groupLabel = value.group;
+    if (groupLabel) {
+      let group = groupedResults.get(groupLabel);
+      if (!group) {
+        group = [];
+        groupedResults.set(groupLabel, group);
+        result.push({ label: groupLabel, options: group });
+      }
+      group.push(value);
+    } else {
+      result.push(value);
+    }
+  }
+  return result;
+}
 
 function isAdHocVariable(variable) {
   return variable.state.type === "adhoc";
@@ -4763,6 +4816,7 @@ function VizPanelRenderer({ model }) {
     menu: panelMenu,
     onCancelQuery: model.onCancelQuery,
     onFocus: setPanelAttention,
+    onMouseEnter: setPanelAttention,
     onMouseMove: debouncedMouseMove
   }, (innerWidth, innerHeight) => /* @__PURE__ */ React__default["default"].createElement(React__default["default"].Fragment, null, /* @__PURE__ */ React__default["default"].createElement(ui.ErrorBoundaryAlert, {
     dependencies: [plugin, data$1]
@@ -7995,7 +8049,7 @@ class EmbeddedScene extends SceneObjectBase {
 EmbeddedScene.Component = EmbeddedSceneRenderer;
 function EmbeddedSceneRenderer({ model }) {
   const { body, controls } = model.useState();
-  const styles = ui.useStyles2(getStyles$6);
+  const styles = ui.useStyles2(getStyles$7);
   return /* @__PURE__ */ React__default["default"].createElement("div", {
     className: styles.container
   }, controls && /* @__PURE__ */ React__default["default"].createElement("div", {
@@ -8009,7 +8063,7 @@ function EmbeddedSceneRenderer({ model }) {
     model: body
   })));
 }
-const getStyles$6 = (theme) => {
+const getStyles$7 = (theme) => {
   return {
     container: css.css({
       flexGrow: 1,
@@ -8148,8 +8202,9 @@ function useUniqueId() {
 }
 const LazyLoader = React__default["default"].forwardRef(
   (_a, ref) => {
-    var _b = _a, { children, onLoad, onChange } = _b, rest = __objRest$1(_b, ["children", "onLoad", "onChange"]);
+    var _b = _a, { children, onLoad, onChange, className } = _b, rest = __objRest$1(_b, ["children", "onLoad", "onChange", "className"]);
     const id = useUniqueId();
+    const { hideEmpty } = ui.useStyles2(getStyles$6);
     const [loaded, setLoaded] = React.useState(false);
     const [isInView, setIsInView] = React.useState(false);
     const innerRef = React.useRef(null);
@@ -8175,12 +8230,23 @@ const LazyLoader = React__default["default"].forwardRef(
         }
       };
     });
+    const classes = `${loaded ? hideEmpty : ""} ${className}`;
     return /* @__PURE__ */ React__default["default"].createElement("div", __spreadValues$b({
       id,
-      ref: innerRef
+      ref: innerRef,
+      className: classes
     }, rest), loaded && (typeof children === "function" ? children({ isInView }) : children));
   }
 );
+function getStyles$6() {
+  return {
+    hideEmpty: css.css({
+      "&:empty": {
+        display: "none"
+      }
+    })
+  };
+}
 LazyLoader.displayName = "LazyLoader";
 LazyLoader.callbacks = {};
 LazyLoader.addCallback = (id, c) => LazyLoader.callbacks[id] = c;
@@ -8689,6 +8755,9 @@ class SceneGridRow extends SceneObjectBase {
       height: 1,
       width: GRID_COLUMN_COUNT
     }));
+    this._variableDependency = new VariableDependencyConfig(this, {
+      statePaths: ["title"]
+    });
     this.onCollapseToggle = () => {
       if (!this.state.isCollapsible) {
         return;
@@ -9158,15 +9227,15 @@ class SceneRefreshPicker extends SceneObjectBase {
   }
   getUrlState() {
     return {
-      refresh: this.state.refresh !== "" ? this.state.refresh : void 0
+      refresh: this.state.refresh
     };
   }
   updateFromUrl(values) {
     const refresh = values.refresh;
-    if (typeof refresh === "string") {
-      this.setState({ refresh });
-    } else if (refresh == null) {
-      this.setState({ refresh: "" });
+    if (refresh && typeof refresh === "string") {
+      this.setState({
+        refresh
+      });
     }
   }
 }
@@ -11477,7 +11546,6 @@ const sceneUtils = {
   syncStateFromSearchParams,
   getUrlState,
   renderPrometheusLabelFilters,
-  safeStringifyValue,
   isAdHocVariable,
   isConstantVariable,
   isCustomVariable,