Assets chunks filter

packages/ui/src/components/bundle-assets/bundle-assets.jsx

@@ -2,8 +2,11 @@ import React, { useCallback, useMemo, useState } from 'react';
 import PropTypes from 'prop-types';
 import cx from 'classnames';
 import get from 'lodash/get';
+import isEmpty from 'lodash/isEmpty';
+import orderBy from 'lodash/orderBy';
 import escapeRegExp from 'lodash/escapeRegExp';
 import {
+  ASSET_CHUNK,
   ASSET_ENTRY_TYPE,
   ASSET_FILE_TYPE,
   ASSET_FILTERS,
@@ -49,13 +52,31 @@ const getFileTypeFilters = (filters) =>
   defaultValue: get(filters, `${ASSET_FILE_TYPE}.${key}`, true),
 }));
 
-const getFilters = ({ compareMode, filters }) => ({
-  [ASSET_FILTERS.CHANGED]: {
-    label: 'Changed',
-    defaultValue: filters[ASSET_FILTERS.CHANGED],
-    disabled: !compareMode,
-  },
-  [ASSET_ENTRY_TYPE]: {
+const getFilters = ({ compareMode, filters, chunks }) => {
+  const result = {
+    [ASSET_FILTERS.CHANGED]: {
+      label: 'Changed',
+      defaultValue: filters[ASSET_FILTERS.CHANGED],
+      disabled: !compareMode,
+    },
+  };
+
+  if (!isEmpty(chunks)) {
+    const chunksFilter = { label: 'Chunks', children: [] };
+    const chunksOrderedByName = orderBy(chunks, 'name');
+
+    chunksOrderedByName.forEach((chunk) => {
+      chunksFilter.children.push({
+        key: chunk.id,
+        label: chunk.name,
+        defaultValue: filters[`${ASSET_CHUNK}.${chunk.id}`] ?? true,
+      });
+    });
+
+    result[ASSET_CHUNK] = chunksFilter;
+  }
+
+  result[ASSET_ENTRY_TYPE] = {
     label: 'Type',
     children: [
       {
@@ -79,12 +100,15 @@ const getFilters = ({ compareMode, filters }) => ({
         defaultValue: get(filters, `${ASSET_ENTRY_TYPE}.${ASSET_FILTERS.OTHER}`, true),
       },
     ],
-  },
-  [ASSET_FILE_TYPE]: {
+  };
+
+  result[ASSET_FILE_TYPE] = {
     label: 'File type',
     children: getFileTypeFilters(filters),
-  },
-});
+  };
+
+  return result;
+};
 
 const ViewMetricsTreemap = (props) => {
   const {
@@ -187,8 +211,8 @@ export const BundleAssets = (props) => {
 
   const [displayType, setDisplayType] = useMetricsDisplayType(DISPLAY_TYPE_GROUPS);
 
-  const dropdownFilters = useMemo(
-    () => getFilters({ compareMode: jobs?.length > 1, filters }),
+  const filterFieldsData = useMemo(
+    () => getFilters({ compareMode: jobs?.length > 1, filters, chunks }),
     [jobs, filters],
   );
 
@@ -287,7 +311,7 @@ export const BundleAssets = (props) => {
             />
             <Filters
               className={css.toolbarFilters}
-              filters={dropdownFilters}
+              filters={filterFieldsData}
               hasActiveFilters={hasActiveFilters}
               onChange={updateFilters}
             />

packages/ui/src/components/bundle-assets/bundle-assets.utils.js

@@ -4,7 +4,14 @@
  * @type {import('../../types').ReportMetricAssetRowMetaStatus} ReportMetricAssetRowFlagStatus
  */
 
-import { ASSET_ENTRY_TYPE, ASSET_FILE_TYPE, ASSET_FILTERS, getFileType } from '@bundle-stats/utils';
+import intersection from 'lodash/intersection';
+import {
+  ASSET_CHUNK,
+  ASSET_ENTRY_TYPE,
+  ASSET_FILE_TYPE,
+  ASSET_FILTERS,
+  getFileType,
+} from '@bundle-stats/utils';
 
 /**
  * Check if the asset cache is not predictive
@@ -116,28 +123,50 @@ export const addMetricReportAssetRowData = (row) => {
   };
 };
 
-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.OTHER}`] && item.isAsset)
-    )
-  ) {
-    return false;
-  }
-
-  if (!filters[`${ASSET_FILE_TYPE}.${item.fileType}`]) {
-    return false;
-  }
+/* eslint-disable prettier/prettier */
+export const generateGetRowFilter =
+  ({ chunkIds }) => (filters) => {
+    // List of chunkIds with filter value set to `true`
+    const checkedChunkIds = [];
+
+    chunkIds.forEach((chunkId) => {
+      if (filters[`${ASSET_CHUNK}.${chunkId}`]) {
+        checkedChunkIds.push(chunkId);
+      }
+    });
+
+    const hasChunkFilters =
+      checkedChunkIds.length > 0 && checkedChunkIds.length !== chunkIds.length;
+
+    return (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.OTHER}`] && item.isAsset)
+        )
+      ) {
+        return false;
+      }
+
+      if (!filters[`${ASSET_FILE_TYPE}.${item.fileType}`]) {
+        return false;
+      }
+
+      // Filter if any of the chunkIds are checked
+      if (hasChunkFilters) {
+        const rowRunsChunkIds = item?.runs?.map((run) => run?.chunkId) || [];
+        return intersection(rowRunsChunkIds, checkedChunkIds).length > 0;
+      }
 
-  return true;
-};
+      return true;
+    };
+  };
 
 export const getCustomSort = (item) => [
   !item.isNotPredictive,

packages/ui/src/components/bundle-assets/index.jsx

@@ -13,12 +13,16 @@ import { useSearchParams } from '../../hooks/search-params';
 import { useEntryInfo } from '../../hooks/entry-info';
 import { getJobsChunksData } from '../../utils/jobs';
 import { BundleAssets as BundleAssetsComponent } from './bundle-assets';
-import { addMetricReportAssetRowData, getRowFilter, getCustomSort } from './bundle-assets.utils';
+import {
+  addMetricReportAssetRowData,
+  generateGetRowFilter,
+  getCustomSort,
+} from './bundle-assets.utils';
 
 export const BundleAssets = (props) => {
   const { jobs, filters, search, setState, sortBy, direction, ...restProps } = props;
 
-  const { chunks } = useMemo(() => getJobsChunksData(jobs), [jobs]);
+  const { chunks, chunkIds } = useMemo(() => getJobsChunksData(jobs), [jobs]);
 
   const { defaultFilters, allEntriesFilters } = useMemo(
     () => ({
@@ -53,7 +57,7 @@ export const BundleAssets = (props) => {
     rows,
     searchPattern: searchParams.searchPattern,
     filters: searchParams.filters,
-    getRowFilter,
+    getRowFilter: generateGetRowFilter({ chunkIds }),
   });
 
   const sortParams = useRowsSort({

packages/utils/src/config/component-links.js

@@ -1,4 +1,5 @@
 export const ASSET_ENTRY_TYPE = 'et';
+export const ASSET_CHUNK = 'c';
 export const ASSET_FILE_TYPE = 'ft';
 export const MODULE_CHUNK = 'c';
 export const MODULE_FILE_TYPE = 'mft';

packages/utils/src/utils/component-links.ts

@@ -24,7 +24,6 @@ import {
   MODULE_FILE_TYPE,
   MODULE_FILTERS,
   MODULE_SOURCE_TYPE,
-  MODULE_SOURCE_TYPE_LABELS,
   PACKAGE_FILTERS,
   SECTIONS,
 } from '../config/component-links';