@atlaskit/editor-plugin-interactivity 0.1.0 → 0.3.0

package/CHANGELOG.md

@@ -1,5 +1,31 @@
 # @atlaskit/editor-plugin-interactivity
 
+## 0.3.0
+
+### Minor Changes
+
+- [`355d6f13eb8b4`](https://bitbucket.org/atlassian/atlassian-frontend-monorepo/commits/355d6f13eb8b4) -
+  Report the `editorTyping`, `editorPointer` and `editorOther` interaction histograms in the
+  `editor interactivity` event, so a responsiveness regression in the editor can be told apart from
+  one elsewhere on the page.
+
+### Patch Changes
+
+- Updated dependencies
+
+## 0.2.0
+
+### Minor Changes
+
+- [`fc88b1544be96`](https://bitbucket.org/atlassian/atlassian-frontend-monorepo/commits/fc88b1544be96) -
+  Report the `editor interactivity` operational event: how interaction latencies were spread over an
+  editor session, as bucketed counts, for the Confluence full page editor. Behind the
+  platform_editor_editor_interactivity experiment.
+
+### Patch Changes
+
+- Updated dependencies
+
 ## 0.1.0
 
 ### Minor Changes

package/README.md

@@ -7,14 +7,73 @@ be able to use this component but will not be able to submit issues.
 
 ## Overview
 
-The Interactivity plugin reports the `editor interactivity` operational event: how interaction
-latencies were spread over an editor session, as bucketed counts, per
+The Interactivity plugin reports the `editor interactivity` operational event: session-to-date
+interaction latency distributions for full page editor sessions, per
 [RFC 095](https://hello.atlassian.net/wiki/spaces/EDITOR/pages/7527607488/Editor+RFC+095+Confluence+editor+responsiveness+bucketed+INP+telemetry).
 The existing `editor inp` event reports a single value per session and cannot answer how many
-interactions were slow.
-
-The plugin is a stub at this point — it registers itself and collects nothing. The collector and the
-event arrive in EDITOR-8553.
+interactions were slow, so this plugin keeps bucketed counts instead.
+
+## What it reports
+
+- `page` — every interaction on the page, as `totalCount`, `observedCount`, `sumMs`, `maxMs`,
+  `buckets` and `percentilesMs`. `totalCount` comes from `performance.interactionCount` and includes
+  interactions below the 16 ms Event Timing reporting threshold, so `totalCount - observedCount` is
+  the sub-threshold count.
+- `editorTyping`, `editorPointer` and `editorOther` — the interactions with the editor, in the same
+  shape as `page`. Event Timing observes the whole document, so `page` alone cannot say whether a
+  regression is in the editor or elsewhere on the page; these can. Every interaction with the editor
+  is in exactly one of them, and in `page` as well.
+- `percentilesMs` is temporary. It holds percentiles of the same interactions, keyed by percentile
+  and exact to the 8 ms Event Timing reports durations at, to confirm that a percentile read off
+  `buckets` lands where the latencies actually are.
+- Bucket keys are the upper boundary of the bucket in milliseconds and count only interactions above
+  the previous boundary. Buckets are not cumulative and empty buckets are omitted, so a missing
+  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.
+
+## The editor groups
+
+An interaction is the editor's when it happened inside the element the editor renders itself into,
+which editor-core hands to the plugin's hook as `wrapperElement`. A second observer reports the
+events of those interactions from that element, alongside the Event Timing observer that reports the
+latencies, and the tracker makes interactions out of both.
+
+The editor's events are what count the interactions, because there is no
+`performance.interactionCount` per group and the 16 ms reporting threshold is the lowest the spec
+allows. An interaction is several events, so it is counted on one of them: typing on `keydown`,
+because a held key repeats and the browser counts every repeat; pointing on `pointerup`, because a
+press taken over by a scroll never gets one — and the browser counts no interaction for it either.
+The group comes from the same events, and the one table in `interaction-events.ts` is read for both
+counting and grouping, so the two cannot disagree.
+
+An entry lands in the group of the event it measured, matched by that event's type and timestamp. An
+interaction whose events the editor never reported stays in `page` only.
+
+Known gaps, all of which only move interactions out of the editor groups and never between them:
+
+- What the editor renders outside that element — a dropdown or a dialog in a portal — is counted in
+  `page` only, as is everything before the element arrives, a render after the editor first paints.
+- `editorOther` is the remainder slot: the browser counts only keyboard and pointer interactions
+  today, so it reads zero until that changes.
+- While an IME composes, the browser can group key presses into fewer interactions than we count, so
+  `editorTyping.totalCount` can run ahead of it.
+
+## Cadence
+
+Snapshots are taken 10 s, 30 s and 60 s after the session starts, then every 60 s, plus on every
+transition of the tab to hidden, on `pagehide` and on editor unmount. A snapshot that would repeat
+the previous one is skipped, and signals from one lifecycle transition are coalesced into a single
+snapshot.
+
+## Sessions
+
+A session covers one document in one mode, so its latencies are always comparable with each other.
+It normally lasts an editor mount, but it also ends while the editor stays mounted when either of
+those changes — Confluence live pages navigate and switch between reading and editing without
+remounting the editor. That is reported as `reason: 'navigation'` or `reason: 'modeChange'`, and the
+next session starts with a new `interactivitySessionId`. Sessions of one editor mount share an
+`editorSessionId`, which is what stitches them back together.
 
 ## Install
 

package/afm-cc/tsconfig.json

@@ -18,6 +18,18 @@
 		"noCheck": true
 	},
 	"references": [
+		{
+			"path": "../../../helpers/browser-apis/afm-cc/tsconfig.json"
+		},
+		{
+			"path": "../../editor-plugin-analytics/afm-cc/tsconfig.json"
+		},
+		{
+			"path": "../../editor-plugin-context-identifier/afm-cc/tsconfig.json"
+		},
+		{
+			"path": "../../editor-plugin-editor-viewmode/afm-cc/tsconfig.json"
+		},
 		{
 			"path": "../../editor-common/afm-cc/tsconfig.json"
 		}

package/afm-products/tsconfig.json

@@ -18,6 +18,18 @@
 		"noCheck": true
 	},
 	"references": [
+		{
+			"path": "../../../helpers/browser-apis/afm-products/tsconfig.json"
+		},
+		{
+			"path": "../../editor-plugin-analytics/afm-products/tsconfig.json"
+		},
+		{
+			"path": "../../editor-plugin-context-identifier/afm-products/tsconfig.json"
+		},
+		{
+			"path": "../../editor-plugin-editor-viewmode/afm-products/tsconfig.json"
+		},
 		{
 			"path": "../../editor-common/afm-products/tsconfig.json"
 		}

package/dist/cjs/analytics/fire-interactivity-event.js

@@ -0,0 +1,39 @@
+"use strict";
+
+Object.defineProperty(exports, "__esModule", {
+  value: true
+});
+exports.fireInteractivityEvent = fireInteractivityEvent;
+var _enums = require("@atlaskit/editor-common/analytics/types/enums");
+/** The reasons that mean the page may not be around long enough to deliver a queued event. */
+var REASONS_THE_PAGE_MAY_NOT_OUTLIVE = ['hidden', 'pagehide', 'unmount'];
+
+/**
+ * The `editor interactivity` operational event.
+ *
+ * `editorSessionId` arrives without being set here: `@atlaskit/analytics-listeners` merges
+ * the editor analytics context into the attributes of every event on the editor channel.
+ * `objectId` comes both from that context and from the snapshot, which carries the value
+ * the session was collected against.
+ */
+
+/**
+ * Sends a snapshot as the `editor interactivity` event.
+ *
+ * Does nothing without the analytics plugin: an editor without it has nowhere to send events,
+ * and the collector keeps measuring either way.
+ */
+function fireInteractivityEvent(analytics, snapshot) {
+  analytics === null || analytics === void 0 || analytics.fireAnalyticsEvent({
+    action: 'interactivity',
+    actionSubject: _enums.ACTION_SUBJECT.EDITOR,
+    eventType: _enums.EVENT_TYPE.OPERATIONAL,
+    attributes: snapshot
+  }, undefined,
+  // Events are queued into an idle callback by default, which a page being unloaded never
+  // runs and a backgrounded tab throttles. The snapshots taken because the page is going
+  // away go immediately; the rest can wait their turn.
+  {
+    immediate: REASONS_THE_PAGE_MAY_NOT_OUTLIVE.includes(snapshot.reason)
+  });
+}

package/dist/cjs/analytics/interactivity-snapshot.js

@@ -0,0 +1 @@
+"use strict";

package/dist/cjs/collector/bucket-boundaries.js

@@ -0,0 +1,137 @@
+"use strict";
+
+Object.defineProperty(exports, "__esModule", {
+  value: true
+});
+exports.SCHEMA_VERSION = exports.REPORTING_THRESHOLD_MS = void 0;
+exports.bucketKeyForMs = bucketKeyForMs;
+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; }
+/**
+ * Bucket boundaries for the interaction latency buckets, version 1.
+ *
+ * Two ranges:
+ * - 16 ms to 200 ms — a boundary every 8 ms: 16, 24, 32, … 200. Event Timing rounds
+ *   durations to 8 ms, so nothing finer is measurable.
+ * - above 200 ms — each boundary ~15% above the previous one, five of them per doubling:
+ *   222, 256, 294, 337, 388, 445, 512, … A 40 ms difference matters at 100 ms and is
+ *   noise at 4 seconds, so buckets grow with the latency instead of staying 8 ms wide.
+ *
+ * 500 ms — the Google INP "poor" threshold — falls inside the 445…512 bucket, so that one
+ * bucket is split at 500 to count the threshold instead of interpolating it. 200 ms, the
+ * "good" threshold, is already a boundary.
+ *
+ * Bump SCHEMA_VERSION whenever any boundary moves; queries group by it.
+ */
+var SCHEMA_VERSION = exports.SCHEMA_VERSION = 1;
+
+/**
+ * Event Timing reporting threshold. Faster interactions are never delivered to the
+ * observer, so they reach no bucket at all — `performance.interactionCount` is what counts
+ * them, as `totalCount - observedCount`. This bucket holds the interactions reported at
+ * exactly the threshold.
+ */
+var REPORTING_THRESHOLD_MS = exports.REPORTING_THRESHOLD_MS = 16;
+
+/**
+ * Exceptions to the grid: latencies that must be a boundary of their own so that they are
+ * counted exactly rather than read off a bucket that spans them. Each one splits the bucket it
+ * falls inside. 500 ms is the Google INP "poor" threshold; the "good" one, 200 ms, needs no
+ * exception because the evenly spaced range already ends there.
+ *
+ * Every entry has to sit above that range, and adding one changes the reported keys, so bump
+ * SCHEMA_VERSION with it.
+ */
+var EXACT_THRESHOLDS_MS = [500];
+var EVENLY_SPACED_MAX_MS = 200;
+/**
+ * Keep this a multiple of 8 (8, 16, 24, …). Event Timing reports durations in 8 ms steps, so a
+ * step that is not a multiple of 8 leaves buckets no interaction can ever land in.
+ */
+var EVENLY_SPACED_STEP_MS = 8;
+var BOUNDARIES_PER_DOUBLING = 5;
+
+/**
+ * The first boundary at or above `latencyMs`, for the range above 200 ms.
+ *
+ * Five boundaries per doubling is the same as saying the nth boundary sits at `2^(n/5)` ms —
+ * boundary 40 at 256 ms, 45 at 512 ms, 50 at 1024 ms. So this turns the latency into a
+ * boundary number, rounds that up, and turns it back into milliseconds.
+ *
+ * Boundaries are floored to whole milliseconds, which keeps each one at or below the exact
+ * value it stands for. That is what makes `bucketKeyForMs(boundary) === boundary` hold.
+ */
+function firstBoundaryAtOrAbove(latencyMs) {
+  // `Math.log2(latencyMs) * 5` is the boundary number: log2 answers how many doublings of
+  // 1 ms reach this latency, and five boundaries cover each doubling.
+  //
+  // A latency sitting on a boundary makes that a whole number, which `Math.ceil` has to
+  // keep. ECMA-262 only requires `Math.log2` to be approximate, so 9.0000000000000002 for
+  // `log2(512)` would round up to boundary 46 and report 512 ms as 588 ms. EPSILON is
+  // larger than such imprecision and far smaller than the gap between two boundaries.
+  var EPSILON = 1e-9;
+  var boundaryNumber = Math.ceil(BOUNDARIES_PER_DOUBLING * Math.log2(latencyMs) - EPSILON);
+
+  // One `Math.pow` over the whole exponent, so the result is rounded once. Multiplying the
+  // ratio between neighbouring boundaries (2^(1/5) ≈ 1.1487) by itself instead accumulates
+  // the rounding of every step, reaching 512.0000000000018 by boundary 45.
+  return Math.floor(Math.pow(2, boundaryNumber / BOUNDARIES_PER_DOUBLING));
+}
+
+/** The bucket each exact threshold splits — 500 ms splits the one ending at 512 ms. */
+var EXACT_THRESHOLD_BUCKETS = EXACT_THRESHOLDS_MS.map(function (thresholdMs) {
+  return {
+    thresholdMs: thresholdMs,
+    bucketMs: firstBoundaryAtOrAbove(thresholdMs)
+  };
+});
+
+/**
+ * The bucket a latency belongs to, identified by the bucket's upper boundary in whole
+ * milliseconds — which is also its key in the reported buckets.
+ *
+ * Every latency gets a bucket, however slow: the boundaries continue upwards, so there is no
+ * overflow bucket. Expects the whole-millisecond durations Event Timing reports; boundaries
+ * are floored, so a fractional latency can land in a bucket whose key reads up to a
+ * millisecond below it. Non-finite latencies never reach here — `InteractionTracker` drops
+ * them as it reads the entry.
+ */
+function bucketKeyForMs(latencyMs) {
+  if (latencyMs <= REPORTING_THRESHOLD_MS) {
+    return REPORTING_THRESHOLD_MS;
+  }
+  if (latencyMs <= EVENLY_SPACED_MAX_MS) {
+    // How many 8 ms steps above the threshold the latency is, rounded up: 17 ms is 0.125
+    // steps up and lands on the boundary one step up, 24 ms. Rounding up is what keeps the
+    // set of keys fixed when a latency is not a multiple of 8 ms.
+    //
+    // No EPSILON here, unlike the branch below: subtracting whole numbers gives a whole
+    // number, and dividing by a power of two shifts a binary float's exponent without
+    // touching its digits, so a latency on a boundary cannot come out just above a whole
+    // number of steps.
+    var steps = Math.ceil((latencyMs - REPORTING_THRESHOLD_MS) / EVENLY_SPACED_STEP_MS);
+    return REPORTING_THRESHOLD_MS + steps * EVENLY_SPACED_STEP_MS;
+  }
+  var boundary = firstBoundaryAtOrAbove(latencyMs);
+
+  // A latency in the lower part of a split bucket is reported as the threshold itself, so the
+  // threshold is counted exactly.
+  var _iterator = _createForOfIteratorHelper(EXACT_THRESHOLD_BUCKETS),
+    _step;
+  try {
+    for (_iterator.s(); !(_step = _iterator.n()).done;) {
+      var _step$value = _step.value,
+        thresholdMs = _step$value.thresholdMs,
+        bucketMs = _step$value.bucketMs;
+      if (boundary === bucketMs && latencyMs <= thresholdMs) {
+        return thresholdMs;
+      }
+    }
+  } catch (err) {
+    _iterator.e(err);
+  } finally {
+    _iterator.f();
+  }
+  return boundary;
+}

package/dist/cjs/collector/editor-event-observer.js

@@ -0,0 +1,63 @@
+"use strict";
+
+var _interopRequireDefault = require("@babel/runtime/helpers/interopRequireDefault");
+Object.defineProperty(exports, "__esModule", {
+  value: true
+});
+exports.EditorEventObserver = void 0;
+var _classCallCheck2 = _interopRequireDefault(require("@babel/runtime/helpers/classCallCheck"));
+var _createClass2 = _interopRequireDefault(require("@babel/runtime/helpers/createClass"));
+var _bindEventListener = require("bind-event-listener");
+var _interactionEvents = require("./interaction-events");
+/**
+ * Reports the events the interactions with the editor are made of, as the browser dispatched
+ * them. What they mean is the tracker's business.
+ *
+ * Event Timing cannot answer which interactions were with the editor, because it observes the
+ * whole document, nor how many there were, because it reports none below 16 ms.
+ */
+var EditorEventObserver = exports.EditorEventObserver = /*#__PURE__*/function () {
+  function EditorEventObserver(onEvent) {
+    (0, _classCallCheck2.default)(this, EditorEventObserver);
+    this.onEvent = onEvent;
+  }
+
+  /**
+   * Called as the element the editor renders itself into changes: the editor only knows it after
+   * its first render, and can replace it.
+   */
+  return (0, _createClass2.default)(EditorEventObserver, [{
+    key: "observe",
+    value: function observe(root) {
+      var _this = this;
+      var next = root !== null && root !== void 0 ? root : undefined;
+      if (next === this.root) {
+        return;
+      }
+      this.stop();
+      this.root = next;
+      if (!next) {
+        return;
+      }
+      this.unbind = (0, _bindEventListener.bindAll)(next, _interactionEvents.INTERACTION_EVENT_TYPES.map(function (type) {
+        return {
+          type: type,
+          listener: _this.onEvent
+        };
+      }),
+      // Capture, so a handler in the editor cannot stop an interaction from being reported.
+      {
+        capture: true,
+        passive: true
+      });
+    }
+  }, {
+    key: "stop",
+    value: function stop() {
+      var _this$unbind;
+      (_this$unbind = this.unbind) === null || _this$unbind === void 0 || _this$unbind.call(this);
+      this.unbind = undefined;
+      this.root = undefined;
+    }
+  }]);
+}();

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

@@ -0,0 +1,62 @@
+"use strict";
+
+Object.defineProperty(exports, "__esModule", {
+  value: true
+});
+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.
+ *
+ * These are the events Event Timing can report with a non-zero `interactionId`, so any of them can
+ * be the one an entry measured — and it is usually not the one the interaction is counted on: for a
+ * pointer press the slow part is normally the `click` handler.
+ *
+ * The counted event is at a different end of the interaction in each group, because what can go
+ * wrong differs. Typing is counted on `keydown`, since the browser opens a new interaction for
+ * every repeat of a held key, and nothing cancels a key press. Pointing is counted on `pointerup`,
+ * since a press cannot repeat but can be taken over by a scroll — which the browser does not count
+ * either, and in that case `pointerup` never arrives.
+ */
+var INTERACTION_EVENTS = {
+  keydown: {
+    group: 'editorTyping',
+    counts: true
+  },
+  keyup: {
+    group: 'editorTyping'
+  },
+  // Only while an IME composes: the browser counts the text it commits in the interaction of the
+  // key that caused it.
+  input: {
+    group: 'editorTyping'
+  },
+  pointerdown: {
+    group: 'editorPointer'
+  },
+  pointerup: {
+    group: 'editorPointer',
+    counts: true
+  },
+  click: {
+    group: 'editorPointer'
+  },
+  // Ends a pointer press the way `pointerup` does, so the browser counts it as an interaction.
+  contextmenu: {
+    group: 'editorPointer'
+  }
+};
+
+/** Derived, so the types listened for cannot drift from the table. */
+var INTERACTION_EVENT_TYPES = exports.INTERACTION_EVENT_TYPES = Object.keys(INTERACTION_EVENTS);
+function interactionEventKind(type) {
+  return INTERACTION_EVENTS[type];
+}

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

@@ -0,0 +1,185 @@
+"use strict";
+
+var _interopRequireDefault = require("@babel/runtime/helpers/interopRequireDefault");
+Object.defineProperty(exports, "__esModule", {
+  value: true
+});
+exports.InteractionGroup = 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"));
+var _bucketBoundaries = require("./bucket-boundaries");
+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; }
+/**
+ * Latencies are counted per 8 ms, the resolution Event Timing reports durations at. Every
+ * latency is rounded up to this step on the way in, which caps the number of distinct values
+ * a group can hold whatever the latency was derived from.
+ */
+var RESOLUTION_MS = 8;
+
+/** Which percentiles are reported, as quantiles. */
+var REPORTED_QUANTILES = [0.9, 0.98];
+
+/**
+ * The latencies of one set of interactions — every interaction on the page, or only the ones
+ * inside the editor — reported as one object in the event.
+ *
+ * The whole state is a count per distinct latency, so an interaction only costs a counter
+ * whatever its latency was, and everything the event carries — the reported buckets, the
+ * count, the sum, the maximum and the percentiles — is derived from that map when a snapshot
+ * is taken. Nothing is computed while interactions arrive.
+ *
+ * The two counters count different populations: `add` takes the interactions Event Timing
+ * measured, `countTotal` takes all of them, including the ones below the 16 ms reporting threshold
+ * it never delivers. So `totalCount >= observedCount`, and the difference is how many were too
+ * fast to be measured.
+ */
+var InteractionGroup = exports.InteractionGroup = /*#__PURE__*/function () {
+  function InteractionGroup() {
+    (0, _classCallCheck2.default)(this, InteractionGroup);
+    (0, _defineProperty2.default)(this, "countByLatency", new Map());
+    (0, _defineProperty2.default)(this, "totalCount", 0);
+  }
+  return (0, _createClass2.default)(InteractionGroup, [{
+    key: "add",
+    value: function add(latencyMs) {
+      this.increment(latencyMs);
+    }
+
+    /**
+     * Counts an interaction towards the group's total, measured or not. `page` has no use for it:
+     * `performance.interactionCount` counts the page's interactions.
+     */
+  }, {
+    key: "countTotal",
+    value: function countTotal() {
+      this.totalCount += 1;
+    }
+  }, {
+    key: "remeasure",
+    value: function remeasure(previousLatencyMs, latencyMs) {
+      // Moved rather than counted again: the count belongs to the same interaction.
+      this.decrement(previousLatencyMs);
+      this.increment(latencyMs);
+    }
+
+    /**
+     * @param totalCount every interaction of the group, including those below the Event Timing
+     * reporting threshold. Defaults to what `countTotal` was told, which is where an editor
+     * group's total comes from; `page` passes `performance.interactionCount` instead.
+     */
+  }, {
+    key: "snapshot",
+    value: function snapshot() {
+      var _latencies;
+      var totalCount = arguments.length > 0 && arguments[0] !== undefined ? arguments[0] : this.totalCount;
+      // Ascending, so the reported buckets come out in order and the last latency is the
+      // maximum. Sorted once for everything below.
+      var latencies = Array.from(this.countByLatency.keys()).sort(function (a, b) {
+        return a - b;
+      });
+      var observedCount = this.observedCount();
+      var percentileRanks = REPORTED_QUANTILES.map(function (quantile) {
+        return {
+          key: String(Math.round(quantile * 100)),
+          rank: Math.max(1, Math.ceil(quantile * observedCount))
+        };
+      });
+      var buckets = {};
+      var percentilesMs = {};
+      var sumMs = 0;
+      var counted = 0;
+      var _iterator = _createForOfIteratorHelper(latencies),
+        _step;
+      try {
+        for (_iterator.s(); !(_step = _iterator.n()).done;) {
+          var _this$countByLatency$, _buckets$bucket;
+          var latencyMs = _step.value;
+          var count = (_this$countByLatency$ = this.countByLatency.get(latencyMs)) !== null && _this$countByLatency$ !== void 0 ? _this$countByLatency$ : 0;
+          sumMs += latencyMs * count;
+          var bucket = String((0, _bucketBoundaries.bucketKeyForMs)(latencyMs));
+          buckets[bucket] = ((_buckets$bucket = buckets[bucket]) !== null && _buckets$bucket !== void 0 ? _buckets$bucket : 0) + count;
+
+          // A percentile is the latency the group's interactions reach counting up from the
+          // fastest, so it is answered as soon as this many of them have been passed.
+          counted += count;
+          var _iterator2 = _createForOfIteratorHelper(percentileRanks),
+            _step2;
+          try {
+            for (_iterator2.s(); !(_step2 = _iterator2.n()).done;) {
+              var _step2$value = _step2.value,
+                key = _step2$value.key,
+                rank = _step2$value.rank;
+              if (percentilesMs[key] === undefined && counted >= rank) {
+                percentilesMs[key] = latencyMs;
+              }
+            }
+          } catch (err) {
+            _iterator2.e(err);
+          } finally {
+            _iterator2.f();
+          }
+        }
+      } catch (err) {
+        _iterator.e(err);
+      } finally {
+        _iterator.f();
+      }
+      return {
+        // `performance.interactionCount` can lag the entries the observer has delivered.
+        totalCount: Math.max(totalCount, observedCount),
+        observedCount: observedCount,
+        sumMs: sumMs,
+        maxMs: (_latencies = latencies[latencies.length - 1]) !== null && _latencies !== void 0 ? _latencies : 0,
+        buckets: buckets,
+        percentilesMs: percentilesMs
+      };
+    }
+  }, {
+    key: "observedCount",
+    value: function observedCount() {
+      var total = 0;
+      var _iterator3 = _createForOfIteratorHelper(this.countByLatency.values()),
+        _step3;
+      try {
+        for (_iterator3.s(); !(_step3 = _iterator3.n()).done;) {
+          var count = _step3.value;
+          total += count;
+        }
+      } catch (err) {
+        _iterator3.e(err);
+      } finally {
+        _iterator3.f();
+      }
+      return total;
+    }
+
+    /** Rounding lives here so that every count goes through the same step, in or out. */
+  }, {
+    key: "roundLatencyUp",
+    value: function roundLatencyUp(latencyMs) {
+      return Math.ceil(latencyMs / RESOLUTION_MS) * RESOLUTION_MS;
+    }
+  }, {
+    key: "increment",
+    value: function increment(latencyMs) {
+      var _this$countByLatency$2;
+      var step = this.roundLatencyUp(latencyMs);
+      this.countByLatency.set(step, ((_this$countByLatency$2 = this.countByLatency.get(step)) !== null && _this$countByLatency$2 !== void 0 ? _this$countByLatency$2 : 0) + 1);
+    }
+  }, {
+    key: "decrement",
+    value: function decrement(latencyMs) {
+      var _this$countByLatency$3;
+      var step = this.roundLatencyUp(latencyMs);
+      var next = ((_this$countByLatency$3 = this.countByLatency.get(step)) !== null && _this$countByLatency$3 !== void 0 ? _this$countByLatency$3 : 0) - 1;
+      if (next > 0) {
+        this.countByLatency.set(step, next);
+      } else {
+        this.countByLatency.delete(step);
+      }
+    }
+  }]);
+}();