@bundle-stats/ui 3.2.8 → 3.2.9-beta.1

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

@@ -88,32 +88,33 @@ var RowHeader = function RowHeader(_ref) {
 
   var _useState = (0, _react.useState)(false),
       _useState2 = _slicedToArray(_useState, 2),
-      showPopopver = _useState2[0],
-      setPopover = _useState2[1];
+      showHoverCard = _useState2[0],
+      setHoverCard = _useState2[1];
 
   var handleOnMouseEnter = (0, _react.useCallback)(function () {
-    return setPopover(true);
-  }, [showPopopver]);
+    return setHoverCard(true);
+  }, [showHoverCard]);
+  var content = (0, _react.useMemo)(function () {
+    return /*#__PURE__*/_react["default"].createElement(_fileName.FileName, {
+      name: row.label
+    });
+  }, [row.label]);
 
-  var content = /*#__PURE__*/_react["default"].createElement(_fileName.FileName, {
-    name: row.label
-  });
+  if (!showHoverCard) {
+    return /*#__PURE__*/_react["default"].createElement("div", {
+      onMouseEnter: handleOnMouseEnter
+    }, content);
+  }
 
-  return /*#__PURE__*/_react["default"].createElement("div", {
-    onMouseEnter: handleOnMouseEnter
-  }, !showPopopver ? content : /*#__PURE__*/_react["default"].createElement(_hoverCard.HoverCard, {
+  return /*#__PURE__*/_react["default"].createElement(_hoverCard.HoverCard, {
     label: content
-  }, function (_ref2) {
-    var close = _ref2.close;
-    return /*#__PURE__*/_react["default"].createElement(_moduleInfo.ModuleInfo, {
-      className: _bundleModulesModule["default"].namePopover,
-      item: row,
-      chunks: chunks,
-      chunkIds: chunkIds,
-      labels: labels,
-      customComponentLink: CustomComponentLink,
-      onClick: close
-    });
+  }, /*#__PURE__*/_react["default"].createElement(_moduleInfo.ModuleInfo, {
+    className: _bundleModulesModule["default"].namePopover,
+    item: row,
+    chunks: chunks,
+    chunkIds: chunkIds,
+    labels: labels,
+    customComponentLink: CustomComponentLink
   }));
 };
 
@@ -132,50 +133,34 @@ RowHeader.defaultProps = {
   chunks: []
 };
 
-var getRenderRowHeader = function getRenderRowHeader(_ref3) {
-  var labels = _ref3.labels,
-      chunks = _ref3.chunks,
-      CustomComponentLink = _ref3.CustomComponentLink;
-  return function (row) {
-    return /*#__PURE__*/_react["default"].createElement(RowHeader, {
-      row: row,
-      chunks: chunks,
-      labels: labels,
-      CustomComponentLink: CustomComponentLink
-    });
-  };
-};
-
-var BundleModules = function BundleModules(_ref4) {
+var BundleModules = function BundleModules(_ref2) {
   var _MODULE_SOURCE_TYPE, _objectSpread2;
 
-  var className = _ref4.className,
-      jobs = _ref4.jobs,
-      items = _ref4.items,
-      chunks = _ref4.chunks,
-      totalRowCount = _ref4.totalRowCount,
-      updateFilters = _ref4.updateFilters,
-      resetFilters = _ref4.resetFilters,
-      resetAllFilters = _ref4.resetAllFilters,
-      filters = _ref4.filters,
-      sortFields = _ref4.sortFields,
-      sort = _ref4.sort,
-      updateSort = _ref4.updateSort,
-      search = _ref4.search,
-      updateSearch = _ref4.updateSearch,
-      hasActiveFilters = _ref4.hasActiveFilters,
-      CustomComponentLink = _ref4.customComponentLink;
+  var className = _ref2.className,
+      jobs = _ref2.jobs,
+      items = _ref2.items,
+      chunks = _ref2.chunks,
+      totalRowCount = _ref2.totalRowCount,
+      updateFilters = _ref2.updateFilters,
+      resetFilters = _ref2.resetFilters,
+      resetAllFilters = _ref2.resetAllFilters,
+      filters = _ref2.filters,
+      sortFields = _ref2.sortFields,
+      sort = _ref2.sort,
+      updateSort = _ref2.updateSort,
+      search = _ref2.search,
+      updateSearch = _ref2.updateSearch,
+      hasActiveFilters = _ref2.hasActiveFilters,
+      CustomComponentLink = _ref2.customComponentLink;
   var rootClassName = (0, _classnames["default"])(_bundleModulesModule["default"].root, className);
-  var labels = (0, _react.useMemo)(function () {
-    return (0, _map2["default"])(jobs, 'label');
-  }, [jobs]);
-  var renderRowHeader = (0, _react.useMemo)(function () {
-    return getRenderRowHeader({
-      labels: labels,
+  var renderRowHeader = (0, _react.useCallback)(function (row) {
+    return /*#__PURE__*/_react["default"].createElement(RowHeader, {
+      row: row,
       chunks: chunks,
+      labels: (0, _map2["default"])(jobs, 'label'),
       CustomComponentLink: CustomComponentLink
     });
-  }, [labels, chunks]);
+  }, [jobs, chunks, CustomComponentLink]);
 
   var emptyMessage = /*#__PURE__*/_react["default"].createElement(_emptySet.EmptySet, {
     resources: "modules",
@@ -198,9 +183,9 @@ var BundleModules = function BundleModules(_ref4) {
     defaultValue: (0, _get2["default"])(filters, "".concat(_utils.MODULE_SOURCE_TYPE, ".").concat(_utils.MODULE_FILTERS.THIRD_PARTY), true)
   }), _MODULE_SOURCE_TYPE)), _objectSpread2), !(0, _isEmpty2["default"])(chunks) && _defineProperty({}, _utils.MODULE_CHUNK, _objectSpread({
     label: 'Chunk'
-  }, chunks.reduce(function (chunkFilters, _ref5) {
-    var id = _ref5.id,
-        name = _ref5.name;
+  }, chunks.reduce(function (chunkFilters, _ref3) {
+    var id = _ref3.id,
+        name = _ref3.name;
     return _objectSpread(_objectSpread({}, chunkFilters), {}, _defineProperty({}, id, {
       label: name,
       defaultValue: (0, _get2["default"])(filters, "".concat(_utils.MODULE_CHUNK, ".").concat(id), true)
@@ -218,8 +203,8 @@ var BundleModules = function BundleModules(_ref4) {
     className: rootClassName
   }, /*#__PURE__*/_react["default"].createElement(_toolbar.Toolbar, {
     className: _bundleModulesModule["default"].toolbar,
-    renderActions: function renderActions(_ref7) {
-      var actionClassName = _ref7.actionClassName;
+    renderActions: function renderActions(_ref5) {
+      var actionClassName = _ref5.actionClassName;
       return /*#__PURE__*/_react["default"].createElement(_flexStack.FlexStack, {
         space: "xxsmall",
         className: (0, _classnames["default"])(_bundleModulesModule["default"].dropdown, actionClassName)

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

@@ -85,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")));
 };
 
@@ -129,43 +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(_tag.Tag, {
-      title: "Duplicate package",
-      kind: _tag.Tag.KINDS.DANGER,
-      size: _tag.Tag.SIZES.SMALL,
-      className: _bundlePackagesModule["default"].tagDuplicate
-    });
-
-    return /*#__PURE__*/_react["default"].createElement(_hoverCard.HoverCard, {
-      className: _bundlePackagesModule["default"].packageName,
-      label: /*#__PURE__*/_react["default"].createElement(_flexStack.FlexStack, {
-        space: "xxxsmall",
-        className: _bundlePackagesModule["default"].packageNameLabel
-      }, duplicateFlag, /*#__PURE__*/_react["default"].createElement("span", null, 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({
@@ -176,7 +224,7 @@ PackageRowHeader.propTypes = {
 };
 
 var BundlePackages = function BundlePackages(props) {
-  var _ref5;
+  var _ref6;
 
   var className = props.className,
       jobs = props.jobs,
@@ -201,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]);
@@ -211,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)
@@ -233,14 +281,14 @@ var BundlePackages = function BundlePackages(props) {
     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,15 +12,8 @@
   margin-right: -1px; /** collapse border */
 }
 
-.tagDuplicate {
-  margin-right: var(--space-xxxsmall);
-}
-
-.tagDuplicate::before {
-  content: 'd';
-}
-
 .packageName {
+  display: inline-block;
   color: var(--color-text-light);
 }
 
@@ -35,26 +28,33 @@
   color: var(--color-text-ultra-light);
 }
 
+.packageNameTagDuplicate {
+  margin-right: var(--space-xxxsmall);
+  vertical-align: middle;
+}
+
 .packageNameLabel {
-  align-items: center;
+  vertical-align: middle;
 }
 
-.packagePopover {
-  min-width: 320px;
+.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/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