@atlaskit/react-ufo 3.1.4 → 3.3.0

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

@@ -0,0 +1,194 @@
+import taskYield from '../../utils/task-yield';
+
+// 24-bit color value
+
+/**
+ * Class responsible for managing a scaled canvas and tracking pixel drawing operations.
+ * It uses an OffscreenCanvas for better performance and maintains a mapping between
+ * colors and timestamps for pixel counting purposes.
+ */
+export class ViewportCanvas {
+  /** The underlying OffscreenCanvas instance */
+
+  /** The 2D rendering context of the canvas */
+
+  /** Scale factor applied to the canvas (affects final pixel counts) */
+
+  /** Maps unique colors to their corresponding timestamps */
+
+  /** Counter used to generate unique colors */
+
+  /**
+   * Creates a new ViewportCanvas instance.
+   * @param viewport - The dimensions of the viewport
+   * @param scaleFactor - Scale factor to apply to the canvas (default: 0.5)
+   * @throws {Error} If canvas context cannot be obtained
+   */
+  constructor(viewport, scaleFactor = 1) {
+    this.scaleFactor = scaleFactor;
+    this.colorCounter = 1;
+    this.colorTimeMap = new Map();
+
+    // Calculate scaled dimensions
+    this.scaledWidth = Math.ceil(viewport.width * scaleFactor);
+    this.scaledHeight = Math.ceil(viewport.height * scaleFactor);
+    this.scaleX = this.scaledWidth / viewport.width;
+    this.scaleY = this.scaledHeight / viewport.height;
+
+    // Initialize OffscreenCanvas with scaled dimensions
+    this.canvas = document.createElement('canvas');
+    this.canvas.width = this.scaledWidth;
+    this.canvas.height = this.scaledHeight;
+    const ctx = this.canvas.getContext('2d', {
+      alpha: false,
+      // Disable alpha channel for better performance
+      willReadFrequently: true,
+      // Optimize for frequent pixel reading
+      colorSpace: 'srgb' // Use standard RGB color space
+    });
+    if (!ctx) {
+      throw new Error('Could not get canvas context');
+    }
+    this.ctx = ctx;
+    this.ctx.globalCompositeOperation = 'source-over';
+    this.clear();
+  }
+  getScaledDimensions() {
+    return {
+      width: this.scaledWidth,
+      height: this.scaledHeight
+    };
+  }
+
+  /**
+   * Clears the entire canvas by removing all drawn content.
+   * @private
+   */
+  clear() {
+    this.ctx.clearRect(0, 0, this.canvas.width, this.canvas.height);
+  }
+
+  /**
+   * Generates a unique RGB color from an incrementing counter.
+   * Uses a 24-bit color space (16,777,216 possible colors).
+   *
+   * @private
+   * @returns A unique RGB color string
+   *
+   * @example
+   * // Example bit operations for color 0x00FF8040:
+   * // Red:   (0x00FF8040 >> 16) & 0xFF = 0xFF = 255
+   * // Green: (0x00FF8040 >> 8) & 0xFF  = 0x80 = 128
+   * // Blue:   0x00FF8040 & 0xFF        = 0x40 = 64
+   */
+  generateColor() {
+    // Wrap around at 16,777,215 (0x00FFFFFF) to stay within 24-bit color space
+    const rgbColor = this.colorCounter++ % 0x00ffffff;
+    return getRGBComponents(rgbColor);
+  }
+
+  /**
+   * Draws a rectangle on the canvas with a unique color and associates it with a timestamp.
+   * Each drawn rectangle gets a unique color which is mapped to the provided timestamp.
+   *
+   * @param rect - The rectangle dimensions to draw
+   * @param timestamp - The timestamp to associate with this drawing operation
+   */
+  drawRect(rect, timestamp) {
+    const color = this.generateColor();
+    this.colorTimeMap.set(color, timestamp);
+    this.ctx.fillStyle = color;
+    if (this.scaleFactor === 1) {
+      return this.ctx.fillRect(rect.x, rect.y, rect.width, rect.height);
+    }
+    const scaledX = rect.x * this.scaleX;
+    const scaledY = rect.y * this.scaleY;
+    const scaledWidth = rect.width * this.scaleX;
+    const scaledHeight = rect.height * this.scaleY;
+    this.ctx.fillRect(Math.floor(scaledX), Math.ceil(scaledY), Math.max(scaledWidth, 1), Math.max(scaledHeight, 1));
+  }
+
+  /**
+   * Calculates the number of pixels drawn for each timestamp.
+   * This method:
+   * 1. Reads the pixel data from the canvas
+   * 2. Counts pixels of each unique color
+   * 3. Maps colors back to their timestamps
+   * 4. Adjusts counts based on the scale factor
+   *
+   * @returns A Map containing timestamp to pixel count mappings
+   */
+  async getPixelCounts() {
+    const imageData = this.ctx.getImageData(0, 0, this.canvas.width, this.canvas.height);
+    const timestampsAmount = this.colorTimeMap.size;
+    const pixelCounts = await calculateDrawnPixelsRaw(imageData, this.scaleFactor, timestampsAmount);
+    // Convert color counts to timestamp counts
+    const timePixelCounts = new Map();
+    for (let i = 0; i < pixelCounts.length; i++) {
+      const count = pixelCounts[i];
+      if (typeof count !== 'number') {
+        continue;
+      }
+      const color = i + 1;
+      const rgbColor = getRGBComponents(color);
+      const timestamp = this.colorTimeMap.get(rgbColor);
+      if (timestamp !== undefined) {
+        timePixelCounts.set(timestamp, (timePixelCounts.get(timestamp) || 0) + count);
+      }
+    }
+    return timePixelCounts;
+  }
+}
+
+/**
+ * Converts a number into RGB components in such a way that they can be recombined
+ * to form the original number using bitwise operations.
+ * @param number - The input number to be split into RGB components.
+ * @returns The RGB color string in the format "rgb(r, g, b)".
+ */
+export function getRGBComponents(n) {
+  // Ensure the input is within the valid range for a 24-bit color
+  if (n < 0 || n > 0xffffff) {
+    throw new Error('Input number must be between 0 and 16777215 (inclusive).');
+  }
+
+  // Extract blue component (bits 0-7)
+  const blue = n & 0xff;
+
+  // Extract green component (bits 8-15)
+  const green = n >> 8 & 0xff;
+
+  // Extract red component (bits 16-23)
+  const red = n >> 16 & 0xff;
+  return `rgb(${red}, ${green}, ${blue})`;
+}
+
+/**
+ * Calculates the number of pixels drawn for each color in the image data.
+ * @param imageData - The image data to analyze.
+ * @param scaleFactor - The scale factor applied to the canvas.
+ * @param arraySize - The amount of timestamps that were drawn in the viewport
+ * @returns A Map containing color to pixel count mappings.
+ */
+export async function calculateDrawnPixelsRaw(imageData, scaleFactor, arraySize) {
+  const data = imageData.data;
+  const scaleCompensation = Math.round(1 / (scaleFactor * scaleFactor));
+  const arr = new Uint32Array(arraySize);
+  for (let i = 0; i < data.length; i += 4) {
+    // Check alpha
+    if (data[i + 3] !== 0) {
+      // Combine RGB components into a single 24-bit color value:
+      // (data[i] << 16)   - Shift red component left 16 bits   (bits 16-23)
+      // (data[i + 1] << 8) - Shift green component left 8 bits (bits 8-15)
+      // data[i + 2]       - Blue component stays as is         (bits 0-7)
+      // The | operator combines all bits together
+      const color = data[i] << 16 | data[i + 1] << 8 | data[i + 2];
+      const colorIndex = color - 1;
+      arr[colorIndex] = (arr[colorIndex] || 0) + scaleCompensation;
+    }
+    if (i % 10000 === 0) {
+      await taskYield();
+    }
+  }
+  return arr;
+}

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

@@ -0,0 +1,69 @@
+import { fg } from '@atlaskit/platform-feature-flags';
+import { ViewportCanvas } from './canvas-pixel';
+export default async function calculateTTVCPercentiles({
+  viewport,
+  orderedEntries,
+  percentiles
+}) {
+  const canvas = new ViewportCanvas(viewport, fg('platform_ufo_canvas_heatmap_full_precision') ? 1 : 0.25);
+  const elementMap = new Map();
+  for (const entry of orderedEntries) {
+    if (!('rect' in entry.data)) {
+      continue;
+    }
+    const rect = entry.data.rect;
+    const 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);
+  }
+
+  // Get pixel counts
+  const timePixelCounts = await canvas.getPixelCounts();
+  const viewportTotalPixels = viewport.width * viewport.height;
+  return calculatePercentiles(timePixelCounts, elementMap, percentiles, viewportTotalPixels);
+}
+export function calculatePercentiles(timePixelCounts, elementMap, unorderedPercentiles, totalPixels) {
+  const results = {};
+  let cumulativePixels = 0;
+  const percentiles = unorderedPercentiles.sort((a, b) => a - b);
+
+  // Sort entries by timestamp for consistent processing
+  const sortedEntries = Array.from(timePixelCounts.entries()).sort(([timeA], [timeB]) => Number(timeA) - Number(timeB));
+  let percentileIndex = 0;
+  let domElementsBuffer = new Set();
+  for (const [time, pixelCount] of sortedEntries) {
+    cumulativePixels += pixelCount;
+    const percentCovered = cumulativePixels / totalPixels * 100;
+    const elementNames = elementMap.get(time) || new Set();
+    elementNames.forEach(elName => domElementsBuffer.add(elName));
+    let matchesAnyCheckpoints = false;
+    while (percentileIndex < percentiles.length && percentCovered >= percentiles[percentileIndex]) {
+      results[`${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
+  for (const percentile of percentiles) {
+    if (!(percentile in results)) {
+      results[`${percentile}`] = {
+        t: 0,
+        e: []
+      };
+    }
+  }
+  return results;
+}

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

@@ -0,0 +1,248 @@
+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;
+  }
+}