@bundle-stats/ui 4.3.0 → 4.3.2

package/lib-esm/components/jobs-header/jobs-header.js

@@ -1,23 +1,32 @@
 import React from 'react';
-import PropTypes from 'prop-types';
 import cx from 'classnames';
+import { formatDateTime } from '@bundle-stats/utils';
 import I18N from '../../i18n';
 import { FlexStack } from '../../layout/flex-stack';
-import { JobHeader } from '../job-header';
+import { Stack } from '../../layout/stack';
+import { Icon } from '../../ui/icon';
+import { Tag } from '../../ui/tag';
 import css from './jobs-header.module.css';
+export const Item = (props) => {
+    var _a;
+    const { className, tag, job } = props;
+    const { builtAt, hash } = ((_a = job.meta) === null || _a === void 0 ? void 0 : _a.webpack) || {};
+    const rootClassName = cx(css.item, className);
+    return (React.createElement(Stack, { className: rootClassName, space: "xxsmall" },
+        React.createElement(FlexStack, { space: "xsmall", alignItems: "center" },
+            React.createElement(FlexStack, { space: "xxxsmall", as: "h1", className: css.itemTitle },
+                React.createElement("span", null, `#${job.internalBuildNumber}`),
+                tag && React.createElement(Tag, { className: css.itemTag }, tag)),
+            builtAt && (React.createElement(FlexStack, { space: "xxxsmall", alignItems: "center", inline: true, as: "span", title: builtAt, className: css.itemMeta },
+                React.createElement(Icon, { glyph: "clock", className: css.itemMetaIcon }),
+                React.createElement("span", { className: css.itemMetaText }, formatDateTime({ dateStyle: 'medium', timeStyle: 'medium' }, builtAt)))),
+            hash && (React.createElement(FlexStack, { space: "xxxsmall", alignItems: "center", inline: true, title: "Webpack bundle hash", className: css.itemMeta },
+                React.createElement(Icon, { glyph: "commit", className: css.itemMetaIcon }),
+                React.createElement("span", { className: css.itemMetaText }, hash.slice(0, 7)))))));
+};
 export const JobsHeader = (props) => {
     const { className, jobs } = props;
     const rootClassName = cx(css.root, className);
-    return (React.createElement(FlexStack, { className: rootClassName, space: "none" }, jobs === null || jobs === void 0 ? void 0 : jobs.map((job, index) => (React.createElement(JobHeader, { key: job.internalBuildNumber || index, className: css.item, job: job, tag: index === 0 ? I18N.CURRENT : I18N.BASELINE })))));
-};
-JobsHeader.propTypes = {
-    className: PropTypes.string,
-    jobs: PropTypes.arrayOf(PropTypes.shape({
-        internalBuildNumber: PropTypes.number,
-    })),
-};
-JobsHeader.defaultProps = {
-    className: '',
-    jobs: null,
+    return (React.createElement(FlexStack, { className: rootClassName }, jobs === null || jobs === void 0 ? void 0 : jobs.map((job, index) => (React.createElement(Item, { key: job.internalBuildNumber || index, job: job, tag: index === 0 ? I18N.CURRENT : I18N.BASELINE })))));
 };
 //# sourceMappingURL=jobs-header.js.map

package/lib-esm/components/jobs-header/jobs-header.js.map

@@ -1 +1 @@
-{"version":3,"file":"jobs-header.js","sourceRoot":"","sources":["../../../src/components/jobs-header/jobs-header.jsx"],"names":[],"mappings":"AAAA,OAAO,KAAK,MAAM,OAAO,CAAC;AAC1B,OAAO,SAAS,MAAM,YAAY,CAAC;AACnC,OAAO,EAAE,MAAM,YAAY,CAAC;AAE5B,OAAO,IAAI,MAAM,YAAY,CAAC;AAC9B,OAAO,EAAE,SAAS,EAAE,MAAM,yBAAyB,CAAC;AACpD,OAAO,EAAE,SAAS,EAAE,MAAM,eAAe,CAAC;AAC1C,OAAO,GAAG,MAAM,0BAA0B,CAAC;AAE3C,MAAM,CAAC,MAAM,UAAU,GAAG,CAAC,KAAK,EAAE,EAAE;IAClC,MAAM,EAAE,SAAS,EAAE,IAAI,EAAE,GAAG,KAAK,CAAC;IAClC,MAAM,aAAa,GAAG,EAAE,CAAC,GAAG,CAAC,IAAI,EAAE,SAAS,CAAC,CAAC;IAE9C,OAAO,CACL,oBAAC,SAAS,IAAC,SAAS,EAAE,aAAa,EAAE,KAAK,EAAC,MAAM,IAC9C,IAAI,aAAJ,IAAI,uBAAJ,IAAI,CAAE,GAAG,CAAC,CAAC,GAAG,EAAE,KAAK,EAAE,EAAE,CAAC,CACzB,oBAAC,SAAS,IACR,GAAG,EAAE,GAAG,CAAC,mBAAmB,IAAI,KAAK,EACrC,SAAS,EAAE,GAAG,CAAC,IAAI,EACnB,GAAG,EAAE,GAAG,EACR,GAAG,EAAE,KAAK,KAAK,CAAC,CAAC,CAAC,CAAC,IAAI,CAAC,OAAO,CAAC,CAAC,CAAC,IAAI,CAAC,QAAQ,GAC/C,CACH,CAAC,CACQ,CACb,CAAC;AACJ,CAAC,CAAC;AAEF,UAAU,CAAC,SAAS,GAAG;IAErB,SAAS,EAAE,SAAS,CAAC,MAAM;IAG3B,IAAI,EAAE,SAAS,CAAC,OAAO,CACrB,SAAS,CAAC,KAAK,CAAC;QACd,mBAAmB,EAAE,SAAS,CAAC,MAAM;KACtC,CAAC,CACH;CACF,CAAC;AAEF,UAAU,CAAC,YAAY,GAAG;IACxB,SAAS,EAAE,EAAE;IACb,IAAI,EAAE,IAAI;CACX,CAAC"}
+{"version":3,"file":"jobs-header.js","sourceRoot":"","sources":["../../../src/components/jobs-header/jobs-header.tsx"],"names":[],"mappings":"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"}

package/lib-esm/components/jobs-header/jobs-header.module.css

@@ -1,12 +1,10 @@
 .root {
-  align-items: stretch;
-  flex-wrap: wrap;
   padding: var(--space-small) 0;
 }
 
 .item {
   flex: 0 0 auto;
-  padding: 0 var(--space-medium);
+  padding: 0 var(--space-small);
   border-left: 1px solid var(--color-outline);
 }
 
@@ -14,3 +12,23 @@
   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);
+}

package/lib-esm/components/module-info/module-info.js

@@ -2,7 +2,7 @@ import React, { useMemo } from 'react';
 import cx from 'classnames';
 import isEmpty from 'lodash/isEmpty';
 import noop from 'lodash/noop';
-import { BUNDLE_MODULES_DUPLICATE, getBundleModulesByChunk } from '@bundle-stats/utils';
+import { BUNDLE_MODULES_DUPLICATE, FILE_TYPE_LABELS, MODULE_SOURCE_TYPE_LABELS, getBundleModulesByChunk, getBundleModulesByFileTpe, getBundleModulesBySource, } from '@bundle-stats/utils';
 import { Tag } from '../../ui/tag';
 import { ComponentLink } from '../component-link';
 import { EntryInfo } from '../entry-info';
@@ -19,14 +19,25 @@ export const ModuleInfo = (props) => {
         return (React.createElement("div", null,
             React.createElement(Tag, { as: CustomComponentLink, ...BUNDLE_MODULES_DUPLICATE, onClick: onClick, kind: "danger" }, "Duplicate")));
     }, [item]);
-    return (React.createElement(EntryInfo, { item: item, labels: labels, tags: tags, className: rootClassName }, !isEmpty(currentRun === null || currentRun === void 0 ? void 0 : currentRun.chunkIds) && (React.createElement("div", { className: css.chunks },
-        React.createElement("span", { className: css.chunksTitle }, "Chunks:"),
-        currentRun.chunkIds.map((chunkId) => {
-            const chunk = chunks === null || chunks === void 0 ? void 0 : chunks.find(({ id }) => id === chunkId);
-            if (!chunk) {
-                return null;
-            }
-            return (React.createElement(Tag, { as: CustomComponentLink, ...getBundleModulesByChunk(chunkIds, chunkId), onClick: onClick, className: css.chunksItem }, chunk.name));
-        })))));
+    const fileTypeLabel = FILE_TYPE_LABELS[item.fileType];
+    const sourceTypeLabel = item.thirdParty
+        ? MODULE_SOURCE_TYPE_LABELS.THIRD_PARTY
+        : MODULE_SOURCE_TYPE_LABELS.FIRST_PARTY;
+    return (React.createElement(EntryInfo, { item: item, labels: labels, tags: tags, className: rootClassName },
+        !isEmpty(currentRun === null || currentRun === void 0 ? void 0 : currentRun.chunkIds) && (React.createElement("div", { className: css.chunks },
+            React.createElement("span", { className: css.label }, "Chunks"),
+            currentRun.chunkIds.map((chunkId) => {
+                const chunk = chunks === null || chunks === void 0 ? void 0 : chunks.find(({ id }) => id === chunkId);
+                if (!chunk) {
+                    return null;
+                }
+                return (React.createElement(Tag, { as: CustomComponentLink, ...getBundleModulesByChunk(chunkIds, chunkId), onClick: onClick, className: css.chunksItem }, chunk.name));
+            }))),
+        (item === null || item === void 0 ? void 0 : item.fileType) && (React.createElement("p", null,
+            React.createElement("span", { className: css.label }, "File type"),
+            React.createElement(Tag, { as: CustomComponentLink, ...getBundleModulesByFileTpe(item.fileType, fileTypeLabel), onClick: onClick }, fileTypeLabel))),
+        React.createElement("p", null,
+            React.createElement("span", { className: css.label }, "Source"),
+            React.createElement(Tag, { as: CustomComponentLink, ...getBundleModulesBySource(item.thirdParty || false, sourceTypeLabel), onClick: onClick }, sourceTypeLabel))));
 };
 //# sourceMappingURL=module-info.js.map

package/lib-esm/components/module-info/module-info.js.map

@@ -1 +1 @@
-{"version":3,"file":"module-info.js","sourceRoot":"","sources":["../../../src/components/module-info/module-info.tsx"],"names":[],"mappings":"AAAA,OAAO,KAAK,EAAE,EAAE,OAAO,EAAE,MAAM,OAAO,CAAC;AACvC,OAAO,EAAE,MAAM,YAAY,CAAC;AAC5B,OAAO,OAAO,MAAM,gBAAgB,CAAC;AACrC,OAAO,IAAI,MAAM,aAAa,CAAC;AAC/B,OAAO,EAAE,wBAAwB,EAAiB,uBAAuB,EAAE,MAAM,qBAAqB,CAAC;AAGvG,OAAO,EAAE,GAAG,EAAE,MAAM,cAAc,CAAC;AACnC,OAAO,EAAE,aAAa,EAAE,MAAM,mBAAmB,CAAC;AAClD,OAAO,EAAE,SAAS,EAAE,MAAM,eAAe,CAAC;AAC1C,OAAO,GAAG,MAAM,0BAA0B,CAAC;AAe3C,MAAM,CAAC,MAAM,UAAU,GAAG,CAAC,KAAoD,EAAE,EAAE;;IACjF,MAAM,EACJ,SAAS,GAAG,EAAE,EACd,IAAI,EACJ,MAAM,EACN,MAAM,GAAG,EAAE,EACX,QAAQ,GAAG,EAAE,EACb,mBAAmB,EAAE,mBAAmB,GAAG,aAAa,EACxD,OAAO,GAAG,IAAI,GACf,GAAG,KAAK,CAAC;IAEV,MAAM,aAAa,GAAG,EAAE,CAAC,GAAG,CAAC,IAAI,EAAE,SAAS,CAAC,CAAC;IAC9C,MAAM,UAAU,GAAG,MAAA,IAAI,CAAC,IAAI,0CAAG,CAAC,CAAC,CAAC;IAElC,MAAM,IAAI,GAAG,OAAO,CAAC,GAAG,EAAE;QACxB,IAAI,CAAC,IAAI,CAAC,UAAU,EAAE;YACpB,OAAO,IAAI,CAAC;SACb;QAED,OAAO,CACL;YACE,oBAAC,GAAG,IAAC,EAAE,EAAE,mBAAmB,KAAM,wBAAwB,EAAE,OAAO,EAAE,OAAO,EAAE,IAAI,EAAC,QAAQ,gBAAgB,CACvG,CACP,CAAC;IACJ,CAAC,EAAE,CAAC,IAAI,CAAC,CAAC,CAAC;IAEX,OAAO,CACL,oBAAC,SAAS,IAAC,IAAI,EAAE,IAAI,EAAE,MAAM,EAAE,MAAM,EAAE,IAAI,EAAE,IAAI,EAAE,SAAS,EAAE,aAAa,IACxE,CAAC,OAAO,CAAC,UAAU,aAAV,UAAU,uBAAV,UAAU,CAAE,QAAQ,CAAC,IAAI,CACjC,6BAAK,SAAS,EAAE,GAAG,CAAC,MAAM;QACxB,8BAAM,SAAS,EAAE,GAAG,CAAC,WAAW,cAAgB;QAC/C,UAAU,CAAC,QAAQ,CAAC,GAAG,CAAC,CAAC,OAAO,EAAE,EAAE;YACnC,MAAM,KAAK,GAAG,MAAM,aAAN,MAAM,uBAAN,MAAM,CAAE,IAAI,CAAC,CAAC,EAAE,EAAE,EAAE,EAAE,EAAE,CAAC,EAAE,KAAK,OAAO,CAAC,CAAC;YAEvD,IAAI,CAAC,KAAK,EAAE;gBACV,OAAO,IAAI,CAAC;aACb;YAED,OAAO,CACL,oBAAC,GAAG,IACF,EAAE,EAAE,mBAAmB,KACnB,uBAAuB,CAAC,QAAQ,EAAE,OAAO,CAAC,EAC9C,OAAO,EAAE,OAAO,EAChB,SAAS,EAAE,GAAG,CAAC,UAAU,IAExB,KAAK,CAAC,IAAI,CACP,CACP,CAAC;QACJ,CAAC,CAAC,CACE,CACP,CACS,CACb,CAAC;AACJ,CAAC,CAAC"}
+{"version":3,"file":"module-info.js","sourceRoot":"","sources":["../../../src/components/module-info/module-info.tsx"],"names":[],"mappings":"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"}

package/lib-esm/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/lib-esm/components/package-info/package-info.js

@@ -8,17 +8,20 @@ import { FileName } from '../../ui/file-name';
 import { Tag } from '../../ui/tag';
 import { EntryInfo } from '../entry-info';
 import css from './package-info.module.css';
+import { Icon } from '../../ui';
 export const PackageInfo = (props) => {
     var _a, _b;
-    const { className = '', name, item, labels, customComponentLink: CustomComponentLink = ComponentLink, onClick = noop } = props;
-    const fallbackPackagePath = `node_modules/${item.label.split(PACKAGES_SEPARATOR).join('/node_modules/')}`;
+    const { className = '', name, item, labels, customComponentLink: CustomComponentLink = ComponentLink, onClick = noop, } = props;
+    const fallbackPackagePath = `node_modules/${item.label
+        .split(PACKAGES_SEPARATOR)
+        .join('/node_modules/')}`;
     const normalizedPackagePath = `${((_b = (_a = item.runs) === null || _a === void 0 ? void 0 : _a[0]) === null || _b === void 0 ? void 0 : _b.path) || fallbackPackagePath}/`;
     const [normalizedName, packageId] = name.split(PACKAGE_ID_SEPARATOR);
     const packageTitle = useMemo(() => (React.createElement("span", { className: css.packageTitle },
         React.createElement("span", { className: css.packageTitleText }, normalizedName),
-        packageId && React.createElement("span", { className: css.packageTitleId },
+        packageId && (React.createElement("span", { className: css.packageTitleId },
             PACKAGE_ID_SEPARATOR,
-            packageId))), [normalizedName, packageId]);
+            packageId)))), [normalizedName, packageId]);
     const tags = useMemo(() => {
         if (!item.duplicate) {
             return null;
@@ -29,14 +32,18 @@ export const PackageInfo = (props) => {
     return (React.createElement(EntryInfo, { itemTitle: packageTitle, item: item, labels: labels, tags: tags, runNameSelector: "path", className: className },
         React.createElement(Stack, { space: "small" },
             React.createElement("p", null,
-                "Path: ",
+                React.createElement("span", { className: css.label }, "Path"),
                 React.createElement(FileName, { name: normalizedPackagePath, className: css.fileName })),
             React.createElement(Stack, { space: "xxxsmall" },
                 item.duplicate && (React.createElement("div", null,
-                    React.createElement(CustomComponentLink, { ...getBundlePackagesByNameComponentLink(normalizedName) }, "View all duplicate instances"))),
+                    React.createElement(CustomComponentLink, { ...getBundlePackagesByNameComponentLink(normalizedName), onClick: onClick }, "View all duplicate instances"))),
                 React.createElement(CustomComponentLink, { ...getBundleModulesBySearch(normalizedPackagePath) }, "Search modules by package path")),
             React.createElement(FlexStack, { space: "xsmall", alignItems: "center", className: css.external },
-                React.createElement("a", { href: `https://www.npmjs.com/package/${normalizedName}`, target: "_blank", rel: "noreferrer", className: css.externalLink }, "npmjs.com"),
-                React.createElement("a", { href: `https://bundlephobia.com/result?p=${normalizedName}`, target: "_blank", rel: "noreferrer", className: css.externalLink }, "bundlephobia.com")))));
+                React.createElement(FlexStack, { space: "xxxsmall", alignItems: "center", as: "a", href: `https://www.npmjs.com/package/${normalizedName}`, target: "_blank", rel: "noreferrer", className: css.externalLink },
+                    React.createElement("span", null, "npmjs.com"),
+                    React.createElement(Icon, { glyph: Icon.ICONS.EXTERNAL_LINK, size: "small" })),
+                React.createElement(FlexStack, { space: "xxxsmall", alignItems: "center", as: "a", href: `https://bundlephobia.com/result?p=${normalizedName}`, target: "_blank", rel: "noreferrer", className: css.externalLink },
+                    React.createElement("span", null, "bundlephobia.com"),
+                    React.createElement(Icon, { glyph: Icon.ICONS.EXTERNAL_LINK, size: "small" }))))));
 };
 //# sourceMappingURL=package-info.js.map

package/lib-esm/components/package-info/package-info.js.map

@@ -1 +1 @@
-{"version":3,"file":"package-info.js","sourceRoot":"","sources":["../../../src/components/package-info/package-info.tsx"],"names":[],"mappings":"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"}
+{"version":3,"file":"package-info.js","sourceRoot":"","sources":["../../../src/components/package-info/package-info.tsx"],"names":[],"mappings":"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"}

package/lib-esm/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: ' ';
+}
+

package/lib-esm/ui/icon/icon.js

@@ -10,6 +10,7 @@ const ICONS = {
     CLOCK: 'clock',
     COMMIT: 'commit',
     ERROR: 'error',
+    EXTERNAL_LINK: 'external-link',
     FILTER: 'filter',
     INFO: 'info',
     HELP: 'help',

package/lib-esm/ui/icon/icon.js.map

@@ -1 +1 @@
-{"version":3,"file":"icon.js","sourceRoot":"","sources":["../../../src/ui/icon/icon.jsx"],"names":[],"mappings":"AAAA,OAAO,KAAK,MAAM,OAAO,CAAC;AAC1B,OAAO,SAAS,MAAM,YAAY,CAAC;AACnC,OAAO,EAAE,MAAM,YAAY,CAAC;AAE5B,OAAO,GAAG,MAAM,mBAAmB,CAAC;AAEpC,MAAM,KAAK,GAAG;IACZ,KAAK,EAAE,OAAO;IACd,kBAAkB,EAAE,oBAAoB;IACxC,MAAM,EAAE,QAAQ;IAChB,KAAK,EAAE,OAAO;IACd,KAAK,EAAE,OAAO;IACd,MAAM,EAAE,QAAQ;IAChB,KAAK,EAAE,OAAO;IACd,MAAM,EAAE,QAAQ;IAChB,IAAI,EAAE,MAAM;IACZ,IAAI,EAAE,MAAM;IACZ,IAAI,EAAE,MAAM;IACZ,aAAa,EAAE,eAAe;IAC9B,IAAI,EAAE,MAAM;IACZ,OAAO,EAAE,SAAS;CACnB,CAAC;AAEF,MAAM,CAAC,MAAM,IAAI,GAAG,CAAC,KAAK,EAAE,EAAE;IAC5B,MAAM,EAAE,SAAS,EAAE,KAAK,EAAE,EAAE,EAAE,SAAS,EAAE,IAAI,EAAE,GAAG,SAAS,EAAE,GAAG,KAAK,CAAC;IAEtE,OAAO,CACL,oBAAC,SAAS,IAAC,SAAS,EAAE,EAAE,CAAC,GAAG,CAAC,IAAI,EAAE,SAAS,EAAE,GAAG,CAAC,IAAI,CAAC,CAAC,KAAM,SAAS;QACrE,6BAAK,SAAS,EAAE,GAAG,CAAC,IAAI;YACtB,6BAAK,SAAS,EAAE,IAAI,KAAK,EAAE,GAAI,CAC3B,CACI,CACb,CAAC;AACJ,CAAC,CAAC;AAEF,IAAI,CAAC,KAAK,GAAG,KAAK,CAAC;AAEnB,IAAI,CAAC,UAAU,GAAG,OAAO,CAAC;AAC1B,IAAI,CAAC,WAAW,GAAG,QAAQ,CAAC;AAC5B,IAAI,CAAC,UAAU,GAAG,OAAO,CAAC;AAC1B,IAAI,CAAC,KAAK,GAAG,CAAC,IAAI,CAAC,UAAU,EAAE,IAAI,CAAC,WAAW,EAAE,IAAI,CAAC,UAAU,CAAC,CAAC;AAElE,IAAI,CAAC,YAAY,GAAG;IAClB,SAAS,EAAE,EAAE;IACb,EAAE,EAAE,MAAM;IACV,IAAI,EAAE,IAAI,CAAC,WAAW;CACvB,CAAC;AAEF,IAAI,CAAC,SAAS,GAAG;IACf,SAAS,EAAE,SAAS,CAAC,MAAM;IAC3B,KAAK,EAAE,SAAS,CAAC,SAAS,CAAC,CAAC,SAAS,CAAC,KAAK,CAAC,MAAM,CAAC,MAAM,CAAC,KAAK,CAAC,CAAC,EAAE,SAAS,CAAC,IAAI,CAAC,CAAC,CAAC,UAAU;IAC9F,EAAE,EAAE,SAAS,CAAC,IAAI;IAClB,IAAI,EAAE,SAAS,CAAC,KAAK,CAAC,IAAI,CAAC,KAAK,CAAC;CAClC,CAAC"}
+{"version":3,"file":"icon.js","sourceRoot":"","sources":["../../../src/ui/icon/icon.jsx"],"names":[],"mappings":"AAAA,OAAO,KAAK,MAAM,OAAO,CAAC;AAC1B,OAAO,SAAS,MAAM,YAAY,CAAC;AACnC,OAAO,EAAE,MAAM,YAAY,CAAC;AAE5B,OAAO,GAAG,MAAM,mBAAmB,CAAC;AAEpC,MAAM,KAAK,GAAG;IACZ,KAAK,EAAE,OAAO;IACd,kBAAkB,EAAE,oBAAoB;IACxC,MAAM,EAAE,QAAQ;IAChB,KAAK,EAAE,OAAO;IACd,KAAK,EAAE,OAAO;IACd,MAAM,EAAE,QAAQ;IAChB,KAAK,EAAE,OAAO;IACd,aAAa,EAAE,eAAe;IAC9B,MAAM,EAAE,QAAQ;IAChB,IAAI,EAAE,MAAM;IACZ,IAAI,EAAE,MAAM;IACZ,IAAI,EAAE,MAAM;IACZ,aAAa,EAAE,eAAe;IAC9B,IAAI,EAAE,MAAM;IACZ,OAAO,EAAE,SAAS;CACnB,CAAC;AAEF,MAAM,CAAC,MAAM,IAAI,GAAG,CAAC,KAAK,EAAE,EAAE;IAC5B,MAAM,EAAE,SAAS,EAAE,KAAK,EAAE,EAAE,EAAE,SAAS,EAAE,IAAI,EAAE,GAAG,SAAS,EAAE,GAAG,KAAK,CAAC;IAEtE,OAAO,CACL,oBAAC,SAAS,IAAC,SAAS,EAAE,EAAE,CAAC,GAAG,CAAC,IAAI,EAAE,SAAS,EAAE,GAAG,CAAC,IAAI,CAAC,CAAC,KAAM,SAAS;QACrE,6BAAK,SAAS,EAAE,GAAG,CAAC,IAAI;YACtB,6BAAK,SAAS,EAAE,IAAI,KAAK,EAAE,GAAI,CAC3B,CACI,CACb,CAAC;AACJ,CAAC,CAAC;AAEF,IAAI,CAAC,KAAK,GAAG,KAAK,CAAC;AAEnB,IAAI,CAAC,UAAU,GAAG,OAAO,CAAC;AAC1B,IAAI,CAAC,WAAW,GAAG,QAAQ,CAAC;AAC5B,IAAI,CAAC,UAAU,GAAG,OAAO,CAAC;AAC1B,IAAI,CAAC,KAAK,GAAG,CAAC,IAAI,CAAC,UAAU,EAAE,IAAI,CAAC,WAAW,EAAE,IAAI,CAAC,UAAU,CAAC,CAAC;AAElE,IAAI,CAAC,YAAY,GAAG;IAClB,SAAS,EAAE,EAAE;IACb,EAAE,EAAE,MAAM;IACV,IAAI,EAAE,IAAI,CAAC,WAAW;CACvB,CAAC;AAEF,IAAI,CAAC,SAAS,GAAG;IACf,SAAS,EAAE,SAAS,CAAC,MAAM;IAC3B,KAAK,EAAE,SAAS,CAAC,SAAS,CAAC,CAAC,SAAS,CAAC,KAAK,CAAC,MAAM,CAAC,MAAM,CAAC,KAAK,CAAC,CAAC,EAAE,SAAS,CAAC,IAAI,CAAC,CAAC,CAAC,UAAU;IAC9F,EAAE,EAAE,SAAS,CAAC,IAAI;IAClB,IAAI,EAAE,SAAS,CAAC,KAAK,CAAC,IAAI,CAAC,KAAK,CAAC;CAClC,CAAC"}

package/lib-esm/ui/tooltip/tooltip.module.css

@@ -19,7 +19,6 @@
   filter: drop-shadow(var(--shadow-layer));
   will-change: filter;
   font-size: var(--size-xsmall);
-  text-align: center;
 }
 
 .arrow svg {

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@bundle-stats/ui",
-  "version": "4.3.0",
+  "version": "4.3.2",
   "description": "UI components for BundleStats projects.",
   "main": "lib/index.js",
   "module": "lib-esm/index.js",
@@ -45,7 +45,7 @@
     "@storybook/builder-webpack5": "6.5.16",
     "@storybook/manager-webpack5": "6.5.16",
     "@storybook/react": "6.5.16",
-    "@types/react": "18.0.34",
+    "@types/react": "18.0.35",
     "babel-plugin-require-context-hook": "1.0.0",
     "classnames": "2.3.2",
     "colormap": "2.3.2",
@@ -76,11 +76,11 @@
     "react-router-dom": "^5.0.0"
   },
   "dependencies": {
-    "@bundle-stats/utils": "^4.3.0",
+    "@bundle-stats/utils": "^4.3.2",
     "ariakit": "2.0.0-next.44",
     "modern-css-reset": "1.4.0",
     "query-string": "7.1.3",
     "use-query-params": "2.2.1"
   },
-  "gitHead": "90222d3a9e3fb75fd648987a798852863247d817"
+  "gitHead": "9c09c9504f6cf796860662a1db9617a5b70e9f47"
 }

package/src/app/app.module.css

@@ -14,7 +14,7 @@
 
 .summaryContainer {
   padding-top: var(--space-medium);
-  padding-bottom: var(--space-small);
+  padding-bottom: var(--space-xsmall);
 }
 
 .tabsContainer {
@@ -42,7 +42,7 @@
 
 @media (min-width: 600px) {
   :root {
-    --header-height: 72px;
+    --header-height: 52px;
   }
 
   .header {

package/src/assets/icons/external-link.svg

@@ -0,0 +1 @@
+<svg xmlns="http://www.w3.org/2000/svg" width="24" height="24" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round" class="feather feather-external-link"><path d="M18 13v6a2 2 0 0 1-2 2H5a2 2 0 0 1-2-2V8a2 2 0 0 1 2-2h6"></path><polyline points="15 3 21 3 21 9"></polyline><line x1="10" y1="14" x2="21" y2="3"></line></svg>

package/src/assets/icons.svg

@@ -26,6 +26,9 @@
 <circle cx="12" cy="12" r="10"/>
 <path d="M12 8v4M12 16h.01"/>
 </symbol>
+<symbol fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round" class="feather feather-external-link" viewBox="0 0 24 24" id="external-link" xmlns="http://www.w3.org/2000/svg">
+<path d="M18 13v6a2 2 0 01-2 2H5a2 2 0 01-2-2V8a2 2 0 012-2h6M15 3h6v6M10 14L21 3"/>
+</symbol>
 <symbol viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round" class="feather feather-bar-chart" id="filter" xmlns="http://www.w3.org/2000/svg">
 <path d="M12 20V10M18 20V4M6 20v-4"/>
 </symbol>

package/src/assets/icons.svg.jsx

@@ -98,6 +98,19 @@ export const SvgIcons = (props) => (
       <circle cx="12" cy="12" r="10" />
       <path d="M12 8v4M12 16h.01" />
     </symbol>
+    <symbol
+      fill="none"
+      stroke="currentColor"
+      stroke-width="2"
+      stroke-linecap="round"
+      stroke-linejoin="round"
+      class="feather feather-external-link"
+      viewBox="0 0 24 24"
+      id="external-link"
+      xmlns="http://www.w3.org/2000/svg"
+    >
+      <path d="M18 13v6a2 2 0 01-2 2H5a2 2 0 01-2-2V8a2 2 0 012-2h6M15 3h6v6M10 14L21 3" />
+    </symbol>
     <symbol
       viewBox="0 0 24 24"
       fill="none"

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

@@ -19,3 +19,13 @@
 .assetNameTagChunk {
   background: var(--color-info-light);
 }
+
+.label {
+  display: inline-block;
+  min-width: 6em;
+}
+
+.label::after {
+  content: ' ';
+}
+

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';