@atlaskit/react-ufo 3.1.4 → 3.3.0

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

@@ -0,0 +1,151 @@
+"use strict";
+
+var _interopRequireDefault = require("@babel/runtime/helpers/interopRequireDefault");
+Object.defineProperty(exports, "__esModule", {
+  value: true
+});
+exports.calculatePercentiles = calculatePercentiles;
+exports.default = calculateTTVCPercentiles;
+var _regenerator = _interopRequireDefault(require("@babel/runtime/regenerator"));
+var _slicedToArray2 = _interopRequireDefault(require("@babel/runtime/helpers/slicedToArray"));
+var _asyncToGenerator2 = _interopRequireDefault(require("@babel/runtime/helpers/asyncToGenerator"));
+var _platformFeatureFlags = require("@atlaskit/platform-feature-flags");
+var _canvasPixel = require("./canvas-pixel");
+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; }
+function calculateTTVCPercentiles(_x) {
+  return _calculateTTVCPercentiles.apply(this, arguments);
+}
+function _calculateTTVCPercentiles() {
+  _calculateTTVCPercentiles = (0, _asyncToGenerator2.default)( /*#__PURE__*/_regenerator.default.mark(function _callee(_ref) {
+    var viewport, orderedEntries, percentiles, canvas, elementMap, _iterator3, _step3, entry, rect, elementName, timePixelCounts, viewportTotalPixels;
+    return _regenerator.default.wrap(function _callee$(_context) {
+      while (1) switch (_context.prev = _context.next) {
+        case 0:
+          viewport = _ref.viewport, orderedEntries = _ref.orderedEntries, percentiles = _ref.percentiles;
+          canvas = new _canvasPixel.ViewportCanvas(viewport, (0, _platformFeatureFlags.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);
+}
+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 = (0, _slicedToArray2.default)(_ref2, 1),
+      timeA = _ref4[0];
+    var _ref5 = (0, _slicedToArray2.default)(_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 = (0, _slicedToArray2.default)(_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;
+}

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

@@ -0,0 +1,367 @@
+"use strict";
+
+var _interopRequireDefault = require("@babel/runtime/helpers/interopRequireDefault");
+Object.defineProperty(exports, "__esModule", {
+  value: true
+});
+exports.default = void 0;
+var _regenerator = _interopRequireDefault(require("@babel/runtime/regenerator"));
+var _toConsumableArray2 = _interopRequireDefault(require("@babel/runtime/helpers/toConsumableArray"));
+var _defineProperty2 = _interopRequireDefault(require("@babel/runtime/helpers/defineProperty"));
+var _asyncToGenerator2 = _interopRequireDefault(require("@babel/runtime/helpers/asyncToGenerator"));
+var _classCallCheck2 = _interopRequireDefault(require("@babel/runtime/helpers/classCallCheck"));
+var _createClass2 = _interopRequireDefault(require("@babel/runtime/helpers/createClass"));
+var _isViewportEntryData = _interopRequireDefault(require("../../utils/is-viewport-entry-data"));
+var _taskYield = _interopRequireDefault(require("../../utils/task-yield"));
+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; }
+var MAX_HEATMAP_SIZE = 1000;
+function createEmptyHeatmapEntry() {
+  return {
+    head: null,
+    previousEntries: []
+  };
+}
+function createEmptyMap(heatmapWidth, heatmapHeight) {
+  return Array.from({
+    length: heatmapHeight
+  }).map(function () {
+    return Array.from({
+      length: heatmapWidth
+    }).map(createEmptyHeatmapEntry);
+  });
+}
+function isRectInside(a, b) {
+  if (!a || !b) {
+    return false;
+  }
+
+  // Check if all corners of rectangle a are within the bounds of rectangle b
+  return a.left >= b.left && a.right <= b.right && a.top >= b.top && a.bottom <= b.bottom;
+}
+var Heatmap = exports.default = /*#__PURE__*/function () {
+  /**
+   * Heatmap Width
+   */
+
+  /**
+   * Heatmap Height
+   */
+
+  /**
+   * Heatmap Area (width * height)
+   */
+
+  function Heatmap(_ref) {
+    var viewport = _ref.viewport,
+      heatmapSize = _ref.heatmapSize;
+    (0, _classCallCheck2.default)(this, Heatmap);
+    // TODO timeOrigin? do we need? for SSR??
+    this.viewport = viewport;
+    var safeSize = Math.min(heatmapSize, MAX_HEATMAP_SIZE);
+    if (viewport.width === 0 || viewport.height === 0) {
+      this.width = safeSize;
+      this.height = safeSize;
+      this.scaleX = 1;
+      this.scaleY = 1;
+      this.heatmapAreaSize = 0;
+      this.map = createEmptyMap(safeSize, safeSize);
+      return;
+    }
+    var aspectRatio = viewport.width / viewport.height;
+    if (aspectRatio > 1) {
+      // Landscape orientation
+      this.width = safeSize;
+      this.height = Math.round(safeSize / aspectRatio);
+    } else {
+      // Portrait orientation
+      this.width = safeSize;
+      this.height = Math.round(safeSize * aspectRatio);
+    }
+    this.scaleX = this.width / viewport.width;
+    this.scaleY = this.height / viewport.height;
+    this.heatmapAreaSize = this.width * this.height;
+    this.map = createEmptyMap(this.width, this.height);
+  }
+  return (0, _createClass2.default)(Heatmap, [{
+    key: "getHeatmap",
+    value: function getHeatmap() {
+      return this.map;
+    }
+  }, {
+    key: "getCell",
+    value: function getCell(row, col) {
+      var _this$map$row;
+      return (_this$map$row = this.map[row]) === null || _this$map$row === void 0 ? void 0 : _this$map$row[col];
+    }
+
+    /**
+     * Map Dom Rect to Heatmap Rect, rounded up to occupy full cell.
+     * @param rect DOM Rect
+     * @returns
+     */
+  }, {
+    key: "mapDOMRectToHeatmap",
+    value: function mapDOMRectToHeatmap(rect) {
+      var scaledX = rect.x * this.scaleX;
+      var scaledY = rect.y * this.scaleY;
+      var scaledWidth = rect.width * this.scaleX;
+      var scaledHeight = rect.height * this.scaleY;
+      return {
+        left: Math.floor(scaledX),
+        right: Math.ceil(scaledX + scaledWidth),
+        top: Math.floor(scaledY),
+        bottom: Math.ceil(scaledY + scaledHeight)
+      };
+    }
+
+    /**
+     * Calculate the ratio of a HeatmapRect compared to the full heatmap
+     *
+     * This function determines what fraction of the heatmap is covered by the given heatmap rectangle.
+     *
+     * @param rect
+     */
+  }, {
+    key: "getRatio",
+    value: function getRatio(rect) {
+      if (this.viewport.width === 0 || this.viewport.height === 0) {
+        return 0;
+      }
+      var right = rect.right,
+        left = rect.left,
+        bottom = rect.bottom,
+        top = rect.top;
+      var rectWidth = right - left;
+      var rectHeight = bottom - top;
+      var rectArea = rectWidth * rectHeight;
+      var ratio = rectArea / this.heatmapAreaSize;
+      if (ratio > 1) {
+        return 1;
+      }
+      return ratio;
+    }
+  }, {
+    key: "applyEntriesToHeatmap",
+    value: function () {
+      var _applyEntriesToHeatmap = (0, _asyncToGenerator2.default)( /*#__PURE__*/_regenerator.default.mark(function _callee(entries) {
+        var i, entry, time, type, data, rect, ratio, heatmapEntryData, roundedTop, roundedBottom, roundedLeft, roundedRight, row, col, cell, previousEntry;
+        return _regenerator.default.wrap(function _callee$(_context) {
+          while (1) switch (_context.prev = _context.next) {
+            case 0:
+              i = 0;
+            case 1:
+              if (!(i < entries.length)) {
+                _context.next = 37;
+                break;
+              }
+              entry = entries[i];
+              time = entry.time, type = entry.type, data = entry.data;
+              if (!(0, _isViewportEntryData.default)(data)) {
+                _context.next = 31;
+                break;
+              }
+              rect = this.mapDOMRectToHeatmap(data.rect);
+              ratio = this.getRatio(rect);
+              heatmapEntryData = {
+                time: time,
+                elementName: data.elementName,
+                ratio: ratio !== null && ratio !== void 0 ? ratio : null,
+                rect: rect,
+                source: type
+              };
+              roundedTop = Math.floor(rect.top);
+              roundedBottom = Math.min(rect.bottom, this.height);
+              roundedLeft = Math.floor(rect.left);
+              roundedRight = Math.min(rect.right, this.width);
+              row = roundedTop;
+            case 13:
+              if (!(row < roundedBottom)) {
+                _context.next = 31;
+                break;
+              }
+              col = roundedLeft;
+            case 15:
+              if (!(col < roundedRight)) {
+                _context.next = 28;
+                break;
+              }
+              cell = this.getCell(row, col);
+              if (cell) {
+                _context.next = 19;
+                break;
+              }
+              return _context.abrupt("continue", 25);
+            case 19:
+              previousEntry = cell.head; // When elements are added at the same time
+              // we try to keep the inner element changes as the head
+              if (!((previousEntry === null || previousEntry === void 0 ? void 0 : previousEntry.time) === entry.time && isRectInside(previousEntry.rect, heatmapEntryData.rect))) {
+                _context.next = 23;
+                break;
+              }
+              cell.previousEntries.push(_objectSpread(_objectSpread({}, heatmapEntryData), {}, {
+                source: 'mutation:parent-mounted'
+              }));
+              return _context.abrupt("continue", 25);
+            case 23:
+              cell.head = _objectSpread(_objectSpread({}, heatmapEntryData), {}, {
+                source: heatmapEntryData.source || null
+              });
+              if (previousEntry !== null) {
+                cell.previousEntries.push(previousEntry);
+              }
+            case 25:
+              col++;
+              _context.next = 15;
+              break;
+            case 28:
+              row++;
+              _context.next = 13;
+              break;
+            case 31:
+              if (!(i % 100 === 0)) {
+                _context.next = 34;
+                break;
+              }
+              _context.next = 34;
+              return (0, _taskYield.default)();
+            case 34:
+              i++;
+              _context.next = 1;
+              break;
+            case 37:
+            case "end":
+              return _context.stop();
+          }
+        }, _callee, this);
+      }));
+      function applyEntriesToHeatmap(_x) {
+        return _applyEntriesToHeatmap.apply(this, arguments);
+      }
+      return applyEntriesToHeatmap;
+    }()
+  }, {
+    key: "getVCPercentMetrics",
+    value: function () {
+      var _getVCPercentMetrics = (0, _asyncToGenerator2.default)( /*#__PURE__*/_regenerator.default.mark(function _callee2(vcPercentCheckpoint) {
+        var sortedCheckpoints, flattenHeatmap, totalCells, timestampMap, i, _cellHead$time, _timestampMap$get, cell, cellHead, timestamp, elementName, curr, sortedTimings, totalCellPainted, result, domElementsBuffer, _i, _timestamp, timestampInfo, cellCount, domElements, currVCRatio, currVCPercent, matchesAnyCheckpoints, checkpoint, _domElements;
+        return _regenerator.default.wrap(function _callee2$(_context2) {
+          while (1) switch (_context2.prev = _context2.next) {
+            case 0:
+              sortedCheckpoints = (0, _toConsumableArray2.default)(vcPercentCheckpoint).sort(function (a, b) {
+                return a - b;
+              });
+              flattenHeatmap = this.map.flat();
+              totalCells = flattenHeatmap.length;
+              timestampMap = new Map();
+              i = 0;
+            case 5:
+              if (!(i < flattenHeatmap.length)) {
+                _context2.next = 20;
+                break;
+              }
+              cell = flattenHeatmap[i];
+              cellHead = cell.head;
+              timestamp = Math.trunc((_cellHead$time = cellHead === null || cellHead === void 0 ? void 0 : cellHead.time) !== null && _cellHead$time !== void 0 ? _cellHead$time : 0);
+              elementName = cellHead === null || cellHead === void 0 ? void 0 : cellHead.elementName;
+              curr = (_timestampMap$get = timestampMap.get(timestamp)) !== null && _timestampMap$get !== void 0 ? _timestampMap$get : {
+                cellCount: 0,
+                domElements: new Set()
+              };
+              curr.cellCount += 1;
+              if (elementName) {
+                curr.domElements.add(elementName);
+              }
+              timestampMap.set(timestamp, curr);
+
+              // Every 10000 heatmap entries processed
+              // we give the browser the power
+              // to process any other high priority task
+              if (!(i > 10000 && i % 10000 === 0)) {
+                _context2.next = 17;
+                break;
+              }
+              _context2.next = 17;
+              return (0, _taskYield.default)();
+            case 17:
+              i++;
+              _context2.next = 5;
+              break;
+            case 20:
+              sortedTimings = (0, _toConsumableArray2.default)(timestampMap.keys()).sort(function (a, b) {
+                return a - b;
+              });
+              totalCellPainted = 0;
+              result = {};
+              domElementsBuffer = new Set();
+              _i = 0;
+            case 25:
+              if (!(_i < sortedTimings.length)) {
+                _context2.next = 52;
+                break;
+              }
+              _timestamp = sortedTimings[_i];
+              timestampInfo = timestampMap.get(_timestamp);
+              if (timestampInfo) {
+                _context2.next = 30;
+                break;
+              }
+              throw new Error('unexpected timestampInfo not found');
+            case 30:
+              cellCount = timestampInfo.cellCount, domElements = timestampInfo.domElements;
+              totalCellPainted += cellCount;
+              currVCRatio = totalCellPainted / totalCells;
+              currVCPercent = Math.round(currVCRatio * 100);
+              domElements.forEach(function (domElement) {
+                domElementsBuffer.add(domElement);
+              });
+              matchesAnyCheckpoints = false;
+            case 36:
+              if (!(sortedCheckpoints.length > 0 && currVCPercent >= sortedCheckpoints[0])) {
+                _context2.next = 45;
+                break;
+              }
+              checkpoint = sortedCheckpoints.shift();
+              _domElements = (0, _toConsumableArray2.default)(domElementsBuffer);
+              if (checkpoint) {
+                _context2.next = 41;
+                break;
+              }
+              return _context2.abrupt("break", 45);
+            case 41:
+              matchesAnyCheckpoints = true;
+              result[checkpoint.toString()] = {
+                t: _timestamp,
+                e: _domElements
+              };
+              _context2.next = 36;
+              break;
+            case 45:
+              if (matchesAnyCheckpoints) {
+                domElementsBuffer.clear();
+              }
+              if (!(_i % 500 === 0)) {
+                _context2.next = 49;
+                break;
+              }
+              _context2.next = 49;
+              return (0, _taskYield.default)();
+            case 49:
+              _i++;
+              _context2.next = 25;
+              break;
+            case 52:
+              return _context2.abrupt("return", result);
+            case 53:
+            case "end":
+              return _context2.stop();
+          }
+        }, _callee2, this);
+      }));
+      function getVCPercentMetrics(_x2) {
+        return _getVCPercentMetrics.apply(this, arguments);
+      }
+      return getVCPercentMetrics;
+    }()
+  }]);
+}();