@grafana/scenes 0.5.0 → 0.7.0

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

@@ -1 +1 @@
-{"version":3,"file":"types.js","sources":["../../../src/core/types.ts"],"sourcesContent":["import React from 'react';\nimport { MonoTypeOperatorFunction, Unsubscribable } from 'rxjs';\n\nimport {\n  BusEvent,\n  BusEventHandler,\n  BusEventType,\n  DataFrame,\n  DataTransformContext,\n  PanelData,\n  TimeRange,\n  TimeZone,\n} from '@grafana/data';\n\nimport { SceneVariableDependencyConfigLike, SceneVariables } from '../variables/types';\n\nexport interface SceneObjectState {\n  key?: string;\n  $timeRange?: SceneTimeRangeLike;\n  $data?: SceneDataProvider;\n  $variables?: SceneVariables;\n  /**\n   * @experimental\n   * Can be used to add extra behaviors to a scene object.\n   * These are activated when the their parent scene object is activated.\n   */\n  $behaviors?: Array<SceneObject | SceneStatelessBehavior>;\n}\n\nexport interface SceneLayoutChildOptions {\n  width?: number | string;\n  height?: number | string;\n  xSizing?: 'fill' | 'content';\n  ySizing?: 'fill' | 'content';\n  x?: number;\n  y?: number;\n  minWidth?: number | string;\n  minHeight?: number | string;\n  isDraggable?: boolean;\n  isResizable?: boolean;\n}\n\nexport interface SceneComponentProps<T> {\n  model: T;\n}\n\nexport type SceneComponent<TModel> = (props: SceneComponentProps<TModel>) => React.ReactElement | null;\n\nexport interface SceneDataState extends SceneObjectState {\n  data?: PanelData;\n}\n\nexport interface SceneObject<TState extends SceneObjectState = SceneObjectState> {\n  /** The current state */\n  readonly state: TState;\n\n  /** True when there is a React component mounted for this Object */\n  readonly isActive: boolean;\n\n  /** SceneObject parent */\n  readonly parent?: SceneObject;\n\n  /** This abtractions declares what variables the scene object depends on and how to handle when they change value. **/\n  readonly variableDependency?: SceneVariableDependencyConfigLike;\n\n  /** This abstraction declares URL sync dependencies of a scene object. **/\n  readonly urlSync?: SceneObjectUrlSyncHandler;\n\n  /** Subscribe to state changes */\n  subscribeToState(handler: SceneStateChangedHandler<TState>): Unsubscribable;\n\n  /** Subscribe to a scene event */\n  subscribeToEvent<T extends BusEvent>(typeFilter: BusEventType<T>, handler: BusEventHandler<T>): Unsubscribable;\n\n  /** Publish an event and optionally bubble it up the scene */\n  publishEvent(event: BusEvent, bubble?: boolean): void;\n\n  /** Utility hook that wraps useObservable. Used by React components to subscribes to state changes */\n  useState(): TState;\n\n  /** How to modify state */\n  setState(state: Partial<TState>): void;\n\n  /**\n   * Called when the Component is mounted. This will also activate any $data, $variables or $timeRange scene object on this level.\n   * Don't override this in your custom SceneObjects, instead use addActivationHandler from the constructor.\n   **/\n  activate(): CancelActivationHandler;\n\n  /** Get the scene root */\n  getRoot(): SceneObject;\n\n  /** Returns a deep clone this object and all its children */\n  clone(state?: Partial<TState>): this;\n\n  /** A React component to use for rendering the object */\n  Component(props: SceneComponentProps<SceneObject<TState>>): React.ReactElement | null;\n\n  /** Force a re-render, should only be needed when variable values change */\n  forceRender(): void;\n\n  /**\n   * Allows external code to register code that is executed on activate and deactivate. This allow you\n   * to wire up scene objects that need to respond to state changes in other objects from the outside.\n   **/\n  addActivationHandler(handler: SceneActivationHandler): void;\n\n  /**\n   * Loop through state and call callback for each direct child scene object.\n   * Checks 1 level deep properties and arrays. So a scene object hidden in a nested plain object will not be detected.\n   */\n  forEachChild(callback: (child: SceneObject) => void): void;\n}\n\nexport type SceneActivationHandler = () => SceneDeactivationHandler | void;\nexport type SceneDeactivationHandler = () => void;\n\n/**\n * Function returned by activate() that when called will deactivate the object if it's the last activator\n **/\nexport type CancelActivationHandler = () => void;\n\nexport interface SceneLayoutState extends SceneObjectState {\n  children: SceneObject[];\n}\n\nexport interface SceneLayout<T extends SceneLayoutState = SceneLayoutState> extends SceneObject<T> {\n  isDraggable(): boolean;\n  getDragClass?(): string;\n  getDragClassCancel?(): string;\n}\n\nexport interface SceneTimeRangeState extends SceneObjectState {\n  from: string;\n  to: string;\n  timeZone: TimeZone;\n  fiscalYearStartMonth?: number;\n  value: TimeRange;\n}\n\nexport interface SceneTimeRangeLike extends SceneObject<SceneTimeRangeState> {\n  onTimeRangeChange(timeRange: TimeRange): void;\n  onRefresh(): void;\n}\n\nexport interface SceneObjectRef {\n  ref: SceneObject;\n}\n\nexport function isSceneObject(obj: any): obj is SceneObject {\n  return obj.useState !== undefined;\n}\n\nexport interface SceneObjectWithUrlSync extends SceneObject {\n  getUrlState(): SceneObjectUrlValues;\n  updateFromUrl(values: SceneObjectUrlValues): void;\n}\n\nexport interface SceneObjectUrlSyncHandler {\n  getKeys(): string[];\n  getUrlState(): SceneObjectUrlValues;\n  updateFromUrl(values: SceneObjectUrlValues): void;\n}\n\nexport type SceneObjectUrlValue = string | string[] | undefined | null;\nexport type SceneObjectUrlValues = Record<string, SceneObjectUrlValue>;\n\nexport type CustomTransformOperator = (context: DataTransformContext) => MonoTypeOperatorFunction<DataFrame[]>;\nexport type SceneStateChangedHandler<TState> = (newState: TState, prevState: TState) => void;\n\nexport type DeepPartial<T> = {\n  [K in keyof T]?: T[K] extends object ? DeepPartial<T[K]> : T[K];\n};\n\nexport interface SceneDataProvider extends SceneObject<SceneDataState> {\n  setContainerWidth?: (width: number) => void;\n}\n\nexport type SceneStatelessBehavior = (sceneObject: SceneObject) => CancelActivationHandler | void;\n"],"names":[],"mappings":"AAqJO,SAAS,cAAc,GAA8B,EAAA;AAC1D,EAAA,OAAO,IAAI,QAAa,KAAA,KAAA,CAAA,CAAA;AAC1B;;;;"}
+{"version":3,"file":"types.js","sources":["../../../src/core/types.ts"],"sourcesContent":["import React from 'react';\nimport { MonoTypeOperatorFunction, Unsubscribable } from 'rxjs';\n\nimport {\n  BusEvent,\n  BusEventHandler,\n  BusEventType,\n  DataFrame,\n  DataTransformContext,\n  PanelData,\n  TimeRange,\n} from '@grafana/data';\nimport { TimeZone } from '@grafana/schema';\n\nimport { SceneVariableDependencyConfigLike, SceneVariables } from '../variables/types';\n\nexport interface SceneObjectState {\n  key?: string;\n  $timeRange?: SceneTimeRangeLike;\n  $data?: SceneDataProvider;\n  $variables?: SceneVariables;\n  /**\n   * @experimental\n   * Can be used to add extra behaviors to a scene object.\n   * These are activated when the their parent scene object is activated.\n   */\n  $behaviors?: Array<SceneObject | SceneStatelessBehavior>;\n}\n\nexport interface SceneLayoutChildOptions {\n  width?: number | string;\n  height?: number | string;\n  xSizing?: 'fill' | 'content';\n  ySizing?: 'fill' | 'content';\n  x?: number;\n  y?: number;\n  minWidth?: number | string;\n  minHeight?: number | string;\n  isDraggable?: boolean;\n  isResizable?: boolean;\n}\n\nexport interface SceneComponentProps<T> {\n  model: T;\n}\n\nexport type SceneComponent<TModel> = (props: SceneComponentProps<TModel>) => React.ReactElement | null;\n\nexport interface SceneDataState extends SceneObjectState {\n  data?: PanelData;\n}\n\nexport interface SceneObject<TState extends SceneObjectState = SceneObjectState> {\n  /** The current state */\n  readonly state: TState;\n\n  /** True when there is a React component mounted for this Object */\n  readonly isActive: boolean;\n\n  /** SceneObject parent */\n  readonly parent?: SceneObject;\n\n  /** This abtractions declares what variables the scene object depends on and how to handle when they change value. **/\n  readonly variableDependency?: SceneVariableDependencyConfigLike;\n\n  /** This abstraction declares URL sync dependencies of a scene object. **/\n  readonly urlSync?: SceneObjectUrlSyncHandler;\n\n  /** Subscribe to state changes */\n  subscribeToState(handler: SceneStateChangedHandler<TState>): Unsubscribable;\n\n  /** Subscribe to a scene event */\n  subscribeToEvent<T extends BusEvent>(typeFilter: BusEventType<T>, handler: BusEventHandler<T>): Unsubscribable;\n\n  /** Publish an event and optionally bubble it up the scene */\n  publishEvent(event: BusEvent, bubble?: boolean): void;\n\n  /** Utility hook that wraps useObservable. Used by React components to subscribes to state changes */\n  useState(): TState;\n\n  /** How to modify state */\n  setState(state: Partial<TState>): void;\n\n  /**\n   * Called when the Component is mounted. This will also activate any $data, $variables or $timeRange scene object on this level.\n   * Don't override this in your custom SceneObjects, instead use addActivationHandler from the constructor.\n   **/\n  activate(): CancelActivationHandler;\n\n  /** Get the scene root */\n  getRoot(): SceneObject;\n\n  /** Returns a deep clone this object and all its children */\n  clone(state?: Partial<TState>): this;\n\n  /** A React component to use for rendering the object */\n  Component(props: SceneComponentProps<SceneObject<TState>>): React.ReactElement | null;\n\n  /** Force a re-render, should only be needed when variable values change */\n  forceRender(): void;\n\n  /**\n   * Allows external code to register code that is executed on activate and deactivate. This allow you\n   * to wire up scene objects that need to respond to state changes in other objects from the outside.\n   **/\n  addActivationHandler(handler: SceneActivationHandler): void;\n\n  /**\n   * Loop through state and call callback for each direct child scene object.\n   * Checks 1 level deep properties and arrays. So a scene object hidden in a nested plain object will not be detected.\n   */\n  forEachChild(callback: (child: SceneObject) => void): void;\n}\n\nexport type SceneActivationHandler = () => SceneDeactivationHandler | void;\nexport type SceneDeactivationHandler = () => void;\n\n/**\n * Function returned by activate() that when called will deactivate the object if it's the last activator\n **/\nexport type CancelActivationHandler = () => void;\n\nexport interface SceneLayoutState extends SceneObjectState {\n  children: SceneObject[];\n}\n\nexport interface SceneLayout<T extends SceneLayoutState = SceneLayoutState> extends SceneObject<T> {\n  isDraggable(): boolean;\n  getDragClass?(): string;\n  getDragClassCancel?(): string;\n}\n\nexport interface SceneTimeRangeState extends SceneObjectState {\n  from: string;\n  to: string;\n  fiscalYearStartMonth?: number;\n  value: TimeRange;\n  timeZone?: TimeZone;\n}\n\nexport interface SceneTimeRangeLike extends SceneObject<SceneTimeRangeState> {\n  onTimeZoneChange(timeZone: TimeZone): void;\n  onTimeRangeChange(timeRange: TimeRange): void;\n  onRefresh(): void;\n  getTimeZone(): TimeZone;\n}\n\nexport interface SceneObjectRef {\n  ref: SceneObject;\n}\n\nexport function isSceneObject(obj: any): obj is SceneObject {\n  return obj.useState !== undefined;\n}\n\nexport interface SceneObjectWithUrlSync extends SceneObject {\n  getUrlState(): SceneObjectUrlValues;\n  updateFromUrl(values: SceneObjectUrlValues): void;\n}\n\nexport interface SceneObjectUrlSyncHandler {\n  getKeys(): string[];\n  getUrlState(): SceneObjectUrlValues;\n  updateFromUrl(values: SceneObjectUrlValues): void;\n}\n\nexport type SceneObjectUrlValue = string | string[] | undefined | null;\nexport type SceneObjectUrlValues = Record<string, SceneObjectUrlValue>;\n\nexport type CustomTransformOperator = (context: DataTransformContext) => MonoTypeOperatorFunction<DataFrame[]>;\nexport type SceneStateChangedHandler<TState> = (newState: TState, prevState: TState) => void;\n\nexport type DeepPartial<T> = {\n  [K in keyof T]?: T[K] extends object ? DeepPartial<T[K]> : T[K];\n};\n\nexport interface SceneDataProvider extends SceneObject<SceneDataState> {\n  setContainerWidth?: (width: number) => void;\n}\n\nexport type SceneStatelessBehavior = (sceneObject: SceneObject) => CancelActivationHandler | void;\n"],"names":[],"mappings":"AAuJO,SAAS,cAAc,GAA8B,EAAA;AAC1D,EAAA,OAAO,IAAI,QAAa,KAAA,KAAA,CAAA,CAAA;AAC1B;;;;"}

package/dist/esm/core/utils.js

@@ -38,6 +38,15 @@ function cloneSceneObject(sceneObject, withState) {
   Object.assign(clonedState, withState);
   return new sceneObject.constructor(clonedState);
 }
+function getClosest(sceneObject, extract) {
+  let curSceneObject = sceneObject;
+  let extracted = void 0;
+  while (curSceneObject && !extracted) {
+    extracted = extract(curSceneObject);
+    curSceneObject = curSceneObject.parent;
+  }
+  return extracted;
+}
 
-export { cloneSceneObject };
+export { cloneSceneObject, getClosest };
 //# sourceMappingURL=utils.js.map

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

@@ -1 +1 @@
-{"version":3,"file":"utils.js","sources":["../../../src/core/utils.ts"],"sourcesContent":["import { SceneObjectState } from './types';\n\nimport { SceneObjectBase } from './SceneObjectBase';\n\n/**\n * Will create new SceneItem with shalled cloned state, but all states items of type SceneObject are deep cloned\n */\nexport function cloneSceneObject<T extends SceneObjectBase<TState>, TState extends SceneObjectState>(\n  sceneObject: SceneObjectBase<TState>,\n  withState?: Partial<TState>\n): T {\n  const clonedState = { ...sceneObject.state };\n\n  // Clone any SceneItems in state\n  for (const key in clonedState) {\n    const propValue = clonedState[key];\n    if (propValue instanceof SceneObjectBase) {\n      clonedState[key] = propValue.clone();\n    }\n\n    // Clone scene objects in arrays\n    if (Array.isArray(propValue)) {\n      const newArray: any = [];\n      for (const child of propValue) {\n        if (child instanceof SceneObjectBase) {\n          newArray.push(child.clone());\n        } else {\n          newArray.push(child);\n        }\n      }\n      clonedState[key] = newArray;\n    }\n  }\n\n  Object.assign(clonedState, withState);\n\n  return new (sceneObject.constructor as any)(clonedState);\n}\n"],"names":[],"mappings":";;;;;;;;;;;;;;;;;;AAOgB,SAAA,gBAAA,CACd,aACA,SACG,EAAA;AACH,EAAM,MAAA,WAAA,GAAc,mBAAK,WAAY,CAAA,KAAA,CAAA,CAAA;AAGrC,EAAA,KAAA,MAAW,OAAO,WAAa,EAAA;AAC7B,IAAA,MAAM,YAAY,WAAY,CAAA,GAAA,CAAA,CAAA;AAC9B,IAAA,IAAI,qBAAqB,eAAiB,EAAA;AACxC,MAAY,WAAA,CAAA,GAAA,CAAA,GAAO,UAAU,KAAM,EAAA,CAAA;AAAA,KACrC;AAGA,IAAI,IAAA,KAAA,CAAM,OAAQ,CAAA,SAAS,CAAG,EAAA;AAC5B,MAAA,MAAM,WAAgB,EAAC,CAAA;AACvB,MAAA,KAAA,MAAW,SAAS,SAAW,EAAA;AAC7B,QAAA,IAAI,iBAAiB,eAAiB,EAAA;AACpC,UAAS,QAAA,CAAA,IAAA,CAAK,KAAM,CAAA,KAAA,EAAO,CAAA,CAAA;AAAA,SACtB,MAAA;AACL,UAAA,QAAA,CAAS,KAAK,KAAK,CAAA,CAAA;AAAA,SACrB;AAAA,OACF;AACA,MAAA,WAAA,CAAY,GAAO,CAAA,GAAA,QAAA,CAAA;AAAA,KACrB;AAAA,GACF;AAEA,EAAO,MAAA,CAAA,MAAA,CAAO,aAAa,SAAS,CAAA,CAAA;AAEpC,EAAO,OAAA,IAAK,WAAY,CAAA,WAAA,CAAoB,WAAW,CAAA,CAAA;AACzD;;;;"}
+{"version":3,"file":"utils.js","sources":["../../../src/core/utils.ts"],"sourcesContent":["import { SceneObject, SceneObjectState } from './types';\n\nimport { SceneObjectBase } from './SceneObjectBase';\n\n/**\n * Will create new SceneItem with shalled cloned state, but all states items of type SceneObject are deep cloned\n */\nexport function cloneSceneObject<T extends SceneObjectBase<TState>, TState extends SceneObjectState>(\n  sceneObject: SceneObjectBase<TState>,\n  withState?: Partial<TState>\n): T {\n  const clonedState = { ...sceneObject.state };\n\n  // Clone any SceneItems in state\n  for (const key in clonedState) {\n    const propValue = clonedState[key];\n    if (propValue instanceof SceneObjectBase) {\n      clonedState[key] = propValue.clone();\n    }\n\n    // Clone scene objects in arrays\n    if (Array.isArray(propValue)) {\n      const newArray: any = [];\n      for (const child of propValue) {\n        if (child instanceof SceneObjectBase) {\n          newArray.push(child.clone());\n        } else {\n          newArray.push(child);\n        }\n      }\n      clonedState[key] = newArray;\n    }\n  }\n\n  Object.assign(clonedState, withState);\n\n  return new (sceneObject.constructor as any)(clonedState);\n}\n\n/** Walks up the scene graph, returning the first non-undefined result of `extract` */\nexport function getClosest<T>(sceneObject: SceneObject, extract: (s: SceneObject) => T | undefined): T | undefined {\n  let curSceneObject: SceneObject | undefined = sceneObject;\n  let extracted: T | undefined = undefined;\n\n  while (curSceneObject && !extracted) {\n    extracted = extract(curSceneObject);\n    curSceneObject = curSceneObject.parent;\n  }\n\n  return extracted;\n}\n"],"names":[],"mappings":";;;;;;;;;;;;;;;;;;AAOgB,SAAA,gBAAA,CACd,aACA,SACG,EAAA;AACH,EAAM,MAAA,WAAA,GAAc,mBAAK,WAAY,CAAA,KAAA,CAAA,CAAA;AAGrC,EAAA,KAAA,MAAW,OAAO,WAAa,EAAA;AAC7B,IAAA,MAAM,YAAY,WAAY,CAAA,GAAA,CAAA,CAAA;AAC9B,IAAA,IAAI,qBAAqB,eAAiB,EAAA;AACxC,MAAY,WAAA,CAAA,GAAA,CAAA,GAAO,UAAU,KAAM,EAAA,CAAA;AAAA,KACrC;AAGA,IAAI,IAAA,KAAA,CAAM,OAAQ,CAAA,SAAS,CAAG,EAAA;AAC5B,MAAA,MAAM,WAAgB,EAAC,CAAA;AACvB,MAAA,KAAA,MAAW,SAAS,SAAW,EAAA;AAC7B,QAAA,IAAI,iBAAiB,eAAiB,EAAA;AACpC,UAAS,QAAA,CAAA,IAAA,CAAK,KAAM,CAAA,KAAA,EAAO,CAAA,CAAA;AAAA,SACtB,MAAA;AACL,UAAA,QAAA,CAAS,KAAK,KAAK,CAAA,CAAA;AAAA,SACrB;AAAA,OACF;AACA,MAAA,WAAA,CAAY,GAAO,CAAA,GAAA,QAAA,CAAA;AAAA,KACrB;AAAA,GACF;AAEA,EAAO,MAAA,CAAA,MAAA,CAAO,aAAa,SAAS,CAAA,CAAA;AAEpC,EAAO,OAAA,IAAK,WAAY,CAAA,WAAA,CAAoB,WAAW,CAAA,CAAA;AACzD,CAAA;AAGgB,SAAA,UAAA,CAAc,aAA0B,OAA2D,EAAA;AACjH,EAAA,IAAI,cAA0C,GAAA,WAAA,CAAA;AAC9C,EAAA,IAAI,SAA2B,GAAA,KAAA,CAAA,CAAA;AAE/B,EAAO,OAAA,cAAA,IAAkB,CAAC,SAAW,EAAA;AACnC,IAAA,SAAA,GAAY,QAAQ,cAAc,CAAA,CAAA;AAClC,IAAA,cAAA,GAAiB,cAAe,CAAA,MAAA,CAAA;AAAA,GAClC;AAEA,EAAO,OAAA,SAAA,CAAA;AACT;;;;"}

package/dist/esm/index.js

@@ -4,6 +4,7 @@ export { sceneGraph } from './core/sceneGraph.js';
 export { SceneObjectBase } from './core/SceneObjectBase.js';
 export { SceneDataNode } from './core/SceneDataNode.js';
 export { SceneTimeRange } from './core/SceneTimeRange.js';
+export { SceneTimeZoneOverride } from './core/SceneTimeZoneOverride.js';
 export { SceneQueryRunner } from './querying/SceneQueryRunner.js';
 export { SceneDataTransformer } from './querying/SceneDataTransformer.js';
 export { SceneVariableValueChangedEvent, isCustomVariableValue } from './variables/types.js';

package/dist/esm/index.js.map

@@ -1 +1 @@
-{"version":3,"file":"index.js","sources":[],"sourcesContent":[],"names":[],"mappings":";;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;"}
+{"version":3,"file":"index.js","sources":[],"sourcesContent":[],"names":[],"mappings":";;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;"}

package/dist/esm/querying/SceneQueryRunner.js

@@ -30,8 +30,8 @@ class SceneQueryRunner extends SceneObjectBase {
   _onActivate() {
     const timeRange = sceneGraph.getTimeRange(this);
     this._subs.add(
-      timeRange.subscribeToState((timeRange2) => {
-        this.runWithTimeRange(timeRange2.value);
+      timeRange.subscribeToState(() => {
+        this.runWithTimeRange(timeRange);
       })
     );
     if (this.shouldRunQueriesOnActivate()) {
@@ -89,7 +89,7 @@ class SceneQueryRunner extends SceneObjectBase {
   }
   runQueries() {
     const timeRange = sceneGraph.getTimeRange(this);
-    this.runWithTimeRange(timeRange.state.value);
+    this.runWithTimeRange(timeRange);
   }
   getMaxDataPoints() {
     var _a, _b;
@@ -116,9 +116,9 @@ class SceneQueryRunner extends SceneObjectBase {
     const request = {
       app: CoreApp.Dashboard,
       requestId: getNextRequestId(),
-      timezone: "browser",
+      timezone: timeRange.getTimeZone(),
       panelId: 1,
-      range: timeRange,
+      range: timeRange.state.value,
       interval: "1s",
       intervalMs: 1e3,
       targets: cloneDeep(queries),
@@ -136,7 +136,7 @@ class SceneQueryRunner extends SceneObjectBase {
         return query;
       });
       const lowerIntervalLimit = minInterval ? minInterval : ds.interval;
-      const norm = rangeUtil.calculateInterval(timeRange, request.maxDataPoints, lowerIntervalLimit);
+      const norm = rangeUtil.calculateInterval(timeRange.state.value, request.maxDataPoints, lowerIntervalLimit);
       request.scopedVars = Object.assign({}, request.scopedVars, {
         __interval: { text: norm.interval, value: norm.interval },
         __interval_ms: { text: norm.intervalMs.toString(), value: norm.intervalMs }

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 { Unsubscribable } from 'rxjs';\n\nimport { DataQuery, DataSourceRef } from '@grafana/schema';\n\nimport {\n  CoreApp,\n  DataQueryRequest,\n  PanelData,\n  preProcessPanelData,\n  rangeUtil,\n  ScopedVar,\n  TimeRange,\n} from '@grafana/data';\nimport { getRunRequest } from '@grafana/runtime';\n\nimport { SceneObjectBase } from '../core/SceneObjectBase';\nimport { sceneGraph } from '../core/sceneGraph';\nimport { SceneDataProvider, SceneObjectState } 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';\nimport { emptyPanelData } from '../core/SceneDataNode';\n\nlet counter = 100;\n\nexport function getNextRequestId() {\n  return 'SQR' + counter++;\n}\n\nexport interface QueryRunnerState extends SceneObjectState {\n  data?: PanelData;\n  queries: DataQueryExtended[];\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> implements SceneDataProvider {\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 constructor(initialState: QueryRunnerState) {\n    super(initialState);\n\n    this.addActivationHandler(() => this._onActivate());\n  }\n\n  private _onActivate() {\n    const timeRange = sceneGraph.getTimeRange(this);\n\n    this._subs.add(\n      timeRange.subscribeToState((timeRange) => {\n        this.runWithTimeRange(timeRange.value);\n      })\n    );\n\n    if (this.shouldRunQueriesOnActivate()) {\n      this.runQueries();\n    }\n\n    return () => this._onDeactivate();\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  private _onDeactivate(): void {\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 { minInterval, queries } = this.state;\n    const sceneObjectScopedVar: Record<string, ScopedVar<SceneQueryRunner>> = {\n      __sceneObject: { text: '__sceneObject', value: this },\n    };\n\n    // Simple path when no queries exist\n    if (!queries?.length) {\n      this._setNoDataState();\n      return;\n    }\n\n    const request: DataQueryRequest = {\n      app: CoreApp.Dashboard,\n      requestId: getNextRequestId(),\n      timezone: 'browser',\n      panelId: 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 datasource = this.state.datasource ?? findFirstDatasource(request.targets);\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).subscribe(this.onDataReceived);\n    } catch (err) {\n      console.error('PanelQueryRunner Error', err);\n    }\n  }\n\n  private onDataReceived = (data: PanelData) => {\n    const preProcessedData = preProcessPanelData(data, this.state.data);\n    this.setState({ data: preProcessedData });\n  };\n\n  private _setNoDataState() {\n    if (this.state.data !== emptyPanelData) {\n      this.setState({ data: emptyPanelData });\n    }\n  }\n}\n\nexport function findFirstDatasource(targets: DataQuery[]): DataSourceRef | undefined {\n  return targets.find((t) => t.datasource !== null)?.datasource ?? undefined;\n}\n"],"names":["timeRange"],"mappings":";;;;;;;;;;;AA0BA,IAAI,OAAU,GAAA,GAAA,CAAA;AAEP,SAAS,gBAAmB,GAAA;AACjC,EAAA,OAAO,KAAQ,GAAA,OAAA,EAAA,CAAA;AACjB,CAAA;AAiBO,MAAM,yBAAyB,eAA+D,CAAA;AAAA,EAW5F,YAAY,YAAgC,EAAA;AACjD,IAAA,KAAA,CAAM,YAAY,CAAA,CAAA;AATpB,IAAQ,IAAA,CAAA,sBAAA,GAAyB,IAAI,qBAAsB,EAAA,CAAA;AAE3D,IAAU,IAAA,CAAA,mBAAA,GAAkE,IAAI,wBAAA,CAAyB,IAAM,EAAA;AAAA,MAC7G,UAAA,EAAY,CAAC,SAAA,EAAW,YAAY,CAAA;AAAA,MACpC,4BAA4B,CAAC,SAAA,EAAW,sBACtC,IAAK,CAAA,0BAAA,CAA2B,WAAW,iBAAiB,CAAA;AAAA,KAC/D,CAAA,CAAA;AAgLD,IAAQ,IAAA,CAAA,cAAA,GAAiB,CAAC,IAAoB,KAAA;AAC5C,MAAA,MAAM,gBAAmB,GAAA,mBAAA,CAAoB,IAAM,EAAA,IAAA,CAAK,MAAM,IAAI,CAAA,CAAA;AAClE,MAAA,IAAA,CAAK,QAAS,CAAA,EAAE,IAAM,EAAA,gBAAA,EAAkB,CAAA,CAAA;AAAA,KAC1C,CAAA;AA9KE,IAAA,IAAA,CAAK,oBAAqB,CAAA,MAAM,IAAK,CAAA,WAAA,EAAa,CAAA,CAAA;AAAA,GACpD;AAAA,EAEQ,WAAc,GAAA;AACpB,IAAM,MAAA,SAAA,GAAY,UAAW,CAAA,YAAA,CAAa,IAAI,CAAA,CAAA;AAE9C,IAAA,IAAA,CAAK,KAAM,CAAA,GAAA;AAAA,MACT,SAAA,CAAU,gBAAiB,CAAA,CAACA,UAAc,KAAA;AACxC,QAAK,IAAA,CAAA,gBAAA,CAAiBA,WAAU,KAAK,CAAA,CAAA;AAAA,OACtC,CAAA;AAAA,KACH,CAAA;AAEA,IAAI,IAAA,IAAA,CAAK,4BAA8B,EAAA;AACrC,MAAA,IAAA,CAAK,UAAW,EAAA,CAAA;AAAA,KAClB;AAEA,IAAO,OAAA,MAAM,KAAK,aAAc,EAAA,CAAA;AAAA,GAClC;AAAA,EAMQ,0BAAA,CAA2B,2BAA+C,iBAA4B,EAAA;AAC5G,IAAA,IAAI,IAAK,CAAA,KAAA,CAAM,qBAAyB,IAAA,IAAA,CAAK,4BAA8B,EAAA;AACzE,MAAA,IAAA,CAAK,UAAW,EAAA,CAAA;AAChB,MAAA,OAAA;AAAA,KACF;AAEA,IAAA,IAAI,iBAAmB,EAAA;AACrB,MAAA,IAAA,CAAK,UAAW,EAAA,CAAA;AAAA,KAClB;AAAA,GACF;AAAA,EAEQ,0BAA6B,GAAA;AAEnC,IAAI,IAAA,CAAC,KAAK,KAAM,CAAA,aAAA,IAAiB,KAAK,KAAM,CAAA,sBAAA,IAA0B,CAAC,IAAA,CAAK,eAAiB,EAAA;AAC3F,MAAO,OAAA,KAAA,CAAA;AAAA,KACT;AAEA,IAAA,IAAI,IAAK,CAAA,sBAAA,CAAuB,sBAAuB,CAAA,IAAI,CAAG,EAAA;AAC5D,MAAA,aAAA;AAAA,QACE,kBAAA;AAAA,QACA,qFAAA;AAAA,OACF,CAAA;AACA,MAAO,OAAA,IAAA,CAAA;AAAA,KACT;AAIA,IAAI,IAAA,IAAA,CAAK,MAAM,IAAM,EAAA;AACnB,MAAO,OAAA,KAAA,CAAA;AAAA,KACT;AAEA,IAAO,OAAA,IAAA,CAAA;AAAA,GACT;AAAA,EAEQ,aAAsB,GAAA;AAC5B,IAAA,IAAI,KAAK,SAAW,EAAA;AAClB,MAAA,IAAA,CAAK,UAAU,WAAY,EAAA,CAAA;AAC3B,MAAA,IAAA,CAAK,SAAY,GAAA,KAAA,CAAA,CAAA;AAAA,KACnB;AAEA,IAAK,IAAA,CAAA,sBAAA,CAAuB,4CAA4C,IAAI,CAAA,CAAA;AAAA,GAC9E;AAAA,EAEO,kBAAkB,KAAe,EAAA;AAEtC,IAAA,IAAI,CAAC,IAAA,CAAK,eAAmB,IAAA,KAAA,GAAQ,CAAG,EAAA;AACtC,MAAA,IAAA,CAAK,eAAkB,GAAA,KAAA,CAAA;AAGvB,MAAA,IAAI,KAAK,KAAM,CAAA,sBAAA,IAA0B,CAAC,IAAA,CAAK,MAAM,aAAe,EAAA;AAElE,QAAA,UAAA,CAAW,MAAM;AACf,UAAA,IAAI,IAAK,CAAA,QAAA,IAAY,CAAC,IAAA,CAAK,SAAW,EAAA;AACpC,YAAA,IAAA,CAAK,UAAW,EAAA,CAAA;AAAA,WAClB;AAAA,WACC,CAAC,CAAA,CAAA;AAAA,OACN;AAAA,KACK,MAAA;AAEL,MAAA,IAAI,QAAQ,CAAG,EAAA;AACb,QAAA,IAAA,CAAK,eAAkB,GAAA,KAAA,CAAA;AAAA,OACzB;AAAA,KACF;AAAA,GACF;AAAA,EAEO,UAAa,GAAA;AAClB,IAAM,MAAA,SAAA,GAAY,UAAW,CAAA,YAAA,CAAa,IAAI,CAAA,CAAA;AAC9C,IAAK,IAAA,CAAA,gBAAA,CAAiB,SAAU,CAAA,KAAA,CAAM,KAAK,CAAA,CAAA;AAAA,GAC7C;AAAA,EAEQ,gBAAmB,GAAA;AA1J7B,IAAA,IAAA,EAAA,EAAA,EAAA,CAAA;AA2JI,IAAA,OAAA,CAAO,gBAAK,KAAM,CAAA,aAAA,KAAX,IAA4B,GAAA,EAAA,GAAA,IAAA,CAAK,oBAAjC,IAAoD,GAAA,EAAA,GAAA,GAAA,CAAA;AAAA,GAC7D;AAAA,EAEA,MAAc,iBAAiB,SAAsB,EAAA;AA9JvD,IAAA,IAAA,EAAA,CAAA;AAgKI,IAAI,IAAA,UAAA,CAAW,mCAAoC,CAAA,IAAI,CAAG,EAAA;AACxD,MAAA,aAAA,CAAc,oBAAoB,mEAAmE,CAAA,CAAA;AACrG,MAAA,IAAA,CAAK,QAAS,CAAA,EAAE,qBAAuB,EAAA,IAAA,EAAM,CAAA,CAAA;AAC7C,MAAA,OAAA;AAAA,KACF;AAGA,IAAI,IAAA,IAAA,CAAK,MAAM,qBAAuB,EAAA;AACpC,MAAA,IAAA,CAAK,QAAS,CAAA,EAAE,qBAAuB,EAAA,KAAA,EAAO,CAAA,CAAA;AAAA,KAChD;AAEA,IAAA,MAAM,EAAE,WAAA,EAAa,OAAQ,EAAA,GAAI,IAAK,CAAA,KAAA,CAAA;AACtC,IAAA,MAAM,oBAAoE,GAAA;AAAA,MACxE,aAAe,EAAA,EAAE,IAAM,EAAA,eAAA,EAAiB,OAAO,IAAK,EAAA;AAAA,KACtD,CAAA;AAGA,IAAI,IAAA,EAAC,mCAAS,MAAQ,CAAA,EAAA;AACpB,MAAA,IAAA,CAAK,eAAgB,EAAA,CAAA;AACrB,MAAA,OAAA;AAAA,KACF;AAEA,IAAA,MAAM,OAA4B,GAAA;AAAA,MAChC,KAAK,OAAQ,CAAA,SAAA;AAAA,MACb,WAAW,gBAAiB,EAAA;AAAA,MAC5B,QAAU,EAAA,SAAA;AAAA,MACV,OAAS,EAAA,CAAA;AAAA,MACT,KAAO,EAAA,SAAA;AAAA,MACP,QAAU,EAAA,IAAA;AAAA,MACV,UAAY,EAAA,GAAA;AAAA,MACZ,OAAA,EAAS,UAAU,OAAO,CAAA;AAAA,MAC1B,aAAA,EAAe,KAAK,gBAAiB,EAAA;AAAA,MACrC,UAAY,EAAA,oBAAA;AAAA,MACZ,SAAA,EAAW,KAAK,GAAI,EAAA;AAAA,KACtB,CAAA;AAEA,IAAI,IAAA;AACF,MAAA,MAAM,cAAa,EAAK,GAAA,IAAA,CAAA,KAAA,CAAM,eAAX,IAAyB,GAAA,EAAA,GAAA,mBAAA,CAAoB,QAAQ,OAAO,CAAA,CAAA;AAC/E,MAAA,MAAM,EAAK,GAAA,MAAM,aAAc,CAAA,UAAA,EAAY,QAAQ,UAAU,CAAA,CAAA;AAG7D,MAAA,OAAA,CAAQ,OAAU,GAAA,OAAA,CAAQ,OAAQ,CAAA,GAAA,CAAI,CAAC,KAAU,KAAA;AAC/C,QAAI,IAAA,CAAC,MAAM,UAAY,EAAA;AACrB,UAAM,KAAA,CAAA,UAAA,GAAa,GAAG,MAAO,EAAA,CAAA;AAAA,SAC/B;AACA,QAAO,OAAA,KAAA,CAAA;AAAA,OACR,CAAA,CAAA;AAGD,MAAM,MAAA,kBAAA,GAAqB,WAAc,GAAA,WAAA,GAAc,EAAG,CAAA,QAAA,CAAA;AAC1D,MAAA,MAAM,OAAO,SAAU,CAAA,iBAAA,CAAkB,SAAW,EAAA,OAAA,CAAQ,eAAgB,kBAAkB,CAAA,CAAA;AAI9F,MAAA,OAAA,CAAQ,aAAa,MAAO,CAAA,MAAA,CAAO,EAAC,EAAG,QAAQ,UAAY,EAAA;AAAA,QACzD,YAAY,EAAE,IAAA,EAAM,KAAK,QAAU,EAAA,KAAA,EAAO,KAAK,QAAS,EAAA;AAAA,QACxD,aAAA,EAAe,EAAE,IAAM,EAAA,IAAA,CAAK,WAAW,QAAS,EAAA,EAAG,KAAO,EAAA,IAAA,CAAK,UAAW,EAAA;AAAA,OAC3E,CAAA,CAAA;AAED,MAAA,OAAA,CAAQ,WAAW,IAAK,CAAA,QAAA,CAAA;AACxB,MAAA,OAAA,CAAQ,aAAa,IAAK,CAAA,UAAA,CAAA;AAE1B,MAAA,MAAM,aAAa,aAAc,EAAA,CAAA;AAEjC,MAAA,aAAA,CAAc,kBAAoB,EAAA,qBAAA,EAAuB,IAAK,CAAA,KAAA,CAAM,GAAG,CAAA,CAAA;AAEvE,MAAA,IAAA,CAAK,YAAY,UAAW,CAAA,EAAA,EAAI,OAAO,CAAE,CAAA,SAAA,CAAU,KAAK,cAAc,CAAA,CAAA;AAAA,aAC/D,GAAP,EAAA;AACA,MAAQ,OAAA,CAAA,KAAA,CAAM,0BAA0B,GAAG,CAAA,CAAA;AAAA,KAC7C;AAAA,GACF;AAAA,EAOQ,eAAkB,GAAA;AACxB,IAAI,IAAA,IAAA,CAAK,KAAM,CAAA,IAAA,KAAS,cAAgB,EAAA;AACtC,MAAA,IAAA,CAAK,QAAS,CAAA,EAAE,IAAM,EAAA,cAAA,EAAgB,CAAA,CAAA;AAAA,KACxC;AAAA,GACF;AACF,CAAA;AAEO,SAAS,oBAAoB,OAAiD,EAAA;AApPrF,EAAA,IAAA,EAAA,EAAA,EAAA,CAAA;AAqPE,EAAO,OAAA,CAAA,EAAA,GAAA,CAAA,EAAA,GAAA,OAAA,CAAQ,IAAK,CAAA,CAAC,CAAM,KAAA,CAAA,CAAE,eAAe,IAAI,CAAA,KAAzC,IAA4C,GAAA,KAAA,CAAA,GAAA,EAAA,CAAA,UAAA,KAA5C,IAA0D,GAAA,EAAA,GAAA,KAAA,CAAA,CAAA;AACnE;;;;"}
+{"version":3,"file":"SceneQueryRunner.js","sources":["../../../src/querying/SceneQueryRunner.ts"],"sourcesContent":["import { cloneDeep } from 'lodash';\nimport { Unsubscribable } from 'rxjs';\n\nimport { DataQuery, DataSourceRef } from '@grafana/schema';\n\nimport { CoreApp, DataQueryRequest, PanelData, preProcessPanelData, rangeUtil, ScopedVar } from '@grafana/data';\nimport { getRunRequest } from '@grafana/runtime';\n\nimport { SceneObjectBase } from '../core/SceneObjectBase';\nimport { sceneGraph } from '../core/sceneGraph';\nimport { SceneDataProvider, SceneObjectState, SceneTimeRangeLike } 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';\nimport { emptyPanelData } from '../core/SceneDataNode';\n\nlet counter = 100;\n\nexport function getNextRequestId() {\n  return 'SQR' + counter++;\n}\n\nexport interface QueryRunnerState extends SceneObjectState {\n  data?: PanelData;\n  queries: DataQueryExtended[];\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> implements SceneDataProvider {\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 constructor(initialState: QueryRunnerState) {\n    super(initialState);\n\n    this.addActivationHandler(() => this._onActivate());\n  }\n\n  private _onActivate() {\n    const timeRange = sceneGraph.getTimeRange(this);\n\n    this._subs.add(\n      timeRange.subscribeToState(() => {\n        this.runWithTimeRange(timeRange);\n      })\n    );\n\n    if (this.shouldRunQueriesOnActivate()) {\n      this.runQueries();\n    }\n\n    return () => this._onDeactivate();\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  private _onDeactivate(): void {\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);\n  }\n\n  private getMaxDataPoints() {\n    return this.state.maxDataPoints ?? this._containerWidth ?? 500;\n  }\n\n  private async runWithTimeRange(timeRange: SceneTimeRangeLike) {\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 { minInterval, queries } = this.state;\n    const sceneObjectScopedVar: Record<string, ScopedVar<SceneQueryRunner>> = {\n      __sceneObject: { text: '__sceneObject', value: this },\n    };\n\n    // Simple path when no queries exist\n    if (!queries?.length) {\n      this._setNoDataState();\n      return;\n    }\n\n    const request: DataQueryRequest = {\n      app: CoreApp.Dashboard,\n      requestId: getNextRequestId(),\n      timezone: timeRange.getTimeZone(),\n      panelId: 1,\n      range: timeRange.state.value,\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 datasource = this.state.datasource ?? findFirstDatasource(request.targets);\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.state.value, 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).subscribe(this.onDataReceived);\n    } catch (err) {\n      console.error('PanelQueryRunner Error', err);\n    }\n  }\n\n  private onDataReceived = (data: PanelData) => {\n    const preProcessedData = preProcessPanelData(data, this.state.data);\n    this.setState({ data: preProcessedData });\n  };\n\n  private _setNoDataState() {\n    if (this.state.data !== emptyPanelData) {\n      this.setState({ data: emptyPanelData });\n    }\n  }\n}\n\nexport function findFirstDatasource(targets: DataQuery[]): DataSourceRef | undefined {\n  return targets.find((t) => t.datasource !== null)?.datasource ?? undefined;\n}\n"],"names":[],"mappings":"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"}

package/dist/index.d.ts

@@ -1,7 +1,7 @@
-import React, { CSSProperties } from 'react';
+import React$1, { CSSProperties } from 'react';
 import { Observable, Unsubscribable, MonoTypeOperatorFunction, Subscription } from 'rxjs';
-import { BusEventWithPayload, PanelData, BusEvent, BusEventType, BusEventHandler, TimeZone, TimeRange, DataTransformContext, DataFrame, ScopedVars, DataTransformerConfig, Registry, RegistryItem, DataSourceRef as DataSourceRef$1, VariableRefresh, VariableSort, PanelMenuItem, FieldConfigSource, PanelPlugin, AbsoluteTimeRange, InterpolateFunction, IconName as IconName$1 } from '@grafana/data';
-import { VariableType, VariableHide, DataSourceRef, DataQuery } from '@grafana/schema';
+import { BusEventWithPayload, PanelData, BusEvent, BusEventType, BusEventHandler, TimeRange, DataTransformContext, DataFrame, ScopedVars, DataTransformerConfig, Registry, RegistryItem, DataSourceRef as DataSourceRef$1, VariableRefresh, VariableSort, PanelMenuItem, FieldConfigSource, PanelPlugin, AbsoluteTimeRange, InterpolateFunction, IconName as IconName$1 } from '@grafana/data';
+import { VariableType, VariableHide, TimeZone, DataSourceRef, DataQuery } from '@grafana/schema';
 import { PanelContext, IconName } from '@grafana/ui';
 import ReactGridLayout from 'react-grid-layout';
 import { RouteComponentProps } from 'react-router-dom';
@@ -116,7 +116,7 @@ interface SceneLayoutChildOptions {
 interface SceneComponentProps<T> {
     model: T;
 }
-type SceneComponent<TModel> = (props: SceneComponentProps<TModel>) => React.ReactElement | null;
+type SceneComponent<TModel> = (props: SceneComponentProps<TModel>) => React$1.ReactElement | null;
 interface SceneDataState extends SceneObjectState {
     data?: PanelData;
 }
@@ -151,7 +151,7 @@ interface SceneObject<TState extends SceneObjectState = SceneObjectState> {
     /** Returns a deep clone this object and all its children */
     clone(state?: Partial<TState>): this;
     /** A React component to use for rendering the object */
-    Component(props: SceneComponentProps<SceneObject<TState>>): React.ReactElement | null;
+    Component(props: SceneComponentProps<SceneObject<TState>>): React$1.ReactElement | null;
     /** Force a re-render, should only be needed when variable values change */
     forceRender(): void;
     /**
@@ -182,13 +182,15 @@ interface SceneLayout<T extends SceneLayoutState = SceneLayoutState> extends Sce
 interface SceneTimeRangeState extends SceneObjectState {
     from: string;
     to: string;
-    timeZone: TimeZone;
     fiscalYearStartMonth?: number;
     value: TimeRange;
+    timeZone?: TimeZone;
 }
 interface SceneTimeRangeLike extends SceneObject<SceneTimeRangeState> {
+    onTimeZoneChange(timeZone: TimeZone): void;
     onTimeRangeChange(timeRange: TimeRange): void;
     onRefresh(): void;
+    getTimeZone(): TimeZone;
 }
 interface SceneObjectRef {
     ref: SceneObject;
@@ -364,7 +366,14 @@ declare class SceneObjectUrlSyncConfig implements SceneObjectUrlSyncHandler {
 declare class SceneTimeRange extends SceneObjectBase<SceneTimeRangeState> implements SceneTimeRangeLike {
     protected _urlSync: SceneObjectUrlSyncConfig;
     constructor(state?: Partial<SceneTimeRangeState>);
+    private _onActivate;
+    /**
+     * Will traverse up the scene graph to find the closest SceneTimeRangeLike with time zone set
+     */
+    private getTimeZoneSource;
+    getTimeZone(): TimeZone;
     onTimeRangeChange: (timeRange: TimeRange) => void;
+    onTimeZoneChange: (timeZone: TimeZone) => void;
     onRefresh: () => void;
     getUrlState(): {
         from: string;
@@ -373,6 +382,19 @@ declare class SceneTimeRange extends SceneObjectBase<SceneTimeRangeState> implem
     updateFromUrl(values: SceneObjectUrlValues): void;
 }
 
+interface SceneTimeZoneOverrideState extends SceneTimeRangeState {
+    timeZone: TimeZone;
+}
+declare class SceneTimeZoneOverride extends SceneObjectBase<SceneTimeZoneOverrideState> implements SceneTimeRangeLike {
+    constructor(state: Omit<SceneTimeZoneOverrideState, 'from' | 'to' | 'value'>);
+    private getTimeRangeObject;
+    private _activationHandler;
+    getTimeZone(): TimeZone;
+    onTimeRangeChange(timeRange: TimeRange): void;
+    onTimeZoneChange(timeZone: string): void;
+    onRefresh(): void;
+}
+
 interface VariableDependencyConfigOptions<TState extends SceneObjectState> {
     /**
      * State paths to scan / extract variable dependencies from. Leave empty to scan all paths.
@@ -755,6 +777,7 @@ interface VizPanelState<TOptions = {}, TFieldConfig = {}> extends SceneObjectSta
     menu?: VizPanelMenu;
     isDraggable?: boolean;
     isResizable?: boolean;
+    headerActions?: React.ReactNode | SceneObject;
     pluginLoadError?: string;
     pluginInstanceState?: any;
 }
@@ -827,6 +850,7 @@ interface SceneCanvasTextState extends SceneObjectState {
     text: string;
     fontSize?: number;
     align?: 'left' | 'center' | 'right';
+    spacing?: number;
 }
 /**
  * Not a really useful component, just an example of how to create one
@@ -886,8 +910,6 @@ interface SceneFlexItemStateLike extends SceneFlexItemPlacement, SceneObjectStat
 interface SceneFlexItemLike extends SceneObject<SceneFlexItemStateLike> {
 }
 interface SceneFlexLayoutState extends SceneObjectState, SceneFlexItemPlacement {
-    direction?: CSSProperties['flexDirection'];
-    wrap?: CSSProperties['flexWrap'];
     children: SceneFlexItemLike[];
 }
 declare class SceneFlexLayout extends SceneObjectBase<SceneFlexLayoutState> implements SceneLayout {
@@ -895,10 +917,10 @@ declare class SceneFlexLayout extends SceneObjectBase<SceneFlexLayoutState> impl
     toggleDirection(): void;
     isDraggable(): boolean;
 }
-declare function SceneFlexLayoutRenderer({ model, parentDirection }: SceneFlexItemRenderProps<SceneFlexLayout>): JSX.Element | null;
+declare function SceneFlexLayoutRenderer({ model, parentState }: SceneFlexItemRenderProps<SceneFlexLayout>): JSX.Element | null;
 interface SceneFlexItemPlacement {
-    flexGrow?: CSSProperties['flexGrow'];
-    alignSelf?: CSSProperties['alignSelf'];
+    wrap?: CSSProperties['flexWrap'];
+    direction?: CSSProperties['flexDirection'];
     width?: CSSProperties['width'];
     height?: CSSProperties['height'];
     minWidth?: CSSProperties['minWidth'];
@@ -912,18 +934,22 @@ interface SceneFlexItemPlacement {
      * Useful for conditional display of layout items
      */
     isHidden?: boolean;
+    /**
+     * Set direction for smaller screens. This defaults to column.
+     * This equals media query theme.breakpoints.down('md')
+     */
+    md?: SceneFlexItemPlacement;
 }
 interface SceneFlexItemState extends SceneFlexItemPlacement, SceneObjectState {
     body: SceneObject | undefined;
-    isHidden?: boolean;
 }
 interface SceneFlexItemRenderProps<T> extends SceneComponentProps<T> {
-    parentDirection?: CSSProperties['flexDirection'];
+    parentState?: SceneFlexItemPlacement;
 }
 declare class SceneFlexItem extends SceneObjectBase<SceneFlexItemState> {
     static Component: typeof SceneFlexItemRenderer;
 }
-declare function SceneFlexItemRenderer({ model, parentDirection }: SceneFlexItemRenderProps<SceneFlexItem>): JSX.Element | null;
+declare function SceneFlexItemRenderer({ model, parentState }: SceneFlexItemRenderProps<SceneFlexItem>): JSX.Element | null;
 
 interface SceneByFrameRepeaterState extends SceneObjectState {
     body: SceneFlexLayout;
@@ -1041,6 +1067,11 @@ interface SceneAppPageState extends SceneObjectState {
     title: string;
     /** Page subTitle */
     subTitle?: string;
+    /**
+     * Customize title rendering.
+     * Please return an unstyled h1 tag here + any additional elements you need.
+     **/
+    renderTitle?: (title: string) => React.ReactNode;
     /** For an image before title */
     titleImg?: string;
     /** For an icon before title */
@@ -1107,7 +1138,7 @@ interface SceneReactObjectState<TProps = {}> extends SceneObjectState {
     /**
      * React component to render
      */
-    component?: React.ComponentType<TProps>;
+    component?: React$1.ComponentType<TProps>;
     /**
      * Props to pass to the component
      */
@@ -1115,7 +1146,7 @@ interface SceneReactObjectState<TProps = {}> extends SceneObjectState {
     /**
      * Alternative to component and props is just to pass a React node
      */
-    reactNode?: React.ReactNode;
+    reactNode?: React$1.ReactNode;
 }
 /**
  * A utility object that can be used to render any React component or ReactNode
@@ -1124,4 +1155,4 @@ declare class SceneReactObject extends SceneObjectBase<SceneReactObjectState> {
     static Component: ({ model }: SceneComponentProps<SceneReactObject>) => {} | null;
 }
 
-export { CancelActivationHandler, ConstantVariable, CustomFormatterVariable, CustomTransformOperator, CustomVariable, CustomVariableValue, DataSourceVariable, DeepPartial, EmbeddedScene, EmbeddedSceneState, FormatVariable, InterpolationFormatParameter, NestedScene, QueryRunnerState, QueryVariable, SceneActivationHandler, SceneApp, SceneAppDrilldownView, SceneAppPage, SceneAppPageLike, SceneAppPageState, SceneAppRoute, SceneByFrameRepeater, SceneCanvasText, SceneComponent, SceneComponentProps, SceneControlsSpacer, SceneDataNode, SceneDataProvider, SceneDataState, SceneDataTransformer, SceneDeactivationHandler, SceneFlexItem, SceneFlexLayout, SceneGridItem, SceneGridLayout, SceneGridRow, SceneLayout, SceneLayoutChildOptions, SceneLayoutState, SceneObject, SceneObjectBase, SceneObjectRef, SceneObjectState, SceneObjectStateChangedEvent, SceneObjectStateChangedPayload, SceneObjectUrlSyncConfig, SceneObjectUrlSyncHandler, SceneObjectUrlValue, SceneObjectUrlValues, SceneObjectWithUrlSync, SceneQueryRunner, SceneReactObject, SceneRefreshPicker, SceneRouteMatch, SceneStateChangedHandler, SceneStatelessBehavior, SceneTimePicker, SceneTimeRange, SceneTimeRangeLike, SceneTimeRangeState, SceneToolbarButton, SceneToolbarInput, SceneVariable, SceneVariableDependencyConfigLike, SceneVariableSet, SceneVariableSetState, SceneVariableState, SceneVariableValueChangedEvent, SceneVariables, TestVariable, TextBoxVariable, UrlSyncManagerLike as UrlSyncManager, ValidateAndUpdateResult, VariableCustomFormatterFn, VariableDependencyConfig, VariableValue, VariableValueOption, VariableValueSelectors, VariableValueSingle, VizPanel, VizPanelMenu, VizPanelState, formatRegistry, getUrlSyncManager, isCustomVariableValue, isSceneObject, registerRuntimePanelPlugin, sceneGraph };
+export { CancelActivationHandler, ConstantVariable, CustomFormatterVariable, CustomTransformOperator, CustomVariable, CustomVariableValue, DataSourceVariable, DeepPartial, EmbeddedScene, EmbeddedSceneState, FormatVariable, InterpolationFormatParameter, NestedScene, QueryRunnerState, QueryVariable, SceneActivationHandler, SceneApp, SceneAppDrilldownView, SceneAppPage, SceneAppPageLike, SceneAppPageState, SceneAppRoute, SceneByFrameRepeater, SceneCanvasText, SceneComponent, SceneComponentProps, SceneControlsSpacer, SceneDataNode, SceneDataProvider, SceneDataState, SceneDataTransformer, SceneDeactivationHandler, SceneFlexItem, SceneFlexItemState, SceneFlexLayout, SceneGridItem, SceneGridLayout, SceneGridRow, SceneLayout, SceneLayoutChildOptions, SceneLayoutState, SceneObject, SceneObjectBase, SceneObjectRef, SceneObjectState, SceneObjectStateChangedEvent, SceneObjectStateChangedPayload, SceneObjectUrlSyncConfig, SceneObjectUrlSyncHandler, SceneObjectUrlValue, SceneObjectUrlValues, SceneObjectWithUrlSync, SceneQueryRunner, SceneReactObject, SceneRefreshPicker, SceneRouteMatch, SceneStateChangedHandler, SceneStatelessBehavior, SceneTimePicker, SceneTimeRange, SceneTimeRangeLike, SceneTimeRangeState, SceneTimeZoneOverride, SceneToolbarButton, SceneToolbarInput, SceneVariable, SceneVariableDependencyConfigLike, SceneVariableSet, SceneVariableSetState, SceneVariableState, SceneVariableValueChangedEvent, SceneVariables, TestVariable, TextBoxVariable, UrlSyncManagerLike as UrlSyncManager, ValidateAndUpdateResult, VariableCustomFormatterFn, VariableDependencyConfig, VariableValue, VariableValueOption, VariableValueSelectors, VariableValueSingle, VizPanel, VizPanelMenu, VizPanelState, formatRegistry, getUrlSyncManager, isCustomVariableValue, isSceneObject, registerRuntimePanelPlugin, sceneGraph };