@grafana/scenes 1.19.1 → 1.20.0

package/CHANGELOG.md

@@ -1,3 +1,34 @@
+# v1.20.0 (Thu Oct 26 2023)
+
+### Release Notes
+
+#### DataSourceVariable: Value should be uid, and other fixes ([#400](https://github.com/grafana/scenes/pull/400))
+
+DataSourceVariable value is now the uid of the data source not the name. Please test and verify that your data source variables works like before.
+
+---
+
+#### 🚀 Enhancement
+
+- Variables: Fixes SQL formatting and escaping double quotes [#433](https://github.com/grafana/scenes/pull/433) ([@piggito](https://github.com/piggito) [@torkelo](https://github.com/torkelo))
+
+#### 🐛 Bug Fix
+
+- SceneGraph: Add utility function getAncestor [#428](https://github.com/grafana/scenes/pull/428) ([@torkelo](https://github.com/torkelo))
+- VizPanel: Make VizPanel usable without relative position parent [#430](https://github.com/grafana/scenes/pull/430) ([@torkelo](https://github.com/torkelo))
+- SceneCSSGridLayout: Make rowGap and columnGap use grid units [#431](https://github.com/grafana/scenes/pull/431) ([@torkelo](https://github.com/torkelo))
+- Export VizPanelBuilder [#429](https://github.com/grafana/scenes/pull/429) ([@torkelo](https://github.com/torkelo))
+- DataSourceVariable: Value should be uid, and other fixes [#400](https://github.com/grafana/scenes/pull/400) ([@torkelo](https://github.com/torkelo))
+- [cr] creates SceneCSSGridLayout to use CSS Grid with SceneFlexItems [#392](https://github.com/grafana/scenes/pull/392) ([@jewbetcha](https://github.com/jewbetcha) [@torkelo](https://github.com/torkelo))
+
+#### Authors: 3
+
+- Coleman Rollins ([@jewbetcha](https://github.com/jewbetcha))
+- Juan Luis Peña Wagner ([@piggito](https://github.com/piggito))
+- Torkel Ödegaard ([@torkelo](https://github.com/torkelo))
+
+---
+
 # v1.19.1 (Fri Oct 20 2023)
 
 #### 🐛 Bug Fix

package/dist/esm/components/EmbeddedScene.js

@@ -37,7 +37,7 @@ function EmbeddedSceneRenderer({ model }) {
     model: body
   })));
 }
-function getStyles(theme) {
+const getStyles = (theme) => {
   return {
     container: css({
       flexGrow: 1,
@@ -49,7 +49,7 @@ function getStyles(theme) {
     body: css({
       flexGrow: 1,
       display: "flex",
-      gap: "8px"
+      gap: theme.spacing(1)
     }),
     controls: css({
       display: "flex",
@@ -58,7 +58,7 @@ function getStyles(theme) {
       flexWrap: "wrap"
     })
   };
-}
+};
 
 export { EmbeddedScene };
 //# sourceMappingURL=EmbeddedScene.js.map

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

@@ -1 +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, SceneObjectState, SceneObject } from '../core/types';\nimport { getUrlSyncManager } from '../services/UrlSyncManager';\nimport { setWindowGrafanaSceneContext } from '../utils/compatibility/setWindowGrafanaSceneContext';\n\nexport interface EmbeddedSceneState extends SceneObjectState {\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  public constructor(state: EmbeddedSceneState) {\n    super(state);\n\n    this.addActivationHandler(() => {\n      // This function is setting window.__grafanaSceneContext which is used from Grafana core in the old services TimeSrv and TemplateSrv.\n      // This works as a backward compatability method to support accessing scene time range and variables from those old services.\n      const unsetGlobalScene = setWindowGrafanaSceneContext(this);\n      return () => {\n        unsetGlobalScene();\n        getUrlSyncManager().cleanUp(this);\n      };\n    });\n  }\n\n  /**\n   * initUrlSync should be called before the scene is rendered to ensure that objects are in sync\n   * before they get activated. This saves some unnecessary re-renders and makes sure variables\n   * queries are issued as needed. If your using SceneAppPage you will not need to call this as\n   * url sync is handled on the SceneAppPage level not this level.\n   */\n  public initUrlSync() {\n    getUrlSyncManager().initSync(this);\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: theme.spacing(2),\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      flexWrap: 'wrap',\n    }),\n  };\n}\n"],"names":[],"mappings":";;;;;;;AAqBO,MAAM,sBAAsB,eAAoC,CAAA;AAAA,EAG9D,YAAY,KAA2B,EAAA;AAC5C,IAAA,KAAA,CAAM,KAAK,CAAA,CAAA;AAEX,IAAA,IAAA,CAAK,qBAAqB,MAAM;AAG9B,MAAM,MAAA,gBAAA,GAAmB,6BAA6B,IAAI,CAAA,CAAA;AAC1D,MAAA,OAAO,MAAM;AACX,QAAiB,gBAAA,EAAA,CAAA;AACjB,QAAkB,iBAAA,EAAA,CAAE,QAAQ,IAAI,CAAA,CAAA;AAAA,OAClC,CAAA;AAAA,KACD,CAAA,CAAA;AAAA,GACH;AAAA,EAQO,WAAc,GAAA;AACnB,IAAkB,iBAAA,EAAA,CAAE,SAAS,IAAI,CAAA,CAAA;AAAA,GACnC;AACF,CAAA;AA1Ba,aAAA,CACG,SAAY,GAAA,qBAAA,CAAA;AA2B5B,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,GAAA,EAAK,KAAM,CAAA,OAAA,CAAQ,CAAC,CAAA;AAAA,MACpB,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,MACZ,QAAU,EAAA,MAAA;AAAA,KACX,CAAA;AAAA,GACH,CAAA;AACF;;;;"}
+{"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, SceneObjectState, SceneObject } from '../core/types';\nimport { getUrlSyncManager } from '../services/UrlSyncManager';\nimport { setWindowGrafanaSceneContext } from '../utils/compatibility/setWindowGrafanaSceneContext';\n\nexport interface EmbeddedSceneState extends SceneObjectState {\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  public constructor(state: EmbeddedSceneState) {\n    super(state);\n\n    this.addActivationHandler(() => {\n      // This function is setting window.__grafanaSceneContext which is used from Grafana core in the old services TimeSrv and TemplateSrv.\n      // This works as a backward compatability method to support accessing scene time range and variables from those old services.\n      const unsetGlobalScene = setWindowGrafanaSceneContext(this);\n      return () => {\n        unsetGlobalScene();\n        getUrlSyncManager().cleanUp(this);\n      };\n    });\n  }\n\n  /**\n   * initUrlSync should be called before the scene is rendered to ensure that objects are in sync\n   * before they get activated. This saves some unnecessary re-renders and makes sure variables\n   * queries are issued as needed. If your using SceneAppPage you will not need to call this as\n   * url sync is handled on the SceneAppPage level not this level.\n   */\n  public initUrlSync() {\n    getUrlSyncManager().initSync(this);\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\nconst getStyles = (theme: GrafanaTheme2) => {\n  return {\n    container: css({\n      flexGrow: 1,\n      display: 'flex',\n      gap: theme.spacing(2),\n      minHeight: '100%',\n      flexDirection: 'column',\n    }),\n    body: css({\n      flexGrow: 1,\n      display: 'flex',\n      gap: theme.spacing(1),\n    }),\n    controls: css({\n      display: 'flex',\n      gap: theme.spacing(1),\n      alignItems: 'center',\n      flexWrap: 'wrap',\n    }),\n  };\n};\n"],"names":[],"mappings":";;;;;;;AAqBO,MAAM,sBAAsB,eAAoC,CAAA;AAAA,EAG9D,YAAY,KAA2B,EAAA;AAC5C,IAAA,KAAA,CAAM,KAAK,CAAA,CAAA;AAEX,IAAA,IAAA,CAAK,qBAAqB,MAAM;AAG9B,MAAM,MAAA,gBAAA,GAAmB,6BAA6B,IAAI,CAAA,CAAA;AAC1D,MAAA,OAAO,MAAM;AACX,QAAiB,gBAAA,EAAA,CAAA;AACjB,QAAkB,iBAAA,EAAA,CAAE,QAAQ,IAAI,CAAA,CAAA;AAAA,OAClC,CAAA;AAAA,KACD,CAAA,CAAA;AAAA,GACH;AAAA,EAQO,WAAc,GAAA;AACnB,IAAkB,iBAAA,EAAA,CAAE,SAAS,IAAI,CAAA,CAAA;AAAA,GACnC;AACF,CAAA;AA1Ba,aAAA,CACG,SAAY,GAAA,qBAAA,CAAA;AA2B5B,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,MAAM,SAAA,GAAY,CAAC,KAAyB,KAAA;AAC1C,EAAO,OAAA;AAAA,IACL,WAAW,GAAI,CAAA;AAAA,MACb,QAAU,EAAA,CAAA;AAAA,MACV,OAAS,EAAA,MAAA;AAAA,MACT,GAAA,EAAK,KAAM,CAAA,OAAA,CAAQ,CAAC,CAAA;AAAA,MACpB,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,GAAA,EAAK,KAAM,CAAA,OAAA,CAAQ,CAAC,CAAA;AAAA,KACrB,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,MACZ,QAAU,EAAA,MAAA;AAAA,KACX,CAAA;AAAA,GACH,CAAA;AACF,CAAA;;;;"}

package/dist/esm/components/SceneToolbarButton.js

@@ -1,6 +1,7 @@
 import React from 'react';
 import { ToolbarButton, Input } from '@grafana/ui';
 import { SceneObjectBase } from '../core/SceneObjectBase.js';
+import { ControlsLabel } from '../utils/ControlsLabel.js';
 
 class SceneToolbarButton extends SceneObjectBase {
 }
@@ -15,13 +16,17 @@ class SceneToolbarInput extends SceneObjectBase {
 }
 SceneToolbarInput.Component = ({ model }) => {
   const state = model.useState();
-  return /* @__PURE__ */ React.createElement(Input, {
+  return /* @__PURE__ */ React.createElement("div", {
+    style: { display: "flex" }
+  }, state.label && /* @__PURE__ */ React.createElement(ControlsLabel, {
+    label: state.label
+  }), /* @__PURE__ */ React.createElement(Input, {
     defaultValue: state.value,
     width: 8,
     onBlur: (evt) => {
       model.state.onChange(parseInt(evt.currentTarget.value, 10));
     }
-  });
+  }));
 };
 
 export { SceneToolbarButton, SceneToolbarInput };

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

@@ -1 +1 @@
-{"version":3,"file":"SceneToolbarButton.js","sources":["../../../src/components/SceneToolbarButton.tsx"],"sourcesContent":["import React from 'react';\n\nimport { IconName, Input, ToolbarButton } from '@grafana/ui';\n\nimport { SceneObjectBase } from '../core/SceneObjectBase';\nimport { SceneComponentProps, SceneObjectState } from '../core/types';\n\nexport interface ToolbarButtonState extends SceneObjectState {\n  icon: IconName;\n  onClick: () => void;\n}\n\nexport class SceneToolbarButton extends SceneObjectBase<ToolbarButtonState> {\n  public static Component = ({ model }: SceneComponentProps<SceneToolbarButton>) => {\n    const state = model.useState();\n\n    return <ToolbarButton onClick={state.onClick} icon={state.icon} />;\n  };\n}\n\nexport interface SceneToolbarInputState extends SceneObjectState {\n  value?: string;\n  onChange: (value: number) => void;\n}\n\nexport class SceneToolbarInput extends SceneObjectBase<SceneToolbarInputState> {\n  public static Component = ({ model }: SceneComponentProps<SceneToolbarInput>) => {\n    const state = model.useState();\n\n    return (\n      <Input\n        defaultValue={state.value}\n        width={8}\n        onBlur={(evt) => {\n          model.state.onChange(parseInt(evt.currentTarget.value, 10));\n        }}\n      />\n    );\n  };\n}\n"],"names":[],"mappings":";;;;AAYO,MAAM,2BAA2B,eAAoC,CAAA;AAM5E,CAAA;AANa,kBAAA,CACG,SAAY,GAAA,CAAC,EAAE,KAAA,EAAqD,KAAA;AAChF,EAAM,MAAA,KAAA,GAAQ,MAAM,QAAS,EAAA,CAAA;AAE7B,EAAA,uBAAQ,KAAA,CAAA,aAAA,CAAA,aAAA,EAAA;AAAA,IAAc,SAAS,KAAM,CAAA,OAAA;AAAA,IAAS,MAAM,KAAM,CAAA,IAAA;AAAA,GAAM,CAAA,CAAA;AAClE,CAAA,CAAA;AAQK,MAAM,0BAA0B,eAAwC,CAAA;AAc/E,CAAA;AAda,iBAAA,CACG,SAAY,GAAA,CAAC,EAAE,KAAA,EAAoD,KAAA;AAC/E,EAAM,MAAA,KAAA,GAAQ,MAAM,QAAS,EAAA,CAAA;AAE7B,EAAA,uBACG,KAAA,CAAA,aAAA,CAAA,KAAA,EAAA;AAAA,IACC,cAAc,KAAM,CAAA,KAAA;AAAA,IACpB,KAAO,EAAA,CAAA;AAAA,IACP,MAAA,EAAQ,CAAC,GAAQ,KAAA;AACf,MAAA,KAAA,CAAM,MAAM,QAAS,CAAA,QAAA,CAAS,IAAI,aAAc,CAAA,KAAA,EAAO,EAAE,CAAC,CAAA,CAAA;AAAA,KAC5D;AAAA,GACF,CAAA,CAAA;AAEJ,CAAA;;;;"}
+{"version":3,"file":"SceneToolbarButton.js","sources":["../../../src/components/SceneToolbarButton.tsx"],"sourcesContent":["import React from 'react';\n\nimport { IconName, Input, ToolbarButton } from '@grafana/ui';\n\nimport { SceneObjectBase } from '../core/SceneObjectBase';\nimport { SceneComponentProps, SceneObjectState } from '../core/types';\nimport { ControlsLabel } from '../utils/ControlsLabel';\n\nexport interface ToolbarButtonState extends SceneObjectState {\n  icon: IconName;\n  onClick: () => void;\n}\n\nexport class SceneToolbarButton extends SceneObjectBase<ToolbarButtonState> {\n  public static Component = ({ model }: SceneComponentProps<SceneToolbarButton>) => {\n    const state = model.useState();\n\n    return <ToolbarButton onClick={state.onClick} icon={state.icon} />;\n  };\n}\n\nexport interface SceneToolbarInputState extends SceneObjectState {\n  value?: string;\n  label?: string;\n  onChange: (value: number) => void;\n}\n\nexport class SceneToolbarInput extends SceneObjectBase<SceneToolbarInputState> {\n  public static Component = ({ model }: SceneComponentProps<SceneToolbarInput>) => {\n    const state = model.useState();\n\n    return (\n      <div style={{ display: 'flex' }}>\n        {state.label && <ControlsLabel label={state.label} />}\n        <Input\n          defaultValue={state.value}\n          width={8}\n          onBlur={(evt) => {\n            model.state.onChange(parseInt(evt.currentTarget.value, 10));\n          }}\n        />\n      </div>\n    );\n  };\n}\n"],"names":[],"mappings":";;;;;AAaO,MAAM,2BAA2B,eAAoC,CAAA;AAM5E,CAAA;AANa,kBAAA,CACG,SAAY,GAAA,CAAC,EAAE,KAAA,EAAqD,KAAA;AAChF,EAAM,MAAA,KAAA,GAAQ,MAAM,QAAS,EAAA,CAAA;AAE7B,EAAA,uBAAQ,KAAA,CAAA,aAAA,CAAA,aAAA,EAAA;AAAA,IAAc,SAAS,KAAM,CAAA,OAAA;AAAA,IAAS,MAAM,KAAM,CAAA,IAAA;AAAA,GAAM,CAAA,CAAA;AAClE,CAAA,CAAA;AASK,MAAM,0BAA0B,eAAwC,CAAA;AAiB/E,CAAA;AAjBa,iBAAA,CACG,SAAY,GAAA,CAAC,EAAE,KAAA,EAAoD,KAAA;AAC/E,EAAM,MAAA,KAAA,GAAQ,MAAM,QAAS,EAAA,CAAA;AAE7B,EAAA,uBACG,KAAA,CAAA,aAAA,CAAA,KAAA,EAAA;AAAA,IAAI,KAAA,EAAO,EAAE,OAAA,EAAS,MAAO,EAAA;AAAA,GAC3B,EAAA,KAAA,CAAM,yBAAU,KAAA,CAAA,aAAA,CAAA,aAAA,EAAA;AAAA,IAAc,OAAO,KAAM,CAAA,KAAA;AAAA,GAAO,mBAClD,KAAA,CAAA,aAAA,CAAA,KAAA,EAAA;AAAA,IACC,cAAc,KAAM,CAAA,KAAA;AAAA,IACpB,KAAO,EAAA,CAAA;AAAA,IACP,MAAA,EAAQ,CAAC,GAAQ,KAAA;AACf,MAAA,KAAA,CAAM,MAAM,QAAS,CAAA,QAAA,CAAS,IAAI,aAAc,CAAA,KAAA,EAAO,EAAE,CAAC,CAAA,CAAA;AAAA,KAC5D;AAAA,GACF,CACF,CAAA,CAAA;AAEJ,CAAA;;;;"}

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

@@ -71,8 +71,10 @@ function VizPanelRenderer({ model }) {
   const data = dataWithFieldConfig;
   const isReadyToRender = dataObject.isDataReadyToDisplay ? dataObject.isDataReadyToDisplay() : true;
   return /* @__PURE__ */ React.createElement("div", {
+    className: relativeWrapper
+  }, /* @__PURE__ */ React.createElement("div", {
     ref,
-    className: wrapperDivStyles,
+    className: absoluteWrapper,
     "data-viz-panel-key": model.state.key
   }, width > 0 && height > 0 && /* @__PURE__ */ React.createElement(PanelChrome, {
     title: titleInterpolated,
@@ -113,7 +115,7 @@ function VizPanelRenderer({ model }) {
     onFieldConfigChange: model.onFieldConfigChange,
     onChangeTimeRange: model.onTimeRangeChange,
     eventBus: getAppEvents()
-  })))))));
+  }))))))));
 }
 function getDragClasses(panel) {
   var _a, _b;
@@ -144,7 +146,12 @@ function getChromeStatusMessage(data, pluginLoadingError) {
   }
   return message;
 }
-const wrapperDivStyles = css({
+const relativeWrapper = css({
+  position: "relative",
+  width: "100%",
+  height: "100%"
+});
+const absoluteWrapper = css({
   position: "absolute",
   width: "100%",
   height: "100%"

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

@@ -1 +1 @@
-{"version":3,"file":"VizPanelRenderer.js","sources":["../../../../src/components/VizPanel/VizPanelRenderer.tsx"],"sourcesContent":["import React, { RefCallback } from 'react';\nimport { useMeasure } from 'react-use';\n\nimport { PanelData, PluginContextProvider } from '@grafana/data';\nimport { getAppEvents } from '@grafana/runtime';\nimport { PanelChrome, ErrorBoundaryAlert, PanelContextProvider } from '@grafana/ui';\n\nimport { sceneGraph } from '../../core/sceneGraph';\nimport { isSceneObject, SceneComponentProps, SceneLayout, SceneObject } from '../../core/types';\n\nimport { VizPanel } from './VizPanel';\nimport { css } from '@emotion/css';\n\nexport function VizPanelRenderer({ model }: SceneComponentProps<VizPanel>) {\n  const {\n    title,\n    description,\n    options,\n    fieldConfig,\n    _pluginLoadError,\n    $data,\n    displayMode,\n    hoverHeader,\n    menu,\n    headerActions,\n  } = model.useState();\n  const [ref, { width, height }] = useMeasure();\n  const plugin = model.getPlugin();\n\n  const { dragClass, dragClassCancel } = getDragClasses(model);\n  const dataObject = sceneGraph.getData(model);\n  const rawData = dataObject.useState();\n  const dataWithFieldConfig = model.applyFieldConfig(rawData.data!);\n\n  // Interpolate title\n  const titleInterpolated = model.interpolate(title, undefined, 'text');\n\n  // Not sure we need to subscribe to this state\n  const timeZone = sceneGraph.getTimeRange(model).getTimeZone();\n\n  if (!plugin) {\n    return <div>Loading plugin panel...</div>;\n  }\n\n  if (!plugin.panel) {\n    return <div>Panel plugin has no panel component</div>;\n  }\n\n  const PanelComponent = plugin.panel;\n\n  // If we have a query runner on our level inform it of the container width (used to set auto max data points)\n  if ($data && $data.setContainerWidth) {\n    $data.setContainerWidth(width);\n  }\n\n  const titleItems: React.ReactNode[] = [];\n\n  // If we have local time range show that in panel header\n  if (model.state.$timeRange) {\n    titleItems.push(<model.state.$timeRange.Component model={model.state.$timeRange} key={model.state.key} />);\n  }\n\n  let panelMenu;\n  if (menu) {\n    panelMenu = <menu.Component model={menu} />;\n  }\n\n  let actionsElement: React.ReactNode | undefined;\n\n  if (headerActions) {\n    if (Array.isArray(headerActions)) {\n      actionsElement = (\n        <>\n          {headerActions.map((action) => {\n            return <action.Component model={action} key={`${action.state.key}`} />;\n          })}\n        </>\n      );\n    } else if (isSceneObject(headerActions)) {\n      actionsElement = <headerActions.Component model={headerActions} />;\n    } else {\n      actionsElement = headerActions;\n    }\n  }\n\n  // Data is always returned. For non-data panels, empty PanelData is returned.\n  const data = dataWithFieldConfig!;\n  const isReadyToRender = dataObject.isDataReadyToDisplay ? dataObject.isDataReadyToDisplay() : true;\n\n  return (\n    <div ref={ref as RefCallback<HTMLDivElement>} className={wrapperDivStyles} data-viz-panel-key={model.state.key}>\n      {width > 0 && height > 0 && (\n        <PanelChrome\n          title={titleInterpolated}\n          description={description ? () => model.interpolate(description) : ''}\n          loadingState={data.state}\n          statusMessage={getChromeStatusMessage(data, _pluginLoadError)}\n          width={width}\n          height={height}\n          displayMode={displayMode}\n          hoverHeader={hoverHeader}\n          titleItems={titleItems}\n          dragClass={dragClass}\n          actions={actionsElement}\n          dragClassCancel={dragClassCancel}\n          padding={plugin.noPadding ? 'none' : 'md'}\n          menu={panelMenu}\n          onCancelQuery={model.onCancelQuery}\n        >\n          {(innerWidth, innerHeight) => (\n            <>\n              <ErrorBoundaryAlert dependencies={[plugin, data]}>\n                <PluginContextProvider meta={plugin.meta}>\n                  <PanelContextProvider value={model.getPanelContext()}>\n                    {isReadyToRender && (\n                      <PanelComponent\n                        id={1}\n                        data={data}\n                        title={title}\n                        timeRange={data.timeRange}\n                        timeZone={timeZone}\n                        options={options}\n                        fieldConfig={fieldConfig}\n                        transparent={false}\n                        width={innerWidth}\n                        height={innerHeight}\n                        renderCounter={0}\n                        replaceVariables={model.interpolate}\n                        onOptionsChange={model.onOptionsChange}\n                        onFieldConfigChange={model.onFieldConfigChange}\n                        onChangeTimeRange={model.onTimeRangeChange}\n                        eventBus={getAppEvents()}\n                      />\n                    )}\n                  </PanelContextProvider>\n                </PluginContextProvider>\n              </ErrorBoundaryAlert>\n            </>\n          )}\n        </PanelChrome>\n      )}\n    </div>\n  );\n}\n\nfunction getDragClasses(panel: VizPanel) {\n  const parentLayout = sceneGraph.getLayout(panel);\n  const isDraggable = parentLayout?.isDraggable();\n\n  if (!parentLayout || !isDraggable || itemDraggingDisabled(panel, parentLayout)) {\n    return { dragClass: '', dragClassCancel: '' };\n  }\n\n  return { dragClass: parentLayout.getDragClass?.(), dragClassCancel: parentLayout?.getDragClassCancel?.() };\n}\n\n/**\n * Walks up the parent chain until it hits the layout object, trying to find the closest SceneGridItemLike ancestor.\n * It is not always the direct parent, because the VizPanel can be wrapped in other objects.\n */\nfunction itemDraggingDisabled(item: SceneObject, layout: SceneLayout) {\n  let ancestor = item.parent;\n\n  while (ancestor && ancestor !== layout) {\n    if ('isDraggable' in ancestor.state && ancestor.state.isDraggable === false) {\n      return true;\n    }\n\n    ancestor = ancestor.parent;\n  }\n\n  return false;\n}\n\nfunction getChromeStatusMessage(data: PanelData, pluginLoadingError: string | undefined) {\n  if (pluginLoadingError) {\n    return pluginLoadingError;\n  }\n\n  let message = data.error ? data.error.message : undefined;\n\n  // Handling multiple errors with a single string until we integrate VizPanel with inspector\n  if (data.errors) {\n    message = data.errors.map((e) => e.message).join(', ');\n  }\n  return message;\n}\n\nconst wrapperDivStyles = css({\n  position: 'absolute',\n  width: '100%',\n  height: '100%',\n});\n"],"names":[],"mappings":"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"}
+{"version":3,"file":"VizPanelRenderer.js","sources":["../../../../src/components/VizPanel/VizPanelRenderer.tsx"],"sourcesContent":["import React, { RefCallback } from 'react';\nimport { useMeasure } from 'react-use';\n\nimport { PanelData, PluginContextProvider } from '@grafana/data';\nimport { getAppEvents } from '@grafana/runtime';\nimport { PanelChrome, ErrorBoundaryAlert, PanelContextProvider } from '@grafana/ui';\n\nimport { sceneGraph } from '../../core/sceneGraph';\nimport { isSceneObject, SceneComponentProps, SceneLayout, SceneObject } from '../../core/types';\n\nimport { VizPanel } from './VizPanel';\nimport { css } from '@emotion/css';\n\nexport function VizPanelRenderer({ model }: SceneComponentProps<VizPanel>) {\n  const {\n    title,\n    description,\n    options,\n    fieldConfig,\n    _pluginLoadError,\n    $data,\n    displayMode,\n    hoverHeader,\n    menu,\n    headerActions,\n  } = model.useState();\n  const [ref, { width, height }] = useMeasure();\n  const plugin = model.getPlugin();\n\n  const { dragClass, dragClassCancel } = getDragClasses(model);\n  const dataObject = sceneGraph.getData(model);\n  const rawData = dataObject.useState();\n  const dataWithFieldConfig = model.applyFieldConfig(rawData.data!);\n\n  // Interpolate title\n  const titleInterpolated = model.interpolate(title, undefined, 'text');\n\n  // Not sure we need to subscribe to this state\n  const timeZone = sceneGraph.getTimeRange(model).getTimeZone();\n\n  if (!plugin) {\n    return <div>Loading plugin panel...</div>;\n  }\n\n  if (!plugin.panel) {\n    return <div>Panel plugin has no panel component</div>;\n  }\n\n  const PanelComponent = plugin.panel;\n\n  // If we have a query runner on our level inform it of the container width (used to set auto max data points)\n  if ($data && $data.setContainerWidth) {\n    $data.setContainerWidth(width);\n  }\n\n  const titleItems: React.ReactNode[] = [];\n\n  // If we have local time range show that in panel header\n  if (model.state.$timeRange) {\n    titleItems.push(<model.state.$timeRange.Component model={model.state.$timeRange} key={model.state.key} />);\n  }\n\n  let panelMenu;\n  if (menu) {\n    panelMenu = <menu.Component model={menu} />;\n  }\n\n  let actionsElement: React.ReactNode | undefined;\n\n  if (headerActions) {\n    if (Array.isArray(headerActions)) {\n      actionsElement = (\n        <>\n          {headerActions.map((action) => {\n            return <action.Component model={action} key={`${action.state.key}`} />;\n          })}\n        </>\n      );\n    } else if (isSceneObject(headerActions)) {\n      actionsElement = <headerActions.Component model={headerActions} />;\n    } else {\n      actionsElement = headerActions;\n    }\n  }\n\n  // Data is always returned. For non-data panels, empty PanelData is returned.\n  const data = dataWithFieldConfig!;\n  const isReadyToRender = dataObject.isDataReadyToDisplay ? dataObject.isDataReadyToDisplay() : true;\n\n  return (\n    <div className={relativeWrapper}>\n      <div ref={ref as RefCallback<HTMLDivElement>} className={absoluteWrapper} data-viz-panel-key={model.state.key}>\n        {width > 0 && height > 0 && (\n          <PanelChrome\n            title={titleInterpolated}\n            description={description ? () => model.interpolate(description) : ''}\n            loadingState={data.state}\n            statusMessage={getChromeStatusMessage(data, _pluginLoadError)}\n            width={width}\n            height={height}\n            displayMode={displayMode}\n            hoverHeader={hoverHeader}\n            titleItems={titleItems}\n            dragClass={dragClass}\n            actions={actionsElement}\n            dragClassCancel={dragClassCancel}\n            padding={plugin.noPadding ? 'none' : 'md'}\n            menu={panelMenu}\n            onCancelQuery={model.onCancelQuery}\n          >\n            {(innerWidth, innerHeight) => (\n              <>\n                <ErrorBoundaryAlert dependencies={[plugin, data]}>\n                  <PluginContextProvider meta={plugin.meta}>\n                    <PanelContextProvider value={model.getPanelContext()}>\n                      {isReadyToRender && (\n                        <PanelComponent\n                          id={1}\n                          data={data}\n                          title={title}\n                          timeRange={data.timeRange}\n                          timeZone={timeZone}\n                          options={options}\n                          fieldConfig={fieldConfig}\n                          transparent={false}\n                          width={innerWidth}\n                          height={innerHeight}\n                          renderCounter={0}\n                          replaceVariables={model.interpolate}\n                          onOptionsChange={model.onOptionsChange}\n                          onFieldConfigChange={model.onFieldConfigChange}\n                          onChangeTimeRange={model.onTimeRangeChange}\n                          eventBus={getAppEvents()}\n                        />\n                      )}\n                    </PanelContextProvider>\n                  </PluginContextProvider>\n                </ErrorBoundaryAlert>\n              </>\n            )}\n          </PanelChrome>\n        )}\n      </div>\n    </div>\n  );\n}\n\nfunction getDragClasses(panel: VizPanel) {\n  const parentLayout = sceneGraph.getLayout(panel);\n  const isDraggable = parentLayout?.isDraggable();\n\n  if (!parentLayout || !isDraggable || itemDraggingDisabled(panel, parentLayout)) {\n    return { dragClass: '', dragClassCancel: '' };\n  }\n\n  return { dragClass: parentLayout.getDragClass?.(), dragClassCancel: parentLayout?.getDragClassCancel?.() };\n}\n\n/**\n * Walks up the parent chain until it hits the layout object, trying to find the closest SceneGridItemLike ancestor.\n * It is not always the direct parent, because the VizPanel can be wrapped in other objects.\n */\nfunction itemDraggingDisabled(item: SceneObject, layout: SceneLayout) {\n  let ancestor = item.parent;\n\n  while (ancestor && ancestor !== layout) {\n    if ('isDraggable' in ancestor.state && ancestor.state.isDraggable === false) {\n      return true;\n    }\n\n    ancestor = ancestor.parent;\n  }\n\n  return false;\n}\n\nfunction getChromeStatusMessage(data: PanelData, pluginLoadingError: string | undefined) {\n  if (pluginLoadingError) {\n    return pluginLoadingError;\n  }\n\n  let message = data.error ? data.error.message : undefined;\n\n  // Handling multiple errors with a single string until we integrate VizPanel with inspector\n  if (data.errors) {\n    message = data.errors.map((e) => e.message).join(', ');\n  }\n  return message;\n}\n\nconst relativeWrapper = css({\n  position: 'relative',\n  width: '100%',\n  height: '100%',\n});\n\n/**\n * Sadly this this absolute wrapper is needed for the panel to adopt smaller sizes.\n * The combo of useMeasure and PanelChrome makes the panel take up the width it get's but that makes it impossible to\n * Then adapt to smaller space (say resizing the browser window or undocking menu).\n */\nconst absoluteWrapper = css({\n  position: 'absolute',\n  width: '100%',\n  height: '100%',\n});\n"],"names":[],"mappings":"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"}

package/dist/esm/components/layout/CSSGrid/SceneCSSGridLayout.js

@@ -0,0 +1,106 @@
+import { css } from '@emotion/css';
+import React, { useMemo } from 'react';
+import { SceneObjectBase } from '../../../core/SceneObjectBase.js';
+import { config } from '@grafana/runtime';
+
+var __defProp = Object.defineProperty;
+var __getOwnPropSymbols = Object.getOwnPropertySymbols;
+var __hasOwnProp = Object.prototype.hasOwnProperty;
+var __propIsEnum = Object.prototype.propertyIsEnumerable;
+var __defNormalProp = (obj, key, value) => key in obj ? __defProp(obj, key, { enumerable: true, configurable: true, writable: true, value }) : obj[key] = value;
+var __spreadValues = (a, b) => {
+  for (var prop in b || (b = {}))
+    if (__hasOwnProp.call(b, prop))
+      __defNormalProp(a, prop, b[prop]);
+  if (__getOwnPropSymbols)
+    for (var prop of __getOwnPropSymbols(b)) {
+      if (__propIsEnum.call(b, prop))
+        __defNormalProp(a, prop, b[prop]);
+    }
+  return a;
+};
+class SceneCSSGridLayout extends SceneObjectBase {
+  constructor(state) {
+    var _a, _b;
+    super(__spreadValues({
+      rowGap: 1,
+      columnGap: 1,
+      templateColumns: "repeat(auto-fit, minmax(400px, 1fr))",
+      autoRows: (_a = state.autoRows) != null ? _a : `320px`,
+      children: (_b = state.children) != null ? _b : []
+    }, state));
+  }
+  isDraggable() {
+    return false;
+  }
+}
+SceneCSSGridLayout.Component = SceneCSSGridLayoutRenderer;
+function SceneCSSGridLayoutRenderer({ model }) {
+  const { children, isHidden } = model.useState();
+  const style = useLayoutStyle(model.state);
+  if (isHidden) {
+    return null;
+  }
+  return /* @__PURE__ */ React.createElement("div", {
+    className: style
+  }, children.map((item) => {
+    const Component = item.Component;
+    return /* @__PURE__ */ React.createElement(Component, {
+      key: item.state.key,
+      model: item,
+      parentState: model.state
+    });
+  }));
+}
+class SceneCSSGridItem extends SceneObjectBase {
+}
+SceneCSSGridItem.Component = SceneCSSGridItemRenderer;
+function SceneCSSGridItemRenderer({ model, parentState }) {
+  if (!parentState) {
+    throw new Error("SceneCSSGridItem must be a child of SceneCSSGridLayout");
+  }
+  const { body, isHidden } = model.useState();
+  if (!body || isHidden) {
+    return null;
+  }
+  return /* @__PURE__ */ React.createElement("div", {
+    className: itemContainer
+  }, /* @__PURE__ */ React.createElement(body.Component, {
+    model: body
+  }));
+}
+const itemContainer = css({
+  position: "relative"
+});
+function useLayoutStyle(state) {
+  return useMemo(() => {
+    var _a, _b, _c, _d, _e, _f, _g, _h, _i, _j, _k;
+    const style = {};
+    const theme = config.theme2;
+    style.display = "grid";
+    style.gridTemplateColumns = state.templateColumns;
+    style.gridTemplateRows = state.templateRows || "unset";
+    style.gridAutoRows = state.autoRows || "unset";
+    style.rowGap = theme.spacing((_a = state.rowGap) != null ? _a : 1);
+    style.columnGap = theme.spacing((_b = state.columnGap) != null ? _b : 1);
+    style.justifyItems = state.justifyItems || "unset";
+    style.alignItems = state.alignItems || "unset";
+    style.justifyContent = state.justifyContent || "unset";
+    style.flexGrow = 1;
+    if (state.md) {
+      style[theme.breakpoints.down("md")] = {
+        gridTemplateRows: (_c = state.md) == null ? void 0 : _c.templateRows,
+        gridTemplateColumns: (_d = state.md) == null ? void 0 : _d.templateColumns,
+        rowGap: state.md.rowGap ? theme.spacing((_f = (_e = state.md) == null ? void 0 : _e.rowGap) != null ? _f : 1) : void 0,
+        columnGap: state.md.columnGap ? theme.spacing((_h = (_g = state.md) == null ? void 0 : _g.rowGap) != null ? _h : 1) : void 0,
+        justifyItems: (_i = state.md) == null ? void 0 : _i.justifyItems,
+        alignItems: (_j = state.md) == null ? void 0 : _j.alignItems,
+        justifyContent: (_k = state.md) == null ? void 0 : _k.justifyContent
+      };
+    }
+    return css(style);
+  }, [state]);
+}
+
+export { SceneCSSGridItem, SceneCSSGridLayout };
+//# sourceMappingURL=SceneCSSGridLayout.js.map

package/dist/esm/components/layout/CSSGrid/SceneCSSGridLayout.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"SceneCSSGridLayout.js","sources":["../../../../../src/components/layout/CSSGrid/SceneCSSGridLayout.tsx"],"sourcesContent":["import { css, CSSObject } from '@emotion/css';\nimport React, { ComponentType, CSSProperties, useMemo } from 'react';\n\nimport { SceneObjectBase } from '../../../core/SceneObjectBase';\nimport { SceneComponentProps, SceneLayout, SceneObjectState, SceneObject } from '../../../core/types';\nimport { config } from '@grafana/runtime';\n\nexport interface SceneCSSGridLayoutState extends SceneObjectState, SceneCSSGridLayoutOptions {\n  children: Array<SceneCSSGridItem | SceneObject>;\n  /**\n   * True when the item should rendered but not visible.\n   * Useful for conditional display of layout items\n   */\n  isHidden?: boolean;\n  /**\n   * For media query for sceens smaller than md breakpoint\n   */\n  md?: SceneCSSGridLayoutOptions;\n}\n\nexport interface SceneCSSGridLayoutOptions {\n  /**\n   * Useful for setting a height on items without specifying how many rows there will be.\n   * Defaults to 320px\n   */\n  autoRows?: CSSProperties['gridAutoRows'];\n  /**\n   * This overrides the autoRows with a specific row template.\n   */\n  templateRows?: CSSProperties['gridTemplateRows'];\n  /**\n   * Defaults to repeat(auto-fit, minmax(400px, 1fr)). This pattern us useful for equally sized items with a min width of 400px\n   * and dynamic max width split equally among columns.\n   */\n  templateColumns: CSSProperties['gridTemplateColumns'];\n  /** In Grafana design system grid units (8px)  */\n  rowGap: number;\n  /** In Grafana design system grid units (8px)  */\n  columnGap: number;\n  justifyItems?: CSSProperties['justifyItems'];\n  alignItems?: CSSProperties['alignItems'];\n  justifyContent?: CSSProperties['justifyContent'];\n}\n\nexport class SceneCSSGridLayout extends SceneObjectBase<SceneCSSGridLayoutState> implements SceneLayout {\n  public static Component = SceneCSSGridLayoutRenderer;\n\n  public constructor(state: Partial<SceneCSSGridLayoutState>) {\n    super({\n      rowGap: 1,\n      columnGap: 1,\n      templateColumns: 'repeat(auto-fit, minmax(400px, 1fr))',\n      autoRows: state.autoRows ?? `320px`,\n      children: state.children ?? [],\n      ...state,\n    });\n  }\n\n  public isDraggable(): boolean {\n    return false;\n  }\n}\n\nfunction SceneCSSGridLayoutRenderer({ model }: SceneCSSGridItemRenderProps<SceneCSSGridLayout>) {\n  const { children, isHidden } = model.useState();\n  const style = useLayoutStyle(model.state);\n\n  if (isHidden) {\n    return null;\n  }\n\n  return (\n    <div className={style}>\n      {children.map((item) => {\n        const Component = item.Component as ComponentType<SceneCSSGridItemRenderProps<SceneObject>>;\n        return <Component key={item.state.key} model={item} parentState={model.state} />;\n      })}\n    </div>\n  );\n}\n\nexport interface SceneCSSGridItemPlacement {\n  /**\n   * True when the item should rendered but not visible.\n   * Useful for conditional display of layout items\n   */\n  isHidden?: boolean;\n}\n\nexport interface SceneCSSGridItemState extends SceneCSSGridItemPlacement, SceneObjectState {\n  body: SceneObject | undefined;\n}\n\ninterface SceneCSSGridItemRenderProps<T> extends SceneComponentProps<T> {\n  parentState?: SceneCSSGridItemPlacement;\n}\n\nexport class SceneCSSGridItem extends SceneObjectBase<SceneCSSGridItemState> {\n  public static Component = SceneCSSGridItemRenderer;\n}\n\nfunction SceneCSSGridItemRenderer({ model, parentState }: SceneCSSGridItemRenderProps<SceneCSSGridItem>) {\n  if (!parentState) {\n    throw new Error('SceneCSSGridItem must be a child of SceneCSSGridLayout');\n  }\n\n  const { body, isHidden } = model.useState();\n\n  if (!body || isHidden) {\n    return null;\n  }\n\n  return (\n    <div className={itemContainer}>\n      <body.Component model={body} />\n    </div>\n  );\n}\n\nconst itemContainer = css({\n  // Needed for VizPanel\n  position: 'relative',\n});\n\nfunction useLayoutStyle(state: SceneCSSGridLayoutState) {\n  return useMemo(() => {\n    const {} = state;\n    // only need breakpoints so accessing theme from config instead of context is ok\n    const style: CSSObject = {};\n    const theme = config.theme2;\n\n    style.display = 'grid';\n    style.gridTemplateColumns = state.templateColumns;\n    style.gridTemplateRows = state.templateRows || 'unset';\n    style.gridAutoRows = state.autoRows || 'unset';\n    style.rowGap = theme.spacing(state.rowGap ?? 1);\n    style.columnGap = theme.spacing(state.columnGap ?? 1);\n    style.justifyItems = state.justifyItems || 'unset';\n    style.alignItems = state.alignItems || 'unset';\n    style.justifyContent = state.justifyContent || 'unset';\n    style.flexGrow = 1;\n\n    if (state.md) {\n      style[theme.breakpoints.down('md')] = {\n        gridTemplateRows: state.md?.templateRows,\n        gridTemplateColumns: state.md?.templateColumns,\n        rowGap: state.md.rowGap ? theme.spacing(state.md?.rowGap ?? 1) : undefined,\n        columnGap: state.md.columnGap ? theme.spacing(state.md?.rowGap ?? 1) : undefined,\n        justifyItems: state.md?.justifyItems,\n        alignItems: state.md?.alignItems,\n        justifyContent: state.md?.justifyContent,\n      };\n    }\n\n    return css(style);\n  }, [state]);\n}\n"],"names":[],"mappings":"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"}

package/dist/esm/core/sceneGraph/index.js

@@ -1,6 +1,6 @@
 import { lookupVariable } from '../../variables/lookupVariable.js';
 import { getTimeRange } from './getTimeRange.js';
-import { getVariables, getData, getLayout, getDataLayers, interpolate, hasVariableDependencyInLoadingState, findObject } from './sceneGraph.js';
+import { getVariables, getData, getLayout, getDataLayers, interpolate, hasVariableDependencyInLoadingState, findObject, getAncestor } from './sceneGraph.js';
 
 const sceneGraph = {
   getVariables,
@@ -11,7 +11,8 @@ const sceneGraph = {
   interpolate,
   lookupVariable,
   hasVariableDependencyInLoadingState,
-  findObject
+  findObject,
+  getAncestor
 };
 
 export { sceneGraph };

package/dist/esm/core/sceneGraph/index.js.map

@@ -1 +1 @@
-{"version":3,"file":"index.js","sources":["../../../../src/core/sceneGraph/index.ts"],"sourcesContent":["import { lookupVariable } from '../../variables/lookupVariable';\nimport { getTimeRange } from './getTimeRange';\nimport {\n  findObject,\n  getData,\n  getLayout,\n  getVariables,\n  getDataLayers,\n  hasVariableDependencyInLoadingState,\n  interpolate,\n} from './sceneGraph';\n\nexport const sceneGraph = {\n  getVariables,\n  getData,\n  getTimeRange,\n  getLayout,\n  getDataLayers,\n  interpolate,\n  lookupVariable,\n  hasVariableDependencyInLoadingState,\n  findObject,\n};\n"],"names":[],"mappings":";;;;AAYO,MAAM,UAAa,GAAA;AAAA,EACxB,YAAA;AAAA,EACA,OAAA;AAAA,EACA,YAAA;AAAA,EACA,SAAA;AAAA,EACA,aAAA;AAAA,EACA,WAAA;AAAA,EACA,cAAA;AAAA,EACA,mCAAA;AAAA,EACA,UAAA;AACF;;;;"}
+{"version":3,"file":"index.js","sources":["../../../../src/core/sceneGraph/index.ts"],"sourcesContent":["import { lookupVariable } from '../../variables/lookupVariable';\nimport { getTimeRange } from './getTimeRange';\nimport {\n  findObject,\n  getData,\n  getLayout,\n  getVariables,\n  getDataLayers,\n  hasVariableDependencyInLoadingState,\n  interpolate,\n  getAncestor,\n} from './sceneGraph';\n\nexport const sceneGraph = {\n  getVariables,\n  getData,\n  getTimeRange,\n  getLayout,\n  getDataLayers,\n  interpolate,\n  lookupVariable,\n  hasVariableDependencyInLoadingState,\n  findObject,\n  getAncestor,\n};\n"],"names":[],"mappings":";;;;AAaO,MAAM,UAAa,GAAA;AAAA,EACxB,YAAA;AAAA,EACA,OAAA;AAAA,EACA,YAAA;AAAA,EACA,SAAA;AAAA,EACA,aAAA;AAAA,EACA,WAAA;AAAA,EACA,cAAA;AAAA,EACA,mCAAA;AAAA,EACA,UAAA;AAAA,EACA,WAAA;AACF;;;;"}

package/dist/esm/core/sceneGraph/sceneGraph.js

@@ -90,6 +90,16 @@ function getDataLayers(sceneObject, localOnly = false) {
   }
   return collected;
 }
+function getAncestor(sceneObject, ancestorType) {
+  let parent = sceneObject;
+  while (parent) {
+    if (parent instanceof ancestorType) {
+      return parent;
+    }
+    parent = parent.parent;
+  }
+  throw new Error("Unable to find parent of type " + ancestorType.name);
+}
 
-export { findObject, getData, getDataLayers, getLayout, getVariables, hasVariableDependencyInLoadingState, interpolate };
+export { findObject, getAncestor, getData, getDataLayers, getLayout, getVariables, hasVariableDependencyInLoadingState, interpolate };
 //# sourceMappingURL=sceneGraph.js.map

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

@@ -1 +1 @@
-{"version":3,"file":"sceneGraph.js","sources":["../../../../src/core/sceneGraph/sceneGraph.ts"],"sourcesContent":["import { ScopedVars } from '@grafana/data';\nimport { EmptyDataNode, EmptyVariableSet } from '../../variables/interpolation/defaults';\n\nimport { sceneInterpolator } from '../../variables/interpolation/sceneInterpolator';\nimport { VariableCustomFormatterFn, SceneVariables } from '../../variables/types';\n\nimport { SceneDataLayerProvider, SceneDataProvider, SceneLayout, SceneObject } from '../types';\nimport { lookupVariable } from '../../variables/lookupVariable';\nimport { getClosest } from './utils';\nimport { SceneDataLayers } from '../../querying/SceneDataLayers';\n\n/**\n * Get the closest node with variables\n */\nexport function getVariables(sceneObject: SceneObject): SceneVariables {\n  return getClosest(sceneObject, (s) => s.state.$variables) ?? EmptyVariableSet;\n}\n\n/**\n * Will walk up the scene object graph to the closest $data scene object\n */\nexport function getData(sceneObject: SceneObject): SceneDataProvider {\n  return getClosest(sceneObject, (s) => s.state.$data) ?? EmptyDataNode;\n}\n\nfunction isSceneLayout(s: SceneObject): s is SceneLayout {\n  return 'isDraggable' in s;\n}\n\n/**\n * Will walk up the scene object graph to the closest $layout scene object\n */\nexport function getLayout(scene: SceneObject): SceneLayout | null {\n  const parent = getClosest(scene, (s) => (isSceneLayout(s) ? s : undefined));\n  if (parent) {\n    return parent;\n  }\n\n  return null;\n}\n\n/**\n * Interpolates the given string using the current scene object as context.   *\n */\nexport function interpolate(\n  sceneObject: SceneObject,\n  value: string | undefined | null,\n  scopedVars?: ScopedVars,\n  format?: string | VariableCustomFormatterFn\n): string {\n  if (value === '' || value == null) {\n    return '';\n  }\n\n  return sceneInterpolator(sceneObject, value, scopedVars, format);\n}\n\n/**\n * Checks if the variable is currently loading or waiting to update\n */\nexport function hasVariableDependencyInLoadingState(sceneObject: SceneObject) {\n  if (!sceneObject.variableDependency) {\n    return false;\n  }\n\n  for (const name of sceneObject.variableDependency.getNames()) {\n    const variable = lookupVariable(name, sceneObject);\n    if (!variable) {\n      continue;\n    }\n\n    const set = variable.parent as SceneVariables;\n    return set.isVariableLoadingOrWaitingToUpdate(variable);\n  }\n\n  return false;\n}\n\nfunction findObjectInternal(\n  scene: SceneObject,\n  check: (obj: SceneObject) => boolean,\n  alreadySearchedChild?: SceneObject,\n  shouldSearchUp?: boolean\n): SceneObject | null {\n  if (check(scene)) {\n    return scene;\n  }\n\n  let found: SceneObject | null = null;\n\n  scene.forEachChild((child) => {\n    if (child === alreadySearchedChild) {\n      return;\n    }\n\n    let maybe = findObjectInternal(child, check);\n    if (maybe) {\n      found = maybe;\n    }\n  });\n\n  if (found) {\n    return found;\n  }\n\n  if (shouldSearchUp && scene.parent) {\n    return findObjectInternal(scene.parent, check, scene, true);\n  }\n\n  return null;\n}\n\n/**\n * This will search the full scene graph, starting with the scene node passed in, then walking up the parent chain. *\n */\nexport function findObject(scene: SceneObject, check: (obj: SceneObject) => boolean): SceneObject | null {\n  return findObjectInternal(scene, check, undefined, true);\n}\n\n/**\n * Will walk up the scene object graph up until the root and collect all SceneDataLayerProvider objects.\n * When localOnly set to true, it will only collect the closest layers.\n */\nexport function getDataLayers(sceneObject: SceneObject, localOnly = false): SceneDataLayerProvider[] {\n  let parent: SceneObject | undefined = sceneObject;\n  let collected: SceneDataLayerProvider[] = [];\n\n  let source;\n  while (parent) {\n    // Handling case when SceneDataLayers is attached to SceneDataProvider different than SceneDataLayers\n    // i.e. SceneDataLayers is attached to a SceneQueryRunner\n    if (parent.state.$data && !(parent.state.$data instanceof SceneDataLayers)) {\n      if (parent.state.$data.state.$data instanceof SceneDataLayers) {\n        source = parent.state.$data.state.$data;\n      }\n    }\n\n    if (parent.state.$data && parent.state.$data instanceof SceneDataLayers) {\n      source = parent.state.$data;\n    }\n    if (source) {\n      collected = collected.concat(source.state.layers);\n      if (localOnly) {\n        break;\n      }\n    }\n\n    parent = parent.parent;\n  }\n\n  return collected;\n}\n"],"names":[],"mappings":"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"}
+{"version":3,"file":"sceneGraph.js","sources":["../../../../src/core/sceneGraph/sceneGraph.ts"],"sourcesContent":["import { ScopedVars } from '@grafana/data';\nimport { EmptyDataNode, EmptyVariableSet } from '../../variables/interpolation/defaults';\n\nimport { sceneInterpolator } from '../../variables/interpolation/sceneInterpolator';\nimport { VariableCustomFormatterFn, SceneVariables } from '../../variables/types';\n\nimport { SceneDataLayerProvider, SceneDataProvider, SceneLayout, SceneObject } from '../types';\nimport { lookupVariable } from '../../variables/lookupVariable';\nimport { getClosest } from './utils';\nimport { SceneDataLayers } from '../../querying/SceneDataLayers';\n\n/**\n * Get the closest node with variables\n */\nexport function getVariables(sceneObject: SceneObject): SceneVariables {\n  return getClosest(sceneObject, (s) => s.state.$variables) ?? EmptyVariableSet;\n}\n\n/**\n * Will walk up the scene object graph to the closest $data scene object\n */\nexport function getData(sceneObject: SceneObject): SceneDataProvider {\n  return getClosest(sceneObject, (s) => s.state.$data) ?? EmptyDataNode;\n}\n\nfunction isSceneLayout(s: SceneObject): s is SceneLayout {\n  return 'isDraggable' in s;\n}\n\n/**\n * Will walk up the scene object graph to the closest $layout scene object\n */\nexport function getLayout(scene: SceneObject): SceneLayout | null {\n  const parent = getClosest(scene, (s) => (isSceneLayout(s) ? s : undefined));\n  if (parent) {\n    return parent;\n  }\n\n  return null;\n}\n\n/**\n * Interpolates the given string using the current scene object as context.   *\n */\nexport function interpolate(\n  sceneObject: SceneObject,\n  value: string | undefined | null,\n  scopedVars?: ScopedVars,\n  format?: string | VariableCustomFormatterFn\n): string {\n  if (value === '' || value == null) {\n    return '';\n  }\n\n  return sceneInterpolator(sceneObject, value, scopedVars, format);\n}\n\n/**\n * Checks if the variable is currently loading or waiting to update\n */\nexport function hasVariableDependencyInLoadingState(sceneObject: SceneObject) {\n  if (!sceneObject.variableDependency) {\n    return false;\n  }\n\n  for (const name of sceneObject.variableDependency.getNames()) {\n    const variable = lookupVariable(name, sceneObject);\n    if (!variable) {\n      continue;\n    }\n\n    const set = variable.parent as SceneVariables;\n    return set.isVariableLoadingOrWaitingToUpdate(variable);\n  }\n\n  return false;\n}\n\nfunction findObjectInternal(\n  scene: SceneObject,\n  check: (obj: SceneObject) => boolean,\n  alreadySearchedChild?: SceneObject,\n  shouldSearchUp?: boolean\n): SceneObject | null {\n  if (check(scene)) {\n    return scene;\n  }\n\n  let found: SceneObject | null = null;\n\n  scene.forEachChild((child) => {\n    if (child === alreadySearchedChild) {\n      return;\n    }\n\n    let maybe = findObjectInternal(child, check);\n    if (maybe) {\n      found = maybe;\n    }\n  });\n\n  if (found) {\n    return found;\n  }\n\n  if (shouldSearchUp && scene.parent) {\n    return findObjectInternal(scene.parent, check, scene, true);\n  }\n\n  return null;\n}\n\n/**\n * This will search the full scene graph, starting with the scene node passed in, then walking up the parent chain. *\n */\nexport function findObject(scene: SceneObject, check: (obj: SceneObject) => boolean): SceneObject | null {\n  return findObjectInternal(scene, check, undefined, true);\n}\n\n/**\n * Will walk up the scene object graph up until the root and collect all SceneDataLayerProvider objects.\n * When localOnly set to true, it will only collect the closest layers.\n */\nexport function getDataLayers(sceneObject: SceneObject, localOnly = false): SceneDataLayerProvider[] {\n  let parent: SceneObject | undefined = sceneObject;\n  let collected: SceneDataLayerProvider[] = [];\n\n  let source;\n  while (parent) {\n    // Handling case when SceneDataLayers is attached to SceneDataProvider different than SceneDataLayers\n    // i.e. SceneDataLayers is attached to a SceneQueryRunner\n    if (parent.state.$data && !(parent.state.$data instanceof SceneDataLayers)) {\n      if (parent.state.$data.state.$data instanceof SceneDataLayers) {\n        source = parent.state.$data.state.$data;\n      }\n    }\n\n    if (parent.state.$data && parent.state.$data instanceof SceneDataLayers) {\n      source = parent.state.$data;\n    }\n    if (source) {\n      collected = collected.concat(source.state.layers);\n      if (localOnly) {\n        break;\n      }\n    }\n\n    parent = parent.parent;\n  }\n\n  return collected;\n}\n\n/**\n * A utility function to find the closest ancestor of a given type. This function expects\n * to find it and will throw an error if it does noit.\n */\nexport function getAncestor<ParentType>(\n  sceneObject: SceneObject,\n  ancestorType: { new (...args: never[]): ParentType }\n): ParentType {\n  let parent: SceneObject | undefined = sceneObject;\n\n  while (parent) {\n    if (parent instanceof ancestorType) {\n      return parent;\n    }\n    parent = parent.parent;\n  }\n\n  throw new Error('Unable to find parent of type ' + ancestorType.name);\n}\n"],"names":[],"mappings":"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"}

package/dist/esm/index.js

@@ -50,6 +50,7 @@ export { SceneTimeRangeCompare } from './components/SceneTimeRangeCompare.js';
 export { SceneByFrameRepeater } from './components/SceneByFrameRepeater.js';
 export { SceneControlsSpacer } from './components/SceneControlsSpacer.js';
 export { SceneFlexItem, SceneFlexLayout } from './components/layout/SceneFlexLayout.js';
+export { SceneCSSGridItem, SceneCSSGridLayout } from './components/layout/CSSGrid/SceneCSSGridLayout.js';
 export { SceneGridLayout } from './components/layout/grid/SceneGridLayout.js';
 export { SceneGridItem } from './components/layout/grid/SceneGridItem.js';
 export { SceneGridRow } from './components/layout/grid/SceneGridRow.js';
@@ -59,6 +60,7 @@ export { SceneAppPage } from './components/SceneApp/SceneAppPage.js';
 export { SceneReactObject } from './components/SceneReactObject.js';
 export { SceneObjectRef } from './core/SceneObjectRef.js';
 export { PanelBuilders } from './core/PanelBuilders/index.js';
+export { VizPanelBuilder } from './core/PanelBuilders/VizPanelBuilder.js';
 export { SceneDebugger } from './components/SceneDebugger/SceneDebugger.js';
 export { PanelOptionsBuilders } from './core/PanelBuilders/PanelOptionsBuilders.js';
 export { FieldConfigBuilders } from './core/PanelBuilders/FieldConfigBuilders.js';

package/dist/esm/index.js.map

@@ -1 +1 @@
-{"version":3,"file":"index.js","sources":["../../src/index.ts"],"sourcesContent":["import { getUrlWithAppState } from './components/SceneApp/utils';\nimport { registerRuntimePanelPlugin } from './components/VizPanel/registerRuntimePanelPlugin';\nimport { cloneSceneObjectState } from './core/sceneGraph/utils';\nimport { registerRuntimeDataSource } from './querying/RuntimeDataSource';\n\nexport * from './core/types';\nexport * from './core/events';\nexport { sceneGraph } from './core/sceneGraph';\nexport * as behaviors from './behaviors';\nexport * as dataLayers from './querying/layers';\n\nexport { SceneObjectBase } from './core/SceneObjectBase';\nexport { SceneDataNode } from './core/SceneDataNode';\nexport { SceneTimeRange } from './core/SceneTimeRange';\nexport { SceneTimeZoneOverride } from './core/SceneTimeZoneOverride';\n\nexport { SceneQueryRunner, type QueryRunnerState } from './querying/SceneQueryRunner';\nexport { SceneDataLayers } from './querying/SceneDataLayers';\nexport { SceneDataLayerBase } from './querying/layers/SceneDataLayerBase';\nexport { SceneDataLayerControls } from './querying/layers/SceneDataLayerControls';\nexport { SceneDataTransformer } from './querying/SceneDataTransformer';\nexport { registerRuntimeDataSource, RuntimeDataSource } from './querying/RuntimeDataSource';\n\nexport * from './variables/types';\nexport { VariableDependencyConfig } from './variables/VariableDependencyConfig';\nexport { formatRegistry, type FormatVariable } from './variables/interpolation/formatRegistry';\nexport { VariableValueSelectors } from './variables/components/VariableValueSelectors';\nexport { SceneVariableSet } from './variables/sets/SceneVariableSet';\nexport { ConstantVariable } from './variables/variants/ConstantVariable';\nexport { CustomVariable } from './variables/variants/CustomVariable';\nexport { DataSourceVariable } from './variables/variants/DataSourceVariable';\nexport { QueryVariable } from './variables/variants/query/QueryVariable';\nexport { TestVariable } from './variables/variants/TestVariable';\nexport { TextBoxVariable } from './variables/variants/TextBoxVariable';\nexport { MultiValueVariable } from './variables/variants/MultiValueVariable';\nexport { LocalValueVariable } from './variables/variants/LocalValueVariable';\nexport { IntervalVariable } from './variables/variants/IntervalVariable';\nexport { AdHocFilterSet } from './variables/adhoc/AdHocFiltersSet';\nexport { AdHocFiltersVariable } from './variables/adhoc/AdHocFiltersVariable';\n\nexport { type UrlSyncManagerLike as UrlSyncManager, getUrlSyncManager } from './services/UrlSyncManager';\nexport { SceneObjectUrlSyncConfig } from './services/SceneObjectUrlSyncConfig';\n\nexport { EmbeddedScene, type EmbeddedSceneState } from './components/EmbeddedScene';\nexport { VizPanel, type VizPanelState } from './components/VizPanel/VizPanel';\nexport { VizPanelMenu } from './components/VizPanel/VizPanelMenu';\nexport { NestedScene } from './components/NestedScene';\nexport { SceneCanvasText } from './components/SceneCanvasText';\nexport { SceneToolbarButton, SceneToolbarInput } from './components/SceneToolbarButton';\nexport { SceneTimePicker } from './components/SceneTimePicker';\nexport { SceneRefreshPicker } from './components/SceneRefreshPicker';\nexport { SceneTimeRangeTransformerBase } from './core/SceneTimeRangeTransformerBase';\nexport { SceneTimeRangeCompare } from './components/SceneTimeRangeCompare';\nexport { SceneByFrameRepeater } from './components/SceneByFrameRepeater';\nexport { SceneControlsSpacer } from './components/SceneControlsSpacer';\nexport {\n  SceneFlexLayout,\n  SceneFlexItem,\n  type SceneFlexItemState,\n  type SceneFlexItemLike,\n} from './components/layout/SceneFlexLayout';\nexport { SceneGridLayout } from './components/layout/grid/SceneGridLayout';\nexport { SceneGridItem } from './components/layout/grid/SceneGridItem';\nexport { SceneGridRow } from './components/layout/grid/SceneGridRow';\nexport { type SceneGridItemStateLike, type SceneGridItemLike } from './components/layout/grid/types';\nexport { SplitLayout } from './components/layout/split/SplitLayout';\nexport {\n  type SceneAppPageLike,\n  type SceneRouteMatch,\n  type SceneAppPageState,\n  type SceneAppDrilldownView,\n  type SceneAppRoute,\n} from './components/SceneApp/types';\nexport { SceneApp, useSceneApp } from './components/SceneApp/SceneApp';\nexport { SceneAppPage } from './components/SceneApp/SceneAppPage';\nexport { SceneReactObject } from './components/SceneReactObject';\nexport { SceneObjectRef } from './core/SceneObjectRef';\nexport { PanelBuilders, PanelOptionsBuilders, FieldConfigBuilders } from './core/PanelBuilders';\nexport { SceneDebugger } from './components/SceneDebugger/SceneDebugger';\n\nexport const sceneUtils = {\n  getUrlWithAppState,\n  registerRuntimePanelPlugin,\n  registerRuntimeDataSource,\n  cloneSceneObjectState,\n};\n"],"names":[],"mappings":";;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;AAgFO,MAAM,UAAa,GAAA;AAAA,EACxB,kBAAA;AAAA,EACA,0BAAA;AAAA,EACA,yBAAA;AAAA,EACA,qBAAA;AACF;;;;"}
+{"version":3,"file":"index.js","sources":["../../src/index.ts"],"sourcesContent":["import { getUrlWithAppState } from './components/SceneApp/utils';\nimport { registerRuntimePanelPlugin } from './components/VizPanel/registerRuntimePanelPlugin';\nimport { cloneSceneObjectState } from './core/sceneGraph/utils';\nimport { registerRuntimeDataSource } from './querying/RuntimeDataSource';\n\nexport * from './core/types';\nexport * from './core/events';\nexport { sceneGraph } from './core/sceneGraph';\nexport * as behaviors from './behaviors';\nexport * as dataLayers from './querying/layers';\n\nexport { SceneObjectBase } from './core/SceneObjectBase';\nexport { SceneDataNode } from './core/SceneDataNode';\nexport { SceneTimeRange } from './core/SceneTimeRange';\nexport { SceneTimeZoneOverride } from './core/SceneTimeZoneOverride';\n\nexport { SceneQueryRunner, type QueryRunnerState } from './querying/SceneQueryRunner';\nexport { SceneDataLayers } from './querying/SceneDataLayers';\nexport { SceneDataLayerBase } from './querying/layers/SceneDataLayerBase';\nexport { SceneDataLayerControls } from './querying/layers/SceneDataLayerControls';\nexport { SceneDataTransformer } from './querying/SceneDataTransformer';\nexport { registerRuntimeDataSource, RuntimeDataSource } from './querying/RuntimeDataSource';\n\nexport * from './variables/types';\nexport { VariableDependencyConfig } from './variables/VariableDependencyConfig';\nexport { formatRegistry, type FormatVariable } from './variables/interpolation/formatRegistry';\nexport { VariableValueSelectors } from './variables/components/VariableValueSelectors';\nexport { SceneVariableSet } from './variables/sets/SceneVariableSet';\nexport { ConstantVariable } from './variables/variants/ConstantVariable';\nexport { CustomVariable } from './variables/variants/CustomVariable';\nexport { DataSourceVariable } from './variables/variants/DataSourceVariable';\nexport { QueryVariable } from './variables/variants/query/QueryVariable';\nexport { TestVariable } from './variables/variants/TestVariable';\nexport { TextBoxVariable } from './variables/variants/TextBoxVariable';\nexport { MultiValueVariable } from './variables/variants/MultiValueVariable';\nexport { LocalValueVariable } from './variables/variants/LocalValueVariable';\nexport { IntervalVariable } from './variables/variants/IntervalVariable';\nexport { AdHocFilterSet } from './variables/adhoc/AdHocFiltersSet';\nexport { AdHocFiltersVariable } from './variables/adhoc/AdHocFiltersVariable';\n\nexport { type UrlSyncManagerLike as UrlSyncManager, getUrlSyncManager } from './services/UrlSyncManager';\nexport { SceneObjectUrlSyncConfig } from './services/SceneObjectUrlSyncConfig';\n\nexport { EmbeddedScene, type EmbeddedSceneState } from './components/EmbeddedScene';\nexport { VizPanel, type VizPanelState } from './components/VizPanel/VizPanel';\nexport { VizPanelMenu } from './components/VizPanel/VizPanelMenu';\nexport { NestedScene } from './components/NestedScene';\nexport { SceneCanvasText } from './components/SceneCanvasText';\nexport { SceneToolbarButton, SceneToolbarInput } from './components/SceneToolbarButton';\nexport { SceneTimePicker } from './components/SceneTimePicker';\nexport { SceneRefreshPicker } from './components/SceneRefreshPicker';\nexport { SceneTimeRangeTransformerBase } from './core/SceneTimeRangeTransformerBase';\nexport { SceneTimeRangeCompare } from './components/SceneTimeRangeCompare';\nexport { SceneByFrameRepeater } from './components/SceneByFrameRepeater';\nexport { SceneControlsSpacer } from './components/SceneControlsSpacer';\nexport {\n  SceneFlexLayout,\n  SceneFlexItem,\n  type SceneFlexItemState,\n  type SceneFlexItemLike,\n} from './components/layout/SceneFlexLayout';\nexport { SceneCSSGridLayout, SceneCSSGridItem } from './components/layout/CSSGrid/SceneCSSGridLayout';\nexport { SceneGridLayout } from './components/layout/grid/SceneGridLayout';\nexport { SceneGridItem } from './components/layout/grid/SceneGridItem';\nexport { SceneGridRow } from './components/layout/grid/SceneGridRow';\nexport { type SceneGridItemStateLike, type SceneGridItemLike } from './components/layout/grid/types';\nexport { SplitLayout } from './components/layout/split/SplitLayout';\nexport {\n  type SceneAppPageLike,\n  type SceneRouteMatch,\n  type SceneAppPageState,\n  type SceneAppDrilldownView,\n  type SceneAppRoute,\n} from './components/SceneApp/types';\nexport { SceneApp, useSceneApp } from './components/SceneApp/SceneApp';\nexport { SceneAppPage } from './components/SceneApp/SceneAppPage';\nexport { SceneReactObject } from './components/SceneReactObject';\nexport { SceneObjectRef } from './core/SceneObjectRef';\nexport { PanelBuilders, PanelOptionsBuilders, FieldConfigBuilders } from './core/PanelBuilders';\nexport { VizPanelBuilder } from './core/PanelBuilders/VizPanelBuilder';\nexport { SceneDebugger } from './components/SceneDebugger/SceneDebugger';\n\nexport const sceneUtils = {\n  getUrlWithAppState,\n  registerRuntimePanelPlugin,\n  registerRuntimeDataSource,\n  cloneSceneObjectState,\n};\n"],"names":[],"mappings":";;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;AAkFO,MAAM,UAAa,GAAA;AAAA,EACxB,kBAAA;AAAA,EACA,0BAAA;AAAA,EACA,yBAAA;AAAA,EACA,qBAAA;AACF;;;;"}

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

@@ -170,14 +170,7 @@ const formatRegistry = new Registry(() => {
       id: VariableFormatID.SQLString,
       name: "SQL string",
       description: "SQL string quoting and commas for use in IN statements and other scenarios",
-      formatter: (value) => {
-        const regExp = new RegExp(`'`, "g");
-        if (isArray(value)) {
-          return map(value, (v) => `'${replace(v, regExp, "''")}'`).join(",");
-        }
-        let strVal = typeof value === "string" ? value : String(value);
-        return `'${replace(strVal, regExp, "''")}'`;
-      }
+      formatter: sqlStringFormatter
     },
     {
       id: VariableFormatID.Date,
@@ -276,6 +269,24 @@ const replaceSpecialCharactersToASCII = (value) => value.replace(/[!'()*]/g, (c)
 function formatQueryParameter(name, value) {
   return `var-${name}=${encodeURIComponentStrict(value)}`;
 }
+const SQL_ESCAPE_MAP = {
+  "'": "''",
+  '"': '\\"'
+};
+function sqlStringFormatter(value) {
+  const regExp = new RegExp(`'|"`, "g");
+  if (isArray(value)) {
+    return map(value, (v) => `'${replace(v, regExp, (match) => {
+      var _a;
+      return (_a = SQL_ESCAPE_MAP[match]) != null ? _a : "";
+    })}'`).join(",");
+  }
+  let strVal = typeof value === "string" ? value : String(value);
+  return `'${replace(strVal, regExp, (match) => {
+    var _a;
+    return (_a = SQL_ESCAPE_MAP[match]) != null ? _a : "";
+  })}'`;
+}
 
 export { formatRegistry };
 //# sourceMappingURL=formatRegistry.js.map