@grafana/scenes 0.0.13 → 0.0.14

package/dist/esm/components/EmbeddedScene.js

@@ -41,7 +41,7 @@ function getStyles(theme) {
     container: css({
       flexGrow: 1,
       display: "flex",
-      gap: "8px",
+      gap: theme.spacing(2),
       minHeight: "100%",
       flexDirection: "column"
     }),
@@ -53,7 +53,8 @@ function getStyles(theme) {
     controls: css({
       display: "flex",
       gap: theme.spacing(1),
-      alignItems: "center"
+      alignItems: "center",
+      flexWrap: "wrap"
     })
   };
 }

package/dist/esm/components/EmbeddedScene.js.map

@@ -1 +1 @@
-{"version":3,"file":"EmbeddedScene.js","sources":["../../../src/components/EmbeddedScene.tsx"],"sourcesContent":["import { css } from '@emotion/css';\nimport { GrafanaTheme2 } from '@grafana/data';\nimport { useStyles2 } from '@grafana/ui';\nimport React from 'react';\n\nimport { SceneObjectBase } from '../core/SceneObjectBase';\nimport { SceneComponentProps, SceneObjectStatePlain, SceneObject } from '../core/types';\nimport { UrlSyncManager } from '../services/UrlSyncManager';\n\nexport interface EmbeddedSceneState extends SceneObjectStatePlain {\n  /**\n   * The main content of the scene (usually a SceneFlexLayout)\n   */\n  body: SceneObject;\n  /**\n   * Top row of variable selectors, filters, time pickers and custom actions.\n   */\n  controls?: SceneObject[];\n}\n\nexport class EmbeddedScene extends SceneObjectBase<EmbeddedSceneState> {\n  public static Component = EmbeddedSceneRenderer;\n\n  private urlSyncManager?: UrlSyncManager;\n\n  /**\n   * initUrlSync should be called before the scene is rendered to ensure that objects are in sync\n   * before they get activated. This saves some unnecessary re-renders and makes sure variables\n   * queries are issued as needed.\n   */\n  public initUrlSync() {\n    this.urlSyncManager = new UrlSyncManager(this);\n    this.urlSyncManager.initSync();\n  }\n\n  public activate() {\n    super.activate();\n  }\n\n  public deactivate() {\n    super.deactivate();\n    if (this.urlSyncManager) {\n      this.urlSyncManager!.cleanUp();\n    }\n  }\n}\n\nfunction EmbeddedSceneRenderer({ model }: SceneComponentProps<EmbeddedScene>) {\n  const { body, controls } = model.useState();\n  const styles = useStyles2(getStyles);\n\n  return (\n    <div className={styles.container}>\n      {controls && (\n        <div className={styles.controls}>\n          {controls.map((control) => (\n            <control.Component key={control.state.key} model={control} />\n          ))}\n        </div>\n      )}\n      <div className={styles.body}>\n        <body.Component model={body} />\n      </div>\n    </div>\n  );\n}\n\nfunction getStyles(theme: GrafanaTheme2) {\n  return {\n    container: css({\n      flexGrow: 1,\n      display: 'flex',\n      gap: '8px',\n      minHeight: '100%',\n      flexDirection: 'column',\n    }),\n    body: css({\n      flexGrow: 1,\n      display: 'flex',\n      gap: '8px',\n    }),\n    controls: css({\n      display: 'flex',\n      gap: theme.spacing(1),\n      alignItems: 'center',\n    }),\n  };\n}\n"],"names":[],"mappings":";;;;;;AAoBO,MAAM,sBAAsB,eAAoC,CAAA;AAAA,EAU9D,WAAc,GAAA;AACnB,IAAK,IAAA,CAAA,cAAA,GAAiB,IAAI,cAAA,CAAe,IAAI,CAAA,CAAA;AAC7C,IAAA,IAAA,CAAK,eAAe,QAAS,EAAA,CAAA;AAAA,GAC/B;AAAA,EAEO,QAAW,GAAA;AAChB,IAAA,KAAA,CAAM,QAAS,EAAA,CAAA;AAAA,GACjB;AAAA,EAEO,UAAa,GAAA;AAClB,IAAA,KAAA,CAAM,UAAW,EAAA,CAAA;AACjB,IAAA,IAAI,KAAK,cAAgB,EAAA;AACvB,MAAA,IAAA,CAAK,eAAgB,OAAQ,EAAA,CAAA;AAAA,KAC/B;AAAA,GACF;AACF,CAAA;AAzBa,aAAA,CACG,SAAY,GAAA,qBAAA,CAAA;AA0B5B,SAAS,qBAAA,CAAsB,EAAE,KAAA,EAA6C,EAAA;AAC5E,EAAA,MAAM,EAAE,IAAA,EAAM,QAAS,EAAA,GAAI,MAAM,QAAS,EAAA,CAAA;AAC1C,EAAM,MAAA,MAAA,GAAS,WAAW,SAAS,CAAA,CAAA;AAEnC,EAAA,uBACG,KAAA,CAAA,aAAA,CAAA,KAAA,EAAA;AAAA,IAAI,WAAW,MAAO,CAAA,SAAA;AAAA,GAAA,EACpB,4BACE,KAAA,CAAA,aAAA,CAAA,KAAA,EAAA;AAAA,IAAI,WAAW,MAAO,CAAA,QAAA;AAAA,GAAA,EACpB,SAAS,GAAI,CAAA,CAAC,OACb,qBAAA,KAAA,CAAA,aAAA,CAAC,QAAQ,SAAR,EAAA;AAAA,IAAkB,GAAA,EAAK,QAAQ,KAAM,CAAA,GAAA;AAAA,IAAK,KAAO,EAAA,OAAA;AAAA,GAAS,CAC5D,CACH,CAAA,kBAED,KAAA,CAAA,aAAA,CAAA,KAAA,EAAA;AAAA,IAAI,WAAW,MAAO,CAAA,IAAA;AAAA,GACrB,kBAAA,KAAA,CAAA,aAAA,CAAC,KAAK,SAAL,EAAA;AAAA,IAAe,KAAO,EAAA,IAAA;AAAA,GAAM,CAC/B,CACF,CAAA,CAAA;AAEJ,CAAA;AAEA,SAAS,UAAU,KAAsB,EAAA;AACvC,EAAO,OAAA;AAAA,IACL,WAAW,GAAI,CAAA;AAAA,MACb,QAAU,EAAA,CAAA;AAAA,MACV,OAAS,EAAA,MAAA;AAAA,MACT,GAAK,EAAA,KAAA;AAAA,MACL,SAAW,EAAA,MAAA;AAAA,MACX,aAAe,EAAA,QAAA;AAAA,KAChB,CAAA;AAAA,IACD,MAAM,GAAI,CAAA;AAAA,MACR,QAAU,EAAA,CAAA;AAAA,MACV,OAAS,EAAA,MAAA;AAAA,MACT,GAAK,EAAA,KAAA;AAAA,KACN,CAAA;AAAA,IACD,UAAU,GAAI,CAAA;AAAA,MACZ,OAAS,EAAA,MAAA;AAAA,MACT,GAAA,EAAK,KAAM,CAAA,OAAA,CAAQ,CAAC,CAAA;AAAA,MACpB,UAAY,EAAA,QAAA;AAAA,KACb,CAAA;AAAA,GACH,CAAA;AACF;;;;"}
+{"version":3,"file":"EmbeddedScene.js","sources":["../../../src/components/EmbeddedScene.tsx"],"sourcesContent":["import { css } from '@emotion/css';\nimport { GrafanaTheme2 } from '@grafana/data';\nimport { useStyles2 } from '@grafana/ui';\nimport React from 'react';\n\nimport { SceneObjectBase } from '../core/SceneObjectBase';\nimport { SceneComponentProps, SceneObjectStatePlain, SceneObject } from '../core/types';\nimport { UrlSyncManager } from '../services/UrlSyncManager';\n\nexport interface EmbeddedSceneState extends SceneObjectStatePlain {\n  /**\n   * The main content of the scene (usually a SceneFlexLayout)\n   */\n  body: SceneObject;\n  /**\n   * Top row of variable selectors, filters, time pickers and custom actions.\n   */\n  controls?: SceneObject[];\n}\n\nexport class EmbeddedScene extends SceneObjectBase<EmbeddedSceneState> {\n  public static Component = EmbeddedSceneRenderer;\n\n  private urlSyncManager?: UrlSyncManager;\n\n  /**\n   * initUrlSync should be called before the scene is rendered to ensure that objects are in sync\n   * before they get activated. This saves some unnecessary re-renders and makes sure variables\n   * queries are issued as needed.\n   */\n  public initUrlSync() {\n    this.urlSyncManager = new UrlSyncManager(this);\n    this.urlSyncManager.initSync();\n  }\n\n  public activate() {\n    super.activate();\n  }\n\n  public deactivate() {\n    super.deactivate();\n    if (this.urlSyncManager) {\n      this.urlSyncManager!.cleanUp();\n    }\n  }\n}\n\nfunction EmbeddedSceneRenderer({ model }: SceneComponentProps<EmbeddedScene>) {\n  const { body, controls } = model.useState();\n  const styles = useStyles2(getStyles);\n\n  return (\n    <div className={styles.container}>\n      {controls && (\n        <div className={styles.controls}>\n          {controls.map((control) => (\n            <control.Component key={control.state.key} model={control} />\n          ))}\n        </div>\n      )}\n      <div className={styles.body}>\n        <body.Component model={body} />\n      </div>\n    </div>\n  );\n}\n\nfunction getStyles(theme: GrafanaTheme2) {\n  return {\n    container: css({\n      flexGrow: 1,\n      display: 'flex',\n      gap: theme.spacing(2),\n      minHeight: '100%',\n      flexDirection: 'column',\n    }),\n    body: css({\n      flexGrow: 1,\n      display: 'flex',\n      gap: '8px',\n    }),\n    controls: css({\n      display: 'flex',\n      gap: theme.spacing(1),\n      alignItems: 'center',\n      flexWrap: 'wrap',\n    }),\n  };\n}\n"],"names":[],"mappings":";;;;;;AAoBO,MAAM,sBAAsB,eAAoC,CAAA;AAAA,EAU9D,WAAc,GAAA;AACnB,IAAK,IAAA,CAAA,cAAA,GAAiB,IAAI,cAAA,CAAe,IAAI,CAAA,CAAA;AAC7C,IAAA,IAAA,CAAK,eAAe,QAAS,EAAA,CAAA;AAAA,GAC/B;AAAA,EAEO,QAAW,GAAA;AAChB,IAAA,KAAA,CAAM,QAAS,EAAA,CAAA;AAAA,GACjB;AAAA,EAEO,UAAa,GAAA;AAClB,IAAA,KAAA,CAAM,UAAW,EAAA,CAAA;AACjB,IAAA,IAAI,KAAK,cAAgB,EAAA;AACvB,MAAA,IAAA,CAAK,eAAgB,OAAQ,EAAA,CAAA;AAAA,KAC/B;AAAA,GACF;AACF,CAAA;AAzBa,aAAA,CACG,SAAY,GAAA,qBAAA,CAAA;AA0B5B,SAAS,qBAAA,CAAsB,EAAE,KAAA,EAA6C,EAAA;AAC5E,EAAA,MAAM,EAAE,IAAA,EAAM,QAAS,EAAA,GAAI,MAAM,QAAS,EAAA,CAAA;AAC1C,EAAM,MAAA,MAAA,GAAS,WAAW,SAAS,CAAA,CAAA;AAEnC,EAAA,uBACG,KAAA,CAAA,aAAA,CAAA,KAAA,EAAA;AAAA,IAAI,WAAW,MAAO,CAAA,SAAA;AAAA,GAAA,EACpB,4BACE,KAAA,CAAA,aAAA,CAAA,KAAA,EAAA;AAAA,IAAI,WAAW,MAAO,CAAA,QAAA;AAAA,GAAA,EACpB,SAAS,GAAI,CAAA,CAAC,OACb,qBAAA,KAAA,CAAA,aAAA,CAAC,QAAQ,SAAR,EAAA;AAAA,IAAkB,GAAA,EAAK,QAAQ,KAAM,CAAA,GAAA;AAAA,IAAK,KAAO,EAAA,OAAA;AAAA,GAAS,CAC5D,CACH,CAAA,kBAED,KAAA,CAAA,aAAA,CAAA,KAAA,EAAA;AAAA,IAAI,WAAW,MAAO,CAAA,IAAA;AAAA,GACrB,kBAAA,KAAA,CAAA,aAAA,CAAC,KAAK,SAAL,EAAA;AAAA,IAAe,KAAO,EAAA,IAAA;AAAA,GAAM,CAC/B,CACF,CAAA,CAAA;AAEJ,CAAA;AAEA,SAAS,UAAU,KAAsB,EAAA;AACvC,EAAO,OAAA;AAAA,IACL,WAAW,GAAI,CAAA;AAAA,MACb,QAAU,EAAA,CAAA;AAAA,MACV,OAAS,EAAA,MAAA;AAAA,MACT,GAAA,EAAK,KAAM,CAAA,OAAA,CAAQ,CAAC,CAAA;AAAA,MACpB,SAAW,EAAA,MAAA;AAAA,MACX,aAAe,EAAA,QAAA;AAAA,KAChB,CAAA;AAAA,IACD,MAAM,GAAI,CAAA;AAAA,MACR,QAAU,EAAA,CAAA;AAAA,MACV,OAAS,EAAA,MAAA;AAAA,MACT,GAAK,EAAA,KAAA;AAAA,KACN,CAAA;AAAA,IACD,UAAU,GAAI,CAAA;AAAA,MACZ,OAAS,EAAA,MAAA;AAAA,MACT,GAAA,EAAK,KAAM,CAAA,OAAA,CAAQ,CAAC,CAAA;AAAA,MACpB,UAAY,EAAA,QAAA;AAAA,MACZ,QAAU,EAAA,MAAA;AAAA,KACX,CAAA;AAAA,GACH,CAAA;AACF;;;;"}

package/dist/esm/core/SceneObjectBase.js

@@ -99,12 +99,12 @@ class SceneObjectBase {
     if ($timeRange && !$timeRange.isActive) {
       $timeRange.activate();
     }
-    if ($data && !$data.isActive) {
-      $data.activate();
-    }
     if ($variables && !$variables.isActive) {
       $variables.activate();
     }
+    if ($data && !$data.isActive) {
+      $data.activate();
+    }
   }
   deactivate() {
     this._isActive = false;

package/dist/esm/core/SceneObjectBase.js.map

@@ -1 +1 @@
-{"version":3,"file":"SceneObjectBase.js","sources":["../../../src/core/SceneObjectBase.tsx"],"sourcesContent":["import { useEffect } from 'react';\nimport { Observer, Subject, Subscription, Unsubscribable } from 'rxjs';\nimport { v4 as uuidv4 } from 'uuid';\n\nimport { BusEvent, BusEventHandler, BusEventType, EventBusSrv } from '@grafana/data';\nimport { SceneObject, SceneComponent, SceneObjectState, SceneObjectUrlSyncHandler } from './types';\nimport { useForceUpdate } from '@grafana/ui';\n\nimport { SceneComponentWrapper } from './SceneComponentWrapper';\nimport { SceneObjectStateChangedEvent } from './events';\nimport { cloneSceneObject, forEachSceneObjectInState } from './utils';\nimport { SceneVariableDependencyConfigLike } from '../variables/types';\n\nexport abstract class SceneObjectBase<TState extends SceneObjectState = SceneObjectState>\n  implements SceneObject<TState>\n{\n  private _isActive = false;\n  private _subject = new Subject<TState>();\n  private _state: TState;\n  private _events = new EventBusSrv();\n\n  /** Incremented in SceneComponentWrapper, useful for tests and rendering optimizations */\n  protected _renderCount = 0;\n  protected _parent?: SceneObject;\n  protected _subs = new Subscription();\n\n  protected _variableDependency: SceneVariableDependencyConfigLike | undefined;\n  protected _urlSync: SceneObjectUrlSyncHandler<TState> | undefined;\n\n  public constructor(state: TState) {\n    if (!state.key) {\n      state.key = uuidv4();\n    }\n\n    this._state = Object.freeze(state);\n    this._subject.next(state);\n    this.setParent();\n  }\n\n  /** Current state */\n  public get state(): TState {\n    return this._state;\n  }\n\n  /** True if currently being active (ie displayed for visual objects) */\n  public get isActive(): boolean {\n    return this._isActive;\n  }\n\n  /** Returns the parent, undefined for root object */\n  public get parent(): SceneObject | undefined {\n    return this._parent;\n  }\n\n  /** Returns variable dependency config */\n  public get variableDependency(): SceneVariableDependencyConfigLike | undefined {\n    return this._variableDependency;\n  }\n\n  /** Returns url sync config */\n  public get urlSync(): SceneObjectUrlSyncHandler<TState> | undefined {\n    return this._urlSync;\n  }\n\n  /**\n   * Used in render functions when rendering a SceneObject.\n   * Wraps the component in an EditWrapper that handles edit mode\n   */\n  public get Component(): SceneComponent<this> {\n    return SceneComponentWrapper;\n  }\n\n  /**\n   * Temporary solution, should be replaced by declarative options\n   */\n  public get Editor(): SceneComponent<this> {\n    return ((this as any).constructor['Editor'] ?? (() => null)) as SceneComponent<this>;\n  }\n\n  private setParent() {\n    forEachSceneObjectInState(this._state, (child) => (child._parent = this));\n  }\n\n  /**\n   * Subscribe to the scene state subject\n   **/\n  public subscribeToState(observerOrNext?: Partial<Observer<TState>>): Subscription {\n    return this._subject.subscribe(observerOrNext);\n  }\n\n  /**\n   * Subscribe to the scene event\n   **/\n  public subscribeToEvent<T extends BusEvent>(eventType: BusEventType<T>, handler: BusEventHandler<T>): Unsubscribable {\n    return this._events.subscribe(eventType, handler);\n  }\n\n  public setState(update: Partial<TState>) {\n    const prevState = this._state;\n    const newState: TState = {\n      ...this._state,\n      ...update,\n    };\n\n    this._state = Object.freeze(newState);\n\n    this.setParent();\n    this._subject.next(newState);\n\n    // Bubble state change event. This is event is subscribed to by UrlSyncManager and UndoManager\n    this.publishEvent(\n      new SceneObjectStateChangedEvent({\n        prevState,\n        newState,\n        partialUpdate: update,\n        changedObject: this,\n      }),\n      true\n    );\n  }\n  /*\n   * Publish an event and optionally bubble it up the scene\n   **/\n  public publishEvent(event: BusEvent, bubble?: boolean) {\n    this._events.publish(event);\n\n    if (bubble && this.parent) {\n      this.parent.publishEvent(event, bubble);\n    }\n  }\n\n  public getRoot(): SceneObject {\n    return !this._parent ? this : this._parent.getRoot();\n  }\n\n  /**\n   * Called by the SceneComponentWrapper when the react component is mounted\n   */\n  public activate() {\n    this._isActive = true;\n\n    const { $data, $variables, $timeRange } = this.state;\n\n    if ($timeRange && !$timeRange.isActive) {\n      $timeRange.activate();\n    }\n\n    if ($data && !$data.isActive) {\n      $data.activate();\n    }\n\n    if ($variables && !$variables.isActive) {\n      $variables.activate();\n    }\n  }\n\n  /**\n   * Called by the SceneComponentWrapper when the react component is unmounted\n   */\n  public deactivate(): void {\n    this._isActive = false;\n\n    const { $data, $variables, $timeRange } = this.state;\n\n    if ($timeRange && $timeRange.isActive) {\n      $timeRange.deactivate();\n    }\n\n    if ($data && $data.isActive) {\n      $data.deactivate();\n    }\n\n    if ($variables && $variables.isActive) {\n      $variables.deactivate();\n    }\n\n    // Clear subscriptions and listeners\n    this._events.removeAllListeners();\n    this._subs.unsubscribe();\n    this._subs = new Subscription();\n\n    this._subject.complete();\n    this._subject = new Subject<TState>();\n  }\n\n  /**\n   * Utility hook to get and subscribe to state\n   */\n  public useState() {\n    // eslint-disable-next-line react-hooks/rules-of-hooks\n    return useSceneObjectState(this);\n  }\n\n  /** Force a re-render, should only be needed when variable values change */\n  public forceRender(): void {\n    this.setState({});\n  }\n\n  /**\n   * Will create new SceneObject with shallow-cloned state, but all state items of type SceneObject are deep cloned\n   */\n  public clone(withState?: Partial<TState>): this {\n    return cloneSceneObject(this, withState);\n  }\n}\n\n/**\n * This hook is always returning model.state instead of a useState that remembers the last state emitted on the subject\n * The reason for this is so that if the model instance change this function will always return the latest state.\n */\nfunction useSceneObjectState<TState extends SceneObjectState>(model: SceneObjectBase<TState>): TState {\n  const forceUpdate = useForceUpdate();\n\n  useEffect(() => {\n    const s = model.subscribeToState({ next: forceUpdate });\n    return () => s.unsubscribe();\n  }, [model, forceUpdate]);\n\n  return model.state;\n}\n"],"names":["uuidv4"],"mappings":"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"}
+{"version":3,"file":"SceneObjectBase.js","sources":["../../../src/core/SceneObjectBase.tsx"],"sourcesContent":["import { useEffect } from 'react';\nimport { Observer, Subject, Subscription, Unsubscribable } from 'rxjs';\nimport { v4 as uuidv4 } from 'uuid';\n\nimport { BusEvent, BusEventHandler, BusEventType, EventBusSrv } from '@grafana/data';\nimport { SceneObject, SceneComponent, SceneObjectState, SceneObjectUrlSyncHandler } from './types';\nimport { useForceUpdate } from '@grafana/ui';\n\nimport { SceneComponentWrapper } from './SceneComponentWrapper';\nimport { SceneObjectStateChangedEvent } from './events';\nimport { cloneSceneObject, forEachSceneObjectInState } from './utils';\nimport { SceneVariableDependencyConfigLike } from '../variables/types';\n\nexport abstract class SceneObjectBase<TState extends SceneObjectState = SceneObjectState>\n  implements SceneObject<TState>\n{\n  private _isActive = false;\n  private _subject = new Subject<TState>();\n  private _state: TState;\n  private _events = new EventBusSrv();\n\n  /** Incremented in SceneComponentWrapper, useful for tests and rendering optimizations */\n  protected _renderCount = 0;\n  protected _parent?: SceneObject;\n  protected _subs = new Subscription();\n\n  protected _variableDependency: SceneVariableDependencyConfigLike | undefined;\n  protected _urlSync: SceneObjectUrlSyncHandler<TState> | undefined;\n\n  public constructor(state: TState) {\n    if (!state.key) {\n      state.key = uuidv4();\n    }\n\n    this._state = Object.freeze(state);\n    this._subject.next(state);\n    this.setParent();\n  }\n\n  /** Current state */\n  public get state(): TState {\n    return this._state;\n  }\n\n  /** True if currently being active (ie displayed for visual objects) */\n  public get isActive(): boolean {\n    return this._isActive;\n  }\n\n  /** Returns the parent, undefined for root object */\n  public get parent(): SceneObject | undefined {\n    return this._parent;\n  }\n\n  /** Returns variable dependency config */\n  public get variableDependency(): SceneVariableDependencyConfigLike | undefined {\n    return this._variableDependency;\n  }\n\n  /** Returns url sync config */\n  public get urlSync(): SceneObjectUrlSyncHandler<TState> | undefined {\n    return this._urlSync;\n  }\n\n  /**\n   * Used in render functions when rendering a SceneObject.\n   * Wraps the component in an EditWrapper that handles edit mode\n   */\n  public get Component(): SceneComponent<this> {\n    return SceneComponentWrapper;\n  }\n\n  /**\n   * Temporary solution, should be replaced by declarative options\n   */\n  public get Editor(): SceneComponent<this> {\n    return ((this as any).constructor['Editor'] ?? (() => null)) as SceneComponent<this>;\n  }\n\n  private setParent() {\n    forEachSceneObjectInState(this._state, (child) => (child._parent = this));\n  }\n\n  /**\n   * Subscribe to the scene state subject\n   **/\n  public subscribeToState(observerOrNext?: Partial<Observer<TState>>): Subscription {\n    return this._subject.subscribe(observerOrNext);\n  }\n\n  /**\n   * Subscribe to the scene event\n   **/\n  public subscribeToEvent<T extends BusEvent>(eventType: BusEventType<T>, handler: BusEventHandler<T>): Unsubscribable {\n    return this._events.subscribe(eventType, handler);\n  }\n\n  public setState(update: Partial<TState>) {\n    const prevState = this._state;\n    const newState: TState = {\n      ...this._state,\n      ...update,\n    };\n\n    this._state = Object.freeze(newState);\n\n    this.setParent();\n    this._subject.next(newState);\n\n    // Bubble state change event. This is event is subscribed to by UrlSyncManager and UndoManager\n    this.publishEvent(\n      new SceneObjectStateChangedEvent({\n        prevState,\n        newState,\n        partialUpdate: update,\n        changedObject: this,\n      }),\n      true\n    );\n  }\n  /*\n   * Publish an event and optionally bubble it up the scene\n   **/\n  public publishEvent(event: BusEvent, bubble?: boolean) {\n    this._events.publish(event);\n\n    if (bubble && this.parent) {\n      this.parent.publishEvent(event, bubble);\n    }\n  }\n\n  public getRoot(): SceneObject {\n    return !this._parent ? this : this._parent.getRoot();\n  }\n\n  /**\n   * Called by the SceneComponentWrapper when the react component is mounted\n   */\n  public activate() {\n    this._isActive = true;\n\n    const { $data, $variables, $timeRange } = this.state;\n\n    if ($timeRange && !$timeRange.isActive) {\n      $timeRange.activate();\n    }\n\n    if ($variables && !$variables.isActive) {\n      $variables.activate();\n    }\n\n    if ($data && !$data.isActive) {\n      $data.activate();\n    }\n  }\n\n  /**\n   * Called by the SceneComponentWrapper when the react component is unmounted\n   */\n  public deactivate(): void {\n    this._isActive = false;\n\n    const { $data, $variables, $timeRange } = this.state;\n\n    if ($timeRange && $timeRange.isActive) {\n      $timeRange.deactivate();\n    }\n\n    if ($data && $data.isActive) {\n      $data.deactivate();\n    }\n\n    if ($variables && $variables.isActive) {\n      $variables.deactivate();\n    }\n\n    // Clear subscriptions and listeners\n    this._events.removeAllListeners();\n    this._subs.unsubscribe();\n    this._subs = new Subscription();\n\n    this._subject.complete();\n    this._subject = new Subject<TState>();\n  }\n\n  /**\n   * Utility hook to get and subscribe to state\n   */\n  public useState() {\n    // eslint-disable-next-line react-hooks/rules-of-hooks\n    return useSceneObjectState(this);\n  }\n\n  /** Force a re-render, should only be needed when variable values change */\n  public forceRender(): void {\n    this.setState({});\n  }\n\n  /**\n   * Will create new SceneObject with shallow-cloned state, but all state items of type SceneObject are deep cloned\n   */\n  public clone(withState?: Partial<TState>): this {\n    return cloneSceneObject(this, withState);\n  }\n}\n\n/**\n * This hook is always returning model.state instead of a useState that remembers the last state emitted on the subject\n * The reason for this is so that if the model instance change this function will always return the latest state.\n */\nfunction useSceneObjectState<TState extends SceneObjectState>(model: SceneObjectBase<TState>): TState {\n  const forceUpdate = useForceUpdate();\n\n  useEffect(() => {\n    const s = model.subscribeToState({ next: forceUpdate });\n    return () => s.unsubscribe();\n  }, [model, forceUpdate]);\n\n  return model.state;\n}\n"],"names":["uuidv4"],"mappings":"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"}

package/dist/esm/core/sceneGraph.js

@@ -1,5 +1,6 @@
 import { EmptyVariableSet, EmptyDataNode, DefaultTimeRange } from '../variables/interpolation/defaults.js';
 import { sceneInterpolator } from '../variables/interpolation/sceneInterpolator.js';
+import { lookupVariable } from '../variables/lookupVariable.js';
 
 function getVariables(sceneObject) {
   if (sceneObject.state.$variables) {
@@ -55,14 +56,30 @@ function interpolate(sceneObject, value, scopedVars, format) {
   }
   return sceneInterpolator(sceneObject, value, scopedVars, format);
 }
+function hasVariableDependencyInLoadingState(sceneObject) {
+  if (!sceneObject.variableDependency) {
+    return false;
+  }
+  for (const name of sceneObject.variableDependency.getNames()) {
+    const variable = lookupVariable(name, sceneObject);
+    if (!variable) {
+      continue;
+    }
+    const set = variable.parent;
+    return set.isVariableLoadingOrWaitingToUpdate(variable);
+  }
+  return false;
+}
 const sceneGraph = {
   getVariables,
   getData,
   getTimeRange,
   getSceneEditor,
   getLayout,
-  interpolate
+  interpolate,
+  lookupVariable,
+  hasVariableDependencyInLoadingState
 };
 
-export { getData, getLayout, getSceneEditor, getTimeRange, getVariables, interpolate, sceneGraph };
+export { getData, getLayout, getSceneEditor, getTimeRange, getVariables, hasVariableDependencyInLoadingState, interpolate, sceneGraph };
 //# sourceMappingURL=sceneGraph.js.map

package/dist/esm/core/sceneGraph.js.map

@@ -1 +1 @@
-{"version":3,"file":"sceneGraph.js","sources":["../../../src/core/sceneGraph.ts"],"sourcesContent":["import { ScopedVars } from '@grafana/data';\nimport { DefaultTimeRange, EmptyDataNode, EmptyVariableSet } from '../variables/interpolation/defaults';\n\nimport { CustomFormatterFn, sceneInterpolator } from '../variables/interpolation/sceneInterpolator';\nimport { SceneVariables } from '../variables/types';\n\nimport { SceneDataState, SceneEditor, SceneLayoutState, SceneObject, SceneTimeRangeLike } from './types';\n\n/**\n * Get the closest node with variables\n */\nexport function getVariables(sceneObject: SceneObject): SceneVariables {\n  if (sceneObject.state.$variables) {\n    return sceneObject.state.$variables;\n  }\n\n  if (sceneObject.parent) {\n    return getVariables(sceneObject.parent);\n  }\n\n  return EmptyVariableSet;\n}\n\n/**\n * Will walk up the scene object graph to the closest $data scene object\n */\nexport function getData(sceneObject: SceneObject): SceneObject<SceneDataState> {\n  const { $data } = sceneObject.state;\n  if ($data) {\n    return $data;\n  }\n\n  if (sceneObject.parent) {\n    return getData(sceneObject.parent);\n  }\n\n  return EmptyDataNode;\n}\n\n/**\n * Will walk up the scene object graph to the closest $timeRange scene object\n */\nexport function getTimeRange(sceneObject: SceneObject): SceneTimeRangeLike {\n  const { $timeRange } = sceneObject.state;\n  if ($timeRange) {\n    return $timeRange;\n  }\n\n  if (sceneObject.parent) {\n    return getTimeRange(sceneObject.parent);\n  }\n\n  return DefaultTimeRange;\n}\n\n/**\n * Will walk up the scene object graph to the closest $editor scene object\n */\nexport function getSceneEditor(sceneObject: SceneObject): SceneEditor {\n  const { $editor } = sceneObject.state;\n  if ($editor) {\n    return $editor;\n  }\n\n  if (sceneObject.parent) {\n    return getSceneEditor(sceneObject.parent);\n  }\n\n  throw new Error('No editor found in scene tree');\n}\n\n/**\n * Will walk up the scene object graph to the closest $layout scene object\n */\nexport function getLayout(scene: SceneObject): SceneObject<SceneLayoutState> {\n  if (scene.constructor.name === 'SceneFlexLayout' || scene.constructor.name === 'SceneGridLayout') {\n    return scene as SceneObject<SceneLayoutState>;\n  }\n\n  if (scene.parent) {\n    return getLayout(scene.parent);\n  }\n\n  throw new Error('No layout found in scene tree');\n}\n\n/**\n * Interpolates the given string using the current scene object as context.   *\n */\nexport function interpolate(\n  sceneObject: SceneObject,\n  value: string | undefined | null,\n  scopedVars?: ScopedVars,\n  format?: string | CustomFormatterFn\n): string {\n  if (value === '' || value == null) {\n    return '';\n  }\n\n  return sceneInterpolator(sceneObject, value, scopedVars, format);\n}\n\nexport const sceneGraph = {\n  getVariables,\n  getData,\n  getTimeRange,\n  getSceneEditor,\n  getLayout,\n  interpolate,\n};\n"],"names":[],"mappings":";;;AAWO,SAAS,aAAa,WAA0C,EAAA;AACrE,EAAI,IAAA,WAAA,CAAY,MAAM,UAAY,EAAA;AAChC,IAAA,OAAO,YAAY,KAAM,CAAA,UAAA,CAAA;AAAA,GAC3B;AAEA,EAAA,IAAI,YAAY,MAAQ,EAAA;AACtB,IAAO,OAAA,YAAA,CAAa,YAAY,MAAM,CAAA,CAAA;AAAA,GACxC;AAEA,EAAO,OAAA,gBAAA,CAAA;AACT,CAAA;AAKO,SAAS,QAAQ,WAAuD,EAAA;AAC7E,EAAM,MAAA,EAAE,KAAM,EAAA,GAAI,WAAY,CAAA,KAAA,CAAA;AAC9B,EAAA,IAAI,KAAO,EAAA;AACT,IAAO,OAAA,KAAA,CAAA;AAAA,GACT;AAEA,EAAA,IAAI,YAAY,MAAQ,EAAA;AACtB,IAAO,OAAA,OAAA,CAAQ,YAAY,MAAM,CAAA,CAAA;AAAA,GACnC;AAEA,EAAO,OAAA,aAAA,CAAA;AACT,CAAA;AAKO,SAAS,aAAa,WAA8C,EAAA;AACzE,EAAM,MAAA,EAAE,UAAW,EAAA,GAAI,WAAY,CAAA,KAAA,CAAA;AACnC,EAAA,IAAI,UAAY,EAAA;AACd,IAAO,OAAA,UAAA,CAAA;AAAA,GACT;AAEA,EAAA,IAAI,YAAY,MAAQ,EAAA;AACtB,IAAO,OAAA,YAAA,CAAa,YAAY,MAAM,CAAA,CAAA;AAAA,GACxC;AAEA,EAAO,OAAA,gBAAA,CAAA;AACT,CAAA;AAKO,SAAS,eAAe,WAAuC,EAAA;AACpE,EAAM,MAAA,EAAE,OAAQ,EAAA,GAAI,WAAY,CAAA,KAAA,CAAA;AAChC,EAAA,IAAI,OAAS,EAAA;AACX,IAAO,OAAA,OAAA,CAAA;AAAA,GACT;AAEA,EAAA,IAAI,YAAY,MAAQ,EAAA;AACtB,IAAO,OAAA,cAAA,CAAe,YAAY,MAAM,CAAA,CAAA;AAAA,GAC1C;AAEA,EAAM,MAAA,IAAI,MAAM,+BAA+B,CAAA,CAAA;AACjD,CAAA;AAKO,SAAS,UAAU,KAAmD,EAAA;AAC3E,EAAA,IAAI,MAAM,WAAY,CAAA,IAAA,KAAS,qBAAqB,KAAM,CAAA,WAAA,CAAY,SAAS,iBAAmB,EAAA;AAChG,IAAO,OAAA,KAAA,CAAA;AAAA,GACT;AAEA,EAAA,IAAI,MAAM,MAAQ,EAAA;AAChB,IAAO,OAAA,SAAA,CAAU,MAAM,MAAM,CAAA,CAAA;AAAA,GAC/B;AAEA,EAAM,MAAA,IAAI,MAAM,+BAA+B,CAAA,CAAA;AACjD,CAAA;AAKO,SAAS,WACd,CAAA,WAAA,EACA,KACA,EAAA,UAAA,EACA,MACQ,EAAA;AACR,EAAI,IAAA,KAAA,KAAU,EAAM,IAAA,KAAA,IAAS,IAAM,EAAA;AACjC,IAAO,OAAA,EAAA,CAAA;AAAA,GACT;AAEA,EAAA,OAAO,iBAAkB,CAAA,WAAA,EAAa,KAAO,EAAA,UAAA,EAAY,MAAM,CAAA,CAAA;AACjE,CAAA;AAEO,MAAM,UAAa,GAAA;AAAA,EACxB,YAAA;AAAA,EACA,OAAA;AAAA,EACA,YAAA;AAAA,EACA,cAAA;AAAA,EACA,SAAA;AAAA,EACA,WAAA;AACF;;;;"}
+{"version":3,"file":"sceneGraph.js","sources":["../../../src/core/sceneGraph.ts"],"sourcesContent":["import { ScopedVars } from '@grafana/data';\nimport { DefaultTimeRange, EmptyDataNode, EmptyVariableSet } from '../variables/interpolation/defaults';\n\nimport { CustomFormatterFn, sceneInterpolator } from '../variables/interpolation/sceneInterpolator';\nimport { SceneVariables } from '../variables/types';\n\nimport { SceneDataState, SceneEditor, SceneLayoutState, SceneObject, SceneTimeRangeLike } from './types';\nimport { lookupVariable } from '../variables/lookupVariable';\n\n/**\n * Get the closest node with variables\n */\nexport function getVariables(sceneObject: SceneObject): SceneVariables {\n  if (sceneObject.state.$variables) {\n    return sceneObject.state.$variables;\n  }\n\n  if (sceneObject.parent) {\n    return getVariables(sceneObject.parent);\n  }\n\n  return EmptyVariableSet;\n}\n\n/**\n * Will walk up the scene object graph to the closest $data scene object\n */\nexport function getData(sceneObject: SceneObject): SceneObject<SceneDataState> {\n  const { $data } = sceneObject.state;\n  if ($data) {\n    return $data;\n  }\n\n  if (sceneObject.parent) {\n    return getData(sceneObject.parent);\n  }\n\n  return EmptyDataNode;\n}\n\n/**\n * Will walk up the scene object graph to the closest $timeRange scene object\n */\nexport function getTimeRange(sceneObject: SceneObject): SceneTimeRangeLike {\n  const { $timeRange } = sceneObject.state;\n  if ($timeRange) {\n    return $timeRange;\n  }\n\n  if (sceneObject.parent) {\n    return getTimeRange(sceneObject.parent);\n  }\n\n  return DefaultTimeRange;\n}\n\n/**\n * Will walk up the scene object graph to the closest $editor scene object\n */\nexport function getSceneEditor(sceneObject: SceneObject): SceneEditor {\n  const { $editor } = sceneObject.state;\n  if ($editor) {\n    return $editor;\n  }\n\n  if (sceneObject.parent) {\n    return getSceneEditor(sceneObject.parent);\n  }\n\n  throw new Error('No editor found in scene tree');\n}\n\n/**\n * Will walk up the scene object graph to the closest $layout scene object\n */\nexport function getLayout(scene: SceneObject): SceneObject<SceneLayoutState> {\n  if (scene.constructor.name === 'SceneFlexLayout' || scene.constructor.name === 'SceneGridLayout') {\n    return scene as SceneObject<SceneLayoutState>;\n  }\n\n  if (scene.parent) {\n    return getLayout(scene.parent);\n  }\n\n  throw new Error('No layout found in scene tree');\n}\n\n/**\n * Interpolates the given string using the current scene object as context.   *\n */\nexport function interpolate(\n  sceneObject: SceneObject,\n  value: string | undefined | null,\n  scopedVars?: ScopedVars,\n  format?: string | CustomFormatterFn\n): string {\n  if (value === '' || value == null) {\n    return '';\n  }\n\n  return sceneInterpolator(sceneObject, value, scopedVars, format);\n}\n\n/**\n * Checks if the variable is currently loading or waiting to update\n */\nexport function hasVariableDependencyInLoadingState(sceneObject: SceneObject) {\n  if (!sceneObject.variableDependency) {\n    return false;\n  }\n\n  for (const name of sceneObject.variableDependency.getNames()) {\n    const variable = lookupVariable(name, sceneObject);\n    if (!variable) {\n      continue;\n    }\n\n    const set = variable.parent as SceneVariables;\n    return set.isVariableLoadingOrWaitingToUpdate(variable);\n  }\n\n  return false;\n}\n\nexport const sceneGraph = {\n  getVariables,\n  getData,\n  getTimeRange,\n  getSceneEditor,\n  getLayout,\n  interpolate,\n  lookupVariable,\n  hasVariableDependencyInLoadingState,\n};\n"],"names":[],"mappings":"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"}

package/dist/esm/querying/SceneQueryRunner.js

@@ -6,6 +6,8 @@ import { SceneObjectBase } from '../core/SceneObjectBase.js';
 import { sceneGraph } from '../core/sceneGraph.js';
 import { getDataSource } from '../utils/getDataSource.js';
 import { VariableDependencyConfig } from '../variables/VariableDependencyConfig.js';
+import { writeSceneLog } from '../utils/writeSceneLog.js';
+import { VariableValueRecorder } from '../variables/VariableValueRecorder.js';
 
 var __defProp = Object.defineProperty;
 var __defProps = Object.defineProperties;
@@ -33,9 +35,10 @@ function getNextRequestId() {
 class SceneQueryRunner extends SceneObjectBase {
   constructor() {
     super(...arguments);
+    this._variableValueRecorder = new VariableValueRecorder();
     this._variableDependency = new VariableDependencyConfig(this, {
       statePaths: ["queries", "datasource"],
-      onReferencedVariableValueChanged: () => this.runQueries()
+      onVariableUpdatesCompleted: (variables, dependencyChanged) => this.onVariableUpdatesCompleted(variables, dependencyChanged)
     });
     this.onDataReceived = (data) => {
       this.setState({ data });
@@ -55,11 +58,27 @@ class SceneQueryRunner extends SceneObjectBase {
       this.runQueries();
     }
   }
+  onVariableUpdatesCompleted(_variablesThatHaveChanged, dependencyChanged) {
+    if (this.state.isWaitingForVariables && this.shouldRunQueriesOnActivate()) {
+      this.runQueries();
+      return;
+    }
+    if (dependencyChanged) {
+      this.runQueries();
+    }
+  }
   shouldRunQueriesOnActivate() {
-    if (this.state.data) {
+    if (!this.state.maxDataPoints && this.state.maxDataPointsFromWidth && !this._containerWidth) {
       return false;
     }
-    if (!this.state.maxDataPoints && this.state.maxDataPointsFromWidth && !this._containerWidth) {
+    if (this._variableValueRecorder.hasDependenciesChanged(this)) {
+      writeSceneLog(
+        "SceneQueryRunner",
+        "Variable dependency changed while inactive, shouldRunQueriesOnActivate returns true"
+      );
+      return true;
+    }
+    if (this.state.data) {
       return false;
     }
     return true;
@@ -70,6 +89,7 @@ class SceneQueryRunner extends SceneObjectBase {
       this._querySub.unsubscribe();
       this._querySub = void 0;
     }
+    this._variableValueRecorder.recordCurrentDependencyValuesForSceneObject(this);
   }
   setContainerWidth(width) {
     if (!this._containerWidth && width > 0) {
@@ -96,6 +116,14 @@ class SceneQueryRunner extends SceneObjectBase {
     return (_b = (_a = this.state.maxDataPoints) != null ? _a : this._containerWidth) != null ? _b : 500;
   }
   async runWithTimeRange(timeRange) {
+    if (sceneGraph.hasVariableDependencyInLoadingState(this)) {
+      writeSceneLog("SceneQueryRunner", "Variable dependency is in loading state, skipping query execution");
+      this.setState({ isWaitingForVariables: true });
+      return;
+    }
+    if (this.state.isWaitingForVariables) {
+      this.setState({ isWaitingForVariables: false });
+    }
     const { datasource, minInterval, queries } = this.state;
     const sceneObjectScopedVar = {
       __sceneObject: { text: "__sceneObject", value: this }
@@ -131,6 +159,7 @@ class SceneQueryRunner extends SceneObjectBase {
       request.interval = norm.interval;
       request.intervalMs = norm.intervalMs;
       const runRequest = getRunRequest();
+      writeSceneLog("SceneQueryRunner", "Starting runRequest", this.state.key);
       this._querySub = runRequest(ds, request).pipe(getTransformationsStream(this, this.state.transformations)).subscribe({
         next: this.onDataReceived
       });

package/dist/esm/querying/SceneQueryRunner.js.map

@@ -1 +1 @@
-{"version":3,"file":"SceneQueryRunner.js","sources":["../../../src/querying/SceneQueryRunner.ts"],"sourcesContent":["import { cloneDeep } from 'lodash';\nimport { mergeMap, MonoTypeOperatorFunction, Unsubscribable, map, of } from 'rxjs';\n\nimport {\n  CoreApp,\n  DataQuery,\n  DataQueryRequest,\n  DataSourceRef,\n  DataTransformerConfig,\n  PanelData,\n  rangeUtil,\n  ScopedVar,\n  TimeRange,\n  transformDataFrame,\n} from '@grafana/data';\nimport { getRunRequest } from '@grafana/runtime';\n\nimport { SceneObjectBase } from '../core/SceneObjectBase';\nimport { sceneGraph } from '../core/sceneGraph';\nimport { SceneObject, SceneObjectStatePlain } from '../core/types';\nimport { getDataSource } from '../utils/getDataSource';\nimport { VariableDependencyConfig } from '../variables/VariableDependencyConfig';\n\nlet counter = 100;\n\nexport function getNextRequestId() {\n  return 'QS' + counter++;\n}\n\nexport interface QueryRunnerState extends SceneObjectStatePlain {\n  data?: PanelData;\n  queries: DataQueryExtended[];\n  transformations?: DataTransformerConfig[];\n  datasource?: DataSourceRef;\n  minInterval?: string;\n  maxDataPoints?: number;\n  // Non persisted state\n  maxDataPointsFromWidth?: boolean;\n}\n\nexport interface DataQueryExtended extends DataQuery {\n  [key: string]: any;\n}\n\nexport class SceneQueryRunner extends SceneObjectBase<QueryRunnerState> {\n  private _querySub?: Unsubscribable;\n  private _containerWidth?: number;\n\n  protected _variableDependency = new VariableDependencyConfig(this, {\n    statePaths: ['queries', 'datasource'],\n    onReferencedVariableValueChanged: () => this.runQueries(),\n  });\n\n  public activate() {\n    super.activate();\n    const timeRange = sceneGraph.getTimeRange(this);\n\n    this._subs.add(\n      timeRange.subscribeToState({\n        next: (timeRange) => {\n          this.runWithTimeRange(timeRange.value);\n        },\n      })\n    );\n\n    if (this.shouldRunQueriesOnActivate()) {\n      this.runQueries();\n    }\n  }\n\n  private shouldRunQueriesOnActivate() {\n    // If we already have data, no need\n    // TODO validate that time range is similar and if not we should run queries again\n    if (this.state.data) {\n      return false;\n    }\n\n    // If no maxDataPoints specified we need might to wait for container width to be set from the outside\n    if (!this.state.maxDataPoints && this.state.maxDataPointsFromWidth && !this._containerWidth) {\n      return false;\n    }\n\n    return true;\n  }\n\n  public deactivate(): void {\n    super.deactivate();\n\n    if (this._querySub) {\n      this._querySub.unsubscribe();\n      this._querySub = undefined;\n    }\n  }\n\n  public setContainerWidth(width: number) {\n    // If we don't have a width we should run queries\n    if (!this._containerWidth && width > 0) {\n      this._containerWidth = width;\n\n      // If we don't have maxDataPoints specifically set and maxDataPointsFromWidth is true\n      if (this.state.maxDataPointsFromWidth && !this.state.maxDataPoints) {\n        // As this is called from render path we need to wait for next tick before running queries\n        setTimeout(() => {\n          if (this.isActive && !this._querySub) {\n            this.runQueries();\n          }\n        }, 0);\n      }\n    } else {\n      // if the updated container width is bigger than 0 let's remember the width until next query issue\n      if (width > 0) {\n        this._containerWidth = width;\n      }\n    }\n  }\n\n  public runQueries() {\n    const timeRange = sceneGraph.getTimeRange(this);\n    this.runWithTimeRange(timeRange.state.value);\n  }\n\n  private getMaxDataPoints() {\n    return this.state.maxDataPoints ?? this._containerWidth ?? 500;\n  }\n\n  private async runWithTimeRange(timeRange: TimeRange) {\n    const { datasource, minInterval, queries } = this.state;\n    const sceneObjectScopedVar: Record<string, ScopedVar<SceneQueryRunner>> = {\n      __sceneObject: { text: '__sceneObject', value: this },\n    };\n    const request: DataQueryRequest = {\n      app: CoreApp.Dashboard,\n      requestId: getNextRequestId(),\n      timezone: 'browser',\n      panelId: 1,\n      dashboardId: 1,\n      range: timeRange,\n      interval: '1s',\n      intervalMs: 1000,\n      targets: cloneDeep(queries),\n      maxDataPoints: this.getMaxDataPoints(),\n      scopedVars: sceneObjectScopedVar,\n      startTime: Date.now(),\n    };\n\n    try {\n      const ds = await getDataSource(datasource, request.scopedVars);\n\n      // Attach the data source name to each query\n      request.targets = request.targets.map((query) => {\n        if (!query.datasource) {\n          query.datasource = ds.getRef();\n        }\n        return query;\n      });\n\n      // TODO interpolate minInterval\n      const lowerIntervalLimit = minInterval ? minInterval : ds.interval;\n      const norm = rangeUtil.calculateInterval(timeRange, request.maxDataPoints!, lowerIntervalLimit);\n\n      // make shallow copy of scoped vars,\n      // and add built in variables interval and interval_ms\n      request.scopedVars = Object.assign({}, request.scopedVars, {\n        __interval: { text: norm.interval, value: norm.interval },\n        __interval_ms: { text: norm.intervalMs.toString(), value: norm.intervalMs },\n      });\n\n      request.interval = norm.interval;\n      request.intervalMs = norm.intervalMs;\n\n      const runRequest = getRunRequest();\n      this._querySub = runRequest(ds, request)\n        .pipe(getTransformationsStream(this, this.state.transformations))\n        .subscribe({\n          next: this.onDataReceived,\n        });\n    } catch (err) {\n      console.error('PanelQueryRunner Error', err);\n    }\n  }\n\n  private onDataReceived = (data: PanelData) => {\n    this.setState({ data });\n  };\n}\n\nexport const getTransformationsStream: (\n  sceneObject: SceneObject,\n  transformations?: DataTransformerConfig[]\n) => MonoTypeOperatorFunction<PanelData> = (sceneObject, transformations) => (inputStream) => {\n  return inputStream.pipe(\n    mergeMap((data) => {\n      if (!transformations || transformations.length === 0) {\n        return of(data);\n      }\n\n      const ctx = {\n        interpolate: (value: string) => {\n          return sceneGraph.interpolate(sceneObject, value, data?.request?.scopedVars);\n        },\n      };\n\n      return transformDataFrame(transformations, data.series, ctx).pipe(map((series) => ({ ...data, series })));\n    })\n  );\n};\n"],"names":["timeRange"],"mappings":"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"}
+{"version":3,"file":"SceneQueryRunner.js","sources":["../../../src/querying/SceneQueryRunner.ts"],"sourcesContent":["import { cloneDeep } from 'lodash';\nimport { mergeMap, MonoTypeOperatorFunction, Unsubscribable, map, of } from 'rxjs';\n\nimport {\n  CoreApp,\n  DataQuery,\n  DataQueryRequest,\n  DataSourceRef,\n  DataTransformerConfig,\n  PanelData,\n  rangeUtil,\n  ScopedVar,\n  TimeRange,\n  transformDataFrame,\n} from '@grafana/data';\nimport { getRunRequest } from '@grafana/runtime';\n\nimport { SceneObjectBase } from '../core/SceneObjectBase';\nimport { sceneGraph } from '../core/sceneGraph';\nimport { SceneObject, SceneObjectStatePlain } from '../core/types';\nimport { getDataSource } from '../utils/getDataSource';\nimport { VariableDependencyConfig } from '../variables/VariableDependencyConfig';\nimport { SceneVariable } from '../variables/types';\nimport { writeSceneLog } from '../utils/writeSceneLog';\nimport { VariableValueRecorder } from '../variables/VariableValueRecorder';\n\nlet counter = 100;\n\nexport function getNextRequestId() {\n  return 'QS' + counter++;\n}\n\nexport interface QueryRunnerState extends SceneObjectStatePlain {\n  data?: PanelData;\n  queries: DataQueryExtended[];\n  transformations?: DataTransformerConfig[];\n  datasource?: DataSourceRef;\n  minInterval?: string;\n  maxDataPoints?: number;\n  // Non persisted state\n  maxDataPointsFromWidth?: boolean;\n  isWaitingForVariables?: boolean;\n}\n\nexport interface DataQueryExtended extends DataQuery {\n  [key: string]: any;\n}\n\nexport class SceneQueryRunner extends SceneObjectBase<QueryRunnerState> {\n  private _querySub?: Unsubscribable;\n  private _containerWidth?: number;\n  private _variableValueRecorder = new VariableValueRecorder();\n\n  protected _variableDependency: VariableDependencyConfig<QueryRunnerState> = new VariableDependencyConfig(this, {\n    statePaths: ['queries', 'datasource'],\n    onVariableUpdatesCompleted: (variables, dependencyChanged) =>\n      this.onVariableUpdatesCompleted(variables, dependencyChanged),\n  });\n\n  public activate() {\n    super.activate();\n    const timeRange = sceneGraph.getTimeRange(this);\n\n    this._subs.add(\n      timeRange.subscribeToState({\n        next: (timeRange) => {\n          this.runWithTimeRange(timeRange.value);\n        },\n      })\n    );\n\n    if (this.shouldRunQueriesOnActivate()) {\n      this.runQueries();\n    }\n  }\n\n  /**\n   * Handles some tricky cases where we need to run queries even when they have not changed in case\n   * the query execution on activate was stopped due to VariableSet still not having processed all variables.\n   */\n  private onVariableUpdatesCompleted(_variablesThatHaveChanged: Set<SceneVariable>, dependencyChanged: boolean) {\n    if (this.state.isWaitingForVariables && this.shouldRunQueriesOnActivate()) {\n      this.runQueries();\n      return;\n    }\n\n    if (dependencyChanged) {\n      this.runQueries();\n    }\n  }\n\n  private shouldRunQueriesOnActivate() {\n    // If no maxDataPoints specified we might need to wait for container width to be set from the outside\n    if (!this.state.maxDataPoints && this.state.maxDataPointsFromWidth && !this._containerWidth) {\n      return false;\n    }\n\n    if (this._variableValueRecorder.hasDependenciesChanged(this)) {\n      writeSceneLog(\n        'SceneQueryRunner',\n        'Variable dependency changed while inactive, shouldRunQueriesOnActivate returns true'\n      );\n      return true;\n    }\n\n    // If we already have data, no need\n    // TODO validate that time range is similar and if not we should run queries again\n    if (this.state.data) {\n      return false;\n    }\n\n    return true;\n  }\n\n  public deactivate(): void {\n    super.deactivate();\n\n    if (this._querySub) {\n      this._querySub.unsubscribe();\n      this._querySub = undefined;\n    }\n\n    this._variableValueRecorder.recordCurrentDependencyValuesForSceneObject(this);\n  }\n\n  public setContainerWidth(width: number) {\n    // If we don't have a width we should run queries\n    if (!this._containerWidth && width > 0) {\n      this._containerWidth = width;\n\n      // If we don't have maxDataPoints specifically set and maxDataPointsFromWidth is true\n      if (this.state.maxDataPointsFromWidth && !this.state.maxDataPoints) {\n        // As this is called from render path we need to wait for next tick before running queries\n        setTimeout(() => {\n          if (this.isActive && !this._querySub) {\n            this.runQueries();\n          }\n        }, 0);\n      }\n    } else {\n      // if the updated container width is bigger than 0 let's remember the width until next query issue\n      if (width > 0) {\n        this._containerWidth = width;\n      }\n    }\n  }\n\n  public runQueries() {\n    const timeRange = sceneGraph.getTimeRange(this);\n    this.runWithTimeRange(timeRange.state.value);\n  }\n\n  private getMaxDataPoints() {\n    return this.state.maxDataPoints ?? this._containerWidth ?? 500;\n  }\n\n  private async runWithTimeRange(timeRange: TimeRange) {\n    // Skip executing queries if variable dependency is in loading state\n    if (sceneGraph.hasVariableDependencyInLoadingState(this)) {\n      writeSceneLog('SceneQueryRunner', 'Variable dependency is in loading state, skipping query execution');\n      this.setState({ isWaitingForVariables: true });\n      return;\n    }\n\n    // If we where waiting for variables clear that flag\n    if (this.state.isWaitingForVariables) {\n      this.setState({ isWaitingForVariables: false });\n    }\n\n    const { datasource, minInterval, queries } = this.state;\n    const sceneObjectScopedVar: Record<string, ScopedVar<SceneQueryRunner>> = {\n      __sceneObject: { text: '__sceneObject', value: this },\n    };\n\n    const request: DataQueryRequest = {\n      app: CoreApp.Dashboard,\n      requestId: getNextRequestId(),\n      timezone: 'browser',\n      panelId: 1,\n      dashboardId: 1,\n      range: timeRange,\n      interval: '1s',\n      intervalMs: 1000,\n      targets: cloneDeep(queries),\n      maxDataPoints: this.getMaxDataPoints(),\n      scopedVars: sceneObjectScopedVar,\n      startTime: Date.now(),\n    };\n\n    try {\n      const ds = await getDataSource(datasource, request.scopedVars);\n\n      // Attach the data source name to each query\n      request.targets = request.targets.map((query) => {\n        if (!query.datasource) {\n          query.datasource = ds.getRef();\n        }\n        return query;\n      });\n\n      // TODO interpolate minInterval\n      const lowerIntervalLimit = minInterval ? minInterval : ds.interval;\n      const norm = rangeUtil.calculateInterval(timeRange, request.maxDataPoints!, lowerIntervalLimit);\n\n      // make shallow copy of scoped vars,\n      // and add built in variables interval and interval_ms\n      request.scopedVars = Object.assign({}, request.scopedVars, {\n        __interval: { text: norm.interval, value: norm.interval },\n        __interval_ms: { text: norm.intervalMs.toString(), value: norm.intervalMs },\n      });\n\n      request.interval = norm.interval;\n      request.intervalMs = norm.intervalMs;\n\n      const runRequest = getRunRequest();\n\n      writeSceneLog('SceneQueryRunner', 'Starting runRequest', this.state.key);\n\n      this._querySub = runRequest(ds, request)\n        .pipe(getTransformationsStream(this, this.state.transformations))\n        .subscribe({\n          next: this.onDataReceived,\n        });\n    } catch (err) {\n      console.error('PanelQueryRunner Error', err);\n    }\n  }\n\n  private onDataReceived = (data: PanelData) => {\n    this.setState({ data });\n  };\n}\n\nexport const getTransformationsStream: (\n  sceneObject: SceneObject,\n  transformations?: DataTransformerConfig[]\n) => MonoTypeOperatorFunction<PanelData> = (sceneObject, transformations) => (inputStream) => {\n  return inputStream.pipe(\n    mergeMap((data) => {\n      if (!transformations || transformations.length === 0) {\n        return of(data);\n      }\n\n      const ctx = {\n        interpolate: (value: string) => {\n          return sceneGraph.interpolate(sceneObject, value, data?.request?.scopedVars);\n        },\n      };\n\n      return transformDataFrame(transformations, data.series, ctx).pipe(map((series) => ({ ...data, series })));\n    })\n  );\n};\n"],"names":["timeRange"],"mappings":"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"}

package/dist/esm/utils/writeSceneLog.js

@@ -0,0 +1,8 @@
+function writeSceneLog(logger, message, ...rest) {
+  if (window.grafanaSceneLogging) {
+    console.log(`${logger}: `, message, ...rest);
+  }
+}
+
+export { writeSceneLog };
+//# sourceMappingURL=writeSceneLog.js.map

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

@@ -0,0 +1 @@
+{"version":3,"file":"writeSceneLog.js","sources":["../../../src/utils/writeSceneLog.ts"],"sourcesContent":["export function writeSceneLog(logger: string, message: string, ...rest: unknown[]) {\n  if ((window as any).grafanaSceneLogging) {\n    console.log(`${logger}: `, message, ...rest);\n  }\n}\n"],"names":[],"mappings":"AAAgB,SAAA,aAAA,CAAc,MAAgB,EAAA,OAAA,EAAA,GAAoB,IAAiB,EAAA;AACjF,EAAA,IAAK,OAAe,mBAAqB,EAAA;AACvC,IAAA,OAAA,CAAQ,GAAI,CAAA,CAAA,EAAG,MAAY,CAAA,EAAA,CAAA,EAAA,OAAA,EAAS,GAAG,IAAI,CAAA,CAAA;AAAA,GAC7C;AACF;;;;"}

package/dist/esm/variables/VariableDependencyConfig.js

@@ -1,26 +1,37 @@
 import { VARIABLE_REGEX } from './constants.js';
 
 class VariableDependencyConfig {
-  constructor(_sceneObject, options) {
+  constructor(_sceneObject, _options) {
     this._sceneObject = _sceneObject;
+    this._options = _options;
     this._dependencies = /* @__PURE__ */ new Set();
     this.scanCount = 0;
     this.defaultHandlerReferencedVariableValueChanged = () => {
       this._sceneObject.forceRender();
     };
-    var _a;
-    this._statePaths = options.statePaths;
-    this._onReferencedVariableValueChanged = (_a = options.onReferencedVariableValueChanged) != null ? _a : this.defaultHandlerReferencedVariableValueChanged;
+    this._statePaths = _options.statePaths;
   }
   hasDependencyOn(name) {
     return this.getNames().has(name);
   }
-  variableValuesChanged(variables) {
+  variableUpdatesCompleted(changedVariables) {
     const deps = this.getNames();
-    for (const variable of variables) {
+    let dependencyChanged = false;
+    for (const variable of changedVariables) {
       if (deps.has(variable.state.name)) {
-        this._onReferencedVariableValueChanged();
-        return;
+        dependencyChanged = true;
+        break;
+      }
+    }
+    if (this._options.onVariableUpdatesCompleted) {
+      this._options.onVariableUpdatesCompleted(changedVariables, dependencyChanged);
+      return;
+    }
+    if (dependencyChanged) {
+      if (this._options.onReferencedVariableValueChanged) {
+        this._options.onReferencedVariableValueChanged();
+      } else {
+        this.defaultHandlerReferencedVariableValueChanged();
       }
     }
   }

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

@@ -1 +1 @@
-{"version":3,"file":"VariableDependencyConfig.js","sources":["../../../src/variables/VariableDependencyConfig.ts"],"sourcesContent":["import { SceneObject, SceneObjectState } from '../core/types';\nimport { VARIABLE_REGEX } from './constants';\n\nimport { SceneVariable, SceneVariableDependencyConfigLike } from './types';\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   * 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?: () => 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 _onReferencedVariableValueChanged: () => void;\n\n  public scanCount = 0;\n\n  public constructor(private _sceneObject: SceneObject<TState>, options: VariableDependencyConfigOptions<TState>) {\n    this._statePaths = options.statePaths;\n    this._onReferencedVariableValueChanged =\n      options.onReferencedVariableValueChanged ?? this.defaultHandlerReferencedVariableValueChanged;\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 up to this implementation to check if it's relevant given the current dependencies.\n   */\n  public variableValuesChanged(variables: Set<SceneVariable>) {\n    const deps = this.getNames();\n\n    for (const variable of variables) {\n      if (deps.has(variable.state.name)) {\n        this._onReferencedVariableValueChanged();\n        return;\n      }\n    }\n  }\n\n  /**\n   * Only way to force a re-render is to update state right now\n   */\n  private defaultHandlerReferencedVariableValueChanged = () => {\n    this._sceneObject.forceRender();\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 (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  private scanStateForDependencies(state: TState) {\n    this._dependencies.clear();\n    this.scanCount += 1;\n\n    if (this._statePaths) {\n      for (const path of this._statePaths) {\n        const value = state[path];\n        if (value) {\n          this.extractVariablesFrom(value);\n        }\n      }\n    } else {\n      this.extractVariablesFrom(state);\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\nconst safeStringifyValue = (value: unknown) => {\n  try {\n    return JSON.stringify(value, null);\n  } catch (error) {\n    console.error(error);\n  }\n\n  return '';\n};\n"],"names":[],"mappings":"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"}
+{"version":3,"file":"VariableDependencyConfig.js","sources":["../../../src/variables/VariableDependencyConfig.ts"],"sourcesContent":["import { SceneObject, SceneObjectState } from '../core/types';\nimport { VARIABLE_REGEX } from './constants';\n\nimport { SceneVariable, SceneVariableDependencyConfigLike } from './types';\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   * 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?: () => void;\n\n  /**\n   * Optional way to customize how to handle when the variable system has completed an update\n   */\n  onVariableUpdatesCompleted?: (changedVariables: Set<SceneVariable>, dependencyChanged: boolean) => 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\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 up to this implementation to check if it's relevant given the current dependencies.\n   */\n  public variableUpdatesCompleted(changedVariables: Set<SceneVariable>) {\n    const deps = this.getNames();\n    let dependencyChanged = false;\n\n    for (const variable of changedVariables) {\n      if (deps.has(variable.state.name)) {\n        dependencyChanged = true;\n        break;\n      }\n    }\n\n    // If custom handler is always called to let the scene object know that SceneVariableSet has completed processing variables\n    if (this._options.onVariableUpdatesCompleted) {\n      this._options.onVariableUpdatesCompleted(changedVariables, dependencyChanged);\n      return;\n    }\n\n    if (dependencyChanged) {\n      if (this._options.onReferencedVariableValueChanged) {\n        this._options.onReferencedVariableValueChanged();\n      } else {\n        this.defaultHandlerReferencedVariableValueChanged();\n      }\n    }\n  }\n\n  /**\n   * Only way to force a re-render is to update state right now\n   */\n  private defaultHandlerReferencedVariableValueChanged = () => {\n    this._sceneObject.forceRender();\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 (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  private scanStateForDependencies(state: TState) {\n    this._dependencies.clear();\n    this.scanCount += 1;\n\n    if (this._statePaths) {\n      for (const path of this._statePaths) {\n        const value = state[path];\n        if (value) {\n          this.extractVariablesFrom(value);\n        }\n      }\n    } else {\n      this.extractVariablesFrom(state);\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\nconst safeStringifyValue = (value: unknown) => {\n  try {\n    return JSON.stringify(value, null);\n  } catch (error) {\n    console.error(error);\n  }\n\n  return '';\n};\n"],"names":[],"mappings":"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"}

package/dist/esm/variables/VariableValueRecorder.js

@@ -0,0 +1,56 @@
+import { sceneGraph } from '../core/sceneGraph.js';
+import { isVariableValueEqual } from './utils.js';
+
+class VariableValueRecorder {
+  constructor() {
+    this._values = /* @__PURE__ */ new Map();
+  }
+  recordCurrentDependencyValuesForSceneObject(sceneObject) {
+    this.clearValues();
+    for (const variableName of sceneObject.variableDependency.getNames()) {
+      const variable = sceneGraph.lookupVariable(variableName, sceneObject);
+      if (variable) {
+        this._values.set(variable, variable.getValue());
+      }
+    }
+  }
+  clearValues() {
+    this._values.clear();
+  }
+  hasValues() {
+    return !!this._values;
+  }
+  recordCurrentValue(variable) {
+    this._values.set(variable, variable.getValue());
+  }
+  hasRecordedValue(variable) {
+    return this._values.has(variable);
+  }
+  hasValueChanged(variable) {
+    if (this._values.has(variable)) {
+      const value = this._values.get(variable);
+      if (!isVariableValueEqual(value, variable.getValue())) {
+        return true;
+      }
+    }
+    return false;
+  }
+  hasDependenciesChanged(sceneObject) {
+    if (!this._values) {
+      return false;
+    }
+    for (const variableName of sceneObject.variableDependency.getNames()) {
+      const variable = sceneGraph.lookupVariable(variableName, sceneObject);
+      if (variable && this._values.has(variable)) {
+        const value = this._values.get(variable);
+        if (!isVariableValueEqual(value, variable.getValue())) {
+          return true;
+        }
+      }
+    }
+    return false;
+  }
+}
+
+export { VariableValueRecorder };
+//# sourceMappingURL=VariableValueRecorder.js.map

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

@@ -0,0 +1 @@
+{"version":3,"file":"VariableValueRecorder.js","sources":["../../../src/variables/VariableValueRecorder.ts"],"sourcesContent":["import { sceneGraph } from '../core/sceneGraph';\nimport { SceneObject } from '../core/types';\nimport { SceneVariable, VariableValue } from './types';\nimport { isVariableValueEqual } from './utils';\n\n/**\n * Useful for remembering variable values to know if they have changed\n **/\nexport class VariableValueRecorder {\n  private _values = new Map<SceneVariable, VariableValue | undefined | null>();\n\n  public recordCurrentDependencyValuesForSceneObject(sceneObject: SceneObject) {\n    this.clearValues();\n\n    for (const variableName of sceneObject.variableDependency!.getNames()) {\n      const variable = sceneGraph.lookupVariable(variableName, sceneObject);\n      if (variable) {\n        this._values.set(variable, variable.getValue());\n      }\n    }\n  }\n\n  public clearValues() {\n    this._values.clear();\n  }\n\n  public hasValues(): boolean {\n    return !!this._values;\n  }\n\n  public recordCurrentValue(variable: SceneVariable) {\n    this._values.set(variable, variable.getValue());\n  }\n\n  public hasRecordedValue(variable: SceneVariable): boolean {\n    return this._values.has(variable);\n  }\n\n  public hasValueChanged(variable: SceneVariable): boolean {\n    if (this._values.has(variable)) {\n      const value = this._values.get(variable);\n      if (!isVariableValueEqual(value, variable.getValue())) {\n        return true;\n      }\n    }\n\n    return false;\n  }\n\n  public hasDependenciesChanged(sceneObject: SceneObject): boolean {\n    if (!this._values) {\n      return false;\n    }\n\n    for (const variableName of sceneObject.variableDependency!.getNames()) {\n      const variable = sceneGraph.lookupVariable(variableName, sceneObject);\n      if (variable && this._values.has(variable)) {\n        const value = this._values.get(variable);\n        if (!isVariableValueEqual(value, variable.getValue())) {\n          return true;\n        }\n      }\n    }\n\n    return false;\n  }\n}\n"],"names":[],"mappings":";;;AAQO,MAAM,qBAAsB,CAAA;AAAA,EAA5B,WAAA,GAAA;AACL,IAAQ,IAAA,CAAA,OAAA,uBAAc,GAAqD,EAAA,CAAA;AAAA,GAAA;AAAA,EAEpE,4CAA4C,WAA0B,EAAA;AAC3E,IAAA,IAAA,CAAK,WAAY,EAAA,CAAA;AAEjB,IAAA,KAAA,MAAW,YAAgB,IAAA,WAAA,CAAY,kBAAoB,CAAA,QAAA,EAAY,EAAA;AACrE,MAAA,MAAM,QAAW,GAAA,UAAA,CAAW,cAAe,CAAA,YAAA,EAAc,WAAW,CAAA,CAAA;AACpE,MAAA,IAAI,QAAU,EAAA;AACZ,QAAA,IAAA,CAAK,OAAQ,CAAA,GAAA,CAAI,QAAU,EAAA,QAAA,CAAS,UAAU,CAAA,CAAA;AAAA,OAChD;AAAA,KACF;AAAA,GACF;AAAA,EAEO,WAAc,GAAA;AACnB,IAAA,IAAA,CAAK,QAAQ,KAAM,EAAA,CAAA;AAAA,GACrB;AAAA,EAEO,SAAqB,GAAA;AAC1B,IAAO,OAAA,CAAC,CAAC,IAAK,CAAA,OAAA,CAAA;AAAA,GAChB;AAAA,EAEO,mBAAmB,QAAyB,EAAA;AACjD,IAAA,IAAA,CAAK,OAAQ,CAAA,GAAA,CAAI,QAAU,EAAA,QAAA,CAAS,UAAU,CAAA,CAAA;AAAA,GAChD;AAAA,EAEO,iBAAiB,QAAkC,EAAA;AACxD,IAAO,OAAA,IAAA,CAAK,OAAQ,CAAA,GAAA,CAAI,QAAQ,CAAA,CAAA;AAAA,GAClC;AAAA,EAEO,gBAAgB,QAAkC,EAAA;AACvD,IAAA,IAAI,IAAK,CAAA,OAAA,CAAQ,GAAI,CAAA,QAAQ,CAAG,EAAA;AAC9B,MAAA,MAAM,KAAQ,GAAA,IAAA,CAAK,OAAQ,CAAA,GAAA,CAAI,QAAQ,CAAA,CAAA;AACvC,MAAA,IAAI,CAAC,oBAAqB,CAAA,KAAA,EAAO,QAAS,CAAA,QAAA,EAAU,CAAG,EAAA;AACrD,QAAO,OAAA,IAAA,CAAA;AAAA,OACT;AAAA,KACF;AAEA,IAAO,OAAA,KAAA,CAAA;AAAA,GACT;AAAA,EAEO,uBAAuB,WAAmC,EAAA;AAC/D,IAAI,IAAA,CAAC,KAAK,OAAS,EAAA;AACjB,MAAO,OAAA,KAAA,CAAA;AAAA,KACT;AAEA,IAAA,KAAA,MAAW,YAAgB,IAAA,WAAA,CAAY,kBAAoB,CAAA,QAAA,EAAY,EAAA;AACrE,MAAA,MAAM,QAAW,GAAA,UAAA,CAAW,cAAe,CAAA,YAAA,EAAc,WAAW,CAAA,CAAA;AACpE,MAAA,IAAI,QAAY,IAAA,IAAA,CAAK,OAAQ,CAAA,GAAA,CAAI,QAAQ,CAAG,EAAA;AAC1C,QAAA,MAAM,KAAQ,GAAA,IAAA,CAAK,OAAQ,CAAA,GAAA,CAAI,QAAQ,CAAA,CAAA;AACvC,QAAA,IAAI,CAAC,oBAAqB,CAAA,KAAA,EAAO,QAAS,CAAA,QAAA,EAAU,CAAG,EAAA;AACrD,UAAO,OAAA,IAAA,CAAA;AAAA,SACT;AAAA,OACF;AAAA,KACF;AAEA,IAAO,OAAA,KAAA,CAAA;AAAA,GACT;AACF;;;;"}

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

@@ -1,34 +1,41 @@
 import React from 'react';
 import { VariableHide } from '@grafana/data';
 import { selectors } from '@grafana/e2e-selectors';
-import { Tooltip } from '@grafana/ui';
+import { useStyles2, Tooltip } from '@grafana/ui';
 import { SceneObjectBase } from '../../core/SceneObjectBase.js';
 import { sceneGraph } from '../../core/sceneGraph.js';
+import { css } from '@emotion/css';
 
 class VariableValueSelectors extends SceneObjectBase {
 }
 VariableValueSelectors.Component = VariableValueSelectorsRenderer;
 function VariableValueSelectorsRenderer({ model }) {
   const variables = sceneGraph.getVariables(model).useState();
+  const styles = useStyles2(getStyles);
   return /* @__PURE__ */ React.createElement(React.Fragment, null, variables.variables.map((variable) => /* @__PURE__ */ React.createElement(VariableValueSelectWrapper, {
     key: variable.state.key,
-    variable
+    variable,
+    styles
   })));
 }
-function VariableValueSelectWrapper({ variable }) {
+function VariableValueSelectWrapper({
+  variable,
+  styles
+}) {
   const state = variable.useState();
   if (state.hide === VariableHide.hideVariable) {
     return null;
   }
   return /* @__PURE__ */ React.createElement("div", {
-    className: "gf-form"
+    className: styles.container
   }, /* @__PURE__ */ React.createElement(VariableLabel, {
-    state
+    state,
+    styles
   }), /* @__PURE__ */ React.createElement(variable.Component, {
     model: variable
   }));
 }
-function VariableLabel({ state }) {
+function VariableLabel({ state, styles }) {
   var _a;
   if (state.hide === VariableHide.hideLabel) {
     return null;
@@ -40,17 +47,36 @@ function VariableLabel({ state }) {
       content: state.description,
       placement: "bottom"
     }, /* @__PURE__ */ React.createElement("label", {
-      className: "gf-form-label gf-form-label--variable",
+      className: styles.variableLabel,
       "data-testid": selectors.pages.Dashboard.SubMenu.submenuItemLabels(labelOrName),
       htmlFor: elementId
     }, labelOrName));
   }
   return /* @__PURE__ */ React.createElement("label", {
-    className: "gf-form-label gf-form-label--variable",
+    className: styles.variableLabel,
     "data-testid": selectors.pages.Dashboard.SubMenu.submenuItemLabels(labelOrName),
     htmlFor: elementId
   }, labelOrName);
 }
+const getStyles = (theme) => ({
+  container: css({
+    display: "flex"
+  }),
+  variableLabel: css({
+    background: theme.isDark ? theme.colors.background.primary : theme.colors.background.secondary,
+    display: `flex`,
+    alignItems: "center",
+    padding: theme.spacing(0, 1),
+    fontWeight: theme.typography.fontWeightMedium,
+    fontSize: theme.typography.bodySmall.fontSize,
+    height: theme.spacing(theme.components.height.md),
+    lineHeight: theme.spacing(theme.components.height.md),
+    borderRadius: theme.shape.borderRadius(1),
+    border: `1px solid ${theme.components.input.borderColor}`,
+    position: "relative",
+    right: -1
+  })
+});
 
 export { VariableValueSelectors };
 //# sourceMappingURL=VariableValueSelectors.js.map

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';\nimport { selectors } from '@grafana/e2e-selectors';\nimport { Tooltip } from '@grafana/ui';\n\nimport { SceneObjectBase } from '../../core/SceneObjectBase';\nimport { sceneGraph } from '../../core/sceneGraph';\nimport { SceneComponentProps, SceneObject, SceneObjectStatePlain } from '../../core/types';\nimport { SceneVariableState } from '../types';\n\nexport class VariableValueSelectors extends SceneObjectBase<SceneObjectStatePlain> {\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} />\n      ))}\n    </>\n  );\n}\n\nfunction VariableValueSelectWrapper({ variable }: { variable: SceneObject<SceneVariableState> }) {\n  const state = variable.useState();\n\n  if (state.hide === VariableHide.hideVariable) {\n    return null;\n  }\n\n  return (\n    <div className=\"gf-form\">\n      <VariableLabel state={state} />\n      <variable.Component model={variable} />\n    </div>\n  );\n}\n\nfunction VariableLabel({ state }: { state: SceneVariableState }) {\n  if (state.hide === VariableHide.hideLabel) {\n    return null;\n  }\n\n  const elementId = `var-${state.key}`;\n  const labelOrName = state.label ?? state.name;\n\n  if (state.description) {\n    return (\n      <Tooltip content={state.description} placement={'bottom'}>\n        <label\n          className=\"gf-form-label gf-form-label--variable\"\n          data-testid={selectors.pages.Dashboard.SubMenu.submenuItemLabels(labelOrName)}\n          htmlFor={elementId}\n        >\n          {labelOrName}\n        </label>\n      </Tooltip>\n    );\n  }\n\n  return (\n    <label\n      className=\"gf-form-label gf-form-label--variable\"\n      data-testid={selectors.pages.Dashboard.SubMenu.submenuItemLabels(labelOrName)}\n      htmlFor={elementId}\n    >\n      {labelOrName}\n    </label>\n  );\n}\n"],"names":[],"mappings":";;;;;;;AAWO,MAAM,+BAA+B,eAAuC,CAAA;AAEnF,CAAA;AAFa,sBAAA,CACG,SAAY,GAAA,8BAAA,CAAA;AAG5B,SAAS,8BAAA,CAA+B,EAAE,KAAA,EAAsD,EAAA;AAC9F,EAAA,MAAM,SAAY,GAAA,UAAA,CAAW,YAAa,CAAA,KAAK,EAAG,QAAS,EAAA,CAAA;AAE3D,EAAA,iEAEK,SAAU,CAAA,SAAA,CAAU,GAAI,CAAA,CAAC,6BACvB,KAAA,CAAA,aAAA,CAAA,0BAAA,EAAA;AAAA,IAA2B,GAAA,EAAK,SAAS,KAAM,CAAA,GAAA;AAAA,IAAK,QAAA;AAAA,GAAoB,CAC1E,CACH,CAAA,CAAA;AAEJ,CAAA;AAEA,SAAS,0BAAA,CAA2B,EAAE,QAAA,EAA2D,EAAA;AAC/F,EAAM,MAAA,KAAA,GAAQ,SAAS,QAAS,EAAA,CAAA;AAEhC,EAAI,IAAA,KAAA,CAAM,IAAS,KAAA,YAAA,CAAa,YAAc,EAAA;AAC5C,IAAO,OAAA,IAAA,CAAA;AAAA,GACT;AAEA,EAAA,uBACG,KAAA,CAAA,aAAA,CAAA,KAAA,EAAA;AAAA,IAAI,SAAU,EAAA,SAAA;AAAA,GAAA,kBACZ,KAAA,CAAA,aAAA,CAAA,aAAA,EAAA;AAAA,IAAc,KAAA;AAAA,GAAc,CAAA,kBAC5B,KAAA,CAAA,aAAA,CAAA,QAAA,CAAS,SAAT,EAAA;AAAA,IAAmB,KAAO,EAAA,QAAA;AAAA,GAAU,CACvC,CAAA,CAAA;AAEJ,CAAA;AAEA,SAAS,aAAA,CAAc,EAAE,KAAA,EAAwC,EAAA;AA1CjE,EAAA,IAAA,EAAA,CAAA;AA2CE,EAAI,IAAA,KAAA,CAAM,IAAS,KAAA,YAAA,CAAa,SAAW,EAAA;AACzC,IAAO,OAAA,IAAA,CAAA;AAAA,GACT;AAEA,EAAM,MAAA,SAAA,GAAY,OAAO,KAAM,CAAA,GAAA,CAAA,CAAA,CAAA;AAC/B,EAAA,MAAM,WAAc,GAAA,CAAA,EAAA,GAAA,KAAA,CAAM,KAAN,KAAA,IAAA,GAAA,EAAA,GAAe,KAAM,CAAA,IAAA,CAAA;AAEzC,EAAA,IAAI,MAAM,WAAa,EAAA;AACrB,IAAA,uBACG,KAAA,CAAA,aAAA,CAAA,OAAA,EAAA;AAAA,MAAQ,SAAS,KAAM,CAAA,WAAA;AAAA,MAAa,SAAW,EAAA,QAAA;AAAA,KAAA,kBAC7C,KAAA,CAAA,aAAA,CAAA,OAAA,EAAA;AAAA,MACC,SAAU,EAAA,uCAAA;AAAA,MACV,eAAa,SAAU,CAAA,KAAA,CAAM,SAAU,CAAA,OAAA,CAAQ,kBAAkB,WAAW,CAAA;AAAA,MAC5E,OAAS,EAAA,SAAA;AAAA,KAAA,EAER,WACH,CACF,CAAA,CAAA;AAAA,GAEJ;AAEA,EAAA,uBACG,KAAA,CAAA,aAAA,CAAA,OAAA,EAAA;AAAA,IACC,SAAU,EAAA,uCAAA;AAAA,IACV,eAAa,SAAU,CAAA,KAAA,CAAM,SAAU,CAAA,OAAA,CAAQ,kBAAkB,WAAW,CAAA;AAAA,IAC5E,OAAS,EAAA,SAAA;AAAA,GAAA,EAER,WACH,CAAA,CAAA;AAEJ;;;;"}
+{"version":3,"file":"VariableValueSelectors.js","sources":["../../../../src/variables/components/VariableValueSelectors.tsx"],"sourcesContent":["import React from 'react';\n\nimport { GrafanaTheme2, VariableHide } from '@grafana/data';\nimport { selectors } from '@grafana/e2e-selectors';\nimport { Tooltip, useStyles2 } from '@grafana/ui';\n\nimport { SceneObjectBase } from '../../core/SceneObjectBase';\nimport { sceneGraph } from '../../core/sceneGraph';\nimport { SceneComponentProps, SceneObject, SceneObjectStatePlain } from '../../core/types';\nimport { SceneVariableState } from '../types';\nimport { css } from '@emotion/css';\n\nexport class VariableValueSelectors extends SceneObjectBase<SceneObjectStatePlain> {\n  public static Component = VariableValueSelectorsRenderer;\n}\n\nfunction VariableValueSelectorsRenderer({ model }: SceneComponentProps<VariableValueSelectors>) {\n  const variables = sceneGraph.getVariables(model)!.useState();\n  const styles = useStyles2(getStyles);\n\n  return (\n    <>\n      {variables.variables.map((variable) => (\n        <VariableValueSelectWrapper key={variable.state.key} variable={variable} styles={styles} />\n      ))}\n    </>\n  );\n}\n\nfunction VariableValueSelectWrapper({\n  variable,\n  styles,\n}: {\n  variable: SceneObject<SceneVariableState>;\n  styles: VariableLabelStyles;\n}) {\n  const state = variable.useState();\n\n  if (state.hide === VariableHide.hideVariable) {\n    return null;\n  }\n\n  return (\n    <div className={styles.container}>\n      <VariableLabel state={state} styles={styles} />\n      <variable.Component model={variable} />\n    </div>\n  );\n}\n\nfunction VariableLabel({ state, styles }: { state: SceneVariableState; styles: VariableLabelStyles }) {\n  if (state.hide === VariableHide.hideLabel) {\n    return null;\n  }\n\n  const elementId = `var-${state.key}`;\n  const labelOrName = state.label ?? state.name;\n\n  if (state.description) {\n    return (\n      <Tooltip content={state.description} placement={'bottom'}>\n        <label\n          className={styles.variableLabel}\n          data-testid={selectors.pages.Dashboard.SubMenu.submenuItemLabels(labelOrName)}\n          htmlFor={elementId}\n        >\n          {labelOrName}\n        </label>\n      </Tooltip>\n    );\n  }\n\n  return (\n    <label\n      className={styles.variableLabel}\n      data-testid={selectors.pages.Dashboard.SubMenu.submenuItemLabels(labelOrName)}\n      htmlFor={elementId}\n    >\n      {labelOrName}\n    </label>\n  );\n}\n\nconst getStyles = (theme: GrafanaTheme2) => ({\n  container: css({\n    display: 'flex',\n  }),\n  variableLabel: css({\n    background: theme.isDark ? theme.colors.background.primary : theme.colors.background.secondary,\n    display: `flex`,\n    alignItems: 'center',\n    padding: theme.spacing(0, 1),\n    fontWeight: theme.typography.fontWeightMedium,\n    fontSize: theme.typography.bodySmall.fontSize,\n    height: theme.spacing(theme.components.height.md),\n    lineHeight: theme.spacing(theme.components.height.md),\n    borderRadius: theme.shape.borderRadius(1),\n    border: `1px solid ${theme.components.input.borderColor}`,\n    position: 'relative',\n    // To make the border line up with the input border\n    right: -1,\n  }),\n});\n\ntype VariableLabelStyles = ReturnType<typeof getStyles>;\n"],"names":[],"mappings":"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"}