@grafana/scenes 0.0.14 → 0.0.16

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';\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":";;;;;;;;;;;;;;;;;;;;;;;;;;;;;;AA0BA,IAAI,OAAU,GAAA,GAAA,CAAA;AAEP,SAAS,gBAAmB,GAAA;AACjC,EAAA,OAAO,IAAO,GAAA,OAAA,EAAA,CAAA;AAChB,CAAA;AAkBO,MAAM,yBAAyB,eAAkC,CAAA;AAAA,EAAjE,WAAA,GAAA;AAAA,IAAA,KAAA,CAAA,GAAA,SAAA,CAAA,CAAA;AAGL,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;AA2KD,IAAQ,IAAA,CAAA,cAAA,GAAiB,CAAC,IAAoB,KAAA;AAC5C,MAAK,IAAA,CAAA,QAAA,CAAS,EAAE,IAAA,EAAM,CAAA,CAAA;AAAA,KACxB,CAAA;AAAA,GAAA;AAAA,EA3KO,QAAW,GAAA;AAChB,IAAA,KAAA,CAAM,QAAS,EAAA,CAAA;AACf,IAAM,MAAA,SAAA,GAAY,UAAW,CAAA,YAAA,CAAa,IAAI,CAAA,CAAA;AAE9C,IAAA,IAAA,CAAK,KAAM,CAAA,GAAA;AAAA,MACT,UAAU,gBAAiB,CAAA;AAAA,QACzB,IAAA,EAAM,CAACA,UAAc,KAAA;AACnB,UAAK,IAAA,CAAA,gBAAA,CAAiBA,WAAU,KAAK,CAAA,CAAA;AAAA,SACvC;AAAA,OACD,CAAA;AAAA,KACH,CAAA;AAEA,IAAI,IAAA,IAAA,CAAK,4BAA8B,EAAA;AACrC,MAAA,IAAA,CAAK,UAAW,EAAA,CAAA;AAAA,KAClB;AAAA,GACF;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,EAEO,UAAmB,GAAA;AACxB,IAAA,KAAA,CAAM,UAAW,EAAA,CAAA;AAEjB,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;AAxJ7B,IAAA,IAAA,EAAA,EAAA,EAAA,CAAA;AAyJI,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;AAEnD,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,UAAA,EAAY,WAAa,EAAA,OAAA,KAAY,IAAK,CAAA,KAAA,CAAA;AAClD,IAAA,MAAM,oBAAoE,GAAA;AAAA,MACxE,aAAe,EAAA,EAAE,IAAM,EAAA,eAAA,EAAiB,OAAO,IAAK,EAAA;AAAA,KACtD,CAAA;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,WAAa,EAAA,CAAA;AAAA,MACb,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,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,SAAY,GAAA,UAAA,CAAW,EAAI,EAAA,OAAO,CACpC,CAAA,IAAA,CAAK,wBAAyB,CAAA,IAAA,EAAM,IAAK,CAAA,KAAA,CAAM,eAAe,CAAC,EAC/D,SAAU,CAAA;AAAA,QACT,MAAM,IAAK,CAAA,cAAA;AAAA,OACZ,CAAA,CAAA;AAAA,aACI,GAAP,EAAA;AACA,MAAQ,OAAA,CAAA,KAAA,CAAM,0BAA0B,GAAG,CAAA,CAAA;AAAA,KAC7C;AAAA,GACF;AAKF,CAAA;AAEO,MAAM,wBAG8B,GAAA,CAAC,WAAa,EAAA,eAAA,KAAoB,CAAC,WAAgB,KAAA;AAC5F,EAAA,OAAO,WAAY,CAAA,IAAA;AAAA,IACjB,QAAA,CAAS,CAAC,IAAS,KAAA;AACjB,MAAA,IAAI,CAAC,eAAA,IAAmB,eAAgB,CAAA,MAAA,KAAW,CAAG,EAAA;AACpD,QAAA,OAAO,GAAG,IAAI,CAAA,CAAA;AAAA,OAChB;AAEA,MAAA,MAAM,GAAM,GAAA;AAAA,QACV,WAAA,EAAa,CAAC,KAAkB,KAAA;AApPxC,UAAA,IAAA,EAAA,CAAA;AAqPU,UAAA,OAAO,WAAW,WAAY,CAAA,WAAA,EAAa,QAAO,EAAM,GAAA,IAAA,IAAA,IAAA,GAAA,KAAA,CAAA,GAAA,IAAA,CAAA,OAAA,KAAN,mBAAe,UAAU,CAAA,CAAA;AAAA,SAC7E;AAAA,OACF,CAAA;AAEA,MAAA,OAAO,kBAAmB,CAAA,eAAA,EAAiB,IAAK,CAAA,MAAA,EAAQ,GAAG,CAAE,CAAA,IAAA,CAAK,GAAI,CAAA,CAAC,WAAY,aAAK,CAAA,cAAA,CAAA,EAAA,EAAA,IAAA,CAAA,EAAL,EAAW,MAAA,GAAS,CAAC,CAAA,CAAA;AAAA,KACzG,CAAA;AAAA,GACH,CAAA;AACF;;;;"}
+{"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 { CustomTransformOperator, 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  // Array of standard transformation configs and custom transform operators\n  transformations?: Array<DataTransformerConfig | CustomTransformOperator>;\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?: Array<DataTransformerConfig | CustomTransformOperator>\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/variables/components/VariableValueInput.js

@@ -0,0 +1,31 @@
+import React, { useState, useCallback } from 'react';
+import { Input } from '@grafana/ui';
+import { useDebounce } from 'react-use';
+
+function VariableValueInput({ model }) {
+  const { value, key, loading } = model.useState();
+  const [textValue, setTextValue] = useState(value);
+  useDebounce(
+    () => {
+      model.setValue(textValue);
+    },
+    250,
+    [textValue]
+  );
+  const onChange = useCallback(
+    (e) => {
+      setTextValue(e.target.value);
+    },
+    [setTextValue]
+  );
+  return /* @__PURE__ */ React.createElement(Input, {
+    id: key,
+    placeholder: "Enter variable value",
+    value: textValue,
+    loading,
+    onChange
+  });
+}
+
+export { VariableValueInput };
+//# sourceMappingURL=VariableValueInput.js.map

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

@@ -0,0 +1 @@
+{"version":3,"file":"VariableValueInput.js","sources":["../../../../src/variables/components/VariableValueInput.tsx"],"sourcesContent":["import React, { useState, useCallback } from 'react';\n\nimport { Input } from '@grafana/ui';\n\nimport { SceneComponentProps } from '../../core/types';\nimport { TextBoxVariable } from '../variants/TextBoxVariable';\nimport { useDebounce } from 'react-use';\n\nexport function VariableValueInput({ model }: SceneComponentProps<TextBoxVariable>) {\n  const { value, key, loading } = model.useState();\n  const [textValue, setTextValue] = useState(value);\n  useDebounce(\n    () => {\n      model.setValue(textValue);\n    },\n    250,\n    [textValue]\n  );\n\n  const onChange = useCallback(\n    (e: React.ChangeEvent<HTMLInputElement>) => {\n      setTextValue(e.target.value);\n    },\n    [setTextValue]\n  );\n\n  return <Input id={key} placeholder=\"Enter variable value\" value={textValue} loading={loading} onChange={onChange} />;\n}\n"],"names":[],"mappings":";;;;AAQgB,SAAA,kBAAA,CAAmB,EAAE,KAAA,EAA+C,EAAA;AAClF,EAAA,MAAM,EAAE,KAAO,EAAA,GAAA,EAAK,OAAQ,EAAA,GAAI,MAAM,QAAS,EAAA,CAAA;AAC/C,EAAA,MAAM,CAAC,SAAA,EAAW,YAAY,CAAA,GAAI,SAAS,KAAK,CAAA,CAAA;AAChD,EAAA,WAAA;AAAA,IACE,MAAM;AACJ,MAAA,KAAA,CAAM,SAAS,SAAS,CAAA,CAAA;AAAA,KAC1B;AAAA,IACA,GAAA;AAAA,IACA,CAAC,SAAS,CAAA;AAAA,GACZ,CAAA;AAEA,EAAA,MAAM,QAAW,GAAA,WAAA;AAAA,IACf,CAAC,CAA2C,KAAA;AAC1C,MAAa,YAAA,CAAA,CAAA,CAAE,OAAO,KAAK,CAAA,CAAA;AAAA,KAC7B;AAAA,IACA,CAAC,YAAY,CAAA;AAAA,GACf,CAAA;AAEA,EAAA,uBAAQ,KAAA,CAAA,aAAA,CAAA,KAAA,EAAA;AAAA,IAAM,EAAI,EAAA,GAAA;AAAA,IAAK,WAAY,EAAA,sBAAA;AAAA,IAAuB,KAAO,EAAA,SAAA;AAAA,IAAW,OAAA;AAAA,IAAkB,QAAA;AAAA,GAAoB,CAAA,CAAA;AACpH;;;;"}

package/dist/esm/variables/variants/TextBoxVariable.js

@@ -0,0 +1,61 @@
+import React from 'react';
+import { SceneObjectBase } from '../../core/SceneObjectBase.js';
+import { SceneObjectUrlSyncConfig } from '../../services/SceneObjectUrlSyncConfig.js';
+import { VariableValueInput } from '../components/VariableValueInput.js';
+import { SceneVariableValueChangedEvent } from '../types.js';
+
+var __defProp = Object.defineProperty;
+var __getOwnPropSymbols = Object.getOwnPropertySymbols;
+var __hasOwnProp = Object.prototype.hasOwnProperty;
+var __propIsEnum = Object.prototype.propertyIsEnumerable;
+var __defNormalProp = (obj, key, value) => key in obj ? __defProp(obj, key, { enumerable: true, configurable: true, writable: true, value }) : obj[key] = value;
+var __spreadValues = (a, b) => {
+  for (var prop in b || (b = {}))
+    if (__hasOwnProp.call(b, prop))
+      __defNormalProp(a, prop, b[prop]);
+  if (__getOwnPropSymbols)
+    for (var prop of __getOwnPropSymbols(b)) {
+      if (__propIsEnum.call(b, prop))
+        __defNormalProp(a, prop, b[prop]);
+    }
+  return a;
+};
+class TextBoxVariable extends SceneObjectBase {
+  constructor(initialState) {
+    super(__spreadValues({
+      type: "textbox",
+      value: "",
+      name: ""
+    }, initialState));
+    this._urlSync = new SceneObjectUrlSyncConfig(this, { keys: [this.getKey()] });
+  }
+  getValue() {
+    return this.state.value;
+  }
+  setValue(newValue) {
+    this.setState({ value: newValue });
+    this.publishEvent(new SceneVariableValueChangedEvent(this), true);
+  }
+  getKey() {
+    return `var-${this.state.name}`;
+  }
+  getUrlState(state) {
+    return { [this.getKey()]: state.value };
+  }
+  updateFromUrl(values) {
+    const update = {};
+    const val = values[this.getKey()];
+    if (typeof val === "string") {
+      update.value = val;
+    }
+    this.setState(update);
+  }
+}
+TextBoxVariable.Component = ({ model }) => {
+  return /* @__PURE__ */ React.createElement(VariableValueInput, {
+    model
+  });
+};
+
+export { TextBoxVariable };
+//# sourceMappingURL=TextBoxVariable.js.map

package/dist/esm/variables/variants/TextBoxVariable.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"TextBoxVariable.js","sources":["../../../../src/variables/variants/TextBoxVariable.tsx"],"sourcesContent":["import React from 'react';\nimport { SceneObjectBase } from '../../core/SceneObjectBase';\nimport { SceneComponentProps, SceneObjectUrlSyncHandler, SceneObjectUrlValues } from '../../core/types';\nimport { SceneObjectUrlSyncConfig } from '../../services/SceneObjectUrlSyncConfig';\nimport { VariableValueInput } from '../components/VariableValueInput';\nimport { SceneVariable, SceneVariableState, SceneVariableValueChangedEvent, VariableValue } from '../types';\n\nexport interface TextBoxVariableState extends SceneVariableState {\n  value: string;\n}\n\nexport class TextBoxVariable\n  extends SceneObjectBase<TextBoxVariableState>\n  implements SceneVariable<TextBoxVariableState>\n{\n  protected _urlSync: SceneObjectUrlSyncHandler<TextBoxVariableState>;\n\n  public constructor(initialState: Partial<TextBoxVariableState>) {\n    super({\n      type: 'textbox',\n      value: '',\n      name: '',\n      ...initialState,\n    });\n\n    this._urlSync = new SceneObjectUrlSyncConfig(this, { keys: [this.getKey()]})\n  }\n\n  public getValue(): VariableValue {\n    return this.state.value;\n  }\n\n  public setValue(newValue: string) {\n    this.setState({ value: newValue });\n    this.publishEvent(new SceneVariableValueChangedEvent(this), true);\n  }\n\n  private getKey(): string {\n    return `var-${this.state.name}`;\n  }\n\n  public getUrlState(state: TextBoxVariableState) {\n    return { [this.getKey()]: state.value }; \n  }\n\n  public updateFromUrl(values: SceneObjectUrlValues) {\n    const update: Partial<TextBoxVariableState> = {};\n    const val = values[this.getKey()];\n    if (typeof val === 'string') {\n      update.value = val;\n    }\n    \n    this.setState(update);\n  }\n\n  public static Component = ({ model }: SceneComponentProps<TextBoxVariable>) => {\n    return <VariableValueInput model={model} />;\n  };\n}\n"],"names":[],"mappings":";;;;;;;;;;;;;;;;;;;;;;AAWO,MAAM,wBACH,eAEV,CAAA;AAAA,EAGS,YAAY,YAA6C,EAAA;AAC9D,IAAM,KAAA,CAAA,cAAA,CAAA;AAAA,MACJ,IAAM,EAAA,SAAA;AAAA,MACN,KAAO,EAAA,EAAA;AAAA,MACP,IAAM,EAAA,EAAA;AAAA,KAAA,EACH,YACJ,CAAA,CAAA,CAAA;AAED,IAAK,IAAA,CAAA,QAAA,GAAW,IAAI,wBAAA,CAAyB,IAAM,EAAA,EAAE,IAAM,EAAA,CAAC,IAAK,CAAA,MAAA,EAAQ,CAAA,EAAE,CAAA,CAAA;AAAA,GAC7E;AAAA,EAEO,QAA0B,GAAA;AAC/B,IAAA,OAAO,KAAK,KAAM,CAAA,KAAA,CAAA;AAAA,GACpB;AAAA,EAEO,SAAS,QAAkB,EAAA;AAChC,IAAA,IAAA,CAAK,QAAS,CAAA,EAAE,KAAO,EAAA,QAAA,EAAU,CAAA,CAAA;AACjC,IAAA,IAAA,CAAK,YAAa,CAAA,IAAI,8BAA+B,CAAA,IAAI,GAAG,IAAI,CAAA,CAAA;AAAA,GAClE;AAAA,EAEQ,MAAiB,GAAA;AACvB,IAAO,OAAA,CAAA,IAAA,EAAO,KAAK,KAAM,CAAA,IAAA,CAAA,CAAA,CAAA;AAAA,GAC3B;AAAA,EAEO,YAAY,KAA6B,EAAA;AAC9C,IAAA,OAAO,EAAE,CAAC,IAAA,CAAK,MAAO,EAAA,GAAI,MAAM,KAAM,EAAA,CAAA;AAAA,GACxC;AAAA,EAEO,cAAc,MAA8B,EAAA;AACjD,IAAA,MAAM,SAAwC,EAAC,CAAA;AAC/C,IAAM,MAAA,GAAA,GAAM,MAAO,CAAA,IAAA,CAAK,MAAO,EAAA,CAAA,CAAA;AAC/B,IAAI,IAAA,OAAO,QAAQ,QAAU,EAAA;AAC3B,MAAA,MAAA,CAAO,KAAQ,GAAA,GAAA,CAAA;AAAA,KACjB;AAEA,IAAA,IAAA,CAAK,SAAS,MAAM,CAAA,CAAA;AAAA,GACtB;AAKF,CAAA;AA/Ca,eAAA,CA4CG,SAAY,GAAA,CAAC,EAAE,KAAA,EAAkD,KAAA;AAC7E,EAAA,uBAAQ,KAAA,CAAA,aAAA,CAAA,kBAAA,EAAA;AAAA,IAAmB,KAAA;AAAA,GAAc,CAAA,CAAA;AAC3C,CAAA;;;;"}

package/dist/index.d.ts

@@ -1,6 +1,6 @@
 import React, { CSSProperties } from 'react';
-import { Observable, Observer, Subscription, Unsubscribable } from 'rxjs';
-import { BusEventWithPayload, PanelData, BusEvent, BusEventType, BusEventHandler, TimeZone, TimeRange, ScopedVars, DataTransformerConfig, DataSourceRef, DataQuery, Registry, RegistryItem, VariableRefresh, VariableSort, FieldConfigSource, PanelPlugin, AbsoluteTimeRange, DataFrame } from '@grafana/data';
+import { Observable, Observer, Subscription, Unsubscribable, MonoTypeOperatorFunction } from 'rxjs';
+import { BusEventWithPayload, PanelData, BusEvent, BusEventType, BusEventHandler, TimeZone, TimeRange, DataTransformContext, DataFrame, ScopedVars, DataTransformerConfig, DataSourceRef, DataQuery, Registry, RegistryItem, VariableRefresh, VariableSort, FieldConfigSource, PanelPlugin, AbsoluteTimeRange, InterpolateFunction } from '@grafana/data';
 import { VariableType, VariableHide, VariableModel } from '@grafana/schema';
 import { IconName } from '@grafana/ui';
 import ReactGridLayout from 'react-grid-layout';
@@ -187,6 +187,7 @@ interface SceneObjectUrlSyncHandler<TState> {
 }
 type SceneObjectUrlValue = string | string[] | undefined | null;
 type SceneObjectUrlValues = Record<string, SceneObjectUrlValue>;
+type CustomTransformOperator = (context: DataTransformContext) => MonoTypeOperatorFunction<DataFrame[]>;
 type DeepPartial<T> = {
     [K in keyof T]?: T[K] extends object ? DeepPartial<T[K]> : T[K];
 };
@@ -252,8 +253,6 @@ declare abstract class SceneObjectBase<TState extends SceneObjectState = SceneOb
     private _subject;
     private _state;
     private _events;
-    /** Incremented in SceneComponentWrapper, useful for tests and rendering optimizations */
-    protected _renderCount: number;
     protected _parent?: SceneObject;
     protected _subs: Subscription;
     protected _variableDependency: SceneVariableDependencyConfigLike | undefined;
@@ -317,7 +316,7 @@ declare class SceneDataNode extends SceneObjectBase<SceneDataNodeState> {
 }
 
 interface SceneDataTransformerState extends SceneDataState {
-    transformations?: DataTransformerConfig[];
+    transformations?: Array<DataTransformerConfig | CustomTransformOperator>;
 }
 declare class SceneDataTransformer extends SceneObjectBase<SceneDataTransformerState> {
     private _transformationsSub?;
@@ -393,7 +392,7 @@ declare class VariableDependencyConfig<TState extends SceneObjectState> implemen
 interface QueryRunnerState extends SceneObjectStatePlain {
     data?: PanelData;
     queries: DataQueryExtended[];
-    transformations?: DataTransformerConfig[];
+    transformations?: Array<DataTransformerConfig | CustomTransformOperator>;
     datasource?: DataSourceRef;
     minInterval?: string;
     maxDataPoints?: number;
@@ -634,6 +633,22 @@ declare class TestVariable extends MultiValueVariable<TestVariableState> {
     static Component: ({ model }: SceneComponentProps<MultiValueVariable>) => JSX.Element;
 }
 
+interface TextBoxVariableState extends SceneVariableState {
+    value: string;
+}
+declare class TextBoxVariable extends SceneObjectBase<TextBoxVariableState> implements SceneVariable<TextBoxVariableState> {
+    protected _urlSync: SceneObjectUrlSyncHandler<TextBoxVariableState>;
+    constructor(initialState: Partial<TextBoxVariableState>);
+    getValue(): VariableValue;
+    setValue(newValue: string): void;
+    private getKey;
+    getUrlState(state: TextBoxVariableState): {
+        [x: string]: string;
+    };
+    updateFromUrl(values: SceneObjectUrlValues): void;
+    static Component: ({ model }: SceneComponentProps<TextBoxVariable>) => JSX.Element;
+}
+
 declare class UrlSyncManager {
     private sceneRoot;
     private locationListenerUnsub;
@@ -687,6 +702,8 @@ interface VizPanelState<TOptions = {}, TFieldConfig = {}> extends SceneLayoutChi
     options: DeepPartial<TOptions>;
     fieldConfig: FieldConfigSource<DeepPartial<TFieldConfig>>;
     pluginVersion?: string;
+    displayMode?: 'default' | 'transparent';
+    hoverHeader?: boolean;
     pluginLoadError?: string;
 }
 declare class VizPanel<TOptions = {}, TFieldConfig = {}> extends SceneObjectBase<VizPanelState<TOptions, TFieldConfig>> {
@@ -701,6 +718,7 @@ declare class VizPanel<TOptions = {}, TFieldConfig = {}> extends SceneObjectBase
     onChangeTimeRange: (timeRange: AbsoluteTimeRange) => void;
     onOptionsChange: (options: TOptions) => void;
     onFieldConfigChange: (fieldConfig: FieldConfigSource<TFieldConfig>) => void;
+    interpolate: InterpolateFunction;
 }
 
 interface NestedSceneState extends SceneLayoutChildState {
@@ -759,6 +777,28 @@ declare class SceneTimePicker extends SceneObjectBase<SceneTimePickerState> {
 }
 declare function SceneTimePickerRenderer({ model }: SceneComponentProps<SceneTimePicker>): JSX.Element | null;
 
+interface SceneRefreshPickerState extends SceneObjectStatePlain {
+    refresh: string;
+    intervals?: string[];
+    isOnCanvas?: boolean;
+}
+declare class SceneRefreshPicker extends SceneObjectBase<SceneRefreshPickerState> {
+    static Component: typeof SceneRefreshPickerRenderer;
+    protected _urlSync: SceneObjectUrlSyncConfig<SceneObjectState>;
+    private _intervalTimer;
+    constructor(state: Partial<SceneRefreshPickerState>);
+    activate(): void;
+    deactivate(): void;
+    onRefresh: () => void;
+    onIntervalChanged: (interval: string) => void;
+    getUrlState(): {
+        refresh: string;
+    };
+    updateFromUrl(values: SceneObjectUrlValues): void;
+    private setupIntervalTimer;
+}
+declare function SceneRefreshPickerRenderer({ model }: SceneComponentProps<SceneRefreshPicker>): JSX.Element;
+
 interface RepeatOptions extends SceneObjectStatePlain {
     body: SceneObject<SceneLayoutState>;
     getLayoutChild(data: PanelData, frame: DataFrame, frameIndex: number): SceneLayoutChild;
@@ -875,4 +915,4 @@ interface SceneAppDrilldownView {
     getPage: (routeMatch: SceneRouteMatch<any>, parent: SceneAppPage) => SceneAppPage;
 }
 
-export { ConstantVariable, CustomFormatterFn, CustomVariable, DataSourceVariable, DeepPartial, EmbeddedScene, EmbeddedSceneState, FormatRegistryID, FormatVariable, NestedScene, QueryRunnerState, QueryVariable, SceneApp, SceneAppPage, SceneByFrameRepeater, SceneCanvasText, SceneComponent, SceneComponentProps, SceneControlsSpacer, SceneDataNode, SceneDataState, SceneDataTransformer, SceneEditor, SceneEditorState, SceneFlexLayout, SceneGridLayout, SceneGridRow, SceneLayout, SceneLayoutChild, SceneLayoutChildOptions, SceneLayoutChildState, SceneLayoutState, SceneObject, SceneObjectBase, SceneObjectRef, SceneObjectState, SceneObjectStateChangedEvent, SceneObjectStateChangedPayload, SceneObjectStatePlain, SceneObjectUrlSyncConfig, SceneObjectUrlSyncHandler, SceneObjectUrlValue, SceneObjectUrlValues, SceneObjectWithUrlSync, SceneQueryRunner, SceneRouteMatch, SceneTimePicker, SceneTimeRange, SceneTimeRangeLike, SceneTimeRangeState, SceneToolbarButton, SceneToolbarInput, SceneVariable, SceneVariableDependencyConfigLike, SceneVariableSet, SceneVariableSetState, SceneVariableState, SceneVariableValueChangedEvent, SceneVariables, TestVariable, UrlSyncManager, ValidateAndUpdateResult, VariableDependencyConfig, VariableValue, VariableValueCustom, VariableValueOption, VariableValueSelectors, VariableValueSingle, VizPanel, VizPanelState, formatRegistry, isSceneObject, sceneGraph };
+export { ConstantVariable, CustomFormatterFn, CustomTransformOperator, CustomVariable, DataSourceVariable, DeepPartial, EmbeddedScene, EmbeddedSceneState, FormatRegistryID, FormatVariable, NestedScene, QueryRunnerState, QueryVariable, SceneApp, SceneAppPage, SceneByFrameRepeater, SceneCanvasText, SceneComponent, SceneComponentProps, SceneControlsSpacer, SceneDataNode, SceneDataState, SceneDataTransformer, SceneEditor, SceneEditorState, SceneFlexLayout, SceneGridLayout, SceneGridRow, SceneLayout, SceneLayoutChild, SceneLayoutChildOptions, SceneLayoutChildState, SceneLayoutState, SceneObject, SceneObjectBase, SceneObjectRef, SceneObjectState, SceneObjectStateChangedEvent, SceneObjectStateChangedPayload, SceneObjectStatePlain, SceneObjectUrlSyncConfig, SceneObjectUrlSyncHandler, SceneObjectUrlValue, SceneObjectUrlValues, SceneObjectWithUrlSync, SceneQueryRunner, SceneRefreshPicker, SceneRouteMatch, SceneTimePicker, SceneTimeRange, SceneTimeRangeLike, SceneTimeRangeState, SceneToolbarButton, SceneToolbarInput, SceneVariable, SceneVariableDependencyConfigLike, SceneVariableSet, SceneVariableSetState, SceneVariableState, SceneVariableValueChangedEvent, SceneVariables, TestVariable, TextBoxVariable, UrlSyncManager, ValidateAndUpdateResult, VariableDependencyConfig, VariableValue, VariableValueCustom, VariableValueOption, VariableValueSelectors, VariableValueSingle, VizPanel, VizPanelState, formatRegistry, isSceneObject, sceneGraph };