@bundle-stats/ui 4.3.0 → 4.3.3

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

@@ -2,14 +2,17 @@ import React, { useMemo } from 'react';
 import cx from 'classnames';
 import noop from 'lodash/noop';
 import {
+  FILE_TYPE_LABELS,
   MetricRunInfo,
   getBundleModulesByChunk,
   getBundleAssetsByEntryType,
+  getBundleAssetsFileTypeComponentLink,
   getModuleFileType,
 } from '@bundle-stats/utils';
 import { Asset, MetaChunk } from '@bundle-stats/utils/types/webpack';
 
 import { FlexStack } from '../../layout/flex-stack';
+import { Stack } from '../../layout/stack';
 import { Tag } from '../../ui/tag';
 import { ComponentLink } from '../component-link';
 import { EntryInfo } from '../entry-info';
@@ -57,6 +60,7 @@ interface AssetInfoProps {
     isEntry?: boolean;
     isInitial?: boolean;
     isNotPredicative?: boolean;
+    fileType?: string;
     runs: Array<Asset & MetricRunInfo>;
   };
   chunks?: Array<MetaChunk>;
@@ -117,17 +121,34 @@ export const AssetInfo = (props: AssetInfoProps & React.ComponentProps<'div'>) =
     );
   }, [item]);
 
+  const fileTypeLabel = FILE_TYPE_LABELS[item.fileType as keyof typeof FILE_TYPE_LABELS];
+
   return (
     <EntryInfo item={item} labels={labels} tags={tags} className={cx(css.root, className)}>
-      {currentRun?.chunkId && chunks && (
-        <ChunkModulesLink
-          as={CustomComponentLink}
-          chunks={chunks}
-          chunkId={currentRun?.chunkId}
-          name={currentRun?.name}
-          onClick={onClick}
-        />
-      )}
+      <Stack space="small">
+        {item.fileType && (
+          <p>
+            <span className={css.label}>File type</span>
+            <Tag
+              as={CustomComponentLink}
+              {...getBundleAssetsFileTypeComponentLink(item.fileType, fileTypeLabel)}
+              onClick={onClick}
+            >
+              {fileTypeLabel}
+            </Tag>
+          </p>
+        )}
+
+        {currentRun?.chunkId && chunks && (
+          <ChunkModulesLink
+            as={CustomComponentLink}
+            chunks={chunks}
+            chunkId={currentRun?.chunkId}
+            name={currentRun?.name}
+            onClick={onClick}
+          />
+        )}
+      </Stack>
     </EntryInfo>
   );
 };

package/src/components/bundle-assets/bundle-assets.utils.js

@@ -8,8 +8,8 @@ export const addRowAssetFlags = (row) => {
   const isEntry = runs.map((run) => run?.isEntry).includes(true);
   const isInitial = runs.map((run) => run?.isInitial).includes(true);
   const isChunk = runs.map((run) => run?.isChunk).includes(true);
-
   const isAsset = !(isEntry || isInitial || isChunk);
+  const fileType = getFileType(row.key);
 
   return {
     ...row,
@@ -17,6 +17,7 @@ export const addRowAssetFlags = (row) => {
     isInitial,
     isChunk,
     isAsset,
+    fileType,
   };
 };
 
@@ -64,7 +65,7 @@ export const getRowFilter = (filters) => (item) => {
     return false;
   }
 
-  if (!filters[`${ASSET_FILE_TYPE}.${getFileType(item.key)}`]) {
+  if (!filters[`${ASSET_FILE_TYPE}.${item.fileType}`]) {
     return false;
   }
 

package/src/components/bundle-assets-totals-chart-bars/bundle-assets-totals-chart-bars.jsx

@@ -12,6 +12,7 @@ import { HorizontalBarChart } from '../../ui/horizontal-bar-chart';
 import { ComponentLink } from '../component-link'
 import { getColors } from '../../utils';
 import { Stack } from '../../layout/stack';
+import { JobName } from '../job-name';
 import { MetricRunInfo } from '../metric-run-info';
 import css from './bundle-assets-totals-chart-bars.module.css';
 
@@ -63,7 +64,7 @@ export const BundleAssetsTotalsChartBars = ({
   const colors = getColors(max(map(dataGraphs, (values) => values.length)));
 
   return (
-    <Stack className={rootClassName} space="medium">
+    <Stack className={rootClassName} space="small">
       {dataGraphs.map((data, runIndex) => {
         const { internalBuildNumber } = jobs[runIndex];
 
@@ -76,7 +77,7 @@ export const BundleAssetsTotalsChartBars = ({
 
         return (
           <div key={internalBuildNumber || runIndex} className={css.item}>
-            <h3 className={css.itemTitle}>{`Job #${internalBuildNumber}`}</h3>
+            <h3 className={css.itemTitle}><JobName internalBuildNumber={internalBuildNumber} /></h3>
             <HorizontalBarChart
               className={css.itemChart}
               data={{ labels, values }}

package/src/components/bundle-assets-totals-chart-bars/bundle-assets-totals-chart-bars.module.css

@@ -6,7 +6,7 @@
   position: absolute;
   right: 0;
   bottom: 100%;
-  margin: 0 0 var(--space-xxxsmall);
+  margin: 0 0 2px;
 
   color: var(--color-text-light);
   font-size: var(--size-xsmall);

package/src/components/bundle-modules/bundle-modules.jsx

@@ -40,17 +40,6 @@ const getFilters = ({ filters, compareMode, chunks }) => ({
       label: 'Duplicate',
       defaultValue: filters[MODULE_FILTERS.DUPLICATED],
     },
-    [MODULE_SOURCE_TYPE]: {
-      label: 'Source',
-      [MODULE_FILTERS.FIRST_PARTY]: {
-        label: 'First party',
-        defaultValue: get(filters, `${MODULE_SOURCE_TYPE}.${MODULE_FILTERS.FIRST_PARTY}`, true),
-      },
-      [MODULE_FILTERS.THIRD_PARTY]: {
-        label: 'Third party',
-        defaultValue: get(filters, `${MODULE_SOURCE_TYPE}.${MODULE_FILTERS.THIRD_PARTY}`, true),
-      },
-    },
 
     // When chunks data available, list available chunks as filters
     ...(!isEmpty(chunks) && {
@@ -69,6 +58,18 @@ const getFilters = ({ filters, compareMode, chunks }) => ({
       },
     }),
 
+    [MODULE_SOURCE_TYPE]: {
+      label: 'Source',
+      [MODULE_FILTERS.FIRST_PARTY]: {
+        label: 'First party',
+        defaultValue: get(filters, `${MODULE_SOURCE_TYPE}.${MODULE_FILTERS.FIRST_PARTY}`, true),
+      },
+      [MODULE_FILTERS.THIRD_PARTY]: {
+        label: 'Third party',
+        defaultValue: get(filters, `${MODULE_SOURCE_TYPE}.${MODULE_FILTERS.THIRD_PARTY}`, true),
+      },
+    },
+
     // Module source types
     [MODULE_FILE_TYPE]: {
       label: 'File type',

package/src/components/bundle-modules/bundle-modules.utils.js

@@ -13,14 +13,17 @@ import {
 
 import { SORT_BY_NAME, SORT_BY_SIZE, SORT_BY_DELTA } from './bundle-modules.constants';
 
-export const addRowSourceFlag = (row) => {
+export const addRowFlags = (row) => {
   const { key, runs } = row;
 
   // @NOTE Assign instead destructuring for perf reasons
+
   // eslint-disable-next-line no-param-reassign
   row.thirdParty = Boolean(key.match(MODULE_PATH_PACKAGES));
   // eslint-disable-next-line no-param-reassign
   row.duplicated = Boolean(runs.find((run) => run?.duplicated === true));
+  // eslint-disable-next-line no-param-reassign
+  row.fileType = getModuleSourceFileType(row.key);
 
   return row;
 };
@@ -64,8 +67,7 @@ export const getRowFilter = (filters) => (row) => {
   }
 
   // Skip not matching source file types
-  const fileType = getModuleSourceFileType(row.key);
-  if (!filters[`${MODULE_FILE_TYPE}.${fileType}`]) {
+  if (!filters[`${MODULE_FILE_TYPE}.${row.fileType}`]) {
     return false;
   }
 

package/src/components/bundle-modules/index.jsx

@@ -14,7 +14,7 @@ import { useRowsSort } from '../../hooks/rows-sort';
 import { useSearchParams } from '../../hooks/search-params';
 import { BundleModules as BundleModulesComponent } from './bundle-modules';
 import {
-  addRowSourceFlag,
+  addRowFlags,
   getRowFilter,
   getCustomSort,
   useModuleFilterByChunk,
@@ -75,7 +75,7 @@ export const BundleModules = (props) => {
   });
 
   const { rows, totalRowCount } = useMemo(() => {
-    const result = webpack.compareBySection.modules(filteredJobsByChunkIds, [addRowSourceFlag]);
+    const result = webpack.compareBySection.modules(filteredJobsByChunkIds, [addRowFlags]);
     return { rows: result, totalRowCount: result.length };
   }, [filteredJobsByChunkIds]);
 

package/src/components/index.js

@@ -9,7 +9,6 @@ export { Delta } from './delta';
 export { InsightIcon } from './insight-icon';
 export { Insights } from './insights';
 export { JobName } from './job-name';
-export { JobHeader } from './job-header';
 export { JobsHeader } from './jobs-header';
 export { LighthouseTable } from './lighthouse-table';
 export { Metric } from './metric';

package/src/components/job-header/job-header.jsx

@@ -18,29 +18,32 @@ export const JobHeader = (props) => {
 
   return (
     <Stack className={rootClassName} space="xxsmall">
-      <h1 className={css.title}>
-        <span>{`#${job.internalBuildNumber}`}</span>
-        {tag && <Tag className={css.tag}>{tag}</Tag>}
-      </h1>
-      <FlexStack space="xxsmall" className={css.meta}>
+      <FlexStack space="xsmall" alignItems="center">
+        <FlexStack space="xxxsmall" as="h1" className={css.title}>
+          <span>{`#${job.internalBuildNumber}`}</span>
+          {tag && <Tag className={css.tag}>{tag}</Tag>}
+        </FlexStack>
+
         {builtAt && (
-          <FlexStack space="xxxsmall" alignItems="center" inline as="span" title={builtAt}>
-            <Icon glyph="clock" />
-            <span>
+          <FlexStack space="xxxsmall" alignItems="center" inline as="span" title={builtAt} className={css.meta}>
+            <Icon glyph="clock" className={css.metaIcon} />
+            <span className={css.metaText}>
               {formatDateTime({ dateStyle: 'medium', timeStyle: 'medium' }, builtAt)}
             </span>
           </FlexStack>
         )}
 
         {hash && (
-          <FlexStack space="xxxsmall" alignItems="center" inline title="Webpack bundle hash">
-            <Icon glyph="commit" />
-            <span>{hash}</span>
+          <FlexStack space="xxxsmall" alignItems="center" inline title="Webpack bundle hash" className={css.meta}>
+            <Icon glyph="commit" className={css.metaIcon} />
+            <span className={css.metaText}>{hash.slice(0, 7)}</span>
           </FlexStack>
         )}
-
-        <div className={css.content}>{children}</div>
       </FlexStack>
+      {children && (<FlexStack space="xxsmall" className={css.meta}>
+          <div className={css.content}>{children}</div>
+        </FlexStack>
+      )}
     </Stack>
   );
 };

package/src/components/jobs-header/jobs-header.module.css

@@ -1,16 +1,63 @@
 .root {
-  align-items: stretch;
-  flex-wrap: wrap;
   padding: var(--space-small) 0;
+  width: 100%;
+  display: flex;
 }
 
 .item {
-  flex: 0 0 auto;
-  padding: 0 var(--space-medium);
+  position: relative;
+  flex: 1 0 10%;
+  max-width: 50%;
+  overflow: hidden;
+  padding: 0 var(--space-small);
   border-left: 1px solid var(--color-outline);
 }
 
+.item::after {
+  content: '';
+  display: block;
+  position: absolute;
+  top: 0;
+  right: 0;
+  bottom: 0;
+  width: var(--space-xxsmall);
+  background: linear-gradient(90deg, transparent, var(--color-background));
+}
+
+.item + .item {
+  margin-left: var(--space-small);
+}
+
 .item:first-child {
   border-left: 0;
   padding-left: 0;
 }
+
+.itemTitle {
+  font-size: var(--size-xlarge);
+  line-height: 1;
+  font-weight: bold;
+  vertical-align: top;
+}
+
+.itemTag {
+  margin-left: var(--space-xxsmall);
+  vertical-align: top;
+  outline: 1px solid var(--color-outline);
+  background: var(--color-highlight);
+  color: var(--color-text-light);
+}
+
+.itemMeta {
+  font-size: var(--size-small);
+  color: var(--color-text-light);
+}
+
+.itemMetaIcon {
+  flex: 0 0 auto;
+}
+
+.itemMetaText {
+  flex: 0 0 auto;
+  white-space: nowrap;
+}

package/src/components/jobs-header/jobs-header.stories.tsx

@@ -0,0 +1,51 @@
+import React from 'react';
+
+import { getWrapperDecorator } from '../../stories';
+import { JobsHeader } from '.';
+
+export default {
+  title: 'Components/JobsHeader',
+  component: JobsHeader,
+  decorators: [getWrapperDecorator()],
+};
+
+export const Default = () => (
+  <JobsHeader
+    jobs={[
+      {
+        internalBuildNumber: 1,
+        meta: {
+          webpack: {
+            builtAt: '2019-01-01T00:00:00.000Z',
+            hash: 'abcd1234',
+          },
+        },
+      },
+    ]}
+  />
+);
+
+export const MultipleJobs = () => (
+  <JobsHeader
+    jobs={[
+      {
+        internalBuildNumber: 1,
+        meta: {
+          webpack: {
+            builtAt: '2019-01-01T00:00:00.000Z',
+            hash: 'abcd1234',
+          },
+        },
+      },
+      {
+        internalBuildNumber: 2,
+        meta: {
+          webpack: {
+            builtAt: '2019-01-02T00:00:00.000Z',
+            hash: 'efgh1234',
+          },
+        },
+      },
+    ]}
+  />
+);

package/src/components/jobs-header/jobs-header.tsx

@@ -0,0 +1,90 @@
+import React from 'react';
+import cx from 'classnames';
+import { formatDateTime } from '@bundle-stats/utils';
+
+import I18N from '../../i18n';
+import { FlexStack } from '../../layout/flex-stack';
+import { Stack } from '../../layout/stack';
+import { Icon } from '../../ui/icon';
+import { Tag } from '../../ui/tag';
+import css from './jobs-header.module.css';
+
+interface ItemProps {
+  job: {
+    internalBuildNumber: number;
+    meta?: {
+      webpack?: {
+        builtAt?: string;
+        hash?: string;
+      };
+    };
+  };
+  tag: string;
+}
+
+export const Item = (props: ItemProps & React.ComponentProps<'div'>) => {
+  const { className, tag, job } = props;
+
+  const { builtAt, hash } = job.meta?.webpack || {};
+  const rootClassName = cx(css.item, className);
+
+  return (
+    <FlexStack space="xsmall" alignItems="center" className={rootClassName}>
+      <FlexStack space="xxxsmall" as="h1" className={css.itemTitle}>
+        <span>{`#${job.internalBuildNumber}`}</span>
+        {tag && <Tag className={css.itemTag}>{tag}</Tag>}
+      </FlexStack>
+
+      {builtAt && (
+        <FlexStack
+          space="xxxsmall"
+          alignItems="center"
+          inline
+          as="span"
+          title={builtAt}
+          className={css.itemMeta}
+        >
+          <Icon glyph="clock" className={css.itemMetaIcon} />
+          <span className={css.itemMetaText}>
+            {formatDateTime({ dateStyle: 'medium', timeStyle: 'medium' }, builtAt)}
+          </span>
+        </FlexStack>
+      )}
+
+      {hash && (
+        <FlexStack
+          space="xxxsmall"
+          alignItems="center"
+          inline
+          as="span"
+          title="Webpack bundle hash"
+          className={css.itemMeta}
+        >
+          <Icon glyph="commit" className={css.itemMetaIcon} />
+          <span className={css.itemMetaText}>{hash.slice(0, 7)}</span>
+        </FlexStack>
+      )}
+    </FlexStack>
+  );
+};
+
+interface JobsHeaderProps {
+  jobs?: Array<ItemProps['job']> | null;
+}
+
+export const JobsHeader = (props: JobsHeaderProps & React.ComponentProps<'header'>) => {
+  const { className, jobs } = props;
+  const rootClassName = cx(css.root, className);
+
+  return (
+    <header className={rootClassName}>
+      {jobs?.map((job, index) => (
+        <Item
+          key={job.internalBuildNumber || index}
+          job={job}
+          tag={index === 0 ? I18N.CURRENT : I18N.BASELINE}
+        />
+      ))}
+    </header>
+  );
+};

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

@@ -1,5 +1,10 @@
-.chunksTitle {
-  margin-right: var(--space-xxxsmall);
+.label {
+  display: inline-block;
+  min-width: 6em;
+}
+
+.label::after {
+  content: ' ';
 }
 
 .chunksItems {

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

@@ -2,7 +2,15 @@ import React, { useMemo } from 'react';
 import cx from 'classnames';
 import isEmpty from 'lodash/isEmpty';
 import noop from 'lodash/noop';
-import { BUNDLE_MODULES_DUPLICATE, MetricRunInfo, getBundleModulesByChunk } from '@bundle-stats/utils';
+import {
+  BUNDLE_MODULES_DUPLICATE,
+  FILE_TYPE_LABELS,
+  MODULE_SOURCE_TYPE_LABELS,
+  MetricRunInfo,
+  getBundleModulesByChunk,
+  getBundleModulesByFileTpe,
+  getBundleModulesBySource,
+} from '@bundle-stats/utils';
 import { Module, MetaChunk } from '@bundle-stats/utils/types/webpack';
 
 import { Tag } from '../../ui/tag';
@@ -15,6 +23,8 @@ interface ModuleInfoProps {
     label: string;
     changed?: boolean;
     duplicated?: boolean;
+    thirdParty?: boolean;
+    fileType?: string;
     runs: Array<Module & MetricRunInfo>;
   };
   chunks?: Array<MetaChunk>;
@@ -44,16 +54,24 @@ export const ModuleInfo = (props: ModuleInfoProps & React.ComponentProps<'div'>)
 
     return (
       <div>
-        <Tag as={CustomComponentLink} {...BUNDLE_MODULES_DUPLICATE} onClick={onClick} kind="danger">Duplicate</Tag>
+        <Tag as={CustomComponentLink} {...BUNDLE_MODULES_DUPLICATE} onClick={onClick} kind="danger">
+          Duplicate
+        </Tag>
       </div>
     );
   }, [item]);
 
+  const fileTypeLabel = FILE_TYPE_LABELS[item.fileType as keyof typeof FILE_TYPE_LABELS];
+
+  const sourceTypeLabel = item.thirdParty
+    ? MODULE_SOURCE_TYPE_LABELS.THIRD_PARTY
+    : MODULE_SOURCE_TYPE_LABELS.FIRST_PARTY;
+
   return (
     <EntryInfo item={item} labels={labels} tags={tags} className={rootClassName}>
       {!isEmpty(currentRun?.chunkIds) && (
         <div className={css.chunks}>
-          <span className={css.chunksTitle}>Chunks:</span>
+          <span className={css.label}>Chunks</span>
           {currentRun.chunkIds.map((chunkId) => {
             const chunk = chunks?.find(({ id }) => id === chunkId);
 
@@ -74,6 +92,30 @@ export const ModuleInfo = (props: ModuleInfoProps & React.ComponentProps<'div'>)
           })}
         </div>
       )}
+
+      {item?.fileType && (
+        <p>
+          <span className={css.label}>File type</span>
+          <Tag
+            as={CustomComponentLink}
+            {...getBundleModulesByFileTpe(item.fileType, fileTypeLabel)}
+            onClick={onClick}
+          >
+            {fileTypeLabel}
+          </Tag>
+        </p>
+      )}
+
+      <p>
+        <span className={css.label}>Source</span>
+        <Tag
+          as={CustomComponentLink}
+          {...getBundleModulesBySource(item.thirdParty || false, sourceTypeLabel)}
+          onClick={onClick}
+        >
+          {sourceTypeLabel}
+        </Tag>
+      </p>
     </EntryInfo>
   );
 };

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

@@ -11,3 +11,13 @@
 .packageTitleId {
   color: var(--color-text-ultra-light);
 }
+
+.label {
+  display: inline-block;
+  min-width: 6em;
+}
+
+.label::after {
+  content: ' ';
+}
+