@grafana/scenes 5.14.7 → 5.15.0--canary.845.11012035874.0

package/dist/index.js

@@ -8206,6 +8206,39 @@ class SceneTimeZoneOverride extends SceneTimeRangeTransformerBase {
   }
 }
 
+class DataProviderProxy extends SceneObjectBase {
+  constructor(state) {
+    super({
+      source: state.source,
+      data: state.source.resolve().state.data
+    });
+    this.addActivationHandler(() => {
+      this._subs.add(
+        this.state.source.resolve().subscribeToState((newState, oldState) => {
+          if (newState.data !== oldState.data) {
+            this.setState({ data: newState.data });
+          }
+        })
+      );
+    });
+  }
+  setContainerWidth(width) {
+    var _a, _b;
+    (_b = (_a = this.state.source.resolve()).setContainerWidth) == null ? void 0 : _b.call(_a, width);
+  }
+  isDataReadyToDisplay() {
+    var _a, _b, _c;
+    return (_c = (_b = (_a = this.state.source.resolve()).isDataReadyToDisplay) == null ? void 0 : _b.call(_a)) != null ? _c : true;
+  }
+  cancelQuery() {
+    var _a, _b;
+    (_b = (_a = this.state.source.resolve()).cancelQuery) == null ? void 0 : _b.call(_a);
+  }
+  getResultsStream() {
+    return this.state.source.resolve().getResultsStream();
+  }
+}
+
 var __defProp$k = Object.defineProperty;
 var __defProps$b = Object.defineProperties;
 var __getOwnPropDescs$b = Object.getOwnPropertyDescriptors;
@@ -9797,7 +9830,7 @@ var __objRest = (source, exclude) => {
   return target;
 };
 function SceneGridLayoutRenderer({ model }) {
-  const { children, isLazy, isDraggable, isResizable } = model.useState();
+  const { children, isLazy, isDraggable, isResizable, showPanelSearch } = model.useState();
   const [outerDivRef, { width, height }] = reactUse.useMeasure();
   const ref = React.useRef(null);
   React.useEffect(() => {
@@ -9843,7 +9876,67 @@ function SceneGridLayoutRenderer({ model }) {
   return /* @__PURE__ */ React__default["default"].createElement("div", {
     ref: outerDivRef,
     style: { flex: "1 1 auto", position: "relative", zIndex: 1, width: "100%" }
-  }, renderGrid(width, height));
+  }, showPanelSearch && /* @__PURE__ */ React__default["default"].createElement(PanelSearchControls, {
+    model
+  }), renderGrid(width, height));
+}
+function PanelSearchControls({ model }) {
+  const { searchString, panelsPerRow } = model.useState();
+  const styles = ui.useStyles2(getPanelSearchStyles);
+  const onSearchStringChange = React.useCallback(
+    (e) => {
+      model.setState({ searchString: e.currentTarget.value });
+    },
+    [model]
+  );
+  const onPanelsPerRowChange = React.useCallback(
+    (e) => {
+      model.setState({ panelsPerRow: Number.parseInt(e.currentTarget.value, 10) });
+    },
+    [model]
+  );
+  return /* @__PURE__ */ React__default["default"].createElement("div", {
+    className: styles.wrapper
+  }, /* @__PURE__ */ React__default["default"].createElement("div", {
+    id: "panel-search",
+    className: styles.input
+  }, /* @__PURE__ */ React__default["default"].createElement(ControlsLabel, {
+    isLoading: false,
+    label: "Panel search",
+    htmlFor: "panel-search-input"
+  }), /* @__PURE__ */ React__default["default"].createElement(ui.Input, {
+    id: "panel-search-input",
+    label: "Search",
+    placeholder: "Enter value",
+    value: searchString,
+    onChange: onSearchStringChange
+  })), /* @__PURE__ */ React__default["default"].createElement("div", {
+    id: "panels-per-row",
+    className: styles.input
+  }, /* @__PURE__ */ React__default["default"].createElement(ControlsLabel, {
+    isLoading: false,
+    label: "Panels per row",
+    htmlFor: "panels-per-row-input"
+  }), /* @__PURE__ */ React__default["default"].createElement(ui.Input, {
+    id: "panels-per-row-input",
+    type: "number",
+    placeholder: "Enter value",
+    label: "Panels per row",
+    value: panelsPerRow,
+    onChange: onPanelsPerRowChange
+  })));
+}
+function getPanelSearchStyles(theme) {
+  return {
+    wrapper: css.css({
+      display: "flex",
+      gap: theme.spacing(1),
+      marginBottom: theme.spacing(1)
+    }),
+    input: css.css({
+      display: "flex"
+    })
+  };
 }
 const GridItemWrapper = React__default["default"].forwardRef((props, ref) => {
   var _b;
@@ -9992,6 +10085,7 @@ const _SceneGridLayout = class extends SceneObjectBase {
     this._skipOnLayoutChange = false;
     this._oldLayout = [];
     this._loadOldLayout = false;
+    this.savedLayout = void 0;
     this.onLayoutChange = (layout) => {
       if (this._skipOnLayoutChange) {
         this._skipOnLayoutChange = false;
@@ -10200,7 +10294,38 @@ const _SceneGridLayout = class extends SceneObjectBase {
   }
   buildGridLayout(width, height) {
     let cells = [];
-    for (const child of this.state.children) {
+    const searchString = this.state.searchString;
+    const panelsPerRow = this.state.panelsPerRow;
+    let children = this.state.children;
+    if (searchString && searchString !== "" || panelsPerRow && Number.isInteger(panelsPerRow)) {
+      if (this.savedLayout === void 0) {
+        this.savedLayout = this.state.children.map((v) => v.clone());
+      }
+      const panelFilterInterpolated = interpolate(this, searchString).toLowerCase();
+      const filteredChildren = this.state.children.filter((v) => {
+        var _a, _b, _c, _d;
+        const panelTitleInterpolated = interpolate(v, (_b = (_a = v.state.body) == null ? void 0 : _a.state) == null ? void 0 : _b.title).toLowerCase();
+        return typeof ((_d = (_c = v.state.body) == null ? void 0 : _c.state) == null ? void 0 : _d.title) === "string" && panelTitleInterpolated.includes(panelFilterInterpolated);
+      });
+      this._skipOnLayoutChange = true;
+      const rowSize = typeof panelsPerRow === "number" && Number.isInteger(panelsPerRow) && panelsPerRow > 0 ? panelsPerRow : 2;
+      const panelWidth = GRID_COLUMN_COUNT / rowSize;
+      const panelHeight = 5;
+      return filteredChildren.map((child, i) => __spreadProps$5(__spreadValues$8({}, this.toGridCell(child)), {
+        x: i % rowSize * panelWidth,
+        y: Math.floor(i / rowSize) * panelHeight,
+        w: panelWidth,
+        h: panelHeight,
+        isResizable: false,
+        isDraggable: false
+      }));
+    } else if ((!searchString || searchString === "") && !panelsPerRow) {
+      if (this.savedLayout) {
+        children = this.savedLayout;
+        this.savedLayout = void 0;
+      }
+    }
+    for (const child of children) {
       cells.push(this.toGridCell(child));
       if (child instanceof SceneGridRow && !child.state.isCollapsed) {
         for (const rowChild of child.state.children) {
@@ -13105,6 +13230,7 @@ const sceneUtils = {
 exports.AdHocFiltersVariable = AdHocFiltersVariable;
 exports.ConstantVariable = ConstantVariable;
 exports.CustomVariable = CustomVariable;
+exports.DataProviderProxy = DataProviderProxy;
 exports.DataSourceVariable = DataSourceVariable;
 exports.EmbeddedScene = EmbeddedScene;
 exports.FieldConfigBuilder = FieldConfigBuilder;