@atlaskit/react-ufo 2.14.3 → 2.16.0

package/CHANGELOG.md

@@ -1,5 +1,25 @@
 # @atlaskit/ufo-interaction-ignore
 
+## 2.16.0
+
+### Minor Changes
+
+- [#109616](https://stash.atlassian.com/projects/CONFCLOUD/repos/confluence-frontend/pull-requests/109616)
+  [`5feb3a695a6d9`](https://stash.atlassian.com/projects/CONFCLOUD/repos/confluence-frontend/commits/5feb3a695a6d9) -
+  Add Assets API to rUFO
+
+## 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

package/dist/cjs/assets/index.js

@@ -0,0 +1,96 @@
+"use strict";
+
+var _interopRequireDefault = require("@babel/runtime/helpers/interopRequireDefault");
+Object.defineProperty(exports, "__esModule", {
+  value: true
+});
+exports.CHRSummary = exports.CHRReporter = void 0;
+var _slicedToArray2 = _interopRequireDefault(require("@babel/runtime/helpers/slicedToArray"));
+var _classCallCheck2 = _interopRequireDefault(require("@babel/runtime/helpers/classCallCheck"));
+var _createClass2 = _interopRequireDefault(require("@babel/runtime/helpers/createClass"));
+var _defineProperty4 = _interopRequireDefault(require("@babel/runtime/helpers/defineProperty"));
+var _utils = require("./utils");
+var CHRSummary = exports.CHRSummary = /*#__PURE__*/function () {
+  function CHRSummary() {
+    (0, _classCallCheck2.default)(this, CHRSummary);
+    (0, _defineProperty4.default)(this, "bundles", (0, _defineProperty4.default)((0, _defineProperty4.default)((0, _defineProperty4.default)({}, _utils.MEMORY_KEY, 0), _utils.DISK_KEY, 0), _utils.NETWORK_KEY, 0));
+    (0, _defineProperty4.default)(this, "bundlesCount", 0);
+    (0, _defineProperty4.default)(this, "size", (0, _defineProperty4.default)((0, _defineProperty4.default)((0, _defineProperty4.default)({}, _utils.MEMORY_KEY, 0), _utils.DISK_KEY, 0), _utils.NETWORK_KEY, 0));
+    (0, _defineProperty4.default)(this, "sizeTotal", 0);
+  }
+  return (0, _createClass2.default)(CHRSummary, [{
+    key: "add",
+    value: function add(asset) {
+      var size = 'size' in asset ? asset.size : undefined;
+      var encodedSize = 'encodedSize' in asset ? Number(asset.encodedSize) : 0;
+      var type = (0, _utils.calculateTransferType)(asset.type, asset.duration, size);
+      if (type === null) {
+        return;
+      }
+      this.bundles[type] += 1;
+      this.bundlesCount += 1;
+      this.size[type] += encodedSize;
+      this.sizeTotal += encodedSize;
+    }
+  }], [{
+    key: "makePayload",
+    value: function makePayload(summary) {
+      var size = summary.size,
+        bundlesCount = summary.bundlesCount,
+        sizeTotal = summary.sizeTotal;
+      var cachedSize = size[_utils.MEMORY_KEY] + size[_utils.DISK_KEY];
+      var sizeRatio = (0, _utils.round)(cachedSize / summary.sizeTotal);
+      return {
+        size: sizeTotal,
+        chr: sizeRatio,
+        count: bundlesCount
+      };
+    }
+  }]);
+}();
+var CHRReporter = exports.CHRReporter = /*#__PURE__*/function () {
+  function CHRReporter() {
+    (0, _classCallCheck2.default)(this, CHRReporter);
+    (0, _defineProperty4.default)(this, "all", new CHRSummary());
+    (0, _defineProperty4.default)(this, "allAtlassian", new CHRSummary());
+    (0, _defineProperty4.default)(this, "preloaded", new CHRSummary());
+  }
+  return (0, _createClass2.default)(CHRReporter, [{
+    key: "get",
+    value: function get(resourceTimings, assetsClassification) {
+      var _this = this;
+      try {
+        Object.entries(resourceTimings).map(function (_ref) {
+          var _ref2 = (0, _slicedToArray2.default)(_ref, 2),
+            label = _ref2[0],
+            entry = _ref2[1];
+          if (assetsClassification.all) {
+            _this.all.add(entry);
+          }
+          if (assetsClassification.allAtlassian({
+            label: label,
+            entry: entry
+          })) {
+            _this.allAtlassian.add(entry);
+          }
+          if (assetsClassification.preloaded({
+            label: label,
+            entry: entry
+          })) {
+            _this.preloaded.add(entry);
+          }
+        });
+        if (this.all.bundlesCount === 0) {
+          return null;
+        }
+        return {
+          all: CHRSummary.makePayload(this.all),
+          allAtlassian: CHRSummary.makePayload(this.allAtlassian),
+          preloaded: CHRSummary.makePayload(this.preloaded)
+        };
+      } catch (error) {
+        return null;
+      }
+    }
+  }]);
+}();

package/dist/cjs/assets/utils.js

@@ -0,0 +1,32 @@
+"use strict";
+
+Object.defineProperty(exports, "__esModule", {
+  value: true
+});
+exports.round = exports.calculateTransferType = exports.cacheableTypes = exports.NETWORK_KEY = exports.MEMORY_KEY = exports.DISK_KEY = void 0;
+/* Borrowed from https://bitbucket.org/atlassian/atlassian-frontend/src/master/packages/performance/browser-metrics/src/plugins/timings/resource.ts */
+var cacheableTypes = exports.cacheableTypes = ['script', 'link'];
+var MEMORY_KEY = exports.MEMORY_KEY = 'mem';
+var DISK_KEY = exports.DISK_KEY = 'disk';
+var NETWORK_KEY = exports.NETWORK_KEY = 'net';
+var calculateTransferType = exports.calculateTransferType = function calculateTransferType(type, duration, size) {
+  if (!cacheableTypes.includes(type)) {
+    return null;
+  }
+  if ((size === undefined || size === 0) && duration === 0) {
+    return MEMORY_KEY;
+  }
+  if (size === 0 && duration > 0) {
+    return DISK_KEY;
+  }
+  if (size === undefined) {
+    return null;
+  }
+  return NETWORK_KEY;
+};
+var round = exports.round = function round(n) {
+  if (isNaN(n)) {
+    return 0;
+  }
+  return Math.round(n * 10000) / 10000;
+};

package/dist/cjs/common/assets/types.js

@@ -0,0 +1,5 @@
+"use strict";
+
+Object.defineProperty(exports, "__esModule", {
+  value: true
+});

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

@@ -14,6 +14,7 @@ var _defineProperty2 = _interopRequireDefault(require("@babel/runtime/helpers/de
 var _bowserUltralight = _interopRequireDefault(require("bowser-ultralight"));
 var _platformFeatureFlags = require("@atlaskit/platform-feature-flags");
 var _additionalPayload = require("../additional-payload");
+var _assets = require("../assets");
 var bundleEvalTiming = _interopRequireWildcard(require("../bundle-eval-timing"));
 var _coinflip = _interopRequireDefault(require("../coinflip"));
 var _constants = require("../common/constants");
@@ -222,6 +223,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']
   });
@@ -305,6 +316,31 @@ function getSSRProperties(type) {
     'ssr:featureFlags': getSSRFeatureFlags(type)
   };
 }
+var getAssetsMetrics = function getAssetsMetrics(interaction, resourceTimings) {
+  try {
+    var config = (0, _config.getConfig)();
+    var type = interaction.type;
+    var isCHREnabled = (0, _platformFeatureFlags.fg)('ufo_chr_config');
+    var allowedTypes = ['page_load', 'transition'];
+    var assetsClassification = config === null || config === void 0 ? void 0 : config.assetsClassification;
+    if (!isCHREnabled || !allowedTypes.includes(type) || !assetsClassification) {
+      // Skip if: FG disabled, not allowed type or assetsClassification isn't configured
+      return {};
+    }
+    var reporter = new _assets.CHRReporter();
+    var assets = reporter.get(resourceTimings, assetsClassification);
+    if (assets) {
+      // Only add assets in case it exists
+      return {
+        'event:assets': assets
+      };
+    }
+    return {};
+  } catch (error) {
+    // Skip CHR in case of error
+    return {};
+  }
+};
 var getBrowserMetadata = function getBrowserMetadata() {
   var data = {};
   var now = new Date();
@@ -719,7 +755,7 @@ function createInteractionMetricsPayload(interaction, interactionId, experimenta
     });
   };
   // Detailed payload. Page visibility = visible
-  var getDetailedInteractionMetrics = function getDetailedInteractionMetrics() {
+  var getDetailedInteractionMetrics = function getDetailedInteractionMetrics(resourceTimings) {
     if (experimental || window.__UFO_COMPACT_PAYLOAD__ || !isDetailedPayload) {
       return {};
     }
@@ -740,7 +776,7 @@ function createInteractionMetricsPayload(interaction, interactionId, experimenta
       requestInfo: optimizeRequestInfo(interaction.requestInfo, start),
       customTimings: optimizeCustomTimings(interaction.customTimings, start),
       bundleEvalTimings: objectToArray(getBundleEvalTimings(start)),
-      resourceTimings: objectToArray(getResourceTimings(start, end))
+      resourceTimings: objectToArray(resourceTimings)
     };
   };
   // Page load & detailed payload
@@ -761,6 +797,7 @@ function createInteractionMetricsPayload(interaction, interactionId, experimenta
     regularTTAI = getTTAI(interaction);
   }
   var newUFOName = (0, _utils.sanitizeUfoName)(ufoName);
+  var resourceTimings = getResourceTimings(start, end);
   var payload = {
     actionSubject: 'experience',
     action: 'measured',
@@ -768,7 +805,7 @@ function createInteractionMetricsPayload(interaction, interactionId, experimenta
     source: 'measured',
     tags: ['observability'],
     attributes: {
-      properties: _objectSpread(_objectSpread(_objectSpread(_objectSpread(_objectSpread(_objectSpread(_objectSpread(_objectSpread(_objectSpread(_objectSpread(_objectSpread(_objectSpread({
+      properties: _objectSpread(_objectSpread(_objectSpread(_objectSpread(_objectSpread(_objectSpread(_objectSpread(_objectSpread(_objectSpread(_objectSpread(_objectSpread(_objectSpread(_objectSpread({
         // basic
         'event:hostname': ((_window$location = window.location) === null || _window$location === void 0 ? void 0 : _window$location.hostname) || 'unknown',
         'event:product': config.product,
@@ -782,7 +819,7 @@ function createInteractionMetricsPayload(interaction, interactionId, experimenta
         'event:region': config.region || 'unknown',
         'experience:key': experimental ? 'custom.experimental-interaction-metrics' : 'custom.interaction-metrics',
         'experience:name': newUFOName
-      }, getBrowserMetadata()), getSSRProperties(type)), getPPSMetrics(interaction)), getPaintMetrics(type)), getNavigationMetrics(type)), getVCMetrics(interaction)), experimental ? (0, _createExperimentalInteractionMetricsPayload.getExperimentalVCMetrics)(interaction) : undefined), (_config$additionalPay = config.additionalPayloadData) === null || _config$additionalPay === void 0 ? void 0 : _config$additionalPay.call(config, interaction)), getTracingContextData(interaction)), getStylesheetMetrics()), getErrorCounts(interaction)), {}, {
+      }, getBrowserMetadata()), getSSRProperties(type)), getAssetsMetrics(interaction, resourceTimings)), getPPSMetrics(interaction)), getPaintMetrics(type)), getNavigationMetrics(type)), getVCMetrics(interaction)), experimental ? (0, _createExperimentalInteractionMetricsPayload.getExperimentalVCMetrics)(interaction) : undefined), (_config$additionalPay = config.additionalPayloadData) === null || _config$additionalPay === void 0 ? void 0 : _config$additionalPay.call(config, interaction)), getTracingContextData(interaction)), getStylesheetMetrics()), getErrorCounts(interaction)), {}, {
         interactionMetrics: _objectSpread(_objectSpread(_objectSpread(_objectSpread(_objectSpread(_objectSpread({
           namePrefix: config.namePrefix || '',
           segmentPrefix: config.segmentPrefix || '',
@@ -814,7 +851,7 @@ function createInteractionMetricsPayload(interaction, interactionId, experimenta
           marks: optimizeMarks(interaction.marks),
           customData: optimizeCustomData(interaction),
           reactProfilerTimings: optimizeReactProfilerTimings(interaction.reactProfilerTimings, start)
-        }, labelStack), getPageLoadInteractionMetrics()), getDetailedInteractionMetrics()), getPageLoadDetailedInteractionMetrics()), getBm3TrackerTimings(interaction)), {}, {
+        }, labelStack), getPageLoadInteractionMetrics()), getDetailedInteractionMetrics(resourceTimings)), getPageLoadDetailedInteractionMetrics()), getBm3TrackerTimings(interaction)), {}, {
           'metric:ttai': experimental ? regularTTAI || expTTAI : undefined,
           'metric:experimental:ttai': expTTAI
         }),

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,264 @@
+"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,
+        VCCalculationMethods = _ref4.VCCalculationMethods,
+        _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 _VCCalculationMethods = VCCalculationMethods[i]({
+            VCParts: VCParts,
+            componentsLog: componentsLog,
+            entries: entries,
+            totalPainted: totalPainted
+          }),
+          VC = _VCCalculationMethods.VC,
+          VCBox = _VCCalculationMethods.VCBox;
+        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;
+    }
+  }]);
+}();