@grafana/scenes 3.14.0 → 3.14.1--canary.655.8371909776.0

package/dist/index.js

@@ -13,8 +13,8 @@ var schema = require('@grafana/schema');
 var reactUse = require('react-use');
 var ui = require('@grafana/ui');
 var css = require('@emotion/css');
-var operators = require('rxjs/operators');
 var e2eSelectors = require('@grafana/e2e-selectors');
+var operators = require('rxjs/operators');
 var ReactGridLayout = require('react-grid-layout');
 var AutoSizer = require('react-virtualized-auto-sizer');
 var BarChartPanelCfg_types_gen = require('@grafana/schema/dist/esm/raw/composable/barchart/panelcfg/x/BarChartPanelCfg_types.gen');
@@ -1357,21 +1357,14 @@ function formatValue(variable, value, formatNameOrFn) {
   return formatter.formatter(value, args, variable);
 }
 
-class SceneDataLayers extends SceneObjectBase {
-  constructor(state) {
-    super(state);
-    this.addActivationHandler(() => this._onActivate());
-  }
-  _onActivate() {
-    const { layers } = this.state;
-    const deactivationHandlers = [];
-    for (const layer of layers) {
-      deactivationHandlers.push(layer.activate());
-    }
-    return () => {
-      deactivationHandlers.forEach((handler) => handler());
-    };
-  }
+function isSceneObject(obj) {
+  return obj.useState !== void 0;
+}
+function isDataRequestEnricher(obj) {
+  return "enrichDataRequest" in obj;
+}
+function isDataLayer(obj) {
+  return "isDataLayer" in obj;
 }
 
 var __accessCheck = (obj, member, msg) => {
@@ -1506,25 +1499,25 @@ function findAllObjects(scene, check) {
   return found;
 }
 function getDataLayers(sceneObject, localOnly = false) {
-  let parent = sceneObject;
+  let currentLevel = sceneObject;
   let collected = [];
-  let source;
-  while (parent) {
-    if (parent.state.$data && !(parent.state.$data instanceof SceneDataLayers)) {
-      if (parent.state.$data.state.$data instanceof SceneDataLayers) {
-        source = parent.state.$data.state.$data;
-      }
-    }
-    if (parent.state.$data && parent.state.$data instanceof SceneDataLayers) {
-      source = parent.state.$data;
+  while (currentLevel) {
+    const dataProvider = currentLevel.state.$data;
+    if (!dataProvider) {
+      currentLevel = currentLevel.parent;
+      continue;
     }
-    if (source) {
-      collected = collected.concat(source.state.layers);
-      if (localOnly) {
-        break;
+    if (isDataLayer(dataProvider)) {
+      collected = collected.concat(dataProvider);
+    } else {
+      if (dataProvider.state.$data && isDataLayer(dataProvider.state.$data)) {
+        collected = collected.concat(dataProvider.state.$data);
       }
     }
-    parent = parent.parent;
+    if (localOnly && collected.length > 0) {
+      break;
+    }
+    currentLevel = currentLevel.parent;
   }
   return collected;
 }
@@ -2047,13 +2040,6 @@ function isGroupByVariable(variable) {
   return variable.state.type === "groupby";
 }
 
-function isSceneObject(obj) {
-  return obj.useState !== void 0;
-}
-function isDataRequestEnricher(obj) {
-  return "enrichDataRequest" in obj;
-}
-
 const sceneGraph = {
   getVariables,
   getData,
@@ -3242,6 +3228,7 @@ class SceneDataLayerBase extends SceneObjectBase {
       isEnabled: true
     }, initialState));
     this._results = new rxjs.ReplaySubject();
+    this.isDataLayer = true;
     this._variableValueRecorder = new VariableValueRecorder();
     this._variableDependency = new VariableDependencyConfig(this, {
       onVariableUpdateCompleted: this.onVariableUpdateCompleted.bind(this)
@@ -3261,14 +3248,8 @@ class SceneDataLayerBase extends SceneObjectBase {
         this.querySub.unsubscribe();
         this.querySub = void 0;
         this.onDisable();
-        this._results.next({
-          origin: this,
-          data: emptyPanelData,
-          topic: this.topic
-        });
-        this.setStateHelper({
-          data: emptyPanelData
-        });
+        this._results.next({ origin: this, data: emptyPanelData });
+        this.setStateHelper({ data: emptyPanelData });
       }
       if (n.isEnabled && !p.isEnabled) {
         this.onEnable();
@@ -3294,19 +3275,13 @@ class SceneDataLayerBase extends SceneObjectBase {
     if (this.querySub) {
       this.querySub.unsubscribe();
       this.querySub = void 0;
-      this.publishResults(emptyPanelData, this.topic);
+      this.publishResults(emptyPanelData);
     }
   }
-  publishResults(data, topic) {
+  publishResults(data) {
     if (this.state.isEnabled) {
-      this._results.next({
-        origin: this,
-        data,
-        topic
-      });
-      this.setStateHelper({
-        data
-      });
+      this._results.next({ origin: this, data });
+      this.setStateHelper({ data });
     }
   }
   getResultsStream() {
@@ -3333,6 +3308,156 @@ class SceneDataLayerBase extends SceneObjectBase {
   }
 }
 
+function LoadingIndicator(props) {
+  return /* @__PURE__ */ React__default["default"].createElement(ui.Tooltip, {
+    content: "Cancel query"
+  }, /* @__PURE__ */ React__default["default"].createElement(ui.Icon, {
+    className: "spin-clockwise",
+    name: "sync",
+    size: "xs",
+    role: "button",
+    onMouseDown: (e) => {
+      props.onCancel(e);
+    }
+  }));
+}
+
+function ControlsLabel(props) {
+  const styles = ui.useStyles2(getStyles$9);
+  const theme = ui.useTheme2();
+  const isVertical = props.layout === "vertical";
+  const loadingIndicator = Boolean(props.isLoading) ? /* @__PURE__ */ React__default["default"].createElement("div", {
+    style: { marginLeft: theme.spacing(1), marginTop: "-1px" },
+    "aria-label": e2eSelectors.selectors.components.LoadingIndicator.icon
+  }, /* @__PURE__ */ React__default["default"].createElement(LoadingIndicator, {
+    onCancel: (e) => {
+      var _a;
+      e.preventDefault();
+      e.stopPropagation();
+      (_a = props.onCancel) == null ? void 0 : _a.call(props);
+    }
+  })) : null;
+  let errorIndicator = null;
+  if (props.error) {
+    errorIndicator = /* @__PURE__ */ React__default["default"].createElement(ui.Tooltip, {
+      content: props.error,
+      placement: "bottom"
+    }, /* @__PURE__ */ React__default["default"].createElement(ui.Icon, {
+      className: styles.errorIcon,
+      name: "exclamation-triangle"
+    }));
+  }
+  const testId = typeof props.label === "string" ? e2eSelectors.selectors.pages.Dashboard.SubMenu.submenuItemLabels(props.label) : "";
+  let labelElement;
+  if (isVertical) {
+    labelElement = /* @__PURE__ */ React__default["default"].createElement("label", {
+      className: styles.verticalLabel,
+      "data-testid": testId,
+      htmlFor: props.htmlFor
+    }, props.label, errorIndicator, props.icon && /* @__PURE__ */ React__default["default"].createElement(ui.Icon, {
+      name: props.icon,
+      className: styles.normalIcon
+    }), loadingIndicator, props.onRemove && /* @__PURE__ */ React__default["default"].createElement(ui.IconButton, {
+      variant: "secondary",
+      size: "xs",
+      name: "times",
+      onClick: props.onRemove,
+      tooltip: "Remove"
+    }));
+  } else {
+    labelElement = /* @__PURE__ */ React__default["default"].createElement("label", {
+      className: styles.horizontalLabel,
+      "data-testid": testId,
+      htmlFor: props.htmlFor
+    }, errorIndicator, props.icon && /* @__PURE__ */ React__default["default"].createElement(ui.Icon, {
+      name: props.icon,
+      className: styles.normalIcon
+    }), props.label, loadingIndicator);
+  }
+  if (props.description) {
+    return /* @__PURE__ */ React__default["default"].createElement(ui.Tooltip, {
+      content: props.description,
+      placement: isVertical ? "top" : "bottom"
+    }, labelElement);
+  }
+  return labelElement;
+}
+const getStyles$9 = (theme) => ({
+  horizontalLabel: css.css({
+    background: theme.isDark ? theme.colors.background.primary : theme.colors.background.secondary,
+    display: `flex`,
+    alignItems: "center",
+    padding: theme.spacing(0, 1),
+    fontWeight: theme.typography.fontWeightMedium,
+    fontSize: theme.typography.bodySmall.fontSize,
+    height: theme.spacing(theme.components.height.md),
+    lineHeight: theme.spacing(theme.components.height.md),
+    borderRadius: theme.shape.borderRadius(1),
+    border: `1px solid ${theme.components.input.borderColor}`,
+    position: "relative",
+    right: -1,
+    whiteSpace: "nowrap",
+    gap: theme.spacing(0.5)
+  }),
+  verticalLabel: css.css({
+    display: `flex`,
+    alignItems: "center",
+    fontWeight: theme.typography.fontWeightMedium,
+    fontSize: theme.typography.bodySmall.fontSize,
+    lineHeight: theme.typography.bodySmall.lineHeight,
+    whiteSpace: "nowrap",
+    marginBottom: theme.spacing(0.5),
+    gap: theme.spacing(1)
+  }),
+  errorIcon: css.css({
+    color: theme.colors.error.text
+  }),
+  normalIcon: css.css({
+    color: theme.colors.text.secondary
+  })
+});
+
+class SceneDataLayerControls extends SceneObjectBase {
+  constructor() {
+    super({});
+  }
+}
+SceneDataLayerControls.Component = SceneDataLayerControlsRenderer;
+function SceneDataLayerControlsRenderer({ model }) {
+  const layers = sceneGraph.getDataLayers(model, true);
+  if (layers.length === 0) {
+    return null;
+  }
+  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
+  })));
+}
+function DataLayerControlSwitch({ layer }) {
+  var _a, _b;
+  const elementId = `data-layer-${layer.state.key}`;
+  const { data, isEnabled } = layer.useState();
+  const showLoading = Boolean(data && data.state === schema.LoadingState.Loading);
+  return /* @__PURE__ */ React__default["default"].createElement("div", {
+    className: containerStyle$1
+  }, /* @__PURE__ */ React__default["default"].createElement(ControlsLabel, {
+    htmlFor: elementId,
+    isLoading: showLoading,
+    onCancel: () => {
+      var _a2;
+      return (_a2 = layer.cancelQuery) == null ? void 0 : _a2.call(layer);
+    },
+    label: layer.state.name,
+    description: layer.state.description,
+    error: (_b = (_a = layer.state.data) == null ? void 0 : _a.errors) == null ? void 0 : _b[0].message
+  }), /* @__PURE__ */ React__default["default"].createElement(ui.InlineSwitch, {
+    id: elementId,
+    value: isEnabled,
+    onChange: () => layer.setState({ isEnabled: !isEnabled })
+  }));
+}
+const containerStyle$1 = css.css({ display: "flex" });
+
 var __defProp$w = Object.defineProperty;
 var __defProps$k = Object.defineProperties;
 var __getOwnPropDescs$k = Object.getOwnPropertyDescriptors;
@@ -3752,7 +3877,6 @@ class AnnotationsDataLayer extends SceneDataLayerBase {
       ["query"]
     );
     this._scopedVars = { __sceneObject: { value: this, text: "__sceneObject" } };
-    this.topic = data.DataTopic.Annotations;
   }
   onEnable() {
     const timeRange = sceneGraph.getTimeRange(this);
@@ -3792,20 +3916,17 @@ class AnnotationsDataLayer extends SceneDataLayerBase {
         })
       );
       this.querySub = stream.subscribe((stateUpdate) => {
-        this.publishResults(stateUpdate, data.DataTopic.Annotations);
+        this.publishResults(stateUpdate);
       });
     } catch (e) {
-      this.publishResults(
-        __spreadProps$i(__spreadValues$t({}, emptyPanelData), {
-          state: schema.LoadingState.Error,
-          errors: [
-            {
-              message: getMessageFromError(e)
-            }
-          ]
-        }),
-        data.DataTopic.Annotations
-      );
+      this.publishResults(__spreadProps$i(__spreadValues$t({}, emptyPanelData), {
+        state: schema.LoadingState.Error,
+        errors: [
+          {
+            message: getMessageFromError(e)
+          }
+        ]
+      }));
       console.error("AnnotationsDataLayer error", e);
     }
   }
@@ -3820,10 +3941,20 @@ class AnnotationsDataLayer extends SceneDataLayerBase {
     df.meta = __spreadProps$i(__spreadValues$t({}, df.meta), {
       dataTopic: data.DataTopic.Annotations
     });
-    stateUpdate.annotations = [df];
+    stateUpdate.series = [df];
     return stateUpdate;
   }
 }
+AnnotationsDataLayer.Component = AnnotationsDataLayerRenderer;
+function AnnotationsDataLayerRenderer({ model }) {
+  const { isHidden } = model.useState();
+  if (isHidden) {
+    return null;
+  }
+  return /* @__PURE__ */ React__default["default"].createElement(DataLayerControlSwitch, {
+    layer: model
+  });
+}
 
 var index = /*#__PURE__*/Object.freeze({
   __proto__: null,
@@ -4040,7 +4171,7 @@ class SceneTimeRangeCompare extends SceneObjectBase {
 SceneTimeRangeCompare.Component = SceneTimeRangeCompareRenderer;
 function SceneTimeRangeCompareRenderer({ model }) {
   var _a;
-  const styles = ui.useStyles2(getStyles$9);
+  const styles = ui.useStyles2(getStyles$8);
   const { compareWith, compareOptions } = model.useState();
   const [previousCompare, setPreviousCompare] = React__default["default"].useState(compareWith);
   const previousValue = (_a = compareOptions.find(({ value: value2 }) => value2 === previousCompare)) != null ? _a : PREVIOUS_PERIOD_COMPARE_OPTION;
@@ -4080,7 +4211,7 @@ function SceneTimeRangeCompareRenderer({ model }) {
     isOpen: false
   }, previousValue.label));
 }
-function getStyles$9(theme) {
+function getStyles$8(theme) {
   return {
     previewButton: css.css({
       "&:disabled": {
@@ -4735,115 +4866,6 @@ function GroupByVariableRenderer({ model }) {
   return renderSelectForVariable(model);
 }
 
-function LoadingIndicator(props) {
-  return /* @__PURE__ */ React__default["default"].createElement(ui.Tooltip, {
-    content: "Cancel query"
-  }, /* @__PURE__ */ React__default["default"].createElement(ui.Icon, {
-    className: "spin-clockwise",
-    name: "sync",
-    size: "xs",
-    role: "button",
-    onMouseDown: (e) => {
-      props.onCancel(e);
-    }
-  }));
-}
-
-function ControlsLabel(props) {
-  const styles = ui.useStyles2(getStyles$8);
-  const theme = ui.useTheme2();
-  const isVertical = props.layout === "vertical";
-  const loadingIndicator = Boolean(props.isLoading) ? /* @__PURE__ */ React__default["default"].createElement("div", {
-    style: { marginLeft: theme.spacing(1), marginTop: "-1px" },
-    "aria-label": e2eSelectors.selectors.components.LoadingIndicator.icon
-  }, /* @__PURE__ */ React__default["default"].createElement(LoadingIndicator, {
-    onCancel: (e) => {
-      var _a;
-      e.preventDefault();
-      e.stopPropagation();
-      (_a = props.onCancel) == null ? void 0 : _a.call(props);
-    }
-  })) : null;
-  let errorIndicator = null;
-  if (props.error) {
-    errorIndicator = /* @__PURE__ */ React__default["default"].createElement(ui.Tooltip, {
-      content: props.error,
-      placement: "bottom"
-    }, /* @__PURE__ */ React__default["default"].createElement(ui.Icon, {
-      className: styles.errorIcon,
-      name: "exclamation-triangle"
-    }));
-  }
-  const testId = typeof props.label === "string" ? e2eSelectors.selectors.pages.Dashboard.SubMenu.submenuItemLabels(props.label) : "";
-  let labelElement;
-  if (isVertical) {
-    labelElement = /* @__PURE__ */ React__default["default"].createElement("label", {
-      className: styles.verticalLabel,
-      "data-testid": testId,
-      htmlFor: props.htmlFor
-    }, props.label, errorIndicator, props.icon && /* @__PURE__ */ React__default["default"].createElement(ui.Icon, {
-      name: props.icon,
-      className: styles.normalIcon
-    }), loadingIndicator, props.onRemove && /* @__PURE__ */ React__default["default"].createElement(ui.IconButton, {
-      variant: "secondary",
-      size: "xs",
-      name: "times",
-      onClick: props.onRemove,
-      tooltip: "Remove"
-    }));
-  } else {
-    labelElement = /* @__PURE__ */ React__default["default"].createElement("label", {
-      className: styles.horizontalLabel,
-      "data-testid": testId,
-      htmlFor: props.htmlFor
-    }, errorIndicator, props.icon && /* @__PURE__ */ React__default["default"].createElement(ui.Icon, {
-      name: props.icon,
-      className: styles.normalIcon
-    }), props.label, loadingIndicator);
-  }
-  if (props.description) {
-    return /* @__PURE__ */ React__default["default"].createElement(ui.Tooltip, {
-      content: props.description,
-      placement: isVertical ? "top" : "bottom"
-    }, labelElement);
-  }
-  return labelElement;
-}
-const getStyles$8 = (theme) => ({
-  horizontalLabel: css.css({
-    background: theme.isDark ? theme.colors.background.primary : theme.colors.background.secondary,
-    display: `flex`,
-    alignItems: "center",
-    padding: theme.spacing(0, 1),
-    fontWeight: theme.typography.fontWeightMedium,
-    fontSize: theme.typography.bodySmall.fontSize,
-    height: theme.spacing(theme.components.height.md),
-    lineHeight: theme.spacing(theme.components.height.md),
-    borderRadius: theme.shape.borderRadius(1),
-    border: `1px solid ${theme.components.input.borderColor}`,
-    position: "relative",
-    right: -1,
-    whiteSpace: "nowrap",
-    gap: theme.spacing(0.5)
-  }),
-  verticalLabel: css.css({
-    display: `flex`,
-    alignItems: "center",
-    fontWeight: theme.typography.fontWeightMedium,
-    fontSize: theme.typography.bodySmall.fontSize,
-    lineHeight: theme.typography.bodySmall.lineHeight,
-    whiteSpace: "nowrap",
-    marginBottom: theme.spacing(0.5),
-    gap: theme.spacing(1)
-  }),
-  errorIcon: css.css({
-    color: theme.colors.error.text
-  }),
-  normalIcon: css.css({
-    color: theme.colors.text.secondary
-  })
-});
-
 var __defProp$n = Object.defineProperty;
 var __defProps$d = Object.defineProperties;
 var __getOwnPropDescs$d = Object.getOwnPropertyDescriptors;
@@ -5293,6 +5315,25 @@ function toSelectableValue({ text, value }) {
   };
 }
 
+function mergeMultipleDataLayers(layers) {
+  const resultStreams = layers.map((l) => l.getResultsStream());
+  const resultsMap = /* @__PURE__ */ new Map();
+  const deactivationHandlers = [];
+  for (const layer of layers) {
+    deactivationHandlers.push(layer.activate());
+  }
+  return rxjs.merge(resultStreams).pipe(
+    rxjs.mergeAll(),
+    rxjs.map((v) => {
+      resultsMap.set(v.origin.state.key, v);
+      return resultsMap.values();
+    }),
+    rxjs.finalize(() => {
+      deactivationHandlers.forEach((handler) => handler());
+    })
+  );
+}
+
 var __defProp$l = Object.defineProperty;
 var __defProps$b = Object.defineProperties;
 var __getOwnPropDescs$b = Object.getOwnPropertyDescriptors;
@@ -5433,44 +5474,28 @@ class SceneQueryRunner extends SceneObjectBase {
   }
   _handleDataLayers() {
     const dataLayers = sceneGraph.getDataLayers(this);
-    const observables = [];
-    const resultsMap = /* @__PURE__ */ new Map();
-    if (dataLayers.length > 0) {
-      dataLayers.forEach((layer) => {
-        observables.push(layer.getResultsStream());
-      });
-      this._dataLayersSub = rxjs.merge(observables).pipe(
-        rxjs.mergeAll(),
-        rxjs.map((v) => {
-          resultsMap.set(v.origin.state.key, v.data);
-          return resultsMap;
-        })
-      ).subscribe((result) => {
-        this._onLayersReceived(result);
-      });
+    if (dataLayers.length === 0) {
+      return;
     }
+    this._dataLayersSub = mergeMultipleDataLayers(dataLayers).subscribe(this._onLayersReceived.bind(this));
   }
   _onLayersReceived(results) {
-    var _a, _b;
+    var _a, _b, _c, _d;
     const timeRange = sceneGraph.getTimeRange(this);
-    const dataLayers = sceneGraph.getDataLayers(this);
     const { dataLayerFilter } = this.state;
     let annotations = [];
     let alertStates = [];
     let alertState;
-    const layerKeys = Array.from(results.keys());
-    Array.from(results.values()).forEach((result, i) => {
-      const layerKey = layerKeys[i];
-      const layer = dataLayers.find((l) => l.state.key === layerKey);
-      if (layer) {
-        if (layer.topic === data.DataTopic.Annotations && result[data.DataTopic.Annotations]) {
-          annotations = annotations.concat(result[data.DataTopic.Annotations]);
+    for (const result of results) {
+      for (let frame of result.data.series) {
+        if (((_a = frame.meta) == null ? void 0 : _a.dataTopic) === data.DataTopic.Annotations) {
+          annotations = annotations.concat(frame);
         }
-        if (layer.topic === "alertStates") {
-          alertStates = alertStates.concat(result.series);
+        if (((_b = frame.meta) == null ? void 0 : _b.dataTopic) === data.DataTopic.AlertStates) {
+          alertStates = alertStates.concat(frame);
         }
       }
-    });
+    }
     if (dataLayerFilter == null ? void 0 : dataLayerFilter.panelId) {
       if (annotations.length > 0) {
         annotations = filterAnnotations(annotations, dataLayerFilter);
@@ -5491,8 +5516,8 @@ class SceneQueryRunner extends SceneObjectBase {
     this._layerAnnotations = annotations;
     this.setState({
       data: __spreadProps$b(__spreadValues$l({}, baseStateUpdate), {
-        annotations: [...(_a = this._resultAnnotations) != null ? _a : [], ...annotations],
-        alertState: alertState != null ? alertState : (_b = this.state.data) == null ? void 0 : _b.alertState
+        annotations: [...(_c = this._resultAnnotations) != null ? _c : [], ...annotations],
+        alertState: alertState != null ? alertState : (_d = this.state.data) == null ? void 0 : _d.alertState
       })
     });
   }
@@ -5720,64 +5745,76 @@ var __spreadValues$k = (a, b) => {
   return a;
 };
 var __spreadProps$a = (a, b) => __defProps$a(a, __getOwnPropDescs$a(b));
-class SceneDataLayerControls extends SceneObjectBase {
+class SceneDataLayerSetBase extends SceneObjectBase {
   constructor() {
-    super({ layersMap: {} });
-    this.addActivationHandler(() => this._onActivate());
+    super(...arguments);
+    this.isDataLayer = true;
+    this._results = new rxjs.ReplaySubject();
   }
-  _onActivate() {
-    const layers = sceneGraph.getDataLayers(this, true);
-    this.setState({ layersMap: layers.reduce((acc, l) => __spreadProps$a(__spreadValues$k({}, acc), { [l.state.key]: l.state.isEnabled }), {}) });
+  subscribeToAllLayers(layers) {
+    if (layers.length > 0) {
+      this.querySub = mergeMultipleDataLayers(layers).subscribe(this._onLayerUpdateReceived.bind(this));
+    } else {
+      this._results.next({ origin: this, data: emptyPanelData });
+      this.setStateHelper({ data: emptyPanelData });
+    }
   }
-  toggleLayer(l) {
-    this.setState({ layersMap: __spreadProps$a(__spreadValues$k({}, this.state.layersMap), { [l.state.key]: !l.state.isEnabled }) });
-    l.setState({ isEnabled: !l.state.isEnabled });
+  _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 = __spreadProps$a(__spreadValues$k({}, emptyPanelData), { series });
+    this._results.next({ origin: this, data: combinedData });
+    this.setStateHelper({ data: combinedData });
   }
-}
-SceneDataLayerControls.Component = SceneDataLayerControlsRenderer;
-function SceneDataLayerControlsRenderer({ model }) {
-  const { layersMap } = model.useState();
-  const layers = sceneGraph.getDataLayers(model, true);
-  if (layers.length === 0) {
-    return null;
+  getResultsStream() {
+    return this._results;
+  }
+  cancelQuery() {
+    var _a;
+    (_a = this.querySub) == null ? void 0 : _a.unsubscribe();
+  }
+  setStateHelper(state) {
+    setBaseClassState(this, state);
   }
-  return /* @__PURE__ */ React__default["default"].createElement(React__default["default"].Fragment, null, layers.map((l) => {
-    const elementId = `data-layer-${l.state.key}`;
-    if (l.state.isHidden) {
-      return null;
-    }
-    return /* @__PURE__ */ React__default["default"].createElement(SceneDataLayerControl, {
-      key: elementId,
-      layer: l,
-      onToggleLayer: () => model.toggleLayer(l),
-      isEnabled: layersMap[l.state.key]
-    });
-  }));
 }
-function SceneDataLayerControl({ layer, isEnabled, onToggleLayer }) {
-  var _a, _b;
-  const elementId = `data-layer-${layer.state.key}`;
-  const { data } = layer.useState();
-  const showLoading = Boolean(data && data.state === schema.LoadingState.Loading);
-  return /* @__PURE__ */ React__default["default"].createElement("div", {
-    className: containerStyle$1
-  }, /* @__PURE__ */ React__default["default"].createElement(ControlsLabel, {
-    htmlFor: elementId,
-    isLoading: showLoading,
-    onCancel: () => {
-      var _a2;
-      return (_a2 = layer.cancelQuery) == null ? void 0 : _a2.call(layer);
-    },
-    label: layer.state.name,
-    description: layer.state.description,
-    error: (_b = (_a = layer.state.data) == null ? void 0 : _a.errors) == null ? void 0 : _b[0].message
-  }), /* @__PURE__ */ React__default["default"].createElement(ui.InlineSwitch, {
-    id: elementId,
-    value: isEnabled,
-    onChange: onToggleLayer
-  }));
+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();
+    };
+  }
 }
-const containerStyle$1 = css.css({ display: "flex" });
+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
+  })));
+};
 
 var __defProp$j = Object.defineProperty;
 var __defProps$9 = Object.defineProperties;
@@ -5825,8 +5862,8 @@ class SceneDataTransformer extends SceneObjectBase {
   }
   getSourceData() {
     if (this.state.$data) {
-      if (this.state.$data instanceof SceneDataLayers) {
-        throw new Error("SceneDataLayers can not be used as data provider for SceneDataTransformer.");
+      if (this.state.$data instanceof SceneDataLayerSet) {
+        throw new Error("SceneDataLayerSet can not be used as data provider for SceneDataTransformer.");
       }
       return this.state.$data;
     }
@@ -10374,7 +10411,8 @@ exports.SceneCanvasText = SceneCanvasText;
 exports.SceneControlsSpacer = SceneControlsSpacer;
 exports.SceneDataLayerBase = SceneDataLayerBase;
 exports.SceneDataLayerControls = SceneDataLayerControls;
-exports.SceneDataLayers = SceneDataLayers;
+exports.SceneDataLayerSet = SceneDataLayerSet;
+exports.SceneDataLayerSetBase = SceneDataLayerSetBase;
 exports.SceneDataNode = SceneDataNode;
 exports.SceneDataTransformer = SceneDataTransformer;
 exports.SceneDebugger = SceneDebugger;
@@ -10415,6 +10453,7 @@ exports.dataLayers = index;
 exports.formatRegistry = formatRegistry;
 exports.getUrlSyncManager = getUrlSyncManager;
 exports.isCustomVariableValue = isCustomVariableValue;
+exports.isDataLayer = isDataLayer;
 exports.isDataRequestEnricher = isDataRequestEnricher;
 exports.isSceneObject = isSceneObject;
 exports.registerQueryWithController = registerQueryWithController;