@grafana/scenes 6.37.0 → 6.39.0

package/dist/index.js

@@ -1058,7 +1058,7 @@ var __privateWrapper = (obj, member, setter, getter) => ({
     return __privateGet$2(obj, member, getter);
   }
 });
-var _profileInProgress, _profileStartTs, _trailAnimationFrameId, _recordedTrailingSpans, _longFrameDetector, _longFramesCount, _longFramesTotalTime, _visibilityChangeHandler;
+var _profileInProgress, _interactionInProgress, _profileStartTs, _trailAnimationFrameId, _recordedTrailingSpans, _longFrameDetector, _longFramesCount, _longFramesTotalTime, _visibilityChangeHandler, _onInteractionComplete;
 const POST_STORM_WINDOW = 2e3;
 const DEFAULT_LONG_FRAME_THRESHOLD = 30;
 const TAB_INACTIVE_THRESHOLD = 1e3;
@@ -1066,6 +1066,7 @@ class SceneRenderProfiler {
   constructor(queryController) {
     this.queryController = queryController;
     __privateAdd$2(this, _profileInProgress, null);
+    __privateAdd$2(this, _interactionInProgress, null);
     __privateAdd$2(this, _profileStartTs, null);
     __privateAdd$2(this, _trailAnimationFrameId, null);
     // Will keep measured lengths trailing frames
@@ -1075,6 +1076,7 @@ class SceneRenderProfiler {
     __privateAdd$2(this, _longFramesCount, 0);
     __privateAdd$2(this, _longFramesTotalTime, 0);
     __privateAdd$2(this, _visibilityChangeHandler, null);
+    __privateAdd$2(this, _onInteractionComplete, null);
     this.measureTrailingFrames = (measurementStartTs, lastFrameTime, profileStartTs) => {
       var _a, _b, _c, _d;
       const currentFrameTime = performance.now();
@@ -1191,10 +1193,14 @@ class SceneRenderProfiler {
     };
     __privateSet$2(this, _longFrameDetector, new LongFrameDetector());
     this.setupVisibilityChangeHandler();
+    __privateSet$2(this, _interactionInProgress, null);
   }
   setQueryController(queryController) {
     this.queryController = queryController;
   }
+  setInteractionCompleteHandler(handler) {
+    __privateSet$2(this, _onInteractionComplete, handler != null ? handler : null);
+  }
   setupVisibilityChangeHandler() {
     if (__privateGet$2(this, _visibilityChangeHandler)) {
       return;
@@ -1233,6 +1239,55 @@ class SceneRenderProfiler {
       this._startNewProfile(name);
     }
   }
+  startInteraction(interaction) {
+    if (__privateGet$2(this, _interactionInProgress)) {
+      writeSceneLog("profile", "Cancelled interaction:", __privateGet$2(this, _interactionInProgress));
+      __privateSet$2(this, _interactionInProgress, null);
+    }
+    __privateSet$2(this, _interactionInProgress, {
+      interaction,
+      startTs: performance.now()
+    });
+    writeSceneLog("SceneRenderProfiler", "Started interaction:", interaction);
+  }
+  stopInteraction() {
+    if (!__privateGet$2(this, _interactionInProgress)) {
+      return;
+    }
+    const endTs = performance.now();
+    const interactionDuration = endTs - __privateGet$2(this, _interactionInProgress).startTs;
+    const networkDuration = captureNetwork(__privateGet$2(this, _interactionInProgress).startTs, endTs);
+    writeSceneLog("SceneRenderProfiler", "Completed interaction:");
+    writeSceneLog("", `  \u251C\u2500 Total time: ${interactionDuration.toFixed(1)}ms`);
+    writeSceneLog("", `  \u251C\u2500 Network duration: ${networkDuration.toFixed(1)}ms`);
+    writeSceneLog("", `  \u251C\u2500 StartTs: ${__privateGet$2(this, _interactionInProgress).startTs.toFixed(1)}ms`);
+    writeSceneLog("", `  \u2514\u2500 EndTs: ${endTs.toFixed(1)}ms`);
+    if (__privateGet$2(this, _onInteractionComplete) && __privateGet$2(this, _profileInProgress)) {
+      __privateGet$2(this, _onInteractionComplete).call(this, {
+        origin: __privateGet$2(this, _interactionInProgress).interaction,
+        duration: interactionDuration,
+        networkDuration,
+        startTs: __privateGet$2(this, _interactionInProgress).startTs,
+        endTs
+      });
+    }
+    performance.mark(`${__privateGet$2(this, _interactionInProgress).interaction}_start`, {
+      startTime: __privateGet$2(this, _interactionInProgress).startTs
+    });
+    performance.mark(`${__privateGet$2(this, _interactionInProgress).interaction}_end`, {
+      startTime: endTs
+    });
+    performance.measure(
+      `Interaction_${__privateGet$2(this, _interactionInProgress).interaction}`,
+      `${__privateGet$2(this, _interactionInProgress).interaction}_start`,
+      `${__privateGet$2(this, _interactionInProgress).interaction}_end`
+    );
+    __privateSet$2(this, _interactionInProgress, null);
+  }
+  getCurrentInteraction() {
+    var _a, _b;
+    return (_b = (_a = __privateGet$2(this, _interactionInProgress)) == null ? void 0 : _a.interaction) != null ? _b : null;
+  }
   /**
    * Starts a new profile for performance measurement.
    *
@@ -1278,6 +1333,9 @@ class SceneRenderProfiler {
   }
   tryCompletingProfile() {
     var _a;
+    if (!__privateGet$2(this, _profileInProgress)) {
+      return;
+    }
     writeSceneLog("SceneRenderProfiler", "Trying to complete profile", __privateGet$2(this, _profileInProgress));
     if (((_a = this.queryController) == null ? void 0 : _a.runningQueriesCount()) === 0 && __privateGet$2(this, _profileInProgress)) {
       writeSceneLog("SceneRenderProfiler", "All queries completed, starting tail measurement");
@@ -1318,6 +1376,7 @@ class SceneRenderProfiler {
   }
 }
 _profileInProgress = new WeakMap();
+_interactionInProgress = new WeakMap();
 _profileStartTs = new WeakMap();
 _trailAnimationFrameId = new WeakMap();
 _recordedTrailingSpans = new WeakMap();
@@ -1325,6 +1384,7 @@ _longFrameDetector = new WeakMap();
 _longFramesCount = new WeakMap();
 _longFramesTotalTime = new WeakMap();
 _visibilityChangeHandler = new WeakMap();
+_onInteractionComplete = new WeakMap();
 function processRecordedSpans(spans) {
   for (let i = spans.length - 1; i >= 0; i--) {
     if (spans[i] > DEFAULT_LONG_FRAME_THRESHOLD) {
@@ -1374,6 +1434,9 @@ const FILTER_CHANGED_INTERACTION = "filter_changed";
 const FILTER_RESTORED_INTERACTION = "filter_restored";
 const VARIABLE_VALUE_CHANGED_INTERACTION = "variable_value_changed";
 const SCOPES_CHANGED_INTERACTION = "scopes_changed";
+const ADHOC_KEYS_DROPDOWN_INTERACTION = "adhoc_keys_dropdown";
+const ADHOC_VALUES_DROPDOWN_INTERACTION = "adhoc_values_dropdown";
+const GROUPBY_DIMENSIONS_INTERACTION = "groupby_dimensions";
 
 class SceneTimeRange extends SceneObjectBase {
   constructor(state = {}) {
@@ -3655,6 +3718,47 @@ const GroupByValueContainer = ({
   return /* @__PURE__ */ React__default.default.createElement("div", { className: css.cx(styles.multiValueContainer, !isApplicable && css.cx(disabledPill, strikethrough)) }, children);
 };
 
+function isInteractionTracker(s) {
+  return "isInteractionTracker" in s;
+}
+class SceneInteractionTracker extends SceneObjectBase {
+  constructor(state = {}, renderProfiler) {
+    super(state);
+    this.renderProfiler = renderProfiler;
+    this.isInteractionTracker = true;
+    if (renderProfiler) {
+      this.renderProfiler = renderProfiler;
+      this.renderProfiler.setInteractionCompleteHandler(state.onInteractionComplete);
+    }
+  }
+  startInteraction(name) {
+    var _a;
+    if (!this.state.enableInteractionTracking) {
+      return;
+    }
+    (_a = this.renderProfiler) == null ? void 0 : _a.startInteraction(name);
+  }
+  stopInteraction() {
+    var _a;
+    (_a = this.renderProfiler) == null ? void 0 : _a.stopInteraction();
+  }
+}
+
+function getInteractionTracker(sceneObject) {
+  let parent = sceneObject;
+  while (parent) {
+    if (parent.state.$behaviors) {
+      for (const behavior of parent.state.$behaviors) {
+        if (isInteractionTracker(behavior)) {
+          return behavior;
+        }
+      }
+    }
+    parent = parent.parent;
+  }
+  return void 0;
+}
+
 class GroupByVariable extends MultiValueVariable {
   constructor(initialState) {
     super({
@@ -3960,10 +4064,13 @@ function GroupByVariableRenderer({ model }) {
         setUncommittedValue(newValue);
       },
       onOpenMenu: async () => {
+        const profiler = getInteractionTracker(model);
+        profiler == null ? void 0 : profiler.startInteraction(GROUPBY_DIMENSIONS_INTERACTION);
         setIsFetchingOptions(true);
         await rxjs.lastValueFrom(model.validateAndUpdate());
         setIsFetchingOptions(false);
         setIsOptionsOpen(true);
+        profiler == null ? void 0 : profiler.stopInteraction();
       },
       onCloseMenu: () => {
         setIsOptionsOpen(false);
@@ -4013,10 +4120,13 @@ function GroupByVariableRenderer({ model }) {
         }
       },
       onOpenMenu: async () => {
+        const profiler = getInteractionTracker(model);
+        profiler == null ? void 0 : profiler.startInteraction(GROUPBY_DIMENSIONS_INTERACTION);
         setIsFetchingOptions(true);
         await rxjs.lastValueFrom(model.validateAndUpdate());
         setIsFetchingOptions(false);
         setIsOptionsOpen(true);
+        profiler == null ? void 0 : profiler.stopInteraction();
       },
       onCloseMenu: () => {
         setIsOptionsOpen(false);
@@ -4273,11 +4383,13 @@ function AdHocFilterRenderer({ filter, model }) {
       });
     }
   };
+  const operatorDefinition = OPERATORS.find((op) => filter.operator === op.value);
   const valueSelect = /* @__PURE__ */ React__default.default.createElement(
     ui.Select,
     {
       virtualized: true,
       allowCustomValue: (_b = model.state.allowCustomValue) != null ? _b : true,
+      createOptionPosition: (operatorDefinition == null ? void 0 : operatorDefinition.isRegex) ? "first" : "last",
       isValidNewOption: (inputValue) => inputValue.trim().length > 0,
       allowCreateWhileLoading: true,
       formatCreateLabel: (inputValue) => `Use custom value: ${inputValue}`,
@@ -4335,6 +4447,7 @@ function AdHocFilterRenderer({ filter, model }) {
       className: css.cx(styles.key, isKeysOpen ? styles.widthWhenOpen : void 0),
       width: "auto",
       allowCustomValue: (_c = model.state.allowCustomValue) != null ? _c : true,
+      createOptionPosition: (operatorDefinition == null ? void 0 : operatorDefinition.isRegex) ? "first" : "last",
       value: keyValue,
       placeholder: i18n.t(
         "grafana-scenes.variables.ad-hoc-filter-renderer.key-select.placeholder-select-label",
@@ -5170,17 +5283,28 @@ const AdHocCombobox = React.forwardRef(function AdHocCombobox2({ filter, model,
     handleOptionGroups(optionsSearcher(preventFiltering ? "" : inputValue))
   );
   if (allowCustomValue && filterInputType !== "operator" && inputValue) {
-    filteredDropDownItems.push({
+    const operatorDefinition = OPERATORS.find((op) => (filter == null ? void 0 : filter.operator) === op.value);
+    const customOptionValue = {
       value: inputValue.trim(),
       label: inputValue.trim(),
       isCustom: true
-    });
+    };
+    if (operatorDefinition == null ? void 0 : operatorDefinition.isRegex) {
+      filteredDropDownItems.unshift(customOptionValue);
+    } else {
+      filteredDropDownItems.push(customOptionValue);
+    }
   }
   const onAddCustomValue = model.state.onAddCustomValue;
   const maxOptionWidth = setupDropdownAccessibility(filteredDropDownItems, listRef, disabledIndicesRef);
   const handleFetchOptions = React.useCallback(
     async (inputType) => {
       var _a2;
+      const profiler = getInteractionTracker(model);
+      const interactionName = inputType === "key" ? ADHOC_KEYS_DROPDOWN_INTERACTION : ADHOC_VALUES_DROPDOWN_INTERACTION;
+      if (inputType !== "operator") {
+        profiler == null ? void 0 : profiler.startInteraction(interactionName);
+      }
       setOptionsError(false);
       setOptionsLoading(true);
       setOptions([]);
@@ -5194,6 +5318,7 @@ const AdHocCombobox = React.forwardRef(function AdHocCombobox2({ filter, model,
           options2 = await model._getValuesFor(filter);
         }
         if (filterInputTypeRef.current !== inputType) {
+          profiler == null ? void 0 : profiler.stopInteraction();
           return;
         }
         setOptions(options2);
@@ -5206,6 +5331,7 @@ const AdHocCombobox = React.forwardRef(function AdHocCombobox2({ filter, model,
         setOptionsError(true);
       }
       setOptionsLoading(false);
+      profiler == null ? void 0 : profiler.stopInteraction();
     },
     [filter, model]
   );
@@ -9859,6 +9985,7 @@ var index$1 = /*#__PURE__*/Object.freeze({
   ActWhenVariableChanged: ActWhenVariableChanged,
   CursorSync: CursorSync,
   LiveNowTimer: LiveNowTimer,
+  SceneInteractionTracker: SceneInteractionTracker,
   SceneQueryController: SceneQueryController
 });