@grafana/scenes 4.19.0 → 4.20.0

package/dist/index.d.ts

@@ -927,6 +927,7 @@ type getTagKeysProvider = (set: GroupByVariable, currentKey: string | null) => P
 declare class GroupByVariable extends MultiValueVariable<GroupByVariableState> {
     static Component: typeof GroupByVariableRenderer;
     isLazy: boolean;
+    protected _urlSync: SceneObjectUrlSyncHandler;
     validateAndUpdate(): Observable<ValidateAndUpdateResult>;
     private _updateValueGivenNewOptions;
     getValueOptions(args: VariableGetOptionsArgs): Observable<VariableValueOption[]>;
@@ -1130,7 +1131,7 @@ declare class LiveNowTimer extends SceneObjectBase<LiveNowTimerState> {
     private timerId;
     private static REFRESH_RATE;
     constructor({ enabled }: {
-        enabled?: boolean;
+        enabled?: boolean | undefined;
     });
     private _activationHandler;
     enable(): void;
@@ -1225,18 +1226,18 @@ declare class AnnotationsDataLayer extends SceneDataLayerBase<AnnotationsDataLay
     protected processEvents(query: AnnotationQuery, events: AnnotationQueryResults): {
         state: LoadingState;
         series: _grafana_data.DataFrame[];
-        structureRev?: number;
-        annotations?: _grafana_data.DataFrame[];
-        alertState?: _grafana_data.AlertStateInfo;
-        request?: _grafana_data.DataQueryRequest<_grafana_data.DataQuery>;
-        timings?: _grafana_data.DataQueryTimings;
-        errors?: _grafana_data.DataQueryError[];
-        error?: _grafana_data.DataQueryError;
+        structureRev?: number | undefined;
+        annotations?: _grafana_data.DataFrame[] | undefined;
+        alertState?: _grafana_data.AlertStateInfo | undefined;
+        request?: _grafana_data.DataQueryRequest<_grafana_data.DataQuery> | undefined;
+        timings?: _grafana_data.DataQueryTimings | undefined;
+        errors?: _grafana_data.DataQueryError[] | undefined;
+        error?: _grafana_data.DataQueryError | undefined;
         timeRange: _grafana_data.TimeRange;
-        traceIds?: string[];
+        traceIds?: string[] | undefined;
     };
 }
-declare function AnnotationsDataLayerRenderer({ model }: SceneComponentProps<AnnotationsDataLayer>): React__default.JSX.Element;
+declare function AnnotationsDataLayerRenderer({ model }: SceneComponentProps<AnnotationsDataLayer>): React__default.JSX.Element | null;
 
 type index_AnnotationsDataLayer = AnnotationsDataLayer;
 declare const index_AnnotationsDataLayer: typeof AnnotationsDataLayer;
@@ -1343,7 +1344,7 @@ declare class SceneDataLayerControls extends SceneObjectBase<SceneDataLayerContr
     static Component: typeof SceneDataLayerControlsRenderer;
     constructor();
 }
-declare function SceneDataLayerControlsRenderer({ model }: SceneComponentProps<SceneDataLayerControls>): React__default.JSX.Element;
+declare function SceneDataLayerControlsRenderer({ model }: SceneComponentProps<SceneDataLayerControls>): React__default.JSX.Element | null;
 
 interface SceneDataTransformerState extends SceneDataState {
     /**
@@ -1401,7 +1402,7 @@ interface VariableValueControlState extends SceneObjectState {
 declare class VariableValueControl extends SceneObjectBase<VariableValueControlState> {
     static Component: typeof VariableValueControlRenderer;
 }
-declare function VariableValueControlRenderer({ model }: SceneComponentProps<VariableValueControl>): React__default.JSX.Element;
+declare function VariableValueControlRenderer({ model }: SceneComponentProps<VariableValueControl>): React__default.JSX.Element | null;
 
 declare class SceneVariableSet extends SceneObjectBase<SceneVariableSetState> implements SceneVariables {
     /** Variables that have changed in since the activation or since the first manual value change */
@@ -1737,7 +1738,7 @@ declare class SceneTimePicker extends SceneObjectBase<SceneTimePickerState> {
     onMoveBackward: () => void;
     onMoveForward: () => void;
 }
-declare function SceneTimePickerRenderer({ model }: SceneComponentProps<SceneTimePicker>): React__default.JSX.Element;
+declare function SceneTimePickerRenderer({ model }: SceneComponentProps<SceneTimePicker>): React__default.JSX.Element | null;
 
 interface SceneRefreshPickerState extends SceneObjectState {
     refresh: string;
@@ -1834,7 +1835,7 @@ declare class SceneFlexLayout extends SceneObjectBase<SceneFlexLayoutState> impl
     toggleDirection(): void;
     isDraggable(): boolean;
 }
-declare function SceneFlexLayoutRenderer({ model, parentState }: SceneFlexItemRenderProps$1<SceneFlexLayout>): React__default.JSX.Element;
+declare function SceneFlexLayoutRenderer({ model, parentState }: SceneFlexItemRenderProps$1<SceneFlexLayout>): React__default.JSX.Element | null;
 interface SceneFlexItemPlacement {
     wrap?: CSSProperties['flexWrap'];
     direction?: CSSProperties['flexDirection'];
@@ -1866,7 +1867,7 @@ interface SceneFlexItemRenderProps$1<T> extends SceneComponentProps<T> {
 declare class SceneFlexItem extends SceneObjectBase<SceneFlexItemState> {
     static Component: typeof SceneFlexItemRenderer;
 }
-declare function SceneFlexItemRenderer({ model, parentState }: SceneFlexItemRenderProps$1<SceneFlexItem>): React__default.JSX.Element;
+declare function SceneFlexItemRenderer({ model, parentState }: SceneFlexItemRenderProps$1<SceneFlexItem>): React__default.JSX.Element | null;
 
 interface SceneCSSGridLayoutState extends SceneObjectState, SceneCSSGridLayoutOptions {
     children: Array<SceneCSSGridItem | SceneObject>;
@@ -1910,7 +1911,7 @@ declare class SceneCSSGridLayout extends SceneObjectBase<SceneCSSGridLayoutState
     constructor(state: Partial<SceneCSSGridLayoutState>);
     isDraggable(): boolean;
 }
-declare function SceneCSSGridLayoutRenderer({ model }: SceneCSSGridItemRenderProps<SceneCSSGridLayout>): React__default.JSX.Element;
+declare function SceneCSSGridLayoutRenderer({ model }: SceneCSSGridItemRenderProps<SceneCSSGridLayout>): React__default.JSX.Element | null;
 interface SceneCSSGridItemPlacement {
     /**
      * True when the item should rendered but not visible.
@@ -1932,7 +1933,7 @@ interface SceneCSSGridItemRenderProps<T> extends SceneComponentProps<T> {
 declare class SceneCSSGridItem extends SceneObjectBase<SceneCSSGridItemState> {
     static Component: typeof SceneCSSGridItemRenderer;
 }
-declare function SceneCSSGridItemRenderer({ model, parentState }: SceneCSSGridItemRenderProps<SceneCSSGridItem>): React__default.JSX.Element;
+declare function SceneCSSGridItemRenderer({ model, parentState }: SceneCSSGridItemRenderProps<SceneCSSGridItem>): React__default.JSX.Element | null;
 
 declare function SceneGridLayoutRenderer({ model }: SceneComponentProps<SceneGridLayout>): React__default.JSX.Element;
 
@@ -2029,9 +2030,9 @@ interface SceneGridItemState extends SceneGridItemStateLike {
 declare class SceneGridItem extends SceneObjectBase<SceneGridItemState> implements SceneGridItemLike {
     static Component: typeof SceneGridItemRenderer;
 }
-declare function SceneGridItemRenderer({ model }: SceneComponentProps<SceneGridItem>): React__default.JSX.Element;
+declare function SceneGridItemRenderer({ model }: SceneComponentProps<SceneGridItem>): React__default.JSX.Element | null;
 
-declare function SplitLayoutRenderer({ model }: SceneFlexItemRenderProps<SplitLayout>): React__default.JSX.Element;
+declare function SplitLayoutRenderer({ model }: SceneFlexItemRenderProps<SplitLayout>): React__default.JSX.Element | null;
 interface SceneFlexItemRenderProps<T> extends SceneComponentProps<T> {
     parentState?: SceneFlexItemPlacement;
 }
@@ -2149,7 +2150,7 @@ declare class SceneAppPage extends SceneObjectBase<SceneAppPageState> implements
     initializeScene(scene: EmbeddedScene): void;
     getScene(routeMatch: SceneRouteMatch): EmbeddedScene;
     getDrilldownPage(drilldown: SceneAppDrilldownView, routeMatch: SceneRouteMatch<{}>): SceneAppPageLike;
-    enrichDataRequest(source: SceneObject): Partial<_grafana_data.DataQueryRequest<_grafana_data.DataQuery>>;
+    enrichDataRequest(source: SceneObject): Partial<_grafana_data.DataQueryRequest<_grafana_data.DataQuery>> | null;
 }
 interface SceneAppPageRendererProps extends SceneComponentProps<SceneAppPage> {
     routeProps: RouteComponentProps;
@@ -2174,7 +2175,7 @@ interface SceneReactObjectState<TProps = {}> extends SceneObjectState {
  * A utility object that can be used to render any React component or ReactNode
  */
 declare class SceneReactObject<TProps = {}> extends SceneObjectBase<SceneReactObjectState<TProps>> {
-    static Component: ({ model }: SceneComponentProps<SceneReactObject>) => string | number | true | Iterable<React__default.ReactNode> | React__default.JSX.Element;
+    static Component: ({ model }: SceneComponentProps<SceneReactObject>) => string | number | true | Iterable<React__default.ReactNode> | React__default.JSX.Element | null;
 }
 
 type StandardFieldConfigInterface<T, C, Prefix extends string> = {
@@ -2327,7 +2328,7 @@ declare class VizPanelBuilder<TOptions extends {}, TFieldConfig extends {}> impl
 declare class PanelOptionsBuilder<TOptions extends {} = {}> {
     private defaultOptions?;
     private _options;
-    constructor(defaultOptions?: () => Partial<TOptions>);
+    constructor(defaultOptions?: (() => Partial<TOptions>) | undefined);
     private setDefaults;
     /**
      * Set an individual panel option. This will merge the value with the existing options.
@@ -2364,7 +2365,7 @@ declare class FieldConfigBuilder<TFieldConfig extends {}> implements StandardFie
     private defaultFieldConfig?;
     private _fieldConfig;
     private _overridesBuilder;
-    constructor(defaultFieldConfig?: () => TFieldConfig);
+    constructor(defaultFieldConfig?: (() => TFieldConfig) | undefined);
     private setDefaults;
     /**
      * Set color.

package/dist/index.js

@@ -3045,6 +3045,65 @@ function renderSelectForVariable(model) {
   }
 }
 
+class GroupByVariableUrlSyncHandler {
+  constructor(_sceneObject) {
+    this._sceneObject = _sceneObject;
+  }
+  getKey() {
+    return `var-${this._sceneObject.state.name}`;
+  }
+  getKeys() {
+    if (this._sceneObject.state.skipUrlSync) {
+      return [];
+    }
+    return [this.getKey()];
+  }
+  getUrlState() {
+    if (this._sceneObject.state.skipUrlSync) {
+      return {};
+    }
+    return { [this.getKey()]: toUrlValues(this._sceneObject.state.value, this._sceneObject.state.text) };
+  }
+  updateFromUrl(values) {
+    let urlValue = values[this.getKey()];
+    if (urlValue != null) {
+      if (!this._sceneObject.isActive) {
+        this._sceneObject.skipNextValidation = true;
+      }
+      const { values: values2, texts } = fromUrlValues(urlValue);
+      this._sceneObject.changeValueTo(values2, texts);
+    }
+  }
+}
+function toUrlValues(values, texts) {
+  values = Array.isArray(values) ? values : [values];
+  texts = Array.isArray(texts) ? texts : [texts];
+  return values.map((value, idx) => {
+    if (value === void 0 || value === null) {
+      return "";
+    }
+    value = String(value);
+    let text = texts[idx];
+    text = text === void 0 || text === null ? value : String(text);
+    return toUrlCommaDelimitedString(value, text);
+  });
+}
+function fromUrlValues(urlValues) {
+  urlValues = Array.isArray(urlValues) ? urlValues : [urlValues];
+  return urlValues.reduce(
+    (acc, urlValue) => {
+      const [value, label] = (urlValue != null ? urlValue : "").split(",");
+      acc.values.push(unescapeUrlDelimiters(value));
+      acc.texts.push(unescapeUrlDelimiters(label != null ? label : value));
+      return acc;
+    },
+    {
+      values: [],
+      texts: []
+    }
+  );
+}
+
 var __defProp$y = Object.defineProperty;
 var __defProps$m = Object.defineProperties;
 var __getOwnPropDescs$m = Object.getOwnPropertyDescriptors;
@@ -3081,6 +3140,7 @@ class GroupByVariable extends MultiValueVariable {
       noValueOnClear: true
     }));
     this.isLazy = true;
+    this._urlSync = new GroupByVariableUrlSyncHandler(this);
     this._getKeys = async (ds) => {
       var _a, _b, _c;
       const override = await ((_b = (_a = this.state).getTagKeysProvider) == null ? void 0 : _b.call(_a, this, null));
@@ -3166,15 +3226,25 @@ class GroupByVariable extends MultiValueVariable {
 }
 GroupByVariable.Component = GroupByVariableRenderer;
 function GroupByVariableRenderer({ model }) {
-  const { value, key, maxVisibleValues, noValueOnClear } = model.useState();
-  const arrayValue = React.useMemo(() => lodash.isArray(value) ? value : [value], [value]);
+  const { value, text, key, maxVisibleValues, noValueOnClear } = model.useState();
+  const values = React.useMemo(() => {
+    const arrayValue = lodash.isArray(value) ? value : [value];
+    const arrayText = lodash.isArray(text) ? text : [text];
+    return arrayValue.map((value2, idx) => {
+      var _a;
+      return {
+        value: value2,
+        label: String((_a = arrayText[idx]) != null ? _a : value2)
+      };
+    });
+  }, [value, text]);
   const [isFetchingOptions, setIsFetchingOptions] = React.useState(false);
   const [isOptionsOpen, setIsOptionsOpen] = React.useState(false);
   const [inputValue, setInputValue] = React.useState("");
-  const [uncommittedValue, setUncommittedValue] = React.useState(arrayValue);
+  const [uncommittedValue, setUncommittedValue] = React.useState(values);
   React.useEffect(() => {
-    setUncommittedValue(arrayValue);
-  }, [arrayValue]);
+    setUncommittedValue(values);
+  }, [values]);
   const onInputChange = (value2, { action }) => {
     if (action === "input-change") {
       setInputValue(value2);
@@ -3211,13 +3281,16 @@ function GroupByVariableRenderer({ model }) {
     components: { Option: OptionWithCheckbox },
     onInputChange,
     onBlur: () => {
-      model.changeValueTo(uncommittedValue);
+      model.changeValueTo(
+        uncommittedValue.map((x) => x.value),
+        uncommittedValue.map((x) => x.label)
+      );
     },
     onChange: (newValue, action) => {
       if (action.action === "clear" && noValueOnClear) {
         model.changeValueTo([]);
       }
-      setUncommittedValue(newValue.map((x) => x.value));
+      setUncommittedValue(newValue);
     },
     onOpenMenu: async () => {
       setIsFetchingOptions(true);
@@ -3532,7 +3605,7 @@ class AdHocFiltersVariableUrlSyncHandler {
     if (filters.length === 0) {
       return { [this.getKey()]: [""] };
     }
-    const value = filters.filter(isFilterComplete).map((filter) => toArray(filter).map(escapePipeDelimiters).join("|"));
+    const value = filters.filter(isFilterComplete).map((filter) => toArray(filter).map(escapeUrlPipeDelimiters).join("|"));
     return { [this.getKey()]: value };
   }
   updateFromUrl(values) {
@@ -3552,39 +3625,13 @@ function deserializeUrlToFilters(value) {
   const filter = toFilter(value);
   return filter === null ? [] : [filter];
 }
-function escapePipeDelimiters(value) {
-  if (value === null || value === void 0) {
-    return "";
-  }
-  return value = /\|/g[Symbol.replace](value, "__gfp__");
-}
-function escapeCommaDelimiters(value) {
-  if (value === null || value === void 0) {
-    return "";
-  }
-  return /,/g[Symbol.replace](value, "__gfc__");
-}
-function unescapeDelimiters(value) {
-  if (value === null || value === void 0) {
-    return "";
-  }
-  value = /__gfp__/g[Symbol.replace](value, "|");
-  value = /__gfc__/g[Symbol.replace](value, ",");
-  return value;
-}
 function toArray(filter) {
   return [
-    toCommaDelimitedString(filter.key, filter.keyLabel),
+    toUrlCommaDelimitedString(filter.key, filter.keyLabel),
     filter.operator,
-    toCommaDelimitedString(filter.value, filter.valueLabel)
+    toUrlCommaDelimitedString(filter.value, filter.valueLabel)
   ];
 }
-function toCommaDelimitedString(key, label) {
-  if (!label || key === label) {
-    return escapeCommaDelimiters(key);
-  }
-  return [key, label].map(escapeCommaDelimiters).join(",");
-}
 function toFilter(urlValue) {
   if (typeof urlValue !== "string" || urlValue.length === 0) {
     return null;
@@ -3593,7 +3640,7 @@ function toFilter(urlValue) {
     const [key2, label] = v.split(",");
     acc.push(key2, label != null ? label : key2);
     return acc;
-  }, []).map(unescapeDelimiters);
+  }, []).map(unescapeUrlDelimiters);
   return {
     key,
     keyLabel,
@@ -4314,6 +4361,32 @@ function filterOutInactiveRunnerDuplicates(runners) {
     return activeItems;
   });
 }
+function escapeUrlPipeDelimiters(value) {
+  if (value === null || value === void 0) {
+    return "";
+  }
+  return value = /\|/g[Symbol.replace](value, "__gfp__");
+}
+function escapeUrlCommaDelimiters(value) {
+  if (value === null || value === void 0) {
+    return "";
+  }
+  return /,/g[Symbol.replace](value, "__gfc__");
+}
+function unescapeUrlDelimiters(value) {
+  if (value === null || value === void 0) {
+    return "";
+  }
+  value = /__gfp__/g[Symbol.replace](value, "|");
+  value = /__gfc__/g[Symbol.replace](value, ",");
+  return value;
+}
+function toUrlCommaDelimitedString(key, label) {
+  if (!label || key === label) {
+    return escapeUrlCommaDelimiters(key);
+  }
+  return [key, label].map(escapeUrlCommaDelimiters).join(",");
+}
 
 function isAdHocVariable(variable) {
   return variable.state.type === "adhoc";
@@ -7952,6 +8025,10 @@ var __objRest = (source, exclude) => {
 };
 function SceneGridLayoutRenderer({ model }) {
   const { children, isLazy, isDraggable, isResizable } = model.useState();
+  const ref = React.useRef(null);
+  React.useEffect(() => {
+    updateAnimationClass(ref, !!isDraggable);
+  }, [isDraggable]);
   validateChildrenSize(children);
   return /* @__PURE__ */ React__default["default"].createElement(AutoSizer__default["default"], null, ({ width, height }) => {
     if (width === 0) {
@@ -7959,8 +8036,9 @@ function SceneGridLayoutRenderer({ model }) {
     }
     const layout = model.buildGridLayout(width, height);
     return /* @__PURE__ */ React__default["default"].createElement("div", {
+      ref,
       style: { width: `${width}px`, height: "100%", position: "relative", zIndex: 1 },
-      className: css.cx("react-grid-layout", isDraggable && "react-grid-layout--enable-move-animations")
+      className: "react-grid-layout"
     }, /* @__PURE__ */ React__default["default"].createElement(ReactGridLayout__default["default"], {
       width,
       isDraggable: isDraggable && width > 768,
@@ -8023,6 +8101,17 @@ function validateChildrenSize(children) {
     throw new Error("All children must have a size specified");
   }
 }
+function updateAnimationClass(ref, isDraggable, retry) {
+  if (ref.current) {
+    if (isDraggable) {
+      ref.current.classList.add("react-grid-layout--enable-move-animations");
+    } else {
+      ref.current.classList.remove("react-grid-layout--enable-move-animations");
+    }
+  } else if (!retry) {
+    setTimeout(() => updateAnimationClass(ref, isDraggable, true), 50);
+  }
+}
 const ResizeHandle = React__default["default"].forwardRef((_a, ref) => {
   var _b = _a, divProps = __objRest(_b, ["handleAxis"]);
   const customCssClass = ui.useStyles2(getResizeHandleStyles);