@bundle-stats/ui 3.1.4-alpha.0 → 3.2.1-alpha.0

package/package.json

@@ -1,15 +1,18 @@
 {
   "name": "@bundle-stats/ui",
-  "version": "3.1.4-alpha.0",
+  "version": "3.2.1-alpha.0",
   "description": "UI components for BundleStats projects.",
   "main": "lib/index.js",
   "module": "lib-esm/index.js",
   "scripts": {
     "build": "npm run build-lib && npm run build-esm",
-    "build-lib": "rm -fr ./lib && babel -D src -d lib --ignore **/__tests__/** --ignore /prototypes/** --presets=@babel/preset-env,@babel/preset-react",
-    "build-esm": "rm -fr ./lib-esm && babel -D src -d lib-esm --ignore **/__tests__/** --ignore /prototypes/**",
+    "prebuild-lib": "rimraf ./lib",
+    "build-lib": "babel -D src -d lib --ignore **/__tests__/**/* --ignore /prototypes/** --presets=@babel/preset-env,@babel/preset-react",
+    "prebuild-esm": "rimraf ./lib-esm",
+    "build-esm": "babel -D src -d lib-esm --ignore **/__tests__/**/* --ignore /prototypes/**",
     "build-storybook": "npx build-storybook -c ./build/storybook",
     "generate-chart-colors": "node scripts/generate-chart-colors.js",
+    "generate-svg-sprite": "npx svg-sprite -s --si src/assets/icons/*.svg && mv symbol/svg/sprite.symbol.svg src/assets/icons.svg",
     "lint": "../../node_modules/.bin/eslint . --ext .jsx,.js",
     "start": "cross-env NODE_ENV=development start-storybook -c ./build/storybook -p 8080",
     "test": "npm run test:unit && npm run test:storyshots",
@@ -33,12 +36,9 @@
   },
   "homepage": "https://github.com/relative-ci/bundle-stats/blob/master/packages/ui#readme",
   "devDependencies": {
-    "@babel/cli": "7.15.4",
-    "@babel/core": "7.15.5",
-    "@babel/plugin-proposal-class-properties": "7.14.5",
-    "@babel/plugin-proposal-object-rest-spread": "7.15.6",
-    "@babel/plugin-proposal-private-methods": "7.14.5",
-    "@babel/preset-env": "7.15.6",
+    "@babel/cli": "7.15.7",
+    "@babel/core": "7.15.8",
+    "@babel/preset-env": "7.15.8",
     "@babel/preset-react": "7.14.5",
     "@simplyianm/babel-plugin-inline-react-svg": "1.2.0",
     "@storybook/addon-knobs": "6.3.1",
@@ -47,15 +47,13 @@
     "@storybook/react": "6.2.9",
     "babel-core": "7.0.0-bridge.0",
     "babel-jest": "26.6.3",
-    "babel-loader": "8.2.2",
     "babel-plugin-lodash": "3.3.4",
     "babel-plugin-require-context-hook": "1.0.0",
-    "chromatic": "5.9.2",
+    "chromatic": "6.0.5",
     "classnames": "2.3.1",
     "colormap": "2.3.2",
-    "core-js": "3.15.2",
+    "core-js": "3.19.0",
     "cross-env": "7.0.3",
-    "css-loader": "5.2.6",
     "enzyme": "3.11.0",
     "enzyme-adapter-react-16": "1.15.6",
     "enzyme-to-json": "3.6.2",
@@ -64,34 +62,28 @@
     "jest": "26.6.3",
     "jest-date-mock": "1.0.8",
     "lodash": "4.17.21",
-    "markdown-loader-jest": "0.1.1",
     "prop-types": "15.7.2",
     "react": "16.14.0",
     "react-dom": "16.14.0",
     "react-router-dom": "5.3.0",
     "react-test-renderer": "16.14.0",
-    "recompose": "0.30.0",
-    "stats-webpack-plugin": "0.7.0",
-    "style-loader": "2.0.0",
-    "webpack": "4.46.0",
-    "webpack-cli": "4.8.0"
+    "rimraf": "3.0.2"
   },
   "peerDependencies": {
     "classnames": "^2.2.6",
-    "core-js": "^3.9.1",
-    "lodash": "^4.17.11",
+    "core-js": "^3.16.2",
+    "lodash": "^4.17.21",
     "prop-types": "^15.7.2",
-    "react": "^16.8.5",
-    "react-dom": "^16.8.5",
-    "react-router-dom": "^5.2.0",
-    "recompose": "^0.30.0"
+    "react": "^16.14.0",
+    "react-dom": "^16.14.0",
+    "react-router-dom": "^5.3.0"
   },
   "dependencies": {
-    "@bundle-stats/utils": "^3.1.4-alpha.0",
+    "@bundle-stats/utils": "^3.2.1-alpha.0",
     "date-fns": "^2.6.0",
     "query-string": "^7.0.0",
     "reakit": "^1.3.6",
     "use-query-params": "^1.2.2"
   },
-  "gitHead": "903d336ce3f7a0bd060fbd1327b57c5783f133ff"
+  "gitHead": "fdb4b6931ebbc35ad469608725603cde5ecab9b7"
 }

package/src/app/app.jsx

@@ -181,7 +181,10 @@ const AppComponent = ({ version, jobs }) => {
               <Stack space="large">
                 {duplicatePackagesInsights && (
                   <Container>
-                    <DuplicatePackagesWarning duplicatePackagesCount={duplicatePackagesCount} />
+                    <DuplicatePackagesWarning
+                      duplicatePackagesCount={duplicatePackagesCount}
+                      showDelta={jobs.length > 1}
+                    />
                   </Container>
                 )}
                 <Container>

package/src/assets/icons/arrow.svg

@@ -0,0 +1 @@
+<svg xmlns="http://www.w3.org/2000/svg" width="64" height="64" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round" class="feather feather-arrow-down"><line x1="12" y1="5" x2="12" y2="19"></line><polyline points="19 12 12 19 5 12"></polyline></svg>

package/src/assets/icons/cancel.svg

@@ -0,0 +1 @@
+<svg xmlns="http://www.w3.org/2000/svg" width="64" height="64" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round" class="feather feather-x-circle"><circle cx="12" cy="12" r="10"></circle><line x1="15" y1="9" x2="9" y2="15"></line><line x1="9" y1="9" x2="15" y2="15"></line></svg>

package/src/assets/icons/clock.svg

@@ -0,0 +1 @@
+<svg xmlns="http://www.w3.org/2000/svg" width="64" height="64" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round" class="feather feather-clock"><circle cx="12" cy="12" r="10"></circle><polyline points="12 6 12 12 16 14"></polyline></svg>

package/src/assets/icons/close.svg

@@ -0,0 +1 @@
+<svg xmlns="http://www.w3.org/2000/svg" width="64" height="64" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round" class="feather feather-x"><line x1="18" y1="6" x2="6" y2="18"></line><line x1="6" y1="6" x2="18" y2="18"></line></svg>

package/src/assets/icons/commit.svg

@@ -0,0 +1 @@
+<svg xmlns="http://www.w3.org/2000/svg" width="64" height="64" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round" class="feather feather-git-commit"><circle cx="12" cy="12" r="4"></circle><line x1="1.05" y1="12" x2="7" y2="12"></line><line x1="17.01" y1="12" x2="22.96" y2="12"></line></svg>

package/src/assets/icons/filter.svg

@@ -0,0 +1 @@
+<svg xmlns="http://www.w3.org/2000/svg" width="64" height="64" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round" class="feather feather-bar-chart" transform="rotate(-90deg)"><line x1="12" y1="20" x2="12" y2="10"></line><line x1="18" y1="20" x2="18" y2="4"></line><line x1="6" y1="20" x2="6" y2="16"></line></svg>

package/src/assets/icons/help.svg

@@ -0,0 +1 @@
+<svg xmlns="http://www.w3.org/2000/svg" width="64" height="64" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round" class="feather feather-help-circle"><circle cx="12" cy="12" r="10"></circle><path d="M9.09 9a3 3 0 0 1 5.83 1c0 2-3 3-3 3"></path><line x1="12" y1="17" x2="12.01" y2="17"></line></svg>

package/src/assets/icons/menu.svg

@@ -0,0 +1 @@
+<svg xmlns="http://www.w3.org/2000/svg" width="64" height="64" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round" class="feather feather-menu"><line x1="3" y1="12" x2="21" y2="12"></line><line x1="3" y1="6" x2="21" y2="6"></line><line x1="3" y1="18" x2="21" y2="18"></line></svg>

package/src/assets/icons/warning.svg

@@ -0,0 +1 @@
+<svg xmlns="http://www.w3.org/2000/svg" width="64" height="64" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round" class="feather feather-alert-triangle"><path d="M10.29 3.86L1.82 18a2 2 0 0 0 1.71 3h16.94a2 2 0 0 0 1.71-3L13.71 3.86a2 2 0 0 0-3.42 0z"></path><line x1="12" y1="9" x2="12" y2="13"></line><line x1="12" y1="17" x2="12.01" y2="17"></line></svg>

package/src/assets/icons.svg

@@ -0,0 +1 @@
+<svg width="16" height="16"><symbol viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round" class="afeather afeather-arrow-down" id="arrow" xmlns="http://www.w3.org/2000/svg"><path d="M12 5v14M19 12l-7 7-7-7"/></symbol><symbol viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round" class="bfeather bfeather-x-circle" id="cancel" xmlns="http://www.w3.org/2000/svg"><circle cx="12" cy="12" r="10"/><path d="M15 9l-6 6M9 9l6 6"/></symbol><symbol viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round" class="cfeather cfeather-clock" id="clock" xmlns="http://www.w3.org/2000/svg"><circle cx="12" cy="12" r="10"/><path d="M12 6v6l4 2"/></symbol><symbol viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round" class="dfeather dfeather-x" id="close" xmlns="http://www.w3.org/2000/svg"><path d="M18 6L6 18M6 6l12 12"/></symbol><symbol viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round" class="efeather efeather-git-commit" id="commit" xmlns="http://www.w3.org/2000/svg"><circle cx="12" cy="12" r="4"/><path d="M1.05 12H7M17.01 12h5.95"/></symbol><symbol viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round" class="ffeather ffeather-bar-chart" id="filter" xmlns="http://www.w3.org/2000/svg"><path d="M12 20V10M18 20V4M6 20v-4"/></symbol><symbol viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round" class="gfeather gfeather-help-circle" id="help" xmlns="http://www.w3.org/2000/svg"><circle cx="12" cy="12" r="10"/><path d="M9.09 9a3 3 0 015.83 1c0 2-3 3-3 3M12 17h.01"/></symbol><symbol viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round" class="hfeather hfeather-menu" id="menu" xmlns="http://www.w3.org/2000/svg"><path d="M3 12h18M3 6h18M3 18h18"/></symbol><symbol viewBox="0 0 24 24" fill="currentColor" id="sort" xmlns="http://www.w3.org/2000/svg"><path d="M3 18h6v-2H3v2zM3 6v2h18V6H3zm0 7h12v-2H3v2z"/><path d="M0 0h24v24H0z" fill="none"/></symbol><symbol viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round" class="jfeather jfeather-alert-triangle" id="warning" xmlns="http://www.w3.org/2000/svg"><path d="M10.29 3.86L1.82 18a2 2 0 001.71 3h16.94a2 2 0 001.71-3L13.71 3.86a2 2 0 00-3.42 0zM12 9v4M12 17h.01"/></symbol></svg>

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

@@ -124,7 +124,7 @@ export const BundleAssets = (props) => {
     totalRowCount,
     filters,
     hasActiveFilters,
-    sortItems,
+    sortFields,
     sort,
     updateSort,
     search,
@@ -154,7 +154,7 @@ export const BundleAssets = (props) => {
         className={css.toolbar}
         renderActions={({ actionClassName }) => (
           <FlexStack space="xsmall" className={cx(css.dropdown, actionClassName)}>
-            <SortDropdown items={sortItems} {...sort} onChange={updateSort} />
+            <SortDropdown fields={sortFields} {...sort} onChange={updateSort} />
             <MetricsTableOptions
               handleViewAll={resetAllFilters}
               handleResetFilters={resetFilters}
@@ -267,7 +267,7 @@ BundleAssets.propTypes = {
     changed: PropTypes.bool,
   }).isRequired,
   hasActiveFilters: PropTypes.bool,
-  sortItems: PropTypes.shape({
+  sortFields: PropTypes.shape({
     [PropTypes.string]: PropTypes.shape({
       label: PropTypes.string,
       defaultDirection: PropTypes.bool,

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

@@ -1,17 +1,96 @@
-/**
- * Get a list of all chunkIds across assets and runs
- *
- * @param {Array<Object>} items
- * @return {Array<string|number>}
- */
-export const getAllChunkIds = (items) =>
-  items.reduce((agg, item) => {
-    const itemChunkIds = item.runs.map((run) => run?.chunkId).filter((chunkId) => typeof(chunkId) !== 'undefined');
-
-    return itemChunkIds.reduce((itemAgg, chunkId) => {
-      if (itemAgg.includes(chunkId)) {
-        return itemAgg;
-      }
-      return [...itemAgg, chunkId];
-    }, agg);
-  }, []);
+import { get } from 'lodash';
+import { ASSET_ENTRY_TYPE, ASSET_FILE_TYPE, ASSET_FILTERS, getFileType } from '@bundle-stats/utils';
+
+import { SORT_BY_NAME, SORT_BY_DELTA, SORT_BY_SIZE } from './bundle-assets.constants';
+
+export const addRowAssetFlags = (row) => {
+  const { runs } = row;
+
+  const isEntry = runs.map((run) => run?.isEntry).includes(true);
+  const isInitial = runs.map((run) => run?.isInitial).includes(true);
+  const isChunk = runs.map((run) => run?.isChunk).includes(true);
+
+  const isAsset = !(isEntry || isInitial || isChunk);
+
+  return {
+    ...row,
+    isEntry,
+    isInitial,
+    isChunk,
+    isAsset,
+  };
+};
+
+export const getIsNotPredictive = (key, runs) =>
+  runs.reduce((agg, current, index) => {
+    if (agg) {
+      return agg;
+    }
+
+    if (index + 1 === runs.length) {
+      return agg;
+    }
+
+    if (
+      current &&
+      runs[index + 1] &&
+      current.delta !== 0 &&
+      key !== current.name &&
+      current.name === runs[index + 1].name
+    ) {
+      return true;
+    }
+
+    return agg;
+  }, false);
+
+export const addRowIsNotPredictive = (row) => ({
+  ...row,
+  isNotPredictive: getIsNotPredictive(row.key, row.runs),
+});
+
+export const getRowFilter = (filters) => (item) => {
+  if (filters[ASSET_FILTERS.CHANGED] && !item.changed) {
+    return false;
+  }
+
+  if (
+    !(
+      (filters[`${ASSET_ENTRY_TYPE}.${ASSET_FILTERS.ENTRY}`] && item.isEntry) ||
+      (filters[`${ASSET_ENTRY_TYPE}.${ASSET_FILTERS.INITIAL}`] && item.isInitial) ||
+      (filters[`${ASSET_ENTRY_TYPE}.${ASSET_FILTERS.CHUNK}`] && item.isChunk) ||
+      (filters[`${ASSET_ENTRY_TYPE}.${ASSET_FILTERS.ASSET}`] && item.isAsset)
+    )
+  ) {
+    return false;
+  }
+
+  if (!filters[`${ASSET_FILE_TYPE}.${getFileType(item.key)}`]) {
+    return false;
+  }
+
+  return true;
+};
+
+export const getCustomSort = (sortId) => (item) => {
+  if (sortId === SORT_BY_NAME) {
+    return item.key;
+  }
+
+  if (sortId === SORT_BY_DELTA) {
+    return get(item, 'runs[0].deltaPercentage', 0);
+  }
+
+  if (sortId === SORT_BY_SIZE) {
+    return get(item, 'runs[0].value', 0);
+  }
+
+  return [
+    !item.isNotPredictive,
+    !item.changed,
+    !item.isInitial,
+    !item.isEntry,
+    !item.isChunk,
+    item.key,
+  ];
+};

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

@@ -0,0 +1,89 @@
+import React, { useMemo } from 'react';
+import PropTypes from 'prop-types';
+import * as webpack from '@bundle-stats/utils/lib-esm/webpack';
+import { ASSET_FILTERS } from '@bundle-stats/utils';
+import {
+  getAssetEntryTypeFilters,
+  getAssetFileTypeFilters,
+} from '@bundle-stats/utils/lib-esm/utils/component-links';
+
+import { useRowsFilter } from '../../hooks/rows-filter';
+import { useRowsSort } from '../../hooks/rows-sort';
+import { useSearchParams } from '../../hooks/search-params';
+import { BundleAssets as BundleAssetsComponent } from './bundle-assets';
+import { addRowAssetFlags, addRowIsNotPredictive, getRowFilter, getCustomSort } from './bundle-assets.utils';
+import { SORT_BY } from './bundle-assets.constants';
+
+export const BundleAssets = (props) => {
+  const { jobs, filters, search, setState, sortBy, direction, ...restProps } = props;
+
+  const { defaultFilters, allEntriesFilters } = useMemo(
+    () => ({
+      defaultFilters: {
+        [ASSET_FILTERS.CHANGED]: jobs?.length > 1,
+        ...getAssetEntryTypeFilters(true),
+        ...getAssetFileTypeFilters(true),
+      },
+      allEntriesFilters: {
+        [ASSET_FILTERS.CHANGED]: false,
+        ...getAssetEntryTypeFilters(true),
+        ...getAssetFileTypeFilters(true),
+      },
+    }),
+    [jobs],
+  );
+
+  const searchParams = useSearchParams({
+    search,
+    filters,
+    defaultFilters,
+    allEntriesFilters,
+    setState,
+  });
+
+  const { rows, totalRowCount } = useMemo(() => {
+    const result = webpack.compareBySection.assets(jobs, [addRowAssetFlags, addRowIsNotPredictive]);
+    return { rows: result, totalRowCount: result.length };
+  }, [jobs]);
+
+  const filteredRows = useRowsFilter({
+    rows,
+    searchPattern: searchParams.searchPattern,
+    filters: searchParams.filters,
+    getRowFilter,
+  });
+
+  const sortParams = useRowsSort({
+    rows: filteredRows,
+    sortFields: SORT_BY,
+    sortBy,
+    sortDirection: direction,
+    getCustomSort,
+  });
+
+  return (
+    <BundleAssetsComponent
+      jobs={jobs}
+      {...restProps}
+      {...searchParams}
+      {...sortParams}
+      totalRowCount={totalRowCount}
+    />
+  );
+};
+
+BundleAssets.propTypes = {
+  jobs: PropTypes.arrayOf(PropTypes.object).isRequired, // eslint-disable-line react/forbid-prop-types
+  filters: PropTypes.object, // eslint-disable-line react/forbid-prop-types
+  search: PropTypes.string,
+  sortBy: PropTypes.string,
+  direction: PropTypes.string,
+  setState: PropTypes.func.isRequired,
+};
+
+BundleAssets.defaultProps = {
+  filters: undefined,
+  search: undefined,
+  sortBy: undefined,
+  direction: undefined,
+};

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

@@ -90,7 +90,7 @@ export const BundleModules = ({
   resetFilters,
   resetAllFilters,
   filters,
-  sortItems,
+  sortFields,
   sort,
   updateSort,
   search,
@@ -173,7 +173,7 @@ export const BundleModules = ({
           <FlexStack space="xxsmall" className={cx(css.dropdown, actionClassName)}>
             <SortDropdown
               className={css.tableDropdown}
-              items={sortItems}
+              fields={sortFields}
               onChange={updateSort}
               {...sort}
             />
@@ -262,7 +262,7 @@ BundleModules.propTypes = {
 
   hasActiveFilters: PropTypes.bool,
 
-  sortItems: PropTypes.shape({
+  sortFields: PropTypes.shape({
     [PropTypes.string]: PropTypes.shape({
       label: PropTypes.string,
       defaultDirection: PropTypes.bool,

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

@@ -0,0 +1,101 @@
+import { useMemo } from 'react';
+import { get, intersection, merge } from 'lodash';
+import { MODULE_PATH_PACKAGES } from '@bundle-stats/utils/lib-esm/webpack';
+import {
+  MODULE_CHUNK,
+  MODULE_FILTERS,
+  MODULE_FILE_TYPE,
+  MODULE_SOURCE_TYPE,
+  getModuleSourceFileType,
+} from '@bundle-stats/utils';
+
+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 };
+};
+
+export const getCustomSort = (sortBy) => (item) => {
+  if (sortBy === SORT_BY_NAME) {
+    return item.key;
+  }
+
+  if (sortBy === SORT_BY_SIZE) {
+    return get(item, 'runs[0].value', 0);
+  }
+
+  if (sortBy === SORT_BY_DELTA) {
+    return get(item, 'runs[0].deltaPercentage', 0);
+  }
+
+  return [!item.changed, item.key];
+};
+
+export const getRowFilter = (filters) => (row) => {
+  // Skip not changed rows
+  if (filters[MODULE_FILTERS.CHANGED] && !row.changed) {
+    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.THIRD_PARTY}`] && row.thirdParty === true)
+    )
+  ) {
+    return false;
+  }
+
+  // Skip not matching source file types
+  const fileType = getModuleSourceFileType(row.key);
+  if (!filters[`${MODULE_FILE_TYPE}.${fileType}`]) {
+    return false;
+  }
+
+  return true;
+};
+
+export const useModuleFilterByChunk = ({ jobs, filters, chunkIds }) => {
+  const filteredJobs = useMemo(() => {
+    // List of chunkIds with filter value set to `true`
+    const includedChunkIds = chunkIds.reduce((agg, chunkId) => {
+      if (get(filters, `${MODULE_CHUNK}.${chunkId}`)) {
+        return [...agg, chunkId];
+      }
+
+      return agg;
+    }, []);
+
+    // If all the filters are included, return jobs as they are
+    if (includedChunkIds.length === chunkIds.length) {
+      return jobs;
+    }
+
+    const jobsWithFilteredData = jobs.map((job) => {
+      const { modules } = job?.metrics?.webpack || {};
+
+      const filteredModules = Object.entries(modules).reduce((agg, [moduleId, moduleEntry]) => {
+        const match = intersection(moduleEntry.chunkIds, includedChunkIds);
+
+        if (match.length > 0) {
+          agg[moduleId] = moduleEntry; // eslint-disable-line no-param-reassign
+        }
+
+        return agg;
+      }, {});
+
+      // Copy job data into a new object to prevent mutations of the original data
+      const newJob = merge({}, job);
+      newJob.metrics.webpack.modules = filteredModules;
+
+      return newJob;
+    });
+
+    return jobsWithFilteredData;
+  }, [jobs, filters, chunkIds]);
+
+  return filteredJobs;
+};

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

@@ -0,0 +1,107 @@
+import React, { useMemo } from 'react';
+import PropTypes from 'prop-types';
+import { uniqBy, map } from 'lodash';
+import {
+  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';
+import { useSearchParams } from '../../hooks/search-params';
+import { BundleModules as BundleModulesComponent } from './bundle-modules';
+import {
+  addRowSourceFlag,
+  getRowFilter,
+  getCustomSort,
+  useModuleFilterByChunk,
+} from './bundle-modules.utils';
+import { SORT_BY } from './bundle-modules.constants';
+
+export const BundleModules = (props) => {
+  const { jobs, filters, search, setState, sortBy, direction, ...restProps } = props;
+
+  const chunks = uniqBy(jobs.map((job) => job?.meta?.webpack?.chunks || []).flat(), ({ id }) => id);
+  const chunkIds = map(chunks, 'id');
+
+  const { defaultFilters, allEntriesFilters } = useMemo(
+    () => ({
+      defaultFilters: {
+        changed: jobs?.length > 1,
+        ...getModuleSourceTypeFilters(true),
+        ...getModuleChunkFilters(chunkIds, true),
+        ...getModuleFileTypeFilters(true),
+      },
+      allEntriesFilters: {
+        changed: false,
+        ...getModuleSourceTypeFilters(true),
+        ...getModuleChunkFilters(chunkIds, true),
+        ...getModuleFileTypeFilters(true),
+      },
+    }),
+    [jobs],
+  );
+
+  const searchParams = useSearchParams({
+    search,
+    filters,
+    defaultFilters,
+    allEntriesFilters,
+    setState,
+  });
+
+  const filteredJobsByChunkIds = useModuleFilterByChunk({
+    jobs,
+    filters: searchParams.filters,
+    chunkIds,
+  });
+
+  const { rows, totalRowCount } = useMemo(() => {
+    const result = webpack.compareBySection.modules(filteredJobsByChunkIds, [addRowSourceFlag]);
+    return { rows: result, totalRowCount: result.length };
+  }, [filteredJobsByChunkIds]);
+
+  const filteredRows = useRowsFilter({
+    rows,
+    searchPattern: searchParams.searchPattern,
+    filters: searchParams.filters,
+    getRowFilter,
+  });
+
+  const sortParams = useRowsSort({
+    rows: filteredRows,
+    sortFields: SORT_BY,
+    sortBy,
+    sortDirection: direction,
+    getCustomSort,
+  });
+
+  return (
+    <BundleModulesComponent
+      jobs={jobs}
+      chunks={chunks}
+      {...restProps}
+      {...searchParams}
+      {...sortParams}
+      totalRowCount={totalRowCount}
+    />
+  );
+};
+
+BundleModules.propTypes = {
+  jobs: PropTypes.arrayOf(PropTypes.object).isRequired, // eslint-disable-line react/forbid-prop-types
+  filters: PropTypes.object, // eslint-disable-line react/forbid-prop-types
+  search: PropTypes.string,
+  sortBy: PropTypes.string,
+  direction: PropTypes.string,
+  setState: PropTypes.func.isRequired,
+};
+
+BundleModules.defaultProps = {
+  filters: undefined,
+  search: undefined,
+  sortBy: undefined,
+  direction: undefined,
+};