@grafana/scenes 0.29.0 → 0.29.2

package/CHANGELOG.md

@@ -1,3 +1,27 @@
+# v0.29.2 (Wed Sep 06 2023)
+
+#### 🐛 Bug Fix
+
+- SceneObject: Support changing $data, $timeRange and $variables during the active phase [#324](https://github.com/grafana/scenes/pull/324) ([@torkelo](https://github.com/torkelo))
+
+#### Authors: 1
+
+- Torkel Ödegaard ([@torkelo](https://github.com/torkelo))
+
+---
+
+# v0.29.1 (Tue Sep 05 2023)
+
+#### 🐛 Bug Fix
+
+- SceneGridRow: Small design change and fixes, add actions support [#321](https://github.com/grafana/scenes/pull/321) ([@torkelo](https://github.com/torkelo))
+
+#### Authors: 1
+
+- Torkel Ödegaard ([@torkelo](https://github.com/torkelo))
+
+---
+
 # v0.29.0 (Tue Sep 05 2023)
 
 #### 🚀 Enhancement

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

@@ -3,9 +3,9 @@ import React from 'react';
 import { useStyles2, Icon } from '@grafana/ui';
 import { SceneObjectBase } from '../../../core/SceneObjectBase.js';
 import { SceneObjectUrlSyncConfig } from '../../../services/SceneObjectUrlSyncConfig.js';
-import { SceneDragHandle } from '../../SceneDragHandle.js';
 import { SceneGridLayout } from './SceneGridLayout.js';
 import { GRID_COLUMN_COUNT } from './constants.js';
+import { sceneGraph } from '../../../core/sceneGraph/index.js';
 
 var __defProp = Object.defineProperty;
 var __defProps = Object.defineProperties;
@@ -69,14 +69,10 @@ class SceneGridRow extends SceneObjectBase {
 SceneGridRow.Component = SceneGridRowRenderer;
 function SceneGridRowRenderer({ model }) {
   const styles = useStyles2(getSceneGridRowStyles);
-  const { isCollapsible, isCollapsed, title, isDraggable } = model.useState();
-  const dragHandle = /* @__PURE__ */ React.createElement(SceneDragHandle, {
-    dragClass: model.getGridLayout().getDragClass()
-  });
+  const { isCollapsible, isCollapsed, title, isDraggable, actions } = model.useState();
+  const layoutDragClass = model.getGridLayout().getDragClass();
   return /* @__PURE__ */ React.createElement("div", {
-    className: styles.row
-  }, /* @__PURE__ */ React.createElement("div", {
-    className: cx(styles.rowHeader, isCollapsed && styles.rowHeaderCollapsed)
+    className: cx(styles.row, isCollapsed && styles.rowCollapsed)
   }, /* @__PURE__ */ React.createElement("button", {
     onClick: model.onCollapseToggle,
     className: styles.rowTitleButton
@@ -84,25 +80,24 @@ function SceneGridRowRenderer({ model }) {
     name: isCollapsed ? "angle-right" : "angle-down"
   }), /* @__PURE__ */ React.createElement("span", {
     className: styles.rowTitle
-  }, title)), isDraggable && isCollapsed && /* @__PURE__ */ React.createElement("div", null, dragHandle)));
+  }, sceneGraph.interpolate(model, title, void 0, "text"))), isCollapsed && /* @__PURE__ */ React.createElement("div", {
+    className: styles.collapsedInfo
+  }, "(", model.state.children.length, " panels)"), actions && /* @__PURE__ */ React.createElement(actions.Component, {
+    model: actions
+  }), isDraggable && isCollapsed && /* @__PURE__ */ React.createElement("div", {
+    className: cx(styles.dragHandle, layoutDragClass)
+  }, /* @__PURE__ */ React.createElement(Icon, {
+    name: "draggabledots"
+  })));
 }
 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`
+      gap: theme.spacing(1)
     }),
     rowTitleButton: css({
       display: "flex",
@@ -112,15 +107,31 @@ const getSceneGridRowStyles = (theme) => {
       border: "none",
       gap: theme.spacing(1)
     }),
-    rowHeaderCollapsed: css({
-      marginBottom: "0px",
-      background: theme.colors.background.primary,
-      border: `1px solid ${theme.colors.border.weak}`,
-      borderRadius: theme.shape.borderRadius(1)
+    rowCollapsed: css({
+      background: theme.colors.background.secondary,
+      borderBottom: `1px solid ${theme.colors.border.weak}`
     }),
     rowTitle: css({
       fontSize: theme.typography.h5.fontSize,
       fontWeight: theme.typography.fontWeightMedium
+    }),
+    collapsedInfo: css({
+      fontSize: theme.typography.bodySmall.fontSize,
+      color: theme.colors.text.secondary,
+      display: "flex",
+      alignItems: "center",
+      flexGrow: 1
+    }),
+    dragHandle: css({
+      display: "flex",
+      padding: theme.spacing(0, 1),
+      alignItems: "center",
+      justifyContent: "flex-end",
+      cursor: "move",
+      color: theme.colors.text.secondary,
+      "&:hover": {
+        color: theme.colors.text.primary
+      }
     })
   };
 };

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

@@ -1 +1 @@
-{"version":3,"file":"SceneGridRow.js","sources":["../../../../../src/components/layout/grid/SceneGridRow.tsx"],"sourcesContent":["import { css, cx } from '@emotion/css';\nimport React from 'react';\n\nimport { GrafanaTheme2 } from '@grafana/data';\nimport { Icon, useStyles2 } from '@grafana/ui';\n\nimport { SceneObjectBase } from '../../../core/SceneObjectBase';\nimport { SceneComponentProps, SceneObjectUrlValues } from '../../../core/types';\nimport { SceneObjectUrlSyncConfig } from '../../../services/SceneObjectUrlSyncConfig';\nimport { SceneDragHandle } from '../../SceneDragHandle';\n\nimport { SceneGridLayout } from './SceneGridLayout';\nimport { GRID_COLUMN_COUNT } from './constants';\nimport { SceneGridItemLike, SceneGridItemStateLike } from './types';\n\nexport interface SceneGridRowState extends SceneGridItemStateLike {\n  title: string;\n  isCollapsible?: boolean;\n  isCollapsed?: boolean;\n  children: SceneGridItemLike[];\n}\n\nexport class SceneGridRow extends SceneObjectBase<SceneGridRowState> {\n  public static Component = SceneGridRowRenderer;\n\n  protected _urlSync = new SceneObjectUrlSyncConfig(this, { keys: ['rowc'] });\n\n  public constructor(state: Partial<SceneGridRowState>) {\n    super({\n      children: state.children || [],\n      isCollapsible: state.isCollapsible || true,\n      title: state.title || '',\n      isDraggable: state.isDraggable || true,\n      isResizable: state.isResizable || false,\n      ...state,\n      x: 0,\n      height: 1,\n      width: GRID_COLUMN_COUNT,\n    });\n  }\n\n  public getGridLayout(): SceneGridLayout {\n    const layout = this.parent;\n\n    if (!layout || !(layout instanceof SceneGridLayout)) {\n      throw new Error('SceneGridRow must be a child of SceneGridLayout');\n    }\n\n    return layout;\n  }\n\n  public onCollapseToggle = () => {\n    if (!this.state.isCollapsible) {\n      return;\n    }\n\n    this.getGridLayout().toggleRow(this);\n  };\n\n  public getUrlState() {\n    return { rowc: this.state.isCollapsed ? '1' : '0' };\n  }\n\n  public updateFromUrl(values: SceneObjectUrlValues) {\n    if (values.rowc == null) {\n      return;\n    }\n\n    if (values.rowc !== this.getUrlState().rowc) {\n      this.onCollapseToggle();\n    }\n  }\n}\n\nexport function SceneGridRowRenderer({ model }: SceneComponentProps<SceneGridRow>) {\n  const styles = useStyles2(getSceneGridRowStyles);\n  const { isCollapsible, isCollapsed, title, isDraggable } = model.useState();\n  const dragHandle = <SceneDragHandle dragClass={model.getGridLayout().getDragClass()} />;\n\n  return (\n    <div className={styles.row}>\n      <div className={cx(styles.rowHeader, isCollapsed && styles.rowHeaderCollapsed)}>\n        <button onClick={model.onCollapseToggle} className={styles.rowTitleButton}>\n          {isCollapsible && <Icon name={isCollapsed ? 'angle-right' : 'angle-down'} />}\n          <span className={styles.rowTitle}>{title}</span>\n        </button>\n        {isDraggable && isCollapsed && <div>{dragHandle}</div>}\n      </div>\n    </div>\n  );\n}\n\nconst getSceneGridRowStyles = (theme: GrafanaTheme2) => {\n  return {\n    row: css({\n      width: '100%',\n      height: '100%',\n      position: 'relative',\n      zIndex: 0,\n      display: 'flex',\n      flexDirection: 'column',\n    }),\n    rowHeader: css({\n      width: '100%',\n      height: '30px',\n      display: 'flex',\n      justifyContent: 'space-between',\n      marginBottom: '8px',\n      border: `1px solid transparent`,\n    }),\n    rowTitleButton: css({\n      display: 'flex',\n      alignItems: 'center',\n      cursor: 'pointer',\n      background: 'transparent',\n      border: 'none',\n      gap: theme.spacing(1),\n    }),\n    rowHeaderCollapsed: css({\n      marginBottom: '0px',\n      background: theme.colors.background.primary,\n      border: `1px solid ${theme.colors.border.weak}`,\n      borderRadius: theme.shape.borderRadius(1),\n    }),\n    rowTitle: css({\n      fontSize: theme.typography.h5.fontSize,\n      fontWeight: theme.typography.fontWeightMedium,\n    }),\n  };\n};\n"],"names":[],"mappings":";;;;;;;;;;;;;;;;;;;;;;;;;;;;AAsBO,MAAM,qBAAqB,eAAmC,CAAA;AAAA,EAK5D,YAAY,KAAmC,EAAA;AACpD,IAAM,KAAA,CAAA,aAAA,CAAA,cAAA,CAAA;AAAA,MACJ,QAAA,EAAU,KAAM,CAAA,QAAA,IAAY,EAAC;AAAA,MAC7B,aAAA,EAAe,MAAM,aAAiB,IAAA,IAAA;AAAA,MACtC,KAAA,EAAO,MAAM,KAAS,IAAA,EAAA;AAAA,MACtB,WAAA,EAAa,MAAM,WAAe,IAAA,IAAA;AAAA,MAClC,WAAA,EAAa,MAAM,WAAe,IAAA,KAAA;AAAA,KAAA,EAC/B,KANC,CAAA,EAAA;AAAA,MAOJ,CAAG,EAAA,CAAA;AAAA,MACH,MAAQ,EAAA,CAAA;AAAA,MACR,KAAO,EAAA,iBAAA;AAAA,KACR,CAAA,CAAA,CAAA;AAbH,IAAU,IAAA,CAAA,QAAA,GAAW,IAAI,wBAAyB,CAAA,IAAA,EAAM,EAAE,IAAM,EAAA,CAAC,MAAM,CAAA,EAAG,CAAA,CAAA;AA0B1E,IAAA,IAAA,CAAO,mBAAmB,MAAM;AAC9B,MAAI,IAAA,CAAC,IAAK,CAAA,KAAA,CAAM,aAAe,EAAA;AAC7B,QAAA,OAAA;AAAA,OACF;AAEA,MAAK,IAAA,CAAA,aAAA,EAAgB,CAAA,SAAA,CAAU,IAAI,CAAA,CAAA;AAAA,KACrC,CAAA;AAAA,GAlBA;AAAA,EAEO,aAAiC,GAAA;AACtC,IAAA,MAAM,SAAS,IAAK,CAAA,MAAA,CAAA;AAEpB,IAAA,IAAI,CAAC,MAAA,IAAU,EAAE,MAAA,YAAkB,eAAkB,CAAA,EAAA;AACnD,MAAM,MAAA,IAAI,MAAM,iDAAiD,CAAA,CAAA;AAAA,KACnE;AAEA,IAAO,OAAA,MAAA,CAAA;AAAA,GACT;AAAA,EAUO,WAAc,GAAA;AACnB,IAAA,OAAO,EAAE,IAAM,EAAA,IAAA,CAAK,KAAM,CAAA,WAAA,GAAc,MAAM,GAAI,EAAA,CAAA;AAAA,GACpD;AAAA,EAEO,cAAc,MAA8B,EAAA;AACjD,IAAI,IAAA,MAAA,CAAO,QAAQ,IAAM,EAAA;AACvB,MAAA,OAAA;AAAA,KACF;AAEA,IAAA,IAAI,MAAO,CAAA,IAAA,KAAS,IAAK,CAAA,WAAA,GAAc,IAAM,EAAA;AAC3C,MAAA,IAAA,CAAK,gBAAiB,EAAA,CAAA;AAAA,KACxB;AAAA,GACF;AACF,CAAA;AAlDa,YAAA,CACG,SAAY,GAAA,oBAAA,CAAA;AAmDZ,SAAA,oBAAA,CAAqB,EAAE,KAAA,EAA4C,EAAA;AACjF,EAAM,MAAA,MAAA,GAAS,WAAW,qBAAqB,CAAA,CAAA;AAC/C,EAAA,MAAM,EAAE,aAAe,EAAA,WAAA,EAAa,OAAO,WAAY,EAAA,GAAI,MAAM,QAAS,EAAA,CAAA;AAC1E,EAAA,MAAM,6BAAc,KAAA,CAAA,aAAA,CAAA,eAAA,EAAA;AAAA,IAAgB,SAAW,EAAA,KAAA,CAAM,aAAc,EAAA,CAAE,YAAa,EAAA;AAAA,GAAG,CAAA,CAAA;AAErF,EAAA,uBACG,KAAA,CAAA,aAAA,CAAA,KAAA,EAAA;AAAA,IAAI,WAAW,MAAO,CAAA,GAAA;AAAA,GAAA,kBACpB,KAAA,CAAA,aAAA,CAAA,KAAA,EAAA;AAAA,IAAI,WAAW,EAAG,CAAA,MAAA,CAAO,SAAW,EAAA,WAAA,IAAe,OAAO,kBAAkB,CAAA;AAAA,GAAA,kBAC1E,KAAA,CAAA,aAAA,CAAA,QAAA,EAAA;AAAA,IAAO,SAAS,KAAM,CAAA,gBAAA;AAAA,IAAkB,WAAW,MAAO,CAAA,cAAA;AAAA,GAAA,EACxD,iCAAkB,KAAA,CAAA,aAAA,CAAA,IAAA,EAAA;AAAA,IAAK,IAAA,EAAM,cAAc,aAAgB,GAAA,YAAA;AAAA,GAAc,mBACzE,KAAA,CAAA,aAAA,CAAA,MAAA,EAAA;AAAA,IAAK,WAAW,MAAO,CAAA,QAAA;AAAA,GAAW,EAAA,KAAM,CAC3C,CACC,EAAA,WAAA,IAAe,+BAAgB,KAAA,CAAA,aAAA,CAAA,KAAA,EAAA,IAAA,EAAK,UAAW,CAClD,CACF,CAAA,CAAA;AAEJ,CAAA;AAEA,MAAM,qBAAA,GAAwB,CAAC,KAAyB,KAAA;AACtD,EAAO,OAAA;AAAA,IACL,KAAK,GAAI,CAAA;AAAA,MACP,KAAO,EAAA,MAAA;AAAA,MACP,MAAQ,EAAA,MAAA;AAAA,MACR,QAAU,EAAA,UAAA;AAAA,MACV,MAAQ,EAAA,CAAA;AAAA,MACR,OAAS,EAAA,MAAA;AAAA,MACT,aAAe,EAAA,QAAA;AAAA,KAChB,CAAA;AAAA,IACD,WAAW,GAAI,CAAA;AAAA,MACb,KAAO,EAAA,MAAA;AAAA,MACP,MAAQ,EAAA,MAAA;AAAA,MACR,OAAS,EAAA,MAAA;AAAA,MACT,cAAgB,EAAA,eAAA;AAAA,MAChB,YAAc,EAAA,KAAA;AAAA,MACd,MAAQ,EAAA,CAAA,qBAAA,CAAA;AAAA,KACT,CAAA;AAAA,IACD,gBAAgB,GAAI,CAAA;AAAA,MAClB,OAAS,EAAA,MAAA;AAAA,MACT,UAAY,EAAA,QAAA;AAAA,MACZ,MAAQ,EAAA,SAAA;AAAA,MACR,UAAY,EAAA,aAAA;AAAA,MACZ,MAAQ,EAAA,MAAA;AAAA,MACR,GAAA,EAAK,KAAM,CAAA,OAAA,CAAQ,CAAC,CAAA;AAAA,KACrB,CAAA;AAAA,IACD,oBAAoB,GAAI,CAAA;AAAA,MACtB,YAAc,EAAA,KAAA;AAAA,MACd,UAAA,EAAY,KAAM,CAAA,MAAA,CAAO,UAAW,CAAA,OAAA;AAAA,MACpC,MAAQ,EAAA,CAAA,UAAA,EAAa,KAAM,CAAA,MAAA,CAAO,MAAO,CAAA,IAAA,CAAA,CAAA;AAAA,MACzC,YAAc,EAAA,KAAA,CAAM,KAAM,CAAA,YAAA,CAAa,CAAC,CAAA;AAAA,KACzC,CAAA;AAAA,IACD,UAAU,GAAI,CAAA;AAAA,MACZ,QAAA,EAAU,KAAM,CAAA,UAAA,CAAW,EAAG,CAAA,QAAA;AAAA,MAC9B,UAAA,EAAY,MAAM,UAAW,CAAA,gBAAA;AAAA,KAC9B,CAAA;AAAA,GACH,CAAA;AACF,CAAA;;;;"}
+{"version":3,"file":"SceneGridRow.js","sources":["../../../../../src/components/layout/grid/SceneGridRow.tsx"],"sourcesContent":["import { css, cx } from '@emotion/css';\nimport React from 'react';\n\nimport { GrafanaTheme2 } from '@grafana/data';\nimport { Icon, useStyles2 } from '@grafana/ui';\n\nimport { SceneObjectBase } from '../../../core/SceneObjectBase';\nimport { SceneComponentProps, SceneObject, SceneObjectUrlValues } from '../../../core/types';\nimport { SceneObjectUrlSyncConfig } from '../../../services/SceneObjectUrlSyncConfig';\n\nimport { SceneGridLayout } from './SceneGridLayout';\nimport { GRID_COLUMN_COUNT } from './constants';\nimport { SceneGridItemLike, SceneGridItemStateLike } from './types';\nimport { sceneGraph } from '../../../core/sceneGraph';\n\nexport interface SceneGridRowState extends SceneGridItemStateLike {\n  title: string;\n  isCollapsible?: boolean;\n  isCollapsed?: boolean;\n  actions?: SceneObject;\n  children: SceneGridItemLike[];\n}\n\nexport class SceneGridRow extends SceneObjectBase<SceneGridRowState> {\n  public static Component = SceneGridRowRenderer;\n\n  protected _urlSync = new SceneObjectUrlSyncConfig(this, { keys: ['rowc'] });\n\n  public constructor(state: Partial<SceneGridRowState>) {\n    super({\n      children: state.children || [],\n      isCollapsible: state.isCollapsible || true,\n      title: state.title || '',\n      isDraggable: state.isDraggable || true,\n      isResizable: state.isResizable || false,\n      ...state,\n      x: 0,\n      height: 1,\n      width: GRID_COLUMN_COUNT,\n    });\n  }\n\n  public getGridLayout(): SceneGridLayout {\n    const layout = this.parent;\n\n    if (!layout || !(layout instanceof SceneGridLayout)) {\n      throw new Error('SceneGridRow must be a child of SceneGridLayout');\n    }\n\n    return layout;\n  }\n\n  public onCollapseToggle = () => {\n    if (!this.state.isCollapsible) {\n      return;\n    }\n\n    this.getGridLayout().toggleRow(this);\n  };\n\n  public getUrlState() {\n    return { rowc: this.state.isCollapsed ? '1' : '0' };\n  }\n\n  public updateFromUrl(values: SceneObjectUrlValues) {\n    if (values.rowc == null) {\n      return;\n    }\n\n    if (values.rowc !== this.getUrlState().rowc) {\n      this.onCollapseToggle();\n    }\n  }\n}\n\nexport function SceneGridRowRenderer({ model }: SceneComponentProps<SceneGridRow>) {\n  const styles = useStyles2(getSceneGridRowStyles);\n  const { isCollapsible, isCollapsed, title, isDraggable, actions } = model.useState();\n  const layoutDragClass = model.getGridLayout().getDragClass();\n\n  return (\n    <div className={cx(styles.row, isCollapsed && styles.rowCollapsed)}>\n      <button onClick={model.onCollapseToggle} className={styles.rowTitleButton}>\n        {isCollapsible && <Icon name={isCollapsed ? 'angle-right' : 'angle-down'} />}\n        <span className={styles.rowTitle}>{sceneGraph.interpolate(model, title, undefined, 'text')}</span>\n      </button>\n      {isCollapsed && <div className={styles.collapsedInfo}>({model.state.children.length} panels)</div>}\n      {actions && <actions.Component model={actions} />}\n      {isDraggable && isCollapsed && (\n        <div className={cx(styles.dragHandle, layoutDragClass)}>\n          <Icon name=\"draggabledots\" />\n        </div>\n      )}\n    </div>\n  );\n}\n\nconst getSceneGridRowStyles = (theme: GrafanaTheme2) => {\n  return {\n    row: css({\n      width: '100%',\n      height: '30px',\n      display: 'flex',\n      justifyContent: 'space-between',\n      gap: theme.spacing(1),\n    }),\n    rowTitleButton: css({\n      display: 'flex',\n      alignItems: 'center',\n      cursor: 'pointer',\n      background: 'transparent',\n      border: 'none',\n      gap: theme.spacing(1),\n    }),\n    rowCollapsed: css({\n      background: theme.colors.background.secondary,\n      borderBottom: `1px solid ${theme.colors.border.weak}`,\n    }),\n    rowTitle: css({\n      fontSize: theme.typography.h5.fontSize,\n      fontWeight: theme.typography.fontWeightMedium,\n    }),\n    collapsedInfo: css({\n      fontSize: theme.typography.bodySmall.fontSize,\n      color: theme.colors.text.secondary,\n      display: 'flex',\n      alignItems: 'center',\n      flexGrow: 1,\n    }),\n    dragHandle: css({\n      display: 'flex',\n      padding: theme.spacing(0, 1),\n      alignItems: 'center',\n      justifyContent: 'flex-end',\n      cursor: 'move',\n      color: theme.colors.text.secondary,\n      '&:hover': {\n        color: theme.colors.text.primary,\n      },\n    }),\n  };\n};\n"],"names":[],"mappings":"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"}

package/dist/esm/core/SceneObjectBase.js

@@ -26,7 +26,7 @@ class SceneObjectBase {
   constructor(state) {
     this._isActive = false;
     this._activationHandlers = [];
-    this._deactivationHandlers = [];
+    this._deactivationHandlers = /* @__PURE__ */ new Map();
     this._subs = new Subscription();
     this._refCount = 0;
     if (!state.key) {
@@ -81,6 +81,7 @@ class SceneObjectBase {
     const newState = __spreadValues(__spreadValues({}, this._state), update);
     this._state = Object.freeze(newState);
     this._setParent();
+    this._handleActivationOfChangedStateProps(prevState, newState);
     this.publishEvent(
       new SceneObjectStateChangedEvent({
         prevState,
@@ -91,6 +92,32 @@ class SceneObjectBase {
       true
     );
   }
+  _handleActivationOfChangedStateProps(prevState, newState) {
+    if (!this.isActive) {
+      return;
+    }
+    if (prevState.$data !== newState.$data) {
+      this._handleChangedStateActivation(prevState.$data, newState.$data);
+    }
+    if (prevState.$variables !== newState.$variables) {
+      this._handleChangedStateActivation(prevState.$variables, newState.$variables);
+    }
+    if (prevState.$timeRange !== newState.$timeRange) {
+      this._handleChangedStateActivation(prevState.$timeRange, newState.$timeRange);
+    }
+  }
+  _handleChangedStateActivation(oldValue, newValue) {
+    if (oldValue) {
+      const deactivationHandler = this._deactivationHandlers.get(oldValue);
+      if (deactivationHandler) {
+        deactivationHandler();
+        this._deactivationHandlers.delete(oldValue);
+      }
+    }
+    if (newValue) {
+      this._deactivationHandlers.set(newValue, newValue.activate());
+    }
+  }
   publishEvent(event, bubble) {
     this._events.publish(event);
     if (bubble && this.parent) {
@@ -104,22 +131,22 @@ class SceneObjectBase {
     this._isActive = true;
     const { $data, $variables, $timeRange, $behaviors } = this.state;
     if ($timeRange && !$timeRange.isActive) {
-      this._deactivationHandlers.push($timeRange.activate());
+      this._deactivationHandlers.set($timeRange, $timeRange.activate());
     }
     if ($variables && !$variables.isActive) {
-      this._deactivationHandlers.push($variables.activate());
+      this._deactivationHandlers.set($variables, $variables.activate());
     }
     if ($data && !$data.isActive) {
-      this._deactivationHandlers.push($data.activate());
+      this._deactivationHandlers.set($data, $data.activate());
     }
     if ($behaviors) {
       for (const behavior of $behaviors) {
         if (behavior instanceof SceneObjectBase) {
-          this._deactivationHandlers.push(behavior.activate());
+          this._deactivationHandlers.set(behavior, behavior.activate());
         } else if (typeof behavior === "function") {
           const deactivationHandler = behavior(this);
           if (deactivationHandler) {
-            this._deactivationHandlers.push();
+            this._deactivationHandlers.set(behavior, deactivationHandler);
           }
         }
       }
@@ -127,7 +154,7 @@ class SceneObjectBase {
     this._activationHandlers.forEach((handler) => {
       const result = handler();
       if (result) {
-        this._deactivationHandlers.push(result);
+        this._deactivationHandlers.set(result, result);
       }
     });
   }
@@ -152,8 +179,10 @@ class SceneObjectBase {
   }
   _internalDeactivate() {
     this._isActive = false;
-    this._deactivationHandlers.forEach((handler) => handler());
-    this._deactivationHandlers = [];
+    for (let handler of this._deactivationHandlers.values()) {
+      handler();
+    }
+    this._deactivationHandlers.clear();
     this._events.removeAllListeners();
     this._subs.unsubscribe();
     this._subs = new Subscription();

package/dist/esm/core/SceneObjectBase.js.map

@@ -1 +1 @@
-{"version":3,"file":"SceneObjectBase.js","sources":["../../../src/core/SceneObjectBase.tsx"],"sourcesContent":["import { useEffect, useState } from 'react';\nimport { Subscription, Unsubscribable } from 'rxjs';\nimport { v4 as uuidv4 } from 'uuid';\n\nimport { BusEvent, BusEventHandler, BusEventType, EventBus, EventBusSrv } from '@grafana/data';\nimport {\n  SceneObject,\n  SceneComponent,\n  SceneObjectUrlSyncHandler,\n  SceneStateChangedHandler,\n  SceneActivationHandler,\n  SceneDeactivationHandler,\n  CancelActivationHandler,\n  SceneObjectState,\n} from './types';\n\nimport { SceneComponentWrapper } from './SceneComponentWrapper';\nimport { SceneObjectStateChangedEvent } from './events';\nimport { cloneSceneObject } from './sceneGraph/utils';\nimport { SceneVariableDependencyConfigLike } from '../variables/types';\n\nexport abstract class SceneObjectBase<TState extends SceneObjectState = SceneObjectState>\n  implements SceneObject<TState>\n{\n  private _isActive = false;\n  private _state: TState;\n  private _activationHandlers: SceneActivationHandler[] = [];\n  private _deactivationHandlers: SceneDeactivationHandler[] = [];\n\n  protected _events?: EventBus;\n  protected _parent?: SceneObject;\n  protected _subs = new Subscription();\n  protected _refCount = 0;\n\n  protected _variableDependency: SceneVariableDependencyConfigLike | undefined;\n  protected _urlSync: SceneObjectUrlSyncHandler | undefined;\n\n  public constructor(state: TState) {\n    if (!state.key) {\n      state.key = uuidv4();\n    }\n\n    this._events = new EventBusSrv();\n\n    this._state = Object.freeze(state);\n    this._setParent();\n  }\n\n  /** Current state */\n  public get state(): TState {\n    return this._state;\n  }\n\n  /** True if currently being active (ie displayed for visual objects) */\n  public get isActive(): boolean {\n    return this._isActive;\n  }\n\n  /** Returns the parent, undefined for root object */\n  public get parent(): SceneObject | undefined {\n    return this._parent;\n  }\n\n  /** Returns variable dependency config */\n  public get variableDependency(): SceneVariableDependencyConfigLike | undefined {\n    return this._variableDependency;\n  }\n\n  /** Returns url sync config */\n  public get urlSync(): SceneObjectUrlSyncHandler | undefined {\n    return this._urlSync;\n  }\n\n  /**\n   * Used in render functions when rendering a SceneObject.\n   * Wraps the component in an EditWrapper that handles edit mode\n   */\n  public get Component(): SceneComponent<this> {\n    return SceneComponentWrapper;\n  }\n\n  private _setParent() {\n    this.forEachChild((child) => {\n      // If we already have a parent and it's not this, then we likely have a bug\n      if (child._parent && child._parent !== this) {\n        console.warn(\n          'SceneObject already has a parent set that is different from the new parent. You cannot share the same SceneObject instance in multiple scenes or in multiple different places of the same scene graph. Use SceneObject.clone() to duplicate a SceneObject or store a state key reference and use sceneGraph.findObject to locate it.',\n          child,\n          this\n        );\n      }\n      child._parent = this;\n    });\n  }\n\n  /**\n   * Subscribe to the scene state subject\n   **/\n  public subscribeToState(handler: SceneStateChangedHandler<TState>): Unsubscribable {\n    return this._events!.subscribe(SceneObjectStateChangedEvent, (event) => {\n      if (event.payload.changedObject === this) {\n        handler(event.payload.newState as TState, event.payload.prevState as TState);\n      }\n    });\n  }\n\n  /**\n   * Subscribe to the scene event\n   **/\n  public subscribeToEvent<T extends BusEvent>(eventType: BusEventType<T>, handler: BusEventHandler<T>): Unsubscribable {\n    return this._events!.subscribe(eventType, handler);\n  }\n\n  public setState(update: Partial<TState>) {\n    const prevState = this._state;\n    const newState: TState = {\n      ...this._state,\n      ...update,\n    };\n\n    this._state = Object.freeze(newState);\n\n    this._setParent();\n\n    // Bubble state change event. This is event is subscribed to by UrlSyncManager and UndoManager\n    this.publishEvent(\n      new SceneObjectStateChangedEvent({\n        prevState,\n        newState,\n        partialUpdate: update,\n        changedObject: this,\n      }),\n      true\n    );\n  }\n  /*\n   * Publish an event and optionally bubble it up the scene\n   **/\n  public publishEvent(event: BusEvent, bubble?: boolean) {\n    this._events!.publish(event);\n\n    if (bubble && this.parent) {\n      this.parent.publishEvent(event, bubble);\n    }\n  }\n\n  public getRoot(): SceneObject {\n    return !this._parent ? this : this._parent.getRoot();\n  }\n\n  private _internalActivate() {\n    this._isActive = true;\n\n    const { $data, $variables, $timeRange, $behaviors } = this.state;\n\n    if ($timeRange && !$timeRange.isActive) {\n      this._deactivationHandlers.push($timeRange.activate());\n    }\n\n    if ($variables && !$variables.isActive) {\n      this._deactivationHandlers.push($variables.activate());\n    }\n\n    if ($data && !$data.isActive) {\n      this._deactivationHandlers.push($data.activate());\n    }\n\n    if ($behaviors) {\n      for (const behavior of $behaviors) {\n        if (behavior instanceof SceneObjectBase) {\n          this._deactivationHandlers.push(behavior.activate());\n        } else if (typeof behavior === 'function') {\n          const deactivationHandler = behavior(this);\n          if (deactivationHandler) {\n            this._deactivationHandlers.push();\n          }\n        }\n      }\n    }\n\n    this._activationHandlers.forEach((handler) => {\n      const result = handler();\n      if (result) {\n        this._deactivationHandlers.push(result);\n      }\n    });\n  }\n\n  /**\n   * This is primarily called from SceneComponentWrapper when the SceneObject's Component is mounted.\n   * But in some scenarios this can also be called directly from another scene object. When called manually from another scene object\n   * make sure to call the returned function when the source scene object is deactivated.\n   */\n  public activate(): CancelActivationHandler {\n    if (!this.isActive) {\n      this._internalActivate();\n    }\n\n    this._refCount++;\n\n    let called = false;\n\n    return () => {\n      this._refCount--;\n\n      if (called) {\n        const msg = `SceneObject cancelation handler returned by activate() called a second time`;\n        console.error(msg, this);\n        throw new Error(msg);\n      }\n\n      called = true;\n\n      if (this._refCount === 0) {\n        this._internalDeactivate();\n      }\n    };\n  }\n\n  /**\n   * Called by the SceneComponentWrapper when the react component is unmounted.\n   * Don't override this, instead use addActivationHandler. The activation handler can return a deactivation handler.\n   */\n  private _internalDeactivate(): void {\n    this._isActive = false;\n\n    this._deactivationHandlers.forEach((handler) => handler());\n    this._deactivationHandlers = [];\n\n    // Clear subscriptions and listeners\n    this._events!.removeAllListeners();\n    this._subs.unsubscribe();\n    this._subs = new Subscription();\n  }\n\n  /**\n   * Utility hook to get and subscribe to state\n   */\n  public useState() {\n    // eslint-disable-next-line react-hooks/rules-of-hooks\n    return useSceneObjectState(this);\n  }\n\n  /** Force a re-render, should only be needed when variable values change */\n  public forceRender(): void {\n    this.setState({});\n  }\n\n  /**\n   * Will create new SceneObject with shallow-cloned state, but all state items of type SceneObject are deep cloned\n   */\n  public clone(withState?: Partial<TState>): this {\n    return cloneSceneObject(this, withState);\n  }\n\n  /**\n   * Allows external code to register code that is executed on activate and deactivate. This allow you\n   * to wire up scene objects that need to respond to state changes in other objects from the outside.\n   **/\n  public addActivationHandler(handler: SceneActivationHandler) {\n    this._activationHandlers.push(handler);\n  }\n\n  /**\n   * Loop through state and call callback for each direct child scene object.\n   * Checks 1 level deep properties and arrays. So a scene object hidden in a nested plain object will not be detected.\n   */\n  public forEachChild(callback: (child: SceneObjectBase) => void) {\n    for (const propValue of Object.values(this.state)) {\n      if (propValue instanceof SceneObjectBase) {\n        callback(propValue);\n      }\n\n      if (Array.isArray(propValue)) {\n        for (const child of propValue) {\n          if (child instanceof SceneObjectBase) {\n            callback(child);\n          }\n        }\n      }\n    }\n  }\n}\n\n/**\n * This hook is always returning model.state instead of a useState that remembers the last state emitted on the subject\n * The reason for this is so that if the model instance change this function will always return the latest state.\n */\nfunction useSceneObjectState<TState extends SceneObjectState>(model: SceneObjectBase<TState>): TState {\n  const [_, setState] = useState<TState>(model.state);\n  const stateAtFirstRender = model.state;\n\n  useEffect(() => {\n    const s = model.subscribeToState(setState);\n\n    // Re-render component if the state changed between first render and useEffect (mount)\n    if (model.state !== stateAtFirstRender) {\n      setState(model.state);\n    }\n\n    return () => s.unsubscribe();\n    // eslint-disable-next-line react-hooks/exhaustive-deps\n  }, [model]);\n\n  return model.state;\n}\n"],"names":["uuidv4"],"mappings":"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"}
+{"version":3,"file":"SceneObjectBase.js","sources":["../../../src/core/SceneObjectBase.tsx"],"sourcesContent":["import { useEffect, useState } from 'react';\nimport { Subscription, Unsubscribable } from 'rxjs';\nimport { v4 as uuidv4 } from 'uuid';\n\nimport { BusEvent, BusEventHandler, BusEventType, EventBus, EventBusSrv } from '@grafana/data';\nimport {\n  SceneObject,\n  SceneComponent,\n  SceneObjectUrlSyncHandler,\n  SceneStateChangedHandler,\n  SceneActivationHandler,\n  SceneDeactivationHandler,\n  CancelActivationHandler,\n  SceneObjectState,\n} from './types';\n\nimport { SceneComponentWrapper } from './SceneComponentWrapper';\nimport { SceneObjectStateChangedEvent } from './events';\nimport { cloneSceneObject } from './sceneGraph/utils';\nimport { SceneVariableDependencyConfigLike } from '../variables/types';\n\nexport abstract class SceneObjectBase<TState extends SceneObjectState = SceneObjectState>\n  implements SceneObject<TState>\n{\n  private _isActive = false;\n  private _state: TState;\n  private _activationHandlers: SceneActivationHandler[] = [];\n  private _deactivationHandlers = new Map<object, SceneDeactivationHandler>();\n\n  protected _events?: EventBus;\n  protected _parent?: SceneObject;\n  protected _subs = new Subscription();\n  protected _refCount = 0;\n\n  protected _variableDependency: SceneVariableDependencyConfigLike | undefined;\n  protected _urlSync: SceneObjectUrlSyncHandler | undefined;\n\n  public constructor(state: TState) {\n    if (!state.key) {\n      state.key = uuidv4();\n    }\n\n    this._events = new EventBusSrv();\n\n    this._state = Object.freeze(state);\n    this._setParent();\n  }\n\n  /** Current state */\n  public get state(): TState {\n    return this._state;\n  }\n\n  /** True if currently being active (ie displayed for visual objects) */\n  public get isActive(): boolean {\n    return this._isActive;\n  }\n\n  /** Returns the parent, undefined for root object */\n  public get parent(): SceneObject | undefined {\n    return this._parent;\n  }\n\n  /** Returns variable dependency config */\n  public get variableDependency(): SceneVariableDependencyConfigLike | undefined {\n    return this._variableDependency;\n  }\n\n  /** Returns url sync config */\n  public get urlSync(): SceneObjectUrlSyncHandler | undefined {\n    return this._urlSync;\n  }\n\n  /**\n   * Used in render functions when rendering a SceneObject.\n   * Wraps the component in an EditWrapper that handles edit mode\n   */\n  public get Component(): SceneComponent<this> {\n    return SceneComponentWrapper;\n  }\n\n  private _setParent() {\n    this.forEachChild((child) => {\n      // If we already have a parent and it's not this, then we likely have a bug\n      if (child._parent && child._parent !== this) {\n        console.warn(\n          'SceneObject already has a parent set that is different from the new parent. You cannot share the same SceneObject instance in multiple scenes or in multiple different places of the same scene graph. Use SceneObject.clone() to duplicate a SceneObject or store a state key reference and use sceneGraph.findObject to locate it.',\n          child,\n          this\n        );\n      }\n      child._parent = this;\n    });\n  }\n\n  /**\n   * Subscribe to the scene state subject\n   **/\n  public subscribeToState(handler: SceneStateChangedHandler<TState>): Unsubscribable {\n    return this._events!.subscribe(SceneObjectStateChangedEvent, (event) => {\n      if (event.payload.changedObject === this) {\n        handler(event.payload.newState as TState, event.payload.prevState as TState);\n      }\n    });\n  }\n\n  /**\n   * Subscribe to the scene event\n   **/\n  public subscribeToEvent<T extends BusEvent>(eventType: BusEventType<T>, handler: BusEventHandler<T>): Unsubscribable {\n    return this._events!.subscribe(eventType, handler);\n  }\n\n  public setState(update: Partial<TState>) {\n    const prevState = this._state;\n    const newState: TState = {\n      ...this._state,\n      ...update,\n    };\n\n    this._state = Object.freeze(newState);\n    this._setParent();\n\n    // Handles cases when $data, $timeRange, or $variables are changed\n    this._handleActivationOfChangedStateProps(prevState, newState);\n\n    // Bubble state change event. This is event is subscribed to by UrlSyncManager and UndoManager\n    this.publishEvent(\n      new SceneObjectStateChangedEvent({\n        prevState,\n        newState,\n        partialUpdate: update,\n        changedObject: this,\n      }),\n      true\n    );\n  }\n\n  /**\n   * This handles activation and deactivation of $data, $timeRange and $variables when they change\n   * during the active phase of the scene object.\n   */\n  private _handleActivationOfChangedStateProps(prevState: TState, newState: TState) {\n    if (!this.isActive) {\n      return;\n    }\n\n    if (prevState.$data !== newState.$data) {\n      this._handleChangedStateActivation(prevState.$data, newState.$data);\n    }\n\n    if (prevState.$variables !== newState.$variables) {\n      this._handleChangedStateActivation(prevState.$variables, newState.$variables);\n    }\n\n    if (prevState.$timeRange !== newState.$timeRange) {\n      this._handleChangedStateActivation(prevState.$timeRange, newState.$timeRange);\n    }\n  }\n\n  private _handleChangedStateActivation(oldValue: SceneObject | undefined, newValue: SceneObject | undefined) {\n    if (oldValue) {\n      const deactivationHandler = this._deactivationHandlers.get(oldValue);\n      if (deactivationHandler) {\n        deactivationHandler();\n        this._deactivationHandlers.delete(oldValue);\n      }\n    }\n\n    if (newValue) {\n      this._deactivationHandlers.set(newValue, newValue.activate());\n    }\n  }\n\n  /*\n   * Publish an event and optionally bubble it up the scene\n   **/\n  public publishEvent(event: BusEvent, bubble?: boolean) {\n    this._events!.publish(event);\n\n    if (bubble && this.parent) {\n      this.parent.publishEvent(event, bubble);\n    }\n  }\n\n  public getRoot(): SceneObject {\n    return !this._parent ? this : this._parent.getRoot();\n  }\n\n  private _internalActivate() {\n    this._isActive = true;\n\n    const { $data, $variables, $timeRange, $behaviors } = this.state;\n\n    if ($timeRange && !$timeRange.isActive) {\n      this._deactivationHandlers.set($timeRange, $timeRange.activate());\n    }\n\n    if ($variables && !$variables.isActive) {\n      this._deactivationHandlers.set($variables, $variables.activate());\n    }\n\n    if ($data && !$data.isActive) {\n      this._deactivationHandlers.set($data, $data.activate());\n    }\n\n    if ($behaviors) {\n      for (const behavior of $behaviors) {\n        if (behavior instanceof SceneObjectBase) {\n          this._deactivationHandlers.set(behavior, behavior.activate());\n        } else if (typeof behavior === 'function') {\n          const deactivationHandler = behavior(this);\n          if (deactivationHandler) {\n            this._deactivationHandlers.set(behavior, deactivationHandler);\n          }\n        }\n      }\n    }\n\n    this._activationHandlers.forEach((handler) => {\n      const result = handler();\n      if (result) {\n        this._deactivationHandlers.set(result, result);\n      }\n    });\n  }\n\n  /**\n   * This is primarily called from SceneComponentWrapper when the SceneObject's Component is mounted.\n   * But in some scenarios this can also be called directly from another scene object. When called manually from another scene object\n   * make sure to call the returned function when the source scene object is deactivated.\n   */\n  public activate(): CancelActivationHandler {\n    if (!this.isActive) {\n      this._internalActivate();\n    }\n\n    this._refCount++;\n\n    let called = false;\n\n    return () => {\n      this._refCount--;\n\n      if (called) {\n        const msg = `SceneObject cancelation handler returned by activate() called a second time`;\n        console.error(msg, this);\n        throw new Error(msg);\n      }\n\n      called = true;\n\n      if (this._refCount === 0) {\n        this._internalDeactivate();\n      }\n    };\n  }\n\n  /**\n   * Called by the SceneComponentWrapper when the react component is unmounted.\n   * Don't override this, instead use addActivationHandler. The activation handler can return a deactivation handler.\n   */\n  private _internalDeactivate(): void {\n    this._isActive = false;\n\n    for (let handler of this._deactivationHandlers.values()) {\n      handler();\n    }\n\n    this._deactivationHandlers.clear();\n\n    // Clear subscriptions and listeners\n    this._events!.removeAllListeners();\n    this._subs.unsubscribe();\n    this._subs = new Subscription();\n  }\n\n  /**\n   * Utility hook to get and subscribe to state\n   */\n  public useState() {\n    // eslint-disable-next-line react-hooks/rules-of-hooks\n    return useSceneObjectState(this);\n  }\n\n  /** Force a re-render, should only be needed when variable values change */\n  public forceRender(): void {\n    this.setState({});\n  }\n\n  /**\n   * Will create new SceneObject with shallow-cloned state, but all state items of type SceneObject are deep cloned\n   */\n  public clone(withState?: Partial<TState>): this {\n    return cloneSceneObject(this, withState);\n  }\n\n  /**\n   * Allows external code to register code that is executed on activate and deactivate. This allow you\n   * to wire up scene objects that need to respond to state changes in other objects from the outside.\n   **/\n  public addActivationHandler(handler: SceneActivationHandler) {\n    this._activationHandlers.push(handler);\n  }\n\n  /**\n   * Loop through state and call callback for each direct child scene object.\n   * Checks 1 level deep properties and arrays. So a scene object hidden in a nested plain object will not be detected.\n   */\n  public forEachChild(callback: (child: SceneObjectBase) => void) {\n    for (const propValue of Object.values(this.state)) {\n      if (propValue instanceof SceneObjectBase) {\n        callback(propValue);\n      }\n\n      if (Array.isArray(propValue)) {\n        for (const child of propValue) {\n          if (child instanceof SceneObjectBase) {\n            callback(child);\n          }\n        }\n      }\n    }\n  }\n}\n\n/**\n * This hook is always returning model.state instead of a useState that remembers the last state emitted on the subject\n * The reason for this is so that if the model instance change this function will always return the latest state.\n */\nfunction useSceneObjectState<TState extends SceneObjectState>(model: SceneObjectBase<TState>): TState {\n  const [_, setState] = useState<TState>(model.state);\n  const stateAtFirstRender = model.state;\n\n  useEffect(() => {\n    const s = model.subscribeToState(setState);\n\n    // Re-render component if the state changed between first render and useEffect (mount)\n    if (model.state !== stateAtFirstRender) {\n      setState(model.state);\n    }\n\n    return () => s.unsubscribe();\n    // eslint-disable-next-line react-hooks/exhaustive-deps\n  }, [model]);\n\n  return model.state;\n}\n"],"names":["uuidv4"],"mappings":"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"}

package/dist/index.d.ts

@@ -304,6 +304,12 @@ declare abstract class SceneObjectBase<TState extends SceneObjectState = SceneOb
      **/
     subscribeToEvent<T extends BusEvent>(eventType: BusEventType<T>, handler: BusEventHandler<T>): Unsubscribable;
     setState(update: Partial<TState>): void;
+    /**
+     * This handles activation and deactivation of $data, $timeRange and $variables when they change
+     * during the active phase of the scene object.
+     */
+    private _handleActivationOfChangedStateProps;
+    private _handleChangedStateActivation;
     publishEvent(event: BusEvent, bubble?: boolean): void;
     getRoot(): SceneObject;
     private _internalActivate;
@@ -1167,6 +1173,7 @@ interface SceneGridRowState extends SceneGridItemStateLike {
     title: string;
     isCollapsible?: boolean;
     isCollapsed?: boolean;
+    actions?: SceneObject;
     children: SceneGridItemLike[];
 }
 declare class SceneGridRow extends SceneObjectBase<SceneGridRowState> {

package/dist/index.js

@@ -201,7 +201,7 @@ class SceneObjectBase {
   constructor(state) {
     this._isActive = false;
     this._activationHandlers = [];
-    this._deactivationHandlers = [];
+    this._deactivationHandlers = /* @__PURE__ */ new Map();
     this._subs = new rxjs.Subscription();
     this._refCount = 0;
     if (!state.key) {
@@ -256,6 +256,7 @@ class SceneObjectBase {
     const newState = __spreadValues$s(__spreadValues$s({}, this._state), update);
     this._state = Object.freeze(newState);
     this._setParent();
+    this._handleActivationOfChangedStateProps(prevState, newState);
     this.publishEvent(
       new SceneObjectStateChangedEvent({
         prevState,
@@ -266,6 +267,32 @@ class SceneObjectBase {
       true
     );
   }
+  _handleActivationOfChangedStateProps(prevState, newState) {
+    if (!this.isActive) {
+      return;
+    }
+    if (prevState.$data !== newState.$data) {
+      this._handleChangedStateActivation(prevState.$data, newState.$data);
+    }
+    if (prevState.$variables !== newState.$variables) {
+      this._handleChangedStateActivation(prevState.$variables, newState.$variables);
+    }
+    if (prevState.$timeRange !== newState.$timeRange) {
+      this._handleChangedStateActivation(prevState.$timeRange, newState.$timeRange);
+    }
+  }
+  _handleChangedStateActivation(oldValue, newValue) {
+    if (oldValue) {
+      const deactivationHandler = this._deactivationHandlers.get(oldValue);
+      if (deactivationHandler) {
+        deactivationHandler();
+        this._deactivationHandlers.delete(oldValue);
+      }
+    }
+    if (newValue) {
+      this._deactivationHandlers.set(newValue, newValue.activate());
+    }
+  }
   publishEvent(event, bubble) {
     this._events.publish(event);
     if (bubble && this.parent) {
@@ -279,22 +306,22 @@ class SceneObjectBase {
     this._isActive = true;
     const { $data, $variables, $timeRange, $behaviors } = this.state;
     if ($timeRange && !$timeRange.isActive) {
-      this._deactivationHandlers.push($timeRange.activate());
+      this._deactivationHandlers.set($timeRange, $timeRange.activate());
     }
     if ($variables && !$variables.isActive) {
-      this._deactivationHandlers.push($variables.activate());
+      this._deactivationHandlers.set($variables, $variables.activate());
     }
     if ($data && !$data.isActive) {
-      this._deactivationHandlers.push($data.activate());
+      this._deactivationHandlers.set($data, $data.activate());
     }
     if ($behaviors) {
       for (const behavior of $behaviors) {
         if (behavior instanceof SceneObjectBase) {
-          this._deactivationHandlers.push(behavior.activate());
+          this._deactivationHandlers.set(behavior, behavior.activate());
         } else if (typeof behavior === "function") {
           const deactivationHandler = behavior(this);
           if (deactivationHandler) {
-            this._deactivationHandlers.push();
+            this._deactivationHandlers.set(behavior, deactivationHandler);
           }
         }
       }
@@ -302,7 +329,7 @@ class SceneObjectBase {
     this._activationHandlers.forEach((handler) => {
       const result = handler();
       if (result) {
-        this._deactivationHandlers.push(result);
+        this._deactivationHandlers.set(result, result);
       }
     });
   }
@@ -327,8 +354,10 @@ class SceneObjectBase {
   }
   _internalDeactivate() {
     this._isActive = false;
-    this._deactivationHandlers.forEach((handler) => handler());
-    this._deactivationHandlers = [];
+    for (let handler of this._deactivationHandlers.values()) {
+      handler();
+    }
+    this._deactivationHandlers.clear();
     this._events.removeAllListeners();
     this._subs.unsubscribe();
     this._subs = new rxjs.Subscription();
@@ -5161,19 +5190,6 @@ const GRID_CELL_HEIGHT = 30;
 const GRID_CELL_VMARGIN = 8;
 const GRID_COLUMN_COUNT = 24;
 
-function SceneDragHandle({ className, dragClass }) {
-  return /* @__PURE__ */ React__default["default"].createElement("div", {
-    className: `${className} ${dragClass}`,
-    style: {
-      width: "20px",
-      height: "20px",
-      cursor: "move"
-    }
-  }, /* @__PURE__ */ React__default["default"].createElement(ui.Icon, {
-    name: "draggabledots"
-  }));
-}
-
 var __defProp$5 = Object.defineProperty;
 var __defProps$2 = Object.defineProperties;
 var __getOwnPropDescs$2 = Object.getOwnPropertyDescriptors;
@@ -5236,14 +5252,10 @@ class SceneGridRow extends SceneObjectBase {
 SceneGridRow.Component = SceneGridRowRenderer;
 function SceneGridRowRenderer({ model }) {
   const styles = ui.useStyles2(getSceneGridRowStyles);
-  const { isCollapsible, isCollapsed, title, isDraggable } = model.useState();
-  const dragHandle = /* @__PURE__ */ React__default["default"].createElement(SceneDragHandle, {
-    dragClass: model.getGridLayout().getDragClass()
-  });
+  const { isCollapsible, isCollapsed, title, isDraggable, actions } = model.useState();
+  const layoutDragClass = model.getGridLayout().getDragClass();
   return /* @__PURE__ */ React__default["default"].createElement("div", {
-    className: styles.row
-  }, /* @__PURE__ */ React__default["default"].createElement("div", {
-    className: css.cx(styles.rowHeader, isCollapsed && styles.rowHeaderCollapsed)
+    className: css.cx(styles.row, isCollapsed && styles.rowCollapsed)
   }, /* @__PURE__ */ React__default["default"].createElement("button", {
     onClick: model.onCollapseToggle,
     className: styles.rowTitleButton
@@ -5251,25 +5263,24 @@ function SceneGridRowRenderer({ model }) {
     name: isCollapsed ? "angle-right" : "angle-down"
   }), /* @__PURE__ */ React__default["default"].createElement("span", {
     className: styles.rowTitle
-  }, title)), isDraggable && isCollapsed && /* @__PURE__ */ React__default["default"].createElement("div", null, dragHandle)));
+  }, sceneGraph.interpolate(model, title, void 0, "text"))), isCollapsed && /* @__PURE__ */ React__default["default"].createElement("div", {
+    className: styles.collapsedInfo
+  }, "(", model.state.children.length, " panels)"), actions && /* @__PURE__ */ React__default["default"].createElement(actions.Component, {
+    model: actions
+  }), isDraggable && isCollapsed && /* @__PURE__ */ React__default["default"].createElement("div", {
+    className: css.cx(styles.dragHandle, layoutDragClass)
+  }, /* @__PURE__ */ React__default["default"].createElement(ui.Icon, {
+    name: "draggabledots"
+  })));
 }
 const getSceneGridRowStyles = (theme) => {
   return {
     row: css.css({
-      width: "100%",
-      height: "100%",
-      position: "relative",
-      zIndex: 0,
-      display: "flex",
-      flexDirection: "column"
-    }),
-    rowHeader: css.css({
       width: "100%",
       height: "30px",
       display: "flex",
       justifyContent: "space-between",
-      marginBottom: "8px",
-      border: `1px solid transparent`
+      gap: theme.spacing(1)
     }),
     rowTitleButton: css.css({
       display: "flex",
@@ -5279,15 +5290,31 @@ const getSceneGridRowStyles = (theme) => {
       border: "none",
       gap: theme.spacing(1)
     }),
-    rowHeaderCollapsed: css.css({
-      marginBottom: "0px",
-      background: theme.colors.background.primary,
-      border: `1px solid ${theme.colors.border.weak}`,
-      borderRadius: theme.shape.borderRadius(1)
+    rowCollapsed: css.css({
+      background: theme.colors.background.secondary,
+      borderBottom: `1px solid ${theme.colors.border.weak}`
     }),
     rowTitle: css.css({
       fontSize: theme.typography.h5.fontSize,
       fontWeight: theme.typography.fontWeightMedium
+    }),
+    collapsedInfo: css.css({
+      fontSize: theme.typography.bodySmall.fontSize,
+      color: theme.colors.text.secondary,
+      display: "flex",
+      alignItems: "center",
+      flexGrow: 1
+    }),
+    dragHandle: css.css({
+      display: "flex",
+      padding: theme.spacing(0, 1),
+      alignItems: "center",
+      justifyContent: "flex-end",
+      cursor: "move",
+      color: theme.colors.text.secondary,
+      "&:hover": {
+        color: theme.colors.text.primary
+      }
     })
   };
 };