@grafana/scenes 4.13.0--canary.705.8847545922.0 → 4.13.1--canary.711.8884688944.0

package/dist/esm/variables/utils.js.map

@@ -1 +1 @@
-{"version":3,"file":"utils.js","sources":["../../../src/variables/utils.ts"],"sourcesContent":["import { isEqual } from 'lodash';\nimport { VariableValue } from './types';\nimport { AdHocVariableFilter } from '@grafana/data';\nimport { sceneGraph } from '../core/sceneGraph';\nimport { SceneObject, SceneObjectState } from '../core/types';\nimport { DataQueryExtended, SceneQueryRunner } from '../querying/SceneQueryRunner';\nimport { DataSourceRef } from '@grafana/schema';\n\nexport function isVariableValueEqual(a: VariableValue | null | undefined, b: VariableValue | null | undefined) {\n  if (a === b) {\n    return true;\n  }\n\n  return isEqual(a, b);\n}\n\nexport function safeStringifyValue(value: unknown) {\n  // Avoid circular references ignoring those references\n  const getCircularReplacer = () => {\n    const seen = new WeakSet();\n    return (_: string, value: object | null) => {\n      if (typeof value === 'object' && value !== null) {\n        if (seen.has(value)) {\n          return;\n        }\n        seen.add(value);\n      }\n      return value;\n    };\n  };\n\n  try {\n    return JSON.stringify(value, getCircularReplacer());\n  } catch (error) {\n    console.error(error);\n  }\n\n  return '';\n}\n\nexport function renderPrometheusLabelFilters(filters: AdHocVariableFilter[]) {\n  return filters.map((filter) => renderFilter(filter)).join(',');\n}\n\nfunction renderFilter(filter: AdHocVariableFilter) {\n  let value = '';\n\n  if (filter.operator === '=~' || filter.operator === '!~¨') {\n    value = escapeLabelValueInRegexSelector(filter.value);\n  } else {\n    value = escapeLabelValueInExactSelector(filter.value);\n  }\n\n  return `${filter.key}${filter.operator}\"${value}\"`;\n}\n\n// based on the openmetrics-documentation, the 3 symbols we have to handle are:\n// - \\n ... the newline character\n// - \\  ... the backslash character\n// - \"  ... the double-quote character\nexport function escapeLabelValueInExactSelector(labelValue: string): string {\n  return labelValue.replace(/\\\\/g, '\\\\\\\\').replace(/\\n/g, '\\\\n').replace(/\"/g, '\\\\\"');\n}\n\nexport function escapeLabelValueInRegexSelector(labelValue: string): string {\n  return escapeLabelValueInExactSelector(escapeLokiRegexp(labelValue));\n}\n\nexport function isRegexSelector(selector?: string) {\n  if (selector && (selector.includes('=~') || selector.includes('!~'))) {\n    return true;\n  }\n  return false;\n}\n\n// Loki regular-expressions use the RE2 syntax (https://github.com/google/re2/wiki/Syntax),\n// so every character that matches something in that list has to be escaped.\n// the list of meta characters is: *+?()|\\.[]{}^$\n// we make a javascript regular expression that matches those characters:\nconst RE2_METACHARACTERS = /[*+?()|\\\\.\\[\\]{}^$]/g;\nfunction escapeLokiRegexp(value: string): string {\n  return value.replace(RE2_METACHARACTERS, '\\\\$&');\n}\n\n/**\n * Get all queries in the scene that have the same datasource as provided source object\n */\nexport function getQueriesForVariables(\n  sourceObject: SceneObject<SceneObjectState & { datasource: DataSourceRef | null }>\n) {\n  const runners = sceneGraph.findAllObjects(\n    sourceObject.getRoot(),\n    (o) => o instanceof SceneQueryRunner\n  ) as SceneQueryRunner[];\n\n  const applicableRunners = filterOutInactiveRunnerDuplicates(runners).filter((r) => {\n    return r.state.datasource?.uid === sourceObject.state.datasource?.uid;\n  });\n\n  if (applicableRunners.length === 0) {\n    return [];\n  }\n\n  const result: DataQueryExtended[] = [];\n  applicableRunners.forEach((r) => {\n    result.push(...r.state.queries);\n  });\n\n  return result;\n}\n\n// Filters out inactive runner duplicates, keeping only the ones that are currently active.\n// This is needed for scnearios whan a query runner is cloned and the original is not removed but de-activated.\n// Can happen i.e. when editing a panel in Grafana Core dashboards.\nfunction filterOutInactiveRunnerDuplicates(runners: SceneQueryRunner[]) {\n  // Group items by key\n  const groupedItems: { [key: string]: SceneQueryRunner[] } = {};\n\n  for (const item of runners) {\n    if (item.state.key) {\n      if (!(item.state.key in groupedItems)) {\n        groupedItems[item.state.key] = [];\n      }\n      groupedItems[item.state.key].push(item);\n    }\n  }\n\n  // Filter out inactive items and concatenate active items\n  return Object.values(groupedItems).flatMap((group) => {\n    const activeItems = group.filter((item) => item.isActive);\n    // Keep inactive items if there's only one item with the key\n    if (activeItems.length === 0 && group.length === 1) {\n      return group;\n    }\n    return activeItems;\n  });\n}\n\nexport function escapeUrlPipeDelimiters(value: string | undefined): string {\n  if (value === null || value === undefined) {\n    return '';\n  }\n\n  // Replace the pipe due to using it as a filter separator\n  return (value = /\\|/g[Symbol.replace](value, '__gfp__'));\n}\n\nexport function escapeUrlCommaDelimiters(value: string | undefined): string {\n  if (value === null || value === undefined) {\n    return '';\n  }\n\n  // Replace the comma due to using it as a value/label separator\n  return /,/g[Symbol.replace](value, '__gfc__');\n}\n\nexport function unescapeUrlDelimiters(value: string | undefined): string {\n  if (value === null || value === undefined) {\n    return '';\n  }\n\n  value = /__gfp__/g[Symbol.replace](value, '|');\n  value = /__gfc__/g[Symbol.replace](value, ',');\n\n  return value;\n}\n\nexport function toUrlCommaDelimitedString(key: string, label?: string): string {\n  // Omit for identical key/label or when label is not set at all\n  if (!label || key === label) {\n    return escapeUrlCommaDelimiters(key);\n  }\n\n  return [key, label].map(escapeUrlCommaDelimiters).join(',');\n}\n"],"names":["value"],"mappings":"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"}
+{"version":3,"file":"utils.js","sources":["../../../src/variables/utils.ts"],"sourcesContent":["import { isEqual } from 'lodash';\nimport { VariableValue } from './types';\nimport { AdHocVariableFilter } from '@grafana/data';\nimport { sceneGraph } from '../core/sceneGraph';\nimport { SceneObject, SceneObjectState } from '../core/types';\nimport { DataQueryExtended, SceneQueryRunner } from '../querying/SceneQueryRunner';\nimport { DataSourceRef } from '@grafana/schema';\n\nexport function isVariableValueEqual(a: VariableValue | null | undefined, b: VariableValue | null | undefined) {\n  if (a === b) {\n    return true;\n  }\n\n  return isEqual(a, b);\n}\n\nexport function safeStringifyValue(value: unknown) {\n  // Avoid circular references ignoring those references\n  const getCircularReplacer = () => {\n    const seen = new WeakSet();\n    return (_: string, value: object | null) => {\n      if (typeof value === 'object' && value !== null) {\n        if (seen.has(value)) {\n          return;\n        }\n        seen.add(value);\n      }\n      return value;\n    };\n  };\n\n  try {\n    return JSON.stringify(value, getCircularReplacer());\n  } catch (error) {\n    console.error(error);\n  }\n\n  return '';\n}\n\nexport function renderPrometheusLabelFilters(filters: AdHocVariableFilter[]) {\n  return filters.map((filter) => renderFilter(filter)).join(',');\n}\n\nfunction renderFilter(filter: AdHocVariableFilter) {\n  let value = '';\n\n  if (filter.operator === '=~' || filter.operator === '!~¨') {\n    value = escapeLabelValueInRegexSelector(filter.value);\n  } else {\n    value = escapeLabelValueInExactSelector(filter.value);\n  }\n\n  return `${filter.key}${filter.operator}\"${value}\"`;\n}\n\n// based on the openmetrics-documentation, the 3 symbols we have to handle are:\n// - \\n ... the newline character\n// - \\  ... the backslash character\n// - \"  ... the double-quote character\nexport function escapeLabelValueInExactSelector(labelValue: string): string {\n  return labelValue.replace(/\\\\/g, '\\\\\\\\').replace(/\\n/g, '\\\\n').replace(/\"/g, '\\\\\"');\n}\n\nexport function escapeLabelValueInRegexSelector(labelValue: string): string {\n  return escapeLabelValueInExactSelector(escapeLokiRegexp(labelValue));\n}\n\nexport function isRegexSelector(selector?: string) {\n  if (selector && (selector.includes('=~') || selector.includes('!~'))) {\n    return true;\n  }\n  return false;\n}\n\n// Loki regular-expressions use the RE2 syntax (https://github.com/google/re2/wiki/Syntax),\n// so every character that matches something in that list has to be escaped.\n// the list of meta characters is: *+?()|\\.[]{}^$\n// we make a javascript regular expression that matches those characters:\nconst RE2_METACHARACTERS = /[*+?()|\\\\.\\[\\]{}^$]/g;\nfunction escapeLokiRegexp(value: string): string {\n  return value.replace(RE2_METACHARACTERS, '\\\\$&');\n}\n\n/**\n * Get all queries in the scene that have the same datasource as provided source object\n */\nexport function getQueriesForVariables(\n  sourceObject: SceneObject<SceneObjectState & { datasource: DataSourceRef | null }>\n) {\n  const runners = sceneGraph.findAllObjects(\n    sourceObject.getRoot(),\n    (o) => o instanceof SceneQueryRunner\n  ) as SceneQueryRunner[];\n\n  const applicableRunners = filterOutInactiveRunnerDuplicates(runners).filter((r) => {\n    return r.state.datasource?.uid === sourceObject.state.datasource?.uid;\n  });\n\n  if (applicableRunners.length === 0) {\n    return [];\n  }\n\n  const result: DataQueryExtended[] = [];\n  applicableRunners.forEach((r) => {\n    result.push(...r.state.queries);\n  });\n\n  return result;\n}\n\n// Filters out inactive runner duplicates, keeping only the ones that are currently active.\n// This is needed for scnearios whan a query runner is cloned and the original is not removed but de-activated.\n// Can happen i.e. when editing a panel in Grafana Core dashboards.\nfunction filterOutInactiveRunnerDuplicates(runners: SceneQueryRunner[]) {\n  // Group items by key\n  const groupedItems: { [key: string]: SceneQueryRunner[] } = {};\n\n  for (const item of runners) {\n    if (item.state.key) {\n      if (!(item.state.key in groupedItems)) {\n        groupedItems[item.state.key] = [];\n      }\n      groupedItems[item.state.key].push(item);\n    }\n  }\n\n  // Filter out inactive items and concatenate active items\n  return Object.values(groupedItems).flatMap((group) => {\n    const activeItems = group.filter((item) => item.isActive);\n    // Keep inactive items if there's only one item with the key\n    if (activeItems.length === 0 && group.length === 1) {\n      return group;\n    }\n    return activeItems;\n  });\n}\n"],"names":["value"],"mappings":"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"}

package/dist/index.d.ts

@@ -5,6 +5,7 @@ import * as rxjs from 'rxjs';
 import { Observable, Unsubscribable, MonoTypeOperatorFunction, Subscription, ReplaySubject } from 'rxjs';
 import * as _grafana_schema from '@grafana/schema';
 import { VariableType, VariableHide, TimeZone, DataTopic, DataSourceRef, DataQuery as DataQuery$1, VariableRefresh, LoadingState, DashboardCursorSync, MatcherConfig, TableFieldOptions } from '@grafana/schema';
+import { VariableInterpolation } from '@grafana/runtime';
 import { PanelContext, IconName } from '@grafana/ui';
 import ReactGridLayout from 'react-grid-layout';
 import { RouteComponentProps } from 'react-router-dom';
@@ -881,8 +882,6 @@ interface GroupByVariableState extends MultiValueVariableState {
     name: string;
     /** The visible keys to group on */
     defaultOptions?: MetricFindValue[];
-    /** Options obtained through URL sync */
-    urlOptions?: MetricFindValue[];
     /** Base filters to always apply when looking up keys */
     baseFilters?: AdHocVariableFilter[];
     /** Datasource to use for getTagKeys and also controls which scene queries the group by should apply to */
@@ -918,7 +917,6 @@ type getTagKeysProvider = (set: GroupByVariable, currentKey: string | null) => P
 declare class GroupByVariable extends MultiValueVariable<GroupByVariableState> {
     static Component: typeof GroupByVariableRenderer;
     isLazy: boolean;
-    protected _urlSync: SceneObjectUrlSyncHandler;
     validateAndUpdate(): Observable<ValidateAndUpdateResult>;
     private _updateValueGivenNewOptions;
     getValueOptions(args: VariableGetOptionsArgs): Observable<VariableValueOption[]>;
@@ -1017,8 +1015,14 @@ declare function getData(sceneObject: SceneObject): SceneDataProvider;
 declare function getLayout(scene: SceneObject): SceneLayout | null;
 /**
  * Interpolates the given string using the current scene object as context.   *
+ *
+ * Note: the interpolations array will be mutated by adding information about variables that
+ * have been interpolated during replacement. Variables that were specified in the target but not found in
+ * the list of available variables are also added to the array. See {@link VariableInterpolation} for more details.
+ *
+ * @param {VariableInterpolation[]} interpolations an optional array that is updated with interpolated variables.
  */
-declare function interpolate(sceneObject: SceneObject, value: string | undefined | null, scopedVars?: ScopedVars, format?: string | VariableCustomFormatterFn): string;
+declare function interpolate(sceneObject: SceneObject, value: string | undefined | null, scopedVars?: ScopedVars, format?: string | VariableCustomFormatterFn, interpolations?: VariableInterpolation[]): string;
 /**
  * Checks if the variable is currently loading or waiting to update.
  * It also returns true if a dependency of the variable is loading.

package/dist/index.js

@@ -1304,7 +1304,7 @@ function lookupVariable(name, sceneObject) {
   return null;
 }
 
-function sceneInterpolator(sceneObject, target, scopedVars, format) {
+function sceneInterpolator(sceneObject, target, scopedVars, format, interpolations) {
   if (!target) {
     return target != null ? target : "";
   }
@@ -1314,9 +1314,16 @@ function sceneInterpolator(sceneObject, target, scopedVars, format) {
     const fmt = fmt2 || fmt3 || format;
     const variable = lookupFormatVariable(variableName, match, scopedVars, sceneObject);
     if (!variable) {
+      if (interpolations) {
+        interpolations.push({ match, variableName, fieldPath, format: fmt, value: match, found: false });
+      }
       return match;
     }
-    return formatValue(variable, variable.getValue(fieldPath), fmt);
+    const value = formatValue(variable, variable.getValue(fieldPath), fmt);
+    if (interpolations) {
+      interpolations.push({ match, variableName, fieldPath, format: fmt, value, found: value !== match });
+    }
+    return value;
   });
 }
 function lookupFormatVariable(name, match, scopedVars, sceneObject) {
@@ -1455,11 +1462,11 @@ function getLayout(scene) {
   }
   return null;
 }
-function interpolate(sceneObject, value, scopedVars, format) {
+function interpolate(sceneObject, value, scopedVars, format, interpolations) {
   if (value === "" || value == null) {
     return "";
   }
-  return sceneInterpolator(sceneObject, value, scopedVars, format);
+  return sceneInterpolator(sceneObject, value, scopedVars, format, interpolations);
 }
 function hasVariableDependencyInLoadingState(sceneObject) {
   if (!sceneObject.variableDependency) {
@@ -2307,7 +2314,7 @@ class SceneTimeRangeCompare extends SceneObjectBase {
 SceneTimeRangeCompare.Component = SceneTimeRangeCompareRenderer;
 function SceneTimeRangeCompareRenderer({ model }) {
   var _a;
-  const styles = ui.useStyles2(getStyles$9);
+  const styles = ui.useStyles2(getStyles$a);
   const { compareWith, compareOptions } = model.useState();
   const [previousCompare, setPreviousCompare] = React__default["default"].useState(compareWith);
   const previousValue = (_a = compareOptions.find(({ value: value2 }) => value2 === previousCompare)) != null ? _a : PREVIOUS_PERIOD_COMPARE_OPTION;
@@ -2347,7 +2354,7 @@ function SceneTimeRangeCompareRenderer({ model }) {
     isOpen: false
   }, previousValue.label));
 }
-function getStyles$9(theme) {
+function getStyles$a(theme) {
   return {
     previewButton: css.css({
       "&:disabled": {
@@ -2840,59 +2847,6 @@ class CustomAllValue {
   }
 }
 
-class GroupByVariableUrlSyncHandler {
-  constructor(_sceneObject) {
-    this._sceneObject = _sceneObject;
-  }
-  getKey() {
-    return `var-${this._sceneObject.state.name}`;
-  }
-  getKeys() {
-    if (this._sceneObject.state.skipUrlSync) {
-      return [];
-    }
-    return [this.getKey()];
-  }
-  getUrlState() {
-    if (this._sceneObject.state.skipUrlSync) {
-      return {};
-    }
-    let { value: values, text: texts } = this._sceneObject.state;
-    values = Array.isArray(values) ? values : [values];
-    texts = Array.isArray(texts) ? texts : [texts];
-    const urlValue = lodash.zip(values, texts).map(toUrlValues);
-    return { [this.getKey()]: urlValue };
-  }
-  updateFromUrl(values) {
-    let urlValue = values[this.getKey()];
-    if (urlValue != null) {
-      if (!this._sceneObject.isActive) {
-        this._sceneObject.skipNextValidation = true;
-      }
-      urlValue = Array.isArray(urlValue) ? urlValue : [urlValue];
-      const valuesLabelsPairs = urlValue.map((value) => value ? value.split(",") : [value]);
-      let [values2, labels] = lodash.unzip(valuesLabelsPairs);
-      values2 = (values2 != null ? values2 : []).map(unescapeUrlDelimiters);
-      labels = (labels != null ? labels : []).map(unescapeUrlDelimiters);
-      this._sceneObject.setState({
-        urlOptions: values2.map((value, idx) => ({
-          value,
-          text: labels[idx]
-        }))
-      });
-      this._sceneObject.changeValueTo(values2, labels);
-    }
-  }
-}
-function toUrlValues([value, label]) {
-  if (value === void 0 || value === null) {
-    return "";
-  }
-  value = String(value);
-  label = label === void 0 || label === null ? value : String(label);
-  return toUrlCommaDelimitedString(value, label);
-}
-
 var __defProp$z = Object.defineProperty;
 var __defProps$n = Object.defineProperties;
 var __getOwnPropDescs$n = Object.getOwnPropertyDescriptors;
@@ -2929,7 +2883,6 @@ class GroupByVariable extends MultiValueVariable {
       noValueOnClear: true
     }));
     this.isLazy = true;
-    this._urlSync = new GroupByVariableUrlSyncHandler(this);
     this._getKeys = async (ds) => {
       var _a, _b, _c;
       const override = await ((_b = (_a = this.state).getTagKeysProvider) == null ? void 0 : _b.call(_a, this, null));
@@ -2979,11 +2932,9 @@ class GroupByVariable extends MultiValueVariable {
     this.setState(stateUpdate);
   }
   getValueOptions(args) {
-    var _a;
-    const urlOptions = (_a = this.state.urlOptions) != null ? _a : [];
     if (this.state.defaultOptions) {
       return rxjs.of(
-        lodash.unionBy(this.state.defaultOptions, urlOptions, "value").map((o) => ({
+        this.state.defaultOptions.map((o) => ({
           label: o.text,
           value: String(o.value)
         }))
@@ -2999,7 +2950,7 @@ class GroupByVariable extends MultiValueVariable {
         return rxjs.from(this._getKeys(ds)).pipe(
           rxjs.take(1),
           rxjs.mergeMap((data) => {
-            const a = lodash.unionBy(data, urlOptions, "value").map((i) => {
+            const a = data.map((i) => {
               return {
                 label: i.text,
                 value: i.value ? String(i.value) : i.text
@@ -3017,24 +2968,14 @@ class GroupByVariable extends MultiValueVariable {
 }
 GroupByVariable.Component = GroupByVariableRenderer;
 function GroupByVariableRenderer({ model }) {
-  const { value, text, key, maxVisibleValues, noValueOnClear } = model.useState();
-  const values = React.useMemo(() => {
-    const arrayValue = lodash.isArray(value) ? value : [value];
-    const arrayText = lodash.isArray(text) ? text : [text];
-    return arrayValue.map((value2, idx) => {
-      var _a;
-      return {
-        value: value2,
-        label: String((_a = arrayText[idx]) != null ? _a : value2)
-      };
-    });
-  }, [value, text]);
+  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(values);
+  const [uncommittedValue, setUncommittedValue] = React.useState(arrayValue);
   React.useEffect(() => {
-    setUncommittedValue(values);
-  }, [values]);
+    setUncommittedValue(arrayValue);
+  }, [arrayValue]);
   const onInputChange = model.onSearchChange ? (value2, meta) => {
     if (meta.action === "input-change") {
       model.onSearchChange(value2);
@@ -3059,13 +3000,13 @@ function GroupByVariableRenderer({ model }) {
     isLoading: isFetchingOptions,
     onInputChange,
     onBlur: () => {
-      model.changeValueTo(uncommittedValue.map((x) => x.value));
+      model.changeValueTo(uncommittedValue);
     },
     onChange: (newValue, action) => {
       if (action.action === "clear" && noValueOnClear) {
         model.changeValueTo([]);
       }
-      setUncommittedValue(newValue);
+      setUncommittedValue(newValue.map((x) => x.value));
     },
     onOpenMenu: async () => {
       setIsFetchingOptions(true);
@@ -3094,7 +3035,7 @@ function LoadingIndicator(props) {
 }
 
 function ControlsLabel(props) {
-  const styles = ui.useStyles2(getStyles$8);
+  const styles = ui.useStyles2(getStyles$9);
   const theme = ui.useTheme2();
   const isVertical = props.layout === "vertical";
   const loadingIndicator = Boolean(props.isLoading) ? /* @__PURE__ */ React__default["default"].createElement("div", {
@@ -3157,7 +3098,7 @@ function ControlsLabel(props) {
   }
   return labelElement;
 }
-const getStyles$8 = (theme) => ({
+const getStyles$9 = (theme) => ({
   horizontalLabel: css.css({
     background: theme.isDark ? theme.colors.background.primary : theme.colors.background.secondary,
     display: `flex`,
@@ -3219,7 +3160,7 @@ function keyLabelToOption(key, label) {
 }
 function AdHocFilterRenderer({ filter, model }) {
   var _a, _b;
-  const styles = ui.useStyles2(getStyles$7);
+  const styles = ui.useStyles2(getStyles$8);
   const [state, setState] = React.useState({});
   const keyValue = keyLabelToOption(filter.key, filter.keyLabel);
   const valueValue = keyLabelToOption(filter.value, filter.valueLabel);
@@ -3312,7 +3253,7 @@ function AdHocFilterRenderer({ filter, model }) {
     onClick: () => model._removeFilter(filter)
   }));
 }
-const getStyles$7 = (theme) => ({
+const getStyles$8 = (theme) => ({
   field: css.css({
     marginBottom: 0
   }),
@@ -3388,7 +3329,7 @@ class AdHocFiltersVariableUrlSyncHandler {
     if (filters.length === 0) {
       return { [this.getKey()]: [""] };
     }
-    const value = filters.map((filter) => toArray(filter).map(escapeUrlPipeDelimiters).join("|"));
+    const value = filters.map((filter) => toArray(filter).map(escapePipeDelimiters).join("|"));
     return { [this.getKey()]: value };
   }
   updateFromUrl(values) {
@@ -3408,13 +3349,39 @@ function deserializeUrlToFilters(value) {
   const filter = toFilter(value);
   return filter === null ? [] : [filter];
 }
+function escapePipeDelimiters(value) {
+  if (value === null || value === void 0) {
+    return "";
+  }
+  return value = /\|/g[Symbol.replace](value, "__gfp__");
+}
+function escapeCommaDelimiters(value) {
+  if (value === null || value === void 0) {
+    return "";
+  }
+  return /,/g[Symbol.replace](value, "__gfc__");
+}
+function unescapeDelimiters(value) {
+  if (value === null || value === void 0) {
+    return "";
+  }
+  value = /__gfp__/g[Symbol.replace](value, "|");
+  value = /__gfc__/g[Symbol.replace](value, ",");
+  return value;
+}
 function toArray(filter) {
   return [
-    toUrlCommaDelimitedString(filter.key, filter.keyLabel),
+    toCommaDelimitedString(filter.key, filter.keyLabel),
     filter.operator,
-    toUrlCommaDelimitedString(filter.value, filter.valueLabel)
+    toCommaDelimitedString(filter.value, filter.valueLabel)
   ];
 }
+function toCommaDelimitedString(key, label) {
+  if (!label || key === label) {
+    return escapeCommaDelimiters(key);
+  }
+  return [key, label].map(escapeCommaDelimiters).join(",");
+}
 function toFilter(urlValue) {
   if (typeof urlValue !== "string" || urlValue.length === 0) {
     return null;
@@ -3423,7 +3390,7 @@ function toFilter(urlValue) {
     const [key2, label] = v.split(",");
     acc.push(key2, label != null ? label : key2);
     return acc;
-  }, []).map(unescapeUrlDelimiters);
+  }, []).map(unescapeDelimiters);
   return {
     key,
     keyLabel,
@@ -3580,7 +3547,7 @@ function renderExpression(builder, filters) {
 }
 function AdHocFiltersVariableRenderer({ model }) {
   const { filters, readOnly, addFilterButtonText } = model.useState();
-  const styles = ui.useStyles2(getStyles$6);
+  const styles = ui.useStyles2(getStyles$7);
   return /* @__PURE__ */ React__default["default"].createElement("div", {
     className: styles.wrapper
   }, filters.map((filter, index) => /* @__PURE__ */ React__default["default"].createElement(React__default["default"].Fragment, {
@@ -3594,7 +3561,7 @@ function AdHocFiltersVariableRenderer({ model }) {
     addFilterButtonText
   }));
 }
-const getStyles$6 = (theme) => ({
+const getStyles$7 = (theme) => ({
   wrapper: css.css({
     display: "flex",
     gap: theme.spacing(2),
@@ -4133,32 +4100,6 @@ function filterOutInactiveRunnerDuplicates(runners) {
     return activeItems;
   });
 }
-function escapeUrlPipeDelimiters(value) {
-  if (value === null || value === void 0) {
-    return "";
-  }
-  return value = /\|/g[Symbol.replace](value, "__gfp__");
-}
-function escapeUrlCommaDelimiters(value) {
-  if (value === null || value === void 0) {
-    return "";
-  }
-  return /,/g[Symbol.replace](value, "__gfc__");
-}
-function unescapeUrlDelimiters(value) {
-  if (value === null || value === void 0) {
-    return "";
-  }
-  value = /__gfp__/g[Symbol.replace](value, "|");
-  value = /__gfc__/g[Symbol.replace](value, ",");
-  return value;
-}
-function toUrlCommaDelimitedString(key, label) {
-  if (!label || key === label) {
-    return escapeUrlCommaDelimiters(key);
-  }
-  return [key, label].map(escapeUrlCommaDelimiters).join(",");
-}
 
 function isAdHocVariable(variable) {
   return variable.state.type === "adhoc";
@@ -6089,22 +6030,12 @@ function VariableValueSelectWrapper({ variable, layout, showAlways }) {
   if (state.hide === data.VariableHide.hideVariable && !showAlways) {
     return null;
   }
-  if (layout === "vertical") {
-    return /* @__PURE__ */ React__default["default"].createElement("div", {
-      className: verticalContainer,
-      "data-testid": e2eSelectors.selectors.pages.Dashboard.SubMenu.submenuItem
-    }, /* @__PURE__ */ React__default["default"].createElement(VariableLabel, {
-      variable,
-      layout
-    }), /* @__PURE__ */ React__default["default"].createElement(variable.Component, {
-      model: variable
-    }));
-  }
   return /* @__PURE__ */ React__default["default"].createElement("div", {
-    className: containerStyle,
+    className: css.cx(containerStyle, { [verticalContainer]: layout === "vertical" }),
     "data-testid": e2eSelectors.selectors.pages.Dashboard.SubMenu.submenuItem
   }, /* @__PURE__ */ React__default["default"].createElement(VariableLabel, {
-    variable
+    variable,
+    layout
   }), /* @__PURE__ */ React__default["default"].createElement(variable.Component, {
     model: variable
   }));
@@ -6120,18 +6051,15 @@ function VariableLabel({ variable, layout }) {
   return /* @__PURE__ */ React__default["default"].createElement(ControlsLabel, {
     htmlFor: elementId,
     isLoading: state.loading,
-    onCancel: () => {
-      var _a2;
-      return (_a2 = variable.onCancel) == null ? void 0 : _a2.call(variable);
-    },
+    onCancel: variable.onCancel,
     label: labelOrName,
     error: state.error,
     layout,
     description: (_b = state.description) != null ? _b : void 0
   });
 }
-const containerStyle = css.css({ display: "flex" });
-const verticalContainer = css.css({ display: "flex", flexDirection: "column" });
+const containerStyle = css.css({ display: "flex", overflow: "hidden" });
+const verticalContainer = css.css({ flexDirection: "column" });
 
 class VariableValueControl extends SceneObjectBase {
 }
@@ -6422,6 +6350,7 @@ class ConstantVariable extends SceneObjectBase {
 
 function VariableValueSelect({ model }) {
   const { value, key } = model.useState();
+  const styles = ui.useStyles2(getStyles$6);
   const onInputChange = model.onSearchChange ? (value2, meta) => {
     if (meta.action === "input-change") {
       model.onSearchChange(value2);
@@ -6440,7 +6369,8 @@ function VariableValueSelect({ model }) {
     "data-testid": e2eSelectors.selectors.pages.Dashboard.SubMenu.submenuItemValueDropDownValueLinkTexts(`${value}`),
     onChange: (newValue) => {
       model.changeValueTo(newValue.value, newValue.label);
-    }
+    },
+    className: styles.overflow
   });
 }
 function VariableValueSelectMulti({ model }) {
@@ -6457,6 +6387,7 @@ function VariableValueSelectMulti({ model }) {
     }
   } : void 0;
   const placeholder = options.length > 0 ? "Select value" : "";
+  const styles = ui.useStyles2(getStyles$6);
   return /* @__PURE__ */ React__default["default"].createElement(ui.MultiSelect, {
     id: key,
     placeholder,
@@ -6480,7 +6411,8 @@ function VariableValueSelectMulti({ model }) {
         model.changeValueTo([]);
       }
       setUncommittedValue(newValue.map((x) => x.value));
-    }
+    },
+    className: styles.overflow
   });
 }
 function renderSelectForVariable(model) {
@@ -6494,6 +6426,11 @@ function renderSelectForVariable(model) {
     });
   }
 }
+const getStyles$6 = () => ({
+  overflow: css.css({
+    overflow: "hidden"
+  })
+});
 
 var __defProp$i = Object.defineProperty;
 var __getOwnPropSymbols$i = Object.getOwnPropertySymbols;