@grafana/scenes 0.0.10 → 0.0.12

package/dist/index.js

@@ -421,53 +421,78 @@ SceneVariableValueChangedEvent.type = "scene-variable-changed-value";
 class SceneVariableSet extends SceneObjectBase {
   constructor() {
     super(...arguments);
-    this.variablesThatHaveChanged = /* @__PURE__ */ new Set();
-    this.variablesToUpdate = /* @__PURE__ */ new Set();
-    this.updating = /* @__PURE__ */ new Map();
-    this.onVariableValueChanged = (event) => {
-      const variableThatChanged = event.payload;
-      this.variablesThatHaveChanged.add(variableThatChanged);
-      if (this.updating.has(variableThatChanged)) {
-        return;
-      }
-      for (const otherVariable of this.state.variables) {
-        if (otherVariable.variableDependency) {
-          if (otherVariable.variableDependency.hasDependencyOn(variableThatChanged.state.name)) {
-            this.variablesToUpdate.add(otherVariable);
-          }
-        }
-      }
-      this.updateNextBatch();
-    };
+    this._variablesThatHaveChanged = /* @__PURE__ */ new Set();
+    this._variablesToUpdate = /* @__PURE__ */ new Set();
+    this._updating = /* @__PURE__ */ new Map();
   }
   getByName(name) {
     return this.state.variables.find((x) => x.state.name === name);
   }
   activate() {
     super.activate();
-    this._subs.add(this.subscribeToEvent(SceneVariableValueChangedEvent, this.onVariableValueChanged));
-    this.validateAndUpdateAll();
+    this._subs.add(
+      this.subscribeToEvent(SceneVariableValueChangedEvent, (event) => this.handleVariableValueChanged(event.payload))
+    );
+    this.checkForVariablesThatChangedWhileInactive();
+    for (const variable of this.state.variables) {
+      if (this.variableNeedsUpdate(variable)) {
+        this._variablesToUpdate.add(variable);
+      }
+    }
+    this.updateNextBatch();
+  }
+  checkForVariablesThatChangedWhileInactive() {
+    if (!this._validValuesWhenDeactivated) {
+      return;
+    }
+    for (const variable of this.state.variables) {
+      if (this._validValuesWhenDeactivated.has(variable)) {
+        const value = this._validValuesWhenDeactivated.get(variable);
+        if (!isVariableValueEqual(value, variable.getValue())) {
+          writeVariableTraceLog(variable, "Changed while in-active");
+          this.handleVariableValueChanged(variable);
+        }
+      }
+    }
+  }
+  variableNeedsUpdate(variable) {
+    if (!variable.validateAndUpdate) {
+      return false;
+    }
+    if (this._validValuesWhenDeactivated && this._validValuesWhenDeactivated.has(variable)) {
+      const value = this._validValuesWhenDeactivated.get(variable);
+      if (isVariableValueEqual(value, variable.getValue())) {
+        writeVariableTraceLog(variable, "Skipping updateAndValidate current value valid");
+        return false;
+      }
+    }
+    return true;
   }
   deactivate() {
     var _a;
     super.deactivate();
-    for (const update of this.updating.values()) {
+    for (const update of this._updating.values()) {
       (_a = update.subscription) == null ? void 0 : _a.unsubscribe();
     }
-    this.variablesToUpdate.clear();
-    this.updating.clear();
-    this.variablesThatHaveChanged.clear();
+    this._validValuesWhenDeactivated = /* @__PURE__ */ new Map();
+    for (const variable of this.state.variables) {
+      if (!this._variablesToUpdate.has(variable) || !this._updating.has(variable)) {
+        this._validValuesWhenDeactivated.set(variable, variable.getValue());
+      }
+    }
+    this._variablesToUpdate.clear();
+    this._updating.clear();
   }
   updateNextBatch() {
-    if (this.variablesToUpdate.size === 0 && this.variablesThatHaveChanged.size > 0) {
+    if (this._variablesToUpdate.size === 0 && this._variablesThatHaveChanged.size > 0) {
       this.notifyDependentSceneObjects();
       return;
     }
-    for (const variable of this.variablesToUpdate) {
+    for (const variable of this._variablesToUpdate) {
       if (!variable.validateAndUpdate) {
         throw new Error("Variable added to variablesToUpdate but does not have validateAndUpdate");
       }
-      if (this.updating.has(variable)) {
+      if (this._updating.has(variable)) {
         continue;
       }
       if (this.hasDependendencyInUpdateQueue(variable)) {
@@ -476,7 +501,8 @@ class SceneVariableSet extends SceneObjectBase {
       const variableToUpdate = {
         variable
       };
-      this.updating.set(variable, variableToUpdate);
+      this._updating.set(variable, variableToUpdate);
+      writeVariableTraceLog(variable, "updateAndValidate started");
       variableToUpdate.subscription = variable.validateAndUpdate().subscribe({
         next: () => this.validateAndUpdateCompleted(variable),
         error: (err) => this.handleVariableError(variable, err)
@@ -485,36 +511,45 @@ class SceneVariableSet extends SceneObjectBase {
   }
   validateAndUpdateCompleted(variable) {
     var _a;
-    const update = this.updating.get(variable);
+    const update = this._updating.get(variable);
     (_a = update == null ? void 0 : update.subscription) == null ? void 0 : _a.unsubscribe();
-    this.updating.delete(variable);
-    this.variablesToUpdate.delete(variable);
+    this._updating.delete(variable);
+    this._variablesToUpdate.delete(variable);
+    writeVariableTraceLog(variable, "updateAndValidate completed");
     this.updateNextBatch();
   }
   handleVariableError(variable, err) {
     var _a;
-    const update = this.updating.get(variable);
+    const update = this._updating.get(variable);
     (_a = update == null ? void 0 : update.subscription) == null ? void 0 : _a.unsubscribe();
-    this.updating.delete(variable);
-    this.variablesToUpdate.delete(variable);
+    this._updating.delete(variable);
+    this._variablesToUpdate.delete(variable);
     variable.setState({ loading: false, error: err });
+    writeVariableTraceLog(variable, "updateAndValidate error", err);
   }
   hasDependendencyInUpdateQueue(variable) {
     var _a;
     if (!variable.variableDependency) {
       return false;
     }
-    for (const otherVariable of this.variablesToUpdate.values()) {
+    for (const otherVariable of this._variablesToUpdate.values()) {
       if ((_a = variable.variableDependency) == null ? void 0 : _a.hasDependencyOn(otherVariable.state.name)) {
         return true;
       }
     }
     return false;
   }
-  validateAndUpdateAll() {
-    for (const variable of this.state.variables) {
-      if (variable.validateAndUpdate) {
-        this.variablesToUpdate.add(variable);
+  handleVariableValueChanged(variableThatChanged) {
+    this._variablesThatHaveChanged.add(variableThatChanged);
+    if (this._updating.has(variableThatChanged)) {
+      return;
+    }
+    for (const otherVariable of this.state.variables) {
+      if (otherVariable.variableDependency) {
+        if (otherVariable.variableDependency.hasDependencyOn(variableThatChanged.state.name)) {
+          writeVariableTraceLog(otherVariable, "Added to update quee, dependant variable value changed");
+          this._variablesToUpdate.add(otherVariable);
+        }
       }
     }
     this.updateNextBatch();
@@ -524,18 +559,29 @@ class SceneVariableSet extends SceneObjectBase {
       return;
     }
     this.traverseSceneAndNotify(this.parent);
-    this.variablesThatHaveChanged.clear();
+    this._variablesThatHaveChanged.clear();
   }
   traverseSceneAndNotify(sceneObject) {
     if (this === sceneObject) {
       return;
     }
     if (sceneObject.variableDependency) {
-      sceneObject.variableDependency.variableValuesChanged(this.variablesThatHaveChanged);
+      sceneObject.variableDependency.variableValuesChanged(this._variablesThatHaveChanged);
     }
     forEachSceneObjectInState(sceneObject.state, (child) => this.traverseSceneAndNotify(child));
   }
 }
+function writeVariableTraceLog(variable, message, err) {
+  if (window.grafanaLoggingSceneVariables) {
+    console.log(`Variable[${variable.state.name}]: ${message}`, err);
+  }
+}
+function isVariableValueEqual(a, b) {
+  if (a === b) {
+    return true;
+  }
+  return lodash.isEqual(a, b);
+}
 
 const EmptyVariableSet = new SceneVariableSet({ variables: [] });
 const EmptyDataNode = new SceneDataNode({
@@ -1174,7 +1220,9 @@ class SceneQueryRunner extends SceneObjectBase {
         }, 0);
       }
     } else {
-      this._containerWidth = width;
+      if (width > 0) {
+        this._containerWidth = width;
+      }
     }
   }
   runQueries() {
@@ -2442,10 +2490,10 @@ function VizPanelRenderer({ model }) {
   var _a;
   const theme = ui.useTheme2();
   const replace = React.useMemo(
-    () => (value, scoped) => sceneGraph.interpolate(model, value, scoped),
+    () => (value, scoped, format) => sceneGraph.interpolate(model, value, scoped, format),
     [model]
   );
-  const { title, options, fieldConfig, pluginId, pluginLoadError, $data, placement } = model.useState();
+  const { title, description, options, fieldConfig, pluginId, pluginLoadError, $data, placement } = model.useState();
   const [ref, { width, height }] = reactUse.useMeasure();
   const plugin = model.getPlugin();
   const { data: data$1 } = sceneGraph.getData(model).useState();
@@ -2454,7 +2502,7 @@ function VizPanelRenderer({ model }) {
   const dragHandle = /* @__PURE__ */ React__default["default"].createElement(SceneDragHandle, {
     layoutKey: parentLayout.state.key
   });
-  const titleInterpolated = sceneGraph.interpolate(model, title);
+  const titleInterpolated = replace(title, void 0, "text");
   const timeZone = sceneGraph.getTimeRange(model).state.timeZone;
   const dataWithOverrides = data.useFieldOverrides(plugin, fieldConfig, data$1, timeZone, theme, replace);
   if (pluginLoadError) {
@@ -2475,9 +2523,12 @@ function VizPanelRenderer({ model }) {
     style: { position: "absolute", width: "100%", height: "100%" }
   }, /* @__PURE__ */ React__default["default"].createElement(ui.PanelChrome, {
     title: titleInterpolated,
+    description: description ? () => replace(description) : "",
+    loadingState: dataWithOverrides == null ? void 0 : dataWithOverrides.state,
+    statusMessage: (dataWithOverrides == null ? void 0 : dataWithOverrides.error) ? dataWithOverrides.error.message : "",
     width,
     height,
-    leftItems: isDraggable ? [dragHandle] : void 0
+    titleItems: isDraggable ? [dragHandle] : []
   }, (innerWidth, innerHeight) => /* @__PURE__ */ React__default["default"].createElement(React__default["default"].Fragment, null, !dataWithOverrides && /* @__PURE__ */ React__default["default"].createElement("div", null, "No data..."), dataWithOverrides && /* @__PURE__ */ React__default["default"].createElement(ui.ErrorBoundaryAlert, {
     dependencies: [plugin, data$1]
   }, /* @__PURE__ */ React__default["default"].createElement(data.PluginContextProvider, {
@@ -2494,7 +2545,7 @@ function VizPanelRenderer({ model }) {
     width: innerWidth,
     height: innerHeight,
     renderCounter: 0,
-    replaceVariables: (str) => str,
+    replaceVariables: replace,
     onOptionsChange: model.onOptionsChange,
     onFieldConfigChange: model.onFieldConfigChange,
     onChangeTimeRange: model.onChangeTimeRange,
@@ -2843,9 +2894,17 @@ class SceneFlexLayout extends SceneObjectBase {
 SceneFlexLayout.Component = FlexLayoutRenderer;
 SceneFlexLayout.Editor = FlexLayoutEditor;
 function FlexLayoutRenderer({ model, isEditing }) {
-  const { direction = "row", children } = model.useState();
+  const { direction = "row", children, wrap } = model.useState();
+  const style = {
+    flexGrow: 1,
+    flexDirection: direction,
+    display: "flex",
+    gap: "8px",
+    flexWrap: wrap,
+    alignContent: "baseline"
+  };
   return /* @__PURE__ */ React__default["default"].createElement("div", {
-    style: { flexGrow: 1, flexDirection: direction, display: "flex", gap: "8px" }
+    style
   }, children.map((item) => /* @__PURE__ */ React__default["default"].createElement(FlexLayoutChildComponent, {
     key: item.state.key,
     item,