@grafana/scenes 4.13.0--canary.705.8801395113.0 → 4.13.0

package/dist/esm/variables/components/VariableValueSelect.js

@@ -1,6 +1,7 @@
 import { isArray } from 'lodash';
 import React, { useMemo, useState, useEffect } from 'react';
 import { Select, MultiSelect } from '@grafana/ui';
+import { selectors } from '@grafana/e2e-selectors';
 
 function VariableValueSelect({ model }) {
   const { value, key } = model.useState();
@@ -19,6 +20,7 @@ function VariableValueSelect({ model }) {
     tabSelectsValue: false,
     onInputChange,
     options: model.getOptionsForSelect(),
+    "data-testid": selectors.pages.Dashboard.SubMenu.submenuItemValueDropDownValueLinkTexts(`${value}`),
     onChange: (newValue) => {
       model.changeValueTo(newValue.value, newValue.label);
     }
@@ -55,6 +57,7 @@ function VariableValueSelectMulti({ model }) {
     onBlur: () => {
       model.changeValueTo(uncommittedValue);
     },
+    "data-testid": selectors.pages.Dashboard.SubMenu.submenuItemValueDropDownValueLinkTexts(`${uncommittedValue}`),
     onChange: (newValue, action) => {
       if (action.action === "clear" && noValueOnClear) {
         model.changeValueTo([]);

package/dist/esm/variables/components/VariableValueSelect.js.map

@@ -1 +1 @@
-{"version":3,"file":"VariableValueSelect.js","sources":["../../../../src/variables/components/VariableValueSelect.tsx"],"sourcesContent":["import { isArray } from 'lodash';\nimport React, { useEffect, useMemo, useState } from 'react';\n\nimport { InputActionMeta, MultiSelect, Select } from '@grafana/ui';\n\nimport { SceneComponentProps } from '../../core/types';\nimport { MultiValueVariable } from '../variants/MultiValueVariable';\nimport { VariableValue, VariableValueSingle } from '../types';\n\nexport function VariableValueSelect({ model }: SceneComponentProps<MultiValueVariable>) {\n  const { value, key } = model.useState();\n\n  const onInputChange = model.onSearchChange\n    ? (value: string, meta: InputActionMeta) => {\n        if (meta.action === 'input-change') {\n          model.onSearchChange!(value);\n        }\n      }\n    : undefined;\n\n  return (\n    <Select<VariableValue>\n      id={key}\n      placeholder=\"Select value\"\n      width=\"auto\"\n      value={value}\n      allowCustomValue\n      virtualized\n      tabSelectsValue={false}\n      onInputChange={onInputChange}\n      options={model.getOptionsForSelect()}\n      onChange={(newValue) => {\n        model.changeValueTo(newValue.value!, newValue.label!);\n      }}\n    />\n  );\n}\n\nexport function VariableValueSelectMulti({ model }: SceneComponentProps<MultiValueVariable>) {\n  const { value, key, maxVisibleValues, noValueOnClear } = model.useState();\n  const arrayValue = useMemo(() => (isArray(value) ? value : [value]), [value]);\n  const options = model.getOptionsForSelect();\n\n  // To not trigger queries on every selection we store this state locally here and only update the variable onBlur\n  const [uncommittedValue, setUncommittedValue] = useState(arrayValue);\n\n  // Detect value changes outside\n  useEffect(() => {\n    setUncommittedValue(arrayValue);\n  }, [arrayValue]);\n\n  const onInputChange = model.onSearchChange\n    ? (value: string, meta: InputActionMeta) => {\n        if (meta.action === 'input-change') {\n          model.onSearchChange!(value);\n        }\n      }\n    : undefined;\n\n  const placeholder = options.length > 0 ? 'Select value' : '';\n\n  return (\n    <MultiSelect<VariableValueSingle>\n      id={key}\n      placeholder={placeholder}\n      width=\"auto\"\n      value={uncommittedValue}\n      noMultiValueWrap={true}\n      maxVisibleValues={maxVisibleValues ?? 5}\n      tabSelectsValue={false}\n      virtualized\n      allowCustomValue\n      options={model.getOptionsForSelect()}\n      closeMenuOnSelect={false}\n      isClearable={true}\n      onInputChange={onInputChange}\n      onBlur={() => {\n        model.changeValueTo(uncommittedValue);\n      }}\n      onChange={(newValue, action) => {\n        if (action.action === 'clear' && noValueOnClear) {\n          model.changeValueTo([]);\n        }\n        setUncommittedValue(newValue.map((x) => x.value!));\n      }}\n    />\n  );\n}\n\nexport function renderSelectForVariable(model: MultiValueVariable) {\n  if (model.state.isMulti) {\n    return <VariableValueSelectMulti model={model} />;\n  } else {\n    return <VariableValueSelect model={model} />;\n  }\n}\n"],"names":["value"],"mappings":"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"}
+{"version":3,"file":"VariableValueSelect.js","sources":["../../../../src/variables/components/VariableValueSelect.tsx"],"sourcesContent":["import { isArray } from 'lodash';\nimport React, { useEffect, useMemo, useState } from 'react';\n\nimport { InputActionMeta, MultiSelect, Select } from '@grafana/ui';\n\nimport { SceneComponentProps } from '../../core/types';\nimport { MultiValueVariable } from '../variants/MultiValueVariable';\nimport { VariableValue, VariableValueSingle } from '../types';\nimport { selectors } from '@grafana/e2e-selectors';\n\nexport function VariableValueSelect({ model }: SceneComponentProps<MultiValueVariable>) {\n  const { value, key } = model.useState();\n\n  const onInputChange = model.onSearchChange\n    ? (value: string, meta: InputActionMeta) => {\n        if (meta.action === 'input-change') {\n          model.onSearchChange!(value);\n        }\n      }\n    : undefined;\n\n  return (\n    <Select<VariableValue>\n      id={key}\n      placeholder=\"Select value\"\n      width=\"auto\"\n      value={value}\n      allowCustomValue\n      virtualized\n      tabSelectsValue={false}\n      onInputChange={onInputChange}\n      options={model.getOptionsForSelect()}\n      data-testid={selectors.pages.Dashboard.SubMenu.submenuItemValueDropDownValueLinkTexts(`${value}`)}\n      onChange={(newValue) => {\n        model.changeValueTo(newValue.value!, newValue.label!);\n      }}\n    />\n  );\n}\n\nexport function VariableValueSelectMulti({ model }: SceneComponentProps<MultiValueVariable>) {\n  const { value, key, maxVisibleValues, noValueOnClear } = model.useState();\n  const arrayValue = useMemo(() => (isArray(value) ? value : [value]), [value]);\n  const options = model.getOptionsForSelect();\n\n  // To not trigger queries on every selection we store this state locally here and only update the variable onBlur\n  const [uncommittedValue, setUncommittedValue] = useState(arrayValue);\n\n  // Detect value changes outside\n  useEffect(() => {\n    setUncommittedValue(arrayValue);\n  }, [arrayValue]);\n\n  const onInputChange = model.onSearchChange\n    ? (value: string, meta: InputActionMeta) => {\n        if (meta.action === 'input-change') {\n          model.onSearchChange!(value);\n        }\n      }\n    : undefined;\n\n  const placeholder = options.length > 0 ? 'Select value' : '';\n\n  return (\n    <MultiSelect<VariableValueSingle>\n      id={key}\n      placeholder={placeholder}\n      width=\"auto\"\n      value={uncommittedValue}\n      noMultiValueWrap={true}\n      maxVisibleValues={maxVisibleValues ?? 5}\n      tabSelectsValue={false}\n      virtualized\n      allowCustomValue\n      options={model.getOptionsForSelect()}\n      closeMenuOnSelect={false}\n      isClearable={true}\n      onInputChange={onInputChange}\n      onBlur={() => {\n        model.changeValueTo(uncommittedValue);\n      }}\n      data-testid={selectors.pages.Dashboard.SubMenu.submenuItemValueDropDownValueLinkTexts(`${uncommittedValue}`)}\n      onChange={(newValue, action) => {\n        if (action.action === 'clear' && noValueOnClear) {\n          model.changeValueTo([]);\n        }\n        setUncommittedValue(newValue.map((x) => x.value!));\n      }}\n    />\n  );\n}\n\nexport function renderSelectForVariable(model: MultiValueVariable) {\n  if (model.state.isMulti) {\n    return <VariableValueSelectMulti model={model} />;\n  } else {\n    return <VariableValueSelect model={model} />;\n  }\n}\n"],"names":["value"],"mappings":"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"}

package/dist/esm/variables/components/VariableValueSelectors.js

@@ -4,6 +4,7 @@ import { SceneObjectBase, useSceneObjectState } from '../../core/SceneObjectBase
 import { sceneGraph } from '../../core/sceneGraph/index.js';
 import { ControlsLabel } from '../../utils/ControlsLabel.js';
 import { css } from '@emotion/css';
+import { selectors } from '@grafana/e2e-selectors';
 
 class VariableValueSelectors extends SceneObjectBase {
 }
@@ -23,7 +24,8 @@ function VariableValueSelectWrapper({ variable, layout, showAlways }) {
   }
   if (layout === "vertical") {
     return /* @__PURE__ */ React.createElement("div", {
-      className: verticalContainer
+      className: verticalContainer,
+      "data-testid": selectors.pages.Dashboard.SubMenu.submenuItem
     }, /* @__PURE__ */ React.createElement(VariableLabel, {
       variable,
       layout
@@ -32,7 +34,8 @@ function VariableValueSelectWrapper({ variable, layout, showAlways }) {
     }));
   }
   return /* @__PURE__ */ React.createElement("div", {
-    className: containerStyle
+    className: containerStyle,
+    "data-testid": selectors.pages.Dashboard.SubMenu.submenuItem
   }, /* @__PURE__ */ React.createElement(VariableLabel, {
     variable
   }), /* @__PURE__ */ React.createElement(variable.Component, {

package/dist/esm/variables/components/VariableValueSelectors.js.map

@@ -1 +1 @@
-{"version":3,"file":"VariableValueSelectors.js","sources":["../../../../src/variables/components/VariableValueSelectors.tsx"],"sourcesContent":["import React from 'react';\n\nimport { VariableHide } from '@grafana/data';\n\nimport { SceneObjectBase, useSceneObjectState } from '../../core/SceneObjectBase';\nimport { sceneGraph } from '../../core/sceneGraph';\nimport { ControlsLayout, SceneComponentProps, SceneObjectState } from '../../core/types';\nimport { SceneVariable, SceneVariableState } from '../types';\nimport { ControlsLabel } from '../../utils/ControlsLabel';\nimport { css } from '@emotion/css';\n\nexport interface VariableValueSelectorsState extends SceneObjectState {\n  layout?: ControlsLayout;\n}\n\nexport class VariableValueSelectors extends SceneObjectBase<VariableValueSelectorsState> {\n  public static Component = VariableValueSelectorsRenderer;\n}\n\nfunction VariableValueSelectorsRenderer({ model }: SceneComponentProps<VariableValueSelectors>) {\n  const variables = sceneGraph.getVariables(model)!.useState();\n\n  return (\n    <>\n      {variables.variables.map((variable) => (\n        <VariableValueSelectWrapper key={variable.state.key} variable={variable} layout={model.state.layout} />\n      ))}\n    </>\n  );\n}\n\ninterface VariableSelectProps {\n  layout?: ControlsLayout;\n  variable: SceneVariable;\n  /** To override hide from VariableValueSelectByName  */\n  showAlways?: boolean;\n}\n\nexport function VariableValueSelectWrapper({ variable, layout, showAlways }: VariableSelectProps) {\n  const state = useSceneObjectState<SceneVariableState>(variable, { shouldActivateOrKeepAlive: true });\n\n  if (state.hide === VariableHide.hideVariable && !showAlways) {\n    return null;\n  }\n\n  if (layout === 'vertical') {\n    return (\n      <div className={verticalContainer}>\n        <VariableLabel variable={variable} layout={layout} />\n        <variable.Component model={variable} />\n      </div>\n    );\n  }\n\n  return (\n    <div className={containerStyle}>\n      <VariableLabel variable={variable} />\n      <variable.Component model={variable} />\n    </div>\n  );\n}\n\nfunction VariableLabel({ variable, layout }: VariableSelectProps) {\n  const { state } = variable;\n\n  if (variable.state.hide === VariableHide.hideLabel) {\n    return null;\n  }\n\n  const elementId = `var-${state.key}`;\n  const labelOrName = state.label ?? state.name;\n\n  return (\n    <ControlsLabel\n      htmlFor={elementId}\n      isLoading={state.loading}\n      onCancel={() => variable.onCancel?.()}\n      label={labelOrName}\n      error={state.error}\n      layout={layout}\n      description={state.description ?? undefined}\n    />\n  );\n}\n\nconst containerStyle = css({ display: 'flex' });\nconst verticalContainer = css({ display: 'flex', flexDirection: 'column' });\n"],"names":["_a"],"mappings":"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"}
+{"version":3,"file":"VariableValueSelectors.js","sources":["../../../../src/variables/components/VariableValueSelectors.tsx"],"sourcesContent":["import React from 'react';\n\nimport { VariableHide } from '@grafana/data';\n\nimport { SceneObjectBase, useSceneObjectState } from '../../core/SceneObjectBase';\nimport { sceneGraph } from '../../core/sceneGraph';\nimport { ControlsLayout, SceneComponentProps, SceneObjectState } from '../../core/types';\nimport { SceneVariable, SceneVariableState } from '../types';\nimport { ControlsLabel } from '../../utils/ControlsLabel';\nimport { css } from '@emotion/css';\nimport { selectors } from '@grafana/e2e-selectors';\n\nexport interface VariableValueSelectorsState extends SceneObjectState {\n  layout?: ControlsLayout;\n}\n\nexport class VariableValueSelectors extends SceneObjectBase<VariableValueSelectorsState> {\n  public static Component = VariableValueSelectorsRenderer;\n}\n\nfunction VariableValueSelectorsRenderer({ model }: SceneComponentProps<VariableValueSelectors>) {\n  const variables = sceneGraph.getVariables(model)!.useState();\n\n  return (\n    <>\n      {variables.variables.map((variable) => (\n        <VariableValueSelectWrapper key={variable.state.key} variable={variable} layout={model.state.layout} />\n      ))}\n    </>\n  );\n}\n\ninterface VariableSelectProps {\n  layout?: ControlsLayout;\n  variable: SceneVariable;\n  /** To override hide from VariableValueSelectByName  */\n  showAlways?: boolean;\n}\n\nexport function VariableValueSelectWrapper({ variable, layout, showAlways }: VariableSelectProps) {\n  const state = useSceneObjectState<SceneVariableState>(variable, { shouldActivateOrKeepAlive: true });\n\n  if (state.hide === VariableHide.hideVariable && !showAlways) {\n    return null;\n  }\n\n  if (layout === 'vertical') {\n    return (\n      <div className={verticalContainer} data-testid={selectors.pages.Dashboard.SubMenu.submenuItem}>\n        <VariableLabel variable={variable} layout={layout} />\n        <variable.Component model={variable} />\n      </div>\n    );\n  }\n\n  return (\n    <div className={containerStyle} data-testid={selectors.pages.Dashboard.SubMenu.submenuItem}>\n      <VariableLabel variable={variable} />\n      <variable.Component model={variable} />\n    </div>\n  );\n}\n\nfunction VariableLabel({ variable, layout }: VariableSelectProps) {\n  const { state } = variable;\n\n  if (variable.state.hide === VariableHide.hideLabel) {\n    return null;\n  }\n\n  const elementId = `var-${state.key}`;\n  const labelOrName = state.label ?? state.name;\n\n  return (\n    <ControlsLabel\n      htmlFor={elementId}\n      isLoading={state.loading}\n      onCancel={() => variable.onCancel?.()}\n      label={labelOrName}\n      error={state.error}\n      layout={layout}\n      description={state.description ?? undefined}\n    />\n  );\n}\n\nconst containerStyle = css({ display: 'flex' });\nconst verticalContainer = css({ display: 'flex', flexDirection: 'column' });\n"],"names":["_a"],"mappings":"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"}

package/dist/esm/variables/groupby/GroupByVariable.js

@@ -5,9 +5,8 @@ import { MultiValueVariable } from '../variants/MultiValueVariable.js';
 import { map, of, from, mergeMap, take, lastValueFrom } from 'rxjs';
 import { getDataSource } from '../../utils/getDataSource.js';
 import { MultiSelect } from '@grafana/ui';
-import { unionBy, isArray } from 'lodash';
+import { isArray } from 'lodash';
 import { getQueriesForVariables } from '../utils.js';
-import { GroupByVariableUrlSyncHandler } from './GroupByVariableUrlSyncHandler.js';
 
 var __defProp = Object.defineProperty;
 var __defProps = Object.defineProperties;
@@ -45,7 +44,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));
@@ -95,11 +93,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 of(
-        unionBy(this.state.defaultOptions, urlOptions, "value").map((o) => ({
+        this.state.defaultOptions.map((o) => ({
           label: o.text,
           value: String(o.value)
         }))
@@ -115,7 +111,7 @@ class GroupByVariable extends MultiValueVariable {
         return from(this._getKeys(ds)).pipe(
           take(1),
           mergeMap((data) => {
-            const a = unionBy(data, urlOptions, "value").map((i) => {
+            const a = data.map((i) => {
               return {
                 label: i.text,
                 value: i.value ? String(i.value) : i.text
@@ -133,24 +129,14 @@ class GroupByVariable extends MultiValueVariable {
 }
 GroupByVariable.Component = GroupByVariableRenderer;
 function GroupByVariableRenderer({ model }) {
-  const { value, text, key, maxVisibleValues, noValueOnClear } = model.useState();
-  const values = useMemo(() => {
-    const arrayValue = isArray(value) ? value : [value];
-    const arrayText = 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 = useMemo(() => isArray(value) ? value : [value], [value]);
   const [isFetchingOptions, setIsFetchingOptions] = useState(false);
   const [isOptionsOpen, setIsOptionsOpen] = useState(false);
-  const [uncommittedValue, setUncommittedValue] = useState(values);
+  const [uncommittedValue, setUncommittedValue] = useState(arrayValue);
   useEffect(() => {
-    setUncommittedValue(values);
-  }, [values]);
+    setUncommittedValue(arrayValue);
+  }, [arrayValue]);
   const onInputChange = model.onSearchChange ? (value2, meta) => {
     if (meta.action === "input-change") {
       model.onSearchChange(value2);
@@ -175,13 +161,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);

package/dist/esm/variables/groupby/GroupByVariable.js.map

@@ -1 +1 @@
-{"version":3,"file":"GroupByVariable.js","sources":["../../../../src/variables/groupby/GroupByVariable.tsx"],"sourcesContent":["import React, { useEffect, useMemo, useState } from 'react';\nimport { AdHocVariableFilter, DataSourceApi, MetricFindValue, SelectableValue } from '@grafana/data';\nimport { allActiveGroupByVariables } from './findActiveGroupByVariablesByUid';\nimport { DataSourceRef, VariableType } from '@grafana/schema';\nimport { SceneComponentProps, ControlsLayout, SceneObjectUrlSyncHandler } from '../../core/types';\nimport { sceneGraph } from '../../core/sceneGraph';\nimport { ValidateAndUpdateResult, VariableValueOption, VariableValueSingle } from '../types';\nimport { MultiValueVariable, MultiValueVariableState, VariableGetOptionsArgs } from '../variants/MultiValueVariable';\nimport { from, lastValueFrom, map, mergeMap, Observable, of, take } from 'rxjs';\nimport { getDataSource } from '../../utils/getDataSource';\nimport { InputActionMeta, MultiSelect } from '@grafana/ui';\nimport { isArray, unionBy } from 'lodash';\nimport { getQueriesForVariables } from '../utils';\nimport { GroupByVariableUrlSyncHandler } from './GroupByVariableUrlSyncHandler';\n\nexport interface GroupByVariableState extends MultiValueVariableState {\n  /** Defaults to \"Group\" */\n  name: string;\n  /** The visible keys to group on */\n  // TODO review this type and name (naming is hard)\n  defaultOptions?: MetricFindValue[];\n  /** Options obtained through URL sync */\n  urlOptions?: MetricFindValue[];\n  /** Base filters to always apply when looking up keys */\n  baseFilters?: AdHocVariableFilter[];\n  /** Datasource to use for getTagKeys and also controls which scene queries the group by should apply to */\n  datasource: DataSourceRef | null;\n  /** Controls if the group by can be changed */\n  readOnly?: boolean;\n  /**\n   * @experimental\n   * Controls the layout and design of the label.\n   * Vertical layout does not yet support operator selector.\n   */\n  layout?: ControlsLayout;\n  /**\n   * Defaults to same-datasource which means group by will automatically be applied to all queries with the same data source as this GroupBySet.\n   * In manual mode no queries are re-run on changes, and you have to manually apply the filter to whatever queries you want.\n   */\n  applyMode?: 'auto' | 'manual';\n  /**\n   * Filter out the keys that do not match the regex.\n   */\n  tagKeyRegexFilter?: RegExp;\n  /**\n   * Extension hook for customizing the key lookup.\n   * Return replace: true if you want to override the default lookup\n   * Return replace: false if you want to combine the results with the default lookup\n   */\n  getTagKeysProvider?: getTagKeysProvider;\n}\n\nexport type getTagKeysProvider = (\n  set: GroupByVariable,\n  currentKey: string | null\n) => Promise<{ replace?: boolean; values: MetricFindValue[] }>;\n\nexport class GroupByVariable extends MultiValueVariable<GroupByVariableState> {\n  static Component = GroupByVariableRenderer;\n  isLazy = true;\n\n  protected _urlSync: SceneObjectUrlSyncHandler = new GroupByVariableUrlSyncHandler(this);\n\n  public validateAndUpdate(): Observable<ValidateAndUpdateResult> {\n    return this.getValueOptions({}).pipe(\n      map((options) => {\n        this._updateValueGivenNewOptions(options);\n        return {};\n      })\n    );\n  }\n\n  private _updateValueGivenNewOptions(options: VariableValueOption[]) {\n    const { value: currentValue, text: currentText } = this.state;\n\n    const stateUpdate: Partial<MultiValueVariableState> = {\n      options,\n      loading: false,\n      value: currentValue ?? [],\n      text: currentText ?? [],\n    };\n\n    this.setState(stateUpdate);\n  }\n\n  public getValueOptions(args: VariableGetOptionsArgs): Observable<VariableValueOption[]> {\n    const urlOptions = this.state.urlOptions ?? [];\n\n    // When default dimensions are provided, return the static list\n    if (this.state.defaultOptions) {\n      return of(\n        unionBy(this.state.defaultOptions, urlOptions, 'value').map((o) => ({\n          label: o.text,\n          value: String(o.value),\n        }))\n      );\n    }\n\n    this.setState({ loading: true, error: null });\n\n    return from(\n      getDataSource(this.state.datasource, {\n        __sceneObject: { text: '__sceneObject', value: this },\n      })\n    ).pipe(\n      mergeMap((ds) => {\n        return from(this._getKeys(ds)).pipe(\n          take(1),\n          mergeMap((data: MetricFindValue[]) => {\n            const a: VariableValueOption[] = unionBy(data, urlOptions, 'value').map((i) => {\n              return {\n                label: i.text,\n                value: i.value ? String(i.value) : i.text,\n              };\n            });\n            return of(a);\n          })\n        );\n      })\n    );\n  }\n\n  public constructor(initialState: Partial<GroupByVariableState>) {\n    super({\n      isMulti: true,\n      name: '',\n      value: [],\n      text: [],\n      options: [],\n      datasource: null,\n      baseFilters: [],\n      applyMode: 'auto',\n      layout: 'horizontal',\n      type: 'groupby' as VariableType,\n      ...initialState,\n      noValueOnClear: true,\n    });\n\n    this.addActivationHandler(() => {\n      allActiveGroupByVariables.add(this);\n\n      return () => allActiveGroupByVariables.delete(this);\n    });\n  }\n\n  /**\n   * Get possible keys given current filters. Do not call from plugins directly\n   */\n  public _getKeys = async (ds: DataSourceApi) => {\n    // TODO:  provide current dimensions?\n    const override = await this.state.getTagKeysProvider?.(this, null);\n\n    if (override && override.replace) {\n      return override.values;\n    }\n\n    if (this.state.defaultOptions) {\n      return this.state.defaultOptions.concat(override?.values ?? []);\n    }\n\n    if (!ds.getTagKeys) {\n      return [];\n    }\n\n    const queries = getQueriesForVariables(this);\n\n    const otherFilters = this.state.baseFilters || [];\n    const timeRange = sceneGraph.getTimeRange(this).state.value;\n    // @ts-expect-error TODO: remove this once 10.4.0 is released\n    let keys = await ds.getTagKeys({ filters: otherFilters, queries, timeRange });\n\n    if (override) {\n      keys = keys.concat(override.values);\n    }\n\n    const tagKeyRegexFilter = this.state.tagKeyRegexFilter;\n    if (tagKeyRegexFilter) {\n      keys = keys.filter((f) => f.text.match(tagKeyRegexFilter));\n    }\n\n    return keys;\n  };\n\n  /**\n   * Allows clearing the value of the variable to an empty value. Overrides default behavior of a MultiValueVariable\n   */\n  public getDefaultMultiState(options: VariableValueOption[]): { value: VariableValueSingle[]; text: string[] } {\n    return { value: [], text: [] };\n  }\n}\nexport function GroupByVariableRenderer({ model }: SceneComponentProps<MultiValueVariable>) {\n  const { value, text, key, maxVisibleValues, noValueOnClear } = model.useState();\n  const values = useMemo<Array<SelectableValue<VariableValueSingle>>>(() => {\n    const arrayValue = isArray(value) ? value : [value];\n    const arrayText = isArray(text) ? text : [text];\n\n    return arrayValue.map((value, idx) => ({\n      value,\n      label: String(arrayText[idx] ?? value),\n    }));\n  }, [value, text]);\n  const [isFetchingOptions, setIsFetchingOptions] = useState(false);\n  const [isOptionsOpen, setIsOptionsOpen] = useState(false);\n\n  // To not trigger queries on every selection we store this state locally here and only update the variable onBlur\n  const [uncommittedValue, setUncommittedValue] = useState(values);\n\n  // Detect value changes outside\n  useEffect(() => {\n    setUncommittedValue(values);\n  }, [values]);\n\n  const onInputChange = model.onSearchChange\n    ? (value: string, meta: InputActionMeta) => {\n        if (meta.action === 'input-change') {\n          model.onSearchChange!(value);\n        }\n      }\n    : undefined;\n\n  const placeholder = 'Select value';\n\n  return (\n    <MultiSelect<VariableValueSingle>\n      data-testid={`GroupBySelect-${key}`}\n      id={key}\n      placeholder={placeholder}\n      width=\"auto\"\n      value={uncommittedValue}\n      noMultiValueWrap={true}\n      maxVisibleValues={maxVisibleValues ?? 5}\n      tabSelectsValue={false}\n      virtualized\n      allowCustomValue\n      options={model.getOptionsForSelect()}\n      closeMenuOnSelect={false}\n      isOpen={isOptionsOpen}\n      isClearable={true}\n      isLoading={isFetchingOptions}\n      onInputChange={onInputChange}\n      onBlur={() => {\n        model.changeValueTo(uncommittedValue.map((x) => x.value!));\n      }}\n      onChange={(newValue, action) => {\n        if (action.action === 'clear' && noValueOnClear) {\n          model.changeValueTo([]);\n        }\n        setUncommittedValue(newValue);\n      }}\n      onOpenMenu={async () => {\n        setIsFetchingOptions(true);\n        await lastValueFrom(model.validateAndUpdate());\n        setIsFetchingOptions(false);\n        setIsOptionsOpen(true);\n      }}\n      onCloseMenu={() => {\n        setIsOptionsOpen(false);\n      }}\n    />\n  );\n}\n"],"names":["value"],"mappings":"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"}
+{"version":3,"file":"GroupByVariable.js","sources":["../../../../src/variables/groupby/GroupByVariable.tsx"],"sourcesContent":["import React, { useEffect, useMemo, useState } from 'react';\nimport { AdHocVariableFilter, DataSourceApi, MetricFindValue } from '@grafana/data';\nimport { allActiveGroupByVariables } from './findActiveGroupByVariablesByUid';\nimport { DataSourceRef, VariableType } from '@grafana/schema';\nimport { SceneComponentProps, ControlsLayout } from '../../core/types';\nimport { sceneGraph } from '../../core/sceneGraph';\nimport { ValidateAndUpdateResult, VariableValueOption, VariableValueSingle } from '../types';\nimport { MultiValueVariable, MultiValueVariableState, VariableGetOptionsArgs } from '../variants/MultiValueVariable';\nimport { from, lastValueFrom, map, mergeMap, Observable, of, take } from 'rxjs';\nimport { getDataSource } from '../../utils/getDataSource';\nimport { InputActionMeta, MultiSelect } from '@grafana/ui';\nimport { isArray } from 'lodash';\nimport { getQueriesForVariables } from '../utils';\n\nexport interface GroupByVariableState extends MultiValueVariableState {\n  /** Defaults to \"Group\" */\n  name: string;\n  /** The visible keys to group on */\n  // TODO review this type and name (naming is hard)\n  defaultOptions?: MetricFindValue[];\n  /** Base filters to always apply when looking up keys */\n  baseFilters?: AdHocVariableFilter[];\n  /** Datasource to use for getTagKeys and also controls which scene queries the group by should apply to */\n  datasource: DataSourceRef | null;\n  /** Controls if the group by can be changed */\n  readOnly?: boolean;\n  /**\n   * @experimental\n   * Controls the layout and design of the label.\n   * Vertical layout does not yet support operator selector.\n   */\n  layout?: ControlsLayout;\n  /**\n   * Defaults to same-datasource which means group by will automatically be applied to all queries with the same data source as this GroupBySet.\n   * In manual mode no queries are re-run on changes, and you have to manually apply the filter to whatever queries you want.\n   */\n  applyMode?: 'auto' | 'manual';\n  /**\n   * Filter out the keys that do not match the regex.\n   */\n  tagKeyRegexFilter?: RegExp;\n  /**\n   * Extension hook for customizing the key lookup.\n   * Return replace: true if you want to override the default lookup\n   * Return replace: false if you want to combine the results with the default lookup\n   */\n  getTagKeysProvider?: getTagKeysProvider;\n}\n\nexport type getTagKeysProvider = (\n  set: GroupByVariable,\n  currentKey: string | null\n) => Promise<{ replace?: boolean; values: MetricFindValue[] }>;\n\nexport class GroupByVariable extends MultiValueVariable<GroupByVariableState> {\n  static Component = GroupByVariableRenderer;\n  isLazy = true;\n\n  public validateAndUpdate(): Observable<ValidateAndUpdateResult> {\n    return this.getValueOptions({}).pipe(\n      map((options) => {\n        this._updateValueGivenNewOptions(options);\n        return {};\n      })\n    );\n  }\n\n  private _updateValueGivenNewOptions(options: VariableValueOption[]) {\n    const { value: currentValue, text: currentText } = this.state;\n\n    const stateUpdate: Partial<MultiValueVariableState> = {\n      options,\n      loading: false,\n      value: currentValue ?? [],\n      text: currentText ?? [],\n    };\n\n    this.setState(stateUpdate);\n  }\n\n  public getValueOptions(args: VariableGetOptionsArgs): Observable<VariableValueOption[]> {\n    // When default dimensions are provided, return the static list\n    if (this.state.defaultOptions) {\n      return of(\n        this.state.defaultOptions.map((o) => ({\n          label: o.text,\n          value: String(o.value),\n        }))\n      );\n    }\n\n    this.setState({ loading: true, error: null });\n\n    return from(\n      getDataSource(this.state.datasource, {\n        __sceneObject: { text: '__sceneObject', value: this },\n      })\n    ).pipe(\n      mergeMap((ds) => {\n        return from(this._getKeys(ds)).pipe(\n          take(1),\n          mergeMap((data: MetricFindValue[]) => {\n            const a: VariableValueOption[] = data.map((i) => {\n              return {\n                label: i.text,\n                value: i.value ? String(i.value) : i.text,\n              };\n            });\n            return of(a);\n          })\n        );\n      })\n    );\n  }\n\n  public constructor(initialState: Partial<GroupByVariableState>) {\n    super({\n      isMulti: true,\n      name: '',\n      value: [],\n      text: [],\n      options: [],\n      datasource: null,\n      baseFilters: [],\n      applyMode: 'auto',\n      layout: 'horizontal',\n      type: 'groupby' as VariableType,\n      ...initialState,\n      noValueOnClear: true,\n    });\n\n    this.addActivationHandler(() => {\n      allActiveGroupByVariables.add(this);\n\n      return () => allActiveGroupByVariables.delete(this);\n    });\n  }\n\n  /**\n   * Get possible keys given current filters. Do not call from plugins directly\n   */\n  public _getKeys = async (ds: DataSourceApi) => {\n    // TODO:  provide current dimensions?\n    const override = await this.state.getTagKeysProvider?.(this, null);\n\n    if (override && override.replace) {\n      return override.values;\n    }\n\n    if (this.state.defaultOptions) {\n      return this.state.defaultOptions.concat(override?.values ?? []);\n    }\n\n    if (!ds.getTagKeys) {\n      return [];\n    }\n\n    const queries = getQueriesForVariables(this);\n\n    const otherFilters = this.state.baseFilters || [];\n    const timeRange = sceneGraph.getTimeRange(this).state.value;\n    // @ts-expect-error TODO: remove this once 10.4.0 is released\n    let keys = await ds.getTagKeys({ filters: otherFilters, queries, timeRange });\n\n    if (override) {\n      keys = keys.concat(override.values);\n    }\n\n    const tagKeyRegexFilter = this.state.tagKeyRegexFilter;\n    if (tagKeyRegexFilter) {\n      keys = keys.filter((f) => f.text.match(tagKeyRegexFilter));\n    }\n\n    return keys;\n  };\n\n  /**\n   * Allows clearing the value of the variable to an empty value. Overrides default behavior of a MultiValueVariable\n   */\n  public getDefaultMultiState(options: VariableValueOption[]): { value: VariableValueSingle[]; text: string[] } {\n    return { value: [], text: [] };\n  }\n}\nexport function GroupByVariableRenderer({ model }: SceneComponentProps<MultiValueVariable>) {\n  const { value, key, maxVisibleValues, noValueOnClear } = model.useState();\n  const arrayValue = useMemo(() => (isArray(value) ? value : [value]), [value]);\n  const [isFetchingOptions, setIsFetchingOptions] = useState(false);\n  const [isOptionsOpen, setIsOptionsOpen] = useState(false);\n\n  // To not trigger queries on every selection we store this state locally here and only update the variable onBlur\n  const [uncommittedValue, setUncommittedValue] = useState(arrayValue);\n\n  // Detect value changes outside\n  useEffect(() => {\n    setUncommittedValue(arrayValue);\n  }, [arrayValue]);\n\n  const onInputChange = model.onSearchChange\n    ? (value: string, meta: InputActionMeta) => {\n        if (meta.action === 'input-change') {\n          model.onSearchChange!(value);\n        }\n      }\n    : undefined;\n\n  const placeholder = 'Select value';\n\n  return (\n    <MultiSelect<VariableValueSingle>\n      data-testid={`GroupBySelect-${key}`}\n      id={key}\n      placeholder={placeholder}\n      width=\"auto\"\n      value={uncommittedValue}\n      noMultiValueWrap={true}\n      maxVisibleValues={maxVisibleValues ?? 5}\n      tabSelectsValue={false}\n      virtualized\n      allowCustomValue\n      options={model.getOptionsForSelect()}\n      closeMenuOnSelect={false}\n      isOpen={isOptionsOpen}\n      isClearable={true}\n      isLoading={isFetchingOptions}\n      onInputChange={onInputChange}\n      onBlur={() => {\n        model.changeValueTo(uncommittedValue);\n      }}\n      onChange={(newValue, action) => {\n        if (action.action === 'clear' && noValueOnClear) {\n          model.changeValueTo([]);\n        }\n        setUncommittedValue(newValue.map((x) => x.value!));\n      }}\n      onOpenMenu={async () => {\n        setIsFetchingOptions(true);\n        await lastValueFrom(model.validateAndUpdate());\n        setIsFetchingOptions(false);\n        setIsOptionsOpen(true);\n      }}\n      onCloseMenu={() => {\n        setIsOptionsOpen(false);\n      }}\n    />\n  );\n}\n"],"names":["value"],"mappings":"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"}

package/dist/esm/variables/interpolation/sceneInterpolator.js

@@ -6,7 +6,7 @@ import { VARIABLE_REGEX } from '../constants.js';
 import { lookupVariable } from '../lookupVariable.js';
 import { macrosIndex } from '../macros/index.js';
 
-function sceneInterpolator(sceneObject, target, scopedVars, format) {
+function sceneInterpolator(sceneObject, target, scopedVars, format, interpolations) {
   if (!target) {
     return target != null ? target : "";
   }
@@ -16,9 +16,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) {

package/dist/esm/variables/interpolation/sceneInterpolator.js.map

@@ -1 +1 @@
-{"version":3,"file":"sceneInterpolator.js","sources":["../../../../src/variables/interpolation/sceneInterpolator.ts"],"sourcesContent":["import { ScopedVars } from '@grafana/data';\nimport { VariableType, VariableFormatID } from '@grafana/schema';\n\nimport { SceneObject } from '../../core/types';\nimport { InterpolationFormatParameter, isCustomVariableValue, VariableValue } from '../types';\n\nimport { getSceneVariableForScopedVar } from './ScopedVarsVariable';\nimport { formatRegistry, FormatVariable } from './formatRegistry';\nimport { VARIABLE_REGEX } from '../constants';\nimport { lookupVariable } from '../lookupVariable';\nimport { macrosIndex } from '../macros';\n\n/**\n * This function will try to parse and replace any variable expression found in the target string. The sceneObject will be used as the source of variables. It will\n * use the scene graph and walk up the parent tree until it finds the closest variable.\n *\n * ScopedVars should not really be needed much in the new scene architecture as they can be added to the local scene node instead of passed in interpolate function.\n * It is supported here for backward compatibility and some edge cases where adding scoped vars to local scene node is not practical.\n */\nexport function sceneInterpolator(\n  sceneObject: SceneObject,\n  target: string | undefined | null,\n  scopedVars?: ScopedVars,\n  format?: InterpolationFormatParameter\n): string {\n  if (!target) {\n    return target ?? '';\n  }\n\n  VARIABLE_REGEX.lastIndex = 0;\n\n  return target.replace(VARIABLE_REGEX, (match, var1, var2, fmt2, var3, fieldPath, fmt3) => {\n    const variableName = var1 || var2 || var3;\n    const fmt = fmt2 || fmt3 || format;\n    const variable = lookupFormatVariable(variableName, match, scopedVars, sceneObject);\n\n    if (!variable) {\n      return match;\n    }\n\n    return formatValue(variable, variable.getValue(fieldPath), fmt);\n  });\n}\n\nfunction lookupFormatVariable(\n  name: string,\n  match: string,\n  scopedVars: ScopedVars | undefined,\n  sceneObject: SceneObject\n): FormatVariable | null {\n  const scopedVar = scopedVars?.[name];\n\n  if (scopedVar) {\n    return getSceneVariableForScopedVar(name, scopedVar);\n  }\n\n  const variable = lookupVariable(name, sceneObject);\n  if (variable) {\n    return variable;\n  }\n\n  if (macrosIndex[name]) {\n    return new macrosIndex[name](name, sceneObject, match, scopedVars);\n  }\n\n  return null;\n}\n\nfunction formatValue(\n  variable: FormatVariable,\n  value: VariableValue | undefined | null,\n  formatNameOrFn?: InterpolationFormatParameter\n): string {\n  if (value === null || value === undefined) {\n    return '';\n  }\n\n  // Variable can return a custom value that handles formatting\n  // This is useful for customAllValue and macros that return values that are already formatted or need special formatting\n  if (isCustomVariableValue(value)) {\n    return value.formatter(formatNameOrFn);\n  }\n\n  // if it's an object transform value to string\n  if (!Array.isArray(value) && typeof value === 'object') {\n    value = `${value}`;\n  }\n\n  if (typeof formatNameOrFn === 'function') {\n    return formatNameOrFn(value, {\n      name: variable.state.name,\n      type: variable.state.type as VariableType,\n      multi: variable.state.isMulti,\n      includeAll: variable.state.includeAll,\n    });\n  }\n\n  let args: string[] = [];\n\n  if (!formatNameOrFn) {\n    formatNameOrFn = VariableFormatID.Glob;\n  } else {\n    // some formats have arguments that come after ':' character\n    args = formatNameOrFn.split(':');\n    if (args.length > 1) {\n      formatNameOrFn = args[0];\n      args = args.slice(1);\n    } else {\n      args = [];\n    }\n  }\n\n  let formatter = formatRegistry.getIfExists(formatNameOrFn);\n\n  if (!formatter) {\n    console.error(`Variable format ${formatNameOrFn} not found. Using glob format as fallback.`);\n    formatter = formatRegistry.get(VariableFormatID.Glob);\n  }\n\n  return formatter.formatter(value, args, variable);\n}\n"],"names":[],"mappings":"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"}
+{"version":3,"file":"sceneInterpolator.js","sources":["../../../../src/variables/interpolation/sceneInterpolator.ts"],"sourcesContent":["import { ScopedVars } from '@grafana/data';\nimport { VariableInterpolation } from '@grafana/runtime';\nimport { VariableType, VariableFormatID } from '@grafana/schema';\n\nimport { SceneObject } from '../../core/types';\nimport { InterpolationFormatParameter, isCustomVariableValue, VariableValue } from '../types';\n\nimport { getSceneVariableForScopedVar } from './ScopedVarsVariable';\nimport { formatRegistry, FormatVariable } from './formatRegistry';\nimport { VARIABLE_REGEX } from '../constants';\nimport { lookupVariable } from '../lookupVariable';\nimport { macrosIndex } from '../macros';\n\n/**\n * This function will try to parse and replace any variable expression found in the target string. The sceneObject will be used as the source of variables. It will\n * use the scene graph and walk up the parent tree until it finds the closest variable.\n *\n * ScopedVars should not really be needed much in the new scene architecture as they can be added to the local scene node instead of passed in interpolate function.\n * It is supported here for backward compatibility and some edge cases where adding scoped vars to local scene node is not practical.\n */\nexport function sceneInterpolator(\n  sceneObject: SceneObject,\n  target: string | undefined | null,\n  scopedVars?: ScopedVars,\n  format?: InterpolationFormatParameter,\n  interpolations?: VariableInterpolation[],\n): string {\n  if (!target) {\n    return target ?? '';\n  }\n\n  VARIABLE_REGEX.lastIndex = 0;\n\n  return target.replace(VARIABLE_REGEX, (match, var1, var2, fmt2, var3, fieldPath, fmt3) => {\n    const variableName = var1 || var2 || var3;\n    const fmt = fmt2 || fmt3 || format;\n    const variable = lookupFormatVariable(variableName, match, scopedVars, sceneObject);\n\n    if (!variable) {\n      if (interpolations) {\n        // Set `value` equal to `match` as documented in the `VariableInterpolation` interface.\n        interpolations.push({ match, variableName, fieldPath, format: fmt, value: match, found: false });\n      }\n      return match;\n    }\n    const value = formatValue(variable, variable.getValue(fieldPath), fmt);\n    if (interpolations) {\n      interpolations.push({ match, variableName, fieldPath, format: fmt, value, found: value !== match });\n    }\n    return value;\n  });\n}\n\nfunction lookupFormatVariable(\n  name: string,\n  match: string,\n  scopedVars: ScopedVars | undefined,\n  sceneObject: SceneObject\n): FormatVariable | null {\n  const scopedVar = scopedVars?.[name];\n\n  if (scopedVar) {\n    return getSceneVariableForScopedVar(name, scopedVar);\n  }\n\n  const variable = lookupVariable(name, sceneObject);\n  if (variable) {\n    return variable;\n  }\n\n  if (macrosIndex[name]) {\n    return new macrosIndex[name](name, sceneObject, match, scopedVars);\n  }\n\n  return null;\n}\n\nfunction formatValue(\n  variable: FormatVariable,\n  value: VariableValue | undefined | null,\n  formatNameOrFn?: InterpolationFormatParameter\n): string {\n  if (value === null || value === undefined) {\n    return '';\n  }\n\n  // Variable can return a custom value that handles formatting\n  // This is useful for customAllValue and macros that return values that are already formatted or need special formatting\n  if (isCustomVariableValue(value)) {\n    return value.formatter(formatNameOrFn);\n  }\n\n  // if it's an object transform value to string\n  if (!Array.isArray(value) && typeof value === 'object') {\n    value = `${value}`;\n  }\n\n  if (typeof formatNameOrFn === 'function') {\n    return formatNameOrFn(value, {\n      name: variable.state.name,\n      type: variable.state.type as VariableType,\n      multi: variable.state.isMulti,\n      includeAll: variable.state.includeAll,\n    });\n  }\n\n  let args: string[] = [];\n\n  if (!formatNameOrFn) {\n    formatNameOrFn = VariableFormatID.Glob;\n  } else {\n    // some formats have arguments that come after ':' character\n    args = formatNameOrFn.split(':');\n    if (args.length > 1) {\n      formatNameOrFn = args[0];\n      args = args.slice(1);\n    } else {\n      args = [];\n    }\n  }\n\n  let formatter = formatRegistry.getIfExists(formatNameOrFn);\n\n  if (!formatter) {\n    console.error(`Variable format ${formatNameOrFn} not found. Using glob format as fallback.`);\n    formatter = formatRegistry.get(VariableFormatID.Glob);\n  }\n\n  return formatter.formatter(value, args, variable);\n}\n"],"names":[],"mappings":"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"}

package/dist/esm/variables/utils.js

@@ -86,32 +86,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(",");
-}
 
-export { escapeLabelValueInExactSelector, escapeLabelValueInRegexSelector, escapeUrlCommaDelimiters, escapeUrlPipeDelimiters, getQueriesForVariables, isVariableValueEqual, renderPrometheusLabelFilters, safeStringifyValue, toUrlCommaDelimitedString, unescapeUrlDelimiters };
+export { escapeLabelValueInExactSelector, escapeLabelValueInRegexSelector, getQueriesForVariables, isVariableValueEqual, renderPrometheusLabelFilters, safeStringifyValue };
 //# sourceMappingURL=utils.js.map

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';
@@ -547,6 +548,8 @@ interface DataQueryExtended extends DataQuery$1 {
 declare class SceneQueryRunner extends SceneObjectBase<QueryRunnerState> implements SceneDataProvider {
     private _querySub?;
     private _dataLayersSub?;
+    private _timeSub?;
+    private _timeSubRange?;
     private _containerWidth?;
     private _variableValueRecorder;
     private _results;
@@ -585,6 +588,7 @@ declare class SceneQueryRunner extends SceneObjectBase<QueryRunnerState> impleme
     private _onDeactivate;
     setContainerWidth(width: number): void;
     isDataReadyToDisplay(): boolean;
+    private subscribeToTimeRangeChanges;
     runQueries(): void;
     private getMaxDataPoints;
     cancelQuery(): void;
@@ -878,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 */
@@ -915,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[]>;
@@ -1014,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.