@grafana/scenes 5.27.0--canary.912.12031759221.0 → 5.27.0--canary.968.12050773878.0

package/dist/index.js

@@ -169,7 +169,7 @@ function SceneComponentWrapperWithoutMemo(_a) {
     setValue((prevState) => prevState + 1);
     return unsub;
   }, [model]);
-  if (!model.isActive) {
+  if (!model.isActive && !model.renderBeforeActivation) {
     return null;
   }
   return /* @__PURE__ */ React__default["default"].createElement(Component, __spreadProps$v(__spreadValues$N({}, otherProps), {
@@ -241,6 +241,7 @@ class SceneObjectBase {
     this._deactivationHandlers = /* @__PURE__ */ new Map();
     this._subs = new rxjs.Subscription();
     this._refCount = 0;
+    this._renderBeforeActivation = false;
     if (!state.key) {
       state.key = uuid.v4();
     }
@@ -254,6 +255,9 @@ class SceneObjectBase {
   get isActive() {
     return this._isActive;
   }
+  get renderBeforeActivation() {
+    return this._renderBeforeActivation;
+  }
   get parent() {
     return this._parent;
   }
@@ -2434,7 +2438,7 @@ function patchGetAdhocFilters(filterVar) {
   templateSrv.getAdhocFilters = function getAdhocFiltersScenePatch(dsName) {
     var _a;
     if (allActiveFilterSets.size === 0) {
-      return originalGetAdhocFilters.call(templateSrv);
+      return originalGetAdhocFilters.call(templateSrv, dsName);
     }
     const ds = runtime.getDataSourceSrv().getInstanceSettings(dsName);
     if (!ds) {
@@ -3110,7 +3114,7 @@ function LoadingIndicator(props) {
 }
 
 function ControlsLabel(props) {
-  const styles = ui.useStyles2(getStyles$g);
+  const styles = ui.useStyles2(getStyles$f);
   const theme = ui.useTheme2();
   const isVertical = props.layout === "vertical";
   const loadingIndicator = Boolean(props.isLoading) ? /* @__PURE__ */ React__default["default"].createElement("div", {
@@ -3173,7 +3177,7 @@ function ControlsLabel(props) {
   }
   return labelElement;
 }
-const getStyles$g = (theme) => ({
+const getStyles$f = (theme) => ({
   horizontalLabel: css.css({
     background: theme.isDark ? theme.colors.background.primary : theme.colors.background.secondary,
     display: `flex`,
@@ -3242,7 +3246,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$e);
   const [keys, setKeys] = React.useState([]);
   const [values, setValues] = React.useState([]);
   const [isKeysLoading, setIsKeysLoading] = React.useState(false);
@@ -3445,7 +3449,7 @@ function AdHocFilterRenderer({ filter, model }) {
     onClick: () => model._removeFilter(filter)
   }));
 }
-const getStyles$f = (theme) => ({
+const getStyles$e = (theme) => ({
   field: css.css({
     marginBottom: 0
   }),
@@ -3628,7 +3632,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$e);
+    const styles = ui.useStyles2(getStyles$d);
     const id = React.useId();
     return /* @__PURE__ */ React__default["default"].createElement("div", __spreadValues$C({
       ref,
@@ -3646,7 +3650,7 @@ const DropdownItem = React.forwardRef(
     }) : null, children)));
   }
 );
-const getStyles$e = (theme) => ({
+const getStyles$d = (theme) => ({
   option: css.css({
     label: "grafana-select-option",
     top: 0,
@@ -3717,7 +3721,7 @@ const OptionsErrorPlaceholder = ({ handleFetchOptions }) => {
   }, "An error has occurred fetching labels. Click to retry");
 };
 const MultiValueApplyButton = ({ onApply, floatingElement, maxOptionWidth, menuHeight }) => {
-  const styles = ui.useStyles2(getStyles$e);
+  const styles = ui.useStyles2(getStyles$d);
   const floatingElementRect = floatingElement == null ? void 0 : floatingElement.getBoundingClientRect();
   return /* @__PURE__ */ React__default["default"].createElement("div", {
     className: styles.multiValueApplyWrapper,
@@ -3963,7 +3967,7 @@ const MultiValuePill = ({
   handleEditMultiValuePill
 }) => {
   var _a, _b;
-  const styles = ui.useStyles2(getStyles$d);
+  const styles = ui.useStyles2(getStyles$c);
   const editMultiValuePill = React.useCallback(
     (e) => {
       e.stopPropagation();
@@ -4016,7 +4020,7 @@ const MultiValuePill = ({
     id: `${item.value}-${index}-close-icon`
   })));
 };
-const getStyles$d = (theme) => ({
+const getStyles$c = (theme) => ({
   basePill: css.css(__spreadProps$p(__spreadValues$B({
     display: "flex",
     alignItems: "center",
@@ -4073,7 +4077,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$c);
+  const styles = ui.useStyles2(getStyles$b);
   const [filterMultiValues, setFilterMultiValues] = React.useState([]);
   const [_, setForceRefresh] = React.useState({});
   const allowCustomValue = (_a = model.state.allowCustomValue) != null ? _a : true;
@@ -4577,7 +4581,7 @@ const AdHocCombobox = React.forwardRef(function AdHocCombobox2({ filter, model,
     menuHeight: Math.min(rowVirtualizer.getTotalSize(), MAX_MENU_HEIGHT)
   }) : null))));
 });
-const getStyles$c = (theme) => ({
+const getStyles$b = (theme) => ({
   comboboxWrapper: css.css({
     display: "flex",
     flexWrap: "wrap"
@@ -4668,7 +4672,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$b);
+  const styles = ui.useStyles2(getStyles$a);
   const [viewMode, setViewMode] = React.useState(true);
   const [shouldFocusOnPillWrapper, setShouldFocusOnPillWrapper] = React.useState(false);
   const pillWrapperRef = React.useRef(null);
@@ -4758,7 +4762,7 @@ function AdHocFilterPill({ filter, model, readOnly, focusOnWipInputRef }) {
     populateInputOnEdit
   });
 }
-const getStyles$b = (theme) => ({
+const getStyles$a = (theme) => ({
   combinedFilterPill: css.css(__spreadProps$n(__spreadValues$z({
     display: "flex",
     alignItems: "center",
@@ -4819,7 +4823,7 @@ const AdHocFiltersAlwaysWipCombobox = React.forwardRef(function AdHocFiltersAlwa
 
 const AdHocFiltersComboboxRenderer = React.memo(function AdHocFiltersComboboxRenderer2({ model }) {
   const { filters, readOnly } = model.useState();
-  const styles = ui.useStyles2(getStyles$a);
+  const styles = ui.useStyles2(getStyles$9);
   const focusOnWipInputRef = React.useRef();
   return /* @__PURE__ */ React__default["default"].createElement("div", {
     className: css.cx(styles.comboboxWrapper, { [styles.comboboxFocusOutline]: !readOnly }),
@@ -4842,7 +4846,7 @@ const AdHocFiltersComboboxRenderer = React.memo(function AdHocFiltersComboboxRen
     ref: focusOnWipInputRef
   }) : null);
 });
-const getStyles$a = (theme) => ({
+const getStyles$9 = (theme) => ({
   comboboxWrapper: css.css({
     display: "flex",
     flexWrap: "wrap",
@@ -5095,7 +5099,7 @@ function renderExpression(builder, filters) {
 }
 function AdHocFiltersVariableRenderer({ model }) {
   const { filters, readOnly, addFilterButtonText } = model.useState();
-  const styles = ui.useStyles2(getStyles$9);
+  const styles = ui.useStyles2(getStyles$8);
   if (model.state.layout === "combobox") {
     return /* @__PURE__ */ React__default["default"].createElement(AdHocFiltersComboboxRenderer, {
       model
@@ -5114,7 +5118,7 @@ function AdHocFiltersVariableRenderer({ model }) {
     addFilterButtonText
   }));
 }
-const getStyles$9 = (theme) => ({
+const getStyles$8 = (theme) => ({
   wrapper: css.css({
     display: "flex",
     flexWrap: "wrap",
@@ -6545,13 +6549,6 @@ 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 = [];
@@ -6636,8 +6633,7 @@ const sceneGraph = {
   getAncestor,
   findDescendents,
   getQueryController,
-  getUrlSyncManager,
-  findDescendent
+  getUrlSyncManager
 };
 
 class UniqueUrlKeyMapper {
@@ -6876,6 +6872,7 @@ function VizPanelRenderer({ model }) {
     _pluginLoadError,
     displayMode,
     hoverHeader,
+    showMenuAlways,
     hoverHeaderOffset,
     menu,
     headerActions,
@@ -6997,6 +6994,7 @@ function VizPanelRenderer({ model }) {
     width,
     height,
     displayMode,
+    showMenuAlways,
     hoverHeader,
     hoverHeaderOffset,
     titleItems: titleItemsElement,
@@ -9851,7 +9849,7 @@ class EmbeddedScene extends SceneObjectBase {
 EmbeddedScene.Component = EmbeddedSceneRenderer;
 function EmbeddedSceneRenderer({ model }) {
   const { body, controls } = model.useState();
-  const styles = ui.useStyles2(getStyles$8);
+  const styles = ui.useStyles2(getStyles$7);
   return /* @__PURE__ */ React__default["default"].createElement("div", {
     className: styles.container
   }, controls && /* @__PURE__ */ React__default["default"].createElement("div", {
@@ -9865,7 +9863,7 @@ function EmbeddedSceneRenderer({ model }) {
     model: body
   })));
 }
-const getStyles$8 = (theme) => {
+const getStyles$7 = (theme) => {
   return {
     container: css.css({
       flexGrow: 1,
@@ -10082,7 +10080,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$7);
+    const { hideEmpty } = ui.useStyles2(getStyles$6);
     const [loaded, setLoaded] = React.useState(false);
     const [isInView, setIsInView] = React.useState(false);
     const innerRef = React.useRef(null);
@@ -10116,7 +10114,7 @@ const LazyLoader = React__default["default"].forwardRef(
     }, rest), loaded && (typeof children === "function" ? children({ isInView }) : children));
   }
 );
-function getStyles$7() {
+function getStyles$6() {
   return {
     hideEmpty: css.css({
       "&:empty": {
@@ -10813,7 +10811,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$6);
+  const styles = ui.useStyles2(getStyles$5);
   const toolbarControls = (controls != null ? controls : []).map((action) => /* @__PURE__ */ React__default["default"].createElement(action.Component, {
     key: action.state.key,
     model: action
@@ -10848,7 +10846,7 @@ function NestedSceneRenderer({ model }) {
     model: body
   }));
 }
-const getStyles$6 = (theme) => ({
+const getStyles$5 = (theme) => ({
   wrapper: css.css({
     display: "flex",
     flexDirection: "column",
@@ -11426,7 +11424,7 @@ const timeShiftAlignmentProcessor = (primary, secondary) => {
 };
 function SceneTimeRangeCompareRenderer({ model }) {
   var _a;
-  const styles = ui.useStyles2(getStyles$5);
+  const styles = ui.useStyles2(getStyles$4);
   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;
@@ -11466,7 +11464,7 @@ function SceneTimeRangeCompareRenderer({ model }) {
     isOpen: false
   }, previousValue.label));
 }
-function getStyles$5(theme) {
+function getStyles$4(theme) {
   return {
     previewButton: css.css({
       "&:disabled": {
@@ -11559,107 +11557,18 @@ function getMultiVariableValues(variable) {
   return [{ value, label: text }];
 }
 
-const _SceneControlsSpacer = class extends SceneObjectBase {
+class SceneControlsSpacer extends SceneObjectBase {
   constructor() {
     super({});
+    this._renderBeforeActivation = true;
   }
-  get Component() {
-    return _SceneControlsSpacer.Component;
-  }
-};
-let SceneControlsSpacer = _SceneControlsSpacer;
+}
 SceneControlsSpacer.Component = (_props) => {
   return /* @__PURE__ */ React__default["default"].createElement("div", {
     style: { flexGrow: 1 }
   });
 };
 
-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() {
-    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 $untransformedDataProviders = sceneGraph.findAllObjects($transformedData, (scene) => scene instanceof SceneDataTransformer || scene instanceof SceneQueryRunner);
-      const $untransformedDataProvider = $untransformedDataProviders[0];
-      this._subs.add(
-        $transformedData.subscribeToState((transformedDataState) => {
-          var _a, _b, _c;
-          if ($untransformedDataProvider && ((_a = $untransformedDataProvider.state.data) == null ? void 0 : _a.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({
@@ -13110,10 +13019,6 @@ class VizPanelBuilder {
     this._state.title = title;
     return this;
   }
-  setTitleItems(titleItems) {
-    this._state.titleItems = titleItems;
-    return this;
-  }
   setDescription(description) {
     this._state.description = description;
     return this;
@@ -13126,6 +13031,10 @@ class VizPanelBuilder {
     this._state.hoverHeader = hoverHeader;
     return this;
   }
+  setShowMenuAlways(showMenuAlways) {
+    this._state.showMenuAlways = showMenuAlways;
+    return this;
+  }
   setMenu(menu) {
     this._state.menu = menu;
     return this;
@@ -13211,41 +13120,12 @@ class VizPanelBuilder {
     return this;
   }
   build() {
-    if (this._state.$data) {
-      this.limitFramesIfLimitSceneExists();
-    }
     const panel = new VizPanel(__spreadProps(__spreadValues({}, this._state), {
       options: this._panelOptionsBuilder.build(),
       fieldConfig: this._fieldConfigBuilder.build()
     }));
     return panel;
   }
-  limitFramesIfLimitSceneExists() {
-    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 = {
@@ -13674,7 +13554,6 @@ exports.FieldConfigBuilders = FieldConfigBuilders;
 exports.FieldConfigOverridesBuilder = FieldConfigOverridesBuilder;
 exports.GroupByVariable = GroupByVariable;
 exports.IntervalVariable = IntervalVariable;
-exports.LimitFramesTitleItemScene = LimitFramesTitleItemScene;
 exports.LocalValueVariable = LocalValueVariable;
 exports.MultiValueVariable = MultiValueVariable;
 exports.NestedScene = NestedScene;