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

package/lib/app/app.js

@@ -53,7 +53,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 }; }
 
@@ -115,28 +116,142 @@ Layout.defaultProps = {
   version: null
 };
 
-var AppComponent = function AppComponent(_ref2) {
-  var _insights$webpack;
+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 _jobs$0$insights, _jobs$0$insights$webp;
+
+  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(_stack.Stack, {
+    space: "small"
+  }, /*#__PURE__*/_react["default"].createElement(_duplicatePackagesWarning.DuplicatePackagesWarning, {
+    duplicatePackagesCount: duplicatePackagesCount,
+    showDelta: jobs.length > 1
+  }), /*#__PURE__*/_react["default"].createElement(_budgetInsights.BudgetInsights, {
+    source: "webpack",
+    budgets: (_jobs$0$insights = jobs[0].insights) === null || _jobs$0$insights === void 0 ? void 0 : (_jobs$0$insights$webp = _jobs$0$insights.webpack) === null || _jobs$0$insights$webp === void 0 ? void 0 : _jobs$0$insights$webp.budgets
+  }))), /*#__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 version = _ref2.version,
-      jobs = _ref2.jobs;
+var AssetsContent = function AssetsContent() {
+  var _jobs$, _jobs$0$insights2, _jobs$0$insights2$web;
 
   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,
+    budgets: (_jobs$0$insights2 = jobs[0].insights) === null || _jobs$0$insights2 === void 0 ? void 0 : (_jobs$0$insights2$web = _jobs$0$insights2.webpack) === null || _jobs$0$insights2$web === void 0 ? void 0 : _jobs$0$insights2$web.budgets,
+    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, _jobs$0$insights3, _jobs$0$insights3$web;
+
+  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,
+    budgets: (_jobs$0$insights3 = jobs[0].insights) === null || _jobs$0$insights3 === void 0 ? void 0 : (_jobs$0$insights3$web = _jobs$0$insights3.webpack) === null || _jobs$0$insights3$web === void 0 ? void 0 : _jobs$0$insights3$web.budgets,
+    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, _jobs$0$insights4, _jobs$0$insights4$web;
+
+  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;
+
+  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,
+    budgets: (_jobs$0$insights4 = jobs[0].insights) === null || _jobs$0$insights4 === void 0 ? void 0 : (_jobs$0$insights4$web = _jobs$0$insights4.webpack) === null || _jobs$0$insights4$web === void 0 ? void 0 : _jobs$0$insights4$web.budgets,
+    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 _jobs$0$insights5, _jobs$0$insights5$web;
+
+  var version = _ref3.version,
+      jobs = _ref3.jobs;
 
-  if (jobs.length === 0) {
+  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", {
@@ -144,15 +259,9 @@ var AppComponent = function AppComponent(_ref2) {
     }, _i18n["default"].NO_DATA)));
   }
 
-  var _useMemo = (0, _react.useMemo)(function () {
-    return jobs[0];
-  }, jobs),
-      summary = _useMemo.summary,
-      insights = _useMemo.insights;
-
-  var duplicatePackagesCount = 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, {
@@ -160,8 +269,8 @@ var AppComponent = function AppComponent(_ref2) {
   }, /*#__PURE__*/_react["default"].createElement(_summary.Summary, {
     size: "large",
     keys: _constants.METRICS_WEBPACK_GENERAL,
-    data: summary,
-    budgets: insights === null || insights === void 0 ? void 0 : (_insights$webpack = insights.webpack) === null || _insights$webpack === void 0 ? void 0 : _insights$webpack.budgets,
+    data: jobs[0].summary,
+    budgets: (_jobs$0$insights5 = jobs[0].insights) === null || _jobs$0$insights5 === void 0 ? void 0 : (_jobs$0$insights5$web = _jobs$0$insights5.webpack) === null || _jobs$0$insights5$web === void 0 ? void 0 : _jobs$0$insights5$web.budgets,
     showSummaryItemDelta: jobs.length !== 1
   })), /*#__PURE__*/_react["default"].createElement(_container.Container, {
     className: _appModule["default"].tabsContainer
@@ -188,94 +297,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 _insights$webpack2;
-
-      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: summary,
-        budgets: insights === null || insights === void 0 ? void 0 : (_insights$webpack2 = insights.webpack) === null || _insights$webpack2 === void 0 ? void 0 : _insights$webpack2.budgets,
-        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() {
-      var _insights$webpack3;
-
-      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: summary,
-        budgets: insights === null || insights === void 0 ? void 0 : (_insights$webpack3 = insights.webpack) === null || _insights$webpack3 === void 0 ? void 0 : _insights$webpack3.budgets,
-        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 _insights$webpack4;
-
-      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: summary,
-        budgets: insights === null || insights === void 0 ? void 0 : (_insights$webpack4 = insights.webpack) === null || _insights$webpack4 === void 0 ? void 0 : _insights$webpack4.budgets,
-        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() {
-      var _insights$webpack5;
-
-      return /*#__PURE__*/_react["default"].createElement(_stack.Stack, {
-        space: "large"
-      }, duplicatePackagesInsights && /*#__PURE__*/_react["default"].createElement(_container.Container, null, /*#__PURE__*/_react["default"].createElement(_duplicatePackagesWarning.DuplicatePackagesWarning, {
-        duplicatePackagesCount: duplicatePackagesCount,
-        showDelta: jobs.length > 1
-      })), (insights === null || insights === void 0 ? void 0 : (_insights$webpack5 = insights.webpack) === null || _insights$webpack5 === void 0 ? void 0 : _insights$webpack5.budgets) && /*#__PURE__*/_react["default"].createElement(_container.Container, null, /*#__PURE__*/_react["default"].createElement(_budgetInsights.BudgetInsights, {
-        source: "webpack",
-        budgets: insights.webpack.budgets
-      })), /*#__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/app/app.module.css

@@ -13,12 +13,13 @@
 }
 
 .summaryContainer {
-  padding-top: var(--space-large);
+  padding-top: var(--space-medium);
   padding-bottom: var(--space-small);
 }
 
 .tabsContainer {
   border-bottom: 1px solid var(--color-outline);
+  background: var(--color-light);
 }
 
 .tabs {
@@ -34,14 +35,14 @@
 }
 
 .tabsContent {
-  padding-top: var(--space-large);
-  padding-bottom: var(--space-large);
+  padding-top: var(--space-medium);
+  padding-bottom: var(--space-medium);
   min-height: 480px;
 }
 
 @media (min-width: 600px) {
   :root {
-    --header-height: 80px;
+    --header-height: 72px;
   }
 
   .header {
@@ -54,4 +55,10 @@
     background-color: var(--color-background);
     border-bottom: 1px solid var(--color-outline);
   }
+
+  .tabsContainer {
+    position: sticky;
+    top: var(--header-height);
+    z-index: 100;
+  }
 }

package/lib/app/header/header.js

@@ -15,8 +15,6 @@ var _container = require("../../ui/container");
 
 var _jobsHeader = require("../../components/jobs-header");
 
-var _logo = require("../../ui/logo");
-
 var _headerModule = _interopRequireDefault(require("./header.module.css"));
 
 function _interopRequireDefault(obj) { return obj && obj.__esModule ? obj : { "default": obj }; }
@@ -29,14 +27,7 @@ var Header = function Header(_ref) {
     className: (0, _classnames["default"])(_headerModule["default"].root, className)
   }, /*#__PURE__*/_react["default"].createElement("div", {
     className: _headerModule["default"].inner
-  }, /*#__PURE__*/_react["default"].createElement("a", {
-    className: _headerModule["default"].branding,
-    href: "https://github.com/relative-ci/bundle-stats",
-    target: "_blank",
-    rel: "noopener noreferrer nofollow"
-  }, /*#__PURE__*/_react["default"].createElement(_logo.Logo, {
-    className: _headerModule["default"].brandingLogo
-  }, "BundleStats")), /*#__PURE__*/_react["default"].createElement(_jobsHeader.JobsHeader, {
+  }, /*#__PURE__*/_react["default"].createElement(_jobsHeader.JobsHeader, {
     className: _headerModule["default"].jobs,
     jobs: jobs
   })));

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

@@ -29,10 +29,12 @@ var _icon = require("../../ui/icon");
 
 var _fileName = require("../../ui/file-name");
 
-var _popover = require("../../ui/popover");
+var _hoverCard = require("../../ui/hover-card");
 
 var _tooltip = require("../../ui/tooltip");
 
+var _tag = require("../../ui/tag");
+
 var _filters = require("../../ui/filters");
 
 var _sortDropdown = require("../../ui/sort-dropdown");
@@ -126,53 +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(_popover.Popover, {
-      label: /*#__PURE__*/_react["default"].createElement(_fileName.FileName, {
-        name: label
-      }),
-      icon: /*#__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("span", {
-        title: "Chunk",
-        className: _bundleAssetsModule["default"].flagChunk
-      }, "c"), isEntry && /*#__PURE__*/_react["default"].createElement("span", {
-        title: "Entrypoint",
-        className: _bundleAssetsModule["default"].flagEntry
-      }, "e"), isInitial && /*#__PURE__*/_react["default"].createElement("span", {
-        title: "Initial",
-        className: _bundleAssetsModule["default"].flagInitial
-      }, "i"))
-    }, /*#__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,
@@ -197,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, {
@@ -212,7 +262,7 @@ var BundleAssets = function BundleAssets(props) {
     renderActions: function renderActions(_ref7) {
       var actionClassName = _ref7.actionClassName;
       return /*#__PURE__*/_react["default"].createElement(_flexStack.FlexStack, {
-        space: "xsmall",
+        space: "xxsmall",
         className: (0, _classnames["default"])(_bundleAssetsModule["default"].dropdown, actionClassName)
       }, /*#__PURE__*/_react["default"].createElement(_sortDropdown.SortDropdown, _extends({
         fields: sortFields
@@ -223,7 +273,9 @@ var BundleAssets = function BundleAssets(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: _bundleAssetsModule["default"].toolbarSearch,
     placeholder: "Search by name",
     search: search,

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

@@ -8,6 +8,8 @@
   margin-right: -1px; /** collapse border */
 }
 
+.assetName {}
+
 .notPredictive {
   margin-right: var(--space-xxsmall);
   display: inline-block;
@@ -21,50 +23,46 @@
   vertical-align: top;
 }
 
-.assetInfoFlags {
-  display: inline-block;
+.assetNameTags {
+  display: inline;
   margin-right: var(--space-xxxsmall);
 }
 
-.assetInfoFlags:empty {
+.assetNameTags:empty {
   display: none;
 }
 
-.flag {
-  display: inline-block;
-  width: var(--space-xsmall);
-  height: var(--space-xsmall);
-  font-family: var(--font-family);
-  font-size: 8px;
-  font-weight: bold;
-  background: var(--color-highlight);
-  color: var(--color-text-light);
-  line-height: var(--space-xsmall);
-  text-align: center;
-  text-transform: uppercase;
+.assetNameTag {
   vertical-align: middle;
 }
 
-.flag + .flag {
+.assetNameTag + .assetNameTag {
   margin-left: 2px;
 }
 
-.flagEntry {
-  composes: flag;
+.assetNameTagEntry {
   background: var(--color-info-light);
-  color: var(--color-background);
 }
 
-.flagInitial {
-  composes: flag;
+.assetNameTagEntry::before {
+  content: 'e';
+}
+
+.assetNameTagInitial {
   background: var(--color-info-light);
-  color: var(--color-background);
 }
 
-.flagChunk {
-  composes: flag;
-  background: var(--color-info);
-  color: var(--color-background);
+.assetNameTagInitial::before {
+  content: 'i';
+}
+
+.assetNameTagChunk::before {
+  content: 'c';
+}
+
+.assetNameText {
+  display: inline;
+  vertical-align: middle;
 }
 
 /* Tooltip not predictive */