@bundle-stats/ui 3.4.0-alpha.1 → 3.4.0-alpha.5

package/CHANGELOG.md

@@ -3,35 +3,6 @@
 All notable changes to this project will be documented in this file.
 See [Conventional Commits](https://conventionalcommits.org) for commit guidelines.
 
-# [3.4.0-alpha.0](https://github.com/relative-ci/bundle-stats/compare/v3.2.9...v3.4.0-alpha.0) (2022-03-12)
-
-
-### Bug Fixes
-
-* **ui:** Alert - allow to override props ([c9f85cd](https://github.com/relative-ci/bundle-stats/commit/c9f85cde563291da7de47f7c5ddaa7f2caa1d674))
-* **ui:** Summary - pass budget data to SummaryItem ([9023a19](https://github.com/relative-ci/bundle-stats/commit/9023a19d164cf8e5c6b7c23d086b689c938c67c8))
-* **utils:** Budgets - take biggerIsBetter in consideration ([b95b956](https://github.com/relative-ci/bundle-stats/commit/b95b95637a47cc266d4e4c254cb49f1a4f19794c))
-
-
-### Features
-
-* App - add BudgetInsights ([84a6698](https://github.com/relative-ci/bundle-stats/commit/84a669806f25a1f164055ab1cbca39dc1e19987a))
-* **ui:** App - pass budgets info to Summary ([d665805](https://github.com/relative-ci/bundle-stats/commit/d665805298e26d9771c017c0bddacc80dcc19f87))
-* **ui:** BudgetInsights component ([f097f38](https://github.com/relative-ci/bundle-stats/commit/f097f388147910b6abb69fc3398d04796102aad1))
-* **ui:** BundleAssetsTotalsTable - add budgets ([1a45ce8](https://github.com/relative-ci/bundle-stats/commit/1a45ce8a63f411b95a2a9092a13d45925e692062))
-* **ui:** Icon - add check-circle icon ([8ce4c40](https://github.com/relative-ci/bundle-stats/commit/8ce4c40d92759d1a898c2311026d52d311520451))
-* **ui:** Icon - alert-circle icon ([c571e57](https://github.com/relative-ci/bundle-stats/commit/c571e57405b4533cf55067f7ba71b944552579a5))
-* **ui:** SummaryItem - budgets ([105ed0e](https://github.com/relative-ci/bundle-stats/commit/105ed0ef693c0b26c44217189d2d3cb5c4547af5))
-
-
-### Performance Improvements
-
-* **ui:** BundleAssetsTotalsTable - use memo / callback ([f027cbc](https://github.com/relative-ci/bundle-stats/commit/f027cbcb59ff3890b2bf6db6b95d23c7c898bc6b))
-
-
-
-
-
 ## [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

@@ -109,6 +109,7 @@ var Layout = function Layout(_ref) {
 
 Layout.propTypes = {
   jobs: _propTypes["default"].arrayOf(_propTypes["default"].object),
+  // eslint-disable-line react/forbid-prop-types
   version: _propTypes["default"].string
 };
 Layout.defaultProps = {
@@ -135,7 +136,8 @@ var JobsProvider = function JobsProvider(_ref2) {
 };
 
 JobsProvider.propTypes = {
-  jobs: _propTypes["default"].arrayOf(_propTypes["default"].object).isRequired
+  jobs: _propTypes["default"].arrayOf(_propTypes["default"].object).isRequired // eslint-disable-line react/forbid-prop-types
+
 };
 
 var OverviewContent = function OverviewContent() {

package/lib/app/header/header.js

@@ -36,7 +36,8 @@ var Header = function Header(_ref) {
 exports.Header = Header;
 Header.propTypes = {
   className: _propTypes["default"].string,
-  jobs: _propTypes["default"].arrayOf(_propTypes["default"].object)
+  jobs: _propTypes["default"].arrayOf(_propTypes["default"].object) // eslint-disable-line react/forbid-prop-types
+
 };
 Header.defaultProps = {
   className: '',

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

@@ -206,7 +206,8 @@ RowHeader.propTypes = {
     isChunk: _propTypes["default"].bool,
     isInitial: _propTypes["default"].bool,
     isEntry: _propTypes["default"].bool,
-    runs: _propTypes["default"].arrayOf(_propTypes["default"].object)
+    runs: _propTypes["default"].arrayOf(_propTypes["default"].object) // eslint-disable-line react/forbid-prop-types
+
   }).isRequired,
   chunks: _propTypes["default"].arrayOf(_propTypes["default"].shape({
     id: _propTypes["default"].string,

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

@@ -39,6 +39,8 @@ var _hoverCard = require("../../ui/hover-card");
 
 var _sortDropdown = require("../../ui/sort-dropdown");
 
+var _tag = require("../../ui/tag");
+
 var _toolbar = require("../../ui/toolbar");
 
 var _metricsTable = require("../metrics-table");
@@ -95,10 +97,17 @@ var RowHeader = function RowHeader(_ref) {
     return setHoverCard(true);
   }, [showHoverCard]);
   var content = (0, _react.useMemo)(function () {
-    return /*#__PURE__*/_react["default"].createElement(_fileName.FileName, {
+    return /*#__PURE__*/_react["default"].createElement("span", {
+      className: _bundleModulesModule["default"].name
+    }, row.duplicated && /*#__PURE__*/_react["default"].createElement(_tag.Tag, {
+      className: _bundleModulesModule["default"].nameTagDuplicated,
+      size: "small",
+      kind: _tag.Tag.KINDS.DANGER
+    }), /*#__PURE__*/_react["default"].createElement(_fileName.FileName, {
+      className: _bundleModulesModule["default"].nameText,
       name: row.label
-    });
-  }, [row.label]);
+    }));
+  }, [row]);
 
   if (!showHoverCard) {
     return /*#__PURE__*/_react["default"].createElement("div", {
@@ -120,7 +129,8 @@ var RowHeader = function RowHeader(_ref) {
 
 RowHeader.propTypes = {
   row: _propTypes["default"].shape({
-    label: _propTypes["default"].string
+    label: _propTypes["default"].string,
+    duplicated: _propTypes["default"].bool
   }).isRequired,
   chunks: _propTypes["default"].arrayOf(_propTypes["default"].shape({
     id: _propTypes["default"].string,
@@ -173,6 +183,10 @@ var BundleModules = function BundleModules(_ref2) {
     label: 'Changed',
     defaultValue: filters.changed,
     disabled: jobs.length <= 1
+  }), _defineProperty(_objectSpread2, _utils.MODULE_FILTERS.DUPLICATED, {
+    label: 'Duplicate',
+    defaultValue: filters[_utils.MODULE_FILTERS.DUPLICATED],
+    disabled: jobs.length <= 1
   }), _defineProperty(_objectSpread2, _utils.MODULE_SOURCE_TYPE, (_MODULE_SOURCE_TYPE = {
     label: 'Source'
   }, _defineProperty(_MODULE_SOURCE_TYPE, _utils.MODULE_FILTERS.FIRST_PARTY, {

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

@@ -12,6 +12,15 @@
   margin-right: -1px; /** collapse border */
 }
 
-.namePopover {
-  min-width: 280px;
+.nameTagDuplicated {
+  margin-right: var(--space-xxxsmall);
+  vertical-align: baseline;
+}
+
+.nameTagDuplicated::before {
+  content: 'D';
+}
+
+.nameText {
+  vertical-align: middle;
 }

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

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

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

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

package/lib/constants.js

@@ -56,7 +56,7 @@ var METRICS_WEBPACK_GENERAL = ['totalSizeByTypeALL', 'totalInitialSizeJS', 'tota
 exports.METRICS_WEBPACK_GENERAL = METRICS_WEBPACK_GENERAL;
 var METRICS_WEBPACK_ASSETS = ['assetCount', 'chunkCount'];
 exports.METRICS_WEBPACK_ASSETS = METRICS_WEBPACK_ASSETS;
-var METRICS_WEBPACK_MODULES = ['moduleCount'];
+var METRICS_WEBPACK_MODULES = ['moduleCount', 'duplicateModulesCount', 'duplicateCode'];
 exports.METRICS_WEBPACK_MODULES = METRICS_WEBPACK_MODULES;
 var METRICS_WEBPACK_PACKAGES = ['packageCount', 'duplicatePackagesCount'];
 exports.METRICS_WEBPACK_PACKAGES = METRICS_WEBPACK_PACKAGES;

package/lib-esm/app/app.js

@@ -54,6 +54,7 @@ const Layout = _ref => {
 
 Layout.propTypes = {
   jobs: PropTypes.arrayOf(PropTypes.object),
+  // eslint-disable-line react/forbid-prop-types
   version: PropTypes.string
 };
 Layout.defaultProps = {
@@ -78,7 +79,8 @@ const JobsProvider = _ref2 => {
 };
 
 JobsProvider.propTypes = {
-  jobs: PropTypes.arrayOf(PropTypes.object).isRequired
+  jobs: PropTypes.arrayOf(PropTypes.object).isRequired // eslint-disable-line react/forbid-prop-types
+
 };
 
 const OverviewContent = () => {

package/lib-esm/app/header/header.js

@@ -21,7 +21,8 @@ export const Header = _ref => {
 };
 Header.propTypes = {
   className: PropTypes.string,
-  jobs: PropTypes.arrayOf(PropTypes.object)
+  jobs: PropTypes.arrayOf(PropTypes.object) // eslint-disable-line react/forbid-prop-types
+
 };
 Header.defaultProps = {
   className: '',

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

@@ -145,7 +145,8 @@ RowHeader.propTypes = {
     isChunk: PropTypes.bool,
     isInitial: PropTypes.bool,
     isEntry: PropTypes.bool,
-    runs: PropTypes.arrayOf(PropTypes.object)
+    runs: PropTypes.arrayOf(PropTypes.object) // eslint-disable-line react/forbid-prop-types
+
   }).isRequired,
   chunks: PropTypes.arrayOf(PropTypes.shape({
     id: PropTypes.string,

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

@@ -17,6 +17,7 @@ import { FileName } from '../../ui/file-name';
 import { Filters } from '../../ui/filters';
 import { HoverCard } from '../../ui/hover-card';
 import { SortDropdown } from '../../ui/sort-dropdown';
+import { Tag } from '../../ui/tag';
 import { Toolbar } from '../../ui/toolbar';
 import { MetricsTable } from '../metrics-table';
 import { MetricsTableSearch } from '../metrics-table-search';
@@ -37,9 +38,16 @@ const RowHeader = _ref => {
 
   const [showHoverCard, setHoverCard] = useState(false);
   const handleOnMouseEnter = useCallback(() => setHoverCard(true), [showHoverCard]);
-  const content = useMemo(() => /*#__PURE__*/React.createElement(FileName, {
+  const content = useMemo(() => /*#__PURE__*/React.createElement("span", {
+    className: css.name
+  }, row.duplicated && /*#__PURE__*/React.createElement(Tag, {
+    className: css.nameTagDuplicated,
+    size: "small",
+    kind: Tag.KINDS.DANGER
+  }), /*#__PURE__*/React.createElement(FileName, {
+    className: css.nameText,
     name: row.label
-  }), [row.label]);
+  })), [row]);
 
   if (!showHoverCard) {
     return /*#__PURE__*/React.createElement("div", {
@@ -61,7 +69,8 @@ const RowHeader = _ref => {
 
 RowHeader.propTypes = {
   row: PropTypes.shape({
-    label: PropTypes.string
+    label: PropTypes.string,
+    duplicated: PropTypes.bool
   }).isRequired,
   chunks: PropTypes.arrayOf(PropTypes.shape({
     id: PropTypes.string,
@@ -111,6 +120,11 @@ export const BundleModules = _ref2 => {
       defaultValue: filters.changed,
       disabled: jobs.length <= 1
     },
+    [MODULE_FILTERS.DUPLICATED]: {
+      label: 'Duplicate',
+      defaultValue: filters[MODULE_FILTERS.DUPLICATED],
+      disabled: jobs.length <= 1
+    },
     [MODULE_SOURCE_TYPE]: {
       label: 'Source',
       [MODULE_FILTERS.FIRST_PARTY]: {

package/lib-esm/components/bundle-modules/bundle-modules.module.css

@@ -12,6 +12,15 @@
   margin-right: -1px; /** collapse border */
 }
 
-.namePopover {
-  min-width: 280px;
+.nameTagDuplicated {
+  margin-right: var(--space-xxxsmall);
+  vertical-align: baseline;
+}
+
+.nameTagDuplicated::before {
+  content: 'D';
+}
+
+.nameText {
+  vertical-align: middle;
 }

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

@@ -7,12 +7,15 @@ import { MODULE_CHUNK, MODULE_FILTERS, MODULE_FILE_TYPE, MODULE_SOURCE_TYPE, get
 import { SORT_BY_NAME, SORT_BY_SIZE, SORT_BY_DELTA } from './bundle-modules.constants';
 export const addRowSourceFlag = row => {
   const {
-    key
-  } = row;
-  const thirdParty = Boolean(key.match(MODULE_PATH_PACKAGES));
-  return { ...row,
-    thirdParty
-  };
+    key,
+    runs
+  } = row; // @NOTE Assign instead destructuring for perf reasons
+  // eslint-disable-next-line no-param-reassign
+
+  row.thirdParty = Boolean(key.match(MODULE_PATH_PACKAGES)); // eslint-disable-next-line no-param-reassign
+
+  row.duplicated = Boolean(runs.find(run => (run == null ? void 0 : run.duplicated) === true));
+  return row;
 };
 export const getCustomSort = sortBy => item => {
   if (sortBy === SORT_BY_NAME) {
@@ -33,6 +36,11 @@ export const getRowFilter = filters => row => {
   // Skip not changed rows
   if (filters[MODULE_FILTERS.CHANGED] && !row.changed) {
     return false;
+  } // Skip not duplicated rows
+
+
+  if (filters[MODULE_FILTERS.DUPLICATED] && !row.duplicated) {
+    return false;
   } // Skip not matching source type
 
 

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

@@ -5,7 +5,7 @@ function _extends() { _extends = Object.assign || function (target) { for (var i
 
 import React, { useMemo } from 'react';
 import PropTypes from 'prop-types';
-import { getModuleChunkFilters, getModuleSourceTypeFilters, getModuleFileTypeFilters } from '@bundle-stats/utils';
+import { MODULE_FILTERS, getModuleChunkFilters, getModuleSourceTypeFilters, getModuleFileTypeFilters } from '@bundle-stats/utils';
 import * as webpack from '@bundle-stats/utils/lib-esm/webpack';
 import { useRowsFilter } from '../../hooks/rows-filter';
 import { useRowsSort } from '../../hooks/rows-sort';
@@ -45,13 +45,15 @@ export const BundleModules = props => {
       changed: (jobs == null ? void 0 : jobs.length) > 1,
       ...getModuleSourceTypeFilters(true),
       ...getModuleChunkFilters(chunkIds, true),
-      ...getModuleFileTypeFilters(true)
+      ...getModuleFileTypeFilters(true),
+      [MODULE_FILTERS.DUPLICATED]: false
     },
     allEntriesFilters: {
       changed: false,
       ...getModuleSourceTypeFilters(true),
       ...getModuleChunkFilters(chunkIds, true),
-      ...getModuleFileTypeFilters(true)
+      ...getModuleFileTypeFilters(true),
+      [MODULE_FILTERS.DUPLICATED]: false
     }
   }), [jobs]);
   const searchParams = useSearchParams({

package/lib-esm/constants.js

@@ -27,5 +27,5 @@ export const ASSETS_SIZES_FILE_TYPE_MAP = FILE_TYPES.reduce((agg, fileType) => (
 }), {});
 export const METRICS_WEBPACK_GENERAL = ['totalSizeByTypeALL', 'totalInitialSizeJS', 'totalInitialSizeCSS', 'cacheInvalidation'];
 export const METRICS_WEBPACK_ASSETS = ['assetCount', 'chunkCount'];
-export const METRICS_WEBPACK_MODULES = ['moduleCount'];
+export const METRICS_WEBPACK_MODULES = ['moduleCount', 'duplicateModulesCount', 'duplicateCode'];
 export const METRICS_WEBPACK_PACKAGES = ['packageCount', 'duplicatePackagesCount'];

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@bundle-stats/ui",
-  "version": "3.4.0-alpha.1",
+  "version": "3.4.0-alpha.5",
   "description": "UI components for BundleStats projects.",
   "main": "lib/index.js",
   "module": "lib-esm/index.js",
@@ -37,7 +37,7 @@
   "homepage": "https://github.com/relative-ci/bundle-stats/blob/master/packages/ui#readme",
   "devDependencies": {
     "@babel/cli": "7.17.6",
-    "@babel/core": "7.17.5",
+    "@babel/core": "7.17.7",
     "@babel/plugin-proposal-class-properties": "7.16.7",
     "@babel/preset-env": "7.16.11",
     "@babel/preset-react": "7.16.7",
@@ -54,7 +54,7 @@
     "babel-jest": "27.5.1",
     "babel-plugin-lodash": "3.3.4",
     "babel-plugin-require-context-hook": "1.0.0",
-    "chromatic": "6.5.1",
+    "chromatic": "6.5.3",
     "classnames": "2.3.1",
     "colormap": "2.3.2",
     "core-js": "3.20.2",
@@ -67,7 +67,7 @@
     "jest": "27.5.1",
     "jest-date-mock": "1.0.8",
     "lodash": "4.17.21",
-    "postcss": "8.4.7",
+    "postcss": "8.4.12",
     "prop-types": "15.8.1",
     "react": "16.14.0",
     "react-dom": "16.14.0",
@@ -76,21 +76,21 @@
     "rimraf": "3.0.2"
   },
   "peerDependencies": {
-    "classnames": "2.2.6",
-    "core-js": "3.20.2",
-    "lodash": "4.17.21",
-    "prop-types": "15.7.2",
-    "react": "16.14.0",
-    "react-dom": "16.14.0",
-    "react-router-dom": "5.3.0"
+    "classnames": "^2.0.0",
+    "core-js": "^3.0.0",
+    "lodash": "^4.0.0",
+    "prop-types": "^15.0.0",
+    "react": "^16.0.0",
+    "react-dom": "^16.0.0",
+    "react-router-dom": "^5.0.0"
   },
   "dependencies": {
-    "@bundle-stats/utils": "^3.4.0-alpha.1",
+    "@bundle-stats/utils": "^3.4.0-alpha.5",
     "ariakit": "2.0.0-alpha.19",
     "date-fns": "2.28.0",
     "modern-css-reset": "1.4.0",
     "query-string": "7.1.1",
     "use-query-params": "1.2.3"
   },
-  "gitHead": "a7ba8010b047028c4e56e407719616fde7d8ea88"
+  "gitHead": "8cf4f784d15aed35e09a911a2fc9646a3fb9b06c"
 }

package/src/app/app.jsx

@@ -48,7 +48,7 @@ const Layout = ({ jobs, version, ...props }) => (
 );
 
 Layout.propTypes = {
-  jobs: PropTypes.arrayOf(PropTypes.object),
+  jobs: PropTypes.arrayOf(PropTypes.object), // eslint-disable-line react/forbid-prop-types
   version: PropTypes.string,
 };
 
@@ -64,7 +64,7 @@ const JobsProvider = ({ jobs, ...restProps }) => {
 };
 
 JobsProvider.propTypes = {
-  jobs: PropTypes.arrayOf(PropTypes.object).isRequired,
+  jobs: PropTypes.arrayOf(PropTypes.object).isRequired, // eslint-disable-line react/forbid-prop-types
 };
 
 const OverviewContent = () => {

package/src/app/header/header.jsx

@@ -16,7 +16,7 @@ export const Header = ({ className, jobs }) => (
 
 Header.propTypes = {
   className: PropTypes.string,
-  jobs: PropTypes.arrayOf(PropTypes.object),
+  jobs: PropTypes.arrayOf(PropTypes.object), // eslint-disable-line react/forbid-prop-types
 };
 
 Header.defaultProps = {

package/src/components/bundle-assets/bundle-assets.jsx

@@ -146,7 +146,7 @@ RowHeader.propTypes = {
     isChunk: PropTypes.bool,
     isInitial: PropTypes.bool,
     isEntry: PropTypes.bool,
-    runs: PropTypes.arrayOf(PropTypes.object),
+    runs: PropTypes.arrayOf(PropTypes.object), // eslint-disable-line react/forbid-prop-types
   }).isRequired,
   chunks: PropTypes.arrayOf(
     PropTypes.shape({

package/src/components/bundle-modules/bundle-modules.jsx

@@ -20,6 +20,7 @@ import { FileName } from '../../ui/file-name';
 import { Filters } from '../../ui/filters';
 import { HoverCard } from '../../ui/hover-card';
 import { SortDropdown } from '../../ui/sort-dropdown';
+import { Tag } from '../../ui/tag';
 import { Toolbar } from '../../ui/toolbar';
 import { MetricsTable } from '../metrics-table';
 import { MetricsTableSearch } from '../metrics-table-search';
@@ -33,7 +34,17 @@ const RowHeader = ({ row, chunks, labels, CustomComponentLink }) => {
 
   const [showHoverCard, setHoverCard] = useState(false);
   const handleOnMouseEnter = useCallback(() => setHoverCard(true), [showHoverCard]);
-  const content = useMemo(() => <FileName name={row.label} />, [row.label]);
+  const content = useMemo(
+    () => (
+      <span className={css.name}>
+        {row.duplicated && (
+          <Tag className={css.nameTagDuplicated} size="small" kind={Tag.KINDS.DANGER} />
+        )}
+        <FileName className={css.nameText} name={row.label} />
+      </span>
+    ),
+    [row],
+  );
 
   if (!showHoverCard) {
     return <div onMouseEnter={handleOnMouseEnter}>{content}</div>;
@@ -56,6 +67,7 @@ const RowHeader = ({ row, chunks, labels, CustomComponentLink }) => {
 RowHeader.propTypes = {
   row: PropTypes.shape({
     label: PropTypes.string,
+    duplicated: PropTypes.bool,
   }).isRequired,
   chunks: PropTypes.arrayOf(
     PropTypes.shape({
@@ -118,6 +130,11 @@ export const BundleModules = ({
       defaultValue: filters.changed,
       disabled: jobs.length <= 1,
     },
+    [MODULE_FILTERS.DUPLICATED]: {
+      label: 'Duplicate',
+      defaultValue: filters[MODULE_FILTERS.DUPLICATED],
+      disabled: jobs.length <= 1,
+    },
     [MODULE_SOURCE_TYPE]: {
       label: 'Source',
       [MODULE_FILTERS.FIRST_PARTY]: {

package/src/components/bundle-modules/bundle-modules.module.css

@@ -12,6 +12,15 @@
   margin-right: -1px; /** collapse border */
 }
 
-.namePopover {
-  min-width: 280px;
+.nameTagDuplicated {
+  margin-right: var(--space-xxxsmall);
+  vertical-align: baseline;
+}
+
+.nameTagDuplicated::before {
+  content: 'D';
+}
+
+.nameText {
+  vertical-align: middle;
 }

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

@@ -12,9 +12,15 @@ import {
 import { SORT_BY_NAME, SORT_BY_SIZE, SORT_BY_DELTA } from './bundle-modules.constants';
 
 export const addRowSourceFlag = (row) => {
-  const { key } = row;
-  const thirdParty = Boolean(key.match(MODULE_PATH_PACKAGES));
-  return { ...row, thirdParty };
+  const { key, runs } = row;
+
+  // @NOTE Assign instead destructuring for perf reasons
+  // eslint-disable-next-line no-param-reassign
+  row.thirdParty = Boolean(key.match(MODULE_PATH_PACKAGES));
+  // eslint-disable-next-line no-param-reassign
+  row.duplicated = Boolean(runs.find((run) => run?.duplicated === true));
+
+  return row;
 };
 
 export const getCustomSort = (sortBy) => (item) => {
@@ -39,10 +45,16 @@ export const getRowFilter = (filters) => (row) => {
     return false;
   }
 
+  // Skip not duplicated rows
+  if (filters[MODULE_FILTERS.DUPLICATED] && !row.duplicated) {
+    return false;
+  }
+
   // Skip not matching source type
   if (
     !(
-      (filters[`${MODULE_SOURCE_TYPE}.${MODULE_FILTERS.FIRST_PARTY}`] && row.thirdParty === false) ||
+      (filters[`${MODULE_SOURCE_TYPE}.${MODULE_FILTERS.FIRST_PARTY}`] &&
+        row.thirdParty === false) ||
       (filters[`${MODULE_SOURCE_TYPE}.${MODULE_FILTERS.THIRD_PARTY}`] && row.thirdParty === true)
     )
   ) {

package/src/components/bundle-modules/index.jsx

@@ -2,6 +2,7 @@ import React, { useMemo } from 'react';
 import PropTypes from 'prop-types';
 import { uniqBy, map } from 'lodash';
 import {
+  MODULE_FILTERS,
   getModuleChunkFilters,
   getModuleSourceTypeFilters,
   getModuleFileTypeFilters,
@@ -33,12 +34,14 @@ export const BundleModules = (props) => {
         ...getModuleSourceTypeFilters(true),
         ...getModuleChunkFilters(chunkIds, true),
         ...getModuleFileTypeFilters(true),
+        [MODULE_FILTERS.DUPLICATED]: false,
       },
       allEntriesFilters: {
         changed: false,
         ...getModuleSourceTypeFilters(true),
         ...getModuleChunkFilters(chunkIds, true),
         ...getModuleFileTypeFilters(true),
+        [MODULE_FILTERS.DUPLICATED]: false,
       },
     }),
     [jobs],

package/src/constants.js

@@ -53,5 +53,5 @@ export const METRICS_WEBPACK_GENERAL = [
   'cacheInvalidation',
 ];
 export const METRICS_WEBPACK_ASSETS = ['assetCount', 'chunkCount'];
-export const METRICS_WEBPACK_MODULES = ['moduleCount'];
+export const METRICS_WEBPACK_MODULES = ['moduleCount', 'duplicateModulesCount', 'duplicateCode'];
 export const METRICS_WEBPACK_PACKAGES = ['packageCount', 'duplicatePackagesCount'];