@atlaskit/editor-plugin-interactivity 0.3.0 → 1.1.0

package/CHANGELOG.md

@@ -1,5 +1,21 @@
 # @atlaskit/editor-plugin-interactivity
 
+## 1.1.0
+
+### Minor Changes
+
+- [`ccd1b52723728`](https://bitbucket.org/atlassian/atlassian-frontend-monorepo/commits/ccd1b52723728) -
+  Report the slowest interactions of the session in the `editor interactivity` event — their group,
+  event type, latency, timing phases and a sanitised target — so a regression the histograms show
+  can be traced to what was interacted with. Behind the platform_editor_editor_interactivity_slowest
+  experiment.
+
+## 1.0.0
+
+### Patch Changes
+
+- Updated dependencies
+
 ## 0.3.0
 
 ### Minor Changes

package/README.md

@@ -31,6 +31,40 @@ interactions were slow, so this plugin keeps bucketed counts instead.
   bucket means zero. The boundaries are versioned by `schema`.
 - Snapshots are session-to-date, so a cohort query takes the highest `seq` per
   `interactivitySessionId` and then sums bucket counts.
+- `slowest` — up to five of the slowest interactions of the session, slowest first. See below.
+
+## The slowest interactions
+
+The histograms count how many interactions were slow. They cannot say what was interacted with, so
+a regression they show cannot be diagnosed from telemetry alone. Each record carries the group and
+the event type, the latency, the phases it divides into — input delay, processing, presentation
+delay — and a name for the target.
+
+Only interactions above 200 ms, the Google INP "good" threshold, are candidates, and `slowest` is
+left out of the event when none crossed it, which is the common case. That is also what keeps the
+cost down: a target is named only for the few interactions slow enough to be recorded, never for
+every one the browser reports.
+
+Records are kept per interaction, because an interaction's latency grows as later entries arrive:
+one that is already recorded is replaced by its slower self instead of taking a second place. Its
+attribution comes from the entry that measured it at its slowest, read as that entry arrives —
+`entry.target` is `null` once the element has left the document, so there is no reading it later.
+
+The target is a short path of tag names plus the first allow-listed attribute above it, such as
+`div[data-vc="editor"] > p > span`. Nothing in it is document content: a tag name comes from the
+schema, and the only attributes read are ones we put there ourselves. Ids, roles, class names, text
+and accessibility labels are all left out, and the path is bounded in both depth and length.
+
+An interaction that is not the editor's is recorded as `group: 'outsideEditor'`, so the records also
+answer whether the slow interactions of a session were the editor's at all. That group is not the
+`page` histogram: `page` counts the editor's interactions as well, `outsideEditor` counts only the
+ones that are not.
+
+Collecting them is its own experiment, `platform_editor_editor_interactivity_slowest`, read where a
+session decides whether to keep them rather than where the plugin is added to a preset: the plugin
+only exists when the experiment reporting the histograms is on, so the exposure lands on the
+sessions that already send the event, and the cost of the records stays separable from the cost of
+the event carrying them. Nothing is collected, named or sent when it is off.
 
 ## The editor groups
 

package/afm-cc/tsconfig.json

@@ -30,6 +30,9 @@
 		{
 			"path": "../../editor-plugin-editor-viewmode/afm-cc/tsconfig.json"
 		},
+		{
+			"path": "../../../platform/feature-experiments/afm-cc/tsconfig.json"
+		},
 		{
 			"path": "../../editor-common/afm-cc/tsconfig.json"
 		}

package/afm-products/tsconfig.json

@@ -30,6 +30,9 @@
 		{
 			"path": "../../editor-plugin-editor-viewmode/afm-products/tsconfig.json"
 		},
+		{
+			"path": "../../../platform/feature-experiments/afm-products/tsconfig.json"
+		},
 		{
 			"path": "../../editor-common/afm-products/tsconfig.json"
 		}

package/dist/cjs/collector/interaction-events.js

@@ -5,13 +5,6 @@ Object.defineProperty(exports, "__esModule", {
 });
 exports.INTERACTION_EVENT_TYPES = void 0;
 exports.interactionEventKind = interactionEventKind;
-/**
- * The editor group an interaction belongs to, which is also the field the event reports it in.
- *
- * `editorOther` is the remainder — an interaction the browser counts that is neither typing nor
- * pointing — so the three groups together cover whatever the browser calls an interaction.
- */
-
 /**
  * The events an interaction is made of, and the group they belong to. Both sides of the collector
  * read this, so counting and grouping cannot disagree.

package/dist/cjs/collector/interaction-tracker.js

@@ -13,9 +13,9 @@ function _createForOfIteratorHelper(r, e) { var t = "undefined" != typeof Symbol
 function _unsupportedIterableToArray(r, a) { if (r) { if ("string" == typeof r) return _arrayLikeToArray(r, a); var t = {}.toString.call(r).slice(8, -1); return "Object" === t && r.constructor && (t = r.constructor.name), "Map" === t || "Set" === t ? Array.from(r) : "Arguments" === t || /^(?:Ui|I)nt(?:8|16|32)(?:Clamped)?Array$/.test(t) ? _arrayLikeToArray(r, a) : void 0; } }
 function _arrayLikeToArray(r, a) { (null == a || a > r.length) && (a = r.length); for (var e = 0, n = Array(a); e < a; e++) n[e] = r[e]; return n; }
 /**
- * The Event Timing fields this package reads. `interactionId` is missing from the DOM
- * typings' `PerformanceEventTiming`, so it is declared here as optional, which also makes
- * a `PerformanceEntry` from `getEntries()` assignable without a cast.
+ * The Event Timing fields this package reads, declared optional so that a `PerformanceEntry` from
+ * `getEntries()` is assignable without a cast — `interactionId` is missing from the DOM typings'
+ * `PerformanceEventTiming` altogether, and the rest are only on it.
  */
 
 /**
@@ -122,6 +122,7 @@ var InteractionTracker = exports.InteractionTracker = /*#__PURE__*/function () {
         this.prune(this.interactions);
         return {
           type: 'new',
+          interactionId: interactionId,
           latencyMs: entry.duration,
           group: group
         };
@@ -133,6 +134,7 @@ var InteractionTracker = exports.InteractionTracker = /*#__PURE__*/function () {
       tracked.latencyMs = entry.duration;
       return {
         type: 'remeasured',
+        interactionId: interactionId,
         fromMs: fromMs,
         toMs: entry.duration,
         group: tracked.group

package/dist/cjs/collector/interactivity-collector.js

@@ -15,6 +15,8 @@ var _interactivitySession = require("./interactivity-session");
 var _bucketBoundaries = require("./bucket-boundaries");
 var _lifecycleObserver = require("./lifecycle-observer");
 var _snapshotScheduler = require("./snapshot-scheduler");
+function ownKeys(e, r) { var t = Object.keys(e); if (Object.getOwnPropertySymbols) { var o = Object.getOwnPropertySymbols(e); r && (o = o.filter(function (r) { return Object.getOwnPropertyDescriptor(e, r).enumerable; })), t.push.apply(t, o); } return t; }
+function _objectSpread(e) { for (var r = 1; r < arguments.length; r++) { var t = null != arguments[r] ? arguments[r] : {}; r % 2 ? ownKeys(Object(t), !0).forEach(function (r) { (0, _defineProperty2.default)(e, r, t[r]); }) : Object.getOwnPropertyDescriptors ? Object.defineProperties(e, Object.getOwnPropertyDescriptors(t)) : ownKeys(Object(t)).forEach(function (r) { Object.defineProperty(e, r, Object.getOwnPropertyDescriptor(t, r)); }); } return e; }
 function _createForOfIteratorHelper(r, e) { var t = "undefined" != typeof Symbol && r[Symbol.iterator] || r["@@iterator"]; if (!t) { if (Array.isArray(r) || (t = _unsupportedIterableToArray(r)) || e && r && "number" == typeof r.length) { t && (r = t); var _n = 0, F = function F() {}; return { s: F, n: function n() { return _n >= r.length ? { done: !0 } : { done: !1, value: r[_n++] }; }, e: function e(r) { throw r; }, f: F }; } throw new TypeError("Invalid attempt to iterate non-iterable instance.\nIn order to be iterable, non-array objects must have a [Symbol.iterator]() method."); } var o, a = !0, u = !1; return { s: function s() { t = t.call(r); }, n: function n() { var r = t.next(); return a = r.done, r; }, e: function e(r) { u = !0, o = r; }, f: function f() { try { a || null == t.return || t.return(); } finally { if (u) throw o; } } }; }
 function _unsupportedIterableToArray(r, a) { if (r) { if ("string" == typeof r) return _arrayLikeToArray(r, a); var t = {}.toString.call(r).slice(8, -1); return "Object" === t && r.constructor && (t = r.constructor.name), "Map" === t || "Set" === t ? Array.from(r) : "Arguments" === t || /^(?:Ui|I)nt(?:8|16|32)(?:Clamped)?Array$/.test(t) ? _arrayLikeToArray(r, a) : void 0; } }
 function _arrayLikeToArray(r, a) { (null == a || a > r.length) && (a = r.length); for (var e = 0, n = Array(a); e < a; e++) n[e] = r[e]; return n; }
@@ -259,27 +261,41 @@ var InteractivityCollector = exports.InteractivityCollector = /*#__PURE__*/funct
     value: function recordEntries(entries) {
       var _this$session = this.session,
         tracker = _this$session.tracker,
-        page = _this$session.page;
+        page = _this$session.page,
+        slowest = _this$session.slowest;
       var _iterator = _createForOfIteratorHelper(entries),
         _step;
       try {
         for (_iterator.s(); !(_step = _iterator.n()).done;) {
+          var _update$group;
           var entry = _step.value;
           var update = tracker.merge(entry);
           if (!update) {
             continue;
           }
+          var latencyMs = void 0;
           if (update.type === 'new') {
-            page.add(update.latencyMs);
+            latencyMs = update.latencyMs;
+            page.add(latencyMs);
             if (update.group) {
-              this.session[update.group].add(update.latencyMs);
+              this.session[update.group].add(latencyMs);
             }
           } else {
-            page.remeasure(update.fromMs, update.toMs);
+            latencyMs = update.toMs;
+            page.remeasure(update.fromMs, latencyMs);
             if (update.group) {
-              this.session[update.group].remeasure(update.fromMs, update.toMs);
+              this.session[update.group].remeasure(update.fromMs, latencyMs);
             }
           }
+
+          // An interaction the editor never reported an event for is not the editor's as far as we
+          // know.
+          slowest === null || slowest === void 0 || slowest.track({
+            entry: entry,
+            interactionId: update.interactionId,
+            latencyMs: latencyMs,
+            group: (_update$group = update.group) !== null && _update$group !== void 0 ? _update$group : 'outsideEditor'
+          });
           this.session.revision += 1;
         }
       } catch (err) {
@@ -291,6 +307,7 @@ var InteractivityCollector = exports.InteractivityCollector = /*#__PURE__*/funct
   }, {
     key: "takeSnapshot",
     value: function takeSnapshot(reason) {
+      var _session$slowest;
       if (this.stopped) {
         return;
       }
@@ -319,7 +336,8 @@ var InteractivityCollector = exports.InteractivityCollector = /*#__PURE__*/funct
       var now = performance.now();
       var hiddenMs = session.hiddenMs + (session.hiddenSince === undefined ? 0 : now - session.hiddenSince);
       var pageTotalCount = _interactionObserver.InteractionObserver.readPageInteractionCount() - session.interactionCountAtStart;
-      this.emit({
+      var slowest = (_session$slowest = session.slowest) === null || _session$slowest === void 0 ? void 0 : _session$slowest.snapshot();
+      this.emit(_objectSpread({
         schema: _bucketBoundaries.SCHEMA_VERSION,
         interactivitySessionId: session.id,
         objectId: session.objectId,
@@ -335,7 +353,9 @@ var InteractivityCollector = exports.InteractivityCollector = /*#__PURE__*/funct
         editorTyping: session.editorTyping.snapshot(),
         editorPointer: session.editorPointer.snapshot(),
         editorOther: session.editorOther.snapshot()
-      });
+      }, slowest && {
+        slowest: slowest
+      }));
     }
   }]);
 }();

package/dist/cjs/collector/interactivity-session.js

@@ -8,9 +8,11 @@ exports.InteractivitySession = void 0;
 var _createClass2 = _interopRequireDefault(require("@babel/runtime/helpers/createClass"));
 var _classCallCheck2 = _interopRequireDefault(require("@babel/runtime/helpers/classCallCheck"));
 var _defineProperty2 = _interopRequireDefault(require("@babel/runtime/helpers/defineProperty"));
+var _isExperimentEnabled = require("@atlaskit/platform-feature-experiments/is-experiment-enabled");
 var _interactionObserver = require("./interaction-observer");
 var _interactionTracker = require("./interaction-tracker");
 var _interactionGroup = require("./interaction-group");
+var _slowInteractionList = require("./slow-interaction-list");
 function createSessionId() {
   if (typeof crypto.randomUUID === 'function') {
     return crypto.randomUUID();
@@ -37,6 +39,7 @@ var InteractivitySession = exports.InteractivitySession = /*#__PURE__*/(0, _crea
   (0, _defineProperty2.default)(this, "editorTyping", new _interactionGroup.InteractionGroup());
   (0, _defineProperty2.default)(this, "editorPointer", new _interactionGroup.InteractionGroup());
   (0, _defineProperty2.default)(this, "editorOther", new _interactionGroup.InteractionGroup());
+  (0, _defineProperty2.default)(this, "slowest", (0, _isExperimentEnabled.isExperimentEnabled)('platform_editor_editor_interactivity_slowest') ? new _slowInteractionList.SlowInteractionList() : undefined);
   /** Increments per snapshot; a query takes the highest one per session. */
   (0, _defineProperty2.default)(this, "seq", 0);
   (0, _defineProperty2.default)(this, "hiddenMs", 0);

package/dist/cjs/collector/slow-interaction-list.js

@@ -0,0 +1,172 @@
+"use strict";
+
+var _interopRequireDefault = require("@babel/runtime/helpers/interopRequireDefault");
+Object.defineProperty(exports, "__esModule", {
+  value: true
+});
+exports.SlowInteractionList = void 0;
+var _classCallCheck2 = _interopRequireDefault(require("@babel/runtime/helpers/classCallCheck"));
+var _createClass2 = _interopRequireDefault(require("@babel/runtime/helpers/createClass"));
+var _defineProperty2 = _interopRequireDefault(require("@babel/runtime/helpers/defineProperty"));
+/** Fixed by the schema, so the event stays a bounded size. */
+var MAX_RECORDS = 5;
+
+/**
+ * The latency an interaction has to beat to be recorded. 200 ms is the Google INP "good" threshold,
+ * so anything below it is an interaction the user was not waiting for.
+ */
+var MIN_LATENCY_MS = 200;
+
+/**
+ * The attributes a target may be named by, all of them ours: `data-vc` for visual completion, the
+ * test ids for tests. Ids, roles, class names, text and accessibility labels are left out because
+ * they can carry what the user wrote.
+ */
+var ALLOWED_TARGET_ATTRIBUTES = ['data-vc', 'data-testid', 'data-test-id'];
+var MAX_TARGET_ELEMENTS = 4;
+var MAX_ATTRIBUTE_VALUE_LENGTH = 32;
+var MAX_TARGET_LENGTH = 120;
+
+/** The id identifies an interaction across the entries measuring it. It is not reported. */
+
+/** An interaction as the collector's two observers saw it. */
+/**
+ * The slowest interactions of one session, which is what the event's `slowest` records are.
+ *
+ * A record is built from the entry that measured the interaction, as that entry arrives:
+ * `entry.target` is `null` once the element has left the document.
+ */
+var SlowInteractionList = exports.SlowInteractionList = /*#__PURE__*/function () {
+  function SlowInteractionList() {
+    (0, _classCallCheck2.default)(this, SlowInteractionList);
+    /** Slowest first. */
+    (0, _defineProperty2.default)(this, "records", []);
+  }
+  return (0, _createClass2.default)(SlowInteractionList, [{
+    key: "track",
+    value: function track(interaction) {
+      var interactionId = interaction.interactionId,
+        latencyMs = interaction.latencyMs;
+      var previousIndex = this.records.findIndex(function (existing) {
+        return existing.interactionId === interactionId;
+      });
+      var toBeatMs = MIN_LATENCY_MS;
+      if (previousIndex !== -1) {
+        // An interaction's latency grows as later entries arrive, and it replaces itself rather
+        // than taking a second place.
+        toBeatMs = this.records[previousIndex].durationMs;
+      } else if (this.records.length === MAX_RECORDS) {
+        toBeatMs = this.records[MAX_RECORDS - 1].durationMs;
+      }
+      if (latencyMs <= toBeatMs) {
+        return;
+      }
+
+      // Read only once the interaction has earned a place: naming its target walks the DOM, and
+      // this runs while the page is already slow.
+      var record = this.toRecord(interaction);
+      if (previousIndex === -1) {
+        this.records.push(record);
+      } else {
+        this.records[previousIndex] = record;
+      }
+      this.records.sort(function (a, b) {
+        return b.durationMs - a.durationMs;
+      });
+      this.records.splice(MAX_RECORDS);
+    }
+
+    /** @returns the records, slowest first, or nothing when no interaction was slow enough. */
+  }, {
+    key: "snapshot",
+    value: function snapshot() {
+      if (this.records.length === 0) {
+        return undefined;
+      }
+      return this.records.map(function (record) {
+        return {
+          group: record.group,
+          name: record.name,
+          durationMs: record.durationMs,
+          inputDelayMs: record.inputDelayMs,
+          processingMs: record.processingMs,
+          presentationDelayMs: record.presentationDelayMs,
+          target: record.target
+        };
+      });
+    }
+
+    /**
+     * The phases are reported together or not at all: a browser that reports one reports all three,
+     * and zeroes standing in for values we never had would read as an interaction that spent no time
+     * anywhere. Each is clamped, because they come from timestamps the browser coarsens
+     * independently, so a phase can come out just below zero.
+     */
+  }, {
+    key: "toRecord",
+    value: function toRecord(_ref) {
+      var entry = _ref.entry,
+        group = _ref.group,
+        interactionId = _ref.interactionId,
+        latencyMs = _ref.latencyMs;
+      var processingStart = entry.processingStart,
+        processingEnd = entry.processingEnd,
+        startTime = entry.startTime;
+      var measured = typeof processingStart === 'number' && typeof processingEnd === 'number';
+      var phaseMs = function phaseMs(durationMs) {
+        return Math.max(0, Math.round(durationMs));
+      };
+      return {
+        interactionId: interactionId,
+        group: group,
+        name: entry.name,
+        durationMs: Math.round(latencyMs),
+        inputDelayMs: measured ? phaseMs(processingStart - startTime) : undefined,
+        processingMs: measured ? phaseMs(processingEnd - processingStart) : undefined,
+        presentationDelayMs: measured ? phaseMs(startTime + latencyMs - processingEnd) : undefined,
+        target: this.describeTarget(entry.target)
+      };
+    }
+
+    /**
+     * Names the element an interaction happened on — `div[data-vc="x"] > p > span`, outermost first.
+     * The path climbs until an element carries an allow-listed attribute, because that is what says
+     * which part of the page this was.
+     */
+  }, {
+    key: "describeTarget",
+    value: function describeTarget(node) {
+      var _node$parentElement;
+      // An event's target can be a text node, and the element around it is the answer for it.
+      var element = node instanceof Element ? node : (_node$parentElement = node === null || node === void 0 ? void 0 : node.parentElement) !== null && _node$parentElement !== void 0 ? _node$parentElement : null;
+      var path = [];
+      for (var climbed = 0; element && climbed < MAX_TARGET_ELEMENTS; climbed += 1) {
+        var attribute = this.identifyingAttribute(element);
+        path.unshift("".concat(element.localName).concat(attribute !== null && attribute !== void 0 ? attribute : ''));
+        if (attribute) {
+          break;
+        }
+        element = element.parentElement;
+      }
+      if (path.length === 0) {
+        return undefined;
+      }
+      return path.join(' > ').slice(0, MAX_TARGET_LENGTH);
+    }
+  }, {
+    key: "identifyingAttribute",
+    value: function identifyingAttribute(element) {
+      for (var _i = 0, _ALLOWED_TARGET_ATTRI = ALLOWED_TARGET_ATTRIBUTES; _i < _ALLOWED_TARGET_ATTRI.length; _i++) {
+        var attribute = _ALLOWED_TARGET_ATTRI[_i];
+        var value = element.getAttribute(attribute);
+        if (value) {
+          // Encoded and cut: a value we did not write cannot bring quotes or a paragraph of
+          // text into the event.
+          var safeValue = encodeURIComponent(value).slice(0, MAX_ATTRIBUTE_VALUE_LENGTH);
+          return "[".concat(attribute, "=\"").concat(safeValue, "\"]");
+        }
+      }
+      return undefined;
+    }
+  }]);
+}();

package/dist/es2019/collector/interaction-events.js

@@ -1,10 +1,3 @@
-/**
- * The editor group an interaction belongs to, which is also the field the event reports it in.
- *
- * `editorOther` is the remainder — an interaction the browser counts that is neither typing nor
- * pointing — so the three groups together cover whatever the browser calls an interaction.
- */
-
 /**
  * The events an interaction is made of, and the group they belong to. Both sides of the collector
  * read this, so counting and grouping cannot disagree.

package/dist/es2019/collector/interaction-tracker.js

@@ -2,9 +2,9 @@ import _defineProperty from "@babel/runtime/helpers/defineProperty";
 import { interactionEventKind } from './interaction-events';
 
 /**
- * The Event Timing fields this package reads. `interactionId` is missing from the DOM
- * typings' `PerformanceEventTiming`, so it is declared here as optional, which also makes
- * a `PerformanceEntry` from `getEntries()` assignable without a cast.
+ * The Event Timing fields this package reads, declared optional so that a `PerformanceEntry` from
+ * `getEntries()` is assignable without a cast — `interactionId` is missing from the DOM typings'
+ * `PerformanceEventTiming` altogether, and the rest are only on it.
  */
 
 /**
@@ -107,6 +107,7 @@ export class InteractionTracker {
       this.prune(this.interactions);
       return {
         type: 'new',
+        interactionId,
         latencyMs: entry.duration,
         group
       };
@@ -118,6 +119,7 @@ export class InteractionTracker {
     tracked.latencyMs = entry.duration;
     return {
       type: 'remeasured',
+      interactionId,
       fromMs,
       toMs: entry.duration,
       group: tracked.group

package/dist/es2019/collector/interactivity-collector.js

@@ -203,28 +203,43 @@ export class InteractivityCollector {
   recordEntries(entries) {
     const {
       tracker,
-      page
+      page,
+      slowest
     } = this.session;
     for (const entry of entries) {
+      var _update$group;
       const update = tracker.merge(entry);
       if (!update) {
         continue;
       }
+      let latencyMs;
       if (update.type === 'new') {
-        page.add(update.latencyMs);
+        latencyMs = update.latencyMs;
+        page.add(latencyMs);
         if (update.group) {
-          this.session[update.group].add(update.latencyMs);
+          this.session[update.group].add(latencyMs);
         }
       } else {
-        page.remeasure(update.fromMs, update.toMs);
+        latencyMs = update.toMs;
+        page.remeasure(update.fromMs, latencyMs);
         if (update.group) {
-          this.session[update.group].remeasure(update.fromMs, update.toMs);
+          this.session[update.group].remeasure(update.fromMs, latencyMs);
         }
       }
+
+      // An interaction the editor never reported an event for is not the editor's as far as we
+      // know.
+      slowest === null || slowest === void 0 ? void 0 : slowest.track({
+        entry,
+        interactionId: update.interactionId,
+        latencyMs,
+        group: (_update$group = update.group) !== null && _update$group !== void 0 ? _update$group : 'outsideEditor'
+      });
       this.session.revision += 1;
     }
   }
   takeSnapshot(reason) {
+    var _session$slowest;
     if (this.stopped) {
       return;
     }
@@ -253,6 +268,7 @@ export class InteractivityCollector {
     const now = performance.now();
     const hiddenMs = session.hiddenMs + (session.hiddenSince === undefined ? 0 : now - session.hiddenSince);
     const pageTotalCount = InteractionObserver.readPageInteractionCount() - session.interactionCountAtStart;
+    const slowest = (_session$slowest = session.slowest) === null || _session$slowest === void 0 ? void 0 : _session$slowest.snapshot();
     this.emit({
       schema: SCHEMA_VERSION,
       interactivitySessionId: session.id,
@@ -268,7 +284,10 @@ export class InteractivityCollector {
       page: session.page.snapshot(pageTotalCount),
       editorTyping: session.editorTyping.snapshot(),
       editorPointer: session.editorPointer.snapshot(),
-      editorOther: session.editorOther.snapshot()
+      editorOther: session.editorOther.snapshot(),
+      ...(slowest && {
+        slowest
+      })
     });
   }
 }

package/dist/es2019/collector/interactivity-session.js

@@ -1,7 +1,9 @@
 import _defineProperty from "@babel/runtime/helpers/defineProperty";
+import { isExperimentEnabled } from '@atlaskit/platform-feature-experiments/is-experiment-enabled';
 import { InteractionObserver } from './interaction-observer';
 import { InteractionTracker } from './interaction-tracker';
 import { InteractionGroup } from './interaction-group';
+import { SlowInteractionList } from './slow-interaction-list';
 function createSessionId() {
   if (typeof crypto.randomUUID === 'function') {
     return crypto.randomUUID();
@@ -26,6 +28,7 @@ export class InteractivitySession {
     _defineProperty(this, "editorTyping", new InteractionGroup());
     _defineProperty(this, "editorPointer", new InteractionGroup());
     _defineProperty(this, "editorOther", new InteractionGroup());
+    _defineProperty(this, "slowest", isExperimentEnabled('platform_editor_editor_interactivity_slowest') ? new SlowInteractionList() : undefined);
     /** Increments per snapshot; a query takes the highest one per session. */
     _defineProperty(this, "seq", 0);
     _defineProperty(this, "hiddenMs", 0);

package/dist/es2019/collector/slow-interaction-list.js

@@ -0,0 +1,148 @@
+import _defineProperty from "@babel/runtime/helpers/defineProperty";
+/** Fixed by the schema, so the event stays a bounded size. */
+const MAX_RECORDS = 5;
+
+/**
+ * The latency an interaction has to beat to be recorded. 200 ms is the Google INP "good" threshold,
+ * so anything below it is an interaction the user was not waiting for.
+ */
+const MIN_LATENCY_MS = 200;
+
+/**
+ * The attributes a target may be named by, all of them ours: `data-vc` for visual completion, the
+ * test ids for tests. Ids, roles, class names, text and accessibility labels are left out because
+ * they can carry what the user wrote.
+ */
+const ALLOWED_TARGET_ATTRIBUTES = ['data-vc', 'data-testid', 'data-test-id'];
+const MAX_TARGET_ELEMENTS = 4;
+const MAX_ATTRIBUTE_VALUE_LENGTH = 32;
+const MAX_TARGET_LENGTH = 120;
+
+/** The id identifies an interaction across the entries measuring it. It is not reported. */
+
+/** An interaction as the collector's two observers saw it. */
+
+/**
+ * The slowest interactions of one session, which is what the event's `slowest` records are.
+ *
+ * A record is built from the entry that measured the interaction, as that entry arrives:
+ * `entry.target` is `null` once the element has left the document.
+ */
+export class SlowInteractionList {
+  constructor() {
+    /** Slowest first. */
+    _defineProperty(this, "records", []);
+  }
+  track(interaction) {
+    const {
+      interactionId,
+      latencyMs
+    } = interaction;
+    const previousIndex = this.records.findIndex(existing => existing.interactionId === interactionId);
+    let toBeatMs = MIN_LATENCY_MS;
+    if (previousIndex !== -1) {
+      // An interaction's latency grows as later entries arrive, and it replaces itself rather
+      // than taking a second place.
+      toBeatMs = this.records[previousIndex].durationMs;
+    } else if (this.records.length === MAX_RECORDS) {
+      toBeatMs = this.records[MAX_RECORDS - 1].durationMs;
+    }
+    if (latencyMs <= toBeatMs) {
+      return;
+    }
+
+    // Read only once the interaction has earned a place: naming its target walks the DOM, and
+    // this runs while the page is already slow.
+    const record = this.toRecord(interaction);
+    if (previousIndex === -1) {
+      this.records.push(record);
+    } else {
+      this.records[previousIndex] = record;
+    }
+    this.records.sort((a, b) => b.durationMs - a.durationMs);
+    this.records.splice(MAX_RECORDS);
+  }
+
+  /** @returns the records, slowest first, or nothing when no interaction was slow enough. */
+  snapshot() {
+    if (this.records.length === 0) {
+      return undefined;
+    }
+    return this.records.map(record => ({
+      group: record.group,
+      name: record.name,
+      durationMs: record.durationMs,
+      inputDelayMs: record.inputDelayMs,
+      processingMs: record.processingMs,
+      presentationDelayMs: record.presentationDelayMs,
+      target: record.target
+    }));
+  }
+
+  /**
+   * The phases are reported together or not at all: a browser that reports one reports all three,
+   * and zeroes standing in for values we never had would read as an interaction that spent no time
+   * anywhere. Each is clamped, because they come from timestamps the browser coarsens
+   * independently, so a phase can come out just below zero.
+   */
+  toRecord({
+    entry,
+    group,
+    interactionId,
+    latencyMs
+  }) {
+    const {
+      processingStart,
+      processingEnd,
+      startTime
+    } = entry;
+    const measured = typeof processingStart === 'number' && typeof processingEnd === 'number';
+    const phaseMs = durationMs => Math.max(0, Math.round(durationMs));
+    return {
+      interactionId,
+      group,
+      name: entry.name,
+      durationMs: Math.round(latencyMs),
+      inputDelayMs: measured ? phaseMs(processingStart - startTime) : undefined,
+      processingMs: measured ? phaseMs(processingEnd - processingStart) : undefined,
+      presentationDelayMs: measured ? phaseMs(startTime + latencyMs - processingEnd) : undefined,
+      target: this.describeTarget(entry.target)
+    };
+  }
+
+  /**
+   * Names the element an interaction happened on — `div[data-vc="x"] > p > span`, outermost first.
+   * The path climbs until an element carries an allow-listed attribute, because that is what says
+   * which part of the page this was.
+   */
+  describeTarget(node) {
+    var _node$parentElement;
+    // An event's target can be a text node, and the element around it is the answer for it.
+    let element = node instanceof Element ? node : (_node$parentElement = node === null || node === void 0 ? void 0 : node.parentElement) !== null && _node$parentElement !== void 0 ? _node$parentElement : null;
+    const path = [];
+    for (let climbed = 0; element && climbed < MAX_TARGET_ELEMENTS; climbed += 1) {
+      const attribute = this.identifyingAttribute(element);
+      path.unshift(`${element.localName}${attribute !== null && attribute !== void 0 ? attribute : ''}`);
+      if (attribute) {
+        break;
+      }
+      element = element.parentElement;
+    }
+    if (path.length === 0) {
+      return undefined;
+    }
+    return path.join(' > ').slice(0, MAX_TARGET_LENGTH);
+  }
+  identifyingAttribute(element) {
+    for (const attribute of ALLOWED_TARGET_ATTRIBUTES) {
+      const value = element.getAttribute(attribute);
+      if (value) {
+        // Encoded and cut: a value we did not write cannot bring quotes or a paragraph of
+        // text into the event.
+        const safeValue = encodeURIComponent(value).slice(0, MAX_ATTRIBUTE_VALUE_LENGTH);
+        return `[${attribute}="${safeValue}"]`;
+      }
+    }
+    return undefined;
+  }
+}

package/dist/esm/collector/interaction-events.js

@@ -1,10 +1,3 @@
-/**
- * The editor group an interaction belongs to, which is also the field the event reports it in.
- *
- * `editorOther` is the remainder — an interaction the browser counts that is neither typing nor
- * pointing — so the three groups together cover whatever the browser calls an interaction.
- */
-
 /**
  * The events an interaction is made of, and the group they belong to. Both sides of the collector
  * read this, so counting and grouping cannot disagree.

package/dist/esm/collector/interaction-tracker.js

@@ -7,9 +7,9 @@ function _arrayLikeToArray(r, a) { (null == a || a > r.length) && (a = r.length)
 import { interactionEventKind } from './interaction-events';
 
 /**
- * The Event Timing fields this package reads. `interactionId` is missing from the DOM
- * typings' `PerformanceEventTiming`, so it is declared here as optional, which also makes
- * a `PerformanceEntry` from `getEntries()` assignable without a cast.
+ * The Event Timing fields this package reads, declared optional so that a `PerformanceEntry` from
+ * `getEntries()` is assignable without a cast — `interactionId` is missing from the DOM typings'
+ * `PerformanceEventTiming` altogether, and the rest are only on it.
  */
 
 /**
@@ -116,6 +116,7 @@ export var InteractionTracker = /*#__PURE__*/function () {
         this.prune(this.interactions);
         return {
           type: 'new',
+          interactionId: interactionId,
           latencyMs: entry.duration,
           group: group
         };
@@ -127,6 +128,7 @@ export var InteractionTracker = /*#__PURE__*/function () {
       tracked.latencyMs = entry.duration;
       return {
         type: 'remeasured',
+        interactionId: interactionId,
         fromMs: fromMs,
         toMs: entry.duration,
         group: tracked.group

package/dist/esm/collector/interactivity-collector.js

@@ -1,6 +1,8 @@
 import _classCallCheck from "@babel/runtime/helpers/classCallCheck";
 import _createClass from "@babel/runtime/helpers/createClass";
 import _defineProperty from "@babel/runtime/helpers/defineProperty";
+function ownKeys(e, r) { var t = Object.keys(e); if (Object.getOwnPropertySymbols) { var o = Object.getOwnPropertySymbols(e); r && (o = o.filter(function (r) { return Object.getOwnPropertyDescriptor(e, r).enumerable; })), t.push.apply(t, o); } return t; }
+function _objectSpread(e) { for (var r = 1; r < arguments.length; r++) { var t = null != arguments[r] ? arguments[r] : {}; r % 2 ? ownKeys(Object(t), !0).forEach(function (r) { _defineProperty(e, r, t[r]); }) : Object.getOwnPropertyDescriptors ? Object.defineProperties(e, Object.getOwnPropertyDescriptors(t)) : ownKeys(Object(t)).forEach(function (r) { Object.defineProperty(e, r, Object.getOwnPropertyDescriptor(t, r)); }); } return e; }
 function _createForOfIteratorHelper(r, e) { var t = "undefined" != typeof Symbol && r[Symbol.iterator] || r["@@iterator"]; if (!t) { if (Array.isArray(r) || (t = _unsupportedIterableToArray(r)) || e && r && "number" == typeof r.length) { t && (r = t); var _n = 0, F = function F() {}; return { s: F, n: function n() { return _n >= r.length ? { done: !0 } : { done: !1, value: r[_n++] }; }, e: function e(r) { throw r; }, f: F }; } throw new TypeError("Invalid attempt to iterate non-iterable instance.\nIn order to be iterable, non-array objects must have a [Symbol.iterator]() method."); } var o, a = !0, u = !1; return { s: function s() { t = t.call(r); }, n: function n() { var r = t.next(); return a = r.done, r; }, e: function e(r) { u = !0, o = r; }, f: function f() { try { a || null == t.return || t.return(); } finally { if (u) throw o; } } }; }
 function _unsupportedIterableToArray(r, a) { if (r) { if ("string" == typeof r) return _arrayLikeToArray(r, a); var t = {}.toString.call(r).slice(8, -1); return "Object" === t && r.constructor && (t = r.constructor.name), "Map" === t || "Set" === t ? Array.from(r) : "Arguments" === t || /^(?:Ui|I)nt(?:8|16|32)(?:Clamped)?Array$/.test(t) ? _arrayLikeToArray(r, a) : void 0; } }
 function _arrayLikeToArray(r, a) { (null == a || a > r.length) && (a = r.length); for (var e = 0, n = Array(a); e < a; e++) n[e] = r[e]; return n; }
@@ -252,27 +254,41 @@ export var InteractivityCollector = /*#__PURE__*/function () {
     value: function recordEntries(entries) {
       var _this$session = this.session,
         tracker = _this$session.tracker,
-        page = _this$session.page;
+        page = _this$session.page,
+        slowest = _this$session.slowest;
       var _iterator = _createForOfIteratorHelper(entries),
         _step;
       try {
         for (_iterator.s(); !(_step = _iterator.n()).done;) {
+          var _update$group;
           var entry = _step.value;
           var update = tracker.merge(entry);
           if (!update) {
             continue;
           }
+          var latencyMs = void 0;
           if (update.type === 'new') {
-            page.add(update.latencyMs);
+            latencyMs = update.latencyMs;
+            page.add(latencyMs);
             if (update.group) {
-              this.session[update.group].add(update.latencyMs);
+              this.session[update.group].add(latencyMs);
             }
           } else {
-            page.remeasure(update.fromMs, update.toMs);
+            latencyMs = update.toMs;
+            page.remeasure(update.fromMs, latencyMs);
             if (update.group) {
-              this.session[update.group].remeasure(update.fromMs, update.toMs);
+              this.session[update.group].remeasure(update.fromMs, latencyMs);
             }
           }
+
+          // An interaction the editor never reported an event for is not the editor's as far as we
+          // know.
+          slowest === null || slowest === void 0 || slowest.track({
+            entry: entry,
+            interactionId: update.interactionId,
+            latencyMs: latencyMs,
+            group: (_update$group = update.group) !== null && _update$group !== void 0 ? _update$group : 'outsideEditor'
+          });
           this.session.revision += 1;
         }
       } catch (err) {
@@ -284,6 +300,7 @@ export var InteractivityCollector = /*#__PURE__*/function () {
   }, {
     key: "takeSnapshot",
     value: function takeSnapshot(reason) {
+      var _session$slowest;
       if (this.stopped) {
         return;
       }
@@ -312,7 +329,8 @@ export var InteractivityCollector = /*#__PURE__*/function () {
       var now = performance.now();
       var hiddenMs = session.hiddenMs + (session.hiddenSince === undefined ? 0 : now - session.hiddenSince);
       var pageTotalCount = InteractionObserver.readPageInteractionCount() - session.interactionCountAtStart;
-      this.emit({
+      var slowest = (_session$slowest = session.slowest) === null || _session$slowest === void 0 ? void 0 : _session$slowest.snapshot();
+      this.emit(_objectSpread({
         schema: SCHEMA_VERSION,
         interactivitySessionId: session.id,
         objectId: session.objectId,
@@ -328,7 +346,9 @@ export var InteractivityCollector = /*#__PURE__*/function () {
         editorTyping: session.editorTyping.snapshot(),
         editorPointer: session.editorPointer.snapshot(),
         editorOther: session.editorOther.snapshot()
-      });
+      }, slowest && {
+        slowest: slowest
+      }));
     }
   }]);
 }();

package/dist/esm/collector/interactivity-session.js

@@ -1,9 +1,11 @@
 import _createClass from "@babel/runtime/helpers/createClass";
 import _classCallCheck from "@babel/runtime/helpers/classCallCheck";
 import _defineProperty from "@babel/runtime/helpers/defineProperty";
+import { isExperimentEnabled } from '@atlaskit/platform-feature-experiments/is-experiment-enabled';
 import { InteractionObserver } from './interaction-observer';
 import { InteractionTracker } from './interaction-tracker';
 import { InteractionGroup } from './interaction-group';
+import { SlowInteractionList } from './slow-interaction-list';
 function createSessionId() {
   if (typeof crypto.randomUUID === 'function') {
     return crypto.randomUUID();
@@ -30,6 +32,7 @@ export var InteractivitySession = /*#__PURE__*/_createClass(function Interactivi
   _defineProperty(this, "editorTyping", new InteractionGroup());
   _defineProperty(this, "editorPointer", new InteractionGroup());
   _defineProperty(this, "editorOther", new InteractionGroup());
+  _defineProperty(this, "slowest", isExperimentEnabled('platform_editor_editor_interactivity_slowest') ? new SlowInteractionList() : undefined);
   /** Increments per snapshot; a query takes the highest one per session. */
   _defineProperty(this, "seq", 0);
   _defineProperty(this, "hiddenMs", 0);

package/dist/esm/collector/slow-interaction-list.js

@@ -0,0 +1,166 @@
+import _classCallCheck from "@babel/runtime/helpers/classCallCheck";
+import _createClass from "@babel/runtime/helpers/createClass";
+import _defineProperty from "@babel/runtime/helpers/defineProperty";
+/** Fixed by the schema, so the event stays a bounded size. */
+var MAX_RECORDS = 5;
+
+/**
+ * The latency an interaction has to beat to be recorded. 200 ms is the Google INP "good" threshold,
+ * so anything below it is an interaction the user was not waiting for.
+ */
+var MIN_LATENCY_MS = 200;
+
+/**
+ * The attributes a target may be named by, all of them ours: `data-vc` for visual completion, the
+ * test ids for tests. Ids, roles, class names, text and accessibility labels are left out because
+ * they can carry what the user wrote.
+ */
+var ALLOWED_TARGET_ATTRIBUTES = ['data-vc', 'data-testid', 'data-test-id'];
+var MAX_TARGET_ELEMENTS = 4;
+var MAX_ATTRIBUTE_VALUE_LENGTH = 32;
+var MAX_TARGET_LENGTH = 120;
+
+/** The id identifies an interaction across the entries measuring it. It is not reported. */
+
+/** An interaction as the collector's two observers saw it. */
+
+/**
+ * The slowest interactions of one session, which is what the event's `slowest` records are.
+ *
+ * A record is built from the entry that measured the interaction, as that entry arrives:
+ * `entry.target` is `null` once the element has left the document.
+ */
+export var SlowInteractionList = /*#__PURE__*/function () {
+  function SlowInteractionList() {
+    _classCallCheck(this, SlowInteractionList);
+    /** Slowest first. */
+    _defineProperty(this, "records", []);
+  }
+  return _createClass(SlowInteractionList, [{
+    key: "track",
+    value: function track(interaction) {
+      var interactionId = interaction.interactionId,
+        latencyMs = interaction.latencyMs;
+      var previousIndex = this.records.findIndex(function (existing) {
+        return existing.interactionId === interactionId;
+      });
+      var toBeatMs = MIN_LATENCY_MS;
+      if (previousIndex !== -1) {
+        // An interaction's latency grows as later entries arrive, and it replaces itself rather
+        // than taking a second place.
+        toBeatMs = this.records[previousIndex].durationMs;
+      } else if (this.records.length === MAX_RECORDS) {
+        toBeatMs = this.records[MAX_RECORDS - 1].durationMs;
+      }
+      if (latencyMs <= toBeatMs) {
+        return;
+      }
+
+      // Read only once the interaction has earned a place: naming its target walks the DOM, and
+      // this runs while the page is already slow.
+      var record = this.toRecord(interaction);
+      if (previousIndex === -1) {
+        this.records.push(record);
+      } else {
+        this.records[previousIndex] = record;
+      }
+      this.records.sort(function (a, b) {
+        return b.durationMs - a.durationMs;
+      });
+      this.records.splice(MAX_RECORDS);
+    }
+
+    /** @returns the records, slowest first, or nothing when no interaction was slow enough. */
+  }, {
+    key: "snapshot",
+    value: function snapshot() {
+      if (this.records.length === 0) {
+        return undefined;
+      }
+      return this.records.map(function (record) {
+        return {
+          group: record.group,
+          name: record.name,
+          durationMs: record.durationMs,
+          inputDelayMs: record.inputDelayMs,
+          processingMs: record.processingMs,
+          presentationDelayMs: record.presentationDelayMs,
+          target: record.target
+        };
+      });
+    }
+
+    /**
+     * The phases are reported together or not at all: a browser that reports one reports all three,
+     * and zeroes standing in for values we never had would read as an interaction that spent no time
+     * anywhere. Each is clamped, because they come from timestamps the browser coarsens
+     * independently, so a phase can come out just below zero.
+     */
+  }, {
+    key: "toRecord",
+    value: function toRecord(_ref) {
+      var entry = _ref.entry,
+        group = _ref.group,
+        interactionId = _ref.interactionId,
+        latencyMs = _ref.latencyMs;
+      var processingStart = entry.processingStart,
+        processingEnd = entry.processingEnd,
+        startTime = entry.startTime;
+      var measured = typeof processingStart === 'number' && typeof processingEnd === 'number';
+      var phaseMs = function phaseMs(durationMs) {
+        return Math.max(0, Math.round(durationMs));
+      };
+      return {
+        interactionId: interactionId,
+        group: group,
+        name: entry.name,
+        durationMs: Math.round(latencyMs),
+        inputDelayMs: measured ? phaseMs(processingStart - startTime) : undefined,
+        processingMs: measured ? phaseMs(processingEnd - processingStart) : undefined,
+        presentationDelayMs: measured ? phaseMs(startTime + latencyMs - processingEnd) : undefined,
+        target: this.describeTarget(entry.target)
+      };
+    }
+
+    /**
+     * Names the element an interaction happened on — `div[data-vc="x"] > p > span`, outermost first.
+     * The path climbs until an element carries an allow-listed attribute, because that is what says
+     * which part of the page this was.
+     */
+  }, {
+    key: "describeTarget",
+    value: function describeTarget(node) {
+      var _node$parentElement;
+      // An event's target can be a text node, and the element around it is the answer for it.
+      var element = node instanceof Element ? node : (_node$parentElement = node === null || node === void 0 ? void 0 : node.parentElement) !== null && _node$parentElement !== void 0 ? _node$parentElement : null;
+      var path = [];
+      for (var climbed = 0; element && climbed < MAX_TARGET_ELEMENTS; climbed += 1) {
+        var attribute = this.identifyingAttribute(element);
+        path.unshift("".concat(element.localName).concat(attribute !== null && attribute !== void 0 ? attribute : ''));
+        if (attribute) {
+          break;
+        }
+        element = element.parentElement;
+      }
+      if (path.length === 0) {
+        return undefined;
+      }
+      return path.join(' > ').slice(0, MAX_TARGET_LENGTH);
+    }
+  }, {
+    key: "identifyingAttribute",
+    value: function identifyingAttribute(element) {
+      for (var _i = 0, _ALLOWED_TARGET_ATTRI = ALLOWED_TARGET_ATTRIBUTES; _i < _ALLOWED_TARGET_ATTRI.length; _i++) {
+        var attribute = _ALLOWED_TARGET_ATTRI[_i];
+        var value = element.getAttribute(attribute);
+        if (value) {
+          // Encoded and cut: a value we did not write cannot bring quotes or a paragraph of
+          // text into the event.
+          var safeValue = encodeURIComponent(value).slice(0, MAX_ATTRIBUTE_VALUE_LENGTH);
+          return "[".concat(attribute, "=\"").concat(safeValue, "\"]");
+        }
+      }
+      return undefined;
+    }
+  }]);
+}();

package/dist/types/analytics/interactivity-snapshot.d.ts

@@ -20,6 +20,38 @@ export type SnapshotReason = 'timer' | 'hidden' | 'pagehide' | 'unmount' | 'navi
  * editable editor, `reading` is a live page being viewed with the editor still mounted.
  */
 export type SessionMode = 'editing' | 'reading';
+/**
+ * The editor groups, which are also the fields their histograms are reported in.
+ *
+ * `editorOther` is the remainder — an interaction the browser counts that is neither typing nor
+ * pointing — so the three together cover whatever the browser calls an interaction.
+ */
+export type EditorInteractionGroupName = 'editorOther' | 'editorPointer' | 'editorTyping';
+/**
+ * The group a record is attributed to. Unlike the `page` histogram, which counts the editor's
+ * interactions as well, `outsideEditor` is only the interactions that are not the editor's.
+ */
+export type SlowInteractionGroup = EditorInteractionGroupName | 'outsideEditor';
+/**
+ * One of the slowest interactions of the session: which target was slow, and where the time went,
+ * neither of which the histograms can answer.
+ *
+ * The three phases divide `durationMs` and add up to it within rounding.
+ */
+export type SlowInteraction = {
+    durationMs: number;
+    group: SlowInteractionGroup;
+    /** Time between the event arriving and its handlers starting to run. */
+    inputDelayMs?: number;
+    /** Type of the event the latency was measured on, which for a pointer press is usually `click`. */
+    name: string;
+    /** Time between the handlers finishing and the next frame being presented. */
+    presentationDelayMs?: number;
+    /** Time spent running the event's handlers. */
+    processingMs?: number;
+    /** A short DOM path. Absent once the element has been removed from the document. */
+    target?: string;
+};
 /**
  * Session-to-date latency distribution for one group of interactions.
  *
@@ -63,4 +95,6 @@ export type InteractivitySnapshot = {
     seq: number;
     /** Fixed for the whole session: a mode change closes it and opens the next. */
     sessionMode?: SessionMode;
+    /** Slowest first. Absent when nothing was slow enough to record. */
+    slowest?: SlowInteraction[];
 };

package/dist/types/collector/interaction-events.d.ts

@@ -1,10 +1,4 @@
-/**
- * The editor group an interaction belongs to, which is also the field the event reports it in.
- *
- * `editorOther` is the remainder — an interaction the browser counts that is neither typing nor
- * pointing — so the three groups together cover whatever the browser calls an interaction.
- */
-export type EditorInteractionGroupName = 'editorOther' | 'editorPointer' | 'editorTyping';
+import type { EditorInteractionGroupName } from '../analytics/interactivity-snapshot';
 export type InteractionEventKind = {
     /**
      * Whether an interaction is counted when this event arrives. One event of each group has it,

package/dist/types/collector/interaction-tracker.d.ts

@@ -1,11 +1,14 @@
-import type { EditorInteractionGroupName } from './interaction-events';
+import type { EditorInteractionGroupName } from '../analytics/interactivity-snapshot';
 /**
- * The Event Timing fields this package reads. `interactionId` is missing from the DOM
- * typings' `PerformanceEventTiming`, so it is declared here as optional, which also makes
- * a `PerformanceEntry` from `getEntries()` assignable without a cast.
+ * The Event Timing fields this package reads, declared optional so that a `PerformanceEntry` from
+ * `getEntries()` is assignable without a cast — `interactionId` is missing from the DOM typings'
+ * `PerformanceEventTiming` altogether, and the rest are only on it.
  */
 export type InteractionEntry = PerformanceEntry & {
     interactionId?: number;
+    processingEnd?: number;
+    processingStart?: number;
+    target?: Node | null;
 };
 /**
  * What an entry did to the interaction it belongs to: either it is the first entry of a new
@@ -14,11 +17,13 @@ export type InteractionEntry = PerformanceEntry & {
  */
 export type InteractionUpdate = {
     group: EditorInteractionGroupName | undefined;
+    interactionId: number;
     latencyMs: number;
     type: 'new';
 } | {
     fromMs: number;
     group: EditorInteractionGroupName | undefined;
+    interactionId: number;
     toMs: number;
     type: 'remeasured';
 };

package/dist/types/collector/interactivity-session.d.ts

@@ -1,6 +1,7 @@
 import type { SessionMode } from '../analytics/interactivity-snapshot';
 import { InteractionTracker } from './interaction-tracker';
 import { InteractionGroup } from './interaction-group';
+import { SlowInteractionList } from './slow-interaction-list';
 export type InteractivitySessionStart = {
     hidden: boolean;
     mode: SessionMode | undefined;
@@ -23,6 +24,7 @@ export declare class InteractivitySession {
     readonly editorTyping: InteractionGroup;
     readonly editorPointer: InteractionGroup;
     readonly editorOther: InteractionGroup;
+    readonly slowest: SlowInteractionList | undefined;
     /** Increments per snapshot; a query takes the highest one per session. */
     seq: number;
     /** Both fixed for the session: a change to either closes it and opens the next. */

package/dist/types/collector/slow-interaction-list.d.ts

@@ -0,0 +1,38 @@
+import type { SlowInteraction, SlowInteractionGroup } from '../analytics/interactivity-snapshot';
+import type { InteractionEntry } from './interaction-tracker';
+/** An interaction as the collector's two observers saw it. */
+type ObservedInteraction = {
+    entry: InteractionEntry;
+    group: SlowInteractionGroup;
+    interactionId: number;
+    /** The duration of the entry measuring the interaction at its slowest. */
+    latencyMs: number;
+};
+/**
+ * The slowest interactions of one session, which is what the event's `slowest` records are.
+ *
+ * A record is built from the entry that measured the interaction, as that entry arrives:
+ * `entry.target` is `null` once the element has left the document.
+ */
+export declare class SlowInteractionList {
+    /** Slowest first. */
+    private readonly records;
+    track(interaction: ObservedInteraction): void;
+    /** @returns the records, slowest first, or nothing when no interaction was slow enough. */
+    snapshot(): SlowInteraction[] | undefined;
+    /**
+     * The phases are reported together or not at all: a browser that reports one reports all three,
+     * and zeroes standing in for values we never had would read as an interaction that spent no time
+     * anywhere. Each is clamped, because they come from timestamps the browser coarsens
+     * independently, so a phase can come out just below zero.
+     */
+    private toRecord;
+    /**
+     * Names the element an interaction happened on — `div[data-vc="x"] > p > span`, outermost first.
+     * The path climbs until an element carries an allow-listed attribute, because that is what says
+     * which part of the page this was.
+     */
+    private describeTarget;
+    private identifyingAttribute;
+}
+export {};

package/docs/0-intro.tsx

@@ -25,7 +25,8 @@ ${createEditorUseOnlyNotice('Editor Plugin Interactivity', [
 
   It reports the \`editor interactivity\` operational event: session-to-date interaction latency
   histograms for full page editor sessions — for the page as a whole, and for the editor's typing,
-  pointer and other interactions — per [RFC 095](https://hello.atlassian.net/wiki/spaces/EDITOR/pages/7527607488/Editor+RFC+095+Confluence+editor+responsiveness+bucketed+INP+telemetry).
+  pointer and other interactions — along with the slowest interactions of the session, per
+  [RFC 095](https://hello.atlassian.net/wiki/spaces/EDITOR/pages/7527607488/Editor+RFC+095+Confluence+editor+responsiveness+bucketed+INP+telemetry).
   See the package README for the event shape, the snapshot cadence and what ends a session.
 
   The plugin has no configuration, state, actions or commands — adding it to a preset is what turns

package/package.json

@@ -1,6 +1,6 @@
 {
 	"name": "@atlaskit/editor-plugin-interactivity",
-	"version": "0.3.0",
+	"version": "1.1.0",
 	"description": "Interactivity plugin for @atlaskit/editor-core",
 	"author": "Atlassian Pty Ltd",
 	"license": "Apache-2.0",
@@ -20,14 +20,15 @@
 	"sideEffects": false,
 	"dependencies": {
 		"@atlaskit/browser-apis": "^1.2.0",
-		"@atlaskit/editor-plugin-analytics": "^15.0.0",
-		"@atlaskit/editor-plugin-context-identifier": "^15.0.0",
-		"@atlaskit/editor-plugin-editor-viewmode": "^17.0.0",
+		"@atlaskit/editor-plugin-analytics": "^16.0.0",
+		"@atlaskit/editor-plugin-context-identifier": "^16.0.0",
+		"@atlaskit/editor-plugin-editor-viewmode": "^18.0.0",
+		"@atlaskit/platform-feature-experiments": "^0.3.0",
 		"@babel/runtime": "^7.0.0",
 		"bind-event-listener": "^3.0.0"
 	},
 	"peerDependencies": {
-		"@atlaskit/editor-common": "^119.10.0",
+		"@atlaskit/editor-common": "^120.1.0",
 		"react": "^18.2.0 || ^19.2.0"
 	},
 	"devDependencies": {