@atlaskit/react-ufo 3.1.3 → 3.2.0

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

@@ -0,0 +1,361 @@
+import _toConsumableArray from "@babel/runtime/helpers/toConsumableArray";
+import _defineProperty from "@babel/runtime/helpers/defineProperty";
+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";
+function ownKeys(e, r) { var t = Object.keys(e); if (Object.getOwnPropertySymbols) { var o = Object.getOwnPropertySymbols(e); r && (o = o.filter(function (r) { return Object.getOwnPropertyDescriptor(e, r).enumerable; })), t.push.apply(t, o); } return t; }
+function _objectSpread(e) { for (var r = 1; r < arguments.length; r++) { var t = null != arguments[r] ? arguments[r] : {}; r % 2 ? ownKeys(Object(t), !0).forEach(function (r) { _defineProperty(e, r, t[r]); }) : Object.getOwnPropertyDescriptors ? Object.defineProperties(e, Object.getOwnPropertyDescriptors(t)) : ownKeys(Object(t)).forEach(function (r) { Object.defineProperty(e, r, Object.getOwnPropertyDescriptor(t, r)); }); } return e; }
+import isViewportEntryData from '../../utils/is-viewport-entry-data';
+import taskYield from '../../utils/task-yield';
+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 = /*#__PURE__*/function () {
+  /**
+   * Heatmap Width
+   */
+
+  /**
+   * Heatmap Height
+   */
+
+  /**
+   * Heatmap Area (width * height)
+   */
+
+  function Heatmap(_ref) {
+    var viewport = _ref.viewport,
+      heatmapSize = _ref.heatmapSize;
+    _classCallCheck(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 _createClass(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 = _asyncToGenerator( /*#__PURE__*/_regeneratorRuntime.mark(function _callee(entries) {
+        var i, entry, time, type, data, rect, ratio, heatmapEntryData, roundedTop, roundedBottom, roundedLeft, roundedRight, row, col, cell, previousEntry;
+        return _regeneratorRuntime.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 (!isViewportEntryData(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 taskYield();
+            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 = _asyncToGenerator( /*#__PURE__*/_regeneratorRuntime.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 _regeneratorRuntime.wrap(function _callee2$(_context2) {
+          while (1) switch (_context2.prev = _context2.next) {
+            case 0:
+              sortedCheckpoints = _toConsumableArray(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 taskYield();
+            case 17:
+              i++;
+              _context2.next = 5;
+              break;
+            case 20:
+              sortedTimings = _toConsumableArray(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 = _toConsumableArray(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 taskYield();
+            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;
+    }()
+  }]);
+}();
+export { Heatmap as default };