@grafana/scenes 0.0.1

package/dist/esm/components/VizPanel/VizPanelRenderer.js

@@ -0,0 +1,76 @@
+import React, { useMemo } from 'react';
+import { useMeasure } from 'react-use';
+import { useFieldOverrides, PluginContextProvider } from '@grafana/data';
+import { getAppEvents } from '@grafana/runtime';
+import { useTheme2, PanelChrome, ErrorBoundaryAlert } from '@grafana/ui';
+import { sceneGraph } from '../../core/sceneGraph.js';
+import { SceneQueryRunner } from '../../querying/SceneQueryRunner.js';
+import { SceneDragHandle } from '../SceneDragHandle.js';
+
+function VizPanelRenderer({ model }) {
+  var _a;
+  const theme = useTheme2();
+  const replace = useMemo(
+    () => (value, scoped) => sceneGraph.interpolate(model, value, scoped),
+    [model]
+  );
+  const { title, options, fieldConfig, pluginId, pluginLoadError, $data, placement } = model.useState();
+  const [ref, { width, height }] = useMeasure();
+  const plugin = model.getPlugin();
+  const { data } = sceneGraph.getData(model).useState();
+  const parentLayout = sceneGraph.getLayout(model);
+  const isDraggable = ((_a = parentLayout.state.placement) == null ? void 0 : _a.isDraggable) ? placement == null ? void 0 : placement.isDraggable : false;
+  const dragHandle = /* @__PURE__ */ React.createElement(SceneDragHandle, {
+    layoutKey: parentLayout.state.key
+  });
+  const titleInterpolated = sceneGraph.interpolate(model, title);
+  const timeZone = sceneGraph.getTimeRange(model).state.timeZone;
+  const dataWithOverrides = useFieldOverrides(plugin, fieldConfig, data, timeZone, theme, replace);
+  if (pluginLoadError) {
+    return /* @__PURE__ */ React.createElement("div", null, "Failed to load plugin: ", pluginLoadError);
+  }
+  if (!plugin || !plugin.hasPluginId(pluginId)) {
+    return /* @__PURE__ */ React.createElement("div", null, "Loading plugin panel...");
+  }
+  if (!plugin.panel) {
+    return /* @__PURE__ */ React.createElement("div", null, "Panel plugin has no panel component");
+  }
+  const PanelComponent = plugin.panel;
+  if ($data instanceof SceneQueryRunner) {
+    $data.setContainerWidth(width);
+  }
+  return /* @__PURE__ */ React.createElement("div", {
+    ref,
+    style: { position: "absolute", width: "100%", height: "100%" }
+  }, /* @__PURE__ */ React.createElement(PanelChrome, {
+    title: titleInterpolated,
+    width,
+    height,
+    leftItems: isDraggable ? [dragHandle] : void 0
+  }, (innerWidth, innerHeight) => /* @__PURE__ */ React.createElement(React.Fragment, null, !dataWithOverrides && /* @__PURE__ */ React.createElement("div", null, "No data..."), dataWithOverrides && /* @__PURE__ */ React.createElement(ErrorBoundaryAlert, {
+    dependencies: [plugin, data]
+  }, /* @__PURE__ */ React.createElement(PluginContextProvider, {
+    meta: plugin.meta
+  }, /* @__PURE__ */ React.createElement(PanelComponent, {
+    id: 1,
+    data: dataWithOverrides,
+    title,
+    timeRange: dataWithOverrides.timeRange,
+    timeZone,
+    options,
+    fieldConfig,
+    transparent: false,
+    width: innerWidth,
+    height: innerHeight,
+    renderCounter: 0,
+    replaceVariables: (str) => str,
+    onOptionsChange: model.onOptionsChange,
+    onFieldConfigChange: model.onFieldConfigChange,
+    onChangeTimeRange: model.onChangeTimeRange,
+    eventBus: getAppEvents()
+  }))))));
+}
+VizPanelRenderer.displayName = "ScenePanelRenderer";
+
+export { VizPanelRenderer };
+//# sourceMappingURL=VizPanelRenderer.js.map

package/dist/esm/components/VizPanel/VizPanelRenderer.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"VizPanelRenderer.js","sources":["../../../../src/components/VizPanel/VizPanelRenderer.tsx"],"sourcesContent":["import React, { RefCallback, useMemo } from 'react';\nimport { useMeasure } from 'react-use';\n\nimport { PluginContextProvider, useFieldOverrides, ScopedVars } from '@grafana/data';\nimport { getAppEvents } from '@grafana/runtime';\nimport { PanelChrome, ErrorBoundaryAlert, useTheme2 } from '@grafana/ui';\n\nimport { sceneGraph } from '../../core/sceneGraph';\nimport { SceneComponentProps } from '../../core/types';\nimport { SceneQueryRunner } from '../../querying/SceneQueryRunner';\nimport { SceneDragHandle } from '../SceneDragHandle';\n\nimport { VizPanel } from './VizPanel';\n\nexport function VizPanelRenderer({ model }: SceneComponentProps<VizPanel>) {\n  const theme = useTheme2();\n  const replace = useMemo(\n    () => (value: string, scoped?: ScopedVars) => sceneGraph.interpolate(model, value, scoped),\n    [model]\n  );\n  const { title, options, fieldConfig, pluginId, pluginLoadError, $data, placement } = model.useState();\n  const [ref, { width, height }] = useMeasure();\n  const plugin = model.getPlugin();\n  const { data } = sceneGraph.getData(model).useState();\n  const parentLayout = sceneGraph.getLayout(model);\n\n  // TODO: this should probably be parentLayout.isDraggingEnabled() ? placement?.isDraggable : false\n  // The current logic is not correct, just because parent layout itself is not draggable does not mean children are not\n  const isDraggable = parentLayout.state.placement?.isDraggable ? placement?.isDraggable : false;\n  const dragHandle = <SceneDragHandle layoutKey={parentLayout.state.key!} />;\n\n  const titleInterpolated = sceneGraph.interpolate(model, title);\n\n  // Not sure we need to subscribe to this state\n  const timeZone = sceneGraph.getTimeRange(model).state.timeZone;\n\n  const dataWithOverrides = useFieldOverrides(plugin, fieldConfig, data, timeZone, theme, replace);\n\n  if (pluginLoadError) {\n    return <div>Failed to load plugin: {pluginLoadError}</div>;\n  }\n\n  if (!plugin || !plugin.hasPluginId(pluginId)) {\n    return <div>Loading plugin panel...</div>;\n  }\n\n  if (!plugin.panel) {\n    return <div>Panel plugin has no panel component</div>;\n  }\n\n  const PanelComponent = plugin.panel;\n\n  // Query runner needs to with for auto maxDataPoints\n  if ($data instanceof SceneQueryRunner) {\n    $data.setContainerWidth(width);\n  }\n\n  return (\n    <div ref={ref as RefCallback<HTMLDivElement>} style={{ position: 'absolute', width: '100%', height: '100%' }}>\n      <PanelChrome\n        title={titleInterpolated}\n        width={width}\n        height={height}\n        leftItems={isDraggable ? [dragHandle] : undefined}\n      >\n        {(innerWidth, innerHeight) => (\n          <>\n            {!dataWithOverrides && <div>No data...</div>}\n            {dataWithOverrides && (\n              <ErrorBoundaryAlert dependencies={[plugin, data]}>\n                <PluginContextProvider meta={plugin.meta}>\n                  <PanelComponent\n                    id={1}\n                    data={dataWithOverrides}\n                    title={title}\n                    timeRange={dataWithOverrides.timeRange}\n                    timeZone={timeZone}\n                    options={options}\n                    fieldConfig={fieldConfig}\n                    transparent={false}\n                    width={innerWidth}\n                    height={innerHeight}\n                    renderCounter={0}\n                    replaceVariables={(str: string) => str}\n                    onOptionsChange={model.onOptionsChange}\n                    onFieldConfigChange={model.onFieldConfigChange}\n                    onChangeTimeRange={model.onChangeTimeRange}\n                    eventBus={getAppEvents()}\n                  />\n                </PluginContextProvider>\n              </ErrorBoundaryAlert>\n            )}\n          </>\n        )}\n      </PanelChrome>\n    </div>\n  );\n}\n\nVizPanelRenderer.displayName = 'ScenePanelRenderer';\n"],"names":[],"mappings":";;;;;;;;;AAcgB,SAAA,gBAAA,CAAiB,EAAE,KAAA,EAAwC,EAAA;AAd3E,EAAA,IAAA,EAAA,CAAA;AAeE,EAAA,MAAM,QAAQ,SAAU,EAAA,CAAA;AACxB,EAAA,MAAM,OAAU,GAAA,OAAA;AAAA,IACd,MAAM,CAAC,KAAe,EAAA,MAAA,KAAwB,WAAW,WAAY,CAAA,KAAA,EAAO,OAAO,MAAM,CAAA;AAAA,IACzF,CAAC,KAAK,CAAA;AAAA,GACR,CAAA;AACA,EAAM,MAAA,EAAE,KAAO,EAAA,OAAA,EAAS,WAAa,EAAA,QAAA,EAAU,iBAAiB,KAAO,EAAA,SAAA,EAAc,GAAA,KAAA,CAAM,QAAS,EAAA,CAAA;AACpG,EAAA,MAAM,CAAC,GAAK,EAAA,EAAE,OAAO,MAAO,EAAC,IAAI,UAAW,EAAA,CAAA;AAC5C,EAAM,MAAA,MAAA,GAAS,MAAM,SAAU,EAAA,CAAA;AAC/B,EAAA,MAAM,EAAE,IAAK,EAAA,GAAI,WAAW,OAAQ,CAAA,KAAK,EAAE,QAAS,EAAA,CAAA;AACpD,EAAM,MAAA,YAAA,GAAe,UAAW,CAAA,SAAA,CAAU,KAAK,CAAA,CAAA;AAI/C,EAAA,MAAM,gBAAc,EAAa,GAAA,YAAA,CAAA,KAAA,CAAM,cAAnB,IAA8B,GAAA,KAAA,CAAA,GAAA,EAAA,CAAA,WAAA,IAAc,uCAAW,WAAc,GAAA,KAAA,CAAA;AACzF,EAAA,MAAM,6BAAc,KAAA,CAAA,aAAA,CAAA,eAAA,EAAA;AAAA,IAAgB,SAAA,EAAW,aAAa,KAAM,CAAA,GAAA;AAAA,GAAM,CAAA,CAAA;AAExE,EAAA,MAAM,iBAAoB,GAAA,UAAA,CAAW,WAAY,CAAA,KAAA,EAAO,KAAK,CAAA,CAAA;AAG7D,EAAA,MAAM,QAAW,GAAA,UAAA,CAAW,YAAa,CAAA,KAAK,EAAE,KAAM,CAAA,QAAA,CAAA;AAEtD,EAAA,MAAM,oBAAoB,iBAAkB,CAAA,MAAA,EAAQ,aAAa,IAAM,EAAA,QAAA,EAAU,OAAO,OAAO,CAAA,CAAA;AAE/F,EAAA,IAAI,eAAiB,EAAA;AACnB,IAAO,uBAAA,KAAA,CAAA,aAAA,CAAC,KAAI,EAAA,IAAA,EAAA,yBAAA,EAAwB,eAAgB,CAAA,CAAA;AAAA,GACtD;AAEA,EAAA,IAAI,CAAC,MAAU,IAAA,CAAC,MAAO,CAAA,WAAA,CAAY,QAAQ,CAAG,EAAA;AAC5C,IAAO,uBAAA,KAAA,CAAA,aAAA,CAAC,aAAI,yBAAuB,CAAA,CAAA;AAAA,GACrC;AAEA,EAAI,IAAA,CAAC,OAAO,KAAO,EAAA;AACjB,IAAO,uBAAA,KAAA,CAAA,aAAA,CAAC,aAAI,qCAAmC,CAAA,CAAA;AAAA,GACjD;AAEA,EAAA,MAAM,iBAAiB,MAAO,CAAA,KAAA,CAAA;AAG9B,EAAA,IAAI,iBAAiB,gBAAkB,EAAA;AACrC,IAAA,KAAA,CAAM,kBAAkB,KAAK,CAAA,CAAA;AAAA,GAC/B;AAEA,EAAA,uBACG,KAAA,CAAA,aAAA,CAAA,KAAA,EAAA;AAAA,IAAI,GAAA;AAAA,IAAyC,OAAO,EAAE,QAAA,EAAU,YAAY,KAAO,EAAA,MAAA,EAAQ,QAAQ,MAAO,EAAA;AAAA,GAAA,kBACxG,KAAA,CAAA,aAAA,CAAA,WAAA,EAAA;AAAA,IACC,KAAO,EAAA,iBAAA;AAAA,IACP,KAAA;AAAA,IACA,MAAA;AAAA,IACA,SAAW,EAAA,WAAA,GAAc,CAAC,UAAU,CAAI,GAAA,KAAA,CAAA;AAAA,GAEvC,EAAA,CAAC,UAAY,EAAA,WAAA,qBAET,KAAA,CAAA,aAAA,CAAA,KAAA,CAAA,QAAA,EAAA,IAAA,EAAA,CAAC,iBAAqB,oBAAA,KAAA,CAAA,aAAA,CAAC,KAAI,EAAA,IAAA,EAAA,YAAU,CACrC,EAAA,iBAAA,oBACE,KAAA,CAAA,aAAA,CAAA,kBAAA,EAAA;AAAA,IAAmB,YAAA,EAAc,CAAC,MAAA,EAAQ,IAAI,CAAA;AAAA,GAAA,kBAC5C,KAAA,CAAA,aAAA,CAAA,qBAAA,EAAA;AAAA,IAAsB,MAAM,MAAO,CAAA,IAAA;AAAA,GAAA,kBACjC,KAAA,CAAA,aAAA,CAAA,cAAA,EAAA;AAAA,IACC,EAAI,EAAA,CAAA;AAAA,IACJ,IAAM,EAAA,iBAAA;AAAA,IACN,KAAA;AAAA,IACA,WAAW,iBAAkB,CAAA,SAAA;AAAA,IAC7B,QAAA;AAAA,IACA,OAAA;AAAA,IACA,WAAA;AAAA,IACA,WAAa,EAAA,KAAA;AAAA,IACb,KAAO,EAAA,UAAA;AAAA,IACP,MAAQ,EAAA,WAAA;AAAA,IACR,aAAe,EAAA,CAAA;AAAA,IACf,gBAAA,EAAkB,CAAC,GAAgB,KAAA,GAAA;AAAA,IACnC,iBAAiB,KAAM,CAAA,eAAA;AAAA,IACvB,qBAAqB,KAAM,CAAA,mBAAA;AAAA,IAC3B,mBAAmB,KAAM,CAAA,iBAAA;AAAA,IACzB,UAAU,YAAa,EAAA;AAAA,GACzB,CACF,CACF,CAEJ,CAEJ,CACF,CAAA,CAAA;AAEJ,CAAA;AAEA,gBAAA,CAAiB,WAAc,GAAA,oBAAA;;;;"}

package/dist/esm/components/layout/SceneFlexLayout.js

@@ -0,0 +1,88 @@
+import React from 'react';
+import { Field, RadioButtonGroup } from '@grafana/ui';
+import { SceneObjectBase } from '../../core/SceneObjectBase.js';
+
+class SceneFlexLayout extends SceneObjectBase {
+  toggleDirection() {
+    this.setState({
+      direction: this.state.direction === "row" ? "column" : "row"
+    });
+  }
+}
+SceneFlexLayout.Component = FlexLayoutRenderer;
+SceneFlexLayout.Editor = FlexLayoutEditor;
+function FlexLayoutRenderer({ model, isEditing }) {
+  const { direction = "row", children } = model.useState();
+  return /* @__PURE__ */ React.createElement("div", {
+    style: { flexGrow: 1, flexDirection: direction, display: "flex", gap: "8px" }
+  }, children.map((item) => /* @__PURE__ */ React.createElement(FlexLayoutChildComponent, {
+    key: item.state.key,
+    item,
+    direction,
+    isEditing
+  })));
+}
+function FlexLayoutChildComponent({
+  item,
+  direction,
+  isEditing
+}) {
+  const { placement } = item.useState();
+  return /* @__PURE__ */ React.createElement("div", {
+    style: getItemStyles(direction, placement)
+  }, /* @__PURE__ */ React.createElement(item.Component, {
+    model: item,
+    isEditing
+  }));
+}
+function getItemStyles(direction, layout = {}) {
+  const { xSizing = "fill", ySizing = "fill" } = layout;
+  const style = {
+    display: "flex",
+    flexDirection: direction,
+    minWidth: layout.minWidth,
+    minHeight: layout.minHeight,
+    position: "relative"
+  };
+  if (direction === "column") {
+    if (layout.height) {
+      style.height = layout.height;
+    } else {
+      style.flexGrow = ySizing === "fill" ? 1 : 0;
+    }
+    if (layout.width) {
+      style.width = layout.width;
+    } else {
+      style.alignSelf = xSizing === "fill" ? "stretch" : "flex-start";
+    }
+  } else {
+    if (layout.height) {
+      style.height = layout.height;
+    } else {
+      style.alignSelf = ySizing === "fill" ? "stretch" : "flex-start";
+    }
+    if (layout.width) {
+      style.width = layout.width;
+    } else {
+      style.flexGrow = xSizing === "fill" ? 1 : 0;
+    }
+  }
+  return style;
+}
+function FlexLayoutEditor({ model }) {
+  const { direction = "row" } = model.useState();
+  const options = [
+    { icon: "arrow-right", value: "row" },
+    { icon: "arrow-down", value: "column" }
+  ];
+  return /* @__PURE__ */ React.createElement(Field, {
+    label: "Direction"
+  }, /* @__PURE__ */ React.createElement(RadioButtonGroup, {
+    options,
+    value: direction,
+    onChange: (value) => model.setState({ direction: value })
+  }));
+}
+
+export { SceneFlexLayout };
+//# sourceMappingURL=SceneFlexLayout.js.map

package/dist/esm/components/layout/SceneFlexLayout.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"SceneFlexLayout.js","sources":["../../../../src/components/layout/SceneFlexLayout.tsx"],"sourcesContent":["import React, { CSSProperties } from 'react';\n\nimport { Field, RadioButtonGroup } from '@grafana/ui';\n\nimport { SceneObjectBase } from '../../core/SceneObjectBase';\nimport { SceneComponentProps, SceneLayoutChild, SceneLayoutState, SceneLayoutChildOptions } from '../../core/types';\n\nexport type FlexLayoutDirection = 'column' | 'row';\n\ninterface SceneFlexLayoutState extends SceneLayoutState {\n  direction?: FlexLayoutDirection;\n}\n\nexport class SceneFlexLayout extends SceneObjectBase<SceneFlexLayoutState> {\n  public static Component = FlexLayoutRenderer;\n  public static Editor = FlexLayoutEditor;\n\n  public toggleDirection() {\n    this.setState({\n      direction: this.state.direction === 'row' ? 'column' : 'row',\n    });\n  }\n}\n\nfunction FlexLayoutRenderer({ model, isEditing }: SceneComponentProps<SceneFlexLayout>) {\n  const { direction = 'row', children } = model.useState();\n\n  return (\n    <div style={{ flexGrow: 1, flexDirection: direction, display: 'flex', gap: '8px' }}>\n      {children.map((item) => (\n        <FlexLayoutChildComponent key={item.state.key} item={item} direction={direction} isEditing={isEditing} />\n      ))}\n    </div>\n  );\n}\n\nfunction FlexLayoutChildComponent({\n  item,\n  direction,\n  isEditing,\n}: {\n  item: SceneLayoutChild;\n  direction: FlexLayoutDirection;\n  isEditing?: boolean;\n}) {\n  const { placement } = item.useState();\n\n  return (\n    <div style={getItemStyles(direction, placement)}>\n      <item.Component model={item} isEditing={isEditing} />\n    </div>\n  );\n}\n\nfunction getItemStyles(direction: FlexLayoutDirection, layout: SceneLayoutChildOptions = {}) {\n  const { xSizing = 'fill', ySizing = 'fill' } = layout;\n\n  const style: CSSProperties = {\n    display: 'flex',\n    flexDirection: direction,\n    minWidth: layout.minWidth,\n    minHeight: layout.minHeight,\n    position: 'relative',\n  };\n\n  if (direction === 'column') {\n    if (layout.height) {\n      style.height = layout.height;\n    } else {\n      style.flexGrow = ySizing === 'fill' ? 1 : 0;\n    }\n\n    if (layout.width) {\n      style.width = layout.width;\n    } else {\n      style.alignSelf = xSizing === 'fill' ? 'stretch' : 'flex-start';\n    }\n  } else {\n    if (layout.height) {\n      style.height = layout.height;\n    } else {\n      style.alignSelf = ySizing === 'fill' ? 'stretch' : 'flex-start';\n    }\n\n    if (layout.width) {\n      style.width = layout.width;\n    } else {\n      style.flexGrow = xSizing === 'fill' ? 1 : 0;\n    }\n  }\n\n  return style;\n}\n\nfunction FlexLayoutEditor({ model }: SceneComponentProps<SceneFlexLayout>) {\n  const { direction = 'row' } = model.useState();\n  const options = [\n    { icon: 'arrow-right', value: 'row' },\n    { icon: 'arrow-down', value: 'column' },\n  ];\n\n  return (\n    <Field label=\"Direction\">\n      <RadioButtonGroup\n        options={options}\n        value={direction}\n        onChange={(value) => model.setState({ direction: value as FlexLayoutDirection })}\n      />\n    </Field>\n  );\n}\n"],"names":[],"mappings":"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"}

package/dist/esm/components/layout/SceneGridLayout.js

@@ -0,0 +1,288 @@
+import React from 'react';
+import ReactGridLayout from 'react-grid-layout';
+import AutoSizer from 'react-virtualized-auto-sizer';
+import { SceneObjectBase } from '../../core/SceneObjectBase.js';
+import { DEFAULT_PANEL_SPAN, GRID_CELL_VMARGIN, GRID_COLUMN_COUNT, GRID_CELL_HEIGHT } from './constants.js';
+import { SceneGridRow } from './SceneGridRow.js';
+
+var __defProp = Object.defineProperty;
+var __defProps = Object.defineProperties;
+var __getOwnPropDescs = Object.getOwnPropertyDescriptors;
+var __getOwnPropSymbols = Object.getOwnPropertySymbols;
+var __hasOwnProp = Object.prototype.hasOwnProperty;
+var __propIsEnum = Object.prototype.propertyIsEnumerable;
+var __defNormalProp = (obj, key, value) => key in obj ? __defProp(obj, key, { enumerable: true, configurable: true, writable: true, value }) : obj[key] = value;
+var __spreadValues = (a, b) => {
+  for (var prop in b || (b = {}))
+    if (__hasOwnProp.call(b, prop))
+      __defNormalProp(a, prop, b[prop]);
+  if (__getOwnPropSymbols)
+    for (var prop of __getOwnPropSymbols(b)) {
+      if (__propIsEnum.call(b, prop))
+        __defNormalProp(a, prop, b[prop]);
+    }
+  return a;
+};
+var __spreadProps = (a, b) => __defProps(a, __getOwnPropDescs(b));
+class SceneGridLayout extends SceneObjectBase {
+  constructor(state) {
+    super(__spreadProps(__spreadValues({}, state), {
+      placement: __spreadValues({
+        isDraggable: true
+      }, state.placement),
+      children: sortChildrenByPosition(state.children)
+    }));
+    this._skipOnLayoutChange = false;
+    this.onLayoutChange = (layout) => {
+      if (this._skipOnLayoutChange) {
+        this._skipOnLayoutChange = false;
+        return;
+      }
+      for (const item of layout) {
+        const child = this.getSceneLayoutChild(item.i);
+        const nextSize = {
+          x: item.x,
+          y: item.y,
+          width: item.w,
+          height: item.h
+        };
+        if (!isItemSizeEqual(child.state.placement, nextSize)) {
+          child.setState({
+            placement: __spreadValues(__spreadValues({}, child.state.placement), nextSize)
+          });
+        }
+      }
+      this.setState({ children: sortChildrenByPosition(this.state.children) });
+    };
+    this.onResizeStop = (_, o, n) => {
+      const child = this.getSceneLayoutChild(n.i);
+      child.setState({
+        placement: __spreadProps(__spreadValues({}, child.state.placement), {
+          width: n.w,
+          height: n.h
+        })
+      });
+    };
+    this.onDragStop = (gridLayout, o, updatedItem) => {
+      const sceneChild = this.getSceneLayoutChild(updatedItem.i);
+      gridLayout = sortGridLayout(gridLayout);
+      for (let i = 0; i < gridLayout.length; i++) {
+        const gridItem = gridLayout[i];
+        const child = this.getSceneLayoutChild(gridItem.i);
+        const childSize = child.state.placement;
+        if ((childSize == null ? void 0 : childSize.x) !== gridItem.x || (childSize == null ? void 0 : childSize.y) !== gridItem.y) {
+          child.setState({
+            placement: __spreadProps(__spreadValues({}, child.state.placement), {
+              x: gridItem.x,
+              y: gridItem.y
+            })
+          });
+        }
+      }
+      const indexOfUpdatedItem = gridLayout.findIndex((item) => item.i === updatedItem.i);
+      const newParent = this.findGridItemSceneParent(gridLayout, indexOfUpdatedItem - 1);
+      let newChildren = this.state.children;
+      if (newParent !== sceneChild.parent) {
+        newChildren = this.moveChildTo(sceneChild, newParent);
+      }
+      this.setState({ children: sortChildrenByPosition(newChildren) });
+      this._skipOnLayoutChange = true;
+    };
+  }
+  toggleRow(row) {
+    var _a, _b, _c, _d, _e, _f, _g;
+    const isCollapsed = row.state.isCollapsed;
+    if (!isCollapsed) {
+      row.setState({ isCollapsed: true });
+      this.setState({});
+      return;
+    }
+    const rowChildren = row.state.children;
+    if (rowChildren.length === 0) {
+      row.setState({ isCollapsed: false });
+      this.setState({});
+      return;
+    }
+    const rowY = (_a = row.state.placement) == null ? void 0 : _a.y;
+    const firstPanelYPos = (_c = (_b = rowChildren[0].state.placement) == null ? void 0 : _b.y) != null ? _c : rowY;
+    const yDiff = firstPanelYPos - (rowY + 1);
+    let yMax = rowY;
+    for (const panel of rowChildren) {
+      const newSize = __spreadValues({}, panel.state.placement);
+      newSize.y = (_d = newSize.y) != null ? _d : rowY;
+      newSize.y -= yDiff;
+      if (newSize.y > ((_e = panel.state.placement) == null ? void 0 : _e.y)) {
+        panel.setState({ placement: newSize });
+      }
+      yMax = Math.max(yMax, Number(newSize.y) + Number(newSize.height));
+    }
+    const pushDownAmount = yMax - rowY - 1;
+    for (const child of this.state.children) {
+      if (((_f = child.state.placement) == null ? void 0 : _f.y) > rowY) {
+        this.pushChildDown(child, pushDownAmount);
+      }
+      if (child instanceof SceneGridRow && child !== row) {
+        for (const rowChild of child.state.children) {
+          if (((_g = rowChild.state.placement) == null ? void 0 : _g.y) > rowY) {
+            this.pushChildDown(rowChild, pushDownAmount);
+          }
+        }
+      }
+    }
+    row.setState({ isCollapsed: false });
+    this.setState({});
+  }
+  getSceneLayoutChild(key) {
+    for (const child of this.state.children) {
+      if (child.state.key === key) {
+        return child;
+      }
+      if (child instanceof SceneGridRow) {
+        for (const rowChild of child.state.children) {
+          if (rowChild.state.key === key) {
+            return rowChild;
+          }
+        }
+      }
+    }
+    throw new Error("Scene layout child not found for GridItem");
+  }
+  pushChildDown(child, amount) {
+    var _a;
+    child.setState({
+      placement: __spreadProps(__spreadValues({}, child.state.placement), {
+        y: ((_a = child.state.placement) == null ? void 0 : _a.y) + amount
+      })
+    });
+  }
+  findGridItemSceneParent(layout, startAt) {
+    for (let i = startAt; i >= 0; i--) {
+      const gridItem = layout[i];
+      const sceneChild = this.getSceneLayoutChild(gridItem.i);
+      if (sceneChild instanceof SceneGridRow) {
+        if (sceneChild.state.isCollapsed) {
+          return this;
+        }
+        return sceneChild;
+      }
+    }
+    return this;
+  }
+  moveChildTo(child, target) {
+    const currentParent = child.parent;
+    let rootChildren = this.state.children;
+    const newChild = child.clone({ key: child.state.key });
+    if (currentParent instanceof SceneGridRow) {
+      const newRow = currentParent.clone({
+        children: currentParent.state.children.filter((c) => c.state.key !== child.state.key)
+      });
+      rootChildren = rootChildren.map((c) => c === currentParent ? newRow : c);
+      if (target instanceof SceneGridRow) {
+        const targetRow = target.clone({ children: [...target.state.children, newChild] });
+        rootChildren = rootChildren.map((c) => c === target ? targetRow : c);
+      } else {
+        rootChildren = [...rootChildren, newChild];
+      }
+    } else {
+      rootChildren = rootChildren.filter((c) => c.state.key !== child.state.key);
+      const targetRow = target.clone({ children: [...target.state.children, newChild] });
+      rootChildren = rootChildren.map((c) => c === target ? targetRow : c);
+    }
+    return rootChildren;
+  }
+  toGridCell(child) {
+    var _a, _b, _c, _d;
+    const size = child.state.placement;
+    let x = (_a = size.x) != null ? _a : 0;
+    let y = (_b = size.y) != null ? _b : 0;
+    const w = Number.isInteger(Number(size.width)) ? Number(size.width) : DEFAULT_PANEL_SPAN;
+    const h = Number.isInteger(Number(size.height)) ? Number(size.height) : DEFAULT_PANEL_SPAN;
+    let isDraggable = Boolean((_c = child.state.placement) == null ? void 0 : _c.isDraggable);
+    let isResizable = Boolean((_d = child.state.placement) == null ? void 0 : _d.isResizable);
+    if (child instanceof SceneGridRow) {
+      isDraggable = child.state.isCollapsed ? true : false;
+      isResizable = false;
+    }
+    return { i: child.state.key, x, y, h, w, isResizable, isDraggable };
+  }
+  buildGridLayout(width) {
+    let cells = [];
+    for (const child of this.state.children) {
+      cells.push(this.toGridCell(child));
+      if (child instanceof SceneGridRow && !child.state.isCollapsed) {
+        for (const rowChild of child.state.children) {
+          cells.push(this.toGridCell(rowChild));
+        }
+      }
+    }
+    cells = sortGridLayout(cells);
+    if (width < 768) {
+      this._skipOnLayoutChange = true;
+      return cells.map((cell) => __spreadProps(__spreadValues({}, cell), { w: 24 }));
+    }
+    this._skipOnLayoutChange = false;
+    return cells;
+  }
+}
+SceneGridLayout.Component = SceneGridLayoutRenderer;
+function SceneGridLayoutRenderer({ model }) {
+  const { children } = model.useState();
+  validateChildrenSize(children);
+  return /* @__PURE__ */ React.createElement(AutoSizer, {
+    disableHeight: true
+  }, ({ width }) => {
+    if (width === 0) {
+      return null;
+    }
+    const layout = model.buildGridLayout(width);
+    return /* @__PURE__ */ React.createElement("div", {
+      style: { width: `${width}px`, height: "100%" }
+    }, /* @__PURE__ */ React.createElement(ReactGridLayout, {
+      width,
+      isDraggable: width > 768,
+      isResizable: false,
+      containerPadding: [0, 0],
+      useCSSTransforms: false,
+      margin: [GRID_CELL_VMARGIN, GRID_CELL_VMARGIN],
+      cols: GRID_COLUMN_COUNT,
+      rowHeight: GRID_CELL_HEIGHT,
+      draggableHandle: `.grid-drag-handle-${model.state.key}`,
+      layout,
+      onDragStop: model.onDragStop,
+      onResizeStop: model.onResizeStop,
+      onLayoutChange: model.onLayoutChange,
+      isBounded: false
+    }, layout.map((gridItem) => {
+      const sceneChild = model.getSceneLayoutChild(gridItem.i);
+      return /* @__PURE__ */ React.createElement("div", {
+        key: sceneChild.state.key,
+        style: { display: "flex" }
+      }, /* @__PURE__ */ React.createElement(sceneChild.Component, {
+        model: sceneChild,
+        key: sceneChild.state.key
+      }));
+    })));
+  });
+}
+function validateChildrenSize(children) {
+  if (children.find(
+    (c) => !c.state.placement || c.state.placement.height === void 0 || c.state.placement.width === void 0 || c.state.placement.x === void 0 || c.state.placement.y === void 0
+  )) {
+    throw new Error("All children must have a size specified");
+  }
+}
+function isItemSizeEqual(a, b) {
+  return a.x === b.x && a.y === b.y && a.width === b.width && a.height === b.height;
+}
+function sortChildrenByPosition(children) {
+  return [...children].sort((a, b) => {
+    var _a, _b, _c, _d;
+    return ((_a = a.state.placement) == null ? void 0 : _a.y) - ((_b = b.state.placement) == null ? void 0 : _b.y) || ((_c = a.state.placement) == null ? void 0 : _c.x) - ((_d = b.state.placement) == null ? void 0 : _d.x);
+  });
+}
+function sortGridLayout(layout) {
+  return [...layout].sort((a, b) => a.y - b.y || a.x - b.x);
+}
+
+export { SceneGridLayout };
+//# sourceMappingURL=SceneGridLayout.js.map

package/dist/esm/components/layout/SceneGridLayout.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"SceneGridLayout.js","sources":["../../../../src/components/layout/SceneGridLayout.tsx"],"sourcesContent":["import React from 'react';\nimport ReactGridLayout from 'react-grid-layout';\nimport AutoSizer from 'react-virtualized-auto-sizer';\n\nimport { SceneObjectBase } from '../../core/SceneObjectBase';\nimport { SceneComponentProps, SceneLayoutChild, SceneLayoutState, SceneLayoutChildOptions } from '../../core/types';\nimport { DEFAULT_PANEL_SPAN, GRID_CELL_HEIGHT, GRID_CELL_VMARGIN, GRID_COLUMN_COUNT } from './constants';\n\nimport { SceneGridRow } from './SceneGridRow';\n\ninterface SceneGridLayoutState extends SceneLayoutState {}\n\nexport class SceneGridLayout extends SceneObjectBase<SceneGridLayoutState> {\n  public static Component = SceneGridLayoutRenderer;\n\n  private _skipOnLayoutChange = false;\n\n  public constructor(state: SceneGridLayoutState) {\n    super({\n      ...state,\n      placement: {\n        isDraggable: true,\n        ...state.placement,\n      },\n      children: sortChildrenByPosition(state.children),\n    });\n  }\n\n  public toggleRow(row: SceneGridRow) {\n    const isCollapsed = row.state.isCollapsed;\n\n    if (!isCollapsed) {\n      row.setState({ isCollapsed: true });\n      // To force re-render\n      this.setState({});\n      return;\n    }\n\n    const rowChildren = row.state.children;\n\n    if (rowChildren.length === 0) {\n      row.setState({ isCollapsed: false });\n      this.setState({});\n      return;\n    }\n\n    // Ok we are expanding row. We need to update row children y pos (incase they are incorrect) and push items below down\n    // Code copied from DashboardModel toggleRow()\n\n    const rowY = row.state.placement?.y!;\n    const firstPanelYPos = rowChildren[0].state.placement?.y ?? rowY;\n    const yDiff = firstPanelYPos - (rowY + 1);\n\n    // y max will represent the bottom y pos after all panels have been added\n    // needed to know home much panels below should be pushed down\n    let yMax = rowY;\n\n    for (const panel of rowChildren) {\n      // set the y gridPos if it wasn't already set\n      const newSize = { ...panel.state.placement };\n      newSize.y = newSize.y ?? rowY;\n      // make sure y is adjusted (in case row moved while collapsed)\n      newSize.y -= yDiff;\n      if (newSize.y > panel.state.placement?.y!) {\n        panel.setState({ placement: newSize });\n      }\n      // update insert post and y max\n      yMax = Math.max(yMax, Number(newSize.y!) + Number(newSize.height!));\n    }\n\n    const pushDownAmount = yMax - rowY - 1;\n\n    // push panels below down\n    for (const child of this.state.children) {\n      if (child.state.placement?.y! > rowY) {\n        this.pushChildDown(child, pushDownAmount);\n      }\n\n      if (child instanceof SceneGridRow && child !== row) {\n        for (const rowChild of child.state.children) {\n          if (rowChild.state.placement?.y! > rowY) {\n            this.pushChildDown(rowChild, pushDownAmount);\n          }\n        }\n      }\n    }\n\n    row.setState({ isCollapsed: false });\n    // Trigger re-render\n    this.setState({});\n  }\n\n  public onLayoutChange = (layout: ReactGridLayout.Layout[]) => {\n    if (this._skipOnLayoutChange) {\n      // Layout has been updated by other RTL handler already\n      this._skipOnLayoutChange = false;\n      return;\n    }\n\n    for (const item of layout) {\n      const child = this.getSceneLayoutChild(item.i);\n\n      const nextSize = {\n        x: item.x,\n        y: item.y,\n        width: item.w,\n        height: item.h,\n      };\n\n      if (!isItemSizeEqual(child.state.placement!, nextSize)) {\n        child.setState({\n          placement: {\n            ...child.state.placement,\n            ...nextSize,\n          },\n        });\n      }\n    }\n\n    this.setState({ children: sortChildrenByPosition(this.state.children) });\n  };\n\n  /**\n   * Will also scan row children and return child of the row\n   */\n  public getSceneLayoutChild(key: string) {\n    for (const child of this.state.children) {\n      if (child.state.key === key) {\n        return child;\n      }\n\n      if (child instanceof SceneGridRow) {\n        for (const rowChild of child.state.children) {\n          if (rowChild.state.key === key) {\n            return rowChild;\n          }\n        }\n      }\n    }\n\n    throw new Error('Scene layout child not found for GridItem');\n  }\n\n  public onResizeStop: ReactGridLayout.ItemCallback = (_, o, n) => {\n    const child = this.getSceneLayoutChild(n.i);\n    child.setState({\n      placement: {\n        ...child.state.placement,\n        width: n.w,\n        height: n.h,\n      },\n    });\n  };\n\n  private pushChildDown(child: SceneLayoutChild, amount: number) {\n    child.setState({\n      placement: {\n        ...child.state.placement,\n        y: child.state.placement?.y! + amount,\n      },\n    });\n  }\n\n  /**\n   *  We assume the layout array is storted according to y pos, and walk upwards until we find a row.\n   *  If it is collapsed there is no row to add it to. The default is then to return the SceneGridLayout itself\n   */\n  private findGridItemSceneParent(layout: ReactGridLayout.Layout[], startAt: number): SceneGridRow | SceneGridLayout {\n    for (let i = startAt; i >= 0; i--) {\n      const gridItem = layout[i];\n      const sceneChild = this.getSceneLayoutChild(gridItem.i);\n\n      if (sceneChild instanceof SceneGridRow) {\n        // the closest row is collapsed return null\n        if (sceneChild.state.isCollapsed) {\n          return this;\n        }\n\n        return sceneChild;\n      }\n    }\n\n    return this;\n  }\n\n  /**\n   * This likely needs a slighltly different approach. Where we clone or deactivate or and re-activate the moved child\n   */\n  public moveChildTo(child: SceneLayoutChild, target: SceneGridLayout | SceneGridRow) {\n    const currentParent = child.parent!;\n    let rootChildren = this.state.children;\n    const newChild = child.clone({ key: child.state.key });\n\n    // Remove from current parent row\n    if (currentParent instanceof SceneGridRow) {\n      const newRow = currentParent.clone({\n        children: currentParent.state.children.filter((c) => c.state.key !== child.state.key),\n      });\n\n      // new children with new row\n      rootChildren = rootChildren.map((c) => (c === currentParent ? newRow : c));\n\n      // if target is also a row\n      if (target instanceof SceneGridRow) {\n        const targetRow = target.clone({ children: [...target.state.children, newChild] });\n        rootChildren = rootChildren.map((c) => (c === target ? targetRow : c));\n      } else {\n        // target is the main grid\n        rootChildren = [...rootChildren, newChild];\n      }\n    } else {\n      // current parent is the main grid remove it from there\n      rootChildren = rootChildren.filter((c) => c.state.key !== child.state.key);\n      // Clone the target row and add the child\n      const targetRow = target.clone({ children: [...target.state.children, newChild] });\n      // Replace row with new row\n      rootChildren = rootChildren.map((c) => (c === target ? targetRow : c));\n    }\n\n    return rootChildren;\n  }\n\n  public onDragStop: ReactGridLayout.ItemCallback = (gridLayout, o, updatedItem) => {\n    const sceneChild = this.getSceneLayoutChild(updatedItem.i)!;\n\n    // Need to resort the grid layout based on new position (needed to to find the new parent)\n    gridLayout = sortGridLayout(gridLayout);\n\n    // Update children positions if they have changed\n    for (let i = 0; i < gridLayout.length; i++) {\n      const gridItem = gridLayout[i];\n      const child = this.getSceneLayoutChild(gridItem.i)!;\n      const childSize = child.state.placement!;\n\n      if (childSize?.x !== gridItem.x || childSize?.y !== gridItem.y) {\n        child.setState({\n          placement: {\n            ...child.state.placement,\n            x: gridItem.x,\n            y: gridItem.y,\n          },\n        });\n      }\n    }\n\n    // Update the parent if the child if it has moved to a row or back to the grid\n    const indexOfUpdatedItem = gridLayout.findIndex((item) => item.i === updatedItem.i);\n    const newParent = this.findGridItemSceneParent(gridLayout, indexOfUpdatedItem - 1);\n    let newChildren = this.state.children;\n\n    if (newParent !== sceneChild.parent) {\n      newChildren = this.moveChildTo(sceneChild, newParent);\n    }\n\n    this.setState({ children: sortChildrenByPosition(newChildren) });\n    this._skipOnLayoutChange = true;\n  };\n\n  private toGridCell(child: SceneLayoutChild): ReactGridLayout.Layout {\n    const size = child.state.placement!;\n\n    let x = size.x ?? 0;\n    let y = size.y ?? 0;\n    const w = Number.isInteger(Number(size.width)) ? Number(size.width) : DEFAULT_PANEL_SPAN;\n    const h = Number.isInteger(Number(size.height)) ? Number(size.height) : DEFAULT_PANEL_SPAN;\n\n    let isDraggable = Boolean(child.state.placement?.isDraggable);\n    let isResizable = Boolean(child.state.placement?.isResizable);\n\n    if (child instanceof SceneGridRow) {\n      isDraggable = child.state.isCollapsed ? true : false;\n      isResizable = false;\n    }\n\n    return { i: child.state.key!, x, y, h, w, isResizable, isDraggable };\n  }\n\n  public buildGridLayout(width: number): ReactGridLayout.Layout[] {\n    let cells: ReactGridLayout.Layout[] = [];\n\n    for (const child of this.state.children) {\n      cells.push(this.toGridCell(child));\n\n      if (child instanceof SceneGridRow && !child.state.isCollapsed) {\n        for (const rowChild of child.state.children) {\n          cells.push(this.toGridCell(rowChild));\n        }\n      }\n    }\n\n    // Sort by position\n    cells = sortGridLayout(cells);\n\n    if (width < 768) {\n      // We should not persist the mobile layout\n      this._skipOnLayoutChange = true;\n      return cells.map((cell) => ({ ...cell, w: 24 }));\n    }\n\n    this._skipOnLayoutChange = false;\n\n    return cells;\n  }\n}\n\nfunction SceneGridLayoutRenderer({ model }: SceneComponentProps<SceneGridLayout>) {\n  const { children } = model.useState();\n  validateChildrenSize(children);\n\n  return (\n    <AutoSizer disableHeight>\n      {({ width }) => {\n        if (width === 0) {\n          return null;\n        }\n\n        const layout = model.buildGridLayout(width);\n\n        return (\n          /**\n           * The children is using a width of 100% so we need to guarantee that it is wrapped\n           * in an element that has the calculated size given by the AutoSizer. The AutoSizer\n           * has a width of 0 and will let its content overflow its div.\n           */\n          <div style={{ width: `${width}px`, height: '100%' }}>\n            <ReactGridLayout\n              width={width}\n              /*\n                  Disable draggable if mobile device, solving an issue with unintentionally\n                  moving panels. https://github.com/grafana/grafana/issues/18497\n                  theme.breakpoints.md = 769\n                */\n              isDraggable={width > 768}\n              isResizable={false}\n              containerPadding={[0, 0]}\n              useCSSTransforms={false}\n              margin={[GRID_CELL_VMARGIN, GRID_CELL_VMARGIN]}\n              cols={GRID_COLUMN_COUNT}\n              rowHeight={GRID_CELL_HEIGHT}\n              draggableHandle={`.grid-drag-handle-${model.state.key}`}\n              // @ts-ignore: ignoring for now until we make the size type numbers-only\n              layout={layout}\n              onDragStop={model.onDragStop}\n              onResizeStop={model.onResizeStop}\n              onLayoutChange={model.onLayoutChange}\n              isBounded={false}\n            >\n              {layout.map((gridItem) => {\n                const sceneChild = model.getSceneLayoutChild(gridItem.i)!;\n                return (\n                  <div key={sceneChild.state.key} style={{ display: 'flex' }}>\n                    <sceneChild.Component model={sceneChild} key={sceneChild.state.key} />\n                  </div>\n                );\n              })}\n            </ReactGridLayout>\n          </div>\n        );\n      }}\n    </AutoSizer>\n  );\n}\n\nfunction validateChildrenSize(children: SceneLayoutChild[]) {\n  if (\n    children.find(\n      (c) =>\n        !c.state.placement ||\n        c.state.placement.height === undefined ||\n        c.state.placement.width === undefined ||\n        c.state.placement.x === undefined ||\n        c.state.placement.y === undefined\n    )\n  ) {\n    throw new Error('All children must have a size specified');\n  }\n}\n\nfunction isItemSizeEqual(a: SceneLayoutChildOptions, b: SceneLayoutChildOptions) {\n  return a.x === b.x && a.y === b.y && a.width === b.width && a.height === b.height;\n}\n\nfunction sortChildrenByPosition(children: SceneLayoutChild[]) {\n  return [...children].sort((a, b) => {\n    return a.state.placement?.y! - b.state.placement?.y! || a.state.placement?.x! - b.state.placement?.x!;\n  });\n}\n\nfunction sortGridLayout(layout: ReactGridLayout.Layout[]) {\n  return [...layout].sort((a, b) => a.y - b.y || a.x! - b.x);\n}\n"],"names":[],"mappings":"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"}

package/dist/esm/components/layout/SceneGridRow.js

@@ -0,0 +1,124 @@
+import { cx, css } from '@emotion/css';
+import React from 'react';
+import { useStyles2, Icon } from '@grafana/ui';
+import { SceneObjectBase } from '../../core/SceneObjectBase.js';
+import { sceneGraph } from '../../core/sceneGraph.js';
+import { SceneObjectUrlSyncConfig } from '../../services/SceneObjectUrlSyncConfig.js';
+import { SceneDragHandle } from '../SceneDragHandle.js';
+import { SceneGridLayout } from './SceneGridLayout.js';
+import { GRID_COLUMN_COUNT } from './constants.js';
+
+var __defProp = Object.defineProperty;
+var __defProps = Object.defineProperties;
+var __getOwnPropDescs = Object.getOwnPropertyDescriptors;
+var __getOwnPropSymbols = Object.getOwnPropertySymbols;
+var __hasOwnProp = Object.prototype.hasOwnProperty;
+var __propIsEnum = Object.prototype.propertyIsEnumerable;
+var __defNormalProp = (obj, key, value) => key in obj ? __defProp(obj, key, { enumerable: true, configurable: true, writable: true, value }) : obj[key] = value;
+var __spreadValues = (a, b) => {
+  for (var prop in b || (b = {}))
+    if (__hasOwnProp.call(b, prop))
+      __defNormalProp(a, prop, b[prop]);
+  if (__getOwnPropSymbols)
+    for (var prop of __getOwnPropSymbols(b)) {
+      if (__propIsEnum.call(b, prop))
+        __defNormalProp(a, prop, b[prop]);
+    }
+  return a;
+};
+var __spreadProps = (a, b) => __defProps(a, __getOwnPropDescs(b));
+class SceneGridRow extends SceneObjectBase {
+  constructor(state) {
+    super(__spreadProps(__spreadValues({
+      isCollapsible: true
+    }, state), {
+      placement: __spreadProps(__spreadValues({
+        isResizable: false,
+        isDraggable: true
+      }, state.placement), {
+        x: 0,
+        height: 1,
+        width: GRID_COLUMN_COUNT
+      })
+    }));
+    this._urlSync = new SceneObjectUrlSyncConfig(this, { keys: ["rowc"] });
+    this.onCollapseToggle = () => {
+      if (!this.state.isCollapsible) {
+        return;
+      }
+      const layout = this.parent;
+      if (!layout || !(layout instanceof SceneGridLayout)) {
+        throw new Error("SceneGridRow must be a child of SceneGridLayout");
+      }
+      layout.toggleRow(this);
+    };
+  }
+  getUrlState(state) {
+    return { rowc: state.isCollapsed ? "1" : "0" };
+  }
+  updateFromUrl(values) {
+    const isCollapsed = values.rowc === "1";
+    if (isCollapsed !== this.state.isCollapsed) {
+      this.onCollapseToggle();
+    }
+  }
+}
+SceneGridRow.Component = SceneGridRowRenderer;
+function SceneGridRowRenderer({ model }) {
+  const styles = useStyles2(getSceneGridRowStyles);
+  const { isCollapsible, isCollapsed, title, placement } = model.useState();
+  const layout = sceneGraph.getLayout(model);
+  const dragHandle = /* @__PURE__ */ React.createElement(SceneDragHandle, {
+    layoutKey: layout.state.key
+  });
+  return /* @__PURE__ */ React.createElement("div", {
+    className: styles.row
+  }, /* @__PURE__ */ React.createElement("div", {
+    className: cx(styles.rowHeader, isCollapsed && styles.rowHeaderCollapsed)
+  }, /* @__PURE__ */ React.createElement("div", {
+    onClick: model.onCollapseToggle,
+    className: styles.rowTitleWrapper
+  }, isCollapsible && /* @__PURE__ */ React.createElement(Icon, {
+    name: isCollapsed ? "angle-right" : "angle-down"
+  }), /* @__PURE__ */ React.createElement("span", {
+    className: styles.rowTitle
+  }, title)), (placement == null ? void 0 : placement.isDraggable) && isCollapsed && /* @__PURE__ */ React.createElement("div", null, dragHandle)));
+}
+const getSceneGridRowStyles = (theme) => {
+  return {
+    row: css({
+      width: "100%",
+      height: "100%",
+      position: "relative",
+      zIndex: 0,
+      display: "flex",
+      flexDirection: "column"
+    }),
+    rowHeader: css({
+      width: "100%",
+      height: "30px",
+      display: "flex",
+      justifyContent: "space-between",
+      marginBottom: "8px",
+      border: `1px solid transparent`
+    }),
+    rowTitleWrapper: css({
+      display: "flex",
+      alignItems: "center",
+      cursor: "pointer"
+    }),
+    rowHeaderCollapsed: css({
+      marginBottom: "0px",
+      background: theme.colors.background.primary,
+      border: `1px solid ${theme.colors.border.weak}`,
+      borderRadius: theme.shape.borderRadius(1)
+    }),
+    rowTitle: css({
+      fontSize: theme.typography.h6.fontSize,
+      fontWeight: theme.typography.h6.fontWeight
+    })
+  };
+};
+
+export { SceneGridRow, SceneGridRowRenderer };
+//# sourceMappingURL=SceneGridRow.js.map