@atlaskit/react-ufo 2.14.2 → 2.15.0

package/CHANGELOG.md

@@ -1,5 +1,25 @@
 # @atlaskit/ufo-interaction-ignore
 
+## 2.15.0
+
+### Minor Changes
+
+- [#115462](https://stash.atlassian.com/projects/CONFCLOUD/repos/confluence-frontend/pull-requests/115462)
+  [`17a3ace9d5f67`](https://stash.atlassian.com/projects/CONFCLOUD/repos/confluence-frontend/commits/17a3ace9d5f67) -
+  Moved addSegment to useEffect to prevent it added multiple times when running on concurrent mode
+
+### Patch Changes
+
+- Updated dependencies
+
+## 2.14.3
+
+### Patch Changes
+
+- [#112416](https://stash.atlassian.com/projects/CONFCLOUD/repos/confluence-frontend/pull-requests/112416)
+  [`7bc761ae449f4`](https://stash.atlassian.com/projects/CONFCLOUD/repos/confluence-frontend/commits/7bc761ae449f4) -
+  VC ratio calculation precision fix
+
 ## 2.14.2
 
 ### Patch Changes

package/dist/cjs/create-payload/index.js

@@ -222,6 +222,16 @@ var getVCMetrics = function getVCMetrics(interaction) {
   if (interactionStatus.originalInteractionStatus !== 'SUCCEEDED' || pageVisibilityUpToTTAI !== 'visible') {
     return result;
   }
+  if ((0, _platformFeatureFlags.fg)('ufo_vc_multiheatmap')) {
+    var _result;
+    (_result = result["".concat(prefix, ":vc:rev")]) === null || _result === void 0 || _result.forEach(function (element) {
+      var _element$vcDetails;
+      if ((_element$vcDetails = element.vcDetails) !== null && _element$vcDetails !== void 0 && (_element$vcDetails = _element$vcDetails['90']) !== null && _element$vcDetails !== void 0 && _element$vcDetails.t) {
+        var _element$vcDetails$;
+        element['metric:vc90'] = (_element$vcDetails$ = element.vcDetails['90']) === null || _element$vcDetails$ === void 0 ? void 0 : _element$vcDetails$.t;
+      }
+    });
+  }
   return _objectSpread(_objectSpread({}, result), {}, {
     'metric:vc90': VC['90']
   });
@@ -622,6 +632,7 @@ function getPayloadSize(payload) {
   return Math.round(new TextEncoder().encode(JSON.stringify(payload)).length / 1024);
 }
 function getStylesheetMetrics() {
+  // eslint-disable-next-line @atlaskit/platform/ensure-feature-flag-prefix
   if (!(0, _platformFeatureFlags.fg)('ufo_capture_stylesheet_metrics')) {
     return {};
   }

package/dist/cjs/experience-trace-id-context/index.js

@@ -3,7 +3,7 @@
 Object.defineProperty(exports, "__esModule", {
   value: true
 });
-exports.setInteractionActiveTrace = exports.setActiveTrace = exports.getActiveTraceHttpRequestHeaders = exports.getActiveTrace = exports.generateSpanId = exports.clearActiveTrace = void 0;
+exports.setInteractionActiveTrace = exports.setActiveTrace = exports.getActiveTraceHttpRequestHeaders = exports.getActiveTraceAsQueryParams = exports.getActiveTrace = exports.generateSpanId = exports.clearActiveTrace = void 0;
 var _makeTraceHttpRequestHeaders = require("./utils/make-trace-http-request-headers");
 var state = {
   context: null
@@ -37,4 +37,8 @@ var getActiveTraceHttpRequestHeaders = exports.getActiveTraceHttpRequestHeaders
     traceId = _state$context.traceId,
     spanId = _state$context.spanId;
   return (0, _makeTraceHttpRequestHeaders.makeTraceHttpRequestHeaders)(traceId, spanId);
+};
+var getActiveTraceAsQueryParams = exports.getActiveTraceAsQueryParams = function getActiveTraceAsQueryParams(_url) {
+  var traceHeaders = getActiveTraceHttpRequestHeaders(_url);
+  return traceHeaders ? new URLSearchParams(traceHeaders).toString().toLowerCase() : null;
 };

package/dist/cjs/segment/segment.js

@@ -11,6 +11,7 @@ var _toConsumableArray2 = _interopRequireDefault(require("@babel/runtime/helpers
 var _react = _interopRequireWildcard(require("react"));
 var _scheduler = require("scheduler");
 var _uuid = require("uuid");
+var _platformFeatureFlags = require("@atlaskit/platform-feature-flags");
 var _coinflip = _interopRequireDefault(require("../coinflip"));
 var _config = require("../config");
 var _experienceTraceIdContext = require("../experience-trace-id-context");
@@ -54,7 +55,9 @@ function UFOSegment(_ref) {
   }, [parentContext, segmentName, segmentId]);
   var interactionId = (0, _react.useContext)(_interactionIdContext.default);
   var interactionContext = (0, _react.useMemo)(function () {
-    (0, _interactionMetrics.addSegment)(labelStack);
+    if (!(0, _platformFeatureFlags.fg)('platform-ufo-add-segment-use-effect')) {
+      (0, _interactionMetrics.addSegment)(labelStack);
+    }
     var lastCompleteEndTime = 0;
     function complete() {
       var endTime = arguments.length > 0 && arguments[0] !== undefined ? arguments[0] : performance.now();
@@ -233,6 +236,9 @@ function UFOSegment(_ref) {
     }
   }, [interactionContext]);
   (0, _react.useEffect)(function () {
+    if ((0, _platformFeatureFlags.fg)('platform-ufo-add-segment-use-effect')) {
+      (0, _interactionMetrics.addSegment)(labelStack);
+    }
     return function () {
       (0, _interactionMetrics.removeSegment)(labelStack);
     };

package/dist/cjs/vc/vc-observer/heatmap/heatmap.js

@@ -0,0 +1,275 @@
+"use strict";
+
+var _interopRequireDefault = require("@babel/runtime/helpers/interopRequireDefault");
+Object.defineProperty(exports, "__esModule", {
+  value: true
+});
+exports.MultiRevisionHeatmap = void 0;
+var _slicedToArray2 = _interopRequireDefault(require("@babel/runtime/helpers/slicedToArray"));
+var _objectDestructuringEmpty2 = _interopRequireDefault(require("@babel/runtime/helpers/objectDestructuringEmpty"));
+var _classCallCheck2 = _interopRequireDefault(require("@babel/runtime/helpers/classCallCheck"));
+var _createClass2 = _interopRequireDefault(require("@babel/runtime/helpers/createClass"));
+var _defineProperty2 = _interopRequireDefault(require("@babel/runtime/helpers/defineProperty"));
+var UNUSED_SECTOR = 0;
+var MultiRevisionHeatmap = exports.MultiRevisionHeatmap = /*#__PURE__*/function () {
+  function MultiRevisionHeatmap(_ref) {
+    var _this = this;
+    var viewport = _ref.viewport,
+      revisions = _ref.revisions,
+      arraySize = _ref.arraySize,
+      devToolsEnabled = _ref.devToolsEnabled;
+    (0, _classCallCheck2.default)(this, MultiRevisionHeatmap);
+    (0, _defineProperty2.default)(this, "arraySize", {
+      w: 200,
+      h: 200
+    });
+    (0, _defineProperty2.default)(this, "mapPixelsToHeatmap", function (left, top, width, height) {
+      var _this$viewport = _this.viewport,
+        w = _this$viewport.w,
+        h = _this$viewport.h;
+      var l = Math.floor(left / w * _this.arraySize.w);
+      var t = Math.floor(top / h * _this.arraySize.h);
+      var r = Math.ceil((left + width) / w * _this.arraySize.w);
+      var b = Math.ceil((top + height) / h * _this.arraySize.h);
+
+      // correct values to min - 0, max - arraySize
+      var result = {
+        l: Math.max(0, l),
+        t: Math.max(0, t),
+        r: Math.min(_this.arraySize.w, r),
+        b: Math.min(_this.arraySize.h, b)
+      };
+      return result;
+    });
+    (0, _defineProperty2.default)(this, "getElementRatio", function (mappedValues) {
+      var r = mappedValues.r,
+        l = mappedValues.l,
+        b = mappedValues.b,
+        t = mappedValues.t;
+      return (r - l) * (b - t) / (_this.arraySize.w * _this.arraySize.h);
+    });
+    this.viewport = viewport;
+    this.revisions = revisions;
+    if (arraySize) {
+      this.arraySize = arraySize;
+    }
+    this.heatmaps = new Array(revisions.length);
+    this.componentsLogs = new Array(revisions.length);
+    this.vcRatios = new Array(revisions.length);
+    this.devToolsEnabled = devToolsEnabled || false;
+    revisions.forEach(function (_ref2, i) {
+      (0, _objectDestructuringEmpty2.default)(_ref2);
+      _this.heatmaps[i] = _this.getCleanHeatmap();
+      _this.componentsLogs[i] = {};
+      _this.vcRatios[i] = {};
+    });
+  }
+  return (0, _createClass2.default)(MultiRevisionHeatmap, [{
+    key: "handleUpdate",
+    value: function handleUpdate(_ref3) {
+      var _this2 = this;
+      var time = _ref3.time,
+        type = _ref3.type,
+        classification = _ref3.classification,
+        intersectionRect = _ref3.intersectionRect,
+        element = _ref3.element,
+        targetName = _ref3.targetName,
+        ignoreReason = _ref3.ignoreReason,
+        onError = _ref3.onError;
+      var mappedValues = this.mapPixelsToHeatmap(intersectionRect.left, intersectionRect.top, intersectionRect.width, intersectionRect.height);
+      var result = this.applyChangesToHeatMap(mappedValues, time, classification);
+      if (result !== true) {
+        onError(result);
+      }
+      var componentRatio = this.getElementRatio(mappedValues);
+      this.revisions.forEach(function (_, i) {
+        if (classification[i]) {
+          _this2.vcRatios[i][targetName] = componentRatio;
+        }
+        if (!_this2.componentsLogs[i][time]) {
+          _this2.componentsLogs[i][time] = [];
+        }
+        _this2.componentsLogs[i][time].push({
+          __debug__element: _this2.devToolsEnabled ? new WeakRef(element) : null,
+          intersectionRect: intersectionRect,
+          targetName: targetName,
+          ignoreReason: ignoreReason
+        });
+      });
+    }
+  }, {
+    key: "getData",
+    value: function getData() {
+      return {
+        heatmaps: this.heatmaps
+      };
+    }
+  }, {
+    key: "getPayloadShapedData",
+    value: function getPayloadShapedData(args) {
+      var result = this.processData(args);
+      var payload = this.revisions.map(function (rev, i) {
+        var vcDetails = {};
+        args.VCParts.forEach(function (VCPart) {
+          vcDetails[VCPart] = {
+            t: result[i].VC[VCPart] || 0,
+            e: Array.from(result[i].VCBox[VCPart] || [])
+          };
+        });
+        return {
+          revision: rev.name,
+          vcDetails: vcDetails,
+          clean: args.clean,
+          'metric:vc90': null // will be set or not in the payload generator
+        };
+      });
+      return payload;
+    }
+  }, {
+    key: "processData",
+    value: function processData(_ref4) {
+      var _this3 = this;
+      var VCParts = _ref4.VCParts,
+        _ref4$ssr = _ref4.ssr,
+        ssr = _ref4$ssr === void 0 ? UNUSED_SECTOR : _ref4$ssr;
+      return this.heatmaps.map(function (heatmap, i) {
+        var lastUpdate = {};
+        var totalPainted = 0;
+        var componentsLog = _this3.componentsLogs[i];
+        if (ssr !== UNUSED_SECTOR) {
+          var _window$document;
+          var element = {
+            __debug__element: new WeakRef((_window$document = window.document) === null || _window$document === void 0 ? void 0 : _window$document.body),
+            intersectionRect: {
+              top: 0,
+              left: 0,
+              right: 0,
+              bottom: 0,
+              x: 0,
+              y: 0,
+              width: _this3.viewport.w,
+              height: _this3.viewport.h,
+              toJSON: function toJSON() {
+                return {};
+              }
+            },
+            targetName: 'SSR'
+          };
+          if (!componentsLog[ssr]) {
+            componentsLog[ssr] = [];
+          }
+          componentsLog[ssr].push(element);
+        }
+        for (var _i = 0; _i < heatmap.length; _i++) {
+          var rounded = Math.floor(heatmap[_i] === UNUSED_SECTOR && ssr !== UNUSED_SECTOR ? ssr : heatmap[_i]);
+          totalPainted += rounded !== UNUSED_SECTOR ? 1 : 0;
+          if (rounded !== UNUSED_SECTOR) {
+            lastUpdate[rounded] = lastUpdate[rounded] ? lastUpdate[rounded] + 1 : 1;
+          }
+        }
+        var entries = Object.entries(lastUpdate).map(function (a) {
+          return [parseInt(a[0], 10), a[1]];
+        }).sort(function (a, b) {
+          return a[0] > b[0] ? 1 : -1;
+        });
+        var VC = MultiRevisionHeatmap.makeVCReturnObj(VCParts);
+        var VCBox = MultiRevisionHeatmap.makeVCReturnObj(VCParts);
+        entries.reduce(function () {
+          var acc = arguments.length > 0 && arguments[0] !== undefined ? arguments[0] : 0;
+          var v = arguments.length > 1 ? arguments[1] : undefined;
+          var VCRatio = v[1] / totalPainted + acc;
+          var time = v[0];
+          VCParts.forEach(function (value) {
+            if ((VC[value] === null || VC[value] === undefined) && VCRatio >= value / 100) {
+              var _componentsLog$time;
+              VC[value] = time;
+              VCBox[value] = new Set();
+              (_componentsLog$time = componentsLog[time]) === null || _componentsLog$time === void 0 || _componentsLog$time.forEach(function (v) {
+                var _VCBox$value;
+                return (_VCBox$value = VCBox[value]) === null || _VCBox$value === void 0 ? void 0 : _VCBox$value.add(v.targetName);
+              });
+            }
+          });
+          return VCRatio;
+        }, 0);
+        var VCEntries = entries.reduce(function (acc, _ref5, i) {
+          var _acc$abs, _componentsLog$timest;
+          var _ref6 = (0, _slicedToArray2.default)(_ref5, 2),
+            timestamp = _ref6[0],
+            entryPainted = _ref6[1];
+          var currentlyPainted = entryPainted + (((_acc$abs = acc.abs[i - 1]) === null || _acc$abs === void 0 ? void 0 : _acc$abs[1]) || 0);
+          var currentlyPaintedRatio = Math.round(currentlyPainted / totalPainted * 1000) / 10;
+          var logEntry = (_componentsLog$timest = componentsLog[timestamp]) === null || _componentsLog$timest === void 0 ? void 0 : _componentsLog$timest.map(function (v) {
+            return v.targetName;
+          });
+          acc.abs.push([timestamp, currentlyPainted]);
+          acc.rel.push({
+            time: timestamp,
+            vc: currentlyPaintedRatio,
+            elements: logEntry
+          });
+          return acc;
+        }, {
+          abs: [],
+          rel: []
+        });
+        return {
+          VC: VC,
+          VCBox: VCBox,
+          VCEntries: VCEntries,
+          totalPainted: totalPainted
+        };
+      });
+    }
+  }, {
+    key: "applyChangesToHeatMap",
+    value: function applyChangesToHeatMap(a, time, classification) {
+      var l = a.l,
+        t = a.t,
+        r = a.r,
+        b = a.b;
+      var size = classification.length;
+      for (var row = t; row < b; row++) {
+        if (this.heatmaps[0][row] === undefined) {
+          try {
+            return {
+              error: "index - ".concat(row),
+              time: time
+            };
+          } catch (e) {
+            return {
+              error: 'row error',
+              time: time
+            };
+          }
+        } else {
+          for (var heatmapIndex = 0; heatmapIndex < size; heatmapIndex++) {
+            if (classification[heatmapIndex]) {
+              this.heatmaps[heatmapIndex].fill(time, this.getIndex(l, row), this.getIndex(r, row));
+            }
+          }
+        }
+      }
+      return true;
+    }
+  }, {
+    key: "getIndex",
+    value: function getIndex(x, y) {
+      return x + this.arraySize.w * y;
+    }
+  }, {
+    key: "getCleanHeatmap",
+    value: function getCleanHeatmap() {
+      return new Uint32Array(this.arraySize.w * this.arraySize.h);
+    }
+  }], [{
+    key: "makeVCReturnObj",
+    value: function makeVCReturnObj(VCParts) {
+      var vc = {};
+      VCParts.forEach(function (v) {
+        vc[v] = null;
+      });
+      return vc;
+    }
+  }]);
+}();

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

@@ -13,7 +13,9 @@ var _slicedToArray2 = _interopRequireDefault(require("@babel/runtime/helpers/sli
 var _platformFeatureFlags = require("@atlaskit/platform-feature-flags");
 var _attachAbortListeners = require("./attachAbortListeners");
 var _getViewport = require("./getViewport");
+var _heatmap = require("./heatmap/heatmap");
 var _observers = require("./observers");
+var _revisions = require("./revisions/revisions");
 var _excluded = ["__debug__element"];
 function ownKeys(e, r) { var t = Object.keys(e); if (Object.getOwnPropertySymbols) { var o = Object.getOwnPropertySymbols(e); r && (o = o.filter(function (r) { return Object.getOwnPropertyDescriptor(e, r).enumerable; })), t.push.apply(t, o); } return t; }
 function _objectSpread(e) { for (var r = 1; r < arguments.length; r++) { var t = null != arguments[r] ? arguments[r] : {}; r % 2 ? ownKeys(Object(t), !0).forEach(function (r) { (0, _defineProperty2.default)(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; }
@@ -54,6 +56,7 @@ var VCObserver = exports.VCObserver = /*#__PURE__*/function () {
     });
     /* heatmap */
     (0, _defineProperty2.default)(this, "arraySize", 0);
+    (0, _defineProperty2.default)(this, "multiHeatmap", null);
     (0, _defineProperty2.default)(this, "componentsLog", {});
     (0, _defineProperty2.default)(this, "vcRatios", {});
     (0, _defineProperty2.default)(this, "active", false);
@@ -85,6 +88,7 @@ var VCObserver = exports.VCObserver = /*#__PURE__*/function () {
         abortReason: _objectSpread({}, _this.abortReason),
         heatmap: _this.heatmap,
         heatmapNext: _this.heatmapNext,
+        multiHeatmap: _this.multiHeatmap,
         outOfBoundaryInfo: _this.outOfBoundaryInfo,
         totalTime: Math.round(_this.totalTime + _this.observers.getTotalTime()),
         componentsLog: _objectSpread({}, _this.componentsLog),
@@ -117,7 +121,8 @@ var VCObserver = exports.VCObserver = /*#__PURE__*/function () {
         componentsLog = rawData.componentsLog,
         viewport = rawData.viewport,
         devToolsEnabled = rawData.devToolsEnabled,
-        ratios = rawData.ratios;
+        ratios = rawData.ratios,
+        multiHeatmap = rawData.multiHeatmap;
       if (abortReasonInfo !== null && abortReason.blocking) {
         // exposing data to devtools
         try {
@@ -153,6 +158,7 @@ var VCObserver = exports.VCObserver = /*#__PURE__*/function () {
         /* empty */
       }
       var _componentsLog = {};
+      // eslint-disable-next-line @atlaskit/platform/ensure-feature-flag-prefix
       if ((0, _platformFeatureFlags.fg)('ufo-remove-vc-component-observations-after-ttai')) {
         Object.entries(_this.componentsLog).forEach(function (_ref5) {
           var _ref6 = (0, _slicedToArray2.default)(_ref5, 2),
@@ -209,9 +215,30 @@ var VCObserver = exports.VCObserver = /*#__PURE__*/function () {
               tti: tti,
               ttai: stop - start
             },
+            start: start,
+            stop: stop,
             heatmap: heatmap,
             ratios: ratios
           };
+          window.__vcNext = {
+            entries: vcNext.VCEntries.rel,
+            log: componentsLog,
+            metrics: {
+              '75': vcNext.VC['75'],
+              '80': vcNext.VC['80'],
+              '85': vcNext.VC['85'],
+              '90': vcNext.VC['90'],
+              '95': vcNext.VC['95'],
+              '98': vcNext.VC['98'],
+              '99': vcNext.VC['99'],
+              tti: tti,
+              ttai: stop - start
+            },
+            start: start,
+            stop: stop,
+            heatmap: heatmapNext,
+            ratios: ratios
+          };
 
           // Emitting a custom event to make it available in the Chrome extension
           window.dispatchEvent(new CustomEvent('vcReady', {
@@ -224,12 +251,36 @@ var VCObserver = exports.VCObserver = /*#__PURE__*/function () {
       } catch (e) {
         /*  do nothing */
       }
-      return _objectSpread(_objectSpread((0, _defineProperty2.default)((0, _defineProperty2.default)((0, _defineProperty2.default)((0, _defineProperty2.default)((0, _defineProperty2.default)((0, _defineProperty2.default)((0, _defineProperty2.default)((0, _defineProperty2.default)({
+      var isMultiHeatmapEnabled = (0, _platformFeatureFlags.fg)('ufo_vc_multiheatmap');
+      var revisionsData = isMultiHeatmapEnabled && multiHeatmap !== null ? (0, _defineProperty2.default)({}, "".concat(fullPrefix, "vc:rev"), multiHeatmap.getPayloadShapedData({
+        VCParts: VCObserver.VCParts.map(function (v) {
+          return parseInt(v);
+        }),
+        ssr: ssr,
+        clean: !abortReasonInfo
+      })) : null;
+      // eslint-disable-next-line @atlaskit/platform/ensure-feature-flag-prefix
+      var isCalcSpeedIndexEnabled = (0, _platformFeatureFlags.fg)('ufo-calc-speed-index');
+      return _objectSpread(_objectSpread(_objectSpread((0, _defineProperty2.default)((0, _defineProperty2.default)((0, _defineProperty2.default)((0, _defineProperty2.default)((0, _defineProperty2.default)((0, _defineProperty2.default)((0, _defineProperty2.default)((0, _defineProperty2.default)({
         'metrics:vc': VC
-      }, "".concat(fullPrefix, "vc:state"), true), "".concat(fullPrefix, "vc:clean"), !abortReasonInfo), "".concat(fullPrefix, "vc:dom"), VCBox), "".concat(fullPrefix, "vc:updates"), VCEntries.rel.slice(0, 50)), "".concat(fullPrefix, "vc:size"), viewport), "".concat(fullPrefix, "vc:time"), Math.round(totalTime + (stopTime - startTime))), "".concat(fullPrefix, "vc:total"), totalPainted), "".concat(fullPrefix, "vc:ratios"), ratios), outOfBoundary), {}, (0, _defineProperty2.default)((0, _defineProperty2.default)((0, _defineProperty2.default)((0, _defineProperty2.default)({}, "".concat(fullPrefix, "vc:next"), vcNext.VC), "".concat(fullPrefix, "vc:next:updates"), vcNext.VCEntries.rel.slice(0, 50)), "".concat(fullPrefix, "vc:next:dom"), vcNext.VCBox), "".concat(fullPrefix, "vc:ignored"), _this.getIgnoredElements(componentsLog)));
+      }, "".concat(fullPrefix, "vc:state"), true), "".concat(fullPrefix, "vc:clean"), !abortReasonInfo), "".concat(fullPrefix, "vc:dom"), VCBox), "".concat(fullPrefix, "vc:updates"), VCEntries.rel.slice(0, 50)), "".concat(fullPrefix, "vc:size"), viewport), "".concat(fullPrefix, "vc:time"), Math.round(totalTime + (stopTime - startTime))), "".concat(fullPrefix, "vc:total"), totalPainted), "".concat(fullPrefix, "vc:ratios"), ratios), outOfBoundary), {}, (0, _defineProperty2.default)((0, _defineProperty2.default)((0, _defineProperty2.default)((0, _defineProperty2.default)({}, "".concat(fullPrefix, "vc:next"), vcNext.VC), "".concat(fullPrefix, "vc:next:updates"), vcNext.VCEntries.rel.slice(0, 50)), "".concat(fullPrefix, "vc:next:dom"), vcNext.VCBox), "".concat(fullPrefix, "vc:ignored"), _this.getIgnoredElements(componentsLog)), revisionsData), {}, (0, _defineProperty2.default)((0, _defineProperty2.default)({}, "ufo:speedIndex", isCalcSpeedIndexEnabled ? VCEntries.speedIndex : undefined), "ufo:next:speedIndex", isCalcSpeedIndexEnabled ? vcNext.VCEntries.speedIndex : undefined));
     });
     (0, _defineProperty2.default)(this, "handleUpdate", function (rawTime, intersectionRect, targetName, element, type, ignoreReason) {
       _this.measureStart();
+      _this.legacyHandleUpdate(rawTime, intersectionRect, targetName, element, type, ignoreReason);
+      if ((0, _platformFeatureFlags.fg)('ufo_vc_multiheatmap')) {
+        _this.onViewportChangeDetected({
+          timestamp: rawTime,
+          intersectionRect: intersectionRect,
+          targetName: targetName,
+          element: element,
+          type: type,
+          ignoreReason: ignoreReason
+        });
+      }
+      _this.measureStop();
+    });
+    (0, _defineProperty2.default)(this, "legacyHandleUpdate", function (rawTime, intersectionRect, targetName, element, type, ignoreReason) {
       if (_this.abortReason.reason === null || _this.abortReason.blocking === false) {
         var time = Math.round(rawTime - _this.startTime);
         var mappedValues = _this.mapPixelsToHeatmap(intersectionRect.left, intersectionRect.top, intersectionRect.width, intersectionRect.height);
@@ -250,8 +301,38 @@ var VCObserver = exports.VCObserver = /*#__PURE__*/function () {
           ignoreReason: ignoreReason
         });
       }
-      // devtools export
-      _this.measureStop();
+    });
+    (0, _defineProperty2.default)(this, "onViewportChangeDetected", function (_ref9) {
+      var element = _ref9.element,
+        type = _ref9.type,
+        ignoreReason = _ref9.ignoreReason,
+        timestamp = _ref9.timestamp,
+        targetName = _ref9.targetName,
+        intersectionRect = _ref9.intersectionRect;
+      if (_this.multiHeatmap === null) {
+        return;
+      }
+      // @todo add abort reason handling
+      var time = Math.round(timestamp - _this.startTime);
+      var revisions = (0, _revisions.getRevisions)();
+      var revisionsClassification = revisions.map(function (revision) {
+        return revision.classifier.classifyUpdate({
+          element: element,
+          type: type,
+          ignoreReason: ignoreReason
+        });
+      }, []);
+      _this.multiHeatmap.handleUpdate({
+        time: time,
+        targetName: targetName,
+        intersectionRect: intersectionRect,
+        type: type,
+        element: element,
+        classification: revisionsClassification,
+        onError: function onError(error) {
+          _this.setAbortReason(abortReason.error, error.time, error.error);
+        }
+      });
     });
     (0, _defineProperty2.default)(this, "mapPixelsToHeatmap", function (left, top, width, height) {
       var _this$viewport = _this.viewport,
@@ -309,10 +390,10 @@ var VCObserver = exports.VCObserver = /*#__PURE__*/function () {
       var unbinds = (0, _attachAbortListeners.attachAbortListeners)(window, _this.viewport, _this.abortReasonCallback);
       if ((_window = window) !== null && _window !== void 0 && _window.__SSR_ABORT_LISTENERS__) {
         var _window2;
-        Object.entries(window.__SSR_ABORT_LISTENERS__.aborts).forEach(function (_ref8) {
-          var _ref9 = (0, _slicedToArray2.default)(_ref8, 2),
-            key = _ref9[0],
-            time = _ref9[1];
+        Object.entries(window.__SSR_ABORT_LISTENERS__.aborts).forEach(function (_ref10) {
+          var _ref11 = (0, _slicedToArray2.default)(_ref10, 2),
+            key = _ref11[0],
+            time = _ref11[1];
           if (time) {
             _this.abortReasonCallback(key, time);
           }
@@ -336,12 +417,19 @@ var VCObserver = exports.VCObserver = /*#__PURE__*/function () {
     });
     this.heatmap = this.getCleanHeatmap();
     this.heatmapNext = this.getCleanHeatmap();
+    if ((0, _platformFeatureFlags.fg)('ufo_vc_multiheatmap')) {
+      this.multiHeatmap = new _heatmap.MultiRevisionHeatmap({
+        viewport: this.viewport,
+        revisions: (0, _revisions.getRevisions)(),
+        devToolsEnabled: this.devToolsEnabled
+      });
+    }
     this.isPostInteraction = options.isPostInteraction || false;
   }
   return (0, _createClass2.default)(VCObserver, [{
     key: "start",
-    value: function start(_ref10) {
-      var startTime = _ref10.startTime;
+    value: function start(_ref12) {
+      var startTime = _ref12.startTime;
       this.active = true;
       if (this.observers.isBrowserSupported()) {
         this.setViewportSize();
@@ -363,12 +451,12 @@ var VCObserver = exports.VCObserver = /*#__PURE__*/function () {
   }, {
     key: "getIgnoredElements",
     value: function getIgnoredElements(componentsLog) {
-      return Object.values(componentsLog).flat().filter(function (_ref11) {
-        var ignoreReason = _ref11.ignoreReason;
+      return Object.values(componentsLog).flat().filter(function (_ref13) {
+        var ignoreReason = _ref13.ignoreReason;
         return Boolean(ignoreReason);
-      }).map(function (_ref12) {
-        var targetName = _ref12.targetName,
-          ignoreReason = _ref12.ignoreReason;
+      }).map(function (_ref14) {
+        var targetName = _ref14.targetName,
+          ignoreReason = _ref14.ignoreReason;
         return {
           targetName: targetName,
           ignoreReason: ignoreReason
@@ -489,12 +577,12 @@ var VCObserver = exports.VCObserver = /*#__PURE__*/function () {
     }
   }], [{
     key: "calculateVC",
-    value: function calculateVC(_ref13) {
-      var heatmap = _ref13.heatmap,
-        _ref13$ssr = _ref13.ssr,
-        ssr = _ref13$ssr === void 0 ? UNUSED_SECTOR : _ref13$ssr,
-        componentsLog = _ref13.componentsLog,
-        viewport = _ref13.viewport;
+    value: function calculateVC(_ref15) {
+      var heatmap = _ref15.heatmap,
+        _ref15$ssr = _ref15.ssr,
+        ssr = _ref15$ssr === void 0 ? UNUSED_SECTOR : _ref15$ssr,
+        componentsLog = _ref15.componentsLog,
+        viewport = _ref15.viewport;
       var lastUpdate = {};
       var totalPainted = 0;
       if (ssr !== UNUSED_SECTOR) {
@@ -537,10 +625,19 @@ var VCObserver = exports.VCObserver = /*#__PURE__*/function () {
       });
       var VC = VCObserver.makeVCReturnObj();
       var VCBox = VCObserver.makeVCReturnObj();
+
+      // eslint-disable-next-line @atlaskit/platform/ensure-feature-flag-prefix
+      var isCalcSpeedIndexEnabled = (0, _platformFeatureFlags.fg)('ufo-calc-speed-index');
       entries.reduce(function () {
         var acc = arguments.length > 0 && arguments[0] !== undefined ? arguments[0] : 0;
         var v = arguments.length > 1 ? arguments[1] : undefined;
-        var VCRatio = v[1] / totalPainted + acc;
+        var currRatio = v[1] / totalPainted;
+        var VCRatio = currRatio + acc;
+        if ((0, _platformFeatureFlags.fg)('platform_ufo_fix_vc_observer_rounding_error')) {
+          var preciseCurrRatio = Math.round(100 * (v[1] / totalPainted));
+          var preciseAccRatio = Math.round(acc * 100);
+          VCRatio = (preciseCurrRatio + preciseAccRatio) / 100;
+        }
         var time = v[0];
         VCObserver.VCParts.forEach(function (key) {
           var value = parseInt(key, 10);
@@ -554,16 +651,21 @@ var VCObserver = exports.VCObserver = /*#__PURE__*/function () {
         });
         return VCRatio;
       }, 0);
-      var VCEntries = entries.reduce(function (acc, _ref14, i) {
-        var _acc$abs, _componentsLog$timest;
-        var _ref15 = (0, _slicedToArray2.default)(_ref14, 2),
-          timestamp = _ref15[0],
-          entryPainted = _ref15[1];
+      var VCEntries = entries.reduce(function (acc, _ref16, i) {
+        var _acc$abs, _componentsLog$timest, _acc$rel$vc, _acc$rel;
+        var _ref17 = (0, _slicedToArray2.default)(_ref16, 2),
+          timestamp = _ref17[0],
+          entryPainted = _ref17[1];
         var currentlyPainted = entryPainted + (((_acc$abs = acc.abs[i - 1]) === null || _acc$abs === void 0 ? void 0 : _acc$abs[1]) || 0);
         var currentlyPaintedRatio = Math.round(currentlyPainted / totalPainted * 1000) / 10;
         var logEntry = (_componentsLog$timest = componentsLog[timestamp]) === null || _componentsLog$timest === void 0 ? void 0 : _componentsLog$timest.map(function (v) {
           return v.targetName;
         });
+        var ratioDelta = (currentlyPaintedRatio - ((_acc$rel$vc = (_acc$rel = acc.rel[i - 1]) === null || _acc$rel === void 0 ? void 0 : _acc$rel.vc) !== null && _acc$rel$vc !== void 0 ? _acc$rel$vc : 0)) / 100;
+        if (isCalcSpeedIndexEnabled) {
+          var speedIndex = timestamp * ratioDelta;
+          acc.speedIndex += speedIndex;
+        }
         acc.abs.push([timestamp, currentlyPainted]);
         acc.rel.push({
           time: timestamp,
@@ -573,8 +675,10 @@ var VCObserver = exports.VCObserver = /*#__PURE__*/function () {
         return acc;
       }, {
         abs: [],
-        rel: []
+        rel: [],
+        speedIndex: 0
       });
+      VCEntries.speedIndex = Math.round(VCEntries.speedIndex);
       return {
         VC: VC,
         VCBox: VCBox,