@grafana/scenes 0.0.16 → 0.0.18

package/dist/index.js

@@ -628,6 +628,9 @@ const formatRegistry = new data.Registry(() => {
       name: "JSON",
       description: "JSON stringify value",
       formatter: (value) => {
+        if (typeof value === "string") {
+          return value;
+        }
         return JSON.stringify(value);
       }
     },
@@ -880,7 +883,7 @@ function getSceneEditor(sceneObject) {
   throw new Error("No editor found in scene tree");
 }
 function getLayout(scene) {
-  if (scene.constructor.name === "SceneFlexLayout" || scene.constructor.name === "SceneGridLayout") {
+  if ("isDraggable" in scene) {
     return scene;
   }
   if (scene.parent) {
@@ -1234,7 +1237,7 @@ class SceneQueryRunner extends SceneObjectBase {
       request.intervalMs = norm.intervalMs;
       const runRequest = runtime.getRunRequest();
       writeSceneLog("SceneQueryRunner", "Starting runRequest", this.state.key);
-      this._querySub = runRequest(ds, request).pipe(getTransformationsStream(this, this.state.transformations)).subscribe({
+      this._querySub = runRequest(ds, request).pipe(getTransformationsStream(this, this.state.transformations, this.state.data)).subscribe({
         next: this.onDataReceived
       });
     } catch (err) {
@@ -1242,22 +1245,25 @@ class SceneQueryRunner extends SceneObjectBase {
     }
   }
 }
-const getTransformationsStream = (sceneObject, transformations) => (inputStream) => {
-  return inputStream.pipe(
-    rxjs.mergeMap((data$1) => {
-      if (!transformations || transformations.length === 0) {
-        return rxjs.of(data$1);
-      }
-      const ctx = {
-        interpolate: (value) => {
-          var _a;
-          return sceneGraph.interpolate(sceneObject, value, (_a = data$1 == null ? void 0 : data$1.request) == null ? void 0 : _a.scopedVars);
+function getTransformationsStream(sceneObject, transformations, lastResult) {
+  return (inputStream) => {
+    return inputStream.pipe(
+      rxjs.mergeMap((data$1) => {
+        const preProcessedData = data.preProcessPanelData(data$1, lastResult);
+        if (!transformations || transformations.length === 0) {
+          return rxjs.of(preProcessedData);
         }
-      };
-      return data.transformDataFrame(transformations, data$1.series, ctx).pipe(rxjs.map((series) => __spreadProps$5(__spreadValues$d({}, data$1), { series })));
-    })
-  );
-};
+        const ctx = {
+          interpolate: (value) => {
+            var _a;
+            return sceneGraph.interpolate(sceneObject, value, (_a = preProcessedData == null ? void 0 : preProcessedData.request) == null ? void 0 : _a.scopedVars);
+          }
+        };
+        return data.transformDataFrame(transformations, data$1.series, ctx).pipe(rxjs.map((series) => __spreadProps$5(__spreadValues$d({}, data$1), { series })));
+      })
+    );
+  };
+}
 
 class SceneDataTransformer extends SceneObjectBase {
   activate() {
@@ -1943,6 +1949,16 @@ const hasStandardVariableSupport = (datasource) => {
   const variableSupport = datasource.variables;
   return "toDataQuery" in variableSupport && Boolean(variableSupport.toDataQuery);
 };
+const hasCustomVariableSupport = (datasource) => {
+  if (!datasource.variables) {
+    return false;
+  }
+  if (datasource.variables.getType() !== data.VariableSupportType.Custom) {
+    return false;
+  }
+  const variableSupport = datasource.variables;
+  return "query" in variableSupport && "editor" in variableSupport && Boolean(variableSupport.query) && Boolean(variableSupport.editor);
+};
 
 var __defProp$9 = Object.defineProperty;
 var __defProps$4 = Object.defineProperties;
@@ -2016,6 +2032,27 @@ class LegacyQueryRunner {
     );
   }
 }
+class CustomQueryRunner {
+  constructor(datasource, _runRequest = runtime.getRunRequest()) {
+    this.datasource = datasource;
+    this._runRequest = _runRequest;
+  }
+  getTarget(variable) {
+    if (hasCustomVariableSupport(this.datasource)) {
+      return variable.state.query;
+    }
+    throw new Error("Couldn't create a target with supplied arguments.");
+  }
+  runRequest(_, request) {
+    if (!hasCustomVariableSupport(this.datasource)) {
+      return getEmptyMetricFindValueObservable();
+    }
+    if (!this.datasource.variables.query) {
+      return this._runRequest(this.datasource, request);
+    }
+    return this._runRequest(this.datasource, request, this.datasource.variables.query);
+  }
+}
 function getEmptyMetricFindValueObservable() {
   return rxjs.of({ state: data.LoadingState.Done, series: [], timeRange: data.getDefaultTimeRange() });
 }
@@ -2026,6 +2063,9 @@ function createQueryVariableRunnerFactory(datasource) {
   if (hasLegacyVariableSupport(datasource)) {
     return new LegacyQueryRunner(datasource);
   }
+  if (hasCustomVariableSupport(datasource)) {
+    return new CustomQueryRunner(datasource);
+  }
   throw new Error(`Couldn't create a query runner for datasource ${datasource.type}`);
 }
 let createQueryVariableRunner = createQueryVariableRunnerFactory;
@@ -2707,19 +2747,6 @@ function getStyles$1(theme) {
   };
 }
 
-function SceneDragHandle({ layoutKey, className }) {
-  return /* @__PURE__ */ React__default["default"].createElement("div", {
-    className: `${className} grid-drag-handle-${layoutKey}`,
-    style: {
-      width: "20px",
-      height: "20px",
-      cursor: "move"
-    }
-  }, /* @__PURE__ */ React__default["default"].createElement(ui.Icon, {
-    name: "draggabledots"
-  }));
-}
-
 function VizPanelRenderer({ model }) {
   var _a;
   const theme = ui.useTheme2();
@@ -2739,10 +2766,9 @@ function VizPanelRenderer({ model }) {
   const plugin = model.getPlugin();
   const { data: data$1 } = sceneGraph.getData(model).useState();
   const parentLayout = sceneGraph.getLayout(model);
-  const isDraggable = ((_a = parentLayout.state.placement) == null ? void 0 : _a.isDraggable) ? placement == null ? void 0 : placement.isDraggable : false;
-  const dragHandle = /* @__PURE__ */ React__default["default"].createElement(SceneDragHandle, {
-    layoutKey: parentLayout.state.key
-  });
+  const isDraggable = parentLayout.isDraggable() && ((_a = placement == null ? void 0 : placement.isDraggable) != null ? _a : true);
+  const dragClass = isDraggable && parentLayout.getDragClass ? parentLayout.getDragClass() : "";
+  const dragClassCancel = isDraggable && parentLayout.getDragClassCancel ? parentLayout.getDragClassCancel() : "";
   const titleInterpolated = model.interpolate(title, void 0, "text");
   const timeZone = sceneGraph.getTimeRange(model).state.timeZone;
   const dataWithOverrides = data.useFieldOverrides(plugin, fieldConfig, data$1, timeZone, theme, model.interpolate);
@@ -2759,7 +2785,7 @@ function VizPanelRenderer({ model }) {
   if ($data instanceof SceneQueryRunner) {
     $data.setContainerWidth(width);
   }
-  const titleItems = isDraggable ? [dragHandle] : [];
+  const titleItems = [];
   if (model.state.$timeRange) {
     titleItems.push(/* @__PURE__ */ React__default["default"].createElement(model.state.$timeRange.Component, {
       model: model.state.$timeRange
@@ -2777,7 +2803,9 @@ function VizPanelRenderer({ model }) {
     height,
     displayMode,
     hoverHeader,
-    titleItems: isDraggable ? [dragHandle] : []
+    titleItems,
+    dragClass,
+    dragClassCancel
   }, (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, {
@@ -3230,6 +3258,9 @@ class SceneFlexLayout extends SceneObjectBase {
       direction: this.state.direction === "row" ? "column" : "row"
     });
   }
+  isDraggable() {
+    return false;
+  }
 }
 SceneFlexLayout.Component = FlexLayoutRenderer;
 SceneFlexLayout.Editor = FlexLayoutEditor;
@@ -3319,6 +3350,19 @@ const GRID_CELL_HEIGHT = 30;
 const GRID_CELL_VMARGIN = 8;
 const GRID_COLUMN_COUNT = 24;
 
+function SceneDragHandle({ className, dragClass }) {
+  return /* @__PURE__ */ React__default["default"].createElement("div", {
+    className: `${className} ${dragClass}`,
+    style: {
+      width: "20px",
+      height: "20px",
+      cursor: "move"
+    }
+  }, /* @__PURE__ */ React__default["default"].createElement(ui.Icon, {
+    name: "draggabledots"
+  }));
+}
+
 var __defProp$2 = Object.defineProperty;
 var __defProps$1 = Object.defineProperties;
 var __getOwnPropDescs$1 = Object.getOwnPropertyDescriptors;
@@ -3357,13 +3401,16 @@ class SceneGridRow extends SceneObjectBase {
       if (!this.state.isCollapsible) {
         return;
       }
-      const layout = this.parent;
-      if (!layout || !(layout instanceof SceneGridLayout)) {
-        throw new Error("SceneGridRow must be a child of SceneGridLayout");
-      }
-      layout.toggleRow(this);
+      this.getGridLayout().toggleRow(this);
     };
   }
+  getGridLayout() {
+    const layout = this.parent;
+    if (!layout || !(layout instanceof SceneGridLayout)) {
+      throw new Error("SceneGridRow must be a child of SceneGridLayout");
+    }
+    return layout;
+  }
   getUrlState(state) {
     return { rowc: state.isCollapsed ? "1" : "0" };
   }
@@ -3378,9 +3425,8 @@ SceneGridRow.Component = SceneGridRowRenderer;
 function SceneGridRowRenderer({ model }) {
   const styles = ui.useStyles2(getSceneGridRowStyles);
   const { isCollapsible, isCollapsed, title, placement } = model.useState();
-  const layout = sceneGraph.getLayout(model);
   const dragHandle = /* @__PURE__ */ React__default["default"].createElement(SceneDragHandle, {
-    layoutKey: layout.state.key
+    dragClass: model.getGridLayout().getDragClass()
   });
   return /* @__PURE__ */ React__default["default"].createElement("div", {
     className: styles.row
@@ -3456,9 +3502,8 @@ var __spreadProps = (a, b) => __defProps(a, __getOwnPropDescs(b));
 class SceneGridLayout extends SceneObjectBase {
   constructor(state) {
     super(__spreadProps(__spreadValues$1({}, state), {
-      placement: __spreadValues$1({
-        isDraggable: true
-      }, state.placement),
+      isDraggable: true,
+      placement: state.placement,
       children: sortChildrenByPosition(state.children)
     }));
     this._skipOnLayoutChange = false;
@@ -3518,6 +3563,16 @@ class SceneGridLayout extends SceneObjectBase {
       this._skipOnLayoutChange = true;
     };
   }
+  isDraggable() {
+    var _a;
+    return (_a = this.state.isDraggable) != null ? _a : false;
+  }
+  getDragClass() {
+    return `grid-drag-handle-${this.state.key}`;
+  }
+  getDragClassCancel() {
+    return `grid-drag-cancel`;
+  }
   toggleRow(row) {
     var _a, _b, _c, _d, _e, _f, _g;
     const isCollapsed = row.state.isCollapsed;
@@ -3676,6 +3731,7 @@ function SceneGridLayoutRenderer({ model }) {
       cols: GRID_COLUMN_COUNT,
       rowHeight: GRID_CELL_HEIGHT,
       draggableHandle: `.grid-drag-handle-${model.state.key}`,
+      draggableCancel: ".grid-drag-cancel",
       layout,
       onDragStop: model.onDragStop,
       onResizeStop: model.onResizeStop,