Merge pull request #4465 from relative-ci/4463-view-chunk-modules-not…

…-working-as-expected 4463 view chunk modules not working as expected
relative-ci · May 18, 2024 · 743030d · 743030d
2 parents 61672cb + a3b385b
commit 743030d
Show file tree

Hide file tree

Showing 12 changed files with 145 additions and 122 deletions.
diff --git a/packages/ui/src/components/bundle-assets/bundle-assets.jsx b/packages/ui/src/components/bundle-assets/bundle-assets.jsx
@@ -48,12 +48,11 @@ const DISPLAY_TYPE_GROUPS = {
 };
 
 const getFileTypeFilters = (filters) =>
-  Object.entries(FILE_TYPE_LABELS)
-    .map(([key, label]) => ({
-      key,
-      label,
-      defaultValue: get(filters, `${ASSET_FILE_TYPE}.${key}`, true),
-    }));
+  Object.entries(FILE_TYPE_LABELS).map(([key, label]) => ({
+  key,
+  label,
+  defaultValue: get(filters, `${ASSET_FILE_TYPE}.${key}`, true),
+}));
 
 const getFilters = ({ compareMode, filters }) => ({
   [ASSET_FILTERS.CHANGED]: {
@@ -146,29 +145,26 @@ const RowHeader = ({ row, customComponentLink: CustomComponentLink, filters, sea
 
 RowHeader.propTypes = {
   row: PropTypes.shape({
+    key: PropTypes.string,
     label: PropTypes.string,
     isNotPredictive: PropTypes.bool,
     isChunk: PropTypes.bool,
     isInitial: PropTypes.bool,
     isEntry: PropTypes.bool,
     runs: PropTypes.arrayOf(PropTypes.object), // eslint-disable-line react/forbid-prop-types
   }).isRequired,
-  chunks: PropTypes.arrayOf(
-    PropTypes.shape({
-      id: PropTypes.string,
-      name: PropTypes.string,
-    }),
-  ),
-  labels: PropTypes.arrayOf(PropTypes.string).isRequired,
-  CustomComponentLink: PropTypes.elementType.isRequired,
+  customComponentLink: PropTypes.elementType.isRequired,
+  filters: PropTypes.object.isRequired, // eslint-disable-line react/forbid-prop-types
+  search: PropTypes.string,
 };
 
 RowHeader.defaultProps = {
-  chunks: [],
+  search: '',
 };
 
 const ViewMetricsTreemap = (props) => {
-  const { metricsTableTitle, jobs, items, displayType, emptyMessage, showEntryInfo, updateSearch } = props;
+  const { metricsTableTitle, jobs, items, displayType, emptyMessage, showEntryInfo, updateSearch } =
+    props;
 
   const treeNodes = useMemo(() => {
     if (displayType.groupBy === 'folder') {
@@ -225,6 +221,7 @@ export const BundleAssets = (props) => {
   const {
     className,
     jobs,
+    chunks,
     items,
     allItems,
     updateFilters,
@@ -252,14 +249,17 @@ export const BundleAssets = (props) => {
     [jobs, filters],
   );
 
-  const metricsTableTitle = useMemo(() => (
-    <MetricsTableTitle
-      title={I18N.ASSETS}
-      info={`${items.length}/${totalRowCount}`}
-      popoverInfo={I18N.ASSETS_INFO}
-      popoverHref={config.documentation.assets}
-    />
-  ), [items, totalRowCount]);
+  const metricsTableTitle = useMemo(
+    () => (
+      <MetricsTableTitle
+        title={I18N.ASSETS}
+        info={`${items.length}/${totalRowCount}`}
+        popoverInfo={I18N.ASSETS_INFO}
+        popoverHref={config.documentation.assets}
+      />
+    ),
+    [items, totalRowCount],
+  );
 
   const renderRowHeader = useCallback(
     (row) => (
@@ -273,21 +273,24 @@ export const BundleAssets = (props) => {
     [CustomComponentLink, filters, search],
   );
 
-  const emptyMessage = useMemo(() => (
-    <EmptySet
-      resources="assets"
-      filtered={totalRowCount !== 0}
-      handleResetFilters={resetFilters}
-      handleViewAll={resetAllFilters}
-    />
-  ), [totalRowCount, resetFilters, resetAllFilters]);
+  const emptyMessage = useMemo(
+    () => (
+      <EmptySet
+        resources="assets"
+        filtered={totalRowCount !== 0}
+        handleResetFilters={resetFilters}
+        handleViewAll={resetAllFilters}
+      />
+    ),
+    [totalRowCount, resetFilters, resetAllFilters],
+  );
 
   const entryItem = useMemo(() => {
     if (!entryId) {
       return null;
     }
 
-    return allItems.find(({ key }) => key === entryId)
+    return allItems.find(({ key }) => key === entryId);
   }, [allItems, entryId]);
 
   return (
@@ -355,7 +358,7 @@ export const BundleAssets = (props) => {
           className={css.assetInfo}
           item={entryItem}
           labels={jobLabels}
-          chunks={jobs[0]?.meta?.webpack?.chunks || []}
+          chunks={chunks}
           customComponentLink={CustomComponentLink}
           onClose={hideEntryInfo}
         />
@@ -378,13 +381,12 @@ BundleAssets.propTypes = {
     PropTypes.shape({
       internalBuildNumber: PropTypes.number,
       label: PropTypes.string,
-      meta: PropTypes.shape({
-        webpack: PropTypes.shape({
-          chunks: PropTypes.array, // eslint-disable-line react/forbid-prop-types
-        }),
-      }),
     }),
   ).isRequired,
+  chunks: PropTypes.arrayOf({
+    id: PropTypes.string,
+    name: PropTypes.string,
+  }).isRequired,
   items: PropTypes.arrayOf(
     PropTypes.shape({
       key: PropTypes.string,
@@ -414,9 +416,11 @@ BundleAssets.propTypes = {
     direction: PropTypes.string,
   }).isRequired,
   updateSort: PropTypes.func.isRequired,
-  allItems: PropTypes.arrayOf(PropTypes.shape({
-    key: PropTypes.string,
-  })).isRequired,
+  allItems: PropTypes.arrayOf(
+    PropTypes.shape({
+      key: PropTypes.string,
+    }),
+  ).isRequired,
   customComponentLink: PropTypes.elementType,
   hideEntryInfo: PropTypes.func.isRequired,
   showEntryInfo: PropTypes.func.isRequired,

diff --git a/packages/ui/src/components/bundle-assets/index.jsx b/packages/ui/src/components/bundle-assets/index.jsx
@@ -11,6 +11,7 @@ import { useRowsFilter } from '../../hooks/rows-filter';
 import { useRowsSort } from '../../hooks/rows-sort';
 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 {
   addRowAssetFlags,
@@ -22,6 +23,8 @@ import {
 export const BundleAssets = (props) => {
   const { jobs, filters, search, setState, sortBy, direction, ...restProps } = props;
 
+  const { chunks } = useMemo(() => getJobsChunksData(jobs), [jobs]);
+
   const { defaultFilters, allEntriesFilters } = useMemo(
     () => ({
       defaultFilters: {
@@ -70,6 +73,7 @@ export const BundleAssets = (props) => {
   return (
     <BundleAssetsComponent
       jobs={jobs}
+      chunks={chunks}
       {...restProps}
       {...searchParams}
       {...sortParams}

diff --git a/packages/ui/src/components/bundle-modules/bundle-modules.tsx b/packages/ui/src/components/bundle-modules/bundle-modules.tsx
@@ -1,7 +1,8 @@
 import React, { useCallback, useMemo } from 'react';
 import cx from 'classnames';
-import { SECTIONS, COMPONENT } from '@bundle-stats/utils';
+import { SECTIONS, COMPONENT, type Job } from '@bundle-stats/utils';
 
+import { WebpackChunk } from '@bundle-stats/utils';
 import { SortAction } from '../../types';
 import config from '../../config.json';
 import I18N from '../../i18n';
@@ -29,7 +30,7 @@ import { MetricsTableTitle } from '../metrics-table-title';
 import { ModuleInfo } from '../module-info';
 import { generateFilterFieldsData } from './bundle-modules.utils';
 import { ModuleMetric } from './bundle-modules.constants';
-import type { Chunk, Job, ReportMetricModuleRow } from './bundle-modules.types';
+import type { ReportMetricModuleRow } from './bundle-modules.types';
 import * as I18N_MODULES from './bundle-modules.i18n';
 import css from './bundle-modules.module.css';
 import { useMetricsDisplayType } from '../../hooks/metrics-display-type';
@@ -122,7 +123,7 @@ interface BundleModulesProps extends React.ComponentProps<'div'> {
   jobs?: Array<Job>;
   items?: Array<ReportMetricModuleRow>;
   allItems?: Array<ReportMetricModuleRow>;
-  chunks?: Array<Chunk>;
+  chunks?: Array<WebpackChunk>;
 
   totalRowCount: number;
 

diff --git a/packages/ui/src/components/bundle-modules/bundle-modules.types.d.ts b/packages/ui/src/components/bundle-modules/bundle-modules.types.d.ts
@@ -1,24 +1,9 @@
-import { Module } from '@bundle-stats/utils/lib-esm/webpack/types';
-import { ReportMetricRun } from '@bundle-stats/utils/types/report/types';
-
-export interface Chunk {
-  id: string;
-  name: string;
-}
+import type { Module } from '@bundle-stats/utils/lib-esm/webpack/types';
+import type { ReportMetricRun } from '@bundle-stats/utils/types/report/types';
 
 export type ReportMetricModuleRow = {
   thirdParty: boolean;
   duplicated: boolean;
   fileType: string;
 } & ReportMetricRun &
   Module;
-
-export interface Job {
-  label: string;
-  internalBuildNumber: number;
-  meta?: {
-    webpack?: {
-      chunks?: Array<Chunk>;
-    };
-  };
-}
diff --git a/packages/ui/src/components/bundle-modules/bundle-modules.utils.ts b/packages/ui/src/components/bundle-modules/bundle-modules.utils.ts
@@ -2,12 +2,11 @@ import intersection from 'lodash/intersection';
 import get from 'lodash/get';
 import isEmpty from 'lodash/isEmpty';
 import union from 'lodash/union';
-import uniqBy from 'lodash/uniqBy';
 import orderBy from 'lodash/orderBy';
-import type { MetricRunInfo, ReportMetricRow } from '@bundle-stats/utils';
-// @ts-ignore
-import { MODULE_PATH_PACKAGES, type Module } from '@bundle-stats/utils/lib-esm/webpack';
 import {
+  type WebpackChunk,
+  type MetricRunInfo,
+  type ReportMetricRow,
   FILE_TYPE_LABELS,
   MODULE_CHUNK,
   MODULE_FILTERS,
@@ -19,10 +18,12 @@ import {
   getModuleSourceTypeFilters,
   getModuleFileTypeFilters,
 } from '@bundle-stats/utils';
+// @ts-ignore
+import { MODULE_PATH_PACKAGES, type Module } from '@bundle-stats/utils/lib-esm/webpack';
 import type { ReportMetricRun } from '@bundle-stats/utils/types/report/types';
 
 import type { FilterFieldsData, FilterGroupFieldData } from '../../types';
-import type { Chunk, Job, ReportMetricModuleRow } from './bundle-modules.types';
+import type { ReportMetricModuleRow } from './bundle-modules.types';
 import * as I18N from './bundle-modules.i18n';
 
 export const addRowFlags = (row: Module & ReportMetricRow): ReportMetricModuleRow => {
@@ -98,18 +99,6 @@ export const generateGetRowFilter =
   };
 /* eslint-enable prettier/prettier */
 
-export const extractChunkData = (jobs: Array<Job>) => {
-  const jobChunks = jobs.map((job) => job?.meta?.webpack?.chunks || []);
-  const chunks = uniqBy(jobChunks.flat(), ({ id }) => id);
-
-  const chunkIds = chunks?.map(({ id }) => id);
-
-  return {
-    chunks,
-    chunkIds,
-  };
-};
-
 export const generateFilters = (chunkIds: Array<string>, multipleJobs: boolean) => {
   const allEntriesFilters = {
     [MODULE_FILTERS.CHANGED]: false,
@@ -137,7 +126,7 @@ interface GetFiltersFormDataParams {
   /**
    * Chunk data
    */
-  chunks: Array<Chunk>;
+  chunks: Array<WebpackChunk>;
   /**
    * Compare mode
    */

diff --git a/packages/ui/src/components/bundle-modules/index.tsx b/packages/ui/src/components/bundle-modules/index.tsx
@@ -1,16 +1,17 @@
 import React, { useCallback, useMemo } from 'react';
+import type { Job } from '@bundle-stats/utils';
 // @ts-ignore
 import * as webpack from '@bundle-stats/utils/lib-esm/webpack';
 
 import type { SortAction } from '../../types';
+import { getJobsChunksData } from '../../utils/jobs';
 import { useRowsFilter } from '../../hooks/rows-filter';
 import { useRowsSort } from '../../hooks/rows-sort';
 import { useSearchParams } from '../../hooks/search-params';
 import { useEntryInfo } from '../../hooks/entry-info';
 import { BundleModules as BaseComponent } from './bundle-modules';
 import {
   addRowFlags,
-  extractChunkData,
   generateGetRowFilter,
   generateFilters,
   getCustomSort,
@@ -64,7 +65,7 @@ interface BundleModulesProps
     | 'hideEntryInfo'
     | 'showEntryInfo'
   > {
-  jobs: Array<types.Job>;
+  jobs: Array<Job>;
   filters: Record<string, boolean>;
   search?: string;
   metric?: string;
@@ -78,7 +79,7 @@ export const BundleModules = (props: BundleModulesProps) => {
 
   const [moduleMetric, setModuleMetric] = useModuleMetric({ metric, setState });
 
-  const { chunks, chunkIds } = useMemo(() => extractChunkData(jobs), [jobs]);
+  const { chunks, chunkIds } = useMemo(() => getJobsChunksData(jobs), [jobs]);
 
   const { defaultFilters, allEntriesFilters } = useMemo(
     () => generateFilters(chunkIds, jobs.length > 1),

diff --git a/packages/ui/src/utils.jsx b/packages/ui/src/utils.jsx
diff --git a/packages/ui/src/utils/colors.ts b/packages/ui/src/utils/colors.ts
@@ -0,0 +1,19 @@
+import chunk from 'lodash/chunk';
+
+import COLORS from '../chart-colors.json';
+
+export function getColors(count = 2) {
+  const chunks = chunk(COLORS, Math.round(COLORS.length / count));
+
+  return chunks.map((chunkColors, index) => {
+    if (index === 0) {
+      return chunkColors[0];
+    }
+
+    if (index === chunks.length - 1) {
+      return chunkColors[chunkColors.length - 1];
+    }
+
+    return chunkColors[Math.floor(chunkColors.length / 2)];
+  });
+}