@bundle-stats/ui 4.2.2 → 4.2.3-beta.1

package/lib-esm/components/metrics-treemap/metrics-treemap.module.css

@@ -0,0 +1,325 @@
+.root {
+  position: relative;
+  aspect-ratio: 16/9;
+  background: var(--color-background);
+  border-bottom-left-radius: inherit;
+  border-bottom-right-radius: inherit;
+  overflow: hidden;
+}
+
+.canvas {
+  position: absolute;
+  left: 0;
+  top: 0;
+  width: 100%;
+  height: 100%;
+  background: var(--color-background);
+}
+
+/**
+ * Tile group
+ */
+.tileGroup {
+  position: absolute;
+}
+
+.tileGroupTitle {
+  width: 100%;
+  cursor: default;
+}
+
+.tileGroupTitleContent {
+  width: 100%;
+  padding: var(--space-xxxsmall) 2px var(--space-xxxsmall) var(--space-xxsmall);
+  display: flex;
+  align-items: center;
+  color: var(--color-text);
+  font-family: var(--font-family-fixed);
+  font-size: 10px;
+  line-height: var(--space-small);
+  overflow: hidden;
+  white-space: nowrap;
+  text-overflow: ellipsis;
+}
+
+.tileGroupTitleText,
+.tileGroupTitleTotal {
+  flex: 0 0 auto;
+  min-width: 0;
+}
+
+.tileGroupTitleTotal {
+  margin-left: var(--space-xxsmall);
+  color: var(--color-text-light);
+}
+
+.tileGroupTitle {
+  transition: var(--transition-out);
+}
+
+.tileGroupTitle:hover .tileGroupTitleText {
+  text-decoration: underline;
+  transition: var(--transition-in);
+}
+
+/** Tile group size variation */
+.tileGroup {
+  transition: var(--transition-out);
+  transition-property: background-color, outline;
+}
+
+.tileGroup--minimal .tileGroupTitle,
+.tileGroup--small .tileGroupTitle {
+  height: 100%; /* full height when title is missing or we do not render any children */
+}
+
+.tileGroup--minimal .tileGroupTitleContent,
+.tileGroup--small .tileGroupTitleContent {
+  min-height: 100%;
+}
+
+/** Tile group nested variation */
+.nested .tileGroup {
+  background-color: rgba(27, 26, 33, 0.03);
+  outline: 1px solid rgba(255, 255, 255, 0.8);
+}
+
+.nested .tileGroup:has(> .tileGroupTitle:hover),
+.nested .tileGroup:has(> .tile:hover) {
+  background-color: rgba(27, 26, 33, 0.06);
+  outline: 1px solid rgba(255, 255, 255, 1);
+  transition: var(--transition-in);
+  transition-property: background-color, outline;
+}
+
+.nested .tileGroup--NEGATIVE {
+  background-color: rgba(194, 31, 37, 0.04);
+}
+
+.nested .tileGroup--NEGATIVE:has(> .tileGroupTitle:hover),
+.nested .tileGroup--NEGATIVE:has(> .tile:hover) {
+  background-color: rgba(194, 31, 37, 0.1);
+}
+
+.nested .tileGroup--POSITIVE {
+  background-color: rgba(42, 147, 39, 0.04);
+}
+
+.nested .tileGroup--POSITIVE:has(> .tileGroupTitle:hover),
+.nested .tileGroup--POSITIVE:has(> .tile:hover) {
+  background-color: rgba(42, 147, 39, 0.1);
+}
+
+/* reset bacground color when having a not changed group */
+.nested .tileGroup--POSITIVE > .tileGroup--NO_CHANGE,
+.nested .tileGroup--NEGATIVE > .tileGroup--NO_CHANGE {
+  background-color: var(--color-background);
+  background-image: linear-gradient(rgba(27, 26, 33, 0.1), rgba(27, 26, 33, 0.1));
+}
+
+.nested .tileGroup--POSITIVE > .tileGroup--NO_CHANGE:has(> .tileGroupTitle:hover),
+.nested .tileGroup--POSITIVE > .tileGroup--NO_CHANGE:has(> .tile:hover),
+.nested .tileGroup--NEGATIVE > .tileGroup--NO_CHANGE:has(> .tileGroupTitle:hover),
+.nested .tileGroup--NEGATIVE > .tileGroup--NEGATIVE > .tileGroup--NO_CHANGE:has(> .tile:hover) {
+  background-color: var(--color-background);
+  background-image: linear-gradient(rgba(27, 26, 33, 0.1), rgba(27, 26, 33, 0.1));
+}
+
+/** Leaf wrapper button */
+.tile {
+  position: absolute;
+  appearance: none;
+  border: 0;
+  border-radius: 0;
+  padding: 0;
+  background: var(--color-background);
+  display: flex;
+  align-items: center;
+  font-family: var(--font-family-fixed);
+  font-size: var(--size-small);
+  line-height: var(--line-height-heading);
+  text-align: left;
+  transition: var(--transition-out);
+  transition-property: opacity, background-color;
+}
+
+.tile::before {
+  content: "";
+  display: block;
+  position: absolute;
+  z-index: 1;
+  left: 0;
+  top: 0;
+  width: 100%;
+  height: 100%;
+  background-color: currentColor;
+}
+
+.tileContent {
+  position: relative;
+  z-index: 1;
+  width: 100%;
+  height: 100%;
+  display: flex;
+  flex-flow: column;
+  justify-content: center;
+  padding: var(--space-xxsmall) var(--space-xxsmall);
+  gap: var(--space-xxxsmall);
+  line-height: var(--line-height-heading);
+}
+
+/** Align label to other elements on the first column cells */
+.tileFirstCol .tileContent {
+  padding-left: var(--space-small);
+}
+
+.tileContentLabel {
+  flex: 0 1 auto;
+  width: 100%;
+  min-width: 0;
+  line-height: var(--line-height-heading);
+  max-height: calc(2em * var(--line-height-heading)); /* render max 2 rows */
+  overflow-wrap: break-word;
+  word-wrap: break-word;
+  word-break: break-all;
+  word-break: break-word;
+  hyphens: auto;
+  white-space: normal;
+  overflow: hidden;
+}
+
+.tileContentValue {
+  flex: 0 0 auto;
+  max-width: calc(100% + var(--space-xxsmall));
+  white-space: nowrap;
+  overflow: hidden;
+}
+
+.tileContentMetric {
+  font-weight: bold;
+}
+
+.tileContentDelta {
+  margin-left: var(--space-xxxsmall);
+}
+
+/** Tile size variation */
+.tileSizeSmall .tileContent {
+  padding: var(--space-xxxsmall);
+  font-size: 10px;
+}
+
+.tileSizeSmall .tileContentLabel {
+  margin-top: 0;
+}
+
+/** Tile diff variation */
+.tile {
+  outline: 1px solid rgba(255, 255, 255, 1);
+  color: var(--color-text);
+}
+
+.tile::before {
+  color: var(--color-highlight);
+  transition: var(--transition-out);
+  transition-property: opacity;
+  opacity: 0.6;
+}
+
+.tile:hover::before {
+  transition: var(--transition-in);
+  transition-property: opacity;
+  opacity: 0.4;
+}
+
+.tile:hover .tileContentLabel {
+  text-decoration: underline;
+}
+
+.tile-NO_CHANGE {
+  color: var(--color-text-light);
+}
+
+.tile-NO_CHANGE::before {
+  color: var(--color-gray-50);
+  opacity: 0.4;
+}
+
+.tile-NO_CHANGE:hover::before {
+  opacity: 0.2;
+}
+
+.tile-HIGH_NEGATIVE::before {
+  color: var(--color-red-100);
+}
+
+.tile-NEGATIVE::before {
+  color: var(--color-red-50);
+}
+
+.tile-LOW_NEGATIVE::before {
+  color: var(--color-red-50);
+}
+
+.tile-LOW_POSITIVE::before {
+  color: var(--color-green-50);
+}
+
+.tile-POSITIVE::before {
+  color: var(--color-green-50);
+}
+
+.tile-HIGH_POSITIVE::before {
+  color: var(--color-green-100);
+}
+
+/** empty message */
+.emptyMessage {
+  position: absolute;
+  left: 0;
+  top: 0;
+  width: 100%;
+  height: 100%;
+  display: flex;
+  align-items: center;
+  justify-content: center;
+}
+
+.emptyMessageWrapper {
+  max-width: 100%;
+  text-align: center;
+}
+
+/** tooltip */
+.tileContentTooltipAnchor {
+  width: 100%;
+  height: 100%;
+}
+
+.tooltip {
+  z-index: var(--layer-xxhigh);
+  padding: var(--space-xsmall) var(--space-small);
+  border-radius: var(--radius-medium);
+  width: calc(100vw - 2 * var(--space-small));
+  max-width: 340px;
+  outline: none;
+  filter: drop-shadow(var(--shadow-layer-high));
+  will-change: filter;
+  background: var(--color-light);
+  font-size: var(--size-small);
+  pointer-events: none;
+}
+
+.tileTooltipArrow svg {
+  display: block;
+  fill: var(--color-background) !important;
+}
+
+.tileTooltipContentTitle {
+  font-size: var(--size-small);
+}
+
+/* prevent tooltip portal wrapper from capturing events */
+div[role="presentation"]:has(.tooltip) {
+  pointer-events: none;
+}

package/lib-esm/components/metrics-treemap/metrics-treemap.utils.js

@@ -0,0 +1,168 @@
+import { useCallback } from 'react';
+import { useDebounce, useMouseHovered } from 'react-use';
+import { useTooltipState } from 'ariakit/tooltip';
+import { DeltaType, } from '@bundle-stats/utils';
+import { NESTED_PADDING_TOP, } from './metrics-treemap.constants';
+const ROOT_LABEL = '(root)';
+function getReportMetricRowMaxValue(item) {
+    const values = item.runs.map((run) => (run === null || run === void 0 ? void 0 : run.value) || 0);
+    return Math.max(...values);
+}
+export function getTreemapNodes(items) {
+    const rootChildren = items.map((item) => ({
+        id: item.key,
+        label: item.label,
+        value: getReportMetricRowMaxValue(item),
+        item,
+    }));
+    return {
+        id: '',
+        label: ROOT_LABEL,
+        value: 0,
+        children: rootChildren,
+    };
+}
+function getItemValues(runs) {
+    var _a, _b;
+    const runCount = runs === null || runs === void 0 ? void 0 : runs.length;
+    const current = ((_a = runs[0]) === null || _a === void 0 ? void 0 : _a.value) || 0;
+    if (runs.length < 2) {
+        return { current, baseline: undefined };
+    }
+    return {
+        current,
+        baseline: (_b = runs === null || runs === void 0 ? void 0 : runs[runCount - 1]) === null || _b === void 0 ? void 0 : _b.value,
+    };
+}
+function setTreeNode(nodes, slugs, currentSlugId, newNode) {
+    var _a, _b, _c;
+    const baseSlugs = slugs.slice(0, currentSlugId);
+    const [currentSlug, ...restSlug] = slugs.slice(currentSlugId);
+    if (!currentSlug) {
+        nodes.push(newNode);
+        return getItemValues(newNode.item.runs);
+    }
+    const currentNodePath = [...baseSlugs, currentSlug].join('/');
+    let parentNode = nodes.find((treeNode) => treeNode.id === currentNodePath);
+    const nodeValues = getItemValues((_a = newNode === null || newNode === void 0 ? void 0 : newNode.item) === null || _a === void 0 ? void 0 : _a.runs);
+    const hasBaseline = typeof nodeValues.baseline !== 'undefined';
+    if (!parentNode) {
+        parentNode = {
+            id: currentNodePath,
+            label: currentSlug,
+            value: 0,
+            children: [],
+            total: {
+                current: 0,
+                baseline: hasBaseline ? 0 : undefined,
+            },
+        };
+        nodes.push(parentNode);
+    }
+    parentNode.total = {
+        current: (((_b = parentNode.total) === null || _b === void 0 ? void 0 : _b.current) || 0) + nodeValues.current,
+        baseline: hasBaseline
+            ? (((_c = parentNode.total) === null || _c === void 0 ? void 0 : _c.baseline) || 0) + (nodeValues.baseline || 0)
+            : undefined,
+    };
+    if (restSlug.length === 0) {
+        parentNode.children.push(newNode);
+        return getItemValues(newNode.item.runs);
+    }
+    return setTreeNode(parentNode.children, slugs, currentSlugId + 1, newNode);
+}
+export function getTreemapNodesGroupedByPath(items) {
+    const treeNodes = [];
+    const total = { current: 0, baseline: undefined };
+    items.forEach((item) => {
+        const slugs = item.key.split('/');
+        const baseSlugs = slugs.slice(0, -1);
+        const baseName = slugs.slice(-1)[0];
+        const treeNode = {
+            id: item.key,
+            label: baseName,
+            value: getReportMetricRowMaxValue(item),
+            item,
+        };
+        const childrenTotal = setTreeNode(treeNodes, baseSlugs, 0, treeNode);
+        total.current += childrenTotal.current;
+        total.baseline =
+            typeof childrenTotal.baseline !== 'undefined'
+                ? (total.baseline || 0) + childrenTotal.baseline
+                : undefined;
+    });
+    return {
+        id: '',
+        label: ROOT_LABEL,
+        value: 0,
+        children: treeNodes,
+        total,
+    };
+}
+export function resolveGroupDeltaType(metricRunInfo) {
+    if (!metricRunInfo) {
+        return DeltaType.NO_CHANGE;
+    }
+    const deltaType = 'displayDelta' in metricRunInfo ? metricRunInfo.deltaType : undefined;
+    if (deltaType === null || deltaType === void 0 ? void 0 : deltaType.match(/NEGATIVE/)) {
+        return DeltaType.NEGATIVE;
+    }
+    if (deltaType === null || deltaType === void 0 ? void 0 : deltaType.match(/POSITIVE/)) {
+        return DeltaType.POSITIVE;
+    }
+    return DeltaType.NO_CHANGE;
+}
+const PADDING_TOP = 8;
+const PADDING_BOTTOM = 8;
+const PADDING_LEFT = 8;
+const PADDING_RIGHT = 8;
+const LINE_HEIGHT = 16;
+const LINE_HEIGHT_SMALL = 13.3;
+export function resolveTileGroupSizeDisplay(width, height) {
+    if (height < NESTED_PADDING_TOP) {
+        return 'minimal';
+    }
+    if (width < 24) {
+        return 'minimal';
+    }
+    if (height < NESTED_PADDING_TOP + 8) {
+        return 'small';
+    }
+    return 'default';
+}
+export function resolveTileSizeDisplay(width, height) {
+    if (height < PADDING_TOP + PADDING_BOTTOM + LINE_HEIGHT_SMALL) {
+        return 'minimal';
+    }
+    if (width < PADDING_LEFT + PADDING_RIGHT + 42) {
+        return 'minimal';
+    }
+    if (height < PADDING_TOP + PADDING_TOP + LINE_HEIGHT * 2) {
+        return 'small';
+    }
+    if (width < PADDING_LEFT + PADDING_RIGHT + 96) {
+        return 'small';
+    }
+    return 'default';
+}
+export function useTooltipStateWithMouseFollow(options) {
+    const { parentRef, gutter = 16, timeout = 240 } = options;
+    const pointer = useMouseHovered(parentRef, { whenHovered: true });
+    const getAnchorRect = useCallback(() => {
+        var _a, _b, _c, _d;
+        if (pointer.docX === 0 && pointer.docY === 0 && pointer.elW === 0 && pointer.elH === 0) {
+            return null;
+        }
+        const newRect = {
+            x: pointer.docX - ((_b = (_a = document === null || document === void 0 ? void 0 : document.defaultView) === null || _a === void 0 ? void 0 : _a.scrollX) !== null && _b !== void 0 ? _b : 0),
+            y: pointer.docY - ((_d = (_c = document === null || document === void 0 ? void 0 : document.defaultView) === null || _c === void 0 ? void 0 : _c.scrollY) !== null && _d !== void 0 ? _d : 0),
+            w: 1,
+            h: 1,
+        };
+        return newRect;
+    }, [pointer.docX, pointer.docY]);
+    const tooltipState = useTooltipState({ gutter, getAnchorRect, timeout });
+    useDebounce(tooltipState.render, 10, [pointer.docX, pointer.docY]);
+    return tooltipState;
+}
+//# sourceMappingURL=metrics-treemap.utils.js.map

package/lib-esm/components/metrics-treemap/metrics-treemap.utils.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"metrics-treemap.utils.js","sourceRoot":"","sources":["../../../src/components/metrics-treemap/metrics-treemap.utils.ts"],"names":[],"mappings":"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"}

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

@@ -1 +1 @@
-{"version":3,"file":"index.js","sourceRoot":"","sources":["../../../src/components/module-info/index.js"],"names":[],"mappings":"AAAA,cAAc,eAAe,CAAC"}
+{"version":3,"file":"index.js","sourceRoot":"","sources":["../../../src/components/module-info/index.ts"],"names":[],"mappings":"AAAA,cAAc,eAAe,CAAC"}

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

@@ -1,55 +1,113 @@
-import React from 'react';
-import PropTypes from 'prop-types';
-import isEmpty from 'lodash/isEmpty';
+import React, { useMemo } from 'react';
+import cx from 'classnames';
+import orderBy from 'lodash/orderBy';
 import noop from 'lodash/noop';
-import { getBundleModulesByChunk } from '@bundle-stats/utils';
+import { METRIC_TYPE_CONFIGS, BUNDLE_MODULES_DUPLICATE, FILE_TYPE_LABELS, MODULE_SOURCE_TYPE_LABELS, formatNumber, getBundleModulesByChunk, getBundleModulesByFileTpe, getBundleModulesBySource, getMetricRunInfo, } from '@bundle-stats/utils';
 import { Stack } from '../../layout/stack';
-import { FileName } from '../../ui/file-name';
+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';
-export const ModuleInfo = (props) => {
-    const { className, item, labels, chunks, chunkIds, customComponentLink: CustomComponentLink, onClick, } = props;
-    return (React.createElement(Stack, { space: "xsmall", className: className }, item.runs.map((run, index) => {
-        const TitleComponent = index !== 0 ? 'h4' : 'h3';
-        const key = `module-info-${(run === null || run === void 0 ? void 0 : run.name) || index}-${index}`;
-        return (React.createElement(Stack, { space: "xxxsmall", key: key },
-            React.createElement(TitleComponent, null, labels[index]),
-            index === 0 && !isEmpty(run === null || run === void 0 ? void 0 : run.chunkIds) && (React.createElement("div", { className: css.chunks },
-                React.createElement("span", { className: css.chunksTitle }, "Chunks:"),
-                run.chunkIds.map((chunkId) => {
-                    const chunk = chunks === null || chunks === void 0 ? void 0 : chunks.find(({ id }) => id === chunkId);
-                    if (!chunk) {
-                        return null;
-                    }
-                    return (React.createElement(CustomComponentLink, { ...getBundleModulesByChunk(chunkIds, chunkId), onClick: onClick, className: css.chunksItem }, chunk.name));
-                }))),
-            React.createElement(FileName, { className: css.fileName, as: "code", name: (run === null || run === void 0 ? void 0 : run.name) || '-' })));
-    })));
+import { FlexStack } from '../../layout';
+import { ModuleSizeMetric, ModuleSizeMetrics } from '../../constants';
+const DuplicateInstances = ({ current, baseline }) => {
+    const runInfo = getMetricRunInfo({
+        biggerIsBetter: false,
+        formatter: formatNumber,
+    }, current, baseline);
+    return (React.createElement(RunInfo, { current: runInfo.displayValue, delta: runInfo.displayDeltaPercentage, deltaPercentage: runInfo.displayDelta, deltaType: runInfo.deltaType, size: "small", className: css.duplicateInstances }));
+};
+var ChunkDataState;
+(function (ChunkDataState) {
+    ChunkDataState[ChunkDataState["ADDED"] = 2] = "ADDED";
+    ChunkDataState[ChunkDataState["REMOVED"] = 1] = "REMOVED";
+    ChunkDataState[ChunkDataState["NOT_CHANGED"] = 0] = "NOT_CHANGED";
+})(ChunkDataState || (ChunkDataState = {}));
+const ChunkDataStateKind = {
+    [ChunkDataState.ADDED]: 'info',
+    [ChunkDataState.REMOVED]: 'danger',
+    [ChunkDataState.NOT_CHANGED]: 'default',
+};
+function compareChunksData(currentChunkIds, baselineChunkIds) {
+    const result = [];
+    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');
+}
+const ChunksDelta = (props) => {
+    var _a, _b;
+    const { customComponentLink: CustomComponentLink, runs, chunks, chunkIds } = props;
+    const currentChunkIds = ((_a = runs[0]) === null || _a === void 0 ? void 0 : _a.chunkIds) || [];
+    const baselineChunkIds = ((_b = runs[runs.length - 1]) === null || _b === void 0 ? void 0 : _b.chunkIds) || [];
+    const chunksData = compareChunksData(currentChunkIds, baselineChunkIds);
+    return (React.createElement(Stack, { space: "xxxsmall" },
+        React.createElement("div", null, chunksData.map((chunkData) => {
+            const chunk = chunks === null || chunks === void 0 ? void 0 : chunks.find(({ id }) => id === chunkData.id);
+            if (!chunk) {
+                return null;
+            }
+            return (React.createElement(EntryInfoMetaLink, { as: CustomComponentLink, ...getBundleModulesByChunk(chunkIds, chunkData.id), className: cx(css.chunksItem, css[`chunksItem-${ChunkDataStateKind[chunkData.state]}`]) }, chunk.name));
+        }))));
 };
-ModuleInfo.propTypes = {
-    className: PropTypes.string,
-    item: PropTypes.shape({
-        key: PropTypes.string,
-        runs: PropTypes.arrayOf(PropTypes.shape({
-            key: PropTypes.string,
-            name: PropTypes.string,
-            chunkIds: PropTypes.arrayOf(PropTypes.string),
-        })),
-    }).isRequired,
-    labels: PropTypes.arrayOf(PropTypes.string).isRequired,
-    chunks: PropTypes.arrayOf(PropTypes.shape({
-        id: PropTypes.string,
-        name: PropTypes.string,
-    })),
-    chunkIds: PropTypes.arrayOf(PropTypes.string),
-    customComponentLink: PropTypes.elementType,
-    onClick: PropTypes.func,
+const ModuleSizeRunInfo = (props) => {
+    const { metric, title, titleTooltip, current, baseline } = props;
+    const runInfo = getMetricRunInfo(metric, current || 0, baseline);
+    return (React.createElement(RunInfo, { title: title, titleTooltip: titleTooltip, current: runInfo.displayValue, delta: runInfo.displayDeltaPercentage, deltaPercentage: runInfo.displayDelta, deltaType: runInfo.deltaType, baseline: baseline ? metric.formatter(baseline) : undefined }));
 };
-ModuleInfo.defaultProps = {
-    className: '',
-    chunks: [],
-    chunkIds: [],
-    customComponentLink: ComponentLink,
-    onClick: noop,
+const renderRunInfo = (item) => {
+    const itemModule = item;
+    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 (React.createElement(FlexStack, { space: "small", className: css.moduleSizes },
+        itemModule.duplicated && (React.createElement(React.Fragment, null,
+            React.createElement(ModuleSizeRunInfo, { metric: metric, title: ModuleSizeMetrics[ModuleSizeMetric.TOTAL_SIZE].label, titleTooltip: ModuleSizeMetrics[ModuleSizeMetric.TOTAL_SIZE].tooltip, current: currentRun === null || currentRun === void 0 ? void 0 : currentRun.sizeTotal, baseline: baselineRun === null || baselineRun === void 0 ? void 0 : baselineRun.sizeTotal }),
+            React.createElement(ModuleSizeRunInfo, { metric: metric, title: ModuleSizeMetrics[ModuleSizeMetric.DUPLICATE_SIZE].label, titleTooltip: ModuleSizeMetrics[ModuleSizeMetric.DUPLICATE_SIZE].tooltip, current: currentRun === null || currentRun === void 0 ? void 0 : currentRun.sizeDuplicate, baseline: baselineRun === null || baselineRun === void 0 ? void 0 : baselineRun.sizeDuplicate }))),
+        React.createElement(ModuleSizeRunInfo, { metric: metric, title: ModuleSizeMetrics[ModuleSizeMetric.SIZE].label, titleTooltip: ModuleSizeMetrics[ModuleSizeMetric.SIZE].tooltip, current: currentRun === null || currentRun === void 0 ? void 0 : currentRun.size, baseline: baselineRun === null || baselineRun === void 0 ? void 0 : baselineRun.size })));
+};
+export const ModuleInfo = (props) => {
+    var _a, _b;
+    const { className = '', item, labels, chunks = [], chunkIds = [], metricLabel = '', customComponentLink: CustomComponentLink = ComponentLink, onClick = noop, onClose, } = props;
+    const rootClassName = cx(css.root, className);
+    const tags = useMemo(() => {
+        if (!item.duplicated) {
+            return null;
+        }
+        return (React.createElement("div", null,
+            React.createElement(Tag, { as: CustomComponentLink, ...BUNDLE_MODULES_DUPLICATE, kind: "danger" }, "Duplicate")));
+    }, [item]);
+    const fileTypeLabel = FILE_TYPE_LABELS[item.fileType];
+    const sourceTypeLabel = item.thirdParty
+        ? MODULE_SOURCE_TYPE_LABELS.THIRD_PARTY
+        : MODULE_SOURCE_TYPE_LABELS.FIRST_PARTY;
+    const currentRun = item.runs[0];
+    const baselineRun = item.runs.length > 1 ? item.runs[item.runs.length - 1] : undefined;
+    const currentChunkCount = ((_a = currentRun === null || currentRun === void 0 ? void 0 : currentRun.chunkIds) === null || _a === void 0 ? void 0 : _a.length) || 0;
+    const baselineChunkCount = ((_b = baselineRun === null || baselineRun === void 0 ? void 0 : baselineRun.chunkIds) === null || _b === void 0 ? void 0 : _b.length) || 0;
+    const currentDuplicateInstances = currentChunkCount > 0 ? currentChunkCount - 1 : 0;
+    const baselineDuplicateInstances = baselineChunkCount > 0 ? baselineChunkCount - 1 : 0;
+    const hasDuplicates = currentDuplicateInstances !== 0 || baselineDuplicateInstances !== 0;
+    return (React.createElement(EntryInfo, { item: item, labels: labels, tags: tags, onClose: onClose, renderRunInfo: renderRunInfo, runSizeLabel: metricLabel, className: rootClassName },
+        React.createElement(Stack, { space: "xxxsmall" },
+            (item === null || item === void 0 ? void 0 : item.fileType) && (React.createElement(EntryInfo.Meta, { label: "File type", tooltip: "Module file type: JS, CSS" },
+                React.createElement(EntryInfoMetaLink, { as: CustomComponentLink, ...getBundleModulesByFileTpe(item.fileType, fileTypeLabel) }, fileTypeLabel))),
+            React.createElement(EntryInfo.Meta, { label: "Source", tooltip: "Module source type: first party, third party" },
+                React.createElement(EntryInfoMetaLink, { as: CustomComponentLink, ...getBundleModulesBySource(item.thirdParty || false, sourceTypeLabel), onClick: onClick }, sourceTypeLabel)),
+            hasDuplicates && (React.createElement(EntryInfo.Meta, { label: "Duplicates", tooltip: "Module duplicate instances" },
+                React.createElement(DuplicateInstances, { current: currentDuplicateInstances, baseline: baselineRun ? baselineDuplicateInstances : undefined }))),
+            React.createElement(EntryInfo.Meta, { label: "Chunks", tooltip: "Chunks that contain the module" },
+                React.createElement(ChunksDelta, { runs: item.runs, chunks: chunks, chunkIds: chunkIds, customComponentLink: CustomComponentLink })))));
 };
 //# sourceMappingURL=module-info.js.map