@bundle-stats/ui 4.14.0-beta.0 → 4.14.0-beta.1

package/src/components/entry-info/entry-info.tsx

@@ -1,7 +1,9 @@
+import type { ElementType, ReactNode } from 'react';
 import React from 'react';
 import cx from 'classnames';
 import { Portal } from 'ariakit/portal';
-import { METRIC_TYPE_CONFIGS, MetricRunInfo, getMetricRunInfo } from '@bundle-stats/utils';
+import type { MetricRunInfo, ReportMetricRow } from '@bundle-stats/utils';
+import { METRIC_TYPE_CONFIGS, getMetricRunInfo } from '@bundle-stats/utils';
 
 import { Box } from '../../layout/box';
 import { Stack } from '../../layout/stack';
@@ -12,9 +14,10 @@ import { Table } from '../../ui/table';
 import { RunInfo } from '../run-info';
 import * as I18N from './entry-info.i18n';
 import css from './entry-info.module.css';
+import { Tooltip } from '../../ui';
 
 interface EntryInfoMetaLinkProps {
-  as?: React.ElementType;
+  as?: ElementType;
 }
 
 export const EntryInfoMetaLink = (props: EntryInfoMetaLinkProps & React.ComponentProps<'a'>) => {
@@ -24,34 +27,60 @@ export const EntryInfoMetaLink = (props: EntryInfoMetaLinkProps & React.Componen
 
 interface EntryInfoMetaProps {
   label: string;
+  tooltip?: ReactNode;
 }
 
 const EntryInfoMeta = ({
   className = '',
   label,
+  tooltip,
   children,
 }: EntryInfoMetaProps & React.ComponentProps<'p'>) => (
-  <p className={cx(css.meta, className)}>
-    <span className={css.metaLabel}>{label}</span>
-    <span className={css.metaContent}>{children}</span>
-  </p>
+  <div className={cx(css.meta, className)}>
+    <span className={css.metaLabel}>
+      {label}
+      {tooltip && (
+        <Tooltip title={tooltip} className={css.metaLabelTooltip}>
+          <Icon glyph="help" />
+        </Tooltip>
+      )}
+    </span>
+    <div className={css.metaContent}>{children}</div>
+  </div>
 );
 
-interface EntryRun {
-  name: string;
+function defaultRenderRunInfo(item: ReportMetricRow) {
+  const baselineRun = item.runs.length > 1 ? item.runs?.[item.runs.length - 1] : null;
+
+  // Get the metric run info to handle added/removed cases when there are more than 2 jobs
+  const metricRunInfo = getMetricRunInfo(
+    METRIC_TYPE_CONFIGS.METRIC_TYPE_FILE_SIZE,
+    item.runs?.[0]?.value || 0,
+    baselineRun?.value || 0,
+  ) as MetricRunInfo;
+
+  return (
+    <RunInfo
+      current={metricRunInfo.displayValue}
+      delta={metricRunInfo.displayDeltaPercentage}
+      deltaPercentage={metricRunInfo.displayDelta}
+      deltaType={metricRunInfo.deltaType}
+      baseline={baselineRun?.displayValue || '0B'}
+      size="large"
+    />
+  );
 }
 
 interface EntryInfoProps {
   itemTitle?: React.ReactNode;
-  item: {
-    label: string;
-    runs: Array<EntryRun & MetricRunInfo>;
-  };
+  item: ReportMetricRow;
   labels: Array<string>;
   runNameSelector?: string;
   runNameLabel?: string;
+  runSizeLabel?: string;
   tags?: React.ReactNode;
   onClose: () => void;
+  renderRunInfo?: (item: ReportMetricRow) => React.ReactNode;
 }
 
 export const EntryInfo = (props: EntryInfoProps & React.ComponentProps<'div'>) => {
@@ -62,38 +91,22 @@ export const EntryInfo = (props: EntryInfoProps & React.ComponentProps<'div'>) =
     labels,
     runNameSelector = 'name',
     runNameLabel = I18N.PATH,
+    runSizeLabel = I18N.SIZE,
     children,
     tags = null,
     onClose,
+    renderRunInfo = defaultRenderRunInfo,
   } = props;
 
-  const baselineRun = item.runs.length > 1 ? item.runs?.[item.runs.length - 1] : null;
-
-  // Get the metric run info to handle added/removed cases
-  const metricRunInfo = getMetricRunInfo(
-    METRIC_TYPE_CONFIGS.METRIC_TYPE_FILE_SIZE,
-    item.runs?.[0]?.value,
-    baselineRun?.value || 0,
-  ) as MetricRunInfo;
-
   return (
     <Portal className={cx(css.root, className)}>
       <Box padding="medium" as="header" className={css.header}>
         <Stack space="small">
-          {tags && <div>{tags}</div>}
-
           <h3 className={css.label}>
             <FileName as="code" name={itemTitle || item.label} className={css.fileName} />
           </h3>
 
-          <RunInfo
-            current={metricRunInfo.displayValue}
-            delta={metricRunInfo.displayDeltaPercentage}
-            deltaPercentage={metricRunInfo.displayDelta}
-            deltaType={metricRunInfo.deltaType}
-            baseline={baselineRun?.displayValue || '0B'}
-            size="large"
-          />
+          <div>{renderRunInfo(item)}</div>
         </Stack>
         <Button
           radius="circle"
@@ -107,6 +120,8 @@ export const EntryInfo = (props: EntryInfoProps & React.ComponentProps<'div'>) =
       </Box>
       <Box padding="medium" as="main" className={css.contentWrapper}>
         <Stack space="small" className={css.content}>
+          {tags && <div>{tags}</div>}
+
           {children}
 
           <Table outline compact className={css.runs}>
@@ -114,7 +129,7 @@ export const EntryInfo = (props: EntryInfoProps & React.ComponentProps<'div'>) =
               <Table.Tr>
                 <Table.Th className={cx(css.runsCell, css.runsColJob)}>&nbsp;</Table.Th>
                 <Table.Th className={cx(css.runsCell, css.runsColName)}>{runNameLabel}</Table.Th>
-                <Table.Th className={cx(css.runsCell, css.runsColSize)}>{I18N.SIZE}</Table.Th>
+                <Table.Th className={cx(css.runsCell, css.runsColSize)}>{runSizeLabel}</Table.Th>
               </Table.Tr>
             </Table.THead>
             <Table.TBody>

package/src/components/module-info/module-info.module.css

@@ -1,3 +1,41 @@
+.moduleSizes {
+  flex-wrap: wrap;
+}
+
 .chunksItems {
   display: inline;
 }
+
+.chunksItem-info {
+  color: var(--color-info);
+}
+
+.chunksItem-info:hover,
+.chunksItem-info:active,
+.chunksItem-info:focus {
+  color: var(--color-info-dark);
+}
+
+.chunksItem-danger {
+  color: var(--color-danger);
+}
+
+.chunksItem-danger:hover,
+.chunksItem-danger:active,
+.chunksItem-danger:focus {
+  color: var(--color-danger-dark);
+}
+
+.chunksItem-default {
+  color: var(--color-text-light);
+}
+
+.chunksItem-default:hover,
+.chunksItem-default:active,
+.chunksItem-default:focus {
+  color: var(--color-text);
+}
+
+.duplicateInstances {
+  padding: 2px 0; /* compensate for the Entry Label padding */
+}

package/src/components/module-info/module-info.stories.tsx

@@ -1,4 +1,6 @@
 import React from 'react';
+// eslint-disable-next-line import/no-extraneous-dependencies
+import { action } from '@storybook/addon-actions';
 
 import { getWrapperDecorator } from '../../stories';
 import { ModuleInfo } from '.';
@@ -17,12 +19,12 @@ export const Default = () => (
       runs: [
         {
           name: './node_modules/lodash/fp/merge.js',
-          chunkIds: ['1', '2'],
+          chunkIds: ['1'],
           value: 1024 * 4,
         },
         {
           name: './node_modules/lodash/fp/merge.js',
-          chunkIds: ['1', '2'],
+          chunkIds: ['1'],
           value: 1024 * 3,
           displayValue: '3KiB',
         },
@@ -37,8 +39,60 @@ export const Default = () => (
         id: '2',
         name: 'chunk-2',
       },
+      {
+        id: '3',
+        name: 'chunk-3',
+      },
+    ]}
+    chunkIds={['1', '2', '3']}
+    labels={['Job #2', 'Job #1']}
+    onClose={action('CLOSE')}
+  />
+);
+
+export const Duplicates = () => (
+  <ModuleInfo
+    item={{
+      label: './node_modules/lodash/fp/merge.js',
+      duplicated: true,
+      runs: [
+        {
+          name: './node_modules/lodash/fp/merge.js',
+          chunkIds: ['1', '2', '3', '5'],
+          value: 1024 * 4,
+        },
+        {
+          name: './node_modules/lodash/fp/merge.js',
+          chunkIds: ['1', '2', '4'],
+          value: 1024 * 3,
+          displayValue: '3KiB',
+        },
+      ] as any,
+    }}
+    chunks={[
+      {
+        id: '1',
+        name: 'chunk-1',
+      },
+      {
+        id: '2',
+        name: 'chunk-2',
+      },
+      {
+        id: '3',
+        name: 'chunk-3',
+      },
+      {
+        id: '4',
+        name: 'chunk-4',
+      },
+      {
+        id: '5',
+        name: 'chunk-5',
+      },
     ]}
-    chunkIds={['1', '2']}
+    chunkIds={['1', '2', '3', '4', '5']}
     labels={['Job #2', 'Job #1']}
+    onClose={action('CLOSE')}
   />
 );

package/src/components/module-info/module-info.tsx

@@ -1,36 +1,210 @@
+import type { ElementType } from 'react';
 import React, { useMemo } from 'react';
 import cx from 'classnames';
-import isEmpty from 'lodash/isEmpty';
+import orderBy from 'lodash/orderBy';
 import noop from 'lodash/noop';
+import type { MetricRunInfo, MetricTypeConfig, ReportMetricRow } from '@bundle-stats/utils';
 import {
+  METRIC_TYPE_CONFIGS,
   BUNDLE_MODULES_DUPLICATE,
   FILE_TYPE_LABELS,
   MODULE_SOURCE_TYPE_LABELS,
-  MetricRunInfo,
+  formatNumber,
   getBundleModulesByChunk,
   getBundleModulesByFileTpe,
   getBundleModulesBySource,
+  getMetricRunInfo,
 } from '@bundle-stats/utils';
-import { Module, MetaChunk } from '@bundle-stats/utils/types/webpack';
+import type { Module, MetaChunk } from '@bundle-stats/utils/types/webpack';
 
+import type { ReportMetricModuleRow } from '../../types';
 import { Stack } from '../../layout/stack';
 import { Tag } from '../../ui/tag';
 import { ComponentLink } from '../component-link';
+import { RunInfo } from '../run-info';
 import { EntryInfo, EntryInfoMetaLink } from '../entry-info';
 import css from './module-info.module.css';
+import { FlexStack } from '../../layout';
+import { ModuleSizeMetric, ModuleSizeMetrics } from '../../constants';
+
+interface DuplicateInstancesProps {
+  current: number;
+  baseline: number;
+}
+
+const DuplicateInstances = ({ current, baseline }: DuplicateInstancesProps) => {
+  const runInfo = getMetricRunInfo(
+    { biggerIsBetter: false, formatter: formatNumber },
+    current,
+    baseline,
+  ) as MetricRunInfo;
+
+  return (
+    <RunInfo
+      current={runInfo.displayValue}
+      delta={runInfo.displayDeltaPercentage}
+      deltaPercentage={runInfo.displayDelta}
+      deltaType={runInfo.deltaType}
+      size="small"
+      className={css.duplicateInstances}
+    />
+  );
+};
+
+enum ChunkDataState {
+  ADDED = 2,
+  REMOVED = 1,
+  NOT_CHANGED = 0,
+}
+
+const ChunkDataStateKind = {
+  [ChunkDataState.ADDED]: 'info',
+  [ChunkDataState.REMOVED]: 'danger',
+  [ChunkDataState.NOT_CHANGED]: 'default',
+};
+
+interface ChunkData {
+  id: string;
+  state: ChunkDataState;
+}
+
+function compareChunksData(
+  currentChunkIds: Array<string>,
+  baselineChunkIds: Array<string>,
+): Array<ChunkData> {
+  const result: Array<ChunkData> = [];
+
+  currentChunkIds.forEach((chunkId) => {
+    if (!baselineChunkIds.includes(chunkId)) {
+      result.push({ id: chunkId, state: ChunkDataState.ADDED });
+    } else {
+      result.push({ id: chunkId, state: ChunkDataState.NOT_CHANGED });
+    }
+  });
+
+  baselineChunkIds.forEach((chunk) => {
+    if (!currentChunkIds.includes(chunk)) {
+      result.push({ id: chunk, state: ChunkDataState.REMOVED });
+    }
+  });
+
+  return orderBy(result, 'state', 'desc');
+}
+
+interface ChunksDeltaProps {
+  customComponentLink: ElementType;
+  runs: Array<Module & MetricRunInfo>;
+  chunks: Array<MetaChunk>;
+  chunkIds: Array<string>;
+}
+
+const ChunksDelta = (props: ChunksDeltaProps) => {
+  const { customComponentLink: CustomComponentLink, runs, chunks, chunkIds } = props;
+
+  const currentChunkIds = runs[0]?.chunkIds || [];
+  const baselineChunkIds = runs[runs.length - 1]?.chunkIds || [];
+
+  const chunksData = compareChunksData(currentChunkIds, baselineChunkIds);
+
+  return (
+    <Stack space="xxxsmall">
+      <div>
+        {chunksData.map((chunkData) => {
+          const chunk = chunks?.find(({ id }) => id === chunkData.id);
+
+          if (!chunk) {
+            return null;
+          }
+
+          return (
+            <EntryInfoMetaLink
+              as={CustomComponentLink}
+              {...getBundleModulesByChunk(chunkIds, chunkData.id)}
+              className={cx(
+                css.chunksItem,
+                css[`chunksItem-${ChunkDataStateKind[chunkData.state]}`],
+              )}
+            >
+              {chunk.name}
+            </EntryInfoMetaLink>
+          );
+        })}
+      </div>
+    </Stack>
+  );
+};
+
+interface ModuleSizeRunInfoProps {
+  metric: MetricTypeConfig;
+  title: string;
+  titleTooltip?: string;
+  current?: number;
+  baseline?: number;
+}
+
+const ModuleSizeRunInfo = (props: ModuleSizeRunInfoProps) => {
+  const { metric, title, titleTooltip, current, baseline } = props;
+
+  const runInfo = getMetricRunInfo(metric, current || 0, baseline || 0) as MetricRunInfo;
+
+  return (
+    <RunInfo
+      title={title}
+      titleTooltip={titleTooltip}
+      current={runInfo.displayValue}
+      delta={runInfo.displayDeltaPercentage}
+      deltaPercentage={runInfo.displayDelta}
+      deltaType={runInfo.deltaType}
+      baseline={metric.formatter(baseline || 0)}
+    />
+  );
+};
+
+const renderRunInfo = (item: ReportMetricRow) => {
+  const itemModule = item as ReportMetricModuleRow;
+
+  const currentRun = itemModule.runs[0];
+  const baselineRun =
+    itemModule.runs.length > 1 ? itemModule.runs[itemModule.runs.length - 1] : null;
+  const metric = METRIC_TYPE_CONFIGS.METRIC_TYPE_FILE_SIZE;
+
+  return (
+    <FlexStack space="small" className={css.moduleSizes}>
+      {itemModule.duplicated && (
+        <>
+          <ModuleSizeRunInfo
+            metric={metric}
+            title={ModuleSizeMetrics[ModuleSizeMetric.TOTAL_SIZE].label}
+            titleTooltip={ModuleSizeMetrics[ModuleSizeMetric.TOTAL_SIZE].tooltip}
+            current={currentRun.sizeTotal}
+            baseline={baselineRun.sizeTotal}
+          />
+          <ModuleSizeRunInfo
+            metric={metric}
+            title={ModuleSizeMetrics[ModuleSizeMetric.DUPLICATE_SIZE].label}
+            titleTooltip={ModuleSizeMetrics[ModuleSizeMetric.DUPLICATE_SIZE].tooltip}
+            current={currentRun.sizeDuplicate}
+            baseline={baselineRun.sizeDuplicate}
+          />
+        </>
+      )}
+      <ModuleSizeRunInfo
+        metric={metric}
+        title={ModuleSizeMetrics[ModuleSizeMetric.SIZE].label}
+        titleTooltip={ModuleSizeMetrics[ModuleSizeMetric.SIZE].tooltip}
+        current={currentRun.size}
+        baseline={baselineRun.size}
+      />
+    </FlexStack>
+  );
+};
 
 interface ModuleInfoProps {
-  item: {
-    label: string;
-    changed?: boolean;
-    duplicated?: boolean;
-    thirdParty?: boolean;
-    fileType?: string;
-    runs: Array<Module & MetricRunInfo>;
-  };
+  item: ReportMetricModuleRow;
   chunks?: Array<MetaChunk>;
   chunkIds?: Array<string>;
   labels: Array<string>;
+  metricLabel?: string;
   customComponentLink?: React.ElementType;
   onClose: () => void;
 }
@@ -42,6 +216,7 @@ export const ModuleInfo = (props: ModuleInfoProps & React.ComponentProps<'div'>)
     labels,
     chunks = [],
     chunkIds = [],
+    metricLabel = '',
     customComponentLink: CustomComponentLink = ComponentLink,
     onClick = noop,
     onClose,
@@ -69,37 +244,25 @@ export const ModuleInfo = (props: ModuleInfoProps & React.ComponentProps<'div'>)
     ? MODULE_SOURCE_TYPE_LABELS.THIRD_PARTY
     : MODULE_SOURCE_TYPE_LABELS.FIRST_PARTY;
 
+  const currentChunkCount = (item.runs[0]?.chunkIds || []).length;
+  const baselineChunkCount = (item.runs[item.runs.length - 1]?.chunkIds || []).length;
+  const currentDuplicateInstances = currentChunkCount > 0 ? currentChunkCount - 1 : 0;
+  const baselineDuplicateInstances = baselineChunkCount > 0 ? baselineChunkCount - 1 : 0;
+  const hasDuplicates = currentDuplicateInstances !== 0 || baselineDuplicateInstances !== 0;
+
   return (
-    <EntryInfo item={item} labels={labels} tags={tags} onClose={onClose} className={rootClassName}>
+    <EntryInfo
+      item={item as ReportMetricRow}
+      labels={labels}
+      tags={tags}
+      onClose={onClose}
+      renderRunInfo={renderRunInfo}
+      runSizeLabel={metricLabel}
+      className={rootClassName}
+    >
       <Stack space="xxxsmall">
-        {item.runs?.map(
-          (currentRun, index) =>
-            !isEmpty(currentRun?.chunkIds) && (
-              <EntryInfo.Meta label="Chunks" className={css.chunks}>
-                {labels[index]}:
-                {currentRun.chunkIds.map((chunkId) => {
-                  const chunk = chunks?.find(({ id }) => id === chunkId);
-
-                  if (!chunk) {
-                    return null;
-                  }
-
-                  return (
-                    <EntryInfoMetaLink
-                      as={CustomComponentLink}
-                      {...getBundleModulesByChunk(chunkIds, chunkId)}
-                      className={css.chunksItem}
-                    >
-                      {chunk.name}
-                    </EntryInfoMetaLink>
-                  );
-                })}
-              </EntryInfo.Meta>
-          ),
-        )}
-
         {item?.fileType && (
-          <EntryInfo.Meta label="File type">
+          <EntryInfo.Meta label="File type" tooltip="Module file type: JS, CSS">
             <EntryInfoMetaLink
               as={CustomComponentLink}
               {...getBundleModulesByFileTpe(item.fileType, fileTypeLabel)}
@@ -109,7 +272,7 @@ export const ModuleInfo = (props: ModuleInfoProps & React.ComponentProps<'div'>)
           </EntryInfo.Meta>
         )}
 
-        <EntryInfo.Meta label="Source">
+        <EntryInfo.Meta label="Source" tooltip="Module source type: first party, third party">
           <EntryInfoMetaLink
             as={CustomComponentLink}
             {...getBundleModulesBySource(item.thirdParty || false, sourceTypeLabel)}
@@ -118,6 +281,24 @@ export const ModuleInfo = (props: ModuleInfoProps & React.ComponentProps<'div'>)
             {sourceTypeLabel}
           </EntryInfoMetaLink>
         </EntryInfo.Meta>
+
+        {hasDuplicates && (
+          <EntryInfo.Meta label="Duplicates" tooltip="Module duplicate instances">
+            <DuplicateInstances
+              current={currentDuplicateInstances}
+              baseline={baselineDuplicateInstances}
+            />
+          </EntryInfo.Meta>
+        )}
+
+        <EntryInfo.Meta label="Chunks" tooltip="Chunks that contain the module">
+          <ChunksDelta
+            runs={item.runs}
+            chunks={chunks}
+            chunkIds={chunkIds}
+            customComponentLink={CustomComponentLink}
+          />
+        </EntryInfo.Meta>
       </Stack>
     </EntryInfo>
   );

package/src/components/package-info/package-info.tsx

@@ -1,5 +1,4 @@
 import React, { useMemo } from 'react';
-import noop from 'lodash/noop';
 import {
   BUNDLE_PACKAGES_DUPLICATE,
   PACKAGES_SEPARATOR,
@@ -79,14 +78,14 @@ export const PackageInfo = (props: PackageInfoProps & React.ComponentProps<'div'
   return (
     <EntryInfo
       itemTitle={packageTitle}
-      item={item}
+      item={item as any}
       labels={labels}
       tags={tags}
       runNameSelector="path"
       onClose={onClose}
       className={className}
     >
-      <EntryInfo.Meta label="Path">
+      <EntryInfo.Meta label="Path" tooltip="Package path">
         <FileName name={normalizedPackagePath} className={css.fileName} />
       </EntryInfo.Meta>
 

package/src/components/run-info/run-info.module.css

@@ -19,7 +19,7 @@
   margin-bottom: -3px !important;
 }
 
-.info {
+.title + .info {
   margin-top: var(--space-xxsmall);
 }
 

package/src/constants.ts

@@ -39,9 +39,30 @@ export const METRICS_WEBPACK_PACKAGES = ['webpack.packageCount', 'webpack.duplic
 export const SORT = {
   ASC: 'asc',
   DESC: 'desc',
-};
+} as const;
 
 export enum MetricsDisplayType {
   TABLE = 'table',
   TREEMAP = 'treemap',
 }
+
+export enum ModuleSizeMetric {
+  SIZE = 'value',
+  DUPLICATE_SIZE = 'duplicateSize',
+  TOTAL_SIZE = 'totalSize',
+}
+
+export const ModuleSizeMetrics = {
+  [ModuleSizeMetric.SIZE]: {
+    label: 'Size',
+    tooltip: 'Module size (excluding duplicate modules)',
+  },
+  [ModuleSizeMetric.TOTAL_SIZE]: {
+    label: 'Total size',
+    tooltip: 'Module total size (including duplicate modules)',
+  },
+  [ModuleSizeMetric.DUPLICATE_SIZE]: {
+    label: 'Duplicate size',
+    tooltip: 'Module duplicate size',
+  },
+};