@grafana/scenes 6.39.3--canary.1266.18358172419.0 → 6.39.4--canary.1269.18370250318.0

package/dist/index.js

@@ -3603,7 +3603,7 @@ function wrapInSafeSerializableSceneObject(sceneObject) {
 function DefaultGroupByCustomIndicatorContainer(props) {
   const { model } = props;
   const theme = ui.useTheme2();
-  const styles = getStyles$h(theme);
+  const styles = getStyles$i(theme);
   const inputStyles = ui.getInputStyles({ theme, invalid: false });
   const value = lodash.isArray(model.state.value) ? model.state.value : model.state.value ? [model.state.value] : [];
   let buttons = [];
@@ -3685,7 +3685,7 @@ function DefaultGroupByCustomIndicatorContainer(props) {
     buttons
   );
 }
-const getStyles$h = (theme) => ({
+const getStyles$i = (theme) => ({
   clearIcon: css.css({
     color: theme.colors.action.disabledText,
     cursor: "pointer",
@@ -4206,7 +4206,7 @@ function LoadingIndicator(props) {
 }
 
 function ControlsLabel(props) {
-  const styles = ui.useStyles2(getStyles$g);
+  const styles = ui.useStyles2(getStyles$h);
   const theme = ui.useTheme2();
   const isVertical = props.layout === "vertical";
   const loadingIndicator = Boolean(props.isLoading) ? /* @__PURE__ */ React__default.default.createElement(
@@ -4253,7 +4253,7 @@ function ControlsLabel(props) {
   }
   return labelElement;
 }
-const getStyles$g = (theme) => ({
+const getStyles$h = (theme) => ({
   horizontalLabel: css.css({
     background: theme.isDark ? theme.colors.background.primary : theme.colors.background.secondary,
     display: `flex`,
@@ -4306,7 +4306,7 @@ function keyLabelToOption(key, label) {
 const filterNoOp = () => true;
 function AdHocFilterRenderer({ filter, model }) {
   var _a, _b, _c, _d, _e;
-  const styles = ui.useStyles2(getStyles$f);
+  const styles = ui.useStyles2(getStyles$g);
   const [keys, setKeys] = React.useState([]);
   const [values, setValues] = React.useState([]);
   const [isKeysLoading, setIsKeysLoading] = React.useState(false);
@@ -4533,7 +4533,7 @@ function AdHocFilterRenderer({ filter, model }) {
     }
   ));
 }
-const getStyles$f = (theme) => ({
+const getStyles$g = (theme) => ({
   field: css.css({
     marginBottom: 0
   }),
@@ -4733,7 +4733,7 @@ function isFilter(filter) {
 
 const DropdownItem = React.forwardRef(
   function DropdownItem2({ children, active, addGroupBottomBorder, isMultiValueEdit, checked, ...rest }, ref) {
-    const styles = ui.useStyles2(getStyles$e);
+    const styles = ui.useStyles2(getStyles$f);
     const id = React.useId();
     return /* @__PURE__ */ React__default.default.createElement(
       "div",
@@ -4749,7 +4749,7 @@ const DropdownItem = React.forwardRef(
     );
   }
 );
-const getStyles$e = (theme) => ({
+const getStyles$f = (theme) => ({
   option: css.css({
     label: "grafana-select-option",
     top: 0,
@@ -4819,7 +4819,7 @@ const MultiValueApplyButton = ({
   maxOptionWidth,
   menuHeight
 }) => {
-  const styles = ui.useStyles2(getStyles$e);
+  const styles = ui.useStyles2(getStyles$f);
   const floatingElementRect = floatingElement == null ? void 0 : floatingElement.getBoundingClientRect();
   return /* @__PURE__ */ React__default.default.createElement(
     "div",
@@ -5040,7 +5040,7 @@ const MultiValuePill = ({
   handleEditMultiValuePill
 }) => {
   var _a, _b;
-  const styles = ui.useStyles2(getStyles$d);
+  const styles = ui.useStyles2(getStyles$e);
   const editMultiValuePill = React.useCallback(
     (e) => {
       e.stopPropagation();
@@ -5104,7 +5104,7 @@ const MultiValuePill = ({
     )
   );
 };
-const getStyles$d = (theme) => ({
+const getStyles$e = (theme) => ({
   basePill: css.css({
     display: "flex",
     alignItems: "center",
@@ -5143,7 +5143,7 @@ const AdHocCombobox = React.forwardRef(function AdHocCombobox2({ filter, model,
   const [activeIndex, setActiveIndex] = React.useState(null);
   const [filterInputType, setInputType] = React.useState(!isAlwaysWip ? "value" : "key");
   const [preventFiltering, setPreventFiltering] = React.useState(!isAlwaysWip && filterInputType === "value");
-  const styles = ui.useStyles2(getStyles$c);
+  const styles = ui.useStyles2(getStyles$d);
   const [filterMultiValues, setFilterMultiValues] = React.useState([]);
   const [_, setForceRefresh] = React.useState({});
   const allowCustomValue = (_a = model.state.allowCustomValue) != null ? _a : true;
@@ -5752,7 +5752,7 @@ const AdHocCombobox = React.forwardRef(function AdHocCombobox2({ filter, model,
     }
   ) : null))));
 });
-const getStyles$c = (theme) => ({
+const getStyles$d = (theme) => ({
   comboboxWrapper: css.css({
     display: "flex",
     flexWrap: "wrap"
@@ -5826,7 +5826,7 @@ const getStyles$c = (theme) => ({
 const LABEL_MAX_VISIBLE_LENGTH = 20;
 function AdHocFilterPill({ filter, model, readOnly, focusOnWipInputRef }) {
   var _a, _b, _c, _d;
-  const styles = ui.useStyles2(getStyles$b);
+  const styles = ui.useStyles2(getStyles$c);
   const [viewMode, setViewMode] = React.useState(true);
   const [shouldFocusOnPillWrapper, setShouldFocusOnPillWrapper] = React.useState(false);
   const pillWrapperRef = React.useRef(null);
@@ -6004,7 +6004,7 @@ function AdHocFilterPill({ filter, model, readOnly, focusOnWipInputRef }) {
     }
   );
 }
-const getStyles$b = (theme) => ({
+const getStyles$c = (theme) => ({
   combinedFilterPill: css.css({
     display: "flex",
     alignItems: "center",
@@ -6088,7 +6088,7 @@ const AdHocFiltersAlwaysWipCombobox = React.forwardRef(function AdHocFiltersAlwa
 
 const AdHocFiltersComboboxRenderer = React.memo(function AdHocFiltersComboboxRenderer2({ model }) {
   const { originFilters, filters, readOnly } = model.useState();
-  const styles = ui.useStyles2(getStyles$a);
+  const styles = ui.useStyles2(getStyles$b);
   const focusOnWipInputRef = React.useRef();
   return /* @__PURE__ */ React__default.default.createElement(
     "div",
@@ -6124,7 +6124,7 @@ const AdHocFiltersComboboxRenderer = React.memo(function AdHocFiltersComboboxRen
     !readOnly ? /* @__PURE__ */ React__default.default.createElement(AdHocFiltersAlwaysWipCombobox, { model, ref: focusOnWipInputRef }) : null
   );
 });
-const getStyles$a = (theme) => ({
+const getStyles$b = (theme) => ({
   comboboxWrapper: css.css({
     display: "flex",
     flexWrap: "wrap",
@@ -6717,13 +6717,13 @@ function renderExpression(builder, filters) {
 }
 function AdHocFiltersVariableRenderer({ model }) {
   const { filters, readOnly, addFilterButtonText } = model.useState();
-  const styles = ui.useStyles2(getStyles$9);
+  const styles = ui.useStyles2(getStyles$a);
   if (model.state.layout === "combobox") {
     return /* @__PURE__ */ React__default.default.createElement(AdHocFiltersComboboxRenderer, { model });
   }
   return /* @__PURE__ */ React__default.default.createElement("div", { className: styles.wrapper }, filters.filter((filter) => !filter.hidden).map((filter, index) => /* @__PURE__ */ React__default.default.createElement(React__default.default.Fragment, { key: index }, /* @__PURE__ */ React__default.default.createElement(AdHocFilterRenderer, { filter, model }))), !readOnly && /* @__PURE__ */ React__default.default.createElement(AdHocFilterBuilder, { model, key: "'builder", addFilterButtonText }));
 }
-const getStyles$9 = (theme) => ({
+const getStyles$a = (theme) => ({
   wrapper: css.css({
     display: "flex",
     flexWrap: "wrap",
@@ -8615,6 +8615,9 @@ function isTextBoxVariable(variable) {
 function isGroupByVariable(variable) {
   return variable.state.type === "groupby";
 }
+function isSwitchVariable(variable) {
+  return variable.state.type === "switch";
+}
 
 class ActWhenVariableChanged extends SceneObjectBase {
   constructor() {
@@ -8690,7 +8693,7 @@ function getCursorSyncScope(sceneObject) {
 }
 
 function VizPanelSeriesLimit({ data, showAll, seriesLimit, onShowAllSeries }) {
-  const styles = ui.useStyles2(getStyles$8);
+  const styles = ui.useStyles2(getStyles$9);
   const seriesCount = data == null ? void 0 : data.series.length;
   if (seriesCount === void 0 || seriesCount < seriesLimit) {
     return null;
@@ -8720,7 +8723,7 @@ function VizPanelSeriesLimit({ data, showAll, seriesLimit, onShowAllSeries }) {
     /* @__PURE__ */ React__default.default.createElement(ui.Button, { variant: "secondary", size: "sm", onClick: onShowAllSeries }, buttonText)
   ));
 }
-const getStyles$8 = (theme) => ({
+const getStyles$9 = (theme) => ({
   timeSeriesDisclaimer: css.css({
     label: "time-series-disclaimer",
     display: "flex",
@@ -8745,7 +8748,7 @@ function useUniqueId() {
 const LazyLoader = React__default.default.forwardRef(
   ({ children, onLoad, onChange, className, ...rest }, ref) => {
     const id = useUniqueId();
-    const { hideEmpty } = ui.useStyles2(getStyles$7);
+    const { hideEmpty } = ui.useStyles2(getStyles$8);
     const [loaded, setLoaded] = React.useState(false);
     const [isInView, setIsInView] = React.useState(false);
     const innerRef = React.useRef(null);
@@ -8774,7 +8777,7 @@ const LazyLoader = React__default.default.forwardRef(
     return /* @__PURE__ */ React__default.default.createElement("div", { id, ref: innerRef, className: `${hideEmpty} ${className}`, ...rest }, !loaded ? i18n.t("grafana-scenes.components.lazy-loader.placeholder", "\xA0") : /* @__PURE__ */ React__default.default.createElement(LazyLoaderInViewContext.Provider, { value: isInView }, children));
   }
 );
-function getStyles$7() {
+function getStyles$8() {
   return {
     hideEmpty: css.css({
       "&:empty": {
@@ -9446,17 +9449,19 @@ class SceneDataTransformer extends SceneObjectBase {
     if (!force && this.haveAlreadyTransformedData(data$1)) {
       return;
     }
-    const interpolatedTransformations = this._interpolateVariablesInTransformationConfigs(data$1);
-    const seriesTransformations = this._filterAndPrepareTransformationsByTopic(
-      interpolatedTransformations,
-      (topic) => topic == null || topic === data.DataTopic.Series,
-      true
-    );
-    const annotationsTransformations = this._filterAndPrepareTransformationsByTopic(
-      interpolatedTransformations,
-      data.DataTopic.Annotations,
-      false
-    );
+    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();
     }
@@ -9466,11 +9471,13 @@ class SceneDataTransformer extends SceneObjectBase {
         return sceneGraph.interpolate(this, value, { ...(_a2 = data$1.request) == null ? void 0 : _a2.scopedVars, ...scopedVars });
       }
     };
-    const seriesStream = data.transformDataFrame(seriesTransformations, data$1.series, ctx);
-    const annotationsStream = data.transformDataFrame(annotationsTransformations, (_a = data$1.annotations) != null ? _a : []);
+    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 : []));
+    }
     let series = [];
     let annotations = [];
-    this._transformSub = rxjs.forkJoin([seriesStream, annotationsStream]).pipe(
+    this._transformSub = rxjs.forkJoin(streams).pipe(
       rxjs.map((results) => {
         results.forEach((frames) => {
           var _a2;
@@ -9519,15 +9526,6 @@ class SceneDataTransformer extends SceneObjectBase {
       return typeof t === "object" ? JSON.parse(sceneGraph.interpolate(this, JSON.stringify(t), (_a2 = data.request) == null ? void 0 : _a2.scopedVars)) : t;
     });
   }
-  _filterAndPrepareTransformationsByTopic(interpolatedTransformations, topic, includeByDefault) {
-    const topicCheckFn = typeof topic === "function" ? topic : (t) => t === topic;
-    return interpolatedTransformations.filter((transformation) => {
-      if ("options" in transformation || "topic" in transformation) {
-        return topicCheckFn(transformation.topic);
-      }
-      return includeByDefault;
-    }).map((transformation) => "operator" in transformation ? transformation.operator : transformation);
-  }
 }
 
 class VizPanel extends SceneObjectBase {
@@ -11115,11 +11113,13 @@ class CustomVariable extends MultiValueVariable {
       statePaths: ["query"]
     });
   }
-  getValueOptions(args) {
+  // We expose this publicly as we also need it outside the variable
+  // The interpolate flag is needed since we don't always want to get the interpolated options
+  transformQueryToOptions(interpolate = true) {
     var _a;
-    const interpolated = sceneGraph.interpolate(this, this.state.query);
-    const match = (_a = interpolated.match(/(?:\\,|[^,])+/g)) != null ? _a : [];
-    const options = match.map((text) => {
+    const query = interpolate ? sceneGraph.interpolate(this, this.state.query) : this.state.query;
+    const match = (_a = query.match(/(?:\\,|[^,])+/g)) != null ? _a : [];
+    return match.map((text) => {
       var _a2;
       text = text.replace(/\\,/g, ",");
       const textMatch = (_a2 = /^\s*(.+)\s:\s(.+)$/g.exec(text)) != null ? _a2 : [];
@@ -11130,6 +11130,9 @@ class CustomVariable extends MultiValueVariable {
         return { label: text.trim(), value: text.trim() };
       }
     });
+  }
+  getValueOptions(args) {
+    const options = this.transformQueryToOptions();
     if (!options.length) {
       this.skipNextValidation = true;
     }
@@ -11140,6 +11143,104 @@ CustomVariable.Component = ({ model }) => {
   return /* @__PURE__ */ React__default.default.createElement(MultiOrSingleValueSelect, { model });
 };
 
+class SwitchVariable extends SceneObjectBase {
+  constructor(initialState) {
+    super({
+      // TODO: remove this once switch is in the schema @leventebalogh
+      // @ts-expect-error - switch is a valid variable type, but not in the schema yet
+      type: "switch",
+      value: "false",
+      enabledValue: "true",
+      disabledValue: "false",
+      name: "",
+      ...initialState
+    });
+    this._prevValue = "";
+    this._urlSync = new SceneObjectUrlSyncConfig(this, { keys: () => this.getKeys() });
+  }
+  /**
+   * This function is called on when SceneVariableSet is activated or when a dependency changes.
+   */
+  validateAndUpdate() {
+    const newValue = this.getValue();
+    if (this._prevValue !== newValue) {
+      this._prevValue = newValue;
+      this.publishEvent(new SceneVariableValueChangedEvent(this), true);
+    }
+    return rxjs.of({});
+  }
+  setValue(newValue) {
+    if (this.getValue() === newValue) {
+      return;
+    }
+    if ([this.state.enabledValue, this.state.disabledValue].includes(newValue)) {
+      this.setState({ value: newValue });
+      this.publishEvent(new SceneVariableValueChangedEvent(this), true);
+    } else {
+      console.error(
+        `Invalid value for switch variable: "${newValue}". Valid values are: "${this.state.enabledValue}" and "${this.state.disabledValue}".`
+      );
+    }
+  }
+  getValue() {
+    return this.state.value;
+  }
+  isEnabled() {
+    return this.state.value === this.state.enabledValue;
+  }
+  isDisabled() {
+    return this.state.value === this.state.disabledValue;
+  }
+  getKey() {
+    return `var-${this.state.name}`;
+  }
+  getKeys() {
+    if (this.state.skipUrlSync) {
+      return [];
+    }
+    return [this.getKey()];
+  }
+  getUrlState() {
+    if (this.state.skipUrlSync) {
+      return {};
+    }
+    return { [this.getKey()]: this.state.value };
+  }
+  updateFromUrl(values) {
+    const val = values[this.getKey()];
+    if (typeof val === "string") {
+      this.setValue(val);
+    }
+  }
+}
+SwitchVariable.Component = SwitchVariableRenderer;
+function SwitchVariableRenderer({ model }) {
+  const state = model.useState();
+  const styles = ui.useStyles2(getStyles$7);
+  return /* @__PURE__ */ React__default.default.createElement("div", { className: styles.container }, /* @__PURE__ */ React__default.default.createElement(
+    ui.Switch,
+    {
+      value: state.value === state.enabledValue,
+      onChange: (event) => {
+        model.setValue(event.currentTarget.checked ? state.enabledValue : state.disabledValue);
+      }
+    }
+  ));
+}
+function getStyles$7(theme) {
+  return {
+    container: css.css({
+      display: "flex",
+      alignItems: "center",
+      padding: theme.spacing(0, 1),
+      height: theme.spacing(theme.components.height.md),
+      borderRadius: theme.shape.radius.default,
+      border: `1px solid ${theme.components.input.borderColor}`,
+      background: theme.colors.background.primary
+    })
+  };
+}
+
 class DataSourceVariable extends MultiValueVariable {
   constructor(initialState) {
     super({
@@ -15322,6 +15423,7 @@ const sceneUtils = {
   isQueryVariable,
   isTextBoxVariable,
   isGroupByVariable,
+  isSwitchVariable,
   isRepeatCloneOrChildOf,
   buildPathIdFor
 };
@@ -15390,6 +15492,7 @@ exports.SceneVariableSet = SceneVariableSet;
 exports.SceneVariableValueChangedEvent = SceneVariableValueChangedEvent;
 exports.ScopesVariable = ScopesVariable;
 exports.SplitLayout = SplitLayout;
+exports.SwitchVariable = SwitchVariable;
 exports.TestVariable = TestVariable;
 exports.TextBoxVariable = TextBoxVariable;
 exports.UrlSyncContextProvider = UrlSyncContextProvider;