@atlaskit/react-ufo 3.1.4 → 3.3.0

package/dist/esm/vc/vc-observer-new/index.js

@@ -0,0 +1,126 @@
+import _asyncToGenerator from "@babel/runtime/helpers/asyncToGenerator";
+import _classCallCheck from "@babel/runtime/helpers/classCallCheck";
+import _createClass from "@babel/runtime/helpers/createClass";
+import _defineProperty from "@babel/runtime/helpers/defineProperty";
+import _regeneratorRuntime from "@babel/runtime/regenerator";
+import EntriesTimeline from './entries-timeline';
+import _getElementName from './get-element-name';
+import VCCalculator_FY25_03 from './metric-calculator/fy25_03';
+import ViewportObserver from './viewport-observer';
+import WindowEventObserver from './window-event-observer';
+var DEFAULT_SELECTOR_CONFIG = {
+  id: false,
+  testId: true,
+  role: false,
+  className: false,
+  dataVC: true
+};
+var VCObserverNew = /*#__PURE__*/function () {
+  function VCObserverNew(config) {
+    var _config$selectorConfi,
+      _this = this;
+    _classCallCheck(this, VCObserverNew);
+    _defineProperty(this, "startTime", 0);
+    _defineProperty(this, "viewportObserver", null);
+    _defineProperty(this, "windowEventObserver", null);
+    this.entriesTimeline = new EntriesTimeline();
+    this.selectorConfig = (_config$selectorConfi = config.selectorConfig) !== null && _config$selectorConfi !== void 0 ? _config$selectorConfi : DEFAULT_SELECTOR_CONFIG;
+    this.viewportObserver = new ViewportObserver({
+      onChange: function onChange(onChangeArg) {
+        var time = onChangeArg.time,
+          type = onChangeArg.type,
+          elementRef = onChangeArg.elementRef,
+          visible = onChangeArg.visible,
+          rect = onChangeArg.rect,
+          previousRect = onChangeArg.previousRect,
+          mutationData = onChangeArg.mutationData;
+        var elementName = 'unknown';
+        var element = elementRef.deref();
+        if (element) {
+          elementName = _this.getElementName(element);
+        }
+        _this.entriesTimeline.push({
+          time: time,
+          type: type,
+          data: {
+            elementName: elementName,
+            rect: rect,
+            previousRect: previousRect,
+            visible: visible,
+            attributeName: mutationData === null || mutationData === void 0 ? void 0 : mutationData.attributeName
+          }
+        });
+      }
+    });
+    this.windowEventObserver = new WindowEventObserver({
+      onEvent: function onEvent(_ref) {
+        var time = _ref.time,
+          type = _ref.type;
+        _this.entriesTimeline.push({
+          time: time,
+          type: 'window:event',
+          data: {
+            eventType: type
+          }
+        });
+      }
+    });
+  }
+  return _createClass(VCObserverNew, [{
+    key: "start",
+    value: function start() {
+      var _this$viewportObserve, _this$windowEventObse;
+      (_this$viewportObserve = this.viewportObserver) === null || _this$viewportObserve === void 0 || _this$viewportObserve.start();
+      (_this$windowEventObse = this.windowEventObserver) === null || _this$windowEventObse === void 0 || _this$windowEventObse.start();
+    }
+  }, {
+    key: "stop",
+    value: function stop() {
+      var _this$viewportObserve2, _this$windowEventObse2;
+      (_this$viewportObserve2 = this.viewportObserver) === null || _this$viewportObserve2 === void 0 || _this$viewportObserve2.stop();
+      (_this$windowEventObse2 = this.windowEventObserver) === null || _this$windowEventObse2 === void 0 || _this$windowEventObse2.stop();
+    }
+  }, {
+    key: "getVCResult",
+    value: function () {
+      var _getVCResult = _asyncToGenerator( /*#__PURE__*/_regeneratorRuntime.mark(function _callee(param) {
+        var start, stop, results, calculator_fy25_03, orderedEntries, fy25_03;
+        return _regeneratorRuntime.wrap(function _callee$(_context) {
+          while (1) switch (_context.prev = _context.next) {
+            case 0:
+              start = param.start, stop = param.stop;
+              results = [];
+              calculator_fy25_03 = new VCCalculator_FY25_03();
+              orderedEntries = this.entriesTimeline.getOrderedEntries({
+                start: start,
+                stop: stop
+              });
+              _context.next = 6;
+              return calculator_fy25_03.calculate({
+                orderedEntries: orderedEntries
+              });
+            case 6:
+              fy25_03 = _context.sent;
+              if (fy25_03) {
+                results.push(fy25_03);
+              }
+              return _context.abrupt("return", results);
+            case 9:
+            case "end":
+              return _context.stop();
+          }
+        }, _callee, this);
+      }));
+      function getVCResult(_x) {
+        return _getVCResult.apply(this, arguments);
+      }
+      return getVCResult;
+    }()
+  }, {
+    key: "getElementName",
+    value: function getElementName(element) {
+      return _getElementName(this.selectorConfig, element);
+    }
+  }]);
+}();
+export { VCObserverNew as default };

package/dist/esm/vc/vc-observer-new/metric-calculator/abstract-base-vc-calculator.js

@@ -0,0 +1,69 @@
+import _asyncToGenerator from "@babel/runtime/helpers/asyncToGenerator";
+import _classCallCheck from "@babel/runtime/helpers/classCallCheck";
+import _createClass from "@babel/runtime/helpers/createClass";
+import _regeneratorRuntime from "@babel/runtime/regenerator";
+import calculateTTVCPercentiles from './percentile-calc';
+import getViewportHeight from './utils/get-viewport-height';
+import getViewportWidth from './utils/get-viewport-width';
+var AbstractVCCalculatorBase = /*#__PURE__*/function () {
+  function AbstractVCCalculatorBase(revisionNo) {
+    _classCallCheck(this, AbstractVCCalculatorBase);
+    this.revisionNo = revisionNo;
+  }
+  return _createClass(AbstractVCCalculatorBase, [{
+    key: "calculate",
+    value: function () {
+      var _calculate = _asyncToGenerator( /*#__PURE__*/_regeneratorRuntime.mark(function _callee(_ref) {
+        var _this = this,
+          _vcDetails$90$t,
+          _vcDetails$;
+        var orderedEntries, filteredEntries, isVCClean, vcDetails;
+        return _regeneratorRuntime.wrap(function _callee$(_context) {
+          while (1) switch (_context.prev = _context.next) {
+            case 0:
+              orderedEntries = _ref.orderedEntries;
+              filteredEntries = orderedEntries.filter(function (entry) {
+                return _this.isEntryIncluded(entry);
+              });
+              isVCClean = this.isVCClean(filteredEntries);
+              if (isVCClean) {
+                _context.next = 5;
+                break;
+              }
+              return _context.abrupt("return", {
+                revision: this.revisionNo,
+                'metric:vc90': null,
+                clean: false
+              });
+            case 5:
+              _context.next = 7;
+              return calculateTTVCPercentiles({
+                viewport: {
+                  width: getViewportWidth(),
+                  height: getViewportHeight()
+                },
+                orderedEntries: filteredEntries,
+                percentiles: [25, 50, 75, 80, 85, 90, 95, 98, 99]
+              });
+            case 7:
+              vcDetails = _context.sent;
+              return _context.abrupt("return", {
+                revision: this.revisionNo,
+                vcDetails: vcDetails !== null && vcDetails !== void 0 ? vcDetails : undefined,
+                clean: isVCClean,
+                'metric:vc90': (_vcDetails$90$t = vcDetails === null || vcDetails === void 0 || (_vcDetails$ = vcDetails['90']) === null || _vcDetails$ === void 0 ? void 0 : _vcDetails$.t) !== null && _vcDetails$90$t !== void 0 ? _vcDetails$90$t : null
+              });
+            case 9:
+            case "end":
+              return _context.stop();
+          }
+        }, _callee, this);
+      }));
+      function calculate(_x) {
+        return _calculate.apply(this, arguments);
+      }
+      return calculate;
+    }()
+  }]);
+}();
+export { AbstractVCCalculatorBase as default };

package/dist/esm/vc/vc-observer-new/metric-calculator/fy25_03/index.js

@@ -0,0 +1,54 @@
+import _classCallCheck from "@babel/runtime/helpers/classCallCheck";
+import _createClass from "@babel/runtime/helpers/createClass";
+import _possibleConstructorReturn from "@babel/runtime/helpers/possibleConstructorReturn";
+import _getPrototypeOf from "@babel/runtime/helpers/getPrototypeOf";
+import _inherits from "@babel/runtime/helpers/inherits";
+function _callSuper(t, o, e) { return o = _getPrototypeOf(o), _possibleConstructorReturn(t, _isNativeReflectConstruct() ? Reflect.construct(o, e || [], _getPrototypeOf(t).constructor) : o.apply(t, e)); }
+function _isNativeReflectConstruct() { try { var t = !Boolean.prototype.valueOf.call(Reflect.construct(Boolean, [], function () {})); } catch (t) {} return (_isNativeReflectConstruct = function _isNativeReflectConstruct() { return !!t; })(); }
+import AbstractVCCalculatorBase from '../abstract-base-vc-calculator';
+import isViewportEntryData from '../utils/is-viewport-entry-data';
+var ABORTING_WINDOW_EVENT = ['wheel', 'scroll', 'keydown', 'resize'];
+var REVISION_NO = 'fy25.03';
+var CONSIDERED_ENTRY_TYPE = ['mutation:child-element', 'mutation:element', 'mutation:attribute', 'layout-shift', 'window:event'];
+var VCCalculator_FY25_03 = /*#__PURE__*/function (_AbstractVCCalculator) {
+  function VCCalculator_FY25_03() {
+    _classCallCheck(this, VCCalculator_FY25_03);
+    return _callSuper(this, VCCalculator_FY25_03, [REVISION_NO]);
+  }
+  _inherits(VCCalculator_FY25_03, _AbstractVCCalculator);
+  return _createClass(VCCalculator_FY25_03, [{
+    key: "isEntryIncluded",
+    value: function isEntryIncluded(entry) {
+      if (!CONSIDERED_ENTRY_TYPE.includes(entry.type)) {
+        return false;
+      }
+      if (entry.type === 'mutation:attribute') {
+        var entryData = entry.data;
+        var attributeName = entryData.attributeName;
+        if (!attributeName) {
+          return false;
+        }
+        return true;
+      }
+      if (isViewportEntryData(entry.data) && !entry.data.visible) {
+        return false;
+      }
+      return true;
+    }
+  }, {
+    key: "isVCClean",
+    value: function isVCClean(filteredEntries) {
+      var hasAbortEvent = filteredEntries.some(function (entry) {
+        if (entry.type === 'window:event') {
+          var data = entry.data;
+          if (ABORTING_WINDOW_EVENT.includes(data.eventType)) {
+            return true;
+          }
+        }
+        return false;
+      });
+      return !hasAbortEvent;
+    }
+  }]);
+}(AbstractVCCalculatorBase);
+export { VCCalculator_FY25_03 as default };

package/dist/esm/vc/vc-observer-new/metric-calculator/percentile-calc/canvas-heatmap/canvas-pixel.js

@@ -0,0 +1,268 @@
+import _asyncToGenerator from "@babel/runtime/helpers/asyncToGenerator";
+import _classCallCheck from "@babel/runtime/helpers/classCallCheck";
+import _createClass from "@babel/runtime/helpers/createClass";
+import _regeneratorRuntime from "@babel/runtime/regenerator";
+import taskYield from '../../utils/task-yield';
+
+// 24-bit color value
+
+/**
+ * Class responsible for managing a scaled canvas and tracking pixel drawing operations.
+ * It uses an OffscreenCanvas for better performance and maintains a mapping between
+ * colors and timestamps for pixel counting purposes.
+ */
+export var ViewportCanvas = /*#__PURE__*/function () {
+  /** The underlying OffscreenCanvas instance */
+
+  /** The 2D rendering context of the canvas */
+
+  /** Scale factor applied to the canvas (affects final pixel counts) */
+
+  /** Maps unique colors to their corresponding timestamps */
+
+  /** Counter used to generate unique colors */
+
+  /**
+   * Creates a new ViewportCanvas instance.
+   * @param viewport - The dimensions of the viewport
+   * @param scaleFactor - Scale factor to apply to the canvas (default: 0.5)
+   * @throws {Error} If canvas context cannot be obtained
+   */
+  function ViewportCanvas(viewport) {
+    var scaleFactor = arguments.length > 1 && arguments[1] !== undefined ? arguments[1] : 1;
+    _classCallCheck(this, ViewportCanvas);
+    this.scaleFactor = scaleFactor;
+    this.colorCounter = 1;
+    this.colorTimeMap = new Map();
+
+    // Calculate scaled dimensions
+    this.scaledWidth = Math.ceil(viewport.width * scaleFactor);
+    this.scaledHeight = Math.ceil(viewport.height * scaleFactor);
+    this.scaleX = this.scaledWidth / viewport.width;
+    this.scaleY = this.scaledHeight / viewport.height;
+
+    // Initialize OffscreenCanvas with scaled dimensions
+    this.canvas = document.createElement('canvas');
+    this.canvas.width = this.scaledWidth;
+    this.canvas.height = this.scaledHeight;
+    var ctx = this.canvas.getContext('2d', {
+      alpha: false,
+      // Disable alpha channel for better performance
+      willReadFrequently: true,
+      // Optimize for frequent pixel reading
+      colorSpace: 'srgb' // Use standard RGB color space
+    });
+    if (!ctx) {
+      throw new Error('Could not get canvas context');
+    }
+    this.ctx = ctx;
+    this.ctx.globalCompositeOperation = 'source-over';
+    this.clear();
+  }
+  return _createClass(ViewportCanvas, [{
+    key: "getScaledDimensions",
+    value: function getScaledDimensions() {
+      return {
+        width: this.scaledWidth,
+        height: this.scaledHeight
+      };
+    }
+
+    /**
+     * Clears the entire canvas by removing all drawn content.
+     * @private
+     */
+  }, {
+    key: "clear",
+    value: function clear() {
+      this.ctx.clearRect(0, 0, this.canvas.width, this.canvas.height);
+    }
+
+    /**
+     * Generates a unique RGB color from an incrementing counter.
+     * Uses a 24-bit color space (16,777,216 possible colors).
+     *
+     * @private
+     * @returns A unique RGB color string
+     *
+     * @example
+     * // Example bit operations for color 0x00FF8040:
+     * // Red:   (0x00FF8040 >> 16) & 0xFF = 0xFF = 255
+     * // Green: (0x00FF8040 >> 8) & 0xFF  = 0x80 = 128
+     * // Blue:   0x00FF8040 & 0xFF        = 0x40 = 64
+     */
+  }, {
+    key: "generateColor",
+    value: function generateColor() {
+      // Wrap around at 16,777,215 (0x00FFFFFF) to stay within 24-bit color space
+      var rgbColor = this.colorCounter++ % 0x00ffffff;
+      return getRGBComponents(rgbColor);
+    }
+
+    /**
+     * Draws a rectangle on the canvas with a unique color and associates it with a timestamp.
+     * Each drawn rectangle gets a unique color which is mapped to the provided timestamp.
+     *
+     * @param rect - The rectangle dimensions to draw
+     * @param timestamp - The timestamp to associate with this drawing operation
+     */
+  }, {
+    key: "drawRect",
+    value: function drawRect(rect, timestamp) {
+      var color = this.generateColor();
+      this.colorTimeMap.set(color, timestamp);
+      this.ctx.fillStyle = color;
+      if (this.scaleFactor === 1) {
+        return this.ctx.fillRect(rect.x, rect.y, rect.width, rect.height);
+      }
+      var scaledX = rect.x * this.scaleX;
+      var scaledY = rect.y * this.scaleY;
+      var scaledWidth = rect.width * this.scaleX;
+      var scaledHeight = rect.height * this.scaleY;
+      this.ctx.fillRect(Math.floor(scaledX), Math.ceil(scaledY), Math.max(scaledWidth, 1), Math.max(scaledHeight, 1));
+    }
+
+    /**
+     * Calculates the number of pixels drawn for each timestamp.
+     * This method:
+     * 1. Reads the pixel data from the canvas
+     * 2. Counts pixels of each unique color
+     * 3. Maps colors back to their timestamps
+     * 4. Adjusts counts based on the scale factor
+     *
+     * @returns A Map containing timestamp to pixel count mappings
+     */
+  }, {
+    key: "getPixelCounts",
+    value: (function () {
+      var _getPixelCounts = _asyncToGenerator( /*#__PURE__*/_regeneratorRuntime.mark(function _callee() {
+        var imageData, timestampsAmount, pixelCounts, timePixelCounts, i, count, color, rgbColor, timestamp;
+        return _regeneratorRuntime.wrap(function _callee$(_context) {
+          while (1) switch (_context.prev = _context.next) {
+            case 0:
+              imageData = this.ctx.getImageData(0, 0, this.canvas.width, this.canvas.height);
+              timestampsAmount = this.colorTimeMap.size;
+              _context.next = 4;
+              return calculateDrawnPixelsRaw(imageData, this.scaleFactor, timestampsAmount);
+            case 4:
+              pixelCounts = _context.sent;
+              // Convert color counts to timestamp counts
+              timePixelCounts = new Map();
+              i = 0;
+            case 7:
+              if (!(i < pixelCounts.length)) {
+                _context.next = 18;
+                break;
+              }
+              count = pixelCounts[i];
+              if (!(typeof count !== 'number')) {
+                _context.next = 11;
+                break;
+              }
+              return _context.abrupt("continue", 15);
+            case 11:
+              color = i + 1;
+              rgbColor = getRGBComponents(color);
+              timestamp = this.colorTimeMap.get(rgbColor);
+              if (timestamp !== undefined) {
+                timePixelCounts.set(timestamp, (timePixelCounts.get(timestamp) || 0) + count);
+              }
+            case 15:
+              i++;
+              _context.next = 7;
+              break;
+            case 18:
+              return _context.abrupt("return", timePixelCounts);
+            case 19:
+            case "end":
+              return _context.stop();
+          }
+        }, _callee, this);
+      }));
+      function getPixelCounts() {
+        return _getPixelCounts.apply(this, arguments);
+      }
+      return getPixelCounts;
+    }())
+  }]);
+}();
+
+/**
+ * Converts a number into RGB components in such a way that they can be recombined
+ * to form the original number using bitwise operations.
+ * @param number - The input number to be split into RGB components.
+ * @returns The RGB color string in the format "rgb(r, g, b)".
+ */
+export function getRGBComponents(n) {
+  // Ensure the input is within the valid range for a 24-bit color
+  if (n < 0 || n > 0xffffff) {
+    throw new Error('Input number must be between 0 and 16777215 (inclusive).');
+  }
+
+  // Extract blue component (bits 0-7)
+  var blue = n & 0xff;
+
+  // Extract green component (bits 8-15)
+  var green = n >> 8 & 0xff;
+
+  // Extract red component (bits 16-23)
+  var red = n >> 16 & 0xff;
+  return "rgb(".concat(red, ", ").concat(green, ", ").concat(blue, ")");
+}
+
+/**
+ * Calculates the number of pixels drawn for each color in the image data.
+ * @param imageData - The image data to analyze.
+ * @param scaleFactor - The scale factor applied to the canvas.
+ * @param arraySize - The amount of timestamps that were drawn in the viewport
+ * @returns A Map containing color to pixel count mappings.
+ */
+export function calculateDrawnPixelsRaw(_x, _x2, _x3) {
+  return _calculateDrawnPixelsRaw.apply(this, arguments);
+}
+function _calculateDrawnPixelsRaw() {
+  _calculateDrawnPixelsRaw = _asyncToGenerator( /*#__PURE__*/_regeneratorRuntime.mark(function _callee2(imageData, scaleFactor, arraySize) {
+    var data, scaleCompensation, arr, i, color, colorIndex;
+    return _regeneratorRuntime.wrap(function _callee2$(_context2) {
+      while (1) switch (_context2.prev = _context2.next) {
+        case 0:
+          data = imageData.data;
+          scaleCompensation = Math.round(1 / (scaleFactor * scaleFactor));
+          arr = new Uint32Array(arraySize);
+          i = 0;
+        case 4:
+          if (!(i < data.length)) {
+            _context2.next = 12;
+            break;
+          }
+          // Check alpha
+          if (data[i + 3] !== 0) {
+            // Combine RGB components into a single 24-bit color value:
+            // (data[i] << 16)   - Shift red component left 16 bits   (bits 16-23)
+            // (data[i + 1] << 8) - Shift green component left 8 bits (bits 8-15)
+            // data[i + 2]       - Blue component stays as is         (bits 0-7)
+            // The | operator combines all bits together
+            color = data[i] << 16 | data[i + 1] << 8 | data[i + 2];
+            colorIndex = color - 1;
+            arr[colorIndex] = (arr[colorIndex] || 0) + scaleCompensation;
+          }
+          if (!(i % 10000 === 0)) {
+            _context2.next = 9;
+            break;
+          }
+          _context2.next = 9;
+          return taskYield();
+        case 9:
+          i += 4;
+          _context2.next = 4;
+          break;
+        case 12:
+          return _context2.abrupt("return", arr);
+        case 13:
+        case "end":
+          return _context2.stop();
+      }
+    }, _callee2);
+  }));
+  return _calculateDrawnPixelsRaw.apply(this, arguments);
+}

package/dist/esm/vc/vc-observer-new/metric-calculator/percentile-calc/canvas-heatmap/index.js

@@ -0,0 +1,143 @@
+import _slicedToArray from "@babel/runtime/helpers/slicedToArray";
+import _asyncToGenerator from "@babel/runtime/helpers/asyncToGenerator";
+import _regeneratorRuntime from "@babel/runtime/regenerator";
+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; }
+import { fg } from '@atlaskit/platform-feature-flags';
+import { ViewportCanvas } from './canvas-pixel';
+export default function calculateTTVCPercentiles(_x) {
+  return _calculateTTVCPercentiles.apply(this, arguments);
+}
+function _calculateTTVCPercentiles() {
+  _calculateTTVCPercentiles = _asyncToGenerator( /*#__PURE__*/_regeneratorRuntime.mark(function _callee(_ref) {
+    var viewport, orderedEntries, percentiles, canvas, elementMap, _iterator3, _step3, entry, rect, elementName, timePixelCounts, viewportTotalPixels;
+    return _regeneratorRuntime.wrap(function _callee$(_context) {
+      while (1) switch (_context.prev = _context.next) {
+        case 0:
+          viewport = _ref.viewport, orderedEntries = _ref.orderedEntries, percentiles = _ref.percentiles;
+          canvas = new ViewportCanvas(viewport, fg('platform_ufo_canvas_heatmap_full_precision') ? 1 : 0.25);
+          elementMap = new Map();
+          _iterator3 = _createForOfIteratorHelper(orderedEntries);
+          _context.prev = 4;
+          _iterator3.s();
+        case 6:
+          if ((_step3 = _iterator3.n()).done) {
+            _context.next = 17;
+            break;
+          }
+          entry = _step3.value;
+          if ('rect' in entry.data) {
+            _context.next = 10;
+            break;
+          }
+          return _context.abrupt("continue", 15);
+        case 10:
+          rect = entry.data.rect;
+          elementName = entry.data.elementName;
+          canvas.drawRect(rect, entry.time);
+          if (!elementMap.has(entry.time)) {
+            elementMap.set(entry.time, new Set());
+          }
+          elementMap.get(entry.time).add(elementName);
+        case 15:
+          _context.next = 6;
+          break;
+        case 17:
+          _context.next = 22;
+          break;
+        case 19:
+          _context.prev = 19;
+          _context.t0 = _context["catch"](4);
+          _iterator3.e(_context.t0);
+        case 22:
+          _context.prev = 22;
+          _iterator3.f();
+          return _context.finish(22);
+        case 25:
+          _context.next = 27;
+          return canvas.getPixelCounts();
+        case 27:
+          timePixelCounts = _context.sent;
+          viewportTotalPixels = viewport.width * viewport.height;
+          return _context.abrupt("return", calculatePercentiles(timePixelCounts, elementMap, percentiles, viewportTotalPixels));
+        case 30:
+        case "end":
+          return _context.stop();
+      }
+    }, _callee, null, [[4, 19, 22, 25]]);
+  }));
+  return _calculateTTVCPercentiles.apply(this, arguments);
+}
+export function calculatePercentiles(timePixelCounts, elementMap, unorderedPercentiles, totalPixels) {
+  var results = {};
+  var cumulativePixels = 0;
+  var percentiles = unorderedPercentiles.sort(function (a, b) {
+    return a - b;
+  });
+
+  // Sort entries by timestamp for consistent processing
+  var sortedEntries = Array.from(timePixelCounts.entries()).sort(function (_ref2, _ref3) {
+    var _ref4 = _slicedToArray(_ref2, 1),
+      timeA = _ref4[0];
+    var _ref5 = _slicedToArray(_ref3, 1),
+      timeB = _ref5[0];
+    return Number(timeA) - Number(timeB);
+  });
+  var percentileIndex = 0;
+  var domElementsBuffer = new Set();
+  var _iterator = _createForOfIteratorHelper(sortedEntries),
+    _step;
+  try {
+    for (_iterator.s(); !(_step = _iterator.n()).done;) {
+      var _step$value = _slicedToArray(_step.value, 2),
+        time = _step$value[0],
+        pixelCount = _step$value[1];
+      cumulativePixels += pixelCount;
+      var percentCovered = cumulativePixels / totalPixels * 100;
+      var elementNames = elementMap.get(time) || new Set();
+      elementNames.forEach(function (elName) {
+        return domElementsBuffer.add(elName);
+      });
+      var matchesAnyCheckpoints = false;
+      while (percentileIndex < percentiles.length && percentCovered >= percentiles[percentileIndex]) {
+        results["".concat(percentiles[percentileIndex])] = {
+          t: Number(time),
+          e: Array.from(domElementsBuffer)
+        };
+        percentileIndex++;
+        matchesAnyCheckpoints = true;
+      }
+      if (matchesAnyCheckpoints) {
+        domElementsBuffer.clear();
+      }
+      if (percentileIndex >= percentiles.length) {
+        break;
+      }
+    }
+
+    // Fill in any missing percentiles
+  } catch (err) {
+    _iterator.e(err);
+  } finally {
+    _iterator.f();
+  }
+  var _iterator2 = _createForOfIteratorHelper(percentiles),
+    _step2;
+  try {
+    for (_iterator2.s(); !(_step2 = _iterator2.n()).done;) {
+      var percentile = _step2.value;
+      if (!(percentile in results)) {
+        results["".concat(percentile)] = {
+          t: 0,
+          e: []
+        };
+      }
+    }
+  } catch (err) {
+    _iterator2.e(err);
+  } finally {
+    _iterator2.f();
+  }
+  return results;
+}