@grafana/scenes 6.26.2--canary.1173.16026799419.0 → 6.27.1

package/dist/index.d.ts

@@ -1062,7 +1062,7 @@ declare abstract class MultiValueVariable<TState extends MultiValueVariableState
      * This function can intercept and make sure those values are preserved.
      */
     protected interceptStateUpdateAfterValidation(stateUpdate: Partial<MultiValueVariableState>): void;
-    getValue(): VariableValue;
+    getValue(fieldPath?: string): VariableValue;
     getValueText(): string;
     hasAllValue(): boolean;
     getDefaultMultiState(options: VariableValueOption[]): {
@@ -1166,6 +1166,8 @@ interface QueryVariableState extends MultiValueVariableState {
     regex: string;
     refresh: VariableRefresh$1;
     sort: VariableSort;
+    staticOptions?: VariableValueOption[];
+    staticOptionsOrder?: 'before' | 'after' | 'sorted';
     /** @internal Only for use inside core dashboards */
     definition?: string;
 }

package/dist/index.js

@@ -1835,14 +1835,21 @@ class MultiValueVariable extends SceneObjectBase {
     }
     this.skipNextValidation = false;
   }
-  getValue() {
+  getValue(fieldPath) {
+    let value = this.state.value;
     if (this.hasAllValue()) {
       if (this.state.allValue) {
         return new CustomAllValue(this.state.allValue, this);
       }
-      return this.state.options.map((x) => x.value);
+      value = this.state.options.map((x) => x.value);
     }
-    return this.state.value;
+    if (fieldPath != null && Array.isArray(value)) {
+      const index = parseInt(fieldPath, 10);
+      if (!isNaN(index) && index >= 0 && index < value.length) {
+        return value[index];
+      }
+    }
+    return value;
   }
   getValueText() {
     if (this.hasAllValue()) {
@@ -7354,7 +7361,19 @@ class QueryVariable extends MultiValueVariable {
             if (this.state.regex) {
               regex = sceneGraph.interpolate(this, this.state.regex, void 0, "regex");
             }
-            return rxjs.of(metricNamesToVariableValues(regex, this.state.sort, values));
+            let options = metricNamesToVariableValues(regex, this.state.sort, values);
+            if (this.state.staticOptions) {
+              const customOptions = this.state.staticOptions;
+              options = options.filter((option) => !customOptions.find((custom) => custom.value === option.value));
+              if (this.state.staticOptionsOrder === "after") {
+                options.push(...customOptions);
+              } else if (this.state.staticOptionsOrder === "sorted") {
+                options = sortVariableValues(options.concat(customOptions), this.state.sort);
+              } else {
+                options.unshift(...customOptions);
+              }
+            }
+            return rxjs.of(options);
           }),
           rxjs.catchError((error) => {
             if (error.cancelled) {
@@ -8095,7 +8114,7 @@ function VizPanelRenderer({ model }) {
         timeZone,
         options,
         fieldConfig,
-        transparent: false,
+        transparent: displayMode === "transparent",
         width: innerWidth,
         height: innerHeight,
         renderCounter: _renderCounter,
@@ -8378,253 +8397,6 @@ const createProperty = (color) => {
   };
 };
 
-class SceneDataLayerSetBase extends SceneObjectBase {
-  constructor() {
-    super(...arguments);
-    /** Mark it as a data layer */
-    this.isDataLayer = true;
-    /**
-     * Subject to emit results to.
-     */
-    this._results = new rxjs.ReplaySubject(1);
-    this._dataLayersMerger = new DataLayersMerger();
-  }
-  subscribeToAllLayers(layers) {
-    if (layers.length > 0) {
-      this.querySub = this._dataLayersMerger.getMergedStream(layers).subscribe(this._onLayerUpdateReceived.bind(this));
-    } else {
-      this._results.next({ origin: this, data: emptyPanelData });
-      this.setStateHelper({ data: emptyPanelData });
-    }
-  }
-  _onLayerUpdateReceived(results) {
-    var _a;
-    let series = [];
-    for (const result of results) {
-      if ((_a = result.data) == null ? void 0 : _a.series) {
-        series = series.concat(result.data.series);
-      }
-    }
-    const combinedData = { ...emptyPanelData, series };
-    this._results.next({ origin: this, data: combinedData });
-    this.setStateHelper({ data: combinedData });
-  }
-  getResultsStream() {
-    return this._results;
-  }
-  cancelQuery() {
-    var _a;
-    (_a = this.querySub) == null ? void 0 : _a.unsubscribe();
-  }
-  /**
-   * This helper function is to counter the contravariance of setState
-   */
-  setStateHelper(state) {
-    setBaseClassState(this, state);
-  }
-}
-class SceneDataLayerSet extends SceneDataLayerSetBase {
-  constructor(state) {
-    var _a, _b;
-    super({
-      name: (_a = state.name) != null ? _a : "Data layers",
-      layers: (_b = state.layers) != null ? _b : []
-    });
-    this.addActivationHandler(() => this._onActivate());
-  }
-  _onActivate() {
-    this._subs.add(
-      this.subscribeToState((newState, oldState) => {
-        var _a;
-        if (newState.layers !== oldState.layers) {
-          (_a = this.querySub) == null ? void 0 : _a.unsubscribe();
-          this.subscribeToAllLayers(newState.layers);
-        }
-      })
-    );
-    this.subscribeToAllLayers(this.state.layers);
-    return () => {
-      var _a;
-      (_a = this.querySub) == null ? void 0 : _a.unsubscribe();
-    };
-  }
-}
-SceneDataLayerSet.Component = ({ model }) => {
-  const { layers } = model.useState();
-  return /* @__PURE__ */ React__default.default.createElement(React__default.default.Fragment, null, layers.map((layer) => /* @__PURE__ */ React__default.default.createElement(layer.Component, { model: layer, key: layer.state.key })));
-};
-
-class SceneDataTransformer extends SceneObjectBase {
-  constructor(state) {
-    super(state);
-    this._results = new rxjs.ReplaySubject(1);
-    /**
-     * Scan transformations for variable usage and re-process transforms when a variable values change
-     */
-    this._variableDependency = new VariableDependencyConfig(
-      this,
-      {
-        statePaths: ["transformations"],
-        onReferencedVariableValueChanged: () => this.reprocessTransformations()
-      }
-    );
-    this.addActivationHandler(() => this.activationHandler());
-  }
-  activationHandler() {
-    const sourceData = this.getSourceData();
-    this._subs.add(sourceData.subscribeToState((state) => this.transform(state.data)));
-    if (sourceData.state.data) {
-      this.transform(sourceData.state.data);
-    }
-    return () => {
-      if (this._transformSub) {
-        this._transformSub.unsubscribe();
-      }
-    };
-  }
-  getSourceData() {
-    if (this.state.$data) {
-      if (this.state.$data instanceof SceneDataLayerSet) {
-        throw new Error("SceneDataLayerSet can not be used as data provider for SceneDataTransformer.");
-      }
-      return this.state.$data;
-    }
-    if (!this.parent || !this.parent.parent) {
-      throw new Error("SceneDataTransformer must either have $data set on it or have a parent.parent with $data");
-    }
-    return sceneGraph.getData(this.parent.parent);
-  }
-  setContainerWidth(width) {
-    if (this.state.$data && this.state.$data.setContainerWidth) {
-      this.state.$data.setContainerWidth(width);
-    }
-  }
-  isDataReadyToDisplay() {
-    const dataObject = this.getSourceData();
-    if (dataObject.isDataReadyToDisplay) {
-      return dataObject.isDataReadyToDisplay();
-    }
-    return true;
-  }
-  reprocessTransformations() {
-    this.transform(this.getSourceData().state.data, true);
-  }
-  cancelQuery() {
-    var _a, _b;
-    (_b = (_a = this.getSourceData()).cancelQuery) == null ? void 0 : _b.call(_a);
-  }
-  getResultsStream() {
-    return this._results;
-  }
-  clone(withState) {
-    const clone = super.clone(withState);
-    if (this._prevDataFromSource) {
-      clone["_prevDataFromSource"] = this._prevDataFromSource;
-    }
-    return clone;
-  }
-  haveAlreadyTransformedData(data) {
-    if (!this._prevDataFromSource) {
-      return false;
-    }
-    if (data === this._prevDataFromSource) {
-      return true;
-    }
-    const { series, annotations } = this._prevDataFromSource;
-    if (data.series === series && data.annotations === annotations) {
-      if (this.state.data && data.state !== this.state.data.state) {
-        this.setState({ data: { ...this.state.data, state: data.state } });
-      }
-      return true;
-    }
-    return false;
-  }
-  transform(data$1, force = false) {
-    var _a;
-    if (this.state.transformations.length === 0 || !data$1) {
-      this._prevDataFromSource = data$1;
-      this.setState({ data: data$1 });
-      if (data$1) {
-        this._results.next({ origin: this, data: data$1 });
-      }
-      return;
-    }
-    if (!force && this.haveAlreadyTransformedData(data$1)) {
-      return;
-    }
-    let interpolatedTransformations = this._interpolateVariablesInTransformationConfigs(data$1);
-    const seriesTransformations = interpolatedTransformations.filter((transformation) => {
-      if ("options" in transformation || "topic" in transformation) {
-        return transformation.topic == null || transformation.topic === data.DataTopic.Series;
-      }
-      return true;
-    }).map((transformation) => "operator" in transformation ? transformation.operator : transformation);
-    const annotationsTransformations = interpolatedTransformations.filter((transformation) => {
-      if ("options" in transformation || "topic" in transformation) {
-        return transformation.topic === data.DataTopic.Annotations;
-      }
-      return false;
-    }).map((transformation) => "operator" in transformation ? transformation.operator : transformation);
-    if (this._transformSub) {
-      this._transformSub.unsubscribe();
-    }
-    const ctx = {
-      interpolate: (value) => {
-        var _a2;
-        return sceneGraph.interpolate(this, value, (_a2 = data$1.request) == null ? void 0 : _a2.scopedVars);
-      }
-    };
-    let streams = [data.transformDataFrame(seriesTransformations, data$1.series, ctx)];
-    if (data$1.annotations && data$1.annotations.length > 0 && annotationsTransformations.length > 0) {
-      streams.push(data.transformDataFrame(annotationsTransformations, (_a = data$1.annotations) != null ? _a : []));
-    }
-    this._transformSub = rxjs.forkJoin(streams).pipe(
-      rxjs.map((values) => {
-        const transformedSeries = values[0];
-        const transformedAnnotations = values[1];
-        return {
-          ...data$1,
-          series: transformedSeries,
-          annotations: transformedAnnotations != null ? transformedAnnotations : data$1.annotations
-        };
-      }),
-      rxjs.catchError((err) => {
-        var _a2;
-        console.error("Error transforming data: ", err);
-        const sourceErr = ((_a2 = this.getSourceData().state.data) == null ? void 0 : _a2.errors) || [];
-        const transformationError = runtime.toDataQueryError(err);
-        transformationError.message = `Error transforming data: ${transformationError.message}`;
-        const result = {
-          ...data$1,
-          state: data.LoadingState.Error,
-          // Combine transformation error with upstream errors
-          errors: [...sourceErr, transformationError]
-        };
-        return rxjs.of(result);
-      })
-    ).subscribe((transformedData) => {
-      this.setState({ data: transformedData });
-      this._results.next({ origin: this, data: transformedData });
-      this._prevDataFromSource = data$1;
-    });
-  }
-  _interpolateVariablesInTransformationConfigs(data) {
-    var _a;
-    const transformations = this.state.transformations;
-    if (this._variableDependency.getNames().size === 0) {
-      return transformations;
-    }
-    const onlyObjects = transformations.every((t) => typeof t === "object");
-    if (onlyObjects) {
-      return JSON.parse(sceneGraph.interpolate(this, JSON.stringify(transformations), (_a = data.request) == null ? void 0 : _a.scopedVars));
-    }
-    return transformations.map((t) => {
-      var _a2;
-      return typeof t === "object" ? JSON.parse(sceneGraph.interpolate(this, JSON.stringify(t), (_a2 = data.request) == null ? void 0 : _a2.scopedVars)) : t;
-    });
-  }
-}
-
 class VizPanel extends SceneObjectBase {
   constructor(state) {
     var _a;
@@ -8863,18 +8635,6 @@ class VizPanel extends SceneObjectBase {
     if (plugin.onPanelMigration && currentVersion !== pluginVersion && !isAfterPluginChange) {
       panel.options = await plugin.onPanelMigration(panel);
     }
-    let $data = this.state.$data;
-    if (panel.transformations && $data) {
-      if ($data instanceof SceneDataTransformer) {
-        $data.setState({ transformations: panel.transformations });
-      } else if ($data instanceof SceneQueryRunner) {
-        $data.clearParent();
-        $data = new SceneDataTransformer({
-          transformations: panel.transformations,
-          $data
-        });
-      }
-    }
     const withDefaults = data.getPanelOptionsWithDefaults({
       plugin,
       currentOptions: panel.options,
@@ -8883,7 +8643,6 @@ class VizPanel extends SceneObjectBase {
     });
     this._plugin = plugin;
     this.setState({
-      $data,
       options: withDefaults.options,
       fieldConfig: withDefaults.fieldConfig,
       pluginVersion: currentVersion,
@@ -9783,6 +9542,253 @@ class DataProviderProxy extends SceneObjectBase {
   }
 }
 
+class SceneDataLayerSetBase extends SceneObjectBase {
+  constructor() {
+    super(...arguments);
+    /** Mark it as a data layer */
+    this.isDataLayer = true;
+    /**
+     * Subject to emit results to.
+     */
+    this._results = new rxjs.ReplaySubject(1);
+    this._dataLayersMerger = new DataLayersMerger();
+  }
+  subscribeToAllLayers(layers) {
+    if (layers.length > 0) {
+      this.querySub = this._dataLayersMerger.getMergedStream(layers).subscribe(this._onLayerUpdateReceived.bind(this));
+    } else {
+      this._results.next({ origin: this, data: emptyPanelData });
+      this.setStateHelper({ data: emptyPanelData });
+    }
+  }
+  _onLayerUpdateReceived(results) {
+    var _a;
+    let series = [];
+    for (const result of results) {
+      if ((_a = result.data) == null ? void 0 : _a.series) {
+        series = series.concat(result.data.series);
+      }
+    }
+    const combinedData = { ...emptyPanelData, series };
+    this._results.next({ origin: this, data: combinedData });
+    this.setStateHelper({ data: combinedData });
+  }
+  getResultsStream() {
+    return this._results;
+  }
+  cancelQuery() {
+    var _a;
+    (_a = this.querySub) == null ? void 0 : _a.unsubscribe();
+  }
+  /**
+   * This helper function is to counter the contravariance of setState
+   */
+  setStateHelper(state) {
+    setBaseClassState(this, state);
+  }
+}
+class SceneDataLayerSet extends SceneDataLayerSetBase {
+  constructor(state) {
+    var _a, _b;
+    super({
+      name: (_a = state.name) != null ? _a : "Data layers",
+      layers: (_b = state.layers) != null ? _b : []
+    });
+    this.addActivationHandler(() => this._onActivate());
+  }
+  _onActivate() {
+    this._subs.add(
+      this.subscribeToState((newState, oldState) => {
+        var _a;
+        if (newState.layers !== oldState.layers) {
+          (_a = this.querySub) == null ? void 0 : _a.unsubscribe();
+          this.subscribeToAllLayers(newState.layers);
+        }
+      })
+    );
+    this.subscribeToAllLayers(this.state.layers);
+    return () => {
+      var _a;
+      (_a = this.querySub) == null ? void 0 : _a.unsubscribe();
+    };
+  }
+}
+SceneDataLayerSet.Component = ({ model }) => {
+  const { layers } = model.useState();
+  return /* @__PURE__ */ React__default.default.createElement(React__default.default.Fragment, null, layers.map((layer) => /* @__PURE__ */ React__default.default.createElement(layer.Component, { model: layer, key: layer.state.key })));
+};
+
+class SceneDataTransformer extends SceneObjectBase {
+  constructor(state) {
+    super(state);
+    this._results = new rxjs.ReplaySubject(1);
+    /**
+     * Scan transformations for variable usage and re-process transforms when a variable values change
+     */
+    this._variableDependency = new VariableDependencyConfig(
+      this,
+      {
+        statePaths: ["transformations"],
+        onReferencedVariableValueChanged: () => this.reprocessTransformations()
+      }
+    );
+    this.addActivationHandler(() => this.activationHandler());
+  }
+  activationHandler() {
+    const sourceData = this.getSourceData();
+    this._subs.add(sourceData.subscribeToState((state) => this.transform(state.data)));
+    if (sourceData.state.data) {
+      this.transform(sourceData.state.data);
+    }
+    return () => {
+      if (this._transformSub) {
+        this._transformSub.unsubscribe();
+      }
+    };
+  }
+  getSourceData() {
+    if (this.state.$data) {
+      if (this.state.$data instanceof SceneDataLayerSet) {
+        throw new Error("SceneDataLayerSet can not be used as data provider for SceneDataTransformer.");
+      }
+      return this.state.$data;
+    }
+    if (!this.parent || !this.parent.parent) {
+      throw new Error("SceneDataTransformer must either have $data set on it or have a parent.parent with $data");
+    }
+    return sceneGraph.getData(this.parent.parent);
+  }
+  setContainerWidth(width) {
+    if (this.state.$data && this.state.$data.setContainerWidth) {
+      this.state.$data.setContainerWidth(width);
+    }
+  }
+  isDataReadyToDisplay() {
+    const dataObject = this.getSourceData();
+    if (dataObject.isDataReadyToDisplay) {
+      return dataObject.isDataReadyToDisplay();
+    }
+    return true;
+  }
+  reprocessTransformations() {
+    this.transform(this.getSourceData().state.data, true);
+  }
+  cancelQuery() {
+    var _a, _b;
+    (_b = (_a = this.getSourceData()).cancelQuery) == null ? void 0 : _b.call(_a);
+  }
+  getResultsStream() {
+    return this._results;
+  }
+  clone(withState) {
+    const clone = super.clone(withState);
+    if (this._prevDataFromSource) {
+      clone["_prevDataFromSource"] = this._prevDataFromSource;
+    }
+    return clone;
+  }
+  haveAlreadyTransformedData(data) {
+    if (!this._prevDataFromSource) {
+      return false;
+    }
+    if (data === this._prevDataFromSource) {
+      return true;
+    }
+    const { series, annotations } = this._prevDataFromSource;
+    if (data.series === series && data.annotations === annotations) {
+      if (this.state.data && data.state !== this.state.data.state) {
+        this.setState({ data: { ...this.state.data, state: data.state } });
+      }
+      return true;
+    }
+    return false;
+  }
+  transform(data$1, force = false) {
+    var _a;
+    if (this.state.transformations.length === 0 || !data$1) {
+      this._prevDataFromSource = data$1;
+      this.setState({ data: data$1 });
+      if (data$1) {
+        this._results.next({ origin: this, data: data$1 });
+      }
+      return;
+    }
+    if (!force && this.haveAlreadyTransformedData(data$1)) {
+      return;
+    }
+    let interpolatedTransformations = this._interpolateVariablesInTransformationConfigs(data$1);
+    const seriesTransformations = interpolatedTransformations.filter((transformation) => {
+      if ("options" in transformation || "topic" in transformation) {
+        return transformation.topic == null || transformation.topic === data.DataTopic.Series;
+      }
+      return true;
+    }).map((transformation) => "operator" in transformation ? transformation.operator : transformation);
+    const annotationsTransformations = interpolatedTransformations.filter((transformation) => {
+      if ("options" in transformation || "topic" in transformation) {
+        return transformation.topic === data.DataTopic.Annotations;
+      }
+      return false;
+    }).map((transformation) => "operator" in transformation ? transformation.operator : transformation);
+    if (this._transformSub) {
+      this._transformSub.unsubscribe();
+    }
+    const ctx = {
+      interpolate: (value) => {
+        var _a2;
+        return sceneGraph.interpolate(this, value, (_a2 = data$1.request) == null ? void 0 : _a2.scopedVars);
+      }
+    };
+    let streams = [data.transformDataFrame(seriesTransformations, data$1.series, ctx)];
+    if (data$1.annotations && data$1.annotations.length > 0 && annotationsTransformations.length > 0) {
+      streams.push(data.transformDataFrame(annotationsTransformations, (_a = data$1.annotations) != null ? _a : []));
+    }
+    this._transformSub = rxjs.forkJoin(streams).pipe(
+      rxjs.map((values) => {
+        const transformedSeries = values[0];
+        const transformedAnnotations = values[1];
+        return {
+          ...data$1,
+          series: transformedSeries,
+          annotations: transformedAnnotations != null ? transformedAnnotations : data$1.annotations
+        };
+      }),
+      rxjs.catchError((err) => {
+        var _a2;
+        console.error("Error transforming data: ", err);
+        const sourceErr = ((_a2 = this.getSourceData().state.data) == null ? void 0 : _a2.errors) || [];
+        const transformationError = runtime.toDataQueryError(err);
+        transformationError.message = `Error transforming data: ${transformationError.message}`;
+        const result = {
+          ...data$1,
+          state: data.LoadingState.Error,
+          // Combine transformation error with upstream errors
+          errors: [...sourceErr, transformationError]
+        };
+        return rxjs.of(result);
+      })
+    ).subscribe((transformedData) => {
+      this.setState({ data: transformedData });
+      this._results.next({ origin: this, data: transformedData });
+      this._prevDataFromSource = data$1;
+    });
+  }
+  _interpolateVariablesInTransformationConfigs(data) {
+    var _a;
+    const transformations = this.state.transformations;
+    if (this._variableDependency.getNames().size === 0) {
+      return transformations;
+    }
+    const onlyObjects = transformations.every((t) => typeof t === "object");
+    if (onlyObjects) {
+      return JSON.parse(sceneGraph.interpolate(this, JSON.stringify(transformations), (_a = data.request) == null ? void 0 : _a.scopedVars));
+    }
+    return transformations.map((t) => {
+      var _a2;
+      return typeof t === "object" ? JSON.parse(sceneGraph.interpolate(this, JSON.stringify(t), (_a2 = data.request) == null ? void 0 : _a2.scopedVars)) : t;
+    });
+  }
+}
+
 class VariableValueSelectors extends SceneObjectBase {
 }
 VariableValueSelectors.Component = VariableValueSelectorsRenderer;