@grafana/scenes 0.0.7 → 0.0.9

package/dist/index.d.ts

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

package/dist/index.js

@@ -10,8 +10,8 @@ var ui = require('@grafana/ui');
 var lodash = require('lodash');
 var runtime = require('@grafana/runtime');
 var e2eSelectors = require('@grafana/e2e-selectors');
-var reactUse = require('react-use');
 var css = require('@emotion/css');
+var reactUse = require('react-use');
 var experimental = require('@grafana/experimental');
 var ReactGridLayout = require('react-grid-layout');
 var AutoSizer = require('react-virtualized-auto-sizer');
@@ -451,10 +451,12 @@ class SceneVariableSet extends SceneObjectBase {
   deactivate() {
     var _a;
     super.deactivate();
-    this.variablesToUpdate.clear();
     for (const update of this.updating.values()) {
       (_a = update.subscription) == null ? void 0 : _a.unsubscribe();
     }
+    this.variablesToUpdate.clear();
+    this.updating.clear();
+    this.variablesThatHaveChanged.clear();
   }
   updateNextBatch() {
     if (this.variablesToUpdate.size === 0 && this.variablesThatHaveChanged.size > 0) {
@@ -811,6 +813,9 @@ const formatRegistry = new data.Registry(() => {
           case "iso":
             return data.dateTime(nrValue).toISOString();
           default:
+            if ((args || []).length > 1) {
+              return data.dateTime(nrValue).format(args.join(":"));
+            }
             return data.dateTime(nrValue).format(arg);
         }
       }
@@ -869,13 +874,10 @@ function formatQueryParameter(name, value) {
   return `var-${name}=${encodeURIComponentStrict(value)}`;
 }
 
-function sceneInterpolator(sceneObject, target, getVariables, scopedVars, format) {
+function sceneInterpolator(sceneObject, target, scopedVars, format) {
   if (!target) {
     return target != null ? target : "";
   }
-  if (getVariables(sceneObject) === EmptyVariableSet) {
-    return target;
-  }
   VARIABLE_REGEX.lastIndex = 0;
   return target.replace(VARIABLE_REGEX, (match, var1, var2, fmt2, var3, fieldPath, fmt3) => {
     const variableName = var1 || var2 || var3;
@@ -994,10 +996,10 @@ function getLayout(scene) {
   throw new Error("No layout found in scene tree");
 }
 function interpolate(sceneObject, value, scopedVars, format) {
-  if (!value || !sceneObject.variableDependency || sceneObject.variableDependency.getNames().size === 0) {
-    return value != null ? value : "";
+  if (value === "" || value == null) {
+    return "";
   }
-  return sceneInterpolator(sceneObject, value, getVariables, scopedVars, format);
+  return sceneInterpolator(sceneObject, value, scopedVars, format);
 }
 const sceneGraph = {
   getVariables,
@@ -2382,24 +2384,41 @@ class EmbeddedScene extends SceneObjectBase {
 }
 EmbeddedScene.Component = EmbeddedSceneRenderer;
 function EmbeddedSceneRenderer({ model }) {
-  const { body, isEditing, subMenu } = model.useState();
+  const { body, controls } = model.useState();
+  const styles = ui.useStyles2(getStyles$1);
   return /* @__PURE__ */ React__default["default"].createElement("div", {
-    style: {
+    className: styles.container
+  }, controls && /* @__PURE__ */ React__default["default"].createElement("div", {
+    className: styles.controls
+  }, controls.map((control) => /* @__PURE__ */ React__default["default"].createElement(control.Component, {
+    key: control.state.key,
+    model: control
+  }))), /* @__PURE__ */ React__default["default"].createElement("div", {
+    className: styles.body
+  }, /* @__PURE__ */ React__default["default"].createElement(body.Component, {
+    model: body
+  })));
+}
+function getStyles$1(theme) {
+  return {
+    container: css.css({
       flexGrow: 1,
       display: "flex",
       gap: "8px",
-      overflow: "auto",
       minHeight: "100%",
       flexDirection: "column"
-    }
-  }, subMenu && /* @__PURE__ */ React__default["default"].createElement(subMenu.Component, {
-    model: subMenu
-  }), /* @__PURE__ */ React__default["default"].createElement("div", {
-    style: { flexGrow: 1, display: "flex", gap: "8px", overflow: "auto" }
-  }, /* @__PURE__ */ React__default["default"].createElement(body.Component, {
-    model: body,
-    isEditing
-  })));
+    }),
+    body: css.css({
+      flexGrow: 1,
+      display: "flex",
+      gap: "8px"
+    }),
+    controls: css.css({
+      display: "flex",
+      gap: theme.spacing(1),
+      alignItems: "center"
+    })
+  };
 }
 
 function SceneDragHandle({ layoutKey, className }) {
@@ -2504,6 +2523,9 @@ class VizPanel extends SceneObjectBase {
       title: "Title",
       pluginId: "timeseries"
     }, state));
+    this._variableDependency = new VariableDependencyConfig(this, {
+      statePaths: ["title", "options", "fieldConfig"]
+    });
     this.onChangeTimeRange = (timeRange) => {
       const sceneTimeRange = sceneGraph.getTimeRange(this);
       sceneTimeRange.onTimeRangeChange({
@@ -2564,16 +2586,6 @@ class VizPanel extends SceneObjectBase {
   }
 }
 VizPanel.Component = VizPanelRenderer;
-VizPanel.Editor = VizPanelEditor;
-function VizPanelEditor({ model }) {
-  const { title } = model.useState();
-  return /* @__PURE__ */ React__default["default"].createElement(ui.Field, {
-    label: "Title"
-  }, /* @__PURE__ */ React__default["default"].createElement(ui.Input, {
-    defaultValue: title,
-    onBlur: (evt) => model.setState({ title: evt.currentTarget.value })
-  }));
-}
 
 var __defProp$2 = Object.defineProperty;
 var __defProps$2 = Object.defineProperties;
@@ -2745,7 +2757,7 @@ class SceneTimePicker extends SceneObjectBase {
 }
 SceneTimePicker.Component = SceneTimePickerRenderer;
 function SceneTimePickerRenderer({ model }) {
-  const { hidePicker } = model.useState();
+  const { hidePicker, isOnCanvas } = model.useState();
   const timeRange = sceneGraph.getTimeRange(model);
   const timeRangeState = timeRange.useState();
   if (hidePicker) {
@@ -2754,6 +2766,7 @@ function SceneTimePickerRenderer({ model }) {
   return /* @__PURE__ */ React__default["default"].createElement(ui.ToolbarButtonRow, {
     alignment: "right"
   }, /* @__PURE__ */ React__default["default"].createElement(ui.TimeRangePicker, {
+    isOnCanvas,
     value: timeRangeState.value,
     onChange: timeRange.onTimeRangeChange,
     timeZone: "browser",
@@ -2805,18 +2818,16 @@ SceneByFrameRepeater.Component = ({ model, isEditing }) => {
   });
 };
 
-class SceneSubMenu extends SceneObjectBase {
+class SceneControlsSpacer extends SceneObjectBase {
+  constructor() {
+    super({});
+  }
 }
-SceneSubMenu.Component = SceneSubMenuRenderer;
-function SceneSubMenuRenderer({ model }) {
-  const { children } = model.useState();
+SceneControlsSpacer.Component = (_props) => {
   return /* @__PURE__ */ React__default["default"].createElement("div", {
-    style: { display: "flex", gap: "16px" }
-  }, children.map((child) => /* @__PURE__ */ React__default["default"].createElement(child.Component, {
-    key: child.state.key,
-    model: child
-  })));
-}
+    style: { flexGrow: 1 }
+  });
+};
 
 class SceneFlexLayout extends SceneObjectBase {
   toggleDirection() {
@@ -3305,6 +3316,7 @@ exports.NestedScene = NestedScene;
 exports.QueryVariable = QueryVariable;
 exports.SceneByFrameRepeater = SceneByFrameRepeater;
 exports.SceneCanvasText = SceneCanvasText;
+exports.SceneControlsSpacer = SceneControlsSpacer;
 exports.SceneDataNode = SceneDataNode;
 exports.SceneDataTransformer = SceneDataTransformer;
 exports.SceneFlexLayout = SceneFlexLayout;
@@ -3314,7 +3326,6 @@ exports.SceneObjectBase = SceneObjectBase;
 exports.SceneObjectStateChangedEvent = SceneObjectStateChangedEvent;
 exports.SceneObjectUrlSyncConfig = SceneObjectUrlSyncConfig;
 exports.SceneQueryRunner = SceneQueryRunner;
-exports.SceneSubMenu = SceneSubMenu;
 exports.SceneTimePicker = SceneTimePicker;
 exports.SceneTimeRange = SceneTimeRange;
 exports.SceneToolbarButton = SceneToolbarButton;
@@ -3323,6 +3334,7 @@ exports.SceneVariableSet = SceneVariableSet;
 exports.SceneVariableValueChangedEvent = SceneVariableValueChangedEvent;
 exports.TestVariable = TestVariable;
 exports.UrlSyncManager = UrlSyncManager;
+exports.VariableDependencyConfig = VariableDependencyConfig;
 exports.VariableValueSelectors = VariableValueSelectors;
 exports.VizPanel = VizPanel;
 exports.formatRegistry = formatRegistry;