@bundle-stats/ui 4.0.0-rc.6 → 4.0.1

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

@@ -102,17 +102,45 @@ var getFileTypeFilters = function getFileTypeFilters(filters) {
   }, {});
 };
 
-var TooltipNotPredictive = function TooltipNotPredictive(_ref4) {
-  var runs = _ref4.runs;
+var getFilters = function getFilters(_ref4) {
+  var _ASSET_ENTRY_TYPE, _ref5;
+
+  var compareMode = _ref4.compareMode,
+      filters = _ref4.filters;
+  return _ref5 = {}, _defineProperty(_ref5, _utils.ASSET_FILTERS.CHANGED, {
+    label: 'Changed',
+    defaultValue: filters[_utils.ASSET_FILTERS.CHANGED],
+    disabled: !compareMode
+  }), _defineProperty(_ref5, _utils.ASSET_ENTRY_TYPE, (_ASSET_ENTRY_TYPE = {
+    label: 'Entry type'
+  }, _defineProperty(_ASSET_ENTRY_TYPE, _utils.ASSET_FILTERS.ENTRY, {
+    label: 'Entry',
+    defaultValue: (0, _get2["default"])(filters, "".concat(_utils.ASSET_ENTRY_TYPE, ".").concat(_utils.ASSET_FILTERS.ENTRY), true)
+  }), _defineProperty(_ASSET_ENTRY_TYPE, _utils.ASSET_FILTERS.INITIAL, {
+    label: 'Initial',
+    defaultValue: (0, _get2["default"])(filters, "".concat(_utils.ASSET_ENTRY_TYPE, ".").concat(_utils.ASSET_FILTERS.INITIAL), true)
+  }), _defineProperty(_ASSET_ENTRY_TYPE, _utils.ASSET_FILTERS.CHUNK, {
+    label: 'Chunk',
+    defaultValue: (0, _get2["default"])(filters, "".concat(_utils.ASSET_ENTRY_TYPE, ".").concat(_utils.ASSET_FILTERS.CHUNK), true)
+  }), _defineProperty(_ASSET_ENTRY_TYPE, _utils.ASSET_FILTERS.OTHER, {
+    label: 'Other',
+    defaultValue: (0, _get2["default"])(filters, "".concat(_utils.ASSET_ENTRY_TYPE, ".").concat(_utils.ASSET_FILTERS.OTHER), true)
+  }), _ASSET_ENTRY_TYPE)), _defineProperty(_ref5, _utils.ASSET_FILE_TYPE, _objectSpread({
+    label: 'File type'
+  }, getFileTypeFilters(filters))), _ref5;
+};
+
+var TooltipNotPredictive = function TooltipNotPredictive(_ref6) {
+  var runs = _ref6.runs;
   return /*#__PURE__*/_react["default"].createElement("div", {
     className: _bundleAssetsModule["default"].tooltipNotPredictive
   }, /*#__PURE__*/_react["default"].createElement("p", {
     className: _bundleAssetsModule["default"].tooltipNotPredictiveText
   }, "File name is the same, but the size has changed:"), /*#__PURE__*/_react["default"].createElement("table", {
     className: _bundleAssetsModule["default"].tooltipTable
-  }, /*#__PURE__*/_react["default"].createElement("tr", null, runs.map(function (_ref5, index) {
-    var name = _ref5.name,
-        value = _ref5.value;
+  }, /*#__PURE__*/_react["default"].createElement("tr", null, runs.map(function (_ref7, index) {
+    var name = _ref7.name,
+        value = _ref7.value;
     var key = index;
     return /*#__PURE__*/_react["default"].createElement("tr", {
       key: key
@@ -128,11 +156,11 @@ TooltipNotPredictive.propTypes = {
 
 };
 
-var RowHeader = function RowHeader(_ref6) {
-  var row = _ref6.row,
-      labels = _ref6.labels,
-      chunks = _ref6.chunks,
-      CustomComponentLink = _ref6.CustomComponentLink;
+var RowHeader = function RowHeader(_ref8) {
+  var row = _ref8.row,
+      labels = _ref8.labels,
+      chunks = _ref8.chunks,
+      CustomComponentLink = _ref8.CustomComponentLink;
   var label = row.label,
       isNotPredictive = row.isNotPredictive,
       runs = row.runs,
@@ -221,8 +249,6 @@ RowHeader.defaultProps = {
 };
 
 var BundleAssets = function BundleAssets(props) {
-  var _ASSET_ENTRY_TYPE, _ref8;
-
   var className = props.className,
       jobs = props.jobs,
       items = props.items,
@@ -238,14 +264,20 @@ var BundleAssets = function BundleAssets(props) {
       search = props.search,
       updateSearch = props.updateSearch,
       CustomComponentLink = props.customComponentLink;
-
-  var emptyMessage = /*#__PURE__*/_react["default"].createElement(_emptySet.EmptySet, {
-    resources: "assets",
-    filtered: totalRowCount !== 0,
-    handleResetFilters: resetFilters,
-    handleViewAll: resetAllFilters
-  });
-
+  var dropdownFilters = (0, _react.useMemo)(function () {
+    return getFilters({
+      compareMode: (jobs === null || jobs === void 0 ? void 0 : jobs.length) > 1,
+      filters: filters
+    });
+  }, [jobs, filters]);
+  var metricsTableTitle = (0, _react.useMemo)(function () {
+    return /*#__PURE__*/_react["default"].createElement(_metricsTableTitle.MetricsTableTitle, {
+      title: _i18n["default"].ASSETS,
+      info: "".concat(items.length, "/").concat(totalRowCount),
+      popoverInfo: _i18n["default"].ASSETS_INFO,
+      popoverHref: _config["default"].documentation.assets
+    });
+  }, [items, totalRowCount]);
   var renderRowHeader = (0, _react.useCallback)(function (row) {
     var _jobs$, _jobs$$meta, _jobs$$meta$webpack;
 
@@ -256,12 +288,20 @@ var BundleAssets = function BundleAssets(props) {
       CustomComponentLink: CustomComponentLink
     });
   }, [jobs, CustomComponentLink]);
+  var emptyMessage = (0, _react.useMemo)(function () {
+    return /*#__PURE__*/_react["default"].createElement(_emptySet.EmptySet, {
+      resources: "assets",
+      filtered: totalRowCount !== 0,
+      handleResetFilters: resetFilters,
+      handleViewAll: resetAllFilters
+    });
+  }, [totalRowCount, resetFilters, resetAllFilters]);
   return /*#__PURE__*/_react["default"].createElement("section", {
     className: (0, _classnames["default"])(_bundleAssetsModule["default"].root, className)
   }, /*#__PURE__*/_react["default"].createElement(_toolbar.Toolbar, {
     className: _bundleAssetsModule["default"].toolbar,
-    renderActions: function renderActions(_ref7) {
-      var actionClassName = _ref7.actionClassName;
+    renderActions: function renderActions(_ref9) {
+      var actionClassName = _ref9.actionClassName;
       return /*#__PURE__*/_react["default"].createElement(_flexStack.FlexStack, {
         space: "xxsmall",
         className: (0, _classnames["default"])(_bundleAssetsModule["default"].dropdown, actionClassName)
@@ -283,27 +323,7 @@ var BundleAssets = function BundleAssets(props) {
     updateSearch: updateSearch
   }), /*#__PURE__*/_react["default"].createElement(_filters.Filters, {
     className: _bundleAssetsModule["default"].toolbarFilters,
-    filters: (_ref8 = {}, _defineProperty(_ref8, _utils.ASSET_FILTERS.CHANGED, {
-      label: 'Changed',
-      defaultValue: filters[_utils.ASSET_FILTERS.CHANGED],
-      disabled: jobs.length <= 1
-    }), _defineProperty(_ref8, _utils.ASSET_ENTRY_TYPE, (_ASSET_ENTRY_TYPE = {
-      label: 'Entry type'
-    }, _defineProperty(_ASSET_ENTRY_TYPE, _utils.ASSET_FILTERS.ENTRY, {
-      label: 'Entry',
-      defaultValue: (0, _get2["default"])(filters, "".concat(_utils.ASSET_ENTRY_TYPE, ".").concat(_utils.ASSET_FILTERS.ENTRY), true)
-    }), _defineProperty(_ASSET_ENTRY_TYPE, _utils.ASSET_FILTERS.INITIAL, {
-      label: 'Initial',
-      defaultValue: (0, _get2["default"])(filters, "".concat(_utils.ASSET_ENTRY_TYPE, ".").concat(_utils.ASSET_FILTERS.INITIAL), true)
-    }), _defineProperty(_ASSET_ENTRY_TYPE, _utils.ASSET_FILTERS.CHUNK, {
-      label: 'Chunk',
-      defaultValue: (0, _get2["default"])(filters, "".concat(_utils.ASSET_ENTRY_TYPE, ".").concat(_utils.ASSET_FILTERS.CHUNK), true)
-    }), _defineProperty(_ASSET_ENTRY_TYPE, _utils.ASSET_FILTERS.ASSET, {
-      label: 'Asset',
-      defaultValue: (0, _get2["default"])(filters, "".concat(_utils.ASSET_ENTRY_TYPE, ".").concat(_utils.ASSET_FILTERS.ASSET), true)
-    }), _ASSET_ENTRY_TYPE)), _defineProperty(_ref8, _utils.ASSET_FILE_TYPE, _objectSpread({
-      label: 'File type'
-    }, getFileTypeFilters(filters))), _ref8),
+    filters: dropdownFilters,
     hasActiveFilters: hasActiveFilters,
     onChange: updateFilters
   }))), /*#__PURE__*/_react["default"].createElement("main", null, /*#__PURE__*/_react["default"].createElement(_metricsTable.MetricsTable, {
@@ -312,12 +332,7 @@ var BundleAssets = function BundleAssets(props) {
     renderRowHeader: renderRowHeader,
     emptyMessage: emptyMessage,
     showHeaderSum: true,
-    title: /*#__PURE__*/_react["default"].createElement(_metricsTableTitle.MetricsTableTitle, {
-      title: _i18n["default"].ASSETS,
-      info: "(".concat(items.length, "/").concat(totalRowCount, ")"),
-      popoverInfo: _i18n["default"].ASSETS_INFO,
-      popoverHref: _config["default"].documentation.assets
-    })
+    title: metricsTableTitle
   })));
 };
 

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

@@ -75,7 +75,7 @@ var getRowFilter = function getRowFilter(filters) {
       return false;
     }
 
-    if (!(filters["".concat(_utils.ASSET_ENTRY_TYPE, ".").concat(_utils.ASSET_FILTERS.ENTRY)] && item.isEntry || filters["".concat(_utils.ASSET_ENTRY_TYPE, ".").concat(_utils.ASSET_FILTERS.INITIAL)] && item.isInitial || filters["".concat(_utils.ASSET_ENTRY_TYPE, ".").concat(_utils.ASSET_FILTERS.CHUNK)] && item.isChunk || filters["".concat(_utils.ASSET_ENTRY_TYPE, ".").concat(_utils.ASSET_FILTERS.ASSET)] && item.isAsset)) {
+    if (!(filters["".concat(_utils.ASSET_ENTRY_TYPE, ".").concat(_utils.ASSET_FILTERS.ENTRY)] && item.isEntry || filters["".concat(_utils.ASSET_ENTRY_TYPE, ".").concat(_utils.ASSET_FILTERS.INITIAL)] && item.isInitial || filters["".concat(_utils.ASSET_ENTRY_TYPE, ".").concat(_utils.ASSET_FILTERS.CHUNK)] && item.isChunk || filters["".concat(_utils.ASSET_ENTRY_TYPE, ".").concat(_utils.ASSET_FILTERS.OTHER)] && item.isAsset)) {
       return false;
     }
 

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

@@ -63,12 +63,6 @@ function _interopRequireDefault(obj) { return obj && obj.__esModule ? obj : { "d
 
 function _extends() { _extends = Object.assign ? Object.assign.bind() : 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 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; }
-
-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; }
-
 function _slicedToArray(arr, i) { return _arrayWithHoles(arr) || _iterableToArrayLimit(arr, i) || _unsupportedIterableToArray(arr, i) || _nonIterableRest(); }
 
 function _nonIterableRest() { throw new TypeError("Invalid attempt to destructure non-iterable instance.\nIn order to be iterable, non-array objects must have a [Symbol.iterator]() method."); }
@@ -81,11 +75,57 @@ function _iterableToArrayLimit(arr, i) { var _i = arr == null ? null : typeof Sy
 
 function _arrayWithHoles(arr) { if (Array.isArray(arr)) return arr; }
 
-var RowHeader = function RowHeader(_ref) {
-  var row = _ref.row,
-      chunks = _ref.chunks,
-      labels = _ref.labels,
-      CustomComponentLink = _ref.CustomComponentLink;
+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; }
+
+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; }
+
+var getFilters = function getFilters(_ref) {
+  var _MODULE_SOURCE_TYPE, _objectSpread2;
+
+  var filters = _ref.filters,
+      compareMode = _ref.compareMode,
+      chunks = _ref.chunks;
+  return _objectSpread(_objectSpread((_objectSpread2 = {}, _defineProperty(_objectSpread2, _utils.MODULE_FILTERS.CHANGED, {
+    label: 'Changed',
+    defaultValue: filters.changed,
+    disabled: !compareMode
+  }), _defineProperty(_objectSpread2, _utils.MODULE_FILTERS.DUPLICATED, {
+    label: 'Duplicate',
+    defaultValue: filters[_utils.MODULE_FILTERS.DUPLICATED]
+  }), _defineProperty(_objectSpread2, _utils.MODULE_SOURCE_TYPE, (_MODULE_SOURCE_TYPE = {
+    label: 'Source'
+  }, _defineProperty(_MODULE_SOURCE_TYPE, _utils.MODULE_FILTERS.FIRST_PARTY, {
+    label: 'First party',
+    defaultValue: (0, _get2["default"])(filters, "".concat(_utils.MODULE_SOURCE_TYPE, ".").concat(_utils.MODULE_FILTERS.FIRST_PARTY), true)
+  }), _defineProperty(_MODULE_SOURCE_TYPE, _utils.MODULE_FILTERS.THIRD_PARTY, {
+    label: 'Third party',
+    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, _ref2) {
+    var id = _ref2.id,
+        name = _ref2.name;
+    return _objectSpread(_objectSpread({}, chunkFilters), {}, _defineProperty({}, id, {
+      label: name,
+      defaultValue: (0, _get2["default"])(filters, "".concat(_utils.MODULE_CHUNK, ".").concat(id), true)
+    }));
+  }, {})))), {}, _defineProperty({}, _utils.MODULE_FILE_TYPE, _objectSpread({
+    label: 'File type'
+  }, _utils.MODULE_SOURCE_FILE_TYPES.reduce(function (agg, fileType) {
+    return _objectSpread(_objectSpread({}, agg), {}, _defineProperty({}, fileType, {
+      label: _utils.FILE_TYPE_LABELS[fileType],
+      defaultValue: (0, _get2["default"])(filters, "".concat(_utils.MODULE_FILE_TYPE, ".").concat(fileType), true)
+    }));
+  }, {}))));
+};
+
+var RowHeader = function RowHeader(_ref4) {
+  var row = _ref4.row,
+      chunks = _ref4.chunks,
+      labels = _ref4.labels,
+      CustomComponentLink = _ref4.CustomComponentLink;
   var chunkIds = (0, _map2["default"])(chunks, 'id');
 
   var _useState = (0, _react.useState)(false),
@@ -143,26 +183,39 @@ RowHeader.defaultProps = {
   chunks: []
 };
 
-var BundleModules = function BundleModules(_ref2) {
-  var _MODULE_SOURCE_TYPE, _objectSpread2;
-
-  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 BundleModules = function BundleModules(_ref5) {
+  var className = _ref5.className,
+      jobs = _ref5.jobs,
+      items = _ref5.items,
+      chunks = _ref5.chunks,
+      totalRowCount = _ref5.totalRowCount,
+      updateFilters = _ref5.updateFilters,
+      resetFilters = _ref5.resetFilters,
+      resetAllFilters = _ref5.resetAllFilters,
+      filters = _ref5.filters,
+      sortFields = _ref5.sortFields,
+      sort = _ref5.sort,
+      updateSort = _ref5.updateSort,
+      search = _ref5.search,
+      updateSearch = _ref5.updateSearch,
+      hasActiveFilters = _ref5.hasActiveFilters,
+      CustomComponentLink = _ref5.customComponentLink;
   var rootClassName = (0, _classnames["default"])(_bundleModulesModule["default"].root, className);
+  var dropdownFilters = (0, _react.useMemo)(function () {
+    return getFilters({
+      filters: filters,
+      chunks: chunks,
+      compareMode: jobs.length > 1
+    });
+  }, [jobs, filters, chunks]);
+  var metricsTableTitle = (0, _react.useMemo)(function () {
+    return /*#__PURE__*/_react["default"].createElement(_metricsTableTitle.MetricsTableTitle, {
+      title: _i18n["default"].MODULES,
+      info: "".concat(items.length, "/").concat(totalRowCount),
+      popoverInfo: _i18n["default"].MODULES_INFO,
+      popoverHref: _config["default"].documentation.modules
+    });
+  }, [items, totalRowCount]);
   var renderRowHeader = (0, _react.useCallback)(function (row) {
     return /*#__PURE__*/_react["default"].createElement(RowHeader, {
       row: row,
@@ -171,53 +224,20 @@ var BundleModules = function BundleModules(_ref2) {
       CustomComponentLink: CustomComponentLink
     });
   }, [jobs, chunks, CustomComponentLink]);
-
-  var emptyMessage = /*#__PURE__*/_react["default"].createElement(_emptySet.EmptySet, {
-    resources: "modules",
-    filtered: totalRowCount !== 0,
-    handleResetFilters: resetFilters,
-    handleViewAll: resetAllFilters
-  });
-
-  var dropdownFilters = _objectSpread(_objectSpread((_objectSpread2 = {}, _defineProperty(_objectSpread2, _utils.MODULE_FILTERS.CHANGED, {
-    label: 'Changed',
-    defaultValue: filters.changed,
-    disabled: jobs.length <= 1
-  }), _defineProperty(_objectSpread2, _utils.MODULE_FILTERS.DUPLICATED, {
-    label: 'Duplicate',
-    defaultValue: filters[_utils.MODULE_FILTERS.DUPLICATED]
-  }), _defineProperty(_objectSpread2, _utils.MODULE_SOURCE_TYPE, (_MODULE_SOURCE_TYPE = {
-    label: 'Source'
-  }, _defineProperty(_MODULE_SOURCE_TYPE, _utils.MODULE_FILTERS.FIRST_PARTY, {
-    label: 'First party',
-    defaultValue: (0, _get2["default"])(filters, "".concat(_utils.MODULE_SOURCE_TYPE, ".").concat(_utils.MODULE_FILTERS.FIRST_PARTY), true)
-  }), _defineProperty(_MODULE_SOURCE_TYPE, _utils.MODULE_FILTERS.THIRD_PARTY, {
-    label: 'Third party',
-    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, _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)
-    }));
-  }, {})))), {}, _defineProperty({}, _utils.MODULE_FILE_TYPE, _objectSpread({
-    label: 'File type'
-  }, _utils.MODULE_SOURCE_FILE_TYPES.reduce(function (agg, fileType) {
-    return _objectSpread(_objectSpread({}, agg), {}, _defineProperty({}, fileType, {
-      label: _utils.FILE_TYPE_LABELS[fileType],
-      defaultValue: (0, _get2["default"])(filters, "".concat(_utils.MODULE_FILE_TYPE, ".").concat(fileType), true)
-    }));
-  }, {}))));
-
+  var emptyMessage = (0, _react.useMemo)(function () {
+    return /*#__PURE__*/_react["default"].createElement(_emptySet.EmptySet, {
+      resources: "modules",
+      filtered: totalRowCount !== 0,
+      handleResetFilters: resetFilters,
+      handleViewAll: resetAllFilters
+    });
+  }, [totalRowCount, resetFilters, resetAllFilters]);
   return /*#__PURE__*/_react["default"].createElement("div", {
     className: rootClassName
   }, /*#__PURE__*/_react["default"].createElement(_toolbar.Toolbar, {
     className: _bundleModulesModule["default"].toolbar,
-    renderActions: function renderActions(_ref5) {
-      var actionClassName = _ref5.actionClassName;
+    renderActions: function renderActions(_ref6) {
+      var actionClassName = _ref6.actionClassName;
       return /*#__PURE__*/_react["default"].createElement(_flexStack.FlexStack, {
         space: "xxsmall",
         className: (0, _classnames["default"])(_bundleModulesModule["default"].dropdown, actionClassName)
@@ -249,12 +269,7 @@ var BundleModules = function BundleModules(_ref2) {
     renderRowHeader: renderRowHeader,
     emptyMessage: emptyMessage,
     showHeaderSum: true,
-    title: /*#__PURE__*/_react["default"].createElement(_metricsTableTitle.MetricsTableTitle, {
-      title: _i18n["default"].MODULES,
-      info: "(".concat(items.length, "/").concat(totalRowCount, ")"),
-      popoverInfo: _i18n["default"].MODULES_INFO,
-      popoverHref: _config["default"].documentation.modules
-    })
+    title: metricsTableTitle
   }));
 };
 

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

@@ -55,8 +55,6 @@ function _getRequireWildcardCache(nodeInterop) { if (typeof WeakMap !== "functio
 
 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 _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; }
-
 function _extends() { _extends = Object.assign ? Object.assign.bind() : 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 _slicedToArray(arr, i) { return _arrayWithHoles(arr) || _iterableToArrayLimit(arr, i) || _unsupportedIterableToArray(arr, i) || _nonIterableRest(); }
@@ -71,12 +69,29 @@ function _iterableToArrayLimit(arr, i) { var _i = arr == null ? null : typeof Sy
 
 function _arrayWithHoles(arr) { if (Array.isArray(arr)) return arr; }
 
-var PackagePopoverContent = function PackagePopoverContent(_ref) {
-  var name = _ref.name,
-      fullName = _ref.fullName,
-      path = _ref.path,
-      duplicate = _ref.duplicate,
-      CustomComponentLink = _ref.CustomComponentLink;
+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; }
+
+var getDropdownFilters = function getDropdownFilters(_ref) {
+  var _ref2;
+
+  var compareMode = _ref.compareMode,
+      filters = _ref.filters;
+  return _ref2 = {}, _defineProperty(_ref2, _utils.PACKAGE_FILTERS.CHANGED, {
+    label: 'Changed',
+    defaultValue: filters[_utils.PACKAGE_FILTERS.CHANGED],
+    disabled: !compareMode
+  }), _defineProperty(_ref2, _utils.PACKAGE_FILTERS.DUPLICATE, {
+    label: 'Duplicate',
+    defaultValue: filters[_utils.PACKAGE_FILTERS.DUPLICATE]
+  }), _ref2;
+};
+
+var PackagePopoverContent = function PackagePopoverContent(_ref3) {
+  var name = _ref3.name,
+      fullName = _ref3.fullName,
+      path = _ref3.path,
+      duplicate = _ref3.duplicate,
+      CustomComponentLink = _ref3.CustomComponentLink;
   var fallbackPackagePath = "node_modules/".concat(fullName.split(_utils.PACKAGES_SEPARATOR).join('/node_modules/'));
   var normalizedPackagePath = "".concat(path || fallbackPackagePath, "/");
 
@@ -130,12 +145,12 @@ PackagePopoverContent.defaultProps = {
   path: ''
 };
 
-var PackageName = function PackageName(_ref2) {
-  var packageName = _ref2.packageName,
-      path = _ref2.path,
-      showDuplicateFlag = _ref2.showDuplicateFlag,
-      row = _ref2.row,
-      CustomComponentLink = _ref2.CustomComponentLink;
+var PackageName = function PackageName(_ref4) {
+  var packageName = _ref4.packageName,
+      path = _ref4.path,
+      showDuplicateFlag = _ref4.showDuplicateFlag,
+      row = _ref4.row,
+      CustomComponentLink = _ref4.CustomComponentLink;
 
   var _useState = (0, _react.useState)(false),
       _useState2 = _slicedToArray(_useState, 2),
@@ -191,13 +206,13 @@ PackageName.propTypes = {
   CustomComponentLink: _propTypes["default"].elementType.isRequired
 };
 
-var RowHeader = function RowHeader(_ref3) {
-  var row = _ref3.row,
-      CustomComponentLink = _ref3.CustomComponentLink;
+var RowHeader = function RowHeader(_ref5) {
+  var row = _ref5.row,
+      CustomComponentLink = _ref5.CustomComponentLink;
   var packageNames = row.label.split(_utils.PACKAGES_SEPARATOR);
 
-  var _ref4 = row.runs[0] || {},
-      path = _ref4.path;
+  var _ref6 = row.runs[0] || {},
+      path = _ref6.path;
 
   return /*#__PURE__*/_react["default"].createElement("span", {
     className: _bundlePackagesModule["default"].packageNames
@@ -225,8 +240,6 @@ RowHeader.propTypes = {
 };
 
 var BundlePackages = function BundlePackages(props) {
-  var _ref6;
-
   var className = props.className,
       jobs = props.jobs,
       items = props.items,
@@ -242,26 +255,40 @@ var BundlePackages = function BundlePackages(props) {
       updateSearch = props.updateSearch,
       hasActiveFilters = props.hasActiveFilters,
       CustomComponentLink = props.customComponentLink;
-
-  var emptyMessage = /*#__PURE__*/_react["default"].createElement(_emptySet.EmptySet, {
-    resources: "packages",
-    filtered: totalRowCount !== 0,
-    handleResetFilters: resetFilters,
-    handleViewAll: resetAllFilters
-  });
-
+  var dropdownFilters = (0, _react.useMemo)(function () {
+    return getDropdownFilters({
+      compareMode: (jobs === null || jobs === void 0 ? void 0 : jobs.length) > 1,
+      filters: filters
+    });
+  }, [jobs, filters]);
+  var metricsTableTitle = (0, _react.useMemo)(function () {
+    return /*#__PURE__*/_react["default"].createElement(_metricsTableTitle.MetricsTableTitle, {
+      title: _i18n["default"].PACKAGES,
+      info: "".concat(items.length, "/").concat(totalRowCount),
+      popoverInfo: _i18n["default"].PACKAGES_INFO,
+      popoverHref: _config["default"].documentation.packages
+    });
+  }, [items, totalRowCount]);
   var renderRowHeader = (0, _react.useCallback)(function (row) {
     return /*#__PURE__*/_react["default"].createElement(RowHeader, {
       row: row,
       CustomComponentLink: CustomComponentLink
     });
   }, [CustomComponentLink]);
+  var emptyMessage = (0, _react.useMemo)(function () {
+    return /*#__PURE__*/_react["default"].createElement(_emptySet.EmptySet, {
+      resources: "packages",
+      filtered: totalRowCount !== 0,
+      handleResetFilters: resetFilters,
+      handleViewAll: resetAllFilters
+    });
+  }, [totalRowCount, resetFilters, resetAllFilters]);
   return /*#__PURE__*/_react["default"].createElement("section", {
     className: (0, _classnames["default"])(_bundlePackagesModule["default"].root, className)
   }, /*#__PURE__*/_react["default"].createElement(_toolbar.Toolbar, {
     className: _bundlePackagesModule["default"].toolbar,
-    renderActions: function renderActions(_ref5) {
-      var actionClassName = _ref5.actionClassName;
+    renderActions: function renderActions(_ref7) {
+      var actionClassName = _ref7.actionClassName;
       return /*#__PURE__*/_react["default"].createElement(_flexStack.FlexStack, {
         space: "xxsmall",
         className: (0, _classnames["default"])(_bundlePackagesModule["default"].dropdown, actionClassName)
@@ -282,14 +309,7 @@ var BundlePackages = function BundlePackages(props) {
     search: search,
     updateSearch: updateSearch
   }), /*#__PURE__*/_react["default"].createElement(_filters.Filters, {
-    filters: (_ref6 = {}, _defineProperty(_ref6, _utils.PACKAGE_FILTERS.CHANGED, {
-      label: 'Changed',
-      defaultValue: filters[_utils.PACKAGE_FILTERS.CHANGED],
-      disabled: jobs.length <= 1
-    }), _defineProperty(_ref6, _utils.PACKAGE_FILTERS.DUPLICATE, {
-      label: 'Duplicate',
-      defaultValue: filters[_utils.PACKAGE_FILTERS.DUPLICATE]
-    }), _ref6),
+    filters: dropdownFilters,
     label: "Filters (".concat(items.length, "/").concat(totalRowCount, ")"),
     onChange: updateFilters,
     hasActiveFilters: hasActiveFilters
@@ -299,12 +319,7 @@ var BundlePackages = function BundlePackages(props) {
     emptyMessage: emptyMessage,
     renderRowHeader: renderRowHeader,
     showHeaderSum: true,
-    title: /*#__PURE__*/_react["default"].createElement(_metricsTableTitle.MetricsTableTitle, {
-      title: _i18n["default"].PACKAGES,
-      info: "(".concat(items.length, "/").concat(totalRowCount, ")"),
-      popoverInfo: _i18n["default"].PACKAGES_INFO,
-      popoverHref: _config["default"].documentation.packages
-    })
+    title: metricsTableTitle
   })));
 };
 

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

@@ -32,15 +32,16 @@ var MetricsTableTitle = function MetricsTableTitle(props) {
       popoverInfo = props.popoverInfo,
       popoverHref = props.popoverHref;
   var rootClassName = (0, _classnames["default"])(_metricsTableTitleModule["default"].root, className);
-  return /*#__PURE__*/_react["default"].createElement(_flexStack.FlexStack, {
-    space: "xxxsmall",
+  return /*#__PURE__*/_react["default"].createElement(_stack.Stack, {
     className: rootClassName
-  }, /*#__PURE__*/_react["default"].createElement("span", null, title), info && /*#__PURE__*/_react["default"].createElement("span", {
-    className: _metricsTableTitleModule["default"].info
-  }, info), (popoverInfo || popoverHref) && /*#__PURE__*/_react["default"].createElement(_hoverCard.HoverCard, {
+  }, /*#__PURE__*/_react["default"].createElement(_flexStack.FlexStack, {
+    space: "xxxsmall",
+    className: _metricsTableTitleModule["default"].title
+  }, /*#__PURE__*/_react["default"].createElement("span", null, title), (popoverInfo || popoverHref) && /*#__PURE__*/_react["default"].createElement(_hoverCard.HoverCard, {
     label: /*#__PURE__*/_react["default"].createElement(_icon.Icon, {
       glyph: "help"
-    })
+    }),
+    className: _metricsTableTitleModule["default"].hoverCard
   }, /*#__PURE__*/_react["default"].createElement(_stack.Stack, {
     space: "xxxsmall"
   }, popoverInfo && /*#__PURE__*/_react["default"].createElement("p", null, popoverInfo), popoverHref && /*#__PURE__*/_react["default"].createElement("p", null, /*#__PURE__*/_react["default"].createElement("button", {
@@ -49,7 +50,9 @@ var MetricsTableTitle = function MetricsTableTitle(props) {
       return window.open(popoverHref);
     },
     className: _metricsTableTitleModule["default"].readMoreLink
-  }, _i18n["default"].READ_MORE)))));
+  }, _i18n["default"].READ_MORE))))), info && /*#__PURE__*/_react["default"].createElement("p", {
+    className: _metricsTableTitleModule["default"].info
+  }, info));
 };
 
 exports.MetricsTableTitle = MetricsTableTitle;

package/lib/components/metrics-table-title/metrics-table-title.module.css

@@ -1,14 +1,20 @@
 .root {
+}
+
+.title {
+  color: var(--color-text-light);
   align-items: center;
   font-weight: bold;
-  line-height: var(--space-small);
   text-transform: uppercase;
-  color: var(--color-text-light);
+}
+
+.hoverCard {
+  line-height: 1;
 }
 
 .info {
+  font-size: var(--size-xsmall);
   font-weight: normal;
-  text-transform: none;
 }
 
 .readMoreLink {