@atlaskit/react-ufo 3.12.4 → 3.13.0

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

@@ -10,85 +10,260 @@ var _asyncToGenerator2 = _interopRequireDefault(require("@babel/runtime/helpers/
 var _classCallCheck2 = _interopRequireDefault(require("@babel/runtime/helpers/classCallCheck"));
 var _createClass2 = _interopRequireDefault(require("@babel/runtime/helpers/createClass"));
 var _platformFeatureFlags = require("@atlaskit/platform-feature-flags");
-var _percentileCalc = _interopRequireDefault(require("./percentile-calc"));
+var _percentileCalc = require("./percentile-calc");
 var _getViewportHeight = _interopRequireDefault(require("./utils/get-viewport-height"));
 var _getViewportWidth = _interopRequireDefault(require("./utils/get-viewport-width"));
+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; }
 var AbstractVCCalculatorBase = exports.default = /*#__PURE__*/function () {
   function AbstractVCCalculatorBase(revisionNo) {
     (0, _classCallCheck2.default)(this, AbstractVCCalculatorBase);
     this.revisionNo = revisionNo;
   }
   return (0, _createClass2.default)(AbstractVCCalculatorBase, [{
+    key: "filterViewportEntries",
+    value: function filterViewportEntries(entries) {
+      return entries.filter(function (entry) {
+        return 'rect' in entry.data;
+      });
+    }
+  }, {
+    key: "calculateBasic",
+    value: function () {
+      var _calculateBasic = (0, _asyncToGenerator2.default)( /*#__PURE__*/_regenerator.default.mark(function _callee(filteredEntries, startTime, stopTime) {
+        var percentiles, viewportEntries, vcLogs;
+        return _regenerator.default.wrap(function _callee$(_context) {
+          while (1) switch (_context.prev = _context.next) {
+            case 0:
+              percentiles = [25, 50, 75, 80, 85, 90, 95, 98, 99];
+              viewportEntries = this.filterViewportEntries(filteredEntries);
+              _context.next = 4;
+              return (0, _percentileCalc.calculateTTVCPercentiles)({
+                viewport: {
+                  width: (0, _getViewportWidth.default)(),
+                  height: (0, _getViewportHeight.default)()
+                },
+                startTime: startTime,
+                stopTime: stopTime,
+                orderedEntries: viewportEntries,
+                percentiles: percentiles
+              });
+            case 4:
+              vcLogs = _context.sent;
+              return _context.abrupt("return", vcLogs);
+            case 6:
+            case "end":
+              return _context.stop();
+          }
+        }, _callee, this);
+      }));
+      function calculateBasic(_x, _x2, _x3) {
+        return _calculateBasic.apply(this, arguments);
+      }
+      return calculateBasic;
+    }()
+  }, {
+    key: "calculateWithDebugInfo",
+    value: function () {
+      var _calculateWithDebugInfo = (0, _asyncToGenerator2.default)( /*#__PURE__*/_regenerator.default.mark(function _callee2(filteredEntries, startTime, stopTime, isPostInteraction, isVCClean, interactionId, dirtyReason) {
+        var percentiles, viewportEntries, vcLogs, vcDetails, percentileIndex, entryDataBuffer, _iterator, _step, _entry, time, viewportPercentage, entries, elementNames, previousResult, i, percentile, _ufo_devtool_onVCRev, _ref;
+        return _regenerator.default.wrap(function _callee2$(_context2) {
+          while (1) switch (_context2.prev = _context2.next) {
+            case 0:
+              percentiles = [25, 50, 75, 80, 85, 90, 95, 98, 99];
+              viewportEntries = this.filterViewportEntries(filteredEntries);
+              _context2.next = 4;
+              return (0, _percentileCalc.calculateTTVCPercentilesWithDebugInfo)({
+                viewport: {
+                  width: (0, _getViewportWidth.default)(),
+                  height: (0, _getViewportHeight.default)()
+                },
+                startTime: startTime,
+                stopTime: stopTime,
+                orderedEntries: viewportEntries
+              });
+            case 4:
+              vcLogs = _context2.sent;
+              vcDetails = {};
+              percentileIndex = 0;
+              entryDataBuffer = new Set();
+              if (!vcLogs) {
+                _context2.next = 28;
+                break;
+              }
+              _iterator = _createForOfIteratorHelper(vcLogs);
+              _context2.prev = 10;
+              _iterator.s();
+            case 12:
+              if ((_step = _iterator.n()).done) {
+                _context2.next = 20;
+                break;
+              }
+              _entry = _step.value;
+              time = _entry.time, viewportPercentage = _entry.viewportPercentage, entries = _entry.entries; // Only process entries if we haven't reached all percentiles
+              if (!(percentileIndex >= percentiles.length)) {
+                _context2.next = 17;
+                break;
+              }
+              return _context2.abrupt("break", 20);
+            case 17:
+              // Check if this entry matches any checkpoint percentiles
+              if (viewportPercentage >= percentiles[percentileIndex]) {
+                elementNames = entries.map(function (e) {
+                  return e.elementName;
+                }); // Process all matching percentiles in one go
+                while (percentileIndex < percentiles.length && viewportPercentage >= percentiles[percentileIndex]) {
+                  vcDetails["".concat(percentiles[percentileIndex])] = {
+                    t: Math.round(time),
+                    e: elementNames
+                  };
+                  percentileIndex++;
+                }
+
+                // Clear buffer after processing all matching percentiles
+                entryDataBuffer.clear();
+              } else {
+                // Only add to buffer if we haven't reached all percentiles
+                entries.forEach(function (e) {
+                  return entryDataBuffer.add(e);
+                });
+              }
+            case 18:
+              _context2.next = 12;
+              break;
+            case 20:
+              _context2.next = 25;
+              break;
+            case 22:
+              _context2.prev = 22;
+              _context2.t0 = _context2["catch"](10);
+              _iterator.e(_context2.t0);
+            case 25:
+              _context2.prev = 25;
+              _iterator.f();
+              return _context2.finish(25);
+            case 28:
+              // Fill in any missing percentiles with the last known values
+              previousResult = {
+                t: 0,
+                e: []
+              };
+              for (i = 0; i < percentiles.length; i++) {
+                percentile = percentiles[i];
+                if (!(percentile in vcDetails)) {
+                  vcDetails["".concat(percentile)] = previousResult;
+                } else {
+                  previousResult = vcDetails["".concat(percentile)];
+                }
+              }
+
+              // Handle devtool callback
+              if (!isPostInteraction && typeof window !== 'undefined' && typeof window.__ufo_devtool_onVCRevisionReady__ === 'function' && (0, _platformFeatureFlags.fg)('platform_ufo_ttvc_v3_devtool')) {
+                try {
+                  (_ufo_devtool_onVCRev = (_ref = window).__ufo_devtool_onVCRevisionReady__) === null || _ufo_devtool_onVCRev === void 0 || _ufo_devtool_onVCRev.call(_ref, {
+                    revision: this.revisionNo,
+                    isClean: isVCClean,
+                    abortReason: dirtyReason,
+                    vcLogs: vcLogs,
+                    interactionId: interactionId
+                  });
+                } catch (e) {
+                  // if any error communicating with devtool, we don't want to break the app
+                  // eslint-disable-next-line no-console
+                  console.error('Error in onVCRevisionReady', e);
+                }
+              }
+              return _context2.abrupt("return", vcDetails);
+            case 32:
+            case "end":
+              return _context2.stop();
+          }
+        }, _callee2, this, [[10, 22, 25, 28]]);
+      }));
+      function calculateWithDebugInfo(_x4, _x5, _x6, _x7, _x8, _x9, _x10) {
+        return _calculateWithDebugInfo.apply(this, arguments);
+      }
+      return calculateWithDebugInfo;
+    }()
+  }, {
     key: "calculate",
     value: function () {
-      var _calculate = (0, _asyncToGenerator2.default)( /*#__PURE__*/_regenerator.default.mark(function _callee(_ref) {
+      var _calculate = (0, _asyncToGenerator2.default)( /*#__PURE__*/_regenerator.default.mark(function _callee3(_ref2) {
         var _this = this,
           _vcDetails$90$t,
           _vcDetails$;
-        var startTime, stopTime, orderedEntries, filteredEntries, _this$getVCCleanStatu, _isVCClean, dirtyReason, _isVCClean2, vcDetails;
-        return _regenerator.default.wrap(function _callee$(_context) {
-          while (1) switch (_context.prev = _context.next) {
+        var startTime, stopTime, orderedEntries, interactionId, isPostInteraction, filteredEntries, isVCClean, dirtyReason, getVCCleanStatusResult, useDebugInfo, vcDetails;
+        return _regenerator.default.wrap(function _callee3$(_context3) {
+          while (1) switch (_context3.prev = _context3.next) {
             case 0:
-              startTime = _ref.startTime, stopTime = _ref.stopTime, orderedEntries = _ref.orderedEntries;
+              startTime = _ref2.startTime, stopTime = _ref2.stopTime, orderedEntries = _ref2.orderedEntries, interactionId = _ref2.interactionId, isPostInteraction = _ref2.isPostInteraction;
               filteredEntries = orderedEntries.filter(function (entry) {
                 return _this.isEntryIncluded(entry);
               });
               if (!(0, _platformFeatureFlags.fg)('platform_ufo_add_vc_abort_reason_by_revisions')) {
-                _context.next = 8;
+                _context3.next = 10;
                 break;
               }
-              _this$getVCCleanStatu = this.getVCCleanStatus(filteredEntries), _isVCClean = _this$getVCCleanStatu.isVCClean, dirtyReason = _this$getVCCleanStatu.dirtyReason;
-              if (_isVCClean) {
-                _context.next = 6;
+              getVCCleanStatusResult = this.getVCCleanStatus(filteredEntries);
+              isVCClean = getVCCleanStatusResult.isVCClean;
+              dirtyReason = getVCCleanStatusResult.dirtyReason;
+              if (isVCClean) {
+                _context3.next = 8;
                 break;
               }
-              return _context.abrupt("return", {
+              return _context3.abrupt("return", {
                 revision: this.revisionNo,
                 'metric:vc90': null,
                 clean: false,
                 abortReason: dirtyReason
               });
-            case 6:
-              _context.next = 11;
-              break;
             case 8:
-              _isVCClean2 = this.isVCClean(filteredEntries);
-              if (_isVCClean2) {
-                _context.next = 11;
+              _context3.next = 13;
+              break;
+            case 10:
+              isVCClean = this.isVCClean(filteredEntries);
+              if (isVCClean) {
+                _context3.next = 13;
                 break;
               }
-              return _context.abrupt("return", {
+              return _context3.abrupt("return", {
                 revision: this.revisionNo,
                 'metric:vc90': null,
                 clean: false
               });
-            case 11:
-              _context.next = 13;
-              return (0, _percentileCalc.default)({
-                viewport: {
-                  width: (0, _getViewportWidth.default)(),
-                  height: (0, _getViewportHeight.default)()
-                },
-                startTime: startTime,
-                stopTime: stopTime,
-                orderedEntries: filteredEntries,
-                percentiles: [25, 50, 75, 80, 85, 90, 95, 98, 99]
-              });
             case 13:
-              vcDetails = _context.sent;
-              return _context.abrupt("return", {
+              useDebugInfo = (0, _platformFeatureFlags.fg)('platform_ufo_ttvc_v3_devtool');
+              if (!useDebugInfo) {
+                _context3.next = 20;
+                break;
+              }
+              _context3.next = 17;
+              return this.calculateWithDebugInfo(filteredEntries, startTime, stopTime, isPostInteraction, isVCClean, interactionId, dirtyReason);
+            case 17:
+              _context3.t0 = _context3.sent;
+              _context3.next = 23;
+              break;
+            case 20:
+              _context3.next = 22;
+              return this.calculateBasic(filteredEntries, startTime, stopTime);
+            case 22:
+              _context3.t0 = _context3.sent;
+            case 23:
+              vcDetails = _context3.t0;
+              return _context3.abrupt("return", {
                 revision: this.revisionNo,
                 clean: true,
                 '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,
                 vcDetails: vcDetails !== null && vcDetails !== void 0 ? vcDetails : undefined
               });
-            case 15:
+            case 25:
             case "end":
-              return _context.stop();
+              return _context3.stop();
           }
-        }, _callee, this);
+        }, _callee3, this);
       }));
-      function calculate(_x) {
+      function calculate(_x11) {
         return _calculate.apply(this, arguments);
       }
       return calculate;

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

@@ -31,10 +31,10 @@ var VCCalculator_FY25_03 = exports.default = /*#__PURE__*/function (_AbstractVCC
   return (0, _createClass2.default)(VCCalculator_FY25_03, [{
     key: "isEntryIncluded",
     value: function isEntryIncluded(entry) {
-      if (!CONSIDERED_ENTRY_TYPE.includes(entry.type)) {
+      if (!CONSIDERED_ENTRY_TYPE.includes(entry.data.type)) {
         return false;
       }
-      if (entry.type === 'mutation:attribute') {
+      if (entry.data.type === 'mutation:attribute') {
         var entryData = entry.data;
         var attributeName = entryData.attributeName;
         if (!attributeName || KNOWN_ATTRIBUTES_THAT_DOES_NOT_CAUSE_LAYOUT_SHIFTS.includes(attributeName)) {
@@ -51,7 +51,7 @@ var VCCalculator_FY25_03 = exports.default = /*#__PURE__*/function (_AbstractVCC
     key: "isVCClean",
     value: function isVCClean(filteredEntries) {
       var hasAbortEvent = filteredEntries.some(function (entry) {
-        if (entry.type === 'window:event') {
+        if (entry.data.type === 'window:event') {
           var data = entry.data;
           if (ABORTING_WINDOW_EVENT.includes(data.eventType)) {
             return true;
@@ -66,7 +66,7 @@ var VCCalculator_FY25_03 = exports.default = /*#__PURE__*/function (_AbstractVCC
     value: function getVCCleanStatus(filteredEntries) {
       var dirtyReason = '';
       var hasAbortEvent = filteredEntries.some(function (entry) {
-        if (entry.type === 'window:event') {
+        if (entry.data.type === 'window:event') {
           var data = entry.data;
           if (ABORTING_WINDOW_EVENT.includes(data.eventType)) {
             dirtyReason = data.eventType === 'keydown' ? 'keypress' : data.eventType;

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

@@ -5,6 +5,8 @@ Object.defineProperty(exports, "__esModule", {
   value: true
 });
 exports.calculatePercentiles = calculatePercentiles;
+exports.calculatePercentilesWithDebugInfo = calculatePercentilesWithDebugInfo;
+exports.calculateTTVCPercentilesWithDebugInfo = calculateTTVCPercentilesWithDebugInfo;
 exports.default = void 0;
 var _regenerator = _interopRequireDefault(require("@babel/runtime/regenerator"));
 var _slicedToArray2 = _interopRequireDefault(require("@babel/runtime/helpers/slicedToArray"));
@@ -78,6 +80,69 @@ function _calculateTTVCPercentiles() {
   }));
   return _calculateTTVCPercentiles.apply(this, arguments);
 }
+function calculateTTVCPercentilesWithDebugInfo(_x2) {
+  return _calculateTTVCPercentilesWithDebugInfo.apply(this, arguments);
+}
+function _calculateTTVCPercentilesWithDebugInfo() {
+  _calculateTTVCPercentilesWithDebugInfo = (0, _asyncToGenerator2.default)( /*#__PURE__*/_regenerator.default.mark(function _callee2(_ref2) {
+    var viewport, orderedEntries, startTime, canvas, elementMap, _iterator3, _step3, entry, rect, timePixelCounts, canvasDimensions, totalPixels;
+    return _regenerator.default.wrap(function _callee2$(_context2) {
+      while (1) switch (_context2.prev = _context2.next) {
+        case 0:
+          viewport = _ref2.viewport, orderedEntries = _ref2.orderedEntries, startTime = _ref2.startTime;
+          canvas = new _canvasPixel.ViewportCanvas(viewport, (0, _platformFeatureFlags.fg)('platform_ufo_canvas_heatmap_full_precision') ? 1 : 0.25);
+          elementMap = new Map();
+          _iterator3 = _createForOfIteratorHelper(orderedEntries);
+          _context2.prev = 4;
+          _iterator3.s();
+        case 6:
+          if ((_step3 = _iterator3.n()).done) {
+            _context2.next = 16;
+            break;
+          }
+          entry = _step3.value;
+          if ('rect' in entry.data) {
+            _context2.next = 10;
+            break;
+          }
+          return _context2.abrupt("continue", 14);
+        case 10:
+          rect = entry.data.rect;
+          canvas.drawRect(rect, entry.time);
+          if (!elementMap.has(entry.time)) {
+            elementMap.set(entry.time, []);
+          }
+          elementMap.get(entry.time).push(entry.data);
+        case 14:
+          _context2.next = 6;
+          break;
+        case 16:
+          _context2.next = 21;
+          break;
+        case 18:
+          _context2.prev = 18;
+          _context2.t0 = _context2["catch"](4);
+          _iterator3.e(_context2.t0);
+        case 21:
+          _context2.prev = 21;
+          _iterator3.f();
+          return _context2.finish(21);
+        case 24:
+          _context2.next = 26;
+          return canvas.getPixelCounts();
+        case 26:
+          timePixelCounts = _context2.sent;
+          canvasDimensions = canvas.getScaledDimensions();
+          totalPixels = canvasDimensions.width * canvasDimensions.height;
+          return _context2.abrupt("return", calculatePercentilesWithDebugInfo(timePixelCounts, elementMap, totalPixels, startTime));
+        case 30:
+        case "end":
+          return _context2.stop();
+      }
+    }, _callee2, null, [[4, 18, 21, 24]]);
+  }));
+  return _calculateTTVCPercentilesWithDebugInfo.apply(this, arguments);
+}
 var _default = exports.default = calculateTTVCPercentiles;
 function calculatePercentiles(timePixelCounts, elementMap, unorderedPercentiles, totalPixels, startTime) {
   var results = {};
@@ -87,11 +152,11 @@ function calculatePercentiles(timePixelCounts, elementMap, unorderedPercentiles,
   });
 
   // Sort entries by timestamp for consistent processing
-  var sortedEntries = Array.from(timePixelCounts.entries()).sort(function (_ref2, _ref3) {
-    var _ref4 = (0, _slicedToArray2.default)(_ref2, 1),
-      timeA = _ref4[0];
+  var sortedEntries = Array.from(timePixelCounts.entries()).sort(function (_ref3, _ref4) {
     var _ref5 = (0, _slicedToArray2.default)(_ref3, 1),
-      timeB = _ref5[0];
+      timeA = _ref5[0];
+    var _ref6 = (0, _slicedToArray2.default)(_ref4, 1),
+      timeB = _ref6[0];
     return Number(timeA) - Number(timeB);
   });
   var percentileIndex = 0;
@@ -142,4 +207,29 @@ function calculatePercentiles(timePixelCounts, elementMap, unorderedPercentiles,
     previousResult = results["".concat(percentile)];
   }
   return results;
+}
+function calculatePercentilesWithDebugInfo(timePixelCounts, elementMap, totalPixels, startTime) {
+  var results = new Array(elementMap.size);
+  var cumulativePixels = 0;
+  var sortedEntries = Array.from(timePixelCounts.entries()).sort(function (_ref7, _ref8) {
+    var _ref9 = (0, _slicedToArray2.default)(_ref7, 1),
+      timeA = _ref9[0];
+    var _ref10 = (0, _slicedToArray2.default)(_ref8, 1),
+      timeB = _ref10[0];
+    return Number(timeA) - Number(timeB);
+  });
+  for (var i = 0; i < sortedEntries.length; i++) {
+    var _sortedEntries$i = (0, _slicedToArray2.default)(sortedEntries[i], 2),
+      time = _sortedEntries$i[0],
+      pixelCount = _sortedEntries$i[1];
+    cumulativePixels += pixelCount;
+    var percentCovered = cumulativePixels / totalPixels * 100;
+    var entryDatas = elementMap.get(time) || [];
+    results[i] = {
+      time: Math.round(Number(time - startTime)),
+      viewportPercentage: percentCovered,
+      entries: Array.from(entryDatas)
+    };
+  }
+  return results;
 }

package/dist/cjs/vc/vc-observer-new/metric-calculator/percentile-calc/canvas-heatmap/test-with-debug-info.js

@@ -0,0 +1,108 @@
+"use strict";
+
+var _interopRequireDefault = require("@babel/runtime/helpers/interopRequireDefault");
+var _classCallCheck2 = _interopRequireDefault(require("@babel/runtime/helpers/classCallCheck"));
+var _createClass2 = _interopRequireDefault(require("@babel/runtime/helpers/createClass"));
+var _index = require("./index");
+// Test utilities
+var createMockRect = function createMockRect() {
+  var x = arguments.length > 0 && arguments[0] !== undefined ? arguments[0] : 0;
+  var y = arguments.length > 1 && arguments[1] !== undefined ? arguments[1] : 0;
+  var width = arguments.length > 2 && arguments[2] !== undefined ? arguments[2] : 100;
+  var height = arguments.length > 3 && arguments[3] !== undefined ? arguments[3] : 100;
+  return new MockDOMRect(x, y, width, height);
+};
+var createViewportEntry = function createViewportEntry(elementName) {
+  var rect = arguments.length > 1 && arguments[1] !== undefined ? arguments[1] : createMockRect();
+  var visible = arguments.length > 2 && arguments[2] !== undefined ? arguments[2] : true;
+  var type = arguments.length > 3 && arguments[3] !== undefined ? arguments[3] : 'mutation:element';
+  return {
+    elementName: elementName,
+    rect: rect,
+    visible: visible,
+    type: type
+  };
+};
+var createTimePixelCounts = function createTimePixelCounts(counts) {
+  return new Map(counts);
+};
+var createElementMap = function createElementMap(entries) {
+  return new Map(entries);
+};
+var createExpectedResult = function createExpectedResult(time, viewportPercentage, entries) {
+  return {
+    time: time,
+    viewportPercentage: viewportPercentage,
+    entries: entries
+  };
+};
+var MockDOMRect = /*#__PURE__*/function () {
+  function MockDOMRect(x, y, width, height) {
+    (0, _classCallCheck2.default)(this, MockDOMRect);
+    this.x = x;
+    this.y = y;
+    this.width = width;
+    this.height = height;
+  }
+  return (0, _createClass2.default)(MockDOMRect, [{
+    key: "bottom",
+    get: function get() {
+      return this.y + this.height;
+    }
+  }, {
+    key: "left",
+    get: function get() {
+      return this.x;
+    }
+  }, {
+    key: "right",
+    get: function get() {
+      return this.x + this.width;
+    }
+  }, {
+    key: "top",
+    get: function get() {
+      return this.y;
+    }
+  }, {
+    key: "toJSON",
+    value: function toJSON() {
+      return {
+        x: this.x,
+        y: this.y,
+        width: this.width,
+        height: this.height
+      };
+    }
+  }]);
+}();
+describe('calculatePercentilesWithDebugInfo', function () {
+  it('should correctly calculate percentiles with accumulated elements from timestamps', function () {
+    var timePixelCounts = createTimePixelCounts([[100, 10], [200, 20], [300, 10], [400, 10]]);
+    var elementMap = createElementMap([[100, [createViewportEntry('div'), createViewportEntry('span')]], [200, [createViewportEntry('img')]], [300, [createViewportEntry('p'), createViewportEntry('a')]], [400, [createViewportEntry('img')]]]);
+    var expected = [createExpectedResult(100, 20, [createViewportEntry('div'), createViewportEntry('span')]), createExpectedResult(200, 60, [createViewportEntry('img')]), createExpectedResult(300, 80, [createViewportEntry('p'), createViewportEntry('a')]), createExpectedResult(400, 100, [createViewportEntry('img')])];
+    var result = (0, _index.calculatePercentilesWithDebugInfo)(timePixelCounts, elementMap, 50, 0);
+    expect(result).toEqual(expected);
+  });
+  it('should handle empty entries gracefully', function () {
+    var timePixelCounts = new Map();
+    var elementMap = new Map();
+    var expected = [];
+    var result = (0, _index.calculatePercentilesWithDebugInfo)(timePixelCounts, elementMap, 100, 0);
+    expect(result).toEqual(expected);
+  });
+  it('should handle non-sequential timestamps', function () {
+    var timePixelCounts = createTimePixelCounts([[300, 70], [100, 30]]);
+    var elementMap = createElementMap([[300, [createViewportEntry('p'), createViewportEntry('a')]], [100, [createViewportEntry('div')]]]);
+    var expected = [createExpectedResult(100, 30, [createViewportEntry('div')]), createExpectedResult(300, 100, [createViewportEntry('p'), createViewportEntry('a')])];
+    var result = (0, _index.calculatePercentilesWithDebugInfo)(timePixelCounts, elementMap, 100, 0);
+    expect(result).toEqual(expected);
+  });
+  it('should correctly calculate percentiles with startTime offset', function () {
+    var timePixelCounts = createTimePixelCounts([[100, 10], [200, 20], [300, 10], [400, 10]]);
+    var elementMap = createElementMap([[100, [createViewportEntry('div'), createViewportEntry('span')]], [200, [createViewportEntry('img')]], [300, [createViewportEntry('p'), createViewportEntry('a')]], [400, [createViewportEntry('img')]]]);
+    var expected = [createExpectedResult(50, 20, [createViewportEntry('div'), createViewportEntry('span')]), createExpectedResult(150, 60, [createViewportEntry('img')]), createExpectedResult(250, 80, [createViewportEntry('p'), createViewportEntry('a')]), createExpectedResult(350, 100, [createViewportEntry('img')])];
+    var result = (0, _index.calculatePercentilesWithDebugInfo)(timePixelCounts, elementMap, 50, 50);
+    expect(result).toEqual(expected);
+  });
+});

package/dist/cjs/vc/vc-observer-new/metric-calculator/percentile-calc/index.js

@@ -1,62 +1,21 @@
 "use strict";
 
-var _interopRequireDefault = require("@babel/runtime/helpers/interopRequireDefault");
+var _typeof = require("@babel/runtime/helpers/typeof");
 Object.defineProperty(exports, "__esModule", {
   value: true
 });
-exports.default = void 0;
-var _regenerator = _interopRequireDefault(require("@babel/runtime/regenerator"));
-var _asyncToGenerator2 = _interopRequireDefault(require("@babel/runtime/helpers/asyncToGenerator"));
-var _canvasHeatmap = _interopRequireDefault(require("./canvas-heatmap"));
-var _heatmap = _interopRequireDefault(require("./heatmap"));
-var _rectSweepingLine = _interopRequireDefault(require("./rect-sweeping-line"));
-function calculateTTVCPercentiles(_x) {
-  return _calculateTTVCPercentiles.apply(this, arguments);
-}
-function _calculateTTVCPercentiles() {
-  _calculateTTVCPercentiles = (0, _asyncToGenerator2.default)( /*#__PURE__*/_regenerator.default.mark(function _callee(arg) {
-    var algo, vcDetails, _vcDetails, _vcDetails2;
-    return _regenerator.default.wrap(function _callee$(_context) {
-      while (1) switch (_context.prev = _context.next) {
-        case 0:
-          algo = 'canvas_heatmap';
-          if (!(algo === 'canvas_heatmap')) {
-            _context.next = 6;
-            break;
-          }
-          _context.next = 4;
-          return (0, _canvasHeatmap.default)(arg);
-        case 4:
-          vcDetails = _context.sent;
-          return _context.abrupt("return", vcDetails);
-        case 6:
-          if (!(algo === 'rect_sweeping')) {
-            _context.next = 11;
-            break;
-          }
-          _context.next = 9;
-          return (0, _rectSweepingLine.default)(arg);
-        case 9:
-          _vcDetails = _context.sent;
-          return _context.abrupt("return", _vcDetails);
-        case 11:
-          if (!(algo === 'old_heatmap')) {
-            _context.next = 16;
-            break;
-          }
-          _context.next = 14;
-          return (0, _heatmap.default)(arg);
-        case 14:
-          _vcDetails2 = _context.sent;
-          return _context.abrupt("return", _vcDetails2);
-        case 16:
-          throw new Error('unexpected Error algo not chosen correctly');
-        case 17:
-        case "end":
-          return _context.stop();
-      }
-    }, _callee);
-  }));
-  return _calculateTTVCPercentiles.apply(this, arguments);
-}
-var _default = exports.default = calculateTTVCPercentiles;
+Object.defineProperty(exports, "calculateTTVCPercentiles", {
+  enumerable: true,
+  get: function get() {
+    return _canvasHeatmap.default;
+  }
+});
+Object.defineProperty(exports, "calculateTTVCPercentilesWithDebugInfo", {
+  enumerable: true,
+  get: function get() {
+    return _canvasHeatmap.calculateTTVCPercentilesWithDebugInfo;
+  }
+});
+var _canvasHeatmap = _interopRequireWildcard(require("./canvas-heatmap"));
+function _getRequireWildcardCache(e) { if ("function" != typeof WeakMap) return null; var r = new WeakMap(), t = new WeakMap(); return (_getRequireWildcardCache = function _getRequireWildcardCache(e) { return e ? t : r; })(e); }
+function _interopRequireWildcard(e, r) { if (!r && e && e.__esModule) return e; if (null === e || "object" != _typeof(e) && "function" != typeof e) return { default: e }; var t = _getRequireWildcardCache(r); if (t && t.has(e)) return t.get(e); var n = { __proto__: null }, a = Object.defineProperty && Object.getOwnPropertyDescriptor; for (var u in e) if ("default" !== u && {}.hasOwnProperty.call(e, u)) { var i = a ? Object.getOwnPropertyDescriptor(e, u) : null; i && (i.get || i.set) ? Object.defineProperty(n, u, i) : n[u] = e[u]; } return n.default = e, t && t.set(e, n), n; }