@atlaskit/react-ufo 3.12.4 → 3.13.0

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

@@ -1,248 +0,0 @@
-import isViewportEntryData from '../../utils/is-viewport-entry-data';
-import taskYield from '../../utils/task-yield';
-const MAX_HEATMAP_SIZE = 1000;
-function createEmptyHeatmapEntry() {
-  return {
-    head: null,
-    previousEntries: []
-  };
-}
-function createEmptyMap(heatmapWidth, heatmapHeight) {
-  return Array.from({
-    length: heatmapHeight
-  }).map(() => 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;
-}
-export default class Heatmap {
-  /**
-   * Heatmap Width
-   */
-
-  /**
-   * Heatmap Height
-   */
-
-  /**
-   * Heatmap Area (width * height)
-   */
-
-  constructor({
-    viewport,
-    heatmapSize
-  }) {
-    // TODO timeOrigin? do we need? for SSR??
-    this.viewport = viewport;
-    const 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;
-    }
-    const 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);
-  }
-  getHeatmap() {
-    return this.map;
-  }
-  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
-   */
-  mapDOMRectToHeatmap(rect) {
-    const scaledX = rect.x * this.scaleX;
-    const scaledY = rect.y * this.scaleY;
-    const scaledWidth = rect.width * this.scaleX;
-    const 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
-   */
-  getRatio(rect) {
-    if (this.viewport.width === 0 || this.viewport.height === 0) {
-      return 0;
-    }
-    const {
-      right,
-      left,
-      bottom,
-      top
-    } = rect;
-    const rectWidth = right - left;
-    const rectHeight = bottom - top;
-    const rectArea = rectWidth * rectHeight;
-    const ratio = rectArea / this.heatmapAreaSize;
-    if (ratio > 1) {
-      return 1;
-    }
-    return ratio;
-  }
-  async applyEntriesToHeatmap(entries) {
-    for (let i = 0; i < entries.length; i++) {
-      const entry = entries[i];
-      const {
-        time,
-        type,
-        data
-      } = entry;
-      if (isViewportEntryData(data)) {
-        const rect = this.mapDOMRectToHeatmap(data.rect);
-        const ratio = this.getRatio(rect);
-        const heatmapEntryData = {
-          time,
-          elementName: data.elementName,
-          ratio: ratio !== null && ratio !== void 0 ? ratio : null,
-          rect,
-          source: type
-        };
-        const roundedTop = Math.floor(rect.top);
-        const roundedBottom = Math.min(rect.bottom, this.height);
-        const roundedLeft = Math.floor(rect.left);
-        const roundedRight = Math.min(rect.right, this.width);
-        for (let row = roundedTop; row < roundedBottom; row++) {
-          for (let col = roundedLeft; col < roundedRight; col++) {
-            const cell = this.getCell(row, col);
-            if (!cell) {
-              continue;
-            }
-            const 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)) {
-              cell.previousEntries.push({
-                ...heatmapEntryData,
-                source: 'mutation:parent-mounted'
-              });
-              continue;
-            }
-            cell.head = {
-              ...heatmapEntryData,
-              source: heatmapEntryData.source || null
-            };
-            if (previousEntry !== null) {
-              cell.previousEntries.push(previousEntry);
-            }
-          }
-        }
-      }
-      // Every 100 events processed
-      // we give the browser the power
-      // to process any other high priority task
-      if (i % 100 === 0) {
-        await taskYield();
-      }
-    }
-  }
-  async getVCPercentMetrics(vcPercentCheckpoint) {
-    const sortedCheckpoints = [...vcPercentCheckpoint].sort((a, b) => a - b);
-    const flattenHeatmap = this.map.flat();
-    const totalCells = flattenHeatmap.length;
-    const timestampMap = new Map();
-    for (let i = 0; i < flattenHeatmap.length; i++) {
-      var _cellHead$time, _timestampMap$get;
-      const cell = flattenHeatmap[i];
-      const cellHead = cell.head;
-      const timestamp = Math.trunc((_cellHead$time = cellHead === null || cellHead === void 0 ? void 0 : cellHead.time) !== null && _cellHead$time !== void 0 ? _cellHead$time : 0);
-      const elementName = cellHead === null || cellHead === void 0 ? void 0 : cellHead.elementName;
-      const 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) {
-        await taskYield();
-      }
-    }
-    const sortedTimings = [...timestampMap.keys()].sort((a, b) => a - b);
-    let totalCellPainted = 0;
-    const result = {};
-    let domElementsBuffer = new Set();
-    for (let i = 0; i < sortedTimings.length; i++) {
-      const timestamp = sortedTimings[i];
-      const timestampInfo = timestampMap.get(timestamp);
-      if (!timestampInfo) {
-        throw new Error('unexpected timestampInfo not found');
-      }
-      const {
-        cellCount,
-        domElements
-      } = timestampInfo;
-      totalCellPainted += cellCount;
-      const currVCRatio = totalCellPainted / totalCells;
-      const currVCPercent = Math.round(currVCRatio * 100);
-      domElements.forEach(domElement => {
-        domElementsBuffer.add(domElement);
-      });
-      let matchesAnyCheckpoints = false;
-      while (sortedCheckpoints.length > 0 && currVCPercent >= sortedCheckpoints[0]) {
-        const checkpoint = sortedCheckpoints.shift();
-        const domElements = [...domElementsBuffer];
-        if (!checkpoint) {
-          break;
-        }
-        matchesAnyCheckpoints = true;
-        result[checkpoint.toString()] = {
-          t: timestamp,
-          e: domElements
-        };
-      }
-      if (matchesAnyCheckpoints) {
-        domElementsBuffer.clear();
-      }
-      if (i % 500 === 0) {
-        await taskYield();
-      }
-    }
-    return result;
-  }
-}

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

@@ -1,263 +0,0 @@
-import isViewportEntryData from '../../utils/is-viewport-entry-data';
-import taskYield from '../../utils/task-yield';
-const MAX_HEATMAP_SIZE = 1000;
-function createEmptyHeatmapEntry() {
-  return {
-    head: null,
-    previousEntries: []
-  };
-}
-function createEmptyMap(heatmapWidth, heatmapHeight) {
-  return Array.from({
-    length: heatmapHeight
-  }).map(() => 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;
-}
-class Heatmap {
-  /**
-   * Heatmap Width
-   */
-
-  /**
-   * Heatmap Height
-   */
-
-  /**
-   * Heatmap Area (width * height)
-   */
-
-  constructor({
-    viewport,
-    heatmapSize
-  }) {
-    // TODO timeOrigin? do we need? for SSR??
-    this.viewport = viewport;
-    const 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;
-    }
-    const 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);
-  }
-  getHeatmap() {
-    return this.map;
-  }
-  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
-   */
-  mapDOMRectToHeatmap(rect) {
-    const scaledX = rect.x * this.scaleX;
-    const scaledY = rect.y * this.scaleY;
-    const scaledWidth = rect.width * this.scaleX;
-    const 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
-   */
-  getRatio(rect) {
-    if (this.viewport.width === 0 || this.viewport.height === 0) {
-      return 0;
-    }
-    const {
-      right,
-      left,
-      bottom,
-      top
-    } = rect;
-    const rectWidth = right - left;
-    const rectHeight = bottom - top;
-    const rectArea = rectWidth * rectHeight;
-    const ratio = rectArea / this.heatmapAreaSize;
-    if (ratio > 1) {
-      return 1;
-    }
-    return ratio;
-  }
-  async applyEntriesToHeatmap(entries) {
-    for (let i = 0; i < entries.length; i++) {
-      const entry = entries[i];
-      const {
-        time,
-        type,
-        data
-      } = entry;
-      if (isViewportEntryData(data)) {
-        const rect = this.mapDOMRectToHeatmap(data.rect);
-        const ratio = this.getRatio(rect);
-        const heatmapEntryData = {
-          time,
-          elementName: data.elementName,
-          ratio: ratio !== null && ratio !== void 0 ? ratio : null,
-          rect,
-          source: type
-        };
-        const roundedTop = Math.floor(rect.top);
-        const roundedBottom = Math.min(rect.bottom, this.height);
-        const roundedLeft = Math.floor(rect.left);
-        const roundedRight = Math.min(rect.right, this.width);
-        for (let row = roundedTop; row < roundedBottom; row++) {
-          for (let col = roundedLeft; col < roundedRight; col++) {
-            const cell = this.getCell(row, col);
-            if (!cell) {
-              continue;
-            }
-            const 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)) {
-              cell.previousEntries.push({
-                ...heatmapEntryData,
-                source: 'mutation:parent-mounted'
-              });
-              continue;
-            }
-            cell.head = {
-              ...heatmapEntryData,
-              source: heatmapEntryData.source || null
-            };
-            if (previousEntry !== null) {
-              cell.previousEntries.push(previousEntry);
-            }
-          }
-        }
-      }
-      // Every 100 events processed
-      // we give the browser the power
-      // to process any other high priority task
-      if (i % 100 === 0) {
-        await taskYield();
-      }
-    }
-  }
-  async getVCPercentMetrics(vcPercentCheckpoint, startTime) {
-    const sortedCheckpoints = [...vcPercentCheckpoint].sort((a, b) => a - b);
-    const flattenHeatmap = this.map.flat();
-    const totalCells = flattenHeatmap.length;
-    const timestampMap = new Map();
-    for (let i = 0; i < flattenHeatmap.length; i++) {
-      var _cellHead$time, _timestampMap$get;
-      const cell = flattenHeatmap[i];
-      const cellHead = cell.head;
-      const timestamp = Math.trunc((_cellHead$time = cellHead === null || cellHead === void 0 ? void 0 : cellHead.time) !== null && _cellHead$time !== void 0 ? _cellHead$time : 0);
-      const elementName = cellHead === null || cellHead === void 0 ? void 0 : cellHead.elementName;
-      const 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) {
-        await taskYield();
-      }
-    }
-    const sortedTimings = [...timestampMap.keys()].sort((a, b) => a - b);
-    let totalCellPainted = 0;
-    const result = {};
-    let domElementsBuffer = new Set();
-    for (let i = 0; i < sortedTimings.length; i++) {
-      const timestamp = sortedTimings[i];
-      const timestampInfo = timestampMap.get(timestamp);
-      if (!timestampInfo) {
-        throw new Error('unexpected timestampInfo not found');
-      }
-      const {
-        cellCount,
-        domElements
-      } = timestampInfo;
-      totalCellPainted += cellCount;
-      const currVCRatio = totalCellPainted / totalCells;
-      const currVCPercent = Math.round(currVCRatio * 100);
-      domElements.forEach(domElement => {
-        domElementsBuffer.add(domElement);
-      });
-      let matchesAnyCheckpoints = false;
-      while (sortedCheckpoints.length > 0 && currVCPercent >= sortedCheckpoints[0]) {
-        const checkpoint = sortedCheckpoints.shift();
-        const domElements = [...domElementsBuffer];
-        if (!checkpoint) {
-          break;
-        }
-        matchesAnyCheckpoints = true;
-        result[checkpoint.toString()] = {
-          t: Math.round(timestamp - startTime),
-          e: domElements
-        };
-      }
-      if (matchesAnyCheckpoints) {
-        domElementsBuffer.clear();
-      }
-      if (i % 500 === 0) {
-        await taskYield();
-      }
-    }
-    return result;
-  }
-}
-async function calculateTTVCPercentiles({
-  orderedEntries,
-  viewport,
-  percentiles,
-  startTime
-}) {
-  const heatmap = new Heatmap({
-    viewport,
-    heatmapSize: 200
-  });
-  await heatmap.applyEntriesToHeatmap(orderedEntries);
-  const vcDetails = await heatmap.getVCPercentMetrics(percentiles, startTime);
-  return vcDetails;
-}
-export default calculateTTVCPercentiles;

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

@@ -1 +0,0 @@
-export {};

package/dist/es2019/vc/vc-observer-new/metric-calculator/percentile-calc/rect-sweeping-line/calc-union-area.js

@@ -1,99 +0,0 @@
-/**
- * Calculate the union areas of all rectangles using Sweep Line Algorithm
- *
- * Reference:
- * 	https://en.wikipedia.org/wiki/Sweep_line_algorithm
- *  https://www.hackerearth.com/practice/math/geometry/line-sweep-technique/tutorial/#:~:text=A%20sweep%20line%20is%20an,order%20to%20discretize%20the%20sweep.
- *
- * @param rectangles
- * @returns
- */
-function calculateUnionArea(rectangles) {
-  // Step 1: Create sweep line events
-  const events = createSweepLineEvents(rectangles);
-
-  // Step 2: Process events to calculate total area
-  const activeIntervals = new Map();
-  let totalArea = 0;
-  let previousX = 0;
-  for (const event of events) {
-    // Calculate height at current x-position
-    const currentHeight = calculateActiveHeight(activeIntervals);
-    // Add area since last x-position
-    totalArea += currentHeight * (event.x - previousX);
-    // Update x-position
-    previousX = event.x;
-    // Update active intervals
-    updateActiveIntervals(activeIntervals, event);
-  }
-  return totalArea;
-}
-export default calculateUnionArea;
-function createSweepLineEvents(rectangles) {
-  const events = [];
-  for (const rect of rectangles) {
-    // Create start and end events for each rectangle
-    events.push({
-      x: rect.left,
-      type: 'start',
-      top: rect.top,
-      bottom: rect.bottom
-    });
-    events.push({
-      x: rect.right,
-      type: 'end',
-      top: rect.top,
-      bottom: rect.bottom
-    });
-  }
-  // Sort events by x-coordinate (and type as tiebreaker)
-  return events.sort((a, b) => a.x === b.x ? a.type === 'end' ? 1 : -1 : a.x - b.x);
-}
-function calculateActiveHeight(intervals) {
-  if (intervals.size === 0) {
-    return 0;
-  }
-  // Get all unique y-coordinates
-  const coordinates = [];
-  for (const [key] of intervals) {
-    const [start, end] = key.split(',').map(Number);
-    coordinates.push(start, end);
-  }
-  // Sort coordinates
-  const sortedCoords = [...new Set(coordinates)].sort((a, b) => a - b);
-  let totalHeight = 0;
-  // Check each segment between consecutive coordinates
-  for (let i = 0; i < sortedCoords.length; i++) {
-    const y1 = sortedCoords[i];
-    const y2 = sortedCoords[i + 1];
-    // Check if this segment is covered by any active interval
-    let covered = false;
-    for (const [key, count] of intervals) {
-      if (count <= 0) {
-        continue;
-      }
-      const [start, end] = key.split(',').map(Number);
-      if (start <= y1 && end >= y2) {
-        covered = true;
-        break;
-      }
-    }
-    if (covered) {
-      totalHeight += y2 - y1;
-    }
-  }
-  return totalHeight;
-}
-function updateActiveIntervals(intervals, event) {
-  const key = `${event.top},${event.bottom}`;
-  if (event.type === 'start') {
-    intervals.set(key, (intervals.get(key) || 0) + 1);
-  } else {
-    const count = intervals.get(key) || 0;
-    if (count > 1) {
-      intervals.set(key, count - 1);
-    } else {
-      intervals.delete(key);
-    }
-  }
-}

package/dist/es2019/vc/vc-observer-new/metric-calculator/percentile-calc/rect-sweeping-line/index.js

@@ -1,60 +0,0 @@
-import isViewportEntryData from '../../utils/is-viewport-entry-data';
-import taskYield from '../../utils/task-yield';
-import calculateUnionArea from './calc-union-area';
-async function calculateTTVCPercentiles({
-  orderedEntries,
-  viewport,
-  percentiles,
-  startTime
-}) {
-  const sortedPercentiles = [...percentiles].sort((a, b) => a - b);
-  const viewportArea = viewport.width * viewport.height;
-  const checkpoints = {};
-  let activeRects = orderedEntries.filter(e => isViewportEntryData(e.data)).map(e => e.data.rect);
-  const removeActiveRect = rectToRemove => {
-    const index = activeRects.indexOf(rectToRemove);
-    // Check if the element exists in the array
-    if (index !== -1) {
-      // Remove the element at the found index
-      activeRects.splice(index, 1);
-    }
-  };
-  let domElementsBuffer = new Set();
-  for (let i = 0; i < orderedEntries.length; i++) {
-    const iEntry = orderedEntries[i];
-    const iEntryData = iEntry.data;
-    if (!isViewportEntryData(iEntryData)) {
-      continue;
-    }
-    const {
-      rect,
-      elementName
-    } = iEntryData;
-    domElementsBuffer.add(elementName);
-    removeActiveRect(rect);
-    const exclusionArea = calculateUnionArea(activeRects);
-    const currentArea = viewportArea - exclusionArea;
-    const currVCPercent = Math.round(currentArea / viewportArea * 100);
-    let matchesAnyCheckpoints = false;
-    while (sortedPercentiles.length > 0 && currVCPercent >= sortedPercentiles[0]) {
-      const checkpoint = sortedPercentiles.shift();
-      const domElements = [...domElementsBuffer];
-      if (!checkpoint) {
-        break;
-      }
-      matchesAnyCheckpoints = true;
-      checkpoints[checkpoint.toString()] = {
-        t: Math.round(iEntry.time - startTime),
-        e: domElements
-      };
-    }
-    if (matchesAnyCheckpoints) {
-      domElementsBuffer.clear();
-    }
-    if (i % 500 === 0) {
-      await taskYield();
-    }
-  }
-  return checkpoints;
-}
-export default calculateTTVCPercentiles;