@grafana/scenes 4.10.0 → 4.11.1--canary.690.8718909816.0

package/CHANGELOG.md

@@ -1,3 +1,15 @@
+# v4.11.0 (Wed Apr 17 2024)
+
+#### 🚀 Enhancement
+
+- Fix ${__all_variables} not updating their value in panels [#698](https://github.com/grafana/scenes/pull/698) ([@axelavargas](https://github.com/axelavargas))
+
+#### Authors: 1
+
+- Alexa V ([@axelavargas](https://github.com/axelavargas))
+
+---
+
 # v4.10.0 (Wed Apr 17 2024)
 
 #### 🚀 Enhancement

package/dist/esm/variables/VariableDependencyConfig.js

@@ -1,3 +1,4 @@
+import { DataLinkBuiltInVars } from '@grafana/data';
 import { sceneGraph } from '../core/sceneGraph/index.js';
 import { writeSceneLog } from '../utils/writeSceneLog.js';
 import { VARIABLE_REGEX } from './constants.js';
@@ -18,7 +19,7 @@ class VariableDependencyConfig {
   variableUpdateCompleted(variable, hasChanged) {
     const deps = this.getNames();
     let dependencyChanged = false;
-    if (deps.has(variable.state.name) && hasChanged) {
+    if ((deps.has(variable.state.name) || deps.has(DataLinkBuiltInVars.includeVars)) && hasChanged) {
       dependencyChanged = true;
     }
     writeSceneLog(

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

@@ -1 +1 @@
-{"version":3,"file":"VariableDependencyConfig.js","sources":["../../../src/variables/VariableDependencyConfig.ts"],"sourcesContent":["import { sceneGraph } from '../core/sceneGraph';\nimport { SceneObject, SceneObjectState } from '../core/types';\nimport { writeSceneLog } from '../utils/writeSceneLog';\nimport { VARIABLE_REGEX } from './constants';\n\nimport { SceneVariable, SceneVariableDependencyConfigLike } from './types';\nimport { safeStringifyValue } from './utils';\n\ninterface VariableDependencyConfigOptions<TState extends SceneObjectState> {\n  /**\n   * State paths to scan / extract variable dependencies from. Leave empty to scan all paths.\n   */\n  statePaths?: Array<keyof TState | '*'>;\n\n  /**\n   * Explicit list of variable names to depend on. Leave empty to scan state for dependencies.\n   */\n  variableNames?: string[];\n\n  /**\n   * Optional way to customize how to handle when a dependent variable changes\n   * If not specified the default behavior is to trigger a re-render\n   */\n  onReferencedVariableValueChanged?: (variable: SceneVariable) => void;\n\n  /**\n   * Two scenarios trigger this callback to be called.\n   * 1. When any direct dependency changed value\n   * 2. In case hasDependencyInLoadingState was called and returned true we really care about any variable update. So in this scenario this callback is called\n   *    after any variable update completes. This is to cover scenarios where an object is waiting for indirect dependencies to complete.\n   */\n  onVariableUpdateCompleted?: () => void;\n\n  /**\n   * Optional way to subscribe to all variable value changes, even to variables that are not dependencies.\n   */\n  onAnyVariableChanged?: (variable: SceneVariable) => void;\n}\n\nexport class VariableDependencyConfig<TState extends SceneObjectState> implements SceneVariableDependencyConfigLike {\n  private _state: TState | undefined;\n  private _dependencies = new Set<string>();\n  private _statePaths?: Array<keyof TState | '*'>;\n  private _isWaitingForVariables = false;\n\n  public scanCount = 0;\n\n  public constructor(\n    private _sceneObject: SceneObject<TState>,\n    private _options: VariableDependencyConfigOptions<TState>\n  ) {\n    this._statePaths = _options.statePaths;\n  }\n\n  /**\n   * Used to check for dependency on a specific variable\n   */\n  public hasDependencyOn(name: string): boolean {\n    return this.getNames().has(name);\n  }\n\n  /**\n   * This is called whenever any set of variables have new values. It is up to this implementation to check if it's relevant given the current dependencies.\n   */\n  public variableUpdateCompleted(variable: SceneVariable, hasChanged: boolean) {\n    const deps = this.getNames();\n    let dependencyChanged = false;\n\n    if (deps.has(variable.state.name) && hasChanged) {\n      dependencyChanged = true;\n    }\n\n    writeSceneLog(\n      'VariableDependencyConfig',\n      'variableUpdateCompleted',\n      variable.state.name,\n      dependencyChanged,\n      this._isWaitingForVariables\n    );\n\n    if (this._options.onAnyVariableChanged) {\n      this._options.onAnyVariableChanged(variable);\n    }\n\n    // If custom handler called when dependency is changed or when we are waiting for variables\n    if (this._options.onVariableUpdateCompleted && (this._isWaitingForVariables || dependencyChanged)) {\n      this._options.onVariableUpdateCompleted();\n    }\n\n    if (dependencyChanged) {\n      if (this._options.onReferencedVariableValueChanged) {\n        this._options.onReferencedVariableValueChanged(variable);\n      }\n\n      // if no callbacks are specified then just do a forceRender\n      if (!this._options.onReferencedVariableValueChanged && !this._options.onVariableUpdateCompleted) {\n        this._sceneObject.forceRender();\n      }\n    }\n  }\n\n  public hasDependencyInLoadingState() {\n    if (sceneGraph.hasVariableDependencyInLoadingState(this._sceneObject)) {\n      this._isWaitingForVariables = true;\n      return true;\n    }\n\n    this._isWaitingForVariables = false;\n    return false;\n  }\n\n  public getNames(): Set<string> {\n    const prevState = this._state;\n    const newState = (this._state = this._sceneObject.state);\n\n    if (!prevState) {\n      // First time we always scan for dependencies\n      this.scanStateForDependencies(this._state);\n      return this._dependencies;\n    }\n\n    // Second time we only scan if state is a different and if any specific state path has changed\n    if (newState !== prevState) {\n      if (this._statePaths) {\n        for (const path of this._statePaths) {\n          if (path === '*' || newState[path] !== prevState[path]) {\n            this.scanStateForDependencies(newState);\n            break;\n          }\n        }\n      } else {\n        this.scanStateForDependencies(newState);\n      }\n    }\n\n    return this._dependencies;\n  }\n\n  /**\n   * Update variableNames\n   */\n  public setVariableNames(varNames: string[]) {\n    this._options.variableNames = varNames;\n    this.scanStateForDependencies(this._state!);\n  }\n\n  public setPaths(paths: Array<keyof TState | '*'>) {\n    this._statePaths = paths;\n  }\n\n  private scanStateForDependencies(state: TState) {\n    this._dependencies.clear();\n    this.scanCount += 1;\n\n    if (this._options.variableNames) {\n      for (const name of this._options.variableNames) {\n        this._dependencies.add(name);\n      }\n    }\n\n    if (this._statePaths) {\n      for (const path of this._statePaths) {\n        if (path === '*') {\n          this.extractVariablesFrom(state);\n          break;\n        } else {\n          const value = state[path];\n          if (value) {\n            this.extractVariablesFrom(value);\n          }\n        }\n      }\n    }\n  }\n\n  private extractVariablesFrom(value: unknown) {\n    VARIABLE_REGEX.lastIndex = 0;\n\n    const stringToCheck = typeof value !== 'string' ? safeStringifyValue(value) : value;\n\n    const matches = stringToCheck.matchAll(VARIABLE_REGEX);\n    if (!matches) {\n      return;\n    }\n\n    for (const match of matches) {\n      const [, var1, var2, , var3] = match;\n      const variableName = var1 || var2 || var3;\n      this._dependencies.add(variableName);\n    }\n  }\n}\n"],"names":[],"mappings":"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"}
+{"version":3,"file":"VariableDependencyConfig.js","sources":["../../../src/variables/VariableDependencyConfig.ts"],"sourcesContent":["import { DataLinkBuiltInVars } from '@grafana/data';\nimport { sceneGraph } from '../core/sceneGraph';\nimport { SceneObject, SceneObjectState } from '../core/types';\nimport { writeSceneLog } from '../utils/writeSceneLog';\nimport { VARIABLE_REGEX } from './constants';\n\nimport { SceneVariable, SceneVariableDependencyConfigLike } from './types';\nimport { safeStringifyValue } from './utils';\n\ninterface VariableDependencyConfigOptions<TState extends SceneObjectState> {\n  /**\n   * State paths to scan / extract variable dependencies from. Leave empty to scan all paths.\n   */\n  statePaths?: Array<keyof TState | '*'>;\n\n  /**\n   * Explicit list of variable names to depend on. Leave empty to scan state for dependencies.\n   */\n  variableNames?: string[];\n\n  /**\n   * Optional way to customize how to handle when a dependent variable changes\n   * If not specified the default behavior is to trigger a re-render\n   */\n  onReferencedVariableValueChanged?: (variable: SceneVariable) => void;\n\n  /**\n   * Two scenarios trigger this callback to be called.\n   * 1. When any direct dependency changed value\n   * 2. In case hasDependencyInLoadingState was called and returned true we really care about any variable update. So in this scenario this callback is called\n   *    after any variable update completes. This is to cover scenarios where an object is waiting for indirect dependencies to complete.\n   */\n  onVariableUpdateCompleted?: () => void;\n\n  /**\n   * Optional way to subscribe to all variable value changes, even to variables that are not dependencies.\n   */\n  onAnyVariableChanged?: (variable: SceneVariable) => void;\n}\n\nexport class VariableDependencyConfig<TState extends SceneObjectState> implements SceneVariableDependencyConfigLike {\n  private _state: TState | undefined;\n  private _dependencies = new Set<string>();\n  private _statePaths?: Array<keyof TState | '*'>;\n  private _isWaitingForVariables = false;\n\n  public scanCount = 0;\n\n  public constructor(\n    private _sceneObject: SceneObject<TState>,\n    private _options: VariableDependencyConfigOptions<TState>\n  ) {\n    this._statePaths = _options.statePaths;\n  }\n\n  /**\n   * Used to check for dependency on a specific variable\n   */\n  public hasDependencyOn(name: string): boolean {\n    return this.getNames().has(name);\n  }\n\n  /**\n   * This is called whenever any set of variables have new values. It is up to this implementation to check if it's relevant given the current dependencies.\n   */\n  public variableUpdateCompleted(variable: SceneVariable, hasChanged: boolean) {\n    const deps = this.getNames();\n    let dependencyChanged = false;\n\n    if ((deps.has(variable.state.name) || deps.has(DataLinkBuiltInVars.includeVars)) && hasChanged) {\n      dependencyChanged = true;\n    }\n\n    writeSceneLog(\n      'VariableDependencyConfig',\n      'variableUpdateCompleted',\n      variable.state.name,\n      dependencyChanged,\n      this._isWaitingForVariables\n    );\n\n    if (this._options.onAnyVariableChanged) {\n      this._options.onAnyVariableChanged(variable);\n    }\n\n    // If custom handler called when dependency is changed or when we are waiting for variables\n    if (this._options.onVariableUpdateCompleted && (this._isWaitingForVariables || dependencyChanged)) {\n      this._options.onVariableUpdateCompleted();\n    }\n\n    if (dependencyChanged) {\n      if (this._options.onReferencedVariableValueChanged) {\n        this._options.onReferencedVariableValueChanged(variable);\n      }\n\n      // if no callbacks are specified then just do a forceRender\n      if (!this._options.onReferencedVariableValueChanged && !this._options.onVariableUpdateCompleted) {\n        this._sceneObject.forceRender();\n      }\n    }\n  }\n\n  public hasDependencyInLoadingState() {\n    if (sceneGraph.hasVariableDependencyInLoadingState(this._sceneObject)) {\n      this._isWaitingForVariables = true;\n      return true;\n    }\n\n    this._isWaitingForVariables = false;\n    return false;\n  }\n\n  public getNames(): Set<string> {\n    const prevState = this._state;\n    const newState = (this._state = this._sceneObject.state);\n\n    if (!prevState) {\n      // First time we always scan for dependencies\n      this.scanStateForDependencies(this._state);\n      return this._dependencies;\n    }\n\n    // Second time we only scan if state is a different and if any specific state path has changed\n    if (newState !== prevState) {\n      if (this._statePaths) {\n        for (const path of this._statePaths) {\n          if (path === '*' || newState[path] !== prevState[path]) {\n            this.scanStateForDependencies(newState);\n            break;\n          }\n        }\n      } else {\n        this.scanStateForDependencies(newState);\n      }\n    }\n\n    return this._dependencies;\n  }\n\n  /**\n   * Update variableNames\n   */\n  public setVariableNames(varNames: string[]) {\n    this._options.variableNames = varNames;\n    this.scanStateForDependencies(this._state!);\n  }\n\n  public setPaths(paths: Array<keyof TState | '*'>) {\n    this._statePaths = paths;\n  }\n\n  private scanStateForDependencies(state: TState) {\n    this._dependencies.clear();\n    this.scanCount += 1;\n\n    if (this._options.variableNames) {\n      for (const name of this._options.variableNames) {\n        this._dependencies.add(name);\n      }\n    }\n\n    if (this._statePaths) {\n      for (const path of this._statePaths) {\n        if (path === '*') {\n          this.extractVariablesFrom(state);\n          break;\n        } else {\n          const value = state[path];\n          if (value) {\n            this.extractVariablesFrom(value);\n          }\n        }\n      }\n    }\n  }\n\n  private extractVariablesFrom(value: unknown) {\n    VARIABLE_REGEX.lastIndex = 0;\n\n    const stringToCheck = typeof value !== 'string' ? safeStringifyValue(value) : value;\n\n    const matches = stringToCheck.matchAll(VARIABLE_REGEX);\n    if (!matches) {\n      return;\n    }\n\n    for (const match of matches) {\n      const [, var1, var2, , var3] = match;\n      const variableName = var1 || var2 || var3;\n      this._dependencies.add(variableName);\n    }\n  }\n}\n"],"names":[],"mappings":"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"}

package/dist/esm/variables/adhoc/AdHocFilterRenderer.js

@@ -1,5 +1,4 @@
 import React, { useState, useMemo } from 'react';
-import { toSelectableValue } from './AdHocFiltersVariable.js';
 import { toOption } from '@grafana/data';
 import { useStyles2, Select, Field, Button } from '@grafana/ui';
 import { css } from '@emotion/css';
@@ -30,17 +29,14 @@ function AdHocFilterRenderer({ filter, model }) {
   const [state, setState] = useState({});
   const keyValue = useMemo(() => {
     if (filter.key !== "") {
-      if (model.state.defaultKeys) {
-        const matchingDefaultKey = model.state.defaultKeys.find((option) => option.value === filter.key);
-        if (matchingDefaultKey) {
-          return toSelectableValue(matchingDefaultKey);
-        }
+      if (state.keys) {
+        return state.keys.find((option) => option.value === filter.key);
       } else {
         return toOption(filter.key);
       }
     }
     return null;
-  }, [filter.key, model.state.defaultKeys]);
+  }, [filter.key, state.keys]);
   const valueValue = filter.value !== "" ? toOption(filter.value) : null;
   const valueSelect = /* @__PURE__ */ React.createElement(Select, {
     allowCustomValue: true,

package/dist/esm/variables/adhoc/AdHocFilterRenderer.js.map

@@ -1 +1 @@
-{"version":3,"file":"AdHocFilterRenderer.js","sources":["../../../../src/variables/adhoc/AdHocFilterRenderer.tsx"],"sourcesContent":["import React, { useMemo, useState } from 'react';\n\nimport { AdHocFiltersVariable, toSelectableValue } from './AdHocFiltersVariable';\nimport { AdHocVariableFilter, GrafanaTheme2, SelectableValue, toOption } from '@grafana/data';\nimport { Button, Field, Select, useStyles2 } from '@grafana/ui';\nimport { css } from '@emotion/css';\nimport { ControlsLabel } from '../../utils/ControlsLabel';\n\ninterface Props {\n  filter: AdHocVariableFilter;\n  model: AdHocFiltersVariable;\n}\n\nexport function AdHocFilterRenderer({ filter, model }: Props) {\n  const styles = useStyles2(getStyles);\n\n  // there's a bug in react-select where the menu doesn't recalculate its position when the options are loaded asynchronously\n  // see https://github.com/grafana/grafana/issues/63558\n  // instead, we explicitly control the menu visibility and prevent showing it until the options have fully loaded\n\n  const [state, setState] = useState<{\n    keys?: SelectableValue[];\n    values?: SelectableValue[];\n    isKeysLoading?: boolean;\n    isValuesLoading?: boolean;\n    isKeysOpen?: boolean;\n    isValuesOpen?: boolean;\n  }>({});\n\n  const keyValue = useMemo(() => {\n    if (filter.key !== '') {\n      if (model.state.defaultKeys) {\n        const matchingDefaultKey = model.state.defaultKeys.find(option => option.value === filter.key);\n        if (matchingDefaultKey) {\n          return toSelectableValue(matchingDefaultKey);\n        }\n      } else {\n        return toOption(filter.key);\n      }\n    }\n    return null;\n  }, [filter.key, model.state.defaultKeys])\n  const valueValue = filter.value !== '' ? toOption(filter.value) : null;\n\n  const valueSelect = (\n    <Select\n      allowCustomValue\n      formatCreateLabel={(inputValue) => `Use custom value: ${inputValue}`}\n      disabled={model.state.readOnly}\n      className={state.isKeysOpen ? styles.widthWhenOpen : undefined}\n      width=\"auto\"\n      value={valueValue}\n      placeholder={'Select value'}\n      options={state.values}\n      onChange={(v) => model._updateFilter(filter, 'value', v.value)}\n      isOpen={state.isValuesOpen}\n      isLoading={state.isValuesLoading}\n      autoFocus={filter.key !== '' && filter.value === ''}\n      openMenuOnFocus={true}\n      onOpenMenu={async () => {\n        setState({ ...state, isValuesLoading: true });\n        const values = await model._getValuesFor(filter);\n        setState({ ...state, isValuesLoading: false, isValuesOpen: true, values });\n      }}\n      onCloseMenu={() => {\n        setState({ ...state, isValuesOpen: false });\n      }}\n    />\n  );\n\n  const keySelect = (\n    <Select\n      // By changing the key, we reset the Select component,\n      // to ensure that the loaded values are shown after they are loaded\n      key={`${state.isValuesLoading ? 'loading' : 'loaded'}`}\n      disabled={model.state.readOnly}\n      className={state.isKeysOpen ? styles.widthWhenOpen : undefined}\n      width=\"auto\"\n      value={keyValue}\n      placeholder={'Select label'}\n      options={state.keys}\n      onChange={(v) => model._updateFilter(filter, 'key', v.value)}\n      autoFocus={filter.key === ''}\n      isOpen={state.isKeysOpen}\n      isLoading={state.isKeysLoading}\n      onOpenMenu={async () => {\n        setState({ ...state, isKeysLoading: true });\n        const keys = await model._getKeys(filter.key);\n        setState({ ...state, isKeysLoading: false, isKeysOpen: true, keys });\n      }}\n      onCloseMenu={() => {\n        setState({ ...state, isKeysOpen: false });\n      }}\n      onBlur={() => {\n        if (filter.key === '') {\n          model._removeFilter(filter);\n        }\n      }}\n      openMenuOnFocus={true}\n    />\n  );\n\n  if (model.state.layout === 'vertical') {\n    if (filter.key) {\n      const label = (\n        <ControlsLabel layout=\"vertical\" label={filter.key ?? ''} onRemove={() => model._removeFilter(filter)} />\n      );\n\n      return (\n        <Field label={label} data-testid={`AdHocFilter-${filter.key}`} className={styles.field}>\n          {valueSelect}\n        </Field>\n      );\n    } else {\n      return (\n        <Field label={'Select label'} data-testid={`AdHocFilter-${filter.key}`} className={styles.field}>\n          {keySelect}\n        </Field>\n      );\n    }\n  }\n\n  return (\n    <div className={styles.wrapper} data-testid={`AdHocFilter-${filter.key}`}>\n      {keySelect}\n      <Select\n        value={filter.operator}\n        disabled={model.state.readOnly}\n        options={model._getOperators()}\n        width=\"auto\"\n        onChange={(v) => model._updateFilter(filter, 'operator', v.value)}\n      />\n      {valueSelect}\n      <Button\n        variant=\"secondary\"\n        aria-label=\"Remove filter\"\n        title=\"Remove filter\"\n        className={styles.removeButton}\n        icon=\"times\"\n        data-testid={`AdHocFilter-remove-${filter.key ?? ''}`}\n        onClick={() => model._removeFilter(filter)}\n      />\n    </div>\n  );\n}\n\nconst getStyles = (theme: GrafanaTheme2) => ({\n  field: css({\n    marginBottom: 0,\n  }),\n  wrapper: css({\n    display: 'flex',\n    '> *': {\n      '&:not(:first-child)': {\n        // Negative margin hides the double-border on adjacent selects\n        marginLeft: -1,\n      },\n\n      '&:first-child': {\n        borderTopRightRadius: 0,\n        borderBottomRightRadius: 0,\n      },\n\n      '&:last-child': {\n        borderTopLeftRadius: 0,\n        borderBottomLeftRadius: 0,\n      },\n\n      '&:not(:first-child):not(:last-child)': {\n        borderRadius: 0,\n      },\n\n      // Fix focus state zIndex issues\n      position: 'relative',\n      zIndex: 0,\n\n      // Adjacent borders are overlapping, so raise children up when hovering etc\n      // so all that child's borders are visible.\n      '&:hover': {\n        zIndex: 1,\n      },\n\n      '&:focus-within': {\n        zIndex: 2,\n      },\n    },\n  }),\n  widthWhenOpen: css({\n    minWidth: theme.spacing(16),\n  }),\n  removeButton: css({\n    paddingLeft: theme.spacing(3 / 2),\n    paddingRight: theme.spacing(3 / 2),\n    borderLeft: 'none',\n    // To not have button background and last select border intersect\n    position: 'relative',\n    left: '1px',\n  }),\n});\n"],"names":[],"mappings":"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"}
+{"version":3,"file":"AdHocFilterRenderer.js","sources":["../../../../src/variables/adhoc/AdHocFilterRenderer.tsx"],"sourcesContent":["import React, { useMemo, useState } from 'react';\n\nimport { AdHocFiltersVariable } from './AdHocFiltersVariable';\nimport { AdHocVariableFilter, GrafanaTheme2, SelectableValue, toOption } from '@grafana/data';\nimport { Button, Field, Select, useStyles2 } from '@grafana/ui';\nimport { css } from '@emotion/css';\nimport { ControlsLabel } from '../../utils/ControlsLabel';\n\ninterface Props {\n  filter: AdHocVariableFilter;\n  model: AdHocFiltersVariable;\n}\n\nexport function AdHocFilterRenderer({ filter, model }: Props) {\n  const styles = useStyles2(getStyles);\n\n  // there's a bug in react-select where the menu doesn't recalculate its position when the options are loaded asynchronously\n  // see https://github.com/grafana/grafana/issues/63558\n  // instead, we explicitly control the menu visibility and prevent showing it until the options have fully loaded\n\n  const [state, setState] = useState<{\n    keys?: SelectableValue[];\n    values?: SelectableValue[];\n    isKeysLoading?: boolean;\n    isValuesLoading?: boolean;\n    isKeysOpen?: boolean;\n    isValuesOpen?: boolean;\n  }>({});\n\n  const keyValue = useMemo(() => {\n    if (filter.key !== '') {\n      if (state.keys) {\n        return state.keys.find(option => option.value === filter.key);\n      } else {\n        return toOption(filter.key);\n      }\n    }\n    return null;\n  }, [filter.key, state.keys])\n  const valueValue = filter.value !== '' ? toOption(filter.value) : null;\n\n  const valueSelect = (\n    <Select\n      allowCustomValue\n      formatCreateLabel={(inputValue) => `Use custom value: ${inputValue}`}\n      disabled={model.state.readOnly}\n      className={state.isKeysOpen ? styles.widthWhenOpen : undefined}\n      width=\"auto\"\n      value={valueValue}\n      placeholder={'Select value'}\n      options={state.values}\n      onChange={(v) => model._updateFilter(filter, 'value', v.value)}\n      isOpen={state.isValuesOpen}\n      isLoading={state.isValuesLoading}\n      autoFocus={filter.key !== '' && filter.value === ''}\n      openMenuOnFocus={true}\n      onOpenMenu={async () => {\n        setState({ ...state, isValuesLoading: true });\n        const values = await model._getValuesFor(filter);\n        setState({ ...state, isValuesLoading: false, isValuesOpen: true, values });\n      }}\n      onCloseMenu={() => {\n        setState({ ...state, isValuesOpen: false });\n      }}\n    />\n  );\n\n  const keySelect = (\n    <Select\n      // By changing the key, we reset the Select component,\n      // to ensure that the loaded values are shown after they are loaded\n      key={`${state.isValuesLoading ? 'loading' : 'loaded'}`}\n      disabled={model.state.readOnly}\n      className={state.isKeysOpen ? styles.widthWhenOpen : undefined}\n      width=\"auto\"\n      value={keyValue}\n      placeholder={'Select label'}\n      options={state.keys}\n      onChange={(v) => model._updateFilter(filter, 'key', v.value)}\n      autoFocus={filter.key === ''}\n      isOpen={state.isKeysOpen}\n      isLoading={state.isKeysLoading}\n      onOpenMenu={async () => {\n        setState({ ...state, isKeysLoading: true });\n        const keys = await model._getKeys(filter.key);\n        setState({ ...state, isKeysLoading: false, isKeysOpen: true, keys });\n      }}\n      onCloseMenu={() => {\n        setState({ ...state, isKeysOpen: false });\n      }}\n      onBlur={() => {\n        if (filter.key === '') {\n          model._removeFilter(filter);\n        }\n      }}\n      openMenuOnFocus={true}\n    />\n  );\n\n  if (model.state.layout === 'vertical') {\n    if (filter.key) {\n      const label = (\n        <ControlsLabel layout=\"vertical\" label={filter.key ?? ''} onRemove={() => model._removeFilter(filter)} />\n      );\n\n      return (\n        <Field label={label} data-testid={`AdHocFilter-${filter.key}`} className={styles.field}>\n          {valueSelect}\n        </Field>\n      );\n    } else {\n      return (\n        <Field label={'Select label'} data-testid={`AdHocFilter-${filter.key}`} className={styles.field}>\n          {keySelect}\n        </Field>\n      );\n    }\n  }\n\n  return (\n    <div className={styles.wrapper} data-testid={`AdHocFilter-${filter.key}`}>\n      {keySelect}\n      <Select\n        value={filter.operator}\n        disabled={model.state.readOnly}\n        options={model._getOperators()}\n        width=\"auto\"\n        onChange={(v) => model._updateFilter(filter, 'operator', v.value)}\n      />\n      {valueSelect}\n      <Button\n        variant=\"secondary\"\n        aria-label=\"Remove filter\"\n        title=\"Remove filter\"\n        className={styles.removeButton}\n        icon=\"times\"\n        data-testid={`AdHocFilter-remove-${filter.key ?? ''}`}\n        onClick={() => model._removeFilter(filter)}\n      />\n    </div>\n  );\n}\n\nconst getStyles = (theme: GrafanaTheme2) => ({\n  field: css({\n    marginBottom: 0,\n  }),\n  wrapper: css({\n    display: 'flex',\n    '> *': {\n      '&:not(:first-child)': {\n        // Negative margin hides the double-border on adjacent selects\n        marginLeft: -1,\n      },\n\n      '&:first-child': {\n        borderTopRightRadius: 0,\n        borderBottomRightRadius: 0,\n      },\n\n      '&:last-child': {\n        borderTopLeftRadius: 0,\n        borderBottomLeftRadius: 0,\n      },\n\n      '&:not(:first-child):not(:last-child)': {\n        borderRadius: 0,\n      },\n\n      // Fix focus state zIndex issues\n      position: 'relative',\n      zIndex: 0,\n\n      // Adjacent borders are overlapping, so raise children up when hovering etc\n      // so all that child's borders are visible.\n      '&:hover': {\n        zIndex: 1,\n      },\n\n      '&:focus-within': {\n        zIndex: 2,\n      },\n    },\n  }),\n  widthWhenOpen: css({\n    minWidth: theme.spacing(16),\n  }),\n  removeButton: css({\n    paddingLeft: theme.spacing(3 / 2),\n    paddingRight: theme.spacing(3 / 2),\n    borderLeft: 'none',\n    // To not have button background and last select border intersect\n    position: 'relative',\n    left: '1px',\n  }),\n});\n"],"names":[],"mappings":"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"}

package/dist/index.js

@@ -2029,7 +2029,7 @@ class VariableDependencyConfig {
   variableUpdateCompleted(variable, hasChanged) {
     const deps = this.getNames();
     let dependencyChanged = false;
-    if (deps.has(variable.state.name) && hasChanged) {
+    if ((deps.has(variable.state.name) || deps.has(data.DataLinkBuiltInVars.includeVars)) && hasChanged) {
       dependencyChanged = true;
     }
     writeSceneLog(
@@ -3174,17 +3174,14 @@ function AdHocFilterRenderer({ filter, model }) {
   const [state, setState] = React.useState({});
   const keyValue = React.useMemo(() => {
     if (filter.key !== "") {
-      if (model.state.defaultKeys) {
-        const matchingDefaultKey = model.state.defaultKeys.find((option) => option.value === filter.key);
-        if (matchingDefaultKey) {
-          return toSelectableValue(matchingDefaultKey);
-        }
+      if (state.keys) {
+        return state.keys.find((option) => option.value === filter.key);
       } else {
         return data.toOption(filter.key);
       }
     }
     return null;
-  }, [filter.key, model.state.defaultKeys]);
+  }, [filter.key, state.keys]);
   const valueValue = filter.value !== "" ? data.toOption(filter.value) : null;
   const valueSelect = /* @__PURE__ */ React__default["default"].createElement(ui.Select, {
     allowCustomValue: true,