@grafana/scenes 4.11.2--canary.648.8738574184.0 → 4.11.2

package/dist/esm/variables/variants/TestVariable.js

@@ -25,7 +25,7 @@ var __spreadValues = (a, b) => {
   return a;
 };
 class TestVariable extends MultiValueVariable {
-  constructor(initialState) {
+  constructor(initialState, isLazy = false) {
     super(__spreadValues({
       type: "custom",
       name: "Test",
@@ -38,9 +38,11 @@ class TestVariable extends MultiValueVariable {
     this.completeUpdate = new Subject();
     this.isGettingValues = true;
     this.getValueOptionsCount = 0;
+    this.isLazy = false;
     this._variableDependency = new VariableDependencyConfig(this, {
       statePaths: ["query"]
     });
+    this.isLazy = isLazy;
   }
   getValueOptions(args) {
     const { delayMs } = this.state;

package/dist/esm/variables/variants/TestVariable.js.map

@@ -1 +1 @@
-{"version":3,"file":"TestVariable.js","sources":["../../../../src/variables/variants/TestVariable.tsx"],"sourcesContent":["import { Observable, Subject } from 'rxjs';\n\nimport { sceneGraph } from '../../core/sceneGraph';\nimport { SceneComponentProps } from '../../core/types';\nimport { queryMetricTree } from '../../utils/metricTree';\nimport { VariableDependencyConfig } from '../VariableDependencyConfig';\nimport { renderSelectForVariable } from '../components/VariableValueSelect';\nimport { VariableValueOption } from '../types';\n\nimport { MultiValueVariable, MultiValueVariableState, VariableGetOptionsArgs } from './MultiValueVariable';\nimport { VariableRefresh } from '@grafana/data';\nimport { getClosest } from '../../core/sceneGraph/utils';\nimport { SceneVariableSet } from '../sets/SceneVariableSet';\nimport { SceneQueryControllerEntry } from '../../behaviors/SceneQueryController';\n\nexport interface TestVariableState extends MultiValueVariableState {\n  query: string;\n  delayMs?: number;\n  issuedQuery?: string;\n  refresh?: VariableRefresh;\n  throwError?: string;\n  optionsToReturn?: VariableValueOption[];\n}\n\n/**\n * This variable is only designed for unit tests and potentially e2e tests.\n */\nexport class TestVariable extends MultiValueVariable<TestVariableState> {\n  private completeUpdate = new Subject<number>();\n  public isGettingValues = true;\n  public getValueOptionsCount = 0;\n\n  protected _variableDependency = new VariableDependencyConfig(this, {\n    statePaths: ['query'],\n  });\n\n  public constructor(initialState: Partial<TestVariableState>) {\n    super({\n      type: 'custom',\n      name: 'Test',\n      value: 'Value',\n      text: 'Text',\n      query: 'Query',\n      options: [],\n      refresh: VariableRefresh.onDashboardLoad,\n      ...initialState,\n    });\n  }\n\n  public getValueOptions(args: VariableGetOptionsArgs): Observable<VariableValueOption[]> {\n    const { delayMs } = this.state;\n\n    this.getValueOptionsCount += 1;\n\n    const queryController = sceneGraph.getQueryController(this);\n\n    return new Observable<VariableValueOption[]>((observer) => {\n      const queryEntry: SceneQueryControllerEntry = {\n        type: 'variable',\n        origin: this,\n        cancel: () => observer.complete(),\n      };\n\n      if (queryController) {\n        queryController.queryStarted(queryEntry);\n      }\n\n      this.setState({ loading: true });\n\n      if (this.state.throwError) {\n        throw new Error(this.state.throwError);\n      }\n\n      const interpolatedQuery = sceneGraph.interpolate(this, this.state.query);\n      const options = this.getOptions(interpolatedQuery);\n\n      const sub = this.completeUpdate.subscribe({\n        next: () => {\n          this.setState({ issuedQuery: interpolatedQuery, options, loading: false });\n          observer.next(options);\n          observer.complete();\n        },\n      });\n\n      let timeout: number | undefined;\n      if (delayMs) {\n        timeout = window.setTimeout(() => this.signalUpdateCompleted(), delayMs);\n      } else if (delayMs === 0) {\n        this.signalUpdateCompleted();\n      }\n\n      this.isGettingValues = true;\n\n      return () => {\n        sub.unsubscribe();\n        window.clearTimeout(timeout);\n        this.isGettingValues = false;\n\n        if (this.state.loading) {\n          this.setState({ loading: false });\n        }\n\n        if (queryController) {\n          queryController.queryCompleted(queryEntry);\n        }\n      };\n    });\n  }\n\n  public cancel() {\n    const sceneVarSet = getClosest(this, (s) => (s instanceof SceneVariableSet ? s : undefined));\n    sceneVarSet?.cancel(this);\n  }\n\n  private getOptions(interpolatedQuery: string) {\n    if (this.state.optionsToReturn) {\n      return this.state.optionsToReturn;\n    }\n\n    return queryMetricTree(interpolatedQuery).map((x) => ({ label: x.name, value: x.name }));\n  }\n\n  /** Useful from tests */\n  public signalUpdateCompleted() {\n    this.completeUpdate.next(1);\n  }\n\n  public static Component = ({ model }: SceneComponentProps<MultiValueVariable>) => {\n    return renderSelectForVariable(model);\n  };\n}\n"],"names":[],"mappings":";;;;;;;;;;;;;;;;;;;;;;;;;;AA2BO,MAAM,qBAAqB,kBAAsC,CAAA;AAAA,EAS/D,YAAY,YAA0C,EAAA;AAC3D,IAAM,KAAA,CAAA,cAAA,CAAA;AAAA,MACJ,IAAM,EAAA,QAAA;AAAA,MACN,IAAM,EAAA,MAAA;AAAA,MACN,KAAO,EAAA,OAAA;AAAA,MACP,IAAM,EAAA,MAAA;AAAA,MACN,KAAO,EAAA,OAAA;AAAA,MACP,SAAS,EAAC;AAAA,MACV,SAAS,eAAgB,CAAA,eAAA;AAAA,KAAA,EACtB,YACJ,CAAA,CAAA,CAAA;AAlBH,IAAQ,IAAA,CAAA,cAAA,GAAiB,IAAI,OAAgB,EAAA,CAAA;AAC7C,IAAA,IAAA,CAAO,eAAkB,GAAA,IAAA,CAAA;AACzB,IAAA,IAAA,CAAO,oBAAuB,GAAA,CAAA,CAAA;AAE9B,IAAU,IAAA,CAAA,mBAAA,GAAsB,IAAI,wBAAA,CAAyB,IAAM,EAAA;AAAA,MACjE,UAAA,EAAY,CAAC,OAAO,CAAA;AAAA,KACrB,CAAA,CAAA;AAAA,GAaD;AAAA,EAEO,gBAAgB,IAAiE,EAAA;AACtF,IAAM,MAAA,EAAE,OAAQ,EAAA,GAAI,IAAK,CAAA,KAAA,CAAA;AAEzB,IAAA,IAAA,CAAK,oBAAwB,IAAA,CAAA,CAAA;AAE7B,IAAM,MAAA,eAAA,GAAkB,UAAW,CAAA,kBAAA,CAAmB,IAAI,CAAA,CAAA;AAE1D,IAAO,OAAA,IAAI,UAAkC,CAAA,CAAC,QAAa,KAAA;AACzD,MAAA,MAAM,UAAwC,GAAA;AAAA,QAC5C,IAAM,EAAA,UAAA;AAAA,QACN,MAAQ,EAAA,IAAA;AAAA,QACR,MAAA,EAAQ,MAAM,QAAA,CAAS,QAAS,EAAA;AAAA,OAClC,CAAA;AAEA,MAAA,IAAI,eAAiB,EAAA;AACnB,QAAA,eAAA,CAAgB,aAAa,UAAU,CAAA,CAAA;AAAA,OACzC;AAEA,MAAA,IAAA,CAAK,QAAS,CAAA,EAAE,OAAS,EAAA,IAAA,EAAM,CAAA,CAAA;AAE/B,MAAI,IAAA,IAAA,CAAK,MAAM,UAAY,EAAA;AACzB,QAAA,MAAM,IAAI,KAAA,CAAM,IAAK,CAAA,KAAA,CAAM,UAAU,CAAA,CAAA;AAAA,OACvC;AAEA,MAAA,MAAM,oBAAoB,UAAW,CAAA,WAAA,CAAY,IAAM,EAAA,IAAA,CAAK,MAAM,KAAK,CAAA,CAAA;AACvE,MAAM,MAAA,OAAA,GAAU,IAAK,CAAA,UAAA,CAAW,iBAAiB,CAAA,CAAA;AAEjD,MAAM,MAAA,GAAA,GAAM,IAAK,CAAA,cAAA,CAAe,SAAU,CAAA;AAAA,QACxC,MAAM,MAAM;AACV,UAAA,IAAA,CAAK,SAAS,EAAE,WAAA,EAAa,mBAAmB,OAAS,EAAA,OAAA,EAAS,OAAO,CAAA,CAAA;AACzE,UAAA,QAAA,CAAS,KAAK,OAAO,CAAA,CAAA;AACrB,UAAA,QAAA,CAAS,QAAS,EAAA,CAAA;AAAA,SACpB;AAAA,OACD,CAAA,CAAA;AAED,MAAI,IAAA,OAAA,CAAA;AACJ,MAAA,IAAI,OAAS,EAAA;AACX,QAAA,OAAA,GAAU,OAAO,UAAW,CAAA,MAAM,IAAK,CAAA,qBAAA,IAAyB,OAAO,CAAA,CAAA;AAAA,OACzE,MAAA,IAAW,YAAY,CAAG,EAAA;AACxB,QAAA,IAAA,CAAK,qBAAsB,EAAA,CAAA;AAAA,OAC7B;AAEA,MAAA,IAAA,CAAK,eAAkB,GAAA,IAAA,CAAA;AAEvB,MAAA,OAAO,MAAM;AACX,QAAA,GAAA,CAAI,WAAY,EAAA,CAAA;AAChB,QAAA,MAAA,CAAO,aAAa,OAAO,CAAA,CAAA;AAC3B,QAAA,IAAA,CAAK,eAAkB,GAAA,KAAA,CAAA;AAEvB,QAAI,IAAA,IAAA,CAAK,MAAM,OAAS,EAAA;AACtB,UAAA,IAAA,CAAK,QAAS,CAAA,EAAE,OAAS,EAAA,KAAA,EAAO,CAAA,CAAA;AAAA,SAClC;AAEA,QAAA,IAAI,eAAiB,EAAA;AACnB,UAAA,eAAA,CAAgB,eAAe,UAAU,CAAA,CAAA;AAAA,SAC3C;AAAA,OACF,CAAA;AAAA,KACD,CAAA,CAAA;AAAA,GACH;AAAA,EAEO,MAAS,GAAA;AACd,IAAM,MAAA,WAAA,GAAc,WAAW,IAAM,EAAA,CAAC,MAAO,CAAa,YAAA,gBAAA,GAAmB,IAAI,KAAU,CAAA,CAAA,CAAA;AAC3F,IAAA,WAAA,IAAA,IAAA,GAAA,KAAA,CAAA,GAAA,WAAA,CAAa,MAAO,CAAA,IAAA,CAAA,CAAA;AAAA,GACtB;AAAA,EAEQ,WAAW,iBAA2B,EAAA;AAC5C,IAAI,IAAA,IAAA,CAAK,MAAM,eAAiB,EAAA;AAC9B,MAAA,OAAO,KAAK,KAAM,CAAA,eAAA,CAAA;AAAA,KACpB;AAEA,IAAA,OAAO,eAAgB,CAAA,iBAAiB,CAAE,CAAA,GAAA,CAAI,CAAC,CAAA,MAAO,EAAE,KAAA,EAAO,CAAE,CAAA,IAAA,EAAM,KAAO,EAAA,CAAA,CAAE,MAAO,CAAA,CAAA,CAAA;AAAA,GACzF;AAAA,EAGO,qBAAwB,GAAA;AAC7B,IAAK,IAAA,CAAA,cAAA,CAAe,KAAK,CAAC,CAAA,CAAA;AAAA,GAC5B;AAKF,CAAA;AAvGa,YAAA,CAoGG,SAAY,GAAA,CAAC,EAAE,KAAA,EAAqD,KAAA;AAChF,EAAA,OAAO,wBAAwB,KAAK,CAAA,CAAA;AACtC,CAAA;;;;"}
+{"version":3,"file":"TestVariable.js","sources":["../../../../src/variables/variants/TestVariable.tsx"],"sourcesContent":["import { Observable, Subject } from 'rxjs';\n\nimport { sceneGraph } from '../../core/sceneGraph';\nimport { SceneComponentProps } from '../../core/types';\nimport { queryMetricTree } from '../../utils/metricTree';\nimport { VariableDependencyConfig } from '../VariableDependencyConfig';\nimport { renderSelectForVariable } from '../components/VariableValueSelect';\nimport { VariableValueOption } from '../types';\n\nimport { MultiValueVariable, MultiValueVariableState, VariableGetOptionsArgs } from './MultiValueVariable';\nimport { VariableRefresh } from '@grafana/data';\nimport { getClosest } from '../../core/sceneGraph/utils';\nimport { SceneVariableSet } from '../sets/SceneVariableSet';\nimport { SceneQueryControllerEntry } from '../../behaviors/SceneQueryController';\n\nexport interface TestVariableState extends MultiValueVariableState {\n  query: string;\n  delayMs?: number;\n  issuedQuery?: string;\n  refresh?: VariableRefresh;\n  throwError?: string;\n  optionsToReturn?: VariableValueOption[];\n}\n\n/**\n * This variable is only designed for unit tests and potentially e2e tests.\n */\nexport class TestVariable extends MultiValueVariable<TestVariableState> {\n  private completeUpdate = new Subject<number>();\n  public isGettingValues = true;\n  public getValueOptionsCount = 0;\n  isLazy = false;\n\n  protected _variableDependency = new VariableDependencyConfig(this, {\n    statePaths: ['query'],\n  });\n\n  public constructor(initialState: Partial<TestVariableState>, isLazy = false) {\n    super({\n      type: 'custom',\n      name: 'Test',\n      value: 'Value',\n      text: 'Text',\n      query: 'Query',\n      options: [],\n      refresh: VariableRefresh.onDashboardLoad,\n      ...initialState,\n    });\n    this.isLazy = isLazy;\n  }\n\n  public getValueOptions(args: VariableGetOptionsArgs): Observable<VariableValueOption[]> {\n    const { delayMs } = this.state;\n\n    this.getValueOptionsCount += 1;\n\n    const queryController = sceneGraph.getQueryController(this);\n\n    return new Observable<VariableValueOption[]>((observer) => {\n      const queryEntry: SceneQueryControllerEntry = {\n        type: 'variable',\n        origin: this,\n        cancel: () => observer.complete(),\n      };\n\n      if (queryController) {\n        queryController.queryStarted(queryEntry);\n      }\n\n      this.setState({ loading: true });\n\n      if (this.state.throwError) {\n        throw new Error(this.state.throwError);\n      }\n\n      const interpolatedQuery = sceneGraph.interpolate(this, this.state.query);\n      const options = this.getOptions(interpolatedQuery);\n\n      const sub = this.completeUpdate.subscribe({\n        next: () => {\n          this.setState({ issuedQuery: interpolatedQuery, options, loading: false });\n          observer.next(options);\n          observer.complete();\n        },\n      });\n\n      let timeout: number | undefined;\n      if (delayMs) {\n        timeout = window.setTimeout(() => this.signalUpdateCompleted(), delayMs);\n      } else if (delayMs === 0) {\n        this.signalUpdateCompleted();\n      }\n\n      this.isGettingValues = true;\n\n      return () => {\n        sub.unsubscribe();\n        window.clearTimeout(timeout);\n        this.isGettingValues = false;\n\n        if (this.state.loading) {\n          this.setState({ loading: false });\n        }\n\n        if (queryController) {\n          queryController.queryCompleted(queryEntry);\n        }\n      };\n    });\n  }\n\n  public cancel() {\n    const sceneVarSet = getClosest(this, (s) => (s instanceof SceneVariableSet ? s : undefined));\n    sceneVarSet?.cancel(this);\n  }\n\n  private getOptions(interpolatedQuery: string) {\n    if (this.state.optionsToReturn) {\n      return this.state.optionsToReturn;\n    }\n\n    return queryMetricTree(interpolatedQuery).map((x) => ({ label: x.name, value: x.name }));\n  }\n\n  /** Useful from tests */\n  public signalUpdateCompleted() {\n    this.completeUpdate.next(1);\n  }\n\n  public static Component = ({ model }: SceneComponentProps<MultiValueVariable>) => {\n    return renderSelectForVariable(model);\n  };\n}\n"],"names":[],"mappings":"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"}

package/dist/index.d.ts

@@ -61,6 +61,11 @@ interface SceneVariable<TState extends SceneVariableState = SceneVariableState>
      * Allows cancelling variable execution.
      */
     onCancel?(): void;
+    /**
+     * @experimental
+     * Indicates that a variable loads values lazily when user interacts with the variable dropdown.
+     */
+    isLazy?: boolean;
 }
 type VariableValue = VariableValueSingle | VariableValueSingle[];
 type VariableValueSingle = string | boolean | number | CustomVariableValue;
@@ -903,6 +908,7 @@ type getTagKeysProvider = (set: GroupByVariable, currentKey: string | null) => P
 }>;
 declare class GroupByVariable extends MultiValueVariable<GroupByVariableState> {
     static Component: typeof GroupByVariableRenderer;
+    isLazy: boolean;
     validateAndUpdate(): Observable<ValidateAndUpdateResult>;
     private _updateValueGivenNewOptions;
     getValueOptions(args: VariableGetOptionsArgs): Observable<VariableValueOption[]>;
@@ -1463,8 +1469,9 @@ declare class TestVariable extends MultiValueVariable<TestVariableState> {
     private completeUpdate;
     isGettingValues: boolean;
     getValueOptionsCount: number;
+    isLazy: boolean;
     protected _variableDependency: VariableDependencyConfig<TestVariableState>;
-    constructor(initialState: Partial<TestVariableState>);
+    constructor(initialState: Partial<TestVariableState>, isLazy?: boolean);
     getValueOptions(args: VariableGetOptionsArgs): Observable<VariableValueOption[]>;
     cancel(): void;
     private getOptions;

package/dist/index.js

@@ -2840,81 +2840,6 @@ class CustomAllValue {
   }
 }
 
-function VariableValueSelect({ model }) {
-  const { value, key } = model.useState();
-  const onInputChange = model.onSearchChange ? (value2, meta) => {
-    if (meta.action === "input-change") {
-      model.onSearchChange(value2);
-    }
-  } : void 0;
-  return /* @__PURE__ */ React__default["default"].createElement(ui.Select, {
-    id: key,
-    placeholder: "Select value",
-    width: "auto",
-    value,
-    allowCustomValue: true,
-    virtualized: true,
-    tabSelectsValue: false,
-    onInputChange,
-    options: model.getOptionsForSelect(),
-    "data-testid": e2eSelectors.selectors.pages.Dashboard.SubMenu.submenuItemValueDropDownValueLinkTexts(`${value}`),
-    onChange: (newValue) => {
-      model.changeValueTo(newValue.value, newValue.label);
-    }
-  });
-}
-function VariableValueSelectMulti({ model }) {
-  const { value, key, maxVisibleValues, noValueOnClear } = model.useState();
-  const arrayValue = React.useMemo(() => lodash.isArray(value) ? value : [value], [value]);
-  const options = model.getOptionsForSelect();
-  const [uncommittedValue, setUncommittedValue] = React.useState(arrayValue);
-  React.useEffect(() => {
-    setUncommittedValue(arrayValue);
-  }, [arrayValue]);
-  const onInputChange = model.onSearchChange ? (value2, meta) => {
-    if (meta.action === "input-change") {
-      model.onSearchChange(value2);
-    }
-  } : void 0;
-  const placeholder = options.length > 0 ? "Select value" : "";
-  return /* @__PURE__ */ React__default["default"].createElement(ui.MultiSelect, {
-    id: key,
-    placeholder,
-    width: "auto",
-    value: uncommittedValue,
-    noMultiValueWrap: true,
-    maxVisibleValues: maxVisibleValues != null ? maxVisibleValues : 5,
-    tabSelectsValue: false,
-    virtualized: true,
-    allowCustomValue: true,
-    options: model.getOptionsForSelect(),
-    closeMenuOnSelect: false,
-    isClearable: true,
-    onInputChange,
-    onBlur: () => {
-      model.changeValueTo(uncommittedValue);
-    },
-    "data-testid": e2eSelectors.selectors.pages.Dashboard.SubMenu.submenuItemValueDropDownValueLinkTexts(`${uncommittedValue}`),
-    onChange: (newValue, action) => {
-      if (action.action === "clear" && noValueOnClear) {
-        model.changeValueTo([]);
-      }
-      setUncommittedValue(newValue.map((x) => x.value));
-    }
-  });
-}
-function renderSelectForVariable(model) {
-  if (model.state.isMulti) {
-    return /* @__PURE__ */ React__default["default"].createElement(VariableValueSelectMulti, {
-      model
-    });
-  } else {
-    return /* @__PURE__ */ React__default["default"].createElement(VariableValueSelect, {
-      model
-    });
-  }
-}
-
 var __defProp$z = Object.defineProperty;
 var __defProps$n = Object.defineProperties;
 var __getOwnPropDescs$n = Object.getOwnPropertyDescriptors;
@@ -2950,6 +2875,7 @@ class GroupByVariable extends MultiValueVariable {
     }, initialState), {
       noValueOnClear: true
     }));
+    this.isLazy = true;
     this._getKeys = async (ds) => {
       var _a, _b, _c;
       const override = await ((_b = (_a = this.state).getTagKeysProvider) == null ? void 0 : _b.call(_a, this, null));
@@ -3035,7 +2961,56 @@ class GroupByVariable extends MultiValueVariable {
 }
 GroupByVariable.Component = GroupByVariableRenderer;
 function GroupByVariableRenderer({ model }) {
-  return renderSelectForVariable(model);
+  const { value, key, maxVisibleValues, noValueOnClear } = model.useState();
+  const arrayValue = React.useMemo(() => lodash.isArray(value) ? value : [value], [value]);
+  const [isFetchingOptions, setIsFetchingOptions] = React.useState(false);
+  const [isOptionsOpen, setIsOptionsOpen] = React.useState(false);
+  const [uncommittedValue, setUncommittedValue] = React.useState(arrayValue);
+  React.useEffect(() => {
+    setUncommittedValue(arrayValue);
+  }, [arrayValue]);
+  const onInputChange = model.onSearchChange ? (value2, meta) => {
+    if (meta.action === "input-change") {
+      model.onSearchChange(value2);
+    }
+  } : void 0;
+  const placeholder = "Select value";
+  return /* @__PURE__ */ React__default["default"].createElement(ui.MultiSelect, {
+    "data-testid": `GroupBySelect-${key}`,
+    id: key,
+    placeholder,
+    width: "auto",
+    value: uncommittedValue,
+    noMultiValueWrap: true,
+    maxVisibleValues: maxVisibleValues != null ? maxVisibleValues : 5,
+    tabSelectsValue: false,
+    virtualized: true,
+    allowCustomValue: true,
+    options: model.getOptionsForSelect(),
+    closeMenuOnSelect: false,
+    isOpen: isOptionsOpen,
+    isClearable: true,
+    isLoading: isFetchingOptions,
+    onInputChange,
+    onBlur: () => {
+      model.changeValueTo(uncommittedValue);
+    },
+    onChange: (newValue, action) => {
+      if (action.action === "clear" && noValueOnClear) {
+        model.changeValueTo([]);
+      }
+      setUncommittedValue(newValue.map((x) => x.value));
+    },
+    onOpenMenu: async () => {
+      setIsFetchingOptions(true);
+      await rxjs.lastValueFrom(model.validateAndUpdate());
+      setIsFetchingOptions(false);
+      setIsOptionsOpen(true);
+    },
+    onCloseMenu: () => {
+      setIsOptionsOpen(false);
+    }
+  });
 }
 
 function LoadingIndicator(props) {
@@ -4051,9 +4026,9 @@ function escapeLokiRegexp(value) {
 function getQueriesForVariables(sourceObject) {
   const runners = sceneGraph.findAllObjects(
     sourceObject.getRoot(),
-    (o) => o instanceof SceneQueryRunner && o.isActive
+    (o) => o instanceof SceneQueryRunner
   );
-  const applicableRunners = runners.filter((r) => {
+  const applicableRunners = filterOutInactiveRunnerDuplicates(runners).filter((r) => {
     var _a, _b;
     return ((_a = r.state.datasource) == null ? void 0 : _a.uid) === ((_b = sourceObject.state.datasource) == null ? void 0 : _b.uid);
   });
@@ -4066,6 +4041,24 @@ function getQueriesForVariables(sourceObject) {
   });
   return result;
 }
+function filterOutInactiveRunnerDuplicates(runners) {
+  const groupedItems = {};
+  for (const item of runners) {
+    if (item.state.key) {
+      if (!(item.state.key in groupedItems)) {
+        groupedItems[item.state.key] = [];
+      }
+      groupedItems[item.state.key].push(item);
+    }
+  }
+  return Object.values(groupedItems).flatMap((group) => {
+    const activeItems = group.filter((item) => item.isActive);
+    if (activeItems.length === 0 && group.length === 1) {
+      return group;
+    }
+    return activeItems;
+  });
+}
 
 function isAdHocVariable(variable) {
   return variable.state.type === "adhoc";
@@ -5990,8 +5983,7 @@ function VariableValueSelectWrapper({ variable, layout, showAlways }) {
   }
   if (layout === "vertical") {
     return /* @__PURE__ */ React__default["default"].createElement("div", {
-      className: verticalContainer,
-      "data-testid": e2eSelectors.selectors.pages.Dashboard.SubMenu.submenuItem
+      className: verticalContainer
     }, /* @__PURE__ */ React__default["default"].createElement(VariableLabel, {
       variable,
       layout
@@ -6000,8 +5992,7 @@ function VariableValueSelectWrapper({ variable, layout, showAlways }) {
     }));
   }
   return /* @__PURE__ */ React__default["default"].createElement("div", {
-    className: containerStyle,
-    "data-testid": e2eSelectors.selectors.pages.Dashboard.SubMenu.submenuItem
+    className: containerStyle
   }, /* @__PURE__ */ React__default["default"].createElement(VariableLabel, {
     variable
   }), /* @__PURE__ */ React__default["default"].createElement(variable.Component, {
@@ -6139,6 +6130,9 @@ class SceneVariableSet extends SceneObjectBase {
     }
   }
   _variableNeedsUpdate(variable) {
+    if (variable.isLazy) {
+      return false;
+    }
     if (!variable.validateAndUpdate) {
       return false;
     }
@@ -6316,6 +6310,79 @@ class ConstantVariable extends SceneObjectBase {
   }
 }
 
+function VariableValueSelect({ model }) {
+  const { value, key } = model.useState();
+  const onInputChange = model.onSearchChange ? (value2, meta) => {
+    if (meta.action === "input-change") {
+      model.onSearchChange(value2);
+    }
+  } : void 0;
+  return /* @__PURE__ */ React__default["default"].createElement(ui.Select, {
+    id: key,
+    placeholder: "Select value",
+    width: "auto",
+    value,
+    allowCustomValue: true,
+    virtualized: true,
+    tabSelectsValue: false,
+    onInputChange,
+    options: model.getOptionsForSelect(),
+    onChange: (newValue) => {
+      model.changeValueTo(newValue.value, newValue.label);
+    }
+  });
+}
+function VariableValueSelectMulti({ model }) {
+  const { value, key, maxVisibleValues, noValueOnClear } = model.useState();
+  const arrayValue = React.useMemo(() => lodash.isArray(value) ? value : [value], [value]);
+  const options = model.getOptionsForSelect();
+  const [uncommittedValue, setUncommittedValue] = React.useState(arrayValue);
+  React.useEffect(() => {
+    setUncommittedValue(arrayValue);
+  }, [arrayValue]);
+  const onInputChange = model.onSearchChange ? (value2, meta) => {
+    if (meta.action === "input-change") {
+      model.onSearchChange(value2);
+    }
+  } : void 0;
+  const placeholder = options.length > 0 ? "Select value" : "";
+  return /* @__PURE__ */ React__default["default"].createElement(ui.MultiSelect, {
+    id: key,
+    placeholder,
+    width: "auto",
+    value: uncommittedValue,
+    noMultiValueWrap: true,
+    maxVisibleValues: maxVisibleValues != null ? maxVisibleValues : 5,
+    tabSelectsValue: false,
+    virtualized: true,
+    allowCustomValue: true,
+    options: model.getOptionsForSelect(),
+    closeMenuOnSelect: false,
+    isClearable: true,
+    onInputChange,
+    onBlur: () => {
+      model.changeValueTo(uncommittedValue);
+    },
+    onChange: (newValue, action) => {
+      if (action.action === "clear" && noValueOnClear) {
+        model.changeValueTo([]);
+      }
+      setUncommittedValue(newValue.map((x) => x.value));
+    }
+  });
+}
+function renderSelectForVariable(model) {
+  if (model.state.isMulti) {
+    return /* @__PURE__ */ React__default["default"].createElement(VariableValueSelectMulti, {
+      model
+    });
+  } else {
+    return /* @__PURE__ */ React__default["default"].createElement(VariableValueSelect, {
+      model
+    });
+  }
+}
+
 var __defProp$i = Object.defineProperty;
 var __getOwnPropSymbols$i = Object.getOwnPropertySymbols;
 var __hasOwnProp$i = Object.prototype.hasOwnProperty;
@@ -6990,7 +7057,7 @@ var __spreadValues$e = (a, b) => {
   return a;
 };
 class TestVariable extends MultiValueVariable {
-  constructor(initialState) {
+  constructor(initialState, isLazy = false) {
     super(__spreadValues$e({
       type: "custom",
       name: "Test",
@@ -7003,9 +7070,11 @@ class TestVariable extends MultiValueVariable {
     this.completeUpdate = new rxjs.Subject();
     this.isGettingValues = true;
     this.getValueOptionsCount = 0;
+    this.isLazy = false;
     this._variableDependency = new VariableDependencyConfig(this, {
       statePaths: ["query"]
     });
+    this.isLazy = isLazy;
   }
   getValueOptions(args) {
     const { delayMs } = this.state;
@@ -7501,8 +7570,7 @@ function VizPanelMenuRenderer({ model }) {
         childItems: item.subMenu ? renderItems(item.subMenu) : void 0,
         url: item.href,
         onClick: item.onClick,
-        shortcut: item.shortcut,
-        testId: e2eSelectors.selectors.components.Panels.Panel.menuItems(item.text)
+        shortcut: item.shortcut
       })
     );
   };
@@ -8128,8 +8196,7 @@ function SceneGridRowRenderer({ model }) {
   }, /* @__PURE__ */ React__default["default"].createElement("button", {
     onClick: model.onCollapseToggle,
     className: styles.rowTitleButton,
-    "aria-label": isCollapsed ? "Expand row" : "Collapse row",
-    "data-testid": e2eSelectors.selectors.components.DashboardRow.title(sceneGraph.interpolate(model, title, void 0, "text"))
+    "aria-label": isCollapsed ? "Expand row" : "Collapse row"
   }, isCollapsible && /* @__PURE__ */ React__default["default"].createElement(ui.Icon, {
     name: isCollapsed ? "angle-right" : "angle-down"
   }), /* @__PURE__ */ React__default["default"].createElement("span", {