@grafana/scenes 4.3.0--canary.667.8525833293.0 → 4.3.0--canary.670.8536628171.0

package/CHANGELOG.md

@@ -1,3 +1,15 @@
+# v4.2.1 (Wed Apr 03 2024)
+
+#### 🐛 Bug Fix
+
+- LiveNowTimer: The constructor doesn't receive a valid state [#662](https://github.com/grafana/scenes/pull/662) ([@ivanortegaalba](https://github.com/ivanortegaalba))
+
+#### Authors: 1
+
+- Ivan Ortega Alba ([@ivanortegaalba](https://github.com/ivanortegaalba))
+
+---
+
 # v4.2.0 (Tue Apr 02 2024)
 
 #### 🚀 Enhancement

package/dist/esm/behaviors/LiveNowTimer.js

@@ -3,7 +3,7 @@ import { SceneObjectBase } from '../core/SceneObjectBase.js';
 import { sceneGraph } from '../core/sceneGraph/index.js';
 
 const _LiveNowTimer = class extends SceneObjectBase {
-  constructor(enabled = false) {
+  constructor({ enabled = false }) {
     super({ enabled });
     this.timerId = void 0;
     this._activationHandler = () => {

package/dist/esm/behaviors/LiveNowTimer.js.map

@@ -1 +1 @@
-{"version":3,"file":"LiveNowTimer.js","sources":["../../../src/behaviors/LiveNowTimer.ts"],"sourcesContent":["import { VizPanel } from \"../components/VizPanel/VizPanel\";\nimport { SceneObjectBase } from \"../core/SceneObjectBase\";\nimport { sceneGraph } from \"../core/sceneGraph\";\nimport { SceneObjectState } from \"../core/types\";\n\ninterface LiveNowTimerState extends SceneObjectState {\n  enabled: boolean;\n}\n\nexport class LiveNowTimer extends SceneObjectBase<LiveNowTimerState> {\n    private timerId: number | undefined = undefined;\n    private static REFRESH_RATE = 100; // ms\n\n    public constructor(enabled = false) {\n      super({ enabled });\n      this.addActivationHandler(this._activationHandler);\n    }\n  \n    private _activationHandler = () => {\n      if (this.state.enabled) {\n        this.enable();\n      }\n\n      return () => {\n        window.clearInterval(this.timerId);\n        this.timerId = undefined;\n      }\n    }\n  \n    public enable() {\n      window.clearInterval(this.timerId);\n      this.timerId = undefined;\n      this.timerId = window.setInterval(() => {\n        const panels = sceneGraph.findAllObjects(this.getRoot(), (obj) => obj instanceof VizPanel) as VizPanel[];\n        for (const panel of panels) {\n          panel.forceRender();\n        }\n      }, LiveNowTimer.REFRESH_RATE);\n      this.setState({ enabled: true })\n    } \n  \n    public disable() {\n      window.clearInterval(this.timerId);\n      this.timerId = undefined;\n      this.setState({ enabled: false })\n    }\n\n    public get isEnabled() {\n        return this.state.enabled;\n    }\n}\n"],"names":[],"mappings":";;;;AASO,MAAM,aAAA,GAAN,cAA2B,eAAmC,CAAA;AAAA,EAI1D,WAAA,CAAY,UAAU,KAAO,EAAA;AAClC,IAAM,KAAA,CAAA,EAAE,SAAS,CAAA,CAAA;AAJnB,IAAA,IAAA,CAAQ,OAA8B,GAAA,KAAA,CAAA,CAAA;AAQtC,IAAA,IAAA,CAAQ,qBAAqB,MAAM;AACjC,MAAI,IAAA,IAAA,CAAK,MAAM,OAAS,EAAA;AACtB,QAAA,IAAA,CAAK,MAAO,EAAA,CAAA;AAAA,OACd;AAEA,MAAA,OAAO,MAAM;AACX,QAAO,MAAA,CAAA,aAAA,CAAc,KAAK,OAAO,CAAA,CAAA;AACjC,QAAA,IAAA,CAAK,OAAU,GAAA,KAAA,CAAA,CAAA;AAAA,OACjB,CAAA;AAAA,KACF,CAAA;AAZE,IAAK,IAAA,CAAA,oBAAA,CAAqB,KAAK,kBAAkB,CAAA,CAAA;AAAA,GACnD;AAAA,EAaO,MAAS,GAAA;AACd,IAAO,MAAA,CAAA,aAAA,CAAc,KAAK,OAAO,CAAA,CAAA;AACjC,IAAA,IAAA,CAAK,OAAU,GAAA,KAAA,CAAA,CAAA;AACf,IAAK,IAAA,CAAA,OAAA,GAAU,MAAO,CAAA,WAAA,CAAY,MAAM;AACtC,MAAM,MAAA,MAAA,GAAS,WAAW,cAAe,CAAA,IAAA,CAAK,SAAW,EAAA,CAAC,GAAQ,KAAA,GAAA,YAAe,QAAQ,CAAA,CAAA;AACzF,MAAA,KAAA,MAAW,SAAS,MAAQ,EAAA;AAC1B,QAAA,KAAA,CAAM,WAAY,EAAA,CAAA;AAAA,OACpB;AAAA,KACF,EAAG,cAAa,YAAY,CAAA,CAAA;AAC5B,IAAA,IAAA,CAAK,QAAS,CAAA,EAAE,OAAS,EAAA,IAAA,EAAM,CAAA,CAAA;AAAA,GACjC;AAAA,EAEO,OAAU,GAAA;AACf,IAAO,MAAA,CAAA,aAAA,CAAc,KAAK,OAAO,CAAA,CAAA;AACjC,IAAA,IAAA,CAAK,OAAU,GAAA,KAAA,CAAA,CAAA;AACf,IAAA,IAAA,CAAK,QAAS,CAAA,EAAE,OAAS,EAAA,KAAA,EAAO,CAAA,CAAA;AAAA,GAClC;AAAA,EAEA,IAAW,SAAY,GAAA;AACnB,IAAA,OAAO,KAAK,KAAM,CAAA,OAAA,CAAA;AAAA,GACtB;AACJ,CAAA,CAAA;AAzCO,IAAM,YAAN,GAAA,cAAA;AAAM,YAAA,CAEM,YAAe,GAAA,GAAA;;;;"}
+{"version":3,"file":"LiveNowTimer.js","sources":["../../../src/behaviors/LiveNowTimer.ts"],"sourcesContent":["import { VizPanel } from '../components/VizPanel/VizPanel';\nimport { SceneObjectBase } from '../core/SceneObjectBase';\nimport { sceneGraph } from '../core/sceneGraph';\nimport { SceneObjectState } from '../core/types';\n\ninterface LiveNowTimerState extends SceneObjectState {\n  enabled: boolean;\n}\n\nexport class LiveNowTimer extends SceneObjectBase<LiveNowTimerState> {\n  private timerId: number | undefined = undefined;\n  private static REFRESH_RATE = 100; // ms\n\n  public constructor({ enabled = false }) {\n    super({ enabled });\n    this.addActivationHandler(this._activationHandler);\n  }\n\n  private _activationHandler = () => {\n    if (this.state.enabled) {\n      this.enable();\n    }\n\n    return () => {\n      window.clearInterval(this.timerId);\n      this.timerId = undefined;\n    };\n  };\n\n  public enable() {\n    window.clearInterval(this.timerId);\n    this.timerId = undefined;\n    this.timerId = window.setInterval(() => {\n      const panels = sceneGraph.findAllObjects(this.getRoot(), (obj) => obj instanceof VizPanel) as VizPanel[];\n      for (const panel of panels) {\n        panel.forceRender();\n      }\n    }, LiveNowTimer.REFRESH_RATE);\n    this.setState({ enabled: true });\n  }\n\n  public disable() {\n    window.clearInterval(this.timerId);\n    this.timerId = undefined;\n    this.setState({ enabled: false });\n  }\n\n  public get isEnabled() {\n    return this.state.enabled;\n  }\n}\n"],"names":[],"mappings":";;;;AASO,MAAM,aAAA,GAAN,cAA2B,eAAmC,CAAA;AAAA,EAI5D,WAAY,CAAA,EAAE,OAAU,GAAA,KAAA,EAAS,EAAA;AACtC,IAAM,KAAA,CAAA,EAAE,SAAS,CAAA,CAAA;AAJnB,IAAA,IAAA,CAAQ,OAA8B,GAAA,KAAA,CAAA,CAAA;AAQtC,IAAA,IAAA,CAAQ,qBAAqB,MAAM;AACjC,MAAI,IAAA,IAAA,CAAK,MAAM,OAAS,EAAA;AACtB,QAAA,IAAA,CAAK,MAAO,EAAA,CAAA;AAAA,OACd;AAEA,MAAA,OAAO,MAAM;AACX,QAAO,MAAA,CAAA,aAAA,CAAc,KAAK,OAAO,CAAA,CAAA;AACjC,QAAA,IAAA,CAAK,OAAU,GAAA,KAAA,CAAA,CAAA;AAAA,OACjB,CAAA;AAAA,KACF,CAAA;AAZE,IAAK,IAAA,CAAA,oBAAA,CAAqB,KAAK,kBAAkB,CAAA,CAAA;AAAA,GACnD;AAAA,EAaO,MAAS,GAAA;AACd,IAAO,MAAA,CAAA,aAAA,CAAc,KAAK,OAAO,CAAA,CAAA;AACjC,IAAA,IAAA,CAAK,OAAU,GAAA,KAAA,CAAA,CAAA;AACf,IAAK,IAAA,CAAA,OAAA,GAAU,MAAO,CAAA,WAAA,CAAY,MAAM;AACtC,MAAM,MAAA,MAAA,GAAS,WAAW,cAAe,CAAA,IAAA,CAAK,SAAW,EAAA,CAAC,GAAQ,KAAA,GAAA,YAAe,QAAQ,CAAA,CAAA;AACzF,MAAA,KAAA,MAAW,SAAS,MAAQ,EAAA;AAC1B,QAAA,KAAA,CAAM,WAAY,EAAA,CAAA;AAAA,OACpB;AAAA,KACF,EAAG,cAAa,YAAY,CAAA,CAAA;AAC5B,IAAA,IAAA,CAAK,QAAS,CAAA,EAAE,OAAS,EAAA,IAAA,EAAM,CAAA,CAAA;AAAA,GACjC;AAAA,EAEO,OAAU,GAAA;AACf,IAAO,MAAA,CAAA,aAAA,CAAc,KAAK,OAAO,CAAA,CAAA;AACjC,IAAA,IAAA,CAAK,OAAU,GAAA,KAAA,CAAA,CAAA;AACf,IAAA,IAAA,CAAK,QAAS,CAAA,EAAE,OAAS,EAAA,KAAA,EAAO,CAAA,CAAA;AAAA,GAClC;AAAA,EAEA,IAAW,SAAY,GAAA;AACrB,IAAA,OAAO,KAAK,KAAM,CAAA,OAAA,CAAA;AAAA,GACpB;AACF,CAAA,CAAA;AAzCO,IAAM,YAAN,GAAA,cAAA;AAAM,YAAA,CAEI,YAAe,GAAA,GAAA;;;;"}

package/dist/esm/components/SceneRefreshPicker.js

@@ -1,6 +1,5 @@
 import React from 'react';
 import { rangeUtil } from '@grafana/data';
-import { config } from '@grafana/runtime';
 import { RefreshPicker } from '@grafana/ui';
 import { SceneObjectBase } from '../core/SceneObjectBase.js';
 import { sceneGraph } from '../core/sceneGraph/index.js';
@@ -25,20 +24,14 @@ var __spreadValues = (a, b) => {
   return a;
 };
 var __spreadProps = (a, b) => __defProps(a, __getOwnPropDescs(b));
-const AUTO_REFRESH_INTERVAL = "auto";
 const DEFAULT_INTERVALS = ["5s", "10s", "30s", "1m", "5m", "15m", "30m", "1h", "2h", "1d"];
 class SceneRefreshPicker extends SceneObjectBase {
   constructor(state) {
-    var _a, _b, _c;
-    const autoEnabled = (_a = state.autoEnabled) != null ? _a : true;
-    let intervals = (_b = state.intervals) != null ? _b : DEFAULT_INTERVALS;
-    intervals = autoEnabled ? [AUTO_REFRESH_INTERVAL, ...intervals] : intervals;
+    var _a;
     super(__spreadProps(__spreadValues({
       refresh: ""
     }, state), {
-      autoEnabled,
-      autoMinInterval: (_c = state.autoMinInterval) != null ? _c : config.minRefreshInterval,
-      intervals
+      intervals: (_a = state.intervals) != null ? _a : DEFAULT_INTERVALS
     }));
     this._urlSync = new SceneObjectUrlSyncConfig(this, { keys: ["refresh"] });
     this.onRefresh = () => {
@@ -58,24 +51,7 @@ class SceneRefreshPicker extends SceneObjectBase {
       this.setState({ refresh: interval });
       this.setupIntervalTimer();
     };
-    this.setupTimeRangeListener = () => {
-      return sceneGraph.getTimeRange(this).subscribeToState((newState, prevState) => {
-        const newDiff = newState.value.to.valueOf() - newState.value.from.valueOf();
-        const prevDiff = prevState.value.to.valueOf() - prevState.value.from.valueOf();
-        if (newDiff !== prevDiff) {
-          this.setupIntervalTimer();
-        }
-      });
-    };
-    this.calculateAutoRefreshInterval = () => {
-      var _a;
-      const timeRange = sceneGraph.getTimeRange(this);
-      const resolution = (_a = window == null ? void 0 : window.innerWidth) != null ? _a : 2e3;
-      const { intervalMs } = rangeUtil.calculateInterval(timeRange.state.value, resolution, this.state.autoMinInterval);
-      return intervalMs;
-    };
     this.setupIntervalTimer = () => {
-      var _a;
       const timeRange = sceneGraph.getTimeRange(this);
       const { refresh, intervals } = this.state;
       if (this._intervalTimer || refresh === "") {
@@ -87,15 +63,7 @@ class SceneRefreshPicker extends SceneObjectBase {
       if (intervals && !intervals.includes(refresh)) {
         return;
       }
-      let intervalMs;
-      if (refresh === AUTO_REFRESH_INTERVAL) {
-        intervalMs = this.calculateAutoRefreshInterval();
-        this._timeRangeListener = this.setupTimeRangeListener();
-      } else {
-        intervalMs = rangeUtil.intervalToMs(refresh);
-        (_a = this._timeRangeListener) == null ? void 0 : _a.unsubscribe();
-        this._timeRangeListener = void 0;
-      }
+      const intervalMs = rangeUtil.intervalToMs(refresh);
       this._intervalTimer = setInterval(() => {
         timeRange.onRefresh();
       }, intervalMs);
@@ -103,11 +71,9 @@ class SceneRefreshPicker extends SceneObjectBase {
     this.addActivationHandler(() => {
       this.setupIntervalTimer();
       return () => {
-        var _a2;
         if (this._intervalTimer) {
           clearInterval(this._intervalTimer);
         }
-        (_a2 = this._timeRangeListener) == null ? void 0 : _a2.unsubscribe();
       };
     });
   }
@@ -157,5 +123,5 @@ function useQueryControllerState(model) {
   return queryController.useState().isRunning;
 }
 
-export { AUTO_REFRESH_INTERVAL, DEFAULT_INTERVALS, SceneRefreshPicker, SceneRefreshPickerRenderer };
+export { DEFAULT_INTERVALS, SceneRefreshPicker, SceneRefreshPickerRenderer };
 //# sourceMappingURL=SceneRefreshPicker.js.map

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

@@ -1 +1 @@
-{"version":3,"file":"SceneRefreshPicker.js","sources":["../../../src/components/SceneRefreshPicker.tsx"],"sourcesContent":["import React from 'react';\nimport { Unsubscribable } from 'rxjs';\nimport { rangeUtil } from '@grafana/data';\nimport { config } from '@grafana/runtime';\nimport { RefreshPicker } from '@grafana/ui';\n\nimport { SceneObjectBase } from '../core/SceneObjectBase';\nimport { sceneGraph } from '../core/sceneGraph';\nimport { SceneComponentProps, SceneObject, SceneObjectState, SceneObjectUrlValues } from '../core/types';\nimport { SceneObjectUrlSyncConfig } from '../services/SceneObjectUrlSyncConfig';\n\nexport const AUTO_REFRESH_INTERVAL = 'auto';\nexport const DEFAULT_INTERVALS = ['5s', '10s', '30s', '1m', '5m', '15m', '30m', '1h', '2h', '1d'];\n\nexport interface SceneRefreshPickerState extends SceneObjectState {\n  // Refresh interval, e.g. 5s, 1m, 2h\n  refresh: string;\n  autoEnabled?: boolean;\n  autoMinInterval?: string;\n  // List of allowed refresh intervals, e.g. ['5s', '1m']\n  intervals?: string[];\n  isOnCanvas?: boolean;\n  primary?: boolean;\n  withText?: boolean;\n}\n\nexport class SceneRefreshPicker extends SceneObjectBase<SceneRefreshPickerState> {\n  public static Component = SceneRefreshPickerRenderer;\n  protected _urlSync = new SceneObjectUrlSyncConfig(this, { keys: ['refresh'] });\n  private _intervalTimer: ReturnType<typeof setInterval> | undefined;\n  private _timeRangeListener: Unsubscribable | undefined;\n\n  public constructor(state: Partial<SceneRefreshPickerState>) {\n    const autoEnabled = state.autoEnabled ?? true;\n    let intervals = state.intervals ?? DEFAULT_INTERVALS;\n    intervals = autoEnabled ? [AUTO_REFRESH_INTERVAL, ...intervals] : intervals;\n\n    super({\n      refresh: '',\n      ...state,\n      autoEnabled,\n      autoMinInterval: state.autoMinInterval ?? config.minRefreshInterval,\n      intervals,\n    });\n\n    this.addActivationHandler(() => {\n      this.setupIntervalTimer();\n\n      return () => {\n        if (this._intervalTimer) {\n          clearInterval(this._intervalTimer);\n        }\n\n        this._timeRangeListener?.unsubscribe();\n      };\n    });\n  }\n\n  public onRefresh = () => {\n    const queryController = sceneGraph.getQueryController(this);\n    if (queryController?.state.isRunning) {\n      queryController.cancelAll();\n      return;\n    }\n\n    const timeRange = sceneGraph.getTimeRange(this);\n\n    if (this._intervalTimer) {\n      clearInterval(this._intervalTimer);\n    }\n\n    timeRange.onRefresh();\n    this.setupIntervalTimer();\n  };\n\n  public onIntervalChanged = (interval: string) => {\n    this.setState({ refresh: interval });\n    this.setupIntervalTimer();\n  };\n\n  public getUrlState() {\n    return {\n      refresh: this.state.refresh,\n    };\n  }\n\n  public updateFromUrl(values: SceneObjectUrlValues) {\n    const refresh = values.refresh;\n\n    if (refresh && typeof refresh === 'string') {\n      this.setState({\n        refresh,\n      });\n    }\n  }\n\n  private setupTimeRangeListener = () => {\n    // If the time range has changed, we need to recalculate the auto interval\n    // But we need to prevent unnecessary recalculations\n    // So we just check if what actually matters to the algorithm is indeed changed\n    // Alternatively we could just check if from, to, timeZone, fiscal year start month and now delay are changed\n    return sceneGraph.getTimeRange(this).subscribeToState((newState, prevState) => {\n      const newDiff = newState.value.to.valueOf() - newState.value.from.valueOf();\n      const prevDiff = prevState.value.to.valueOf() - prevState.value.from.valueOf();\n\n      if (newDiff !== prevDiff) {\n        this.setupIntervalTimer();\n      }\n    });\n  };\n\n  private calculateAutoRefreshInterval = () => {\n    const timeRange = sceneGraph.getTimeRange(this);\n    const resolution = window?.innerWidth ?? 2000;\n    const { intervalMs } = rangeUtil.calculateInterval(timeRange.state.value, resolution, this.state.autoMinInterval);\n    return intervalMs;\n  };\n\n  private setupIntervalTimer = () => {\n    const timeRange = sceneGraph.getTimeRange(this);\n    const { refresh, intervals } = this.state;\n\n    if (this._intervalTimer || refresh === '') {\n      clearInterval(this._intervalTimer);\n    }\n\n    if (refresh === '') {\n      return;\n    }\n\n    // If the provided interval is not allowed\n    if (intervals && !intervals.includes(refresh)) {\n      return;\n    }\n\n    let intervalMs: number;\n\n    if (refresh === AUTO_REFRESH_INTERVAL) {\n      intervalMs = this.calculateAutoRefreshInterval();\n      this._timeRangeListener = this.setupTimeRangeListener();\n    } else {\n      intervalMs = rangeUtil.intervalToMs(refresh);\n      this._timeRangeListener?.unsubscribe();\n      this._timeRangeListener = undefined;\n    }\n\n    this._intervalTimer = setInterval(() => {\n      timeRange.onRefresh();\n    }, intervalMs);\n  };\n}\n\nexport function SceneRefreshPickerRenderer({ model }: SceneComponentProps<SceneRefreshPicker>) {\n  const { refresh, intervals, isOnCanvas, primary, withText } = model.useState();\n  const isRunning = useQueryControllerState(model);\n\n  let text = withText ? 'Refresh' : undefined;\n  let tooltip: string | undefined;\n\n  if (isRunning) {\n    tooltip = 'Cancel all queries';\n\n    if (withText) {\n      text = 'Cancel';\n    }\n  }\n\n  return (\n    <RefreshPicker\n      value={refresh}\n      intervals={intervals}\n      tooltip={tooltip}\n      text={text}\n      onRefresh={model.onRefresh}\n      primary={primary}\n      onIntervalChanged={model.onIntervalChanged}\n      isLoading={isRunning}\n      isOnCanvas={isOnCanvas ?? true}\n    />\n  );\n}\n\nfunction useQueryControllerState(model: SceneObject): boolean {\n  const queryController = sceneGraph.getQueryController(model);\n  if (!queryController) {\n    return false;\n  }\n\n  return queryController.useState().isRunning;\n}\n"],"names":["_a"],"mappings":"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"}
+{"version":3,"file":"SceneRefreshPicker.js","sources":["../../../src/components/SceneRefreshPicker.tsx"],"sourcesContent":["import React from 'react';\n\nimport { rangeUtil } from '@grafana/data';\nimport { RefreshPicker } from '@grafana/ui';\n\nimport { SceneObjectBase } from '../core/SceneObjectBase';\nimport { sceneGraph } from '../core/sceneGraph';\nimport { SceneComponentProps, SceneObject, SceneObjectState, SceneObjectUrlValues } from '../core/types';\nimport { SceneObjectUrlSyncConfig } from '../services/SceneObjectUrlSyncConfig';\n\nexport const DEFAULT_INTERVALS = ['5s', '10s', '30s', '1m', '5m', '15m', '30m', '1h', '2h', '1d'];\n\nexport interface SceneRefreshPickerState extends SceneObjectState {\n  // Refresh interval, e.g. 5s, 1m, 2h\n  refresh: string;\n  // List of allowed refresh intervals, e.g. ['5s', '1m']\n  intervals?: string[];\n  isOnCanvas?: boolean;\n  primary?: boolean;\n  withText?: boolean;\n}\n\nexport class SceneRefreshPicker extends SceneObjectBase<SceneRefreshPickerState> {\n  public static Component = SceneRefreshPickerRenderer;\n  protected _urlSync = new SceneObjectUrlSyncConfig(this, { keys: ['refresh'] });\n  private _intervalTimer: ReturnType<typeof setInterval> | undefined;\n\n  public constructor(state: Partial<SceneRefreshPickerState>) {\n    super({\n      refresh: '',\n      ...state,\n      intervals: state.intervals ?? DEFAULT_INTERVALS,\n    });\n\n    this.addActivationHandler(() => {\n      this.setupIntervalTimer();\n\n      return () => {\n        if (this._intervalTimer) {\n          clearInterval(this._intervalTimer);\n        }\n      };\n    });\n  }\n\n  public onRefresh = () => {\n    const queryController = sceneGraph.getQueryController(this);\n    if (queryController?.state.isRunning) {\n      queryController.cancelAll();\n      return;\n    }\n\n    const timeRange = sceneGraph.getTimeRange(this);\n\n    if (this._intervalTimer) {\n      clearInterval(this._intervalTimer);\n    }\n\n    timeRange.onRefresh();\n    this.setupIntervalTimer();\n  };\n\n  public onIntervalChanged = (interval: string) => {\n    this.setState({ refresh: interval });\n    this.setupIntervalTimer();\n  };\n\n  public getUrlState() {\n    return {\n      refresh: this.state.refresh,\n    };\n  }\n\n  public updateFromUrl(values: SceneObjectUrlValues) {\n    const refresh = values.refresh;\n\n    if (refresh && typeof refresh === 'string') {\n      this.setState({\n        refresh,\n      });\n    }\n  }\n\n  private setupIntervalTimer = () => {\n    const timeRange = sceneGraph.getTimeRange(this);\n    const { refresh, intervals } = this.state;\n\n    if (this._intervalTimer || refresh === '') {\n      clearInterval(this._intervalTimer);\n    }\n\n    if (refresh === '') {\n      return;\n    }\n\n    // If the provided interval is not allowed\n    if (intervals && !intervals.includes(refresh)) {\n      return;\n    }\n\n    const intervalMs = rangeUtil.intervalToMs(refresh);\n\n    this._intervalTimer = setInterval(() => {\n      timeRange.onRefresh();\n    }, intervalMs);\n  };\n}\n\nexport function SceneRefreshPickerRenderer({ model }: SceneComponentProps<SceneRefreshPicker>) {\n  const { refresh, intervals, isOnCanvas, primary, withText } = model.useState();\n  const isRunning = useQueryControllerState(model);\n\n  let text = withText ? 'Refresh' : undefined;\n  let tooltip: string | undefined;\n\n  if (isRunning) {\n    tooltip = 'Cancel all queries';\n\n    if (withText) {\n      text = 'Cancel';\n    }\n  }\n\n  return (\n    <RefreshPicker\n      value={refresh}\n      intervals={intervals}\n      tooltip={tooltip}\n      text={text}\n      onRefresh={model.onRefresh}\n      primary={primary}\n      onIntervalChanged={model.onIntervalChanged}\n      isLoading={isRunning}\n      isOnCanvas={isOnCanvas ?? true}\n    />\n  );\n}\n\nfunction useQueryControllerState(model: SceneObject): boolean {\n  const queryController = sceneGraph.getQueryController(model);\n  if (!queryController) {\n    return false;\n  }\n\n  return queryController.useState().isRunning;\n}\n"],"names":[],"mappings":"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"}

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

@@ -43,6 +43,7 @@ function AdHocFilterRenderer({ filter, model }) {
   }, [filter.key, model.state.defaultKeys]);
   const valueValue = filter.value !== "" ? toOption(filter.value) : null;
   const valueSelect = /* @__PURE__ */ React.createElement(Select, {
+    allowCustomValue: true,
     disabled: model.state.readOnly,
     className: state.isKeysOpen ? styles.widthWhenOpen : void 0,
     width: "auto",

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

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

package/dist/index.d.ts

@@ -1089,7 +1089,9 @@ interface LiveNowTimerState extends SceneObjectState {
 declare class LiveNowTimer extends SceneObjectBase<LiveNowTimerState> {
     private timerId;
     private static REFRESH_RATE;
-    constructor(enabled?: boolean);
+    constructor({ enabled }: {
+        enabled?: boolean | undefined;
+    });
     private _activationHandler;
     enable(): void;
     disable(): void;
@@ -1691,8 +1693,6 @@ declare function SceneTimePickerRenderer({ model }: SceneComponentProps<SceneTim
 
 interface SceneRefreshPickerState extends SceneObjectState {
     refresh: string;
-    autoEnabled?: boolean;
-    autoMinInterval?: string;
     intervals?: string[];
     isOnCanvas?: boolean;
     primary?: boolean;
@@ -1702,7 +1702,6 @@ declare class SceneRefreshPicker extends SceneObjectBase<SceneRefreshPickerState
     static Component: typeof SceneRefreshPickerRenderer;
     protected _urlSync: SceneObjectUrlSyncConfig;
     private _intervalTimer;
-    private _timeRangeListener;
     constructor(state: Partial<SceneRefreshPickerState>);
     onRefresh: () => void;
     onIntervalChanged: (interval: string) => void;
@@ -1710,8 +1709,6 @@ declare class SceneRefreshPicker extends SceneObjectBase<SceneRefreshPickerState
         refresh: string;
     };
     updateFromUrl(values: SceneObjectUrlValues): void;
-    private setupTimeRangeListener;
-    private calculateAutoRefreshInterval;
     private setupIntervalTimer;
 }
 declare function SceneRefreshPickerRenderer({ model }: SceneComponentProps<SceneRefreshPicker>): JSX.Element;

package/dist/index.js

@@ -3032,7 +3032,7 @@ function getPanelPluginNotFound(id) {
 }
 
 const _LiveNowTimer = class extends SceneObjectBase {
-  constructor(enabled = false) {
+  constructor({ enabled = false }) {
     super({ enabled });
     this.timerId = void 0;
     this._activationHandler = () => {
@@ -4913,6 +4913,7 @@ function AdHocFilterRenderer({ filter, model }) {
   }, [filter.key, model.state.defaultKeys]);
   const valueValue = filter.value !== "" ? data.toOption(filter.value) : null;
   const valueSelect = /* @__PURE__ */ React__default["default"].createElement(ui.Select, {
+    allowCustomValue: true,
     disabled: model.state.readOnly,
     className: state.isKeysOpen ? styles.widthWhenOpen : void 0,
     width: "auto",
@@ -8470,20 +8471,14 @@ var __spreadValues$5 = (a, b) => {
   return a;
 };
 var __spreadProps$2 = (a, b) => __defProps$2(a, __getOwnPropDescs$2(b));
-const AUTO_REFRESH_INTERVAL = "auto";
 const DEFAULT_INTERVALS = ["5s", "10s", "30s", "1m", "5m", "15m", "30m", "1h", "2h", "1d"];
 class SceneRefreshPicker extends SceneObjectBase {
   constructor(state) {
-    var _a, _b, _c;
-    const autoEnabled = (_a = state.autoEnabled) != null ? _a : true;
-    let intervals = (_b = state.intervals) != null ? _b : DEFAULT_INTERVALS;
-    intervals = autoEnabled ? [AUTO_REFRESH_INTERVAL, ...intervals] : intervals;
+    var _a;
     super(__spreadProps$2(__spreadValues$5({
       refresh: ""
     }, state), {
-      autoEnabled,
-      autoMinInterval: (_c = state.autoMinInterval) != null ? _c : runtime.config.minRefreshInterval,
-      intervals
+      intervals: (_a = state.intervals) != null ? _a : DEFAULT_INTERVALS
     }));
     this._urlSync = new SceneObjectUrlSyncConfig(this, { keys: ["refresh"] });
     this.onRefresh = () => {
@@ -8503,24 +8498,7 @@ class SceneRefreshPicker extends SceneObjectBase {
       this.setState({ refresh: interval });
       this.setupIntervalTimer();
     };
-    this.setupTimeRangeListener = () => {
-      return sceneGraph.getTimeRange(this).subscribeToState((newState, prevState) => {
-        const newDiff = newState.value.to.valueOf() - newState.value.from.valueOf();
-        const prevDiff = prevState.value.to.valueOf() - prevState.value.from.valueOf();
-        if (newDiff !== prevDiff) {
-          this.setupIntervalTimer();
-        }
-      });
-    };
-    this.calculateAutoRefreshInterval = () => {
-      var _a;
-      const timeRange = sceneGraph.getTimeRange(this);
-      const resolution = (_a = window == null ? void 0 : window.innerWidth) != null ? _a : 2e3;
-      const { intervalMs } = data.rangeUtil.calculateInterval(timeRange.state.value, resolution, this.state.autoMinInterval);
-      return intervalMs;
-    };
     this.setupIntervalTimer = () => {
-      var _a;
       const timeRange = sceneGraph.getTimeRange(this);
       const { refresh, intervals } = this.state;
       if (this._intervalTimer || refresh === "") {
@@ -8532,15 +8510,7 @@ class SceneRefreshPicker extends SceneObjectBase {
       if (intervals && !intervals.includes(refresh)) {
         return;
       }
-      let intervalMs;
-      if (refresh === AUTO_REFRESH_INTERVAL) {
-        intervalMs = this.calculateAutoRefreshInterval();
-        this._timeRangeListener = this.setupTimeRangeListener();
-      } else {
-        intervalMs = data.rangeUtil.intervalToMs(refresh);
-        (_a = this._timeRangeListener) == null ? void 0 : _a.unsubscribe();
-        this._timeRangeListener = void 0;
-      }
+      const intervalMs = data.rangeUtil.intervalToMs(refresh);
       this._intervalTimer = setInterval(() => {
         timeRange.onRefresh();
       }, intervalMs);
@@ -8548,11 +8518,9 @@ class SceneRefreshPicker extends SceneObjectBase {
     this.addActivationHandler(() => {
       this.setupIntervalTimer();
       return () => {
-        var _a2;
         if (this._intervalTimer) {
           clearInterval(this._intervalTimer);
         }
-        (_a2 = this._timeRangeListener) == null ? void 0 : _a2.unsubscribe();
       };
     });
   }