Merge pull request #4593 from relative-ci/module-side-panel-show-all-…

…module-information-rltv-959

ModuleInfo - show all information

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

@@ -126,14 +126,17 @@ export const AssetInfo = (props: AssetInfoProps & React.ComponentProps<'div'>) =
 
   return (
     <EntryInfo
-      item={item}
+      item={item as any}
       labels={labels}
       tags={tags}
       onClose={onClose}
       className={cx(css.root, className)}
     >
       {item.fileType && (
-        <EntryInfo.Meta label="File type">
+        <EntryInfo.Meta
+          label="File type"
+          tooltip="Asset file type: JS, CSS, image, media, fonts, HTML, or other"
+        >
           <EntryInfoMetaLink
             as={CustomComponentLink}
             {...getBundleAssetsFileTypeComponentLink(item.fileType, fileTypeLabel)}

packages/ui/src/components/bundle-modules/bundle-modules.tsx

@@ -1,13 +1,13 @@
 import React, { useCallback, useMemo } from 'react';
 import cx from 'classnames';
-import { SECTIONS, COMPONENT, type Job } from '@bundle-stats/utils';
+import { SECTIONS, COMPONENT, type Job, ReportMetricRow } from '@bundle-stats/utils';
 import escapeRegExp from 'lodash/escapeRegExp';
-
 import { WebpackChunk } from '@bundle-stats/utils';
-import { SortAction } from '../../types';
+
+import type { ReportMetricModuleRow, SortAction } from '../../types';
 import config from '../../config.json';
 import I18N from '../../i18n';
-import { MetricsDisplayType } from '../../constants';
+import { MetricsDisplayType, ModuleSizeMetric, ModuleSizeMetrics } from '../../constants';
 import { Box } from '../../layout/box';
 import { FlexStack } from '../../layout/flex-stack';
 import { Stack } from '../../layout/stack';
@@ -30,8 +30,6 @@ import { MetricsDisplaySelector } from '../metrics-display-selector';
 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 { 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';
@@ -41,7 +39,7 @@ const DISPLAY_TYPE_GROUPS = {
 };
 
 interface RowHeaderProps {
-  row: ReportMetricModuleRow;
+  row: ReportMetricRow;
   filters?: any;
   search?: string;
   moduleMetric?: string;
@@ -51,18 +49,25 @@ interface RowHeaderProps {
 const RowHeader = (props: RowHeaderProps) => {
   const { row, filters, search, moduleMetric, customComponentLink: CustomComponentLink } = props;
 
+  const moduleRow = row as ReportMetricModuleRow;
+
   return (
     <CustomComponentLink
       section={SECTIONS.MODULES}
       params={{
-        [COMPONENT.BUNDLE_MODULES]: { filters, search, entryId: row.key, metric: moduleMetric },
+        [COMPONENT.BUNDLE_MODULES]: {
+          filters,
+          search,
+          entryId: moduleRow.key,
+          metric: moduleMetric,
+        },
       }}
       className={css.name}
     >
-      {row.duplicated && (
+      {moduleRow.duplicated && (
         <Tag className={css.nameTagDuplicated} size="small" kind={Tag.KINDS.DANGER} />
       )}
-      <FileName className={css.nameText} name={row.label} />
+      <FileName className={css.nameText} name={moduleRow.label} />
     </CustomComponentLink>
   );
 };
@@ -162,8 +167,8 @@ interface BundleModulesProps extends React.ComponentProps<'div'> {
   hideEntryInfo: () => void;
   showEntryInfo: (entryId: string) => void;
 
-  moduleMetric: ModuleMetric;
-  setModuleMetric: (newValue: ModuleMetric) => void;
+  moduleMetric: ModuleSizeMetric;
+  setModuleMetric: (newValue: ModuleSizeMetric) => void;
 
   customComponentLink: React.ElementType;
 }
@@ -215,7 +220,7 @@ export const BundleModules = (props: BundleModulesProps) => {
   );
 
   const renderRowHeader = useCallback(
-    (row: ReportMetricModuleRow) => (
+    (row: ReportMetricRow) => (
       <RowHeader
         row={row}
         filters={filters}
@@ -286,30 +291,36 @@ export const BundleModules = (props: BundleModulesProps) => {
             <ControlGroup as="nav">
               <Button
                 outline
-                active={moduleMetric === ModuleMetric.TOTAL_SIZE}
+                active={moduleMetric === ModuleSizeMetric.TOTAL_SIZE}
                 size="small"
                 type="button"
-                onClick={() => setModuleMetric(ModuleMetric.TOTAL_SIZE)}
+                onClick={() => setModuleMetric(ModuleSizeMetric.TOTAL_SIZE)}
               >
-                <Tooltip title="Module total size (including duplicate modules)">Module total size</Tooltip>
+                <Tooltip title={ModuleSizeMetrics[ModuleSizeMetric.TOTAL_SIZE].tooltip}>
+                  {ModuleSizeMetrics[ModuleSizeMetric.TOTAL_SIZE].label}
+                </Tooltip>
               </Button>
               <Button
                 outline
-                active={moduleMetric === ModuleMetric.DUPLICATE_SIZE}
+                active={moduleMetric === ModuleSizeMetric.DUPLICATE_SIZE}
                 size="small"
                 type="button"
-                onClick={() => setModuleMetric(ModuleMetric.DUPLICATE_SIZE)}
+                onClick={() => setModuleMetric(ModuleSizeMetric.DUPLICATE_SIZE)}
               >
-                <Tooltip title="Module duplicate size">Module duplicate size</Tooltip>
+                <Tooltip title={ModuleSizeMetrics[ModuleSizeMetric.DUPLICATE_SIZE].tooltip}>
+                  {ModuleSizeMetrics[ModuleSizeMetric.DUPLICATE_SIZE].label}
+                </Tooltip>
               </Button>
               <Button
                 outline
-                active={moduleMetric === ModuleMetric.SIZE}
+                active={moduleMetric === ModuleSizeMetric.SIZE}
                 size="small"
                 type="button"
-                onClick={() => setModuleMetric(ModuleMetric.SIZE)}
+                onClick={() => setModuleMetric(ModuleSizeMetric.SIZE)}
               >
-                <Tooltip title="Module size (excluding duplicate modules)">Module size</Tooltip>
+                <Tooltip title={ModuleSizeMetrics[ModuleSizeMetric.SIZE].tooltip}>
+                  {ModuleSizeMetrics[ModuleSizeMetric.SIZE].label}
+                </Tooltip>
               </Button>
             </ControlGroup>
           </Box>
@@ -347,6 +358,7 @@ export const BundleModules = (props: BundleModulesProps) => {
           chunks={chunks}
           chunkIds={chunks?.map(({ id }) => id)}
           labels={jobLabels}
+          metricLabel={ModuleSizeMetrics[moduleMetric].label}
           customComponentLink={CustomComponentLink}
           onClose={hideEntryInfo}
         />

packages/ui/src/components/bundle-modules/bundle-modules.utils.ts

@@ -3,10 +3,13 @@ import get from 'lodash/get';
 import isEmpty from 'lodash/isEmpty';
 import union from 'lodash/union';
 import orderBy from 'lodash/orderBy';
+import type {
+  WebpackChunk,
+  MetricRunInfo,
+  ReportMetricRow,
+  ReportMetricRun,
+} from '@bundle-stats/utils';
 import {
-  type WebpackChunk,
-  type MetricRunInfo,
-  type ReportMetricRow,
   FILE_TYPE_LABELS,
   MODULE_CHUNK,
   MODULE_FILTERS,
@@ -18,26 +21,46 @@ 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 { Module } from '@bundle-stats/utils/types/webpack';
+import { MODULE_PATH_PACKAGES } from '@bundle-stats/utils/lib-esm/webpack';
 
-import type { FilterFieldsData, FilterGroupFieldData } from '../../types';
-import type { ReportMetricModuleRow } from './bundle-modules.types';
+import type { FilterFieldsData, FilterGroupFieldData, ReportMetricModuleRow } from '../../types';
 import * as I18N from './bundle-modules.i18n';
 
-export const addRowFlags = (row: Module & ReportMetricRow): ReportMetricModuleRow => {
+export const addRowFlags = (row: ReportMetricRow): ReportMetricModuleRow => {
   const { key, runs } = row;
 
   // @NOTE Assign instead destructuring for perf reasons
+  const moduleRow = row as any as ReportMetricModuleRow;
+
+  // eslint-disable-next-line no-param-reassign
+  moduleRow.thirdParty = Boolean(key.match(MODULE_PATH_PACKAGES));
+  // Mark metric row as duplicated when at least one run is duplicated
   // eslint-disable-next-line no-param-reassign
-  row.thirdParty = Boolean(key.match(MODULE_PATH_PACKAGES));
+  moduleRow.duplicated = Boolean(
+    runs.find((run) => (run as Module & ReportMetricRun)?.duplicated === true),
+  );
   // eslint-disable-next-line no-param-reassign
-  row.duplicated = Boolean(runs.find((run: Module & ReportMetricRun) => run?.duplicated === true));
+  moduleRow.fileType = getModuleSourceFileType(row.key);
+
   // eslint-disable-next-line no-param-reassign
-  row.fileType = getModuleSourceFileType(row.key);
+  moduleRow.runs = row.runs.map((run) => {
+    if (!run) {
+      return run;
+    }
+
+    const moduleRun = run as Module & ReportMetricRun;
+    const chunkCount = moduleRun.chunkIds?.length || 0;
+
+    return {
+      ...moduleRun,
+      size: moduleRun.value,
+      sizeDuplicate: chunkCount > 1 ? (chunkCount - 1) * moduleRun.value : 0,
+      sizeTotal: chunkCount * moduleRun.value,
+    };
+  });
 
-  return row;
+  return moduleRow;
 };
 
 export const getCustomSort = (item: ReportMetricRow) => [!item.changed, item.key];
@@ -88,7 +111,7 @@ export const generateGetRowFilter =
       // Filter if any of the chunkIds are checked
       if (hasChunkFilters) {
         const rowRunsChunkIds =
-          row?.runs?.map((run: Module & MetricRunInfo) => run?.chunkIds || []) || [];
+          row?.runs?.map((run) => (run as Module & MetricRunInfo)?.chunkIds || []) || [];
         const rowChunkIds = union(...rowRunsChunkIds);
         const matchedChunkIds = intersection(rowChunkIds, checkedChunkIds);
         return matchedChunkIds.length > 0;

packages/ui/src/components/bundle-modules/index.tsx

@@ -3,7 +3,8 @@ 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 { ModuleSizeMetric } from '../../constants';
+import type { ReportMetricModuleRow, SortAction } from '../../types';
 import { getJobsChunksData } from '../../utils/jobs';
 import { useRowsFilter } from '../../hooks/rows-filter';
 import { useRowsSort } from '../../hooks/rows-sort';
@@ -16,27 +17,27 @@ import {
   generateFilters,
   getCustomSort,
 } from './bundle-modules.utils';
-import { ModuleMetric } from './bundle-modules.constants';
-import * as types from './bundle-modules.types';
 
 interface UseMetricParams {
   metric?: string;
-  setState: ({ metric }: { metric: ModuleMetric }) => void;
+  setState: ({ metric }: { metric: ModuleSizeMetric }) => void;
 }
 
-function useModuleMetric(params: UseMetricParams): [ModuleMetric, (value: ModuleMetric) => void] {
+function useModuleMetric(
+  params: UseMetricParams,
+): [ModuleSizeMetric, (value: ModuleSizeMetric) => void] {
   const { metric, setState } = params;
 
-  const moduleMetric: ModuleMetric = useMemo(() => {
-    if (Object.values(ModuleMetric).includes(metric as ModuleMetric)) {
-      return metric as ModuleMetric;
+  const moduleMetric: ModuleSizeMetric = useMemo(() => {
+    if (Object.values(ModuleSizeMetric).includes(metric as ModuleSizeMetric)) {
+      return metric as ModuleSizeMetric;
     }
 
-    return ModuleMetric.TOTAL_SIZE;
+    return ModuleSizeMetric.TOTAL_SIZE;
   }, [metric]);
 
   const setModuleMetric = useCallback(
-    (newModuleMetric: ModuleMetric) => {
+    (newModuleMetric: ModuleSizeMetric) => {
       if (newModuleMetric !== metric) {
         setState({ metric: newModuleMetric });
       }
@@ -96,11 +97,11 @@ export const BundleModules = (props: BundleModulesProps) => {
   });
 
   const { rows, totalRowCount } = useMemo(() => {
-    let result: Array<types.ReportMetricModuleRow> = [];
+    let result: Array<ReportMetricModuleRow> = [];
 
-    if (moduleMetric === ModuleMetric.SIZE) {
+    if (moduleMetric === ModuleSizeMetric.SIZE) {
       result = webpack.compareBySection.modules(jobs, [addRowFlags]);
-    } else if (moduleMetric === ModuleMetric.DUPLICATE_SIZE) {
+    } else if (moduleMetric === ModuleSizeMetric.DUPLICATE_SIZE) {
       result = webpack.compareModuleDuplicateSize(jobs, [addRowFlags]);
     } else {
       result = webpack.compareModuleTotalSize(jobs, [addRowFlags]);
@@ -117,7 +118,7 @@ export const BundleModules = (props: BundleModulesProps) => {
     searchPattern: searchParams.searchPattern,
     filters: searchParams.filters,
     getRowFilter: generateGetRowFilter({ chunkIds }),
-  });
+  }) as Array<ReportMetricModuleRow>;
 
   const sortParams = useRowsSort({
     rows: filteredRows,