@grafana/scenes 0.0.7 → 0.0.8

package/dist/esm/components/EmbeddedScene.js

@@ -0,0 +1,58 @@
+import { css } from '@emotion/css';
+import { useStyles2 } from '@grafana/ui';
+import React from 'react';
+import { SceneObjectBase } from '../core/SceneObjectBase.js';
+import { UrlSyncManager } from '../services/UrlSyncManager.js';
+
+class EmbeddedScene extends SceneObjectBase {
+  activate() {
+    super.activate();
+    this.urlSyncManager = new UrlSyncManager(this);
+    this.urlSyncManager.initSync();
+  }
+  deactivate() {
+    super.deactivate();
+    this.urlSyncManager.cleanUp();
+  }
+}
+EmbeddedScene.Component = EmbeddedSceneRenderer;
+function EmbeddedSceneRenderer({ model }) {
+  const { body, controls } = model.useState();
+  const styles = useStyles2(getStyles);
+  return /* @__PURE__ */ React.createElement("div", {
+    className: styles.container
+  }, controls && /* @__PURE__ */ React.createElement("div", {
+    className: styles.controls
+  }, controls.map((control) => /* @__PURE__ */ React.createElement(control.Component, {
+    key: control.state.key,
+    model: control
+  }))), /* @__PURE__ */ React.createElement("div", {
+    className: styles.body
+  }, /* @__PURE__ */ React.createElement(body.Component, {
+    model: body
+  })));
+}
+function getStyles(theme) {
+  return {
+    container: css({
+      flexGrow: 1,
+      display: "flex",
+      gap: "8px",
+      minHeight: "100%",
+      flexDirection: "column"
+    }),
+    body: css({
+      flexGrow: 1,
+      display: "flex",
+      gap: "8px"
+    }),
+    controls: css({
+      display: "flex",
+      gap: theme.spacing(1),
+      alignItems: "center"
+    })
+  };
+}
+
+export { EmbeddedScene };
+//# sourceMappingURL=EmbeddedScene.js.map

package/dist/esm/components/EmbeddedScene.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"EmbeddedScene.js","sources":["../../../src/components/EmbeddedScene.tsx"],"sourcesContent":["import { css } from '@emotion/css';\nimport { GrafanaTheme2 } from '@grafana/data';\nimport { useStyles2 } from '@grafana/ui';\nimport React from 'react';\n\nimport { SceneObjectBase } from '../core/SceneObjectBase';\nimport { SceneComponentProps, SceneObjectStatePlain, SceneObject } from '../core/types';\nimport { UrlSyncManager } from '../services/UrlSyncManager';\n\nexport interface EmbeddedSceneState extends SceneObjectStatePlain {\n  /**\n   * The main content of the scene (usually a SceneFlexLayout)\n   */\n  body: SceneObject;\n  /**\n   * Top row of variable selectors, filters, time pickers and custom actions.\n   */\n  controls?: SceneObject[];\n}\n\nexport class EmbeddedScene extends SceneObjectBase<EmbeddedSceneState> {\n  public static Component = EmbeddedSceneRenderer;\n\n  private urlSyncManager?: UrlSyncManager;\n\n  public activate() {\n    super.activate();\n    this.urlSyncManager = new UrlSyncManager(this);\n    this.urlSyncManager.initSync();\n  }\n\n  public deactivate() {\n    super.deactivate();\n    this.urlSyncManager!.cleanUp();\n  }\n}\n\nfunction EmbeddedSceneRenderer({ model }: SceneComponentProps<EmbeddedScene>) {\n  const { body, controls } = model.useState();\n  const styles = useStyles2(getStyles);\n\n  return (\n    <div className={styles.container}>\n      {controls && (\n        <div className={styles.controls}>\n          {controls.map((control) => (\n            <control.Component key={control.state.key} model={control} />\n          ))}\n        </div>\n      )}\n      <div className={styles.body}>\n        <body.Component model={body} />\n      </div>\n    </div>\n  );\n}\n\nfunction getStyles(theme: GrafanaTheme2) {\n  return {\n    container: css({\n      flexGrow: 1,\n      display: 'flex',\n      gap: '8px',\n      minHeight: '100%',\n      flexDirection: 'column',\n    }),\n    body: css({\n      flexGrow: 1,\n      display: 'flex',\n      gap: '8px',\n    }),\n    controls: css({\n      display: 'flex',\n      gap: theme.spacing(1),\n      alignItems: 'center',\n    }),\n  };\n}\n"],"names":[],"mappings":";;;;;;AAoBO,MAAM,sBAAsB,eAAoC,CAAA;AAAA,EAK9D,QAAW,GAAA;AAChB,IAAA,KAAA,CAAM,QAAS,EAAA,CAAA;AACf,IAAK,IAAA,CAAA,cAAA,GAAiB,IAAI,cAAA,CAAe,IAAI,CAAA,CAAA;AAC7C,IAAA,IAAA,CAAK,eAAe,QAAS,EAAA,CAAA;AAAA,GAC/B;AAAA,EAEO,UAAa,GAAA;AAClB,IAAA,KAAA,CAAM,UAAW,EAAA,CAAA;AACjB,IAAA,IAAA,CAAK,eAAgB,OAAQ,EAAA,CAAA;AAAA,GAC/B;AACF,CAAA;AAfa,aAAA,CACG,SAAY,GAAA,qBAAA,CAAA;AAgB5B,SAAS,qBAAA,CAAsB,EAAE,KAAA,EAA6C,EAAA;AAC5E,EAAA,MAAM,EAAE,IAAA,EAAM,QAAS,EAAA,GAAI,MAAM,QAAS,EAAA,CAAA;AAC1C,EAAM,MAAA,MAAA,GAAS,WAAW,SAAS,CAAA,CAAA;AAEnC,EAAA,uBACG,KAAA,CAAA,aAAA,CAAA,KAAA,EAAA;AAAA,IAAI,WAAW,MAAO,CAAA,SAAA;AAAA,GAAA,EACpB,4BACE,KAAA,CAAA,aAAA,CAAA,KAAA,EAAA;AAAA,IAAI,WAAW,MAAO,CAAA,QAAA;AAAA,GAAA,EACpB,SAAS,GAAI,CAAA,CAAC,OACb,qBAAA,KAAA,CAAA,aAAA,CAAC,QAAQ,SAAR,EAAA;AAAA,IAAkB,GAAA,EAAK,QAAQ,KAAM,CAAA,GAAA;AAAA,IAAK,KAAO,EAAA,OAAA;AAAA,GAAS,CAC5D,CACH,CAAA,kBAED,KAAA,CAAA,aAAA,CAAA,KAAA,EAAA;AAAA,IAAI,WAAW,MAAO,CAAA,IAAA;AAAA,GACrB,kBAAA,KAAA,CAAA,aAAA,CAAC,KAAK,SAAL,EAAA;AAAA,IAAe,KAAO,EAAA,IAAA;AAAA,GAAM,CAC/B,CACF,CAAA,CAAA;AAEJ,CAAA;AAEA,SAAS,UAAU,KAAsB,EAAA;AACvC,EAAO,OAAA;AAAA,IACL,WAAW,GAAI,CAAA;AAAA,MACb,QAAU,EAAA,CAAA;AAAA,MACV,OAAS,EAAA,MAAA;AAAA,MACT,GAAK,EAAA,KAAA;AAAA,MACL,SAAW,EAAA,MAAA;AAAA,MACX,aAAe,EAAA,QAAA;AAAA,KAChB,CAAA;AAAA,IACD,MAAM,GAAI,CAAA;AAAA,MACR,QAAU,EAAA,CAAA;AAAA,MACV,OAAS,EAAA,MAAA;AAAA,MACT,GAAK,EAAA,KAAA;AAAA,KACN,CAAA;AAAA,IACD,UAAU,GAAI,CAAA;AAAA,MACZ,OAAS,EAAA,MAAA;AAAA,MACT,GAAA,EAAK,KAAM,CAAA,OAAA,CAAQ,CAAC,CAAA;AAAA,MACpB,UAAY,EAAA,QAAA;AAAA,KACb,CAAA;AAAA,GACH,CAAA;AACF;;;;"}

package/dist/esm/components/NestedScene.js.map

@@ -1 +1 @@
-{"version":3,"file":"NestedScene.js","sources":["../../../src/components/NestedScene.tsx"],"sourcesContent":["import { css } from '@emotion/css';\nimport React from 'react';\n\nimport { GrafanaTheme2 } from '@grafana/data';\nimport { Stack } from '@grafana/experimental';\nimport { Button, ToolbarButton, useStyles2 } from '@grafana/ui';\n\nimport { SceneObjectBase } from '../core/SceneObjectBase';\nimport { SceneObject, SceneLayoutChildState, SceneComponentProps, SceneLayout } from '../core/types';\n\ninterface NestedSceneState extends SceneLayoutChildState {\n  title: string;\n  isCollapsed?: boolean;\n  canCollapse?: boolean;\n  canRemove?: boolean;\n  body: SceneLayout;\n  actions?: SceneObject[];\n}\n\nexport class NestedScene extends SceneObjectBase<NestedSceneState> {\n  public static Component = NestedSceneRenderer;\n\n  public onToggle = () => {\n    this.setState({\n      isCollapsed: !this.state.isCollapsed,\n      placement: {\n        ...this.state.placement,\n        ySizing: this.state.isCollapsed ? 'fill' : 'content',\n      },\n    });\n  };\n\n  /** Removes itself from its parent's children array */\n  public onRemove = () => {\n    const parent = this.parent!;\n    if ('children' in parent.state) {\n      parent.setState({\n        children: parent.state.children.filter((x) => x !== this),\n      });\n    }\n  };\n}\n\nexport function NestedSceneRenderer({ model, isEditing }: SceneComponentProps<NestedScene>) {\n  const { title, isCollapsed, canCollapse, canRemove, body, actions } = model.useState();\n  const styles = useStyles2(getStyles);\n\n  const toolbarActions = (actions ?? []).map((action) => <action.Component key={action.state.key} model={action} />);\n\n  if (canRemove) {\n    toolbarActions.push(\n      <ToolbarButton\n        icon=\"times\"\n        variant={'default'}\n        onClick={model.onRemove}\n        key=\"remove-button\"\n        aria-label=\"Remove scene\"\n      />\n    );\n  }\n\n  return (\n    <div className={styles.row}>\n      <div className={styles.rowHeader}>\n        <Stack gap={0}>\n          <div className={styles.title} role=\"heading\" aria-level={1}>\n            {title}\n          </div>\n          {canCollapse && (\n            <div className={styles.toggle}>\n              <Button\n                size=\"sm\"\n                icon={isCollapsed ? 'angle-down' : 'angle-up'}\n                fill=\"text\"\n                variant=\"secondary\"\n                aria-label={isCollapsed ? 'Expand scene' : 'Collapse scene'}\n                onClick={model.onToggle}\n              />\n            </div>\n          )}\n        </Stack>\n        <div className={styles.actions}>{toolbarActions}</div>\n      </div>\n      {!isCollapsed && <body.Component model={body} isEditing={isEditing} />}\n    </div>\n  );\n}\n\nconst getStyles = (theme: GrafanaTheme2) => ({\n  row: css({\n    display: 'flex',\n    flexDirection: 'column',\n    flexGrow: 1,\n    gap: theme.spacing(1),\n    cursor: 'pointer',\n  }),\n  toggle: css({}),\n  title: css({\n    fontSize: theme.typography.h5.fontSize,\n  }),\n  rowHeader: css({\n    display: 'flex',\n    alignItems: 'center',\n    gap: theme.spacing(2),\n  }),\n  actions: css({\n    display: 'flex',\n    alignItems: 'center',\n    gap: theme.spacing(1),\n    justifyContent: 'flex-end',\n    flexGrow: 1,\n  }),\n});\n"],"names":[],"mappings":"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"}
+{"version":3,"file":"NestedScene.js","sources":["../../../src/components/NestedScene.tsx"],"sourcesContent":["import { css } from '@emotion/css';\nimport React from 'react';\n\nimport { GrafanaTheme2 } from '@grafana/data';\nimport { Stack } from '@grafana/experimental';\nimport { Button, ToolbarButton, useStyles2 } from '@grafana/ui';\n\nimport { SceneObjectBase } from '../core/SceneObjectBase';\nimport { SceneObject, SceneLayoutChildState, SceneComponentProps, SceneLayout } from '../core/types';\n\ninterface NestedSceneState extends SceneLayoutChildState {\n  title: string;\n  isCollapsed?: boolean;\n  canCollapse?: boolean;\n  canRemove?: boolean;\n  body: SceneLayout;\n  actions?: SceneObject[];\n}\n\n/**\n * @internal\n * POC status, don't use this yet\n */\nexport class NestedScene extends SceneObjectBase<NestedSceneState> {\n  public static Component = NestedSceneRenderer;\n\n  public onToggle = () => {\n    this.setState({\n      isCollapsed: !this.state.isCollapsed,\n      placement: {\n        ...this.state.placement,\n        ySizing: this.state.isCollapsed ? 'fill' : 'content',\n      },\n    });\n  };\n\n  /** Removes itself from its parent's children array */\n  public onRemove = () => {\n    const parent = this.parent!;\n    if ('children' in parent.state) {\n      parent.setState({\n        children: parent.state.children.filter((x) => x !== this),\n      });\n    }\n  };\n}\n\nexport function NestedSceneRenderer({ model, isEditing }: SceneComponentProps<NestedScene>) {\n  const { title, isCollapsed, canCollapse, canRemove, body, actions } = model.useState();\n  const styles = useStyles2(getStyles);\n\n  const toolbarActions = (actions ?? []).map((action) => <action.Component key={action.state.key} model={action} />);\n\n  if (canRemove) {\n    toolbarActions.push(\n      <ToolbarButton\n        icon=\"times\"\n        variant={'default'}\n        onClick={model.onRemove}\n        key=\"remove-button\"\n        aria-label=\"Remove scene\"\n      />\n    );\n  }\n\n  return (\n    <div className={styles.row}>\n      <div className={styles.rowHeader}>\n        <Stack gap={0}>\n          <div className={styles.title} role=\"heading\" aria-level={1}>\n            {title}\n          </div>\n          {canCollapse && (\n            <div className={styles.toggle}>\n              <Button\n                size=\"sm\"\n                icon={isCollapsed ? 'angle-down' : 'angle-up'}\n                fill=\"text\"\n                variant=\"secondary\"\n                aria-label={isCollapsed ? 'Expand scene' : 'Collapse scene'}\n                onClick={model.onToggle}\n              />\n            </div>\n          )}\n        </Stack>\n        <div className={styles.actions}>{toolbarActions}</div>\n      </div>\n      {!isCollapsed && <body.Component model={body} isEditing={isEditing} />}\n    </div>\n  );\n}\n\nconst getStyles = (theme: GrafanaTheme2) => ({\n  row: css({\n    display: 'flex',\n    flexDirection: 'column',\n    flexGrow: 1,\n    gap: theme.spacing(1),\n    cursor: 'pointer',\n  }),\n  toggle: css({}),\n  title: css({\n    fontSize: theme.typography.h5.fontSize,\n  }),\n  rowHeader: css({\n    display: 'flex',\n    alignItems: 'center',\n    gap: theme.spacing(2),\n  }),\n  actions: css({\n    display: 'flex',\n    alignItems: 'center',\n    gap: theme.spacing(1),\n    justifyContent: 'flex-end',\n    flexGrow: 1,\n  }),\n});\n"],"names":[],"mappings":"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"}

package/dist/esm/components/SceneControlsSpacer.js

@@ -0,0 +1,16 @@
+import React from 'react';
+import { SceneObjectBase } from '../core/SceneObjectBase.js';
+
+class SceneControlsSpacer extends SceneObjectBase {
+  constructor() {
+    super({});
+  }
+}
+SceneControlsSpacer.Component = (_props) => {
+  return /* @__PURE__ */ React.createElement("div", {
+    style: { flexGrow: 1 }
+  });
+};
+
+export { SceneControlsSpacer };
+//# sourceMappingURL=SceneControlsSpacer.js.map

package/dist/esm/components/SceneControlsSpacer.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"SceneControlsSpacer.js","sources":["../../../src/components/SceneControlsSpacer.tsx"],"sourcesContent":["import React from 'react';\n\nimport { SceneObjectBase } from '../core/SceneObjectBase';\nimport { SceneComponentProps } from '../core/types';\n\nexport class SceneControlsSpacer extends SceneObjectBase<{}> {\n  public constructor() {\n    super({});\n  }\n\n  public static Component = (_props: SceneComponentProps<SceneControlsSpacer>) => {\n    return <div style={{ flexGrow: 1 }} />;\n  };\n}\n"],"names":[],"mappings":";;;AAKO,MAAM,4BAA4B,eAAoB,CAAA;AAAA,EACpD,WAAc,GAAA;AACnB,IAAA,KAAA,CAAM,EAAE,CAAA,CAAA;AAAA,GACV;AAKF,CAAA;AARa,mBAKG,CAAA,SAAA,GAAY,CAAC,MAAqD,KAAA;AAC9E,EAAA,uBAAQ,KAAA,CAAA,aAAA,CAAA,KAAA,EAAA;AAAA,IAAI,KAAA,EAAO,EAAE,QAAA,EAAU,CAAE,EAAA;AAAA,GAAG,CAAA,CAAA;AACtC,CAAA;;;;"}

package/dist/esm/components/SceneTimePicker.js

@@ -7,7 +7,7 @@ class SceneTimePicker extends SceneObjectBase {
 }
 SceneTimePicker.Component = SceneTimePickerRenderer;
 function SceneTimePickerRenderer({ model }) {
-  const { hidePicker } = model.useState();
+  const { hidePicker, isOnCanvas } = model.useState();
   const timeRange = sceneGraph.getTimeRange(model);
   const timeRangeState = timeRange.useState();
   if (hidePicker) {
@@ -16,6 +16,7 @@ function SceneTimePickerRenderer({ model }) {
   return /* @__PURE__ */ React.createElement(ToolbarButtonRow, {
     alignment: "right"
   }, /* @__PURE__ */ React.createElement(TimeRangePicker, {
+    isOnCanvas,
     value: timeRangeState.value,
     onChange: timeRange.onTimeRangeChange,
     timeZone: "browser",

package/dist/esm/components/SceneTimePicker.js.map

@@ -1 +1 @@
-{"version":3,"file":"SceneTimePicker.js","sources":["../../../src/components/SceneTimePicker.tsx"],"sourcesContent":["import React from 'react';\n\nimport { RefreshPicker, TimeRangePicker, ToolbarButtonRow } from '@grafana/ui';\n\nimport { SceneObjectBase } from '../core/SceneObjectBase';\nimport { sceneGraph } from '../core/sceneGraph';\nimport { SceneComponentProps, SceneObjectStatePlain } from '../core/types';\n\nexport interface SceneTimePickerState extends SceneObjectStatePlain {\n  hidePicker?: boolean;\n}\n\nexport class SceneTimePicker extends SceneObjectBase<SceneTimePickerState> {\n  public static Component = SceneTimePickerRenderer;\n}\n\nfunction SceneTimePickerRenderer({ model }: SceneComponentProps<SceneTimePicker>) {\n  const { hidePicker } = model.useState();\n  const timeRange = sceneGraph.getTimeRange(model);\n  const timeRangeState = timeRange.useState();\n\n  if (hidePicker) {\n    return null;\n  }\n\n  return (\n    <ToolbarButtonRow alignment=\"right\">\n      <TimeRangePicker\n        value={timeRangeState.value}\n        onChange={timeRange.onTimeRangeChange}\n        timeZone={'browser'}\n        fiscalYearStartMonth={0}\n        onMoveBackward={() => {}}\n        onMoveForward={() => {}}\n        onZoom={() => {}}\n        onChangeTimeZone={() => {}}\n        onChangeFiscalYearStartMonth={() => {}}\n      />\n\n      <RefreshPicker onRefresh={timeRange.onRefresh} onIntervalChanged={timeRange.onIntervalChanged} />\n    </ToolbarButtonRow>\n  );\n}\n"],"names":[],"mappings":";;;;;AAYO,MAAM,wBAAwB,eAAsC,CAAA;AAE3E,CAAA;AAFa,eAAA,CACG,SAAY,GAAA,uBAAA,CAAA;AAG5B,SAAS,uBAAA,CAAwB,EAAE,KAAA,EAA+C,EAAA;AAChF,EAAA,MAAM,EAAE,UAAA,EAAe,GAAA,KAAA,CAAM,QAAS,EAAA,CAAA;AACtC,EAAM,MAAA,SAAA,GAAY,UAAW,CAAA,YAAA,CAAa,KAAK,CAAA,CAAA;AAC/C,EAAM,MAAA,cAAA,GAAiB,UAAU,QAAS,EAAA,CAAA;AAE1C,EAAA,IAAI,UAAY,EAAA;AACd,IAAO,OAAA,IAAA,CAAA;AAAA,GACT;AAEA,EAAA,uBACG,KAAA,CAAA,aAAA,CAAA,gBAAA,EAAA;AAAA,IAAiB,SAAU,EAAA,OAAA;AAAA,GAAA,kBACzB,KAAA,CAAA,aAAA,CAAA,eAAA,EAAA;AAAA,IACC,OAAO,cAAe,CAAA,KAAA;AAAA,IACtB,UAAU,SAAU,CAAA,iBAAA;AAAA,IACpB,QAAU,EAAA,SAAA;AAAA,IACV,oBAAsB,EAAA,CAAA;AAAA,IACtB,gBAAgB,MAAM;AAAA,KAAC;AAAA,IACvB,eAAe,MAAM;AAAA,KAAC;AAAA,IACtB,QAAQ,MAAM;AAAA,KAAC;AAAA,IACf,kBAAkB,MAAM;AAAA,KAAC;AAAA,IACzB,8BAA8B,MAAM;AAAA,KAAC;AAAA,GACvC,mBAEC,KAAA,CAAA,aAAA,CAAA,aAAA,EAAA;AAAA,IAAc,WAAW,SAAU,CAAA,SAAA;AAAA,IAAW,mBAAmB,SAAU,CAAA,iBAAA;AAAA,GAAmB,CACjG,CAAA,CAAA;AAEJ;;;;"}
+{"version":3,"file":"SceneTimePicker.js","sources":["../../../src/components/SceneTimePicker.tsx"],"sourcesContent":["import React from 'react';\n\nimport { RefreshPicker, TimeRangePicker, ToolbarButtonRow } from '@grafana/ui';\n\nimport { SceneObjectBase } from '../core/SceneObjectBase';\nimport { sceneGraph } from '../core/sceneGraph';\nimport { SceneComponentProps, SceneObjectStatePlain } from '../core/types';\n\nexport interface SceneTimePickerState extends SceneObjectStatePlain {\n  hidePicker?: boolean;\n  isOnCanvas?: boolean;\n}\n\nexport class SceneTimePicker extends SceneObjectBase<SceneTimePickerState> {\n  public static Component = SceneTimePickerRenderer;\n}\n\nfunction SceneTimePickerRenderer({ model }: SceneComponentProps<SceneTimePicker>) {\n  const { hidePicker, isOnCanvas } = model.useState();\n  const timeRange = sceneGraph.getTimeRange(model);\n  const timeRangeState = timeRange.useState();\n\n  if (hidePicker) {\n    return null;\n  }\n\n  return (\n    <ToolbarButtonRow alignment=\"right\">\n      <TimeRangePicker\n        isOnCanvas={isOnCanvas}\n        value={timeRangeState.value}\n        onChange={timeRange.onTimeRangeChange}\n        timeZone={'browser'}\n        fiscalYearStartMonth={0}\n        onMoveBackward={() => {}}\n        onMoveForward={() => {}}\n        onZoom={() => {}}\n        onChangeTimeZone={() => {}}\n        onChangeFiscalYearStartMonth={() => {}}\n      />\n\n      <RefreshPicker onRefresh={timeRange.onRefresh} onIntervalChanged={timeRange.onIntervalChanged} />\n    </ToolbarButtonRow>\n  );\n}\n"],"names":[],"mappings":";;;;;AAaO,MAAM,wBAAwB,eAAsC,CAAA;AAE3E,CAAA;AAFa,eAAA,CACG,SAAY,GAAA,uBAAA,CAAA;AAG5B,SAAS,uBAAA,CAAwB,EAAE,KAAA,EAA+C,EAAA;AAChF,EAAA,MAAM,EAAE,UAAA,EAAY,UAAW,EAAA,GAAI,MAAM,QAAS,EAAA,CAAA;AAClD,EAAM,MAAA,SAAA,GAAY,UAAW,CAAA,YAAA,CAAa,KAAK,CAAA,CAAA;AAC/C,EAAM,MAAA,cAAA,GAAiB,UAAU,QAAS,EAAA,CAAA;AAE1C,EAAA,IAAI,UAAY,EAAA;AACd,IAAO,OAAA,IAAA,CAAA;AAAA,GACT;AAEA,EAAA,uBACG,KAAA,CAAA,aAAA,CAAA,gBAAA,EAAA;AAAA,IAAiB,SAAU,EAAA,OAAA;AAAA,GAAA,kBACzB,KAAA,CAAA,aAAA,CAAA,eAAA,EAAA;AAAA,IACC,UAAA;AAAA,IACA,OAAO,cAAe,CAAA,KAAA;AAAA,IACtB,UAAU,SAAU,CAAA,iBAAA;AAAA,IACpB,QAAU,EAAA,SAAA;AAAA,IACV,oBAAsB,EAAA,CAAA;AAAA,IACtB,gBAAgB,MAAM;AAAA,KAAC;AAAA,IACvB,eAAe,MAAM;AAAA,KAAC;AAAA,IACtB,QAAQ,MAAM;AAAA,KAAC;AAAA,IACf,kBAAkB,MAAM;AAAA,KAAC;AAAA,IACzB,8BAA8B,MAAM;AAAA,KAAC;AAAA,GACvC,mBAEC,KAAA,CAAA,aAAA,CAAA,aAAA,EAAA;AAAA,IAAc,WAAW,SAAU,CAAA,SAAA;AAAA,IAAW,mBAAmB,SAAU,CAAA,iBAAA;AAAA,GAAmB,CACjG,CAAA,CAAA;AAEJ;;;;"}

package/dist/esm/index.js

@@ -19,14 +19,14 @@ export { QueryVariable } from './variables/variants/query/QueryVariable.js';
 export { TestVariable } from './variables/variants/TestVariable.js';
 export { UrlSyncManager } from './services/UrlSyncManager.js';
 export { SceneObjectUrlSyncConfig } from './services/SceneObjectUrlSyncConfig.js';
-export { EmbeddedScene } from './components/Scene.js';
+export { EmbeddedScene } from './components/EmbeddedScene.js';
 export { VizPanel } from './components/VizPanel/VizPanel.js';
 export { NestedScene } from './components/NestedScene.js';
 export { SceneCanvasText } from './components/SceneCanvasText.js';
 export { SceneToolbarButton, SceneToolbarInput } from './components/SceneToolbarButton.js';
 export { SceneTimePicker } from './components/SceneTimePicker.js';
 export { SceneByFrameRepeater } from './components/SceneByFrameRepeater.js';
-export { SceneSubMenu } from './components/SceneSubMenu.js';
+export { SceneControlsSpacer } from './components/SceneControlsSpacer.js';
 export { SceneFlexLayout } from './components/layout/SceneFlexLayout.js';
 export { SceneGridLayout } from './components/layout/SceneGridLayout.js';
 export { SceneGridRow } from './components/layout/SceneGridRow.js';

package/dist/esm/variables/interpolation/formatRegistry.js

@@ -218,6 +218,9 @@ const formatRegistry = new Registry(() => {
           case "iso":
             return dateTime(nrValue).toISOString();
           default:
+            if ((args || []).length > 1) {
+              return dateTime(nrValue).format(args.join(":"));
+            }
             return dateTime(nrValue).format(arg);
         }
       }

package/dist/esm/variables/interpolation/formatRegistry.js.map

@@ -1 +1 @@
-{"version":3,"file":"formatRegistry.js","sources":["../../../../src/variables/interpolation/formatRegistry.ts"],"sourcesContent":["import { isArray, map, replace } from 'lodash';\n\nimport { dateTime, Registry, RegistryItem, textUtil, escapeRegex } from '@grafana/data';\nimport { VariableType } from '@grafana/schema';\n\nimport { VariableValue, VariableValueSingle } from '../types';\nimport { ALL_VARIABLE_VALUE } from '../constants';\n\nexport interface FormatRegistryItem extends RegistryItem {\n  formatter(value: VariableValue, args: string[], variable: FormatVariable): string;\n}\n\n/**\n * Slimmed down version of the SceneVariable interface so that it only contains what the formatters actually use.\n * This is useful as we have some implementations of this interface that does not need to be full scene objects.\n * For example ScopedVarsVariable and LegacyVariableWrapper.\n */\nexport interface FormatVariable {\n  state: {\n    name: string;\n    type: VariableType | string;\n  };\n\n  getValue(fieldPath?: string): VariableValue | undefined | null;\n  getValueText?(fieldPath?: string): string;\n}\n\nexport enum FormatRegistryID {\n  lucene = 'lucene',\n  raw = 'raw',\n  regex = 'regex',\n  pipe = 'pipe',\n  distributed = 'distributed',\n  csv = 'csv',\n  html = 'html',\n  json = 'json',\n  percentEncode = 'percentencode',\n  singleQuote = 'singlequote',\n  doubleQuote = 'doublequote',\n  sqlString = 'sqlstring',\n  date = 'date',\n  glob = 'glob',\n  text = 'text',\n  queryParam = 'queryparam',\n}\n\nexport const formatRegistry = new Registry<FormatRegistryItem>(() => {\n  const formats: FormatRegistryItem[] = [\n    {\n      id: FormatRegistryID.lucene,\n      name: 'Lucene',\n      description: 'Values are lucene escaped and multi-valued variables generate an OR expression',\n      formatter: (value) => {\n        if (typeof value === 'string') {\n          return luceneEscape(value);\n        }\n\n        if (Array.isArray(value)) {\n          if (value.length === 0) {\n            return '__empty__';\n          }\n          const quotedValues = map(value, (val: string) => {\n            return '\"' + luceneEscape(val) + '\"';\n          });\n          return '(' + quotedValues.join(' OR ') + ')';\n        } else {\n          return luceneEscape(`${value}`);\n        }\n      },\n    },\n    {\n      id: FormatRegistryID.raw,\n      name: 'raw',\n      description: 'Keep value as is',\n      formatter: (value) => String(value),\n    },\n    {\n      id: FormatRegistryID.regex,\n      name: 'Regex',\n      description: 'Values are regex escaped and multi-valued variables generate a (<value>|<value>) expression',\n      formatter: (value) => {\n        if (typeof value === 'string') {\n          return escapeRegex(value);\n        }\n\n        if (Array.isArray(value)) {\n          const escapedValues = value.map((item) => {\n            if (typeof item === 'string') {\n              return escapeRegex(item);\n            } else {\n              return escapeRegex(String(item));\n            }\n          });\n\n          if (escapedValues.length === 1) {\n            return escapedValues[0];\n          }\n\n          return '(' + escapedValues.join('|') + ')';\n        }\n\n        return escapeRegex(`${value}`);\n      },\n    },\n    {\n      id: FormatRegistryID.pipe,\n      name: 'Pipe',\n      description: 'Values are separated by | character',\n      formatter: (value) => {\n        if (typeof value === 'string') {\n          return value;\n        }\n\n        if (Array.isArray(value)) {\n          return value.join('|');\n        }\n\n        return `${value}`;\n      },\n    },\n    {\n      id: FormatRegistryID.distributed,\n      name: 'Distributed',\n      description: 'Multiple values are formatted like variable=value',\n      formatter: (value, args, variable) => {\n        if (typeof value === 'string') {\n          return value;\n        }\n\n        if (Array.isArray(value)) {\n          value = map(value, (val: string, index: number) => {\n            if (index !== 0) {\n              return variable.state.name + '=' + val;\n            } else {\n              return val;\n            }\n          });\n\n          return value.join(',');\n        }\n\n        return `${value}`;\n      },\n    },\n    {\n      id: FormatRegistryID.csv,\n      name: 'Csv',\n      description: 'Comma-separated values',\n      formatter: (value) => {\n        if (typeof value === 'string') {\n          return value;\n        }\n\n        if (isArray(value)) {\n          return value.join(',');\n        }\n\n        return String(value);\n      },\n    },\n    {\n      id: FormatRegistryID.html,\n      name: 'HTML',\n      description: 'HTML escaping of values',\n      formatter: (value) => {\n        if (typeof value === 'string') {\n          return textUtil.escapeHtml(value);\n        }\n\n        if (isArray(value)) {\n          return textUtil.escapeHtml(value.join(', '));\n        }\n\n        return textUtil.escapeHtml(String(value));\n      },\n    },\n    {\n      id: FormatRegistryID.json,\n      name: 'JSON',\n      description: 'JSON stringify value',\n      formatter: (value) => {\n        return JSON.stringify(value);\n      },\n    },\n    {\n      id: FormatRegistryID.percentEncode,\n      name: 'Percent encode',\n      description: 'Useful for URL escaping values',\n      formatter: (value) => {\n        // like glob, but url escaped\n        if (isArray(value)) {\n          return encodeURIComponentStrict('{' + value.join(',') + '}');\n        }\n\n        return encodeURIComponentStrict(value);\n      },\n    },\n    {\n      id: FormatRegistryID.singleQuote,\n      name: 'Single quote',\n      description: 'Single quoted values',\n      formatter: (value) => {\n        // escape single quotes with backslash\n        const regExp = new RegExp(`'`, 'g');\n\n        if (isArray(value)) {\n          return map(value, (v: string) => `'${replace(v, regExp, `\\\\'`)}'`).join(',');\n        }\n\n        let strVal = typeof value === 'string' ? value : String(value);\n        return `'${replace(strVal, regExp, `\\\\'`)}'`;\n      },\n    },\n    {\n      id: FormatRegistryID.doubleQuote,\n      name: 'Double quote',\n      description: 'Double quoted values',\n      formatter: (value) => {\n        // escape double quotes with backslash\n        const regExp = new RegExp('\"', 'g');\n        if (isArray(value)) {\n          return map(value, (v: string) => `\"${replace(v, regExp, '\\\\\"')}\"`).join(',');\n        }\n\n        let strVal = typeof value === 'string' ? value : String(value);\n        return `\"${replace(strVal, regExp, '\\\\\"')}\"`;\n      },\n    },\n    {\n      id: FormatRegistryID.sqlString,\n      name: 'SQL string',\n      description: 'SQL string quoting and commas for use in IN statements and other scenarios',\n      formatter: (value) => {\n        // escape single quotes by pairing them\n        const regExp = new RegExp(`'`, 'g');\n        if (isArray(value)) {\n          return map(value, (v: string) => `'${replace(v, regExp, \"''\")}'`).join(',');\n        }\n\n        let strVal = typeof value === 'string' ? value : String(value);\n        return `'${replace(strVal, regExp, \"''\")}'`;\n      },\n    },\n    {\n      id: FormatRegistryID.date,\n      name: 'Date',\n      description: 'Format date in different ways',\n      formatter: (value, args) => {\n        let nrValue = NaN;\n\n        if (typeof value === 'number') {\n          nrValue = value;\n        } else if (typeof value === 'string') {\n          nrValue = parseInt(value, 10);\n        }\n\n        if (isNaN(nrValue)) {\n          return 'NaN';\n        }\n\n        const arg = args[0] ?? 'iso';\n        switch (arg) {\n          case 'ms':\n            return String(value);\n          case 'seconds':\n            return `${Math.round(nrValue! / 1000)}`;\n          case 'iso':\n            return dateTime(nrValue).toISOString();\n          default:\n            return dateTime(nrValue).format(arg);\n        }\n      },\n    },\n    {\n      id: FormatRegistryID.glob,\n      name: 'Glob',\n      description: 'Format multi-valued variables using glob syntax, example {value1,value2}',\n      formatter: (value) => {\n        if (isArray(value) && value.length > 1) {\n          return '{' + value.join(',') + '}';\n        }\n        return String(value);\n      },\n    },\n    {\n      id: FormatRegistryID.text,\n      name: 'Text',\n      description: 'Format variables in their text representation. Example in multi-variable scenario A + B + C.',\n      formatter: (value, _args, variable) => {\n        if (variable.getValueText) {\n          return variable.getValueText();\n        }\n\n        return String(value);\n      },\n    },\n    {\n      id: FormatRegistryID.queryParam,\n      name: 'Query parameter',\n      description:\n        'Format variables as URL parameters. Example in multi-variable scenario A + B + C => var-foo=A&var-foo=B&var-foo=C.',\n      formatter: (value, _args, variable) => {\n        if (Array.isArray(value)) {\n          return value.map((v) => formatQueryParameter(variable.state.name, v)).join('&');\n        }\n        return formatQueryParameter(variable.state.name, value);\n      },\n    },\n  ];\n\n  return formats;\n});\n\nfunction luceneEscape(value: string) {\n  if (isNaN(+value) === false) {\n    return value;\n  }\n\n  return value.replace(/([\\!\\*\\+\\-\\=<>\\s\\&\\|\\(\\)\\[\\]\\{\\}\\^\\~\\?\\:\\\\/\"])/g, '\\\\$1');\n}\n\n/**\n * encode string according to RFC 3986; in contrast to encodeURIComponent()\n * also the sub-delims \"!\", \"'\", \"(\", \")\" and \"*\" are encoded;\n * unicode handling uses UTF-8 as in ECMA-262.\n */\nfunction encodeURIComponentStrict(str: VariableValueSingle) {\n  if (typeof str === 'object') {\n    str = String(str);\n  }\n\n  return encodeURIComponent(str).replace(/[!'()*]/g, (c) => {\n    return '%' + c.charCodeAt(0).toString(16).toUpperCase();\n  });\n}\n\nfunction formatQueryParameter(name: string, value: VariableValueSingle): string {\n  return `var-${name}=${encodeURIComponentStrict(value)}`;\n}\n\nexport function isAllValue(value: VariableValueSingle) {\n  return value === ALL_VARIABLE_VALUE || (Array.isArray(value) && value[0] === ALL_VARIABLE_VALUE);\n}\n"],"names":["FormatRegistryID"],"mappings":"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"}
+{"version":3,"file":"formatRegistry.js","sources":["../../../../src/variables/interpolation/formatRegistry.ts"],"sourcesContent":["import { isArray, map, replace } from 'lodash';\n\nimport { dateTime, Registry, RegistryItem, textUtil, escapeRegex } from '@grafana/data';\nimport { VariableType } from '@grafana/schema';\n\nimport { VariableValue, VariableValueSingle } from '../types';\nimport { ALL_VARIABLE_VALUE } from '../constants';\n\nexport interface FormatRegistryItem extends RegistryItem {\n  formatter(value: VariableValue, args: string[], variable: FormatVariable): string;\n}\n\n/**\n * Slimmed down version of the SceneVariable interface so that it only contains what the formatters actually use.\n * This is useful as we have some implementations of this interface that does not need to be full scene objects.\n * For example ScopedVarsVariable and LegacyVariableWrapper.\n */\nexport interface FormatVariable {\n  state: {\n    name: string;\n    type: VariableType | string;\n  };\n\n  getValue(fieldPath?: string): VariableValue | undefined | null;\n  getValueText?(fieldPath?: string): string;\n}\n\nexport enum FormatRegistryID {\n  lucene = 'lucene',\n  raw = 'raw',\n  regex = 'regex',\n  pipe = 'pipe',\n  distributed = 'distributed',\n  csv = 'csv',\n  html = 'html',\n  json = 'json',\n  percentEncode = 'percentencode',\n  singleQuote = 'singlequote',\n  doubleQuote = 'doublequote',\n  sqlString = 'sqlstring',\n  date = 'date',\n  glob = 'glob',\n  text = 'text',\n  queryParam = 'queryparam',\n}\n\nexport const formatRegistry = new Registry<FormatRegistryItem>(() => {\n  const formats: FormatRegistryItem[] = [\n    {\n      id: FormatRegistryID.lucene,\n      name: 'Lucene',\n      description: 'Values are lucene escaped and multi-valued variables generate an OR expression',\n      formatter: (value) => {\n        if (typeof value === 'string') {\n          return luceneEscape(value);\n        }\n\n        if (Array.isArray(value)) {\n          if (value.length === 0) {\n            return '__empty__';\n          }\n          const quotedValues = map(value, (val: string) => {\n            return '\"' + luceneEscape(val) + '\"';\n          });\n          return '(' + quotedValues.join(' OR ') + ')';\n        } else {\n          return luceneEscape(`${value}`);\n        }\n      },\n    },\n    {\n      id: FormatRegistryID.raw,\n      name: 'raw',\n      description: 'Keep value as is',\n      formatter: (value) => String(value),\n    },\n    {\n      id: FormatRegistryID.regex,\n      name: 'Regex',\n      description: 'Values are regex escaped and multi-valued variables generate a (<value>|<value>) expression',\n      formatter: (value) => {\n        if (typeof value === 'string') {\n          return escapeRegex(value);\n        }\n\n        if (Array.isArray(value)) {\n          const escapedValues = value.map((item) => {\n            if (typeof item === 'string') {\n              return escapeRegex(item);\n            } else {\n              return escapeRegex(String(item));\n            }\n          });\n\n          if (escapedValues.length === 1) {\n            return escapedValues[0];\n          }\n\n          return '(' + escapedValues.join('|') + ')';\n        }\n\n        return escapeRegex(`${value}`);\n      },\n    },\n    {\n      id: FormatRegistryID.pipe,\n      name: 'Pipe',\n      description: 'Values are separated by | character',\n      formatter: (value) => {\n        if (typeof value === 'string') {\n          return value;\n        }\n\n        if (Array.isArray(value)) {\n          return value.join('|');\n        }\n\n        return `${value}`;\n      },\n    },\n    {\n      id: FormatRegistryID.distributed,\n      name: 'Distributed',\n      description: 'Multiple values are formatted like variable=value',\n      formatter: (value, args, variable) => {\n        if (typeof value === 'string') {\n          return value;\n        }\n\n        if (Array.isArray(value)) {\n          value = map(value, (val: string, index: number) => {\n            if (index !== 0) {\n              return variable.state.name + '=' + val;\n            } else {\n              return val;\n            }\n          });\n\n          return value.join(',');\n        }\n\n        return `${value}`;\n      },\n    },\n    {\n      id: FormatRegistryID.csv,\n      name: 'Csv',\n      description: 'Comma-separated values',\n      formatter: (value) => {\n        if (typeof value === 'string') {\n          return value;\n        }\n\n        if (isArray(value)) {\n          return value.join(',');\n        }\n\n        return String(value);\n      },\n    },\n    {\n      id: FormatRegistryID.html,\n      name: 'HTML',\n      description: 'HTML escaping of values',\n      formatter: (value) => {\n        if (typeof value === 'string') {\n          return textUtil.escapeHtml(value);\n        }\n\n        if (isArray(value)) {\n          return textUtil.escapeHtml(value.join(', '));\n        }\n\n        return textUtil.escapeHtml(String(value));\n      },\n    },\n    {\n      id: FormatRegistryID.json,\n      name: 'JSON',\n      description: 'JSON stringify value',\n      formatter: (value) => {\n        return JSON.stringify(value);\n      },\n    },\n    {\n      id: FormatRegistryID.percentEncode,\n      name: 'Percent encode',\n      description: 'Useful for URL escaping values',\n      formatter: (value) => {\n        // like glob, but url escaped\n        if (isArray(value)) {\n          return encodeURIComponentStrict('{' + value.join(',') + '}');\n        }\n\n        return encodeURIComponentStrict(value);\n      },\n    },\n    {\n      id: FormatRegistryID.singleQuote,\n      name: 'Single quote',\n      description: 'Single quoted values',\n      formatter: (value) => {\n        // escape single quotes with backslash\n        const regExp = new RegExp(`'`, 'g');\n\n        if (isArray(value)) {\n          return map(value, (v: string) => `'${replace(v, regExp, `\\\\'`)}'`).join(',');\n        }\n\n        let strVal = typeof value === 'string' ? value : String(value);\n        return `'${replace(strVal, regExp, `\\\\'`)}'`;\n      },\n    },\n    {\n      id: FormatRegistryID.doubleQuote,\n      name: 'Double quote',\n      description: 'Double quoted values',\n      formatter: (value) => {\n        // escape double quotes with backslash\n        const regExp = new RegExp('\"', 'g');\n        if (isArray(value)) {\n          return map(value, (v: string) => `\"${replace(v, regExp, '\\\\\"')}\"`).join(',');\n        }\n\n        let strVal = typeof value === 'string' ? value : String(value);\n        return `\"${replace(strVal, regExp, '\\\\\"')}\"`;\n      },\n    },\n    {\n      id: FormatRegistryID.sqlString,\n      name: 'SQL string',\n      description: 'SQL string quoting and commas for use in IN statements and other scenarios',\n      formatter: (value) => {\n        // escape single quotes by pairing them\n        const regExp = new RegExp(`'`, 'g');\n        if (isArray(value)) {\n          return map(value, (v: string) => `'${replace(v, regExp, \"''\")}'`).join(',');\n        }\n\n        let strVal = typeof value === 'string' ? value : String(value);\n        return `'${replace(strVal, regExp, \"''\")}'`;\n      },\n    },\n    {\n      id: FormatRegistryID.date,\n      name: 'Date',\n      description: 'Format date in different ways',\n      formatter: (value, args) => {\n        let nrValue = NaN;\n\n        if (typeof value === 'number') {\n          nrValue = value;\n        } else if (typeof value === 'string') {\n          nrValue = parseInt(value, 10);\n        }\n\n        if (isNaN(nrValue)) {\n          return 'NaN';\n        }\n\n        const arg = args[0] ?? 'iso';\n        switch (arg) {\n          case 'ms':\n            return String(value);\n          case 'seconds':\n            return `${Math.round(nrValue! / 1000)}`;\n          case 'iso':\n            return dateTime(nrValue).toISOString();\n          default:\n            if ((args || []).length > 1) {\n              return dateTime(nrValue).format(args.join(':'));\n            }\n            return dateTime(nrValue).format(arg);\n        }\n      },\n    },\n    {\n      id: FormatRegistryID.glob,\n      name: 'Glob',\n      description: 'Format multi-valued variables using glob syntax, example {value1,value2}',\n      formatter: (value) => {\n        if (isArray(value) && value.length > 1) {\n          return '{' + value.join(',') + '}';\n        }\n        return String(value);\n      },\n    },\n    {\n      id: FormatRegistryID.text,\n      name: 'Text',\n      description: 'Format variables in their text representation. Example in multi-variable scenario A + B + C.',\n      formatter: (value, _args, variable) => {\n        if (variable.getValueText) {\n          return variable.getValueText();\n        }\n\n        return String(value);\n      },\n    },\n    {\n      id: FormatRegistryID.queryParam,\n      name: 'Query parameter',\n      description:\n        'Format variables as URL parameters. Example in multi-variable scenario A + B + C => var-foo=A&var-foo=B&var-foo=C.',\n      formatter: (value, _args, variable) => {\n        if (Array.isArray(value)) {\n          return value.map((v) => formatQueryParameter(variable.state.name, v)).join('&');\n        }\n        return formatQueryParameter(variable.state.name, value);\n      },\n    },\n  ];\n\n  return formats;\n});\n\nfunction luceneEscape(value: string) {\n  if (isNaN(+value) === false) {\n    return value;\n  }\n\n  return value.replace(/([\\!\\*\\+\\-\\=<>\\s\\&\\|\\(\\)\\[\\]\\{\\}\\^\\~\\?\\:\\\\/\"])/g, '\\\\$1');\n}\n\n/**\n * encode string according to RFC 3986; in contrast to encodeURIComponent()\n * also the sub-delims \"!\", \"'\", \"(\", \")\" and \"*\" are encoded;\n * unicode handling uses UTF-8 as in ECMA-262.\n */\nfunction encodeURIComponentStrict(str: VariableValueSingle) {\n  if (typeof str === 'object') {\n    str = String(str);\n  }\n\n  return encodeURIComponent(str).replace(/[!'()*]/g, (c) => {\n    return '%' + c.charCodeAt(0).toString(16).toUpperCase();\n  });\n}\n\nfunction formatQueryParameter(name: string, value: VariableValueSingle): string {\n  return `var-${name}=${encodeURIComponentStrict(value)}`;\n}\n\nexport function isAllValue(value: VariableValueSingle) {\n  return value === ALL_VARIABLE_VALUE || (Array.isArray(value) && value[0] === ALL_VARIABLE_VALUE);\n}\n"],"names":["FormatRegistryID"],"mappings":";;;AA2BY,IAAA,gBAAA,qBAAAA,iBAAL,KAAA;AACL,EAAAA,kBAAA,QAAS,CAAA,GAAA,QAAA,CAAA;AACT,EAAAA,kBAAA,KAAM,CAAA,GAAA,KAAA,CAAA;AACN,EAAAA,kBAAA,OAAQ,CAAA,GAAA,OAAA,CAAA;AACR,EAAAA,kBAAA,MAAO,CAAA,GAAA,MAAA,CAAA;AACP,EAAAA,kBAAA,aAAc,CAAA,GAAA,aAAA,CAAA;AACd,EAAAA,kBAAA,KAAM,CAAA,GAAA,KAAA,CAAA;AACN,EAAAA,kBAAA,MAAO,CAAA,GAAA,MAAA,CAAA;AACP,EAAAA,kBAAA,MAAO,CAAA,GAAA,MAAA,CAAA;AACP,EAAAA,kBAAA,eAAgB,CAAA,GAAA,eAAA,CAAA;AAChB,EAAAA,kBAAA,aAAc,CAAA,GAAA,aAAA,CAAA;AACd,EAAAA,kBAAA,aAAc,CAAA,GAAA,aAAA,CAAA;AACd,EAAAA,kBAAA,WAAY,CAAA,GAAA,WAAA,CAAA;AACZ,EAAAA,kBAAA,MAAO,CAAA,GAAA,MAAA,CAAA;AACP,EAAAA,kBAAA,MAAO,CAAA,GAAA,MAAA,CAAA;AACP,EAAAA,kBAAA,MAAO,CAAA,GAAA,MAAA,CAAA;AACP,EAAAA,kBAAA,YAAa,CAAA,GAAA,YAAA,CAAA;AAhBH,EAAAA,OAAAA,iBAAAA,CAAAA;AAAA,CAAA,EAAA,gBAAA,IAAA,EAAA,EAAA;AAmBC,MAAA,cAAA,GAAiB,IAAI,QAAA,CAA6B,MAAM;AACnE,EAAA,MAAM,OAAgC,GAAA;AAAA,IACpC;AAAA,MACE,EAAI,EAAA,QAAA;AAAA,MACJ,IAAM,EAAA,QAAA;AAAA,MACN,WAAa,EAAA,gFAAA;AAAA,MACb,SAAA,EAAW,CAAC,KAAU,KAAA;AACpB,QAAI,IAAA,OAAO,UAAU,QAAU,EAAA;AAC7B,UAAA,OAAO,aAAa,KAAK,CAAA,CAAA;AAAA,SAC3B;AAEA,QAAI,IAAA,KAAA,CAAM,OAAQ,CAAA,KAAK,CAAG,EAAA;AACxB,UAAI,IAAA,KAAA,CAAM,WAAW,CAAG,EAAA;AACtB,YAAO,OAAA,WAAA,CAAA;AAAA,WACT;AACA,UAAA,MAAM,YAAe,GAAA,GAAA,CAAI,KAAO,EAAA,CAAC,GAAgB,KAAA;AAC/C,YAAO,OAAA,GAAA,GAAM,YAAa,CAAA,GAAG,CAAI,GAAA,GAAA,CAAA;AAAA,WAClC,CAAA,CAAA;AACD,UAAA,OAAO,GAAM,GAAA,YAAA,CAAa,IAAK,CAAA,MAAM,CAAI,GAAA,GAAA,CAAA;AAAA,SACpC,MAAA;AACL,UAAO,OAAA,YAAA,CAAa,GAAG,KAAO,CAAA,CAAA,CAAA,CAAA;AAAA,SAChC;AAAA,OACF;AAAA,KACF;AAAA,IACA;AAAA,MACE,EAAI,EAAA,KAAA;AAAA,MACJ,IAAM,EAAA,KAAA;AAAA,MACN,WAAa,EAAA,kBAAA;AAAA,MACb,SAAW,EAAA,CAAC,KAAU,KAAA,MAAA,CAAO,KAAK,CAAA;AAAA,KACpC;AAAA,IACA;AAAA,MACE,EAAI,EAAA,OAAA;AAAA,MACJ,IAAM,EAAA,OAAA;AAAA,MACN,WAAa,EAAA,6FAAA;AAAA,MACb,SAAA,EAAW,CAAC,KAAU,KAAA;AACpB,QAAI,IAAA,OAAO,UAAU,QAAU,EAAA;AAC7B,UAAA,OAAO,YAAY,KAAK,CAAA,CAAA;AAAA,SAC1B;AAEA,QAAI,IAAA,KAAA,CAAM,OAAQ,CAAA,KAAK,CAAG,EAAA;AACxB,UAAA,MAAM,aAAgB,GAAA,KAAA,CAAM,GAAI,CAAA,CAAC,IAAS,KAAA;AACxC,YAAI,IAAA,OAAO,SAAS,QAAU,EAAA;AAC5B,cAAA,OAAO,YAAY,IAAI,CAAA,CAAA;AAAA,aAClB,MAAA;AACL,cAAO,OAAA,WAAA,CAAY,MAAO,CAAA,IAAI,CAAC,CAAA,CAAA;AAAA,aACjC;AAAA,WACD,CAAA,CAAA;AAED,UAAI,IAAA,aAAA,CAAc,WAAW,CAAG,EAAA;AAC9B,YAAA,OAAO,aAAc,CAAA,CAAA,CAAA,CAAA;AAAA,WACvB;AAEA,UAAA,OAAO,GAAM,GAAA,aAAA,CAAc,IAAK,CAAA,GAAG,CAAI,GAAA,GAAA,CAAA;AAAA,SACzC;AAEA,QAAO,OAAA,WAAA,CAAY,GAAG,KAAO,CAAA,CAAA,CAAA,CAAA;AAAA,OAC/B;AAAA,KACF;AAAA,IACA;AAAA,MACE,EAAI,EAAA,MAAA;AAAA,MACJ,IAAM,EAAA,MAAA;AAAA,MACN,WAAa,EAAA,qCAAA;AAAA,MACb,SAAA,EAAW,CAAC,KAAU,KAAA;AACpB,QAAI,IAAA,OAAO,UAAU,QAAU,EAAA;AAC7B,UAAO,OAAA,KAAA,CAAA;AAAA,SACT;AAEA,QAAI,IAAA,KAAA,CAAM,OAAQ,CAAA,KAAK,CAAG,EAAA;AACxB,UAAO,OAAA,KAAA,CAAM,KAAK,GAAG,CAAA,CAAA;AAAA,SACvB;AAEA,QAAA,OAAO,CAAG,EAAA,KAAA,CAAA,CAAA,CAAA;AAAA,OACZ;AAAA,KACF;AAAA,IACA;AAAA,MACE,EAAI,EAAA,aAAA;AAAA,MACJ,IAAM,EAAA,aAAA;AAAA,MACN,WAAa,EAAA,mDAAA;AAAA,MACb,SAAW,EAAA,CAAC,KAAO,EAAA,IAAA,EAAM,QAAa,KAAA;AACpC,QAAI,IAAA,OAAO,UAAU,QAAU,EAAA;AAC7B,UAAO,OAAA,KAAA,CAAA;AAAA,SACT;AAEA,QAAI,IAAA,KAAA,CAAM,OAAQ,CAAA,KAAK,CAAG,EAAA;AACxB,UAAA,KAAA,GAAQ,GAAI,CAAA,KAAA,EAAO,CAAC,GAAA,EAAa,KAAkB,KAAA;AACjD,YAAA,IAAI,UAAU,CAAG,EAAA;AACf,cAAO,OAAA,QAAA,CAAS,KAAM,CAAA,IAAA,GAAO,GAAM,GAAA,GAAA,CAAA;AAAA,aAC9B,MAAA;AACL,cAAO,OAAA,GAAA,CAAA;AAAA,aACT;AAAA,WACD,CAAA,CAAA;AAED,UAAO,OAAA,KAAA,CAAM,KAAK,GAAG,CAAA,CAAA;AAAA,SACvB;AAEA,QAAA,OAAO,CAAG,EAAA,KAAA,CAAA,CAAA,CAAA;AAAA,OACZ;AAAA,KACF;AAAA,IACA;AAAA,MACE,EAAI,EAAA,KAAA;AAAA,MACJ,IAAM,EAAA,KAAA;AAAA,MACN,WAAa,EAAA,wBAAA;AAAA,MACb,SAAA,EAAW,CAAC,KAAU,KAAA;AACpB,QAAI,IAAA,OAAO,UAAU,QAAU,EAAA;AAC7B,UAAO,OAAA,KAAA,CAAA;AAAA,SACT;AAEA,QAAI,IAAA,OAAA,CAAQ,KAAK,CAAG,EAAA;AAClB,UAAO,OAAA,KAAA,CAAM,KAAK,GAAG,CAAA,CAAA;AAAA,SACvB;AAEA,QAAA,OAAO,OAAO,KAAK,CAAA,CAAA;AAAA,OACrB;AAAA,KACF;AAAA,IACA;AAAA,MACE,EAAI,EAAA,MAAA;AAAA,MACJ,IAAM,EAAA,MAAA;AAAA,MACN,WAAa,EAAA,yBAAA;AAAA,MACb,SAAA,EAAW,CAAC,KAAU,KAAA;AACpB,QAAI,IAAA,OAAO,UAAU,QAAU,EAAA;AAC7B,UAAO,OAAA,QAAA,CAAS,WAAW,KAAK,CAAA,CAAA;AAAA,SAClC;AAEA,QAAI,IAAA,OAAA,CAAQ,KAAK,CAAG,EAAA;AAClB,UAAA,OAAO,QAAS,CAAA,UAAA,CAAW,KAAM,CAAA,IAAA,CAAK,IAAI,CAAC,CAAA,CAAA;AAAA,SAC7C;AAEA,QAAA,OAAO,QAAS,CAAA,UAAA,CAAW,MAAO,CAAA,KAAK,CAAC,CAAA,CAAA;AAAA,OAC1C;AAAA,KACF;AAAA,IACA;AAAA,MACE,EAAI,EAAA,MAAA;AAAA,MACJ,IAAM,EAAA,MAAA;AAAA,MACN,WAAa,EAAA,sBAAA;AAAA,MACb,SAAA,EAAW,CAAC,KAAU,KAAA;AACpB,QAAO,OAAA,IAAA,CAAK,UAAU,KAAK,CAAA,CAAA;AAAA,OAC7B;AAAA,KACF;AAAA,IACA;AAAA,MACE,EAAI,EAAA,eAAA;AAAA,MACJ,IAAM,EAAA,gBAAA;AAAA,MACN,WAAa,EAAA,gCAAA;AAAA,MACb,SAAA,EAAW,CAAC,KAAU,KAAA;AAEpB,QAAI,IAAA,OAAA,CAAQ,KAAK,CAAG,EAAA;AAClB,UAAA,OAAO,yBAAyB,GAAM,GAAA,KAAA,CAAM,IAAK,CAAA,GAAG,IAAI,GAAG,CAAA,CAAA;AAAA,SAC7D;AAEA,QAAA,OAAO,yBAAyB,KAAK,CAAA,CAAA;AAAA,OACvC;AAAA,KACF;AAAA,IACA;AAAA,MACE,EAAI,EAAA,aAAA;AAAA,MACJ,IAAM,EAAA,cAAA;AAAA,MACN,WAAa,EAAA,sBAAA;AAAA,MACb,SAAA,EAAW,CAAC,KAAU,KAAA;AAEpB,QAAA,MAAM,MAAS,GAAA,IAAI,MAAO,CAAA,CAAA,CAAA,CAAA,EAAK,GAAG,CAAA,CAAA;AAElC,QAAI,IAAA,OAAA,CAAQ,KAAK,CAAG,EAAA;AAClB,UAAA,OAAO,GAAI,CAAA,KAAA,EAAO,CAAC,CAAA,KAAc,CAAI,CAAA,EAAA,OAAA,CAAQ,CAAG,EAAA,MAAA,EAAQ,CAAK,GAAA,CAAA,CAAA,CAAA,CAAA,CAAI,CAAE,CAAA,IAAA,CAAK,GAAG,CAAA,CAAA;AAAA,SAC7E;AAEA,QAAA,IAAI,SAAS,OAAO,KAAA,KAAU,QAAW,GAAA,KAAA,GAAQ,OAAO,KAAK,CAAA,CAAA;AAC7D,QAAA,OAAO,CAAI,CAAA,EAAA,OAAA,CAAQ,MAAQ,EAAA,MAAA,EAAQ,CAAK,GAAA,CAAA,CAAA,CAAA,CAAA,CAAA,CAAA;AAAA,OAC1C;AAAA,KACF;AAAA,IACA;AAAA,MACE,EAAI,EAAA,aAAA;AAAA,MACJ,IAAM,EAAA,cAAA;AAAA,MACN,WAAa,EAAA,sBAAA;AAAA,MACb,SAAA,EAAW,CAAC,KAAU,KAAA;AAEpB,QAAA,MAAM,MAAS,GAAA,IAAI,MAAO,CAAA,GAAA,EAAK,GAAG,CAAA,CAAA;AAClC,QAAI,IAAA,OAAA,CAAQ,KAAK,CAAG,EAAA;AAClB,UAAA,OAAO,GAAI,CAAA,KAAA,EAAO,CAAC,CAAA,KAAc,CAAI,CAAA,EAAA,OAAA,CAAQ,CAAG,EAAA,MAAA,EAAQ,KAAK,CAAA,CAAA,CAAA,CAAI,CAAE,CAAA,IAAA,CAAK,GAAG,CAAA,CAAA;AAAA,SAC7E;AAEA,QAAA,IAAI,SAAS,OAAO,KAAA,KAAU,QAAW,GAAA,KAAA,GAAQ,OAAO,KAAK,CAAA,CAAA;AAC7D,QAAA,OAAO,CAAI,CAAA,EAAA,OAAA,CAAQ,MAAQ,EAAA,MAAA,EAAQ,KAAK,CAAA,CAAA,CAAA,CAAA,CAAA;AAAA,OAC1C;AAAA,KACF;AAAA,IACA;AAAA,MACE,EAAI,EAAA,WAAA;AAAA,MACJ,IAAM,EAAA,YAAA;AAAA,MACN,WAAa,EAAA,4EAAA;AAAA,MACb,SAAA,EAAW,CAAC,KAAU,KAAA;AAEpB,QAAA,MAAM,MAAS,GAAA,IAAI,MAAO,CAAA,CAAA,CAAA,CAAA,EAAK,GAAG,CAAA,CAAA;AAClC,QAAI,IAAA,OAAA,CAAQ,KAAK,CAAG,EAAA;AAClB,UAAA,OAAO,GAAI,CAAA,KAAA,EAAO,CAAC,CAAA,KAAc,CAAI,CAAA,EAAA,OAAA,CAAQ,CAAG,EAAA,MAAA,EAAQ,IAAI,CAAA,CAAA,CAAA,CAAI,CAAE,CAAA,IAAA,CAAK,GAAG,CAAA,CAAA;AAAA,SAC5E;AAEA,QAAA,IAAI,SAAS,OAAO,KAAA,KAAU,QAAW,GAAA,KAAA,GAAQ,OAAO,KAAK,CAAA,CAAA;AAC7D,QAAA,OAAO,CAAI,CAAA,EAAA,OAAA,CAAQ,MAAQ,EAAA,MAAA,EAAQ,IAAI,CAAA,CAAA,CAAA,CAAA,CAAA;AAAA,OACzC;AAAA,KACF;AAAA,IACA;AAAA,MACE,EAAI,EAAA,MAAA;AAAA,MACJ,IAAM,EAAA,MAAA;AAAA,MACN,WAAa,EAAA,+BAAA;AAAA,MACb,SAAA,EAAW,CAAC,KAAA,EAAO,IAAS,KAAA;AAvPlC,QAAA,IAAA,EAAA,CAAA;AAwPQ,QAAA,IAAI,OAAU,GAAA,GAAA,CAAA;AAEd,QAAI,IAAA,OAAO,UAAU,QAAU,EAAA;AAC7B,UAAU,OAAA,GAAA,KAAA,CAAA;AAAA,SACZ,MAAA,IAAW,OAAO,KAAA,KAAU,QAAU,EAAA;AACpC,UAAU,OAAA,GAAA,QAAA,CAAS,OAAO,EAAE,CAAA,CAAA;AAAA,SAC9B;AAEA,QAAI,IAAA,KAAA,CAAM,OAAO,CAAG,EAAA;AAClB,UAAO,OAAA,KAAA,CAAA;AAAA,SACT;AAEA,QAAM,MAAA,GAAA,GAAA,CAAM,EAAK,GAAA,IAAA,CAAA,CAAA,CAAA,KAAL,IAAW,GAAA,EAAA,GAAA,KAAA,CAAA;AACvB,QAAQ,QAAA,GAAA;AAAA,UACD,KAAA,IAAA;AACH,YAAA,OAAO,OAAO,KAAK,CAAA,CAAA;AAAA,UAChB,KAAA,SAAA;AACH,YAAA,OAAO,CAAG,EAAA,IAAA,CAAK,KAAM,CAAA,OAAA,GAAW,GAAI,CAAA,CAAA,CAAA,CAAA;AAAA,UACjC,KAAA,KAAA;AACH,YAAO,OAAA,QAAA,CAAS,OAAO,CAAA,CAAE,WAAY,EAAA,CAAA;AAAA,UAAA;AAErC,YAAA,IAAA,CAAK,IAAQ,IAAA,EAAI,EAAA,MAAA,GAAS,CAAG,EAAA;AAC3B,cAAA,OAAO,SAAS,OAAO,CAAA,CAAE,OAAO,IAAK,CAAA,IAAA,CAAK,GAAG,CAAC,CAAA,CAAA;AAAA,aAChD;AACA,YAAA,OAAO,QAAS,CAAA,OAAO,CAAE,CAAA,MAAA,CAAO,GAAG,CAAA,CAAA;AAAA,SAAA;AAAA,OAEzC;AAAA,KACF;AAAA,IACA;AAAA,MACE,EAAI,EAAA,MAAA;AAAA,MACJ,IAAM,EAAA,MAAA;AAAA,MACN,WAAa,EAAA,0EAAA;AAAA,MACb,SAAA,EAAW,CAAC,KAAU,KAAA;AACpB,QAAA,IAAI,OAAQ,CAAA,KAAK,CAAK,IAAA,KAAA,CAAM,SAAS,CAAG,EAAA;AACtC,UAAA,OAAO,GAAM,GAAA,KAAA,CAAM,IAAK,CAAA,GAAG,CAAI,GAAA,GAAA,CAAA;AAAA,SACjC;AACA,QAAA,OAAO,OAAO,KAAK,CAAA,CAAA;AAAA,OACrB;AAAA,KACF;AAAA,IACA;AAAA,MACE,EAAI,EAAA,MAAA;AAAA,MACJ,IAAM,EAAA,MAAA;AAAA,MACN,WAAa,EAAA,8FAAA;AAAA,MACb,SAAW,EAAA,CAAC,KAAO,EAAA,KAAA,EAAO,QAAa,KAAA;AACrC,QAAA,IAAI,SAAS,YAAc,EAAA;AACzB,UAAA,OAAO,SAAS,YAAa,EAAA,CAAA;AAAA,SAC/B;AAEA,QAAA,OAAO,OAAO,KAAK,CAAA,CAAA;AAAA,OACrB;AAAA,KACF;AAAA,IACA;AAAA,MACE,EAAI,EAAA,YAAA;AAAA,MACJ,IAAM,EAAA,iBAAA;AAAA,MACN,WACE,EAAA,oHAAA;AAAA,MACF,SAAW,EAAA,CAAC,KAAO,EAAA,KAAA,EAAO,QAAa,KAAA;AACrC,QAAI,IAAA,KAAA,CAAM,OAAQ,CAAA,KAAK,CAAG,EAAA;AACxB,UAAA,OAAO,KAAM,CAAA,GAAA,CAAI,CAAC,CAAA,KAAM,oBAAqB,CAAA,QAAA,CAAS,KAAM,CAAA,IAAA,EAAM,CAAC,CAAC,CAAE,CAAA,IAAA,CAAK,GAAG,CAAA,CAAA;AAAA,SAChF;AACA,QAAA,OAAO,oBAAqB,CAAA,QAAA,CAAS,KAAM,CAAA,IAAA,EAAM,KAAK,CAAA,CAAA;AAAA,OACxD;AAAA,KACF;AAAA,GACF,CAAA;AAEA,EAAO,OAAA,OAAA,CAAA;AACT,CAAC,EAAA;AAED,SAAS,aAAa,KAAe,EAAA;AACnC,EAAA,IAAI,KAAM,CAAA,CAAC,KAAK,CAAA,KAAM,KAAO,EAAA;AAC3B,IAAO,OAAA,KAAA,CAAA;AAAA,GACT;AAEA,EAAO,OAAA,KAAA,CAAM,OAAQ,CAAA,iDAAA,EAAmD,MAAM,CAAA,CAAA;AAChF,CAAA;AAOA,SAAS,yBAAyB,GAA0B,EAAA;AAC1D,EAAI,IAAA,OAAO,QAAQ,QAAU,EAAA;AAC3B,IAAA,GAAA,GAAM,OAAO,GAAG,CAAA,CAAA;AAAA,GAClB;AAEA,EAAA,OAAO,mBAAmB,GAAG,CAAA,CAAE,OAAQ,CAAA,UAAA,EAAY,CAAC,CAAM,KAAA;AACxD,IAAO,OAAA,GAAA,GAAM,EAAE,UAAW,CAAA,CAAC,EAAE,QAAS,CAAA,EAAE,EAAE,WAAY,EAAA,CAAA;AAAA,GACvD,CAAA,CAAA;AACH,CAAA;AAEA,SAAS,oBAAA,CAAqB,MAAc,KAAoC,EAAA;AAC9E,EAAO,OAAA,CAAA,IAAA,EAAO,IAAQ,CAAA,CAAA,EAAA,wBAAA,CAAyB,KAAK,CAAA,CAAA,CAAA,CAAA;AACtD;;;;"}

package/dist/esm/variables/sets/SceneVariableSet.js

@@ -35,10 +35,12 @@ class SceneVariableSet extends SceneObjectBase {
   deactivate() {
     var _a;
     super.deactivate();
-    this.variablesToUpdate.clear();
     for (const update of this.updating.values()) {
       (_a = update.subscription) == null ? void 0 : _a.unsubscribe();
     }
+    this.variablesToUpdate.clear();
+    this.updating.clear();
+    this.variablesThatHaveChanged.clear();
   }
   updateNextBatch() {
     if (this.variablesToUpdate.size === 0 && this.variablesThatHaveChanged.size > 0) {

package/dist/esm/variables/sets/SceneVariableSet.js.map

@@ -1 +1 @@
-{"version":3,"file":"SceneVariableSet.js","sources":["../../../../src/variables/sets/SceneVariableSet.ts"],"sourcesContent":["import { Unsubscribable } from 'rxjs';\n\nimport { SceneObjectBase } from '../../core/SceneObjectBase';\nimport { SceneObject } from '../../core/types';\nimport { forEachSceneObjectInState } from '../../core/utils';\nimport { SceneVariable, SceneVariables, SceneVariableSetState, SceneVariableValueChangedEvent } from '../types';\n\nexport class SceneVariableSet extends SceneObjectBase<SceneVariableSetState> implements SceneVariables {\n  /** Variables that have changed in since the activation or since the first manual value change */\n  private variablesThatHaveChanged = new Set<SceneVariable>();\n\n  /** Variables that are scheduled to be validated and updated */\n  private variablesToUpdate = new Set<SceneVariable>();\n\n  /** Variables currently updating  */\n  private updating = new Map<SceneVariable, VariableUpdateInProgress>();\n\n  public getByName(name: string): SceneVariable | undefined {\n    // TODO: Replace with index\n    return this.state.variables.find((x) => x.state.name === name);\n  }\n\n  /**\n   * Subscribes to child variable value changes\n   * And starts the variable value validation process\n   */\n  public activate(): void {\n    super.activate();\n\n    // Subscribe to changes to child variables\n    this._subs.add(this.subscribeToEvent(SceneVariableValueChangedEvent, this.onVariableValueChanged));\n    this.validateAndUpdateAll();\n  }\n\n  /**\n   * Cancel all currently running updates\n   */\n  public deactivate(): void {\n    super.deactivate();\n    this.variablesToUpdate.clear();\n\n    for (const update of this.updating.values()) {\n      update.subscription?.unsubscribe();\n    }\n  }\n\n  /**\n   * This loops through variablesToUpdate and update all that that can.\n   * If one has a dependency that is currently in variablesToUpdate it will be skipped for now.\n   */\n  private updateNextBatch() {\n    // If we have nothing more to update and variable values changed we need to update scene objects that depend on these variables\n    if (this.variablesToUpdate.size === 0 && this.variablesThatHaveChanged.size > 0) {\n      this.notifyDependentSceneObjects();\n      return;\n    }\n\n    for (const variable of this.variablesToUpdate) {\n      if (!variable.validateAndUpdate) {\n        throw new Error('Variable added to variablesToUpdate but does not have validateAndUpdate');\n      }\n\n      // Ignore it if it's already started\n      if (this.updating.has(variable)) {\n        continue;\n      }\n\n      // Wait for variables that has dependencies that also needs updates\n      if (this.hasDependendencyInUpdateQueue(variable)) {\n        continue;\n      }\n\n      const variableToUpdate: VariableUpdateInProgress = {\n        variable,\n      };\n\n      this.updating.set(variable, variableToUpdate);\n      variableToUpdate.subscription = variable.validateAndUpdate().subscribe({\n        next: () => this.validateAndUpdateCompleted(variable),\n        error: (err) => this.handleVariableError(variable, err),\n      });\n    }\n  }\n\n  /**\n   * A variable has completed it's update process. This could mean that variables that depend on it can now be updated in turn.\n   */\n  private validateAndUpdateCompleted(variable: SceneVariable) {\n    const update = this.updating.get(variable);\n    update?.subscription?.unsubscribe();\n\n    this.updating.delete(variable);\n    this.variablesToUpdate.delete(variable);\n    this.updateNextBatch();\n  }\n\n  /**\n   * TODO handle this properly (and show error in UI).\n   * Not sure if this should be handled here on in MultiValueVariable\n   */\n  private handleVariableError(variable: SceneVariable, err: Error) {\n    const update = this.updating.get(variable);\n    update?.subscription?.unsubscribe();\n\n    this.updating.delete(variable);\n    this.variablesToUpdate.delete(variable);\n    variable.setState({ loading: false, error: err });\n  }\n\n  /**\n   * Checks if the variable has any dependencies that is currently in variablesToUpdate\n   */\n  private hasDependendencyInUpdateQueue(variable: SceneVariable) {\n    if (!variable.variableDependency) {\n      return false;\n    }\n\n    for (const otherVariable of this.variablesToUpdate.values()) {\n      if (variable.variableDependency?.hasDependencyOn(otherVariable.state.name)) {\n        return true;\n      }\n    }\n\n    return false;\n  }\n\n  /**\n   * Extract dependencies from all variables and add those that needs update to the variablesToUpdate map\n   * Then it will start the update process.\n   */\n  private validateAndUpdateAll() {\n    for (const variable of this.state.variables) {\n      if (variable.validateAndUpdate) {\n        this.variablesToUpdate.add(variable);\n      }\n    }\n\n    this.updateNextBatch();\n  }\n\n  /**\n   * This will trigger an update of all variables that depend on it.\n   * */\n  private onVariableValueChanged = (event: SceneVariableValueChangedEvent) => {\n    const variableThatChanged = event.payload;\n\n    this.variablesThatHaveChanged.add(variableThatChanged);\n\n    // Ignore this change if it is currently updating\n    if (this.updating.has(variableThatChanged)) {\n      return;\n    }\n\n    // Add variables that depend on the changed variable to the update queue\n    for (const otherVariable of this.state.variables) {\n      if (otherVariable.variableDependency) {\n        if (otherVariable.variableDependency.hasDependencyOn(variableThatChanged.state.name)) {\n          this.variablesToUpdate.add(otherVariable);\n        }\n      }\n    }\n\n    this.updateNextBatch();\n  };\n\n  /**\n   * Walk scene object graph and update all objects that depend on variables that have changed\n   */\n  private notifyDependentSceneObjects() {\n    if (!this.parent) {\n      return;\n    }\n\n    this.traverseSceneAndNotify(this.parent);\n    this.variablesThatHaveChanged.clear();\n  }\n\n  /**\n   * Recursivly walk the full scene object graph and notify all objects with dependencies that include any of changed variables\n   */\n  private traverseSceneAndNotify(sceneObject: SceneObject) {\n    // No need to notify variables under this SceneVariableSet\n    if (this === sceneObject) {\n      return;\n    }\n\n    if (sceneObject.variableDependency) {\n      sceneObject.variableDependency.variableValuesChanged(this.variablesThatHaveChanged);\n    }\n\n    forEachSceneObjectInState(sceneObject.state, (child) => this.traverseSceneAndNotify(child));\n  }\n}\n\nexport interface VariableUpdateInProgress {\n  variable: SceneVariable;\n  subscription?: Unsubscribable;\n}\n"],"names":[],"mappings":"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"}
+{"version":3,"file":"SceneVariableSet.js","sources":["../../../../src/variables/sets/SceneVariableSet.ts"],"sourcesContent":["import { Unsubscribable } from 'rxjs';\n\nimport { SceneObjectBase } from '../../core/SceneObjectBase';\nimport { SceneObject } from '../../core/types';\nimport { forEachSceneObjectInState } from '../../core/utils';\nimport { SceneVariable, SceneVariables, SceneVariableSetState, SceneVariableValueChangedEvent } from '../types';\n\nexport class SceneVariableSet extends SceneObjectBase<SceneVariableSetState> implements SceneVariables {\n  /** Variables that have changed in since the activation or since the first manual value change */\n  private variablesThatHaveChanged = new Set<SceneVariable>();\n\n  /** Variables that are scheduled to be validated and updated */\n  private variablesToUpdate = new Set<SceneVariable>();\n\n  /** Variables currently updating  */\n  private updating = new Map<SceneVariable, VariableUpdateInProgress>();\n\n  public getByName(name: string): SceneVariable | undefined {\n    // TODO: Replace with index\n    return this.state.variables.find((x) => x.state.name === name);\n  }\n\n  /**\n   * Subscribes to child variable value changes\n   * And starts the variable value validation process\n   */\n  public activate(): void {\n    super.activate();\n\n    // Subscribe to changes to child variables\n    this._subs.add(this.subscribeToEvent(SceneVariableValueChangedEvent, this.onVariableValueChanged));\n    this.validateAndUpdateAll();\n  }\n\n  /**\n   * Cancel all currently running updates\n   */\n  public deactivate(): void {\n    super.deactivate();\n\n    for (const update of this.updating.values()) {\n      update.subscription?.unsubscribe();\n    }\n\n    this.variablesToUpdate.clear();\n    this.updating.clear();\n    this.variablesThatHaveChanged.clear();\n  }\n\n  /**\n   * This loops through variablesToUpdate and update all that that can.\n   * If one has a dependency that is currently in variablesToUpdate it will be skipped for now.\n   */\n  private updateNextBatch() {\n    // If we have nothing more to update and variable values changed we need to update scene objects that depend on these variables\n    if (this.variablesToUpdate.size === 0 && this.variablesThatHaveChanged.size > 0) {\n      this.notifyDependentSceneObjects();\n      return;\n    }\n\n    for (const variable of this.variablesToUpdate) {\n      if (!variable.validateAndUpdate) {\n        throw new Error('Variable added to variablesToUpdate but does not have validateAndUpdate');\n      }\n\n      // Ignore it if it's already started\n      if (this.updating.has(variable)) {\n        continue;\n      }\n\n      // Wait for variables that has dependencies that also needs updates\n      if (this.hasDependendencyInUpdateQueue(variable)) {\n        continue;\n      }\n\n      const variableToUpdate: VariableUpdateInProgress = {\n        variable,\n      };\n\n      this.updating.set(variable, variableToUpdate);\n      variableToUpdate.subscription = variable.validateAndUpdate().subscribe({\n        next: () => this.validateAndUpdateCompleted(variable),\n        error: (err) => this.handleVariableError(variable, err),\n      });\n    }\n  }\n\n  /**\n   * A variable has completed it's update process. This could mean that variables that depend on it can now be updated in turn.\n   */\n  private validateAndUpdateCompleted(variable: SceneVariable) {\n    const update = this.updating.get(variable);\n    update?.subscription?.unsubscribe();\n\n    this.updating.delete(variable);\n    this.variablesToUpdate.delete(variable);\n    this.updateNextBatch();\n  }\n\n  /**\n   * TODO handle this properly (and show error in UI).\n   * Not sure if this should be handled here on in MultiValueVariable\n   */\n  private handleVariableError(variable: SceneVariable, err: Error) {\n    const update = this.updating.get(variable);\n    update?.subscription?.unsubscribe();\n\n    this.updating.delete(variable);\n    this.variablesToUpdate.delete(variable);\n    variable.setState({ loading: false, error: err });\n  }\n\n  /**\n   * Checks if the variable has any dependencies that is currently in variablesToUpdate\n   */\n  private hasDependendencyInUpdateQueue(variable: SceneVariable) {\n    if (!variable.variableDependency) {\n      return false;\n    }\n\n    for (const otherVariable of this.variablesToUpdate.values()) {\n      if (variable.variableDependency?.hasDependencyOn(otherVariable.state.name)) {\n        return true;\n      }\n    }\n\n    return false;\n  }\n\n  /**\n   * Extract dependencies from all variables and add those that needs update to the variablesToUpdate map\n   * Then it will start the update process.\n   */\n  private validateAndUpdateAll() {\n    for (const variable of this.state.variables) {\n      if (variable.validateAndUpdate) {\n        this.variablesToUpdate.add(variable);\n      }\n    }\n\n    this.updateNextBatch();\n  }\n\n  /**\n   * This will trigger an update of all variables that depend on it.\n   * */\n  private onVariableValueChanged = (event: SceneVariableValueChangedEvent) => {\n    const variableThatChanged = event.payload;\n\n    this.variablesThatHaveChanged.add(variableThatChanged);\n\n    // Ignore this change if it is currently updating\n    if (this.updating.has(variableThatChanged)) {\n      return;\n    }\n\n    // Add variables that depend on the changed variable to the update queue\n    for (const otherVariable of this.state.variables) {\n      if (otherVariable.variableDependency) {\n        if (otherVariable.variableDependency.hasDependencyOn(variableThatChanged.state.name)) {\n          this.variablesToUpdate.add(otherVariable);\n        }\n      }\n    }\n\n    this.updateNextBatch();\n  };\n\n  /**\n   * Walk scene object graph and update all objects that depend on variables that have changed\n   */\n  private notifyDependentSceneObjects() {\n    if (!this.parent) {\n      return;\n    }\n\n    this.traverseSceneAndNotify(this.parent);\n    this.variablesThatHaveChanged.clear();\n  }\n\n  /**\n   * Recursivly walk the full scene object graph and notify all objects with dependencies that include any of changed variables\n   */\n  private traverseSceneAndNotify(sceneObject: SceneObject) {\n    // No need to notify variables under this SceneVariableSet\n    if (this === sceneObject) {\n      return;\n    }\n\n    if (sceneObject.variableDependency) {\n      sceneObject.variableDependency.variableValuesChanged(this.variablesThatHaveChanged);\n    }\n\n    forEachSceneObjectInState(sceneObject.state, (child) => this.traverseSceneAndNotify(child));\n  }\n}\n\nexport interface VariableUpdateInProgress {\n  variable: SceneVariable;\n  subscription?: Unsubscribable;\n}\n"],"names":[],"mappings":"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"}

package/dist/index.d.ts

@@ -623,14 +623,17 @@ declare class UrlSyncManager {
     private syncSceneStateFromUrl;
 }
 
-interface SceneState extends SceneObjectStatePlain {
-    title: string;
+interface EmbeddedSceneState extends SceneObjectStatePlain {
+    /**
+     * The main content of the scene (usually a SceneFlexLayout)
+     */
     body: SceneObject;
-    actions?: SceneObject[];
-    subMenu?: SceneObject;
-    isEditing?: boolean;
+    /**
+     * Top row of variable selectors, filters, time pickers and custom actions.
+     */
+    controls?: SceneObject[];
 }
-declare class EmbeddedScene extends SceneObjectBase<SceneState> {
+declare class EmbeddedScene extends SceneObjectBase<EmbeddedSceneState> {
     static Component: typeof EmbeddedSceneRenderer;
     private urlSyncManager?;
     activate(): void;
@@ -674,6 +677,10 @@ interface NestedSceneState extends SceneLayoutChildState {
     body: SceneLayout;
     actions?: SceneObject[];
 }
+/**
+ * @internal
+ * POC status, don't use this yet
+ */
 declare class NestedScene extends SceneObjectBase<NestedSceneState> {
     static Component: typeof NestedSceneRenderer;
     onToggle: () => void;
@@ -711,6 +718,7 @@ declare class SceneToolbarInput extends SceneObjectBase<SceneToolbarInputState>
 
 interface SceneTimePickerState extends SceneObjectStatePlain {
     hidePicker?: boolean;
+    isOnCanvas?: boolean;
 }
 declare class SceneTimePicker extends SceneObjectBase<SceneTimePickerState> {
     static Component: typeof SceneTimePickerRenderer;
@@ -727,12 +735,10 @@ declare class SceneByFrameRepeater extends SceneObjectBase<RepeatOptions> {
     static Component: ({ model, isEditing }: SceneComponentProps<SceneByFrameRepeater>) => JSX.Element;
 }
 
-interface SceneSubMenuState extends SceneLayoutState {
-}
-declare class SceneSubMenu extends SceneObjectBase<SceneSubMenuState> {
-    static Component: typeof SceneSubMenuRenderer;
+declare class SceneControlsSpacer extends SceneObjectBase<{}> {
+    constructor();
+    static Component: (_props: SceneComponentProps<SceneControlsSpacer>) => JSX.Element;
 }
-declare function SceneSubMenuRenderer({ model }: SceneComponentProps<SceneSubMenu>): JSX.Element;
 
 type FlexLayoutDirection = 'column' | 'row';
 interface SceneFlexLayoutState extends SceneLayoutState {
@@ -793,4 +799,4 @@ declare class SceneGridLayout extends SceneObjectBase<SceneGridLayoutState> {
 }
 declare function SceneGridLayoutRenderer({ model }: SceneComponentProps<SceneGridLayout>): JSX.Element;
 
-export { ConstantVariable, CustomFormatterFn, CustomVariable, DataSourceVariable, DeepPartial, EmbeddedScene, FormatRegistryID, FormatVariable, NestedScene, QueryRunnerState, QueryVariable, SceneByFrameRepeater, SceneCanvasText, SceneComponent, SceneComponentProps, SceneDataNode, SceneDataState, SceneDataTransformer, SceneEditor, SceneEditorState, SceneFlexLayout, SceneGridLayout, SceneGridRow, SceneLayout, SceneLayoutChild, SceneLayoutChildOptions, SceneLayoutChildState, SceneLayoutState, SceneObject, SceneObjectBase, SceneObjectRef, SceneObjectState, SceneObjectStateChangedEvent, SceneObjectStateChangedPayload, SceneObjectStatePlain, SceneObjectUrlSyncConfig, SceneObjectUrlSyncHandler, SceneObjectUrlValue, SceneObjectUrlValues, SceneObjectWithUrlSync, SceneQueryRunner, SceneState, SceneSubMenu, SceneTimePicker, SceneTimeRange, SceneTimeRangeLike, SceneTimeRangeState, SceneToolbarButton, SceneToolbarInput, SceneVariable, SceneVariableDependencyConfigLike, SceneVariableSet, SceneVariableSetState, SceneVariableState, SceneVariableValueChangedEvent, SceneVariables, TestVariable, UrlSyncManager, ValidateAndUpdateResult, VariableValue, VariableValueCustom, VariableValueOption, VariableValueSelectors, VariableValueSingle, VizPanel, VizPanelState, formatRegistry, isSceneObject, sceneGraph };
+export { ConstantVariable, CustomFormatterFn, CustomVariable, DataSourceVariable, DeepPartial, EmbeddedScene, EmbeddedSceneState, FormatRegistryID, FormatVariable, NestedScene, QueryRunnerState, QueryVariable, SceneByFrameRepeater, SceneCanvasText, SceneComponent, SceneComponentProps, SceneControlsSpacer, SceneDataNode, SceneDataState, SceneDataTransformer, SceneEditor, SceneEditorState, SceneFlexLayout, SceneGridLayout, SceneGridRow, SceneLayout, SceneLayoutChild, SceneLayoutChildOptions, SceneLayoutChildState, SceneLayoutState, SceneObject, SceneObjectBase, SceneObjectRef, SceneObjectState, SceneObjectStateChangedEvent, SceneObjectStateChangedPayload, SceneObjectStatePlain, SceneObjectUrlSyncConfig, SceneObjectUrlSyncHandler, SceneObjectUrlValue, SceneObjectUrlValues, SceneObjectWithUrlSync, SceneQueryRunner, SceneTimePicker, SceneTimeRange, SceneTimeRangeLike, SceneTimeRangeState, SceneToolbarButton, SceneToolbarInput, SceneVariable, SceneVariableDependencyConfigLike, SceneVariableSet, SceneVariableSetState, SceneVariableState, SceneVariableValueChangedEvent, SceneVariables, TestVariable, UrlSyncManager, ValidateAndUpdateResult, VariableValue, VariableValueCustom, VariableValueOption, VariableValueSelectors, VariableValueSingle, VizPanel, VizPanelState, formatRegistry, isSceneObject, sceneGraph };

package/dist/index.js

@@ -10,8 +10,8 @@ var ui = require('@grafana/ui');
 var lodash = require('lodash');
 var runtime = require('@grafana/runtime');
 var e2eSelectors = require('@grafana/e2e-selectors');
-var reactUse = require('react-use');
 var css = require('@emotion/css');
+var reactUse = require('react-use');
 var experimental = require('@grafana/experimental');
 var ReactGridLayout = require('react-grid-layout');
 var AutoSizer = require('react-virtualized-auto-sizer');
@@ -451,10 +451,12 @@ class SceneVariableSet extends SceneObjectBase {
   deactivate() {
     var _a;
     super.deactivate();
-    this.variablesToUpdate.clear();
     for (const update of this.updating.values()) {
       (_a = update.subscription) == null ? void 0 : _a.unsubscribe();
     }
+    this.variablesToUpdate.clear();
+    this.updating.clear();
+    this.variablesThatHaveChanged.clear();
   }
   updateNextBatch() {
     if (this.variablesToUpdate.size === 0 && this.variablesThatHaveChanged.size > 0) {
@@ -811,6 +813,9 @@ const formatRegistry = new data.Registry(() => {
           case "iso":
             return data.dateTime(nrValue).toISOString();
           default:
+            if ((args || []).length > 1) {
+              return data.dateTime(nrValue).format(args.join(":"));
+            }
             return data.dateTime(nrValue).format(arg);
         }
       }
@@ -2382,24 +2387,41 @@ class EmbeddedScene extends SceneObjectBase {
 }
 EmbeddedScene.Component = EmbeddedSceneRenderer;
 function EmbeddedSceneRenderer({ model }) {
-  const { body, isEditing, subMenu } = model.useState();
+  const { body, controls } = model.useState();
+  const styles = ui.useStyles2(getStyles$1);
   return /* @__PURE__ */ React__default["default"].createElement("div", {
-    style: {
+    className: styles.container
+  }, controls && /* @__PURE__ */ React__default["default"].createElement("div", {
+    className: styles.controls
+  }, controls.map((control) => /* @__PURE__ */ React__default["default"].createElement(control.Component, {
+    key: control.state.key,
+    model: control
+  }))), /* @__PURE__ */ React__default["default"].createElement("div", {
+    className: styles.body
+  }, /* @__PURE__ */ React__default["default"].createElement(body.Component, {
+    model: body
+  })));
+}
+function getStyles$1(theme) {
+  return {
+    container: css.css({
       flexGrow: 1,
       display: "flex",
       gap: "8px",
-      overflow: "auto",
       minHeight: "100%",
       flexDirection: "column"
-    }
-  }, subMenu && /* @__PURE__ */ React__default["default"].createElement(subMenu.Component, {
-    model: subMenu
-  }), /* @__PURE__ */ React__default["default"].createElement("div", {
-    style: { flexGrow: 1, display: "flex", gap: "8px", overflow: "auto" }
-  }, /* @__PURE__ */ React__default["default"].createElement(body.Component, {
-    model: body,
-    isEditing
-  })));
+    }),
+    body: css.css({
+      flexGrow: 1,
+      display: "flex",
+      gap: "8px"
+    }),
+    controls: css.css({
+      display: "flex",
+      gap: theme.spacing(1),
+      alignItems: "center"
+    })
+  };
 }
 
 function SceneDragHandle({ layoutKey, className }) {
@@ -2745,7 +2767,7 @@ class SceneTimePicker extends SceneObjectBase {
 }
 SceneTimePicker.Component = SceneTimePickerRenderer;
 function SceneTimePickerRenderer({ model }) {
-  const { hidePicker } = model.useState();
+  const { hidePicker, isOnCanvas } = model.useState();
   const timeRange = sceneGraph.getTimeRange(model);
   const timeRangeState = timeRange.useState();
   if (hidePicker) {
@@ -2754,6 +2776,7 @@ function SceneTimePickerRenderer({ model }) {
   return /* @__PURE__ */ React__default["default"].createElement(ui.ToolbarButtonRow, {
     alignment: "right"
   }, /* @__PURE__ */ React__default["default"].createElement(ui.TimeRangePicker, {
+    isOnCanvas,
     value: timeRangeState.value,
     onChange: timeRange.onTimeRangeChange,
     timeZone: "browser",
@@ -2805,18 +2828,16 @@ SceneByFrameRepeater.Component = ({ model, isEditing }) => {
   });
 };
 
-class SceneSubMenu extends SceneObjectBase {
+class SceneControlsSpacer extends SceneObjectBase {
+  constructor() {
+    super({});
+  }
 }
-SceneSubMenu.Component = SceneSubMenuRenderer;
-function SceneSubMenuRenderer({ model }) {
-  const { children } = model.useState();
+SceneControlsSpacer.Component = (_props) => {
   return /* @__PURE__ */ React__default["default"].createElement("div", {
-    style: { display: "flex", gap: "16px" }
-  }, children.map((child) => /* @__PURE__ */ React__default["default"].createElement(child.Component, {
-    key: child.state.key,
-    model: child
-  })));
-}
+    style: { flexGrow: 1 }
+  });
+};
 
 class SceneFlexLayout extends SceneObjectBase {
   toggleDirection() {
@@ -3305,6 +3326,7 @@ exports.NestedScene = NestedScene;
 exports.QueryVariable = QueryVariable;
 exports.SceneByFrameRepeater = SceneByFrameRepeater;
 exports.SceneCanvasText = SceneCanvasText;
+exports.SceneControlsSpacer = SceneControlsSpacer;
 exports.SceneDataNode = SceneDataNode;
 exports.SceneDataTransformer = SceneDataTransformer;
 exports.SceneFlexLayout = SceneFlexLayout;
@@ -3314,7 +3336,6 @@ exports.SceneObjectBase = SceneObjectBase;
 exports.SceneObjectStateChangedEvent = SceneObjectStateChangedEvent;
 exports.SceneObjectUrlSyncConfig = SceneObjectUrlSyncConfig;
 exports.SceneQueryRunner = SceneQueryRunner;
-exports.SceneSubMenu = SceneSubMenu;
 exports.SceneTimePicker = SceneTimePicker;
 exports.SceneTimeRange = SceneTimeRange;
 exports.SceneToolbarButton = SceneToolbarButton;