Assets chunks filter

packages/ui/src/components/asset-info/asset-info.tsx

@@ -2,15 +2,15 @@ import type { ComponentProps, ElementType, ReactNode } from 'react';
 import React, { useMemo } from 'react';
 import cx from 'classnames';
 import noop from 'lodash/noop';
+import type { WebpackChunk } from '@bundle-stats/utils';
 import {
   FILE_TYPE_LABELS,
-  MetricRunInfo,
   getBundleModulesByChunk,
   getBundleAssetsByEntryType,
   getBundleAssetsFileTypeComponentLink,
   getModuleFileType,
+  getBundleAssetsByChunk,
 } from '@bundle-stats/utils';
-import type { AssetMetricRun, MetaChunk } from '@bundle-stats/utils/types/webpack';
 
 import type { ReportMetricAssetRow } from '../../types';
 import { FlexStack } from '../../layout/flex-stack';
@@ -21,31 +21,24 @@ import css from './asset-info.module.css';
 
 interface ChunkModulesLinkProps {
   as: ElementType;
-  chunks: Array<MetaChunk>;
-  chunkId: string;
+  chunk: WebpackChunk;
+  chunkIds: Array<string>;
   name: string;
 }
 
 const ChunkModulesLink = ({
   as: Component,
-  chunks,
-  chunkId,
+  chunk,
+  chunkIds,
   name,
   onClick,
 }: ChunkModulesLinkProps & ComponentProps<'a'>) => {
-  const chunk = chunks?.find(({ id }) => id === chunkId);
-
-  if (!chunk) {
-    return null;
-  }
-
-  const chunkIds = chunks.map(({ id }) => id);
   const fileType = getModuleFileType(name);
 
   return (
     <Component
       className={css.viewModules}
-      {...getBundleModulesByChunk(chunkIds, chunkId, fileType)}
+      {...getBundleModulesByChunk(chunkIds, chunk.id, fileType)}
       onClick={onClick}
     >
       View chunk modules
@@ -74,17 +67,8 @@ const AssetRunName = (props: AssetRunNameProps) => {
 };
 
 interface AssetInfoProps {
-  item: {
-    label: string;
-    changed?: boolean;
-    isChunk?: boolean;
-    isEntry?: boolean;
-    isInitial?: boolean;
-    isNotPredictive?: boolean;
-    fileType?: string;
-    runs: Array<AssetMetricRun & MetricRunInfo>;
-  };
-  chunks?: Array<MetaChunk>;
+  item: ReportMetricAssetRow;
+  chunks?: Array<WebpackChunk>;
   labels: Array<string>;
   customComponentLink?: ElementType;
   onClose: () => void;
@@ -154,6 +138,10 @@ export const AssetInfo = (props: AssetInfoProps & ComponentProps<'div'>) => {
   }, [item]);
 
   const fileTypeLabel = FILE_TYPE_LABELS[item.fileType as keyof typeof FILE_TYPE_LABELS];
+  const currentChunk = chunks?.find(
+    (chunk) => currentRun?.chunkId && currentRun.chunkId === chunk.id,
+  );
+  const chunkIds: Array<string> = chunks?.filter(Boolean).map((chunk) => chunk.id) || [];
 
   return (
     <EntryInfo
@@ -179,12 +167,27 @@ export const AssetInfo = (props: AssetInfoProps & ComponentProps<'div'>) => {
         </EntryInfo.Meta>
       )}
 
-      {currentRun?.chunkId && chunks && (
+      {currentChunk && (
+        <EntryInfo.Meta
+          label="Chunk"
+          tooltip="The bundler's chunk from witch the assets was originated"
+        >
+          <EntryInfoMetaLink
+            as={CustomComponentLink}
+            {...getBundleAssetsByChunk(chunkIds, currentRun.chunkId)}
+            onClick={onClick}
+          >
+            {currentChunk.name}
+          </EntryInfoMetaLink>
+        </EntryInfo.Meta>
+      )}
+
+      {currentChunk && (
         <div>
           <ChunkModulesLink
             as={CustomComponentLink}
-            chunks={chunks}
-            chunkId={currentRun?.chunkId}
+            chunk={currentChunk}
+            chunkIds={chunkIds}
             name={currentRun?.name}
             onClick={onClick}
           />

packages/ui/src/components/bundle-assets/__tests__/add-metric-report-asset-row-data.ts

@@ -41,7 +41,7 @@ describe('BundleAssets / addMetricReportAssetRowData', () => {
     });
   });
 
-  test('should add add data when baseline run is null', () => {
+  test('should add data when baseline run is null', () => {
     expect(
       addMetricReportAssetRowData({
         key: 'assets/main.js',
@@ -83,7 +83,7 @@ describe('BundleAssets / addMetricReportAssetRowData', () => {
     });
   });
 
-  test('should add add data when curent run is null', () => {
+  test('should add data when current run is null', () => {
     expect(
       addMetricReportAssetRowData({
         key: 'assets/main.js',

packages/ui/src/components/bundle-assets/bundle-assets.stories.jsx → packages/ui/src/components/bundle-assets/bundle-assets.stories.tsx

@@ -8,6 +8,8 @@ import {
 } from '@bundle-stats/utils';
 import merge from 'lodash/merge';
 import set from 'lodash/set';
+import type { Meta, StoryObj } from '@storybook/react';
+import { action } from '@storybook/addon-actions';
 
 /* eslint-disable import/no-relative-packages */
 import baselineStats from '../../../../../fixtures/webpack-stats.baseline.json';
@@ -20,52 +22,66 @@ const JOBS = createJobs([{ webpack: currentStats }, { webpack: baselineStats }])
 const [currentJob, baselineJob] = JOBS;
 const setState = (params) => console.info(params);
 
-export default {
+const meta: Meta<typeof BundleAssets> = {
   title: 'Components/BundleAssets',
   component: BundleAssets,
   decorators: [getWrapperDecorator()],
+  args: {
+    setState: action('STATE'),
+  },
 };
 
-export const Default = () => <BundleAssets jobs={[baselineJob]} setState={setState} />;
+export default meta;
 
-export const MultipleJobs = () => <BundleAssets jobs={JOBS} setState={setState} />;
+type Story = StoryObj<typeof BundleAssets>;
 
-export const CustomFilters = () => (
-  <BundleAssets
-    jobs={JOBS}
-    filters={{
+export const Default: Story = {
+  args: {
+    jobs: [baselineJob],
+  },
+};
+
+export const MultipleJobs: Story = {
+  args: {
+    jobs: JOBS,
+  },
+};
+
+export const CustomFilters: Story = {
+  args: {
+    jobs: JOBS,
+    filters: {
       [`${ASSET_ENTRY_TYPE}.${ASSET_FILTERS.ENTRY}`]: true,
       [`${ASSET_FILE_TYPE}.${FILE_TYPE_JS}`]: true,
-    }}
-    setState={setState}
-  />
-);
-
-const JOBS_EMPTY_BASELINE = createJobs([{ webpack: currentStats }, {}]);
+    },
+  },
+};
 
-export const EmptyBaseline = () => <BundleAssets jobs={JOBS_EMPTY_BASELINE} setState={setState} />;
+export const EmptyBaseline: Story = {
+  args: {
+    jobs: createJobs([{ webpack: currentStats }, {}]),
+  },
+};
 
-export const NoAssets = () => (
-  <BundleAssets
-    jobs={JOBS.map((job) => set(merge({}, job), 'metrics.webpack.assets', {}))}
-    setState={setState}
-  />
-);
+export const NoAssets: Story = {
+  args: {
+    jobs: JOBS.map((job) => set(merge({}, job), 'metrics.webpack.assets', {})),
+  },
+};
 
-export const EmptyFilteredData = () => (
-  <BundleAssets
-    jobs={[
+export const EmptyFilteredData: Story = {
+  args: {
+    jobs: [
       set(merge({}, currentJob), 'metrics.webpack.assets', { 'main.js': { value: 100 } }),
       set(merge({}, baselineJob), 'metrics.webpack.assets', { 'main.js': { value: 100 } }),
-    ]}
-    search="vendors"
-    setState={setState}
-  />
-);
+    ],
+    search: 'vendors',
+  },
+};
 
-export const NotPredictive = () => (
-  <BundleAssets
-    jobs={[
+export const NotPredictive: Story = {
+  args: {
+    jobs: [
       set(merge({}, currentJob), 'metrics.webpack.assets', {
         'static/js/not-predictive.js': {
           name: 'static/js/not-predictive.93191a1.js',
@@ -78,7 +94,6 @@ export const NotPredictive = () => (
           value: 2988,
         },
       }),
-    ]}
-    setState={setState}
-  />
-);
+    ],
+  },
+};