@bundle-stats/ui 3.3.0-alpha.1 → 3.3.0-beta.1

package/lib/components/bundle-modules/bundle-modules.utils.js

@@ -41,18 +41,17 @@ function _arrayWithoutHoles(arr) { if (Array.isArray(arr)) return _arrayLikeToAr
 
 function _arrayLikeToArray(arr, len) { if (len == null || len > arr.length) len = arr.length; for (var i = 0, arr2 = new Array(len); i < len; i++) { arr2[i] = arr[i]; } return arr2; }
 
-function ownKeys(object, enumerableOnly) { var keys = Object.keys(object); if (Object.getOwnPropertySymbols) { var symbols = Object.getOwnPropertySymbols(object); enumerableOnly && (symbols = symbols.filter(function (sym) { return Object.getOwnPropertyDescriptor(object, sym).enumerable; })), keys.push.apply(keys, symbols); } return keys; }
-
-function _objectSpread(target) { for (var i = 1; i < arguments.length; i++) { var source = null != arguments[i] ? arguments[i] : {}; i % 2 ? ownKeys(Object(source), !0).forEach(function (key) { _defineProperty(target, key, source[key]); }) : Object.getOwnPropertyDescriptors ? Object.defineProperties(target, Object.getOwnPropertyDescriptors(source)) : ownKeys(Object(source)).forEach(function (key) { Object.defineProperty(target, key, Object.getOwnPropertyDescriptor(source, key)); }); } return target; }
+var addRowSourceFlag = function addRowSourceFlag(row) {
+  var key = row.key,
+      runs = row.runs; // @NOTE Assign instead destructuring for perf reasons
+  // eslint-disable-next-line no-param-reassign
 
-function _defineProperty(obj, key, value) { if (key in obj) { Object.defineProperty(obj, key, { value: value, enumerable: true, configurable: true, writable: true }); } else { obj[key] = value; } return obj; }
+  row.thirdParty = Boolean(key.match(_webpack.MODULE_PATH_PACKAGES)); // eslint-disable-next-line no-param-reassign
 
-var addRowSourceFlag = function addRowSourceFlag(row) {
-  var key = row.key;
-  var thirdParty = Boolean(key.match(_webpack.MODULE_PATH_PACKAGES));
-  return _objectSpread(_objectSpread({}, row), {}, {
-    thirdParty: thirdParty
-  });
+  row.duplicated = Boolean(runs.find(function (run) {
+    return (run === null || run === void 0 ? void 0 : run.duplicated) === true;
+  }));
+  return row;
 };
 
 exports.addRowSourceFlag = addRowSourceFlag;
@@ -82,6 +81,11 @@ var getRowFilter = function getRowFilter(filters) {
     // Skip not changed rows
     if (filters[_utils.MODULE_FILTERS.CHANGED] && !row.changed) {
       return false;
+    } // Skip not duplicated rows
+
+
+    if (filters[_utils.MODULE_FILTERS.DUPLICATED] && !row.duplicated) {
+      return false;
     } // Skip not matching source type
 
 

package/lib/components/bundle-modules/index.js

@@ -72,12 +72,12 @@ var BundleModules = function BundleModules(props) {
 
   var _useMemo = (0, _react.useMemo)(function () {
     return {
-      defaultFilters: _objectSpread(_objectSpread(_objectSpread({
+      defaultFilters: _objectSpread(_objectSpread(_objectSpread(_objectSpread({
         changed: (jobs === null || jobs === void 0 ? void 0 : jobs.length) > 1
-      }, (0, _utils.getModuleSourceTypeFilters)(true)), (0, _utils.getModuleChunkFilters)(chunkIds, true)), (0, _utils.getModuleFileTypeFilters)(true)),
-      allEntriesFilters: _objectSpread(_objectSpread(_objectSpread({
+      }, (0, _utils.getModuleSourceTypeFilters)(true)), (0, _utils.getModuleChunkFilters)(chunkIds, true)), (0, _utils.getModuleFileTypeFilters)(true)), {}, _defineProperty({}, _utils.MODULE_FILTERS.DUPLICATED, false)),
+      allEntriesFilters: _objectSpread(_objectSpread(_objectSpread(_objectSpread({
         changed: false
-      }, (0, _utils.getModuleSourceTypeFilters)(true)), (0, _utils.getModuleChunkFilters)(chunkIds, true)), (0, _utils.getModuleFileTypeFilters)(true))
+      }, (0, _utils.getModuleSourceTypeFilters)(true)), (0, _utils.getModuleChunkFilters)(chunkIds, true)), (0, _utils.getModuleFileTypeFilters)(true)), {}, _defineProperty({}, _utils.MODULE_FILTERS.DUPLICATED, false))
     };
   }, [jobs]),
       defaultFilters = _useMemo.defaultFilters,

package/lib/components/bundle-packages/bundle-packages.js

@@ -27,10 +27,12 @@ var _emptySet = require("../../ui/empty-set");
 
 var _filters = require("../../ui/filters");
 
-var _popover = require("../../ui/popover");
+var _hoverCard = require("../../ui/hover-card");
 
 var _sortDropdown = require("../../ui/sort-dropdown");
 
+var _tag = require("../../ui/tag");
+
 var _toolbar = require("../../ui/toolbar");
 
 var _fileName = require("../../ui/file-name");
@@ -83,36 +85,36 @@ var PackagePopoverContent = function PackagePopoverContent(_ref) {
       packageId = _name$split2[1];
 
   return /*#__PURE__*/_react["default"].createElement(_stack.Stack, {
-    space: "xxsmall",
-    className: _bundlePackagesModule["default"].packagePopover
+    space: "xsmall",
+    className: _bundlePackagesModule["default"].packageHoverCard
   }, /*#__PURE__*/_react["default"].createElement(_stack.Stack, {
     space: "xxxsmall"
   }, /*#__PURE__*/_react["default"].createElement("h3", {
-    className: _bundlePackagesModule["default"].packagePopoverTitle
+    className: _bundlePackagesModule["default"].packageHoverCardTitle
   }, normalizedName, packageId && /*#__PURE__*/_react["default"].createElement("span", {
-    className: _bundlePackagesModule["default"].packagePopoverTitleIndex
+    className: _bundlePackagesModule["default"].packageHoverCardTitleIndex
   }, "".concat(_utils.PACKAGE_ID_SEPARATOR).concat(packageId))), /*#__PURE__*/_react["default"].createElement("p", {
-    className: _bundlePackagesModule["default"].packagePopoverPath
+    className: _bundlePackagesModule["default"].packageHoverCardPath
   }, /*#__PURE__*/_react["default"].createElement(_fileName.FileName, {
-    className: _bundlePackagesModule["default"].packagePopoverPathValue,
+    className: _bundlePackagesModule["default"].packageHoverCardPathValue,
     name: normalizedPackagePath
   }))), /*#__PURE__*/_react["default"].createElement("ul", {
-    className: _bundlePackagesModule["default"].packagePopoverList
+    className: _bundlePackagesModule["default"].packageHoverCardList
   }, /*#__PURE__*/_react["default"].createElement("li", {
-    className: _bundlePackagesModule["default"].packagePopoverItem
+    className: _bundlePackagesModule["default"].packageHoverCardItem
   }, /*#__PURE__*/_react["default"].createElement("a", {
     href: "https://www.npmjs.com/package/".concat(normalizedName),
     target: "_blank",
     rel: "noreferrer"
   }, "npmjs.com")), /*#__PURE__*/_react["default"].createElement("li", {
-    className: _bundlePackagesModule["default"].packagePopoverItem
+    className: _bundlePackagesModule["default"].packageHoverCardItem
   }, /*#__PURE__*/_react["default"].createElement("a", {
     href: "https://bundlephobia.com/result?p=".concat(normalizedName),
     target: "_blank",
     rel: "noreferrer"
   }, "bundlephobia.com"))), /*#__PURE__*/_react["default"].createElement(_stack.Stack, {
     space: "xxxsmall",
-    className: _bundlePackagesModule["default"].packagePopover.actions
+    className: _bundlePackagesModule["default"].packageHoverCardActions
   }, duplicate && /*#__PURE__*/_react["default"].createElement("div", null, /*#__PURE__*/_react["default"].createElement(CustomComponentLink, (0, _utils.getBundlePackagesByNameComponentLink)(normalizedName), "View all duplicate instances")), /*#__PURE__*/_react["default"].createElement(CustomComponentLink, (0, _utils.getBundleModulesBySearch)(normalizedPackagePath), "Search modules by package path")));
 };
 
@@ -127,39 +129,91 @@ PackagePopoverContent.defaultProps = {
   path: ''
 };
 
-var PackageRowHeader = function PackageRowHeader(_ref2) {
-  var item = _ref2.item,
+var PackageName = function PackageName(_ref2) {
+  var packageName = _ref2.packageName,
+      path = _ref2.path,
+      showDuplicateFlag = _ref2.showDuplicateFlag,
+      row = _ref2.row,
       CustomComponentLink = _ref2.CustomComponentLink;
-  var packageNames = item.label.split(_utils.PACKAGES_SEPARATOR);
 
-  var _ref3 = item.runs[0] || {},
-      path = _ref3.path;
+  var _useState = (0, _react.useState)(false),
+      _useState2 = _slicedToArray(_useState, 2),
+      showHoverCard = _useState2[0],
+      setHoverCard = _useState2[1];
+
+  var handleOnMouseEnter = (0, _react.useCallback)(function () {
+    return setHoverCard(true);
+  }, [showHoverCard]);
+  var label = (0, _react.useMemo)(function () {
+    return /*#__PURE__*/_react["default"].createElement(_react["default"].Fragment, null, showDuplicateFlag && row.duplicate && /*#__PURE__*/_react["default"].createElement(_tag.Tag, {
+      className: _bundlePackagesModule["default"].packageNameTagDuplicate,
+      title: "Duplicate package",
+      kind: _tag.Tag.KINDS.DANGER,
+      size: _tag.Tag.SIZES.SMALL
+    }), /*#__PURE__*/_react["default"].createElement("span", {
+      className: _bundlePackagesModule["default"].packageNameLabel
+    }, packageName));
+  }, [packageName, showDuplicateFlag, row]);
+
+  if (!showHoverCard) {
+    return /*#__PURE__*/_react["default"].createElement("span", {
+      className: _bundlePackagesModule["default"].packageName,
+      onMouseEnter: handleOnMouseEnter
+    }, label);
+  }
+
+  return /*#__PURE__*/_react["default"].createElement(_hoverCard.HoverCard, {
+    className: _bundlePackagesModule["default"].packageName,
+    label: /*#__PURE__*/_react["default"].createElement("span", {
+      className: _bundlePackagesModule["default"].packageName
+    }, label)
+  }, /*#__PURE__*/_react["default"].createElement(PackagePopoverContent, {
+    name: packageName,
+    path: path,
+    fullName: row.label,
+    duplicate: row.duplicate,
+    CustomComponentLink: CustomComponentLink
+  }));
+};
+
+PackageName.propTypes = {
+  packageName: _propTypes["default"].string.isRequired,
+  path: _propTypes["default"].string.isRequired,
+  showDuplicateFlag: _propTypes["default"].bool.isRequired,
+  row: _propTypes["default"].shape({
+    label: _propTypes["default"].string,
+    duplicate: _propTypes["default"].bool,
+    runs: _propTypes["default"].arrayOf(_propTypes["default"].shape({
+      path: _propTypes["default"].string
+    })).isRequired
+  }).isRequired,
+  CustomComponentLink: _propTypes["default"].elementType.isRequired
+};
+
+var RowHeader = function RowHeader(_ref3) {
+  var row = _ref3.row,
+      CustomComponentLink = _ref3.CustomComponentLink;
+  var packageNames = row.label.split(_utils.PACKAGES_SEPARATOR);
+
+  var _ref4 = row.runs[0] || {},
+      path = _ref4.path;
 
   return /*#__PURE__*/_react["default"].createElement("span", {
     className: _bundlePackagesModule["default"].packageNames
   }, packageNames.map(function (packageName, index) {
-    // Render duplicate flag only for the last entry
-    var duplicateFlag = index === packageNames.length - 1 && item.duplicate && /*#__PURE__*/_react["default"].createElement("span", {
-      className: _bundlePackagesModule["default"].duplicate,
-      title: "Duplicate package"
-    }, "D");
-
-    return /*#__PURE__*/_react["default"].createElement(_popover.Popover, {
-      className: _bundlePackagesModule["default"].packageName,
-      icon: duplicateFlag,
-      label: packageName
-    }, /*#__PURE__*/_react["default"].createElement(PackagePopoverContent, {
-      name: packageName,
-      path: path,
-      fullName: item.label,
-      duplicate: item.duplicate,
+    return /*#__PURE__*/_react["default"].createElement(PackageName, {
+      packageName: packageName,
+      path: path // Render duplicate flag only for the last entry
+      ,
+      showDuplicateFlag: index === packageNames.length - 1,
+      row: row,
       CustomComponentLink: CustomComponentLink
-    }));
+    });
   }));
 };
 
-PackageRowHeader.propTypes = {
-  item: _propTypes["default"].shape({
+RowHeader.propTypes = {
+  row: _propTypes["default"].shape({
     label: _propTypes["default"].string,
     duplicate: _propTypes["default"].bool,
     runs: _propTypes["default"].arrayOf(_propTypes["default"].shape({
@@ -170,7 +224,7 @@ PackageRowHeader.propTypes = {
 };
 
 var BundlePackages = function BundlePackages(props) {
-  var _ref5;
+  var _ref6;
 
   var className = props.className,
       jobs = props.jobs,
@@ -195,9 +249,9 @@ var BundlePackages = function BundlePackages(props) {
     handleViewAll: resetAllFilters
   });
 
-  var renderRowHeader = (0, _react.useCallback)(function (item) {
-    return /*#__PURE__*/_react["default"].createElement(PackageRowHeader, {
-      item: item,
+  var renderRowHeader = (0, _react.useCallback)(function (row) {
+    return /*#__PURE__*/_react["default"].createElement(RowHeader, {
+      row: row,
       CustomComponentLink: CustomComponentLink
     });
   }, [CustomComponentLink]);
@@ -205,8 +259,8 @@ var BundlePackages = function BundlePackages(props) {
     className: (0, _classnames["default"])(_bundlePackagesModule["default"].root, className)
   }, /*#__PURE__*/_react["default"].createElement(_toolbar.Toolbar, {
     className: _bundlePackagesModule["default"].toolbar,
-    renderActions: function renderActions(_ref4) {
-      var actionClassName = _ref4.actionClassName;
+    renderActions: function renderActions(_ref5) {
+      var actionClassName = _ref5.actionClassName;
       return /*#__PURE__*/_react["default"].createElement(_flexStack.FlexStack, {
         space: "xxsmall",
         className: (0, _classnames["default"])(_bundlePackagesModule["default"].dropdown, actionClassName)
@@ -219,20 +273,22 @@ var BundlePackages = function BundlePackages(props) {
         handleResetFilters: resetFilters
       }));
     }
-  }, /*#__PURE__*/_react["default"].createElement(_flexStack.FlexStack, null, /*#__PURE__*/_react["default"].createElement(_metricsTableSearch.MetricsTableSearch, {
+  }, /*#__PURE__*/_react["default"].createElement(_flexStack.FlexStack, {
+    space: "xxsmall"
+  }, /*#__PURE__*/_react["default"].createElement(_metricsTableSearch.MetricsTableSearch, {
     className: _bundlePackagesModule["default"].toolbarSearch,
     placeholder: "Search by name",
     search: search,
     updateSearch: updateSearch
   }), /*#__PURE__*/_react["default"].createElement(_filters.Filters, {
-    filters: (_ref5 = {}, _defineProperty(_ref5, _utils.PACKAGE_FILTERS.CHANGED, {
+    filters: (_ref6 = {}, _defineProperty(_ref6, _utils.PACKAGE_FILTERS.CHANGED, {
       label: 'Changed',
       defaultValue: filters[_utils.PACKAGE_FILTERS.CHANGED],
       disabled: jobs.length <= 1
-    }), _defineProperty(_ref5, _utils.PACKAGE_FILTERS.DUPLICATE, {
+    }), _defineProperty(_ref6, _utils.PACKAGE_FILTERS.DUPLICATE, {
       label: 'Duplicate',
       defaultValue: filters[_utils.PACKAGE_FILTERS.DUPLICATE]
-    }), _ref5),
+    }), _ref6),
     label: "Filters (".concat(items.length, "/").concat(totalRowCount, ")"),
     onChange: updateFilters,
     hasActiveFilters: hasActiveFilters

package/lib/components/bundle-packages/bundle-packages.module.css

@@ -12,23 +12,8 @@
   margin-right: -1px; /** collapse border */
 }
 
-.duplicate {
-  margin-right: var(--space-xxxsmall);
-  display: inline-block;
-  width: var(--space-small);
-  height: var(--space-small);
-  font-size: 10px;
-  font-weight: bold;
-  line-height: var(--space-small);
-  text-align: center;
-  text-transform: uppercase;
-  vertical-align: middle;
-
-  background: var(--color-danger);
-  color: var(--color-light);
-}
-
 .packageName {
+  display: inline-block;
   color: var(--color-text-light);
 }
 
@@ -43,22 +28,33 @@
   color: var(--color-text-ultra-light);
 }
 
-.packagePopover {
-  min-width: 320px;
+.packageNameTagDuplicate {
+  margin-right: var(--space-xxxsmall);
+  vertical-align: middle;
+}
+
+.packageNameLabel {
+  vertical-align: middle;
+}
+
+.packageNameTagDuplicate::before {
+  content: 'd';
 }
 
-.packagePopoverTitleIndex {
+
+.packageHoverCardTitleIndex {
   color: var(--color-text-light);
   font-weight: normal;
 }
 
-.packagePopoverPathValue {
+.packageHoverCardPathValue {
+  width: 100%;
   padding: var(--space-xxxsmall);
   background: var(--color-highlight-warning);
   font-family: var(--font-family-monospace);
 }
 
-.packagePopoverList {
+.packageHoverCardList {
   padding: 0;
   list-style: inside;
 }

package/lib/components/delta/delta.module.css

@@ -28,6 +28,7 @@
 }
 
 .inverted {
+  border-radius: var(--radius-small);
   background-color: var(--color-gray-ultra-light);
   color: var(--color-light);
 }

package/lib/components/index.js

@@ -9,12 +9,6 @@ Object.defineProperty(exports, "BrowsertimeTable", {
     return _browsertimeTable.BrowsertimeTable;
   }
 });
-Object.defineProperty(exports, "BudgetInsights", {
-  enumerable: true,
-  get: function get() {
-    return _budgetInsights.BudgetInsights;
-  }
-});
 Object.defineProperty(exports, "BundleAssets", {
   enumerable: true,
   get: function get() {
@@ -154,8 +148,6 @@ var _bundlePackages = require("./bundle-packages");
 
 var _bundleModules = require("./bundle-modules");
 
-var _budgetInsights = require("./budget-insights");
-
 var _componentLink = require("./component-link");
 
 var _duplicatePackagesWarning = require("./duplicate-packages-warning");

package/lib/components/job-header/job-header.js

@@ -23,6 +23,8 @@ var _stack = require("../../layout/stack");
 
 var _icon = require("../../ui/icon");
 
+var _tag = require("../../ui/tag");
+
 var _jobHeaderModule = _interopRequireDefault(require("./job-header.module.css"));
 
 function _interopRequireDefault(obj) { return obj && obj.__esModule ? obj : { "default": obj }; }
@@ -43,7 +45,7 @@ var JobHeader = function JobHeader(props) {
     space: "xxsmall"
   }, /*#__PURE__*/_react["default"].createElement("h1", {
     className: _jobHeaderModule["default"].title
-  }, /*#__PURE__*/_react["default"].createElement("span", null, "#".concat(job.internalBuildNumber)), tag && /*#__PURE__*/_react["default"].createElement("span", {
+  }, /*#__PURE__*/_react["default"].createElement("span", null, "#".concat(job.internalBuildNumber)), tag && /*#__PURE__*/_react["default"].createElement(_tag.Tag, {
     className: _jobHeaderModule["default"].tag
   }, tag)), /*#__PURE__*/_react["default"].createElement(_flexStack.FlexStack, {
     className: _jobHeaderModule["default"].meta,

package/lib/components/job-header/job-header.module.css

@@ -1,22 +1,20 @@
 .title {
+  font-size: var(--size-xlarge);
   line-height: 1;
   font-weight: bold;
   vertical-align: top;
 }
 
 .tag {
-  padding: var(--space-xxxsmall);
-  margin-left: var(--space-xxxsmall);
-  background-color: var(--color-highlight);
-  color: var(--color-text-light);
-  display: inline-block;
-  font-size: 9px;
-  line-height: var(--space-xxsmall);
-  font-weight: normal;
+  margin-left: var(--space-xxsmall);
   vertical-align: top;
+  outline: 1px solid var(--color-outline);
+  background: var(--color-highlight);
+  color: var(--color-text-light);
 }
 
 .meta {
+  font-size: var(--size-small);
   color: var(--color-text-light);
 }
 

package/lib/components/jobs-header/jobs-header.module.css

@@ -9,3 +9,8 @@
   padding: 0 var(--space-medium);
   border-left: 1px solid var(--color-outline);
 }
+
+.item:first-child {
+  border-left: 0;
+  padding-left: 0;
+}

package/lib/components/metrics-table/metrics-table.js

@@ -31,12 +31,20 @@ var _jobName = require("../job-name");
 
 var _metricsTableModule = _interopRequireDefault(require("./metrics-table.module.css"));
 
+var _excluded = ["className", "renderRowHeader", "runs", "items", "emptyMessage", "showHeaderSum", "headerRows", "title"];
+
 function _getRequireWildcardCache(nodeInterop) { if (typeof WeakMap !== "function") return null; var cacheBabelInterop = new WeakMap(); var cacheNodeInterop = new WeakMap(); return (_getRequireWildcardCache = function _getRequireWildcardCache(nodeInterop) { return nodeInterop ? cacheNodeInterop : cacheBabelInterop; })(nodeInterop); }
 
 function _interopRequireWildcard(obj, nodeInterop) { if (!nodeInterop && obj && obj.__esModule) { return obj; } if (obj === null || _typeof(obj) !== "object" && typeof obj !== "function") { return { "default": obj }; } var cache = _getRequireWildcardCache(nodeInterop); if (cache && cache.has(obj)) { return cache.get(obj); } var newObj = {}; var hasPropertyDescriptor = Object.defineProperty && Object.getOwnPropertyDescriptor; for (var key in obj) { if (key !== "default" && Object.prototype.hasOwnProperty.call(obj, key)) { var desc = hasPropertyDescriptor ? Object.getOwnPropertyDescriptor(obj, key) : null; if (desc && (desc.get || desc.set)) { Object.defineProperty(newObj, key, desc); } else { newObj[key] = obj[key]; } } } newObj["default"] = obj; if (cache) { cache.set(obj, newObj); } return newObj; }
 
 function _interopRequireDefault(obj) { return obj && obj.__esModule ? obj : { "default": obj }; }
 
+function _extends() { _extends = Object.assign || function (target) { for (var i = 1; i < arguments.length; i++) { var source = arguments[i]; for (var key in source) { if (Object.prototype.hasOwnProperty.call(source, key)) { target[key] = source[key]; } } } return target; }; return _extends.apply(this, arguments); }
+
+function _objectWithoutProperties(source, excluded) { if (source == null) return {}; var target = _objectWithoutPropertiesLoose(source, excluded); var key, i; if (Object.getOwnPropertySymbols) { var sourceSymbolKeys = Object.getOwnPropertySymbols(source); for (i = 0; i < sourceSymbolKeys.length; i++) { key = sourceSymbolKeys[i]; if (excluded.indexOf(key) >= 0) continue; if (!Object.prototype.propertyIsEnumerable.call(source, key)) continue; target[key] = source[key]; } } return target; }
+
+function _objectWithoutPropertiesLoose(source, excluded) { if (source == null) return {}; var target = {}; var sourceKeys = Object.keys(source); var key, i; for (i = 0; i < sourceKeys.length; i++) { key = sourceKeys[i]; if (excluded.indexOf(key) >= 0) continue; target[key] = source[key]; } return target; }
+
 function _toConsumableArray(arr) { return _arrayWithoutHoles(arr) || _iterableToArray(arr) || _unsupportedIterableToArray(arr) || _nonIterableSpread(); }
 
 function _nonIterableSpread() { throw new TypeError("Invalid attempt to spread non-iterable instance.\nIn order to be iterable, non-array objects must have a [Symbol.iterator]() method."); }
@@ -131,52 +139,66 @@ var getHeaderRows = function getHeaderRows(runs, items, showHeaderSum, title) {
   }] : []));
 };
 
-var generateRowCells = function generateRowCells(item, index, items) {
-  var isBaseline = index === items.length - 1; // eslint-disable-next-line react/destructuring-assignment
-
-  if (!item || typeof item.value === 'undefined') {
-    return ['-'].concat(_toConsumableArray(!isBaseline ? [''] : []));
-  }
-
-  var displayValue = item.displayValue,
-      deltaPercentage = item.deltaPercentage,
-      displayDeltaPercentage = item.displayDeltaPercentage,
-      deltaType = item.deltaType;
-  var cells = [/*#__PURE__*/_react["default"].createElement(_metric.Metric, {
-    value: displayValue
-  })];
+var MetricsTableRow = function MetricsTableRow(_ref) {
+  var item = _ref.item,
+      renderRowHeader = _ref.renderRowHeader;
+  return /*#__PURE__*/_react["default"].createElement(_table.Table.Tr, {
+    className: (0, _classnames["default"])(!item.changed && _metricsTableModule["default"].unchanged)
+  }, /*#__PURE__*/_react["default"].createElement(_table.Table.Th, {
+    className: _metricsTableModule["default"].metricName
+  }, renderRowHeader(item)), item.runs.map(function (run, index) {
+    var isBaseline = index === item.runs.length - 1;
+    var valueClassName = (0, _classnames["default"])(_metricsTableModule["default"].value, !isBaseline && _metricsTableModule["default"].current); // Empty cells if no value
+
+    if (!run || typeof run.value === 'undefined') {
+      return /*#__PURE__*/_react["default"].createElement(_react["default"].Fragment, null, /*#__PURE__*/_react["default"].createElement(_table.Table.Td, {
+        className: valueClassName
+      }, "-"), !isBaseline && /*#__PURE__*/_react["default"].createElement(_table.Table.Td, {
+        className: _metricsTableModule["default"].delta
+      }));
+    }
 
-  if (!isBaseline) {
-    cells.push(typeof deltaPercentage === 'number' && /*#__PURE__*/_react["default"].createElement(_delta.Delta, {
+    var displayValue = run.displayValue,
+        deltaPercentage = run.deltaPercentage,
+        displayDeltaPercentage = run.displayDeltaPercentage,
+        deltaType = run.deltaType;
+    return /*#__PURE__*/_react["default"].createElement(_react["default"].Fragment, null, /*#__PURE__*/_react["default"].createElement(_table.Table.Td, {
+      className: valueClassName
+    }, /*#__PURE__*/_react["default"].createElement(_metric.Metric, {
+      value: displayValue
+    })), !isBaseline && typeof deltaPercentage === 'number' && /*#__PURE__*/_react["default"].createElement(_table.Table.Td, {
+      className: _metricsTableModule["default"].delta
+    }, /*#__PURE__*/_react["default"].createElement(_delta.Delta, {
       displayValue: displayDeltaPercentage,
       deltaType: deltaType
-    }));
-  }
-
-  return cells;
+    })));
+  }));
 };
 
-var getRows = function getRows(runs, items, renderRowHeader) {
-  return items.map(function (item, index) {
-    var changed = item.changed;
-    return {
-      key: (item === null || item === void 0 ? void 0 : item.key) || index,
-      className: changed ? '' : _metricsTableModule["default"].unchanged,
-      cells: [// Metric name
-      renderRowHeader(item)].concat(_toConsumableArray(item.runs.map(generateRowCells).flat()))
-    };
-  });
+MetricsTableRow.propTypes = {
+  item: _propTypes["default"].shape({
+    changed: _propTypes["default"].bool,
+    runs: _propTypes["default"].arrayOf(_propTypes["default"].shape({
+      value: _propTypes["default"].number,
+      displayValue: _propTypes["default"].string,
+      deltaPercentage: _propTypes["default"].number,
+      displayDeltaPercentage: _propTypes["default"].string,
+      deltaType: _propTypes["default"].string
+    }))
+  }).isRequired,
+  renderRowHeader: _propTypes["default"].func.isRequired
 };
 
-var MetricsTable = function MetricsTable(_ref) {
-  var className = _ref.className,
-      renderRowHeader = _ref.renderRowHeader,
-      runs = _ref.runs,
-      items = _ref.items,
-      emptyMessage = _ref.emptyMessage,
-      showHeaderSum = _ref.showHeaderSum,
-      headerRows = _ref.headerRows,
-      title = _ref.title;
+var MetricsTable = function MetricsTable(_ref2) {
+  var className = _ref2.className,
+      renderRowHeader = _ref2.renderRowHeader,
+      runs = _ref2.runs,
+      items = _ref2.items,
+      emptyMessage = _ref2.emptyMessage,
+      showHeaderSum = _ref2.showHeaderSum,
+      headerRows = _ref2.headerRows,
+      title = _ref2.title,
+      restProps = _objectWithoutProperties(_ref2, _excluded);
 
   var _useMemo = (0, _react.useMemo)(function () {
     var headerColumns = getHeaderRows(runs, items, showHeaderSum, title);
@@ -191,37 +213,28 @@ var MetricsTable = function MetricsTable(_ref) {
       headers = _useMemo.headers,
       columnClassNames = _useMemo.columnClassNames;
 
-  var rows = (0, _react.useMemo)(function () {
-    return getRows(runs, items, renderRowHeader);
-  }, [runs, items, renderRowHeader]);
   var rootClassName = (0, _classnames["default"])(_metricsTableModule["default"].root, className, runs.length > 1 && _metricsTableModule["default"].multipleRuns, showHeaderSum && _metricsTableModule["default"].showHeaderSum);
-  return /*#__PURE__*/_react["default"].createElement(_table.Table, {
+  return /*#__PURE__*/_react["default"].createElement(_table.Table, _extends({
     className: rootClassName,
     compact: true
-  }, /*#__PURE__*/_react["default"].createElement(_table.Table.THead, null, headers.map(function (headerRow) {
-    var _ref2 = headerRow.cells ? headerRow : {
+  }, restProps), /*#__PURE__*/_react["default"].createElement(_table.Table.THead, null, headers.map(function (headerRow) {
+    var _ref3 = headerRow.cells ? headerRow : {
       cells: headerRow
     },
-        cells = _ref2.cells,
-        rowClassName = _ref2.className;
+        cells = _ref3.cells,
+        rowClassName = _ref3.className;
 
     return /*#__PURE__*/_react["default"].createElement(_table.Table.Tr, {
       className: rowClassName
     }, cells.map(function (header) {
       return /*#__PURE__*/_react["default"].createElement(_table.Table.Th, header);
     }));
-  })), /*#__PURE__*/_react["default"].createElement(_table.Table.TBody, null, !(0, _isEmpty2["default"])(rows) ? rows.map(function (_ref3) {
-    var key = _ref3.key,
-        rowClassName = _ref3.className,
-        cells = _ref3.cells;
-    return /*#__PURE__*/_react["default"].createElement(_table.Table.Tr, {
-      key: key,
-      className: rowClassName
-    }, cells.map(function (cell, index) {
-      return /*#__PURE__*/_react["default"].createElement(_table.Table.Td, {
-        className: columnClassNames[index]
-      }, cell);
-    }));
+  })), /*#__PURE__*/_react["default"].createElement(_table.Table.TBody, null, !(0, _isEmpty2["default"])(items) ? items.map(function (item) {
+    return /*#__PURE__*/_react["default"].createElement(MetricsTableRow, {
+      key: item.key,
+      item: item,
+      renderRowHeader: renderRowHeader
+    });
   }) : /*#__PURE__*/_react["default"].createElement(_table.Table.Tr, null, /*#__PURE__*/_react["default"].createElement(_table.Table.Td, {
     className: _metricsTableModule["default"].empty,
     colSpan: (columnClassNames === null || columnClassNames === void 0 ? void 0 : columnClassNames.length) || 1