@grafana/scenes 5.26.0 → 5.27.0--canary.912.12014950388.0

package/dist/index.js

@@ -3110,7 +3110,7 @@ function LoadingIndicator(props) {
 }
 
 function ControlsLabel(props) {
-  const styles = ui.useStyles2(getStyles$f);
+  const styles = ui.useStyles2(getStyles$g);
   const theme = ui.useTheme2();
   const isVertical = props.layout === "vertical";
   const loadingIndicator = Boolean(props.isLoading) ? /* @__PURE__ */ React__default["default"].createElement("div", {
@@ -3173,7 +3173,7 @@ function ControlsLabel(props) {
   }
   return labelElement;
 }
-const getStyles$f = (theme) => ({
+const getStyles$g = (theme) => ({
   horizontalLabel: css.css({
     background: theme.isDark ? theme.colors.background.primary : theme.colors.background.secondary,
     display: `flex`,
@@ -3242,7 +3242,7 @@ function keyLabelToOption(key, label) {
 const filterNoOp = () => true;
 function AdHocFilterRenderer({ filter, model }) {
   var _a, _b, _c, _d, _e;
-  const styles = ui.useStyles2(getStyles$e);
+  const styles = ui.useStyles2(getStyles$f);
   const [keys, setKeys] = React.useState([]);
   const [values, setValues] = React.useState([]);
   const [isKeysLoading, setIsKeysLoading] = React.useState(false);
@@ -3445,7 +3445,7 @@ function AdHocFilterRenderer({ filter, model }) {
     onClick: () => model._removeFilter(filter)
   }));
 }
-const getStyles$e = (theme) => ({
+const getStyles$f = (theme) => ({
   field: css.css({
     marginBottom: 0
   }),
@@ -3628,7 +3628,7 @@ var __objRest$3 = (source, exclude) => {
 const DropdownItem = React.forwardRef(
   function DropdownItem2(_a, ref) {
     var _b = _a, { children, active, addGroupBottomBorder, isMultiValueEdit, checked } = _b, rest = __objRest$3(_b, ["children", "active", "addGroupBottomBorder", "isMultiValueEdit", "checked"]);
-    const styles = ui.useStyles2(getStyles$d);
+    const styles = ui.useStyles2(getStyles$e);
     const id = React.useId();
     return /* @__PURE__ */ React__default["default"].createElement("div", __spreadValues$C({
       ref,
@@ -3646,7 +3646,7 @@ const DropdownItem = React.forwardRef(
     }) : null, children)));
   }
 );
-const getStyles$d = (theme) => ({
+const getStyles$e = (theme) => ({
   option: css.css({
     label: "grafana-select-option",
     top: 0,
@@ -3717,7 +3717,7 @@ const OptionsErrorPlaceholder = ({ handleFetchOptions }) => {
   }, "An error has occurred fetching labels. Click to retry");
 };
 const MultiValueApplyButton = ({ onApply, floatingElement, maxOptionWidth, menuHeight }) => {
-  const styles = ui.useStyles2(getStyles$d);
+  const styles = ui.useStyles2(getStyles$e);
   const floatingElementRect = floatingElement == null ? void 0 : floatingElement.getBoundingClientRect();
   return /* @__PURE__ */ React__default["default"].createElement("div", {
     className: styles.multiValueApplyWrapper,
@@ -3963,7 +3963,7 @@ const MultiValuePill = ({
   handleEditMultiValuePill
 }) => {
   var _a, _b;
-  const styles = ui.useStyles2(getStyles$c);
+  const styles = ui.useStyles2(getStyles$d);
   const editMultiValuePill = React.useCallback(
     (e) => {
       e.stopPropagation();
@@ -4016,7 +4016,7 @@ const MultiValuePill = ({
     id: `${item.value}-${index}-close-icon`
   })));
 };
-const getStyles$c = (theme) => ({
+const getStyles$d = (theme) => ({
   basePill: css.css(__spreadProps$p(__spreadValues$B({
     display: "flex",
     alignItems: "center",
@@ -4073,7 +4073,7 @@ const AdHocCombobox = React.forwardRef(function AdHocCombobox2({ filter, model,
   const [inputValue, setInputValue] = React.useState("");
   const [activeIndex, setActiveIndex] = React.useState(null);
   const [filterInputType, setInputType] = React.useState(!isAlwaysWip ? "value" : "key");
-  const styles = ui.useStyles2(getStyles$b);
+  const styles = ui.useStyles2(getStyles$c);
   const [filterMultiValues, setFilterMultiValues] = React.useState([]);
   const [_, setForceRefresh] = React.useState({});
   const allowCustomValue = (_a = model.state.allowCustomValue) != null ? _a : true;
@@ -4577,7 +4577,7 @@ const AdHocCombobox = React.forwardRef(function AdHocCombobox2({ filter, model,
     menuHeight: Math.min(rowVirtualizer.getTotalSize(), MAX_MENU_HEIGHT)
   }) : null))));
 });
-const getStyles$b = (theme) => ({
+const getStyles$c = (theme) => ({
   comboboxWrapper: css.css({
     display: "flex",
     flexWrap: "wrap"
@@ -4668,7 +4668,7 @@ var __spreadValues$z = (a, b) => {
 var __spreadProps$n = (a, b) => __defProps$n(a, __getOwnPropDescs$n(b));
 function AdHocFilterPill({ filter, model, readOnly, focusOnWipInputRef }) {
   var _a, _b, _c;
-  const styles = ui.useStyles2(getStyles$a);
+  const styles = ui.useStyles2(getStyles$b);
   const [viewMode, setViewMode] = React.useState(true);
   const [shouldFocusOnPillWrapper, setShouldFocusOnPillWrapper] = React.useState(false);
   const pillWrapperRef = React.useRef(null);
@@ -4758,7 +4758,7 @@ function AdHocFilterPill({ filter, model, readOnly, focusOnWipInputRef }) {
     populateInputOnEdit
   });
 }
-const getStyles$a = (theme) => ({
+const getStyles$b = (theme) => ({
   combinedFilterPill: css.css(__spreadProps$n(__spreadValues$z({
     display: "flex",
     alignItems: "center",
@@ -4819,7 +4819,7 @@ const AdHocFiltersAlwaysWipCombobox = React.forwardRef(function AdHocFiltersAlwa
 
 const AdHocFiltersComboboxRenderer = React.memo(function AdHocFiltersComboboxRenderer2({ model }) {
   const { filters, readOnly } = model.useState();
-  const styles = ui.useStyles2(getStyles$9);
+  const styles = ui.useStyles2(getStyles$a);
   const focusOnWipInputRef = React.useRef();
   return /* @__PURE__ */ React__default["default"].createElement("div", {
     className: css.cx(styles.comboboxWrapper, { [styles.comboboxFocusOutline]: !readOnly }),
@@ -4842,7 +4842,7 @@ const AdHocFiltersComboboxRenderer = React.memo(function AdHocFiltersComboboxRen
     ref: focusOnWipInputRef
   }) : null);
 });
-const getStyles$9 = (theme) => ({
+const getStyles$a = (theme) => ({
   comboboxWrapper: css.css({
     display: "flex",
     flexWrap: "wrap",
@@ -5095,7 +5095,7 @@ function renderExpression(builder, filters) {
 }
 function AdHocFiltersVariableRenderer({ model }) {
   const { filters, readOnly, addFilterButtonText } = model.useState();
-  const styles = ui.useStyles2(getStyles$8);
+  const styles = ui.useStyles2(getStyles$9);
   if (model.state.layout === "combobox") {
     return /* @__PURE__ */ React__default["default"].createElement(AdHocFiltersComboboxRenderer, {
       model
@@ -5114,7 +5114,7 @@ function AdHocFiltersVariableRenderer({ model }) {
     addFilterButtonText
   }));
 }
-const getStyles$8 = (theme) => ({
+const getStyles$9 = (theme) => ({
   wrapper: css.css({
     display: "flex",
     flexWrap: "wrap",
@@ -6545,6 +6545,13 @@ function findAllObjects(scene, check) {
   });
   return found;
 }
+function findDescendent(scene, descendentType) {
+  function isDescendentType(scene2) {
+    return scene2 instanceof descendentType;
+  }
+  const targetScenes = findAllObjects(scene, isDescendentType);
+  return targetScenes.find(isDescendentType);
+}
 function getDataLayers(sceneObject, localOnly = false) {
   let currentLevel = sceneObject;
   let collected = [];
@@ -6629,7 +6636,8 @@ const sceneGraph = {
   getAncestor,
   findDescendents,
   getQueryController,
-  getUrlSyncManager
+  getUrlSyncManager,
+  findDescendent
 };
 
 class UniqueUrlKeyMapper {
@@ -9843,7 +9851,7 @@ class EmbeddedScene extends SceneObjectBase {
 EmbeddedScene.Component = EmbeddedSceneRenderer;
 function EmbeddedSceneRenderer({ model }) {
   const { body, controls } = model.useState();
-  const styles = ui.useStyles2(getStyles$7);
+  const styles = ui.useStyles2(getStyles$8);
   return /* @__PURE__ */ React__default["default"].createElement("div", {
     className: styles.container
   }, controls && /* @__PURE__ */ React__default["default"].createElement("div", {
@@ -9857,7 +9865,7 @@ function EmbeddedSceneRenderer({ model }) {
     model: body
   })));
 }
-const getStyles$7 = (theme) => {
+const getStyles$8 = (theme) => {
   return {
     container: css.css({
       flexGrow: 1,
@@ -10074,7 +10082,7 @@ const LazyLoader = React__default["default"].forwardRef(
   (_a, ref) => {
     var _b = _a, { children, onLoad, onChange, className } = _b, rest = __objRest$1(_b, ["children", "onLoad", "onChange", "className"]);
     const id = useUniqueId();
-    const { hideEmpty } = ui.useStyles2(getStyles$6);
+    const { hideEmpty } = ui.useStyles2(getStyles$7);
     const [loaded, setLoaded] = React.useState(false);
     const [isInView, setIsInView] = React.useState(false);
     const innerRef = React.useRef(null);
@@ -10108,7 +10116,7 @@ const LazyLoader = React__default["default"].forwardRef(
     }, rest), loaded && (typeof children === "function" ? children({ isInView }) : children));
   }
 );
-function getStyles$6() {
+function getStyles$7() {
   return {
     hideEmpty: css.css({
       "&:empty": {
@@ -10805,7 +10813,7 @@ NestedScene.Component = NestedSceneRenderer;
 function NestedSceneRenderer({ model }) {
   const { title, isCollapsed, canCollapse, canRemove, body, controls } = model.useState();
   const gridRow = ui.useStyles2(getSceneGridRowStyles);
-  const styles = ui.useStyles2(getStyles$5);
+  const styles = ui.useStyles2(getStyles$6);
   const toolbarControls = (controls != null ? controls : []).map((action) => /* @__PURE__ */ React__default["default"].createElement(action.Component, {
     key: action.state.key,
     model: action
@@ -10840,7 +10848,7 @@ function NestedSceneRenderer({ model }) {
     model: body
   }));
 }
-const getStyles$5 = (theme) => ({
+const getStyles$6 = (theme) => ({
   wrapper: css.css({
     display: "flex",
     flexDirection: "column",
@@ -11418,7 +11426,7 @@ const timeShiftAlignmentProcessor = (primary, secondary) => {
 };
 function SceneTimeRangeCompareRenderer({ model }) {
   var _a;
-  const styles = ui.useStyles2(getStyles$4);
+  const styles = ui.useStyles2(getStyles$5);
   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;
@@ -11458,7 +11466,7 @@ function SceneTimeRangeCompareRenderer({ model }) {
     isOpen: false
   }, previousValue.label));
 }
-function getStyles$4(theme) {
+function getStyles$5(theme) {
   return {
     previewButton: css.css({
       "&:disabled": {
@@ -11566,6 +11574,92 @@ SceneControlsSpacer.Component = (_props) => {
   });
 };
 
+const LIMIT_FRAMES_TITLE_ITEM_TRANSFORMATION_KEY = "limit_frames_title_item_transformation";
+class LimitFramesTitleItemScene extends SceneObjectBase {
+  constructor(state) {
+    super(state);
+    this.addActivationHandler(this.onActivate.bind(this));
+  }
+  onActivate() {
+    var _a;
+    const panel = sceneGraph.getAncestor(this, VizPanel);
+    const $transformedDataArray = sceneGraph.findAllObjects(panel, (scene) => scene.state.key === LIMIT_FRAMES_TITLE_ITEM_TRANSFORMATION_KEY);
+    const $transformedData = $transformedDataArray[0];
+    if ($transformedData) {
+      const $untransformedDataProvider = (_a = sceneGraph.findDescendent($transformedData, SceneDataTransformer)) != null ? _a : sceneGraph.findDescendent(panel, SceneQueryRunner);
+      this._subs.add(
+        $transformedData.subscribeToState((transformedDataState) => {
+          var _a2, _b, _c;
+          if ($untransformedDataProvider && ((_a2 = $untransformedDataProvider.state.data) == null ? void 0 : _a2.series.length) !== this.state.currentFrameCount) {
+            this.setState({
+              currentFrameCount: (_b = transformedDataState.data) == null ? void 0 : _b.series.length,
+              totalFrameCount: (_c = $untransformedDataProvider.state.data) == null ? void 0 : _c.series.length
+            });
+          }
+        })
+      );
+    }
+  }
+  showAllSeries() {
+    const $data = sceneGraph.getData(this);
+    if ($data instanceof SceneDataTransformer) {
+      $data.setState({
+        transformations: []
+      });
+      this.setState({
+        showAllFrames: true
+      });
+      $data.reprocessTransformations();
+    }
+  }
+}
+LimitFramesTitleItemScene.Component = ({ model }) => {
+  const { showAllFrames, currentFrameCount, frameLimit, totalFrameCount } = model.useState();
+  const styles = ui.useStyles2(getStyles$4);
+  if (totalFrameCount === void 0 || showAllFrames || !currentFrameCount || totalFrameCount < frameLimit) {
+    return null;
+  }
+  return /* @__PURE__ */ React__default["default"].createElement("div", {
+    className: styles.timeSeriesDisclaimer
+  }, /* @__PURE__ */ React__default["default"].createElement("span", {
+    className: styles.warningMessage
+  }, /* @__PURE__ */ React__default["default"].createElement(React__default["default"].Fragment, null, /* @__PURE__ */ React__default["default"].createElement(ui.Icon, {
+    title: `Showing only ${model.state.frameLimit} series`,
+    name: "exclamation-triangle",
+    "aria-hidden": "true"
+  }))), /* @__PURE__ */ React__default["default"].createElement(ui.Tooltip, {
+    content: "Rendering too many series in a single panel may impact performance and make data harder to read."
+  }, /* @__PURE__ */ React__default["default"].createElement(ui.Button, {
+    variant: "secondary",
+    size: "sm",
+    onClick: () => model.showAllSeries()
+  }, /* @__PURE__ */ React__default["default"].createElement(React__default["default"].Fragment, null, "Show all ", totalFrameCount))));
+};
+function limitFramesTransformation(limit) {
+  return (source) => {
+    return source.pipe(
+      rxjs.map((frames) => {
+        return frames.slice(0, limit);
+      })
+    );
+  };
+}
+const getStyles$4 = (theme) => ({
+  timeSeriesDisclaimer: css.css({
+    label: "time-series-disclaimer",
+    display: "flex",
+    alignItems: "center",
+    gap: theme.spacing(1)
+  }),
+  warningMessage: css.css({
+    display: "flex",
+    alignItems: "center",
+    gap: theme.spacing(0.5),
+    color: theme.colors.warning.main,
+    fontSize: theme.typography.bodySmall.fontSize
+  })
+});
+
 class SceneFlexLayout extends SceneObjectBase {
   toggleDirection() {
     this.setState({
@@ -13016,6 +13110,10 @@ class VizPanelBuilder {
     this._state.title = title;
     return this;
   }
+  setTitleItems(titleItems) {
+    this._state.titleItems = titleItems;
+    return this;
+  }
   setDescription(description) {
     this._state.description = description;
     return this;
@@ -13113,12 +13211,39 @@ class VizPanelBuilder {
     return this;
   }
   build() {
+    this.limitFrames();
     const panel = new VizPanel(__spreadProps(__spreadValues({}, this._state), {
       options: this._panelOptionsBuilder.build(),
       fieldConfig: this._fieldConfigBuilder.build()
     }));
     return panel;
   }
+  limitFrames() {
+    if (this._state.$data) {
+      const limitSeriesTitleItem = this.getLimitSeriesTitleItem();
+      if (limitSeriesTitleItem && limitSeriesTitleItem.state.frameLimit) {
+        this.setData(new SceneDataTransformer({
+          key: LIMIT_FRAMES_TITLE_ITEM_TRANSFORMATION_KEY,
+          $data: this._state.$data,
+          transformations: [() => limitFramesTransformation(limitSeriesTitleItem.state.frameLimit)]
+        }));
+      }
+    }
+  }
+  getLimitSeriesTitleItem() {
+    if (this._state.titleItems) {
+      if (Array.isArray(this._state.titleItems)) {
+        for (const titleItem of this._state.titleItems) {
+          if (titleItem instanceof LimitFramesTitleItemScene) {
+            return titleItem;
+          }
+        }
+      } else if (this._state.titleItems instanceof LimitFramesTitleItemScene) {
+        return this._state.titleItems;
+      }
+    }
+    return void 0;
+  }
 }
 
 const PanelOptionsBuilders = {
@@ -13547,6 +13672,7 @@ exports.FieldConfigBuilders = FieldConfigBuilders;
 exports.FieldConfigOverridesBuilder = FieldConfigOverridesBuilder;
 exports.GroupByVariable = GroupByVariable;
 exports.IntervalVariable = IntervalVariable;
+exports.LimitFramesTitleItemScene = LimitFramesTitleItemScene;
 exports.LocalValueVariable = LocalValueVariable;
 exports.MultiValueVariable = MultiValueVariable;
 exports.NestedScene = NestedScene;