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

package/CHANGELOG.md

@@ -3,6 +3,42 @@
 All notable changes to this project will be documented in this file.
 See [Conventional Commits](https://conventionalcommits.org) for commit guidelines.
 
+## [3.2.9-beta.1](https://github.com/relative-ci/bundle-stats/compare/v3.2.9-beta.0...v3.2.9-beta.1) (2022-03-11)
+
+**Note:** Version bump only for package @bundle-stats/ui
+
+
+
+
+
+## [3.2.9-beta.0](https://github.com/relative-ci/bundle-stats/compare/v3.2.8...v3.2.9-beta.0) (2022-03-11)
+
+
+### Bug Fixes
+
+* **ui:** App - replace box with table outline ([592e066](https://github.com/relative-ci/bundle-stats/commit/592e06603ddd3095cfb64786bbacd75863452ec6))
+* **ui:** BundleAssets - inline asset name when long ([9000ca3](https://github.com/relative-ci/bundle-stats/commit/9000ca30ccd9ed268d5e0a588fd4dc7fa11fb9dd))
+* **ui:** Consistent HoverCard usage ([a51c927](https://github.com/relative-ci/bundle-stats/commit/a51c9274067d50eaea235fc4220c9d64553901d3))
+* **ui:** EmptySet - add spacing ([e784e10](https://github.com/relative-ci/bundle-stats/commit/e784e1098f56945d8c2a7ecdac192f441c80a973))
+* **ui:** HoverCard - improve hover/active states ([75f881a](https://github.com/relative-ci/bundle-stats/commit/75f881a8251c40ea5852b44747493527310b7e32))
+* **ui:** MetricsTable - baseline align value & delta ([aa8e440](https://github.com/relative-ci/bundle-stats/commit/aa8e440a90dd052ef5807d90b598a065931260e6))
+* **ui:** MetricsTable - job name header nowrap ([06c6606](https://github.com/relative-ci/bundle-stats/commit/06c6606beea1c5c6bebe46c1d3bb6c9c14324def))
+* **ui:** PackageHoverCard - fix layout ([6e1d362](https://github.com/relative-ci/bundle-stats/commit/6e1d362bcf97a11310b7cc1f2e8231b5207c1a3c))
+* **ui:** Tooltip - workaround filter on safari ([ae9b4ca](https://github.com/relative-ci/bundle-stats/commit/ae9b4ca4ea5c6fd8c56b6f9f02d22fdb321ecad8))
+* **ui:** useSearchParams - prevent triggering route change twice ([27b692c](https://github.com/relative-ci/bundle-stats/commit/27b692c5f3edf74a1692d9488b6a2d60c3210c99))
+
+
+### Performance Improvements
+
+* **ui:** App - replace route render fns with components ([da4d9a8](https://github.com/relative-ci/bundle-stats/commit/da4d9a82e96db12f47838af0b3e68da26b4faf56))
+* **ui:** MetricsTable - optimize row rendering ([02cfab0](https://github.com/relative-ci/bundle-stats/commit/02cfab0b2d3f12b6e4369d6994f4a63e05b65cff))
+* **ui:** MetricsTable - row component ([0ffe212](https://github.com/relative-ci/bundle-stats/commit/0ffe212e46cc2805a77ed64b510e323bbf7232bc))
+* **ui:** Table - remove custom child components ([856e02d](https://github.com/relative-ci/bundle-stats/commit/856e02d3ad97e54598bf96cf8a252fe53b6b2c3b))
+
+
+
+
+
 ## [3.2.8](https://github.com/relative-ci/bundle-stats/compare/v3.2.7...v3.2.8) (2022-03-10)
 
 **Note:** Version bump only for package @bundle-stats/ui

package/lib/app/app.js

@@ -51,7 +51,8 @@ var _header = require("./header");
 
 var _appModule = _interopRequireDefault(require("./app.module.css"));
 
-var _excluded = ["jobs", "version"];
+var _excluded = ["jobs", "version"],
+    _excluded2 = ["jobs"];
 
 function _interopRequireDefault(obj) { return obj && obj.__esModule ? obj : { "default": obj }; }
 
@@ -113,26 +114,130 @@ Layout.defaultProps = {
   version: null
 };
 
-var AppComponent = function AppComponent(_ref2) {
-  var version = _ref2.version,
-      jobs = _ref2.jobs;
+var JobsContext = /*#__PURE__*/_react["default"].createContext({
+  jobs: []
+});
+
+var JobsProvider = function JobsProvider(_ref2) {
+  var jobs = _ref2.jobs,
+      restProps = _objectWithoutProperties(_ref2, _excluded2);
+
+  var value = (0, _react.useMemo)(function () {
+    return {
+      jobs: jobs
+    };
+  }, [jobs]);
+  return /*#__PURE__*/_react["default"].createElement(JobsContext.Provider, _extends({
+    value: value
+  }, restProps));
+};
+
+JobsProvider.propTypes = {
+  jobs: _propTypes["default"].arrayOf(_propTypes["default"].object).isRequired
+};
+
+var OverviewContent = function OverviewContent() {
+  var _useContext = (0, _react.useContext)(JobsContext),
+      jobs = _useContext.jobs;
+
+  var duplicatePackagesCount = jobs[0].summary.webpack.duplicatePackagesCount;
+  var duplicatePackagesInsights = Boolean(duplicatePackagesCount.current || duplicatePackagesCount.baseline);
+  return /*#__PURE__*/_react["default"].createElement(_stack.Stack, {
+    space: "medium"
+  }, duplicatePackagesInsights && /*#__PURE__*/_react["default"].createElement(_container.Container, null, /*#__PURE__*/_react["default"].createElement(_duplicatePackagesWarning.DuplicatePackagesWarning, {
+    duplicatePackagesCount: duplicatePackagesCount,
+    showDelta: jobs.length > 1
+  })), /*#__PURE__*/_react["default"].createElement(_container.Container, null, /*#__PURE__*/_react["default"].createElement(_stack.Stack, {
+    space: "small"
+  }, /*#__PURE__*/_react["default"].createElement(_totalSizeTypeTitle.TotalSizeTypeTitle, null), /*#__PURE__*/_react["default"].createElement(_bundleAssetsTotalsChartBars.BundleAssetsTotalsChartBars, {
+    jobs: jobs
+  }), /*#__PURE__*/_react["default"].createElement(_bundleAssetsTotalsTable.BundleAssetsTotalsTable, {
+    jobs: jobs,
+    outline: true
+  }))));
+};
+
+var AssetsContent = function AssetsContent() {
+  var _jobs$;
 
   var _useComponentQuerySta = (0, _queryState.useComponentQueryState)(_utils.COMPONENT.BUNDLE_ASSETS),
       _useComponentQuerySta2 = _slicedToArray(_useComponentQuerySta, 2),
       bundleStatsState = _useComponentQuerySta2[0],
       bundleStatsSetState = _useComponentQuerySta2[1];
 
-  var _useComponentQuerySta3 = (0, _queryState.useComponentQueryState)(_utils.COMPONENT.BUNDLE_PACKAGES),
+  var _useContext2 = (0, _react.useContext)(JobsContext),
+      jobs = _useContext2.jobs;
+
+  return /*#__PURE__*/_react["default"].createElement(_container.Container, null, /*#__PURE__*/_react["default"].createElement(_stack.Stack, {
+    space: "medium"
+  }, /*#__PURE__*/_react["default"].createElement(_summary.Summary, {
+    keys: _constants.METRICS_WEBPACK_ASSETS,
+    data: jobs === null || jobs === void 0 ? void 0 : (_jobs$ = jobs[0]) === null || _jobs$ === void 0 ? void 0 : _jobs$.summary,
+    showSummaryItemDelta: (jobs === null || jobs === void 0 ? void 0 : jobs.length) !== 1
+  }), /*#__PURE__*/_react["default"].createElement(_box.Box, {
+    outline: true
+  }, /*#__PURE__*/_react["default"].createElement(_bundleAssets.BundleAssets, _extends({
+    jobs: jobs,
+    setState: bundleStatsSetState
+  }, bundleStatsState)))));
+};
+
+var ModulesContent = function ModulesContent() {
+  var _jobs$2;
+
+  var _useComponentQuerySta3 = (0, _queryState.useComponentQueryState)(_utils.COMPONENT.BUNDLE_MODULES),
       _useComponentQuerySta4 = _slicedToArray(_useComponentQuerySta3, 2),
-      bundlePackagesState = _useComponentQuerySta4[0],
-      bundlePackagesSetState = _useComponentQuerySta4[1];
+      bundleModulesState = _useComponentQuerySta4[0],
+      bundleModulesSetState = _useComponentQuerySta4[1];
+
+  var _useContext3 = (0, _react.useContext)(JobsContext),
+      jobs = _useContext3.jobs;
 
-  var _useComponentQuerySta5 = (0, _queryState.useComponentQueryState)(_utils.COMPONENT.BUNDLE_MODULES),
+  return /*#__PURE__*/_react["default"].createElement(_container.Container, null, /*#__PURE__*/_react["default"].createElement(_stack.Stack, {
+    space: "medium"
+  }, /*#__PURE__*/_react["default"].createElement(_summary.Summary, {
+    keys: _constants.METRICS_WEBPACK_MODULES,
+    data: jobs === null || jobs === void 0 ? void 0 : (_jobs$2 = jobs[0]) === null || _jobs$2 === void 0 ? void 0 : _jobs$2.summary,
+    showSummaryItemDelta: (jobs === null || jobs === void 0 ? void 0 : jobs.length) !== 1
+  }), /*#__PURE__*/_react["default"].createElement(_box.Box, {
+    outline: true
+  }, /*#__PURE__*/_react["default"].createElement(_bundleModules.BundleModules, _extends({
+    jobs: jobs,
+    setState: bundleModulesSetState
+  }, bundleModulesState)))));
+};
+
+var PackagesContent = function PackagesContent() {
+  var _jobs$3;
+
+  var _useComponentQuerySta5 = (0, _queryState.useComponentQueryState)(_utils.COMPONENT.BUNDLE_PACKAGES),
       _useComponentQuerySta6 = _slicedToArray(_useComponentQuerySta5, 2),
-      bundleModulesState = _useComponentQuerySta6[0],
-      bundleModulesSetState = _useComponentQuerySta6[1];
+      bundlePackagesState = _useComponentQuerySta6[0],
+      bundlePackagesSetState = _useComponentQuerySta6[1];
+
+  var _useContext4 = (0, _react.useContext)(JobsContext),
+      jobs = _useContext4.jobs;
 
-  if (jobs.length === 0) {
+  return /*#__PURE__*/_react["default"].createElement(_container.Container, null, /*#__PURE__*/_react["default"].createElement(_stack.Stack, {
+    space: "medium"
+  }, /*#__PURE__*/_react["default"].createElement(_summary.Summary, {
+    keys: _constants.METRICS_WEBPACK_PACKAGES,
+    data: jobs === null || jobs === void 0 ? void 0 : (_jobs$3 = jobs[0]) === null || _jobs$3 === void 0 ? void 0 : _jobs$3.summary,
+    showSummaryItemDelta: (jobs === null || jobs === void 0 ? void 0 : jobs.length) !== 1
+  }), /*#__PURE__*/_react["default"].createElement(_box.Box, {
+    outline: true
+  }, /*#__PURE__*/_react["default"].createElement(_bundlePackages.BundlePackages, _extends({
+    jobs: jobs
+  }, bundlePackagesState, {
+    setState: bundlePackagesSetState
+  })))));
+};
+
+var AppComponent = function AppComponent(_ref3) {
+  var version = _ref3.version,
+      jobs = _ref3.jobs;
+
+  if ((jobs === null || jobs === void 0 ? void 0 : jobs.length) === 0) {
     return /*#__PURE__*/_react["default"].createElement(Layout, {
       version: version
     }, /*#__PURE__*/_react["default"].createElement(_container.Container, null, /*#__PURE__*/_react["default"].createElement("div", {
@@ -140,9 +245,9 @@ var AppComponent = function AppComponent(_ref2) {
     }, _i18n["default"].NO_DATA)));
   }
 
-  var duplicatePackagesCount = jobs[0].summary.webpack.duplicatePackagesCount;
-  var duplicatePackagesInsights = Boolean(duplicatePackagesCount.current || duplicatePackagesCount.baseline);
-  return /*#__PURE__*/_react["default"].createElement(Layout, {
+  return /*#__PURE__*/_react["default"].createElement(JobsProvider, {
+    jobs: jobs
+  }, /*#__PURE__*/_react["default"].createElement(Layout, {
     jobs: jobs,
     version: version
   }, /*#__PURE__*/_react["default"].createElement(_container.Container, {
@@ -177,80 +282,20 @@ var AppComponent = function AppComponent(_ref2) {
   }, /*#__PURE__*/_react["default"].createElement(_reactRouterDom.Switch, null, /*#__PURE__*/_react["default"].createElement(_reactRouterDom.Route, {
     exact: true,
     path: _constants.URLS.ASSETS,
-    render: function render(_ref3) {
-      var location = _ref3.location;
-      return /*#__PURE__*/_react["default"].createElement(_container.Container, null, /*#__PURE__*/_react["default"].createElement(_stack.Stack, {
-        space: "medium"
-      }, /*#__PURE__*/_react["default"].createElement(_summary.Summary, {
-        keys: _constants.METRICS_WEBPACK_ASSETS,
-        data: jobs[0].summary,
-        showSummaryItemDelta: jobs.length !== 1
-      }), /*#__PURE__*/_react["default"].createElement(_box.Box, {
-        outline: true
-      }, /*#__PURE__*/_react["default"].createElement(_bundleAssets.BundleAssets, _extends({
-        jobs: jobs,
-        setState: bundleStatsSetState
-      }, bundleStatsState, {
-        key: "".concat(location.pathname, "_").concat(location.search)
-      })))));
-    }
+    component: AssetsContent
   }), /*#__PURE__*/_react["default"].createElement(_reactRouterDom.Route, {
     exact: true,
     path: _constants.URLS.MODULES,
-    render: function render() {
-      return /*#__PURE__*/_react["default"].createElement(_container.Container, null, /*#__PURE__*/_react["default"].createElement(_stack.Stack, {
-        space: "medium"
-      }, /*#__PURE__*/_react["default"].createElement(_summary.Summary, {
-        keys: _constants.METRICS_WEBPACK_MODULES,
-        data: jobs[0].summary,
-        showSummaryItemDelta: jobs.length !== 1
-      }), /*#__PURE__*/_react["default"].createElement(_box.Box, {
-        outline: true
-      }, /*#__PURE__*/_react["default"].createElement(_bundleModules.BundleModules, _extends({
-        jobs: jobs,
-        setState: bundleModulesSetState
-      }, bundleModulesState)))));
-    }
+    component: ModulesContent
   }), /*#__PURE__*/_react["default"].createElement(_reactRouterDom.Route, {
     exact: true,
     path: _constants.URLS.PACKAGES,
-    render: function render(_ref4) {
-      var location = _ref4.location;
-      return /*#__PURE__*/_react["default"].createElement(_container.Container, null, /*#__PURE__*/_react["default"].createElement(_stack.Stack, {
-        space: "medium"
-      }, /*#__PURE__*/_react["default"].createElement(_summary.Summary, {
-        keys: _constants.METRICS_WEBPACK_PACKAGES,
-        data: jobs[0].summary,
-        showSummaryItemDelta: jobs.length !== 1
-      }), /*#__PURE__*/_react["default"].createElement(_box.Box, {
-        outline: true
-      }, /*#__PURE__*/_react["default"].createElement(_bundlePackages.BundlePackages, _extends({
-        jobs: jobs
-      }, bundlePackagesState, {
-        setState: bundlePackagesSetState,
-        key: "".concat(location.pathname, "_").concat(location.search)
-      })))));
-    }
+    component: PackagesContent
   }), /*#__PURE__*/_react["default"].createElement(_reactRouterDom.Route, {
     exact: true,
     path: _constants.URLS.OVERVIEW,
-    render: function render() {
-      return /*#__PURE__*/_react["default"].createElement(_stack.Stack, {
-        space: "medium"
-      }, duplicatePackagesInsights && /*#__PURE__*/_react["default"].createElement(_container.Container, null, /*#__PURE__*/_react["default"].createElement(_duplicatePackagesWarning.DuplicatePackagesWarning, {
-        duplicatePackagesCount: duplicatePackagesCount,
-        showDelta: jobs.length > 1
-      })), /*#__PURE__*/_react["default"].createElement(_container.Container, null, /*#__PURE__*/_react["default"].createElement(_stack.Stack, {
-        space: "small"
-      }, /*#__PURE__*/_react["default"].createElement(_totalSizeTypeTitle.TotalSizeTypeTitle, null), /*#__PURE__*/_react["default"].createElement(_bundleAssetsTotalsChartBars.BundleAssetsTotalsChartBars, {
-        jobs: jobs
-      }), /*#__PURE__*/_react["default"].createElement(_box.Box, {
-        outline: true
-      }, /*#__PURE__*/_react["default"].createElement(_bundleAssetsTotalsTable.BundleAssetsTotalsTable, {
-        jobs: jobs
-      })))));
-    }
-  }))));
+    component: OverviewContent
+  })))));
 };
 
 AppComponent.defaultProps = {

package/lib/components/asset-info/asset-info.module.css

@@ -1,4 +1,5 @@
 .fileName {
+  max-width: 100%;
   padding: 2px;
   background: var(--color-highlight-warning);
 }

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

@@ -128,61 +128,99 @@ TooltipNotPredictive.propTypes = {
 
 };
 
-var getRenderRowHeader = function getRenderRowHeader(_ref6) {
-  var labels = _ref6.labels,
-      CustomComponentLink = _ref6.CustomComponentLink,
-      chunks = _ref6.chunks;
-  return function (item) {
-    var label = item.label,
-        isNotPredictive = item.isNotPredictive,
-        runs = item.runs,
-        isChunk = item.isChunk,
-        isEntry = item.isEntry,
-        isInitial = item.isInitial;
-    return /*#__PURE__*/_react["default"].createElement(_hoverCard.HoverCard, {
-      label: /*#__PURE__*/_react["default"].createElement(_flexStack.FlexStack, {
-        space: "xxxsmall",
-        className: _bundleAssetsModule["default"].assetName
-      }, /*#__PURE__*/_react["default"].createElement("div", {
-        className: _bundleAssetsModule["default"].assetInfoFlags
-      }, isNotPredictive && /*#__PURE__*/_react["default"].createElement(_tooltip.Tooltip, {
-        className: _bundleAssetsModule["default"].notPredictive,
-        title: /*#__PURE__*/_react["default"].createElement(TooltipNotPredictive, {
-          runs: runs
-        })
-      }, /*#__PURE__*/_react["default"].createElement(_icon.Icon, {
-        className: _bundleAssetsModule["default"].notPredictiveIcon,
-        glyph: "warning"
-      })), isChunk && /*#__PURE__*/_react["default"].createElement(_tag.Tag, {
-        title: "Chunk",
-        size: _tag.Tag.SIZES.SMALL,
-        kind: _tag.Tag.KINDS.INFO,
-        className: (0, _classnames["default"])(_bundleAssetsModule["default"].tag, _bundleAssetsModule["default"].tagChunk)
-      }), isEntry && /*#__PURE__*/_react["default"].createElement(_tag.Tag, {
-        title: "Entrypoint",
-        size: _tag.Tag.SIZES.SMALL,
-        kind: _tag.Tag.KINDS.INFO,
-        className: (0, _classnames["default"])(_bundleAssetsModule["default"].tag, _bundleAssetsModule["default"].tagEntry)
-      }), isInitial && /*#__PURE__*/_react["default"].createElement(_tag.Tag, {
-        title: "Initial",
-        size: _tag.Tag.SIZES.SMALL,
-        kind: _tag.Tag.KINDS.INFO,
-        className: (0, _classnames["default"])(_bundleAssetsModule["default"].tag, _bundleAssetsModule["default"].tagInitial)
-      })), /*#__PURE__*/_react["default"].createElement(_fileName.FileName, {
-        name: label
-      }))
-    }, /*#__PURE__*/_react["default"].createElement(_assetInfo.AssetInfo, {
-      className: _bundleAssetsModule["default"].assetInfo,
-      item: item,
-      labels: labels,
-      chunks: chunks,
-      CustomComponentLink: CustomComponentLink
+var RowHeader = function RowHeader(_ref6) {
+  var row = _ref6.row,
+      labels = _ref6.labels,
+      chunks = _ref6.chunks,
+      CustomComponentLink = _ref6.CustomComponentLink;
+  var label = row.label,
+      isNotPredictive = row.isNotPredictive,
+      runs = row.runs,
+      isChunk = row.isChunk,
+      isEntry = row.isEntry,
+      isInitial = row.isInitial;
+
+  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 content = (0, _react.useMemo)(function () {
+    return /*#__PURE__*/_react["default"].createElement("span", {
+      className: _bundleAssetsModule["default"].assetName
+    }, /*#__PURE__*/_react["default"].createElement("span", {
+      className: _bundleAssetsModule["default"].assetNameTags
+    }, isNotPredictive && /*#__PURE__*/_react["default"].createElement(_tooltip.Tooltip, {
+      className: _bundleAssetsModule["default"].notPredictive,
+      title: /*#__PURE__*/_react["default"].createElement(TooltipNotPredictive, {
+        runs: runs
+      })
+    }, /*#__PURE__*/_react["default"].createElement(_icon.Icon, {
+      className: _bundleAssetsModule["default"].notPredictiveIcon,
+      glyph: "warning"
+    })), isChunk && /*#__PURE__*/_react["default"].createElement(_tag.Tag, {
+      className: (0, _classnames["default"])(_bundleAssetsModule["default"].assetNameTag, _bundleAssetsModule["default"].assetNameTagChunk),
+      title: "Chunk",
+      size: _tag.Tag.SIZES.SMALL,
+      kind: _tag.Tag.KINDS.INFO
+    }), isEntry && /*#__PURE__*/_react["default"].createElement(_tag.Tag, {
+      className: (0, _classnames["default"])(_bundleAssetsModule["default"].assetNameTag, _bundleAssetsModule["default"].assetNameTagEntry),
+      title: "Entrypoint",
+      size: _tag.Tag.SIZES.SMALL,
+      kind: _tag.Tag.KINDS.INFO
+    }), isInitial && /*#__PURE__*/_react["default"].createElement(_tag.Tag, {
+      className: (0, _classnames["default"])(_bundleAssetsModule["default"].assetNameTag, _bundleAssetsModule["default"].assetNameTagInitial),
+      title: "Initial",
+      size: _tag.Tag.SIZES.SMALL,
+      kind: _tag.Tag.KINDS.INFO
+    })), /*#__PURE__*/_react["default"].createElement(_fileName.FileName, {
+      className: _bundleAssetsModule["default"].assetNameText,
+      name: label
     }));
-  };
+  }, [isChunk, isEntry, isInitial, isNotPredictive, runs]);
+
+  if (!showHoverCard) {
+    return /*#__PURE__*/_react["default"].createElement("span", {
+      onMouseEnter: handleOnMouseEnter
+    }, content);
+  }
+
+  return /*#__PURE__*/_react["default"].createElement(_hoverCard.HoverCard, {
+    label: content
+  }, /*#__PURE__*/_react["default"].createElement(_assetInfo.AssetInfo, {
+    className: _bundleAssetsModule["default"].assetInfo,
+    item: row,
+    labels: labels,
+    chunks: chunks,
+    CustomComponentLink: CustomComponentLink
+  }));
+};
+
+RowHeader.propTypes = {
+  row: _propTypes["default"].shape({
+    label: _propTypes["default"].string,
+    isNotPredictive: _propTypes["default"].bool,
+    isChunk: _propTypes["default"].bool,
+    isInitial: _propTypes["default"].bool,
+    isEntry: _propTypes["default"].bool,
+    runs: _propTypes["default"].arrayOf(_propTypes["default"].object)
+  }).isRequired,
+  chunks: _propTypes["default"].arrayOf(_propTypes["default"].shape({
+    id: _propTypes["default"].string,
+    name: _propTypes["default"].string
+  })),
+  labels: _propTypes["default"].arrayOf(_propTypes["default"].string).isRequired,
+  CustomComponentLink: _propTypes["default"].elementType.isRequired
+};
+RowHeader.defaultProps = {
+  chunks: []
 };
 
 var BundleAssets = function BundleAssets(props) {
-  var _jobs$, _jobs$$meta, _jobs$$meta$webpack, _ASSET_ENTRY_TYPE, _ref8;
+  var _ASSET_ENTRY_TYPE, _ref8;
 
   var className = props.className,
       jobs = props.jobs,
@@ -207,14 +245,16 @@ var BundleAssets = function BundleAssets(props) {
     handleViewAll: resetAllFilters
   });
 
-  var chunks = ((_jobs$ = jobs[0]) === null || _jobs$ === void 0 ? void 0 : (_jobs$$meta = _jobs$.meta) === null || _jobs$$meta === void 0 ? void 0 : (_jobs$$meta$webpack = _jobs$$meta.webpack) === null || _jobs$$meta$webpack === void 0 ? void 0 : _jobs$$meta$webpack.chunks) || [];
-  var renderRowHeader = (0, _react.useMemo)(function () {
-    return getRenderRowHeader({
+  var renderRowHeader = (0, _react.useCallback)(function (row) {
+    var _jobs$, _jobs$$meta, _jobs$$meta$webpack;
+
+    return /*#__PURE__*/_react["default"].createElement(RowHeader, {
+      row: row,
       labels: (0, _map2["default"])(jobs, 'label'),
-      CustomComponentLink: CustomComponentLink,
-      chunks: chunks
+      chunks: ((_jobs$ = jobs[0]) === null || _jobs$ === void 0 ? void 0 : (_jobs$$meta = _jobs$.meta) === null || _jobs$$meta === void 0 ? void 0 : (_jobs$$meta$webpack = _jobs$$meta.webpack) === null || _jobs$$meta$webpack === void 0 ? void 0 : _jobs$$meta$webpack.chunks) || [],
+      CustomComponentLink: CustomComponentLink
     });
-  }, [jobs, chunks]);
+  }, [jobs, CustomComponentLink]);
   return /*#__PURE__*/_react["default"].createElement("section", {
     className: (0, _classnames["default"])(_bundleAssetsModule["default"].root, className)
   }, /*#__PURE__*/_react["default"].createElement(_toolbar.Toolbar, {

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

@@ -8,10 +8,7 @@
   margin-right: -1px; /** collapse border */
 }
 
-.assetName {
-  display: inline-flex;
-  align-items: center;
-}
+.assetName {}
 
 .notPredictive {
   margin-right: var(--space-xxsmall);
@@ -26,39 +23,48 @@
   vertical-align: top;
 }
 
-.assetInfoFlags {
-  display: inline-block;
+.assetNameTags {
+  display: inline;
   margin-right: var(--space-xxxsmall);
 }
 
-.assetInfoFlags:empty {
+.assetNameTags:empty {
   display: none;
 }
 
-.tag + .tag {
+.assetNameTag {
+  vertical-align: middle;
+}
+
+.assetNameTag + .assetNameTag {
   margin-left: 2px;
 }
 
-.tagEntry {
+.assetNameTagEntry {
   background: var(--color-info-light);
 }
 
-.tagEntry::before {
+.assetNameTagEntry::before {
   content: 'e';
 }
 
-.tagInitial {
+.assetNameTagInitial {
   background: var(--color-info-light);
 }
 
-.tagInitial::before {
+.assetNameTagInitial::before {
   content: 'i';
 }
 
-.tagChunk::before {
+.assetNameTagChunk::before {
   content: 'c';
 }
 
+.assetNameText {
+  display: inline;
+  vertical-align: middle;
+}
+
 /* Tooltip not predictive */
 .tooltipNotPredictive {
   text-align: left;

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

@@ -21,16 +21,26 @@ var _metricsTable = require("../metrics-table");
 
 var _componentLink = require("../component-link");
 
+var _excluded = ["className", "jobs", "customComponentLink"];
+
 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; }
+
 var BundleAssetsTotalsTable = function BundleAssetsTotalsTable(_ref) {
   var className = _ref.className,
       jobs = _ref.jobs,
-      CustomComponentLink = _ref.customComponentLink;
+      CustomComponentLink = _ref.customComponentLink,
+      restProps = _objectWithoutProperties(_ref, _excluded);
+
   var items = webpack.compareBySection.sizes(jobs);
 
   var renderRowHeader = function renderRowHeader(item) {
@@ -48,13 +58,13 @@ var BundleAssetsTotalsTable = function BundleAssetsTotalsTable(_ref) {
     }, item.label);
   };
 
-  return /*#__PURE__*/_react["default"].createElement(_metricsTable.MetricsTable, {
+  return /*#__PURE__*/_react["default"].createElement(_metricsTable.MetricsTable, _extends({
     className: className,
     runs: jobs,
     items: items,
     renderRowHeader: renderRowHeader,
     showHeaderSum: true
-  });
+  }, restProps));
 };
 
 exports.BundleAssetsTotalsTable = BundleAssetsTotalsTable;