@grafana/scenes 0.0.1

package/README.md

@@ -0,0 +1,26 @@
+<div align="center">
+  <img
+    src="./docs/img/grafana_icon.svg"
+    alt="Grafana Logo"
+    width="100px"
+    padding="40px"
+  />
+  <h1>@grafana/scenes</h1>
+  <p>Create dashboard-like experiences in Grafana app plugins</p>
+</div>
+
+## Important notice
+
+@grafana/scenes is in its early days. We do not encourage anyone to use it in plugins yet. APIs can (and probably will) change significantly in the months to come.
+
+## Development
+
+@grafana/scenes does not come with dedicated playground yet. It is currently possible to run Scene demos using Grafana. To do that, the following setup is required.
+
+1. Clone @grafana/scenes repository.
+1. Clone [Grafana](https://github.com/grafana/grafana/) repository and follow [Development guide](https://github.com/grafana/grafana/blob/main/contribute/developer-guide.md#developer-guide).
+1. Setup env variable `GRAFANA_PATH` to point to your Grafana repository directory, `export GRAFANA_PATH=<path-to-grafana-directory>`
+1. From @grafana/scenes directory run `./scripts/dev.sh`. This will compile @grafana/scenes with watch mode enabled and link it to your Grafana.
+1. From Grafana directory run `yarn install`.
+1. Start Grafana with `scenes` [feature toggle enabled](https://grafana.com/docs/grafana/latest/setup-grafana/configure-grafana/#feature_toggles)
+1. Navigate to `http://localhost:3000/scenes` to explore demo scenes.

package/dist/esm/components/NestedScene.js

@@ -0,0 +1,119 @@
+import { css } from '@emotion/css';
+import React from 'react';
+import { Stack } from '@grafana/experimental';
+import { useStyles2, ToolbarButton, Button } from '@grafana/ui';
+import { SceneObjectBase } from '../core/SceneObjectBase.js';
+
+var __defProp = Object.defineProperty;
+var __defProps = Object.defineProperties;
+var __getOwnPropDescs = Object.getOwnPropertyDescriptors;
+var __getOwnPropSymbols = Object.getOwnPropertySymbols;
+var __hasOwnProp = Object.prototype.hasOwnProperty;
+var __propIsEnum = Object.prototype.propertyIsEnumerable;
+var __defNormalProp = (obj, key, value) => key in obj ? __defProp(obj, key, { enumerable: true, configurable: true, writable: true, value }) : obj[key] = value;
+var __spreadValues = (a, b) => {
+  for (var prop in b || (b = {}))
+    if (__hasOwnProp.call(b, prop))
+      __defNormalProp(a, prop, b[prop]);
+  if (__getOwnPropSymbols)
+    for (var prop of __getOwnPropSymbols(b)) {
+      if (__propIsEnum.call(b, prop))
+        __defNormalProp(a, prop, b[prop]);
+    }
+  return a;
+};
+var __spreadProps = (a, b) => __defProps(a, __getOwnPropDescs(b));
+class NestedScene extends SceneObjectBase {
+  constructor() {
+    super(...arguments);
+    this.onToggle = () => {
+      this.setState({
+        isCollapsed: !this.state.isCollapsed,
+        placement: __spreadProps(__spreadValues({}, this.state.placement), {
+          ySizing: this.state.isCollapsed ? "fill" : "content"
+        })
+      });
+    };
+    this.onRemove = () => {
+      const parent = this.parent;
+      if ("children" in parent.state) {
+        parent.setState({
+          children: parent.state.children.filter((x) => x !== this)
+        });
+      }
+    };
+  }
+}
+NestedScene.Component = NestedSceneRenderer;
+function NestedSceneRenderer({ model, isEditing }) {
+  const { title, isCollapsed, canCollapse, canRemove, body, actions } = model.useState();
+  const styles = useStyles2(getStyles);
+  const toolbarActions = (actions != null ? actions : []).map((action) => /* @__PURE__ */ React.createElement(action.Component, {
+    key: action.state.key,
+    model: action
+  }));
+  if (canRemove) {
+    toolbarActions.push(
+      /* @__PURE__ */ React.createElement(ToolbarButton, {
+        icon: "times",
+        variant: "default",
+        onClick: model.onRemove,
+        key: "remove-button",
+        "aria-label": "Remove scene"
+      })
+    );
+  }
+  return /* @__PURE__ */ React.createElement("div", {
+    className: styles.row
+  }, /* @__PURE__ */ React.createElement("div", {
+    className: styles.rowHeader
+  }, /* @__PURE__ */ React.createElement(Stack, {
+    gap: 0
+  }, /* @__PURE__ */ React.createElement("div", {
+    className: styles.title,
+    role: "heading",
+    "aria-level": 1
+  }, title), canCollapse && /* @__PURE__ */ React.createElement("div", {
+    className: styles.toggle
+  }, /* @__PURE__ */ React.createElement(Button, {
+    size: "sm",
+    icon: isCollapsed ? "angle-down" : "angle-up",
+    fill: "text",
+    variant: "secondary",
+    "aria-label": isCollapsed ? "Expand scene" : "Collapse scene",
+    onClick: model.onToggle
+  }))), /* @__PURE__ */ React.createElement("div", {
+    className: styles.actions
+  }, toolbarActions)), !isCollapsed && /* @__PURE__ */ React.createElement(body.Component, {
+    model: body,
+    isEditing
+  }));
+}
+const getStyles = (theme) => ({
+  row: css({
+    display: "flex",
+    flexDirection: "column",
+    flexGrow: 1,
+    gap: theme.spacing(1),
+    cursor: "pointer"
+  }),
+  toggle: css({}),
+  title: css({
+    fontSize: theme.typography.h5.fontSize
+  }),
+  rowHeader: css({
+    display: "flex",
+    alignItems: "center",
+    gap: theme.spacing(2)
+  }),
+  actions: css({
+    display: "flex",
+    alignItems: "center",
+    gap: theme.spacing(1),
+    justifyContent: "flex-end",
+    flexGrow: 1
+  })
+});
+
+export { NestedScene, NestedSceneRenderer };
+//# sourceMappingURL=NestedScene.js.map

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

@@ -0,0 +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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"}

package/dist/esm/components/Scene.js

@@ -0,0 +1,39 @@
+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, isEditing, subMenu } = model.useState();
+  return /* @__PURE__ */ React.createElement("div", {
+    style: {
+      flexGrow: 1,
+      display: "flex",
+      gap: "8px",
+      overflow: "auto",
+      minHeight: "100%",
+      flexDirection: "column"
+    }
+  }, subMenu && /* @__PURE__ */ React.createElement(subMenu.Component, {
+    model: subMenu
+  }), /* @__PURE__ */ React.createElement("div", {
+    style: { flexGrow: 1, display: "flex", gap: "8px", overflow: "auto" }
+  }, /* @__PURE__ */ React.createElement(body.Component, {
+    model: body,
+    isEditing
+  })));
+}
+
+export { EmbeddedScene };
+//# sourceMappingURL=Scene.js.map

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

@@ -0,0 +1 @@
+{"version":3,"file":"Scene.js","sources":["../../../src/components/Scene.tsx"],"sourcesContent":["import React from 'react';\n\nimport { SceneObjectBase } from '../core/SceneObjectBase';\nimport { SceneComponentProps, SceneObjectStatePlain, SceneObject } from '../core/types';\nimport { UrlSyncManager } from '../services/UrlSyncManager';\n\nexport interface SceneState extends SceneObjectStatePlain {\n  title: string;\n  body: SceneObject;\n  actions?: SceneObject[];\n  subMenu?: SceneObject;\n  isEditing?: boolean;\n}\n\nexport class EmbeddedScene extends SceneObjectBase<SceneState> {\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, isEditing, subMenu } = model.useState();\n  return (\n    <div\n      style={{\n        flexGrow: 1,\n        display: 'flex',\n        gap: '8px',\n        overflow: 'auto',\n        minHeight: '100%',\n        flexDirection: 'column',\n      }}\n    >\n      {subMenu && <subMenu.Component model={subMenu} />}\n      <div style={{ flexGrow: 1, display: 'flex', gap: '8px', overflow: 'auto' }}>\n        <body.Component model={body} isEditing={isEditing} />\n      </div>\n    </div>\n  );\n}\n"],"names":[],"mappings":";;;;AAcO,MAAM,sBAAsB,eAA4B,CAAA;AAAA,EAKtD,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,IAAM,EAAA,SAAA,EAAW,OAAQ,EAAA,GAAI,MAAM,QAAS,EAAA,CAAA;AACpD,EAAA,uBACG,KAAA,CAAA,aAAA,CAAA,KAAA,EAAA;AAAA,IACC,KAAO,EAAA;AAAA,MACL,QAAU,EAAA,CAAA;AAAA,MACV,OAAS,EAAA,MAAA;AAAA,MACT,GAAK,EAAA,KAAA;AAAA,MACL,QAAU,EAAA,MAAA;AAAA,MACV,SAAW,EAAA,MAAA;AAAA,MACX,aAAe,EAAA,QAAA;AAAA,KACjB;AAAA,GAEC,EAAA,OAAA,oBAAY,KAAA,CAAA,aAAA,CAAA,OAAA,CAAQ,SAAR,EAAA;AAAA,IAAkB,KAAO,EAAA,OAAA;AAAA,GAAS,mBAC9C,KAAA,CAAA,aAAA,CAAA,KAAA,EAAA;AAAA,IAAI,KAAA,EAAO,EAAE,QAAU,EAAA,CAAA,EAAG,SAAS,MAAQ,EAAA,GAAA,EAAK,KAAO,EAAA,QAAA,EAAU,MAAO,EAAA;AAAA,GACvE,kBAAA,KAAA,CAAA,aAAA,CAAC,KAAK,SAAL,EAAA;AAAA,IAAe,KAAO,EAAA,IAAA;AAAA,IAAM,SAAA;AAAA,GAAsB,CACrD,CACF,CAAA,CAAA;AAEJ;;;;"}

package/dist/esm/components/SceneCanvasText.js

@@ -0,0 +1,41 @@
+import React from 'react';
+import { Field, Input } from '@grafana/ui';
+import { SceneObjectBase } from '../core/SceneObjectBase.js';
+import { sceneGraph } from '../core/sceneGraph.js';
+import { VariableDependencyConfig } from '../variables/VariableDependencyConfig.js';
+
+class SceneCanvasText extends SceneObjectBase {
+  constructor() {
+    super(...arguments);
+    this._variableDependency = new VariableDependencyConfig(this, { statePaths: ["text"] });
+  }
+}
+SceneCanvasText.Editor = Editor;
+SceneCanvasText.Component = ({ model }) => {
+  const { text, fontSize = 20, align = "left", key } = model.useState();
+  const style = {
+    fontSize,
+    display: "flex",
+    flexGrow: 1,
+    alignItems: "center",
+    padding: 16,
+    justifyContent: align
+  };
+  return /* @__PURE__ */ React.createElement("div", {
+    style,
+    "data-testid": key
+  }, sceneGraph.interpolate(model, text));
+};
+function Editor({ model }) {
+  const { fontSize } = model.useState();
+  return /* @__PURE__ */ React.createElement(Field, {
+    label: "Font size"
+  }, /* @__PURE__ */ React.createElement(Input, {
+    type: "number",
+    defaultValue: fontSize,
+    onBlur: (evt) => model.setState({ fontSize: parseInt(evt.currentTarget.value, 10) })
+  }));
+}
+
+export { SceneCanvasText };
+//# sourceMappingURL=SceneCanvasText.js.map

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

@@ -0,0 +1 @@
+{"version":3,"file":"SceneCanvasText.js","sources":["../../../src/components/SceneCanvasText.tsx"],"sourcesContent":["import React, { CSSProperties } from 'react';\n\nimport { Field, Input } from '@grafana/ui';\n\nimport { SceneObjectBase } from '../core/SceneObjectBase';\nimport { sceneGraph } from '../core/sceneGraph';\nimport { SceneComponentProps, SceneLayoutChildState } from '../core/types';\nimport { VariableDependencyConfig } from '../variables/VariableDependencyConfig';\n\nexport interface SceneCanvasTextState extends SceneLayoutChildState {\n  text: string;\n  fontSize?: number;\n  align?: 'left' | 'center' | 'right';\n}\n\nexport class SceneCanvasText extends SceneObjectBase<SceneCanvasTextState> {\n  public static Editor = Editor;\n\n  protected _variableDependency = new VariableDependencyConfig(this, { statePaths: ['text'] });\n\n  public static Component = ({ model }: SceneComponentProps<SceneCanvasText>) => {\n    const { text, fontSize = 20, align = 'left', key } = model.useState();\n\n    const style: CSSProperties = {\n      fontSize: fontSize,\n      display: 'flex',\n      flexGrow: 1,\n      alignItems: 'center',\n      padding: 16,\n      justifyContent: align,\n    };\n\n    return (\n      <div style={style} data-testid={key}>\n        {sceneGraph.interpolate(model, text)}\n      </div>\n    );\n  };\n}\n\nfunction Editor({ model }: SceneComponentProps<SceneCanvasText>) {\n  const { fontSize } = model.useState();\n\n  return (\n    <Field label=\"Font size\">\n      <Input\n        type=\"number\"\n        defaultValue={fontSize}\n        onBlur={(evt) => model.setState({ fontSize: parseInt(evt.currentTarget.value, 10) })}\n      />\n    </Field>\n  );\n}\n"],"names":[],"mappings":";;;;;;AAeO,MAAM,wBAAwB,eAAsC,CAAA;AAAA,EAApE,WAAA,GAAA;AAAA,IAAA,KAAA,CAAA,GAAA,SAAA,CAAA,CAAA;AAGL,IAAU,IAAA,CAAA,mBAAA,GAAsB,IAAI,wBAAyB,CAAA,IAAA,EAAM,EAAE,UAAY,EAAA,CAAC,MAAM,CAAA,EAAG,CAAA,CAAA;AAAA,GAAA;AAoB7F,CAAA;AAvBa,eAAA,CACG,MAAS,GAAA,MAAA,CAAA;AADZ,eAAA,CAKG,SAAY,GAAA,CAAC,EAAE,KAAA,EAAkD,KAAA;AAC7E,EAAM,MAAA,EAAE,MAAM,QAAW,GAAA,EAAA,EAAI,QAAQ,MAAQ,EAAA,GAAA,EAAQ,GAAA,KAAA,CAAM,QAAS,EAAA,CAAA;AAEpE,EAAA,MAAM,KAAuB,GAAA;AAAA,IAC3B,QAAA;AAAA,IACA,OAAS,EAAA,MAAA;AAAA,IACT,QAAU,EAAA,CAAA;AAAA,IACV,UAAY,EAAA,QAAA;AAAA,IACZ,OAAS,EAAA,EAAA;AAAA,IACT,cAAgB,EAAA,KAAA;AAAA,GAClB,CAAA;AAEA,EAAA,uBACG,KAAA,CAAA,aAAA,CAAA,KAAA,EAAA;AAAA,IAAI,KAAA;AAAA,IAAc,aAAa,EAAA,GAAA;AAAA,GAAA,EAC7B,UAAW,CAAA,WAAA,CAAY,KAAO,EAAA,IAAI,CACrC,CAAA,CAAA;AAEJ,CAAA,CAAA;AAGF,SAAS,MAAA,CAAO,EAAE,KAAA,EAA+C,EAAA;AAC/D,EAAA,MAAM,EAAE,QAAA,EAAa,GAAA,KAAA,CAAM,QAAS,EAAA,CAAA;AAEpC,EAAA,uBACG,KAAA,CAAA,aAAA,CAAA,KAAA,EAAA;AAAA,IAAM,KAAM,EAAA,WAAA;AAAA,GAAA,kBACV,KAAA,CAAA,aAAA,CAAA,KAAA,EAAA;AAAA,IACC,IAAK,EAAA,QAAA;AAAA,IACL,YAAc,EAAA,QAAA;AAAA,IACd,MAAQ,EAAA,CAAC,GAAQ,KAAA,KAAA,CAAM,QAAS,CAAA,EAAE,QAAU,EAAA,QAAA,CAAS,GAAI,CAAA,aAAA,CAAc,KAAO,EAAA,EAAE,GAAG,CAAA;AAAA,GACrF,CACF,CAAA,CAAA;AAEJ;;;;"}

package/dist/esm/components/SceneDragHandle.js

@@ -0,0 +1,18 @@
+import React from 'react';
+import { Icon } from '@grafana/ui';
+
+function SceneDragHandle({ layoutKey, className }) {
+  return /* @__PURE__ */ React.createElement("div", {
+    className: `${className} grid-drag-handle-${layoutKey}`,
+    style: {
+      width: "20px",
+      height: "20px",
+      cursor: "move"
+    }
+  }, /* @__PURE__ */ React.createElement(Icon, {
+    name: "draggabledots"
+  }));
+}
+
+export { SceneDragHandle };
+//# sourceMappingURL=SceneDragHandle.js.map

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

@@ -0,0 +1 @@
+{"version":3,"file":"SceneDragHandle.js","sources":["../../../src/components/SceneDragHandle.tsx"],"sourcesContent":["import React from 'react';\n\nimport { Icon } from '@grafana/ui';\n\nexport function SceneDragHandle({ layoutKey, className }: { layoutKey: string; className?: string }) {\n  return (\n    <div\n      className={`${className} grid-drag-handle-${layoutKey}`}\n      style={{\n        width: '20px',\n        height: '20px',\n        cursor: 'move',\n      }}\n    >\n      <Icon name=\"draggabledots\" />\n    </div>\n  );\n}\n"],"names":[],"mappings":";;;AAIO,SAAS,eAAgB,CAAA,EAAE,SAAW,EAAA,SAAA,EAAwD,EAAA;AACnG,EAAA,uBACG,KAAA,CAAA,aAAA,CAAA,KAAA,EAAA;AAAA,IACC,SAAA,EAAW,GAAG,SAA8B,CAAA,kBAAA,EAAA,SAAA,CAAA,CAAA;AAAA,IAC5C,KAAO,EAAA;AAAA,MACL,KAAO,EAAA,MAAA;AAAA,MACP,MAAQ,EAAA,MAAA;AAAA,MACR,MAAQ,EAAA,MAAA;AAAA,KACV;AAAA,GAAA,kBAEC,KAAA,CAAA,aAAA,CAAA,IAAA,EAAA;AAAA,IAAK,IAAK,EAAA,eAAA;AAAA,GAAgB,CAC7B,CAAA,CAAA;AAEJ;;;;"}

package/dist/esm/components/ScenePanelRepeater.js

@@ -0,0 +1,66 @@
+import React from 'react';
+import { LoadingState } from '@grafana/data';
+import { SceneDataNode } from '../core/SceneDataNode.js';
+import { SceneObjectBase } from '../core/SceneObjectBase.js';
+import { sceneGraph } from '../core/sceneGraph.js';
+
+var __defProp = Object.defineProperty;
+var __defProps = Object.defineProperties;
+var __getOwnPropDescs = Object.getOwnPropertyDescriptors;
+var __getOwnPropSymbols = Object.getOwnPropertySymbols;
+var __hasOwnProp = Object.prototype.hasOwnProperty;
+var __propIsEnum = Object.prototype.propertyIsEnumerable;
+var __defNormalProp = (obj, key, value) => key in obj ? __defProp(obj, key, { enumerable: true, configurable: true, writable: true, value }) : obj[key] = value;
+var __spreadValues = (a, b) => {
+  for (var prop in b || (b = {}))
+    if (__hasOwnProp.call(b, prop))
+      __defNormalProp(a, prop, b[prop]);
+  if (__getOwnPropSymbols)
+    for (var prop of __getOwnPropSymbols(b)) {
+      if (__propIsEnum.call(b, prop))
+        __defNormalProp(a, prop, b[prop]);
+    }
+  return a;
+};
+var __spreadProps = (a, b) => __defProps(a, __getOwnPropDescs(b));
+class ScenePanelRepeater extends SceneObjectBase {
+  activate() {
+    super.activate();
+    this._subs.add(
+      sceneGraph.getData(this).subscribeToState({
+        next: (data) => {
+          var _a;
+          if (((_a = data.data) == null ? void 0 : _a.state) === LoadingState.Done) {
+            this.performRepeat(data.data);
+          }
+        }
+      })
+    );
+  }
+  performRepeat(data) {
+    const firstChild = this.state.layout.state.children[0];
+    const newChildren = [];
+    for (const series of data.series) {
+      const clone = firstChild.clone({
+        key: `${newChildren.length}`,
+        $data: new SceneDataNode({
+          data: __spreadProps(__spreadValues({}, data), {
+            series: [series]
+          })
+        })
+      });
+      newChildren.push(clone);
+    }
+    this.state.layout.setState({ children: newChildren });
+  }
+}
+ScenePanelRepeater.Component = ({ model, isEditing }) => {
+  const { layout } = model.useState();
+  return /* @__PURE__ */ React.createElement(layout.Component, {
+    model: layout,
+    isEditing
+  });
+};
+
+export { ScenePanelRepeater };
+//# sourceMappingURL=ScenePanelRepeater.js.map

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

@@ -0,0 +1 @@
+{"version":3,"file":"ScenePanelRepeater.js","sources":["../../../src/components/ScenePanelRepeater.tsx"],"sourcesContent":["import React from 'react';\n\nimport { LoadingState, PanelData } from '@grafana/data';\n\nimport { SceneDataNode } from '../core/SceneDataNode';\nimport { SceneObjectBase } from '../core/SceneObjectBase';\nimport { sceneGraph } from '../core/sceneGraph';\nimport {\n  SceneComponentProps,\n  SceneObject,\n  SceneObjectStatePlain,\n  SceneLayoutState,\n  SceneLayoutChild,\n} from '../core/types';\n\ninterface RepeatOptions extends SceneObjectStatePlain {\n  layout: SceneObject<SceneLayoutState>;\n}\n\nexport class ScenePanelRepeater extends SceneObjectBase<RepeatOptions> {\n  public activate(): void {\n    super.activate();\n\n    this._subs.add(\n      sceneGraph.getData(this).subscribeToState({\n        next: (data) => {\n          if (data.data?.state === LoadingState.Done) {\n            this.performRepeat(data.data);\n          }\n        },\n      })\n    );\n  }\n\n  private performRepeat(data: PanelData) {\n    // assume parent is a layout\n    const firstChild = this.state.layout.state.children[0]!;\n    const newChildren: SceneLayoutChild[] = [];\n\n    for (const series of data.series) {\n      const clone = firstChild.clone({\n        key: `${newChildren.length}`,\n        $data: new SceneDataNode({\n          data: {\n            ...data,\n            series: [series],\n          },\n        }),\n      });\n\n      newChildren.push(clone);\n    }\n\n    this.state.layout.setState({ children: newChildren });\n  }\n\n  public static Component = ({ model, isEditing }: SceneComponentProps<ScenePanelRepeater>) => {\n    const { layout } = model.useState();\n    return <layout.Component model={layout} isEditing={isEditing} />;\n  };\n}\n"],"names":[],"mappings":";;;;;;;;;;;;;;;;;;;;;;;;;AAmBO,MAAM,2BAA2B,eAA+B,CAAA;AAAA,EAC9D,QAAiB,GAAA;AACtB,IAAA,KAAA,CAAM,QAAS,EAAA,CAAA;AAEf,IAAA,IAAA,CAAK,KAAM,CAAA,GAAA;AAAA,MACT,UAAW,CAAA,OAAA,CAAQ,IAAI,CAAA,CAAE,gBAAiB,CAAA;AAAA,QACxC,IAAA,EAAM,CAAC,IAAS,KAAA;AAzBxB,UAAA,IAAA,EAAA,CAAA;AA0BU,UAAA,IAAA,CAAA,CAAI,EAAK,GAAA,IAAA,CAAA,IAAA,KAAL,IAAW,GAAA,KAAA,CAAA,GAAA,EAAA,CAAA,KAAA,MAAU,aAAa,IAAM,EAAA;AAC1C,YAAK,IAAA,CAAA,aAAA,CAAc,KAAK,IAAI,CAAA,CAAA;AAAA,WAC9B;AAAA,SACF;AAAA,OACD,CAAA;AAAA,KACH,CAAA;AAAA,GACF;AAAA,EAEQ,cAAc,IAAiB,EAAA;AAErC,IAAA,MAAM,UAAa,GAAA,IAAA,CAAK,KAAM,CAAA,MAAA,CAAO,MAAM,QAAS,CAAA,CAAA,CAAA,CAAA;AACpD,IAAA,MAAM,cAAkC,EAAC,CAAA;AAEzC,IAAW,KAAA,MAAA,MAAA,IAAU,KAAK,MAAQ,EAAA;AAChC,MAAM,MAAA,KAAA,GAAQ,WAAW,KAAM,CAAA;AAAA,QAC7B,GAAA,EAAK,GAAG,WAAY,CAAA,MAAA,CAAA,CAAA;AAAA,QACpB,KAAA,EAAO,IAAI,aAAc,CAAA;AAAA,UACvB,IAAA,EAAM,iCACD,IADC,CAAA,EAAA;AAAA,YAEJ,MAAA,EAAQ,CAAC,MAAM,CAAA;AAAA,WACjB,CAAA;AAAA,SACD,CAAA;AAAA,OACF,CAAA,CAAA;AAED,MAAA,WAAA,CAAY,KAAK,KAAK,CAAA,CAAA;AAAA,KACxB;AAEA,IAAA,IAAA,CAAK,MAAM,MAAO,CAAA,QAAA,CAAS,EAAE,QAAA,EAAU,aAAa,CAAA,CAAA;AAAA,GACtD;AAMF,CAAA;AAzCa,kBAAA,CAqCG,SAAY,GAAA,CAAC,EAAE,KAAA,EAAO,WAAyD,KAAA;AAC3F,EAAA,MAAM,EAAE,MAAA,EAAW,GAAA,KAAA,CAAM,QAAS,EAAA,CAAA;AAClC,EAAO,uBAAA,KAAA,CAAA,aAAA,CAAC,OAAO,SAAP,EAAA;AAAA,IAAiB,KAAO,EAAA,MAAA;AAAA,IAAQ,SAAA;AAAA,GAAsB,CAAA,CAAA;AAChE,CAAA;;;;"}

package/dist/esm/components/SceneSubMenu.js

@@ -0,0 +1,18 @@
+import React from 'react';
+import { SceneObjectBase } from '../core/SceneObjectBase.js';
+
+class SceneSubMenu extends SceneObjectBase {
+}
+SceneSubMenu.Component = SceneSubMenuRenderer;
+function SceneSubMenuRenderer({ model }) {
+  const { children } = model.useState();
+  return /* @__PURE__ */ React.createElement("div", {
+    style: { display: "flex", gap: "16px" }
+  }, children.map((child) => /* @__PURE__ */ React.createElement(child.Component, {
+    key: child.state.key,
+    model: child
+  })));
+}
+
+export { SceneSubMenu };
+//# sourceMappingURL=SceneSubMenu.js.map

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

@@ -0,0 +1 @@
+{"version":3,"file":"SceneSubMenu.js","sources":["../../../src/components/SceneSubMenu.tsx"],"sourcesContent":["import React from 'react';\n\nimport { SceneObjectBase } from '../core/SceneObjectBase';\nimport { SceneLayoutState, SceneComponentProps } from '../core/types';\n\ninterface SceneSubMenuState extends SceneLayoutState {}\n\nexport class SceneSubMenu extends SceneObjectBase<SceneSubMenuState> {\n  public static Component = SceneSubMenuRenderer;\n}\n\nfunction SceneSubMenuRenderer({ model }: SceneComponentProps<SceneSubMenu>) {\n  const { children } = model.useState();\n\n  return (\n    <div style={{ display: 'flex', gap: '16px' }}>\n      {children.map((child) => (\n        <child.Component key={child.state.key} model={child} />\n      ))}\n    </div>\n  );\n}\n"],"names":[],"mappings":";;;AAOO,MAAM,qBAAqB,eAAmC,CAAA;AAErE,CAAA;AAFa,YAAA,CACG,SAAY,GAAA,oBAAA,CAAA;AAG5B,SAAS,oBAAA,CAAqB,EAAE,KAAA,EAA4C,EAAA;AAC1E,EAAA,MAAM,EAAE,QAAA,EAAa,GAAA,KAAA,CAAM,QAAS,EAAA,CAAA;AAEpC,EAAA,uBACG,KAAA,CAAA,aAAA,CAAA,KAAA,EAAA;AAAA,IAAI,KAAO,EAAA,EAAE,OAAS,EAAA,MAAA,EAAQ,KAAK,MAAO,EAAA;AAAA,GAAA,EACxC,SAAS,GAAI,CAAA,CAAC,KACb,qBAAA,KAAA,CAAA,aAAA,CAAC,MAAM,SAAN,EAAA;AAAA,IAAgB,GAAA,EAAK,MAAM,KAAM,CAAA,GAAA;AAAA,IAAK,KAAO,EAAA,KAAA;AAAA,GAAO,CACtD,CACH,CAAA,CAAA;AAEJ;;;;"}

package/dist/esm/components/SceneTimePicker.js

@@ -0,0 +1,40 @@
+import React from 'react';
+import { ToolbarButtonRow, TimeRangePicker, RefreshPicker } from '@grafana/ui';
+import { SceneObjectBase } from '../core/SceneObjectBase.js';
+import { sceneGraph } from '../core/sceneGraph.js';
+
+class SceneTimePicker extends SceneObjectBase {
+}
+SceneTimePicker.Component = SceneTimePickerRenderer;
+function SceneTimePickerRenderer({ model }) {
+  const { hidePicker } = model.useState();
+  const timeRange = sceneGraph.getTimeRange(model);
+  const timeRangeState = timeRange.useState();
+  if (hidePicker) {
+    return null;
+  }
+  return /* @__PURE__ */ React.createElement(ToolbarButtonRow, {
+    alignment: "right"
+  }, /* @__PURE__ */ React.createElement(TimeRangePicker, {
+    value: timeRangeState.value,
+    onChange: timeRange.onTimeRangeChange,
+    timeZone: "browser",
+    fiscalYearStartMonth: 0,
+    onMoveBackward: () => {
+    },
+    onMoveForward: () => {
+    },
+    onZoom: () => {
+    },
+    onChangeTimeZone: () => {
+    },
+    onChangeFiscalYearStartMonth: () => {
+    }
+  }), /* @__PURE__ */ React.createElement(RefreshPicker, {
+    onRefresh: timeRange.onRefresh,
+    onIntervalChanged: timeRange.onIntervalChanged
+  }));
+}
+
+export { SceneTimePicker };
+//# sourceMappingURL=SceneTimePicker.js.map

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

@@ -0,0 +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;;;;"}

package/dist/esm/components/SceneToolbarButton.js

@@ -0,0 +1,28 @@
+import React from 'react';
+import { ToolbarButton, Input } from '@grafana/ui';
+import { SceneObjectBase } from '../core/SceneObjectBase.js';
+
+class SceneToolbarButton extends SceneObjectBase {
+}
+SceneToolbarButton.Component = ({ model }) => {
+  const state = model.useState();
+  return /* @__PURE__ */ React.createElement(ToolbarButton, {
+    onClick: state.onClick,
+    icon: state.icon
+  });
+};
+class SceneToolbarInput extends SceneObjectBase {
+}
+SceneToolbarInput.Component = ({ model }) => {
+  const state = model.useState();
+  return /* @__PURE__ */ React.createElement(Input, {
+    defaultValue: state.value,
+    width: 8,
+    onBlur: (evt) => {
+      model.state.onChange(parseInt(evt.currentTarget.value, 10));
+    }
+  });
+};
+
+export { SceneToolbarButton, SceneToolbarInput };
+//# sourceMappingURL=SceneToolbarButton.js.map

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

@@ -0,0 +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, SceneObjectStatePlain } from '../core/types';\n\nexport interface ToolbarButtonState extends SceneObjectStatePlain {\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 SceneObjectStatePlain {\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;;;;"}

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

@@ -0,0 +1,105 @@
+import React from 'react';
+import { toUtc, getPanelOptionsWithDefaults } from '@grafana/data';
+import { getPluginImportUtils, config } from '@grafana/runtime';
+import { Field, Input } from '@grafana/ui';
+import { SceneObjectBase } from '../../core/SceneObjectBase.js';
+import { sceneGraph } from '../../core/sceneGraph.js';
+import { VizPanelRenderer } from './VizPanelRenderer.js';
+
+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 VizPanel extends SceneObjectBase {
+  constructor(state) {
+    super(__spreadValues({
+      options: {},
+      fieldConfig: { defaults: {}, overrides: [] },
+      title: "Title",
+      pluginId: "timeseries"
+    }, state));
+    this.onChangeTimeRange = (timeRange) => {
+      const sceneTimeRange = sceneGraph.getTimeRange(this);
+      sceneTimeRange.onTimeRangeChange({
+        raw: {
+          from: toUtc(timeRange.from),
+          to: toUtc(timeRange.to)
+        },
+        from: toUtc(timeRange.from),
+        to: toUtc(timeRange.to)
+      });
+    };
+    this.onOptionsChange = (options) => {
+      this.setState({ options });
+    };
+    this.onFieldConfigChange = (fieldConfig) => {
+      this.setState({ fieldConfig });
+    };
+  }
+  activate() {
+    super.activate();
+    const { getPanelPluginFromCache, importPanelPlugin } = getPluginImportUtils();
+    const plugin = getPanelPluginFromCache(this.state.pluginId);
+    if (plugin) {
+      this.pluginLoaded(plugin);
+    } else {
+      importPanelPlugin(this.state.pluginId).then((result) => this.pluginLoaded(result)).catch((err) => {
+        this.setState({ pluginLoadError: err.message });
+      });
+    }
+  }
+  pluginLoaded(plugin) {
+    const { options, fieldConfig, title, pluginId, pluginVersion } = this.state;
+    const panel = { title, options, fieldConfig, id: 1, type: pluginId, pluginVersion };
+    const currentVersion = this.getPluginVersion(plugin);
+    if (plugin.onPanelMigration) {
+      if (currentVersion !== this.state.pluginVersion) {
+        panel.options = plugin.onPanelMigration(panel);
+      }
+    }
+    const withDefaults = getPanelOptionsWithDefaults({
+      plugin,
+      currentOptions: panel.options,
+      currentFieldConfig: panel.fieldConfig,
+      isAfterPluginChange: false
+    });
+    this._plugin = plugin;
+    this.setState({
+      options: withDefaults.options,
+      fieldConfig: withDefaults.fieldConfig,
+      pluginVersion: currentVersion
+    });
+  }
+  getPluginVersion(plugin) {
+    return plugin && plugin.meta.info.version ? plugin.meta.info.version : config.buildInfo.version;
+  }
+  getPlugin() {
+    return this._plugin;
+  }
+}
+VizPanel.Component = VizPanelRenderer;
+VizPanel.Editor = VizPanelEditor;
+function VizPanelEditor({ model }) {
+  const { title } = model.useState();
+  return /* @__PURE__ */ React.createElement(Field, {
+    label: "Title"
+  }, /* @__PURE__ */ React.createElement(Input, {
+    defaultValue: title,
+    onBlur: (evt) => model.setState({ title: evt.currentTarget.value })
+  }));
+}
+
+export { VizPanel };
+//# sourceMappingURL=VizPanel.js.map

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

@@ -0,0 +1 @@
+{"version":3,"file":"VizPanel.js","sources":["../../../../src/components/VizPanel/VizPanel.tsx"],"sourcesContent":["import React from 'react';\n\nimport {\n  AbsoluteTimeRange,\n  FieldConfigSource,\n  PanelModel,\n  PanelPlugin,\n  toUtc,\n  getPanelOptionsWithDefaults,\n} from '@grafana/data';\nimport { config, getPluginImportUtils } from '@grafana/runtime';\nimport { Field, Input } from '@grafana/ui';\nimport { SceneObjectBase } from '../../core/SceneObjectBase';\nimport { sceneGraph } from '../../core/sceneGraph';\nimport { DeepPartial, SceneComponentProps, SceneLayoutChildState } from '../../core/types';\n\nimport { VizPanelRenderer } from './VizPanelRenderer';\n\nexport interface VizPanelState<TOptions = {}, TFieldConfig = {}> extends SceneLayoutChildState {\n  title: string;\n  pluginId: string;\n  options: DeepPartial<TOptions>;\n  fieldConfig: FieldConfigSource<DeepPartial<TFieldConfig>>;\n  pluginVersion?: string;\n  // internal state\n  pluginLoadError?: string;\n}\n\nexport class VizPanel<TOptions = {}, TFieldConfig = {}> extends SceneObjectBase<VizPanelState<TOptions, TFieldConfig>> {\n  public static Component = VizPanelRenderer;\n  public static Editor = VizPanelEditor;\n\n  // Not part of state as this is not serializable\n  private _plugin?: PanelPlugin;\n\n  public constructor(state: Partial<VizPanelState<TOptions, TFieldConfig>>) {\n    super({\n      options: {},\n      fieldConfig: { defaults: {}, overrides: [] },\n      title: 'Title',\n      pluginId: 'timeseries',\n      ...state,\n    });\n  }\n\n  public activate() {\n    super.activate();\n    const { getPanelPluginFromCache, importPanelPlugin } = getPluginImportUtils();\n    const plugin = getPanelPluginFromCache(this.state.pluginId);\n\n    if (plugin) {\n      this.pluginLoaded(plugin);\n    } else {\n      importPanelPlugin(this.state.pluginId)\n        .then((result) => this.pluginLoaded(result))\n        .catch((err: Error) => {\n          this.setState({ pluginLoadError: err.message });\n        });\n    }\n  }\n\n  private pluginLoaded(plugin: PanelPlugin) {\n    const { options, fieldConfig, title, pluginId, pluginVersion } = this.state;\n\n    const panel: PanelModel = { title, options, fieldConfig, id: 1, type: pluginId, pluginVersion: pluginVersion };\n    const currentVersion = this.getPluginVersion(plugin);\n\n    if (plugin.onPanelMigration) {\n      if (currentVersion !== this.state.pluginVersion) {\n        // These migration handlers also mutate panel.fieldConfig to migrate fieldConfig\n        panel.options = plugin.onPanelMigration(panel);\n      }\n    }\n\n    const withDefaults = getPanelOptionsWithDefaults({\n      plugin,\n      currentOptions: panel.options,\n      currentFieldConfig: panel.fieldConfig,\n      isAfterPluginChange: false,\n    });\n\n    this._plugin = plugin;\n    this.setState({\n      options: withDefaults.options,\n      fieldConfig: withDefaults.fieldConfig,\n      pluginVersion: currentVersion,\n    });\n  }\n\n  private getPluginVersion(plugin: PanelPlugin): string {\n    return plugin && plugin.meta.info.version ? plugin.meta.info.version : config.buildInfo.version;\n  }\n\n  public getPlugin(): PanelPlugin | undefined {\n    return this._plugin;\n  }\n\n  public onChangeTimeRange = (timeRange: AbsoluteTimeRange) => {\n    const sceneTimeRange = sceneGraph.getTimeRange(this);\n    sceneTimeRange.onTimeRangeChange({\n      raw: {\n        from: toUtc(timeRange.from),\n        to: toUtc(timeRange.to),\n      },\n      from: toUtc(timeRange.from),\n      to: toUtc(timeRange.to),\n    });\n  };\n\n  public onOptionsChange = (options: TOptions) => {\n    this.setState({ options });\n  };\n\n  public onFieldConfigChange = (fieldConfig: FieldConfigSource<TFieldConfig>) => {\n    this.setState({ fieldConfig });\n  };\n}\n\nfunction VizPanelEditor({ model }: SceneComponentProps<VizPanel>) {\n  const { title } = model.useState();\n\n  return (\n    <Field label=\"Title\">\n      <Input defaultValue={title} onBlur={(evt) => model.setState({ title: evt.currentTarget.value })} />\n    </Field>\n  );\n}\n"],"names":[],"mappings":"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"}