Merge pull request #3637 from relative-ci/fix-missing-entry-info

Fix BundleModules filters
relative-ci · Jul 26, 2023 · 3b8d634 · 3b8d634
2 parents fe17dfb + 782fd00
commit 3b8d634
Show file tree

Hide file tree

Showing 5 changed files with 93 additions and 101 deletions.
diff --git a/packages/ui/src/components/bundle-assets/bundle-assets.jsx b/packages/ui/src/components/bundle-assets/bundle-assets.jsx
@@ -177,6 +177,8 @@ export const BundleAssets = (props) => {
     hideEntryInfo,
   } = props;
 
+  const jobLabels = jobs?.map((job) => job?.label);
+
   const dropdownFilters = useMemo(
     () => getFilters({ compareMode: jobs?.length > 1, filters }),
     [jobs, filters],
@@ -212,6 +214,14 @@ export const BundleAssets = (props) => {
     />
   ), [totalRowCount, resetFilters, resetAllFilters]);
 
+  const entryItem = useMemo(() => {
+    if (!entryId) {
+      return null;
+    }
+
+    return allItems.find(({ key }) => key === entryId)
+  }, [allItems, entryId]);
+
   return (
     <>
       <section className={cx(css.root, className)}>
@@ -255,11 +265,11 @@ export const BundleAssets = (props) => {
         </main>
       </section>
 
-      {entryId && (
+      {entryItem && (
         <AssetInfo
           className={css.assetInfo}
-          item={allItems.find(({ key }) => key === entryId)}
-          labels={jobs?.map(({ label }) => label)}
+          item={entryItem}
+          labels={jobLabels}
           chunks={jobs[0]?.meta?.webpack?.chunks || []}
           customComponentLink={CustomComponentLink}
           onClose={hideEntryInfo}

diff --git a/packages/ui/src/components/bundle-modules/bundle-modules.jsx b/packages/ui/src/components/bundle-modules/bundle-modules.jsx
@@ -135,6 +135,8 @@ export const BundleModules = ({
 }) => {
   const rootClassName = cx(css.root, className);
 
+  const jobLabels = jobs?.map((job) => job?.label);
+
   const dropdownFilters = useMemo(
     () => getFilters({ filters, chunks, compareMode: jobs.length > 1 }),
     [jobs, filters, chunks]
@@ -170,6 +172,14 @@ export const BundleModules = ({
     />
   ), [totalRowCount, resetFilters, resetAllFilters]);
 
+  const entryItem = useMemo(() => {
+    if (!entryId) {
+      return null;
+    }
+
+    return allItems.find(({ key }) => key === entryId)
+  }, [allItems, entryId]);
+
   return (
     <>
       <div className={rootClassName}>
@@ -212,13 +222,13 @@ export const BundleModules = ({
           updateSort={updateSort}
         />
       </div>
-      {entryId && (
+      {entryItem && (
         <ModuleInfo
           className={css.moduleInfo}
-          item={allItems.find(({ key }) => key === entryId)}
+          item={entryItem}
           chunks={chunks}
           chunkIds={chunks?.map(({ id }) => id)}
-          labels={jobs.map(({ label }) => label)}
+          labels={jobLabels}
           customComponentLink={CustomComponentLink}
           onClose={hideEntryInfo}
         />

diff --git a/packages/ui/src/components/bundle-modules/bundle-modules.utils.js b/packages/ui/src/components/bundle-modules/bundle-modules.utils.js
@@ -1,5 +1,6 @@
 import { useMemo } from 'react';
 import intersection from 'lodash/intersection';
+import union from 'lodash/union';
 import merge from 'lodash/merge';
 import get from 'lodash/get';
 import { MODULE_PATH_PACKAGES } from '@bundle-stats/utils/lib-esm/webpack';
@@ -28,78 +29,53 @@ export const addRowFlags = (row) => {
 
 export const getCustomSort = (item) => [!item.changed, item.key];
 
-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;
-  }
+export const generateGetRowFilter =
+  ({ chunkIds }) =>
+  (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 duplicated rows
+    if (filters[MODULE_FILTERS.DUPLICATED] && !row.duplicated) {
+      return false;
+    }
 
-  // Skip not matching source file types
-  if (!filters[`${MODULE_FILE_TYPE}.${row.fileType}`]) {
-    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;
+    }
 
-  return true;
-};
+    // Skip not matching source file types
+    if (!filters[`${MODULE_FILE_TYPE}.${row.fileType}`]) {
+      return false;
+    }
 
-export const useModuleFilterByChunk = ({ jobs, filters, chunkIds }) => {
-  const filteredJobs = useMemo(() => {
     // List of chunkIds with filter value set to `true`
-    const includedChunkIds = chunkIds.reduce((agg, chunkId) => {
+    const checkedChunkIds = 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?.modules;
+    // Filter if any of the chunkIds are checked
+    if (checkedChunkIds.length !== chunkIds.length) {
+      const rowRunsChunkIds = row?.runs?.map((run) => run?.chunkIds || []) || [];
+      const rowChunkIds = union(...rowRunsChunkIds);
+      const matchedChunkIds = intersection(rowChunkIds, checkedChunkIds);
 
-      if (!modules) {
-        return job;
-      }
-
-      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 matchedChunkIds.length > 0;
+    }
 
-  return filteredJobs;
-};
+    return true;
+  };
diff --git a/packages/ui/src/components/bundle-modules/index.jsx b/packages/ui/src/components/bundle-modules/index.jsx
@@ -13,31 +13,23 @@ 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 {
-  addRowFlags,
-  getRowFilter,
-  getCustomSort,
-  useModuleFilterByChunk,
-} from './bundle-modules.utils';
+import { addRowFlags, generateGetRowFilter, getCustomSort } from './bundle-modules.utils';
 
 export const BundleModules = (props) => {
   const { jobs, filters, search, setState, sortBy, direction, ...restProps } = props;
 
-  const { chunks, chunkIds } = useMemo(
-    () => {
-      const bundleChunks = uniqBy(
-        jobs.map((job) => job?.meta?.webpack?.chunks || []).flat(),
-        ({ id }) => id
-      );
-      const bundleChunkIds = bundleChunks?.map(({ id }) => id);
+  const { chunks, chunkIds } = useMemo(() => {
+    const bundleChunks = uniqBy(
+      jobs.map((job) => job?.meta?.webpack?.chunks || []).flat(),
+      ({ id }) => id,
+    );
+    const bundleChunkIds = bundleChunks?.map(({ id }) => id);
 
-      return {
-        chunks: bundleChunks,
-        chunkIds: bundleChunkIds,
-      };
-    },
-    [jobs],
-  );
+    return {
+      chunks: bundleChunks,
+      chunkIds: bundleChunkIds,
+    };
+  }, [jobs]);
 
   const { defaultFilters, allEntriesFilters } = useMemo(
     () => ({
@@ -67,22 +59,16 @@ export const BundleModules = (props) => {
     setState,
   });
 
-  const filteredJobsByChunkIds = useModuleFilterByChunk({
-    jobs,
-    filters: searchParams.filters,
-    chunkIds,
-  });
-
   const { rows, totalRowCount } = useMemo(() => {
-    const result = webpack.compareBySection.modules(filteredJobsByChunkIds, [addRowFlags]);
+    const result = webpack.compareBySection.modules(jobs, [addRowFlags]);
     return { rows: result, totalRowCount: result.length };
-  }, [filteredJobsByChunkIds]);
+  }, [jobs]);
 
   const filteredRows = useRowsFilter({
     rows,
     searchPattern: searchParams.searchPattern,
     filters: searchParams.filters,
-    getRowFilter,
+    getRowFilter: generateGetRowFilter({ chunkIds }),
   });
 
   const sortParams = useRowsSort({

diff --git a/packages/ui/src/components/bundle-packages/bundle-packages.jsx b/packages/ui/src/components/bundle-packages/bundle-packages.jsx
@@ -127,6 +127,8 @@ export const BundlePackages = (props) => {
     hideEntryInfo,
   } = props;
 
+  const jobLabels = jobs?.map((job) => job?.label);
+
   const dropdownFilters = useMemo(
     () => getDropdownFilters({ compareMode: jobs?.length > 1, filters }),
     [jobs, filters],
@@ -148,13 +150,13 @@ export const BundlePackages = (props) => {
     (row) => (
       <RowHeader
         row={row}
-        labels={jobs.map((job) => job?.label)}
+        labels={jobLabels}
         CustomComponentLink={CustomComponentLink}
         filters={filters}
         search={search}
       />
     ),
-    [CustomComponentLink, jobs, filters, search],
+    [CustomComponentLink, jobLabels, filters, search],
   );
 
   const emptyMessage = useMemo(
@@ -169,6 +171,14 @@ export const BundlePackages = (props) => {
     [totalRowCount, resetFilters, resetAllFilters],
   );
 
+  const entryItem = useMemo(() => {
+    if (!entryId) {
+      return null;
+    }
+
+    return allItems.find(({ key }) => key === entryId)
+  }, [allItems, entryId]);
+
   return (
     <>
       <section className={cx(css.root, className)}>
@@ -211,11 +221,11 @@ export const BundlePackages = (props) => {
           />
         </main>
       </section>
-      {entryId && (
+      {entryItem && (
         <PackageInfo
           className={css.packageInfo}
-          item={allItems.find(({ key }) => key === entryId)}
-          labels={jobs?.map(({ label }) => label)}
+          item={entryItem}
+          labels={jobLabels}
           customComponentLink={CustomComponentLink}
           onClose={hideEntryInfo}
         />