@atlaskit/react-ufo 3.12.3 → 3.12.5

package/dist/cjs/vc/vc-observer-new/viewport-observer/index.js

@@ -123,7 +123,9 @@ var ViewportObserver = exports.default = /*#__PURE__*/function () {
     (0, _defineProperty2.default)(this, "handleAttributeMutation", function (_ref5) {
       var _this$intersectionObs4;
       var target = _ref5.target,
-        attributeName = _ref5.attributeName;
+        attributeName = _ref5.attributeName,
+        oldValue = _ref5.oldValue,
+        newValue = _ref5.newValue;
       (_this$intersectionObs4 = _this.intersectionObserver) === null || _this$intersectionObs4 === void 0 || _this$intersectionObs4.watchAndTag(target, function (_ref6) {
         var target = _ref6.target,
           rect = _ref6.rect;
@@ -131,7 +133,9 @@ var ViewportObserver = exports.default = /*#__PURE__*/function () {
           return {
             type: 'mutation:media',
             mutationData: {
-              attributeName: attributeName
+              attributeName: attributeName,
+              oldValue: oldValue,
+              newValue: newValue
             }
           };
         }
@@ -143,7 +147,9 @@ var ViewportObserver = exports.default = /*#__PURE__*/function () {
           return {
             type: 'mutation:attribute:non-visual-style',
             mutationData: {
-              attributeName: attributeName
+              attributeName: attributeName,
+              oldValue: oldValue,
+              newValue: newValue
             }
           };
         }
@@ -152,14 +158,18 @@ var ViewportObserver = exports.default = /*#__PURE__*/function () {
           return {
             type: 'mutation:attribute:no-layout-shift',
             mutationData: {
-              attributeName: attributeName
+              attributeName: attributeName,
+              oldValue: oldValue,
+              newValue: newValue
             }
           };
         }
         return {
           type: 'mutation:attribute',
           mutationData: {
-            attributeName: attributeName
+            attributeName: attributeName,
+            oldValue: oldValue,
+            newValue: newValue
           }
         };
       });

package/dist/cjs/vc/vc-observer-new/viewport-observer/mutation-observer/index.js

@@ -42,7 +42,9 @@ function createMutationObserver(_ref) {
             var _mut$attributeName;
             onAttributeMutation({
               target: mut.target,
-              attributeName: (_mut$attributeName = mut.attributeName) !== null && _mut$attributeName !== void 0 ? _mut$attributeName : 'unknown'
+              attributeName: (_mut$attributeName = mut.attributeName) !== null && _mut$attributeName !== void 0 ? _mut$attributeName : 'unknown',
+              oldValue: oldValue,
+              newValue: newValue
             });
           }
           continue;

package/dist/es2019/create-experimental-interaction-metrics-payload/index.js

@@ -68,7 +68,8 @@ export async function getExperimentalVCMetrics(interaction) {
       isEventAborted: !!interaction.abortReason,
       prefix,
       vc: interaction.vc,
-      experienceKey: interaction.ufoName
+      experienceKey: interaction.ufoName,
+      interactionId: interaction.id
     });
     const VC = result === null || result === void 0 ? void 0 : result['metrics:vc'];
     if (!VC || !(result !== null && result !== void 0 && result[`${prefix}:vc:clean`])) {

package/dist/es2019/create-payload/utils/get-vc-metrics.js

@@ -36,6 +36,7 @@ async function getVCMetrics(interaction) {
     vc: interaction.vc,
     isEventAborted: interactionStatus.originalInteractionStatus !== 'SUCCEEDED',
     experienceKey: interaction.ufoName,
+    interactionId: interaction.id,
     ...ssr
   });
   if ((_config$experimentalI = config.experimentalInteractionMetrics) !== null && _config$experimentalI !== void 0 && _config$experimentalI.enabled) {

package/dist/es2019/create-post-interaction-log-payload/index.js

@@ -123,13 +123,12 @@ function createPostInteractionLogPayload({
 
   // Align post-interaction-logs closer to UFO event behaviour,
   // e.g. also check for aborted or failed events
-  if (fg('platform_ufo_vc_align_revisions_on_watchdog_event')) {
-    if (lastInteractionFinish.abortReason) {
-      return null;
-    }
-    if (lastInteractionFinish.errors.length > 0) {
-      return null;
-    }
+
+  if (lastInteractionFinish.abortReason) {
+    return null;
+  }
+  if (lastInteractionFinish.errors.length > 0) {
+    return null;
   }
   const maxEndTimeFromProfiler = reactProfilerTimings ? Math.max(...reactProfilerTimings.map(t => t.commitTime)) : lastInteractionFinish.end;
   const revisedEndTime = Math.round(maxEndTimeFromProfiler);

package/dist/es2019/interaction-metrics/post-interaction-log.js

@@ -1,8 +1,6 @@
 import _defineProperty from "@babel/runtime/helpers/defineProperty";
-import { fg } from '@atlaskit/platform-feature-flags';
 import { getConfig } from '../config';
 import { VCObserverWrapper } from '../vc';
-import { VCObserver } from '../vc/vc-observer';
 const POST_INTERACTION_LOG_SEND_DEFAULT_TIMEOUT = 3000;
 export default class PostInteractionLog {
   constructor() {
@@ -29,17 +27,10 @@ export default class PostInteractionLog {
     _defineProperty(this, "sinkHandlerFn", () => {});
   }
   initializeVCObserver(options) {
-    if (fg('platform_ufo_vc_align_revisions_on_watchdog_event')) {
-      this.vcObserver = new VCObserverWrapper({
-        ...options,
-        isPostInteraction: true
-      });
-    } else if (this.vcObserver === null) {
-      this.vcObserver = new VCObserver({
-        ...options,
-        isPostInteraction: true
-      });
-    }
+    this.vcObserver = new VCObserverWrapper({
+      ...options,
+      isPostInteraction: true
+    });
   }
   startVCObserver({
     startTime

package/dist/es2019/vc/index.js

@@ -82,7 +82,8 @@ export class VCObserverWrapper {
       const v1v2Result = isVCRevisionEnabled('fy25.01', experienceKey) || isVCRevisionEnabled('fy25.02', experienceKey) ? await ((_this$oldVCObserver6 = this.oldVCObserver) === null || _this$oldVCObserver6 === void 0 ? void 0 : _this$oldVCObserver6.getVCResult(param)) : {};
       const v3Result = isVCRevisionEnabled('fy25.03', experienceKey) ? await ((_this$newVCObserver5 = this.newVCObserver) === null || _this$newVCObserver5 === void 0 ? void 0 : _this$newVCObserver5.getVCResult({
         start: param.start,
-        stop: param.stop
+        stop: param.stop,
+        interactionId: param.interactionId
       })) : [];
       if (!v3Result) {
         return v1v2Result !== null && v1v2Result !== void 0 ? v1v2Result : {};
@@ -96,7 +97,8 @@ export class VCObserverWrapper {
       const oldResult = await ((_this$oldVCObserver7 = this.oldVCObserver) === null || _this$oldVCObserver7 === void 0 ? void 0 : _this$oldVCObserver7.getVCResult(param));
       const newResult = await ((_this$newVCObserver6 = this.newVCObserver) === null || _this$newVCObserver6 === void 0 ? void 0 : _this$newVCObserver6.getVCResult({
         start: param.start,
-        stop: param.stop
+        stop: param.stop,
+        interactionId: param.interactionId
       }));
       if (oldResult && !newResult) {
         return oldResult;

package/dist/es2019/vc/vc-observer/getVCRevisionDebugDetails.js

@@ -0,0 +1,32 @@
+export function getVCRevisionDebugDetails({
+  revision,
+  isClean,
+  abortReason,
+  VCEntries,
+  componentsLog,
+  interactionId
+}) {
+  return {
+    revision,
+    isClean,
+    abortReason,
+    vcLogs: VCEntries.map(entry => ({
+      time: entry.time,
+      viewportPercentage: entry.vc,
+      entries: entry.elements.map(element => {
+        var _componentsLog$entry$;
+        const logEntry = (_componentsLog$entry$ = componentsLog[entry.time]) === null || _componentsLog$entry$ === void 0 ? void 0 : _componentsLog$entry$.find(log => log.targetName === element);
+        return {
+          elementName: element,
+          type: logEntry === null || logEntry === void 0 ? void 0 : logEntry.type,
+          rect: logEntry === null || logEntry === void 0 ? void 0 : logEntry.intersectionRect,
+          visible: true,
+          attributeName: logEntry === null || logEntry === void 0 ? void 0 : logEntry.attributeName,
+          oldValue: logEntry === null || logEntry === void 0 ? void 0 : logEntry.oldValue,
+          newValue: logEntry === null || logEntry === void 0 ? void 0 : logEntry.newValue
+        };
+      })
+    })),
+    interactionId
+  };
+}

package/dist/es2019/vc/vc-observer/index.js

@@ -3,6 +3,7 @@ import { fg } from '@atlaskit/platform-feature-flags';
 import { isVCRevisionEnabled } from '../../config';
 import { getActiveInteraction } from '../../interaction-metrics';
 import { attachAbortListeners } from './attachAbortListeners';
+import { getVCRevisionDebugDetails } from './getVCRevisionDebugDetails';
 import { getVCRevisionsData } from './getVCRevisionsData';
 import { getViewportHeight, getViewportWidth } from './getViewport';
 import { MultiRevisionHeatmap } from './heatmap/heatmap';
@@ -96,7 +97,8 @@ export class VCObserver {
       ssr,
       vc,
       isEventAborted,
-      experienceKey
+      experienceKey,
+      interactionId
     }) => {
       const startTime = performance.now();
       // add local measurement
@@ -298,6 +300,33 @@ export class VCObserver {
               entries: isTTVCv1Disabled ? vcNext.VCEntries.rel : VCEntries.rel
             }
           }));
+
+          // Add devtool callback for both v1 and v2
+          if (typeof window.__ufo_devtool_onVCRevisionReady__ === 'function' && fg('platform_ufo_ttvc_v3_devtool')) {
+            var _ufo_devtool_onVCRev2, _ref2;
+            // Handle v1 if not disabled
+            if (!isTTVCv1Disabled) {
+              var _ufo_devtool_onVCRev, _ref;
+              (_ufo_devtool_onVCRev = (_ref = window).__ufo_devtool_onVCRevisionReady__) === null || _ufo_devtool_onVCRev === void 0 ? void 0 : _ufo_devtool_onVCRev.call(_ref, getVCRevisionDebugDetails({
+                revision: 'fy25.01',
+                isClean: !abortReasonInfo,
+                abortReason: abortReason.reason,
+                VCEntries: VCEntries.rel,
+                componentsLog,
+                interactionId
+              }));
+            }
+
+            // Handle v2
+            (_ufo_devtool_onVCRev2 = (_ref2 = window).__ufo_devtool_onVCRevisionReady__) === null || _ufo_devtool_onVCRev2 === void 0 ? void 0 : _ufo_devtool_onVCRev2.call(_ref2, getVCRevisionDebugDetails({
+              revision: 'fy25.02',
+              isClean: !abortReasonInfo,
+              abortReason: abortReason.reason,
+              VCEntries: vcNext.VCEntries.rel,
+              componentsLog,
+              interactionId
+            }));
+          }
         }
       } catch (e) {
         /*  do nothing */

package/dist/es2019/vc/vc-observer-new/index.js

@@ -13,10 +13,11 @@ const DEFAULT_SELECTOR_CONFIG = {
 };
 export default class VCObserverNew {
   constructor(config) {
-    var _config$selectorConfi;
+    var _config$isPostInterac, _config$selectorConfi;
     _defineProperty(this, "viewportObserver", null);
     _defineProperty(this, "windowEventObserver", null);
     this.entriesTimeline = new EntriesTimeline();
+    this.isPostInteraction = (_config$isPostInterac = config.isPostInteraction) !== null && _config$isPostInterac !== void 0 ? _config$isPostInterac : false;
     this.selectorConfig = (_config$selectorConfi = config.selectorConfig) !== null && _config$selectorConfi !== void 0 ? _config$selectorConfi : DEFAULT_SELECTOR_CONFIG;
     this.viewportObserver = new ViewportObserver({
       onChange: onChangeArg => {
@@ -36,13 +37,15 @@ export default class VCObserverNew {
         }
         this.entriesTimeline.push({
           time,
-          type,
           data: {
+            type,
             elementName,
             rect,
             previousRect,
             visible,
-            attributeName: mutationData === null || mutationData === void 0 ? void 0 : mutationData.attributeName
+            attributeName: mutationData === null || mutationData === void 0 ? void 0 : mutationData.attributeName,
+            oldValue: mutationData === null || mutationData === void 0 ? void 0 : mutationData.oldValue,
+            newValue: mutationData === null || mutationData === void 0 ? void 0 : mutationData.newValue
           }
         });
       }
@@ -54,8 +57,8 @@ export default class VCObserverNew {
       }) => {
         this.entriesTimeline.push({
           time,
-          type: 'window:event',
           data: {
+            type: 'window:event',
             eventType: type
           }
         });
@@ -78,7 +81,8 @@ export default class VCObserverNew {
   async getVCResult(param) {
     const {
       start,
-      stop
+      stop,
+      interactionId
     } = param;
     const results = [];
     const calculator_fy25_03 = new VCCalculator_FY25_03();
@@ -89,7 +93,9 @@ export default class VCObserverNew {
     const fy25_03 = await calculator_fy25_03.calculate({
       orderedEntries,
       startTime: start,
-      stopTime: stop
+      stopTime: stop,
+      interactionId,
+      isPostInteraction: this.isPostInteraction
     });
     if (fy25_03) {
       results.push(fy25_03);

package/dist/es2019/vc/vc-observer-new/metric-calculator/abstract-base-vc-calculator.js

@@ -1,25 +1,131 @@
 import { fg } from '@atlaskit/platform-feature-flags';
-import calculateTTVCPercentiles from './percentile-calc';
+import { calculateTTVCPercentiles, calculateTTVCPercentilesWithDebugInfo } from './percentile-calc';
 import getViewportHeight from './utils/get-viewport-height';
 import getViewportWidth from './utils/get-viewport-width';
 export default class AbstractVCCalculatorBase {
   constructor(revisionNo) {
     this.revisionNo = revisionNo;
   }
+  filterViewportEntries(entries) {
+    return entries.filter(entry => {
+      return 'rect' in entry.data;
+    });
+  }
+  async calculateBasic(filteredEntries, startTime, stopTime) {
+    const percentiles = [25, 50, 75, 80, 85, 90, 95, 98, 99];
+    const viewportEntries = this.filterViewportEntries(filteredEntries);
+    const vcLogs = await calculateTTVCPercentiles({
+      viewport: {
+        width: getViewportWidth(),
+        height: getViewportHeight()
+      },
+      startTime,
+      stopTime,
+      orderedEntries: viewportEntries,
+      percentiles
+    });
+    return vcLogs;
+  }
+  async calculateWithDebugInfo(filteredEntries, startTime, stopTime, isPostInteraction, isVCClean, interactionId, dirtyReason) {
+    const percentiles = [25, 50, 75, 80, 85, 90, 95, 98, 99];
+    const viewportEntries = this.filterViewportEntries(filteredEntries);
+    const vcLogs = await calculateTTVCPercentilesWithDebugInfo({
+      viewport: {
+        width: getViewportWidth(),
+        height: getViewportHeight()
+      },
+      startTime,
+      stopTime,
+      orderedEntries: viewportEntries
+    });
+    const vcDetails = {};
+    let percentileIndex = 0;
+    const entryDataBuffer = new Set();
+    if (vcLogs) {
+      for (const entry of vcLogs) {
+        const {
+          time,
+          viewportPercentage,
+          entries
+        } = entry;
+
+        // Only process entries if we haven't reached all percentiles
+        if (percentileIndex >= percentiles.length) {
+          break;
+        }
+
+        // Check if this entry matches any checkpoint percentiles
+        if (viewportPercentage >= percentiles[percentileIndex]) {
+          const elementNames = entries.map(e => e.elementName);
+
+          // Process all matching percentiles in one go
+          while (percentileIndex < percentiles.length && viewportPercentage >= percentiles[percentileIndex]) {
+            vcDetails[`${percentiles[percentileIndex]}`] = {
+              t: Math.round(time),
+              e: elementNames
+            };
+            percentileIndex++;
+          }
+
+          // Clear buffer after processing all matching percentiles
+          entryDataBuffer.clear();
+        } else {
+          // Only add to buffer if we haven't reached all percentiles
+          entries.forEach(e => entryDataBuffer.add(e));
+        }
+      }
+    }
+
+    // Fill in any missing percentiles with the last known values
+    let previousResult = {
+      t: 0,
+      e: []
+    };
+    for (let i = 0; i < percentiles.length; i++) {
+      const percentile = percentiles[i];
+      if (!(percentile in vcDetails)) {
+        vcDetails[`${percentile}`] = previousResult;
+      } else {
+        previousResult = vcDetails[`${percentile}`];
+      }
+    }
+
+    // Handle devtool callback
+    if (!isPostInteraction && typeof window !== 'undefined' && typeof window.__ufo_devtool_onVCRevisionReady__ === 'function' && fg('platform_ufo_ttvc_v3_devtool')) {
+      try {
+        var _ufo_devtool_onVCRev, _ref;
+        (_ufo_devtool_onVCRev = (_ref = window).__ufo_devtool_onVCRevisionReady__) === null || _ufo_devtool_onVCRev === void 0 ? void 0 : _ufo_devtool_onVCRev.call(_ref, {
+          revision: this.revisionNo,
+          isClean: isVCClean,
+          abortReason: dirtyReason,
+          vcLogs,
+          interactionId
+        });
+      } catch (e) {
+        // if any error communicating with devtool, we don't want to break the app
+        // eslint-disable-next-line no-console
+        console.error('Error in onVCRevisionReady', e);
+      }
+    }
+    return vcDetails;
+  }
   async calculate({
     startTime,
     stopTime,
-    orderedEntries
+    orderedEntries,
+    interactionId,
+    isPostInteraction
   }) {
     var _vcDetails$90$t, _vcDetails$;
     const filteredEntries = orderedEntries.filter(entry => {
       return this.isEntryIncluded(entry);
     });
+    let isVCClean;
+    let dirtyReason;
     if (fg('platform_ufo_add_vc_abort_reason_by_revisions')) {
-      const {
-        isVCClean,
-        dirtyReason
-      } = this.getVCCleanStatus(filteredEntries);
+      const getVCCleanStatusResult = this.getVCCleanStatus(filteredEntries);
+      isVCClean = getVCCleanStatusResult.isVCClean;
+      dirtyReason = getVCCleanStatusResult.dirtyReason;
       if (!isVCClean) {
         return {
           revision: this.revisionNo,
@@ -29,7 +135,7 @@ export default class AbstractVCCalculatorBase {
         };
       }
     } else {
-      const isVCClean = this.isVCClean(filteredEntries);
+      isVCClean = this.isVCClean(filteredEntries);
       if (!isVCClean) {
         return {
           revision: this.revisionNo,
@@ -38,16 +144,8 @@ export default class AbstractVCCalculatorBase {
         };
       }
     }
-    const vcDetails = await calculateTTVCPercentiles({
-      viewport: {
-        width: getViewportWidth(),
-        height: getViewportHeight()
-      },
-      startTime,
-      stopTime,
-      orderedEntries: filteredEntries,
-      percentiles: [25, 50, 75, 80, 85, 90, 95, 98, 99]
-    });
+    const useDebugInfo = fg('platform_ufo_ttvc_v3_devtool');
+    const vcDetails = useDebugInfo ? await this.calculateWithDebugInfo(filteredEntries, startTime, stopTime, isPostInteraction, isVCClean, interactionId, dirtyReason) : await this.calculateBasic(filteredEntries, startTime, stopTime);
     return {
       revision: this.revisionNo,
       clean: true,

package/dist/es2019/vc/vc-observer-new/metric-calculator/fy25_03/index.js

@@ -13,10 +13,10 @@ export default class VCCalculator_FY25_03 extends AbstractVCCalculatorBase {
     super(REVISION_NO);
   }
   isEntryIncluded(entry) {
-    if (!CONSIDERED_ENTRY_TYPE.includes(entry.type)) {
+    if (!CONSIDERED_ENTRY_TYPE.includes(entry.data.type)) {
       return false;
     }
-    if (entry.type === 'mutation:attribute') {
+    if (entry.data.type === 'mutation:attribute') {
       const entryData = entry.data;
       const attributeName = entryData.attributeName;
       if (!attributeName || KNOWN_ATTRIBUTES_THAT_DOES_NOT_CAUSE_LAYOUT_SHIFTS.includes(attributeName)) {
@@ -31,7 +31,7 @@ export default class VCCalculator_FY25_03 extends AbstractVCCalculatorBase {
   }
   isVCClean(filteredEntries) {
     const hasAbortEvent = filteredEntries.some(entry => {
-      if (entry.type === 'window:event') {
+      if (entry.data.type === 'window:event') {
         const data = entry.data;
         if (ABORTING_WINDOW_EVENT.includes(data.eventType)) {
           return true;
@@ -44,7 +44,7 @@ export default class VCCalculator_FY25_03 extends AbstractVCCalculatorBase {
   getVCCleanStatus(filteredEntries) {
     let dirtyReason = '';
     const hasAbortEvent = filteredEntries.some(entry => {
-      if (entry.type === 'window:event') {
+      if (entry.data.type === 'window:event') {
         const data = entry.data;
         if (ABORTING_WINDOW_EVENT.includes(data.eventType)) {
           dirtyReason = data.eventType === 'keydown' ? 'keypress' : data.eventType;

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

@@ -27,6 +27,31 @@ async function calculateTTVCPercentiles({
   const totalPixels = canvasDimenstions.width * canvasDimenstions.height;
   return calculatePercentiles(timePixelCounts, elementMap, percentiles, totalPixels, startTime);
 }
+async function calculateTTVCPercentilesWithDebugInfo({
+  viewport,
+  orderedEntries,
+  startTime
+}) {
+  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;
+    canvas.drawRect(rect, entry.time);
+    if (!elementMap.has(entry.time)) {
+      elementMap.set(entry.time, []);
+    }
+    elementMap.get(entry.time).push(entry.data);
+  }
+
+  // Get pixel counts
+  const timePixelCounts = await canvas.getPixelCounts();
+  const canvasDimensions = canvas.getScaledDimensions();
+  const totalPixels = canvasDimensions.width * canvasDimensions.height;
+  return calculatePercentilesWithDebugInfo(timePixelCounts, elementMap, totalPixels, startTime);
+}
 export default calculateTTVCPercentiles;
 export function calculatePercentiles(timePixelCounts, elementMap, unorderedPercentiles, totalPixels, startTime) {
   const results = {};
@@ -70,4 +95,22 @@ export function calculatePercentiles(timePixelCounts, elementMap, unorderedPerce
     previousResult = results[`${percentile}`];
   }
   return results;
-}
+}
+export function calculatePercentilesWithDebugInfo(timePixelCounts, elementMap, totalPixels, startTime) {
+  const results = new Array(elementMap.size);
+  let cumulativePixels = 0;
+  const sortedEntries = Array.from(timePixelCounts.entries()).sort(([timeA], [timeB]) => Number(timeA) - Number(timeB));
+  for (let i = 0; i < sortedEntries.length; i++) {
+    const [time, pixelCount] = sortedEntries[i];
+    cumulativePixels += pixelCount;
+    const percentCovered = cumulativePixels / totalPixels * 100;
+    const entryDatas = elementMap.get(time) || [];
+    results[i] = {
+      time: Math.round(Number(time - startTime)),
+      viewportPercentage: percentCovered,
+      entries: Array.from(entryDatas)
+    };
+  }
+  return results;
+}
+export { calculateTTVCPercentilesWithDebugInfo };

package/dist/es2019/vc/vc-observer-new/metric-calculator/percentile-calc/canvas-heatmap/test-with-debug-info.js

@@ -0,0 +1,75 @@
+import { calculatePercentilesWithDebugInfo } from './index';
+
+// Test utilities
+const createMockRect = (x = 0, y = 0, width = 100, height = 100) => new MockDOMRect(x, y, width, height);
+const createViewportEntry = (elementName, rect = createMockRect(), visible = true, type = 'mutation:element') => ({
+  elementName,
+  rect,
+  visible,
+  type
+});
+const createTimePixelCounts = counts => new Map(counts);
+const createElementMap = entries => new Map(entries);
+const createExpectedResult = (time, viewportPercentage, entries) => ({
+  time,
+  viewportPercentage,
+  entries
+});
+class MockDOMRect {
+  constructor(x, y, width, height) {
+    this.x = x;
+    this.y = y;
+    this.width = width;
+    this.height = height;
+  }
+  get bottom() {
+    return this.y + this.height;
+  }
+  get left() {
+    return this.x;
+  }
+  get right() {
+    return this.x + this.width;
+  }
+  get top() {
+    return this.y;
+  }
+  toJSON() {
+    return {
+      x: this.x,
+      y: this.y,
+      width: this.width,
+      height: this.height
+    };
+  }
+}
+describe('calculatePercentilesWithDebugInfo', () => {
+  it('should correctly calculate percentiles with accumulated elements from timestamps', () => {
+    const timePixelCounts = createTimePixelCounts([[100, 10], [200, 20], [300, 10], [400, 10]]);
+    const elementMap = createElementMap([[100, [createViewportEntry('div'), createViewportEntry('span')]], [200, [createViewportEntry('img')]], [300, [createViewportEntry('p'), createViewportEntry('a')]], [400, [createViewportEntry('img')]]]);
+    const expected = [createExpectedResult(100, 20, [createViewportEntry('div'), createViewportEntry('span')]), createExpectedResult(200, 60, [createViewportEntry('img')]), createExpectedResult(300, 80, [createViewportEntry('p'), createViewportEntry('a')]), createExpectedResult(400, 100, [createViewportEntry('img')])];
+    const result = calculatePercentilesWithDebugInfo(timePixelCounts, elementMap, 50, 0);
+    expect(result).toEqual(expected);
+  });
+  it('should handle empty entries gracefully', () => {
+    const timePixelCounts = new Map();
+    const elementMap = new Map();
+    const expected = [];
+    const result = calculatePercentilesWithDebugInfo(timePixelCounts, elementMap, 100, 0);
+    expect(result).toEqual(expected);
+  });
+  it('should handle non-sequential timestamps', () => {
+    const timePixelCounts = createTimePixelCounts([[300, 70], [100, 30]]);
+    const elementMap = createElementMap([[300, [createViewportEntry('p'), createViewportEntry('a')]], [100, [createViewportEntry('div')]]]);
+    const expected = [createExpectedResult(100, 30, [createViewportEntry('div')]), createExpectedResult(300, 100, [createViewportEntry('p'), createViewportEntry('a')])];
+    const result = calculatePercentilesWithDebugInfo(timePixelCounts, elementMap, 100, 0);
+    expect(result).toEqual(expected);
+  });
+  it('should correctly calculate percentiles with startTime offset', () => {
+    const timePixelCounts = createTimePixelCounts([[100, 10], [200, 20], [300, 10], [400, 10]]);
+    const elementMap = createElementMap([[100, [createViewportEntry('div'), createViewportEntry('span')]], [200, [createViewportEntry('img')]], [300, [createViewportEntry('p'), createViewportEntry('a')]], [400, [createViewportEntry('img')]]]);
+    const expected = [createExpectedResult(50, 20, [createViewportEntry('div'), createViewportEntry('span')]), createExpectedResult(150, 60, [createViewportEntry('img')]), createExpectedResult(250, 80, [createViewportEntry('p'), createViewportEntry('a')]), createExpectedResult(350, 100, [createViewportEntry('img')])];
+    const result = calculatePercentilesWithDebugInfo(timePixelCounts, elementMap, 50, 50);
+    expect(result).toEqual(expected);
+  });
+});

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

@@ -1,20 +1,2 @@
-import calcUsingCanvas from './canvas-heatmap';
-import calcUsingOldHeatmap from './heatmap';
-import calcUsingRectSweepingLine from './rect-sweeping-line';
-async function calculateTTVCPercentiles(arg) {
-  const algo = 'canvas_heatmap';
-  if (algo === 'canvas_heatmap') {
-    const vcDetails = await calcUsingCanvas(arg);
-    return vcDetails;
-  }
-  if (algo === 'rect_sweeping') {
-    const vcDetails = await calcUsingRectSweepingLine(arg);
-    return vcDetails;
-  }
-  if (algo === 'old_heatmap') {
-    const vcDetails = await calcUsingOldHeatmap(arg);
-    return vcDetails;
-  }
-  throw new Error('unexpected Error algo not chosen correctly');
-}
-export default calculateTTVCPercentiles;
+export { default as calculateTTVCPercentiles } from './canvas-heatmap';
+export { calculateTTVCPercentilesWithDebugInfo } from './canvas-heatmap';