@atlaskit/react-ufo 3.12.4 → 3.13.0

This diff represents the content of publicly available package versions that have been released to one of the supported registries. The information contained in this diff is provided for informational purposes only and reflects changes between package versions as they appear in their respective public registries.
Files changed (109) hide show
  1. package/CHANGELOG.md +16 -0
  2. package/dist/cjs/create-experimental-interaction-metrics-payload/index.js +2 -1
  3. package/dist/cjs/create-payload/utils/get-vc-metrics.js +2 -1
  4. package/dist/cjs/vc/index.js +4 -2
  5. package/dist/cjs/vc/vc-observer/getVCRevisionDebugDetails.js +41 -0
  6. package/dist/cjs/vc/vc-observer/index.js +63 -33
  7. package/dist/cjs/vc/vc-observer/observers/index.js +3 -2
  8. package/dist/cjs/vc/vc-observer/observers/ssr-placeholders/index.js +38 -12
  9. package/dist/cjs/vc/vc-observer/observers/ssr-placeholders/ssr-scripts/collectSSRPlaceholderDimensions.js +9 -0
  10. package/dist/cjs/vc/vc-observer-new/index.js +13 -7
  11. package/dist/cjs/vc/vc-observer-new/metric-calculator/abstract-base-vc-calculator.js +211 -36
  12. package/dist/cjs/vc/vc-observer-new/metric-calculator/fy25_03/index.js +4 -4
  13. package/dist/cjs/vc/vc-observer-new/metric-calculator/percentile-calc/canvas-heatmap/index.js +94 -4
  14. package/dist/cjs/vc/vc-observer-new/metric-calculator/percentile-calc/canvas-heatmap/test-with-debug-info.js +108 -0
  15. package/dist/cjs/vc/vc-observer-new/metric-calculator/percentile-calc/index.js +16 -57
  16. package/dist/cjs/vc/vc-observer-new/viewport-observer/index.js +15 -5
  17. package/dist/cjs/vc/vc-observer-new/viewport-observer/mutation-observer/index.js +3 -1
  18. package/dist/es2019/create-experimental-interaction-metrics-payload/index.js +2 -1
  19. package/dist/es2019/create-payload/utils/get-vc-metrics.js +1 -0
  20. package/dist/es2019/vc/index.js +4 -2
  21. package/dist/es2019/vc/vc-observer/getVCRevisionDebugDetails.js +32 -0
  22. package/dist/es2019/vc/vc-observer/index.js +36 -1
  23. package/dist/es2019/vc/vc-observer/observers/index.js +2 -1
  24. package/dist/es2019/vc/vc-observer/observers/ssr-placeholders/index.js +38 -13
  25. package/dist/es2019/vc/vc-observer/observers/ssr-placeholders/ssr-scripts/collectSSRPlaceholderDimensions.js +9 -1
  26. package/dist/es2019/vc/vc-observer-new/index.js +12 -6
  27. package/dist/es2019/vc/vc-observer-new/metric-calculator/abstract-base-vc-calculator.js +115 -17
  28. package/dist/es2019/vc/vc-observer-new/metric-calculator/fy25_03/index.js +4 -4
  29. package/dist/es2019/vc/vc-observer-new/metric-calculator/percentile-calc/canvas-heatmap/index.js +44 -1
  30. package/dist/es2019/vc/vc-observer-new/metric-calculator/percentile-calc/canvas-heatmap/test-with-debug-info.js +75 -0
  31. package/dist/es2019/vc/vc-observer-new/metric-calculator/percentile-calc/index.js +2 -20
  32. package/dist/es2019/vc/vc-observer-new/viewport-observer/index.js +15 -5
  33. package/dist/es2019/vc/vc-observer-new/viewport-observer/mutation-observer/index.js +3 -1
  34. package/dist/esm/create-experimental-interaction-metrics-payload/index.js +2 -1
  35. package/dist/esm/create-payload/utils/get-vc-metrics.js +2 -1
  36. package/dist/esm/vc/index.js +4 -2
  37. package/dist/esm/vc/vc-observer/getVCRevisionDebugDetails.js +35 -0
  38. package/dist/esm/vc/vc-observer/index.js +63 -33
  39. package/dist/esm/vc/vc-observer/observers/index.js +3 -2
  40. package/dist/esm/vc/vc-observer/observers/ssr-placeholders/index.js +38 -12
  41. package/dist/esm/vc/vc-observer/observers/ssr-placeholders/ssr-scripts/collectSSRPlaceholderDimensions.js +9 -0
  42. package/dist/esm/vc/vc-observer-new/index.js +13 -7
  43. package/dist/esm/vc/vc-observer-new/metric-calculator/abstract-base-vc-calculator.js +211 -36
  44. package/dist/esm/vc/vc-observer-new/metric-calculator/fy25_03/index.js +4 -4
  45. package/dist/esm/vc/vc-observer-new/metric-calculator/percentile-calc/canvas-heatmap/index.js +94 -5
  46. package/dist/esm/vc/vc-observer-new/metric-calculator/percentile-calc/canvas-heatmap/test-with-debug-info.js +106 -0
  47. package/dist/esm/vc/vc-observer-new/metric-calculator/percentile-calc/index.js +2 -55
  48. package/dist/esm/vc/vc-observer-new/viewport-observer/index.js +15 -5
  49. package/dist/esm/vc/vc-observer-new/viewport-observer/mutation-observer/index.js +3 -1
  50. package/dist/types/config/index.d.ts +1 -0
  51. package/dist/types/vc/types.d.ts +2 -0
  52. package/dist/types/vc/vc-observer/getVCRevisionDebugDetails.d.ts +30 -0
  53. package/dist/types/vc/vc-observer/index.d.ts +1 -1
  54. package/dist/types/vc/vc-observer/observers/index.d.ts +3 -0
  55. package/dist/types/vc/vc-observer/observers/ssr-placeholders/index.d.ts +4 -1
  56. package/dist/types/vc/vc-observer/observers/ssr-placeholders/ssr-scripts/collectSSRPlaceholderDimensions.d.ts +1 -1
  57. package/dist/types/vc/vc-observer-new/index.d.ts +2 -0
  58. package/dist/types/vc/vc-observer-new/metric-calculator/abstract-base-vc-calculator.d.ts +4 -1
  59. package/dist/types/vc/vc-observer-new/metric-calculator/percentile-calc/canvas-heatmap/index.d.ts +5 -1
  60. package/dist/types/vc/vc-observer-new/metric-calculator/percentile-calc/canvas-heatmap/test-with-debug-info.d.ts +1 -0
  61. package/dist/types/vc/vc-observer-new/metric-calculator/percentile-calc/index.d.ts +2 -4
  62. package/dist/types/vc/vc-observer-new/metric-calculator/percentile-calc/types.d.ts +20 -2
  63. package/dist/types/vc/vc-observer-new/metric-calculator/types.d.ts +2 -0
  64. package/dist/types/vc/vc-observer-new/types.d.ts +5 -1
  65. package/dist/types/vc/vc-observer-new/viewport-observer/mutation-observer/index.d.ts +2 -0
  66. package/dist/types/vc/vc-observer-new/viewport-observer/types.d.ts +2 -0
  67. package/dist/types-ts4.5/config/index.d.ts +1 -0
  68. package/dist/types-ts4.5/vc/types.d.ts +2 -0
  69. package/dist/types-ts4.5/vc/vc-observer/getVCRevisionDebugDetails.d.ts +30 -0
  70. package/dist/types-ts4.5/vc/vc-observer/index.d.ts +1 -1
  71. package/dist/types-ts4.5/vc/vc-observer/observers/index.d.ts +3 -0
  72. package/dist/types-ts4.5/vc/vc-observer/observers/ssr-placeholders/index.d.ts +4 -1
  73. package/dist/types-ts4.5/vc/vc-observer/observers/ssr-placeholders/ssr-scripts/collectSSRPlaceholderDimensions.d.ts +1 -1
  74. package/dist/types-ts4.5/vc/vc-observer-new/index.d.ts +2 -0
  75. package/dist/types-ts4.5/vc/vc-observer-new/metric-calculator/abstract-base-vc-calculator.d.ts +4 -1
  76. package/dist/types-ts4.5/vc/vc-observer-new/metric-calculator/percentile-calc/canvas-heatmap/index.d.ts +5 -1
  77. package/dist/types-ts4.5/vc/vc-observer-new/metric-calculator/percentile-calc/canvas-heatmap/test-with-debug-info.d.ts +1 -0
  78. package/dist/types-ts4.5/vc/vc-observer-new/metric-calculator/percentile-calc/index.d.ts +2 -4
  79. package/dist/types-ts4.5/vc/vc-observer-new/metric-calculator/percentile-calc/types.d.ts +20 -2
  80. package/dist/types-ts4.5/vc/vc-observer-new/metric-calculator/types.d.ts +2 -0
  81. package/dist/types-ts4.5/vc/vc-observer-new/types.d.ts +5 -1
  82. package/dist/types-ts4.5/vc/vc-observer-new/viewport-observer/mutation-observer/index.d.ts +2 -0
  83. package/dist/types-ts4.5/vc/vc-observer-new/viewport-observer/types.d.ts +2 -0
  84. package/package.json +4 -1
  85. package/dist/cjs/vc/vc-observer-new/metric-calculator/percentile-calc/heatmap/heatmap.js +0 -367
  86. package/dist/cjs/vc/vc-observer-new/metric-calculator/percentile-calc/heatmap/index.js +0 -398
  87. package/dist/cjs/vc/vc-observer-new/metric-calculator/percentile-calc/heatmap/types.js +0 -5
  88. package/dist/cjs/vc/vc-observer-new/metric-calculator/percentile-calc/rect-sweeping-line/calc-union-area.js +0 -152
  89. package/dist/cjs/vc/vc-observer-new/metric-calculator/percentile-calc/rect-sweeping-line/index.js +0 -108
  90. package/dist/es2019/vc/vc-observer-new/metric-calculator/percentile-calc/heatmap/heatmap.js +0 -248
  91. package/dist/es2019/vc/vc-observer-new/metric-calculator/percentile-calc/heatmap/index.js +0 -263
  92. package/dist/es2019/vc/vc-observer-new/metric-calculator/percentile-calc/heatmap/types.js +0 -1
  93. package/dist/es2019/vc/vc-observer-new/metric-calculator/percentile-calc/rect-sweeping-line/calc-union-area.js +0 -99
  94. package/dist/es2019/vc/vc-observer-new/metric-calculator/percentile-calc/rect-sweeping-line/index.js +0 -60
  95. package/dist/esm/vc/vc-observer-new/metric-calculator/percentile-calc/heatmap/heatmap.js +0 -361
  96. package/dist/esm/vc/vc-observer-new/metric-calculator/percentile-calc/heatmap/index.js +0 -391
  97. package/dist/esm/vc/vc-observer-new/metric-calculator/percentile-calc/heatmap/types.js +0 -1
  98. package/dist/esm/vc/vc-observer-new/metric-calculator/percentile-calc/rect-sweeping-line/calc-union-area.js +0 -145
  99. package/dist/esm/vc/vc-observer-new/metric-calculator/percentile-calc/rect-sweeping-line/index.js +0 -101
  100. package/dist/types/vc/vc-observer-new/metric-calculator/percentile-calc/heatmap/heatmap.d.ts +0 -39
  101. package/dist/types/vc/vc-observer-new/metric-calculator/percentile-calc/heatmap/index.d.ts +0 -10
  102. package/dist/types/vc/vc-observer-new/metric-calculator/percentile-calc/heatmap/types.d.ts +0 -43
  103. package/dist/types/vc/vc-observer-new/metric-calculator/percentile-calc/rect-sweeping-line/calc-union-area.d.ts +0 -12
  104. package/dist/types/vc/vc-observer-new/metric-calculator/percentile-calc/rect-sweeping-line/index.d.ts +0 -25
  105. package/dist/types-ts4.5/vc/vc-observer-new/metric-calculator/percentile-calc/heatmap/heatmap.d.ts +0 -39
  106. package/dist/types-ts4.5/vc/vc-observer-new/metric-calculator/percentile-calc/heatmap/index.d.ts +0 -10
  107. package/dist/types-ts4.5/vc/vc-observer-new/metric-calculator/percentile-calc/heatmap/types.d.ts +0 -43
  108. package/dist/types-ts4.5/vc/vc-observer-new/metric-calculator/percentile-calc/rect-sweeping-line/calc-union-area.d.ts +0 -12
  109. package/dist/types-ts4.5/vc/vc-observer-new/metric-calculator/percentile-calc/rect-sweeping-line/index.d.ts +0 -25
@@ -1,391 +0,0 @@
1
- import _toConsumableArray from "@babel/runtime/helpers/toConsumableArray";
2
- import _defineProperty from "@babel/runtime/helpers/defineProperty";
3
- import _asyncToGenerator from "@babel/runtime/helpers/asyncToGenerator";
4
- import _classCallCheck from "@babel/runtime/helpers/classCallCheck";
5
- import _createClass from "@babel/runtime/helpers/createClass";
6
- import _regeneratorRuntime from "@babel/runtime/regenerator";
7
- 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; }
8
- 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; }
9
- import isViewportEntryData from '../../utils/is-viewport-entry-data';
10
- import taskYield from '../../utils/task-yield';
11
- var MAX_HEATMAP_SIZE = 1000;
12
- function createEmptyHeatmapEntry() {
13
- return {
14
- head: null,
15
- previousEntries: []
16
- };
17
- }
18
- function createEmptyMap(heatmapWidth, heatmapHeight) {
19
- return Array.from({
20
- length: heatmapHeight
21
- }).map(function () {
22
- return Array.from({
23
- length: heatmapWidth
24
- }).map(createEmptyHeatmapEntry);
25
- });
26
- }
27
- function isRectInside(a, b) {
28
- if (!a || !b) {
29
- return false;
30
- }
31
-
32
- // Check if all corners of rectangle a are within the bounds of rectangle b
33
- return a.left >= b.left && a.right <= b.right && a.top >= b.top && a.bottom <= b.bottom;
34
- }
35
- var Heatmap = /*#__PURE__*/function () {
36
- /**
37
- * Heatmap Width
38
- */
39
-
40
- /**
41
- * Heatmap Height
42
- */
43
-
44
- /**
45
- * Heatmap Area (width * height)
46
- */
47
-
48
- function Heatmap(_ref) {
49
- var viewport = _ref.viewport,
50
- heatmapSize = _ref.heatmapSize;
51
- _classCallCheck(this, Heatmap);
52
- // TODO timeOrigin? do we need? for SSR??
53
- this.viewport = viewport;
54
- var safeSize = Math.min(heatmapSize, MAX_HEATMAP_SIZE);
55
- if (viewport.width === 0 || viewport.height === 0) {
56
- this.width = safeSize;
57
- this.height = safeSize;
58
- this.scaleX = 1;
59
- this.scaleY = 1;
60
- this.heatmapAreaSize = 0;
61
- this.map = createEmptyMap(safeSize, safeSize);
62
- return;
63
- }
64
- var aspectRatio = viewport.width / viewport.height;
65
- if (aspectRatio > 1) {
66
- // Landscape orientation
67
- this.width = safeSize;
68
- this.height = Math.round(safeSize / aspectRatio);
69
- } else {
70
- // Portrait orientation
71
- this.width = safeSize;
72
- this.height = Math.round(safeSize * aspectRatio);
73
- }
74
- this.scaleX = this.width / viewport.width;
75
- this.scaleY = this.height / viewport.height;
76
- this.heatmapAreaSize = this.width * this.height;
77
- this.map = createEmptyMap(this.width, this.height);
78
- }
79
- return _createClass(Heatmap, [{
80
- key: "getHeatmap",
81
- value: function getHeatmap() {
82
- return this.map;
83
- }
84
- }, {
85
- key: "getCell",
86
- value: function getCell(row, col) {
87
- var _this$map$row;
88
- return (_this$map$row = this.map[row]) === null || _this$map$row === void 0 ? void 0 : _this$map$row[col];
89
- }
90
-
91
- /**
92
- * Map Dom Rect to Heatmap Rect, rounded up to occupy full cell.
93
- * @param rect DOM Rect
94
- * @returns
95
- */
96
- }, {
97
- key: "mapDOMRectToHeatmap",
98
- value: function mapDOMRectToHeatmap(rect) {
99
- var scaledX = rect.x * this.scaleX;
100
- var scaledY = rect.y * this.scaleY;
101
- var scaledWidth = rect.width * this.scaleX;
102
- var scaledHeight = rect.height * this.scaleY;
103
- return {
104
- left: Math.floor(scaledX),
105
- right: Math.ceil(scaledX + scaledWidth),
106
- top: Math.floor(scaledY),
107
- bottom: Math.ceil(scaledY + scaledHeight)
108
- };
109
- }
110
-
111
- /**
112
- * Calculate the ratio of a HeatmapRect compared to the full heatmap
113
- *
114
- * This function determines what fraction of the heatmap is covered by the given heatmap rectangle.
115
- *
116
- * @param rect
117
- */
118
- }, {
119
- key: "getRatio",
120
- value: function getRatio(rect) {
121
- if (this.viewport.width === 0 || this.viewport.height === 0) {
122
- return 0;
123
- }
124
- var right = rect.right,
125
- left = rect.left,
126
- bottom = rect.bottom,
127
- top = rect.top;
128
- var rectWidth = right - left;
129
- var rectHeight = bottom - top;
130
- var rectArea = rectWidth * rectHeight;
131
- var ratio = rectArea / this.heatmapAreaSize;
132
- if (ratio > 1) {
133
- return 1;
134
- }
135
- return ratio;
136
- }
137
- }, {
138
- key: "applyEntriesToHeatmap",
139
- value: function () {
140
- var _applyEntriesToHeatmap = _asyncToGenerator( /*#__PURE__*/_regeneratorRuntime.mark(function _callee(entries) {
141
- var i, entry, time, type, data, rect, ratio, heatmapEntryData, roundedTop, roundedBottom, roundedLeft, roundedRight, row, col, cell, previousEntry;
142
- return _regeneratorRuntime.wrap(function _callee$(_context) {
143
- while (1) switch (_context.prev = _context.next) {
144
- case 0:
145
- i = 0;
146
- case 1:
147
- if (!(i < entries.length)) {
148
- _context.next = 37;
149
- break;
150
- }
151
- entry = entries[i];
152
- time = entry.time, type = entry.type, data = entry.data;
153
- if (!isViewportEntryData(data)) {
154
- _context.next = 31;
155
- break;
156
- }
157
- rect = this.mapDOMRectToHeatmap(data.rect);
158
- ratio = this.getRatio(rect);
159
- heatmapEntryData = {
160
- time: time,
161
- elementName: data.elementName,
162
- ratio: ratio !== null && ratio !== void 0 ? ratio : null,
163
- rect: rect,
164
- source: type
165
- };
166
- roundedTop = Math.floor(rect.top);
167
- roundedBottom = Math.min(rect.bottom, this.height);
168
- roundedLeft = Math.floor(rect.left);
169
- roundedRight = Math.min(rect.right, this.width);
170
- row = roundedTop;
171
- case 13:
172
- if (!(row < roundedBottom)) {
173
- _context.next = 31;
174
- break;
175
- }
176
- col = roundedLeft;
177
- case 15:
178
- if (!(col < roundedRight)) {
179
- _context.next = 28;
180
- break;
181
- }
182
- cell = this.getCell(row, col);
183
- if (cell) {
184
- _context.next = 19;
185
- break;
186
- }
187
- return _context.abrupt("continue", 25);
188
- case 19:
189
- previousEntry = cell.head; // When elements are added at the same time
190
- // we try to keep the inner element changes as the head
191
- if (!((previousEntry === null || previousEntry === void 0 ? void 0 : previousEntry.time) === entry.time && isRectInside(previousEntry.rect, heatmapEntryData.rect))) {
192
- _context.next = 23;
193
- break;
194
- }
195
- cell.previousEntries.push(_objectSpread(_objectSpread({}, heatmapEntryData), {}, {
196
- source: 'mutation:parent-mounted'
197
- }));
198
- return _context.abrupt("continue", 25);
199
- case 23:
200
- cell.head = _objectSpread(_objectSpread({}, heatmapEntryData), {}, {
201
- source: heatmapEntryData.source || null
202
- });
203
- if (previousEntry !== null) {
204
- cell.previousEntries.push(previousEntry);
205
- }
206
- case 25:
207
- col++;
208
- _context.next = 15;
209
- break;
210
- case 28:
211
- row++;
212
- _context.next = 13;
213
- break;
214
- case 31:
215
- if (!(i % 100 === 0)) {
216
- _context.next = 34;
217
- break;
218
- }
219
- _context.next = 34;
220
- return taskYield();
221
- case 34:
222
- i++;
223
- _context.next = 1;
224
- break;
225
- case 37:
226
- case "end":
227
- return _context.stop();
228
- }
229
- }, _callee, this);
230
- }));
231
- function applyEntriesToHeatmap(_x) {
232
- return _applyEntriesToHeatmap.apply(this, arguments);
233
- }
234
- return applyEntriesToHeatmap;
235
- }()
236
- }, {
237
- key: "getVCPercentMetrics",
238
- value: function () {
239
- var _getVCPercentMetrics = _asyncToGenerator( /*#__PURE__*/_regeneratorRuntime.mark(function _callee2(vcPercentCheckpoint, startTime) {
240
- 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;
241
- return _regeneratorRuntime.wrap(function _callee2$(_context2) {
242
- while (1) switch (_context2.prev = _context2.next) {
243
- case 0:
244
- sortedCheckpoints = _toConsumableArray(vcPercentCheckpoint).sort(function (a, b) {
245
- return a - b;
246
- });
247
- flattenHeatmap = this.map.flat();
248
- totalCells = flattenHeatmap.length;
249
- timestampMap = new Map();
250
- i = 0;
251
- case 5:
252
- if (!(i < flattenHeatmap.length)) {
253
- _context2.next = 20;
254
- break;
255
- }
256
- cell = flattenHeatmap[i];
257
- cellHead = cell.head;
258
- timestamp = Math.trunc((_cellHead$time = cellHead === null || cellHead === void 0 ? void 0 : cellHead.time) !== null && _cellHead$time !== void 0 ? _cellHead$time : 0);
259
- elementName = cellHead === null || cellHead === void 0 ? void 0 : cellHead.elementName;
260
- curr = (_timestampMap$get = timestampMap.get(timestamp)) !== null && _timestampMap$get !== void 0 ? _timestampMap$get : {
261
- cellCount: 0,
262
- domElements: new Set()
263
- };
264
- curr.cellCount += 1;
265
- if (elementName) {
266
- curr.domElements.add(elementName);
267
- }
268
- timestampMap.set(timestamp, curr);
269
-
270
- // Every 10000 heatmap entries processed
271
- // we give the browser the power
272
- // to process any other high priority task
273
- if (!(i > 10000 && i % 10000 === 0)) {
274
- _context2.next = 17;
275
- break;
276
- }
277
- _context2.next = 17;
278
- return taskYield();
279
- case 17:
280
- i++;
281
- _context2.next = 5;
282
- break;
283
- case 20:
284
- sortedTimings = _toConsumableArray(timestampMap.keys()).sort(function (a, b) {
285
- return a - b;
286
- });
287
- totalCellPainted = 0;
288
- result = {};
289
- domElementsBuffer = new Set();
290
- _i = 0;
291
- case 25:
292
- if (!(_i < sortedTimings.length)) {
293
- _context2.next = 52;
294
- break;
295
- }
296
- _timestamp = sortedTimings[_i];
297
- timestampInfo = timestampMap.get(_timestamp);
298
- if (timestampInfo) {
299
- _context2.next = 30;
300
- break;
301
- }
302
- throw new Error('unexpected timestampInfo not found');
303
- case 30:
304
- cellCount = timestampInfo.cellCount, domElements = timestampInfo.domElements;
305
- totalCellPainted += cellCount;
306
- currVCRatio = totalCellPainted / totalCells;
307
- currVCPercent = Math.round(currVCRatio * 100);
308
- domElements.forEach(function (domElement) {
309
- domElementsBuffer.add(domElement);
310
- });
311
- matchesAnyCheckpoints = false;
312
- case 36:
313
- if (!(sortedCheckpoints.length > 0 && currVCPercent >= sortedCheckpoints[0])) {
314
- _context2.next = 45;
315
- break;
316
- }
317
- checkpoint = sortedCheckpoints.shift();
318
- _domElements = _toConsumableArray(domElementsBuffer);
319
- if (checkpoint) {
320
- _context2.next = 41;
321
- break;
322
- }
323
- return _context2.abrupt("break", 45);
324
- case 41:
325
- matchesAnyCheckpoints = true;
326
- result[checkpoint.toString()] = {
327
- t: Math.round(_timestamp - startTime),
328
- e: _domElements
329
- };
330
- _context2.next = 36;
331
- break;
332
- case 45:
333
- if (matchesAnyCheckpoints) {
334
- domElementsBuffer.clear();
335
- }
336
- if (!(_i % 500 === 0)) {
337
- _context2.next = 49;
338
- break;
339
- }
340
- _context2.next = 49;
341
- return taskYield();
342
- case 49:
343
- _i++;
344
- _context2.next = 25;
345
- break;
346
- case 52:
347
- return _context2.abrupt("return", result);
348
- case 53:
349
- case "end":
350
- return _context2.stop();
351
- }
352
- }, _callee2, this);
353
- }));
354
- function getVCPercentMetrics(_x2, _x3) {
355
- return _getVCPercentMetrics.apply(this, arguments);
356
- }
357
- return getVCPercentMetrics;
358
- }()
359
- }]);
360
- }();
361
- function calculateTTVCPercentiles(_x4) {
362
- return _calculateTTVCPercentiles.apply(this, arguments);
363
- }
364
- function _calculateTTVCPercentiles() {
365
- _calculateTTVCPercentiles = _asyncToGenerator( /*#__PURE__*/_regeneratorRuntime.mark(function _callee3(_ref2) {
366
- var orderedEntries, viewport, percentiles, startTime, heatmap, vcDetails;
367
- return _regeneratorRuntime.wrap(function _callee3$(_context3) {
368
- while (1) switch (_context3.prev = _context3.next) {
369
- case 0:
370
- orderedEntries = _ref2.orderedEntries, viewport = _ref2.viewport, percentiles = _ref2.percentiles, startTime = _ref2.startTime;
371
- heatmap = new Heatmap({
372
- viewport: viewport,
373
- heatmapSize: 200
374
- });
375
- _context3.next = 4;
376
- return heatmap.applyEntriesToHeatmap(orderedEntries);
377
- case 4:
378
- _context3.next = 6;
379
- return heatmap.getVCPercentMetrics(percentiles, startTime);
380
- case 6:
381
- vcDetails = _context3.sent;
382
- return _context3.abrupt("return", vcDetails);
383
- case 8:
384
- case "end":
385
- return _context3.stop();
386
- }
387
- }, _callee3);
388
- }));
389
- return _calculateTTVCPercentiles.apply(this, arguments);
390
- }
391
- export default calculateTTVCPercentiles;
@@ -1,145 +0,0 @@
1
- import _slicedToArray from "@babel/runtime/helpers/slicedToArray";
2
- import _toConsumableArray from "@babel/runtime/helpers/toConsumableArray";
3
- 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; } } }; }
4
- 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; } }
5
- 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; }
6
- /**
7
- * Calculate the union areas of all rectangles using Sweep Line Algorithm
8
- *
9
- * Reference:
10
- * https://en.wikipedia.org/wiki/Sweep_line_algorithm
11
- * https://www.hackerearth.com/practice/math/geometry/line-sweep-technique/tutorial/#:~:text=A%20sweep%20line%20is%20an,order%20to%20discretize%20the%20sweep.
12
- *
13
- * @param rectangles
14
- * @returns
15
- */
16
- function calculateUnionArea(rectangles) {
17
- // Step 1: Create sweep line events
18
- var events = createSweepLineEvents(rectangles);
19
-
20
- // Step 2: Process events to calculate total area
21
- var activeIntervals = new Map();
22
- var totalArea = 0;
23
- var previousX = 0;
24
- for (var _i = 0, _events = events; _i < _events.length; _i++) {
25
- var event = _events[_i];
26
- // Calculate height at current x-position
27
- var currentHeight = calculateActiveHeight(activeIntervals);
28
- // Add area since last x-position
29
- totalArea += currentHeight * (event.x - previousX);
30
- // Update x-position
31
- previousX = event.x;
32
- // Update active intervals
33
- updateActiveIntervals(activeIntervals, event);
34
- }
35
- return totalArea;
36
- }
37
- export default calculateUnionArea;
38
- function createSweepLineEvents(rectangles) {
39
- var events = [];
40
- var _iterator = _createForOfIteratorHelper(rectangles),
41
- _step;
42
- try {
43
- for (_iterator.s(); !(_step = _iterator.n()).done;) {
44
- var rect = _step.value;
45
- // Create start and end events for each rectangle
46
- events.push({
47
- x: rect.left,
48
- type: 'start',
49
- top: rect.top,
50
- bottom: rect.bottom
51
- });
52
- events.push({
53
- x: rect.right,
54
- type: 'end',
55
- top: rect.top,
56
- bottom: rect.bottom
57
- });
58
- }
59
- // Sort events by x-coordinate (and type as tiebreaker)
60
- } catch (err) {
61
- _iterator.e(err);
62
- } finally {
63
- _iterator.f();
64
- }
65
- return events.sort(function (a, b) {
66
- return a.x === b.x ? a.type === 'end' ? 1 : -1 : a.x - b.x;
67
- });
68
- }
69
- function calculateActiveHeight(intervals) {
70
- if (intervals.size === 0) {
71
- return 0;
72
- }
73
- // Get all unique y-coordinates
74
- var coordinates = [];
75
- var _iterator2 = _createForOfIteratorHelper(intervals),
76
- _step2;
77
- try {
78
- for (_iterator2.s(); !(_step2 = _iterator2.n()).done;) {
79
- var _step2$value = _slicedToArray(_step2.value, 1),
80
- _key = _step2$value[0];
81
- var _key$split$map3 = _key.split(',').map(Number),
82
- _key$split$map4 = _slicedToArray(_key$split$map3, 2),
83
- _start = _key$split$map4[0],
84
- _end = _key$split$map4[1];
85
- coordinates.push(_start, _end);
86
- }
87
- // Sort coordinates
88
- } catch (err) {
89
- _iterator2.e(err);
90
- } finally {
91
- _iterator2.f();
92
- }
93
- var sortedCoords = _toConsumableArray(new Set(coordinates)).sort(function (a, b) {
94
- return a - b;
95
- });
96
- var totalHeight = 0;
97
- // Check each segment between consecutive coordinates
98
- for (var i = 0; i < sortedCoords.length; i++) {
99
- var y1 = sortedCoords[i];
100
- var y2 = sortedCoords[i + 1];
101
- // Check if this segment is covered by any active interval
102
- var covered = false;
103
- var _iterator3 = _createForOfIteratorHelper(intervals),
104
- _step3;
105
- try {
106
- for (_iterator3.s(); !(_step3 = _iterator3.n()).done;) {
107
- var _step3$value = _slicedToArray(_step3.value, 2),
108
- key = _step3$value[0],
109
- count = _step3$value[1];
110
- if (count <= 0) {
111
- continue;
112
- }
113
- var _key$split$map = key.split(',').map(Number),
114
- _key$split$map2 = _slicedToArray(_key$split$map, 2),
115
- start = _key$split$map2[0],
116
- end = _key$split$map2[1];
117
- if (start <= y1 && end >= y2) {
118
- covered = true;
119
- break;
120
- }
121
- }
122
- } catch (err) {
123
- _iterator3.e(err);
124
- } finally {
125
- _iterator3.f();
126
- }
127
- if (covered) {
128
- totalHeight += y2 - y1;
129
- }
130
- }
131
- return totalHeight;
132
- }
133
- function updateActiveIntervals(intervals, event) {
134
- var key = "".concat(event.top, ",").concat(event.bottom);
135
- if (event.type === 'start') {
136
- intervals.set(key, (intervals.get(key) || 0) + 1);
137
- } else {
138
- var count = intervals.get(key) || 0;
139
- if (count > 1) {
140
- intervals.set(key, count - 1);
141
- } else {
142
- intervals.delete(key);
143
- }
144
- }
145
- }
@@ -1,101 +0,0 @@
1
- import _toConsumableArray from "@babel/runtime/helpers/toConsumableArray";
2
- import _asyncToGenerator from "@babel/runtime/helpers/asyncToGenerator";
3
- import _regeneratorRuntime from "@babel/runtime/regenerator";
4
- import isViewportEntryData from '../../utils/is-viewport-entry-data';
5
- import taskYield from '../../utils/task-yield';
6
- import calculateUnionArea from './calc-union-area';
7
- function calculateTTVCPercentiles(_x) {
8
- return _calculateTTVCPercentiles.apply(this, arguments);
9
- }
10
- function _calculateTTVCPercentiles() {
11
- _calculateTTVCPercentiles = _asyncToGenerator( /*#__PURE__*/_regeneratorRuntime.mark(function _callee(_ref) {
12
- var orderedEntries, viewport, percentiles, startTime, sortedPercentiles, viewportArea, checkpoints, activeRects, removeActiveRect, domElementsBuffer, i, iEntry, iEntryData, rect, elementName, exclusionArea, currentArea, currVCPercent, matchesAnyCheckpoints, _checkpoint, domElements;
13
- return _regeneratorRuntime.wrap(function _callee$(_context) {
14
- while (1) switch (_context.prev = _context.next) {
15
- case 0:
16
- orderedEntries = _ref.orderedEntries, viewport = _ref.viewport, percentiles = _ref.percentiles, startTime = _ref.startTime;
17
- sortedPercentiles = _toConsumableArray(percentiles).sort(function (a, b) {
18
- return a - b;
19
- });
20
- viewportArea = viewport.width * viewport.height;
21
- checkpoints = {};
22
- activeRects = orderedEntries.filter(function (e) {
23
- return isViewportEntryData(e.data);
24
- }).map(function (e) {
25
- return e.data.rect;
26
- });
27
- removeActiveRect = function removeActiveRect(rectToRemove) {
28
- var index = activeRects.indexOf(rectToRemove);
29
- // Check if the element exists in the array
30
- if (index !== -1) {
31
- // Remove the element at the found index
32
- activeRects.splice(index, 1);
33
- }
34
- };
35
- domElementsBuffer = new Set();
36
- i = 0;
37
- case 8:
38
- if (!(i < orderedEntries.length)) {
39
- _context.next = 36;
40
- break;
41
- }
42
- iEntry = orderedEntries[i];
43
- iEntryData = iEntry.data;
44
- if (isViewportEntryData(iEntryData)) {
45
- _context.next = 13;
46
- break;
47
- }
48
- return _context.abrupt("continue", 33);
49
- case 13:
50
- rect = iEntryData.rect, elementName = iEntryData.elementName;
51
- domElementsBuffer.add(elementName);
52
- removeActiveRect(rect);
53
- exclusionArea = calculateUnionArea(activeRects);
54
- currentArea = viewportArea - exclusionArea;
55
- currVCPercent = Math.round(currentArea / viewportArea * 100);
56
- matchesAnyCheckpoints = false;
57
- case 20:
58
- if (!(sortedPercentiles.length > 0 && currVCPercent >= sortedPercentiles[0])) {
59
- _context.next = 29;
60
- break;
61
- }
62
- _checkpoint = sortedPercentiles.shift();
63
- domElements = _toConsumableArray(domElementsBuffer);
64
- if (_checkpoint) {
65
- _context.next = 25;
66
- break;
67
- }
68
- return _context.abrupt("break", 29);
69
- case 25:
70
- matchesAnyCheckpoints = true;
71
- checkpoints[_checkpoint.toString()] = {
72
- t: Math.round(iEntry.time - startTime),
73
- e: domElements
74
- };
75
- _context.next = 20;
76
- break;
77
- case 29:
78
- if (matchesAnyCheckpoints) {
79
- domElementsBuffer.clear();
80
- }
81
- if (!(i % 500 === 0)) {
82
- _context.next = 33;
83
- break;
84
- }
85
- _context.next = 33;
86
- return taskYield();
87
- case 33:
88
- i++;
89
- _context.next = 8;
90
- break;
91
- case 36:
92
- return _context.abrupt("return", checkpoints);
93
- case 37:
94
- case "end":
95
- return _context.stop();
96
- }
97
- }, _callee);
98
- }));
99
- return _calculateTTVCPercentiles.apply(this, arguments);
100
- }
101
- export default calculateTTVCPercentiles;
@@ -1,39 +0,0 @@
1
- import type { VCObserverEntry } from '../../../types';
2
- import type { HeatmapCheckpointMetrics, HeatmapEntry, HeatmapOptions } from './types';
3
- export default class Heatmap {
4
- private viewport;
5
- /**
6
- * Heatmap Width
7
- */
8
- private width;
9
- /**
10
- * Heatmap Height
11
- */
12
- private height;
13
- /**
14
- * Heatmap Area (width * height)
15
- */
16
- private heatmapAreaSize;
17
- private scaleX;
18
- private scaleY;
19
- private map;
20
- constructor({ viewport, heatmapSize }: HeatmapOptions);
21
- getHeatmap(): HeatmapEntry[][];
22
- private getCell;
23
- /**
24
- * Map Dom Rect to Heatmap Rect, rounded up to occupy full cell.
25
- * @param rect DOM Rect
26
- * @returns
27
- */
28
- private mapDOMRectToHeatmap;
29
- /**
30
- * Calculate the ratio of a HeatmapRect compared to the full heatmap
31
- *
32
- * This function determines what fraction of the heatmap is covered by the given heatmap rectangle.
33
- *
34
- * @param rect
35
- */
36
- private getRatio;
37
- applyEntriesToHeatmap(entries: ReadonlyArray<VCObserverEntry>): Promise<void>;
38
- getVCPercentMetrics(vcPercentCheckpoint: number[]): Promise<HeatmapCheckpointMetrics>;
39
- }
@@ -1,10 +0,0 @@
1
- import type { RevisionPayloadVCDetails } from '../../../../../common/vc/types';
2
- import type { VCObserverEntry } from '../../../types';
3
- import type { Viewport } from './types';
4
- declare function calculateTTVCPercentiles({ orderedEntries, viewport, percentiles, startTime, }: {
5
- orderedEntries: ReadonlyArray<VCObserverEntry>;
6
- viewport: Viewport;
7
- percentiles: number[];
8
- startTime: DOMHighResTimeStamp;
9
- }): Promise<RevisionPayloadVCDetails>;
10
- export default calculateTTVCPercentiles;